@ship-it-ui/graph-editor 0.0.2

package/dist/index.cjs

@@ -0,0 +1,874 @@
+'use client';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DefaultNode: () => DefaultNode,
+  GraphEditorCanvas: () => GraphEditorCanvas,
+  GraphNodeShell: () => GraphNodeShell,
+  toCytoscapeElements: () => toCytoscapeElements,
+  toFlowElements: () => toFlowElements,
+  useGraphEditorTheme: () => useGraphEditorTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/GraphEditorCanvas.tsx
+var import_icons2 = require("@ship-it-ui/icons");
+var import_react8 = require("@xyflow/react");
+var import_react9 = require("react");
+
+// src/adapter.ts
+function pickDataPassthrough(data, exclude) {
+  const out = {};
+  for (const key of Object.keys(data)) {
+    if (exclude.includes(key)) continue;
+    out[key] = data[key];
+  }
+  return out;
+}
+function pickElementExtras(element) {
+  const extras = {};
+  let hasExtras = false;
+  for (const key of Object.keys(element)) {
+    if (key === "data" || key === "position" || key === "classes") continue;
+    extras[key] = element[key];
+    hasExtras = true;
+  }
+  return { extras: hasExtras ? extras : void 0, hasExtras };
+}
+function toFlowElements(elements) {
+  const nodes = [];
+  const edges = [];
+  for (const el of elements) {
+    const data = el.data ?? {};
+    const isEdge = typeof data.source === "string" && typeof data.target === "string";
+    if (isEdge) {
+      const id = typeof data.id === "string" ? data.id : `${data.source}->${data.target}`;
+      const { extras, hasExtras } = pickElementExtras(el);
+      const edge = {
+        id,
+        source: data.source,
+        target: data.target,
+        data: {
+          ...pickDataPassthrough(data, ["id", "source", "target"]),
+          ...hasExtras ? { _extra: extras } : {}
+        }
+      };
+      if (el.classes) edge.className = el.classes;
+      edges.push(edge);
+    } else {
+      const id = data.id;
+      if (typeof id !== "string") continue;
+      const { extras, hasExtras } = pickElementExtras(el);
+      const node = {
+        id,
+        position: el.position ?? { x: 0, y: 0 },
+        data: {
+          ...pickDataPassthrough(data, ["id"]),
+          ...hasExtras ? { _extra: extras } : {}
+        }
+      };
+      if (el.classes) node.className = el.classes;
+      nodes.push(node);
+    }
+  }
+  return { nodes, edges };
+}
+function toCytoscapeElements(split) {
+  const out = [];
+  for (const node of split.nodes) {
+    const data = node.data ?? {};
+    const passthrough = { ...data };
+    const extras = passthrough._extra;
+    delete passthrough._extra;
+    const element = {
+      data: { id: node.id, ...passthrough },
+      position: { x: node.position.x, y: node.position.y }
+    };
+    if (node.className) element.classes = node.className;
+    if (extras) {
+      for (const key of Object.keys(extras)) {
+        if (key === "data" || key === "position" || key === "classes") continue;
+        element[key] = extras[key];
+      }
+    }
+    out.push(element);
+  }
+  for (const edge of split.edges) {
+    const data = edge.data ?? {};
+    const passthrough = { ...data };
+    const extras = passthrough._extra;
+    delete passthrough._extra;
+    const element = {
+      data: {
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        ...passthrough
+      }
+    };
+    if (edge.className) element.classes = edge.className;
+    if (extras) {
+      for (const key of Object.keys(extras)) {
+        if (key === "data" || key === "position" || key === "classes") continue;
+        element[key] = extras[key];
+      }
+    }
+    out.push(element);
+  }
+  return out;
+}
+
+// src/DefaultNode.tsx
+var import_react2 = require("@xyflow/react");
+
+// src/GraphNodeShell.tsx
+var import_icons = require("@ship-it-ui/icons");
+var import_shipit = require("@ship-it-ui/shipit");
+var import_ui = require("@ship-it-ui/ui");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var GraphNodeShell = (0, import_react.forwardRef)(
+  function GraphNodeShell2({ type, state = "default", glyph, label, size = 52, pathColor, className, style, ...props }, ref) {
+    const meta = (0, import_shipit.getEntityTypeMeta)(type);
+    const color = state === "path" ? pathColor ?? "var(--color-purple)" : meta.colorVar;
+    const glowPct = state === "hover" ? 50 : 25;
+    const opacity = state === "dim" ? 0.35 : 1;
+    const showRing = state === "selected" || state === "path";
+    const ariaRole = typeof label === "string" || label == null ? "img" : void 0;
+    const ariaLabel = typeof label === "string" ? label : label == null ? `${type} node` : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        role: ariaRole,
+        "aria-label": ariaLabel,
+        "data-state": state,
+        "data-entity-type": type,
+        className: (0, import_ui.cn)("inline-flex flex-col items-center gap-[6px]", className),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "bg-panel grid place-items-center rounded-[14px] border-[1.5px] transition-all duration-(--duration-micro)",
+              style: {
+                width: size,
+                height: size,
+                borderColor: color,
+                color,
+                fontSize: Math.round(size * 0.42),
+                boxShadow: `0 0 ${state === "hover" ? 30 : 20}px color-mix(in oklab, ${color} ${glowPct}%, transparent)`,
+                outline: showRing ? `2px solid ${color}` : void 0,
+                outlineOffset: showRing ? 4 : void 0,
+                opacity
+              },
+              children: glyph ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DynamicIconGlyph, { name: meta.iconName, size: Math.round(size * 0.42) })
+            }
+          ),
+          label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-text-dim font-mono text-[10px]", children: label })
+        ]
+      }
+    );
+  }
+);
+GraphNodeShell.displayName = "GraphNodeShell";
+
+// src/DefaultNode.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DefaultNode(props) {
+  const data = props.data ?? {};
+  const type = data.entityType ?? "service";
+  const state = props.selected ? "selected" : data.state ?? "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Handle, { type: "target", position: import_react2.Position.Top, className: "ship-graph-handle" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Handle, { type: "target", position: import_react2.Position.Left, className: "ship-graph-handle" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GraphNodeShell, { type, state, label: data.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Handle, { type: "source", position: import_react2.Position.Bottom, className: "ship-graph-handle" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Handle, { type: "source", position: import_react2.Position.Right, className: "ship-graph-handle" })
+  ] });
+}
+
+// src/history.ts
+var import_react3 = require("react");
+function inverseOf(command) {
+  switch (command.kind) {
+    case "add-node":
+      return { kind: "delete-node", node: command.node, incidentEdges: [] };
+    case "delete-node":
+      return {
+        kind: "batch",
+        commands: [
+          { kind: "add-node", node: command.node },
+          ...command.incidentEdges.map((edge) => ({ kind: "add-edge", edge }))
+        ]
+      };
+    case "add-edge":
+      return { kind: "delete-edge", edge: command.edge };
+    case "delete-edge":
+      return { kind: "add-edge", edge: command.edge };
+    case "move-node":
+      return { kind: "move-node", id: command.id, from: command.to, to: command.from };
+    case "batch":
+      return { kind: "batch", commands: command.commands.map(inverseOf).reverse() };
+  }
+}
+function useHistory({ maxSize = 50 } = {}) {
+  const undoStack = (0, import_react3.useRef)([]);
+  const redoStack = (0, import_react3.useRef)([]);
+  const push = (0, import_react3.useCallback)(
+    (cmd) => {
+      if (maxSize <= 0) return;
+      undoStack.current.push(cmd);
+      if (undoStack.current.length > maxSize) undoStack.current.shift();
+      redoStack.current.length = 0;
+    },
+    [maxSize]
+  );
+  const undo = (0, import_react3.useCallback)(() => {
+    if (maxSize <= 0) return null;
+    const cmd = undoStack.current.pop();
+    if (!cmd) return null;
+    redoStack.current.push(cmd);
+    return inverseOf(cmd);
+  }, [maxSize]);
+  const redo = (0, import_react3.useCallback)(() => {
+    if (maxSize <= 0) return null;
+    const cmd = redoStack.current.pop();
+    if (!cmd) return null;
+    undoStack.current.push(cmd);
+    return cmd;
+  }, [maxSize]);
+  const reset = (0, import_react3.useCallback)(() => {
+    undoStack.current.length = 0;
+    redoStack.current.length = 0;
+  }, []);
+  const size = (0, import_react3.useCallback)(
+    () => ({ undo: undoStack.current.length, redo: redoStack.current.length }),
+    []
+  );
+  return (0, import_react3.useMemo)(() => ({ push, undo, redo, reset, size }), [push, undo, redo, reset, size]);
+}
+
+// src/keyboard.ts
+var import_react4 = require("react");
+var NUDGE_BASE = 8;
+var NUDGE_LARGE = 32;
+function useGraphEditorKeyboard({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onNodeDelete,
+  onEdgeDelete,
+  onNodeMove,
+  onArrowNudge,
+  onClearSelection,
+  undo,
+  redo
+}) {
+  return (0, import_react4.useCallback)(
+    (event) => {
+      const key = event.key;
+      const meta = event.metaKey || event.ctrlKey;
+      const target = event.target;
+      if (target) {
+        const tag = target.tagName;
+        const editable = target.isContentEditable;
+        if (editable || tag === "INPUT" || tag === "TEXTAREA") return;
+      }
+      if (meta && (key === "z" || key === "Z")) {
+        event.preventDefault();
+        if (event.shiftKey) redo?.();
+        else undo?.();
+        return;
+      }
+      if (key === "Delete" || key === "Backspace") {
+        const selectedNodes2 = nodes.filter((n) => n.selected);
+        const selectedEdges = edges.filter((e) => e.selected);
+        if (selectedNodes2.length === 0 && selectedEdges.length === 0) return;
+        event.preventDefault();
+        for (const n of selectedNodes2) onNodeDelete?.(n.id);
+        for (const e of selectedEdges) onEdgeDelete?.(e.id);
+        if (selectedNodes2.length > 0) {
+          onNodesChange(selectedNodes2.map((n) => ({ type: "remove", id: n.id })));
+        }
+        if (selectedEdges.length > 0) {
+          onEdgesChange(selectedEdges.map((e) => ({ type: "remove", id: e.id })));
+        }
+        return;
+      }
+      if (key === "Escape") {
+        const selectedNodes2 = nodes.filter((n) => n.selected);
+        const selectedEdges = edges.filter((e) => e.selected);
+        if (selectedNodes2.length === 0 && selectedEdges.length === 0) return;
+        event.preventDefault();
+        onNodesChange(selectedNodes2.map((n) => ({ type: "select", id: n.id, selected: false })));
+        onEdgesChange(selectedEdges.map((e) => ({ type: "select", id: e.id, selected: false })));
+        onClearSelection?.();
+        return;
+      }
+      const dx = key === "ArrowLeft" ? -1 : key === "ArrowRight" ? 1 : 0;
+      const dy = key === "ArrowUp" ? -1 : key === "ArrowDown" ? 1 : 0;
+      if (dx === 0 && dy === 0) return;
+      const selectedNodes = nodes.filter((n) => n.selected);
+      if (selectedNodes.length === 0) return;
+      event.preventDefault();
+      const step = event.shiftKey ? NUDGE_LARGE : NUDGE_BASE;
+      const changes = selectedNodes.map((n) => {
+        const from = { x: n.position.x, y: n.position.y };
+        const nextPos = { x: from.x + dx * step, y: from.y + dy * step };
+        onArrowNudge?.(n.id, from, nextPos);
+        onNodeMove?.(n.id, nextPos);
+        return {
+          type: "position",
+          id: n.id,
+          position: nextPos,
+          dragging: false
+        };
+      });
+      onNodesChange(changes);
+    },
+    [
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      onNodeDelete,
+      onEdgeDelete,
+      onNodeMove,
+      onArrowNudge,
+      onClearSelection,
+      undo,
+      redo
+    ]
+  );
+}
+
+// src/MiniMap.tsx
+var import_shipit2 = require("@ship-it-ui/shipit");
+var import_react5 = require("@xyflow/react");
+var import_react6 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PADDING = 60;
+function nodeBounds(nodes) {
+  if (nodes.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of nodes) {
+    const { x, y } = node.position;
+    const w = node.measured?.width ?? node.width ?? 52;
+    const h = node.measured?.height ?? node.height ?? 52;
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x + w > maxX) maxX = x + w;
+    if (y + h > maxY) maxY = y + h;
+  }
+  return {
+    x: minX - PADDING,
+    y: minY - PADDING,
+    width: maxX - minX + 2 * PADDING,
+    height: maxY - minY + 2 * PADDING
+  };
+}
+function GraphEditorMiniMap({
+  width = 120,
+  height = 72,
+  className
+}) {
+  const nodes = (0, import_react5.useNodes)();
+  const viewport = (0, import_react5.useViewport)();
+  const canvasSize = (0, import_react5.useStore)((s) => ({ width: s.width, height: s.height }));
+  const { points, viewportRect } = (0, import_react6.useMemo)(() => {
+    const bbox = nodeBounds(nodes);
+    if (!bbox || bbox.width === 0 || bbox.height === 0) {
+      return { points: [], viewportRect: void 0 };
+    }
+    const norm = (x, y) => ({
+      x: (x - bbox.x) / bbox.width,
+      y: (y - bbox.y) / bbox.height
+    });
+    const points2 = nodes.map((node) => {
+      const center = {
+        x: node.position.x + (node.measured?.width ?? node.width ?? 52) / 2,
+        y: node.position.y + (node.measured?.height ?? node.height ?? 52) / 2
+      };
+      return norm(center.x, center.y);
+    });
+    const z = viewport.zoom || 1;
+    const vp = {
+      x: -viewport.x / z,
+      y: -viewport.y / z,
+      w: canvasSize.width / z,
+      h: canvasSize.height / z
+    };
+    const tl = norm(vp.x, vp.y);
+    const br = norm(vp.x + vp.w, vp.y + vp.h);
+    const clampedX = Math.max(0, Math.min(1, tl.x));
+    const clampedY = Math.max(0, Math.min(1, tl.y));
+    const clampedRight = Math.max(0, Math.min(1, br.x));
+    const clampedBottom = Math.max(0, Math.min(1, br.y));
+    const viewportRect2 = {
+      x: clampedX,
+      y: clampedY,
+      width: Math.max(0, clampedRight - clampedX),
+      height: Math.max(0, clampedBottom - clampedY)
+    };
+    return { points: points2, viewportRect: viewportRect2 };
+  }, [nodes, viewport, canvasSize.width, canvasSize.height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_shipit2.GraphMinimap,
+    {
+      points,
+      viewport: viewportRect,
+      width,
+      height,
+      className
+    }
+  );
+}
+
+// src/theme-bridge.ts
+var import_graph_tokens = require("@ship-it-ui/graph-tokens");
+var import_react7 = require("react");
+var RF_VAR_MAP = {
+  "--xy-background-color-default": "bg",
+  "--xy-node-background-color-default": "panel",
+  "--xy-node-border-default": "accent",
+  "--xy-node-color-default": "text",
+  "--xy-edge-stroke-default": "accent",
+  "--xy-edge-stroke-selected-default": "accent",
+  "--xy-selection-background-color-default": "accent",
+  "--xy-controls-button-background-color-default": "panel",
+  "--xy-controls-button-background-color-hover-default": "panel-2",
+  "--xy-controls-button-color-default": "text",
+  "--xy-controls-button-border-color-default": "border"
+};
+function paletteLookup(palette, key) {
+  switch (key) {
+    case "bg":
+      return palette.bg;
+    case "panel":
+      return palette.panel;
+    case "panel-2":
+      return palette.panel2;
+    case "border":
+      return palette.border;
+    case "border-strong":
+      return palette.borderStrong;
+    case "text":
+      return palette.text;
+    case "text-muted":
+      return palette.textMuted;
+    case "text-dim":
+      return palette.textDim;
+    case "accent":
+      return palette.accent;
+    case "ok":
+      return palette.ok;
+    case "warn":
+      return palette.warn;
+    case "err":
+      return palette.err;
+    case "purple":
+      return palette.purple;
+    case "pink":
+      return palette.pink;
+  }
+}
+function applyPalette(el, palette) {
+  for (const [cssVar, key] of Object.entries(RF_VAR_MAP)) {
+    el.style.setProperty(cssVar, paletteLookup(palette, key));
+  }
+}
+function useGraphEditorTheme(wrapperRef, options = {}) {
+  const { observe = true } = options;
+  const [palette, setPalette] = (0, import_react7.useState)(() => (0, import_graph_tokens.readThemeTokens)());
+  const apply = (0, import_react7.useCallback)(() => {
+    const next = (0, import_graph_tokens.readThemeTokens)();
+    setPalette(next);
+    if (wrapperRef.current) applyPalette(wrapperRef.current, next);
+  }, [wrapperRef]);
+  (0, import_react7.useEffect)(() => {
+    apply();
+    if (!observe || typeof document === "undefined") return void 0;
+    const observer = new MutationObserver(apply);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    return () => observer.disconnect();
+  }, [apply, observe]);
+  return { palette, refresh: apply };
+}
+
+// src/GraphEditorCanvas.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GraphEditorCanvasInner = (0, import_react9.forwardRef)(
+  function GraphEditorCanvasInner2({
+    elements,
+    onNodeAdd,
+    onConnect,
+    onNodeMove,
+    onNodeDelete,
+    onEdgeDelete,
+    onSelect,
+    onClearSelection,
+    renderNode,
+    renderEdge,
+    toolbar,
+    inspector,
+    panZoom = true,
+    historySize = 50,
+    miniMap = true,
+    background = "none",
+    className,
+    "aria-label": ariaLabel = "Graph editor",
+    ...rest
+  }, forwardedRef) {
+    const wrapperRef = (0, import_react9.useRef)(null);
+    const { refresh } = useGraphEditorTheme(wrapperRef);
+    const { getViewport, screenToFlowPosition } = (0, import_react8.useReactFlow)();
+    const initialRef = (0, import_react9.useRef)(null);
+    if (initialRef.current === null) initialRef.current = toFlowElements(elements);
+    const [nodes, setNodes, baseOnNodesChange] = (0, import_react8.useNodesState)(initialRef.current.nodes);
+    const [edges, setEdges, baseOnEdgesChange] = (0, import_react8.useEdgesState)(initialRef.current.edges);
+    const history = useHistory({ maxSize: historySize });
+    const nodeTypes = (0, import_react9.useMemo)(() => {
+      if (!renderNode) return { default: DefaultNode };
+      const ConsumerNode = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: renderNode({
+        id: props.id,
+        data: props.data ?? {},
+        selected: Boolean(props.selected),
+        position: { x: props.positionAbsoluteX ?? 0, y: props.positionAbsoluteY ?? 0 }
+      }) });
+      return { default: ConsumerNode };
+    }, [renderNode]);
+    const edgeTypes = (0, import_react9.useMemo)(() => {
+      if (!renderEdge) return void 0;
+      const ConsumerEdge = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: renderEdge({
+        id: props.id,
+        source: props.source,
+        target: props.target,
+        data: props.data ?? {},
+        selected: Boolean(props.selected)
+      }) });
+      return { default: ConsumerEdge };
+    }, [renderEdge]);
+    const handleConnect = (0, import_react9.useCallback)(
+      (connection) => {
+        if (!connection.source || !connection.target) return;
+        const id = `e-${connection.source}-${connection.target}-${Date.now()}`;
+        const edge = {
+          id,
+          source: connection.source,
+          target: connection.target
+        };
+        setEdges((prev) => [...prev, edge]);
+        history.push({ kind: "add-edge", edge });
+        onConnect?.({ id, source: connection.source, target: connection.target });
+      },
+      [setEdges, history, onConnect]
+    );
+    const dragStartPositions = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+    const handleNodesChange = (0, import_react9.useCallback)(
+      (changes) => {
+        baseOnNodesChange(changes);
+        for (const change of changes) {
+          if (change.type !== "position") continue;
+          if (change.dragging === true) {
+            if (!dragStartPositions.current.has(change.id)) {
+              const node = nodes.find((n) => n.id === change.id);
+              if (node) dragStartPositions.current.set(change.id, { ...node.position });
+            }
+            continue;
+          }
+          if (change.dragging === false && change.position) {
+            const from = dragStartPositions.current.get(change.id);
+            dragStartPositions.current.delete(change.id);
+            if (from) {
+              history.push({
+                kind: "move-node",
+                id: change.id,
+                from,
+                to: change.position
+              });
+            }
+            onNodeMove?.(change.id, change.position);
+          }
+        }
+      },
+      [baseOnNodesChange, history, nodes, onNodeMove]
+    );
+    const handleEdgesChange = baseOnEdgesChange;
+    const handleNodeClick = (0, import_react9.useCallback)(
+      (_event, node) => {
+        onSelect?.({ kind: "node", id: node.id });
+      },
+      [onSelect]
+    );
+    const handleEdgeClick = (0, import_react9.useCallback)(
+      (_event, edge) => {
+        onSelect?.({ kind: "edge", id: edge.id });
+      },
+      [onSelect]
+    );
+    const handlePaneClick = (0, import_react9.useCallback)(() => {
+      onClearSelection?.();
+    }, [onClearSelection]);
+    const deleteSelected = (0, import_react9.useCallback)(() => {
+      const selectedNodes = nodes.filter((n) => n.selected);
+      const selectedEdges = edges.filter((e) => e.selected);
+      if (selectedNodes.length === 0 && selectedEdges.length === 0) return;
+      const removedNodeIds = new Set(selectedNodes.map((n) => n.id));
+      const incidentByNodeId = /* @__PURE__ */ new Map();
+      const incidentEdgeIds = /* @__PURE__ */ new Set();
+      for (const node of selectedNodes) {
+        const incident = edges.filter((e) => e.source === node.id || e.target === node.id);
+        incidentByNodeId.set(node.id, incident);
+        for (const e of incident) incidentEdgeIds.add(e.id);
+      }
+      for (const node of selectedNodes) {
+        history.push({
+          kind: "delete-node",
+          node,
+          incidentEdges: incidentByNodeId.get(node.id) ?? []
+        });
+      }
+      for (const edge of selectedEdges) {
+        if (incidentEdgeIds.has(edge.id)) continue;
+        history.push({ kind: "delete-edge", edge });
+      }
+      for (const node of selectedNodes) onNodeDelete?.(node.id);
+      for (const edge of selectedEdges) {
+        if (incidentEdgeIds.has(edge.id)) continue;
+        onEdgeDelete?.(edge.id);
+      }
+      if (removedNodeIds.size > 0) {
+        setNodes((prev) => prev.filter((n) => !removedNodeIds.has(n.id)));
+      }
+      const droppedEdgeIds = new Set(incidentEdgeIds);
+      for (const e of selectedEdges) droppedEdgeIds.add(e.id);
+      if (droppedEdgeIds.size > 0) {
+        setEdges((prev) => prev.filter((e) => !droppedEdgeIds.has(e.id)));
+      }
+    }, [edges, history, nodes, onEdgeDelete, onNodeDelete, setEdges, setNodes]);
+    const applyCommand = (0, import_react9.useCallback)(
+      (command) => {
+        switch (command.kind) {
+          case "add-node":
+            setNodes((prev) => [...prev, command.node]);
+            onNodeAdd?.({
+              id: command.node.id,
+              position: command.node.position,
+              data: command.node.data ?? {}
+            });
+            return;
+          case "delete-node": {
+            const removedId = command.node.id;
+            setNodes((prev) => prev.filter((n) => n.id !== removedId));
+            const incidentIds = new Set(command.incidentEdges.map((e) => e.id));
+            setEdges((prev) => prev.filter((e) => !incidentIds.has(e.id)));
+            onNodeDelete?.(removedId);
+            return;
+          }
+          case "add-edge":
+            setEdges((prev) => [...prev, command.edge]);
+            onConnect?.({
+              id: command.edge.id,
+              source: command.edge.source,
+              target: command.edge.target
+            });
+            return;
+          case "delete-edge":
+            setEdges((prev) => prev.filter((e) => e.id !== command.edge.id));
+            onEdgeDelete?.(command.edge.id);
+            return;
+          case "move-node":
+            setNodes(
+              (prev) => prev.map((n) => n.id === command.id ? { ...n, position: command.to } : n)
+            );
+            onNodeMove?.(command.id, command.to);
+            return;
+          case "batch":
+            for (const child of command.commands) applyCommand(child);
+            return;
+        }
+      },
+      [onConnect, onEdgeDelete, onNodeAdd, onNodeDelete, onNodeMove, setEdges, setNodes]
+    );
+    const undo = (0, import_react9.useCallback)(() => {
+      const inverse = history.undo();
+      if (inverse) applyCommand(inverse);
+    }, [history, applyCommand]);
+    const redo = (0, import_react9.useCallback)(() => {
+      const cmd = history.redo();
+      if (cmd) applyCommand(cmd);
+    }, [history, applyCommand]);
+    const deleteFlushedRef = (0, import_react9.useRef)(false);
+    const onKeyDown = useGraphEditorKeyboard({
+      nodes,
+      edges,
+      onNodesChange: (changes) => {
+        const removals = changes.filter((c) => c.type === "remove");
+        if (removals.length > 0) {
+          if (!deleteFlushedRef.current) {
+            deleteSelected();
+            deleteFlushedRef.current = true;
+            queueMicrotask(() => {
+              deleteFlushedRef.current = false;
+            });
+          }
+          const remaining = changes.filter((c) => c.type !== "remove");
+          if (remaining.length > 0) baseOnNodesChange(remaining);
+        } else {
+          baseOnNodesChange(changes);
+        }
+      },
+      onEdgesChange: (changes) => {
+        const removals = changes.filter((c) => c.type === "remove");
+        if (removals.length > 0) {
+          if (!deleteFlushedRef.current) {
+            deleteSelected();
+            deleteFlushedRef.current = true;
+            queueMicrotask(() => {
+              deleteFlushedRef.current = false;
+            });
+          }
+          const remaining = changes.filter((c) => c.type !== "remove");
+          if (remaining.length > 0) baseOnEdgesChange(remaining);
+        } else {
+          baseOnEdgesChange(changes);
+        }
+      },
+      // Don't double-fire delete events — deleteSelected*() already does that.
+      onNodeDelete: void 0,
+      onEdgeDelete: void 0,
+      onNodeMove,
+      onArrowNudge: (id, from, to) => {
+        history.push({ kind: "move-node", id, from, to });
+      },
+      onClearSelection,
+      undo,
+      redo
+    });
+    const handleAddClick = (0, import_react9.useCallback)(() => {
+      const vp = getViewport();
+      const wrapper = wrapperRef.current;
+      const rect = wrapper?.getBoundingClientRect();
+      const position = rect ? screenToFlowPosition({
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      }) : { x: -vp.x, y: -vp.y };
+      const id = `node-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+      const newNode = { id, position, data: {} };
+      setNodes((prev) => [...prev, newNode]);
+      history.push({ kind: "add-node", node: newNode });
+      onNodeAdd?.({ id, position, data: {} });
+    }, [getViewport, screenToFlowPosition, setNodes, history, onNodeAdd]);
+    (0, import_react9.useImperativeHandle)(forwardedRef, () => ({ refreshStyles: refresh, undo, redo }), [
+      refresh,
+      undo,
+      redo
+    ]);
+    return (
+      // `role="application"` is the ARIA-recommended container for a custom
+      // widget that owns its keyboard semantics — the canvas implements its
+      // own arrow-nudge / Delete / Escape / ⌘Z bindings. eslint-jsx-a11y
+      // doesn't recognize `application` as interactive, so the rules below
+      // are disabled for this single element.
+      /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          ref: wrapperRef,
+          role: "application",
+          "aria-label": ariaLabel,
+          tabIndex: 0,
+          "data-background": background,
+          className: ["ship-graph-editor", className].filter(Boolean).join(" "),
+          onKeyDown,
+          ...rest,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_react8.ReactFlow,
+              {
+                nodes,
+                edges,
+                nodeTypes,
+                edgeTypes,
+                onNodesChange: handleNodesChange,
+                onEdgesChange: handleEdgesChange,
+                onConnect: handleConnect,
+                onNodeClick: handleNodeClick,
+                onEdgeClick: handleEdgeClick,
+                onPaneClick: handlePaneClick,
+                panOnDrag: panZoom,
+                zoomOnScroll: panZoom,
+                zoomOnPinch: panZoom,
+                zoomOnDoubleClick: false,
+                deleteKeyCode: null,
+                proOptions: { hideAttribution: true },
+                fitView: true,
+                children: background === "dots" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Background, { variant: import_react8.BackgroundVariant.Dots, gap: 20, size: 1 })
+              }
+            ),
+            toolbar ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute top-4 left-4 z-10", children: toolbar }) : onNodeAdd && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute top-4 left-4 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleAddClick,
+                "aria-label": "Add node",
+                className: "bg-panel border-border text-text hover:bg-panel-2 focus-visible:ring-accent-dim flex h-8 items-center gap-1 rounded-md border px-3 text-[12px] font-medium transition-colors outline-none focus-visible:ring-[3px]",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.IconGlyph, { name: "add", size: 14 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Add" })
+                ]
+              }
+            ) }),
+            inspector && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute top-4 right-4 z-10", children: inspector }),
+            miniMap && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute right-4 bottom-4 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GraphEditorMiniMap, {}) })
+          ]
+        }
+      )
+    );
+  }
+);
+var GraphEditorCanvas = (0, import_react9.forwardRef)(
+  function GraphEditorCanvas2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GraphEditorCanvasInner, { ...props, ref }) });
+  }
+);
+GraphEditorCanvas.displayName = "GraphEditorCanvas";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DefaultNode,
+  GraphEditorCanvas,
+  GraphNodeShell,
+  toCytoscapeElements,
+  toFlowElements,
+  useGraphEditorTheme
+});
+//# sourceMappingURL=index.cjs.map