system-canvas-standalone 0.1.0 → 0.1.2

package/dist/system-canvas.js

@@ -12759,12 +12759,12 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react19 = __toESM(require_react(), 1);
+  var import_react21 = __toESM(require_react(), 1);
   var import_client = __toESM(require_client(), 1);
 
   // ../react/dist/components/SystemCanvas.js
-  var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
-  var import_react18 = __toESM(require_react(), 1);
+  var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
+  var import_react20 = __toESM(require_react(), 1);
 
   // ../core/dist/themes/dark.js
   var darkTheme = {
@@ -13723,20 +13723,28 @@ var SystemCanvas = (() => {
       return pos;
     const edge = options.edge ?? "start";
     const size = options.size ?? 0;
-    if (edge === "start") {
-      const containing = findLaneAt(pos, lanes);
-      if (containing)
-        return containing.start;
-      let best2 = lanes[0];
-      let bestDist2 = Math.abs(pos - best2.start);
-      for (const lane of lanes) {
-        const d = Math.abs(pos - lane.start);
-        if (d < bestDist2) {
-          best2 = lane;
-          bestDist2 = d;
-        }
-      }
-      return best2.start;
+    if (edge === "start" || edge === "center") {
+      const center = pos + size / 2;
+      const containing = findLaneAt(center, lanes);
+      let target;
+      if (containing) {
+        target = containing;
+      } else {
+        let best2 = lanes[0];
+        let bestDist2 = Math.abs(center - (best2.start + best2.size / 2));
+        for (const lane of lanes) {
+          const d = Math.abs(center - (lane.start + lane.size / 2));
+          if (d < bestDist2) {
+            best2 = lane;
+            bestDist2 = d;
+          }
+        }
+        target = best2;
+      }
+      if (edge === "center") {
+        return target.start + (target.size - size) / 2;
+      }
+      return target.start;
     }
     const boundaries = [];
     for (const lane of lanes)
@@ -13792,8 +13800,397 @@ var SystemCanvas = (() => {
   function filterActionsForNode(group, node) {
     return group.actions.filter((a) => !a.appliesTo || a.appliesTo(node));
   }
+  function getNodeActionsForNode(node, theme) {
+    if (node.category) {
+      const def = theme.categories?.[node.category];
+      if (def?.toolbar && def.toolbar.length > 0)
+        return def.toolbar;
+    }
+    return getNodeActions(theme);
+  }
+
+  // ../core/dist/rollup.js
+  function rollupNodes(canvas, predicate) {
+    const nodes = canvas?.nodes ?? [];
+    const total = nodes.length;
+    if (total === 0)
+      return { total: 0, matched: 0, fraction: 0 };
+    let matched = 0;
+    for (const n of nodes) {
+      if (predicate(n))
+        matched++;
+    }
+    return { total, matched, fraction: matched / total };
+  }
+
+  // ../core/dist/slots.js
+  var CORNER_INSET = 8;
+  var CORNER_EM = 1.25;
+  var HEADER_EM = 1;
+  var FOOTER_EM = 1;
+  var HEADER_INSET_X = 14;
+  var HEADER_INSET_Y = 10;
+  var FOOTER_INSET_Y = 10;
+  var TOP_EDGE_PX = 5;
+  var RIGHT_EDGE_PX = 4;
+  var LEFT_EDGE_PX = 4;
+  var BOTTOM_EDGE_MIN_PX = 6;
+  var BOTTOM_EDGE_HEIGHT_RATIO = 0.08;
+  var TAB_BADGE_EM = 1.4;
+  var TAB_BADGE_LIFT = 10;
+  var TAB_BADGE_OVERHANG = 8;
+  function computeCategorySlotRegions(node, theme, slots) {
+    const { x, y, width, height } = node;
+    const fs = theme.node.fontSize;
+    const corner = CORNER_EM * fs;
+    const header = HEADER_EM * fs;
+    const footer = FOOTER_EM * fs;
+    const tab = TAB_BADGE_EM * fs;
+    const bottomEdge = Math.max(BOTTOM_EDGE_MIN_PX, Math.round(height * BOTTOM_EDGE_HEIGHT_RATIO));
+    const bodyReservations = computeBodyReservations(node, theme, slots);
+    const bodyX = x + bodyReservations.left;
+    const bodyY = y + bodyReservations.top;
+    const bodyWidth = Math.max(0, width - bodyReservations.left - bodyReservations.right);
+    const bodyHeight = Math.max(0, height - bodyReservations.top - bodyReservations.bottom);
+    return {
+      topEdge: {
+        x,
+        y,
+        width,
+        height: TOP_EDGE_PX
+      },
+      bottomEdge: {
+        x,
+        y: y + height - bottomEdge,
+        width,
+        height: bottomEdge
+      },
+      leftEdge: {
+        x,
+        y,
+        width: LEFT_EDGE_PX,
+        height
+      },
+      rightEdge: {
+        x: x + width - RIGHT_EDGE_PX,
+        y,
+        width: RIGHT_EDGE_PX,
+        height
+      },
+      bodyTop: (() => {
+        const hasHeader = slots?.header !== void 0;
+        const bandHeight = Math.max(4, Math.round(fs * 0.35));
+        const bandY = hasHeader ? (
+          // Just below the header strip. Header height is ~fs + 4
+          // and sits at HEADER_INSET_Y; pad another small gap so the
+          // bar reads as decoration rather than a divider line.
+          y + HEADER_INSET_Y + fs + 6
+        ) : (
+          // Legacy: under one line of body text.
+          y + HEADER_INSET_Y + fs + Math.round(fs * 0.9)
+        );
+        return {
+          x: x + HEADER_INSET_X,
+          y: bandY,
+          width: Math.max(0, width - HEADER_INSET_X * 2),
+          height: bandHeight
+        };
+      })(),
+      topRightOuter: {
+        // Hangs off the top-right corner. The region extends past the
+        // node's right edge so the badge reads as a notification tab
+        // clinging to the outside of the corner rather than sitting on
+        // top of the node.
+        x: x + width - tab + TAB_BADGE_OVERHANG,
+        y: y - TAB_BADGE_LIFT,
+        width: tab,
+        height: tab
+      },
+      topLeft: {
+        x: x + CORNER_INSET,
+        y: y + CORNER_INSET,
+        width: corner,
+        height: corner
+      },
+      topRight: {
+        x: x + width - CORNER_INSET - corner,
+        y: y + CORNER_INSET,
+        width: corner,
+        height: corner
+      },
+      bottomLeft: {
+        x: x + CORNER_INSET,
+        y: y + height - CORNER_INSET - corner,
+        width: corner,
+        height: corner
+      },
+      bottomRight: {
+        x: x + width - CORNER_INSET - corner,
+        y: y + height - CORNER_INSET - corner,
+        width: corner,
+        height: corner
+      },
+      header: {
+        x: x + HEADER_INSET_X,
+        y: y + HEADER_INSET_Y,
+        width: Math.max(0, width - HEADER_INSET_X * 2),
+        height: header
+      },
+      footer: {
+        x: x + HEADER_INSET_X,
+        y: y + height - FOOTER_INSET_Y - footer,
+        width: Math.max(0, width - HEADER_INSET_X * 2),
+        height: footer
+      },
+      body: {
+        x: bodyX,
+        y: bodyY,
+        width: bodyWidth,
+        height: bodyHeight
+      }
+    };
+  }
+  function computeBodyReservations(node, theme, slots) {
+    if (!slots) {
+      return {
+        top: HEADER_INSET_Y,
+        bottom: FOOTER_INSET_Y,
+        left: HEADER_INSET_X,
+        right: HEADER_INSET_X
+      };
+    }
+    const r = computeReflowReservationsInternal(node, theme, slots);
+    let top = Math.max(r.top, HEADER_INSET_Y);
+    if (slots.bodyTop && slots.header) {
+      const fs = theme.node.fontSize;
+      const bandHeight = Math.max(4, Math.round(fs * 0.35));
+      const bandBottomFromTop = HEADER_INSET_Y + fs + 6 + bandHeight + 6;
+      top = Math.max(top, bandBottomFromTop);
+    }
+    return {
+      top,
+      bottom: Math.max(r.bottom, FOOTER_INSET_Y),
+      left: Math.max(r.left, HEADER_INSET_X),
+      right: Math.max(r.right, HEADER_INSET_X)
+    };
+  }
+  function isFn(v) {
+    return typeof v === "function";
+  }
+  function resolveAccessor(accessor, ctx) {
+    return isFn(accessor) ? accessor(ctx) : accessor;
+  }
+  function resolveAccessorOr(accessor, fallback, ctx) {
+    if (accessor === void 0)
+      return fallback;
+    return resolveAccessor(accessor, ctx);
+  }
+  function getCategorySlots(node, theme) {
+    if (!node.category)
+      return void 0;
+    const def = theme.categories[node.category];
+    return def?.slots;
+  }
+  function pickRefIndicatorCorner(defaultCorner, slots) {
+    if (!slots)
+      return defaultCorner;
+    const occupied = (c) => {
+      if (slots[c])
+        return true;
+      if ((c === "topLeft" || c === "topRight") && slots.header)
+        return true;
+      if ((c === "bottomLeft" || c === "bottomRight") && slots.footer)
+        return true;
+      if (c === "topRight" && slots.topRightOuter)
+        return true;
+      return false;
+    };
+    if (!occupied(defaultCorner))
+      return defaultCorner;
+    const order = {
+      topLeft: ["bottomRight", "topRight", "bottomLeft"],
+      topRight: ["bottomLeft", "bottomRight", "topLeft"],
+      bottomLeft: ["topRight", "topLeft", "bottomRight"],
+      bottomRight: ["topLeft", "bottomLeft", "topRight"]
+    };
+    for (const c of order[defaultCorner]) {
+      if (!occupied(c))
+        return c;
+    }
+    return defaultCorner;
+  }
+  function slotEntries(slots) {
+    const positions = [
+      "topEdge",
+      "bottomEdge",
+      "leftEdge",
+      "rightEdge",
+      "header",
+      "footer",
+      "body",
+      "bodyTop",
+      "topLeft",
+      "topRight",
+      "bottomLeft",
+      "bottomRight",
+      // Outer positions paint last so they visually sit above the node's
+      // own stroke — a tab badge needs to clip into the node's corner.
+      "topRightOuter"
+    ];
+    const out = [];
+    for (const p of positions) {
+      const s = slots[p];
+      if (s)
+        out.push([p, s]);
+    }
+    return out;
+  }
+  function computeReflowReservations(node, theme, slots) {
+    return computeReflowReservationsInternal(node, theme, slots);
+  }
+  function computeReflowReservationsInternal(node, theme, slots) {
+    if (!slots)
+      return { top: 0, bottom: 0, left: 0, right: 0 };
+    const regions = computeCategorySlotRegions(node, theme);
+    let top = 0;
+    let bottom = 0;
+    let left = 0;
+    let right = 0;
+    if (slots.header)
+      top = regions.header.height + HEADER_INSET_Y + 6;
+    if (slots.footer)
+      bottom = regions.footer.height + FOOTER_INSET_Y + 4;
+    if (slots.leftEdge)
+      left = regions.leftEdge.width + 4;
+    if (slots.rightEdge)
+      right = regions.rightEdge.width + 4;
+    if (slots.topLeft && slots.topLeft.kind === "dot") {
+      left = Math.max(left, regions.topLeft.x + regions.topLeft.width - node.x + 6);
+    }
+    const isDashboard = slots.header !== void 0 || slots.topRight !== void 0 || slots.bodyTop !== void 0 || slots.footer !== void 0 || slots.topLeft !== void 0 && slots.topLeft.kind === "dot";
+    if (isDashboard) {
+      if (!slots.header)
+        top = Math.max(top, HEADER_INSET_Y);
+      left = Math.max(left, HEADER_INSET_X);
+      right = Math.max(right, HEADER_INSET_X);
+    }
+    if (slots.topRight && slots.topRight.kind === "pill") {
+      right = Math.max(right, Math.round(theme.node.fontSize * 3.6));
+    }
+    const vertSpace = node.height - top - bottom;
+    if (vertSpace < theme.node.fontSize) {
+      top = 0;
+      bottom = 0;
+    }
+    const horSpace = node.width - left - right;
+    if (horSpace < theme.node.fontSize) {
+      left = 0;
+      right = 0;
+    }
+    return { top, bottom, left, right };
+  }
+
+  // ../core/dist/paths.js
+  function getAtPath(obj, path) {
+    if (obj == null)
+      return void 0;
+    const parts = path.split(".");
+    let cur = obj;
+    for (const p of parts) {
+      if (cur == null || typeof cur !== "object")
+        return void 0;
+      cur = cur[p];
+    }
+    return cur;
+  }
+  function setAtPath(obj, path, value) {
+    const parts = path.split(".");
+    const root2 = obj ? { ...obj } : {};
+    let cur = root2;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const key = parts[i];
+      const next = cur[key];
+      const cloned = next != null && typeof next === "object" && !Array.isArray(next) ? { ...next } : {};
+      cur[key] = cloned;
+      cur = cloned;
+    }
+    cur[parts[parts.length - 1]] = value;
+    return root2;
+  }
+
+  // ../core/dist/text.js
+  var GLYPH_WIDTH_RATIO = 0.55;
+  function measureTextWidth(text, fontSize) {
+    if (!text)
+      return 0;
+    return text.length * fontSize * GLYPH_WIDTH_RATIO;
+  }
+  function wrapText(text, maxWidth, fontSize) {
+    if (!text)
+      return [""];
+    if (maxWidth <= 0)
+      return [text];
+    const words = text.split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+      return [""];
+    const lines = [];
+    let current = "";
+    for (const word of words) {
+      const candidate = current ? `${current} ${word}` : word;
+      if (measureTextWidth(candidate, fontSize) > maxWidth && current) {
+        lines.push(current);
+        current = word;
+      } else {
+        current = candidate;
+      }
+    }
+    if (current)
+      lines.push(current);
+    return lines.length > 0 ? lines : [""];
+  }
+  function wrapTextWithBreaks(text, maxWidth, fontSize, maxLines) {
+    if (!text)
+      return [];
+    const paragraphs = text.split("\n");
+    const out = [];
+    for (const para of paragraphs) {
+      if (para === "") {
+        out.push("");
+        continue;
+      }
+      out.push(...wrapText(para, maxWidth, fontSize));
+    }
+    if (maxLines !== void 0 && maxLines > 0 && out.length > maxLines) {
+      const truncated = out.slice(0, maxLines);
+      const last = truncated[truncated.length - 1];
+      truncated[truncated.length - 1] = ellipsize(last, maxWidth, fontSize);
+      return truncated;
+    }
+    return out;
+  }
+  function ellipsize(line, maxWidth, fontSize) {
+    const ellipsis = "\u2026";
+    if (measureTextWidth(line + ellipsis, fontSize) <= maxWidth) {
+      return line + ellipsis;
+    }
+    const words = line.split(" ");
+    while (words.length > 1) {
+      words.pop();
+      const candidate = words.join(" ") + ellipsis;
+      if (measureTextWidth(candidate, fontSize) <= maxWidth)
+        return candidate;
+    }
+    return line + ellipsis;
+  }
 
   // ../core/dist/canvas.js
+  function deepClone(value) {
+    const g = globalThis;
+    if (typeof g.structuredClone === "function") {
+      return g.structuredClone(value);
+    }
+    return JSON.parse(JSON.stringify(value));
+  }
   function resolveCanvas(canvas, theme) {
     const effectiveTheme = canvas.theme?.categories ? {
       ...theme,
@@ -13856,7 +14253,7 @@ var SystemCanvas = (() => {
     }));
     return [...categoryOptions, ...typeOptions];
   }
-  function createNodeFromOption(option, x, y, id2 = generateNodeId()) {
+  function createNodeFromOption(option, x, y, id2 = generateNodeId(), theme) {
     const base = {
       id: id2,
       type: option.nodeType,
@@ -13865,6 +14262,10 @@ var SystemCanvas = (() => {
     };
     if (option.kind === "category") {
       base.category = option.value;
+      const def = theme?.categories?.[option.value];
+      if (def?.defaultCustomData) {
+        base.customData = deepClone(def.defaultCustomData);
+      }
     }
     switch (option.nodeType) {
       case "text":
@@ -14607,8 +15008,8 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/Viewport.js
-  var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
-  var import_react13 = __toESM(require_react(), 1);
+  var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
+  var import_react15 = __toESM(require_react(), 1);
 
   // ../react/dist/hooks/useViewport.js
   var import_react7 = __toESM(require_react(), 1);
@@ -17442,13 +17843,13 @@ var SystemCanvas = (() => {
       if (options2?.targetZoom != null) {
         targetZoom = options2.targetZoom;
       } else {
-        const padding = 40;
+        const padding = 8;
         const scaleX = rect.width / (node.width + padding * 2);
         const scaleY = rect.height / (node.height + padding * 2);
-        targetZoom = Math.min(scaleX, scaleY, 3);
+        targetZoom = Math.min(scaleX, scaleY, 12);
       }
       const t = identity2.translate(rect.width / 2 - nodeCx * targetZoom, rect.height / 2 - nodeCy * targetZoom).scale(targetZoom);
-      select_default2(svg).transition().duration(options2?.durationMs ?? 500).call(zoomBehaviorRef.current.transform, t).on("end", () => {
+      select_default2(svg).transition().duration(options2?.durationMs ?? 900).call(zoomBehaviorRef.current.transform, t).on("end", () => {
         onComplete?.();
       });
     }, []);
@@ -17464,10 +17865,10 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/NodeRenderer.js
-  var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
 
   // ../react/dist/components/TextNode.js
-  var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
 
   // ../react/dist/components/NodeIcon.js
   var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
@@ -17582,7 +17983,8 @@ var SystemCanvas = (() => {
     const stopAll = (e) => e.stopPropagation();
     const right = nodeX + nodeWidth;
     const bottom = nodeY + nodeHeight;
-    const nodeRadius = corner === "top-right" ? theme.group.cornerRadius : node.resolvedCornerRadius;
+    const isTopCorner = corner === "top-left" || corner === "top-right";
+    const nodeRadius = isTopCorner ? theme.group.cornerRadius : node.resolvedCornerRadius;
     const innerR = Math.max(0, Math.min(nodeRadius * 0.64, size / 2));
     let squareX;
     let squareY;
@@ -17591,10 +17993,18 @@ var SystemCanvas = (() => {
       squareX = right - size;
       squareY = bottom - size;
       carvePath = `M ${right} ${squareY} L ${squareX + innerR} ${squareY} A ${innerR} ${innerR} 0 0 0 ${squareX} ${squareY + innerR} L ${squareX} ${bottom}`;
-    } else {
+    } else if (corner === "top-right") {
       squareX = right - size;
       squareY = nodeY;
       carvePath = `M ${squareX} ${nodeY} L ${squareX} ${squareY + size - innerR} A ${innerR} ${innerR} 0 0 0 ${squareX + innerR} ${squareY + size} L ${right} ${squareY + size}`;
+    } else if (corner === "bottom-left") {
+      squareX = nodeX;
+      squareY = bottom - size;
+      carvePath = `M ${squareX + size} ${bottom} L ${squareX + size} ${squareY + innerR} A ${innerR} ${innerR} 0 0 0 ${squareX + size - innerR} ${squareY} L ${nodeX} ${squareY}`;
+    } else {
+      squareX = nodeX;
+      squareY = nodeY;
+      carvePath = `M ${squareX + size} ${nodeY} L ${squareX + size} ${squareY + size - innerR} A ${innerR} ${innerR} 0 0 1 ${squareX + size - innerR} ${squareY + size} L ${nodeX} ${squareY + size}`;
     }
     const cx = squareX + size / 2;
     const cy = squareY + size / 2;
@@ -17605,8 +18015,12 @@ var SystemCanvas = (() => {
     let hoverPath;
     if (corner === "bottom-right") {
       hoverPath = `M ${right} ${squareY} L ${right} ${bottom} L ${squareX} ${bottom} L ${squareX} ${squareY + innerR} A ${innerR} ${innerR} 0 0 1 ${squareX + innerR} ${squareY} Z`;
-    } else {
+    } else if (corner === "top-right") {
       hoverPath = `M ${squareX} ${nodeY} L ${right} ${nodeY} L ${right} ${squareY + size} L ${squareX + innerR} ${squareY + size} A ${innerR} ${innerR} 0 0 1 ${squareX} ${squareY + size - innerR} Z`;
+    } else if (corner === "bottom-left") {
+      hoverPath = `M ${nodeX} ${squareY} L ${squareX + size - innerR} ${squareY} A ${innerR} ${innerR} 0 0 1 ${squareX + size} ${squareY + innerR} L ${squareX + size} ${bottom} L ${nodeX} ${bottom} Z`;
+    } else {
+      hoverPath = `M ${nodeX} ${nodeY} L ${squareX + size} ${nodeY} L ${squareX + size} ${squareY + size - innerR} A ${innerR} ${innerR} 0 0 1 ${squareX + size - innerR} ${squareY + size} L ${nodeX} ${squareY + size} Z`;
     }
     return (0, import_jsx_runtime2.jsxs)("g", { className: "system-canvas-ref-indicator", style: { cursor: "pointer" }, onClick: (e) => {
       e.stopPropagation();
@@ -17627,31 +18041,357 @@ var SystemCanvas = (() => {
     }
   }
 
+  // ../react/dist/components/CategorySlotsLayer.js
+  var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+  var import_react10 = __toESM(require_react(), 1);
+
+  // ../react/dist/primitives/NodeColorFill.js
+  var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
+  function NodeColorFill({ region, color: color2, position, extent, length = 0.55, cornerRadius, opacity = 1 }) {
+    const isEdge = position === "topEdge" || position === "bottomEdge" || position === "leftEdge" || position === "rightEdge";
+    const effectiveExtent = extent ?? (isEdge ? "short" : "full");
+    if (isEdge && effectiveExtent === "short") {
+      return (0, import_jsx_runtime3.jsx)(ShortEdgeStrip, { region, color: color2, position, length: Math.max(0.1, Math.min(1, length)), opacity });
+    }
+    const rx = cornerRadius ?? // On full-width edge strips, round a bit so the ends tuck under the
+    // node's own rounded corners cleanly.
+    (isEdge ? Math.min(region.height, region.width) / 2 : 0);
+    return (0, import_jsx_runtime3.jsx)("rect", { x: region.x, y: region.y, width: region.width, height: region.height, rx, fill: color2, opacity, pointerEvents: "none" });
+  }
+  function ShortEdgeStrip({ region, color: color2, position, length, opacity }) {
+    let x = region.x;
+    let y = region.y;
+    let w = region.width;
+    let h = region.height;
+    if (position === "topEdge" || position === "bottomEdge") {
+      w = region.width * length;
+    } else {
+      h = region.height * length;
+    }
+    const shortDim = Math.min(w, h);
+    const rx = shortDim / 2;
+    return (0, import_jsx_runtime3.jsx)("rect", { x, y, width: w, height: h, rx, fill: color2, opacity, pointerEvents: "none" });
+  }
+
+  // ../react/dist/primitives/NodeProgressBar.js
+  var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
+  function NodeProgressBar({ region, value, color: color2, bgColor, cornerRadius, trackAlpha = 0.12 }) {
+    const v = Math.max(0, Math.min(1, value));
+    const filled = Math.max(0, region.width * v);
+    const rx = cornerRadius ?? Math.min(region.width, region.height) / 2;
+    const track = bgColor ?? colorWithAlpha(color2, trackAlpha);
+    return (0, import_jsx_runtime4.jsxs)("g", { pointerEvents: "none", children: [(0, import_jsx_runtime4.jsx)("rect", { x: region.x, y: region.y, width: region.width, height: region.height, rx, fill: track }), filled > 0 && (0, import_jsx_runtime4.jsx)("rect", { x: region.x, y: region.y, width: filled, height: region.height, rx, fill: color2 })] });
+  }
+  function colorWithAlpha(color2, alpha) {
+    if (color2.startsWith("#")) {
+      const h = color2.slice(1);
+      let r;
+      let g;
+      let b;
+      if (h.length === 3) {
+        r = parseInt(h[0] + h[0], 16);
+        g = parseInt(h[1] + h[1], 16);
+        b = parseInt(h[2] + h[2], 16);
+      } else if (h.length === 6) {
+        r = parseInt(h.slice(0, 2), 16);
+        g = parseInt(h.slice(2, 4), 16);
+        b = parseInt(h.slice(4, 6), 16);
+      } else {
+        return `rgba(255, 255, 255, ${alpha})`;
+      }
+      if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b)) {
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+      }
+    }
+    const match = color2.match(/^rgba?\(([^)]+)\)$/);
+    if (match) {
+      const parts = match[1].split(",").map((p) => p.trim());
+      if (parts.length >= 3) {
+        return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${alpha})`;
+      }
+    }
+    return `rgba(255, 255, 255, ${alpha})`;
+  }
+
+  // ../react/dist/primitives/NodeCountBadge.js
+  var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+  function NodeCountBadge({ region, value, theme, color: color2, textColor, position }) {
+    const label = typeof value === "number" ? String(value) : value;
+    if (label.length === 0)
+      return null;
+    const fill = color2 ?? theme.node.refIndicator.color;
+    const text = textColor ?? theme.background;
+    if (position === "topRightOuter") {
+      return (0, import_jsx_runtime5.jsx)(TabBadge, { region, label, fill, text, theme });
+    }
+    return (0, import_jsx_runtime5.jsx)(PillBadge, { region, label, fill, text, theme });
+  }
+  function TabBadge({ region, label, fill, text, theme }) {
+    const h = region.height;
+    const minW = h;
+    const fontSize = Math.max(9, h * 0.58);
+    const estW = label.length <= 1 ? minW : Math.max(minW, fontSize * 0.7 * label.length + 10);
+    const w = Math.min(estW, h * 3);
+    const x = region.x + region.width - w;
+    const y = region.y;
+    const rx = Math.min(6, h / 3);
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    const ringWidth = 2;
+    return (0, import_jsx_runtime5.jsxs)("g", { pointerEvents: "none", children: [(0, import_jsx_runtime5.jsx)("rect", { x: x - ringWidth, y: y - ringWidth, width: w + ringWidth * 2, height: h + ringWidth * 2, rx: rx + ringWidth, fill: theme.background }), (0, import_jsx_runtime5.jsx)("rect", { x, y, width: w, height: h, rx, fill }), (0, import_jsx_runtime5.jsx)("text", { x: cx, y: cy + fontSize * 0.35, fill: text, fontSize, fontWeight: 700, fontFamily: theme.node.fontFamily, textAnchor: "middle", children: label })] });
+  }
+  function PillBadge({ region, label, fill, text, theme }) {
+    const fontSize = Math.max(9, Math.min(region.height * 0.7, 14));
+    const estWidth = Math.max(region.height, region.height * 0.65 + label.length * fontSize * 0.55);
+    const width = Math.min(estWidth, region.width * 1.6);
+    const height = region.height;
+    const cx = region.x + region.width / 2;
+    const cy = region.y + region.height / 2;
+    const x = cx - width / 2;
+    const y = cy - height / 2;
+    return (0, import_jsx_runtime5.jsxs)("g", { pointerEvents: "none", children: [(0, import_jsx_runtime5.jsx)("rect", { x, y, width, height, rx: height / 2, fill }), (0, import_jsx_runtime5.jsx)("text", { x: cx, y: cy + fontSize * 0.35, fill: text, fontSize, fontWeight: 600, fontFamily: theme.node.fontFamily, textAnchor: "middle", children: label })] });
+  }
+
+  // ../react/dist/primitives/NodeDot.js
+  var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
+  function NodeDot({ region, color: color2 }) {
+    const cx = region.x + region.width / 2;
+    const cy = region.y + region.height / 2;
+    const r = Math.max(2, Math.min(region.width, region.height) * 0.2);
+    return (0, import_jsx_runtime6.jsx)("circle", { cx, cy, r, fill: color2, pointerEvents: "none" });
+  }
+
+  // ../react/dist/primitives/NodeText.js
+  var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+  var import_react9 = __toESM(require_react(), 1);
+  function NodeText({ region, value, theme, color: color2, fill, align = "start", fontWeight = 500, uppercase = false, useLabelFont = false, fontFamily, fontSize: fontSizeProp, wrap = false, maxLines, lineHeight: lineHeightProp }) {
+    const reactId = (0, import_react9.useId)();
+    const safeId = reactId.replace(/:/g, "");
+    if (!value)
+      return null;
+    const fontSize = fontSizeProp ?? Math.max(9, Math.min(theme.node.fontSize - 2, region.height * 0.85));
+    const lineHeight = lineHeightProp ?? Math.round(fontSize * 1.25);
+    const anchor = align === "start" ? "start" : align === "center" ? "middle" : "end";
+    const x = align === "start" ? region.x : align === "center" ? region.x + region.width / 2 : region.x + region.width;
+    const font = fontFamily ?? (useLabelFont ? theme.node.labelFont ?? theme.node.fontFamily : theme.node.fontFamily);
+    const gradId = fill ? `sc-text-grad-${safeId}` : void 0;
+    const fillAttr = gradId ? `url(#${gradId})` : color2 ?? theme.node.sublabelColor;
+    const displayValue = uppercase ? value.toUpperCase() : value;
+    if (!wrap) {
+      const y = region.y + region.height / 2 + fontSize * 0.36;
+      return (0, import_jsx_runtime7.jsxs)("g", { pointerEvents: "none", children: [fill && (0, import_jsx_runtime7.jsx)(GradientDef, { id: gradId, fill }), (0, import_jsx_runtime7.jsx)("text", { x, y, fill: fillAttr, fontSize, fontWeight, fontFamily: font, textAnchor: anchor, letterSpacing: uppercase ? 0.8 : 0.2, pointerEvents: "none", children: displayValue })] });
+    }
+    const lines = wrapTextWithBreaks(displayValue, region.width, fontSize, maxLines);
+    if (lines.length === 0)
+      return null;
+    const baseY = region.y + fontSize;
+    const clipId = `sc-text-clip-${safeId}`;
+    return (0, import_jsx_runtime7.jsxs)("g", { pointerEvents: "none", children: [(0, import_jsx_runtime7.jsxs)("defs", { children: [fill && (0, import_jsx_runtime7.jsx)(GradientDef, { id: gradId, fill }), (0, import_jsx_runtime7.jsx)("clipPath", { id: clipId, children: (0, import_jsx_runtime7.jsx)("rect", { x: region.x, y: region.y, width: region.width, height: region.height }) })] }), (0, import_jsx_runtime7.jsx)("g", { clipPath: `url(#${clipId})`, pointerEvents: "none", children: (0, import_jsx_runtime7.jsx)("text", { x, y: baseY, fill: fillAttr, fontSize, fontWeight, fontFamily: font, textAnchor: anchor, letterSpacing: uppercase ? 0.8 : 0.2, pointerEvents: "none", children: lines.map((line, i) => (0, import_jsx_runtime7.jsx)("tspan", { x, dy: i === 0 ? 0 : lineHeight, children: line || " " }, i)) }) })] });
+  }
+  function GradientDef({ id: id2, fill }) {
+    const angle = fill.angle ?? 0;
+    return (0, import_jsx_runtime7.jsxs)("linearGradient", { id: id2, x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", gradientTransform: angle ? `rotate(${angle} 0.5 0.5)` : void 0, children: [(0, import_jsx_runtime7.jsx)("stop", { offset: "0%", stopColor: fill.from }), (0, import_jsx_runtime7.jsx)("stop", { offset: "100%", stopColor: fill.to })] });
+  }
+
+  // ../react/dist/primitives/NodeStatusPill.js
+  var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
+  function NodeStatusPill({ region, value, theme, color: color2, textColor, fill }) {
+    const label = value.toUpperCase();
+    if (!label)
+      return null;
+    const h = Math.min(region.height, 18);
+    const fontSize = Math.max(9, h * 0.62);
+    const padX = 8;
+    const w = Math.max(h * 1.6, label.length * fontSize * 0.62 + padX * 2);
+    const x = region.x + region.width - w;
+    const y = region.y + (region.height - h) / 2;
+    const rx = h / 2;
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+    const tint = fill ?? toTint(color2);
+    const fg = textColor ?? color2;
+    return (0, import_jsx_runtime8.jsxs)("g", { pointerEvents: "none", children: [(0, import_jsx_runtime8.jsx)("rect", { x, y, width: w, height: h, rx, fill: tint }), (0, import_jsx_runtime8.jsx)("text", { x: cx, y: cy + fontSize * 0.35, fill: fg, fontSize, fontWeight: 700, fontFamily: theme.node.fontFamily, textAnchor: "middle", letterSpacing: 0.6, children: label })] });
+  }
+  function toTint(color2) {
+    if (color2.startsWith("#") && (color2.length === 7 || color2.length === 4)) {
+      let r;
+      let g;
+      let b;
+      if (color2.length === 7) {
+        r = parseInt(color2.slice(1, 3), 16);
+        g = parseInt(color2.slice(3, 5), 16);
+        b = parseInt(color2.slice(5, 7), 16);
+      } else {
+        r = parseInt(color2[1] + color2[1], 16);
+        g = parseInt(color2[2] + color2[2], 16);
+        b = parseInt(color2[3] + color2[3], 16);
+      }
+      if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b)) {
+        return `rgba(${r}, ${g}, ${b}, 0.15)`;
+      }
+    }
+    return "rgba(255, 255, 255, 0.08)";
+  }
+
+  // ../react/dist/components/CategorySlotsLayer.js
+  function CategorySlotsLayer({ node, theme, canvases, slots: slotsProp }) {
+    const slots = slotsProp ?? getCategorySlots(node, theme);
+    const regions = (0, import_react10.useMemo)(() => computeCategorySlotRegions(node, theme, slots), [node, theme, slots]);
+    const reactId = (0, import_react10.useId)();
+    const clipId = `sc-edge-clip-${reactId.replace(/:/g, "")}`;
+    if (!slots)
+      return null;
+    const getSubCanvas = (ref) => canvases?.[ref];
+    const entries = slotEntries(slots);
+    if (entries.length === 0)
+      return null;
+    const edgeEntries = entries.filter(([p]) => isEdgePosition(p));
+    const otherEntries = entries.filter(([p]) => !isEdgePosition(p));
+    const renderEntry = ([position, spec]) => {
+      const region = regions[position];
+      const ctx = {
+        node,
+        theme,
+        region,
+        getSubCanvas,
+        canvases,
+        rollup: (predicate) => node.ref ? rollupNodes(getSubCanvas(node.ref), predicate) : { total: 0, matched: 0, fraction: 0 }
+      };
+      return (0, import_jsx_runtime9.jsx)(SlotView, { position, spec, ctx }, position);
+    };
+    return (0, import_jsx_runtime9.jsxs)("g", { className: "system-canvas-slots", pointerEvents: "none", children: [edgeEntries.length > 0 && (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [(0, import_jsx_runtime9.jsx)("defs", { children: (0, import_jsx_runtime9.jsx)("clipPath", { id: clipId, children: (0, import_jsx_runtime9.jsx)("rect", { x: node.x, y: node.y, width: node.width, height: node.height, rx: node.resolvedCornerRadius }) }) }), (0, import_jsx_runtime9.jsx)("g", { clipPath: `url(#${clipId})`, children: edgeEntries.map(renderEntry) })] }), otherEntries.map(renderEntry)] });
+  }
+  function isEdgePosition(p) {
+    return p === "topEdge" || p === "bottomEdge" || p === "leftEdge" || p === "rightEdge";
+  }
+  function SlotView({ position, spec, ctx }) {
+    try {
+      return renderSlot(position, spec, ctx);
+    } catch (err) {
+      const env = globalThis.process?.env?.NODE_ENV;
+      if (env !== "production") {
+        console.warn("[system-canvas] slot render failed", position, err);
+      }
+      return null;
+    }
+  }
+  function renderSlot(position, spec, ctx) {
+    const { theme, node, region } = ctx;
+    const nodeColor = node.resolvedStroke;
+    switch (spec.kind) {
+      case "color": {
+        const color2 = resolveAccessorOr(spec.color, nodeColor, ctx);
+        const length = resolveAccessorOr(spec.length, 0.55, ctx);
+        return (0, import_jsx_runtime9.jsx)(NodeColorFill, { region, color: color2, position, extent: spec.extent, length });
+      }
+      case "progress": {
+        const value = resolveAccessor(spec.value, ctx);
+        if (spec.hideWhenZero && (!Number.isFinite(value) || value <= 0)) {
+          return null;
+        }
+        const color2 = resolveAccessorOr(spec.color, nodeColor, ctx);
+        const bgColor = resolveAccessorOr(spec.bgColor, "rgba(255,255,255,0.08)", ctx);
+        return (0, import_jsx_runtime9.jsx)(NodeProgressBar, { region, value, color: color2, bgColor });
+      }
+      case "count": {
+        const raw = resolveAccessor(spec.value, ctx);
+        const hideWhenEmpty = spec.hideWhenEmpty !== false;
+        if (hideWhenEmpty) {
+          if (raw === 0 || raw === "" || raw == null)
+            return null;
+        }
+        const color2 = resolveAccessorOr(spec.color, nodeColor, ctx);
+        const textColor = resolveAccessorOr(spec.textColor, theme.background, ctx);
+        return (0, import_jsx_runtime9.jsx)(NodeCountBadge, { region, value: raw, theme, color: color2, textColor, position });
+      }
+      case "pill": {
+        const value = resolveAccessor(spec.value, ctx);
+        if (!value)
+          return null;
+        const color2 = resolveAccessorOr(spec.color, nodeColor, ctx);
+        const textColor = spec.textColor ? resolveAccessor(spec.textColor, ctx) : void 0;
+        const fill = spec.fill ? resolveAccessor(spec.fill, ctx) : void 0;
+        return (0, import_jsx_runtime9.jsx)(NodeStatusPill, { region, value, theme, color: color2, textColor, fill });
+      }
+      case "text": {
+        const value = resolveAccessor(spec.value, ctx);
+        const color2 = resolveAccessorOr(spec.color, position === "body" ? theme.node.labelColor : theme.node.sublabelColor, ctx);
+        const defaultAlign = position === "header" || position === "footer" || position === "body" ? "start" : "center";
+        const align = spec.align ?? defaultAlign;
+        const isHeader = position === "header";
+        const isBody = position === "body";
+        const defaultWeight = isHeader ? 700 : isBody ? 600 : 500;
+        const defaultUppercase = isHeader;
+        const defaultUseLabelFont = isHeader || isBody;
+        const defaultFontSize = isBody ? Math.round(theme.node.fontSize * 1.35) : void 0;
+        const fontSize = spec.fontSize !== void 0 ? resolveAccessor(spec.fontSize, ctx) : defaultFontSize;
+        const fontWeight = spec.fontWeight !== void 0 ? resolveAccessor(spec.fontWeight, ctx) : defaultWeight;
+        const fontFamily = spec.fontFamily !== void 0 ? resolveAccessor(spec.fontFamily, ctx) : void 0;
+        const wrap = spec.wrap ?? isBody;
+        const lineHeight = spec.lineHeight !== void 0 ? resolveAccessor(spec.lineHeight, ctx) : void 0;
+        const fill = spec.fill !== void 0 ? resolveAccessor(spec.fill, ctx) : void 0;
+        return (0, import_jsx_runtime9.jsx)(NodeText, { region, value, theme, color: color2, fill, align, fontWeight, uppercase: spec.uppercase ?? defaultUppercase, useLabelFont: spec.useLabelFont ?? defaultUseLabelFont, fontFamily, fontSize, wrap, maxLines: spec.maxLines, lineHeight });
+      }
+      case "dot": {
+        const color2 = resolveAccessorOr(spec.color, nodeColor, ctx);
+        return (0, import_jsx_runtime9.jsx)(NodeDot, { region, color: color2 });
+      }
+      case "custom": {
+        return spec.render(ctx);
+      }
+    }
+  }
+
+  // ../react/dist/components/refCorner.js
+  function toKebabCorner(c) {
+    switch (c) {
+      case "topLeft":
+        return "top-left";
+      case "topRight":
+        return "top-right";
+      case "bottomLeft":
+        return "bottom-left";
+      case "bottomRight":
+        return "bottom-right";
+    }
+  }
+
   // ../react/dist/components/TextNode.js
-  function TextNode({ node, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, isSelected, isEditing }) {
+  function TextNode({ node, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, isSelected, isEditing, slots, canvases, reservedTop = 0, reservedBottom = 0, reservedLeft = 0, reservedRight = 0, refCorner = "bottomRight" }) {
     const { x, y, width, height } = node;
-    const cx = x + width / 2;
+    const contentX = x + reservedLeft;
+    const contentY = y + reservedTop;
+    const contentWidth = Math.max(0, width - reservedLeft - reservedRight);
+    const contentHeight = Math.max(0, height - reservedTop - reservedBottom);
     const text = node.text ?? "";
     const lines = text.split("\n").filter(Boolean);
     const mainLabel = lines[0] ?? node.id;
     const sublabel = lines[1];
-    const lineHeight = theme.node.fontSize + 4;
+    const hasBodySlot = slots?.body !== void 0;
+    const hasHeader = reservedTop > 0;
+    const labelFont = theme.node.labelFont ?? theme.node.fontFamily;
+    const labelFontSize = theme.node.fontSize + (hasHeader ? 1 : 0);
+    const lineHeight = labelFontSize + 4;
     const totalTextHeight = sublabel ? lineHeight + theme.node.sublabelFontSize + 4 : lineHeight;
-    const textStartY = y + (height - totalTextHeight) / 2 + theme.node.fontSize;
-    return (0, import_jsx_runtime3.jsxs)("g", { className: "system-canvas-node system-canvas-node--text", style: { cursor: onPointerDown ? "move" : node.isNavigable ? "pointer" : "default" }, onClick: (e) => onClick(node, e), onDoubleClick: (e) => onDoubleClick(node, e), onContextMenu: (e) => onContextMenu(node, e), onPointerDown: onPointerDown ? (e) => onPointerDown(node, e) : void 0, children: [(0, import_jsx_runtime3.jsx)("rect", { x, y, width, height, rx: node.resolvedCornerRadius, fill: theme.background }), (0, import_jsx_runtime3.jsx)("rect", { x, y, width, height, rx: node.resolvedCornerRadius, fill: node.resolvedFill, stroke: node.resolvedStroke, strokeWidth: theme.node.strokeWidth }), !isEditing && (0, import_jsx_runtime3.jsx)("text", { x: cx, y: textStartY, fill: theme.node.labelColor, fontSize: theme.node.fontSize, fontWeight: 600, fontFamily: theme.node.fontFamily, textAnchor: "middle", pointerEvents: "none", children: mainLabel }), !isEditing && sublabel && (0, import_jsx_runtime3.jsx)("text", { x: cx, y: textStartY + lineHeight, fill: theme.node.sublabelColor, fontSize: theme.node.sublabelFontSize, fontFamily: theme.node.fontFamily, textAnchor: "middle", pointerEvents: "none", children: sublabel }), node.isNavigable && (0, import_jsx_runtime3.jsx)(RefIndicator, { node, theme, nodeX: x, nodeY: y, nodeWidth: width, nodeHeight: height, strokeColor: node.resolvedStroke, strokeWidth: theme.node.strokeWidth, onNavigate }), node.resolvedIcon && (0, import_jsx_runtime3.jsx)(NodeIcon, { icon: node.resolvedIcon, x: x + 8, y: y + height / 2 - 7, size: 14, color: node.resolvedStroke, opacity: 0.7, customIcons: theme.icons })] });
+    const labelAnchor = hasHeader ? "start" : "middle";
+    const labelX = hasHeader ? contentX : contentX + contentWidth / 2;
+    const textStartY = hasHeader ? contentY + labelFontSize + 2 : contentY + (contentHeight - totalTextHeight) / 2 + labelFontSize;
+    return (0, import_jsx_runtime10.jsxs)("g", { className: "system-canvas-node system-canvas-node--text", style: { cursor: onPointerDown ? "move" : node.isNavigable ? "pointer" : "default" }, onClick: (e) => onClick(node, e), onDoubleClick: (e) => onDoubleClick(node, e), onContextMenu: (e) => onContextMenu(node, e), onPointerDown: onPointerDown ? (e) => onPointerDown(node, e) : void 0, children: [(0, import_jsx_runtime10.jsx)("rect", { x, y, width, height, rx: node.resolvedCornerRadius, fill: theme.background }), (0, import_jsx_runtime10.jsx)("rect", { x, y, width, height, rx: node.resolvedCornerRadius, fill: node.resolvedFill, stroke: node.resolvedStroke, strokeWidth: theme.node.strokeWidth }), !isEditing && !hasBodySlot && (0, import_jsx_runtime10.jsx)("text", { x: labelX, y: textStartY, fill: theme.node.labelColor, fontSize: labelFontSize, fontWeight: 600, fontFamily: labelFont, textAnchor: labelAnchor, pointerEvents: "none", children: mainLabel }), !isEditing && !hasBodySlot && sublabel && (0, import_jsx_runtime10.jsx)("text", { x: labelX, y: textStartY + lineHeight, fill: theme.node.sublabelColor, fontSize: theme.node.sublabelFontSize, fontFamily: theme.node.fontFamily, textAnchor: labelAnchor, pointerEvents: "none", children: sublabel }), node.resolvedIcon && (0, import_jsx_runtime10.jsx)(NodeIcon, { icon: node.resolvedIcon, x: x + 8 + reservedLeft, y: contentY + contentHeight / 2 - 7, size: 14, color: node.resolvedStroke, opacity: 0.7, customIcons: theme.icons }), slots && (0, import_jsx_runtime10.jsx)(CategorySlotsLayer, { node, theme, canvases, slots }), node.isNavigable && (0, import_jsx_runtime10.jsx)(RefIndicator, { node, theme, nodeX: x, nodeY: y, nodeWidth: width, nodeHeight: height, strokeColor: node.resolvedStroke, strokeWidth: theme.node.strokeWidth, corner: toKebabCorner(refCorner), onNavigate })] });
   }
 
   // ../react/dist/components/FileNode.js
-  var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
-  function FileNode({ node, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, isSelected, isEditing }) {
+  var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+  function FileNode({ node, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, isSelected, isEditing, slots, canvases, reservedTop = 0, reservedBottom = 0, reservedLeft = 0, reservedRight = 0, refCorner = "bottomRight" }) {
     const { x, y, width, height } = node;
     const filePath = node.file ?? "";
     const fileName = filePath.split("/").pop() ?? filePath;
     const dirPath = filePath.includes("/") ? filePath.slice(0, filePath.lastIndexOf("/")) : "";
     const subpath = node.subpath ?? "";
     const fold = 10;
-    const textPadding = 10;
-    const maxTextWidth = width - textPadding * 2 - fold;
+    const textPadding = 10 + reservedLeft;
+    const maxTextWidth = width - textPadding - reservedRight - fold;
+    const contentY = y + reservedTop;
+    const contentHeight = Math.max(0, height - reservedTop - reservedBottom);
     const shapePath = [
       `M ${x + 2} ${y}`,
       `L ${x + width - fold} ${y}`,
@@ -17668,35 +18408,41 @@ var SystemCanvas = (() => {
     const strokeColor = node.resolvedStroke;
     const thinStroke = 0.75;
     const clipId = `file-clip-${node.id}`;
-    return (0, import_jsx_runtime4.jsxs)("g", { className: "system-canvas-node system-canvas-node--file", style: { cursor: onPointerDown ? "move" : node.isNavigable ? "pointer" : "default" }, onClick: (e) => onClick(node, e), onDoubleClick: (e) => onDoubleClick(node, e), onContextMenu: (e) => onContextMenu(node, e), onPointerDown: onPointerDown ? (e) => onPointerDown(node, e) : void 0, children: [(0, import_jsx_runtime4.jsx)("defs", { children: (0, import_jsx_runtime4.jsx)("clipPath", { id: clipId, children: (0, import_jsx_runtime4.jsx)("rect", { x: x + textPadding, y, width: maxTextWidth, height }) }) }), (0, import_jsx_runtime4.jsx)("path", { d: shapePath, fill: theme.background }), (0, import_jsx_runtime4.jsx)("path", { d: shapePath, fill: node.resolvedFill, stroke: strokeColor, strokeWidth: thinStroke }), (0, import_jsx_runtime4.jsx)("path", { d: foldPath, fill: "none", stroke: strokeColor, strokeWidth: thinStroke, opacity: 0.5 }), !isEditing && (0, import_jsx_runtime4.jsxs)("g", { clipPath: `url(#${clipId})`, children: [dirPath && (0, import_jsx_runtime4.jsxs)("text", { x: x + textPadding, y: y + 14, fill: theme.node.sublabelColor, fontSize: theme.node.sublabelFontSize - 1, fontFamily: theme.node.fontFamily, pointerEvents: "none", opacity: 0.6, children: [dirPath, "/"] }), (0, import_jsx_runtime4.jsx)("text", { x: x + textPadding, y: y + (dirPath ? 28 : height / 2 + (subpath ? -2 : 4)), fill: theme.node.labelColor, fontSize: theme.node.fontSize - 1, fontWeight: 500, fontFamily: theme.node.fontFamily, pointerEvents: "none", children: fileName }), subpath && (0, import_jsx_runtime4.jsx)("text", { x: x + textPadding, y: y + (dirPath ? 40 : height / 2 + theme.node.fontSize + 2), fill: theme.node.sublabelColor, fontSize: theme.node.sublabelFontSize, fontFamily: theme.node.fontFamily, pointerEvents: "none", children: subpath })] }), node.isNavigable && (0, import_jsx_runtime4.jsx)(RefIndicator, { node, theme, nodeX: x, nodeY: y, nodeWidth: width, nodeHeight: height, strokeColor, strokeWidth: thinStroke, onNavigate })] });
+    return (0, import_jsx_runtime11.jsxs)("g", { className: "system-canvas-node system-canvas-node--file", style: { cursor: onPointerDown ? "move" : node.isNavigable ? "pointer" : "default" }, onClick: (e) => onClick(node, e), onDoubleClick: (e) => onDoubleClick(node, e), onContextMenu: (e) => onContextMenu(node, e), onPointerDown: onPointerDown ? (e) => onPointerDown(node, e) : void 0, children: [(0, import_jsx_runtime11.jsx)("defs", { children: (0, import_jsx_runtime11.jsx)("clipPath", { id: clipId, children: (0, import_jsx_runtime11.jsx)("rect", { x: x + textPadding, y: contentY, width: maxTextWidth, height: contentHeight }) }) }), (0, import_jsx_runtime11.jsx)("path", { d: shapePath, fill: theme.background }), (0, import_jsx_runtime11.jsx)("path", { d: shapePath, fill: node.resolvedFill, stroke: strokeColor, strokeWidth: thinStroke }), (0, import_jsx_runtime11.jsx)("path", { d: foldPath, fill: "none", stroke: strokeColor, strokeWidth: thinStroke, opacity: 0.5 }), !isEditing && !slots?.body && (0, import_jsx_runtime11.jsxs)("g", { clipPath: `url(#${clipId})`, children: [dirPath && (0, import_jsx_runtime11.jsxs)("text", { x: x + textPadding, y: contentY + 14, fill: theme.node.sublabelColor, fontSize: theme.node.sublabelFontSize - 1, fontFamily: theme.node.fontFamily, pointerEvents: "none", opacity: 0.6, children: [dirPath, "/"] }), (0, import_jsx_runtime11.jsx)("text", { x: x + textPadding, y: contentY + (dirPath ? 28 : contentHeight / 2 + (subpath ? -2 : 4)), fill: theme.node.labelColor, fontSize: theme.node.fontSize - 1, fontWeight: 500, fontFamily: theme.node.fontFamily, pointerEvents: "none", children: fileName }), subpath && (0, import_jsx_runtime11.jsx)("text", { x: x + textPadding, y: contentY + (dirPath ? 40 : contentHeight / 2 + theme.node.fontSize + 2), fill: theme.node.sublabelColor, fontSize: theme.node.sublabelFontSize, fontFamily: theme.node.fontFamily, pointerEvents: "none", children: subpath })] }), slots && (0, import_jsx_runtime11.jsx)(CategorySlotsLayer, { node, theme, canvases, slots }), node.isNavigable && (0, import_jsx_runtime11.jsx)(RefIndicator, { node, theme, nodeX: x, nodeY: y, nodeWidth: width, nodeHeight: height, strokeColor, strokeWidth: thinStroke, corner: toKebabCorner(refCorner), onNavigate })] });
   }
 
   // ../react/dist/components/LinkNode.js
-  var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
-  function LinkNode({ node, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, isSelected, isEditing }) {
+  var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+  function LinkNode({ node, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, isSelected, isEditing, slots, canvases, reservedTop = 0, reservedBottom = 0, reservedLeft = 0, reservedRight = 0, refCorner = "bottomRight" }) {
     const { x, y, width, height } = node;
-    const cx = x + width / 2;
+    const contentX = x + reservedLeft;
+    const contentY = y + reservedTop;
+    const contentWidth = Math.max(0, width - reservedLeft - reservedRight);
+    const contentHeight = Math.max(0, height - reservedTop - reservedBottom);
+    const cx = contentX + contentWidth / 2;
     let displayUrl = node.url ?? "";
     try {
       const url = new URL(displayUrl);
       displayUrl = url.hostname;
     } catch {
     }
-    return (0, import_jsx_runtime5.jsxs)("g", { className: "system-canvas-node system-canvas-node--link", style: { cursor: onPointerDown ? "move" : "pointer" }, onClick: (e) => onClick(node, e), onDoubleClick: (e) => onDoubleClick(node, e), onContextMenu: (e) => onContextMenu(node, e), onPointerDown: onPointerDown ? (e) => onPointerDown(node, e) : void 0, children: [(0, import_jsx_runtime5.jsx)("rect", { x, y, width, height, rx: node.resolvedCornerRadius, fill: theme.background }), (0, import_jsx_runtime5.jsx)("rect", { x, y, width, height, rx: node.resolvedCornerRadius, fill: node.resolvedFill, stroke: node.resolvedStroke, strokeWidth: theme.node.strokeWidth }), !isEditing && (0, import_jsx_runtime5.jsx)("text", { x: x + 12, y: y + height / 2 + 4, fill: node.resolvedStroke, fontSize: 12, fontFamily: theme.node.fontFamily, pointerEvents: "none", opacity: 0.6, children: "\u29C9" }), !isEditing && (0, import_jsx_runtime5.jsx)("text", { x: cx, y: y + height / 2 + 4, fill: theme.node.labelColor, fontSize: theme.node.fontSize, fontWeight: 600, fontFamily: theme.node.fontFamily, textAnchor: "middle", pointerEvents: "none", textDecoration: "underline", children: displayUrl }), node.isNavigable && (0, import_jsx_runtime5.jsx)(RefIndicator, { node, theme, nodeX: x, nodeY: y, nodeWidth: width, nodeHeight: height, strokeColor: node.resolvedStroke, strokeWidth: theme.node.strokeWidth, onNavigate })] });
+    return (0, import_jsx_runtime12.jsxs)("g", { className: "system-canvas-node system-canvas-node--link", style: { cursor: onPointerDown ? "move" : "pointer" }, onClick: (e) => onClick(node, e), onDoubleClick: (e) => onDoubleClick(node, e), onContextMenu: (e) => onContextMenu(node, e), onPointerDown: onPointerDown ? (e) => onPointerDown(node, e) : void 0, children: [(0, import_jsx_runtime12.jsx)("rect", { x, y, width, height, rx: node.resolvedCornerRadius, fill: theme.background }), (0, import_jsx_runtime12.jsx)("rect", { x, y, width, height, rx: node.resolvedCornerRadius, fill: node.resolvedFill, stroke: node.resolvedStroke, strokeWidth: theme.node.strokeWidth }), !isEditing && !slots?.body && (0, import_jsx_runtime12.jsx)("text", { x: contentX + 12, y: contentY + contentHeight / 2 + 4, fill: node.resolvedStroke, fontSize: 12, fontFamily: theme.node.fontFamily, pointerEvents: "none", opacity: 0.6, children: "\u29C9" }), !isEditing && !slots?.body && (0, import_jsx_runtime12.jsx)("text", { x: cx, y: contentY + contentHeight / 2 + 4, fill: theme.node.labelColor, fontSize: theme.node.fontSize, fontWeight: 600, fontFamily: theme.node.fontFamily, textAnchor: "middle", pointerEvents: "none", textDecoration: "underline", children: displayUrl }), slots && (0, import_jsx_runtime12.jsx)(CategorySlotsLayer, { node, theme, canvases, slots }), node.isNavigable && (0, import_jsx_runtime12.jsx)(RefIndicator, { node, theme, nodeX: x, nodeY: y, nodeWidth: width, nodeHeight: height, strokeColor: node.resolvedStroke, strokeWidth: theme.node.strokeWidth, corner: toKebabCorner(refCorner), onNavigate })] });
   }
 
   // ../react/dist/components/GroupNode.js
-  var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
-  function GroupNode({ node, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, isSelected, isEditing }) {
+  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+  function GroupNode({ node, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, isSelected, isEditing, slots, canvases, reservedTop = 0, reservedBottom = 0, reservedLeft = 0, reservedRight = 0, refCorner = "topRight" }) {
     const { x, y, width, height } = node;
     const stroke = node.color ? node.resolvedStroke : theme.group.stroke;
     const fill = node.color ? node.resolvedFill : theme.group.fill;
-    return (0, import_jsx_runtime6.jsxs)("g", { className: "system-canvas-node system-canvas-node--group", style: { cursor: onPointerDown ? "move" : node.isNavigable ? "pointer" : "default" }, onClick: (e) => onClick(node, e), onDoubleClick: (e) => onDoubleClick(node, e), onContextMenu: (e) => onContextMenu(node, e), onPointerDown: onPointerDown ? (e) => onPointerDown(node, e) : void 0, children: [(0, import_jsx_runtime6.jsx)("rect", { x, y, width, height, rx: theme.group.cornerRadius, fill, stroke, strokeWidth: theme.group.strokeWidth, strokeDasharray: theme.group.strokeDasharray }), !isEditing && node.label && (0, import_jsx_runtime6.jsx)("text", { x: x + 12, y: y + theme.group.labelFontSize + 8, fill: node.color ? stroke : theme.group.labelColor, fontSize: theme.group.labelFontSize, fontWeight: 600, fontFamily: theme.node.fontFamily, pointerEvents: "none", children: node.label }), node.isNavigable && (0, import_jsx_runtime6.jsx)(RefIndicator, { node, theme, nodeX: x, nodeY: y, nodeWidth: width, nodeHeight: height, strokeColor: stroke, strokeWidth: theme.group.strokeWidth, corner: "top-right", onNavigate })] });
+    const labelX = x + 12 + reservedLeft;
+    const labelY = y + reservedTop + theme.group.labelFontSize + 8;
+    return (0, import_jsx_runtime13.jsxs)("g", { className: "system-canvas-node system-canvas-node--group", style: { cursor: onPointerDown ? "move" : node.isNavigable ? "pointer" : "default" }, onClick: (e) => onClick(node, e), onDoubleClick: (e) => onDoubleClick(node, e), onContextMenu: (e) => onContextMenu(node, e), onPointerDown: onPointerDown ? (e) => onPointerDown(node, e) : void 0, children: [(0, import_jsx_runtime13.jsx)("rect", { x, y, width, height, rx: theme.group.cornerRadius, fill, stroke, strokeWidth: theme.group.strokeWidth, strokeDasharray: theme.group.strokeDasharray }), !isEditing && !slots?.body && node.label && (0, import_jsx_runtime13.jsx)("text", { x: labelX, y: labelY, fill: node.color ? stroke : theme.group.labelColor, fontSize: theme.group.labelFontSize, fontWeight: 600, fontFamily: theme.node.fontFamily, pointerEvents: "none", children: node.label }), slots && (0, import_jsx_runtime13.jsx)(CategorySlotsLayer, { node, theme, canvases, slots }), node.isNavigable && (0, import_jsx_runtime13.jsx)(RefIndicator, { node, theme, nodeX: x, nodeY: y, nodeWidth: width, nodeHeight: height, strokeColor: stroke, strokeWidth: theme.group.strokeWidth, corner: toKebabCorner(refCorner), onNavigate })] });
   }
 
   // ../react/dist/components/ResizeHandles.js
-  var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
-  var import_react9 = __toESM(require_react(), 1);
+  var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+  var import_react11 = __toESM(require_react(), 1);
   var HANDLE_SIZE = 7;
   var CORNERS = [
     { corner: "nw", cursor: "nwse-resize", anchor: "nw" },
@@ -17707,7 +18453,7 @@ var SystemCanvas = (() => {
   var cornerInset = (cornerRadius) => Math.min(cornerRadius * 0.25, 3);
   function ResizeHandles({ node, theme, onHandlePointerDown }) {
     const { x, y, width, height } = node;
-    const [hoveredCorner, setHoveredCorner] = (0, import_react9.useState)(null);
+    const [hoveredCorner, setHoveredCorner] = (0, import_react11.useState)(null);
     const handleColor = node.resolvedStroke ?? theme.node.labelColor;
     const i = cornerInset(node.resolvedCornerRadius);
     const anchorPos = (anchor) => {
@@ -17722,36 +18468,54 @@ var SystemCanvas = (() => {
           return { cx: x + width - i, cy: y + height - i };
       }
     };
-    return (0, import_jsx_runtime7.jsx)("g", { className: "system-canvas-resize-handles", pointerEvents: "all", children: CORNERS.map(({ corner, cursor, anchor }) => {
+    return (0, import_jsx_runtime14.jsx)("g", { className: "system-canvas-resize-handles", pointerEvents: "all", children: CORNERS.map(({ corner, cursor, anchor }) => {
       const { cx, cy } = anchorPos(anchor);
       const isHovered = hoveredCorner === corner;
       const s = isHovered ? HANDLE_SIZE + 2 : HANDLE_SIZE;
       const half = s / 2;
-      return (0, import_jsx_runtime7.jsx)("rect", { x: cx - half, y: cy - half, width: s, height: s, fill: handleColor, style: { cursor }, onPointerEnter: () => setHoveredCorner(corner), onPointerLeave: () => setHoveredCorner((c) => c === corner ? null : c), onPointerDown: (e) => onHandlePointerDown(node, corner, e), onClick: (e) => e.stopPropagation(), onDoubleClick: (e) => e.stopPropagation() }, corner);
+      return (0, import_jsx_runtime14.jsx)("rect", { x: cx - half, y: cy - half, width: s, height: s, fill: handleColor, style: { cursor }, onPointerEnter: () => setHoveredCorner(corner), onPointerLeave: () => setHoveredCorner((c) => c === corner ? null : c), onPointerDown: (e) => onHandlePointerDown(node, corner, e), onClick: (e) => e.stopPropagation(), onDoubleClick: (e) => e.stopPropagation() }, corner);
     }) });
   }
 
   // ../react/dist/components/NodeRenderer.js
-  function NodeRenderer({ nodes, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, selectedId, editingId, onResizeHandlePointerDown, only }) {
+  function NodeRenderer({ nodes, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, selectedId, editingId, onResizeHandlePointerDown, canvases, only }) {
     const groups = nodes.filter((n) => n.type === "group");
     const others = nodes.filter((n) => n.type !== "group");
-    const common = (node) => ({
-      node,
-      theme,
-      onClick,
-      onDoubleClick,
-      onContextMenu,
-      onNavigate,
-      onPointerDown,
-      isSelected: selectedId === node.id,
-      isEditing: editingId === node.id
-    });
+    const common = (node) => {
+      const slots = getCategorySlots(node, theme);
+      const reservations = computeReflowReservations(node, theme, slots);
+      const defaultCorner = node.type === "group" ? "topRight" : "bottomRight";
+      const refCorner = pickRefIndicatorCorner(defaultCorner, slots);
+      return {
+        node,
+        theme,
+        onClick,
+        onDoubleClick,
+        onContextMenu,
+        onNavigate,
+        onPointerDown,
+        isSelected: selectedId === node.id,
+        isEditing: editingId === node.id,
+        slots,
+        canvases,
+        reservedTop: reservations.top,
+        reservedBottom: reservations.bottom,
+        reservedLeft: reservations.left,
+        reservedRight: reservations.right,
+        refCorner
+      };
+    };
     const selectedNode = selectedId && editingId !== selectedId ? nodes.find((n) => n.id === selectedId) : void 0;
     const renderResizeHandles = only !== "groups" && selectedNode && onResizeHandlePointerDown;
-    return (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [only !== "non-groups" && groups.map((node) => (0, import_jsx_runtime8.jsx)(GroupNode, { ...common(node) }, node.id)), only !== "groups" && others.map((node) => {
+    return (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [only !== "non-groups" && groups.map((node) => (0, import_jsx_runtime15.jsx)(GroupNode, { ...common(node) }, node.id)), only !== "groups" && others.map((node) => {
       const Component = getNodeComponent(node.type);
-      return (0, import_jsx_runtime8.jsx)(Component, { ...common(node) }, node.id);
-    }), renderResizeHandles && (0, import_jsx_runtime8.jsx)(ResizeHandles, { node: selectedNode, theme, onHandlePointerDown: onResizeHandlePointerDown })] });
+      return (0, import_jsx_runtime15.jsx)(Component, { ...common(node) }, node.id);
+    }), renderResizeHandles && (0, import_jsx_runtime15.jsx)(ResizeHandles, { node: selectedNode, theme, onHandlePointerDown: onResizeHandlePointerDown }), renderResizeHandles && (() => {
+      const slots = getCategorySlots(selectedNode, theme);
+      if (!slots?.topRightOuter)
+        return null;
+      return (0, import_jsx_runtime15.jsx)(CategorySlotsLayer, { node: selectedNode, theme, canvases, slots: { topRightOuter: slots.topRightOuter } });
+    })()] });
   }
   function getNodeComponent(type) {
     switch (type) {
@@ -17765,9 +18529,9 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/EdgeRenderer.js
-  var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
   function EdgeRenderer({ edges, nodeMap, theme, defaultEdgeStyle, onClick, onDoubleClick, onContextMenu, selectedId, editingId }) {
-    return (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [(0, import_jsx_runtime9.jsx)("defs", { children: (0, import_jsx_runtime9.jsx)("marker", { id: "system-canvas-arrowhead", markerWidth: theme.edge.arrowSize, markerHeight: theme.edge.arrowSize * 0.7, refX: theme.edge.arrowSize - 1, refY: theme.edge.arrowSize * 0.35, orient: "auto", markerUnits: "userSpaceOnUse", children: (0, import_jsx_runtime9.jsx)("polygon", { points: `0 0, ${theme.edge.arrowSize} ${theme.edge.arrowSize * 0.35}, 0 ${theme.edge.arrowSize * 0.7}`, fill: "context-stroke" }) }) }), [...edges].map((edge, i) => ({ edge, i })).sort((a, b) => {
+    return (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [(0, import_jsx_runtime16.jsx)("defs", { children: (0, import_jsx_runtime16.jsx)("marker", { id: "system-canvas-arrowhead", markerWidth: theme.edge.arrowSize, markerHeight: theme.edge.arrowSize * 0.7, refX: theme.edge.arrowSize - 1, refY: theme.edge.arrowSize * 0.35, orient: "auto", markerUnits: "userSpaceOnUse", children: (0, import_jsx_runtime16.jsx)("polygon", { points: `0 0, ${theme.edge.arrowSize} ${theme.edge.arrowSize * 0.35}, 0 ${theme.edge.arrowSize * 0.7}`, fill: "context-stroke" }) }) }), [...edges].map((edge, i) => ({ edge, i })).sort((a, b) => {
       const aSel = selectedId === a.edge.id ? 2 : 0;
       const bSel = selectedId === b.edge.id ? 2 : 0;
       const aCol = a.edge.color ? 1 : 0;
@@ -17792,20 +18556,36 @@ var SystemCanvas = (() => {
       const toEnd = edge.toEnd ?? "arrow";
       const fromEnd = edge.fromEnd ?? "none";
       const arrowId = "system-canvas-arrowhead";
-      return (0, import_jsx_runtime9.jsxs)("g", { className: "system-canvas-edge", style: { cursor: "pointer" }, onClick: (e) => onClick(edge, e), onDoubleClick: (e) => onDoubleClick?.(edge, e), onContextMenu: (e) => onContextMenu(edge, e), children: [(0, import_jsx_runtime9.jsx)("path", { d: pathD, fill: "none", stroke: "transparent", strokeWidth: 12 }), (0, import_jsx_runtime9.jsx)("path", { d: pathD, fill: "none", stroke: edgeColor, strokeWidth, markerEnd: toEnd === "arrow" ? `url(#${arrowId})` : void 0, markerStart: fromEnd === "arrow" ? `url(#${arrowId})` : void 0 }), edge.label && !isEditing && (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [(0, import_jsx_runtime9.jsx)("rect", { x: midpoint.x - edge.label.length * 3 - 4, y: midpoint.y - theme.edge.labelFontSize - 2, width: edge.label.length * 6 + 8, height: theme.edge.labelFontSize + 6, rx: 3, fill: theme.background, opacity: 0.8 }), (0, import_jsx_runtime9.jsx)("text", { x: midpoint.x, y: midpoint.y, fill: isSelected ? theme.node.labelColor : theme.edge.labelColor, fontSize: theme.edge.labelFontSize, fontFamily: theme.node.fontFamily, textAnchor: "middle", pointerEvents: "none", children: edge.label })] })] }, edge.id);
+      return (0, import_jsx_runtime16.jsxs)("g", { className: "system-canvas-edge", style: { cursor: "pointer" }, onClick: (e) => onClick(edge, e), onDoubleClick: (e) => onDoubleClick?.(edge, e), onContextMenu: (e) => onContextMenu(edge, e), children: [(0, import_jsx_runtime16.jsx)("path", { d: pathD, fill: "none", stroke: "transparent", strokeWidth: 12 }), (0, import_jsx_runtime16.jsx)("path", { d: pathD, fill: "none", stroke: edgeColor, strokeWidth, markerEnd: toEnd === "arrow" ? `url(#${arrowId})` : void 0, markerStart: fromEnd === "arrow" ? `url(#${arrowId})` : void 0 }), edge.label && !isEditing && (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [(0, import_jsx_runtime16.jsx)("rect", { x: midpoint.x - edge.label.length * 3 - 4, y: midpoint.y - theme.edge.labelFontSize - 2, width: edge.label.length * 6 + 8, height: theme.edge.labelFontSize + 6, rx: 3, fill: theme.background, opacity: 0.8 }), (0, import_jsx_runtime16.jsx)("text", { x: midpoint.x, y: midpoint.y, fill: isSelected ? theme.node.labelColor : theme.edge.labelColor, fontSize: theme.edge.labelFontSize, fontFamily: theme.node.fontFamily, textAnchor: "middle", pointerEvents: "none", children: edge.label })] })] }, edge.id);
     })] });
   }
 
   // ../react/dist/components/NodeEditor.js
-  var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
-  var import_react10 = __toESM(require_react(), 1);
+  var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+  var import_react12 = __toESM(require_react(), 1);
   function NodeEditor({ node, theme, onCommit, onCancel }) {
+    const editableFields = useCategoryFields(node, theme);
+    if (editableFields) {
+      return (0, import_jsx_runtime17.jsx)(FormEditor, { node, theme, fields: editableFields, onCommit, onCancel });
+    }
+    return (0, import_jsx_runtime17.jsx)(SingleFieldEditor, { node, theme, onCommit, onCancel });
+  }
+  function useCategoryFields(node, theme) {
+    if (!node.category)
+      return null;
+    const def = theme.categories[node.category];
+    const fields = def?.editableFields;
+    if (!fields || fields.length === 0)
+      return null;
+    return fields;
+  }
+  function SingleFieldEditor({ node, theme, onCommit, onCancel }) {
     const initial = getInitialValue(node);
-    const [value, setValue] = (0, import_react10.useState)(initial);
-    const textareaRef = (0, import_react10.useRef)(null);
-    const inputRef = (0, import_react10.useRef)(null);
-    const committedRef = (0, import_react10.useRef)(false);
-    (0, import_react10.useEffect)(() => {
+    const [value, setValue] = (0, import_react12.useState)(initial);
+    const textareaRef = (0, import_react12.useRef)(null);
+    const inputRef = (0, import_react12.useRef)(null);
+    const committedRef = (0, import_react12.useRef)(false);
+    (0, import_react12.useEffect)(() => {
       const el = textareaRef.current ?? inputRef.current;
       if (el) {
         el.focus();
@@ -17821,7 +18601,7 @@ var SystemCanvas = (() => {
         onCancel();
         return;
       }
-      onCommit(buildPatch(node, value));
+      onCommit(buildSingleFieldPatch(node, value));
     };
     const cancel = () => {
       if (committedRef.current)
@@ -17850,7 +18630,7 @@ var SystemCanvas = (() => {
       resize: "none",
       textAlign: node.type === "text" ? "center" : "left"
     };
-    return (0, import_jsx_runtime10.jsx)("foreignObject", { x: node.x, y: node.y, width: node.width, height: node.height, onPointerDown: stopPointer, onMouseDown: stopPointer, onClick: stopPointer, onDoubleClick: stopPointer, children: node.type === "text" ? (0, import_jsx_runtime10.jsx)("textarea", { ref: textareaRef, value, onChange: (e) => setValue(e.target.value), onBlur: commit, onKeyDown: (e) => {
+    return (0, import_jsx_runtime17.jsx)("foreignObject", { x: node.x, y: node.y, width: node.width, height: node.height, onPointerDown: stopPointer, onMouseDown: stopPointer, onClick: stopPointer, onDoubleClick: stopPointer, children: node.type === "text" ? (0, import_jsx_runtime17.jsx)("textarea", { ref: textareaRef, value, onChange: (e) => setValue(e.target.value), onBlur: commit, onKeyDown: (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
         commit();
@@ -17858,7 +18638,7 @@ var SystemCanvas = (() => {
         e.preventDefault();
         cancel();
       }
-    }, style: commonFieldStyle }) : (0, import_jsx_runtime10.jsx)("input", { ref: inputRef, value, onChange: (e) => setValue(e.target.value), onBlur: commit, onKeyDown: (e) => {
+    }, style: commonFieldStyle }) : (0, import_jsx_runtime17.jsx)("input", { ref: inputRef, value, onChange: (e) => setValue(e.target.value), onBlur: commit, onKeyDown: (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
         commit();
@@ -17882,7 +18662,7 @@ var SystemCanvas = (() => {
         return "";
     }
   }
-  function buildPatch(node, value) {
+  function buildSingleFieldPatch(node, value) {
     switch (node.type) {
       case "text":
         return { text: value };
@@ -17896,16 +18676,176 @@ var SystemCanvas = (() => {
         return {};
     }
   }
+  function FormEditor({ node, theme, fields, onCommit, onCancel }) {
+    const initial = (0, import_react12.useMemo)(() => readInitialValues(node, fields), [node, fields]);
+    const [values, setValues] = (0, import_react12.useState)(initial);
+    const committedRef = (0, import_react12.useRef)(false);
+    const panelRef = (0, import_react12.useRef)(null);
+    const width = Math.max(node.width, 240);
+    const height = Math.max(node.height, 36 + fields.length * 44);
+    const commit = () => {
+      if (committedRef.current)
+        return;
+      committedRef.current = true;
+      const patch = buildFormPatch(node, fields, initial, values);
+      if (!patch) {
+        onCancel();
+        return;
+      }
+      onCommit(patch);
+    };
+    const cancel = () => {
+      if (committedRef.current)
+        return;
+      committedRef.current = true;
+      onCancel();
+    };
+    const onBlurPanel = (e) => {
+      const next = e.relatedTarget;
+      if (next && panelRef.current?.contains(next))
+        return;
+      commit();
+    };
+    const stopPointer = (e) => {
+      e.stopPropagation();
+    };
+    (0, import_react12.useEffect)(() => {
+      const el = panelRef.current;
+      if (!el)
+        return;
+      const first = el.querySelector("input, textarea, select, button");
+      first?.focus();
+      if (first instanceof HTMLInputElement && first.type === "text") {
+        const end = first.value.length;
+        first.setSelectionRange(end, end);
+      }
+    }, []);
+    const fieldLabelColor = theme.node.sublabelColor;
+    const inputStyle = {
+      width: "100%",
+      boxSizing: "border-box",
+      padding: "6px 8px",
+      fontFamily: theme.node.fontFamily,
+      fontSize: theme.node.fontSize - 1,
+      background: theme.background,
+      color: theme.node.labelColor,
+      border: `1px solid ${theme.breadcrumbs.separatorColor}`,
+      borderRadius: 6,
+      outline: "none"
+    };
+    return (0, import_jsx_runtime17.jsx)("foreignObject", { x: node.x, y: node.y, width, height, onPointerDown: stopPointer, onMouseDown: stopPointer, onClick: stopPointer, onDoubleClick: stopPointer, children: (0, import_jsx_runtime17.jsx)("div", { ref: panelRef, onBlur: onBlurPanel, onKeyDown: (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        commit();
+      } else if (e.key === "Enter" && !(e.target instanceof HTMLTextAreaElement)) {
+        e.preventDefault();
+        const panel = panelRef.current;
+        if (!panel)
+          return;
+        const focusables = Array.from(panel.querySelectorAll("input, textarea, select"));
+        const idx = focusables.indexOf(e.target);
+        if (idx === -1 || idx === focusables.length - 1)
+          commit();
+        else
+          focusables[idx + 1].focus();
+      }
+    }, style: {
+      width: "100%",
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: 8,
+      padding: 10,
+      background: theme.breadcrumbs.background,
+      color: theme.node.labelColor,
+      border: `1.5px solid ${theme.node.labelColor}`,
+      borderRadius: node.resolvedCornerRadius,
+      boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
+      backdropFilter: "blur(8px)",
+      fontFamily: theme.node.fontFamily
+    }, children: fields.map((field) => {
+      const v = values[field.path];
+      const setV = (next) => setValues((prev) => ({ ...prev, [field.path]: next }));
+      const label = field.label ?? field.path;
+      return (0, import_jsx_runtime17.jsxs)("label", { style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 3,
+        fontSize: 10,
+        color: fieldLabelColor,
+        textTransform: "uppercase",
+        letterSpacing: 0.5
+      }, children: [(0, import_jsx_runtime17.jsx)("span", { children: label }), renderControl(field, v, setV, inputStyle, theme)] }, field.path);
+    }) }) });
+  }
+  function renderControl(field, value, setValue, inputStyle, theme) {
+    switch (field.kind) {
+      case "textarea":
+        return (0, import_jsx_runtime17.jsx)("textarea", { value: value ?? "", onChange: (e) => setValue(e.target.value), placeholder: field.placeholder, rows: 3, style: { ...inputStyle, resize: "vertical", minHeight: 60 } });
+      case "number":
+        return (0, import_jsx_runtime17.jsx)("input", { type: "number", value: value == null ? "" : String(value), min: field.min, max: field.max, step: field.step, onChange: (e) => {
+          const v = e.target.value;
+          setValue(v === "" ? void 0 : Number(v));
+        }, placeholder: field.placeholder, style: inputStyle });
+      case "select":
+        return (0, import_jsx_runtime17.jsxs)("select", { value: value ?? "", onChange: (e) => setValue(e.target.value), style: inputStyle, children: [!field.options?.some((o) => o.value === value) && (0, import_jsx_runtime17.jsx)("option", { value: "", children: "\u2014" }), field.options?.map((o) => (0, import_jsx_runtime17.jsx)("option", { value: o.value, children: o.label ?? o.value }, o.value))] });
+      case "boolean":
+        return (0, import_jsx_runtime17.jsx)("input", { type: "checkbox", checked: !!value, onChange: (e) => setValue(e.target.checked), style: {
+          alignSelf: "flex-start",
+          width: 16,
+          height: 16,
+          accentColor: theme.node.labelColor
+        } });
+      case "text":
+      default:
+        return (0, import_jsx_runtime17.jsx)("input", { type: "text", value: value ?? "", onChange: (e) => setValue(e.target.value), placeholder: field.placeholder, style: inputStyle });
+    }
+  }
+  function readInitialValues(node, fields) {
+    const out = {};
+    for (const f of fields) {
+      out[f.path] = getAtPath(node, f.path);
+    }
+    return out;
+  }
+  function buildFormPatch(node, fields, initial, current) {
+    let changed = false;
+    for (const f of fields) {
+      if (current[f.path] !== initial[f.path]) {
+        changed = true;
+        break;
+      }
+    }
+    if (!changed)
+      return null;
+    let working = { ...node };
+    for (const f of fields) {
+      working = setAtPath(working, f.path, current[f.path]);
+    }
+    const patch = {};
+    const topKeys = /* @__PURE__ */ new Set();
+    for (const f of fields) {
+      topKeys.add(f.path.split(".")[0]);
+    }
+    for (const k of topKeys) {
+      ;
+      patch[k] = working[k];
+    }
+    return patch;
+  }
 
   // ../react/dist/components/EdgeLabelEditor.js
-  var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
-  var import_react11 = __toESM(require_react(), 1);
+  var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
+  var import_react13 = __toESM(require_react(), 1);
   var EDITOR_WIDTH = 110;
   function EdgeLabelEditor({ initialLabel, midpoint, theme, onCommit, onCancel }) {
-    const [value, setValue] = (0, import_react11.useState)(initialLabel);
-    const inputRef = (0, import_react11.useRef)(null);
-    const committedRef = (0, import_react11.useRef)(false);
-    (0, import_react11.useEffect)(() => {
+    const [value, setValue] = (0, import_react13.useState)(initialLabel);
+    const inputRef = (0, import_react13.useRef)(null);
+    const committedRef = (0, import_react13.useRef)(false);
+    (0, import_react13.useEffect)(() => {
       const el = inputRef.current;
       if (el) {
         el.focus();
@@ -17934,7 +18874,7 @@ var SystemCanvas = (() => {
     };
     const fontSize = theme.edge.labelFontSize;
     const height = fontSize + 14;
-    return (0, import_jsx_runtime11.jsx)("foreignObject", { x: midpoint.x - EDITOR_WIDTH / 2, y: midpoint.y - height / 2, width: EDITOR_WIDTH, height, onPointerDown: stopPointer, onMouseDown: stopPointer, onClick: stopPointer, onDoubleClick: stopPointer, children: (0, import_jsx_runtime11.jsx)("input", { ref: inputRef, value, onChange: (e) => setValue(e.target.value), onBlur: commit, onKeyDown: (e) => {
+    return (0, import_jsx_runtime18.jsx)("foreignObject", { x: midpoint.x - EDITOR_WIDTH / 2, y: midpoint.y - height / 2, width: EDITOR_WIDTH, height, onPointerDown: stopPointer, onMouseDown: stopPointer, onClick: stopPointer, onDoubleClick: stopPointer, children: (0, import_jsx_runtime18.jsx)("input", { ref: inputRef, value, onChange: (e) => setValue(e.target.value), onBlur: commit, onKeyDown: (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
         commit();
@@ -17959,8 +18899,8 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/ConnectionHandles.js
-  var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
-  var import_react12 = __toESM(require_react(), 1);
+  var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
+  var import_react14 = __toESM(require_react(), 1);
   var SIDES = ["top", "right", "bottom", "left"];
   var HANDLE_RADIUS = 4;
   var HANDLE_HIT_RADIUS = 10;
@@ -17969,9 +18909,9 @@ var SystemCanvas = (() => {
   var HOVER_SCALE = 1.42;
   var HOVER_TRANSITION_MS = 120;
   function ConnectionHandles({ node, theme, onHandlePointerDown, immediate, activeSide }) {
-    const [visible, setVisible] = (0, import_react12.useState)(!!immediate);
-    const [hoveredSide, setHoveredSide] = (0, import_react12.useState)(null);
-    (0, import_react12.useEffect)(() => {
+    const [visible, setVisible] = (0, import_react14.useState)(!!immediate);
+    const [hoveredSide, setHoveredSide] = (0, import_react14.useState)(null);
+    (0, import_react14.useEffect)(() => {
       if (immediate) {
         setVisible(true);
         return;
@@ -17982,16 +18922,16 @@ var SystemCanvas = (() => {
     }, [node.id, immediate]);
     const handleColor = node.resolvedStroke ?? theme.node.labelColor;
     const sidesToRender = immediate ? SIDES : activeSide ? [activeSide] : [];
-    return (0, import_jsx_runtime12.jsx)("g", { className: "system-canvas-connection-handles", pointerEvents: "auto", style: {
+    return (0, import_jsx_runtime19.jsx)("g", { className: "system-canvas-connection-handles", pointerEvents: "auto", style: {
       opacity: visible ? 1 : 0,
       transition: `opacity ${FADE_DURATION_MS}ms ease-out`
     }, children: sidesToRender.map((side) => {
       const { x, y } = computeAnchorPoint(node, side);
       const isHovered = hoveredSide === side;
-      return (0, import_jsx_runtime12.jsxs)("g", { style: { cursor: "crosshair" }, onPointerEnter: () => setHoveredSide(side), onPointerLeave: () => setHoveredSide((s) => s === side ? null : s), onPointerDown: (e) => {
+      return (0, import_jsx_runtime19.jsxs)("g", { style: { cursor: "crosshair" }, onPointerEnter: () => setHoveredSide(side), onPointerLeave: () => setHoveredSide((s) => s === side ? null : s), onPointerDown: (e) => {
         e.stopPropagation();
         onHandlePointerDown(node, side, e);
-      }, children: [(0, import_jsx_runtime12.jsx)("circle", { cx: x, cy: y, r: HANDLE_HIT_RADIUS, fill: "transparent" }), (0, import_jsx_runtime12.jsx)("circle", { cx: x, cy: y, r: HANDLE_RADIUS, fill: handleColor, pointerEvents: "none", style: {
+      }, children: [(0, import_jsx_runtime19.jsx)("circle", { cx: x, cy: y, r: HANDLE_HIT_RADIUS, fill: "transparent" }), (0, import_jsx_runtime19.jsx)("circle", { cx: x, cy: y, r: HANDLE_RADIUS, fill: handleColor, pointerEvents: "none", style: {
         // Scale around the handle's own center. CSS transforms on
         // SVG elements use the element's user-space origin by
         // default, so we set transform-origin explicitly.
@@ -18003,7 +18943,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/PendingEdgeRenderer.js
-  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
   function PendingEdgeRenderer({ sourceNode, sourceSide, cursor, targetNode, theme, defaultEdgeStyle }) {
     const endNode = targetNode ?? {
       id: "__pending__",
@@ -18025,11 +18965,11 @@ var SystemCanvas = (() => {
       toNode: endNode.id
     };
     const pathD = computeEdgePath(pendingEdge, sourceNode, endNode, defaultEdgeStyle);
-    return (0, import_jsx_runtime13.jsxs)("g", { className: "system-canvas-pending-edge", pointerEvents: "none", children: [(0, import_jsx_runtime13.jsx)("path", { d: pathD, fill: "none", stroke: theme.node.labelColor, strokeWidth: theme.edge.strokeWidth * 1.25, strokeDasharray: "5,4", opacity: 0.85 }), !targetNode && (0, import_jsx_runtime13.jsx)("circle", { cx: cursor.x, cy: cursor.y, r: 4, fill: theme.background, stroke: theme.node.labelColor, strokeWidth: 1.5 })] });
+    return (0, import_jsx_runtime20.jsxs)("g", { className: "system-canvas-pending-edge", pointerEvents: "none", children: [(0, import_jsx_runtime20.jsx)("path", { d: pathD, fill: "none", stroke: theme.node.labelColor, strokeWidth: theme.edge.strokeWidth * 1.25, strokeDasharray: "5,4", opacity: 0.85 }), !targetNode && (0, import_jsx_runtime20.jsx)("circle", { cx: cursor.x, cy: cursor.y, r: 4, fill: theme.background, stroke: theme.node.labelColor, strokeWidth: 1.5 })] });
   }
 
   // ../react/dist/components/LanesBackground.js
-  var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
   var LANE_EXTENT = 1e5;
   function LanesBackground({ columns, rows, theme }) {
     const hasColumns = columns && columns.length > 0;
@@ -18044,31 +18984,31 @@ var SystemCanvas = (() => {
       }
       return index % 2 === 0 ? lanesTheme.bandFillEven : lanesTheme.bandFillOdd;
     };
-    return (0, import_jsx_runtime14.jsxs)("g", { className: "system-canvas-lanes", pointerEvents: "none", children: [hasRows && rows.map((row, i) => (0, import_jsx_runtime14.jsx)("rect", { x: -LANE_EXTENT, y: row.start, width: LANE_EXTENT * 2, height: row.size, fill: fillForLane(row, i) }, `row-${row.id}`)), hasColumns && columns.map((col, i) => (0, import_jsx_runtime14.jsx)("rect", { x: col.start, y: -LANE_EXTENT, width: col.size, height: LANE_EXTENT * 2, fill: fillForLane(col, i) }, `col-${col.id}`)), hasRows && rows.map((row, i) => {
+    return (0, import_jsx_runtime21.jsxs)("g", { className: "system-canvas-lanes", pointerEvents: "none", children: [hasRows && rows.map((row, i) => (0, import_jsx_runtime21.jsx)("rect", { x: -LANE_EXTENT, y: row.start, width: LANE_EXTENT * 2, height: row.size, fill: fillForLane(row, i) }, `row-${row.id}`)), hasColumns && columns.map((col, i) => (0, import_jsx_runtime21.jsx)("rect", { x: col.start, y: -LANE_EXTENT, width: col.size, height: LANE_EXTENT * 2, fill: fillForLane(col, i) }, `col-${col.id}`)), hasRows && rows.map((row, i) => {
       if (i === 0)
         return null;
-      return (0, import_jsx_runtime14.jsx)("line", { x1: -LANE_EXTENT, y1: row.start, x2: LANE_EXTENT, y2: row.start, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth, vectorEffect: "non-scaling-stroke" }, `rowdiv-${row.id}`);
+      return (0, import_jsx_runtime21.jsx)("line", { x1: -LANE_EXTENT, y1: row.start, x2: LANE_EXTENT, y2: row.start, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth, vectorEffect: "non-scaling-stroke" }, `rowdiv-${row.id}`);
     }), hasColumns && columns.map((col, i) => {
       if (i === 0)
         return null;
-      return (0, import_jsx_runtime14.jsx)("line", { x1: col.start, y1: -LANE_EXTENT, x2: col.start, y2: LANE_EXTENT, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth, vectorEffect: "non-scaling-stroke" }, `coldiv-${col.id}`);
+      return (0, import_jsx_runtime21.jsx)("line", { x1: col.start, y1: -LANE_EXTENT, x2: col.start, y2: LANE_EXTENT, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth, vectorEffect: "non-scaling-stroke" }, `coldiv-${col.id}`);
     })] });
   }
 
   // ../react/dist/components/Viewport.js
   var HOVER_PADDING = 10;
   var EDGE_PROXIMITY = 16;
-  var Viewport = (0, import_react13.forwardRef)(function Viewport2({ nodes, edges, nodeMap, theme, edgeStyle, columns, rows, minZoom, maxZoom, defaultViewport, onViewportChange, onNodeClick, onNodeDoubleClick, onNodeNavigate, onEdgeClick, onEdgeDoubleClick, onCanvasClick, onCanvasContextMenu, onNodeContextMenu, onEdgeContextMenu, onNodePointerDown, selectedId, editingId, selectedEdgeId, editingEdgeId, dragOverrides, resizeOverrides, onResizeHandlePointerDown, onEditorCommit, onEditorCancel, onEdgeEditorCommit, onEdgeEditorCancel, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
+  var Viewport = (0, import_react15.forwardRef)(function Viewport2({ nodes, edges, nodeMap, theme, edgeStyle, columns, rows, canvases, minZoom, maxZoom, defaultViewport, onViewportChange, onNodeClick, onNodeDoubleClick, onNodeNavigate, onEdgeClick, onEdgeDoubleClick, onCanvasClick, onCanvasContextMenu, onNodeContextMenu, onEdgeContextMenu, onNodePointerDown, selectedId, editingId, selectedEdgeId, editingEdgeId, dragOverrides, resizeOverrides, onResizeHandlePointerDown, onEditorCommit, onEditorCancel, onEdgeEditorCommit, onEdgeEditorCancel, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
     const { svgRef, groupRef, viewport, fitToContent, zoomToNode, setTransform } = useViewport({
       minZoom,
       maxZoom,
       defaultViewport,
       onViewportChange
     });
-    const navigatingRef = (0, import_react13.useRef)(false);
-    const fadeRafRef = (0, import_react13.useRef)(null);
-    const fadeTimeoutRef = (0, import_react13.useRef)(null);
-    const triggerFade = (0, import_react13.useCallback)((durationMs) => {
+    const navigatingRef = (0, import_react15.useRef)(false);
+    const fadeRafRef = (0, import_react15.useRef)(null);
+    const fadeTimeoutRef = (0, import_react15.useRef)(null);
+    const triggerFade = (0, import_react15.useCallback)((durationMs) => {
       if (durationMs <= 0)
         return;
       const g = groupRef.current;
@@ -18091,7 +19031,7 @@ var SystemCanvas = (() => {
         }, durationMs + 16);
       });
     }, []);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       return () => {
         if (fadeRafRef.current !== null)
           cancelAnimationFrame(fadeRafRef.current);
@@ -18099,9 +19039,9 @@ var SystemCanvas = (() => {
           clearTimeout(fadeTimeoutRef.current);
       };
     }, []);
-    const [hoveredNodeId, setHoveredNodeId] = (0, import_react13.useState)(null);
-    const [hoveredSide, setHoveredSide] = (0, import_react13.useState)(null);
-    (0, import_react13.useImperativeHandle)(ref, () => ({
+    const [hoveredNodeId, setHoveredNodeId] = (0, import_react15.useState)(null);
+    const [hoveredSide, setHoveredSide] = (0, import_react15.useState)(null);
+    (0, import_react15.useImperativeHandle)(ref, () => ({
       zoomToNode: (node, onComplete, options) => {
         navigatingRef.current = true;
         zoomToNode(node, onComplete, options);
@@ -18111,7 +19051,7 @@ var SystemCanvas = (() => {
       getSvgElement: () => svgRef.current,
       getViewport: () => viewport.current ?? { x: 0, y: 0, zoom: 1 }
     }));
-    const renderNodes = (0, import_react13.useMemo)(() => {
+    const renderNodes = (0, import_react15.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -18124,7 +19064,7 @@ var SystemCanvas = (() => {
         return d ? { ...n, x: d.x, y: d.y } : n;
       });
     }, [nodes, dragOverrides, resizeOverrides]);
-    const renderNodeMap = (0, import_react13.useMemo)(() => {
+    const renderNodeMap = (0, import_react15.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -18135,11 +19075,11 @@ var SystemCanvas = (() => {
       }
       return m;
     }, [renderNodes, nodeMap, dragOverrides, resizeOverrides]);
-    const latestNodesRef = (0, import_react13.useRef)(nodes);
-    (0, import_react13.useEffect)(() => {
+    const latestNodesRef = (0, import_react15.useRef)(nodes);
+    (0, import_react15.useEffect)(() => {
       latestNodesRef.current = nodes;
     }, [nodes]);
-    const fitNow = (0, import_react13.useCallback)(() => {
+    const fitNow = (0, import_react15.useCallback)(() => {
       const current = latestNodesRef.current;
       if (current.length === 0)
         return;
@@ -18149,7 +19089,7 @@ var SystemCanvas = (() => {
         fitToContent(current, animate);
       });
     }, [fitToContent]);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "always")
@@ -18158,8 +19098,8 @@ var SystemCanvas = (() => {
         return;
       fitNow();
     }, [nodes, autoFit, defaultViewport, fitNow]);
-    const fittedForRef = (0, import_react13.useRef)(null);
-    (0, import_react13.useEffect)(() => {
+    const fittedForRef = (0, import_react15.useRef)(null);
+    (0, import_react15.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "canvas-change" && autoFit !== "initial")
@@ -18191,7 +19131,7 @@ var SystemCanvas = (() => {
       triggerFade
     ]);
     const editingNode = editingId ? renderNodes.find((n) => n.id === editingId) ?? null : null;
-    const handleSvgPointerMove = (0, import_react13.useCallback)((event) => {
+    const handleSvgPointerMove = (0, import_react15.useCallback)((event) => {
       if (!edgeCreateEnabled)
         return;
       const svg = svgRef.current;
@@ -18240,7 +19180,7 @@ var SystemCanvas = (() => {
         setHoveredSide((prev) => prev === null ? prev : null);
       }
     }, [edgeCreateEnabled, renderNodes, svgRef, viewport]);
-    const handleSvgPointerLeave = (0, import_react13.useCallback)(() => {
+    const handleSvgPointerLeave = (0, import_react15.useCallback)(() => {
       setHoveredNodeId(null);
       setHoveredSide(null);
     }, []);
@@ -18258,7 +19198,7 @@ var SystemCanvas = (() => {
         return null;
       return computeEdgeMidpoint(editingEdge, from, to);
     })();
-    return (0, import_jsx_runtime15.jsxs)("svg", { ref: svgRef, className: "system-canvas-viewport", style: {
+    return (0, import_jsx_runtime22.jsxs)("svg", { ref: svgRef, className: "system-canvas-viewport", style: {
       width: "100%",
       height: "100%",
       display: "block",
@@ -18267,16 +19207,16 @@ var SystemCanvas = (() => {
       WebkitUserSelect: "none",
       MozUserSelect: "none",
       msUserSelect: "none"
-    }, onClick: onCanvasClick, onContextMenu: onCanvasContextMenu, onPointerMove: handleSvgPointerMove, onPointerLeave: handleSvgPointerLeave, children: [(0, import_jsx_runtime15.jsx)("defs", { children: (0, import_jsx_runtime15.jsx)("pattern", { id: "system-canvas-grid", width: theme.grid.size, height: theme.grid.size, patternUnits: "userSpaceOnUse", children: (0, import_jsx_runtime15.jsx)("path", { d: `M ${theme.grid.size} 0 L 0 0 0 ${theme.grid.size}`, fill: "none", stroke: theme.grid.color, strokeWidth: theme.grid.strokeWidth }) }) }), (0, import_jsx_runtime15.jsx)("rect", { x: "-50000", y: "-50000", width: "100000", height: "100000", fill: "url(#system-canvas-grid)" }), (0, import_jsx_runtime15.jsxs)("g", { ref: groupRef, children: [(0, import_jsx_runtime15.jsx)(LanesBackground, { columns, rows, theme }), (0, import_jsx_runtime15.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedId, editingId, only: "groups" }), (0, import_jsx_runtime15.jsx)(EdgeRenderer, { edges, nodeMap: renderNodeMap, theme, defaultEdgeStyle: edgeStyle, onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, selectedId: selectedEdgeId, editingId: editingEdgeId }), (0, import_jsx_runtime15.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedId, editingId, onResizeHandlePointerDown, only: "non-groups" }), pendingTargetNode && (0, import_jsx_runtime15.jsx)("rect", { className: "system-canvas-drop-target", x: pendingTargetNode.x - 4, y: pendingTargetNode.y - 4, width: pendingTargetNode.width + 8, height: pendingTargetNode.height + 8, rx: pendingTargetNode.resolvedCornerRadius + 4, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, opacity: 0.85, pointerEvents: "none" }), pendingEdge && pendingSourceNode && (0, import_jsx_runtime15.jsx)(PendingEdgeRenderer, { sourceNode: pendingSourceNode, sourceSide: pendingEdge.sourceSide, cursor: pendingEdge.cursor, targetNode: pendingTargetNode, theme, defaultEdgeStyle: edgeStyle }), handlesNode && onConnectionHandlePointerDown && (0, import_jsx_runtime15.jsx)(ConnectionHandles, { node: handlesNode, theme, onHandlePointerDown: onConnectionHandlePointerDown, immediate: !!pendingEdge, activeSide: hoveredSide }), editingNode && onEditorCommit && onEditorCancel && (0, import_jsx_runtime15.jsx)(NodeEditor, { node: editingNode, theme, onCommit: onEditorCommit, onCancel: onEditorCancel }), editingEdge && editingEdgeMidpoint && onEdgeEditorCommit && onEdgeEditorCancel && (0, import_jsx_runtime15.jsx)(EdgeLabelEditor, { initialLabel: editingEdge.label ?? "", midpoint: editingEdgeMidpoint, theme, onCommit: onEdgeEditorCommit, onCancel: onEdgeEditorCancel })] })] });
+    }, onClick: onCanvasClick, onContextMenu: onCanvasContextMenu, onPointerMove: handleSvgPointerMove, onPointerLeave: handleSvgPointerLeave, children: [(0, import_jsx_runtime22.jsx)("defs", { children: (0, import_jsx_runtime22.jsx)("pattern", { id: "system-canvas-grid", width: theme.grid.size, height: theme.grid.size, patternUnits: "userSpaceOnUse", children: (0, import_jsx_runtime22.jsx)("path", { d: `M ${theme.grid.size} 0 L 0 0 0 ${theme.grid.size}`, fill: "none", stroke: theme.grid.color, strokeWidth: theme.grid.strokeWidth }) }) }), (0, import_jsx_runtime22.jsx)("rect", { x: "-50000", y: "-50000", width: "100000", height: "100000", fill: "url(#system-canvas-grid)" }), (0, import_jsx_runtime22.jsxs)("g", { ref: groupRef, children: [(0, import_jsx_runtime22.jsx)(LanesBackground, { columns, rows, theme }), (0, import_jsx_runtime22.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedId, editingId, canvases, only: "groups" }), (0, import_jsx_runtime22.jsx)(EdgeRenderer, { edges, nodeMap: renderNodeMap, theme, defaultEdgeStyle: edgeStyle, onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, selectedId: selectedEdgeId, editingId: editingEdgeId }), (0, import_jsx_runtime22.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedId, editingId, onResizeHandlePointerDown, canvases, only: "non-groups" }), pendingTargetNode && (0, import_jsx_runtime22.jsx)("rect", { className: "system-canvas-drop-target", x: pendingTargetNode.x - 4, y: pendingTargetNode.y - 4, width: pendingTargetNode.width + 8, height: pendingTargetNode.height + 8, rx: pendingTargetNode.resolvedCornerRadius + 4, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, opacity: 0.85, pointerEvents: "none" }), pendingEdge && pendingSourceNode && (0, import_jsx_runtime22.jsx)(PendingEdgeRenderer, { sourceNode: pendingSourceNode, sourceSide: pendingEdge.sourceSide, cursor: pendingEdge.cursor, targetNode: pendingTargetNode, theme, defaultEdgeStyle: edgeStyle }), handlesNode && onConnectionHandlePointerDown && (0, import_jsx_runtime22.jsx)(ConnectionHandles, { node: handlesNode, theme, onHandlePointerDown: onConnectionHandlePointerDown, immediate: !!pendingEdge, activeSide: hoveredSide }), editingNode && onEditorCommit && onEditorCancel && (0, import_jsx_runtime22.jsx)(NodeEditor, { node: editingNode, theme, onCommit: onEditorCommit, onCancel: onEditorCancel }), editingEdge && editingEdgeMidpoint && onEdgeEditorCommit && onEdgeEditorCancel && (0, import_jsx_runtime22.jsx)(EdgeLabelEditor, { initialLabel: editingEdge.label ?? "", midpoint: editingEdgeMidpoint, theme, onCommit: onEdgeEditorCommit, onCancel: onEdgeEditorCancel })] })] });
   });
 
   // ../react/dist/components/Breadcrumbs.js
-  var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
-  var import_react14 = __toESM(require_react(), 1);
+  var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
+  var import_react16 = __toESM(require_react(), 1);
   function Breadcrumbs({ breadcrumbs, theme, onNavigate }) {
     if (breadcrumbs.length <= 1)
       return null;
-    return (0, import_jsx_runtime16.jsx)("div", { className: "system-canvas-breadcrumbs", style: {
+    return (0, import_jsx_runtime23.jsx)("div", { className: "system-canvas-breadcrumbs", style: {
       position: "absolute",
       top: 12,
       left: 12,
@@ -18293,10 +19233,10 @@ var SystemCanvas = (() => {
       backdropFilter: "blur(8px)"
     }, children: breadcrumbs.map((crumb, index) => {
       const isLast = index === breadcrumbs.length - 1;
-      return (0, import_jsx_runtime16.jsxs)(import_react14.default.Fragment, { children: [index > 0 && (0, import_jsx_runtime16.jsx)("span", { style: {
+      return (0, import_jsx_runtime23.jsxs)(import_react16.default.Fragment, { children: [index > 0 && (0, import_jsx_runtime23.jsx)("span", { style: {
         color: theme.separatorColor,
         margin: "0 2px"
-      }, children: "/" }), (0, import_jsx_runtime16.jsx)("span", { onClick: isLast ? void 0 : () => onNavigate(index), style: {
+      }, children: "/" }), (0, import_jsx_runtime23.jsx)("span", { onClick: isLast ? void 0 : () => onNavigate(index), style: {
         color: isLast ? theme.activeColor : theme.textColor,
         cursor: isLast ? "default" : "pointer",
         fontWeight: isLast ? 600 : 400,
@@ -18316,12 +19256,12 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/AddNodeButton.js
-  var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
-  var import_react15 = __toESM(require_react(), 1);
+  var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
+  var import_react17 = __toESM(require_react(), 1);
   function AddNodeButton({ options, addNode: addNode2, theme }) {
-    const [open, setOpen] = (0, import_react15.useState)(false);
-    const rootRef = (0, import_react15.useRef)(null);
-    (0, import_react15.useEffect)(() => {
+    const [open, setOpen] = (0, import_react17.useState)(false);
+    const rootRef = (0, import_react17.useRef)(null);
+    (0, import_react17.useEffect)(() => {
       if (!open)
         return;
       function onDocClick(e) {
@@ -18344,7 +19284,7 @@ var SystemCanvas = (() => {
     }, [open]);
     const categoryOptions = options.filter((o) => o.kind === "category");
     const typeOptions = options.filter((o) => o.kind === "type");
-    return (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, className: "system-canvas-add-node", style: {
+    return (0, import_jsx_runtime24.jsxs)("div", { ref: rootRef, className: "system-canvas-add-node", style: {
       position: "absolute",
       bottom: 16,
       right: 16,
@@ -18352,7 +19292,7 @@ var SystemCanvas = (() => {
       fontFamily: theme.breadcrumbs.fontFamily,
       fontSize: theme.breadcrumbs.fontSize,
       userSelect: "none"
-    }, children: [open && (0, import_jsx_runtime17.jsxs)("div", { style: {
+    }, children: [open && (0, import_jsx_runtime24.jsxs)("div", { style: {
       position: "absolute",
       bottom: 52,
       right: 0,
@@ -18365,13 +19305,13 @@ var SystemCanvas = (() => {
       borderRadius: 10,
       boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
       backdropFilter: "blur(10px)"
-    }, children: [categoryOptions.length > 0 && (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [(0, import_jsx_runtime17.jsx)(SectionLabel, { theme, children: "Categories" }), categoryOptions.map((opt) => (0, import_jsx_runtime17.jsx)(MenuRow, { theme, option: opt, onClick: () => {
+    }, children: [categoryOptions.length > 0 && (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [(0, import_jsx_runtime24.jsx)(SectionLabel, { theme, children: "Categories" }), categoryOptions.map((opt) => (0, import_jsx_runtime24.jsx)(MenuRow, { theme, option: opt, onClick: () => {
       addNode2(opt);
       setOpen(false);
-    } }, `cat-${opt.value}`)), (0, import_jsx_runtime17.jsx)(Divider, { theme })] }), (0, import_jsx_runtime17.jsx)(SectionLabel, { theme, children: "Basic" }), typeOptions.map((opt) => (0, import_jsx_runtime17.jsx)(MenuRow, { theme, option: opt, onClick: () => {
+    } }, `cat-${opt.value}`)), (0, import_jsx_runtime24.jsx)(Divider, { theme })] }), (0, import_jsx_runtime24.jsx)(SectionLabel, { theme, children: "Basic" }), typeOptions.map((opt) => (0, import_jsx_runtime24.jsx)(MenuRow, { theme, option: opt, onClick: () => {
       addNode2(opt);
       setOpen(false);
-    } }, `type-${opt.value}`))] }), (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-label": open ? "Close add node menu" : "Add node", onClick: () => setOpen((v) => !v), style: {
+    } }, `type-${opt.value}`))] }), (0, import_jsx_runtime24.jsx)("button", { type: "button", "aria-label": open ? "Close add node menu" : "Add node", onClick: () => setOpen((v) => !v), style: {
       width: 44,
       height: 44,
       borderRadius: 22,
@@ -18392,7 +19332,7 @@ var SystemCanvas = (() => {
     }, children: "+" })] });
   }
   function SectionLabel({ theme, children: children2 }) {
-    return (0, import_jsx_runtime17.jsx)("div", { style: {
+    return (0, import_jsx_runtime24.jsx)("div", { style: {
       padding: "4px 8px",
       fontSize: theme.breadcrumbs.fontSize - 2,
       color: theme.breadcrumbs.textColor,
@@ -18402,7 +19342,7 @@ var SystemCanvas = (() => {
     }, children: children2 });
   }
   function Divider({ theme }) {
-    return (0, import_jsx_runtime17.jsx)("div", { style: {
+    return (0, import_jsx_runtime24.jsx)("div", { style: {
       height: 1,
       margin: "4px 0",
       background: theme.breadcrumbs.separatorColor,
@@ -18410,9 +19350,9 @@ var SystemCanvas = (() => {
     } });
   }
   function MenuRow({ theme, option, onClick }) {
-    const [hover, setHover] = (0, import_react15.useState)(false);
+    const [hover, setHover] = (0, import_react17.useState)(false);
     const swatchSize = 18;
-    return (0, import_jsx_runtime17.jsxs)("div", { role: "button", onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
+    return (0, import_jsx_runtime24.jsxs)("div", { role: "button", onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
       display: "flex",
       alignItems: "center",
       gap: 8,
@@ -18421,7 +19361,7 @@ var SystemCanvas = (() => {
       cursor: "pointer",
       background: hover ? "rgba(255,255,255,0.06)" : "transparent",
       color: theme.breadcrumbs.activeColor
-    }, children: [option.kind === "category" ? (0, import_jsx_runtime17.jsx)("span", { style: {
+    }, children: [option.kind === "category" ? (0, import_jsx_runtime24.jsx)("span", { style: {
       width: swatchSize,
       height: swatchSize,
       borderRadius: 4,
@@ -18431,13 +19371,13 @@ var SystemCanvas = (() => {
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0
-    }, children: option.icon && (0, import_jsx_runtime17.jsx)("svg", { width: 12, height: 12, viewBox: "0 0 14 14", style: { overflow: "visible" }, children: (0, import_jsx_runtime17.jsx)("g", { transform: "translate(-1, -1)", children: (0, import_jsx_runtime17.jsx)(NodeIcon, { icon: option.icon, x: 0, y: 0, size: 14, color: option.stroke ?? theme.breadcrumbs.activeColor, opacity: 0.9, customIcons: theme.icons }) }) }) }) : (0, import_jsx_runtime17.jsx)("span", { style: {
+    }, children: option.icon && (0, import_jsx_runtime24.jsx)("svg", { width: 12, height: 12, viewBox: "0 0 14 14", style: { overflow: "visible" }, children: (0, import_jsx_runtime24.jsx)("g", { transform: "translate(-1, -1)", children: (0, import_jsx_runtime24.jsx)(NodeIcon, { icon: option.icon, x: 0, y: 0, size: 14, color: option.stroke ?? theme.breadcrumbs.activeColor, opacity: 0.9, customIcons: theme.icons }) }) }) }) : (0, import_jsx_runtime24.jsx)("span", { style: {
       width: swatchSize,
       height: swatchSize,
       borderRadius: 4,
       border: `1px dashed ${theme.breadcrumbs.separatorColor}`,
       flexShrink: 0
-    } }), (0, import_jsx_runtime17.jsx)("span", { style: { textTransform: "capitalize" }, children: option.label }), (0, import_jsx_runtime17.jsx)("span", { style: {
+    } }), (0, import_jsx_runtime24.jsx)("span", { style: { textTransform: "capitalize" }, children: option.label }), (0, import_jsx_runtime24.jsx)("span", { style: {
       marginLeft: "auto",
       fontSize: theme.breadcrumbs.fontSize - 2,
       opacity: 0.5
@@ -18445,13 +19385,13 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/LaneHeaders.js
-  var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
-  var import_react16 = __toESM(require_react(), 1);
+  var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
+  var import_react18 = __toESM(require_react(), 1);
   function LaneHeaders({ columns, rows, theme, getViewport, width, height, pinned = true }) {
     const hasColumns = columns && columns.length > 0;
     const hasRows = rows && rows.length > 0;
-    const [viewport, setViewport] = (0, import_react16.useState)(() => getViewport());
-    (0, import_react16.useEffect)(() => {
+    const [viewport, setViewport] = (0, import_react18.useState)(() => getViewport());
+    (0, import_react18.useEffect)(() => {
       if (!hasColumns && !hasRows)
         return;
       let raf = 0;
@@ -18478,14 +19418,14 @@ var SystemCanvas = (() => {
     const pad = lanesTheme.headerPadding;
     const colsOffsetLeft = hasRows && pinned ? headerSize : 0;
     const rowsOffsetTop = hasColumns && pinned ? headerSize : 0;
-    return (0, import_jsx_runtime18.jsxs)("svg", { className: "system-canvas-lane-headers", style: {
+    return (0, import_jsx_runtime25.jsxs)("svg", { className: "system-canvas-lane-headers", style: {
       position: "absolute",
       top: 0,
       left: 0,
       width,
       height,
       pointerEvents: "none"
-    }, children: [hasColumns && (0, import_jsx_runtime18.jsxs)("g", { children: [pinned && (0, import_jsx_runtime18.jsx)("rect", { x: colsOffsetLeft, y: 0, width: width - colsOffsetLeft, height: headerSize, fill: lanesTheme.headerBackground }), columns.map((col) => {
+    }, children: [hasColumns && (0, import_jsx_runtime25.jsxs)("g", { children: [pinned && (0, import_jsx_runtime25.jsx)("rect", { x: colsOffsetLeft, y: 0, width: width - colsOffsetLeft, height: headerSize, fill: lanesTheme.headerBackground }), columns.map((col) => {
       const startScreen = canvasToScreen(col.start, 0, viewport).x;
       const endScreen = canvasToScreen(col.start + col.size, 0, viewport).x;
       const w = endScreen - startScreen;
@@ -18496,8 +19436,8 @@ var SystemCanvas = (() => {
       const cx = visibleLeft + visibleW / 2;
       if (endScreen <= colsOffsetLeft || startScreen >= width)
         return null;
-      return (0, import_jsx_runtime18.jsxs)("g", { children: [(0, import_jsx_runtime18.jsx)("line", { x1: startScreen, y1: pinned ? headerSize : y + headerSize, x2: startScreen, y2: pinned ? 0 : y, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth }), (0, import_jsx_runtime18.jsx)("text", { x: cx, y: (pinned ? 0 : y) + headerSize / 2, textAnchor: "middle", dominantBaseline: "middle", fill: lanesTheme.headerTextColor, fontFamily: lanesTheme.headerFontFamily, fontSize: lanesTheme.headerFontSize, style: { userSelect: "none" }, children: truncateToWidth(col.label, visibleW - pad * 2, lanesTheme.headerFontSize) })] }, `colh-${col.id}`);
-    }), pinned && (0, import_jsx_runtime18.jsx)("line", { x1: colsOffsetLeft, y1: headerSize, x2: width, y2: headerSize, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth })] }), hasRows && (0, import_jsx_runtime18.jsxs)("g", { children: [pinned && (0, import_jsx_runtime18.jsx)("rect", { x: 0, y: rowsOffsetTop, width: headerSize, height: height - rowsOffsetTop, fill: lanesTheme.headerBackground }), rows.map((row) => {
+      return (0, import_jsx_runtime25.jsxs)("g", { children: [(0, import_jsx_runtime25.jsx)("line", { x1: startScreen, y1: pinned ? headerSize : y + headerSize, x2: startScreen, y2: pinned ? 0 : y, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth }), (0, import_jsx_runtime25.jsx)("text", { x: cx, y: (pinned ? 0 : y) + headerSize / 2, textAnchor: "middle", dominantBaseline: "middle", fill: lanesTheme.headerTextColor, fontFamily: lanesTheme.headerFontFamily, fontSize: lanesTheme.headerFontSize, style: { userSelect: "none" }, children: truncateToWidth(col.label, visibleW - pad * 2, lanesTheme.headerFontSize) })] }, `colh-${col.id}`);
+    }), pinned && (0, import_jsx_runtime25.jsx)("line", { x1: colsOffsetLeft, y1: headerSize, x2: width, y2: headerSize, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth })] }), hasRows && (0, import_jsx_runtime25.jsxs)("g", { children: [pinned && (0, import_jsx_runtime25.jsx)("rect", { x: 0, y: rowsOffsetTop, width: headerSize, height: height - rowsOffsetTop, fill: lanesTheme.headerBackground }), rows.map((row) => {
       const startScreen = canvasToScreen(0, row.start, viewport).y;
       const endScreen = canvasToScreen(0, row.start + row.size, viewport).y;
       const h = endScreen - startScreen;
@@ -18508,8 +19448,8 @@ var SystemCanvas = (() => {
       const cy = visibleTop + visibleH / 2;
       if (endScreen <= rowsOffsetTop || startScreen >= height)
         return null;
-      return (0, import_jsx_runtime18.jsxs)("g", { children: [(0, import_jsx_runtime18.jsx)("line", { x1: pinned ? 0 : x, y1: startScreen, x2: pinned ? headerSize : x + headerSize, y2: startScreen, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth }), (0, import_jsx_runtime18.jsx)("text", { x: (pinned ? 0 : x) + headerSize / 2, y: cy, textAnchor: "middle", dominantBaseline: "middle", fill: lanesTheme.headerTextColor, fontFamily: lanesTheme.headerFontFamily, fontSize: lanesTheme.headerFontSize, transform: `rotate(-90 ${(pinned ? 0 : x) + headerSize / 2} ${cy})`, style: { userSelect: "none" }, children: truncateToWidth(row.label, visibleH - pad * 2, lanesTheme.headerFontSize) })] }, `rowh-${row.id}`);
-    }), pinned && (0, import_jsx_runtime18.jsx)("line", { x1: headerSize, y1: rowsOffsetTop, x2: headerSize, y2: height, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth })] }), hasColumns && hasRows && pinned && (0, import_jsx_runtime18.jsx)("rect", { x: 0, y: 0, width: headerSize, height: headerSize, fill: lanesTheme.headerBackground })] });
+      return (0, import_jsx_runtime25.jsxs)("g", { children: [(0, import_jsx_runtime25.jsx)("line", { x1: pinned ? 0 : x, y1: startScreen, x2: pinned ? headerSize : x + headerSize, y2: startScreen, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth }), (0, import_jsx_runtime25.jsx)("text", { x: (pinned ? 0 : x) + headerSize / 2, y: cy, textAnchor: "middle", dominantBaseline: "middle", fill: lanesTheme.headerTextColor, fontFamily: lanesTheme.headerFontFamily, fontSize: lanesTheme.headerFontSize, transform: `rotate(-90 ${(pinned ? 0 : x) + headerSize / 2} ${cy})`, style: { userSelect: "none" }, children: truncateToWidth(row.label, visibleH - pad * 2, lanesTheme.headerFontSize) })] }, `rowh-${row.id}`);
+    }), pinned && (0, import_jsx_runtime25.jsx)("line", { x1: headerSize, y1: rowsOffsetTop, x2: headerSize, y2: height, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth })] }), hasColumns && hasRows && pinned && (0, import_jsx_runtime25.jsx)("rect", { x: 0, y: 0, width: headerSize, height: headerSize, fill: lanesTheme.headerBackground })] });
   }
   function truncateToWidth(label, availablePx, fontSize) {
     if (availablePx <= 0)
@@ -18524,8 +19464,8 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/NodeToolbar.js
-  var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
-  var import_react17 = __toESM(require_react(), 1);
+  var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
+  var import_react19 = __toESM(require_react(), 1);
   var NODE_GAP = 10;
   var FLIP_MARGIN = 8;
   var PADDING = 6;
@@ -18534,8 +19474,8 @@ var SystemCanvas = (() => {
   var BUTTON_SIZE = 28;
   var DELETE_SIZE = 14;
   function NodeToolbar({ node, theme, onPatch, onDelete, getViewport, containerWidth, containerHeight, render: render2 }) {
-    const [viewport, setViewport] = (0, import_react17.useState)(() => getViewport());
-    (0, import_react17.useEffect)(() => {
+    const [viewport, setViewport] = (0, import_react19.useState)(() => getViewport());
+    (0, import_react19.useEffect)(() => {
       let raf = 0;
       let lastX = -Infinity;
       let lastY = -Infinity;
@@ -18555,9 +19495,9 @@ var SystemCanvas = (() => {
     }, [getViewport]);
     const topCenter = canvasToScreen(node.x + node.width / 2, node.y, viewport);
     const bottomCenter = canvasToScreen(node.x + node.width / 2, node.y + node.height, viewport);
-    const toolbarRef = (0, import_react17.useRef)(null);
-    const [size, setSize] = (0, import_react17.useState)({ width: 0, height: 0 });
-    (0, import_react17.useEffect)(() => {
+    const toolbarRef = (0, import_react19.useRef)(null);
+    const [size, setSize] = (0, import_react19.useState)({ width: 0, height: 0 });
+    (0, import_react19.useEffect)(() => {
       const el = toolbarRef.current;
       if (!el)
         return;
@@ -18578,7 +19518,7 @@ var SystemCanvas = (() => {
     left = Math.max(FLIP_MARGIN, Math.min(left, containerWidth - size.width - FLIP_MARGIN));
     const patch = (update) => onPatch(update);
     const deleteNode = () => onDelete();
-    return (0, import_jsx_runtime19.jsx)("div", {
+    return (0, import_jsx_runtime26.jsx)("div", {
       ref: toolbarRef,
       className: "system-canvas-node-toolbar",
       // Stop pointer events from bubbling to the canvas (which would
@@ -18607,15 +19547,16 @@ var SystemCanvas = (() => {
         userSelect: "none",
         whiteSpace: "nowrap"
       },
-      children: render2 ? render2({ node, theme, patch, deleteNode }) : (0, import_jsx_runtime19.jsx)(DefaultToolbarContent, { node, theme, onPatch: patch, onDelete: deleteNode })
+      children: render2 ? render2({ node, theme, patch, deleteNode }) : (0, import_jsx_runtime26.jsx)(DefaultToolbarContent, { node, theme, onPatch: patch, onDelete: deleteNode })
     });
   }
   function DefaultToolbarContent({ node, theme, onPatch, onDelete }) {
-    const groups = (0, import_react17.useMemo)(() => getNodeActions(theme), [theme]);
-    return (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [groups.map((group, i) => (0, import_jsx_runtime19.jsxs)(import_react17.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime19.jsx)(Divider2, { theme }), (0, import_jsx_runtime19.jsx)(ActionGroupView, { group, node, theme, onPatch })] }, group.id)), (0, import_jsx_runtime19.jsx)(Divider2, { theme }), (0, import_jsx_runtime19.jsx)(DeleteButton, { theme, onDelete })] });
+    const groups = (0, import_react19.useMemo)(() => getNodeActionsForNode(node, theme), [node, theme]);
+    const showDelete = !theme.hideToolbarDelete;
+    return (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [groups.map((group, i) => (0, import_jsx_runtime26.jsxs)(import_react19.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(ActionGroupView, { group, node, theme, onPatch })] }, group.id)), showDelete && (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(DeleteButton, { theme, onDelete })] })] });
   }
   function Divider2({ theme }) {
-    return (0, import_jsx_runtime19.jsx)("div", { style: {
+    return (0, import_jsx_runtime26.jsx)("div", { style: {
       width: 1,
       alignSelf: "stretch",
       background: theme.breadcrumbs.separatorColor,
@@ -18628,23 +19569,23 @@ var SystemCanvas = (() => {
       return null;
     const kind = group.kind ?? "buttons";
     if (kind === "menu") {
-      return (0, import_jsx_runtime19.jsx)(MenuGroup, { group, actions, node, theme, onPatch });
+      return (0, import_jsx_runtime26.jsx)(MenuGroup, { group, actions, node, theme, onPatch });
     }
-    return (0, import_jsx_runtime19.jsx)("div", { title: group.label, style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
+    return (0, import_jsx_runtime26.jsx)("div", { title: group.label, style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
       const handleClick = () => {
         const patch = resolveActionPatch(action, node);
         onPatch(patch);
       };
       const active = action.isActive?.(node) ?? false;
       if (kind === "swatches") {
-        return (0, import_jsx_runtime19.jsx)(SwatchButton, { action, active, theme, onClick: handleClick }, action.id);
+        return (0, import_jsx_runtime26.jsx)(SwatchButton, { action, active, theme, onClick: handleClick }, action.id);
       }
-      return (0, import_jsx_runtime19.jsx)(IconButton, { action, active, theme, onClick: handleClick }, action.id);
+      return (0, import_jsx_runtime26.jsx)(IconButton, { action, active, theme, onClick: handleClick }, action.id);
     }) });
   }
   function SwatchButton({ action, active, theme, onClick }) {
     const color2 = action.swatch ?? theme.node.labelColor;
-    return (0, import_jsx_runtime19.jsx)("button", { type: "button", title: action.label, onClick, style: {
+    return (0, import_jsx_runtime26.jsx)("button", { type: "button", title: action.label, onClick, style: {
       width: SWATCH_SIZE,
       height: SWATCH_SIZE,
       borderRadius: "50%",
@@ -18658,7 +19599,7 @@ var SystemCanvas = (() => {
     }, onMouseDown: (e) => e.preventDefault() });
   }
   function IconButton({ action, active, theme, onClick }) {
-    return (0, import_jsx_runtime19.jsx)("button", { type: "button", title: action.label, onClick, style: {
+    return (0, import_jsx_runtime26.jsx)("button", { type: "button", title: action.label, onClick, style: {
       width: BUTTON_SIZE,
       height: BUTTON_SIZE,
       display: "inline-flex",
@@ -18671,17 +19612,17 @@ var SystemCanvas = (() => {
       cursor: "pointer",
       padding: 0,
       outline: "none"
-    }, onMouseDown: (e) => e.preventDefault(), children: action.icon ? (0, import_jsx_runtime19.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: (0, import_jsx_runtime19.jsx)(NodeIcon, { icon: action.icon, x: 0, y: 0, size: 16, color: active ? theme.breadcrumbs.activeColor : theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }) : action.swatch ? (0, import_jsx_runtime19.jsx)("span", { style: {
+    }, onMouseDown: (e) => e.preventDefault(), children: action.icon ? (0, import_jsx_runtime26.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: (0, import_jsx_runtime26.jsx)(NodeIcon, { icon: action.icon, x: 0, y: 0, size: 16, color: active ? theme.breadcrumbs.activeColor : theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }) : action.swatch ? (0, import_jsx_runtime26.jsx)("span", { style: {
       width: 10,
       height: 10,
       borderRadius: "50%",
       background: action.swatch
-    } }) : (0, import_jsx_runtime19.jsx)("span", { style: { fontSize: 10 }, children: action.label.slice(0, 2) }) });
+    } }) : (0, import_jsx_runtime26.jsx)("span", { style: { fontSize: 10 }, children: action.label.slice(0, 2) }) });
   }
   function MenuGroup({ group, actions, node, theme, onPatch }) {
-    const [open, setOpen] = (0, import_react17.useState)(false);
-    const wrapRef = (0, import_react17.useRef)(null);
-    (0, import_react17.useEffect)(() => {
+    const [open, setOpen] = (0, import_react19.useState)(false);
+    const wrapRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useEffect)(() => {
       if (!open)
         return;
       const onDown = (e) => {
@@ -18694,7 +19635,7 @@ var SystemCanvas = (() => {
     const active = actions.find((a) => a.isActive?.(node));
     const triggerLabel = active?.label ?? group.label ?? "Menu";
     const triggerIcon = active?.icon ?? void 0;
-    return (0, import_jsx_runtime19.jsxs)("div", { ref: wrapRef, style: { position: "relative" }, children: [(0, import_jsx_runtime19.jsxs)("button", { type: "button", title: group.label, onClick: () => setOpen((v) => !v), style: {
+    return (0, import_jsx_runtime26.jsxs)("div", { ref: wrapRef, style: { position: "relative" }, children: [(0, import_jsx_runtime26.jsxs)("button", { type: "button", title: group.label, onClick: () => setOpen((v) => !v), style: {
       height: BUTTON_SIZE,
       display: "inline-flex",
       alignItems: "center",
@@ -18708,7 +19649,7 @@ var SystemCanvas = (() => {
       fontFamily: "inherit",
       fontSize: "inherit",
       outline: "none"
-    }, onMouseDown: (e) => e.preventDefault(), children: [triggerIcon && (0, import_jsx_runtime19.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: (0, import_jsx_runtime19.jsx)(NodeIcon, { icon: triggerIcon, x: 0, y: 0, size: 14, color: theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }), (0, import_jsx_runtime19.jsx)("span", { children: triggerLabel }), (0, import_jsx_runtime19.jsx)("span", { style: { opacity: 0.6, fontSize: 8 }, children: "\u25BE" })] }), open && (0, import_jsx_runtime19.jsx)("div", { style: {
+    }, onMouseDown: (e) => e.preventDefault(), children: [triggerIcon && (0, import_jsx_runtime26.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: (0, import_jsx_runtime26.jsx)(NodeIcon, { icon: triggerIcon, x: 0, y: 0, size: 14, color: theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }), (0, import_jsx_runtime26.jsx)("span", { children: triggerLabel }), (0, import_jsx_runtime26.jsx)("span", { style: { opacity: 0.6, fontSize: 8 }, children: "\u25BE" })] }), open && (0, import_jsx_runtime26.jsx)("div", { style: {
       position: "absolute",
       top: "100%",
       left: 0,
@@ -18723,7 +19664,7 @@ var SystemCanvas = (() => {
       zIndex: 1
     }, children: actions.map((action) => {
       const isActive = action.isActive?.(node) ?? false;
-      return (0, import_jsx_runtime19.jsxs)("button", { type: "button", onClick: () => {
+      return (0, import_jsx_runtime26.jsxs)("button", { type: "button", onClick: () => {
         onPatch(resolveActionPatch(action, node));
         setOpen(false);
       }, style: {
@@ -18740,17 +19681,17 @@ var SystemCanvas = (() => {
         fontFamily: "inherit",
         fontSize: "inherit",
         textAlign: "left"
-      }, onMouseDown: (e) => e.preventDefault(), children: [action.icon && (0, import_jsx_runtime19.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: (0, import_jsx_runtime19.jsx)(NodeIcon, { icon: action.icon, x: 0, y: 0, size: 14, color: isActive ? theme.breadcrumbs.activeColor : theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }), action.swatch && (0, import_jsx_runtime19.jsx)("span", { style: {
+      }, onMouseDown: (e) => e.preventDefault(), children: [action.icon && (0, import_jsx_runtime26.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: (0, import_jsx_runtime26.jsx)(NodeIcon, { icon: action.icon, x: 0, y: 0, size: 14, color: isActive ? theme.breadcrumbs.activeColor : theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }), action.swatch && (0, import_jsx_runtime26.jsx)("span", { style: {
         width: 10,
         height: 10,
         borderRadius: "50%",
         background: action.swatch,
         flexShrink: 0
-      } }), (0, import_jsx_runtime19.jsx)("span", { children: action.label })] }, action.id);
+      } }), (0, import_jsx_runtime26.jsx)("span", { children: action.label })] }, action.id);
     }) })] });
   }
   function DeleteButton({ theme, onDelete }) {
-    return (0, import_jsx_runtime19.jsx)("button", { type: "button", title: "Delete", onClick: onDelete, onMouseDown: (e) => e.preventDefault(), style: {
+    return (0, import_jsx_runtime26.jsx)("button", { type: "button", title: "Delete", onClick: onDelete, onMouseDown: (e) => e.preventDefault(), style: {
       width: BUTTON_SIZE,
       height: BUTTON_SIZE,
       display: "inline-flex",
@@ -18763,21 +19704,21 @@ var SystemCanvas = (() => {
       cursor: "pointer",
       padding: 0,
       outline: "none"
-    }, children: (0, import_jsx_runtime19.jsx)("svg", { width: DELETE_SIZE, height: DELETE_SIZE, viewBox: "0 0 16 16", children: (0, import_jsx_runtime19.jsx)("path", { d: "M 3 5 L 13 5 M 6 5 L 6 3 L 10 3 L 10 5 M 5 5 L 5.5 14 L 10.5 14 L 11 5 M 7 7 L 7 12 M 9 7 L 9 12", fill: "none", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+    }, children: (0, import_jsx_runtime26.jsx)("svg", { width: DELETE_SIZE, height: DELETE_SIZE, viewBox: "0 0 16 16", children: (0, import_jsx_runtime26.jsx)("path", { d: "M 3 5 L 13 5 M 6 5 L 6 3 L 10 3 L 10 5 M 5 5 L 5.5 14 L 10.5 14 L 11 5 M 7 7 L 7 12 M 9 7 L 9 12", fill: "none", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }) }) });
   }
 
   // ../react/dist/components/SystemCanvas.js
   var CASCADE_WINDOW_MS = 1500;
   var CASCADE_OFFSET = 20;
-  var SystemCanvas = (0, import_react18.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodeDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, renderAddNodeButton, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, className, style }, forwardedRef) {
-    const zoomNavConfig = (0, import_react18.useMemo)(() => {
+  var SystemCanvas = (0, import_react20.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodeDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, renderAddNodeButton, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, className, style }, forwardedRef) {
+    const zoomNavConfig = (0, import_react20.useMemo)(() => {
       const defaults = {
         enterThreshold: 0.66,
         exitThreshold: 0.33,
         prefetchThreshold: 0.4,
         landingScale: 1.2,
         landingPadding: 0.08,
-        fadeDuration: 200
+        fadeDuration: 216
       };
       if (!zoomNavigation)
         return { enabled: false, ...defaults };
@@ -18795,16 +19736,16 @@ var SystemCanvas = (() => {
     }, [zoomNavigation]);
     const effectiveMaxZoom = maxZoom ?? (zoomNavConfig.enabled ? 16 : 4);
     const effectiveMinZoom = minZoomProp ?? (zoomNavConfig.enabled ? 0.01 : 0.1);
-    (0, import_react18.useEffect)(() => {
+    (0, import_react20.useEffect)(() => {
       const env = globalThis.process?.env?.NODE_ENV;
       if (editable && !canvases && env !== "production") {
         console.warn("[system-canvas] `editable` is enabled but `canvases` prop is missing. Edits to sub-canvases will not be reflected without a synchronous ref \u2192 CanvasData map.");
       }
     }, [editable, canvases]);
-    const [parentFrames, setParentFrames] = (0, import_react18.useState)([]);
-    const [pendingHandoff, setPendingHandoff] = (0, import_react18.useState)(null);
-    const suppressNextHandoffClearRef = (0, import_react18.useRef)(false);
-    const handleBreadcrumbClick = (0, import_react18.useCallback)((index) => {
+    const [parentFrames, setParentFrames] = (0, import_react20.useState)([]);
+    const [pendingHandoff, setPendingHandoff] = (0, import_react20.useState)(null);
+    const suppressNextHandoffClearRef = (0, import_react20.useRef)(false);
+    const handleBreadcrumbClick = (0, import_react20.useCallback)((index) => {
       setParentFrames((prev) => prev.slice(0, index));
       if (suppressNextHandoffClearRef.current) {
         suppressNextHandoffClearRef.current = false;
@@ -18821,7 +19762,7 @@ var SystemCanvas = (() => {
       onNavigate,
       onBreadcrumbClick: handleBreadcrumbClick
     });
-    const theme = (0, import_react18.useMemo)(() => {
+    const theme = (0, import_react20.useMemo)(() => {
       const registry = { ...themes, ...customThemes };
       const resolveByName = (name) => name && registry[name] ? registry[name] : null;
       if (themeProp) {
@@ -18832,22 +19773,22 @@ var SystemCanvas = (() => {
       }
       return resolveByName(currentCanvas.theme?.base) ?? resolveByName(canvas.theme?.base) ?? darkTheme;
     }, [themeProp, customThemes, currentCanvas.theme?.base, canvas.theme?.base]);
-    const { nodes, edges, nodeMap } = (0, import_react18.useMemo)(() => {
+    const { nodes, edges, nodeMap } = (0, import_react20.useMemo)(() => {
       const resolved = resolveCanvas(currentCanvas, theme);
       const map = buildNodeMap(resolved.nodes);
       return { nodes: resolved.nodes, edges: resolved.edges, nodeMap: map };
     }, [currentCanvas, theme]);
-    const nodesRef = (0, import_react18.useRef)(nodes);
+    const nodesRef = (0, import_react20.useRef)(nodes);
     nodesRef.current = nodes;
-    const viewportStateRef = (0, import_react18.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const viewportHandleRef = (0, import_react18.useRef)(null);
-    const navigateToRefRef = (0, import_react18.useRef)(navigateToRef);
+    const viewportStateRef = (0, import_react20.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const viewportHandleRef = (0, import_react20.useRef)(null);
+    const navigateToRefRef = (0, import_react20.useRef)(navigateToRef);
     navigateToRefRef.current = navigateToRef;
-    const navigateToBreadcrumbRef = (0, import_react18.useRef)(navigateToBreadcrumb);
+    const navigateToBreadcrumbRef = (0, import_react20.useRef)(navigateToBreadcrumb);
     navigateToBreadcrumbRef.current = navigateToBreadcrumb;
-    const breadcrumbsRef = (0, import_react18.useRef)(breadcrumbs);
+    const breadcrumbsRef = (0, import_react20.useRef)(breadcrumbs);
     breadcrumbsRef.current = breadcrumbs;
-    (0, import_react18.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react20.useImperativeHandle)(forwardedRef, () => ({
       zoomIntoNode: (nodeId, options) => {
         return new Promise((resolve) => {
           const node = nodesRef.current.find((n) => n.id === nodeId);
@@ -18879,19 +19820,19 @@ var SystemCanvas = (() => {
         navigateToBreadcrumbRef.current(0);
       }
     }), [forwardedRef]);
-    const [selectedId, setSelectedId] = (0, import_react18.useState)(null);
-    const [editingId, setEditingId] = (0, import_react18.useState)(null);
-    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react18.useState)(null);
-    const [editingEdgeId, setEditingEdgeId] = (0, import_react18.useState)(null);
-    (0, import_react18.useEffect)(() => {
+    const [selectedId, setSelectedId] = (0, import_react20.useState)(null);
+    const [editingId, setEditingId] = (0, import_react20.useState)(null);
+    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react20.useState)(null);
+    const [editingEdgeId, setEditingEdgeId] = (0, import_react20.useState)(null);
+    (0, import_react20.useEffect)(() => {
       setSelectedId(null);
       setEditingId(null);
       setSelectedEdgeId(null);
       setEditingEdgeId(null);
     }, [currentCanvasRef]);
-    const containerRef = (0, import_react18.useRef)(null);
-    const [containerSize, setContainerSize] = (0, import_react18.useState)({ width: 0, height: 0 });
-    (0, import_react18.useEffect)(() => {
+    const containerRef = (0, import_react20.useRef)(null);
+    const [containerSize, setContainerSize] = (0, import_react20.useState)({ width: 0, height: 0 });
+    (0, import_react20.useEffect)(() => {
       const el = containerRef.current;
       if (!el)
         return;
@@ -18906,19 +19847,28 @@ var SystemCanvas = (() => {
     }, []);
     const hasLanes = currentCanvas.columns && currentCanvas.columns.length > 0 || currentCanvas.rows && currentCanvas.rows.length > 0;
     const showLaneHeaders = hasLanes && laneHeaders !== "none";
-    const getViewportState = (0, import_react18.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
-    const commitDrag = (0, import_react18.useCallback)((id2, patch) => {
+    const getViewportState = (0, import_react20.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
+    const commitDrag = (0, import_react20.useCallback)((id2, patch) => {
       let final = patch;
       if (snapToLanes) {
         const cols = currentCanvas.columns;
         const rows = currentCanvas.rows;
+        const node = nodesRef.current.find((n) => n.id === id2);
         const nx = patch.x;
         const ny = patch.y;
         if (cols && cols.length > 0 && nx != null) {
-          final = { ...final, x: Math.round(snapToLane(nx, cols)) };
+          const snapped = snapToLane(nx, cols, {
+            edge: "center",
+            size: node?.width ?? 0
+          });
+          final = { ...final, x: Math.round(snapped) };
         }
         if (rows && rows.length > 0 && ny != null) {
-          final = { ...final, y: Math.round(snapToLane(ny, rows)) };
+          const snapped = snapToLane(ny, rows, {
+            edge: "center",
+            size: node?.height ?? 0
+          });
+          final = { ...final, y: Math.round(snapped) };
         }
       }
       onNodeUpdate?.(id2, final, currentCanvasRef);
@@ -18932,7 +19882,7 @@ var SystemCanvas = (() => {
       viewport: viewportStateRef,
       onCommit: commitDrag
     });
-    const selectedResolvedNode = (0, import_react18.useMemo)(() => {
+    const selectedResolvedNode = (0, import_react20.useMemo)(() => {
       if (!selectedId)
         return null;
       const base = nodeMap.get(selectedId);
@@ -18948,9 +19898,9 @@ var SystemCanvas = (() => {
       }
       return base;
     }, [selectedId, nodeMap, dragOverrides, resizeOverrides]);
-    const svgProxyRef = (0, import_react18.useRef)(null);
+    const svgProxyRef = (0, import_react20.useRef)(null);
     svgProxyRef.current = viewportHandleRef.current?.getSvgElement() ?? null;
-    const handleEdgeCreated = (0, import_react18.useCallback)((edge) => {
+    const handleEdgeCreated = (0, import_react20.useCallback)((edge) => {
       onEdgeAdd?.(edge, currentCanvasRef);
     }, [onEdgeAdd, currentCanvasRef]);
     const { pending: pendingEdge, onHandlePointerDown: onConnectionHandlePointerDown } = useEdgeCreate({
@@ -18959,7 +19909,7 @@ var SystemCanvas = (() => {
       nodesRef,
       onCreate: handleEdgeCreated
     });
-    const handleNavigableNodeClick = (0, import_react18.useCallback)((node) => {
+    const handleNavigableNodeClick = (0, import_react20.useCallback)((node) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -18970,16 +19920,23 @@ var SystemCanvas = (() => {
         }
       };
       setParentFrames((prev) => [...prev, frame2]);
+      if (!zoomNavConfig.enabled) {
+        navigateToRef(node);
+        return;
+      }
       const handle = viewportHandleRef.current;
       if (handle) {
         handle.zoomToNode(node, () => {
+          const finalVp = viewportStateRef.current;
+          if (finalVp)
+            setPendingHandoff({ ...finalVp });
           navigateToRef(node);
         });
       } else {
         navigateToRef(node);
       }
-    }, [navigateToRef, currentCanvasRef]);
-    const handleZoomEnter = (0, import_react18.useCallback)((node, targetTransform) => {
+    }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled]);
+    const handleZoomEnter = (0, import_react20.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -18993,7 +19950,7 @@ var SystemCanvas = (() => {
       setPendingHandoff(targetTransform);
       navigateToRef(node);
     }, [currentCanvasRef, navigateToRef]);
-    const handleZoomExit = (0, import_react18.useCallback)((targetTransform) => {
+    const handleZoomExit = (0, import_react20.useCallback)((targetTransform) => {
       setPendingHandoff(targetTransform);
       suppressNextHandoffClearRef.current = true;
       navigateToBreadcrumb(breadcrumbs.length - 2);
@@ -19019,19 +19976,19 @@ var SystemCanvas = (() => {
       onEnter: handleZoomEnter,
       onExit: handleZoomExit
     });
-    const handleViewportChange = (0, import_react18.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react20.useCallback)((vp) => {
       viewportStateRef.current = vp;
       handleZoomNavViewportChange(vp);
       onViewportChange?.(vp);
     }, [handleZoomNavViewportChange, onViewportChange]);
-    const handleHandoffApplied = (0, import_react18.useCallback)(() => {
+    const handleHandoffApplied = (0, import_react20.useCallback)(() => {
       setPendingHandoff(null);
       clearZoomNavCommitting();
     }, [clearZoomNavCommitting]);
-    const handleBeginEdit = (0, import_react18.useCallback)((node) => {
+    const handleBeginEdit = (0, import_react20.useCallback)((node) => {
       setEditingId(node.id);
     }, []);
-    const handleBeginEditEdge = (0, import_react18.useCallback)((edge) => {
+    const handleBeginEditEdge = (0, import_react20.useCallback)((edge) => {
       setEditingEdgeId(edge.id);
     }, []);
     const { handleNodeClick, handleNodeDoubleClick, handleNodeNavigate, handleEdgeClick, handleEdgeDoubleClick, handleCanvasClick, handleCanvasContextMenu, handleNodeContextMenu, handleEdgeContextMenu } = useCanvasInteraction({
@@ -19048,27 +20005,27 @@ var SystemCanvas = (() => {
       onSelectEdge: setSelectedEdgeId,
       onBeginEditEdge: handleBeginEditEdge
     });
-    const handleEditorCommit = (0, import_react18.useCallback)((patch) => {
+    const handleEditorCommit = (0, import_react20.useCallback)((patch) => {
       if (editingId) {
         onNodeUpdate?.(editingId, patch, currentCanvasRef);
       }
       setEditingId(null);
     }, [editingId, onNodeUpdate, currentCanvasRef]);
-    const handleEditorCancel = (0, import_react18.useCallback)(() => {
+    const handleEditorCancel = (0, import_react20.useCallback)(() => {
       setEditingId(null);
     }, []);
-    const handleEdgeEditorCommit = (0, import_react18.useCallback)((patch) => {
+    const handleEdgeEditorCommit = (0, import_react20.useCallback)((patch) => {
       if (editingEdgeId) {
         onEdgeUpdate?.(editingEdgeId, patch, currentCanvasRef);
       }
       setEditingEdgeId(null);
     }, [editingEdgeId, onEdgeUpdate, currentCanvasRef]);
-    const handleEdgeEditorCancel = (0, import_react18.useCallback)(() => {
+    const handleEdgeEditorCancel = (0, import_react20.useCallback)(() => {
       setEditingEdgeId(null);
     }, []);
-    const lastAddRef = (0, import_react18.useRef)(null);
-    const menuOptions = (0, import_react18.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
-    const addNode2 = (0, import_react18.useCallback)((option, position) => {
+    const lastAddRef = (0, import_react20.useRef)(null);
+    const menuOptions = (0, import_react20.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
+    const addNode2 = (0, import_react20.useCallback)((option, position) => {
       let x, y;
       if (position) {
         x = position.x;
@@ -19097,10 +20054,10 @@ var SystemCanvas = (() => {
         y += nextOffset;
         lastAddRef.current = { t: now2, offset: nextOffset };
       }
-      const node = createNodeFromOption(option, Math.round(x), Math.round(y));
+      const node = createNodeFromOption(option, Math.round(x), Math.round(y), void 0, theme);
       onNodeAdd?.(node, currentCanvasRef);
-    }, [onNodeAdd, currentCanvasRef]);
-    const handleKeyDown = (0, import_react18.useCallback)((e) => {
+    }, [onNodeAdd, currentCanvasRef, theme]);
+    const handleKeyDown = (0, import_react20.useCallback)((e) => {
       if (!editable)
         return;
       if (e.key === "Escape") {
@@ -19134,14 +20091,14 @@ var SystemCanvas = (() => {
       currentCanvasRef
     ]);
     const renderProps = { options: menuOptions, addNode: addNode2, theme };
-    return (0, import_jsx_runtime20.jsxs)("div", { ref: containerRef, className: `system-canvas ${className ?? ""}`, tabIndex: editable ? 0 : -1, onKeyDown: handleKeyDown, style: {
+    return (0, import_jsx_runtime27.jsxs)("div", { ref: containerRef, className: `system-canvas ${className ?? ""}`, tabIndex: editable ? 0 : -1, onKeyDown: handleKeyDown, style: {
       position: "relative",
       width: "100%",
       height: "100%",
       overflow: "hidden",
       outline: "none",
       ...style
-    }, children: [(0, import_jsx_runtime20.jsx)(Breadcrumbs, { breadcrumbs, theme: theme.breadcrumbs, onNavigate: navigateToBreadcrumb }), isLoading && (0, import_jsx_runtime20.jsx)("div", { className: "system-canvas-loading", style: {
+    }, children: [(0, import_jsx_runtime27.jsx)(Breadcrumbs, { breadcrumbs, theme: theme.breadcrumbs, onNavigate: navigateToBreadcrumb }), isLoading && (0, import_jsx_runtime27.jsx)("div", { className: "system-canvas-loading", style: {
       position: "absolute",
       top: 12,
       right: 12,
@@ -19153,12 +20110,12 @@ var SystemCanvas = (() => {
       fontFamily: theme.node.fontFamily,
       fontSize: 12,
       backdropFilter: "blur(8px)"
-    }, children: "Loading..." }), (0, import_jsx_runtime20.jsx)(Viewport, { ref: viewportHandleRef, nodes, edges, nodeMap, theme, edgeStyle, columns: currentCanvas.columns, rows: currentCanvas.rows, minZoom: effectiveMinZoom, maxZoom: effectiveMaxZoom, defaultViewport, autoFit, canvasRef: currentCanvasRef, handoffTransform: pendingHandoff, onHandoffApplied: handleHandoffApplied, handoffFadeMs: zoomNavConfig.fadeDuration, onViewportChange: handleViewportChange, onNodeClick: handleNodeClick, onNodeDoubleClick: handleNodeDoubleClick, onNodeNavigate: handleNodeNavigate, onEdgeClick: handleEdgeClick, onEdgeDoubleClick: handleEdgeDoubleClick, onCanvasClick: editable ? handleCanvasClick : void 0, onCanvasContextMenu: handleCanvasContextMenu, onNodeContextMenu: handleNodeContextMenu, onEdgeContextMenu: handleEdgeContextMenu, onNodePointerDown: editable ? onNodePointerDown : void 0, selectedId: editable ? selectedId : null, editingId: editable ? editingId : null, selectedEdgeId: editable ? selectedEdgeId : null, editingEdgeId: editable ? editingEdgeId : null, dragOverrides, resizeOverrides, onResizeHandlePointerDown: editable ? onResizeHandlePointerDown : void 0, onEditorCommit: handleEditorCommit, onEditorCancel: handleEditorCancel, onEdgeEditorCommit: handleEdgeEditorCommit, onEdgeEditorCancel: handleEdgeEditorCancel, pendingEdge: editable ? pendingEdge : null, onConnectionHandlePointerDown: editable ? onConnectionHandlePointerDown : void 0, edgeCreateEnabled: editable }), showLaneHeaders && (0, import_jsx_runtime20.jsx)(LaneHeaders, { columns: currentCanvas.columns, rows: currentCanvas.rows, theme, getViewport: getViewportState, width: containerSize.width, height: containerSize.height, pinned: laneHeaders === "pinned" }), editable && showNodeToolbar && selectedResolvedNode && !editingId && (0, import_jsx_runtime20.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
+    }, children: "Loading..." }), (0, import_jsx_runtime27.jsx)(Viewport, { ref: viewportHandleRef, nodes, edges, nodeMap, theme, edgeStyle, columns: currentCanvas.columns, rows: currentCanvas.rows, canvases, minZoom: effectiveMinZoom, maxZoom: effectiveMaxZoom, defaultViewport, autoFit, canvasRef: currentCanvasRef, handoffTransform: pendingHandoff, onHandoffApplied: handleHandoffApplied, handoffFadeMs: zoomNavConfig.fadeDuration, onViewportChange: handleViewportChange, onNodeClick: handleNodeClick, onNodeDoubleClick: handleNodeDoubleClick, onNodeNavigate: handleNodeNavigate, onEdgeClick: handleEdgeClick, onEdgeDoubleClick: handleEdgeDoubleClick, onCanvasClick: editable ? handleCanvasClick : void 0, onCanvasContextMenu: handleCanvasContextMenu, onNodeContextMenu: handleNodeContextMenu, onEdgeContextMenu: handleEdgeContextMenu, onNodePointerDown: editable ? onNodePointerDown : void 0, selectedId: editable ? selectedId : null, editingId: editable ? editingId : null, selectedEdgeId: editable ? selectedEdgeId : null, editingEdgeId: editable ? editingEdgeId : null, dragOverrides, resizeOverrides, onResizeHandlePointerDown: editable ? onResizeHandlePointerDown : void 0, onEditorCommit: handleEditorCommit, onEditorCancel: handleEditorCancel, onEdgeEditorCommit: handleEdgeEditorCommit, onEdgeEditorCancel: handleEdgeEditorCancel, pendingEdge: editable ? pendingEdge : null, onConnectionHandlePointerDown: editable ? onConnectionHandlePointerDown : void 0, edgeCreateEnabled: editable }), showLaneHeaders && (0, import_jsx_runtime27.jsx)(LaneHeaders, { columns: currentCanvas.columns, rows: currentCanvas.rows, theme, getViewport: getViewportState, width: containerSize.width, height: containerSize.height, pinned: laneHeaders === "pinned" }), editable && showNodeToolbar && selectedResolvedNode && !editingId && (0, import_jsx_runtime27.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
       onNodeUpdate?.(selectedResolvedNode.id, update, currentCanvasRef);
     }, onDelete: () => {
       onNodeDelete?.(selectedResolvedNode.id, currentCanvasRef);
       setSelectedId(null);
-    }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height, render: renderNodeToolbar }), editable && (renderAddNodeButton ? renderAddNodeButton(renderProps) : (0, import_jsx_runtime20.jsx)(AddNodeButton, { ...renderProps }))] });
+    }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height, render: renderNodeToolbar }), editable && (renderAddNodeButton ? renderAddNodeButton(renderProps) : (0, import_jsx_runtime27.jsx)(AddNodeButton, { ...renderProps }))] });
   });
 
   // src/index.tsx
@@ -19269,7 +20226,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react19.default.createElement(SystemCanvas, props));
+      root2.render(import_react21.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {