@invana/canvas-react 0.0.2

package/dist/index.js

@@ -0,0 +1,2251 @@
+import { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useContext, useCallback, useMemo } from 'react';
+import { Canvas as Canvas$1, BackgroundLayer as BackgroundLayer$1, DragPanBehaviour as DragPanBehaviour$1, WheelZoomBehaviour as WheelZoomBehaviour$1, PinchZoomBehaviour as PinchZoomBehaviour$1, KeyboardCameraInputBehaviour as KeyboardCameraInputBehaviour$1 } from '@invana/canvas';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { GraphHistory, GraphClipboard, GraphLayer as GraphLayer$1, MiniMapLayer as MiniMapLayer$1, DragNodeBehaviour as DragNodeBehaviour$1, ContextMenuBehaviour as ContextMenuBehaviour$1, CreateNodeBehaviour as CreateNodeBehaviour$1, DrawEdgeBehaviour as DrawEdgeBehaviour$1, EraseBehaviour as EraseBehaviour$1, HoverActivateBehaviour as HoverActivateBehaviour$1, ClickSelectBehaviour as ClickSelectBehaviour$1, ClickInspectBehaviour as ClickInspectBehaviour$1, BrushSelectBehaviour as BrushSelectBehaviour$1, LassoSelectBehaviour as LassoSelectBehaviour$1, CollapseExpandBehaviour as CollapseExpandBehaviour$1, NodeResizeBehaviour as NodeResizeBehaviour$1, LabelCollisionBehaviour as LabelCollisionBehaviour$1, LabelResolutionLODBehaviour as LabelResolutionLODBehaviour$1, NodeSizeLODBehaviour as NodeSizeLODBehaviour$1, EdgeSizeLODBehaviour as EdgeSizeLODBehaviour$1, ParallelEdgeBehaviour as ParallelEdgeBehaviour$1, DegreeSizeBehaviour as DegreeSizeBehaviour$1, ResponsiveThemeBehaviour as ResponsiveThemeBehaviour$1 } from '@invana/graph';
+import { D3ForceLayout as D3ForceLayout$1 } from '@invana/graph-layout-d3-force';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Button, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItem, DropdownMenuSeparator, NestedMenu, NavHorizontal, NavVertical, Separator } from '@invana/ui';
+
+// src/Canvas.tsx
+var CanvasContext = createContext(null);
+function useCanvas() {
+  const canvas = useContext(CanvasContext);
+  if (!canvas) {
+    throw new Error("useCanvas() must be called inside a <Canvas> component");
+  }
+  return canvas;
+}
+var Canvas = forwardRef(function Canvas2({ children, style, className, ...engineOpts }, ref) {
+  const hostRef = useRef(null);
+  const [canvas, setCanvas] = useState(null);
+  const optsRef = useRef(engineOpts);
+  optsRef.current = engineOpts;
+  useEffect(() => {
+    const container = hostRef.current;
+    if (!container) return;
+    let cancelled = false;
+    const engine = new Canvas$1();
+    void engine.init({ container, ...optsRef.current }).then(() => {
+      if (cancelled) {
+        engine.destroy();
+        return;
+      }
+      setCanvas(engine);
+    }).catch((err) => {
+      if (!cancelled) {
+        console.error("[canvas-react] Canvas.init() failed:", err);
+      }
+    });
+    return () => {
+      cancelled = true;
+      setCanvas(null);
+      if (engine.isInitialised) engine.destroy();
+    };
+  }, []);
+  useImperativeHandle(ref, () => canvas, [canvas]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      className,
+      style: { width: "100%", height: "100%", position: "relative", ...style },
+      children: canvas && /* @__PURE__ */ jsx(CanvasContext.Provider, { value: canvas, children })
+    }
+  );
+});
+var HistoryContext = createContext(null);
+var ClipboardContext = createContext(null);
+var ToolContext = createContext(null);
+function useResolvedCanvas(explicit) {
+  const fromContext = useContext(CanvasContext);
+  const canvas = explicit ?? fromContext;
+  if (!canvas) {
+    throw new Error(
+      "Canvas hooks need a <Canvas> ancestor, or an explicit `canvas` argument."
+    );
+  }
+  return canvas;
+}
+function GraphHistoryProvider({
+  layerId = "graph",
+  limit,
+  canvas,
+  children
+}) {
+  const resolved = useResolvedCanvas(canvas);
+  const [history, setHistory] = useState(null);
+  useEffect(() => {
+    const layer = resolved.layers.get(layerId);
+    const store = layer?.store;
+    if (!store) return;
+    const instance = new GraphHistory(store, limit !== void 0 ? { limit } : {});
+    setHistory(instance);
+    return () => {
+      instance.clear();
+      setHistory(null);
+    };
+  }, [resolved, layerId, limit]);
+  useEffect(() => {
+    if (!history) return;
+    const layer = resolved.layers.get(layerId);
+    const store = layer?.store;
+    if (!layer || !store) return;
+    let before = null;
+    const offStart = layer.events.on("node:drag-start", ({ nodeId, nodeIds }) => {
+      const ids = /* @__PURE__ */ new Set();
+      for (const primary of nodeIds ?? [nodeId]) {
+        ids.add(primary);
+        for (const desc of store.descendantsOf(primary)) ids.add(desc);
+      }
+      before = /* @__PURE__ */ new Map();
+      for (const id of ids) {
+        const p = store.getPosition(id);
+        if (p) before.set(id, { x: p.x, y: p.y });
+      }
+    });
+    const offEnd = layer.events.on("node:drag-end", () => {
+      const snap = before;
+      before = null;
+      if (!snap) return;
+      const ops = [];
+      for (const [id, from] of snap) {
+        const to = store.getPosition(id);
+        if (to && (to.x !== from.x || to.y !== from.y)) {
+          ops.push({ kind: "moveNode", id, before: from, after: { x: to.x, y: to.y } });
+        }
+      }
+      if (ops.length > 0) history.push({ ops, label: "move" });
+    });
+    return () => {
+      offStart();
+      offEnd();
+    };
+  }, [resolved, layerId, history]);
+  return /* @__PURE__ */ jsx(HistoryContext.Provider, { value: history, children });
+}
+function GraphClipboardProvider({
+  layerId = "graph",
+  pasteOffset,
+  canvas,
+  children
+}) {
+  const resolved = useResolvedCanvas(canvas);
+  const [clipboard, setClipboard] = useState(null);
+  useEffect(() => {
+    const layer = resolved.layers.get(layerId);
+    const store = layer?.store;
+    if (!store) return;
+    const instance = new GraphClipboard(store, pasteOffset ? { pasteOffset } : {});
+    setClipboard(instance);
+    return () => setClipboard(null);
+  }, [resolved, layerId, pasteOffset]);
+  return /* @__PURE__ */ jsx(ClipboardContext.Provider, { value: clipboard, children });
+}
+function GraphToolProvider({
+  defaultTool = "select",
+  defaultNodeKind = "circle",
+  escapeToSelect = true,
+  children
+}) {
+  const [tool, setTool] = useState(defaultTool);
+  const [nodeKind, setNodeKind] = useState(defaultNodeKind);
+  const reset = useCallback(() => setTool("select"), []);
+  useEffect(() => {
+    if (!escapeToSelect) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") reset();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [escapeToSelect, reset]);
+  const value = useMemo(
+    () => ({ tool, setTool, nodeKind, setNodeKind }),
+    [tool, nodeKind]
+  );
+  return /* @__PURE__ */ jsx(ToolContext.Provider, { value, children });
+}
+function GraphLayer({ id = "graph", data, store, ...rest }) {
+  const canvas = useCanvas();
+  const layerRef = useRef(null);
+  useEffect(() => {
+    const layer = new GraphLayer$1({
+      id,
+      options: { ...rest, ...store ? { store } : {} }
+    });
+    canvas.layers.add(layer);
+    layerRef.current = layer;
+    return () => {
+      canvas.layers.remove(id);
+      layerRef.current = null;
+    };
+  }, [canvas, id]);
+  useEffect(() => {
+    if (data && layerRef.current) {
+      layerRef.current.setData(data);
+    }
+  }, [data]);
+  return null;
+}
+function BackgroundLayer({ id = "background", ...options }) {
+  const canvas = useCanvas();
+  const layerRef = useRef(null);
+  useEffect(() => {
+    const layer = new BackgroundLayer$1({ id, options });
+    canvas.layers.add(layer);
+    layerRef.current = layer;
+    return () => {
+      canvas.layers.remove(id);
+      layerRef.current = null;
+    };
+  }, [canvas, id]);
+  const optionsKey = useMemo(() => JSON.stringify(options), [options]);
+  useEffect(() => {
+    layerRef.current?.setOptions(options);
+  }, [optionsKey]);
+  return null;
+}
+function MiniMapLayer({
+  id = "minimap",
+  graphLayerId = "graph",
+  ...options
+}) {
+  const canvas = useCanvas();
+  const layerRef = useRef(null);
+  useEffect(() => {
+    const layer = new MiniMapLayer$1({ id, options: { graphLayerId, ...options } });
+    canvas.layers.add(layer);
+    layerRef.current = layer;
+    return () => {
+      canvas.layers.remove(id);
+      layerRef.current = null;
+    };
+  }, [canvas, id, graphLayerId]);
+  const optionsKey = useMemo(() => JSON.stringify(options), [options]);
+  useEffect(() => {
+    layerRef.current?.setOptions(options);
+  }, [optionsKey]);
+  return null;
+}
+function useBehaviourRegistration(create, id, enabled, identity) {
+  const canvas = useCanvas();
+  useEffect(() => {
+    const behaviour = create();
+    canvas.behaviours.register(behaviour);
+    return () => {
+      canvas.behaviours.unregister(id);
+    };
+  }, [canvas, ...identity]);
+  useEffect(() => {
+    canvas.behaviours.setEnabled(id, enabled);
+  }, [canvas, enabled, ...identity]);
+}
+
+// src/behaviours/DragPanBehaviour.tsx
+function DragPanBehaviour({ id = "pan", enabled = true, ...rest }) {
+  useBehaviourRegistration(
+    () => new DragPanBehaviour$1({ id, enabled, ...rest }),
+    id,
+    enabled,
+    [id]
+  );
+  return null;
+}
+function WheelZoomBehaviour({
+  id = "zoom",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new WheelZoomBehaviour$1({ id, enabled, ...rest }),
+    id,
+    enabled,
+    [id]
+  );
+  return null;
+}
+function PinchZoomBehaviour({
+  id = "pinch",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new PinchZoomBehaviour$1({ id, enabled, ...rest }),
+    id,
+    enabled,
+    [id]
+  );
+  return null;
+}
+function KeyboardCameraInputBehaviour({
+  id = "keyboard-camera",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new KeyboardCameraInputBehaviour$1({ id, enabled, ...rest }),
+    id,
+    enabled,
+    [id]
+  );
+  return null;
+}
+function DragNodeBehaviour({
+  id = "drag-node",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new DragNodeBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function ContextMenuBehaviour({
+  id = "context-menu",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new ContextMenuBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function CreateNodeBehaviour({
+  id = "create-node",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new CreateNodeBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function DrawEdgeBehaviour({
+  id = "draw-edge",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new DrawEdgeBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function EraseBehaviour({
+  id = "erase",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new EraseBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function HoverActivateBehaviour({
+  id = "hover",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new HoverActivateBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function ClickSelectBehaviour({
+  id = "click-select",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new ClickSelectBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function ClickInspectBehaviour({
+  id = "click-inspect",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new ClickInspectBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function BrushSelectBehaviour({
+  id = "brush-select",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new BrushSelectBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function LassoSelectBehaviour({
+  id = "lasso-select",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new LassoSelectBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function CollapseExpandBehaviour({
+  id = "collapse-expand",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new CollapseExpandBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function NodeResizeBehaviour({
+  id = "node-resize",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new NodeResizeBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function LabelCollisionBehaviour({
+  id = "label-collision",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new LabelCollisionBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function LabelResolutionLODBehaviour({
+  id = "label-lod",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new LabelResolutionLODBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function NodeSizeLODBehaviour({
+  id = "node-size-lod",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new NodeSizeLODBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function EdgeSizeLODBehaviour({
+  id = "edge-size-lod",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new EdgeSizeLODBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function ParallelEdgeBehaviour({
+  id = "parallel-edge",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new ParallelEdgeBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function DegreeSizeBehaviour({
+  id = "degree-size",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new DegreeSizeBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function ResponsiveThemeBehaviour({
+  id = "responsive-theme",
+  layerId = "graph",
+  enabled = true,
+  ...rest
+}) {
+  useBehaviourRegistration(
+    () => new ResponsiveThemeBehaviour$1({ id, layerId, enabled, ...rest }),
+    id,
+    enabled,
+    [id, layerId]
+  );
+  return null;
+}
+function D3ForceLayout({
+  targetLayerId = "graph",
+  fitPadding = 80,
+  options
+}) {
+  const canvas = useCanvas();
+  useEffect(() => {
+    const layer = canvas.layers.get(targetLayerId);
+    if (!layer) {
+      console.warn(
+        `[canvas-react] <D3ForceLayout> could not find layer "${targetLayerId}". Make sure the corresponding <GraphLayer> is mounted earlier in the JSX tree.`
+      );
+      return;
+    }
+    const layout = new D3ForceLayout$1(options);
+    if (fitPadding != null) {
+      layout.events.on("end", () => {
+        canvas.camera.fitContent(layer.getBounds(), fitPadding);
+      });
+    }
+    void layout.apply(layer);
+    return () => {
+      layout.stop();
+    };
+  }, [canvas, targetLayerId]);
+  return null;
+}
+var DEFAULT_ZOOM_STEP = 1.2;
+function useCamera(canvas) {
+  const resolved = useResolvedCanvas(canvas);
+  return useMemo(() => {
+    const camera = resolved.camera;
+    return {
+      zoomIn: (factor = DEFAULT_ZOOM_STEP) => camera.zoomAt(factor),
+      zoomOut: (factor = DEFAULT_ZOOM_STEP) => camera.zoomAt(1 / factor),
+      setZoom: (scale) => camera.setZoom(scale),
+      zoomTo: (scale, centerX, centerY) => camera.zoomAt(scale / camera.scale, centerX, centerY),
+      pan: (dx, dy) => camera.pan(dx, dy),
+      fitContent: (worldRect, padding) => camera.fitContent(worldRect, padding),
+      getZoom: () => camera.scale
+    };
+  }, [resolved]);
+}
+function useZoom(canvas) {
+  const resolved = useResolvedCanvas(canvas);
+  const { zoomIn, zoomOut, setZoom, zoomTo } = useCamera(resolved);
+  const [zoom, setZoomState] = useState(() => resolved.camera.scale);
+  useEffect(() => {
+    setZoomState(resolved.camera.scale);
+    return resolved.events.on("camera:zoom", ({ scale }) => setZoomState(scale));
+  }, [resolved]);
+  return { zoom, zoomIn, zoomOut, setZoom, zoomTo };
+}
+var DEFAULT_FIT_PADDING = 80;
+function hasGetBounds(layer) {
+  return typeof layer?.getBounds === "function";
+}
+function useFitContent(layerId, canvas) {
+  const resolved = useResolvedCanvas(canvas);
+  const [hasContent, setHasContent] = useState(() => resolved.layers.has(layerId));
+  useEffect(() => {
+    const sync = () => setHasContent(resolved.layers.has(layerId));
+    sync();
+    const offAdded = resolved.events.on("layer:added", sync);
+    const offRemoved = resolved.events.on("layer:removed", sync);
+    return () => {
+      offAdded();
+      offRemoved();
+    };
+  }, [resolved, layerId]);
+  const fitContent = useCallback(
+    (padding = DEFAULT_FIT_PADDING) => {
+      const layer = resolved.layers.get(layerId);
+      if (hasGetBounds(layer)) {
+        resolved.camera.fitContent(layer.getBounds(), padding);
+      }
+    },
+    [resolved, layerId]
+  );
+  return { fitContent, hasContent };
+}
+function useCanvasEvent(event, handler, canvas) {
+  const resolved = useResolvedCanvas(canvas);
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+  useEffect(() => {
+    return resolved.events.on(event, (payload) => handlerRef.current(payload));
+  }, [resolved, event]);
+}
+function hasClear(layer) {
+  return typeof layer?.clear === "function";
+}
+function useClearGraph(layerId, canvas) {
+  const resolved = useResolvedCanvas(canvas);
+  const history = useContext(HistoryContext);
+  const clear = useCallback(() => {
+    const layer = resolved.layers.get(layerId);
+    if (!hasClear(layer)) return;
+    const store = layer.store;
+    if (history && store) {
+      const ids = [...store.nodes()].map((n) => n.id);
+      if (ids.length > 0) {
+        history.transaction("clear", (rec) => {
+          for (const id of ids) rec.removeNode(id);
+        });
+        return;
+      }
+    }
+    layer.clear();
+  }, [resolved, layerId, history]);
+  return { clear };
+}
+function useSelection(options = {}, canvas) {
+  const { clickSelectId = "click-select" } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const [selectedNodeIds, setNodeIds] = useState([]);
+  const [selectedEdgeIds, setEdgeIds] = useState([]);
+  useEffect(() => {
+    const behaviour = resolved.behaviours.get(clickSelectId);
+    if (!behaviour) {
+      setNodeIds([]);
+      setEdgeIds([]);
+      return;
+    }
+    setNodeIds(behaviour.getSelectedShapeIds());
+    setEdgeIds(behaviour.getSelectedConnectorIds());
+    return behaviour.events.on("selection:change", (snapshot) => {
+      setNodeIds(snapshot.shapeIds);
+      setEdgeIds(snapshot.connectorIds);
+    });
+  }, [resolved, clickSelectId]);
+  const clear = useCallback(() => {
+    resolved.behaviours.get(clickSelectId)?.clearSelection();
+  }, [resolved, clickSelectId]);
+  return {
+    selectedNodeIds,
+    selectedEdgeIds,
+    count: selectedNodeIds.length + selectedEdgeIds.length,
+    clear
+  };
+}
+function useInspectTarget(options = {}, canvas) {
+  const { inspectId = "click-inspect" } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const [target, setTarget] = useState(null);
+  useEffect(() => {
+    const behaviour = resolved.behaviours.get(inspectId);
+    if (!behaviour) {
+      setTarget(null);
+      return;
+    }
+    setTarget(behaviour.getTarget());
+    return behaviour.events.on("inspect:change", setTarget);
+  }, [resolved, inspectId]);
+  return target;
+}
+function hasRedraw(layer) {
+  return typeof layer?.redraw === "function";
+}
+function useHistory(options = {}, canvas) {
+  const { layerId = "graph" } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const history = useContext(HistoryContext);
+  const [state, setState] = useState({ canUndo: false, canRedo: false });
+  useEffect(() => {
+    if (!history) {
+      setState({ canUndo: false, canRedo: false });
+      return;
+    }
+    setState({ canUndo: history.canUndo, canRedo: history.canRedo });
+    return history.events.on("change", ({ canUndo, canRedo }) => setState({ canUndo, canRedo }));
+  }, [history]);
+  const undo = useCallback(() => history?.undo(), [history]);
+  const redo = useCallback(() => history?.redo(), [history]);
+  const redraw = useCallback(() => {
+    const layer = resolved.layers.get(layerId);
+    if (hasRedraw(layer)) layer.redraw();
+  }, [resolved, layerId]);
+  return { undo, redo, redraw, canUndo: state.canUndo, canRedo: state.canRedo };
+}
+function useClipboard(options = {}, canvas) {
+  const { clickSelectId = "click-select" } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const clipboard = useContext(ClipboardContext);
+  const history = useContext(HistoryContext);
+  const { selectedNodeIds, selectedEdgeIds, count } = useSelection({ clickSelectId }, resolved);
+  const [canPaste, setCanPaste] = useState(false);
+  useEffect(() => {
+    if (!clipboard) {
+      setCanPaste(false);
+      return;
+    }
+    setCanPaste(clipboard.hasContent);
+    return clipboard.events.on("change", ({ hasContent }) => setCanPaste(hasContent));
+  }, [clipboard]);
+  const copy = useCallback(() => {
+    clipboard?.copy(selectedNodeIds, selectedEdgeIds);
+  }, [clipboard, selectedNodeIds, selectedEdgeIds]);
+  const cut = useCallback(() => {
+    clipboard?.cut(selectedNodeIds, selectedEdgeIds, history ?? void 0);
+  }, [clipboard, history, selectedNodeIds, selectedEdgeIds]);
+  const remove = useCallback(() => {
+    clipboard?.delete(selectedNodeIds, selectedEdgeIds, history ?? void 0);
+  }, [clipboard, history, selectedNodeIds, selectedEdgeIds]);
+  const paste = useCallback(() => {
+    if (!clipboard) return;
+    const { nodeIds, edgeIds } = clipboard.paste(history ?? void 0);
+    const behaviour = resolved.behaviours.get(clickSelectId);
+    behaviour?.selectMultiple([
+      ...nodeIds.map((id) => ({ id, type: "shape" })),
+      ...edgeIds.map((id) => ({ id, type: "connector" }))
+    ]);
+  }, [clipboard, history, resolved, clickSelectId]);
+  return { cut, copy, paste, remove, canPaste, hasSelection: count > 0 };
+}
+function useGrid(options = {}, canvas) {
+  const { backgroundLayerId = "background", patternType } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const [showGrid, setShowGrid] = useState(false);
+  useEffect(() => {
+    const layer = resolved.layers.get(backgroundLayerId);
+    if (layer) setShowGrid(layer.getOptions().type === "pattern");
+  }, [resolved, backgroundLayerId]);
+  const setGrid = useCallback(
+    (on) => {
+      const layer = resolved.layers.get(backgroundLayerId);
+      if (!layer) return;
+      const next = { type: on ? "pattern" : "solid" };
+      if (on && patternType) next.patternType = patternType;
+      layer.setOptions(next);
+      setShowGrid(on);
+    },
+    [resolved, backgroundLayerId, patternType]
+  );
+  const toggleGrid = useCallback(() => setGrid(!showGrid), [setGrid, showGrid]);
+  return { showGrid, toggleGrid, setGrid };
+}
+function useTheme(options = {}, canvas) {
+  const { behaviourId = "responsive-theme", backgroundLayerId, onChange } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const [mode, setModeState] = useState("auto");
+  const [kind, setKindState] = useState("light");
+  const getBehaviour = useCallback(
+    () => resolved.behaviours.get(behaviourId),
+    [resolved, behaviourId]
+  );
+  const getBackground = useCallback(
+    () => backgroundLayerId ? resolved.layers.get(backgroundLayerId) : void 0,
+    [resolved, backgroundLayerId]
+  );
+  const read = useCallback(() => {
+    const source = getBehaviour() ?? getBackground();
+    return {
+      mode: source?.getMode() ?? "auto",
+      kind: source?.getResolvedKind() ?? "light"
+    };
+  }, [getBehaviour, getBackground]);
+  useEffect(() => {
+    const { mode: m, kind: k } = read();
+    setModeState(m);
+    setKindState(k);
+  }, [read]);
+  const applyMode = useCallback(
+    (next) => {
+      getBehaviour()?.setMode(next);
+      getBackground()?.setMode(next);
+      const { mode: m, kind: k } = read();
+      setModeState(m);
+      setKindState(k);
+      onChange?.(k, m);
+    },
+    [getBehaviour, getBackground, read, onChange]
+  );
+  const setMode = useCallback((next) => applyMode(next), [applyMode]);
+  const toggle = useCallback(() => {
+    applyMode(read().kind === "dark" ? "light" : "dark");
+  }, [applyMode, read]);
+  return { mode, kind, setMode, toggle };
+}
+function useLayout(layouts, options = {}, canvas) {
+  const { layerId = "graph", fitPadding = 80 } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const keys = Object.keys(layouts);
+  const [layout, setLayout] = useState(options.initial ?? keys[0] ?? "");
+  const [isRunning, setRunning] = useState(false);
+  const activeRef = useRef(null);
+  const applyLayout = useCallback(
+    (key) => {
+      const factory = layouts[key];
+      const layer = resolved.layers.get(layerId);
+      if (!factory || !layer) return;
+      activeRef.current?.stop?.();
+      const instance = factory();
+      activeRef.current = instance;
+      setLayout(key);
+      setRunning(true);
+      Promise.resolve(instance.apply(layer)).then(() => {
+        if (activeRef.current !== instance) return;
+        resolved.camera.fitContent(layer.getBounds(), fitPadding);
+        setRunning(false);
+      }).catch(() => {
+        if (activeRef.current === instance) setRunning(false);
+      });
+    },
+    [layouts, resolved, layerId, fitPadding]
+  );
+  const didInit = useRef(false);
+  const applyInitial = options.applyInitial ?? true;
+  useEffect(() => {
+    if (didInit.current || !applyInitial || !layout) return;
+    if (!resolved.layers.has(layerId)) return;
+    didInit.current = true;
+    applyLayout(layout);
+  }, [resolved, layerId, layout, applyLayout, applyInitial]);
+  const layoutOptions = options.labels ?? Object.fromEntries(keys.map((k) => [k, k]));
+  return { layout, layoutOptions, applyLayout, isRunning };
+}
+function useSelectMode(behaviourIds, options = {}, canvas) {
+  const resolved = useResolvedCanvas(canvas);
+  const keys = Object.keys(behaviourIds);
+  const [mode, setModeState] = useState(options.initial ?? keys[0] ?? "");
+  const modeRef = useRef(mode);
+  modeRef.current = mode;
+  const setMode = useCallback(
+    (next) => {
+      for (const [key, id] of Object.entries(behaviourIds)) {
+        const behaviour = resolved.behaviours.get(id);
+        if (!behaviour) continue;
+        if (key === next) behaviour.enable();
+        else behaviour.disable();
+      }
+      setModeState(next);
+    },
+    [resolved, behaviourIds]
+  );
+  useEffect(() => {
+    setMode(modeRef.current);
+  }, [setMode]);
+  const modeOptions = options.labels ?? Object.fromEntries(keys.map((k) => [k, k]));
+  return { mode, modeOptions, setMode };
+}
+var DEFAULT_EDGE_TYPES = [
+  "straight",
+  "orth",
+  "bezier",
+  "rounded",
+  "smooth"
+];
+var DEFAULT_EDGE_TYPE_LABELS = {
+  straight: "Straight",
+  orth: "Orthogonal",
+  bezier: "Curved",
+  quadratic: "Quadratic",
+  rounded: "Rounded",
+  smooth: "Smooth",
+  manhattan: "Manhattan",
+  "bump-radial": "Bump (radial)",
+  "bump-horizontal": "Bump (horizontal)",
+  "step-radial": "Step (radial)",
+  bundle: "Bundled"
+};
+function useEdgeType(options = {}, canvas) {
+  const { layerId = "graph", initial, types = DEFAULT_EDGE_TYPES, labels } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const [edgeType, setEdgeTypeState] = useState(initial ?? types[0] ?? "straight");
+  useEffect(() => {
+    if (initial) return;
+    const layer = resolved.layers.get(layerId);
+    const current = layer?.edgeDefaults;
+    const shape = current && typeof current === "object" ? current.shape : void 0;
+    const pathType = shape && typeof shape === "object" ? shape.pathType : void 0;
+    if (pathType) setEdgeTypeState(pathType);
+  }, [resolved, layerId, initial]);
+  const setEdgeType = useCallback(
+    (next) => {
+      const layer = resolved.layers.get(layerId);
+      if (!layer) return;
+      const prevShape = layer.edgeDefaults?.shape;
+      const baseShape = prevShape && typeof prevShape === "object" ? prevShape : {};
+      const shape = { ...baseShape, pathType: next };
+      layer.setEdgeDefaults({ shape });
+      setEdgeTypeState(next);
+    },
+    [resolved, layerId]
+  );
+  const edgeTypeOptions = labels ?? Object.fromEntries(types.map((t) => [t, DEFAULT_EDGE_TYPE_LABELS[t] ?? t]));
+  return { edgeType, edgeTypeOptions, setEdgeType };
+}
+var DEFAULT_LOCK_IDS = ["pan", "drag-node"];
+function useLock(options = {}, canvas) {
+  const { behaviourIds = DEFAULT_LOCK_IDS, initialLocked = false } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const [locked, setLocked] = useState(initialLocked);
+  const setLock = useCallback(
+    (next) => {
+      for (const id of behaviourIds) {
+        const behaviour = resolved.behaviours.get(id);
+        if (!behaviour) continue;
+        if (next) behaviour.disable();
+        else behaviour.enable();
+      }
+      setLocked(next);
+    },
+    [resolved, behaviourIds]
+  );
+  const toggleLock = useCallback(() => setLock(!locked), [setLock, locked]);
+  return { locked, toggleLock, setLock };
+}
+function useTool() {
+  const ctx = useContext(ToolContext);
+  if (!ctx) {
+    throw new Error("useTool must be used within a <GraphToolProvider>.");
+  }
+  return ctx;
+}
+function useDrawHistory() {
+  const history = useContext(HistoryContext);
+  const ref = useRef(history);
+  ref.current = history;
+  const push = useCallback((op, label) => {
+    ref.current?.push({ ops: [op], label });
+  }, []);
+  const onNodeCreate = useCallback(
+    (node) => push({ kind: "addNode", node }, "add node"),
+    [push]
+  );
+  const onEdgeCreate = useCallback(
+    (edge) => push({ kind: "addEdge", edge }, "connect"),
+    [push]
+  );
+  const onErase = useCallback(
+    (removed) => {
+      const op = removed.kind === "node" ? { kind: "removeNode", node: removed.node, edges: removed.edges } : { kind: "removeEdge", edge: removed.edge };
+      push(op, "delete");
+    },
+    [push]
+  );
+  return { onNodeCreate, onEdgeCreate, onErase };
+}
+function toStringMap(data) {
+  if (!data || typeof data !== "object") return {};
+  const out = {};
+  for (const [k, v] of Object.entries(data)) {
+    if (v === null || v === void 0) continue;
+    out[k] = typeof v === "string" ? v : typeof v === "object" ? JSON.stringify(v) : String(v);
+  }
+  return out;
+}
+function useEntityEditor(options = {}, canvas) {
+  const { layerId = "graph", inspectId = "click-inspect", typeAsLabel = false } = options;
+  const resolved = useResolvedCanvas(canvas);
+  const history = useContext(HistoryContext);
+  const single = useInspectTarget({ inspectId }, canvas);
+  if (!single) return null;
+  const layer = resolved.layers.get(layerId);
+  const store = layer?.store;
+  if (!layer || !store) return null;
+  if (single.kind === "node") {
+    const node = store.getNode(single.id);
+    if (!node) return null;
+    const label = layer.resolveNodeStyle(node).labelText ?? "";
+    if (typeAsLabel) {
+      const type2 = node.type ?? label;
+      const commit3 = ({ type: nextType, data }) => {
+        const value = nextType ?? "";
+        const prior = node.style ?? {};
+        const patch = { type: value, style: { ...prior, labelText: value }, data };
+        if (history) history.transaction("edit node", (rec) => rec.updateNode(single.id, patch));
+        else store.updateNode(single.id, patch);
+      };
+      return { kind: "node", id: single.id, label: "", type: type2, data: toStringMap(node.data), commit: commit3 };
+    }
+    const commit2 = ({ label: nextLabel, data }) => {
+      const prior = node.style ?? {};
+      const patch = { style: { ...prior, labelText: nextLabel }, data };
+      if (history) history.transaction("edit node", (rec) => rec.updateNode(single.id, patch));
+      else store.updateNode(single.id, patch);
+    };
+    return { kind: "node", id: single.id, label, data: toStringMap(node.data), commit: commit2 };
+  }
+  const edge = store.getEdge(single.id);
+  if (!edge) return null;
+  const edgeLabel = layer.resolveEdgeStyle(edge).labelText ?? "";
+  const type = edge.type ?? (typeAsLabel ? edgeLabel : "");
+  const commit = ({ type: nextType, data }) => {
+    const value = nextType ?? "";
+    const patch = { data };
+    if (nextType !== void 0) patch.type = value;
+    if (typeAsLabel) {
+      const prior = edge.style ?? {};
+      patch.style = { ...prior, labelText: value };
+    }
+    if (history) history.transaction("edit edge", (rec) => rec.updateEdge(single.id, patch));
+    else store.updateEdge(single.id, patch);
+  };
+  const reverse = () => {
+    const swap = { source: edge.target, target: edge.source };
+    if (history) history.transaction("reverse edge", (rec) => rec.updateEdge(single.id, swap));
+    else store.updateEdge(single.id, swap);
+  };
+  return {
+    kind: "edge",
+    id: single.id,
+    label: "",
+    type,
+    data: toStringMap(edge.data),
+    commit,
+    reverse
+  };
+}
+function useContextMenu() {
+  const [menu, setMenu] = useState(null);
+  const close = useCallback(() => setMenu(null), []);
+  const open = useCallback((x, y, items) => {
+    setMenu({ x, y, items });
+  }, []);
+  useEffect(() => {
+    if (!menu) return;
+    const onKey = (ev) => {
+      if (ev.key === "Escape") close();
+    };
+    window.addEventListener("pointerdown", close);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", close);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [menu, close]);
+  return { menu, open, close };
+}
+function pinStyle(position, offset) {
+  const [vertical, horizontal] = position.split("-");
+  const style = { position: "absolute", [vertical]: offset };
+  if (horizontal === "center") {
+    style.left = "50%";
+    style.transform = "translateX(-50%)";
+  } else {
+    style[horizontal] = offset;
+  }
+  return style;
+}
+function Panel({
+  position = "top-left",
+  orientation = "vertical",
+  offset = 8,
+  gap = 4,
+  zIndex = 5,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { style: { ...pinStyle(position, offset), zIndex, pointerEvents: "none" }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        gap,
+        pointerEvents: "auto",
+        ...style
+      },
+      children
+    }
+  ) });
+}
+function Tooltipped({ label, side, delayDuration = 0, children }) {
+  if (label == null || label === "") return children;
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, style: { backgroundColor: "var(--color-popover)" }, children: label })
+  ] }) });
+}
+function ControlButton({
+  icon: Icon,
+  onClick,
+  title,
+  tooltipSide,
+  active = false,
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Tooltipped, { label: title, side: tooltipSide, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: active ? "default" : "ghost",
+      size: "icon",
+      "aria-label": title,
+      disabled,
+      onClick,
+      className,
+      children: /* @__PURE__ */ jsx(Icon, { size: 16 })
+    }
+  ) });
+}
+function PropertiesEditor({
+  title,
+  defaults,
+  onSubmit,
+  submitLabel = "Apply",
+  showLabel = true,
+  showType = false,
+  onReverse,
+  className
+}) {
+  const [label, setLabel] = useState(defaults?.label ?? "");
+  const [type, setType] = useState(defaults?.type ?? "");
+  const [rows, setRows] = useState(
+    () => Object.entries(defaults?.data ?? {}).map(([k, v]) => ({ k, v }))
+  );
+  const setRow = (i, patch) => setRows((rs) => rs.map((r, j) => j === i ? { ...r, ...patch } : r));
+  const removeRow = (i) => setRows((rs) => rs.filter((_, j) => j !== i));
+  const addRow = () => setRows((rs) => [...rs, { k: "", v: "" }]);
+  const apply = () => {
+    const data = {};
+    for (const { k, v } of rows) {
+      const key = k.trim();
+      if (key) data[key] = v;
+    }
+    onSubmit(showType ? { label, type, data } : { label, data });
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle, children: [
+    title && /* @__PURE__ */ jsx("div", { style: titleStyle, children: title }),
+    showLabel && /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: captionStyle, children: "Label" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          style: inputStyle,
+          value: label,
+          placeholder: "Label text",
+          onChange: (e) => setLabel(e.target.value)
+        }
+      )
+    ] }),
+    showType && /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: captionStyle, children: "Type" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          style: inputStyle,
+          value: type,
+          placeholder: "Type tag",
+          onChange: (e) => setType(e.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: captionStyle, children: "Properties" }),
+      rows.length === 0 && /* @__PURE__ */ jsx("span", { style: emptyStyle, children: "No properties yet." }),
+      rows.map((row, i) => /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            style: inputStyle,
+            value: row.k,
+            placeholder: "key",
+            onChange: (e) => setRow(i, { k: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            style: inputStyle,
+            value: row.v,
+            placeholder: "value",
+            onChange: (e) => setRow(i, { v: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            "aria-label": "Remove field",
+            onClick: () => removeRow(i),
+            children: "\u2715"
+          }
+        )
+      ] }, i)),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: addRow, children: "Add field" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: onReverse ? "space-between" : "flex-end",
+          alignItems: "center"
+        },
+        children: [
+          onReverse && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onReverse, children: "Reverse direction" }),
+          /* @__PURE__ */ jsx(Button, { onClick: apply, children: submitLabel })
+        ]
+      }
+    )
+  ] });
+}
+var cardStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 12,
+  padding: 12,
+  minWidth: 240,
+  background: "var(--color-popover)",
+  color: "var(--color-popover-foreground)",
+  border: "1px solid var(--color-border)",
+  borderRadius: 8,
+  boxShadow: "0 4px 16px rgba(0,0,0,0.18)"
+};
+var titleStyle = { fontSize: 13, fontWeight: 600, opacity: 0.85 };
+var fieldStyle = { display: "flex", flexDirection: "column", gap: 6 };
+var captionStyle = { fontSize: 12, fontWeight: 500, opacity: 0.8 };
+var rowStyle = { display: "flex", gap: 6, alignItems: "center" };
+var emptyStyle = { fontSize: 12, opacity: 0.6 };
+var inputStyle = {
+  flex: 1,
+  width: "100%",
+  height: 28,
+  padding: "0 8px",
+  fontSize: 13,
+  color: "var(--color-foreground)",
+  background: "var(--color-background)",
+  border: "1px solid var(--color-border)",
+  borderRadius: 6,
+  outline: "none"
+};
+function OptionPicker({
+  label,
+  value,
+  options,
+  icons,
+  onChange,
+  align = "start",
+  tooltip,
+  tooltipSide,
+  className
+}) {
+  const ActiveIcon = icons?.[value];
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(Tooltipped, { label: tooltip ?? label, side: tooltipSide, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: ["ring-offset-background", className].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          ActiveIcon && /* @__PURE__ */ jsx(ActiveIcon, { size: 16 }),
+          label,
+          ": ",
+          options[value] ?? value
+        ] })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align, style: { backgroundColor: "var(--color-popover)" }, children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }),
+      /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value, onValueChange: onChange, children: Object.keys(options).map((key) => {
+        const Icon = icons?.[key];
+        return /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: key, children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { size: 14 }),
+          options[key] ?? key
+        ] }) }, key);
+      }) })
+    ] })
+  ] });
+}
+function ZoomControls({
+  canvas,
+  zoomInIcon: ZoomInIcon,
+  zoomOutIcon: ZoomOutIcon,
+  showLevel = false,
+  orientation = "horizontal",
+  zoomLevel,
+  tooltipSide,
+  className
+}) {
+  const { zoom, zoomIn, zoomOut } = useZoom(canvas);
+  const resolvedLevel = zoomLevel != null ? zoomLevel : showLevel ? `${Math.round(zoom * 100)}%` : void 0;
+  const zoomInBtn = /* @__PURE__ */ jsx(Tooltipped, { label: "Zoom in", side: tooltipSide, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Zoom in", onClick: () => zoomIn(), children: /* @__PURE__ */ jsx(ZoomInIcon, { size: 16 }) }) });
+  const zoomOutBtn = /* @__PURE__ */ jsx(Tooltipped, { label: "Zoom out", side: tooltipSide, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Zoom out", onClick: () => zoomOut(), children: /* @__PURE__ */ jsx(ZoomOutIcon, { size: 16 }) }) });
+  const level = resolvedLevel != null ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        fontSize: 12,
+        fontVariantNumeric: "tabular-nums",
+        opacity: 0.8,
+        textAlign: "center",
+        minWidth: 36
+      },
+      children: resolvedLevel
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        alignItems: "center",
+        gap: 4
+      },
+      children: orientation === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        zoomOutBtn,
+        level,
+        zoomInBtn
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        zoomInBtn,
+        level,
+        zoomOutBtn
+      ] })
+    }
+  );
+}
+function LockToggle({
+  locked,
+  onToggle,
+  lockedIcon: LockedIcon,
+  unlockedIcon: UnlockedIcon,
+  tooltipSide,
+  className
+}) {
+  const Icon = locked ? LockedIcon : UnlockedIcon;
+  const label = locked ? "Unlock view" : "Lock view";
+  return /* @__PURE__ */ jsx(Tooltipped, { label, side: tooltipSide, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: locked ? "default" : "ghost",
+      size: "icon",
+      "aria-label": label,
+      onClick: onToggle,
+      className,
+      children: /* @__PURE__ */ jsx(Icon, { size: 16 })
+    }
+  ) });
+}
+function ClearButton({
+  icon: Icon,
+  canvas,
+  layerId = "graph",
+  label = "Clear",
+  tooltipSide,
+  className
+}) {
+  const { clear } = useClearGraph(layerId, canvas);
+  return /* @__PURE__ */ jsx(Tooltipped, { label, side: tooltipSide, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: () => clear(), className, children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { size: 16 }) : null,
+    label
+  ] }) });
+}
+function FitContentButton({
+  icon: Icon,
+  canvas,
+  layerId = "graph",
+  title = "Fit to content",
+  tooltipSide,
+  className
+}) {
+  const { fitContent } = useFitContent(layerId, canvas);
+  return /* @__PURE__ */ jsx(Tooltipped, { label: title, side: tooltipSide, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      "aria-label": title,
+      onClick: () => fitContent(),
+      className,
+      children: /* @__PURE__ */ jsx(Icon, { size: 16 })
+    }
+  ) });
+}
+var DEFAULT_PRESETS = [25, 50, 75, 100, 125, 150, 200, 300, 400];
+function ZoomPicker({
+  canvas,
+  layerId = "graph",
+  presets = DEFAULT_PRESETS,
+  showFit = true,
+  fitLabel = "Fit / Reset View",
+  title = "Zoom level",
+  tooltipSide,
+  className
+}) {
+  const { zoom, setZoom } = useZoom(canvas);
+  const { fitContent } = useFitContent(layerId, canvas);
+  const currentPct = String(Math.round(zoom * 100));
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(Tooltipped, { label: title, side: tooltipSide, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", "aria-label": title, className, children: [
+      currentPct,
+      "% \u25BE"
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { style: { backgroundColor: "var(--color-popover)" }, children: [
+      showFit && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: () => fitContent(), children: fitLabel }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+      ] }),
+      /* @__PURE__ */ jsx(
+        DropdownMenuRadioGroup,
+        {
+          value: currentPct,
+          onValueChange: (v) => setZoom(Number(v) / 100),
+          children: presets.map((pct) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: String(pct), children: [
+            pct,
+            "%"
+          ] }, pct))
+        }
+      )
+    ] })
+  ] });
+}
+function UndoButton({ icon, title = "Undo", tooltipSide, canvas, className }) {
+  const { undo, canUndo } = useHistory({}, canvas);
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon,
+      title,
+      tooltipSide,
+      onClick: undo,
+      disabled: !canUndo,
+      className
+    }
+  );
+}
+function RedoButton({ icon, title = "Redo", tooltipSide, canvas, className }) {
+  const { redo, canRedo } = useHistory({}, canvas);
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon,
+      title,
+      tooltipSide,
+      onClick: redo,
+      disabled: !canRedo,
+      className
+    }
+  );
+}
+function RedrawButton({
+  icon,
+  title = "Redraw",
+  tooltipSide,
+  layerId = "graph",
+  canvas,
+  className
+}) {
+  const { redraw } = useHistory({ layerId }, canvas);
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon,
+      title,
+      tooltipSide,
+      onClick: redraw,
+      className
+    }
+  );
+}
+function CutButton({
+  icon,
+  title = "Cut",
+  tooltipSide,
+  clickSelectId,
+  canvas,
+  className
+}) {
+  const { cut, hasSelection } = useClipboard(
+    clickSelectId ? { clickSelectId } : {},
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon,
+      title,
+      tooltipSide,
+      onClick: cut,
+      disabled: !hasSelection,
+      className
+    }
+  );
+}
+function CopyButton({
+  icon,
+  title = "Copy",
+  tooltipSide,
+  clickSelectId,
+  canvas,
+  className
+}) {
+  const { copy, hasSelection } = useClipboard(
+    clickSelectId ? { clickSelectId } : {},
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon,
+      title,
+      tooltipSide,
+      onClick: copy,
+      disabled: !hasSelection,
+      className
+    }
+  );
+}
+function PasteButton({
+  icon,
+  title = "Paste",
+  tooltipSide,
+  clickSelectId,
+  canvas,
+  className
+}) {
+  const { paste, canPaste } = useClipboard(
+    clickSelectId ? { clickSelectId } : {},
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon,
+      title,
+      tooltipSide,
+      onClick: paste,
+      disabled: !canPaste,
+      className
+    }
+  );
+}
+function DeleteSelectionButton({
+  icon,
+  title = "Delete selection",
+  tooltipSide,
+  clickSelectId,
+  canvas,
+  className
+}) {
+  const { remove, hasSelection } = useClipboard(
+    clickSelectId ? { clickSelectId } : {},
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon,
+      title,
+      tooltipSide,
+      onClick: remove,
+      disabled: !hasSelection,
+      className
+    }
+  );
+}
+function GridToggle({
+  icon,
+  title = "Toggle grid",
+  tooltipSide,
+  backgroundLayerId,
+  patternType,
+  canvas,
+  className
+}) {
+  const { showGrid, toggleGrid } = useGrid(
+    { ...backgroundLayerId ? { backgroundLayerId } : {}, ...patternType ? { patternType } : {} },
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon,
+      title,
+      tooltipSide,
+      onClick: toggleGrid,
+      active: showGrid,
+      className
+    }
+  );
+}
+function ThemeToggle({
+  lightIcon,
+  darkIcon,
+  title,
+  tooltipSide,
+  behaviourId,
+  backgroundLayerId,
+  onChange,
+  canvas,
+  className
+}) {
+  const { kind, toggle } = useTheme(
+    {
+      ...behaviourId ? { behaviourId } : {},
+      ...backgroundLayerId ? { backgroundLayerId } : {},
+      ...onChange ? { onChange } : {}
+    },
+    canvas
+  );
+  const dark = kind === "dark";
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon: dark ? darkIcon : lightIcon,
+      title: title ?? (dark ? "Switch to light theme" : "Switch to dark theme"),
+      tooltipSide,
+      onClick: toggle,
+      active: dark,
+      className
+    }
+  );
+}
+function LockButton({
+  lockedIcon,
+  unlockedIcon,
+  behaviourIds,
+  initialLocked,
+  tooltipSide,
+  canvas,
+  className
+}) {
+  const { locked, toggleLock } = useLock(
+    {
+      ...behaviourIds ? { behaviourIds } : {},
+      ...initialLocked !== void 0 ? { initialLocked } : {}
+    },
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    LockToggle,
+    {
+      locked,
+      onToggle: toggleLock,
+      lockedIcon,
+      unlockedIcon,
+      tooltipSide,
+      className
+    }
+  );
+}
+function LayoutPicker({
+  layouts,
+  label = "Layout",
+  layerId,
+  fitPadding,
+  initial,
+  labels,
+  align,
+  tooltipSide,
+  canvas,
+  className
+}) {
+  const { layout, layoutOptions, applyLayout } = useLayout(
+    layouts,
+    {
+      ...layerId ? { layerId } : {},
+      ...fitPadding !== void 0 ? { fitPadding } : {},
+      ...initial ? { initial } : {},
+      ...labels ? { labels } : {}
+    },
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    OptionPicker,
+    {
+      label,
+      value: layout,
+      options: layoutOptions,
+      onChange: applyLayout,
+      align,
+      tooltipSide,
+      className
+    }
+  );
+}
+function SelectModePicker({
+  behaviourIds,
+  label = "Select",
+  initial,
+  labels,
+  icons,
+  align,
+  tooltipSide,
+  canvas,
+  className
+}) {
+  const { mode, modeOptions, setMode } = useSelectMode(
+    behaviourIds,
+    { ...initial ? { initial } : {}, ...labels ? { labels } : {} },
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    OptionPicker,
+    {
+      label,
+      value: mode,
+      options: modeOptions,
+      icons,
+      onChange: setMode,
+      align,
+      tooltipSide,
+      className
+    }
+  );
+}
+function EdgeTypePicker({
+  layerId,
+  label = "Edge",
+  initial,
+  types,
+  labels,
+  icons,
+  align,
+  tooltipSide,
+  canvas,
+  className
+}) {
+  const { edgeType, edgeTypeOptions, setEdgeType } = useEdgeType(
+    {
+      ...layerId ? { layerId } : {},
+      ...initial ? { initial } : {},
+      ...types ? { types } : {},
+      ...labels ? { labels } : {}
+    },
+    canvas
+  );
+  return /* @__PURE__ */ jsx(
+    OptionPicker,
+    {
+      label,
+      value: edgeType,
+      options: edgeTypeOptions,
+      icons,
+      onChange: setEdgeType,
+      align,
+      tooltipSide,
+      className
+    }
+  );
+}
+function ContextMenuOverlay({ x, y, items, zIndex = 1e3, style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { position: "absolute", left: x, top: y, zIndex, ...style },
+      onPointerDown: (ev) => ev.stopPropagation(),
+      onContextMenu: (ev) => ev.preventDefault(),
+      children: /* @__PURE__ */ jsx(NestedMenu, { menuItems: items })
+    }
+  );
+}
+function CanvasControlsToolbar({
+  position = "bottom-left",
+  orientation = "vertical",
+  fitLayerId = "graph",
+  showZoom = true,
+  showZoomLevel = false,
+  showFit = true,
+  icons,
+  locked,
+  onToggleLock,
+  bare = false,
+  canvas,
+  children,
+  className
+}) {
+  const showLock = locked !== void 0 && onToggleLock && icons.locked && icons.unlocked;
+  const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    showZoom && /* @__PURE__ */ jsx(
+      ZoomControls,
+      {
+        orientation,
+        canvas,
+        zoomInIcon: icons.zoomIn,
+        zoomOutIcon: icons.zoomOut,
+        showLevel: showZoomLevel
+      }
+    ),
+    showFit && /* @__PURE__ */ jsx(FitContentButton, { icon: icons.fit, canvas, layerId: fitLayerId }),
+    showLock && /* @__PURE__ */ jsx(
+      LockToggle,
+      {
+        locked,
+        onToggle: onToggleLock,
+        lockedIcon: icons.locked,
+        unlockedIcon: icons.unlocked
+      }
+    ),
+    children
+  ] });
+  const nav = orientation === "vertical" ? /* @__PURE__ */ jsx(NavVertical, { top: controls, className }) : /* @__PURE__ */ jsx(NavHorizontal, { left: controls, className });
+  if (bare) return nav;
+  return /* @__PURE__ */ jsx(Panel, { position, orientation, children: nav });
+}
+function GraphToolbar({
+  layout,
+  layoutOptions,
+  onLayoutChange,
+  selectMode,
+  selectModeOptions,
+  onSelectModeChange,
+  edgeTypeLayerId = "graph",
+  edgeTypes,
+  edgeTypeLabels,
+  edgeTypeIcons,
+  clearLayerId = "graph",
+  clearIcon,
+  canvas,
+  position = "top-center",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Panel, { position, orientation: "horizontal", children: /* @__PURE__ */ jsx(
+    NavHorizontal,
+    {
+      className,
+      center: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx(
+          OptionPicker,
+          {
+            label: "Layout",
+            value: layout,
+            options: layoutOptions,
+            onChange: onLayoutChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          OptionPicker,
+          {
+            label: "Select",
+            value: selectMode,
+            options: selectModeOptions,
+            onChange: onSelectModeChange
+          }
+        ),
+        edgeTypeLayerId != null && /* @__PURE__ */ jsx(
+          EdgeTypePicker,
+          {
+            layerId: edgeTypeLayerId,
+            ...edgeTypes ? { types: edgeTypes } : {},
+            ...edgeTypeLabels ? { labels: edgeTypeLabels } : {},
+            ...edgeTypeIcons ? { icons: edgeTypeIcons } : {},
+            canvas
+          }
+        ),
+        /* @__PURE__ */ jsx(ClearButton, { icon: clearIcon, layerId: clearLayerId, canvas })
+      ] })
+    }
+  ) });
+}
+function HistoryToolbar({
+  icons,
+  position = "top-left",
+  orientation = "horizontal",
+  showRedraw = true,
+  layerId,
+  bare = false,
+  canvas,
+  className
+}) {
+  const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(UndoButton, { icon: icons.undo, canvas }),
+    /* @__PURE__ */ jsx(RedoButton, { icon: icons.redo, canvas }),
+    showRedraw && icons.redraw && /* @__PURE__ */ jsx(RedrawButton, { icon: icons.redraw, layerId, canvas })
+  ] });
+  const nav = orientation === "vertical" ? /* @__PURE__ */ jsx(NavVertical, { top: controls, className }) : /* @__PURE__ */ jsx(NavHorizontal, { left: controls, className });
+  if (bare) return nav;
+  return /* @__PURE__ */ jsx(Panel, { position, orientation, children: nav });
+}
+function EditToolbar({
+  icons,
+  position = "top-left",
+  orientation = "horizontal",
+  showClear = true,
+  clickSelectId,
+  layerId,
+  bare = false,
+  canvas,
+  className
+}) {
+  const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CutButton, { icon: icons.cut, clickSelectId, canvas }),
+    /* @__PURE__ */ jsx(CopyButton, { icon: icons.copy, clickSelectId, canvas }),
+    /* @__PURE__ */ jsx(PasteButton, { icon: icons.paste, clickSelectId, canvas }),
+    /* @__PURE__ */ jsx(
+      DeleteSelectionButton,
+      {
+        icon: icons.delete,
+        clickSelectId,
+        canvas
+      }
+    ),
+    showClear && /* @__PURE__ */ jsx(ClearButton, { icon: icons.clear, layerId, canvas })
+  ] });
+  const nav = orientation === "vertical" ? /* @__PURE__ */ jsx(NavVertical, { top: controls, className }) : /* @__PURE__ */ jsx(NavHorizontal, { left: controls, className });
+  if (bare) return nav;
+  return /* @__PURE__ */ jsx(Panel, { position, orientation, children: nav });
+}
+function ViewToolbar({
+  icons,
+  position = "bottom-left",
+  orientation = "vertical",
+  showZoom = true,
+  showZoomLevel = false,
+  showZoomPicker = true,
+  showFit = true,
+  showLock = true,
+  layerId = "graph",
+  lockBehaviourIds,
+  bare = false,
+  canvas,
+  className
+}) {
+  const lockReady = showLock && icons.locked && icons.unlocked;
+  const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    showZoom && /* @__PURE__ */ jsx(
+      ZoomControls,
+      {
+        orientation,
+        canvas,
+        zoomInIcon: icons.zoomIn,
+        zoomOutIcon: icons.zoomOut,
+        showLevel: showZoomLevel
+      }
+    ),
+    showZoomPicker && /* @__PURE__ */ jsx(ZoomPicker, { canvas, layerId }),
+    showFit && /* @__PURE__ */ jsx(FitContentButton, { icon: icons.fit, canvas, layerId }),
+    lockReady && /* @__PURE__ */ jsx(
+      LockButton,
+      {
+        lockedIcon: icons.locked,
+        unlockedIcon: icons.unlocked,
+        behaviourIds: lockBehaviourIds,
+        canvas
+      }
+    )
+  ] });
+  const nav = orientation === "vertical" ? /* @__PURE__ */ jsx(NavVertical, { top: controls, className }) : /* @__PURE__ */ jsx(NavHorizontal, { left: controls, className });
+  if (bare) return nav;
+  return /* @__PURE__ */ jsx(Panel, { position, orientation, children: nav });
+}
+function GridToolbar({
+  icons,
+  position = "bottom-right",
+  orientation = "horizontal",
+  backgroundLayerId,
+  patternType,
+  bare = false,
+  canvas,
+  className
+}) {
+  const controls = /* @__PURE__ */ jsx(
+    GridToggle,
+    {
+      icon: icons.grid,
+      backgroundLayerId,
+      patternType,
+      canvas
+    }
+  );
+  const nav = orientation === "vertical" ? /* @__PURE__ */ jsx(NavVertical, { top: controls, className }) : /* @__PURE__ */ jsx(NavHorizontal, { left: controls, className });
+  if (bare) return nav;
+  return /* @__PURE__ */ jsx(Panel, { position, orientation, children: nav });
+}
+function GraphLayoutToolbar({
+  layouts,
+  selectModeBehaviourIds,
+  layoutLabels,
+  selectModeLabels,
+  selectModeIcons,
+  initialLayout,
+  initialSelectMode,
+  layerId,
+  position = "top-center",
+  bare = false,
+  canvas,
+  className
+}) {
+  const nav = /* @__PURE__ */ jsx(
+    NavHorizontal,
+    {
+      className,
+      center: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx(
+          LayoutPicker,
+          {
+            layouts,
+            labels: layoutLabels,
+            initial: initialLayout,
+            layerId,
+            canvas
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", style: { alignSelf: "center", height: 24 } }),
+        /* @__PURE__ */ jsx(
+          SelectModePicker,
+          {
+            behaviourIds: selectModeBehaviourIds,
+            labels: selectModeLabels,
+            icons: selectModeIcons,
+            initial: initialSelectMode,
+            canvas
+          }
+        )
+      ] })
+    }
+  );
+  if (bare) return nav;
+  return /* @__PURE__ */ jsx(Panel, { position, orientation: "horizontal", children: nav });
+}
+var DEFAULT_TOOLS = ["select", "add", "connect", "delete"];
+var DEFAULT_LABELS = {
+  select: "Select",
+  add: "Add node",
+  connect: "Connect",
+  delete: "Delete"
+};
+function ModellerToolbar({
+  icons,
+  tools = DEFAULT_TOOLS,
+  labels,
+  nodeKinds,
+  nodeKindIcons,
+  showHistory = true,
+  showClear = true,
+  layerId,
+  position = "top-center",
+  orientation = "horizontal",
+  bare = false,
+  canvas,
+  className
+}) {
+  const { tool, setTool, nodeKind, setNodeKind } = useTool();
+  const tipSide = orientation === "vertical" ? "right" : "bottom";
+  const label = (t) => labels?.[t] ?? DEFAULT_LABELS[t];
+  const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    tools.map((t) => /* @__PURE__ */ jsx(
+      ControlButton,
+      {
+        icon: icons[t],
+        title: label(t),
+        tooltipSide: tipSide,
+        active: tool === t,
+        onClick: () => setTool(t)
+      },
+      t
+    )),
+    tool === "add" && nodeKinds && Object.keys(nodeKinds).length > 0 && /* @__PURE__ */ jsx(
+      OptionPicker,
+      {
+        label: "Shape",
+        value: nodeKind,
+        options: nodeKinds,
+        ...nodeKindIcons ? { icons: nodeKindIcons } : {},
+        onChange: setNodeKind,
+        tooltipSide: tipSide
+      }
+    ),
+    showHistory && icons.undo && icons.redo && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(UndoButton, { icon: icons.undo, tooltipSide: tipSide, canvas }),
+      /* @__PURE__ */ jsx(RedoButton, { icon: icons.redo, tooltipSide: tipSide, canvas })
+    ] }),
+    showClear && /* @__PURE__ */ jsx(ClearButton, { icon: icons.clear, layerId, tooltipSide: tipSide, canvas })
+  ] });
+  const nav = orientation === "vertical" ? /* @__PURE__ */ jsx(NavVertical, { top: controls, className }) : /* @__PURE__ */ jsx(NavHorizontal, { left: controls, className });
+  if (bare) return nav;
+  return /* @__PURE__ */ jsx(Panel, { position, orientation, children: nav });
+}
+function InspectorPanel({
+  layerId,
+  inspectId,
+  position = "top-right",
+  showLabel,
+  typeAsLabel = false,
+  nodeTitle = "Node",
+  edgeTitle = "Edge",
+  bare = false,
+  canvas,
+  className
+}) {
+  const opts = {};
+  if (layerId !== void 0) opts.layerId = layerId;
+  if (inspectId !== void 0) opts.inspectId = inspectId;
+  if (typeAsLabel) opts.typeAsLabel = true;
+  const target = useEntityEditor(opts, canvas);
+  if (!target) return null;
+  const isEdge = target.kind === "edge";
+  const showTypeField = typeAsLabel || isEdge;
+  const showLabelField = !showTypeField && (showLabel ?? true);
+  const editor = /* @__PURE__ */ jsx(
+    PropertiesEditor,
+    {
+      title: isEdge ? edgeTitle : nodeTitle,
+      defaults: { label: target.label, type: target.type, data: target.data },
+      onSubmit: target.commit,
+      showLabel: showLabelField,
+      ...showTypeField ? { showType: true } : {},
+      ...isEdge && target.reverse ? { onReverse: target.reverse } : {},
+      ...className !== void 0 ? { className } : {}
+    },
+    `${target.kind}:${target.id}`
+  );
+  if (bare) return editor;
+  return /* @__PURE__ */ jsx(Panel, { position, orientation: "vertical", children: editor });
+}
+function withAutoClose(items, close) {
+  return items.map((item) => {
+    const next = { ...item };
+    if (item.children) next.children = withAutoClose(item.children, close);
+    if (item.onClick) {
+      const original = item.onClick;
+      next.onClick = () => {
+        original();
+        close();
+      };
+    }
+    return next;
+  });
+}
+function GraphContextMenuRoot({
+  target,
+  id,
+  layerId = "graph",
+  enabled = true,
+  zIndex,
+  style,
+  autoClose = true,
+  state = null,
+  build
+}) {
+  const canvas = useCanvas();
+  const { menu, open, close } = useContextMenu();
+  const onContextMenu = useCallback(
+    (event) => {
+      const base = {
+        world: event.world,
+        screen: event.screen,
+        canvas,
+        close
+      };
+      const items = build(event, base);
+      open(event.screen.x, event.screen.y, autoClose ? withAutoClose(items, close) : items);
+    },
+    [canvas, build, autoClose, open, close]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ContextMenuBehaviour,
+      {
+        id,
+        layerId,
+        enabled,
+        targets: [target],
+        state,
+        onContextMenu
+      }
+    ),
+    menu && /* @__PURE__ */ jsx(ContextMenuOverlay, { x: menu.x, y: menu.y, items: menu.items, zIndex, style })
+  ] });
+}
+function GraphNodeContextMenu({
+  items,
+  id = "node-context-menu",
+  ...common
+}) {
+  const build = useCallback(
+    (event, base) => items({ ...base, id: event.id, data: event.data }),
+    [items]
+  );
+  return /* @__PURE__ */ jsx(GraphContextMenuRoot, { target: "node", id, build, ...common });
+}
+function GraphEdgeContextMenu({
+  items,
+  id = "edge-context-menu",
+  ...common
+}) {
+  const build = useCallback(
+    (event, base) => items({ ...base, id: event.id, data: event.data }),
+    [items]
+  );
+  return /* @__PURE__ */ jsx(GraphContextMenuRoot, { target: "edge", id, build, ...common });
+}
+function GraphBackgroundContextMenu({
+  items,
+  id = "background-context-menu",
+  ...common
+}) {
+  const build = useCallback(
+    (_event, base) => items(base),
+    [items]
+  );
+  return /* @__PURE__ */ jsx(GraphContextMenuRoot, { target: "canvas", id, build, ...common });
+}
+
+export { BackgroundLayer, BrushSelectBehaviour, Canvas, CanvasContext, CanvasControlsToolbar, ClearButton, ClickInspectBehaviour, ClickSelectBehaviour, ClipboardContext, CollapseExpandBehaviour, ContextMenuBehaviour, ContextMenuOverlay, ControlButton, CopyButton, CreateNodeBehaviour, CutButton, D3ForceLayout, DEFAULT_EDGE_TYPES, DEFAULT_EDGE_TYPE_LABELS, DegreeSizeBehaviour, DeleteSelectionButton, DragNodeBehaviour, DragPanBehaviour, DrawEdgeBehaviour, EdgeSizeLODBehaviour, EdgeTypePicker, EditToolbar, EraseBehaviour, FitContentButton, GraphBackgroundContextMenu, GraphClipboardProvider, GraphEdgeContextMenu, GraphHistoryProvider, GraphLayer, GraphLayoutToolbar, GraphNodeContextMenu, GraphToolProvider, GraphToolbar, GridToggle, GridToolbar, HistoryContext, HistoryToolbar, HoverActivateBehaviour, InspectorPanel, KeyboardCameraInputBehaviour, LabelCollisionBehaviour, LabelResolutionLODBehaviour, LassoSelectBehaviour, LayoutPicker, LockButton, LockToggle, MiniMapLayer, ModellerToolbar, NodeResizeBehaviour, NodeSizeLODBehaviour, OptionPicker, Panel, ParallelEdgeBehaviour, PasteButton, PinchZoomBehaviour, PropertiesEditor, RedoButton, RedrawButton, ResponsiveThemeBehaviour, SelectModePicker, ThemeToggle, ToolContext, Tooltipped, UndoButton, ViewToolbar, WheelZoomBehaviour, ZoomControls, ZoomPicker, useCamera, useCanvas, useCanvasEvent, useClearGraph, useClipboard, useContextMenu, useDrawHistory, useEdgeType, useEntityEditor, useFitContent, useGrid, useHistory, useInspectTarget, useLayout, useLock, useSelectMode, useSelection, useTheme, useTool, useZoom };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map