@pixerate/editor 0.23.0 → 0.24.0

package/dist/canvas/index.js

@@ -1577,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);
@@ -3388,6 +3388,888 @@ function getResizingNodeRect(node, lookup, 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 = [];
@@ -3406,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) {
@@ -3784,7 +4676,7 @@ function createCanvasArrangeController(options) {
 }
 
 // src/canvas/measure.ts
-var EPS = 1e-6;
+var EPS2 = 1e-6;
 function measureLabel(distance) {
   const v = Math.round(Math.abs(distance) * 100) / 100;
   return Object.is(v, -0) ? "0" : String(v);
@@ -3796,13 +4688,13 @@ function line(kind, x1, y1, x2, y2) {
 }
 function measured(out, x1, y1, x2, y2) {
   const d = Math.hypot(x2 - x1, y2 - y1);
-  if (d > EPS && Number.isFinite(d)) out.push({ ...line("measure", x1, y1, x2, y2), label: measureLabel(d) });
+  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) > EPS) out.push(line("extension", 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 + EPS && outer.y0 <= inner.y0 + EPS && outer.x1 >= inner.x1 - EPS && outer.y1 >= inner.y1 - EPS;
+  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);
@@ -3899,7 +4791,288 @@ function isMeasureModifierHeld(event) {
   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,
@@ -3916,6 +5089,7 @@ export {
   SHAPE_OPERATIONS,
   StreamingLayoutManager,
   alignNodes,
+  applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
   blendLayout,
@@ -3926,6 +5100,7 @@ export {
   canvasHeight,
   centerNodes,
   centre,
+  clampLayoutSize,
   collectDescendantIds,
   combineShapeNodes,
   computeNodesBoundingBox,
@@ -3933,6 +5108,7 @@ export {
   connectedOnly,
   createBezierTrajectory,
   createCanvasArrangeController,
+  createCanvasAutoLayoutController,
   createCanvasScenesStore,
   createFanOutTrajectory,
   createGuideIndex,
@@ -3957,7 +5133,14 @@ export {
   flowSide,
   formatNumber2 as formatNumber,
   getAbsolutePosition,
+  getAutoLayout,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
   getCenteredNodePosition,
+  getChildLayout,
+  getFlowChildren,
+  getLayoutParent,
+  getLayoutSizing,
   getLayoutedNodes,
   getNodeRect,
   getNodeShape,
@@ -3969,6 +5152,7 @@ export {
   inferResizeHandle,
   intersectPolygons,
   invertNodeUpdates,
+  isAutoLayoutFrame,
   isEventFromTextInput,
   isLocked,
   isMeasureModifierHeld,
@@ -3979,16 +5163,23 @@ export {
   isValidCanvasNode,
   isValidCanvasScene,
   isValidUrl,
+  layoutAll,
   layoutBounds,
+  layoutFrame,
+  layoutUp,
+  layoutUpMany,
   linearPositionTrajectory,
   linearTrajectory,
   lockNodes,
+  makeSizingCoherent,
   matchArrangeShortcut,
   matchSize,
   measureBetween,
   measureLabel,
   measureSelection,
   measureToLine,
+  mergeNodeUpdates,
+  moveLayoutChild,
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
@@ -4007,10 +5198,12 @@ export {
   positionToSide,
   readStyleSize,
   realClock,
+  relayoutUpdates,
   remapPastedNodes,
   reorderNodes,
   repositionNodesTo,
   resizeHandleAxes,
+  resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition,