@pixerate/editor 0.22.0 → 0.24.0

package/dist/canvas/index.js

@@ -1,3 +1,7 @@
+import {
+  DEFAULT_ARRANGE_SHORTCUTS,
+  matchArrangeShortcut
+} from "../chunk-7DWMJCAT.js";
 import {
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
@@ -1073,6 +1077,10 @@ function invertNodeUpdates(nodes, updates) {
 }
 
 // src/canvas/guides.ts
+function snapToGrid(value, spacing, origin = 0) {
+  if (!(spacing > 0) || !Number.isFinite(spacing)) return value;
+  return Math.round((value - origin) / spacing) * spacing + origin;
+}
 function buildAxis(entries) {
   entries.sort((a, b) => a.value - b.value);
   return {
@@ -1229,8 +1237,10 @@ function computeSnapGuides(moving, targets, options = {}) {
   };
   const sx = snapAxis(true);
   const sy = snapAxis(false);
-  const dx = sx.delta ?? 0;
-  const dy = sy.delta ?? 0;
+  const grid = options.gridSize ?? 0;
+  const gridDelta = (v, origin) => snapToGrid(v, grid, origin) - v;
+  const dx = sx.delta ?? (grid > 0 ? gridDelta(moving.x, options.gridOrigin?.x ?? 0) : 0);
+  const dy = sy.delta ?? (grid > 0 ? gridDelta(moving.y, options.gridOrigin?.y ?? 0) : 0);
   const snapped = { x: moving.x + dx, y: moving.y + dy, width: moving.width, height: moving.height };
   const guides = [];
   const alignmentGuides = (horizontal) => {
@@ -1244,12 +1254,12 @@ function computeSnapGuides(moving, targets, options = {}) {
     if (useCentres) {
       lines.push({ value: start + size / 2, kind: "centre", axis: horizontal ? index.centreX : index.centreY });
     }
-    for (const line of lines) {
-      const aligned = matches(line.axis, line.value, eps);
+    for (const line2 of lines) {
+      const aligned = matches(line2.axis, line2.value, eps);
       if (aligned.length === 0) continue;
       const span = boundsOf([snapped, ...aligned]);
       guides.push(
-        horizontal ? { orientation: "vertical", kind: line.kind, x1: line.value, y1: span.y, x2: line.value, y2: span.y + span.height } : { orientation: "horizontal", kind: line.kind, x1: span.x, y1: line.value, x2: span.x + span.width, y2: line.value }
+        horizontal ? { orientation: "vertical", kind: line2.kind, x1: line2.value, y1: span.y, x2: line2.value, y2: span.y + span.height } : { orientation: "horizontal", kind: line2.kind, x1: span.x, y1: line2.value, x2: span.x + span.width, y2: line2.value }
       );
     }
   };
@@ -1390,16 +1400,16 @@ function findConnectorSnap(pointer, targets, options = {}) {
     if (pointer.x < rect.x - radius || pointer.x > rect.x + rect.width + radius || pointer.y < rect.y - radius || pointer.y > rect.y + rect.height + radius) {
       continue;
     }
-    const inside = pointer.x >= rect.x && pointer.x <= rect.x + rect.width && pointer.y >= rect.y && pointer.y <= rect.y + rect.height;
+    const inside2 = pointer.x >= rect.x && pointer.x <= rect.x + rect.width && pointer.y >= rect.y && pointer.y <= rect.y + rect.height;
     for (const position of target.positions ?? all) {
       const point = options.mode === "edge" ? closestPointOnSide(rect, position, pointer) : handlePoint(rect, position);
       const sidePoint = closestPointOnSide(rect, position, pointer);
       const rank = Math.hypot(pointer.x - sidePoint.x, pointer.y - sidePoint.y);
       const distance = Math.hypot(pointer.x - point.x, pointer.y - point.y);
-      if (!inside && rank > radius) continue;
-      const better = !best || inside && !best.inside || inside === best.inside && rank < best.rank;
+      if (!inside2 && rank > radius) continue;
+      const better = !best || inside2 && !best.inside || inside2 === best.inside && rank < best.rank;
       if (better) {
-        best = { nodeId: target.id, position, side: positionToSide(position), point, distance, inside, rank };
+        best = { nodeId: target.id, position, side: positionToSide(position), point, distance, inside: inside2, rank };
       }
     }
   }
@@ -1567,10 +1577,10 @@ var CanvasScenesStore = class {
     return this.update(id, { name });
   }
   /** Moves a scene to `toIndex` (clamped). */
-  move(id, toIndex) {
+  move(id, toIndex2) {
     const from = this.scenes.findIndex((s) => s.id === id);
     if (from === -1) return;
-    const to = Math.max(0, Math.min(this.scenes.length - 1, Math.trunc(toIndex)));
+    const to = Math.max(0, Math.min(this.scenes.length - 1, Math.trunc(toIndex2)));
     if (from === to) return;
     const scenes = [...this.scenes];
     const [scene] = scenes.splice(from, 1);
@@ -1662,49 +1672,6 @@ function fitViewportToNodes(nodes, size, ids, options = {}) {
   return bounds ? fitViewportToRect(bounds, size, options) : null;
 }
 
-// src/canvas/arrangeShortcuts.ts
-var DEFAULT_ARRANGE_SHORTCUTS = [
-  { action: "alignLeft", code: "KeyA", alt: true, label: "Alt+A" },
-  { action: "alignCenter", code: "KeyH", alt: true, label: "Alt+H" },
-  { action: "alignRight", code: "KeyD", alt: true, label: "Alt+D" },
-  { action: "alignTop", code: "KeyW", alt: true, label: "Alt+W" },
-  { action: "alignMiddle", code: "KeyV", alt: true, label: "Alt+V" },
-  { action: "alignBottom", code: "KeyS", alt: true, label: "Alt+S" },
-  { action: "distributeHorizontal", code: "KeyH", alt: true, shift: true, label: "Alt+Shift+H" },
-  { action: "distributeVertical", code: "KeyV", alt: true, shift: true, label: "Alt+Shift+V" },
-  { action: "lock", code: "KeyL", mod: true, label: "Mod+L" },
-  { action: "unlock", code: "KeyL", mod: true, alt: true, label: "Mod+Alt+L" },
-  { action: "bringForward", code: "BracketRight", mod: true, label: "Mod+]" },
-  { action: "sendBackward", code: "BracketLeft", mod: true, label: "Mod+[" },
-  { action: "bringToFront", code: "BracketRight", mod: true, alt: true, label: "Mod+Alt+]" },
-  { action: "sendToBack", code: "BracketLeft", mod: true, alt: true, label: "Mod+Alt+[" },
-  { action: "nextScene", code: "PageDown", label: "PageDown" },
-  { action: "previousScene", code: "PageUp", label: "PageUp" }
-];
-var KEY_TO_CODE = {
-  "]": "BracketRight",
-  "[": "BracketLeft",
-  PageDown: "PageDown",
-  PageUp: "PageUp"
-};
-function eventCode(event) {
-  if (event.code) return event.code;
-  if (KEY_TO_CODE[event.key]) return KEY_TO_CODE[event.key];
-  if (/^[a-z]$/i.test(event.key)) return `Key${event.key.toUpperCase()}`;
-  return event.key;
-}
-function matchArrangeShortcut(event, bindings = DEFAULT_ARRANGE_SHORTCUTS) {
-  if (isEventFromTextInput(event)) return null;
-  const code = eventCode(event);
-  const mod = event.metaKey || event.ctrlKey;
-  for (const binding of bindings) {
-    if (binding.code === code && !!binding.mod === mod && !!binding.alt === event.altKey && !!binding.shift === event.shiftKey) {
-      return binding.action;
-    }
-  }
-  return null;
-}
-
 // src/canvas/polygonBoolean.ts
 function ringSignedArea(ring) {
   let sum = 0;
@@ -1885,9 +1852,9 @@ function splitPass(segments, pool, eps) {
       ]) {
         for (const p of [other.a, other.b]) {
           if (p.id === seg.a.id || p.id === seg.b.id) continue;
-          const { t: t2, dist } = project(seg.a, seg.b, p);
+          const { t: t2, dist: dist2 } = project(seg.a, seg.b, p);
           const len = Math.hypot(seg.b.x - seg.a.x, seg.b.y - seg.a.y);
-          if (dist <= eps && t2 * len > eps && (1 - t2) * len > eps) {
+          if (dist2 <= eps && t2 * len > eps && (1 - t2) * len > eps) {
             addSplit(split, t2, p);
             touched = true;
           }
@@ -2077,8 +2044,8 @@ function removeCollinear(ring, eps) {
       const dy = nxt[1] - prev[1];
       const len = Math.hypot(dx, dy);
       const cross = (cur[0] - prev[0]) * dy - (cur[1] - prev[1]) * dx;
-      const dot = (cur[0] - prev[0]) * dx + (cur[1] - prev[1]) * dy;
-      if (len > 0 && Math.abs(cross) / len <= eps && dot > 0 && dot < len * len) {
+      const dot2 = (cur[0] - prev[0]) * dx + (cur[1] - prev[1]) * dy;
+      if (len > 0 && Math.abs(cross) / len <= eps && dot2 > 0 && dot2 < len * len) {
         changed = true;
         continue;
       }
@@ -2174,6 +2141,347 @@ function dividePolygons(operands, options = {}) {
   return pieces;
 }
 
+// src/canvas/curveFit.ts
+function formatNumber(value, precision) {
+  const factor = 10 ** precision;
+  const rounded = Math.round(value * factor) / factor;
+  return Object.is(rounded, -0) ? "0" : String(rounded);
+}
+var MAX_REPARAM = 6;
+var sub = (a, b) => [a[0] - b[0], a[1] - b[1]];
+var add = (a, v, s = 1) => [a[0] + v[0] * s, a[1] + v[1] * s];
+var dot = (a, b) => a[0] * b[0] + a[1] * b[1];
+var dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
+function unit(v) {
+  const l = Math.hypot(v[0], v[1]);
+  return l > 1e-12 && Number.isFinite(l) ? [v[0] / l, v[1] / l] : null;
+}
+function evalCubic(c, t) {
+  const s = 1 - t;
+  const b0 = s * s * s;
+  const b1 = 3 * s * s * t;
+  const b2 = 3 * s * t * t;
+  const b3 = t * t * t;
+  return [
+    b0 * c.p0[0] + b1 * c.p1[0] + b2 * c.p2[0] + b3 * c.p3[0],
+    b0 * c.p0[1] + b1 * c.p1[1] + b2 * c.p2[1] + b3 * c.p3[1]
+  ];
+}
+function cubicPointAt(c, t) {
+  return evalCubic(c, t);
+}
+function dedup(points) {
+  const out = [];
+  for (const p of points) {
+    if (!Number.isFinite(p[0]) || !Number.isFinite(p[1])) continue;
+    if (out.length === 0 || dist(out[out.length - 1], p) > 1e-12) out.push(p);
+  }
+  return out;
+}
+function chordParams(pts) {
+  const u = [0];
+  let acc = 0;
+  for (let i = 1; i < pts.length; i++) {
+    acc += dist(pts[i - 1], pts[i]);
+    u.push(acc);
+  }
+  return acc > 0 ? u.map((x) => x / acc) : u;
+}
+function generate(pts, u, t0, t1) {
+  const p0 = pts[0];
+  const p3 = pts[pts.length - 1];
+  const dirIn = [-t1[0], -t1[1]];
+  let c00 = 0;
+  let c01 = 0;
+  let c11 = 0;
+  let x0 = 0;
+  let x1 = 0;
+  for (let i = 0; i < pts.length; i++) {
+    const t = u[i];
+    const s = 1 - t;
+    const b0 = s * s * s;
+    const b1 = 3 * s * s * t;
+    const b2 = 3 * s * t * t;
+    const b3 = t * t * t;
+    const a0 = [t0[0] * b1, t0[1] * b1];
+    const a1 = [dirIn[0] * b2, dirIn[1] * b2];
+    c00 += dot(a0, a0);
+    c01 += dot(a0, a1);
+    c11 += dot(a1, a1);
+    const tmp = [
+      pts[i][0] - (p0[0] * (b0 + b1) + p3[0] * (b2 + b3)),
+      pts[i][1] - (p0[1] * (b0 + b1) + p3[1] * (b2 + b3))
+    ];
+    x0 += dot(a0, tmp);
+    x1 += dot(a1, tmp);
+  }
+  const det = c00 * c11 - c01 * c01;
+  const seg = dist(p0, p3);
+  const eps = 1e-6 * seg;
+  let al = seg / 3;
+  let ar = seg / 3;
+  if (Math.abs(det) > 1e-12) {
+    al = (x0 * c11 - x1 * c01) / det;
+    ar = (c00 * x1 - c01 * x0) / det;
+  }
+  if (!Number.isFinite(al) || !Number.isFinite(ar) || al < eps || ar < eps) {
+    al = seg / 3;
+    ar = seg / 3;
+  }
+  const cap = seg * 4 + 1e-9;
+  al = Math.min(al, cap);
+  ar = Math.min(ar, cap);
+  return { p0, p1: add(p0, t0, al), p2: add(p3, dirIn, ar), p3 };
+}
+function maxError(pts, c, u) {
+  let e = 0;
+  let idx = pts.length >> 1;
+  for (let i = 0; i < pts.length; i++) {
+    const d = dist(evalCubic(c, u[i]), pts[i]);
+    if (d > e) {
+      e = d;
+      idx = i;
+    }
+  }
+  return [e, idx];
+}
+function newton(c, p, t) {
+  const s = 1 - t;
+  const q = evalCubic(c, t);
+  const d1 = [
+    3 * (s * s * (c.p1[0] - c.p0[0]) + 2 * s * t * (c.p2[0] - c.p1[0]) + t * t * (c.p3[0] - c.p2[0])),
+    3 * (s * s * (c.p1[1] - c.p0[1]) + 2 * s * t * (c.p2[1] - c.p1[1]) + t * t * (c.p3[1] - c.p2[1]))
+  ];
+  const d2 = [
+    6 * (s * (c.p2[0] - 2 * c.p1[0] + c.p0[0]) + t * (c.p3[0] - 2 * c.p2[0] + c.p1[0])),
+    6 * (s * (c.p2[1] - 2 * c.p1[1] + c.p0[1]) + t * (c.p3[1] - 2 * c.p2[1] + c.p1[1]))
+  ];
+  const diff = [q[0] - p[0], q[1] - p[1]];
+  const num = dot(diff, d1);
+  const den = dot(d1, d1) + dot(diff, d2);
+  if (Math.abs(den) < 1e-12) return t;
+  const nt = t - num / den;
+  return Number.isFinite(nt) ? Math.min(1, Math.max(0, nt)) : t;
+}
+function fitSingleFrom(pts, u, t0, t1) {
+  let best = generate(pts, u, t0, t1);
+  let [bestErr, bestSplit] = maxError(pts, best, u);
+  const params = u.slice();
+  for (let round = 0; round < MAX_REPARAM; round++) {
+    for (let i = 0; i < params.length; i++) params[i] = newton(best, pts[i], params[i]);
+    const c = generate(pts, params, t0, t1);
+    const [e, s] = maxError(pts, c, params);
+    if (e < bestErr) {
+      best = c;
+      bestErr = e;
+      bestSplit = s;
+    } else break;
+  }
+  return [best, bestErr, bestSplit];
+}
+function fitRec(pts, t0, t1, tol, out, depth) {
+  const n = pts.length;
+  if (n === 2) {
+    const d = dist(pts[0], pts[1]) / 3;
+    out.push({ p0: pts[0], p1: add(pts[0], t0, d), p2: add(pts[1], t1, -d), p3: pts[1] });
+    return;
+  }
+  const [c, err, splitAt] = fitSingleFrom(pts, chordParams(pts), t0, t1);
+  if (err <= tol || depth > 40) {
+    out.push(c);
+    return;
+  }
+  const split = Math.min(n - 2, Math.max(1, splitAt));
+  const tc = unit(sub(pts[split + 1], pts[split - 1])) ?? t0;
+  fitRec(pts.slice(0, split + 1), t0, tc, tol, out, depth + 1);
+  fitRec(pts.slice(split), tc, t1, tol, out, depth + 1);
+}
+function tangentFrom(a, b, c) {
+  const chord = unit(sub(b, a));
+  if (!c) return chord;
+  const d1 = dist(a, b);
+  const d2 = dist(b, c);
+  if (!(d1 > 0) || !(d2 > 0)) return chord;
+  const ka = -(2 * d1 + d2) / (d1 * (d1 + d2));
+  const kb = (d1 + d2) / (d1 * d2);
+  const kc = -d1 / (d2 * (d1 + d2));
+  const est = unit([ka * a[0] + kb * b[0] + kc * c[0], ka * a[1] + kb * b[1] + kc * c[1]]);
+  return est && chord && dot(est, chord) > Math.cos(Math.PI / 4) ? est : chord;
+}
+function fitCubicRun(points, tolerance, t0, t1) {
+  const pts = dedup(points);
+  const out = [];
+  if (pts.length < 2) return out;
+  const n = pts.length;
+  const start = (t0 && unit([t0[0], t0[1]])) ?? tangentFrom(pts[0], pts[1], pts[2]) ?? [1, 0];
+  const back = tangentFrom(pts[n - 1], pts[n - 2], pts[n - 3]);
+  const end = (t1 && unit([t1[0], t1[1]])) ?? (back ? [-back[0], -back[1]] : [1, 0]);
+  fitRec(pts, start, end, Math.max(tolerance, 1e-9), out, 0);
+  return out;
+}
+function turnDeg(a, b, c) {
+  const u = unit(sub(b, a));
+  const v = unit(sub(c, b));
+  if (!u || !v) return 0;
+  return Math.acos(Math.min(1, Math.max(-1, dot(u, v)))) * 180 / Math.PI;
+}
+function findCorners(pts, closed, cornerAngle, span) {
+  const n = pts.length;
+  const at = (i) => pts[closed ? (i % n + n) % n : i];
+  const reach = (i, step) => {
+    for (let k = 1; k < (closed ? n : Infinity); k++) {
+      const j = i + step * k;
+      if (!closed && (j < 0 || j >= n)) return k > 1 ? j - step : null;
+      if (dist(at(j), pts[i]) >= span) return j;
+    }
+    return null;
+  };
+  const turns = new Float64Array(n);
+  const windows = [];
+  for (let i = 0; i < n; i++) {
+    windows.push([i, i]);
+    if (!closed && (i === 0 || i === n - 1)) continue;
+    const prev = reach(i, -1);
+    const next = reach(i, 1);
+    if (prev === null || next === null) continue;
+    windows[i] = [prev, next];
+    turns[i] = turnDeg(at(prev), pts[i], at(next));
+  }
+  const corners = [];
+  for (let i = 0; i < n; i++) {
+    if (!(turns[i] > cornerAngle)) continue;
+    const [lo, hi] = windows[i];
+    let sharpest = true;
+    for (let j = lo; j <= hi && sharpest; j++) {
+      const k = closed ? (j % n + n) % n : j;
+      if (k === i || dist(pts[k], pts[i]) >= span) continue;
+      if (turns[k] > turns[i] || turns[k] === turns[i] && k < i) sharpest = false;
+    }
+    if (sharpest) corners.push(i);
+  }
+  return corners;
+}
+function densify(run) {
+  if (run.length < 3) return run;
+  const lengths = [];
+  for (let i = 1; i < run.length; i++) lengths.push(dist(run[i - 1], run[i]));
+  const sorted = [...lengths].sort((a, b) => a - b);
+  const median = sorted[sorted.length >> 1];
+  if (!(median > 0)) return run;
+  const out = [run[0]];
+  for (let i = 1; i < run.length; i++) {
+    const len = lengths[i - 1];
+    if (len > 2 * median) {
+      const steps = Math.min(64, Math.ceil(len / median));
+      const a = run[i - 1];
+      const b = run[i];
+      for (let k = 1; k < steps; k++) {
+        const t = k / steps;
+        out.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]);
+      }
+    }
+    out.push(run[i]);
+  }
+  return out;
+}
+function fitCubics(points, tolerance, options = {}) {
+  let pts = dedup(points);
+  const closed = options.closed === true;
+  if (closed && pts.length > 1 && dist(pts[0], pts[pts.length - 1]) <= 1e-12) pts = pts.slice(0, -1);
+  if (pts.length < 2) return [];
+  const tol = Math.max(tolerance, 1e-6);
+  const cornerAngle = options.cornerAngleDeg ?? 30;
+  const n = pts.length;
+  const span = 4 * tol;
+  if (!closed || n < 3) {
+    const corners2 = [0, ...n > 2 ? findCorners(pts, false, cornerAngle, span) : [], n - 1];
+    const out2 = [];
+    for (let k = 1; k < corners2.length; k++) {
+      const run = pts.slice(corners2[k - 1], corners2[k] + 1);
+      out2.push(...fitCubicRun(densify(run), tol));
+    }
+    if (closed && n === 2) out2.push(...fitCubicRun([pts[1], pts[0]], tol));
+    return out2;
+  }
+  const corners = findCorners(pts, true, cornerAngle, span);
+  if (corners.length === 0) {
+    const ring = [...pts, pts[0]];
+    const t = unit(sub(pts[1], pts[n - 1])) ?? [1, 0];
+    return fitCubicRun(densify(ring), tol, t, t);
+  }
+  const out = [];
+  for (let k = 0; k < corners.length; k++) {
+    const from = corners[k];
+    const to = corners[(k + 1) % corners.length];
+    const run = [];
+    for (let i = from; ; i = (i + 1) % n) {
+      run.push(pts[i]);
+      if (run.length > 1 && i === to) break;
+    }
+    out.push(...fitCubicRun(densify(run), tol));
+  }
+  return out;
+}
+function isStraightCubic(c, tol) {
+  const chord = sub(c.p3, c.p0);
+  const len = Math.hypot(chord[0], chord[1]);
+  if (len < 1e-12) return dist(c.p1, c.p0) <= tol && dist(c.p2, c.p0) <= tol;
+  const dir = [chord[0] / len, chord[1] / len];
+  return [c.p1, c.p2].every((h) => {
+    const v = sub(h, c.p0);
+    const along = dot(v, dir);
+    const across = Math.abs(v[0] * dir[1] - v[1] * dir[0]);
+    return across <= tol && along >= -tol && along <= len + tol;
+  });
+}
+function cubicsToPathData(segments, options = {}) {
+  if (segments.length === 0) return "";
+  const f = (n) => formatNumber(n, options.precision ?? 3);
+  const dx = options.offset?.x ?? 0;
+  const dy = options.offset?.y ?? 0;
+  const pt = (p) => `${f(p[0] + dx)} ${f(p[1] + dy)}`;
+  const straight = options.straightTolerance ?? 1e-3;
+  let d = `M${pt(segments[0].p0)}`;
+  segments.forEach((c, i) => {
+    const last = options.closed && i === segments.length - 1;
+    if (isStraightCubic(c, straight)) {
+      if (!last) d += `L${pt(c.p3)}`;
+    } else d += `C${pt(c.p1)} ${pt(c.p2)} ${pt(c.p3)}`;
+  });
+  return options.closed ? `${d}Z` : d;
+}
+function polylineToPathData(points, closed, options) {
+  if (points.length < 2) return "";
+  const f = (n) => formatNumber(n, options.precision ?? 3);
+  const dx = options.offset?.x ?? 0;
+  const dy = options.offset?.y ?? 0;
+  let d = `M${f(points[0][0] + dx)} ${f(points[0][1] + dy)}`;
+  for (let i = 1; i < points.length; i++) d += `L${f(points[i][0] + dx)} ${f(points[i][1] + dy)}`;
+  return closed ? `${d}Z` : d;
+}
+function fitPathData(ring, options = {}) {
+  const closed = options.closed ?? true;
+  const tolerance = options.tolerance ?? 0.5;
+  const pts = dedup(ring);
+  const segments = fitCubics(pts, tolerance, { ...options, closed });
+  if (segments.length === 0) return "";
+  const edges = closed ? pts.length : pts.length - 1;
+  if (options.noWorse !== false) {
+    const straight = segments.filter((c) => isStraightCubic(c, tolerance * 0.02)).length;
+    if (segments.length >= edges && straight === segments.length) return polylineToPathData(pts, closed, options);
+    if (segments.length > edges) return polylineToPathData(pts, closed, options);
+  }
+  return cubicsToPathData(segments, {
+    precision: options.precision,
+    offset: options.offset,
+    closed,
+    straightTolerance: tolerance * 0.02
+  });
+}
+function fitFreehandPath(points, options = {}) {
+  return fitPathData(points, { tolerance: 1, ...options, closed: false });
+}
+
 // src/canvas/shapeGeometry.ts
 var SHAPE_KINDS = ["rect", "ellipse", "polygon", "star", "path"];
 function isShapeDescription(value) {
@@ -2540,7 +2848,7 @@ function rotationTransform(shape, size) {
 }
 function getShapeSvg(shape, size) {
   const { width: w, height: h } = size;
-  const f = (n) => formatNumber(n, 3);
+  const f = (n) => formatNumber2(n, 3);
   const transforms = [];
   if (shape.rotation) transforms.push(`rotate(${f(shape.rotation)} ${f(w / 2)} ${f(h / 2)})`);
   let d = "";
@@ -2589,7 +2897,7 @@ function getShapeRenderData(shape, size = {}) {
   const height = size.height && size.height > 0 ? size.height : vb ? vb[3] : 100;
   const svg = getShapeSvg(shape, { width, height });
   const data = {
-    viewBox: `0 0 ${formatNumber(width, 3)} ${formatNumber(height, 3)}`,
+    viewBox: `0 0 ${formatNumber2(width, 3)} ${formatNumber2(height, 3)}`,
     width,
     height,
     d: svg.d,
@@ -2636,7 +2944,7 @@ function shapeToPolygon(shape, size, options = {}) {
   if (rotate) rings = rings.map((ring) => ring.map(rotate));
   return { rings, fillRule };
 }
-function formatNumber(value, precision = 3) {
+function formatNumber2(value, precision = 3) {
   const factor = 10 ** precision;
   const rounded = Math.round(value * factor) / factor;
   return Object.is(rounded, -0) ? "0" : String(rounded);
@@ -2670,9 +2978,9 @@ function rdp(points, tolerance) {
     let maxDist = -1;
     let index = -1;
     for (let i = s + 1; i < e; i++) {
-      const dist = segmentDistance(points[i], points[s], points[e]);
-      if (dist > maxDist) {
-        maxDist = dist;
+      const dist2 = segmentDistance(points[i], points[s], points[e]);
+      if (dist2 > maxDist) {
+        maxDist = dist2;
         index = i;
       }
     }
@@ -2688,9 +2996,9 @@ function simplifyRing(ring, tolerance) {
   let far = 0;
   let farDist = -1;
   for (let i = 1; i < ring.length; i++) {
-    const dist = Math.hypot(ring[i][0] - ring[0][0], ring[i][1] - ring[0][1]);
-    if (dist > farDist) {
-      farDist = dist;
+    const dist2 = Math.hypot(ring[i][0] - ring[0][0], ring[i][1] - ring[0][1]);
+    if (dist2 > farDist) {
+      farDist = dist2;
       far = i;
     }
   }
@@ -2701,20 +3009,31 @@ function simplifyRing(ring, tolerance) {
 }
 function polygonToSvgPath(input, options = {}) {
   const precision = options.precision ?? 3;
-  const f = (n) => formatNumber(n, precision);
+  const f = (n) => formatNumber2(n, precision);
   const dx = options.offset?.x ?? 0;
   const dy = options.offset?.y ?? 0;
   const rings = [];
+  const fit = options.curves === "fit";
+  let fitted = "";
   for (const item of input) {
     const list = item.length > 0 && Array.isArray(item[0]) && Array.isArray(item[0][0]) ? item : [item];
     for (const ring of list) {
       let r = ring;
       if (options.simplify && options.simplify > 0) r = simplifyRing(r, options.simplify);
       if (r.length < 3) continue;
+      if (fit) {
+        fitted += fitPathData(r, {
+          tolerance: options.curveTolerance ?? 0.25,
+          cornerAngleDeg: options.cornerAngleDeg,
+          precision,
+          offset: { x: dx, y: dy }
+        });
+        continue;
+      }
       rings.push(dx || dy ? r.map(([x, y]) => [x + dx, y + dy]) : r);
     }
   }
-  return ringsToPath(rings, f);
+  return fit ? fitted : ringsToPath(rings, f);
 }
 
 // src/canvas/shapeNodes.ts
@@ -2792,7 +3111,10 @@ function combineShapeNodes(nodes, ids, operation, options = {}) {
     const d = polygonToSvgPath(polygon, {
       precision: options.precision,
       simplify: options.simplify,
-      offset: { x: -bounds.minX, y: -bounds.minY }
+      offset: { x: -bounds.minX, y: -bounds.minY },
+      curves: options.curves ?? "fit",
+      curveTolerance: options.curveTolerance ?? options.tolerance ?? 0.25,
+      cornerAngleDeg: options.cornerAngleDeg
     });
     if (!d) return null;
     const sourceShape = getNodeShape(source);
@@ -2876,12 +3198,1088 @@ function revertShapeCombination(nodes, change, previous) {
   return out;
 }
 
+// src/canvas/resizeSnap.ts
+var RESIZE_HANDLES = [
+  "top-left",
+  "top",
+  "top-right",
+  "right",
+  "bottom-right",
+  "bottom",
+  "bottom-left",
+  "left"
+];
+function resizeHandleAxes(handle) {
+  const x = handle.includes("left") ? -1 : handle.includes("right") ? 1 : 0;
+  const y = handle.includes("top") ? -1 : handle.includes("bottom") ? 1 : 0;
+  return { x, y };
+}
+function inferResizeHandle(start, next, eps = 1e-6) {
+  const moved = (a, b) => Math.abs(a - b) > eps;
+  const left = moved(start.x, next.x);
+  const right = moved(start.x + start.width, next.x + next.width);
+  const top = moved(start.y, next.y);
+  const bottom = moved(start.y + start.height, next.y + next.height);
+  const h = left ? "left" : right ? "right" : "";
+  const v = top ? "top" : bottom ? "bottom" : "";
+  if (h && v) return `${v}-${h}`;
+  return h || v || null;
+}
+function within(axis, v, tolerance) {
+  const { values } = axis;
+  let lo = 0;
+  let hi = values.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (values[mid] < v - tolerance) lo = mid + 1;
+    else hi = mid;
+  }
+  const out = [];
+  for (let i = lo; i < values.length && values[i] <= v + tolerance; i++) out.push(values[i]);
+  return out;
+}
+function matching(axis, v, eps) {
+  const { values, rects } = axis;
+  const out = [];
+  for (let i = 0; i < values.length; i++) if (Math.abs(values[i] - v) <= eps) out.push(rects[i]);
+  return out;
+}
+function snapResize(rect, handle, targets, options = {}) {
+  const index = Array.isArray(targets) ? createGuideIndex(targets) : targets;
+  const zoom = options.zoom && options.zoom > 0 ? options.zoom : 1;
+  const tolerance = (options.threshold ?? 6) / zoom;
+  const eps = 0.5 / zoom;
+  const useEdges = options.edges !== false;
+  const useCentres = options.centres !== false;
+  const grid = options.gridSize ?? 0;
+  const axes = resizeHandleAxes(handle);
+  const unchanged = { rect: { ...rect }, guides: [], snappedX: false, snappedY: false, changed: false };
+  if (![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite)) return unchanged;
+  const x0 = rect.x;
+  const x1 = rect.x + rect.width;
+  const y0 = rect.y;
+  const y1 = rect.y + rect.height;
+  const bestHit = (horizontal) => {
+    const dir = horizontal ? axes.x : axes.y;
+    if (dir === 0) return null;
+    const moving = horizontal ? dir < 0 ? x0 : x1 : dir < 0 ? y0 : y1;
+    const fixed = horizontal ? dir < 0 ? x1 : x0 : dir < 0 ? y1 : y0;
+    const min = (horizontal ? options.minWidth : options.minHeight) ?? 0;
+    const valid = (t) => {
+      const size = dir < 0 ? fixed - t : t - fixed;
+      return Number.isFinite(size) && size > 1e-9 && size >= min;
+    };
+    let best = null;
+    const consider = (values, kind) => {
+      for (const t of values) {
+        if (!valid(t)) continue;
+        if (!best || Math.abs(t - moving) < Math.abs(best.value - moving)) best = { value: t, kind };
+      }
+    };
+    if (useEdges) consider(within(horizontal ? index.edgeX : index.edgeY, moving, tolerance), "edge");
+    if (useCentres) consider(within(horizontal ? index.centreX : index.centreY, moving, tolerance), "centre");
+    if (!best && grid > 0) {
+      const origin = horizontal ? options.gridOrigin?.x ?? 0 : options.gridOrigin?.y ?? 0;
+      consider([snapToGrid(moving, grid, origin)], "grid");
+    }
+    return best;
+  };
+  let nx0 = x0;
+  let nx1 = x1;
+  let ny0 = y0;
+  let ny1 = y1;
+  const setEdge = (horizontal, value) => {
+    const dir = horizontal ? axes.x : axes.y;
+    if (horizontal) {
+      if (dir < 0) nx0 = value;
+      else nx1 = value;
+    } else if (dir < 0) ny0 = value;
+    else ny1 = value;
+  };
+  let hitX = bestHit(true);
+  let hitY = bestHit(false);
+  const ratio = rect.height > 0 ? rect.width / rect.height : 0;
+  if (options.keepAspectRatio && ratio > 0 && (hitX || hitY)) {
+    if (axes.x !== 0 && axes.y !== 0) {
+      const dist2 = (h, horizontal) => h ? Math.abs(h.value - (horizontal ? axes.x < 0 ? x0 : x1 : axes.y < 0 ? y0 : y1)) : Infinity;
+      const useX = dist2(hitX, true) <= dist2(hitY, false);
+      if (useX && hitX) {
+        setEdge(true, hitX.value);
+        const height = (nx1 - nx0) / ratio;
+        if (axes.y < 0) ny0 = ny1 - height;
+        else ny1 = ny0 + height;
+        hitY = null;
+      } else if (hitY) {
+        setEdge(false, hitY.value);
+        const width = (ny1 - ny0) * ratio;
+        if (axes.x < 0) nx0 = nx1 - width;
+        else nx1 = nx0 + width;
+        hitX = null;
+      }
+      const min = (v) => v ?? 0;
+      if (nx1 - nx0 < min(options.minWidth) || ny1 - ny0 < min(options.minHeight) || !(nx1 > nx0 && ny1 > ny0)) {
+        return unchanged;
+      }
+    } else if (axes.x !== 0 && hitX) {
+      setEdge(true, hitX.value);
+      const height = (nx1 - nx0) / ratio;
+      const cy = (y0 + y1) / 2;
+      ny0 = cy - height / 2;
+      ny1 = cy + height / 2;
+    } else if (axes.y !== 0 && hitY) {
+      setEdge(false, hitY.value);
+      const width = (ny1 - ny0) * ratio;
+      const cx = (x0 + x1) / 2;
+      nx0 = cx - width / 2;
+      nx1 = cx + width / 2;
+    }
+  } else {
+    if (hitX) setEdge(true, hitX.value);
+    if (hitY) setEdge(false, hitY.value);
+  }
+  const out = { x: nx0, y: ny0, width: nx1 - nx0, height: ny1 - ny0 };
+  const guides = [];
+  const guideFor = (horizontal, hit) => {
+    if (!hit || hit.kind === "grid") return;
+    const axis = hit.kind === "edge" ? horizontal ? index.edgeX : index.edgeY : horizontal ? index.centreX : index.centreY;
+    const aligned = matching(axis, hit.value, eps);
+    const span = boundsOf([out, ...aligned]);
+    guides.push(
+      horizontal ? { orientation: "vertical", kind: hit.kind, x1: hit.value, y1: span.y, x2: hit.value, y2: span.y + span.height } : { orientation: "horizontal", kind: hit.kind, x1: span.x, y1: hit.value, x2: span.x + span.width, y2: hit.value }
+    );
+  };
+  guideFor(true, hitX);
+  guideFor(false, hitY);
+  const changed = out.x !== rect.x || out.y !== rect.y || out.width !== rect.width || out.height !== rect.height;
+  return {
+    rect: out,
+    guides,
+    snappedX: !!hitX && hitX.kind !== "grid",
+    snappedY: !!hitY && hitY.kind !== "grid",
+    changed
+  };
+}
+function snapNodeResize(nodes, id, rect, handle, options = {}) {
+  const lookup = createNodeLookup(nodes);
+  const node = lookup.get(id);
+  if (!node || isLocked(node)) {
+    return { rect: { ...rect }, guides: [], snappedX: false, snappedY: false, changed: false, updates: [] };
+  }
+  const index = options.index ?? createNodeGuideIndex(nodes, [id], options);
+  const result = snapResize(rect, handle, index, options);
+  if (!result.changed) return { ...result, updates: [] };
+  const parent = node.parentId ? lookup.get(node.parentId) : void 0;
+  const origin = parent ? getAbsolutePosition(parent, lookup) : { x: 0, y: 0 };
+  return {
+    ...result,
+    updates: [
+      {
+        id,
+        position: { x: result.rect.x - origin.x, y: result.rect.y - origin.y },
+        width: result.rect.width,
+        height: result.rect.height
+      }
+    ]
+  };
+}
+function getResizingNodeRect(node, lookup, options = {}) {
+  const { x, y } = node.parentId ? getAbsolutePosition(node, lookup) : node.position;
+  const size = getNodeSize(node, options);
+  return { x, y, width: node.width ?? size.width, height: node.height ?? size.height };
+}
+
+// src/canvas/autoLayout.ts
+var AUTO_LAYOUT_DATA_KEY = "layout";
+var CHILD_LAYOUT_DATA_KEY = "childLayout";
+var MODES = /* @__PURE__ */ new Set(["horizontal", "vertical", "grid"]);
+var EPS = 1e-6;
+var MAX_TRACKS = 1e3;
+var MAX_GRID_CELLS = 1e6;
+function clampLayoutSize(value, min, max) {
+  let v = Number.isFinite(value) ? Math.max(value, 0) : 0;
+  if (typeof max === "number" && Number.isFinite(max)) v = Math.min(v, max);
+  if (typeof min === "number" && Number.isFinite(min)) v = Math.max(v, min);
+  return v;
+}
+var finite = (v) => typeof v === "number" && Number.isFinite(v) ? v : 0;
+function getAutoLayout(node) {
+  const layout2 = node?.data?.[AUTO_LAYOUT_DATA_KEY];
+  return layout2 && typeof layout2 === "object" && MODES.has(layout2.mode) ? layout2 : void 0;
+}
+function isAutoLayoutFrame(node) {
+  return getAutoLayout(node) !== void 0;
+}
+function getChildLayout(node) {
+  const child = node?.data?.[CHILD_LAYOUT_DATA_KEY];
+  return child && typeof child === "object" ? child : {};
+}
+function getLayoutSizing(node, axis) {
+  const value = getChildLayout(node).sizing?.[axis] ?? getAutoLayout(node)?.sizing?.[axis];
+  return value === "hug" || value === "fill" ? value : "fixed";
+}
+function limitsOf(node) {
+  const child = getChildLayout(node);
+  const layout2 = getAutoLayout(node);
+  const min = child.min ?? layout2?.min ?? {};
+  const max = child.max ?? layout2?.max ?? {};
+  return { minW: min.width, maxW: max.width, minH: min.height, maxH: max.height };
+}
+function resolvePadding(padding) {
+  let sides;
+  if (typeof padding === "number") sides = [padding, padding, padding, padding];
+  else if (Array.isArray(padding)) {
+    sides = padding.length === 2 ? [padding[0], padding[1], padding[0], padding[1]] : [padding[0], padding[1], padding[2], padding[3]];
+  } else if (padding && typeof padding === "object") sides = [padding.top, padding.right, padding.bottom, padding.left];
+  else sides = [0, 0, 0, 0];
+  return sides.map((p) => Math.max(finite(p), 0));
+}
+var LayoutState = class {
+  boxes = /* @__PURE__ */ new Map();
+  measure;
+  visiting = /* @__PURE__ */ new Set();
+  original = /* @__PURE__ */ new Map();
+  constructor(nodes, options = {}) {
+    this.measure = options.measure ?? {};
+    for (const node of nodes) {
+      const size = this.measure.size?.(node) ?? getNodeSize(node, options.rectOptions);
+      const box = {
+        id: node.id,
+        node,
+        parent: node.parentId,
+        x: finite(node.position?.x),
+        y: finite(node.position?.y),
+        w: finite(size.width),
+        h: finite(size.height),
+        kids: []
+      };
+      this.boxes.set(node.id, box);
+      this.original.set(node.id, { x: box.x, y: box.y, w: box.w, h: box.h });
+    }
+    for (const node of nodes) {
+      if (node.parentId && node.parentId !== node.id) this.boxes.get(node.parentId)?.kids.push(node.id);
+    }
+  }
+  updates() {
+    const out = [];
+    for (const [id, box] of this.boxes) {
+      const o = this.original.get(id);
+      const update = { id };
+      if (Math.abs(box.x - o.x) > EPS || Math.abs(box.y - o.y) > EPS) update.position = { x: box.x, y: box.y };
+      if (Math.abs(box.w - o.w) > EPS) update.width = box.w;
+      if (Math.abs(box.h - o.h) > EPS) update.height = box.h;
+      if (update.position || update.width !== void 0 || update.height !== void 0) out.push(update);
+    }
+    return out;
+  }
+  /** Runs `fn` for `id` unless it is already on the stack (guards `parentId` cycles). */
+  guard(id, fn) {
+    if (this.visiting.has(id)) return;
+    this.visiting.add(id);
+    try {
+      fn();
+    } finally {
+      this.visiting.delete(id);
+    }
+  }
+  ancestors(id) {
+    const out = [];
+    const seen = /* @__PURE__ */ new Set([id]);
+    let parent = this.boxes.get(id)?.parent;
+    while (parent && !seen.has(parent) && this.boxes.has(parent)) {
+      out.push(parent);
+      seen.add(parent);
+      parent = this.boxes.get(parent).parent;
+    }
+    return out;
+  }
+};
+function setSize(s, id, w, h) {
+  const b = s.boxes.get(id);
+  if (!b) return;
+  b.w = Number.isFinite(w) ? Math.max(w, 0) : b.w;
+  b.h = Number.isFinite(h) ? Math.max(h, 0) : b.h;
+}
+function place(s, id, x, y) {
+  const b = s.boxes.get(id);
+  if (!b) return;
+  b.x = x;
+  b.y = y;
+}
+var isText = (s, b) => !!s.measure.textSize && s.measure.textSize(b.node) !== void 0;
+function flowChildren(s, frame) {
+  const f = s.boxes.get(frame);
+  if (!f) return [];
+  return f.kids.filter((k) => {
+    const n = s.boxes.get(k).node;
+    return n.hidden !== true && !getChildLayout(n).absolute;
+  });
+}
+function fitHugText(s, id) {
+  const b = s.boxes.get(id);
+  if (!b || !isText(s, b)) return;
+  const natural = s.measure.textSize(b.node);
+  const { minW, maxW } = limitsOf(b.node);
+  if (getLayoutSizing(b.node, "width") === "hug") {
+    const w = clampLayoutSize(natural.width, minW, maxW);
+    const limited = Math.abs(w - natural.width) > EPS;
+    const h = limited ? s.measure.textHeight?.(b.node, w) ?? natural.height : natural.height;
+    setSize(s, id, w, h);
+  } else if (getLayoutSizing(b.node, "height") === "hug") {
+    setSize(s, id, b.w, s.measure.textHeight?.(b.node, b.w) ?? b.h);
+  }
+}
+function enforceLimits(s, id) {
+  const b = s.boxes.get(id);
+  if (!b) return;
+  const { minW, maxW, minH, maxH } = limitsOf(b.node);
+  if (minW === void 0 && maxW === void 0 && minH === void 0 && maxH === void 0) return;
+  const nw = clampLayoutSize(b.w, minW, maxW);
+  const nh = clampLayoutSize(b.h, minH, maxH);
+  if (Math.abs(nw - b.w) < 1e-9 && Math.abs(nh - b.h) < 1e-9) return;
+  if (isText(s, b)) setSize(s, id, nw, nh);
+  else resizeChild(s, id, nw, nh);
+}
+function itemBaseline(s, id, depth) {
+  const b = s.boxes.get(id);
+  if (!b) return void 0;
+  if (isText(s, b)) {
+    const v = s.measure.textBaseline?.(b.node);
+    return typeof v === "number" && Number.isFinite(v) ? v : void 0;
+  }
+  const layout2 = getAutoLayout(b.node);
+  if (!layout2 || layout2.mode === "grid" || depth >= 32) return void 0;
+  for (const k of flowChildren(s, id)) {
+    const base = itemBaseline(s, k, depth + 1);
+    if (base !== void 0) return s.boxes.get(k).y + base;
+  }
+  return void 0;
+}
+function resizeChild(s, id, w, h) {
+  const b = s.boxes.get(id);
+  if (!b) return;
+  if (isText(s, b) && getLayoutSizing(b.node, "height") === "hug") {
+    setSize(s, id, w, s.measure.textHeight?.(b.node, w) ?? h);
+    return;
+  }
+  const ow = b.w;
+  const oh = b.h;
+  setSize(s, id, w, h);
+  if (b.kids.length > 0) constrain(s, id, ow, oh);
+  if (getAutoLayout(b.node)) layout(s, id);
+}
+function mainOffsets(align, inner, total, n, gap) {
+  const gaps = gap * Math.max(n - 1, 0);
+  const free = inner - total;
+  const k = Math.max(n, 1);
+  switch (align) {
+    case "center":
+      return [(free - gaps) / 2, gap];
+    case "end":
+      return [free - gaps, gap];
+    case "space-between":
+      return [0, n > 1 ? Math.max(free / (n - 1), 0) : 0];
+    case "space-around": {
+      const g = Math.max(free / k, 0);
+      return [g / 2, g];
+    }
+    case "space-evenly": {
+      const g = Math.max(free / (k + 1), 0);
+      return [g, g];
+    }
+    default:
+      return [0, gap];
+  }
+}
+function distribute(items, open, free) {
+  free = Math.max(free, 0);
+  while (open.length > 0) {
+    const share = free / open.length;
+    const sized = open.map((i) => [i, clampLayoutSize(share, items[i].minMain, items[i].maxMain)]);
+    const violation = sized.reduce((sum, [, v]) => sum + (v - share), 0);
+    const frozen = (v) => Math.abs(violation) < 1e-9 || violation > 0 && v > share + 1e-9 || violation < 0 && v < share - 1e-9;
+    for (const [i, v] of sized) {
+      if (frozen(v)) {
+        items[i].main = v;
+        free -= v;
+      }
+    }
+    free = Math.max(free, 0);
+    open = sized.filter(([, v]) => !frozen(v)).map(([i]) => i);
+  }
+}
+function layout(s, frame) {
+  s.guard(frame, () => layoutFrameInner(s, frame));
+}
+function layoutFrameInner(s, frame) {
+  const f = s.boxes.get(frame);
+  const al = f && getAutoLayout(f.node);
+  if (!f || !al) return;
+  const horizontal = al.mode !== "vertical";
+  const hugW = getLayoutSizing(f.node, "width") === "hug";
+  const hugH = getLayoutSizing(f.node, "height") === "hug";
+  const ow = f.w;
+  const oh = f.h;
+  const fl = limitsOf(f.node);
+  const [pt, pr, pb, pl] = resolvePadding(al.padding);
+  const fw = Math.max(clampLayoutSize(ow, fl.minW, fl.maxW), pl + pr);
+  const fh = Math.max(clampLayoutSize(oh, fl.minH, fl.maxH), pt + pb);
+  const kids = flowChildren(s, frame);
+  for (const c of kids) {
+    fitHugText(s, c);
+    enforceLimits(s, c);
+  }
+  if (al.mode === "grid") {
+    layoutGrid(s, frame, al);
+    return;
+  }
+  const innerMainFixed = horizontal ? fw - pl - pr : fh - pt - pb;
+  const innerCrossFixed = horizontal ? fh - pt - pb : fw - pl - pr;
+  const hugMain = horizontal ? hugW : hugH;
+  const hugCross = horizontal ? hugH : hugW;
+  const alignCross = al.alignCross ?? "start";
+  const baseline = horizontal && alignCross === "baseline";
+  const stretch = alignCross === "stretch";
+  const items = [];
+  for (const c of kids) {
+    const b = s.boxes.get(c);
+    const lim = limitsOf(b.node);
+    const sm = getLayoutSizing(b.node, horizontal ? "width" : "height");
+    const sc = getLayoutSizing(b.node, horizontal ? "height" : "width");
+    items.push({
+      id: c,
+      main: horizontal ? b.w : b.h,
+      cross: horizontal ? b.h : b.w,
+      // Fill needs room to fill: on an axis the frame hugs it reads as fixed.
+      fillMain: sm === "fill" && !hugMain,
+      fillCross: (sc === "fill" || stretch && sc !== "hug") && !hugCross,
+      minMain: horizontal ? lim.minW : lim.minH,
+      maxMain: horizontal ? lim.maxW : lim.maxH,
+      minCross: horizontal ? lim.minH : lim.minW,
+      maxCross: horizontal ? lim.maxH : lim.maxW,
+      baseOff: 0
+    });
+  }
+  const gap = finite(al.gap);
+  const alignMain = al.alignMain ?? "start";
+  const autoGap = alignMain === "space-between" || alignMain === "space-around" || alignMain === "space-evenly";
+  const wraps = !!al.wrap && !hugMain;
+  const sizeOf = (id) => {
+    const b = s.boxes.get(id);
+    return horizontal ? [b.w, b.h] : [b.h, b.w];
+  };
+  const resize = (it, main, cross) => resizeChild(s, it.id, horizontal ? main : cross, horizontal ? cross : main);
+  if (!wraps) {
+    for (const it of items) {
+      if (!it.fillCross || it.fillMain) continue;
+      resize(it, it.main, clampLayoutSize(innerCrossFixed, it.minCross, it.maxCross));
+      it.main = sizeOf(it.id)[0];
+    }
+  }
+  const lines = [];
+  if (wraps) {
+    let cur = [];
+    let used = 0;
+    items.forEach((it, i) => {
+      const sz = it.fillMain ? it.minMain ?? 0 : it.main;
+      const add2 = cur.length === 0 ? sz : Math.max(gap, 0) + sz;
+      if (cur.length > 0 && used + add2 > innerMainFixed + 1e-6) {
+        lines.push(cur);
+        cur = [];
+        used = sz;
+      } else {
+        used += add2;
+      }
+      cur.push(i);
+    });
+    if (cur.length > 0) lines.push(cur);
+  } else {
+    lines.push(items.map((_, i) => i));
+  }
+  for (const line2 of lines) {
+    const fixed = line2.filter((i) => !items[i].fillMain).reduce((sum, i) => sum + items[i].main, 0);
+    const gaps = gap * Math.max(line2.length - 1, 0);
+    const fills = line2.filter((i) => items[i].fillMain);
+    if (fills.length > 0) distribute(items, fills, innerMainFixed - fixed - (autoGap ? 0 : gaps));
+  }
+  for (const it of items) {
+    if (!it.fillMain) continue;
+    const cross = it.fillCross && !wraps ? clampLayoutSize(innerCrossFixed, it.minCross, it.maxCross) : it.cross;
+    resize(it, it.main, cross);
+    it.cross = sizeOf(it.id)[1];
+  }
+  if (baseline) {
+    for (const it of items) if (!it.fillCross) it.baseline = itemBaseline(s, it.id, 0);
+  }
+  const extents = [];
+  for (const line2 of lines) {
+    const gaps = gap * Math.max(line2.length - 1, 0);
+    const lineBase = line2.reduce((m, i) => Math.max(m, items[i].baseline ?? 0), 0);
+    for (const i of line2) items[i].baseOff = items[i].baseline !== void 0 ? lineBase - items[i].baseline : 0;
+    const inLine = line2.map((i) => items[i]);
+    const mainUsed = inLine.reduce((sum, it) => sum + it.main, 0) + gaps;
+    const allFill = inLine.every((it) => it.fillCross);
+    const cross = inLine.filter((it) => allFill || !it.fillCross).reduce((m, it) => Math.max(m, it.baseOff + it.cross), 0);
+    extents.push([mainUsed, cross]);
+  }
+  const contentMain = extents.reduce((m, l) => Math.max(m, l[0]), 0);
+  let crossGap = al.rowGap !== void 0 ? finite(al.rowGap) : gap;
+  const contentCross = extents.reduce((sum, l) => sum + l[1], 0) + crossGap * Math.max(lines.length - 1, 0);
+  let nw = fw;
+  let nh = fh;
+  if (hugMain) {
+    const v = contentMain + (horizontal ? pl + pr : pt + pb);
+    if (horizontal) nw = v;
+    else nh = v;
+  }
+  if (hugCross) {
+    const v = contentCross + (horizontal ? pt + pb : pl + pr);
+    if (horizontal) nh = v;
+    else nw = v;
+  }
+  nw = Math.max(clampLayoutSize(nw, fl.minW, fl.maxW), pl + pr);
+  nh = Math.max(clampLayoutSize(nh, fl.minH, fl.maxH), pt + pb);
+  setSize(s, frame, nw, nh);
+  constrain(s, frame, ow, oh);
+  const innerMain = horizontal ? nw - pl - pr : nh - pt - pb;
+  const innerCross = horizontal ? nh - pt - pb : nw - pl - pr;
+  let crossPos = horizontal ? pt : pl;
+  const single = lines.length === 1;
+  if (lines.length > 1) {
+    const linesCross = extents.reduce((sum, l) => sum + l[1], 0);
+    const between = lines.length - 1;
+    const spread = (innerCross - linesCross) / between;
+    const spaceBetween = al.alignContent === "space-between";
+    if (spaceBetween && spread > 0) {
+      crossGap = spread;
+    } else {
+      if (spaceBetween) crossGap = 0;
+      const free = innerCross - linesCross - crossGap * between;
+      if (free > 0 && items.every((it) => it.fillCross)) {
+        const extra = free / lines.length;
+        for (const l of extents) l[1] += extra;
+      } else if (Number.isFinite(free)) {
+        crossPos += alignCross === "center" ? free / 2 : alignCross === "end" ? free : 0;
+      }
+    }
+  }
+  lines.forEach((line2, li) => {
+    const [used, ownCross] = extents[li];
+    const lineCross = single ? innerCross : ownCross;
+    const total = used - gap * Math.max(line2.length - 1, 0);
+    let [pos, step] = mainOffsets(alignMain, innerMain, total, line2.length, gap);
+    pos += horizontal ? pl : pt;
+    for (const i of line2) {
+      const it = items[i];
+      const crossSize = it.fillCross ? clampLayoutSize(lineCross, it.minCross, it.maxCross) : it.cross;
+      let off = 0;
+      if (alignCross === "baseline") off = it.baseOff;
+      else if (alignCross === "center") off = (lineCross - crossSize) / 2;
+      else if (alignCross === "end") off = lineCross - crossSize;
+      if (it.fillCross && wraps) resize(it, it.main, crossSize);
+      const x = horizontal ? pos : crossPos + off;
+      const y = horizontal ? crossPos + off : pos;
+      place(s, it.id, finite(x), finite(y));
+      pos += it.main + step;
+    }
+    crossPos += lineCross + crossGap;
+  });
+}
+function parseTrack(track) {
+  if (typeof track === "number") return { sizing: "fixed", value: track };
+  if (track === "hug") return { sizing: "hug", value: 0 };
+  if (typeof track === "string") {
+    const match = /^\s*(-?\d*\.?\d+)\s*fr\s*$/i.exec(track);
+    if (match) return { sizing: "fill", value: Number(match[1]) };
+  }
+  if (track && typeof track === "object" && "fr" in track) return { sizing: "fill", value: track.fr };
+  return { sizing: "fill", value: 1 };
+}
+function trackList(spec, fallback) {
+  if (Array.isArray(spec)) return { count: Math.min(Math.max(spec.length, 1), MAX_TRACKS), tracks: spec.map(parseTrack) };
+  const n = typeof spec === "number" && Number.isFinite(spec) ? Math.floor(spec) : fallback;
+  return { count: Math.min(Math.max(n, 1), MAX_TRACKS), tracks: [] };
+}
+function trackSpec(tracks, i) {
+  const t = tracks[i] ?? { sizing: "fill", value: 1 };
+  const value = Number.isFinite(t.value) ? Math.min(Math.max(t.value, 0), 1e6) : 0;
+  return { sizing: t.sizing, value };
+}
+function cellRect(g, c) {
+  const x0 = g.columns[c.column]?.[0] ?? 0;
+  const x1 = g.columns[c.column + c.columnSpan - 1]?.[1] ?? x0;
+  const y0 = g.rows[c.row]?.[0] ?? 0;
+  const y1 = g.rows[c.row + c.rowSpan - 1]?.[1] ?? y0;
+  return { x: x0, y: y0, width: Math.max(x1, x0) - x0, height: Math.max(y1, y0) - y0 };
+}
+var toIndex = (v) => typeof v === "number" && Number.isFinite(v) && v >= 0 ? Math.floor(v) : void 0;
+function gridPlace(s, al, kids) {
+  const cols = trackList(al.grid?.columns, 2).count;
+  const minRows = trackList(al.grid?.rows, 1).count;
+  const maxRows = Math.min(Math.max(Math.floor(MAX_GRID_CELLS / cols), 1), MAX_TRACKS);
+  const occ = [];
+  const free = (c, r, cs, rs) => {
+    for (let ri = r; ri < r + rs; ri++) {
+      const row = occ[ri];
+      if (!row) continue;
+      for (let ci = c; ci < c + cs; ci++) if (row[ci]) return false;
+    }
+    return true;
+  };
+  const mark = (c, r, cs, rs) => {
+    while (occ.length < r + rs) occ.push(new Array(cols).fill(false));
+    for (let ri = r; ri < r + rs; ri++) for (let ci = c; ci < c + cs; ci++) occ[ri][ci] = true;
+  };
+  const spans = (id) => {
+    const area = getChildLayout(s.boxes.get(id).node).gridArea ?? {};
+    const cs = Math.min(Math.max(toIndex(area.columnSpan) ?? 1, 1), cols);
+    const rs = Math.min(Math.max(toIndex(area.rowSpan) ?? 1, 1), maxRows);
+    const col = toIndex(area.column);
+    const row = toIndex(area.row);
+    return {
+      col: col === void 0 ? void 0 : Math.min(col, cols - cs),
+      row: row === void 0 ? void 0 : Math.min(row, maxRows - rs),
+      cs,
+      rs
+    };
+  };
+  const placed = new Array(kids.length).fill(void 0);
+  kids.forEach((id, i) => {
+    const { col, row, cs, rs } = spans(id);
+    if (col !== void 0 && row !== void 0) {
+      mark(col, row, cs, rs);
+      placed[i] = { id, column: col, row, columnSpan: cs, rowSpan: rs };
+    }
+  });
+  let cursor = [0, 0];
+  kids.forEach((id, i) => {
+    if (placed[i]) return;
+    const { col, row, cs, rs } = spans(id);
+    const lastRow = maxRows - rs;
+    let c = 0;
+    let r = 0;
+    if (col !== void 0) {
+      r = lastRow;
+      for (let ri = 0; ri <= lastRow; ri++) if (free(col, ri, cs, rs)) {
+        r = ri;
+        break;
+      }
+      c = col;
+    } else if (row !== void 0) {
+      r = row;
+      for (let ci = 0; ci <= cols - cs; ci++) if (free(ci, row, cs, rs)) {
+        c = ci;
+        break;
+      }
+    } else {
+      let [rr, cc] = cursor;
+      let found;
+      while (rr <= lastRow) {
+        if (cc + cs <= cols && free(cc, rr, cs, rs)) {
+          found = [cc, rr];
+          break;
+        }
+        cc += 1;
+        if (cc + cs > cols) {
+          cc = 0;
+          rr += 1;
+        }
+      }
+      [c, r] = found ?? [0, lastRow];
+      cursor = [r, c + cs];
+    }
+    mark(c, r, cs, rs);
+    placed[i] = { id, column: c, row: r, columnSpan: cs, rowSpan: rs };
+  });
+  const cells = placed.filter((c) => !!c);
+  const rows = Math.max(cells.reduce((m, c) => Math.max(m, c.row + c.rowSpan), 0), minRows);
+  return { cells, rows: Math.min(rows, MAX_TRACKS) };
+}
+function resolveTracks(tracks, content, avail) {
+  const out = content.map((c, i) => {
+    const t = trackSpec(tracks, i);
+    return t.sizing === "fixed" ? t.value : c;
+  });
+  if (avail === void 0) return out;
+  const fr = (i) => trackSpec(tracks, i).value;
+  let flex = out.map((_, i) => i).filter((i) => trackSpec(tracks, i).sizing === "fill");
+  let used = out.reduce((sum, v, i) => trackSpec(tracks, i).sizing === "fill" ? sum : sum + v, 0);
+  while (flex.length > 0) {
+    const total = flex.reduce((sum, i) => sum + fr(i), 0);
+    const unit2 = total > 1e-12 ? Math.max(avail - used, 0) / total : 0;
+    const open = flex.filter((i) => unit2 * fr(i) >= out[i]);
+    const frozen = flex.filter((i) => unit2 * fr(i) < out[i]);
+    if (frozen.length === 0) {
+      for (const i of open) out[i] = unit2 * fr(i);
+      break;
+    }
+    used += frozen.reduce((sum, i) => sum + out[i], 0);
+    flex = open;
+  }
+  return out;
+}
+function trackContent(cells, sizes, tracks, n, gap, columns, hug) {
+  const byContent = (i) => trackSpec(tracks, i).sizing !== "fixed";
+  const content = Array.from({ length: n }, (_, i) => {
+    const t = trackSpec(tracks, i);
+    return t.sizing === "fixed" ? t.value : 0;
+  });
+  const span = (c) => columns ? [c.column, c.columnSpan] : [c.row, c.rowSpan];
+  cells.forEach((c, k) => {
+    const [start, len] = span(c);
+    if (len === 1 && byContent(start) && start < n) content[start] = Math.max(content[start], sizes[k]);
+  });
+  cells.forEach((c, k) => {
+    const [start, len] = span(c);
+    if (len < 2) return;
+    const range = Array.from({ length: len }, (_, j) => start + j).filter((i) => i < n);
+    if (!hug && range.some((i) => trackSpec(tracks, i).sizing === "fill")) return;
+    const have = range.reduce((sum, i) => sum + content[i], 0) + gap * (len - 1);
+    const grow = range.filter(byContent);
+    if (sizes[k] > have && grow.length > 0) {
+      const extra = (sizes[k] - have) / grow.length;
+      for (const i of grow) content[i] += extra;
+    }
+  });
+  return content;
+}
+function trackRanges(start, sizes, gap) {
+  let x = start;
+  return sizes.map((size) => {
+    const r = [x, x + size];
+    x += size + gap;
+    return r;
+  });
+}
+function gridGeometryOf(s, frame) {
+  const f = s.boxes.get(frame);
+  const al = f && getAutoLayout(f.node);
+  if (!f || !al || al.mode !== "grid") return void 0;
+  const [pt, pr, pb, pl] = resolvePadding(al.padding);
+  const kids = flowChildren(s, frame);
+  const { cells, rows } = gridPlace(s, al, kids);
+  const colSpec = trackList(al.grid?.columns, 2);
+  const rowSpec = trackList(al.grid?.rows, 1);
+  const cols = colSpec.count;
+  const gx = Math.max(finite(al.gap), 0);
+  const gy = Math.max(al.rowGap !== void 0 ? finite(al.rowGap) : gx, 0);
+  const hugW = getLayoutSizing(f.node, "width") === "hug";
+  const hugH = getLayoutSizing(f.node, "height") === "hug";
+  const ws = [];
+  const hs = [];
+  for (const c of cells) {
+    const b = s.boxes.get(c.id);
+    const lim2 = limitsOf(b.node);
+    ws.push(getLayoutSizing(b.node, "width") === "fill" && !hugW ? lim2.minW ?? 0 : b.w);
+    hs.push(getLayoutSizing(b.node, "height") === "fill" && !hugH ? lim2.minH ?? 0 : b.h);
+  }
+  const colContent = trackContent(cells, ws, colSpec.tracks, cols, gx, true, hugW);
+  const rowContent = trackContent(cells, hs, rowSpec.tracks, rows, gy, false, hugH);
+  const gapsW = gx * Math.max(cols - 1, 0);
+  const gapsH = gy * Math.max(rows - 1, 0);
+  const colW = resolveTracks(colSpec.tracks, colContent, hugW ? void 0 : finite(f.w) - pl - pr - gapsW);
+  const rowH = resolveTracks(rowSpec.tracks, rowContent, hugH ? void 0 : finite(f.h) - pt - pb - gapsH);
+  const lim = limitsOf(f.node);
+  const width = hugW ? colW.reduce((a, b) => a + b, 0) + gapsW + pl + pr : finite(f.w);
+  const height = hugH ? rowH.reduce((a, b) => a + b, 0) + gapsH + pt + pb : finite(f.h);
+  return {
+    columns: trackRanges(pl, colW, gx),
+    rows: trackRanges(pt, rowH, gy),
+    cells,
+    width: Math.max(clampLayoutSize(width, lim.minW, lim.maxW), pl + pr),
+    height: Math.max(clampLayoutSize(height, lim.minH, lim.maxH), pt + pb)
+  };
+}
+function layoutGrid(s, frame, al) {
+  const f = s.boxes.get(frame);
+  const fw = f.w;
+  const fh = f.h;
+  const hugW = getLayoutSizing(f.node, "width") === "hug";
+  const hugH = getLayoutSizing(f.node, "height") === "hug";
+  const lim = limitsOf(f.node);
+  const [pt, pr, pb, pl] = resolvePadding(al.padding);
+  setSize(
+    s,
+    frame,
+    hugW ? fw : Math.max(clampLayoutSize(fw, lim.minW, lim.maxW), pl + pr),
+    hugH ? fh : Math.max(clampLayoutSize(fh, lim.minH, lim.maxH), pt + pb)
+  );
+  let g = gridGeometryOf(s, frame);
+  if (!g) return;
+  let widened = false;
+  for (const c of g.cells) {
+    const b = s.boxes.get(c.id);
+    if (getLayoutSizing(b.node, "width") === "fill" && !hugW) {
+      const l = limitsOf(b.node);
+      resizeChild(s, c.id, clampLayoutSize(cellRect(g, c).width, l.minW, l.maxW), b.h);
+      widened = true;
+    }
+  }
+  if (widened) g = gridGeometryOf(s, frame) ?? g;
+  setSize(s, frame, g.width, g.height);
+  constrain(s, frame, fw, fh);
+  const frameX = al.alignMain === "center" ? "center" : al.alignMain === "end" ? "end" : "start";
+  const frameY = al.alignCross === "center" ? "center" : al.alignCross === "end" ? "end" : "start";
+  const offset = (a, free) => a === "center" ? free / 2 : a === "end" ? free : 0;
+  for (const c of g.cells) {
+    const cell = cellRect(g, c);
+    const b = s.boxes.get(c.id);
+    const l = limitsOf(b.node);
+    const area = getChildLayout(b.node).gridArea ?? {};
+    const fillW = getLayoutSizing(b.node, "width") === "fill" && !hugW;
+    const fillH = getLayoutSizing(b.node, "height") === "fill" && !hugH;
+    if (fillW || fillH) {
+      resizeChild(
+        s,
+        c.id,
+        fillW ? clampLayoutSize(cell.width, l.minW, l.maxW) : b.w,
+        fillH ? clampLayoutSize(cell.height, l.minH, l.maxH) : b.h
+      );
+    }
+    const ox = offset(area.alignX ?? frameX, cell.width - b.w);
+    const oy = offset(area.alignY ?? frameY, cell.height - b.h);
+    place(s, c.id, finite(cell.x + ox), finite(cell.y + oy));
+  }
+}
+function constrain(s, id, ow, oh) {
+  const f = s.boxes.get(id);
+  if (!f) return;
+  const nw = f.w;
+  const nh = f.h;
+  if (Math.abs(nw - ow) < 1e-9 && Math.abs(nh - oh) < 1e-9) return;
+  const absoluteOnly = !!getAutoLayout(f.node);
+  const sx = ow > 1e-9 ? nw / ow : 1;
+  const sy = oh > 1e-9 ? nh / oh : 1;
+  s.guard(`constrain:${id}`, () => {
+    for (const k of f.kids) {
+      const c = s.boxes.get(k);
+      const child = getChildLayout(c.node);
+      if (absoluteOnly && !child.absolute) continue;
+      let x0 = c.x;
+      let x1 = c.x + c.w;
+      let y0 = c.y;
+      let y1 = c.y + c.h;
+      const dx = nw - ow;
+      const dy = nh - oh;
+      switch (child.constraints?.horizontal ?? "left") {
+        case "right":
+          x0 += dx;
+          x1 += dx;
+          break;
+        case "leftRight":
+          x1 += dx;
+          break;
+        case "center":
+          x0 += dx / 2;
+          x1 += dx / 2;
+          break;
+        case "scale":
+          x0 *= sx;
+          x1 *= sx;
+          break;
+      }
+      switch (child.constraints?.vertical ?? "top") {
+        case "bottom":
+          y0 += dy;
+          y1 += dy;
+          break;
+        case "topBottom":
+          y1 += dy;
+          break;
+        case "center":
+          y0 += dy / 2;
+          y1 += dy / 2;
+          break;
+        case "scale":
+          y0 *= sy;
+          y1 *= sy;
+          break;
+      }
+      const cw = c.w;
+      const ch = c.h;
+      const resized = Math.abs(x1 - x0 - cw) > 1e-9 || Math.abs(y1 - y0 - ch) > 1e-9;
+      place(s, k, finite(x0), finite(y0));
+      if (resized) {
+        setSize(s, k, x1 - x0, y1 - y0);
+        if (c.kids.length > 0) constrain(s, k, cw, ch);
+        if (getAutoLayout(c.node)) layout(s, k);
+      }
+    }
+  });
+}
+function layoutFrame(nodes, frameId, options = {}) {
+  const s = new LayoutState(nodes, options);
+  layout(s, frameId);
+  return s.updates();
+}
+function postOrder(s, nodes) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (id) => {
+    if (seen.has(id)) return;
+    seen.add(id);
+    for (const k of s.boxes.get(id)?.kids ?? []) visit(k);
+    out.push(id);
+  };
+  const roots = nodes.filter((n) => !n.parentId || !s.boxes.has(n.parentId));
+  for (const r of roots) visit(r.id);
+  for (const n of nodes) visit(n.id);
+  return out;
+}
+function layoutAll(nodes, options = {}) {
+  const s = new LayoutState(nodes, options);
+  for (const id of postOrder(s, nodes)) if (getAutoLayout(s.boxes.get(id).node)) layout(s, id);
+  return s.updates();
+}
+function layoutUp(nodes, changedId, options = {}) {
+  return layoutUpMany(nodes, [changedId], options);
+}
+function layoutUpMany(nodes, changedIds, options = {}) {
+  const s = new LayoutState(nodes, options);
+  const chains = [...new Set(changedIds)].filter((id) => s.boxes.has(id)).map((id) => [id, ...s.ancestors(id)]);
+  const depth = /* @__PURE__ */ new Map();
+  for (const chain of chains) chain.forEach((id, i) => depth.set(id, Math.max(depth.get(id) ?? 0, chain.length - 1 - i)));
+  const order = [...depth.keys()].sort((a, b) => depth.get(b) - depth.get(a));
+  for (const id of order) if (getAutoLayout(s.boxes.get(id).node)) layout(s, id);
+  return s.updates();
+}
+function applyConstraints(nodes, parentId, previousSize, options = {}) {
+  const s = new LayoutState(nodes, options);
+  constrain(s, parentId, previousSize.width, previousSize.height);
+  return s.updates();
+}
+function getAutoLayoutGrid(nodes, frameId, options = {}) {
+  return gridGeometryOf(new LayoutState(nodes, options), frameId);
+}
+function getFlowChildren(nodes, frameId) {
+  return nodes.filter((n) => n.parentId === frameId && n.id !== frameId && n.hidden !== true && !getChildLayout(n).absolute).map((n) => n.id);
+}
+function getLayoutParent(nodes, id) {
+  const lookup = createNodeLookup(nodes);
+  const node = lookup.get(id);
+  if (!node?.parentId || getChildLayout(node).absolute) return void 0;
+  const parent = lookup.get(node.parentId);
+  return isAutoLayoutFrame(parent) ? parent : void 0;
+}
+function makeSizingCoherent(nodes, id, options = {}) {
+  const lookup = createNodeLookup(nodes);
+  const targets = /* @__PURE__ */ new Set([id, ...nodes.filter((n) => n.parentId === id).map((n) => n.id)]);
+  if (!lookup.has(id)) return nodes;
+  let changed = false;
+  const next = nodes.map((node) => {
+    if (!targets.has(node.id)) return node;
+    const parent = node.parentId ? lookup.get(node.parentId) : void 0;
+    const flowParent = parent && isAutoLayoutFrame(parent) && !getChildLayout(node).absolute ? parent : void 0;
+    const canHug = isAutoLayoutFrame(node) || options.measure?.textSize?.(node) !== void 0;
+    const coherent = (axis) => {
+      const sizing = getLayoutSizing(node, axis);
+      if (sizing === "fill" && (!flowParent || getLayoutSizing(flowParent, axis) === "hug")) return "fixed";
+      if (sizing === "hug" && !canHug) return "fixed";
+      return sizing;
+    };
+    const width = coherent("width");
+    const height = coherent("height");
+    if (width === getLayoutSizing(node, "width") && height === getLayoutSizing(node, "height")) return node;
+    changed = true;
+    const child = getChildLayout(node);
+    return {
+      ...node,
+      data: { ...node.data, [CHILD_LAYOUT_DATA_KEY]: { ...child, sizing: { ...child.sizing, width, height } } }
+    };
+  });
+  return changed ? next : nodes;
+}
+function getAutoLayoutInsertTarget(nodes, frameId, point, options = {}) {
+  const lookup = createNodeLookup(nodes);
+  const frame = lookup.get(frameId);
+  const al = getAutoLayout(frame);
+  if (!frame || !al) return void 0;
+  const s = new LayoutState(nodes, options);
+  const origin = getAbsolutePosition(frame, lookup);
+  const px = point.x - origin.x;
+  const py = point.y - origin.y;
+  const siblings = flowChildren(s, frameId).filter((id) => id !== options.excludeId).map((id) => s.boxes.get(id));
+  const horizontal = al.mode !== "vertical";
+  const main = (b) => horizontal ? b.x : b.y;
+  const mainSize = (b) => horizontal ? b.w : b.h;
+  const cross = (b) => horizontal ? b.y : b.x;
+  const crossSize = (b) => horizontal ? b.h : b.w;
+  const p = { x: px, y: py };
+  const multiLine = al.mode === "grid" || !!al.wrap;
+  let index = 0;
+  for (const b of siblings) {
+    const before = multiLine ? cross(b) + crossSize(b) <= cross(p) || cross(b) <= cross(p) && main(b) + mainSize(b) / 2 < main(p) : main(b) + mainSize(b) / 2 < main(p);
+    if (before) index += 1;
+  }
+  const [pt, pr, pb, pl] = resolvePadding(al.padding);
+  const prev = siblings[index - 1];
+  const next = siblings[index];
+  const f = s.boxes.get(frameId);
+  let guide;
+  if (horizontal) {
+    const x = prev && next && Math.abs(cross(prev) - cross(next)) < 1e-6 ? (prev.x + prev.w + next.x) / 2 : prev ? prev.x + prev.w : next ? next.x : pl;
+    const ref = next ?? prev;
+    const y1 = ref ? ref.y : pt;
+    const y2 = ref ? ref.y + ref.h : f.h - pb;
+    guide = { orientation: "vertical", kind: "edge", x1: origin.x + x, y1: origin.y + y1, x2: origin.x + x, y2: origin.y + y2 };
+  } else {
+    const y = prev && next && Math.abs(cross(prev) - cross(next)) < 1e-6 ? (prev.y + prev.h + next.y) / 2 : prev ? prev.y + prev.h : next ? next.y : pt;
+    const ref = next ?? prev;
+    const x1 = ref ? ref.x : pl;
+    const x2 = ref ? ref.x + ref.w : f.w - pr;
+    guide = { orientation: "horizontal", kind: "edge", x1: origin.x + x1, y1: origin.y + y, x2: origin.x + x2, y2: origin.y + y };
+  }
+  return { frameId, index, guide };
+}
+function moveLayoutChild(nodes, childId, index) {
+  const child = nodes.find((n) => n.id === childId);
+  if (!child?.parentId) return nodes;
+  const siblings = nodes.filter((n) => n.parentId === child.parentId && n.id !== child.parentId);
+  const flow = siblings.filter((n) => n.hidden !== true && !getChildLayout(n).absolute && n.id !== childId);
+  const clamped = Math.min(Math.max(Math.floor(Number.isFinite(index) ? index : 0), 0), flow.length);
+  const order = siblings.filter((n) => n.id !== childId);
+  const anchor = flow[clamped];
+  const at = anchor ? order.indexOf(anchor) : flow.length > 0 ? order.indexOf(flow[flow.length - 1]) + 1 : order.length;
+  order.splice(at, 0, child);
+  if (order.every((n, i) => n === siblings[i])) return nodes;
+  let k = 0;
+  const parentId = child.parentId;
+  const placed = nodes.map((n) => n.parentId === parentId && n.id !== parentId ? order[k++] : n);
+  return parentsFirst(placed);
+}
+function parentsFirst(nodes) {
+  const ids = new Set(nodes.map((n) => n.id));
+  const pending = /* @__PURE__ */ new Map();
+  const done = /* @__PURE__ */ new Set();
+  const out = [];
+  const emit = (n) => {
+    out.push(n);
+    done.add(n.id);
+    const waiting = pending.get(n.id);
+    if (waiting) {
+      pending.delete(n.id);
+      for (const w of waiting) emit(w);
+    }
+  };
+  for (const n of nodes) {
+    if (n.parentId && ids.has(n.parentId) && !done.has(n.parentId) && n.parentId !== n.id) {
+      if (!pending.has(n.parentId)) pending.set(n.parentId, []);
+      pending.get(n.parentId).push(n);
+    } else emit(n);
+  }
+  for (const waiting of pending.values()) for (const n of waiting) if (!done.has(n.id)) emit(n);
+  return out;
+}
+
 // src/canvas/arrangeController.ts
 function createCanvasArrangeController(options) {
   let guides = [];
   let dragIndex = null;
   let dragKey = "";
   let lastSnapped = /* @__PURE__ */ new Map();
+  let resizeId = null;
+  let resizeStart = null;
+  let resizeIndex = null;
+  let lastResized = null;
   const selectedIds = (ids) => ids ? [...ids] : options.getSelectedIds?.() ?? options.getNodes().filter((n) => n.selected).map((n) => n.id);
   const setGuides = (next) => {
     if (next.length === 0 && guides.length === 0) return;
@@ -2890,6 +4288,16 @@ function createCanvasArrangeController(options) {
   };
   function apply(name, updates) {
     if (updates.length === 0) return updates;
+    if (options.autoLayout) {
+      const layoutOptions = options.autoLayout === true ? { rectOptions: options.rectOptions } : options.autoLayout;
+      const moved = applyNodeUpdates(options.getNodes(), updates);
+      const layout2 = layoutUpMany(moved, updates.map((u) => u.id), layoutOptions);
+      if (layout2.length > 0) {
+        const byId = /* @__PURE__ */ new Map();
+        for (const u of [...updates, ...layout2]) byId.set(u.id, { ...byId.get(u.id), ...u });
+        updates = [...byId.values()];
+      }
+    }
     const inverse = invertNodeUpdates(options.getNodes(), updates);
     const run = (u) => options.setNodes(applyNodeUpdates(options.getNodes(), u));
     if (options.history) {
@@ -3098,6 +4506,150 @@ function createCanvasArrangeController(options) {
         return { ...c, position };
       });
     },
+    /**
+     * Starts resize snapping for node `id`: records its box (to tell which handle is
+     * dragged) and caches the snap targets. Optional: `resize` starts lazily.
+     */
+    beginResize(id) {
+      const nodes = options.getNodes();
+      const lookup = createNodeLookup(nodes);
+      const node = lookup.get(id);
+      resizeId = id;
+      resizeStart = node ? getResizingNodeRect(node, lookup, rect()) : null;
+      resizeIndex = createNodeGuideIndex(nodes, [id], rect());
+      lastResized = null;
+    },
+    /**
+     * Snaps node `id` as currently sized in `getNodes()` (call it after the flow wrote the
+     * new size, e.g. SvelteFlow's `NodeResizer` `onResize`, deferred by a microtask) and
+     * writes the snapped box back through `setNodes` (not recorded in history). `handle`
+     * defaults to the one inferred from the edges that moved since `beginResize`. A locked
+     * node is restored to its starting box.
+     */
+    resize(id, handle) {
+      if (resizeId !== id) controller.beginResize(id);
+      const nodes = options.getNodes();
+      const lookup = createNodeLookup(nodes);
+      const node = lookup.get(id);
+      if (!node || !resizeStart) return null;
+      const proposed = getResizingNodeRect(node, lookup, rect());
+      if (isLocked(node)) {
+        const start = resizeStart;
+        const parent = node.parentId ? lookup.get(node.parentId) : void 0;
+        const origin = parent ? getResizingNodeRect(parent, lookup, rect()) : { x: 0, y: 0 };
+        if (proposed.x !== start.x || proposed.y !== start.y || proposed.width !== start.width || proposed.height !== start.height) {
+          options.setNodes(
+            applyNodeUpdates(nodes, [
+              { id, position: { x: start.x - origin.x, y: start.y - origin.y }, width: start.width, height: start.height }
+            ])
+          );
+        }
+        return null;
+      }
+      if ((options.resizeSnapping ?? options.snapping) === false) return null;
+      const h = handle ?? inferResizeHandle(resizeStart, proposed);
+      if (!h) {
+        setGuides([]);
+        return null;
+      }
+      const result = snapNodeResize(nodes, id, proposed, h, {
+        ...rect(),
+        ...options.guides,
+        ...options.resize,
+        zoom: options.getZoom?.() ?? 1,
+        index: resizeIndex
+      });
+      lastResized = result.updates.length > 0 ? result : null;
+      if (result.updates.length > 0) options.setNodes(applyNodeUpdates(nodes, result.updates));
+      setGuides(result.guides);
+      return result;
+    },
+    /**
+     * Ends resize snapping: clears guides and re-applies the last snapped box if the flow
+     * wrote the raw pointer size afterwards.
+     */
+    endResize() {
+      const last = lastResized;
+      resizeId = null;
+      resizeStart = null;
+      resizeIndex = null;
+      lastResized = null;
+      setGuides([]);
+      const update = last?.updates[0];
+      if (!update) return;
+      const node = options.getNodes().find((n) => n.id === update.id);
+      if (!node) return;
+      const drift = node.position.x !== update.position.x || node.position.y !== update.position.y || node.width !== update.width || node.height !== update.height;
+      if (drift) options.setNodes(applyNodeUpdates(options.getNodes(), [update]));
+    },
+    /**
+     * React Flow style: snaps the `dimensions` (and matching `position`) changes a
+     * `NodeResizer` emits in an `onNodesChange` batch and updates `guides`. The resize-end
+     * change (`resizing: false`) carries the raw pointer size, so the last snapped size is
+     * kept. Resize changes of locked nodes are dropped. Returns the (possibly new) changes.
+     */
+    snapResizeChanges(changes) {
+      const dims = changes.find(
+        (c) => c.type === "dimensions" && typeof c.id === "string" && !!c.dimensions && typeof c.resizing === "boolean"
+      );
+      if (!dims) return changes;
+      const id = dims.id;
+      const nodes = options.getNodes();
+      const lookup = createNodeLookup(nodes);
+      const node = lookup.get(id);
+      const isResizeChange = (c) => c.id === id && (c.type === "dimensions" || c.type === "position");
+      if (node && isLocked(node)) {
+        if (dims.resizing === false) controller.endResize();
+        return changes.filter((c) => !isResizeChange(c));
+      }
+      if (dims.resizing === false) {
+        const last = lastResized?.updates[0];
+        lastResized = null;
+        controller.endResize();
+        if (!last || last.id !== id) return changes;
+        return changes.map(
+          (c) => c === dims ? { ...c, dimensions: { width: last.width, height: last.height } } : c
+        );
+      }
+      if (!node || (options.resizeSnapping ?? options.snapping) === false) return changes;
+      if (resizeId !== id) controller.beginResize(id);
+      if (!resizeStart) return changes;
+      const posChange = changes.find((c) => c.id === id && c.type === "position" && !!c.position);
+      const parent = node.parentId ? lookup.get(node.parentId) : void 0;
+      const origin = parent ? getResizingNodeRect(parent, lookup, rect()) : { x: 0, y: 0 };
+      const position = posChange?.position ?? node.position;
+      const proposed = {
+        x: position.x + origin.x,
+        y: position.y + origin.y,
+        width: dims.dimensions.width,
+        height: dims.dimensions.height
+      };
+      const handle = inferResizeHandle(resizeStart, proposed);
+      if (!handle) {
+        setGuides([]);
+        return changes;
+      }
+      const result = snapNodeResize(nodes, id, proposed, handle, {
+        ...rect(),
+        ...options.guides,
+        ...options.resize,
+        zoom: options.getZoom?.() ?? 1,
+        index: resizeIndex
+      });
+      setGuides(result.guides);
+      const update = result.updates[0];
+      lastResized = update ? result : null;
+      if (!update) return changes;
+      const next = changes.map((c) => {
+        if (c === dims) return { ...c, dimensions: { width: update.width, height: update.height } };
+        if (c === posChange) return { ...c, position: update.position };
+        return c;
+      });
+      if (!posChange && (update.position.x !== node.position.x || update.position.y !== node.position.y)) {
+        next.push({ id, type: "position", position: update.position });
+      }
+      return next;
+    },
     /**
      * Clears guides and the cached snap targets. Call it from the flow's drag-stop
      * handler: flow libraries write the raw pointer position when a drag ends, so the
@@ -3122,7 +4674,405 @@ function createCanvasArrangeController(options) {
   };
   return controller;
 }
+
+// src/canvas/measure.ts
+var EPS2 = 1e-6;
+function measureLabel(distance) {
+  const v = Math.round(Math.abs(distance) * 100) / 100;
+  return Object.is(v, -0) ? "0" : String(v);
+}
+var toBox = (r) => ({ x0: r.x, y0: r.y, x1: r.x + r.width, y1: r.y + r.height });
+var finiteBox = (b) => [b.x0, b.y0, b.x1, b.y1].every(Number.isFinite);
+function line(kind, x1, y1, x2, y2) {
+  return { orientation: x1 === x2 ? "vertical" : "horizontal", kind, x1, y1, x2, y2 };
+}
+function measured(out, x1, y1, x2, y2) {
+  const d = Math.hypot(x2 - x1, y2 - y1);
+  if (d > EPS2 && Number.isFinite(d)) out.push({ ...line("measure", x1, y1, x2, y2), label: measureLabel(d) });
+}
+function extension(out, x1, y1, x2, y2) {
+  if (Math.hypot(x2 - x1, y2 - y1) > EPS2) out.push(line("extension", x1, y1, x2, y2));
+}
+function contains(outer, inner) {
+  return outer.x0 <= inner.x0 + EPS2 && outer.y0 <= inner.y0 + EPS2 && outer.x1 >= inner.x1 - EPS2 && outer.y1 >= inner.y1 - EPS2;
+}
+function overlapMid(a0, a1, b0, b1) {
+  const lo = Math.max(a0, b0);
+  const hi = Math.min(a1, b1);
+  return lo <= hi ? (lo + hi) / 2 : null;
+}
+function inside(out, inner, outer) {
+  const cx = (inner.x0 + inner.x1) / 2;
+  const cy = (inner.y0 + inner.y1) / 2;
+  measured(out, outer.x0, cy, inner.x0, cy);
+  measured(out, inner.x1, cy, outer.x1, cy);
+  measured(out, cx, outer.y0, cx, inner.y0);
+  measured(out, cx, inner.y1, cx, outer.y1);
+}
+function measureBetween(a, b) {
+  const out = [];
+  const A = toBox(a);
+  const B = toBox(b);
+  if (!finiteBox(A) || !finiteBox(B)) return out;
+  if (contains(B, A)) {
+    inside(out, A, B);
+    return out;
+  }
+  if (contains(A, B)) {
+    inside(out, B, A);
+    return out;
+  }
+  const ox = overlapMid(A.x0, A.x1, B.x0, B.x1);
+  const oy = overlapMid(A.y0, A.y1, B.y0, B.y1);
+  const overlapping = A.x0 < B.x1 && B.x0 < A.x1 && A.y0 < B.y1 && B.y0 < A.y1;
+  if (overlapping && ox !== null && oy !== null) {
+    measured(out, A.x0, oy, B.x0, oy);
+    measured(out, A.x1, oy, B.x1, oy);
+    measured(out, ox, A.y0, ox, B.y0);
+    measured(out, ox, A.y1, ox, B.y1);
+    return out;
+  }
+  const cx = (A.x0 + A.x1) / 2;
+  const cy = (A.y0 + A.y1) / 2;
+  const gapX = B.x0 >= A.x1 ? [A.x1, B.x0] : B.x1 <= A.x0 ? [A.x0, B.x1] : null;
+  if (gapX) {
+    const [from, to] = gapX;
+    const y = oy ?? cy;
+    measured(out, from, y, to, y);
+    if (oy === null) extension(out, to, y, to, y < B.y0 ? B.y0 : B.y1);
+  }
+  const gapY = B.y0 >= A.y1 ? [A.y1, B.y0] : B.y1 <= A.y0 ? [A.y0, B.y1] : null;
+  if (gapY) {
+    const [from, to] = gapY;
+    const x = ox ?? cx;
+    measured(out, x, from, x, to);
+    if (ox === null) extension(out, x, to, x < B.x0 ? B.x0 : B.x1, to);
+  }
+  return out;
+}
+function measureToLine(a, orientation, at) {
+  const out = [];
+  const A = toBox(a);
+  if (!finiteBox(A) || !Number.isFinite(at)) return out;
+  const vertical = orientation === "vertical";
+  const cx = (A.x0 + A.x1) / 2;
+  const cy = (A.y0 + A.y1) / 2;
+  const [lo, hi] = vertical ? [A.x0, A.x1] : [A.y0, A.y1];
+  const seg = (from, to) => vertical ? measured(out, from, cy, to, cy) : measured(out, cx, from, cx, to);
+  if (at >= hi) seg(hi, at);
+  else if (at <= lo) seg(at, lo);
+  else {
+    seg(lo, at);
+    seg(at, hi);
+  }
+  return out;
+}
+function measureSelection(nodes, selectedIds, hoveredId, options = {}) {
+  const none = (selection2 = null) => ({ guides: [], target: null, selection: selection2 });
+  const lookup = createNodeLookup(nodes);
+  const selected = [...new Set(selectedIds)].map((id) => lookup.get(id)).filter((n) => !!n && n.hidden !== true);
+  if (selected.length === 0) return none();
+  const selection = boundsOf(selected.map((n) => getNodeRect(n, lookup, options)));
+  if (!selection) return none();
+  const selectedSet = new Set(selected.map((n) => n.id));
+  let targetId = hoveredId ?? null;
+  if (targetId === null || selectedSet.has(targetId)) {
+    const parentId = selected[0].parentId;
+    const sameParent = selected.every((n) => n.parentId === parentId);
+    targetId = parentId && sameParent && !selectedSet.has(parentId) ? parentId : null;
+  }
+  const target = targetId !== null ? lookup.get(targetId) : void 0;
+  if (!target || target.hidden === true) return none(selection);
+  const rect = getNodeRect(target, lookup, options);
+  return { guides: measureBetween(selection, rect), target: rect, selection };
+}
+function isMeasureModifierHeld(event) {
+  if (!event) return false;
+  if (event.type === "keyup" && event.key === "Alt") return false;
+  return event.altKey === true || event.type === "keydown" && event.key === "Alt";
+}
+
+// src/canvas/autoLayoutController.ts
+function mergeNodeUpdates(...lists) {
+  const byId = /* @__PURE__ */ new Map();
+  for (const list of lists) for (const u of list) byId.set(u.id, { ...byId.get(u.id), ...u });
+  return [...byId.values()];
+}
+function relayoutUpdates(nodes, ids, options = {}) {
+  return layoutUpMany(nodes, ids, options);
+}
+function createCanvasAutoLayoutController(options) {
+  const layoutOptions = () => ({ measure: options.measure, rectOptions: options.rectOptions });
+  const enabled = () => options.enabled !== false;
+  const pendingIds = /* @__PURE__ */ new Set();
+  const pendingResizes = /* @__PURE__ */ new Map();
+  const resizeStarts = /* @__PURE__ */ new Map();
+  let pendingAll = false;
+  const dragStarts = /* @__PURE__ */ new Map();
+  const pendingDrops = /* @__PURE__ */ new Set();
+  let guides = [];
+  const setGuides = (next) => {
+    if (next.length === 0 && guides.length === 0) return;
+    guides = next;
+    options.onGuidesChange?.(guides);
+  };
+  function run(name, forward, backward, ids, extra = [], restore) {
+    const before = options.getNodes();
+    const structural = forward(before);
+    const withExtra = applyNodeUpdates(structural, extra);
+    const layout2 = enabled() || name === "Auto Layout" ? relayoutUpdates(withExtra, ids(withExtra), layoutOptions()) : [];
+    const updates = mergeNodeUpdates(extra, layout2);
+    if (structural === before && updates.length === 0) return updates;
+    let inverse = invertNodeUpdates(structural, updates);
+    if (restore) {
+      inverse = mergeNodeUpdates(inverse, [{ id: restore.id, position: { ...restore.position } }]);
+    }
+    const execute = () => options.setNodes(applyNodeUpdates(forward(options.getNodes()), updates));
+    const undo = () => options.setNodes(backward(applyNodeUpdates(options.getNodes(), inverse)));
+    if (options.history) options.history.execute({ name, execute, undo });
+    else execute();
+    return updates;
+  }
+  const identity = (nodes) => nodes;
+  const controller = {
+    /** Drop marker of the active reorder drag (flow coordinates); empty otherwise. */
+    get guides() {
+      return guides;
+    },
+    /**
+     * Lays out frame `frameId` and its auto layout ancestors (default: every frame) as one
+     * (optionally undoable) step. Returns the updates.
+     */
+    applyAutoLayout(frameId) {
+      if (frameId === void 0) {
+        const updates = layoutAll(options.getNodes(), layoutOptions());
+        return run("Auto Layout", identity, identity, () => [], updates);
+      }
+      return run("Auto Layout", identity, identity, () => [frameId]);
+    },
+    /** Updates that relayout around `ids` on the current nodes, without applying them. */
+    layoutUpdates(ids) {
+      return relayoutUpdates(options.getNodes(), ids, layoutOptions());
+    },
+    /**
+     * Applies the relayout around `ids` (frames, or nodes inside frames) directly, not
+     * recorded in history: auto layout is derived state, re-run after any change.
+     */
+    relayout(ids) {
+      const updates = relayoutUpdates(options.getNodes(), ids, layoutOptions());
+      if (updates.length > 0) options.setNodes(applyNodeUpdates(options.getNodes(), updates));
+      return updates;
+    },
+    /**
+     * Adds `node` (into the frame named by its `parentId`, at flow `index` when given) and
+     * lays out its frame, as one step.
+     */
+    addNode(node, addOptions = {}) {
+      const forward = (nodes) => {
+        if (nodes.some((n) => n.id === node.id)) return nodes;
+        let next = [...nodes, node];
+        if (addOptions.index !== void 0 && node.parentId) next = moveLayoutChild(next, node.id, addOptions.index);
+        return next;
+      };
+      const backward = (nodes) => nodes.filter((n) => n.id !== node.id);
+      return run("Add Node", forward, backward, () => [node.id]);
+    },
+    /** Removes nodes (and their descendants) and lays out the frames they leave, as one step. */
+    removeNodes(ids) {
+      const before = options.getNodes();
+      const remove = new Set(ids);
+      let grew = true;
+      while (grew) {
+        grew = false;
+        for (const n of before) {
+          if (n.parentId && remove.has(n.parentId) && !remove.has(n.id)) {
+            remove.add(n.id);
+            grew = true;
+          }
+        }
+      }
+      const removed = before.map((n, i) => [i, n]).filter(([, n]) => remove.has(n.id));
+      if (removed.length === 0) return [];
+      const parents = [...new Set(removed.map(([, n]) => n.parentId).filter((p) => !!p && !remove.has(p)))];
+      const forward = (nodes) => nodes.filter((n) => !remove.has(n.id));
+      const backward = (nodes) => {
+        const next = [...nodes];
+        for (const [i, n] of removed) next.splice(Math.min(i, next.length), 0, n);
+        return next;
+      };
+      return run("Delete", forward, backward, () => parents);
+    },
+    /**
+     * Resizes node `id` (its children follow their constraints) and lays out around it,
+     * as one step.
+     */
+    resizeNode(id, size) {
+      const nodes = options.getNodes();
+      const node = nodes.find((n) => n.id === id);
+      if (!node) return [];
+      const old = getNodeSize(node, options.rectOptions);
+      const update = { id };
+      if (size.width !== void 0) update.width = size.width;
+      if (size.height !== void 0) update.height = size.height;
+      const resized = applyNodeUpdates(nodes, [update]);
+      const constrained = mergeNodeUpdates([update], applyConstraints(resized, id, old, layoutOptions()));
+      return run("Resize", identity, identity, () => [id], constrained);
+    },
+    /** Moves flow child `childId` to flow index `index` in its frame and lays it out, as one step. */
+    moveChild(childId, index) {
+      const before = options.getNodes();
+      const order = before.map((n) => n.id);
+      const forward = (nodes) => moveLayoutChild(nodes, childId, index);
+      const backward = (nodes) => restoreOrder(nodes, order);
+      if (forward(before) === before) return [];
+      return run("Reorder", forward, backward, () => [childId]);
+    },
+    /** Where flow child `id` would drop if released at `point` (default: its centre). */
+    getInsertTarget(id, point) {
+      const nodes = options.getNodes();
+      const frame = getLayoutParent(nodes, id);
+      if (!frame) return void 0;
+      const lookup = createNodeLookup(nodes);
+      const rect = getNodeRect(lookup.get(id), lookup, options.rectOptions);
+      const at = point ?? { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+      return getAutoLayoutInsertTarget(nodes, frame.id, at, { ...layoutOptions(), excludeId: id });
+    },
+    /** Records the start position of a reorder drag. Optional: `dragReorder` records it lazily. */
+    beginReorderDrag(id) {
+      const node = options.getNodes().find((n) => n.id === id);
+      if (node && getLayoutParent(options.getNodes(), id)) dragStarts.set(id, { ...node.position });
+    },
+    /**
+     * While flow child `id` is dragged (as currently positioned in `getNodes()`): updates the
+     * drop marker. Returns the insert target.
+     */
+    dragReorder(id, point) {
+      if (options.dragReorder === false) return void 0;
+      if (!dragStarts.has(id)) controller.beginReorderDrag(id);
+      const target = controller.getInsertTarget(id, point);
+      setGuides(target ? [target.guide] : []);
+      return target;
+    },
+    /**
+     * Ends a reorder drag: moves `id` to the slot under `point` (default: its centre) and lays
+     * the frame out, as one undoable step whose undo puts the node back where the drag began.
+     */
+    endReorderDrag(id, point) {
+      setGuides([]);
+      const start = dragStarts.get(id);
+      dragStarts.delete(id);
+      if (options.dragReorder === false || !getLayoutParent(options.getNodes(), id)) return [];
+      const target = controller.getInsertTarget(id, point);
+      if (!target) return [];
+      const before = options.getNodes();
+      const order = before.map((n) => n.id);
+      const forward = (nodes) => moveLayoutChild(nodes, id, target.index);
+      const backward = (nodes) => restoreOrder(nodes, order);
+      return run("Reorder", forward, backward, () => [id], [], start && { id, position: start });
+    },
+    /**
+     * Notes a batch of React Flow / SvelteFlow style node changes (before or after they are
+     * applied) so `flush` can relayout: dimension changes (measured sizes, resize ends),
+     * added and removed nodes, and position changes of flow children (reorder drags).
+     * Returns the changes unchanged.
+     */
+    noteChanges(changes) {
+      const nodes = options.getNodes();
+      const lookup = createNodeLookup(nodes);
+      for (const c of changes) {
+        const id = c.id ?? c.item?.id;
+        if (c.type === "add" && c.item) {
+          pendingIds.add(c.item.id);
+        } else if (c.type === "remove" && id) {
+          const parent = lookup.get(id)?.parentId;
+          if (parent) pendingIds.add(parent);
+          else pendingAll = true;
+        } else if (c.type === "replace" && id) {
+          pendingIds.add(id);
+        } else if (c.type === "dimensions" && id) {
+          const node = lookup.get(id);
+          if (c.resizing === true) {
+            if (node && !resizeStarts.has(id)) resizeStarts.set(id, getNodeSize(node, options.rectOptions));
+            continue;
+          }
+          const start = resizeStarts.get(id);
+          resizeStarts.delete(id);
+          if (start) pendingResizes.set(id, start);
+          pendingIds.add(id);
+        } else if (c.type === "position" && id && options.dragReorder !== false) {
+          if (!getLayoutParent(nodes, id)) continue;
+          if (c.dragging === true) {
+            if (!dragStarts.has(id)) {
+              const node = lookup.get(id);
+              if (node) dragStarts.set(id, { ...node.position });
+            }
+          } else if (c.dragging === false || dragStarts.has(id)) {
+            pendingDrops.add(id);
+          }
+        }
+      }
+      return changes;
+    },
+    /**
+     * Notes nodes that were already removed (e.g. SvelteFlow's `ondelete`), so `flush`
+     * relayouts the frames they left. The nodes must still carry their `parentId`.
+     */
+    noteRemoved(removed) {
+      const gone = /* @__PURE__ */ new Set();
+      const list = [...removed];
+      for (const n of list) gone.add(n.id);
+      for (const n of list) if (n.parentId && !gone.has(n.parentId)) pendingIds.add(n.parentId);
+    },
+    /** Whether `noteChanges` left work for `flush`. */
+    get hasPending() {
+      return pendingAll || pendingIds.size > 0 || pendingResizes.size > 0 || pendingDrops.size > 0 || dragStarts.size > 0;
+    },
+    /**
+     * Applies the work noted by `noteChanges` to the current nodes: drop markers while
+     * dragging, committed reorders on drop (undoable), and a relayout (not recorded) for
+     * size, add and remove changes. Call it once the changes are applied.
+     */
+    flush() {
+      let applied = [];
+      for (const id of pendingDrops) applied = mergeNodeUpdates(applied, controller.endReorderDrag(id));
+      pendingDrops.clear();
+      for (const id of dragStarts.keys()) controller.dragReorder(id);
+      if (!enabled()) {
+        pendingIds.clear();
+        pendingResizes.clear();
+        pendingAll = false;
+        return applied;
+      }
+      let nodes = options.getNodes();
+      let updates = [];
+      for (const [id, previous] of pendingResizes) {
+        if (!nodes.some((n) => n.id === id)) continue;
+        const constrained = applyConstraints(nodes, id, previous, layoutOptions());
+        nodes = applyNodeUpdates(nodes, constrained);
+        updates = mergeNodeUpdates(updates, constrained);
+      }
+      const layout2 = pendingAll ? layoutAll(nodes, layoutOptions()) : relayoutUpdates(nodes, [...pendingIds].filter((id) => nodes.some((n) => n.id === id)), layoutOptions());
+      updates = mergeNodeUpdates(updates, layout2);
+      pendingIds.clear();
+      pendingResizes.clear();
+      pendingAll = false;
+      if (updates.length > 0) options.setNodes(applyNodeUpdates(options.getNodes(), updates));
+      return mergeNodeUpdates(applied, updates);
+    },
+    /** Whether `id` is an auto layout frame. */
+    isFrame: (id) => isAutoLayoutFrame(options.getNodes().find((n) => n.id === id))
+  };
+  return controller;
+}
+function restoreOrder(nodes, order) {
+  const rank = new Map(order.map((id, i) => [id, i]));
+  const indexed = nodes.map((n, i) => ({ n, r: rank.get(n.id) ?? order.length + i }));
+  indexed.sort((a, b) => a.r - b.r);
+  return indexed.every((e, i) => e.n === nodes[i]) ? nodes : indexed.map((e) => e.n);
+}
 export {
+  AUTO_LAYOUT_DATA_KEY,
+  CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
@@ -3132,12 +5082,14 @@ export {
   LOCKED_DATA_KEY,
   LOCKED_PREVIOUS_FLAGS_KEY,
   ManualClock,
+  RESIZE_HANDLES,
   SHAPE_DATA_KEY,
   SHAPE_KINDS,
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   StreamingLayoutManager,
   alignNodes,
+  applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
   blendLayout,
@@ -3148,6 +5100,7 @@ export {
   canvasHeight,
   centerNodes,
   centre,
+  clampLayoutSize,
   collectDescendantIds,
   combineShapeNodes,
   computeNodesBoundingBox,
@@ -3155,11 +5108,14 @@ export {
   connectedOnly,
   createBezierTrajectory,
   createCanvasArrangeController,
+  createCanvasAutoLayoutController,
   createCanvasScenesStore,
   createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
   createNodeLookup,
+  cubicPointAt,
+  cubicsToPathData,
   defaultEasing,
   distributeNodes,
   dividePolygons,
@@ -3167,36 +5123,63 @@ export {
   estimateCanvasHeight,
   estimateNodeSize,
   findConnectorSnap,
+  fitCubicRun,
+  fitCubics,
+  fitFreehandPath,
+  fitPathData,
   fitViewportToNodes,
   fitViewportToRect,
   flattenSvgPath,
   flowSide,
-  formatNumber,
+  formatNumber2 as formatNumber,
   getAbsolutePosition,
+  getAutoLayout,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
   getCenteredNodePosition,
+  getChildLayout,
+  getFlowChildren,
+  getLayoutParent,
+  getLayoutSizing,
   getLayoutedNodes,
   getNodeRect,
   getNodeShape,
   getNodeSize,
+  getResizingNodeRect,
   getShapeRenderData,
   getShapeSvg,
   handlePoint,
+  inferResizeHandle,
   intersectPolygons,
   invertNodeUpdates,
+  isAutoLayoutFrame,
   isEventFromTextInput,
   isLocked,
+  isMeasureModifierHeld,
   isShapeDescription,
   isShapeNode,
+  isStraightCubic,
   isValidCanvasEdge,
   isValidCanvasNode,
   isValidCanvasScene,
   isValidUrl,
+  layoutAll,
   layoutBounds,
+  layoutFrame,
+  layoutUp,
+  layoutUpMany,
   linearPositionTrajectory,
   linearTrajectory,
   lockNodes,
+  makeSizingCoherent,
   matchArrangeShortcut,
   matchSize,
+  measureBetween,
+  measureLabel,
+  measureSelection,
+  measureToLine,
+  mergeNodeUpdates,
+  moveLayoutChild,
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
@@ -3215,9 +5198,12 @@ export {
   positionToSide,
   readStyleSize,
   realClock,
+  relayoutUpdates,
   remapPastedNodes,
   reorderNodes,
   repositionNodesTo,
+  resizeHandleAxes,
+  resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition,
@@ -3227,6 +5213,9 @@ export {
   sideToPosition,
   simplifyRing,
   snapNodeDrag,
+  snapNodeResize,
+  snapResize,
+  snapToGrid,
   subtractPolygons,
   toggleLockNodes,
   unionPolygons,