system-canvas-standalone 0.1.1 → 0.2.1

package/dist/system-canvas.js

@@ -12759,12 +12759,12 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react21 = __toESM(require_react(), 1);
+  var import_react22 = __toESM(require_react(), 1);
   var import_client = __toESM(require_client(), 1);
 
   // ../react/dist/components/SystemCanvas.js
-  var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
-  var import_react20 = __toESM(require_react(), 1);
+  var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
+  var import_react21 = __toESM(require_react(), 1);
 
   // ../core/dist/themes/dark.js
   var darkTheme = {
@@ -12827,6 +12827,25 @@ var SystemCanvas = (() => {
       fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', monospace",
       fontSize: 12
     },
+    contextMenu: {
+      background: "rgba(15, 23, 42, 0.96)",
+      // slate-900 near-opaque
+      borderColor: "rgba(71, 85, 105, 0.6)",
+      // slate-600
+      borderRadius: 8,
+      itemColor: "#e2e8f0",
+      // slate-200
+      itemHoverBackground: "rgba(71, 85, 105, 0.35)",
+      destructiveItemColor: "#fb7185",
+      // rose-400
+      fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', monospace",
+      fontSize: 12,
+      paddingY: 4,
+      paddingX: 4,
+      itemPaddingY: 5,
+      itemPaddingX: 10,
+      shadow: "0 8px 24px rgba(0,0,0,0.35)"
+    },
     lanes: {
       bandFillEven: "rgba(30, 41, 59, 0.18)",
       // slate-800 soft
@@ -12912,6 +12931,21 @@ var SystemCanvas = (() => {
       fontFamily: "'JetBrains Mono', monospace",
       fontSize: 11
     },
+    contextMenu: {
+      background: "rgba(0, 0, 0, 0.96)",
+      borderColor: "rgba(55, 65, 81, 0.7)",
+      borderRadius: 6,
+      itemColor: "#d1d5db",
+      itemHoverBackground: "rgba(0, 255, 136, 0.12)",
+      destructiveItemColor: "#f87171",
+      fontFamily: "'JetBrains Mono', monospace",
+      fontSize: 11,
+      paddingY: 3,
+      paddingX: 3,
+      itemPaddingY: 5,
+      itemPaddingX: 10,
+      shadow: "0 8px 24px rgba(0,255,136,0.08)"
+    },
     lanes: {
       bandFillEven: "rgba(17, 17, 17, 0.7)",
       bandFillOdd: "rgba(0, 0, 0, 0)",
@@ -12998,6 +13032,21 @@ var SystemCanvas = (() => {
       fontFamily: "'Inter', 'Helvetica Neue', sans-serif",
       fontSize: 12
     },
+    contextMenu: {
+      background: "rgba(255, 255, 255, 0.98)",
+      borderColor: "rgba(203, 213, 225, 0.9)",
+      borderRadius: 8,
+      itemColor: "#1e293b",
+      itemHoverBackground: "rgba(148, 163, 184, 0.18)",
+      destructiveItemColor: "#dc2626",
+      fontFamily: "'Inter', 'Helvetica Neue', sans-serif",
+      fontSize: 12,
+      paddingY: 4,
+      paddingX: 4,
+      itemPaddingY: 5,
+      itemPaddingX: 10,
+      shadow: "0 8px 24px rgba(15,23,42,0.12)"
+    },
     lanes: {
       bandFillEven: "rgba(148, 163, 184, 0.10)",
       // slate-400 soft
@@ -13077,6 +13126,21 @@ var SystemCanvas = (() => {
       fontFamily: "'JetBrains Mono', monospace",
       fontSize: 11
     },
+    contextMenu: {
+      background: "rgba(10, 22, 40, 0.97)",
+      borderColor: "rgba(74, 144, 217, 0.45)",
+      borderRadius: 6,
+      itemColor: "#d4e5f7",
+      itemHoverBackground: "rgba(74, 144, 217, 0.18)",
+      destructiveItemColor: "#fb7185",
+      fontFamily: "'JetBrains Mono', monospace",
+      fontSize: 11,
+      paddingY: 3,
+      paddingX: 3,
+      itemPaddingY: 5,
+      itemPaddingX: 10,
+      shadow: "0 8px 24px rgba(10,22,40,0.5)"
+    },
     lanes: {
       bandFillEven: "rgba(19, 34, 68, 0.45)",
       bandFillOdd: "rgba(19, 34, 68, 0.15)",
@@ -13154,6 +13218,21 @@ var SystemCanvas = (() => {
       fontFamily: "'IBM Plex Mono', monospace",
       fontSize: 12
     },
+    contextMenu: {
+      background: "rgba(26, 23, 20, 0.97)",
+      borderColor: "rgba(107, 94, 74, 0.6)",
+      borderRadius: 8,
+      itemColor: "#e8ddd0",
+      itemHoverBackground: "rgba(107, 94, 74, 0.3)",
+      destructiveItemColor: "#fb7185",
+      fontFamily: "'IBM Plex Mono', monospace",
+      fontSize: 12,
+      paddingY: 4,
+      paddingX: 4,
+      itemPaddingY: 5,
+      itemPaddingX: 10,
+      shadow: "0 8px 24px rgba(0,0,0,0.4)"
+    },
     lanes: {
       bandFillEven: "rgba(42, 37, 32, 0.55)",
       bandFillOdd: "rgba(42, 37, 32, 0.2)",
@@ -13232,6 +13311,21 @@ var SystemCanvas = (() => {
       fontFamily: "'Inter', 'Helvetica Neue', sans-serif",
       fontSize: 12
     },
+    contextMenu: {
+      background: "rgba(15, 17, 21, 0.96)",
+      borderColor: "rgba(63, 69, 83, 0.8)",
+      borderRadius: 8,
+      itemColor: "#e8ebf2",
+      itemHoverBackground: "rgba(90, 100, 120, 0.3)",
+      destructiveItemColor: "#fb7185",
+      fontFamily: "'Inter', 'Helvetica Neue', sans-serif",
+      fontSize: 12,
+      paddingY: 4,
+      paddingX: 4,
+      itemPaddingY: 5,
+      itemPaddingX: 10,
+      shadow: "0 8px 24px rgba(0,0,0,0.4)"
+    },
     // Slightly stronger lane fills than the other themes — roadmap columns
     // should read as the primary structure of the canvas.
     lanes: {
@@ -13458,10 +13552,16 @@ var SystemCanvas = (() => {
       group: { ...base.group, ...partial.group },
       breadcrumbs: { ...base.breadcrumbs, ...partial.breadcrumbs },
       lanes: { ...base.lanes, ...partial.lanes },
+      // contextMenu is optional on CanvasTheme but darkTheme always defines it,
+      // so the resolved theme is guaranteed to have a populated block as long
+      // as `base` is a complete theme (which is the contract).
+      contextMenu: partial.contextMenu ? { ...base.contextMenu, ...partial.contextMenu } : base.contextMenu,
       presetColors: { ...base.presetColors, ...partial.presetColors },
       categories: { ...base.categories, ...partial.categories },
       icons: partial.icons ? { ...base.icons ?? {}, ...partial.icons } : base.icons,
-      nodeActions: partial.nodeActions ?? base.nodeActions
+      nodeActions: partial.nodeActions ?? base.nodeActions,
+      showToolbarDelete: partial.showToolbarDelete ?? base.showToolbarDelete,
+      toolbarAlign: partial.toolbarAlign ?? base.toolbarAlign
     };
   }
   function resolveColor(color2, theme) {
@@ -13809,6 +13909,29 @@ var SystemCanvas = (() => {
     return getNodeActions(theme);
   }
 
+  // ../core/dist/contextMenu.js
+  function matchesContextMenuItem(item, node, ctx) {
+    const m = item.match;
+    if (!m)
+      return true;
+    if (m.categories) {
+      if (!node.category)
+        return false;
+      if (!m.categories.includes(node.category))
+        return false;
+    }
+    if (m.types) {
+      if (!m.types.includes(node.type))
+        return false;
+    }
+    if (m.when && !m.when(node, ctx))
+      return false;
+    return true;
+  }
+  function filterContextMenuItems(items, node, ctx) {
+    return items.filter((item) => matchesContextMenuItem(item, node, ctx));
+  }
+
   // ../core/dist/rollup.js
   function rollupNodes(canvas, predicate) {
     const nodes = canvas?.nodes ?? [];
@@ -13839,6 +13962,23 @@ var SystemCanvas = (() => {
   var TAB_BADGE_EM = 1.4;
   var TAB_BADGE_LIFT = 10;
   var TAB_BADGE_OVERHANG = 8;
+  function cornerSlotClearance(spec, fontSize) {
+    if (!spec)
+      return 0;
+    if (spec.kind !== "dot" && spec.kind !== "icon")
+      return 0;
+    const corner = CORNER_EM * fontSize;
+    let renderedWidth = corner;
+    if (spec.kind === "icon") {
+      const explicitSize = spec.size;
+      if (typeof explicitSize === "number" && explicitSize > corner) {
+        renderedWidth = explicitSize;
+      }
+    }
+    const gap = Math.max(8, Math.round(fontSize * 0.75));
+    const overhang = Math.max(0, (renderedWidth - corner) / 2);
+    return overhang + corner + gap;
+  }
   function computeCategorySlotRegions(node, theme, slots) {
     const { x, y, width, height } = node;
     const fs = theme.node.fontSize;
@@ -13906,12 +14046,16 @@ var SystemCanvas = (() => {
         width: tab,
         height: tab
       },
-      topLeft: {
-        x: x + CORNER_INSET,
-        y: y + CORNER_INSET,
-        width: corner,
-        height: corner
-      },
+      topLeft: (() => {
+        const usesInlineRow = slots?.topLeft !== void 0 && (slots.topLeft.kind === "dot" || slots.topLeft.kind === "icon") && slots.header === void 0;
+        const slotY = usesInlineRow ? y + (height - corner) / 2 : y + CORNER_INSET;
+        return {
+          x: x + CORNER_INSET,
+          y: slotY,
+          width: corner,
+          height: corner
+        };
+      })(),
       topRight: {
         x: x + width - CORNER_INSET - corner,
         y: y + CORNER_INSET,
@@ -13930,18 +14074,49 @@ var SystemCanvas = (() => {
         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
-      },
+      header: (() => {
+        let hx = x + HEADER_INSET_X;
+        let hw = Math.max(0, width - HEADER_INSET_X * 2);
+        const leftClear = cornerSlotClearance(slots?.topLeft, fs);
+        if (leftClear > 0) {
+          const leftEdge = x + CORNER_INSET + leftClear;
+          const shift = Math.max(0, leftEdge - hx);
+          hx += shift;
+          hw = Math.max(0, hw - shift);
+        }
+        const rightClear = cornerSlotClearance(slots?.topRight, fs);
+        if (rightClear > 0) {
+          const rightEdge = x + width - CORNER_INSET - rightClear;
+          const currentRight = hx + hw;
+          const shrink = Math.max(0, currentRight - rightEdge);
+          hw = Math.max(0, hw - shrink);
+        }
+        return { x: hx, y: y + HEADER_INSET_Y, width: hw, height: header };
+      })(),
+      footer: (() => {
+        let fx = x + HEADER_INSET_X;
+        let fw = Math.max(0, width - HEADER_INSET_X * 2);
+        const leftClear = cornerSlotClearance(slots?.bottomLeft, fs);
+        if (leftClear > 0) {
+          const leftEdge = x + CORNER_INSET + leftClear;
+          const shift = Math.max(0, leftEdge - fx);
+          fx += shift;
+          fw = Math.max(0, fw - shift);
+        }
+        const rightClear = cornerSlotClearance(slots?.bottomRight, fs);
+        if (rightClear > 0) {
+          const rightEdge = x + width - CORNER_INSET - rightClear;
+          const currentRight = fx + fw;
+          const shrink = Math.max(0, currentRight - rightEdge);
+          fw = Math.max(0, fw - shrink);
+        }
+        return {
+          x: fx,
+          y: y + height - FOOTER_INSET_Y - footer,
+          width: fw,
+          height: footer
+        };
+      })(),
       body: {
         x: bodyX,
         y: bodyY,
@@ -14064,13 +14239,26 @@ var SystemCanvas = (() => {
       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);
+    if (slots.topLeft && (slots.topLeft.kind === "dot" || slots.topLeft.kind === "icon")) {
+      const region = regions.topLeft;
+      let renderedWidth = region.width;
+      if (slots.topLeft.kind === "icon") {
+        const explicitSize = slots.topLeft.size;
+        if (typeof explicitSize === "number" && explicitSize > region.width) {
+          renderedWidth = explicitSize;
+        }
+      }
+      const iconLeftFromNode = region.x - node.x + (region.width - renderedWidth) / 2;
+      const gap = Math.max(8, Math.round(theme.node.fontSize * 0.75));
+      left = Math.max(left, iconLeftFromNode + renderedWidth + gap);
     }
-    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";
+    const hasTopRowSignal = slots.header !== void 0 || slots.topRight !== void 0 || slots.bodyTop !== void 0 || slots.footer !== void 0;
+    const hasInlineLeftMarker = slots.topLeft !== void 0 && (slots.topLeft.kind === "dot" || slots.topLeft.kind === "icon");
+    const isDashboard = hasTopRowSignal || hasInlineLeftMarker;
     if (isDashboard) {
-      if (!slots.header)
+      if (hasTopRowSignal && !slots.header) {
         top = Math.max(top, HEADER_INSET_Y);
+      }
       left = Math.max(left, HEADER_INSET_X);
       right = Math.max(right, HEADER_INSET_X);
     }
@@ -14119,7 +14307,7 @@ var SystemCanvas = (() => {
   }
 
   // ../core/dist/text.js
-  var GLYPH_WIDTH_RATIO = 0.62;
+  var GLYPH_WIDTH_RATIO = 0.55;
   function measureTextWidth(text, fontSize) {
     if (!text)
       return 0;
@@ -14168,6 +14356,29 @@ var SystemCanvas = (() => {
     }
     return out;
   }
+  function truncateToWidth(text, maxWidth, fontSize) {
+    if (!text)
+      return text;
+    if (maxWidth <= 0)
+      return text;
+    if (measureTextWidth(text, fontSize) <= maxWidth)
+      return text;
+    const ellipsis = "\u2026";
+    let lo = 0;
+    let hi = text.length;
+    let best = 0;
+    while (lo <= hi) {
+      const mid = lo + hi >> 1;
+      const candidate = text.slice(0, mid) + ellipsis;
+      if (measureTextWidth(candidate, fontSize) <= maxWidth) {
+        best = mid;
+        lo = mid + 1;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    return text.slice(0, best) + ellipsis;
+  }
   function ellipsize(line, maxWidth, fontSize) {
     const ellipsis = "\u2026";
     if (measureTextWidth(line + ellipsis, fontSize) <= maxWidth) {
@@ -14180,7 +14391,7 @@ var SystemCanvas = (() => {
       if (measureTextWidth(candidate, fontSize) <= maxWidth)
         return candidate;
     }
-    return line + ellipsis;
+    return truncateToWidth(line, maxWidth, fontSize);
   }
 
   // ../core/dist/canvas.js
@@ -14484,7 +14695,12 @@ var SystemCanvas = (() => {
         onContextMenu({
           type,
           target,
-          position: canvasPos
+          position: canvasPos,
+          // Raw viewport coords from the original MouseEvent. Consumers
+          // rendering a `position: fixed` floating menu need these — the
+          // canvas-space `position` would be wrong because it walks
+          // with the user's pan/zoom.
+          screenPosition: { x: event.clientX, y: event.clientY }
         });
       };
     }, [onContextMenu, viewport]);
@@ -14520,11 +14736,43 @@ var SystemCanvas = (() => {
   var import_react3 = __toESM(require_react(), 1);
   var DRAG_THRESHOLD = 3;
   function useNodeDrag(options) {
-    const { viewport, nodesRef, onCommit } = options;
+    const { viewport, nodesRef, onCommit, svgRef, canDropNodeOn, onNodeDrop } = options;
     const [dragOverrides, setDragOverrides] = (0, import_react3.useState)(() => /* @__PURE__ */ new Map());
     const [isDragging, setIsDragging] = (0, import_react3.useState)(false);
+    const [dropTargetId, setDropTargetId] = (0, import_react3.useState)(null);
     const stateRef = (0, import_react3.useRef)(null);
     const movedRef = (0, import_react3.useRef)(false);
+    const canDropNodeOnRef = (0, import_react3.useRef)(canDropNodeOn);
+    canDropNodeOnRef.current = canDropNodeOn;
+    const onNodeDropRef = (0, import_react3.useRef)(onNodeDrop);
+    onNodeDropRef.current = onNodeDrop;
+    const svgRefRef = (0, import_react3.useRef)(svgRef);
+    svgRefRef.current = svgRef;
+    const dropTargetIdRef = (0, import_react3.useRef)(null);
+    const computeDropTarget = (0, import_react3.useCallback)((clientX, clientY) => {
+      const cb = canDropNodeOnRef.current;
+      const st = stateRef.current;
+      const nodes = nodesRef.current;
+      const svg = svgRefRef.current?.current;
+      if (!cb || !st || !nodes || !svg)
+        return null;
+      const rect = svg.getBoundingClientRect();
+      const vp = viewport.current ?? { x: 0, y: 0, zoom: 1 };
+      const { x, y } = screenToCanvas(clientX - rect.left, clientY - rect.top, vp);
+      for (let i = nodes.length - 1; i >= 0; i--) {
+        const n = nodes[i];
+        if (st.moving.has(n.id))
+          continue;
+        if (x < n.x || x > n.x + n.width)
+          continue;
+        if (y < n.y || y > n.y + n.height)
+          continue;
+        if (cb([st.source], n))
+          return n.id;
+        return null;
+      }
+      return null;
+    }, [nodesRef, viewport]);
     const onPointerMove = (0, import_react3.useCallback)((event) => {
       const st = stateRef.current;
       if (!st || event.pointerId !== st.pointerId)
@@ -14546,7 +14794,12 @@ var SystemCanvas = (() => {
         next.set(id2, { x: start2.startX + dx, y: start2.startY + dy });
       }
       setDragOverrides(next);
-    }, [viewport]);
+      const nextTarget = computeDropTarget(event.clientX, event.clientY);
+      if (nextTarget !== dropTargetIdRef.current) {
+        dropTargetIdRef.current = nextTarget;
+        setDropTargetId(nextTarget);
+      }
+    }, [viewport, computeDropTarget]);
     const finishDrag = (0, import_react3.useCallback)((commit) => {
       const st = stateRef.current;
       if (!st)
@@ -14559,17 +14812,38 @@ var SystemCanvas = (() => {
         st.captureTarget.releasePointerCapture?.(st.pointerId);
       } catch {
       }
+      const dropTarget = dropTargetIdRef.current;
+      if (commit && movedRef.current && dropTarget) {
+        const nodes = nodesRef.current;
+        const target = nodes?.find((n) => n.id === dropTarget) ?? null;
+        if (target && onNodeDropRef.current) {
+          onNodeDropRef.current([st.source], target);
+          stateRef.current = null;
+          movedRef.current = false;
+          dropTargetIdRef.current = null;
+          setIsDragging(false);
+          setDragOverrides(/* @__PURE__ */ new Map());
+          setDropTargetId(null);
+          return;
+        }
+      }
       if (commit && movedRef.current) {
         const overrides = Array.from(dragOverridesRef.current.entries());
-        for (const [id2, pos] of overrides) {
-          onCommit(id2, { x: Math.round(pos.x), y: Math.round(pos.y) });
+        if (overrides.length > 0) {
+          const updates = overrides.map(([id2, pos]) => ({
+            id: id2,
+            patch: { x: Math.round(pos.x), y: Math.round(pos.y) }
+          }));
+          onCommit(updates);
         }
       }
       stateRef.current = null;
       movedRef.current = false;
+      dropTargetIdRef.current = null;
       setIsDragging(false);
       setDragOverrides(/* @__PURE__ */ new Map());
-    }, [onPointerMove, onCommit]);
+      setDropTargetId(null);
+    }, [onPointerMove, onCommit, nodesRef]);
     const dragOverridesRef = (0, import_react3.useRef)(dragOverrides);
     dragOverridesRef.current = dragOverrides;
     const onPointerUpRef = (0, import_react3.useRef)(null);
@@ -14609,9 +14883,11 @@ var SystemCanvas = (() => {
         startClientY: event.clientY,
         captureTarget: event.currentTarget,
         pointerId: event.pointerId,
-        moving
+        moving,
+        source: node
       };
       movedRef.current = false;
+      dropTargetIdRef.current = null;
       try {
         ;
         event.currentTarget.setPointerCapture?.(event.pointerId);
@@ -14621,7 +14897,7 @@ var SystemCanvas = (() => {
       window.addEventListener("pointerup", onPointerUp);
       window.addEventListener("pointercancel", onPointerCancel);
     }, [nodesRef, onPointerMove, onPointerUp, onPointerCancel]);
-    return { dragOverrides, onPointerDown, isDragging };
+    return { dragOverrides, dropTargetId, onPointerDown, isDragging };
   }
 
   // ../react/dist/hooks/useNodeResize.js
@@ -14896,11 +15172,15 @@ var SystemCanvas = (() => {
     return { x, y, zoom };
   }
   function useZoomNavigation(options) {
-    const { enabled, config, nodes, currentCanvas, parentFrame, canvases, onResolveCanvas, onSeedCanvas, theme, getViewportSize, onEnter, onExit } = options;
+    const { enabled, config, nodes, currentCanvas, parentFrame, canvases, onResolveCanvas, onSeedCanvas, theme, getViewportSize, getCursorScreenPos, onEnter, onExit } = options;
     const committingRef = (0, import_react6.useRef)(false);
     (0, import_react6.useEffect)(() => {
       committingRef.current = false;
     }, [currentCanvas]);
+    const exitArmedRef = (0, import_react6.useRef)(false);
+    (0, import_react6.useEffect)(() => {
+      exitArmedRef.current = false;
+    }, [currentCanvas, parentFrame]);
     const prefetchRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
     const prefetch = (0, import_react6.useCallback)((ref) => {
       if (!onResolveCanvas)
@@ -14928,36 +15208,87 @@ var SystemCanvas = (() => {
       const size = getViewportSize();
       if (!size)
         return;
-      for (const n of nodes) {
-        if (!n.ref)
-          continue;
-        const screen = canvasRectToScreenRect({ x: n.x, y: n.y, width: n.width, height: n.height }, vp);
-        const centerX = screen.x + screen.width / 2;
-        const centerY = screen.y + screen.height / 2;
-        const centerOnScreen = centerX >= 0 && centerX <= size.width && centerY >= 0 && centerY <= size.height;
-        if (!centerOnScreen)
-          continue;
+      const cursor = getCursorScreenPos();
+      const viewportCenterX = size.width / 2;
+      const viewportCenterY = size.height / 2;
+      let cursorNode = null;
+      if (cursor) {
+        for (const n of nodes) {
+          if (!n.ref)
+            continue;
+          const screen = canvasRectToScreenRect({ x: n.x, y: n.y, width: n.width, height: n.height }, vp);
+          if (cursor.x < screen.x || cursor.x > screen.x + screen.width || cursor.y < screen.y || cursor.y > screen.y + screen.height) {
+            continue;
+          }
+          const area = screen.width * screen.height;
+          if (!cursorNode || area < cursorNode.area) {
+            cursorNode = { node: n, screen, area };
+          }
+        }
+      }
+      let bestCandidate = null;
+      if (cursorNode) {
+        const screen = cursorNode.screen;
         const fillFraction = Math.max(screen.width / size.width, screen.height / size.height);
-        if (fillFraction >= config.prefetchThreshold && fillFraction < config.enterThreshold) {
-          prefetch(n.ref);
+        if (fillFraction >= config.prefetchThreshold && cursorNode.node.ref) {
+          prefetch(cursorNode.node.ref);
         }
         if (fillFraction >= config.enterThreshold) {
-          const childData = canvases?.[n.ref] ?? prefetchRef.current.get(n.ref)?.data;
-          if (!childData) {
+          bestCandidate = { node: cursorNode.node, screen, distSq: 0 };
+        }
+        for (const n of nodes) {
+          if (!n.ref)
+            continue;
+          if (n === cursorNode.node)
+            continue;
+          const s = canvasRectToScreenRect({ x: n.x, y: n.y, width: n.width, height: n.height }, vp);
+          const ff = Math.max(s.width / size.width, s.height / size.height);
+          if (ff >= config.prefetchThreshold)
             prefetch(n.ref);
+        }
+      } else {
+        for (const n of nodes) {
+          if (!n.ref)
+            continue;
+          const screen = canvasRectToScreenRect({ x: n.x, y: n.y, width: n.width, height: n.height }, vp);
+          const centerX = screen.x + screen.width / 2;
+          const centerY = screen.y + screen.height / 2;
+          const centerOnScreen = centerX >= 0 && centerX <= size.width && centerY >= 0 && centerY <= size.height;
+          if (!centerOnScreen)
             continue;
+          const fillFraction = Math.max(screen.width / size.width, screen.height / size.height);
+          if (fillFraction >= config.prefetchThreshold && fillFraction < config.enterThreshold) {
+            prefetch(n.ref);
           }
+          if (fillFraction >= config.enterThreshold) {
+            const dx = centerX - viewportCenterX;
+            const dy = centerY - viewportCenterY;
+            const distSq = dx * dx + dy * dy;
+            if (!bestCandidate || distSq < bestCandidate.distSq) {
+              bestCandidate = { node: n, screen, distSq };
+            }
+          }
+        }
+      }
+      if (bestCandidate) {
+        const n = bestCandidate.node;
+        const screen = bestCandidate.screen;
+        const ref = n.ref;
+        const childData = canvases?.[ref] ?? prefetchRef.current.get(ref)?.data;
+        if (!childData) {
+          prefetch(ref);
+        } else {
           const resolved = resolveCanvas(childData, theme);
-          if (resolved.nodes.length === 0)
-            continue;
-          const bounds = computeBoundingBox(resolved.nodes);
-          const targetRect = expandRect(screen, config.landingScale);
-          const landingPad = Math.min(targetRect.width, targetRect.height) * config.landingPadding;
-          let targetTransform = fitBoundsIntoRect(bounds, targetRect, landingPad);
-          targetTransform = clampTransformToViewport(targetTransform, bounds, size, 16);
-          committingRef.current = true;
-          onEnter(n, targetTransform);
-          return;
+          if (resolved.nodes.length > 0) {
+            const bounds = computeBoundingBox(resolved.nodes);
+            const targetRect = expandRect(screen, config.landingScale);
+            const landingPad = Math.min(targetRect.width, targetRect.height) * config.landingPadding;
+            let targetTransform = fitBoundsIntoRect(bounds, targetRect, landingPad);
+            targetTransform = clampTransformToViewport(targetTransform, bounds, size, 16);
+            committingRef.current = true;
+            onEnter(n, targetTransform);
+            return;
+          }
         }
       }
       if (parentFrame && nodes.length > 0) {
@@ -14971,6 +15302,12 @@ var SystemCanvas = (() => {
           height: bounds.height
         }, vp);
         const fillFraction = Math.max(screen.width / size.width, screen.height / size.height);
+        if (!exitArmedRef.current) {
+          if (fillFraction > config.exitThreshold) {
+            exitArmedRef.current = true;
+          }
+          return;
+        }
         if (fillFraction <= config.exitThreshold) {
           const targetTransform = fitBoundsIntoRect({
             minX: parentFrame.parentNodeRect.x,
@@ -14997,6 +15334,7 @@ var SystemCanvas = (() => {
       theme,
       config,
       getViewportSize,
+      getCursorScreenPos,
       prefetch,
       onEnter,
       onExit
@@ -17872,17 +18210,67 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeIcon.js
   var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
-  function NodeIcon({ icon, x, y, size = 14, color: color2, opacity = 0.7, customIcons }) {
+  function NodeIcon({ icon, x, y, size = 14, color: color2, opacity = 0.7, customIcons, mode = "stroke", viewBox = 16 }) {
     const pathData = customIcons?.[icon] ?? iconPaths[icon];
     if (!pathData)
       return null;
-    return (0, import_jsx_runtime.jsx)("g", { transform: `translate(${x}, ${y})`, pointerEvents: "none", opacity, children: pathData.map((d, i) => (0, import_jsx_runtime.jsx)("path", { d: scalePathData(d, size), fill: "none", stroke: color2, strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }, i)) });
+    const defaultStrokeWidth = viewBox * 0.075;
+    return (0, import_jsx_runtime.jsx)("g", { transform: `translate(${x}, ${y})`, pointerEvents: "none", opacity, children: pathData.map((entry, i) => {
+      const spec = typeof entry === "string" ? { d: entry } : entry;
+      const pathMode = spec.mode ?? mode;
+      const rawStrokeWidth = spec.strokeWidth ?? defaultStrokeWidth;
+      const renderedStrokeWidth = rawStrokeWidth * size / viewBox;
+      return (0, import_jsx_runtime.jsx)("path", {
+        d: scalePathData(spec.d, size, viewBox),
+        fill: pathMode === "fill" ? color2 : "none",
+        stroke: pathMode === "stroke" ? color2 : "none",
+        strokeWidth: pathMode === "stroke" ? renderedStrokeWidth : 0,
+        strokeLinecap: pathMode === "stroke" ? "round" : void 0,
+        strokeLinejoin: pathMode === "stroke" ? "round" : void 0,
+        // Brand silhouettes are typically authored as a single path
+        // whose holes are expressed with subpath winding. `evenodd`
+        // is the safe choice; nonzero would fill some holes solid.
+        fillRule: pathMode === "fill" ? "evenodd" : void 0
+      }, i);
+    }) });
   }
-  function scalePathData(d, size) {
-    const scale = size / 16;
-    return d.replace(/(-?\d+\.?\d*)/g, (match) => {
-      return String(parseFloat(match) * scale);
-    });
+  function scalePathData(d, size, source) {
+    const scale = size / source;
+    const out = [];
+    const numberAtStart = /^-?(?:\d+\.?\d*|\.\d+)/;
+    let isArc = false;
+    let arcIndex = 0;
+    let i = 0;
+    while (i < d.length) {
+      const ch = d[i];
+      if (ch === " " || ch === "," || ch === "	" || ch === "\n" || ch === "\r") {
+        i++;
+        continue;
+      }
+      if (/[a-zA-Z]/.test(ch)) {
+        out.push(ch);
+        isArc = ch === "a" || ch === "A";
+        arcIndex = 0;
+        i++;
+        continue;
+      }
+      if (isArc && (arcIndex === 3 || arcIndex === 4)) {
+        out.push(ch === "0" ? "0" : "1");
+        arcIndex = (arcIndex + 1) % 7;
+        i++;
+        continue;
+      }
+      const m = numberAtStart.exec(d.substring(i));
+      if (!m) {
+        i++;
+        continue;
+      }
+      out.push(String(parseFloat(m[0]) * scale));
+      if (isArc)
+        arcIndex = (arcIndex + 1) % 7;
+      i += m[0].length;
+    }
+    return out.join(" ");
   }
   var iconPaths = {
     // Database: cylinder shape
@@ -17975,11 +18363,12 @@ var SystemCanvas = (() => {
   // ../react/dist/components/RefIndicator.js
   var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
   var import_react8 = __toESM(require_react(), 1);
-  function RefIndicator({ node, theme, nodeX, nodeY, nodeWidth, nodeHeight, strokeColor, strokeWidth, corner = "bottom-right", size = 18, onNavigate }) {
+  function RefIndicator({ node, theme, nodeX, nodeY, nodeWidth, nodeHeight, strokeColor, strokeWidth, corner = "bottom-right", size: sizeProp, onNavigate }) {
     const [hover, setHover] = (0, import_react8.useState)(false);
     const iconKind = theme.node.refIndicator.icon;
     if (iconKind === "none")
       return null;
+    const size = sizeProp ?? theme.node.refIndicator.size ?? 18;
     const stopAll = (e) => e.stopPropagation();
     const right = nodeX + nodeWidth;
     const bottom = nodeY + nodeHeight;
@@ -18025,19 +18414,22 @@ var SystemCanvas = (() => {
     return (0, import_jsx_runtime2.jsxs)("g", { className: "system-canvas-ref-indicator", style: { cursor: "pointer" }, onClick: (e) => {
       e.stopPropagation();
       onNavigate(node, e);
-    }, onDoubleClick: stopAll, onPointerDown: stopAll, onMouseDown: stopAll, onPointerEnter: () => setHover(true), onPointerLeave: () => setHover(false), children: [hover && (0, import_jsx_runtime2.jsx)("path", { d: hoverPath, fill: hoverFill, pointerEvents: "none" }), (0, import_jsx_runtime2.jsx)("path", { d: carvePath, fill: "none", stroke: strokeColor, strokeWidth: sw, strokeLinecap: "butt", strokeLinejoin: "round", pointerEvents: "none" }), (0, import_jsx_runtime2.jsx)("rect", { x: squareX, y: squareY, width: size, height: size, fill: "transparent" }), (0, import_jsx_runtime2.jsx)(Glyph, { kind: iconKind, cx, cy, color: hover ? hoverGlyph : restGlyph })] });
+    }, onDoubleClick: stopAll, onPointerDown: stopAll, onMouseDown: stopAll, onPointerEnter: () => setHover(true), onPointerLeave: () => setHover(false), children: [hover && (0, import_jsx_runtime2.jsx)("path", { d: hoverPath, fill: hoverFill, pointerEvents: "none" }), (0, import_jsx_runtime2.jsx)("path", { d: carvePath, fill: "none", stroke: strokeColor, strokeWidth: sw, strokeLinecap: "butt", strokeLinejoin: "round", pointerEvents: "none" }), (0, import_jsx_runtime2.jsx)("rect", { x: squareX, y: squareY, width: size, height: size, fill: "transparent" }), (0, import_jsx_runtime2.jsx)(Glyph, { kind: iconKind, cx, cy, color: hover ? hoverGlyph : restGlyph, size })] });
   }
-  function Glyph({ kind, cx, cy, color: color2 }) {
-    const s = 3;
+  function Glyph({ kind, cx, cy, color: color2, size }) {
+    const s = size / 6;
+    const sw = Math.max(1, size / 9);
     switch (kind) {
       case "chevron":
-        return (0, import_jsx_runtime2.jsx)("path", { d: `M ${cx - s / 2} ${cy - s} L ${cx + s / 2} ${cy} L ${cx - s / 2} ${cy + s}`, fill: "none", stroke: color2, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", pointerEvents: "none" });
+        return (0, import_jsx_runtime2.jsx)("path", { d: `M ${cx - s / 2} ${cy - s} L ${cx + s / 2} ${cy} L ${cx - s / 2} ${cy + s}`, fill: "none", stroke: color2, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round", pointerEvents: "none" });
       case "arrow": {
         const h = s * 0.9;
-        return (0, import_jsx_runtime2.jsx)("path", { d: `M ${cx - s} ${cy} L ${cx + s} ${cy} M ${cx + s - h} ${cy - h} L ${cx + s} ${cy} L ${cx + s - h} ${cy + h}`, fill: "none", stroke: color2, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", pointerEvents: "none" });
+        return (0, import_jsx_runtime2.jsx)("path", { d: `M ${cx - s} ${cy} L ${cx + s} ${cy} M ${cx + s - h} ${cy - h} L ${cx + s} ${cy} L ${cx + s - h} ${cy + h}`, fill: "none", stroke: color2, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round", pointerEvents: "none" });
+      }
+      case "expand": {
+        const sw2 = Math.max(1, size / 12);
+        return (0, import_jsx_runtime2.jsxs)("g", { pointerEvents: "none", children: [(0, import_jsx_runtime2.jsx)("path", { d: `M ${cx - s} ${cy - s} L ${cx + s} ${cy - s} L ${cx + s} ${cy + s} L ${cx - s} ${cy + s} Z`, fill: "none", stroke: color2, strokeWidth: sw2, strokeLinejoin: "round" }), (0, import_jsx_runtime2.jsx)("line", { x1: cx, y1: cy - s + 1, x2: cx, y2: cy + s - 1, stroke: color2, strokeWidth: sw2, strokeLinecap: "round" }), (0, import_jsx_runtime2.jsx)("line", { x1: cx - s + 1, y1: cy, x2: cx + s - 1, y2: cy, stroke: color2, strokeWidth: sw2, strokeLinecap: "round" })] });
       }
-      case "expand":
-        return (0, import_jsx_runtime2.jsxs)("g", { pointerEvents: "none", children: [(0, import_jsx_runtime2.jsx)("path", { d: `M ${cx - s} ${cy - s} L ${cx + s} ${cy - s} L ${cx + s} ${cy + s} L ${cx - s} ${cy + s} Z`, fill: "none", stroke: color2, strokeWidth: 1.5, strokeLinejoin: "round" }), (0, import_jsx_runtime2.jsx)("line", { x1: cx, y1: cy - s + 1, x2: cx, y2: cy + s - 1, stroke: color2, strokeWidth: 1.5, strokeLinecap: "round" }), (0, import_jsx_runtime2.jsx)("line", { x1: cx - s + 1, y1: cy, x2: cx + s - 1, y2: cy, stroke: color2, strokeWidth: 1.5, strokeLinecap: "round" })] });
     }
   }
 
@@ -18164,7 +18556,7 @@ var SystemCanvas = (() => {
   // ../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 }) {
+  function NodeText({ region, value, theme, color: color2, fill, align = "start", fontWeight = 500, uppercase = false, useLabelFont = false, fontFamily, fontSize: fontSizeProp, wrap = false, maxLines, lineHeight: lineHeightProp, verticalAlign = "top" }) {
     const reactId = (0, import_react9.useId)();
     const safeId = reactId.replace(/:/g, "");
     if (!value)
@@ -18178,15 +18570,16 @@ var SystemCanvas = (() => {
     const fillAttr = gradId ? `url(#${gradId})` : color2 ?? theme.node.sublabelColor;
     const displayValue = uppercase ? value.toUpperCase() : value;
     if (!wrap) {
+      const rendered = truncateToWidth(displayValue, region.width, fontSize);
       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 })] });
+      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: rendered })] });
     }
-    const wrapInset = 4;
-    const wrapWidth = Math.max(0, region.width - wrapInset * 2);
-    const lines = wrapTextWithBreaks(displayValue, wrapWidth, fontSize, maxLines);
+    const lines = wrapTextWithBreaks(displayValue, region.width, fontSize, maxLines);
     if (lines.length === 0)
       return null;
-    const baseY = region.y + fontSize;
+    const blockHeight = fontSize + (lines.length - 1) * lineHeight;
+    const topY = region.y + fontSize;
+    const baseY = verticalAlign === "center" ? region.y + (region.height - blockHeight) / 2 + fontSize : verticalAlign === "bottom" ? region.y + region.height - blockHeight + fontSize : topY;
     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)) }) })] });
   }
@@ -18338,6 +18731,20 @@ var SystemCanvas = (() => {
         const color2 = resolveAccessorOr(spec.color, nodeColor, ctx);
         return (0, import_jsx_runtime9.jsx)(NodeDot, { region, color: color2 });
       }
+      case "icon": {
+        const name = resolveAccessor(spec.name, ctx);
+        if (!name)
+          return null;
+        const color2 = resolveAccessorOr(spec.color, nodeColor, ctx);
+        const opacity = resolveAccessorOr(spec.opacity, 1, ctx);
+        const mode = resolveAccessorOr(spec.mode, "stroke", ctx);
+        const viewBox = resolveAccessorOr(spec.viewBox, 16, ctx);
+        const auto = Math.max(8, Math.min(region.width, region.height) - 2);
+        const size = resolveAccessorOr(spec.size, auto, ctx);
+        const x = region.x + (region.width - size) / 2;
+        const y = region.y + (region.height - size) / 2;
+        return (0, import_jsx_runtime9.jsx)(NodeIcon, { icon: name, x, y, size, color: color2, opacity, customIcons: theme.icons, mode, viewBox });
+      }
       case "custom": {
         return spec.render(ctx);
       }
@@ -18365,20 +18772,21 @@ var SystemCanvas = (() => {
     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 LABEL_PAD_X = 10;
+    const LABEL_PAD_Y = 6;
+    const text = node.text ?? node.id;
     const hasBodySlot = slots?.body !== void 0;
     const hasHeader = reservedTop > 0;
-    const labelFont = theme.node.labelFont ?? theme.node.fontFamily;
+    const hasInlineLeftMarker = slots?.topLeft !== void 0 && (slots.topLeft.kind === "dot" || slots.topLeft.kind === "icon") && !hasHeader;
+    const isLeftAligned = hasHeader || hasInlineLeftMarker;
     const labelFontSize = theme.node.fontSize + (hasHeader ? 1 : 0);
-    const lineHeight = labelFontSize + 4;
-    const totalTextHeight = sublabel ? lineHeight + theme.node.sublabelFontSize + 4 : lineHeight;
-    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 })] });
+    const labelAlign = isLeftAligned ? "start" : "center";
+    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)(NodeText, { region: {
+      x: contentX + LABEL_PAD_X,
+      y: contentY + LABEL_PAD_Y,
+      width: Math.max(0, contentWidth - LABEL_PAD_X * 2),
+      height: Math.max(0, contentHeight - LABEL_PAD_Y * 2)
+    }, value: text, theme, color: theme.node.labelColor, align: labelAlign, fontWeight: 600, fontSize: labelFontSize, useLabelFont: true, wrap: true, verticalAlign: hasHeader ? "top" : "center" }), 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
@@ -18392,6 +18800,7 @@ var SystemCanvas = (() => {
     const fold = 10;
     const textPadding = 10 + reservedLeft;
     const maxTextWidth = width - textPadding - reservedRight - fold;
+    const LABEL_PAD_Y = 6;
     const contentY = y + reservedTop;
     const contentHeight = Math.max(0, height - reservedTop - reservedBottom);
     const shapePath = [
@@ -18410,7 +18819,12 @@ var SystemCanvas = (() => {
     const strokeColor = node.resolvedStroke;
     const thinStroke = 0.75;
     const clipId = `file-clip-${node.id}`;
-    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 })] });
+    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)(NodeText, { region: {
+      x: x + textPadding,
+      y: dirPath ? contentY + 18 : contentY + (subpath ? 8 : LABEL_PAD_Y),
+      width: maxTextWidth,
+      height: dirPath ? Math.max(0, contentHeight - 18 - (subpath ? 16 : 0)) : Math.max(0, contentHeight - (subpath ? 16 : 0) - LABEL_PAD_Y * 2)
+    }, value: fileName, theme, color: theme.node.labelColor, align: "start", fontWeight: 500, fontSize: theme.node.fontSize - 1, wrap: true, verticalAlign: dirPath ? "top" : "center" }), 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
@@ -18421,14 +18835,21 @@ var SystemCanvas = (() => {
     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;
+    const glyphReserve = 20;
+    const LABEL_PAD_X = 10;
+    const LABEL_PAD_Y = 6;
     let displayUrl = node.url ?? "";
     try {
       const url = new URL(displayUrl);
       displayUrl = url.hostname;
     } catch {
     }
-    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 })] });
+    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)(NodeText, { region: {
+      x: contentX + glyphReserve,
+      y: contentY + LABEL_PAD_Y,
+      width: Math.max(0, contentWidth - glyphReserve - LABEL_PAD_X),
+      height: Math.max(0, contentHeight - LABEL_PAD_Y * 2)
+    }, value: displayUrl, theme, color: theme.node.labelColor, align: "center", fontWeight: 600, fontSize: theme.node.fontSize, wrap: true, verticalAlign: "center" }), 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
@@ -18554,7 +18975,8 @@ var SystemCanvas = (() => {
       const isEditing = editingId === edge.id;
       const baseColor = edge.color ? resolveColor(edge.color, theme).stroke : theme.edge.stroke;
       const edgeColor = isSelected ? theme.node.labelColor : baseColor;
-      const strokeWidth = isSelected ? theme.edge.strokeWidth * 1.75 : theme.edge.strokeWidth;
+      const baseStrokeWidth = edge.strokeWidth ?? theme.edge.strokeWidth;
+      const strokeWidth = isSelected ? baseStrokeWidth * 1.75 : baseStrokeWidth;
       const toEnd = edge.toEnd ?? "arrow";
       const fromEnd = edge.fromEnd ?? "none";
       const arrowId = "system-canvas-arrowhead";
@@ -18617,6 +19039,10 @@ var SystemCanvas = (() => {
     const fontFamily = theme.node.fontFamily;
     const fontSize = theme.node.fontSize;
     const padding = 8;
+    const slots = getCategorySlots(node, theme);
+    const reservations = computeReflowReservations(node, theme, slots);
+    const hasHeader = reservations.top > 0;
+    const textAlign = node.type === "text" && !hasHeader ? "center" : "left";
     const commonFieldStyle = {
       width: "100%",
       height: "100%",
@@ -18630,7 +19056,7 @@ var SystemCanvas = (() => {
       borderRadius: node.resolvedCornerRadius,
       outline: "none",
       resize: "none",
-      textAlign: node.type === "text" ? "center" : "left"
+      textAlign
     };
     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) {
@@ -19000,7 +19426,7 @@ var SystemCanvas = (() => {
   // ../react/dist/components/Viewport.js
   var HOVER_PADDING = 10;
   var EDGE_PROXIMITY = 16;
-  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) {
+  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, dropTargetId, 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,
@@ -19043,6 +19469,7 @@ var SystemCanvas = (() => {
     }, []);
     const [hoveredNodeId, setHoveredNodeId] = (0, import_react15.useState)(null);
     const [hoveredSide, setHoveredSide] = (0, import_react15.useState)(null);
+    const cursorPosRef = (0, import_react15.useRef)(null);
     (0, import_react15.useImperativeHandle)(ref, () => ({
       zoomToNode: (node, onComplete, options) => {
         navigatingRef.current = true;
@@ -19051,7 +19478,8 @@ var SystemCanvas = (() => {
       fitToContent,
       setTransform,
       getSvgElement: () => svgRef.current,
-      getViewport: () => viewport.current ?? { x: 0, y: 0, zoom: 1 }
+      getViewport: () => viewport.current ?? { x: 0, y: 0, zoom: 1 },
+      getCursorScreenPos: () => cursorPosRef.current
     }));
     const renderNodes = (0, import_react15.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
@@ -19134,14 +19562,17 @@ var SystemCanvas = (() => {
     ]);
     const editingNode = editingId ? renderNodes.find((n) => n.id === editingId) ?? null : null;
     const handleSvgPointerMove = (0, import_react15.useCallback)((event) => {
-      if (!edgeCreateEnabled)
-        return;
       const svg = svgRef.current;
       if (!svg)
         return;
       const rect = svg.getBoundingClientRect();
+      const cursorScreenX = event.clientX - rect.left;
+      const cursorScreenY = event.clientY - rect.top;
+      cursorPosRef.current = { x: cursorScreenX, y: cursorScreenY };
+      if (!edgeCreateEnabled)
+        return;
       const vp = viewport.current ?? { x: 0, y: 0, zoom: 1 };
-      const { x, y } = screenToCanvas(event.clientX - rect.left, event.clientY - rect.top, vp);
+      const { x, y } = screenToCanvas(cursorScreenX, cursorScreenY, vp);
       const pad = HOVER_PADDING;
       let hit = null;
       for (let i = renderNodes.length - 1; i >= 0; i--) {
@@ -19185,11 +19616,13 @@ var SystemCanvas = (() => {
     const handleSvgPointerLeave = (0, import_react15.useCallback)(() => {
       setHoveredNodeId(null);
       setHoveredSide(null);
+      cursorPosRef.current = null;
     }, []);
     const handlesNodeId = pendingEdge?.sourceId ?? hoveredNodeId;
     const handlesNode = edgeCreateEnabled && handlesNodeId ? renderNodeMap.get(handlesNodeId) ?? null : null;
     const pendingSourceNode = pendingEdge ? renderNodeMap.get(pendingEdge.sourceId) ?? null : null;
     const pendingTargetNode = pendingEdge?.hoveredTargetId && pendingEdge.hoveredTargetId !== pendingEdge.sourceId ? renderNodeMap.get(pendingEdge.hoveredTargetId) ?? null : null;
+    const dropTargetNode = dropTargetId ? renderNodeMap.get(dropTargetId) ?? null : null;
     const editingEdge = editingEdgeId ? edges.find((e) => e.id === editingEdgeId) ?? null : null;
     const editingEdgeMidpoint = (() => {
       if (!editingEdge)
@@ -19209,7 +19642,7 @@ var SystemCanvas = (() => {
       WebkitUserSelect: "none",
       MozUserSelect: "none",
       msUserSelect: "none"
-    }, 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 })] })] });
+    }, 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" }), dropTargetNode && (0, import_jsx_runtime22.jsx)("rect", { className: "system-canvas-drop-target system-canvas-node-drop-target", x: dropTargetNode.x - 4, y: dropTargetNode.y - 4, width: dropTargetNode.width + 8, height: dropTargetNode.height + 8, rx: dropTargetNode.resolvedCornerRadius + 4, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, strokeDasharray: "6 4", opacity: 0.9, 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
@@ -19438,7 +19871,7 @@ var SystemCanvas = (() => {
       const cx = visibleLeft + visibleW / 2;
       if (endScreen <= colsOffsetLeft || startScreen >= width)
         return null;
-      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}`);
+      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: truncateToWidth2(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;
@@ -19450,10 +19883,10 @@ var SystemCanvas = (() => {
       const cy = visibleTop + visibleH / 2;
       if (endScreen <= rowsOffsetTop || startScreen >= height)
         return null;
-      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}`);
+      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: truncateToWidth2(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) {
+  function truncateToWidth2(label, availablePx, fontSize) {
     if (availablePx <= 0)
       return "";
     const charPx = fontSize * 0.6;
@@ -19495,8 +19928,10 @@ var SystemCanvas = (() => {
       raf = requestAnimationFrame(tick);
       return () => cancelAnimationFrame(raf);
     }, [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 align = theme.toolbarAlign ?? "center";
+    const anchorCanvasX = align === "left" ? node.x : align === "right" ? node.x + node.width : node.x + node.width / 2;
+    const topAnchor = canvasToScreen(anchorCanvasX, node.y, viewport);
+    const bottomAnchor = canvasToScreen(anchorCanvasX, node.y + node.height, viewport);
     const toolbarRef = (0, import_react19.useRef)(null);
     const [size, setSize] = (0, import_react19.useState)({ width: 0, height: 0 });
     (0, import_react19.useEffect)(() => {
@@ -19505,17 +19940,17 @@ var SystemCanvas = (() => {
         return;
       const update = () => {
         const r = el.getBoundingClientRect();
-        setSize({ width: r.width, height: r.height });
+        setSize((prev) => prev.width === r.width && prev.height === r.height ? prev : { width: r.width, height: r.height });
       };
       update();
       const ro = new ResizeObserver(update);
       ro.observe(el);
       return () => ro.disconnect();
-    });
-    let left = topCenter.x - size.width / 2;
-    let top = topCenter.y - size.height - NODE_GAP;
+    }, []);
+    let left = align === "left" ? topAnchor.x : align === "right" ? topAnchor.x - size.width : topAnchor.x - size.width / 2;
+    let top = topAnchor.y - size.height - NODE_GAP;
     if (top < FLIP_MARGIN) {
-      top = bottomCenter.y + NODE_GAP;
+      top = bottomAnchor.y + NODE_GAP;
     }
     left = Math.max(FLIP_MARGIN, Math.min(left, containerWidth - size.width - FLIP_MARGIN));
     const patch = (update) => onPatch(update);
@@ -19554,7 +19989,7 @@ var SystemCanvas = (() => {
   }
   function DefaultToolbarContent({ node, theme, onPatch, onDelete }) {
     const groups = (0, import_react19.useMemo)(() => getNodeActionsForNode(node, theme), [node, theme]);
-    const showDelete = !theme.hideToolbarDelete;
+    const showDelete = theme.showToolbarDelete === true;
     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 }) {
@@ -19709,16 +20144,134 @@ var SystemCanvas = (() => {
     }, 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/NodeContextMenuOverlay.js
+  var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
+  var import_react20 = __toESM(require_react(), 1);
+  var ESTIMATED_MENU_WIDTH = 200;
+  var MIN_MENU_WIDTH = 160;
+  var VIEWPORT_MARGIN = 8;
+  function NodeContextMenuOverlay({ state, config, theme, onClose }) {
+    const rootRef = (0, import_react20.useRef)(null);
+    const [hoveredId, setHoveredId] = (0, import_react20.useState)(null);
+    (0, import_react20.useEffect)(() => {
+      if (state)
+        setHoveredId(null);
+    }, [state]);
+    (0, import_react20.useEffect)(() => {
+      if (!state)
+        return;
+      function onDown(e) {
+        const root2 = rootRef.current;
+        if (!root2)
+          return;
+        if (root2.contains(e.target))
+          return;
+        onClose();
+      }
+      function onKey(e) {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose();
+        }
+      }
+      function onScroll() {
+        onClose();
+      }
+      window.addEventListener("mousedown", onDown);
+      window.addEventListener("keydown", onKey);
+      window.addEventListener("scroll", onScroll, true);
+      window.addEventListener("blur", onClose);
+      return () => {
+        window.removeEventListener("mousedown", onDown);
+        window.removeEventListener("keydown", onKey);
+        window.removeEventListener("scroll", onScroll, true);
+        window.removeEventListener("blur", onClose);
+      };
+    }, [state, onClose]);
+    if (!state)
+      return null;
+    const cm = theme.contextMenu;
+    if (!cm)
+      return null;
+    const vw = typeof window !== "undefined" ? window.innerWidth : 0;
+    const vh = typeof window !== "undefined" ? window.innerHeight : 0;
+    const itemHeight = cm.itemPaddingY * 2 + cm.fontSize + 4;
+    const estimatedHeight = state.items.length * itemHeight + cm.paddingY * 2;
+    const left = vw ? Math.min(state.screenPosition.x, vw - ESTIMATED_MENU_WIDTH - VIEWPORT_MARGIN) : state.screenPosition.x;
+    const top = vh ? Math.min(state.screenPosition.y, vh - estimatedHeight - VIEWPORT_MARGIN) : state.screenPosition.y;
+    const matchCtx = { canvasRef: state.canvasRef };
+    const anyIcon = state.items.some((item) => !!item.icon);
+    return (0, import_jsx_runtime27.jsx)("div", {
+      ref: rootRef,
+      role: "menu",
+      // Stop right-clicks inside the menu from bubbling into the document
+      // listener and re-opening the canvas-level menu.
+      onContextMenu: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      style: {
+        position: "fixed",
+        left,
+        top,
+        zIndex: 1e3,
+        minWidth: MIN_MENU_WIDTH,
+        padding: `${cm.paddingY}px ${cm.paddingX}px`,
+        background: cm.background,
+        color: cm.itemColor,
+        border: `1px solid ${cm.borderColor}`,
+        borderRadius: cm.borderRadius,
+        boxShadow: cm.shadow,
+        fontFamily: cm.fontFamily,
+        fontSize: cm.fontSize,
+        backdropFilter: "blur(10px)",
+        userSelect: "none",
+        // `pointer-events: auto` so the menu still receives clicks even
+        // when a parent canvas overlay disables them.
+        pointerEvents: "auto"
+      },
+      children: state.items.map((item) => {
+        const isDisabled = item.disabled?.(state.node, matchCtx) ?? false;
+        const isHovered = !isDisabled && hoveredId === item.id;
+        const color2 = item.destructive ? cm.destructiveItemColor : cm.itemColor;
+        return (0, import_jsx_runtime27.jsxs)("div", { role: "menuitem", "aria-disabled": isDisabled, onMouseEnter: () => !isDisabled && setHoveredId(item.id), onMouseLeave: () => setHoveredId((id2) => id2 === item.id ? null : id2), onClick: () => {
+          if (isDisabled)
+            return;
+          config.onSelect(item.id, state.node, {
+            canvasRef: state.canvasRef,
+            screenPosition: state.screenPosition
+          });
+          onClose();
+        }, style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          padding: `${cm.itemPaddingY}px ${cm.itemPaddingX}px`,
+          borderRadius: Math.max(0, cm.borderRadius - 4),
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          opacity: isDisabled ? 0.45 : 1,
+          background: isHovered ? cm.itemHoverBackground : "transparent",
+          color: color2
+        }, children: [item.icon ? (0, import_jsx_runtime27.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", style: { flexShrink: 0, overflow: "visible" }, children: (0, import_jsx_runtime27.jsx)(NodeIcon, { icon: item.icon, x: 0, y: 0, size: 14, color: color2, opacity: 1, customIcons: theme.icons }) }) : anyIcon ? (
+          // Only reserve a spacer when other items in the same menu
+          // do have icons — keeps labels vertically aligned in a
+          // mixed menu without padding lone-item menus.
+          (0, import_jsx_runtime27.jsx)("span", { style: { width: 14, flexShrink: 0 }, "aria-hidden": true })
+        ) : null, (0, import_jsx_runtime27.jsx)("span", { children: item.label })] }, item.id);
+      })
+    });
+  }
+
   // ../react/dist/components/SystemCanvas.js
   var CASCADE_WINDOW_MS = 1500;
   var CASCADE_OFFSET = 20;
-  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)(() => {
+  var SystemCanvas = (0, import_react21.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, 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_react21.useMemo)(() => {
       const defaults = {
         enterThreshold: 0.66,
         exitThreshold: 0.33,
         prefetchThreshold: 0.4,
-        landingScale: 1.2,
+        landingScale: 1.3,
         landingPadding: 0.08,
         fadeDuration: 216
       };
@@ -19738,16 +20291,16 @@ var SystemCanvas = (() => {
     }, [zoomNavigation]);
     const effectiveMaxZoom = maxZoom ?? (zoomNavConfig.enabled ? 16 : 4);
     const effectiveMinZoom = minZoomProp ?? (zoomNavConfig.enabled ? 0.01 : 0.1);
-    (0, import_react20.useEffect)(() => {
+    (0, import_react21.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_react20.useState)([]);
-    const [pendingHandoff, setPendingHandoff] = (0, import_react20.useState)(null);
-    const suppressNextHandoffClearRef = (0, import_react20.useRef)(false);
-    const handleBreadcrumbClick = (0, import_react20.useCallback)((index) => {
+    const [parentFrames, setParentFrames] = (0, import_react21.useState)([]);
+    const [pendingHandoff, setPendingHandoff] = (0, import_react21.useState)(null);
+    const suppressNextHandoffClearRef = (0, import_react21.useRef)(false);
+    const handleBreadcrumbClick = (0, import_react21.useCallback)((index) => {
       setParentFrames((prev) => prev.slice(0, index));
       if (suppressNextHandoffClearRef.current) {
         suppressNextHandoffClearRef.current = false;
@@ -19764,7 +20317,10 @@ var SystemCanvas = (() => {
       onNavigate,
       onBreadcrumbClick: handleBreadcrumbClick
     });
-    const theme = (0, import_react20.useMemo)(() => {
+    (0, import_react21.useEffect)(() => {
+      onBreadcrumbsChange?.(breadcrumbs);
+    }, [breadcrumbs, onBreadcrumbsChange]);
+    const theme = (0, import_react21.useMemo)(() => {
       const registry = { ...themes, ...customThemes };
       const resolveByName = (name) => name && registry[name] ? registry[name] : null;
       if (themeProp) {
@@ -19775,22 +20331,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_react20.useMemo)(() => {
+    const { nodes, edges, nodeMap } = (0, import_react21.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_react20.useRef)(nodes);
+    const nodesRef = (0, import_react21.useRef)(nodes);
     nodesRef.current = nodes;
-    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);
+    const viewportStateRef = (0, import_react21.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const viewportHandleRef = (0, import_react21.useRef)(null);
+    const navigateToRefRef = (0, import_react21.useRef)(navigateToRef);
     navigateToRefRef.current = navigateToRef;
-    const navigateToBreadcrumbRef = (0, import_react20.useRef)(navigateToBreadcrumb);
+    const navigateToBreadcrumbRef = (0, import_react21.useRef)(navigateToBreadcrumb);
     navigateToBreadcrumbRef.current = navigateToBreadcrumb;
-    const breadcrumbsRef = (0, import_react20.useRef)(breadcrumbs);
+    const breadcrumbsRef = (0, import_react21.useRef)(breadcrumbs);
     breadcrumbsRef.current = breadcrumbs;
-    (0, import_react20.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react21.useImperativeHandle)(forwardedRef, () => ({
       zoomIntoNode: (nodeId, options) => {
         return new Promise((resolve) => {
           const node = nodesRef.current.find((n) => n.id === nodeId);
@@ -19822,19 +20378,51 @@ var SystemCanvas = (() => {
         navigateToBreadcrumbRef.current(0);
       }
     }), [forwardedRef]);
-    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)(() => {
+    const [selectedId, setSelectedId] = (0, import_react21.useState)(null);
+    const [editingId, setEditingId] = (0, import_react21.useState)(null);
+    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react21.useState)(null);
+    const [editingEdgeId, setEditingEdgeId] = (0, import_react21.useState)(null);
+    (0, import_react21.useEffect)(() => {
       setSelectedId(null);
       setEditingId(null);
       setSelectedEdgeId(null);
       setEditingEdgeId(null);
     }, [currentCanvasRef]);
-    const containerRef = (0, import_react20.useRef)(null);
-    const [containerSize, setContainerSize] = (0, import_react20.useState)({ width: 0, height: 0 });
-    (0, import_react20.useEffect)(() => {
+    const onSelectionChangeRef = (0, import_react21.useRef)(onSelectionChange);
+    (0, import_react21.useEffect)(() => {
+      onSelectionChangeRef.current = onSelectionChange;
+    }, [onSelectionChange]);
+    const lastEmittedSelectionRef = (0, import_react21.useRef)({ kind: null, id: null, canvasRef: void 0 });
+    (0, import_react21.useEffect)(() => {
+      const cb = onSelectionChangeRef.current;
+      let next = null;
+      if (selectedId) {
+        const node = nodeMap.get(selectedId);
+        if (node)
+          next = { kind: "node", node, canvasRef: currentCanvasRef };
+      }
+      if (!next && selectedEdgeId) {
+        const edge = edges.find((e) => e.id === selectedEdgeId);
+        if (edge)
+          next = { kind: "edge", edge, canvasRef: currentCanvasRef };
+      }
+      const last = lastEmittedSelectionRef.current;
+      const nextKind = next?.kind ?? null;
+      const nextId = next ? next.kind === "node" ? next.node.id : next.edge.id : null;
+      const nextRef = next?.canvasRef;
+      if (last.kind === nextKind && last.id === nextId && last.canvasRef === nextRef) {
+        return;
+      }
+      lastEmittedSelectionRef.current = {
+        kind: nextKind,
+        id: nextId,
+        canvasRef: nextRef
+      };
+      cb?.(next);
+    }, [selectedId, selectedEdgeId, currentCanvasRef, nodeMap, edges]);
+    const containerRef = (0, import_react21.useRef)(null);
+    const [containerSize, setContainerSize] = (0, import_react21.useState)({ width: 0, height: 0 });
+    (0, import_react21.useEffect)(() => {
       const el = containerRef.current;
       if (!el)
         return;
@@ -19849,42 +20437,67 @@ 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_react20.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
-    const commitDrag = (0, import_react20.useCallback)((id2, patch) => {
+    const getViewportState = (0, import_react21.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
+    const applyLaneSnap = (0, import_react21.useCallback)((id2, patch) => {
+      if (!snapToLanes)
+        return patch;
+      const cols = currentCanvas.columns;
+      const rows = currentCanvas.rows;
+      const node = nodesRef.current.find((n) => n.id === id2);
       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) {
-          const snapped = snapToLane(nx, cols, {
-            edge: "center",
-            size: node?.width ?? 0
-          });
-          final = { ...final, x: Math.round(snapped) };
-        }
-        if (rows && rows.length > 0 && ny != null) {
-          const snapped = snapToLane(ny, rows, {
-            edge: "center",
-            size: node?.height ?? 0
-          });
-          final = { ...final, y: Math.round(snapped) };
-        }
+      const nx = patch.x;
+      const ny = patch.y;
+      if (cols && cols.length > 0 && nx != null) {
+        const snapped = snapToLane(nx, cols, {
+          edge: "center",
+          size: node?.width ?? 0
+        });
+        final = { ...final, x: Math.round(snapped) };
+      }
+      if (rows && rows.length > 0 && ny != null) {
+        const snapped = snapToLane(ny, rows, {
+          edge: "center",
+          size: node?.height ?? 0
+        });
+        final = { ...final, y: Math.round(snapped) };
+      }
+      return final;
+    }, [snapToLanes, currentCanvas.columns, currentCanvas.rows]);
+    const commitResize = (0, import_react21.useCallback)((id2, patch) => {
+      onNodeUpdate?.(id2, applyLaneSnap(id2, patch), currentCanvasRef);
+    }, [onNodeUpdate, currentCanvasRef, applyLaneSnap]);
+    const commitDragBatch = (0, import_react21.useCallback)((updates) => {
+      const final = updates.map((u) => ({
+        id: u.id,
+        patch: applyLaneSnap(u.id, u.patch)
+      }));
+      if (onNodesUpdate) {
+        onNodesUpdate(final, currentCanvasRef);
+        return;
       }
-      onNodeUpdate?.(id2, final, currentCanvasRef);
-    }, [onNodeUpdate, currentCanvasRef, snapToLanes, currentCanvas.columns, currentCanvas.rows]);
-    const { dragOverrides, onPointerDown: onNodePointerDown } = useNodeDrag({
+      if (!onNodeUpdate)
+        return;
+      for (const { id: id2, patch } of final) {
+        onNodeUpdate(id2, patch, currentCanvasRef);
+      }
+    }, [onNodeUpdate, onNodesUpdate, currentCanvasRef, applyLaneSnap]);
+    const svgProxyRef = (0, import_react21.useRef)(null);
+    const handleNodeDrop = (0, import_react21.useCallback)((sources, target) => {
+      onNodeDrop?.(sources, target, { canvasRef: currentCanvasRef });
+    }, [onNodeDrop, currentCanvasRef]);
+    const { dragOverrides, dropTargetId, onPointerDown: onNodePointerDown } = useNodeDrag({
       viewport: viewportStateRef,
       nodesRef,
-      onCommit: commitDrag
+      onCommit: commitDragBatch,
+      svgRef: svgProxyRef,
+      canDropNodeOn,
+      onNodeDrop: handleNodeDrop
     });
     const { resizeOverrides, onHandlePointerDown: onResizeHandlePointerDown } = useNodeResize({
       viewport: viewportStateRef,
-      onCommit: commitDrag
+      onCommit: commitResize
     });
-    const selectedResolvedNode = (0, import_react20.useMemo)(() => {
+    const selectedResolvedNode = (0, import_react21.useMemo)(() => {
       if (!selectedId)
         return null;
       const base = nodeMap.get(selectedId);
@@ -19900,9 +20513,8 @@ var SystemCanvas = (() => {
       }
       return base;
     }, [selectedId, nodeMap, dragOverrides, resizeOverrides]);
-    const svgProxyRef = (0, import_react20.useRef)(null);
     svgProxyRef.current = viewportHandleRef.current?.getSvgElement() ?? null;
-    const handleEdgeCreated = (0, import_react20.useCallback)((edge) => {
+    const handleEdgeCreated = (0, import_react21.useCallback)((edge) => {
       onEdgeAdd?.(edge, currentCanvasRef);
     }, [onEdgeAdd, currentCanvasRef]);
     const { pending: pendingEdge, onHandlePointerDown: onConnectionHandlePointerDown } = useEdgeCreate({
@@ -19911,7 +20523,7 @@ var SystemCanvas = (() => {
       nodesRef,
       onCreate: handleEdgeCreated
     });
-    const handleNavigableNodeClick = (0, import_react20.useCallback)((node) => {
+    const handleNavigableNodeClick = (0, import_react21.useCallback)((node) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -19938,7 +20550,7 @@ var SystemCanvas = (() => {
         navigateToRef(node);
       }
     }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled]);
-    const handleZoomEnter = (0, import_react20.useCallback)((node, targetTransform) => {
+    const handleZoomEnter = (0, import_react21.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -19952,7 +20564,7 @@ var SystemCanvas = (() => {
       setPendingHandoff(targetTransform);
       navigateToRef(node);
     }, [currentCanvasRef, navigateToRef]);
-    const handleZoomExit = (0, import_react20.useCallback)((targetTransform) => {
+    const handleZoomExit = (0, import_react21.useCallback)((targetTransform) => {
       setPendingHandoff(targetTransform);
       suppressNextHandoffClearRef.current = true;
       navigateToBreadcrumb(breadcrumbs.length - 2);
@@ -19975,30 +20587,58 @@ var SystemCanvas = (() => {
         const rect = svg.getBoundingClientRect();
         return { width: rect.width, height: rect.height };
       },
+      getCursorScreenPos: () => viewportHandleRef.current?.getCursorScreenPos() ?? null,
       onEnter: handleZoomEnter,
       onExit: handleZoomExit
     });
-    const handleViewportChange = (0, import_react20.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react21.useCallback)((vp) => {
       viewportStateRef.current = vp;
       handleZoomNavViewportChange(vp);
       onViewportChange?.(vp);
     }, [handleZoomNavViewportChange, onViewportChange]);
-    const handleHandoffApplied = (0, import_react20.useCallback)(() => {
+    const handleHandoffApplied = (0, import_react21.useCallback)(() => {
       setPendingHandoff(null);
       clearZoomNavCommitting();
     }, [clearZoomNavCommitting]);
-    const handleBeginEdit = (0, import_react20.useCallback)((node) => {
+    const handleBeginEdit = (0, import_react21.useCallback)((node) => {
       setEditingId(node.id);
     }, []);
-    const handleBeginEditEdge = (0, import_react20.useCallback)((edge) => {
+    const handleBeginEditEdge = (0, import_react21.useCallback)((edge) => {
       setEditingEdgeId(edge.id);
     }, []);
+    const [contextMenuState, setContextMenuState] = (0, import_react21.useState)(null);
+    (0, import_react21.useEffect)(() => {
+      setContextMenuState(null);
+    }, [currentCanvasRef]);
+    const handleContextMenu = (0, import_react21.useCallback)((event) => {
+      onContextMenu?.(event);
+      if (!nodeContextMenu)
+        return;
+      if (event.type !== "node")
+        return;
+      const node = event.target;
+      if (!node)
+        return;
+      const matched = filterContextMenuItems(nodeContextMenu.items, node, {
+        canvasRef: currentCanvasRef ?? null
+      });
+      if (matched.length === 0) {
+        setContextMenuState(null);
+        return;
+      }
+      setContextMenuState({
+        items: matched,
+        node,
+        screenPosition: event.screenPosition,
+        canvasRef: currentCanvasRef ?? null
+      });
+    }, [onContextMenu, nodeContextMenu, currentCanvasRef]);
     const { handleNodeClick, handleNodeDoubleClick, handleNodeNavigate, handleEdgeClick, handleEdgeDoubleClick, handleCanvasClick, handleCanvasContextMenu, handleNodeContextMenu, handleEdgeContextMenu } = useCanvasInteraction({
       onNodeClick,
       onNodeDoubleClick,
       onEdgeClick,
       onEdgeDoubleClick,
-      onContextMenu,
+      onContextMenu: handleContextMenu,
       onNavigableNodeClick: handleNavigableNodeClick,
       viewport: viewportStateRef,
       editable,
@@ -20007,27 +20647,27 @@ var SystemCanvas = (() => {
       onSelectEdge: setSelectedEdgeId,
       onBeginEditEdge: handleBeginEditEdge
     });
-    const handleEditorCommit = (0, import_react20.useCallback)((patch) => {
+    const handleEditorCommit = (0, import_react21.useCallback)((patch) => {
       if (editingId) {
         onNodeUpdate?.(editingId, patch, currentCanvasRef);
       }
       setEditingId(null);
     }, [editingId, onNodeUpdate, currentCanvasRef]);
-    const handleEditorCancel = (0, import_react20.useCallback)(() => {
+    const handleEditorCancel = (0, import_react21.useCallback)(() => {
       setEditingId(null);
     }, []);
-    const handleEdgeEditorCommit = (0, import_react20.useCallback)((patch) => {
+    const handleEdgeEditorCommit = (0, import_react21.useCallback)((patch) => {
       if (editingEdgeId) {
         onEdgeUpdate?.(editingEdgeId, patch, currentCanvasRef);
       }
       setEditingEdgeId(null);
     }, [editingEdgeId, onEdgeUpdate, currentCanvasRef]);
-    const handleEdgeEditorCancel = (0, import_react20.useCallback)(() => {
+    const handleEdgeEditorCancel = (0, import_react21.useCallback)(() => {
       setEditingEdgeId(null);
     }, []);
-    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) => {
+    const lastAddRef = (0, import_react21.useRef)(null);
+    const menuOptions = (0, import_react21.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
+    const addNode2 = (0, import_react21.useCallback)((option, position) => {
       let x, y;
       if (position) {
         x = position.x;
@@ -20059,7 +20699,7 @@ var SystemCanvas = (() => {
       const node = createNodeFromOption(option, Math.round(x), Math.round(y), void 0, theme);
       onNodeAdd?.(node, currentCanvasRef);
     }, [onNodeAdd, currentCanvasRef, theme]);
-    const handleKeyDown = (0, import_react20.useCallback)((e) => {
+    const handleKeyDown = (0, import_react21.useCallback)((e) => {
       if (!editable)
         return;
       if (e.key === "Escape") {
@@ -20093,14 +20733,14 @@ var SystemCanvas = (() => {
       currentCanvasRef
     ]);
     const renderProps = { options: menuOptions, addNode: addNode2, theme };
-    return (0, import_jsx_runtime27.jsxs)("div", { ref: containerRef, className: `system-canvas ${className ?? ""}`, tabIndex: editable ? 0 : -1, onKeyDown: handleKeyDown, style: {
+    return (0, import_jsx_runtime28.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_runtime27.jsx)(Breadcrumbs, { breadcrumbs, theme: theme.breadcrumbs, onNavigate: navigateToBreadcrumb }), isLoading && (0, import_jsx_runtime27.jsx)("div", { className: "system-canvas-loading", style: {
+    }, children: [(0, import_jsx_runtime28.jsx)(Breadcrumbs, { breadcrumbs, theme: theme.breadcrumbs, onNavigate: navigateToBreadcrumb }), isLoading && (0, import_jsx_runtime28.jsx)("div", { className: "system-canvas-loading", style: {
       position: "absolute",
       top: 12,
       right: 12,
@@ -20112,12 +20752,12 @@ var SystemCanvas = (() => {
       fontFamily: theme.node.fontFamily,
       fontSize: 12,
       backdropFilter: "blur(8px)"
-    }, 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) => {
+    }, children: "Loading..." }), (0, import_jsx_runtime28.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, dropTargetId, 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_runtime28.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_runtime28.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_runtime27.jsx)(AddNodeButton, { ...renderProps }))] });
+    }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height, render: renderNodeToolbar }), editable && (renderAddNodeButton ? renderAddNodeButton(renderProps) : (0, import_jsx_runtime28.jsx)(AddNodeButton, { ...renderProps })), nodeContextMenu && (0, import_jsx_runtime28.jsx)(NodeContextMenuOverlay, { state: contextMenuState, config: nodeContextMenu, theme, onClose: () => setContextMenuState(null) })] });
   });
 
   // src/index.tsx
@@ -20228,7 +20868,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react21.default.createElement(SystemCanvas, props));
+      root2.render(import_react22.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {