diff --git a/README.md b/README.md
index 2e91506a..e17cd74c 100644
--- a/README.md
+++ b/README.md
@@ -208,7 +208,7 @@ exposes to agents, and exported at 2x by FigCraft's own renderer. The source fil
Prototype and hand off
- Connections, triggers, actions and Smart Animate-style transitions, variables with conditionals (if / else if / else built in the interaction editor, expressions like count + 1), flows, a presentation view with device frames, hotspot hints and an Inspect panel, and a live preview pane. Alt to measure distances and padding on the canvas, Inspect mode with measurements, annotations in colour-coded categories, a ready-for-dev list with a focus view and Compare changes (before / after with property-level diffs since a frame was marked ready), and code (CSS, HTML, React, Leptos, SwiftUI, Compose) where components take their properties as parameters, comment threads pinned to frames (replies, @mentions, reactions, read state) and named version history. Export any layer at any scale to PNG, JPG, WebP, SVG or PDF.
+ Connections, triggers, actions and Smart Animate-style transitions, variables with conditionals (if / else if / else built in the interaction editor, expressions like count + 1), flows, a presentation view with device frames, hotspot hints and an Inspect panel, and a live preview pane. Alt to measure distances and padding on the canvas, Inspect mode with measurements, annotations in colour-coded categories, a ready-for-dev list with a focus view and Compare changes (before / after with property-level diffs since a frame was marked ready), and code (CSS, HTML, React, Vue, Leptos, SwiftUI, Compose) where components take their properties as parameters, comment threads pinned to frames (replies, @mentions, reactions, read state) and named version history. Export any layer at any scale to PNG, JPG, WebP, SVG or PDF.
diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index d1c03fe3..271193e0 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -37,7 +37,8 @@ const MAX_WARNINGS: usize = 50;
/// The languages a component can be connected in.
pub fn language(s: &str) -> Option {
- CodeLang::from_id(s).filter(|l| matches!(l, CodeLang::React | CodeLang::Leptos | CodeLang::SwiftUi | CodeLang::Compose | CodeLang::ArkUi))
+ CodeLang::from_id(s)
+ .filter(|l| matches!(l, CodeLang::React | CodeLang::Leptos | CodeLang::Vue | CodeLang::SwiftUi | CodeLang::Compose | CodeLang::ArkUi))
}
/// The layer `id`'s links are stored on: its component set, else its component (an instance's
@@ -66,6 +67,8 @@ pub fn import_line(link: &CodeLink, lang: CodeLang) -> String {
_ if path.is_empty() => String::new(),
CodeLang::React | CodeLang::ArkUi => format!("import {{ {} }} from {};", link.name.split('.').next().unwrap_or_default(), js_string(path)),
CodeLang::Leptos => format!("use {path}::{};", link.name.split('.').next().unwrap_or_default()),
+ // A single-file component is a default export.
+ CodeLang::Vue => format!("import {} from {};", link.name.split('.').next().unwrap_or_default(), js_string(path)),
_ => format!("import {path}"),
}
}
@@ -266,6 +269,8 @@ fn expr(doc: &Document, c: &Component, p: &Param, v: &Value, lang: CodeLang) ->
match (swapped, lang) {
(Some(l), CodeLang::React) => format!("<{} />", l.name),
(Some(l), CodeLang::Leptos) => format!("|| view! {{ <{} /> }}", l.name),
+ // A Vue binding takes the component itself.
+ (Some(l), CodeLang::Vue) => l.name.clone(),
(Some(l), CodeLang::SwiftUi) => format!("{}()", l.name),
(Some(l), CodeLang::ArkUi) => format!("() => {{ {}() }}", l.name),
(Some(l), _) => format!("{{ {}() }}", l.name),
@@ -280,22 +285,155 @@ fn pieces(t: &str) -> Vec> {
checkable.then(|| parse(t).ok()).flatten().unwrap_or_else(|| vec![Piece::Text(t)])
}
+/// Whether `s` ends inside an unclosed opening tag (no `>` outside quotes since the last `<`).
+fn inside_open_tag(s: &str) -> bool {
+ let mut in_tag = false;
+ let mut quote = None;
+ let mut chars = s.chars().peekable();
+ while let Some(c) = chars.next() {
+ match quote {
+ Some(q) => {
+ if c == q {
+ quote = None;
+ }
+ }
+ None => match c {
+ '<' if !in_tag && chars.peek().is_some_and(|ch| ch.is_ascii_alphabetic() || matches!(*ch, '/' | '!' | '?')) => {
+ in_tag = true;
+ }
+ '>' if in_tag => in_tag = false,
+ '"' | '\'' if in_tag => quote = Some(c),
+ _ => {}
+ },
+ }
+ }
+ in_tag
+}
+
+/// Where a placeholder sits in a Vue template: whether the attribute is bound, and the quote the
+/// template already opened (if any). `None` when it isn't in an attribute at all.
+fn vue_attribute(out: &str) -> Option<(bool, Option)> {
+ let end = out.trim_end();
+ if !inside_open_tag(end) {
+ return None;
+ }
+ let (after, quote) = match end.chars().last() {
+ Some(q @ ('"' | '\'')) => (&end[..end.len() - q.len_utf8()], Some(q)),
+ _ => (end, None),
+ };
+ let after = after.trim_end();
+ let eq = after.rfind('=')?;
+ // The placeholder must follow the `=` (or its opening quote) directly; text after a closed
+ // attribute (``) is template content, not an attribute value.
+ if !after[eq + 1..].trim().is_empty() {
+ return None;
+ }
+ let before = after[..eq].trim_end();
+ let name: String = before
+ .chars()
+ .rev()
+ .take_while(|c| c.is_ascii_alphanumeric() || matches!(c, '-' | '_' | ':' | '@' | '.' | '[' | ']'))
+ .collect::>()
+ .into_iter()
+ .rev()
+ .collect();
+ if name.is_empty() {
+ return None;
+ }
+ let bound = name.starts_with(':') || name.starts_with("v-bind:") || name.starts_with('@') || name.starts_with("v-on:") || name.starts_with("v-");
+ Some((bound, quote))
+}
+
+/// An expression written into an HTML attribute opened with `quote`: its own delimiter and markup
+/// become entities, so Vue's parser hands the expression its string literal intact.
+fn html_attr_expr(e: &str, quote: Option) -> String {
+ let e = e.replace('&', "&").replace('<', "<");
+ match quote {
+ Some('\'') => e.replace('\'', "'"),
+ _ => e.replace('"', """),
+ }
+}
+
+/// Literal text written into an HTML attribute opened with `quote`.
+fn html_attr_text(s: &str, quote: Option) -> String {
+ let s = s.replace('&', "&").replace('<', "<");
+ match quote {
+ Some('\'') => s.replace('\'', "'"),
+ _ => s.replace('"', """),
+ }
+}
+
+/// Literal text in Vue template content: braces would start an interpolation, so they are escaped.
+fn html_text(s: &str) -> String {
+ s.replace('&', "&").replace('<', "<").replace('>', ">").replace('{', "{").replace('}', "}")
+}
+
/// `link`'s template with `values` (one per parameter of `c`), every line prefixed by `pad`.
pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)], link: &CodeLink, lang: CodeLang, pad: &str) -> String {
let mut out = String::new();
+ // A quoted attribute stays open across substitutions: `title="{a} {b}"` must treat both
+ // placeholders as attribute values, not text after the first one.
+ let mut vue_attr: Option<(bool, Option)> = None;
for piece in pieces(&link.template) {
match piece {
- Piece::Text(t) => out.push_str(t),
+ Piece::Text(t) => {
+ out.push_str(t);
+ if let Some((_, Some(q))) = vue_attr
+ && t.contains(q)
+ {
+ vue_attr = None;
+ }
+ }
Piece::Value { name, inner } => match find(c, values, name) {
Some((p, v)) => {
let e = expr(doc, c, p, v, lang);
// JSX and `view!`: a plain string reads best as an attribute value, anything
// else is an expression in braces (JSX attribute strings have no escapes).
- let markup = matches!(lang, CodeLang::React | CodeLang::Leptos);
- if !markup || (out.ends_with('=') && e.starts_with('"') && !e.contains('\\')) {
- out.push_str(&e);
+ // Vue's bound attributes take an expression, so a string keeps its JS quotes
+ // inside the attribute (as entities); a static attribute takes plain text.
+ if lang == CodeLang::Vue {
+ match vue_attr.or_else(|| vue_attribute(&out)) {
+ Some((bound, quote)) => {
+ if bound {
+ let expr = html_attr_expr(&e, quote);
+ if quote.is_some() {
+ out.push_str(&expr);
+ } else {
+ out.push('"');
+ out.push_str(&expr);
+ out.push('"');
+ }
+ } else {
+ let text = match &p.kind {
+ ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or(""), quote),
+ _ => e.clone(),
+ };
+ if quote.is_some() {
+ out.push_str(&text);
+ } else {
+ out.push('"');
+ out.push_str(&text);
+ out.push('"');
+ }
+ }
+ vue_attr = quote.map(|q| (bound, Some(q)));
+ }
+ None => {
+ let text = match &p.kind {
+ ParamKind::Text | ParamKind::Variant(_) => html_text(v.as_str().unwrap_or("")),
+ _ => e.clone(),
+ };
+ out.push_str(&text);
+ vue_attr = None;
+ }
+ }
} else {
- out.push_str(&format!("{{{e}}}"));
+ let markup = matches!(lang, CodeLang::React | CodeLang::Leptos);
+ if !markup || (out.ends_with('=') && e.starts_with('"') && !e.contains('\\')) {
+ out.push_str(&e);
+ } else {
+ out.push_str(&format!("{{{e}}}"));
+ }
}
}
None => out.push_str(&format!("{{{inner}}}")),
@@ -317,6 +455,7 @@ fn default_template(c: &Component, lang: CodeLang, name: &str) -> String {
CodeLang::Leptos => {
format!("<{name}{} />", params.iter().map(|p| format!(" {}={{{p}}}", crate::component_codegen::rust_ident(p))).collect::())
}
+ CodeLang::Vue => format!("<{name}{} />", params.iter().map(|p| format!(" :{p}={{{p}}}")).collect::()),
CodeLang::SwiftUi => format!("{name}({})", params.iter().map(|p| format!("{p}: {{{p}}}")).collect::>().join(", ")),
CodeLang::ArkUi => format!("{name}({{ {} }})", params.iter().map(|p| format!("{p}: {{{p}}}")).collect::>().join(", ")),
_ => format!("{name}({})", params.iter().map(|p| format!("{p} = {{{p}}}")).collect::>().join(", ")),
@@ -338,6 +477,7 @@ pub fn check(c: &Component, link: &CodeLink, lang: CodeLang) -> std::result::Res
let path_ok = match lang {
CodeLang::React | CodeLang::ArkUi => !path.chars().any(|ch| ch.is_control() || ch == '"' || ch == '\\'),
CodeLang::Leptos => path.chars().all(|ch| ch.is_ascii_alphanumeric() || ch == '_' || ch == ':'),
+ CodeLang::Vue => path.chars().all(|ch| ch.is_ascii_alphanumeric() || "_./@-".contains(ch)),
_ => path.chars().all(|ch| ch.is_ascii_alphanumeric() || ch == '_' || ch == '.'),
};
if path.chars().count() > MAX_IMPORT || !path_ok {
@@ -345,6 +485,7 @@ pub fn check(c: &Component, link: &CodeLink, lang: CodeLang) -> std::result::Res
CodeLang::React => format!("importPath: a module path without quotes, up to {MAX_IMPORT} characters"),
CodeLang::ArkUi => format!("importPath: a module path without quotes, up to {MAX_IMPORT} characters"),
CodeLang::Leptos => format!("importPath: a Rust module path (letters, digits, _ and ::), up to {MAX_IMPORT} characters"),
+ CodeLang::Vue => format!("importPath: a module path (letters, digits, _ . / @ and -), up to {MAX_IMPORT} characters"),
_ => format!("importPath: a module or package name (letters, digits, _ and .), up to {MAX_IMPORT} characters"),
});
}
@@ -380,7 +521,7 @@ fn text(cmd: &str, p: &Value, key: &str) -> Result> {
/// The `language` parameter (default React).
fn lang_param(cmd: &str, p: &Value) -> Result {
match text(cmd, p, "language")? {
- Some(l) => language(&l).ok_or_else(|| bad(cmd, "language: react|leptos|swiftui|compose|arkui")),
+ Some(l) => language(&l).ok_or_else(|| bad(cmd, "language: react|leptos|vue|swiftui|compose|arkui")),
None => Ok(CodeLang::React),
}
}
@@ -410,7 +551,7 @@ pub fn specs() -> Vec {
spec!(
"codeConnect.set",
"Connect to code",
- "{id? (component, set or instance; default the selection), language?: react|leptos|swiftui|compose|arkui (default react), importPath?, name? (default the generated name), template? (default a call passing every property)} links the component (its set, for a variant) to its code component; fields left out keep their current value. Placeholders: {property} (its name or parameter name) and {property ? \"a\" : \"b\"}; other {…} stay as written → {component, language, code (the snippet for the layer), unknown (placeholder names that aren't properties)}",
+ "{id? (component, set or instance; default the selection), language?: react|leptos|vue|swiftui|compose|arkui (default react), importPath?, name? (default the generated name), template? (default a call passing every property)} links the component (its set, for a variant) to its code component; fields left out keep their current value. Placeholders: {property} (its name or parameter name) and {property ? \"a\" : \"b\"}; other {…} stay as written → {component, language, code (the snippet for the layer), unknown (placeholder names that aren't properties)}",
true,
|s, p| {
let cmd = "codeConnect.set";
@@ -525,7 +666,7 @@ fn import(s: &mut Session, p: &Value) -> Result {
let (Some(component), Some(lang), Some(name), Some(template)) =
(field("component"), field("language").and_then(language), field("name"), e.get("template").and_then(Value::as_str))
else {
- warnings.push(format!("link {}: needs component, language (react|leptos|swiftui|compose|arkui), name and template strings", i + 1));
+ warnings.push(format!("link {}: needs component, language (react|leptos|vue|swiftui|compose|arkui), name and template strings", i + 1));
continue;
};
let link = CodeLink {
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 6cdd8e67..1ee785e6 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -193,3 +193,79 @@ fn code_connect_commands_survive_junk() {
}
}
}
+
+#[test]
+fn vue_links_are_a_default_import_with_quoted_bindings() {
+ let mut s = Session::new();
+ let c = card(&mut s);
+ let i = idv(&ex(&mut s, "instance.create", json!({"component": c, "x": 300, "y": 0})));
+ ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Show dot": false, "Title": "Buy"}}));
+ // A single-file component is a default import. A bound attribute takes an expression, so a
+ // string keeps its JS quotes inside the attribute (as entities): `Buy` alone would be a
+ // variable, not the string.
+ let v = ex(
+ &mut s,
+ "codeConnect.set",
+ json!({"id": i, "language": "vue", "importPath": "@/components/Card.vue",
+ "template": ""}),
+ );
+ let want = "import Card from \"@/components/Card.vue\";\n\n\n";
+ assert_eq!(v["code"], want);
+ assert_eq!(code(&mut s, i, "vue"), want);
+ assert_eq!(ex(&mut s, "inspect.code", json!({"id": i, "language": "vue"}))["connected"], true);
+ // No template given: the generated one binds a quoted value for every property.
+ ex(&mut s, "codeConnect.remove", json!({"id": c, "language": "vue"}));
+ ex(&mut s, "codeConnect.set", json!({"id": c, "language": "vue", "importPath": "./Card.vue"}));
+ assert_eq!(code(&mut s, c, "vue"), "import Card from \"./Card.vue\";\n\n\n");
+ // A plain string attribute (no `:`) takes the text itself, and a variant binding is a string
+ // expression like any other.
+ ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": ""}));
+ assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n\n");
+ let (set, hover) = button(&mut s);
+ let b = idv(&ex(&mut s, "instance.create", json!({"component": hover, "x": 0, "y": 700})));
+ ex(&mut s, "codeConnect.set", json!({"id": b, "language": "vue", "template": ""}));
+ assert_eq!(code(&mut s, b, "vue"), "\n");
+ assert_eq!(id_of(&ex(&mut s, "codeConnect.set", json!({"id": set}))["component"]), Some(set));
+ // A string with escapes stays one value: the attribute delimiter is what gets escaped, so the
+ // binding stays a single well-formed attribute.
+ ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": ""}));
+ ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Say \"hi\""}}));
+ let escaped = code(&mut s, i, "vue");
+ let line = escaped.lines().find(|l| l.contains(""")).unwrap_or_default();
+ assert!(line.starts_with(""), "{line}");
+ // A single-quoted attribute keeps its delimiter (the expression's double quotes stay), and a
+ // placeholder in template content is text, not a quoted string.
+ ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Buy"}}));
+ ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": ""}));
+ assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n\n");
+ ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "{title}"}));
+ assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\nBuy\n");
+ // A second placeholder in the same quoted attribute is still attribute text, and its value's
+ // quotes are escaped.
+ ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Say \"hi\""}}));
+ ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": ""}));
+ assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n\n");
+ // Text after a completed tag is text, even when it contains `=`.
+ ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Buy"}}));
+ ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "
Total = {title}
"}));
+ assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n
Total = Buy
\n");
+ // Vue is linkable; a language that isn't stays refused.
+ assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "css"})).is_err(), "not a code language");
+ assert!(s.execute("codeConnect.set", &json!({"id": c, "language": "vue", "importPath": "a b"})).is_err(), "no spaces in a path");
+}
+
+#[test]
+fn vue_layer_trees_import_connected_components_in_script_setup() {
+ let mut s = Session::new();
+ let c = card(&mut s);
+ ex(&mut s, "codeConnect.set", json!({"id": c, "language": "vue", "importPath": "./Card.vue"}));
+ let screen = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 500, "width": 400, "height": 300, "name": "Screen"})));
+ ex(&mut s, "instance.create", json!({"component": c, "x": 20, "y": 30, "parent": screen}));
+ // A single-file component's imports belong in its `\n\n\n";
+ assert!(code.starts_with(want), "{code}");
+ assert_eq!(code.matches("import Card").count(), 1, "{code}");
+}
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 65d2bd91..7cf270a4 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -18,13 +18,13 @@ pub fn specs() -> Vec {
vec![spec!(
"inspect.code",
"Code for layer",
- "{id?, language?: css|html|react|leptos|tailwind|swiftui|compose|arkui (default css; html, react and leptos are the whole layer tree; components take their properties as parameters, instances pass their values; a component connected to code (codeConnect.set) gives its import and snippet instead; tailwind is React with Tailwind CSS v4 utilities for pages: fluid auto layout boxes, instances inlined with their overrides, bound variables as theme utilities), mobile? (tailwind: a mobile frame with the same layer names; the code is mobile first with the desktop layer's classes behind lg:), unit?: px|rem (CSS, HTML, React and Leptos; default px), rootFontSize? (rem: pixels per rem, default 16)} → {code, language, connected}",
+ "{id?, language?: css|html|react|leptos|vue|tailwind|swiftui|compose|arkui (default css; html, react, leptos and vue are the whole layer tree; components take their properties as parameters, instances pass their values; a component connected to code (codeConnect.set) gives its import and snippet instead; tailwind is React with Tailwind CSS v4 utilities for pages: fluid auto layout boxes, instances inlined with their overrides, bound variables as theme utilities), mobile? (tailwind: a mobile frame with the same layer names; the code is mobile first with the desktop layer's classes behind lg:), unit?: px|rem (CSS, HTML, React, Leptos and Vue; default px), rootFontSize? (rem: pixels per rem, default 16)} → {code, language, connected}",
false,
|s, p| {
let cmd = "inspect.code";
let id = targets(s, p).first().copied().ok_or_else(|| bad(cmd, "select a layer"))?;
let lang = match string(p, "language") {
- Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|leptos|tailwind|swiftui|compose|arkui"))?,
+ Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|leptos|vue|tailwind|swiftui|compose|arkui"))?,
None => CodeLang::Css,
};
let rem = match string(p, "unit").map(|u| u.to_ascii_lowercase()).as_deref() {
@@ -68,6 +68,8 @@ pub enum CodeLang {
React,
/// A Leptos component (`view!` markup) with its stylesheet.
Leptos,
+ /// A Vue single-file component (``, `\n\n{tail}")
+ }
+ None => crate::code_connect::with_imports(imports, code),
+ }
}
fn is_component(doc: &Document, id: NodeId) -> bool {
@@ -466,6 +492,23 @@ pub(crate) fn js_string(s: &str) -> String {
serde_json::to_string(&s).unwrap_or_else(|_| "\"\"".into())
}
+/// A JavaScript string literal safe inside a Vue single-file component: `<` is escaped, so a
+/// default containing `` can't close the `\n\n");
+ }
+ out.push_str(&format!("\n{markup}\n\n\n"));
+ out
+}
+
/// A Leptos `#[component]` with its variant enums and props (defaults as `#[prop]` attributes),
/// and its stylesheet.
fn leptos(doc: &Document, c: &Component) -> String {
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index dc14bcd0..22bb53c4 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -149,6 +149,17 @@ fn instances_are_calls_passing_the_values_they_set() {
assert_eq!(component_code(&mut s, i, "compose")["usage"], "Card(showDot = false, title = \"Say \\\"hi\\\" \\$5\\nnow\")\n");
assert_eq!(component_code(&mut s, i, "arkui")["usage"], "Card({ showDot: false, title: \"Say \\\"hi\\\" $5\\nnow\" })\n");
assert_eq!(component_code(&mut s, i, "leptos")["usage"], "\n");
+ // A quoted title becomes a binding whose attribute value is escaped: the expression itself
+ // keeps its JS quotes, and the attribute's own quotes are entities.
+ assert_eq!(component_code(&mut s, i, "vue")["usage"], "\n");
+ let vue = code(&mut s, i, "vue");
+ assert!(vue.starts_with("\n"), "{vue}");
+ // A plain attribute keeps HTML entities intact: a literal ampersand is written as `&`,
+ // and a literal `&` as `&`.
+ ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Fish & Chips"}}));
+ assert_eq!(component_code(&mut s, i, "vue")["usage"], "\n");
+ ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Fish & Chips"}}));
+ assert_eq!(component_code(&mut s, i, "vue")["usage"], "\n");
}
#[test]
@@ -252,6 +263,10 @@ fn instance_swap_properties_take_views() {
let leptos = code(&mut s, chip, "leptos");
assert!(leptos.contains(" #[prop(into, default = (|| view! { }).into())] icon: ViewFn,"), "{leptos}");
assert!(leptos.contains("{icon.run()}"), "{leptos}");
+ let vue = code(&mut s, chip, "vue");
+ assert!(vue.contains(" icon?: unknown;"), "{vue}");
+ assert!(vue.contains(" icon: HeartIcon,"), "the swap defaults to its component: {vue}");
+ assert!(vue.contains(""), "a swap is a component, not an element: {vue}");
let i = idv(&ex(&mut s, "instance.create", json!({"component": chip, "x": 0, "y": 100})));
ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Icon": star}}));
assert_eq!(component_code(&mut s, i, "react")["usage"], "} />\n");
@@ -259,6 +274,7 @@ fn instance_swap_properties_take_views() {
assert_eq!(component_code(&mut s, i, "compose")["usage"], "Chip(icon = { StarIcon() })\n");
assert_eq!(component_code(&mut s, i, "arkui")["usage"], "Chip({ icon: () => { StarIcon() } })\n");
assert_eq!(component_code(&mut s, i, "leptos")["usage"], " }} />\n");
+ assert_eq!(component_code(&mut s, i, "vue")["usage"], "\n");
}
#[test]
diff --git a/crates/engine/src/lib.rs b/crates/engine/src/lib.rs
index 06ddfde7..cf1613ab 100644
--- a/crates/engine/src/lib.rs
+++ b/crates/engine/src/lib.rs
@@ -2009,6 +2009,8 @@ mod version_tests;
#[cfg(test)]
mod view_behaviour_tests;
#[cfg(test)]
+mod vue_codegen_tests;
+#[cfg(test)]
mod widget_input_tests;
#[cfg(test)]
mod widgets_tests;
diff --git a/crates/engine/src/playground.rs b/crates/engine/src/playground.rs
index 0d836f6a..90a627b0 100644
--- a/crates/engine/src/playground.rs
+++ b/crates/engine/src/playground.rs
@@ -52,7 +52,7 @@ pub fn specs() -> Vec {
vec![spec!(
"component.playground",
"Component playground",
- "{id? (an instance, a component or a component set; default the selection), properties? {name: value} (variant, boolean, text and instance-swap properties, as instance.setProperties takes them), language? css|html|react|swiftui|compose|arkui (default react), path? (write the preview there as a PNG), scale? (the PNG's, default 2)} → {component, properties: [{name, type, options?, value}], language, code, width, height, path?} the component with those property values, tried on a copy: its code and its look. Nothing in the document changes",
+ "{id? (an instance, a component or a component set; default the selection), properties? {name: value} (variant, boolean, text and instance-swap properties, as instance.setProperties takes them), language? css|html|react|leptos|vue|swiftui|compose|arkui (default react), path? (write the preview there as a PNG), scale? (the PNG's, default 2)} → {component, properties: [{name, type, options?, value}], language, code, width, height, path?} the component with those property values, tried on a copy: its code and its look. Nothing in the document changes",
false,
|s, p| {
let cmd = "component.playground";
@@ -63,7 +63,7 @@ pub fn specs() -> Vec {
Some(_) => return Err(bad(cmd, "properties: {name: value}")),
};
let lang = match string(p, "language") {
- Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|swiftui|compose|arkui"))?,
+ Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|leptos|vue|swiftui|compose|arkui"))?,
None => CodeLang::React,
};
let (copy, inst) = build(s.doc()?, target, &values)?;
diff --git a/crates/engine/src/vue_codegen_tests.rs b/crates/engine/src/vue_codegen_tests.rs
new file mode 100644
index 00000000..a9916a65
--- /dev/null
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -0,0 +1,305 @@
+//! Vue code: `inspect.code {language: "vue"}` writes a single-file component — ``, a
+//! `\n\n\n"), "{out}");
+ // A text property is an interpolation, not React's braced expression.
+ assert!(out.contains("{{ title }}"), "{out}");
+}
+
+#[test]
+fn a_boolean_property_guards_its_layer_with_v_if() {
+ let mut s = Session::new();
+ let (c, _, _) = card(&mut s);
+ let out = vue(&mut s, c);
+ // Vue can't wrap an element in an expression: the guard rides on the element itself.
+ assert!(out.contains("v-if=\"showDot\""), "{out}");
+ assert!(!out.contains("showDot &&"), "{out}");
+}
+
+#[test]
+fn variants_switch_on_data_attributes() {
+ let mut s = Session::new();
+ let mut variants = Vec::new();
+ for (k, (state, color)) in [("Default", "#ff0000"), ("Hover", "#0000ff")].iter().enumerate() {
+ let f =
+ idv(&ex(&mut s, "frame.create", json!({"x": k as f64 * 150.0, "y": 0, "width": 100, "height": 40, "name": format!("State={state}")})));
+ ex(&mut s, "shape.rectangle", json!({"x": 0, "y": 0, "width": 100, "height": 40, "parent": f, "props": {"name": "Bg", "fill": color}}));
+ variants.push(idv(&ex(&mut s, "component.create", json!({"ids": [f]}))));
+ }
+ let set = idv(&ex(&mut s, "component.combineVariants", json!({"ids": variants})));
+ let out = vue(&mut s, set);
+ // A variant property is a string union, bound to the root's data attribute.
+ assert!(out.contains("state?: \"Default\" | \"Hover\";"), "{out}");
+ assert!(out.contains(":data-state=\"state\""), "{out}");
+ // What the other variant changes is a rule on that attribute, as on the web.
+ assert!(out.contains("[data-state=\"Hover\"]"), "{out}");
+}
+
+#[test]
+fn instances_are_calls_passing_the_values_they_set() {
+ let mut s = Session::new();
+ let (c, _, _) = card(&mut s);
+ let i = idv(&ex(&mut s, "instance.create", json!({"component": c, "x": 400, "y": 0})));
+ // Values left at the definition's default aren't passed.
+ assert_eq!(component_code(&mut s, i, "vue")["usage"], "\n");
+ ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Show dot": false, "Title": "Buy"}}));
+ // A plain string is an attribute value; anything else is a `:name` binding.
+ assert_eq!(component_code(&mut s, i, "vue")["usage"], "\n");
+ let out = code(&mut s, i, "vue");
+ assert!(out.starts_with("\n"), "{out}");
+ assert!(out.contains("defineProps<{"), "{out}");
+}
+
+#[test]
+fn a_layer_tree_with_an_instance_calls_it() {
+ let mut s = Session::new();
+ let (c, _, _) = card(&mut s);
+ let parent = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 500, "height": 300, "name": "Page"})));
+ ex(&mut s, "instance.create", json!({"component": c, "x": 10, "y": 10, "parent": parent}));
+ let out = vue(&mut s, parent);
+ assert!(out.contains(""), "{out}");
+ assert!(!out.contains("content?: "), "{out}");
+ assert!(!out.contains("props"), "{out}");
+
+ // Content in the slot is its fallback, shown until an instance fills it.
+ let mut s = Session::new();
+ let frame = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Shell2"})));
+ let body = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "parent": frame, "name": "Body2"})));
+ ex(&mut s, "text.create", json!({"text": "Empty", "x": 0, "y": 0, "parent": body, "props": {"name": "Hint"}}));
+ let c = idv(&ex(&mut s, "component.create", json!({"ids": [frame]})));
+ ex(&mut s, "component.makeSlot", json!({"id": body, "name": "Content"}));
+ let out = vue(&mut s, c);
+ assert!(out.contains(""), "{out}");
+ assert!(out.contains(""), "{out}");
+ assert!(out.contains("Empty"), "{out}");
+}
+
+#[test]
+fn identifiers_are_escaped_and_the_language_round_trips() {
+ let mut s = Session::new();
+ let (c, _, _) = card(&mut s);
+ // "Show dot" is not an identifier: it becomes camelCase in the props and the template alike.
+ let out = vue(&mut s, c);
+ assert!(out.contains("showDot"), "{out}");
+ assert!(!out.contains("Show dot"), "{out}");
+ // The id is discoverable from what the Inspect panel offers.
+ assert_eq!(CodeLang::from_id("vue"), Some(CodeLang::Vue));
+ assert_eq!(CodeLang::from_id("sfc"), Some(CodeLang::Vue));
+ assert!(CodeLang::Vue.is_web());
+ assert_eq!(CodeLang::Vue.id(), "vue");
+ assert!(CodeLang::ALL.contains(&CodeLang::Vue));
+}
+
+#[test]
+fn rem_converts_lengths_in_the_vue_template_and_its_style() {
+ let mut s = Session::new();
+ let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 320, "height": 64, "name": "Bar"})));
+ let out = ex(&mut s, "inspect.code", json!({"id": f, "language": "vue", "unit": "rem"}))["code"].as_str().unwrap_or_default().to_string();
+ assert!(out.contains("20rem"), "{out}");
+}
+
+#[test]
+fn a_keyword_property_name_stays_usable() {
+ let mut s = Session::new();
+ let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Row"})));
+ let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+ // "default" is a JavaScript keyword: the prop is renamed, and the template follows.
+ ex(&mut s, "component.addProperty", json!({"id": c, "name": "default", "type": "text", "default": "x"}));
+ let out = vue(&mut s, c);
+ assert!(out.contains("defaultValue"), "{out}");
+}
+
+#[test]
+fn a_property_named_props_is_not_shadowed() {
+ let mut s = Session::new();
+ let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Card"})));
+ let text = idv(&ex(&mut s, "text.create", json!({"text": "Hello", "x": 0, "y": 0, "parent": f, "props": {"name": "Label"}})));
+ let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+ ex(&mut s, "component.addProperty", json!({"id": c, "name": "Props", "type": "text", "layer": text}));
+ let out = vue(&mut s, c);
+ // No top-level `const props` that the template would resolve to instead of the property.
+ assert!(!out.contains("const props"), "{out}");
+ assert!(out.contains("props?: string;"), "{out}");
+ assert!(out.contains("{{ props }}"), "{out}");
+}
+
+#[test]
+fn a_nested_instance_keeps_its_v_if_guard() {
+ let mut s = Session::new();
+ let (card, _, _) = card(&mut s);
+ let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Toolbar"})));
+ ex(&mut s, "layout.add", json!({"ids": [f], "direction": "vertical"}));
+ let nested = idv(&ex(&mut s, "instance.create", json!({"component": card, "x": 10, "y": 10, "parent": f})));
+ let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+ ex(&mut s, "component.addProperty", json!({"id": c, "name": "Show card", "type": "boolean", "default": true, "layer": nested}));
+ ex(&mut s, "instance.setProperties", json!({"ids": [nested], "properties": {"Title": "a > b"}}));
+ let out = vue(&mut s, c);
+ // The call's early return must not swallow the guard `node` put on it, and the `>` inside a
+ // quoted value must not be mistaken for the tag's end.
+ assert!(out.contains("v-if=\"showCard\""), "{out}");
+ assert_eq!(out.matches("v-if=\"showCard\"").count(), 1, "{out}");
+ assert!(!out.contains("/ v-if"), "the guard must come before a self-closing slash: {out}");
+ assert!(out.contains("title=\"a > b\"") || out.contains("title=\"a > b\""), "{out}");
+}
+
+#[test]
+fn a_text_default_cannot_close_the_script_block() {
+ let mut s = Session::new();
+ let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Card"})));
+ let text = idv(&ex(&mut s, "text.create", json!({"text": "Hello", "x": 0, "y": 0, "parent": f, "props": {"name": "Title"}})));
+ let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+ ex(
+ &mut s,
+ "component.addProperty",
+ json!({"id": c, "name": "Title", "type": "text", "layer": text, "default": ""}),
+ );
+ let out = vue(&mut s, c);
+ assert!(out.contains("\\u003C/script>"), "{out}");
+ assert_eq!(out.matches("").count(), 1, "only the SFC's own closing tag: {out}");
+}
+
+#[test]
+fn slot_names_stay_distinct_when_idents_lowercase_alike() {
+ let mut s = Session::new();
+ let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Shell"})));
+ let a = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 100, "height": 100, "parent": f, "name": "A"})));
+ let b = idv(&ex(&mut s, "frame.create", json!({"x": 100, "y": 0, "width": 100, "height": 100, "parent": f, "name": "B"})));
+ let c = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+ ex(&mut s, "component.makeSlot", json!({"id": a, "name": "Foo Bar"}));
+ ex(&mut s, "component.makeSlot", json!({"id": b, "name": "Foobar"}));
+ let out = vue(&mut s, c);
+ assert!(out.contains(""), "{usage}");
+ assert!(usage.contains(""), "{usage}");
+}
+
+#[test]
+fn slot_content_css_reaches_the_parent_stylesheet() {
+ let mut s = Session::new();
+ let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Panel"})));
+ let content = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "parent": f, "name": "Content"})));
+ let panel = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+ ex(&mut s, "component.makeSlot", json!({"id": content, "name": "Content"}));
+ let screen = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 400, "width": 400, "height": 300, "name": "Screen"})));
+ let i = idv(&ex(&mut s, "instance.create", json!({"component": panel, "x": 10, "y": 10, "parent": screen})));
+ let slot = {
+ let doc = s.doc().unwrap();
+ crate::components::slots_of(doc, i).first().map(|(l, _)| *l).unwrap()
+ };
+ ex(&mut s, "shape.rectangle", json!({"x": 0, "y": 0, "width": 10, "height": 10, "parent": slot, "props": {"name": "Swatch", "fill": "#FF0000"}}));
+ // The layer's class rules belong to the tree that holds the instance, not to a discarded
+ // snippet: both web targets keep them in their stylesheet.
+ let out = vue(&mut s, screen);
+ assert!(out.contains(".slot-content-swatch {"), "{out}");
+ assert!(out.contains("#FF0000"), "{out}");
+ assert!(code(&mut s, screen, "react").contains(".slot-content-swatch {"));
+}
+
+#[test]
+fn slot_content_classes_are_unique_across_slots() {
+ let mut s = Session::new();
+ let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Panel"})));
+ let one = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 100, "height": 100, "parent": f, "name": "One"})));
+ let two = idv(&ex(&mut s, "frame.create", json!({"x": 100, "y": 0, "width": 100, "height": 100, "parent": f, "name": "Two"})));
+ let panel = idv(&ex(&mut s, "component.create", json!({"ids": [f]})));
+ ex(&mut s, "component.makeSlot", json!({"id": one, "name": "One"}));
+ ex(&mut s, "component.makeSlot", json!({"id": two, "name": "Two"}));
+ let screen = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 400, "width": 400, "height": 300, "name": "Screen"})));
+ let i = idv(&ex(&mut s, "instance.create", json!({"component": panel, "x": 10, "y": 10, "parent": screen})));
+ let slots = {
+ let doc = s.doc().unwrap();
+ crate::components::slots_of(doc, i)
+ };
+ for (name, fill) in [("One", "#FF0000"), ("Two", "#0000FF")] {
+ let slot = slots.iter().find(|(_, n)| n.as_str() == name).map(|(l, _)| *l).unwrap();
+ ex(&mut s, "shape.rectangle", json!({"x": 0, "y": 0, "width": 10, "height": 10, "parent": slot, "props": {"name": "Swatch", "fill": fill}}));
+ }
+ let out = vue(&mut s, screen);
+ // Same layer name in two slots: each slot's rules keep their own class.
+ assert!(out.contains(".slot-one-swatch {"), "{out}");
+ assert!(out.contains(".slot-two-swatch {"), "{out}");
+ assert!(out.contains("#FF0000"), "{out}");
+ assert!(out.contains("#0000FF"), "{out}");
+}
diff --git a/crates/ui-egui/locales/bn.toml b/crates/ui-egui/locales/bn.toml
index cccea99b..06a300e5 100644
--- a/crates/ui-egui/locales/bn.toml
+++ b/crates/ui-egui/locales/bn.toml
@@ -245,7 +245,7 @@ status = "draft — needs native review"
"Changes on main" = "প্রধান (main)-এ পরিবর্তন"
"Changes on the branch" = "ব্রাঞ্চে পরিবর্তন"
"Changes unknown" = "পরিবর্তন অজ্ঞাত"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, SwiftUI, Compose বা ArkUI বেছে নিন।"
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, Vue, SwiftUI, Compose বা ArkUI বেছে নিন।"
"Choose another profile to change it." = "পরিবর্তন করতে অন্য একটি প্রোফাইল বেছে নিন।"
"Choose collection" = "সংগ্রহ (collection) বেছে নিন"
"Choose image" = "ছবি বেছে নিন"
diff --git a/crates/ui-egui/locales/cs.toml b/crates/ui-egui/locales/cs.toml
index f3d04ec7..bb4ce14d 100644
--- a/crates/ui-egui/locales/cs.toml
+++ b/crates/ui-egui/locales/cs.toml
@@ -235,7 +235,7 @@ status = "draft — needs native review"
"Changes on main" = "Změny v hlavním souboru"
"Changes on the branch" = "Změny ve větvi"
"Changes unknown" = "Změny nejsou známy"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Pro propojení této komponenty s jejím kódem vyberte nahoře React, Leptos, SwiftUI, Compose nebo ArkUI."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Pro propojení této komponenty s jejím kódem vyberte nahoře React, Leptos, Vue, SwiftUI, Compose nebo ArkUI."
"Choose another profile to change it." = "Pro změnu vyberte jiný profil."
"Choose collection" = "Vybrat kolekci"
"Choose image" = "Vybrat obrázek"
diff --git a/crates/ui-egui/locales/de.toml b/crates/ui-egui/locales/de.toml
index 5a555d51..fa754a27 100644
--- a/crates/ui-egui/locales/de.toml
+++ b/crates/ui-egui/locales/de.toml
@@ -230,7 +230,7 @@ status = "draft — needs native review"
"Changes on main" = "Änderungen in der Hauptdatei"
"Changes on the branch" = "Änderungen im Branch"
"Changes unknown" = "Änderungen unbekannt"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Wählen Sie oben React, Leptos, SwiftUI, Compose oder ArkUI, um diese Komponente mit ihrem Code zu verbinden."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Wählen Sie oben React, Leptos, Vue, SwiftUI, Compose oder ArkUI, um diese Komponente mit ihrem Code zu verbinden."
"Choose another profile to change it." = "Wählen Sie ein anderes Profil, um es zu ändern."
"Choose collection" = "Sammlung wählen"
"Choose image" = "Bild wählen"
diff --git a/crates/ui-egui/locales/en.toml b/crates/ui-egui/locales/en.toml
index 9be2eb21..048c451d 100644
--- a/crates/ui-egui/locales/en.toml
+++ b/crates/ui-egui/locales/en.toml
@@ -248,7 +248,7 @@ name = "English"
"Changes on main" = "Changes on main"
"Changes on the branch" = "Changes on the branch"
"Changes unknown" = "Changes unknown"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code."
"Choose another profile to change it." = "Choose another profile to change it."
"Choose collection" = "Choose collection"
"Choose image" = "Choose image"
diff --git a/crates/ui-egui/locales/es.toml b/crates/ui-egui/locales/es.toml
index b5e19581..efab3882 100644
--- a/crates/ui-egui/locales/es.toml
+++ b/crates/ui-egui/locales/es.toml
@@ -247,7 +247,7 @@ status = "draft — needs native review"
"Changes on main" = "Cambios en la principal"
"Changes on the branch" = "Cambios en la rama"
"Changes unknown" = "Cambios desconocidos"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Elige React, Leptos, SwiftUI, Compose o ArkUI arriba para conectar este componente con su código."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Elige React, Leptos, Vue, SwiftUI, Compose o ArkUI arriba para conectar este componente con su código."
"Choose another profile to change it." = "Elige otro perfil para cambiarlo."
"Choose collection" = "Elegir colección"
"Choose image" = "Elegir imagen"
diff --git a/crates/ui-egui/locales/fi.toml b/crates/ui-egui/locales/fi.toml
index 95b9f965..afa7d88a 100644
--- a/crates/ui-egui/locales/fi.toml
+++ b/crates/ui-egui/locales/fi.toml
@@ -236,7 +236,7 @@ status = "draft — needs native review"
"Check" = "Valintamerkki"
"Checking the fonts installed on this computer…" = "Tarkistetaan tämän tietokoneen asennettuja fontteja…"
"Checking the server…" = "Tarkistetaan palvelinta…"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Valitse yllä React, Leptos, SwiftUI, Compose tai ArkUI yhdistääksesi tämän komponentin sen koodiin."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Valitse yllä React, Leptos, Vue, SwiftUI, Compose tai ArkUI yhdistääksesi tämän komponentin sen koodiin."
"Chevron" = "Kulmanuoli"
"Choose another profile to change it." = "Vaihda valitsemalla toinen profiili."
"Choose collection" = "Valitse kokoelma"
diff --git a/crates/ui-egui/locales/fr.toml b/crates/ui-egui/locales/fr.toml
index 9a6b3c67..46d833e2 100644
--- a/crates/ui-egui/locales/fr.toml
+++ b/crates/ui-egui/locales/fr.toml
@@ -239,7 +239,7 @@ status = "draft — needs native review"
"Changes on main" = "Modifications dans le fichier principal"
"Changes on the branch" = "Modifications dans la branche"
"Changes unknown" = "Modifications inconnues"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Choisissez React, Leptos, SwiftUI, Compose ou ArkUI ci-dessus pour relier ce composant à son code."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Choisissez React, Leptos, Vue, SwiftUI, Compose ou ArkUI ci-dessus pour relier ce composant à son code."
"Choose another profile to change it." = "Choisissez un autre profil pour le changer."
"Choose collection" = "Choisir une collection"
"Choose image" = "Choisir une image"
diff --git a/crates/ui-egui/locales/id.toml b/crates/ui-egui/locales/id.toml
index aee866b1..2430bc67 100644
--- a/crates/ui-egui/locales/id.toml
+++ b/crates/ui-egui/locales/id.toml
@@ -239,7 +239,7 @@ status = "draft — needs native review"
"Changes on main" = "Perubahan di main"
"Changes on the branch" = "Perubahan di branch"
"Changes unknown" = "Perubahan tidak diketahui"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Pilih React, Leptos, SwiftUI, Compose, atau ArkUI di atas untuk menghubungkan component ini ke kodenya."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Pilih React, Leptos, Vue, SwiftUI, Compose, atau ArkUI di atas untuk menghubungkan component ini ke kodenya."
"Choose another profile to change it." = "Pilih profil lain untuk mengubahnya."
"Choose collection" = "Pilih koleksi"
"Choose image" = "Pilih gambar"
diff --git a/crates/ui-egui/locales/it.toml b/crates/ui-egui/locales/it.toml
index 181848f4..d31ab7b6 100644
--- a/crates/ui-egui/locales/it.toml
+++ b/crates/ui-egui/locales/it.toml
@@ -228,7 +228,7 @@ status = "draft — needs native review"
"Changes on main" = "Modifiche su main"
"Changes on the branch" = "Modifiche sul ramo"
"Changes unknown" = "Modifiche sconosciute"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Scegli React, Leptos, SwiftUI, Compose o ArkUI qui sopra per collegare questo componente al suo codice."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Scegli React, Leptos, Vue, SwiftUI, Compose o ArkUI qui sopra per collegare questo componente al suo codice."
"Choose another profile to change it." = "Scegli un altro profilo per cambiarlo."
"Choose collection" = "Scegli collezione"
"Choose image" = "Scegli immagine"
diff --git a/crates/ui-egui/locales/ja.toml b/crates/ui-egui/locales/ja.toml
index 30650bbc..c20ae131 100644
--- a/crates/ui-egui/locales/ja.toml
+++ b/crates/ui-egui/locales/ja.toml
@@ -240,7 +240,7 @@ status = "draft — needs native review"
"Changes on main" = "メインの変更"
"Changes on the branch" = "ブランチの変更"
"Changes unknown" = "変更内容は不明"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "上で React、Leptos、SwiftUI、Compose、ArkUI のいずれかを選び、このコンポーネントをコードに接続。"
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "上で React、Leptos、Vue、SwiftUI、Compose、ArkUI のいずれかを選び、このコンポーネントをコードに接続。"
"Choose another profile to change it." = "変更するには別のプロファイルを選択。"
"Choose collection" = "コレクションを選択"
"Choose image" = "画像を選択"
diff --git a/crates/ui-egui/locales/ka.toml b/crates/ui-egui/locales/ka.toml
index 8b86338a..02e62c04 100644
--- a/crates/ui-egui/locales/ka.toml
+++ b/crates/ui-egui/locales/ka.toml
@@ -247,7 +247,7 @@ status = "draft — reviewed by a native speaker, awaiting a maintainer's approv
"Changes on main" = "ცვლილებები მთავარში"
"Changes on the branch" = "ცვლილებები განშტოებაში"
"Changes unknown" = "ცვლილებები უცნობია"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, SwiftUI, Compose ან ArkUI."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, Vue, SwiftUI, Compose ან ArkUI."
"Choose another profile to change it." = "მის შესაცვლელად აირჩიეთ სხვა პროფილი."
"Choose collection" = "კოლექციის არჩევა"
"Choose image" = "გამოსახულების არჩევა"
diff --git a/crates/ui-egui/locales/ko.toml b/crates/ui-egui/locales/ko.toml
index 5a976f97..6e1087c7 100644
--- a/crates/ui-egui/locales/ko.toml
+++ b/crates/ui-egui/locales/ko.toml
@@ -230,7 +230,7 @@ status = "draft — needs native review"
"Changes on main" = "메인의 변경 사항"
"Changes on the branch" = "브랜치의 변경 사항"
"Changes unknown" = "변경 내용 알 수 없음"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "위에서 React, Leptos, SwiftUI, Compose 또는 ArkUI를 선택해 이 컴포넌트를 코드에 연결하세요."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "위에서 React, Leptos, Vue, SwiftUI, Compose 또는 ArkUI를 선택해 이 컴포넌트를 코드에 연결하세요."
"Choose another profile to change it." = "변경하려면 다른 프로필을 선택하세요."
"Choose collection" = "컬렉션 선택"
"Choose image" = "이미지 선택"
diff --git a/crates/ui-egui/locales/nl.toml b/crates/ui-egui/locales/nl.toml
index 6cac7aa9..e394603c 100644
--- a/crates/ui-egui/locales/nl.toml
+++ b/crates/ui-egui/locales/nl.toml
@@ -236,7 +236,7 @@ status = "draft — needs native review"
"Check" = "Vinkje"
"Checking the fonts installed on this computer…" = "De lettertypen op deze computer worden gecontroleerd…"
"Checking the server…" = "Server controleren…"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Kies hierboven React, Leptos, SwiftUI, Compose of ArkUI om dit component aan zijn code te koppelen."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Kies hierboven React, Leptos, Vue, SwiftUI, Compose of ArkUI om dit component aan zijn code te koppelen."
"Chevron" = "Punthaak"
"Choose another profile to change it." = "Kies een ander profiel om dit te wijzigen."
"Choose collection" = "Kies een verzameling"
diff --git a/crates/ui-egui/locales/pl.toml b/crates/ui-egui/locales/pl.toml
index a435726c..05eae708 100644
--- a/crates/ui-egui/locales/pl.toml
+++ b/crates/ui-egui/locales/pl.toml
@@ -245,7 +245,7 @@ name = "Polski"
"Changes on main" = "Zmiany w gałęzi głównej"
"Changes on the branch" = "Zmiany w gałęzi"
"Changes unknown" = "Nieznane zmiany"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Wybierz React, Leptos, SwiftUI, Compose lub ArkUI powyżej, aby połączyć ten komponent z jego kodem."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Wybierz React, Leptos, Vue, SwiftUI, Compose lub ArkUI powyżej, aby połączyć ten komponent z jego kodem."
"Choose another profile to change it." = "Wybierz inny profil, aby go zmienić."
"Choose collection" = "Wybierz kolekcję"
"Choose image" = "Wybierz obraz"
diff --git a/crates/ui-egui/locales/pt-BR.toml b/crates/ui-egui/locales/pt-BR.toml
index ff73e5bc..c9201d2f 100644
--- a/crates/ui-egui/locales/pt-BR.toml
+++ b/crates/ui-egui/locales/pt-BR.toml
@@ -228,7 +228,7 @@ status = "draft — needs native review"
"Changes on main" = "Alterações no principal"
"Changes on the branch" = "Alterações na branch"
"Changes unknown" = "Alterações desconhecidas"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Escolha React, Leptos, SwiftUI, Compose ou ArkUI acima para conectar este componente ao código dele."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Escolha React, Leptos, Vue, SwiftUI, Compose ou ArkUI acima para conectar este componente ao código dele."
"Choose another profile to change it." = "Escolha outro perfil para alterá-lo."
"Choose collection" = "Escolher coleção"
"Choose image" = "Escolher imagem"
diff --git a/crates/ui-egui/locales/ru.toml b/crates/ui-egui/locales/ru.toml
index 7d1d1000..4c504645 100644
--- a/crates/ui-egui/locales/ru.toml
+++ b/crates/ui-egui/locales/ru.toml
@@ -242,7 +242,7 @@ name = "Русский"
"Changes on main" = "Изменения в основной ветке"
"Changes on the branch" = "Изменения в ветке"
"Changes unknown" = "Изменения неизвестны"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Выберите выше React, Leptos, SwiftUI, Compose или ArkUI, чтобы связать компонент с его кодом."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Выберите выше React, Leptos, Vue, SwiftUI, Compose или ArkUI, чтобы связать компонент с его кодом."
"Choose another profile to change it." = "Для смены выберите другой профиль."
"Choose collection" = "Выбрать коллекцию"
"Choose image" = "Выбрать изображение"
diff --git a/crates/ui-egui/locales/sv.toml b/crates/ui-egui/locales/sv.toml
index 0dfbb2fa..617cf354 100644
--- a/crates/ui-egui/locales/sv.toml
+++ b/crates/ui-egui/locales/sv.toml
@@ -242,7 +242,7 @@ name = "Svenska"
"Changes on main" = "Ändringar i main"
"Changes on the branch" = "Ändringar i grenen"
"Changes unknown" = "Okända ändringar"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Välj React, Leptos, SwiftUI, Compose eller ArkUI ovan för att koppla den här komponenten till dess kod."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Välj React, Leptos, Vue, SwiftUI, Compose eller ArkUI ovan för att koppla den här komponenten till dess kod."
"Choose another profile to change it." = "Välj en annan profil för att ändra den."
"Choose collection" = "Välj samling"
"Choose image" = "Välj bild"
diff --git a/crates/ui-egui/locales/th.toml b/crates/ui-egui/locales/th.toml
index 2a53c86d..560975a1 100644
--- a/crates/ui-egui/locales/th.toml
+++ b/crates/ui-egui/locales/th.toml
@@ -243,7 +243,7 @@ status = "draft — needs native review"
"Changes on main" = "การเปลี่ยนแปลงบนเมน"
"Changes on the branch" = "การเปลี่ยนแปลงบนแบรนช์"
"Changes unknown" = "ไม่ทราบการเปลี่ยนแปลง"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "เลือก React, Leptos, SwiftUI, Compose หรือ ArkUI ด้านบนเพื่อเชื่อมคอมโพเนนต์นี้กับโค้ด"
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "เลือก React, Leptos, Vue, SwiftUI, Compose หรือ ArkUI ด้านบนเพื่อเชื่อมคอมโพเนนต์นี้กับโค้ด"
"Choose another profile to change it." = "เลือกโปรไฟล์อื่นเพื่อเปลี่ยน"
"Choose collection" = "เลือกคอลเลกชัน"
"Choose image" = "เลือกรูปภาพ"
diff --git a/crates/ui-egui/locales/tr.toml b/crates/ui-egui/locales/tr.toml
index 58166c93..b5a73ed9 100644
--- a/crates/ui-egui/locales/tr.toml
+++ b/crates/ui-egui/locales/tr.toml
@@ -239,7 +239,7 @@ name = "Türkçe"
"Changes on main" = "Ana dosyadaki değişiklikler"
"Changes on the branch" = "Daldaki değişiklikler"
"Changes unknown" = "Değişiklikler bilinmiyor"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Bu bileşeni koduna bağlamak için yukarıdan React, Leptos, SwiftUI, Compose veya ArkUI seçin."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Bu bileşeni koduna bağlamak için yukarıdan React, Leptos, Vue, SwiftUI, Compose veya ArkUI seçin."
"Choose another profile to change it." = "Değiştirmek için başka bir profil seçin."
"Choose collection" = "Koleksiyon seç"
"Choose image" = "Görüntü seç"
diff --git a/crates/ui-egui/locales/vi.toml b/crates/ui-egui/locales/vi.toml
index 5b97ab1b..e130afbf 100644
--- a/crates/ui-egui/locales/vi.toml
+++ b/crates/ui-egui/locales/vi.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
"Changes unknown" = "Không rõ thay đổi"
"Checking the fonts installed on this computer…" = "Đang kiểm tra các phông chữ cài đặt trên máy tính này…"
"Checking the server…" = "Đang kiểm tra máy chủ…"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Hãy chọn React, Leptos, SwiftUI, Compose hoặc ArkUI ở trên để kết nối thành phần này với mã nguồn."
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "Hãy chọn React, Leptos, Vue, SwiftUI, Compose hoặc ArkUI ở trên để kết nối thành phần này với mã nguồn."
"Choose another profile to change it." = "Hãy chọn hồ sơ khác để thay đổi."
"Choose collection" = "Chọn bộ sưu tập"
"Choose image" = "Chọn hình ảnh"
diff --git a/crates/ui-egui/locales/zh-Hans.toml b/crates/ui-egui/locales/zh-Hans.toml
index a3c5c92e..dc44542d 100644
--- a/crates/ui-egui/locales/zh-Hans.toml
+++ b/crates/ui-egui/locales/zh-Hans.toml
@@ -231,7 +231,7 @@ status = "draft — needs native review"
"Changes on main" = "主文件上的更改"
"Changes on the branch" = "分支上的更改"
"Changes unknown" = "更改未知"
-"Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code." = "在上方选择 React、Leptos、SwiftUI、Compose 或 ArkUI，将此组件关联到其代码。"
+"Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code." = "在上方选择 React、Leptos、Vue、SwiftUI、Compose 或 ArkUI，将此组件关联到其代码。"
"Choose another profile to change it." = "选择其他配置文件以更改。"
"Choose collection" = "选择集合"
"Choose image" = "选择图片"
diff --git a/crates/ui-egui/src/dev_mode.rs b/crates/ui-egui/src/dev_mode.rs
index 5fcad6f4..cac69330 100644
--- a/crates/ui-egui/src/dev_mode.rs
+++ b/crates/ui-egui/src/dev_mode.rs
@@ -445,7 +445,7 @@ pub fn connect_section(app: &mut FigApp, ui: &mut Ui, doc: &Document, id: NodeId
let text = if connectable {
tr("Link this component to its code component: instances then show your real snippet with their values.")
} else {
- tr("Choose React, Leptos, SwiftUI, Compose or ArkUI above to connect this component to its code.")
+ tr("Choose React, Leptos, Vue, SwiftUI, Compose or ArkUI above to connect this component to its code.")
};
widgets::note(ui, text, t.text_secondary);
return;
diff --git a/docs/dev-mode-parity.md b/docs/dev-mode-parity.md
index 3368153e..7d21c5fa 100644
--- a/docs/dev-mode-parity.md
+++ b/docs/dev-mode-parity.md
@@ -12,13 +12,13 @@ repository, third-party integrations. Remaining: 1–2 h.
|---|---|---|
| Dev Mode toggle (Shift+D), Inspect panel | done | the canvas only inspects: presses select, pan and comment but never move, resize, draw or edit text and vectors; menus and shortcuts refuse design edits with a note (Dev Mode's annotations, statuses, dev resources, measurements, code connections and comments still work); a drawing tool chosen in the toolbar goes back to the design. The layers panel only selects and expands (no renaming, reordering, hiding or locking; a double click says why), and the Pages list only opens pages (no adding, renaming, reordering, duplicating or deleting). Files dropped on the canvas aren't imported (a dropped document still opens as a file of its own), and the Assets panel places, swaps and applies nothing, doesn't change Hide when publishing, and doesn't accept library updates or add, remove or swap libraries; each says why |
| Properties with their styles and variables; redlines on hover | done | positions from the frame around the layer (groups aren't frames), rotation, radius (CSS corner order), opacity, blend; colours in hex, RGB, CSS, HSL or HSB (`inspect.properties {colorFormat}`, the Inspect tab's Color format) |
-| Code: CSS, iOS (SwiftUI), Android (Compose) | done | plus HTML, React and Leptos (ours; Leptos: `#[component]` functions with `#[prop]` defaults, variant enums and `view!` markup); components take properties as parameters, instances are calls; CSS in px or rem (`inspect.code {unit, rootFontSize}`), with rotation, blend modes, gradient directions and kinds (linear, radial, conic), text alignment, case and decoration; class names from layer names transliterate non-ASCII scripts into readable ASCII (로그인 화면 → `rogeuin-hwamyeon`, кнопка → `knopka`, über → `uber`; symbols-only names take the node's kind, `.text`), and the 40-character cut lands on a word boundary (#1235) |
+| Code: CSS, iOS (SwiftUI), Android (Compose) | done | plus HTML, React, Vue and Leptos (ours; Leptos: `#[component]` functions with `#[prop]` defaults, variant enums and `view!` markup); components take properties as parameters, instances are calls; CSS in px or rem (`inspect.code {unit, rootFontSize}`), with rotation, blend modes, gradient directions and kinds (linear, radial, conic), text alignment, case and decoration; class names from layer names transliterate non-ASCII scripts into readable ASCII (로그인 화면 → `rogeuin-hwamyeon`, кнопка → `knopka`, über → `uber`; symbols-only names take the node's kind, `.text`), and the 40-character cut lands on a word boundary (#1235) |
| Assets list with export | done | layers with export settings, icons (small, vector shapes only: SVG) and images (PNG); the icon rule is ours |
| Annotations: pinned properties, categories, coloured callouts, filter | done | |
| Ready for dev list, statuses, "Changed" after edits | done | the list filters Ready for dev, Changed, Completed or any, and badges changed ones (`inspect.readyForDev {status: changed}`, `changed` per item); only sections and frames at the top of a page or section take a status (others are refused) |
| Focus view (one frame, previous / next) | done | |
| Compare changes (before/after side by side or overlaid, property diffs) | done | against the snapshot taken when a frame was first changed after it was marked ready, or any saved version (`dev.compare {version}`; the view's Compare with menu); a frame that isn't ready for dev compares with versions |
-| Code connect (map components to repository code) | done | per language (React, Leptos, SwiftUI, Compose): import path, name and a template with `{property}` and `{property ? "a" : "b"}` placeholders; instances (also inside generated layer trees) show the snippet with their values; edited in the Inspect panel with a live preview; `figcraft.connect.json` export/import; generated layer trees bring the import lines of the connected components they call (also in definitions, slots and swapped-in instances) once each at the top, per language. No CLI publishing mappings from the code repository |
+| Code connect (map components to repository code) | done | per language (React, Leptos, Vue, SwiftUI, Compose, ArkUI): import path, name and a template with `{property}` and `{property ? "a" : "b"}` placeholders; instances (also inside generated layer trees) show the snippet with their values; edited in the Inspect panel with a live preview; `figcraft.connect.json` export/import; generated layer trees bring the import lines of the connected components they call (also in definitions, slots and swapped-in instances) once each at the top, per language. No CLI publishing mappings from the code repository |
| Plugins in Dev Mode (Jira, GitHub, etc.) | partial | FigCraft's own WASM plugins that only read run from the Inspect tab, with their panels (callbacks can only read); no third-party integrations |
| Measurements (redlines on hover, Alt in the design) | done | distances between the selection and the hovered layer, its parent or a guide, auto layout padding and gaps (Shift+Alt); measurements kept on the canvas (`devMode.addMeasurement` between two layers, along a side or to the layer around it; stored on the layer, saved, synced, undoable) drawn in Dev Mode as labelled redlines that follow the layers, listed, placed and removed in the Inspect tab; a measurement whose other layer was deleted isn't drawn until an undo brings it back |
| VS Code extension | out of scope | FigCraft's MCP server and control channel already serve design data, code and connected snippets to agents and editors |
diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index 790f8ec8..72e95c63 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -56,7 +56,7 @@ export limit, not a native document nesting limit.
| PDF | yes | yes | one page per frame, real selectable text in subset fonts, links, vectors and gradients as vectors, effects as images; bleed, crop/bleed marks, page boxes, naive CMYK; checked by rendering the PDF back against PNG exports; explicit depth-limit refusal | CMYK output intent 2–4 |
| WebP | — | yes (ours) | | — |
| Copy as CSS / SVG / PNG / text / link | yes | yes | Copy as PNG: the whole selection at 2x | — |
-| Dev Mode code (CSS, iOS SwiftUI, Android Compose) | yes | yes, plus HTML and React | see [dev-mode-parity](dev-mode-parity.md) | — |
+| Dev Mode code (CSS, iOS SwiftUI, Android Compose) | yes | yes, plus HTML, React, Leptos and Vue | see [dev-mode-parity](dev-mode-parity.md) | — |
| `.fig` ("Save local copy") | yes | **experimental** | the whole file, also as a copy from File ▸ Save as… (the document keeps its `.figcraft` path and unsaved state); see [Export to `.fig`](#export-to-fig-experimental). Round trips through our own importer; written files checked by opening them in other software: layers, fills, gradients, strokes, shadows, vectors, components and text draw as in FigCraft; resized and scaled instances keep their size and lay their layers out for it, variables with their modes and colour bindings resolve there (a frame set to another mode shows that mode's colours, also inside instances), colour, text, effect and grid styles are listed, and variable-width strokes that are the same on both sides of the path draw with their width | 5–15 (non-colour bindings as bindings, checks of effects, images and prototypes, and against real files) |
### Export to `.fig` (experimental)
diff --git a/docs/gaps.md b/docs/gaps.md
index 8fce3103..2ade4481 100644
--- a/docs/gaps.md
+++ b/docs/gaps.md
@@ -372,7 +372,7 @@ No alpha blockers: the alpha gate in [`roadmap.md`](roadmap.md#alpha-gate) passe
### 16. Dev Mode: the tail after dev resources
- **Landed (2026-10-11):** code connect: a component or set links to its code component per
- language (React, SwiftUI, Compose, ArkUI): an import path, the name and a template whose `{property}`
+ language (React, Leptos, Vue, SwiftUI, Compose, ArkUI): an import path, the name and a template whose `{property}`
and `{property ? "a" : "b"}` placeholders take the instance's values, escaped per language and
never executed. `inspect.code`, `inspect.componentCode` and the Inspect panel show that snippet
instead of generated code (inside generated layer trees too); the panel's Connect to code edits
diff --git a/docs/mcp.md b/docs/mcp.md
index b930b881..e75c2c79 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -308,7 +308,7 @@ Or in a project's `.mcp.json`:
| Tool | What it does |
|---|---|
| `list_commands {filter?}` | Every command: id, label, menu, shortcut, undoable, params doc. |
-| `run_command {command, params}` | Run any command (e.g. `align.left`, `layout.add`, `component.create`, `instance.place` (drop an instance at a page point into the frame or auto layout slot under it), `component.exposeInstance` / `instance.exposed` (nested instance properties on instances), `component.makeSlot` / `instance.slotInsert` / `instance.resetSlot` (slots, below), `inspect.code` (CSS, HTML + CSS for a whole frame, React, Leptos, SwiftUI, Jetpack Compose or ArkUI for a layer; components take their properties as parameters and instances are calls, see Dev Mode below), `inspect.properties` (layout, auto layout, typography, fills, strokes and effects with their style and variable names; `colorFormat`: hex, rgb, css, hsl or hsb), `inspect.assets` (layers under the selection with export settings, icons and images, each with its `kind`), `inspect.code` takes `unit: rem` and `rootFontSize` for CSS, HTML, React and Leptos, `style.create`, `variable.bind`, `variable.update` (rename, describe, scope), `variable.set` with `{alias}`, `variable.renameMode` / `variable.removeMode`, `variable.deleteCollection`, `proto.interaction.add`, `codeConnect.set` (components linked to real code, see Dev Mode below)). |
+| `run_command {command, params}` | Run any command (e.g. `align.left`, `layout.add`, `component.create`, `instance.place` (drop an instance at a page point into the frame or auto layout slot under it), `component.exposeInstance` / `instance.exposed` (nested instance properties on instances), `component.makeSlot` / `instance.slotInsert` / `instance.resetSlot` (slots, below), `inspect.code` (CSS, HTML + CSS for a whole frame, React, Leptos, Vue, SwiftUI, Jetpack Compose or ArkUI for a layer; components take their properties as parameters and instances are calls, see Dev Mode below), `inspect.properties` (layout, auto layout, typography, fills, strokes and effects with their style and variable names; `colorFormat`: hex, rgb, css, hsl or hsb), `inspect.assets` (layers under the selection with export settings, icons and images, each with its `kind`), `inspect.code` takes `unit: rem` and `rootFontSize` for CSS, HTML, React, Leptos and Vue, `style.create`, `variable.bind`, `variable.update` (rename, describe, scope), `variable.set` with `{alias}`, `variable.renameMode` / `variable.removeMode`, `variable.deleteCollection`, `proto.interaction.add`, `codeConnect.set` (components linked to real code, see Dev Mode below)). |
| `batch {commands: [{command, params}], label?}` | Several commands as one undo step (`command.batch`); all-or-nothing for open documents and their document state. Failed inner commands are removed from the journal; preferences, clipboard, tool state and UI requests are not rolled back. A step can use what an earlier step returned: name it with `"as": "card"` and `{"$ref": "card"}` anywhere in a later step's params becomes the `id` in its result (`{"$step": n}` does the same by zero-based position); `"field"` takes another key or a slash path such as `ids/0` (see Step references below). |
| `create_node {type, x, y, width, height, parent, index, name, text, path, props}` | Create a frame, rectangle, ellipse, polygon, star, line, arrow, text, vector, section, component or slice; returns `{id, node}`. |
| `set_properties {ids, props}` | `node.set` on layers (geometry, fills, strokes, effects, corner radius, auto layout, sizing, constraints, masks (`isMask`, `maskType: alpha\|vector\|luminance`), handoff status (`devStatus: none\|readyForDev\|completed`; marking again clears "Changed"), a section's `sectionContentsHidden`, text…); returns the updated layers. |
@@ -1493,19 +1493,25 @@ permissions: without it nothing is downloaded); `plugin.directory.publish {path
same layer names, mobile layout) the code is mobile first: the mobile frame's classes, the
desktop frame's that differ behind `lg:`, and layers only on desktop `hidden` plus `lg:flex`
(auto layout frames) or `lg:block` (other layers).
-- **Component code:** `inspect.code {id, language: react|leptos|swiftui|compose|arkui}` on a component,
+- **Component code:** `inspect.code {id, language: react|leptos|vue|swiftui|compose|arkui}` on a component,
a component set or a variant writes the component as a reusable unit: React (TSX) with a props
- interface, Leptos with a `#[component]` function (`#[prop]` defaults, `view!` markup), SwiftUI
+ interface, Leptos with a `#[component]` function (`#[prop]` defaults, `view!` markup), Vue as a
+ single-file component (``, a `