@pixerate/editor 0.53.0 → 0.55.0

package/dist/canvas/index.js

@@ -1,9 +1,45 @@
 import {
-  CANVAS_GRADIENT_PRESETS,
+  TokenError,
+  getTokenCollection,
+  getTokenVariable,
+  isTokenInScope,
+  resolveToken
+} from "../chunk-D6AVOTSD.js";
+import {
   PATHFINDER_OPERATIONS,
+  PlanarMap,
+  contourEnclosesArea,
+  cutOutPiece,
+  hatchPath,
+  interiorPoint,
+  pathfinder
+} from "../chunk-VWZB6BCY.js";
+import {
+  parseMermaid
+} from "../chunk-WWJNC7SX.js";
+import {
+  DEFAULT_NODE_HEIGHT,
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_PLACEMENT_GAP,
+  boundsOf,
+  centerNodes,
+  centre,
+  ensureLayout,
+  estimateNodeSize,
+  flowSide,
+  getCenteredNodePosition,
+  getLayoutedNodes,
+  overlaps,
+  placeBeside
+} from "../chunk-VHZCXHS4.js";
+import {
+  DEFAULT_ARRANGE_SHORTCUTS,
+  matchArrangeShortcut
+} from "../chunk-7DWMJCAT.js";
+import {
+  CANVAS_GRADIENT_PRESETS,
   PIXERATE_BRAND_GRADIENT,
   PathOpsError,
-  PlanarMap,
   SHAPE_KINDS,
   angleToSvgLinearCoords,
   arcToCubics,
@@ -14,13 +50,11 @@ import {
   bezierPathSignedArea,
   bezierPathToSvg,
   closeContour,
-  contourEnclosesArea,
   contourSignedArea,
   contoursToPath,
   countPathSegments,
   cubicPointAt,
   cubicsToPathData,
-  cutOutPiece,
   dashContours,
   distanceToBezierPath,
   dividePaths,
@@ -36,8 +70,6 @@ import {
   getShapeRenderData,
   getShapeSvg,
   gradientToSvgDef,
-  hatchPath,
-  interiorPoint,
   intersectPaths,
   intersectPolygons,
   isCanvasGradient,
@@ -53,7 +85,6 @@ import {
   pathBoolean,
   pathBooleanSelect,
   pathToContours,
-  pathfinder,
   planarSplit,
   pointInBezierPath,
   pointInMultiPolygon,
@@ -87,33 +118,7 @@ import {
   unitePaths,
   windingNumber,
   xorPolygons
-} from "../chunk-TO22LX34.js";
-import {
-  DEFAULT_NODE_HEIGHT,
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_PLACEMENT_GAP,
-  boundsOf,
-  centerNodes,
-  centre,
-  ensureLayout,
-  estimateNodeSize,
-  flowSide,
-  getCenteredNodePosition,
-  getLayoutedNodes,
-  overlaps,
-  placeBeside
-} from "../chunk-VHZCXHS4.js";
-import {
-  DEFAULT_ARRANGE_SHORTCUTS,
-  matchArrangeShortcut
-} from "../chunk-7DWMJCAT.js";
-import {
-  TokenError,
-  getTokenCollection,
-  getTokenVariable,
-  isTokenInScope,
-  resolveToken
-} from "../chunk-D6AVOTSD.js";
+} from "../chunk-GTMJ4Y3S.js";
 import {
   ANIMATION_TIME_EPSILON,
   AnimationPlayer,
@@ -134,6 +139,9 @@ import {
   parseOklab,
   rgbToOklab
 } from "../chunk-ZRJMJIQU.js";
+import {
+  normalizeTokenColor
+} from "../chunk-TGD52FEZ.js";
 import {
   ANIMATION_EASING_LABELS,
   ANIMATION_EASING_PRESETS,
@@ -149,9 +157,6 @@ import {
   resolveEasing,
   springAt
 } from "../chunk-UB2OY7FD.js";
-import {
-  normalizeTokenColor
-} from "../chunk-TGD52FEZ.js";
 
 // src/canvas/trajectory.ts
 var defaultEasing = (t) => --t * t * t + 1;
@@ -407,7 +412,7 @@ function calculateDirectionalDisplacement(params) {
   }
   if (spreadSiblingLanes && (direction === "right" || direction === "left")) {
     for (const [nodeId, pos] of displacedMap.entries()) {
-      const node = existingNodes.find((n) => n.id === nodeId);
+      const node = existingNodes.find((n3) => n3.id === nodeId);
       if (node && Math.abs(node.position.y - originNode.position.y) < siblingTolerance) {
         const isAbove = node.position.y < originNode.position.y;
         displacedMap.set(nodeId, {
@@ -441,12 +446,12 @@ function calculateDagreReflowDisplacement(params) {
     defaultNodeWidth = 200,
     defaultNodeHeight = 60
   } = options;
-  const anchorNode = currentNodes.find((n) => n.id === anchorNodeId);
+  const anchorNode = currentNodes.find((n3) => n3.id === anchorNodeId);
   if (!anchorNode) return /* @__PURE__ */ new Map();
   const g = new dagre.graphlib.Graph();
   g.setDefaultEdgeLabel(() => ({}));
   g.setGraph({ rankdir: direction, ranksep, nodesep });
-  const nodeIds = new Set(futureNodes.map((n) => n.id));
+  const nodeIds = new Set(futureNodes.map((n3) => n3.id));
   futureNodes.forEach((node) => {
     const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
     const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
@@ -575,15 +580,15 @@ function remapPastedNodes(nodes, edges = [], offset = { x: 30, y: 30 }, idGenera
 }
 function repositionNodesTo(nodes, targetOrigin) {
   if (nodes.length === 0) return [];
-  const minX = Math.min(...nodes.map((n) => n.position.x));
-  const minY = Math.min(...nodes.map((n) => n.position.y));
+  const minX = Math.min(...nodes.map((n3) => n3.position.x));
+  const minY = Math.min(...nodes.map((n3) => n3.position.y));
   const deltaX = targetOrigin.x - minX;
   const deltaY = targetOrigin.y - minY;
-  return nodes.map((n) => ({
-    ...n,
+  return nodes.map((n3) => ({
+    ...n3,
     position: {
-      x: n.position.x + deltaX,
-      y: n.position.y + deltaY
+      x: n3.position.x + deltaX,
+      y: n3.position.y + deltaY
     }
   }));
 }
@@ -626,7 +631,7 @@ function mix(a, b, t) {
 }
 function blendLayout(from, to, t) {
   if (t >= 1) return to;
-  const fromMap = new Map(from.map((n) => [n.id, n]));
+  const fromMap = new Map(from.map((n3) => [n3.id, n3]));
   return to.map((target) => {
     const origin = fromMap.get(target.id);
     if (!origin) return target;
@@ -854,7 +859,7 @@ function getAbsolutePosition(node, lookup) {
   return { x, y };
 }
 function createNodeLookup(nodes) {
-  return new Map(nodes.map((n) => [n.id, n]));
+  return new Map(nodes.map((n3) => [n3.id, n3]));
 }
 function getNodeRect(node, lookup, options) {
   const { x, y } = node.parentId && lookup ? getAbsolutePosition(node, lookup) : node.position;
@@ -897,7 +902,7 @@ function unlockNodes(nodes, ids) {
 }
 function toggleLockNodes(nodes, ids) {
   const idSet = new Set(ids);
-  const anyUnlocked = nodes.some((n) => idSet.has(n.id) && !isLocked(n));
+  const anyUnlocked = nodes.some((n3) => idSet.has(n3.id) && !isLocked(n3));
   return anyUnlocked ? lockNodes(nodes, idSet) : unlockNodes(nodes, idSet);
 }
 function collect(nodes, ids, options) {
@@ -934,27 +939,27 @@ function alignNodes(nodes, ids, edge, options = {}) {
   if (items.length === 0 || !fixed && items.length < 2) return [];
   const bounds = fixed ?? boundsOf(items.map((i) => i.rect));
   const targets = /* @__PURE__ */ new Map();
-  for (const { node, rect, locked } of items) {
+  for (const { node, rect: rect2, locked } of items) {
     if (locked) continue;
-    let { x, y } = rect;
+    let { x, y } = rect2;
     switch (edge) {
       case "left":
         x = bounds.x;
         break;
       case "center":
-        x = bounds.x + bounds.width / 2 - rect.width / 2;
+        x = bounds.x + bounds.width / 2 - rect2.width / 2;
         break;
       case "right":
-        x = bounds.x + bounds.width - rect.width;
+        x = bounds.x + bounds.width - rect2.width;
         break;
       case "top":
         y = bounds.y;
         break;
       case "middle":
-        y = bounds.y + bounds.height / 2 - rect.height / 2;
+        y = bounds.y + bounds.height / 2 - rect2.height / 2;
         break;
       case "bottom":
-        y = bounds.y + bounds.height - rect.height;
+        y = bounds.y + bounds.height - rect2.height;
         break;
     }
     targets.set(node.id, { x, y });
@@ -969,7 +974,7 @@ function distributeAxis(items, horizontal, mode, gapOverride, targets) {
   );
   const first = sorted[0].rect;
   const last = sorted[sorted.length - 1].rect;
-  const n = sorted.length;
+  const n3 = sorted.length;
   const set = (item, value) => {
     if (item.locked) return;
     const current = targets.get(item.node.id) ?? { x: item.rect.x, y: item.rect.y };
@@ -978,13 +983,13 @@ function distributeAxis(items, horizontal, mode, gapOverride, targets) {
   if (mode === "centres") {
     const c0 = start(first) + size(first) / 2;
     const c1 = start(last) + size(last) / 2;
-    const step = (c1 - c0) / (n - 1);
+    const step = (c1 - c0) / (n3 - 1);
     sorted.forEach((item, i) => set(item, c0 + step * i - size(item.rect) / 2));
     return;
   }
   const span = start(last) + size(last) - start(first);
   const total = sorted.reduce((sum, item) => sum + size(item.rect), 0);
-  const gap = gapOverride ?? (span - total) / (n - 1);
+  const gap = gapOverride ?? (span - total) / (n3 - 1);
   let cursor = start(first);
   for (const item of sorted) {
     set(item, cursor);
@@ -1016,16 +1021,16 @@ function matchSize(nodes, ids, dimension, options = {}) {
   const width = dimension !== "height" ? pick("width") : void 0;
   const height = dimension !== "width" ? pick("height") : void 0;
   const updates = [];
-  for (const { node, rect, locked } of items) {
+  for (const { node, rect: rect2, locked } of items) {
     if (locked) continue;
     const update = { id: node.id };
-    if (width !== void 0 && width !== rect.width) update.width = width;
-    if (height !== void 0 && height !== rect.height) update.height = height;
+    if (width !== void 0 && width !== rect2.width) update.width = width;
+    if (height !== void 0 && height !== rect2.height) update.height = height;
     if (update.width === void 0 && update.height === void 0) continue;
     if (options.keepCentre) {
       update.position = {
-        x: node.position.x - ((update.width ?? rect.width) - rect.width) / 2,
-        y: node.position.y - ((update.height ?? rect.height) - rect.height) / 2
+        x: node.position.x - ((update.width ?? rect2.width) - rect2.width) / 2,
+        y: node.position.y - ((update.height ?? rect2.height) - rect2.height) / 2
       };
     }
     updates.push(update);
@@ -1046,18 +1051,18 @@ function reorderNodes(nodes, ids, operation, options = {}) {
   }
   const updates = [];
   for (const siblings of groups.values()) {
-    if (!siblings.some((n) => targetIds.has(n.id))) continue;
+    if (!siblings.some((n3) => targetIds.has(n3.id))) continue;
     const order = siblings.map((node, index) => ({ node, index, z: typeof node.zIndex === "number" ? node.zIndex : 0 })).sort((a, b) => a.z - b.z || a.index - b.index).map((entry) => entry.node);
-    const isTarget = (n) => targetIds.has(n.id);
+    const isTarget = (n3) => targetIds.has(n3.id);
     let next;
     if (operation === "bringToFront") {
-      next = [...order.filter((n) => !isTarget(n)), ...order.filter(isTarget)];
+      next = [...order.filter((n3) => !isTarget(n3)), ...order.filter(isTarget)];
     } else if (operation === "sendToBack") {
-      next = [...order.filter(isTarget), ...order.filter((n) => !isTarget(n))];
+      next = [...order.filter(isTarget), ...order.filter((n3) => !isTarget(n3))];
     } else {
       next = [...order];
       const forward = operation === "bringForward";
-      const rects = new Map(next.map((n) => [n.id, getNodeRect(n, lookup, options)]));
+      const rects = new Map(next.map((n3) => [n3.id, getNodeRect(n3, lookup, options)]));
       const intersects = (a, b) => a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
       const indices = next.map((_, i) => i);
       if (forward) indices.reverse();
@@ -1165,11 +1170,11 @@ function createGuideIndex(rects) {
   const centreX = [];
   const edgeY = [];
   const centreY = [];
-  for (const rect of rects) {
-    edgeX.push({ value: rect.x, rect }, { value: rect.x + rect.width, rect });
-    centreX.push({ value: rect.x + rect.width / 2, rect });
-    edgeY.push({ value: rect.y, rect }, { value: rect.y + rect.height, rect });
-    centreY.push({ value: rect.y + rect.height / 2, rect });
+  for (const rect2 of rects) {
+    edgeX.push({ value: rect2.x, rect: rect2 }, { value: rect2.x + rect2.width, rect: rect2 });
+    centreX.push({ value: rect2.x + rect2.width / 2, rect: rect2 });
+    edgeY.push({ value: rect2.y, rect: rect2 }, { value: rect2.y + rect2.height, rect: rect2 });
+    centreY.push({ value: rect2.y + rect2.height / 2, rect: rect2 });
   }
   return {
     rects,
@@ -1316,12 +1321,12 @@ function computeSnapGuides(moving, targets, options = {}) {
     if (useCentres) {
       lines.push({ value: start + size / 2, kind: "centre", axis: horizontal ? index.centreX : index.centreY });
     }
-    for (const line2 of lines) {
-      const aligned = matches(line2.axis, line2.value, eps);
+    for (const line3 of lines) {
+      const aligned = matches(line3.axis, line3.value, eps);
       if (aligned.length === 0) continue;
       const span = boundsOf([snapped, ...aligned]);
       guides.push(
-        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 }
+        horizontal ? { orientation: "vertical", kind: line3.kind, x1: line3.value, y1: span.y, x2: line3.value, y2: span.y + span.height } : { orientation: "horizontal", kind: line3.kind, x1: span.x, y1: line3.value, x2: span.x + span.width, y2: line3.value }
       );
     }
   };
@@ -1374,7 +1379,7 @@ function createNodeGuideIndex(nodes, draggingIds, options = {}) {
 function snapNodeDrag(nodes, draggingIds, options = {}) {
   const ids = new Set(draggingIds);
   const lookup = createNodeLookup(nodes);
-  const dragged = [...ids].map((id) => lookup.get(id)).filter((n) => !!n);
+  const dragged = [...ids].map((id) => lookup.get(id)).filter((n3) => !!n3);
   const empty = {
     position: { x: 0, y: 0 },
     offset: { x: 0, y: 0 },
@@ -1384,7 +1389,7 @@ function snapNodeDrag(nodes, draggingIds, options = {}) {
     updates: []
   };
   if (dragged.length === 0) return empty;
-  const bounds = boundsOf(dragged.map((n) => getNodeRect(n, lookup, options)));
+  const bounds = boundsOf(dragged.map((n3) => getNodeRect(n3, lookup, options)));
   const index = options.index ?? createNodeGuideIndex(nodes, ids, options);
   const result = computeSnapGuides(bounds, index, options);
   const { x: dx, y: dy } = result.offset;
@@ -1438,16 +1443,16 @@ function oppositePosition(position) {
       return "left";
   }
 }
-function handlePoint(rect, position) {
+function handlePoint(rect2, position) {
   switch (position) {
     case "top":
-      return { x: rect.x + rect.width / 2, y: rect.y };
+      return { x: rect2.x + rect2.width / 2, y: rect2.y };
     case "bottom":
-      return { x: rect.x + rect.width / 2, y: rect.y + rect.height };
+      return { x: rect2.x + rect2.width / 2, y: rect2.y + rect2.height };
     case "left":
-      return { x: rect.x, y: rect.y + rect.height / 2 };
+      return { x: rect2.x, y: rect2.y + rect2.height / 2 };
     default:
-      return { x: rect.x + rect.width, y: rect.y + rect.height / 2 };
+      return { x: rect2.x + rect2.width, y: rect2.y + rect2.height / 2 };
   }
 }
 function findConnectorSnap(pointer, targets, options = {}) {
@@ -1458,14 +1463,14 @@ function findConnectorSnap(pointer, targets, options = {}) {
   let best = null;
   for (const target of targets) {
     if (exclude.has(target.id)) continue;
-    const { rect } = target;
-    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) {
+    const { rect: rect2 } = target;
+    if (pointer.x < rect2.x - radius || pointer.x > rect2.x + rect2.width + radius || pointer.y < rect2.y - radius || pointer.y > rect2.y + rect2.height + radius) {
       continue;
     }
-    const inside2 = pointer.x >= rect.x && pointer.x <= rect.x + rect.width && pointer.y >= rect.y && pointer.y <= rect.y + rect.height;
+    const inside2 = pointer.x >= rect2.x && pointer.x <= rect2.x + rect2.width && pointer.y >= rect2.y && pointer.y <= rect2.y + rect2.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 point = options.mode === "edge" ? closestPointOnSide(rect2, position, pointer) : handlePoint(rect2, position);
+      const sidePoint = closestPointOnSide(rect2, 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 (!inside2 && rank > radius) continue;
@@ -1479,18 +1484,18 @@ function findConnectorSnap(pointer, targets, options = {}) {
   const { inside: _inside, rank: _rank, ...snap } = best;
   return snap;
 }
-function closestPointOnSide(rect, position, p) {
-  const clampX = Math.min(rect.x + rect.width, Math.max(rect.x, p.x));
-  const clampY = Math.min(rect.y + rect.height, Math.max(rect.y, p.y));
+function closestPointOnSide(rect2, position, p) {
+  const clampX = Math.min(rect2.x + rect2.width, Math.max(rect2.x, p.x));
+  const clampY = Math.min(rect2.y + rect2.height, Math.max(rect2.y, p.y));
   switch (position) {
     case "top":
-      return { x: clampX, y: rect.y };
+      return { x: clampX, y: rect2.y };
     case "bottom":
-      return { x: clampX, y: rect.y + rect.height };
+      return { x: clampX, y: rect2.y + rect2.height };
     case "left":
-      return { x: rect.x, y: clampY };
+      return { x: rect2.x, y: clampY };
     default:
-      return { x: rect.x + rect.width, y: clampY };
+      return { x: rect2.x + rect2.width, y: clampY };
   }
 }
 function nearestHandlePositions(source, target) {
@@ -1595,9 +1600,9 @@ var CanvasScenesStore = class {
   /** First unused "Scene N" name. */
   nextDefaultName() {
     const names = new Set(this.scenes.map((s) => s.name));
-    let n = this.scenes.length + 1;
-    while (names.has(`Scene ${n}`)) n += 1;
-    return `Scene ${n}`;
+    let n3 = this.scenes.length + 1;
+    while (names.has(`Scene ${n3}`)) n3 += 1;
+    return `Scene ${n3}`;
   }
   /**
    * Adds a scene (appended, or inserted at `index`) and makes it current.
@@ -1716,20 +1721,20 @@ var CanvasScenesStore = class {
 function createCanvasScenesStore(options) {
   return new CanvasScenesStore(options);
 }
-function fitViewportToRect(rect, size, options = {}) {
+function fitViewportToRect(rect2, size, options = {}) {
   const { padding = 0.1, minZoom = 0.1, maxZoom = 2 } = options;
-  const paddedWidth = Math.max(rect.width * (1 + padding * 2), 1);
-  const paddedHeight = Math.max(rect.height * (1 + padding * 2), 1);
+  const paddedWidth = Math.max(rect2.width * (1 + padding * 2), 1);
+  const paddedHeight = Math.max(rect2.height * (1 + padding * 2), 1);
   const raw = Math.min(size.width / paddedWidth, size.height / paddedHeight);
   const zoom = Math.min(maxZoom, Math.max(minZoom, raw));
-  const cx = rect.x + rect.width / 2;
-  const cy = rect.y + rect.height / 2;
+  const cx = rect2.x + rect2.width / 2;
+  const cy = rect2.y + rect2.height / 2;
   return { x: size.width / 2 - cx * zoom, y: size.height / 2 - cy * zoom, zoom };
 }
 function fitViewportToNodes(nodes, size, ids, options = {}) {
   const lookup = createNodeLookup(nodes);
   const wanted = ids ? new Set(ids) : null;
-  const rects = nodes.filter((n) => wanted ? wanted.has(n.id) : true).map((n) => getNodeRect(n, lookup, options));
+  const rects = nodes.filter((n3) => wanted ? wanted.has(n3.id) : true).map((n3) => getNodeRect(n3, lookup, options));
   const bounds = boundsOf(rects);
   return bounds ? fitViewportToRect(bounds, size, options) : null;
 }
@@ -1806,10 +1811,10 @@ function stackOrder(nodes, ids) {
 }
 function canCombineShapeNodes(nodes, ids) {
   const idSet = new Set(ids);
-  const shapes = nodes.filter((n) => idSet.has(n.id) && isShapeNode(n));
-  if (shapes.some((n) => isLocked(n))) return { ok: false, reason: "locked" };
+  const shapes = nodes.filter((n3) => idSet.has(n3.id) && isShapeNode(n3));
+  if (shapes.some((n3) => isLocked(n3))) return { ok: false, reason: "locked" };
   if (shapes.length < 2) return { ok: false, reason: "too-few" };
-  return { ok: true, shapeIds: shapes.map((n) => n.id) };
+  return { ok: true, shapeIds: shapes.map((n3) => n3.id) };
 }
 function combineShapeNodes(nodes, ids, operation, options = {}) {
   const idList = [...ids];
@@ -1818,7 +1823,7 @@ function combineShapeNodes(nodes, ids, operation, options = {}) {
   const lookup = createNodeLookup(nodes);
   const shapeIds = new Set(check.shapeIds);
   const ordered = stackOrder(nodes, shapeIds);
-  const parentIds = new Set(ordered.map((n) => n.parentId ?? ""));
+  const parentIds = new Set(ordered.map((n3) => n3.parentId ?? ""));
   const sharedParent = parentIds.size === 1 ? ordered[0].parentId : void 0;
   const parentOrigin = sharedParent && lookup.get(sharedParent) ? getAbsolutePosition(lookup.get(sharedParent), lookup) : { x: 0, y: 0 };
   const pickSource = () => {
@@ -1887,7 +1892,7 @@ function combineShapeNodes(nodes, ids, operation, options = {}) {
   const done2 = {
     ok: true,
     operation,
-    removeIds: ordered.map((n) => n.id),
+    removeIds: ordered.map((n3) => n3.id),
     nodes: created,
     engine: report.engine
   };
@@ -1949,8 +1954,8 @@ function roundSize(value) {
 }
 function applyShapeCombination(nodes, change, options = {}) {
   const remove = new Set(change.removeIds);
-  const insertAt = nodes.findIndex((n) => remove.has(n.id));
-  const deselect = options.deselect !== false && change.nodes.some((n) => n.selected);
+  const insertAt = nodes.findIndex((n3) => remove.has(n3.id));
+  const deselect = options.deselect !== false && change.nodes.some((n3) => n3.selected);
   const out = [];
   nodes.forEach((node, index) => {
     if (index === insertAt) out.push(...change.nodes);
@@ -1961,11 +1966,11 @@ function applyShapeCombination(nodes, change, options = {}) {
   return out;
 }
 function revertShapeCombination(nodes, change, previous) {
-  const created = new Set(change.nodes.map((n) => n.id));
+  const created = new Set(change.nodes.map((n3) => n3.id));
   const removed = new Set(change.removeIds);
-  const out = nodes.filter((n) => !created.has(n.id));
+  const out = nodes.filter((n3) => !created.has(n3.id));
   previous.forEach((node, index) => {
-    if (!removed.has(node.id) || out.some((n) => n.id === node.id)) return;
+    if (!removed.has(node.id) || out.some((n3) => n3.id === node.id)) return;
     out.splice(Math.min(index, out.length), 0, node);
   });
   return out;
@@ -1987,21 +1992,21 @@ function hasVisibleFill(shape) {
 }
 function shapeTargets(nodes, ids) {
   const idSet = new Set(ids);
-  return nodes.filter((n) => idSet.has(n.id) && isShapeNode(n));
+  return nodes.filter((n3) => idSet.has(n3.id) && isShapeNode(n3));
 }
 function canOffsetShapeNodes(nodes, ids) {
   const shapes = shapeTargets(nodes, ids);
-  if (shapes.some((n) => isLocked(n))) return { ok: false, reason: "locked" };
+  if (shapes.some((n3) => isLocked(n3))) return { ok: false, reason: "locked" };
   if (shapes.length === 0) return { ok: false, reason: "no-shapes" };
-  return { ok: true, shapeIds: shapes.map((n) => n.id) };
+  return { ok: true, shapeIds: shapes.map((n3) => n3.id) };
 }
 function canOutlineShapeNodeStrokes(nodes, ids) {
   const shapes = shapeTargets(nodes, ids);
-  if (shapes.some((n) => isLocked(n))) return { ok: false, reason: "locked" };
+  if (shapes.some((n3) => isLocked(n3))) return { ok: false, reason: "locked" };
   if (shapes.length === 0) return { ok: false, reason: "no-shapes" };
-  const stroked = shapes.filter((n) => hasVisibleStroke(getNodeShape(n)));
+  const stroked = shapes.filter((n3) => hasVisibleStroke(getNodeShape(n3)));
   if (stroked.length === 0) return { ok: false, reason: "no-stroke" };
-  return { ok: true, shapeIds: stroked.map((n) => n.id) };
+  return { ok: true, shapeIds: stroked.map((n3) => n3.id) };
 }
 function editPlacement(node, lookup) {
   const parent = node.parentId ? lookup.get(node.parentId) : void 0;
@@ -2104,8 +2109,8 @@ function outlineShapeNodeStrokes(nodes, ids, options = {}) {
 }
 function applyShapeReplacement(nodes, change, options = {}) {
   const byId = new Map(change.replacements.map((r) => [r.id, r.nodes]));
-  const created = new Set(change.replacements.flatMap((r) => r.nodes.map((n) => n.id)));
-  const deselect = options.deselect !== false && change.replacements.some((r) => r.nodes.some((n) => n.selected));
+  const created = new Set(change.replacements.flatMap((r) => r.nodes.map((n3) => n3.id)));
+  const deselect = options.deselect !== false && change.replacements.some((r) => r.nodes.some((n3) => n3.selected));
   const out = [];
   for (const node of nodes) {
     const replacement = byId.get(node.id);
@@ -2165,7 +2170,7 @@ function matching(axis, v, eps) {
   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 = {}) {
+function snapResize(rect2, 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;
@@ -2174,12 +2179,12 @@ function snapResize(rect, handle, targets, options = {}) {
   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 unchanged = { rect: { ...rect2 }, guides: [], snappedX: false, snappedY: false, changed: false };
+  if (![rect2.x, rect2.y, rect2.width, rect2.height].every(Number.isFinite)) return unchanged;
+  const x0 = rect2.x;
+  const x1 = rect2.x + rect2.width;
+  const y0 = rect2.y;
+  const y1 = rect2.y + rect2.height;
   const bestHit = (horizontal) => {
     const dir = horizontal ? axes.x : axes.y;
     if (dir === 0) return null;
@@ -2219,7 +2224,7 @@ function snapResize(rect, handle, targets, options = {}) {
   };
   let hitX = bestHit(true);
   let hitY = bestHit(false);
-  const ratio = rect.height > 0 ? rect.width / rect.height : 0;
+  const ratio = rect2.height > 0 ? rect2.width / rect2.height : 0;
   if (options.keepAspectRatio && ratio > 0 && (hitX || hitY)) {
     if (axes.x !== 0 && axes.y !== 0) {
       const dist = (h, horizontal) => h ? Math.abs(h.value - (horizontal ? axes.x < 0 ? x0 : x1 : axes.y < 0 ? y0 : y1)) : Infinity;
@@ -2271,7 +2276,7 @@ function snapResize(rect, handle, targets, options = {}) {
   };
   guideFor(true, hitX);
   guideFor(false, hitY);
-  const changed = out.x !== rect.x || out.y !== rect.y || out.width !== rect.width || out.height !== rect.height;
+  const changed = out.x !== rect2.x || out.y !== rect2.y || out.width !== rect2.width || out.height !== rect2.height;
   return {
     rect: out,
     guides,
@@ -2280,14 +2285,14 @@ function snapResize(rect, handle, targets, options = {}) {
     changed
   };
 }
-function snapNodeResize(nodes, id, rect, handle, options = {}) {
+function snapNodeResize(nodes, id, rect2, 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: [] };
+    return { rect: { ...rect2 }, guides: [], snappedX: false, snappedY: false, changed: false, updates: [] };
   }
   const index = options.index ?? createNodeGuideIndex(nodes, [id], options);
-  const result = snapResize(rect, handle, index, options);
+  const result = snapResize(rect2, 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 };
@@ -2431,8 +2436,8 @@ 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;
+    const n3 = s.boxes.get(k).node;
+    return n3.hidden !== true && !getChildLayout(n3).absolute;
   });
 }
 function fitHugText(s, id) {
@@ -2460,7 +2465,7 @@ function enforceLimits(s, id) {
   if (isText(s, b)) setSize(s, id, nw, nh);
   else resizeChild(s, id, nw, nh);
 }
-function itemBaseline(s, id, depth) {
+function itemBaseline(s, id, depth2) {
   const b = s.boxes.get(id);
   if (!b) return void 0;
   if (isText(s, b)) {
@@ -2468,9 +2473,9 @@ function itemBaseline(s, id, depth) {
     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;
+  if (!layout2 || layout2.mode === "grid" || depth2 >= 32) return void 0;
   for (const k of flowChildren(s, id)) {
-    const base = itemBaseline(s, k, depth + 1);
+    const base = itemBaseline(s, k, depth2 + 1);
     if (base !== void 0) return s.boxes.get(k).y + base;
   }
   return void 0;
@@ -2488,17 +2493,17 @@ function resizeChild(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);
+function mainOffsets(align, inner, total, n3, gap) {
+  const gaps = gap * Math.max(n3 - 1, 0);
   const free = inner - total;
-  const k = Math.max(n, 1);
+  const k = Math.max(n3, 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];
+      return [0, n3 > 1 ? Math.max(free / (n3 - 1), 0) : 0];
     case "space-around": {
       const g = Math.max(free / k, 0);
       return [g / 2, g];
@@ -2616,10 +2621,10 @@ function layoutFrameInner(s, frame) {
   } 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);
+  for (const line3 of lines) {
+    const fixed = line3.filter((i) => !items[i].fillMain).reduce((sum, i) => sum + items[i].main, 0);
+    const gaps = gap * Math.max(line3.length - 1, 0);
+    const fills = line3.filter((i) => items[i].fillMain);
     if (fills.length > 0) distribute(items, fills, innerMainFixed - fixed - (autoGap ? 0 : gaps));
   }
   for (const it of items) {
@@ -2632,11 +2637,11 @@ function layoutFrameInner(s, frame) {
     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]);
+  for (const line3 of lines) {
+    const gaps = gap * Math.max(line3.length - 1, 0);
+    const lineBase = line3.reduce((m, i) => Math.max(m, items[i].baseline ?? 0), 0);
+    for (const i of line3) items[i].baseOff = items[i].baseline !== void 0 ? lineBase - items[i].baseline : 0;
+    const inLine = line3.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);
@@ -2683,13 +2688,13 @@ function layoutFrameInner(s, frame) {
       }
     }
   }
-  lines.forEach((line2, li) => {
+  lines.forEach((line3, 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);
+    const total = used - gap * Math.max(line3.length - 1, 0);
+    let [pos, step] = mainOffsets(alignMain, innerMain, total, line3.length, gap);
     pos += horizontal ? pl : pt;
-    for (const i of line2) {
+    for (const i of line3) {
       const it = items[i];
       const crossSize = it.fillCross ? clampLayoutSize(lineCross, it.minCross, it.maxCross) : it.cross;
       let off = 0;
@@ -2717,8 +2722,8 @@ function parseTrack(track) {
 }
 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: [] };
+  const n3 = typeof spec === "number" && Number.isFinite(spec) ? Math.floor(spec) : fallback;
+  return { count: Math.min(Math.max(n3, 1), MAX_TRACKS), tracks: [] };
 }
 function trackSpec(tracks, i) {
   const t = tracks[i] ?? { sizing: "fill", value: 1 };
@@ -2838,21 +2843,21 @@ function resolveTracks(tracks, content, avail) {
   }
   return out;
 }
-function trackContent(cells, sizes, tracks, n, gap, columns, hug) {
+function trackContent(cells, sizes, tracks, n3, gap, columns, hug) {
   const byContent = (i) => trackSpec(tracks, i).sizing !== "fixed";
-  const content = Array.from({ length: n }, (_, i) => {
+  const content = Array.from({ length: n3 }, (_, 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]);
+    if (len === 1 && byContent(start) && start < n3) 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);
+    const range = Array.from({ length: len }, (_, j) => start + j).filter((i) => i < n3);
     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);
@@ -3041,9 +3046,9 @@ function postOrder(s, nodes) {
     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));
+  const roots = nodes.filter((n3) => !n3.parentId || !s.boxes.has(n3.parentId));
   for (const r of roots) visit(r.id);
-  for (const n of nodes) visit(n.id);
+  for (const n3 of nodes) visit(n3.id);
   return out;
 }
 function layoutAll(nodes, options = {}) {
@@ -3057,9 +3062,9 @@ function layoutUp(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));
+  const depth2 = /* @__PURE__ */ new Map();
+  for (const chain of chains) chain.forEach((id, i) => depth2.set(id, Math.max(depth2.get(id) ?? 0, chain.length - 1 - i)));
+  const order = [...depth2.keys()].sort((a, b) => depth2.get(b) - depth2.get(a));
   for (const id of order) if (getAutoLayout(s.boxes.get(id).node)) layout(s, id);
   return s.updates();
 }
@@ -3072,7 +3077,7 @@ 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);
+  return nodes.filter((n3) => n3.parentId === frameId && n3.id !== frameId && n3.hidden !== true && !getChildLayout(n3).absolute).map((n3) => n3.id);
 }
 function getLayoutParent(nodes, id) {
   const lookup = createNodeLookup(nodes);
@@ -3083,7 +3088,7 @@ function getLayoutParent(nodes, id) {
 }
 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)]);
+  const targets = /* @__PURE__ */ new Set([id, ...nodes.filter((n3) => n3.parentId === id).map((n3) => n3.id)]);
   if (!lookup.has(id)) return nodes;
   let changed = false;
   const next = nodes.map((node) => {
@@ -3152,42 +3157,42 @@ function getAutoLayoutInsertTarget(nodes, frameId, point, options = {}) {
   return { frameId, index, guide };
 }
 function moveLayoutChild(nodes, childId, index) {
-  const child = nodes.find((n) => n.id === childId);
+  const child = nodes.find((n3) => n3.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 siblings = nodes.filter((n3) => n3.parentId === child.parentId && n3.id !== child.parentId);
+  const flow = siblings.filter((n3) => n3.hidden !== true && !getChildLayout(n3).absolute && n3.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 order = siblings.filter((n3) => n3.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;
+  if (order.every((n3, i) => n3 === 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);
+  const placed = nodes.map((n3) => n3.parentId === parentId && n3.id !== parentId ? order[k++] : n3);
   return parentsFirst(placed);
 }
 function parentsFirst(nodes) {
-  const ids = new Set(nodes.map((n) => n.id));
+  const ids = new Set(nodes.map((n3) => n3.id));
   const pending = /* @__PURE__ */ new Map();
   const done2 = /* @__PURE__ */ new Set();
   const out = [];
-  const emit = (n) => {
-    out.push(n);
-    done2.add(n.id);
-    const waiting = pending.get(n.id);
+  const emit = (n3) => {
+    out.push(n3);
+    done2.add(n3.id);
+    const waiting = pending.get(n3.id);
     if (waiting) {
-      pending.delete(n.id);
+      pending.delete(n3.id);
       for (const w of waiting) emit(w);
     }
   };
-  for (const n of nodes) {
-    if (n.parentId && ids.has(n.parentId) && !done2.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 n3 of nodes) {
+    if (n3.parentId && ids.has(n3.parentId) && !done2.has(n3.parentId) && n3.parentId !== n3.id) {
+      if (!pending.has(n3.parentId)) pending.set(n3.parentId, []);
+      pending.get(n3.parentId).push(n3);
+    } else emit(n3);
   }
-  for (const waiting of pending.values()) for (const n of waiting) if (!done2.has(n.id)) emit(n);
+  for (const waiting of pending.values()) for (const n3 of waiting) if (!done2.has(n3.id)) emit(n3);
   return out;
 }
 
@@ -3201,7 +3206,7 @@ function createCanvasArrangeController(options) {
   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 selectedIds = (ids) => ids ? [...ids] : options.getSelectedIds?.() ?? options.getNodes().filter((n3) => n3.selected).map((n3) => n3.id);
   const setGuides = (next) => {
     if (next.length === 0 && guides.length === 0) return;
     guides = next;
@@ -3231,7 +3236,7 @@ function createCanvasArrangeController(options) {
   function setLocked(name, ids, locked) {
     const nodes = options.getNodes();
     const set = new Set(ids);
-    const changed = nodes.filter((n) => set.has(n.id) && isLocked(n) !== locked).map((n) => n.id);
+    const changed = nodes.filter((n3) => set.has(n3.id) && isLocked(n3) !== locked).map((n3) => n3.id);
     if (changed.length === 0) return changed;
     const lock = () => options.setNodes(lockNodes(options.getNodes(), changed));
     const unlock = () => options.setNodes(unlockNodes(options.getNodes(), changed));
@@ -3241,29 +3246,29 @@ function createCanvasArrangeController(options) {
     else unlock();
     return changed;
   }
-  const rect = () => options.rectOptions ?? {};
+  const rect2 = () => options.rectOptions ?? {};
   const controller = {
     get guides() {
       return guides;
     },
     apply,
     align(edge, ids, alignOptions = {}) {
-      return apply(`Align ${edge}`, alignNodes(options.getNodes(), selectedIds(ids), edge, { ...rect(), ...alignOptions }));
+      return apply(`Align ${edge}`, alignNodes(options.getNodes(), selectedIds(ids), edge, { ...rect2(), ...alignOptions }));
     },
     distribute(axis, mode = "gaps", ids, distributeOptions = {}) {
       return apply(
         `Distribute ${axis}`,
-        distributeNodes(options.getNodes(), selectedIds(ids), axis, mode, { ...rect(), ...distributeOptions })
+        distributeNodes(options.getNodes(), selectedIds(ids), axis, mode, { ...rect2(), ...distributeOptions })
       );
     },
     matchSize(dimension, ids, sizeOptions = {}) {
       return apply(
         "Make Same Size",
-        matchSize(options.getNodes(), selectedIds(ids), dimension, { ...rect(), ...sizeOptions })
+        matchSize(options.getNodes(), selectedIds(ids), dimension, { ...rect2(), ...sizeOptions })
       );
     },
     reorder(operation, ids) {
-      return apply(operation, reorderNodes(options.getNodes(), selectedIds(ids), operation, rect()));
+      return apply(operation, reorderNodes(options.getNodes(), selectedIds(ids), operation, rect2()));
     },
     bringForward: (ids) => controller.reorder("bringForward", ids),
     sendBackward: (ids) => controller.reorder("sendBackward", ids),
@@ -3274,10 +3279,10 @@ function createCanvasArrangeController(options) {
     toggleLock(ids) {
       const list = selectedIds(ids);
       const set = new Set(list);
-      const anyUnlocked = options.getNodes().some((n) => set.has(n.id) && !isLocked(n));
+      const anyUnlocked = options.getNodes().some((n3) => set.has(n3.id) && !isLocked(n3));
       return anyUnlocked ? controller.lock(list) : controller.unlock(list);
     },
-    isLocked: (id) => isLocked(options.getNodes().find((n) => n.id === id)),
+    isLocked: (id) => isLocked(options.getNodes().find((n3) => n3.id === id)),
     /**
      * Freeform shape operation (Unite / Intersect / Subtract / Exclude / Divide) on the
      * shape nodes among `ids` (default: the selection). Replaces them with the result as
@@ -3286,7 +3291,7 @@ function createCanvasArrangeController(options) {
      */
     combineShapes(operation, ids, combineOptions = {}) {
       const before = options.getNodes();
-      const result = combineShapeNodes(before, selectedIds(ids), operation, { ...rect(), ...combineOptions });
+      const result = combineShapeNodes(before, selectedIds(ids), operation, { ...rect2(), ...combineOptions });
       if (!result.ok) return result;
       const name = `${operation[0].toUpperCase()}${operation.slice(1)} Shapes`;
       const run = () => options.setNodes(applyShapeCombination(options.getNodes(), result));
@@ -3310,7 +3315,7 @@ function createCanvasArrangeController(options) {
      */
     offsetShapes(distance, ids, offsetOptions = {}) {
       const before = options.getNodes();
-      const result = offsetShapeNodes(before, selectedIds(ids), distance, { ...rect(), ...offsetOptions });
+      const result = offsetShapeNodes(before, selectedIds(ids), distance, { ...rect2(), ...offsetOptions });
       if (!result.ok) return result;
       const run = () => options.setNodes(applyShapeReplacement(options.getNodes(), result));
       const undo = () => options.setNodes(revertShapeCombination(options.getNodes(), result, before));
@@ -3327,7 +3332,7 @@ function createCanvasArrangeController(options) {
      */
     outlineStroke(ids, outlineOptions = {}) {
       const before = options.getNodes();
-      const result = outlineShapeNodeStrokes(before, selectedIds(ids), { ...rect(), ...outlineOptions });
+      const result = outlineShapeNodeStrokes(before, selectedIds(ids), { ...rect2(), ...outlineOptions });
       if (!result.ok) return result;
       const run = () => options.setNodes(applyShapeReplacement(options.getNodes(), result));
       const undo = () => options.setNodes(revertShapeCombination(options.getNodes(), result, before));
@@ -3393,7 +3398,7 @@ function createCanvasArrangeController(options) {
     beginDrag(ids) {
       const list = selectedIds(ids);
       dragKey = list.slice().sort().join("\0");
-      dragIndex = createNodeGuideIndex(options.getNodes(), list, rect());
+      dragIndex = createNodeGuideIndex(options.getNodes(), list, rect2());
     },
     /**
      * Snaps the dragged nodes (as currently positioned in `getNodes()`) to the other
@@ -3406,7 +3411,7 @@ function createCanvasArrangeController(options) {
       const key = list.slice().sort().join("\0");
       if (!dragIndex || key !== dragKey) controller.beginDrag(list);
       const result = snapNodeDrag(options.getNodes(), list, {
-        ...rect(),
+        ...rect2(),
         ...options.guides,
         zoom: options.getZoom?.() ?? 1,
         index: dragIndex
@@ -3442,9 +3447,9 @@ function createCanvasArrangeController(options) {
       const key = ids.slice().sort().join("\0");
       if (!dragIndex || key !== dragKey) controller.beginDrag(ids);
       const proposed = new Map(dragging.map((c) => [c.id, c.position]));
-      const nodes = options.getNodes().map((n) => proposed.has(n.id) ? { ...n, position: proposed.get(n.id) } : n);
+      const nodes = options.getNodes().map((n3) => proposed.has(n3.id) ? { ...n3, position: proposed.get(n3.id) } : n3);
       const result = snapNodeDrag(nodes, ids, {
-        ...rect(),
+        ...rect2(),
         ...options.guides,
         zoom: options.getZoom?.() ?? 1,
         index: dragIndex
@@ -3453,7 +3458,7 @@ function createCanvasArrangeController(options) {
       const { x: dx, y: dy } = result.offset;
       lastSnapped = /* @__PURE__ */ new Map();
       if (dx === 0 && dy === 0) return changes;
-      const parents = new Map(nodes.map((n) => [n.id, n.parentId]));
+      const parents = new Map(nodes.map((n3) => [n3.id, n3.parentId]));
       const shift = new Set(ids.filter((id) => !proposed.has(parents.get(id) ?? "")));
       return changes.map((c) => {
         if (!(c.type === "position" && c.position && c.dragging && c.id !== void 0 && shift.has(c.id))) return c;
@@ -3471,8 +3476,8 @@ function createCanvasArrangeController(options) {
       const lookup = createNodeLookup(nodes);
       const node = lookup.get(id);
       resizeId = id;
-      resizeStart = node ? getResizingNodeRect(node, lookup, rect()) : null;
-      resizeIndex = createNodeGuideIndex(nodes, [id], rect());
+      resizeStart = node ? getResizingNodeRect(node, lookup, rect2()) : null;
+      resizeIndex = createNodeGuideIndex(nodes, [id], rect2());
       lastResized = null;
     },
     /**
@@ -3488,11 +3493,11 @@ function createCanvasArrangeController(options) {
       const lookup = createNodeLookup(nodes);
       const node = lookup.get(id);
       if (!node || !resizeStart) return null;
-      const proposed = getResizingNodeRect(node, lookup, rect());
+      const proposed = getResizingNodeRect(node, lookup, rect2());
       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 };
+        const origin = parent ? getResizingNodeRect(parent, lookup, rect2()) : { 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, [
@@ -3509,7 +3514,7 @@ function createCanvasArrangeController(options) {
         return null;
       }
       const result = snapNodeResize(nodes, id, proposed, h, {
-        ...rect(),
+        ...rect2(),
         ...options.guides,
         ...options.resize,
         zoom: options.getZoom?.() ?? 1,
@@ -3533,7 +3538,7 @@ function createCanvasArrangeController(options) {
       setGuides([]);
       const update = last?.updates[0];
       if (!update) return;
-      const node = options.getNodes().find((n) => n.id === update.id);
+      const node = options.getNodes().find((n3) => n3.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]));
@@ -3572,7 +3577,7 @@ function createCanvasArrangeController(options) {
       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 origin = parent ? getResizingNodeRect(parent, lookup, rect2()) : { x: 0, y: 0 };
       const position = posChange?.position ?? node.position;
       const proposed = {
         x: position.x + origin.x,
@@ -3586,7 +3591,7 @@ function createCanvasArrangeController(options) {
         return changes;
       }
       const result = snapNodeResize(nodes, id, proposed, handle, {
-        ...rect(),
+        ...rect2(),
         ...options.guides,
         ...options.resize,
         zoom: options.getZoom?.() ?? 1,
@@ -3619,9 +3624,9 @@ function createCanvasArrangeController(options) {
       setGuides([]);
       if (snapped.size === 0) return;
       const nodes = options.getNodes();
-      const drift = nodes.some((n) => {
-        const p = snapped.get(n.id);
-        return !!p && (n.position.x !== p.x || n.position.y !== p.y);
+      const drift = nodes.some((n3) => {
+        const p = snapped.get(n3.id);
+        return !!p && (n3.position.x !== p.x || n3.position.y !== p.y);
       });
       if (drift) {
         options.setNodes(applyNodeUpdates(nodes, [...snapped].map(([id, position]) => ({ id, position }))));
@@ -3726,21 +3731,21 @@ function measureToLine(a, orientation, at) {
 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);
+  const selected = [...new Set(selectedIds)].map((id) => lookup.get(id)).filter((n3) => !!n3 && n3.hidden !== true);
   if (selected.length === 0) return none();
-  const selection = boundsOf(selected.map((n) => getNodeRect(n, lookup, options)));
+  const selection = boundsOf(selected.map((n3) => getNodeRect(n3, lookup, options)));
   if (!selection) return none();
-  const selectedSet = new Set(selected.map((n) => n.id));
+  const selectedSet = new Set(selected.map((n3) => n3.id));
   let targetId = hoveredId ?? null;
   if (targetId === null || selectedSet.has(targetId)) {
     const parentId = selected[0].parentId;
-    const sameParent = selected.every((n) => n.parentId === parentId);
+    const sameParent = selected.every((n3) => n3.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 };
+  const rect2 = getNodeRect(target, lookup, options);
+  return { guides: measureBetween(selection, rect2), target: rect2, selection };
 }
 function isMeasureModifierHeld(event) {
   if (!event) return false;
@@ -3825,12 +3830,12 @@ function createCanvasAutoLayoutController(options) {
      */
     addNode(node, addOptions = {}) {
       const forward = (nodes) => {
-        if (nodes.some((n) => n.id === node.id)) return nodes;
+        if (nodes.some((n3) => n3.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);
+      const backward = (nodes) => nodes.filter((n3) => n3.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. */
@@ -3840,20 +3845,20 @@ function createCanvasAutoLayoutController(options) {
       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);
+        for (const n3 of before) {
+          if (n3.parentId && remove.has(n3.parentId) && !remove.has(n3.id)) {
+            remove.add(n3.id);
             grew = true;
           }
         }
       }
-      const removed = before.map((n, i) => [i, n]).filter(([, n]) => remove.has(n.id));
+      const removed = before.map((n3, i) => [i, n3]).filter(([, n3]) => remove.has(n3.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 parents = [...new Set(removed.map(([, n3]) => n3.parentId).filter((p) => !!p && !remove.has(p)))];
+      const forward = (nodes) => nodes.filter((n3) => !remove.has(n3.id));
       const backward = (nodes) => {
         const next = [...nodes];
-        for (const [i, n] of removed) next.splice(Math.min(i, next.length), 0, n);
+        for (const [i, n3] of removed) next.splice(Math.min(i, next.length), 0, n3);
         return next;
       };
       return run("Delete", forward, backward, () => parents);
@@ -3864,7 +3869,7 @@ function createCanvasAutoLayoutController(options) {
      */
     resizeNode(id, size) {
       const nodes = options.getNodes();
-      const node = nodes.find((n) => n.id === id);
+      const node = nodes.find((n3) => n3.id === id);
       if (!node) return [];
       const old = getNodeSize(node, options.rectOptions);
       const update = { id };
@@ -3877,7 +3882,7 @@ function createCanvasAutoLayoutController(options) {
     /** 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 order = before.map((n3) => n3.id);
       const forward = (nodes) => moveLayoutChild(nodes, childId, index);
       const backward = (nodes) => restoreOrder(nodes, order);
       if (forward(before) === before) return [];
@@ -3889,13 +3894,13 @@ function createCanvasAutoLayoutController(options) {
       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 };
+      const rect2 = getNodeRect(lookup.get(id), lookup, options.rectOptions);
+      const at = point ?? { x: rect2.x + rect2.width / 2, y: rect2.y + rect2.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);
+      const node = options.getNodes().find((n3) => n3.id === id);
       if (node && getLayoutParent(options.getNodes(), id)) dragStarts.set(id, { ...node.position });
     },
     /**
@@ -3921,7 +3926,7 @@ function createCanvasAutoLayoutController(options) {
       const target = controller.getInsertTarget(id, point);
       if (!target) return [];
       const before = options.getNodes();
-      const order = before.map((n) => n.id);
+      const order = before.map((n3) => n3.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 });
@@ -3976,8 +3981,8 @@ function createCanvasAutoLayoutController(options) {
     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);
+      for (const n3 of list) gone.add(n3.id);
+      for (const n3 of list) if (n3.parentId && !gone.has(n3.parentId)) pendingIds.add(n3.parentId);
     },
     /** Whether `noteChanges` left work for `flush`. */
     get hasPending() {
@@ -4002,12 +4007,12 @@ function createCanvasAutoLayoutController(options) {
       let nodes = options.getNodes();
       let updates = [];
       for (const [id, previous] of pendingResizes) {
-        if (!nodes.some((n) => n.id === id)) continue;
+        if (!nodes.some((n3) => n3.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());
+      const layout2 = pendingAll ? layoutAll(nodes, layoutOptions()) : relayoutUpdates(nodes, [...pendingIds].filter((id) => nodes.some((n3) => n3.id === id)), layoutOptions());
       updates = mergeNodeUpdates(updates, layout2);
       pendingIds.clear();
       pendingResizes.clear();
@@ -4016,13 +4021,13 @@ function createCanvasAutoLayoutController(options) {
       return mergeNodeUpdates(applied, updates);
     },
     /** Whether `id` is an auto layout frame. */
-    isFrame: (id) => isAutoLayoutFrame(options.getNodes().find((n) => n.id === id))
+    isFrame: (id) => isAutoLayoutFrame(options.getNodes().find((n3) => n3.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 }));
+  const indexed = nodes.map((n3, i) => ({ n: n3, r: rank.get(n3.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);
 }
@@ -4033,7 +4038,7 @@ var TOKEN_MODES_DATA_KEY = "tokenModes";
 var kebab = (prop) => prop.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 function parseDeclarations(style) {
   const parts = [];
-  let depth = 0;
+  let depth2 = 0;
   let quote = "";
   let start = 0;
   for (let i = 0; i < style.length; i++) {
@@ -4042,9 +4047,9 @@ function parseDeclarations(style) {
       if (ch === "\\") i++;
       else if (ch === quote) quote = "";
     } else if (ch === '"' || ch === "'") quote = ch;
-    else if (ch === "(") depth++;
-    else if (ch === ")") depth = Math.max(0, depth - 1);
-    else if (ch === ";" && depth === 0) {
+    else if (ch === "(") depth2++;
+    else if (ch === ")") depth2 = Math.max(0, depth2 - 1);
+    else if (ch === ";" && depth2 === 0) {
       parts.push(style.slice(start, i));
       start = i + 1;
     }
@@ -4094,8 +4099,8 @@ function writeNodeStyleProperty(style, prop, value, unitless = false) {
 function px(value) {
   if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
   if (typeof value === "string") {
-    const n = parseFloat(value);
-    return Number.isFinite(n) ? n : void 0;
+    const n3 = parseFloat(value);
+    return Number.isFinite(n3) ? n3 : void 0;
   }
   return void 0;
 }
@@ -4294,7 +4299,7 @@ function getTokensForProperty(state, property, node) {
   return state.variables.filter((v) => v.type === property.type && isTokenInScope(v, scope));
 }
 function lookupOf(nodes) {
-  return new Map(nodes.map((n) => [n.id, n]));
+  return new Map(nodes.map((n3) => [n3.id, n3]));
 }
 function validModes(state, modes, into) {
   for (const [collectionId, modeId] of Object.entries(modes)) {
@@ -4473,8 +4478,8 @@ var ANIMATION_DATA_KEY = "animation";
 var num = (value) => {
   if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
   if (typeof value === "string") {
-    const n = parseFloat(value);
-    return Number.isFinite(n) ? n : void 0;
+    const n3 = parseFloat(value);
+    return Number.isFinite(n3) ? n3 : void 0;
   }
   return void 0;
 };
@@ -4723,9 +4728,9 @@ function coerceValue(property, value) {
     if (color === null) throw new AnimationEditError("invalid_value", `"${String(value)}" is not a colour.`);
     return color;
   }
-  const n = typeof value === "string" && value.trim() !== "" ? Number(value) : value;
-  if (typeof n !== "number" || !Number.isFinite(n)) throw new AnimationEditError("invalid_value", `"${String(value)}" is not a number.`);
-  return clampAnimationValue(property, n);
+  const n3 = typeof value === "string" && value.trim() !== "" ? Number(value) : value;
+  if (typeof n3 !== "number" || !Number.isFinite(n3)) throw new AnimationEditError("invalid_value", `"${String(value)}" is not a number.`);
+  return clampAnimationValue(property, n3);
 }
 function coerceEasing(easing) {
   if (typeof easing === "string") {
@@ -4742,7 +4747,7 @@ var Draft = class {
   constructor(nodes, options = {}) {
     this.nodes = nodes;
     this.options = options;
-    this.byId = new Map(nodes.map((n) => [n.id, n]));
+    this.byId = new Map(nodes.map((n3) => [n3.id, n3]));
   }
   nodes;
   options;
@@ -4916,7 +4921,7 @@ function deleteKeyframes(nodes, refs, options = {}) {
     if (left.length === 0) {
       const p = draft.property(property);
       const last = keys.find((k) => sameTime(k.time, lane[lane.length - 1].time)) ?? keys[keys.length - 1];
-      if (p && property !== "motionPath") draft.writeNode(nodeId, (n) => p.write(n, last.value));
+      if (p && property !== "motionPath") draft.writeNode(nodeId, (n3) => p.write(n3, last.value));
     }
     draft.setKeys(nodeId, property, left);
   }
@@ -4936,7 +4941,7 @@ function removeTrack(nodes, nodeId, property, options = {}) {
   const p = draft.property(property);
   if (options.keepValueAt !== void 0 && p && property !== "motionPath") {
     const value = evaluateTrack(track, options.keepValueAt, p.type);
-    if (value !== void 0) draft.writeNode(nodeId, (n) => p.write(n, value));
+    if (value !== void 0) draft.writeNode(nodeId, (n3) => p.write(n3, value));
   }
   draft.setKeys(nodeId, property, []);
   if (property === "motionPath") draft.setMotionPath(nodeId, void 0);
@@ -5107,8 +5112,8 @@ function pasteKeyframes(nodes, clipboard, time, options = {}) {
 var sameValue = (a, b) => typeof a === "number" && typeof b === "number" ? Math.abs(a - b) <= 1e-9 : a === b;
 function recordAnimationChanges(base, before, after, time, options = {}) {
   const properties = (options.properties ?? ANIMATABLE_PROPERTIES).filter((p) => p.key !== "motionPath");
-  const baseById = new Map(base.map((n) => [n.id, n]));
-  const beforeById = new Map(before.map((n) => [n.id, n]));
+  const baseById = new Map(base.map((n3) => [n3.id, n3]));
+  const beforeById = new Map(before.map((n3) => [n3.id, n3]));
   const t = coerceTime(time);
   const keyed = [];
   const out = after.map((next) => {
@@ -5258,7 +5263,7 @@ function sampledStops(duration, fps, keyTimes, valueAt) {
   return [...times].sort((a, b) => a - b).map((t) => ({ offset: Math.min(1, t / duration), value: valueAt(t), easing: "linear" }));
 }
 function getCssPropertyAnimations(nodes, nodeId, options = {}) {
-  const node = nodes.find((n) => n.id === nodeId);
+  const node = nodes.find((n3) => n3.id === nodeId);
   const animation = getNodeAnimation(node);
   if (!node || !animation) return [];
   const duration = options.duration ?? getAnimationDuration([node]);
@@ -5328,7 +5333,7 @@ function timing(options, duration) {
 }
 var cssIdent = (text) => text.replace(/[^A-Za-z0-9_-]/g, "-").replace(/^(\d)/, "_$1");
 function exportCssAnimation(nodes, nodeId, options = {}) {
-  const duration = options.duration ?? getAnimationDuration(nodes.filter((n) => n.id === nodeId));
+  const duration = options.duration ?? getAnimationDuration(nodes.filter((n3) => n3.id === nodeId));
   const props = getCssPropertyAnimations(nodes, nodeId, { ...options, duration });
   const base = cssIdent(options.name ?? `anim-${nodeId}`);
   const t = timing(options, duration);
@@ -5359,7 +5364,7 @@ ${selector} {
   return { css, animation, animations, exact: props.every((p) => p.exact) };
 }
 function toWebAnimations(nodes, nodeId, options = {}) {
-  const duration = options.duration ?? getAnimationDuration(nodes.filter((n) => n.id === nodeId));
+  const duration = options.duration ?? getAnimationDuration(nodes.filter((n3) => n3.id === nodeId));
   const t = timing(options, duration);
   return getCssPropertyAnimations(nodes, nodeId, { ...options, duration }).map((prop) => ({
     property: prop.property,
@@ -5381,7 +5386,7 @@ function isKeyframeSelected(selection, ref) {
 }
 var defaultLabel = (node) => typeof node.data?.label === "string" && node.data.label.trim() ? node.data.label : node.id;
 function getTimelineRows(nodes, ids, options = {}) {
-  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const byId = new Map(nodes.map((n3) => [n3.id, n3]));
   const selection = options.selection ?? [];
   const labelOf = options.labelOf ?? defaultLabel;
   const rows = [];
@@ -5489,7 +5494,7 @@ function createCanvasAnimationController(options) {
     for (const listener of listeners) listener(state);
   };
   player.subscribe(notify);
-  const selectedIds = () => options.getSelectedIds?.() ?? options.getNodes().filter((n) => n.selected).map((n) => n.id);
+  const selectedIds = () => options.getSelectedIds?.() ?? options.getNodes().filter((n3) => n3.selected).map((n3) => n3.id);
   const KEEP_FIELDS = ["selected", "dragging", "measured"];
   const replaceNodes = (nodes, replacements, animationOnly = false) => nodes.map((node) => {
     const replacement = replacements.get(node.id);
@@ -5512,7 +5517,7 @@ function createCanvasAnimationController(options) {
     const before = options.getNodes();
     const after = edit(before);
     if (after === before) return false;
-    const beforeById = new Map(before.map((n) => [n.id, n]));
+    const beforeById = new Map(before.map((n3) => [n3.id, n3]));
     const undoMap = /* @__PURE__ */ new Map();
     const redoMap = /* @__PURE__ */ new Map();
     for (const node of after) {
@@ -5534,7 +5539,7 @@ function createCanvasAnimationController(options) {
   }
   function pruneSelection() {
     if (selection.length === 0) return;
-    const byId = new Map(options.getNodes().map((n) => [n.id, n]));
+    const byId = new Map(options.getNodes().map((n3) => [n3.id, n3]));
     const kept = selection.filter((ref) => {
       const track = getNodeAnimation(byId.get(ref.nodeId))?.tracks[ref.property];
       return !!track && normalizeKeyframes(track.keyframes).some((k) => Math.abs(k.time - ref.time) <= ANIMATION_TIME_EPSILON);
@@ -5640,27 +5645,27 @@ function createCanvasAnimationController(options) {
         return [];
       }
       const ids = new Set(keyed.map((k) => k.nodeId));
-      const baseById = new Map(base.map((n) => [n.id, n]));
-      const staticNodes = nodes.map((n) => {
-        if (!ids.has(n.id)) return n;
-        const old = baseById.get(n.id)?.data?.[ANIMATION_DATA_KEY];
-        const data = { ...n.data ?? {} };
+      const baseById = new Map(base.map((n3) => [n3.id, n3]));
+      const staticNodes = nodes.map((n3) => {
+        if (!ids.has(n3.id)) return n3;
+        const old = baseById.get(n3.id)?.data?.[ANIMATION_DATA_KEY];
+        const data = { ...n3.data ?? {} };
         if (old === void 0) delete data[ANIMATION_DATA_KEY];
         else data[ANIMATION_DATA_KEY] = old;
-        return { ...n, data };
+        return { ...n3, data };
       });
-      const animationOf = new Map(nodes.filter((n) => ids.has(n.id)).map((n) => [n.id, n.data?.[ANIMATION_DATA_KEY]]));
+      const animationOf = new Map(nodes.filter((n3) => ids.has(n3.id)).map((n3) => [n3.id, n3.data?.[ANIMATION_DATA_KEY]]));
       options.setNodes(staticNodes);
       const tag = `animation.record:${[...ids].sort().join(",")}`;
       commit(
         "Record Keyframe",
-        (current) => current.map((n) => {
-          if (!animationOf.has(n.id)) return n;
-          const data = { ...n.data ?? {} };
-          const value = animationOf.get(n.id);
+        (current) => current.map((n3) => {
+          if (!animationOf.has(n3.id)) return n3;
+          const data = { ...n3.data ?? {} };
+          const value = animationOf.get(n3.id);
           if (value === void 0) delete data[ANIMATION_DATA_KEY];
           else data[ANIMATION_DATA_KEY] = value;
-          return { ...n, data };
+          return { ...n3, data };
         }),
         { tag, animationOnly: true }
       );
@@ -6157,12 +6162,12 @@ function fieldGroup(field) {
 var Graph = class {
   constructor(nodes) {
     this.nodes = nodes;
-    this.byId = new Map(nodes.map((n) => [n.id, n]));
-    for (const n of nodes) {
-      if (!n.parentId || !this.byId.has(n.parentId)) continue;
-      let list = this.kids.get(n.parentId);
-      if (!list) this.kids.set(n.parentId, list = []);
-      list.push(n.id);
+    this.byId = new Map(nodes.map((n3) => [n3.id, n3]));
+    for (const n3 of nodes) {
+      if (!n3.parentId || !this.byId.has(n3.parentId)) continue;
+      let list = this.kids.get(n3.parentId);
+      if (!list) this.kids.set(n3.parentId, list = []);
+      list.push(n3.id);
     }
   }
   nodes;
@@ -6192,7 +6197,7 @@ var Graph = class {
   }
   /** Whether `a` is a strict ancestor of `b`. */
   isAncestor(a, b) {
-    return this.chain(b, false).some((n) => n.id === a);
+    return this.chain(b, false).some((n3) => n3.id === a);
   }
   /** `id` and its descendants, pre-order. */
   subtree(id) {
@@ -6322,7 +6327,7 @@ function componentDepsIn(g, componentId) {
 }
 function createsCycleIn(g, componentId, parentId) {
   if (!parentId) return false;
-  const hosts = g.chain(parentId).filter(isCanvasComponent).map((n) => n.id);
+  const hosts = g.chain(parentId).filter(isCanvasComponent).map((n3) => n3.id);
   if (hosts.length === 0) return false;
   const deps = componentDepsIn(g, componentId);
   deps.add(componentId);
@@ -6345,7 +6350,7 @@ function isInsideInstance(nodes, id) {
   return enclosingInstanceIn(new Graph(nodes), id) !== void 0;
 }
 function getComponentInstances(nodes, componentId) {
-  return nodes.filter((n) => getInstanceData(n)?.componentId === componentId).map((n) => n.id);
+  return nodes.filter((n3) => getInstanceData(n3)?.componentId === componentId).map((n3) => n3.id);
 }
 function getInstanceStatus(nodes, id) {
   const g = new Graph(nodes);
@@ -6384,19 +6389,19 @@ function getInstanceProperties(nodes, id) {
 function listCanvasComponents(nodes) {
   const g = new Graph(nodes);
   const counts = /* @__PURE__ */ new Map();
-  for (const n of nodes) {
-    const c = getInstanceData(n)?.componentId;
+  for (const n3 of nodes) {
+    const c = getInstanceData(n3)?.componentId;
     if (c) counts.set(c, (counts.get(c) ?? 0) + 1);
   }
   const components = [];
-  for (const n of nodes) {
-    if (!isCanvasComponent(n)) continue;
-    const set = variantSetIn(g, n.id);
+  for (const n3 of nodes) {
+    if (!isCanvasComponent(n3)) continue;
+    const set = variantSetIn(g, n3.id);
     components.push({
-      id: n.id,
-      name: getLayerName(n) || n.id,
-      ...set ? { setId: set.id, variant: getVariantValues(n) } : {},
-      instanceCount: counts.get(n.id) ?? 0
+      id: n3.id,
+      name: getLayerName(n3) || n3.id,
+      ...set ? { setId: set.id, variant: getVariantValues(n3) } : {},
+      instanceCount: counts.get(n3.id) ?? 0
     });
   }
   const sets = nodes.filter(isCanvasComponentSet).map((s) => ({
@@ -6463,15 +6468,15 @@ function clearRuntime(node, old) {
     else delete node[k];
   }
 }
-function tokenDrivenGroups(n, options) {
-  const mine = stringRecord2(dataOf(n).tokenBindings);
+function tokenDrivenGroups(n3, options) {
+  const mine = stringRecord2(dataOf(n3).tokenBindings);
   const out = [];
   for (const key of Object.keys(mine)) {
     const property = getCanvasTokenProperty(key, options);
-    if (!property || !property.appliesTo(n)) continue;
-    const current = property.read(n);
+    if (!property || !property.appliesTo(n3)) continue;
+    const current = property.read(n3);
     const probe = typeof current === "number" ? current + 1 : typeof current === "boolean" ? !current : `${current ?? ""}
`;
-    for (const g of diffOverrideGroups(n, property.write(n, probe))) if (!out.includes(g)) out.push(g);
+    for (const g of diffOverrideGroups(n3, property.write(n3, probe))) if (!out.includes(g)) out.push(g);
   }
   return out;
 }
@@ -6535,9 +6540,9 @@ function buildInstance(g, instId, opts, taken) {
   const byParentSource = /* @__PURE__ */ new Map();
   const bySource = /* @__PURE__ */ new Map();
   for (const id of oldIds) {
-    const n = old.get(id);
-    const s = getComponentSourceId(n);
-    const key = `${n.parentId}\0${s}`;
+    const n3 = old.get(id);
+    const s = getComponentSourceId(n3);
+    const key = `${n3.parentId}\0${s}`;
     if (!byParentSource.has(key)) byParentSource.set(key, id);
     bySource.set(s, bySource.has(s) ? null : id);
   }
@@ -6547,10 +6552,10 @@ function buildInstance(g, instId, opts, taken) {
     const walk = (parent, prefix) => {
       const counts = /* @__PURE__ */ new Map();
       for (const c of g.children(parent)) {
-        const n = g.get(c);
-        const src = getComponentSourceId(n);
+        const n3 = g.get(c);
+        const src = getComponentSourceId(n3);
         if (src === void 0) continue;
-        const name = getLayerName(g.get(src) ?? n);
+        const name = getLayerName(g.get(src) ?? n3);
         const k = counts.get(name) ?? 0;
         counts.set(name, k + 1);
         const path = `${prefix}/${k === 0 ? name : `${name}#${k}`}`;
@@ -6571,7 +6576,7 @@ function buildInstance(g, instId, opts, taken) {
   };
   const instProps = /* @__PURE__ */ new Map();
   const out = [];
-  const isText2 = (n) => typeof n.type === "string" && opts.textTypes.includes(n.type);
+  const isText2 = (n3) => typeof n3.type === "string" && opts.textTypes.includes(n3.type);
   const copyLayer = (s, o, id, parentId) => {
     const next = { ...s, id, parentId };
     const data = stripLook(dataOf(s));
@@ -6579,7 +6584,7 @@ function buildInstance(g, instId, opts, taken) {
     data[COMPONENT_SOURCE_DATA_KEY] = s.id;
     next.data = data;
     clearRuntime(next, o);
-    let n = next;
+    let n3 = next;
     if (o) {
       let groups = [...getNodeOverrides(o)];
       const from = g.get(getComponentSourceId(o));
@@ -6587,16 +6592,16 @@ function buildInstance(g, instId, opts, taken) {
         const differs = new Set(diffOverrideGroups(from, s));
         groups = groups.filter((gr) => !differs.has(gr));
       }
-      n = copyGroups(o, n, groups);
-      n = keepLaidOut(s, o, n, groups);
-      n = setOverrides(n, groups);
+      n3 = copyGroups(o, n3, groups);
+      n3 = keepLaidOut(s, o, n3, groups);
+      n3 = setOverrides(n3, groups);
     }
-    return fixMeasured(n, o);
+    return fixMeasured(n3, o);
   };
-  const keepLaidOut = (s, o, n, groups) => {
-    if (o.parentId !== n.parentId || groups.includes("size") || groups.includes("position")) return n;
-    const flows = !getChildLayout(n).absolute && !!getAutoLayout(g.get(s.parentId));
-    let next = n;
+  const keepLaidOut = (s, o, n3, groups) => {
+    if (o.parentId !== n3.parentId || groups.includes("size") || groups.includes("position")) return n3;
+    const flows = !getChildLayout(n3).absolute && !!getAutoLayout(g.get(s.parentId));
+    let next = n3;
     if (flows) next = writeOverrideGroup(next, "position", o.position);
     const derived = (axis) => {
       const sizing = getLayoutSizing(next, axis);
@@ -6625,27 +6630,27 @@ function buildInstance(g, instId, opts, taken) {
     data[COMPONENT_SOURCE_DATA_KEY] = sourceId;
     next.data = data;
     clearRuntime(next, old2);
-    let n = next;
+    let n3 = next;
     const own = /* @__PURE__ */ new Set();
     listGroups(place2, own);
-    listGroups(n, own);
-    n = copyGroups(place2, n, [...own].filter((gr) => isOwnRootGroup(gr) && gr !== "component" && gr !== "props"));
+    listGroups(n3, own);
+    n3 = copyGroups(place2, n3, [...own].filter((gr) => isOwnRootGroup(gr) && gr !== "component" && gr !== "props"));
     let groups = old2 ? getNodeOverrides(old2).filter((gr) => !topLevel || !isOwnRootGroup(gr)) : [];
     if (old2 && previousComponent && siblingVariants(g, previousComponent, look.id)) {
       const differs = new Set(diffOverrideGroups(g.get(previousComponent), look));
       groups = groups.filter((gr) => gr === "data.label" || gr === "data.name" || !differs.has(gr));
     }
-    if (old2) n = copyGroups(old2, n, groups.filter((gr) => gr !== "component" && gr !== "props"));
-    return fixMeasured(setOverrides(n, groups), old2);
+    if (old2) n3 = copyGroups(old2, n3, groups.filter((gr) => gr !== "component" && gr !== "props"));
+    return fixMeasured(setOverrides(n3, groups), old2);
   };
-  const applyChainProps = (n, s, enc) => {
+  const applyChainProps = (n3, s, enc) => {
     const chain = [s];
     while (chain.length < enc.length) {
       const next2 = g.get(getComponentSourceId(chain[chain.length - 1]));
       if (!next2) break;
       chain.push(next2);
     }
-    let next = n;
+    let next = n3;
     for (let j = chain.length - 1; j >= 0; j--) {
       const props = instProps.get(enc[j]);
       if (!props) continue;
@@ -6657,7 +6662,7 @@ function buildInstance(g, instId, opts, taken) {
     }
     return next;
   };
-  const copyChildren = (srcParent, newParent, prefix, enc, expanding, depth) => {
+  const copyChildren = (srcParent, newParent, prefix, enc, expanding, depth2) => {
     const counts = /* @__PURE__ */ new Map();
     for (const sid of g.children(srcParent)) {
       const s = g.get(sid);
@@ -6679,39 +6684,39 @@ function buildInstance(g, instId, opts, taken) {
       if (oid !== void 0) used.add(oid);
       const o = oid !== void 0 ? old.get(oid) : void 0;
       const id = oid ?? fresh(sid);
-      let n = applyChainProps(copyLayer(s, o, id, newParent), s, enc);
-      const nested = getInstanceData(n);
-      if (nested && depth < MAX_DEPTH) {
+      let n3 = applyChainProps(copyLayer(s, o, id, newParent), s, enc);
+      const nested = getInstanceData(n3);
+      if (nested && depth2 < MAX_DEPTH) {
         const target = nested.componentId;
         instProps.set(id, effectivePropsIn(g, target, nested.properties));
         if (getInstanceData(s)?.componentId !== target) {
           const main = g.get(target);
           if (isCanvasComponent(main) && !expanding.includes(target) && !g.isAncestor(target, instId)) {
             const previousComponent = o ? getInstanceData(o)?.componentId : void 0;
-            n = applyChainProps(instanceRoot(main, s, o, id, newParent, sid, nested, previousComponent, false), s, enc);
-            out.push(n);
-            copyChildren(target, id, path, [id], [...expanding, target], depth + 1);
+            n3 = applyChainProps(instanceRoot(main, s, o, id, newParent, sid, nested, previousComponent, false), s, enc);
+            out.push(n3);
+            copyChildren(target, id, path, [id], [...expanding, target], depth2 + 1);
             continue;
           }
         }
-        out.push(n);
-        copyChildren(sid, id, path, [...enc, id], expanding, depth);
+        out.push(n3);
+        copyChildren(sid, id, path, [...enc, id], expanding, depth2);
         continue;
       }
-      out.push(n);
-      copyChildren(sid, id, path, enc, expanding, depth);
+      out.push(n3);
+      copyChildren(sid, id, path, enc, expanding, depth2);
     }
   };
   const root = instanceRoot(comp, inst, inst, instId, inst.parentId, compId, instData, getComponentSourceId(inst), true);
   instProps.set(instId, effectivePropsIn(g, compId, instData.properties));
   copyChildren(compId, instId, "", [instId], [compId], 0);
-  const placed = /* @__PURE__ */ new Set([instId, ...out.map((n) => n.id)]);
+  const placed = /* @__PURE__ */ new Set([instId, ...out.map((n3) => n3.id)]);
   const keptForeign = [];
   for (const id of foreign) {
-    const n = g.get(id);
-    if (n.parentId && placed.has(n.parentId)) {
+    const n3 = g.get(id);
+    if (n3.parentId && placed.has(n3.parentId)) {
       placed.add(id);
-      keptForeign.push(n);
+      keptForeign.push(n3);
     }
   }
   const removed = /* @__PURE__ */ new Set([instId, ...oldIds, ...foreign]);
@@ -6719,17 +6724,17 @@ function buildInstance(g, instId, opts, taken) {
   const compSize = getNodeSize(comp);
   const rootSize = getNodeSize(root);
   if (!getAutoLayout(root) && (Math.abs(compSize.width - rootSize.width) > 1e-9 || Math.abs(compSize.height - rootSize.height) > 1e-9)) {
-    const fixed = new Set(out.filter((n) => getNodeOverrides(n).some((gr) => gr === "size" || gr === "position")).map((n) => n.id));
+    const fixed = new Set(out.filter((n3) => getNodeOverrides(n3).some((gr) => gr === "size" || gr === "position")).map((n3) => n3.id));
     const updates = applyConstraints(block, instId, compSize, opts.layout || {}).filter((u) => !fixed.has(u.id));
     block = applyNodeUpdates(block, updates);
   }
   if (opts.layout) {
-    const frames = block.filter((n) => getAutoLayout(n)).map((n) => n.id);
+    const frames = block.filter((n3) => getAutoLayout(n3)).map((n3) => n3.id);
     if (frames.length) block = applyNodeUpdates(block, layoutUpMany(block, frames, opts.layout));
   }
-  block = block.map((n) => {
-    const prev = g.get(n.id);
-    return prev && prev !== n && same(prev, n) ? prev : n;
+  block = block.map((n3) => {
+    const prev = g.get(n3.id);
+    return prev && prev !== n3 && same(prev, n3) ? prev : n3;
   });
   return { block, removed };
 }
@@ -6747,20 +6752,20 @@ function rebuildBatch(nodes, ids, opts) {
   const removed = /* @__PURE__ */ new Set();
   for (const b of built.values()) for (const id of b.removed) removed.add(id);
   let result = [];
-  for (const n of nodes) {
-    const b = built.get(n.id);
+  for (const n3 of nodes) {
+    const b = built.get(n3.id);
     if (b) result.push(...b.block);
-    else if (!removed.has(n.id)) result.push(n);
+    else if (!removed.has(n3.id)) result.push(n3);
   }
   if (opts.layout) {
-    const lookup = new Map(result.map((n) => [n.id, n]));
+    const lookup = new Map(result.map((n3) => [n3.id, n3]));
     const inFrames = [...built.keys()].filter((r) => {
       const parent = lookup.get(lookup.get(r)?.parentId ?? "");
       return !!getAutoLayout(parent);
     });
     if (inFrames.length) result = applyNodeUpdates(result, layoutUpMany(result, inFrames, opts.layout));
   }
-  return result.length === nodes.length && result.every((n, i) => n === nodes[i]) ? nodes : result;
+  return result.length === nodes.length && result.every((n3, i) => n3 === nodes[i]) ? nodes : result;
 }
 function rebuildInstances(nodes, comps, resync, opts) {
   let current = nodes;
@@ -6775,10 +6780,10 @@ function rebuildInstances(nodes, comps, resync, opts) {
   if (comps.size === 0) return current;
   const g = new Graph(current);
   const rootsOf = /* @__PURE__ */ new Map();
-  for (const n of current) {
-    const inst = getInstanceData(n);
+  for (const n3 of current) {
+    const inst = getInstanceData(n3);
     if (!inst) continue;
-    const root = rootInstanceIn(g, n.id) ?? n.id;
+    const root = rootInstanceIn(g, n3.id) ?? n3.id;
     let set = rootsOf.get(inst.componentId);
     if (!set) rootsOf.set(inst.componentId, set = /* @__PURE__ */ new Set());
     set.add(root);
@@ -6812,7 +6817,7 @@ function rebuildInstances(nodes, comps, resync, opts) {
 function finish(original, result, opts) {
   let out = result;
   if (opts.tokens?.state) out = resolveCanvasTokens(out, opts.tokens.state, opts.tokens);
-  if (out.length === original.length && out.every((n, i) => n === original[i])) return original;
+  if (out.length === original.length && out.every((n3, i) => n3 === original[i])) return original;
   return out;
 }
 function syncCanvasInstance(nodes, instanceId, options = {}) {
@@ -6821,7 +6826,7 @@ function syncCanvasInstance(nodes, instanceId, options = {}) {
 }
 function syncAllCanvasInstances(nodes, options = {}) {
   const opts = resolveSync(options);
-  const comps = new Set(nodes.filter(isCanvasComponent).map((n) => n.id));
+  const comps = new Set(nodes.filter(isCanvasComponent).map((n3) => n3.id));
   return finish(nodes, rebuildInstances([...nodes], comps, /* @__PURE__ */ new Set(), opts), opts);
 }
 function rebaseInstance(nodes, instId, tokens) {
@@ -6836,8 +6841,8 @@ function rebaseInstance(nodes, instId, tokens) {
     const walk = (parent, prefix) => {
       const counts = /* @__PURE__ */ new Map();
       for (const c of g.children(parent)) {
-        const n = g.get(c);
-        const name = getLayerName(viaSource && g.get(getComponentSourceId(n)) || n);
+        const n3 = g.get(c);
+        const name = getLayerName(viaSource && g.get(getComponentSourceId(n3)) || n3);
         const k = counts.get(name) ?? 0;
         counts.set(name, k + 1);
         const path = `${prefix}/${k === 0 ? name : `${name}#${k}`}`;
@@ -6853,9 +6858,9 @@ function rebaseInstance(nodes, instId, tokens) {
   paths(instId, true, mine, false);
   const updates = /* @__PURE__ */ new Map();
   for (const [id, path] of mine) {
-    const n = g.get(id);
+    const n3 = g.get(id);
     let main;
-    let cur = getComponentSourceId(n);
+    let cur = getComponentSourceId(n3);
     for (let i = 0; cur && i < MAX_DEPTH; i++) {
       if (cur !== compId && g.get(cur) && g.isAncestor(compId, cur)) {
         main = cur;
@@ -6865,15 +6870,15 @@ function rebaseInstance(nodes, instId, tokens) {
     }
     main ??= comp ? theirs.get(path) : void 0;
     const m = g.get(main);
-    let next = n;
+    let next = n3;
     if (m) {
-      const bound = /* @__PURE__ */ new Set([...propertyDrivenGroups(g, m), ...tokenDrivenGroups(n, tokens)]);
-      const groups = new Set(getNodeOverrides(n).filter((gr) => gr !== "component" && gr !== "props"));
-      for (const gr of diffOverrideGroups(m, n)) if (gr !== "size" && gr !== "position" && !bound.has(gr)) groups.add(gr);
-      if (isCanvasInstance(m) && isCanvasInstance(n) && getInstanceData(m).componentId !== getInstanceData(n).componentId) groups.add("component");
-      next = setOverrides(withData(n, { ...dataOf(n), [COMPONENT_SOURCE_DATA_KEY]: m.id }), groups);
-    } else next = unlinked(n);
-    if (next !== n) updates.set(id, next);
+      const bound = /* @__PURE__ */ new Set([...propertyDrivenGroups(g, m), ...tokenDrivenGroups(n3, tokens)]);
+      const groups = new Set(getNodeOverrides(n3).filter((gr) => gr !== "component" && gr !== "props"));
+      for (const gr of diffOverrideGroups(m, n3)) if (gr !== "size" && gr !== "position" && !bound.has(gr)) groups.add(gr);
+      if (isCanvasInstance(m) && isCanvasInstance(n3) && getInstanceData(m).componentId !== getInstanceData(n3).componentId) groups.add("component");
+      next = setOverrides(withData(n3, { ...dataOf(n3), [COMPONENT_SOURCE_DATA_KEY]: m.id }), groups);
+    } else next = unlinked(n3);
+    if (next !== n3) updates.set(id, next);
   }
   const root = g.get(instId);
   let nextRoot = withData(root, { ...dataOf(root), [COMPONENT_SOURCE_DATA_KEY]: compId });
@@ -6885,7 +6890,7 @@ function rebaseInstance(nodes, instId, tokens) {
     nextRoot = setOverrides(nextRoot, groups);
   }
   updates.set(instId, nextRoot);
-  return nodes.map((n) => updates.get(n.id) ?? n);
+  return nodes.map((n3) => updates.get(n3.id) ?? n3);
 }
 function sizeFromLayout(g, node) {
   const parentFlows = !!getAutoLayout(g.get(node.parentId)) && !getChildLayout(node).absolute;
@@ -6900,7 +6905,7 @@ function syncCanvasComponents(before, after, options = {}) {
   const prev = new Graph(before);
   let nodes = [...after];
   const resync = /* @__PURE__ */ new Set();
-  const afterIds = new Set(after.map((n) => n.id));
+  const afterIds = new Set(after.map((n3) => n3.id));
   const restore = [];
   for (const b of before) {
     if (afterIds.has(b.id) || getComponentSourceId(b) === void 0 || isCanvasInstance(b) && !enclosingInstanceIn(prev, b.id)) continue;
@@ -6909,7 +6914,7 @@ function syncCanvasComponents(before, after, options = {}) {
     restore.push(b);
   }
   if (restore.length) {
-    const restoring = new Set(restore.map((n) => n.id));
+    const restoring = new Set(restore.map((n3) => n3.id));
     for (const b of restore) nodes.push(b.parentId && restoring.has(b.parentId) ? b : writeOverrideGroup(b, "hidden", true));
     for (const b of restore) {
       const r = rootInstanceIn(prev, b.id);
@@ -6917,104 +6922,104 @@ function syncCanvasComponents(before, after, options = {}) {
     }
   }
   let g = new Graph(nodes);
-  const added = nodes.filter((n) => !prev.byId.has(n.id));
+  const added = nodes.filter((n3) => !prev.byId.has(n3.id));
   if (added.length) {
-    const addedIds = new Set(added.map((n) => n.id));
+    const addedIds = new Set(added.map((n3) => n3.id));
     const moves = /* @__PURE__ */ new Map();
-    for (const n of added) {
-      if (!n.parentId || addedIds.has(n.parentId)) continue;
-      const r = rootInstanceIn(g, n.parentId);
+    for (const n3 of added) {
+      if (!n3.parentId || addedIds.has(n3.parentId)) continue;
+      const r = rootInstanceIn(g, n3.parentId);
       if (!r || addedIds.has(r)) continue;
       const rootNode = g.get(r);
-      const abs = getAbsolutePosition(n, g.byId);
+      const abs = getAbsolutePosition(n3, g.byId);
       const parent = g.get(rootNode.parentId);
       const base = parent ? getAbsolutePosition(parent, g.byId) : { x: 0, y: 0 };
-      const moved = { ...n, position: { x: abs.x - base.x, y: abs.y - base.y } };
+      const moved = { ...n3, position: { x: abs.x - base.x, y: abs.y - base.y } };
       if (rootNode.parentId) moved.parentId = rootNode.parentId;
       else delete moved.parentId;
-      moves.set(n.id, moved);
+      moves.set(n3.id, moved);
     }
     if (moves.size) {
-      nodes = nodes.map((n) => moves.get(n.id) ?? n);
+      nodes = nodes.map((n3) => moves.get(n3.id) ?? n3);
       g = new Graph(nodes);
     }
     const rebase = [];
     const strips = /* @__PURE__ */ new Map();
-    for (const n of added) {
-      const cur = g.get(n.id);
+    for (const n3 of added) {
+      const cur = g.get(n3.id);
       if (isCanvasInstance(cur)) {
-        if (enclosingInstanceIn(g, n.id) === void 0 && getComponentSourceId(cur) !== getInstanceData(cur).componentId) rebase.push(n.id);
+        if (enclosingInstanceIn(g, n3.id) === void 0 && getComponentSourceId(cur) !== getInstanceData(cur).componentId) rebase.push(n3.id);
         continue;
       }
       if (getComponentSourceId(cur) === void 0 && getNodeOverrides(cur).length === 0) continue;
-      const r = rootInstanceIn(g, n.id);
-      if (!r || !addedIds.has(r) || moves.has(n.id)) strips.set(n.id, unlinked(cur, true));
+      const r = rootInstanceIn(g, n3.id);
+      if (!r || !addedIds.has(r) || moves.has(n3.id)) strips.set(n3.id, unlinked(cur, true));
     }
-    if (strips.size) nodes = nodes.map((n) => strips.get(n.id) ?? n);
+    if (strips.size) nodes = nodes.map((n3) => strips.get(n3.id) ?? n3);
     for (const id of rebase) nodes = rebaseInstance(nodes, id, opts.tokens);
     g = new Graph(nodes);
   }
   const overrideUpdates = /* @__PURE__ */ new Map();
-  for (const n of nodes) {
-    const b = prev.get(n.id);
-    if (!b || b === n) continue;
-    const inst = owningInstanceIn(g, n.id);
-    if (!inst || getComponentSourceId(n) === void 0 && inst !== n.id) continue;
-    const topRoot = inst === n.id && enclosingInstanceIn(g, n.id) === void 0;
+  for (const n3 of nodes) {
+    const b = prev.get(n3.id);
+    if (!b || b === n3) continue;
+    const inst = owningInstanceIn(g, n3.id);
+    if (!inst || getComponentSourceId(n3) === void 0 && inst !== n3.id) continue;
+    const topRoot = inst === n3.id && enclosingInstanceIn(g, n3.id) === void 0;
     const bi = getInstanceData(b);
-    const ni = getInstanceData(n);
-    const raw = diffOverrideGroups(b, n);
+    const ni = getInstanceData(n3);
+    const raw = diffOverrideGroups(b, n3);
     if (topRoot) {
-      if (bi && ni && (bi.componentId !== ni.componentId || !same(bi.properties ?? {}, ni.properties ?? {}))) resync.add(n.id);
-      if (raw.includes("size")) resync.add(n.id);
+      if (bi && ni && (bi.componentId !== ni.componentId || !same(bi.properties ?? {}, ni.properties ?? {}))) resync.add(n3.id);
+      if (raw.includes("size")) resync.add(n3.id);
     }
-    let groups = raw.filter((gr) => gr !== "position" && (gr !== "size" || topRoot && !sizeFromLayout(g, n)));
+    let groups = raw.filter((gr) => gr !== "position" && (gr !== "size" || topRoot && !sizeFromLayout(g, n3)));
     if (topRoot) groups = groups.filter((gr) => !isOwnRootGroup(gr));
     let cleared = [];
-    const srcId = topRoot ? ni?.componentId : getComponentSourceId(n);
+    const srcId = topRoot ? ni?.componentId : getComponentSourceId(n3);
     const src = g.get(srcId);
     if (src) {
       const reference = topRoot ? rootReference(g, src) : src;
-      const differs = new Set(diffOverrideGroups(reference, n));
-      const driven = new Set(tokenDrivenGroups(n, opts.tokens));
+      const differs = new Set(diffOverrideGroups(reference, n3));
+      const driven = new Set(tokenDrivenGroups(n3, opts.tokens));
       groups = groups.filter((gr) => differs.has(gr) && !driven.has(gr));
-      cleared = raw.filter((gr) => gr !== "size" && gr !== "position" && !differs.has(gr) && getNodeOverrides(n).includes(gr));
+      cleared = raw.filter((gr) => gr !== "size" && gr !== "position" && !differs.has(gr) && getNodeOverrides(n3).includes(gr));
       if (topRoot) cleared = cleared.filter((gr) => !isOwnRootGroup(gr));
     }
-    const lost = getNodeOverrides(b).some((gr) => !getNodeOverrides(n).includes(gr));
+    const lost = getNodeOverrides(b).some((gr) => !getNodeOverrides(n3).includes(gr));
     const nestedSwitch = !topRoot && raw.some((gr) => gr === "component" || gr === "props");
     if (groups.length || cleared.length) {
-      const set = new Set(getNodeOverrides(n));
+      const set = new Set(getNodeOverrides(n3));
       for (const gr of groups) set.add(gr);
       for (const gr of cleared) set.delete(gr);
-      const updated = setOverrides(n, set);
-      if (updated !== n) overrideUpdates.set(n.id, updated);
+      const updated = setOverrides(n3, set);
+      if (updated !== n3) overrideUpdates.set(n3.id, updated);
     }
     if (lost || nestedSwitch) {
-      const r = rootInstanceIn(g, n.id);
+      const r = rootInstanceIn(g, n3.id);
       if (r) resync.add(r);
     }
   }
   if (overrideUpdates.size) {
-    nodes = nodes.map((n) => overrideUpdates.get(n.id) ?? n);
+    nodes = nodes.map((n3) => overrideUpdates.get(n3.id) ?? n3);
     g = new Graph(nodes);
   }
   const comps = /* @__PURE__ */ new Set();
-  for (const n of nodes) {
-    const b = prev.get(n.id);
-    if (b === n) continue;
-    const c = owningComponentIn(g, n.id);
-    if (isCanvasComponentSet(n) && (!b || !same(dataOf(b)[COMPONENT_SET_DATA_KEY], dataOf(n)[COMPONENT_SET_DATA_KEY]))) {
-      for (const v of variantsIn(g, n.id)) comps.add(v.id);
+  for (const n3 of nodes) {
+    const b = prev.get(n3.id);
+    if (b === n3) continue;
+    const c = owningComponentIn(g, n3.id);
+    if (isCanvasComponentSet(n3) && (!b || !same(dataOf(b)[COMPONENT_SET_DATA_KEY], dataOf(n3)[COMPONENT_SET_DATA_KEY]))) {
+      for (const v of variantsIn(g, n3.id)) comps.add(v.id);
     }
     if (!c) continue;
     if (!b) {
       comps.add(c);
       continue;
     }
-    const structural = b.parentId !== n.parentId || !same(dataOf(b)[COMPONENT_DATA_KEY], dataOf(n)[COMPONENT_DATA_KEY]) || !same(getComponentPropertyRefs(b), getComponentPropertyRefs(n)) || getComponentSourceId(b) !== getComponentSourceId(n) || !same(getNodeOverrides(b), getNodeOverrides(n));
-    const diff = diffOverrideGroups(b, n);
-    if (!structural && (diff.length === 0 || n.id === c && diff.every(isOwnRootGroup))) continue;
+    const structural = b.parentId !== n3.parentId || !same(dataOf(b)[COMPONENT_DATA_KEY], dataOf(n3)[COMPONENT_DATA_KEY]) || !same(getComponentPropertyRefs(b), getComponentPropertyRefs(n3)) || getComponentSourceId(b) !== getComponentSourceId(n3) || !same(getNodeOverrides(b), getNodeOverrides(n3));
+    const diff = diffOverrideGroups(b, n3);
+    if (!structural && (diff.length === 0 || n3.id === c && diff.every(isOwnRootGroup))) continue;
     comps.add(c);
   }
   for (const b of before) {
@@ -7025,7 +7030,7 @@ function syncCanvasComponents(before, after, options = {}) {
   {
     const order = (list) => {
       const m = /* @__PURE__ */ new Map();
-      for (const n of list) if (n.parentId) m.set(n.parentId, [...m.get(n.parentId) ?? [], n.id]);
+      for (const n3 of list) if (n3.parentId) m.set(n3.parentId, [...m.get(n3.parentId) ?? [], n3.id]);
       return m;
     };
     const ob = order(before);
@@ -7060,12 +7065,12 @@ function wrapInFrame(nodes, ids, frame) {
   let minY = Infinity;
   let maxX = -Infinity;
   let maxY = -Infinity;
-  for (const n of roots) {
-    const { width: width2, height: height2 } = getNodeSize(n);
-    minX = Math.min(minX, n.position.x);
-    minY = Math.min(minY, n.position.y);
-    maxX = Math.max(maxX, n.position.x + width2);
-    maxY = Math.max(maxY, n.position.y + height2);
+  for (const n3 of roots) {
+    const { width: width2, height: height2 } = getNodeSize(n3);
+    minX = Math.min(minX, n3.position.x);
+    minY = Math.min(minY, n3.position.y);
+    maxX = Math.max(maxX, n3.position.x + width2);
+    maxY = Math.max(maxY, n3.position.y + height2);
   }
   minX -= frame.padding;
   minY -= frame.padding;
@@ -7085,11 +7090,11 @@ function wrapInFrame(nodes, ids, frame) {
     ...parentId ? { parentId } : {}
   };
   const selected = new Set(ids);
-  const firstIndex = nodes.findIndex((n) => selected.has(n.id));
+  const firstIndex = nodes.findIndex((n3) => selected.has(n3.id));
   const out = [];
-  nodes.forEach((n, i) => {
+  nodes.forEach((n3, i) => {
     if (i === firstIndex) out.push(wrapper);
-    out.push(selected.has(n.id) ? { ...n, parentId: frame.id, position: { x: n.position.x - minX, y: n.position.y - minY } } : n);
+    out.push(selected.has(n3.id) ? { ...n3, parentId: frame.id, position: { x: n3.position.x - minX, y: n3.position.y - minY } } : n3);
   });
   return out;
 }
@@ -7110,7 +7115,7 @@ function createCanvasComponent(nodes, ids, options = {}) {
     const node = g.get(roots[0]);
     const frameLike = !isCanvasInstance(node) && (g.children(node.id).length > 0 || typeof node.type === "string" && frameTypes.includes(node.type) || !!getAutoLayout(node));
     if (frameLike) {
-      const after2 = nodes.map((n) => n.id === node.id ? withData(n, { ...dataOf(n), [COMPONENT_DATA_KEY]: {} }) : n);
+      const after2 = nodes.map((n3) => n3.id === node.id ? withData(n3, { ...dataOf(n3), [COMPONENT_DATA_KEY]: {} }) : n3);
       return done(nodes, after2, [node.id], options);
     }
   }
@@ -7127,7 +7132,7 @@ function combineCanvasComponentsAsVariants(nodes, ids, options = {}) {
   if (picked.some((id2) => variantSetIn(g, id2))) return fail(nodes, "invalid", "A component is already a variant of a set.");
   if (picked.some((id2) => owningInstanceIn(g, id2))) return fail(nodes, "inside-instance", "Components inside an instance can't be combined.");
   if (new Set(picked.map((id2) => g.get(id2).parentId ?? "")).size > 1) return fail(nodes, "invalid", "Select components that share a parent.");
-  const ordered = nodes.filter((n) => picked.includes(n.id)).map((n) => n.id);
+  const ordered = nodes.filter((n3) => picked.includes(n3.id)).map((n3) => n3.id);
   const first = g.get(ordered[0]);
   const firstName = getLayerName(first);
   const name = options.name ?? (firstName && !firstName.includes("=") ? firstName.split("/")[0].trim() : "Component");
@@ -7140,13 +7145,13 @@ function combineCanvasComponentsAsVariants(nodes, ids, options = {}) {
   });
   const order = [];
   for (const vid of ordered) for (const k of Object.keys(getVariantValues(g.get(vid)))) if (!order.includes(k)) order.push(k);
-  after = after.map((n) => {
-    const k = ordered.indexOf(n.id);
-    if (k < 0) return n;
-    let variant = getVariantValues(n);
+  after = after.map((n3) => {
+    const k = ordered.indexOf(n3.id);
+    if (k < 0) return n3;
+    let variant = getVariantValues(n3);
     if (Object.keys(variant).length === 0) variant = { "Property 1": k === 0 ? "Default" : `Variant${k + 1}` };
-    const comp = { ...getComponentData(n) ?? {}, variant };
-    return withData(n, { ...dataOf(n), [COMPONENT_DATA_KEY]: comp, label: formatVariantName(variant, order) });
+    const comp = { ...getComponentData(n3) ?? {}, variant };
+    return withData(n3, { ...dataOf(n3), [COMPONENT_DATA_KEY]: comp, label: formatVariantName(variant, order) });
   });
   return done(nodes, after, [id], options);
 }
@@ -7207,7 +7212,7 @@ function detachCanvasInstance(nodes, ids, options = {}) {
     delete data[COMPONENT_SOURCE_DATA_KEY];
     delete data[COMPONENT_OVERRIDES_DATA_KEY];
     updates.set(id, withData(root, data));
-    current = current.map((n) => updates.get(n.id) ?? n);
+    current = current.map((n3) => updates.get(n3.id) ?? n3);
     for (const nn of nested) current = rebaseInstance(current, nn, options.tokens);
     doneIds.push(id);
   }
@@ -7221,10 +7226,10 @@ function resetCanvasInstanceOverrides(nodes, id, group, options = {}) {
   if (!node || !inst) return fail(nodes, "not-found", "Select an instance or a layer inside one.");
   const top = inst === id && enclosingInstanceIn(g, id) === void 0;
   const updates = /* @__PURE__ */ new Map();
-  const resetProps = (n) => {
-    const data = getInstanceData(n);
+  const resetProps = (n3) => {
+    const data = getInstanceData(n3);
     const defaults = effectivePropsIn(g, data.componentId, void 0);
-    return same(data.properties ?? {}, defaults) ? n : withData(n, { ...dataOf(n), [INSTANCE_DATA_KEY]: { ...data, properties: defaults } });
+    return same(data.properties ?? {}, defaults) ? n3 : withData(n3, { ...dataOf(n3), [INSTANCE_DATA_KEY]: { ...data, properties: defaults } });
   };
   if (group !== void 0) {
     let next = setOverrides(node, getNodeOverrides(node).filter((gr) => gr !== group));
@@ -7232,14 +7237,14 @@ function resetCanvasInstanceOverrides(nodes, id, group, options = {}) {
     updates.set(id, next);
   } else if (inst === id) {
     for (const d of g.subtree(id)) {
-      const n = g.get(d);
-      const keep = d === id && top ? getNodeOverrides(n).filter((gr) => gr === "size") : [];
-      updates.set(d, setOverrides(n, keep));
+      const n3 = g.get(d);
+      const keep = d === id && top ? getNodeOverrides(n3).filter((gr) => gr === "size") : [];
+      updates.set(d, setOverrides(n3, keep));
     }
     if (top) updates.set(id, resetProps(updates.get(id)));
   } else updates.set(id, setOverrides(node, []));
-  const after = nodes.map((n) => updates.get(n.id) ?? n);
-  const changed = after.some((n, i) => n !== nodes[i]);
+  const after = nodes.map((n3) => updates.get(n3.id) ?? n3);
+  const changed = after.some((n3, i) => n3 !== nodes[i]);
   if (!changed) return { ok: true, nodes, ids: [] };
   const synced = syncCanvasComponents(nodes, after, options);
   return { ok: true, nodes: synced, ids: [inst] };
@@ -7253,21 +7258,21 @@ function pushCanvasInstanceOverrides(nodes, id, options = {}) {
   const updates = /* @__PURE__ */ new Map();
   let pushed = 0;
   for (const d of g.subtree(inst)) {
-    const n = g.get(d);
-    const overrides = getNodeOverrides(n);
+    const n3 = g.get(d);
+    const overrides = getNodeOverrides(n3);
     if (overrides.length === 0) continue;
-    const src = d === inst ? compId : getComponentSourceId(n);
+    const src = d === inst ? compId : getComponentSourceId(n3);
     if (!src || !g.get(src) || src !== compId && !g.isAncestor(compId, src)) continue;
     const groups = overrides.filter(
       (gr) => gr !== "size" && gr !== "position" && gr !== "component" && gr !== "props" && !(d === inst && (gr === "data.label" || gr === "data.name" || isOwnRootGroup(gr)))
     );
     if (groups.length === 0) continue;
     pushed++;
-    updates.set(src, copyGroups(n, updates.get(src) ?? g.get(src), groups));
-    updates.set(d, setOverrides(n, overrides.filter((gr) => !groups.includes(gr))));
+    updates.set(src, copyGroups(n3, updates.get(src) ?? g.get(src), groups));
+    updates.set(d, setOverrides(n3, overrides.filter((gr) => !groups.includes(gr))));
   }
   if (pushed === 0) return fail(nodes, "no-overrides", "The instance has no changes to push.");
-  const after = nodes.map((n) => updates.get(n.id) ?? n);
+  const after = nodes.map((n3) => updates.get(n3.id) ?? n3);
   return done(nodes, after, [inst], options);
 }
 function swapCanvasInstance(nodes, ids, componentId, options = {}) {
@@ -7277,14 +7282,14 @@ function swapCanvasInstance(nodes, ids, componentId, options = {}) {
   const updates = /* @__PURE__ */ new Map();
   const list = [...new Set(ids)];
   for (const id of list) {
-    const n = g.get(id);
-    const inst = getInstanceData(n);
-    if (!n || !inst) return fail(nodes, "invalid", `"${id}" is not an instance.`);
-    if (g.isAncestor(main, id) || createsCycleIn(g, main, n.parentId)) return fail(nodes, "cycle", "An instance can't show the component it is inside.");
+    const n3 = g.get(id);
+    const inst = getInstanceData(n3);
+    if (!n3 || !inst) return fail(nodes, "invalid", `"${id}" is not an instance.`);
+    if (g.isAncestor(main, id) || createsCycleIn(g, main, n3.parentId)) return fail(nodes, "cycle", "An instance can't show the component it is inside.");
     const defaults = effectivePropsIn(g, main, void 0);
     const properties = {};
     for (const [k, d] of Object.entries(defaults)) properties[k] = inst.properties?.[k] !== void 0 && typeof inst.properties[k] === typeof d ? inst.properties[k] : d;
-    updates.set(id, withData(n, { ...dataOf(n), [INSTANCE_DATA_KEY]: { ...inst, componentId: main, properties } }));
+    updates.set(id, withData(n3, { ...dataOf(n3), [INSTANCE_DATA_KEY]: { ...inst, componentId: main, properties } }));
     if (options.keepTextOverridesOnly) {
       for (const d of g.subtree(id)) {
         const layer = updates.get(d) ?? g.get(d);
@@ -7295,7 +7300,7 @@ function swapCanvasInstance(nodes, ids, componentId, options = {}) {
     }
   }
   if (list.length === 0) return fail(nodes, "invalid", "Select an instance.");
-  const after = nodes.map((n) => updates.get(n.id) ?? n);
+  const after = nodes.map((n3) => updates.get(n3.id) ?? n3);
   return done(nodes, after, list, options);
 }
 function setCanvasInstanceProperties(nodes, ids, properties, options = {}) {
@@ -7304,9 +7309,9 @@ function setCanvasInstanceProperties(nodes, ids, properties, options = {}) {
   const list = [...new Set(ids)];
   if (list.length === 0) return fail(nodes, "invalid", "Select an instance.");
   for (const id of list) {
-    const n = g.get(id);
-    const inst = getInstanceData(n);
-    if (!n || !inst) return fail(nodes, "invalid", `"${id}" is not an instance.`);
+    const n3 = g.get(id);
+    const inst = getInstanceData(n3);
+    if (!n3 || !inst) return fail(nodes, "invalid", `"${id}" is not an instance.`);
     const set = variantSetIn(g, inst.componentId);
     const options_ = set ? variantOptionsIn(g, set.id) : [];
     const wanted = { ...getVariantValues(g.get(inst.componentId)) };
@@ -7339,16 +7344,16 @@ function setCanvasInstanceProperties(nodes, ids, properties, options = {}) {
       } else {
         const main = typeof v === "string" ? mainOfIn(g, v) : void 0;
         if (!main) return fail(nodes, "type-mismatch", `"${k}" takes a component id.`);
-        if (main === target || componentDepsIn(g, main).has(target) || createsCycleIn(g, main, n.parentId)) {
+        if (main === target || componentDepsIn(g, main).has(target) || createsCycleIn(g, main, n3.parentId)) {
           return fail(nodes, "cycle", `"${k}" can't show a component that contains this one.`);
         }
         values[k] = main;
       }
     }
     const properties2 = effectivePropsIn(g, target, values);
-    updates.set(id, withData(n, { ...dataOf(n), [INSTANCE_DATA_KEY]: { ...inst, componentId: target, properties: properties2 } }));
+    updates.set(id, withData(n3, { ...dataOf(n3), [INSTANCE_DATA_KEY]: { ...inst, componentId: target, properties: properties2 } }));
   }
-  const after = nodes.map((n) => updates.get(n.id) ?? n);
+  const after = nodes.map((n3) => updates.get(n3.id) ?? n3);
   return done(nodes, after, list, options);
 }
 function setCanvasComponentProperty(nodes, componentId, name, def, options = {}) {
@@ -7384,8 +7389,8 @@ function setCanvasComponentProperty(nodes, componentId, name, def, options = {})
   if (renamed !== name) {
     for (const c of comps) {
       for (const d of g.subtree(c)) {
-        const n = updates.get(d) ?? g.get(d);
-        const refs = { ...getComponentPropertyRefs(n) };
+        const n3 = updates.get(d) ?? g.get(d);
+        const refs = { ...getComponentPropertyRefs(n3) };
         let touched = false;
         for (const [field, prop] of Object.entries(refs)) {
           if (prop !== name) continue;
@@ -7394,23 +7399,23 @@ function setCanvasComponentProperty(nodes, componentId, name, def, options = {})
           else refs[field] = renamed;
         }
         if (!touched) continue;
-        const data = { ...dataOf(n), [COMPONENT_PROPERTY_REFS_DATA_KEY]: refs };
+        const data = { ...dataOf(n3), [COMPONENT_PROPERTY_REFS_DATA_KEY]: refs };
         if (Object.keys(refs).length === 0) delete data[COMPONENT_PROPERTY_REFS_DATA_KEY];
-        updates.set(d, withData(n, data));
+        updates.set(d, withData(n3, data));
       }
     }
-    for (const n of nodes) {
-      const inst = getInstanceData(n);
+    for (const n3 of nodes) {
+      const inst = getInstanceData(n3);
       if (!inst || !comps.includes(inst.componentId) || !inst.properties || !(name in inst.properties)) continue;
       const props = { ...inst.properties };
       const v = props[name];
       delete props[name];
       if (renamed !== null) props[renamed] = v;
-      const cur = updates.get(n.id) ?? n;
-      updates.set(n.id, withData(cur, { ...dataOf(cur), [INSTANCE_DATA_KEY]: { ...inst, properties: props } }));
+      const cur = updates.get(n3.id) ?? n3;
+      updates.set(n3.id, withData(cur, { ...dataOf(cur), [INSTANCE_DATA_KEY]: { ...inst, properties: props } }));
     }
   }
-  const after = nodes.map((n) => updates.get(n.id) ?? n);
+  const after = nodes.map((n3) => updates.get(n3.id) ?? n3);
   return done(nodes, after, [owner.id], options);
 }
 function bindCanvasComponentProperty(nodes, layerId, field, name, options = {}) {
@@ -7432,7 +7437,7 @@ function bindCanvasComponentProperty(nodes, layerId, field, name, options = {})
   const data = { ...dataOf(layer) };
   if (Object.keys(refs).length) data[COMPONENT_PROPERTY_REFS_DATA_KEY] = refs;
   else delete data[COMPONENT_PROPERTY_REFS_DATA_KEY];
-  const after = nodes.map((n) => n.id === layerId ? withData(n, data) : n);
+  const after = nodes.map((n3) => n3.id === layerId ? withData(n3, data) : n3);
   return done(nodes, after, [layerId], options);
 }
 function restoreCanvasMainComponent(nodes, id, options = {}) {
@@ -7444,7 +7449,7 @@ function restoreCanvasMainComponent(nodes, id, options = {}) {
   const compId = inst.componentId;
   const sub = g.subtree(id);
   const map = /* @__PURE__ */ new Map([[id, compId]]);
-  const taken = new Set(nodes.map((n) => n.id));
+  const taken = new Set(nodes.map((n3) => n3.id));
   taken.add(compId);
   for (const d of sub) {
     if (d === id) continue;
@@ -7457,10 +7462,10 @@ function restoreCanvasMainComponent(nodes, id, options = {}) {
   const nested = [];
   const replaced = /* @__PURE__ */ new Map();
   for (const d of sub) {
-    let n = g.get(d);
+    let n3 = g.get(d);
     const nid = map.get(d) ?? d;
-    const parentId = n.parentId !== void 0 ? map.get(n.parentId) ?? n.parentId : void 0;
-    n = { ...n, id: nid, ...parentId !== void 0 ? { parentId } : {} };
+    const parentId = n3.parentId !== void 0 ? map.get(n3.parentId) ?? n3.parentId : void 0;
+    n3 = { ...n3, id: nid, ...parentId !== void 0 ? { parentId } : {} };
     if (d === id) {
       const defs = {};
       for (const [k, v] of Object.entries(inst.properties ?? {})) {
@@ -7468,19 +7473,19 @@ function restoreCanvasMainComponent(nodes, id, options = {}) {
         else if (typeof v === "string" && isCanvasComponent(g.get(v))) defs[k] = { type: "instanceSwap", default: v };
         else if (typeof v === "string") defs[k] = { type: "text", default: v };
       }
-      const data = { ...dataOf(n) };
+      const data = { ...dataOf(n3) };
       delete data[INSTANCE_DATA_KEY];
       delete data[COMPONENT_SOURCE_DATA_KEY];
       delete data[COMPONENT_OVERRIDES_DATA_KEY];
       data[COMPONENT_DATA_KEY] = Object.keys(defs).length ? { properties: defs } : {};
-      n = withData(n, data);
+      n3 = withData(n3, data);
     } else if (enclosingInstanceIn(g, d) === id) {
-      if (isCanvasInstance(n)) nested.push(nid);
-      else n = unlinked(n);
+      if (isCanvasInstance(n3)) nested.push(nid);
+      else n3 = unlinked(n3);
     }
-    replaced.set(d, n);
+    replaced.set(d, n3);
   }
-  let after = nodes.map((n) => replaced.get(n.id) ?? n);
+  let after = nodes.map((n3) => replaced.get(n3.id) ?? n3);
   for (const nn of nested) after = rebaseInstance(after, nn, options.tokens);
   return done(nodes, after, [compId], options);
 }
@@ -7588,7 +7593,7 @@ function getNextVariantValues(nodes, setId, from) {
   return nextVariantValuesIn(g, setId, from ?? defaultVariantIn(g, setId));
 }
 function relayoutSet(nodes, setId, options) {
-  if (options.layout === false || !getAutoLayout(nodes.find((n) => n.id === setId))) return nodes;
+  if (options.layout === false || !getAutoLayout(nodes.find((n3) => n3.id === setId))) return nodes;
   return applyNodeUpdates(nodes, layoutUpMany(nodes, [setId], typeof options.layout === "object" ? options.layout : {}));
 }
 function addCanvasVariant(nodes, setId, options = {}) {
@@ -7632,23 +7637,23 @@ function addCanvasVariant(nodes, setId, options = {}) {
   }
   const order = variantOrder([...edit.variants.map((v) => v.id), id], edit.values);
   const subSet = new Set(sub);
-  const copies = nodes.filter((n) => subSet.has(n.id)).map((n) => {
-    const next = { ...n, id: map.get(n.id) };
-    if (n.parentId !== void 0 && n.id !== fromId) next.parentId = map.get(n.parentId) ?? n.parentId;
+  const copies = nodes.filter((n3) => subSet.has(n3.id)).map((n3) => {
+    const next = { ...n3, id: map.get(n3.id) };
+    if (n3.parentId !== void 0 && n3.id !== fromId) next.parentId = map.get(n3.parentId) ?? n3.parentId;
     for (const k of RUNTIME_KEYS) delete next[k];
-    if (n.id !== fromId) return next;
+    if (n3.id !== fromId) return next;
     next.position = position;
     return withVariantValues(next, edit.values.get(id), order);
   });
   const updates = writeVariantEdit(edit, [id]);
   const inSet = new Set(g.subtree(setId));
   let last = -1;
-  nodes.forEach((n, i) => {
-    if (inSet.has(n.id)) last = i;
+  nodes.forEach((n3, i) => {
+    if (inSet.has(n3.id)) last = i;
   });
   let after = [];
-  nodes.forEach((n, i) => {
-    after.push(updates.get(n.id) ?? n);
+  nodes.forEach((n3, i) => {
+    after.push(updates.get(n3.id) ?? n3);
     if (i === last) after.push(...copies);
   });
   if (autoLayout && !options.position) after = relayoutSet(after, setId, options);
@@ -7669,10 +7674,10 @@ function removeCanvasVariant(nodes, variantId, options = {}) {
   if (others.length === 0) return fail(nodes, "invalid", "A component set needs at least one variant: delete the set instead.");
   const replacement = closestVariant(others, getVariantValues(g.get(variantId)));
   const swap = (v) => v === variantId ? replacement : v;
-  const repointed = nodes.map((n) => {
-    const data = dataOf(n);
+  const repointed = nodes.map((n3) => {
+    const data = dataOf(n3);
     let next;
-    const inst = getInstanceData(n);
+    const inst = getInstanceData(n3);
     if (inst) {
       const moved = { ...inst, componentId: swap(inst.componentId) };
       if (inst.properties) moved.properties = Object.fromEntries(Object.entries(inst.properties).map(([k, v]) => [k, swap(v)]));
@@ -7687,12 +7692,12 @@ function removeCanvasVariant(nodes, variantId, options = {}) {
       }
       if (!same(defs, owner.properties)) next = { ...next ?? data, [key]: { ...owner, properties: defs } };
     }
-    return next ? withData(n, next) : n;
+    return next ? withData(n3, next) : n3;
   });
   const mid = syncCanvasComponents(nodes, repointed, options);
   const gone = new Set(new Graph(mid).subtree(variantId));
   const after = relayoutSet(
-    mid.filter((n) => !gone.has(n.id)),
+    mid.filter((n3) => !gone.has(n3.id)),
     set.id,
     options
   );
@@ -7713,17 +7718,17 @@ function setCanvasVariantProperties(nodes, variantId, values, options = {}) {
   if (dup) return fail(nodes, "invalid", `A variant with ${dup} exists already.`);
   const updates = writeVariantEdit(edit);
   if (updates.size === 0) return { ok: true, nodes, ids: [variantId] };
-  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [variantId], options);
+  return done(nodes, nodes.map((n3) => updates.get(n3.id) ?? n3), [variantId], options);
 }
 function updateInstanceValues(g, setId, updates, fn) {
   const ids = new Set(variantsIn(g, setId).map((v) => v.id));
-  for (const n of g.nodes) {
-    const inst = getInstanceData(n);
+  for (const n3 of g.nodes) {
+    const inst = getInstanceData(n3);
     if (!inst?.properties || !ids.has(inst.componentId)) continue;
     const props = fn({ ...inst.properties });
     if (same(props, inst.properties)) continue;
-    const cur = updates.get(n.id) ?? n;
-    updates.set(n.id, withData(cur, { ...dataOf(cur), [INSTANCE_DATA_KEY]: { ...inst, properties: props } }));
+    const cur = updates.get(n3.id) ?? n3;
+    updates.set(n3.id, withData(cur, { ...dataOf(cur), [INSTANCE_DATA_KEY]: { ...inst, properties: props } }));
   }
 }
 function renameCanvasVariantProperty(nodes, setId, name, newName, options = {}) {
@@ -7742,7 +7747,7 @@ function renameCanvasVariantProperty(nodes, setId, name, newName, options = {})
   for (const [id, v] of edit.values) edit.values.set(id, rename(v));
   const updates = writeVariantEdit(edit);
   updateInstanceValues(g, setId, updates, (props) => name in props ? rename(props) : props);
-  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [setId], options);
+  return done(nodes, nodes.map((n3) => updates.get(n3.id) ?? n3), [setId], options);
 }
 function renameCanvasVariantValue(nodes, setId, property, value, newValue, options = {}) {
   const g = new Graph(nodes);
@@ -7765,34 +7770,34 @@ function renameCanvasVariantValue(nodes, setId, property, value, newValue, optio
   if (dup) return fail(nodes, "invalid", `A variant with ${dup} exists already.`);
   const updates = writeVariantEdit(edit);
   updateInstanceValues(g, setId, updates, (props) => props[property] === value ? { ...props, [property]: to } : props);
-  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [setId], options);
+  return done(nodes, nodes.map((n3) => updates.get(n3.id) ?? n3), [setId], options);
 }
 
 // src/canvas/componentsController.ts
 function makePatch(from, to) {
-  const fromIds = new Map(from.map((n) => [n.id, n]));
-  const toIds = new Set(to.map((n) => n.id));
+  const fromIds = new Map(from.map((n3) => [n3.id, n3]));
+  const toIds = new Set(to.map((n3) => n3.id));
   const changes = /* @__PURE__ */ new Map();
-  for (const n of to) if (fromIds.get(n.id) !== n) changes.set(n.id, n);
-  for (const n of from) if (!toIds.has(n.id)) changes.set(n.id, null);
-  return { changes, order: to.map((n) => n.id) };
+  for (const n3 of to) if (fromIds.get(n3.id) !== n3) changes.set(n3.id, n3);
+  for (const n3 of from) if (!toIds.has(n3.id)) changes.set(n3.id, null);
+  return { changes, order: to.map((n3) => n3.id) };
 }
 function applyPatch(current, patch) {
-  const byId = new Map(current.map((n) => [n.id, n]));
-  for (const [id, n] of patch.changes) {
-    if (n) byId.set(id, n);
+  const byId = new Map(current.map((n3) => [n3.id, n3]));
+  for (const [id, n3] of patch.changes) {
+    if (n3) byId.set(id, n3);
     else byId.delete(id);
   }
   const out = [];
   const placed = /* @__PURE__ */ new Set();
   for (const id of patch.order) {
-    const n = byId.get(id);
-    if (n && !placed.has(id)) {
-      out.push(n);
+    const n3 = byId.get(id);
+    if (n3 && !placed.has(id)) {
+      out.push(n3);
       placed.add(id);
     }
   }
-  for (const n of current) if (!placed.has(n.id) && byId.has(n.id)) out.push(byId.get(n.id));
+  for (const n3 of current) if (!placed.has(n3.id) && byId.has(n3.id)) out.push(byId.get(n3.id));
   return out;
 }
 function createCanvasComponentsController(options) {
@@ -7803,7 +7808,7 @@ function createCanvasComponentsController(options) {
     layout: options.layout,
     tokens: options.tokens
   });
-  const selection = (ids) => ids ? [...ids] : options.getSelectedIds?.() ?? options.getNodes().filter((n) => n.selected).map((n) => n.id);
+  const selection = (ids) => ids ? [...ids] : options.getSelectedIds?.() ?? options.getNodes().filter((n3) => n3.selected).map((n3) => n3.id);
   const target = (id) => id ?? selection()[0];
   function set(next) {
     synced = next;
@@ -7837,7 +7842,7 @@ function createCanvasComponentsController(options) {
   const refused = (why) => ({ ok: false, nodes: nodes(), code: "not-found", reason: why });
   const setOf = (id) => {
     const at = target(id);
-    const node = at ? nodes().find((n) => n.id === at) : void 0;
+    const node = at ? nodes().find((n3) => n3.id === at) : void 0;
     if (!node) return void 0;
     return isCanvasComponentSet(node) ? node.id : getVariantSet(nodes(), node.id);
   };
@@ -7864,22 +7869,22 @@ function createCanvasComponentsController(options) {
     /** Create Component from `ids` (default: the selection). */
     createComponent(ids, createOptions = {}) {
       const list = selection(ids);
-      return run("Create Component", (n) => createCanvasComponent(n, list, { ...syncOptions(), ...createOptions }));
+      return run("Create Component", (n3) => createCanvasComponent(n3, list, { ...syncOptions(), ...createOptions }));
     },
     canCreateComponent: (ids) => reason(createCanvasComponent(nodes(), selection(ids), { layout: false })),
     /** Combine as Variants: wraps the selected components in a component set. */
     combineAsVariants(ids, combineOptions = {}) {
       const list = selection(ids);
-      return run("Combine as Variants", (n) => combineCanvasComponentsAsVariants(n, list, { ...syncOptions(), ...combineOptions }));
+      return run("Combine as Variants", (n3) => combineCanvasComponentsAsVariants(n3, list, { ...syncOptions(), ...combineOptions }));
     },
     canCombineAsVariants: (ids) => reason(combineCanvasComponentsAsVariants(nodes(), selection(ids), { layout: false })),
     /** Create Instance of a component or component set. */
     createInstance(componentId, createOptions = {}) {
-      return run("Create Instance", (n) => createCanvasInstance(n, componentId, { ...syncOptions(), ...createOptions }));
+      return run("Create Instance", (n3) => createCanvasInstance(n3, componentId, { ...syncOptions(), ...createOptions }));
     },
     canCreateInstance(componentId, parentId) {
       const list = nodes();
-      const target2 = componentId ? list.find((n) => n.id === componentId) : void 0;
+      const target2 = componentId ? list.find((n3) => n3.id === componentId) : void 0;
       if (!target2 || !isCanvasComponent(target2) && !isCanvasComponentSet(target2)) return "Choose a component or component set.";
       if (wouldCreateComponentCycle(list, componentId, parentId)) return "An instance can't be placed inside its own main component.";
       if (parentId && getOwningInstance(list, parentId)) return "Instances can't gain layers: place it outside the instance.";
@@ -7888,11 +7893,11 @@ function createCanvasComponentsController(options) {
     /** Detach Instance (default: the selected instances). */
     detachInstance(ids) {
       const list = selection(ids);
-      return run("Detach Instance", (n) => detachCanvasInstance(n, list, syncOptions()));
+      return run("Detach Instance", (n3) => detachCanvasInstance(n3, list, syncOptions()));
     },
     canDetachInstance(ids) {
       const list = nodes();
-      const instances = selection(ids).filter((id) => getInstanceData(list.find((n) => n.id === id)));
+      const instances = selection(ids).filter((id) => getInstanceData(list.find((n3) => n3.id === id)));
       if (instances.length === 0) return "Select an instance.";
       if (instances.some((id) => isInsideInstance(list, id))) return "A nested instance can't be detached on its own: detach the outer instance first.";
       return true;
@@ -7901,21 +7906,21 @@ function createCanvasComponentsController(options) {
     resetOverrides(id, group) {
       const at = target(id);
       if (!at) return { ok: false, nodes: nodes(), code: "not-found", reason: "Select an instance or a layer inside one." };
-      return run(group ? "Reset Override" : "Reset All Changes", (n) => resetCanvasInstanceOverrides(n, at, group, syncOptions()));
+      return run(group ? "Reset Override" : "Reset All Changes", (n3) => resetCanvasInstanceOverrides(n3, at, group, syncOptions()));
     },
     canResetOverrides(id) {
       const at = target(id);
       const info = at ? inspectCanvasInstance(nodes(), at) : void 0;
       if (!info) return "Select an instance or a layer inside one.";
       const changedProps = !info.nested && info.properties.some((p) => p.value !== p.default);
-      const own = info.id === at ? info.overrides.length > 0 : getNodeOverrides(nodes().find((n) => n.id === at)).length > 0;
+      const own = info.id === at ? info.overrides.length > 0 : getNodeOverrides(nodes().find((n3) => n3.id === at)).length > 0;
       return own || info.id === at && changedProps ? true : "No overrides to reset.";
     },
     /** Push the (outermost) instance's overrides to its main component. */
     pushOverrides(id) {
       const at = target(id);
       if (!at) return { ok: false, nodes: nodes(), code: "not-found", reason: "Select an instance." };
-      return run("Push Changes to Main Component", (n) => pushCanvasInstanceOverrides(n, at, syncOptions()));
+      return run("Push Changes to Main Component", (n3) => pushCanvasInstanceOverrides(n3, at, syncOptions()));
     },
     canPushOverrides(id) {
       const at = target(id);
@@ -7924,17 +7929,17 @@ function createCanvasComponentsController(options) {
     /** Swap the selected instances to another component (or a set's default variant). */
     swapInstance(componentId, ids, swapOptions = {}) {
       const list = selection(ids);
-      return run("Swap Instance", (n) => swapCanvasInstance(n, list, componentId, { ...syncOptions(), ...swapOptions }));
+      return run("Swap Instance", (n3) => swapCanvasInstance(n3, list, componentId, { ...syncOptions(), ...swapOptions }));
     },
     canSwapInstance(componentId, ids) {
       const list = nodes();
-      const instances = selection(ids).filter((id) => getInstanceData(list.find((n) => n.id === id)));
+      const instances = selection(ids).filter((id) => getInstanceData(list.find((n3) => n3.id === id)));
       if (instances.length === 0) return "Select an instance.";
       if (componentId === void 0) return true;
-      const main = list.find((n) => n.id === componentId);
+      const main = list.find((n3) => n3.id === componentId);
       if (!main || !isCanvasComponent(main) && !isCanvasComponentSet(main)) return "Choose a component or component set.";
       for (const id of instances) {
-        const node = list.find((n) => n.id === id);
+        const node = list.find((n3) => n3.id === id);
         if (wouldCreateComponentCycle(list, componentId, node.parentId)) return "An instance can't show the component it is inside.";
       }
       return true;
@@ -7942,18 +7947,18 @@ function createCanvasComponentsController(options) {
     /** Set variant / component property values on the selected instances (one step). */
     setInstanceProperties(properties, ids) {
       const list = selection(ids);
-      return run("Set Instance Properties", (n) => setCanvasInstanceProperties(n, list, properties, syncOptions()));
+      return run("Set Instance Properties", (n3) => setCanvasInstanceProperties(n3, list, properties, syncOptions()));
     },
     canSetInstanceProperties(ids) {
       const list = nodes();
       const sel = selection(ids);
-      return sel.length > 0 && sel.every((id) => getInstanceData(list.find((n) => n.id === id))) ? true : "Select instances.";
+      return sel.length > 0 && sel.every((id) => getInstanceData(list.find((n3) => n3.id === id))) ? true : "Select instances.";
     },
     /** Restore Main Component from an instance whose main was deleted. */
     restoreMainComponent(id) {
       const at = target(id);
       if (!at) return { ok: false, nodes: nodes(), code: "not-found", reason: "Select an instance." };
-      return run("Restore Main Component", (n) => restoreCanvasMainComponent(n, at, syncOptions()));
+      return run("Restore Main Component", (n3) => restoreCanvasMainComponent(n3, at, syncOptions()));
     },
     canRestoreMainComponent(id) {
       const at = target(id);
@@ -7963,7 +7968,7 @@ function createCanvasComponentsController(options) {
     setComponentProperty(componentId, name, def, propertyOptions = {}) {
       return run(
         def ? "Edit Component Property" : "Delete Component Property",
-        (n) => setCanvasComponentProperty(n, componentId, name, def, { ...syncOptions(), ...propertyOptions })
+        (n3) => setCanvasComponentProperty(n3, componentId, name, def, { ...syncOptions(), ...propertyOptions })
       );
     },
     /**
@@ -7974,7 +7979,7 @@ function createCanvasComponentsController(options) {
       const set2 = setOf(setId);
       if (!set2) return refused(NO_SET);
       const opts = addOptions(setId, variantOptions);
-      return run("Add Variant", (n) => addCanvasVariant(n, set2, { ...syncOptions(), ...opts }));
+      return run("Add Variant", (n3) => addCanvasVariant(n3, set2, { ...syncOptions(), ...opts }));
     },
     canAddVariant(setId, variantOptions = {}) {
       const set2 = setOf(setId);
@@ -7984,7 +7989,7 @@ function createCanvasComponentsController(options) {
     removeVariant(variantId) {
       const v = variantOf(variantId);
       if (!v) return refused(NO_VARIANT);
-      return run("Remove Variant", (n) => removeCanvasVariant(n, v, syncOptions()));
+      return run("Remove Variant", (n3) => removeCanvasVariant(n3, v, syncOptions()));
     },
     canRemoveVariant(variantId) {
       const v = variantOf(variantId);
@@ -7994,7 +7999,7 @@ function createCanvasComponentsController(options) {
     setVariantProperties(values, variantId, variantOptions = {}) {
       const v = variantOf(variantId);
       if (!v) return refused(NO_VARIANT);
-      return run("Edit Variant", (n) => setCanvasVariantProperties(n, v, values, { ...syncOptions(), ...variantOptions }));
+      return run("Edit Variant", (n3) => setCanvasVariantProperties(n3, v, values, { ...syncOptions(), ...variantOptions }));
     },
     canSetVariantProperties(values, variantId) {
       const v = variantOf(variantId);
@@ -8005,7 +8010,7 @@ function createCanvasComponentsController(options) {
     renameVariantProperty(name, newName, setId) {
       const set2 = setOf(setId);
       if (!set2) return refused(NO_SET);
-      return run("Rename Variant Property", (n) => renameCanvasVariantProperty(n, set2, name, newName, syncOptions()));
+      return run("Rename Variant Property", (n3) => renameCanvasVariantProperty(n3, set2, name, newName, syncOptions()));
     },
     canRenameVariantProperty(name, newName, setId) {
       const set2 = setOf(setId);
@@ -8016,7 +8021,7 @@ function createCanvasComponentsController(options) {
     renameVariantValue(property, value, newValue, setId) {
       const set2 = setOf(setId);
       if (!set2) return refused(NO_SET);
-      return run("Rename Variant Value", (n) => renameCanvasVariantValue(n, set2, property, value, newValue, syncOptions()));
+      return run("Rename Variant Value", (n3) => renameCanvasVariantValue(n3, set2, property, value, newValue, syncOptions()));
     },
     canRenameVariantValue(property, value, newValue, setId) {
       const set2 = setOf(setId);
@@ -8025,19 +8030,19 @@ function createCanvasComponentsController(options) {
     },
     /** Binds (or with `null` unbinds) a main layer's field to a component property. */
     bindComponentProperty(layerId, field, name) {
-      return run("Bind Component Property", (n) => bindCanvasComponentProperty(n, layerId, field, name, syncOptions()));
+      return run("Bind Component Property", (n3) => bindCanvasComponentProperty(n3, layerId, field, name, syncOptions()));
     },
     /** Selects the main component of an instance (or of the instance a layer is in). */
     goToMainComponent(id) {
       const at = target(id);
       const list = sync();
       const inst = at ? getOwningInstance(list, at) : void 0;
-      const main = inst ? getInstanceData(list.find((n) => n.id === inst))?.componentId : void 0;
-      const node = main ? list.find((n) => n.id === main) : void 0;
+      const main = inst ? getInstanceData(list.find((n3) => n3.id === inst))?.componentId : void 0;
+      const node = main ? list.find((n3) => n3.id === main) : void 0;
       if (!node) return void 0;
-      const next = list.map((n) => !!n.selected === (n.id === main) ? n : { ...n, selected: n.id === main });
+      const next = list.map((n3) => !!n3.selected === (n3.id === main) ? n3 : { ...n3, selected: n3.id === main });
       set(next);
-      options.onReveal?.(next.find((n) => n.id === main));
+      options.onReveal?.(next.find((n3) => n3.id === main));
       return main;
     },
     canGoToMainComponent(id) {
@@ -8045,8 +8050,8 @@ function createCanvasComponentsController(options) {
       const list = nodes();
       const inst = at ? getOwningInstance(list, at) : void 0;
       if (!inst) return "Select an instance.";
-      const main = getInstanceData(list.find((n) => n.id === inst)).componentId;
-      return list.some((n) => n.id === main) ? true : "The main component was deleted.";
+      const main = getInstanceData(list.find((n3) => n3.id === inst)).componentId;
+      return list.some((n3) => n3.id === main) ? true : "The main component was deleted.";
     },
     /** Components and component sets, for a components panel. */
     list: () => listCanvasComponents(nodes()),
@@ -8182,20 +8187,20 @@ function findStrokesAtPoint(point, nodes, radius = 12) {
   for (const node of nodes) {
     const shape = getNodeShape(node);
     if (!shape || shape.kind !== "path") continue;
-    const rect = getNodeRect(node);
+    const rect2 = getNodeRect(node);
     const strokeWidth = shape.strokeWidth ?? 2;
     const effectiveRadius = radius + strokeWidth / 2;
-    if (point[0] < rect.x - effectiveRadius || point[0] > rect.x + rect.width + effectiveRadius || point[1] < rect.y - effectiveRadius || point[1] > rect.y + rect.height + effectiveRadius) {
+    if (point[0] < rect2.x - effectiveRadius || point[0] > rect2.x + rect2.width + effectiveRadius || point[1] < rect2.y - effectiveRadius || point[1] > rect2.y + rect2.height + effectiveRadius) {
       continue;
     }
-    const localPoint = [point[0] - rect.x, point[1] - rect.y];
+    const localPoint = [point[0] - rect2.x, point[1] - rect2.y];
     try {
       const dist = distanceToBezierPath(shape.d, localPoint);
       if (dist <= effectiveRadius) {
         matches2.push(node);
       }
     } catch {
-      if (point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height) {
+      if (point[0] >= rect2.x && point[0] <= rect2.x + rect2.width && point[1] >= rect2.y && point[1] <= rect2.y + rect2.height) {
         matches2.push(node);
       }
     }
@@ -8269,7 +8274,7 @@ function createCanvasDrawController(options) {
         options.history.execute({
           name: "Erase strokes",
           execute: () => {
-            const remaining = options.getNodes().filter((n) => !erasedIds.has(n.id));
+            const remaining = options.getNodes().filter((n3) => !erasedIds.has(n3.id));
             options.setNodes(remaining);
           },
           undo: () => {
@@ -8301,7 +8306,7 @@ function createCanvasDrawController(options) {
           options.setNodes([...options.getNodes(), node]);
         },
         undo: () => {
-          options.setNodes(options.getNodes().filter((n) => n.id !== node.id));
+          options.setNodes(options.getNodes().filter((n3) => n3.id !== node.id));
         }
       });
     } else {
@@ -8333,15 +8338,15 @@ function createCanvasDrawController(options) {
     const newlyErased = [];
     for (const candidate of candidates) {
       if (erasedInDrag.has(candidate.id) || isLocked(candidate)) continue;
-      const index = nodes.findIndex((n) => n.id === candidate.id);
+      const index = nodes.findIndex((n3) => n3.id === candidate.id);
       if (index !== -1) {
         erasedInDrag.set(candidate.id, { node: candidate, index });
         newlyErased.push(candidate);
       }
     }
     if (newlyErased.length > 0) {
-      const erasedSet = new Set(newlyErased.map((n) => n.id));
-      const nextNodes = nodes.filter((n) => !erasedSet.has(n.id));
+      const erasedSet = new Set(newlyErased.map((n3) => n3.id));
+      const nextNodes = nodes.filter((n3) => !erasedSet.has(n3.id));
       options.setNodes(nextNodes);
       options.onNodesErase?.(newlyErased);
     }
@@ -8370,6 +8375,969 @@ function createCanvasDrawController(options) {
   };
 }
 
+// src/canvas/mermaid/layout.ts
+import dagre2 from "@dagrejs/dagre";
+var DEFAULT_DIAGRAM_NODE_WIDTH = 160;
+var DEFAULT_DIAGRAM_NODE_HEIGHT = 56;
+function estimateDiagramNodeSize(node) {
+  const lines = String(node.label ?? node.id).split(/<br\s*\/?>|\n/);
+  const longest = Math.max(...lines.map((l) => l.replace(/<[^>]+>/g, "").length), 1);
+  let width = Math.min(360, Math.max(DEFAULT_DIAGRAM_NODE_WIDTH, longest * 8 + 48));
+  let height = Math.max(DEFAULT_DIAGRAM_NODE_HEIGHT, lines.length * 20 + 28);
+  const extra = extraLines(node);
+  if (extra) height += extra * 18 + 12;
+  switch (node.shape) {
+    case "actor":
+    case "c4-person":
+      height = Math.round(height * 1.5);
+      break;
+    case "point":
+      width = Math.max(72, longest * 7 + 36);
+      height = 30;
+      break;
+    case "commit": {
+      const d = Math.max(56, Math.min(120, longest * 7 + 24));
+      width = d;
+      height = d;
+      break;
+    }
+    case "diam":
+    case "hex":
+    case "trap-b":
+    case "trap-t":
+    case "lean-r":
+    case "lean-l":
+      width = Math.round(width * 1.25);
+      height = Math.round(height * 1.4);
+      break;
+    case "circle":
+    case "dbl-circ":
+    case "sm-circ":
+    case "fr-circ":
+    case "f-circ":
+    case "cross-circ": {
+      const d = Math.max(width * 0.75, height * 1.3);
+      width = Math.round(d);
+      height = Math.round(d);
+      break;
+    }
+    case "stateStart":
+    case "stateEnd":
+      width = 28;
+      height = 28;
+      break;
+    case "fork":
+    case "join":
+      width = 120;
+      height = 10;
+      break;
+    case "choice":
+      width = 48;
+      height = 48;
+      break;
+    case "cyl":
+    case "h-cyl":
+    case "lin-cyl":
+      height = Math.round(height * 1.3);
+      break;
+    case "image": {
+      const picture = diagramImageSize(node);
+      const label = String(node.label ?? "").trim() ? IMAGE_LABEL_HEIGHT : 0;
+      width = Math.max(picture.width, label ? Math.min(360, longest * 7 + 16) : 0);
+      height = picture.height + label;
+      break;
+    }
+    default:
+      break;
+  }
+  return { width, height };
+}
+var IMAGE_LABEL_HEIGHT = 24;
+function diagramImageSize(node) {
+  const num2 = (v) => typeof v === "number" && v > 0 ? v : void 0;
+  const w = num2(node.data?.w);
+  const h = num2(node.data?.h);
+  return { width: w ?? h ?? 96, height: h ?? w ?? 96 };
+}
+function extraLines(node) {
+  const data = node.data ?? {};
+  const members = Array.isArray(data.members) ? data.members.length : 0;
+  const attributes = Array.isArray(data.attributes) ? data.attributes.length : 0;
+  const descriptions = Array.isArray(data.descriptions) ? data.descriptions.length : 0;
+  const details = Array.isArray(data.details) ? data.details.length : 0;
+  return members + attributes + descriptions + details;
+}
+function rankdir(direction) {
+  const d = direction.toUpperCase();
+  if (d === "TD") return "TB";
+  if (d === "TB" || d === "BT" || d === "LR" || d === "RL") return d;
+  return "TB";
+}
+function autoLayoutDiagram(graph, options = {}) {
+  const measure = options.measure ?? estimateDiagramNodeSize;
+  const nodeSep = options.nodeSep ?? 48;
+  const rankSep = options.rankSep ?? 72;
+  const pad = options.groupPadding ?? 24;
+  const titleH = options.groupTitleHeight ?? 32;
+  const childrenOf = /* @__PURE__ */ new Map();
+  for (const n3 of graph.nodes) push(childrenOf, n3.parentId, { id: n3.id, isGroup: false });
+  for (const g of graph.groups) push(childrenOf, g.parentId, { id: g.id, isGroup: true });
+  const nodeById = new Map(graph.nodes.map((n3) => [n3.id, n3]));
+  const groupById = new Map(graph.groups.map((g) => [g.id, g]));
+  const sizes = {};
+  const relative = {};
+  const layoutScope = (scope, direction) => {
+    const children = childrenOf.get(scope) ?? [];
+    for (const c of children) {
+      if (c.isGroup) {
+        const g2 = groupById.get(c.id);
+        const inner = layoutScope(c.id, g2.direction ?? direction);
+        sizes[c.id] = { width: inner.width + pad * 2, height: inner.height + pad * 2 + titleH };
+      } else {
+        sizes[c.id] = measure(nodeById.get(c.id));
+      }
+    }
+    if (!children.length) return { width: 120, height: 40 };
+    const g = new dagre2.graphlib.Graph({ multigraph: true });
+    g.setGraph({
+      rankdir: rankdir(direction),
+      nodesep: nodeSep,
+      ranksep: rankSep,
+      marginx: 0,
+      marginy: 0
+    });
+    g.setDefaultEdgeLabel(() => ({}));
+    const ids = new Set(children.map((c) => c.id));
+    for (const c of children)
+      g.setNode(c.id, { width: sizes[c.id].width, height: sizes[c.id].height });
+    const lift = (id) => {
+      let cur = id;
+      const seen = /* @__PURE__ */ new Set();
+      while (cur && !seen.has(cur)) {
+        if (ids.has(cur)) return cur;
+        seen.add(cur);
+        cur = nodeById.get(cur)?.parentId ?? groupById.get(cur)?.parentId;
+      }
+      return null;
+    };
+    graph.edges.forEach((e, i) => {
+      const s = lift(e.source);
+      const t = lift(e.target);
+      if (s && t && s !== t) g.setEdge(s, t, { minlen: Math.max(1, e.length) }, `e${i}`);
+    });
+    dagre2.layout(g);
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const c of children) {
+      const n3 = g.node(c.id);
+      const w = sizes[c.id].width;
+      const h = sizes[c.id].height;
+      const x = n3.x - w / 2;
+      const y = n3.y - h / 2;
+      relative[c.id] = [x, y];
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x + w);
+      maxY = Math.max(maxY, y + h);
+    }
+    for (const c of children) {
+      const [x, y] = relative[c.id];
+      relative[c.id] = [x - minX, y - minY];
+    }
+    return { width: maxX - minX, height: maxY - minY };
+  };
+  layoutScope(void 0, graph.direction);
+  const positions = {};
+  const absolute = (id) => {
+    if (positions[id]) return positions[id];
+    const parentId = nodeById.get(id)?.parentId ?? groupById.get(id)?.parentId;
+    const [rx, ry] = relative[id] ?? [0, 0];
+    if (!parentId) {
+      positions[id] = [rx, ry];
+    } else {
+      const [px2, py] = absolute(parentId);
+      positions[id] = [px2 + pad + rx, py + pad + titleH + ry];
+    }
+    return positions[id];
+  };
+  for (const n3 of graph.nodes) absolute(n3.id);
+  for (const g of graph.groups) absolute(g.id);
+  return { positions, sizes };
+}
+function push(map, key, value) {
+  const arr = map.get(key);
+  if (arr) arr.push(value);
+  else map.set(key, [value]);
+}
+function ensureDiagramLayout(graph, meta, options) {
+  const measure = options?.measure ?? estimateDiagramNodeSize;
+  const stored = meta.layout ?? {};
+  const allIds = [...graph.nodes.map((n3) => n3.id), ...graph.groups.map((g) => g.id)];
+  const missing = allIds.filter((id) => !stored[id]);
+  const sizes = {};
+  for (const n3 of graph.nodes)
+    sizes[n3.id] = meta.sizes?.[n3.id] ? { width: meta.sizes[n3.id][0], height: meta.sizes[n3.id][1] } : measure(n3);
+  if (!missing.length) {
+    const positions2 = {};
+    for (const id of allIds) positions2[id] = stored[id];
+    for (const g of graph.groups) sizes[g.id] = diagramGroupSize(g.id, graph, positions2, sizes, meta);
+    return { positions: positions2, sizes };
+  }
+  const auto = autoLayoutDiagram(graph, options);
+  if (missing.length === allIds.length) return auto;
+  const both = allIds.filter((id) => stored[id] && auto.positions[id]);
+  let dx = 0;
+  let dy = 0;
+  if (both.length) {
+    for (const id of both) {
+      dx += stored[id][0] - auto.positions[id][0];
+      dy += stored[id][1] - auto.positions[id][1];
+    }
+    dx /= both.length;
+    dy /= both.length;
+  }
+  const positions = {};
+  for (const id of allIds) {
+    positions[id] = stored[id] ?? [auto.positions[id][0] + dx, auto.positions[id][1] + dy];
+  }
+  for (const g of graph.groups) sizes[g.id] = diagramGroupSize(g.id, graph, positions, sizes, meta);
+  return { positions, sizes };
+}
+function diagramGroupSize(groupId, graph, positions, sizes, meta, pad = 24, titleH = 32) {
+  if (meta.sizes?.[groupId])
+    return { width: meta.sizes[groupId][0], height: meta.sizes[groupId][1] };
+  const members = [
+    ...graph.nodes.filter((n3) => n3.parentId === groupId).map((n3) => n3.id),
+    ...graph.groups.filter((g) => g.parentId === groupId).map((g) => g.id)
+  ];
+  if (!members.length) return { width: 200, height: 100 };
+  const [gx, gy] = positions[groupId] ?? [0, 0];
+  let maxX = 0;
+  let maxY = 0;
+  for (const id of members) {
+    const size = sizes[id] ?? (graph.groups.some((g) => g.id === id) ? diagramGroupSize(id, graph, positions, sizes, meta, pad, titleH) : { width: DEFAULT_DIAGRAM_NODE_WIDTH, height: DEFAULT_DIAGRAM_NODE_HEIGHT });
+    sizes[id] = size;
+    const [x, y] = positions[id] ?? [gx, gy];
+    maxX = Math.max(maxX, x - gx + size.width);
+    maxY = Math.max(maxY, y - gy + size.height);
+  }
+  return { width: maxX + pad, height: maxY + pad };
+}
+
+// src/canvas/mermaid/toFlow.ts
+function parseMermaidStyles(styles) {
+  const out = {};
+  for (const s of styles) {
+    const idx = s.indexOf(":");
+    if (idx === -1) continue;
+    out[s.slice(0, idx).trim()] = s.slice(idx + 1).trim();
+  }
+  return out;
+}
+function resolveMermaidStyles(classes, inline, classDefs) {
+  let out = {};
+  if (classDefs.default) out = { ...out, ...parseMermaidStyles(classDefs.default) };
+  for (const cls of classes)
+    if (classDefs[cls]) out = { ...out, ...parseMermaidStyles(classDefs[cls]) };
+  return { ...out, ...parseMermaidStyles(inline) };
+}
+function depth(id, parents) {
+  let d = 0;
+  let cur = parents.get(id);
+  const seen = /* @__PURE__ */ new Set();
+  while (cur && !seen.has(cur)) {
+    seen.add(cur);
+    d++;
+    cur = parents.get(cur);
+  }
+  return d;
+}
+function mermaidFlowNodes(graph, layout2, options = {}) {
+  const editable = options.editable ?? false;
+  const positions = { ...layout2.positions, ...options.positions ?? {} };
+  const sizes = { ...layout2.sizes, ...options.sizes ?? {} };
+  const parents = /* @__PURE__ */ new Map();
+  for (const n3 of graph.nodes) parents.set(n3.id, n3.parentId);
+  for (const g of graph.groups) parents.set(g.id, g.parentId);
+  const rel = (id, parentId) => {
+    const [x, y] = positions[id] ?? [0, 0];
+    if (!parentId) return { x, y };
+    const [px2, py] = positions[parentId] ?? [0, 0];
+    return { x: x - px2, y: y - py };
+  };
+  const groups = graph.groups.map((g) => {
+    const size = sizes[g.id] ?? { width: 240, height: 160 };
+    return {
+      id: g.id,
+      type: "mermaid-group",
+      position: rel(g.id, g.parentId),
+      parentId: g.parentId,
+      data: {
+        group: g,
+        family: "",
+        resolvedStyles: resolveMermaidStyles(g.classes, g.styles, graph.classDefs),
+        editable
+      },
+      width: size.width,
+      height: size.height,
+      style: { width: size.width, height: size.height },
+      draggable: editable && !g.data?.locked,
+      selectable: editable,
+      connectable: editable && !g.data?.locked,
+      zIndex: depth(g.id, parents)
+    };
+  });
+  const nodes = graph.nodes.map((n3) => {
+    const size = sizes[n3.id] ?? { width: 160, height: 56 };
+    return {
+      id: n3.id,
+      type: "mermaid-node",
+      position: rel(n3.id, n3.parentId),
+      parentId: n3.parentId,
+      data: {
+        node: n3,
+        family: "",
+        resolvedStyles: resolveMermaidStyles(n3.classes, n3.styles, graph.classDefs),
+        editable
+      },
+      width: size.width,
+      height: size.height,
+      style: { width: size.width, height: size.height },
+      draggable: editable && !n3.data?.locked,
+      selectable: editable,
+      connectable: editable && !n3.data?.locked && !n3.data?.synthetic,
+      zIndex: depth(n3.id, parents) + 100
+    };
+  });
+  const order = (a, b) => depth(a.id, parents) - depth(b.id, parents);
+  return [...groups.sort(order), ...nodes.sort(order)];
+}
+function mermaidFlowEdges(graph, options = {}) {
+  const editable = options.editable ?? false;
+  return graph.edges.map((e) => ({
+    id: e.id,
+    type: "mermaid-edge",
+    source: e.source,
+    target: e.target,
+    label: e.label,
+    data: {
+      edge: e,
+      family: "",
+      resolvedStyles: resolveMermaidStyles(e.classes, e.styles, graph.classDefs),
+      editable
+    },
+    selectable: editable,
+    reconnectable: editable,
+    zIndex: 1e3
+  }));
+}
+function mermaidMarkerId(head, side) {
+  if (head === "none") return void 0;
+  return `pixerate-mermaid-marker-${head}-${side}`;
+}
+function mermaidEdgeDash(pattern) {
+  switch (pattern) {
+    case "dotted":
+      return "6 4";
+    case "invisible":
+      return "0 1";
+    default:
+      return void 0;
+  }
+}
+function mermaidEdgeWidth(pattern) {
+  return pattern === "thick" ? 3.5 : 1.75;
+}
+
+// src/canvas/mermaid/view.ts
+function diagramLayoutBounds(layout2) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [id, [x, y]] of Object.entries(layout2.positions)) {
+    const size = layout2.sizes[id] ?? { width: 0, height: 0 };
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x + size.width);
+    maxY = Math.max(maxY, y + size.height);
+  }
+  if (minX === Infinity) return null;
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function clampHeight2(content, options = {}) {
+  const { min = 320, max = 560, padding = 48 } = options;
+  return Math.round(Math.min(max, Math.max(min, content + padding)));
+}
+function diagramCanvasHeight(layout2, options) {
+  return clampHeight2(diagramLayoutBounds(layout2)?.height ?? 0, options);
+}
+var RANK_HEIGHT = DEFAULT_DIAGRAM_NODE_HEIGHT + 72;
+var NODES_PER_RANK2 = 2;
+var GROUP_BAND = 24 * 2 + 32;
+function estimateDiagramCanvasHeight(graph, options) {
+  const ranks = Math.ceil(graph.nodes.length / NODES_PER_RANK2);
+  return clampHeight2(ranks * RANK_HEIGHT + graph.groups.length * GROUP_BAND, options);
+}
+function mix2(a, b, t) {
+  return a + (b - a) * t;
+}
+function blendDiagramLayout(from, to, t) {
+  if (t >= 1) return to;
+  const positions = {};
+  for (const [id, [x, y]] of Object.entries(to.positions)) {
+    const origin = from.positions[id];
+    positions[id] = origin ? [mix2(origin[0], x, t), mix2(origin[1], y, t)] : [x, y];
+  }
+  const sizes = {};
+  for (const [id, size] of Object.entries(to.sizes)) {
+    const origin = from.sizes[id];
+    sizes[id] = origin ? { width: mix2(origin.width, size.width, t), height: mix2(origin.height, size.height, t) } : size;
+  }
+  return { positions, sizes };
+}
+function connectedDiagramOnly(graph) {
+  const linked = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    linked.add(edge.source);
+    linked.add(edge.target);
+  }
+  const nodes = graph.nodes.filter((n3) => linked.has(n3.id));
+  if (nodes.length === graph.nodes.length) return graph;
+  const parentOf = new Map(graph.groups.map((g) => [g.id, g.parentId]));
+  const keep = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    let id = node.parentId;
+    while (id && !keep.has(id)) {
+      keep.add(id);
+      id = parentOf.get(id);
+    }
+  }
+  for (const id of linked) if (parentOf.has(id)) keep.add(id);
+  return { ...graph, nodes, groups: graph.groups.filter((g) => keep.has(g.id)) };
+}
+
+// src/canvas/mermaid/stream.ts
+function fingerprint(graph) {
+  return JSON.stringify([
+    graph.direction,
+    graph.nodes.map((n3) => [n3.id, n3.parentId ?? "", n3.shape, String(n3.label).length > 24 ? 1 : 0]),
+    graph.edges.map((e) => [e.source, e.target]),
+    graph.groups.map((g) => [g.id, g.parentId ?? "", g.direction ?? ""])
+  ]);
+}
+var DiagramStream = class {
+  constructor(options = {}) {
+    this.options = options;
+  }
+  options;
+  lastKey = "";
+  layout = null;
+  /** Reads the source so far. `complete` when nothing more will arrive. */
+  update(source, complete = false) {
+    const text = streamedDiagramText(source);
+    const parsed = parseMermaid(text);
+    const document2 = !complete ? { ...parsed, graph: connectedDiagramOnly(parsed.graph) } : parsed;
+    if (document2.tier !== "editable" || !document2.graph.nodes.length) return { document: document2, layout: this.layout && complete ? null : this.layout, relaid: false };
+    const key = fingerprint(document2.graph);
+    if (key === this.lastKey && this.layout) return { document: document2, layout: this.layout, relaid: false };
+    this.lastKey = key;
+    this.layout = ensureDiagramLayout(document2.graph, document2.meta, this.options);
+    return { document: document2, layout: this.layout, relaid: true };
+  }
+  /** Forgets the previous layout (a new source). */
+  reset() {
+    this.lastKey = "";
+    this.layout = null;
+  }
+};
+function streamedDiagramText(source) {
+  const open = /(?:^|\n)[ ]{0,3}(`{3,}|~{3,})[ \t]*(mermaid|mmd)?[^\n`]*(?:\n|$)/i.exec(source);
+  if (!open) return source;
+  const rest = source.slice(open.index + open[0].length);
+  const fence = open[1];
+  const close = new RegExp(`(?:^|\\n)[ ]{0,3}${fence[0] === "`" ? "`" : "~"}{${fence.length},}[ \\t]*(?:\\n|$)`).exec(rest);
+  return close ? rest.slice(0, close.index) : rest.replace(/\n[ ]{0,3}[`~]{1,2}$/, "");
+}
+var easeDiagramTween = (t) => 1 - Math.pow(1 - Math.max(0, Math.min(1, t)), 3);
+
+// src/canvas/mermaid/shapes.ts
+var n = (v) => Math.round(v * 100) / 100;
+var poly = (points) => `M${points.map(([x, y]) => `${n(x)},${n(y)}`).join(" L")} Z`;
+var rect = (x, y, w, h, r = 0) => {
+  if (r <= 0) return poly([[x, y], [x + w, y], [x + w, y + h], [x, y + h]]);
+  const rr = Math.min(r, w / 2, h / 2);
+  return `M${n(x + rr)},${n(y)} H${n(x + w - rr)} A${n(rr)},${n(rr)} 0 0 1 ${n(x + w)},${n(y + rr)} V${n(y + h - rr)} A${n(rr)},${n(rr)} 0 0 1 ${n(x + w - rr)},${n(y + h)} H${n(x + rr)} A${n(rr)},${n(rr)} 0 0 1 ${n(x)},${n(y + h - rr)} V${n(y + rr)} A${n(rr)},${n(rr)} 0 0 1 ${n(x + rr)},${n(y)} Z`;
+};
+var ellipse = (cx, cy, rx, ry) => `M${n(cx - rx)},${n(cy)} A${n(rx)},${n(ry)} 0 1 0 ${n(cx + rx)},${n(cy)} A${n(rx)},${n(ry)} 0 1 0 ${n(cx - rx)},${n(cy)} Z`;
+var line2 = (x1, y1, x2, y2) => `M${n(x1)},${n(y1)} L${n(x2)},${n(y2)}`;
+function mermaidShapePaths(shape, width, height, inset = 1) {
+  const s = inset;
+  const W = Math.max(0, width - 2 * s);
+  const H = Math.max(0, height - 2 * s);
+  const x0 = s;
+  const y0 = s;
+  const x1 = width - s;
+  const y1 = height - s;
+  const cx = width / 2;
+  const cy = height / 2;
+  const fill = (d) => ({ d, paint: "shape" });
+  const stroke = (d) => ({ d, paint: "line" });
+  const solid = (d) => ({ d, paint: "filled" });
+  switch (shape) {
+    case "rounded":
+    case "event":
+      return [fill(rect(x0, y0, W, H, Math.min(10, H / 4)))];
+    case "stadium":
+      return [fill(rect(x0, y0, W, H, H / 2))];
+    case "subproc":
+    case "subroutine": {
+      const i = Math.min(10, W / 8);
+      return [fill(rect(x0, y0, W, H)), stroke(line2(x0 + i, y0, x0 + i, y1)), stroke(line2(x1 - i, y0, x1 - i, y1))];
+    }
+    case "cyl":
+    case "cylinder": {
+      const ry = Math.min(H / 6, 14);
+      return [
+        fill(`M${n(x0)},${n(y0 + ry)} A${n(W / 2)},${n(ry)} 0 0 1 ${n(x1)},${n(y0 + ry)} L${n(x1)},${n(y1 - ry)} A${n(W / 2)},${n(ry)} 0 0 1 ${n(x0)},${n(y1 - ry)} Z`),
+        stroke(`M${n(x0)},${n(y0 + ry)} A${n(W / 2)},${n(ry)} 0 0 0 ${n(x1)},${n(y0 + ry)}`)
+      ];
+    }
+    case "h-cyl":
+    case "lin-cyl": {
+      const rx = Math.min(W / 6, 14);
+      const paths = [
+        fill(`M${n(x0 + rx)},${n(y0)} L${n(x1 - rx)},${n(y0)} A${n(rx)},${n(H / 2)} 0 0 1 ${n(x1 - rx)},${n(y1)} L${n(x0 + rx)},${n(y1)} A${n(rx)},${n(H / 2)} 0 0 1 ${n(x0 + rx)},${n(y0)} Z`),
+        stroke(ellipse(x1 - rx, cy, rx, H / 2))
+      ];
+      if (shape === "lin-cyl") paths.push(stroke(line2(x0 + rx * 2, y0, x0 + rx * 2, y1)));
+      return paths;
+    }
+    case "circle":
+    case "circ":
+      return [fill(ellipse(cx, cy, W / 2, H / 2))];
+    case "dbl-circ":
+      return [fill(ellipse(cx, cy, W / 2, H / 2)), stroke(ellipse(cx, cy, Math.max(0, W / 2 - 5), Math.max(0, H / 2 - 5)))];
+    case "sm-circ":
+    case "f-circ":
+    case "stateStart":
+      return [solid(ellipse(cx, cy, W / 2, H / 2))];
+    case "fr-circ":
+    case "stateEnd":
+      return [fill(ellipse(cx, cy, W / 2, H / 2)), solid(ellipse(cx, cy, Math.max(0, W / 2 - 5), Math.max(0, H / 2 - 5)))];
+    case "cross-circ":
+      return [
+        fill(ellipse(cx, cy, W / 2, H / 2)),
+        stroke(line2(cx - W / 2.83, cy - H / 2.83, cx + W / 2.83, cy + H / 2.83)),
+        stroke(line2(cx + W / 2.83, cy - H / 2.83, cx - W / 2.83, cy + H / 2.83))
+      ];
+    case "odd":
+    case "asymmetric": {
+      const d = Math.min(H / 2, 20);
+      return [fill(poly([[x0 + d, y0], [x1, y0], [x1, y1], [x0 + d, y1], [x0, cy]]))];
+    }
+    case "diam":
+    case "diamond":
+    case "choice":
+      return [fill(poly([[cx, y0], [x1, cy], [cx, y1], [x0, cy]]))];
+    case "hex":
+    case "hexagon": {
+      const d = Math.min(W / 5, H / 2);
+      return [fill(poly([[x0 + d, y0], [x1 - d, y0], [x1, cy], [x1 - d, y1], [x0 + d, y1], [x0, cy]]))];
+    }
+    case "lean-r": {
+      const d = Math.min(W / 5, H / 2);
+      return [fill(poly([[x0 + d, y0], [x1, y0], [x1 - d, y1], [x0, y1]]))];
+    }
+    case "lean-l": {
+      const d = Math.min(W / 5, H / 2);
+      return [fill(poly([[x0, y0], [x1 - d, y0], [x1, y1], [x0 + d, y1]]))];
+    }
+    case "trap-b": {
+      const d = Math.min(W / 5, H / 2);
+      return [fill(poly([[x0 + d, y0], [x1 - d, y0], [x1, y1], [x0, y1]]))];
+    }
+    case "trap-t": {
+      const d = Math.min(W / 5, H / 2);
+      return [fill(poly([[x0, y0], [x1, y0], [x1 - d, y1], [x0 + d, y1]]))];
+    }
+    case "text":
+    case "anchor":
+      return [{ d: rect(x0, y0, W, H), paint: "hidden" }];
+    case "card":
+    case "notch-rect": {
+      const d = Math.min(14, H / 3);
+      return [fill(poly([[x0 + d, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0 + d]]))];
+    }
+    case "lin-rect":
+    case "shaded-process":
+      return [fill(rect(x0, y0, W, H)), stroke(line2(x0 + 8, y0, x0 + 8, y1))];
+    case "fork":
+    case "join":
+      return [solid(rect(x0, y0, W, H, 2))];
+    case "hourglass":
+      return [fill(poly([[x0, y0], [x1, y0], [x0, y1], [x1, y1]]))];
+    case "bolt":
+      return [fill(poly([[cx + W * 0.1, y0], [x0 + W * 0.25, cy + 4], [cx, cy + 4], [cx - W * 0.1, y1], [x1 - W * 0.25, cy - 4], [cx, cy - 4]]))];
+    case "doc":
+    case "lin-doc":
+    case "tag-doc": {
+      const wave = Math.min(12, H / 5);
+      const paths = [fill(`M${n(x0)},${n(y0)} L${n(x1)},${n(y0)} L${n(x1)},${n(y1 - wave)} Q${n(x1 - W / 4)},${n(y1 - wave * 2.2)} ${n(cx)},${n(y1 - wave)} T${n(x0)},${n(y1 - wave)} Z`)];
+      if (shape === "lin-doc") paths.push(stroke(line2(x0 + 8, y0, x0 + 8, y1 - wave)));
+      if (shape === "tag-doc") paths.push(stroke(line2(x1 - 12, y1 - wave * 1.6, x1, y1 - wave * 2.6)));
+      return paths;
+    }
+    case "docs": {
+      const wave = Math.min(10, H / 6);
+      const page = (dx, dy, inner) => fill(`M${n(x0 + dx)},${n(y0 + dy)} L${n(x1 - inner)},${n(y0 + dy)} L${n(x1 - inner)},${n(y1 - wave - (12 - dy))} Q${n(x1 - W / 4 - inner)},${n(y1 - wave * 2.2 - (12 - dy))} ${n(cx + 6 - dy)},${n(y1 - wave - (12 - dy))} T${n(x0 + dx)},${n(y1 - wave - (12 - dy))} Z`);
+      return [page(12, 0, 0), page(6, 6, 6), page(0, 12, 12)];
+    }
+    case "delay":
+      return [fill(`M${n(x0)},${n(y0)} L${n(x1 - H / 2)},${n(y0)} A${n(H / 2)},${n(H / 2)} 0 0 1 ${n(x1 - H / 2)},${n(y1)} L${n(x0)},${n(y1)} Z`)];
+    case "curv-trap": {
+      const d = Math.min(W / 6, H / 3);
+      return [fill(`M${n(x0 + d)},${n(y0)} L${n(x1 - d)},${n(y0)} Q${n(x1)},${n(y0)} ${n(x1)},${n(cy)} Q${n(x1)},${n(y1)} ${n(x1 - d)},${n(y1)} L${n(x0 + d)},${n(y1)} L${n(x0)},${n(cy)} Z`)];
+    }
+    case "div-rect": {
+      const d = Math.min(24, H / 3);
+      return [fill(rect(x0, y0, W, H)), stroke(line2(x0, y0 + d, x1, y0 + d))];
+    }
+    case "tri":
+      return [fill(poly([[cx, y0], [x1, y1], [x0, y1]]))];
+    case "flip-tri":
+      return [fill(poly([[x0, y0], [x1, y0], [cx, y1]]))];
+    case "win-pane":
+      return [fill(rect(x0, y0, W, H)), stroke(line2(x0 + 10, y0, x0 + 10, y1)), stroke(line2(x0, y0 + 10, x1, y0 + 10))];
+    case "flag": {
+      const wave = Math.min(10, H / 5);
+      return [fill(`M${n(x0)},${n(y0 + wave)} Q${n(x0 + W / 4)},${n(y0 - wave)} ${n(cx)},${n(y0 + wave)} T${n(x1)},${n(y0 + wave)} L${n(x1)},${n(y1 - wave)} Q${n(x1 - W / 4)},${n(y1 + wave)} ${n(cx)},${n(y1 - wave)} T${n(x0)},${n(y1 - wave)} Z`)];
+    }
+    case "st-rect":
+      return [fill(rect(x0 + 8, y0, W - 8, H - 8)), fill(rect(x0 + 4, y0 + 4, W - 8, H - 8)), fill(rect(x0, y0 + 8, W - 8, H - 8))];
+    case "bow-rect": {
+      const d = Math.min(W / 8, 14);
+      return [fill(`M${n(x0)},${n(y0)} Q${n(x0 + d)},${n(cy)} ${n(x0)},${n(y1)} L${n(x1)},${n(y1)} Q${n(x1 - d)},${n(cy)} ${n(x1)},${n(y0)} Z`)];
+    }
+    case "tag-rect":
+      return [fill(rect(x0, y0, W, H)), stroke(line2(x1 - 14, y1, x1, y1 - 14))];
+    case "notch-pent": {
+      const d = Math.min(W / 6, H / 3);
+      return [fill(poly([[x0 + d, y0], [x1 - d, y0], [x1, y0 + d], [x1, y1], [x0, y1], [x0, y0 + d]]))];
+    }
+    case "sl-rect": {
+      const d = Math.min(H / 3, 20);
+      return [fill(poly([[x0, y0 + d], [x1, y0], [x1, y1], [x0, y1]]))];
+    }
+    case "brace":
+    case "brace-l":
+    case "brace-r":
+    case "braces": {
+      const left = `M${n(x0 + 18)},${n(y0)} Q${n(x0 + 6)},${n(y0)} ${n(x0 + 6)},${n(cy - 6)} Q${n(x0 + 6)},${n(cy)} ${n(x0)},${n(cy)} Q${n(x0 + 6)},${n(cy)} ${n(x0 + 6)},${n(cy + 6)} Q${n(x0 + 6)},${n(y1)} ${n(x0 + 18)},${n(y1)}`;
+      const right = `M${n(x1 - 18)},${n(y0)} Q${n(x1 - 6)},${n(y0)} ${n(x1 - 6)},${n(cy - 6)} Q${n(x1 - 6)},${n(cy)} ${n(x1)},${n(cy)} Q${n(x1 - 6)},${n(cy)} ${n(x1 - 6)},${n(cy + 6)} Q${n(x1 - 6)},${n(y1)} ${n(x1 - 18)},${n(y1)}`;
+      const hit = { d: rect(x0, y0, W, H), paint: "hidden" };
+      if (shape === "brace-r") return [hit, stroke(right)];
+      if (shape === "braces") return [hit, stroke(left), stroke(right)];
+      return [hit, stroke(left)];
+    }
+    case "comment":
+      return [{ d: rect(x0, y0, W, H), paint: "hidden" }, stroke(`M${n(x0 + 14)},${n(y0)} Q${n(x0)},${n(y0)} ${n(x0)},${n(y0 + 14)} L${n(x0)},${n(y1 - 14)} Q${n(x0)},${n(y1)} ${n(x0 + 14)},${n(y1)}`)];
+    case "icon":
+    case "image":
+      return [fill(rect(x0, y0, W, H, 6))];
+    case "note":
+      return [fill(poly([[x0, y0], [x1 - 12, y0], [x1, y0 + 12], [x1, y1], [x0, y1]]))];
+    default:
+      return [fill(rect(x0, y0, W, H))];
+  }
+}
+function mermaidEdgeMarker(head) {
+  if (head === "none") return null;
+  if (head === "arrow_open" || head === "dependency") return "arrow";
+  return "arrowclosed";
+}
+function mermaidNodePaint(styles = {}, selected = false) {
+  const paint = {
+    "--pixerate-diagram-node-bg": styles.fill ?? "var(--card, var(--background, #ffffff))",
+    "--pixerate-diagram-node-border": selected ? "var(--primary, #2563eb)" : styles.stroke ?? "var(--foreground, #0f172a)",
+    color: styles.color ?? "var(--foreground, #0f172a)",
+    "stroke-width": styles["stroke-width"] ?? (selected ? "2px" : "1.25px")
+  };
+  if (styles["stroke-dasharray"]) paint["stroke-dasharray"] = styles["stroke-dasharray"];
+  return paint;
+}
+var MERMAID_SHAPE_PAINT = {
+  shape: { fill: "var(--pixerate-diagram-node-bg)", stroke: "var(--pixerate-diagram-node-border)" },
+  line: { fill: "none", stroke: "var(--pixerate-diagram-node-border)" },
+  filled: { fill: "var(--pixerate-diagram-node-border)", stroke: "var(--pixerate-diagram-node-border)" },
+  hidden: { fill: "transparent", stroke: "none" }
+};
+function mermaidLabelLines(label) {
+  return String(label).replace(/^"`?|`?"$/g, "").split(/<br\s*\/?>|\n/i).map((line3) => line3.replace(/<[^>]+>/g, ""));
+}
+function mermaidNodeMembers(data) {
+  const list = [...data?.members ?? [], ...data?.attributes ?? []];
+  return list.map((m) => m.raw ?? "");
+}
+
+// src/canvas/mermaid/export.ts
+var DIAGRAM_SVG_LIGHT_THEME = {
+  background: "#ffffff",
+  nodeFill: "#ffffff",
+  nodeStroke: "#0f172a",
+  text: "#0f172a",
+  edge: "#64748b",
+  edgeLabelBackground: "#ffffff",
+  groupFill: "#f8fafc",
+  groupStroke: "#cbd5e1",
+  groupText: "#475569",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  fontSize: 13
+};
+var DIAGRAM_SVG_DARK_THEME = {
+  background: "#0f172a",
+  nodeFill: "#1e293b",
+  nodeStroke: "#e2e8f0",
+  text: "#f1f5f9",
+  edge: "#94a3b8",
+  edgeLabelBackground: "#0f172a",
+  groupFill: "#111c33",
+  groupStroke: "#334155",
+  groupText: "#94a3b8",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  fontSize: 13
+};
+var esc = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var n2 = (v) => String(Math.round(v * 100) / 100);
+function exitPoint(box, to) {
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const dx = to.x - cx;
+  const dy = to.y - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const sx = dx === 0 ? Infinity : box.width / 2 / Math.abs(dx);
+  const sy = dy === 0 ? Infinity : box.height / 2 / Math.abs(dy);
+  const t = Math.min(sx, sy);
+  return { x: cx + dx * t, y: cy + dy * t };
+}
+function mermaidToSvg(doc, options = {}) {
+  const theme = { ...DIAGRAM_SVG_LIGHT_THEME, ...options.theme };
+  const pad = options.padding ?? 16;
+  const graph = doc.graph;
+  const layout2 = options.layout ?? ensureDiagramLayout(graph, doc.meta, options);
+  const boxOf = (id) => {
+    const p = layout2.positions[id];
+    if (!p) return null;
+    const s = layout2.sizes[id] ?? { width: 160, height: 56 };
+    return { x: p[0], y: p[1], width: s.width, height: s.height };
+  };
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const id of Object.keys(layout2.positions)) {
+    const b = boxOf(id);
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  if (minX === Infinity) minX = minY = maxX = maxY = 0;
+  const naturalWidth = Math.max(1, Math.ceil(maxX - minX + pad * 2));
+  const naturalHeight = Math.max(1, Math.ceil(maxY - minY + pad * 2));
+  const fit = Math.min(1, (options.maxWidth ?? Infinity) / naturalWidth, (options.maxHeight ?? Infinity) / naturalHeight);
+  const width = Math.max(1, Math.round(naturalWidth * fit));
+  const height = Math.max(1, Math.round(naturalHeight * fit));
+  const ox = pad - minX;
+  const oy = pad - minY;
+  const fs = theme.fontSize;
+  const title = options.title ?? graph.title ?? `${doc.family} diagram`;
+  const out = [];
+  out.push(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${naturalWidth} ${naturalHeight}" role="img" aria-label="${esc(title)}" font-family="${esc(theme.fontFamily)}" font-size="${fs}">`,
+    `<title>${esc(title)}</title>`,
+    "<defs>",
+    `<marker id="pd-arrow-closed" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" fill="${esc(theme.edge)}"/></marker>`,
+    `<marker id="pd-arrow-open" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10" fill="none" stroke="${esc(theme.edge)}" stroke-width="1.5"/></marker>`,
+    "</defs>"
+  );
+  if (!options.transparent) out.push(`<rect width="${naturalWidth}" height="${naturalHeight}" fill="${esc(theme.background)}"/>`);
+  out.push(`<g transform="translate(${n2(ox)} ${n2(oy)})">`);
+  const depth2 = (id) => {
+    let d = 0;
+    let cur = graph.groups.find((g) => g.id === id)?.parentId;
+    while (cur && d < 50) {
+      d++;
+      cur = graph.groups.find((g) => g.id === cur)?.parentId;
+    }
+    return d;
+  };
+  for (const g of [...graph.groups].sort((a, b) => depth2(a.id) - depth2(b.id))) {
+    const b = boxOf(g.id);
+    if (!b) continue;
+    const st = resolveMermaidStyles(g.classes, g.styles, graph.classDefs);
+    out.push(
+      `<g data-group="${esc(g.id)}"><rect x="${n2(b.x)}" y="${n2(b.y)}" width="${n2(b.width)}" height="${n2(b.height)}" rx="8" fill="${esc(st.fill ?? theme.groupFill)}" stroke="${esc(st.stroke ?? theme.groupStroke)}" stroke-dasharray="4 3"/>`,
+      `<text x="${n2(b.x + 10)}" y="${n2(b.y + 18)}" fill="${esc(st.color ?? theme.groupText)}" font-size="${fs - 1}" font-weight="600">${esc(mermaidLabelLines(g.label).join(" "))}</text></g>`
+    );
+  }
+  for (const e of graph.edges) {
+    const a = boxOf(e.source);
+    const b = boxOf(e.target);
+    if (!a || !b || e.pattern === "invisible") continue;
+    const ca = { x: a.x + a.width / 2, y: a.y + a.height / 2 };
+    const cb = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+    const p = exitPoint(a, cb);
+    const q = exitPoint(b, ca);
+    const st = resolveMermaidStyles(e.classes, e.styles, graph.classDefs);
+    const end = mermaidEdgeMarker(e.arrowEnd);
+    const start = mermaidEdgeMarker(e.arrowStart);
+    const marker = (m) => m === "arrow" ? "url(#pd-arrow-open)" : m ? "url(#pd-arrow-closed)" : "";
+    const dash = mermaidEdgeDash(e.pattern);
+    out.push(
+      `<line data-edge="${esc(e.id)}" x1="${n2(p.x)}" y1="${n2(p.y)}" x2="${n2(q.x)}" y2="${n2(q.y)}" stroke="${esc(st.stroke ?? theme.edge)}" stroke-width="${e.pattern === "thick" ? 3 : 1.5}"${dash ? ` stroke-dasharray="${dash}"` : ""}${end ? ` marker-end="${marker(end)}"` : ""}${start ? ` marker-start="${marker(start)}"` : ""}/>`
+    );
+    if (e.label) {
+      const text = mermaidLabelLines(e.label).join(" ");
+      const w = text.length * fs * 0.55 + 10;
+      const mx = (p.x + q.x) / 2;
+      const my = (p.y + q.y) / 2;
+      out.push(
+        `<rect x="${n2(mx - w / 2)}" y="${n2(my - fs * 0.75)}" width="${n2(w)}" height="${n2(fs * 1.5)}" rx="3" fill="${esc(theme.edgeLabelBackground)}"/>`,
+        `<text x="${n2(mx)}" y="${n2(my)}" text-anchor="middle" dominant-baseline="central" fill="${esc(st.color ?? theme.text)}" font-size="${fs - 1}">${esc(text)}</text>`
+      );
+    }
+  }
+  for (const node of graph.nodes) {
+    const b = boxOf(node.id);
+    if (!b) continue;
+    const st = resolveMermaidStyles(node.classes, node.styles, graph.classDefs);
+    const fill = st.fill ?? theme.nodeFill;
+    const stroke = st.stroke ?? theme.nodeStroke;
+    const color = st.color ?? theme.text;
+    const strokeWidth = st["stroke-width"]?.replace("px", "") ?? "1.25";
+    const paint = (kind) => kind === "shape" ? `fill="${esc(fill)}" stroke="${esc(stroke)}" stroke-width="${esc(strokeWidth)}"` : kind === "line" ? `fill="none" stroke="${esc(stroke)}" stroke-width="${esc(strokeWidth)}"` : kind === "filled" ? `fill="${esc(stroke)}" stroke="${esc(stroke)}"` : 'fill="none" stroke="none"';
+    out.push(`<g data-node="${esc(node.id)}" transform="translate(${n2(b.x)} ${n2(b.y)})">`);
+    for (const path of mermaidShapePaths(node.shape, b.width, b.height)) out.push(`<path d="${path.d}" ${paint(path.paint)}/>`);
+    const lines = mermaidLabelLines(node.label).filter((l, i, all) => l || all.length === 1);
+    const members = mermaidNodeMembers(node.data);
+    const lh = fs * 1.3;
+    if (members.length) {
+      lines.forEach((line3, i) => out.push(`<text x="${n2(b.width / 2)}" y="${n2(14 + lh * i)}" text-anchor="middle" dominant-baseline="central" fill="${esc(color)}" font-weight="600">${esc(line3)}</text>`));
+      const top = 14 + lh * lines.length - lh / 2 + 4;
+      out.push(`<line x1="0" y1="${n2(top)}" x2="${n2(b.width)}" y2="${n2(top)}" stroke="${esc(stroke)}" stroke-width="1"/>`);
+      members.forEach((m, i) => out.push(`<text x="8" y="${n2(top + 4 + lh * (i + 0.5))}" dominant-baseline="central" fill="${esc(color)}" font-size="${fs - 1}">${esc(m)}</text>`));
+    } else {
+      const first = b.height / 2 - (lines.length - 1) * lh / 2;
+      lines.forEach((line3, i) => out.push(`<text x="${n2(b.width / 2)}" y="${n2(first + lh * i)}" text-anchor="middle" dominant-baseline="central" fill="${esc(color)}">${esc(line3)}</text>`));
+    }
+    out.push("</g>");
+  }
+  out.push("</g></svg>");
+  return { svg: out.join(""), width, height, naturalWidth, naturalHeight };
+}
+function mermaidThumbnailSvg(doc, options = {}) {
+  return mermaidToSvg(doc, { maxWidth: 240, maxHeight: 160, padding: 8, ...options });
+}
+var DIAGRAM_RASTER_MAX_SIZE = 2048;
+function rasterSize(width, height, scale = 2, maxSize = DIAGRAM_RASTER_MAX_SIZE) {
+  if (!(width > 0) || !(height > 0)) throw new Error(`An image needs a positive width and height; got ${width} \xD7 ${height}.`);
+  const factor = Math.min(scale > 0 ? scale : 1, maxSize / Math.max(width, height));
+  return { width: Math.max(1, Math.round(width * factor)), height: Math.max(1, Math.round(height * factor)), scale: factor };
+}
+var NO_DOM = 'Rasterizing needs a browser DOM (document, Image and a 2D canvas). Outside a browser, use the SVG (mermaidToSvg, or render_diagram with format "svg") with an SVG renderer.';
+async function rasterizeSvg(svg, options) {
+  const doc = options.document ?? globalThis.document;
+  const ImageCtor = doc?.defaultView?.Image ?? globalThis.Image;
+  if (!doc || typeof doc.createElement !== "function" || !ImageCtor) throw new Error(NO_DOM);
+  const size = rasterSize(options.width, options.height, options.scale, options.maxSize);
+  const canvas = doc.createElement("canvas");
+  canvas.width = size.width;
+  canvas.height = size.height;
+  let context = null;
+  try {
+    context = canvas.getContext("2d");
+  } catch {
+    context = null;
+  }
+  if (!context) throw new Error(NO_DOM);
+  const image = new ImageCtor();
+  await new Promise((resolve, reject) => {
+    image.onload = () => resolve();
+    image.onerror = () => reject(new Error("The SVG could not be loaded as an image; check that it is a complete <svg> document with the SVG namespace."));
+    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  });
+  const background = options.background ?? "#ffffff";
+  if (background !== "transparent") {
+    context.fillStyle = background;
+    context.fillRect(0, 0, size.width, size.height);
+  }
+  context.drawImage(image, 0, 0, size.width, size.height);
+  const url = canvas.toDataURL("image/png");
+  if (!url.startsWith("data:image/png")) throw new Error("This canvas cannot export PNG (toDataURL returned no image).");
+  return { data: url.slice(url.indexOf(",") + 1), mimeType: "image/png", width: size.width, height: size.height };
+}
+function diagramFileName(doc, extension2) {
+  const base = (doc.graph.title ?? "").toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+  return `${base || `${doc.family}-diagram`}.${extension2}`;
+}
+async function downloadDiagramPng(doc, options = {}) {
+  const drawn = mermaidToSvg(doc, options);
+  const background = options.background ?? (options.transparent ? "transparent" : options.theme?.background ?? DIAGRAM_SVG_LIGHT_THEME.background);
+  const image = await rasterizeSvg(drawn.svg, { ...options, width: drawn.width, height: drawn.height, background });
+  const filename = options.filename ?? diagramFileName(doc, "png");
+  const page = options.document ?? document;
+  const link = page.createElement("a");
+  link.href = `data:image/png;base64,${image.data}`;
+  link.download = filename;
+  page.body.appendChild(link);
+  link.click();
+  link.remove();
+  return { ...image, filename };
+}
+
+// src/canvas/mermaid/index.ts
+function mermaidToCanvas(doc, options = {}) {
+  const layout2 = options.layout ?? ensureDiagramLayout(doc.graph, doc.meta, options);
+  return {
+    nodes: mermaidFlowNodes(doc.graph, layout2, { editable: options.editable }),
+    edges: mermaidFlowEdges(doc.graph, { editable: options.editable }),
+    layout: layout2
+  };
+}
+function mermaidMovesFromCanvas(layout2, moved, all = moved, options = {}) {
+  const byId = new Map([...all, ...moved].map((n3) => [n3.id, n3]));
+  const absolute = (id, seen = /* @__PURE__ */ new Set()) => {
+    const node = byId.get(id);
+    if (!node) return layout2.positions[id] ?? [0, 0];
+    if (!node.parentId || seen.has(id)) return [node.position.x, node.position.y];
+    seen.add(id);
+    const [px2, py] = absolute(node.parentId, seen);
+    return [px2 + node.position.x, py + node.position.y];
+  };
+  const moves = moved.map((n3) => ({ id: n3.id, position: absolute(n3.id) })).filter(({ id, position: [x, y] }) => {
+    const before = layout2.positions[id];
+    return !before || Math.abs(before[0] - x) >= 0.5 || Math.abs(before[1] - y) >= 0.5;
+  });
+  const movedIds = new Set(moves.map((m) => m.id));
+  for (const n3 of all) {
+    if (movedIds.has(n3.id)) continue;
+    let parent = n3.parentId;
+    while (parent && !movedIds.has(parent)) parent = byId.get(parent)?.parentId;
+    if (parent) moves.push({ id: n3.id, position: absolute(n3.id) });
+  }
+  if (!moves.length) return null;
+  if (options.stored) {
+    const taken = new Set(moves.map((m) => m.id));
+    for (const [id, position] of Object.entries(layout2.positions)) {
+      if (!taken.has(id) && !options.stored[id]) moves.push({ id, position });
+    }
+  }
+  return { type: "moveNodes", moves };
+}
+
 // src/canvas/agent-presence.ts
 var DEFAULT_CURSOR_INACTIVITY_MS = 12e3;
 function hashString(str) {
@@ -8508,13 +9476,20 @@ export {
   CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
   DEFAULT_CURSOR_INACTIVITY_MS,
+  DEFAULT_DIAGRAM_NODE_HEIGHT,
+  DEFAULT_DIAGRAM_NODE_WIDTH,
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
   DEFAULT_PLACEMENT_GAP,
+  DIAGRAM_RASTER_MAX_SIZE,
+  DIAGRAM_SVG_DARK_THEME,
+  DIAGRAM_SVG_LIGHT_THEME,
+  DiagramStream,
   INSTANCE_DATA_KEY,
   LOCKED_DATA_KEY,
   LOCKED_PREVIOUS_FLAGS_KEY,
   MAX_KEYFRAME_REFS,
+  MERMAID_SHAPE_PAINT,
   ManualClock,
   PATHFINDER_OPERATIONS,
   PIXERATE_BRAND_GRADIENT,
@@ -8540,6 +9515,7 @@ export {
   applyShapeCombination,
   applyShapeReplacement,
   arcToCubics,
+  autoLayoutDiagram,
   bezierPathArea,
   bezierPathBounds,
   bezierPathLength,
@@ -8548,6 +9524,7 @@ export {
   bezierPathToSvg,
   bindCanvasComponentProperty,
   bindCanvasToken,
+  blendDiagramLayout,
   blendLayout,
   boundsOf,
   calculateCursorArrowRotation,
@@ -8568,6 +9545,7 @@ export {
   combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
+  connectedDiagramOnly,
   connectedOnly,
   contourEnclosesArea,
   contourSignedArea,
@@ -8598,17 +9576,27 @@ export {
   deleteKeyframes,
   detachCanvasInstance,
   detachTokenBindings,
+  diagramCanvasHeight,
+  diagramFileName,
+  diagramGroupSize,
+  diagramImageSize,
+  diagramLayoutBounds,
   diffOverrideGroups,
   distanceToBezierPath,
   distributeNodes,
   dividePaths,
   dividePolygons,
+  downloadDiagramPng,
+  easeDiagramTween,
   easingFromInfluence,
   easingLabel,
   easingToCss,
   elasticAt,
+  ensureDiagramLayout,
   ensureLayout,
   estimateCanvasHeight,
+  estimateDiagramCanvasHeight,
+  estimateDiagramNodeSize,
   estimateNodeSize,
   evaluateAnimation,
   evaluateEasing,
@@ -8740,6 +9728,20 @@ export {
   measureSelection,
   measureToLine,
   mergeNodeUpdates,
+  mermaidEdgeDash,
+  mermaidEdgeMarker,
+  mermaidEdgeWidth,
+  mermaidFlowEdges,
+  mermaidFlowNodes,
+  mermaidLabelLines,
+  mermaidMarkerId,
+  mermaidMovesFromCanvas,
+  mermaidNodeMembers,
+  mermaidNodePaint,
+  mermaidShapePaths,
+  mermaidThumbnailSvg,
+  mermaidToCanvas,
+  mermaidToSvg,
   mixColorsOklab,
   moveKeyframes,
   moveLayoutChild,
@@ -8761,6 +9763,7 @@ export {
   parseCssEasing,
   parseCssGradient,
   parseKeyframeClipboard,
+  parseMermaidStyles,
   parseNodeStyleDeclarations,
   parseOklab,
   parseSvgPath,
@@ -8782,6 +9785,8 @@ export {
   positionToSide,
   pruneCanvasTokenModes,
   pushCanvasInstanceOverrides,
+  rasterSize,
+  rasterizeSvg,
   readAnimatableValue,
   readNodeStyleProperty,
   readOverrideGroup,
@@ -8801,6 +9806,7 @@ export {
   resolveCanvasGradient,
   resolveCanvasTokens,
   resolveEasing,
+  resolveMermaidStyles,
   resolvePadding,
   restoreCanvasMainComponent,
   revertShapeCombination,
@@ -8842,6 +9848,7 @@ export {
   snapToGrid,
   splitSegment,
   springAt,
+  streamedDiagramText,
   streamlinePoints,
   strokeBoundingBox,
   strokeOutlineRings,