@petrarca/sonnet-graph 0.4.1 → 0.5.0

package/dist/index.js

@@ -78,6 +78,7 @@ function extractDisplayLabel(item, displayConfig) {
 }
 
 // src/graph/enrichment.ts
+var SELECTION_COLOR = "#2d64d2";
 var BASE_COLORS = [
   "#f94144",
   "#118ab2",
@@ -399,6 +400,8 @@ function createGraphFilterStore() {
       const now = !get().allLabelsDisabled;
       set({ allLabelsDisabled: now, nodeLabelFilters: [] });
     },
+    setAllLabelsDisabled: (disabled) => set({ allLabelsDisabled: disabled }),
+    setNodeFilterState: (disabled, filters) => set({ allLabelsDisabled: disabled, nodeLabelFilters: filters }),
     toggleEdgeLabelFilter: (label, allAvailableLabels, edgeToNodeLabels) => {
       const getNodeLabelUpdate = (edgeLabel) => {
         if (!edgeToNodeLabels) return null;
@@ -449,12 +452,12 @@ function collectReachable(startId, direction, allEdges, includeStart) {
     for (const edge of allEdges) {
       const srcId = String(edge.start_id_);
       const tgtId = String(edge.end_id_);
-      const edgeId = String(edge.id_);
+      const edgeId2 = String(edge.id_);
       if (direction === "in" && tgtId === currentId) {
-        edges.add(edgeId);
+        edges.add(edgeId2);
         traverse(srcId, false);
       } else if (direction === "out" && srcId === currentId) {
-        edges.add(edgeId);
+        edges.add(edgeId2);
         traverse(tgtId, false);
       }
     }
@@ -494,24 +497,24 @@ function buildFocusSet(referenceNodeId, direction, edgeLabel, allEdges) {
   }
   return focusNodeIds;
 }
-function handleExistingNode(nodeId, nodeIdStr, existingNodes, autoFocus, graphFocusStore) {
-  const existingNode = existingNodes.find((n) => n.id_ === nodeId);
+function handleExistingNode(nodeId2, nodeIdStr, existingNodes, autoFocus, graphFocusStore) {
+  const existingNode = existingNodes.find((n) => n.id_ === nodeId2);
   if (!existingNode) return false;
   if (autoFocus) {
-    devLog3("[GraphExploration] Node already in graph, focusing", { nodeId });
+    devLog3("[GraphExploration] Node already in graph, focusing", { nodeId: nodeId2 });
     graphFocusStore.getState().requestFocus(nodeIdStr, "node", false);
   } else {
     devLog3("[GraphExploration] Node already in graph, skipping focus", {
-      nodeId
+      nodeId: nodeId2
     });
   }
   return true;
 }
-async function fetchAndEnrichNode(nodeId, existingNodes, stores) {
-  devLog3("[GraphExploration] Fetching node from backend", { nodeId });
-  const result = await stores.getNodes([nodeId]);
+async function fetchAndEnrichNode(nodeId2, existingNodes, stores) {
+  devLog3("[GraphExploration] Fetching node from backend", { nodeId: nodeId2 });
+  const result = await stores.getNodes([nodeId2]);
   if (result.length === 0) {
-    throw new Error(`Node ${nodeId} not found`);
+    throw new Error(`Node ${nodeId2} not found`);
   }
   const colorPalette = buildColorPaletteFromNodes([
     ...existingNodes,
@@ -523,27 +526,27 @@ async function fetchAndEnrichNode(nodeId, existingNodes, stores) {
     stores.getLabelDisplayMap?.()
   );
   devLog3("[GraphExploration] Enriched nodes", {
-    nodeId,
+    nodeId: nodeId2,
     enrichedCount: enrichedNodes.length
   });
   stores.graphData.getState().mergeExpandedData(enrichedNodes, []);
   return enrichedNodes;
 }
-function ensureNodeLabelInFilters(enrichedNodes, nodeId, graphFilterStore) {
+function ensureNodeLabelInFilters(enrichedNodes, nodeId2, graphFilterStore) {
   const addedNode = enrichedNodes[0];
   if (!addedNode) return;
   const { nodeLabelFilters: currentFilters } = graphFilterStore.getState();
   const nodeLabel = addedNode.label_;
   if (currentFilters.length > 0 && !currentFilters.includes(nodeLabel)) {
     devLog3("[GraphExploration] Adding node label to active filters", {
-      nodeId,
+      nodeId: nodeId2,
       nodeLabel,
       currentFilters
     });
     graphFilterStore.getState().setNodeLabelFilters([...currentFilters, nodeLabel]);
   }
 }
-function mergeExpandedLabelsIntoFilters(stores, enrichedNodes, nodeId) {
+function mergeExpandedLabelsIntoFilters(stores, enrichedNodes, nodeId2) {
   const graphFilterState = stores.graphFilter.getState();
   const currentFilters = graphFilterState.nodeLabelFilters;
   if (currentFilters.length === 0 || enrichedNodes.length === 0) return;
@@ -553,7 +556,7 @@ function mergeExpandedLabelsIntoFilters(stores, enrichedNodes, nodeId) {
   );
   if (labelsToAdd.length > 0) {
     devLog3("[GraphExploration] Adding expanded node labels to active filters", {
-      nodeId,
+      nodeId: nodeId2,
       labelsToAdd,
       currentFilters
     });
@@ -577,10 +580,10 @@ function createGraphExplorationStore(deps) {
         isFocusMode: true
       });
     },
-    setFocusModeWithNeighborhood: (nodeId) => {
+    setFocusModeWithNeighborhood: (nodeId2) => {
       const edges = stores.graphData.getState().edges;
       const connectedNodeIds = /* @__PURE__ */ new Set();
-      const nodeIdStr = String(nodeId);
+      const nodeIdStr = String(nodeId2);
       for (const edge of edges) {
         const sourceId = String(edge.start_id_);
         const targetId = String(edge.end_id_);
@@ -628,19 +631,19 @@ function createGraphExplorationStore(deps) {
       });
       set({ hiddenElementIds: updated });
     },
-    hideNodeIncoming: (nodeId) => {
+    hideNodeIncoming: (nodeId2) => {
       devLog3("[GraphExploration] hideNodeIncoming - hiding predecessors", {
-        nodeId
+        nodeId: nodeId2
       });
       const { edges } = stores.graphData.getState();
       const { nodes: nodesToHide, edges: edgesToHide } = collectReachable(
-        nodeId,
+        nodeId2,
         "in",
         edges,
         false
       );
       devLog3("[GraphExploration] hideNodeIncoming - traversal complete", {
-        nodeId,
+        nodeId: nodeId2,
         nodesToHide: nodesToHide.size,
         edgesToHide: edgesToHide.size
       });
@@ -651,19 +654,19 @@ function createGraphExplorationStore(deps) {
         devLog3("[GraphExploration] hideNodeIncoming - no predecessors found");
       }
     },
-    hideNodeOutgoing: (nodeId) => {
+    hideNodeOutgoing: (nodeId2) => {
       devLog3("[GraphExploration] hideNodeOutgoing - hiding successors", {
-        nodeId
+        nodeId: nodeId2
       });
       const { edges } = stores.graphData.getState();
       const { nodes: nodesToHide, edges: edgesToHide } = collectReachable(
-        nodeId,
+        nodeId2,
         "out",
         edges,
         false
       );
       devLog3("[GraphExploration] hideNodeOutgoing - traversal complete", {
-        nodeId,
+        nodeId: nodeId2,
         nodesToHide: nodesToHide.size,
         edgesToHide: edgesToHide.size
       });
@@ -674,21 +677,21 @@ function createGraphExplorationStore(deps) {
         devLog3("[GraphExploration] hideNodeOutgoing - no successors found");
       }
     },
-    hideEdgeForwardPath: (edgeId) => {
+    hideEdgeForwardPath: (edgeId2) => {
       devLog3(
         "[GraphExploration] hideEdgeForwardPath - hiding edge + target + downstream",
-        { edgeId }
+        { edgeId: edgeId2 }
       );
       const { edges } = stores.graphData.getState();
-      const edge = edges.find((e) => String(e.id_) === edgeId);
+      const edge = edges.find((e) => String(e.id_) === edgeId2);
       if (!edge) {
         devLog3("[GraphExploration] hideEdgeForwardPath - edge not found", {
-          edgeId
+          edgeId: edgeId2
         });
         return;
       }
       const targetNodeId = String(edge.end_id_);
-      get().hideElements([edgeId]);
+      get().hideElements([edgeId2]);
       const { nodes: nodesToHide, edges: edgesToHide } = collectReachable(
         targetNodeId,
         "out",
@@ -696,28 +699,28 @@ function createGraphExplorationStore(deps) {
         true
       );
       devLog3("[GraphExploration] hideEdgeForwardPath - traversal complete", {
-        edgeId,
+        edgeId: edgeId2,
         nodesToHide: nodesToHide.size,
         edgesToHide: edgesToHide.size
       });
       const allElementsToHide = [...nodesToHide, ...edgesToHide];
       if (allElementsToHide.length > 0) get().hideElements(allElementsToHide);
     },
-    hideEdgeReversePath: (edgeId) => {
+    hideEdgeReversePath: (edgeId2) => {
       devLog3(
         "[GraphExploration] hideEdgeReversePath - hiding edge + source + upstream",
-        { edgeId }
+        { edgeId: edgeId2 }
       );
       const { edges } = stores.graphData.getState();
-      const edge = edges.find((e) => String(e.id_) === edgeId);
+      const edge = edges.find((e) => String(e.id_) === edgeId2);
       if (!edge) {
         devLog3("[GraphExploration] hideEdgeReversePath - edge not found", {
-          edgeId
+          edgeId: edgeId2
         });
         return;
       }
       const sourceNodeId = String(edge.start_id_);
-      get().hideElements([edgeId]);
+      get().hideElements([edgeId2]);
       const { nodes: nodesToHide, edges: edgesToHide } = collectReachable(
         sourceNodeId,
         "in",
@@ -725,29 +728,29 @@ function createGraphExplorationStore(deps) {
         true
       );
       devLog3("[GraphExploration] hideEdgeReversePath - traversal complete", {
-        edgeId,
+        edgeId: edgeId2,
         nodesToHide: nodesToHide.size,
         edgesToHide: edgesToHide.size
       });
       const allElementsToHide = [...nodesToHide, ...edgesToHide];
       if (allElementsToHide.length > 0) get().hideElements(allElementsToHide);
     },
-    focusOnEdgeType: (edgeId) => {
+    focusOnEdgeType: (edgeId2) => {
       devLog3(
         "[GraphExploration] focusOnEdgeType - show only edges of this type and connected nodes",
-        { edgeId }
+        { edgeId: edgeId2 }
       );
       const graphData = stores.graphData.getState();
-      const edge = graphData.edges.find((e) => String(e.id_) === edgeId);
+      const edge = graphData.edges.find((e) => String(e.id_) === edgeId2);
       if (!edge) {
         devLog3("[GraphExploration] focusOnEdgeType - edge not found", {
-          edgeId
+          edgeId: edgeId2
         });
         return;
       }
       const edgeLabel = edge.label_;
       devLog3("[GraphExploration] focusOnEdgeType - filtering by label", {
-        edgeId,
+        edgeId: edgeId2,
         edgeLabel
       });
       const edgesOfType = graphData.edges.filter((e) => e.label_ === edgeLabel);
@@ -761,9 +764,9 @@ function createGraphExplorationStore(deps) {
       const nodesToHide = [];
       const edgesToHide = [];
       for (const node of graphData.nodes) {
-        const nodeId = String(node.id_);
-        if (!connectedNodeIds.has(nodeId)) {
-          nodesToHide.push(nodeId);
+        const nodeId2 = String(node.id_);
+        if (!connectedNodeIds.has(nodeId2)) {
+          nodesToHide.push(nodeId2);
         }
       }
       for (const e of graphData.edges) {
@@ -784,16 +787,16 @@ function createGraphExplorationStore(deps) {
         get().hideElements(allElementsToHide);
       }
     },
-    focusEdge: (edgeId) => {
+    focusEdge: (edgeId2) => {
       devLog3(
         "[GraphExploration] focusEdge - unified focus with auto-direction detection",
-        { edgeId }
+        { edgeId: edgeId2 }
       );
       const graphData = stores.graphData.getState();
       const selection = stores.selection.getState();
-      const edge = graphData.edges.find((e) => String(e.id_) === edgeId);
+      const edge = graphData.edges.find((e) => String(e.id_) === edgeId2);
       if (!edge) {
-        devLog3("[GraphExploration] focusEdge - edge not found", { edgeId });
+        devLog3("[GraphExploration] focusEdge - edge not found", { edgeId: edgeId2 });
         return;
       }
       const endpoints = {
@@ -806,7 +809,7 @@ function createGraphExplorationStore(deps) {
         selection.selectedNodeIds
       );
       devLog3("[GraphExploration] focusEdge - determined direction", {
-        edgeId,
+        edgeId: edgeId2,
         edgeLabel: endpoints.edgeLabel,
         direction,
         referenceNodeId,
@@ -849,27 +852,27 @@ function createGraphExplorationStore(deps) {
         expandedNodeIds: /* @__PURE__ */ new Set()
       });
     },
-    markNodeExpanded: (nodeId) => {
+    markNodeExpanded: (nodeId2) => {
       const current = get().expandedNodeIds;
       const updated = new Set(current);
-      updated.add(nodeId);
-      devLog3("[GraphExploration] markNodeExpanded", { nodeId });
+      updated.add(nodeId2);
+      devLog3("[GraphExploration] markNodeExpanded", { nodeId: nodeId2 });
       set({ expandedNodeIds: updated });
     },
-    isNodeExpanded: (nodeId) => {
-      return get().expandedNodeIds.has(nodeId);
+    isNodeExpanded: (nodeId2) => {
+      return get().expandedNodeIds.has(nodeId2);
     },
-    expandNode: async (nodeId, options) => {
-      devLog3("[GraphExploration] expandNode", { nodeId, options });
+    expandNode: async (nodeId2, options) => {
+      devLog3("[GraphExploration] expandNode", { nodeId: nodeId2, options });
       try {
-        const result = await stores.expandNode(Number(nodeId), options);
+        const result = await stores.expandNode(Number(nodeId2), options);
         devLog3("[GraphExploration] Expansion API result", {
-          nodeId,
+          nodeId: nodeId2,
           newNodes: result.nodes.length,
           newEdges: result.edges.length
         });
         if (result.nodes.length === 0 && result.edges.length === 0) {
-          devLog3("[GraphExploration] No connected nodes found", { nodeId });
+          devLog3("[GraphExploration] No connected nodes found", { nodeId: nodeId2 });
           return;
         }
         const existingNodes = stores.graphData.getState().nodes;
@@ -884,8 +887,8 @@ function createGraphExplorationStore(deps) {
         );
         const enrichedEdges = enrichEdges(result.edges);
         stores.graphData.getState().mergeExpandedData(enrichedNodes, enrichedEdges);
-        mergeExpandedLabelsIntoFilters(stores, enrichedNodes, nodeId);
-        get().markNodeExpanded(nodeId);
+        mergeExpandedLabelsIntoFilters(stores, enrichedNodes, nodeId2);
+        get().markNodeExpanded(nodeId2);
         const currentState = get();
         if (currentState.isFocusMode) {
           const newFocusedIds = new Set(currentState.focusedNodeIds);
@@ -893,7 +896,7 @@ function createGraphExplorationStore(deps) {
             newFocusedIds.add(String(node.id_));
           }
           devLog3("[GraphExploration] Adding expanded nodes to focus set", {
-            nodeId,
+            nodeId: nodeId2,
             previousFocusCount: currentState.focusedNodeIds.size,
             addedToFocus: enrichedNodes.length,
             newFocusCount: newFocusedIds.size
@@ -906,23 +909,23 @@ function createGraphExplorationStore(deps) {
           );
         }
         devLog3("[GraphExploration] Expansion complete", {
-          nodeId,
+          nodeId: nodeId2,
           addedNodes: enrichedNodes.length,
           addedEdges: enrichedEdges.length,
           hasMore: result.has_more
         });
       } catch (error) {
-        errorLog("[GraphExploration] Expansion failed", { nodeId, error });
+        errorLog("[GraphExploration] Expansion failed", { nodeId: nodeId2, error });
         throw error;
       }
     },
-    addNodeById: async (nodeId, autoFocus = false) => {
-      const nodeIdStr = String(nodeId);
-      devLog3("[GraphExploration] addNodeById", { nodeId, autoFocus });
+    addNodeById: async (nodeId2, autoFocus = false) => {
+      const nodeIdStr = String(nodeId2);
+      devLog3("[GraphExploration] addNodeById", { nodeId: nodeId2, autoFocus });
       try {
         const existingNodes = stores.graphData.getState().nodes;
         if (handleExistingNode(
-          nodeId,
+          nodeId2,
           nodeIdStr,
           existingNodes,
           autoFocus,
@@ -931,19 +934,19 @@ function createGraphExplorationStore(deps) {
           return;
         }
         const enrichedNodes = await fetchAndEnrichNode(
-          nodeId,
+          nodeId2,
           existingNodes,
           stores
         );
-        ensureNodeLabelInFilters(enrichedNodes, nodeId, stores.graphFilter);
+        ensureNodeLabelInFilters(enrichedNodes, nodeId2, stores.graphFilter);
         if (autoFocus) {
           devLog3("[GraphExploration] Requesting focus for newly added node", {
-            nodeId
+            nodeId: nodeId2
           });
           stores.graphFocus.getState().requestFocus(nodeIdStr, "node", false);
         } else {
           devLog3("[GraphExploration] Skipping focus for newly added node", {
-            nodeId
+            nodeId: nodeId2
           });
         }
         const currentState = get();
@@ -951,19 +954,19 @@ function createGraphExplorationStore(deps) {
           const newFocusedIds = new Set(currentState.focusedNodeIds);
           newFocusedIds.add(nodeIdStr);
           devLog3("[GraphExploration] Adding node to focus set", {
-            nodeId,
+            nodeId: nodeId2,
             previousFocusCount: currentState.focusedNodeIds.size,
             newFocusCount: newFocusedIds.size
           });
           set({ focusedNodeIds: newFocusedIds });
         }
         devLog3("[GraphExploration] addNodeById complete", {
-          nodeId,
+          nodeId: nodeId2,
           addedNodes: enrichedNodes.length,
           autoFocus
         });
       } catch (error) {
-        devLog3("[GraphExploration] addNodeById failed", { nodeId, error });
+        devLog3("[GraphExploration] addNodeById failed", { nodeId: nodeId2, error });
         throw error;
       }
     }
@@ -1061,6 +1064,17 @@ function useWorkspaceSelection() {
   return useGraphStores().selection;
 }
 
+// src/hooks/useStableRef.ts
+import { useCallback, useRef } from "react";
+function useStableRef(fn) {
+  const ref = useRef(fn);
+  ref.current = fn;
+  return useCallback(
+    ((...args) => ref.current?.(...args)),
+    []
+  );
+}
+
 // src/hooks/useLiveGraphData.ts
 import { useMemo, useEffect } from "react";
 import { devLog as devLog6 } from "@petrarca/sonnet-core";
@@ -1425,7 +1439,7 @@ function useGraphRenderer() {
 }
 
 // src/hooks/graphRendererProvider.tsx
-import { useState, useCallback } from "react";
+import { useState, useCallback as useCallback2 } from "react";
 import { jsx } from "react/jsx-runtime";
 function GraphRendererProvider({
   children,
@@ -1433,7 +1447,7 @@ function GraphRendererProvider({
   onRendererChange
 }) {
   const [renderer, setRendererState] = useState(defaultRenderer);
-  const setRenderer = useCallback(
+  const setRenderer = useCallback2(
     (newRenderer) => {
       setRendererState(newRenderer);
       onRendererChange?.(newRenderer);
@@ -1446,9 +1460,9 @@ function GraphRendererProvider({
 // src/components/rea/ReaGraph.tsx
 import {
   useEffect as useEffect3,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState5,
-  useCallback as useCallback3
+  useCallback as useCallback4
 } from "react";
 import { devLog as devLog8 } from "@petrarca/sonnet-core";
 import {
@@ -1458,8 +1472,8 @@ import {
 
 // src/components/rea/theme.ts
 import { lightTheme } from "reagraph";
-var highlightColor = "#ffb512";
-var highlightColorText = "#c98a02";
+var highlightColor = SELECTION_COLOR;
+var highlightColorText = "#1d4ed8";
 var theme = {
   ...lightTheme,
   node: {
@@ -1672,7 +1686,7 @@ import React3, { useState as useState4 } from "react";
 import { devLog as devLog7 } from "@petrarca/sonnet-core";
 
 // src/components/rea/ExpandOptionsPanel.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 import { Checkbox, Input, Label } from "@petrarca/sonnet-ui";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function ExpandOptionsPanel({
@@ -1687,8 +1701,9 @@ function ExpandOptionsPanel({
   const [selectedTypes, setSelectedTypes] = useState3([]);
   const [loading, setLoading] = useState3(!!getEdgeTypes);
   const [offset, setOffset] = useState3({ x: 0, y: 0 });
-  const dragRef = useRef(null);
-  const onPointerDown = useCallback2(
+  const expandBtnRef = useRef2(null);
+  const dragRef = useRef2(null);
+  const onPointerDown = useCallback3(
     (e) => {
       if (e.target.closest("button")) return;
       e.preventDefault();
@@ -1702,13 +1717,13 @@ function ExpandOptionsPanel({
     },
     [offset]
   );
-  const onPointerMove = useCallback2((e) => {
+  const onPointerMove = useCallback3((e) => {
     if (!dragRef.current) return;
     const dx = e.clientX - dragRef.current.startX;
     const dy = e.clientY - dragRef.current.startY;
     setOffset({ x: dragRef.current.origX + dx, y: dragRef.current.origY + dy });
   }, []);
-  const onPointerUp = useCallback2(() => {
+  const onPointerUp = useCallback3(() => {
     dragRef.current = null;
   }, []);
   useEffect2(() => {
@@ -1736,6 +1751,11 @@ function ExpandOptionsPanel({
   };
   const allSelected = selectedTypes.length === edgeTypes.length;
   const noneSelected = edgeTypes.length > 0 && selectedTypes.length === 0;
+  useEffect2(() => {
+    if (!loading && !noneSelected) {
+      expandBtnRef.current?.focus();
+    }
+  }, [loading, noneSelected]);
   return /* @__PURE__ */ jsxs4(
     "div",
     {
@@ -1825,6 +1845,7 @@ function ExpandOptionsPanel({
         /* @__PURE__ */ jsx5(
           "button",
           {
+            ref: expandBtnRef,
             className: "w-full py-1.5 text-[11px] font-medium rounded bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
             onClick: handleExpand,
             disabled: loading || noneSelected,
@@ -1858,9 +1879,9 @@ function ReaContextMenu({
   }, [onClose]);
   const handleFocus = () => {
     if (elementType === "node") {
-      const nodeId = data.id;
-      devLog7("[ReaContextMenu] Focus on node and neighborhood:", nodeId);
-      useGraphExploration.getState().setFocusModeWithNeighborhood(nodeId);
+      const nodeId2 = data.id;
+      devLog7("[ReaContextMenu] Focus on node and neighborhood:", nodeId2);
+      useGraphExploration.getState().setFocusModeWithNeighborhood(nodeId2);
     } else {
       const startNodeId = data.data.start_id_;
       devLog7("[ReaContextMenu] Focus on edge start node:", startNodeId);
@@ -1886,58 +1907,58 @@ function ReaContextMenu({
   };
   const handleHideNode = () => {
     if (elementType === "node") {
-      const nodeId = data.id;
-      devLog7("[ReaContextMenu] Hide node:", nodeId);
-      useGraphExploration.getState().hideElements([nodeId]);
+      const nodeId2 = data.id;
+      devLog7("[ReaContextMenu] Hide node:", nodeId2);
+      useGraphExploration.getState().hideElements([nodeId2]);
     }
     onClose();
   };
   const handleHideIncoming = () => {
     if (elementType === "node") {
-      const nodeId = data.id;
-      devLog7("[ReaContextMenu] Hide incoming edges:", nodeId);
-      useGraphExploration.getState().hideNodeIncoming(nodeId);
+      const nodeId2 = data.id;
+      devLog7("[ReaContextMenu] Hide incoming edges:", nodeId2);
+      useGraphExploration.getState().hideNodeIncoming(nodeId2);
     }
     onClose();
   };
   const handleHideOutgoing = () => {
     if (elementType === "node") {
-      const nodeId = data.id;
-      devLog7("[ReaContextMenu] Hide outgoing edges:", nodeId);
-      useGraphExploration.getState().hideNodeOutgoing(nodeId);
+      const nodeId2 = data.id;
+      devLog7("[ReaContextMenu] Hide outgoing edges:", nodeId2);
+      useGraphExploration.getState().hideNodeOutgoing(nodeId2);
     }
     onClose();
   };
   const handleExpandWithOptions = (options) => {
     if (elementType === "node") {
-      const nodeId = data.id;
-      devLog7("[ReaContextMenu] Expand node with options:", nodeId, options);
-      useGraphExploration.getState().expandNode(nodeId, options);
+      const nodeId2 = data.id;
+      devLog7("[ReaContextMenu] Expand node with options:", nodeId2, options);
+      useGraphExploration.getState().expandNode(nodeId2, options);
     }
     onClose();
   };
   const handleHideForwardPath = () => {
     if (elementType === "edge") {
-      const edgeId = data.id;
-      devLog7("[ReaContextMenu] Hide forward path from edge:", edgeId);
-      useGraphExploration.getState().hideEdgeForwardPath(edgeId);
+      const edgeId2 = data.id;
+      devLog7("[ReaContextMenu] Hide forward path from edge:", edgeId2);
+      useGraphExploration.getState().hideEdgeForwardPath(edgeId2);
     }
     onClose();
   };
   const handleHideReversePath = () => {
     if (elementType === "edge") {
-      const edgeId = data.id;
-      devLog7("[ReaContextMenu] Hide reverse path from edge:", edgeId);
-      useGraphExploration.getState().hideEdgeReversePath(edgeId);
+      const edgeId2 = data.id;
+      devLog7("[ReaContextMenu] Hide reverse path from edge:", edgeId2);
+      useGraphExploration.getState().hideEdgeReversePath(edgeId2);
     }
     onClose();
   };
   const handleFocusOnEdgeType = () => {
     if (elementType === "edge") {
-      const edgeId = data.id;
+      const edgeId2 = data.id;
       const edgeLabel = data.data?.label_ || "edge";
-      devLog7("[ReaContextMenu] Focus on edge type:", edgeId, edgeLabel);
-      useGraphExploration.getState().focusOnEdgeType(edgeId);
+      devLog7("[ReaContextMenu] Focus on edge type:", edgeId2, edgeLabel);
+      useGraphExploration.getState().focusOnEdgeType(edgeId2);
     }
     onClose();
   };
@@ -2063,7 +2084,7 @@ function ReaGraph({
   extraToolbarContent,
   getNodeEdgeTypes
 }) {
-  const isMountedRef = useRef2(false);
+  const isMountedRef = useRef3(false);
   const { nodes, edges } = useReagraphData();
   const { normalized } = useLiveGraphData();
   useEffect3(() => {
@@ -2071,7 +2092,7 @@ function ReaGraph({
     if (nodes.length > 0) devLog8("[ReGraph] sample node", nodes[0]);
     if (edges.length > 0) devLog8("[ReGraph] sample edge", edges[0]);
   }, [nodes, edges]);
-  const canvas = useRef2(null);
+  const canvas = useRef3(null);
   const [hoveredNode, setHoveredNode] = useState5(
     void 0
   );
@@ -2132,7 +2153,7 @@ function ReaGraph({
     clearSelections();
     clearSelectionStore();
   }, [lastDataChangeTime, clearSelections, clearSelectionStore]);
-  const fitToScreen = useCallback3(
+  const fitToScreen = useCallback4(
     (reason) => {
       if (!isMountedRef.current) return;
       if (nodes.length === 0) return;
@@ -2178,6 +2199,20 @@ function ReaGraph({
       isMountedRef.current = false;
     };
   }, [fitToScreen, setSelections, setSelectedEdge, useGraphSelection]);
+  const selectionsRef = useRef3(selections);
+  selectionsRef.current = selections;
+  useEffect3(() => {
+    const inSync = (nodeIds) => {
+      const cur = selectionsRef.current;
+      return cur.length === nodeIds.length && nodeIds.every((id) => cur.includes(id));
+    };
+    const unsubscribe = useGraphSelection.subscribe((state) => {
+      if (!inSync(state.selectedNodeIds)) {
+        setSelections(state.selectedNodeIds);
+      }
+    });
+    return unsubscribe;
+  }, [useGraphSelection, setSelections]);
   useEffect3(() => {
     if (isMountedRef.current) fitToScreen("counts-changed");
   }, [nodes.length, edges.length, fitToScreen]);
@@ -2293,7 +2328,7 @@ function ReaGraph({
       window.removeEventListener("resize", handleResize);
     };
   }, [fitToScreen]);
-  const firstDataRef = useRef2(true);
+  const firstDataRef = useRef3(true);
   useEffect3(() => {
     if (!isMountedRef.current) return;
     if (nodes.length > 0) {
@@ -2394,9 +2429,9 @@ var ReaGraph_default = ReaGraph;
 // src/components/cyto/CytoscapeGraph.tsx
 import {
   useEffect as useEffect4,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState6,
-  useCallback as useCallback4
+  useCallback as useCallback5
 } from "react";
 import { devLog as devLog10, errorLog as errorLog3 } from "@petrarca/sonnet-core";
 import cytoscape from "cytoscape";
@@ -2817,9 +2852,9 @@ var createNodeContextMenu = ({
       {
         content: "Focus",
         select: (ele) => {
-          const nodeId = ele.id();
-          devLog9("[CxtMenu] Focus on node and neighborhood:", nodeId);
-          useGraphExploration.getState().setFocusModeWithNeighborhood(nodeId);
+          const nodeId2 = ele.id();
+          devLog9("[CxtMenu] Focus on node and neighborhood:", nodeId2);
+          useGraphExploration.getState().setFocusModeWithNeighborhood(nodeId2);
         }
       },
       {
@@ -2837,38 +2872,38 @@ var createNodeContextMenu = ({
       {
         content: "Hide Node",
         select: (ele) => {
-          const nodeId = ele.id();
-          devLog9("[CxtMenu] Hide node:", nodeId);
-          useGraphExploration.getState().hideElements([nodeId]);
+          const nodeId2 = ele.id();
+          devLog9("[CxtMenu] Hide node:", nodeId2);
+          useGraphExploration.getState().hideElements([nodeId2]);
         }
       },
       {
         content: "Hide Incoming",
         select: (ele) => {
-          const nodeId = ele.id();
-          devLog9("[CxtMenu] Hide incoming (predecessors) of node:", nodeId);
-          useGraphExploration.getState().hideNodeIncoming(nodeId);
+          const nodeId2 = ele.id();
+          devLog9("[CxtMenu] Hide incoming (predecessors) of node:", nodeId2);
+          useGraphExploration.getState().hideNodeIncoming(nodeId2);
         }
       },
       {
         content: "Hide Outgoing",
         select: (ele) => {
-          const nodeId = ele.id();
-          devLog9("[CxtMenu] Hide outgoing (successors) of node:", nodeId);
-          useGraphExploration.getState().hideNodeOutgoing(nodeId);
+          const nodeId2 = ele.id();
+          devLog9("[CxtMenu] Hide outgoing (successors) of node:", nodeId2);
+          useGraphExploration.getState().hideNodeOutgoing(nodeId2);
         }
       },
       {
         content: "Expand",
         select: (ele) => {
-          const nodeId = ele.id();
-          devLog9("[CxtMenu] Expand request for node:", nodeId);
+          const nodeId2 = ele.id();
+          devLog9("[CxtMenu] Expand request for node:", nodeId2);
           if (onExpandRequest) {
             const pos = ele.renderedPosition();
-            const label = ele.data("label") || nodeId;
-            onExpandRequest({ nodeId, nodeLabel: label, x: pos.x, y: pos.y });
+            const label = ele.data("label") || nodeId2;
+            onExpandRequest({ nodeId: nodeId2, nodeLabel: label, x: pos.x, y: pos.y });
           } else {
-            useGraphExploration.getState().expandNode(nodeId).catch((error) => {
+            useGraphExploration.getState().expandNode(nodeId2).catch((error) => {
               errorLog2("[CxtMenu] Expansion failed:", error);
               toast3.error("Failed to expand node");
             });
@@ -2904,42 +2939,42 @@ var createEdgeContextMenu = ({
       {
         content: "Focus",
         select: (ele) => {
-          const edgeId = ele.id();
+          const edgeId2 = ele.id();
           devLog9(
             "[CxtMenu] Focus on edge (auto-direction based on selection):",
-            edgeId
+            edgeId2
           );
-          useGraphExploration.getState().focusEdge(edgeId);
+          useGraphExploration.getState().focusEdge(edgeId2);
         }
       },
       {
         content: "Focus Edge Type",
         select: (ele) => {
-          const edgeId = ele.id();
-          devLog9("[CxtMenu] Focus on edge type:", edgeId);
-          useGraphExploration.getState().focusOnEdgeType(edgeId);
+          const edgeId2 = ele.id();
+          devLog9("[CxtMenu] Focus on edge type:", edgeId2);
+          useGraphExploration.getState().focusOnEdgeType(edgeId2);
         }
       },
       {
         content: "Hide Forward Path",
         select: (ele) => {
-          const edgeId = ele.id();
+          const edgeId2 = ele.id();
           devLog9(
             "[CxtMenu] Hide forward path (edge + target + downstream):",
-            edgeId
+            edgeId2
           );
-          useGraphExploration.getState().hideEdgeForwardPath(edgeId);
+          useGraphExploration.getState().hideEdgeForwardPath(edgeId2);
         }
       },
       {
         content: "Hide Reverse Path",
         select: (ele) => {
-          const edgeId = ele.id();
+          const edgeId2 = ele.id();
           devLog9(
             "[CxtMenu] Hide reverse path (edge + source + upstream):",
-            edgeId
+            edgeId2
           );
-          useGraphExploration.getState().hideEdgeReversePath(edgeId);
+          useGraphExploration.getState().hideEdgeReversePath(edgeId2);
         }
       }
     ],
@@ -2990,9 +3025,9 @@ function CytoscapeExpandOverlay({
         {
           nodeLabel: expandRequest.nodeLabel,
           onExpand: (options) => {
-            const { nodeId } = expandRequest;
+            const { nodeId: nodeId2 } = expandRequest;
             onClose();
-            useGraphExploration.getState().expandNode(nodeId, options).catch((err) => {
+            useGraphExploration.getState().expandNode(nodeId2, options).catch((err) => {
               errorLog3("[CxtMenu] Expansion failed:", err);
               toast4.error("Failed to expand node");
             });
@@ -3322,7 +3357,7 @@ function useFullscreen(fitToScreen, cyRef) {
   return {
     fullscreen,
     setFullscreen,
-    toggleFullscreen: useCallback4(() => setFullscreen((f) => !f), [])
+    toggleFullscreen: useCallback5(() => setFullscreen((f) => !f), [])
   };
 }
 function setupCytoscapeEventHandlers({
@@ -3385,8 +3420,8 @@ function setupCytoscapeEventHandlers({
   });
   cy.on("tap", "edge", (evt) => {
     const edgeEle = evt.target;
-    const edgeId = edgeEle.id();
-    const edgeObj = edgesRef.current.find((e) => String(e.id_) === edgeId);
+    const edgeId2 = edgeEle.id();
+    const edgeObj = edgesRef.current.find((e) => String(e.id_) === edgeId2);
     if (!edgeObj) return;
     const sourceId = edgeEle.data("source");
     const targetId = edgeEle.data("target");
@@ -3396,7 +3431,7 @@ function setupCytoscapeEventHandlers({
       const selectedNodeId = currentlySelectedNodes[0].id();
       if (selectedNodeId === sourceId || selectedNodeId === targetId) {
         devLog10("[CytoscapeGraph] tap edge - node+edge selection", {
-          edgeId,
+          edgeId: edgeId2,
           selectedNode: selectedNodeId,
           direction: selectedNodeId === sourceId ? "outgoing" : "incoming"
         });
@@ -3410,7 +3445,7 @@ function setupCytoscapeEventHandlers({
         return;
       }
     }
-    devLog10("[CytoscapeGraph] tap edge - default (both endpoints)", { edgeId });
+    devLog10("[CytoscapeGraph] tap edge - default (both endpoints)", { edgeId: edgeId2 });
     evtCy.batch(() => {
       evtCy.elements().unselect();
       evtCy.$id(sourceId).select();
@@ -3438,16 +3473,16 @@ function CytoscapeGraph({
   extraToolbarContent,
   getNodeEdgeTypes
 }) {
-  const containerRef = useRef3(null);
-  const cyRef = useRef3(null);
-  const isInitializedRef = useRef3(false);
+  const containerRef = useRef4(null);
+  const cyRef = useRef4(null);
+  const isInitializedRef = useRef4(false);
   const [currentLayout, setCurrentLayout] = useState6(initialLayout);
   const [expandRequest, setExpandRequest] = useState6(
     null
   );
-  const nodesRef = useRef3([]);
-  const edgesRef = useRef3([]);
-  const pendingFocusActionRef = useRef3(null);
+  const nodesRef = useRef4([]);
+  const edgesRef = useRef4([]);
+  const pendingFocusActionRef = useRef4(null);
   const cytoData = useCytoscapeData();
   const live = useLiveGraphData();
   const nodes = live.nodes;
@@ -3467,31 +3502,51 @@ function CytoscapeGraph({
     setSelectedEdge: setSelectedEdgeStore,
     clear: clearSelectionStore
   } = useSelection3.getState();
-  const selectedNodeIdsRef = useRef3(
+  const selectedNodeIdsRef = useRef4(
     useSelection3.getState().selectedNodeIds
   );
-  const selectedEdgeRef = useRef3(
+  const selectedEdgeRef = useRef4(
     useSelection3.getState().selectedEdge
   );
   useEffect4(() => {
-    const state = useSelection3.getState();
-    selectedNodeIdsRef.current = state.selectedNodeIds;
-    selectedEdgeRef.current = state.selectedEdge;
-    const cy = cyRef.current;
-    if (cy && (state.selectedNodeIds.length || state.selectedEdge)) {
+    const applyStoreSelection = (nodeIds, edge) => {
+      selectedNodeIdsRef.current = nodeIds;
+      selectedEdgeRef.current = edge;
+      const cy = cyRef.current;
+      if (!cy) return;
+      const want = new Set(nodeIds);
+      const haveNodes = cy.$("node:selected");
+      const have = new Set(haveNodes.map((e) => e.id()));
+      const wantEdgeId = edge ? String(edge.id_) : null;
+      const haveEdge = cy.$("edge:selected");
+      const haveEdgeId = haveEdge.length ? haveEdge[0].id() : null;
+      const nodesInSync = want.size === have.size && [...want].every((id) => have.has(id));
+      const edgeInSync = wantEdgeId === haveEdgeId;
+      if (nodesInSync && edgeInSync) return;
       cy.batch(() => {
-        cy.elements().unselect();
-        state.selectedNodeIds.forEach((id) => cy.$id(id).select());
-        if (state.selectedEdge) {
-          const edge = cy.$id(String(state.selectedEdge.id_));
-          if (edge) {
-            edge.select();
-            cy.$id(edge.data("source")).select();
-            cy.$id(edge.data("target")).select();
+        haveNodes.forEach((ele) => {
+          if (!want.has(ele.id())) ele.unselect();
+        });
+        if (haveEdgeId && haveEdgeId !== wantEdgeId) haveEdge.unselect();
+        nodeIds.forEach((id) => {
+          if (!have.has(id)) cy.$id(id).select();
+        });
+        if (wantEdgeId && wantEdgeId !== haveEdgeId) {
+          const edgeEle = cy.$id(wantEdgeId);
+          if (edgeEle) {
+            edgeEle.select();
+            cy.$id(edgeEle.data("source")).select();
+            cy.$id(edgeEle.data("target")).select();
           }
         }
       });
-    }
+    };
+    const initial = useSelection3.getState();
+    applyStoreSelection(initial.selectedNodeIds, initial.selectedEdge);
+    const unsubscribe = useSelection3.subscribe((state) => {
+      applyStoreSelection(state.selectedNodeIds, state.selectedEdge);
+    });
+    return unsubscribe;
   }, [useSelection3]);
   useEffect4(() => {
     nodesRef.current = nodes;
@@ -3505,8 +3560,10 @@ function CytoscapeGraph({
     cyRef.current = cytoscape({
       container: containerRef.current,
       elements: [],
-      selectionType: "additive",
-      // allow clicking multiple nodes without modifier
+      // Plain click selects a single node (replaces the selection); hold
+      // Shift/Cmd to add a second node (e.g. for the two-node edge action).
+      // This matches the conventional canvas-selection expectation.
+      selectionType: "single",
       style: [
         // Base node style with data mappers for dynamic properties
         {
@@ -3600,19 +3657,20 @@ function CytoscapeGraph({
         {
           selector: "edge:selected",
           style: {
-            "line-color": "#ff1a1a",
-            "target-arrow-color": "#ff1a1a",
-            width: 8,
-            // even thicker
+            "line-color": SELECTION_COLOR,
+            "target-arrow-color": SELECTION_COLOR,
+            // Modest bump over the base width (~3); selection is conveyed mainly
+            // by colour + overlay, not a slab. (Was 8, which looked oversized.)
+            width: 4,
             "z-index": 999,
             "font-size": "11px",
             "font-weight": "bold",
             "text-background-opacity": 1,
             "text-background-color": "#ffffff",
             "text-background-padding": "3px",
-            "arrow-scale": 1.35,
+            "arrow-scale": 0.9,
             opacity: 1,
-            "overlay-color": "#ff1a1a",
+            "overlay-color": SELECTION_COLOR,
             "overlay-opacity": 0.08
           }
         },
@@ -3621,13 +3679,13 @@ function CytoscapeGraph({
           style: {
             "border-width": 10,
             // thicker circle outline
-            "border-color": "#ff1a1a",
+            "border-color": SELECTION_COLOR,
             "border-opacity": 1,
             "background-opacity": 1,
             "text-background-opacity": 1,
             "text-background-color": "#ffffff",
             "text-background-padding": "4px",
-            "overlay-color": "#ff1a1a",
+            "overlay-color": SELECTION_COLOR,
             "overlay-opacity": 0.18,
             width: 48,
             // slight size bump from 40
@@ -3659,9 +3717,9 @@ function CytoscapeGraph({
       cyRef.current = null;
     };
   }, []);
-  const elementIdsRef = useRef3("");
-  const lastLayoutRef = useRef3("");
-  const lastFitPaddingRef = useRef3(fitPadding);
+  const elementIdsRef = useRef4("");
+  const lastLayoutRef = useRef4("");
+  const lastFitPaddingRef = useRef4(fitPadding);
   useEffect4(() => {
     const cy = cyRef.current;
     if (!cy || !isInitializedRef.current) return;
@@ -3759,7 +3817,7 @@ function CytoscapeGraph({
   const updateLayout = (newLayout) => {
     setCurrentLayout(newLayout);
   };
-  const fitToScreen = useCallback4(() => {
+  const fitToScreen = useCallback5(() => {
     if (cyRef.current) {
       cyRef.current.fit(void 0, fitPadding);
     }
@@ -3816,9 +3874,9 @@ function CytoscapeGraph({
         extraToolbarContent,
         zoomIn: () => {
           if (cyRef.current) {
-            const z = cyRef.current.zoom();
+            const z3 = cyRef.current.zoom();
             cyRef.current.zoom({
-              level: Math.min(z * 1.2, 5),
+              level: Math.min(z3 * 1.2, 5),
               renderedPosition: {
                 x: cyRef.current.width() / 2,
                 y: cyRef.current.height() / 2
@@ -3828,9 +3886,9 @@ function CytoscapeGraph({
         },
         zoomOut: () => {
           if (cyRef.current) {
-            const z = cyRef.current.zoom();
+            const z3 = cyRef.current.zoom();
             cyRef.current.zoom({
-              level: Math.max(z / 1.2, 0.1),
+              level: Math.max(z3 / 1.2, 0.1),
               renderedPosition: {
                 x: cyRef.current.width() / 2,
                 y: cyRef.current.height() / 2
@@ -4028,18 +4086,11 @@ function NodeLabelBadges({
   labels,
   labelCounts,
   colorPalette,
-  allLabelsDisabled,
-  nodeLabelFilters,
-  toggleNodeLabelFilter
+  shown,
+  onToggleLabel
 }) {
   return labels.map((label) => {
-    const bgColor = resolveBadgeColor(
-      allLabelsDisabled,
-      nodeLabelFilters,
-      label,
-      colorPalette,
-      label
-    );
+    const bgColor = shown.has(label) ? colorPalette[label] : colorPalette["faded"];
     return /* @__PURE__ */ jsxs12(
       Badge,
       {
@@ -4049,7 +4100,7 @@ function NodeLabelBadges({
           backgroundColor: bgColor,
           borderRadius: "10px"
         },
-        onClick: () => toggleNodeLabelFilter(label, labels),
+        onClick: () => onToggleLabel(label),
         children: [
           label,
           " (",
@@ -4099,12 +4150,53 @@ function EdgeLabelBadges({
     );
   });
 }
+function bucketCount(labels, labelCounts) {
+  return labels.reduce((sum, l) => sum + (labelCounts[l] ?? 0), 0);
+}
+function effectiveShownNodeLabels(allLabels, allLabelsDisabled, nodeLabelFilters) {
+  if (allLabelsDisabled) return /* @__PURE__ */ new Set();
+  if (nodeLabelFilters.length === 0) return new Set(allLabels);
+  return new Set(nodeLabelFilters);
+}
+function isBucketAllOff(bucketLabels, shown) {
+  return bucketLabels.every((l) => !shown.has(l));
+}
+function commitShownNodeLabels(shown, allLabels, setNodeFilterState) {
+  if (shown.size === 0) {
+    setNodeFilterState(true, []);
+  } else {
+    setNodeFilterState(
+      false,
+      shown.size === allLabels.length ? [] : [...shown]
+    );
+  }
+}
+function toggleBucketAll(bucketLabels, allLabels, shown, setNodeFilterState) {
+  const next = new Set(shown);
+  if (isBucketAllOff(bucketLabels, next)) {
+    for (const l of bucketLabels) next.add(l);
+  } else {
+    for (const l of bucketLabels) next.delete(l);
+  }
+  commitShownNodeLabels(next, allLabels, setNodeFilterState);
+}
+function toggleNodeLabelScoped(label, allLabels, shown, setNodeFilterState) {
+  const next = new Set(shown);
+  if (next.has(label)) {
+    next.delete(label);
+  } else {
+    next.add(label);
+  }
+  commitShownNodeLabels(next, allLabels, setNodeFilterState);
+}
 function GraphOverview({
   stats,
   colorPalette,
   labelCounts,
   edgeLabelCounts,
-  edgeToNodeLabels
+  edgeToNodeLabels,
+  nodeBuckets,
+  edgeSectionTitle = "Relations"
 }) {
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const nodeLabelFilters = useGraphFilter2((state) => state.nodeLabelFilters);
@@ -4113,24 +4205,15 @@ function GraphOverview({
   const allEdgeLabelsDisabled = useGraphFilter2(
     (state) => state.allEdgeLabelsDisabled
   );
-  const toggleNodeLabelFilter = useGraphFilter2(
-    (state) => state.toggleNodeLabelFilter
-  );
-  const clearNodeLabelFilters = useGraphFilter2(
-    (state) => state.clearNodeLabelFilters
-  );
-  const toggleAllLabelsDisabled = useGraphFilter2(
-    (state) => state.toggleAllLabelsDisabled
-  );
   const toggleEdgeLabelFilter = useGraphFilter2(
     (state) => state.toggleEdgeLabelFilter
   );
-  const clearEdgeLabelFilters = useGraphFilter2(
-    (state) => state.clearEdgeLabelFilters
-  );
   const toggleAllEdgeLabelsDisabled = useGraphFilter2(
     (state) => state.toggleAllEdgeLabelsDisabled
   );
+  const setNodeFilterState = useGraphFilter2(
+    (state) => state.setNodeFilterState
+  );
   const allLabels = Object.keys(labelCounts).sort();
   devLog11("[Overview] Rendering labels", {
     labels: allLabels,
@@ -4139,52 +4222,63 @@ function GraphOverview({
     stats
   });
   const allEdgeLabels = Object.keys(edgeLabelCounts || {}).sort();
-  const handleNodeToggle = () => {
-    if (allLabelsDisabled) {
-      toggleAllLabelsDisabled();
-      clearNodeLabelFilters();
-    } else {
-      toggleAllLabelsDisabled();
-    }
-  };
-  const handleEdgeToggle = () => {
-    if (allEdgeLabelsDisabled) {
-      toggleAllEdgeLabelsDisabled();
-      clearEdgeLabelFilters();
-    } else {
-      toggleAllEdgeLabelsDisabled();
-    }
-  };
+  const buckets = nodeBuckets ? nodeBuckets.map((b) => ({
+    title: b.title,
+    labels: b.labels.filter((l) => l in labelCounts).sort()
+  })) : [{ title: "Node Labels", labels: allLabels }];
+  const shownNodeLabels = effectiveShownNodeLabels(
+    allLabels,
+    allLabelsDisabled,
+    nodeLabelFilters
+  );
+  const handleEdgeToggle = toggleAllEdgeLabelsDisabled;
   return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    /* @__PURE__ */ jsx13("p", { className: "mt-2 text-sm font-semibold", children: "Overview" }),
-    allLabels.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Node Labels" }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-start gap-2", children: [
-        /* @__PURE__ */ jsx13(
-          AllToggleBadge,
-          {
-            allDisabled: allLabelsDisabled,
-            colorPalette,
-            count: stats.nodes,
-            onToggle: handleNodeToggle,
-            badgeKey: "all"
-          }
-        ),
-        /* @__PURE__ */ jsx13(
-          NodeLabelBadges,
-          {
-            labels: allLabels,
-            labelCounts,
-            colorPalette,
-            allLabelsDisabled,
-            nodeLabelFilters,
-            toggleNodeLabelFilter
-          }
-        )
-      ] })
-    ] }),
+    /* @__PURE__ */ jsx13("p", { className: "mt-2 heading-component", children: "Overview" }),
+    allLabels.length > 0 && /* @__PURE__ */ jsx13("div", { children: buckets.map((bucket) => {
+      if (bucket.labels.length === 0) return null;
+      const bucketAllDisabled = isBucketAllOff(
+        bucket.labels,
+        shownNodeLabels
+      );
+      const onBucketAll = () => toggleBucketAll(
+        bucket.labels,
+        allLabels,
+        shownNodeLabels,
+        setNodeFilterState
+      );
+      return /* @__PURE__ */ jsxs12("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx13("p", { className: "heading-meta mb-2", children: bucket.title }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-start gap-2", children: [
+          /* @__PURE__ */ jsx13(
+            AllToggleBadge,
+            {
+              allDisabled: bucketAllDisabled,
+              colorPalette,
+              count: bucketCount(bucket.labels, labelCounts),
+              onToggle: onBucketAll,
+              badgeKey: `all-${bucket.title}`
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            NodeLabelBadges,
+            {
+              labels: bucket.labels,
+              labelCounts,
+              colorPalette,
+              shown: shownNodeLabels,
+              onToggleLabel: (label) => toggleNodeLabelScoped(
+                label,
+                allLabels,
+                shownNodeLabels,
+                setNodeFilterState
+              )
+            }
+          )
+        ] })
+      ] }, bucket.title);
+    }) }),
     allEdgeLabels.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Edge Types" }),
+      /* @__PURE__ */ jsx13("p", { className: "heading-meta mb-2", children: edgeSectionTitle }),
       /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-start gap-2", children: [
         /* @__PURE__ */ jsx13(
           AllToggleBadge,
@@ -4212,7 +4306,7 @@ function GraphOverview({
     ] })
   ] });
 }
-function Overview() {
+function Overview({ nodeBuckets, edgeSectionTitle } = {}) {
   const { stats, colorPalette, labelCounts, edgeLabelCounts, baseNormalized } = useLiveGraphData();
   const edgeToNodeLabels = useMemo4(() => {
     if (!baseNormalized?.nodesById || !baseNormalized?.edgesById) return {};
@@ -4223,7 +4317,7 @@ function Overview() {
   }, [baseNormalized]);
   if (stats && stats.values != null && stats.values > 0) {
     return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-      /* @__PURE__ */ jsx13("p", { className: "mt-2 text-sm font-semibold", children: "Overview" }),
+      /* @__PURE__ */ jsx13("p", { className: "mt-2 heading-component", children: "Overview" }),
       /* @__PURE__ */ jsxs12("p", { className: "text-sm text-muted-foreground", children: [
         formatNumber(stats.values),
         " Values"
@@ -4238,7 +4332,9 @@ function Overview() {
         colorPalette,
         labelCounts,
         edgeLabelCounts,
-        edgeToNodeLabels
+        edgeToNodeLabels,
+        nodeBuckets,
+        edgeSectionTitle
       }
     );
   }
@@ -4284,11 +4380,12 @@ function ActionPanel({ actions }) {
 var ActionPanel_default = ActionPanel;
 
 // src/components/GraphA11yList/GraphA11yList.tsx
-import { useMemo as useMemo6, useRef as useRef4 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo6, useRef as useRef5 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { cn as cn2 } from "@petrarca/sonnet-core";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var SR_ONLY = "absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)] [clip-path:inset(50%)] -m-px";
+var MAX_NODE_SELECTION = 2;
 function GraphA11yList({
   visible = false,
   rowHeight = 28,
@@ -4322,28 +4419,46 @@ function GraphA11yList({
     }));
     return [...nodeRows, ...edgeRows];
   }, [live.nodes, live.edges]);
-  const parentRef = useRef4(null);
+  const parentRef = useRef5(null);
   const virtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => rowHeight,
     overscan: 8
   });
-  const selectRow = (row) => {
-    if (row.kind === "node") {
+  const activateNode = useCallback6(
+    (id, additive) => {
       setSelectedEdge(null);
-      setSelectedNodeIds([row.id]);
-    } else {
-      setSelectedNodeIds([]);
-      setSelectedEdge(row.edge);
-    }
-  };
+      if (!additive) {
+        setSelectedNodeIds([id]);
+        return;
+      }
+      if (selectedNodeIds.includes(id)) {
+        setSelectedNodeIds(selectedNodeIds.filter((x) => x !== id));
+        return;
+      }
+      setSelectedNodeIds([...selectedNodeIds, id].slice(-MAX_NODE_SELECTION));
+    },
+    [selectedNodeIds, setSelectedNodeIds, setSelectedEdge]
+  );
+  const selectRow = useCallback6(
+    (row, e) => {
+      if (row.kind === "node") {
+        activateNode(row.id, e.metaKey || e.ctrlKey || e.shiftKey);
+      } else {
+        setSelectedNodeIds([]);
+        setSelectedEdge(row.edge);
+      }
+    },
+    [activateNode, setSelectedNodeIds, setSelectedEdge]
+  );
   const isSelected = (row) => row.kind === "node" ? selectedNodeIds.includes(row.id) : selectedEdge?.id_ === row.edge.id_;
   return /* @__PURE__ */ jsx15(
     "div",
     {
       role: "listbox",
       "aria-label": "Graph elements",
+      "aria-multiselectable": true,
       className: cn2(visible ? "rounded-md border" : SR_ONLY, className),
       children: /* @__PURE__ */ jsx15(
         "div",
@@ -4371,7 +4486,7 @@ function GraphA11yList({
                     "aria-label": `${row.kind === "node" ? "Node" : "Edge"} ${row.label}`,
                     "data-testid": `graph-${row.kind}-${row.id}`,
                     ...row.kind === "node" ? { "data-graph-node-id": row.id } : { "data-graph-edge-id": row.id },
-                    onClick: () => selectRow(row),
+                    onClick: (e) => selectRow(row, e),
                     className: cn2(
                       "absolute left-0 top-0 flex w-full items-center px-2 text-left text-sm",
                       visible && "hover:bg-accent aria-selected:bg-state-selected aria-selected:text-foreground"
@@ -4392,46 +4507,2977 @@ function GraphA11yList({
     }
   );
 }
+
+// src/graph-model/types.ts
+function isNodeType(schema) {
+  return schema["x-graph"].type !== "EDGE";
+}
+function isEdgeType(schema) {
+  return schema["x-graph"].type === "EDGE";
+}
+function typeLabel(schema) {
+  return schema["x-graph"].label || schema.title || "Unknown";
+}
+
+// src/graph-model/converter.ts
+function stableId(seed) {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h & 2147483647) >>> 0;
+}
+function nodeId(typeName) {
+  return stableId(`schema.node.${typeName}`);
+}
+function edgeId(source, target, rel) {
+  return stableId(`schema.edge.${source}.${target}.${rel}`);
+}
+function toCamelCase(key) {
+  const parts = key.split("-");
+  return parts[0] + parts.slice(1).map((w) => w ? w[0].toUpperCase() + w.slice(1) : "").join("");
+}
+function buildNode(schema) {
+  const name = typeLabel(schema);
+  const properties = {
+    gid_: `schema:${name}`,
+    name,
+    type: schema.type ?? "object",
+    propertyDefinitions: schema.properties ?? {},
+    required: schema.required ?? []
+  };
+  for (const key of Object.keys(schema)) {
+    if (key.startsWith("x-")) {
+      properties[toCamelCase(key)] = schema[key];
+    }
+  }
+  return {
+    id_: nodeId(name),
+    // Type label drives legend colour/filtering; node vs edge type is in xGraph.
+    label_: name,
+    properties_: properties
+  };
+}
+function buildRelationEdges(schema, knownTypes) {
+  const source = typeLabel(schema);
+  const sourceId = nodeId(source);
+  const edges = [];
+  for (const relation of schema["x-graph"].relations ?? []) {
+    const target = relation.to_type_name;
+    if (!target || !knownTypes.has(target)) continue;
+    const rel = relation.rel_type_name || "RELATED_TO";
+    const properties = {
+      gid_: `schema:rel:${source}\0${target}`,
+      name: rel,
+      cardinality: relation.cardinality ?? "ONE_TO_MANY"
+    };
+    if (relation.form_field !== void 0)
+      properties.form_field = relation.form_field;
+    if (relation.description !== void 0)
+      properties.description = relation.description;
+    edges.push({
+      id_: edgeId(source, target, rel),
+      label_: rel,
+      start_id_: sourceId,
+      end_id_: nodeId(target),
+      properties_: properties
+    });
+  }
+  return edges;
+}
+function buildInheritanceEdges(schema, knownTypes) {
+  const source = typeLabel(schema);
+  const sourceId = nodeId(source);
+  const edges = [];
+  for (const parent of schema["x-graph"].inherits_from ?? []) {
+    if (!knownTypes.has(parent)) continue;
+    edges.push({
+      id_: edgeId(source, parent, "INHERITS_FROM_"),
+      label_: "INHERITS_FROM_",
+      start_id_: sourceId,
+      end_id_: nodeId(parent),
+      properties_: {
+        gid_: `schema:rel:${source}\0${parent}`,
+        name: "INHERITS_FROM_",
+        parent
+      }
+    });
+  }
+  return edges;
+}
+function modelToGraph(model) {
+  const nodeTypes = model.filter(isNodeType);
+  const knownTypes = new Set(nodeTypes.map(typeLabel));
+  const nodes = model.map(buildNode);
+  const edges = [];
+  for (const schema of nodeTypes) {
+    edges.push(...buildRelationEdges(schema, knownTypes));
+    edges.push(...buildInheritanceEdges(schema, knownTypes));
+  }
+  return { nodes, edges };
+}
+
+// src/graph-model/filter.ts
+function reconcileFilter(current, model, baselineReset, showEdgeTypes) {
+  const nodeTypeLabels2 = model.filter(isNodeType).map(typeLabel);
+  if (baselineReset) {
+    return showEdgeTypes ? [] : nodeTypeLabels2;
+  }
+  if (current.length === 0) return [];
+  const allLabels = new Set(model.map(typeLabel));
+  const kept = current.filter((l) => allLabels.has(l));
+  const keptSet = new Set(kept);
+  const added = nodeTypeLabels2.filter((l) => !keptSet.has(l));
+  return added.length > 0 ? [...kept, ...added] : kept;
+}
+
+// src/graph-model/GraphModelEditor.tsx
+import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef6, useState as useState13 } from "react";
+import { ResizeHandle } from "@petrarca/sonnet-ui";
+
+// src/graph-model/ModelActionPanel.tsx
+import { useMemo as useMemo8, useState as useState12 } from "react";
+import { Button as Button6, IconButton as IconButton2 } from "@petrarca/sonnet-ui";
+import { GitBranchPlus, CirclePlus, Waypoints } from "lucide-react";
+
+// src/graph-model/TypeDetailPanel.tsx
+import { useState as useState11 } from "react";
+import { Badge as Badge2, IconButton } from "@petrarca/sonnet-ui";
+import { Plus, Pencil, Trash2 } from "lucide-react";
+
+// src/graph-model/view.ts
+function cardinalityLabel(c) {
+  return c === "ONE_TO_ONE" ? "one-to-one" : "one-to-many";
+}
+function propTypeOf(prop) {
+  if (Array.isArray(prop.type)) return prop.type.join(" | ");
+  return prop.type ?? "object";
+}
+function toPropertyViews(schema) {
+  if (!schema?.properties) return [];
+  const required = new Set(schema.required ?? []);
+  return Object.entries(schema.properties).map(([name, prop]) => ({
+    name,
+    type: propTypeOf(prop),
+    required: required.has(name),
+    title: typeof prop.title === "string" ? prop.title : void 0,
+    description: typeof prop.description === "string" ? prop.description : void 0,
+    widget: typeof prop["x-ui-widget"] === "string" ? prop["x-ui-widget"] : void 0,
+    enum: prop.enum
+  }));
+}
+function toRelationViews(schema) {
+  const relations = schema["x-graph"].relations ?? [];
+  return relations.map((r) => ({
+    relType: r.rel_type_name,
+    target: r.to_type_name,
+    cardinality: r.cardinality ?? "ONE_TO_MANY",
+    description: r.description
+  }));
+}
+function findType(model, label) {
+  return model.find((s) => typeLabel(s) === label);
+}
+function findEdgeType(model, relType) {
+  return model.find(
+    (s) => s["x-graph"].type === "EDGE" && typeLabel(s) === relType
+  );
+}
+function resolveRelationEdge(edge) {
+  if (edge.label_ === "INHERITS_FROM_") return null;
+  const gid = edge.properties_?.gid_;
+  if (typeof gid !== "string" || !gid.startsWith("schema:rel:")) return null;
+  const rest = gid.slice("schema:rel:".length);
+  const sep = rest.indexOf("\0");
+  if (sep < 0) return null;
+  return {
+    source: rest.slice(0, sep),
+    relType: edge.label_,
+    target: rest.slice(sep + 1)
+  };
+}
+function nodeTypeView(model, label) {
+  const schema = findType(model, label);
+  if (!schema || !isNodeType(schema)) return null;
+  return {
+    kind: "node",
+    label: typeLabel(schema),
+    description: typeof schema.description === "string" ? schema.description : void 0,
+    properties: toPropertyViews(schema),
+    relations: toRelationViews(schema)
+  };
+}
+function edgeTypeView(model, label) {
+  const schema = findType(model, label);
+  if (!schema || isNodeType(schema)) return null;
+  return {
+    kind: "edge",
+    label: typeLabel(schema),
+    description: typeof schema.description === "string" ? schema.description : void 0,
+    properties: toPropertyViews(schema)
+  };
+}
+function relationView(model, source, relType, target) {
+  const sourceSchema = findType(model, source);
+  if (!sourceSchema || !isNodeType(sourceSchema)) return null;
+  const relation = (sourceSchema["x-graph"].relations ?? []).find(
+    (r) => r.rel_type_name === relType && r.to_type_name === target
+  );
+  if (!relation) return null;
+  const edgeType = findEdgeType(model, relType);
+  return {
+    kind: "relation",
+    relType,
+    source,
+    target,
+    cardinality: relation.cardinality ?? "ONE_TO_MANY",
+    description: relation.description,
+    hasEdgeType: !!edgeType,
+    properties: toPropertyViews(edgeType)
+  };
+}
+
+// src/graph-model/mutate.ts
+function toSchemaProperty(input) {
+  const prop = { type: input.type };
+  if (input.title) prop.title = input.title;
+  if (input.description) prop.description = input.description;
+  if (input.widget && input.widget !== "default")
+    prop["x-ui-widget"] = input.widget;
+  if (input.enum && input.enum.length) prop.enum = input.enum;
+  return prop;
+}
+function replaceSchema(model, label, next) {
+  return model.map((s) => typeLabel(s) === label ? next : s);
+}
+function withProperty(schema, input, prevName) {
+  const properties = {
+    ...schema.properties ?? {}
+  };
+  const required = new Set(schema.required ?? []);
+  if (prevName) {
+    delete properties[prevName];
+    required.delete(prevName);
+  }
+  if (input) {
+    properties[input.name] = toSchemaProperty(input);
+    if (input.required) required.add(input.name);
+    else required.delete(input.name);
+  }
+  const next = { ...schema, properties };
+  if (required.size) next.required = [...required];
+  else delete next.required;
+  return next;
+}
+function setNodeProperty(model, typeLabel_, input, prevName) {
+  const schema = findType(model, typeLabel_);
+  if (!schema) return model;
+  return replaceSchema(
+    model,
+    typeLabel_,
+    withProperty(schema, input, prevName)
+  );
+}
+function deleteNodeProperty(model, typeLabel_, name) {
+  const schema = findType(model, typeLabel_);
+  if (!schema) return model;
+  return replaceSchema(model, typeLabel_, withProperty(schema, null, name));
+}
+function newEdgeType(relType) {
+  return {
+    title: relType,
+    type: "object",
+    properties: {},
+    "x-graph": { type: "EDGE", label: relType }
+  };
+}
+function setRelationProperty(model, relType, input, prevName) {
+  const existing = findEdgeType(model, relType);
+  const base = existing ?? newEdgeType(relType);
+  const next = withProperty(base, input, prevName);
+  return existing ? replaceSchema(model, relType, next) : [...model, next];
+}
+function deleteRelationProperty(model, relType, name) {
+  const existing = findEdgeType(model, relType);
+  if (!existing) return model;
+  const next = withProperty(existing, null, name);
+  const empty = Object.keys(next.properties ?? {}).length === 0;
+  if (empty) return model.filter((s) => s !== existing);
+  return replaceSchema(model, relType, next);
+}
+function setEdgeTypeProperty(model, edgeLabel, input, prevName) {
+  const existing = findEdgeType(model, edgeLabel);
+  if (!existing) return model;
+  return replaceSchema(
+    model,
+    edgeLabel,
+    withProperty(existing, input, prevName)
+  );
+}
+function deleteEdgeTypeProperty(model, edgeLabel, name) {
+  const existing = findEdgeType(model, edgeLabel);
+  if (!existing) return model;
+  return replaceSchema(model, edgeLabel, withProperty(existing, null, name));
+}
+function addEdgeType(model, label) {
+  const name = label.trim();
+  if (!name || model.some((s) => typeLabel(s) === name)) return model;
+  return [...model, newEdgeType(name)];
+}
+function addRelation(model, source, input) {
+  const schema = findType(model, source);
+  if (!schema) return model;
+  const relations = schema["x-graph"].relations ?? [];
+  if (relations.some(
+    (r) => r.rel_type_name === input.relType && r.to_type_name === input.target
+  )) {
+    return model;
+  }
+  const rel = {
+    rel_type_name: input.relType,
+    to_type_name: input.target,
+    cardinality: input.cardinality
+  };
+  if (input.description) rel.description = input.description;
+  const next = {
+    ...schema,
+    "x-graph": { ...schema["x-graph"], relations: [...relations, rel] }
+  };
+  return replaceSchema(model, source, next);
+}
+function updateRelation(model, source, prevRelType, prevTarget, input) {
+  const schema = findType(model, source);
+  if (!schema) return model;
+  const relations = (schema["x-graph"].relations ?? []).map(
+    (r) => r.rel_type_name === prevRelType && r.to_type_name === prevTarget ? {
+      rel_type_name: input.relType,
+      to_type_name: input.target,
+      cardinality: input.cardinality,
+      ...input.description ? { description: input.description } : {}
+    } : r
+  );
+  const next = {
+    ...schema,
+    "x-graph": { ...schema["x-graph"], relations }
+  };
+  return replaceSchema(model, source, next);
+}
+function addNodeType(model, label) {
+  const name = label.trim();
+  if (!name || model.some((s) => typeLabel(s) === name)) return model;
+  const schema = {
+    title: name,
+    type: "object",
+    properties: {},
+    "x-graph": { type: "NODE", label: name }
+  };
+  return [...model, schema];
+}
+function renameNodeType(model, oldLabel, newLabel) {
+  const name = newLabel.trim();
+  if (!name || name === oldLabel) return model;
+  if (model.some((s) => typeLabel(s) === name)) return model;
+  return model.map((s) => {
+    const xg = s["x-graph"];
+    const isTarget = typeLabel(s) === oldLabel;
+    const relations = xg.relations?.map(
+      (r) => r.to_type_name === oldLabel ? { ...r, to_type_name: name } : r
+    );
+    const inherits = xg.inherits_from?.map((p) => p === oldLabel ? name : p);
+    return {
+      ...s,
+      ...isTarget && s.title ? { title: name } : {},
+      "x-graph": {
+        ...xg,
+        ...isTarget ? { label: name } : {},
+        ...relations ? { relations } : {},
+        ...inherits ? { inherits_from: inherits } : {}
+      }
+    };
+  });
+}
+function deleteNodeType(model, label) {
+  return model.filter((s) => typeLabel(s) !== label).map((s) => {
+    const xg = s["x-graph"];
+    const relations = xg.relations?.filter((r) => r.to_type_name !== label);
+    const inherits = xg.inherits_from?.filter((p) => p !== label);
+    return {
+      ...s,
+      "x-graph": {
+        ...xg,
+        ...relations ? { relations } : {},
+        ...inherits ? { inherits_from: inherits } : {}
+      }
+    };
+  });
+}
+function deleteRelation(model, source, relType, target) {
+  const schema = findType(model, source);
+  if (!schema) return model;
+  const relations = (schema["x-graph"].relations ?? []).filter(
+    (r) => !(r.rel_type_name === relType && r.to_type_name === target)
+  );
+  const next = {
+    ...schema,
+    "x-graph": { ...schema["x-graph"], relations }
+  };
+  return replaceSchema(model, source, next);
+}
+function renameEdgeType(model, oldLabel, newLabel) {
+  const name = newLabel.trim();
+  if (!name || name === oldLabel) return model;
+  if (model.some((s) => typeLabel(s) === name)) return model;
+  const edgeType = findEdgeType(model, oldLabel);
+  if (!edgeType) return model;
+  return model.map((s) => {
+    const xg = s["x-graph"];
+    const isTarget = s === edgeType;
+    const relations = xg.relations?.map(
+      (r) => r.rel_type_name === oldLabel ? { ...r, rel_type_name: name } : r
+    );
+    return {
+      ...s,
+      ...isTarget && s.title ? { title: name } : {},
+      "x-graph": {
+        ...xg,
+        ...isTarget ? { label: name } : {},
+        ...relations ? { relations } : {}
+      }
+    };
+  });
+}
+function deleteEdgeType(model, label) {
+  return model.filter((s) => !(isEdgeType(s) && typeLabel(s) === label));
+}
+
+// src/graph-model/PropertyFormSheet.tsx
+import { useMemo as useMemo7 } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetBody,
+  SheetTitle,
+  SheetDescription
+} from "@petrarca/sonnet-ui";
+import { JsonSchemaFormRenderer } from "@petrarca/sonnet-forms";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var TYPE_OPTIONS = [
+  "string",
+  "integer",
+  "number",
+  "boolean",
+  "array",
+  "object"
+];
+var DEFAULT_WIDGETS = ["default"];
+function buildSchema(widgetOptions) {
+  return {
+    type: "object",
+    properties: {
+      name: {
+        type: "string",
+        title: "Property name",
+        description: "The JSON Schema property key."
+      },
+      type: { type: "string", title: "Type", enum: TYPE_OPTIONS },
+      required: { type: "boolean", title: "Required" },
+      title: { type: "string", title: "Title" },
+      description: {
+        type: "string",
+        title: "Description",
+        "x-ui-widget": "textarea"
+      },
+      widget: {
+        type: "string",
+        title: "Widget",
+        description: "x-ui-widget -- render this property with a specific widget.",
+        enum: widgetOptions
+      },
+      enumValues: {
+        type: "array",
+        title: "Allowed values",
+        description: "Restrict the property to a fixed set of values (leave empty for free input).",
+        items: { type: "string" },
+        "x-ui-widget": "tags"
+      }
+    },
+    required: ["name", "type"]
+  };
+}
+function toFormData(prop) {
+  if (!prop)
+    return {
+      type: "string",
+      required: false,
+      widget: "default",
+      enumValues: []
+    };
+  return {
+    name: prop.name,
+    type: prop.type,
+    required: prop.required,
+    title: prop.title ?? "",
+    description: prop.description ?? "",
+    widget: prop.widget ?? "default",
+    enumValues: prop.enum ? prop.enum.map(String) : []
+  };
+}
+function toInput(data) {
+  const raw = data.enumValues;
+  const enumValues = Array.isArray(raw) ? raw.map(String).filter((v) => v.length > 0) : void 0;
+  return {
+    name: String(data.name ?? "").trim(),
+    type: String(data.type ?? "string"),
+    required: Boolean(data.required),
+    title: data.title ? String(data.title) : void 0,
+    description: data.description ? String(data.description) : void 0,
+    widget: data.widget ? String(data.widget) : void 0,
+    enum: enumValues && enumValues.length ? enumValues : void 0
+  };
+}
+function PropertyFormSheet({
+  open,
+  onOpenChange,
+  property,
+  ownerLabel,
+  widgetOptions,
+  onSave
+}) {
+  const widgets = useMemo7(
+    () => [...DEFAULT_WIDGETS, ...widgetOptions ?? []],
+    [widgetOptions]
+  );
+  const schema = useMemo7(() => buildSchema(widgets), [widgets]);
+  const data = useMemo7(() => toFormData(property), [property]);
+  const isEdit = !!property;
+  return /* @__PURE__ */ jsx16(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs14(SheetContent, { children: [
+    /* @__PURE__ */ jsxs14(SheetHeader, { children: [
+      /* @__PURE__ */ jsxs14(SheetTitle, { children: [
+        isEdit ? "Edit property" : "Add property",
+        " ",
+        "\u2014",
+        " ",
+        ownerLabel
+      ] }),
+      /* @__PURE__ */ jsx16(SheetDescription, { children: "Define the property and how it is rendered." })
+    ] }),
+    /* @__PURE__ */ jsx16(SheetBody, { children: /* @__PURE__ */ jsx16(
+      JsonSchemaFormRenderer,
+      {
+        schema,
+        data,
+        showActions: true,
+        saveLabel: isEdit ? "Save" : "Add",
+        showExtraProperties: false,
+        onUpdate: (d) => {
+          onSave(toInput(d), property?.name);
+          onOpenChange(false);
+        },
+        onCancel: () => onOpenChange(false)
+      }
+    ) })
+  ] }) });
+}
+
+// src/graph-model/RelationFormSheet.tsx
+import { useState as useState9 } from "react";
+import {
+  Sheet as Sheet2,
+  SheetContent as SheetContent2,
+  SheetHeader as SheetHeader2,
+  SheetBody as SheetBody2,
+  SheetTitle as SheetTitle2,
+  SheetDescription as SheetDescription2,
+  Button as Button4
+} from "@petrarca/sonnet-ui";
+import { FormSelect } from "@petrarca/sonnet-forms";
+import { ArrowRight } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var CARDINALITIES = ["ONE_TO_MANY", "ONE_TO_ONE"];
+function RelationTypeField({
+  relType,
+  setRelType,
+  edgeTypeOptions,
+  edgeTypeMode
+}) {
+  const labels = Array.from(
+    /* @__PURE__ */ new Set([...edgeTypeOptions, ...relType ? [relType] : []])
+  );
+  const options = labels.map((l) => ({ value: l, label: l }));
+  const canCreate = edgeTypeMode === "edit";
+  return /* @__PURE__ */ jsx17(
+    FormSelect,
+    {
+      label: "Relation type",
+      options,
+      value: relType || null,
+      onChange: (v) => setRelType(v ?? ""),
+      allowCreate: canCreate,
+      onCreate: setRelType,
+      clearable: false,
+      placeholder: "Select an edge type",
+      searchPlaceholder: canCreate ? "Search or type to create..." : "Search edge types...",
+      emptyMessage: canCreate ? "Type a name to create a new edge type." : "No matching edge type."
+    }
+  );
+}
+function DirectionField({
+  source,
+  target,
+  canSwap,
+  onSwap
+}) {
+  return /* @__PURE__ */ jsxs15("div", { children: [
+    /* @__PURE__ */ jsx17("label", { className: "mb-1 block text-xs font-medium", children: "Direction" }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx17("span", { className: "font-medium", children: source }),
+      /* @__PURE__ */ jsx17(ArrowRight, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx17("span", { className: "font-medium", children: target }),
+      canSwap && /* @__PURE__ */ jsx17(
+        Button4,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "ml-auto",
+          onClick: onSwap,
+          children: "Swap"
+        }
+      )
+    ] })
+  ] });
+}
+function CardinalityField({
+  cardinality,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs15("div", { children: [
+    /* @__PURE__ */ jsx17("label", { className: "mb-1 block text-xs font-medium", children: "Cardinality" }),
+    /* @__PURE__ */ jsx17("div", { className: "flex gap-2", children: CARDINALITIES.map((c) => /* @__PURE__ */ jsx17(
+      Button4,
+      {
+        variant: c === cardinality ? "default" : "outline",
+        size: "sm",
+        onClick: () => onChange(c),
+        children: cardinalityLabel(c)
+      },
+      c
+    )) })
+  ] });
+}
+function RelationFormSheet({
+  open,
+  onOpenChange,
+  nodeA,
+  nodeB,
+  initial,
+  edgeTypeOptions,
+  edgeTypeMode = "edit",
+  onSave
+}) {
+  const [relType, setRelType] = useState9(initial?.relType ?? "");
+  const [swapped, setSwapped] = useState9(false);
+  const [cardinality, setCardinality] = useState9(
+    initial?.cardinality ?? "ONE_TO_MANY"
+  );
+  const source = swapped ? nodeB : nodeA;
+  const target = swapped ? nodeA : nodeB;
+  const isEdit = !!initial;
+  const canSave = relType.trim().length > 0;
+  const handleSave = () => {
+    if (!canSave) return;
+    onSave(source, target, {
+      relType: relType.trim(),
+      target,
+      cardinality
+    });
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx17(Sheet2, { open, onOpenChange, children: /* @__PURE__ */ jsxs15(SheetContent2, { children: [
+    /* @__PURE__ */ jsxs15(SheetHeader2, { children: [
+      /* @__PURE__ */ jsx17(SheetTitle2, { children: isEdit ? "Edit relation" : "Create relation" }),
+      /* @__PURE__ */ jsx17(SheetDescription2, { children: "A relation is stored on the source node type." })
+    ] }),
+    /* @__PURE__ */ jsxs15(SheetBody2, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx17(
+        RelationTypeField,
+        {
+          relType,
+          setRelType,
+          edgeTypeOptions,
+          edgeTypeMode
+        }
+      ),
+      /* @__PURE__ */ jsx17(
+        DirectionField,
+        {
+          source,
+          target,
+          canSwap: !isEdit,
+          onSwap: () => setSwapped((s) => !s)
+        }
+      ),
+      /* @__PURE__ */ jsx17(
+        CardinalityField,
+        {
+          cardinality,
+          onChange: setCardinality
+        }
+      ),
+      /* @__PURE__ */ jsxs15("div", { className: "flex justify-end gap-2 pt-2", children: [
+        /* @__PURE__ */ jsx17(Button4, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx17(Button4, { disabled: !canSave, onClick: handleSave, children: isEdit ? "Save" : "Create relation" })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/graph-model/NodeTypeNameSheet.tsx
+import { useState as useState10 } from "react";
+import {
+  Sheet as Sheet3,
+  SheetContent as SheetContent3,
+  SheetHeader as SheetHeader3,
+  SheetBody as SheetBody3,
+  SheetTitle as SheetTitle3,
+  SheetDescription as SheetDescription3,
+  Button as Button5,
+  Input as Input2
+} from "@petrarca/sonnet-ui";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function NodeTypeNameSheet({
+  open,
+  onOpenChange,
+  initial,
+  existing,
+  noun = "node",
+  onSave
+}) {
+  const [name, setName] = useState10(initial ?? "");
+  const isEdit = initial !== void 0;
+  const trimmed = name.trim();
+  const duplicate = trimmed !== initial && existing.includes(trimmed);
+  const canSave = trimmed.length > 0 && !duplicate;
+  const typeNoun = noun === "edge" ? "edge type" : "node type";
+  return /* @__PURE__ */ jsx18(Sheet3, { open, onOpenChange, children: /* @__PURE__ */ jsxs16(SheetContent3, { children: [
+    /* @__PURE__ */ jsxs16(SheetHeader3, { children: [
+      /* @__PURE__ */ jsx18(SheetTitle3, { children: isEdit ? `Rename ${typeNoun}` : `Add ${typeNoun}` }),
+      /* @__PURE__ */ jsx18(SheetDescription3, { children: "The label identifies this type and its instances." })
+    ] }),
+    /* @__PURE__ */ jsxs16(SheetBody3, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx18("label", { className: "mb-1 block text-xs font-medium", children: "Label" }),
+        /* @__PURE__ */ jsx18(
+          Input2,
+          {
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: "e.g. Hospital",
+            autoFocus: true
+          }
+        ),
+        duplicate && /* @__PURE__ */ jsx18("p", { className: "mt-1 text-xs text-destructive", children: "A type with this label already exists." })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx18(Button5, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx18(
+          Button5,
+          {
+            disabled: !canSave,
+            onClick: () => {
+              onSave(trimmed);
+              onOpenChange(false);
+            },
+            children: isEdit ? "Rename" : "Add"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/graph-model/TypeDetailPanel.tsx
+import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+function relationViewOf(view) {
+  return {
+    relType: view.relType,
+    target: view.target,
+    cardinality: view.cardinality,
+    description: view.description
+  };
+}
+function SectionTitle({
+  children,
+  action
+}) {
+  return /* @__PURE__ */ jsxs17("div", { className: "mt-4 mb-2 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx19("span", { className: "heading-meta", children }),
+    action && /* @__PURE__ */ jsx19("span", { className: "ml-auto", children: action })
+  ] });
+}
+function PropertyRows({
+  properties,
+  emptyText,
+  editable,
+  onEdit,
+  onDelete
+}) {
+  if (properties.length === 0) {
+    return /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground", children: emptyText });
+  }
+  return /* @__PURE__ */ jsx19("div", { className: "rounded-lg border divide-y", children: properties.map((p) => /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: "group/row flex items-center gap-2 px-3 py-2",
+      children: [
+        /* @__PURE__ */ jsx19("span", { className: "text-sm font-medium min-w-24", children: p.name }),
+        /* @__PURE__ */ jsxs17("span", { className: "flex-1 font-mono text-xs text-muted-foreground", children: [
+          p.type,
+          p.widget ? ` \xB7 ${p.widget}` : ""
+        ] }),
+        p.required && /* @__PURE__ */ jsx19(Badge2, { badgeColor: "orange", children: "required" }),
+        editable && /* @__PURE__ */ jsxs17("span", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx19(
+            IconButton,
+            {
+              label: "Edit property",
+              revealOnHover: true,
+              onClick: () => onEdit(p),
+              children: /* @__PURE__ */ jsx19(Pencil, {})
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            IconButton,
+            {
+              label: "Delete property",
+              tone: "destructive",
+              revealOnHover: true,
+              onClick: () => onDelete(p),
+              children: /* @__PURE__ */ jsx19(Trash2, {})
+            }
+          )
+        ] })
+      ]
+    },
+    p.name
+  )) });
+}
+function areaEditable(editable, mode) {
+  return editable && (mode ?? "edit") === "edit";
+}
+function resolveGating(kind, editable, c) {
+  const propsMode = (kind === "node" ? c?.nodeProperties : c?.edgeProperties) ?? "edit";
+  const edgeTypeEditable = editable && (c?.edgeTypes ?? "edit") === "edit";
+  return {
+    propsHidden: propsMode === "hidden",
+    propsEditable: areaEditable(editable, propsMode),
+    nodeTypeEditable: areaEditable(editable, c?.nodeTypes),
+    edgeTypeEditable,
+    relationsEditable: areaEditable(editable, c?.relations)
+  };
+}
+function resolveView(model, selection) {
+  if (selection.kind === "node") return nodeTypeView(model, selection.label);
+  if (selection.kind === "edge") return edgeTypeView(model, selection.label);
+  return relationView(
+    model,
+    selection.source,
+    selection.relType,
+    selection.target
+  );
+}
+function applySaveProperty(model, view, input, prevName) {
+  if (view.kind === "node")
+    return setNodeProperty(model, view.label, input, prevName);
+  if (view.kind === "edge")
+    return setEdgeTypeProperty(model, view.label, input, prevName);
+  return setRelationProperty(model, view.relType, input, prevName);
+}
+function applyRemoveProperty(model, view, name) {
+  if (view.kind === "node") return deleteNodeProperty(model, view.label, name);
+  if (view.kind === "edge")
+    return deleteEdgeTypeProperty(model, view.label, name);
+  return deleteRelationProperty(model, view.relType, name);
+}
+function TypeDetailPanel({
+  model,
+  selection,
+  onChange,
+  readOnly,
+  capabilities,
+  widgetOptions
+}) {
+  const [sheet, setSheet] = useState11({ open: false });
+  const [relSheet, setRelSheet] = useState11(null);
+  const [renameOpen, setRenameOpen] = useState11(false);
+  const view = resolveView(model, selection);
+  if (!view) return null;
+  const editable = !readOnly && !!onChange;
+  const ownerLabel = view.kind === "relation" ? view.relType : view.label;
+  const {
+    propsHidden,
+    propsEditable,
+    nodeTypeEditable,
+    edgeTypeEditable,
+    relationsEditable
+  } = resolveGating(view.kind, editable, capabilities);
+  const saveProperty = (input, prevName) => {
+    if (onChange) onChange(applySaveProperty(model, view, input, prevName));
+  };
+  const removeProperty = (p) => {
+    if (onChange) onChange(applyRemoveProperty(model, view, p.name));
+  };
+  const removeRelation = (r) => {
+    if (!onChange || view.kind === "edge") return;
+    const source = view.kind === "node" ? view.label : view.source;
+    onChange(deleteRelation(model, source, r.relType, r.target));
+  };
+  const saveRelation = (source, _target, input, prev) => {
+    if (!onChange) return;
+    onChange(updateRelation(model, source, prev.relType, prev.target, input));
+  };
+  const propertiesSection = propsHidden ? null : /* @__PURE__ */ jsx19(
+    PropertiesSection,
+    {
+      view,
+      editable: propsEditable,
+      onAdd: () => setSheet({ open: true, property: void 0 }),
+      onEdit: (p) => setSheet({ open: true, property: p }),
+      onDelete: removeProperty
+    }
+  );
+  return /* @__PURE__ */ jsxs17("div", { children: [
+    view.kind === "node" ? /* @__PURE__ */ jsx19(
+      NodeDetail,
+      {
+        view,
+        nodeTypeEditable,
+        relationsEditable,
+        onRename: () => setRenameOpen(true),
+        onDelete: () => onChange?.(deleteNodeType(model, view.label)),
+        onEditRelation: setRelSheet,
+        onDeleteRelation: removeRelation,
+        children: propertiesSection
+      }
+    ) : view.kind === "edge" ? /* @__PURE__ */ jsx19(
+      EdgeDetail,
+      {
+        view,
+        editable: edgeTypeEditable,
+        onRename: () => setRenameOpen(true),
+        onDelete: () => onChange?.(deleteEdgeType(model, view.label)),
+        children: propertiesSection
+      }
+    ) : /* @__PURE__ */ jsx19(
+      RelationDetail,
+      {
+        view,
+        editable: relationsEditable,
+        onEdit: () => setRelSheet(relationViewOf(view)),
+        onDelete: () => removeRelation(relationViewOf(view)),
+        children: propertiesSection
+      }
+    ),
+    editable && /* @__PURE__ */ jsx19(
+      DetailSheets,
+      {
+        model,
+        view,
+        ownerLabel,
+        widgetOptions,
+        edgeTypeMode: capabilities?.edgeTypes ?? "edit",
+        sheet,
+        setSheet,
+        relSheet,
+        setRelSheet,
+        renameOpen,
+        setRenameOpen,
+        onSaveProperty: saveProperty,
+        onSaveRelation: saveRelation,
+        onRename: (label) => {
+          if (!onChange) return;
+          if (view.kind === "node")
+            onChange(renameNodeType(model, view.label, label));
+          else if (view.kind === "edge")
+            onChange(renameEdgeType(model, view.label, label));
+        }
+      }
+    )
+  ] });
+}
+function DetailSheets({
+  model,
+  view,
+  ownerLabel,
+  widgetOptions,
+  edgeTypeMode,
+  sheet,
+  setSheet,
+  relSheet,
+  setRelSheet,
+  renameOpen,
+  setRenameOpen,
+  onSaveProperty,
+  onSaveRelation,
+  onRename
+}) {
+  const edgeTypeOptions = model.filter(isEdgeType).map(typeLabel);
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx19(
+      PropertyFormSheet,
+      {
+        open: sheet.open,
+        onOpenChange: (o) => setSheet((s) => ({ ...s, open: o })),
+        property: sheet.property,
+        ownerLabel,
+        widgetOptions,
+        onSave: onSaveProperty
+      }
+    ),
+    relSheet && (view.kind === "node" || view.kind === "relation") && /* @__PURE__ */ jsx19(
+      RelationFormSheet,
+      {
+        open: !!relSheet,
+        onOpenChange: (o) => !o && setRelSheet(null),
+        nodeA: view.kind === "node" ? view.label : view.source,
+        nodeB: relSheet.target,
+        initial: {
+          relType: relSheet.relType,
+          cardinality: relSheet.cardinality
+        },
+        edgeTypeOptions,
+        edgeTypeMode,
+        onSave: (source, target, input) => onSaveRelation(source, target, input, relSheet)
+      },
+      `${relSheet.relType}:${relSheet.target}`
+    ),
+    (view.kind === "node" || view.kind === "edge") && renameOpen && /* @__PURE__ */ jsx19(
+      NodeTypeNameSheet,
+      {
+        open: renameOpen,
+        onOpenChange: setRenameOpen,
+        initial: view.label,
+        existing: model.map(typeLabel),
+        noun: view.kind === "edge" ? "edge" : "node",
+        onSave: onRename
+      },
+      view.label
+    )
+  ] });
+}
+function PropertiesSection({
+  view,
+  editable,
+  onAdd,
+  onEdit,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx19(
+      SectionTitle,
+      {
+        action: editable ? /* @__PURE__ */ jsx19(IconButton, { label: "Add property", onClick: onAdd, children: /* @__PURE__ */ jsx19(Plus, {}) }) : void 0,
+        children: "Properties"
+      }
+    ),
+    /* @__PURE__ */ jsx19(
+      PropertyRows,
+      {
+        properties: view.properties,
+        emptyText: "No properties yet.",
+        editable,
+        onEdit,
+        onDelete
+      }
+    )
+  ] });
+}
+function NodeDetail({
+  view,
+  nodeTypeEditable,
+  relationsEditable,
+  onRename,
+  onDelete,
+  onEditRelation,
+  onDeleteRelation,
+  children
+}) {
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx19("span", { className: "text-base font-semibold", children: view.label }),
+      /* @__PURE__ */ jsx19(Badge2, { children: "NODE TYPE" }),
+      nodeTypeEditable && /* @__PURE__ */ jsx19(
+        RenameDeleteActions,
+        {
+          noun: "node type",
+          onRename,
+          onDelete
+        }
+      )
+    ] }),
+    view.description && /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
+    children,
+    /* @__PURE__ */ jsx19(SectionTitle, { children: "Relations" }),
+    view.relations.length === 0 ? /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground", children: "No relations." }) : /* @__PURE__ */ jsx19("div", { className: "rounded-lg border divide-y", children: view.relations.map((r) => /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        className: "group/row flex items-center gap-2 px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsx19("span", { className: "text-sm font-medium min-w-24", children: r.relType }),
+          /* @__PURE__ */ jsxs17("span", { className: "flex-1 font-mono text-xs text-muted-foreground", children: [
+            "\u2192",
+            " ",
+            r.target,
+            " ",
+            "\xB7",
+            " ",
+            cardinalityLabel(r.cardinality)
+          ] }),
+          relationsEditable && /* @__PURE__ */ jsxs17("span", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx19(
+              IconButton,
+              {
+                label: "Edit relation",
+                revealOnHover: true,
+                onClick: () => onEditRelation(r),
+                children: /* @__PURE__ */ jsx19(Pencil, {})
+              }
+            ),
+            /* @__PURE__ */ jsx19(
+              IconButton,
+              {
+                label: "Delete relation",
+                tone: "destructive",
+                revealOnHover: true,
+                onClick: () => onDeleteRelation(r),
+                children: /* @__PURE__ */ jsx19(Trash2, {})
+              }
+            )
+          ] })
+        ]
+      },
+      `${r.relType}:${r.target}`
+    )) })
+  ] });
+}
+function EdgeTypeNote({
+  children
+}) {
+  return /* @__PURE__ */ jsx19("p", { className: "mt-3 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground", children });
+}
+function RenameDeleteActions({
+  noun,
+  editVerb = "Rename",
+  onRename,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsxs17("span", { className: "ml-auto flex gap-1", children: [
+    /* @__PURE__ */ jsx19(IconButton, { label: `${editVerb} ${noun}`, onClick: onRename, children: /* @__PURE__ */ jsx19(Pencil, {}) }),
+    /* @__PURE__ */ jsx19(
+      IconButton,
+      {
+        label: `Delete ${noun}`,
+        tone: "destructive",
+        onClick: onDelete,
+        children: /* @__PURE__ */ jsx19(Trash2, {})
+      }
+    )
+  ] });
+}
+function EdgeDetail({
+  view,
+  editable,
+  onRename,
+  onDelete,
+  children
+}) {
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx19("span", { className: "text-base font-semibold", children: view.label }),
+      /* @__PURE__ */ jsx19(Badge2, { children: "EDGE TYPE" }),
+      editable && /* @__PURE__ */ jsx19(
+        RenameDeleteActions,
+        {
+          noun: "edge type",
+          onRename,
+          onDelete
+        }
+      )
+    ] }),
+    view.description && /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
+    /* @__PURE__ */ jsxs17(EdgeTypeNote, { children: [
+      "These properties belong to the",
+      " ",
+      /* @__PURE__ */ jsx19("span", { className: "font-medium", children: view.label }),
+      " edge type and are shared by every relation of this type."
+    ] }),
+    children
+  ] });
+}
+function RelationDetail({
+  view,
+  editable,
+  onEdit,
+  onDelete,
+  children
+}) {
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx19("span", { className: "text-base font-semibold", children: view.relType }),
+      /* @__PURE__ */ jsx19(Badge2, { children: "RELATION" }),
+      editable && /* @__PURE__ */ jsx19(
+        RenameDeleteActions,
+        {
+          noun: "relation",
+          editVerb: "Edit",
+          onRename: onEdit,
+          onDelete
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs17("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx19("span", { className: "font-medium text-foreground", children: view.source }),
+      " \u2192 ",
+      /* @__PURE__ */ jsx19("span", { className: "font-medium text-foreground", children: view.target }),
+      " \xB7 ",
+      cardinalityLabel(view.cardinality)
+    ] }),
+    /* @__PURE__ */ jsxs17(EdgeTypeNote, { children: [
+      "Properties are defined on the",
+      " ",
+      /* @__PURE__ */ jsx19("span", { className: "font-medium", children: view.relType }),
+      " edge type, shared by every relation of this type -- not on this single relation."
+    ] }),
+    children
+  ] });
+}
+
+// src/graph-model/capabilities.ts
+import { z } from "zod";
+import { warnLog } from "@petrarca/sonnet-core";
+var capabilitiesSchema = z.object({
+  nodeTypes: z.enum(["edit", "readonly"]).default("edit").meta({
+    description: "Node types (add / rename / delete). 'edit' (default): add new types, rename and delete from the panel. 'readonly': types are shown but cannot be added, renamed, or deleted. No 'hidden': node types are the canvas nodes and are always present."
+  }),
+  edgeTypes: z.enum(["edit", "catalog", "readonly"]).default("edit").meta({
+    description: "Edge-type catalog governance for relation creation. 'edit' (default): select an existing edge type or create one inline, plus 'Add edge type' and edge-type rename/delete. 'catalog': select only from existing edge types; no create/rename/delete. 'readonly': no edge-type changes."
+  }),
+  nodeProperties: z.enum(["edit", "readonly", "hidden"]).default("edit").meta({
+    description: "Node-type properties. 'edit' (default): add / edit / delete. 'readonly': shown, but no add / edit / delete affordances. 'hidden': the Properties section is not rendered."
+  }),
+  edgeProperties: z.enum(["edit", "readonly", "hidden"]).default("edit").meta({
+    description: "Edge-type / relation properties (defined on the edge type, shared by every relation of that type). 'edit' (default): add / edit / delete. 'readonly': shown, but not editable. 'hidden': the Properties section is not rendered."
+  }),
+  relations: z.enum(["edit", "readonly"]).default("edit").meta({
+    description: "Relations between node types (create / edit / delete). 'edit' (default): create (select two nodes), edit, and delete relations. 'readonly': relations are shown but cannot be changed. How the relation type is chosen is governed by edgeTypes."
+  }),
+  showEdgeTypes: z.boolean().default(false).meta({
+    description: "Whether edge-type nodes (the catalog of relationship types) are shown on the canvas initially. false (default): edge types start filtered out (re-enable from the Edge types legend). true: shown from the start."
+  })
+}).meta({
+  id: "GraphModelCapabilities",
+  title: "GraphModelCapabilities",
+  description: "Capability profile for GraphModelEditor. Gates what a consumer can edit. Every field is optional and defaults to the most permissive value (forward-compatible). Passing readOnly to the editor overrides this object to a fully-locked profile."
+});
+var LOCKED = {
+  nodeTypes: "readonly",
+  edgeTypes: "readonly",
+  nodeProperties: "readonly",
+  edgeProperties: "readonly",
+  relations: "readonly",
+  showEdgeTypes: false
+};
+function resolveCapabilities(capabilities, readOnly) {
+  if (readOnly) return LOCKED;
+  const parsed = capabilitiesSchema.safeParse(capabilities ?? {});
+  if (!parsed.success) {
+    warnLog(
+      "[GraphModelEditor] Invalid capabilities \u2014 falling back to defaults.",
+      parsed.error.issues
+    );
+    return capabilitiesSchema.parse({});
+  }
+  return parsed.data;
+}
+function validateCapabilities(input) {
+  const parsed = capabilitiesSchema.safeParse(input);
+  if (parsed.success) return { ok: true, value: parsed.data };
+  const errors = parsed.error.issues.map((i) => {
+    const path = i.path.length ? i.path.join(".") : "(root)";
+    return `${path}: ${i.message}`;
+  });
+  return { ok: false, errors };
+}
+
+// src/graph-model/ModelActionPanel.tsx
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function nodeTypeLabels(model) {
+  return model.filter(isNodeType).map(typeLabel);
+}
+function edgeTypeLabels(model) {
+  return model.filter(isEdgeType).map(typeLabel);
+}
+function CreateRelationPrompt({
+  nodeA,
+  nodeB,
+  model,
+  edgeTypeMode,
+  onChange
+}) {
+  const [open, setOpen] = useState12(false);
+  return /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsxs18("div", { className: "text-sm", children: [
+      /* @__PURE__ */ jsx20("span", { className: "font-medium", children: nodeA }),
+      " and ",
+      /* @__PURE__ */ jsx20("span", { className: "font-medium", children: nodeB }),
+      " selected."
+    ] }),
+    /* @__PURE__ */ jsxs18(Button6, { size: "sm", className: "mt-3 gap-1.5", onClick: () => setOpen(true), children: [
+      /* @__PURE__ */ jsx20(GitBranchPlus, { className: "h-4 w-4" }),
+      "Create relation"
+    ] }),
+    /* @__PURE__ */ jsx20(
+      RelationFormSheet,
+      {
+        open,
+        onOpenChange: setOpen,
+        nodeA,
+        nodeB,
+        edgeTypeOptions: edgeTypeLabels(model),
+        edgeTypeMode,
+        onSave: (source, _target, input) => onChange(addRelation(model, source, input))
+      }
+    )
+  ] });
+}
+function ModelActionPanel({
+  model,
+  onChange,
+  readOnly,
+  capabilities,
+  widgetOptions
+}) {
+  const caps = resolveCapabilities(capabilities, readOnly);
+  const useSelection3 = useWorkspaceSelection();
+  const selectedNodeIds = useSelection3(
+    (s) => s.selectedNodeIds
+  );
+  const selectedEdge = useSelection3((s) => s.selectedEdge);
+  const live = useLiveGraphData();
+  const labelsById = (ids) => ids.map((id) => live.normalized.nodesById[id]?.label_).filter((l) => !!l);
+  const selection = useMemo8(() => {
+    if (selectedEdge) {
+      const r = resolveRelationEdge(selectedEdge);
+      if (r) {
+        return {
+          kind: "relation",
+          source: r.source,
+          relType: r.relType,
+          target: r.target
+        };
+      }
+    }
+    const firstId = selectedNodeIds[0];
+    if (selectedNodeIds.length === 1 && firstId != null) {
+      const node = live.normalized.nodesById[firstId];
+      if (node) {
+        const schema = findType(model, node.label_);
+        const kind = schema && isEdgeType(schema) ? "edge" : "node";
+        return { kind, label: node.label_ };
+      }
+    }
+    return null;
+  }, [selectedEdge, selectedNodeIds, live.normalized, model]);
+  const twoLabels = selectedNodeIds.length === 2 && !selectedEdge ? labelsById(selectedNodeIds).filter((l) => {
+    const schema = findType(model, l);
+    return schema ? isNodeType(schema) : false;
+  }) : [];
+  return /* @__PURE__ */ jsx20("div", { className: "h-full overflow-auto p-4", children: /* @__PURE__ */ jsx20(
+    PanelBody,
+    {
+      model,
+      onChange,
+      readOnly,
+      caps,
+      widgetOptions,
+      selection,
+      twoLabels
+    }
+  ) });
+}
+function PanelBody({
+  model,
+  onChange,
+  readOnly,
+  caps,
+  widgetOptions,
+  selection,
+  twoLabels
+}) {
+  if (selection) {
+    return /* @__PURE__ */ jsx20(
+      TypeDetailPanel,
+      {
+        model,
+        selection,
+        onChange,
+        readOnly,
+        capabilities: caps,
+        widgetOptions
+      }
+    );
+  }
+  const canEdit = !readOnly && !!onChange;
+  if (twoLabels.length === 2 && canEdit && caps.relations === "edit") {
+    return /* @__PURE__ */ jsx20(
+      CreateRelationPrompt,
+      {
+        nodeA: twoLabels[0],
+        nodeB: twoLabels[1],
+        model,
+        edgeTypeMode: caps.edgeTypes,
+        onChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+    canEdit && /* @__PURE__ */ jsx20(
+      AddTypeToolbar,
+      {
+        model,
+        onChange,
+        canAddNode: caps.nodeTypes === "edit",
+        canAddEdge: caps.edgeTypes === "edit"
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      Overview_default,
+      {
+        nodeBuckets: [
+          { title: "Node types", labels: nodeTypeLabels(model) },
+          { title: "Edge types", labels: edgeTypeLabels(model) }
+        ],
+        edgeSectionTitle: "Relations"
+      }
+    )
+  ] });
+}
+function AddTypeIconButton({
+  tooltip,
+  icon,
+  noun,
+  existing,
+  onSave
+}) {
+  const [open, setOpen] = useState12(false);
+  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+    /* @__PURE__ */ jsx20(
+      IconButton2,
+      {
+        label: tooltip,
+        variant: "outline",
+        onClick: () => setOpen(true),
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      NodeTypeNameSheet,
+      {
+        open,
+        onOpenChange: setOpen,
+        existing,
+        noun,
+        onSave
+      }
+    )
+  ] });
+}
+function AddTypeToolbar({
+  model,
+  onChange,
+  canAddNode,
+  canAddEdge
+}) {
+  if (!canAddNode && !canAddEdge) return null;
+  const existing = model.map(typeLabel);
+  return /* @__PURE__ */ jsxs18("div", { className: "mb-3 flex gap-1.5", children: [
+    canAddNode && /* @__PURE__ */ jsx20(
+      AddTypeIconButton,
+      {
+        tooltip: "Add node type",
+        icon: /* @__PURE__ */ jsx20(CirclePlus, {}),
+        noun: "node",
+        existing,
+        onSave: (name) => onChange(addNodeType(model, name))
+      }
+    ),
+    canAddEdge && /* @__PURE__ */ jsx20(
+      AddTypeIconButton,
+      {
+        tooltip: "Add edge type",
+        icon: /* @__PURE__ */ jsx20(Waypoints, {}),
+        noun: "edge",
+        existing,
+        onSave: (name) => onChange(addEdgeType(model, name))
+      }
+    )
+  ] });
+}
+
+// src/graph-model/GraphModelEditor.tsx
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+function createEditorStores() {
+  const graphFilter = createGraphFilterStore();
+  const graphData = createGraphDataStore();
+  const selection = createSelectionStore();
+  const graphFocus = createGraphFocusStore();
+  const graphExploration = createGraphExplorationStore({
+    graphData,
+    selection,
+    graphFocus,
+    graphFilter,
+    expandNode: async () => ({ nodes: [], edges: [], has_more: false }),
+    getNodes: async () => []
+  });
+  return { graphFilter, graphData, graphExploration, selection };
+}
+function loadModel(stores, model) {
+  const { nodes: rawNodes, edges: rawEdges } = modelToGraph(model);
+  const labelCounts = {};
+  for (const n of rawNodes) {
+    labelCounts[n.label_] = (labelCounts[n.label_] ?? 0) + 1;
+  }
+  const palette = buildColorPalette(labelCounts);
+  const nodes = enrichNodes(rawNodes, palette);
+  const edges = enrichEdges(rawEdges, palette);
+  stores.graphData.getState().setQueryData(nodes, edges, { nodes: nodes.length, edges: edges.length });
+  stores.graphFilter.getState().notifyDataChange();
+}
+function GraphModelEditor({
+  value,
+  readOnly,
+  capabilities,
+  onChange,
+  widgetOptions,
+  defaultRenderer = "cytoscape",
+  hideActionPanel = false
+}) {
+  const storesRef = useRef6(null);
+  if (!storesRef.current) storesRef.current = createEditorStores();
+  const stores = storesRef.current;
+  const caps = resolveCapabilities(capabilities, readOnly);
+  const showEdgeTypes = caps.showEdgeTypes;
+  const firstLoadRef = useRef6(true);
+  const prevShowEdgeTypesRef = useRef6(showEdgeTypes);
+  useEffect5(() => {
+    loadModel(stores, value);
+    const filter = stores.graphFilter.getState();
+    const baselineReset = firstLoadRef.current || prevShowEdgeTypesRef.current !== showEdgeTypes;
+    const next = reconcileFilter(
+      filter.nodeLabelFilters,
+      value,
+      baselineReset,
+      showEdgeTypes
+    );
+    filter.setNodeLabelFilters(next);
+    firstLoadRef.current = false;
+    prevShowEdgeTypesRef.current = showEdgeTypes;
+  }, [stores, value, showEdgeTypes]);
+  const rowRef = useRef6(null);
+  const [panelWidth, setPanelWidth] = useState13(380);
+  const startResize = useCallback7((e) => {
+    e.preventDefault();
+    const target = e.currentTarget;
+    target.setPointerCapture(e.pointerId);
+    const move = (ev) => {
+      const right = rowRef.current?.getBoundingClientRect().right ?? 0;
+      setPanelWidth(Math.min(640, Math.max(300, right - ev.clientX)));
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  }, []);
+  return /* @__PURE__ */ jsx21(GraphStoresContext.Provider, { value: stores, children: /* @__PURE__ */ jsx21(GraphRendererProvider, { defaultRenderer, children: /* @__PURE__ */ jsxs19("div", { ref: rowRef, className: "flex w-full h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx21("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx21(GraphVisualizer_default, {}) }),
+    !hideActionPanel && /* @__PURE__ */ jsxs19(Fragment6, { children: [
+      /* @__PURE__ */ jsx21(
+        ResizeHandle,
+        {
+          orientation: "vertical",
+          "aria-valuenow": panelWidth,
+          "aria-valuemin": 300,
+          "aria-valuemax": 640,
+          onPointerDown: startResize,
+          onDoubleClick: () => setPanelWidth(380)
+        }
+      ),
+      /* @__PURE__ */ jsx21(
+        "div",
+        {
+          style: { width: panelWidth },
+          className: "shrink-0 border-l overflow-hidden bg-card",
+          children: /* @__PURE__ */ jsx21(
+            ModelActionPanel,
+            {
+              model: value,
+              onChange,
+              readOnly,
+              capabilities,
+              widgetOptions
+            }
+          )
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+// src/graph-edit/capabilities.ts
+import { z as z2 } from "zod";
+import { warnLog as warnLog2 } from "@petrarca/sonnet-core";
+var graphCapabilitiesSchema = z2.object({
+  createNode: z2.enum(["edit", "readonly"]).default("readonly").meta({
+    description: "Create new nodes. 'edit': the add-node affordance is shown. 'readonly' (default): hidden."
+  }),
+  updateNode: z2.enum(["edit", "readonly"]).default("readonly").meta({
+    description: "Edit existing nodes (properties and relations). 'edit': the edit-node affordance is shown. 'readonly' (default): hidden."
+  }),
+  deleteNode: z2.enum(["edit", "readonly"]).default("readonly").meta({
+    description: "Delete nodes. 'edit': the delete-node affordance is shown. 'readonly' (default): hidden."
+  }),
+  createEdge: z2.enum(["edit", "readonly"]).default("readonly").meta({
+    description: "Create edges between two selected nodes. 'edit': the add-edge affordance is shown. 'readonly' (default): hidden."
+  }),
+  updateEdge: z2.enum(["edit", "readonly"]).default("readonly").meta({
+    description: "Edit edge properties. 'edit': the edit-edge affordance is shown. 'readonly' (default): hidden."
+  }),
+  deleteEdge: z2.enum(["edit", "readonly"]).default("readonly").meta({
+    description: "Delete edges. 'edit': the delete-edge affordance is shown. 'readonly' (default): hidden."
+  })
+}).meta({
+  id: "GraphCapabilities",
+  title: "GraphCapabilities",
+  description: "Capability profile for the graph viewer + instance editor. Gates what a consumer can do with a live data graph. Every field is optional and defaults to read-only (no editing affordances) so existing viewers are unaffected until a consumer opts in. Passing readOnly to the editor overrides this object to a fully read-only profile."
+});
+var READ_ONLY = {
+  createNode: "readonly",
+  updateNode: "readonly",
+  deleteNode: "readonly",
+  createEdge: "readonly",
+  updateEdge: "readonly",
+  deleteEdge: "readonly"
+};
+function resolveGraphCapabilities(capabilities, readOnly) {
+  if (readOnly) return READ_ONLY;
+  const parsed = graphCapabilitiesSchema.safeParse(capabilities ?? {});
+  if (!parsed.success) {
+    warnLog2(
+      "[GraphEditor] Invalid capabilities \u2014 falling back to defaults.",
+      parsed.error.issues
+    );
+    return graphCapabilitiesSchema.parse({});
+  }
+  return parsed.data;
+}
+function validateGraphCapabilities(input) {
+  const parsed = graphCapabilitiesSchema.safeParse(input);
+  if (parsed.success) return { ok: true, value: parsed.data };
+  const errors = parsed.error.issues.map((i) => {
+    const path = i.path.length ? i.path.join(".") : "(root)";
+    return `${path}: ${i.message}`;
+  });
+  return { ok: false, errors };
+}
+
+// src/graph-edit/relationFields.ts
+var REL_PREFIX = "__rel_";
+var REL_SUFFIX = "__";
+function isRelationField(key) {
+  return key.startsWith(REL_PREFIX) && key.endsWith(REL_SUFFIX);
+}
+function relationFieldName(relationType) {
+  return `${REL_PREFIX}${relationType.toLowerCase()}${REL_SUFFIX}`;
+}
+function relationTypeFromField(fieldName) {
+  return fieldName.slice(REL_PREFIX.length, -REL_SUFFIX.length).toUpperCase();
+}
+function groupEdgesByRelation(nodeId2, edges) {
+  const relations = {};
+  for (const edge of edges) {
+    const targetId = edge.start_id_ === nodeId2 ? edge.end_id_ : edge.start_id_;
+    (relations[edge.label_] ??= []).push(targetId);
+  }
+  return relations;
+}
+function initializeFormData(properties, relations, editableRelationTypes) {
+  const formData = { ...properties };
+  for (const relationType of editableRelationTypes) {
+    const ids = relations[relationType] ?? [];
+    formData[relationFieldName(relationType)] = ids.map(String);
+  }
+  return formData;
+}
+function extractRelationFields(formData) {
+  const properties = {};
+  const relations = {};
+  for (const [key, value] of Object.entries(formData)) {
+    if (isRelationField(key)) {
+      const relationType = relationTypeFromField(key);
+      if (Array.isArray(value)) {
+        relations[relationType] = value.map(Number);
+      } else if (value != null) {
+        relations[relationType] = [Number(value)];
+      } else {
+        relations[relationType] = [];
+      }
+    } else {
+      properties[key] = value;
+    }
+  }
+  return { properties, relations };
+}
+function hasRelationFields(formData) {
+  return Object.keys(formData).some(isRelationField);
+}
+function relationTitle(relationType) {
+  return relationType.toLowerCase().split("_").map((w) => w ? w.charAt(0).toUpperCase() + w.slice(1) : w).join(" ");
+}
+function editableRelations(relations) {
+  return relations.filter((r) => r.form_field === true);
+}
+function hasProperties(schema) {
+  return !!schema && Object.keys(schema.properties ?? {}).length > 0;
+}
+var DEFAULT_RELATION_WIDGET = "entity-select";
+function enrichSchemaWithRelations(baseSchema, relations) {
+  const editable = editableRelations(relations);
+  if (editable.length === 0) {
+    return { schema: baseSchema, uiSchema: {} };
+  }
+  const properties = {
+    ...baseSchema.properties ?? {}
+  };
+  const uiSchema = {};
+  for (const rel of editable) {
+    const fieldName = relationFieldName(rel.rel_type_name);
+    const multiple = rel.cardinality !== "ONE_TO_ONE";
+    const title = rel.title ?? relationTitle(rel.rel_type_name);
+    properties[fieldName] = multiple ? { type: "array", items: { type: "integer" }, title } : { type: "integer", title };
+    uiSchema[fieldName] = {
+      "x-ui-widget": rel.widget ?? DEFAULT_RELATION_WIDGET,
+      "x-ui-options": {
+        targetType: rel.to_type_name,
+        multiple,
+        relationType: rel.rel_type_name
+      }
+    };
+  }
+  const schema = {
+    ...baseSchema,
+    properties
+  };
+  return { schema, uiSchema };
+}
+
+// src/graph-edit/GraphEditToolbar.tsx
+import { useCallback as useCallback11, useMemo as useMemo11, useState as useState17 } from "react";
+import { IconButton as IconButton4 } from "@petrarca/sonnet-ui";
+import { Plus as Plus3, Edit, Link, Trash2 as Trash23 } from "lucide-react";
+
+// src/graph-edit/NodeFormSheet.tsx
+import {
+  useCallback as useCallback8,
+  useEffect as useEffect6,
+  useMemo as useMemo9,
+  useRef as useRef7,
+  useState as useState14
+} from "react";
+import {
+  Sheet as Sheet4,
+  SheetContent as SheetContent4,
+  SheetHeader as SheetHeader4,
+  SheetBody as SheetBody4,
+  SheetTitle as SheetTitle4,
+  SheetDescription as SheetDescription4,
+  Alert
+} from "@petrarca/sonnet-ui";
+import {
+  FormSelect as FormSelect2,
+  FormCheckbox,
+  JsonSchemaFormRenderer as JsonSchemaFormRenderer2
+} from "@petrarca/sonnet-forms";
+import { errorLog as errorLog4 } from "@petrarca/sonnet-core";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+var EMPTY_RESOLVED = {
+  schema: null,
+  uiSchema: {},
+  relationTypes: []
+};
+function temporarySchema(properties) {
+  const props = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (key.endsWith("_")) continue;
+    const type = Array.isArray(value) ? "array" : typeof value;
+    props[key] = { type, title: key };
+  }
+  return { type: "object", properties: props };
+}
+function resolveBaseSchema(provided, node) {
+  if (provided) return provided;
+  const properties = node?.properties_;
+  if (properties && Object.keys(properties).length > 0) {
+    return temporarySchema(properties);
+  }
+  return { type: "object", properties: {} };
+}
+function useNodeSchema(schemaProvider, label, node) {
+  const [resolved, setResolved] = useState14(EMPTY_RESOLVED);
+  const nodeRef = useRef7(node);
+  nodeRef.current = node;
+  useEffect6(() => {
+    let cancelled = false;
+    if (!label) {
+      setResolved(EMPTY_RESOLVED);
+      return;
+    }
+    void (async () => {
+      try {
+        const [provided, rels] = await Promise.all([
+          schemaProvider.getNodeSchema(label),
+          schemaProvider.relationsFor(label)
+        ]);
+        if (cancelled) return;
+        const base = resolveBaseSchema(provided, nodeRef.current);
+        const editable = editableRelations(rels);
+        const { schema, uiSchema } = enrichSchemaWithRelations(base, editable);
+        setResolved({
+          schema,
+          uiSchema,
+          relationTypes: editable.map((r) => r.rel_type_name)
+        });
+      } catch (e) {
+        if (cancelled) return;
+        errorLog4("[NodeFormSheet] failed to load node schema", e);
+        setResolved({
+          schema: resolveBaseSchema(null, nodeRef.current),
+          uiSchema: {},
+          relationTypes: []
+        });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [schemaProvider, label]);
+  return resolved;
+}
+function useExistingFormData(port, node, relationTypes) {
+  const [data, setData] = useState14(null);
+  const nodeId2 = node?.id_;
+  const propertiesRef = useRef7(node?.properties_);
+  propertiesRef.current = node?.properties_;
+  useEffect6(() => {
+    let cancelled = false;
+    if (nodeId2 == null) {
+      setData(null);
+      return;
+    }
+    const properties = propertiesRef.current ?? {};
+    if (relationTypes.length === 0) {
+      setData({ ...properties });
+      return;
+    }
+    void (async () => {
+      try {
+        const [inbound, outbound] = await Promise.all([
+          port.getInboundEdges(nodeId2),
+          port.getOutboundEdges(nodeId2)
+        ]);
+        if (cancelled) return;
+        const relations = groupEdgesByRelation(nodeId2, [
+          ...inbound,
+          ...outbound
+        ]);
+        setData(initializeFormData(properties, relations, relationTypes));
+      } catch (e) {
+        if (cancelled) return;
+        errorLog4("[NodeFormSheet] failed to load node relations", e);
+        setData({ ...properties });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [port, nodeId2, relationTypes]);
+  return data;
+}
+function LabelField({
+  isEdit,
+  selectedLabel,
+  labels,
+  onSelect
+}) {
+  if (isEdit) {
+    return /* @__PURE__ */ jsxs20("div", { children: [
+      /* @__PURE__ */ jsx22("span", { className: "heading-meta block", children: "Label" }),
+      /* @__PURE__ */ jsx22("span", { className: "text-sm text-muted-foreground", children: selectedLabel })
+    ] });
+  }
+  return /* @__PURE__ */ jsx22(
+    FormSelect2,
+    {
+      label: "Label",
+      options: labels.map((l) => ({ value: l, label: l })),
+      clearable: false,
+      value: selectedLabel,
+      onChange: onSelect
+    }
+  );
+}
+function useCreateModeLabels(schemaProvider, open, isEdit) {
+  const [labels, setLabels] = useState14([]);
+  useEffect6(() => {
+    let cancelled = false;
+    if (!open || isEdit) return;
+    void schemaProvider.listNodeLabels().then((ls) => {
+      if (!cancelled) setLabels(ls);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, isEdit, schemaProvider]);
+  return labels;
+}
+function NodeForm({
+  formKey,
+  schema,
+  uiSchema,
+  data,
+  widgets,
+  isEdit,
+  onSave,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsx22(
+    JsonSchemaFormRenderer2,
+    {
+      schema,
+      uiSchema,
+      data,
+      widgets,
+      showActions: true,
+      allowPristineSave: !isEdit,
+      saveLabel: isEdit ? "Save" : "Create",
+      cancelLabel: "Cancel",
+      showExtraProperties: true,
+      onUpdate: onSave,
+      onCancel
+    },
+    formKey
+  );
+}
+function NodeFormSheetBody({
+  isEdit,
+  selectedLabel,
+  labels,
+  onSelectLabel,
+  schema,
+  uiSchema,
+  formKey,
+  formData,
+  widgets,
+  error,
+  keepOpen,
+  onKeepOpenChange,
+  onSave,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxs20(Fragment7, { children: [
+    /* @__PURE__ */ jsxs20(SheetHeader4, { children: [
+      /* @__PURE__ */ jsx22(SheetTitle4, { children: isEdit ? "Edit node" : "Add node" }),
+      /* @__PURE__ */ jsx22(SheetDescription4, { children: isEdit ? "Edit this node's properties and relations." : "Create a node and (optionally) its relations." })
+    ] }),
+    /* @__PURE__ */ jsxs20(SheetBody4, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx22(
+        LabelField,
+        {
+          isEdit,
+          selectedLabel,
+          labels,
+          onSelect: onSelectLabel
+        }
+      ),
+      schema && /* @__PURE__ */ jsx22(
+        NodeForm,
+        {
+          formKey,
+          schema,
+          uiSchema,
+          data: formData,
+          widgets,
+          isEdit,
+          onSave,
+          onCancel
+        }
+      ),
+      !isEdit && /* @__PURE__ */ jsx22(
+        FormCheckbox,
+        {
+          label: "Create another node",
+          checked: keepOpen,
+          onChange: (c) => onKeepOpenChange(c === true)
+        }
+      ),
+      error && /* @__PURE__ */ jsx22(Alert, { variant: "destructive", children: error })
+    ] })
+  ] });
+}
+function NodeFormSheet({
+  open,
+  onOpenChange,
+  node,
+  port,
+  schemaProvider,
+  widgets,
+  onSaved
+}) {
+  const isEdit = !!node?.id_;
+  const [selectedLabel, setSelectedLabel] = useState14(
+    node?.label_ ?? null
+  );
+  const [error, setError] = useState14("");
+  const [keepOpen, setKeepOpen] = useState14(false);
+  const [formNonce, setFormNonce] = useState14(0);
+  const labels = useCreateModeLabels(schemaProvider, open, isEdit);
+  useEffect6(() => {
+    if (open) {
+      setSelectedLabel(node?.label_ ?? null);
+      setError("");
+      setKeepOpen(false);
+      setFormNonce(0);
+    }
+  }, [open, node]);
+  const { schema, uiSchema, relationTypes } = useNodeSchema(
+    schemaProvider,
+    selectedLabel,
+    node
+  );
+  const existingData = useExistingFormData(port, node, relationTypes);
+  const formData = useMemo9(() => existingData ?? {}, [existingData]);
+  const stableOnSaved = useStableRef(onSaved);
+  const stableOnOpenChange = useStableRef(onOpenChange);
+  const handleSave = useCallback8(
+    (data) => {
+      if (!selectedLabel) return;
+      void (async () => {
+        try {
+          const saved = await saveNode({
+            port,
+            label: selectedLabel,
+            id: node?.id_,
+            data
+          });
+          setError("");
+          stableOnSaved?.(saved);
+          if (!isEdit && keepOpen) {
+            setFormNonce((n) => n + 1);
+          } else {
+            stableOnOpenChange(false);
+          }
+        } catch (e) {
+          setError(saveErrorMessage(e, isEdit));
+        }
+      })();
+    },
+    [
+      port,
+      selectedLabel,
+      node?.id_,
+      isEdit,
+      keepOpen,
+      stableOnSaved,
+      stableOnOpenChange
+    ]
+  );
+  return /* @__PURE__ */ jsx22(Sheet4, { open, onOpenChange, children: /* @__PURE__ */ jsx22(SheetContent4, { children: /* @__PURE__ */ jsx22(
+    NodeFormSheetBody,
+    {
+      isEdit,
+      selectedLabel,
+      labels,
+      onSelectLabel: setSelectedLabel,
+      schema,
+      uiSchema,
+      formKey: `${selectedLabel}:${node?.id_ ?? "new"}:${formNonce}`,
+      formData,
+      widgets,
+      error,
+      keepOpen,
+      onKeepOpenChange: setKeepOpen,
+      onSave: handleSave,
+      onCancel: () => stableOnOpenChange(false)
+    }
+  ) }) });
+}
+function saveErrorMessage(e, isEdit) {
+  if (e instanceof Error) return e.message;
+  return isEdit ? "Failed to update node" : "Failed to create node";
+}
+async function saveNode({
+  port,
+  label,
+  id,
+  data
+}) {
+  const isEdit = id != null;
+  const { properties, relations } = extractRelationFields(data);
+  const hasRelations = Object.keys(relations).length > 0;
+  if (hasRelations) {
+    if (isEdit) {
+      const res2 = await port.updateNodeWithRelations({
+        id_: id,
+        label_: label,
+        properties_: properties,
+        relations
+      });
+      return res2.node;
+    }
+    const res = await port.createNodeWithRelations({
+      label_: label,
+      properties_: properties,
+      relations
+    });
+    return res.node;
+  }
+  if (isEdit) {
+    return port.updateNode({ id_: id, label_: label, properties_: properties });
+  }
+  return port.createNode({ label_: label, properties_: properties });
+}
+
+// src/graph-edit/EdgeFormSheet.tsx
+import { useCallback as useCallback9, useEffect as useEffect7, useMemo as useMemo10, useState as useState15 } from "react";
+import {
+  Sheet as Sheet5,
+  SheetContent as SheetContent5,
+  SheetHeader as SheetHeader5,
+  SheetBody as SheetBody5,
+  SheetTitle as SheetTitle5,
+  SheetDescription as SheetDescription5,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  Button as Button7,
+  IconButton as IconButton3,
+  Alert as Alert2
+} from "@petrarca/sonnet-ui";
+import { Pencil as Pencil2, Plus as Plus2, Trash2 as Trash22, ArrowRight as ArrowRight2 } from "lucide-react";
+import {
+  JsonSchemaFormRenderer as JsonSchemaFormRenderer3
+} from "@petrarca/sonnet-forms";
+import { errorLog as errorLog5 } from "@petrarca/sonnet-core";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+function usePairState(port, schemaProvider, open, nodeAId, nodeALabel, nodeBId, nodeBLabel, reloadKey) {
+  const [active, setActive] = useState15([]);
+  const [available, setAvailable] = useState15([]);
+  useEffect7(() => {
+    let cancelled = false;
+    if (!open || nodeAId == null || nodeBId == null) {
+      setActive([]);
+      setAvailable([]);
+      return;
+    }
+    void (async () => {
+      try {
+        const [edges, relationsAB, relationsBA] = await Promise.all([
+          port.getPairEdges(nodeAId, nodeBId),
+          schemaProvider.relationsFor(nodeALabel),
+          schemaProvider.relationsFor(nodeBLabel)
+        ]);
+        if (cancelled) return;
+        setActive(edges);
+        const present = new Set(edges.map((e) => e.label_));
+        const forward = relationsAB.filter((r) => r.to_type_name === nodeBLabel).map((r) => ({
+          label: r.rel_type_name,
+          sourceId: nodeAId,
+          targetId: nodeBId
+        }));
+        const backward = relationsBA.filter((r) => r.to_type_name === nodeALabel).map((r) => ({
+          label: r.rel_type_name,
+          sourceId: nodeBId,
+          targetId: nodeAId
+        }));
+        const seen = /* @__PURE__ */ new Set();
+        const creatable = [];
+        for (const entry of [...forward, ...backward]) {
+          const key = `${entry.label}:${entry.sourceId}:${entry.targetId}`;
+          if (present.has(entry.label) || seen.has(key)) continue;
+          seen.add(key);
+          creatable.push(entry);
+        }
+        setAvailable(creatable);
+      } catch (e) {
+        if (cancelled) return;
+        errorLog5("[EdgeFormSheet] failed to load pair edges", e);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    port,
+    schemaProvider,
+    open,
+    nodeAId,
+    nodeALabel,
+    nodeBId,
+    nodeBLabel,
+    reloadKey
+  ]);
+  return { active, available };
+}
+function draftLabel(draft) {
+  if (!draft) return null;
+  return draft.mode === "create" ? draft.entry.label : draft.edge.label_;
+}
+var EMPTY_EDGE_SCHEMA = {
+  type: "object",
+  properties: {}
+};
+function useEdgeSchema(schemaProvider, draft) {
+  const [schema, setSchema] = useState15(null);
+  const label = useMemo10(() => draftLabel(draft), [draft]);
+  useEffect7(() => {
+    let cancelled = false;
+    if (!label) {
+      setSchema(null);
+      return;
+    }
+    void schemaProvider.getEdgeSchema(label).then((s) => {
+      if (!cancelled) setSchema(s ?? EMPTY_EDGE_SCHEMA);
+    }).catch((e) => {
+      if (cancelled) return;
+      errorLog5("[EdgeFormSheet] failed to load edge schema", e);
+      setSchema(EMPTY_EDGE_SCHEMA);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [schemaProvider, label]);
+  return schema;
+}
+function useEditableEdgeTypes(schemaProvider, active) {
+  const [editable, setEditable] = useState15({});
+  const labelsKey = useMemo10(
+    () => Array.from(new Set(active.map((e) => e.label_))).sort().join("\0"),
+    [active]
+  );
+  useEffect7(() => {
+    let cancelled = false;
+    const labels = labelsKey ? labelsKey.split("\0") : [];
+    if (labels.length === 0) {
+      setEditable({});
+      return;
+    }
+    void (async () => {
+      const entries = await Promise.all(
+        labels.map(async (label) => {
+          try {
+            const schema = await schemaProvider.getEdgeSchema(label);
+            return [label, hasProperties(schema)];
+          } catch {
+            return [label, false];
+          }
+        })
+      );
+      if (!cancelled) setEditable(Object.fromEntries(entries));
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [schemaProvider, labelsKey]);
+  return editable;
+}
+function SectionTitle2({
+  children
+}) {
+  return /* @__PURE__ */ jsx23("div", { className: "mb-2", children: /* @__PURE__ */ jsx23("span", { className: "heading-meta", children }) });
+}
+function EdgeRow({
+  label,
+  onEdit,
+  onDelete,
+  onAdd
+}) {
+  return /* @__PURE__ */ jsxs21("div", { className: "group/row flex items-center gap-2 px-3 py-2", children: [
+    /* @__PURE__ */ jsx23("span", { className: "flex-1 text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs21("span", { className: "flex gap-1", children: [
+      onAdd && /* @__PURE__ */ jsx23(IconButton3, { label: "Create edge", revealOnHover: true, onClick: onAdd, children: /* @__PURE__ */ jsx23(Plus2, {}) }),
+      onEdit && /* @__PURE__ */ jsx23(IconButton3, { label: "Edit edge", revealOnHover: true, onClick: onEdit, children: /* @__PURE__ */ jsx23(Pencil2, {}) }),
+      onDelete && /* @__PURE__ */ jsx23(
+        IconButton3,
+        {
+          label: "Delete edge",
+          tone: "destructive",
+          revealOnHover: true,
+          onClick: onDelete,
+          children: /* @__PURE__ */ jsx23(Trash22, {})
+        }
+      )
+    ] })
+  ] });
+}
+function PairLists({
+  nodeALabel,
+  nodeBLabel,
+  nodeAId,
+  active,
+  available,
+  editableTypes,
+  onEdit,
+  onDelete,
+  onCreate
+}) {
+  const empty = active.length === 0 && available.length === 0;
+  const labelCounts = available.reduce((acc, e) => {
+    acc[e.label] = (acc[e.label] ?? 0) + 1;
+    return acc;
+  }, {});
+  const rowLabel = (entry) => {
+    if (labelCounts[entry.label] <= 1) return entry.label;
+    const from = entry.sourceId === nodeAId ? nodeALabel : nodeBLabel;
+    const to = entry.sourceId === nodeAId ? nodeBLabel : nodeALabel;
+    return `${entry.label} (${from} -> ${to})`;
+  };
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-4", children: [
+    empty && /* @__PURE__ */ jsxs21("p", { className: "text-xs text-muted-foreground", children: [
+      "No edges are defined between ",
+      nodeALabel,
+      " and ",
+      nodeBLabel,
+      "."
+    ] }),
+    active.length > 0 && /* @__PURE__ */ jsxs21("div", { children: [
+      /* @__PURE__ */ jsx23(SectionTitle2, { children: "Active edges" }),
+      /* @__PURE__ */ jsx23("div", { className: "rounded-lg border divide-y", children: active.map((edge) => /* @__PURE__ */ jsx23(
+        EdgeRow,
+        {
+          label: edge.label_,
+          onEdit: editableTypes[edge.label_] ? () => onEdit(edge) : void 0,
+          onDelete: () => onDelete(edge)
+        },
+        edge.id_
+      )) })
+    ] }),
+    available.length > 0 && /* @__PURE__ */ jsxs21("div", { children: [
+      /* @__PURE__ */ jsx23(SectionTitle2, { children: "Available edges" }),
+      /* @__PURE__ */ jsx23("div", { className: "rounded-lg border divide-y", children: available.map((entry) => /* @__PURE__ */ jsx23(
+        EdgeRow,
+        {
+          label: rowLabel(entry),
+          onAdd: () => onCreate(entry)
+        },
+        `${entry.label}:${entry.sourceId}:${entry.targetId}`
+      )) })
+    ] })
+  ] });
+}
+function DraftForm({
+  draft,
+  schema,
+  widgets,
+  onSave,
+  onCancel
+}) {
+  const label = draft.mode === "create" ? draft.entry.label : draft.edge.label_;
+  const data = draft.mode === "edit" ? draft.edge.properties_ ?? {} : {};
+  return /* @__PURE__ */ jsxs21("div", { children: [
+    /* @__PURE__ */ jsxs21(SectionTitle2, { children: [
+      draft.mode === "create" ? "Add" : "Edit",
+      " ",
+      label
+    ] }),
+    /* @__PURE__ */ jsx23(
+      JsonSchemaFormRenderer3,
+      {
+        schema,
+        data,
+        widgets,
+        showActions: true,
+        allowPristineSave: draft.mode === "create",
+        saveLabel: draft.mode === "create" ? "Add" : "Save",
+        cancelLabel: "Cancel",
+        showExtraProperties: true,
+        onUpdate: onSave,
+        onCancel
+      },
+      label
+    )
+  ] });
+}
+function EdgeFormSheet({
+  open,
+  onOpenChange,
+  nodeA,
+  nodeB,
+  port,
+  schemaProvider,
+  widgets,
+  onChanged
+}) {
+  const [reloadKey, setReloadKey] = useState15(0);
+  const [draft, setDraft] = useState15(null);
+  const [error, setError] = useState15("");
+  const [pendingDelete, setPendingDelete] = useState15(null);
+  const { active, available } = usePairState(
+    port,
+    schemaProvider,
+    open,
+    nodeA.id_,
+    nodeA.label_,
+    nodeB.id_,
+    nodeB.label_,
+    reloadKey
+  );
+  const schema = useEdgeSchema(schemaProvider, draft);
+  const editableTypes = useEditableEdgeTypes(schemaProvider, active);
+  const nodeAId = nodeA.id_;
+  const nodeBId = nodeB.id_;
+  useEffect7(() => {
+    if (open) {
+      setDraft(null);
+      setError("");
+      setPendingDelete(null);
+    }
+  }, [open, nodeAId, nodeBId]);
+  const reload = useCallback9(() => {
+    setReloadKey((k) => k + 1);
+    onChanged?.();
+  }, [onChanged]);
+  const handleSave = useCallback9(
+    (formData) => {
+      if (!draft) return;
+      const { properties } = extractRelationFields(formData);
+      void (async () => {
+        try {
+          if (draft.mode === "create") {
+            await port.createEdge({
+              label_: draft.entry.label,
+              start_id_: draft.entry.sourceId,
+              end_id_: draft.entry.targetId,
+              properties_: properties
+            });
+          } else {
+            await port.updateEdge({
+              id_: draft.edge.id_,
+              label_: draft.edge.label_,
+              start_id_: draft.edge.start_id_,
+              end_id_: draft.edge.end_id_,
+              properties_: properties
+            });
+          }
+          setDraft(null);
+          setError("");
+          reload();
+        } catch (e) {
+          setError(e instanceof Error ? e.message : "Failed to save edge");
+        }
+      })();
+    },
+    [draft, port, reload]
+  );
+  const confirmDelete = useCallback9(async () => {
+    const edge = pendingDelete;
+    if (!edge || edge.id_ == null) return;
+    try {
+      await port.deleteEdge(edge.id_);
+      setError("");
+      setPendingDelete(null);
+      reload();
+    } catch (e) {
+      setPendingDelete(null);
+      setError(e instanceof Error ? e.message : "Failed to delete edge");
+    }
+  }, [pendingDelete, port, reload]);
+  return /* @__PURE__ */ jsxs21(Sheet5, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxs21(SheetContent5, { children: [
+      /* @__PURE__ */ jsxs21(SheetHeader5, { children: [
+        /* @__PURE__ */ jsx23(SheetTitle5, { children: "Edges" }),
+        /* @__PURE__ */ jsx23(SheetDescription5, { children: "Manage the edges between the two selected nodes." })
+      ] }),
+      /* @__PURE__ */ jsxs21(SheetBody5, { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx23("span", { className: "font-medium", children: extractDisplayLabel(nodeA) }),
+          /* @__PURE__ */ jsx23(ArrowRight2, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx23("span", { className: "font-medium", children: extractDisplayLabel(nodeB) })
+        ] }),
+        !draft && /* @__PURE__ */ jsx23(
+          PairLists,
+          {
+            nodeALabel: nodeA.label_,
+            nodeBLabel: nodeB.label_,
+            nodeAId: nodeA.id_,
+            active,
+            available,
+            editableTypes,
+            onEdit: (edge) => setDraft({ mode: "edit", edge }),
+            onDelete: (edge) => setPendingDelete(edge),
+            onCreate: (entry) => setDraft({ mode: "create", entry })
+          }
+        ),
+        draft && schema && /* @__PURE__ */ jsx23(
+          DraftForm,
+          {
+            draft,
+            schema,
+            widgets,
+            onSave: handleSave,
+            onCancel: () => setDraft(null)
+          }
+        ),
+        error && /* @__PURE__ */ jsx23(Alert2, { variant: "destructive", children: error })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx23(
+      DeleteEdgeConfirm,
+      {
+        edge: pendingDelete,
+        onCancel: () => setPendingDelete(null),
+        onConfirm: () => void confirmDelete()
+      }
+    )
+  ] });
+}
+function DeleteEdgeConfirm({
+  edge,
+  onCancel,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsx23(Dialog, { open: !!edge, onOpenChange: (o) => !o && onCancel(), children: /* @__PURE__ */ jsxs21(DialogContent, { children: [
+    /* @__PURE__ */ jsxs21(DialogHeader, { children: [
+      /* @__PURE__ */ jsx23(DialogTitle, { children: "Delete edge" }),
+      /* @__PURE__ */ jsxs21(DialogDescription, { children: [
+        "Delete the edge ",
+        /* @__PURE__ */ jsx23("strong", { children: edge?.label_ }),
+        "? This removes the relationship between the two nodes."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs21(DialogFooter, { children: [
+      /* @__PURE__ */ jsx23(Button7, { variant: "outline", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx23(Button7, { variant: "destructive", onClick: onConfirm, children: "Delete" })
+    ] })
+  ] }) });
+}
+
+// src/graph-edit/DeleteNodeDialog.tsx
+import { useCallback as useCallback10, useEffect as useEffect8, useState as useState16 } from "react";
+import {
+  Dialog as Dialog2,
+  DialogContent as DialogContent2,
+  DialogHeader as DialogHeader2,
+  DialogTitle as DialogTitle2,
+  DialogDescription as DialogDescription2,
+  DialogFooter as DialogFooter2,
+  Button as Button8,
+  Alert as Alert3
+} from "@petrarca/sonnet-ui";
+import { errorLog as errorLog6 } from "@petrarca/sonnet-core";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+var EMPTY_DEPENDENT = {
+  inbound: [],
+  outbound: [],
+  names: {}
+};
+function useDependentEdges(port, open, node) {
+  const [dependent, setDependent] = useState16(EMPTY_DEPENDENT);
+  useEffect8(() => {
+    if (!open) return;
+    if (node.id_ == null) {
+      setDependent(EMPTY_DEPENDENT);
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        const [inbound, outbound] = await Promise.all([
+          port.getInboundEdges(node.id_),
+          port.getOutboundEdges(node.id_)
+        ]);
+        if (cancelled) return;
+        const neighbourIds = Array.from(
+          /* @__PURE__ */ new Set([
+            ...inbound.map((e) => e.start_id_),
+            ...outbound.map((e) => e.end_id_)
+          ])
+        );
+        const names = await resolveNames(port, neighbourIds);
+        if (cancelled) return;
+        setDependent({ inbound, outbound, names });
+      } catch (e) {
+        if (cancelled) return;
+        errorLog6("[DeleteNodeDialog] failed to load dependent edges", e);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [port, open, node.id_]);
+  return dependent;
+}
+async function resolveNames(port, ids) {
+  if (ids.length === 0) return {};
+  const nodes = await port.getNodes(ids);
+  const names = {};
+  for (const n of nodes) {
+    if (n.id_ != null) names[n.id_] = extractDisplayLabel(n);
+  }
+  return names;
+}
+function EdgeList({
+  title,
+  edges,
+  names,
+  direction
+}) {
+  if (edges.length === 0) return null;
+  return /* @__PURE__ */ jsxs22("div", { className: "mb-2", children: [
+    /* @__PURE__ */ jsx24("span", { className: "heading-meta block", children: title }),
+    /* @__PURE__ */ jsx24("ul", { className: "list-disc pl-6 text-sm", children: edges.map((edge) => {
+      const neighbour = direction === "inbound" ? names[edge.start_id_] : names[edge.end_id_];
+      const text = direction === "inbound" ? `${neighbour ?? "?"} \u2192 ${edge.label_}` : `${edge.label_} \u2192 ${neighbour ?? "?"}`;
+      return /* @__PURE__ */ jsx24("li", { children: neighbour ? text : edge.label_ }, edge.id_);
+    }) })
+  ] });
+}
+function DeleteNodeDialog({
+  open,
+  onOpenChange,
+  node,
+  port,
+  onDeleted
+}) {
+  const { inbound, outbound, names } = useDependentEdges(port, open, node);
+  const [error, setError] = useState16("");
+  const hasEdges = inbound.length > 0 || outbound.length > 0;
+  const handleDelete = useCallback10(() => {
+    if (node.id_ == null) return;
+    void (async () => {
+      try {
+        await port.deleteNode(node.id_);
+        setError("");
+        onDeleted?.(node.id_);
+        onOpenChange(false);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Unable to delete node");
+      }
+    })();
+  }, [port, node.id_, onDeleted, onOpenChange]);
+  return /* @__PURE__ */ jsx24(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs22(DialogContent2, { children: [
+    /* @__PURE__ */ jsxs22(DialogHeader2, { children: [
+      /* @__PURE__ */ jsx24(DialogTitle2, { children: "Delete node" }),
+      /* @__PURE__ */ jsxs22(DialogDescription2, { children: [
+        "Delete the node ",
+        /* @__PURE__ */ jsx24("strong", { children: extractDisplayLabel(node) }),
+        "?"
+      ] })
+    ] }),
+    !hasEdges && /* @__PURE__ */ jsx24("p", { className: "text-sm text-muted-foreground", children: "No connected edges." }),
+    /* @__PURE__ */ jsx24(
+      EdgeList,
+      {
+        title: "Inbound edges",
+        edges: inbound,
+        names,
+        direction: "inbound"
+      }
+    ),
+    /* @__PURE__ */ jsx24(
+      EdgeList,
+      {
+        title: "Outbound edges",
+        edges: outbound,
+        names,
+        direction: "outbound"
+      }
+    ),
+    error && /* @__PURE__ */ jsx24(Alert3, { variant: "destructive", children: error }),
+    /* @__PURE__ */ jsxs22(DialogFooter2, { children: [
+      /* @__PURE__ */ jsx24(Button8, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx24(Button8, { variant: "destructive", onClick: handleDelete, children: "Delete" })
+    ] })
+  ] }) });
+}
+
+// src/graph-edit/GraphEditToolbar.tsx
+import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+function toPerms(caps) {
+  const canCreateNode = caps.createNode === "edit";
+  const canUpdateNode = caps.updateNode === "edit";
+  const canDeleteNode = caps.deleteNode === "edit";
+  const canEditEdges = caps.createEdge === "edit" || caps.updateEdge === "edit" || caps.deleteEdge === "edit";
+  return {
+    canCreateNode,
+    canUpdateNode,
+    canDeleteNode,
+    canEditEdges,
+    anyEditable: canCreateNode || canUpdateNode || canDeleteNode || canEditEdges
+  };
+}
+function ToolbarButtons({
+  perms,
+  count,
+  onOpen
+}) {
+  return /* @__PURE__ */ jsxs23("div", { className: "flex gap-0.5", children: [
+    perms.canCreateNode && /* @__PURE__ */ jsx25(
+      IconButton4,
+      {
+        label: "Add node",
+        variant: "outline",
+        disabled: count > 0,
+        onClick: () => onOpen("node-create"),
+        children: /* @__PURE__ */ jsx25(Plus3, {})
+      }
+    ),
+    perms.canUpdateNode && /* @__PURE__ */ jsx25(
+      IconButton4,
+      {
+        label: "Edit node",
+        variant: "outline",
+        disabled: count !== 1,
+        onClick: () => onOpen("node-edit"),
+        children: /* @__PURE__ */ jsx25(Edit, {})
+      }
+    ),
+    perms.canEditEdges && /* @__PURE__ */ jsx25(
+      IconButton4,
+      {
+        label: "Edges",
+        variant: "outline",
+        disabled: count !== 2,
+        onClick: () => onOpen("edge"),
+        children: /* @__PURE__ */ jsx25(Link, {})
+      }
+    ),
+    perms.canDeleteNode && /* @__PURE__ */ jsx25(
+      IconButton4,
+      {
+        label: "Delete node",
+        variant: "outline",
+        tone: "destructive",
+        disabled: count !== 1,
+        onClick: () => onOpen("delete"),
+        children: /* @__PURE__ */ jsx25(Trash23, {})
+      }
+    )
+  ] });
+}
+function ToolbarDialogs({
+  perms,
+  dialog,
+  firstNode,
+  secondNode,
+  port,
+  schemaProvider,
+  widgets,
+  onClose,
+  onMutated
+}) {
+  const onChange = useCallback11(
+    (o) => {
+      if (!o) onClose();
+    },
+    [onClose]
+  );
+  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
+    (perms.canCreateNode || perms.canUpdateNode) && /* @__PURE__ */ jsx25(
+      NodeFormSheet,
+      {
+        open: dialog === "node-create" || dialog === "node-edit",
+        onOpenChange: onChange,
+        node: dialog === "node-edit" ? firstNode : null,
+        port,
+        schemaProvider,
+        widgets,
+        onSaved: onMutated
+      }
+    ),
+    perms.canEditEdges && firstNode && secondNode && /* @__PURE__ */ jsx25(
+      EdgeFormSheet,
+      {
+        open: dialog === "edge",
+        onOpenChange: onChange,
+        nodeA: firstNode,
+        nodeB: secondNode,
+        port,
+        schemaProvider,
+        widgets,
+        onChanged: onMutated
+      }
+    ),
+    perms.canDeleteNode && firstNode && /* @__PURE__ */ jsx25(
+      DeleteNodeDialog,
+      {
+        open: dialog === "delete",
+        onOpenChange: onChange,
+        node: firstNode,
+        port,
+        onDeleted: onMutated
+      }
+    )
+  ] });
+}
+function GraphEditToolbar({
+  port,
+  schemaProvider,
+  capabilities,
+  readOnly,
+  widgets,
+  onMutated
+}) {
+  const useSelection3 = useWorkspaceSelection();
+  const selectedNodeIds = useSelection3(
+    (s) => s.selectedNodeIds
+  );
+  const live = useLiveGraphData();
+  const [dialog, setDialog] = useState17(null);
+  const perms = useMemo11(
+    () => toPerms(resolveGraphCapabilities(capabilities, readOnly)),
+    [capabilities, readOnly]
+  );
+  const selectedNodes = useMemo11(
+    () => selectedNodeIds.map((id) => live.normalized.nodesById[id]).filter(Boolean),
+    [selectedNodeIds, live.normalized]
+  );
+  const stableOnMutated = useStableRef(onMutated);
+  if (!perms.anyEditable) return null;
+  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
+    /* @__PURE__ */ jsx25(
+      ToolbarButtons,
+      {
+        perms,
+        count: selectedNodes.length,
+        onOpen: setDialog
+      }
+    ),
+    /* @__PURE__ */ jsx25(
+      ToolbarDialogs,
+      {
+        perms,
+        dialog,
+        firstNode: selectedNodes[0],
+        secondNode: selectedNodes[1],
+        port,
+        schemaProvider,
+        widgets,
+        onClose: () => setDialog(null),
+        onMutated: stableOnMutated
+      }
+    )
+  ] });
+}
 export {
   ActionPanel_default as ActionPanel,
+  DeleteNodeDialog,
   EMPTY_NORMALIZED,
+  EdgeFormSheet,
   EdgeInfoCard_default as EdgeInfoCard,
   GraphA11yList,
+  GraphEditToolbar,
+  GraphModelEditor,
   GraphRendererProvider,
   GraphStoresContext,
   GraphVisualizer_default as GraphVisualizer,
+  ModelActionPanel,
+  NodeFormSheet,
   NodeInfoCard_default as NodeInfoCard,
+  NodeTypeNameSheet,
   Overview_default as Overview,
+  PropertyFormSheet,
+  RelationFormSheet,
+  TypeDetailPanel,
+  addEdgeType,
+  addNodeType,
+  addRelation,
   buildColorPalette,
   buildColorPaletteFromNodes,
+  capabilitiesSchema,
+  cardinalityLabel,
   createActionPanelStore,
   createGraphDataStore,
   createGraphExplorationStore,
   createGraphFilterStore,
   createGraphFocusStore,
   createSelectionStore,
+  deleteEdgeType,
+  deleteEdgeTypeProperty,
+  deleteNodeProperty,
+  deleteNodeType,
+  deleteRelation,
+  deleteRelationProperty,
+  edgeTypeView,
+  editableRelations,
   enrichEdge,
   enrichEdges,
   enrichNode,
   enrichNodes,
+  enrichSchemaWithRelations,
   extractDisplayLabel,
+  extractRelationFields,
+  findEdgeType,
+  findType,
+  graphCapabilitiesSchema,
+  groupEdgesByRelation,
+  hasProperties,
+  hasRelationFields,
+  initializeFormData,
+  isEdgeType,
+  isNodeType,
   isRawGraphNode,
+  isRelationField,
   isVisualEdge,
   isVisualNode,
+  modelToGraph,
+  nodeTypeView,
   normalizeGraph,
+  reconcileFilter,
+  relationFieldName,
+  relationTitle,
+  relationTypeFromField,
+  relationView,
+  renameEdgeType,
+  renameNodeType,
+  resolveCapabilities,
+  resolveGraphCapabilities,
+  resolveRelationEdge,
+  setEdgeTypeProperty,
+  setNodeProperty,
+  setRelationProperty,
   toCytoscapeEdge,
   toCytoscapeNode,
   toReagraphEdge,
   toReagraphNode,
+  typeLabel,
+  updateRelation,
   useActionPanelStore,
   useCytoscapeData,
   GraphFocus_default as useGraphFocus,
   useGraphRenderer,
   useLiveGraphData,
   useReagraphData,
+  useStableRef,
   useWorkspaceGraphData,
   useWorkspaceGraphExploration,
   useWorkspaceGraphFilter,
-  useWorkspaceSelection
+  useWorkspaceSelection,
+  validateCapabilities,
+  validateGraphCapabilities
 };
 //# sourceMappingURL=index.js.map