@petrarca/sonnet-graph 0.3.0 → 0.4.1

package/dist/index.js

@@ -436,7 +436,8 @@ var useGraphFilter = createGraphFilterStore();
 
 // src/stores/GraphExploration.ts
 import { create as create4 } from "zustand";
-import { devLog as devLog3 } from "@petrarca/sonnet-core";
+import { devLog as devLog3, errorLog } from "@petrarca/sonnet-core";
+import { toast } from "sonner";
 function collectReachable(startId, direction, allEdges, includeStart) {
   const nodes = /* @__PURE__ */ new Set();
   const edges = /* @__PURE__ */ new Set();
@@ -542,6 +543,23 @@ function ensureNodeLabelInFilters(enrichedNodes, nodeId, graphFilterStore) {
     graphFilterStore.getState().setNodeLabelFilters([...currentFilters, nodeLabel]);
   }
 }
+function mergeExpandedLabelsIntoFilters(stores, enrichedNodes, nodeId) {
+  const graphFilterState = stores.graphFilter.getState();
+  const currentFilters = graphFilterState.nodeLabelFilters;
+  if (currentFilters.length === 0 || enrichedNodes.length === 0) return;
+  const newLabels = new Set(enrichedNodes.map((n) => n.label_));
+  const labelsToAdd = Array.from(newLabels).filter(
+    (label) => !currentFilters.includes(label)
+  );
+  if (labelsToAdd.length > 0) {
+    devLog3("[GraphExploration] Adding expanded node labels to active filters", {
+      nodeId,
+      labelsToAdd,
+      currentFilters
+    });
+    stores.graphFilter.getState().setNodeLabelFilters([...currentFilters, ...labelsToAdd]);
+  }
+}
 function createGraphExplorationStore(deps) {
   const stores = deps;
   return create4()((set, get) => ({
@@ -841,10 +859,10 @@ function createGraphExplorationStore(deps) {
     isNodeExpanded: (nodeId) => {
       return get().expandedNodeIds.has(nodeId);
     },
-    expandNode: async (nodeId) => {
-      devLog3("[GraphExploration] expandNode", { nodeId });
+    expandNode: async (nodeId, options) => {
+      devLog3("[GraphExploration] expandNode", { nodeId, options });
       try {
-        const result = await stores.expandNode(Number(nodeId));
+        const result = await stores.expandNode(Number(nodeId), options);
         devLog3("[GraphExploration] Expansion API result", {
           nodeId,
           newNodes: result.nodes.length,
@@ -866,25 +884,7 @@ function createGraphExplorationStore(deps) {
         );
         const enrichedEdges = enrichEdges(result.edges);
         stores.graphData.getState().mergeExpandedData(enrichedNodes, enrichedEdges);
-        const graphFilterState = stores.graphFilter.getState();
-        const currentFilters = graphFilterState.nodeLabelFilters;
-        if (currentFilters.length > 0 && enrichedNodes.length > 0) {
-          const newLabels = new Set(enrichedNodes.map((n) => n.label_));
-          const labelsToAdd = Array.from(newLabels).filter(
-            (label) => !currentFilters.includes(label)
-          );
-          if (labelsToAdd.length > 0) {
-            devLog3(
-              "[GraphExploration] Adding expanded node labels to active filters",
-              {
-                nodeId,
-                labelsToAdd,
-                currentFilters
-              }
-            );
-            stores.graphFilter.getState().setNodeLabelFilters([...currentFilters, ...labelsToAdd]);
-          }
-        }
+        mergeExpandedLabelsIntoFilters(stores, enrichedNodes, nodeId);
         get().markNodeExpanded(nodeId);
         const currentState = get();
         if (currentState.isFocusMode) {
@@ -900,13 +900,19 @@ function createGraphExplorationStore(deps) {
           });
           set({ focusedNodeIds: newFocusedIds });
         }
+        if (result.has_more) {
+          toast.info(
+            `Showing first ${enrichedNodes.length} neighbors \u2014 more exist. Refine filters or increase the limit.`
+          );
+        }
         devLog3("[GraphExploration] Expansion complete", {
           nodeId,
           addedNodes: enrichedNodes.length,
-          addedEdges: enrichedEdges.length
+          addedEdges: enrichedEdges.length,
+          hasMore: result.has_more
         });
       } catch (error) {
-        devLog3("[GraphExploration] Expansion failed", { nodeId, error });
+        errorLog("[GraphExploration] Expansion failed", { nodeId, error });
         throw error;
       }
     },
@@ -1439,10 +1445,10 @@ function GraphRendererProvider({
 
 // src/components/rea/ReaGraph.tsx
 import {
-  useEffect as useEffect2,
-  useRef,
-  useState as useState3,
-  useCallback as useCallback2
+  useEffect as useEffect3,
+  useRef as useRef2,
+  useState as useState5,
+  useCallback as useCallback3
 } from "react";
 import { devLog as devLog8 } from "@petrarca/sonnet-core";
 import {
@@ -1662,16 +1668,194 @@ function NodeHoverInfo({ node }) {
 var NodeHoverInfo_default = NodeHoverInfo;
 
 // src/components/rea/ReaContextMenu.tsx
-import React2 from "react";
+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 { Checkbox, Input, Label } from "@petrarca/sonnet-ui";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ExpandOptionsPanel({
+  nodeLabel,
+  onExpand,
+  onBack,
+  getEdgeTypes
+}) {
+  const [direction, setDirection] = useState3("both");
+  const [limit, setLimit] = useState3(100);
+  const [edgeTypes, setEdgeTypes] = useState3([]);
+  const [selectedTypes, setSelectedTypes] = useState3([]);
+  const [loading, setLoading] = useState3(!!getEdgeTypes);
+  const [offset, setOffset] = useState3({ x: 0, y: 0 });
+  const dragRef = useRef(null);
+  const onPointerDown = useCallback2(
+    (e) => {
+      if (e.target.closest("button")) return;
+      e.preventDefault();
+      e.target.setPointerCapture(e.pointerId);
+      dragRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        origX: offset.x,
+        origY: offset.y
+      };
+    },
+    [offset]
+  );
+  const onPointerMove = useCallback2((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(() => {
+    dragRef.current = null;
+  }, []);
+  useEffect2(() => {
+    if (!getEdgeTypes) return;
+    setLoading(true);
+    getEdgeTypes().then((types) => {
+      setEdgeTypes(types);
+      setSelectedTypes(types);
+    }).finally(() => setLoading(false));
+  }, [getEdgeTypes]);
+  const handleToggleType = (type) => {
+    setSelectedTypes(
+      (prev) => prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type]
+    );
+  };
+  const handleExpand = () => {
+    const options = {};
+    if (direction !== "both") options.direction = direction;
+    const clampedLimit = Math.max(1, Math.min(1e4, limit));
+    if (clampedLimit !== 100) options.limit = clampedLimit;
+    if (selectedTypes.length > 0 && selectedTypes.length < edgeTypes.length) {
+      options.relTypes = selectedTypes;
+    }
+    onExpand(options);
+  };
+  const allSelected = selectedTypes.length === edgeTypes.length;
+  const noneSelected = edgeTypes.length > 0 && selectedTypes.length === 0;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "bg-background border border-border rounded-md shadow-md p-2.5 min-w-48 space-y-2",
+      style: { transform: `translate(${offset.x}px, ${offset.y}px)` },
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "flex items-center justify-between gap-2 cursor-grab active:cursor-grabbing select-none",
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            children: [
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  className: "text-[11px] text-muted-foreground hover:text-foreground cursor-pointer",
+                  onClick: onBack,
+                  children: "Back"
+                }
+              ),
+              /* @__PURE__ */ jsx5("span", { className: "text-[11px] font-medium text-foreground truncate max-w-32", children: nodeLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx5(Label, { className: "text-[11px] text-muted-foreground", children: "Direction" }),
+          /* @__PURE__ */ jsx5("div", { className: "flex gap-0.5", children: ["both", "out", "in"].map((dir) => /* @__PURE__ */ jsx5(
+            "button",
+            {
+              className: `flex-1 px-2 py-1 text-[11px] capitalize rounded border cursor-pointer ${direction === dir ? "bg-primary/10 text-primary border-primary/40 font-medium" : "bg-background text-muted-foreground border-border hover:bg-muted"}`,
+              onClick: () => setDirection(dir),
+              children: dir
+            },
+            dir
+          )) })
+        ] }),
+        !loading && edgeTypes.length > 1 && /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx5(Label, { className: "text-[11px] text-muted-foreground", children: "Rel Types" }),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                className: "text-[10px] text-muted-foreground hover:text-foreground cursor-pointer",
+                onClick: () => setSelectedTypes(allSelected ? [] : [...edgeTypes]),
+                children: allSelected ? "None" : "All"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "space-y-0.5 max-h-32 overflow-y-auto", children: edgeTypes.map((type) => /* @__PURE__ */ jsxs4(
+            "label",
+            {
+              className: "flex items-center gap-1.5 text-[11px] cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx5(
+                  Checkbox,
+                  {
+                    checked: selectedTypes.includes(type),
+                    onCheckedChange: () => handleToggleType(type),
+                    className: "h-3 w-3"
+                  }
+                ),
+                /* @__PURE__ */ jsx5("span", { className: "truncate", children: type })
+              ]
+            },
+            type
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx5(Label, { className: "text-[11px] text-muted-foreground", children: "Limit" }),
+          /* @__PURE__ */ jsx5(
+            Input,
+            {
+              type: "number",
+              min: 1,
+              max: 1e4,
+              value: limit,
+              onChange: (e) => {
+                const v = Number(e.target.value);
+                if (!Number.isNaN(v)) setLimit(Math.max(1, Math.min(1e4, v)));
+              },
+              className: "h-6 text-[11px]"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            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,
+            title: noneSelected ? "Select at least one relationship type" : void 0,
+            children: "Expand"
+          }
+        )
+      ]
+    }
+  );
+}
+var ExpandOptionsPanel_default = ExpandOptionsPanel;
+
+// src/components/rea/ReaContextMenu.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ReaContextMenu({
   data,
   onClose,
   elementType,
   useGraphExploration,
-  onCopyNode
+  onCopyNode,
+  getNodeEdgeTypes
 }) {
+  const [showExpandPanel, setShowExpandPanel] = useState4(false);
+  React3.useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
   const handleFocus = () => {
     if (elementType === "node") {
       const nodeId = data.id;
@@ -1724,11 +1908,11 @@ function ReaContextMenu({
     }
     onClose();
   };
-  const handleExpand = () => {
+  const handleExpandWithOptions = (options) => {
     if (elementType === "node") {
       const nodeId = data.id;
-      devLog7("[ReaContextMenu] Expand node:", nodeId);
-      useGraphExploration.getState().expandNode(nodeId);
+      devLog7("[ReaContextMenu] Expand node with options:", nodeId, options);
+      useGraphExploration.getState().expandNode(nodeId, options);
     }
     onClose();
   };
@@ -1763,7 +1947,7 @@ function ReaContextMenu({
     { label: "Hide Node", action: handleHideNode },
     { label: "Hide Incoming", action: handleHideIncoming },
     { label: "Hide Outgoing", action: handleHideOutgoing },
-    { label: "Expand", action: handleExpand }
+    { label: "Expand...", action: () => setShowExpandPanel(true) }
   ];
   const edgeMenuItems = [
     { label: "Focus", action: handleFocus },
@@ -1773,23 +1957,46 @@ function ReaContextMenu({
     { label: "Hide Reverse Path", action: handleHideReversePath }
   ];
   const menuItems = elementType === "node" ? nodeMenuItems : edgeMenuItems;
-  return /* @__PURE__ */ jsx5("div", { className: "bg-white border border-gray-200 rounded-md shadow-lg py-1 min-w-48", children: menuItems.map((item, index) => /* @__PURE__ */ jsxs4(React2.Fragment, { children: [
-    /* @__PURE__ */ jsx5(
+  if (showExpandPanel && elementType === "node") {
+    const nodeLabel = data.label || data.id;
+    return /* @__PURE__ */ jsx6(
+      ExpandOptionsPanel_default,
+      {
+        nodeLabel: String(nodeLabel),
+        onExpand: handleExpandWithOptions,
+        onBack: () => setShowExpandPanel(false),
+        getEdgeTypes: getNodeEdgeTypes ? () => getNodeEdgeTypes(Number(data.id)) : void 0
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "bg-background border border-border rounded-md shadow-lg py-1 min-w-48", children: [
+    menuItems.map((item, index) => /* @__PURE__ */ jsxs5(React3.Fragment, { children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          className: "w-full text-left px-3 py-2 text-sm hover:bg-muted/50 cursor-pointer",
+          onClick: item.action,
+          children: item.label
+        }
+      ),
+      index === 1 && /* @__PURE__ */ jsx6("div", { className: "border-t border-border my-1" })
+    ] }, item.label)),
+    /* @__PURE__ */ jsx6("div", { className: "border-t border-border my-1" }),
+    /* @__PURE__ */ jsx6(
       "button",
       {
-        className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 cursor-pointer",
-        onClick: item.action,
-        children: item.label
+        className: "w-full text-left px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted/50 cursor-pointer",
+        onClick: onClose,
+        children: "Cancel"
       }
-    ),
-    index === 1 && /* @__PURE__ */ jsx5("div", { className: "border-t border-gray-200 my-1" })
-  ] }, item.label)) });
+    )
+  ] });
 }
 var ReaContextMenu_default = ReaContextMenu;
 
 // src/components/rea/ReaGraph.tsx
-import { toast } from "sonner";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { toast as toast2 } from "sonner";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function findElementInGraphData(elementId, elementType, nodes, edges) {
   if (elementType === "node") {
     const node = nodes.find((n) => n.id === elementId);
@@ -1851,22 +2058,26 @@ function processFocusAction(focusAction, canvasRef, nodes, edges, setSelectedNod
   }
   return true;
 }
-function ReaGraph({ onCopyNode, extraToolbarContent }) {
-  const isMountedRef = useRef(false);
+function ReaGraph({
+  onCopyNode,
+  extraToolbarContent,
+  getNodeEdgeTypes
+}) {
+  const isMountedRef = useRef2(false);
   const { nodes, edges } = useReagraphData();
   const { normalized } = useLiveGraphData();
-  useEffect2(() => {
+  useEffect3(() => {
     devLog8("[ReGraph] counts", { nodes: nodes.length, edges: edges.length });
     if (nodes.length > 0) devLog8("[ReGraph] sample node", nodes[0]);
     if (edges.length > 0) devLog8("[ReGraph] sample edge", edges[0]);
   }, [nodes, edges]);
-  const canvas = useRef(null);
-  const [hoveredNode, setHoveredNode] = useState3(
+  const canvas = useRef2(null);
+  const [hoveredNode, setHoveredNode] = useState5(
     void 0
   );
-  const [layout, setLayout] = useState3("forceDirected2d");
-  const [fullscreen, setFullscreen] = useState3(false);
-  const [pathSelectionType, setPathSelectionType] = useState3("direct");
+  const [layout, setLayout] = useState5("forceDirected2d");
+  const [fullscreen, setFullscreen] = useState5(false);
+  const [pathSelectionType, setPathSelectionType] = useState5("direct");
   const useGraphSelection = useWorkspaceSelection();
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const useGraphExploration = useWorkspaceGraphExploration();
@@ -1892,7 +2103,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
     pathSelectionType,
     type: "multi"
   });
-  useEffect2(() => {
+  useEffect3(() => {
     const unsubscribe = GraphFocus_default.subscribe((state) => {
       const focusAction = state.focusAction;
       if (!focusAction || !canvas.current) return;
@@ -1916,12 +2127,12 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
     });
     return unsubscribe;
   }, [nodes, edges, setSelectedNodeIds, setSelectedEdge]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!canvas.current) return;
     clearSelections();
     clearSelectionStore();
   }, [lastDataChangeTime, clearSelections, clearSelectionStore]);
-  const fitToScreen = useCallback2(
+  const fitToScreen = useCallback3(
     (reason) => {
       if (!isMountedRef.current) return;
       if (nodes.length === 0) return;
@@ -1947,7 +2158,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
     },
     [nodes.length]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     isMountedRef.current = true;
     fitToScreen("mount");
     const state = useGraphSelection.getState();
@@ -1967,7 +2178,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
       isMountedRef.current = false;
     };
   }, [fitToScreen, setSelections, setSelectedEdge, useGraphSelection]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (isMountedRef.current) fitToScreen("counts-changed");
   }, [nodes.length, edges.length, fitToScreen]);
   function updateLayout(next) {
@@ -2009,14 +2220,14 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
     setSelectedEdge(null);
     if (onCanvasClick) onCanvasClick(e);
   }
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isMountedRef.current) return;
     if (selections.length > 0 && selections.length <= 2) {
       const selectedNodes = selections.map((id) => nodes.find((n) => n.id === id)).filter(Boolean);
       setSelectedNodeIds(selectedNodes.map((n) => n.id));
     }
   }, [selections, nodes]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isMountedRef.current) return;
     const currentSelectedIds = useGraphSelection.getState().selectedNodeIds;
     if (!currentSelectedIds.length) return;
@@ -2035,7 +2246,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
     setSelectedEdge,
     useGraphSelection
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isMountedRef.current) return;
     const currentSelectedIds = useGraphSelection.getState().selectedNodeIds;
     if (!currentSelectedIds.length) return;
@@ -2047,7 +2258,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
       if (stillPresentIds.length < 2) setSelectedEdge(null);
     }
   }, [nodes, setSelectedNodeIds, setSelectedEdge, useGraphSelection]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!fullscreen) return;
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2061,7 +2272,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
       window.removeEventListener("keydown", handleKey);
     };
   }, [fullscreen, fitToScreen]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!fullscreen) return;
     const id = setTimeout(() => {
       if (canvas.current) {
@@ -2070,7 +2281,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
     }, 50);
     return () => clearTimeout(id);
   }, [fullscreen, fitToScreen]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isMountedRef.current) return;
     const handleResize = () => {
       if (isMountedRef.current && canvas.current) {
@@ -2082,8 +2293,8 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
       window.removeEventListener("resize", handleResize);
     };
   }, [fitToScreen]);
-  const firstDataRef = useRef(true);
-  useEffect2(() => {
+  const firstDataRef = useRef2(true);
+  useEffect3(() => {
     if (!isMountedRef.current) return;
     if (nodes.length > 0) {
       if (firstDataRef.current) {
@@ -2096,18 +2307,18 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
   }, [nodes.length, fitToScreen]);
   if (nodes.length === 0) {
     devLog8("[ReGraph] empty state render");
-    return /* @__PURE__ */ jsxs5(Card2, { className: "relative w-full h-full items-center justify-center text-slate-500 gap-2 shadow-xs p-4", children: [
-      /* @__PURE__ */ jsx6("div", { children: "No data to display." }),
-      /* @__PURE__ */ jsxs5("div", { children: [
+    return /* @__PURE__ */ jsxs6(Card2, { className: "relative w-full h-full items-center justify-center text-slate-500 gap-2 shadow-xs p-4", children: [
+      /* @__PURE__ */ jsx7("div", { children: "No data to display." }),
+      /* @__PURE__ */ jsxs6("div", { children: [
         "Please",
         " ",
-        /* @__PURE__ */ jsx6("span", { className: "font-semibold", children: "run a query, check filters, or add a node" }),
+        /* @__PURE__ */ jsx7("span", { className: "font-semibold", children: "run a query, check filters, or add a node" }),
         " ",
         "to the workbench to populate the graph."
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -2115,7 +2326,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
         fullscreen ? "fixed inset-0 z-50 w-screen h-screen p-0 m-0" : "relative w-full h-full"
       ),
       children: [
-        /* @__PURE__ */ jsx6(Card2, { className: "h-full shadow-xs p-4", children: /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(Card2, { className: "h-full shadow-xs p-4", children: /* @__PURE__ */ jsx7(
           GraphCanvas,
           {
             ref: canvas,
@@ -2140,21 +2351,22 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
                 elementId: data.id,
                 elementType
               });
-              return /* @__PURE__ */ jsx6(
+              return /* @__PURE__ */ jsx7(
                 ReaContextMenu_default,
                 {
                   data,
                   onClose,
                   elementType,
                   useGraphExploration,
-                  onCopyNode
+                  onCopyNode,
+                  getNodeEdgeTypes
                 }
               );
             }
           }
         ) }),
-        hoveredNode && /* @__PURE__ */ jsx6(NodeHoverInfo_default, { node: hoveredNode }),
-        /* @__PURE__ */ jsx6(
+        hoveredNode && /* @__PURE__ */ jsx7(NodeHoverInfo_default, { node: hoveredNode }),
+        /* @__PURE__ */ jsx7(
           LayoutAndCameraControls_default,
           {
             fitToScreen,
@@ -2166,7 +2378,7 @@ function ReaGraph({ onCopyNode, extraToolbarContent }) {
             isFocusMode,
             onResetView: () => {
               useGraphExploration.getState().resetView();
-              toast.success(
+              toast2.success(
                 isFocusMode ? "Focus mode cleared" : "Hidden elements restored"
               );
             },
@@ -2181,12 +2393,12 @@ var ReaGraph_default = ReaGraph;
 
 // src/components/cyto/CytoscapeGraph.tsx
 import {
-  useEffect as useEffect3,
-  useRef as useRef2,
-  useState as useState4,
-  useCallback as useCallback3
+  useEffect as useEffect4,
+  useRef as useRef3,
+  useState as useState6,
+  useCallback as useCallback4
 } from "react";
-import { devLog as devLog10, errorLog as errorLog2 } from "@petrarca/sonnet-core";
+import { devLog as devLog10, errorLog as errorLog3 } from "@petrarca/sonnet-core";
 import cytoscape from "cytoscape";
 import fcose from "cytoscape-fcose";
 import cola from "cytoscape-cola";
@@ -2208,7 +2420,7 @@ import {
   SimpleTooltip as SimpleTooltip3
 } from "@petrarca/sonnet-ui";
 import { LayoutPanelTop as LayoutPanelTop2, Monitor, Frame, Eye as Eye2, Minus } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function ViewControls2({
   zoomIn,
   zoomOut,
@@ -2219,17 +2431,17 @@ function ViewControls2({
   isFocusMode,
   onResetView
 }) {
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Zoom In", side: "left", children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: zoomIn, children: /* @__PURE__ */ jsx7("span", { style: { fontWeight: 600 }, children: "+" }) }) }),
-    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Zoom Out", side: "left", children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: zoomOut, children: /* @__PURE__ */ jsx7(Minus, {}) }) }),
-    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Fullscreen", side: "left", children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: toggleFullscreen, children: !fullscreen ? /* @__PURE__ */ jsx7(Monitor, {}) : /* @__PURE__ */ jsx7(Frame, {}) }) }),
-    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Fit to screen", side: "left", children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: fitToScreen, children: /* @__PURE__ */ jsx7(Frame, {}) }) }),
-    (hasHiddenElements || isFocusMode) && onResetView && /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(SimpleTooltip3, { label: "Zoom In", side: "left", children: /* @__PURE__ */ jsx8(Button3, { variant: "ghost", size: "icon", onClick: zoomIn, children: /* @__PURE__ */ jsx8("span", { style: { fontWeight: 600 }, children: "+" }) }) }),
+    /* @__PURE__ */ jsx8(SimpleTooltip3, { label: "Zoom Out", side: "left", children: /* @__PURE__ */ jsx8(Button3, { variant: "ghost", size: "icon", onClick: zoomOut, children: /* @__PURE__ */ jsx8(Minus, {}) }) }),
+    /* @__PURE__ */ jsx8(SimpleTooltip3, { label: "Fullscreen", side: "left", children: /* @__PURE__ */ jsx8(Button3, { variant: "ghost", size: "icon", onClick: toggleFullscreen, children: !fullscreen ? /* @__PURE__ */ jsx8(Monitor, {}) : /* @__PURE__ */ jsx8(Frame, {}) }) }),
+    /* @__PURE__ */ jsx8(SimpleTooltip3, { label: "Fit to screen", side: "left", children: /* @__PURE__ */ jsx8(Button3, { variant: "ghost", size: "icon", onClick: fitToScreen, children: /* @__PURE__ */ jsx8(Frame, {}) }) }),
+    (hasHiddenElements || isFocusMode) && onResetView && /* @__PURE__ */ jsx8(
       SimpleTooltip3,
       {
         label: isFocusMode ? "Reset Focus" : "Show All Hidden",
         side: "left",
-        children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: onResetView, children: /* @__PURE__ */ jsx7(Eye2, {}) })
+        children: /* @__PURE__ */ jsx8(Button3, { variant: "ghost", size: "icon", onClick: onResetView, children: /* @__PURE__ */ jsx8(Eye2, {}) })
       }
     )
   ] });
@@ -2264,12 +2476,12 @@ var LAYOUT_GROUPS = [
   }
 ];
 function LayoutDropdown2({ currentLayout, updateLayout }) {
-  return /* @__PURE__ */ jsxs6(DropdownMenu3, { children: [
-    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Layout", side: "left", children: /* @__PURE__ */ jsx7(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx7(LayoutPanelTop2, {}) }) }) }),
-    /* @__PURE__ */ jsx7(DropdownMenuContent3, { side: "left", align: "start", children: LAYOUT_GROUPS.map((group, groupIdx) => /* @__PURE__ */ jsxs6("div", { children: [
-      groupIdx > 0 && /* @__PURE__ */ jsx7(DropdownMenuSeparator2, {}),
-      /* @__PURE__ */ jsx7(DropdownMenuLabel2, { children: group.label }),
-      group.items.map((item) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs7(DropdownMenu3, { children: [
+    /* @__PURE__ */ jsx8(SimpleTooltip3, { label: "Layout", side: "left", children: /* @__PURE__ */ jsx8(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx8(Button3, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx8(LayoutPanelTop2, {}) }) }) }),
+    /* @__PURE__ */ jsx8(DropdownMenuContent3, { side: "left", align: "start", children: LAYOUT_GROUPS.map((group, groupIdx) => /* @__PURE__ */ jsxs7("div", { children: [
+      groupIdx > 0 && /* @__PURE__ */ jsx8(DropdownMenuSeparator2, {}),
+      /* @__PURE__ */ jsx8(DropdownMenuLabel2, { children: group.label }),
+      group.items.map((item) => /* @__PURE__ */ jsx8(
         DropdownMenuItem3,
         {
           onClick: () => updateLayout(item.layout),
@@ -2294,9 +2506,9 @@ function CytoscapeControls({
   onResetView,
   extraToolbarContent
 }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "absolute right-2 top-2 flex flex-col border bg-white rounded-md shadow-sm z-10", children: [
-    /* @__PURE__ */ jsx7(RendererDropdown, {}),
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs7("div", { className: "absolute right-2 top-2 flex flex-col border bg-white rounded-md shadow-sm z-10", children: [
+    /* @__PURE__ */ jsx8(RendererDropdown, {}),
+    /* @__PURE__ */ jsx8(
       ViewControls2,
       {
         zoomIn,
@@ -2310,7 +2522,7 @@ function CytoscapeControls({
       }
     ),
     extraToolbarContent,
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       LayoutDropdown2,
       {
         currentLayout,
@@ -2590,12 +2802,13 @@ function getLayoutPreset(options) {
 }
 
 // src/components/cyto/contextMenuConfig.ts
-import { devLog as devLog9, errorLog } from "@petrarca/sonnet-core";
-import { toast as toast2 } from "sonner";
+import { devLog as devLog9, errorLog as errorLog2 } from "@petrarca/sonnet-core";
+import { toast as toast3 } from "sonner";
 var createNodeContextMenu = ({
   cy,
   useGraphExploration,
-  onCopyNode
+  onCopyNode,
+  onExpandRequest
 }) => {
   devLog9("[CxtMenu] Initializing node context menu");
   return cy.cxtmenu({
@@ -2617,7 +2830,7 @@ var createNodeContextMenu = ({
           if (visualGraph) {
             onCopyNode?.(visualGraph);
           } else {
-            errorLog("[CxtMenu] visualGraph not found in element data");
+            errorLog2("[CxtMenu] visualGraph not found in element data");
           }
         }
       },
@@ -2647,21 +2860,23 @@ var createNodeContextMenu = ({
       },
       {
         content: "Expand",
-        select: async (ele) => {
+        select: (ele) => {
           const nodeId = ele.id();
-          devLog9("[CxtMenu] Expanding node:", nodeId);
-          try {
-            await useGraphExploration.getState().expandNode(nodeId);
-            devLog9("[CxtMenu] Expansion complete");
-          } catch (error) {
-            errorLog("[CxtMenu] Expansion failed:", error);
-            toast2.error("Failed to expand node");
+          devLog9("[CxtMenu] Expand request for node:", nodeId);
+          if (onExpandRequest) {
+            const pos = ele.renderedPosition();
+            const label = ele.data("label") || nodeId;
+            onExpandRequest({ nodeId, nodeLabel: label, x: pos.x, y: pos.y });
+          } else {
+            useGraphExploration.getState().expandNode(nodeId).catch((error) => {
+              errorLog2("[CxtMenu] Expansion failed:", error);
+              toast3.error("Failed to expand node");
+            });
           }
         }
       }
     ],
     menuRadius: 60,
-    // Increased for more items (default is 100)
     fillColor: "rgba(0, 0, 0, 0.75)",
     activeFillColor: "rgba(59, 130, 246, 0.75)",
     // blue-500
@@ -2746,8 +2961,49 @@ var createEdgeContextMenu = ({
 };
 
 // src/components/cyto/CytoscapeGraph.tsx
-import { toast as toast3 } from "sonner";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { toast as toast4 } from "sonner";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function CytoscapeExpandOverlay({
+  expandRequest,
+  containerRef,
+  useGraphExploration,
+  getNodeEdgeTypes,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: "absolute z-50",
+      style: {
+        left: Math.min(
+          Math.max(expandRequest.x, 120),
+          (containerRef.current?.clientWidth ?? 800) - 120
+        ),
+        top: Math.min(
+          Math.max(expandRequest.y, 10),
+          (containerRef.current?.clientHeight ?? 600) - 260
+        ),
+        transform: "translate(-50%, 12px)"
+      },
+      children: /* @__PURE__ */ jsx9(
+        ExpandOptionsPanel_default,
+        {
+          nodeLabel: expandRequest.nodeLabel,
+          onExpand: (options) => {
+            const { nodeId } = expandRequest;
+            onClose();
+            useGraphExploration.getState().expandNode(nodeId, options).catch((err) => {
+              errorLog3("[CxtMenu] Expansion failed:", err);
+              toast4.error("Failed to expand node");
+            });
+          },
+          onBack: onClose,
+          getEdgeTypes: getNodeEdgeTypes ? () => getNodeEdgeTypes(Number(expandRequest.nodeId)) : void 0
+        }
+      )
+    }
+  );
+}
 try {
   cytoscape.use(fcose);
   cytoscape.use(cola);
@@ -2825,12 +3081,12 @@ function applyLayout({
   try {
     cy.layout(layoutOpts).run();
   } catch (e) {
-    errorLog2("Layout error, falling back to dagre:", e);
+    errorLog3("Layout error, falling back to dagre:", e);
     if (chosen === "klay") {
       try {
         cy.layout(getPreset("dagre")).run();
       } catch (inner) {
-        errorLog2("Fallback layout also failed, using grid:", inner);
+        errorLog3("Fallback layout also failed, using grid:", inner);
         cy.layout(getPreset("grid")).run();
       }
     } else {
@@ -3037,8 +3293,8 @@ function computeGraphViewState({
   };
 }
 function useFullscreen(fitToScreen, cyRef) {
-  const [fullscreen, setFullscreen] = useState4(false);
-  useEffect3(() => {
+  const [fullscreen, setFullscreen] = useState6(false);
+  useEffect4(() => {
     if (fullscreen) {
       const prevOverflow = document.body.style.overflow;
       document.body.style.overflow = "hidden";
@@ -3053,7 +3309,7 @@ function useFullscreen(fitToScreen, cyRef) {
       };
     }
   }, [fullscreen, fitToScreen]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!fullscreen) return;
     const id = setTimeout(() => {
       if (cyRef.current) {
@@ -3066,7 +3322,7 @@ function useFullscreen(fitToScreen, cyRef) {
   return {
     fullscreen,
     setFullscreen,
-    toggleFullscreen: useCallback3(() => setFullscreen((f) => !f), [])
+    toggleFullscreen: useCallback4(() => setFullscreen((f) => !f), [])
   };
 }
 function setupCytoscapeEventHandlers({
@@ -3078,7 +3334,8 @@ function setupCytoscapeEventHandlers({
   setSelectedEdgeStore,
   clearSelectionStore,
   useGraphExploration,
-  onCopyNode
+  onCopyNode,
+  onExpandRequest
 }) {
   const updateSelectedNodeIds = (nodeIds) => {
     setSelectedNodeIdsStore(nodeIds);
@@ -3166,22 +3423,31 @@ function setupCytoscapeEventHandlers({
   cy.on("tap", (evt) => {
     if (evt.target === cy) clearAll();
   });
-  createNodeContextMenu({ cy, useGraphExploration, onCopyNode });
+  createNodeContextMenu({
+    cy,
+    useGraphExploration,
+    onCopyNode,
+    onExpandRequest
+  });
   createEdgeContextMenu({ cy, useGraphExploration });
 }
 function CytoscapeGraph({
   layout: initialLayout = "auto",
   fitPadding = 30,
   onCopyNode,
-  extraToolbarContent
+  extraToolbarContent,
+  getNodeEdgeTypes
 }) {
-  const containerRef = useRef2(null);
-  const cyRef = useRef2(null);
-  const isInitializedRef = useRef2(false);
-  const [currentLayout, setCurrentLayout] = useState4(initialLayout);
-  const nodesRef = useRef2([]);
-  const edgesRef = useRef2([]);
-  const pendingFocusActionRef = useRef2(null);
+  const containerRef = useRef3(null);
+  const cyRef = useRef3(null);
+  const isInitializedRef = useRef3(false);
+  const [currentLayout, setCurrentLayout] = useState6(initialLayout);
+  const [expandRequest, setExpandRequest] = useState6(
+    null
+  );
+  const nodesRef = useRef3([]);
+  const edgesRef = useRef3([]);
+  const pendingFocusActionRef = useRef3(null);
   const cytoData = useCytoscapeData();
   const live = useLiveGraphData();
   const nodes = live.nodes;
@@ -3201,13 +3467,13 @@ function CytoscapeGraph({
     setSelectedEdge: setSelectedEdgeStore,
     clear: clearSelectionStore
   } = useSelection3.getState();
-  const selectedNodeIdsRef = useRef2(
+  const selectedNodeIdsRef = useRef3(
     useSelection3.getState().selectedNodeIds
   );
-  const selectedEdgeRef = useRef2(
+  const selectedEdgeRef = useRef3(
     useSelection3.getState().selectedEdge
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const state = useSelection3.getState();
     selectedNodeIdsRef.current = state.selectedNodeIds;
     selectedEdgeRef.current = state.selectedEdge;
@@ -3227,13 +3493,13 @@ function CytoscapeGraph({
       });
     }
   }, [useSelection3]);
-  useEffect3(() => {
+  useEffect4(() => {
     nodesRef.current = nodes;
   }, [nodes]);
-  useEffect3(() => {
+  useEffect4(() => {
     edgesRef.current = edges;
   }, [edges]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!containerRef.current || cyRef.current) return;
     isInitializedRef.current = true;
     cyRef.current = cytoscape({
@@ -3384,7 +3650,8 @@ function CytoscapeGraph({
         setSelectedEdgeStore,
         clearSelectionStore,
         useGraphExploration,
-        onCopyNode
+        onCopyNode,
+        onExpandRequest: setExpandRequest
       });
     }
     return () => {
@@ -3392,10 +3659,10 @@ function CytoscapeGraph({
       cyRef.current = null;
     };
   }, []);
-  const elementIdsRef = useRef2("");
-  const lastLayoutRef = useRef2("");
-  const lastFitPaddingRef = useRef2(fitPadding);
-  useEffect3(() => {
+  const elementIdsRef = useRef3("");
+  const lastLayoutRef = useRef3("");
+  const lastFitPaddingRef = useRef3(fitPadding);
+  useEffect4(() => {
     const cy = cyRef.current;
     if (!cy || !isInitializedRef.current) return;
     const currentIds = nodes.map((n) => n.id_).sort().join(",") + "|" + edges.map((e) => e.id_).sort().join(",");
@@ -3468,12 +3735,12 @@ function CytoscapeGraph({
       });
     }
   }, [nodes, edges, currentLayout, fitPadding]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!cyRef.current) return;
     cyRef.current.elements().unselect();
     clearSelectionStore();
   }, [lastDataChangeTime, clearSelectionStore]);
-  useEffect3(() => {
+  useEffect4(() => {
     const unsubscribe = GraphFocus_default.subscribe((state) => {
       handleFocusStateChange({
         focusAction: state.focusAction,
@@ -3492,15 +3759,15 @@ function CytoscapeGraph({
   const updateLayout = (newLayout) => {
     setCurrentLayout(newLayout);
   };
-  const fitToScreen = useCallback3(() => {
+  const fitToScreen = useCallback4(() => {
     if (cyRef.current) {
       cyRef.current.fit(void 0, fitPadding);
     }
   }, [fitPadding]);
-  useEffect3(() => {
+  useEffect4(() => {
     fitToScreen();
   }, [nodes.length, fitToScreen]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isInitializedRef.current) return;
     const handleResize = () => cyRef.current?.resize();
     window.addEventListener("resize", handleResize);
@@ -3519,18 +3786,28 @@ function CytoscapeGraph({
     isFocusMode,
     fullscreen
   });
-  return /* @__PURE__ */ jsx8("div", { className: outerClass, children: /* @__PURE__ */ jsxs7("div", { className: innerClass, children: [
-    /* @__PURE__ */ jsx8("div", { ref: containerRef, className: "absolute inset-0" }),
-    showEmptyMessage && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center text-xs text-gray-500 pointer-events-none select-none", children: "No graph data to visualize (run a query or check the filters)" }),
-    showFilteredMessage && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center text-xs text-gray-500 pointer-events-none select-none", children: 'All elements are hidden or filtered (click "Reset Focus" to restore)' }),
-    showControls && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { className: outerClass, children: /* @__PURE__ */ jsxs8("div", { className: innerClass, children: [
+    /* @__PURE__ */ jsx9("div", { ref: containerRef, className: "absolute inset-0" }),
+    expandRequest && /* @__PURE__ */ jsx9(
+      CytoscapeExpandOverlay,
+      {
+        expandRequest,
+        containerRef,
+        useGraphExploration,
+        getNodeEdgeTypes,
+        onClose: () => setExpandRequest(null)
+      }
+    ),
+    showEmptyMessage && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 flex items-center justify-center text-xs text-gray-500 pointer-events-none select-none", children: "No graph data to visualize (run a query or check the filters)" }),
+    showFilteredMessage && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 flex items-center justify-center text-xs text-gray-500 pointer-events-none select-none", children: 'All elements are hidden or filtered (click "Reset Focus" to restore)' }),
+    showControls && /* @__PURE__ */ jsx9(
       CytoscapeControls_default,
       {
         updateLayout,
         fitToScreen,
         onResetView: () => {
           resetView();
-          toast3.success(
+          toast4.success(
             isFocusMode ? "Focus mode cleared" : "Hidden elements restored"
           );
         },
@@ -3571,26 +3848,29 @@ function CytoscapeGraph({
 var CytoscapeGraph_default = CytoscapeGraph;
 
 // src/components/GraphVisualizer.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function GraphVisualizer({
   onCopyNode,
-  extraToolbarContent
+  extraToolbarContent,
+  getNodeEdgeTypes
 }) {
   const { renderer } = useGraphRenderer();
-  return /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full flex flex-col overflow-hidden", children: /* @__PURE__ */ jsxs8("div", { className: "flex-1 h-full", children: [
-    renderer === "reagraph" && /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full flex flex-col overflow-hidden", children: /* @__PURE__ */ jsxs9("div", { className: "flex-1 h-full", children: [
+    renderer === "reagraph" && /* @__PURE__ */ jsx10(
       ReaGraph_default,
       {
         onCopyNode,
-        extraToolbarContent
+        extraToolbarContent,
+        getNodeEdgeTypes
       },
       "reagraph"
     ),
-    renderer === "cytoscape" && /* @__PURE__ */ jsx9(
+    renderer === "cytoscape" && /* @__PURE__ */ jsx10(
       CytoscapeGraph_default,
       {
         onCopyNode,
-        extraToolbarContent
+        extraToolbarContent,
+        getNodeEdgeTypes
       },
       "cytoscape"
     )
@@ -3602,29 +3882,29 @@ var GraphVisualizer_default = GraphVisualizer;
 import { Card as Card5 } from "@petrarca/sonnet-ui";
 
 // src/components/ActionPanel/NodeInfoCard.tsx
-import { useState as useState5 } from "react";
+import { useState as useState7 } from "react";
 import {
   Card as Card3,
   Collapsible,
   CollapsibleContent,
-  CollapsibleTrigger
+  CollapsibleTrigger,
+  PropertyList
 } from "@petrarca/sonnet-ui";
 import { copyTextToClipboard } from "@petrarca/sonnet-core";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function NodeInfoCard({ node }) {
-  const [showProperties, setShowProperties] = useState5(false);
-  return /* @__PURE__ */ jsxs9(
+  const [showProperties, setShowProperties] = useState7(false);
+  return /* @__PURE__ */ jsxs10(
     Card3,
     {
-      className: "w-full rounded-lg overflow-hidden bg-gray-100 border p-4 shadow-xs",
+      className: "w-full rounded-lg overflow-hidden bg-muted/30 border shadow-none p-3",
       style: {
-        background: "#f3f4f6",
         borderLeft: `4px solid ${node.visual.color}`
       },
       children: [
-        /* @__PURE__ */ jsx10("p", { className: "leading-tight font-semibold mb-0", children: node.label_ }),
-        /* @__PURE__ */ jsx10("p", { className: "leading-tight mb-1", children: node.visual.displayName }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("p", { className: "text-sm leading-tight font-medium mb-0", children: node.label_ }),
+        /* @__PURE__ */ jsx11("p", { className: "text-sm leading-tight mb-1", children: node.visual.displayName }),
+        /* @__PURE__ */ jsx11(
           "p",
           {
             className: "text-xs text-muted-foreground cursor-pointer select-all mb-2",
@@ -3633,23 +3913,9 @@ function NodeInfoCard({ node }) {
             children: node.id_
           }
         ),
-        /* @__PURE__ */ jsxs9(Collapsible, { open: showProperties, onOpenChange: setShowProperties, children: [
-          /* @__PURE__ */ jsx10(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx10("button", { className: "text-xs cursor-pointer", children: showProperties ? "Hide" : "Show more" }) }),
-          /* @__PURE__ */ jsx10(CollapsibleContent, { children: /* @__PURE__ */ jsxs9("ul", { className: "list-none mt-2", children: [
-            /* @__PURE__ */ jsx10("p", { className: "text-sm font-semibold mb-1 tracking-wide", children: "Properties" }),
-            Object.entries(node.properties_ || {}).map(([key, value]) => /* @__PURE__ */ jsxs9("li", { className: "mb-2 leading-tight", children: [
-              /* @__PURE__ */ jsx10("p", { className: "text-xs text-slate-600 uppercase tracking-wide", children: key }),
-              /* @__PURE__ */ jsx10(
-                "p",
-                {
-                  className: "text-sm truncate max-w-[190px] cursor-pointer",
-                  onClick: () => copyTextToClipboard(String(value)),
-                  title: "Click to copy value",
-                  children: String(value)
-                }
-              )
-            ] }, key))
-          ] }) })
+        /* @__PURE__ */ jsxs10(Collapsible, { open: showProperties, onOpenChange: setShowProperties, children: [
+          /* @__PURE__ */ jsx11(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx11("button", { className: "text-xs cursor-pointer", children: showProperties ? "Hide" : "Show more" }) }),
+          /* @__PURE__ */ jsx11(CollapsibleContent, { children: /* @__PURE__ */ jsx11("div", { className: "mt-2", children: /* @__PURE__ */ jsx11(PropertyList, { properties: node.properties_ || {}, showHeader: true }) }) })
         ] })
       ]
     }
@@ -3658,32 +3924,32 @@ function NodeInfoCard({ node }) {
 var NodeInfoCard_default = NodeInfoCard;
 
 // src/components/ActionPanel/EdgeInfoCard.tsx
-import { useState as useState6 } from "react";
+import { useState as useState8 } from "react";
 import {
   Card as Card4,
   Collapsible as Collapsible2,
   CollapsibleContent as CollapsibleContent2,
-  CollapsibleTrigger as CollapsibleTrigger2
+  CollapsibleTrigger as CollapsibleTrigger2,
+  PropertyList as PropertyList2
 } from "@petrarca/sonnet-ui";
 import { ArrowDown } from "lucide-react";
 import { copyTextToClipboard as copyTextToClipboard2 } from "@petrarca/sonnet-core";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function EdgeInfoCard({ edge }) {
-  const [showProperties, setShowProperties] = useState6(false);
-  return /* @__PURE__ */ jsxs10(
+  const [showProperties, setShowProperties] = useState8(false);
+  return /* @__PURE__ */ jsxs11(
     Card4,
     {
-      className: "w-full rounded-lg overflow-hidden bg-gray-100 border p-4 shadow-xs",
+      className: "w-full rounded-lg overflow-hidden bg-muted/30 border shadow-none p-3",
       style: {
-        background: "#f3f4f6",
         borderLeft: `4px solid ${edge.visual.color}`
       },
       children: [
-        /* @__PURE__ */ jsxs10("p", { className: "leading-tight mb-1", children: [
-          /* @__PURE__ */ jsx11(ArrowDown, { className: "inline-block mr-1 opacity-70 align-middle" }),
-          /* @__PURE__ */ jsx11("strong", { className: "font-semibold align-middle", children: edge.label_ })
+        /* @__PURE__ */ jsxs11("p", { className: "text-sm leading-tight mb-1", children: [
+          /* @__PURE__ */ jsx12(ArrowDown, { className: "inline-block mr-1 opacity-70 align-middle h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx12("strong", { className: "font-medium align-middle", children: edge.label_ })
         ] }),
-        edge.id_ && /* @__PURE__ */ jsx11(
+        edge.id_ && /* @__PURE__ */ jsx12(
           "p",
           {
             className: "text-xs text-muted-foreground select-all cursor-pointer mt-1 mb-2",
@@ -3692,23 +3958,9 @@ function EdgeInfoCard({ edge }) {
             children: edge.id_
           }
         ),
-        edge.properties_ && Object.keys(edge.properties_).length > 0 && /* @__PURE__ */ jsxs10(Collapsible2, { open: showProperties, onOpenChange: setShowProperties, children: [
-          /* @__PURE__ */ jsx11(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx11("button", { className: "text-xs cursor-pointer", children: showProperties ? "Hide" : "Show more" }) }),
-          /* @__PURE__ */ jsx11(CollapsibleContent2, { children: /* @__PURE__ */ jsxs10("ul", { className: "list-none mt-2", children: [
-            /* @__PURE__ */ jsx11("p", { className: "text-sm font-semibold mb-1 tracking-wide", children: "Properties" }),
-            Object.entries(edge.properties_ || {}).map(([key, value]) => /* @__PURE__ */ jsxs10("li", { className: "mb-2 leading-tight", children: [
-              /* @__PURE__ */ jsx11("p", { className: "text-xs text-slate-600 uppercase tracking-wide", children: key }),
-              /* @__PURE__ */ jsx11(
-                "p",
-                {
-                  className: "text-sm truncate max-w-[190px] cursor-pointer",
-                  onClick: () => copyTextToClipboard2(String(value)),
-                  title: "Click to copy value",
-                  children: String(value)
-                }
-              )
-            ] }, key))
-          ] }) })
+        edge.properties_ && Object.keys(edge.properties_).length > 0 && /* @__PURE__ */ jsxs11(Collapsible2, { open: showProperties, onOpenChange: setShowProperties, children: [
+          /* @__PURE__ */ jsx12(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx12("button", { className: "text-xs cursor-pointer", children: showProperties ? "Hide" : "Show more" }) }),
+          /* @__PURE__ */ jsx12(CollapsibleContent2, { children: /* @__PURE__ */ jsx12("div", { className: "mt-2", children: /* @__PURE__ */ jsx12(PropertyList2, { properties: edge.properties_ || {}, showHeader: true }) }) })
         ] })
       ]
     }
@@ -3720,7 +3972,7 @@ var EdgeInfoCard_default = EdgeInfoCard;
 import { Badge } from "@petrarca/sonnet-ui";
 import { formatNumber, devLog as devLog11 } from "@petrarca/sonnet-core";
 import { useMemo as useMemo4 } from "react";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function computeEdgeToNodeLabels(nodesById, edgesById) {
   const mapping = {};
   for (const edge of Object.values(edgesById)) {
@@ -3753,10 +4005,10 @@ function AllToggleBadge({
   badgeKey
 }) {
   const bgColor = allDisabled ? colorPalette["faded"] : colorPalette["neutral"];
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     Badge,
     {
-      className: "cursor-pointer text-sm px-3 py-1",
+      className: "cursor-pointer text-xs px-2.5 py-0.5",
       style: {
         textTransform: "none",
         backgroundColor: bgColor,
@@ -3788,10 +4040,10 @@ function NodeLabelBadges({
       colorPalette,
       label
     );
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       Badge,
       {
-        className: "cursor-pointer text-sm px-3 py-1",
+        className: "cursor-pointer text-xs px-2.5 py-0.5",
         style: {
           textTransform: "none",
           backgroundColor: bgColor,
@@ -3826,10 +4078,10 @@ function EdgeLabelBadges({
       colorPalette,
       "neutral"
     );
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       Badge,
       {
-        className: "cursor-pointer text-sm px-3 py-1",
+        className: "cursor-pointer text-xs px-2.5 py-0.5",
         style: {
           textTransform: "none",
           backgroundColor: bgColor,
@@ -3903,12 +4155,12 @@ function GraphOverview({
       toggleAllEdgeLabelsDisabled();
     }
   };
-  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm font-semibold", children: "Overview" }),
-    allLabels.length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Node Labels" }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start gap-2", children: [
-        /* @__PURE__ */ jsx12(
+  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,
@@ -3918,7 +4170,7 @@ function GraphOverview({
             badgeKey: "all"
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           NodeLabelBadges,
           {
             labels: allLabels,
@@ -3931,10 +4183,10 @@ function GraphOverview({
         )
       ] })
     ] }),
-    allEdgeLabels.length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Edge Types" }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start gap-2", children: [
-        /* @__PURE__ */ jsx12(
+    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__ */ jsxs12("div", { className: "flex flex-col items-start gap-2", children: [
+        /* @__PURE__ */ jsx13(
           AllToggleBadge,
           {
             allDisabled: allEdgeLabelsDisabled,
@@ -3944,7 +4196,7 @@ function GraphOverview({
             badgeKey: "edge-all"
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           EdgeLabelBadges,
           {
             labels: allEdgeLabels,
@@ -3970,16 +4222,16 @@ function Overview() {
     );
   }, [baseNormalized]);
   if (stats && stats.values != null && stats.values > 0) {
-    return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-      /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm font-semibold", children: "Overview" }),
-      /* @__PURE__ */ jsxs11("p", { className: "text-sm text-slate-700", children: [
+    return /* @__PURE__ */ jsxs12(Fragment3, { children: [
+      /* @__PURE__ */ jsx13("p", { className: "mt-2 text-sm font-semibold", children: "Overview" }),
+      /* @__PURE__ */ jsxs12("p", { className: "text-sm text-muted-foreground", children: [
         formatNumber(stats.values),
         " Values"
       ] })
     ] });
   }
   if (stats && stats.nodes > 0 && colorPalette) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       GraphOverview,
       {
         stats,
@@ -3996,7 +4248,7 @@ var Overview_default = Overview;
 
 // src/components/ActionPanel/ActionPanel.tsx
 import { useMemo as useMemo5 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function ActionPanel({ actions }) {
   const useSelection3 = useWorkspaceSelection();
   const selectedNodeIds = useSelection3(
@@ -4012,28 +4264,139 @@ function ActionPanel({ actions }) {
   const secondNode = selectedNodes?.[1];
   const hasEdge = !!selectedEdge;
   const showOverview = !firstNode && !hasEdge;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     Card5,
     {
-      className: "h-full min-w-64 flex flex-col bg-gray-50 shadow-xs p-4",
+      className: "h-full min-w-64 flex flex-col bg-card shadow-none p-4",
       style: { maxHeight: "100%", overflow: "hidden" },
       children: [
-        actions && /* @__PURE__ */ jsx13("div", { className: "flex-shrink-0 mb-2", children: actions }),
-        /* @__PURE__ */ jsx13("div", { className: "flex-1 overflow-auto pr-1", children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-4", children: [
-          firstNode && /* @__PURE__ */ jsx13(NodeInfoCard_default, { node: firstNode }),
-          hasEdge && selectedEdge && /* @__PURE__ */ jsx13(EdgeInfoCard_default, { edge: selectedEdge }),
-          secondNode && /* @__PURE__ */ jsx13(NodeInfoCard_default, { node: secondNode }),
-          showOverview && /* @__PURE__ */ jsx13(Overview_default, {})
+        actions && /* @__PURE__ */ jsx14("div", { className: "flex-shrink-0 mb-2", children: actions }),
+        /* @__PURE__ */ jsx14("div", { className: "flex-1 overflow-auto pr-1", children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3", children: [
+          firstNode && /* @__PURE__ */ jsx14(NodeInfoCard_default, { node: firstNode }),
+          hasEdge && selectedEdge && /* @__PURE__ */ jsx14(EdgeInfoCard_default, { edge: selectedEdge }),
+          secondNode && /* @__PURE__ */ jsx14(NodeInfoCard_default, { node: secondNode }),
+          showOverview && /* @__PURE__ */ jsx14(Overview_default, {})
         ] }) })
       ]
     }
   );
 }
 var ActionPanel_default = ActionPanel;
+
+// src/components/GraphA11yList/GraphA11yList.tsx
+import { useMemo as useMemo6, useRef as useRef4 } 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";
+function GraphA11yList({
+  visible = false,
+  rowHeight = 28,
+  maxHeight = 320,
+  className
+}) {
+  const live = useLiveGraphData();
+  const useSelection3 = useWorkspaceSelection();
+  const selectedNodeIds = useSelection3(
+    (s) => s.selectedNodeIds
+  );
+  const selectedEdge = useSelection3((s) => s.selectedEdge);
+  const setSelectedNodeIds = useSelection3(
+    (s) => s.setSelectedNodeIds
+  );
+  const setSelectedEdge = useSelection3(
+    (s) => s.setSelectedEdge
+  );
+  const rows = useMemo6(() => {
+    const nodeRows = live.nodes.map((n) => ({
+      kind: "node",
+      id: String(n.id_),
+      label: n.visual?.displayName || n.label_ || String(n.id_),
+      node: n
+    }));
+    const edgeRows = live.edges.map((e) => ({
+      kind: "edge",
+      id: String(e.id_),
+      label: e.label_ || String(e.id_),
+      edge: e
+    }));
+    return [...nodeRows, ...edgeRows];
+  }, [live.nodes, live.edges]);
+  const parentRef = useRef4(null);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => rowHeight,
+    overscan: 8
+  });
+  const selectRow = (row) => {
+    if (row.kind === "node") {
+      setSelectedEdge(null);
+      setSelectedNodeIds([row.id]);
+    } else {
+      setSelectedNodeIds([]);
+      setSelectedEdge(row.edge);
+    }
+  };
+  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",
+      className: cn2(visible ? "rounded-md border" : SR_ONLY, className),
+      children: /* @__PURE__ */ jsx15(
+        "div",
+        {
+          ref: parentRef,
+          style: { maxHeight: visible ? maxHeight : void 0, overflow: "auto" },
+          children: /* @__PURE__ */ jsx15(
+            "div",
+            {
+              style: {
+                height: `${virtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative"
+              },
+              children: virtualizer.getVirtualItems().map((vi) => {
+                const row = rows[vi.index];
+                if (!row) return null;
+                const selected = isSelected(row);
+                return /* @__PURE__ */ jsx15(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    "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),
+                    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"
+                    ),
+                    style: {
+                      height: `${vi.size}px`,
+                      transform: `translateY(${vi.start}px)`
+                    },
+                    children: /* @__PURE__ */ jsx15("span", { className: "truncate", children: row.label })
+                  },
+                  vi.key
+                );
+              })
+            }
+          )
+        }
+      )
+    }
+  );
+}
 export {
   ActionPanel_default as ActionPanel,
   EMPTY_NORMALIZED,
   EdgeInfoCard_default as EdgeInfoCard,
+  GraphA11yList,
   GraphRendererProvider,
   GraphStoresContext,
   GraphVisualizer_default as GraphVisualizer,