From e37e0bc20ba2f46ef57332c0a101fc78e74b4de2 Mon Sep 17 00:00:00 2001
From: RealtaNua <nael.nathanael71@gmail.com>
Date: Wed, 14 Oct 2026 18:27:16 +0700
Subject: [PATCH 01/59] perf(render): keep glass shapes a later render asks for
 again
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A glass layer's coverage, distance field and normals depend only on its
outline and the zoom. A shape asked for again in a later render (the
next frame of a drag, a slider drag, a canvas patch, an export of the
same view) is now worked out whole, in its own pixel frame (translation
reduced to its fraction, in 1/65536 px with carry), and kept: renders
reuse it instead of redoing the distance transform and normals for
their crop.

A shape asked for only once (each step of a zoom, a pane dragged by
fractions of a pixel, a resize) is still worked out for just the part
shown, so those don't get slower: working out the whole pane when only
a corner is in view cost 1.8x before this rule.

The cache is bounded in bytes (128 MB, 32 MB on the web), keeps the
least recently used last, skips shapes over 4M px (1M on the web), and
parallel bands share one computation (OnceLock slot). Renders count
once per render_view / render_view_single; bands don't.

Output: digests of 30 renders (5 looks, square and rounded, scales 1,
1.37, 2) are identical to main; a cut through a rounded pane now equals
the whole render exactly.

Release timings (glass_render_timings, 2400 × 1600 px, min of 5):
canvas drag under the glass 49.5 → 26.5 ms, glass slider drag
104.8 → 61.6 ms, same view again 94.8 → 54.0 ms; zoom 105.0 → 93.7 ms
(no reuse: each zoom is new).

Refs #256

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 crates/render/src/glass.rs             | 250 ++++++++++++++++++++++++-
 crates/render/src/glass_bench_tests.rs |  16 ++
 crates/render/src/glass_cut_tests.rs   |  82 ++++++++
 crates/render/src/lib.rs               |  25 ++-
 4 files changed, 361 insertions(+), 12 deletions(-)

diff --git a/crates/render/src/glass.rs b/crates/render/src/glass.rs
index 70e0d582..3555ff44 100644
--- a/crates/render/src/glass.rs
+++ b/crates/render/src/glass.rs
@@ -6,9 +6,20 @@
 //! where it faces `light_angle`, half as bright on the opposite side, spread wider by `splay`.
 //! `frost` blurs the backdrop first. Distances to the outline come from an exact Euclidean
 //! distance transform of the shape's coverage.
+//!
+//! The shape's coverage, distances and normals depend only on the shape and the zoom. Once a
+//! later render asks for the same shape at the same zoom they are worked out for the whole shape,
+//! in its own pixel frame, and kept in a cache of at most [`MAX_CACHED_BYTES`]: moving or editing
+//! what lies under the glass, dragging its sliders, panning and patching the canvas reuse them.
+//! Zooming doesn't (each zoom is new).
+
+use std::collections::HashMap;
+use std::hash::{DefaultHasher, Hash, Hasher};
+use std::sync::{Arc, Mutex, OnceLock};
 
 use figcraft_doc::Glass;
 use figcraft_geom::Affine;
+use figcraft_geom::kurbo::Shape as _;
 use tiny_skia::Pixmap;
 
 use crate::fx;
@@ -188,6 +199,211 @@ fn light_reach(band: f64, intensity: f64) -> f64 {
 /// zoom would otherwise need a huge margin of coverage around every cut).
 const MAX_LIGHT_PX: f64 = 512.0;
 
+/// A shape's coverage (alpha), distance to its edge and smoothed inward normals over a window of
+/// pixels whose top-left pixel is (`x0`, `y0`).
+struct Fields {
+    x0: i64,
+    y0: i64,
+    w: usize,
+    h: usize,
+    cov: Vec<u8>,
+    dist: Vec<f32>,
+    normals: Vec<(f32, f32)>,
+}
+
+/// Bytes a field pixel holds: coverage, distance and a normal.
+const FIELD_PX_BYTES: u64 = 1 + 4 + 8;
+
+impl Fields {
+    /// The fields of `cov`, the shape's coverage on the window at (`x0`, `y0`), normals smoothed
+    /// over `r` pixels.
+    fn new(cov: &Pixmap, x0: i64, y0: i64, r: usize) -> Fields {
+        FIELDS_COMPUTED.with(|n| n.set(n.get() + 1));
+        let dist = inside_distance(cov);
+        let (w, h) = (cov.width() as usize, cov.height() as usize);
+        let normals = smooth_normals(&dist, w, h, r);
+        let cov = cov.data().chunks_exact(4).map(|p| p.get(3).copied().unwrap_or(0)).collect();
+        Fields { x0, y0, w, h, cov, dist, normals }
+    }
+
+    /// Coverage (0–1), distance and inward normal at pixel (`x`, `y`); `None` outside the window.
+    fn at(&self, x: i64, y: i64) -> Option<(f32, f32, (f32, f32))> {
+        let (fx, fy) = (x.checked_sub(self.x0)?, y.checked_sub(self.y0)?);
+        if fx < 0 || fy < 0 || fx >= self.w as i64 || fy >= self.h as i64 {
+            return None;
+        }
+        let i = fy as usize * self.w + fx as usize;
+        Some((f32::from(*self.cov.get(i)?) / 255.0, *self.dist.get(i)?, *self.normals.get(i)?))
+    }
+}
+
+thread_local! {
+    static FIELDS_COMPUTED: std::cell::Cell<u64> = const { std::cell::Cell::new(0) };
+}
+
+/// How many times this thread has worked out a glass shape's fields: what a cache miss costs. For
+/// tests and benchmarks.
+pub fn glass_fields_computed() -> u64 {
+    FIELDS_COMPUTED.with(std::cell::Cell::get)
+}
+
+/// What a glass shape's fields depend on, with the transform's translation reduced to its fraction
+/// of a pixel: the same shape at the same zoom has the same key wherever it is and however a render
+/// cuts it.
+#[derive(Clone, Debug, PartialEq, Eq, Hash)]
+struct ShapeKey {
+    path: u64,
+    linear: [u64; 4],
+    frac: (i64, i64),
+    margin: u32,
+    r: usize,
+}
+
+/// The cached fields of a shape whose window holds at most this many pixels; bigger shapes (a
+/// pane far larger than the view) are worked out for the part a render shows each time.
+#[cfg(not(target_arch = "wasm32"))]
+const MAX_SHAPE_PX: u64 = 4 << 20;
+#[cfg(target_arch = "wasm32")]
+const MAX_SHAPE_PX: u64 = 1 << 20;
+/// Bytes the glass shape cache holds at most (less on the web, where memory never shrinks).
+#[cfg(not(target_arch = "wasm32"))]
+const MAX_CACHED_BYTES: u64 = 128 << 20;
+#[cfg(target_arch = "wasm32")]
+const MAX_CACHED_BYTES: u64 = 32 << 20;
+
+/// A shape's fields once worked out; parallel bands wanting the same shape wait for one of them.
+type Slot = Arc<OnceLock<Option<Arc<Fields>>>>;
+
+/// The shapes' fields by key, at most `budget` bytes; the least recently used go first. A shape is
+/// kept from the second render that asks for it: one asked for once (each step of a zoom, a pane
+/// dragged by fractions of a pixel) is cheaper worked out for just the part a render shows.
+struct ShapeCache {
+    map: HashMap<ShapeKey, (Slot, u64, u64)>,
+    /// Shapes asked for but not kept, by the render that first asked.
+    seen: HashMap<ShapeKey, u64>,
+    held: u64,
+    tick: u64,
+    budget: u64,
+}
+
+/// Shapes remembered as asked for once; past this many they are forgotten.
+const MAX_SEEN: usize = 256;
+
+impl ShapeCache {
+    fn new(budget: u64) -> Self {
+        Self { map: HashMap::new(), seen: HashMap::new(), held: 0, tick: 0, budget }
+    }
+
+    /// The slot for `key` (filled or about to be) asked for in render number `render`, making room
+    /// for `bytes`; `None` when it isn't kept (first asked for in this render, or too big).
+    fn slot(&mut self, key: &ShapeKey, bytes: u64, render: u64) -> Option<Slot> {
+        self.tick += 1;
+        if let Some((slot, _, used)) = self.map.get_mut(key) {
+            *used = self.tick;
+            return Some(slot.clone());
+        }
+        if bytes > self.budget {
+            return None;
+        }
+        match self.seen.get(key) {
+            Some(first) if *first < render => {
+                self.seen.remove(key);
+            }
+            Some(_) => return None,
+            None => {
+                if self.seen.len() >= MAX_SEEN {
+                    self.seen.clear();
+                }
+                self.seen.insert(key.clone(), render);
+                return None;
+            }
+        }
+        while self.held + bytes > self.budget {
+            let oldest = self.map.iter().min_by_key(|(_, (_, _, used))| *used).map(|(k, _)| k.clone())?;
+            if let Some((_, b, _)) = self.map.remove(&oldest) {
+                self.held -= b;
+            }
+        }
+        let slot = Slot::default();
+        self.map.insert(key.clone(), (slot.clone(), bytes, self.tick));
+        self.held += bytes;
+        Some(slot)
+    }
+}
+
+fn shape_cache() -> &'static Mutex<ShapeCache> {
+    static C: OnceLock<Mutex<ShapeCache>> = OnceLock::new();
+    C.get_or_init(|| Mutex::new(ShapeCache::new(MAX_CACHED_BYTES)))
+}
+
+/// The fields `glass` reads for a `w` × `h` layer whose `shape` maps through `xf` (local → layer
+/// pixels), exact for distances up to the margin `m`, normals smoothed over `r` pixels, and the
+/// shift from layer pixels to the fields' pixels.
+///
+/// A shape asked for again in a later render, whose window fits [`MAX_SHAPE_PX`], is worked out
+/// whole, in its own frame (the translation's fraction of a pixel), and kept: a band, a canvas
+/// patch or the next frame of a drag reads the same fields. Otherwise it is worked out for the part
+/// shown plus the margin.
+fn shape_fields(shape: &Outline, xf: Affine, w: u32, h: u32, m: u32, r: usize) -> Option<(Arc<Fields>, (i64, i64))> {
+    if let Some(whole) = whole_shape(shape, xf, m, r) {
+        return Some(whole);
+    }
+    let cov = spread_alpha(std::slice::from_ref(shape), 0.0, Affine::translate((f64::from(m), f64::from(m))) * xf, w + 2 * m, h + 2 * m)?;
+    Some((Arc::new(Fields::new(&cov, -i64::from(m), -i64::from(m), r)), (0, 0)))
+}
+
+/// [`shape_fields`] for a whole shape, from the cache; `None` when it isn't kept (first asked for
+/// in this render, too big, or its transform too far out).
+fn whole_shape(shape: &Outline, xf: Affine, m: u32, r: usize) -> Option<(Arc<Fields>, (i64, i64))> {
+    let [a, b, c, d, e, f] = xf.as_coeffs();
+    // The translation in steps of 1/65536 px (far finer than the rasteriser's 1/64, coarse enough
+    // that rounding errors in where a render starts land on the same step), its whole pixels (the
+    // shift) and the fraction left; rounding first carries 99.9999999 over to 100.
+    const STEPS: f64 = 65536.0;
+    let q = |v: f64| {
+        let q = (v * STEPS).round();
+        (q.is_finite() && q.abs() < 1e15).then_some(q as i64)
+    };
+    let (qe, qf) = (q(e)?, q(f)?);
+    let shift = (qe.div_euclid(STEPS as i64), qf.div_euclid(STEPS as i64));
+    let frac = (qe.rem_euclid(STEPS as i64), qf.rem_euclid(STEPS as i64));
+    let own = Affine::new([a, b, c, d, frac.0 as f64 / STEPS, frac.1 as f64 / STEPS]);
+    let bb = (own * shape.0.clone()).bounding_box();
+    let (x0, y0, x1, y1) = (bb.x0.floor(), bb.y0.floor(), bb.x1.ceil(), bb.y1.ceil());
+    if ![x0, y0, x1, y1].iter().all(|v| v.is_finite() && v.abs() < 1e9) {
+        return None;
+    }
+    // The margin in steps of 32 px, so dragging a slider that widens it a little keeps the same
+    // fields (a wider margin only adds exact distances further out: the same pixels).
+    let margin = m.div_ceil(32).checked_mul(32)?;
+    let (rw, rh) = ((x1 - x0) as u64 + 2, (y1 - y0) as u64 + 2);
+    let (ww, wh) = (rw + 2 * u64::from(margin), rh + 2 * u64::from(margin));
+    if ww.checked_mul(wh)? > MAX_SHAPE_PX {
+        return None;
+    }
+    let mut hasher = DefaultHasher::new();
+    crate::draw::hash_path(&shape.0, &mut hasher);
+    matches!(shape.1, tiny_skia::FillRule::EvenOdd).hash(&mut hasher);
+    let key = ShapeKey { path: hasher.finish(), linear: [a, b, c, d].map(f64::to_bits), frac, margin, r };
+    let compute = || {
+        // Rastered against the shape's own bounds (not the window), so the margin can't move a
+        // coverage value.
+        let raster = spread_alpha(std::slice::from_ref(shape), 0.0, Affine::translate((1.0 - x0, 1.0 - y0)) * own, rw as u32, rh as u32)?;
+        let mut win = Pixmap::new(ww as u32, wh as u32)?;
+        let (row, at) = (raster.width() as usize * 4, (margin as usize, margin as usize));
+        let stride = win.width() as usize * 4;
+        for (y, src) in raster.data().chunks_exact(row).enumerate() {
+            let start = (y + at.1) * stride + at.0 * 4;
+            win.data_mut().get_mut(start..start + row)?.copy_from_slice(src);
+        }
+        let origin = (x0 as i64 - 1 - i64::from(margin), y0 as i64 - 1 - i64::from(margin));
+        Some(Fields::new(&win, origin.0, origin.1, r))
+    };
+    let slot =
+        shape_cache().lock().unwrap_or_else(std::sync::PoisonError::into_inner).slot(&key, ww * wh * FIELD_PX_BYTES, crate::render_number())?;
+    Some((slot.get_or_init(|| compute().map(Arc::new)).clone()?, shift))
+}
+
 /// The glass of a `w` × `h` layer whose `shape` maps through `xf` (local → layer pixels), from
 /// `back`, its backdrop padded by `pad` pixels each way, at `scale` device pixels per unit.
 #[allow(clippy::too_many_arguments)]
@@ -201,10 +417,7 @@ pub fn glass(g: &Glass, shape: &Outline, back: &Pixmap, pad: u32, w: u32, h: u32
     // exact: the bend's (within `depth`), the light's (within `reach`) and those the normals are
     // smoothed from (2r + 1 further).
     let m = depth.max(reach).ceil() as u32 + 4 * r as u32 + 4;
-    let cov = spread_alpha(std::slice::from_ref(shape), 0.0, Affine::translate((f64::from(m), f64::from(m))) * xf, w + 2 * m, h + 2 * m)?;
-    let dist = inside_distance(&cov);
-    let (cw, ch) = (cov.width() as usize, cov.height() as usize);
-    let normals = smooth_normals(&dist, cw, ch, r);
+    let (fields, shift) = shape_fields(shape, xf, w, h, m, r)?;
     let mut frosted = back.clone();
     fx::blur(&mut frosted, g.frost / 2.0 * scale);
     let ang = g.light_angle.to_radians();
@@ -221,17 +434,12 @@ pub fn glass(g: &Glass, shape: &Outline, back: &Pixmap, pad: u32, w: u32, h: u32
     let depth = depth as f32;
     let mut out = Pixmap::new(w, h)?;
     let dst = out.data_mut();
-    let cd = cov.data();
-    let d_at = |x: usize, y: usize| dist.get(y * cw + x).copied().unwrap_or(0.0);
     for y in 0..h as usize {
         for x in 0..w as usize {
-            let (mx, my) = (x + m as usize, y + m as usize);
-            let c = f32::from(cd.get((my * cw + mx) * 4 + 3).copied().unwrap_or(0)) / 255.0;
+            let Some((c, d, inward)) = fields.at(x as i64 - shift.0, y as i64 - shift.1) else { continue };
             if c <= 0.0 {
                 continue;
             }
-            let d = d_at(mx, my);
-            let inward = normals.get(my * cw + mx).copied().unwrap_or((0.0, 0.0));
             let t = (d / depth).min(1.0);
             let bend = bend_max * (1.0 - t) * (1.0 - t);
             let (bx, by) = (x as f32 + pad as f32 + 0.5, y as f32 + pad as f32 + 0.5);
@@ -284,6 +492,28 @@ mod tests {
         assert!((d[10 * 21 + 5] - 0.5).abs() < 1e-4, "{}", d[10 * 21 + 5]);
     }
 
+    #[test]
+    fn the_shape_cache_stays_within_its_bytes() {
+        let key = |i: u64| ShapeKey { path: i, linear: [0; 4], frac: (0, 0), margin: 0, r: 1 };
+        let mut c = ShapeCache::new(100);
+        // Kept from the second render that asks, not the first (nor again within the first).
+        assert!(c.slot(&key(1), 40, 1).is_none());
+        assert!(c.slot(&key(1), 40, 1).is_none());
+        assert!(c.slot(&key(1), 40, 2).is_some());
+        for k in [2, 3] {
+            assert!(c.slot(&key(k), 40, 2).is_none());
+        }
+        assert!(c.slot(&key(2), 40, 3).is_some());
+        // Using 1 again makes 2 the least recently used: 2 goes to make room for 3.
+        assert!(c.slot(&key(1), 40, 3).is_some());
+        assert!(c.slot(&key(3), 40, 3).is_some());
+        assert!(c.held <= 100, "{}", c.held);
+        assert!(c.map.contains_key(&key(1)) && c.map.contains_key(&key(3)) && !c.map.contains_key(&key(2)));
+        // More than it holds in all: never kept.
+        assert!(c.slot(&key(4), 101, 3).is_none() && c.slot(&key(4), 101, 4).is_none());
+        assert!(c.held <= 100 && !c.map.contains_key(&key(4)));
+    }
+
     #[test]
     fn light_reach_is_where_the_light_falls_under_half_a_level() {
         let r = light_reach(10.0, 1.0);
diff --git a/crates/render/src/glass_bench_tests.rs b/crates/render/src/glass_bench_tests.rs
index 64c95835..1a4b4cbe 100644
--- a/crates/render/src/glass_bench_tests.rs
+++ b/crates/render/src/glass_bench_tests.rs
@@ -80,6 +80,18 @@ fn set_glass(d: &mut Document, pane: NodeId, g: Glass) {
     d.get_mut(pane).unwrap().effects = vec![Effect { kind: EffectKind::Glass(g), visible: true }];
 }
 
+/// Writes the bench scene's render (rendered twice, so a kept shape is read) to the PNG named by
+/// `FIGCRAFT_GLASS_PNG`, to compare builds by eye.
+#[test]
+#[ignore = "writes a PNG: FIGCRAFT_GLASS_PNG=<path>"]
+fn glass_bench_png() {
+    let Ok(path) = std::env::var("FIGCRAFT_GLASS_PNG") else { return };
+    let (d, p, _, _) = scene();
+    let _ = render_view(&d, p, &view((0.0, 0.0), 2.0), &Options::default());
+    let pix = render_view(&d, p, &view((0.0, 0.0), 2.0), &Options::default()).unwrap();
+    pix.save_png(path).unwrap();
+}
+
 #[test]
 #[ignore = "timing: run in release with --ignored --nocapture"]
 fn glass_render_timings() {
@@ -96,6 +108,10 @@ fn glass_render_timings() {
             }),
         ),
         ("export: zoom, a new scale every frame", time(&mut d, p, render_view, |_, i| view((0.0, 0.0), 2.0 + 0.013 * f64::from(i)))),
+        (
+            "export: zoomed in, a corner of the pane in view, a new scale every frame",
+            time(&mut d, p, render_view, |_, i| view((700.0, 400.0), 3.0 + 0.013 * f64::from(i))),
+        ),
         ("single: same view again", time(&mut d, p, render_view_single, |_, _| view((0.0, 0.0), 2.0))),
         ("canvas: drag the card under the glass", canvas(&d, p, 2.0, move_card)),
         (
diff --git a/crates/render/src/glass_cut_tests.rs b/crates/render/src/glass_cut_tests.rs
index 43733c7f..93124377 100644
--- a/crates/render/src/glass_cut_tests.rs
+++ b/crates/render/src/glass_cut_tests.rs
@@ -99,7 +99,10 @@ fn glass_digests() {
             let (d, p, _) = pane_over_stripes(g.clone(), radius);
             for scale in [1.0, 1.37, 2.0] {
                 let v = View { origin: (100.0, 100.0), scale, width: (1000.0 * scale) as u32, height: (700.0 * scale) as u32 };
+                // Rendered twice: the second reads the whole shape the first asked for.
+                let first = render_view_single(&d, p, &v, &Options::default()).unwrap();
                 let pix = render_view_single(&d, p, &v, &Options::default()).unwrap();
+                assert!(first.data() == pix.data(), "glass {i} radius {radius} scale {scale}: the kept shape renders differently");
                 let mut h = DefaultHasher::new();
                 pix.data().hash(&mut h);
                 println!("glass {i} radius {radius} scale {scale}: {:016x}", h.finish());
@@ -133,3 +136,82 @@ fn a_cut_through_the_pane_matches_the_whole_render() {
         }
     }
 }
+
+/// A `w` × `h` pane of glass `g` at (`x`, `y`) over stripes, alone on its page: (document, page,
+/// pane). Each test gives its own size, so tests running at once don't share cached shapes.
+fn pane(g: Glass, x: f64, y: f64, w: f64, h: f64) -> (Document, NodeId, NodeId) {
+    let mut d = Document::new("glass");
+    let p = d.first_page().unwrap();
+    for i in 0..8u32 {
+        let s = d.create(p, NodeKind::Rectangle, "Stripe", f64::from(i) * 40.0, 0.0, 20.0, 400.0).unwrap();
+        d.get_mut(s).unwrap().fills = vec![Paint::solid(Color::from_hex("2040E0").unwrap())];
+    }
+    let pane = d.create(p, NodeKind::Rectangle, "Glass", 0.0, 0.0, w, h).unwrap();
+    let n = d.get_mut(pane).unwrap();
+    n.transform = Affine::translate((x, y));
+    n.corners.radii = [12.0; 4];
+    n.effects = vec![Effect { kind: EffectKind::Glass(g), visible: true }];
+    (d, p, pane)
+}
+
+fn render(d: &Document, p: NodeId, origin: (f64, f64), scale: f64) -> Pixmap {
+    render_view_single(d, p, &View { origin, scale, width: 400, height: 300 }, &Options::default()).unwrap()
+}
+
+/// How many glass shapes `f` works out on this thread.
+fn computed(f: impl FnOnce()) -> u64 {
+    let before = crate::glass::glass_fields_computed();
+    f();
+    crate::glass::glass_fields_computed() - before
+}
+
+#[test]
+fn kept_fields_render_the_same_pixels_as_fresh_ones() {
+    let (d, p, _) = pane(Glass::default(), 40.0, 30.0, 211.0, 137.0);
+    let mut shots = Vec::new();
+    // The first render works out the part it shows, the next the whole shape (and keeps it), the
+    // ones after reuse it.
+    for want in [1, 1, 0] {
+        assert_eq!(computed(|| shots.push(render(&d, p, (0.0, 0.0), 1.5))), want, "render {}", shots.len() + 1);
+    }
+    assert!(shots.windows(2).all(|w| w[0].data() == w[1].data()));
+}
+
+#[test]
+fn what_the_shape_depends_on_works_it_out_again_and_nothing_else_does() {
+    let (mut d, p, pane) = pane(Glass::default(), 40.0, 30.0, 223.0, 149.0);
+    let set = |d: &mut Document, g: Glass| d.get_mut(pane).unwrap().effects = vec![Effect { kind: EffectKind::Glass(g), visible: true }];
+    // Asked for twice: kept.
+    let _ = render(&d, p, (0.0, 0.0), 1.0);
+    let _ = render(&d, p, (0.0, 0.0), 1.0);
+    // Reused: the look apart from depth, what lies under the glass, panning by whole pixels and
+    // moving the pane by whole pixels.
+    let reused = computed(|| {
+        set(&mut d, Glass { light_angle: 30.0, refraction: 0.2, dispersion: 1.0, frost: 9.0, ..Glass::default() });
+        let _ = render(&d, p, (0.0, 0.0), 1.0);
+        let stripe = d.node(p).unwrap().children[0];
+        d.get_mut(stripe).unwrap().transform = Affine::translate((5.0, 0.0));
+        let _ = render(&d, p, (0.0, 0.0), 1.0);
+        let _ = render(&d, p, (7.0, -3.0), 1.0);
+        d.get_mut(pane).unwrap().transform = Affine::translate((52.0, 31.0));
+        let _ = render(&d, p, (0.0, 0.0), 1.0);
+    });
+    assert_eq!(reused, 0);
+    // Worked out again: another zoom, a move by part of a pixel, another shape, a much deeper edge.
+    assert_eq!(computed(|| drop(render(&d, p, (0.0, 0.0), 1.25))), 1, "zoom");
+    d.get_mut(pane).unwrap().transform = Affine::translate((52.5, 31.0));
+    assert_eq!(computed(|| drop(render(&d, p, (0.0, 0.0), 1.0))), 1, "part of a pixel");
+    d.get_mut(pane).unwrap().width = 230.0;
+    assert_eq!(computed(|| drop(render(&d, p, (0.0, 0.0), 1.0))), 1, "shape");
+    set(&mut d, Glass { depth: 70.0, ..Glass::default() });
+    assert_eq!(computed(|| drop(render(&d, p, (0.0, 0.0), 1.0))), 1, "depth");
+}
+
+#[test]
+fn a_pane_too_big_to_keep_still_renders() {
+    // 400 × 300 units at 8x: far past what is kept whole, so each render works out its part.
+    let (d, p, _) = pane(Glass { frost: 0.0, ..Glass::default() }, 0.0, 0.0, 400.0, 300.0);
+    let shown = render(&d, p, (10.0, 10.0), 8.0);
+    assert_eq!(computed(|| drop(render(&d, p, (10.0, 10.0), 8.0))), 1);
+    assert!(shown.data().chunks_exact(4).any(|px| px[2] > 200), "the stripes show through");
+}
diff --git a/crates/render/src/lib.rs b/crates/render/src/lib.rs
index 9969a597..cf7a0693 100644
--- a/crates/render/src/lib.rs
+++ b/crates/render/src/lib.rs
@@ -99,8 +99,23 @@ pub(crate) fn backdrop_reach(radius: f64, scale: f64) -> f64 {
     if radius > 0.0 { radius * 1.5 * scale + 3.0 } else { 0.0 }
 }
 
+/// Renders started (bands of one render count once): glass keeps the shapes a later render asks
+/// for again.
+static RENDERS: std::sync::atomic::AtomicU64 = std::sync::atomic::AtomicU64::new(0);
+
+/// The number of the render that just started.
+fn start_render() -> u64 {
+    RENDERS.fetch_add(1, std::sync::atomic::Ordering::Relaxed) + 1
+}
+
+/// The number of the latest render started.
+pub(crate) fn render_number() -> u64 {
+    RENDERS.load(std::sync::atomic::Ordering::Relaxed)
+}
+
 /// Render a page region, splitting it into horizontal bands rendered in parallel (desktop).
 pub fn render_view(doc: &Document, page: NodeId, view: &View, opts: &Options) -> Option<Pixmap> {
+    start_render();
     #[cfg(not(target_arch = "wasm32"))]
     {
         let threads = rayon::current_num_threads().clamp(1, 16) as u32;
@@ -112,7 +127,7 @@ pub fn render_view(doc: &Document, page: NodeId, view: &View, opts: &Options) ->
             return Some(p);
         }
     }
-    render_view_single(doc, page, view, opts)
+    render_one(doc, page, view, opts)
 }
 
 /// Render `view` as `bands` horizontal bands in parallel. Bands overlap by what background blurs
@@ -137,7 +152,7 @@ fn render_bands(doc: &Document, page: NodeId, view: &View, opts: &Options, bands
             let top = y0.saturating_sub(overlap);
             let bottom = (y0 + h + overlap).min(view.height).max(y0 + h);
             let v = View { origin: (view.origin.0, view.origin.1 + f64::from(top) / s), scale: view.scale, width: view.width, height: bottom - top };
-            let part = render_view_single(doc, page, &v, opts);
+            let part = render_one(doc, page, &v, opts);
             let own = tiny_skia::IntRect::from_xywh(0, (y0 - top) as i32, view.width.clamp(1, 16_384), h);
             (y0, if overlap == 0 { part } else { part.zip(own).and_then(|(p, r)| p.clone_rect(r)) })
         })
@@ -161,6 +176,12 @@ fn render_bands(doc: &Document, page: NodeId, view: &View, opts: &Options, bands
 
 /// Render a page region on the calling thread.
 pub fn render_view_single(doc: &Document, page: NodeId, view: &View, opts: &Options) -> Option<Pixmap> {
+    start_render();
+    render_one(doc, page, view, opts)
+}
+
+/// [`render_view_single`] as part of a render already started (one of its bands).
+fn render_one(doc: &Document, page: NodeId, view: &View, opts: &Options) -> Option<Pixmap> {
     let mut pix = new_pixmap(view.width, view.height)?;
     let bg = opts.background.or_else(|| match doc.node(page).map(|p| &p.kind) {
         Some(NodeKind::Page { background, .. }) => Some(*background),

From 95b91e602bdf2e35bcc302e766001e4a9fb16d29 Mon Sep 17 00:00:00 2001
From: Ijas Hussain <ijashussain3@gmail.com>
Date: Sat, 17 Oct 2026 12:31:58 +0530
Subject: [PATCH 02/59] M6: export variables as Dart constants for Flutter

variable.export takes format "dart", and Local variables > Export...
offers "Dart constants for Flutter...". The file has an abstract final
class per collection and mode (the default mode named after the
collection, the others after the collection and the mode) with a
static const Color, double, String or bool per variable.

Names become camelCase Dart identifiers, kept apart when two read the
same, with reserved words escaped; strings are escaped for Dart;
aliases are resolved to their value in that mode, so each class stands
alone. A generated file passes the Flutter analyzer and its constants
work in const widgets.
---
 ROADMAP.md                              |   2 +
 crates/engine/src/cmd/variables_io.rs   | 134 +++++++++++++++++++++++-
 crates/engine/src/variables_io_tests.rs |  52 ++++++++-
 crates/ui-egui/locales/en.toml          |   1 +
 crates/ui-egui/locales/es.toml          |   1 +
 crates/ui-egui/src/variables_panel.rs   |   3 +-
 docs/components-parity.md               |   2 +-
 docs/mcp.md                             |   7 +-
 8 files changed, 193 insertions(+), 9 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index bbde8bc5..bb645c5f 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -131,6 +131,7 @@ Ranked; detail and milestones in [`docs/roadmap.md`](docs/roadmap.md).
 
 ## Progress log
 
+- **2026-10-17** · Variables as Dart constants for Flutter (M6): `variable.export {format: "dart"}` and Local variables ▸ Export… ▸ Dart constants for Flutter write a Dart file with an `abstract final class` per collection and mode (the default mode named after the collection, the others after the collection and the mode) and a `static const` `Color`, `double`, `String` or `bool` per variable. Names become camelCase Dart identifiers (kept apart when two read the same, reserved words escaped), strings are escaped for Dart, and aliases are resolved to their value in that mode, so each class stands alone. Checked with the Flutter analyzer on a generated file used in `const` widgets. Tests in `variables_io_tests`. Numbers unchanged.
 - **2026-10-17** · Frames and sections convert into each other (M1, #719): `object.convertToSection` turns a frame on the page or in a section into a section in place (same box, name, fill and layers, which stay where they are; what only a frame has goes: auto layout, clipping, layout grids, guides, scrolling), and `object.convertToFrame` now also turns a section into a frame that keeps its fill and doesn't clip, so the look stays. Nested frames, instances, main components and sections holding sections are refused with the reason; one undo step each. Both are in the canvas context menu (Convert to section / Convert to frame) and in Spanish. Numbers unchanged.
 - **2026-10-14** · Corner handles win over the corner-radius handles (M1, #292): a press on the inner half of a corner handle's square picked the radius handle 10 px in, so the drag neither resized nor (dragging outward) rounded anything. Inside the drawn square the corner now resizes both sides (in ratio with Shift or the link); further in the radius handle still answers. Regression test in the transform behaviour suite. Numbers unchanged.
 - **2026-10-14** · Home screen recent files as cards (M7): each card shows the picture its file carries on its first page's colour, the file's icon, name and "Edited ... ago"; sort by name, creation or last change either way; a table view; a click selects, a double-click or Enter opens, arrow keys move; Open, Show in folder and Remove from recents on right-click. Numbers unchanged.
@@ -314,6 +315,7 @@ Ranked; detail and milestones in [`docs/roadmap.md`](docs/roadmap.md).
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-17 | minor | Variables as Dart constants for Flutter (M6): `variable.export {format: "dart"}` and Export… ▸ Dart constants for Flutter in Local variables; a class per collection and mode, aliases resolved, names made valid Dart. Numbers unchanged. |
 | 2026-10-17 | minor | Frames and sections convert into each other (M1, #719): `object.convertToSection` turns a frame on the page or in a section into a section in place (same box, name, fill and layers, which stay where they are; what only a frame has goes: auto layout, clipping, layout grids, guides, scrolling), and `object.convertToFrame` now also turns a section into a frame that keeps its fill and doesn't clip, so the look stays. Nested frames, instances, main components and sections holding sections are refused with the reason; one undo step each. Both are in the canvas context menu (Convert to section / Convert to frame) and in Spanish. Numbers unchanged. |
 | 2026-10-16 | minor | Community fixes from #478 up (batches #591, #598, #602; 69 PRs) and a control-channel fix: a line that isn't JSON now ends a `--control` connection, so a web page can't drive the app through a browser request (#589). Highlights: page copies keep navigation, flows, prototype settings and guides; Find and Replace keeps line endings and case-insensitive matches; text hyperlinks survive import and export; recent colours record only what was picked; MCP screenshots respect `maxSize`; Swedish catalog (UI strings), Czech plurals; bounded canvas overscan while panning; Korean fallback at the run's weight; many vector-edit, guide, page and .fig round-trip fixes. Numbers unchanged |
 | 2026-10-15 | minor | Drop files anywhere to open them (M7): dragging files over the window shows a "Drop to open" (home) or "Drop to import" (canvas) overlay. On the home screen each supported file opens as a document of its own and other files are turned away with a toast; on the canvas the files import at the drop point. Both wait behind a small card that is on screen before a large file blocks the window. A canvas import stays with the document and page that received the drop even if the tab or page changes meanwhile, and is cancelled with a message if that document or page is gone. Numbers unchanged. |
diff --git a/crates/engine/src/cmd/variables_io.rs b/crates/engine/src/cmd/variables_io.rs
index 99a78640..7cd92ae2 100644
--- a/crates/engine/src/cmd/variables_io.rs
+++ b/crates/engine/src/cmd/variables_io.rs
@@ -1,6 +1,6 @@
 //! Variables import and export: a file's collections as the local variables JSON (the shape the
-//! REST importer reads, so exports round-trip) or as CSS custom properties, and such JSON read
-//! back into a file.
+//! REST importer reads, so exports round-trip), as CSS custom properties or as Dart constants for
+//! Flutter, and such JSON read back into a file.
 
 use std::collections::{BTreeMap, BTreeSet};
 
@@ -18,7 +18,7 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "variable.export",
             "Export variables",
-            "{collections? [ids or names; default every collection of this file, not library copies], format? (json (default): the local variables JSON that variable.import reads | css: custom properties, the default mode on :root and each other mode on [data-<collection>=\"<mode>\"]), path? (write it there)}  → {text}, or {path} when written",
+            "{collections? [ids or names; default every collection of this file, not library copies], format? (json (default): the local variables JSON that variable.import reads | css: custom properties, the default mode on :root and each other mode on [data-<collection>=\"<mode>\"] | dart: a Dart file for Flutter, a class of constants per collection and mode (Color, double, String, bool), aliases resolved), path? (write it there)}  → {text}, or {path} when written",
             false,
             export
         ),
@@ -47,7 +47,8 @@ fn export(s: &mut Session, p: &Value) -> Result<Value> {
         "json" => serde_json::to_string_pretty(&figcraft_format::rest::export_variables(&doc.variables, &colls))
             .map_err(|e| EngineError::Other(e.to_string()))?,
         "css" => css(&doc.variables, &colls),
-        _ => return Err(bad(cmd, "format: json|css")),
+        "dart" => dart(&doc.variables, &colls),
+        _ => return Err(bad(cmd, "format: json|css|dart")),
     };
     match string(p, "path") {
         Some(path) => {
@@ -93,6 +94,131 @@ fn css(vars: &Variables, colls: &[&Collection]) -> String {
     out
 }
 
+/// Words Dart never takes as a name.
+const DART_RESERVED: &[&str] = &[
+    "assert", "await", "break", "case", "catch", "class", "const", "continue", "default", "do", "else", "enum", "extends", "false", "final",
+    "finally", "for", "if", "in", "is", "new", "null", "rethrow", "return", "super", "switch", "this", "throw", "true", "try", "var", "void",
+    "while", "with", "yield",
+];
+
+/// Words Dart takes as a member's name but not as a class's.
+const DART_BUILT_IN: &[&str] = &[
+    "abstract",
+    "as",
+    "covariant",
+    "deferred",
+    "dynamic",
+    "export",
+    "extension",
+    "external",
+    "factory",
+    "Function",
+    "get",
+    "implements",
+    "import",
+    "interface",
+    "late",
+    "library",
+    "mixin",
+    "operator",
+    "part",
+    "required",
+    "set",
+    "static",
+    "typedef",
+];
+
+/// `name` as a Dart identifier: its words (anything but ASCII letters and digits separates them)
+/// in camelCase, or PascalCase for a type; never empty, never starting with a digit or reserved.
+fn dart_ident(name: &str, pascal: bool) -> String {
+    let mut out = String::new();
+    for w in name.split(|c: char| !c.is_ascii_alphanumeric()).filter(|w| !w.is_empty()) {
+        let mut cs = w.chars();
+        let Some(first) = cs.next() else { continue };
+        if out.is_empty() && !pascal {
+            out.push(first.to_ascii_lowercase());
+        } else {
+            out.push(first.to_ascii_uppercase());
+        }
+        out.extend(cs);
+    }
+    if out.is_empty() || out.starts_with(|c: char| c.is_ascii_digit()) {
+        out.insert(0, if pascal { 'V' } else { 'v' });
+    }
+    if DART_RESERVED.contains(&out.as_str()) || (pascal && DART_BUILT_IN.contains(&out.as_str())) {
+        out.push('_');
+    }
+    out
+}
+
+/// `base`, or `base2`, `base3`… when `taken` has it already; the result is taken.
+fn dart_unique(base: String, taken: &mut BTreeSet<String>) -> String {
+    let mut name = base.clone();
+    let mut n = 2;
+    while !taken.insert(name.clone()) {
+        name = format!("{base}{n}");
+        n += 1;
+    }
+    name
+}
+
+/// `text` inside a Dart single-quoted string.
+fn dart_string(text: &str) -> String {
+    let mut out = String::with_capacity(text.len());
+    for c in text.chars() {
+        match c {
+            '\\' => out.push_str("\\\\"),
+            '\'' => out.push_str("\\'"),
+            '$' => out.push_str("\\$"),
+            '\n' => out.push_str("\\n"),
+            '\r' => out.push_str("\\r"),
+            c if c.is_control() => out.push_str(&format!("\\u{{{:x}}}", u32::from(c))),
+            c => out.push(c),
+        }
+    }
+    out
+}
+
+/// `text` on one line of a Dart comment.
+fn dart_comment(text: &str) -> String {
+    text.chars().map(|c| if c.is_control() { ' ' } else { c }).collect()
+}
+
+/// Each collection's variables as Dart constants for Flutter: a class per mode (the default mode's
+/// named after the collection, the others after the collection and the mode) with a `static const`
+/// per variable. Aliases are resolved to their value in that mode (a variable of another
+/// collection in that collection's default mode), so each class stands alone.
+fn dart(vars: &Variables, colls: &[&Collection]) -> String {
+    let mut out = String::from("// Variables exported from FigCraft.\n\nimport 'dart:ui';\n");
+    let mut classes = BTreeSet::new();
+    for c in colls {
+        let base = dart_ident(&c.name, true);
+        let mut members = BTreeSet::new();
+        let names: Vec<(&Variable, String)> =
+            vars.variables.iter().filter(|v| v.collection == c.id).map(|v| (v, dart_unique(dart_ident(&v.name, false), &mut members))).collect();
+        for (i, m) in c.modes.iter().enumerate() {
+            let class = dart_unique(if i == 0 { base.clone() } else { format!("{base}{}", dart_ident(&m.name, true)) }, &mut classes);
+            out.push_str(&format!("\n/// {} · {}\nabstract final class {class} {{\n", dart_comment(&c.name), dart_comment(&m.name)));
+            let modes = BTreeMap::from([(c.id.clone(), m.id.clone())]);
+            for (v, name) in &names {
+                let (ty, value) = match vars.resolve(&v.id, &modes) {
+                    Some(VariableValue::Color(col)) => {
+                        let [r, g, b, a] = col.to_rgba8();
+                        ("Color", format!("Color(0x{a:02X}{r:02X}{g:02X}{b:02X})"))
+                    }
+                    Some(VariableValue::Number(x)) if x.is_finite() => ("double", trim_num(x)),
+                    Some(VariableValue::String(t)) => ("String", format!("'{}'", dart_string(&t))),
+                    Some(VariableValue::Boolean(b)) => ("bool", b.to_string()),
+                    _ => continue,
+                };
+                out.push_str(&format!("  static const {ty} {name} = {value};\n"));
+            }
+            out.push_str("}\n");
+        }
+    }
+    out
+}
+
 fn import(s: &mut Session, p: &Value) -> Result<Value> {
     let cmd = "variable.import";
     let v =
diff --git a/crates/engine/src/variables_io_tests.rs b/crates/engine/src/variables_io_tests.rs
index 5c7305bb..cb8d7adb 100644
--- a/crates/engine/src/variables_io_tests.rs
+++ b/crates/engine/src/variables_io_tests.rs
@@ -1,5 +1,5 @@
 //! Extended variable collections (overrides, library updates, reset), variables import and
-//! export (JSON round trip, merging by name, CSS, junk), gradient stops bound to variables and
+//! export (JSON round trip, merging by name, CSS, Dart, junk), gradient stops bound to variables and
 //! variant properties driven by string variables.
 
 use figcraft_color::{Color, ColorStop, Gradient, GradientKind, Paint, PaintKind};
@@ -371,3 +371,53 @@ fn variant_properties_follow_string_variables() {
     assert_eq!(main(&s), variants[1]);
     healthy(&s);
 }
+
+#[test]
+fn variables_export_as_dart_constants_for_flutter() {
+    let mut s = Session::new();
+    theme(&mut s);
+    let dart = ex(&mut s, "variable.export", json!({"format": "dart"}))["text"].as_str().unwrap().to_string();
+    for want in [
+        "import 'dart:ui';\n",
+        "/// Theme · Light\nabstract final class Theme {\n",
+        "  static const Color colorPrimary = Color(0x800000FF);\n",
+        "  static const double radius = 4;\n",
+        "  static const String label = 'Say \"hi\"';\n",
+        "  static const bool on = false;\n",
+        "  static const Color accent = Color(0xFF000000);\n",
+        "/// Theme · Dark\nabstract final class ThemeDark {\n",
+        "  static const double radius = 6.5;\n",
+        // An alias is its target's value in that mode.
+        "  static const Color accent = Color(0xFFFFFFFF);\n",
+    ] {
+        assert!(dart.contains(want), "{want:?} in\n{dart}");
+    }
+    // Every class lists every variable once.
+    assert_eq!(dart.matches("static const").count(), 10, "{dart}");
+}
+
+#[test]
+fn dart_export_names_are_valid_dart() {
+    let mut s = Session::new();
+    ex(&mut s, "variable.createCollection", json!({"name": "2 brand-tokens", "modes": ["Default", "high contrast"]}));
+    ex(&mut s, "variable.createCollection", json!({"name": "Brand tokens"}));
+    for name in ["space/2xl", "class", "a b", "a-b", "\u{65e5}\u{672c}", "it's $5\\"] {
+        ex(&mut s, "variable.create", json!({"collection": "2 brand-tokens", "name": name, "type": "string", "value": name}));
+    }
+    let dart = ex(&mut s, "variable.export", json!({"format": "dart"}))["text"].as_str().unwrap().to_string();
+    for want in [
+        "abstract final class V2BrandTokens {",
+        "abstract final class V2BrandTokensHighContrast {",
+        "abstract final class BrandTokens {",
+        "static const String space2xl = 'space/2xl';",
+        "static const String class_ = 'class';",
+        // Two names that read the same in Dart stay apart.
+        "static const String aB = 'a b';",
+        "static const String aB2 = 'a-b';",
+        // Nothing usable in a name: still a name.
+        "static const String v = '\u{65e5}\u{672c}';",
+        "static const String itS5 = 'it\\'s \\$5\\\\';",
+    ] {
+        assert!(dart.contains(want), "{want:?} in\n{dart}");
+    }
+}
diff --git a/crates/ui-egui/locales/en.toml b/crates/ui-egui/locales/en.toml
index c9b6df62..dba711be 100644
--- a/crates/ui-egui/locales/en.toml
+++ b/crates/ui-egui/locales/en.toml
@@ -204,6 +204,7 @@ name = "English"
 "Convert to frame" = "Convert to frame"
 "Convert to section" = "Convert to section"
 "CSS custom properties…" = "CSS custom properties…"
+"Dart constants for Flutter…" = "Dart constants for Flutter…"
 "Can edit" = "Can edit"
 "Can't read this library: {e}" = "Can't read this library: {e}"
 "Cancel" = "Cancel"
diff --git a/crates/ui-egui/locales/es.toml b/crates/ui-egui/locales/es.toml
index ff3e5a79..f738f4d6 100644
--- a/crates/ui-egui/locales/es.toml
+++ b/crates/ui-egui/locales/es.toml
@@ -204,6 +204,7 @@ status = "draft — needs native review"
 "Color profile: {name}" = "Perfil de color: {name}"
 "Colour and text styles, Light and Dark variables, buttons, inputs and cards" = "Estilos de color y texto, variables Claro y Oscuro, botones, campos y tarjetas"
 "CSS custom properties…" = "Propiedades personalizadas CSS…"
+"Dart constants for Flutter…" = "Constantes de Dart para Flutter…"
 "Can edit" = "Puede editar"
 "Can't read this library: {e}" = "No se puede leer esta biblioteca: {e}"
 "Cancel" = "Cancelar"
diff --git a/crates/ui-egui/src/variables_panel.rs b/crates/ui-egui/src/variables_panel.rs
index 5476eaf1..d273ba48 100644
--- a/crates/ui-egui/src/variables_panel.rs
+++ b/crates/ui-egui/src/variables_panel.rs
@@ -181,7 +181,8 @@ fn header(app: &mut FigApp, ui: &mut Ui, open: &mut bool) {
     let mut bar = ui.new_child(UiBuilder::new().max_rect(bar).layout(egui::Layout::right_to_left(egui::Align::Center)));
     let export = widgets::button(&mut bar, tr("Export…"), false, true);
     crate::right::menu_popup(&export).show(|ui| {
-        for (label, format) in [(tr("Variables JSON…"), "json"), (tr("CSS custom properties…"), "css")] {
+        for (label, format) in [(tr("Variables JSON…"), "json"), (tr("CSS custom properties…"), "css"), (tr("Dart constants for Flutter…"), "dart")]
+        {
             if menu_item(ui, label, "") {
                 export_dialog(app, format);
                 ui.close();
diff --git a/docs/components-parity.md b/docs/components-parity.md
index 659676fd..b973ba20 100644
--- a/docs/components-parity.md
+++ b/docs/components-parity.md
@@ -69,7 +69,7 @@ updates with overrides kept: `library_tests.rs`, `components_scale_tests.rs`.
 | Explicit modes per frame, library collections' modes | done | |
 | Gradient stops and variant properties bound to variables | done | a stop's binding follows it when earlier stops are removed |
 | Extended collections | done | library collections, including a library's own extended collections (chains through libraries); overrides per mode with reset; follow library updates, variables new to the library collection being an update of their own; modes inherited. Checked with synthetic libraries only ([gaps](gaps.md) #14) |
-| Variables import/export (JSON) | done | the REST local variables shape (round-trips; merges by collection, mode and variable name); CSS custom properties export; in the browser the export arrives as a download (import there still needs a file picker) |
+| Variables import/export (JSON) | done | the REST local variables shape (round-trips; merges by collection, mode and variable name); CSS custom properties and Dart constants (Flutter) export; in the browser the export arrives as a download (import there still needs a file picker) |
 | Expressions in prototype set-variable actions | done | see [prototyping-parity](prototyping-parity.md) |
 
 ## Revision history
diff --git a/docs/mcp.md b/docs/mcp.md
index 64228ea7..2b3ef2bd 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -816,8 +816,11 @@ frame back to Auto, inheriting its parent's mode).
 The same JSON carries variables between FigCraft files: `variable.export {collections?, format?,
 path?}` writes this file's collections (default: all but library copies) as a local variables
 response (`format: "json"`, the default) or as CSS custom properties (`format: "css"`: the default
-mode on `:root`, each other mode on `[data-<collection>="<mode>"]`, aliases as `var(--name)`), and
-returns `{text}` (or writes `path` and returns `{path}`). `variable.import {variables}` (an object,
+mode on `:root`, each other mode on `[data-<collection>="<mode>"]`, aliases as `var(--name)`) or as
+Dart constants for Flutter (`format: "dart"`: an `abstract final class` per collection and mode, the
+default mode's named after the collection and the others after the collection and the mode, with a
+`static const` `Color`, `double`, `String` or `bool` per variable; names become camelCase Dart
+identifiers kept apart, aliases are resolved to their value in that mode), and returns `{text}` (or writes `path` and returns `{path}`). `variable.import {variables}` (an object,
 JSON text or a path) reads one back: a collection joins this file's collection of the same name
 (values matched by mode name, new modes and variables added, a same-named variable of another type
 skipped with a warning; library copies and extended collections are never targets), others are

From 987ad67f7e13c6e61f4c6ce066aa2510c24ecc15 Mon Sep 17 00:00:00 2001
From: focuer <youngeui.bae@minishtech.com>
Date: Sun, 18 Oct 2026 23:16:06 +0900
Subject: [PATCH 03/59] web: window.figcraft, the control channel for the page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The same JSON methods as the desktop control server (engine.execute, ui.inspect, ui.screenshot, …),
as promises on window.figcraft, like FilmCraft's window.filmcraft: an agent driving the editor in a
browser tab or an <iframe> uses the same commands as the CLI and the MCP server. openFile opens
bytes the way a dropped file opens; captureDownloads keeps saves in the page for readFile.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 Cargo.lock                           |   2 +
 apps/figcraft-web/Cargo.toml         |   2 +
 apps/figcraft-web/src/api.rs         | 171 +++++++++++++++++++++++++++
 apps/figcraft-web/src/main.rs        |   4 +
 apps/figcraft-web/src/saved_files.rs |  70 +++++++++++
 apps/figcraft-web/src/web.rs         |  10 ++
 docs/control-protocol.md             |  20 ++++
 7 files changed, 279 insertions(+)
 create mode 100644 apps/figcraft-web/src/api.rs
 create mode 100644 apps/figcraft-web/src/saved_files.rs

diff --git a/Cargo.lock b/Cargo.lock
index 86bccfa3..3dd44f34 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1726,6 +1726,7 @@ dependencies = [
 name = "figcraft-web"
 version = "0.7.0"
 dependencies = [
+ "base64 0.22.1",
  "eframe",
  "egui",
  "figcraft-collab-net",
@@ -1733,6 +1734,7 @@ dependencies = [
  "figcraft-ui-egui",
  "js-sys",
  "log",
+ "serde_json",
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
diff --git a/apps/figcraft-web/Cargo.toml b/apps/figcraft-web/Cargo.toml
index 2f1a8190..1fd2b33f 100644
--- a/apps/figcraft-web/Cargo.toml
+++ b/apps/figcraft-web/Cargo.toml
@@ -24,6 +24,8 @@ log = { workspace = true }
 # `wgpu` pulls egui-wgpu's defaults: WebGPU plus the WebGL2 fallback.
 eframe = { workspace = true, features = ["default_fonts", "wgpu", "accesskit"] }
 wasm-bindgen = "0.2"
+base64 = { workspace = true }
+serde_json = { workspace = true }
 js-sys = "0.3"
 wasm-bindgen-futures = "0.4"
 web-sys = { version = "0.3", features = ["Window", "Document", "Element", "HtmlCanvasElement", "HtmlElement", "HtmlAnchorElement", "Node", "Blob", "BlobPropertyBag", "Url", "Location", "MediaQueryList", "Navigator", "Gamepad", "GamepadButton", "GamepadMappingType"] }
diff --git a/apps/figcraft-web/src/api.rs b/apps/figcraft-web/src/api.rs
new file mode 100644
index 00000000..f8595226
--- /dev/null
+++ b/apps/figcraft-web/src/api.rs
@@ -0,0 +1,171 @@
+//! `window.figcraft`: the control channel for the page, as promises.
+//!
+//! The same JSON methods as the desktop control server (`docs/control-protocol.md`), so an agent
+//! driving FigCraft in a browser tab (or an `<iframe>` in another app) uses the same commands as
+//! the CLI and the MCP server:
+//!
+//! ```js
+//! await figcraft.execute("node.create", {kind: "frame", name: "Home"})  // engine command → its result
+//! await figcraft.request("document.inspect")                            // control method → its result
+//! await figcraft.commands()                                             // command list
+//! const {base64} = await figcraft.screenshot()                          // the canvas as PNG (base64)
+//! await figcraft.openFile("home.fig", bytes)                            // `file.open` with the bytes
+//! figcraft.captureDownloads(true)                                       // saves stay in the page…
+//! figcraft.files(); await figcraft.readFile("home.figcraft")            // …to be read back
+//! ```
+//!
+//! Results resolve with the method's `result`; errors reject with an `Error`.
+
+use std::cell::{Cell, RefCell};
+use std::sync::mpsc::{Receiver, TryRecvError};
+
+use base64::Engine as _;
+use figcraft_ui_egui::{ControlReply, ControlRequest};
+use serde_json::{Value, json};
+use wasm_bindgen::prelude::*;
+
+use crate::saved_files::SavedFiles;
+
+type Waiting = (Receiver<ControlReply>, js_sys::Function, js_sys::Function);
+
+thread_local! {
+    static QUEUE: RefCell<Vec<ControlRequest>> = const { RefCell::new(Vec::new()) };
+    static WAITING: RefCell<Vec<Waiting>> = const { RefCell::new(Vec::new()) };
+    static NEXT_ID: Cell<u64> = const { Cell::new(0) };
+    static CTX: RefCell<Option<egui::Context>> = const { RefCell::new(None) };
+    static CAPTURE: Cell<bool> = const { Cell::new(false) };
+    static SAVED: RefCell<SavedFiles> = RefCell::new(SavedFiles::default());
+}
+
+pub fn connect(ctx: egui::Context) {
+    CTX.with(|c| *c.borrow_mut() = Some(ctx));
+}
+
+/// The page's requests since the last frame, for the app's control queue.
+pub fn take_requests() -> Vec<ControlRequest> {
+    QUEUE.with(|q| std::mem::take(&mut *q.borrow_mut()))
+}
+
+/// Keep a save instead of downloading it, when the page asked for that. True when kept.
+pub fn capture(name: &str, bytes: &[u8]) -> bool {
+    if !CAPTURE.with(Cell::get) {
+        return false;
+    }
+    SAVED.with(|s| s.borrow_mut().keep(name, bytes));
+    true
+}
+
+fn to_js(v: &Value) -> JsValue {
+    js_sys::JSON::parse(&v.to_string()).unwrap_or(JsValue::NULL)
+}
+
+fn from_js(v: &JsValue) -> Value {
+    if v.is_undefined() || v.is_null() {
+        return json!({});
+    }
+    js_sys::JSON::stringify(v).ok().and_then(|s| s.as_string()).and_then(|s| serde_json::from_str(&s).ok()).unwrap_or(json!({}))
+}
+
+/// Settle the promises of answered requests (called every frame).
+pub fn poll_replies() {
+    WAITING.with(|w| {
+        w.borrow_mut().retain(|(rx, resolve, reject)| match rx.try_recv() {
+            Ok(ControlReply { result: Ok(v), .. }) => {
+                let _ = resolve.call1(&JsValue::NULL, &to_js(&v));
+                false
+            }
+            Ok(ControlReply { result: Err(e), .. }) => {
+                let _ = reject.call1(&JsValue::NULL, &js_sys::Error::new(&e));
+                false
+            }
+            Err(TryRecvError::Empty) => true,
+            Err(TryRecvError::Disconnected) => {
+                let _ = reject.call1(&JsValue::NULL, &js_sys::Error::new("request dropped"));
+                false
+            }
+        });
+    });
+}
+
+fn request(method: &str, params: Value) -> js_sys::Promise {
+    let method = method.to_string();
+    let p = js_sys::Promise::new(&mut |resolve, reject| {
+        let (reply, rx) = std::sync::mpsc::channel();
+        let id = NEXT_ID.with(|n| {
+            n.set(n.get() + 1);
+            n.get()
+        });
+        let req = ControlRequest { id: json!(id), method: method.clone(), params: params.clone(), reply, cancelled: Default::default() };
+        QUEUE.with(|q| q.borrow_mut().push(req));
+        WAITING.with(|w| w.borrow_mut().push((rx, resolve, reject)));
+    });
+    CTX.with(|c| {
+        if let Some(ctx) = c.borrow().as_ref() {
+            ctx.request_repaint();
+        }
+    });
+    p
+}
+
+fn set_fn(obj: &js_sys::Object, name: &str, f: JsValue) -> Result<(), JsValue> {
+    js_sys::Reflect::set(obj, &name.into(), &f).map(|_| ())
+}
+
+/// Install `window.figcraft`.
+pub fn install() -> Result<(), JsValue> {
+    let obj = js_sys::Object::new();
+    set_fn(
+        &obj,
+        "request",
+        Closure::<dyn Fn(String, JsValue) -> js_sys::Promise>::new(|method: String, params: JsValue| request(&method, from_js(&params))).into_js_value(),
+    )?;
+    set_fn(
+        &obj,
+        "execute",
+        Closure::<dyn Fn(String, JsValue) -> js_sys::Promise>::new(|command: String, params: JsValue| {
+            request("engine.execute", json!({"command": command, "params": from_js(&params)}))
+        })
+        .into_js_value(),
+    )?;
+    set_fn(&obj, "commands", Closure::<dyn Fn() -> js_sys::Promise>::new(|| request("engine.commands", json!({}))).into_js_value())?;
+    set_fn(&obj, "inspect", Closure::<dyn Fn() -> js_sys::Promise>::new(|| request("document.inspect", json!({}))).into_js_value())?;
+    set_fn(
+        &obj,
+        "screenshot",
+        Closure::<dyn Fn(JsValue) -> js_sys::Promise>::new(|params: JsValue| request("ui.screenshot", from_js(&params))).into_js_value(),
+    )?;
+    set_fn(
+        &obj,
+        "openFile",
+        Closure::<dyn Fn(String, js_sys::Uint8Array) -> js_sys::Promise>::new(|name: String, bytes: js_sys::Uint8Array| {
+            let data = base64::engine::general_purpose::STANDARD.encode(bytes.to_vec());
+            request("engine.execute", json!({"command": "file.open", "params": {"name": name, "data": data}}))
+        })
+        .into_js_value(),
+    )?;
+    set_fn(&obj, "captureDownloads", Closure::<dyn Fn(bool)>::new(|on: bool| CAPTURE.with(|c| c.set(on))).into_js_value())?;
+    set_fn(
+        &obj,
+        "files",
+        Closure::<dyn Fn() -> JsValue>::new(|| {
+            SAVED.with(|s| to_js(&Value::Array(s.borrow().list().map(|(n, size)| json!({"path": n, "size": size})).collect())))
+        })
+        .into_js_value(),
+    )?;
+    set_fn(
+        &obj,
+        "readFile",
+        Closure::<dyn Fn(String) -> Result<JsValue, JsValue>>::new(|name: String| {
+            SAVED.with(|s| {
+                s.borrow()
+                    .get(&name)
+                    .map(|b| js_sys::Uint8Array::from(b).into())
+                    .ok_or_else(|| js_sys::Error::new(&format!("{name}: not found")).into())
+            })
+        })
+        .into_js_value(),
+    )?;
+    let w = web_sys::window().ok_or("no window")?;
+    js_sys::Reflect::set(&w, &"figcraft".into(), &obj)?;
+    Ok(())
+}
diff --git a/apps/figcraft-web/src/main.rs b/apps/figcraft-web/src/main.rs
index 7eed2ffb..f83dd5a4 100644
--- a/apps/figcraft-web/src/main.rs
+++ b/apps/figcraft-web/src/main.rs
@@ -25,6 +25,10 @@ mod query;
 #[cfg(test)]
 mod query_tests;
 #[cfg(target_arch = "wasm32")]
+mod api;
+#[cfg(any(target_arch = "wasm32", test))]
+mod saved_files;
+#[cfg(target_arch = "wasm32")]
 mod web;
 
 #[cfg(target_arch = "wasm32")]
diff --git a/apps/figcraft-web/src/saved_files.rs b/apps/figcraft-web/src/saved_files.rs
new file mode 100644
index 00000000..7cd88637
--- /dev/null
+++ b/apps/figcraft-web/src/saved_files.rs
@@ -0,0 +1,70 @@
+//! What the page keeps of the app's saves (`api.rs`): `readFile` reads them back.
+
+/// Saved files kept (the oldest go first).
+pub const MAX_SAVED: usize = 16;
+
+/// The last component of a `/` or `\` path.
+fn file_name(path: &str) -> &str {
+    path.rsplit(['/', '\\']).next().filter(|n| !n.is_empty()).unwrap_or(path)
+}
+
+/// Files by name, newest last: saving a name again replaces it.
+#[derive(Default)]
+pub struct SavedFiles(Vec<(String, Vec<u8>)>);
+
+impl SavedFiles {
+    /// Keep `bytes` under the last component of `path`.
+    pub fn keep(&mut self, path: &str, bytes: &[u8]) {
+        let name = file_name(path).to_string();
+        self.0.retain(|(n, _)| *n != name);
+        self.0.push((name, bytes.to_vec()));
+        let extra = self.0.len().saturating_sub(MAX_SAVED);
+        self.0.drain(..extra);
+    }
+
+    /// A kept file by its name, or by a path ending in it.
+    pub fn get(&self, name: &str) -> Option<&[u8]> {
+        let wanted = file_name(name);
+        self.0.iter().find(|(n, _)| n == wanted).map(|(_, b)| b.as_slice())
+    }
+
+    /// `(name, size)` of each kept file, oldest first.
+    pub fn list(&self) -> impl Iterator<Item = (&str, usize)> {
+        self.0.iter().map(|(n, b)| (n.as_str(), b.len()))
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn keeps_by_name_replaces_and_reads_back_by_path() {
+        let mut s = SavedFiles::default();
+        s.keep("exports/poster.png", b"one");
+        s.keep(r"C:\out\poster.png", b"two");
+        s.keep("notes.txt", b"three");
+        assert_eq!(s.list().collect::<Vec<_>>(), vec![("poster.png", 3), ("notes.txt", 5)]);
+        assert_eq!(s.get("poster.png"), Some(&b"two"[..]));
+        assert_eq!(s.get("/exports/poster.png"), Some(&b"two"[..]));
+        assert_eq!(s.get("missing.png"), None);
+    }
+
+    #[test]
+    fn drops_the_oldest_past_the_cap() {
+        let mut s = SavedFiles::default();
+        for i in 0..MAX_SAVED + 3 {
+            s.keep(&format!("f{i}.png"), &[0]);
+        }
+        assert_eq!(s.list().count(), MAX_SAVED);
+        assert_eq!(s.get("f0.png"), None);
+        assert!(s.get(&format!("f{}.png", MAX_SAVED + 2)).is_some());
+    }
+
+    #[test]
+    fn a_trailing_separator_keeps_the_whole_name() {
+        let mut s = SavedFiles::default();
+        s.keep("odd/", b"x");
+        assert_eq!(s.get("odd/"), Some(&b"x"[..]));
+    }
+}
diff --git a/apps/figcraft-web/src/web.rs b/apps/figcraft-web/src/web.rs
index 29213621..654d5057 100644
--- a/apps/figcraft-web/src/web.rs
+++ b/apps/figcraft-web/src/web.rs
@@ -47,6 +47,11 @@ pub fn start() {
                         let link = js_sys::decode_uri_component(link).ok().and_then(|s| s.as_string()).unwrap_or_else(|| link.to_string());
                         figcraft_ui_egui::live::open_invite(&mut fig, &link);
                     }
+                    // `window.figcraft`: the page's control channel (crate::api).
+                    crate::api::connect(cc.egui_ctx.clone());
+                    if let Err(e) = crate::api::install() {
+                        log::error!("couldn't install window.figcraft: {e:?}");
+                    }
                     Ok(Box::new(WebShell { fig }))
                 }),
             )
@@ -71,7 +76,9 @@ struct WebShell {
 impl eframe::App for WebShell {
     // `FigApp::ui` runs its own per-frame logic first (fonts, theme), like the desktop app.
     fn ui(&mut self, ui: &mut egui::Ui, _frame: &mut eframe::Frame) {
+        self.fig.control_queue.extend(crate::api::take_requests());
         self.fig.ui(ui);
+        crate::api::poll_replies();
     }
 }
 
@@ -90,6 +97,9 @@ impl Services for WebServices {
     }
     /// A Blob behind a temporary `<a download>` link, clicked and removed.
     fn download(&mut self, name: &str, bytes: &[u8]) -> bool {
+        if crate::api::capture(name, bytes) {
+            return true;
+        }
         match download(name, bytes) {
             Ok(()) => true,
             Err(e) => {
diff --git a/docs/control-protocol.md b/docs/control-protocol.md
index 3ae9d287..02f86c06 100644
--- a/docs/control-protocol.md
+++ b/docs/control-protocol.md
@@ -347,3 +347,23 @@ read -r reply <&3; echo "$reply"
 
 For agents, prefer the MCP server (`figcraft-cli mcp --attach 7979`, see `docs/mcp.md`): it wraps
 these methods in documented tools and returns images inline.
+
+## In the browser: `window.figcraft`
+
+The web build has no TCP server (a page can't listen on a socket), so it offers the same methods to the
+page itself, as promises on `window.figcraft` (`apps/figcraft-web/src/api.rs`). An agent driving FigCraft in a
+browser tab, or a host app showing it in an `<iframe>`, uses the commands it would send to the desktop
+app:
+
+| Call | |
+|---|---|
+| `figcraft.request(method, params)` | any control method of this document → its `result` |
+| `figcraft.execute(command, params)` | `engine.execute` |
+| `figcraft.commands()` / `figcraft.inspect()` | `engine.commands` / the inspect method |
+| `figcraft.screenshot(params)` | `ui.screenshot` (no `path`: the PNG comes back inline) |
+| `figcraft.openFile(name, bytes)` | runs `file.open` with the bytes as `data` and resolves with its result |
+| `figcraft.captureDownloads(on)` | while on, a save or export is kept in the page instead of downloaded |
+| `figcraft.files()` / `figcraft.readFile(name)` | the kept files (`{path, size}`) / one of them as a `Uint8Array` |
+
+Errors reject with an `Error` carrying the method's message. Requests run on the UI's next frame, so a
+hidden tab (whose frames the browser pauses) answers when it is shown again.

From 71dfae9442acadd132a6f102e1412eadb54a2b57 Mon Sep 17 00:00:00 2001
From: focuer <youngeui.bae@minishtech.com>
Date: Mon, 19 Oct 2026 01:14:43 +0900
Subject: [PATCH 04/59] web: rustfmt window.figcraft

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/figcraft-web/src/api.rs  | 3 ++-
 apps/figcraft-web/src/main.rs | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/figcraft-web/src/api.rs b/apps/figcraft-web/src/api.rs
index f8595226..d51e5eaf 100644
--- a/apps/figcraft-web/src/api.rs
+++ b/apps/figcraft-web/src/api.rs
@@ -117,7 +117,8 @@ pub fn install() -> Result<(), JsValue> {
     set_fn(
         &obj,
         "request",
-        Closure::<dyn Fn(String, JsValue) -> js_sys::Promise>::new(|method: String, params: JsValue| request(&method, from_js(&params))).into_js_value(),
+        Closure::<dyn Fn(String, JsValue) -> js_sys::Promise>::new(|method: String, params: JsValue| request(&method, from_js(&params)))
+            .into_js_value(),
     )?;
     set_fn(
         &obj,
diff --git a/apps/figcraft-web/src/main.rs b/apps/figcraft-web/src/main.rs
index f83dd5a4..7774e2d8 100644
--- a/apps/figcraft-web/src/main.rs
+++ b/apps/figcraft-web/src/main.rs
@@ -20,12 +20,12 @@
 //! The link carries the session's secret; a fragment is never sent to the web host, but the address
 //! bar and the browser history keep it, so the URL is as private as the link itself.
 
+#[cfg(target_arch = "wasm32")]
+mod api;
 #[cfg(any(target_arch = "wasm32", test))]
 mod query;
 #[cfg(test)]
 mod query_tests;
-#[cfg(target_arch = "wasm32")]
-mod api;
 #[cfg(any(target_arch = "wasm32", test))]
 mod saved_files;
 #[cfg(target_arch = "wasm32")]

From 8b5441eb84d95b538d9355c36c2baba7c1bc5bf0 Mon Sep 17 00:00:00 2001
From: Filip Strajnar <filip.strajnar@proton.me>
Date: Sun, 18 Oct 2026 19:25:34 +0200
Subject: [PATCH 05/59] M6: figcraft-vectordrawable: an Android Vector Drawable
 writer

A new L4 crate that writes layers as an Android Vector Drawable (XML):
shapes, booleans and text as baked path data, solid and gradient fills
(linear, radial and sweep, exact for any handle frame via a group and a
2x2 SVD), native strokes where Android draws them the same and filled
stroke outlines otherwise, clip frames and masks as <clip-path> groups.

What a drawable can't hold is governed by Compat (bestEffort / exact /
ignore): layer opacity over overlapping shapes, even-odd fills and clips
(rewritten to non-zero via pathops), diamond gradients, alpha masks;
effects, image and pattern fills and blend modes are left out with a
warning. Output is pretty-printed, numbers are finite and short, names
(android:name) are optional, escaped and unique.
---
 Cargo.lock                                   |  14 +
 Cargo.toml                                   |   1 +
 crates/vectordrawable/Cargo.toml             |  21 +
 crates/vectordrawable/src/lib.rs             | 111 +++++
 crates/vectordrawable/src/model.rs           | 122 ++++++
 crates/vectordrawable/src/paint.rs           | 139 +++++++
 crates/vectordrawable/src/stroke.rs          |  62 +++
 crates/vectordrawable/src/tests/compat.rs    | 261 ++++++++++++
 crates/vectordrawable/src/tests/gradients.rs | 269 ++++++++++++
 crates/vectordrawable/src/tests/mod.rs       |  99 +++++
 crates/vectordrawable/src/tests/shapes.rs    | 210 ++++++++++
 crates/vectordrawable/src/tests/strokes.rs   | 152 +++++++
 crates/vectordrawable/src/tests/xml_out.rs   |  88 ++++
 crates/vectordrawable/src/text.rs            |  30 ++
 crates/vectordrawable/src/walk.rs            | 406 +++++++++++++++++++
 crates/vectordrawable/src/warnings.rs        |  89 ++++
 crates/vectordrawable/src/xml.rs             | 243 +++++++++++
 xtask/src/layers.rs                          |   1 +
 18 files changed, 2318 insertions(+)
 create mode 100644 crates/vectordrawable/Cargo.toml
 create mode 100644 crates/vectordrawable/src/lib.rs
 create mode 100644 crates/vectordrawable/src/model.rs
 create mode 100644 crates/vectordrawable/src/paint.rs
 create mode 100644 crates/vectordrawable/src/stroke.rs
 create mode 100644 crates/vectordrawable/src/tests/compat.rs
 create mode 100644 crates/vectordrawable/src/tests/gradients.rs
 create mode 100644 crates/vectordrawable/src/tests/mod.rs
 create mode 100644 crates/vectordrawable/src/tests/shapes.rs
 create mode 100644 crates/vectordrawable/src/tests/strokes.rs
 create mode 100644 crates/vectordrawable/src/tests/xml_out.rs
 create mode 100644 crates/vectordrawable/src/text.rs
 create mode 100644 crates/vectordrawable/src/walk.rs
 create mode 100644 crates/vectordrawable/src/warnings.rs
 create mode 100644 crates/vectordrawable/src/xml.rs

diff --git a/Cargo.lock b/Cargo.lock
index 86bccfa3..523c5f9f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1722,6 +1722,20 @@ dependencies = [
  "web-time",
 ]
 
+[[package]]
+name = "figcraft-vectordrawable"
+version = "0.7.0"
+dependencies = [
+ "figcraft-color",
+ "figcraft-doc",
+ "figcraft-geom",
+ "figcraft-pathops",
+ "figcraft-render",
+ "figcraft-text",
+ "roxmltree 0.21.1",
+ "thiserror 2.0.21",
+]
+
 [[package]]
 name = "figcraft-web"
 version = "0.7.0"
diff --git a/Cargo.toml b/Cargo.toml
index 932da46f..9cf82882 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -23,6 +23,7 @@ figcraft-pathops = { path = "crates/pathops" }
 figcraft-render = { path = "crates/render" }
 figcraft-svg = { path = "crates/svg" }
 figcraft-pdf = { path = "crates/pdf" }
+figcraft-vectordrawable = { path = "crates/vectordrawable" }
 figcraft-format = { path = "crates/format" }
 figcraft-tools = { path = "crates/tools" }
 figcraft-collab = { path = "crates/collab" }
diff --git a/crates/vectordrawable/Cargo.toml b/crates/vectordrawable/Cargo.toml
new file mode 100644
index 00000000..461e9c07
--- /dev/null
+++ b/crates/vectordrawable/Cargo.toml
@@ -0,0 +1,21 @@
+[package]
+name = "figcraft-vectordrawable"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+description = "FigCraft Android Vector Drawable export (shapes, strokes, gradients, clips and vector masks as a <vector> XML drawable)"
+
+[lints]
+workspace = true
+
+[dependencies]
+figcraft-geom = { workspace = true }
+figcraft-color = { workspace = true }
+figcraft-doc = { workspace = true }
+figcraft-text = { workspace = true }
+figcraft-render = { workspace = true }
+figcraft-pathops = { workspace = true }
+thiserror = { workspace = true }
+
+[dev-dependencies]
+roxmltree = "0.21"
diff --git a/crates/vectordrawable/src/lib.rs b/crates/vectordrawable/src/lib.rs
new file mode 100644
index 00000000..f12e9158
--- /dev/null
+++ b/crates/vectordrawable/src/lib.rs
@@ -0,0 +1,111 @@
+//! Android Vector Drawable export: the exported layers as one `<vector>` XML drawable.
+//!
+//! Written from Android's public `VectorDrawable` documentation (elements `<vector>`, `<group>`,
+//! `<path>`, `<clip-path>`, gradients as inline `GradientColor` resources through `aapt:attr`).
+//! The drawable is as large as the exported area in dp (1 px = 1 dp), with a viewport of the same
+//! size, so path coordinates are page units relative to the area's top-left corner.
+//!
+//! What maps exactly:
+//! - shapes, booleans, vector networks, frames and text: their outlines
+//!   (`figcraft_render::node_outline`, glyph outlines per styled run), with every transform baked
+//!   into the path data (a `<group>` can only scale, rotate and translate, a `<path>` not at all);
+//! - solid fills and paint, layer and stop opacity, folded into `#AARRGGBB` colours;
+//! - centred, uniform, solid strokes as stroke attributes (width, cap, join, miter limit); every
+//!   other stroke (inside, outside, dashed, variable width, arrows, per-side weights, gradient
+//!   paints, under a skew or non-uniform scale) as its filled outline
+//!   (`figcraft_render::draw::stroke_area`);
+//! - linear, radial and angular (sweep) gradients, for any handle frame: a linear gradient's end
+//!   point is projected so it bands along the width handle; radial and sweep gradients go in a
+//!   `<group>` that scales and rotates the unit circle onto the handle ellipse (a 2×2 singular
+//!   value decomposition; the remaining rotation turns a sweep's stops), with the path mapped back;
+//! - clipping frames and vector masks, as a `<group>` with a `<clip-path>`.
+//!
+//! What can't map exactly depends on [`Compat`]: layer opacity over overlapping shapes, even-odd
+//! fills and clip outlines, diamond gradients, alpha and luminance masks. Images, patterns,
+//! effects and blend modes have no Vector Drawable equivalent and are left out (blend modes draw
+//! as normal). Every change is listed in [`VdExport::warnings`] unless the mode is
+//! [`Compat::Ignore`].
+#![deny(clippy::unwrap_used, clippy::expect_used, clippy::panic, clippy::unimplemented, clippy::todo, clippy::unreachable)]
+
+mod model;
+mod paint;
+mod stroke;
+mod text;
+mod walk;
+mod warnings;
+mod xml;
+
+use figcraft_doc::{Document, NodeId};
+use figcraft_geom::{Affine, Rect};
+use figcraft_render::{ExportDepthError, check_export_depth};
+
+/// How the export handles what a Vector Drawable can't draw exactly.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+pub enum Compat {
+    /// The closest drawing (layer opacity on each shape, even-odd fills and clip outlines rewritten as non-zero, diamond
+    /// gradients as radial, alpha masks as vector masks), with a warning for each change.
+    #[default]
+    BestEffort,
+    /// Never approximate: a layer or paint that can't be drawn exactly is left out, with a warning.
+    Exact,
+    /// Write what maps and leave out the rest without warnings (layer opacity over overlapping
+    /// shapes is dropped, even-odd fills stay `fillType="evenOdd"`, even-odd clip outlines clip
+    /// as non-zero, diamond gradients are left out, alpha masks clip to their outline).
+    Ignore,
+}
+
+#[derive(Clone, Debug, Default)]
+pub struct VdOptions {
+    /// The page area the drawable covers (default: the exported layers' export bounds).
+    pub bounds: Option<Rect>,
+    /// Layer names as `android:name` attributes (unique in the file: repeats get `_2`, `_3`…).
+    pub include_names: bool,
+    pub compat: Compat,
+}
+
+/// A written drawable and what was changed or left out on the way.
+#[derive(Clone, Debug, PartialEq)]
+pub struct VdExport {
+    pub xml: String,
+    pub warnings: Vec<String>,
+}
+
+#[derive(Debug, thiserror::Error, PartialEq)]
+pub enum VdError {
+    #[error("nothing to export")]
+    Empty,
+    #[error(transparent)]
+    Depth(#[from] ExportDepthError),
+}
+
+/// The layers `ids` (bottom to top) as an Android Vector Drawable. Colours are written as they
+/// are: convert a Display P3 document to sRGB first (`Document::in_srgb`).
+pub fn try_export(doc: &Document, ids: &[NodeId], opts: &VdOptions) -> Result<VdExport, VdError> {
+    check_export_depth(doc, ids)?;
+    let area = match opts.bounds {
+        Some(b) if [b.x0, b.y0, b.x1, b.y1].iter().all(|v| v.is_finite()) => b,
+        _ => ids.iter().filter_map(|i| figcraft_render::export_bounds(doc, *i)).reduce(|a, b| a.union(b)).ok_or(VdError::Empty)?,
+    };
+    let (w, h) = (area.width(), area.height());
+    if !(w.is_finite() && h.is_finite() && w > 0.0 && h > 0.0) {
+        return Err(VdError::Empty);
+    }
+    let origin = Affine::translate((-area.x0, -area.y0));
+    let mut walker = walk::Walker::new(doc, opts);
+    let mut items = Vec::new();
+    for id in ids {
+        let parent_xf = doc.node(*id).and_then(|n| n.parent).map(|p| doc.world_transform(p)).unwrap_or(Affine::IDENTITY);
+        items.extend(walker.node(*id, origin * parent_xf, 0));
+    }
+    // Nothing drawn still writes a drawable Android loads (one empty path), so a batch export
+    // keeps going, but say so.
+    if items.is_empty() {
+        let first = ids.first().and_then(|i| doc.node(*i)).map(|n| n.name.clone()).unwrap_or_default();
+        walker.nothing_drawn(&first);
+    }
+    let xml = xml::document(w, h, &items);
+    Ok(VdExport { xml, warnings: walker.finish() })
+}
+
+#[cfg(test)]
+mod tests;
diff --git a/crates/vectordrawable/src/model.rs b/crates/vectordrawable/src/model.rs
new file mode 100644
index 00000000..7b6bf7f1
--- /dev/null
+++ b/crates/vectordrawable/src/model.rs
@@ -0,0 +1,122 @@
+//! What the walk produces before it's written: paths and groups in viewport coordinates.
+
+use figcraft_color::Color;
+use figcraft_geom::{BezPath, Rect};
+
+/// A gradient in the coordinates of the path it fills.
+#[derive(Clone, Debug, PartialEq)]
+pub(crate) enum GradKind {
+    Linear { start: (f64, f64), end: (f64, f64) },
+    Radial { center: (f64, f64), radius: f64 },
+    Sweep { center: (f64, f64) },
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub(crate) struct Grad {
+    pub kind: GradKind,
+    /// Offsets in 0..=1, ascending; colours with their opacity folded in.
+    pub stops: Vec<(f64, Color)>,
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub(crate) enum Fill {
+    Solid(Color),
+    Gradient(Grad),
+}
+
+/// A stroke Android draws itself (centred, uniform, solid).
+#[derive(Clone, Debug, PartialEq)]
+pub(crate) struct NativeStroke {
+    pub color: Color,
+    pub width: f64,
+    pub cap: &'static str,
+    pub join: &'static str,
+    pub miter: f64,
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub(crate) struct PathItem {
+    pub name: Option<String>,
+    pub data: BezPath,
+    pub fill: Option<Fill>,
+    pub stroke: Option<NativeStroke>,
+    pub even_odd: bool,
+}
+
+/// A `<group>`'s own transform: scale, then rotate (degrees), then translate.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) struct GroupXf {
+    pub translate: (f64, f64),
+    pub rotation: f64,
+    pub scale: (f64, f64),
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub(crate) struct GroupItem {
+    pub name: Option<String>,
+    pub xf: Option<GroupXf>,
+    /// A non-zero clip outline in the group's (untransformed) coordinates.
+    pub clip: Option<BezPath>,
+    pub children: Vec<Item>,
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub(crate) enum ItemKind {
+    Path(PathItem),
+    Group(GroupItem),
+}
+
+/// One written element with the viewport area it paints (for the opacity overlap test).
+#[derive(Clone, Debug, PartialEq)]
+pub(crate) struct Item {
+    pub kind: ItemKind,
+    pub bbox: Rect,
+}
+
+impl Item {
+    /// The areas of what paints, each a leaf (a path, or a transformed gradient group).
+    pub fn leaf_boxes(items: &[Item], out: &mut Vec<Rect>) {
+        for it in items {
+            match &it.kind {
+                ItemKind::Group(g) if g.xf.is_none() => Self::leaf_boxes(&g.children, out),
+                _ => out.push(it.bbox),
+            }
+        }
+    }
+
+    /// Multiply every colour's alpha by `k` (a layer's opacity folded into what it paints).
+    pub fn scale_alpha(items: &mut [Item], k: f32) {
+        let fade = |c: &mut Color| c.a = (c.a * k).clamp(0.0, 1.0);
+        for it in items {
+            match &mut it.kind {
+                ItemKind::Path(p) => {
+                    match &mut p.fill {
+                        Some(Fill::Solid(c)) => fade(c),
+                        Some(Fill::Gradient(g)) => g.stops.iter_mut().for_each(|(_, c)| fade(c)),
+                        None => {}
+                    }
+                    if let Some(s) = &mut p.stroke {
+                        fade(&mut s.color);
+                    }
+                }
+                ItemKind::Group(g) => Self::scale_alpha(&mut g.children, k),
+            }
+        }
+    }
+
+    /// Whether any two leaves' areas overlap (more than `MAX` leaves count as overlapping).
+    pub fn overlap(items: &[Item]) -> bool {
+        const MAX: usize = 64;
+        let mut boxes = Vec::new();
+        Self::leaf_boxes(items, &mut boxes);
+        if boxes.len() > MAX {
+            return true;
+        }
+        boxes.iter().enumerate().any(|(i, a)| {
+            boxes.iter().skip(i + 1).any(|b| {
+                let r = a.intersect(*b);
+                r.width() > 1e-9 && r.height() > 1e-9
+            })
+        })
+    }
+}
diff --git a/crates/vectordrawable/src/paint.rs b/crates/vectordrawable/src/paint.rs
new file mode 100644
index 00000000..f66d0554
--- /dev/null
+++ b/crates/vectordrawable/src/paint.rs
@@ -0,0 +1,139 @@
+//! Gradients in Vector Drawable terms, and the even-odd → non-zero rewrite.
+//!
+//! A gradient's handles map the unit box onto the layer: (0,0) → from, (1,0) → to, (0,1) →
+//! width, a frame `F` (with the layer's transform, into the viewport). A linear gradient bands
+//! along `F`'s second axis, so its Vector Drawable end point is the first axis with the part
+//! along the second removed: exact for any frame, skewed too. Radial and sweep gradients live on
+//! the unit circle: `F = T · R(φ) · S(sx, sy) · R(θ)` (a 2×2 singular value decomposition; `sy`
+//! is negative for a mirrored frame), and a circle doesn't change under the last rotation, so a
+//! `<group>` with translate `T`, rotation `φ` and scale `S` holds a unit gradient at the origin
+//! and the path mapped back by the group's inverse. A sweep turns with `θ`: its stops are
+//! shifted by `θ / 2π` instead.
+
+use figcraft_color::{Color, Gradient};
+use figcraft_geom::{Affine, BezPath, Vec2};
+
+use crate::model::{Grad, GradKind, GroupXf};
+
+/// A gradient fill, ready to write.
+#[derive(Debug, PartialEq)]
+pub(crate) enum GradOut {
+    /// In viewport coordinates, on the path as it is.
+    Plain(Grad),
+    /// In the coordinates of a `<group>` with this transform; `inverse` maps the path into them.
+    Grouped { xf: GroupXf, inverse: Affine, grad: Grad },
+    /// One stop: a solid colour.
+    Solid(Color),
+    /// A frame that collapses to a line or a point: the renderer paints nothing, nor do we.
+    Nothing,
+}
+
+/// The gradient handle frame in a `w`×`h` layer's local space.
+pub(crate) fn frame(g: &Gradient, w: f64, h: f64) -> Affine {
+    let f = (g.from.0 * w, g.from.1 * h);
+    let t = (g.to.0 * w, g.to.1 * h);
+    let k = (g.width.0 * w, g.width.1 * h);
+    Affine::new([t.0 - f.0, t.1 - f.1, k.0 - f.0, k.1 - f.1, f.0, f.1])
+}
+
+/// `m` (2×2, column vectors `(a, b)` and `(c, d)`) as `R(φ) · diag(sx, sy) · R(θ)`: `(φ, sx,
+/// sy, θ)` in radians. `sx ≥ |sy|`; `sy < 0` when `m` mirrors.
+pub(crate) fn svd(a: f64, b: f64, c: f64, d: f64) -> (f64, f64, f64, f64) {
+    let (e, f, g, h) = ((a + d) / 2.0, (a - d) / 2.0, (b + c) / 2.0, (b - c) / 2.0);
+    let (q, r) = (e.hypot(h), f.hypot(g));
+    let (a1, a2) = (g.atan2(f), h.atan2(e));
+    ((a2 + a1) / 2.0, q + r, q - r, (a2 - a1) / 2.0)
+}
+
+/// The colour of `stops` (sorted, at least one) at `t`, clamped at the ends.
+pub(crate) fn color_at(stops: &[(f64, Color)], t: f64) -> Color {
+    let (Some(first), Some(last)) = (stops.first(), stops.last()) else { return Color::new(0.0, 0.0, 0.0, 0.0) };
+    if t <= first.0 {
+        return first.1;
+    }
+    for w in stops.windows(2) {
+        if let [(o0, c0), (o1, c1)] = w
+            && t <= *o1
+        {
+            let span = o1 - o0;
+            let k = if span > 0.0 { ((t - o0) / span) as f32 } else { 1.0 };
+            let mix = |x: f32, y: f32| x + (y - x) * k;
+            return Color::new(mix(c0.r, c1.r), mix(c0.g, c1.g), mix(c0.b, c1.b), mix(c0.a, c1.a));
+        }
+    }
+    last.1
+}
+
+/// Sweep stops turned by `shift` of a turn: what was at `t` is at `t + shift` (wrapping), with
+/// the seam where the gradient starts over kept as a hard step.
+pub(crate) fn turn_stops(stops: &[(f64, Color)], shift: f64) -> Vec<(f64, Color)> {
+    let d = shift.rem_euclid(1.0);
+    if !d.is_finite() || d < 1e-9 || d > 1.0 - 1e-9 || stops.is_empty() {
+        return stops.to_vec();
+    }
+    let seam = 1.0 - d;
+    let mut out = vec![(0.0, color_at(stops, seam))];
+    out.extend(stops.iter().filter(|(o, _)| *o > seam).map(|(o, c)| (o - seam, *c)));
+    out.push((d, color_at(stops, 1.0)));
+    out.push((d, color_at(stops, 0.0)));
+    out.extend(stops.iter().filter(|(o, _)| *o < seam).map(|(o, c)| (o + d, *c)));
+    out.push((1.0, color_at(stops, seam)));
+    // A stop on the seam itself would repeat at the same offset: keep one of each.
+    out.dedup_by(|b, a| (a.0 - b.0).abs() < 1e-9 && a.1 == b.1);
+    out
+}
+
+/// Gradient `g` on a `w`×`h` layer drawn through `to_view` (local → viewport), its stops faded by
+/// `opacity`. `radial` draws an angular or diamond gradient as radial (callers decide when).
+pub(crate) fn gradient(g: &Gradient, opacity: f32, to_view: Affine, w: f64, h: f64, radial: bool) -> GradOut {
+    use figcraft_color::GradientKind;
+    let stops: Vec<(f64, Color)> =
+        g.sorted_stops().iter().map(|s| (f64::from(s.position), s.color.with_alpha(s.color.a * opacity.clamp(0.0, 1.0)))).collect();
+    match stops.as_slice() {
+        [] => return GradOut::Nothing,
+        [(_, c)] => return GradOut::Solid(*c),
+        _ => {}
+    }
+    let f = to_view * frame(g, w, h);
+    let [a, b, c, d, e, ff] = f.as_coeffs();
+    let det = a * d - b * c;
+    let scale = (a * a + b * b + c * c + d * d).max(f64::MIN_POSITIVE);
+    if !(det.is_finite() && e.is_finite() && ff.is_finite()) || det.abs() <= 1e-12 * scale {
+        return GradOut::Nothing;
+    }
+    let kind = if radial { GradientKind::Radial } else { g.kind };
+    match kind {
+        GradientKind::Linear => {
+            let (a0, a1) = (Vec2::new(a, b), Vec2::new(c, d));
+            let k = a0.dot(a1) / a1.hypot2();
+            let n = a0 - a1 * k;
+            GradOut::Plain(Grad { kind: GradKind::Linear { start: (e, ff), end: (e + n.x, ff + n.y) }, stops })
+        }
+        _ => {
+            let (phi, sx, sy, theta) = svd(a, b, c, d);
+            if !(phi.is_finite() && sx.is_finite() && sy.is_finite() && theta.is_finite()) || sy.abs() <= 1e-9 * sx.abs() {
+                return GradOut::Nothing;
+            }
+            let group = Affine::translate((e, ff)) * Affine::rotate(phi) * Affine::scale_non_uniform(sx, sy);
+            let xf = GroupXf { translate: (e, ff), rotation: phi.to_degrees(), scale: (sx, sy) };
+            let grad = if kind == GradientKind::Angular {
+                Grad { kind: GradKind::Sweep { center: (0.0, 0.0) }, stops: turn_stops(&stops, theta / std::f64::consts::TAU) }
+            } else {
+                Grad { kind: GradKind::Radial { center: (0.0, 0.0), radius: 1.0 }, stops }
+            };
+            GradOut::Grouped { xf, inverse: group.inverse(), grad }
+        }
+    }
+}
+
+/// `path` (filled even-odd) as a path that fills the same area with the non-zero rule: the faces
+/// of its arrangement, each an outer contour with its holes wound the other way. `None` when the
+/// path ops can't take it.
+pub(crate) fn nonzero(path: &BezPath) -> Option<BezPath> {
+    let faces = figcraft_pathops::faces(&[(path.clone(), true)]).ok()?;
+    let mut out = BezPath::new();
+    for f in faces {
+        out.extend(f.path.elements().iter().copied());
+    }
+    Some(out)
+}
diff --git a/crates/vectordrawable/src/stroke.rs b/crates/vectordrawable/src/stroke.rs
new file mode 100644
index 00000000..df8c00e2
--- /dev/null
+++ b/crates/vectordrawable/src/stroke.rs
@@ -0,0 +1,62 @@
+//! Strokes Android can draw itself, and the rule for the filled outline of the rest.
+
+use figcraft_doc::{Node, NodeKind, StrokeAlign, StrokeCap, StrokeJoin};
+use figcraft_geom::{Affine, BezPath};
+
+/// A stroke's Vector Drawable attributes: its path (local), width (viewport), cap, join, miter.
+pub(crate) struct Native {
+    pub path: BezPath,
+    pub width: f64,
+    pub cap: &'static str,
+    pub join: &'static str,
+    pub miter: f64,
+}
+
+/// Whether `xf` keeps angles and scales evenly (a rotation, flip and uniform scale), so a stroke
+/// width stays one width.
+pub(crate) fn similarity(xf: Affine) -> bool {
+    let [a, b, c, d, _, _] = xf.as_coeffs();
+    let s2 = (a * a + b * b + c * c + d * d) / 2.0;
+    s2.is_finite() && s2 > 0.0 && (a * c + b * d).abs() <= 1e-6 * s2 && (a * a + b * b - c * c - d * d).abs() <= 1e-6 * s2
+}
+
+/// `n`'s stroke as stroke attributes when Android draws it the same: centred, uniform, without
+/// dashes, arrows or per-point styles, on a shape (not text or a boolean) drawn through a
+/// similarity `xf`. `None`: write its filled outline.
+pub(crate) fn native(n: &Node, xf: Affine) -> Option<Native> {
+    let k = &n.stroke;
+    if k.align != StrokeAlign::Center
+        || k.sides.is_some()
+        || k.profile().is_some()
+        || k.brush.is_some()
+        || !k.dashes.is_empty()
+        || k.cap_start != k.cap_end
+        || k.cap_start.is_arrow()
+        || !(k.weight.is_finite() && k.weight > 0.0)
+        || matches!(n.kind, NodeKind::Text(_) | NodeKind::BooleanOp { .. } | NodeKind::Group | NodeKind::Page { .. })
+        || matches!(&n.kind, NodeKind::Vector { network } if network.has_point_styles(k.join))
+        || !similarity(xf)
+    {
+        return None;
+    }
+    let path = figcraft_doc::geometry::stroke_geometry(n)?;
+    let width = k.weight * xf.determinant().abs().sqrt();
+    let cap = match k.cap_start {
+        StrokeCap::Round => "round",
+        StrokeCap::Square => "square",
+        _ => "butt",
+    };
+    let join = match k.join {
+        StrokeJoin::Miter => "miter",
+        StrokeJoin::Round => "round",
+        StrokeJoin::Bevel => "bevel",
+    };
+    let miter = if k.miter_limit.is_finite() { k.miter_limit.max(1.0) } else { 4.0 };
+    width.is_finite().then_some(Native { path, width, cap, join, miter })
+}
+
+/// Whether `n`'s filled stroke outline needs the even-odd rule (rings of inside and outside
+/// strokes, per-side strokes), as the renderer fills it.
+pub(crate) fn outline_even_odd(n: &Node, closed: bool) -> bool {
+    n.stroke.sides.is_some() || (n.stroke.dashes.is_empty() && closed && n.stroke.align != StrokeAlign::Center)
+}
diff --git a/crates/vectordrawable/src/tests/compat.rs b/crates/vectordrawable/src/tests/compat.rs
new file mode 100644
index 00000000..b26047d8
--- /dev/null
+++ b/crates/vectordrawable/src/tests/compat.rs
@@ -0,0 +1,261 @@
+use super::*;
+use crate::paint::nonzero;
+use figcraft_color::BlendMode;
+use figcraft_doc::{Effect, MaskType};
+use figcraft_geom::{BezPath, Point, Shape};
+
+fn fills(xml: &str) -> Vec<String> {
+    tagged(&elements(xml), "path").iter().filter_map(|e| e.get("fillColor").map(str::to_string)).collect()
+}
+
+/// A 50% frame over two rectangles, apart or overlapping.
+fn faded(overlap: bool) -> (Document, NodeId) {
+    let (mut d, p) = doc();
+    let f = d.create(p, NodeKind::Frame, "Card", 0.0, 0.0, 100.0, 100.0).unwrap();
+    d.get_mut(f).unwrap().fills.clear();
+    d.get_mut(f).unwrap().opacity = 0.5;
+    rect(&mut d, f, "A", 0.0, 0.0, 40.0, 40.0, "FF0000");
+    let x = if overlap { 20.0 } else { 60.0 };
+    rect(&mut d, f, "B", x, 20.0, 40.0, 40.0, "0000FF");
+    (d, f)
+}
+
+#[test]
+fn opacity_over_shapes_apart_is_exact_in_every_mode() {
+    let (d, f) = faded(false);
+    for compat in [Compat::BestEffort, Compat::Exact, Compat::Ignore] {
+        let out = export(&d, &[f], compat);
+        assert_eq!(fills(&out.xml), ["#80FF0000", "#800000FF"], "{compat:?}");
+        assert!(out.warnings.is_empty(), "{compat:?}: {:?}", out.warnings);
+    }
+}
+
+#[test]
+fn opacity_over_overlapping_shapes_per_mode() {
+    let (d, f) = faded(true);
+    let best = export(&d, &[f], Compat::BestEffort);
+    assert_eq!(fills(&best.xml), ["#80FF0000", "#800000FF"]);
+    assert_eq!(best.warnings, ["layer opacity was applied to each shape: where shapes overlap they look denser (Card)"]);
+    let exact = export(&d, &[f], Compat::Exact);
+    assert!(fills(&exact.xml).is_empty(), "{}", exact.xml);
+    assert_eq!(
+        exact.warnings,
+        [
+            "layers with opacity over overlapping shapes were left out (exact mode) (Card)",
+            "nothing in it could be drawn: the drawable is empty (Card)"
+        ]
+    );
+    let ignore = export(&d, &[f], Compat::Ignore);
+    assert_eq!(fills(&ignore.xml), ["#FF0000", "#0000FF"]);
+    assert!(ignore.warnings.is_empty());
+}
+
+#[test]
+fn a_faded_leaf_with_a_fill_and_a_stroke_overlaps_itself() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 0.0, 0.0, 40.0, 40.0, "FF0000");
+    let n = d.get_mut(r).unwrap();
+    n.strokes = vec![Paint::solid(hex("000000"))];
+    n.stroke.weight = 2.0;
+    n.stroke.align = figcraft_doc::StrokeAlign::Center;
+    n.opacity = 0.5;
+    let w = export(&d, &[r], Compat::BestEffort).warnings;
+    assert_eq!(w, ["layer opacity was applied to each shape: where shapes overlap they look denser (R)"]);
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 0.0, 0.0, 40.0, 40.0, "FF0000");
+    d.get_mut(r).unwrap().opacity = 0.5;
+    let out = export(&d, &[r], Compat::Exact);
+    assert_eq!((fills(&out.xml), out.warnings), (vec!["#80FF0000".to_string()], vec![]));
+}
+
+#[test]
+fn even_odd_fills_per_mode() {
+    let (mut d, p) = doc();
+    let a = rect(&mut d, p, "A", 0.0, 0.0, 60.0, 60.0, "000000");
+    let b = rect(&mut d, p, "B", 20.0, 20.0, 20.0, 20.0, "000000");
+    let bo = d.create(p, NodeKind::BooleanOp { op: figcraft_doc::BoolOp::Exclude }, "Ring", 0.0, 0.0, 1.0, 1.0).unwrap();
+    d.reparent(a, bo, None).unwrap();
+    d.reparent(b, bo, None).unwrap();
+    d.fit_to_children(bo).unwrap();
+    d.get_mut(bo).unwrap().fills = vec![Paint::solid(hex("336699"))];
+    let best = export(&d, &[bo], Compat::BestEffort);
+    let path = paths_of(&best.xml)[0].clone();
+    assert!(path.get("fillType").is_none(), "{}", best.xml);
+    let ring = super::strokes::parse_path(path.get("pathData").unwrap());
+    assert_ne!(ring.winding(Point::new(5.0, 5.0)), 0);
+    assert_eq!(ring.winding(Point::new(30.0, 30.0)), 0, "the hole stays a hole under non-zero");
+    // Exact keeps the rule (AndroidX draws it), as does ignore.
+    for compat in [Compat::Exact, Compat::Ignore] {
+        let out = export(&d, &[bo], compat);
+        assert_eq!(paths_of(&out.xml)[0].get("fillType"), Some("evenOdd"), "{compat:?}");
+        assert!(out.warnings.is_empty());
+    }
+    assert_eq!(best.warnings, ["even-odd fills were rewritten as non-zero (Ring)"]);
+}
+
+/// Even-odd inside-ness of `p` against non-zero inside-ness of `nonzero(p)`, on a grid.
+fn same_area(p: &BezPath) {
+    let q = nonzero(p).unwrap();
+    let b = p.bounding_box();
+    let mut inside = 0;
+    for i in 0..60 {
+        for j in 0..60 {
+            let pt = Point::new(b.x0 + b.width() * (i as f64 + 0.37) / 60.0, b.y0 + b.height() * (j as f64 + 0.41) / 60.0);
+            let even = p.winding(pt) % 2 != 0;
+            assert_eq!(even, q.winding(pt) != 0, "at {pt:?}");
+            inside += usize::from(even);
+        }
+    }
+    assert!(inside > 100, "{inside}");
+}
+
+#[test]
+fn the_non_zero_rewrite_fills_the_same_area() {
+    // A pentagram: the middle pentagon is winding 2, outside under even-odd.
+    let mut star = BezPath::new();
+    for k in 0..5 {
+        let a = std::f64::consts::TAU * (k * 2 % 5) as f64 / 5.0 - std::f64::consts::FRAC_PI_2;
+        let pt = Point::new(50.0 + 40.0 * a.cos(), 50.0 + 40.0 * a.sin());
+        if k == 0 { star.move_to(pt) } else { star.line_to(pt) }
+    }
+    star.close_path();
+    same_area(&star);
+    // Nested squares wound the same way (three levels) and an overlapping circle.
+    let mut nest = BezPath::new();
+    for (o, s) in [(0.0, 90.0), (15.0, 60.0), (30.0, 30.0)] {
+        nest.extend(figcraft_geom::Rect::new(o, o, o + s, o + s).to_path(0.1));
+    }
+    nest.extend(figcraft_geom::kurbo::Circle::new((80.0, 80.0), 25.0).to_path(0.1));
+    same_area(&nest);
+}
+
+#[test]
+fn alpha_masks_per_mode() {
+    let (mut d, p) = doc();
+    let g = d.create(p, NodeKind::Group, "G", 0.0, 0.0, 100.0, 100.0).unwrap();
+    let m = d.create(g, ellipse(), "Fade", 10.0, 10.0, 80.0, 80.0).unwrap();
+    d.get_mut(m).unwrap().is_mask = true;
+    d.get_mut(m).unwrap().mask_type = MaskType::Alpha;
+    d.get_mut(m).unwrap().fills = vec![Paint::solid(hex("80808080"))];
+    rect(&mut d, g, "Content", 0.0, 0.0, 100.0, 100.0, "2255FF");
+    let best = export(&d, &[g], Compat::BestEffort);
+    assert!(best.xml.contains("<clip-path") && best.xml.contains("#2255FF"), "{}", best.xml);
+    assert_eq!(best.warnings, ["alpha and luminance masks clip to the mask's outline (Fade)"]);
+    let exact = export(&d, &[g], Compat::Exact);
+    assert!(!exact.xml.contains("#2255FF"), "{}", exact.xml);
+    assert_eq!(
+        exact.warnings,
+        ["layers under alpha or luminance masks were left out (exact mode) (Fade)", "nothing in it could be drawn: the drawable is empty (G)"]
+    );
+    let ignore = export(&d, &[g], Compat::Ignore);
+    assert!(ignore.xml.contains("<clip-path") && ignore.warnings.is_empty());
+}
+
+#[test]
+fn what_has_no_equivalent_is_left_out_and_named_once_per_kind() {
+    let (mut d, p) = doc();
+    let f = d.create(p, NodeKind::Frame, "F", 0.0, 0.0, 200.0, 200.0).unwrap();
+    d.get_mut(f).unwrap().fills.clear();
+    for i in 0..5 {
+        let r = rect(&mut d, f, &format!("Shadow {i}"), 40.0 * i as f64, 0.0, 30.0, 30.0, "FF0000");
+        d.get_mut(r).unwrap().effects = vec![Effect::drop_shadow()];
+    }
+    let b = rect(&mut d, f, "", 0.0, 100.0, 30.0, 30.0, "00FF00");
+    d.get_mut(b).unwrap().blend = BlendMode::Multiply;
+    d.get_mut(b).unwrap().effects = vec![Effect::layer_blur()];
+    let img = rect(&mut d, f, "Photo", 100.0, 100.0, 30.0, 30.0, "000000");
+    d.get_mut(img).unwrap().fills = vec![Paint::image("abc", figcraft_color::ImageScaleMode::Fill)];
+    let out = export(&d, &[f], Compat::BestEffort);
+    assert_eq!(
+        out.warnings,
+        [
+            "drop shadows were left out (Shadow 0, Shadow 1, Shadow 2, 2 more)",
+            "layer blurs were left out (unnamed layer)",
+            "blend modes were drawn as normal (unnamed layer)",
+            "image fills were left out (Photo)",
+        ]
+    );
+    // The shapes themselves are still drawn; the image fill isn't.
+    assert_eq!(fills(&out.xml).len(), 6, "{}", out.xml);
+    assert!(export(&d, &[f], Compat::Ignore).warnings.is_empty());
+    assert_eq!(export(&d, &[f], Compat::Exact).warnings.len(), 4);
+}
+
+#[test]
+fn hidden_and_transparent_layers_paint_nothing() {
+    let (mut d, p) = doc();
+    let f = d.create(p, NodeKind::Frame, "F", 0.0, 0.0, 100.0, 100.0).unwrap();
+    d.get_mut(f).unwrap().fills.clear();
+    let a = rect(&mut d, f, "A", 0.0, 0.0, 10.0, 10.0, "FF0000");
+    let b = rect(&mut d, f, "B", 20.0, 0.0, 10.0, 10.0, "00FF00");
+    rect(&mut d, f, "C", 40.0, 0.0, 10.0, 10.0, "0000FF");
+    d.get_mut(a).unwrap().visible = false;
+    d.get_mut(b).unwrap().opacity = 0.0;
+    assert_eq!(fills(&export(&d, &[f], Compat::Exact).xml), ["#0000FF"]);
+}
+
+#[test]
+fn huge_coordinates_are_left_out_with_a_warning() {
+    let (mut d, p) = doc();
+    let f = d.create(p, NodeKind::Frame, "F", 0.0, 0.0, 100.0, 100.0).unwrap();
+    d.get_mut(f).unwrap().clip = false;
+    d.get_mut(f).unwrap().fills.clear();
+    rect(&mut d, f, "Near", 0.0, 0.0, 10.0, 10.0, "FF0000");
+    rect(&mut d, f, "Far", 3.0e7, 0.0, 10.0, 10.0, "00FF00");
+    let opts = VdOptions { bounds: Some(figcraft_geom::Rect::new(0.0, 0.0, 100.0, 100.0)), ..Default::default() };
+    let out = export_with(&d, &[f], opts);
+    assert_eq!(fills(&out.xml), ["#FF0000"]);
+    assert_eq!(out.warnings, ["shapes with coordinates beyond ±10,000,000 were left out (Far)"]);
+}
+
+/// A group masked by an even-odd outline (an Exclude boolean ring as a vector mask).
+fn ring_masked() -> (Document, NodeId) {
+    let (mut d, p) = doc();
+    let g = d.create(p, NodeKind::Group, "G", 0.0, 0.0, 60.0, 60.0).unwrap();
+    let bo = d.create(g, NodeKind::BooleanOp { op: figcraft_doc::BoolOp::Exclude }, "Ring", 0.0, 0.0, 1.0, 1.0).unwrap();
+    let a = rect(&mut d, bo, "A", 0.0, 0.0, 60.0, 60.0, "000000");
+    let b = rect(&mut d, bo, "B", 20.0, 20.0, 20.0, 20.0, "000000");
+    let _ = (a, b);
+    d.fit_to_children(bo).unwrap();
+    d.get_mut(bo).unwrap().is_mask = true;
+    d.get_mut(bo).unwrap().mask_type = MaskType::Vector;
+    rect(&mut d, g, "Content", 0.0, 0.0, 60.0, 60.0, "2255FF");
+    (d, g)
+}
+
+fn clip_of(xml: &str) -> BezPath {
+    let els = elements(xml);
+    let clips = tagged(&els, "clip-path");
+    assert_eq!(clips.len(), 1, "{xml}");
+    super::strokes::parse_path(clips[0].get("pathData").unwrap())
+}
+
+#[test]
+fn even_odd_clips_per_mode() {
+    let (d, g) = ring_masked();
+    // bestEffort and exact both rewrite the outline: the hole stays out of the clip.
+    for compat in [Compat::BestEffort, Compat::Exact] {
+        let out = export(&d, &[g], compat);
+        let clip = clip_of(&out.xml);
+        assert_ne!(clip.winding(Point::new(5.0, 5.0)), 0, "{compat:?}");
+        assert_eq!(clip.winding(Point::new(30.0, 30.0)), 0, "{compat:?}: the hole stays out of the clip");
+        assert!(out.xml.contains("#2255FF"), "{compat:?}");
+        let want: &[&str] = if compat == Compat::BestEffort { &["even-odd clip outlines were rewritten as non-zero (Ring)"] } else { &[] };
+        assert_eq!(out.warnings, want, "{compat:?}");
+    }
+    // ignore writes the outline as it is (no rewrite), silently.
+    let out = export(&d, &[g], Compat::Ignore);
+    assert!(clip_of(&out.xml).winding(Point::new(5.0, 5.0)) != 0 && out.xml.contains("#2255FF"), "{}", out.xml);
+    assert!(out.warnings.is_empty());
+}
+
+#[test]
+fn an_export_that_draws_nothing_says_so() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "Spacer", 0.0, 0.0, 10.0, 10.0, "FF0000");
+    d.get_mut(r).unwrap().fills.clear();
+    let out = export(&d, &[r], Compat::BestEffort);
+    assert!(out.xml.contains("<vector"), "{}", out.xml);
+    assert_eq!(out.warnings, ["nothing in it could be drawn: the drawable is empty (Spacer)"]);
+    assert!(export(&d, &[r], Compat::Ignore).warnings.is_empty());
+}
diff --git a/crates/vectordrawable/src/tests/gradients.rs b/crates/vectordrawable/src/tests/gradients.rs
new file mode 100644
index 00000000..ae58126e
--- /dev/null
+++ b/crates/vectordrawable/src/tests/gradients.rs
@@ -0,0 +1,269 @@
+use super::*;
+use crate::model::{Grad, GradKind};
+use crate::paint::{GradOut, color_at, gradient, svd, turn_stops};
+use figcraft_color::{ColorStop, Gradient, GradientKind};
+use figcraft_geom::{Affine, Point};
+
+fn two_stop(kind: GradientKind) -> Gradient {
+    let mut g = Gradient::default_for(kind, hex("FF0000"));
+    g.stops = vec![
+        ColorStop { position: 0.0, color: hex("FF0000") },
+        ColorStop { position: 0.6, color: hex("00FF00") },
+        ColorStop { position: 1.0, color: hex("0000FF") },
+    ];
+    g
+}
+
+/// Skewed, mirrored handles: nothing a plain gradient element could hold.
+fn skewed(kind: GradientKind) -> Gradient {
+    let mut g = two_stop(kind);
+    g.from = (0.35, 0.4);
+    g.to = (0.8, 0.55);
+    g.width = (0.25, 0.95);
+    g
+}
+
+/// Where Android samples a Vector Drawable gradient at viewport point `p` (sweep: from +x,
+/// turning toward +y, a full turn 0 → 1).
+fn vd_t(out: &GradOut, p: Point) -> Option<(f64, &Grad)> {
+    let (q, grad) = match out {
+        GradOut::Plain(g) => (p, g),
+        GradOut::Grouped { inverse, grad, .. } => (*inverse * p, grad),
+        _ => return None,
+    };
+    let t = match grad.kind {
+        GradKind::Linear { start, end } => {
+            let (dx, dy) = (end.0 - start.0, end.1 - start.1);
+            ((q.x - start.0) * dx + (q.y - start.1) * dy) / (dx * dx + dy * dy)
+        }
+        GradKind::Radial { center, radius } => (q.x - center.0).hypot(q.y - center.1) / radius,
+        GradKind::Sweep { center } => (q.y - center.1).atan2(q.x - center.0).rem_euclid(std::f64::consts::TAU) / std::f64::consts::TAU,
+    };
+    Some((t, grad))
+}
+
+/// FigCraft's own parameter at `p` for a gradient with frame `f` (viewport ← unit).
+fn figcraft_t(kind: GradientKind, f: Affine, p: Point) -> f64 {
+    let u = f.inverse() * p;
+    match kind {
+        GradientKind::Linear => u.x,
+        GradientKind::Radial => u.x.hypot(u.y),
+        _ => u.y.atan2(u.x).rem_euclid(std::f64::consts::TAU) / std::f64::consts::TAU,
+    }
+}
+
+fn layer_xfs() -> Vec<Affine> {
+    vec![
+        Affine::IDENTITY,
+        Affine::translate((40.0, 10.0)) * Affine::rotate(0.7),
+        Affine::translate((90.0, 0.0)) * Affine::scale_non_uniform(-1.0, 1.0),
+        Affine::new([1.2, 0.3, -0.5, 0.8, 30.0, 20.0]),
+    ]
+}
+
+#[test]
+fn every_gradient_samples_where_figcraft_samples_it() {
+    let (w, h) = (100.0, 80.0);
+    for kind in [GradientKind::Linear, GradientKind::Radial, GradientKind::Angular] {
+        for g in [two_stop(kind), skewed(kind)] {
+            for xf in layer_xfs() {
+                let out = gradient(&g, 1.0, xf, w, h, false);
+                let f = xf * crate::paint::frame(&g, w, h);
+                for i in 0..40 {
+                    for j in 0..40 {
+                        let p = xf * Point::new(w * (i as f64 + 0.5) / 40.0, h * (j as f64 + 0.5) / 40.0);
+                        let want = figcraft_t(kind, f, p);
+                        let (got, grad) = vd_t(&out, p).unwrap();
+                        let stops: Vec<_> = g.sorted_stops().iter().map(|s| (f64::from(s.position), s.color)).collect();
+                        let (a, b) = (color_at(&stops, want), color_at(&grad.stops, got));
+                        // Away from the sweep's seam a turn's worth either side is the same colour.
+                        let near_seam = kind == GradientKind::Angular && (want < 1e-3 || want > 1.0 - 1e-3);
+                        if !near_seam {
+                            assert!(
+                                (a.r - b.r).abs() < 1e-3 && (a.g - b.g).abs() < 1e-3 && (a.b - b.b).abs() < 1e-3,
+                                "{kind:?} {xf:?} at {p:?}: {want} vs {got}"
+                            );
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[test]
+fn the_written_gradient_matches_the_rendered_pixels() {
+    for kind in [GradientKind::Linear, GradientKind::Radial, GradientKind::Angular] {
+        let (mut d, p) = doc();
+        let r = rect(&mut d, p, "R", 0.0, 0.0, 100.0, 80.0, "000000");
+        d.get_mut(r).unwrap().fills = vec![Paint::gradient(skewed(kind))];
+        let area = figcraft_render::export_bounds(&d, r).unwrap();
+        let pix = figcraft_render::render_area(&d, &[r], area, 1.0).unwrap();
+        let rgba = figcraft_render::to_rgba8(&pix);
+        let out = gradient(&skewed(kind), 1.0, Affine::translate((-area.x0, -area.y0)) * d.world_transform(r), 100.0, 80.0, false);
+        let f = Affine::translate((-area.x0, -area.y0)) * d.world_transform(r) * crate::paint::frame(&skewed(kind), 100.0, 80.0);
+        let mut checked = 0;
+        for y in (2..78).step_by(3) {
+            for x in (2..98).step_by(3) {
+                let pt = Point::new(x as f64 + 0.5, y as f64 + 0.5);
+                let ft = figcraft_t(kind, f, pt);
+                if kind == GradientKind::Angular && (ft < 0.03 || ft > 0.97 || (ft - 0.6).abs() < 0.01) {
+                    continue;
+                }
+                let (t, grad) = vd_t(&out, pt).unwrap();
+                let c = color_at(&grad.stops, t);
+                let i = (y * pix.width() as usize + x) * 4;
+                let px = &rgba[i..i + 3];
+                let want = [c.r, c.g, c.b].map(|v| (v * 255.0).round());
+                for k in 0..3 {
+                    assert!((f32::from(px[k]) - want[k]).abs() <= 6.0, "{kind:?} at ({x},{y}): rendered {px:?}, VD {want:?}");
+                }
+                checked += 1;
+            }
+        }
+        assert!(checked > 500, "{kind:?}: {checked}");
+    }
+}
+
+#[test]
+fn svd_puts_the_matrix_back_together() {
+    let ms = [[1.0, 0.0, 0.0, 1.0], [2.0, 0.5, -0.3, 0.7], [0.0, 3.0, -2.0, 0.0], [-1.0, 0.2, 0.4, 1.5], [0.3, -0.9, -1.1, -0.2]];
+    for [a, b, c, d] in ms {
+        let (phi, sx, sy, theta) = svd(a, b, c, d);
+        assert!(sx >= sy.abs() - 1e-12, "{sx} {sy}");
+        assert_eq!(sy < 0.0, a * d - b * c < 0.0, "a mirror shows in sy");
+        let m = Affine::rotate(phi) * Affine::scale_non_uniform(sx, sy) * Affine::rotate(theta);
+        for (x, y) in m.as_coeffs().iter().zip([a, b, c, d]) {
+            assert!(close(*x, y), "{:?} vs {:?}", m.as_coeffs(), [a, b, c, d]);
+        }
+    }
+}
+
+#[test]
+fn turned_stops_keep_every_colour_where_it_was() {
+    let stops = vec![(0.0, hex("FF0000")), (0.25, hex("00FF00")), (0.7, hex("0000FF")), (1.0, hex("FFFF00"))];
+    for shift in [0.1, 0.5, 0.95, -0.3, 1.25] {
+        let turned = turn_stops(&stops, shift);
+        assert!(turned.windows(2).all(|w| w[0].0 <= w[1].0), "sorted: {turned:?}");
+        assert_eq!((turned[0].0, turned[turned.len() - 1].0), (0.0, 1.0));
+        for i in 1..200 {
+            let t = i as f64 / 200.0;
+            let moved = (t + shift).rem_euclid(1.0);
+            if moved < 1e-6 || moved > 1.0 - 1e-6 {
+                continue;
+            }
+            let (a, b) = (color_at(&stops, t), color_at(&turned, moved));
+            assert!((a.r - b.r).abs() < 1e-4 && (a.g - b.g).abs() < 1e-4 && (a.b - b.b).abs() < 1e-4, "{shift}: {t}");
+        }
+    }
+    assert_eq!(turn_stops(&stops, 0.0), stops);
+    assert_eq!(turn_stops(&stops, 2.0), stops);
+}
+
+#[test]
+fn a_collapsed_frame_paints_nothing_and_one_stop_is_solid() {
+    let mut g = two_stop(GradientKind::Radial);
+    g.width = g.from;
+    assert_eq!(gradient(&g, 1.0, Affine::IDENTITY, 10.0, 10.0, false), GradOut::Nothing);
+    let mut one = two_stop(GradientKind::Linear);
+    one.stops.truncate(1);
+    assert_eq!(gradient(&one, 0.5, Affine::IDENTITY, 10.0, 10.0, false), GradOut::Solid(hex("FF000080").with_alpha(0.5)));
+}
+
+#[test]
+fn a_linear_gradient_is_an_aapt_attr_with_paint_opacity_in_its_stops() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 0.0, 0.0, 100.0, 50.0, "000000");
+    let mut paint = Paint::gradient(two_stop(GradientKind::Linear));
+    paint.opacity = 0.5;
+    d.get_mut(r).unwrap().fills = vec![paint];
+    let out = export(&d, &[r], Compat::Exact);
+    assert!(out.xml.contains("xmlns:aapt=\"http://schemas.android.com/aapt\""), "{}", out.xml);
+    let els = elements(&out.xml);
+    let attr = tagged(&els, "attr");
+    assert_eq!(attr[0].get("name"), Some("android:fillColor"));
+    let g = tagged(&els, "gradient")[0];
+    assert_eq!(g.get("type"), Some("linear"));
+    assert!(g.get("tileMode").is_none(), "clamp is the default");
+    // Default handles: top centre to bottom centre.
+    assert_eq!([g.get("startX"), g.get("startY"), g.get("endX"), g.get("endY")], [Some("50"), Some("0"), Some("50"), Some("50")]);
+    let items: Vec<_> = tagged(&els, "item").iter().map(|e| (e.get("offset").unwrap().to_string(), e.get("color").unwrap().to_string())).collect();
+    assert_eq!(items, [("0".into(), "#80FF0000".into()), ("0.6".into(), "#8000FF00".into()), ("1".into(), "#800000FF".into())]);
+    assert!(tagged(&els, "path")[0].get("fillColor").is_none());
+}
+
+#[test]
+fn a_radial_gradient_sits_in_a_group_that_maps_the_unit_circle() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 0.0, 0.0, 100.0, 50.0, "000000");
+    d.get_mut(r).unwrap().fills = vec![Paint::gradient(two_stop(GradientKind::Radial))];
+    let out = export(&d, &[r], Compat::Exact);
+    let els = elements(&out.xml);
+    let gr = tagged(&els, "group")[0];
+    // Centre (50, 25), radii 50 × 25 (an axis-aligned frame: no rotation).
+    assert_eq!([gr.get("translateX"), gr.get("translateY")], [Some("50"), Some("25")]);
+    let (sx, sy) = (gr.get("scaleX").unwrap().parse::<f64>().unwrap(), gr.get("scaleY").unwrap().parse::<f64>().unwrap());
+    assert!(close(sx.abs(), 50.0) && close(sy.abs(), 25.0), "{sx} {sy}");
+    let g = tagged(&els, "gradient")[0];
+    assert_eq!([g.get("type"), g.get("centerX"), g.get("centerY"), g.get("gradientRadius")], [Some("radial"), Some("0"), Some("0"), Some("1")]);
+    // The path is in the group's space: mapped back it covers the rectangle.
+    let (x0, y0, x1, y1) = bounds(tagged(&els, "path")[0].get("pathData").unwrap());
+    let rot = gr.get("rotation").map_or(0.0, |v| v.parse::<f64>().unwrap()).to_radians();
+    let m = Affine::translate((50.0, 25.0)) * Affine::rotate(rot) * Affine::scale_non_uniform(sx, sy);
+    let b = m.transform_rect_bbox(figcraft_geom::Rect::new(x0, y0, x1, y1));
+    assert!(close(b.x0, 0.0) && close(b.y0, 0.0) && (b.x1 - 100.0).abs() < 0.05 && (b.y1 - 50.0).abs() < 0.05, "{b:?}");
+}
+
+#[test]
+fn diamond_gradients_per_mode() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "Gem", 0.0, 0.0, 40.0, 40.0, "000000");
+    d.get_mut(r).unwrap().fills = vec![Paint::solid(hex("FFFFFF")), Paint::gradient(two_stop(GradientKind::Diamond))];
+    let best = export(&d, &[r], Compat::BestEffort);
+    assert!(best.xml.contains("android:type=\"radial\""), "{}", best.xml);
+    assert_eq!(best.warnings, ["diamond gradients were drawn as radial gradients (Gem)"]);
+    let exact = export(&d, &[r], Compat::Exact);
+    assert!(!exact.xml.contains("gradient") && exact.xml.contains("#FFFFFF"), "only the gradient goes:\n{}", exact.xml);
+    assert!(!exact.xml.contains("xmlns:aapt"));
+    assert_eq!(exact.warnings, ["diamond gradients were left out (exact mode) (Gem)"]);
+    let ignore = export(&d, &[r], Compat::Ignore);
+    assert!(!ignore.xml.contains("gradient") && ignore.warnings.is_empty(), "{:?}", ignore.warnings);
+}
+
+#[test]
+fn a_sweep_is_written_as_a_sweep_gradient_with_its_seam() {
+    // Default angular handles start at 3 o'clock; red, yellow at a quarter, blue at the end.
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "Wheel", 0.0, 0.0, 100.0, 100.0, "000000");
+    let mut g = two_stop(GradientKind::Angular);
+    g.stops = vec![
+        ColorStop { position: 0.0, color: hex("FF0000") },
+        ColorStop { position: 0.25, color: hex("FFFF00") },
+        ColorStop { position: 1.0, color: hex("0000FF") },
+    ];
+    d.get_mut(r).unwrap().fills = vec![figcraft_color::Paint::gradient(g)];
+    let out = export(&d, &[r], Compat::BestEffort);
+    let els = elements(&out.xml);
+    let grads = tagged(&els, "gradient");
+    assert_eq!(grads.len(), 1, "{}", out.xml);
+    assert_eq!(grads[0].get("type"), Some("sweep"));
+    assert_eq!((grads[0].get("centerX"), grads[0].get("centerY")), (Some("0"), Some("0")));
+    // In a group that moves the unit gradient onto the layer.
+    assert!(tagged(&els, "group").iter().any(|e| e.get("translateX").is_some()), "{}", out.xml);
+    let items: Vec<(f64, String)> =
+        tagged(&els, "item").iter().map(|e| (e.get("offset").unwrap().parse().unwrap(), e.get("color").unwrap().to_string())).collect();
+    assert_eq!(items.first().map(|i| i.0), Some(0.0), "{items:?}");
+    assert_eq!(items.last().map(|i| i.0), Some(1.0), "{items:?}");
+    assert!(items.windows(2).all(|w| w[0].0 <= w[1].0), "offsets go up: {items:?}");
+    assert!(items.windows(2).all(|w| w[0] != w[1]), "no repeated stops: {items:?}");
+    // The seam: blue (the end) then red (the start) at the same offset.
+    assert!(items.windows(2).any(|w| w[0].0 == w[1].0 && w[0].1 == "#0000FF" && w[1].1 == "#FF0000"), "{items:?}");
+    assert!(out.warnings.is_empty(), "{:?}", out.warnings);
+}
+
+#[test]
+fn turned_stops_on_the_seam_are_not_repeated() {
+    let (r, b) = (hex("FF0000"), hex("0000FF"));
+    let out = turn_stops(&[(0.0, r), (0.5, b), (1.0, r)], 0.5);
+    assert!(out.windows(2).all(|w| w[0] != w[1]), "{out:?}");
+}
diff --git a/crates/vectordrawable/src/tests/mod.rs b/crates/vectordrawable/src/tests/mod.rs
new file mode 100644
index 00000000..d8988e56
--- /dev/null
+++ b/crates/vectordrawable/src/tests/mod.rs
@@ -0,0 +1,99 @@
+//! Unit tests: documents built in code, the written XML parsed back (every test checks it's
+//! well-formed) and compared by structure and numbers.
+
+mod compat;
+mod gradients;
+mod shapes;
+mod strokes;
+mod xml_out;
+
+use figcraft_color::{Color, Paint};
+use figcraft_doc::{Document, NodeId, NodeKind};
+
+use crate::{Compat, VdExport, VdOptions, try_export};
+
+pub(super) fn hex(s: &str) -> Color {
+    Color::from_hex(s).unwrap()
+}
+
+pub(super) fn doc() -> (Document, NodeId) {
+    let d = Document::new("vd");
+    let p = d.first_page().unwrap();
+    (d, p)
+}
+
+pub(super) fn rect(d: &mut Document, parent: NodeId, name: &str, x: f64, y: f64, w: f64, h: f64, fill: &str) -> NodeId {
+    let r = d.create(parent, NodeKind::Rectangle, name, x, y, w, h).unwrap();
+    d.get_mut(r).unwrap().fills = vec![Paint::solid(hex(fill))];
+    r
+}
+
+pub(super) fn ellipse() -> NodeKind {
+    NodeKind::Ellipse { start: 0.0, sweep: std::f64::consts::TAU, inner: 0.0 }
+}
+
+pub(super) fn export(d: &Document, ids: &[NodeId], compat: Compat) -> VdExport {
+    export_with(d, ids, VdOptions { compat, ..Default::default() })
+}
+
+pub(super) fn export_with(d: &Document, ids: &[NodeId], opts: VdOptions) -> VdExport {
+    let out = try_export(d, ids, &opts).unwrap();
+    // Always well-formed, never a non-finite number.
+    if let Err(e) = roxmltree::Document::parse(&out.xml) {
+        panic!("not well-formed: {e}\n{}", out.xml);
+    }
+    for bad in ["NaN", "inf", "=\"-0\"", "e+", "e-"] {
+        assert!(!out.xml.contains(bad), "{bad} in\n{}", out.xml);
+    }
+    out
+}
+
+/// An element as (tag name, attributes without namespace prefixes).
+#[derive(Debug, Clone)]
+pub(super) struct El {
+    pub tag: String,
+    pub attrs: std::collections::BTreeMap<String, String>,
+}
+
+impl El {
+    pub fn get(&self, k: &str) -> Option<&str> {
+        self.attrs.get(k).map(String::as_str)
+    }
+}
+
+/// Every element of `xml`, document order.
+pub(super) fn elements(xml: &str) -> Vec<El> {
+    let doc = roxmltree::Document::parse(xml).unwrap();
+    doc.descendants()
+        .filter(|n| n.is_element())
+        .map(|n| El { tag: n.tag_name().name().to_string(), attrs: n.attributes().map(|a| (a.name().to_string(), a.value().to_string())).collect() })
+        .collect()
+}
+
+pub(super) fn tagged<'a>(els: &'a [El], tag: &str) -> Vec<&'a El> {
+    els.iter().filter(|e| e.tag == tag).collect()
+}
+
+/// The numbers of a path data string, in order.
+pub(super) fn numbers(data: &str) -> Vec<f64> {
+    data.split(|c: char| !(c.is_ascii_digit() || c == '.' || c == '-')).filter(|s| !s.is_empty()).map(|s| s.parse().unwrap()).collect()
+}
+
+/// The (x, y) bounding box of a path data string's points.
+pub(super) fn bounds(data: &str) -> (f64, f64, f64, f64) {
+    let n = numbers(data);
+    let xs = n.iter().step_by(2);
+    let ys = n.iter().skip(1).step_by(2);
+    let (x0, x1) = xs.fold((f64::MAX, f64::MIN), |(a, b), v| (a.min(*v), b.max(*v)));
+    let (y0, y1) = ys.fold((f64::MAX, f64::MIN), |(a, b), v| (a.min(*v), b.max(*v)));
+    (x0, y0, x1, y1)
+}
+
+pub(super) fn close(a: f64, b: f64) -> bool {
+    (a - b).abs() < 1e-3
+}
+
+/// The `<path>` elements of `xml`.
+pub(super) fn paths_of(xml: &str) -> Vec<El> {
+    elements(xml).into_iter().filter(|e| e.tag == "path").collect()
+}
diff --git a/crates/vectordrawable/src/tests/shapes.rs b/crates/vectordrawable/src/tests/shapes.rs
new file mode 100644
index 00000000..e0f789cc
--- /dev/null
+++ b/crates/vectordrawable/src/tests/shapes.rs
@@ -0,0 +1,210 @@
+use super::*;
+use crate::xml::path_data;
+use figcraft_doc::BoolOp;
+use figcraft_geom::Affine;
+
+#[test]
+fn a_rectangle_is_a_drawable_its_size_in_dp() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 10.0, 20.0, 30.0, 40.0, "FF0000");
+    let out = export(&d, &[r], Compat::BestEffort);
+    let els = elements(&out.xml);
+    let v = &els[0];
+    assert_eq!(v.tag, "vector");
+    assert_eq!((v.get("width"), v.get("height")), (Some("30dp"), Some("40dp")));
+    assert_eq!((v.get("viewportWidth"), v.get("viewportHeight")), (Some("30"), Some("40")));
+    assert!(!out.xml.contains("xmlns:aapt"), "no gradient, no aapt namespace");
+    let paths = tagged(&els, "path");
+    assert_eq!(paths.len(), 1);
+    assert_eq!(paths[0].get("fillColor"), Some("#FF0000"));
+    assert_eq!(bounds(paths[0].get("pathData").unwrap()), (0.0, 0.0, 30.0, 40.0));
+    assert!(out.warnings.is_empty(), "{:?}", out.warnings);
+}
+
+#[test]
+fn colour_alpha_and_paint_opacity_go_into_aarrggbb() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 0.0, 0.0, 10.0, 10.0, "00FF0080");
+    d.get_mut(r).unwrap().fills[0].opacity *= 0.5;
+    let out = export(&d, &[r], Compat::BestEffort);
+    // 0x80/255 × 0.5 ≈ 0.251 → 0x40.
+    assert_eq!(paths_of(&out.xml)[0].get("fillColor"), Some("#4000FF00"));
+}
+
+#[test]
+fn several_fills_are_paths_bottom_to_top_and_hidden_ones_are_left_out() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 0.0, 0.0, 10.0, 10.0, "FF0000");
+    let mut hidden = Paint::solid(hex("0000FF"));
+    hidden.visible = false;
+    d.get_mut(r).unwrap().fills.extend([Paint::solid(hex("00FF00")), hidden]);
+    let out = export(&d, &[r], Compat::BestEffort);
+    let fills: Vec<_> = paths_of(&out.xml).iter().map(|e| e.get("fillColor").unwrap().to_string()).collect();
+    assert_eq!(fills, ["#FF0000", "#00FF00"]);
+}
+
+#[test]
+fn shapes_are_their_render_outlines_with_the_transform_baked_in() {
+    let (mut d, p) = doc();
+    let f = d.create(p, NodeKind::Frame, "F", 0.0, 0.0, 300.0, 300.0).unwrap();
+    d.get_mut(f).unwrap().fills.clear();
+    let kinds = [ellipse(), NodeKind::Star { count: 5, inner_ratio: 0.4 }, NodeKind::Polygon { count: 6 }, NodeKind::Rectangle];
+    let mut ids = Vec::new();
+    for (i, k) in kinds.into_iter().enumerate() {
+        let id = d.create(f, k, "S", 20.0 + 60.0 * i as f64, 30.0, 50.0, 40.0).unwrap();
+        let n = d.get_mut(id).unwrap();
+        n.fills = vec![Paint::solid(hex("336699"))];
+        n.corners.radii = [8.0, 4.0, 0.0, 12.0];
+        // Rotated, flipped and sheared: none of it fits a <group>, all of it is in the path.
+        n.transform *= Affine::new([0.9, 0.3, 0.4, -1.1, 0.0, 40.0]);
+        ids.push(id);
+    }
+    let out = export(&d, &[f], Compat::Ignore);
+    let paths = paths_of(&out.xml);
+    assert_eq!(paths.len(), ids.len());
+    let origin = Affine::translate((0.0, 0.0));
+    for (id, el) in ids.iter().zip(&paths) {
+        let n = d.node(*id).unwrap();
+        let (mut outline, _) = figcraft_render::node_outline(&d, n).unwrap();
+        outline.apply_affine(origin * d.world_transform(*id));
+        assert_eq!(el.get("pathData").unwrap(), path_data(&outline));
+    }
+}
+
+#[test]
+fn nested_groups_rotations_and_flips_are_baked() {
+    let (mut d, p) = doc();
+    let g = d.create(p, NodeKind::Group, "G", 0.0, 0.0, 100.0, 100.0).unwrap();
+    let r = rect(&mut d, g, "R", 10.0, 10.0, 40.0, 20.0, "000000");
+    d.get_mut(g).unwrap().transform = Affine::translate((50.0, 50.0)) * Affine::rotate(0.5) * Affine::scale_non_uniform(-1.0, 2.0);
+    let area = figcraft_render::export_bounds(&d, g).unwrap();
+    let out = export(&d, &[g], Compat::BestEffort);
+    let data = paths_of(&out.xml)[0].get("pathData").unwrap().to_string();
+    let n = d.node(r).unwrap();
+    let (mut outline, _) = figcraft_render::node_outline(&d, n).unwrap();
+    outline.apply_affine(Affine::translate((-area.x0, -area.y0)) * d.world_transform(r));
+    assert_eq!(data, path_data(&outline));
+    assert!(!out.xml.contains("<group"), "no group needed:\n{}", out.xml);
+}
+
+#[test]
+fn a_boolean_is_its_result_path() {
+    let (mut d, p) = doc();
+    let a = rect(&mut d, p, "A", 0.0, 0.0, 60.0, 60.0, "000000");
+    let b = d.create(p, ellipse(), "B", 30.0, 30.0, 50.0, 50.0).unwrap();
+    let bo = d.create(p, NodeKind::BooleanOp { op: BoolOp::Subtract }, "Bool", 0.0, 0.0, 1.0, 1.0).unwrap();
+    d.reparent(a, bo, None).unwrap();
+    d.reparent(b, bo, None).unwrap();
+    d.fit_to_children(bo).unwrap();
+    d.get_mut(bo).unwrap().fills = vec![Paint::solid(hex("CC2244"))];
+    let out = export(&d, &[bo], Compat::Exact);
+    let paths = paths_of(&out.xml);
+    assert_eq!(paths.len(), 1, "operands aren't drawn on their own:\n{}", out.xml);
+    assert_eq!(paths[0].get("fillColor"), Some("#CC2244"));
+    assert_eq!(paths[0].get("fillType"), Some("evenOdd"), "exact keeps the boolean's even-odd rule");
+}
+
+#[test]
+fn a_clipping_frame_is_a_group_with_its_clip_path_first() {
+    let (mut d, p) = doc();
+    let f = rect(&mut d, p, "F", 0.0, 0.0, 100.0, 100.0, "FFFFFF");
+    d.get_mut(f).unwrap().kind = NodeKind::Frame;
+    d.get_mut(f).unwrap().clip = true;
+    d.get_mut(f).unwrap().corners.radii = [10.0; 4];
+    rect(&mut d, f, "Over", 50.0, 50.0, 100.0, 100.0, "FF0000");
+    let out = export(&d, &[f], Compat::BestEffort);
+    let els = elements(&out.xml);
+    let tags: Vec<&str> = els.iter().map(|e| e.tag.as_str()).collect();
+    assert_eq!(tags, ["vector", "path", "group", "clip-path", "path"], "{}", out.xml);
+    let clip = tagged(&els, "clip-path")[0].get("pathData").unwrap();
+    assert_eq!(bounds(clip), (0.0, 0.0, 100.0, 100.0));
+    assert!(clip.contains('C'), "rounded corners clip too: {clip}");
+}
+
+#[test]
+fn an_unclipped_frame_draws_its_children_without_a_group() {
+    let (mut d, p) = doc();
+    let f = d.create(p, NodeKind::Frame, "F", 0.0, 0.0, 100.0, 100.0).unwrap();
+    d.get_mut(f).unwrap().clip = false;
+    d.get_mut(f).unwrap().fills.clear();
+    rect(&mut d, f, "A", 10.0, 10.0, 10.0, 10.0, "FF0000");
+    let out = export(&d, &[f], Compat::BestEffort);
+    assert!(!out.xml.contains("<group"), "{}", out.xml);
+}
+
+#[test]
+fn a_vector_mask_clips_the_layers_above_it_and_isnt_drawn() {
+    let (mut d, p) = doc();
+    let g = d.create(p, NodeKind::Group, "G", 0.0, 0.0, 100.0, 100.0).unwrap();
+    let m = d.create(g, ellipse(), "Mask", 10.0, 10.0, 80.0, 80.0).unwrap();
+    {
+        let n = d.get_mut(m).unwrap();
+        n.is_mask = true;
+        n.mask_type = figcraft_doc::MaskType::Vector;
+        n.fills = vec![Paint::solid(hex("00FF00"))];
+    }
+    rect(&mut d, g, "Content", 0.0, 0.0, 100.0, 100.0, "2255FF");
+    let out = export(&d, &[g], Compat::Exact);
+    let els = elements(&out.xml);
+    let tags: Vec<&str> = els.iter().map(|e| e.tag.as_str()).collect();
+    assert_eq!(tags, ["vector", "group", "clip-path", "path"], "{}", out.xml);
+    assert!(!out.xml.contains("#00FF00"), "the mask itself doesn't paint");
+    assert!(out.warnings.is_empty(), "{:?}", out.warnings);
+}
+
+#[test]
+fn text_is_glyph_outlines_one_path_per_styled_run() {
+    use figcraft_doc::{StyleRun, TextData};
+    figcraft_text::scan_system_fonts();
+    let (mut d, p) = doc();
+    let mut text = TextData::new("ab");
+    text.style.font_size = 24.0;
+    let mut style = text.style.clone();
+    style.fills = Some(vec![Paint::solid(hex("00FF00"))]);
+    text.runs.push(StyleRun { start: 1, end: 2, style });
+    text.normalize();
+    let t = d.create(p, NodeKind::Text(text), "Text", 0.0, 0.0, 100.0, 40.0).unwrap();
+    d.get_mut(t).unwrap().fills = vec![Paint::solid(Color::BLACK)];
+    let out = export(&d, &[t], Compat::BestEffort);
+    let fills: Vec<_> = paths_of(&out.xml).iter().map(|e| e.get("fillColor").unwrap().to_string()).collect();
+    assert_eq!(fills, ["#000000", "#00FF00"], "{}", out.xml);
+}
+
+#[test]
+fn nothing_to_export_is_an_error() {
+    let (mut d, p) = doc();
+    assert_eq!(try_export(&d, &[], &VdOptions::default()), Err(crate::VdError::Empty));
+    let r = rect(&mut d, p, "R", 0.0, 0.0, 10.0, 10.0, "000000");
+    let flat = VdOptions { bounds: Some(figcraft_geom::Rect::new(5.0, 5.0, 5.0, 20.0)), ..Default::default() };
+    assert_eq!(try_export(&d, &[r], &flat), Err(crate::VdError::Empty));
+}
+
+#[test]
+fn an_area_shifts_the_viewport_origin() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 10.0, 10.0, 10.0, 10.0, "000000");
+    let opts = VdOptions { bounds: Some(figcraft_geom::Rect::new(0.0, 0.0, 50.0, 25.0)), ..Default::default() };
+    let out = export_with(&d, &[r], opts);
+    let els = elements(&out.xml);
+    assert_eq!(els[0].get("width"), Some("50dp"));
+    assert_eq!(bounds(tagged(&els, "path")[0].get("pathData").unwrap()), (10.0, 10.0, 20.0, 20.0));
+}
+
+#[test]
+fn depth_past_the_limit_is_refused_and_at_the_limit_kept() {
+    use figcraft_render::{ExportDepthError, MAX_EXPORT_DEPTH};
+    let nested = |depth: usize| {
+        let (mut d, p) = doc();
+        let root = d.create(p, NodeKind::Frame, "root", 0.0, 0.0, 32.0, 32.0).unwrap();
+        let mut parent = root;
+        for _ in 1..depth {
+            parent = d.create(parent, NodeKind::Group, "group", 0.0, 0.0, 32.0, 32.0).unwrap();
+        }
+        let leaf = rect(&mut d, parent, "deep-leaf", 3.0, 5.0, 13.0, 17.0, "FF0000");
+        (d, root, leaf)
+    };
+    let (d, root, _) = nested(MAX_EXPORT_DEPTH);
+    assert!(export(&d, &[root], Compat::BestEffort).xml.contains("#FF0000"));
+    let (d, root, leaf) = nested(MAX_EXPORT_DEPTH + 1);
+    assert_eq!(try_export(&d, &[root], &VdOptions::default()), Err(crate::VdError::Depth(ExportDepthError { root, node: leaf })));
+}
diff --git a/crates/vectordrawable/src/tests/strokes.rs b/crates/vectordrawable/src/tests/strokes.rs
new file mode 100644
index 00000000..b29b2715
--- /dev/null
+++ b/crates/vectordrawable/src/tests/strokes.rs
@@ -0,0 +1,152 @@
+use super::*;
+use figcraft_doc::{StrokeAlign, StrokeCap, StrokeJoin};
+use figcraft_geom::Affine;
+
+fn stroked(align: StrokeAlign) -> (Document, NodeId) {
+    let (mut d, p) = doc();
+    let r = d.create(p, NodeKind::Rectangle, "R", 10.0, 10.0, 40.0, 30.0).unwrap();
+    let n = d.get_mut(r).unwrap();
+    n.fills.clear();
+    n.strokes = vec![Paint::solid(hex("112233"))];
+    n.stroke.weight = 4.0;
+    n.stroke.align = align;
+    (d, r)
+}
+
+#[test]
+fn a_centred_stroke_is_drawn_by_android() {
+    let (mut d, r) = stroked(StrokeAlign::Center);
+    {
+        let n = d.get_mut(r).unwrap();
+        n.stroke.join = StrokeJoin::Bevel;
+        n.stroke.cap_start = StrokeCap::Round;
+        n.stroke.cap_end = StrokeCap::Round;
+    }
+    let out = export(&d, &[r], Compat::BestEffort);
+    let paths = paths_of(&out.xml);
+    assert_eq!(paths.len(), 1, "{}", out.xml);
+    let s = &paths[0];
+    assert_eq!((s.get("strokeColor"), s.get("strokeWidth")), (Some("#112233"), Some("4")));
+    assert_eq!((s.get("strokeLineCap"), s.get("strokeLineJoin")), (Some("round"), Some("bevel")));
+    assert!(s.get("fillColor").is_none() && s.get("strokeMiterLimit").is_none());
+    // The viewport grows by half the stroke on each side.
+    assert_eq!(elements(&out.xml)[0].get("width"), Some("44dp"));
+    assert_eq!(bounds(s.get("pathData").unwrap()), (2.0, 2.0, 42.0, 32.0));
+}
+
+#[test]
+fn a_miter_limit_other_than_four_is_written() {
+    let (mut d, r) = stroked(StrokeAlign::Center);
+    d.get_mut(r).unwrap().stroke.miter_limit = 10.0;
+    let out = export(&d, &[r], Compat::BestEffort);
+    assert_eq!(paths_of(&out.xml)[0].get("strokeMiterLimit"), Some("10"));
+}
+
+#[test]
+fn a_uniform_scale_scales_the_stroke_width() {
+    let (mut d, r) = stroked(StrokeAlign::Center);
+    let n = d.get_mut(r).unwrap();
+    n.transform *= Affine::rotate(0.4) * Affine::scale(2.5);
+    let out = export(&d, &[r], Compat::BestEffort);
+    assert_eq!(paths_of(&out.xml)[0].get("strokeWidth"), Some("10"));
+}
+
+#[test]
+fn strokes_android_cant_draw_are_their_filled_outline() {
+    type Edit = fn(&mut figcraft_doc::Node);
+    let cases: [(&str, Edit); 4] = [
+        ("inside", |n| n.stroke.align = StrokeAlign::Inside),
+        ("outside", |n| n.stroke.align = StrokeAlign::Outside),
+        ("dashed", |n| n.stroke.dashes = vec![6.0, 3.0]),
+        ("stretched", |n| n.transform *= Affine::scale_non_uniform(2.0, 1.0)),
+    ];
+    for (what, edit) in cases {
+        let (mut d, r) = stroked(StrokeAlign::Center);
+        edit(d.get_mut(r).unwrap());
+        for compat in [Compat::BestEffort, Compat::Exact, Compat::Ignore] {
+            let out = export(&d, &[r], compat);
+            let paths = paths_of(&out.xml);
+            assert!(!out.xml.contains("strokeColor"), "{what}:\n{}", out.xml);
+            assert!(!paths.is_empty() && paths.iter().all(|p| p.get("fillColor") == Some("#112233")), "{what}:\n{}", out.xml);
+            // Rings fill even-odd in FigCraft: rewritten, or kept as the rule in exact/ignore.
+            let ring = what == "inside" || what == "outside";
+            let kept = paths.iter().any(|p| p.get("fillType") == Some("evenOdd"));
+            match compat {
+                Compat::BestEffort => assert!(!kept, "{what}: rewritten\n{}", out.xml),
+                _ => assert_eq!(kept, ring, "{what} {compat:?}\n{}", out.xml),
+            }
+            if compat == Compat::BestEffort && ring {
+                assert_eq!(out.warnings, ["even-odd fills were rewritten as non-zero (R)"], "{what}");
+            } else {
+                assert!(out.warnings.is_empty(), "{what} {compat:?}: {:?}", out.warnings);
+            }
+        }
+    }
+}
+
+#[test]
+fn an_inside_stroke_outline_covers_only_the_ring() {
+    let (d, r) = stroked(StrokeAlign::Inside);
+    let out = export(&d, &[r], Compat::BestEffort);
+    let data = paths_of(&out.xml)[0].get("pathData").unwrap().to_string();
+    let path = parse_path(&data);
+    use figcraft_geom::Shape;
+    // Viewport = the rectangle itself (inside strokes don't grow it): (0,0)–(40,30).
+    assert_ne!(path.winding((1.0, 1.0).into()), 0, "on the ring");
+    assert_eq!(path.winding((20.0, 15.0).into()), 0, "the hole");
+    assert_eq!(path.winding((-1.0, 15.0).into()), 0, "outside");
+}
+
+#[test]
+fn a_line_stroke_is_native_with_its_caps() {
+    let (mut d, p) = doc();
+    let l = d.create(p, NodeKind::Line, "L", 0.0, 0.0, 50.0, 0.0).unwrap();
+    let n = d.get_mut(l).unwrap();
+    n.strokes = vec![Paint::solid(hex("000000"))];
+    n.stroke.weight = 2.0;
+    n.stroke.cap_start = StrokeCap::Square;
+    n.stroke.cap_end = StrokeCap::Square;
+    let out = export(&d, &[l], Compat::BestEffort);
+    let s = paths_of(&out.xml)[0].clone();
+    assert_eq!((s.get("strokeLineCap"), s.get("strokeWidth")), (Some("square"), Some("2")), "{}", out.xml);
+}
+
+#[test]
+fn a_gradient_stroke_is_an_outline_filled_with_the_gradient() {
+    let (mut d, r) = stroked(StrokeAlign::Center);
+    d.get_mut(r).unwrap().strokes = vec![Paint::gradient(figcraft_color::Gradient::default_for(figcraft_color::GradientKind::Linear, hex("FF0000")))];
+    let out = export(&d, &[r], Compat::BestEffort);
+    assert!(!out.xml.contains("strokeColor") && out.xml.contains("android:type=\"linear\""), "{}", out.xml);
+}
+
+/// Parse path data as written ("M0,0 L1,0 C… Z") back into a path.
+pub(super) fn parse_path(s: &str) -> figcraft_geom::BezPath {
+    let mut p = figcraft_geom::BezPath::new();
+    let mut cmd = ' ';
+    let mut pts: Vec<figcraft_geom::Point> = Vec::new();
+    let flush = |cmd: char, pts: &mut Vec<figcraft_geom::Point>, p: &mut figcraft_geom::BezPath| {
+        match (cmd, pts.as_slice()) {
+            (' ', []) => {}
+            ('M', [a]) => p.move_to(*a),
+            ('L', [a]) => p.line_to(*a),
+            ('Q', [a, b]) => p.quad_to(*a, *b),
+            ('C', [a, b, c]) => p.curve_to(*a, *b, *c),
+            ('Z', []) => p.close_path(),
+            other => panic!("bad segment {other:?} in {s}"),
+        }
+        pts.clear();
+    };
+    for tok in s.split(' ') {
+        let mut rest = tok;
+        if let Some(c) = tok.chars().next().filter(char::is_ascii_alphabetic) {
+            flush(cmd, &mut pts, &mut p);
+            cmd = c;
+            rest = &tok[1..];
+        }
+        if let Some((x, y)) = rest.split_once(',') {
+            pts.push(figcraft_geom::Point::new(x.parse().unwrap(), y.parse().unwrap()));
+        }
+    }
+    flush(cmd, &mut pts, &mut p);
+    p
+}
diff --git a/crates/vectordrawable/src/tests/xml_out.rs b/crates/vectordrawable/src/tests/xml_out.rs
new file mode 100644
index 00000000..8976c8d6
--- /dev/null
+++ b/crates/vectordrawable/src/tests/xml_out.rs
@@ -0,0 +1,88 @@
+use super::*;
+use crate::xml::{color, esc, num};
+
+#[test]
+fn numbers_are_short_finite_and_never_negative_zero() {
+    assert_eq!(num(1.0), "1");
+    assert_eq!(num(0.12345), "0.123");
+    assert_eq!(num(-0.0004), "0");
+    assert_eq!(num(-2.5), "-2.5");
+    assert_eq!(num(1e-9), "0");
+    assert_eq!(num(12345678.9), "12345678.9");
+    assert_eq!(num(f64::NAN), "0");
+    assert_eq!(num(f64::INFINITY), "0");
+}
+
+#[test]
+fn colours_are_rrggbb_or_aarrggbb() {
+    assert_eq!(color(hex("1A2B3C")), "#1A2B3C");
+    assert_eq!(color(hex("1A2B3C80")), "#801A2B3C");
+    assert_eq!(color(Color::new(2.0, -1.0, f32::NAN, 1.0)).len(), 7);
+}
+
+#[test]
+fn text_is_escaped_for_an_attribute() {
+    assert_eq!(esc("a&b<c>\"d'"), "a&amp;b&lt;c&gt;&quot;d&apos;");
+    assert_eq!(esc("tab\tline\nret\r"), "tab&#9;line&#10;ret&#13;");
+    assert_eq!(esc("bell\u{7}\u{FFFE}ok"), "bellok");
+}
+
+#[test]
+fn names_are_written_only_when_asked_unique_and_round_trip() {
+    let (mut d, p) = doc();
+    let g = d.create(p, NodeKind::Group, "Icon & \"co\" <1>", 0.0, 0.0, 50.0, 50.0).unwrap();
+    rect(&mut d, g, "dot", 0.0, 0.0, 10.0, 10.0, "FF0000");
+    rect(&mut d, g, "dot", 20.0, 0.0, 10.0, 10.0, "00FF00");
+    rect(&mut d, g, "  ", 40.0, 0.0, 10.0, 10.0, "0000FF");
+    assert!(!export(&d, &[g], Compat::BestEffort).xml.contains("android:name"));
+    let out = export_with(&d, &[g], VdOptions { include_names: true, ..Default::default() });
+    let els = elements(&out.xml);
+    let names: Vec<_> = els.iter().filter_map(|e| e.get("name")).collect();
+    assert_eq!(names, ["Icon & \"co\" <1>", "dot", "dot_2", "layer"], "{}", out.xml);
+    assert_eq!(tagged(&els, "group")[0].get("name"), Some("Icon & \"co\" <1>"), "a container is a named group");
+}
+
+#[test]
+fn a_long_name_is_cut_at_200_characters() {
+    let (mut d, p) = doc();
+    let long = "é".repeat(300);
+    let r = rect(&mut d, p, &long, 0.0, 0.0, 10.0, 10.0, "FF0000");
+    let out = export_with(&d, &[r], VdOptions { include_names: true, ..Default::default() });
+    assert_eq!(paths_of(&out.xml)[0].get("name").unwrap().chars().count(), 200);
+}
+
+#[test]
+fn the_file_is_pretty_printed() {
+    let (mut d, p) = doc();
+    let f = d.create(p, NodeKind::Frame, "F", 0.0, 0.0, 24.0, 24.0).unwrap();
+    d.get_mut(f).unwrap().fills.clear();
+    rect(&mut d, f, "R", 4.0, 4.0, 16.0, 8.0, "FF0000");
+    let out = export(&d, &[f], Compat::BestEffort);
+    let want = "<?xml version=\"1.0\" encoding=\"utf-8\"?>
+<vector
+    xmlns:android=\"http://schemas.android.com/apk/res/android\"
+    android:width=\"24dp\"
+    android:height=\"24dp\"
+    android:viewportWidth=\"24\"
+    android:viewportHeight=\"24\">
+  <group>
+    <clip-path android:pathData=\"M0,0 L24,0 L24,24 L0,24 Z\" />
+    <path
+        android:pathData=\"M4,4 L20,4 L20,12 L4,12 Z\"
+        android:fillColor=\"#FF0000\" />
+  </group>
+</vector>
+";
+    assert_eq!(out.xml, want);
+}
+
+#[test]
+fn an_empty_area_is_still_a_drawable_android_loads() {
+    let (mut d, p) = doc();
+    let r = rect(&mut d, p, "R", 0.0, 0.0, 10.0, 10.0, "FF0000");
+    d.get_mut(r).unwrap().fills.clear();
+    let opts = VdOptions { bounds: Some(figcraft_geom::Rect::new(0.0, 0.0, 10.0, 10.0)), ..Default::default() };
+    let out = export_with(&d, &[r], opts);
+    // Android throws "no path defined" for a <vector> without a <path>.
+    assert!(out.xml.ends_with("android:viewportHeight=\"10\">\n  <path android:pathData=\"M0,0\" />\n</vector>\n"), "{}", out.xml);
+}
diff --git a/crates/vectordrawable/src/text.rs b/crates/vectordrawable/src/text.rs
new file mode 100644
index 00000000..acc1f483
--- /dev/null
+++ b/crates/vectordrawable/src/text.rs
@@ -0,0 +1,30 @@
+//! Text layers as glyph outlines, one path per styled run.
+
+use figcraft_color::Paint;
+use figcraft_doc::{Node, NodeKind};
+use figcraft_geom::{Affine, BezPath};
+
+/// Text layer `n`'s glyph and decoration outlines grouped by style, in layer space, each with the
+/// fills it paints in (its own, else the layer's). `None` for other layers and text that doesn't
+/// lay out.
+pub(crate) fn runs(n: &Node) -> Option<Vec<(BezPath, Vec<Paint>)>> {
+    let NodeKind::Text(_) = &n.kind else { return None };
+    let (layout, dy) = figcraft_text::layout_node(n)?;
+    let mut by_style: std::collections::BTreeMap<usize, BezPath> = std::collections::BTreeMap::new();
+    for g in &layout.glyphs {
+        by_style.entry(g.style).or_default().extend(g.path().elements().iter().copied());
+    }
+    for d in &layout.decorations {
+        by_style.entry(d.style).or_default().extend(d.path().elements().iter().copied());
+    }
+    Some(
+        by_style
+            .into_iter()
+            .map(|(k, mut path)| {
+                path.apply_affine(Affine::translate((0.0, dy)));
+                let fills = layout.styles.get(k).and_then(|s| s.fills.clone()).unwrap_or_else(|| n.fills.clone());
+                (path, fills)
+            })
+            .collect(),
+    )
+}
diff --git a/crates/vectordrawable/src/walk.rs b/crates/vectordrawable/src/walk.rs
new file mode 100644
index 00000000..f085d340
--- /dev/null
+++ b/crates/vectordrawable/src/walk.rs
@@ -0,0 +1,406 @@
+//! The layer walk: what each layer paints, bottom to top, as paths and groups in viewport space.
+//!
+//! The order follows the renderer: a layer's fills, its children (clipped by a clipping frame,
+//! masked runs clipped by their mask), then its strokes. A layer's opacity is folded into the
+//! colours of what it paints; that is exact unless two of those shapes overlap (a Vector Drawable
+//! group has no opacity of its own), which [`Compat`] decides.
+
+use figcraft_color::{BlendMode, Paint, PaintKind};
+use figcraft_doc::{Document, EffectKind, MaskType, Node, NodeId, NodeKind};
+use figcraft_geom::{Affine, BezPath, Rect, Shape};
+use figcraft_render::{FillRule, MAX_EXPORT_DEPTH};
+
+use crate::model::{Fill, GroupItem, GroupXf, Item, ItemKind, NativeStroke, PathItem};
+use crate::paint::{GradOut, gradient, nonzero};
+use crate::warnings::{Warn, Warnings};
+use crate::{Compat, VdOptions, stroke, text};
+
+/// The largest coordinate written: past it a 32-bit float (what Android parses path data into)
+/// can't place points to a fraction of a dp.
+const MAX_COORD: f64 = 1e7;
+
+pub(crate) struct Walker<'a> {
+    doc: &'a Document,
+    opts: &'a VdOptions,
+    warn: Warnings,
+    names: std::collections::BTreeSet<String>,
+}
+
+/// Every coordinate of `p` finite and within [`MAX_COORD`].
+fn writable(p: &BezPath) -> bool {
+    use figcraft_geom::kurbo::PathEl::*;
+    let ok = |q: figcraft_geom::Point| q.x.is_finite() && q.y.is_finite() && q.x.abs() <= MAX_COORD && q.y.abs() <= MAX_COORD;
+    p.elements().iter().all(|el| match *el {
+        MoveTo(a) | LineTo(a) => ok(a),
+        QuadTo(a, b) => ok(a) && ok(b),
+        CurveTo(a, b, c) => ok(a) && ok(b) && ok(c),
+        ClosePath => true,
+    })
+}
+
+fn baked(p: &BezPath, xf: Affine) -> BezPath {
+    let mut out = p.clone();
+    out.apply_affine(xf);
+    out
+}
+
+fn union(items: &[Item]) -> Option<Rect> {
+    items.iter().map(|i| i.bbox).reduce(|a, b| a.union(b))
+}
+
+fn normal(b: BlendMode) -> bool {
+    matches!(b, BlendMode::Normal | BlendMode::PassThrough)
+}
+
+impl<'a> Walker<'a> {
+    pub fn new(doc: &'a Document, opts: &'a VdOptions) -> Self {
+        Self { doc, opts, warn: Warnings::default(), names: Default::default() }
+    }
+
+    /// Reports that the export drew nothing at all (named after `layer`).
+    pub fn nothing_drawn(&mut self, layer: &str) {
+        if self.opts.compat != Compat::Ignore {
+            self.warn.add(Warn::NothingDrawn, layer);
+        }
+    }
+
+    pub fn finish(self) -> Vec<String> {
+        self.warn.finish()
+    }
+
+    fn note(&mut self, w: Warn, n: &Node) {
+        if self.opts.compat != Compat::Ignore {
+            self.warn.add(w, &n.name);
+        }
+    }
+
+    /// `name` as an `android:name` not used yet in this file (repeats get `_2`, `_3`…).
+    fn unique(&mut self, name: &str) -> String {
+        let base: String = name.chars().take(200).collect();
+        let base = if base.trim().is_empty() { "layer".to_string() } else { base };
+        // Bounded: a set of n names leaves one of the first n + 1 candidates free.
+        let tries = self.names.len().saturating_add(1);
+        let name = (1..=tries)
+            .map(|k| if k == 1 { base.clone() } else { format!("{base}_{k}") })
+            .find(|n| !self.names.contains(n))
+            .unwrap_or_else(|| format!("{base}_{}", tries.saturating_add(1)));
+        self.names.insert(name.clone());
+        name
+    }
+
+    /// What layer `id` paints, drawn through `xf` (its parent's space → viewport).
+    pub fn node(&mut self, id: NodeId, xf: Affine, depth: usize) -> Vec<Item> {
+        let doc = self.doc;
+        let Some(n) = doc.node(id) else { return Vec::new() };
+        if depth > MAX_EXPORT_DEPTH || !n.visible || n.is_mask {
+            return Vec::new();
+        }
+        let op = n.opacity;
+        if !(op.is_finite() && op > 0.0) {
+            return Vec::new();
+        }
+        let xf = xf * n.transform;
+        self.effects(n);
+        if !normal(n.blend) {
+            self.note(Warn::Blend, n);
+        }
+        let mut items = Vec::new();
+        if matches!(n.kind, NodeKind::Text(_)) {
+            self.text(n, xf, &mut items);
+        } else {
+            self.shape(n, xf, depth, &mut items);
+        }
+        if op < 1.0 {
+            if Item::overlap(&items) {
+                match self.opts.compat {
+                    Compat::BestEffort => {
+                        self.note(Warn::OpacityApprox, n);
+                        Item::scale_alpha(&mut items, op);
+                    }
+                    Compat::Exact => {
+                        self.note(Warn::OpacityOmitted, n);
+                        return Vec::new();
+                    }
+                    Compat::Ignore => {}
+                }
+            } else {
+                Item::scale_alpha(&mut items, op);
+            }
+        }
+        if self.opts.include_names && !items.is_empty() {
+            let container = !matches!(n.kind, NodeKind::BooleanOp { .. }) && !n.children.is_empty();
+            if container {
+                let bbox = union(&items).unwrap_or(Rect::ZERO);
+                let name = Some(self.unique(&n.name));
+                items = vec![Item { kind: ItemKind::Group(GroupItem { name, xf: None, clip: None, children: items }), bbox }];
+            } else {
+                for it in &mut items {
+                    let name = Some(self.unique(&n.name));
+                    match &mut it.kind {
+                        ItemKind::Path(p) => p.name = name,
+                        ItemKind::Group(g) => g.name = name,
+                    }
+                }
+            }
+        }
+        items
+    }
+
+    /// Effects have no Vector Drawable equivalent: each kind is noted.
+    fn effects(&mut self, n: &Node) {
+        for e in n.effects.iter().filter(|e| e.visible) {
+            let w = match e.kind {
+                EffectKind::DropShadow(_) => Warn::DropShadow,
+                EffectKind::InnerShadow(_) => Warn::InnerShadow,
+                EffectKind::LayerBlur(_) => Warn::LayerBlur,
+                EffectKind::BackgroundBlur(_) => Warn::BackgroundBlur,
+                EffectKind::Noise(_) => Warn::Noise,
+                EffectKind::Texture(_) => Warn::Texture,
+                EffectKind::Glass(_) => Warn::Glass,
+            };
+            self.note(w, n);
+        }
+    }
+
+    fn text(&mut self, n: &Node, xf: Affine, items: &mut Vec<Item>) {
+        let Some(runs) = text::runs(n) else { return };
+        for (path, fills) in &runs {
+            for p in fills {
+                self.fill(n, p, path, false, xf, items);
+            }
+        }
+        if n.has_visible_stroke() {
+            // Glyph outlines are closed: inside and outside strokes follow them, as on the canvas.
+            let even = stroke::outline_even_odd(n, true);
+            for (path, _) in &runs {
+                let area = figcraft_render::draw::stroke_area(n, path, true);
+                for p in &n.strokes {
+                    self.fill(n, p, &area, even, xf, items);
+                }
+            }
+        }
+    }
+
+    fn shape(&mut self, n: &Node, xf: Affine, depth: usize, items: &mut Vec<Item>) {
+        let doc = self.doc;
+        let outline = match n.kind {
+            NodeKind::Group | NodeKind::Page { .. } => None,
+            _ => figcraft_render::node_outline(doc, n),
+        };
+        let boolean = matches!(n.kind, NodeKind::BooleanOp { .. });
+        let closed = figcraft_doc::geometry::is_closed(n) || boolean;
+        if closed && let Some((path, rule)) = &outline {
+            for p in &n.fills {
+                self.fill(n, p, path, *rule == FillRule::EvenOdd, xf, items);
+            }
+        }
+        if !boolean && !n.children.is_empty() && !n.hides_contents() {
+            let kids = self.children(n, xf, depth);
+            let clips = n.clip && n.kind.is_frame_like();
+            match &outline {
+                Some((path, rule)) if clips => {
+                    if let Some(g) = self.clipped(n, &baked(path, xf), *rule == FillRule::EvenOdd, kids) {
+                        items.push(g);
+                    }
+                }
+                _ => items.extend(kids),
+            }
+        }
+        if n.has_visible_stroke() {
+            self.strokes(n, outline.as_ref().map(|(p, _)| p), closed, xf, items);
+        }
+    }
+
+    /// `n`'s children, bottom to top; a visible mask clips the layers above it (up to the next
+    /// mask) to its outline.
+    fn children(&mut self, n: &Node, xf: Affine, depth: usize) -> Vec<Item> {
+        let doc = self.doc;
+        let mut out = Vec::new();
+        for run in doc.paint_runs(n) {
+            let Some(&first) = n.children.get(run.start) else { continue };
+            let Some(m) = doc.node(first).filter(|m| m.is_mask && m.visible) else {
+                out.extend(self.node(first, xf, depth + 1));
+                continue;
+            };
+            if m.mask_type != MaskType::Vector {
+                match self.opts.compat {
+                    Compat::BestEffort => self.note(Warn::MaskApprox, m),
+                    Compat::Exact => {
+                        self.note(Warn::MaskOmitted, m);
+                        continue;
+                    }
+                    Compat::Ignore => {}
+                }
+            }
+            let mut kids = Vec::new();
+            for k in n.children.get(run.start + 1..run.end).unwrap_or(&[]) {
+                kids.extend(self.node(*k, xf, depth + 1));
+            }
+            // A mask without an outline shows nothing of what it masks.
+            let Some((outline, rule)) = figcraft_render::subtree_outline(doc, m, depth + 1) else { continue };
+            if let Some(g) = self.clipped(m, &baked(&outline, xf * m.transform), rule == FillRule::EvenOdd, kids) {
+                out.push(g);
+            }
+        }
+        out
+    }
+
+    /// `kids` in a group clipped to `clip` (viewport space). A `<clip-path>` has no fill rule:
+    /// an even-odd outline is rewritten as non-zero first.
+    fn clipped(&mut self, n: &Node, clip: &BezPath, even: bool, kids: Vec<Item>) -> Option<Item> {
+        if kids.is_empty() {
+            return None;
+        }
+        if !writable(clip) {
+            self.note(Warn::TooLarge, n);
+            return None;
+        }
+        let clip = if even && self.opts.compat != Compat::Ignore {
+            match nonzero(clip) {
+                Some(p) => {
+                    // Exact either way, but bestEffort reports the rewrite as it does for fills.
+                    if self.opts.compat == Compat::BestEffort {
+                        self.note(Warn::ClipEvenOddRewritten, n);
+                    }
+                    p
+                }
+                None if self.opts.compat == Compat::Exact => {
+                    self.note(Warn::ClipEvenOddOmitted, n);
+                    return None;
+                }
+                None => {
+                    self.note(Warn::ClipEvenOddApprox, n);
+                    clip.clone()
+                }
+            }
+        } else {
+            clip.clone()
+        };
+        if clip.elements().is_empty() {
+            return None;
+        }
+        let bbox = union(&kids)?.intersect(clip.bounding_box());
+        Some(Item { kind: ItemKind::Group(GroupItem { name: None, xf: None, clip: Some(clip), children: kids }), bbox })
+    }
+
+    fn strokes(&mut self, n: &Node, outline: Option<&BezPath>, closed: bool, xf: Affine, items: &mut Vec<Item>) {
+        let native = stroke::native(n, xf);
+        let mut area: Option<(BezPath, bool)> = None;
+        for p in &n.strokes {
+            if !p.visible || p.opacity <= 0.0 {
+                continue;
+            }
+            if let (Some(nat), PaintKind::Solid { color }) = (&native, &p.kind) {
+                if !normal(p.blend) {
+                    self.note(Warn::Blend, n);
+                }
+                let color = color.with_alpha(color.a * p.opacity.clamp(0.0, 1.0));
+                let data = baked(&nat.path, xf);
+                if color.a <= 0.0 || data.elements().is_empty() {
+                    continue;
+                }
+                if !writable(&data) {
+                    self.note(Warn::TooLarge, n);
+                    continue;
+                }
+                // Room for caps and mitred corners around the line.
+                let reach = nat.width / 2.0 * nat.miter.max(std::f64::consts::SQRT_2);
+                let bbox = data.bounding_box().inflate(reach, reach);
+                let stroke = NativeStroke { color, width: nat.width, cap: nat.cap, join: nat.join, miter: nat.miter };
+                let path = PathItem { name: None, data, fill: None, stroke: Some(stroke), even_odd: false };
+                items.push(Item { kind: ItemKind::Path(path), bbox });
+                continue;
+            }
+            if area.is_none() {
+                let geom = match &n.kind {
+                    NodeKind::BooleanOp { .. } => outline.cloned(),
+                    _ => figcraft_doc::geometry::stroke_geometry(n),
+                };
+                let Some(g) = geom else { return };
+                area = Some(((*figcraft_render::draw::stroke_area(n, &g, closed)).clone(), stroke::outline_even_odd(n, closed)));
+            }
+            if let Some((a, even)) = &area {
+                self.fill(n, p, a, *even, xf, items);
+            }
+        }
+    }
+
+    /// Paint `p` filling `path` (layer space, even-odd when `even`) of layer `n`.
+    fn fill(&mut self, n: &Node, p: &Paint, path: &BezPath, even: bool, xf: Affine, items: &mut Vec<Item>) {
+        if !p.visible || p.opacity <= 0.0 || path.elements().is_empty() {
+            return;
+        }
+        let opacity = p.opacity.clamp(0.0, 1.0);
+        let fill = match &p.kind {
+            PaintKind::Solid { color } => {
+                let c = color.with_alpha(color.a * opacity);
+                if c.a <= 0.0 {
+                    return;
+                }
+                Some(Fill::Solid(c))
+            }
+            PaintKind::Gradient(_) => None,
+            PaintKind::Image(_) => {
+                self.note(Warn::ImageFill, n);
+                return;
+            }
+            PaintKind::Pattern(_) => {
+                self.note(Warn::PatternFill, n);
+                return;
+            }
+        };
+        let mut grad = None;
+        if let PaintKind::Gradient(g) = &p.kind {
+            let diamond = g.kind == figcraft_color::GradientKind::Diamond;
+            if diamond {
+                match self.opts.compat {
+                    Compat::BestEffort => self.note(Warn::DiamondApprox, n),
+                    Compat::Exact => {
+                        self.note(Warn::DiamondOmitted, n);
+                        return;
+                    }
+                    Compat::Ignore => return,
+                }
+            }
+            grad = Some(gradient(g, opacity, xf, n.width, n.height, diamond));
+        }
+        if !normal(p.blend) {
+            self.note(Warn::Blend, n);
+        }
+        let data = baked(path, xf);
+        if !writable(&data) {
+            self.note(Warn::TooLarge, n);
+            return;
+        }
+        let (data, even_odd) = if even && self.opts.compat == Compat::BestEffort {
+            match nonzero(&data) {
+                Some(nz) => {
+                    self.note(Warn::EvenOddRewritten, n);
+                    (nz, false)
+                }
+                None => {
+                    self.note(Warn::EvenOddKept, n);
+                    (data, true)
+                }
+            }
+        } else {
+            (data, even)
+        };
+        if data.elements().is_empty() {
+            return;
+        }
+        let bbox = data.bounding_box();
+        let path_item = |data: BezPath, fill: Fill| PathItem { name: None, data, fill: Some(fill), stroke: None, even_odd };
+        match (fill, grad) {
+            (Some(f), _) => items.push(Item { kind: ItemKind::Path(path_item(data, f)), bbox }),
+            (None, Some(GradOut::Solid(c))) => items.push(Item { kind: ItemKind::Path(path_item(data, Fill::Solid(c))), bbox }),
+            (None, Some(GradOut::Plain(g))) => items.push(Item { kind: ItemKind::Path(path_item(data, Fill::Gradient(g))), bbox }),
+            (None, Some(GradOut::Grouped { xf: gxf, inverse, grad: g })) => {
+                let inner = Item { kind: ItemKind::Path(path_item(baked(&data, inverse), Fill::Gradient(g))), bbox };
+                let group: GroupXf = gxf;
+                items.push(Item { kind: ItemKind::Group(GroupItem { name: None, xf: Some(group), clip: None, children: vec![inner] }), bbox });
+            }
+            (None, Some(GradOut::Nothing) | None) => {}
+        }
+    }
+}
diff --git a/crates/vectordrawable/src/warnings.rs b/crates/vectordrawable/src/warnings.rs
new file mode 100644
index 00000000..445198d5
--- /dev/null
+++ b/crates/vectordrawable/src/warnings.rs
@@ -0,0 +1,89 @@
+//! What the export changed or left out: one entry per kind, naming the first few layers.
+
+/// The kinds of change, in the order they're reported.
+#[derive(Clone, Copy, Debug, PartialEq, Eq, PartialOrd, Ord)]
+pub(crate) enum Warn {
+    DropShadow,
+    InnerShadow,
+    LayerBlur,
+    BackgroundBlur,
+    Noise,
+    Texture,
+    Glass,
+    Blend,
+    ImageFill,
+    PatternFill,
+    DiamondApprox,
+    DiamondOmitted,
+    OpacityApprox,
+    OpacityOmitted,
+    EvenOddRewritten,
+    EvenOddKept,
+    ClipEvenOddRewritten,
+    ClipEvenOddApprox,
+    ClipEvenOddOmitted,
+    MaskApprox,
+    MaskOmitted,
+    TooLarge,
+    NothingDrawn,
+}
+
+impl Warn {
+    fn message(self) -> &'static str {
+        match self {
+            Warn::DropShadow => "drop shadows were left out",
+            Warn::InnerShadow => "inner shadows were left out",
+            Warn::LayerBlur => "layer blurs were left out",
+            Warn::BackgroundBlur => "background blurs were left out",
+            Warn::Noise => "noise effects were left out",
+            Warn::Texture => "texture effects were left out",
+            Warn::Glass => "glass effects were left out",
+            Warn::Blend => "blend modes were drawn as normal",
+            Warn::ImageFill => "image fills were left out",
+            Warn::PatternFill => "pattern fills were left out",
+            Warn::DiamondApprox => "diamond gradients were drawn as radial gradients",
+            Warn::DiamondOmitted => "diamond gradients were left out (exact mode)",
+            Warn::OpacityApprox => "layer opacity was applied to each shape: where shapes overlap they look denser",
+            Warn::OpacityOmitted => "layers with opacity over overlapping shapes were left out (exact mode)",
+            Warn::EvenOddRewritten => "even-odd fills were rewritten as non-zero",
+            Warn::EvenOddKept => "even-odd fills couldn't be rewritten and use fillType=\"evenOdd\" (API 24+ or AndroidX)",
+            Warn::ClipEvenOddRewritten => "even-odd clip outlines were rewritten as non-zero",
+            Warn::ClipEvenOddApprox => "even-odd clip outlines couldn't be rewritten and clip as non-zero",
+            Warn::ClipEvenOddOmitted => "layers under even-odd clip outlines that couldn't be rewritten were left out (exact mode)",
+            Warn::MaskApprox => "alpha and luminance masks clip to the mask's outline",
+            Warn::MaskOmitted => "layers under alpha or luminance masks were left out (exact mode)",
+            Warn::TooLarge => "shapes with coordinates beyond ±10,000,000 were left out",
+            Warn::NothingDrawn => "nothing in it could be drawn: the drawable is empty",
+        }
+    }
+}
+
+/// Layers named per warning.
+const NAMED: usize = 3;
+
+#[derive(Default)]
+pub(crate) struct Warnings {
+    seen: std::collections::BTreeMap<Warn, Vec<String>>,
+}
+
+impl Warnings {
+    pub fn add(&mut self, w: Warn, layer: &str) {
+        let names = self.seen.entry(w).or_default();
+        if !names.iter().any(|n| n == layer) {
+            names.push(layer.to_string());
+        }
+    }
+
+    pub fn finish(self) -> Vec<String> {
+        self.seen
+            .into_iter()
+            .map(|(w, names)| {
+                let shown: Vec<String> =
+                    names.iter().take(NAMED).map(|n| if n.is_empty() { "unnamed layer".to_string() } else { n.clone() }).collect();
+                let more = names.len().saturating_sub(NAMED);
+                let more = if more > 0 { format!(", {more} more") } else { String::new() };
+                format!("{} ({}{more})", w.message(), shown.join(", "))
+            })
+            .collect()
+    }
+}
diff --git a/crates/vectordrawable/src/xml.rs b/crates/vectordrawable/src/xml.rs
new file mode 100644
index 00000000..48d7dee2
--- /dev/null
+++ b/crates/vectordrawable/src/xml.rs
@@ -0,0 +1,243 @@
+//! The pretty-printed XML: elements two spaces deeper per level, one attribute per line four
+//! spaces past its element (as Android Studio formats drawables). Numbers are compact (at most
+//! three decimals, no `-0`) and always finite; text is escaped for attribute values.
+
+use std::fmt::Write as _;
+
+use figcraft_color::Color;
+use figcraft_geom::BezPath;
+use figcraft_geom::kurbo::PathEl;
+
+use crate::model::{Fill, GradKind, GroupItem, Item, ItemKind, NativeStroke, PathItem};
+
+const ANDROID: &str = "http://schemas.android.com/apk/res/android";
+const AAPT: &str = "http://schemas.android.com/aapt";
+
+/// A number as Android reads it: rounded to 3 decimals, no trailing zeros, `0` for anything
+/// non-finite (the walk leaves out shapes whose numbers aren't finite).
+pub(crate) fn num(v: f64) -> String {
+    if !v.is_finite() {
+        return "0".into();
+    }
+    let r = (v * 1000.0).round() / 1000.0;
+    let s = format!("{r}");
+    if s == "-0" { "0".into() } else { s }
+}
+
+/// `s` for an attribute value: markup escaped, whitespace that parsers would fold kept as
+/// character references, and characters XML 1.0 forbids dropped.
+pub(crate) fn esc(s: &str) -> String {
+    let mut out = String::with_capacity(s.len());
+    for c in s.chars() {
+        match c {
+            '&' => out.push_str("&amp;"),
+            '<' => out.push_str("&lt;"),
+            '>' => out.push_str("&gt;"),
+            '"' => out.push_str("&quot;"),
+            '\'' => out.push_str("&apos;"),
+            '\t' => out.push_str("&#9;"),
+            '\n' => out.push_str("&#10;"),
+            '\r' => out.push_str("&#13;"),
+            c if (c as u32) < 0x20 || c == '\u{FFFE}' || c == '\u{FFFF}' => {}
+            c => out.push(c),
+        }
+    }
+    out
+}
+
+/// `#RRGGBB`, or `#AARRGGBB` when not opaque.
+pub(crate) fn color(c: Color) -> String {
+    let [r, g, b, a] = c.sanitized().to_rgba8();
+    if a == 255 { format!("#{r:02X}{g:02X}{b:02X}") } else { format!("#{a:02X}{r:02X}{g:02X}{b:02X}") }
+}
+
+/// SVG path syntax, absolute commands.
+pub(crate) fn path_data(p: &BezPath) -> String {
+    let mut s = String::new();
+    let pt = |x: f64, y: f64| format!("{},{}", num(x), num(y));
+    for el in p.elements() {
+        if !s.is_empty() {
+            s.push(' ');
+        }
+        match *el {
+            PathEl::MoveTo(a) => {
+                let _ = write!(s, "M{}", pt(a.x, a.y));
+            }
+            PathEl::LineTo(a) => {
+                let _ = write!(s, "L{}", pt(a.x, a.y));
+            }
+            PathEl::QuadTo(a, b) => {
+                let _ = write!(s, "Q{} {}", pt(a.x, a.y), pt(b.x, b.y));
+            }
+            PathEl::CurveTo(a, b, c) => {
+                let _ = write!(s, "C{} {} {}", pt(a.x, a.y), pt(b.x, b.y), pt(c.x, c.y));
+            }
+            PathEl::ClosePath => s.push('Z'),
+        }
+    }
+    s
+}
+
+struct Out {
+    s: String,
+}
+
+impl Out {
+    /// `<tag` and its attributes, one per line; `close` ends it with `/>`, else `>`.
+    fn open(&mut self, depth: usize, tag: &str, attrs: &[(&str, String)], close: bool) {
+        let pad = "  ".repeat(depth);
+        let _ = write!(self.s, "{pad}<{tag}");
+        for (i, (k, v)) in attrs.iter().enumerate() {
+            if i == 0 && attrs.len() == 1 {
+                let _ = write!(self.s, " {k}=\"{v}\"");
+            } else {
+                let _ = write!(self.s, "\n{pad}    {k}=\"{v}\"");
+            }
+        }
+        self.s.push_str(if close { " />\n" } else { ">\n" });
+    }
+
+    fn close(&mut self, depth: usize, tag: &str) {
+        let _ = writeln!(self.s, "{}</{tag}>", "  ".repeat(depth));
+    }
+}
+
+fn uses_gradient(items: &[Item]) -> bool {
+    items.iter().any(|it| match &it.kind {
+        ItemKind::Path(p) => matches!(p.fill, Some(Fill::Gradient(_))),
+        ItemKind::Group(g) => uses_gradient(&g.children),
+    })
+}
+
+/// The whole file: a `width`×`height` dp drawable with a viewport of the same size.
+pub(crate) fn document(width: f64, height: f64, items: &[Item]) -> String {
+    let mut o = Out { s: String::from("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n") };
+    let mut attrs = vec![("xmlns:android", ANDROID.to_string())];
+    if uses_gradient(items) {
+        attrs.push(("xmlns:aapt", AAPT.to_string()));
+    }
+    attrs.extend([
+        ("android:width", format!("{}dp", num(width))),
+        ("android:height", format!("{}dp", num(height))),
+        ("android:viewportWidth", num(width)),
+        ("android:viewportHeight", num(height)),
+    ]);
+    o.open(0, "vector", &attrs, false);
+    if items.is_empty() {
+        // Android refuses a <vector> without a <path> ("no path defined"): one empty, unfilled path.
+        o.open(1, "path", &[("android:pathData", "M0,0".to_string())], true);
+    }
+    for it in items {
+        item(&mut o, 1, it);
+    }
+    o.close(0, "vector");
+    o.s
+}
+
+fn item(o: &mut Out, depth: usize, it: &Item) {
+    match &it.kind {
+        ItemKind::Path(p) => path(o, depth, p),
+        ItemKind::Group(g) => group(o, depth, g),
+    }
+}
+
+fn group(o: &mut Out, depth: usize, g: &GroupItem) {
+    let mut attrs = Vec::new();
+    if let Some(n) = &g.name {
+        attrs.push(("android:name", esc(n)));
+    }
+    if let Some(x) = &g.xf {
+        let (sx, sy) = x.scale;
+        if num(x.rotation) != "0" {
+            attrs.push(("android:rotation", num(x.rotation)));
+        }
+        if num(sx) != "1" {
+            attrs.push(("android:scaleX", num(sx)));
+        }
+        if num(sy) != "1" {
+            attrs.push(("android:scaleY", num(sy)));
+        }
+        if num(x.translate.0) != "0" {
+            attrs.push(("android:translateX", num(x.translate.0)));
+        }
+        if num(x.translate.1) != "0" {
+            attrs.push(("android:translateY", num(x.translate.1)));
+        }
+    }
+    if g.children.is_empty() && g.clip.is_none() {
+        o.open(depth, "group", &attrs, true);
+        return;
+    }
+    o.open(depth, "group", &attrs, false);
+    if let Some(c) = &g.clip {
+        o.open(depth + 1, "clip-path", &[("android:pathData", path_data(c))], true);
+    }
+    for c in &g.children {
+        item(o, depth + 1, c);
+    }
+    o.close(depth, "group");
+}
+
+fn stroke_attrs(attrs: &mut Vec<(&str, String)>, s: &NativeStroke) {
+    attrs.push(("android:strokeColor", color(s.color)));
+    attrs.push(("android:strokeWidth", num(s.width)));
+    if s.cap != "butt" {
+        attrs.push(("android:strokeLineCap", s.cap.to_string()));
+    }
+    if s.join != "miter" {
+        attrs.push(("android:strokeLineJoin", s.join.to_string()));
+    } else if num(s.miter) != "4" {
+        attrs.push(("android:strokeMiterLimit", num(s.miter)));
+    }
+}
+
+fn path(o: &mut Out, depth: usize, p: &PathItem) {
+    let mut attrs = Vec::new();
+    if let Some(n) = &p.name {
+        attrs.push(("android:name", esc(n)));
+    }
+    attrs.push(("android:pathData", path_data(&p.data)));
+    if let Some(Fill::Solid(c)) = &p.fill {
+        attrs.push(("android:fillColor", color(*c)));
+    }
+    if let Some(s) = &p.stroke {
+        stroke_attrs(&mut attrs, s);
+    }
+    if p.even_odd && p.fill.is_some() {
+        attrs.push(("android:fillType", "evenOdd".to_string()));
+    }
+    let Some(Fill::Gradient(g)) = &p.fill else {
+        o.open(depth, "path", &attrs, true);
+        return;
+    };
+    o.open(depth, "path", &attrs, false);
+    o.open(depth + 1, "aapt:attr", &[("name", "android:fillColor".to_string())], false);
+    let mut ga = Vec::new();
+    match g.kind {
+        GradKind::Linear { start, end } => {
+            ga.push(("android:type", "linear".to_string()));
+            ga.push(("android:startX", num(start.0)));
+            ga.push(("android:startY", num(start.1)));
+            ga.push(("android:endX", num(end.0)));
+            ga.push(("android:endY", num(end.1)));
+        }
+        GradKind::Radial { center, radius } => {
+            ga.push(("android:type", "radial".to_string()));
+            ga.push(("android:centerX", num(center.0)));
+            ga.push(("android:centerY", num(center.1)));
+            ga.push(("android:gradientRadius", num(radius)));
+        }
+        GradKind::Sweep { center } => {
+            ga.push(("android:type", "sweep".to_string()));
+            ga.push(("android:centerX", num(center.0)));
+            ga.push(("android:centerY", num(center.1)));
+        }
+    }
+    o.open(depth + 2, "gradient", &ga, false);
+    for (off, c) in &g.stops {
+        o.open(depth + 3, "item", &[("android:offset", num(*off)), ("android:color", color(*c))], true);
+    }
+    o.close(depth + 2, "gradient");
+    o.close(depth + 1, "aapt:attr");
+    o.close(depth, "path");
+}
diff --git a/xtask/src/layers.rs b/xtask/src/layers.rs
index 612c31ed..61d60edd 100644
--- a/xtask/src/layers.rs
+++ b/xtask/src/layers.rs
@@ -18,6 +18,7 @@ const TABLE: &[(&str, u8)] = &[
     ("format", 3),
     ("svg", 4),
     ("pdf", 4),
+    ("vectordrawable", 4),
     ("engine", 5),
     ("ui-egui", 6),
     ("mcp", 6),

From eae95468782bdf702c84e75650c60860047e1711 Mon Sep 17 00:00:00 2001
From: Filip Strajnar <filip.strajnar@proton.me>
Date: Sun, 18 Oct 2026 19:47:39 +0200
Subject: [PATCH 06/59] M6: export as Android Vector Drawable (XML)

ExportFormat::VectorDrawable ("XML", .xml) and ExportSetting.vd_compat
(bestEffort / exact / ignore, stored only when not the default) wire the
figcraft-vectordrawable writer into file.export, file.exportLayers and
export.add/update: a vdCompat param (junk refused), svgIdAttribute writes
android:name, and the results carry the writer's warnings (per file for
export layers). The Export section lists XML with an "Android Vector
Drawable" tooltip and its id attribute and compatibility options, File >
Export... gets an XML preset, and the toasts say when content was changed
or left out. CLI: --format xml / .xml outputs, --vd-compat, warnings as
note: lines. MCP: format xml returns the XML as text plus its warnings.
A .fig export writes XML settings as SVG with a note.

Docs: file-format-parity (row and revision), ui-parity and roadmap
revisions, architecture (the crate), cli and mcp.
---
 Cargo.lock                                    |   1 +
 apps/figcraft-cli/src/args.rs                 |   9 ++
 apps/figcraft-cli/src/files.rs                |  17 ++-
 apps/figcraft-cli/src/main.rs                 |  17 ++-
 apps/figcraft-cli/tests/vector_drawable.rs    |  42 +++++++
 crates/doc/src/props.rs                       |  52 ++++++++-
 crates/engine/Cargo.toml                      |   1 +
 crates/engine/src/cmd/edit.rs                 |   4 +-
 crates/engine/src/cmd/file.rs                 |  75 +++++++++---
 crates/engine/src/lib.rs                      |   2 +
 .../src/vector_drawable_export_tests.rs       | 108 ++++++++++++++++++
 crates/format/src/fig/export.rs               |   6 +-
 crates/format/src/fig/export_tests.rs         |  13 +++
 crates/mcp/src/tools.rs                       |  30 +++--
 crates/mcp/tests/export_xml.rs                |  30 +++++
 crates/render/src/lib.rs                      |   4 +-
 crates/ui-egui/locales/en.toml                |   7 ++
 crates/ui-egui/locales/es.toml                |   7 ++
 crates/ui-egui/src/dialogs.rs                 |  11 +-
 crates/ui-egui/src/export_panel.rs            |  65 +++++++++--
 crates/ui-egui/src/export_preview_tests.rs    |  60 +++++++++-
 docs/architecture.md                          |   4 +-
 docs/cli.md                                   |  10 +-
 docs/file-format-parity.md                    |   4 +-
 docs/mcp.md                                   |   2 +-
 docs/roadmap.md                               |   3 +-
 docs/ui-parity.md                             |   3 +-
 27 files changed, 527 insertions(+), 60 deletions(-)
 create mode 100644 apps/figcraft-cli/tests/vector_drawable.rs
 create mode 100644 crates/engine/src/vector_drawable_export_tests.rs
 create mode 100644 crates/mcp/tests/export_xml.rs

diff --git a/Cargo.lock b/Cargo.lock
index 523c5f9f..b35ce591 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1529,6 +1529,7 @@ dependencies = [
  "figcraft-render",
  "figcraft-svg",
  "figcraft-text",
+ "figcraft-vectordrawable",
  "image",
  "log",
  "regex",
diff --git a/apps/figcraft-cli/src/args.rs b/apps/figcraft-cli/src/args.rs
index 4c162dbb..344b4822 100644
--- a/apps/figcraft-cli/src/args.rs
+++ b/apps/figcraft-cli/src/args.rs
@@ -77,6 +77,15 @@ impl Args {
         Ok(figcraft_doc::PrintSettings { bleed, crop_marks: self.flag("crop-marks"), bleed_marks: self.flag("bleed-marks"), cmyk: self.flag("cmyk") })
     }
 
+    /// `--vd-compat bestEffort|exact|ignore` (Android Vector Drawable exports; default bestEffort).
+    pub fn vd_compat(&self) -> CliResult<figcraft_doc::VdCompat> {
+        match self.value("vd-compat") {
+            None => Ok(figcraft_doc::VdCompat::default()),
+            Some(s) => figcraft_doc::VdCompat::from_key(&s)
+                .ok_or_else(|| CliError::Usage(format!("--vd-compat takes bestEffort, exact or ignore, got `{s}`"))),
+        }
+    }
+
     pub fn scale(&self) -> CliResult<f64> {
         match self.value("scale") {
             None => Ok(1.0),
diff --git a/apps/figcraft-cli/src/files.rs b/apps/figcraft-cli/src/files.rs
index 65b19ee4..8b6bd21f 100644
--- a/apps/figcraft-cli/src/files.rs
+++ b/apps/figcraft-cli/src/files.rs
@@ -3,7 +3,7 @@
 use std::path::Path;
 use std::process::ExitCode;
 
-use figcraft_doc::{Document, ExportFormat, ExportSetting, NodeId, NodeKind, PrintSettings};
+use figcraft_doc::{Document, ExportFormat, ExportSetting, NodeId, NodeKind, PrintSettings, VdCompat};
 use figcraft_engine::Session;
 use serde_json::{Value, json};
 
@@ -24,7 +24,7 @@ fn ext(path: &str) -> String {
 
 fn image_format(e: &str) -> Option<ExportFormat> {
     match e {
-        "png" | "jpg" | "jpeg" | "svg" | "webp" | "pdf" => ExportFormat::from_ext(e),
+        "png" | "jpg" | "jpeg" | "svg" | "webp" | "pdf" | "xml" => ExportFormat::from_ext(e),
         _ => None,
     }
 }
@@ -210,6 +210,8 @@ pub struct Target {
     pub node: Option<String>,
     /// PDF only.
     pub print: PrintSettings,
+    /// Android Vector Drawable (XML) only.
+    pub vd_compat: VdCompat,
 }
 
 pub fn export(file: &str, out: &str, t: &Target) -> CliResult<ExitCode> {
@@ -224,15 +226,20 @@ pub fn export(file: &str, out: &str, t: &Target) -> CliResult<ExitCode> {
     let (scale, node, print) = (t.scale, t.node.as_deref(), &t.print);
     let fmt = match t.format.as_deref() {
         Some(f) => {
-            image_format(&f.to_ascii_lowercase()).ok_or_else(|| CliError::Usage(format!("unknown --format `{f}` (png|jpg|svg|webp|pdf|fig)")))?
+            image_format(&f.to_ascii_lowercase()).ok_or_else(|| CliError::Usage(format!("unknown --format `{f}` (png|jpg|svg|webp|pdf|xml|fig)")))?
         }
         None => image_format(&ext(out)).unwrap_or(ExportFormat::Png),
     };
     let target = node.map(|q| find_node(&doc, page, q)).transpose()?;
     let single = image_format(&ext(out)).is_some();
     let bytes_of = |ids: &[NodeId]| {
-        let setting = ExportSetting { format: fmt, print: *print, ..Default::default() };
-        figcraft_engine::cmd::file::export_bytes_with(&doc, ids, &setting, scale).map_err(|e| CliError::Failed(e.to_string()))
+        let setting = ExportSetting { format: fmt, print: *print, vd_compat: t.vd_compat, ..Default::default() };
+        let (bytes, warnings) = figcraft_engine::cmd::file::export_file(&doc, ids, &setting, scale).map_err(|e| CliError::Failed(e.to_string()))?;
+        // What an Android Vector Drawable changed or left out, like the .fig notes.
+        for w in warnings {
+            eprintln!("note: {w}");
+        }
+        Ok::<_, CliError>(bytes)
     };
     if single {
         let bytes = match target {
diff --git a/apps/figcraft-cli/src/main.rs b/apps/figcraft-cli/src/main.rs
index 281d79dd..8d9bce75 100644
--- a/apps/figcraft-cli/src/main.rs
+++ b/apps/figcraft-cli/src/main.rs
@@ -17,8 +17,8 @@ pub const USAGE: &str = "figcraft-cli — FigCraft without a window
 
 USAGE:
   figcraft-cli info <file> [--json]
-  figcraft-cli export <file> -o <out> [--format png|jpg|svg|webp|pdf|fig] [--scale N] [--page NAME] [--node ID|NAME]
-                      [--bleed LENGTH] [--crop-marks] [--bleed-marks] [--cmyk]
+  figcraft-cli export <file> -o <out> [--format png|jpg|svg|webp|pdf|xml|fig] [--scale N] [--page NAME] [--node ID|NAME]
+                      [--bleed LENGTH] [--crop-marks] [--bleed-marks] [--cmyk] [--vd-compat bestEffort|exact|ignore]
   figcraft-cli convert <in> <out>
   figcraft-cli render <file> -o <out.png> [--scale N] [--page NAME]
   figcraft-cli run <script.json|script.jsonl> [--in <file>] [--out <file>]
@@ -103,11 +103,18 @@ fn run(argv: &[String]) -> CliResult<ExitCode> {
             files::info(&file, a.flag("json"))
         }
         "export" => {
-            let a = Args::parse(rest, &["format", "scale", "page", "node", "o", "out", "bleed"], &["crop-marks", "bleed-marks", "cmyk"])?;
+            let a =
+                Args::parse(rest, &["format", "scale", "page", "node", "o", "out", "bleed", "vd-compat"], &["crop-marks", "bleed-marks", "cmyk"])?;
             let file = a.one_positional("export <file> -o <out>")?;
             let out = a.value("o").or_else(|| a.value("out")).ok_or_else(|| CliError::Usage("export needs -o <out>".into()))?;
-            let target =
-                files::Target { format: a.value("format"), scale: a.scale()?, page: a.value("page"), node: a.value("node"), print: a.print()? };
+            let target = files::Target {
+                format: a.value("format"),
+                scale: a.scale()?,
+                page: a.value("page"),
+                node: a.value("node"),
+                print: a.print()?,
+                vd_compat: a.vd_compat()?,
+            };
             files::export(&file, &out, &target)
         }
         "convert" => {
diff --git a/apps/figcraft-cli/tests/vector_drawable.rs b/apps/figcraft-cli/tests/vector_drawable.rs
new file mode 100644
index 00000000..87edd74b
--- /dev/null
+++ b/apps/figcraft-cli/tests/vector_drawable.rs
@@ -0,0 +1,42 @@
+//! `figcraft-cli export … -o out.xml` (Android Vector Drawable) end to end.
+#![allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
+
+use std::process::Command;
+
+fn bin() -> Command {
+    Command::new(env!("CARGO_BIN_EXE_figcraft-cli"))
+}
+
+#[test]
+fn xml_export_writes_a_drawable_and_prints_its_notes() {
+    let d = std::env::temp_dir().join(format!("figcraft-cli-vd-{}", std::process::id()));
+    std::fs::create_dir_all(&d).unwrap();
+    let script = d.join("s.jsonl");
+    std::fs::write(
+        &script,
+        r##"{"command":"shape.rectangle","params":{"x":0,"y":0,"width":24,"height":24,"name":"Dot","props":{"fill":"#ff0000","effects":[{"type":"dropShadow"}]}}}"##,
+    )
+    .unwrap();
+    let file = d.join("doc.figcraft");
+    let out = bin().arg("run").arg(&script).arg("--out").arg(&file).output().unwrap();
+    assert!(out.status.success(), "{}", String::from_utf8_lossy(&out.stderr));
+
+    let xml = d.join("icon.xml");
+    let out = bin().arg("export").arg(&file).arg("-o").arg(&xml).output().unwrap();
+    assert!(out.status.success(), "{}", String::from_utf8_lossy(&out.stderr));
+    let text = std::fs::read_to_string(&xml).unwrap();
+    assert!(text.contains("<vector") && text.contains("android:fillColor=\"#FF0000\""), "{text}");
+    assert!(String::from_utf8_lossy(&out.stderr).contains("note: drop shadows were left out (Dot)"));
+
+    // --format xml into a folder; --vd-compat ignore prints nothing.
+    let dir = d.join("out");
+    let out = bin().arg("export").arg(&file).arg("-o").arg(&dir).args(["--format", "xml", "--vd-compat", "ignore"]).output().unwrap();
+    assert!(out.status.success(), "{}", String::from_utf8_lossy(&out.stderr));
+    assert!(dir.join("Dot.xml").exists());
+    assert!(!String::from_utf8_lossy(&out.stderr).contains("note:"));
+
+    let out = bin().arg("export").arg(&file).arg("-o").arg(&xml).args(["--vd-compat", "sloppy"]).output().unwrap();
+    assert!(!out.status.success());
+    assert!(String::from_utf8_lossy(&out.stderr).contains("--vd-compat"));
+    let _ = std::fs::remove_dir_all(&d);
+}
diff --git a/crates/doc/src/props.rs b/crates/doc/src/props.rs
index 4f6491c1..910a8761 100644
--- a/crates/doc/src/props.rs
+++ b/crates/doc/src/props.rs
@@ -1233,11 +1233,14 @@ pub enum ExportFormat {
     Svg,
     Pdf,
     Webp,
+    /// Android Vector Drawable (an `.xml` drawable resource).
+    VectorDrawable,
 }
 
 impl ExportFormat {
     /// Every format, in the order the export menus list them.
-    pub const ALL: [ExportFormat; 5] = [ExportFormat::Png, ExportFormat::Jpg, ExportFormat::Svg, ExportFormat::Pdf, ExportFormat::Webp];
+    pub const ALL: [ExportFormat; 6] =
+        [ExportFormat::Png, ExportFormat::Jpg, ExportFormat::Svg, ExportFormat::Pdf, ExportFormat::Webp, ExportFormat::VectorDrawable];
 
     /// Pixel formats (their size depends on the export scale).
     pub fn is_raster(self) -> bool {
@@ -1252,9 +1255,15 @@ impl ExportFormat {
             ExportFormat::Svg => "SVG",
             ExportFormat::Pdf => "PDF",
             ExportFormat::Webp => "WebP",
+            ExportFormat::VectorDrawable => "XML",
         }
     }
 
+    /// Formats whose output is vector (one file whatever the scale).
+    pub fn is_vector(self) -> bool {
+        matches!(self, ExportFormat::Svg | ExportFormat::Pdf | ExportFormat::VectorDrawable)
+    }
+
     pub fn ext(self) -> &'static str {
         match self {
             ExportFormat::Png => "png",
@@ -1262,6 +1271,7 @@ impl ExportFormat {
             ExportFormat::Svg => "svg",
             ExportFormat::Pdf => "pdf",
             ExportFormat::Webp => "webp",
+            ExportFormat::VectorDrawable => "xml",
         }
     }
     pub fn from_ext(s: &str) -> Option<Self> {
@@ -1271,6 +1281,7 @@ impl ExportFormat {
             "svg" => Some(ExportFormat::Svg),
             "pdf" => Some(ExportFormat::Pdf),
             "webp" => Some(ExportFormat::Webp),
+            "xml" | "vd" | "vectordrawable" => Some(ExportFormat::VectorDrawable),
             _ => None,
         }
     }
@@ -1439,6 +1450,44 @@ pub struct ExportSetting {
     /// SVG: strokes as `stroke` attributes where that's exact (on), else as outlines.
     #[serde(skip_serializing_if = "is_true")]
     pub svg_simplify_stroke: bool,
+    /// Android Vector Drawable: what to do with what a drawable can't hold exactly.
+    #[serde(skip_serializing_if = "VdCompat::is_default")]
+    pub vd_compat: VdCompat,
+}
+
+/// How an Android Vector Drawable export handles what the format can't draw exactly (layer
+/// opacity over overlapping shapes, even-odd fills, diamond gradients, alpha masks).
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Serialize, Deserialize, Default)]
+#[serde(rename_all = "camelCase")]
+pub enum VdCompat {
+    /// The closest drawing, with a warning for each approximation.
+    #[default]
+    BestEffort,
+    /// Never approximate: what can't be drawn exactly is left out, with a warning.
+    Exact,
+    /// Write what maps, leave out the rest, no warnings.
+    Ignore,
+}
+
+impl VdCompat {
+    pub const ALL: [VdCompat; 3] = [VdCompat::BestEffort, VdCompat::Exact, VdCompat::Ignore];
+
+    fn is_default(&self) -> bool {
+        *self == VdCompat::BestEffort
+    }
+
+    /// The name commands, files and the CLI use ("bestEffort").
+    pub fn key(self) -> &'static str {
+        match self {
+            VdCompat::BestEffort => "bestEffort",
+            VdCompat::Exact => "exact",
+            VdCompat::Ignore => "ignore",
+        }
+    }
+
+    pub fn from_key(s: &str) -> Option<Self> {
+        Self::ALL.into_iter().find(|c| c.key() == s)
+    }
 }
 
 impl Default for ExportSetting {
@@ -1453,6 +1502,7 @@ impl Default for ExportSetting {
             svg_outline_text: true,
             svg_id_attribute: false,
             svg_simplify_stroke: true,
+            vd_compat: VdCompat::BestEffort,
         }
     }
 }
diff --git a/crates/engine/Cargo.toml b/crates/engine/Cargo.toml
index 545d872c..0ca1f61b 100644
--- a/crates/engine/Cargo.toml
+++ b/crates/engine/Cargo.toml
@@ -20,6 +20,7 @@ figcraft-render = { workspace = true }
 figcraft-format = { workspace = true }
 figcraft-svg = { workspace = true }
 figcraft-pdf = { workspace = true }
+figcraft-vectordrawable = { workspace = true }
 craft-docpath = { workspace = true }
 figcraft-plugin = { workspace = true }
 serde = { workspace = true }
diff --git a/crates/engine/src/cmd/edit.rs b/crates/engine/src/cmd/edit.rs
index a4769a35..929fc77c 100644
--- a/crates/engine/src/cmd/edit.rs
+++ b/crates/engine/src/cmd/edit.rs
@@ -287,7 +287,7 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "export.add",
             "Add export setting",
-            "{ids?, setting? {size: 2x|512w|512h|{by: scale|width|height, value}, suffix?, format?: png|jpg|svg|pdf|webp, bleed? (PDF: points, or with a unit: \"3mm\", \"0.125in\", \"9pt\"), cropMarks?, bleedMarks?, cmyk? (PDF print options)}} (without a setting: 1x, then one scale step up with an \"@2x\"-style suffix)",
+            "{ids?, setting? {size: 2x|512w|512h|{by: scale|width|height, value}, suffix?, format?: png|jpg|svg|pdf|webp|xml (Android Vector Drawable), bleed? (PDF: points, or with a unit: \"3mm\", \"0.125in\", \"9pt\"), cropMarks?, bleedMarks?, cmyk? (PDF print options), vdCompat? (XML: bestEffort|exact|ignore)}} (without a setting: 1x, then one scale step up with an \"@2x\"-style suffix)",
             true,
             |s, p| {
                 let cmd = "export.add";
@@ -305,7 +305,7 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "export.update",
             "Edit export setting",
-            "{ids?, index, size? (2x|512w|512h|{by, value}), suffix?, format? (png|jpg|svg|pdf|webp), bleed? (PDF: points, or with a unit: \"3mm\", \"0.125in\", \"9pt\"), cropMarks?, bleedMarks?, cmyk? (PDF print options)}",
+            "{ids?, index, size? (2x|512w|512h|{by, value}), suffix?, format? (png|jpg|svg|pdf|webp|xml: Android Vector Drawable), bleed? (PDF: points, or with a unit: \"3mm\", \"0.125in\", \"9pt\"), cropMarks?, bleedMarks?, cmyk? (PDF print options), vdCompat? (XML: bestEffort|exact|ignore)}",
             true,
             |s, p| {
                 let cmd = "export.update";
diff --git a/crates/engine/src/cmd/file.rs b/crates/engine/src/cmd/file.rs
index bc13bc70..e4dae90a 100644
--- a/crates/engine/src/cmd/file.rs
+++ b/crates/engine/src/cmd/file.rs
@@ -58,14 +58,14 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "file.export",
             "Export",
-            "{ids? (default selection, else the page), format? (png|jpg|svg|pdf|webp, or fig: the whole file as .fig, experimental, with `warnings` for what was left out; other apps may not open every file), scale? (default 1) | size? (2x|512w|512h or {by: scale|width|height, value}: a scale, or a width or height in pixels), path? (else returns base64 `data`), bleed? (PDF: points, or with a unit: \"3mm\", \"0.125in\", \"9pt\"), cropMarks?, bleedMarks?, cmyk? (PDF print options)}",
+            "{ids? (default selection, else the page), format? (png|jpg|svg|pdf|webp|xml (an Android Vector Drawable, with `warnings` for what it changed or left out), or fig: the whole file as .fig, experimental, with `warnings` for what was left out; other apps may not open every file), scale? (default 1) | size? (2x|512w|512h or {by: scale|width|height, value}: a scale, or a width or height in pixels), path? (else returns base64 `data`), bleed? (PDF: points, or with a unit: \"3mm\", \"0.125in\", \"9pt\"), cropMarks?, bleedMarks?, cmyk? (PDF print options), svgIdAttribute? (SVG ids, XML android:name), vdCompat? (XML: bestEffort (default: approximate with a warning)|exact (leave out what can't be exact, with a warning)|ignore (no warnings))}",
             false,
             export
         ),
         spec!(
             "file.exportLayers",
             "Export layers",
-            "{ids? (default the selection, else every layer on the page with export settings), assets? (true: the Inspect tab's assets in and under them instead: layers with export settings, icons as SVG, images as PNG), dir? (folder to write into; else each file comes back as base64 `data`), bleed? (PDF: points, or with a unit: \"3mm\", \"0.125in\", \"9pt\"), cropMarks?, bleedMarks?, cmyk? (PDF print options): for every PDF instead of each setting's own}  every layer once per export setting, named `<layer><suffix>.<format>` (\"@2x\" when a scaled export has no suffix; repeats get \" 2\"; slashes in a layer name make folders). Returns {files: [{name, id, bytes, path | data}], skipped (layers without settings)}",
+            "{ids? (default the selection, else every layer on the page with export settings), assets? (true: the Inspect tab's assets in and under them instead: layers with export settings, icons as SVG, images as PNG), dir? (folder to write into; else each file comes back as base64 `data`), bleed? (PDF: points, or with a unit: \"3mm\", \"0.125in\", \"9pt\"), cropMarks?, bleedMarks?, cmyk? (PDF print options): for every PDF instead of each setting's own, vdCompat? (bestEffort|exact|ignore: for every XML instead of each setting's own)}  every layer once per export setting, named `<layer><suffix>.<format>` (\"@2x\" when a scaled export has no suffix; repeats get \" 2\"; slashes in a layer name make folders). Returns {files: [{name, id, bytes, path | data, warnings (XML only)}], skipped (layers without settings)}",
             false,
             export_layers
         ),
@@ -919,14 +919,20 @@ fn drawn_layers(doc: &Document, ids: &[NodeId], setting: &ExportSetting) -> Vec<
 }
 
 /// [`export_bytes`] with an export setting's format and options (its size is `scale`: see
-/// [`export_scale`]): contents only, include bounding box, the SVG options and PDF print settings.
+/// [`export_scale`]): contents only, include bounding box, the SVG, PDF and Vector Drawable options.
 pub fn export_bytes_with(doc: &Document, ids: &[NodeId], setting: &ExportSetting, scale: f64) -> Result<Vec<u8>> {
+    export_file(doc, ids, setting, scale).map(|(bytes, _)| bytes)
+}
+
+/// [`export_bytes_with`] and what the export changed or left out (Android Vector Drawable only;
+/// empty for the other formats).
+pub fn export_file(doc: &Document, ids: &[NodeId], setting: &ExportSetting, scale: f64) -> Result<(Vec<u8>, Vec<String>)> {
     let nothing = || EngineError::Disabled("file.export".into(), "nothing to export".into());
     if ids.is_empty() {
         return Err(nothing());
     }
     let drawn = drawn_layers(doc, ids, setting);
-    if matches!(setting.format, ExportFormat::Svg | ExportFormat::Pdf) {
+    if setting.format.is_vector() {
         figcraft_render::check_export_depth(doc, &drawn).map_err(|e| EngineError::Other(e.to_string()))?;
     }
     let area = export_area(doc, ids, setting).ok_or_else(nothing)?;
@@ -943,22 +949,37 @@ pub fn export_bytes_with(doc: &Document, ids: &[NodeId], setting: &ExportSetting
                 simplify_stroke: setting.svg_simplify_stroke,
                 bounds: Some(area),
             };
-            figcraft_svg::try_export_svg(&doc.in_srgb(), &drawn, &opts).map(String::into_bytes).map_err(|e| match e {
+            let svg = figcraft_svg::try_export_svg(&doc.in_srgb(), &drawn, &opts).map_err(|e| match e {
                 figcraft_svg::SvgError::Empty => nothing(),
                 other => EngineError::Other(other.to_string()),
-            })
+            })?;
+            Ok((svg.into_bytes(), Vec::new()))
+        }
+        // Android colours are sRGB too.
+        ExportFormat::VectorDrawable => {
+            let compat = match setting.vd_compat {
+                VdCompat::BestEffort => figcraft_vectordrawable::Compat::BestEffort,
+                VdCompat::Exact => figcraft_vectordrawable::Compat::Exact,
+                VdCompat::Ignore => figcraft_vectordrawable::Compat::Ignore,
+            };
+            let opts = figcraft_vectordrawable::VdOptions { bounds: Some(area), include_names: setting.svg_id_attribute, compat };
+            let out = figcraft_vectordrawable::try_export(&doc.in_srgb(), &drawn, &opts).map_err(|e| match e {
+                figcraft_vectordrawable::VdError::Empty => nothing(),
+                other => EngineError::Other(other.to_string()),
+            })?;
+            Ok((out.xml.into_bytes(), out.warnings))
         }
         ExportFormat::Pdf => {
             let doc = &*doc.in_srgb();
             // Frames export one page each; anything else shares one page.
             let all_frames = own_area && ids.iter().all(|i| doc.node(*i).is_some_and(|n| n.kind.is_frame_like()));
             let groups: Vec<Vec<NodeId>> = if all_frames { ids.iter().map(|i| vec![*i]).collect() } else { vec![drawn] };
-            pdf_bytes(doc, &groups, &setting.print, (!own_area).then_some(area))
+            Ok((pdf_bytes(doc, &groups, &setting.print, (!own_area).then_some(area))?, Vec::new()))
         }
         _ => {
             let pix = figcraft_render::render_area(doc, &drawn, area, scale)
                 .ok_or_else(|| EngineError::Other("render failed (empty or too large)".into()))?;
-            figcraft_render::encode_export(&pix, setting.format, doc.color_profile).map_err(EngineError::Other)
+            Ok((figcraft_render::encode_export(&pix, setting.format, doc.color_profile).map_err(EngineError::Other)?, Vec::new()))
         }
     }
 }
@@ -995,14 +1016,19 @@ fn export(s: &mut Session, p: &Value) -> Result<Value> {
         None => num_or(p, "scale", 1.0).clamp(0.01, ExportSize::MAX_SCALE),
     };
     let format = setting.format;
-    let bytes = export_bytes_with(doc, &ids, &setting, scale)?;
-    match string(p, "path") {
+    let (bytes, warnings) = export_file(doc, &ids, &setting, scale)?;
+    let mut out = match string(p, "path") {
         Some(path) => {
             write(&path, &bytes)?;
-            Ok(json!({"path": path, "bytes": bytes.len(), "format": format.ext()}))
+            json!({"path": path, "bytes": bytes.len(), "format": format.ext()})
         }
-        None => Ok(json!({"format": format.ext(), "data": base64::engine::general_purpose::STANDARD.encode(&bytes)})),
+        None => json!({"format": format.ext(), "data": base64::engine::general_purpose::STANDARD.encode(&bytes)}),
+    };
+    // Android Vector Drawables say what they changed or left out (an empty list when nothing).
+    if format == ExportFormat::VectorDrawable {
+        out["warnings"] = json!(warnings);
     }
+    Ok(out)
 }
 
 /// The whole document as a `.fig` file (experimental: only round trips through our own importer
@@ -1028,7 +1054,7 @@ pub fn fig_bytes(doc: &Document) -> Result<(Vec<u8>, Vec<String>)> {
 pub fn export_scale(doc: &Document, ids: &[NodeId], setting: &ExportSetting) -> f64 {
     // Size-based exports ask for bounds before encoding. Let encoding report the depth error
     // without entering a recursive bounds walk here; SVG/PDF do not use this raster scale.
-    if matches!(setting.format, ExportFormat::Svg | ExportFormat::Pdf) && figcraft_render::check_export_depth(doc, ids).is_err() {
+    if setting.format.is_vector() && figcraft_render::check_export_depth(doc, ids).is_err() {
         return 1.0;
     }
     export_area(doc, ids, setting).map_or(1.0, |b| setting.size.scale_for(b.width(), b.height()))
@@ -1043,7 +1069,10 @@ pub(super) fn export_setting(cmd: &str, mut e: ExportSetting, p: &Value) -> Resu
         e.suffix = s.chars().filter(|c| !c.is_control()).take(200).collect();
     }
     if let Some(f) = string(p, "format") {
-        e.format = ExportFormat::from_ext(&f).ok_or_else(|| bad(cmd, "format: png|jpg|svg|pdf|webp"))?;
+        e.format = ExportFormat::from_ext(&f).ok_or_else(|| bad(cmd, "format: png|jpg|svg|pdf|webp|xml"))?;
+    }
+    if let Some(c) = vd_compat_param(cmd, p)? {
+        e.vd_compat = c;
     }
     e.print = print_param(cmd, p, e.print)?;
     for (key, slot) in [
@@ -1061,6 +1090,14 @@ pub(super) fn export_setting(cmd: &str, mut e: ExportSetting, p: &Value) -> Resu
     Ok(e)
 }
 
+/// The `vdCompat` `p` passes: bestEffort, exact or ignore (anything else is an error).
+fn vd_compat_param(cmd: &str, p: &Value) -> Result<Option<VdCompat>> {
+    match get(p, "vdCompat") {
+        None | Some(Value::Null) => Ok(None),
+        Some(v) => v.as_str().and_then(VdCompat::from_key).map(Some).ok_or_else(|| bad(cmd, "vdCompat: bestEffort|exact|ignore")),
+    }
+}
+
 /// Whether `p` sets any PDF print option.
 fn has_print_param(p: &Value) -> bool {
     ["bleed", "cropMarks", "bleedMarks", "cmyk"].iter().any(|k| get(p, k).is_some_and(|v| !v.is_null()))
@@ -1173,12 +1210,18 @@ fn export_layers(s: &mut Session, p: &Value) -> Result<Value> {
     let dir = string(p, "dir");
     // Print options passed here stand in for every PDF setting's own.
     let print = has_print_param(p).then(|| print_param(cmd, p, PrintSettings::default())).transpose()?;
+    // And a compatibility mode for every Android Vector Drawable.
+    let compat = vd_compat_param(cmd, p)?;
     let mut files = Vec::with_capacity(jobs.len());
     for job in &jobs {
-        let setting = ExportSetting { print: print.unwrap_or(job.setting.print), ..job.setting.clone() };
+        let setting =
+            ExportSetting { print: print.unwrap_or(job.setting.print), vd_compat: compat.unwrap_or(job.setting.vd_compat), ..job.setting.clone() };
         let scale = export_scale(doc, &[job.id], &setting);
-        let bytes = export_bytes_with(doc, &[job.id], &setting, scale)?;
+        let (bytes, warnings) = export_file(doc, &[job.id], &setting, scale)?;
         let mut f = json!({"name": job.file, "id": job.id, "bytes": bytes.len()});
+        if setting.format == ExportFormat::VectorDrawable {
+            f["warnings"] = json!(warnings);
+        }
         match &dir {
             Some(d) => {
                 let path = std::path::Path::new(d).join(&job.file);
diff --git a/crates/engine/src/lib.rs b/crates/engine/src/lib.rs
index 312c2e87..d81f785f 100644
--- a/crates/engine/src/lib.rs
+++ b/crates/engine/src/lib.rs
@@ -1826,6 +1826,8 @@ mod variables_io_tests;
 #[cfg(test)]
 mod vector_behaviour_tests;
 #[cfg(test)]
+mod vector_drawable_export_tests;
+#[cfg(test)]
 mod vector_multi_behaviour_tests;
 #[cfg(test)]
 mod vector_offset_tests;
diff --git a/crates/engine/src/vector_drawable_export_tests.rs b/crates/engine/src/vector_drawable_export_tests.rs
new file mode 100644
index 00000000..4be39980
--- /dev/null
+++ b/crates/engine/src/vector_drawable_export_tests.rs
@@ -0,0 +1,108 @@
+//! Android Vector Drawable (XML) export through the commands: one-off exports with their
+//! warnings, export settings with a compatibility mode (stored, saved, edited), export layers,
+//! and bad values refused.
+
+use base64::Engine as _;
+use figcraft_doc::*;
+use serde_json::{Value, json};
+
+use crate::Session;
+use crate::params::id_of;
+
+/// A session with a 48 × 24 frame holding two overlapping rectangles at 50% opacity.
+fn session() -> (Session, NodeId) {
+    let mut s = Session::new();
+    let r = s.execute("frame.create", &json!({"x": 0, "y": 0, "width": 48, "height": 24, "name": "Badge"})).unwrap();
+    let f = id_of(&r["id"]).unwrap();
+    for x in [0, 12] {
+        s.execute("shape.rectangle", &json!({"x": x, "y": 0, "width": 24, "height": 24, "parent": f})).unwrap();
+    }
+    s.execute("node.set", &json!({"ids": [f], "props": {"opacity": 0.5}})).unwrap();
+    s.set_selection(vec![f]);
+    (s, f)
+}
+
+fn xml(r: &Value) -> String {
+    let bytes = base64::engine::general_purpose::STANDARD.decode(r["data"].as_str().unwrap()).unwrap();
+    String::from_utf8(bytes).unwrap()
+}
+
+#[test]
+fn a_one_off_export_returns_the_drawable_and_its_warnings() {
+    let (mut s, f) = session();
+    let r = s.execute("file.export", &json!({"ids": [f], "format": "xml"})).unwrap();
+    assert_eq!(r["format"], "xml");
+    let x = xml(&r);
+    assert!(x.starts_with("<?xml") && x.contains("<vector") && x.contains("android:width=\"48dp\""), "{x}");
+    assert_eq!(r["warnings"], json!(["layer opacity was applied to each shape: where shapes overlap they look denser (Badge)"]));
+    // Exact leaves the faded frame out; ignore draws it opaque, without warnings.
+    let r = s.execute("file.export", &json!({"ids": [f], "format": "xml", "vdCompat": "exact"})).unwrap();
+    assert!(!xml(&r).contains("fillColor"), "{}", xml(&r));
+    // Still a valid (empty) drawable, and it says so.
+    assert_eq!(r["warnings"].as_array().map(Vec::len), Some(2));
+    assert_eq!(r["warnings"][1], "nothing in it could be drawn: the drawable is empty (Badge)");
+    let r = s.execute("file.export", &json!({"ids": [f], "format": "xml", "vdCompat": "ignore"})).unwrap();
+    assert_eq!(r["warnings"], json!([]));
+    // Names only when asked.
+    assert!(!xml(&r).contains("android:name"));
+    let r = s.execute("file.export", &json!({"ids": [f], "format": "xml", "svgIdAttribute": true})).unwrap();
+    assert!(xml(&r).contains("android:name=\"Badge\""), "{}", xml(&r));
+    // Other formats don't grow a `warnings` field.
+    assert!(s.execute("file.export", &json!({"ids": [f], "format": "svg"})).unwrap().get("warnings").is_none());
+}
+
+#[test]
+fn a_path_ending_in_xml_picks_the_format() {
+    let (mut s, f) = session();
+    let dir = std::env::temp_dir().join(format!("figcraft-vd-{}", std::process::id()));
+    std::fs::create_dir_all(&dir).unwrap();
+    let path = dir.join("badge.xml");
+    let r = s.execute("file.export", &json!({"ids": [f], "path": path.to_string_lossy()})).unwrap();
+    assert_eq!(r["format"], "xml");
+    assert!(std::fs::read_to_string(&path).unwrap().contains("<vector"));
+    let _ = std::fs::remove_dir_all(&dir);
+}
+
+#[test]
+fn export_settings_keep_their_compatibility_mode() {
+    let (mut s, f) = session();
+    s.execute("export.add", &json!({"ids": [f], "setting": {"format": "xml", "vdCompat": "exact"}})).unwrap();
+    let e = s.doc().unwrap().node(f).unwrap().exports[0].clone();
+    assert_eq!((e.format, e.vd_compat), (ExportFormat::VectorDrawable, VdCompat::Exact));
+    // Stored camelCase, the default left out.
+    let v = serde_json::to_value(&e).unwrap();
+    assert_eq!((v["format"].as_str(), v["vdCompat"].as_str()), (Some("vectorDrawable"), Some("exact")));
+    assert!(serde_json::to_value(ExportSetting::default()).unwrap().get("vdCompat").is_none());
+    // Saved and loaded.
+    let bytes = figcraft_format::save_bytes(s.doc().unwrap(), None).unwrap();
+    let (back, _) = figcraft_format::load_bytes(&bytes).unwrap();
+    assert_eq!(back.node(f).unwrap().exports[0], e);
+    // Edited and undone.
+    s.execute("export.update", &json!({"ids": [f], "index": 0, "vdCompat": "ignore"})).unwrap();
+    assert_eq!(s.doc().unwrap().node(f).unwrap().exports[0].vd_compat, VdCompat::Ignore);
+    s.execute("edit.undo", &json!({})).unwrap();
+    assert_eq!(s.doc().unwrap().node(f).unwrap().exports[0].vd_compat, VdCompat::Exact);
+    // Export layers: one .xml file with its warnings; a vdCompat passed there wins.
+    let r = s.execute("file.exportLayers", &json!({"ids": [f]})).unwrap();
+    let file = &r["files"][0];
+    assert_eq!(file["name"], "Badge.xml");
+    assert_eq!(file["warnings"].as_array().map(Vec::len), Some(2), "exact: left out, so empty");
+    let r = s.execute("file.exportLayers", &json!({"ids": [f], "vdCompat": "ignore"})).unwrap();
+    assert_eq!(r["files"][0]["warnings"], json!([]));
+}
+
+#[test]
+fn bad_values_are_refused_and_change_nothing() {
+    let (mut s, f) = session();
+    s.execute("export.add", &json!({"ids": [f], "setting": {"format": "xml"}})).unwrap();
+    for junk in [json!("loose"), json!(3), json!(true), json!("BESTEFFORT"), json!({})] {
+        assert!(s.execute("file.export", &json!({"ids": [f], "format": "xml", "vdCompat": junk})).is_err(), "{junk}");
+        assert!(s.execute("export.update", &json!({"ids": [f], "index": 0, "vdCompat": junk})).is_err(), "{junk}");
+        assert!(s.execute("export.add", &json!({"ids": [f], "setting": {"vdCompat": junk}})).is_err(), "{junk}");
+        assert!(s.execute("file.exportLayers", &json!({"ids": [f], "vdCompat": junk})).is_err(), "{junk}");
+    }
+    let n = s.doc().unwrap().node(f).unwrap();
+    assert_eq!((n.exports.len(), n.exports[0].vd_compat), (1, VdCompat::BestEffort));
+    let err = s.execute("file.export", &json!({"ids": [f], "format": "vml"})).unwrap_err().to_string();
+    assert!(err.contains("xml"), "{err}");
+}
diff --git a/crates/format/src/fig/export.rs b/crates/format/src/fig/export.rs
index 0cad2122..e79ccbd8 100644
--- a/crates/format/src/fig/export.rs
+++ b/crates/format/src/fig/export.rs
@@ -1063,6 +1063,9 @@ impl<'d> Exporter<'d> {
             if n.exports.iter().any(|x| x.format == figcraft_doc::ExportFormat::Webp) {
                 self.warn("WebP export settings were written as PNG");
             }
+            if n.exports.iter().any(|x| x.format == figcraft_doc::ExportFormat::VectorDrawable) {
+                self.warn("Android Vector Drawable (XML) export settings were written as SVG");
+            }
             f.push(("exportSettings", arr(n.exports.iter().map(export_setting).collect())));
         }
         self.prototype(n, f);
@@ -2497,7 +2500,8 @@ fn export_setting(x: &figcraft_doc::ExportSetting) -> Kv<'static> {
         // The format has no WebP export setting.
         figcraft_doc::ExportFormat::Png | figcraft_doc::ExportFormat::Webp => "PNG",
         figcraft_doc::ExportFormat::Jpg => "JPEG",
-        figcraft_doc::ExportFormat::Svg => "SVG",
+        // Nor an Android Vector Drawable one: the nearest is the other vector format.
+        figcraft_doc::ExportFormat::Svg | figcraft_doc::ExportFormat::VectorDrawable => "SVG",
         figcraft_doc::ExportFormat::Pdf => "PDF",
     };
     let (ty, value) = match x.size {
diff --git a/crates/format/src/fig/export_tests.rs b/crates/format/src/fig/export_tests.rs
index 0eac9571..a9c551e8 100644
--- a/crates/format/src/fig/export_tests.rs
+++ b/crates/format/src/fig/export_tests.rs
@@ -1103,3 +1103,16 @@ fn local_samples_round_trip() {
         assert_same(&a, &b, &format!("{} (export warnings: {warnings:?})", p.display()));
     }
 }
+
+#[test]
+fn a_vector_drawable_export_setting_is_written_as_svg_with_a_warning() {
+    let mut doc = Document::new("vd");
+    let page = doc.first_page().unwrap();
+    let r = doc.create(page, NodeKind::Rectangle, "Icon", 0.0, 0.0, 24.0, 24.0).unwrap();
+    doc.get_mut(r).unwrap().exports = vec![ExportSetting { format: ExportFormat::VectorDrawable, ..Default::default() }];
+    let (bytes, warnings) = export(&doc, None).unwrap();
+    assert_eq!(warnings, ["Android Vector Drawable (XML) export settings were written as SVG"]);
+    let (back, _) = import(&bytes, "x").unwrap();
+    let icon = back.nodes().find(|n| n.name == "Icon").unwrap();
+    assert_eq!(icon.exports.iter().map(|x| x.format).collect::<Vec<_>>(), [ExportFormat::Svg]);
+}
diff --git a/crates/mcp/src/tools.rs b/crates/mcp/src/tools.rs
index 7714da5a..b15ef7b0 100644
--- a/crates/mcp/src/tools.rs
+++ b/crates/mcp/src/tools.rs
@@ -197,11 +197,11 @@ pub fn tool_definitions() -> Vec<Value> {
         tool(
             "export",
             "Export",
-            "Export layers (default: the selection, else every top-level layer of the current page) as png, jpg, svg, webp or pdf at `scale`, or the whole file as `fig` (experimental: written from public format knowledge, with `warnings` for what was left out; other apps may not open every file) (PDF: with `bleed`, `cropMarks`, `bleedMarks` and `cmyk` for print; options `contentsOnly`, `includeBoundingBox`, and for SVG `svgOutlineText`, `svgIdAttribute`, `svgSimplifyStroke`). With `path` the file is written there (absolute path recommended) and the result says where. Without `path`: png/jpg/webp come back as an image content block, svg as text, other formats as base64 `data`.",
+            "Export layers (default: the selection, else every top-level layer of the current page) as png, jpg, svg, webp, pdf or xml (an Android Vector Drawable, with `warnings` for what it changed or left out, per `vdCompat`) at `scale`, or the whole file as `fig` (experimental: written from public format knowledge, with `warnings` for what was left out; other apps may not open every file) (PDF: with `bleed`, `cropMarks`, `bleedMarks` and `cmyk` for print; options `contentsOnly`, `includeBoundingBox`, and for SVG `svgOutlineText`, `svgIdAttribute`, `svgSimplifyStroke`; for XML `svgIdAttribute` and `vdCompat`). With `path` the file is written there (absolute path recommended) and the result says where. Without `path`: png/jpg/webp come back as an image content block, svg as text, xml as text followed by `{format, warnings}`, other formats as base64 `data`.",
             obj(
                 json!({
                     "ids": ids_schema("Layers to export (several are composited into one image)"),
-                    "format": {"type": "string", "enum": ["png", "jpg", "svg", "webp", "pdf", "fig"], "description": "Format (default png, or from the path's extension)"},
+                    "format": {"type": "string", "enum": ["png", "jpg", "svg", "webp", "pdf", "xml", "fig"], "description": "Format (default png, or from the path's extension)"},
                     "scale": num("Pixel scale for raster formats (default 1, max 64)"),
                     "size": string("Instead of `scale`: `2x`, or a width or height in pixels like `512w` / `512h`"),
                     "path": string("Output file path"),
@@ -214,6 +214,7 @@ pub fn tool_definitions() -> Vec<Value> {
                     "svgOutlineText": boolean("SVG: text as outlines (default true); false keeps `<text>` elements"),
                     "svgIdAttribute": boolean("SVG: layer names as unique `id` attributes (default false)"),
                     "svgSimplifyStroke": boolean("SVG: strokes as `stroke` attributes where exact (default true); false writes outlines"),
+                    "vdCompat": {"type": "string", "enum": ["bestEffort", "exact", "ignore"], "description": "XML: what a Vector Drawable can't draw exactly is approximated with a warning (bestEffort, default), left out with a warning (exact), or written as far as it maps without warnings (ignore: overlapping layer opacity dropped, even-odd fills kept as fillType=evenOdd, diamond gradients left out)"},
                 }),
                 &[],
             ),
@@ -600,8 +601,8 @@ fn export(b: &mut dyn Backend, a: &Map<String, Value>) -> Result<ToolResult, Str
     }
     let format = s_arg(a, "format")?.map(str::to_ascii_lowercase);
     if let Some(f) = &format {
-        if !["png", "jpg", "jpeg", "svg", "webp", "pdf", "fig"].contains(&f.as_str()) {
-            return Err(format!("unknown format `{f}` (png|jpg|svg|webp|pdf|fig)"));
+        if !["png", "jpg", "jpeg", "svg", "webp", "pdf", "xml", "fig"].contains(&f.as_str()) {
+            return Err(format!("unknown format `{f}` (png|jpg|svg|webp|pdf|xml|fig)"));
         }
         params.insert("format".into(), json!(f));
     }
@@ -615,9 +616,18 @@ fn export(b: &mut dyn Backend, a: &Map<String, Value>) -> Result<ToolResult, Str
         params.insert("size".into(), json!(s));
     }
     // PDF print options and the export options, checked by the command.
-    for k in
-        ["bleed", "cropMarks", "bleedMarks", "cmyk", "contentsOnly", "includeBoundingBox", "svgOutlineText", "svgIdAttribute", "svgSimplifyStroke"]
-    {
+    for k in [
+        "bleed",
+        "cropMarks",
+        "bleedMarks",
+        "cmyk",
+        "contentsOnly",
+        "includeBoundingBox",
+        "svgOutlineText",
+        "svgIdAttribute",
+        "svgSimplifyStroke",
+        "vdCompat",
+    ] {
         if let Some(v) = a.get(k).filter(|v| !v.is_null()) {
             params.insert(k.into(), v.clone());
         }
@@ -637,6 +647,12 @@ fn export(b: &mut dyn Backend, a: &Map<String, Value>) -> Result<ToolResult, Str
         "jpg" | "jpeg" => Ok(ToolResult::image(&bytes, "image/jpeg", &json!({"format": "jpg", "bytes": bytes.len()}))),
         "webp" => Ok(ToolResult::image(&bytes, "image/webp", &json!({"format": "webp", "bytes": bytes.len()}))),
         "svg" => Ok(ToolResult::text(String::from_utf8_lossy(&bytes).into_owned())),
+        "xml" => {
+            let info = json!({"format": "xml", "bytes": bytes.len(), "warnings": r.get("warnings").cloned().unwrap_or_else(|| json!([]))});
+            let mut out = ToolResult::text(String::from_utf8_lossy(&bytes).into_owned());
+            out.content.extend(ToolResult::json(&info).content);
+            Ok(out)
+        }
         other => {
             let mut out = json!({"format": other, "bytes": bytes.len(), "data": base64::engine::general_purpose::STANDARD.encode(&bytes)});
             if let Some(w) = r.get("warnings") {
diff --git a/crates/mcp/tests/export_xml.rs b/crates/mcp/tests/export_xml.rs
new file mode 100644
index 00000000..72132750
--- /dev/null
+++ b/crates/mcp/tests/export_xml.rs
@@ -0,0 +1,30 @@
+//! The `export` tool's Android Vector Drawable format: the XML as text, then its warnings.
+#![allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
+
+mod common;
+
+use common::Client;
+use serde_json::{Value, json};
+
+#[test]
+fn xml_comes_back_as_text_and_its_warnings() {
+    let mut c = Client::new();
+    let id = c.create(json!({"type": "rectangle", "x": 0, "y": 0, "width": 24, "height": 16}));
+    let r = c.call("export", json!({"ids": [id], "format": "xml"}));
+    assert_eq!(r["isError"], false, "{r}");
+    let blocks = r["content"].as_array().unwrap();
+    let xml = blocks[0]["text"].as_str().unwrap();
+    assert!(xml.starts_with("<?xml") && xml.contains("android:width=\"24dp\"") && xml.contains("android:height=\"16dp\""), "{xml}");
+    let info: Value = serde_json::from_str(blocks[1]["text"].as_str().unwrap()).unwrap();
+    assert_eq!((info["format"].as_str(), info["warnings"].as_array().map(Vec::len)), (Some("xml"), Some(0)));
+
+    c.ok("set_properties", json!({"ids": [id], "props": {"effects": [{"type": "dropShadow"}]}}));
+    let r = c.call("export", json!({"ids": [id], "format": "xml"}));
+    let info: Value = serde_json::from_str(r["content"][1]["text"].as_str().unwrap()).unwrap();
+    assert_eq!(info["warnings"], json!(["drop shadows were left out (Rectangle)"]), "{info}");
+    let r = c.call("export", json!({"ids": [id], "format": "xml", "vdCompat": "ignore"}));
+    let info: Value = serde_json::from_str(r["content"][1]["text"].as_str().unwrap()).unwrap();
+    assert_eq!(info["warnings"], json!([]));
+
+    assert!(c.err("export", json!({"ids": [id], "format": "xml", "vdCompat": "loose"})).contains("vdCompat"));
+}
diff --git a/crates/render/src/lib.rs b/crates/render/src/lib.rs
index 2a911076..d0797353 100644
--- a/crates/render/src/lib.rs
+++ b/crates/render/src/lib.rs
@@ -394,7 +394,7 @@ pub fn encode_webp(p: &Pixmap) -> Result<Vec<u8>, String> {
 /// Encode an export in `format` (PNG, JPEG over white, WebP) tagged with the document's colour
 /// `profile`. An sRGB PNG gets an `sRGB` chunk; a Display P3 PNG gets the profile as `iCCP` plus
 /// `cICP` code points; Display P3 JPEG and WebP files embed the ICC profile (untagged files are read
-/// as sRGB). SVG and PDF are not pixel formats: an error.
+/// as sRGB). SVG, PDF and Vector Drawable are not pixel formats: an error.
 pub fn encode_export(p: &Pixmap, format: ExportFormat, profile: ColorProfile) -> Result<Vec<u8>, String> {
     let icc = (!profile.is_srgb()).then(|| profile.icc());
     match format {
@@ -404,7 +404,7 @@ pub fn encode_export(p: &Pixmap, format: ExportFormat, profile: ColorProfile) ->
         }
         ExportFormat::Jpg => jpeg_with(p, Color::WHITE, 90, icc),
         ExportFormat::Webp => webp_with(p, icc),
-        ExportFormat::Svg | ExportFormat::Pdf => Err(format!("{} is not a pixel format", format.label())),
+        ExportFormat::Svg | ExportFormat::Pdf | ExportFormat::VectorDrawable => Err(format!("{} is not a pixel format", format.label())),
     }
 }
 
diff --git a/crates/ui-egui/locales/en.toml b/crates/ui-egui/locales/en.toml
index 17f6b4c5..40ff3c1d 100644
--- a/crates/ui-egui/locales/en.toml
+++ b/crates/ui-egui/locales/en.toml
@@ -100,6 +100,7 @@ name = "English"
 "An invite link that opens FigCraft and joins" = "An invite link that opens FigCraft and joins"
 "Anchor" = "Anchor"
 "Android" = "Android"
+"Android Vector Drawable" = "Android Vector Drawable"
 "Angular" = "Angular"
 "Animation" = "Animation"
 "Annotations" = "Annotations"
@@ -156,6 +157,7 @@ name = "English"
 "Basics" = "Basics"
 "Before" = "Before"
 "Bend" = "Bend"
+"Best effort" = "Best effort"
 "Bevel" = "Bevel"
 "Binary assets added" = "Binary assets added"
 "Binary assets removed" = "Binary assets removed"
@@ -204,6 +206,7 @@ name = "English"
 "Code or invite link" = "Code or invite link"
 "Color profile: {name}" = "Color profile: {name}"
 "Colour and text styles, Light and Dark variables, buttons, inputs and cards" = "Colour and text styles, Light and Dark variables, buttons, inputs and cards"
+"Compatibility" = "Compatibility"
 "Convert to frame" = "Convert to frame"
 "Convert to section" = "Convert to section"
 "CSS custom properties…" = "CSS custom properties…"
@@ -456,6 +459,7 @@ name = "English"
 "Essential" = "Essential"
 "Every conflict has a choice." = "Every conflict has a choice."
 "Every top-level frame already starts a flow" = "Every top-level frame already starts a flow"
+"Exact only" = "Exact only"
 "Exact opacity (4 then 5: 45%)" = "Exact opacity (4 then 5: 45%)"
 "Exclude" = "Exclude"
 "Excluded" = "Excluded"
@@ -474,8 +478,10 @@ name = "English"
 "Export {n} layers" = { one = "Export {n} layer", other = "Export {n} layers" }
 "Exported {file}" = "Exported {file}"
 "Exported {name}" = "Exported {name}"
+"Exported {name}; {n} kinds of content were changed or left out" = { one = "Exported {name}; {n} kind of content was changed or left out", other = "Exported {name}; {n} kinds of content were changed or left out" }
 "Exported {name}; {n} kinds of content were left out" = { one = "Exported {name}; {n} kind of content was left out", other = "Exported {name}; {n} kinds of content were left out" }
 "Exported {n} files" = { one = "Exported {n} file", other = "Exported {n} files" }
+"Exported {n} files; some content was changed or left out" = { one = "Exported {n} file; some content was changed or left out", other = "Exported {n} files; some content was changed or left out" }
 "Export…" = "Export…"
 "Expose properties to instances" = "Expose properties to instances"
 "Exposure" = "Exposure"
@@ -613,6 +619,7 @@ name = "English"
 "If" = "If"
 "If {condition}" = "If {condition}"
 "Ignore auto layout (absolute position)" = "Ignore auto layout (absolute position)"
+"Ignore unsupported" = "Ignore unsupported"
 "Image" = "Image"
 "Images" = "Images"
 "Import" = "Import"
diff --git a/crates/ui-egui/locales/es.toml b/crates/ui-egui/locales/es.toml
index d054e222..9349bf46 100644
--- a/crates/ui-egui/locales/es.toml
+++ b/crates/ui-egui/locales/es.toml
@@ -8,6 +8,9 @@ name = "Español"
 status = "draft — needs native review"
 
 [ui]
+"Android Vector Drawable" = "Android Vector Drawable"
+"Best effort" = "Mejor aproximación"
+"Compatibility" = "Compatibilidad"
 "Compatibility notes" = "Notas de compatibilidad"
 "Couldn't download the variables" = "No se pudieron descargar las variables"
 
@@ -457,6 +460,7 @@ status = "draft — needs native review"
 "Essential" = "Esenciales"
 "Every conflict has a choice." = "Todos los conflictos tienen una elección."
 "Every top-level frame already starts a flow" = "Todos los marcos de nivel superior ya inician un flujo"
+"Exact only" = "Solo exacto"
 "Exact opacity (4 then 5: 45%)" = "Opacidad exacta (4 y luego 5: 45 %)"
 "Exclude" = "Excluir"
 "Excluded" = "Excluidos"
@@ -475,8 +479,10 @@ status = "draft — needs native review"
 "Export {n} layers" = { one = "Exportar {n} capa", other = "Exportar {n} capas" }
 "Exported {file}" = "Exportado: {file}"
 "Exported {name}" = "{name} exportado"
+"Exported {name}; {n} kinds of content were changed or left out" = { one = "{name} exportado; se cambió u omitió {n} tipo de contenido", other = "{name} exportado; se cambiaron u omitieron {n} tipos de contenido" }
 "Exported {name}; {n} kinds of content were left out" = { one = "{name} exportado; se omitió {n} tipo de contenido", other = "{name} exportado; se omitieron {n} tipos de contenido" }
 "Exported {n} files" = { one = "{n} archivo exportado", other = "{n} archivos exportados" }
+"Exported {n} files; some content was changed or left out" = { one = "{n} archivo exportado; se cambió u omitió parte del contenido", other = "{n} archivos exportados; se cambió u omitió parte del contenido" }
 "Export…" = "Exportar…"
 "Expose properties to instances" = "Exponer propiedades a las instancias"
 "Exposure" = "Exposición"
@@ -614,6 +620,7 @@ status = "draft — needs native review"
 "If" = "Si"
 "If {condition}" = "Si {condition}"
 "Ignore auto layout (absolute position)" = "Ignorar diseño automático (posición absoluta)"
+"Ignore unsupported" = "Ignorar lo no admitido"
 "Image" = "Imagen"
 "Images" = "Imágenes"
 "Import" = "Importar"
diff --git a/crates/ui-egui/src/dialogs.rs b/crates/ui-egui/src/dialogs.rs
index 448501ab..c612e993 100644
--- a/crates/ui-egui/src/dialogs.rs
+++ b/crates/ui-egui/src/dialogs.rs
@@ -675,6 +675,7 @@ fn export_dialog(app: &mut FigApp, ctx: &Context) {
         preset(2.0, ExportFormat::Webp),
         preset(1.0, ExportFormat::Svg),
         preset(1.0, ExportFormat::Pdf),
+        preset(1.0, ExportFormat::VectorDrawable),
     ];
     let mut choice = None;
     window(tr("Export"), ctx).open(&mut open).show(ctx, |ui| {
@@ -688,14 +689,18 @@ fn export_dialog(app: &mut FigApp, ctx: &Context) {
             ui.painter().line_segment([r.left_center(), r.right_center()], Stroke::new(1.0, t.border));
             ui.add_space(10.0);
         };
-        let row = |ui: &mut egui::Ui, label: &str| {
+        let row_tip = |ui: &mut egui::Ui, label: &str, tip: Option<&str>| {
             let (r, resp) = ui.allocate_exact_size(vec2(320.0, 30.0), Sense::click());
             if resp.hovered() {
                 ui.painter().rect_filled(r, CornerRadius::same(5), t.hover);
             }
             ui.painter().text(r.left_center() + vec2(10.0, 0.0), Align2::LEFT_CENTER, label, regular(12.0), t.text);
-            resp.clicked()
+            match tip {
+                Some(tip) => resp.on_hover_text(tip).clicked(),
+                None => resp.clicked(),
+            }
         };
+        let row = |ui: &mut egui::Ui, label: &str| row_tip(ui, label, None);
         if !jobs.is_empty() {
             caption(ui, tr("With the layers' export settings"));
             const SHOWN: usize = 6;
@@ -717,7 +722,7 @@ fn export_dialog(app: &mut FigApp, ctx: &Context) {
         ui.add_space(4.0);
         for p in &presets {
             let label = if p.format.is_raster() { format!("{} @{}", p.format.label(), p.size.label()) } else { p.format.label().to_string() };
-            if row(ui, &label) {
+            if row_tip(ui, &label, crate::export_panel::format_tip(p.format)) {
                 choice = Some(ExportChoice::Once(p.clone()));
             }
         }
diff --git a/crates/ui-egui/src/export_panel.rs b/crates/ui-egui/src/export_panel.rs
index 8617c35a..9ba7f5dc 100644
--- a/crates/ui-egui/src/export_panel.rs
+++ b/crates/ui-egui/src/export_panel.rs
@@ -11,9 +11,9 @@ use figcraft_engine::cmd::file::export_jobs;
 use serde_json::{Value, json};
 
 use crate::FigApp;
-use crate::i18n::{tr, trf, trn};
+use crate::i18n::{tr, tr_noop, trf, trn};
 use crate::icons::{self, Icon};
-use crate::right::{common, menu_item, menu_popup, row};
+use crate::right::{common, menu_popup, menu_row, row};
 use crate::theme::{Tokens, regular};
 use crate::widgets::{self, FIELD_H};
 
@@ -83,10 +83,18 @@ fn setting_row(app: &mut FigApp, ui: &mut Ui, ids: &[NodeId], i: usize, e: &Expo
         {
             app.run("export.update", json!({"ids": ids, "index": i, "suffix": sfx}));
         }
-        let resp = widgets::dropdown(ui, e.format.label(), format_w, None);
+        let mut resp = widgets::dropdown(ui, e.format.label(), format_w, None);
+        if let Some(tip) = format_tip(e.format) {
+            resp = resp.on_hover_text(tip);
+        }
         menu_popup(&resp).show(|ui| {
             for f in ExportFormat::ALL {
-                if menu_item(ui, f.label(), "") {
+                let item = menu_row(ui, f.label(), "", 0.0, |_, _, _| {});
+                let item = match format_tip(f) {
+                    Some(tip) => item.on_hover_text(tip),
+                    None => item,
+                };
+                if item.clicked() {
                     app.run("export.update", json!({"ids": ids, "index": i, "format": f.ext()}));
                     ui.close();
                 }
@@ -113,8 +121,23 @@ fn setting_row(app: &mut FigApp, ui: &mut Ui, ids: &[NodeId], i: usize, e: &Expo
     }
 }
 
-/// A setting's advanced options: contents only and include bounding box, and for SVG outline
-/// text, the id attribute and simplified strokes. Returns the changed option as command params.
+/// What a format's short label doesn't say ("XML" is an Android Vector Drawable), for its tooltip.
+pub(crate) fn format_tip(f: ExportFormat) -> Option<&'static str> {
+    match f {
+        ExportFormat::VectorDrawable => Some(tr("Android Vector Drawable")),
+        _ => None,
+    }
+}
+
+/// The Android Vector Drawable compatibility modes, as the advanced options list them.
+/// Best effort approximates what the format can't draw (with a warning), exact only leaves it out
+/// (with a warning), ignore leaves it out silently.
+const VD_COMPAT: [(VdCompat, &str); 3] =
+    [(VdCompat::BestEffort, tr_noop("Best effort")), (VdCompat::Exact, tr_noop("Exact only")), (VdCompat::Ignore, tr_noop("Ignore unsupported"))];
+
+/// A setting's advanced options: contents only and include bounding box; for SVG outline text,
+/// the id attribute and simplified strokes; for XML (Android Vector Drawable) the id attribute
+/// (as `android:name`) and the compatibility mode. Returns the changed option as command params.
 fn advanced_options(ui: &mut Ui, e: &ExportSetting) -> Option<Value> {
     let mut out = None;
     let mut option = |ui: &mut Ui, key: &str, on: bool, label: &str| {
@@ -129,6 +152,17 @@ fn advanced_options(ui: &mut Ui, e: &ExportSetting) -> Option<Value> {
         option(ui, "svgIdAttribute", e.svg_id_attribute, tr("Include id attribute"));
         option(ui, "svgSimplifyStroke", e.svg_simplify_stroke, tr("Simplify stroke"));
     }
+    if e.format == ExportFormat::VectorDrawable {
+        option(ui, "svgIdAttribute", e.svg_id_attribute, tr("Include id attribute"));
+        ui.add_space(4.0);
+        widgets::label(ui, tr("Compatibility"), Tokens::get(ui.ctx()).text_secondary);
+        for (mode, label) in VD_COMPAT {
+            let on = e.vd_compat == mode;
+            if widgets::radio(ui, on, tr(label)) && !on {
+                out = Some(json!({"vdCompat": mode.key()}));
+            }
+        }
+    }
     out
 }
 
@@ -324,8 +358,14 @@ pub(crate) fn export_layers(app: &mut FigApp, ids: &[NodeId], assets: bool) {
             let ids = ids.to_vec();
             app.pick_folder(tr("Export"), move |app, dir| {
                 if let Some(r) = app.run("file.exportLayers", json!({"ids": ids, "dir": dir.to_string_lossy(), "assets": assets})) {
-                    let n = r["files"].as_array().map_or(0, Vec::len);
-                    app.toast(trn("Exported {n} files", n, &[]));
+                    let files = r["files"].as_array().cloned().unwrap_or_default();
+                    // Android Vector Drawables say what they changed or left out.
+                    let changed = files.iter().any(|f| f["warnings"].as_array().is_some_and(|w| !w.is_empty()));
+                    app.toast(if changed {
+                        trn("Exported {n} files; some content was changed or left out", files.len(), &[])
+                    } else {
+                        trn("Exported {n} files", files.len(), &[])
+                    });
                 }
             });
         }
@@ -339,8 +379,13 @@ pub(crate) fn save_one(app: &mut FigApp, ids: &[NodeId], setting: &ExportSetting
     params["ids"] = json!(ids);
     app.pick_save(tr("Export"), file, &[ext], move |app, p| {
         params["path"] = json!(p.to_string_lossy());
-        if app.run("file.export", params).is_some() {
-            app.toast(trf("Exported {name}", &[("name", &p.file_name().map(|f| f.to_string_lossy().to_string()).unwrap_or_default())]));
+        if let Some(r) = app.run("file.export", params) {
+            let name = p.file_name().map(|f| f.to_string_lossy().to_string()).unwrap_or_default();
+            // Android Vector Drawables say what they changed or left out.
+            app.toast(match r["warnings"].as_array().map_or(0, Vec::len) {
+                0 => trf("Exported {name}", &[("name", &name)]),
+                n => trn("Exported {name}; {n} kinds of content were changed or left out", n, &[("name", &name)]),
+            });
         }
     });
 }
diff --git a/crates/ui-egui/src/export_preview_tests.rs b/crates/ui-egui/src/export_preview_tests.rs
index d57e294d..54bcb164 100644
--- a/crates/ui-egui/src/export_preview_tests.rs
+++ b/crates/ui-egui/src/export_preview_tests.rs
@@ -63,7 +63,7 @@ fn export_rows_offer_a_size_for_images_only() {
     let size_menu = |u: &crate::layers_drag_tests::Ui| u.ctx.read_response(egui::Id::new(("export_size", 0)).with("menu")).is_some();
     u.frame(vec![]);
     assert!(size_menu(&u), "PNG has sizes");
-    for format in ["svg", "pdf"] {
+    for format in ["svg", "pdf", "xml"] {
         u.app.run("export.update", json!({"ids": [r], "index": 0, "format": format}));
         u.frame(vec![]);
         u.frame(vec![]);
@@ -76,3 +76,61 @@ fn export_rows_offer_a_size_for_images_only() {
         assert!(size_menu(&u), "{format} has sizes again");
     }
 }
+
+/// The text painted this frame, with the centre of each piece.
+fn labelled(u: &mut crate::layers_drag_tests::Ui) -> Vec<(String, egui::Pos2)> {
+    fn walk(shape: &egui::Shape, out: &mut Vec<(String, egui::Pos2)>) {
+        match shape {
+            egui::Shape::Text(t) => out.push((t.galley.text().to_string(), t.pos + t.galley.rect.center().to_vec2())),
+            egui::Shape::Vec(v) => v.iter().for_each(|s| walk(s, out)),
+            _ => {}
+        }
+    }
+    u.frame(vec![]);
+    let frame = u.frame_output(vec![]);
+    let mut out = Vec::new();
+    for c in &frame.shapes {
+        walk(&c.shape, &mut out);
+    }
+    out
+}
+
+fn click(u: &mut crate::layers_drag_tests::Ui, p: egui::Pos2) {
+    u.frame(vec![egui::Event::PointerMoved(p)]);
+    u.button(p, true);
+    u.button(p, false);
+    u.frame(vec![]);
+}
+
+/// Android Vector Drawable is in the format dropdown as "XML", and choosing it sets the format.
+#[test]
+fn the_format_dropdown_offers_android_vector_drawable() {
+    assert!(figcraft_doc::ExportFormat::ALL.contains(&figcraft_doc::ExportFormat::VectorDrawable));
+    let mut s = Session::new();
+    let r = crate::present_tests::id(&s.execute("shape.rectangle", &json!({"x": 0, "y": 0, "width": 100, "height": 80})).unwrap());
+    s.execute("select.set", &json!({"ids": [r]})).unwrap();
+    s.execute("export.add", &json!({"ids": [r]})).unwrap();
+    let mut u = crate::layers_drag_tests::Ui::new(s);
+    u.frame(vec![]);
+    let nodes = labelled(&mut u);
+    let field = nodes.iter().find(|(l, _)| l == "PNG").map(|n| n.1).unwrap_or_else(|| panic!("no PNG dropdown in {nodes:?}"));
+    click(&mut u, field);
+    let nodes = labelled(&mut u);
+    let xml = nodes.iter().find(|(l, _)| l == "XML").map(|n| n.1).unwrap_or_else(|| panic!("no XML row in {nodes:?}"));
+    click(&mut u, xml);
+    let doc = u.app.session.doc().unwrap();
+    assert_eq!(doc.node(r).unwrap().exports[0].format, figcraft_doc::ExportFormat::VectorDrawable);
+}
+
+/// The File > Export dialog has an XML preset.
+#[test]
+fn the_export_dialog_has_an_xml_preset() {
+    let mut s = Session::new();
+    let r = crate::present_tests::id(&s.execute("shape.rectangle", &json!({"x": 0, "y": 0, "width": 100, "height": 80})).unwrap());
+    s.execute("select.set", &json!({"ids": [r]})).unwrap();
+    let mut u = crate::layers_drag_tests::Ui::new(s);
+    u.frame(vec![]);
+    crate::menus::invoke(&mut u.app, "file.export");
+    let nodes = labelled(&mut u);
+    assert!(nodes.iter().any(|(l, _)| l == "XML"), "no XML preset in {nodes:?}");
+}
diff --git a/docs/architecture.md b/docs/architecture.md
index 766d2a6c..8bd2a183 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -1,6 +1,6 @@
 # FigCraft architecture
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-11 · **Change:** minor (the shared hub in `collab-net` and the `figcraft-server` app) · **Target:** Figma Design
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-18 · **Change:** minor (the `vectordrawable` crate, L4: Android Vector Drawable export; earlier: the shared hub in `collab-net` and the `figcraft-server` app) · **Target:** Figma Design
 
 How FigCraft is built today. Engine first, a thin swappable UI, everything a command; a Figma-shaped
 data model (a scene graph of frames with auto layout, components and variables). ~108,800 lines of
@@ -26,6 +26,7 @@ replaced.
 | L3 | `figcraft-format` | ~5.2k | Native `.figcraft` (zip of `document.json` + images; streamed JSON), local library files, versions, REST API file JSON import (`rest/`) |
 | L4 | `figcraft-svg` | ~3.7k | SVG export and import (usvg) |
 | L4 | `figcraft-pdf` | ~2.3k | PDF export (krilla) with print options |
+| L4 | `figcraft-vectordrawable` | ~1.2k | Android Vector Drawable (XML) export: baked path data, gradients through `aapt:attr`, clip groups, compatibility modes and warnings |
 | L5 | `figcraft-engine` | ~39.3k | Sessions, undo history (`Arc` snapshots), the command registry (`cmd/*`, `spec!`), pointer tools and vector edit mode, snapping and measuring, components sync, libraries, prototype runtime, Dev Mode code generation, the menu catalog (`catalog.rs`) and the keymap (`keymap.rs`), a panic guard |
 | L6 | `figcraft-ui-egui` | ~31.9k | The UI3-style frontend: canvas (render worker), toolbar, layers, Design/Prototype/Inspect panels, colour picker, menus, dialogs, presenter, comments, accessibility (AccessKit), the control channel server |
 | L6 | `figcraft-mcp` | ~2.4k | MCP server (JSON-RPC over stdio), headless or bridged to a running app |
@@ -81,6 +82,7 @@ input.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-18 | minor | Added `vectordrawable` (L4), the Android Vector Drawable (XML) writer |
 | 2026-10-11 | minor | `collab-net` hosts through one hub for the app's sessions and the standalone server; added the `figcraft-server` app |
 | 2026-10-10 | minor | Merged main after #101–#103: WASM plugins (plugins area 0% → 35% breadth, 20% ready; ecosystem 5% → 20%) and the multiplayer core without networking (multiplayer 5% → 15% breadth, 5% ready; collaboration 8% → 12%); menu breadth 97.5% → 98.5% (200/203); ready for real work ~46% → ~47%; full parity 420–790 h → 390–745 h; beta 210–380 h → 200–365 h. Fixed the stated weight sums (areas 1–16 sum to 94, total 113; percentages were already computed with those) |
 | 2026-10-10 | major | Created from the code as of PR #99 |
diff --git a/docs/cli.md b/docs/cli.md
index 7af73fd6..0bcca563 100644
--- a/docs/cli.md
+++ b/docs/cli.md
@@ -47,7 +47,7 @@ page 1 "Screens": 380 nodes, 4 top-level
   …
 ```
 
-### `export <file> -o <out> [--format png|jpg|svg|webp|pdf|fig] [--scale N] [--page NAME] [--node ID|NAME] [--bleed LENGTH] [--crop-marks] [--bleed-marks] [--cmyk]`
+### `export <file> -o <out> [--format png|jpg|svg|webp|pdf|xml|fig] [--scale N] [--page NAME] [--node ID|NAME] [--bleed LENGTH] [--crop-marks] [--bleed-marks] [--cmyk] [--vd-compat bestEffort|exact|ignore]`
 
 - `<out>` is a directory: one file per top-level frame of the page (default the first page), named
   after the frame (`Home.png`, `Settings.png`…); with no frames, one file per top-level layer.
@@ -59,9 +59,15 @@ page 1 "Screens": 380 nodes, 4 top-level
   documents and small test files, in other software; other apps may not open every file. What was
   left out (comments, Dev Mode data, some bindings and settings…) is printed as `note:` lines;
   `docs/file-format-parity.md` lists what was checked and what is unchecked.
+- `--format xml` (or an `<out>` ending in `.xml`) writes an Android Vector Drawable, e.g.
+  `figcraft-cli export app.figcraft --node Icon -o ic_icon.xml`. What the format can't draw is
+  printed as `note:` lines; `--vd-compat` picks how it's handled: `bestEffort` (default:
+  approximated), `exact` (left out) or `ignore` (no notes: overlapping layer opacity is dropped,
+  even-odd fills keep `fillType="evenOdd"`, diamond gradients are left out). See
+  `docs/file-format-parity.md`.
 - The format comes from `--format`, else `<out>`'s extension, else png. `--scale` (default 1, max 64)
   applies to raster formats.
-- SVG/PDF exports with visible descendants more than 256 levels below an exported root fail with
+- SVG/PDF/XML exports with visible descendants more than 256 levels below an exported root fail with
   an error instead of writing an incomplete file. Select an inner layer with `--node` or reduce
   nesting. An existing destination file is kept on this failure.
 - A `.pdf` `<out>` without `--node` holds the page's top-level frames, one PDF page each in reading
diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index adf0b0f2..549df536 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -1,6 +1,6 @@
 # File format parity
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-18 · **Change:** minor (REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732); SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-18 · **Change:** minor (Android Vector Drawable (XML) export; REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732); SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source) · **Target:** Figma Design (desktop app 126.10.7)
 
 Every format Figma reads or writes, with FigCraft's support. Sources: `Info.plist` of
 `/Applications/Figma.app` (document types only; nothing inside the bundle's code was read), Figma's
@@ -54,6 +54,7 @@ export limit, not a native document nesting limit.
 | SVG | yes (outline text option, ids) | yes | alpha/luminance masks kept; noise, texture, progressive and background blur, glass embedded as images; outline text (off: `<text>` with one `<tspan>` per line, one style per layer), unique id attributes from layer names, explicit depth-limit refusal, simplified strokes (stroke attributes for centred strokes and for inside and outside strokes on boxes and ellipses) | — |
 | 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) | | — |
+| Android Vector Drawable (XML) | — | yes (ours) | an `.xml` drawable resource (`file.export {format: "xml"}`, export settings, File ▸ Export…, the CLI and MCP), pretty-printed, sized in dp with the viewport in layer units, for AndroidX (VectorDrawableCompat: gradients and even-odd need API 24 without it). Shapes, booleans and text as path data with transforms baked in; solid fills and linear, radial and sweep gradients (`aapt:attr`, exact for any handles: radial and sweep in a `<group>` that maps the unit circle); centred strokes as stroke attributes where Android draws them the same (uniform scale, one cap, no dashes or variable width), other strokes as filled outlines; clipping frames and masks as `<group>` with `<clip-path>`; `android:name` from layer names with the id attribute option. What the format can't hold goes by the compatibility mode (`vdCompat`): best effort (default) applies layer opacity to each shape, rewrites even-odd fills and clip outlines as non-zero, draws diamond gradients as radial and alpha masks as outline clips, each with a warning; exact leaves out what it can't draw exactly, with a warning; ignore writes what maps without warnings: layer opacity over overlapping shapes is dropped (drawn opaque), even-odd fills keep `fillType="evenOdd"`, even-odd clip outlines clip as non-zero, diamond gradients are left out and alpha masks clip to their outline. Effects, image and pattern fills and blend modes are always left out (warned except in ignore); an export that draws nothing writes one empty path (Android refuses a drawable without a path), with a warning. Checked by parsing the XML, against FigCraft's renderer (gradients pixel by pixel), with `aapt2 compile` and `link`, and by rendering samples (linear, skewed radial and sweep gradients, a sweep with mirrored handles, even-odd booleans, centred and inside strokes, rotated text, a clipping frame, an alpha mask, a translucent group, each compatibility mode) with Android 13's (API 33) VectorDrawable on an emulator, next to FigCraft's PNG export: they match, including where the sweep starts and which way it turns, except what the compatibility mode and its warnings say (best effort: overlapping shapes in a translucent group look denser; exact and ignore leave out or draw opaque what they list). Not checked on API 21–23 (VectorDrawableCompat) | — |
 | 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) | — |
 | `.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) |
@@ -165,6 +166,7 @@ each.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-18 | minor | Android Vector Drawable (XML) export, ours: the format, its compatibility modes (`vdCompat`: best effort, exact, ignore) and warnings; a `.fig` export writes XML export settings as SVG, with a note. Numbers unchanged |
 | 2026-10-18 | minor | REST file JSON import keeps `SLOT` layers (#792): they were dropped with everything placed in them, which emptied every instance's slot. A slot in a main component becomes a slot frame bound to its `SLOT` property (the one it references, else the one named like it, else the only one left), and an instance's slot holds the instance's own content, kept across syncs, moves of the mains and saving, unless the instance's property value is the main's default content (without values, a slot that holds layers keeps them). Instances in slot content link to their own mains. Slot content limits, preferred-only and preferred components are warnings. Synthetic files only. Numbers unchanged |
 | 2026-10-17 | minor | REST file JSON import reads grid track sizes from the CSS track strings `gridColumnsSizing` / `gridRowsSizing` (fixed px, fill fr, hug `auto`, `minmax(0, 1fr)`, `repeat()`; other tracks stay equal) (#465). Numbers unchanged |
 | 2026-10-17 | minor | The community batches #727 and #728 in the `.fig` row: instance identity and cached library components, overrides by key, text style precedence, grid track sizes, slot content, labels of connectors saved with their path, skip ink, paragraph options, list start numbers, vertical trim, per-point stroke joins, text on a path, image adjustments (also REST), images in the message; budgets from the file's size; the journal keeps no file bytes; the import report. Not read cut to what's left. A `.fig` copy from Save as. Pasted content: layers copied from another design app, best effort (tested only with clipboard HTML made from our own export), and images under Wayland (not run there). All on synthetic files: summary and hours unchanged |
diff --git a/docs/mcp.md b/docs/mcp.md
index c5ffe99f..828aaae7 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -292,7 +292,7 @@ Or in a project's `.mcp.json`:
 | `inspect_document {depth, allPages}` | The document as JSON (layer tree, styles, selection, history). |
 | `get_node {id, depth}` | One layer as JSON. |
 | `select {ids}` | Replace the selection (`[]` deselects). |
-| `export {ids, format, scale \| size, path?, bleed?, cropMarks?, bleedMarks?, cmyk?, contentsOnly?, includeBoundingBox?, svgOutlineText?, svgIdAttribute?, svgSimplifyStroke?}` | png, jpg, svg, webp, pdf, or `fig`: the whole file as `.fig`, experimental (see Exporting `.fig` files below); `size` is `2x`, `512w` or `512h`. The image covers what the layers paint (shadows towards their offset, strokes, unclipped children, a mask group's mask; hidden layers take no room; a slice is its area with everything under it); `contentsOnly: false` also draws every other layer showing in that area, `includeBoundingBox` exports the layers' own boxes; SVG: `svgOutlineText: false` keeps `<text>`, `svgIdAttribute` writes unique ids from layer names, `svgSimplifyStroke: false` writes every stroke as an outline. The same options go in export settings (`export.add` / `export.update`). PDF: frames one page each (sized in points), anything else together on one page; print options: `bleed` (points or a length like `"3mm"`, `"0.125in"`), crop and bleed marks, CMYK colour (see Exports below), also taken by `file.export`, `file.exportLayers`, `file.exportFramesPdf` and stored per export setting by `export.add` / `export.update`; `run_command` `file.exportFramesPdf {page?, path?}` writes every top-level frame of a page. Without `path`, images come back as MCP image content, SVG as text. Layers' own export settings: `run_command` with `export.add` / `export.update {index, size?, suffix?, format?}` / `export.remove` and `file.exportLayers {ids?, dir?, assets?}` (every layer once per setting, named `<layer><suffix>.<format>`, a slash in a layer name making a folder; `assets: true` exports the Inspect tab's assets instead: icons as SVG, images as PNG). |
+| `export {ids, format, scale \| size, path?, bleed?, cropMarks?, bleedMarks?, cmyk?, contentsOnly?, includeBoundingBox?, svgOutlineText?, svgIdAttribute?, svgSimplifyStroke?, vdCompat?}` | png, jpg, svg, webp, pdf, xml (an Android Vector Drawable: `svgIdAttribute` writes `android:name`, `vdCompat` is `bestEffort` (default: approximated with a warning), `exact` (left out with a warning) or `ignore` (no warnings: overlapping layer opacity dropped, even-odd fills kept as `fillType="evenOdd"`, diamond gradients left out), and the result lists `warnings` for what was changed or left out), or `fig`: the whole file as `.fig`, experimental (see Exporting `.fig` files below); `size` is `2x`, `512w` or `512h`. The image covers what the layers paint (shadows towards their offset, strokes, unclipped children, a mask group's mask; hidden layers take no room; a slice is its area with everything under it); `contentsOnly: false` also draws every other layer showing in that area, `includeBoundingBox` exports the layers' own boxes; SVG: `svgOutlineText: false` keeps `<text>`, `svgIdAttribute` writes unique ids from layer names, `svgSimplifyStroke: false` writes every stroke as an outline. The same options go in export settings (`export.add` / `export.update`). PDF: frames one page each (sized in points), anything else together on one page; print options: `bleed` (points or a length like `"3mm"`, `"0.125in"`), crop and bleed marks, CMYK colour (see Exports below), also taken by `file.export`, `file.exportLayers`, `file.exportFramesPdf` and stored per export setting by `export.add` / `export.update`; `run_command` `file.exportFramesPdf {page?, path?}` writes every top-level frame of a page. Without `path`, images come back as MCP image content, SVG as text, XML as text followed by `{format, bytes, warnings}`. Layers' own export settings: `run_command` with `export.add` / `export.update {index, size?, suffix?, format?}` / `export.remove` and `file.exportLayers {ids?, dir?, assets?}` (every layer once per setting, named `<layer><suffix>.<format>`, a slash in a layer name making a folder; `assets: true` exports the Inspect tab's assets instead: icons as SVG, images as PNG). |
 | `screenshot {ids?, scale?, maxSize?, window?}` | PNG of the page (with background) or of layers, scaled to fit `maxSize` (default 1600). `window: true` captures the app window in front when attached, a window id (see Windows below) that window. |
 | `open_file {path, variables?}` / `save_file {path?}` | Open `.figcraft`, `.json` (FigCraft JSON or REST API file JSON with its variables, see below), `.fig` (best effort, see below), `.svg` (see Importing SVG below) or an image; save as `.figcraft`. `open_file` returns `opened` (for a file opened anew, a `summary` of `name`, `pages`, `layers` and `images`, and `warnings` or `repairs`; a file that was already open just gives its `index`) and the document's `document` outline. |
 | `undo` / `redo` | Step through history. |
diff --git a/docs/roadmap.md b/docs/roadmap.md
index 8d63a469..782370de 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -1,6 +1,6 @@
 # FigCraft roadmap: milestones and what's next
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-17 · **Change:** minor (community batch #753: Selection colors, smart-selection spacing, a Present tab; community fixes from #524 up (55 PRs: `.fig` import fidelity, paste from other apps, the Actions palette, editor fixes, server limits) and a boolean-op crash guard; community fixes from #478 up and a control-channel fix (#589); recent files as cards with thumbnails on the home screen; community fixes: lost images reported on loading, SVG import budgets, Leptos code, full screen, server snapshots, owner-only preferences, ruzstd 0.9.1, layer cycle repair, batch rollback, Direct3D 12 on Windows, plugin metering; vector edit mode regions: hover hatch, selection and drag; repeat command recursion fix; the Layout panel's constrain-proportions link scales the other side, #220; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; `.fig` import, best effort; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~79%) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-18 · **Change:** minor (Android Vector Drawable export; community batch #753: Selection colors, smart-selection spacing, a Present tab; community fixes from #524 up (55 PRs: `.fig` import fidelity, paste from other apps, the Actions palette, editor fixes, server limits) and a boolean-op crash guard; community fixes from #478 up and a control-channel fix (#589); recent files as cards with thumbnails on the home screen; community fixes: lost images reported on loading, SVG import budgets, Leptos code, full screen, server snapshots, owner-only preferences, ruzstd 0.9.1, layer cycle repair, batch rollback, Direct3D 12 on Windows, plugin metering; vector edit mode regions: hover hatch, selection and drag; repeat command recursion fix; the Layout panel's constrain-proportions link scales the other side, #220; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; `.fig` import, best effort; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~79%) · **Target:** Figma Design (desktop app 126.10.7)
 
 Forward-looking plan. Where FigCraft stands today: [`ROADMAP.md`](../ROADMAP.md) and
 [`target-app-parity.md`](target-app-parity.md); the full ranked list: [`gaps.md`](gaps.md). Hours
@@ -73,6 +73,7 @@ blockers.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-18 | minor | M6 interop: Android Vector Drawable (XML) export (new L4 crate `figcraft-vectordrawable`), not on the incumbent's list. Numbers unchanged |
 | 2026-10-17 | minor | Community batch #753 (10 PRs): Selection colors for mixed selections (#403); smart-selection spacing fields and canvas handles (#402); a Present tab with device and scale controls (#537); adding auto layout to an empty frame keeps its size (#369); `node.set` applies auto layout keys to frames only and warns about font styles a family lacks (#603); canvas images on whole device pixels (#359); Adwaita window controls on Wayland without server decorations (#592, not run on GNOME or KDE by the maintainers); the keyboard shortcuts panel closes on the home screen (#548); macOS paste modifiers in tests (#750); credits column tests (#347). Numbers unchanged. |
 | 2026-10-17 | minor | Community fixes from #524 up (batches #727, #728, #733, #735, #736 and #729; 55 PRs) and a crash guard. `.fig` import: explicit instance identity, overrides by key, text style precedence, grid track sizes, slot content, connector labels, skip ink, paragraph options and hanging lists, list start numbers, vertical trim, per-point stroke joins, text on a path, image adjustments and embedded images; large files open within budgets from the file's own size; an import report after opening; imported bytes stay out of the command journal. Files and paste: save a copy as `.fig`; Cmd/Ctrl+V pastes images copied in other apps and layers copied from another design app (`edit.pasteDesignLayers`); paste over and paste properties; clipboard reads on Linux and the BSDs time out after 2 s. Editor: live font preview on hover; Shift+I and Resources open Assets; Shift-drag moves the selection; thin strokes take a nearby double-click; dropped points merge; Flatten keeps open paths; the Actions palette gets tabs, ranked search, a keyboard highlight and recents; the colour picker opens on a new fill or stroke; text strokes follow their alignment; selection highlights after line breaks; a draggable pages/layers divider; variant properties reorder by drag; submenus keep their hover with a safe triangle; menu actions that need a value ask for it; File ▸ Rename edits the name in place. Engine: bad paint indexes, non-finite geometry and pages in copy/cut are refused; a param naming a layer says so when it isn't one; a CLI script is one undo step and resolves `$step`. Server and collaboration: message limits follow `max_file_mb` (client capped at 1 GiB); a damaged generation field no longer drops flushed edits; the web build joins a session from a `#join=` link. Also Swedish command labels, Nix CI through the shared workflow, paint bounds once per render, and a guard that turns a panic inside the boolean-op library into bad input (the stroke draws unclipped). Numbers unchanged. |
 | 2026-10-16 | minor | Community fixes from #478 up (batches #591, #598, #602; 69 PRs) and a control-channel fix: a line that isn't JSON now ends a `--control` connection, so a web page can't drive the app through a browser request (#589). Highlights: page copies keep navigation, flows, prototype settings and guides; Find and Replace keeps line endings and case-insensitive matches; text hyperlinks survive import and export; recent colours record only what was picked; MCP screenshots respect `maxSize`; Swedish catalog (UI strings), Czech plurals; bounded canvas overscan while panning; Korean fallback at the run's weight; many vector-edit, guide, page and .fig round-trip fixes. Numbers unchanged |
diff --git a/docs/ui-parity.md b/docs/ui-parity.md
index 766284f1..1fdeea4e 100644
--- a/docs/ui-parity.md
+++ b/docs/ui-parity.md
@@ -1,6 +1,6 @@
 # UI and interaction parity
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-18 · **Change:** minor (a rename selects the whole name, so typing replaces it; Escape or Enter after a pen path stays on the same vector (#760); IME composition kept on through idle frames of a text edit, candidates at the caret (#747); Selection colors for mixed selections and smart-selection spacing (#753); submenus with a hover delay and a safe triangle; the Actions palette's tabs, ranked search, highlight and recents; menu items that ask for a value; editor fixes from the community batches; fields select their text on focus; Typography spacing icons support scrubbing (#373); CSS colour names in hex fields; the Small caps sample in Type settings drawn from capitals; recent files as cards; vector edit mode: hovering, hatching, selecting and dragging filled regions; home screen: Templates tab, first-run templates and Getting started tips; number fields: scrub rates, arrow steps, arithmetic with brackets, relative edits of mixed values; outline mode's hidden layers and object bounds; Hide when publishing; cursors per tool and modifier; panel widths; dark pages for files made in the dark theme; drag threshold and double-clicks into text in groups; rotation origin on Alt+R and placing with Enter: no documented shortcut missing; keyboard shortcut parity suite and bindings; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and the vector edit tail; canvas navigation, guides and grids behaviour suite and fixes; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; layers panel keyboard: F2 rename, Shift+F10 context menu, F8 box selection; selection and transform behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; boolean hit testing on the result, group drags, frame outlines and slices; outlines for the selection, mask outlines; arc fields, live boolean editing, shape builder on strokes, one-sided widths) · **Target:** Figma Design UI3 (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-18 · **Change:** minor (an XML (Android Vector Drawable) export format; a rename selects the whole name, so typing replaces it; Escape or Enter after a pen path stays on the same vector (#760); IME composition kept on through idle frames of a text edit, candidates at the caret (#747); Selection colors for mixed selections and smart-selection spacing (#753); submenus with a hover delay and a safe triangle; the Actions palette's tabs, ranked search, highlight and recents; menu items that ask for a value; editor fixes from the community batches; fields select their text on focus; Typography spacing icons support scrubbing (#373); CSS colour names in hex fields; the Small caps sample in Type settings drawn from capitals; recent files as cards; vector edit mode: hovering, hatching, selecting and dragging filled regions; home screen: Templates tab, first-run templates and Getting started tips; number fields: scrub rates, arrow steps, arithmetic with brackets, relative edits of mixed values; outline mode's hidden layers and object bounds; Hide when publishing; cursors per tool and modifier; panel widths; dark pages for files made in the dark theme; drag threshold and double-clicks into text in groups; rotation origin on Alt+R and placing with Enter: no documented shortcut missing; keyboard shortcut parity suite and bindings; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and the vector edit tail; canvas navigation, guides and grids behaviour suite and fixes; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; layers panel keyboard: F2 rename, Shift+F10 context menu, F8 box selection; selection and transform behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; boolean hit testing on the result, group drags, frame outlines and slices; outlines for the selection, mask outlines; arc fields, live boolean editing, shape builder on strokes, one-sided widths) · **Target:** Figma Design UI3 (desktop app 126.10.7)
 
 Fine canvas control is what Figma users feel first: handles, snapping, nudging, modifier keys,
 drag behaviour, numeric precision. This checklist covers the tools, gestures and panels. Status:
@@ -172,6 +172,7 @@ in the table. `crates/ui-egui/src/shortcut_keys_tests.rs` drives the keys a look
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-18 | minor | Export: an "XML" format (Android Vector Drawable, said on hover) in the Export section's format menu, with "Include id attribute" and a compatibility choice (best effort, exact only, ignore unsupported) in its settings, and an XML preset in File ▸ Export…; the export toast says when content was changed or left out. Numbers unchanged |
 | 2026-10-18 | minor | A rename (layers double-click, F2, File ▸ Rename, a page) selects the whole name in the frame its field first draws, so the first key replaces the name instead of being appended. Checked in the app on Windows over the control channel |
 | 2026-10-17 | minor | Escape or Enter while the pen draws ends the path and keeps its vector in edit mode with the pen, so the next path is drawn into the same layer (unconnected); another Escape leaves edit mode (#760). Entering edit mode on a layer that already is a vector no longer records an empty undo step. Numbers unchanged |
 | 2026-10-17 | minor | Text layers keep the platform IME on for every frame of an edit, not only frames with input (an idle frame turned it off and macOS dropped each composition, #747); the candidate window opens at the caret instead of the canvas corner; keys pressed while composing go to the IME |

From 79d436a469da35088041de73906c26de8ec38d71 Mon Sep 17 00:00:00 2001
From: tylerjenningsw <tylerjennings2@outlook.com>
Date: Wed, 14 Oct 2026 12:23:58 -0400
Subject: [PATCH 07/59] perf(canvas): preview cold zoom and page transitions
 once they run long (M8)

Whether a zoom got a preview rested on the previous render from
scratch, so the first render, another page or file, and a zoom from a
quick view to a heavy one came without one: the page colour showed
until the full render was done.

Rendering every such preview up front would cost 8-56% of a full render
(bench pages of 1k-50k layers at 2880x1800; per-layer costs dominate
large pages). Instead the render thread arms a watchdog thread as it
starts a render from scratch without a preview; once that render has
run past 12 ms the watchdog renders the preview beside it, on one core
while the full render keeps the others, and sends it unless the full
image is done. Quick renders cost nothing and never flash a preview.
Warm slow zooms keep the preview first, which keeps up with a gesture.

With two threads sending, finished images carry their request's
number: a poll takes the newest request's, and of one request the
refined image; the canvas never shows a preview over the refined image
of its own or a newer request.

Refs #295
---
 crates/ui-egui/src/canvas.rs             |  16 +++-
 crates/ui-egui/src/render_worker.rs      | 115 +++++++++++++++++++----
 crates/ui-egui/src/zoom_preview_tests.rs | 115 +++++++++++++++++++++--
 3 files changed, 213 insertions(+), 33 deletions(-)

diff --git a/crates/ui-egui/src/canvas.rs b/crates/ui-egui/src/canvas.rs
index 49163986..6cd68c34 100644
--- a/crates/ui-egui/src/canvas.rs
+++ b/crates/ui-egui/src/canvas.rs
@@ -23,6 +23,8 @@ pub struct CanvasState {
     tex_of: Option<(u64, NodeId)>,
     /// The texture is a coarse preview (see [`crate::render_worker`]).
     pub tex_coarse: bool,
+    /// The request the texture answers ([`crate::render_worker::Done::seq`]).
+    tex_seq: u64,
     submitted: Option<JobKey>,
     /// The view of the last render asked for.
     want_view: Option<figcraft_render::View>,
@@ -58,6 +60,7 @@ impl Default for CanvasState {
             tex_view: None,
             tex_of: None,
             tex_coarse: false,
+            tex_seq: 0,
             submitted: None,
             want_view: None,
             render_work: None,
@@ -219,6 +222,7 @@ pub fn show(app: &mut FigApp, ui: &mut Ui, worker: &mut Worker) {
         app.canvas.tex_view = Some(done.view);
         app.canvas.tex_of = Some((done.uid, done.page));
         app.canvas.tex_coarse = done.coarse;
+        app.canvas.tex_seq = done.seq;
     }
     let painter = ui.painter_at(rect);
     let t = Tokens::get(&ctx);
@@ -321,14 +325,18 @@ fn describe_box([x0, y0, x1, y1]: [f64; 4]) -> String {
 }
 
 /// Whether a finished render goes on screen: an image of the file and page shown (`shown`), and
-/// not a coarse preview over a refined image that already shows the whole view asked for at its
-/// zoom (the same zoom elsewhere on the page is no such image).
+/// not a coarse preview over a refined image of the same or a newer request, or one that already
+/// shows the whole view asked for at its zoom (the same zoom elsewhere on the page is no such
+/// image).
 fn shows(c: &CanvasState, done: &Done, shown: Option<(u64, NodeId)>) -> bool {
     if shown != Some((done.uid, done.page)) {
         return false;
     }
-    let refined_here = !c.tex_coarse
-        && c.tex_of == shown
+    let refined = !c.tex_coarse && c.tex_of == shown;
+    if done.coarse && refined && done.seq <= c.tex_seq {
+        return false;
+    }
+    let refined_here = refined
         && c.tex_view
             .as_ref()
             .zip(c.want_view.as_ref())
diff --git a/crates/ui-egui/src/render_worker.rs b/crates/ui-egui/src/render_worker.rs
index e2fb9a20..4929e3ac 100644
--- a/crates/ui-egui/src/render_worker.rs
+++ b/crates/ui-egui/src/render_worker.rs
@@ -8,6 +8,10 @@
 //! whole view is first rendered coarsely ([`PREVIEW_FACTOR`] times fewer pixels each way, kept
 //! apart from the full image so pans and edits still build on it), then refined unless a newer
 //! request is already waiting.
+//! Without a measure of the new render (the first one, another page or file, a zoom after quick
+//! renders) nothing is spent up front: on the desktop a watchdog thread renders the preview once
+//! the render from scratch has run past [`PREVIEW_AFTER_MS`], beside it (the full render keeps the
+//! other cores), and drops it if the full image is there first.
 
 use std::sync::Arc;
 
@@ -19,7 +23,7 @@ use web_time::Instant;
 
 /// A preview has this many times fewer pixels each way than the view it stands in for.
 pub const PREVIEW_FACTOR: f64 = 4.0;
-/// Full renders quicker than this (about a frame) show without a preview first.
+/// Full renders quicker than this (about a frame) show without a preview.
 pub const PREVIEW_AFTER_MS: f64 = 12.0;
 
 #[derive(Clone)]
@@ -60,6 +64,8 @@ pub struct Done {
     pub coarse: bool,
     /// [`Job::at`].
     pub at: Instant,
+    /// The request it answers, numbered by the worker in order (0 outside a worker).
+    pub seq: u64,
 }
 
 /// A render of a document in `profile` as a texture image for the screen (sRGB).
@@ -103,7 +109,7 @@ fn run(job: &Job, view: &View, retained: &mut Retained, coarse: bool) -> Option<
         mark_outside_srgb(&mut image, pix, job.doc.color_profile);
     }
     let ms = t0.elapsed().as_secs_f64() * 1000.0;
-    Some(Done { image, view, ms, work, uid: job.uid, page: job.page, coarse, at: job.at })
+    Some(Done { image, view, ms, work, uid: job.uid, page: job.page, coarse, at: job.at, seq: 0 })
 }
 
 /// `view` with [`PREVIEW_FACTOR`] times fewer pixels each way, showing at least the same area.
@@ -137,13 +143,21 @@ impl Renders {
         Self { full: Retained::default(), preview: Retained::default(), last: None, full_ms: 0.0, preview_after_ms: ms }
     }
 
-    /// Whether `job` gets a preview first: the kept image is of another zoom, page or file (so the
-    /// full render starts from scratch) and those have been slow. The first render has no
-    /// measure yet and comes without one.
+    /// Whether `job` is a render from scratch: the kept image is of another zoom, page or file, or
+    /// there is none.
+    fn starts_over(&self, job: &Job) -> bool {
+        self.last.is_none_or(|(uid, page, scale)| uid != job.uid || page != job.page || scale.to_bits() != job.view.scale.to_bits())
+    }
+
+    /// Whether `job` gets a preview first: it renders from scratch and those have been slow on a
+    /// page already drawn (the first render has no measure).
     fn wants_preview(&self, job: &Job) -> bool {
-        job.zoom_preview
-            && self.full_ms >= self.preview_after_ms
-            && self.last.is_some_and(|(uid, page, scale)| uid != job.uid || page != job.page || scale.to_bits() != job.view.scale.to_bits())
+        job.zoom_preview && self.last.is_some() && self.full_ms >= self.preview_after_ms && self.starts_over(job)
+    }
+
+    /// Whether `job` should get a preview should its render run long: from scratch, with none first.
+    pub fn wants_late_preview(&self, job: &Job) -> bool {
+        job.zoom_preview && self.starts_over(job) && !self.wants_preview(job)
     }
 
     /// The coarse preview of the whole of `job`'s view, when one should come first.
@@ -151,8 +165,7 @@ impl Renders {
         if !self.wants_preview(job) {
             return None;
         }
-        let view = coarse_view(&job.view);
-        guarded(&mut self.preview, |r| run(job, &view, r, true))
+        preview_with(job, &mut self.preview)
     }
 
     /// The image of `job`'s view, built on the kept one where it can be.
@@ -168,6 +181,26 @@ impl Renders {
     }
 }
 
+/// The coarse preview of the whole of `job`'s view, kept in `retained`.
+pub fn preview_with(job: &Job, retained: &mut Retained) -> Option<Done> {
+    let view = coarse_view(&job.view);
+    guarded(retained, |r| run(job, &view, r, true))
+}
+
+/// `d` numbered as the answer to request `seq`.
+fn answering(d: Done, seq: u64) -> Done {
+    Done { seq, ..d }
+}
+
+/// Of two finished renders, the one to show: the newer request's, and of one request's the refined
+/// image (the watchdog's preview can arrive after it).
+pub fn better(a: Option<Done>, b: Done) -> Done {
+    match a {
+        Some(a) if a.seq > b.seq || (a.seq == b.seq && !a.coarse && b.coarse) => a,
+        _ => b,
+    }
+}
+
 /// Run `f` on `retained`; after a panic, forget the image it may have left half drawn.
 fn guarded(retained: &mut Retained, f: impl FnOnce(&mut Retained) -> Option<Done>) -> Option<Done> {
     match std::panic::catch_unwind(std::panic::AssertUnwindSafe(|| f(retained))) {
@@ -199,6 +232,40 @@ impl Worker {
         let done_with = finished.clone();
         // The window that renders with it (each window has its own worker).
         let viewport = ctx.viewport_id();
+        // The request being rendered from scratch without a preview, and when it started, for the
+        // watchdog; the newest request refined so far.
+        let (watch, watched) = std::sync::mpsc::channel::<(u64, Job, std::time::Instant)>();
+        let refined = Arc::new(std::sync::atomic::AtomicU64::new(0));
+        let refined_seen = refined.clone();
+        let (preview_tx, preview_ctx) = (done_tx.clone(), ctx.clone());
+        let watchdog = std::thread::Builder::new().name("figcraft-render-preview".into()).spawn(move || {
+            let mut retained = Retained::default();
+            let after = std::time::Duration::from_secs_f64(PREVIEW_AFTER_MS / 1000.0);
+            while let Ok((mut seq, mut job, mut started)) = watched.recv() {
+                // Wait out the threshold; a newer arming means that render is over.
+                loop {
+                    match watched.recv_timeout(after.saturating_sub(started.elapsed())) {
+                        Ok(newer) => (seq, job, started) = newer,
+                        Err(std::sync::mpsc::RecvTimeoutError::Timeout) => break,
+                        Err(std::sync::mpsc::RecvTimeoutError::Disconnected) => return,
+                    }
+                }
+                let still_rendering = || refined_seen.load(std::sync::atomic::Ordering::Acquire) < seq;
+                if !still_rendering() {
+                    continue;
+                }
+                let Some(d) = preview_with(&job, &mut retained) else { continue };
+                if still_rendering() {
+                    if preview_tx.send(answering(d, seq)).is_err() {
+                        break;
+                    }
+                    preview_ctx.request_repaint_of(viewport);
+                }
+            }
+        });
+        if let Err(e) = watchdog {
+            log::error!("render preview thread: {e}");
+        }
         let spawned = std::thread::Builder::new().name("figcraft-render".into()).spawn(move || {
             let mut renders = Renders::default();
             let mut next = None;
@@ -209,7 +276,7 @@ impl Worker {
                     (seq, job) = newer;
                 }
                 if let Some(d) = renders.preview(&job) {
-                    if done_tx.send(d).is_err() {
+                    if done_tx.send(answering(d, seq)).is_err() {
                         break;
                     }
                     ctx.request_repaint_of(viewport);
@@ -219,8 +286,14 @@ impl Worker {
                         continue;
                     }
                 }
-                if let Some(d) = renders.refine(&job)
-                    && done_tx.send(d).is_err()
+                if renders.wants_late_preview(&job) {
+                    // Without the watchdog (it failed to start) there is just no preview.
+                    let _ = watch.send((seq, job.clone(), std::time::Instant::now()));
+                }
+                let done = renders.refine(&job);
+                refined.store(seq, std::sync::atomic::Ordering::Release);
+                if let Some(d) = done
+                    && done_tx.send(answering(d, seq)).is_err()
                 {
                     break;
                 }
@@ -246,12 +319,13 @@ impl Worker {
         self.finished.load(std::sync::atomic::Ordering::Acquire) < self.submitted
     }
 
+    /// The best of the renders finished since the last poll ([`better`]).
     pub fn poll(&mut self) -> Option<Done> {
-        let mut last = None;
+        let mut best = None;
         while let Ok(d) = self.rx.try_recv() {
-            last = Some(d);
+            best = Some(better(best, d));
         }
-        last
+        best
     }
 }
 
@@ -261,6 +335,8 @@ impl Worker {
 pub struct Inline {
     ctx: egui::Context,
     pending: Option<Job>,
+    /// Requests submitted so far.
+    submitted: u64,
     previewed: bool,
     renders: Renders,
 }
@@ -270,10 +346,11 @@ pub type Worker = Inline;
 
 impl Inline {
     pub fn new(ctx: egui::Context) -> Self {
-        Self { ctx, pending: None, previewed: false, renders: Renders::default() }
+        Self { ctx, pending: None, submitted: 0, previewed: false, renders: Renders::default() }
     }
     pub fn submit(&mut self, job: Job) {
         self.pending = Some(job);
+        self.submitted += 1;
         self.previewed = false;
     }
     pub fn in_flight(&self) -> bool {
@@ -284,11 +361,11 @@ impl Inline {
             self.previewed = true;
             if let Some(d) = self.pending.as_ref().and_then(|job| self.renders.preview(job)) {
                 self.ctx.request_repaint();
-                return Some(d);
+                return Some(answering(d, self.submitted));
             }
         }
         let job = self.pending.take()?;
-        self.renders.refine(&job)
+        self.renders.refine(&job).map(|d| answering(d, self.submitted))
     }
 }
 
diff --git a/crates/ui-egui/src/zoom_preview_tests.rs b/crates/ui-egui/src/zoom_preview_tests.rs
index 0fcd9a29..f297277c 100644
--- a/crates/ui-egui/src/zoom_preview_tests.rs
+++ b/crates/ui-egui/src/zoom_preview_tests.rs
@@ -2,7 +2,9 @@
 //! then the refined image, which matches a render from scratch; pans and edits still build on the
 //! kept image; previews never replace a refined image that already shows the whole view asked
 //! for, and no image of another file or page goes on screen. The browser's inline worker previews
-//! by the same measure as the render thread.
+//! by the same measure as the render thread. Renders from scratch with no measure to go by (the
+//! first, another page, a zoom after quick renders) get a preview on the desktop only if they run
+//! long, from the watchdog beside the render thread.
 
 use std::sync::Arc;
 
@@ -13,7 +15,9 @@ use figcraft_render::{View, Work};
 use serde_json::json;
 
 use super::{CanvasState, shows};
-use crate::render_worker::{Done, Inline, Job, PREVIEW_AFTER_MS, PREVIEW_FACTOR, Renders, coarse_view, render_now};
+use figcraft_render::Retained;
+
+use crate::render_worker::{Done, Inline, Job, PREVIEW_AFTER_MS, PREVIEW_FACTOR, Renders, Worker, better, coarse_view, preview_with, render_now};
 
 /// A page of ellipses with a rectangle on top; the session and the rectangle.
 fn document() -> (Session, NodeId) {
@@ -225,9 +229,9 @@ fn the_canvas_shows_images_of_its_own_page_and_never_a_coarser_one_of_its_view()
     let here = Some((ds.uid, ds.page));
     let mut r = Renders::with_threshold(0.0);
     let near = job(&ds.doc, ds.page, ds.uid, view_at((300.0, 200.0), 2.0, 200, 150));
-    let refined = r.refine(&near).unwrap();
+    let refined = Done { seq: 1, ..r.refine(&near).unwrap() };
     let far = job(&ds.doc, ds.page, ds.uid, view_at((300.0, 200.0), 0.5, 200, 150));
-    let preview = r.preview(&far).unwrap();
+    let preview = Done { seq: 2, ..r.preview(&far).unwrap() };
 
     let mut c = CanvasState { want_view: Some(near.view.clone()), ..Default::default() };
     assert!(shows(&c, &refined, here));
@@ -235,7 +239,7 @@ fn the_canvas_shows_images_of_its_own_page_and_never_a_coarser_one_of_its_view()
     assert!(!shows(&c, &refined, Some((ds.uid, NodeId(ds.page.0 + 1)))), "another page");
     assert!(!shows(&c, &refined, None), "no file open");
     // Showing the refined image of the view asked for: a preview arriving late stays off.
-    (c.tex_view, c.tex_of, c.tex_coarse) = (Some(refined.view.clone()), here, false);
+    (c.tex_view, c.tex_of, c.tex_coarse, c.tex_seq) = (Some(refined.view.clone()), here, false, refined.seq);
     assert!(!shows(&c, &preview, here));
     // Once the view asked for moves on, the preview is the better match.
     c.want_view = Some(far.view.clone());
@@ -246,6 +250,96 @@ fn the_canvas_shows_images_of_its_own_page_and_never_a_coarser_one_of_its_view()
     assert!(shows(&c, &preview, here));
     (c.tex_coarse, c.tex_of) = (false, Some((ds.uid, NodeId(ds.page.0 + 1))));
     assert!(shows(&c, &preview, here));
+    // Never over the refined image of its own request or a newer one (the watchdog's preview can
+    // come after the refined image), even once the view asked for moved on.
+    (c.tex_of, c.want_view) = (here, Some(far.view.clone()));
+    for seq in [preview.seq, preview.seq + 1] {
+        c.tex_seq = seq;
+        assert!(!shows(&c, &preview, here), "refined image of request {seq}");
+    }
+}
+
+#[test]
+fn a_poll_takes_the_newest_request_and_of_one_request_the_refined_image() {
+    let (s, _) = document();
+    let ds = s.ds().unwrap();
+    let v = job(&ds.doc, ds.page, ds.uid, view_at((300.0, 200.0), 0.5, 64, 48));
+    let preview = |seq| Done { seq, ..preview_with(&v, &mut Retained::default()).unwrap() };
+    let refined = |seq| Done { seq, ..render_now(&v).unwrap() };
+    let pick = |order: Vec<Done>| order.into_iter().fold(None, |best, d| Some(better(best, d))).map(|d| (d.seq, d.coarse));
+    assert_eq!(pick(vec![refined(3), preview(4)]), Some((4, true)), "a newer request's preview over an older refined image");
+    assert_eq!(pick(vec![preview(3), refined(3)]), Some((3, false)));
+    assert_eq!(pick(vec![refined(3), preview(3)]), Some((3, false)), "the watchdog's preview after its refined image");
+    assert_eq!(pick(vec![refined(4), preview(4), preview(3)]), Some((4, false)));
+    assert_eq!(pick(vec![preview(4)]), Some((4, true)));
+}
+
+#[test]
+fn renders_from_scratch_with_nothing_to_go_by_get_a_late_preview() {
+    let (mut s, _) = document();
+    let (doc, page, uid) = {
+        let ds = s.ds().unwrap();
+        (ds.doc.clone(), ds.page, ds.uid)
+    };
+    let at = |doc: &Arc<Document>, page, uid, scale| job(doc, page, uid, view_at((300.0, 200.0), scale, 200, 150));
+    // Renders that have been quick: nothing up front, a preview only should one run long.
+    let mut r = Renders::with_threshold(f64::INFINITY);
+    let first = at(&doc, page, uid, 1.0);
+    assert!(r.wants_late_preview(&first) && r.preview(&first).is_none(), "the first render");
+    r.refine(&first).unwrap();
+    assert!(r.wants_late_preview(&at(&doc, page, uid, 4.0)), "a zoom after quick renders");
+    assert!(r.wants_late_preview(&at(&doc, page, uid + 1, 1.0)), "another file");
+    let mut panned = first.clone();
+    panned.view.origin.0 += 5.0;
+    assert!(!r.wants_late_preview(&panned), "a pan builds on the kept image");
+    let mut pixels = at(&doc, page, uid, 4.0);
+    pixels.zoom_preview = false;
+    assert!(!r.wants_late_preview(&pixels), "pixel preview");
+    s.execute("page.add", &json!({})).unwrap();
+    let ds = s.ds().unwrap();
+    assert!(r.wants_late_preview(&at(&ds.doc, ds.page, uid, 1.0)), "another page");
+    // Renders that have been slow: the preview comes first instead.
+    let mut slow = Renders::with_threshold(0.0);
+    slow.refine(&first).unwrap();
+    let zoom = at(&doc, page, uid, 4.0);
+    assert!(!slow.wants_late_preview(&zoom) && slow.preview(&zoom).is_some());
+}
+
+/// Every image `w` hands out until it has nothing left in flight: (request, coarse).
+fn drain(w: &mut Worker) -> Vec<(u64, bool)> {
+    let start = std::time::Instant::now();
+    let mut got = vec![];
+    while w.in_flight() || got.is_empty() {
+        assert!(start.elapsed() < std::time::Duration::from_secs(60), "the render never finished");
+        if let Some(d) = w.poll() {
+            got.push((d.seq, d.coarse));
+        }
+        std::thread::sleep(std::time::Duration::from_millis(1));
+    }
+    got.extend(w.poll().map(|d| (d.seq, d.coarse)));
+    got
+}
+
+#[test]
+fn a_slow_first_render_gets_a_preview_beside_it_and_a_quick_one_none() {
+    // Slow: 2400² with glass and a background blur over the page, rendered from scratch.
+    let (mut s, rect) = document();
+    s.execute("effect.add", &json!({"ids": [rect], "type": "GLASS"})).unwrap();
+    s.execute("effect.add", &json!({"ids": [rect], "type": "BACKGROUND_BLUR"})).unwrap();
+    let ds = s.ds().unwrap();
+    let slow = job(&ds.doc, ds.page, ds.uid, view_at((300.0, 200.0), 2.0, 2400, 2400));
+    let fresh = render_now(&slow).unwrap();
+    assert!(fresh.ms > 50.0, "slow enough for a preview to beat it: {} ms", fresh.ms);
+    let mut w = Worker::new(egui::Context::default());
+    w.submit(slow);
+    assert_eq!(drain(&mut w), [(1, true), (1, false)], "the preview while it renders, then the refined image");
+    // Quick: a small view of a few shapes on a fresh worker (the slow render above would make the
+    // next zoom get its preview first).
+    let (s, _) = document();
+    let ds = s.ds().unwrap();
+    let mut w = Worker::new(egui::Context::default());
+    w.submit(job(&ds.doc, ds.page, ds.uid, view_at((300.0, 200.0), 0.5, 120, 90)));
+    assert_eq!(drain(&mut w), [(1, false)], "done before the threshold: no preview");
 }
 
 #[test]
@@ -260,24 +354,25 @@ fn a_preview_replaces_a_refined_image_of_the_same_zoom_elsewhere_on_the_page() {
     let b = job(&ds.doc, ds.page, ds.uid, view((0.0, 0.0), 8.0));
     let a2 = job(&ds.doc, ds.page, ds.uid, view((-700.0, -525.0), 1.0));
     let mut r = Renders::with_threshold(0.0);
-    let refined_a = r.refine(&a).unwrap();
+    let refined_a = Done { seq: 1, ..r.refine(&a).unwrap() };
     // The canvas shows A; B is asked for, then A' while B renders. The thread finishes B, then
     // previews A' before the canvas polls: the queue holds [refined B, preview A'], and a poll
-    // takes the last.
-    let queue = [r.refine(&b).unwrap(), r.preview(&a2).expect("A' is a new zoom for the thread")];
-    let polled = queue.last().unwrap();
+    // takes the newer request's.
+    let queue = [Done { seq: 2, ..r.refine(&b).unwrap() }, Done { seq: 3, ..r.preview(&a2).expect("A' is a new zoom for the thread") }];
+    let polled = &queue.into_iter().fold(None, |best, d| Some(better(best, d))).unwrap();
     assert!(polled.coarse && covers(&polled.view, &a2.view));
     let c = CanvasState {
         tex_view: Some(refined_a.view.clone()),
         tex_of: here,
         tex_coarse: false,
+        tex_seq: refined_a.seq,
         want_view: Some(a2.view.clone()),
         ..Default::default()
     };
     assert!(shows(&c, polled, here), "A at the same zoom shows 1/64 of A': the preview of all of it goes on");
     // Once A' itself is refined on screen, a preview of it would be a step down.
     let refined_a2 = r.refine(&a2).unwrap();
-    let c = CanvasState { tex_view: Some(refined_a2.view.clone()), ..c };
+    let c = CanvasState { tex_view: Some(refined_a2.view.clone()), tex_seq: 3, ..c };
     assert!(!shows(&c, polled, here));
 }
 

From f80bdb634d1f3fc5ef81f536e0f017be2143d84b Mon Sep 17 00:00:00 2001
From: tylerjenningsw <tylerjennings2@outlook.com>
Date: Wed, 14 Oct 2026 12:23:59 -0400
Subject: [PATCH 08/59] docs: zoom previews for cold transitions (M8)

Refs #295
---
 docs/gaps.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/gaps.md b/docs/gaps.md
index 9b1a770c..9081759e 100644
--- a/docs/gaps.md
+++ b/docs/gaps.md
@@ -236,7 +236,9 @@ No alpha blockers: the alpha gate in [`roadmap.md`](roadmap.md#alpha-gate) passe
 - **Missing:** GPU rendering of the canvas. FigCraft renders with tiny-skia on the CPU (banded,
   parallel, retained) and shows the image through wgpu. A new zoom can't reuse the retained
   image; when renders from scratch take a frame or more, the whole view is previewed with a
-  sixteenth of the pixels first, then refined.
+  sixteenth of the pixels first, then refined. With no measure to go by (the first render, another
+  page, a zoom after quick renders), a watchdog thread previews any such render still running
+  after 12 ms (desktop only; the browser renders inline).
 - **Landed (2026-10-15):** a bounded render margin is reused during panning and refilled before
   the visible view reaches its edge. The extra rendered area is capped at 1.6× visible pixels;
   this reduces blank strips without changing the CPU renderer.

From 20f7d4eb2c58206478224a57b1bd6c3a0915576b Mon Sep 17 00:00:00 2001
From: tylerjenningsw <tylerjennings2@outlook.com>
Date: Thu, 15 Oct 2026 10:08:41 -0400
Subject: [PATCH 09/59] test(canvas): grow the cold-preview scene instead of
 assuming a 50 ms render (M8)

The threaded test asserted a fixed glass scene renders in over 50 ms,
which would flake on a fast machine or once the glass speedups land.
It now grows the scene until the full render takes at least twice the
threshold plus the preview's own time, so the watchdog's preview comes
first with a margin wherever it runs.

Refs #295
---
 crates/ui-egui/src/zoom_preview_tests.rs | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/crates/ui-egui/src/zoom_preview_tests.rs b/crates/ui-egui/src/zoom_preview_tests.rs
index f297277c..36da28f8 100644
--- a/crates/ui-egui/src/zoom_preview_tests.rs
+++ b/crates/ui-egui/src/zoom_preview_tests.rs
@@ -322,14 +322,21 @@ fn drain(w: &mut Worker) -> Vec<(u64, bool)> {
 
 #[test]
 fn a_slow_first_render_gets_a_preview_beside_it_and_a_quick_one_none() {
-    // Slow: 2400² with glass and a background blur over the page, rendered from scratch.
-    let (mut s, rect) = document();
-    s.execute("effect.add", &json!({"ids": [rect], "type": "GLASS"})).unwrap();
-    s.execute("effect.add", &json!({"ids": [rect], "type": "BACKGROUND_BLUR"})).unwrap();
-    let ds = s.ds().unwrap();
-    let slow = job(&ds.doc, ds.page, ds.uid, view_at((300.0, 200.0), 2.0, 2400, 2400));
-    let fresh = render_now(&slow).unwrap();
-    assert!(fresh.ms > 50.0, "slow enough for a preview to beat it: {} ms", fresh.ms);
+    // Slow: a render from scratch that runs past the threshold, then the preview, with as much
+    // again to spare, so the preview comes first however fast this machine and the renderer are.
+    let view = view_at((300.0, 200.0), 2.0, 1200, 1200);
+    let mut want = 4.0 * PREVIEW_AFTER_MS;
+    let slow = loop {
+        let s = slow_scene(std::slice::from_ref(&view), want);
+        let ds = s.ds().unwrap();
+        let slow = job(&ds.doc, ds.page, ds.uid, view.clone());
+        let (full, preview) = (render_now(&slow).unwrap().ms, preview_with(&slow, &mut Retained::default()).unwrap().ms);
+        if full >= 2.0 * (PREVIEW_AFTER_MS + preview) {
+            break slow;
+        }
+        assert!(want < 64.0 * PREVIEW_AFTER_MS, "previews keep up with full renders: {preview} ms of {full} ms");
+        want *= 2.0;
+    };
     let mut w = Worker::new(egui::Context::default());
     w.submit(slow);
     assert_eq!(drain(&mut w), [(1, true), (1, false)], "the preview while it renders, then the refined image");

From 503b6d606d9825e5c7bfa5ec937d35de7e4cb0dd Mon Sep 17 00:00:00 2001
From: NetterSilver <133535268+Silvertree2010@users.noreply.github.com>
Date: Wed, 21 Oct 2026 01:27:12 +0200
Subject: [PATCH 10/59] Refuse to save documents containing NaN or infinite
 numbers

Found while testing crates/format/src/lib.rs:256 (to_json/write_json/save_bytes) and :323 (parse_json)

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 crates/format/src/lib.rs | 186 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 186 insertions(+)

diff --git a/crates/format/src/lib.rs b/crates/format/src/lib.rs
index 9f7e51bc..441b6861 100644
--- a/crates/format/src/lib.rs
+++ b/crates/format/src/lib.rs
@@ -252,13 +252,184 @@ fn image_index<S: Serializer>(images: &&BTreeMap<String, ImageData>, s: S) -> Re
     s.collect_seq(images.iter().map(|(hash, i)| Entry { hash, width: i.width, height: i.height }))
 }
 
+/// A serializer that writes nothing and fails on the first NaN or infinite float. JSON has no
+/// such numbers (`serde_json` writes `null`, which the reader rejects), so a document holding
+/// one is refused instead of saved as an unreadable file.
+struct FiniteCheck;
+
+impl serde::ser::Error for FiniteCheckError {
+    fn custom<T: std::fmt::Display>(msg: T) -> Self {
+        Self(msg.to_string())
+    }
+}
+
+#[derive(Debug)]
+struct FiniteCheckError(String);
+
+impl std::fmt::Display for FiniteCheckError {
+    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
+        f.write_str(&self.0)
+    }
+}
+
+impl std::error::Error for FiniteCheckError {}
+
+macro_rules! check_skip {
+    ($($name:ident($ty:ty)),* $(,)?) => {
+        $(fn $name(self, _: $ty) -> Result<(), FiniteCheckError> { Ok(()) })*
+    };
+}
+
+impl Serializer for FiniteCheck {
+    type Ok = ();
+    type Error = FiniteCheckError;
+    type SerializeSeq = FiniteCheck;
+    type SerializeTuple = FiniteCheck;
+    type SerializeTupleStruct = FiniteCheck;
+    type SerializeTupleVariant = FiniteCheck;
+    type SerializeMap = FiniteCheck;
+    type SerializeStruct = FiniteCheck;
+    type SerializeStructVariant = FiniteCheck;
+
+    check_skip!(
+        serialize_bool(bool),
+        serialize_i8(i8),
+        serialize_i16(i16),
+        serialize_i32(i32),
+        serialize_i64(i64),
+        serialize_u8(u8),
+        serialize_u16(u16),
+        serialize_u32(u32),
+        serialize_u64(u64),
+        serialize_i128(i128),
+        serialize_u128(u128),
+        serialize_char(char),
+        serialize_str(&str),
+        serialize_bytes(&[u8])
+    );
+
+    fn serialize_f32(self, v: f32) -> Result<(), FiniteCheckError> {
+        if v.is_finite() { Ok(()) } else { Err(FiniteCheckError(format!("cannot save a non-finite number ({v})"))) }
+    }
+    fn serialize_f64(self, v: f64) -> Result<(), FiniteCheckError> {
+        if v.is_finite() { Ok(()) } else { Err(FiniteCheckError(format!("cannot save a non-finite number ({v})"))) }
+    }
+    fn serialize_none(self) -> Result<(), FiniteCheckError> {
+        Ok(())
+    }
+    fn serialize_some<T: ?Sized + Serialize>(self, v: &T) -> Result<(), FiniteCheckError> {
+        v.serialize(self)
+    }
+    fn serialize_unit(self) -> Result<(), FiniteCheckError> {
+        Ok(())
+    }
+    fn serialize_unit_struct(self, _: &'static str) -> Result<(), FiniteCheckError> {
+        Ok(())
+    }
+    fn serialize_unit_variant(self, _: &'static str, _: u32, _: &'static str) -> Result<(), FiniteCheckError> {
+        Ok(())
+    }
+    fn serialize_newtype_struct<T: ?Sized + Serialize>(self, _: &'static str, v: &T) -> Result<(), FiniteCheckError> {
+        v.serialize(self)
+    }
+    fn serialize_newtype_variant<T: ?Sized + Serialize>(self, _: &'static str, _: u32, _: &'static str, v: &T) -> Result<(), FiniteCheckError> {
+        v.serialize(self)
+    }
+    fn serialize_seq(self, _: Option<usize>) -> Result<FiniteCheck, FiniteCheckError> {
+        Ok(FiniteCheck)
+    }
+    fn serialize_tuple(self, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
+        Ok(FiniteCheck)
+    }
+    fn serialize_tuple_struct(self, _: &'static str, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
+        Ok(FiniteCheck)
+    }
+    fn serialize_tuple_variant(self, _: &'static str, _: u32, _: &'static str, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
+        Ok(FiniteCheck)
+    }
+    fn serialize_map(self, _: Option<usize>) -> Result<FiniteCheck, FiniteCheckError> {
+        Ok(FiniteCheck)
+    }
+    fn serialize_struct(self, _: &'static str, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
+        Ok(FiniteCheck)
+    }
+    fn serialize_struct_variant(self, _: &'static str, _: u32, _: &'static str, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
+        Ok(FiniteCheck)
+    }
+}
+
+macro_rules! check_elements {
+    ($($trait:ident::$method:ident),* $(,)?) => {
+        $(impl serde::ser::$trait for FiniteCheck {
+            type Ok = ();
+            type Error = FiniteCheckError;
+            fn $method<T: ?Sized + Serialize>(&mut self, v: &T) -> Result<(), FiniteCheckError> {
+                v.serialize(FiniteCheck)
+            }
+            fn end(self) -> Result<(), FiniteCheckError> {
+                Ok(())
+            }
+        })*
+    };
+}
+
+check_elements!(
+    SerializeSeq::serialize_element,
+    SerializeTuple::serialize_element,
+    SerializeTupleStruct::serialize_field,
+    SerializeTupleVariant::serialize_field
+);
+
+impl serde::ser::SerializeMap for FiniteCheck {
+    type Ok = ();
+    type Error = FiniteCheckError;
+    fn serialize_key<T: ?Sized + Serialize>(&mut self, k: &T) -> Result<(), FiniteCheckError> {
+        k.serialize(FiniteCheck)
+    }
+    fn serialize_value<T: ?Sized + Serialize>(&mut self, v: &T) -> Result<(), FiniteCheckError> {
+        v.serialize(FiniteCheck)
+    }
+    fn end(self) -> Result<(), FiniteCheckError> {
+        Ok(())
+    }
+}
+
+impl serde::ser::SerializeStruct for FiniteCheck {
+    type Ok = ();
+    type Error = FiniteCheckError;
+    fn serialize_field<T: ?Sized + Serialize>(&mut self, _: &'static str, v: &T) -> Result<(), FiniteCheckError> {
+        v.serialize(FiniteCheck)
+    }
+    fn end(self) -> Result<(), FiniteCheckError> {
+        Ok(())
+    }
+}
+
+impl serde::ser::SerializeStructVariant for FiniteCheck {
+    type Ok = ();
+    type Error = FiniteCheckError;
+    fn serialize_field<T: ?Sized + Serialize>(&mut self, _: &'static str, v: &T) -> Result<(), FiniteCheckError> {
+        v.serialize(FiniteCheck)
+    }
+    fn end(self) -> Result<(), FiniteCheckError> {
+        Ok(())
+    }
+}
+
+/// Fail when the document holds a number JSON cannot represent.
+fn ensure_finite(doc: &Document) -> Result<(), FormatError> {
+    DocumentJson::new(doc).serialize(FiniteCheck).map_err(io_err)
+}
+
 /// Serialize the document (without images) to the JSON value stored in `document.json`.
 pub fn to_json(doc: &Document) -> Result<Value, FormatError> {
+    ensure_finite(doc)?;
     serde_json::to_value(DocumentJson::new(doc)).map_err(io_err)
 }
 
 /// Write the document (without images) as `document.json` content to `w`.
 pub fn write_json(doc: &Document, w: impl Write) -> Result<(), FormatError> {
+    ensure_finite(doc)?;
     serde_json::to_writer(w, &DocumentJson::new(doc)).map_err(io_err)
 }
 
@@ -808,6 +979,21 @@ mod tests {
         assert!(load_bytes(&json).is_ok());
     }
 
+    #[test]
+    fn non_finite_numbers_are_refused_at_save() {
+        let mut d = Document::new("NaN");
+        let p = d.first_page().unwrap();
+        let r = d.create(p, NodeKind::Rectangle, "R", 1.0, 2.0, 3.0, 4.0).unwrap();
+        assert!(save_bytes(&d, None).is_ok());
+        d.get_mut(r).unwrap().width = f64::NAN;
+        let e = save_bytes(&d, None).unwrap_err();
+        assert!(e.to_string().contains("non-finite"), "{e}");
+        d.get_mut(r).unwrap().width = 3.0;
+        d.get_mut(r).unwrap().opacity = f32::INFINITY;
+        let e = save_bytes(&d, None).unwrap_err();
+        assert!(e.to_string().contains("non-finite"), "{e}");
+    }
+
     #[test]
     fn garbage_is_an_error() {
         assert!(load_bytes(b"not a zip").is_err());

From 8787f462057ed73a6f5e3738ee7d3f5128d40e9a Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Fri, 16 Oct 2026 16:59:59 +0800
Subject: [PATCH 11/59] M6: a Vue code target (single-file components)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dev Mode generates React, Leptos, SwiftUI and Compose; a Vue project had to translate the HTML
instead. `inspect.code {language: "vue"}` now writes a single-file component: a `<template>`, a
`<script setup>` with `defineProps` and its defaults, and a `<style scoped>`.

A Vue template holds no arbitrary expressions, so what the web targets write as a braced
expression has its own spelling. Text is `{{ prop }}`, and braces in text are escaped; a boolean
property's layer carries `v-if="prop"` rather than a wrapper element; a slot becomes Vue's own
`<slot name="…">` with its fallback content, which takes no prop, and an instance's content in one
is a `<template #name>`. Variants switch on the root's `data-*` attributes, as on the web.

`codeConnect` links a component to its code as a single-file component: a default import, and a
quoted binding, so `:size={size}` gives `:size="Large"` and a component swap passes the component
itself. A value that needs escapes keeps them inside the quotes, where the attribute's own quotes
become `&quot;`.

`inspect.componentCode` kept a second copy of the code-language list, which is how Vue was missed
when `inspect.code` learned it; it now asks `code_connect::language`, the one list, as
`codeConnect` does.

Eleven tests in `vue_codegen_tests` and a `codeConnect` case; the Inspect panel's language picker
picks Vue up from `CodeLang::ALL`, and the language lists in the docs, the Dev Mode hint and its
thirteen catalogs name it.
---
 README.md                               |   2 +-
 crates/engine/src/code_connect.rs       |  36 +++--
 crates/engine/src/code_connect_tests.rs |  35 +++++
 crates/engine/src/codegen.rs            |  75 ++++++++--
 crates/engine/src/component_codegen.rs  |  91 ++++++++++--
 crates/engine/src/lib.rs                |   2 +
 crates/engine/src/playground.rs         |   4 +-
 crates/engine/src/vue_codegen_tests.rs  | 184 ++++++++++++++++++++++++
 crates/ui-egui/locales/cs.toml          |   2 +-
 crates/ui-egui/locales/de.toml          |   2 +-
 crates/ui-egui/locales/en.toml          |   2 +-
 crates/ui-egui/locales/es.toml          |   2 +-
 crates/ui-egui/locales/fr.toml          |   2 +-
 crates/ui-egui/locales/id.toml          |   2 +-
 crates/ui-egui/locales/ja.toml          |   2 +-
 crates/ui-egui/locales/ko.toml          |   2 +-
 crates/ui-egui/locales/pt-BR.toml       |   2 +-
 crates/ui-egui/locales/ru.toml          |   2 +-
 crates/ui-egui/locales/sv.toml          |   2 +-
 crates/ui-egui/locales/tr.toml          |   2 +-
 crates/ui-egui/locales/zh-Hans.toml     |   2 +-
 crates/ui-egui/src/dev_mode.rs          |   2 +-
 docs/dev-mode-parity.md                 |   4 +-
 docs/file-format-parity.md              |   2 +-
 docs/gaps.md                            |   2 +-
 docs/mcp.md                             |  29 ++--
 docs/target-app-parity.md               |   2 +-
 27 files changed, 431 insertions(+), 65 deletions(-)
 create mode 100644 crates/engine/src/vue_codegen_tests.rs

diff --git a/README.md b/README.md
index ae4c9f24..b858b5c0 100644
--- a/README.md
+++ b/README.md
@@ -191,7 +191,7 @@ exposes to agents, and exported at 2x by FigCraft's own renderer. The source fil
     </td>
     <td width="50%" valign="top">
       <h3>Prototype and hand off</h3>
-      Connections, triggers, actions and Smart Animate-style transitions, variables with conditionals (if / else if / else built in the interaction editor, expressions like <code>count + 1</code>), 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 <code>count + 1</code>), 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.
     </td>
   </tr>
 </table>
diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index 46340636..edbae279 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -37,7 +37,7 @@ const MAX_WARNINGS: usize = 50;
 
 /// The languages a component can be connected in.
 pub fn language(s: &str) -> Option<CodeLang> {
-    CodeLang::from_id(s).filter(|l| matches!(l, CodeLang::React | CodeLang::Leptos | CodeLang::SwiftUi | CodeLang::Compose))
+    CodeLang::from_id(s).filter(|l| matches!(l, CodeLang::React | CodeLang::Leptos | CodeLang::Vue | CodeLang::SwiftUi | CodeLang::Compose))
 }
 
 /// The layer `id`'s links are stored on: its component set, else its component (an instance's
@@ -66,6 +66,8 @@ pub fn import_line(link: &CodeLink, lang: CodeLang) -> String {
         _ if path.is_empty() => String::new(),
         CodeLang::React => 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}"),
     }
 }
@@ -174,6 +176,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), _) => format!("{{ {}() }}", l.name),
         (None, _) => value_expr(doc, c, p, v, lang),
@@ -195,11 +199,24 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                     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);
+                    // A Vue binding takes a quoted value. A plain string literal brings its own
+                    // quotes; the template's own quote, when it wrote one, ends it; anything else
+                    // is wrapped here, and a quote inside is escaped for the attribute.
+                    if lang == CodeLang::Vue {
+                        if !out.ends_with('"') && e.starts_with('"') && !e.contains('\\') {
+                            out.push_str(&e);
+                        } else if out.ends_with('"') {
+                            out.push_str(&e.replace('"', "&quot;"));
+                        } else {
+                            out.push_str(&format!("\"{}\"", e.replace('"', "&quot;")));
+                        }
                     } 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}}}")),
@@ -221,6 +238,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::<String>())
         }
+        CodeLang::Vue => format!("<{name}{} />", params.iter().map(|p| format!(" :{p}={{{p}}}")).collect::<String>()),
         CodeLang::SwiftUi => format!("{name}({})", params.iter().map(|p| format!("{p}: {{{p}}}")).collect::<Vec<_>>().join(", ")),
         _ => format!("{name}({})", params.iter().map(|p| format!("{p} = {{{p}}}")).collect::<Vec<_>>().join(", ")),
     }
@@ -241,12 +259,14 @@ pub fn check(c: &Component, link: &CodeLink, lang: CodeLang) -> std::result::Res
     let path_ok = match lang {
         CodeLang::React => !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 {
         return Err(match lang {
             CodeLang::React => 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"),
         });
     }
@@ -282,7 +302,7 @@ fn text(cmd: &str, p: &Value, key: &str) -> Result<Option<String>> {
 /// The `language` parameter (default React).
 fn lang_param(cmd: &str, p: &Value) -> Result<CodeLang> {
     match text(cmd, p, "language")? {
-        Some(l) => language(&l).ok_or_else(|| bad(cmd, "language: react|leptos|swiftui|compose")),
+        Some(l) => language(&l).ok_or_else(|| bad(cmd, "language: react|leptos|vue|swiftui|compose")),
         None => Ok(CodeLang::React),
     }
 }
@@ -312,7 +332,7 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "codeConnect.set",
             "Connect to code",
-            "{id? (component, set or instance; default the selection), language?: react|leptos|swiftui|compose (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 (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";
@@ -427,7 +447,7 @@ fn import(s: &mut Session, p: &Value) -> Result<Value> {
         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), name and template strings", i + 1));
+            warnings.push(format!("link {}: needs component, language (react|leptos|vue|swiftui|compose), 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 9d657d5f..eb34656b 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -183,3 +183,38 @@ 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, and a binding's value is quoted (the template
+    // writes `:prop={prop}`, so a plain string brings its own quotes).
+    let v = ex(
+        &mut s,
+        "codeConnect.set",
+        json!({"id": i, "language": "vue", "importPath": "@/components/Card.vue",
+               "template": "<Card :title={title} :dotted={Show dot} />"}),
+    );
+    let want = "import Card from \"@/components/Card.vue\";\n\n<Card :title=\"Buy\" :dotted=\"false\" />\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<Card :showDot=\"true\" :title=\"Hello\" />\n");
+    // 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, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Say \"hi\""}}));
+    let escaped = code(&mut s, i, "vue");
+    let line = escaped.lines().find(|l| l.contains("&quot;")).unwrap_or_default();
+    assert!(line.starts_with("<Card :showDot=\"false\""), "{line}");
+    assert!(line.contains(":title=\"&quot;Say"), "{line}");
+    assert!(line.ends_with("\" />"), "{line}");
+    // 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");
+}
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 0871f886..618d430a 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -18,13 +18,13 @@ pub fn specs() -> Vec<CommandSpec> {
     vec![spec!(
         "inspect.code",
         "Code for layer",
-        "{id?, language?: css|html|react|leptos|swiftui|compose (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), 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|swiftui|compose (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), 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|swiftui|compose"))?,
+                Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|leptos|vue|swiftui|compose"))?,
                 None => CodeLang::Css,
             };
             let rem = match string(p, "unit").map(|u| u.to_ascii_lowercase()).as_deref() {
@@ -61,18 +61,22 @@ pub enum CodeLang {
     React,
     /// A Leptos component (`view!` markup) with its stylesheet.
     Leptos,
+    /// A Vue single-file component (`<template>`, `<script setup>`, `<style scoped>`).
+    Vue,
     SwiftUi,
     Compose,
 }
 
 impl CodeLang {
-    pub const ALL: [CodeLang; 6] = [CodeLang::Css, CodeLang::Html, CodeLang::React, CodeLang::Leptos, CodeLang::SwiftUi, CodeLang::Compose];
+    pub const ALL: [CodeLang; 7] =
+        [CodeLang::Css, CodeLang::Html, CodeLang::React, CodeLang::Leptos, CodeLang::Vue, CodeLang::SwiftUi, CodeLang::Compose];
     pub fn id(self) -> &'static str {
         match self {
             CodeLang::Css => "css",
             CodeLang::Html => "html",
             CodeLang::React => "react",
             CodeLang::Leptos => "leptos",
+            CodeLang::Vue => "vue",
             CodeLang::SwiftUi => "swiftui",
             CodeLang::Compose => "compose",
         }
@@ -83,18 +87,22 @@ impl CodeLang {
             CodeLang::Html => "HTML + CSS",
             CodeLang::React => "React",
             CodeLang::Leptos => "Leptos",
+            CodeLang::Vue => "Vue",
             CodeLang::SwiftUi => "SwiftUI",
             CodeLang::Compose => "Compose",
         }
     }
     /// Languages whose lengths are CSS pixels (they can be shown in rem).
     pub fn is_web(self) -> bool {
-        matches!(self, CodeLang::Css | CodeLang::Html | CodeLang::React | CodeLang::Leptos)
+        matches!(self, CodeLang::Css | CodeLang::Html | CodeLang::React | CodeLang::Leptos | CodeLang::Vue)
     }
     pub fn from_id(s: &str) -> Option<CodeLang> {
         if s.eq_ignore_ascii_case("tsx") || s.eq_ignore_ascii_case("jsx") {
             return Some(CodeLang::React);
         }
+        if s.eq_ignore_ascii_case("sfc") || s.eq_ignore_ascii_case("vue3") {
+            return Some(CodeLang::Vue);
+        }
         CodeLang::ALL.into_iter().find(|l| l.id().eq_ignore_ascii_case(s) || l.label().eq_ignore_ascii_case(s))
     }
 }
@@ -194,7 +202,7 @@ pub fn code_for(doc: &Document, id: NodeId, lang: CodeLang) -> String {
     match lang {
         CodeLang::Css => css(doc, id),
         CodeLang::Html => html(doc, id),
-        CodeLang::React | CodeLang::Leptos | CodeLang::SwiftUi | CodeLang::Compose => crate::component_codegen::code(doc, id, lang),
+        CodeLang::React | CodeLang::Leptos | CodeLang::Vue | CodeLang::SwiftUi | CodeLang::Compose => crate::component_codegen::code(doc, id, lang),
     }
 }
 
@@ -642,12 +650,13 @@ fn html(doc: &Document, id: NodeId) -> String {
     format!("{}\n<style>\n{}{}</style>\n", out.markup, out.tokens.root_rule(), out.styles)
 }
 
-/// Markup being built for a layer tree: HTML (`class`), React JSX (`className`) or Leptos `view!`
-/// markup (text as Rust string literals); the last two with component parameters and instances
-/// as calls. With its stylesheet.
+/// Markup being built for a layer tree: HTML (`class`), React JSX (`className`), Vue
+/// (`{{ }}` interpolation, `v-if`, `:attr` bindings) or Leptos `view!` markup (text as Rust
+/// string literals); the last three with component parameters and instances as calls. With its
+/// stylesheet.
 pub(crate) struct Markup<'c, 'a> {
     ctx: &'c Ctx<'a>,
-    /// Html, React or Leptos.
+    /// Html, React, Vue or Leptos.
     lang: CodeLang,
     used: Vec<String>,
     pub markup: String,
@@ -656,6 +665,9 @@ pub(crate) struct Markup<'c, 'a> {
     /// The root's class (default: from its name) and extra JSX attributes.
     pub root_class: Option<String>,
     pub root_attrs: String,
+    /// A Vue `v-if` guard for the element about to be written: Vue templates can't wrap an
+    /// element in an expression, so a boolean parameter's layer carries the condition itself.
+    v_if: Option<String>,
     /// Each layer's path in the tree (names with sibling counts), class and declarations, so
     /// variants can be compared layer by layer.
     pub rules: Vec<(String, String, String)>,
@@ -672,13 +684,14 @@ impl<'c, 'a> Markup<'c, 'a> {
             tokens: Tokens::default(),
             root_class: None,
             root_attrs: String::new(),
+            v_if: None,
             rules: Vec::new(),
         }
     }
 
-    /// JSX indents by two spaces, HTML and Leptos by four.
+    /// JSX and Vue templates indent by two spaces, HTML and Leptos by four.
     fn pad(&self, depth: usize) -> String {
-        if self.lang == CodeLang::React { "  ".repeat(depth) } else { indent(depth) }
+        if matches!(self.lang, CodeLang::React | CodeLang::Vue) { "  ".repeat(depth) } else { indent(depth) }
     }
 
     /// Component code (React or Leptos): parameters and instances as calls.
@@ -698,6 +711,13 @@ impl<'c, 'a> Markup<'c, 'a> {
             && id != self.ctx.root
             && let Some(p) = self.ctx.param(n, "visible")
         {
+            // A Vue template holds no arbitrary expressions, so the guard rides on the element.
+            if self.lang == CodeLang::Vue {
+                self.v_if = Some(self.ident(p));
+                self.element(n, parent, depth, path);
+                self.v_if = None;
+                return;
+            }
             let (pad, p) = (self.pad(depth), self.ident(p));
             let (open, close) =
                 if self.lang == CodeLang::Leptos { (format!("{{{p}.then(|| view! {{"), "})}") } else { (format!("{{{p} && ("), ")}") };
@@ -779,18 +799,27 @@ impl<'c, 'a> Markup<'c, 'a> {
         }
         decls.push_str(&own);
         self.rule(path, &class, decls);
-        let attrs = if root { self.root_attrs.clone() } else { String::new() };
+        // The root's variant attributes, and a Vue `v-if` guard, ride on the open tag.
+        let mut attrs = if root { self.root_attrs.clone() } else { String::new() };
+        if self.lang == CodeLang::Vue
+            && let Some(guard) = self.v_if.take()
+        {
+            attrs.push_str(&format!(" v-if=\"{guard}\""));
+        }
         let open = |tag: &str| format!("{pad}<{tag} {attr}=\"{class}\"{attrs}>");
         match &n.kind {
             NodeKind::Text(t) => {
                 let body = match (self.ctx.param(n, "characters").filter(|_| self.code()), self.lang) {
                     (Some(p), CodeLang::Leptos) => format!("{{{}.clone()}}", self.ident(p)),
+                    (Some(p), CodeLang::Vue) => format!("{{{{ {} }}}}", self.ident(p)),
                     (Some(p), _) => format!("{{{}}}", p.ident),
                     (None, CodeLang::React) => jsx_text(&t.characters),
                     // `view!` takes text as string literals and void elements self-closed.
                     (None, CodeLang::Leptos) => {
                         t.characters.chars().take(10_000).collect::<String>().lines().map(|l| format!("{l:?}")).collect::<Vec<_>>().join("<br/>")
                     }
+                    // A Vue template reads `{{ }}` as interpolation, so braces are escaped.
+                    (None, CodeLang::Vue) => html_escape(&t.characters).replace('{', "&#123;").replace('}', "&#125;"),
                     (None, _) => html_escape(&t.characters),
                 };
                 self.markup.push_str(&format!("{}{body}</p>\n", open("p")));
@@ -798,11 +827,23 @@ impl<'c, 'a> Markup<'c, 'a> {
             _ => {
                 let kids = self.ctx.kids(n);
                 let slot = self.ctx.param(n, "slot").filter(|_| self.code());
+                let vue = self.lang == CodeLang::Vue;
                 let leptos = self.lang == CodeLang::Leptos;
                 let open = open("div");
+                let slot_ident = slot.map(|p| class_name(&p.ident, &mut Vec::new()));
                 if let Some(p) = slot.filter(|_| kids.is_empty()) {
-                    let content = if leptos { format!("{}.as_ref().map(|c| c.run())", self.ident(p)) } else { p.ident.clone() };
-                    self.markup.push_str(&format!("{open}{{{content}}}</div>\n"));
+                    let content = if leptos {
+                        format!("{{{}}}.as_ref().map(|c| c.run())", self.ident(p))
+                    } else if vue {
+                        // Vue's own slot element, named so an instance's content lands in the right one.
+                        match slot_ident.clone() {
+                            Some(name) => format!("<slot name=\"{name}\" />"),
+                            None => "<slot />".into(),
+                        }
+                    } else {
+                        format!("{{{}}}", p.ident)
+                    };
+                    self.markup.push_str(&format!("{open}{content}</div>\n"));
                 } else if kids.is_empty() || self.ctx.too_deep(depth) {
                     self.markup.push_str(&format!("{open}</div>\n"));
                 } else {
@@ -810,6 +851,11 @@ impl<'c, 'a> Markup<'c, 'a> {
                     // A slot shows the instance's content, or else the main's.
                     let (p1, p2) = (self.pad(depth + 1), self.pad(depth + 2));
                     let inner = match slot {
+                        Some(_) if vue => {
+                            let name = slot_ident.clone().map(|n| format!(" name=\"{n}\"")).unwrap_or_default();
+                            self.markup.push_str(&format!("{p1}<slot{name}>\n"));
+                            depth + 2
+                        }
                         Some(p) if leptos => {
                             self.markup.push_str(&format!("{p1}{{match &{} {{ Some(c) => c.run(), None => view! {{\n", self.ident(p)));
                             depth + 2
@@ -829,6 +875,7 @@ impl<'c, 'a> Markup<'c, 'a> {
                         self.node(k, Some(n), inner, &format!("{path}/{}#{count}", kn.name));
                     }
                     match slot {
+                        Some(_) if vue => self.markup.push_str(&format!("{p1}</slot>\n")),
                         Some(_) if leptos => self.markup.push_str(&format!("{p1}}}.into_any() }}}}\n")),
                         Some(_) => self.markup.push_str(&format!("{p2}</>\n{p1})}}\n")),
                         None => {}
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 1416b15f..8e568313 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -1,4 +1,4 @@
-//! Component code: a component (or component set) becomes a React, Leptos, SwiftUI or Jetpack
+//! Component code: a component (or component set) becomes a React, Leptos, Vue, SwiftUI or Jetpack
 //! Compose component whose properties are its parameters (a variant property → a union or enum, boolean →
 //! a flag showing the layers bound to it, text → a string, instance swap → a view parameter, slot →
 //! optional content), and an instance becomes a call passing the values it sets. Variants of a set
@@ -67,14 +67,14 @@ pub fn specs() -> Vec<CommandSpec> {
     vec![spec!(
         "inspect.componentCode",
         "Component code",
-        "{id? (component, set or instance; default the selection), language?: react|leptos|swiftui|compose (default react)} → {component, name, set, properties: [{name, param, type, default, value? (instances)}], definition, usage? (instances; the connected snippet when the component is connected to code), connected: {importPath, name, template, import, code} | null}",
+        "{id? (component, set or instance; default the selection), language?: react|leptos|vue|swiftui|compose (default react)} → {component, name, set, properties: [{name, param, type, default, value? (instances)}], definition, usage? (instances; the connected snippet when the component is connected to code), connected: {importPath, name, template, import, code} | null}",
         false,
         |s, p| {
             let cmd = "inspect.componentCode";
             let id = targets(s, p).first().copied().ok_or_else(|| bad(cmd, "select a component or instance"))?;
-            let lang = match string(p, "language").map(|l| CodeLang::from_id(&l)) {
-                Some(Some(l @ (CodeLang::React | CodeLang::Leptos | CodeLang::SwiftUi | CodeLang::Compose))) => l,
-                Some(_) => return Err(bad(cmd, "language: react|leptos|swiftui|compose")),
+            let lang = match string(p, "language") {
+                // One list of code languages, shared with codeConnect (see `code_connect::language`).
+                Some(l) => crate::code_connect::language(&l).ok_or_else(|| bad(cmd, "language: react|leptos|vue|swiftui|compose"))?,
                 None => CodeLang::React,
             };
             let doc = s.doc()?;
@@ -107,7 +107,7 @@ pub fn specs() -> Vec<CommandSpec> {
     )]
 }
 
-/// Code for any layer in React, Leptos, SwiftUI or Compose: an instance's call and its component's
+/// Code for any layer in React, Leptos, Vue, SwiftUI or Compose: an instance's call and its component's
 /// definition, a component's (or set's) definition, or the layer tree (React and Leptos wrap it
 /// in a function component).
 pub fn code(doc: &Document, id: NodeId, lang: CodeLang) -> String {
@@ -120,9 +120,13 @@ pub fn code(doc: &Document, id: NodeId, lang: CodeLang) -> String {
         (NodeKind::Instance { .. }, Some(c)) => format!("{}\n{}", usage(doc, id, lang, 0).unwrap_or_default(), definition(doc, &c, lang)),
         (NodeKind::Component { .. } | NodeKind::ComponentSet { .. }, Some(c)) => definition(doc, &c, lang),
         _ => match lang {
-            CodeLang::React | CodeLang::Leptos => {
+            CodeLang::React | CodeLang::Leptos | CodeLang::Vue => {
                 let c = Component { comp: id, set: None, type_name: component_type_name(&n.name), params: Vec::new() };
-                if lang == CodeLang::Leptos { leptos(doc, &c) } else { react(doc, &c) }
+                match lang {
+                    CodeLang::Leptos => leptos(doc, &c),
+                    CodeLang::Vue => vue(doc, &c),
+                    _ => react(doc, &c),
+                }
             }
             CodeLang::SwiftUi => {
                 let mut out = String::new();
@@ -456,9 +460,11 @@ fn enum_name(c: &Component, p: &Param, swift: bool) -> String {
 
 /// `value` of a parameter as an expression in `lang`.
 pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value, lang: CodeLang) -> String {
+    // React and Vue both take JavaScript: strings, and variant values as plain strings.
+    let js = matches!(lang, CodeLang::React | CodeLang::Vue);
     match (&p.kind, lang) {
         (ParamKind::Boolean, _) => value.as_bool().unwrap_or(false).to_string(),
-        (ParamKind::Text, CodeLang::React) => js_string(value.as_str().unwrap_or("")),
+        (ParamKind::Text, CodeLang::React | CodeLang::Vue) => js_string(value.as_str().unwrap_or("")),
         (ParamKind::Text, CodeLang::Leptos) => rust_string(value.as_str().unwrap_or("")),
         (ParamKind::Variant(opts), CodeLang::Leptos) => {
             let i = opts.iter().position(|o| Some(o.as_str()) == value.as_str()).unwrap_or(0);
@@ -467,7 +473,7 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
         (ParamKind::Text, l) => literal(value.as_str().unwrap_or(""), l == CodeLang::Compose),
         (ParamKind::Variant(opts), l) => {
             let v = value.as_str().unwrap_or("");
-            if l == CodeLang::React {
+            if js {
                 return js_string(v);
             }
             let swift = l == CodeLang::SwiftUi;
@@ -478,12 +484,12 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
         (ParamKind::InstanceSwap, l) => {
             let t = id_of(value).and_then(|i| component_type(doc, i));
             match (t, l) {
-                (Some(t), CodeLang::React) => format!("<{t} />"),
+                (Some(t), _) if js => format!("<{t} />"),
                 (Some(t), CodeLang::Leptos) => format!("|| view! {{ <{} /> }}", rust_type(&t)),
                 (None, CodeLang::Leptos) => "|| ()".into(),
                 (Some(t), CodeLang::SwiftUi) => format!("AnyView({t}())"),
                 (Some(t), _) => format!("{{ {t}() }}"),
-                (None, CodeLang::React) => "null".into(),
+                (None, _) if js => "null".into(),
                 (None, CodeLang::SwiftUi) => "AnyView(EmptyView())".into(),
                 (None, _) => "{}".into(),
             }
@@ -560,6 +566,23 @@ pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option
             let t = if leptos { rust_type(t) } else { t.clone() };
             format!("{pad}<{t}{attrs} />\n")
         }
+        CodeLang::Vue => {
+            // A plain string is an attribute value and anything else a `:name` binding, named as
+            // the definition declares the prop; a slot is a `<template #name>` child instead,
+            // named as its `<slot>` element is.
+            let is_slot = |name: &str| c.params.iter().any(|p| p.ident == name && matches!(p.kind, ParamKind::Slot));
+            let attrs: String = args
+                .iter()
+                .filter(|(name, _, _)| !is_slot(name))
+                .map(|(name, expr, plain)| if *plain { format!(" {name}={expr}") } else { format!(" :{name}=\"{expr}\"") })
+                .collect();
+            let slots: String = args
+                .iter()
+                .filter(|(name, _, _)| is_slot(name))
+                .map(|(name, expr, _)| format!("{pad}  <template #{}>\n{expr}{pad}  </template>\n", class_name(name, &mut Vec::new())))
+                .collect();
+            if slots.is_empty() { format!("{pad}<{t}{attrs} />\n") } else { format!("{pad}<{t}{attrs}>\n{slots}{pad}</{t}>\n") }
+        }
         CodeLang::SwiftUi => format!("{pad}{t}({})\n", args.iter().map(|(n, e, _)| format!("{n}: {e}")).collect::<Vec<_>>().join(", ")),
         _ => format!("{pad}{t}({})\n", args.iter().map(|(n, e, _)| format!("{n} = {e}")).collect::<Vec<_>>().join(", ")),
     })
@@ -586,6 +609,14 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> S
             }
             format!("|| view! {{\n{}{}}}", m.markup, indent(depth))
         }
+        CodeLang::Vue => {
+            // Just the markup: `usage` wraps it in the `<template #name>` of that slot.
+            let mut m = Markup::new(&ctx, CodeLang::Vue);
+            for k in kids {
+                m.node(k, Some(n), depth + 2, "");
+            }
+            m.markup
+        }
         CodeLang::SwiftUi => {
             let mut out = String::new();
             for k in kids {
@@ -611,6 +642,7 @@ pub fn definition(doc: &Document, c: &Component, lang: CodeLang) -> String {
         CodeLang::SwiftUi => swift_definition(doc, c),
         CodeLang::Compose => compose_definition(doc, c),
         CodeLang::Leptos => leptos(doc, c),
+        CodeLang::Vue => vue(doc, c),
         _ => react(doc, c),
     }
 }
@@ -643,6 +675,7 @@ fn web(doc: &Document, c: &Component, lang: CodeLang) -> (String, String, String
         .zip(&attr_names)
         .map(|(p, attr)| match lang {
             CodeLang::Leptos => format!(" {attr}={{{}.as_str()}}", rust_ident(&p.ident)),
+            CodeLang::Vue => format!(" :{attr}=\"{}\"", p.ident),
             _ => format!(" {attr}={{{}}}", p.ident),
         })
         .collect();
@@ -706,6 +739,40 @@ fn react(doc: &Document, c: &Component) -> String {
     out
 }
 
+/// A Vue single-file component: `<script setup>` with typed props and their defaults, the
+/// template, and a scoped stylesheet. Slots become Vue's own `<slot>` elements, so they are not
+/// props. Variants switch on the `data-*` attributes of the root element, as on the web.
+fn vue(doc: &Document, c: &Component) -> String {
+    // The stylesheet sits inline in the SFC, so the root class name isn't needed here.
+    let (_, markup, css) = web(doc, c, CodeLang::Vue);
+    // A slot layer is a `<slot>` element in the template, so it takes no prop.
+    let props: Vec<&Param> = c.params.iter().filter(|p| !matches!(p.kind, ParamKind::Slot)).collect();
+    let mut out = String::new();
+    if !props.is_empty() {
+        out.push_str("<script setup lang=\"ts\">\n\nconst props = withDefaults(\n  defineProps<{\n");
+        for p in &props {
+            let ty = match &p.kind {
+                ParamKind::Variant(opts) => opts.iter().map(|o| js_string(o)).collect::<Vec<_>>().join(" | "),
+                ParamKind::Boolean => "boolean".into(),
+                ParamKind::Text => "string".into(),
+                ParamKind::InstanceSwap | ParamKind::Slot => "unknown".into(),
+            };
+            out.push_str(&format!("    {}?: {ty};\n", p.ident));
+        }
+        out.push_str("  }>(),\n  {\n");
+        for p in &props {
+            // A component-valued prop has no literal to default to.
+            if matches!(p.kind, ParamKind::InstanceSwap | ParamKind::Slot) {
+                continue;
+            }
+            out.push_str(&format!("    {}: {},\n", p.ident, value_expr(doc, c, p, &p.default, CodeLang::Vue)));
+        }
+        out.push_str("  },\n);\n\n</script>\n\n");
+    }
+    out.push_str(&format!("<template>\n{markup}</template>\n\n<style scoped>\n{css}</style>\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/lib.rs b/crates/engine/src/lib.rs
index 0871eebf..82781448 100644
--- a/crates/engine/src/lib.rs
+++ b/crates/engine/src/lib.rs
@@ -1893,6 +1893,8 @@ mod version_tests;
 #[cfg(test)]
 mod view_behaviour_tests;
 #[cfg(test)]
+mod vue_codegen_tests;
+#[cfg(test)]
 mod widgets_tests;
 
 #[cfg(test)]
diff --git a/crates/engine/src/playground.rs b/crates/engine/src/playground.rs
index 64286cef..bc4743e3 100644
--- a/crates/engine/src/playground.rs
+++ b/crates/engine/src/playground.rs
@@ -52,7 +52,7 @@ pub fn specs() -> Vec<CommandSpec> {
     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 (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 (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<CommandSpec> {
                 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"))?,
+                Some(l) => CodeLang::from_id(&l).ok_or_else(|| bad(cmd, "language: css|html|react|leptos|vue|swiftui|compose"))?,
                 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..d147d758
--- /dev/null
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -0,0 +1,184 @@
+//! Vue code: `inspect.code {language: "vue"}` writes a single-file component — `<template>`, a
+//! `<script setup>` with typed props, and a `<style scoped>` — for a layer tree, and a component
+//! with its properties as props, its variants as `data-*` attributes and its slots as
+//! `<slot>` elements. A Vue template holds no arbitrary expressions, so what React writes as a
+//! braced expression (an interpolation, a `v-if`, a `:prop` binding) has its own spelling here.
+
+use crate::Session;
+use crate::codegen::CodeLang;
+use crate::components::tests::{ex, idv};
+use figcraft_doc::*;
+use serde_json::json;
+
+fn code(s: &mut Session, id: NodeId, lang: &str) -> String {
+    ex(s, "inspect.code", json!({"id": id, "language": lang}))["code"].as_str().unwrap_or_default().to_string()
+}
+
+fn vue(s: &mut Session, id: NodeId) -> String {
+    code(s, id, "vue")
+}
+
+fn component_code(s: &mut Session, id: NodeId, lang: &str) -> serde_json::Value {
+    ex(s, "inspect.componentCode", json!({"id": id, "language": lang}))
+}
+
+/// A "Card" component with a "Title" text (text property) and a "Dot" ellipse (boolean
+/// property "Show dot"). Returns (card, title, dot).
+fn card(s: &mut Session) -> (NodeId, NodeId, NodeId) {
+    let f = idv(&ex(s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Card"})));
+    ex(s, "shape.rectangle", json!({"x": 0, "y": 0, "width": 200, "height": 100, "parent": f, "props": {"name": "Bg", "fill": "#eeeeee"}}));
+    let title = idv(&ex(s, "text.create", json!({"text": "Hello", "x": 10, "y": 10, "parent": f, "props": {"name": "Title"}})));
+    let dot = idv(&ex(s, "shape.ellipse", json!({"x": 170, "y": 10, "width": 20, "height": 20, "parent": f, "props": {"name": "Dot"}})));
+    let c = idv(&ex(s, "component.create", json!({"ids": [f]})));
+    ex(s, "component.addProperty", json!({"id": dot, "name": "Show dot", "type": "boolean", "default": true}));
+    ex(s, "component.addProperty", json!({"id": c, "name": "Title", "type": "text", "layer": title}));
+    (c, title, dot)
+}
+
+#[test]
+fn a_layer_tree_becomes_a_single_file_component() {
+    let mut s = Session::new();
+    let f = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 300, "height": 200, "name": "Panel"})));
+    ex(&mut s, "text.create", json!({"text": "Hi", "x": 10, "y": 10, "parent": f, "props": {"name": "Label"}}));
+    let out = vue(&mut s, f);
+    // The three blocks of an SFC, in order, with the tree in the template and the CSS scoped.
+    assert!(out.starts_with("<template>\n"), "{out}");
+    assert!(out.contains("</template>\n\n<style scoped>\n"), "{out}");
+    assert!(out.ends_with("</style>\n"), "{out}");
+    assert!(out.contains("<div class=\"panel\">"), "{out}");
+    assert!(out.contains(">Hi</p>"), "{out}");
+    // A tree without properties needs no script block.
+    assert!(!out.contains("<script"), "{out}");
+}
+
+#[test]
+fn components_take_their_properties_as_props() {
+    let mut s = Session::new();
+    let (c, _, _) = card(&mut s);
+    let out = vue(&mut s, c);
+    // Typed props with their defaults, and the template below.
+    assert!(out.starts_with("<script setup lang=\"ts\">\n"), "{out}");
+    assert!(out.contains("const props = withDefaults(\n  defineProps<{\n"), "{out}");
+    assert!(out.contains("showDot?: boolean;"), "{out}");
+    assert!(out.contains("title?: string;"), "{out}");
+    assert!(out.contains("showDot: true,"), "{out}");
+    assert!(out.contains("title: \"Hello\","), "{out}");
+    assert!(out.contains("</script>\n\n<template>\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"], "<Card />\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"], "<Card :showDot=\"false\" title=\"Buy\" />\n");
+    let out = code(&mut s, i, "vue");
+    assert!(out.starts_with("<Card :showDot=\"false\" title=\"Buy\" />\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("<Card "), "{out}");
+}
+
+#[test]
+fn slots_become_slot_elements() {
+    let mut s = Session::new();
+    let frame = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "name": "Shell"})));
+    let body = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 0, "width": 200, "height": 100, "parent": frame, "name": "Body"})));
+    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);
+    // An empty slot is Vue's own element, and a slot takes no prop.
+    assert!(out.contains("<slot name=\"content\" />"), "{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("<slot name=\"content\">"), "{out}");
+    assert!(out.contains("</slot>"), "{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}");
+}
diff --git a/crates/ui-egui/locales/cs.toml b/crates/ui-egui/locales/cs.toml
index eea0e8dc..e3423c03 100644
--- a/crates/ui-egui/locales/cs.toml
+++ b/crates/ui-egui/locales/cs.toml
@@ -219,7 +219,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 or Compose above to connect this component to its code." = "Pro propojení této komponenty s jejím kódem vyberte nahoře React, Leptos, SwiftUI nebo Compose."
+"Choose React, Leptos, Vue, SwiftUI or Compose 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 nebo Compose."
 "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 f61464b8..c73dedcc 100644
--- a/crates/ui-egui/locales/de.toml
+++ b/crates/ui-egui/locales/de.toml
@@ -214,7 +214,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 or Compose above to connect this component to its code." = "Wählen Sie oben React, Leptos, SwiftUI oder Compose, um diese Komponente mit ihrem Code zu verbinden."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Wählen Sie oben React, Leptos, Vue, SwiftUI oder Compose, 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 ae566fc8..dfe79179 100644
--- a/crates/ui-egui/locales/en.toml
+++ b/crates/ui-egui/locales/en.toml
@@ -228,7 +228,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 or Compose above to connect this component to its code." = "Choose React, Leptos, SwiftUI or Compose above to connect this component to its code."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Choose React, Leptos, Vue, SwiftUI or Compose 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 596feda6..d9f15597 100644
--- a/crates/ui-egui/locales/es.toml
+++ b/crates/ui-egui/locales/es.toml
@@ -229,7 +229,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 or Compose above to connect this component to its code." = "Elige React, Leptos, SwiftUI o Compose arriba para conectar este componente con su código."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Elige React, Leptos, Vue, SwiftUI o Compose 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/fr.toml b/crates/ui-egui/locales/fr.toml
index b038b335..d3f0a86d 100644
--- a/crates/ui-egui/locales/fr.toml
+++ b/crates/ui-egui/locales/fr.toml
@@ -223,7 +223,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 or Compose above to connect this component to its code." = "Choisissez React, Leptos, SwiftUI ou Compose ci-dessus pour relier ce composant à son code."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Choisissez React, Leptos, Vue, SwiftUI ou Compose 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 f21e1ca3..01774e99 100644
--- a/crates/ui-egui/locales/id.toml
+++ b/crates/ui-egui/locales/id.toml
@@ -223,7 +223,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 or Compose above to connect this component to its code." = "Pilih React, Leptos, SwiftUI, atau Compose di atas untuk menghubungkan component ini ke kodenya."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Pilih React, Leptos, Vue, SwiftUI, atau Compose 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/ja.toml b/crates/ui-egui/locales/ja.toml
index c42790f3..99d5b03f 100644
--- a/crates/ui-egui/locales/ja.toml
+++ b/crates/ui-egui/locales/ja.toml
@@ -224,7 +224,7 @@ status = "draft — needs native review"
 "Changes on main" = "メインの変更"
 "Changes on the branch" = "ブランチの変更"
 "Changes unknown" = "変更内容は不明"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "上で React、Leptos、SwiftUI、Compose のいずれかを選び、このコンポーネントをコードに接続。"
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "上で React、Leptos、Vue、SwiftUI、Compose のいずれかを選び、このコンポーネントをコードに接続。"
 "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 b33b36b9..9889c7ea 100644
--- a/crates/ui-egui/locales/ko.toml
+++ b/crates/ui-egui/locales/ko.toml
@@ -214,7 +214,7 @@ status = "draft — needs native review"
 "Changes on main" = "메인의 변경 사항"
 "Changes on the branch" = "브랜치의 변경 사항"
 "Changes unknown" = "변경 내용 알 수 없음"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "위에서 React, Leptos, SwiftUI 또는 Compose를 선택해 이 컴포넌트를 코드에 연결하세요."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "위에서 React, Leptos, Vue, SwiftUI 또는 Compose를 선택해 이 컴포넌트를 코드에 연결하세요."
 "Choose another profile to change it." = "변경하려면 다른 프로필을 선택하세요."
 "Choose collection" = "컬렉션 선택"
 "Choose image" = "이미지 선택"
diff --git a/crates/ui-egui/locales/pt-BR.toml b/crates/ui-egui/locales/pt-BR.toml
index d8f857e0..3bf7a5b0 100644
--- a/crates/ui-egui/locales/pt-BR.toml
+++ b/crates/ui-egui/locales/pt-BR.toml
@@ -212,7 +212,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 or Compose above to connect this component to its code." = "Escolha React, Leptos, SwiftUI ou Compose acima para conectar este componente ao código dele."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Escolha React, Leptos, Vue, SwiftUI ou Compose 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 6e173a92..478f78d8 100644
--- a/crates/ui-egui/locales/ru.toml
+++ b/crates/ui-egui/locales/ru.toml
@@ -226,7 +226,7 @@ name = "Русский"
 "Changes on main" = "Изменения в основной ветке"
 "Changes on the branch" = "Изменения в ветке"
 "Changes unknown" = "Изменения неизвестны"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Выберите выше React, Leptos, SwiftUI или Compose, чтобы связать компонент с его кодом."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Выберите выше React, Leptos, Vue, SwiftUI или Compose, чтобы связать компонент с его кодом."
 "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 d86779e0..53636a8a 100644
--- a/crates/ui-egui/locales/sv.toml
+++ b/crates/ui-egui/locales/sv.toml
@@ -223,7 +223,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 or Compose above to connect this component to its code." = "Välj React, Leptos, SwiftUI eller Compose ovan för att koppla den här komponenten till dess kod."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Välj React, Leptos, Vue, SwiftUI eller Compose 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/tr.toml b/crates/ui-egui/locales/tr.toml
index bd8bb7c9..5cde760a 100644
--- a/crates/ui-egui/locales/tr.toml
+++ b/crates/ui-egui/locales/tr.toml
@@ -223,7 +223,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 or Compose above to connect this component to its code." = "Bu bileşeni koduna bağlamak için yukarıdan React, Leptos, SwiftUI veya Compose seçin."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Bu bileşeni koduna bağlamak için yukarıdan React, Leptos, Vue, SwiftUI veya Compose 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/zh-Hans.toml b/crates/ui-egui/locales/zh-Hans.toml
index 94c91942..862dc753 100644
--- a/crates/ui-egui/locales/zh-Hans.toml
+++ b/crates/ui-egui/locales/zh-Hans.toml
@@ -215,7 +215,7 @@ status = "draft — needs native review"
 "Changes on main" = "主文件上的更改"
 "Changes on the branch" = "分支上的更改"
 "Changes unknown" = "更改未知"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "在上方选择 React、Leptos、SwiftUI 或 Compose，将此组件关联到其代码。"
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "在上方选择 React、Leptos、Vue、SwiftUI 或 Compose，将此组件关联到其代码。"
 "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 0b429820..37a3a4b1 100644
--- a/crates/ui-egui/src/dev_mode.rs
+++ b/crates/ui-egui/src/dev_mode.rs
@@ -396,7 +396,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 or Compose above to connect this component to its code.")
+            tr("Choose React, Leptos, Vue, SwiftUI or Compose 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 cba5e81d..fcba79f8 100644
--- a/docs/dev-mode-parity.md
+++ b/docs/dev-mode-parity.md
@@ -10,13 +10,13 @@ inside generated layer trees. Remaining: 0–1 h.
 |---|---|---|
 | Dev Mode toggle (Shift+D), Inspect panel | done | |
 | 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 |
+| 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 |
 | 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 | |
 | Focus view (one frame, previous / next) | done | |
 | Compare changes (before/after side by side or overlaid, property diffs) | done | only against the snapshot taken when a frame was marked ready; not against any named version |
-| 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. Inside a generated layer tree, connected instances' imports aren't collected |
+| Code connect (map components to repository code) | done | per language (React, Leptos, Vue, 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. Inside a generated layer tree, connected instances' imports aren't collected |
 | Plugins in Dev Mode (Jira, GitHub, etc.) | partial | FigCraft's own WASM plugins that only read run from the Inspect tab; no plugin UI at run time, no third-party integrations |
 | 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 |
 | Dev resources links on layers | done | a URL and a name per link on any layer (`devResource.*`, saved, synced, undoable); instances list their main component's (and its set's) read-only; URLs checked as http/https and never fetched (no page titles: a link without a name is named after its URL); the Inspect tab lists, adds, edits and removes them; `get_node` returns them |
diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index adf0b0f2..85eb2648 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -55,7 +55,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 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 9b1a770c..778364d8 100644
--- a/docs/gaps.md
+++ b/docs/gaps.md
@@ -356,7 +356,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): an import path, the name and a template whose `{property}`
+  language (React, Vue, SwiftUI, Compose): 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 dfea95cc..95d7b460 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -294,7 +294,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 or Jetpack Compose 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 or Jetpack Compose 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: `{"$step": n}` anywhere in its params becomes the `id` in step n's result (zero-based), and `{"$step": n, "field": "…"}` another field of it (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. |
@@ -1275,29 +1275,40 @@ permissions: without it nothing is downloaded); `plugin.directory.publish {path
 
 ### Dev Mode
 
-- **Component code:** `inspect.code {id, language: react|leptos|swiftui|compose}` on a component,
+- **Component code:** `inspect.code {id, language: react|leptos|vue|swiftui|compose}` 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 (`<template>`, a `<script setup>` with `defineProps` and its defaults, a
+  `<style scoped>`; a slot layer is Vue's own `<slot>`, so it takes no prop), SwiftUI
   with a `View` struct, Compose with a `@Composable` function. Its component properties are the
-  parameters, with their defaults: variant properties become string unions (React) or enums,
+  parameters, with their defaults: variant properties become string unions (React, Vue) or enums,
   booleans become flags around the layers they show, text properties strings, instance swaps views
   (`React.ReactNode`, Leptos `ViewFn`, `AnyView`, a composable lambda) and slots optional content.
-  Every variant of a set shares one definition; in React and Leptos the other variants'
-  differences become CSS rules on `data-*` attributes. On an instance (or a layer tree containing
+  Every variant of a set shares one definition; in React, Vue and Leptos the other variants'
+  differences become CSS rules on `data-*` attributes. A Vue template holds no arbitrary
+  expressions, so what React writes as a braced expression has its own spelling there: text is
+  `{{ prop }}`, a boolean property's layer carries `v-if="prop"`, and a binding is
+  `:prop="value"`. On an instance (or a layer tree containing
   instances) each instance is a call passing only the values it changes, e.g. `<Button
-  state="Hover" label="Buy" />`, `<Button state=ButtonState::Hover label="Buy" />`, `Button(state:
+  state="Hover" label="Buy" />`, `<Button state=ButtonState::Hover label="Buy" />`,
+  `<Button :state="Hover" />`, `Button(state:
   .hover, label: "Buy")`, `Button(state = ButtonState.Hover, label = "Buy")`. Names are escaped and
   unique (keywords get a suffix, `default` → `defaultValue`, Rust's `type` → `type_`; Leptos names
   are snake_case; names that would shadow framework types get one too, `Text` → `TextComponent`). `inspect.componentCode
   {id?, language?}` returns the parts: `{component, name, set, properties: [{name, param, type,
   default, value? (instances)}], definition, usage? (instances)}`.
 - **Code connect:** link a component (a variant links its set) to the code component it is built
-  as, per language (`react`, `leptos`, `swiftui`, `compose`): `codeConnect.set {id?, language?, importPath?,
+  as, per language (`react`, `leptos`, `vue`, `swiftui`, `compose`): `codeConnect.set {id?, language?, importPath?,
   name?, template?}` (undoable; fields left out keep their value; the defaults are the generated
   name and a call passing every property) → `{component, language, code, unknown}`. Templates are
   text, never executed: `{property}` (its name or parameter name) is the instance's value escaped
   for the language (React and Leptos keep the markup's braces, so `size={size}` gives
-  `size="Large"` and `disabled={disabled}` gives `disabled={true}`; Leptos imports with `use
+  `size="Large"` and `disabled={disabled}` gives `disabled={true}`; a Vue binding is quoted
+  instead, so `:size={size}` gives `:size="Large"` and `:disabled={disabled}` gives
+  `:disabled="true"` — write the placeholder without quotes and let the value bring them; a
+  component swap is the component itself, `:icon={icon}` giving `:icon="Icon"`; a string that needs
+  escapes keeps them inside the value, where the attribute's own quotes become `&quot;`; Leptos
+  imports with `use
   <importPath>::<name>;`), `{property ? "a" : "b"}` inserts one of two
   strings, any other `{…}` stays as written (`unknown` lists placeholder names that aren't
   properties). Then `inspect.code` on an instance or the component returns the import line and the
diff --git a/docs/target-app-parity.md b/docs/target-app-parity.md
index a1a5bf12..87911711 100644
--- a/docs/target-app-parity.md
+++ b/docs/target-app-parity.md
@@ -616,7 +616,7 @@ Carried over from the ROADMAP's "Shipped so far" (2026-10-10). The test count th
   toolbar with flyouts and mode switcher, Design / Prototype / Inspect panels (Dev Mode: properties with their styles and variables, annotations
   with pinned properties and categories drawn as coloured callouts on the canvas (filtered by category),
   a ready-for-dev list, a focus view on one frame with previous / next, Compare changes since a frame
-  was marked ready (before / after side by side or overlaid, property-level diffs), CSS/HTML/React/SwiftUI/Compose
+  was marked ready (before / after side by side or overlaid, property-level diffs), CSS/HTML/React/Vue/SwiftUI/Compose
   code where components take their properties as parameters and instances are calls, components
   connected to their code components showing the real snippet, read-only plugins), colour picker
   (HSB square, hue/alpha, hex, gradient stops, image fills), main menu generated from the catalog,

From 7c211d8b0d790141f47d8ea1b4507d0af372d17c Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Thu, 22 Oct 2026 14:45:38 +0800
Subject: [PATCH 12/59] Review: escape Vue binding attributes and use the
 template's indent

- usage: a non-plain Vue argument escapes " as &quot; in the attribute value (same rule as the connected-code path)
- usage: Vue pads with two spaces like the markup, not four
- test: an unconnected instance with a quoted title asserts inspect.componentCode and inspect.code
---
 crates/engine/src/component_codegen.rs       | 4 ++--
 crates/engine/src/component_codegen_tests.rs | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 8e568313..2e74f3d3 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -526,7 +526,7 @@ pub(crate) fn instance_values(doc: &Document, id: NodeId, c: &Component) -> Opti
 pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option<String> {
     let c = main_of(doc, id).and_then(|m| describe(doc, m))?;
     let values = instance_values(doc, id, &c)?;
-    let pad = if lang == CodeLang::React { "  ".repeat(depth) } else { indent(depth) };
+    let pad = if matches!(lang, CodeLang::React | CodeLang::Vue) { "  ".repeat(depth) } else { indent(depth) };
     // A connected component: its real snippet. shortcut: inside a layer tree it brings no import
     // line; collect them at the top of the tree's code when people ask for it.
     if let Some(link) = crate::code_connect::link(doc, id, lang) {
@@ -574,7 +574,7 @@ pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option
             let attrs: String = args
                 .iter()
                 .filter(|(name, _, _)| !is_slot(name))
-                .map(|(name, expr, plain)| if *plain { format!(" {name}={expr}") } else { format!(" :{name}=\"{expr}\"") })
+                .map(|(name, expr, plain)| if *plain { format!(" {name}={expr}") } else { format!(" :{name}=\"{}\"", expr.replace('"', "&quot;")) })
                 .collect();
             let slots: String = args
                 .iter()
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index 4cd3d776..9e3e65f3 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -124,6 +124,11 @@ fn instances_are_calls_passing_the_values_they_set() {
     assert_eq!(component_code(&mut s, i, "swiftui")["usage"], "Card(showDot: false, title: \"Say \\\"hi\\\" $5\\nnow\")\n");
     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, "leptos")["usage"], "<Card show_dot={false} title={\"Say \\\"hi\\\" $5\\nnow\"} />\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"], "<Card :showDot=\"false\" :title=\"&quot;Say \\&quot;hi\\&quot; $5\\nnow&quot;\" />\n");
+    let vue = code(&mut s, i, "vue");
+    assert!(vue.starts_with("<Card :showDot=\"false\" :title=\"&quot;Say \\&quot;hi\\&quot; $5\\nnow&quot;\" />\n"), "{vue}");
 }
 
 #[test]

From a132eb376866521bd6f69b8fb15b083bb3a38ebe Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Thu, 22 Oct 2026 19:52:58 +0800
Subject: [PATCH 13/59] M6: fix Vue bindings, instance guards and slot catalogs

Vue connected templates keep a string's JS quotes inside bound attributes, so `:title={title}` becomes `:title="&quot;Buy&quot;"` rather than a bare identifier; static attributes take plain text. Nested instances no longer lose a boolean `v-if` guard, instance swaps render through `<component :is>`, slot names stay distinct when their idents lowercase alike, slot content CSS reaches the parent stylesheet, and text defaults escape `</script>` in the script block. The five locale catalogs the Vue key rename missed (bn, fi, ka, nl, pl) are updated, and the docs list Leptos/Vue consistently.
---
 crates/engine/src/code_connect.rs            | 68 +++++++++++++++---
 crates/engine/src/code_connect_tests.rs      | 23 ++++--
 crates/engine/src/codegen.rs                 | 40 ++++++++---
 crates/engine/src/component_codegen.rs       | 72 ++++++++++++++-----
 crates/engine/src/component_codegen_tests.rs |  4 ++
 crates/engine/src/vue_codegen_tests.rs       | 75 ++++++++++++++++++++
 crates/ui-egui/locales/bn.toml               |  2 +-
 crates/ui-egui/locales/fi.toml               |  2 +-
 crates/ui-egui/locales/ka.toml               |  2 +-
 crates/ui-egui/locales/nl.toml               |  2 +-
 crates/ui-egui/locales/pl.toml               |  2 +-
 docs/file-format-parity.md                   |  2 +-
 docs/gaps.md                                 |  2 +-
 docs/mcp.md                                  |  9 +--
 14 files changed, 252 insertions(+), 53 deletions(-)

diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index edbae279..3553438c 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -184,6 +184,38 @@ fn expr(doc: &Document, c: &Component, p: &Param, v: &Value, lang: CodeLang) ->
     }
 }
 
+/// Whether the placeholder sits in a Vue bound attribute (`:name`, `v-bind:name`, `@event` or a
+/// `v-*` directive) rather than a static one. `None` when it isn't in an attribute at all.
+fn vue_bound_attribute(out: &str) -> Option<bool> {
+    let end = out.trim_end();
+    let after = end.strip_suffix('"').unwrap_or(end).trim_end();
+    let eq = after.rfind('=')?;
+    let before = after[..eq].trim_end();
+    let name: String = before
+        .chars()
+        .rev()
+        .take_while(|c| c.is_ascii_alphanumeric() || matches!(c, '-' | '_' | ':' | '@' | '.' | '[' | ']'))
+        .collect::<Vec<_>>()
+        .into_iter()
+        .rev()
+        .collect();
+    if name.is_empty() {
+        return None;
+    }
+    Some(name.starts_with(':') || name.starts_with("v-bind:") || name.starts_with('@') || name.starts_with("v-on:") || name.starts_with("v-"))
+}
+
+/// An expression written into a double-quoted HTML attribute: its own quotes and markup become
+/// entities, so Vue's parser hands the expression its string literal intact.
+fn html_attr_expr(e: &str) -> String {
+    e.replace('&', "&amp;").replace('"', "&quot;").replace('<', "&lt;")
+}
+
+/// Literal text written into a double-quoted HTML attribute.
+fn html_attr_text(s: &str) -> String {
+    s.replace('&', "&amp;").replace('"', "&quot;").replace('<', "&lt;")
+}
+
 /// `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 {
     // A template that skipped `check` (a hand-edited file) and is far too long stays as written:
@@ -199,16 +231,34 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                     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).
-                    // A Vue binding takes a quoted value. A plain string literal brings its own
-                    // quotes; the template's own quote, when it wrote one, ends it; anything else
-                    // is wrapped here, and a quote inside is escaped for the attribute.
+                    // 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 {
-                        if !out.ends_with('"') && e.starts_with('"') && !e.contains('\\') {
-                            out.push_str(&e);
-                        } else if out.ends_with('"') {
-                            out.push_str(&e.replace('"', "&quot;"));
-                        } else {
-                            out.push_str(&format!("\"{}\"", e.replace('"', "&quot;")));
+                        match vue_bound_attribute(&out) {
+                            Some(true) => {
+                                let expr = html_attr_expr(&e);
+                                if out.ends_with('"') {
+                                    out.push_str(&expr);
+                                } else {
+                                    out.push('"');
+                                    out.push_str(&expr);
+                                    out.push('"');
+                                }
+                            }
+                            Some(false) => {
+                                let text = match &p.kind {
+                                    ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or("")),
+                                    _ => e.clone(),
+                                };
+                                if out.ends_with('"') {
+                                    out.push_str(&text);
+                                } else {
+                                    out.push('"');
+                                    out.push_str(&text);
+                                    out.push('"');
+                                }
+                            }
+                            None => out.push_str(&e),
                         }
                     } else {
                         let markup = matches!(lang, CodeLang::React | CodeLang::Leptos);
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index eb34656b..22495cc0 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -190,29 +190,40 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     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, and a binding's value is quoted (the template
-    // writes `:prop={prop}`, so a plain string brings its own quotes).
+    // 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": "<Card :title={title} :dotted={Show dot} />"}),
     );
-    let want = "import Card from \"@/components/Card.vue\";\n\n<Card :title=\"Buy\" :dotted=\"false\" />\n";
+    let want = "import Card from \"@/components/Card.vue\";\n\n<Card :title=\"&quot;Buy&quot;\" :dotted=\"false\" />\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<Card :showDot=\"true\" :title=\"Hello\" />\n");
+    assert_eq!(code(&mut s, c, "vue"), "import Card from \"./Card.vue\";\n\n<Card :showDot=\"true\" :title=\"&quot;Hello&quot;\" />\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": "<Card title={title} :dotted={Show dot} />"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title=\"Buy\" :dotted=\"false\" />\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": "<Button :state={state} />"}));
+    assert_eq!(code(&mut s, b, "vue"), "<Button :state=\"&quot;Hover&quot;\" />\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": "<Card :title={title} :dotted={Show dot} />"}));
     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("&quot;")).unwrap_or_default();
-    assert!(line.starts_with("<Card :showDot=\"false\""), "{line}");
-    assert!(line.contains(":title=\"&quot;Say"), "{line}");
+    assert!(line.starts_with("<Card :title=\"&quot;Say"), "{line}");
+    assert!(line.contains(":dotted=\"false\""), "{line}");
     assert!(line.ends_with("\" />"), "{line}");
     // 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");
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 618d430a..4d3f8cd0 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -243,12 +243,13 @@ impl<'a> Ctx<'a> {
         depth > self.base + MAX_DEPTH
     }
 
-    /// A call for an instance below the root (`None` for other layers, or a missing main).
-    fn call(&self, n: &Node, lang: CodeLang, depth: usize) -> Option<String> {
+    /// A call for an instance below the root (`None` for other layers, or a missing main), with
+    /// the CSS its slot content generated.
+    fn call(&self, n: &Node, lang: CodeLang, depth: usize) -> Option<(String, String)> {
         if n.id == self.root || !matches!(n.kind, NodeKind::Instance { .. }) {
             return None;
         }
-        crate::component_codegen::usage(self.doc, n.id, lang, depth)
+        crate::component_codegen::usage_with_styles(self.doc, n.id, lang, depth)
     }
 }
 
@@ -619,6 +620,15 @@ pub(crate) fn class_name(name: &str, used: &mut Vec<String>) -> String {
     name
 }
 
+/// `markup`'s first element with a Vue `v-if` attribute (a call with no placing wrapper).
+fn with_v_if(markup: &str, guard: Option<&str>) -> String {
+    let Some(guard) = guard else { return markup.to_string() };
+    match markup.find('>') {
+        Some(i) => format!("{} v-if=\"{guard}\"{}", &markup[..i], &markup[i..]),
+        None => markup.to_string(),
+    }
+}
+
 fn html_escape(s: &str) -> String {
     s.replace('&', "&amp;").replace('<', "&lt;").replace('>', "&gt;").replace('\n', "<br>")
 }
@@ -777,15 +787,20 @@ impl<'c, 'a> Markup<'c, 'a> {
         if self.code() && !root && matches!(n.kind, NodeKind::Instance { .. }) {
             let at = depth + usize::from(!decls.is_empty());
             let run = if self.lang == CodeLang::Leptos { ".run()" } else { "" };
-            let inner = match self.ctx.param(n, "mainComponent") {
-                Some(p) => Some(format!("{}{{{}{run}}}\n", self.pad(at), self.ident(p))),
-                None => self.ctx.call(n, self.lang, at),
+            let (inner, css) = match self.ctx.param(n, "mainComponent") {
+                Some(p) if self.lang == CodeLang::Vue => (Some(format!("{}<component :is=\"{}\" />\n", self.pad(at), self.ident(p))), String::new()),
+                Some(p) => (Some(format!("{}{{{}{run}}}\n", self.pad(at), self.ident(p))), String::new()),
+                None => self.ctx.call(n, self.lang, at).map_or((None, String::new()), |(code, css)| (Some(code), css)),
             };
+            self.styles.push_str(&css);
             if let Some(inner) = inner {
+                // A Vue guard set by `node` rides on the call when there is no wrapper.
+                let guard = if self.lang == CodeLang::Vue { self.v_if.take() } else { None };
                 if decls.is_empty() {
-                    self.markup.push_str(&inner);
+                    self.markup.push_str(&with_v_if(&inner, guard.as_deref()));
                 } else {
-                    self.markup.push_str(&format!("{pad}<div {attr}=\"{class}\">\n{inner}{pad}</div>\n"));
+                    let guard = guard.map(|g| format!(" v-if=\"{g}\"")).unwrap_or_default();
+                    self.markup.push_str(&format!("{pad}<div {attr}=\"{class}\"{guard}>\n{inner}{pad}</div>\n"));
                     self.rule(path, &class, decls);
                 }
                 return;
@@ -830,7 +845,10 @@ impl<'c, 'a> Markup<'c, 'a> {
                 let vue = self.lang == CodeLang::Vue;
                 let leptos = self.lang == CodeLang::Leptos;
                 let open = open("div");
-                let slot_ident = slot.map(|p| class_name(&p.ident, &mut Vec::new()));
+                let slot_ident = slot.map(|p| match self.ctx.comp {
+                    Some(c) => crate::component_codegen::slot_name(c, p),
+                    None => class_name(&p.ident, &mut Vec::new()),
+                });
                 if let Some(p) = slot.filter(|_| kids.is_empty()) {
                     let content = if leptos {
                         format!("{{{}}}.as_ref().map(|c| c.run())", self.ident(p))
@@ -938,7 +956,7 @@ fn swift_layer(ctx: &Ctx, n: &Node, depth: usize, out: &mut String, extra: &[Str
     // Nested instances are calls; an instance swap parameter is a view.
     let call = match ctx.param(n, "mainComponent").filter(|_| n.id != ctx.root) {
         Some(p) => Some(format!("{pad}{}\n", p.ident)),
-        None => ctx.call(n, CodeLang::SwiftUi, depth),
+        None => ctx.call(n, CodeLang::SwiftUi, depth).map(|(code, _)| code),
     };
     if let Some(call) = call {
         out.push_str(&call);
@@ -1111,7 +1129,7 @@ fn compose_layer(ctx: &Ctx, n: &Node, depth: usize, out: &mut String) {
     // Nested instances are calls; an instance swap parameter is a composable.
     let call = match ctx.param(n, "mainComponent").filter(|_| n.id != ctx.root) {
         Some(p) => Some(format!("{pad}{}()\n", p.ident)),
-        None => ctx.call(n, CodeLang::Compose, depth),
+        None => ctx.call(n, CodeLang::Compose, depth).map(|(code, _)| code),
     };
     if let Some(call) = call {
         out.push_str(&call);
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 2e74f3d3..20d484bf 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -447,6 +447,12 @@ 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 `</script>` can't close the `<script setup>` block early.
+pub(crate) fn vue_string(s: &str) -> String {
+    js_string(s).replace('<', "\\u003C")
+}
+
 /// The type name of a component (a variant's set) by id.
 pub(crate) fn component_type(doc: &Document, comp: NodeId) -> Option<String> {
     let n = doc.node(comp).filter(|n| matches!(n.kind, NodeKind::Component { .. } | NodeKind::ComponentSet { .. }))?;
@@ -464,7 +470,8 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
     let js = matches!(lang, CodeLang::React | CodeLang::Vue);
     match (&p.kind, lang) {
         (ParamKind::Boolean, _) => value.as_bool().unwrap_or(false).to_string(),
-        (ParamKind::Text, CodeLang::React | CodeLang::Vue) => js_string(value.as_str().unwrap_or("")),
+        (ParamKind::Text, CodeLang::Vue) => vue_string(value.as_str().unwrap_or("")),
+        (ParamKind::Text, CodeLang::React) => js_string(value.as_str().unwrap_or("")),
         (ParamKind::Text, CodeLang::Leptos) => rust_string(value.as_str().unwrap_or("")),
         (ParamKind::Variant(opts), CodeLang::Leptos) => {
             let i = opts.iter().position(|o| Some(o.as_str()) == value.as_str()).unwrap_or(0);
@@ -473,7 +480,10 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
         (ParamKind::Text, l) => literal(value.as_str().unwrap_or(""), l == CodeLang::Compose),
         (ParamKind::Variant(opts), l) => {
             let v = value.as_str().unwrap_or("");
-            if js {
+            if l == CodeLang::Vue {
+                return vue_string(v);
+            }
+            if l == CodeLang::React {
                 return js_string(v);
             }
             let swift = l == CodeLang::SwiftUi;
@@ -484,6 +494,8 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
         (ParamKind::InstanceSwap, l) => {
             let t = id_of(value).and_then(|i| component_type(doc, i));
             match (t, l) {
+                // A Vue binding takes the component itself, not an element.
+                (Some(t), CodeLang::Vue) => t,
                 (Some(t), _) if js => format!("<{t} />"),
                 (Some(t), CodeLang::Leptos) => format!("|| view! {{ <{} /> }}", rust_type(&t)),
                 (None, CodeLang::Leptos) => "|| ()".into(),
@@ -500,6 +512,19 @@ pub(crate) fn value_expr(doc: &Document, c: &Component, p: &Param, value: &Value
 
 // ------------------------------------------------------------------ instances
 
+/// The `<slot name="…">` of a slot parameter: unique among the component's slot parameters, unlike
+/// `class_name` called with a fresh list per parameter (two idents can lowercase alike).
+pub(crate) fn slot_name(c: &Component, p: &Param) -> String {
+    let mut used = Vec::new();
+    for q in c.params.iter().filter(|q| matches!(q.kind, ParamKind::Slot)) {
+        let name = class_name(&q.ident, &mut used);
+        if q.ident == p.ident {
+            return name;
+        }
+    }
+    class_name(&p.ident, &mut Vec::new())
+}
+
 /// The values an instance sets for `c`'s parameters, in order (`None` for other layers): variant
 /// values from the variant it shows, slots as whether they hold its own content.
 pub(crate) fn instance_values(doc: &Document, id: NodeId, c: &Component) -> Option<Vec<(String, Value)>> {
@@ -524,23 +549,32 @@ pub(crate) fn instance_values(doc: &Document, id: NodeId, c: &Component) -> Opti
 /// The call for instance `id` at `depth`, passing the values that differ from the defaults and the
 /// content of slots it fills (`None` when it isn't an instance of an existing component).
 pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option<String> {
+    usage_with_styles(doc, id, lang, depth).map(|(code, _)| code)
+}
+
+/// `usage` and the CSS generated for the slot content it carries (the caller's stylesheet needs
+/// those rules; `usage` alone drops them at a snippet boundary).
+pub(crate) fn usage_with_styles(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option<(String, String)> {
     let c = main_of(doc, id).and_then(|m| describe(doc, m))?;
     let values = instance_values(doc, id, &c)?;
     let pad = if matches!(lang, CodeLang::React | CodeLang::Vue) { "  ".repeat(depth) } else { indent(depth) };
     // A connected component: its real snippet. shortcut: inside a layer tree it brings no import
     // line; collect them at the top of the tree's code when people ask for it.
     if let Some(link) = crate::code_connect::link(doc, id, lang) {
-        return Some(crate::code_connect::render(doc, &c, &values, link, lang, &pad));
+        return Some((crate::code_connect::render(doc, &c, &values, link, lang, &pad), String::new()));
     }
     let slots = slots_of(doc, id);
     // (parameter, expression, whether it's a plain string literal)
     let mut args: Vec<(&str, String, bool)> = Vec::new();
+    let mut slot_css = String::new();
     for (p, (_, v)) in c.params.iter().zip(&values) {
         if let ParamKind::Slot = p.kind {
             if v.as_bool() == Some(true)
                 && let Some((layer, _)) = slots.iter().find(|(_, name)| *name == p.prop)
             {
-                args.push((&p.ident, slot_content(doc, *layer, lang, depth), false));
+                let (content, css) = slot_content(doc, *layer, lang, depth);
+                slot_css.push_str(&css);
+                args.push((&p.ident, content, false));
             }
             continue;
         }
@@ -552,7 +586,7 @@ pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option
         args.push((&p.ident, expr, plain));
     }
     let t = &c.type_name;
-    Some(match lang {
+    let code = match lang {
         CodeLang::React | CodeLang::Leptos => {
             let leptos = lang == CodeLang::Leptos;
             // Plain strings read best as attribute values.
@@ -579,18 +613,24 @@ pub fn usage(doc: &Document, id: NodeId, lang: CodeLang, depth: usize) -> Option
             let slots: String = args
                 .iter()
                 .filter(|(name, _, _)| is_slot(name))
-                .map(|(name, expr, _)| format!("{pad}  <template #{}>\n{expr}{pad}  </template>\n", class_name(name, &mut Vec::new())))
+                .map(|(name, expr, _)| {
+                    let slot = c.params.iter().find(|q| q.ident == *name);
+                    let name = slot.map(|p| slot_name(&c, p)).unwrap_or_else(|| class_name(name, &mut Vec::new()));
+                    format!("{pad}  <template #{name}>\n{expr}{pad}  </template>\n")
+                })
                 .collect();
             if slots.is_empty() { format!("{pad}<{t}{attrs} />\n") } else { format!("{pad}<{t}{attrs}>\n{slots}{pad}</{t}>\n") }
         }
         CodeLang::SwiftUi => format!("{pad}{t}({})\n", args.iter().map(|(n, e, _)| format!("{n}: {e}")).collect::<Vec<_>>().join(", ")),
         _ => format!("{pad}{t}({})\n", args.iter().map(|(n, e, _)| format!("{n} = {e}")).collect::<Vec<_>>().join(", ")),
-    })
+    };
+    Some((code, slot_css))
 }
 
-/// The content an instance put in one of its slots, as an expression spanning lines.
-fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> String {
-    let Some(n) = doc.node(slot) else { return String::new() };
+/// The content an instance put in one of its slots, as an expression spanning lines, and the CSS
+/// its layers generated (so the caller's stylesheet keeps it).
+fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> (String, String) {
+    let Some(n) = doc.node(slot) else { return (String::new(), String::new()) };
     let ctx = Ctx { doc, root: slot, comp: None, base: depth };
     let kids = ctx.kids(n);
     match lang {
@@ -600,14 +640,14 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> S
                 m.node(k, Some(n), depth + 2, "");
             }
             let (p1, p2) = ("  ".repeat(depth), "  ".repeat(depth + 1));
-            format!("(\n{p2}<>\n{}{p2}</>\n{p1})", m.markup)
+            (format!("(\n{p2}<>\n{}{p2}</>\n{p1})", m.markup), m.styles)
         }
         CodeLang::Leptos => {
             let mut m = Markup::new(&ctx, CodeLang::Leptos);
             for k in kids {
                 m.node(k, Some(n), depth + 1, "");
             }
-            format!("|| view! {{\n{}{}}}", m.markup, indent(depth))
+            (format!("|| view! {{\n{}{}}}", m.markup, indent(depth)), m.styles)
         }
         CodeLang::Vue => {
             // Just the markup: `usage` wraps it in the `<template #name>` of that slot.
@@ -615,21 +655,21 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> S
             for k in kids {
                 m.node(k, Some(n), depth + 2, "");
             }
-            m.markup
+            (m.markup, m.styles)
         }
         CodeLang::SwiftUi => {
             let mut out = String::new();
             for k in kids {
                 swift(&ctx, k, depth + 2, &mut out, &[]);
             }
-            format!("AnyView(Group {{\n{out}{}}})", indent(depth + 1))
+            (format!("AnyView(Group {{\n{out}{}}})", indent(depth + 1)), String::new())
         }
         _ => {
             let mut out = String::new();
             for k in kids {
                 compose(&ctx, k, depth + 2, &mut out);
             }
-            format!("{{\n{out}{}}}", indent(depth + 1))
+            (format!("{{\n{out}{}}}", indent(depth + 1)), String::new())
         }
     }
 }
@@ -752,7 +792,7 @@ fn vue(doc: &Document, c: &Component) -> String {
         out.push_str("<script setup lang=\"ts\">\n\nconst props = withDefaults(\n  defineProps<{\n");
         for p in &props {
             let ty = match &p.kind {
-                ParamKind::Variant(opts) => opts.iter().map(|o| js_string(o)).collect::<Vec<_>>().join(" | "),
+                ParamKind::Variant(opts) => opts.iter().map(|o| vue_string(o)).collect::<Vec<_>>().join(" | "),
                 ParamKind::Boolean => "boolean".into(),
                 ParamKind::Text => "string".into(),
                 ParamKind::InstanceSwap | ParamKind::Slot => "unknown".into(),
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index 9e3e65f3..7d710ef7 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -220,12 +220,16 @@ fn instance_swap_properties_take_views() {
     let leptos = code(&mut s, chip, "leptos");
     assert!(leptos.contains("    #[prop(into, default = (|| view! { <HeartIcon /> }).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("<component :is=\"icon\" />"), "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"], "<Chip icon={<StarIcon />} />\n");
     assert_eq!(component_code(&mut s, i, "swiftui")["usage"], "Chip(icon: AnyView(StarIcon()))\n");
     assert_eq!(component_code(&mut s, i, "compose")["usage"], "Chip(icon = { StarIcon() })\n");
     assert_eq!(component_code(&mut s, i, "leptos")["usage"], "<Chip icon={|| view! { <StarIcon /> }} />\n");
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Chip :icon=\"StarIcon\" />\n");
 }
 
 #[test]
diff --git a/crates/engine/src/vue_codegen_tests.rs b/crates/engine/src/vue_codegen_tests.rs
index d147d758..f448af81 100644
--- a/crates/engine/src/vue_codegen_tests.rs
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -182,3 +182,78 @@ fn a_keyword_property_name_stays_usable() {
     let out = vue(&mut s, c);
     assert!(out.contains("defaultValue"), "{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"})));
+    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}));
+    let out = vue(&mut s, c);
+    // The call's early return must not swallow the guard `node` put on it.
+    assert!(out.contains("v-if=\"showCard\""), "{out}");
+    assert_eq!(out.matches("v-if=\"showCard\"").count(), 1, "{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": "</script><script>alert(1)</script>"}),
+    );
+    let out = vue(&mut s, c);
+    assert!(out.contains("\\u003C/script>"), "{out}");
+    assert_eq!(out.matches("</script>").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("<slot name=\"foobar\""), "{out}");
+    assert!(out.contains("<slot name=\"foobar-2\""), "{out}");
+    // The instance's templates use the same names.
+    let g = idv(&ex(&mut s, "frame.create", json!({"x": 0, "y": 300, "width": 20, "height": 20, "name": "Badge"})));
+    let badge = idv(&ex(&mut s, "component.create", json!({"ids": [g]})));
+    let i = idv(&ex(&mut s, "instance.create", json!({"component": c, "x": 400, "y": 0})));
+    ex(&mut s, "instance.slotInsert", json!({"id": i, "slot": "Foo Bar", "component": badge, "replace": true}));
+    ex(&mut s, "instance.slotInsert", json!({"id": i, "slot": "Foobar", "component": badge, "replace": true}));
+    let usage = component_code(&mut s, i, "vue")["usage"].as_str().unwrap_or_default().to_string();
+    assert!(usage.contains("<template #foobar>"), "{usage}");
+    assert!(usage.contains("<template #foobar-2>"), "{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(".swatch {"), "{out}");
+    assert!(out.contains("#FF0000"), "{out}");
+    assert!(code(&mut s, screen, "react").contains(".swatch {"));
+}
diff --git a/crates/ui-egui/locales/bn.toml b/crates/ui-egui/locales/bn.toml
index adedc983..88fa84ac 100644
--- a/crates/ui-egui/locales/bn.toml
+++ b/crates/ui-egui/locales/bn.toml
@@ -228,7 +228,7 @@ status = "draft — needs native review"
 "Changes on main" = "প্রধান (main)-এ পরিবর্তন"
 "Changes on the branch" = "ব্রাঞ্চে পরিবর্তন"
 "Changes unknown" = "পরিবর্তন অজ্ঞাত"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, SwiftUI বা Compose বেছে নিন।"
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, SwiftUI বা Compose বেছে নিন।"
 "Choose another profile to change it." = "পরিবর্তন করতে অন্য একটি প্রোফাইল বেছে নিন।"
 "Choose collection" = "সংগ্রহ (collection) বেছে নিন"
 "Choose image" = "ছবি বেছে নিন"
diff --git a/crates/ui-egui/locales/fi.toml b/crates/ui-egui/locales/fi.toml
index 205a9d29..2f434140 100644
--- a/crates/ui-egui/locales/fi.toml
+++ b/crates/ui-egui/locales/fi.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes unknown" = "Muutokset tuntemattomia"
 "Checking the fonts installed on this computer…" = "Tarkistetaan tämän tietokoneen asennettuja fontteja…"
 "Checking the server…" = "Tarkistetaan palvelinta…"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Valitse yllä React, Leptos, SwiftUI tai Compose yhdistääksesi tämän komponentin sen koodiin."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Valitse yllä React, Leptos, SwiftUI tai Compose yhdistääksesi tämän komponentin sen koodiin."
 "Choose another profile to change it." = "Vaihda valitsemalla toinen profiili."
 "Choose collection" = "Valitse kokoelma"
 "Choose image" = "Valitse kuva"
diff --git a/crates/ui-egui/locales/ka.toml b/crates/ui-egui/locales/ka.toml
index 5b73b4fb..d49b2974 100644
--- a/crates/ui-egui/locales/ka.toml
+++ b/crates/ui-egui/locales/ka.toml
@@ -230,7 +230,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 or Compose above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, SwiftUI ან Compose."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, SwiftUI ან Compose."
 "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 54851043..69a0373e 100644
--- a/crates/ui-egui/locales/nl.toml
+++ b/crates/ui-egui/locales/nl.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes unknown" = "Onbekende wijzigingen"
 "Checking the fonts installed on this computer…" = "De lettertypen op deze computer worden gecontroleerd…"
 "Checking the server…" = "Server controleren…"
-"Choose React, Leptos, SwiftUI or Compose above to connect this component to its code." = "Kies hierboven React, Leptos, SwiftUI of Compose om dit component aan zijn code te koppelen."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Kies hierboven React, Leptos, SwiftUI of Compose om dit component aan zijn code te koppelen."
 "Choose another profile to change it." = "Kies een ander profiel om dit te wijzigen."
 "Choose collection" = "Kies een verzameling"
 "Choose image" = "Afbeelding kiezen"
diff --git a/crates/ui-egui/locales/pl.toml b/crates/ui-egui/locales/pl.toml
index 23f7dee8..46e3a85e 100644
--- a/crates/ui-egui/locales/pl.toml
+++ b/crates/ui-egui/locales/pl.toml
@@ -226,7 +226,7 @@ status = "draft — needs native review"
 "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 or Compose above to connect this component to its code." = "Wybierz React, Leptos, SwiftUI lub Compose powyżej, aby połączyć ten komponent z jego kodem."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Wybierz React, Leptos, SwiftUI lub Compose 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/docs/file-format-parity.md b/docs/file-format-parity.md
index 85eb2648..4cdf9561 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -55,7 +55,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, React and Vue | 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 778364d8..94eec3dc 100644
--- a/docs/gaps.md
+++ b/docs/gaps.md
@@ -356,7 +356,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, Vue, SwiftUI, Compose): an import path, the name and a template whose `{property}`
+  language (React, Leptos, Vue, SwiftUI, Compose): 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 95d7b460..f8f597a9 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -1291,7 +1291,7 @@ permissions: without it nothing is downloaded); `plugin.directory.publish {path
   `:prop="value"`. On an instance (or a layer tree containing
   instances) each instance is a call passing only the values it changes, e.g. `<Button
   state="Hover" label="Buy" />`, `<Button state=ButtonState::Hover label="Buy" />`,
-  `<Button :state="Hover" />`, `Button(state:
+  `<Button state="Hover" />`, `Button(state:
   .hover, label: "Buy")`, `Button(state = ButtonState.Hover, label = "Buy")`. Names are escaped and
   unique (keywords get a suffix, `default` → `defaultValue`, Rust's `type` → `type_`; Leptos names
   are snake_case; names that would shadow framework types get one too, `Text` → `TextComponent`). `inspect.componentCode
@@ -1303,9 +1303,10 @@ permissions: without it nothing is downloaded); `plugin.directory.publish {path
   name and a call passing every property) → `{component, language, code, unknown}`. Templates are
   text, never executed: `{property}` (its name or parameter name) is the instance's value escaped
   for the language (React and Leptos keep the markup's braces, so `size={size}` gives
-  `size="Large"` and `disabled={disabled}` gives `disabled={true}`; a Vue binding is quoted
-  instead, so `:size={size}` gives `:size="Large"` and `:disabled={disabled}` gives
-  `:disabled="true"` — write the placeholder without quotes and let the value bring them; a
+  `size="Large"` and `disabled={disabled}` gives `disabled={true}`; a Vue binding takes an
+  expression, so `:size={size}` gives `:size="&quot;Large&quot;"` and `:disabled={disabled}` gives
+  `:disabled="true"` — the string keeps its JS quotes as entities, and a static attribute
+  (`size={size}`) takes plain text; a
   component swap is the component itself, `:icon={icon}` giving `:icon="Icon"`; a string that needs
   escapes keeps them inside the value, where the attribute's own quotes become `&quot;`; Leptos
   imports with `use

From ae92735daea3e31f4571c1f09224e44299ad17b1 Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Thu, 22 Oct 2026 20:28:04 +0800
Subject: [PATCH 14/59] M6: harden Vue attribute and slot output

Keep single-quoted attribute delimiters, render text placeholders as text (not quoted strings), skip a > inside an attribute value when placing v-if (and insert before a self-closing slash), give slot content a per-slot class prefix so repeated layer names stay distinct, use a binding name no generated prop can shadow, and add Vue to the five translations that still listed only the older languages.
---
 crates/engine/src/code_connect.rs       | 69 ++++++++++++++++++-------
 crates/engine/src/code_connect_tests.rs |  7 +++
 crates/engine/src/codegen.rs            | 40 ++++++++++++--
 crates/engine/src/component_codegen.rs  | 15 ++++--
 crates/engine/src/vue_codegen_tests.rs  | 55 ++++++++++++++++++--
 crates/ui-egui/locales/bn.toml          |  2 +-
 crates/ui-egui/locales/fi.toml          |  2 +-
 crates/ui-egui/locales/ka.toml          |  2 +-
 crates/ui-egui/locales/nl.toml          |  2 +-
 crates/ui-egui/locales/pl.toml          |  2 +-
 10 files changed, 158 insertions(+), 38 deletions(-)

diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index 3553438c..eeaef08a 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -184,12 +184,21 @@ fn expr(doc: &Document, c: &Component, p: &Param, v: &Value, lang: CodeLang) ->
     }
 }
 
-/// Whether the placeholder sits in a Vue bound attribute (`:name`, `v-bind:name`, `@event` or a
-/// `v-*` directive) rather than a static one. `None` when it isn't in an attribute at all.
-fn vue_bound_attribute(out: &str) -> Option<bool> {
+/// 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<char>)> {
     let end = out.trim_end();
-    let after = end.strip_suffix('"').unwrap_or(end).trim_end();
+    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 (`<Card title='Buy'>`) 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()
@@ -202,18 +211,32 @@ fn vue_bound_attribute(out: &str) -> Option<bool> {
     if name.is_empty() {
         return None;
     }
-    Some(name.starts_with(':') || name.starts_with("v-bind:") || name.starts_with('@') || name.starts_with("v-on:") || name.starts_with("v-"))
+    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 a double-quoted HTML attribute: its own quotes and markup become
-/// entities, so Vue's parser hands the expression its string literal intact.
-fn html_attr_expr(e: &str) -> String {
-    e.replace('&', "&amp;").replace('"', "&quot;").replace('<', "&lt;")
+/// 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<char>) -> String {
+    let e = e.replace('&', "&amp;").replace('<', "&lt;");
+    match quote {
+        Some('\'') => e.replace('\'', "&#39;"),
+        _ => e.replace('"', "&quot;"),
+    }
 }
 
-/// Literal text written into a double-quoted HTML attribute.
-fn html_attr_text(s: &str) -> String {
-    s.replace('&', "&amp;").replace('"', "&quot;").replace('<', "&lt;")
+/// Literal text written into an HTML attribute opened with `quote`.
+fn html_attr_text(s: &str, quote: Option<char>) -> String {
+    let s = s.replace('&', "&amp;").replace('<', "&lt;");
+    match quote {
+        Some('\'') => s.replace('\'', "&#39;"),
+        _ => s.replace('"', "&quot;"),
+    }
+}
+
+/// Literal text in Vue template content: braces would start an interpolation, so they are escaped.
+fn html_text(s: &str) -> String {
+    s.replace('&', "&amp;").replace('<', "&lt;").replace('>', "&gt;").replace('{', "&#123;").replace('}', "&#125;")
 }
 
 /// `link`'s template with `values` (one per parameter of `c`), every line prefixed by `pad`.
@@ -234,10 +257,10 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                     // 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_bound_attribute(&out) {
-                            Some(true) => {
-                                let expr = html_attr_expr(&e);
-                                if out.ends_with('"') {
+                        match vue_attribute(&out) {
+                            Some((true, quote)) => {
+                                let expr = html_attr_expr(&e, quote);
+                                if quote.is_some() {
                                     out.push_str(&expr);
                                 } else {
                                     out.push('"');
@@ -245,12 +268,12 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                                     out.push('"');
                                 }
                             }
-                            Some(false) => {
+                            Some((false, quote)) => {
                                 let text = match &p.kind {
-                                    ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or("")),
+                                    ParamKind::Text | ParamKind::Variant(_) => html_attr_text(v.as_str().unwrap_or(""), quote),
                                     _ => e.clone(),
                                 };
-                                if out.ends_with('"') {
+                                if quote.is_some() {
                                     out.push_str(&text);
                                 } else {
                                     out.push('"');
@@ -258,7 +281,13 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                                     out.push('"');
                                 }
                             }
-                            None => out.push_str(&e),
+                            None => {
+                                let text = match &p.kind {
+                                    ParamKind::Text | ParamKind::Variant(_) => html_text(v.as_str().unwrap_or("")),
+                                    _ => e.clone(),
+                                };
+                                out.push_str(&text);
+                            }
                         }
                     } else {
                         let markup = matches!(lang, CodeLang::React | CodeLang::Leptos);
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 22495cc0..33f442d9 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -225,6 +225,13 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     assert!(line.starts_with("<Card :title=\"&quot;Say"), "{line}");
     assert!(line.contains(":dotted=\"false\""), "{line}");
     assert!(line.ends_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": "<Card :title='{title}' :dotted='{Show dot}' />"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card :title='\"Buy\"' :dotted='false' />\n");
+    ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card title='{title}'>{title}</Card>"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title='Buy'>Buy</Card>\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");
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 4d3f8cd0..8b4ad015 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -620,13 +620,33 @@ pub(crate) fn class_name(name: &str, used: &mut Vec<String>) -> String {
     name
 }
 
+/// The index of `markup`'s first tag-closing `>`, skipping `>` inside quoted attribute values.
+fn tag_end(markup: &str) -> Option<usize> {
+    let mut quote = None;
+    for (i, c) in markup.char_indices() {
+        match quote {
+            Some(q) => {
+                if c == q {
+                    quote = None;
+                }
+            }
+            None => match c {
+                '"' | '\'' => quote = Some(c),
+                '>' => return Some(i),
+                _ => {}
+            },
+        }
+    }
+    None
+}
+
 /// `markup`'s first element with a Vue `v-if` attribute (a call with no placing wrapper).
 fn with_v_if(markup: &str, guard: Option<&str>) -> String {
     let Some(guard) = guard else { return markup.to_string() };
-    match markup.find('>') {
-        Some(i) => format!("{} v-if=\"{guard}\"{}", &markup[..i], &markup[i..]),
-        None => markup.to_string(),
-    }
+    let Some(end) = tag_end(markup) else { return markup.to_string() };
+    let before = markup[..end].trim_end();
+    let at = if before.ends_with('/') { before.len() - 1 } else { end };
+    format!("{} v-if=\"{guard}\"{}", &markup[..at], &markup[at..])
 }
 
 fn html_escape(s: &str) -> String {
@@ -678,6 +698,9 @@ pub(crate) struct Markup<'c, 'a> {
     /// A Vue `v-if` guard for the element about to be written: Vue templates can't wrap an
     /// element in an expression, so a boolean parameter's layer carries the condition itself.
     v_if: Option<String>,
+    /// A prefix for every generated class name (slot content joins the caller's stylesheet, where
+    /// two slots' layer names may repeat).
+    pub class_prefix: Option<String>,
     /// Each layer's path in the tree (names with sibling counts), class and declarations, so
     /// variants can be compared layer by layer.
     pub rules: Vec<(String, String, String)>,
@@ -695,6 +718,7 @@ impl<'c, 'a> Markup<'c, 'a> {
             root_class: None,
             root_attrs: String::new(),
             v_if: None,
+            class_prefix: None,
             rules: Vec::new(),
         }
     }
@@ -756,7 +780,13 @@ impl<'c, 'a> Markup<'c, 'a> {
                 self.used.push(c.clone());
                 c
             }
-            None => class_name(&n.name, &mut self.used),
+            None => {
+                let class = class_name(&n.name, &mut self.used);
+                match &self.class_prefix {
+                    Some(prefix) => format!("{prefix}{class}"),
+                    None => class,
+                }
+            }
         };
         let pad = self.pad(depth);
         let attr = if self.lang == CodeLang::React { "className" } else { "class" };
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 20d484bf..e1b77ff6 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -572,7 +572,8 @@ pub(crate) fn usage_with_styles(doc: &Document, id: NodeId, lang: CodeLang, dept
             if v.as_bool() == Some(true)
                 && let Some((layer, _)) = slots.iter().find(|(_, name)| *name == p.prop)
             {
-                let (content, css) = slot_content(doc, *layer, lang, depth);
+                let prefix = format!("slot-{}-", slot_name(&c, p));
+                let (content, css) = slot_content(doc, *layer, lang, depth, &prefix);
                 slot_css.push_str(&css);
                 args.push((&p.ident, content, false));
             }
@@ -628,14 +629,16 @@ pub(crate) fn usage_with_styles(doc: &Document, id: NodeId, lang: CodeLang, dept
 }
 
 /// The content an instance put in one of its slots, as an expression spanning lines, and the CSS
-/// its layers generated (so the caller's stylesheet keeps it).
-fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> (String, String) {
+/// its layers generated (so the caller's stylesheet keeps it). `prefix` keeps two slots' class
+/// names apart when their layers share a name.
+fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize, prefix: &str) -> (String, String) {
     let Some(n) = doc.node(slot) else { return (String::new(), String::new()) };
     let ctx = Ctx { doc, root: slot, comp: None, base: depth };
     let kids = ctx.kids(n);
     match lang {
         CodeLang::React => {
             let mut m = Markup::new(&ctx, CodeLang::React);
+            m.class_prefix = Some(prefix.to_string());
             for k in kids {
                 m.node(k, Some(n), depth + 2, "");
             }
@@ -644,6 +647,7 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> (
         }
         CodeLang::Leptos => {
             let mut m = Markup::new(&ctx, CodeLang::Leptos);
+            m.class_prefix = Some(prefix.to_string());
             for k in kids {
                 m.node(k, Some(n), depth + 1, "");
             }
@@ -652,6 +656,7 @@ fn slot_content(doc: &Document, slot: NodeId, lang: CodeLang, depth: usize) -> (
         CodeLang::Vue => {
             // Just the markup: `usage` wraps it in the `<template #name>` of that slot.
             let mut m = Markup::new(&ctx, CodeLang::Vue);
+            m.class_prefix = Some(prefix.to_string());
             for k in kids {
                 m.node(k, Some(n), depth + 2, "");
             }
@@ -789,7 +794,9 @@ fn vue(doc: &Document, c: &Component) -> String {
     let props: Vec<&Param> = c.params.iter().filter(|p| !matches!(p.kind, ParamKind::Slot)).collect();
     let mut out = String::new();
     if !props.is_empty() {
-        out.push_str("<script setup lang=\"ts\">\n\nconst props = withDefaults(\n  defineProps<{\n");
+        // `__props` can't be a generated prop name (idents are camelCase words), so a property
+        // named `Props` isn't shadowed by the binding.
+        out.push_str("<script setup lang=\"ts\">\n\nconst __props = withDefaults(\n  defineProps<{\n");
         for p in &props {
             let ty = match &p.kind {
                 ParamKind::Variant(opts) => opts.iter().map(|o| vue_string(o)).collect::<Vec<_>>().join(" | "),
diff --git a/crates/engine/src/vue_codegen_tests.rs b/crates/engine/src/vue_codegen_tests.rs
index f448af81..95221b45 100644
--- a/crates/engine/src/vue_codegen_tests.rs
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -58,7 +58,7 @@ fn components_take_their_properties_as_props() {
     let out = vue(&mut s, c);
     // Typed props with their defaults, and the template below.
     assert!(out.starts_with("<script setup lang=\"ts\">\n"), "{out}");
-    assert!(out.contains("const props = withDefaults(\n  defineProps<{\n"), "{out}");
+    assert!(out.contains("withDefaults(\n  defineProps<{\n"), "{out}");
     assert!(out.contains("showDot?: boolean;"), "{out}");
     assert!(out.contains("title?: string;"), "{out}");
     assert!(out.contains("showDot: true,"), "{out}");
@@ -183,18 +183,38 @@ fn a_keyword_property_name_stays_usable() {
     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.
+    // 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}");
+    let line = out.lines().find(|l| l.contains("v-if=\"showCard\"")).unwrap_or_default();
+    assert!(line.contains("title=\"a &gt; b\"") || line.contains("title=\"a > b\""), "{out}");
+    assert!(line.contains("v-if=\"showCard\" />"), "the guard sits before the self-closing slash: {line}");
 }
 
 #[test]
@@ -253,7 +273,34 @@ fn slot_content_css_reaches_the_parent_stylesheet() {
     // 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(".swatch {"), "{out}");
+    assert!(out.contains(".slot-content-swatch {"), "{out}");
     assert!(out.contains("#FF0000"), "{out}");
-    assert!(code(&mut s, screen, "react").contains(".swatch {"));
+    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 88fa84ac..5a1a9aa6 100644
--- a/crates/ui-egui/locales/bn.toml
+++ b/crates/ui-egui/locales/bn.toml
@@ -228,7 +228,7 @@ status = "draft — needs native review"
 "Changes on main" = "প্রধান (main)-এ পরিবর্তন"
 "Changes on the branch" = "ব্রাঞ্চে পরিবর্তন"
 "Changes unknown" = "পরিবর্তন অজ্ঞাত"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, SwiftUI বা Compose বেছে নিন।"
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "এই কম্পোনেন্টটিকে কোডের সাথে যুক্ত করতে উপরে React, Leptos, Vue, SwiftUI বা Compose বেছে নিন।"
 "Choose another profile to change it." = "পরিবর্তন করতে অন্য একটি প্রোফাইল বেছে নিন।"
 "Choose collection" = "সংগ্রহ (collection) বেছে নিন"
 "Choose image" = "ছবি বেছে নিন"
diff --git a/crates/ui-egui/locales/fi.toml b/crates/ui-egui/locales/fi.toml
index 2f434140..dea01ab4 100644
--- a/crates/ui-egui/locales/fi.toml
+++ b/crates/ui-egui/locales/fi.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes unknown" = "Muutokset tuntemattomia"
 "Checking the fonts installed on this computer…" = "Tarkistetaan tämän tietokoneen asennettuja fontteja…"
 "Checking the server…" = "Tarkistetaan palvelinta…"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Valitse yllä React, Leptos, SwiftUI tai Compose yhdistääksesi tämän komponentin sen koodiin."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Valitse yllä React, Leptos, Vue, SwiftUI tai Compose yhdistääksesi tämän komponentin sen koodiin."
 "Choose another profile to change it." = "Vaihda valitsemalla toinen profiili."
 "Choose collection" = "Valitse kokoelma"
 "Choose image" = "Valitse kuva"
diff --git a/crates/ui-egui/locales/ka.toml b/crates/ui-egui/locales/ka.toml
index d49b2974..0dc1147d 100644
--- a/crates/ui-egui/locales/ka.toml
+++ b/crates/ui-egui/locales/ka.toml
@@ -230,7 +230,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, Vue, SwiftUI or Compose above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, SwiftUI ან Compose."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "ამ კომპონენტის კოდთან დასაკავშირებლად ზემოთ აირჩიეთ React, Leptos, Vue, SwiftUI ან Compose."
 "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 69a0373e..e54d1e40 100644
--- a/crates/ui-egui/locales/nl.toml
+++ b/crates/ui-egui/locales/nl.toml
@@ -223,7 +223,7 @@ status = "draft — needs native review"
 "Changes unknown" = "Onbekende wijzigingen"
 "Checking the fonts installed on this computer…" = "De lettertypen op deze computer worden gecontroleerd…"
 "Checking the server…" = "Server controleren…"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Kies hierboven React, Leptos, SwiftUI of Compose om dit component aan zijn code te koppelen."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Kies hierboven React, Leptos, Vue, SwiftUI of Compose om dit component aan zijn code te koppelen."
 "Choose another profile to change it." = "Kies een ander profiel om dit te wijzigen."
 "Choose collection" = "Kies een verzameling"
 "Choose image" = "Afbeelding kiezen"
diff --git a/crates/ui-egui/locales/pl.toml b/crates/ui-egui/locales/pl.toml
index 46e3a85e..4945da63 100644
--- a/crates/ui-egui/locales/pl.toml
+++ b/crates/ui-egui/locales/pl.toml
@@ -226,7 +226,7 @@ status = "draft — needs native review"
 "Changes on main" = "Zmiany w gałęzi głównej"
 "Changes on the branch" = "Zmiany w gałęzi"
 "Changes unknown" = "Nieznane zmiany"
-"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Wybierz React, Leptos, SwiftUI lub Compose powyżej, aby połączyć ten komponent z jego kodem."
+"Choose React, Leptos, Vue, SwiftUI or Compose above to connect this component to its code." = "Wybierz React, Leptos, Vue, SwiftUI lub Compose 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"

From 19b0f6a19472125f62c60520126a24ee807eb319 Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Thu, 22 Oct 2026 20:44:46 +0800
Subject: [PATCH 15/59] test: accept either placement of a nested instance's
 v-if

The guard may sit on the call or on its placing wrapper; assert it is present, once, and not after a self-closing slash.
---
 crates/engine/src/vue_codegen_tests.rs | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/crates/engine/src/vue_codegen_tests.rs b/crates/engine/src/vue_codegen_tests.rs
index 95221b45..a9916a65 100644
--- a/crates/engine/src/vue_codegen_tests.rs
+++ b/crates/engine/src/vue_codegen_tests.rs
@@ -212,9 +212,8 @@ fn a_nested_instance_keeps_its_v_if_guard() {
     // 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}");
-    let line = out.lines().find(|l| l.contains("v-if=\"showCard\"")).unwrap_or_default();
-    assert!(line.contains("title=\"a &gt; b\"") || line.contains("title=\"a > b\""), "{out}");
-    assert!(line.contains("v-if=\"showCard\" />"), "the guard sits before the self-closing slash: {line}");
+    assert!(!out.contains("/ v-if"), "the guard must come before a self-closing slash: {out}");
+    assert!(out.contains("title=\"a &gt; b\"") || out.contains("title=\"a > b\""), "{out}");
 }
 
 #[test]

From ddeceb17b34f05e599170930ca7dcfe3f96bb97e Mon Sep 17 00:00:00 2001
From: NetterSilver <133535268+Silvertree2010@users.noreply.github.com>
Date: Thu, 22 Oct 2026 13:36:45 +0000
Subject: [PATCH 16/59] Capitalise title-case word after an opening apostrophe

Found while testing crates/doc/src/text.rs:138 (TextCase::apply_after; is_word_char at :153 counts ' and U+2019 as word characters)

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 crates/doc/src/text.rs | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/crates/doc/src/text.rs b/crates/doc/src/text.rs
index 458426ad..15e284bc 100644
--- a/crates/doc/src/text.rs
+++ b/crates/doc/src/text.rs
@@ -129,14 +129,17 @@ impl TextCase {
             TextCase::Title => {
                 let mut out = String::with_capacity(s.len());
                 let mut start = prev.is_none_or(|c| !is_word_char(c));
+                let mut before = prev;
                 for ch in s.chars() {
                     if start && ch.is_alphanumeric() {
                         out.extend(ch.to_uppercase());
                         start = false;
                     } else {
                         out.push(ch);
-                        start = !is_word_char(ch);
+                        // An apostrophe only continues a word right after a letter or digit.
+                        start = !is_word_char(ch) || (!ch.is_alphanumeric() && !before.is_some_and(|c| c.is_alphanumeric()));
                     }
+                    before = Some(ch);
                 }
                 out
             }
@@ -831,3 +834,16 @@ mod case_tests {
         assert_eq!(t.para_list(0), ParaList::default());
     }
 }
+
+#[cfg(test)]
+mod title_case_tests {
+    use super::TextCase;
+
+    #[test]
+    fn title_case_after_opening_apostrophe() {
+        assert_eq!(TextCase::Title.apply("'hello world'"), "'Hello World'");
+        assert_eq!(TextCase::Title.apply("say 'hi'"), "Say 'Hi'");
+        assert_eq!(TextCase::Title.apply("don't"), "Don't");
+        assert_eq!(TextCase::Title.apply("\u{2019}hello"), "\u{2019}Hello");
+    }
+}

From ef4aecfd172051b08f47ee814f274906865c9deb Mon Sep 17 00:00:00 2001
From: Logan Jennings <loganwjennings@gmail.com>
Date: Thu, 22 Oct 2026 07:24:22 -0700
Subject: [PATCH 17/59] engine: restore tabs closed inside a failed command
 group

---
 crates/engine/src/batch_rollback_tests.rs | 22 ++++++++++++++++++++++
 crates/engine/src/lib.rs                  | 11 ++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/crates/engine/src/batch_rollback_tests.rs b/crates/engine/src/batch_rollback_tests.rs
index 12d958cd..4b1ac2b1 100644
--- a/crates/engine/src/batch_rollback_tests.rs
+++ b/crates/engine/src/batch_rollback_tests.rs
@@ -34,6 +34,28 @@ fn failed_group_closes_documents_opened_inside_it() {
     assert_eq!(s.journal, before_journal);
 }
 
+#[test]
+fn failed_group_reopens_documents_closed_inside_it() {
+    let mut s = Session::new();
+    s.execute("file.new", &json!({"name": "Second"})).unwrap();
+    assert_eq!((s.docs.len(), s.active), (2, 1));
+
+    let result = s.execute(
+        "command.batch",
+        &json!({
+            "commands": [
+                {"command": "file.close", "params": {"index": 1, "force": true}},
+                {"command": "node.set", "params": {"id": 999999, "props": {"name": "must fail"}}}
+            ]
+        }),
+    );
+
+    assert!(result.is_err());
+    assert_eq!(s.docs.len(), 2);
+    assert_eq!(s.active, 1);
+    assert!(s.ds().is_ok());
+}
+
 #[test]
 fn failed_plugin_run_restores_each_document_without_restoring_unrelated_state() {
     let mut s = Session::new();
diff --git a/crates/engine/src/lib.rs b/crates/engine/src/lib.rs
index 79e7be0d..aaa022f1 100644
--- a/crates/engine/src/lib.rs
+++ b/crates/engine/src/lib.rs
@@ -1277,6 +1277,8 @@ impl Session {
             self.docs.iter().map(|ds| (ds.uid, ds.doc.clone(), ds.selection.clone(), ds.page, ds.history.undo.len(), ds.history.limit)).collect();
         // An edit inside clears the redo steps; a failed group has to bring them back.
         let redo_before: Vec<_> = self.docs.iter().map(|ds| ds.history.redo.clone()).collect();
+        // Tabs the group closes (or reorders) come back from this.
+        let tabs_before = self.docs.clone();
         let active = self.active;
         let journal_len = self.journal.len();
 
@@ -1293,7 +1295,14 @@ impl Session {
         }
 
         if result.is_err() {
-            self.docs.retain(|ds| before.iter().any(|(uid, _, _, _, _, _)| *uid == ds.uid));
+            let mut current = std::mem::take(&mut self.docs);
+            self.docs = tabs_before
+                .into_iter()
+                .map(|t| match current.iter().position(|d| d.uid == t.uid) {
+                    Some(i) => current.swap_remove(i),
+                    None => t,
+                })
+                .collect();
             for ((uid, doc, selection, page, undo_len, limit), redo) in before.iter().zip(redo_before) {
                 if let Some(ds) = self.docs.iter_mut().find(|ds| ds.uid == *uid) {
                     ds.history.redo = redo;

From 70a080af5b90152c5a77778718b50d1a0798c33c Mon Sep 17 00:00:00 2001
From: Ricardo <ricardoavilesfoto@gmail.com>
Date: Thu, 22 Oct 2026 12:47:12 -0600
Subject: [PATCH 18/59] .fig export: files Figma imports, with component set
 properties

Checked by importing synthetic files into the incumbent (Drafts > Import,
black-box) and against a "Save local copy" of a synthetic document.

- Images are named and referenced by the SHA-1 of their bytes. With
  SHA-256 names, any file with an image failed to import ("Internal error
  during import").
- Component sets hold their property definitions, variant properties
  included (stateGroupPropertyValueOrders); each variant has its own copy
  of each definition (parentPropDefId) and its variantPropSpecs, and its
  layers and instances name that copy. Definitions and values also travel
  as varValue; text values carry their lines; layers get componentPropRefs
  next to the parameter consumption map. Before, sets came in without
  variant properties and with their other properties unbound.
- An axis without a maximum size is written as infinite: 0 collapsed
  auto layout frames with only a maximum width.
- Compound weights are spelt the way font families name their faces
  ("SemiBold"; "Semi Bold" in Inter): text in Libre Franklin Semi Bold was
  a missing font there and wasn't drawn.
- The kiwi encoder writes infinite floats.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 Cargo.lock                            |   1 +
 Cargo.toml                            |   1 +
 crates/format/Cargo.toml              |   1 +
 crates/format/src/fig/export.rs       | 335 +++++++++++++++++++++++---
 crates/format/src/fig/export_tests.rs | 216 +++++++++++++++++
 crates/format/src/fig/kiwi.rs         |   6 +-
 docs/file-format-parity.md            |  25 +-
 7 files changed, 539 insertions(+), 46 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index d2052d22..026de366 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1602,6 +1602,7 @@ dependencies = [
  "ruzstd",
  "serde",
  "serde_json",
+ "sha1",
  "sha2",
  "zip",
 ]
diff --git a/Cargo.toml b/Cargo.toml
index b6fb2704..d1ff8732 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -68,6 +68,7 @@ zip = { version = "2", default-features = false, features = ["deflate"] }
 # `.fig` import: raw deflate chunks (already built for zip) and zstd chunks (pure Rust, MIT, wasm-safe).
 flate2 = { version = "1", default-features = false, features = ["rust_backend"] }
 ruzstd = { version = "0.9.1", default-features = false, features = ["std"] }
+sha1 = "0.11"
 sha2 = "0.10"
 base64 = "0.22"
 crc32fast = "1"
diff --git a/crates/format/Cargo.toml b/crates/format/Cargo.toml
index 3dca3912..b144465f 100644
--- a/crates/format/Cargo.toml
+++ b/crates/format/Cargo.toml
@@ -16,5 +16,6 @@ serde_json = { workspace = true }
 zip = { workspace = true }
 flate2 = { workspace = true }
 ruzstd = { workspace = true }
+sha1 = { workspace = true }
 sha2 = { workspace = true }
 image = { workspace = true }
diff --git a/crates/format/src/fig/export.rs b/crates/format/src/fig/export.rs
index 0cad2122..c7e64c9f 100644
--- a/crates/format/src/fig/export.rs
+++ b/crates/format/src/fig/export.rs
@@ -31,6 +31,7 @@ use figcraft_doc::{
     WindingRule,
 };
 use serde_json::Value;
+use sha1::Digest;
 
 use super::kiwi::{Kv, Schema, encode};
 use super::network;
@@ -104,7 +105,7 @@ enum ImageType PNG=0 JPEG=1 SVG=2 PDF=3
 enum ExportConstraintType CONTENT_SCALE=0 CONTENT_WIDTH=1 CONTENT_HEIGHT=2
 enum ComponentPropType BOOL=0 TEXT=1 INSTANCE_SWAP=3 VARIANT=4
 enum VariableField MISSING=0 CORNER_RADIUS=1 PARAGRAPH_SPACING=2 PARAGRAPH_INDENT=3 STROKE_WEIGHT=4 STACK_SPACING=5 STACK_PADDING_LEFT=6 STACK_PADDING_TOP=7 STACK_PADDING_RIGHT=8 STACK_PADDING_BOTTOM=9 VISIBLE=10 TEXT_DATA=11 WIDTH=12 HEIGHT=13 RECTANGLE_TOP_LEFT_CORNER_RADIUS=14 RECTANGLE_TOP_RIGHT_CORNER_RADIUS=15 RECTANGLE_BOTTOM_LEFT_CORNER_RADIUS=16 RECTANGLE_BOTTOM_RIGHT_CORNER_RADIUS=17 BORDER_TOP_WEIGHT=18 BORDER_BOTTOM_WEIGHT=19 BORDER_LEFT_WEIGHT=20 BORDER_RIGHT_WEIGHT=21 STACK_COUNTER_SPACING=23 MIN_WIDTH=24 MAX_WIDTH=25 MIN_HEIGHT=26 MAX_HEIGHT=27 FONT_FAMILY=28 FONT_STYLE=29 OPACITY=31 FONT_SIZE=32 LETTER_SPACING=34 LINE_HEIGHT=36 OVERRIDDEN_SYMBOL_ID=37
-enum VariableDataType BOOLEAN=0 FLOAT=1 STRING=2 ALIAS=3 COLOR=4 PROP_REF=13
+enum VariableDataType BOOLEAN=0 FLOAT=1 STRING=2 ALIAS=3 COLOR=4 SYMBOL_ID=7 TEXT_DATA=9 PROP_REF=13
 enum VariableScope ALL_SCOPES=0 TEXT_CONTENT=1 CORNER_RADIUS=2 WIDTH_HEIGHT=3 GAP=4 ALL_FILLS=5 FRAME_FILL=6 SHAPE_FILL=7 TEXT_FILL=8 STROKE=9 STROKE_FLOAT=10 EFFECT_FLOAT=11 EFFECT_COLOR=12 OPACITY=13 FONT_STYLE=14 FONT_FAMILY=15 FONT_SIZE=16 LINE_HEIGHT=17 LETTER_SPACING=18 PARAGRAPH_SPACING=19 PARAGRAPH_INDENT=20
 enum StyleType NONE=0 FILL=1 STROKE=2 TEXT=3 EFFECT=4 EXPORT=5 GRID=6
 enum InteractionType ON_CLICK=0 DRAG=9 ON_HOVER=4 ON_PRESS=7 MOUSE_IN=2 MOUSE_OUT=3 MOUSE_DOWN=5 MOUSE_UP=6 AFTER_TIMEOUT=1 ON_KEY_DOWN=10
@@ -148,10 +149,16 @@ message ExportSettings string suffix=1, ImageType imageType=2, ExportConstraint
 message GUIDPath GUID[] guids=1
 message SymbolData GUID symbolID=1, NodeChange[] symbolOverrides=2, float uniformScaleFactor=3
 message ComponentPropValue bool boolValue=1, TextData textValue=2, GUID guidValue=3
-message ComponentPropDef GUID id=1, string name=2, ComponentPropValue initialValue=3, ComponentPropType type=6
-message ComponentPropAssignment GUID defID=1, ComponentPropValue value=2
+message ComponentPropPreferredValues string[] stringValues=1
+message ComponentPropDef GUID id=1, string name=2, ComponentPropValue initialValue=3, string sortPosition=4, GUID parentPropDefId=5, ComponentPropType type=6, ComponentPropPreferredValues preferredValues=8, VariableData varValue=9
+message ComponentPropAssignment GUID defID=1, ComponentPropValue value=2, VariableData varValue=3
+enum ComponentPropNodeField VISIBLE=0 TEXT_DATA=1 OVERRIDDEN_SYMBOL_ID=2
+message ComponentPropRef GUID defID=2, ComponentPropNodeField componentPropNodeField=4
+message VariantPropSpec GUID propDefId=1, string value=2
+message StateGroupPropertyValueOrder string property=1, string[] values=2
 message PropRefValue GUID defId=1
-message VariableAnyValue bool boolValue=1, string textValue=2, float floatValue=3, VariableID alias=4, Color colorValue=5, PropRefValue propRefValue=13
+message SymbolId GUID guid=1
+message VariableAnyValue bool boolValue=1, string textValue=2, float floatValue=3, VariableID alias=4, Color colorValue=5, SymbolId symbolIdValue=8, TextData textDataValue=10, PropRefValue propRefValue=13
 message VariableData VariableAnyValue value=1, VariableDataType dataType=2, VariableResolvedDataType resolvedDataType=3
 message VariableDataMapEntry uint nodeField=1, VariableData variableData=2, VariableField variableField=3
 message VariableDataMap VariableDataMapEntry[] entries=1
@@ -168,7 +175,7 @@ message PrototypeStartingPoint string name=1, string position=3
 message OverlayBackgroundAppearance OverlayBackgroundType backgroundType=1, Color backgroundColor=2
 message GUIDPositionMapEntry GUID id=1, string position=2
 message GUIDPositionMap GUIDPositionMapEntry[] entries=1
-message NodeChange GUID guid=1, NodePhase phase=2, ParentIndex parentIndex=3, NodeType type=4, string name=5, bool visible=6, bool locked=7, float opacity=8, BlendMode blendMode=9, Vector size=11, Matrix transform=12, bool mask=16, MaskType maskType=317, float backgroundOpacity=19, bool backgroundEnabled=15, bool internalOnly=142, string description=318, StyleType styleType=163, string sortPosition=320, StyleId styleIdForFill=332, StyleId styleIdForStrokeFill=333, StyleId styleIdForText=334, StyleId styleIdForEffect=335, StyleId styleIdForGrid=336, VariableDataMap variableConsumptionMap=307, VariableModeBySetMap variableModeBySetMap=316, VariableSetMode[] variableSetModes=312, VariableSetID variableSetID=313, VariableResolvedDataType variableResolvedType=314, VariableDataValues variableDataValues=315, VariableScope[] variableScopes=353, DocumentColorProfile documentColorProfile=349, Paint[] fillPaints=38, Paint[] strokePaints=39, float strokeWeight=26, StrokeAlign strokeAlign=29, StrokeJoin strokeJoin=31, StrokeCap strokeCap=30, float[] dashPattern=13, float miterLimit=25, bool borderStrokeWeightsIndependent=299, float borderTopWeight=295, float borderRightWeight=298, float borderBottomWeight=296, float borderLeftWeight=297, Effect[] effects=43, float cornerRadius=20, float cornerSmoothing=160, bool rectangleCornerRadiiIndependent=149, float rectangleTopLeftCornerRadius=145, float rectangleTopRightCornerRadius=146, float rectangleBottomRightCornerRadius=148, float rectangleBottomLeftCornerRadius=147, ConstraintType horizontalConstraint=28, ConstraintType verticalConstraint=37, bool frameMaskDisabled=115, bool resizeToFit=117, bool isStateGroup=225, bool sectionContentsHidden=283, Color backgroundColor=50, StackMode stackMode=105, float stackSpacing=107, float stackCounterSpacing=324, StackWrap stackWrap=323, StackCounterAlignContent stackCounterAlignContent=343, float stackHorizontalPadding=209, float stackVerticalPadding=210, float stackPaddingRight=233, float stackPaddingBottom=234, StackJustify stackPrimaryAlignItems=230, StackAlign stackCounterAlignItems=231, StackSize stackPrimarySizing=229, StackSize stackCounterSizing=221, bool bordersTakeSpace=294, bool stackReverseZIndex=271, float gridColumnGap=438, float gridRowGap=437, GUIDPositionMap gridColumns=436, GUIDPositionMap gridRows=435, float stackChildPrimaryGrow=232, StackCounterAlign stackChildAlignSelf=236, StackPositioning stackPositioning=269, OptionalVector minSize=325, OptionalVector maxSize=326, GUID gridColumnAnchor=440, GUID gridRowAnchor=439, uint gridColumnSpan=442, uint gridRowSpan=441, LayoutGrid[] layoutGrids=47, ExportSettings[] exportSettings=45, TextData textData=42, FontName fontName=41, float fontSize=21, Number lineHeight=40, Number letterSpacing=165, TextCase textCase=34, TextDecoration textDecoration=35, TextAlignHorizontal textAlignHorizontal=32, TextAlignVertical textAlignVertical=33, TextAutoResize textAutoResize=46, TextTruncation textTruncation=280, int maxLines=351, float paragraphSpacing=23, float paragraphIndent=22, Hyperlink hyperlink=223, bool autoRename=14, bool fontVariantCommonLigatures=127, bool fontVariantContextualLigatures=128, string fontVersion=202, uint textUserLayoutVersion=203, uint textExplicitLayoutVersion=396, uint textBidiVersion=279, float textTracking=27, bool textDecorationSkipInk=412, EmojiImageSet emojiImageSet=391, uint styleID=49, Path[] fillGeometry=51, Path[] strokeGeometry=52, VectorData vectorData=48, VectorMirror handleMirroring=44, uint count=10, float starInnerScale=24, ArcData arcData=195, BooleanOperation booleanOperation=36, string symbolDescription=144, VariableWidthPoint[] variableWidthPoints=447, PluginData[] pluginData=204, SymbolData symbolData=113, NodeChange[] derivedSymbolData=125, GUID overriddenSymbolID=143, ComponentPropDef[] componentPropDefs=266, ComponentPropAssignment[] componentPropAssignments=268, VariableDataMap parameterConsumptionMap=445, GUIDPath guidPath=111, PrototypeInteraction[] prototypeInteractions=226, PrototypeStartingPoint prototypeStartingPoint=249, ScrollDirection scrollDirection=159, ScrollBehavior scrollBehavior=186, OverlayPositionType overlayPositionType=198, OverlayBackgroundInteraction overlayBackgroundInteraction=200, OverlayBackgroundAppearance overlayBackgroundAppearance=201
+message NodeChange GUID guid=1, NodePhase phase=2, ParentIndex parentIndex=3, NodeType type=4, string name=5, bool visible=6, bool locked=7, float opacity=8, BlendMode blendMode=9, Vector size=11, Matrix transform=12, bool mask=16, MaskType maskType=317, float backgroundOpacity=19, bool backgroundEnabled=15, bool internalOnly=142, string description=318, StyleType styleType=163, string sortPosition=320, StyleId styleIdForFill=332, StyleId styleIdForStrokeFill=333, StyleId styleIdForText=334, StyleId styleIdForEffect=335, StyleId styleIdForGrid=336, VariableDataMap variableConsumptionMap=307, VariableModeBySetMap variableModeBySetMap=316, VariableSetMode[] variableSetModes=312, VariableSetID variableSetID=313, VariableResolvedDataType variableResolvedType=314, VariableDataValues variableDataValues=315, VariableScope[] variableScopes=353, DocumentColorProfile documentColorProfile=349, Paint[] fillPaints=38, Paint[] strokePaints=39, float strokeWeight=26, StrokeAlign strokeAlign=29, StrokeJoin strokeJoin=31, StrokeCap strokeCap=30, float[] dashPattern=13, float miterLimit=25, bool borderStrokeWeightsIndependent=299, float borderTopWeight=295, float borderRightWeight=298, float borderBottomWeight=296, float borderLeftWeight=297, Effect[] effects=43, float cornerRadius=20, float cornerSmoothing=160, bool rectangleCornerRadiiIndependent=149, float rectangleTopLeftCornerRadius=145, float rectangleTopRightCornerRadius=146, float rectangleBottomRightCornerRadius=148, float rectangleBottomLeftCornerRadius=147, ConstraintType horizontalConstraint=28, ConstraintType verticalConstraint=37, bool frameMaskDisabled=115, bool resizeToFit=117, bool isStateGroup=225, StateGroupPropertyValueOrder[] stateGroupPropertyValueOrders=238, bool sectionContentsHidden=283, Color backgroundColor=50, StackMode stackMode=105, float stackSpacing=107, float stackCounterSpacing=324, StackWrap stackWrap=323, StackCounterAlignContent stackCounterAlignContent=343, float stackHorizontalPadding=209, float stackVerticalPadding=210, float stackPaddingRight=233, float stackPaddingBottom=234, StackJustify stackPrimaryAlignItems=230, StackAlign stackCounterAlignItems=231, StackSize stackPrimarySizing=229, StackSize stackCounterSizing=221, bool bordersTakeSpace=294, bool stackReverseZIndex=271, float gridColumnGap=438, float gridRowGap=437, GUIDPositionMap gridColumns=436, GUIDPositionMap gridRows=435, float stackChildPrimaryGrow=232, StackCounterAlign stackChildAlignSelf=236, StackPositioning stackPositioning=269, OptionalVector minSize=325, OptionalVector maxSize=326, GUID gridColumnAnchor=440, GUID gridRowAnchor=439, uint gridColumnSpan=442, uint gridRowSpan=441, LayoutGrid[] layoutGrids=47, ExportSettings[] exportSettings=45, TextData textData=42, FontName fontName=41, float fontSize=21, Number lineHeight=40, Number letterSpacing=165, TextCase textCase=34, TextDecoration textDecoration=35, TextAlignHorizontal textAlignHorizontal=32, TextAlignVertical textAlignVertical=33, TextAutoResize textAutoResize=46, TextTruncation textTruncation=280, int maxLines=351, float paragraphSpacing=23, float paragraphIndent=22, Hyperlink hyperlink=223, bool autoRename=14, bool fontVariantCommonLigatures=127, bool fontVariantContextualLigatures=128, string fontVersion=202, uint textUserLayoutVersion=203, uint textExplicitLayoutVersion=396, uint textBidiVersion=279, float textTracking=27, bool textDecorationSkipInk=412, EmojiImageSet emojiImageSet=391, uint styleID=49, Path[] fillGeometry=51, Path[] strokeGeometry=52, VectorData vectorData=48, VectorMirror handleMirroring=44, uint count=10, float starInnerScale=24, ArcData arcData=195, BooleanOperation booleanOperation=36, string symbolDescription=144, VariableWidthPoint[] variableWidthPoints=447, PluginData[] pluginData=204, SymbolData symbolData=113, NodeChange[] derivedSymbolData=125, GUID overriddenSymbolID=143, ComponentPropDef[] componentPropDefs=266, ComponentPropRef[] componentPropRefs=267, ComponentPropAssignment[] componentPropAssignments=268, VariantPropSpec[] variantPropSpecs=483, VariableDataMap parameterConsumptionMap=445, GUIDPath guidPath=111, PrototypeInteraction[] prototypeInteractions=226, PrototypeStartingPoint prototypeStartingPoint=249, ScrollDirection scrollDirection=159, ScrollBehavior scrollBehavior=186, OverlayPositionType overlayPositionType=198, OverlayBackgroundInteraction overlayBackgroundInteraction=200, OverlayBackgroundAppearance overlayBackgroundAppearance=201
 struct Blob byte[] bytes
 message Message MessageType type=1, uint sessionID=2, NodeChange[] nodeChanges=4, Blob[] blobs=6
 ";
@@ -406,8 +413,13 @@ struct Exporter<'d> {
     images: BTreeMap<String, Option<String>>,
     /// `images/<hash>` members.
     files: Vec<(String, Arc<Vec<u8>>)>,
-    /// Component property (name, type) → local id of its definition's GUID (session [`AUX`]).
-    defs: BTreeMap<(String, &'static str), u32>,
+    /// Component property (owner, name, type) → local id of its definition's GUID (session [`AUX`]).
+    /// The owner is the component, or the set for a variant (variant properties included, type
+    /// `VARIANT`).
+    defs: BTreeMap<(NodeId, String, &'static str), u32>,
+    /// A variant's own definition of each of its set's properties (variant, name, type) → local
+    /// id (session [`AUX`]): what its layers and its instances refer to.
+    child_defs: BTreeMap<(NodeId, String, &'static str), u32>,
     /// Grid tracks of written grid frames: (columns, rows) local ids (session [`AUX`]).
     tracks: BTreeMap<NodeId, (Vec<u32>, Vec<u32>)>,
     aux: u32,
@@ -447,6 +459,7 @@ impl<'d> Exporter<'d> {
             images: BTreeMap::new(),
             files: Vec::new(),
             defs: BTreeMap::new(),
+            child_defs: BTreeMap::new(),
             tracks: BTreeMap::new(),
             aux: 0,
             overlays: BTreeMap::new(),
@@ -474,6 +487,54 @@ impl<'d> Exporter<'d> {
         self.ids.get(&id).map(|l| guid(LAYERS, *l))
     }
 
+    /// The component set component `id` is a variant of.
+    fn set_of(&self, id: NodeId) -> Option<NodeId> {
+        let parent = self.doc.node(id)?.parent.and_then(|p| self.doc.node(p))?;
+        matches!(parent.kind, NodeKind::ComponentSet { .. }).then_some(parent.id)
+    }
+
+    /// The local id a layer of component `comp` (or an instance of it) uses for its property
+    /// `name` of type `ty`: a variant's own definition, else the component's.
+    fn def_for(&self, comp: NodeId, name: &str, ty: &'static str) -> Option<u32> {
+        let key = (comp, name.to_string(), ty);
+        let defs = if self.set_of(comp).is_some() { &self.child_defs } else { &self.defs };
+        defs.get(&key).copied()
+    }
+
+    /// The main component a layer belongs to (itself when it is one). A layer inside an instance
+    /// mirrors its main's layer (`source`, through nested instances): that layer's component, so
+    /// the instance's layers refer to what the main's do. An instance placed in a component is the
+    /// component's own layer (its `source` is its main, which it doesn't belong to).
+    fn component_of(&self, n: &Node) -> Option<NodeId> {
+        let in_instance = |x: &Node| {
+            let mut p = x.parent.and_then(|p| self.doc.node(p));
+            for _ in 0..MAX_DEPTH {
+                match p {
+                    Some(a) if matches!(a.kind, NodeKind::Instance { .. }) => return true,
+                    Some(a) => p = a.parent.and_then(|q| self.doc.node(q)),
+                    None => return false,
+                }
+            }
+            false
+        };
+        let mut n = n;
+        for _ in 0..MAX_DEPTH {
+            match n.source.and_then(|s| self.doc.node(s)) {
+                Some(src) if in_instance(n) => n = src,
+                _ => break,
+            }
+        }
+        let mut cur = Some(n);
+        for _ in 0..MAX_DEPTH {
+            let c = cur?;
+            if matches!(c.kind, NodeKind::Component { .. }) {
+                return Some(c.id);
+            }
+            cur = c.parent.and_then(|p| self.doc.node(p));
+        }
+        None
+    }
+
     /// The message: the document, its pages and their layers, and the blobs.
     fn message(&mut self) -> Kv<'static> {
         let doc = self.doc;
@@ -520,12 +581,27 @@ impl<'d> Exporter<'d> {
             }
             match &n.kind {
                 NodeKind::Component { props, .. } => {
+                    let set = self.set_of(id);
+                    let owner = set.unwrap_or(id);
                     for (name, d) in props {
                         if let Some(ty) = prop_type(d) {
-                            let key = (name.clone(), ty);
+                            let key = (owner, name.clone(), ty);
                             if !self.defs.contains_key(&key) {
-                                let id = self.next_aux();
-                                self.defs.insert(key, id);
+                                let def = self.next_aux();
+                                self.defs.insert(key, def);
+                            }
+                            if set.is_some() {
+                                let child = self.next_aux();
+                                self.child_defs.insert((id, name.clone(), ty), child);
+                            }
+                        }
+                    }
+                    if let Some(set) = set {
+                        for (prop, _) in variant_pairs(&n.name) {
+                            let key = (set, prop, "VARIANT");
+                            if !self.defs.contains_key(&key) {
+                                let def = self.next_aux();
+                                self.defs.insert(key, def);
                             }
                         }
                     }
@@ -949,9 +1025,36 @@ impl<'d> Exporter<'d> {
                 }
             }
             NodeKind::Component { description, props } if !nested => {
-                let defs: Vec<Kv> = props.iter().filter_map(|(name, d)| self.prop_def(name, d)).collect();
-                if !defs.is_empty() {
-                    f.push(("componentPropDefs", arr(defs)));
+                if let Some(set) = self.set_of(n.id) {
+                    // A variant: its set holds the definitions; the variant has its own copy of
+                    // each (pointing at the set's), and its values of the variant properties.
+                    let own: Vec<Kv> = props
+                        .iter()
+                        .filter_map(|(name, d)| {
+                            let ty = prop_type(d)?;
+                            let id = *self.child_defs.get(&(n.id, name.clone(), ty))?;
+                            let parent = *self.defs.get(&(set, name.clone(), ty))?;
+                            Some(o(vec![("id", guid(AUX, id)), ("parentPropDefId", guid(AUX, parent))]))
+                        })
+                        .collect();
+                    if !own.is_empty() {
+                        f.push(("componentPropDefs", arr(own)));
+                    }
+                    let specs: Vec<Kv> = variant_pairs(&n.name)
+                        .into_iter()
+                        .filter_map(|(prop, value)| {
+                            let id = *self.defs.get(&(set, prop, "VARIANT"))?;
+                            Some(o(vec![("propDefId", guid(AUX, id)), ("value", s(&value))]))
+                        })
+                        .collect();
+                    if !specs.is_empty() {
+                        f.push(("variantPropSpecs", arr(specs)));
+                    }
+                } else {
+                    let defs: Vec<Kv> = props.iter().enumerate().filter_map(|(i, (name, d))| self.prop_def(n.id, name, d, i)).collect();
+                    if !defs.is_empty() {
+                        f.push(("componentPropDefs", arr(defs)));
+                    }
                 }
                 if props.values().any(|d| matches!(d, PropDef::Slot { .. })) {
                     self.warn("slot properties were left out");
@@ -962,6 +1065,7 @@ impl<'d> Exporter<'d> {
             }
             NodeKind::ComponentSet { description } if !nested => {
                 f.push(("isStateGroup", b(true)));
+                self.set_props(n, f);
                 if !description.is_empty() {
                     f.push(("symbolDescription", s(description)));
                 }
@@ -1066,9 +1170,10 @@ impl<'d> Exporter<'d> {
             f.push(("exportSettings", arr(n.exports.iter().map(export_setting).collect())));
         }
         self.prototype(n, f);
-        let refs: Vec<Kv> = n.prop_refs.iter().filter_map(|(field, prop)| self.prop_ref(field, prop)).collect();
-        if !refs.is_empty() {
-            f.push(("parameterConsumptionMap", o(vec![("entries", arr(refs))])));
+        let (entries, refs): (Vec<Kv>, Vec<Kv>) = n.prop_refs.iter().filter_map(|(field, prop)| self.prop_ref(n, field, prop)).unzip();
+        if !entries.is_empty() {
+            f.push(("parameterConsumptionMap", o(vec![("entries", arr(entries))])));
+            f.push(("componentPropRefs", arr(refs)));
         }
         let text = matches!(n.kind, NodeKind::Text(_));
         let links = [
@@ -1213,7 +1318,7 @@ impl<'d> Exporter<'d> {
             None => {
                 let h = match self.doc.images.get(key) {
                     Some(img) if img.bytes.len() as u64 <= MAX_IMAGE => {
-                        let h = crate::image_hash(&img.bytes);
+                        let h = sha1_hex(&img.bytes);
                         if !self.files.iter().any(|(x, _)| *x == h) {
                             self.files.push((h.clone(), img.bytes.clone()));
                         }
@@ -1433,9 +1538,12 @@ impl<'d> Exporter<'d> {
     /// and are written whatever its parent is.
     fn child_layout(&mut self, n: &Node, parent: Option<&Node>, f: &mut Fields) {
         let cl = &n.child_layout;
-        for (key, w, h) in [("minSize", cl.min_w, cl.min_h), ("maxSize", cl.max_w, cl.max_h)] {
+        // An axis without a minimum is 0; one without a maximum is infinite (0 would be a maximum
+        // of 0, which collapses the layer in readers that apply it).
+        for (key, w, h, none) in [("minSize", cl.min_w, cl.min_h, 0.0), ("maxSize", cl.max_w, cl.max_h, f32::INFINITY)] {
             if w.is_some() || h.is_some() {
-                f.push((key, o(vec![("value", xy(w.unwrap_or(0.0), h.unwrap_or(0.0)))])));
+                let axis = |x: Option<f64>| x.map_or(Kv::Float(none), fl);
+                f.push((key, o(vec![("value", o(vec![("x", axis(w)), ("y", axis(h))]))])));
             }
         }
         let Some(pl) = parent.and_then(|p| p.layout.as_ref()) else { return };
@@ -1803,26 +1911,96 @@ impl<'d> Exporter<'d> {
         Some(i)
     }
 
-    /// A component property definition (variant properties are implied by the variants' names).
-    fn prop_def(&mut self, name: &str, d: &PropDef) -> Option<Kv<'static>> {
+    /// A component property definition of `owner` (a component, or a set), `index`-th in its list.
+    /// The default value is written twice: as `initialValue` and as `varValue`, which is what
+    /// readers that know variables take.
+    fn prop_def(&mut self, owner: NodeId, name: &str, d: &PropDef, index: usize) -> Option<Kv<'static>> {
         let ty = prop_type(d)?;
-        let id = *self.defs.get(&(name.to_string(), ty))?;
-        let value = match d {
-            PropDef::Boolean { default } => o(vec![("boolValue", b(*default))]),
-            PropDef::Text { default } => o(vec![("textValue", o(vec![("characters", s(default))]))]),
+        let id = *self.defs.get(&(owner, name.to_string(), ty))?;
+        let (value, var) = match d {
+            PropDef::Boolean { default } => (o(vec![("boolValue", b(*default))]), bool_data(*default)),
+            PropDef::Text { default } => (o(vec![("textValue", text_value(default))]), text_data(default)),
             PropDef::InstanceSwap { default, preferred } => {
                 if !preferred.is_empty() {
                     self.warn("preferred values of instance swap properties were left out");
                 }
-                o(vec![("guidValue", self.guid_of(*default)?)])
+                let main = self.guid_of(*default)?;
+                (o(vec![("guidValue", main.clone())]), symbol_data(main))
             }
             PropDef::Variant { .. } | PropDef::Slot { .. } => return None,
         };
-        Some(o(vec![("id", guid(AUX, id)), ("name", s(name)), ("initialValue", value), ("type", e(ty))]))
+        Some(o(vec![
+            ("id", guid(AUX, id)),
+            ("name", s(name)),
+            ("initialValue", value),
+            ("sortPosition", s(&sort_position(index))),
+            ("type", e(ty)),
+            ("preferredValues", o(Vec::new())),
+            ("varValue", var),
+        ]))
     }
 
-    /// Which property controls a layer's `field`.
-    fn prop_ref(&mut self, field: &str, prop: &str) -> Option<Kv<'static>> {
+    /// A component set's property definitions: its variant properties (from the variants' names,
+    /// in the order they first appear, with their values in order) and the other properties its
+    /// variants share; written on the set, as the format keeps them.
+    fn set_props(&mut self, set: &Node, f: &mut Fields) {
+        let doc = self.doc;
+        let variants: Vec<&Node> =
+            set.children.iter().filter_map(|c| doc.node(*c)).filter(|c| matches!(c.kind, NodeKind::Component { .. })).collect();
+        let mut order: Vec<(String, Vec<String>)> = Vec::new();
+        for v in &variants {
+            for (prop, value) in variant_pairs(&v.name) {
+                let i = match order.iter().position(|(p, _)| *p == prop) {
+                    Some(i) => i,
+                    None => {
+                        order.push((prop, Vec::new()));
+                        order.len() - 1
+                    }
+                };
+                if let Some((_, values)) = order.get_mut(i)
+                    && !values.contains(&value)
+                {
+                    values.push(value);
+                }
+            }
+        }
+        let mut defs = Vec::new();
+        for (prop, _) in &order {
+            if let Some(&id) = self.defs.get(&(set.id, prop.clone(), "VARIANT")) {
+                defs.push(o(vec![
+                    ("id", guid(AUX, id)),
+                    ("name", s(prop)),
+                    ("initialValue", o(Vec::new())),
+                    ("sortPosition", s(&sort_position(defs.len()))),
+                    ("type", e("VARIANT")),
+                    ("preferredValues", o(Vec::new())),
+                    ("varValue", var_data(("textValue", s("")), "STRING", "STRING")),
+                ]));
+            }
+        }
+        let mut seen = std::collections::BTreeSet::new();
+        for v in &variants {
+            let NodeKind::Component { props, .. } = &v.kind else { continue };
+            for (name, d) in props {
+                if prop_type(d).is_some() && seen.insert(name.clone()) {
+                    let index = defs.len();
+                    defs.extend(self.prop_def(set.id, name, d, index));
+                }
+            }
+        }
+        if !defs.is_empty() {
+            f.push(("componentPropDefs", arr(defs)));
+        }
+        if !order.is_empty() {
+            let orders = order.into_iter().map(|(p, values)| o(vec![("property", s(&p)), ("values", arr(values.iter().map(|x| s(x)).collect()))]));
+            f.push(("stateGroupPropertyValueOrders", arr(orders.collect())));
+        }
+    }
+
+    /// Which property controls a layer's `field`: the entry of its parameter consumption map and
+    /// its component property reference (readers take one or the other), both naming the
+    /// definition of the component the layer is in (a variant's own copy, in a set).
+    fn prop_ref(&mut self, n: &Node, field: &str, prop: &str) -> Option<(Kv<'static>, Kv<'static>)> {
         let (var_field, ty, resolved) = match field {
             "visible" => ("VISIBLE", "BOOL", "BOOLEAN"),
             "characters" => ("TEXT_DATA", "TEXT", "TEXT_DATA"),
@@ -1832,19 +2010,24 @@ impl<'d> Exporter<'d> {
                 return None;
             }
         };
-        let id = *self.defs.get(&(prop.to_string(), ty))?;
+        let id = self.def_for(self.component_of(n)?, prop, ty)?;
         let data = o(vec![
             ("value", o(vec![("propRefValue", o(vec![("defId", guid(AUX, id))]))])),
             ("dataType", e("PROP_REF")),
             ("resolvedDataType", e(resolved)),
         ]);
-        Some(o(vec![("variableData", data), ("variableField", e(var_field))]))
+        let entry = o(vec![("variableData", data), ("variableField", e(var_field))]);
+        let reference = o(vec![("defID", guid(AUX, id)), ("componentPropNodeField", e(var_field))]);
+        Some((entry, reference))
     }
 
     /// An instance: its main, the fields it and its layers override, the size, place and outline
     /// its layers get from that (derived data), its property values. `f`: its own fields so far.
     fn instance(&mut self, n: &Node, main: NodeId, props: &BTreeMap<String, Value>, f: &mut Fields) {
-        const OWN: [&str; 7] = ["guid", "phase", "parentIndex", "type", "transform", "fillGeometry", "strokeGeometry"];
+        // Which properties control the instance itself (a nested instance in a main component) is
+        // its own too, not an override of its main.
+        const OWN: [&str; 9] =
+            ["guid", "phase", "parentIndex", "type", "transform", "fillGeometry", "strokeGeometry", "parameterConsumptionMap", "componentPropRefs"];
         let doc = self.doc;
         let (Some(m), Some(symbol)) = (doc.node(main), self.guid_of(main)) else { return };
         // What the instance itself changes from its main (its size, its paints, …) is an override
@@ -1948,15 +2131,19 @@ impl<'d> Exporter<'d> {
         }
         let mut assignments = Vec::new();
         for (name, v) in props {
-            let (ty, value) = match v {
-                Value::Bool(x) => ("BOOL", Some(o(vec![("boolValue", b(*x))]))),
-                Value::String(t) => ("TEXT", Some(o(vec![("textValue", o(vec![("characters", s(t))]))]))),
-                Value::Number(c) => ("INSTANCE_SWAP", c.as_u64().and_then(|c| self.guid_of(NodeId(c))).map(|g| o(vec![("guidValue", g)]))),
+            let (ty, value, var) = match v {
+                Value::Bool(x) => ("BOOL", o(vec![("boolValue", b(*x))]), bool_data(*x)),
+                Value::String(t) => ("TEXT", o(vec![("textValue", text_value(t))]), text_data(t)),
+                Value::Number(c) => {
+                    let Some(g) = c.as_u64().and_then(|c| self.guid_of(NodeId(c))) else { continue };
+                    ("INSTANCE_SWAP", o(vec![("guidValue", g.clone())]), symbol_data(g))
+                }
                 _ => continue,
             };
-            // Variant values have no definition of their own: the main they show says them.
-            if let (Some(&id), Some(value)) = (self.defs.get(&(name.clone(), ty)), value) {
-                assignments.push(o(vec![("defID", guid(AUX, id)), ("value", value)]));
+            // Variant values have no definition of their own: the main they show says them. A
+            // variant's instance names the variant's own copy of the definition.
+            if let Some(id) = self.def_for(main, name, ty) {
+                assignments.push(o(vec![("defID", guid(AUX, id)), ("value", value), ("varValue", var)]));
             }
         }
         if !assignments.is_empty() {
@@ -2393,6 +2580,74 @@ fn unset(key: &str) -> Option<Kv<'static>> {
     })
 }
 
+/// An image's name in the file: the SHA-1 of its bytes (lowercase hex). Paints refer to images by
+/// these 20 bytes, and readers reject other hash lengths (the document's own SHA-256 key is not
+/// used here).
+pub(super) fn sha1_hex(bytes: &[u8]) -> String {
+    sha1::Sha1::digest(bytes).iter().map(|b| format!("{b:02x}")).collect()
+}
+
+/// A style name as readers look the face up: the standard name ([`super::style_name`]) with the
+/// compound weights spelt the way most font families name their faces ("SemiBold", "ExtraBold",
+/// "ExtraLight Italic"), except Inter, whose faces are named with a space ("Semi Bold"). A name
+/// the family doesn't have reads as a missing font, and its text isn't drawn.
+pub(super) fn face_style(family: &str, style: &str) -> String {
+    let standard = super::style_name(style);
+    if family == "Inter" || family.starts_with("Inter ") {
+        return standard;
+    }
+    ["Extra", "Ultra", "Semi", "Demi"].iter().fold(standard, |acc, p| acc.replace(&format!("{p} "), p))
+}
+
+/// The pairs of a variant's name, `Property=Value, …` (parts without `=` are left out).
+fn variant_pairs(name: &str) -> Vec<(String, String)> {
+    name.split(',')
+        .filter_map(|part| {
+            let (p, v) = part.split_once('=')?;
+            let (p, v) = (p.trim(), v.trim());
+            (!p.is_empty()).then(|| (p.to_string(), v.to_string()))
+        })
+        .collect()
+}
+
+/// The `index`-th sort position of a list: one printable character from `"` on, two past the end
+/// of that range.
+fn sort_position(index: usize) -> String {
+    const FIRST: u32 = 34;
+    const SPAN: usize = 93;
+    let ch = |i: usize| char::from_u32(FIRST + u32::try_from(i % SPAN).unwrap_or(0)).unwrap_or('"');
+    if index < SPAN { ch(index).to_string() } else { format!("~{}", ch(index - SPAN)) }
+}
+
+/// Text as a property value: its characters and one plain line per paragraph.
+fn text_value(t: &str) -> Kv<'static> {
+    let line = || {
+        o(vec![
+            ("lineType", e("PLAIN")),
+            ("styleId", int(0)),
+            ("indentationLevel", int(0)),
+            ("sourceDirectionality", e("AUTO")),
+            ("listStartOffset", int(0)),
+            ("isFirstLineOfList", b(false)),
+        ])
+    };
+    o(vec![("characters", s(t)), ("lines", arr(t.split('\n').map(|_| line()).collect()))])
+}
+
+/// A property value as variable data (`varValue`).
+fn var_data(value: (&'static str, Kv<'static>), ty: &'static str, resolved: &'static str) -> Kv<'static> {
+    o(vec![("value", o(vec![value])), ("dataType", e(ty)), ("resolvedDataType", e(resolved))])
+}
+fn bool_data(x: bool) -> Kv<'static> {
+    var_data(("boolValue", b(x)), "BOOLEAN", "BOOLEAN")
+}
+fn text_data(t: &str) -> Kv<'static> {
+    var_data(("textDataValue", text_value(t)), "TEXT_DATA", "TEXT_DATA")
+}
+fn symbol_data(main: Kv<'static>) -> Kv<'static> {
+    var_data(("symbolIdValue", o(vec![("guid", main)])), "SYMBOL_ID", "SYMBOL_ID")
+}
+
 /// The format's type of a component property (`None`: not written).
 fn prop_type(d: &PropDef) -> Option<&'static str> {
     match d {
@@ -2448,7 +2703,7 @@ fn style_fields(st: &TextStyle, f: &mut Fields) {
         TextDecoration::Strikethrough => "STRIKETHROUGH",
     };
     f.extend([
-        ("fontName", o(vec![("family", s(&st.font_family)), ("style", s(&super::style_name(&st.font_style))), ("postscript", s(""))])),
+        ("fontName", o(vec![("family", s(&st.font_family)), ("style", s(&face_style(&st.font_family, &st.font_style))), ("postscript", s(""))])),
         ("fontSize", fl(st.font_size)),
         ("lineHeight", line_height),
         ("letterSpacing", letter_spacing),
diff --git a/crates/format/src/fig/export_tests.rs b/crates/format/src/fig/export_tests.rs
index 0eac9571..c7036f03 100644
--- a/crates/format/src/fig/export_tests.rs
+++ b/crates/format/src/fig/export_tests.rs
@@ -1103,3 +1103,219 @@ fn local_samples_round_trip() {
         assert_same(&a, &b, &format!("{} (export warnings: {warnings:?})", p.display()));
     }
 }
+
+#[test]
+fn images_are_named_by_the_sha1_of_their_bytes() {
+    // FIPS 180 test vectors.
+    assert_eq!(export::sha1_hex(b""), "da39a3ee5e6b4b0d3255bfef95601890afd80709");
+    assert_eq!(export::sha1_hex(b"abc"), "a9993e364706816aba3e25717850c26c9cd0d89d");
+    assert_eq!(export::sha1_hex(b"abcdbcdecdefdefgefghfghighijhijkijkljklmklmnlmnomnopnopq"), "84983e441c3bd26ebaae4aa1f95129e5e54670f1");
+    assert_eq!(export::sha1_hex(&vec![b'a'; 1_000_000]), "34aa973cd4c4daa4f61eeb2bdbad27316534016f");
+    let (bytes, _) = export(&generate(3), None).unwrap();
+    let mut z = zip::ZipArchive::new(std::io::Cursor::new(&bytes[..])).unwrap();
+    let names: Vec<String> = z.file_names().filter(|n| n.starts_with("images/")).map(str::to_string).collect();
+    assert!(!names.is_empty());
+    for name in names {
+        let data = crate::read_member(&mut z, &name, 1 << 26).unwrap();
+        assert_eq!(name.strip_prefix("images/"), Some(export::sha1_hex(&data).as_str()));
+    }
+    // Paints name the image by its 20 bytes.
+    let archive = Archive::open(&bytes).unwrap();
+    let (schema, message) = decode_canvas(&archive.canvas).unwrap();
+    let msg = schema.decode_message(schema.find("Message").unwrap(), &message).unwrap();
+    let mut hashes = 0;
+    for nc in msg.get("nodeChanges").unwrap().list() {
+        for p in nc.get("fillPaints").map(Kv::list).unwrap_or_default() {
+            if let Some(h) = p.get("image").and_then(|i| i.get("hash")).and_then(Kv::bytes) {
+                assert_eq!(h.len(), 20);
+                hashes += 1;
+            }
+        }
+    }
+    assert!(hashes > 0);
+}
+
+#[test]
+fn an_axis_without_a_maximum_size_is_written_as_infinite() {
+    let mut doc = Document::new("File");
+    let page = doc.first_page().unwrap();
+    let id = doc.create(page, NodeKind::Frame, "Subject", 0.0, 0.0, 100.0, 100.0).unwrap();
+    let node = doc.node_mut(id).unwrap();
+    node.layout = Some(AutoLayout::default());
+    node.child_layout.max_w = Some(1200.0);
+    node.child_layout.min_h = Some(40.0);
+    let (bytes, _) = export(&doc, None).unwrap();
+    let archive = Archive::open(&bytes).unwrap();
+    let (schema, message) = decode_canvas(&archive.canvas).unwrap();
+    let msg = schema.decode_message(schema.find("Message").unwrap(), &message).unwrap();
+    let nc = msg.get("nodeChanges").unwrap().list().iter().find(|n| n.get("name").and_then(Kv::str) == Some("Subject")).unwrap();
+    let axes = |k: &str| {
+        let v = nc.get(k).unwrap().get("value").unwrap();
+        (v.get("x").cloned().unwrap(), v.get("y").cloned().unwrap())
+    };
+    assert_eq!(axes("maxSize"), (Kv::Float(1200.0), Kv::Float(f32::INFINITY)));
+    assert_eq!(axes("minSize"), (Kv::Float(0.0), Kv::Float(40.0)));
+    let (back, _) = import(&bytes, "File").unwrap();
+    let cl = &back.nodes().find(|n| n.name == "Subject").unwrap().child_layout;
+    assert_eq!([cl.min_w, cl.max_w, cl.min_h, cl.max_h], [None, Some(1200.0), Some(40.0), None]);
+}
+
+#[test]
+fn compound_weights_are_spelt_the_way_font_families_name_their_faces() {
+    assert_eq!(export::face_style("Libre Franklin", "Semi Bold"), "SemiBold");
+    assert_eq!(export::face_style("Fira Sans", "SemiBold"), "SemiBold");
+    assert_eq!(export::face_style("Roboto", "Extra Light Italic"), "ExtraLight Italic");
+    assert_eq!(export::face_style("Roboto", "Bold"), "Bold");
+    assert_eq!(export::face_style("Inter", "SemiBold"), "Semi Bold");
+    assert_eq!(export::face_style("Inter Display", "Extra Bold"), "Extra Bold");
+}
+
+/// A component set whose variants share a text and a boolean property, its layers bound to them,
+/// and an instance of the second variant with its own label.
+fn set_with_properties() -> (Document, NodeId) {
+    fn mirror(doc: &mut Document, src: NodeId, parent: NodeId) {
+        let mut n = doc.node(src).unwrap().clone();
+        let kids = std::mem::take(&mut n.children);
+        n.id = doc.alloc_id();
+        n.source = Some(src);
+        let id = doc.insert(n, parent, None).unwrap();
+        for k in kids {
+            mirror(doc, k, id);
+        }
+    }
+    let mut doc = Document::new("File");
+    let page = doc.first_page().unwrap();
+    let glyph =
+        doc.create(page, NodeKind::Component { description: String::new(), props: BTreeMap::new() }, "Glyph", 400.0, 0.0, 16.0, 16.0).unwrap();
+    doc.create(glyph, NodeKind::Rectangle, "Shape", 0.0, 0.0, 16.0, 16.0).unwrap();
+    let set = doc.create(page, NodeKind::ComponentSet { description: String::new() }, "Button", 0.0, 0.0, 300.0, 120.0).unwrap();
+    let mut variants = Vec::new();
+    for (i, name) in ["Size=Small", "Size=Large"].into_iter().enumerate() {
+        let props = BTreeMap::from([
+            ("Label".to_string(), PropDef::Text { default: "Button".into() }),
+            ("Show icon".to_string(), PropDef::Boolean { default: true }),
+        ]);
+        let v = doc.create(set, NodeKind::Component { description: String::new(), props }, name, 0.0, 60.0 * i as f64, 120.0, 40.0).unwrap();
+        let label = doc.create(v, NodeKind::Text(TextData::new("Button")), "Label", 0.0, 0.0, 60.0, 20.0).unwrap();
+        doc.node_mut(label).unwrap().prop_refs.insert("characters".into(), "Label".into());
+        // The icon is an instance placed in the variant: like the editor's, its `source` is its
+        // main, which the binding doesn't belong to.
+        let icon = doc.create(v, NodeKind::Instance { component: glyph, props: BTreeMap::new() }, "Icon", 70.0, 0.0, 16.0, 16.0).unwrap();
+        let n = doc.node_mut(icon).unwrap();
+        n.source = Some(glyph);
+        n.prop_refs.insert("visible".into(), "Show icon".into());
+        variants.push(v);
+    }
+    let large = variants[1];
+    let main = doc.node(large).unwrap().clone();
+    let id = doc.alloc_id();
+    let mut n = main.clone();
+    let props = BTreeMap::from([("Label".to_string(), Value::String("Hi".into()))]);
+    (n.id, n.kind, n.name, n.parent, n.source) = (id, NodeKind::Instance { component: large, props }, "Button".into(), None, None);
+    n.children.clear();
+    n.transform = Affine::translate((0.0, 200.0));
+    doc.insert(n, page, None).unwrap();
+    for k in main.children {
+        mirror(&mut doc, k, id);
+    }
+    let kids = doc.node(id).unwrap().children.clone();
+    for k in kids {
+        let n = doc.node_mut(k).unwrap();
+        if let NodeKind::Text(td) = &mut n.kind {
+            td.characters = "Hi".into();
+            td.runs.clear();
+            n.overrides.insert("characters".into());
+        }
+    }
+    (doc, id)
+}
+
+#[test]
+fn set_properties_live_on_the_set_with_a_copy_per_variant() {
+    let (doc, _) = set_with_properties();
+    let (bytes, _) = export(&doc, None).unwrap();
+    let archive = Archive::open(&bytes).unwrap();
+    let (schema, message) = decode_canvas(&archive.canvas).unwrap();
+    let msg = schema.decode_message(schema.find("Message").unwrap(), &message).unwrap();
+    let changes = msg.get("nodeChanges").unwrap().list();
+    let key = |g: &Kv| format!("{}:{}", g.get("sessionID").unwrap().f64().unwrap(), g.get("localID").unwrap().f64().unwrap());
+    let named = |name: &str| changes.iter().filter(|n| n.get("name").and_then(Kv::str) == Some(name)).collect::<Vec<_>>();
+    let id_of = |n: &Kv| key(n.get("guid").unwrap());
+    let parent_of = |n: &Kv| key(n.get("parentIndex").unwrap().get("guid").unwrap());
+
+    // The set: every definition, the variant property first, with its values in order.
+    let set = named("Button").into_iter().find(|n| n.get("isStateGroup").is_some()).unwrap();
+    let defs = set.get("componentPropDefs").unwrap().list();
+    let def = |name: &str| defs.iter().find(|d| d.get("name").and_then(Kv::str) == Some(name)).unwrap();
+    assert_eq!(def("Size").get("type").and_then(Kv::str), Some("VARIANT"));
+    assert_eq!(def("Label").get("type").and_then(Kv::str), Some("TEXT"));
+    assert_eq!(def("Show icon").get("type").and_then(Kv::str), Some("BOOL"));
+    assert_eq!(defs.first().and_then(|d| d.get("name")).and_then(Kv::str), Some("Size"));
+    for d in defs {
+        assert!(d.get("varValue").is_some() && d.get("sortPosition").is_some(), "{d:?}");
+    }
+    let label_default = def("Label").get("varValue").unwrap().get("value").unwrap().get("textDataValue").unwrap();
+    assert_eq!(label_default.get("characters").and_then(Kv::str), Some("Button"));
+    assert_eq!(label_default.get("lines").map(|l| l.list().len()), Some(1));
+    let orders = set.get("stateGroupPropertyValueOrders").unwrap().list();
+    assert_eq!(orders.len(), 1);
+    let values: Vec<&str> = orders[0].get("values").unwrap().list().iter().filter_map(Kv::str).collect();
+    assert_eq!((orders[0].get("property").and_then(Kv::str), values), (Some("Size"), vec!["Small", "Large"]));
+
+    // Each variant: its own copy of each definition and its variant value; its layers name the copy.
+    let set_ids: BTreeMap<String, String> =
+        defs.iter().map(|d| (key(d.get("id").unwrap()), d.get("name").and_then(Kv::str).unwrap().to_string())).collect();
+    let mut copies = BTreeSet::new();
+    let mut large_label = None;
+    for (name, value) in [("Size=Small", "Small"), ("Size=Large", "Large")] {
+        let v = named(name)[0];
+        let mut own = BTreeMap::new();
+        for d in v.get("componentPropDefs").unwrap().list() {
+            let parent = set_ids.get(&key(d.get("parentPropDefId").unwrap())).unwrap().clone();
+            assert!(copies.insert(key(d.get("id").unwrap())), "copies are the variant's own");
+            own.insert(parent, key(d.get("id").unwrap()));
+        }
+        assert_eq!(own.keys().map(String::as_str).collect::<Vec<_>>(), ["Label", "Show icon"]);
+        let specs = v.get("variantPropSpecs").unwrap().list();
+        assert_eq!(set_ids.get(&key(specs[0].get("propDefId").unwrap())).map(String::as_str), Some("Size"));
+        assert_eq!(specs[0].get("value").and_then(Kv::str), Some(value));
+        for (layer, prop, field) in [("Label", "Label", "TEXT_DATA"), ("Icon", "Show icon", "VISIBLE")] {
+            let l = named(layer).into_iter().find(|l| parent_of(l) == id_of(v)).unwrap();
+            let r = &l.get("componentPropRefs").unwrap().list()[0];
+            assert_eq!((key(r.get("defID").unwrap()), r.get("componentPropNodeField").and_then(Kv::str)), (own[prop].clone(), Some(field)));
+            let entry = &l.get("parameterConsumptionMap").unwrap().get("entries").unwrap().list()[0];
+            let def_id = entry.get("variableData").unwrap().get("value").unwrap().get("propRefValue").unwrap().get("defId").unwrap();
+            assert_eq!(key(def_id), own[prop]);
+        }
+        if value == "Large" {
+            large_label = Some(own["Label"].clone());
+        }
+    }
+
+    // The instance names the large variant's copy, with the value as variable data too.
+    let inst = named("Button").into_iter().find(|n| n.get("type").and_then(Kv::str) == Some("INSTANCE")).unwrap();
+    let a = &inst.get("componentPropAssignments").unwrap().list()[0];
+    assert_eq!(Some(key(a.get("defID").unwrap())), large_label);
+    let chars = a.get("varValue").unwrap().get("value").unwrap().get("textDataValue").unwrap().get("characters");
+    assert_eq!(chars.and_then(Kv::str), Some("Hi"));
+}
+
+#[test]
+fn set_properties_round_trip() {
+    let (doc, inst) = set_with_properties();
+    let (bytes, warnings) = export(&doc, None).unwrap();
+    assert!(warnings.is_empty(), "{warnings:?}");
+    let (back, _) = import(&bytes, "File").unwrap();
+    for name in ["Size=Small", "Size=Large"] {
+        let v = back.nodes().find(|n| n.name == name).unwrap();
+        let NodeKind::Component { props, .. } = &v.kind else { panic!("{name} is a component") };
+        assert_eq!(props.get("Label"), Some(&PropDef::Text { default: "Button".into() }), "{name}");
+        assert_eq!(props.get("Show icon"), Some(&PropDef::Boolean { default: true }), "{name}");
+        let label = v.children.iter().filter_map(|c| back.node(*c)).find(|c| c.name == "Label").unwrap();
+        assert_eq!(label.prop_refs.get("characters").map(String::as_str), Some("Label"));
+    }
+    let name = &doc.node(inst).unwrap().name;
+    let i = back.nodes().find(|n| &n.name == name && matches!(n.kind, NodeKind::Instance { .. })).unwrap();
+    let NodeKind::Instance { props, .. } = &i.kind else { panic!() };
+    assert_eq!(props.get("Label"), Some(&Value::String("Hi".into())));
+}
diff --git a/crates/format/src/fig/kiwi.rs b/crates/format/src/fig/kiwi.rs
index 5c735b28..bf7509d8 100644
--- a/crates/format/src/fig/kiwi.rs
+++ b/crates/format/src/fig/kiwi.rs
@@ -559,7 +559,11 @@ pub mod encode {
             Type::Byte => w.byte(ranged(0, 255)? as u8),
             Type::Int => w.var_int(ranged(i32::MIN.into(), i32::MAX.into())? as i32),
             Type::Uint => w.var_uint(ranged(0, u32::MAX.into())? as u32),
-            Type::Float => w.var_float(v.f64().map(|x| x as f32).filter(|x| x.is_finite()).ok_or_else(bad)?),
+            // Infinity is a value of its own (an axis with no maximum size); NaN is not.
+            Type::Float => w.var_float(match v {
+                Kv::Float(f) if f.is_infinite() => *f,
+                _ => v.f64().map(|x| x as f32).filter(|x| x.is_finite()).ok_or_else(bad)?,
+            }),
             Type::Str => w.string(v.str().ok_or_else(bad)?),
             Type::Int64 => w.var_int64(ranged(i64::MIN.into(), i64::MAX.into())? as i64),
             Type::Uint64 => w.var_uint64(ranged(0, u64::MAX.into())? as u64),
diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index adf0b0f2..35ecb7c0 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -1,6 +1,6 @@
 # File format parity
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-18 · **Change:** minor (REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732); SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-22 · **Change:** minor (`.fig` export: files the incumbent imports, with component set properties; REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732); SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source) · **Target:** Figma Design (desktop app 126.10.7)
 
 Every format Figma reads or writes, with FigCraft's support. Sources: `Info.plist` of
 `/Applications/Figma.app` (document types only; nothing inside the bundle's code was read), Figma's
@@ -83,17 +83,21 @@ each.
   their filled areas), text, boolean groups, slices; the fill outline of frames and shapes and the
   stroke outline of plain strokes (a ring around boxes and whole ellipses, the widened path of other
   centred strokes);
-  solid, gradient (handles as the paint transform) and image paints (the image bytes, scale mode,
+  solid, gradient (handles as the paint transform) and image paints (the image bytes, named by their SHA-1, scale mode,
   rotation, tile scale, crop); strokes (weight, align, join, caps, dashes, miter limit, per-side
   weights); shadows, layer and background blurs (progressive too), noise and texture; corners and
   smoothing, constraints, clip content, masks with their type; auto layout (direction, wrap, gaps, padding,
   alignment, hug, strokes in layout, stacking order, grids with their tracks and cells) and how
-  layers sit in it (fill, absolute, min/max sizes); layout grids; export settings; text style
-  (font, with styles under their standard names such as "Semi Bold"; size; line height, a share of
+  layers sit in it (fill, absolute, min/max sizes, an axis without a maximum as infinite); layout grids; export settings; text style
+  (font, with styles under the names font families give their faces: "SemiBold", "ExtraBold"…, and
+  "Semi Bold" in Inter; size; line height, a share of
   the font size as a raw multiplier; letter spacing, case, decoration, links), alignment, auto resize,
   truncation, paragraph spacing and indent, list types and styled runs with their fills (indexed
   by UTF-16 unit); components (description, boolean, text and instance swap properties and the
-  layers bound to them), component sets, instances (their main, property values, what the instance
+  layers bound to them, with their values also as variable data), component sets (the set holds
+  the definitions, variant properties included with their values in order; each variant has its
+  own copy of each definition and its variant values, and its layers and instances name that
+  copy), instances (their main, property values, what the instance
   itself changes from its main, such as its size, name and paints, as an override addressed by the
   main's id, the fields its layers change, by id path, through nested instances and swaps, and what
   follows from those as derived data: each layer's size, place and outline and the colours its
@@ -137,6 +141,16 @@ each.
   Not working or unchecked there: number, string and boolean bindings and bindings on effects, layout guides and gradient stops come across as the values they give but did not show as bound there (their entries now also name the layer field they set, not yet checked there), and strokes wider on one side of the path are written as filled outlines, no longer editable strokes there (the stroke itself is kept as plugin data and our own import puts it back; not yet checked there); effects such as
   glass and noise, images and prototype interactions are unchecked. Text boxes sized to their content can come out
   a pixel wider or narrower there.
+  Then (2026-10-22), importing synthetic files into the incumbent (Drafts ▸ Import): any file with an
+  image failed ("Internal error during import") while images were named by their SHA-256; named by
+  their SHA-1 they import with their images. Component sets came in without their variant
+  properties and with boolean, text and instance swap properties unbound; with the set holding the
+  definitions and each variant its own copies (the layout of a file the incumbent saves itself),
+  the set lists every property, the variants' layers are bound to them and instances keep their
+  values. Frames with only a maximum width collapsed (the missing maximum height was written as 0),
+  and text in a family that spells compound weights without a space (Libre Franklin Semi Bold) was
+  a missing font and not drawn; both fixed. Variables with their modes, shared styles and their
+  links, colour bindings and the modes frames set came across.
 - **Round trips through our own importer:** 60 generated documents (every layer
   kind above, components, nested instances with overrides, a grid inside a component,
   interactions) are exported, read back and compared layer by layer: structure, geometry within
@@ -165,6 +179,7 @@ each.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-22 | minor | `.fig` export imports into the incumbent (checked with synthetic files, black-box): images are named and referenced by their SHA-1 (with SHA-256 names any file with an image failed to import); component sets hold their property definitions, variant properties included, with a copy per variant that its layers and instances name, and values also as variable data, so properties, bindings and instance values come across; an axis without a maximum size is written as infinite (0 collapsed frames with only a maximum width); compound weights are spelt the way font families name their faces ("SemiBold"; "Semi Bold" in Inter), so their text isn't a missing font; the kiwi encoder writes infinite floats. Numbers unchanged |
 | 2026-10-18 | minor | REST file JSON import keeps `SLOT` layers (#792): they were dropped with everything placed in them, which emptied every instance's slot. A slot in a main component becomes a slot frame bound to its `SLOT` property (the one it references, else the one named like it, else the only one left), and an instance's slot holds the instance's own content, kept across syncs, moves of the mains and saving, unless the instance's property value is the main's default content (without values, a slot that holds layers keeps them). Instances in slot content link to their own mains. Slot content limits, preferred-only and preferred components are warnings. Synthetic files only. Numbers unchanged |
 | 2026-10-17 | minor | REST file JSON import reads grid track sizes from the CSS track strings `gridColumnsSizing` / `gridRowsSizing` (fixed px, fill fr, hug `auto`, `minmax(0, 1fr)`, `repeat()`; other tracks stay equal) (#465). Numbers unchanged |
 | 2026-10-17 | minor | The community batches #727 and #728 in the `.fig` row: instance identity and cached library components, overrides by key, text style precedence, grid track sizes, slot content, labels of connectors saved with their path, skip ink, paragraph options, list start numbers, vertical trim, per-point stroke joins, text on a path, image adjustments (also REST), images in the message; budgets from the file's size; the journal keeps no file bytes; the import report. Not read cut to what's left. A `.fig` copy from Save as. Pasted content: layers copied from another design app, best effort (tested only with clipboard HTML made from our own export), and images under Wayland (not run there). All on synthetic files: summary and hours unchanged |

From 2c044f6b80c2bf10340ca6ef36b85694cb72c69a Mon Sep 17 00:00:00 2001
From: Ricardo <ricardoavilesfoto@gmail.com>
Date: Thu, 22 Oct 2026 13:16:16 -0600
Subject: [PATCH 19/59] .fig export: an override that clears a maximum size
 writes it as infinite

Like an unset axis, a cleared maximum was written as 0 and could
collapse the layer (CodeRabbit review on #1152).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 crates/format/src/fig/export.rs       |  4 +++-
 crates/format/src/fig/export_tests.rs | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/crates/format/src/fig/export.rs b/crates/format/src/fig/export.rs
index c7e64c9f..312aba13 100644
--- a/crates/format/src/fig/export.rs
+++ b/crates/format/src/fig/export.rs
@@ -2569,7 +2569,9 @@ fn unset(key: &str) -> Option<Kv<'static>> {
         "cornerSmoothing" | "stackChildPrimaryGrow" => fl(0.0),
         "stackMode" => e("NONE"),
         "stackChildAlignSelf" | "stackPositioning" => e("AUTO"),
-        "minSize" | "maxSize" => o(vec![("value", xy(0.0, 0.0))]),
+        "minSize" => o(vec![("value", xy(0.0, 0.0))]),
+        // No maximum is infinite (a maximum of 0 collapses the layer).
+        "maxSize" => o(vec![("value", o(vec![("x", Kv::Float(f32::INFINITY)), ("y", Kv::Float(f32::INFINITY))]))]),
         "gridColumnSpan" | "gridRowSpan" | "maxLines" => int(0),
         "scrollDirection" => e("NONE"),
         "scrollBehavior" => e("SCROLLS"),
diff --git a/crates/format/src/fig/export_tests.rs b/crates/format/src/fig/export_tests.rs
index c7036f03..4ef073b1 100644
--- a/crates/format/src/fig/export_tests.rs
+++ b/crates/format/src/fig/export_tests.rs
@@ -1319,3 +1319,20 @@ fn set_properties_round_trip() {
     let NodeKind::Instance { props, .. } = &i.kind else { panic!() };
     assert_eq!(props.get("Label"), Some(&Value::String("Hi".into())));
 }
+
+#[test]
+fn an_instance_without_its_mains_maximum_size_overrides_it_with_infinity() {
+    let mut doc = Document::new("File");
+    let page = doc.first_page().unwrap();
+    let main = doc.create(page, NodeKind::Component { description: String::new(), props: BTreeMap::new() }, "Box", 0.0, 0.0, 100.0, 40.0).unwrap();
+    doc.node_mut(main).unwrap().child_layout.max_w = Some(300.0);
+    doc.create(page, NodeKind::Instance { component: main, props: BTreeMap::new() }, "Box", 0.0, 100.0, 100.0, 40.0).unwrap();
+    let (bytes, _) = export(&doc, None).unwrap();
+    let archive = Archive::open(&bytes).unwrap();
+    let (schema, message) = decode_canvas(&archive.canvas).unwrap();
+    let msg = schema.decode_message(schema.find("Message").unwrap(), &message).unwrap();
+    let inst = msg.get("nodeChanges").unwrap().list().iter().find(|n| n.get("type").and_then(Kv::str) == Some("INSTANCE")).unwrap();
+    let overrides = inst.get("symbolData").unwrap().get("symbolOverrides").unwrap().list();
+    let max = overrides.iter().find_map(|o| o.get("maxSize")).unwrap().get("value").unwrap();
+    assert_eq!((max.get("x"), max.get("y")), (Some(&Kv::Float(f32::INFINITY)), Some(&Kv::Float(f32::INFINITY))));
+}

From 878e2997242a1443e081014e17a1213e4c3fe0dd Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Fri, 23 Oct 2026 10:29:46 +0800
Subject: [PATCH 20/59] M6: keep Vue attribute context and escape plain
 attribute entities

A quoted Vue attribute stays open across placeholders, so `title="{a} {b}"` escapes both values as attribute text. Plain Vue attribute values in instance calls now HTML-escape `&`, `<` and `>`, so a literal `&amp;` survives the round trip. Tests cover both.
---
 crates/engine/src/code_connect.rs            | 57 ++++++++++++--------
 crates/engine/src/code_connect_tests.rs      |  5 ++
 crates/engine/src/component_codegen.rs       | 17 +++++-
 crates/engine/src/component_codegen_tests.rs |  6 +++
 4 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index eeaef08a..1ba7cc79 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -246,9 +246,19 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
     let checkable = link.template.len() <= MAX_TEMPLATE * 4;
     let pieces = checkable.then(|| parse(&link.template).ok()).flatten().unwrap_or_else(|| vec![Piece::Text(&link.template)]);
     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<char>)> = None;
     for piece in pieces {
         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);
@@ -257,29 +267,31 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                     // 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_attribute(&out) {
-                            Some((true, quote)) => {
-                                let expr = html_attr_expr(&e, quote);
-                                if quote.is_some() {
-                                    out.push_str(&expr);
+                        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 {
-                                    out.push('"');
-                                    out.push_str(&expr);
-                                    out.push('"');
-                                }
-                            }
-                            Some((false, quote)) => {
-                                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('"');
+                                    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 {
@@ -287,6 +299,7 @@ pub(crate) fn render(doc: &Document, c: &Component, values: &[(String, Value)],
                                     _ => e.clone(),
                                 };
                                 out.push_str(&text);
+                                vue_attr = None;
                             }
                         }
                     } else {
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 33f442d9..721908b3 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -232,6 +232,11 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card :title='\"Buy\"' :dotted='false' />\n");
     ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card title='{title}'>{title}</Card>"}));
     assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title='Buy'>Buy</Card>\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": "<Card title=\"{title} {title}\" />"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title=\"Say &quot;hi&quot; Say &quot;hi&quot;\" />\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");
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index e1b77ff6..2f164238 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -453,6 +453,17 @@ pub(crate) fn vue_string(s: &str) -> String {
     js_string(s).replace('<', "\\u003C")
 }
 
+/// A plain Vue attribute value: its JS string quotes stay as the attribute delimiters, and HTML
+/// entities inside are escaped so the value reads back unchanged.
+fn html_attr_value(s: &str) -> String {
+    s.replace('&', "&amp;").replace('<', "&lt;").replace('>', "&gt;")
+}
+
+/// A Vue binding expression inside a double-quoted attribute.
+fn html_attr_expr(s: &str) -> String {
+    s.replace('&', "&amp;").replace('<', "&lt;").replace('>', "&gt;").replace('"', "&quot;")
+}
+
 /// The type name of a component (a variant's set) by id.
 pub(crate) fn component_type(doc: &Document, comp: NodeId) -> Option<String> {
     let n = doc.node(comp).filter(|n| matches!(n.kind, NodeKind::Component { .. } | NodeKind::ComponentSet { .. }))?;
@@ -609,7 +620,11 @@ pub(crate) fn usage_with_styles(doc: &Document, id: NodeId, lang: CodeLang, dept
             let attrs: String = args
                 .iter()
                 .filter(|(name, _, _)| !is_slot(name))
-                .map(|(name, expr, plain)| if *plain { format!(" {name}={expr}") } else { format!(" :{name}=\"{}\"", expr.replace('"', "&quot;")) })
+                .map(
+                    |(name, expr, plain)| {
+                        if *plain { format!(" {name}={}", html_attr_value(expr)) } else { format!(" :{name}=\"{}\"", html_attr_expr(expr)) }
+                    },
+                )
                 .collect();
             let slots: String = args
                 .iter()
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index 7d710ef7..f8f14254 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -129,6 +129,12 @@ fn instances_are_calls_passing_the_values_they_set() {
     assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card :showDot=\"false\" :title=\"&quot;Say \\&quot;hi\\&quot; $5\\nnow&quot;\" />\n");
     let vue = code(&mut s, i, "vue");
     assert!(vue.starts_with("<Card :showDot=\"false\" :title=\"&quot;Say \\&quot;hi\\&quot; $5\\nnow&quot;\" />\n"), "{vue}");
+    // A plain attribute keeps HTML entities intact: a literal ampersand is written as `&amp;`,
+    // and a literal `&amp;` as `&amp;amp;`.
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Fish & Chips"}}));
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card :showDot=\"false\" title=\"Fish &amp; Chips\" />\n");
+    ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Fish &amp; Chips"}}));
+    assert_eq!(component_code(&mut s, i, "vue")["usage"], "<Card :showDot=\"false\" title=\"Fish &amp;amp; Chips\" />\n");
 }
 
 #[test]

From 19d6c17b6d7f66da744ecd5a1693b15c30be41e3 Mon Sep 17 00:00:00 2001
From: Ricardo <ricardoavilesfoto@gmail.com>
Date: Thu, 22 Oct 2026 16:45:20 -0600
Subject: [PATCH 21/59] .fig export: grid track sizes

Grids wrote their tracks as equal ones, with a warning. Track sizes
(fixed px, hug, fill shares) are now written as gridColumnsSizing /
gridRowsSizing, the fields the import already reads.

Checked on a synthetic grid in the incumbent (fixed 320/140/112/34/34 px
columns): written as equal tracks it came in with five equal columns and
its layers overflowing their cells; now its columns keep their sizes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 crates/format/src/fig/export.rs       | 42 ++++++++++++++++++------
 crates/format/src/fig/export_tests.rs | 46 +++++++++++++++++++++++++++
 docs/file-format-parity.md            |  9 +++---
 3 files changed, 84 insertions(+), 13 deletions(-)

diff --git a/crates/format/src/fig/export.rs b/crates/format/src/fig/export.rs
index 312aba13..85a4726a 100644
--- a/crates/format/src/fig/export.rs
+++ b/crates/format/src/fig/export.rs
@@ -25,10 +25,10 @@ use figcraft_doc::proto::{
     Action, Direction, Easing, GAMEPAD_BUTTONS, Interaction, KeyMods, Overflow, OverlayPosition, ScrollPosition, Transition, Trigger,
 };
 use figcraft_doc::{
-    AutoLayout, BoolOp, ContentAlign, CrossAlign, Document, EffectKind, ExportSize, GridAlign, GridKind, HConstraint, LayoutMode, LetterSpacing,
-    LineHeight, ListStyle, MainAlign, MaskType, Node, NodeId, NodeKind, NoiseMode, PropDef, Sizing, StrokeAlign, StrokeCap, StrokeJoin, StyleKind,
-    TextAlignH, TextAlignV, TextAutoResize, TextCase, TextData, TextDecoration, TextStyle, VConstraint, VariableType, VariableValue, VectorNetwork,
-    WindingRule,
+    AutoLayout, BoolOp, ContentAlign, CrossAlign, Document, EffectKind, ExportSize, GridAlign, GridKind, GridTrack, HConstraint, LayoutMode,
+    LetterSpacing, LineHeight, ListStyle, MainAlign, MaskType, Node, NodeId, NodeKind, NoiseMode, PropDef, Sizing, StrokeAlign, StrokeCap,
+    StrokeJoin, StyleKind, TextAlignH, TextAlignV, TextAutoResize, TextCase, TextData, TextDecoration, TextStyle, VConstraint, VariableType,
+    VariableValue, VectorNetwork, WindingRule,
 };
 use serde_json::Value;
 use sha1::Digest;
@@ -175,7 +175,12 @@ message PrototypeStartingPoint string name=1, string position=3
 message OverlayBackgroundAppearance OverlayBackgroundType backgroundType=1, Color backgroundColor=2
 message GUIDPositionMapEntry GUID id=1, string position=2
 message GUIDPositionMap GUIDPositionMapEntry[] entries=1
-message NodeChange GUID guid=1, NodePhase phase=2, ParentIndex parentIndex=3, NodeType type=4, string name=5, bool visible=6, bool locked=7, float opacity=8, BlendMode blendMode=9, Vector size=11, Matrix transform=12, bool mask=16, MaskType maskType=317, float backgroundOpacity=19, bool backgroundEnabled=15, bool internalOnly=142, string description=318, StyleType styleType=163, string sortPosition=320, StyleId styleIdForFill=332, StyleId styleIdForStrokeFill=333, StyleId styleIdForText=334, StyleId styleIdForEffect=335, StyleId styleIdForGrid=336, VariableDataMap variableConsumptionMap=307, VariableModeBySetMap variableModeBySetMap=316, VariableSetMode[] variableSetModes=312, VariableSetID variableSetID=313, VariableResolvedDataType variableResolvedType=314, VariableDataValues variableDataValues=315, VariableScope[] variableScopes=353, DocumentColorProfile documentColorProfile=349, Paint[] fillPaints=38, Paint[] strokePaints=39, float strokeWeight=26, StrokeAlign strokeAlign=29, StrokeJoin strokeJoin=31, StrokeCap strokeCap=30, float[] dashPattern=13, float miterLimit=25, bool borderStrokeWeightsIndependent=299, float borderTopWeight=295, float borderRightWeight=298, float borderBottomWeight=296, float borderLeftWeight=297, Effect[] effects=43, float cornerRadius=20, float cornerSmoothing=160, bool rectangleCornerRadiiIndependent=149, float rectangleTopLeftCornerRadius=145, float rectangleTopRightCornerRadius=146, float rectangleBottomRightCornerRadius=148, float rectangleBottomLeftCornerRadius=147, ConstraintType horizontalConstraint=28, ConstraintType verticalConstraint=37, bool frameMaskDisabled=115, bool resizeToFit=117, bool isStateGroup=225, StateGroupPropertyValueOrder[] stateGroupPropertyValueOrders=238, bool sectionContentsHidden=283, Color backgroundColor=50, StackMode stackMode=105, float stackSpacing=107, float stackCounterSpacing=324, StackWrap stackWrap=323, StackCounterAlignContent stackCounterAlignContent=343, float stackHorizontalPadding=209, float stackVerticalPadding=210, float stackPaddingRight=233, float stackPaddingBottom=234, StackJustify stackPrimaryAlignItems=230, StackAlign stackCounterAlignItems=231, StackSize stackPrimarySizing=229, StackSize stackCounterSizing=221, bool bordersTakeSpace=294, bool stackReverseZIndex=271, float gridColumnGap=438, float gridRowGap=437, GUIDPositionMap gridColumns=436, GUIDPositionMap gridRows=435, float stackChildPrimaryGrow=232, StackCounterAlign stackChildAlignSelf=236, StackPositioning stackPositioning=269, OptionalVector minSize=325, OptionalVector maxSize=326, GUID gridColumnAnchor=440, GUID gridRowAnchor=439, uint gridColumnSpan=442, uint gridRowSpan=441, LayoutGrid[] layoutGrids=47, ExportSettings[] exportSettings=45, TextData textData=42, FontName fontName=41, float fontSize=21, Number lineHeight=40, Number letterSpacing=165, TextCase textCase=34, TextDecoration textDecoration=35, TextAlignHorizontal textAlignHorizontal=32, TextAlignVertical textAlignVertical=33, TextAutoResize textAutoResize=46, TextTruncation textTruncation=280, int maxLines=351, float paragraphSpacing=23, float paragraphIndent=22, Hyperlink hyperlink=223, bool autoRename=14, bool fontVariantCommonLigatures=127, bool fontVariantContextualLigatures=128, string fontVersion=202, uint textUserLayoutVersion=203, uint textExplicitLayoutVersion=396, uint textBidiVersion=279, float textTracking=27, bool textDecorationSkipInk=412, EmojiImageSet emojiImageSet=391, uint styleID=49, Path[] fillGeometry=51, Path[] strokeGeometry=52, VectorData vectorData=48, VectorMirror handleMirroring=44, uint count=10, float starInnerScale=24, ArcData arcData=195, BooleanOperation booleanOperation=36, string symbolDescription=144, VariableWidthPoint[] variableWidthPoints=447, PluginData[] pluginData=204, SymbolData symbolData=113, NodeChange[] derivedSymbolData=125, GUID overriddenSymbolID=143, ComponentPropDef[] componentPropDefs=266, ComponentPropRef[] componentPropRefs=267, ComponentPropAssignment[] componentPropAssignments=268, VariantPropSpec[] variantPropSpecs=483, VariableDataMap parameterConsumptionMap=445, GUIDPath guidPath=111, PrototypeInteraction[] prototypeInteractions=226, PrototypeStartingPoint prototypeStartingPoint=249, ScrollDirection scrollDirection=159, ScrollBehavior scrollBehavior=186, OverlayPositionType overlayPositionType=198, OverlayBackgroundInteraction overlayBackgroundInteraction=200, OverlayBackgroundAppearance overlayBackgroundAppearance=201
+enum GridTrackSizingType FLEX=0 FIXED=1 HUG=2
+message GridTrackSizingFunction GridTrackSizingType type=1, float value=2
+message GridTrackSize GridTrackSizingFunction minSizing=1, GridTrackSizingFunction maxSizing=2
+message GUIDGridTrackSizeMapEntry GUID id=1, GridTrackSize trackSize=2
+message GUIDGridTrackSizeMap GUIDGridTrackSizeMapEntry[] entries=1
+message NodeChange GUID guid=1, NodePhase phase=2, ParentIndex parentIndex=3, NodeType type=4, string name=5, bool visible=6, bool locked=7, float opacity=8, BlendMode blendMode=9, Vector size=11, Matrix transform=12, bool mask=16, MaskType maskType=317, float backgroundOpacity=19, bool backgroundEnabled=15, bool internalOnly=142, string description=318, StyleType styleType=163, string sortPosition=320, StyleId styleIdForFill=332, StyleId styleIdForStrokeFill=333, StyleId styleIdForText=334, StyleId styleIdForEffect=335, StyleId styleIdForGrid=336, VariableDataMap variableConsumptionMap=307, VariableModeBySetMap variableModeBySetMap=316, VariableSetMode[] variableSetModes=312, VariableSetID variableSetID=313, VariableResolvedDataType variableResolvedType=314, VariableDataValues variableDataValues=315, VariableScope[] variableScopes=353, DocumentColorProfile documentColorProfile=349, Paint[] fillPaints=38, Paint[] strokePaints=39, float strokeWeight=26, StrokeAlign strokeAlign=29, StrokeJoin strokeJoin=31, StrokeCap strokeCap=30, float[] dashPattern=13, float miterLimit=25, bool borderStrokeWeightsIndependent=299, float borderTopWeight=295, float borderRightWeight=298, float borderBottomWeight=296, float borderLeftWeight=297, Effect[] effects=43, float cornerRadius=20, float cornerSmoothing=160, bool rectangleCornerRadiiIndependent=149, float rectangleTopLeftCornerRadius=145, float rectangleTopRightCornerRadius=146, float rectangleBottomRightCornerRadius=148, float rectangleBottomLeftCornerRadius=147, ConstraintType horizontalConstraint=28, ConstraintType verticalConstraint=37, bool frameMaskDisabled=115, bool resizeToFit=117, bool isStateGroup=225, StateGroupPropertyValueOrder[] stateGroupPropertyValueOrders=238, bool sectionContentsHidden=283, Color backgroundColor=50, StackMode stackMode=105, float stackSpacing=107, float stackCounterSpacing=324, StackWrap stackWrap=323, StackCounterAlignContent stackCounterAlignContent=343, float stackHorizontalPadding=209, float stackVerticalPadding=210, float stackPaddingRight=233, float stackPaddingBottom=234, StackJustify stackPrimaryAlignItems=230, StackAlign stackCounterAlignItems=231, StackSize stackPrimarySizing=229, StackSize stackCounterSizing=221, bool bordersTakeSpace=294, bool stackReverseZIndex=271, float gridColumnGap=438, float gridRowGap=437, GUIDPositionMap gridColumns=436, GUIDPositionMap gridRows=435, GUIDGridTrackSizeMap gridColumnsSizing=474, GUIDGridTrackSizeMap gridRowsSizing=475, float stackChildPrimaryGrow=232, StackCounterAlign stackChildAlignSelf=236, StackPositioning stackPositioning=269, OptionalVector minSize=325, OptionalVector maxSize=326, GUID gridColumnAnchor=440, GUID gridRowAnchor=439, uint gridColumnSpan=442, uint gridRowSpan=441, LayoutGrid[] layoutGrids=47, ExportSettings[] exportSettings=45, TextData textData=42, FontName fontName=41, float fontSize=21, Number lineHeight=40, Number letterSpacing=165, TextCase textCase=34, TextDecoration textDecoration=35, TextAlignHorizontal textAlignHorizontal=32, TextAlignVertical textAlignVertical=33, TextAutoResize textAutoResize=46, TextTruncation textTruncation=280, int maxLines=351, float paragraphSpacing=23, float paragraphIndent=22, Hyperlink hyperlink=223, bool autoRename=14, bool fontVariantCommonLigatures=127, bool fontVariantContextualLigatures=128, string fontVersion=202, uint textUserLayoutVersion=203, uint textExplicitLayoutVersion=396, uint textBidiVersion=279, float textTracking=27, bool textDecorationSkipInk=412, EmojiImageSet emojiImageSet=391, uint styleID=49, Path[] fillGeometry=51, Path[] strokeGeometry=52, VectorData vectorData=48, VectorMirror handleMirroring=44, uint count=10, float starInnerScale=24, ArcData arcData=195, BooleanOperation booleanOperation=36, string symbolDescription=144, VariableWidthPoint[] variableWidthPoints=447, PluginData[] pluginData=204, SymbolData symbolData=113, NodeChange[] derivedSymbolData=125, GUID overriddenSymbolID=143, ComponentPropDef[] componentPropDefs=266, ComponentPropRef[] componentPropRefs=267, ComponentPropAssignment[] componentPropAssignments=268, VariantPropSpec[] variantPropSpecs=483, VariableDataMap parameterConsumptionMap=445, GUIDPath guidPath=111, PrototypeInteraction[] prototypeInteractions=226, PrototypeStartingPoint prototypeStartingPoint=249, ScrollDirection scrollDirection=159, ScrollBehavior scrollBehavior=186, OverlayPositionType overlayPositionType=198, OverlayBackgroundInteraction overlayBackgroundInteraction=200, OverlayBackgroundAppearance overlayBackgroundAppearance=201
 struct Blob byte[] bytes
 message Message MessageType type=1, uint sessionID=2, NodeChange[] nodeChanges=4, Blob[] blobs=6
 ";
@@ -1519,10 +1524,29 @@ impl<'d> Exporter<'d> {
                     arr(ids.iter().enumerate().map(|(i, t)| o(vec![("id", guid(AUX, *t)), ("position", s(&position(i)))])).collect()),
                 )])
             };
-            f.extend([("gridColumnGap", fl(l.gap)), ("gridRowGap", fl(l.cross_gap)), ("gridColumns", map(&cols)), ("gridRows", map(&rows))]);
-            if l.column_tracks.iter().chain(&l.row_tracks).any(|t| t.sizing != Sizing::Fill) {
-                self.warn("grid tracks of fixed or content size were written as equal tracks");
-            }
+            // Each track's size (fixed px, hug, or a share of the free space), by track id; a track
+            // the layout doesn't list fills one share. Readers without it make tracks up.
+            let sizes = |ids: &[u32], tracks: &[GridTrack]| {
+                let entries = ids.iter().enumerate().map(|(i, id)| {
+                    let t = tracks.get(i).copied().unwrap_or_default();
+                    let (ty, value) = match t.sizing {
+                        Sizing::Fixed => ("FIXED", t.value),
+                        Sizing::Hug => ("HUG", 0.0),
+                        Sizing::Fill => ("FLEX", if t.value.is_finite() && t.value > 0.0 { t.value } else { 1.0 }),
+                    };
+                    let sizing = || o(vec![("type", e(ty)), ("value", fl(value))]);
+                    o(vec![("id", guid(AUX, *id)), ("trackSize", o(vec![("minSizing", sizing()), ("maxSizing", sizing())]))])
+                });
+                o(vec![("entries", arr(entries.collect()))])
+            };
+            f.extend([
+                ("gridColumnGap", fl(l.gap)),
+                ("gridRowGap", fl(l.cross_gap)),
+                ("gridColumns", map(&cols)),
+                ("gridRows", map(&rows)),
+                ("gridColumnsSizing", sizes(&cols, &l.column_tracks)),
+                ("gridRowsSizing", sizes(&rows, &l.row_tracks)),
+            ]);
             self.tracks.insert(key, (cols, rows));
         } else {
             let spread = l.content_align == ContentAlign::SpaceBetween;
diff --git a/crates/format/src/fig/export_tests.rs b/crates/format/src/fig/export_tests.rs
index 4ef073b1..e9d0a601 100644
--- a/crates/format/src/fig/export_tests.rs
+++ b/crates/format/src/fig/export_tests.rs
@@ -635,6 +635,12 @@ fn normalize(n: &mut Node, ix: &dyn Fn(NodeId) -> NodeId) {
             let d = AutoLayout::default();
             (l.grid_columns, l.grid_rows) = (d.grid_columns, d.grid_rows);
         }
+        // Equal (one-share) tracks say what no track list says.
+        for tracks in [&mut l.column_tracks, &mut l.row_tracks] {
+            if tracks.iter().all(|t| *t == GridTrack::default()) {
+                tracks.clear();
+            }
+        }
     }
     n.child_layout.grid_align_h = None;
     n.child_layout.grid_align_v = None;
@@ -1336,3 +1342,43 @@ fn an_instance_without_its_mains_maximum_size_overrides_it_with_infinity() {
     let max = overrides.iter().find_map(|o| o.get("maxSize")).unwrap().get("value").unwrap();
     assert_eq!((max.get("x"), max.get("y")), (Some(&Kv::Float(f32::INFINITY)), Some(&Kv::Float(f32::INFINITY))));
 }
+
+#[test]
+fn grid_track_sizes_are_written_and_read_back() {
+    let mut doc = Document::new("File");
+    let page = doc.first_page().unwrap();
+    let id = doc.create(page, NodeKind::Frame, "Row", 0.0, 0.0, 720.0, 70.0).unwrap();
+    let columns = vec![GridTrack::fixed(320.0), GridTrack::hug(), GridTrack { sizing: Sizing::Fill, value: 2.0 }, GridTrack::fixed(34.0)];
+    doc.node_mut(id).unwrap().layout = Some(AutoLayout {
+        mode: LayoutMode::Grid,
+        grid_columns: 4,
+        grid_rows: 1,
+        column_tracks: columns.clone(),
+        row_tracks: vec![GridTrack::fixed(69.0)],
+        ..AutoLayout::default()
+    });
+    let (bytes, warnings) = export(&doc, None).unwrap();
+    assert!(warnings.is_empty(), "{warnings:?}");
+    let archive = Archive::open(&bytes).unwrap();
+    let (schema, message) = decode_canvas(&archive.canvas).unwrap();
+    let msg = schema.decode_message(schema.find("Message").unwrap(), &message).unwrap();
+    let row = msg.get("nodeChanges").unwrap().list().iter().find(|n| n.get("name").and_then(Kv::str) == Some("Row")).unwrap();
+    let key = |g: &Kv| format!("{}:{}", g.get("sessionID").unwrap().f64().unwrap(), g.get("localID").unwrap().f64().unwrap());
+    let order: Vec<String> = row.get("gridColumns").unwrap().get("entries").unwrap().list().iter().map(|e| key(e.get("id").unwrap())).collect();
+    let sizes = row.get("gridColumnsSizing").unwrap().get("entries").unwrap().list();
+    let written: Vec<(String, f64)> = order
+        .iter()
+        .map(|id| {
+            let size = sizes.iter().find(|e| key(e.get("id").unwrap()) == *id).unwrap().get("trackSize").unwrap();
+            let (min, max) = (size.get("minSizing").unwrap(), size.get("maxSizing").unwrap());
+            assert_eq!(min, max);
+            (min.get("type").and_then(Kv::str).unwrap().to_string(), min.get("value").unwrap().f64().unwrap())
+        })
+        .collect();
+    let types: Vec<(&str, f64)> = written.iter().map(|(t, v)| (t.as_str(), *v)).collect();
+    assert_eq!(types, [("FIXED", 320.0), ("HUG", 0.0), ("FLEX", 2.0), ("FIXED", 34.0)]);
+    let (back, _) = import(&bytes, "File").unwrap();
+    let l = back.nodes().find(|n| n.name == "Row").unwrap().layout.clone().unwrap();
+    assert_eq!(l.column_tracks, columns);
+    assert_eq!(l.row_tracks, vec![GridTrack::fixed(69.0)]);
+}
diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index 35ecb7c0..9ad4b65c 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -1,6 +1,6 @@
 # File format parity
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-22 · **Change:** minor (`.fig` export: files the incumbent imports, with component set properties; REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732); SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-22 · **Change:** minor (`.fig` export: grid track sizes; files the incumbent imports, with component set properties; REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732); SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source) · **Target:** Figma Design (desktop app 126.10.7)
 
 Every format Figma reads or writes, with FigCraft's support. Sources: `Info.plist` of
 `/Applications/Figma.app` (document types only; nothing inside the bundle's code was read), Figma's
@@ -87,7 +87,7 @@ each.
   rotation, tile scale, crop); strokes (weight, align, join, caps, dashes, miter limit, per-side
   weights); shadows, layer and background blurs (progressive too), noise and texture; corners and
   smoothing, constraints, clip content, masks with their type; auto layout (direction, wrap, gaps, padding,
-  alignment, hug, strokes in layout, stacking order, grids with their tracks and cells) and how
+  alignment, hug, strokes in layout, stacking order, grids with their tracks, their sizes (fixed, hug, fill) and cells) and how
   layers sit in it (fill, absolute, min/max sizes, an axis without a maximum as infinite); layout grids; export settings; text style
   (font, with styles under the names font families give their faces: "SemiBold", "ExtraBold"…, and
   "Semi Bold" in Inter; size; line height, a share of
@@ -126,8 +126,8 @@ each.
   image adjustments, glass settings other than frost, springs other than Gentle (written as ease
   out), set-variable, set-variable-mode and conditional actions, scroll-to offsets, text decoration
   looks, variable font axes, text on a path, nested list levels, list spacing, hanging punctuation,
-  leading trim, OpenType features, per-layer operations inside boolean groups, grid tracks of fixed
-  or content size, different stroke ends on lines. Not written at all: stroke outlines of dashed and
+  leading trim, OpenType features, per-layer operations inside boolean groups, different
+  stroke ends on lines. Not written at all: stroke outlines of dashed and
   per-side strokes and of inside or outside strokes on polygons, stars and vectors, glyph outlines
   of text (a reader lays text out with its own fonts), version history and branches.
 - **Checked by opening written files in other software:** the example documents and a small test
@@ -179,6 +179,7 @@ each.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-22 | minor | `.fig` export writes grid track sizes (`gridColumnsSizing` / `gridRowsSizing`: fixed px, hug, fill shares), which the import already read; they were written as equal tracks (with a warning). Checked on a synthetic grid there (fixed 320/140/112/34/34 px columns): written as equal tracks it came in with five equal columns and its layers overflowing their cells; now its columns keep their sizes. Numbers unchanged |
 | 2026-10-22 | minor | `.fig` export imports into the incumbent (checked with synthetic files, black-box): images are named and referenced by their SHA-1 (with SHA-256 names any file with an image failed to import); component sets hold their property definitions, variant properties included, with a copy per variant that its layers and instances name, and values also as variable data, so properties, bindings and instance values come across; an axis without a maximum size is written as infinite (0 collapsed frames with only a maximum width); compound weights are spelt the way font families name their faces ("SemiBold"; "Semi Bold" in Inter), so their text isn't a missing font; the kiwi encoder writes infinite floats. Numbers unchanged |
 | 2026-10-18 | minor | REST file JSON import keeps `SLOT` layers (#792): they were dropped with everything placed in them, which emptied every instance's slot. A slot in a main component becomes a slot frame bound to its `SLOT` property (the one it references, else the one named like it, else the only one left), and an instance's slot holds the instance's own content, kept across syncs, moves of the mains and saving, unless the instance's property value is the main's default content (without values, a slot that holds layers keeps them). Instances in slot content link to their own mains. Slot content limits, preferred-only and preferred components are warnings. Synthetic files only. Numbers unchanged |
 | 2026-10-17 | minor | REST file JSON import reads grid track sizes from the CSS track strings `gridColumnsSizing` / `gridRowsSizing` (fixed px, fill fr, hug `auto`, `minmax(0, 1fr)`, `repeat()`; other tracks stay equal) (#465). Numbers unchanged |

From 4c6c4d9667bf688a4ad23e1a07ec61c94fa2f0df Mon Sep 17 00:00:00 2001
From: Ricardo <ricardoavilesfoto@gmail.com>
Date: Thu, 22 Oct 2026 20:46:12 -0600
Subject: [PATCH 22/59] .fig export: warn when a set's variants disagree on a
 property default

The format keeps one default per property of a set; the first variant's
is written (CodeRabbit review on #1152).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 crates/format/src/fig/export.rs       | 18 ++++++++++++++----
 crates/format/src/fig/export_tests.rs | 11 +++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/crates/format/src/fig/export.rs b/crates/format/src/fig/export.rs
index 85a4726a..65f30698 100644
--- a/crates/format/src/fig/export.rs
+++ b/crates/format/src/fig/export.rs
@@ -2002,13 +2002,23 @@ impl<'d> Exporter<'d> {
                 ]));
             }
         }
-        let mut seen = std::collections::BTreeSet::new();
+        // The format keeps one default per property of a set (a variant's copy holds none): the first
+        // variant's, with a warning when another variant's differs.
+        let mut seen: BTreeMap<String, PropDef> = BTreeMap::new();
         for v in &variants {
             let NodeKind::Component { props, .. } = &v.kind else { continue };
             for (name, d) in props {
-                if prop_type(d).is_some() && seen.insert(name.clone()) {
-                    let index = defs.len();
-                    defs.extend(self.prop_def(set.id, name, d, index));
+                if prop_type(d).is_none() {
+                    continue;
+                }
+                match seen.get(name) {
+                    Some(first) if first != d => self.warn("variants with different defaults for one property were written with the first variant's"),
+                    Some(_) => {}
+                    None => {
+                        seen.insert(name.clone(), d.clone());
+                        let index = defs.len();
+                        defs.extend(self.prop_def(set.id, name, d, index));
+                    }
                 }
             }
         }
diff --git a/crates/format/src/fig/export_tests.rs b/crates/format/src/fig/export_tests.rs
index e9d0a601..78eeb758 100644
--- a/crates/format/src/fig/export_tests.rs
+++ b/crates/format/src/fig/export_tests.rs
@@ -1382,3 +1382,14 @@ fn grid_track_sizes_are_written_and_read_back() {
     assert_eq!(l.column_tracks, columns);
     assert_eq!(l.row_tracks, vec![GridTrack::fixed(69.0)]);
 }
+
+#[test]
+fn variants_that_disagree_on_a_default_are_a_warning() {
+    let (mut doc, _) = set_with_properties();
+    let large = doc.nodes().find(|n| n.name == "Size=Large").unwrap().id;
+    if let NodeKind::Component { props, .. } = &mut doc.node_mut(large).unwrap().kind {
+        props.insert("Label".into(), PropDef::Text { default: "Large".into() });
+    }
+    let (_, warnings) = export(&doc, None).unwrap();
+    assert!(warnings.iter().any(|w| w.contains("different defaults")), "{warnings:?}");
+}

From c79bc04a2969f3a281eb394952a3a1cbcb79b3eb Mon Sep 17 00:00:00 2001
From: phonedu <135960865+phonedu@users.noreply.github.com>
Date: Fri, 23 Oct 2026 10:48:21 +0800
Subject: [PATCH 23/59] M6: default Vue instance swaps and keep text out of
 attribute detection

A Vue component's instance-swap prop now defaults to its component reference in withDefaults, so the dynamic component renders the design default. Attribute detection only applies inside an unfinished opening tag, so text like `Total = {title}` stays text instead of becoming a quoted attribute value.
---
 crates/engine/src/code_connect.rs            | 28 ++++++++++++++++++++
 crates/engine/src/code_connect_tests.rs      |  4 +++
 crates/engine/src/component_codegen.rs       |  5 +---
 crates/engine/src/component_codegen_tests.rs |  1 +
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/crates/engine/src/code_connect.rs b/crates/engine/src/code_connect.rs
index 1ba7cc79..07684f64 100644
--- a/crates/engine/src/code_connect.rs
+++ b/crates/engine/src/code_connect.rs
@@ -184,10 +184,38 @@ fn expr(doc: &Document, c: &Component, p: &Param, v: &Value, lang: CodeLang) ->
     }
 }
 
+/// 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<char>)> {
     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),
diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 721908b3..582a0c5e 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -237,6 +237,10 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     ex(&mut s, "instance.setProperties", json!({"ids": [i], "properties": {"Title": "Say \"hi\""}}));
     ex(&mut s, "codeConnect.set", json!({"id": i, "language": "vue", "template": "<Card title=\"{title} {title}\" />"}));
     assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<Card title=\"Say &quot;hi&quot; Say &quot;hi&quot;\" />\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": "<p>Total = {title}</p>"}));
+    assert_eq!(code(&mut s, i, "vue"), "import Card from \"./Card.vue\";\n\n<p>Total = Buy</p>\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");
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 2f164238..00f9e1b6 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -823,10 +823,7 @@ fn vue(doc: &Document, c: &Component) -> String {
         }
         out.push_str("  }>(),\n  {\n");
         for p in &props {
-            // A component-valued prop has no literal to default to.
-            if matches!(p.kind, ParamKind::InstanceSwap | ParamKind::Slot) {
-                continue;
-            }
+            // An instance swap defaults to its component reference; a slot isn't in `props`.
             out.push_str(&format!("    {}: {},\n", p.ident, value_expr(doc, c, p, &p.default, CodeLang::Vue)));
         }
         out.push_str("  },\n);\n\n</script>\n\n");
diff --git a/crates/engine/src/component_codegen_tests.rs b/crates/engine/src/component_codegen_tests.rs
index f8f14254..2035bdac 100644
--- a/crates/engine/src/component_codegen_tests.rs
+++ b/crates/engine/src/component_codegen_tests.rs
@@ -228,6 +228,7 @@ fn instance_swap_properties_take_views() {
     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("<component :is=\"icon\" />"), "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}}));

From c19b7d07999686db4c5fc78b5542c046ea837ee6 Mon Sep 17 00:00:00 2001
From: Ricardo <ricardoavilesfoto@gmail.com>
Date: Fri, 23 Oct 2026 12:00:22 -0600
Subject: [PATCH 24/59] .fig export: a property name used with two types in a
 set writes both definitions

The set wrote one definition per name, so a variant whose property of
that name had another type named a definition the file didn't hold
(CodeRabbit review on #1152).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 crates/format/src/fig/export.rs       | 11 +++++----
 crates/format/src/fig/export_tests.rs | 32 +++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/crates/format/src/fig/export.rs b/crates/format/src/fig/export.rs
index 65f30698..9fda302d 100644
--- a/crates/format/src/fig/export.rs
+++ b/crates/format/src/fig/export.rs
@@ -2004,18 +2004,17 @@ impl<'d> Exporter<'d> {
         }
         // The format keeps one default per property of a set (a variant's copy holds none): the first
         // variant's, with a warning when another variant's differs.
-        let mut seen: BTreeMap<String, PropDef> = BTreeMap::new();
+        // A name used with two types is two properties (their definitions have their own ids).
+        let mut seen: BTreeMap<(String, &'static str), PropDef> = BTreeMap::new();
         for v in &variants {
             let NodeKind::Component { props, .. } = &v.kind else { continue };
             for (name, d) in props {
-                if prop_type(d).is_none() {
-                    continue;
-                }
-                match seen.get(name) {
+                let Some(ty) = prop_type(d) else { continue };
+                match seen.get(&(name.clone(), ty)) {
                     Some(first) if first != d => self.warn("variants with different defaults for one property were written with the first variant's"),
                     Some(_) => {}
                     None => {
-                        seen.insert(name.clone(), d.clone());
+                        seen.insert((name.clone(), ty), d.clone());
                         let index = defs.len();
                         defs.extend(self.prop_def(set.id, name, d, index));
                     }
diff --git a/crates/format/src/fig/export_tests.rs b/crates/format/src/fig/export_tests.rs
index 78eeb758..7fc579a5 100644
--- a/crates/format/src/fig/export_tests.rs
+++ b/crates/format/src/fig/export_tests.rs
@@ -1393,3 +1393,35 @@ fn variants_that_disagree_on_a_default_are_a_warning() {
     let (_, warnings) = export(&doc, None).unwrap();
     assert!(warnings.iter().any(|w| w.contains("different defaults")), "{warnings:?}");
 }
+
+#[test]
+fn a_name_used_with_two_types_in_a_set_writes_both_definitions() {
+    let (mut doc, _) = set_with_properties();
+    let large = doc.nodes().find(|n| n.name == "Size=Large").unwrap().id;
+    if let NodeKind::Component { props, .. } = &mut doc.node_mut(large).unwrap().kind {
+        props.insert("Label".into(), PropDef::Boolean { default: true });
+    }
+    let (bytes, _) = export(&doc, None).unwrap();
+    let archive = Archive::open(&bytes).unwrap();
+    let (schema, message) = decode_canvas(&archive.canvas).unwrap();
+    let msg = schema.decode_message(schema.find("Message").unwrap(), &message).unwrap();
+    let changes = msg.get("nodeChanges").unwrap().list();
+    let key = |g: &Kv| format!("{}:{}", g.get("sessionID").unwrap().f64().unwrap(), g.get("localID").unwrap().f64().unwrap());
+    let set = changes.iter().find(|n| n.get("isStateGroup").is_some()).unwrap();
+    let written: BTreeSet<String> = set.get("componentPropDefs").unwrap().list().iter().map(|d| key(d.get("id").unwrap())).collect();
+    let labels: Vec<&str> = set
+        .get("componentPropDefs")
+        .unwrap()
+        .list()
+        .iter()
+        .filter(|d| d.get("name").and_then(Kv::str) == Some("Label"))
+        .filter_map(|d| d.get("type").and_then(Kv::str))
+        .collect();
+    assert_eq!(labels.len(), 2, "{labels:?}");
+    // Every variant copy names a definition the set holds.
+    for v in changes.iter().filter(|n| n.get("variantPropSpecs").is_some()) {
+        for d in v.get("componentPropDefs").unwrap().list() {
+            assert!(written.contains(&key(d.get("parentPropDefId").unwrap())));
+        }
+    }
+}

From 8c08035b8942ab7dfb2890a8f8bf4012ae2343f5 Mon Sep 17 00:00:00 2001
From: NetterSilver <133535268+Silvertree2010@users.noreply.github.com>
Date: Sat, 24 Oct 2026 05:08:57 +0200
Subject: [PATCH 25/59] fix: write non-finite numbers as 0 instead of refusing
 to save

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 crates/format/src/lib.rs | 242 +++++++++++++++++++++------------------
 1 file changed, 133 insertions(+), 109 deletions(-)

diff --git a/crates/format/src/lib.rs b/crates/format/src/lib.rs
index 441b6861..ca32eaaa 100644
--- a/crates/format/src/lib.rs
+++ b/crates/format/src/lib.rs
@@ -252,46 +252,38 @@ fn image_index<S: Serializer>(images: &&BTreeMap<String, ImageData>, s: S) -> Re
     s.collect_seq(images.iter().map(|(hash, i)| Entry { hash, width: i.width, height: i.height }))
 }
 
-/// A serializer that writes nothing and fails on the first NaN or infinite float. JSON has no
-/// such numbers (`serde_json` writes `null`, which the reader rejects), so a document holding
-/// one is refused instead of saved as an unreadable file.
-struct FiniteCheck;
+/// A serializer adapter that writes `0` in place of every NaN or infinite float. JSON has no such
+/// numbers (`serde_json` writes `null`, which the reader rejects), so one bad value must not stop
+/// Save, autosave or recovery copies of the whole document. Everything else passes through.
+struct Finite<S>(S);
 
-impl serde::ser::Error for FiniteCheckError {
-    fn custom<T: std::fmt::Display>(msg: T) -> Self {
-        Self(msg.to_string())
+/// Serializes a value through a [`Finite`] adapter around the serializer it is written with.
+struct FiniteValue<'a, T: ?Sized>(&'a T);
+
+impl<T: ?Sized + Serialize> Serialize for FiniteValue<'_, T> {
+    fn serialize<S: Serializer>(&self, s: S) -> Result<S::Ok, S::Error> {
+        self.0.serialize(Finite(s))
     }
 }
 
-#[derive(Debug)]
-struct FiniteCheckError(String);
-
-impl std::fmt::Display for FiniteCheckError {
-    fn fmt(&self, f: &mut std::fmt::Formatter) -> std::fmt::Result {
-        f.write_str(&self.0)
-    }
-}
-
-impl std::error::Error for FiniteCheckError {}
-
-macro_rules! check_skip {
+macro_rules! finite_pass {
     ($($name:ident($ty:ty)),* $(,)?) => {
-        $(fn $name(self, _: $ty) -> Result<(), FiniteCheckError> { Ok(()) })*
+        $(fn $name(self, v: $ty) -> Result<S::Ok, S::Error> { self.0.$name(v) })*
     };
 }
 
-impl Serializer for FiniteCheck {
-    type Ok = ();
-    type Error = FiniteCheckError;
-    type SerializeSeq = FiniteCheck;
-    type SerializeTuple = FiniteCheck;
-    type SerializeTupleStruct = FiniteCheck;
-    type SerializeTupleVariant = FiniteCheck;
-    type SerializeMap = FiniteCheck;
-    type SerializeStruct = FiniteCheck;
-    type SerializeStructVariant = FiniteCheck;
+impl<S: Serializer> Serializer for Finite<S> {
+    type Ok = S::Ok;
+    type Error = S::Error;
+    type SerializeSeq = Finite<S::SerializeSeq>;
+    type SerializeTuple = Finite<S::SerializeTuple>;
+    type SerializeTupleStruct = Finite<S::SerializeTupleStruct>;
+    type SerializeTupleVariant = Finite<S::SerializeTupleVariant>;
+    type SerializeMap = Finite<S::SerializeMap>;
+    type SerializeStruct = Finite<S::SerializeStruct>;
+    type SerializeStructVariant = Finite<S::SerializeStructVariant>;
 
-    check_skip!(
+    finite_pass!(
         serialize_bool(bool),
         serialize_i8(i8),
         serialize_i16(i16),
@@ -308,129 +300,145 @@ impl Serializer for FiniteCheck {
         serialize_bytes(&[u8])
     );
 
-    fn serialize_f32(self, v: f32) -> Result<(), FiniteCheckError> {
-        if v.is_finite() { Ok(()) } else { Err(FiniteCheckError(format!("cannot save a non-finite number ({v})"))) }
+    fn serialize_f32(self, v: f32) -> Result<S::Ok, S::Error> {
+        self.0.serialize_f32(if v.is_finite() { v } else { 0.0 })
     }
-    fn serialize_f64(self, v: f64) -> Result<(), FiniteCheckError> {
-        if v.is_finite() { Ok(()) } else { Err(FiniteCheckError(format!("cannot save a non-finite number ({v})"))) }
+    fn serialize_f64(self, v: f64) -> Result<S::Ok, S::Error> {
+        self.0.serialize_f64(if v.is_finite() { v } else { 0.0 })
     }
-    fn serialize_none(self) -> Result<(), FiniteCheckError> {
-        Ok(())
+    fn serialize_none(self) -> Result<S::Ok, S::Error> {
+        self.0.serialize_none()
     }
-    fn serialize_some<T: ?Sized + Serialize>(self, v: &T) -> Result<(), FiniteCheckError> {
-        v.serialize(self)
+    fn serialize_some<T: ?Sized + Serialize>(self, v: &T) -> Result<S::Ok, S::Error> {
+        self.0.serialize_some(&FiniteValue(v))
     }
-    fn serialize_unit(self) -> Result<(), FiniteCheckError> {
-        Ok(())
+    fn serialize_unit(self) -> Result<S::Ok, S::Error> {
+        self.0.serialize_unit()
     }
-    fn serialize_unit_struct(self, _: &'static str) -> Result<(), FiniteCheckError> {
-        Ok(())
+    fn serialize_unit_struct(self, name: &'static str) -> Result<S::Ok, S::Error> {
+        self.0.serialize_unit_struct(name)
     }
-    fn serialize_unit_variant(self, _: &'static str, _: u32, _: &'static str) -> Result<(), FiniteCheckError> {
-        Ok(())
+    fn serialize_unit_variant(self, name: &'static str, idx: u32, variant: &'static str) -> Result<S::Ok, S::Error> {
+        self.0.serialize_unit_variant(name, idx, variant)
     }
-    fn serialize_newtype_struct<T: ?Sized + Serialize>(self, _: &'static str, v: &T) -> Result<(), FiniteCheckError> {
-        v.serialize(self)
+    fn serialize_newtype_struct<T: ?Sized + Serialize>(self, name: &'static str, v: &T) -> Result<S::Ok, S::Error> {
+        self.0.serialize_newtype_struct(name, &FiniteValue(v))
     }
-    fn serialize_newtype_variant<T: ?Sized + Serialize>(self, _: &'static str, _: u32, _: &'static str, v: &T) -> Result<(), FiniteCheckError> {
-        v.serialize(self)
+    fn serialize_newtype_variant<T: ?Sized + Serialize>(self, name: &'static str, idx: u32, variant: &'static str, v: &T) -> Result<S::Ok, S::Error> {
+        self.0.serialize_newtype_variant(name, idx, variant, &FiniteValue(v))
     }
-    fn serialize_seq(self, _: Option<usize>) -> Result<FiniteCheck, FiniteCheckError> {
-        Ok(FiniteCheck)
+    fn serialize_seq(self, len: Option<usize>) -> Result<Self::SerializeSeq, S::Error> {
+        self.0.serialize_seq(len).map(Finite)
     }
-    fn serialize_tuple(self, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
-        Ok(FiniteCheck)
+    fn serialize_tuple(self, len: usize) -> Result<Self::SerializeTuple, S::Error> {
+        self.0.serialize_tuple(len).map(Finite)
     }
-    fn serialize_tuple_struct(self, _: &'static str, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
-        Ok(FiniteCheck)
+    fn serialize_tuple_struct(self, name: &'static str, len: usize) -> Result<Self::SerializeTupleStruct, S::Error> {
+        self.0.serialize_tuple_struct(name, len).map(Finite)
     }
-    fn serialize_tuple_variant(self, _: &'static str, _: u32, _: &'static str, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
-        Ok(FiniteCheck)
+    fn serialize_tuple_variant(
+        self,
+        name: &'static str,
+        idx: u32,
+        variant: &'static str,
+        len: usize,
+    ) -> Result<Self::SerializeTupleVariant, S::Error> {
+        self.0.serialize_tuple_variant(name, idx, variant, len).map(Finite)
     }
-    fn serialize_map(self, _: Option<usize>) -> Result<FiniteCheck, FiniteCheckError> {
-        Ok(FiniteCheck)
+    fn serialize_map(self, len: Option<usize>) -> Result<Self::SerializeMap, S::Error> {
+        self.0.serialize_map(len).map(Finite)
     }
-    fn serialize_struct(self, _: &'static str, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
-        Ok(FiniteCheck)
+    fn serialize_struct(self, name: &'static str, len: usize) -> Result<Self::SerializeStruct, S::Error> {
+        self.0.serialize_struct(name, len).map(Finite)
     }
-    fn serialize_struct_variant(self, _: &'static str, _: u32, _: &'static str, _: usize) -> Result<FiniteCheck, FiniteCheckError> {
-        Ok(FiniteCheck)
+    fn serialize_struct_variant(
+        self,
+        name: &'static str,
+        idx: u32,
+        variant: &'static str,
+        len: usize,
+    ) -> Result<Self::SerializeStructVariant, S::Error> {
+        self.0.serialize_struct_variant(name, idx, variant, len).map(Finite)
+    }
+    fn is_human_readable(&self) -> bool {
+        self.0.is_human_readable()
     }
 }
 
-macro_rules! check_elements {
+macro_rules! finite_elements {
     ($($trait:ident::$method:ident),* $(,)?) => {
-        $(impl serde::ser::$trait for FiniteCheck {
-            type Ok = ();
-            type Error = FiniteCheckError;
-            fn $method<T: ?Sized + Serialize>(&mut self, v: &T) -> Result<(), FiniteCheckError> {
-                v.serialize(FiniteCheck)
+        $(impl<S: serde::ser::$trait> serde::ser::$trait for Finite<S> {
+            type Ok = S::Ok;
+            type Error = S::Error;
+            fn $method<T: ?Sized + Serialize>(&mut self, v: &T) -> Result<(), S::Error> {
+                self.0.$method(&FiniteValue(v))
             }
-            fn end(self) -> Result<(), FiniteCheckError> {
-                Ok(())
+            fn end(self) -> Result<S::Ok, S::Error> {
+                self.0.end()
             }
         })*
     };
 }
 
-check_elements!(
+finite_elements!(
     SerializeSeq::serialize_element,
     SerializeTuple::serialize_element,
     SerializeTupleStruct::serialize_field,
     SerializeTupleVariant::serialize_field
 );
 
-impl serde::ser::SerializeMap for FiniteCheck {
-    type Ok = ();
-    type Error = FiniteCheckError;
-    fn serialize_key<T: ?Sized + Serialize>(&mut self, k: &T) -> Result<(), FiniteCheckError> {
-        k.serialize(FiniteCheck)
+impl<S: serde::ser::SerializeMap> serde::ser::SerializeMap for Finite<S> {
+    type Ok = S::Ok;
+    type Error = S::Error;
+    fn serialize_key<T: ?Sized + Serialize>(&mut self, k: &T) -> Result<(), S::Error> {
+        self.0.serialize_key(&FiniteValue(k))
     }
-    fn serialize_value<T: ?Sized + Serialize>(&mut self, v: &T) -> Result<(), FiniteCheckError> {
-        v.serialize(FiniteCheck)
+    fn serialize_value<T: ?Sized + Serialize>(&mut self, v: &T) -> Result<(), S::Error> {
+        self.0.serialize_value(&FiniteValue(v))
     }
-    fn end(self) -> Result<(), FiniteCheckError> {
-        Ok(())
+    fn end(self) -> Result<S::Ok, S::Error> {
+        self.0.end()
     }
 }
 
-impl serde::ser::SerializeStruct for FiniteCheck {
-    type Ok = ();
-    type Error = FiniteCheckError;
-    fn serialize_field<T: ?Sized + Serialize>(&mut self, _: &'static str, v: &T) -> Result<(), FiniteCheckError> {
-        v.serialize(FiniteCheck)
+impl<S: serde::ser::SerializeStruct> serde::ser::SerializeStruct for Finite<S> {
+    type Ok = S::Ok;
+    type Error = S::Error;
+    fn serialize_field<T: ?Sized + Serialize>(&mut self, key: &'static str, v: &T) -> Result<(), S::Error> {
+        self.0.serialize_field(key, &FiniteValue(v))
     }
-    fn end(self) -> Result<(), FiniteCheckError> {
-        Ok(())
+    fn skip_field(&mut self, key: &'static str) -> Result<(), S::Error> {
+        self.0.skip_field(key)
+    }
+    fn end(self) -> Result<S::Ok, S::Error> {
+        self.0.end()
     }
 }
 
-impl serde::ser::SerializeStructVariant for FiniteCheck {
-    type Ok = ();
-    type Error = FiniteCheckError;
-    fn serialize_field<T: ?Sized + Serialize>(&mut self, _: &'static str, v: &T) -> Result<(), FiniteCheckError> {
-        v.serialize(FiniteCheck)
+impl<S: serde::ser::SerializeStructVariant> serde::ser::SerializeStructVariant for Finite<S> {
+    type Ok = S::Ok;
+    type Error = S::Error;
+    fn serialize_field<T: ?Sized + Serialize>(&mut self, key: &'static str, v: &T) -> Result<(), S::Error> {
+        self.0.serialize_field(key, &FiniteValue(v))
     }
-    fn end(self) -> Result<(), FiniteCheckError> {
-        Ok(())
+    fn skip_field(&mut self, key: &'static str) -> Result<(), S::Error> {
+        self.0.skip_field(key)
+    }
+    fn end(self) -> Result<S::Ok, S::Error> {
+        self.0.end()
     }
-}
-
-/// Fail when the document holds a number JSON cannot represent.
-fn ensure_finite(doc: &Document) -> Result<(), FormatError> {
-    DocumentJson::new(doc).serialize(FiniteCheck).map_err(io_err)
 }
 
 /// Serialize the document (without images) to the JSON value stored in `document.json`.
+/// NaN and infinite numbers are written as `0`.
 pub fn to_json(doc: &Document) -> Result<Value, FormatError> {
-    ensure_finite(doc)?;
-    serde_json::to_value(DocumentJson::new(doc)).map_err(io_err)
+    DocumentJson::new(doc).serialize(Finite(serde_json::value::Serializer)).map_err(io_err)
 }
 
 /// Write the document (without images) as `document.json` content to `w`.
+/// NaN and infinite numbers are written as `0`.
 pub fn write_json(doc: &Document, w: impl Write) -> Result<(), FormatError> {
-    ensure_finite(doc)?;
-    serde_json::to_writer(w, &DocumentJson::new(doc)).map_err(io_err)
+    DocumentJson::new(doc).serialize(Finite(&mut serde_json::Serializer::new(w))).map_err(io_err)
 }
 
 /// Parse `document.json` content.
@@ -986,12 +994,28 @@ mod tests {
         let r = d.create(p, NodeKind::Rectangle, "R", 1.0, 2.0, 3.0, 4.0).unwrap();
         assert!(save_bytes(&d, None).is_ok());
         d.get_mut(r).unwrap().width = f64::NAN;
-        let e = save_bytes(&d, None).unwrap_err();
-        assert!(e.to_string().contains("non-finite"), "{e}");
-        d.get_mut(r).unwrap().width = 3.0;
         d.get_mut(r).unwrap().opacity = f32::INFINITY;
-        let e = save_bytes(&d, None).unwrap_err();
-        assert!(e.to_string().contains("non-finite"), "{e}");
+        // Saving never fails; non-finite numbers are written as 0 and the file reopens.
+        let bytes = save_bytes(&d, None).unwrap();
+        let (back, _) = load_bytes(&bytes).unwrap();
+        assert_eq!(back.node_count(), d.node_count());
+        let n = back.get(r).unwrap();
+        assert_eq!(n.width, 0.0);
+        assert_eq!(n.opacity, 0.0);
+        assert_eq!(n.height, 4.0);
+        let mut out = Vec::new();
+        write_json(&d, &mut out).unwrap();
+        let (back, _) = from_json(std::str::from_utf8(&out).unwrap()).unwrap();
+        let n = back.get(r).unwrap();
+        assert_eq!(n.width, 0.0);
+        assert_eq!(n.opacity, 0.0);
+        assert_eq!(n.height, 4.0);
+        let v = to_json(&d).unwrap();
+        let (back, _) = from_json(&v.to_string()).unwrap();
+        let n = back.get(r).unwrap();
+        assert_eq!(n.width, 0.0);
+        assert_eq!(n.opacity, 0.0);
+        assert_eq!(n.height, 4.0);
     }
 
     #[test]

From 3c2da837f0cd6737d644a15598a7accf18fc9730 Mon Sep 17 00:00:00 2001
From: Logan Jennings <loganwjennings@gmail.com>
Date: Fri, 23 Oct 2026 22:18:34 -0500
Subject: [PATCH 26/59] engine: stash only closed tabs for group rollback
 instead of cloning every tab

---
 crates/engine/src/batch_rollback_tests.rs |  3 ++
 crates/engine/src/branches.rs             |  2 +-
 crates/engine/src/cmd/file.rs             |  2 +-
 crates/engine/src/lib.rs                  | 41 ++++++++++++++++++-----
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/crates/engine/src/batch_rollback_tests.rs b/crates/engine/src/batch_rollback_tests.rs
index 4b1ac2b1..298ca097 100644
--- a/crates/engine/src/batch_rollback_tests.rs
+++ b/crates/engine/src/batch_rollback_tests.rs
@@ -38,6 +38,7 @@ fn failed_group_closes_documents_opened_inside_it() {
 fn failed_group_reopens_documents_closed_inside_it() {
     let mut s = Session::new();
     s.execute("file.new", &json!({"name": "Second"})).unwrap();
+    let uids: Vec<_> = s.docs.iter().map(|ds| ds.uid).collect();
     assert_eq!((s.docs.len(), s.active), (2, 1));
 
     let result = s.execute(
@@ -53,7 +54,9 @@ fn failed_group_reopens_documents_closed_inside_it() {
     assert!(result.is_err());
     assert_eq!(s.docs.len(), 2);
     assert_eq!(s.active, 1);
+    assert_eq!(s.docs.iter().map(|ds| ds.uid).collect::<Vec<_>>(), uids);
     assert!(s.ds().is_ok());
+    assert!(s.closed_in_group.is_empty());
 }
 
 #[test]
diff --git a/crates/engine/src/branches.rs b/crates/engine/src/branches.rs
index 8bff0568..a705e0b9 100644
--- a/crates/engine/src/branches.rs
+++ b/crates/engine/src/branches.rs
@@ -186,7 +186,7 @@ pub fn tab_of(s: &Session, main: u64, id: &str) -> Option<usize> {
 /// branch's). Their edits are already in the branches ([`sync`]).
 pub(crate) fn close_tabs(s: &mut Session, main: u64, id: Option<&str>) {
     let active = s.docs.get(s.active).map(|d| d.uid);
-    s.docs.retain(|d| !d.branch_of.as_ref().is_some_and(|(m, b)| *m == main && id.is_none_or(|i| i == b)));
+    s.remove_tabs(|d| d.branch_of.as_ref().is_some_and(|(m, b)| *m == main && id.is_none_or(|i| i == b)));
     s.active = active.and_then(|a| s.docs.iter().position(|d| d.uid == a)).unwrap_or(s.active).min(s.docs.len().saturating_sub(1));
 }
 
diff --git a/crates/engine/src/cmd/file.rs b/crates/engine/src/cmd/file.rs
index 7380711f..6b8e3195 100644
--- a/crates/engine/src/cmd/file.rs
+++ b/crates/engine/src/cmd/file.rs
@@ -1396,7 +1396,7 @@ fn close(s: &mut Session, p: &Value) -> Result<Value> {
     }
     let uid = ds.uid;
     let active_uid = s.docs.get(s.active).map(|d| d.uid);
-    s.docs.remove(i);
+    s.remove_tabs(|d| d.uid == uid);
     // Removing a tab before the active one shifts its index; keep the same document selected.
     s.active = active_uid.and_then(|a| s.docs.iter().position(|d| d.uid == a)).unwrap_or(i.min(s.docs.len().saturating_sub(1)));
     crate::branches::close_tabs(s, uid, None);
diff --git a/crates/engine/src/lib.rs b/crates/engine/src/lib.rs
index aaa022f1..f90928d0 100644
--- a/crates/engine/src/lib.rs
+++ b/crates/engine/src/lib.rs
@@ -784,6 +784,10 @@ pub struct Session {
     /// Command log (id + params) for actions/automation. File imports that carry the file bytes
     /// (`file.import` with `data`) are not logged, so the log never holds a copy of a pasted file.
     pub journal: Vec<(String, Value)>,
+    /// Nesting depth of [`Session::grouped`]; tabs closed while it is above zero are kept in
+    /// `closed_in_group` so a failed group can bring them back.
+    group_depth: usize,
+    closed_in_group: Vec<DocState>,
     /// Recently used colours.
     pub recent_colors: Vec<figcraft_color::Color>,
     /// The last undoable command executed through [`Session::execute`], excluding "Repeat".
@@ -839,6 +843,8 @@ impl Session {
             ui_requests: Vec::new(),
             ui_dark: None,
             journal: Vec::new(),
+            group_depth: 0,
+            closed_in_group: Vec::new(),
             recent_colors: Vec::new(),
             last_command: None,
             message: None,
@@ -1269,6 +1275,16 @@ impl Session {
         self.execute(cmd, &p)
     }
 
+    /// Take the tabs `pred` matches out of `docs`; inside a group they are kept so that a failed
+    /// group can reopen them.
+    pub(crate) fn remove_tabs(&mut self, mut pred: impl FnMut(&DocState) -> bool) {
+        let (gone, keep): (Vec<_>, Vec<_>) = std::mem::take(&mut self.docs).into_iter().partition(|d| pred(d));
+        self.docs = keep;
+        if self.group_depth > 0 {
+            self.closed_in_group.extend(gone);
+        }
+    }
+
     /// Run `f` as one undo step called `label`: the commands it executes push no steps of their
     /// own, and when it fails the documents stay at their group-start state.
     pub fn grouped<T>(&mut self, label: &str, f: impl FnOnce(&mut Self) -> Result<T>) -> Result<T> {
@@ -1277,8 +1293,6 @@ impl Session {
             self.docs.iter().map(|ds| (ds.uid, ds.doc.clone(), ds.selection.clone(), ds.page, ds.history.undo.len(), ds.history.limit)).collect();
         // An edit inside clears the redo steps; a failed group has to bring them back.
         let redo_before: Vec<_> = self.docs.iter().map(|ds| ds.history.redo.clone()).collect();
-        // Tabs the group closes (or reorders) come back from this.
-        let tabs_before = self.docs.clone();
         let active = self.active;
         let journal_len = self.journal.len();
 
@@ -1289,20 +1303,23 @@ impl Session {
         for (uid, _, _, _, _, _) in &before {
             self.live_hold(*uid, true);
         }
+        self.group_depth += 1;
         let result = f(self);
+        self.group_depth -= 1;
         for (uid, _, _, _, _, _) in &before {
             self.live_hold(*uid, false);
         }
 
         if result.is_err() {
+            // Tabs the group closed come back from the stash, and the group-start order returns.
             let mut current = std::mem::take(&mut self.docs);
-            self.docs = tabs_before
-                .into_iter()
-                .map(|t| match current.iter().position(|d| d.uid == t.uid) {
-                    Some(i) => current.swap_remove(i),
-                    None => t,
-                })
-                .collect();
+            for (uid, ..) in &before {
+                let tab = match current.iter().position(|d| d.uid == *uid) {
+                    Some(i) => Some(current.swap_remove(i)),
+                    None => self.closed_in_group.iter().position(|d| d.uid == *uid).map(|i| self.closed_in_group.swap_remove(i)),
+                };
+                self.docs.extend(tab);
+            }
             for ((uid, doc, selection, page, undo_len, limit), redo) in before.iter().zip(redo_before) {
                 if let Some(ds) = self.docs.iter_mut().find(|ds| ds.uid == *uid) {
                     ds.history.redo = redo;
@@ -1315,8 +1332,14 @@ impl Session {
             }
             self.active = active;
             self.journal.truncate(journal_len);
+            if self.group_depth == 0 {
+                self.closed_in_group.clear();
+            }
             return result;
         }
+        if self.group_depth == 0 {
+            self.closed_in_group.clear();
+        }
 
         let changed: Vec<_> = before
             .iter()

From 8b94da604a255ce768c5c52107d2103ad6c9eddc Mon Sep 17 00:00:00 2001
From: NetterSilver <133535268+Silvertree2010@users.noreply.github.com>
Date: Sat, 24 Oct 2026 05:46:51 +0200
Subject: [PATCH 27/59] fix: use apostrophe-aware title case on the canvas text
 path

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 crates/doc/src/text.rs    | 32 +++++++++++++++++++++++++++-----
 crates/svg/src/lib.rs     |  6 ++++--
 crates/text/src/layout.rs |  4 +++-
 crates/text/src/tests.rs  | 25 +++++++++++++++++++++++++
 4 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/crates/doc/src/text.rs b/crates/doc/src/text.rs
index 15e284bc..fe71bb5b 100644
--- a/crates/doc/src/text.rs
+++ b/crates/doc/src/text.rs
@@ -120,16 +120,29 @@ impl TextCase {
     }
 
     /// Apply the case to `s`, which follows `prev` in the text (so title case only capitalises
-    /// the first letter of each word even when a word spans several styled runs).
+    /// the first letter of each word even when a word spans several styled runs). An apostrophe
+    /// as `prev` is taken to continue a word.
     pub fn apply_after(self, s: &str, prev: Option<char>) -> String {
+        self.apply_impl(s, prev, prev.is_some_and(is_word_char))
+    }
+
+    /// Like [`apply_after`](Self::apply_after), also given the char `before` `prev`: an apostrophe
+    /// only continues a word when a letter or digit precedes it.
+    pub fn apply_between(self, s: &str, before: Option<char>, prev: Option<char>) -> String {
+        let continues = prev.is_some_and(|c| is_word_char(c) && (c.is_alphanumeric() || before.is_some_and(char::is_alphanumeric)));
+        self.apply_impl(s, prev, continues)
+    }
+
+    /// `in_word` says whether `prev` continues a word (rather than a new word starting here).
+    fn apply_impl(self, s: &str, prev: Option<char>, in_word: bool) -> String {
         match self {
             TextCase::Original | TextCase::SmallCaps => s.to_string(),
             TextCase::Upper => s.to_uppercase(),
             TextCase::Lower => s.to_lowercase(),
             TextCase::Title => {
                 let mut out = String::with_capacity(s.len());
-                let mut start = prev.is_none_or(|c| !is_word_char(c));
-                let mut before = prev;
+                let mut start = !in_word;
+                let mut last = prev;
                 for ch in s.chars() {
                     if start && ch.is_alphanumeric() {
                         out.extend(ch.to_uppercase());
@@ -137,9 +150,10 @@ impl TextCase {
                     } else {
                         out.push(ch);
                         // An apostrophe only continues a word right after a letter or digit.
-                        start = !is_word_char(ch) || (!ch.is_alphanumeric() && !before.is_some_and(|c| c.is_alphanumeric()));
+                        let opening_apostrophe = matches!(ch, '\'' | '\u{2019}') && !last.is_some_and(char::is_alphanumeric);
+                        start = !is_word_char(ch) || opening_apostrophe;
                     }
-                    before = Some(ch);
+                    last = Some(ch);
                 }
                 out
             }
@@ -846,4 +860,12 @@ mod title_case_tests {
         assert_eq!(TextCase::Title.apply("don't"), "Don't");
         assert_eq!(TextCase::Title.apply("\u{2019}hello"), "\u{2019}Hello");
     }
+
+    #[test]
+    fn title_case_between_runs_sees_char_before_apostrophe() {
+        assert_eq!(TextCase::Title.apply_after("t", Some('\'')), "t");
+        assert_eq!(TextCase::Title.apply_between("hello", None, Some('\'')), "Hello");
+        assert_eq!(TextCase::Title.apply_between("t", Some('n'), Some('\'')), "t");
+        assert_eq!(TextCase::Title.apply_between("t", Some(' '), Some('\u{2019}')), "T");
+    }
 }
diff --git a/crates/svg/src/lib.rs b/crates/svg/src/lib.rs
index 55176aaf..908b82ea 100644
--- a/crates/svg/src/lib.rs
+++ b/crates/svg/src/lib.rs
@@ -587,7 +587,8 @@ impl W<'_> {
                         let end = glyphs.get(j).map_or(line.char_end, |g| g.char_start).max(start).min(chars.len());
                         let text: String = chars.get(start.min(end)..end).unwrap_or(&[]).iter().collect();
                         let prev = start.checked_sub(1).and_then(|k| chars.get(k)).copied();
-                        let text = st.case.apply_after(text.trim_end_matches(['\n', '\r']), prev);
+                        let before = start.checked_sub(2).and_then(|k| chars.get(k)).copied();
+                        let text = st.case.apply_between(text.trim_end_matches(['\n', '\r']), before, prev);
                         let own = match layout.styles.get(style).and_then(|s| s.fills.as_ref()) {
                             Some(fills) => {
                                 let a = fills.iter().find_map(|p| self.paint_attr(p, n.width, n.height)).unwrap_or_else(|| "fill=\"none\"".into());
@@ -603,7 +604,8 @@ impl W<'_> {
                 }
                 let text: String = chars.get(line.char_start..line.char_end.min(chars.len())).unwrap_or(&[]).iter().collect();
                 let prev = line.char_start.checked_sub(1).and_then(|k| chars.get(k)).copied();
-                let text = st.case.apply_after(text.trim_end_matches(['\n', '\r']), prev);
+                let before = line.char_start.checked_sub(2).and_then(|k| chars.get(k)).copied();
+                let text = st.case.apply_between(text.trim_end_matches(['\n', '\r']), before, prev);
                 let (x, y) = layout.glyphs.get(line.glyph_start).map_or((0.0, line.baseline), |g| (g.x, g.y));
                 let _ = write!(spans, "<tspan x=\"{}\" y=\"{}\">{}</tspan>", num(x), num(y), esc(&text));
             }
diff --git a/crates/text/src/layout.rs b/crates/text/src/layout.rs
index 26ae3d33..9ad5a373 100644
--- a/crates/text/src/layout.rs
+++ b/crates/text/src/layout.rs
@@ -1059,6 +1059,7 @@ fn shape_segment(chars: &[char], seg: &Segment, face: &Arc<Face>, features: &[Fe
     // a word split across styled runs is capitalised once) and remember synthesised small caps.
     let mut mapped: Vec<(char, usize, bool)> = Vec::with_capacity(end.saturating_sub(start));
     let mut prev = start.checked_sub(1).and_then(|i| chars.get(i)).copied();
+    let mut before = start.checked_sub(2).and_then(|i| chars.get(i)).copied();
     for (i, c) in chars.get(start..end).unwrap_or(&[]).iter().enumerate() {
         let src = start + i;
         if small_caps && !native_smcp && c.is_lowercase() {
@@ -1067,10 +1068,11 @@ fn shape_segment(chars: &[char], seg: &Segment, face: &Arc<Face>, features: &[Fe
             }
         } else {
             let mut buf = [0u8; 4];
-            for u in style.case.apply_after(c.encode_utf8(&mut buf), prev).chars() {
+            for u in style.case.apply_between(c.encode_utf8(&mut buf), before, prev).chars() {
                 mapped.push((u, src, false));
             }
         }
+        before = prev;
         prev = Some(*c);
     }
     let mut small = vec![false; end.saturating_sub(start)];
diff --git a/crates/text/src/tests.rs b/crates/text/src/tests.rs
index ebf5889c..3524c51b 100644
--- a/crates/text/src/tests.rs
+++ b/crates/text/src/tests.rs
@@ -170,6 +170,31 @@ fn title_case_across_runs() {
     assert_eq!(gid_at(6), Some(face.glyph_for('W')));
 }
 
+#[test]
+fn title_case_after_opening_apostrophe_on_canvas() {
+    let Some(face) = inter() else { return };
+    let glyph_chars = |s: &str, split: Option<usize>| {
+        let mut t = TextData::new(s);
+        t.style.case = figcraft_doc::TextCase::Title;
+        if let Some(n) = split {
+            t.restyle(0, n, |st| st.font_style = "Bold".into());
+        }
+        let l = layout(&t, None, None);
+        let chars: Vec<char> = s.chars().collect();
+        (0..chars.len()).map(|i| l.glyphs.iter().find(|g| g.char_start == i).map(|g| g.gid)).collect::<Vec<_>>()
+    };
+    let expect = |s: &str, want: &str| {
+        let got: Vec<Option<u32>> = want.chars().map(|c| Some(face.glyph_for(c))).collect();
+        for split in [None, Some(1), Some(2)] {
+            assert_eq!(glyph_chars(s, split), got, "{s:?} split {split:?}");
+        }
+    };
+    expect("'hello world'", "'Hello World'");
+    expect("say 'hi'", "Say 'Hi'");
+    expect("don't", "Don't");
+    expect("\u{2019}hello", "\u{2019}Hello");
+}
+
 #[test]
 fn lists_hang_and_number() {
     if !have_fonts() {

From 545cd630fd55e12e89ae186ca53c0e352ca86611 Mon Sep 17 00:00:00 2001
From: JimKnoxx <jimknoxx@knoxx.media>
Date: Fri, 16 Oct 2026 09:20:15 +0200
Subject: [PATCH 28/59] M5: overlay positions relative to the layer that opens
 them

From the Figma forum request "Set overlay position relative to element,
not to page": an open overlay action takes anchor: screen (default) |
triggerInside | triggerOutside. With a trigger anchor the position preset
is measured on the layer that opens the overlay instead of the screen.
Outside puts top presets above it and bottom presets below it with the
edges lined up (a dropdown is Bottom left + Outside); Center centres it
on that layer. Manual is unchanged.

The interaction editor gets Relative to (Whole screen / Trigger layer)
and Inside / Outside. The player, the command (and so MCP and the
control channel) carry it; the command's params doc lists it. Figma has
no such setting, so .fig export writes it as a manual offset. Old files
and JSON without anchor read as screen and write unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 crates/doc/src/colors_tests.rs                |  1 +
 crates/doc/src/lib.rs                         |  2 +
 crates/doc/src/proto.rs                       | 43 +++++++++++
 crates/doc/src/proto_overlay_anchor_tests.rs  | 61 +++++++++++++++
 crates/engine/src/cmd/proto.rs                |  2 +-
 crates/engine/src/lib.rs                      |  2 +
 .../engine/src/proto_overlay_anchor_tests.rs  | 70 +++++++++++++++++
 crates/format/src/fig/export.rs               | 20 +++--
 crates/format/src/fig/export_tests.rs         |  5 +-
 crates/format/src/rest/proto.rs               |  4 +-
 crates/mcp/tests/it/main.rs                   |  2 +
 crates/mcp/tests/it/overlay_anchor.rs         | 25 +++++++
 crates/ui-egui/locales/bn.toml                |  3 +
 crates/ui-egui/locales/cs.toml                |  3 +
 crates/ui-egui/locales/de.toml                |  3 +
 crates/ui-egui/locales/en.toml                |  3 +
 crates/ui-egui/locales/es.toml                |  3 +
 crates/ui-egui/locales/fi.toml                |  3 +
 crates/ui-egui/locales/fr.toml                |  3 +
 crates/ui-egui/locales/id.toml                |  3 +
 crates/ui-egui/locales/ja.toml                |  3 +
 crates/ui-egui/locales/ka.toml                |  3 +
 crates/ui-egui/locales/ko.toml                |  3 +
 crates/ui-egui/locales/nl.toml                |  3 +
 crates/ui-egui/locales/pl.toml                |  3 +
 crates/ui-egui/locales/pt-BR.toml             |  3 +
 crates/ui-egui/locales/ru.toml                |  3 +
 crates/ui-egui/locales/sv.toml                |  3 +
 crates/ui-egui/locales/tr.toml                |  3 +
 crates/ui-egui/locales/zh-Hans.toml           |  3 +
 crates/ui-egui/src/present.rs                 | 32 +++++++-
 crates/ui-egui/src/present_behaviour_tests.rs |  2 +-
 .../src/present_overlay_anchor_tests.rs       | 75 +++++++++++++++++++
 crates/ui-egui/src/proto_panel.rs             | 58 ++++++++++----
 docs/mcp.md                                   |  6 +-
 docs/prototyping-parity.md                    |  4 +-
 36 files changed, 439 insertions(+), 29 deletions(-)
 create mode 100644 crates/doc/src/proto_overlay_anchor_tests.rs
 create mode 100644 crates/engine/src/proto_overlay_anchor_tests.rs
 create mode 100644 crates/mcp/tests/it/overlay_anchor.rs
 create mode 100644 crates/ui-egui/src/present_overlay_anchor_tests.rs

diff --git a/crates/doc/src/colors_tests.rs b/crates/doc/src/colors_tests.rs
index 3a97a5d0..9a4d2327 100644
--- a/crates/doc/src/colors_tests.rs
+++ b/crates/doc/src/colors_tests.rs
@@ -28,6 +28,7 @@ fn colourful() -> (Document, NodeId) {
                 close_on_outside: false,
                 background: Some(RED),
                 offset: None,
+                anchor: Default::default(),
             }],
             transition: Default::default(),
             duration_ms: 300,
diff --git a/crates/doc/src/lib.rs b/crates/doc/src/lib.rs
index 70797dd8..d979101b 100644
--- a/crates/doc/src/lib.rs
+++ b/crates/doc/src/lib.rs
@@ -1244,6 +1244,8 @@ mod proto_expr_parse_tests;
 #[cfg(test)]
 mod proto_expr_tests;
 #[cfg(test)]
+mod proto_overlay_anchor_tests;
+#[cfg(test)]
 mod tests;
 #[cfg(test)]
 mod vector_regions_tests;
diff --git a/crates/doc/src/proto.rs b/crates/doc/src/proto.rs
index a844774c..d3830bfb 100644
--- a/crates/doc/src/proto.rs
+++ b/crates/doc/src/proto.rs
@@ -507,6 +507,46 @@ impl OverlayPosition {
     }
 }
 
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Serialize, Deserialize, Default)]
+#[serde(rename_all = "camelCase")]
+pub enum OverlayAnchor {
+    #[default]
+    Screen,
+    TriggerInside,
+    TriggerOutside,
+}
+
+impl OverlayAnchor {
+    pub fn is_screen(&self) -> bool {
+        *self == OverlayAnchor::Screen
+    }
+
+    /// Gives None for Screen and for Manual.
+    pub fn offset(self, position: OverlayPosition, trigger: [f64; 2], overlay: [f64; 2]) -> Option<[f64; 2]> {
+        use OverlayPosition as P;
+        let ([tw, th], [ow, oh]) = (trigger, overlay);
+        let outside = match self {
+            OverlayAnchor::Screen => return None,
+            OverlayAnchor::TriggerInside => false,
+            OverlayAnchor::TriggerOutside => true,
+        };
+        let x = match position {
+            P::TopLeft | P::BottomLeft => 0.0,
+            P::Center | P::TopCenter | P::BottomCenter => (tw - ow) / 2.0,
+            P::TopRight | P::BottomRight => tw - ow,
+            P::Manual => return None,
+        };
+        let y = match position {
+            P::TopLeft | P::TopCenter | P::TopRight if outside => -oh,
+            P::TopLeft | P::TopCenter | P::TopRight => 0.0,
+            P::BottomLeft | P::BottomCenter | P::BottomRight if outside => th,
+            P::BottomLeft | P::BottomCenter | P::BottomRight => th - oh,
+            P::Center | P::Manual => (th - oh) / 2.0,
+        };
+        Some([x, y])
+    }
+}
+
 #[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
 #[serde(tag = "type", rename_all = "camelCase")]
 pub enum Action {
@@ -538,6 +578,9 @@ pub enum Action {
         /// opened it (x, y). None = right below that layer.
         #[serde(default, skip_serializing_if = "Option::is_none")]
         offset: Option<[f64; 2]>,
+        /// Figma does not have this. The .fig export writes it as a manual offset.
+        #[serde(default, skip_serializing_if = "OverlayAnchor::is_screen")]
+        anchor: OverlayAnchor,
     },
     SwapOverlay {
         dest: NodeId,
diff --git a/crates/doc/src/proto_overlay_anchor_tests.rs b/crates/doc/src/proto_overlay_anchor_tests.rs
new file mode 100644
index 00000000..d902d1c2
--- /dev/null
+++ b/crates/doc/src/proto_overlay_anchor_tests.rs
@@ -0,0 +1,61 @@
+use serde_json::json;
+
+use crate::NodeId;
+use crate::proto::*;
+
+const TRIGGER: [f64; 2] = [100.0, 40.0];
+const OVERLAY: [f64; 2] = [60.0, 200.0];
+
+fn at(anchor: OverlayAnchor, p: OverlayPosition) -> Option<[f64; 2]> {
+    anchor.offset(p, TRIGGER, OVERLAY)
+}
+
+#[test]
+fn outside_sits_above_or_below_with_edges_lined_up() {
+    use OverlayPosition as P;
+    let out = OverlayAnchor::TriggerOutside;
+    assert_eq!(at(out, P::BottomLeft), Some([0.0, 40.0]));
+    assert_eq!(at(out, P::BottomCenter), Some([20.0, 40.0]));
+    assert_eq!(at(out, P::BottomRight), Some([40.0, 40.0]));
+    assert_eq!(at(out, P::TopLeft), Some([0.0, -200.0]));
+    assert_eq!(at(out, P::TopCenter), Some([20.0, -200.0]));
+    assert_eq!(at(out, P::TopRight), Some([40.0, -200.0]));
+    assert_eq!(at(out, P::Center), Some([20.0, -80.0]));
+}
+
+#[test]
+fn inside_uses_the_presets_on_the_trigger() {
+    use OverlayPosition as P;
+    let ins = OverlayAnchor::TriggerInside;
+    assert_eq!(at(ins, P::TopLeft), Some([0.0, 0.0]));
+    assert_eq!(at(ins, P::TopRight), Some([40.0, 0.0]));
+    assert_eq!(at(ins, P::BottomLeft), Some([0.0, -160.0]));
+    assert_eq!(at(ins, P::BottomCenter), Some([20.0, -160.0]));
+    assert_eq!(at(ins, P::Center), Some([20.0, -80.0]));
+}
+
+#[test]
+fn the_screen_and_manual_positions_have_no_preset_offset() {
+    assert_eq!(at(OverlayAnchor::Screen, OverlayPosition::BottomLeft), None);
+    assert_eq!(at(OverlayAnchor::TriggerOutside, OverlayPosition::Manual), None);
+    assert_eq!(at(OverlayAnchor::TriggerInside, OverlayPosition::Manual), None);
+}
+
+#[test]
+fn json_keeps_the_anchor_and_old_actions_stay_on_the_screen() {
+    let a = Action::OpenOverlay {
+        dest: NodeId(7),
+        position: OverlayPosition::BottomLeft,
+        close_on_outside: true,
+        background: None,
+        offset: None,
+        anchor: OverlayAnchor::TriggerOutside,
+    };
+    let v = serde_json::to_value(&a).unwrap();
+    assert_eq!(v["anchor"], "triggerOutside");
+    assert_eq!(serde_json::from_value::<Action>(v).unwrap(), a);
+
+    let old: Action = serde_json::from_value(json!({"type": "openOverlay", "dest": 7, "position": "bottomLeft"})).unwrap();
+    assert!(matches!(old, Action::OpenOverlay { anchor: OverlayAnchor::Screen, .. }));
+    assert!(serde_json::to_value(&old).unwrap().get("anchor").is_none());
+}
diff --git a/crates/engine/src/cmd/proto.rs b/crates/engine/src/cmd/proto.rs
index be6907b5..43a08704 100644
--- a/crates/engine/src/cmd/proto.rs
+++ b/crates/engine/src/cmd/proto.rs
@@ -13,7 +13,7 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "proto.interaction.add",
             "Add interaction",
-            "{id?, trigger? {type: onClick|onHover|onPress|onDrag|mouseEnter|mouseLeave|mouseDown|mouseUp|afterDelay {ms}|keyPress {key (a key or a combination: Shift+K, Ctrl+Alt+Delete; or a controller button: Gamepad A|B|X|Y|LB|RB|LT|RT|View|Menu|LS|RS|Up|Down|Left|Right|Home)}}, action {type: navigate {preserveScroll?}|back|scrollTo {offset? [x, y] (where the layer ends up from the top-left)}|openOverlay {position?, offset? [x, y] (position manual: the overlay's top-left from the top-left of the layer that opens it; without it, right below that layer), close_on_outside? (default true), background?}|swapOverlay|closeOverlay|openUrl {url}|changeTo|setVariable {variable, value | expression (text, e.g. \"count + 1\")}|setVariableMode {collection, mode}|conditional {blocks [{condition? | expression? (text, e.g. \"count >= 3\"), actions}]}, dest?}, actions? [..], transition? {type: instant|dissolve|smartAnimate|moveIn|moveOut|push|slideIn|slideOut, direction?: left|right|top|bottom}, durationMs?, easing? linear|easeIn|easeOut|easeInOut|easeInBack|easeOutBack|easeInOutBack|gentle|quick|bouncy|slow|{customBezier {x1, y1, x2, y2}}|{customSpring {mass, stiffness, damping}}}, delayMs? (mouse enter, leave, down and up: how long after the gesture the actions run, up to 600000)} — or {id, dest} for a click-navigate. Returns {index}",
+            "{id?, trigger? {type: onClick|onHover|onPress|onDrag|mouseEnter|mouseLeave|mouseDown|mouseUp|afterDelay {ms}|keyPress {key (a key or a combination: Shift+K, Ctrl+Alt+Delete; or a controller button: Gamepad A|B|X|Y|LB|RB|LT|RT|View|Menu|LS|RS|Up|Down|Left|Right|Home)}}, action {type: navigate {preserveScroll?}|back|scrollTo {offset? [x, y] (where the layer ends up from the top-left)}|openOverlay {position?, anchor? screen|triggerInside|triggerOutside (default screen; the trigger ones measure the position preset on the layer that opens the overlay: outside puts top presets above it and bottom presets below it, edges lined up), offset? [x, y] (position manual: the overlay's top-left from the top-left of the layer that opens it; without it, right below that layer), close_on_outside? (default true), background?}|swapOverlay|closeOverlay|openUrl {url}|changeTo|setVariable {variable, value | expression (text, e.g. \"count + 1\")}|setVariableMode {collection, mode}|conditional {blocks [{condition? | expression? (text, e.g. \"count >= 3\"), actions}]}, dest?}, actions? [..], transition? {type: instant|dissolve|smartAnimate|moveIn|moveOut|push|slideIn|slideOut, direction?: left|right|top|bottom}, durationMs?, easing? linear|easeIn|easeOut|easeInOut|easeInBack|easeOutBack|easeInOutBack|gentle|quick|bouncy|slow|{customBezier {x1, y1, x2, y2}}|{customSpring {mass, stiffness, damping}}}, delayMs? (mouse enter, leave, down and up: how long after the gesture the actions run, up to 600000)} — or {id, dest} for a click-navigate. Returns {index}",
             true,
             add
         ),
diff --git a/crates/engine/src/lib.rs b/crates/engine/src/lib.rs
index 29b084f2..3b82ccc3 100644
--- a/crates/engine/src/lib.rs
+++ b/crates/engine/src/lib.rs
@@ -1821,6 +1821,8 @@ mod proto_delay_tests;
 #[cfg(test)]
 mod proto_multi_tests;
 #[cfg(test)]
+mod proto_overlay_anchor_tests;
+#[cfg(test)]
 mod proto_polish_tests;
 #[cfg(test)]
 mod proto_present_tests;
diff --git a/crates/engine/src/proto_overlay_anchor_tests.rs b/crates/engine/src/proto_overlay_anchor_tests.rs
new file mode 100644
index 00000000..ebf9a30c
--- /dev/null
+++ b/crates/engine/src/proto_overlay_anchor_tests.rs
@@ -0,0 +1,70 @@
+use serde_json::{Value, json};
+
+use crate::params::id_of;
+use crate::{EngineError, Session};
+use figcraft_doc::NodeId;
+use figcraft_doc::proto::{Action, OverlayAnchor, OverlayPosition};
+
+fn frame(s: &mut Session, x: f64, w: f64, h: f64, name: &str) -> NodeId {
+    id_of(&s.execute("frame.create", &json!({"x": x, "y": 0, "width": w, "height": h, "name": name})).unwrap()["id"]).unwrap()
+}
+
+fn button(s: &mut Session, parent: NodeId) -> NodeId {
+    let r = s.execute("node.create", &json!({"type": "rectangle", "x": 10, "y": 30, "width": 100, "height": 40, "parent": parent, "name": "Button"}));
+    id_of(&r.unwrap()["id"]).unwrap()
+}
+
+fn action(s: &Session, id: NodeId) -> Action {
+    s.doc().unwrap().node(id).unwrap().interactions[0].actions[0].clone()
+}
+
+fn dropdown(s: &mut Session) -> (NodeId, NodeId) {
+    let screen = frame(s, 0.0, 400.0, 800.0, "Screen");
+    let menu = frame(s, 600.0, 60.0, 200.0, "Menu");
+    let b = button(s, screen);
+    let open = json!({"type": "openOverlay", "dest": menu, "position": "bottomLeft", "anchor": "triggerOutside"});
+    s.execute("proto.interaction.add", &json!({"id": b, "action": open})).unwrap();
+    (b, menu)
+}
+
+#[test]
+fn the_anchor_is_set_read_and_undone() {
+    let mut s = Session::new();
+    let (b, menu) = dropdown(&mut s);
+    assert!(matches!(action(&s, b), Action::OpenOverlay { anchor: OverlayAnchor::TriggerOutside, position: OverlayPosition::BottomLeft, .. }));
+    s.execute(
+        "proto.interaction.set",
+        &json!({"id": b, "index": 0, "action": {"type": "openOverlay", "dest": menu, "position": "topCenter", "anchor": "triggerInside"}}),
+    )
+    .unwrap();
+    assert!(matches!(action(&s, b), Action::OpenOverlay { anchor: OverlayAnchor::TriggerInside, position: OverlayPosition::TopCenter, .. }));
+    assert!(s.undo().unwrap());
+    assert!(matches!(action(&s, b), Action::OpenOverlay { anchor: OverlayAnchor::TriggerOutside, .. }));
+}
+
+#[test]
+fn fig_writes_a_manual_offset_from_the_trigger() {
+    let mut s = Session::new();
+    let (b, _) = dropdown(&mut s);
+    let (bytes, _) = figcraft_format::fig::export(s.doc().unwrap(), None).unwrap();
+    let (back, _) = figcraft_format::fig::import(&bytes, "x").unwrap();
+    let hot = back.nodes().find(|n| n.name == "Button").unwrap();
+    assert!(
+        matches!(hot.interactions[0].actions[0], Action::OpenOverlay { position: OverlayPosition::Manual, offset: Some([0.0, 40.0]), .. }),
+        "{:?} (from {b:?})",
+        hot.interactions[0].actions
+    );
+}
+
+#[test]
+fn junk_anchors_are_refused_not_fatal() {
+    let junk = [json!(true), json!(-1), json!("above"), json!([1, 2]), json!({"a": 1}), json!("x".repeat(10_000))];
+    for j in &junk {
+        let mut s = Session::new();
+        let (a, menu) = (frame(&mut s, 0.0, 100.0, 100.0, "A"), frame(&mut s, 200.0, 50.0, 50.0, "M"));
+        let p: Value = json!({"id": a, "action": {"type": "openOverlay", "dest": menu, "anchor": j}});
+        let r = s.execute("proto.interaction.add", &p);
+        assert!(!matches!(r, Err(EngineError::Internal { .. })), "{p}: {r:?}");
+        assert!(s.doc().unwrap().node(a).unwrap().interactions.is_empty(), "{j}");
+    }
+}
diff --git a/crates/format/src/fig/export.rs b/crates/format/src/fig/export.rs
index dad09d95..8cd493cf 100644
--- a/crates/format/src/fig/export.rs
+++ b/crates/format/src/fig/export.rs
@@ -448,6 +448,7 @@ struct Exporter<'d> {
     tracks: BTreeMap<NodeId, (Vec<u32>, Vec<u32>)>,
     aux: u32,
     overlays: BTreeMap<NodeId, Overlay>,
+    trigger_size: [f64; 2],
     /// Flow starting points: layer → (order, name).
     starts: BTreeMap<NodeId, (usize, String)>,
     /// Shared styles, variable collections and variables → local id of their node's GUID (session
@@ -486,6 +487,7 @@ impl<'d> Exporter<'d> {
             tracks: BTreeMap::new(),
             aux: 0,
             overlays: BTreeMap::new(),
+            trigger_size: [0.0, 0.0],
             starts: BTreeMap::new(),
             style_ids: BTreeMap::new(),
             set_ids: BTreeMap::new(),
@@ -574,8 +576,9 @@ impl<'d> Exporter<'d> {
                 _ => {}
             }
             for a in n.interactions.iter().flat_map(|it| figcraft_doc::proto::walk(&it.actions)) {
-                if let Action::OpenOverlay { dest, position, close_on_outside, background, .. } = a {
-                    let o = Overlay { position: *position, close_on_outside: *close_on_outside, background: *background };
+                if let Action::OpenOverlay { dest, position, close_on_outside, background, anchor, .. } = a {
+                    let position = if !anchor.is_screen() && *position != OverlayPosition::Manual { OverlayPosition::Manual } else { *position };
+                    let o = Overlay { position, close_on_outside: *close_on_outside, background: *background };
                     match self.overlays.get(dest) {
                         Some(old) if (old.position, old.close_on_outside, old.background) != (o.position, o.close_on_outside, o.background) => {
                             self.warn("overlays opened with different settings keep the first one's");
@@ -2086,6 +2089,7 @@ impl<'d> Exporter<'d> {
 
     /// Interactions, scrolling, flow starts and the overlay settings this layer is opened with.
     fn prototype(&mut self, n: &Node, f: &mut Fields) {
+        self.trigger_size = [n.width, n.height];
         let list: Vec<Kv> = n.interactions.iter().filter_map(|it| self.interaction(it)).collect();
         if !list.is_empty() {
             f.push(("prototypeInteractions", arr(list)));
@@ -2174,10 +2178,16 @@ impl<'d> Exporter<'d> {
                 }
                 Some(act)
             }
-            Action::OpenOverlay { dest, position, offset, .. } => {
+            Action::OpenOverlay { dest, position, offset, anchor, .. } => {
                 let mut act = node(self, dest, "OVERLAY")?;
-                if let (Kv::Object(f), OverlayPosition::Manual, Some([x, y])) = (&mut act, position, offset) {
-                    f.push(("overlayRelativePosition", o(vec![("x", fl(*x)), ("y", fl(*y))])));
+                let size = self.doc.node(*dest).map_or([0.0, 0.0], |d| [d.width, d.height]);
+                let offset = match anchor.offset(*position, self.trigger_size, size) {
+                    Some(o) => Some(o),
+                    None if *position == OverlayPosition::Manual => *offset,
+                    None => None,
+                };
+                if let (Kv::Object(f), Some([x, y])) = (&mut act, offset) {
+                    f.push(("overlayRelativePosition", o(vec![("x", fl(x)), ("y", fl(y))])));
                 }
                 Some(act)
             }
diff --git a/crates/format/src/fig/export_tests.rs b/crates/format/src/fig/export_tests.rs
index 1f0fe172..5c29cf0a 100644
--- a/crates/format/src/fig/export_tests.rs
+++ b/crates/format/src/fig/export_tests.rs
@@ -7,7 +7,9 @@ use std::collections::{BTreeMap, BTreeSet};
 
 use figcraft_doc::color::{BlendMode, Color, ColorStop, Gradient, GradientKind, ImageScaleMode, Paint, PaintKind};
 use figcraft_doc::geom::{Affine, Point};
-use figcraft_doc::proto::{Action, Direction, Easing, Flow, Interaction, KeyMods, Overflow, OverlayPosition, ScrollPosition, Transition, Trigger};
+use figcraft_doc::proto::{
+    Action, Direction, Easing, Flow, Interaction, KeyMods, Overflow, OverlayAnchor, OverlayPosition, ScrollPosition, Transition, Trigger,
+};
 use figcraft_doc::*;
 use serde_json::Value;
 
@@ -511,6 +513,7 @@ impl Gen {
                     close_on_outside: true,
                     background: Some(Color::new(0.0, 0.0, 0.0, 0.5)),
                     offset: None,
+                    anchor: OverlayAnchor::Screen,
                 },
                 3 => Action::SwapOverlay { dest },
                 4 => Action::ChangeTo { dest },
diff --git a/crates/format/src/rest/proto.rs b/crates/format/src/rest/proto.rs
index 56e50e5e..61869916 100644
--- a/crates/format/src/rest/proto.rs
+++ b/crates/format/src/rest/proto.rs
@@ -4,7 +4,7 @@
 
 use figcraft_doc::proto::{
     Action, ConditionalBlock, DeviceRotation, Direction, Easing, Expr, ExprOp, Interaction, KeyMods, MAX_ACTION_DEPTH, MAX_EXPR_DEPTH, Overflow,
-    OverlayPosition, PrototypeSettings, ScrollPosition, Transition, Trigger, gamepad_button,
+    OverlayAnchor, OverlayPosition, PrototypeSettings, ScrollPosition, Transition, Trigger, gamepad_button,
 };
 use figcraft_doc::{Node, NodeId, VariableType, VariableValue};
 use serde_json::{Value, json};
@@ -322,7 +322,7 @@ impl Ctx<'_> {
                     .and_then(|v| Some([num(v, "x")?, num(v, "y")?]))
                     .filter(|o| o.iter().all(|c| c.is_finite()))
                     .map(|o| o.map(|c| c.clamp(-MAX_OFFSET, MAX_OFFSET)));
-                Action::OpenOverlay { dest, position, close_on_outside, background, offset }
+                Action::OpenOverlay { dest, position, close_on_outside, background, offset, anchor: OverlayAnchor::Screen }
             }
             Some(_) => {
                 self.warn("prototype navigations of unknown types were skipped");
diff --git a/crates/mcp/tests/it/main.rs b/crates/mcp/tests/it/main.rs
index b16fc98e..b24882ae 100644
--- a/crates/mcp/tests/it/main.rs
+++ b/crates/mcp/tests/it/main.rs
@@ -15,6 +15,8 @@ mod garbage;
 #[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 mod inspect_response_limit;
 #[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
+mod overlay_anchor;
+#[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 mod protocol;
 #[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 mod screenshot_pixel_limit;
diff --git a/crates/mcp/tests/it/overlay_anchor.rs b/crates/mcp/tests/it/overlay_anchor.rs
new file mode 100644
index 00000000..c9cd3473
--- /dev/null
+++ b/crates/mcp/tests/it/overlay_anchor.rs
@@ -0,0 +1,25 @@
+use crate::common;
+
+use common::Client;
+use serde_json::json;
+
+#[test]
+fn an_agent_anchors_a_dropdown_to_its_button() {
+    let mut c = Client::new();
+    let listed = c.ok("list_commands", json!({"filter": "proto.interaction.add"}));
+    assert!(listed.as_str().unwrap().contains("triggerOutside"), "{listed}");
+
+    let screen = c.create(json!({"type": "frame", "name": "Screen", "x": 0, "y": 0, "width": 400, "height": 800}));
+    let menu = c.create(json!({"type": "frame", "name": "Menu", "x": 600, "y": 0, "width": 160, "height": 200}));
+    let button = c.create(json!({"type": "frame", "parent": screen, "name": "Button", "x": 20, "y": 40, "width": 160, "height": 40}));
+    let open = json!({"type": "openOverlay", "dest": menu, "position": "bottomLeft", "anchor": "triggerOutside"});
+    c.run("proto.interaction.add", json!({"id": button, "action": open}));
+
+    let action = &c.node(&button)["interactions"][0]["actions"][0];
+    assert_eq!((action["position"].as_str(), action["anchor"].as_str()), (Some("bottomLeft"), Some("triggerOutside")), "{action}");
+
+    let bad = json!({"type": "openOverlay", "dest": menu, "anchor": "nextToIt"});
+    let err = c.err("run_command", json!({"command": "proto.interaction.add", "params": {"id": button, "action": bad}}));
+    assert!(!err.is_empty());
+    assert_eq!(c.node(&button)["interactions"].as_array().unwrap().len(), 1);
+}
diff --git a/crates/ui-egui/locales/bn.toml b/crates/ui-egui/locales/bn.toml
index 364c9632..fd3174ff 100644
--- a/crates/ui-egui/locales/bn.toml
+++ b/crates/ui-egui/locales/bn.toml
@@ -1083,6 +1083,7 @@ status = "draft — needs native review"
 "Reduce motion" = "মোশন কমান"
 "Refraction" = "প্রতিসরণ"
 "Regular expression" = "রেগুলার এক্সপ্রেশন"
+"Relative to" = "এর সাপেক্ষে"
 "Remove" = "সরান"
 "Remove all" = "সব সরান"
 "Remove annotation" = "অ্যানোটেশন সরান"
@@ -1442,6 +1443,7 @@ status = "draft — needs native review"
 "Triangle" = "ত্রিভুজ"
 "Triangle arrow" = "ত্রিভুজ তীর"
 "Trigger" = "ট্রিগার"
+"Trigger layer" = "ট্রিগার লেয়ার"
 "True" = "সত্য (True)"
 "Truncate text" = "টেক্সট ট্রাঙ্কেট করুন"
 "Truncate with an ellipsis" = "উপবৃত্ত (ellipsis) দিয়ে ট্রাঙ্কেট করুন"
@@ -1539,6 +1541,7 @@ status = "draft — needs native review"
 "While pressing" = "চেপে ধরে রাখার সময়"
 "White" = "সাদা"
 "Who runs it, its terms and how long it keeps files" = "এটি কে পরিচালনা করে, এর শর্তাবলী এবং এটি কতদিন ফাইল রাখে"
+"Whole screen" = "সম্পূর্ণ স্ক্রিন"
 "Why it changed" = "কেন এটি পরিবর্তিত হয়েছে"
 "Widget" = "উইজেট"
 "Widgets" = "উইজেটসমূহ"
diff --git a/crates/ui-egui/locales/cs.toml b/crates/ui-egui/locales/cs.toml
index b05427b2..42d6c307 100644
--- a/crates/ui-egui/locales/cs.toml
+++ b/crates/ui-egui/locales/cs.toml
@@ -1062,6 +1062,7 @@ status = "draft — needs native review"
 "Reduce motion" = "Omezit pohyb"
 "Refraction" = "Lom světla"
 "Regular expression" = "Regulární výraz"
+"Relative to" = "Vzhledem k"
 "Remove" = "Odebrat"
 "Remove all" = "Odebrat vše"
 "Remove annotation" = "Odebrat anotaci"
@@ -1413,6 +1414,7 @@ status = "draft — needs native review"
 "Triangle" = "Trojúhelník"
 "Triangle arrow" = "Trojúhelníková šipka"
 "Trigger" = "Spouštěč"
+"Trigger layer" = "Spouštěcí vrstva"
 "True" = "Pravda"
 "Truncate text" = "Zkrátit text"
 "Truncate with an ellipsis" = "Zkrátit výpustkou"
@@ -1506,6 +1508,7 @@ status = "draft — needs native review"
 "While pressing" = "Při stisku"
 "White" = "Bílá"
 "Who runs it, its terms and how long it keeps files" = "Kdo ho provozuje, jeho podmínky a doba uchovávání souborů"
+"Whole screen" = "Celá obrazovka"
 "Why it changed" = "Důvod změny"
 "Widgets" = "Widgety"
 "Width" = "Šířka"
diff --git a/crates/ui-egui/locales/de.toml b/crates/ui-egui/locales/de.toml
index da2a177a..d9369fa8 100644
--- a/crates/ui-egui/locales/de.toml
+++ b/crates/ui-egui/locales/de.toml
@@ -1031,6 +1031,7 @@ status = "draft — needs native review"
 "Reduce motion" = "Bewegung reduzieren"
 "Refraction" = "Brechung"
 "Regular expression" = "Regulärer Ausdruck"
+"Relative to" = "Relativ zu"
 "Remove" = "Entfernen"
 "Remove all" = "Alle entfernen"
 "Remove annotation" = "Anmerkung entfernen"
@@ -1374,6 +1375,7 @@ status = "draft — needs native review"
 "Triangle" = "Dreieck"
 "Triangle arrow" = "Dreieckspfeil"
 "Trigger" = "Auslöser"
+"Trigger layer" = "Auslösende Ebene"
 "True" = "Wahr"
 "Truncate text" = "Text kürzen"
 "Truncate with an ellipsis" = "Mit Auslassungspunkten kürzen"
@@ -1467,6 +1469,7 @@ status = "draft — needs native review"
 "While pressing" = "Beim Drücken"
 "White" = "Weiß"
 "Who runs it, its terms and how long it keeps files" = "Wer ihn betreibt, seine Bedingungen und wie lange er Dateien aufbewahrt"
+"Whole screen" = "Ganzer Bildschirm"
 "Why it changed" = "Warum es sich geändert hat"
 "Widgets" = "Widgets"
 "Width" = "Breite"
diff --git a/crates/ui-egui/locales/en.toml b/crates/ui-egui/locales/en.toml
index e1ed336e..b939bd78 100644
--- a/crates/ui-egui/locales/en.toml
+++ b/crates/ui-egui/locales/en.toml
@@ -1092,6 +1092,7 @@ name = "English"
 "Reduce motion" = "Reduce motion"
 "Refraction" = "Refraction"
 "Regular expression" = "Regular expression"
+"Relative to" = "Relative to"
 "Relative to your system's display scaling (100% is the system's own size). Document zoom is separate." = "Relative to your system's display scaling (100% is the system's own size). Document zoom is separate."
 "Remove" = "Remove"
 "Remove all" = "Remove all"
@@ -1462,6 +1463,7 @@ name = "English"
 "Triangle" = "Triangle"
 "Triangle arrow" = "Triangle arrow"
 "Trigger" = "Trigger"
+"Trigger layer" = "Trigger layer"
 "True" = "True"
 "Truncate text" = "Truncate text"
 "Truncate with an ellipsis" = "Truncate with an ellipsis"
@@ -1562,6 +1564,7 @@ name = "English"
 "While pressing" = "While pressing"
 "White" = "White"
 "Who runs it, its terms and how long it keeps files" = "Who runs it, its terms and how long it keeps files"
+"Whole screen" = "Whole screen"
 "Why it changed" = "Why it changed"
 "Widget" = "Widget"
 "Widgets" = "Widgets"
diff --git a/crates/ui-egui/locales/es.toml b/crates/ui-egui/locales/es.toml
index a4323c87..1c2423f5 100644
--- a/crates/ui-egui/locales/es.toml
+++ b/crates/ui-egui/locales/es.toml
@@ -20,6 +20,9 @@ status = "draft — needs native review"
 "Compatibility notes" = "Notas de compatibilidad"
 "Connector" = "Conector"
 "Couldn't download the variables" = "No se pudieron descargar las variables"
+"Relative to" = "Relativa a"
+"Trigger layer" = "Capa que la abre"
+"Whole screen" = "Pantalla completa"
 
 "% of all commits" = "% del total de commits"
 "(no longer published)" = "(ya no publicado)"
diff --git a/crates/ui-egui/locales/fi.toml b/crates/ui-egui/locales/fi.toml
index fe979678..2c5620b3 100644
--- a/crates/ui-egui/locales/fi.toml
+++ b/crates/ui-egui/locales/fi.toml
@@ -1087,6 +1087,7 @@ status = "draft — needs native review"
 "Reduce motion" = "Vähennä liikettä"
 "Refraction" = "Taittuminen"
 "Regular expression" = "Säännöllinen lauseke"
+"Relative to" = "Suhteessa"
 "Remove" = "Poista"
 "Remove all" = "Poista kaikki"
 "Remove annotation" = "Poista huomautus"
@@ -1447,6 +1448,7 @@ status = "draft — needs native review"
 "Triangle" = "Kolmio"
 "Triangle arrow" = "Kolmionuoli"
 "Trigger" = "Laukaisin"
+"Trigger layer" = "Laukaiseva taso"
 "True" = "Tosi"
 "Truncate text" = "Lyhennä tekstiä"
 "Truncate with an ellipsis" = "Lyhennä kolmella pisteellä"
@@ -1544,6 +1546,7 @@ status = "draft — needs native review"
 "While pressing" = "Painettaessa"
 "White" = "Valkoinen"
 "Who runs it, its terms and how long it keeps files" = "Ylläpitäjä, käyttöehdot ja tiedostojen säilytysaika"
+"Whole screen" = "Koko näyttö"
 "Why it changed" = "Muutoksen syy"
 "Widget" = "Pienoisohjelma"
 "Widgets" = "Pienoisohjelmat"
diff --git a/crates/ui-egui/locales/fr.toml b/crates/ui-egui/locales/fr.toml
index bb771e9f..b1a9cf50 100644
--- a/crates/ui-egui/locales/fr.toml
+++ b/crates/ui-egui/locales/fr.toml
@@ -1086,6 +1086,7 @@ status = "draft — needs native review"
 "Reduce motion" = "Réduire les animations"
 "Refraction" = "Réfraction"
 "Regular expression" = "Expression régulière"
+"Relative to" = "Par rapport à"
 "Relative to your system's display scaling (100% is the system's own size). Document zoom is separate." = "Relative à la mise à l’échelle d’affichage de votre système (100 % est la taille du système). Le zoom du document est distinct."
 "Remove" = "Retirer"
 "Remove all" = "Tout retirer"
@@ -1448,6 +1449,7 @@ status = "draft — needs native review"
 "Triangle" = "Triangle"
 "Triangle arrow" = "Flèche triangulaire"
 "Trigger" = "Déclencheur"
+"Trigger layer" = "Calque déclencheur"
 "True" = "Vrai"
 "Truncate text" = "Tronquer le texte"
 "Truncate with an ellipsis" = "Tronquer avec des points de suspension"
@@ -1547,6 +1549,7 @@ status = "draft — needs native review"
 "While pressing" = "Pendant l’appui"
 "White" = "Blanc"
 "Who runs it, its terms and how long it keeps files" = "Qui le gère, ses conditions et combien de temps il conserve les fichiers"
+"Whole screen" = "Écran entier"
 "Why it changed" = "Pourquoi cela a changé"
 "Widget" = "Widget"
 "Widgets" = "Widgets"
diff --git a/crates/ui-egui/locales/id.toml b/crates/ui-egui/locales/id.toml
index a516db9f..36ab9886 100644
--- a/crates/ui-egui/locales/id.toml
+++ b/crates/ui-egui/locales/id.toml
@@ -8,6 +8,9 @@ name = "Bahasa Indonesia"
 status = "draft — needs native review"
 
 [ui]
+"Relative to" = "Relatif terhadap"
+"Trigger layer" = "Layer pemicu"
+"Whole screen" = "Seluruh layar"
 
 "% of all commits" = "% dari semua commit"
 "(no longer published)" = "(tidak lagi dipublikasikan)"
diff --git a/crates/ui-egui/locales/ja.toml b/crates/ui-egui/locales/ja.toml
index 641ec1f6..d3fa08f3 100644
--- a/crates/ui-egui/locales/ja.toml
+++ b/crates/ui-egui/locales/ja.toml
@@ -1074,6 +1074,7 @@ status = "draft — needs native review"
 "Reduce motion" = "動きを減らす"
 "Refraction" = "屈折"
 "Regular expression" = "正規表現"
+"Relative to" = "基準"
 "Remove" = "削除"
 "Remove all" = "すべて削除"
 "Remove annotation" = "注釈を削除"
@@ -1431,6 +1432,7 @@ status = "draft — needs native review"
 "Triangle" = "三角形"
 "Triangle arrow" = "三角矢印"
 "Trigger" = "トリガー"
+"Trigger layer" = "トリガーレイヤー"
 "True" = "true"
 "Truncate text" = "テキストを切り詰める"
 "Truncate with an ellipsis" = "省略記号で切り詰める"
@@ -1529,6 +1531,7 @@ status = "draft — needs native review"
 "While pressing" = "押している間"
 "White" = "白"
 "Who runs it, its terms and how long it keeps files" = "運営者、利用規約、ファイルの保管期間"
+"Whole screen" = "画面全体"
 "Why it changed" = "変更理由"
 "Widgets" = "ウィジェット"
 "Width" = "幅"
diff --git a/crates/ui-egui/locales/ka.toml b/crates/ui-egui/locales/ka.toml
index b556e8d7..d839db53 100644
--- a/crates/ui-egui/locales/ka.toml
+++ b/crates/ui-egui/locales/ka.toml
@@ -1085,6 +1085,7 @@ status = "draft — reviewed by a native speaker, awaiting a maintainer's approv
 "Reduce motion" = "მოძრაობის შემცირება"
 "Refraction" = "გარდატეხა"
 "Regular expression" = "რეგულარული გამოსახულება"
+"Relative to" = "მიმართ"
 "Remove" = "წაშლა"
 "Remove all" = "ყველას წაშლა"
 "Remove annotation" = "ანოტაციის წაშლა"
@@ -1444,6 +1445,7 @@ status = "draft — reviewed by a native speaker, awaiting a maintainer's approv
 "Triangle" = "სამკუთხედი"
 "Triangle arrow" = "სამკუთხა ისარი"
 "Trigger" = "გამშვები"
+"Trigger layer" = "გამშვები შრე"
 "True" = "ჭეშმარიტი"
 "Truncate text" = "ტექსტის შეკვეცა"
 "Truncate with an ellipsis" = "შეკვეცა მრავალწერტილით"
@@ -1541,6 +1543,7 @@ status = "draft — reviewed by a native speaker, awaiting a maintainer's approv
 "While pressing" = "დაჭერისას"
 "White" = "თეთრი"
 "Who runs it, its terms and how long it keeps files" = "ვინ მართავს, მისი პირობები და რამდენ ხანს ინახავს ფაილებს"
+"Whole screen" = "მთელი ეკრანი"
 "Why it changed" = "რატომ შეიცვალა"
 "Widget" = "ვიჯეტი"
 "Widgets" = "ვიჯეტები"
diff --git a/crates/ui-egui/locales/ko.toml b/crates/ui-egui/locales/ko.toml
index 053348f2..7e550039 100644
--- a/crates/ui-egui/locales/ko.toml
+++ b/crates/ui-egui/locales/ko.toml
@@ -1025,6 +1025,7 @@ status = "draft — needs native review"
 "Reduce motion" = "동작 줄이기"
 "Refraction" = "굴절"
 "Regular expression" = "정규식"
+"Relative to" = "기준"
 "Remove" = "제거"
 "Remove all" = "모두 제거"
 "Remove annotation" = "주석 제거"
@@ -1365,6 +1366,7 @@ status = "draft — needs native review"
 "Triangle" = "삼각형"
 "Triangle arrow" = "삼각 화살표"
 "Trigger" = "트리거"
+"Trigger layer" = "트리거 레이어"
 "True" = "참"
 "Truncate text" = "텍스트 자르기"
 "Truncate with an ellipsis" = "줄임표로 자르기"
@@ -1458,6 +1460,7 @@ status = "draft — needs native review"
 "While pressing" = "누르는 동안"
 "White" = "흰색"
 "Who runs it, its terms and how long it keeps files" = "운영자, 약관, 파일 보관 기간"
+"Whole screen" = "전체 화면"
 "Why it changed" = "변경 이유"
 "Widgets" = "위젯"
 "Width" = "너비"
diff --git a/crates/ui-egui/locales/nl.toml b/crates/ui-egui/locales/nl.toml
index bc4e0cfa..55c28339 100644
--- a/crates/ui-egui/locales/nl.toml
+++ b/crates/ui-egui/locales/nl.toml
@@ -1087,6 +1087,7 @@ status = "draft — needs native review"
 "Reduce motion" = "Beweging verminderen"
 "Refraction" = "Breking"
 "Regular expression" = "Reguliere expressie"
+"Relative to" = "Ten opzichte van"
 "Remove" = "Verwijderen"
 "Remove all" = "Alles verwijderen"
 "Remove annotation" = "Annotatie verwijderen"
@@ -1447,6 +1448,7 @@ status = "draft — needs native review"
 "Triangle" = "Driehoek"
 "Triangle arrow" = "Driehoekspijl"
 "Trigger" = "Trigger"
+"Trigger layer" = "Activerende laag"
 "True" = "Waar"
 "Truncate text" = "Tekst afkappen"
 "Truncate with an ellipsis" = "Afkappen met een beletselteken"
@@ -1544,6 +1546,7 @@ status = "draft — needs native review"
 "While pressing" = "Tijdens het indrukken"
 "White" = "Wit"
 "Who runs it, its terms and how long it keeps files" = "Wie het beheert, de voorwaarden en hoelang het bestanden bewaart"
+"Whole screen" = "Hele scherm"
 "Why it changed" = "Waarom het is veranderd"
 "Widget" = "Widget"
 "Widgets" = "Widgets"
diff --git a/crates/ui-egui/locales/pl.toml b/crates/ui-egui/locales/pl.toml
index 25f287f9..6c117f9d 100644
--- a/crates/ui-egui/locales/pl.toml
+++ b/crates/ui-egui/locales/pl.toml
@@ -1083,6 +1083,7 @@ status = "draft — needs native review"
 "Reduce motion" = "Ogranicz ruch"
 "Refraction" = "Załamanie światła (refrakcja)"
 "Regular expression" = "Wyrażenie regularne"
+"Relative to" = "Względem"
 "Remove" = "Usuń"
 "Remove all" = "Usuń wszystko"
 "Remove annotation" = "Usuń adnotację"
@@ -1442,6 +1443,7 @@ status = "draft — needs native review"
 "Triangle" = "Trójkąt"
 "Triangle arrow" = "Strzałka trójkątna"
 "Trigger" = "Wyzwalacz"
+"Trigger layer" = "Warstwa wyzwalająca"
 "True" = "Prawda"
 "Truncate text" = "Utnij tekst"
 "Truncate with an ellipsis" = "Utnij tekst z wielokropkiem (…)"
@@ -1539,6 +1541,7 @@ status = "draft — needs native review"
 "While pressing" = "Podczas naciskania"
 "White" = "Biały"
 "Who runs it, its terms and how long it keeps files" = "Kto zarządza serwerem, jego regulamin i czas przechowywania plików"
+"Whole screen" = "Cały ekran"
 "Why it changed" = "Dlaczego to się zmieniło"
 "Widget" = "Widżet"
 "Widgets" = "Widżety"
diff --git a/crates/ui-egui/locales/pt-BR.toml b/crates/ui-egui/locales/pt-BR.toml
index cb7b08b5..212a8406 100644
--- a/crates/ui-egui/locales/pt-BR.toml
+++ b/crates/ui-egui/locales/pt-BR.toml
@@ -1024,6 +1024,7 @@ status = "draft — needs native review"
 "Reduce motion" = "Reduzir movimento"
 "Refraction" = "Refração"
 "Regular expression" = "Expressão regular"
+"Relative to" = "Relativa a"
 "Remove" = "Remover"
 "Remove all" = "Remover tudo"
 "Remove annotation" = "Remover anotação"
@@ -1364,6 +1365,7 @@ status = "draft — needs native review"
 "Triangle" = "Triângulo"
 "Triangle arrow" = "Seta triangular"
 "Trigger" = "Gatilho"
+"Trigger layer" = "Camada que a abre"
 "True" = "Verdadeiro"
 "Truncate text" = "Truncar texto"
 "Truncate with an ellipsis" = "Truncar com reticências"
@@ -1457,6 +1459,7 @@ status = "draft — needs native review"
 "While pressing" = "Enquanto pressiona"
 "White" = "Branco"
 "Who runs it, its terms and how long it keeps files" = "Quem o mantém, os termos dele e por quanto tempo guarda os arquivos"
+"Whole screen" = "Tela inteira"
 "Why it changed" = "Por que mudou"
 "Widgets" = "Widgets"
 "Width" = "Largura"
diff --git a/crates/ui-egui/locales/ru.toml b/crates/ui-egui/locales/ru.toml
index ed1cc0eb..d2c3695e 100644
--- a/crates/ui-egui/locales/ru.toml
+++ b/crates/ui-egui/locales/ru.toml
@@ -1089,6 +1089,7 @@ name = "Русский"
 "Reduce motion" = "Уменьшить движение"
 "Refraction" = "Преломление"
 "Regular expression" = "Регулярное выражение"
+"Relative to" = "Относительно"
 "Relative to your system's display scaling (100% is the system's own size). Document zoom is separate." = "Относительно масштаба экрана в системе (100% — собственный размер системы). Масштаб документа задаётся отдельно."
 "Remove" = "Удалить"
 "Remove all" = "Удалить всё"
@@ -1456,6 +1457,7 @@ name = "Русский"
 "Triangle" = "Треугольник"
 "Triangle arrow" = "Треугольная стрелка"
 "Trigger" = "Триггер"
+"Trigger layer" = "Слой-триггер"
 "True" = "Истина"
 "Truncate text" = "Обрезать текст"
 "Truncate with an ellipsis" = "Обрезать с многоточием"
@@ -1554,6 +1556,7 @@ name = "Русский"
 "While pressing" = "При удержании"
 "White" = "Белый"
 "Who runs it, its terms and how long it keeps files" = "Оператор, условия и срок хранения файлов"
+"Whole screen" = "Весь экран"
 "Why it changed" = "Причина изменения"
 "Widget" = "Виджет"
 "Widgets" = "Виджеты"
diff --git a/crates/ui-egui/locales/sv.toml b/crates/ui-egui/locales/sv.toml
index bcb819e5..f9ba1ceb 100644
--- a/crates/ui-egui/locales/sv.toml
+++ b/crates/ui-egui/locales/sv.toml
@@ -7,6 +7,9 @@
 name = "Svenska"
 
 [ui]
+"Relative to" = "Relativt till"
+"Trigger layer" = "Utlösande lager"
+"Whole screen" = "Hela skärmen"
 
 "% of all commits" = "% av alla commits"
 "(no longer published)" = "(publiceras inte längre)"
diff --git a/crates/ui-egui/locales/tr.toml b/crates/ui-egui/locales/tr.toml
index 4275f06a..6b438e0d 100644
--- a/crates/ui-egui/locales/tr.toml
+++ b/crates/ui-egui/locales/tr.toml
@@ -1066,6 +1066,7 @@ name = "Türkçe"
 "Reduce motion" = "Hareketi azalt"
 "Refraction" = "Kırılma"
 "Regular expression" = "Düzenli ifade"
+"Relative to" = "Göre"
 "Remove" = "Kaldır"
 "Remove all" = "Tümünü kaldır"
 "Remove annotation" = "Ek açıklamayı kaldır"
@@ -1417,6 +1418,7 @@ name = "Türkçe"
 "Triangle" = "Üçgen"
 "Triangle arrow" = "Üçgen ok"
 "Trigger" = "Tetikleyici"
+"Trigger layer" = "Tetikleyici katman"
 "True" = "Doğru"
 "Truncate text" = "Metni kısalt"
 "Truncate with an ellipsis" = "Üç noktayla kısalt"
@@ -1510,6 +1512,7 @@ name = "Türkçe"
 "While pressing" = "Basılıyken"
 "White" = "Beyaz"
 "Who runs it, its terms and how long it keeps files" = "Kimin işlettiği, koşulları ve dosyaları ne kadar sakladığı"
+"Whole screen" = "Tüm ekran"
 "Why it changed" = "Neden değişti"
 "Widgets" = "Widget'lar"
 "Width" = "Genişlik"
diff --git a/crates/ui-egui/locales/zh-Hans.toml b/crates/ui-egui/locales/zh-Hans.toml
index da070c0e..db97da4d 100644
--- a/crates/ui-egui/locales/zh-Hans.toml
+++ b/crates/ui-egui/locales/zh-Hans.toml
@@ -1026,6 +1026,7 @@ status = "draft — needs native review"
 "Reduce motion" = "减少动态效果"
 "Refraction" = "折射"
 "Regular expression" = "正则表达式"
+"Relative to" = "相对于"
 "Remove" = "移除"
 "Remove all" = "全部移除"
 "Remove annotation" = "移除标注"
@@ -1366,6 +1367,7 @@ status = "draft — needs native review"
 "Triangle" = "三角形"
 "Triangle arrow" = "三角箭头"
 "Trigger" = "触发器"
+"Trigger layer" = "触发图层"
 "True" = "真"
 "Truncate text" = "截断文本"
 "Truncate with an ellipsis" = "以省略号截断"
@@ -1459,6 +1461,7 @@ status = "draft — needs native review"
 "While pressing" = "按住时"
 "White" = "白"
 "Who runs it, its terms and how long it keeps files" = "谁在运营、其条款以及文件保留多久"
+"Whole screen" = "整个屏幕"
 "Why it changed" = "更改原因"
 "Widgets" = "小组件"
 "Width" = "宽度"
diff --git a/crates/ui-egui/src/present.rs b/crates/ui-egui/src/present.rs
index fae1e1a7..1b483a2c 100644
--- a/crates/ui-egui/src/present.rs
+++ b/crates/ui-egui/src/present.rs
@@ -26,7 +26,8 @@ use std::sync::Arc;
 use egui::{Align2, Color32, CornerRadius, Id, Pos2, Rect, Sense, Stroke, StrokeKind, Ui, Vec2, pos2, vec2};
 use figcraft_color::{Color, Paint, PaintKind};
 use figcraft_doc::proto::{
-    Action, Device, DeviceColor, Direction, Easing, KeyMods, Overflow, OverlayPosition, PrototypeSettings, ScrollPosition, Transition, Trigger,
+    Action, Device, DeviceColor, Direction, Easing, KeyMods, Overflow, OverlayAnchor, OverlayPosition, PrototypeSettings, ScrollPosition, Transition,
+    Trigger,
 };
 use figcraft_doc::{Document, HConstraint, Node, NodeId, NodeKind, VConstraint};
 use figcraft_geom::{Affine, Point};
@@ -70,6 +71,7 @@ pub struct OverlayState {
     pub anchor: Option<Rect>,
     /// Manual position: the overlay's top-left from the anchor's (page units).
     pub offset: Option<[f64; 2]>,
+    pub anchor_to: OverlayAnchor,
     opened: f64,
     transition: Transition,
     dur: f64,
@@ -830,7 +832,7 @@ impl Presenter {
                 }
                 true
             }
-            Action::OpenOverlay { dest, position, close_on_outside, background, offset } => {
+            Action::OpenOverlay { dest, position, close_on_outside, background, offset, anchor } => {
                 if !doc.contains(*dest) {
                     return false;
                 }
@@ -842,6 +844,7 @@ impl Presenter {
                     background: *background,
                     anchor: rect,
                     offset: *offset,
+                    anchor_to: *anchor,
                     opened: now,
                     transition: tr,
                     dur,
@@ -870,6 +873,7 @@ impl Presenter {
                         background: None,
                         anchor: rect,
                         offset: None,
+                        anchor_to: OverlayAnchor::Screen,
                         opened: now,
                         transition: tr,
                         dur,
@@ -1466,6 +1470,23 @@ pub fn overlay_rect(pos: OverlayPosition, base: Rect, size: Vec2, anchor: Option
     Rect::from_min_size(pos2(x, y), size)
 }
 
+/// If no layer on the screen opened the overlay, the screen places it.
+pub fn anchored_overlay_rect(
+    pos: OverlayPosition,
+    anchor_to: OverlayAnchor,
+    base: Rect,
+    size: Vec2,
+    anchor: Option<Rect>,
+    offset: Option<Vec2>,
+) -> Rect {
+    let on_trigger =
+        anchor.and_then(|a| anchor_to.offset(pos, [f64::from(a.width()), f64::from(a.height())], [f64::from(size.x), f64::from(size.y)]));
+    match on_trigger {
+        Some([x, y]) => overlay_rect(OverlayPosition::Manual, base, size, anchor, Some(vec2(x as f32, y as f32))),
+        None => overlay_rect(pos, base, size, anchor, offset),
+    }
+}
+
 /// The hotspots of the screen `root` (its visible layers with interactions, bottom-most first)
 /// placed on screen and clipped by `screen`.
 fn hotspots(doc: &Document, root: NodeId, place: &Place, screen: Rect) -> Vec<(NodeId, Rect)> {
@@ -1626,7 +1647,7 @@ fn layout(p: &mut Presenter, area: Rect, chrome: Chrome) -> Option<Layout> {
         let ob = disp.world_bounds(o.id)?;
         let size = vec2((ob.width() * scale) as f32, (ob.height() * scale) as f32);
         let offset = o.offset.map(|[x, y]| vec2((x * scale) as f32, (y * scale) as f32));
-        let r = overlay_rect(o.position, screen, size, o.anchor, offset);
+        let r = anchored_overlay_rect(o.position, o.anchor_to, screen, size, o.anchor, offset);
         Some((o.id, Place { page_min: (ob.x0, ob.y0), origin: r.min, scale }, r))
     };
     let overlays = p.overlays.iter().filter_map(place_overlay).collect();
@@ -2877,6 +2898,10 @@ mod tail_tests;
 #[path = "present_delay_tests.rs"]
 mod delay_tests;
 
+#[cfg(test)]
+#[path = "present_overlay_anchor_tests.rs"]
+mod overlay_anchor_tests;
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -3020,6 +3045,7 @@ mod tests {
             background: None,
             anchor: None,
             offset: None,
+            anchor_to: OverlayAnchor::Screen,
             opened,
             transition,
             dur: 0.3,
diff --git a/crates/ui-egui/src/present_behaviour_tests.rs b/crates/ui-egui/src/present_behaviour_tests.rs
index e9a036f2..f5417311 100644
--- a/crates/ui-egui/src/present_behaviour_tests.rs
+++ b/crates/ui-egui/src/present_behaviour_tests.rs
@@ -218,7 +218,7 @@ fn act(p: &mut Presenter, a: Action, now: f64) -> bool {
 }
 
 fn open(dest: NodeId, close_on_outside: bool) -> Action {
-    Action::OpenOverlay { dest, position: OverlayPosition::Center, close_on_outside, background: None, offset: None }
+    Action::OpenOverlay { dest, position: OverlayPosition::Center, close_on_outside, background: None, offset: None, anchor: Default::default() }
 }
 
 /// Screens A and B and three overlay frames M1, M2, M3 (all top-level).
diff --git a/crates/ui-egui/src/present_overlay_anchor_tests.rs b/crates/ui-egui/src/present_overlay_anchor_tests.rs
new file mode 100644
index 00000000..1cb3e310
--- /dev/null
+++ b/crates/ui-egui/src/present_overlay_anchor_tests.rs
@@ -0,0 +1,75 @@
+use egui::{Event, Modifiers, PointerButton, Pos2, Rect, pos2, vec2};
+use figcraft_doc::NodeId;
+use figcraft_doc::proto::{OverlayAnchor, OverlayPosition};
+use figcraft_engine::Session;
+use serde_json::{Value, json};
+
+use super::anchored_overlay_rect;
+use crate::present_tests::{Ui as Harness, id};
+
+fn ex(s: &mut Session, cmd: &str, p: Value) -> Value {
+    s.execute(cmd, &p).unwrap_or_else(|e| panic!("{cmd} {p}: {e}"))
+}
+
+fn frame(s: &mut Session, name: &str, x: f64, w: f64, h: f64) -> NodeId {
+    id(&ex(s, "frame.create", json!({"x": x, "y": 0, "width": w, "height": h, "name": name})))
+}
+
+fn rect(s: &mut Session, parent: NodeId, [x, y, w, h]: [f64; 4]) -> NodeId {
+    id(&ex(s, "shape.rectangle", json!({"x": x, "y": y, "width": w, "height": h, "parent": parent})))
+}
+
+fn hotspot(u: &Harness, layer: NodeId) -> Rect {
+    let hot = u.app.inspect()["presenter"]["hotspots"].as_array().cloned().unwrap_or_default();
+    let h = hot.iter().find(|h| h["id"] == json!(layer)).unwrap_or_else(|| panic!("no hotspot on {layer}: {hot:?}"));
+    let r: Vec<f32> = h["rect"].as_array().unwrap().iter().map(|v| v.as_f64().unwrap() as f32).collect();
+    Rect::from_min_max(pos2(r[0], r[1]), pos2(r[2], r[3]))
+}
+
+fn button(at: Pos2, pressed: bool) -> Event {
+    Event::PointerButton { pos: at, button: PointerButton::Primary, pressed, modifiers: Modifiers::NONE }
+}
+
+#[test]
+fn presets_sit_on_the_trigger_or_on_the_screen() {
+    let base = Rect::from_min_size(pos2(0.0, 0.0), vec2(400.0, 800.0));
+    let size = vec2(60.0, 200.0);
+    let trigger = Rect::from_min_size(pos2(30.0, 100.0), vec2(100.0, 40.0));
+    let at = |p, a, t| anchored_overlay_rect(p, a, base, size, t, None).min;
+    use OverlayAnchor::*;
+    use OverlayPosition as P;
+    for (p, a, want, why) in [
+        (P::BottomLeft, TriggerOutside, pos2(30.0, 140.0), "below the trigger, left edges lined up"),
+        (P::BottomRight, TriggerOutside, pos2(70.0, 140.0), "below, right edges: 30 + 100 - 60"),
+        (P::TopCenter, TriggerOutside, pos2(50.0, -100.0), "above, centred: 30 + 20, 100 - 200"),
+        (P::TopLeft, TriggerInside, pos2(30.0, 100.0), "on the trigger's top-left"),
+        (P::Center, TriggerInside, pos2(50.0, 20.0), "centred on the trigger"),
+        (P::BottomLeft, Screen, pos2(0.0, 600.0), "the screen's bottom left, as before"),
+    ] {
+        assert_eq!(at(p, a, Some(trigger)), want, "{p:?} {a:?}: {why}");
+    }
+    assert_eq!(at(P::BottomLeft, TriggerOutside, None), pos2(0.0, 600.0), "opened by nothing on screen: the screen's preset");
+}
+
+#[test]
+fn a_dropdown_opens_right_under_its_button() {
+    let mut s = Session::new();
+    let a = frame(&mut s, "A", 0.0, 300.0, 400.0);
+    let menu = frame(&mut s, "Menu", 400.0, 120.0, 80.0);
+    let hot = rect(&mut s, a, [50.0, 50.0, 100.0, 30.0]);
+    let item = rect(&mut s, menu, [0.0, 0.0, 120.0, 20.0]);
+    let open = json!({"type": "openOverlay", "dest": menu, "position": "bottomLeft", "anchor": "triggerOutside"});
+    ex(&mut s, "proto.interaction.add", json!({"id": hot, "action": open, "transition": {"type": "instant"}}));
+    ex(&mut s, "proto.interaction.add", json!({"id": item, "action": {"type": "closeOverlay"}, "transition": {"type": "instant"}}));
+    let mut u = Harness::new(s);
+    u.run("proto.present", json!({"start": a}));
+    u.frames(2, Vec::new);
+    let h = hotspot(&u, hot);
+    u.frame(vec![Event::PointerMoved(h.center())]);
+    u.frame(vec![button(h.center(), true)]);
+    u.frame(vec![button(h.center(), false)]);
+    u.frames(2, Vec::new);
+    let got = hotspot(&u, item).min;
+    let want = pos2(h.min.x, h.max.y);
+    assert!((got - want).length() < 0.01, "{got:?} vs {want:?}");
+}
diff --git a/crates/ui-egui/src/proto_panel.rs b/crates/ui-egui/src/proto_panel.rs
index 747dbaf6..8ee1285e 100644
--- a/crates/ui-egui/src/proto_panel.rs
+++ b/crates/ui-egui/src/proto_panel.rs
@@ -5,8 +5,8 @@
 use egui::{Align2, Color32, CornerRadius, Id, Pos2, Rect, Sense, Shape, Stroke, StrokeKind, Ui, pos2, vec2};
 use figcraft_color::Paint;
 use figcraft_doc::proto::{
-    Action, ConditionalBlock, Direction, Easing, GAMEPAD_BUTTONS, Interaction, KeyMods, Overflow, OverlayPosition, ScrollPosition, Transition,
-    Trigger, is_gamepad_button,
+    Action, ConditionalBlock, Direction, Easing, GAMEPAD_BUTTONS, Interaction, KeyMods, Overflow, OverlayAnchor, OverlayPosition, ScrollPosition,
+    Transition, Trigger, is_gamepad_button,
 };
 use figcraft_doc::*;
 use serde_json::{Value, json};
@@ -252,9 +252,14 @@ pub(crate) fn action_of(label: &str, doc: &Document, page: NodeId, node: NodeId,
             Action::ScrollTo { dest, offset: [0.0, 0.0] }
         }
         "Open link" => Action::OpenUrl { url: String::new() },
-        "Open overlay" => {
-            Action::OpenOverlay { dest: frame_dest?, position: OverlayPosition::Center, close_on_outside: true, background: None, offset: None }
-        }
+        "Open overlay" => Action::OpenOverlay {
+            dest: frame_dest?,
+            position: OverlayPosition::Center,
+            close_on_outside: true,
+            background: None,
+            offset: None,
+            anchor: OverlayAnchor::Screen,
+        },
         "Swap overlay" => Action::SwapOverlay { dest: frame_dest? },
         "Close overlay" => Action::CloseOverlay,
         "Set variable" => {
@@ -904,9 +909,9 @@ pub(crate) fn action_fields(app: &mut FigApp, ui: &mut Ui, doc: &Document, page:
                 }
             });
         }
-        Action::OpenOverlay { dest, position, close_on_outside, background, offset } => {
-            let (dest, position, close_on_outside, background, offset) = (*dest, *position, *close_on_outside, *background, *offset);
-            let mk = move |d: NodeId| Action::OpenOverlay { dest: d, position, close_on_outside, background, offset };
+        Action::OpenOverlay { dest, position, close_on_outside, background, offset, anchor } => {
+            let (dest, position, close_on_outside, background, offset, anchor) = (*dest, *position, *close_on_outside, *background, *offset, *anchor);
+            let mk = move |d: NodeId| Action::OpenOverlay { dest: d, position, close_on_outside, background, offset, anchor };
             dest_dropdown(app, ui, doc, &frames, Some(dest), tr("Overlay"), mk, slot);
             widgets::sublabels(ui, tr("Overlay position"), None);
             row(ui, 32.0, |ui| {
@@ -914,12 +919,33 @@ pub(crate) fn action_fields(app: &mut FigApp, ui: &mut Ui, doc: &Document, page:
                 menu_popup(&resp).show(|ui| {
                     for p in OverlayPosition::ALL {
                         if menu_item(ui, tr(p.label()), "") {
-                            set_action(app, slot, Action::OpenOverlay { dest, position: p, close_on_outside, background, offset });
+                            set_action(app, slot, Action::OpenOverlay { dest, position: p, close_on_outside, background, offset, anchor });
                             ui.close();
                         }
                     }
                 });
             });
+            if position != OverlayPosition::Manual {
+                widgets::sublabels(ui, tr("Relative to"), None);
+                row(ui, 32.0, |ui| {
+                    let on_trigger = !anchor.is_screen();
+                    let opts = [tr("Whole screen"), tr("Trigger layer")];
+                    if let Some(i) = widgets::segmented_text(ui, &opts, usize::from(on_trigger)) {
+                        let anchor = if i == 0 { OverlayAnchor::Screen } else { OverlayAnchor::TriggerOutside };
+                        set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background, offset, anchor });
+                    }
+                });
+                if !anchor.is_screen() {
+                    row(ui, 32.0, |ui| {
+                        let opts = [tr("Inside"), tr("Outside")];
+                        let at = usize::from(anchor == OverlayAnchor::TriggerOutside);
+                        if let Some(i) = widgets::segmented_text(ui, &opts, at) {
+                            let anchor = if i == 0 { OverlayAnchor::TriggerInside } else { OverlayAnchor::TriggerOutside };
+                            set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background, offset, anchor });
+                        }
+                    });
+                }
+            }
             if position == OverlayPosition::Manual {
                 // From the top-left of the layer that opens it; empty: right below that layer.
                 row(ui, 32.0, |ui| {
@@ -949,20 +975,20 @@ pub(crate) fn action_fields(app: &mut FigApp, ui: &mut Ui, doc: &Document, page:
                             if let Some(slot_v) = o.get_mut(i) {
                                 *slot_v = v.clamp(-100_000.0, 100_000.0).round();
                             }
-                            set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background, offset: Some(o) });
+                            set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background, offset: Some(o), anchor });
                         }
                     }
                 });
             }
             row(ui, 28.0, |ui| {
                 if widgets::checkbox(ui, close_on_outside, tr("Close when clicking outside")) {
-                    set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside: !close_on_outside, background, offset });
+                    set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside: !close_on_outside, background, offset, anchor });
                 }
             });
             row(ui, 28.0, |ui| {
                 if widgets::checkbox(ui, background.is_some(), tr("Add background behind overlay")) {
                     let bg = if background.is_some() { None } else { Some(figcraft_color::Color::new(0.0, 0.0, 0.0, 0.25)) };
-                    set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background: bg, offset });
+                    set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background: bg, offset, anchor });
                 }
             });
             if let Some(bg) = background {
@@ -971,7 +997,7 @@ pub(crate) fn action_fields(app: &mut FigApp, ui: &mut Ui, doc: &Document, page:
                     if let Some(h) = widgets::text_field(ui, slot.id("proto_ovbg"), &bg.to_hex(), 96.0, "")
                         && let Some(c) = figcraft_color::Color::from_hex_or_name(&h)
                     {
-                        set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background: Some(c), offset });
+                        set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background: Some(c), offset, anchor });
                     }
                     let alpha = (bg.a * 100.0).round();
                     if let Some(FieldEdit::Set(v) | FieldEdit::Scrub(v, true)) =
@@ -979,7 +1005,11 @@ pub(crate) fn action_fields(app: &mut FigApp, ui: &mut Ui, doc: &Document, page:
                         && v.is_finite()
                     {
                         let a = v.clamp(0.0, 100.0) as f32 / 100.0;
-                        set_action(app, slot, Action::OpenOverlay { dest, position, close_on_outside, background: Some(bg.with_alpha(a)), offset });
+                        set_action(
+                            app,
+                            slot,
+                            Action::OpenOverlay { dest, position, close_on_outside, background: Some(bg.with_alpha(a)), offset, anchor },
+                        );
                     }
                 });
             }
diff --git a/docs/mcp.md b/docs/mcp.md
index 8361286d..f5488d79 100644
--- a/docs/mcp.md
+++ b/docs/mcp.md
@@ -640,7 +640,11 @@ the scroll position with `preserveScroll: true`; `{type: "scrollTo", dest, offse
 the layer that far from the top-left of the innermost frame scrolling it, e.g. below a fixed
 header; `delayMs` makes a mouse enter, leave, down or up trigger wait before it acts;
 `{type: "openOverlay", dest, position: "manual", offset?: [x, y]}` puts the overlay that far from
-the top-left of the layer that opens it, and right below that layer without an offset). A key trigger takes a key or a combination (`{type: "keyPress", key: "Shift+K"}`; Ctrl,
+the top-left of the layer that opens it, and right below that layer without an offset;
+`anchor: "triggerInside" | "triggerOutside"` measures any other position on the layer that opens
+the overlay instead of the screen, so `{position: "bottomLeft", anchor: "triggerOutside"}` opens a
+dropdown right under its button, left edges lined up; Figma has no such setting, and `.fig` export
+writes it as a manual offset). A key trigger takes a key or a combination (`{type: "keyPress", key: "Shift+K"}`; Ctrl,
 Alt, Shift and Cmd, all held and no others) or a controller button (`key: "Gamepad A"`; `Gamepad`
 followed by `A`, `B`, `X`, `Y`, `LB`, `RB`, `LT`, `RT`, `View`, `Menu`, `LS`, `RS`, `Up`, `Down`,
 `Left`, `Right` or `Home`: the standard layout, face buttons by position), which the player reads
diff --git a/docs/prototyping-parity.md b/docs/prototyping-parity.md
index 2ded779d..39501a76 100644
--- a/docs/prototyping-parity.md
+++ b/docs/prototyping-parity.md
@@ -1,6 +1,6 @@
 # Prototyping parity
 
-> **Last reviewed:** 2026-10-11 · **Last updated:** 2026-10-23 · **Change:** patch (top-level frames bigger than the device's screen scroll in the player; Change to, set variable and set variable mode lay out what they change in the player, as the canvas does; presentation tabs, one per page of a file; a Present tab with device and scale controls (#537); core editor leftovers: delays on mouse triggers and manual overlay offsets; controller buttons on key/gamepad triggers, widgets that react in prototypes, `proto.evaluate` and the mode lookup rules pinned) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-11 · **Last updated:** 2026-10-23 · **Change:** patch (top-level frames bigger than the device's screen scroll in the player; Change to, set variable and set variable mode lay out what they change in the player, as the canvas does; presentation tabs, one per page of a file; overlay positions relative to the layer that opens them; a Present tab with device and scale controls (#537); core editor leftovers: delays on mouse triggers and manual overlay offsets; controller buttons on key/gamepad triggers, widgets that react in prototypes, `proto.evaluate` and the mode lookup rules pinned) · **Target:** Figma Design (desktop app 126.10.7)
 
 **Breadth ~92%, ready ~74% (estimated).** Every Figma trigger except media, every action except
 media control, every transition and easing exist; key/gamepad triggers take controller buttons,
@@ -51,6 +51,7 @@ case pins the current behaviour).
 | Open overlay: positions, background dimming, close on a click outside (on by default, can be turned off) | pass | `a_click_outside_an_overlay_closes_it_unless_turned_off`, `overlay_positions` |
 | Overlays stack; swap overlay replaces the top one; close overlay closes it | pass | `overlays_stack_swap_close_and_go_with_navigation` |
 | Manual overlay position relative to the hotspot | **added** | `offset: [x, y]` on the action, from the top-left of the layer that opens it (X / Y fields in the interaction editor; without one, below that layer); `present_delay_tests` |
+| Overlay position presets relative to the layer that opens it, inside or outside (not in Figma: [forum request](https://forum.figma.com/suggest-a-feature-11/set-overlay-position-relative-to-element-not-to-page-35366)) | **added** | `anchor: triggerInside \| triggerOutside` on the open overlay action; Relative to (Whole screen / Trigger layer) and Inside / Outside in the interaction editor. Outside: top presets above the layer, bottom presets below it, edges lined up (a dropdown is Bottom left + Outside); Center centres it on the layer. No flipping at the screen edge. `.fig` export writes a manual offset; `proto_overlay_anchor_tests`, `present_overlay_anchor_tests`, MCP `overlay_anchor` |
 | Delay on mouse enter / leave / down / up | **added** | `delayMs` on the interaction, a Delay field in the editor; fires once after the delay while its screen or overlay still shows (a pointer that leaves early: silent, it still fires); `mouse_triggers_wait_out_their_delay` |
 | Open link | pass | always a new tab or browser window (opening in place would leave the prototype) |
 | Change to: another variant of the instance, in place, with the interaction's animation | pass | `interactive_components_change_in_place` |
@@ -106,6 +107,7 @@ case pins the current behaviour).
 | 2026-10-23 | patch | A top-level frame taller (or wider) than the device's screen scrolls with no overflow setting, as Figma's documentation says; before, "No scrolling" frames such as the landing page template's Phone frame only clipped. Content past a frame's own edges still scrolls only as its overflow allows. Checked in the app on macOS. Numbers unchanged |
 | 2026-10-22 | minor | Change to, set variable and set variable mode lay out what they change in the player as the canvas does: text sizes to what it shows and hugging frames follow (an instance with a longer label changed to the main's width; a bound text kept its old size). Two player tests. Breadth and ready unchanged. |
 | 2026-10-17 | minor | Presentation tabs: one per page of a file instead of a single "Present" tab, named "file - page" (renames follow); Play shows a page's tab as it was; tabs outlive their file and come back when a saved file opens again. Numbers unchanged. |
+| 2026-10-17 | minor | Overlay positions relative to the layer that opens them (M5, beyond Figma, from a long-standing forum request): `anchor: triggerInside \| triggerOutside` on the open overlay action measures the position preset on the trigger instead of the screen (outside: top presets above it, bottom presets below it, edges lined up; Center centres it on the trigger). Relative to and Inside / Outside controls in the interaction editor, the player, MCP and `.fig` export (as a manual offset). Numbers unchanged. |
 | 2026-10-17 | minor | Community batch #753: a Present tab (#537): playback in its own tab that keeps its screen and history, a current-frame thumbnail, previous / next, device presets and scale; the frame reflows to the device's screen on the prototype's copy; phone and tablet content drags inside a fixed device as its overflow allows ("No scrolling" frames clip; iPad mini, MacBook Air and Desktop keep their bodies); the unsaved-changes question shows above the presentation. Checked in the app on Windows. Percentages and hours unchanged |
 | 2026-10-13 | minor | Prototyping, delays on mouse triggers and manual overlay offsets (M5): mouse enter, leave, down and up wait `delayMs` before their actions run (once while waiting; dropped when the screen or overlay they were on goes away; a pointer that leaves early doesn't cancel, the documentation is silent), and a manual overlay sits at `offset: [x, y]` from the top-left of the layer that opens it (without one, right below it, as before). Delay and X/Y fields in the interaction editor, the player on its own clock, REST import (`delay`, `overlayRelativePosition`), `.fig` import and export (the export's field for mouse delays is unchecked against other software). Numbers unchanged. |
 | 2026-10-12 | minor | Controller buttons on key/gamepad triggers (Controller menu, player polling on Windows and in the browser, REST import instead of skipping, control channel injection), widgets reacting to clicks in presented prototypes on the prototype's own copy, `proto.evaluate`; the mode lookup and set-variable-mode rules written as cases (they already held). Breadth 90% → 92%, ready unchanged at 74% (controllers on Windows and the browser only; no real prototype QA yet), 3–6 h → 2–5 h |

From 76804506dc83a2821153953ccff390b6bd7dd451 Mon Sep 17 00:00:00 2001
From: JimKnoxx <jimknoxx@knoxx.media>
Date: Sun, 18 Oct 2026 10:52:57 +0200
Subject: [PATCH 29/59] M5: an open overlay follows the layer that opened it
 when the view changes

Review follow-up. The overlay kept the screen rect its trigger had when it
opened, so after a resize, a size option change or a pan a trigger-relative
(or manual) overlay stayed where the trigger used to be. It now keeps that
rect in page units of the presented frame and places it again on every
layout. The dropdown test switches to Fill while the menu is open. The
anchor's is_screen gets a doc comment.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 crates/doc/src/proto.rs                       |  1 +
 crates/ui-egui/src/present.rs                 | 20 ++++++++++++++-----
 .../src/present_overlay_anchor_tests.rs       | 18 ++++++++++++++---
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/crates/doc/src/proto.rs b/crates/doc/src/proto.rs
index d3830bfb..b4808011 100644
--- a/crates/doc/src/proto.rs
+++ b/crates/doc/src/proto.rs
@@ -517,6 +517,7 @@ pub enum OverlayAnchor {
 }
 
 impl OverlayAnchor {
+    /// The default (the screen places the overlay), which files and JSON leave out.
     pub fn is_screen(&self) -> bool {
         *self == OverlayAnchor::Screen
     }
diff --git a/crates/ui-egui/src/present.rs b/crates/ui-egui/src/present.rs
index 1b483a2c..13f4c53b 100644
--- a/crates/ui-egui/src/present.rs
+++ b/crates/ui-egui/src/present.rs
@@ -67,8 +67,9 @@ pub struct OverlayState {
     pub position: OverlayPosition,
     pub close_on_outside: bool,
     pub background: Option<Color>,
-    /// Screen rect of the layer that opened it (manual position).
-    pub anchor: Option<Rect>,
+    /// The layer that opened it, in page units of the presented frame (so it follows the frame
+    /// when the window resizes or the view pans).
+    pub anchor: Option<figcraft_geom::Rect>,
     /// Manual position: the overlay's top-left from the anchor's (page units).
     pub offset: Option<[f64; 2]>,
     pub anchor_to: OverlayAnchor,
@@ -790,6 +791,13 @@ impl Presenter {
         error
     }
 
+    /// Screen rect `r` in page units of the frame shown last.
+    fn page_rect(&self, r: Option<Rect>) -> Option<figcraft_geom::Rect> {
+        let (r, (_, place, _)) = (r?, self.shown?);
+        let (a, b) = (place.page(r.min), place.page(r.max));
+        Some(figcraft_geom::Rect::new(a.x, a.y, b.x, b.y))
+    }
+
     fn perform(&mut self, a: &Action, node: NodeId, tr: Transition, dur: f64, easing: Easing, rect: Option<Rect>, now: f64) -> bool {
         self.perform_at(a, node, tr, dur, easing, rect, now, 0)
     }
@@ -833,6 +841,7 @@ impl Presenter {
                 true
             }
             Action::OpenOverlay { dest, position, close_on_outside, background, offset, anchor } => {
+                let at = self.page_rect(rect);
                 if !doc.contains(*dest) {
                     return false;
                 }
@@ -842,7 +851,7 @@ impl Presenter {
                     position: *position,
                     close_on_outside: *close_on_outside,
                     background: *background,
-                    anchor: rect,
+                    anchor: at,
                     offset: *offset,
                     anchor_to: *anchor,
                     opened: now,
@@ -854,6 +863,7 @@ impl Presenter {
                 true
             }
             Action::SwapOverlay { dest } => {
+                let at = self.page_rect(rect);
                 if !doc.contains(*dest) {
                     return false;
                 }
@@ -871,7 +881,7 @@ impl Presenter {
                         position: OverlayPosition::Center,
                         close_on_outside: true,
                         background: None,
-                        anchor: rect,
+                        anchor: at,
                         offset: None,
                         anchor_to: OverlayAnchor::Screen,
                         opened: now,
@@ -1647,7 +1657,7 @@ fn layout(p: &mut Presenter, area: Rect, chrome: Chrome) -> Option<Layout> {
         let ob = disp.world_bounds(o.id)?;
         let size = vec2((ob.width() * scale) as f32, (ob.height() * scale) as f32);
         let offset = o.offset.map(|[x, y]| vec2((x * scale) as f32, (y * scale) as f32));
-        let r = anchored_overlay_rect(o.position, o.anchor_to, screen, size, o.anchor, offset);
+        let r = anchored_overlay_rect(o.position, o.anchor_to, screen, size, o.anchor.map(|a| place.rect(a)), offset);
         Some((o.id, Place { page_min: (ob.x0, ob.y0), origin: r.min, scale }, r))
     };
     let overlays = p.overlays.iter().filter_map(place_overlay).collect();
diff --git a/crates/ui-egui/src/present_overlay_anchor_tests.rs b/crates/ui-egui/src/present_overlay_anchor_tests.rs
index 1cb3e310..16d16b2d 100644
--- a/crates/ui-egui/src/present_overlay_anchor_tests.rs
+++ b/crates/ui-egui/src/present_overlay_anchor_tests.rs
@@ -64,12 +64,24 @@ fn a_dropdown_opens_right_under_its_button() {
     let mut u = Harness::new(s);
     u.run("proto.present", json!({"start": a}));
     u.frames(2, Vec::new);
+    let scale = |u: &mut Harness, scale: &str| {
+        u.run("proto.presentOptions", json!({"scale": scale}));
+        u.frames(2, Vec::new);
+    };
+    scale(&mut u, "fill");
+    let filled = hotspot(&u, hot);
+    scale(&mut u, "fit");
     let h = hotspot(&u, hot);
+    assert_ne!(filled, h, "fill shows the frame at another size");
     u.frame(vec![Event::PointerMoved(h.center())]);
     u.frame(vec![button(h.center(), true)]);
     u.frame(vec![button(h.center(), false)]);
     u.frames(2, Vec::new);
-    let got = hotspot(&u, item).min;
-    let want = pos2(h.min.x, h.max.y);
-    assert!((got - want).length() < 0.01, "{got:?} vs {want:?}");
+    let under = |u: &Harness, b: Rect| {
+        let (got, want) = (hotspot(u, item).min, pos2(b.min.x, b.max.y));
+        assert!((got - want).length() < 0.01, "{got:?} vs {want:?}");
+    };
+    under(&u, h);
+    scale(&mut u, "fill");
+    under(&u, filled);
 }

From aba296c6b88ecf1e8bb21ca7edd20dd96466f9e5 Mon Sep 17 00:00:00 2001
From: lileeei <lileiwell1993@163.com>
Date: Mon, 26 Oct 2026 12:23:06 +0800
Subject: [PATCH 30/59] M6: transliterate non-ASCII layer names into
 code-export class names (#1235)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

class_name runs layer names through deunicode (new dependency: pure Rust
tables, zero deps, BSD-3-Clause, the slug crate's base) before its ASCII
filter, so Korean, Cyrillic, Latin-diacritic and CJK names become
readable ASCII classes in HTML/CSS/React/Leptos output, component roots
and data-* variant attributes: 로그인 화면 → rogeuin-hwamyeon, кнопка →
knopka, über → uber, 按钮 → an-niu (before, every one came out layer-,
layer--2, ...). Symbols-only names take the node's kind (.text, .frame)
instead of layer-, the 40-character cut lands on a word boundary, and a
leading digit keeps the layer- prefix. SwiftUI/Compose type names are
unchanged (their own sanitizer); ASCII-only names are byte-identical.
html_codegen_tests updated and extended.
---
 Cargo.lock                              |  7 ++++
 Cargo.toml                              |  3 ++
 ROADMAP.md                              |  4 +-
 crates/engine/Cargo.toml                |  1 +
 crates/engine/src/codegen.rs            | 54 ++++++++++++++++++++++---
 crates/engine/src/component_codegen.rs  |  4 +-
 crates/engine/src/html_codegen_tests.rs | 48 +++++++++++++++++++++-
 docs/dev-mode-parity.md                 |  5 ++-
 8 files changed, 114 insertions(+), 12 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index b8c6127b..219dc9bf 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1043,6 +1043,12 @@ dependencies = [
  "syn 3.0.9",
 ]
 
+[[package]]
+name = "deunicode"
+version = "1.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "abd57806937c9cc163efc8ea3910e00a62e2aeb0b8119f1793a978088f8f6b04"
+
 [[package]]
 name = "digest"
 version = "0.10.7"
@@ -1569,6 +1575,7 @@ version = "0.11.1"
 dependencies = [
  "base64 0.22.1",
  "craft-docpath",
+ "deunicode",
  "figcraft-collab",
  "figcraft-color",
  "figcraft-doc",
diff --git a/Cargo.toml b/Cargo.toml
index 9403f16b..91b7ffb0 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -63,6 +63,9 @@ skrifa = "0.47"
 harfrust = "0.13"
 unicode-bidi = "0.3"
 unicode-segmentation = "1.13"
+# Code export: layer names transliterated into ASCII identifiers (pure Rust data tables, zero
+# dependencies, BSD-3-Clause, no_std so the web build keeps it too).
+deunicode = "1.6"
 linesweeper = "0.4"
 zip = { version = "2", default-features = false, features = ["deflate"] }
 # `.fig` import: raw deflate chunks (already built for zip) and zstd chunks (pure Rust, MIT, wasm-safe).
diff --git a/ROADMAP.md b/ROADMAP.md
index 69d3bf73..a90376b3 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -2,7 +2,7 @@
 
 **Stage: alpha** · next: beta, ~26 points and ~162–292 h away (one Opus 5.5 agent; ~33–67 h wall-clock with 5 agents)
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-24 · **Change:** minor (Dev Mode measurements kept on the canvas and a read-only layers panel; Dev Mode measurements kept on the canvas and a read-only layers panel; boards: a board area row and progress entry; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (non-ASCII layer names transliterate in code export (#1235); Dev Mode measurements kept on the canvas and a read-only layers panel; Dev Mode measurements kept on the canvas and a read-only layers panel; boards: a board area row and progress entry; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
 
 FigCraft is a clean-room, open-source, pure-Rust reimplementation of the Figma design workflow,
 native on macOS, Windows, Linux and FreeBSD and in the browser, fully drivable by agents through
@@ -132,6 +132,7 @@ Ranked; detail and milestones in [`docs/roadmap.md`](docs/roadmap.md).
 
 ## Progress log
 
+- **2026-10-26** · Non-ASCII layer names transliterate in code export (M6, #1235): `class_name` runs the name through `deunicode` before its ASCII filter, so 로그인 화면 → `rogeuin-hwamyeon`, кнопка → `knopka`, über → `uber` in the HTML/CSS/React/Leptos class names, component roots and `data-*` variant attributes (SwiftUI/Compose type names unchanged); a name left with nothing (symbols only) takes the node's kind (`.text`, `.frame`) instead of `layer-`, and the 40-character cut lands on a word boundary. New dependency: deunicode (pure Rust tables, zero deps, BSD-3-Clause, the `slug` crate's base). `html_codegen_tests`. Numbers unchanged.
 - **2026-10-24** · Dev Mode tail (M6, gap 16): Measurements kept on the canvas (gap 16): `devMode.addMeasurement {from?, to?, side?}` places one between two layers, along one side of a layer or (neither) to the layer around it, stored on the layer it starts from (saved in `.figcraft`, synced, undoable; old files open without them); Dev Mode draws them as labelled redlines that follow the layers, the Inspect tab lists them (those of the selected layer, or every one on the page), places and removes them; `devMode.removeMeasurement` and `devMode.measurements` remove and list them; a copy keeps those to layers copied with it. The layers panel is read-only in Dev Mode: rows select and expand, but don't rename, reorder, hide or lock. Dev Mode 98% / 78%.
 - **2026-10-24** · Boards (M12): File ▸ New board makes a board, a file kind of its own saved in `.figcraft` and carried to people joining a live session. Sticky notes (8 colours, text that shrinks as the note grows, the author's name, Shift+Cmd/Ctrl+Enter for the next one), shapes with text (7 outlines), connectors that re-route when what they join moves (computed in the engine's normalize pass, so local edits, undo and others' edits agree), marker, highlighter and eraser, stamps with the placer's name on hover; a board toolbar, a contextual bar over the selection and the Design panel hidden until asked for; prototyping and Dev Mode refuse on boards. Design files and boards have their own marks (a pen nib, a note) on tabs, the home screen and the Open files list. Checked in the app, with two app instances in one live session, and through MCP; the web build compiles ([boards-parity](docs/boards-parity.md)).
 - **2026-10-15** · Auto-save (M1, #305): Preferences ▸ Save files automatically (`pref.autoSave`, off by default, desktop only) saves each open file that has a path 3 s after its last change, never during a gesture, a live text preview or while a version is shown; the file is encoded off the UI thread, a failed save says why and is tried again a minute later. Numbers unchanged.
@@ -329,6 +330,7 @@ Ranked; detail and milestones in [`docs/roadmap.md`](docs/roadmap.md).
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-26 | minor | Non-ASCII layer names transliterate in code export (M6, #1235): `class_name` transliterates through the new `deunicode` dependency (pure Rust tables, zero deps, BSD-3-Clause), so Korean, Cyrillic, Latin-diacritic and CJK names become readable ASCII classes (`rogeuin-hwamyeon`, `knopka`, `uber`, `an-niu`) in HTML/CSS/React/Leptos output, component roots and `data-*` variant attributes; symbols-only names take the node's kind (`.text`) instead of `layer-`, and the 40-character cut lands on a word boundary. `html_codegen_tests` updated and extended. Numbers unchanged |
 | 2026-10-24 | minor | Dev Mode tail (M6, gap 16): Measurements kept on the canvas (gap 16): `devMode.addMeasurement {from?, to?, side?}` places one between two layers, along one side of a layer or (neither) to the layer around it, stored on the layer it starts from (saved in `.figcraft`, synced, undoable; old files open without them); Dev Mode draws them as labelled redlines that follow the layers, the Inspect tab lists them (those of the selected layer, or every one on the page), places and removes them; `devMode.removeMeasurement` and `devMode.measurements` remove and list them; a copy keeps those to layers copied with it. The layers panel is read-only in Dev Mode: rows select and expand, but don't rename, reorder, hide or lock. Dev Mode 97% → 98% breadth, 76% → 78% ready, 2–4 h → 1–2 h; headline numbers unchanged at this rounding |
 | 2026-10-24 | minor | Boards (M12): a file kind of its own (`file.newBoard`, saved in `.figcraft`, carried to live-session joiners) with sticky notes, shapes with text, connectors that re-route when what they join moves (an engine recompute, the same for local edits, undo and others' edits), marker, highlighter and eraser, stamps with the placer's name, a board toolbar and a contextual bar; prototyping and Dev Mode refuse on boards; design files and boards have their own marks on tabs and file rows. Boards row added outside the weighted numbers; headline numbers unchanged at this rounding |
 | 2026-10-15 | minor | Auto-save (#305, #296): Preferences ▸ Save files automatically (`pref.autoSave`, off by default; desktop only, the browser has no files to save to) saves each open file that has a path 3 s after its last change, so steady editing doesn't save every few seconds, and never during a gesture, a live text preview or while a version is shown. The file is encoded on a thread of its own and written as of that moment (edits made meanwhile stay unsaved); a failed save says why in a toast and is tried again a minute later, and version history checkpoints keep coming with it on. Numbers unchanged |
diff --git a/crates/engine/Cargo.toml b/crates/engine/Cargo.toml
index 545d872c..cd5b5d50 100644
--- a/crates/engine/Cargo.toml
+++ b/crates/engine/Cargo.toml
@@ -28,6 +28,7 @@ thiserror = { workspace = true }
 log = { workspace = true }
 base64 = { workspace = true }
 regex = { workspace = true }
+deunicode = { workspace = true }
 web-time = "1.1.0"
 
 [dev-dependencies]
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 7ed81b30..961ab33e 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -594,18 +594,60 @@ fn css_gradient(g: &figcraft_color::Gradient, w: f64, h: f64) -> String {
 
 // ------------------------------------------------------------------ HTML and React markup
 
-/// A CSS class name from a layer name ("Card / Title" → "card-title"), unique in `used`.
-pub(crate) fn class_name(name: &str, used: &mut Vec<String>) -> String {
+/// A word for the node's kind, naming layers whose name transliterates to nothing ("###" →
+/// `.text`, `.frame`), instead of the anonymous `layer-`.
+fn kind_word(n: &Node) -> &str {
+    match &n.kind {
+        NodeKind::Page { .. } => "page",
+        NodeKind::Frame => "frame",
+        NodeKind::Group => "group",
+        NodeKind::Section { .. } => "section",
+        NodeKind::Rectangle => "rectangle",
+        NodeKind::Ellipse { .. } => "ellipse",
+        NodeKind::Polygon { .. } => "polygon",
+        NodeKind::Star { .. } => "star",
+        NodeKind::Line => "line",
+        NodeKind::Vector { .. } => "vector",
+        NodeKind::Text(_) => "text",
+        NodeKind::BooleanOp { .. } => "boolean",
+        NodeKind::Component { .. } | NodeKind::ComponentSet { .. } => "component",
+        NodeKind::Instance { .. } => "instance",
+        NodeKind::Slice => "slice",
+    }
+}
+
+/// A CSS class name from a layer name ("Card / Title" → "card-title"), unique in `used`. The name
+/// is transliterated to ASCII first, so non-Latin names stay readable: 로그인 화면 →
+/// `rogeuin-hwamyeon`, кнопка → `knopka`, über → `uber` (per-codepoint transliteration, the slug
+/// libraries' way); a name left with nothing (symbols only) takes `kind`, and one starting with a
+/// digit keeps the `layer-` prefix.
+pub(crate) fn class_name(name: &str, kind: &str, used: &mut Vec<String>) -> String {
     let mut base = String::new();
-    for c in name.chars().flat_map(char::to_lowercase) {
+    for c in deunicode::deunicode(name).chars().flat_map(char::to_lowercase) {
         if c.is_ascii_alphanumeric() {
             base.push(c);
         } else if !base.ends_with('-') && !base.is_empty() {
             base.push('-');
         }
     }
-    let base = base.trim_end_matches('-').chars().take(40).collect::<String>();
-    let base = if base.is_empty() || base.starts_with(|c: char| c.is_ascii_digit()) { format!("layer-{base}") } else { base };
+    // The 40-character cut lands on a word boundary when there is one past the first word.
+    let base = if base.chars().count() > 40 {
+        let cut: String = base.chars().take(40).collect();
+        match cut.rfind('-') {
+            Some(i) if i > 0 => cut[..i].to_string(),
+            _ => cut,
+        }
+    } else {
+        base
+    };
+    let base = base.trim_end_matches('-');
+    let base = if base.is_empty() {
+        kind.to_string()
+    } else if base.starts_with(|c: char| c.is_ascii_digit()) {
+        format!("layer-{base}")
+    } else {
+        base.to_string()
+    };
     let name = (1..).map(|k| if k == 1 { base.clone() } else { format!("{base}-{k}") }).find(|n| !used.contains(n)).unwrap_or(base);
     used.push(name.clone());
     name
@@ -726,7 +768,7 @@ impl<'c, 'a> Markup<'c, 'a> {
                 self.used.push(c.clone());
                 c
             }
-            None => class_name(&n.name, &mut self.used),
+            None => class_name(&n.name, kind_word(n), &mut self.used),
         };
         let pad = self.pad(depth);
         let attr = if self.lang == CodeLang::React { "className" } else { "class" };
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index a8217be1..e623b5f9 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -618,7 +618,7 @@ pub fn definition(doc: &Document, c: &Component, lang: CodeLang) -> String {
 /// `data-*` attribute names for variant parameters, unique among them (in order).
 fn data_attrs(variants: &[&Param]) -> Vec<String> {
     let mut used = Vec::new();
-    variants.iter().map(|p| format!("data-{}", class_name(&p.prop, &mut used))).collect()
+    variants.iter().map(|p| format!("data-{}", class_name(&p.prop, "prop", &mut used))).collect()
 }
 
 /// `c`'s markup in React or Leptos (two levels in) and its stylesheet (variables as custom
@@ -626,7 +626,7 @@ fn data_attrs(variants: &[&Param]) -> Vec<String> {
 fn web(doc: &Document, c: &Component, lang: CodeLang) -> (String, String, String) {
     let ctx = Ctx { doc, root: c.comp, comp: Some(c), base: 2 };
     let root_name = c.set.and_then(|s| doc.node(s)).or_else(|| doc.node(c.comp)).map(|n| n.name.clone()).unwrap_or_default();
-    let root_class = class_name(&root_name, &mut Vec::new());
+    let root_class = class_name(&root_name, "component", &mut Vec::new());
     let variants: Vec<&Param> = c.params.iter().filter(|p| matches!(p.kind, ParamKind::Variant(_))).collect();
     let attr_names = data_attrs(&variants);
     let pass = |root: NodeId| {
diff --git a/crates/engine/src/html_codegen_tests.rs b/crates/engine/src/html_codegen_tests.rs
index b7fbb9ac..cd1318ee 100644
--- a/crates/engine/src/html_codegen_tests.rs
+++ b/crates/engine/src/html_codegen_tests.rs
@@ -53,11 +53,57 @@ fn class_names_are_valid_and_deep_trees_are_bounded() {
         parent = id(s.execute("frame.create", &json!({"x": 1, "y": 1, "width": 90, "height": 90, "parent": parent})).unwrap());
     }
     let code = code_for(s.doc().unwrap(), root, CodeLang::Html);
-    assert!(code.starts_with("<div class=\"layer-1-n-code-name\">"), "{}", code.lines().next().unwrap());
+    assert!(code.starts_with("<div class=\"layer-1-unicode-name\">"), "{}", code.lines().next().unwrap());
     // Nesting stops at the depth limit instead of running away.
     assert!(code.matches("<div").count() <= 14, "{}", code.matches("<div").count());
 }
 
+#[test]
+fn non_ascii_layer_names_transliterate_into_readable_classes() {
+    let mut s = Session::new();
+    // Korean reads as its romanization instead of layer- (#1235), with duplicates numbered.
+    let f = id(s.execute("frame.create", &json!({"x": 0, "y": 0, "width": 300, "height": 200})).unwrap());
+    s.execute("node.set", &json!({"id": f, "props": {"name": "로그인 화면"}})).unwrap();
+    let a = id(s.execute("text.create", &json!({"text": "Login", "x": 0, "y": 0, "parent": f})).unwrap());
+    let b = id(s.execute("text.create", &json!({"text": "Login", "x": 0, "y": 40, "parent": f})).unwrap());
+    s.execute("node.set", &json!({"id": a, "props": {"name": "로그인"}})).unwrap();
+    s.execute("node.set", &json!({"id": b, "props": {"name": "로그인"}})).unwrap();
+    let code = code_for(s.doc().unwrap(), f, CodeLang::Html);
+    assert!(code.contains("<div class=\"rogeuin-hwamyeon\">"), "{code}");
+    assert!(code.contains("<p class=\"rogeuin\">") && code.contains("<p class=\"rogeuin-2\">"), "{code}");
+}
+
+#[test]
+fn other_scripts_and_symbol_names_transliterate_or_fall_back_to_the_kind() {
+    let mut s = Session::new();
+    let f = id(s.execute("frame.create", &json!({"x": 0, "y": 0, "width": 100, "height": 100, "name": "按钮"})).unwrap());
+    let k = id(s.execute("text.create", &json!({"text": "Ok", "x": 0, "y": 0, "parent": f})).unwrap());
+    s.execute("node.set", &json!({"id": k, "props": {"name": "кнопка"}})).unwrap();
+    let hash = id(s.execute("text.create", &json!({"text": "###", "x": 0, "y": 20, "parent": f})).unwrap());
+    s.execute("node.set", &json!({"id": hash, "props": {"name": "###"}})).unwrap();
+    let digit = id(s.execute("shape.rectangle", &json!({"x": 0, "y": 40, "width": 10, "height": 10, "parent": f})).unwrap());
+    s.execute("node.set", &json!({"id": digit, "props": {"name": "4버튼"}})).unwrap();
+    let code = code_for(s.doc().unwrap(), f, CodeLang::Html);
+    assert!(code.contains("<div class=\"an-niu\">"), "Chinese: {code}");
+    assert!(code.contains("<p class=\"knopka\">"), "Cyrillic: {code}");
+    assert!(code.contains("<p class=\"text\">"), "symbols fall back to the kind: {code}");
+    assert!(code.contains("layer-4beoteun"), "a leading digit keeps the layer- prefix: {code}");
+}
+
+#[test]
+fn long_names_cut_at_a_word_boundary() {
+    let mut s = Session::new();
+    let long = format!("{}-{}", "a".repeat(30), "b".repeat(30));
+    let f = id(s.execute("frame.create", &json!({"x": 0, "y": 0, "width": 10, "height": 10, "name": long})).unwrap());
+    let code = code_for(s.doc().unwrap(), f, CodeLang::Html);
+    let word = "a".repeat(30);
+    assert!(code.contains(&format!("<div class=\"{word}\">")), "cut back to the first word: {code}");
+    let unbroken = "c".repeat(50);
+    let g = id(s.execute("frame.create", &json!({"x": 0, "y": 0, "width": 10, "height": 10, "name": unbroken})).unwrap());
+    let code = code_for(s.doc().unwrap(), g, CodeLang::Html);
+    assert!(code.contains(&format!("class=\"{}\"", "c".repeat(40))), "one long word cuts at 40: {code}");
+}
+
 #[test]
 fn leptos_wraps_the_markup_in_a_component_with_text_as_string_literals() {
     let mut s = Session::new();
diff --git a/docs/dev-mode-parity.md b/docs/dev-mode-parity.md
index 9565730e..3368153e 100644
--- a/docs/dev-mode-parity.md
+++ b/docs/dev-mode-parity.md
@@ -1,6 +1,6 @@
 # Dev Mode parity
 
-> **Last reviewed:** 2026-10-24 · **Last updated:** 2026-10-24 · **Change:** minor (measurements kept on the canvas; a read-only layers panel in Dev Mode; earlier: import lines in generated layer trees; compare with any saved version; Dev Mode behaviour suite: an inspect-only canvas, Changed in the ready list, statuses only on frames and sections; plugin panels from the Inspect tab) · **Target:** Figma Design Dev Mode (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-24 · **Last updated:** 2026-10-26 · **Change:** minor (class names transliterate non-ASCII layer names (#1235); measurements kept on the canvas; a read-only layers panel in Dev Mode; earlier: import lines in generated layer trees; compare with any saved version; Dev Mode behaviour suite: an inspect-only canvas, Changed in the ready list, statuses only on frames and sections; plugin panels from the Inspect tab) · **Target:** Figma Design Dev Mode (desktop app 126.10.7)
 
 **Breadth ~98%, ready ~78% (estimated).** The inspect surface is broad, components connect
 to the code components of a repository (with their imports, also inside generated layer trees),
@@ -12,7 +12,7 @@ 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 |
+| 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) |
 | 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) |
@@ -28,6 +28,7 @@ repository, third-party integrations. Remaining: 1–2 h.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-26 | minor | Class names from layer names transliterate non-ASCII scripts (#1235): `class_name` runs names through `deunicode` (new dependency: pure Rust tables, zero deps, BSD-3-Clause), so Korean, Cyrillic, Latin-diacritic and CJK names become readable ASCII classes in HTML/CSS/React/Leptos output, component roots and `data-*` variant attributes (`rogeuin-hwamyeon`, `knopka`, `uber`, `an-niu`; before, every one of them came out `layer-`); symbols-only names take the node's kind (`.text`, `.frame`) instead of `layer-`, and the 40-character cut lands on a word boundary. ASCII-only names are unchanged. `html_codegen_tests` updated (its diacritics expectation improves from `layer-1-n-code-name` to `layer-1-unicode-name`) and extended. Percentages and hours unchanged |
 | 2026-10-24 | minor | Dev Mode refuses design edits from files dropped on the canvas (a dropped document still opens as a file of its own, and the drop overlay shows the Dev Mode note for other files), from the Pages list's add, rename, reorder, duplicate and delete, and from the Assets panel's place, drag, Alt-drop swap, style, Hide when publishing, Update, and adding, removing and swapping libraries. Percentages and hours unchanged |
 | 2026-10-24 | minor | Measurements kept on the canvas (gap 16): `devMode.addMeasurement {from?, to?, side?}` places one between two layers, along one side of a layer or (neither) to the layer around it, stored on the layer it starts from (saved in `.figcraft`, synced, undoable; old files open without them); Dev Mode draws them as labelled redlines that follow the layers, the Inspect tab lists them (those of the selected layer, or every one on the page), places and removes them; `devMode.removeMeasurement` and `devMode.measurements` remove and list them; a copy keeps those to layers copied with it. The layers panel is read-only in Dev Mode: rows select and expand, but don't rename, reorder, hide or lock. Breadth 97% → 98%, ready 76% → 78%, 2–4 h → 1–2 h |
 | 2026-10-15 | minor | Dev Mode tail (gap 16): generated layer trees (React, Leptos, SwiftUI, Compose) start with the import lines of the connected components they call, once each, also those in a component's definition, in slots an instance fills and placed by a connected template's instance swaps; Compare changes takes any saved version as the before (`dev.compare {version}`, the view's Compare with menu; frames that aren't ready for dev compare with versions). Behaviour suite (5 tests; 4 failed before the fixes): the Dev Mode canvas only inspects (no moving, resizing, drawing, text or vector editing; menus, shortcuts, nudges, opacity keys and paste refuse design edits with a note; toolbar drawing tools go back to the design), the ready list filters and badges Changed items, statuses are refused on layers inside frames. Read-only plugins run from the Inspect tab show their panels (the runtime's panels, reused). Breadth 96% → 97% (measurements kept on the canvas and the read-only layers panel counted as missing), ready 72% → 76%, 0–1 h → 2–4 h |

From 2f5286a387e5fb6325e21fecccf9b65a3f2e6f2c Mon Sep 17 00:00:00 2001
From: Mojtaba Jafarzadeh <mojtabajafarzadeh@icloud.com>
Date: Mon, 26 Oct 2026 09:29:27 +0330
Subject: [PATCH 31/59] collab-net: server keeps publish uploads alive with the
 reply timeout

A publish uploads a whole file; a large project on a slow link takes the
server a while to receive and answer. But the server's one-shot request
connections (manage, hosting, library, plugins) used the short request_idle
as their read timeout, so a slow upload could be cut off mid-processing. The
manage/hosting connections that carry uploads now wait the longer
request_reply_timeout (as the client already did), keeping the short idle
for the other one-shot requests and sessions.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 crates/collab-net/src/hub.rs | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/crates/collab-net/src/hub.rs b/crates/collab-net/src/hub.rs
index c2202919..1471c179 100644
--- a/crates/collab-net/src/hub.rs
+++ b/crates/collab-net/src/hub.rs
@@ -956,11 +956,18 @@ fn serve(mut stream: TcpStream, conn: u64, hub: &Sender<HubIn>, limits: NetLimit
                 // Sessions and the operator may use the last connections; one-shot requests
                 // (hosting, libraries, browsing plugins) leave them free.
                 let session = matches!(first, ClientMsg::Hello(_) | ClientMsg::Manage(_));
+                // A publish uploads a whole file; a large one on a slow link takes the server a
+                // while to receive and answer. The manage/hosting connections that carry uploads
+                // wait the longer request-reply timeout, not the short request idle.
+                let idle = match first {
+                    ClientMsg::Manage(_) | ClientMsg::OpenHosting(_) => limits.request_reply_timeout,
+                    ClientMsg::Hello(_) => limits.idle_timeout,
+                    _ => limits.request_idle,
+                };
                 let max = match &first {
                     ClientMsg::OpenPlugins(o) if o.key.is_empty() => limits.max_request,
                     _ => limits.max_client_message,
                 };
-                let idle = if session { limits.idle_timeout } else { limits.request_idle };
                 let reserved = !session && open.0.load(Ordering::Relaxed) > limits.max_connections.saturating_sub(limits.reserve_for_sessions);
                 // (In flight is only taken when the connection goes on: the hub gives it back.)
                 if reserved || !shared.in_flight.take(bytes, limits.max_in_flight) {

From c826c74e6ea0f1dcc2282e5f3771809a6fbd744b Mon Sep 17 00:00:00 2001
From: Mojtaba Jafarzadeh <mojtabajafarzadeh@icloud.com>
Date: Mon, 26 Oct 2026 09:29:30 +0330
Subject: [PATCH 32/59] ui: bind the share server key to its server

The Share popover's server key was stored without its server, so changing the
server in Preferences would send the previous server's key to the new one.
Remember the key with the server it was typed for and only send it when the
addresses match. A regression test covers the mismatch.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 crates/ui-egui/src/live.rs             | 28 +++++++++++++++++---------
 crates/ui-egui/src/live_share_tests.rs | 18 ++++++++++++++++-
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/crates/ui-egui/src/live.rs b/crates/ui-egui/src/live.rs
index bcc0bc77..c4ea3ed7 100644
--- a/crates/ui-egui/src/live.rs
+++ b/crates/ui-egui/src/live.rs
@@ -98,10 +98,11 @@ pub struct LiveUi {
     pub advanced: bool,
     pub this_computer: bool,
     pub port: String,
-    /// The server key for online sharing (a server that needs one; empty: none). Passed to
-    /// `collab.share` so a keyed server can be used from the Share popover without the Publish
-    /// dialog.
-    pub share_key: String,
+    /// The server key for online sharing, and the server address it was entered for (a server
+    /// that needs one; `None`: none). Passed to `collab.share` so a keyed server can be used
+    /// from the Share popover without the Publish dialog. The key goes out only to the server it
+    /// belongs to: switching the server in Preferences must not leak the old one to it.
+    pub share_key: Option<(String, String)>,
     /// What is typed in the join field of the Share popover and the home screen.
     pub code: String,
     /// The join started from the home screen: what it is doing shows under the field, and its
@@ -750,8 +751,14 @@ fn start_ui(app: &mut FigApp, ui: &mut Ui, t: &Tokens) {
         if let (true, Ok(port)) = (local, app.ui.live.port.trim().parse::<u16>()) {
             params["port"] = json!(port);
         }
-        if !local && !app.ui.live.share_key.trim().is_empty() {
-            params["key"] = json!(app.ui.live.share_key.trim());
+        // The key goes out only to the server it belongs to (the server in Preferences): changing
+        // the server must not send the old server's key to a new one.
+        if !local
+            && let Some((at, key)) = app.ui.live.share_key.as_ref()
+            && *at == server
+            && !key.is_empty()
+        {
+            params["key"] = json!(key);
         }
         app.run("collab.share", params);
     }
@@ -770,12 +777,13 @@ fn start_ui(app: &mut FigApp, ui: &mut Ui, t: &Tokens) {
         } else {
             widgets::label(ui, tr("Another server, or one that needs its key. The usual server is set in Preferences."), t.text_secondary);
             // The server key (a server that needs one; the address in Preferences is without it).
+            // It is remembered for the server it was typed for, so it never leaks to another one.
             ui.horizontal(|ui| {
                 widgets::label(ui, tr("Server key"), t.text);
-                if let Some(key) =
-                    widgets::secret_field_named(ui, egui::Id::unique("live_share_key"), &app.ui.live.share_key, 200.0, tr("Server key"))
-                {
-                    app.ui.live.share_key = key.trim().chars().filter(|c| !c.is_whitespace() && !c.is_control()).take(128).collect();
+                let shown = app.ui.live.share_key.as_ref().map(|(_, key)| key.as_str()).unwrap_or_default();
+                if let Some(key) = widgets::secret_field_named(ui, egui::Id::unique("live_share_key"), shown, 200.0, tr("Server key")) {
+                    let key: String = key.trim().chars().filter(|c| !c.is_whitespace() && !c.is_control()).take(128).collect();
+                    app.ui.live.share_key = if key.is_empty() { None } else { Some((server.trim().to_string(), key)) };
                 }
             });
             if widgets::button(ui, tr("Publish to another server…"), false, true).clicked() {
diff --git a/crates/ui-egui/src/live_share_tests.rs b/crates/ui-egui/src/live_share_tests.rs
index 6c5bdb84..edef3acc 100644
--- a/crates/ui-egui/src/live_share_tests.rs
+++ b/crates/ui-egui/src/live_share_tests.rs
@@ -237,7 +237,7 @@ fn the_server_key_shows_as_dots_while_shown_and_typed() {
     let (mut h, _) = harness();
     let shapes = open(&mut h);
     click(&mut h, &shapes, "Advanced");
-    h.app.ui.live.share_key = "s3cret-key".into();
+    h.app.ui.live.share_key = Some(("wss://share.example/".to_string(), "s3cret-key".to_string()));
     let shapes = h.frames(2);
     let dots = "•".repeat(10);
     assert!(has_text(&shapes, &dots) && !has_text(&shapes, "s3cret-key"));
@@ -505,6 +505,22 @@ fn the_server_preference_resets_and_turns_online_sharing_off() {
     assert!(s.published.is_empty() && s.hosted.len() == 1, "shared on the local network");
 }
 
+#[test]
+fn a_key_typed_for_one_server_is_not_sent_to_another() {
+    // The Server key field remembers the server it was typed for: it goes out only to that
+    // server. Changing the server in Preferences must not send the old server's key to the new
+    // one. (The key is set as the field editor would, bound to the server it was typed for.)
+    let (mut h, script) = harness();
+    h.app.ui.live.share_key = Some(("wss://share.example/".to_string(), "KeyKeyKeyKeyKeyKeyKey0".to_string()));
+    h.frames(2);
+    // Change the server in Preferences to another one, then share: the old key must not go to it.
+    h.app.session.execute("pref.publishServer", &json!({"url": "wss://other.example/"})).unwrap();
+    h.frames(2);
+    let shapes = open(&mut h);
+    let shapes = click(&mut h, &shapes, "Start sharing");
+    assert_eq!(script.lock().unwrap().published.last().unwrap().key, None, "the old server's key is not sent to the new server");
+}
+
 #[test]
 fn an_open_popover_asks_for_no_frames() {
     let (mut h, script) = harness();

From ca6426b9a120a70421790ced67bd6dd5add73310 Mon Sep 17 00:00:00 2001
From: NetterSilver <133535268+Silvertree2010@users.noreply.github.com>
Date: Mon, 26 Oct 2026 06:24:14 +0000
Subject: [PATCH 33/59] Keep full precision when converting px to rem in code
 export

Found while testing crates/engine/src/codegen.rs:122-150 (lengths_to_rem calls num, which rounds to 2 decimals, at :112)

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 crates/engine/src/codegen.rs                 | 8 +++++++-
 crates/engine/src/inspect_behaviour_tests.rs | 9 ++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 520728bc..2a50e42b 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -137,6 +137,12 @@ pub(crate) fn num(v: f64) -> String {
     }
 }
 
+/// `v` without trailing zeros (6 decimals), for lengths that must convert back to the same pixels.
+fn num6(v: f64) -> String {
+    let r = (v * 1_000_000.0).round() / 1_000_000.0;
+    if r.is_finite() && r != 0.0 { format!("{r}") } else { "0".into() }
+}
+
 /// `code` with every pixel length (`12px`) in rem of `root` pixels (`0.75rem`); names that end
 /// in "px", markup lines (layer text), string literals and comments are left alone.
 pub fn px_to_rem(code: &str, root: f64) -> String {
@@ -202,7 +208,7 @@ fn lengths_to_rem(code: &str, root: f64) -> String {
         match number.parse::<f64>() {
             Ok(v) if free && v.is_finite() => {
                 out.push_str(before);
-                out.push_str(&format!("{}rem", num(v / root)));
+                out.push_str(&format!("{}rem", num6(v / root)));
             }
             _ => {
                 out.push_str(head);
diff --git a/crates/engine/src/inspect_behaviour_tests.rs b/crates/engine/src/inspect_behaviour_tests.rs
index c4bcc6be..780aa19c 100644
--- a/crates/engine/src/inspect_behaviour_tests.rs
+++ b/crates/engine/src/inspect_behaviour_tests.rs
@@ -340,6 +340,13 @@ fn rem_conversion_leaves_names_alone() {
     let f = crate::codegen::px_to_rem;
     // Lengths convert, names ending in "px" don't.
     assert_eq!(f("width: 32px; --gap-8px: 1; margin: -8px 0px;", 16.0), "width: 2rem; --gap-8px: 1; margin: -0.5rem 0rem;");
-    assert_eq!(f("épx 1px px", 16.0), "épx 0.06rem px");
+    assert_eq!(f("épx 1px px", 16.0), "épx 0.0625rem px");
     assert_eq!(f("", 16.0), "");
 }
+
+#[test]
+fn rem_conversion_keeps_the_original_pixels() {
+    let f = crate::codegen::px_to_rem;
+    assert_eq!(f("padding: 3px;", 16.0), "padding: 0.1875rem;");
+    assert_eq!(f("gap: 0.5px;", 16.0), "gap: 0.03125rem;");
+}

From f0623ff89cc293748bb1b9172a62511739a5ca80 Mon Sep 17 00:00:00 2001
From: Denis Gomes <6731020+denisg0mes@users.noreply.github.com>
Date: Mon, 26 Oct 2026 03:23:56 -0400
Subject: [PATCH 34/59] M7: show a magnified image's pixels on the canvas

Zoomed in on an image, the canvas smoothed it with bicubic sampling, so
a screenshot under inspection went soft at every edge and its pixels
could not be told apart. Checking a screenshot of a live page against
its design up close needs the pixels as they are.

The canvas now samples an image paint at the nearest pixel once each
image pixel covers two or more device pixels. Below that the image stays
smooth: between 1x and 2x nearest sampling draws pixels one and two
device pixels wide side by side, which looks jagged rather than sharp.

Exports, thumbnails, PDF and SVG are unchanged: the switch is a render
option, magnified_image_pixels, that only the canvas sets, and the
retained renderer reuses a render only when it matches. Pixel preview
was not a fit: it rasterises the whole canvas at 1x or 2x, so vectors
and text go blocky along with the image.
---
 crates/render/src/draw.rs                  | 18 +++++-
 crates/render/src/lib.rs                   |  5 ++
 crates/render/src/lod_tests.rs             |  1 +
 crates/render/src/magnified_image_tests.rs | 75 ++++++++++++++++++++++
 crates/render/src/pattern.rs               |  1 +
 crates/render/src/retained.rs              |  3 +
 crates/ui-egui/src/render_worker.rs        |  1 +
 7 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 crates/render/src/magnified_image_tests.rs

diff --git a/crates/render/src/draw.rs b/crates/render/src/draw.rs
index 1da5e495..75efae60 100644
--- a/crates/render/src/draw.rs
+++ b/crates/render/src/draw.rs
@@ -4,14 +4,14 @@ use std::collections::HashMap;
 use std::hash::{Hash, Hasher};
 use std::sync::{Arc, Mutex, OnceLock};
 
-use figcraft_color::{BlendMode, Paint};
+use figcraft_color::{BlendMode, Paint, PaintKind};
 use figcraft_doc::{Document, EffectKind, Node, NodeId, NodeKind, StrokeAlign};
 use figcraft_geom::{Affine, BezPath, Rect, Shape};
-use tiny_skia::{FillRule, IntRect, Mask, MaskType, Pixmap, PixmapPaint, Transform};
+use tiny_skia::{FillRule, FilterQuality, IntRect, Mask, MaskType, Pixmap, PixmapPaint, Transform};
 
 use crate::backdrop::{self, Under};
 use crate::boolean::{PathCache, locked};
-use crate::paint::{composite, prepare_at, ts_blend};
+use crate::paint::{Prepared, composite, prepare_at, ts_blend};
 use crate::{blur, grain, lod, shadow};
 
 /// Shared state for one render.
@@ -30,6 +30,7 @@ pub struct Ctx<'a, 'd> {
     pub skip: &'a [NodeId],
     /// Approximate what's too small to see in detail (canvas previews; see [`crate::lod`]).
     pub lod: bool,
+    pub magnified_image_pixels: bool,
     /// The surfaces under the one being drawn into, when it is an isolated layer (for backdrops).
     pub under: Option<&'a Under<'a>>,
     /// Seconds into animated GIFs (0: their first frame; only the presenter plays them).
@@ -116,10 +117,21 @@ pub fn ts_path(p: &BezPath) -> Option<tiny_skia::Path> {
     b.finish()
 }
 
+const IMAGE_PIXELS_SHOWN_FROM_MAGNIFICATION: f64 = 2.0;
+
+fn pixels_when_magnified(prep: Prepared, device_scale: f64) -> Prepared {
+    let Prepared::Pattern { pixmap, mode, quality, opacity, transform } = prep else { return prep };
+    let image_scale = f64::from(transform.sx * transform.sy - transform.kx * transform.ky).abs().sqrt();
+    let magnification = device_scale * image_scale;
+    let quality = if magnification >= IMAGE_PIXELS_SHOWN_FROM_MAGNIFICATION { FilterQuality::Nearest } else { quality };
+    Prepared::Pattern { pixmap, mode, quality, opacity, transform }
+}
+
 fn fill_with(pix: &mut Pixmap, path: &tiny_skia::Path, paints: &[Paint], w: f64, h: f64, xf: Affine, rule: FillRule, ctx: &Ctx, mask: Option<&Mask>) {
     let scale = xf.determinant().abs().sqrt();
     for p in paints {
         let Some(prep) = prepare_at(p, w, h, scale, ctx.doc, ctx.time) else { continue };
+        let prep = if ctx.magnified_image_pixels && matches!(p.kind, PaintKind::Image(_)) { pixels_when_magnified(prep, scale) } else { prep };
         let paint = tiny_skia::Paint { shader: prep.shader(), anti_alias: true, blend_mode: ts_blend(p.blend), ..Default::default() };
         if p.blend == BlendMode::PlusDarker {
             // No tiny-skia mode: the paint alone over its pixels, then blended in.
diff --git a/crates/render/src/lib.rs b/crates/render/src/lib.rs
index 0ad87d94..26f3afc2 100644
--- a/crates/render/src/lib.rs
+++ b/crates/render/src/lib.rs
@@ -81,6 +81,7 @@ pub struct Options {
     /// detail, see [`lod`]. Off for everything that must be exact (exports, thumbnails); no
     /// effect in outline mode.
     pub lod: bool,
+    pub magnified_image_pixels: bool,
     /// A dot grid over the background, under the layers (a board's canvas; drawn only where the
     /// background is).
     pub dots: Option<Dots>,
@@ -187,6 +188,7 @@ pub fn render_view_single(doc: &Document, page: NodeId, view: &View, opts: &Opti
         outlined: &opts.outlined,
         skip: &opts.skip,
         lod,
+        magnified_image_pixels: opts.magnified_image_pixels,
         under: None,
         time: 0.0,
         bounds: &bounds,
@@ -220,6 +222,7 @@ fn nodes_into(doc: &Document, ids: &[NodeId], view: &View, pix: &mut Pixmap, tim
         outlined: &[],
         skip: &[],
         lod: false,
+        magnified_image_pixels: false,
         under: None,
         time,
         bounds: &bounds,
@@ -470,6 +473,8 @@ mod image_profile_tests;
 #[cfg(test)]
 mod lod_tests;
 #[cfg(test)]
+mod magnified_image_tests;
+#[cfg(test)]
 mod paint_behaviour_tests;
 #[cfg(test)]
 mod progressive_tests;
diff --git a/crates/render/src/lod_tests.rs b/crates/render/src/lod_tests.rs
index a573ee7c..3c35c3c3 100644
--- a/crates/render/src/lod_tests.rs
+++ b/crates/render/src/lod_tests.rs
@@ -163,6 +163,7 @@ fn exports_never_use_lod() {
         outlined: &[],
         skip: &[],
         lod: true,
+        magnified_image_pixels: false,
         under: None,
         time: 0.0,
         bounds: &bounds,
diff --git a/crates/render/src/magnified_image_tests.rs b/crates/render/src/magnified_image_tests.rs
new file mode 100644
index 00000000..07009bce
--- /dev/null
+++ b/crates/render/src/magnified_image_tests.rs
@@ -0,0 +1,75 @@
+use std::sync::Arc;
+
+use figcraft_color::{ImageScaleMode, Paint};
+use figcraft_doc::{Document, ImageData, NodeId, NodeKind};
+
+use crate::{Options, Pixmap, Retained, View, encode_png, render_view};
+
+fn checkerboard_doc() -> (Document, NodeId) {
+    let mut img = Pixmap::new(4, 4).unwrap();
+    for (i, c) in img.data_mut().chunks_exact_mut(4).enumerate() {
+        let black = (i % 4 + i / 4) % 2 == 0;
+        c.copy_from_slice(if black { &[0, 0, 0, 255] } else { &[255, 255, 255, 255] });
+    }
+    let mut d = Document::new("magnified");
+    let page = d.first_page().unwrap();
+    d.images.insert("checker".into(), ImageData { bytes: Arc::new(encode_png(&img).unwrap()), width: 4, height: 4 });
+    let r = d.create(page, NodeKind::Rectangle, "Image", 0.0, 0.0, 4.0, 4.0).unwrap();
+    d.get_mut(r).unwrap().fills = vec![Paint::image("checker", ImageScaleMode::Fill)];
+    (d, page)
+}
+
+fn view(scale: f64) -> View {
+    let side = (4.0 * scale).round() as u32;
+    View { origin: (0.0, 0.0), scale, width: side, height: side }
+}
+
+fn canvas() -> Options {
+    Options { lod: true, magnified_image_pixels: true, ..Default::default() }
+}
+
+fn in_between_greys(p: &Pixmap, side: u32) -> usize {
+    let row = p.width() as usize * 4;
+    p.data().chunks_exact(row).take(side as usize).flat_map(|r| r[..side as usize * 4].chunks_exact(4)).filter(|c| c[0] > 8 && c[0] < 247).count()
+}
+
+#[test]
+fn a_magnified_image_on_the_canvas_shows_its_pixels_as_hard_edged_squares() {
+    let (d, page) = checkerboard_doc();
+    let v = view(8.0);
+    let pix = render_view(&d, page, &v, &canvas()).unwrap();
+    assert_eq!(in_between_greys(&pix, v.width), 0, "each image pixel is one flat 8 × 8 square");
+    for (x, y, black) in [(3, 3, true), (11, 3, false), (3, 11, false), (11, 11, true), (15, 20, false)] {
+        let i = ((y * v.width + x) * 4) as usize;
+        assert_eq!(pix.data()[i] == 0, black, "({x}, {y})");
+    }
+}
+
+#[test]
+fn exports_keep_magnified_images_smooth() {
+    let (d, page) = checkerboard_doc();
+    let v = view(8.0);
+    let pix = render_view(&d, page, &v, &Options::default()).unwrap();
+    assert!(in_between_greys(&pix, v.width) > 0, "an export scaled up blends neighbouring pixels");
+}
+
+#[test]
+fn below_twice_its_size_an_image_stays_smooth_on_the_canvas() {
+    let (d, page) = checkerboard_doc();
+    let v = view(1.5);
+    let canvas = render_view(&d, page, &v, &canvas()).unwrap();
+    let export = render_view(&d, page, &v, &Options::default()).unwrap();
+    assert_eq!(canvas.data(), export.data());
+}
+
+#[test]
+fn turning_pixel_squares_on_redraws_a_retained_view() {
+    let (d, page) = checkerboard_doc();
+    let d = Arc::new(d);
+    let v = view(8.0);
+    let mut r = Retained::default();
+    let smooth = r.render(&d, page, &v, &Options { lod: true, ..Default::default() }).unwrap().1.clone();
+    let squares = r.render(&d, page, &v, &canvas()).unwrap().1.clone();
+    assert!(in_between_greys(&smooth, v.width) > 0);
+    assert_eq!(in_between_greys(&squares, v.width), 0);
+}
diff --git a/crates/render/src/pattern.rs b/crates/render/src/pattern.rs
index 2489766c..efa23e7b 100644
--- a/crates/render/src/pattern.rs
+++ b/crates/render/src/pattern.rs
@@ -55,6 +55,7 @@ pub fn cell_pixmap(doc: &Document, pt: &PatternPaint, w: f64, h: f64, scale: f64
         outlined: &[],
         skip: &[],
         lod: false,
+        magnified_image_pixels: false,
         under: None,
         time,
         bounds: &bounds,
diff --git a/crates/render/src/retained.rs b/crates/render/src/retained.rs
index dcb76ffc..61f11003 100644
--- a/crates/render/src/retained.rs
+++ b/crates/render/src/retained.rs
@@ -45,6 +45,7 @@ struct Frame {
     outline_extras: crate::Outline,
     outlined: Vec<NodeId>,
     lod: bool,
+    magnified_image_pixels: bool,
     skip: Vec<NodeId>,
     solo: Option<NodeId>,
     background: Option<figcraft_color::Color>,
@@ -157,6 +158,7 @@ impl Retained {
             && !opts.outline.hidden
             && last.outlined == opts.outlined
             && last.lod == opts.lod
+            && last.magnified_image_pixels == opts.magnified_image_pixels
             && last.skip == opts.skip
             && last.solo == opts.solo
             && last.background == opts.background
@@ -202,6 +204,7 @@ impl Retained {
             outline_extras: opts.outline,
             outlined: opts.outlined.clone(),
             lod: opts.lod,
+            magnified_image_pixels: opts.magnified_image_pixels,
             skip: opts.skip.clone(),
             solo: opts.solo,
             background: opts.background,
diff --git a/crates/ui-egui/src/render_worker.rs b/crates/ui-egui/src/render_worker.rs
index 5144ac39..fa9d426e 100644
--- a/crates/ui-egui/src/render_worker.rs
+++ b/crates/ui-egui/src/render_worker.rs
@@ -97,6 +97,7 @@ fn run(job: &Job, view: &View, retained: &mut Retained, coarse: bool) -> Option<
         skip: job.skip.clone(),
         solo: job.solo,
         lod: true,
+        magnified_image_pixels: true,
         dots: job.dots,
         ..Default::default()
     };

From 65d270dd42453a8990f23a66303f1818f60337d8 Mon Sep 17 00:00:00 2001
From: Mojtaba Jafarzadeh <mojtabajafarzadeh@icloud.com>
Date: Mon, 26 Oct 2026 10:55:38 +0330
Subject: [PATCH 35/59] ui: context menu offers "Go to main component" for
 instances

Right-clicking an instance always showed "Create component" (and never "Go to
main component"), so an imported instance looked disconnected from its main
even though the link was intact. When the selection is an instance, replace
"Create component" with "Go to main component" in the context menu, matching
Figma. A regression test covers the menu contents for an instance.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 crates/ui-egui/src/context_menu_tests.rs | 17 +++++++++++++++++
 crates/ui-egui/src/menus.rs              |  8 ++++++++
 2 files changed, 25 insertions(+)

diff --git a/crates/ui-egui/src/context_menu_tests.rs b/crates/ui-egui/src/context_menu_tests.rs
index 61df3fdb..a447347d 100644
--- a/crates/ui-egui/src/context_menu_tests.rs
+++ b/crates/ui-egui/src/context_menu_tests.rs
@@ -55,6 +55,23 @@ fn the_context_menu_groups_the_copy_commands_under_copy_as() {
     assert!(u.app.ui.context_menu.is_none(), "the menu closes");
 }
 
+#[test]
+fn the_context_menu_offers_go_to_main_for_an_instance() {
+    // Right-clicking an instance reaches its main component: the menu offers "Go to main
+    // component" instead of "Create component" (which is for plain layers).
+    let mut s = Session::new();
+    let f = id(&s.execute("frame.create", &json!({"x": 0, "y": 0, "width": 100, "height": 60, "name": "Button"})).unwrap());
+    let comp = id(&s.execute("component.create", &json!({"ids": [f]})).unwrap());
+    let inst = id(&s.execute("instance.create", &json!({"component": comp, "x": 0, "y": 200})).unwrap());
+    let mut u = Ui::new(s);
+    u.frame(vec![]);
+    u.app.ui.context_menu = Some((Pos2::new(700.0, 300.0), vec![inst]));
+    u.frame(vec![]);
+    let shapes = flat(&u.frame_output(vec![]).shapes);
+    assert!(has_text(&shapes, "Go to main component"), "an instance's menu reaches its main");
+    assert!(!has_text(&shapes, "Create component"), "not offered for an instance");
+}
+
 #[test]
 fn copying_a_link_with_nothing_selected_copies_nothing() {
     let mut s = Session::new();
diff --git a/crates/ui-egui/src/menus.rs b/crates/ui-egui/src/menus.rs
index d3647bb0..d65dd246 100644
--- a/crates/ui-egui/src/menus.rs
+++ b/crates/ui-egui/src/menus.rs
@@ -1019,6 +1019,14 @@ pub fn popups(app: &mut FigApp, ctx: &egui::Context) {
                 {
                     entries.insert(at + 1, (label, "component.combineVariants"));
                 }
+                // An instance's actions reach its main component: replace "Create component" with
+                // "Go to main component" (as in Figma's context menu).
+                if app.session.doc().ok().is_some_and(|doc| {
+                    ids.iter().any(|i| doc.node(*i).is_some_and(|n| matches!(n.kind, figcraft_doc::NodeKind::Instance { .. })))
+                }) && let Some(at) = entries.iter().position(|e| e.1 == "component.create")
+                {
+                    entries[at] = (tr("Go to main component"), "component.goToMain");
+                }
                 // A right-clicked ruler guide (selected, with no layers) can be removed.
                 if !has_sel && app.session.ds().is_ok_and(|d| d.selected_guide().is_some()) {
                     entries.splice(0..0, [(tr("Remove guide"), "guide.remove"), ("-", "")]);

From c73ff432cb33a9c99acf750391a08fa7ff8e8cfa Mon Sep 17 00:00:00 2001
From: Mojtaba Jafarzadeh <mojtabajafarzadeh@icloud.com>
Date: Mon, 26 Oct 2026 11:18:17 +0330
Subject: [PATCH 36/59] ui: rustfmt the context-menu instance check (CI gate
 fix)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 crates/ui-egui/src/menus.rs | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/crates/ui-egui/src/menus.rs b/crates/ui-egui/src/menus.rs
index d65dd246..d8f5bc1b 100644
--- a/crates/ui-egui/src/menus.rs
+++ b/crates/ui-egui/src/menus.rs
@@ -1021,9 +1021,12 @@ pub fn popups(app: &mut FigApp, ctx: &egui::Context) {
                 }
                 // An instance's actions reach its main component: replace "Create component" with
                 // "Go to main component" (as in Figma's context menu).
-                if app.session.doc().ok().is_some_and(|doc| {
-                    ids.iter().any(|i| doc.node(*i).is_some_and(|n| matches!(n.kind, figcraft_doc::NodeKind::Instance { .. })))
-                }) && let Some(at) = entries.iter().position(|e| e.1 == "component.create")
+                if app
+                    .session
+                    .doc()
+                    .ok()
+                    .is_some_and(|doc| ids.iter().any(|i| doc.node(*i).is_some_and(|n| matches!(n.kind, figcraft_doc::NodeKind::Instance { .. }))))
+                    && let Some(at) = entries.iter().position(|e| e.1 == "component.create")
                 {
                     entries[at] = (tr("Go to main component"), "component.goToMain");
                 }

From c9f834f13c001d774d91bcef88489d25e15a95f6 Mon Sep 17 00:00:00 2001
From: Mojtaba Jafarzadeh <mojtabajafarzadeh@icloud.com>
Date: Mon, 26 Oct 2026 11:35:35 +0330
Subject: [PATCH 37/59] ui: drop an unused variable in the key-binding test (CI
 gate fix)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 crates/ui-egui/src/live_share_tests.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/ui-egui/src/live_share_tests.rs b/crates/ui-egui/src/live_share_tests.rs
index edef3acc..a2ac63c2 100644
--- a/crates/ui-egui/src/live_share_tests.rs
+++ b/crates/ui-egui/src/live_share_tests.rs
@@ -517,7 +517,7 @@ fn a_key_typed_for_one_server_is_not_sent_to_another() {
     h.app.session.execute("pref.publishServer", &json!({"url": "wss://other.example/"})).unwrap();
     h.frames(2);
     let shapes = open(&mut h);
-    let shapes = click(&mut h, &shapes, "Start sharing");
+    click(&mut h, &shapes, "Start sharing");
     assert_eq!(script.lock().unwrap().published.last().unwrap().key, None, "the old server's key is not sent to the new server");
 }
 

From acdc71453794424a213d359782cc2a2d270dfe46 Mon Sep 17 00:00:00 2001
From: Ridzzz0Alam <ridwan0gts@gmail.com>
Date: Mon, 26 Oct 2026 10:26:27 +0100
Subject: [PATCH 38/59] M3: an instance-swap property's default menu scrolls
 (#1338)

On a main component's Properties row, the default of an instance-swap
property opened a menu of every component in the file at full height, so
in a file with many components (an icon library) the bottom ones ran off
the screen and couldn't be picked. The menu now scrolls past 320 pt like
the instance's swap menu, is at least 200 pt wide, ticks the current
default and is named for assistive technology.
---
 crates/ui-egui/src/component_panel.rs         |  19 ++-
 .../src/component_swap_default_tests.rs       | 118 ++++++++++++++++++
 crates/ui-egui/src/lib.rs                     |   2 +
 docs/components-parity.md                     |   5 +-
 4 files changed, 136 insertions(+), 8 deletions(-)
 create mode 100644 crates/ui-egui/src/component_swap_default_tests.rs

diff --git a/crates/ui-egui/src/component_panel.rs b/crates/ui-egui/src/component_panel.rs
index 06a0385c..54bc0974 100644
--- a/crates/ui-egui/src/component_panel.rs
+++ b/crates/ui-egui/src/component_panel.rs
@@ -338,13 +338,20 @@ fn properties_ui(app: &mut FigApp, ui: &mut Ui, doc: &Document, owner: NodeId) {
                 PropDef::InstanceSwap { default, .. } => {
                     let label = doc.node(*default).map(|n| n.name.clone()).unwrap_or_else(|| tr("Missing").into());
                     let resp = widgets::dropdown(ui, &label, 84.0, None);
-                    menu_popup(&resp).show(|ui| {
-                        for (c, name) in comps.iter() {
-                            if menu_item(ui, name, "") {
-                                app.run("component.editProperty", json!({"id": owner, "name": k, "default": c.0}));
-                                ui.close();
+                    crate::a11y::combo(&resp, k, &label, crate::a11y::menu_open(&resp));
+                    // A file with many components (an icon library) scrolls instead of running off the screen.
+                    menu_popup(&resp).width(200.0).show(|ui| {
+                        egui::ScrollArea::vertical().max_height(320.0).show(ui, |ui| {
+                            for (c, name) in comps.iter() {
+                                let current = c == default;
+                                if menu_item(ui, &format!("{}{name}", if current { "✓ " } else { "" }), "") {
+                                    if !current {
+                                        app.run("component.editProperty", json!({"id": owner, "name": k, "default": c.0}));
+                                    }
+                                    ui.close();
+                                }
                             }
-                        }
+                        });
                     });
                 }
                 PropDef::Variant { .. } | PropDef::Slot { .. } => {}
diff --git a/crates/ui-egui/src/component_swap_default_tests.rs b/crates/ui-egui/src/component_swap_default_tests.rs
new file mode 100644
index 00000000..50b06b8b
--- /dev/null
+++ b/crates/ui-egui/src/component_swap_default_tests.rs
@@ -0,0 +1,118 @@
+//! The default of a main component's instance-swap property, driven through egui headless: with
+//! more components than fit on the screen (an icon library), its menu scrolls, so the last one can
+//! be picked (#1338).
+
+use egui::accesskit::{Node, Role};
+use egui::{Event, MouseWheelUnit, Pos2, TouchPhase, pos2, vec2};
+use figcraft_doc::{NodeId, NodeKind, PropDef};
+use figcraft_engine::Session;
+use serde_json::json;
+
+use crate::layers_drag_tests::Ui;
+
+fn id(v: serde_json::Value) -> NodeId {
+    NodeId(v["id"].as_u64().unwrap())
+}
+
+/// A selected "Button" component whose instance-swap property "Icon" defaults to "Heart", then 80
+/// more components, the last "Zebra". Returns (ui, button, zebra).
+fn setup() -> (Ui, NodeId, NodeId) {
+    let mut s = Session::new();
+    let mut icon = |name: &str, k: usize| {
+        let f =
+            id(s.execute("frame.create", &json!({"x": (k % 20) * 40, "y": 200 + (k / 20) * 40, "width": 24, "height": 24, "name": name})).unwrap());
+        id(s.execute("component.create", &json!({"ids": [f]})).unwrap())
+    };
+    let heart = icon("Heart", 0);
+    let mut zebra = heart;
+    for k in 1..=80 {
+        zebra = icon(&if k == 80 { "Zebra".to_string() } else { format!("Glyph {k}") }, k);
+    }
+    let f = id(s.execute("frame.create", &json!({"x": 0, "y": 0, "width": 120, "height": 40, "name": "Button"})).unwrap());
+    let nested = id(s.execute("instance.create", &json!({"component": heart, "x": 8, "y": 8, "parent": f})).unwrap());
+    let button = id(s.execute("component.create", &json!({"ids": [f]})).unwrap());
+    s.execute("component.addProperty", &json!({"id": button, "name": "Icon", "type": "instanceSwap", "default": heart, "layer": nested})).unwrap();
+    s.execute("select.set", &json!({"ids": [button]})).unwrap();
+    let u = Ui::new(s);
+    u.ctx.enable_accesskit();
+    (u, button, zebra)
+}
+
+fn tree(u: &mut Ui) -> Vec<Node> {
+    u.frame_output(vec![]).platform_output.accesskit_update.unwrap().nodes.into_iter().map(|(_, n)| n).collect()
+}
+
+fn centre(n: &Node) -> Pos2 {
+    let b = n.bounds().unwrap();
+    pos2(((b.x0 + b.x1) / 2.0) as f32, ((b.y0 + b.y1) / 2.0) as f32)
+}
+
+fn click(u: &mut Ui, at: Pos2) {
+    u.button(at, true);
+    u.button(at, false);
+}
+
+/// Turn the mouse wheel down by `dy` points over `at`, and let the scroll settle.
+fn wheel(u: &mut Ui, at: Pos2, dy: f32) {
+    let wheel = Event::MouseWheel {
+        unit: MouseWheelUnit::Point,
+        source: egui::MouseWheelSource::Unknown,
+        delta: vec2(0.0, -dy),
+        phase: TouchPhase::Move,
+        modifiers: Default::default(),
+    };
+    u.frame(vec![Event::PointerMoved(at), wheel]);
+    for _ in 0..30 {
+        u.frame(vec![]);
+    }
+}
+
+fn swap_default(u: &Ui, button: NodeId) -> Option<NodeId> {
+    match u.app.session.ds().ok()?.doc.node(button).map(|n| &n.kind) {
+        Some(NodeKind::Component { props, .. }) => match props.get("Icon") {
+            Some(PropDef::InstanceSwap { default, .. }) => Some(*default),
+            _ => None,
+        },
+        _ => None,
+    }
+}
+
+/// The default's dropdown on the "Icon" property row, scrolled into view in the Design panel.
+fn default_combo(u: &mut Ui) -> Option<Node> {
+    for _ in 0..20 {
+        let combo = tree(u).into_iter().find(|n| n.role() == Role::ComboBox && n.label() == Some("Icon"))?;
+        if centre(&combo).y < 860.0 {
+            return Some(combo);
+        }
+        wheel(u, pos2(1300.0, 500.0), 100.0);
+    }
+    None
+}
+
+#[test]
+fn the_default_menu_scrolls_to_its_last_component() {
+    let (mut u, button, zebra) = setup();
+    let combo = default_combo(&mut u).expect("the Icon property has a dropdown for its default");
+    assert_eq!(combo.value(), Some("Heart"));
+    // Layer rows share the names; the menu's items are the ones that weren't there before it opened.
+    let before: Vec<Pos2> = tree(&mut u).iter().filter(|n| n.label().is_some_and(|l| l == "Zebra" || l == "Glyph 1")).map(centre).collect();
+    click(&mut u, centre(&combo));
+    let item = |u: &mut Ui, name: &str| tree(u).into_iter().find(|n| n.label() == Some(name) && !before.contains(&centre(n)));
+    let top = centre(&item(&mut u, "Glyph 1").expect("the menu lists the components"));
+    let bottom = centre(&item(&mut u, "Zebra").expect("the menu lists the last component"));
+    assert!(bottom.y > 900.0, "80 components don't fit on the screen: Zebra at {bottom:?}");
+    // The menu is capped and scrolls: wheel over it to the end of the list, and pick Zebra.
+    let mut at = bottom;
+    for _ in 0..40 {
+        wheel(&mut u, top, 200.0);
+        let next = centre(&item(&mut u, "Zebra").expect("the menu stays open while it scrolls"));
+        if next == at {
+            break;
+        }
+        at = next;
+    }
+    assert!(at.y < 880.0, "the menu scrolls Zebra onto the screen: at {at:?}");
+    assert!(at.y - top.y < 400.0, "Zebra ends up inside the capped menu, near its top row: {top:?} → {at:?}");
+    click(&mut u, at);
+    assert_eq!(swap_default(&u, button), Some(zebra), "picking the last component makes it the default");
+}
diff --git a/crates/ui-egui/src/lib.rs b/crates/ui-egui/src/lib.rs
index c11bf985..e5bc32a0 100644
--- a/crates/ui-egui/src/lib.rs
+++ b/crates/ui-egui/src/lib.rs
@@ -106,6 +106,8 @@ mod comments_tests;
 #[cfg(test)]
 mod component_props_reorder_tests;
 #[cfg(test)]
+mod component_swap_default_tests;
+#[cfg(test)]
 mod context_menu_tests;
 #[cfg(test)]
 mod corner_individual_tests;
diff --git a/docs/components-parity.md b/docs/components-parity.md
index 9489d440..7b92b061 100644
--- a/docs/components-parity.md
+++ b/docs/components-parity.md
@@ -1,6 +1,6 @@
 # Components, variants, styles and variables parity
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-24 · **Change:** minor (variables on a text style's fields from the style editor; instance-swap properties in the component playground; duplicating or Alt-dragging a main component makes an instance of it (#892); a bound colour variable's alpha applies once (#802); variables import reads `variables` outside `meta` and warns when it imports none (#790); variant properties reorder by drag; library files saved right after a read are read again; Hide when publishing note corrected; size and resizing overrides of layers inside instances (#731); variables export in the browser as a download; core editor leftovers: component playground, variables inside styles; layers and assets panels behaviour suite and fixes; extended collections tail; styles and variables behaviour suite and fixes; components behaviour suite and fixes; team libraries on the server, library usage and swapping a library; extended collections, variables import/export, gradient stops and variant properties bound to variables) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (an instance-swap property's default menu scrolls (#1338); variables on a text style's fields from the style editor; instance-swap properties in the component playground; duplicating or Alt-dragging a main component makes an instance of it (#892); a bound colour variable's alpha applies once (#802); variables import reads `variables` outside `meta` and warns when it imports none (#790); variant properties reorder by drag; library files saved right after a read are read again; Hide when publishing note corrected; size and resizing overrides of layers inside instances (#731); variables export in the browser as a download; core editor leftovers: component playground, variables inside styles; layers and assets panels behaviour suite and fixes; extended collections tail; styles and variables behaviour suite and fixes; components behaviour suite and fixes; team libraries on the server, library usage and swapping a library; extended collections, variables import/export, gradient stops and variant properties bound to variables) · **Target:** Figma Design (desktop app 126.10.7)
 
 Design systems are why teams adopt Figma. **Components: breadth ~96%, ready ~72%. Styles and
 variables: breadth ~95%, ready ~76% (estimated).** QA'd with a synthetic design system of ~300
@@ -21,7 +21,7 @@ accounts).
 | Switching variants keeps overrides where names match and both variants had the same value; text layers keep theirs | done | |
 | Default variant: the top-left one (new instances, Assets thumbnail, generated code) | done | |
 | Variant property order (names rewritten), duplicate combinations reported | done | drag a property in the Properties section to reorder it, one undo step (#679), or `component.editProperty {index}` |
-| Properties: boolean, text, instance swap (preferred values), variant | done | |
+| Properties: boolean, text, instance swap (preferred values), variant | done | every component menu scrolls past 320 pt, the default of an instance-swap property's too (#1338); no search in them yet |
 | Slots (preferred components, fill menu, kept across updates) | done | Figma 2025 feature |
 | Exposed nested instances | done | hidden ones hide their properties |
 | Descriptions | done | |
@@ -77,6 +77,7 @@ updates with overrides kept: `library_tests.rs`, `components_scale_tests.rs`.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-26 | minor | An instance-swap property's default menu scrolls (#1338): on the main component's Properties row the menu listed every component in the file at full height, so in a file with many (an icon library) the bottom ones ran off the screen and couldn't be picked. It now scrolls past 320 pt like the instance's swap menu, is at least 200 pt wide, ticks the current default and is named for assistive technology (`component_swap_default_tests`). Left: searching these menus. Numbers unchanged. |
 | 2026-10-24 | minor | Variables on a text style's fields from the style editor: the font and font style menus start with Apply variable (string variables), and the size, line height and letter spacing fields show a variable button on hover (number variables). A bound field shows its variable in place of the value; a click on it picks another variable and its detach button unbinds it (`style_picker_tests`). Left: the other effect and grid fields (commands only), library variables in the picker. Numbers unchanged. |
 | 2026-10-23 | minor | Instance-swap properties in the component playground: the Inspect tab's Playground shows a dropdown for each, with the same menu as the Design panel's (the property's preferred components first, then every component in the file). The component picked changes the preview and the code only, never the file. Left: slots in the playground. Numbers unchanged. |
 | 2026-10-20 | minor | A main component's copy within its file is an instance of it (#892): Duplicate (`edit.duplicate`) and Alt-drag on the canvas made a second main; they now place an instance where the copy went (same offset, the instance's default name, selected), as Copy then Paste already did. A variant duplicated in its set stays a new variant. |

From a648700fcceb3eb3f0a2021da93a2b9aba0b5f3f Mon Sep 17 00:00:00 2001
From: Ridzzz0Alam <ridwan0gts@gmail.com>
Date: Mon, 26 Oct 2026 11:04:01 +0100
Subject: [PATCH 39/59] M1: Save no longer overwrites changes another app made
 to the open file (#1330)

With a file open in the desktop app, figcraft-cli could change it on disk;
the next Save (or auto-save) wrote the app's copy over it and said
"Saved", losing the CLI's changes.

Each tab now remembers its file's size and modification time when it
opens, reverts or saves it (the Stamp library files already use), and
Save and auto-save refuse while the file on disk differs, pointing to
Revert to saved or Save as. Scripts pass `file.save {overwrite: true}`.
Save as and saves to an explicit path are unchanged.
---
 crates/engine/src/cmd/file.rs                | 39 +++++++---
 crates/engine/src/lib.rs                     | 11 +++
 crates/engine/src/library.rs                 |  8 +--
 crates/engine/src/save_disk_changes_tests.rs | 76 ++++++++++++++++++++
 docs/file-format-parity.md                   |  5 +-
 5 files changed, 124 insertions(+), 15 deletions(-)
 create mode 100644 crates/engine/src/save_disk_changes_tests.rs

diff --git a/crates/engine/src/cmd/file.rs b/crates/engine/src/cmd/file.rs
index 2379026b..2511d92f 100644
--- a/crates/engine/src/cmd/file.rs
+++ b/crates/engine/src/cmd/file.rs
@@ -56,7 +56,7 @@ pub fn specs() -> Vec<CommandSpec> {
         spec!(
             "file.save",
             "Save",
-            "{path?} (programmatic saves need a path the first time); a .fig path writes an experimental export copy of the shown document with `warnings`, keeping the native path, unsaved changes and version preview",
+            "{path?, overwrite? (replace what another app wrote to the file since it was opened or saved: without it that save is refused)} (programmatic saves need a path the first time); a .fig path writes an experimental export copy of the shown document with `warnings`, keeping the native path, unsaved changes and version preview",
             false,
             save
         ),
@@ -167,6 +167,7 @@ pub fn specs() -> Vec<CommandSpec> {
                     .with_versions(loaded.versions)
                     .with_branches(loaded.branches)
                     .with_images_left_in_file(&path, loaded.images_past_budget);
+                slot.note_on_disk();
             }
             // Edits on its branch tabs are reverted too.
             crate::branches::close_tabs(s, uid, None);
@@ -958,12 +959,12 @@ fn open(s: &mut Session, p: &Value) -> Result<Value> {
     }
     let summary = import_summary(&loaded.doc);
     let images_left_out = if native { loaded.images_past_budget } else { 0 };
-    s.docs.push(
-        DocState::new(loaded.doc, native.then(|| path.clone()))
-            .with_versions(loaded.versions)
-            .with_branches(loaded.branches)
-            .with_images_left_in_file(&path, images_left_out),
-    );
+    let mut ds = DocState::new(loaded.doc, native.then(|| path.clone()))
+        .with_versions(loaded.versions)
+        .with_branches(loaded.branches)
+        .with_images_left_in_file(&path, images_left_out);
+    ds.note_on_disk();
+    s.docs.push(ds);
     s.active = s.docs.len() - 1;
     let mut out = json!({"index": s.active, "summary": summary});
     out[if warnings { "warnings" } else { "repairs" }] = json!(loaded.issues);
@@ -1053,7 +1054,9 @@ impl FileSnapshot {
         };
         let path = self.path.as_deref().ok_or(EngineError::NoDocument)?;
         refuse_dropping_images(ds, path)?;
+        refuse_overwriting_changes(ds, path)?;
         write(path, bytes)?;
+        ds.note_on_disk();
         // The history or branches may have changed since: then they still count as unsaved.
         if ds.revision == self.revision {
             ds.versions_changed = false;
@@ -1075,6 +1078,17 @@ fn refuse_dropping_images(ds: &DocState, path: &str) -> Result<()> {
     }
 }
 
+/// Saving over the tab's own file would lose what another app wrote to it since (#1330).
+fn refuse_overwriting_changes(ds: &DocState, path: &str) -> Result<()> {
+    match (&ds.on_disk, crate::library::stat(path)) {
+        (Some(was), Ok(now)) if now != *was => Err(EngineError::Other(format!(
+            "{} wasn't saved: the file changed on disk since it was opened or saved here (another app or figcraft-cli wrote to it), and saving would replace those changes. Revert to saved to load them, or Save as to keep this version as well.",
+            file_stem(path)
+        ))),
+        _ => Ok(()),
+    }
+}
+
 /// The branch tabs of the file in tab `uid` were saved with it.
 fn branch_tabs_saved(s: &mut Session, uid: u64) {
     for tab in s.docs.iter_mut().filter(|d| d.branch_of.as_ref().is_some_and(|(m, _)| *m == uid)) {
@@ -1137,6 +1151,7 @@ fn save_to(s: &mut Session, path: Option<String>) -> Result<Value> {
     write(&path, &bytes)?;
     ds.doc = snapshot.doc;
     ds.path = Some(path.clone());
+    ds.note_on_disk();
     mark_saved(s, &json!({}))?;
     remember(s, &path);
     Ok(json!({"path": path, "bytes": bytes.len()}))
@@ -1157,13 +1172,19 @@ fn save(s: &mut Session, p: &Value) -> Result<Value> {
     if let Some(path) = string(p, "path") {
         return save_to(s, Some(path));
     }
-    match s.docs.get(crate::branches::file_tab(s)).ok_or(EngineError::NoDocument)?.path.clone() {
+    let ds = s.docs.get(crate::branches::file_tab(s)).ok_or(EngineError::NoDocument)?;
+    match ds.path.clone() {
         // Earlier builds wrote native data under a .fig name: never overwrite that file with an export.
         Some(path) if ext(&path) == "fig" => {
             s.request_ui("dialog.saveAs", json!({}));
             Err(EngineError::Disabled("file.save".into(), "the saved path ends in .fig: choose Save as or pass `path`".into()))
         }
-        Some(path) => save_to(s, Some(path)),
+        Some(path) => {
+            if p.get("overwrite").and_then(Value::as_bool) != Some(true) {
+                refuse_overwriting_changes(ds, &path)?;
+            }
+            save_to(s, Some(path))
+        }
         None => {
             s.request_ui("dialog.saveAs", json!({}));
             Err(EngineError::Disabled("file.save".into(), "the file has no path yet: pass `path`".into()))
diff --git a/crates/engine/src/lib.rs b/crates/engine/src/lib.rs
index 548f96ed..0670946b 100644
--- a/crates/engine/src/lib.rs
+++ b/crates/engine/src/lib.rs
@@ -375,6 +375,9 @@ pub struct DocState {
     /// [`cmd::edit::Duplicated`]; not saved).
     pub(crate) last_duplicate: Option<cmd::edit::Duplicated>,
     images_left_in_file: Option<(String, usize)>,
+    /// The file on disk as this tab last read or wrote it: a save refuses to replace what another
+    /// app (figcraft-cli, say) wrote to it since (#1330).
+    on_disk: Option<library::Stamp>,
 }
 
 /// A version shown on the canvas in place of the document: read-only until it's restored or the
@@ -438,6 +441,7 @@ impl DocState {
             view_from_prefs: false,
             last_duplicate: None,
             images_left_in_file: None,
+            on_disk: None,
         };
         st.zoom_to_fit();
         st
@@ -448,6 +452,11 @@ impl DocState {
         self
     }
 
+    /// The tab's file now holds what this tab read or wrote.
+    pub(crate) fn note_on_disk(&mut self) {
+        self.on_disk = self.path.as_deref().and_then(|p| library::stat(p).ok());
+    }
+
     pub fn images_lost_saving_to(&self, path: &str) -> Option<usize> {
         self.images_left_in_file.as_ref().filter(|(file, _)| file_access::same_file(file, path)).map(|(_, count)| *count)
     }
@@ -1874,6 +1883,8 @@ mod rotated_select_tests;
 #[cfg(test)]
 mod rotation_origin_tests;
 #[cfg(test)]
+mod save_disk_changes_tests;
+#[cfg(test)]
 mod save_format_tests;
 #[cfg(test)]
 mod scale_tool_tests;
diff --git a/crates/engine/src/library.rs b/crates/engine/src/library.rs
index cc6c3856..40d6b3ca 100644
--- a/crates/engine/src/library.rs
+++ b/crates/engine/src/library.rs
@@ -439,9 +439,9 @@ pub fn publish(doc: &Document, prev: Option<&PublishedLibrary>, sel: &Selection,
     Ok(PublishedLibrary { manifest, doc: Arc::new(snap) })
 }
 
-/// When a library file was last read.
+/// When a file was last read: its length and modification time (also a document's own file, #1330).
 #[derive(Clone, Debug, PartialEq)]
-struct Stamp {
+pub(crate) struct Stamp {
     len: u64,
     modified: Option<std::time::SystemTime>,
 }
@@ -545,7 +545,7 @@ fn now() -> Option<std::time::SystemTime> {
 }
 
 #[cfg(not(target_arch = "wasm32"))]
-fn stat(path: &str) -> std::result::Result<Stamp, String> {
+pub(crate) fn stat(path: &str) -> std::result::Result<Stamp, String> {
     let m = crate::file_access::metadata(path).map_err(|e| e.to_string())?;
     if !m.is_file() {
         return Err(format!("{path} is not a file"));
@@ -554,7 +554,7 @@ fn stat(path: &str) -> std::result::Result<Stamp, String> {
 }
 
 #[cfg(target_arch = "wasm32")]
-fn stat(_path: &str) -> std::result::Result<Stamp, String> {
+pub(crate) fn stat(_path: &str) -> std::result::Result<Stamp, String> {
     Err(NO_FILES.into())
 }
 
diff --git a/crates/engine/src/save_disk_changes_tests.rs b/crates/engine/src/save_disk_changes_tests.rs
new file mode 100644
index 00000000..807daa9e
--- /dev/null
+++ b/crates/engine/src/save_disk_changes_tests.rs
@@ -0,0 +1,76 @@
+//! Saving never silently replaces what another app wrote to the open file since it was opened or
+//! saved here (#1330): Save and auto-save refuse, `overwrite` and Revert to saved settle it.
+
+use serde_json::json;
+
+use crate::Session;
+use crate::cmd::file::FileSnapshot;
+
+fn temp_file(name: &str) -> String {
+    let dir = std::env::temp_dir().join(format!("figcraft-disk-changes-{}-{name}", std::process::id()));
+    std::fs::create_dir_all(&dir).unwrap();
+    dir.join("TESTE.figcraft").to_string_lossy().into_owned()
+}
+
+/// What the file on disk names its first page.
+fn page_on_disk(path: &str) -> String {
+    let mut s = Session::new();
+    s.execute("file.open", &json!({"path": path})).unwrap();
+    let ds = s.ds().unwrap();
+    ds.doc.node(ds.page).unwrap().name.clone()
+}
+
+/// The app has `path` open with an unsaved edit, after figcraft-cli renamed its page on disk.
+fn app_and_cli(path: &str) -> Session {
+    let mut setup = Session::new();
+    setup.execute("shape.rectangle", &json!({"x": 0, "y": 0, "width": 10, "height": 10})).unwrap();
+    setup.execute("file.save", &json!({"path": path})).unwrap();
+    let mut app = Session::new();
+    app.execute("file.open", &json!({"path": path})).unwrap();
+    let mut cli = Session::new();
+    cli.execute("file.open", &json!({"path": path})).unwrap();
+    cli.execute("page.rename", &json!({"name": "CLI VENCEU"})).unwrap();
+    cli.execute("file.save", &json!({})).unwrap();
+    app.execute("shape.rectangle", &json!({"x": 20, "y": 0, "width": 10, "height": 10})).unwrap();
+    app
+}
+
+#[test]
+fn saving_over_changes_made_on_disk_is_refused_until_asked() {
+    let path = temp_file("save");
+    let mut app = app_and_cli(&path);
+    let err = app.execute("file.save", &json!({})).unwrap_err().to_string();
+    assert!(err.contains("changed on disk"), "{err}");
+    assert_eq!(page_on_disk(&path), "CLI VENCEU", "the CLI's change is still in the file");
+    assert!(app.ds().unwrap().is_dirty(), "the app's edit stays unsaved");
+    // Asked to, the save replaces it; from then on the file is the app's again.
+    app.execute("file.save", &json!({"overwrite": true})).unwrap();
+    assert_ne!(page_on_disk(&path), "CLI VENCEU");
+    app.execute("shape.rectangle", &json!({"x": 40, "y": 0, "width": 10, "height": 10})).unwrap();
+    app.execute("file.save", &json!({})).unwrap();
+    let _ = std::fs::remove_file(&path);
+}
+
+#[test]
+fn reverting_loads_the_changes_made_on_disk_and_saves_again() {
+    let path = temp_file("revert");
+    let mut app = app_and_cli(&path);
+    app.execute("file.revert", &json!({})).unwrap();
+    let ds = app.ds().unwrap();
+    assert_eq!(ds.doc.node(ds.page).unwrap().name, "CLI VENCEU");
+    app.execute("shape.rectangle", &json!({"x": 20, "y": 0, "width": 10, "height": 10})).unwrap();
+    app.execute("file.save", &json!({})).unwrap();
+    assert_eq!(page_on_disk(&path), "CLI VENCEU", "saved on top of the CLI's change");
+    let _ = std::fs::remove_file(&path);
+}
+
+#[test]
+fn auto_save_leaves_changes_made_on_disk_alone() {
+    let path = temp_file("auto");
+    let mut app = app_and_cli(&path);
+    let snapshot = FileSnapshot::of(app.ds().unwrap());
+    let bytes = snapshot.encode().unwrap();
+    assert!(snapshot.save(&mut app, &bytes).is_err());
+    assert_eq!(page_on_disk(&path), "CLI VENCEU");
+    let _ = std::fs::remove_file(&path);
+}
diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index 48cacbbb..b834ed9b 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -1,6 +1,6 @@
 # File format parity
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-25 · **Change:** minor (`.sketch` import, best effort, Sketch 48 and newer; the PNG row names ignore overlapping layers and where include bounding box is offered; the Fonts table's missing-font row describes the Missing fonts window; `.figcraft` carries the file kind (boards); `.fig` import: resized instances and variable modes by asset key; atomic saves; auto-save; SVG export clip of nested frames; SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source; REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732)) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (Save and auto-save don't replace changes another app made to the open file (#1330); `.sketch` import, best effort, Sketch 48 and newer; the PNG row names ignore overlapping layers and where include bounding box is offered; the Fonts table's missing-font row describes the Missing fonts window; `.figcraft` carries the file kind (boards); `.fig` import: resized instances and variable modes by asset key; atomic saves; auto-save; SVG export clip of nested frames; SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source; REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732)) · **Target:** Figma Design (desktop app 126.10.7)
 
 Every format Figma reads or writes, with FigCraft's support. Sources: `Info.plist` of
 `/Applications/Figma.app` (document types only; nothing inside the bundle's code was read), Figma's
@@ -21,7 +21,7 @@ and prototype interactions are still unchecked there.
 | `.sketch` (Sketch 48 and newer) | import (file browser ▸ Import or drop, desktop app too; converted to a Figma file, symbols as components; per the help center) | **yes, best effort** (`file.open`, `file.import`, drop, CLI, MCP; Open With from Finder, Explorer and Linux file managers once installed; recent files show its `previews/preview.png`) | no (out of scope) | zip + JSON read from the public format description; Sketch 43–47 (text as binary property lists) and older (SQLite) files are refused with a message to resave them in a newer Sketch. Pages, artboards as frames with their background, groups; Sketch 2025 and newer: frames (clipping or not) with their style, graphics, stacks as auto layout (direction, gap, alignment, padding, wrap, hug/fill sizing, items ignoring the stack), corners in the style (rounded, smooth with its smoothing; angled, inside square and inside arc as paths), pins and sizing, per-side borders, lists of blurs (progressive background blurs, glass), inner shadows in the shadow list, tints (a graphic's, group's or instance's fill colouring its layers, and colour overrides), text colour and visibility overrides, text sized by its sizing; rectangles with corner radii, ovals, stars and polygons while their points are the generated ones, paths as editable vector networks, shape groups as their shape, as one compound path (children without an operation, by the group's winding rule) or as boolean operations (mixed operations nested from the left); open paths filled as if closed, edited ovals and rectangles as paths, bitmaps (with their colour adjustments as image filters), slices, hotspots; transforms (rotation, flips after it), resizing constraints; fills (solid, gradients with Sketch's geometry, image patterns), borders (the first enabled border's width and position), shadows, inner shadows, layer and background blurs, opacity and blend modes; clipping masks (an outline mask that shows its own style draws a copy under itself, as Sketch does; alpha masks only mask; broken mask chains wrapped), progressive opacity (Fade) as an alpha mask of its gradient; text with styled runs (UTF-16 ranges), paragraph and vertical alignment, lines placed by Sketch's line spacing behaviour, box sizing, fonts found by their PostScript names among the installed ones (else the family read from the name), variable font axes, Sketch's natural line (ascent and descent rounded, no line gap, a fifth more for classic Mac fonts) for text without a fixed line height; symbols as components (library copies on a page of their own) and instances carrying their masters' layers with overrides (text, nested swaps and hiding, images, layer and text styles, nested paths), laid out for their size the way Sketch does it (proportional sharing per pins from format 110, scaling before) and still live; master backgrounds in instances only where Sketch shows them; Apple's system fonts found under the names designs use, with the platform's tracking kept as letter spacing; shared layer styles as paint (fills, border colours) and effect styles, shared text styles as text styles; Color Variables (also library ones) as colour variables with bindings; prototype links, flow starts, export options, layout and square grids (hidden, as Sketch shows them only in its layout view). Instances of a stack laid out at their size and texts an override changed measured again on open. Warnings: noise fills, motion and zoom blurs (drawn as plain blurs), fonts embedded with their data (not used), Smart Layout (kept as laid out), locked overrides, scaled instances. Tested on fixtures built in code (`crates/format/src/sketch/*_tests.rs`, fuzzed) and locally (`FIGCRAFT_SKETCH_SAMPLES`) on one real Sketch 50 file and the public Apache-2.0 IBM Carbon Design Kit saved by Sketch 68 and 83 (70,000 layers open in ~3 s, debug build; its edition saved by Sketch 47 is refused, as it should be); compared artboard by artboard with Sketch 2026's own renders (`FIGCRAFT_SKETCHTOOL`, black-box): the Sketch 50 file's 73 artboards differ in at most 2.3% of their pixels (0.8% on average) (text metrics, fonts FigCraft doesn't find, antialiasing), Carbon 11's 69 1.1% on average and at most 4.4% (text in IBM Plex, which the file embeds and FigCraft doesn't use yet), a Sketch 64 file's 65 artboards 2.1% on average, a Sketch 2026 showcase file's 16 frames 0.9% on average (at most 1.9%) | 5–10 (Smart Layout as auto layout, motion and zoom blurs, several borders of different widths; fonts embedded in the file once `.figcraft` documents can carry fonts: until then they would only last the session) |
 | `.jam` (whiteboards), `.deck` (Slides) | native to other Figma products | no | no | `.jam`: not read or written (boards are FigCraft files, see [boards-parity](boards-parity.md)); `.deck` out of scope | — |
 | REST API file JSON (`GET /v1/files/:key`) + local variables JSON + `images/` folder | the API's output | **yes** (`file.open`, `file.import`, CLI) | no | pages, layer tree, geometry, paints, strokes, effects, text runs, vectors, auto layout (sizing modes left out read as hug, as documented; grid track sizes from `gridColumnsSizing` / `gridRowsSizing`: px, fr, auto, `minmax(0, 1fr)`, `repeat()`), constraints, grids, components, sets, instances with overrides (sizes and resizing included), component properties, slots (`SLOT` layers bound to their slot property; an instance's slot keeps its content as the instance's own unless its property value is the main's default content; slot limits and preferred components are warnings), styles, prototyping (incl. conditionals and variable modes), variables with modes, aliases, scopes and bindings, image adjustments (the same tint sign as `.fig`); the import report after opening; warnings for what's skipped (video triggers and actions, modifier keys). Unit tests in `crates/format/src/rest/*_tests.rs` | — |
-| `.figcraft` (ours: zip of `document.json` + images, versions inside) | — | yes | yes | streamed JSON, 50k layers save ~0.09 s / load ~0.16 s (`cargo xtask bench`); old files keep opening (`large_tests.rs`); saves write a unique staging file and rename it into place (#284); optional auto-save of files with a path (`pref.autoSave`, #305); `kind: "board"` marks a board (left out for design files, so files from before boards are design files; the home screen reads it for the file's mark); board objects keep their `board` metadata on the layer; Dev Mode measurements are kept on the layer they start from (`measurements: [{to} | {side}]`, left out when there are none, so older files open with none) | — |
+| `.figcraft` (ours: zip of `document.json` + images, versions inside) | — | yes | yes | streamed JSON, 50k layers save ~0.09 s / load ~0.16 s (`cargo xtask bench`); old files keep opening (`large_tests.rs`); saves write a unique staging file and rename it into place (#284); optional auto-save of files with a path (`pref.autoSave`, #305); Save and auto-save refuse to write over a file another app (figcraft-cli, say) changed since it was opened or saved here, judged by its size and modification time: Revert to saved loads those changes, Save as keeps both, `file.save {overwrite: true}` replaces them (#1330); `kind: "board"` marks a board (left out for design files, so files from before boards are design files; the home screen reads it for the file's mark); board objects keep their `board` metadata on the layer; Dev Mode measurements are kept on the layer they start from (`measurements: [{to} | {side}]`, left out when there are none, so older files open with none) | — |
 | Local library files | team libraries in the cloud | yes (enable a `.figcraft` as a library) | yes (publish) | per-asset versions, updates with overrides kept | see [collaboration-parity](collaboration-parity.md) |
 
 ## Import (place / paste / drop)
@@ -166,6 +166,7 @@ each.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-26 | minor | Changes made to the open file by another app are no longer lost on save (#1330): the app now remembers the file's size and modification time when it opens, reverts or saves it, and Save and auto-save refuse while the file on disk differs, with a message pointing to Revert to saved or Save as (the tab stays unsaved; closing it stays open). Scripts pass `file.save {overwrite: true}` to replace the file anyway; Save as and a save to an explicit `path` write as before. Not detected: a change of the same size inside one modification-time tick of a coarse file system. No prompt with choices yet, and a change isn't noticed until a save (`save_disk_changes_tests`). Numbers unchanged |
 | 2026-10-25 | patch | PNG: the export settings were listed as "contents only" and "include bounding box (the layer's own box)"; the row now names ignore overlapping layers, on by default, and says that the Export section offers include bounding box for text layers (#1307), while `file.export` and `export.update` take it for any layer. Numbers unchanged |
 | 2026-10-24 | patch | Fonts: the missing-font row said "warnings only (REST import)"; it now names the Missing fonts window (#752), `text.missingFonts` and the `missing font` lines of `figcraft-cli info`. Replacing a missing font is still missing. Numbers unchanged |
 | 2026-10-24 | minor | Slices and contents only (Figma's Ignore overlapping layers): with it on, a slice inside a frame or group exports only that frame or group and the layers in it, and its Export preview shows the same; with it off, or for a slice on the page or in a section, the slice exports everything in its area as before |

From 0d7d9ebd000152eb0107b0fbf540d4b37cd48b1c Mon Sep 17 00:00:00 2001
From: Ridzzz0Alam <ridwan0gts@gmail.com>
Date: Mon, 26 Oct 2026 11:46:23 +0100
Subject: [PATCH 40/59] M1: stamp the file before reading it, so a change made
 during the read isn't missed (#1330)

Open and Revert to saved recorded the file's size and modification time after reading it: a change written in between would be stamped as already loaded and a later save would replace it. Taking the stamp first makes such a change refuse the next save instead (CodeRabbit on #1374).
---
 crates/engine/src/cmd/file.rs | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/crates/engine/src/cmd/file.rs b/crates/engine/src/cmd/file.rs
index 2511d92f..e9caaa63 100644
--- a/crates/engine/src/cmd/file.rs
+++ b/crates/engine/src/cmd/file.rs
@@ -159,6 +159,8 @@ pub fn specs() -> Vec<CommandSpec> {
         }),
         spec!("file.revert", "Revert to saved", "{}  leave the live session first, if any", false, |s, _| {
             let path = s.ds()?.path.clone().ok_or_else(|| EngineError::Disabled("file.revert".into(), "the file was never saved".into()))?;
+            // Stamped before reading: a change made during the read makes the next save refuse.
+            let on_disk = crate::library::stat(&path).ok();
             let (loaded, _) = load_path(&path, None)?;
             let i = s.active;
             let uid = s.ds()?.uid;
@@ -167,7 +169,7 @@ pub fn specs() -> Vec<CommandSpec> {
                     .with_versions(loaded.versions)
                     .with_branches(loaded.branches)
                     .with_images_left_in_file(&path, loaded.images_past_budget);
-                slot.note_on_disk();
+                slot.on_disk = on_disk;
             }
             // Edits on its branch tabs are reverted too.
             crate::branches::close_tabs(s, uid, None);
@@ -946,6 +948,8 @@ fn open(s: &mut Session, p: &Value) -> Result<Value> {
         remember(s, &path);
         return Ok(json!({"index": i}));
     }
+    // Stamped before reading: a change made during the read makes the next save refuse.
+    let on_disk = crate::library::stat(&path).ok();
     let (loaded, rest) = load_path(&path, variables.as_ref())?;
     remember(s, &path);
     let native = !rest && matches!(ext(&path).as_str(), "figcraft" | "json");
@@ -963,7 +967,7 @@ fn open(s: &mut Session, p: &Value) -> Result<Value> {
         .with_versions(loaded.versions)
         .with_branches(loaded.branches)
         .with_images_left_in_file(&path, images_left_out);
-    ds.note_on_disk();
+    ds.on_disk = on_disk.filter(|_| native);
     s.docs.push(ds);
     s.active = s.docs.len() - 1;
     let mut out = json!({"index": s.active, "summary": summary});

From b6d3e002df3fd9f125c44637bee1a32ce04d04c2 Mon Sep 17 00:00:00 2001
From: Muamer Mustafic <muamer.mustafic.ets@gmail.com>
Date: Mon, 26 Oct 2026 13:14:51 +0100
Subject: [PATCH 41/59] M4: truncated text fills its last line, keeps
 truncating when resized, and auto height takes max lines (#1375, #1376,
 #1377)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The last line shown runs on into the word wrapped after it, so the ellipsis
  fills the line ("Lorem consec…") instead of following the last whole word.
- An explicit height (node.set, transform.resize, a resize handle, fixed
  sizing) on truncating text keeps it truncating (TextData::fix_size).
- Max lines on auto-height text hugs up to that many lines and ends in an
  ellipsis; text.maxLines keeps auto height, Type settings show it as
  truncating, .fig export writes textTruncation and import keeps auto height.
- node.get reports maxLines; text.fit measures every line.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 crates/doc/src/text.rs                    | 25 ++++++++-
 crates/engine/src/cmd/arrange.rs          |  6 ++-
 crates/engine/src/cmd/props.rs            |  7 +--
 crates/engine/src/cmd/text.rs             | 24 +++++----
 crates/engine/src/inspect.rs              |  3 ++
 crates/engine/src/text_behaviour_tests.rs | 60 +++++++++++++++++++++
 crates/engine/src/textfit.rs              |  2 +
 crates/engine/src/tools.rs                |  9 ++--
 crates/format/src/fig/export.rs           |  2 +-
 crates/format/src/rest/text.rs            |  5 +-
 crates/text/src/behaviour_tests.rs        | 36 +++++++++++++
 crates/text/src/layout.rs                 | 64 ++++++++++++++++-------
 crates/text/src/tests.rs                  |  4 +-
 crates/ui-egui/src/typography.rs          | 22 +++++---
 docs/roadmap.md                           |  3 +-
 docs/target-app-parity.md                 |  6 ++-
 16 files changed, 227 insertions(+), 51 deletions(-)

diff --git a/crates/doc/src/text.rs b/crates/doc/src/text.rs
index 24d7e088..8c739920 100644
--- a/crates/doc/src/text.rs
+++ b/crates/doc/src/text.rs
@@ -417,7 +417,8 @@ pub struct TextData {
     /// line's baseline).
     #[serde(skip_serializing_if = "crate::node::is_default")]
     pub leading_trim: LeadingTrim,
-    /// Max lines when truncating (0 = as many as fit).
+    /// Max lines when truncating, or before an auto-height text ends in an ellipsis (0 = as many
+    /// as fit).
     #[serde(skip_serializing_if = "crate::node::is_default")]
     pub max_lines: u32,
     /// OpenType feature toggles (e.g. "liga": false).
@@ -510,6 +511,28 @@ impl TextData {
         self.characters.chars().count()
     }
 
+    /// Whether text that runs out of room ends in an ellipsis: a truncating box, or auto height
+    /// with a line limit (the box hugs up to `max_lines` lines).
+    pub fn truncates(&self) -> bool {
+        match self.auto_resize {
+            TextAutoResize::Truncate => true,
+            TextAutoResize::Height => self.max_lines > 0,
+            TextAutoResize::WidthAndHeight | TextAutoResize::None => false,
+        }
+    }
+
+    /// The resize mode once the box is given an explicit `width` and/or `height`: an explicit
+    /// height fixes the box, an explicit width turns auto width into auto height, and truncating
+    /// text keeps truncating.
+    pub fn fix_size(&mut self, width: bool, height: bool) {
+        self.auto_resize = match self.auto_resize {
+            _ if height && self.truncates() => TextAutoResize::Truncate,
+            _ if height => TextAutoResize::None,
+            TextAutoResize::WidthAndHeight if width => TextAutoResize::Height,
+            mode => mode,
+        };
+    }
+
     /// The style at char index `i`.
     pub fn style_at(&self, i: usize) -> &TextStyle {
         self.runs.iter().find(|r| r.start <= i && i < r.end).map(|r| &r.style).unwrap_or(&self.style)
diff --git a/crates/engine/src/cmd/arrange.rs b/crates/engine/src/cmd/arrange.rs
index 0180504c..8f8e40d2 100644
--- a/crates/engine/src/cmd/arrange.rs
+++ b/crates/engine/src/cmd/arrange.rs
@@ -562,7 +562,11 @@ pub(crate) fn resize_cmd(s: &mut Session, p: &Value) -> Result<Value> {
             n.child_layout.sizing_v = Sizing::Fixed;
         }
         if let NodeKind::Text(t) = &mut n.kind {
-            t.auto_resize = if num(p, "height").is_some() { TextAutoResize::None } else { TextAutoResize::Height };
+            if num(p, "height").is_some() {
+                t.fix_size(num(p, "width").is_some(), true);
+            } else if t.auto_resize != TextAutoResize::Truncate {
+                t.auto_resize = TextAutoResize::Height;
+            }
         }
         super::props::restore_worlds(doc, &kept)?;
     }
diff --git a/crates/engine/src/cmd/props.rs b/crates/engine/src/cmd/props.rs
index 9ee499fc..30a10393 100644
--- a/crates/engine/src/cmd/props.rs
+++ b/crates/engine/src/cmd/props.rs
@@ -461,11 +461,7 @@ pub fn apply(cmd: &str, doc: &mut Document, id: NodeId, props: &Map<String, Valu
                 resize_node(doc, id, nw, nh)?;
                 // Explicit size makes text fixed in that dimension.
                 if let Some(t) = doc.get_mut(id)?.kind.text_mut() {
-                    t.auto_resize = if is_w {
-                        if t.auto_resize == TextAutoResize::WidthAndHeight { TextAutoResize::Height } else { t.auto_resize }
-                    } else {
-                        TextAutoResize::None
-                    };
+                    t.fix_size(is_w, !is_w);
                 }
                 fix_axis(doc, id, is_w)?;
             }
@@ -1220,6 +1216,7 @@ fn set_sizing(cmd: &str, doc: &mut Document, id: NodeId, s: Sizing, horizontal:
         t.auto_resize = match (n.child_layout.sizing_h, n.child_layout.sizing_v) {
             (Sizing::Hug, _) => TextAutoResize::WidthAndHeight,
             (_, Sizing::Hug) => TextAutoResize::Height,
+            _ if t.truncates() => TextAutoResize::Truncate,
             _ => TextAutoResize::None,
         };
     }
diff --git a/crates/engine/src/cmd/text.rs b/crates/engine/src/cmd/text.rs
index 813a6036..3822c5c5 100644
--- a/crates/engine/src/cmd/text.rs
+++ b/crates/engine/src/cmd/text.rs
@@ -291,15 +291,21 @@ pub fn specs() -> Vec<CommandSpec> {
             let v = finite(req_num("text.paragraphSpacing", p, "spacing")?).clamp(0.0, 10_000.0);
             para(s, p, |t| t.paragraph_spacing = v)
         }),
-        spec!("text.maxLines", "Max lines", "{lines (0 = no limit; truncates), ids?}", true, |s, p| {
-            let v = finite(req_num("text.maxLines", p, "lines")?).clamp(0.0, 10_000.0) as u32;
-            para(s, p, |t| {
-                t.max_lines = v;
-                if v > 0 {
-                    t.auto_resize = TextAutoResize::Truncate;
-                }
-            })
-        }),
+        spec!(
+            "text.maxLines",
+            "Max lines",
+            "{lines (0 = no limit; truncates: auto-height text hugs up to that many lines, other text becomes a truncating box), ids?}",
+            true,
+            |s, p| {
+                let v = finite(req_num("text.maxLines", p, "lines")?).clamp(0.0, 10_000.0) as u32;
+                para(s, p, |t| {
+                    t.max_lines = v;
+                    if v > 0 && t.auto_resize != TextAutoResize::Height {
+                        t.auto_resize = TextAutoResize::Truncate;
+                    }
+                })
+            }
+        ),
         spec!(
             "text.setFeatures",
             "OpenType features",
diff --git a/crates/engine/src/inspect.rs b/crates/engine/src/inspect.rs
index 33162314..7dccd706 100644
--- a/crates/engine/src/inspect.rs
+++ b/crates/engine/src/inspect.rs
@@ -188,6 +188,9 @@ pub fn node_json(doc: &Document, id: NodeId, depth: usize) -> Value {
             o.insert("letterSpacing".into(), json!(t.style.letter_spacing.label()));
             o.insert("textAlign".into(), json!(t.align_h));
             o.insert("textAutoResize".into(), json!(t.auto_resize));
+            if t.max_lines > 0 {
+                o.insert("maxLines".into(), json!(t.max_lines));
+            }
             if let Some(tp) = &t.path {
                 o.insert("textPath".into(), json!(tp));
             }
diff --git a/crates/engine/src/text_behaviour_tests.rs b/crates/engine/src/text_behaviour_tests.rs
index 92a43306..8b33e303 100644
--- a/crates/engine/src/text_behaviour_tests.rs
+++ b/crates/engine/src/text_behaviour_tests.rs
@@ -310,3 +310,63 @@ fn new_text_starts_in_the_builds_default_font() {
         assert_eq!(serde_json::to_value(td).unwrap()["style"]["font_family"], figcraft_doc::DEFAULT_FONT);
     }
 }
+
+fn resize_mode(s: &Session, t: NodeId) -> figcraft_doc::TextAutoResize {
+    s.doc().unwrap().node(t).unwrap().kind.text().unwrap().auto_resize
+}
+
+#[test]
+fn a_truncated_text_keeps_truncating_when_its_box_is_resized() {
+    // #1376: a truncating text is already fixed both ways, so an explicit size changes its box only.
+    use figcraft_doc::TextAutoResize;
+    let mut s = Session::new();
+    let t = text(&mut s, "Lorem consectetur", json!({"textAutoResize": "truncate", "width": 100, "height": 24}));
+    assert_eq!(resize_mode(&s, t), TextAutoResize::Truncate);
+    for (cmd, p, why) in [
+        ("node.set", json!({"id": t, "props": {"height": 24}}), "node.set height (the value it has)"),
+        ("node.set", json!({"id": t, "props": {"width": 120, "height": 30}}), "node.set width and height"),
+        ("transform.resize", json!({"ids": [t], "height": 40}), "transform.resize height"),
+        ("transform.resize", json!({"ids": [t], "width": 90}), "transform.resize width"),
+        ("node.set", json!({"id": t, "props": {"sizingV": "fixed"}}), "fixed vertical sizing"),
+    ] {
+        s.execute(cmd, &p).unwrap();
+        assert_eq!(resize_mode(&s, t), TextAutoResize::Truncate, "{why}");
+    }
+    // Text that doesn't truncate still turns fixed size.
+    let plain = text(&mut s, "Lorem consectetur", json!({"textAutoResize": "height", "width": 100}));
+    s.execute("node.set", &json!({"id": plain, "props": {"height": 24}})).unwrap();
+    assert_eq!(resize_mode(&s, plain), TextAutoResize::None);
+}
+
+#[test]
+fn max_lines_on_auto_height_text_hugs_that_many_lines() {
+    // #1377: an auto-height text with max lines grows up to that many lines and ends in an
+    // ellipsis; the layer reports its max lines.
+    use figcraft_doc::TextAutoResize;
+    figcraft_text::scan_system_fonts();
+    let mut s = Session::new();
+    let t = text(&mut s, "Lorem ipsum dolor sit amet consectetur", json!({"fontSize": 16, "lineHeight": 24}));
+    s.execute("node.set", &json!({"id": t, "props": {"textAutoResize": "height", "width": 100}})).unwrap();
+    assert!(crate::inspect::node_json(s.doc().unwrap(), t, 0).get("maxLines").is_none(), "no limit: not reported");
+    // Wrapping needs a font (CI may have none).
+    if size(&s, t).1 < 48.0 {
+        return;
+    }
+    s.execute("text.maxLines", &json!({"ids": [t], "lines": 1})).unwrap();
+    assert_eq!(resize_mode(&s, t), TextAutoResize::Height, "max lines keep auto height");
+    assert_eq!(size(&s, t), (100.0, 24.0), "one line tall");
+    assert_eq!(crate::inspect::node_json(s.doc().unwrap(), t, 0)["maxLines"], json!(1));
+    s.execute("node.set", &json!({"id": t, "props": {"maxLines": 2}})).unwrap();
+    assert_eq!(size(&s, t).1, 48.0, "two lines tall");
+    // No limit: it grows to all of its lines again.
+    s.execute("node.set", &json!({"id": t, "props": {"maxLines": 0}})).unwrap();
+    assert!(size(&s, t).1 > 48.0);
+    // An explicit height on a text that truncates makes a truncating box.
+    s.execute("node.set", &json!({"id": t, "props": {"maxLines": 1}})).unwrap();
+    s.execute("node.set", &json!({"id": t, "props": {"height": 30}})).unwrap();
+    assert_eq!((resize_mode(&s, t), size(&s, t).1), (TextAutoResize::Truncate, 30.0));
+    // Other text still becomes a truncating box with max lines.
+    let fixed = text(&mut s, "Lorem", json!({"textAutoResize": "none", "width": 100, "height": 100}));
+    s.execute("text.maxLines", &json!({"ids": [fixed], "lines": 2})).unwrap();
+    assert_eq!(resize_mode(&s, fixed), TextAutoResize::Truncate);
+}
diff --git a/crates/engine/src/textfit.rs b/crates/engine/src/textfit.rs
index 4ab6c50e..f9d549e4 100644
--- a/crates/engine/src/textfit.rs
+++ b/crates/engine/src/textfit.rs
@@ -29,6 +29,8 @@ pub fn specs() -> Vec<CommandSpec> {
 /// paragraph of its own after a hard break, which no size can fix).
 fn measure(t: &TextData, k: f64, width: f64) -> (usize, f64, bool) {
     let mut t = t.clone();
+    // Every line counts, not only those the layer's own line limit shows.
+    t.max_lines = 0;
     let n = t.char_count();
     t.restyle(0, n, |s| s.font_size = (s.font_size * k).clamp(1.0, 5000.0));
     let l = figcraft_text::layout(&t, Some(width), None);
diff --git a/crates/engine/src/tools.rs b/crates/engine/src/tools.rs
index 629c9a06..165638ff 100644
--- a/crates/engine/src/tools.rs
+++ b/crates/engine/src/tools.rs
@@ -1821,10 +1821,11 @@ impl Session {
                     n.child_layout.sizing_v = Sizing::Fixed;
                 }
                 if let NodeKind::Text(t) = &mut n.kind {
-                    t.auto_resize = match handle {
-                        Handle::Edge(1) | Handle::Edge(3) => TextAutoResize::Height,
-                        _ => TextAutoResize::None,
-                    };
+                    match handle {
+                        Handle::Edge(1) | Handle::Edge(3) if t.auto_resize == TextAutoResize::Truncate => {}
+                        Handle::Edge(1) | Handle::Edge(3) => t.auto_resize = TextAutoResize::Height,
+                        _ => t.fix_size(true, true),
+                    }
                 }
                 return Ok(());
             }
diff --git a/crates/format/src/fig/export.rs b/crates/format/src/fig/export.rs
index dad09d95..801aeed9 100644
--- a/crates/format/src/fig/export.rs
+++ b/crates/format/src/fig/export.rs
@@ -1555,7 +1555,7 @@ impl<'d> Exporter<'d> {
             ("textTracking", fl(0.0)),
             ("emojiImageSet", e("APPLE")),
         ]);
-        if td.auto_resize == TextAutoResize::Truncate {
+        if td.truncates() {
             f.push(("textTruncation", e("ENDING")));
         }
         if td.max_lines > 0 {
diff --git a/crates/format/src/rest/text.rs b/crates/format/src/rest/text.rs
index 99ceb500..46dc7486 100644
--- a/crates/format/src/rest/text.rs
+++ b/crates/format/src/rest/text.rs
@@ -69,10 +69,11 @@ fn paragraph(s: &Value, td: &mut TextData) {
         // Missing means a fixed box.
         _ => TextAutoResize::None,
     };
-    if text(s, "textTruncation") == Some("ENDING") {
+    td.max_lines = num(s, "maxLines").filter(|n| *n >= 1.0).map_or(0, |n| n.min(10_000.0) as u32);
+    // Auto height with a line limit keeps hugging its lines up to the limit.
+    if text(s, "textTruncation") == Some("ENDING") && !td.truncates() {
         td.auto_resize = TextAutoResize::Truncate;
     }
-    td.max_lines = num(s, "maxLines").filter(|n| *n >= 1.0).map_or(0, |n| n.min(10_000.0) as u32);
     td.paragraph_spacing = len(s, "paragraphSpacing").unwrap_or(0.0);
     td.paragraph_indent = len(s, "paragraphIndent").unwrap_or(0.0);
     td.list_spacing = len(s, "listSpacing").unwrap_or(0.0).min(10_000.0);
diff --git a/crates/text/src/behaviour_tests.rs b/crates/text/src/behaviour_tests.rs
index eea8e93f..4f5b0774 100644
--- a/crates/text/src/behaviour_tests.rs
+++ b/crates/text/src/behaviour_tests.rs
@@ -162,6 +162,42 @@ fn resizing_auto_width_auto_height_fixed_and_truncate() {
     assert!(two.truncated && two.lines.len() == 2);
 }
 
+#[test]
+fn truncation_fills_the_last_line_before_the_ellipsis() {
+    // #1375: as with CSS `text-overflow: ellipsis`, the last line shown takes as much of the word
+    // wrapped after it as fits before the ellipsis ("Lorem consec…", not "Lorem…").
+    if face().is_none() {
+        return;
+    }
+    let s = "Lorem consectetur";
+    let full = layout(&text(s, TextAutoResize::WidthAndHeight), None, None);
+    let lorem = layout(&text("Lorem", TextAutoResize::WidthAndHeight), None, None).width;
+    // Room for "Lorem" and most of the next word, not all of it.
+    let w = lorem + (full.width - lorem) * 0.75;
+    let line_h = full.lines[0].height;
+    let mut max_one = text(s, TextAutoResize::Truncate);
+    max_one.max_lines = 1;
+    let mut hug_one = text(s, TextAutoResize::Height);
+    hug_one.max_lines = 1;
+    for (l, why) in [
+        (layout(&text(s, TextAutoResize::Truncate), Some(w), Some(line_h + 1.0)), "cut by the box height"),
+        (layout(&max_one, Some(w), Some(1000.0)), "cut by max lines"),
+        (layout(&hug_one, Some(w), None), "auto height with max lines"),
+    ] {
+        assert!(l.truncated && l.lines.len() == 1, "{why}");
+        let last = l.glyphs.last().unwrap();
+        assert_eq!(last.char_start, last.char_end, "{why}: the ellipsis ends the line");
+        assert!(l.glyphs.iter().any(|g| g.char_start == 6), "{why}: the wrapped word starts on the line");
+        assert!(l.glyphs.iter().all(|g| g.x + g.advance <= w + EPS), "{why}: within the box");
+        assert!((l.height - line_h).abs() < EPS, "{why}: one line tall");
+    }
+    // A line that ends its paragraph keeps its words; the ellipsis follows them.
+    let mut para = text("Lorem\nconsectetur", TextAutoResize::Truncate);
+    para.max_lines = 1;
+    let l = layout(&para, Some(w), Some(1000.0));
+    assert!(l.truncated && l.glyphs.iter().all(|g| g.char_start < 5 || g.char_start == g.char_end));
+}
+
 #[test]
 fn vertical_trim_cap_height_to_baseline() {
     let Some(f) = face() else { return };
diff --git a/crates/text/src/layout.rs b/crates/text/src/layout.rs
index 3c64d4ab..56439719 100644
--- a/crates/text/src/layout.rs
+++ b/crates/text/src/layout.rs
@@ -532,7 +532,7 @@ pub fn layout(text: &TextData, box_width: Option<f64>, box_height: Option<f64>)
     let mut out = TextLayout { styles: styles.clone(), ..Default::default() };
     let mut y = 0.0;
     let mut para_start_line = true;
-    let max_lines = if text.max_lines > 0 && matches!(text.auto_resize, TextAutoResize::Truncate) { text.max_lines as usize } else { usize::MAX };
+    let max_lines = if text.max_lines > 0 && text.truncates() { text.max_lines as usize } else { usize::MAX };
     // A style's vertical metrics (ascent, descent, line height, cap height) come from its own
     // font, never a fallback face, so lines mixing scripts keep the spacing of lines that don't.
     let metrics = |st_idx: usize| -> [f64; 4] {
@@ -546,6 +546,25 @@ pub fn layout(text: &TextData, box_width: Option<f64>, box_height: Option<f64>)
             None => [size * 0.8, size * 0.2, whole_px(st.line_height.resolve(size, 1.2)), size * 0.7],
         }
     };
+    // An item's glyph with its pen position at `pen` on the line at `baseline` (none for a space
+    // the font has no glyph for).
+    let glyph_at = |it: &Item, pen: f64, baseline: f64| {
+        let size = styles.get(it.style).map(|st| sanitize_size(st.font_size)).unwrap_or(12.0) * it.scale;
+        (it.gid != 0 || !it.is_space()).then(|| Glyph {
+            face: it.face.clone(),
+            coords: it.coords.clone(),
+            gid: it.gid,
+            x: pen + it.dx,
+            y: baseline - it.dy,
+            size,
+            advance: it.adv,
+            char_start: it.char_start,
+            char_end: it.char_end,
+            style: it.style,
+            rtl: it.level % 2 == 1,
+            warp: Affine::IDENTITY,
+        })
+    };
     let mut first_cap = 0.0;
     for (li, (s, e, para_end, para)) in lines.iter().enumerate() {
         if li >= max_lines {
@@ -685,23 +704,7 @@ pub fn layout(text: &TextData, box_width: Option<f64>, box_height: Option<f64>)
             if is_line_break(it.ch) {
                 continue;
             }
-            let size = styles.get(it.style).map(|st| sanitize_size(st.font_size)).unwrap_or(12.0) * it.scale;
-            if it.gid != 0 || !it.is_space() {
-                out.glyphs.push(Glyph {
-                    face: it.face.clone(),
-                    coords: it.coords.clone(),
-                    gid: it.gid,
-                    x: pen + it.dx,
-                    y: baseline - it.dy,
-                    size,
-                    advance: it.adv,
-                    char_start: it.char_start,
-                    char_end: it.char_end,
-                    style: it.style,
-                    rtl: it.level % 2 == 1,
-                    warp: Affine::IDENTITY,
-                });
-            }
+            out.glyphs.extend(glyph_at(it, pen, baseline));
             pen += it.adv;
             if it.stretches() {
                 pen += justify_extra;
@@ -757,6 +760,31 @@ pub fn layout(text: &TextData, box_width: Option<f64>, box_height: Option<f64>)
         }
     }
     if out.truncated {
+        // The last line shown runs on into the line cut after it, so the ellipsis fills the line
+        // ("Lorem consec…") instead of following the last whole word ("Lorem…").
+        let last = out.lines.len().checked_sub(1);
+        let wrapped_on = last.and_then(|li| Some((out.lines.get(li)?, lines.get(li)?, lines.get(li + 1)?)));
+        if let (Some(maxw), Some((line, &(_, e, para_end, _), &(ns, ne, _, _)))) = (wrap, wrapped_on)
+            && !para_end
+            && !break_after(e)
+            && !line.rtl
+        {
+            let baseline = line.baseline;
+            let mut pen = out.glyphs.get(line.glyph_start..line.glyph_end).and_then(<[Glyph]>::last).map_or(line.width, |g| g.x + g.advance);
+            for it in items.get(ns..ne).unwrap_or(&[]) {
+                if pen > maxw {
+                    break;
+                }
+                if !is_line_break(it.ch) {
+                    out.glyphs.extend(glyph_at(it, pen, baseline));
+                    pen += it.adv;
+                }
+            }
+            let gend = out.glyphs.len();
+            if let Some(l) = out.lines.last_mut() {
+                l.glyph_end = gend;
+            }
+        }
         add_ellipsis(&mut out, wrap);
     }
 
diff --git a/crates/text/src/tests.rs b/crates/text/src/tests.rs
index d36c1589..09accbd4 100644
--- a/crates/text/src/tests.rs
+++ b/crates/text/src/tests.rs
@@ -232,7 +232,9 @@ fn truncate_max_lines_with_ellipsis() {
     assert_eq!(l.lines.len(), 2);
     let last = l.glyphs.last().unwrap();
     assert_eq!(last.gid, face.glyph_for('…'));
-    // max_lines is ignored unless truncating.
+    // Auto height truncates at max_lines too; a fixed box shows every line.
+    t.auto_resize = figcraft_doc::TextAutoResize::Height;
+    assert_eq!(layout(&t, Some(300.0), None).lines.len(), 2);
     t.auto_resize = figcraft_doc::TextAutoResize::None;
     assert_eq!(layout(&t, Some(300.0), Some(1000.0)).lines.len(), 3);
 }
diff --git a/crates/ui-egui/src/typography.rs b/crates/ui-egui/src/typography.rs
index f61aa183..13b5785f 100644
--- a/crates/ui-egui/src/typography.rs
+++ b/crates/ui-egui/src/typography.rs
@@ -527,17 +527,27 @@ fn type_settings(
             app.set_props(ids, json!({"leadingTrim": if i == 1 { "capHeight" } else { "none" }}));
         }
         let resize = common(doc, ids, |n| n.kind.text().map(|t| t.auto_resize)).flatten();
+        // Auto-height text with a line limit truncates too.
+        let truncating = common(doc, ids, |n| n.kind.text().map(TextData::truncates)).flatten();
         caption(ui, tr("Truncate text"));
-        let active = resize.map(|r| usize::from(r == TextAutoResize::Truncate));
-        match text_seg(ui, "trunc", &[(tr("Off"), tr_noop("Don't truncate")), ("…", tr_noop("Truncate with an ellipsis"))], active, w) {
-            Some(1) => app.set_props(ids, json!({"textAutoResize": "truncate"})),
-            Some(_) if resize != Some(TextAutoResize::Height) && resize != Some(TextAutoResize::WidthAndHeight) => {
-                app.set_props(ids, json!({"textAutoResize": "none"}))
+        match text_seg(
+            ui,
+            "trunc",
+            &[(tr("Off"), tr_noop("Don't truncate")), ("…", tr_noop("Truncate with an ellipsis"))],
+            truncating.map(usize::from),
+            w,
+        ) {
+            Some(1) if truncating != Some(true) => app.set_props(ids, json!({"textAutoResize": "truncate"})),
+            Some(0) if resize == Some(TextAutoResize::Height) => {
+                if truncating == Some(true) {
+                    app.set_props(ids, json!({"maxLines": 0}));
+                }
             }
+            Some(0) if resize != Some(TextAutoResize::WidthAndHeight) => app.set_props(ids, json!({"textAutoResize": "none"})),
             _ => {}
         }
         // Max lines only matter while truncating; no limit shows "Auto".
-        if resize == Some(TextAutoResize::Truncate) {
+        if truncating == Some(true) {
             let max = common(doc, ids, |n| n.kind.text().map(|t| t.max_lines)).flatten();
             ui.add_space(4.0);
             let shown = max.map(f64::from).filter(|m| *m > 0.0);
diff --git a/docs/roadmap.md b/docs/roadmap.md
index c22f88f8..5d6bf925 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -1,6 +1,6 @@
 # FigCraft roadmap: milestones and what's next
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-24 · **Change:** minor (M11 widget fields and property menus; M12 Boards: timer and voting; Installed weights of an embedded font family (#1246); `.sketch` import, best effort; Adobe Fonts found on macOS (#298); M12 Boards; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (text truncation fills the last line, survives resizing, and auto height takes Max lines (#1375, #1376, #1377); M11 widget fields and property menus; M12 Boards: timer and voting; Installed weights of an embedded font family (#1246); `.sketch` import, best effort; Adobe Fonts found on macOS (#298); M12 Boards; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
 
 Forward-looking plan. Where FigCraft stands today: [`ROADMAP.md`](../ROADMAP.md) and
 [`target-app-parity.md`](target-app-parity.md); the full ranked list: [`gaps.md`](gaps.md). Hours
@@ -75,6 +75,7 @@ blockers.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-26 | minor | Text truncation (M4, #1375, #1376, #1377): the last line shown takes as much of the next word as fits before the ellipsis ("Lorem consec…", not "Lorem…"); an explicit height, `transform.resize`, a resize handle or fixed sizing on a truncated text keeps it truncating instead of turning it fixed size; Max lines on auto-height text hugs up to that many lines and ends in an ellipsis (`text.maxLines`, `node.set {maxLines}`, Type settings, `.fig` export and import), and `node.get` / `get_node` report `maxLines`. Regression tests in the text and engine behaviour suites. Numbers unchanged |
 | 2026-10-24 | minor | Installed weights of an embedded font family (M7, #1246): release builds embed some families with only a few styles (Poppins Regular, Italic and Bold), and the first font scan dropped every installed face of such a family, so an installed Poppins SemiBold or Medium was never offered (a rescan did offer them). The first scan now keeps the embedded faces, which still win for the styles they cover, and offers the installed styles they lack beside them. Regression test in the font database tests. Numbers unchanged |
 | 2026-10-24 | minor | M12: a shared board timer and voting sessions; 30–60 h → 26–54 h |
 | 2026-10-24 | minor | M11: plugin widgets take text input (editable fields, `widget.setText`) and a property menu (`widget.menu`), plugin API 4; 8–26 h → 6–22 h |
diff --git a/docs/target-app-parity.md b/docs/target-app-parity.md
index 5c8dcc01..8a236656 100644
--- a/docs/target-app-parity.md
+++ b/docs/target-app-parity.md
@@ -1,6 +1,6 @@
 # FigCraft parity with Figma
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-24 · **Change:** minor (plugin widgets take text input and a property menu (plugin API 4); boards: templates and tables; boards: a shared timer and voting sessions; boards: the dot grid, connector ends dragged to re-attach, curved connectors; `.sketch` import, best effort: import/export breadth 86% → 87%, file formats 60% → 61%, headline numbers unchanged; Canvas & navigation's remaining work no longer lists outline mode's Include hidden layers and Include object bounds; boards: area 22 (weight 0, outside the weighted sum; CJK line breaking: JIS X 4051's line-start and line-end sets completed with the halfwidth small kana, the halfwidth and spacing (semi-)voiced sound marks, iteration marks 〱–〵 and the halfwidth parentheses; Turkish reviewed, Czech and Indonesian drafts, the Japanese draft completed; reviewed Russian catalog and integer plurals; vector edit mode regions: hover hatch, selection and drag; plugin log byte/count limits (#191); core editor leftovers: component playground, auto gap handles, variables inside styles, inner shadows and background blur on groups, command-made text readable on dark pages, a one-step frame/group convert, delays on mouse triggers and manual overlay offsets, wrapped-line alignment; starter templates, a Templates tab and Getting started tips on the home screen: essentials ~57% → ~59%; everyday editing partials: number fields, outline options, Hide when publishing, cursors, panel widths, dark pages, numbers unchanged but menu breadth 211/211; text box sizes measured against documents re-saved by other software: whole-pixel line heights, advances on a 1024-per-em grid, letter spacing between glyphs only, numbers unchanged; .fig export checked by opening written files in other software, numbers unchanged; a public figcraft-server: open hosting, owner tokens, per-address limits, idle expiry, moderation, install.sh; experimental .fig export; keyboard shortcut parity suite and bindings; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and edit tail; dev resources links; extended collections tail; branch version history and finer list merges; headline percentages recomputed from the area table: feature breadth ~84%, core ~94%, mainstream ~50%; text lists, hanging punctuation and decoration styles; comments and version history behaviour suite and fixes; canvas navigation, guides and grids behaviour suite and fixes; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; styles and variables behaviour suite and fixes; prototyping behaviour suite and fixes; components behaviour suite and fixes; embedded image colour profiles; layers panel keyboard: F2 rename, Shift+F10 context menu, keyboard box selection, 10k-layer QA; per-side stroke weight variables; text behaviour suite: CJK line breaking, metrics, vertical trim; selection and transform behaviour suite and fixes; `.fig` import, best effort; auto layout behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~80%; ready ~49%; last major: full re-measure against Figma desktop 126.10.7; rows for the community batches: Selection colors, smart-selection spacing and a Present tab (#753), `.fig` import fidelity, paste from another design app, a `.fig` copy from Save as; control requests while the window is minimised (#720); catalog counts re-measured; automation roots (#715); number variables in the text content picker (#629); frames and sections convert into each other (#719); reviewed Russian catalog and integer plurals; vector edit mode regions: hover hatch, selection and drag; plugin log byte/count limits (#191); core editor leftovers: component playground, auto gap handles, variables inside styles, inner shadows and background blur on groups, command-made text readable on dark pages, a one-step frame/group convert, delays on mouse triggers and manual overlay offsets, wrapped-line alignment; starter templates, a Templates tab and Getting started tips on the home screen: essentials ~57% → ~59%; everyday editing partials: number fields, outline options, Hide when publishing, cursors, panel widths, dark pages, numbers unchanged but menu breadth 211/211; text box sizes measured against documents re-saved by other software: whole-pixel line heights, advances on a 1024-per-em grid, letter spacing between glyphs only, numbers unchanged; .fig export checked by opening written files in other software, numbers unchanged; a public figcraft-server: open hosting, owner tokens, per-address limits, idle expiry, moderation, install.sh; experimental .fig export; keyboard shortcut parity suite and bindings; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and edit tail; dev resources links; extended collections tail; branch version history and finer list merges; headline percentages recomputed from the area table: feature breadth ~84%, core ~94%, mainstream ~50%; text lists, hanging punctuation and decoration styles; comments and version history behaviour suite and fixes; canvas navigation, guides and grids behaviour suite and fixes; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; styles and variables behaviour suite and fixes; prototyping behaviour suite and fixes; components behaviour suite and fixes; embedded image colour profiles; layers panel keyboard: F2 rename, Shift+F10 context menu, keyboard box selection, 10k-layer QA; per-side stroke weight variables; text behaviour suite: CJK line breaking, metrics, vertical trim; selection and transform behaviour suite and fixes; `.fig` import, best effort; auto layout behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~80%; ready ~49%; last major: full re-measure against Figma desktop 126.10.7; Canvas & navigation's remaining work no longer lists outline mode's Include hidden layers and Include object bounds; boards: area 22 (weight 0, outside the weighted sum; Turkish reviewed, Czech and Indonesian drafts, the Japanese draft completed; reviewed Russian catalog and integer plurals; vector edit mode regions: hover hatch, selection and drag; plugin log byte/count limits (#191); core editor leftovers: component playground, auto gap handles, variables inside styles, inner shadows and background blur on groups, command-made text readable on dark pages, a one-step frame/group convert, delays on mouse triggers and manual overlay offsets, wrapped-line alignment; starter templates, a Templates tab and Getting started tips on the home screen: essentials ~57% → ~59%; everyday editing partials: number fields, outline options, Hide when publishing, cursors, panel widths, dark pages, numbers unchanged but menu breadth 211/211; text box sizes measured against documents re-saved by other software: whole-pixel line heights, advances on a 1024-per-em grid, letter spacing between glyphs only, numbers unchanged; .fig export checked by opening written files in other software, numbers unchanged; a public figcraft-server: open hosting, owner tokens, per-address limits, idle expiry, moderation, install.sh; experimental .fig export; keyboard shortcut parity suite and bindings; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and edit tail; dev resources links; extended collections tail; branch version history and finer list merges; headline percentages recomputed from the area table: feature breadth ~84%, core ~94%, mainstream ~50%; text lists, hanging punctuation and decoration styles; comments and version history behaviour suite and fixes; canvas navigation, guides and grids behaviour suite and fixes; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; styles and variables behaviour suite and fixes; prototyping behaviour suite and fixes; components behaviour suite and fixes; embedded image colour profiles; layers panel keyboard: F2 rename, Shift+F10 context menu, keyboard box selection, 10k-layer QA; per-side stroke weight variables; text behaviour suite: CJK line breaking, metrics, vertical trim; selection and transform behaviour suite and fixes; `.fig` import, best effort; auto layout behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~80%; ready ~49%; last major: full re-measure against Figma desktop 126.10.7; rows for the community batches: Selection colors, smart-selection spacing and a Present tab (#753), `.fig` import fidelity, paste from another design app, a `.fig` copy from Save as; control requests while the window is minimised (#720); catalog counts re-measured; automation roots (#715); number variables in the text content picker (#629); frames and sections convert into each other (#719); reviewed Russian catalog and integer plurals; vector edit mode regions: hover hatch, selection and drag; plugin log byte/count limits (#191); core editor leftovers: component playground, auto gap handles, variables inside styles, inner shadows and background blur on groups, command-made text readable on dark pages, a one-step frame/group convert, delays on mouse triggers and manual overlay offsets, wrapped-line alignment; starter templates, a Templates tab and Getting started tips on the home screen: essentials ~57% → ~59%; everyday editing partials: number fields, outline options, Hide when publishing, cursors, panel widths, dark pages, numbers unchanged but menu breadth 211/211; text box sizes measured against documents re-saved by other software: whole-pixel line heights, advances on a 1024-per-em grid, letter spacing between glyphs only, numbers unchanged; .fig export checked by opening written files in other software, numbers unchanged; a public figcraft-server: open hosting, owner tokens, per-address limits, idle expiry, moderation, install.sh; experimental .fig export; keyboard shortcut parity suite and bindings; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and edit tail; dev resources links; extended collections tail; branch version history and finer list merges; headline percentages recomputed from the area table: feature breadth ~84%, core ~94%, mainstream ~50%; text lists, hanging punctuation and decoration styles; comments and version history behaviour suite and fixes; canvas navigation, guides and grids behaviour suite and fixes; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; styles and variables behaviour suite and fixes; prototyping behaviour suite and fixes; components behaviour suite and fixes; embedded image colour profiles; layers panel keyboard: F2 rename, Shift+F10 context menu, keyboard box selection, 10k-layer QA; per-side stroke weight variables; text behaviour suite: CJK line breaking, metrics, vertical trim; selection and transform behaviour suite and fixes; `.fig` import, best effort; auto layout behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~80%; ready ~49%; last major: full re-measure against Figma desktop 126.10.7) · **Target:** Figma Design (desktop app 126.10.7, macOS)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (truncated text fills its last line before the ellipsis and keeps truncating when resized; auto-height text with max lines (#1375, #1376, #1377), numbers unchanged; plugin widgets take text input and a property menu (plugin API 4); boards: templates and tables; boards: a shared timer and voting sessions; boards: the dot grid, connector ends dragged to re-attach, curved connectors; `.sketch` import, best effort: import/export breadth 86% → 87%, file formats 60% → 61%, headline numbers unchanged; Canvas & navigation's remaining work no longer lists outline mode's Include hidden layers and Include object bounds; boards: area 22 (weight 0, outside the weighted sum; CJK line breaking: JIS X 4051's line-start and line-end sets completed with the halfwidth small kana, the halfwidth and spacing (semi-)voiced sound marks, iteration marks 〱–〵 and the halfwidth parentheses; Turkish reviewed, Czech and Indonesian drafts, the Japanese draft completed; reviewed Russian catalog and integer plurals; vector edit mode regions: hover hatch, selection and drag; plugin log byte/count limits (#191); core editor leftovers: component playground, auto gap handles, variables inside styles, inner shadows and background blur on groups, command-made text readable on dark pages, a one-step frame/group convert, delays on mouse triggers and manual overlay offsets, wrapped-line alignment; starter templates, a Templates tab and Getting started tips on the home screen: essentials ~57% → ~59%; everyday editing partials: number fields, outline options, Hide when publishing, cursors, panel widths, dark pages, numbers unchanged but menu breadth 211/211; text box sizes measured against documents re-saved by other software: whole-pixel line heights, advances on a 1024-per-em grid, letter spacing between glyphs only, numbers unchanged; .fig export checked by opening written files in other software, numbers unchanged; a public figcraft-server: open hosting, owner tokens, per-address limits, idle expiry, moderation, install.sh; experimental .fig export; keyboard shortcut parity suite and bindings; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and edit tail; dev resources links; extended collections tail; branch version history and finer list merges; headline percentages recomputed from the area table: feature breadth ~84%, core ~94%, mainstream ~50%; text lists, hanging punctuation and decoration styles; comments and version history behaviour suite and fixes; canvas navigation, guides and grids behaviour suite and fixes; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; styles and variables behaviour suite and fixes; prototyping behaviour suite and fixes; components behaviour suite and fixes; embedded image colour profiles; layers panel keyboard: F2 rename, Shift+F10 context menu, keyboard box selection, 10k-layer QA; per-side stroke weight variables; text behaviour suite: CJK line breaking, metrics, vertical trim; selection and transform behaviour suite and fixes; `.fig` import, best effort; auto layout behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~80%; ready ~49%; last major: full re-measure against Figma desktop 126.10.7; rows for the community batches: Selection colors, smart-selection spacing and a Present tab (#753), `.fig` import fidelity, paste from another design app, a `.fig` copy from Save as; control requests while the window is minimised (#720); catalog counts re-measured; automation roots (#715); number variables in the text content picker (#629); frames and sections convert into each other (#719); reviewed Russian catalog and integer plurals; vector edit mode regions: hover hatch, selection and drag; plugin log byte/count limits (#191); core editor leftovers: component playground, auto gap handles, variables inside styles, inner shadows and background blur on groups, command-made text readable on dark pages, a one-step frame/group convert, delays on mouse triggers and manual overlay offsets, wrapped-line alignment; starter templates, a Templates tab and Getting started tips on the home screen: essentials ~57% → ~59%; everyday editing partials: number fields, outline options, Hide when publishing, cursors, panel widths, dark pages, numbers unchanged but menu breadth 211/211; text box sizes measured against documents re-saved by other software: whole-pixel line heights, advances on a 1024-per-em grid, letter spacing between glyphs only, numbers unchanged; .fig export checked by opening written files in other software, numbers unchanged; a public figcraft-server: open hosting, owner tokens, per-address limits, idle expiry, moderation, install.sh; experimental .fig export; keyboard shortcut parity suite and bindings; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and edit tail; dev resources links; extended collections tail; branch version history and finer list merges; headline percentages recomputed from the area table: feature breadth ~84%, core ~94%, mainstream ~50%; text lists, hanging punctuation and decoration styles; comments and version history behaviour suite and fixes; canvas navigation, guides and grids behaviour suite and fixes; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; styles and variables behaviour suite and fixes; prototyping behaviour suite and fixes; components behaviour suite and fixes; embedded image colour profiles; layers panel keyboard: F2 rename, Shift+F10 context menu, keyboard box selection, 10k-layer QA; per-side stroke weight variables; text behaviour suite: CJK line breaking, metrics, vertical trim; selection and transform behaviour suite and fixes; `.fig` import, best effort; auto layout behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~80%; ready ~49%; last major: full re-measure against Figma desktop 126.10.7; Canvas & navigation's remaining work no longer lists outline mode's Include hidden layers and Include object bounds; boards: area 22 (weight 0, outside the weighted sum; Turkish reviewed, Czech and Indonesian drafts, the Japanese draft completed; reviewed Russian catalog and integer plurals; vector edit mode regions: hover hatch, selection and drag; plugin log byte/count limits (#191); core editor leftovers: component playground, auto gap handles, variables inside styles, inner shadows and background blur on groups, command-made text readable on dark pages, a one-step frame/group convert, delays on mouse triggers and manual overlay offsets, wrapped-line alignment; starter templates, a Templates tab and Getting started tips on the home screen: essentials ~57% → ~59%; everyday editing partials: number fields, outline options, Hide when publishing, cursors, panel widths, dark pages, numbers unchanged but menu breadth 211/211; text box sizes measured against documents re-saved by other software: whole-pixel line heights, advances on a 1024-per-em grid, letter spacing between glyphs only, numbers unchanged; .fig export checked by opening written files in other software, numbers unchanged; a public figcraft-server: open hosting, owner tokens, per-address limits, idle expiry, moderation, install.sh; experimental .fig export; keyboard shortcut parity suite and bindings; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and edit tail; dev resources links; extended collections tail; branch version history and finer list merges; headline percentages recomputed from the area table: feature breadth ~84%, core ~94%, mainstream ~50%; text lists, hanging punctuation and decoration styles; comments and version history behaviour suite and fixes; canvas navigation, guides and grids behaviour suite and fixes; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; styles and variables behaviour suite and fixes; prototyping behaviour suite and fixes; components behaviour suite and fixes; embedded image colour profiles; layers panel keyboard: F2 rename, Shift+F10 context menu, keyboard box selection, 10k-layer QA; per-side stroke weight variables; text behaviour suite: CJK line breaking, metrics, vertical trim; selection and transform behaviour suite and fixes; `.fig` import, best effort; auto layout behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~80%; ready ~49%; last major: full re-measure against Figma desktop 126.10.7; rows for the community batches: Selection colors, smart-selection spacing and a Present tab (#753), `.fig` import fidelity, paste from another design app, a `.fig` copy from Save as; control requests while the window is minimised (#720); catalog counts re-measured; automation roots (#715); number variables in the text content picker (#629); frames and sections convert into each other (#719); reviewed Russian catalog and integer plurals; vector edit mode regions: hover hatch, selection and drag; plugin log byte/count limits (#191); core editor leftovers: component playground, auto gap handles, variables inside styles, inner shadows and background blur on groups, command-made text readable on dark pages, a one-step frame/group convert, delays on mouse triggers and manual overlay offsets, wrapped-line alignment; starter templates, a Templates tab and Getting started tips on the home screen: essentials ~57% → ~59%; everyday editing partials: number fields, outline options, Hide when publishing, cursors, panel widths, dark pages, numbers unchanged but menu breadth 211/211; text box sizes measured against documents re-saved by other software: whole-pixel line heights, advances on a 1024-per-em grid, letter spacing between glyphs only, numbers unchanged; .fig export checked by opening written files in other software, numbers unchanged; a public figcraft-server: open hosting, owner tokens, per-address limits, idle expiry, moderation, install.sh; experimental .fig export; keyboard shortcut parity suite and bindings; Simplified Chinese draft catalog; Latin American Spanish overlay; prototyping tail: gamepad triggers, widgets in prototypes, mode lookups; plugin directory on figcraft-server; Japanese and Korean draft catalogs and CJK UI fonts; plugin widgets and the plugin panel tail; French, German and Brazilian Portuguese draft catalogs; cursor chat and spotlight in live sessions; layers and assets panels behaviour suite and fixes; vector multi-edit and edit tail; dev resources links; extended collections tail; branch version history and finer list merges; headline percentages recomputed from the area table: feature breadth ~84%, core ~94%, mainstream ~50%; text lists, hanging punctuation and decoration styles; comments and version history behaviour suite and fixes; canvas navigation, guides and grids behaviour suite and fixes; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; shapes and vector behaviour suite and fixes; paint and effects behaviour suite and fixes; frames, groups, sections and masks behaviour suite and fixes; styles and variables behaviour suite and fixes; prototyping behaviour suite and fixes; components behaviour suite and fixes; embedded image colour profiles; layers panel keyboard: F2 rename, Shift+F10 context menu, keyboard box selection, 10k-layer QA; per-side stroke weight variables; text behaviour suite: CJK line breaking, metrics, vertical trim; selection and transform behaviour suite and fixes; `.fig` import, best effort; auto layout behaviour suite and fixes; Display P3: gamut warning and soft-proof (true P3 blocked upstream); several windows; localization layer with a draft Spanish catalog; hosting figcraft-server: wss in the desktop app, server releases, deployment guide; plugin panels and settings; canvas fixes: boolean hit testing on the result, group drags, frame outlines and slices; code connect; stretch and scatter brushes, pen pressure; text on a path and pattern fills; team libraries on the server and swap library; branches: create, update from main, review and merge; animated GIF fills and TIFF images; Open recent, outlines for the selection and mask outlines: menu breadth 100%; extended collections, variables import/export, gradient stop and variant bindings; feature breadth ~80%; ready ~49%; last major: full re-measure against Figma desktop 126.10.7) · **Target:** Figma Design (desktop app 126.10.7, macOS)
 
 The authoritative assessment of how close FigCraft is to Figma Design. [`ROADMAP.md`](../ROADMAP.md)
 summarizes it; [`gaps.md`](gaps.md) is the ranked work list; the measured menu checklist is
@@ -285,7 +285,9 @@ Hours in this narrative are the builders' estimates; the tables above supersede
    unlinks the chars edited). Live previews of a hovered named instance or font style and of a
    dragged axis slider (one undo step on release, Escape cancels). Visual QA: list markers keep the
    paragraph's font, renames start with the name selected and centred, Max lines shows while
-   truncating. Right-to-left paragraphs mirror lists and indents: bullets and numbers (".1") on
+   truncating. Truncation fills the last line shown before the ellipsis ("Lorem consec…", not
+   "Lorem…"), a truncated text resized keeps truncating, and auto-height text with Max lines hugs
+   up to that many lines. Right-to-left paragraphs mirror lists and indents: bullets and numbers (".1") on
    the right, wrapped lines hanging from the right, the paragraph indent on the right, trailing
    spaces hanging outside the line (canvas, PNG, PDF and SVG). A behaviour suite from the public
    documentation (`crates/text/src/behaviour_tests.rs`, `crates/engine/src/text_behaviour_tests.rs`):

From 398c5404f5c10ce21788180baa7c2518f0924e88 Mon Sep 17 00:00:00 2001
From: Muamer Mustafic <muamer.mustafic.ets@gmail.com>
Date: Mon, 26 Oct 2026 13:27:25 +0100
Subject: [PATCH 42/59] M4: a truncated last line's char range covers the chars
 it takes from the next line (#1375)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 crates/text/src/behaviour_tests.rs | 2 ++
 crates/text/src/layout.rs          | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/crates/text/src/behaviour_tests.rs b/crates/text/src/behaviour_tests.rs
index 4f5b0774..2b19b1d6 100644
--- a/crates/text/src/behaviour_tests.rs
+++ b/crates/text/src/behaviour_tests.rs
@@ -190,6 +190,8 @@ fn truncation_fills_the_last_line_before_the_ellipsis() {
         assert!(l.glyphs.iter().any(|g| g.char_start == 6), "{why}: the wrapped word starts on the line");
         assert!(l.glyphs.iter().all(|g| g.x + g.advance <= w + EPS), "{why}: within the box");
         assert!((l.height - line_h).abs() < EPS, "{why}: one line tall");
+        let g7 = l.glyphs.iter().find(|g| g.char_start == 7).unwrap();
+        assert_eq!(l.caret(7), (g7.x, 0), "{why}: a caret reaches the chars taken from the next line");
     }
     // A line that ends its paragraph keeps its words; the ellipsis follows them.
     let mut para = text("Lorem\nconsectetur", TextAutoResize::Truncate);
diff --git a/crates/text/src/layout.rs b/crates/text/src/layout.rs
index 56439719..77d42804 100644
--- a/crates/text/src/layout.rs
+++ b/crates/text/src/layout.rs
@@ -786,6 +786,14 @@ pub fn layout(text: &TextData, box_width: Option<f64>, box_height: Option<f64>)
             }
         }
         add_ellipsis(&mut out, wrap);
+        // Carets and selections reach every char the line shows, borrowed ones included.
+        if let Some(l) = out.lines.last() {
+            let shown =
+                out.glyphs.get(l.glyph_start..l.glyph_end).unwrap_or(&[]).iter().filter(|g| g.char_end > g.char_start).map(|g| g.char_end).max();
+            if let (Some(shown), Some(l)) = (shown, out.lines.last_mut()) {
+                l.char_end = l.char_end.max(shown);
+            }
+        }
     }
 
     // Horizontal alignment within the box.

From 2136ec20b1ba343b11b7a479eebb9fb6c1f78145 Mon Sep 17 00:00:00 2001
From: Muamer Mustafic <muamer.mustafic.ets@gmail.com>
Date: Mon, 26 Oct 2026 14:02:23 +0100
Subject: [PATCH 43/59] M1: a selected unfilled shape drags over a filled layer
 stacked below it (#1370)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../engine/src/selection_behaviour_tests.rs   | 40 +++++++++++++++++++
 crates/engine/src/tools.rs                    | 24 ++++++++++-
 docs/roadmap.md                               |  3 +-
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/crates/engine/src/selection_behaviour_tests.rs b/crates/engine/src/selection_behaviour_tests.rs
index 8e479d22..7a72c642 100644
--- a/crates/engine/src/selection_behaviour_tests.rs
+++ b/crates/engine/src/selection_behaviour_tests.rs
@@ -391,6 +391,46 @@ fn a_drag_inside_the_selection_box_moves_it_where_nothing_is_hit() {
     assert!((d.x - 10.0).abs() < 2.0 && (d.y - 10.0).abs() < 2.0, "it moves with the pointer: {d:?}");
 }
 
+#[test]
+fn a_layer_stacked_below_the_selection_doesnt_take_a_drag_from_inside_it() {
+    // #1370: inside a selected unfilled shape, a filled layer behind it doesn't take the press (the
+    // selection drags); a filled layer above it still does.
+    let mut s = Session::new();
+    let at = |s: &Session, i: NodeId| s.doc().unwrap().world_bounds(i).unwrap().origin();
+    let frame = id(&ex(&mut s, "frame.create", json!({"x": 300, "y": 0, "width": 200, "height": 200})));
+    for (parent, dx, where_) in [(None, 0.0, "on the canvas"), (Some(frame), 300.0, "in a top-level frame")] {
+        // `back` (0,0) filled, `front` (20,20) stroke only, `top` (60,60) filled; each 100×100, so
+        // the presses are well clear of the stroke.
+        let square = |s: &mut Session, x: f64| {
+            let mut p = json!({"x": x, "y": x, "width": 100, "height": 100});
+            if let Some(parent) = parent {
+                p["parent"] = json!(parent);
+            }
+            id(&ex(s, "shape.rectangle", p))
+        };
+        let back = square(&mut s, 0.0);
+        let front = square(&mut s, 20.0);
+        ex(&mut s, "node.set", json!({"ids": [front], "props": {"fills": [], "strokes": ["#000000"], "strokeWeight": 1}}));
+        let top = square(&mut s, 60.0);
+        // (drag from, selection after (the layer that moves by (10, 10)), derivation)
+        let rows = [
+            ((dx + 40.0, 40.0), front, "a filled layer behind the selected shape doesn't take the press: the selection drags"),
+            ((dx + 90.0, 90.0), top, "a filled layer above the selected shape still takes the press"),
+        ];
+        for (from, moved, why) in rows {
+            let home: Vec<Point> = [back, front, top].iter().map(|i| at(&s, *i)).collect();
+            ex(&mut s, "select.set", json!({"ids": [front]}));
+            drag(&mut s, from, (from.0 + 10.0, from.1 + 10.0), NONE);
+            assert_eq!(s.selection(), vec![moved], "{why} ({where_})");
+            for (i, h) in [back, front, top].iter().zip(&home) {
+                let d = if *i == moved { 10.0 } else { 0.0 };
+                assert_eq!(at(&s, *i), Point::new(h.x + d, h.y + d), "{why} ({where_})");
+            }
+            assert!(s.undo().unwrap(), "{why}: one undo step");
+        }
+    }
+}
+
 #[test]
 fn alt_shift_drag_on_a_selected_layer_duplicates_it() {
     let mut s = Session::new();
diff --git a/crates/engine/src/tools.rs b/crates/engine/src/tools.rs
index 629c9a06..0c1b03aa 100644
--- a/crates/engine/src/tools.rs
+++ b/crates/engine/src/tools.rs
@@ -747,6 +747,26 @@ pub fn locked_in(doc: &Document, id: NodeId) -> bool {
     std::iter::once(id).chain(doc.ancestors(id)).any(|a| doc.node(a).is_some_and(|n| n.locked))
 }
 
+/// Whether layer `t` paints below layer `s`: it holds `s`, or it is behind `s` in the stack of the
+/// nearest layer holding both.
+fn paints_below(doc: &Document, t: NodeId, s: NodeId) -> bool {
+    let chain = |id: NodeId| {
+        let mut c: Vec<NodeId> = std::iter::once(id).chain(doc.ancestors(id)).collect();
+        c.reverse();
+        c
+    };
+    let (ct, cs) = (chain(t), chain(s));
+    let shared = ct.iter().zip(&cs).take_while(|(a, b)| a == b).count();
+    match (ct.get(shared), cs.get(shared)) {
+        (None, Some(_)) => true,
+        (Some(a), Some(b)) => shared.checked_sub(1).and_then(|i| ct.get(i)).and_then(|p| doc.node(*p)).is_some_and(|p| {
+            let order: Vec<NodeId> = p.paint_order().collect();
+            order.iter().position(|c| c == a) < order.iter().position(|c| c == b)
+        }),
+        _ => false,
+    }
+}
+
 /// Which handle (if any) is under `p`. A selection with a locked layer has none.
 pub fn handle_at(doc: &Document, sel: &[NodeId], p: Point, zoom: f64) -> Option<Handle> {
     if sel.is_empty() || sel.iter().any(|i| locked_in(doc, *i)) {
@@ -1363,8 +1383,8 @@ impl Session {
                 .map(|leaf| select_target(&doc, leaf, &sel, ev.cmd))
         });
         // A press inside the selection's box that reaches nothing above it (an unfilled shape's
-        // inside, or the frame or canvas behind it) drags the selection.
-        let behind_sel = |t: Option<NodeId>| t.is_none_or(|t| sel.iter().any(|s| *s != t && doc.is_ancestor(t, *s)));
+        // inside, the frame or canvas behind it, or a layer stacked below it) drags the selection.
+        let behind_sel = |t: Option<NodeId>| t.is_none_or(|t| sel.iter().any(|s| *s != t && paints_below(&doc, t, *s)));
         let target = match sel.iter().copied().find(|s| !locked_in(&doc, *s)) {
             Some(first) if label.is_none() && !ev.shift && behind_sel(target) && selection_box(&doc, &sel).is_some_and(|q| in_quad(&q, ev.p())) => {
                 Some(first)
diff --git a/docs/roadmap.md b/docs/roadmap.md
index c22f88f8..dadaa97b 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -1,6 +1,6 @@
 # FigCraft roadmap: milestones and what's next
 
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-24 · **Change:** minor (M11 widget fields and property menus; M12 Boards: timer and voting; Installed weights of an embedded font family (#1246); `.sketch` import, best effort; Adobe Fonts found on macOS (#298); M12 Boards; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
+> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (a selected unfilled shape drags over a filled layer below it (#1370); M11 widget fields and property menus; M12 Boards: timer and voting; Installed weights of an embedded font family (#1246); `.sketch` import, best effort; Adobe Fonts found on macOS (#298); M12 Boards; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
 
 Forward-looking plan. Where FigCraft stands today: [`ROADMAP.md`](../ROADMAP.md) and
 [`target-app-parity.md`](target-app-parity.md); the full ranked list: [`gaps.md`](gaps.md). Hours
@@ -75,6 +75,7 @@ blockers.
 
 | Date | Change | Summary |
 |---|---|---|
+| 2026-10-26 | minor | Dragging a selected unfilled shape (M1, #1370): a press inside a selected stroke-only shape over a filled layer stacked below it moved that layer; the drag-from-inside fallback of #910 now treats any layer painted below the selection like the frame or canvas behind it, so the selection drags, while a layer painted above it still takes the press. Regression test in the selection behaviour suite. Numbers unchanged |
 | 2026-10-24 | minor | Installed weights of an embedded font family (M7, #1246): release builds embed some families with only a few styles (Poppins Regular, Italic and Bold), and the first font scan dropped every installed face of such a family, so an installed Poppins SemiBold or Medium was never offered (a rescan did offer them). The first scan now keeps the embedded faces, which still win for the styles they cover, and offers the installed styles they lack beside them. Regression test in the font database tests. Numbers unchanged |
 | 2026-10-24 | minor | M12: a shared board timer and voting sessions; 30–60 h → 26–54 h |
 | 2026-10-24 | minor | M11: plugin widgets take text input (editable fields, `widget.setText`) and a property menu (`widget.menu`), plugin API 4; 8–26 h → 6–22 h |

From 45326b3b1a2b0d4dc3520a2a774ca7c738669871 Mon Sep 17 00:00:00 2001
From: Muamer Mustafic <muamer.mustafic.ets@gmail.com>
Date: Mon, 26 Oct 2026 14:13:36 +0100
Subject: [PATCH 44/59] M1: a layer in the gap between selected layers still
 takes the press (#1370)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 crates/engine/src/selection_behaviour_tests.rs | 11 +++++++++++
 crates/engine/src/tools.rs                     |  8 ++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/crates/engine/src/selection_behaviour_tests.rs b/crates/engine/src/selection_behaviour_tests.rs
index 7a72c642..02abbfb7 100644
--- a/crates/engine/src/selection_behaviour_tests.rs
+++ b/crates/engine/src/selection_behaviour_tests.rs
@@ -429,6 +429,17 @@ fn a_layer_stacked_below_the_selection_doesnt_take_a_drag_from_inside_it() {
             assert!(s.undo().unwrap(), "{why}: one undo step");
         }
     }
+    // A filled layer below two selected shapes, in the gap between them (inside the selection's
+    // box but neither shape's), is still hit there.
+    let rect_at = |s: &mut Session, x: f64, w: f64| id(&ex(s, "shape.rectangle", json!({"x": x, "y": 400, "width": w, "height": 100})));
+    let gap = rect_at(&mut s, 720.0, 60.0);
+    let (a, b) = (rect_at(&mut s, 600.0, 100.0), rect_at(&mut s, 800.0, 100.0));
+    ex(&mut s, "node.set", json!({"ids": [a, b], "props": {"fills": [], "strokes": ["#000000"], "strokeWeight": 1}}));
+    ex(&mut s, "select.set", json!({"ids": [a, b]}));
+    let home = at(&s, gap);
+    drag(&mut s, (750.0, 450.0), (760.0, 460.0), NONE);
+    assert_eq!(s.selection(), vec![gap], "a layer in the gap between selected layers takes the press");
+    assert_eq!(at(&s, gap), Point::new(home.x + 10.0, home.y + 10.0));
 }
 
 #[test]
diff --git a/crates/engine/src/tools.rs b/crates/engine/src/tools.rs
index 0c1b03aa..e1f5a709 100644
--- a/crates/engine/src/tools.rs
+++ b/crates/engine/src/tools.rs
@@ -1383,8 +1383,12 @@ impl Session {
                 .map(|leaf| select_target(&doc, leaf, &sel, ev.cmd))
         });
         // A press inside the selection's box that reaches nothing above it (an unfilled shape's
-        // inside, the frame or canvas behind it, or a layer stacked below it) drags the selection.
-        let behind_sel = |t: Option<NodeId>| t.is_none_or(|t| sel.iter().any(|s| *s != t && paints_below(&doc, t, *s)));
+        // inside, the frame or canvas behind it, or a layer stacked below the selected layer the
+        // press is in) drags the selection. In a gap between selected layers, what's there is hit.
+        let in_own_box = |s: NodeId| selection_box(&doc, &[s]).is_some_and(|q| in_quad(&q, ev.p()));
+        let behind_sel = |t: Option<NodeId>| {
+            t.is_none_or(|t| sel.iter().any(|s| *s != t && (doc.is_ancestor(t, *s) || (in_own_box(*s) && paints_below(&doc, t, *s)))))
+        };
         let target = match sel.iter().copied().find(|s| !locked_in(&doc, *s)) {
             Some(first) if label.is_none() && !ev.shift && behind_sel(target) && selection_box(&doc, &sel).is_some_and(|q| in_quad(&q, ev.p())) => {
                 Some(first)

From d3db02de9ae83a38ca57e96a38553d49c8568d97 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:04:38 +0700
Subject: [PATCH 45/59] #1378: max lines only while truncation is ENDING, with
 a REST test for auto height with truncation off

---
 crates/format/src/rest/tests.rs | 11 +++++++++++
 crates/format/src/rest/text.rs  |  6 ++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/crates/format/src/rest/tests.rs b/crates/format/src/rest/tests.rs
index f9acf2ea..5ea5264f 100644
--- a/crates/format/src/rest/tests.rs
+++ b/crates/format/src/rest/tests.rs
@@ -365,6 +365,17 @@ fn text_styles_and_runs() {
     assert!(!named(&doc, "NoFills").fills.is_empty(), "text keeps its default fill");
 }
 
+#[test]
+fn max_lines_apply_only_while_truncating() {
+    let (doc, _) = one(json!([
+        {"id": "1", "name": "Auto", "type": "TEXT", "relativeTransform": at(0.0, 0.0), "size": {"x": 100, "y": 20}, "characters": "a",
+         "style": {"textAutoResize": "HEIGHT", "textTruncation": "DISABLED", "maxLines": 2}}
+    ]));
+    let NodeKind::Text(td) = &named(&doc, "Auto").kind else { panic!() };
+    assert_eq!((td.auto_resize, td.max_lines), (TextAutoResize::Height, 0));
+    assert!(!td.truncates());
+}
+
 #[test]
 fn auto_layout_constraints_and_grids() {
     let (doc, _) = one(json!([
diff --git a/crates/format/src/rest/text.rs b/crates/format/src/rest/text.rs
index 46dc7486..18e5015e 100644
--- a/crates/format/src/rest/text.rs
+++ b/crates/format/src/rest/text.rs
@@ -69,9 +69,11 @@ fn paragraph(s: &Value, td: &mut TextData) {
         // Missing means a fixed box.
         _ => TextAutoResize::None,
     };
-    td.max_lines = num(s, "maxLines").filter(|n| *n >= 1.0).map_or(0, |n| n.min(10_000.0) as u32);
+    // A line limit applies only while truncation is on; a leftover `maxLines` is ignored.
+    let ending = text(s, "textTruncation") == Some("ENDING");
+    td.max_lines = num(s, "maxLines").filter(|n| ending && *n >= 1.0).map_or(0, |n| n.min(10_000.0) as u32);
     // Auto height with a line limit keeps hugging its lines up to the limit.
-    if text(s, "textTruncation") == Some("ENDING") && !td.truncates() {
+    if ending && !td.truncates() {
         td.auto_resize = TextAutoResize::Truncate;
     }
     td.paragraph_spacing = len(s, "paragraphSpacing").unwrap_or(0.0);

From 35108cf8dcd8a4b138507be9f17b34a4d1633492 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:05:39 +0700
Subject: [PATCH 46/59] #1369: the server key field shows a key only for the
 server it was typed for

---
 crates/ui-egui/src/live.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/ui-egui/src/live.rs b/crates/ui-egui/src/live.rs
index c4ea3ed7..e16d2cfa 100644
--- a/crates/ui-egui/src/live.rs
+++ b/crates/ui-egui/src/live.rs
@@ -780,7 +780,7 @@ fn start_ui(app: &mut FigApp, ui: &mut Ui, t: &Tokens) {
             // It is remembered for the server it was typed for, so it never leaks to another one.
             ui.horizontal(|ui| {
                 widgets::label(ui, tr("Server key"), t.text);
-                let shown = app.ui.live.share_key.as_ref().map(|(_, key)| key.as_str()).unwrap_or_default();
+                let shown = app.ui.live.share_key.as_ref().and_then(|(at, key)| (*at == server).then_some(key.as_str())).unwrap_or_default();
                 if let Some(key) = widgets::secret_field_named(ui, egui::Id::unique("live_share_key"), shown, 200.0, tr("Server key")) {
                     let key: String = key.trim().chars().filter(|c| !c.is_whitespace() && !c.is_control()).take(128).collect();
                     app.ui.live.share_key = if key.is_empty() { None } else { Some((server.trim().to_string(), key)) };

From 8186c4da3f6657063b56b239fe51c44c53a64d84 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:05:40 +0700
Subject: [PATCH 47/59] #1369: Go to main component replaces Create component
 only when every selected layer is an instance

---
 crates/ui-egui/src/menus.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/ui-egui/src/menus.rs b/crates/ui-egui/src/menus.rs
index d8f5bc1b..af6de8c2 100644
--- a/crates/ui-egui/src/menus.rs
+++ b/crates/ui-egui/src/menus.rs
@@ -1025,7 +1025,7 @@ pub fn popups(app: &mut FigApp, ctx: &egui::Context) {
                     .session
                     .doc()
                     .ok()
-                    .is_some_and(|doc| ids.iter().any(|i| doc.node(*i).is_some_and(|n| matches!(n.kind, figcraft_doc::NodeKind::Instance { .. }))))
+                    .is_some_and(|doc| ids.iter().all(|i| doc.node(*i).is_some_and(|n| matches!(n.kind, figcraft_doc::NodeKind::Instance { .. }))))
                     && let Some(at) = entries.iter().position(|e| e.1 == "component.create")
                 {
                     entries[at] = (tr("Go to main component"), "component.goToMain");

From 4c101fa54930711a48d34326383b24eda69b18ae Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:05:53 +0700
Subject: [PATCH 48/59] #959: the test is named for what it checks: non-finite
 numbers are saved as zero

---
 crates/format/src/lib.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/format/src/lib.rs b/crates/format/src/lib.rs
index 31c2d21c..30f6e548 100644
--- a/crates/format/src/lib.rs
+++ b/crates/format/src/lib.rs
@@ -1020,7 +1020,7 @@ mod tests {
     }
 
     #[test]
-    fn non_finite_numbers_are_refused_at_save() {
+    fn non_finite_numbers_are_saved_as_zero() {
         let mut d = Document::new("NaN");
         let p = d.first_page().unwrap();
         let r = d.create(p, NodeKind::Rectangle, "R", 1.0, 2.0, 3.0, 4.0).unwrap();

From b87cc3ab4741c16608ab00d4b991aef70b8e4eb4 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:06:38 +0700
Subject: [PATCH 49/59] #824: a request carries main's request gate (state),
 not the old cancelled flag

---
 apps/figcraft-web/src/api.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/figcraft-web/src/api.rs b/apps/figcraft-web/src/api.rs
index d51e5eaf..621925cf 100644
--- a/apps/figcraft-web/src/api.rs
+++ b/apps/figcraft-web/src/api.rs
@@ -95,7 +95,7 @@ fn request(method: &str, params: Value) -> js_sys::Promise {
             n.set(n.get() + 1);
             n.get()
         });
-        let req = ControlRequest { id: json!(id), method: method.clone(), params: params.clone(), reply, cancelled: Default::default() };
+        let req = ControlRequest { id: json!(id), method: method.clone(), params: params.clone(), reply, state: Default::default() };
         QUEUE.with(|q| q.borrow_mut().push(req));
         WAITING.with(|w| w.borrow_mut().push((rx, resolve, reject)));
     });

From 1f1c8624c9e17fad838f4ba687af22153d5216df Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:10:04 +0700
Subject: [PATCH 50/59] #824: window.figcraft is opt-in: installed only with a
 ?control query entry

---
 apps/figcraft-web/src/main.rs        |  3 ++-
 apps/figcraft-web/src/query.rs       |  9 ++++++++-
 apps/figcraft-web/src/query_tests.rs | 15 +++++++++++++--
 apps/figcraft-web/src/web.rs         | 10 ++++++----
 docs/control-protocol.md             |  3 ++-
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/apps/figcraft-web/src/main.rs b/apps/figcraft-web/src/main.rs
index 7774e2d8..063a501e 100644
--- a/apps/figcraft-web/src/main.rs
+++ b/apps/figcraft-web/src/main.rs
@@ -13,7 +13,8 @@
 //!   (browsers block `ws://` from secure pages); serve it over `http://` on a trusted network to
 //!   join from other machines.
 //!
-//! URL query flag: `?webgl` forces the WebGL2 backend instead of WebGPU.
+//! URL query flags: `?webgl` forces the WebGL2 backend instead of WebGPU; `?control` installs
+//! `window.figcraft`, the page's control channel (`api.rs`), which is off without it.
 //!
 //! URL fragment: `#join=<invite link or join code>` joins that live session once the page has
 //! loaded, so a bookmark opens a shared file. `join` takes the rest of the fragment: put it last.
diff --git a/apps/figcraft-web/src/query.rs b/apps/figcraft-web/src/query.rs
index befeb36b..88a03b2b 100644
--- a/apps/figcraft-web/src/query.rs
+++ b/apps/figcraft-web/src/query.rs
@@ -1,4 +1,4 @@
-//! The page's URL: the invite link its fragment names.
+//! The page's URL: the invite link its fragment names, and the flags its query sets.
 
 /// The invite link in `#join=<link>` (`fragment` is `location.hash`, with or without its `#`), still
 /// escaped. The fragment, unlike the query, never leaves the browser, so the link's secret stays out
@@ -13,3 +13,10 @@ pub fn join_link(fragment: &str) -> Option<&str> {
     let start = if fragment.starts_with("join=") { 0 } else { fragment.find("&join=")? + 1 };
     fragment.get(start + "join=".len()..).filter(|link| !link.is_empty() && link.len() <= MAX)
 }
+
+/// Whether `search` (`location.search`, with or without its `?`) has a `control` entry (`?control`,
+/// or `?control=…` with any value): the page's control channel, `window.figcraft`, is installed only
+/// when it is asked for.
+pub fn control(search: &str) -> bool {
+    search.strip_prefix('?').unwrap_or(search).split('&').any(|entry| entry.split('=').next() == Some("control"))
+}
diff --git a/apps/figcraft-web/src/query_tests.rs b/apps/figcraft-web/src/query_tests.rs
index 261ebaeb..6113c0ca 100644
--- a/apps/figcraft-web/src/query_tests.rs
+++ b/apps/figcraft-web/src/query_tests.rs
@@ -1,6 +1,6 @@
-//! `#join=` in the page's URL.
+//! `#join=` and `?control` in the page's URL.
 
-use crate::query::join_link;
+use crate::query::{control, join_link};
 
 #[test]
 fn join_takes_the_rest_of_the_fragment() {
@@ -27,3 +27,14 @@ fn an_overlong_link_is_ignored() {
     assert_eq!(join_link(&long), None);
     assert_eq!(join_link(&format!("#join={}", "é".repeat(4000))), None, "length counts bytes");
 }
+
+#[test]
+fn control_is_opt_in() {
+    assert!(control("?control"));
+    assert!(control("?webgl&control=1"), "after other entries, with a value");
+    assert!(control("control"), "no leading ?");
+    assert!(!control(""));
+    assert!(!control("?"));
+    assert!(!control("?webgl"));
+    assert!(!control("?nocontrol&controls"), "only the whole entry name");
+}
diff --git a/apps/figcraft-web/src/web.rs b/apps/figcraft-web/src/web.rs
index 7e484d58..de17cc36 100644
--- a/apps/figcraft-web/src/web.rs
+++ b/apps/figcraft-web/src/web.rs
@@ -47,10 +47,12 @@ pub fn start() {
                         let link = js_sys::decode_uri_component(link).ok().and_then(|s| s.as_string()).unwrap_or_else(|| link.to_string());
                         figcraft_ui_egui::live::open_invite(&mut fig, &link);
                     }
-                    // `window.figcraft`: the page's control channel (crate::api).
-                    crate::api::connect(cc.egui_ctx.clone());
-                    if let Err(e) = crate::api::install() {
-                        log::error!("couldn't install window.figcraft: {e:?}");
+                    // `?control`: `window.figcraft`, the page's control channel (crate::api), opt-in.
+                    if crate::query::control(&query()) {
+                        crate::api::connect(cc.egui_ctx.clone());
+                        if let Err(e) = crate::api::install() {
+                            log::error!("couldn't install window.figcraft: {e:?}");
+                        }
                     }
                     Ok(Box::new(WebShell { fig }))
                 }),
diff --git a/docs/control-protocol.md b/docs/control-protocol.md
index 4e69efe4..448a9979 100644
--- a/docs/control-protocol.md
+++ b/docs/control-protocol.md
@@ -383,7 +383,8 @@ these methods in documented tools and returns images inline.
 The web build has no TCP server (a page can't listen on a socket), so it offers the same methods to the
 page itself, as promises on `window.figcraft` (`apps/figcraft-web/src/api.rs`). An agent driving FigCraft in a
 browser tab, or a host app showing it in an `<iframe>`, uses the commands it would send to the desktop
-app:
+app. It is opt-in: the page installs `window.figcraft` only when its URL has a `control` query entry
+(`index.html?control`, which can be combined with other flags: `?webgl&control`).
 
 | Call | |
 |---|---|

From 0e8c1a0437959b5a610c9a65315870cb1fa1600f Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:10:17 +0700
Subject: [PATCH 51/59] #1372: restore the blank line after the ROADMAP status
 line

---
 ROADMAP.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ROADMAP.md b/ROADMAP.md
index 3f5b03e4..23347c0e 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -3,6 +3,7 @@
 **Stage: alpha** · next: beta, ~26 points and ~162–292 h away (one Opus 5.5 agent; ~33–67 h wall-clock with 5 agents)
 
 > **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (non-ASCII layer names transliterate in code export (#1235); branches in live sessions and branch history entries, gap 17; plugin widgets take text input and a property menu (plugin API 4); boards: templates and tables; boards: a shared timer and voting sessions; boards: the dot grid, connector ends dragged to re-attach, curved connectors; Installed weights of an embedded font family (#1246); `.sketch` import, best effort (Sketch 48 and newer); CJK line breaking: JIS X 4051's line-start and line-end sets completed with the halfwidth small kana, the halfwidth and spacing (semi-)voiced sound marks, the iteration marks 〱–〵 and the halfwidth parentheses, with behaviour cases for each; Adobe Fonts found on macOS (#298); egui 0.37 hidden-capture deadline contract; Dev Mode measurements kept on the canvas and a read-only layers panel; boards: a board area row and progress entry; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
+
 FigCraft is a clean-room, open-source, pure-Rust reimplementation of the Figma design workflow,
 native on macOS, Windows, Linux and FreeBSD and in the browser, fully drivable by agents through
 the CLI, a JSON control channel and MCP. This page is the one-page summary; agents choosing work

From c208ae442c8d38397a399eefbe1894cb91029448 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:22:43 +0700
Subject: [PATCH 52/59] #840: move the CLI and MCP XML export tests into
 tests/it

---
 apps/figcraft-cli/tests/it/main.rs                  | 2 ++
 apps/figcraft-cli/tests/{ => it}/vector_drawable.rs | 1 -
 crates/mcp/tests/{ => it}/export_xml.rs             | 5 +----
 crates/mcp/tests/it/main.rs                         | 2 ++
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename apps/figcraft-cli/tests/{ => it}/vector_drawable.rs (96%)
 rename crates/mcp/tests/{ => it}/export_xml.rs (93%)

diff --git a/apps/figcraft-cli/tests/it/main.rs b/apps/figcraft-cli/tests/it/main.rs
index ae4b0488..2e628773 100644
--- a/apps/figcraft-cli/tests/it/main.rs
+++ b/apps/figcraft-cli/tests/it/main.rs
@@ -10,3 +10,5 @@ mod fonts;
 mod pdf;
 #[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 mod pdf_print;
+#[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
+mod vector_drawable;
diff --git a/apps/figcraft-cli/tests/vector_drawable.rs b/apps/figcraft-cli/tests/it/vector_drawable.rs
similarity index 96%
rename from apps/figcraft-cli/tests/vector_drawable.rs
rename to apps/figcraft-cli/tests/it/vector_drawable.rs
index 87edd74b..b99c32cd 100644
--- a/apps/figcraft-cli/tests/vector_drawable.rs
+++ b/apps/figcraft-cli/tests/it/vector_drawable.rs
@@ -1,5 +1,4 @@
 //! `figcraft-cli export … -o out.xml` (Android Vector Drawable) end to end.
-#![allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 
 use std::process::Command;
 
diff --git a/crates/mcp/tests/export_xml.rs b/crates/mcp/tests/it/export_xml.rs
similarity index 93%
rename from crates/mcp/tests/export_xml.rs
rename to crates/mcp/tests/it/export_xml.rs
index 72132750..9ae42549 100644
--- a/crates/mcp/tests/export_xml.rs
+++ b/crates/mcp/tests/it/export_xml.rs
@@ -1,9 +1,6 @@
 //! The `export` tool's Android Vector Drawable format: the XML as text, then its warnings.
-#![allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 
-mod common;
-
-use common::Client;
+use crate::common::Client;
 use serde_json::{Value, json};
 
 #[test]
diff --git a/crates/mcp/tests/it/main.rs b/crates/mcp/tests/it/main.rs
index b16fc98e..62fd1e21 100644
--- a/crates/mcp/tests/it/main.rs
+++ b/crates/mcp/tests/it/main.rs
@@ -11,6 +11,8 @@ mod common;
 #[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 mod export_hidden_roots;
 #[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
+mod export_xml;
+#[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 mod garbage;
 #[allow(clippy::unwrap_used, clippy::expect_used, clippy::panic)]
 mod inspect_response_limit;

From bf9783f30f8dc190e6119138d014695170130712 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:24:23 +0700
Subject: [PATCH 53/59] #650: mark relative overlay positions as an extra
 beyond the reference tool

---
 crates/doc/src/proto.rs    | 2 +-
 docs/prototyping-parity.md | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/crates/doc/src/proto.rs b/crates/doc/src/proto.rs
index c1f7b8ab..eaa1ccef 100644
--- a/crates/doc/src/proto.rs
+++ b/crates/doc/src/proto.rs
@@ -579,7 +579,7 @@ pub enum Action {
         /// opened it (x, y). None = right below that layer.
         #[serde(default, skip_serializing_if = "Option::is_none")]
         offset: Option<[f64; 2]>,
-        /// Figma does not have this. The .fig export writes it as a manual offset.
+        /// The incumbent has no such option. The .fig export writes it as a manual offset.
         #[serde(default, skip_serializing_if = "OverlayAnchor::is_screen")]
         anchor: OverlayAnchor,
     },
diff --git a/docs/prototyping-parity.md b/docs/prototyping-parity.md
index 2c72b575..6929aec6 100644
--- a/docs/prototyping-parity.md
+++ b/docs/prototyping-parity.md
@@ -23,8 +23,8 @@ larger real prototypes. Remaining: 2–5 h.
 ## Rules from the documentation
 
 Status: **pass** (a case in the suite holds), **fixed** (the suite found a divergence, now fixed),
-**added** (the setting was missing and now exists), **silent** (the documentation doesn't say; the
-case pins the current behaviour).
+**added** (the setting was missing and now exists), **extra** (FigCraft's own, beyond the reference
+tool; opt-in), **silent** (the documentation doesn't say; the case pins the current behaviour).
 
 | Rule | Status | Evidence / notes |
 |---|---|---|
@@ -51,7 +51,7 @@ case pins the current behaviour).
 | Open overlay: positions, background dimming, close on a click outside (on by default, can be turned off) | pass | `a_click_outside_an_overlay_closes_it_unless_turned_off`, `overlay_positions` |
 | Overlays stack; swap overlay replaces the top one; close overlay closes it | pass | `overlays_stack_swap_close_and_go_with_navigation` |
 | Manual overlay position relative to the hotspot | **added** | `offset: [x, y]` on the action, from the top-left of the layer that opens it (X / Y fields in the interaction editor; without one, below that layer); `present_delay_tests` |
-| Overlay position presets relative to the layer that opens it, inside or outside (not in Figma: [forum request](https://forum.figma.com/suggest-a-feature-11/set-overlay-position-relative-to-element-not-to-page-35366)) | **added** | `anchor: triggerInside \| triggerOutside` on the open overlay action; Relative to (Whole screen / Trigger layer) and Inside / Outside in the interaction editor. Outside: top presets above the layer, bottom presets below it, edges lined up (a dropdown is Bottom left + Outside); Center centres it on the layer. No flipping at the screen edge. `.fig` export writes a manual offset; `proto_overlay_anchor_tests`, `present_overlay_anchor_tests`, MCP `overlay_anchor` |
+| Overlay position presets relative to the layer that opens it, inside or outside (not in Figma: [forum request](https://forum.figma.com/suggest-a-feature-11/set-overlay-position-relative-to-element-not-to-page-35366)) | **extra** | `anchor: triggerInside \| triggerOutside` on the open overlay action; Relative to (Whole screen / Trigger layer) and Inside / Outside in the interaction editor. Outside: top presets above the layer, bottom presets below it, edges lined up (a dropdown is Bottom left + Outside); Center centres it on the layer. No flipping at the screen edge. `.fig` export writes a manual offset; `proto_overlay_anchor_tests`, `present_overlay_anchor_tests`, MCP `overlay_anchor` |
 | Delay on mouse enter / leave / down / up | **added** | `delayMs` on the interaction, a Delay field in the editor; fires once after the delay while its screen or overlay still shows (a pointer that leaves early: silent, it still fires); `mouse_triggers_wait_out_their_delay` |
 | Open link | pass | always a new tab or browser window (opening in place would leave the prototype) |
 | Change to: another variant of the instance, in place, with the interaction's animation | pass | `interactive_components_change_in_place` |

From 2a8db20d48a65b0ca4c375b04955102227a8ec73 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:28:45 +0700
Subject: [PATCH 54/59] #726: drop the ROADMAP rows

---
 ROADMAP.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index d2aa433b..e403b02d 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -132,7 +132,6 @@ Ranked; detail and milestones in [`docs/roadmap.md`](docs/roadmap.md).
 
 ## Progress log
 
-- **2026-10-17** · Variables as Dart constants for Flutter (M6): `variable.export {format: "dart"}` and Local variables ▸ Export… ▸ Dart constants for Flutter write a Dart file with an `abstract final class` per collection and mode (the default mode named after the collection, the others after the collection and the mode) and a `static const` `Color`, `double`, `String` or `bool` per variable. Names become camelCase Dart identifiers (kept apart when two read the same, reserved words escaped), strings are escaped for Dart, and aliases are resolved to their value in that mode, so each class stands alone. Checked with the Flutter analyzer on a generated file used in `const` widgets. Tests in `variables_io_tests`. Numbers unchanged.
 - **2026-10-25** · egui 0.37 capture lifecycle: screenshots with hidden or unknown visibility queue, request a hidden paint, and expire after 60 seconds if no capture arrives (headless-tested contract). Logic-only edits, saves and inspection continue while hidden. Native visible GUI and forced hidden-window paint, browser and Wayland behavior remain unqualified; parity percentages are unchanged.
 - **2026-10-24** · Open, Save and the folder dialogs start in the folder of the last file or folder picked in the run (#1290): the Linux portal does not remember it between dialogs as the macOS and Windows panels do. A folder deleted since falls back to the system's choice. No numbers change.
 - **2026-10-24** · Boards (M12): board pages get a dot grid under their layers (drawn by the canvas render after the page colour, thinned out when zoomed out); a selected connector shows its ends as handles, and dragging one onto another object re-attaches it there, onto empty canvas leaves it free (`board.reattach`, one undo step, also over MCP); connectors can be curved, and elbows go around the objects they join when the short way would cross them. Checked in the app, through MCP and in the web build ([boards-parity](docs/boards-parity.md)).
@@ -348,7 +347,6 @@ Ranked; detail and milestones in [`docs/roadmap.md`](docs/roadmap.md).
 
 | Date | Change | Summary |
 |---|---|---|
-| 2026-10-17 | minor | Variables as Dart constants for Flutter (M6): `variable.export {format: "dart"}` and Export… ▸ Dart constants for Flutter in Local variables; a class per collection and mode, aliases resolved, names made valid Dart. Numbers unchanged. |
 | 2026-10-25 | minor | egui 0.37 capture lifecycle: screenshots with hidden or unknown visibility queue, request a hidden paint, and expire after 60 seconds if no capture arrives (headless-tested contract). Logic-only edits, saves and inspection continue while hidden. Native visible GUI and forced hidden-window paint, browser and Wayland behavior remain unqualified; parity percentages are unchanged. |
 | 2026-10-24 | minor | Server memory (#1134): when the last person leaves a file nobody edited, figcraft-server keeps the client ids it issued in the log instead of rewriting the snapshot (compaction still follows `compact_after`/`compact_mb` and edits), and a snapshot is encoded straight into its file buffer, without a second copy of the body; the file format is unchanged. Numbers unchanged |
 | 2026-10-24 | minor | Boards (M12): a dot grid on board pages under the layers, connector ends dragged onto other objects or empty canvas (`board.reattach`), curved connectors, elbows that go around what they join. Boards row ~35% → ~37%, ~20% → ~21%, 30–60 h → 28–56 h; headline numbers unchanged (boards are outside the weighted sum) |

From 8653597c3d448dca992d97ef6009f2505d244a07 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:19:11 +0700
Subject: [PATCH 55/59] #664: Vue layer trees import connected components in
 <script setup>

---
 crates/engine/src/code_connect_tests.rs | 14 ++++++++++++++
 crates/engine/src/component_codegen.rs  | 24 +++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/crates/engine/src/code_connect_tests.rs b/crates/engine/src/code_connect_tests.rs
index 50db0ea8..1ee785e6 100644
--- a/crates/engine/src/code_connect_tests.rs
+++ b/crates/engine/src/code_connect_tests.rs
@@ -255,3 +255,17 @@ fn vue_links_are_a_default_import_with_quoted_bindings() {
     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 `<script setup>`, not before the template.
+    let code = code(&mut s, screen, "vue");
+    let want = "<script setup lang=\"ts\">\n\nimport Card from \"./Card.vue\";\n\n</script>\n\n<template>\n";
+    assert!(code.starts_with(want), "{code}");
+    assert_eq!(code.matches("import Card").count(), 1, "{code}");
+}
diff --git a/crates/engine/src/component_codegen.rs b/crates/engine/src/component_codegen.rs
index 69b1e05d..2bbb2e10 100644
--- a/crates/engine/src/component_codegen.rs
+++ b/crates/engine/src/component_codegen.rs
@@ -147,7 +147,29 @@ pub fn code(doc: &Document, id: NodeId, lang: CodeLang) -> String {
             }
         },
     };
-    crate::code_connect::with_imports(&crate::code_connect::tree_imports(doc, id, lang), code)
+    let imports = crate::code_connect::tree_imports(doc, id, lang);
+    if lang == CodeLang::Vue && !imports.is_empty() {
+        return vue_with_imports(&imports, code);
+    }
+    crate::code_connect::with_imports(&imports, code)
+}
+
+/// A Vue single-file component imports in its `<script setup>`, which is added when it has none.
+fn vue_with_imports(imports: &[String], code: String) -> String {
+    const SETUP: &str = "<script setup lang=\"ts\">\n\n";
+    let lines = imports.join("\n");
+    // `find` returns char boundaries, so the splits below are safe.
+    if let Some(at) = code.find(SETUP).map(|at| at + SETUP.len()) {
+        let (head, tail) = code.split_at(at);
+        return format!("{head}{lines}\n\n{tail}");
+    }
+    match code.find("<template>") {
+        Some(at) => {
+            let (head, tail) = code.split_at(at);
+            format!("{head}{SETUP}{lines}\n\n</script>\n\n{tail}")
+        }
+        None => crate::code_connect::with_imports(imports, code),
+    }
 }
 
 fn is_component(doc: &Document, id: NodeId) -> bool {

From a683e510451f80c01ba37acebdaae76ec7eb934c Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:31:15 +0700
Subject: [PATCH 56/59] #726: Dart names never shadow Dart types (classes and
 constants)

---
 crates/engine/src/cmd/variables_io.rs   | 13 +++++++++++--
 crates/engine/src/variables_io_tests.rs | 22 ++++++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/crates/engine/src/cmd/variables_io.rs b/crates/engine/src/cmd/variables_io.rs
index 853209f4..dd48dca6 100644
--- a/crates/engine/src/cmd/variables_io.rs
+++ b/crates/engine/src/cmd/variables_io.rs
@@ -116,12 +116,16 @@ const DART_RESERVED: &[&str] = &[
     "while", "with", "yield",
 ];
 
-/// Words Dart takes as a member's name but not as a class's.
+/// Dart's built-in identifiers (no type may take them), and the types the constants use or name,
+/// which a class or constant of that name would shadow.
 const DART_BUILT_IN: &[&str] = &[
     "abstract",
     "as",
+    "bool",
+    "Color",
     "covariant",
     "deferred",
+    "double",
     "dynamic",
     "export",
     "extension",
@@ -131,15 +135,20 @@ const DART_BUILT_IN: &[&str] = &[
     "get",
     "implements",
     "import",
+    "int",
     "interface",
     "late",
     "library",
+    "List",
     "mixin",
+    "num",
+    "Object",
     "operator",
     "part",
     "required",
     "set",
     "static",
+    "String",
     "typedef",
 ];
 
@@ -160,7 +169,7 @@ fn dart_ident(name: &str, pascal: bool) -> String {
     if out.is_empty() || out.starts_with(|c: char| c.is_ascii_digit()) {
         out.insert(0, if pascal { 'V' } else { 'v' });
     }
-    if DART_RESERVED.contains(&out.as_str()) || (pascal && DART_BUILT_IN.contains(&out.as_str())) {
+    if DART_RESERVED.contains(&out.as_str()) || DART_BUILT_IN.contains(&out.as_str()) {
         out.push('_');
     }
     out
diff --git a/crates/engine/src/variables_io_tests.rs b/crates/engine/src/variables_io_tests.rs
index 8cc6be80..482c220a 100644
--- a/crates/engine/src/variables_io_tests.rs
+++ b/crates/engine/src/variables_io_tests.rs
@@ -422,6 +422,28 @@ fn dart_export_names_are_valid_dart() {
     }
 }
 
+#[test]
+fn dart_export_names_never_shadow_dart_types() {
+    let mut s = Session::new();
+    ex(&mut s, "variable.createCollection", json!({"name": "Color"}));
+    ex(&mut s, "variable.createCollection", json!({"name": "String"}));
+    for name in ["double", "int", "bool", "num"] {
+        ex(&mut s, "variable.create", json!({"collection": "Color", "name": name, "type": "number", "value": 1}));
+    }
+    let dart = ex(&mut s, "variable.export", json!({"format": "dart"}))["text"].as_str().unwrap().to_string();
+    // A class `Color` would hide dart:ui's `Color`, a constant `double` the type of those after it.
+    for want in [
+        "abstract final class Color_ {",
+        "abstract final class String_ {",
+        "static const double double_ = 1;",
+        "static const double int_ = 1;",
+        "static const double bool_ = 1;",
+        "static const double num_ = 1;",
+    ] {
+        assert!(dart.contains(want), "{want:?} in\n{dart}");
+    }
+}
+
 #[test]
 fn paints_replaced_through_node_set_keep_unchanged_stop_bindings() {
     let mut s = Session::new();

From 5a5175cc7ec67e3b32a872c2837a58cdaf3580d8 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:35:17 +0700
Subject: [PATCH 57/59] #726: write Dart numbers at full precision

---
 crates/engine/src/cmd/variables_io.rs   | 8 +++++++-
 crates/engine/src/variables_io_tests.rs | 8 ++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/crates/engine/src/cmd/variables_io.rs b/crates/engine/src/cmd/variables_io.rs
index dd48dca6..6dd57615 100644
--- a/crates/engine/src/cmd/variables_io.rs
+++ b/crates/engine/src/cmd/variables_io.rs
@@ -203,6 +203,12 @@ fn dart_string(text: &str) -> String {
     out
 }
 
+/// `x` at full precision as a Dart literal: whole numbers as integers (`4`), the rest in Rust's
+/// shortest round-trip form (`0.125`, `1e21`), which Dart reads as the same double.
+fn dart_number(x: f64) -> String {
+    if x.fract() == 0.0 && x.abs() < 1e15 { format!("{x}") } else { format!("{x:?}") }
+}
+
 /// `text` on one line of a Dart comment.
 fn dart_comment(text: &str) -> String {
     text.chars().map(|c| if c.is_control() { ' ' } else { c }).collect()
@@ -230,7 +236,7 @@ fn dart(vars: &Variables, colls: &[&Collection]) -> String {
                         let [r, g, b, a] = col.to_rgba8();
                         ("Color", format!("Color(0x{a:02X}{r:02X}{g:02X}{b:02X})"))
                     }
-                    Some(VariableValue::Number(x)) if x.is_finite() => ("double", trim_num(x)),
+                    Some(VariableValue::Number(x)) if x.is_finite() => ("double", dart_number(x)),
                     Some(VariableValue::String(t)) => ("String", format!("'{}'", dart_string(&t))),
                     Some(VariableValue::Boolean(b)) => ("bool", b.to_string()),
                     _ => continue,
diff --git a/crates/engine/src/variables_io_tests.rs b/crates/engine/src/variables_io_tests.rs
index 482c220a..e8a0239e 100644
--- a/crates/engine/src/variables_io_tests.rs
+++ b/crates/engine/src/variables_io_tests.rs
@@ -430,6 +430,9 @@ fn dart_export_names_never_shadow_dart_types() {
     for name in ["double", "int", "bool", "num"] {
         ex(&mut s, "variable.create", json!({"collection": "Color", "name": name, "type": "number", "value": 1}));
     }
+    ex(&mut s, "variable.create", json!({"collection": "Color", "name": "ratio", "type": "number", "value": 0.125}));
+    ex(&mut s, "variable.create", json!({"collection": "Color", "name": "third", "type": "number", "value": 1.0 / 3.0}));
+    ex(&mut s, "variable.create", json!({"collection": "Color", "name": "huge", "type": "number", "value": 1.5e21}));
     let dart = ex(&mut s, "variable.export", json!({"format": "dart"}))["text"].as_str().unwrap().to_string();
     // A class `Color` would hide dart:ui's `Color`, a constant `double` the type of those after it.
     for want in [
@@ -439,6 +442,11 @@ fn dart_export_names_never_shadow_dart_types() {
         "static const double int_ = 1;",
         "static const double bool_ = 1;",
         "static const double num_ = 1;",
+        // Numbers keep their full precision.
+        "static const double ratio = 0.125;",
+        "static const double third = 0.3333333333333333;",
+        // Too big for an exact integer literal: an exponent, still a double.
+        "static const double huge = 1.5e21;",
     ] {
         assert!(dart.contains(want), "{want:?} in\n{dart}");
     }

From 56ed786e0e0fad06c2ff79b1c74d5ff74b540502 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 23:36:54 +0700
Subject: [PATCH 58/59] #726: reuse codegen's kotlin_color for Dart colours

---
 crates/engine/src/cmd/variables_io.rs | 5 +----
 crates/engine/src/codegen.rs          | 3 ++-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/crates/engine/src/cmd/variables_io.rs b/crates/engine/src/cmd/variables_io.rs
index 6dd57615..6bd5bb40 100644
--- a/crates/engine/src/cmd/variables_io.rs
+++ b/crates/engine/src/cmd/variables_io.rs
@@ -232,10 +232,7 @@ fn dart(vars: &Variables, colls: &[&Collection]) -> String {
             let modes = BTreeMap::from([(c.id.clone(), m.id.clone())]);
             for (v, name) in &names {
                 let (ty, value) = match vars.resolve(&v.id, &modes) {
-                    Some(VariableValue::Color(col)) => {
-                        let [r, g, b, a] = col.to_rgba8();
-                        ("Color", format!("Color(0x{a:02X}{r:02X}{g:02X}{b:02X})"))
-                    }
+                    Some(VariableValue::Color(col)) => ("Color", crate::codegen::kotlin_color(col)),
                     Some(VariableValue::Number(x)) if x.is_finite() => ("double", dart_number(x)),
                     Some(VariableValue::String(t)) => ("String", format!("'{}'", dart_string(&t))),
                     Some(VariableValue::Boolean(b)) => ("bool", b.to_string()),
diff --git a/crates/engine/src/codegen.rs b/crates/engine/src/codegen.rs
index 520728bc..55d1d9a4 100644
--- a/crates/engine/src/codegen.rs
+++ b/crates/engine/src/codegen.rs
@@ -1083,7 +1083,8 @@ fn swift_layer(ctx: &Ctx, n: &Node, depth: usize, out: &mut String, extra: &[Str
 
 // ------------------------------------------------------------------ Jetpack Compose
 
-fn kotlin_color(c: Color) -> String {
+/// `Color(0xAARRGGBB)`, as Compose and Flutter both write a colour.
+pub(crate) fn kotlin_color(c: Color) -> String {
     let [r, g, b, a] = c.to_rgba8();
     format!("Color(0x{a:02X}{r:02X}{g:02X}{b:02X})")
 }

From 502098e02a1dcf092627f204be87895574e7c3a1 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 27 Oct 2026 00:32:35 +0700
Subject: [PATCH 59/59] #840: the status lines without the merge's conflict
 markers

---
 docs/file-format-parity.md | 4 ----
 docs/roadmap.md            | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/docs/file-format-parity.md b/docs/file-format-parity.md
index ed51264c..90013523 100644
--- a/docs/file-format-parity.md
+++ b/docs/file-format-parity.md
@@ -1,10 +1,6 @@
 # File format parity
 
-<<<<<<< HEAD
 > **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (Android Vector Drawable (XML) export; Save and auto-save don't replace changes another app made to the open file (#1330); `.sketch` import, best effort, Sketch 48 and newer; the PNG row names ignore overlapping layers and where include bounding box is offered; the Fonts table's missing-font row describes the Missing fonts window; `.figcraft` carries the file kind (boards); `.fig` import: resized instances and variable modes by asset key; atomic saves; auto-save; SVG export clip of nested frames; SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source; REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732)) · **Target:** Figma Design (desktop app 126.10.7)
-=======
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (Save and auto-save don't replace changes another app made to the open file (#1330); `.sketch` import, best effort, Sketch 48 and newer; the PNG row names ignore overlapping layers and where include bounding box is offered; the Fonts table's missing-font row describes the Missing fonts window; `.figcraft` carries the file kind (boards); `.fig` import: resized instances and variable modes by asset key; atomic saves; auto-save; SVG export clip of nested frames; SVG/PDF export depth refusal (#208); `.fig` export: instance sizes, variables with modes, shared styles, variable-width strokes; `.fig` export: written files checked by opening them in other software; experimental `.fig` export; export and inspect behaviour suite and fixes; .fig import: editable vector networks and more layer kinds; embedded image colour profiles; `.fig` import, best effort; animated GIF fills and TIFF images; last major: created, formats from the installed Figma's Info.plist and help center, ours from source; REST import keeps slot layers and instances' slot content (#792); REST import reads grid track sizes (#465); `.fig` import fidelity from the community batches, budgets for large files, the import report, a `.fig` copy from Save as, paste from another design app; instance layers' size and resizing and Hug on import (#731, #732)) · **Target:** Figma Design (desktop app 126.10.7)
->>>>>>> origin/main
 
 Every format Figma reads or writes, with FigCraft's support. Sources: `Info.plist` of
 `/Applications/Figma.app` (document types only; nothing inside the bundle's code was read), Figma's
diff --git a/docs/roadmap.md b/docs/roadmap.md
index 86b95df8..14d734ba 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -1,10 +1,6 @@
 # FigCraft roadmap: milestones and what's next
 
-<<<<<<< HEAD
 > **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (Android Vector Drawable export; a selected unfilled shape drags over a filled layer below it (#1370); text truncation fills the last line, survives resizing, and auto height takes Max lines (#1375, #1376, #1377); M11 widget fields and property menus; M12 Boards: timer and voting; Installed weights of an embedded font family (#1246); `.sketch` import, best effort; Adobe Fonts found on macOS (#298); M12 Boards; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
-=======
-> **Last reviewed:** 2026-10-10 · **Last updated:** 2026-10-26 · **Change:** minor (a selected unfilled shape drags over a filled layer below it (#1370); text truncation fills the last line, survives resizing, and auto height takes Max lines (#1375, #1376, #1377); M11 widget fields and property menus; M12 Boards: timer and voting; Installed weights of an embedded font family (#1246); `.sketch` import, best effort; Adobe Fonts found on macOS (#298); M12 Boards; community fixes in #507, #510, #529 and #530: auto-save, a text box by dragging, batch step references, removing someone from a live session, Russian and Turkish catalogs reviewed, Czech and Indonesian drafts, the Japanese draft completed, zoom previews, the web clipboard, Alt-drag snapping and Cmd+D repeat, recovery copies, crash and rollback fixes, colour emoji, `.fig` import fixes; earlier changes are in the revision history below) · **Target:** Figma Design (desktop app 126.10.7)
->>>>>>> origin/main
 
 Forward-looking plan. Where FigCraft stands today: [`ROADMAP.md`](../ROADMAP.md) and
 [`target-app-parity.md`](target-app-parity.md); the full ranked list: [`gaps.md`](gaps.md). Hours