system-canvas-standalone 0.2.5 → 0.2.7

package/dist/system-canvas.js

@@ -12759,12 +12759,12 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react26 = __toESM(require_react(), 1);
+  var import_react27 = __toESM(require_react(), 1);
   var import_client = __toESM(require_client(), 1);
 
   // ../react/dist/components/SystemCanvas.js
-  var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
-  var import_react25 = __toESM(require_react(), 1);
+  var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
+  var import_react26 = __toESM(require_react(), 1);
 
   // ../core/dist/themes/dark.js
   var darkTheme = {
@@ -14565,6 +14565,136 @@ var SystemCanvas = (() => {
     return { ...canvas, edges };
   }
 
+  // ../core/dist/grid.js
+  function snapToGrid(value, size) {
+    if (size <= 0)
+      return value;
+    return Math.round(value / size) * size;
+  }
+
+  // ../core/dist/alignment.js
+  function getAnchors(n) {
+    return [
+      { axis: "x", value: n.x, kind: "edge", perpStart: n.y, perpEnd: n.y + n.height },
+      { axis: "x", value: n.x + n.width / 2, kind: "center", perpStart: n.y, perpEnd: n.y + n.height },
+      { axis: "x", value: n.x + n.width, kind: "edge", perpStart: n.y, perpEnd: n.y + n.height },
+      { axis: "y", value: n.y, kind: "edge", perpStart: n.x, perpEnd: n.x + n.width },
+      { axis: "y", value: n.y + n.height / 2, kind: "center", perpStart: n.x, perpEnd: n.x + n.width },
+      { axis: "y", value: n.y + n.height, kind: "edge", perpStart: n.x, perpEnd: n.x + n.width }
+    ];
+  }
+  function computeAlignmentGuides(dragging, others, threshold) {
+    if (dragging.length === 0 || others.length === 0)
+      return [];
+    const map = /* @__PURE__ */ new Map();
+    for (const d of dragging) {
+      const dAnchors = getAnchors(d);
+      for (const o of others) {
+        const oAnchors = getAnchors(o);
+        for (const da of dAnchors) {
+          for (const oa of oAnchors) {
+            if (da.axis !== oa.axis || da.kind !== oa.kind)
+              continue;
+            if (Math.abs(da.value - oa.value) > threshold)
+              continue;
+            const position = oa.value;
+            const spanStart = Math.min(da.perpStart, oa.perpStart);
+            const spanEnd = Math.max(da.perpEnd, oa.perpEnd);
+            const key = `${da.axis}:${position}`;
+            const existing = map.get(key);
+            if (!existing || spanEnd - spanStart > existing.span.end - existing.span.start) {
+              map.set(key, { axis: da.axis, position, span: { start: spanStart, end: spanEnd }, kind: da.kind });
+            }
+          }
+        }
+      }
+    }
+    return Array.from(map.values());
+  }
+  function alignNodes(nodes, direction) {
+    if (nodes.length === 0)
+      return [];
+    let ref;
+    switch (direction) {
+      case "left":
+        ref = Math.min(...nodes.map((n) => n.x));
+        break;
+      case "right":
+        ref = Math.max(...nodes.map((n) => n.x + n.width));
+        break;
+      case "top":
+        ref = Math.min(...nodes.map((n) => n.y));
+        break;
+      case "bottom":
+        ref = Math.max(...nodes.map((n) => n.y + n.height));
+        break;
+      case "centerH":
+        ref = nodes.reduce((s, n) => s + (n.x + n.width / 2), 0) / nodes.length;
+        break;
+      case "centerV":
+        ref = nodes.reduce((s, n) => s + (n.y + n.height / 2), 0) / nodes.length;
+        break;
+    }
+    const result = [];
+    for (const n of nodes) {
+      let newX;
+      let newY;
+      switch (direction) {
+        case "left":
+          newX = ref;
+          break;
+        case "right":
+          newX = ref - n.width;
+          break;
+        case "top":
+          newY = ref;
+          break;
+        case "bottom":
+          newY = ref - n.height;
+          break;
+        case "centerH":
+          newX = ref - n.width / 2;
+          break;
+        case "centerV":
+          newY = ref - n.height / 2;
+          break;
+      }
+      const patch = {};
+      if (newX !== void 0 && newX !== n.x)
+        patch.x = newX;
+      if (newY !== void 0 && newY !== n.y)
+        patch.y = newY;
+      if (Object.keys(patch).length > 0)
+        result.push({ id: n.id, patch });
+    }
+    return result;
+  }
+  function distributeNodes(nodes, axis) {
+    if (nodes.length < 3)
+      return [];
+    const isH = axis === "horizontal";
+    const sorted = [...nodes].sort((a, b) => isH ? a.x - b.x : a.y - b.y);
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+    const outerStart = isH ? first.x : first.y;
+    const outerEnd = isH ? last.x + last.width : last.y + last.height;
+    const sumInnerSizes = sorted.slice(1, -1).reduce((s, n) => s + (isH ? n.width : n.height), 0);
+    const totalOuterSize = isH ? first.width + last.width : first.height + last.height;
+    const spacing = (outerEnd - outerStart - totalOuterSize - sumInnerSizes) / (sorted.length - 1);
+    const result = [];
+    let cursor = outerStart + (isH ? first.width : first.height) + spacing;
+    for (let i = 1; i < sorted.length - 1; i++) {
+      const n = sorted[i];
+      const newVal = cursor;
+      const oldVal = isH ? n.x : n.y;
+      if (newVal !== oldVal) {
+        result.push({ id: n.id, patch: isH ? { x: newVal } : { y: newVal } });
+      }
+      cursor += (isH ? n.width : n.height) + spacing;
+    }
+    return result;
+  }
+
   // ../core/dist/index.js
   var themes = {
     dark: darkTheme,
@@ -14973,7 +15103,7 @@ var SystemCanvas = (() => {
   var import_react4 = __toESM(require_react(), 1);
   var DRAG_THRESHOLD = 3;
   function useNodeDrag(options) {
-    const { viewport, nodesRef, onCommit, svgRef, canDropNodeOn, onNodeDrop, selectedIdsRef } = options;
+    const { viewport, nodesRef, onCommit, svgRef, canDropNodeOn, onNodeDrop, selectedIdsRef, snapGridSize = 0 } = options;
     const [dragOverrides, setDragOverrides] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
     const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
     const [dropTargetId, setDropTargetId] = (0, import_react4.useState)(null);
@@ -15030,7 +15160,9 @@ var SystemCanvas = (() => {
       const dy = dyScreen / zoom;
       const next = /* @__PURE__ */ new Map();
       for (const [id2, start2] of st.moving) {
-        next.set(id2, { x: start2.startX + dx, y: start2.startY + dy });
+        const sx = snapGridSize > 0 ? snapToGrid(start2.startX + dx, snapGridSize) : start2.startX + dx;
+        const sy = snapGridSize > 0 ? snapToGrid(start2.startY + dy, snapGridSize) : start2.startY + dy;
+        next.set(id2, { x: sx, y: sy });
       }
       setDragOverrides(next);
       const nextTarget = computeDropTarget(event.clientX, event.clientY);
@@ -15157,7 +15289,7 @@ var SystemCanvas = (() => {
   var import_react5 = __toESM(require_react(), 1);
   var DEFAULT_MIN_SIZE = 40;
   function useNodeResize(options) {
-    const { viewport, onCommit, minSize = DEFAULT_MIN_SIZE } = options;
+    const { viewport, onCommit, minSize = DEFAULT_MIN_SIZE, snapGridSize = 0 } = options;
     const [resizeOverrides, setResizeOverrides] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
     const [isResizing, setIsResizing] = (0, import_react5.useState)(false);
     const stateRef = (0, import_react5.useRef)(null);
@@ -15205,6 +15337,14 @@ var SystemCanvas = (() => {
         }
         nh = minSize;
       }
+      if (snapGridSize > 0) {
+        nw = Math.max(minSize, snapToGrid(nw, snapGridSize));
+        nh = Math.max(minSize, snapToGrid(nh, snapGridSize));
+        if (st.corner === "sw" || st.corner === "nw")
+          nx = st.startX + st.startW - nw;
+        if (st.corner === "ne" || st.corner === "nw")
+          ny = st.startY + st.startH - nh;
+      }
       const next = new Map(overridesRef.current);
       next.set(st.nodeId, { x: nx, y: ny, width: nw, height: nh });
       setResizeOverrides(next);
@@ -16196,7 +16336,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/Viewport.js
-  var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
   var import_react19 = __toESM(require_react(), 1);
 
   // ../react/dist/hooks/useViewport.js
@@ -20276,10 +20416,18 @@ var SystemCanvas = (() => {
     })] });
   }
 
+  // ../react/dist/components/AlignmentGuidesLayer.js
+  var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
+  function AlignmentGuidesLayer({ guides }) {
+    if (guides.length === 0)
+      return null;
+    return (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: guides.map((g, i) => (0, import_jsx_runtime22.jsx)("line", { x1: g.axis === "x" ? g.position : g.span.start, y1: g.axis === "y" ? g.position : g.span.start, x2: g.axis === "x" ? g.position : g.span.end, y2: g.axis === "y" ? g.position : g.span.end, stroke: "#38BDF8", strokeWidth: 1, strokeDasharray: "4 3", pointerEvents: "none" }, i)) });
+  }
+
   // ../react/dist/components/Viewport.js
   var HOVER_PADDING = 10;
   var EDGE_PROXIMITY = 16;
-  var Viewport = (0, import_react19.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, selectedIds, editingId, selectedEdgeId, editingEdgeId, dragOverrides, dropTargetId, marqueeRect, marqueeActiveRef, resizeOverrides, onResizeHandlePointerDown, onEditorCommit, onEditorCancel, onEdgeEditorCommit, onEdgeEditorCancel, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
+  var Viewport = (0, import_react19.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, selectedIds, editingId, selectedEdgeId, editingEdgeId, dragOverrides, dropTargetId, marqueeRect, marqueeActiveRef, resizeOverrides, onResizeHandlePointerDown, onEditorCommit, onEditorCancel, onEdgeEditorCommit, onEdgeEditorCancel, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, alignmentGuides, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
     const { svgRef, groupRef, viewport, fitToContent, zoomToNode, setTransform } = useViewport({
       minZoom,
       maxZoom,
@@ -20487,7 +20635,7 @@ var SystemCanvas = (() => {
         return null;
       return computeEdgeMidpoint(editingEdge, from, to);
     })();
-    return (0, import_jsx_runtime22.jsxs)("svg", { ref: svgRef, className: "system-canvas-viewport", style: {
+    return (0, import_jsx_runtime23.jsxs)("svg", { ref: svgRef, className: "system-canvas-viewport", style: {
       width: "100%",
       height: "100%",
       display: "block",
@@ -20496,21 +20644,21 @@ 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, selectedIds, 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, selectedIds, 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" }), selectedIds && selectedIds.size > 0 && Array.from(selectedIds).map((id2) => {
+    }, onClick: onCanvasClick, onContextMenu: onCanvasContextMenu, onPointerMove: handleSvgPointerMove, onPointerLeave: handleSvgPointerLeave, children: [(0, import_jsx_runtime23.jsx)("defs", { children: (0, import_jsx_runtime23.jsx)("pattern", { id: "system-canvas-grid", width: theme.grid.size, height: theme.grid.size, patternUnits: "userSpaceOnUse", children: (0, import_jsx_runtime23.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_runtime23.jsx)("rect", { x: "-50000", y: "-50000", width: "100000", height: "100000", fill: "url(#system-canvas-grid)" }), (0, import_jsx_runtime23.jsxs)("g", { ref: groupRef, children: [(0, import_jsx_runtime23.jsx)(LanesBackground, { columns, rows, theme }), (0, import_jsx_runtime23.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedIds, editingId, canvases, only: "groups" }), (0, import_jsx_runtime23.jsx)(EdgeRenderer, { edges, nodeMap: renderNodeMap, theme, defaultEdgeStyle: edgeStyle, onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, selectedId: selectedEdgeId, editingId: editingEdgeId }), (0, import_jsx_runtime23.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedIds, editingId, onResizeHandlePointerDown, canvases, only: "non-groups" }), pendingTargetNode && (0, import_jsx_runtime23.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_runtime23.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" }), selectedIds && selectedIds.size > 0 && Array.from(selectedIds).map((id2) => {
       const node = renderNodeMap.get(id2);
       if (!node)
         return null;
-      return (0, import_jsx_runtime22.jsx)("rect", { x: node.x - 3, y: node.y - 3, width: node.width + 6, height: node.height + 6, rx: (node.resolvedCornerRadius ?? 0) + 3, fill: "none", stroke: theme.node.labelColor, strokeWidth: 1.5, opacity: 0.7, pointerEvents: "none" }, `halo-${id2}`);
-    }), 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 })] }), marqueeRect && (0, import_jsx_runtime22.jsx)("rect", { x: Math.min(marqueeRect.x1, marqueeRect.x2), y: Math.min(marqueeRect.y1, marqueeRect.y2), width: Math.abs(marqueeRect.x2 - marqueeRect.x1), height: Math.abs(marqueeRect.y2 - marqueeRect.y1), fill: theme.node.labelColor + "18", stroke: theme.node.labelColor, strokeWidth: 1, opacity: 0.9, pointerEvents: "none" })] });
+      return (0, import_jsx_runtime23.jsx)("rect", { x: node.x - 3, y: node.y - 3, width: node.width + 6, height: node.height + 6, rx: (node.resolvedCornerRadius ?? 0) + 3, fill: "none", stroke: theme.node.labelColor, strokeWidth: 1.5, opacity: 0.7, pointerEvents: "none" }, `halo-${id2}`);
+    }), pendingEdge && pendingSourceNode && (0, import_jsx_runtime23.jsx)(PendingEdgeRenderer, { sourceNode: pendingSourceNode, sourceSide: pendingEdge.sourceSide, cursor: pendingEdge.cursor, targetNode: pendingTargetNode, theme, defaultEdgeStyle: edgeStyle }), handlesNode && onConnectionHandlePointerDown && (0, import_jsx_runtime23.jsx)(ConnectionHandles, { node: handlesNode, theme, onHandlePointerDown: onConnectionHandlePointerDown, immediate: !!pendingEdge, activeSide: hoveredSide }), alignmentGuides && alignmentGuides.length > 0 && (0, import_jsx_runtime23.jsx)(AlignmentGuidesLayer, { guides: alignmentGuides }), editingNode && onEditorCommit && onEditorCancel && (0, import_jsx_runtime23.jsx)(NodeEditor, { node: editingNode, theme, onCommit: onEditorCommit, onCancel: onEditorCancel }), editingEdge && editingEdgeMidpoint && onEdgeEditorCommit && onEdgeEditorCancel && (0, import_jsx_runtime23.jsx)(EdgeLabelEditor, { initialLabel: editingEdge.label ?? "", midpoint: editingEdgeMidpoint, theme, onCommit: onEdgeEditorCommit, onCancel: onEdgeEditorCancel })] }), marqueeRect && (0, import_jsx_runtime23.jsx)("rect", { x: Math.min(marqueeRect.x1, marqueeRect.x2), y: Math.min(marqueeRect.y1, marqueeRect.y2), width: Math.abs(marqueeRect.x2 - marqueeRect.x1), height: Math.abs(marqueeRect.y2 - marqueeRect.y1), fill: theme.node.labelColor + "18", stroke: theme.node.labelColor, strokeWidth: 1, opacity: 0.9, pointerEvents: "none" })] });
   });
 
   // ../react/dist/components/Breadcrumbs.js
-  var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
   var import_react20 = __toESM(require_react(), 1);
   function Breadcrumbs({ breadcrumbs, theme, onNavigate }) {
     if (breadcrumbs.length <= 1)
       return null;
-    return (0, import_jsx_runtime23.jsx)("div", { className: "system-canvas-breadcrumbs", style: {
+    return (0, import_jsx_runtime24.jsx)("div", { className: "system-canvas-breadcrumbs", style: {
       position: "absolute",
       top: 12,
       left: 12,
@@ -20527,10 +20675,10 @@ var SystemCanvas = (() => {
       backdropFilter: "blur(8px)"
     }, children: breadcrumbs.map((crumb, index) => {
       const isLast = index === breadcrumbs.length - 1;
-      return (0, import_jsx_runtime23.jsxs)(import_react20.default.Fragment, { children: [index > 0 && (0, import_jsx_runtime23.jsx)("span", { style: {
+      return (0, import_jsx_runtime24.jsxs)(import_react20.default.Fragment, { children: [index > 0 && (0, import_jsx_runtime24.jsx)("span", { style: {
         color: theme.separatorColor,
         margin: "0 2px"
-      }, children: "/" }), (0, import_jsx_runtime23.jsx)("span", { onClick: isLast ? void 0 : () => onNavigate(index), style: {
+      }, children: "/" }), (0, import_jsx_runtime24.jsx)("span", { onClick: isLast ? void 0 : () => onNavigate(index), style: {
         color: isLast ? theme.activeColor : theme.textColor,
         cursor: isLast ? "default" : "pointer",
         fontWeight: isLast ? 600 : 400,
@@ -20550,7 +20698,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/AddNodeButton.js
-  var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
   var import_react21 = __toESM(require_react(), 1);
   function AddNodeButton({ options, addNode: addNode2, theme }) {
     const [open, setOpen] = (0, import_react21.useState)(false);
@@ -20578,7 +20726,7 @@ var SystemCanvas = (() => {
     }, [open]);
     const categoryOptions = options.filter((o) => o.kind === "category");
     const typeOptions = options.filter((o) => o.kind === "type");
-    return (0, import_jsx_runtime24.jsxs)("div", { ref: rootRef, className: "system-canvas-add-node", style: {
+    return (0, import_jsx_runtime25.jsxs)("div", { ref: rootRef, className: "system-canvas-add-node", style: {
       position: "absolute",
       bottom: 16,
       right: 16,
@@ -20586,7 +20734,7 @@ var SystemCanvas = (() => {
       fontFamily: theme.breadcrumbs.fontFamily,
       fontSize: theme.breadcrumbs.fontSize,
       userSelect: "none"
-    }, children: [open && (0, import_jsx_runtime24.jsxs)("div", { style: {
+    }, children: [open && (0, import_jsx_runtime25.jsxs)("div", { style: {
       position: "absolute",
       bottom: 52,
       right: 0,
@@ -20599,13 +20747,13 @@ var SystemCanvas = (() => {
       borderRadius: 10,
       boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
       backdropFilter: "blur(10px)"
-    }, children: [categoryOptions.length > 0 && (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [(0, import_jsx_runtime24.jsx)(SectionLabel, { theme, children: "Categories" }), categoryOptions.map((opt) => (0, import_jsx_runtime24.jsx)(MenuRow, { theme, option: opt, onClick: () => {
+    }, children: [categoryOptions.length > 0 && (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [(0, import_jsx_runtime25.jsx)(SectionLabel, { theme, children: "Categories" }), categoryOptions.map((opt) => (0, import_jsx_runtime25.jsx)(MenuRow, { theme, option: opt, onClick: () => {
       addNode2(opt);
       setOpen(false);
-    } }, `cat-${opt.value}`)), (0, import_jsx_runtime24.jsx)(Divider, { theme })] }), (0, import_jsx_runtime24.jsx)(SectionLabel, { theme, children: "Basic" }), typeOptions.map((opt) => (0, import_jsx_runtime24.jsx)(MenuRow, { theme, option: opt, onClick: () => {
+    } }, `cat-${opt.value}`)), (0, import_jsx_runtime25.jsx)(Divider, { theme })] }), (0, import_jsx_runtime25.jsx)(SectionLabel, { theme, children: "Basic" }), typeOptions.map((opt) => (0, import_jsx_runtime25.jsx)(MenuRow, { theme, option: opt, onClick: () => {
       addNode2(opt);
       setOpen(false);
-    } }, `type-${opt.value}`))] }), (0, import_jsx_runtime24.jsx)("button", { type: "button", "aria-label": open ? "Close add node menu" : "Add node", onClick: () => setOpen((v) => !v), style: {
+    } }, `type-${opt.value}`))] }), (0, import_jsx_runtime25.jsx)("button", { type: "button", "aria-label": open ? "Close add node menu" : "Add node", onClick: () => setOpen((v) => !v), style: {
       width: 44,
       height: 44,
       borderRadius: 22,
@@ -20626,7 +20774,7 @@ var SystemCanvas = (() => {
     }, children: "+" })] });
   }
   function SectionLabel({ theme, children: children2 }) {
-    return (0, import_jsx_runtime24.jsx)("div", { style: {
+    return (0, import_jsx_runtime25.jsx)("div", { style: {
       padding: "4px 8px",
       fontSize: theme.breadcrumbs.fontSize - 2,
       color: theme.breadcrumbs.textColor,
@@ -20636,7 +20784,7 @@ var SystemCanvas = (() => {
     }, children: children2 });
   }
   function Divider({ theme }) {
-    return (0, import_jsx_runtime24.jsx)("div", { style: {
+    return (0, import_jsx_runtime25.jsx)("div", { style: {
       height: 1,
       margin: "4px 0",
       background: theme.breadcrumbs.separatorColor,
@@ -20646,7 +20794,7 @@ var SystemCanvas = (() => {
   function MenuRow({ theme, option, onClick }) {
     const [hover, setHover] = (0, import_react21.useState)(false);
     const swatchSize = 18;
-    return (0, import_jsx_runtime24.jsxs)("div", { role: "button", onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
+    return (0, import_jsx_runtime25.jsxs)("div", { role: "button", onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
       display: "flex",
       alignItems: "center",
       gap: 8,
@@ -20655,7 +20803,7 @@ var SystemCanvas = (() => {
       cursor: "pointer",
       background: hover ? "rgba(255,255,255,0.06)" : "transparent",
       color: theme.breadcrumbs.activeColor
-    }, children: [option.kind === "category" ? (0, import_jsx_runtime24.jsx)("span", { style: {
+    }, children: [option.kind === "category" ? (0, import_jsx_runtime25.jsx)("span", { style: {
       width: swatchSize,
       height: swatchSize,
       borderRadius: 4,
@@ -20665,13 +20813,13 @@ var SystemCanvas = (() => {
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0
-    }, children: option.icon && (0, import_jsx_runtime24.jsx)("svg", { width: 12, height: 12, viewBox: "0 0 14 14", style: { overflow: "visible" }, children: (0, import_jsx_runtime24.jsx)("g", { transform: "translate(-1, -1)", children: (0, import_jsx_runtime24.jsx)(NodeIcon, { icon: option.icon, x: 0, y: 0, size: 14, color: option.stroke ?? theme.breadcrumbs.activeColor, opacity: 0.9, customIcons: theme.icons }) }) }) }) : (0, import_jsx_runtime24.jsx)("span", { style: {
+    }, children: option.icon && (0, import_jsx_runtime25.jsx)("svg", { width: 12, height: 12, viewBox: "0 0 14 14", style: { overflow: "visible" }, children: (0, import_jsx_runtime25.jsx)("g", { transform: "translate(-1, -1)", children: (0, import_jsx_runtime25.jsx)(NodeIcon, { icon: option.icon, x: 0, y: 0, size: 14, color: option.stroke ?? theme.breadcrumbs.activeColor, opacity: 0.9, customIcons: theme.icons }) }) }) }) : (0, import_jsx_runtime25.jsx)("span", { style: {
       width: swatchSize,
       height: swatchSize,
       borderRadius: 4,
       border: `1px dashed ${theme.breadcrumbs.separatorColor}`,
       flexShrink: 0
-    } }), (0, import_jsx_runtime24.jsx)("span", { style: { textTransform: "capitalize" }, children: option.label }), (0, import_jsx_runtime24.jsx)("span", { style: {
+    } }), (0, import_jsx_runtime25.jsx)("span", { style: { textTransform: "capitalize" }, children: option.label }), (0, import_jsx_runtime25.jsx)("span", { style: {
       marginLeft: "auto",
       fontSize: theme.breadcrumbs.fontSize - 2,
       opacity: 0.5
@@ -20679,7 +20827,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/LaneHeaders.js
-  var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
   var import_react22 = __toESM(require_react(), 1);
   function LaneHeaders({ columns, rows, theme, getViewport, width, height, pinned = true }) {
     const hasColumns = columns && columns.length > 0;
@@ -20712,14 +20860,14 @@ var SystemCanvas = (() => {
     const pad = lanesTheme.headerPadding;
     const colsOffsetLeft = hasRows && pinned ? headerSize : 0;
     const rowsOffsetTop = hasColumns && pinned ? headerSize : 0;
-    return (0, import_jsx_runtime25.jsxs)("svg", { className: "system-canvas-lane-headers", style: {
+    return (0, import_jsx_runtime26.jsxs)("svg", { className: "system-canvas-lane-headers", style: {
       position: "absolute",
       top: 0,
       left: 0,
       width,
       height,
       pointerEvents: "none"
-    }, children: [hasColumns && (0, import_jsx_runtime25.jsxs)("g", { children: [pinned && (0, import_jsx_runtime25.jsx)("rect", { x: colsOffsetLeft, y: 0, width: width - colsOffsetLeft, height: headerSize, fill: lanesTheme.headerBackground }), columns.map((col) => {
+    }, children: [hasColumns && (0, import_jsx_runtime26.jsxs)("g", { children: [pinned && (0, import_jsx_runtime26.jsx)("rect", { x: colsOffsetLeft, y: 0, width: width - colsOffsetLeft, height: headerSize, fill: lanesTheme.headerBackground }), columns.map((col) => {
       const startScreen = canvasToScreen(col.start, 0, viewport).x;
       const endScreen = canvasToScreen(col.start + col.size, 0, viewport).x;
       const w = endScreen - startScreen;
@@ -20730,8 +20878,8 @@ 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: 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) => {
+      return (0, import_jsx_runtime26.jsxs)("g", { children: [(0, import_jsx_runtime26.jsx)("line", { x1: startScreen, y1: pinned ? headerSize : y + headerSize, x2: startScreen, y2: pinned ? 0 : y, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth }), (0, import_jsx_runtime26.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_runtime26.jsx)("line", { x1: colsOffsetLeft, y1: headerSize, x2: width, y2: headerSize, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth })] }), hasRows && (0, import_jsx_runtime26.jsxs)("g", { children: [pinned && (0, import_jsx_runtime26.jsx)("rect", { x: 0, y: rowsOffsetTop, width: headerSize, height: height - rowsOffsetTop, fill: lanesTheme.headerBackground }), rows.map((row) => {
       const startScreen = canvasToScreen(0, row.start, viewport).y;
       const endScreen = canvasToScreen(0, row.start + row.size, viewport).y;
       const h = endScreen - startScreen;
@@ -20742,8 +20890,8 @@ 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: 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 })] });
+      return (0, import_jsx_runtime26.jsxs)("g", { children: [(0, import_jsx_runtime26.jsx)("line", { x1: pinned ? 0 : x, y1: startScreen, x2: pinned ? headerSize : x + headerSize, y2: startScreen, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth }), (0, import_jsx_runtime26.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_runtime26.jsx)("line", { x1: headerSize, y1: rowsOffsetTop, x2: headerSize, y2: height, stroke: lanesTheme.dividerColor, strokeWidth: lanesTheme.dividerWidth })] }), hasColumns && hasRows && pinned && (0, import_jsx_runtime26.jsx)("rect", { x: 0, y: 0, width: headerSize, height: headerSize, fill: lanesTheme.headerBackground })] });
   }
   function truncateToWidth2(label, availablePx, fontSize) {
     if (availablePx <= 0)
@@ -20758,7 +20906,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/NodeToolbar.js
-  var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
   var import_react23 = __toESM(require_react(), 1);
   var NODE_GAP = 10;
   var FLIP_MARGIN = 8;
@@ -20767,7 +20915,7 @@ var SystemCanvas = (() => {
   var SWATCH_SIZE = 16;
   var BUTTON_SIZE = 28;
   var DELETE_SIZE = 14;
-  function NodeToolbar({ node, theme, onPatch, onDelete, getViewport, containerWidth, containerHeight, render: render2, selectedNodes, onMultiPatch }) {
+  function NodeToolbar({ node, theme, onPatch, onDelete, getViewport, containerWidth, containerHeight, render: render2, selectedNodes, onMultiPatch, onAlign, onDistribute }) {
     const [viewport, setViewport] = (0, import_react23.useState)(() => getViewport());
     (0, import_react23.useEffect)(() => {
       let raf = 0;
@@ -20834,7 +20982,7 @@ var SystemCanvas = (() => {
     left = Math.max(FLIP_MARGIN, Math.min(left, containerWidth - size.width - FLIP_MARGIN));
     const patch = (update) => onPatch(update);
     const deleteNode = () => onDelete();
-    return (0, import_jsx_runtime26.jsx)("div", {
+    return (0, import_jsx_runtime27.jsx)("div", {
       ref: toolbarRef,
       className: "system-canvas-node-toolbar",
       // Stop pointer events from bubbling to the canvas (which would
@@ -20863,16 +21011,16 @@ var SystemCanvas = (() => {
         userSelect: "none",
         whiteSpace: "nowrap"
       },
-      children: isMulti && selectedNodes && onMultiPatch ? (0, import_jsx_runtime26.jsx)(MultiToolbarContent, { selectedNodes, theme, onMultiPatch, onDelete: deleteNode }) : render2 ? render2({ node, theme, patch, deleteNode }) : (0, import_jsx_runtime26.jsx)(DefaultToolbarContent, { node, theme, onPatch: patch, onDelete: deleteNode })
+      children: isMulti && selectedNodes && onMultiPatch ? (0, import_jsx_runtime27.jsx)(MultiToolbarContent, { selectedNodes, theme, onMultiPatch, onDelete: deleteNode, onAlign, onDistribute }) : render2 ? render2({ node, theme, patch, deleteNode }) : (0, import_jsx_runtime27.jsx)(DefaultToolbarContent, { node, theme, onPatch: patch, onDelete: deleteNode })
     });
   }
-  function MultiToolbarContent({ selectedNodes, theme, onMultiPatch, onDelete }) {
+  function MultiToolbarContent({ selectedNodes, theme, onMultiPatch, onDelete, onAlign, onDistribute }) {
     const representativeNode = selectedNodes[0];
     const groups = (0, import_react23.useMemo)(() => getNodeActionsForNode(representativeNode, theme), [representativeNode, theme]);
     const showDelete = theme.showToolbarDelete === true;
     const swatchGroups = groups.filter((g) => g.kind === "swatches" || g.kind == null);
     const otherGroups = groups.filter((g) => g.kind !== "swatches" && g.kind != null && g.kind !== "menu");
-    return (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsxs)("span", { style: {
+    return (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [(0, import_jsx_runtime27.jsxs)("span", { style: {
       fontSize: 11,
       color: theme.breadcrumbs.textColor,
       opacity: 0.75,
@@ -20882,35 +21030,75 @@ var SystemCanvas = (() => {
       const actions = filterActionsForNode(group, representativeNode);
       if (actions.length === 0)
         return null;
-      return (0, import_jsx_runtime26.jsxs)(import_react23.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
+      return (0, import_jsx_runtime27.jsxs)(import_react23.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime27.jsx)(Divider2, { theme }), (0, import_jsx_runtime27.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
         const active = action.isActive?.(representativeNode) ?? false;
         const handleClick = () => {
           const patch = resolveActionPatch(action, representativeNode);
           onMultiPatch(patch);
         };
-        return (0, import_jsx_runtime26.jsx)(SwatchButton, { action, active, theme, onClick: handleClick }, action.id);
+        return (0, import_jsx_runtime27.jsx)(SwatchButton, { action, active, theme, onClick: handleClick }, action.id);
       }) })] }, group.id);
     }), otherGroups.map((group) => {
       const actions = filterActionsForNode(group, representativeNode);
       if (actions.length === 0)
         return null;
-      return (0, import_jsx_runtime26.jsxs)(import_react23.default.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
+      return (0, import_jsx_runtime27.jsxs)(import_react23.default.Fragment, { children: [(0, import_jsx_runtime27.jsx)(Divider2, { theme }), (0, import_jsx_runtime27.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
         const active = action.isActive?.(representativeNode) ?? false;
         const handleClick = () => {
           const patch = resolveActionPatch(action, representativeNode);
           onMultiPatch(patch);
         };
-        return (0, import_jsx_runtime26.jsx)(IconButton, { action, active, theme, onClick: handleClick }, action.id);
+        return (0, import_jsx_runtime27.jsx)(IconButton, { action, active, theme, onClick: handleClick }, action.id);
       }) })] }, 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 })] })] });
+    }), onAlign && (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [(0, import_jsx_runtime27.jsx)(Divider2, { theme }), (0, import_jsx_runtime27.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: [
+      { dir: "left", label: "Align Left", path: "M 3 3 L 3 13 M 5 6 L 13 6 M 5 10 L 11 10" },
+      { dir: "right", label: "Align Right", path: "M 13 3 L 13 13 M 3 6 L 11 6 M 5 10 L 11 10" },
+      { dir: "top", label: "Align Top", path: "M 3 3 L 13 3 M 6 5 L 6 13 M 10 5 L 10 11" },
+      { dir: "bottom", label: "Align Bottom", path: "M 3 13 L 13 13 M 6 3 L 6 11 M 10 5 L 10 11" },
+      { dir: "centerH", label: "Center Horizontally", path: "M 8 3 L 8 13 M 5 6 L 11 6 M 4 10 L 12 10" },
+      { dir: "centerV", label: "Center Vertically", path: "M 3 8 L 13 8 M 6 5 L 6 11 M 10 4 L 10 12" }
+    ].map(({ dir, label, path }) => (0, import_jsx_runtime27.jsx)("button", { type: "button", title: label, onClick: () => onAlign(dir), onMouseDown: (e) => e.preventDefault(), style: {
+      width: BUTTON_SIZE,
+      height: BUTTON_SIZE,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "transparent",
+      border: `1px solid ${theme.breadcrumbs.separatorColor}`,
+      borderRadius: 6,
+      color: theme.breadcrumbs.textColor,
+      cursor: "pointer",
+      padding: 0,
+      outline: "none"
+    }, children: (0, import_jsx_runtime27.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: (0, import_jsx_runtime27.jsx)("path", { d: path, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) }, dir)) })] }), onDistribute && (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [(0, import_jsx_runtime27.jsx)(Divider2, { theme }), (0, import_jsx_runtime27.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: [
+      { axis: "horizontal", label: "Distribute Horizontally", path: "M 3 3 L 3 13 M 13 3 L 13 13 M 7 6 L 7 10 M 9 6 L 9 10" },
+      { axis: "vertical", label: "Distribute Vertically", path: "M 3 3 L 13 3 M 3 13 L 13 13 M 6 7 L 10 7 M 6 9 L 10 9" }
+    ].map(({ axis, label, path }) => {
+      const disabled = selectedNodes.length < 3;
+      return (0, import_jsx_runtime27.jsx)("button", { type: "button", title: label, disabled, onClick: () => !disabled && onDistribute(axis), onMouseDown: (e) => e.preventDefault(), style: {
+        width: BUTTON_SIZE,
+        height: BUTTON_SIZE,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "transparent",
+        border: `1px solid ${theme.breadcrumbs.separatorColor}`,
+        borderRadius: 6,
+        color: disabled ? theme.breadcrumbs.separatorColor : theme.breadcrumbs.textColor,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+        padding: 0,
+        outline: "none"
+      }, children: (0, import_jsx_runtime27.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: (0, import_jsx_runtime27.jsx)("path", { d: path, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) }, axis);
+    }) })] }), showDelete && (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [(0, import_jsx_runtime27.jsx)(Divider2, { theme }), (0, import_jsx_runtime27.jsx)(DeleteButton, { theme, onDelete })] })] });
   }
   function DefaultToolbarContent({ node, theme, onPatch, onDelete }) {
     const groups = (0, import_react23.useMemo)(() => getNodeActionsForNode(node, theme), [node, theme]);
     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_react23.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 })] })] });
+    return (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [groups.map((group, i) => (0, import_jsx_runtime27.jsxs)(import_react23.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime27.jsx)(Divider2, { theme }), (0, import_jsx_runtime27.jsx)(ActionGroupView, { group, node, theme, onPatch })] }, group.id)), showDelete && (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [(0, import_jsx_runtime27.jsx)(Divider2, { theme }), (0, import_jsx_runtime27.jsx)(DeleteButton, { theme, onDelete })] })] });
   }
   function Divider2({ theme }) {
-    return (0, import_jsx_runtime26.jsx)("div", { style: {
+    return (0, import_jsx_runtime27.jsx)("div", { style: {
       width: 1,
       alignSelf: "stretch",
       background: theme.breadcrumbs.separatorColor,
@@ -20923,23 +21111,23 @@ var SystemCanvas = (() => {
       return null;
     const kind = group.kind ?? "buttons";
     if (kind === "menu") {
-      return (0, import_jsx_runtime26.jsx)(MenuGroup, { group, actions, node, theme, onPatch });
+      return (0, import_jsx_runtime27.jsx)(MenuGroup, { group, actions, node, theme, onPatch });
     }
-    return (0, import_jsx_runtime26.jsx)("div", { title: group.label, style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
+    return (0, import_jsx_runtime27.jsx)("div", { title: group.label, style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
       const handleClick = () => {
         const patch = resolveActionPatch(action, node);
         onPatch(patch);
       };
       const active = action.isActive?.(node) ?? false;
       if (kind === "swatches") {
-        return (0, import_jsx_runtime26.jsx)(SwatchButton, { action, active, theme, onClick: handleClick }, action.id);
+        return (0, import_jsx_runtime27.jsx)(SwatchButton, { action, active, theme, onClick: handleClick }, action.id);
       }
-      return (0, import_jsx_runtime26.jsx)(IconButton, { action, active, theme, onClick: handleClick }, action.id);
+      return (0, import_jsx_runtime27.jsx)(IconButton, { action, active, theme, onClick: handleClick }, action.id);
     }) });
   }
   function SwatchButton({ action, active, theme, onClick }) {
     const color2 = action.swatch ?? theme.node.labelColor;
-    return (0, import_jsx_runtime26.jsx)("button", { type: "button", title: action.label, onClick, style: {
+    return (0, import_jsx_runtime27.jsx)("button", { type: "button", title: action.label, onClick, style: {
       width: SWATCH_SIZE,
       height: SWATCH_SIZE,
       borderRadius: "50%",
@@ -20953,7 +21141,7 @@ var SystemCanvas = (() => {
     }, onMouseDown: (e) => e.preventDefault() });
   }
   function IconButton({ action, active, theme, onClick }) {
-    return (0, import_jsx_runtime26.jsx)("button", { type: "button", title: action.label, onClick, style: {
+    return (0, import_jsx_runtime27.jsx)("button", { type: "button", title: action.label, onClick, style: {
       width: BUTTON_SIZE,
       height: BUTTON_SIZE,
       display: "inline-flex",
@@ -20966,12 +21154,12 @@ var SystemCanvas = (() => {
       cursor: "pointer",
       padding: 0,
       outline: "none"
-    }, onMouseDown: (e) => e.preventDefault(), children: action.icon ? (0, import_jsx_runtime26.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: (0, import_jsx_runtime26.jsx)(NodeIcon, { icon: action.icon, x: 0, y: 0, size: 16, color: active ? theme.breadcrumbs.activeColor : theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }) : action.swatch ? (0, import_jsx_runtime26.jsx)("span", { style: {
+    }, onMouseDown: (e) => e.preventDefault(), children: action.icon ? (0, import_jsx_runtime27.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: (0, import_jsx_runtime27.jsx)(NodeIcon, { icon: action.icon, x: 0, y: 0, size: 16, color: active ? theme.breadcrumbs.activeColor : theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }) : action.swatch ? (0, import_jsx_runtime27.jsx)("span", { style: {
       width: 10,
       height: 10,
       borderRadius: "50%",
       background: action.swatch
-    } }) : (0, import_jsx_runtime26.jsx)("span", { style: { fontSize: 10 }, children: action.label.slice(0, 2) }) });
+    } }) : (0, import_jsx_runtime27.jsx)("span", { style: { fontSize: 10 }, children: action.label.slice(0, 2) }) });
   }
   function MenuGroup({ group, actions, node, theme, onPatch }) {
     const [open, setOpen] = (0, import_react23.useState)(false);
@@ -20989,7 +21177,7 @@ var SystemCanvas = (() => {
     const active = actions.find((a) => a.isActive?.(node));
     const triggerLabel = active?.label ?? group.label ?? "Menu";
     const triggerIcon = active?.icon ?? void 0;
-    return (0, import_jsx_runtime26.jsxs)("div", { ref: wrapRef, style: { position: "relative" }, children: [(0, import_jsx_runtime26.jsxs)("button", { type: "button", title: group.label, onClick: () => setOpen((v) => !v), style: {
+    return (0, import_jsx_runtime27.jsxs)("div", { ref: wrapRef, style: { position: "relative" }, children: [(0, import_jsx_runtime27.jsxs)("button", { type: "button", title: group.label, onClick: () => setOpen((v) => !v), style: {
       height: BUTTON_SIZE,
       display: "inline-flex",
       alignItems: "center",
@@ -21003,7 +21191,7 @@ var SystemCanvas = (() => {
       fontFamily: "inherit",
       fontSize: "inherit",
       outline: "none"
-    }, onMouseDown: (e) => e.preventDefault(), children: [triggerIcon && (0, import_jsx_runtime26.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: (0, import_jsx_runtime26.jsx)(NodeIcon, { icon: triggerIcon, x: 0, y: 0, size: 14, color: theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }), (0, import_jsx_runtime26.jsx)("span", { children: triggerLabel }), (0, import_jsx_runtime26.jsx)("span", { style: { opacity: 0.6, fontSize: 8 }, children: "\u25BE" })] }), open && (0, import_jsx_runtime26.jsx)("div", { style: {
+    }, onMouseDown: (e) => e.preventDefault(), children: [triggerIcon && (0, import_jsx_runtime27.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: (0, import_jsx_runtime27.jsx)(NodeIcon, { icon: triggerIcon, x: 0, y: 0, size: 14, color: theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }), (0, import_jsx_runtime27.jsx)("span", { children: triggerLabel }), (0, import_jsx_runtime27.jsx)("span", { style: { opacity: 0.6, fontSize: 8 }, children: "\u25BE" })] }), open && (0, import_jsx_runtime27.jsx)("div", { style: {
       position: "absolute",
       top: "100%",
       left: 0,
@@ -21018,7 +21206,7 @@ var SystemCanvas = (() => {
       zIndex: 1
     }, children: actions.map((action) => {
       const isActive = action.isActive?.(node) ?? false;
-      return (0, import_jsx_runtime26.jsxs)("button", { type: "button", onClick: () => {
+      return (0, import_jsx_runtime27.jsxs)("button", { type: "button", onClick: () => {
         onPatch(resolveActionPatch(action, node));
         setOpen(false);
       }, style: {
@@ -21035,17 +21223,17 @@ var SystemCanvas = (() => {
         fontFamily: "inherit",
         fontSize: "inherit",
         textAlign: "left"
-      }, onMouseDown: (e) => e.preventDefault(), children: [action.icon && (0, import_jsx_runtime26.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: (0, import_jsx_runtime26.jsx)(NodeIcon, { icon: action.icon, x: 0, y: 0, size: 14, color: isActive ? theme.breadcrumbs.activeColor : theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }), action.swatch && (0, import_jsx_runtime26.jsx)("span", { style: {
+      }, onMouseDown: (e) => e.preventDefault(), children: [action.icon && (0, import_jsx_runtime27.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: (0, import_jsx_runtime27.jsx)(NodeIcon, { icon: action.icon, x: 0, y: 0, size: 14, color: isActive ? theme.breadcrumbs.activeColor : theme.breadcrumbs.textColor, opacity: 1, customIcons: theme.icons }) }), action.swatch && (0, import_jsx_runtime27.jsx)("span", { style: {
         width: 10,
         height: 10,
         borderRadius: "50%",
         background: action.swatch,
         flexShrink: 0
-      } }), (0, import_jsx_runtime26.jsx)("span", { children: action.label })] }, action.id);
+      } }), (0, import_jsx_runtime27.jsx)("span", { children: action.label })] }, action.id);
     }) })] });
   }
   function DeleteButton({ theme, onDelete }) {
-    return (0, import_jsx_runtime26.jsx)("button", { type: "button", title: "Delete", onClick: onDelete, onMouseDown: (e) => e.preventDefault(), style: {
+    return (0, import_jsx_runtime27.jsx)("button", { type: "button", title: "Delete", onClick: onDelete, onMouseDown: (e) => e.preventDefault(), style: {
       width: BUTTON_SIZE,
       height: BUTTON_SIZE,
       display: "inline-flex",
@@ -21058,23 +21246,44 @@ var SystemCanvas = (() => {
       cursor: "pointer",
       padding: 0,
       outline: "none"
-    }, 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" }) }) });
+    }, children: (0, import_jsx_runtime27.jsx)("svg", { width: DELETE_SIZE, height: DELETE_SIZE, viewBox: "0 0 16 16", children: (0, import_jsx_runtime27.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);
+  // ../react/dist/hooks/useAlignmentGuides.js
   var import_react24 = __toESM(require_react(), 1);
+  function useAlignmentGuides(options) {
+    const { dragOverrides, nodesRef, isDragging, threshold } = options;
+    return (0, import_react24.useMemo)(() => {
+      if (!isDragging || dragOverrides.size === 0)
+        return [];
+      const all = nodesRef.current ?? [];
+      const dragging = [];
+      const others = [];
+      for (const n of all) {
+        const override = dragOverrides.get(n.id);
+        if (override)
+          dragging.push({ ...n, ...override });
+        else
+          others.push(n);
+      }
+      return computeAlignmentGuides(dragging, others, threshold);
+    }, [dragOverrides, isDragging, nodesRef, threshold]);
+  }
+
+  // ../react/dist/components/NodeContextMenuOverlay.js
+  var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
+  var import_react25 = __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_react24.useRef)(null);
-    const [hoveredId, setHoveredId] = (0, import_react24.useState)(null);
-    (0, import_react24.useEffect)(() => {
+    const rootRef = (0, import_react25.useRef)(null);
+    const [hoveredId, setHoveredId] = (0, import_react25.useState)(null);
+    (0, import_react25.useEffect)(() => {
       if (state)
         setHoveredId(null);
     }, [state]);
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       if (!state)
         return;
       function onDown(e) {
@@ -21118,7 +21327,7 @@ var SystemCanvas = (() => {
     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", {
+    return (0, import_jsx_runtime28.jsx)("div", {
       ref: rootRef,
       role: "menu",
       // Stop right-clicks inside the menu from bubbling into the document
@@ -21151,7 +21360,7 @@ var SystemCanvas = (() => {
         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: () => {
+        return (0, import_jsx_runtime28.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, {
@@ -21169,12 +21378,12 @@ var SystemCanvas = (() => {
           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 ? (
+        }, children: [item.icon ? (0, import_jsx_runtime28.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", style: { flexShrink: 0, overflow: "visible" }, children: (0, import_jsx_runtime28.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);
+          (0, import_jsx_runtime28.jsx)("span", { style: { width: 14, flexShrink: 0 }, "aria-hidden": true })
+        ) : null, (0, import_jsx_runtime28.jsx)("span", { children: item.label })] }, item.id);
       })
     });
   }
@@ -21182,8 +21391,8 @@ var SystemCanvas = (() => {
   // ../react/dist/components/SystemCanvas.js
   var CASCADE_WINDOW_MS = 1500;
   var CASCADE_OFFSET = 20;
-  var SystemCanvas = (0, import_react25.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, 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, historyDepth, onUndo, onRedo, className, style }, forwardedRef) {
-    const zoomNavConfig = (0, import_react25.useMemo)(() => {
+  var SystemCanvas = (0, import_react26.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, 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, snapGrid, guideThreshold, alignDistributeMenu, historyDepth, onUndo, onRedo, className, style }, forwardedRef) {
+    const zoomNavConfig = (0, import_react26.useMemo)(() => {
       const defaults = {
         enterThreshold: 0.66,
         exitThreshold: 0.33,
@@ -21208,16 +21417,16 @@ var SystemCanvas = (() => {
     }, [zoomNavigation]);
     const effectiveMaxZoom = maxZoom ?? (zoomNavConfig.enabled ? 16 : 4);
     const effectiveMinZoom = minZoomProp ?? (zoomNavConfig.enabled ? 0.01 : 0.1);
-    (0, import_react25.useEffect)(() => {
+    (0, import_react26.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_react25.useState)([]);
-    const [pendingHandoff, setPendingHandoff] = (0, import_react25.useState)(null);
-    const suppressNextHandoffClearRef = (0, import_react25.useRef)(false);
-    const handleBreadcrumbClick = (0, import_react25.useCallback)((index) => {
+    const [parentFrames, setParentFrames] = (0, import_react26.useState)([]);
+    const [pendingHandoff, setPendingHandoff] = (0, import_react26.useState)(null);
+    const suppressNextHandoffClearRef = (0, import_react26.useRef)(false);
+    const handleBreadcrumbClick = (0, import_react26.useCallback)((index) => {
       setParentFrames((prev) => prev.slice(0, index));
       if (suppressNextHandoffClearRef.current) {
         suppressNextHandoffClearRef.current = false;
@@ -21234,10 +21443,10 @@ var SystemCanvas = (() => {
       onNavigate,
       onBreadcrumbClick: handleBreadcrumbClick
     });
-    (0, import_react25.useEffect)(() => {
+    (0, import_react26.useEffect)(() => {
       onBreadcrumbsChange?.(breadcrumbs);
     }, [breadcrumbs, onBreadcrumbsChange]);
-    const theme = (0, import_react25.useMemo)(() => {
+    const theme = (0, import_react26.useMemo)(() => {
       const registry = { ...themes, ...customThemes };
       const resolveByName = (name) => name && registry[name] ? registry[name] : null;
       if (themeProp) {
@@ -21248,22 +21457,23 @@ 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_react25.useMemo)(() => {
+    const snapGridSize = snapGrid === true ? theme.grid.size : typeof snapGrid === "number" ? snapGrid : 0;
+    const { nodes, edges, nodeMap } = (0, import_react26.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_react25.useRef)(nodes);
+    const nodesRef = (0, import_react26.useRef)(nodes);
     nodesRef.current = nodes;
-    const viewportStateRef = (0, import_react25.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const viewportHandleRef = (0, import_react25.useRef)(null);
-    const navigateToRefRef = (0, import_react25.useRef)(navigateToRef);
+    const viewportStateRef = (0, import_react26.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const viewportHandleRef = (0, import_react26.useRef)(null);
+    const navigateToRefRef = (0, import_react26.useRef)(navigateToRef);
     navigateToRefRef.current = navigateToRef;
-    const navigateToBreadcrumbRef = (0, import_react25.useRef)(navigateToBreadcrumb);
+    const navigateToBreadcrumbRef = (0, import_react26.useRef)(navigateToBreadcrumb);
     navigateToBreadcrumbRef.current = navigateToBreadcrumb;
-    const breadcrumbsRef = (0, import_react25.useRef)(breadcrumbs);
+    const breadcrumbsRef = (0, import_react26.useRef)(breadcrumbs);
     breadcrumbsRef.current = breadcrumbs;
-    (0, import_react25.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react26.useImperativeHandle)(forwardedRef, () => ({
       zoomIntoNode: (nodeId, options) => {
         return new Promise((resolve) => {
           const node = nodesRef.current.find((n) => n.id === nodeId);
@@ -21295,11 +21505,11 @@ var SystemCanvas = (() => {
         navigateToBreadcrumbRef.current(0);
       }
     }), [forwardedRef]);
-    const [editingId, setEditingId] = (0, import_react25.useState)(null);
-    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react25.useState)(null);
-    const [editingEdgeId, setEditingEdgeId] = (0, import_react25.useState)(null);
-    const svgProxyRef = (0, import_react25.useRef)(null);
-    const containerRef = (0, import_react25.useRef)(null);
+    const [editingId, setEditingId] = (0, import_react26.useState)(null);
+    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react26.useState)(null);
+    const [editingEdgeId, setEditingEdgeId] = (0, import_react26.useState)(null);
+    const svgProxyRef = (0, import_react26.useRef)(null);
+    const containerRef = (0, import_react26.useRef)(null);
     const { selectedIds, selectNode, toggleNode, selectAll, clearSelection, selectMultiple, marqueeRect, marqueeActiveRef } = useMultiSelect({
       svgRef: svgProxyRef,
       viewport: viewportStateRef,
@@ -21307,12 +21517,12 @@ var SystemCanvas = (() => {
       containerRef,
       enabled: editable
     });
-    const selectedIdsRef = (0, import_react25.useRef)(selectedIds);
-    (0, import_react25.useEffect)(() => {
+    const selectedIdsRef = (0, import_react26.useRef)(selectedIds);
+    (0, import_react26.useEffect)(() => {
       selectedIdsRef.current = selectedIds;
     }, [selectedIds]);
-    const edgesRef = (0, import_react25.useRef)(edges);
-    (0, import_react25.useEffect)(() => {
+    const edgesRef = (0, import_react26.useRef)(edges);
+    (0, import_react26.useEffect)(() => {
       edgesRef.current = edges;
     }, [edges]);
     const { wrappedOnNodeAdd, wrappedOnNodeUpdate, wrappedOnNodesUpdate, wrappedOnNodeDelete, wrappedOnNodesDelete, wrappedOnEdgeAdd, wrappedOnEdgeUpdate, wrappedOnEdgeDelete, beginBatch, endBatch, undo, redo } = useCommandHistory({
@@ -21344,18 +21554,18 @@ var SystemCanvas = (() => {
       onBeginBatch: beginBatch,
       onEndBatch: endBatch
     });
-    (0, import_react25.useEffect)(() => {
+    (0, import_react26.useEffect)(() => {
       clearSelection();
       setEditingId(null);
       setSelectedEdgeId(null);
       setEditingEdgeId(null);
     }, [currentCanvasRef]);
-    const onSelectionChangeRef = (0, import_react25.useRef)(onSelectionChange);
-    (0, import_react25.useEffect)(() => {
+    const onSelectionChangeRef = (0, import_react26.useRef)(onSelectionChange);
+    (0, import_react26.useEffect)(() => {
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
-    const lastEmittedSelectionRef = (0, import_react25.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
-    (0, import_react25.useEffect)(() => {
+    const lastEmittedSelectionRef = (0, import_react26.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
+    (0, import_react26.useEffect)(() => {
       const cb = onSelectionChangeRef.current;
       let next = null;
       if (selectedIds.size > 1) {
@@ -21397,8 +21607,8 @@ var SystemCanvas = (() => {
       }
       cb?.(next);
     }, [selectedIds, selectedEdgeId, currentCanvasRef, nodeMap, edges]);
-    const [containerSize, setContainerSize] = (0, import_react25.useState)({ width: 0, height: 0 });
-    (0, import_react25.useEffect)(() => {
+    const [containerSize, setContainerSize] = (0, import_react26.useState)({ width: 0, height: 0 });
+    (0, import_react26.useEffect)(() => {
       const el = containerRef.current;
       if (!el)
         return;
@@ -21413,8 +21623,8 @@ 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_react25.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
-    const applyLaneSnap = (0, import_react25.useCallback)((id2, patch) => {
+    const getViewportState = (0, import_react26.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
+    const applyLaneSnap = (0, import_react26.useCallback)((id2, patch) => {
       if (!snapToLanes)
         return patch;
       const cols = currentCanvas.columns;
@@ -21439,10 +21649,10 @@ var SystemCanvas = (() => {
       }
       return final;
     }, [snapToLanes, currentCanvas.columns, currentCanvas.rows]);
-    const commitResize = (0, import_react25.useCallback)((id2, patch) => {
+    const commitResize = (0, import_react26.useCallback)((id2, patch) => {
       wrappedOnNodeUpdate(id2, applyLaneSnap(id2, patch), currentCanvasRef);
     }, [wrappedOnNodeUpdate, currentCanvasRef, applyLaneSnap]);
-    const commitDragBatch = (0, import_react25.useCallback)((updates) => {
+    const commitDragBatch = (0, import_react26.useCallback)((updates) => {
       const final = updates.map((u) => ({
         id: u.id,
         patch: applyLaneSnap(u.id, u.patch)
@@ -21457,24 +21667,32 @@ var SystemCanvas = (() => {
         wrappedOnNodeUpdate(id2, patch, currentCanvasRef);
       }
     }, [wrappedOnNodeUpdate, wrappedOnNodesUpdate, onNodeUpdate, onNodesUpdate, currentCanvasRef, applyLaneSnap]);
-    const handleNodeDrop = (0, import_react25.useCallback)((sources, target) => {
+    const handleNodeDrop = (0, import_react26.useCallback)((sources, target) => {
       onNodeDrop?.(sources, target, { canvasRef: currentCanvasRef });
     }, [onNodeDrop, currentCanvasRef]);
-    const { dragOverrides, dropTargetId, onPointerDown: onNodePointerDown, cancelDrag } = useNodeDrag({
+    const { dragOverrides, dropTargetId, onPointerDown: onNodePointerDown, cancelDrag, isDragging } = useNodeDrag({
       viewport: viewportStateRef,
       nodesRef,
       onCommit: commitDragBatch,
       svgRef: svgProxyRef,
       canDropNodeOn,
       onNodeDrop: handleNodeDrop,
-      selectedIdsRef
+      selectedIdsRef,
+      snapGridSize
     });
     const { resizeOverrides, onHandlePointerDown: onResizeHandlePointerDown } = useNodeResize({
       viewport: viewportStateRef,
-      onCommit: commitResize
+      onCommit: commitResize,
+      snapGridSize
+    });
+    const alignmentGuides = useAlignmentGuides({
+      dragOverrides,
+      nodesRef,
+      isDragging,
+      threshold: guideThreshold ?? 4
     });
     const singleSelectedId = selectedIds.size === 1 ? Array.from(selectedIds)[0] : null;
-    const selectedResolvedNode = (0, import_react25.useMemo)(() => {
+    const selectedResolvedNode = (0, import_react26.useMemo)(() => {
       if (!singleSelectedId)
         return null;
       const base = nodeMap.get(singleSelectedId);
@@ -21491,7 +21709,7 @@ var SystemCanvas = (() => {
       return base;
     }, [singleSelectedId, nodeMap, dragOverrides, resizeOverrides]);
     svgProxyRef.current = viewportHandleRef.current?.getSvgElement() ?? null;
-    const handleEdgeCreated = (0, import_react25.useCallback)((edge) => {
+    const handleEdgeCreated = (0, import_react26.useCallback)((edge) => {
       wrappedOnEdgeAdd(edge, currentCanvasRef);
     }, [wrappedOnEdgeAdd, currentCanvasRef]);
     const { pending: pendingEdge, onHandlePointerDown: onConnectionHandlePointerDown } = useEdgeCreate({
@@ -21500,7 +21718,7 @@ var SystemCanvas = (() => {
       nodesRef,
       onCreate: handleEdgeCreated
     });
-    const handleNavigableNodeClick = (0, import_react25.useCallback)((node) => {
+    const handleNavigableNodeClick = (0, import_react26.useCallback)((node) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -21527,7 +21745,7 @@ var SystemCanvas = (() => {
         navigateToRef(node);
       }
     }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled]);
-    const handleZoomEnter = (0, import_react25.useCallback)((node, targetTransform) => {
+    const handleZoomEnter = (0, import_react26.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -21541,7 +21759,7 @@ var SystemCanvas = (() => {
       setPendingHandoff(targetTransform);
       navigateToRef(node);
     }, [currentCanvasRef, navigateToRef]);
-    const handleZoomExit = (0, import_react25.useCallback)((targetTransform) => {
+    const handleZoomExit = (0, import_react26.useCallback)((targetTransform) => {
       setPendingHandoff(targetTransform);
       suppressNextHandoffClearRef.current = true;
       navigateToBreadcrumb(breadcrumbs.length - 2);
@@ -21568,37 +21786,70 @@ var SystemCanvas = (() => {
       onEnter: handleZoomEnter,
       onExit: handleZoomExit
     });
-    const handleViewportChange = (0, import_react25.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react26.useCallback)((vp) => {
       viewportStateRef.current = vp;
       handleZoomNavViewportChange(vp);
       onViewportChange?.(vp);
     }, [handleZoomNavViewportChange, onViewportChange]);
-    const handleHandoffApplied = (0, import_react25.useCallback)(() => {
+    const handleHandoffApplied = (0, import_react26.useCallback)(() => {
       setPendingHandoff(null);
       clearZoomNavCommitting();
     }, [clearZoomNavCommitting]);
-    const handleBeginEdit = (0, import_react25.useCallback)((node) => {
+    const handleBeginEdit = (0, import_react26.useCallback)((node) => {
       setEditingId(node.id);
     }, []);
-    const handleBeginEditEdge = (0, import_react25.useCallback)((edge) => {
+    const handleBeginEditEdge = (0, import_react26.useCallback)((edge) => {
       setEditingEdgeId(edge.id);
     }, []);
-    const [contextMenuState, setContextMenuState] = (0, import_react25.useState)(null);
-    (0, import_react25.useEffect)(() => {
+    const handleAlign = (0, import_react26.useCallback)((direction) => {
+      const selectedNodes = Array.from(selectedIds).map((id2) => nodesRef.current.find((n) => n.id === id2)).filter((n) => n != null);
+      const updates = alignNodes(selectedNodes, direction);
+      if (updates.length > 0)
+        wrappedOnNodesUpdate(updates, currentCanvasRef);
+    }, [selectedIds, nodesRef, wrappedOnNodesUpdate, currentCanvasRef]);
+    const handleDistribute = (0, import_react26.useCallback)((axis) => {
+      const selectedNodes = Array.from(selectedIds).map((id2) => nodesRef.current.find((n) => n.id === id2)).filter((n) => n != null);
+      const updates = distributeNodes(selectedNodes, axis);
+      if (updates.length > 0)
+        wrappedOnNodesUpdate(updates, currentCanvasRef);
+    }, [selectedIds, nodesRef, wrappedOnNodesUpdate, currentCanvasRef]);
+    const [contextMenuState, setContextMenuState] = (0, import_react26.useState)(null);
+    (0, import_react26.useEffect)(() => {
       setContextMenuState(null);
     }, [currentCanvasRef]);
-    const handleContextMenu = (0, import_react25.useCallback)((event) => {
+    const handleContextMenu = (0, import_react26.useCallback)((event) => {
       onContextMenu?.(event);
-      if (!nodeContextMenu)
+      if (!nodeContextMenu && !alignDistributeMenu)
         return;
       if (event.type !== "node")
         return;
       const node = event.target;
       if (!node)
         return;
-      const matched = filterContextMenuItems(nodeContextMenu.items, node, {
-        canvasRef: currentCanvasRef ?? null
-      });
+      const matchCtx = { canvasRef: currentCanvasRef ?? null };
+      const matched = nodeContextMenu ? filterContextMenuItems(nodeContextMenu.items, node, matchCtx) : [];
+      if (alignDistributeMenu && selectedIds.size >= 2 && selectedIds.has(node.id)) {
+        const canDistribute = selectedIds.size >= 3;
+        const builtins = [
+          { id: "__sys_align_left__", label: "Align Left" },
+          { id: "__sys_align_right__", label: "Align Right" },
+          { id: "__sys_align_top__", label: "Align Top" },
+          { id: "__sys_align_bottom__", label: "Align Bottom" },
+          { id: "__sys_align_centerH__", label: "Align Center Horizontal" },
+          { id: "__sys_align_centerV__", label: "Align Center Vertical" },
+          {
+            id: "__sys_distribute_h__",
+            label: "Distribute Horizontally",
+            disabled: canDistribute ? void 0 : () => !canDistribute
+          },
+          {
+            id: "__sys_distribute_v__",
+            label: "Distribute Vertically",
+            disabled: canDistribute ? void 0 : () => !canDistribute
+          }
+        ];
+        matched.push(...builtins);
+      }
       if (matched.length === 0) {
         setContextMenuState(null);
         return;
@@ -21609,7 +21860,48 @@ var SystemCanvas = (() => {
         screenPosition: event.screenPosition,
         canvasRef: currentCanvasRef ?? null
       });
-    }, [onContextMenu, nodeContextMenu, currentCanvasRef]);
+    }, [onContextMenu, nodeContextMenu, currentCanvasRef, alignDistributeMenu, selectedIds]);
+    const effectiveNodeContextMenu = (0, import_react26.useMemo)(() => {
+      if (!nodeContextMenu && !alignDistributeMenu)
+        return null;
+      const baseItems = nodeContextMenu?.items ?? [];
+      const wrappedOnSelect = (itemId, node, ctx) => {
+        if (itemId === "__sys_align_left__") {
+          handleAlign("left");
+          return;
+        }
+        if (itemId === "__sys_align_right__") {
+          handleAlign("right");
+          return;
+        }
+        if (itemId === "__sys_align_top__") {
+          handleAlign("top");
+          return;
+        }
+        if (itemId === "__sys_align_bottom__") {
+          handleAlign("bottom");
+          return;
+        }
+        if (itemId === "__sys_align_centerH__") {
+          handleAlign("centerH");
+          return;
+        }
+        if (itemId === "__sys_align_centerV__") {
+          handleAlign("centerV");
+          return;
+        }
+        if (itemId === "__sys_distribute_h__") {
+          handleDistribute("horizontal");
+          return;
+        }
+        if (itemId === "__sys_distribute_v__") {
+          handleDistribute("vertical");
+          return;
+        }
+        nodeContextMenu?.onSelect(itemId, node, ctx);
+      };
+      return { items: baseItems, onSelect: wrappedOnSelect };
+    }, [nodeContextMenu, alignDistributeMenu, handleAlign, handleDistribute]);
     const { handleNodeClick, handleNodeDoubleClick, handleNodeNavigate, handleEdgeClick, handleEdgeDoubleClick, handleCanvasClick, handleCanvasContextMenu, handleNodeContextMenu, handleEdgeContextMenu } = useCanvasInteraction({
       onNodeClick,
       onNodeDoubleClick,
@@ -21630,27 +21922,27 @@ var SystemCanvas = (() => {
       onSelectEdge: setSelectedEdgeId,
       onBeginEditEdge: handleBeginEditEdge
     });
-    const handleEditorCommit = (0, import_react25.useCallback)((patch) => {
+    const handleEditorCommit = (0, import_react26.useCallback)((patch) => {
       if (editingId) {
         wrappedOnNodeUpdate(editingId, patch, currentCanvasRef);
       }
       setEditingId(null);
     }, [editingId, wrappedOnNodeUpdate, currentCanvasRef]);
-    const handleEditorCancel = (0, import_react25.useCallback)(() => {
+    const handleEditorCancel = (0, import_react26.useCallback)(() => {
       setEditingId(null);
     }, []);
-    const handleEdgeEditorCommit = (0, import_react25.useCallback)((patch) => {
+    const handleEdgeEditorCommit = (0, import_react26.useCallback)((patch) => {
       if (editingEdgeId) {
         wrappedOnEdgeUpdate(editingEdgeId, patch, currentCanvasRef);
       }
       setEditingEdgeId(null);
     }, [editingEdgeId, wrappedOnEdgeUpdate, currentCanvasRef]);
-    const handleEdgeEditorCancel = (0, import_react25.useCallback)(() => {
+    const handleEdgeEditorCancel = (0, import_react26.useCallback)(() => {
       setEditingEdgeId(null);
     }, []);
-    const lastAddRef = (0, import_react25.useRef)(null);
-    const menuOptions = (0, import_react25.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
-    const addNode2 = (0, import_react25.useCallback)((option, position) => {
+    const lastAddRef = (0, import_react26.useRef)(null);
+    const menuOptions = (0, import_react26.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
+    const addNode2 = (0, import_react26.useCallback)((option, position) => {
       let x, y;
       if (position) {
         x = position.x;
@@ -21717,14 +22009,14 @@ var SystemCanvas = (() => {
       cancelDrag
     });
     const renderProps = { options: menuOptions, addNode: addNode2, theme };
-    return (0, import_jsx_runtime28.jsxs)("div", { ref: containerRef, className: `system-canvas ${className ?? ""}`, tabIndex: editable ? 0 : -1, onKeyDown: handleKeyDown, style: {
+    return (0, import_jsx_runtime29.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_runtime28.jsx)(Breadcrumbs, { breadcrumbs, theme: theme.breadcrumbs, onNavigate: navigateToBreadcrumb }), isLoading && (0, import_jsx_runtime28.jsx)("div", { className: "system-canvas-loading", style: {
+    }, children: [(0, import_jsx_runtime29.jsx)(Breadcrumbs, { breadcrumbs, theme: theme.breadcrumbs, onNavigate: navigateToBreadcrumb }), isLoading && (0, import_jsx_runtime29.jsx)("div", { className: "system-canvas-loading", style: {
       position: "absolute",
       top: 12,
       right: 12,
@@ -21736,7 +22028,7 @@ var SystemCanvas = (() => {
       fontFamily: theme.node.fontFamily,
       fontSize: 12,
       backdropFilter: "blur(8px)"
-    }, 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, selectedIds: editable ? selectedIds : void 0, marqueeRect: editable ? marqueeRect : null, marqueeActiveRef: editable ? marqueeActiveRef : void 0, 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 && selectedIds.size === 1 && selectedResolvedNode && !editingId && (0, import_jsx_runtime28.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
+    }, children: "Loading..." }), (0, import_jsx_runtime29.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, selectedIds: editable ? selectedIds : void 0, marqueeRect: editable ? marqueeRect : null, marqueeActiveRef: editable ? marqueeActiveRef : void 0, 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, alignmentGuides: editable ? alignmentGuides : void 0 }), showLaneHeaders && (0, import_jsx_runtime29.jsx)(LaneHeaders, { columns: currentCanvas.columns, rows: currentCanvas.rows, theme, getViewport: getViewportState, width: containerSize.width, height: containerSize.height, pinned: laneHeaders === "pinned" }), editable && showNodeToolbar && selectedIds.size === 1 && selectedResolvedNode && !editingId && (0, import_jsx_runtime29.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
       wrappedOnNodeUpdate(selectedResolvedNode.id, update, currentCanvasRef);
     }, onDelete: () => {
       wrappedOnNodeDelete(selectedResolvedNode.id, currentCanvasRef);
@@ -21746,7 +22038,7 @@ var SystemCanvas = (() => {
       if (selectedResolvedNodes.length === 0)
         return null;
       const anchorNode = selectedResolvedNodes[0];
-      return (0, import_jsx_runtime28.jsx)(NodeToolbar, { node: anchorNode, selectedNodes: selectedResolvedNodes, theme, onPatch: () => {
+      return (0, import_jsx_runtime29.jsx)(NodeToolbar, { node: anchorNode, selectedNodes: selectedResolvedNodes, theme, onPatch: () => {
       }, onMultiPatch: (patch) => {
         for (const id2 of selectedIds) {
           wrappedOnNodeUpdate(id2, patch, currentCanvasRef);
@@ -21754,8 +22046,8 @@ var SystemCanvas = (() => {
       }, onDelete: () => {
         wrappedOnNodesDelete(Array.from(selectedIds), currentCanvasRef);
         clearSelection();
-      }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height });
-    })(), 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) })] });
+      }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height, onAlign: handleAlign, onDistribute: handleDistribute });
+    })(), editable && (renderAddNodeButton ? renderAddNodeButton(renderProps) : (0, import_jsx_runtime29.jsx)(AddNodeButton, { ...renderProps })), effectiveNodeContextMenu && (0, import_jsx_runtime29.jsx)(NodeContextMenuOverlay, { state: contextMenuState, config: effectiveNodeContextMenu, theme, onClose: () => setContextMenuState(null) })] });
   });
 
   // src/index.tsx
@@ -21866,7 +22158,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react26.default.createElement(SystemCanvas, props));
+      root2.render(import_react27.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {