@petrarca/sonnet-graph 0.6.0 → 0.8.0

package/dist/index.js

@@ -182,11 +182,225 @@ var EMPTY_NORMALIZED = {
   edgeIds: []
 };
 
-// src/stores/Selection.ts
+// src/graph/extractFromRows.ts
+function isNodeCell(value) {
+  return typeof value === "object" && value !== null && "node" in value;
+}
+function isEdgeCell(value) {
+  return typeof value === "object" && value !== null && "edge" in value;
+}
+function extractGraphFromRows(rows) {
+  const nodesById = /* @__PURE__ */ new Map();
+  const edgesById = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    for (const cell of row) {
+      if (isNodeCell(cell) && cell.node.id_ !== void 0) {
+        nodesById.set(cell.node.id_, cell.node);
+      } else if (isEdgeCell(cell) && cell.edge.id_ !== void 0) {
+        edgesById.set(cell.edge.id_, cell.edge);
+      }
+    }
+  }
+  return {
+    nodes: [...nodesById.values()],
+    edges: [...edgesById.values()],
+    isGraph: nodesById.size > 0 || edgesById.size > 0
+  };
+}
+
+// src/query/QueryEditor.tsx
+import { useRef, useCallback, useEffect, useState } from "react";
+import {
+  Alert,
+  Button,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+  SimpleTooltip
+} from "@petrarca/sonnet-ui";
+import { copyTextToClipboard } from "@petrarca/sonnet-core";
+import { Play, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LINE_HEIGHT = 24;
+function CopyErrorButton({
+  error,
+  query
+}) {
+  return /* @__PURE__ */ jsx(SimpleTooltip, { label: "Copy error and query", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      onClick: () => copyTextToClipboard(`Error: ${error}
+
+Query:
+${query}`),
+      className: "ml-2",
+      children: /* @__PURE__ */ jsx(Copy, { size: 16 })
+    }
+  ) });
+}
+function QueryEditor({
+  value,
+  onExecute,
+  onChange,
+  isLoading = false,
+  error = null,
+  placeholder = "Example: MATCH (p)-[e]->(t) RETURN p,e,t LIMIT 10",
+  minRows = 1,
+  maxRows = 12,
+  className,
+  renderActions
+}) {
+  const textareaRef = useRef(null);
+  const [localValue, setLocalValue] = useState(value);
+  const handleResize = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    const minH = minRows * LINE_HEIGHT;
+    const maxH = maxRows * LINE_HEIGHT;
+    const newHeight = Math.min(Math.max(textarea.scrollHeight, minH), maxH);
+    textarea.style.height = `${newHeight}px`;
+    textarea.style.overflowY = textarea.scrollHeight > maxH ? "auto" : "hidden";
+  }, [minRows, maxRows]);
+  useEffect(() => {
+    setLocalValue(value);
+    if (textareaRef.current && textareaRef.current.value !== value) {
+      textareaRef.current.value = value;
+    }
+    setTimeout(handleResize, 0);
+  }, [value, handleResize]);
+  const handleExecute = useCallback(() => {
+    const current = textareaRef.current?.value || "";
+    if (!current.trim()) return;
+    onExecute(current);
+  }, [onExecute]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        handleExecute();
+      }
+    },
+    [handleExecute]
+  );
+  const textareaRefCallback = (element) => {
+    textareaRef.current = element;
+    if (element) setTimeout(handleResize, 0);
+  };
+  const handleChange = useCallback(
+    (e) => {
+      setLocalValue(e.target.value);
+      onChange?.(e.target.value);
+      setTimeout(handleResize, 0);
+    },
+    [onChange, handleResize]
+  );
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs(InputGroup, { className: "!ring-0 !ring-offset-0 focus:!ring-0 has-[[data-slot=input-group-control]:focus-visible]:!ring-0", children: [
+      /* @__PURE__ */ jsx(
+        InputGroupTextarea,
+        {
+          ref: textareaRefCallback,
+          value: localValue,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          className: "resize-none font-mono",
+          style: { minHeight: `${minRows * LINE_HEIGHT}px` },
+          rows: minRows
+        }
+      ),
+      /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", className: "gap-0", children: renderActions ? renderActions({ onExecute: handleExecute, isLoading }) : /* @__PURE__ */ jsx(
+        InputGroupButton,
+        {
+          onClick: handleExecute,
+          disabled: isLoading,
+          title: "Execute query (Ctrl+Enter)",
+          children: /* @__PURE__ */ jsx(Play, { size: 16 })
+        }
+      ) })
+    ] }),
+    error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", className: "p-2 py-1 mt-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-start", children: [
+      /* @__PURE__ */ jsx("pre", { className: "text-sm m-0 flex-1 whitespace-pre-wrap break-words md:text-sm", children: error }),
+      /* @__PURE__ */ jsx(CopyErrorButton, { error, query: localValue })
+    ] }) })
+  ] });
+}
+
+// src/query/history.ts
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
+var DEFAULT_LIMIT = 50;
+function createQueryHistoryStore(persistKey, limit = DEFAULT_LIMIT) {
+  return create()(
+    persist(
+      (set, get) => ({
+        queries: [],
+        add: (query) => {
+          const trimmed = query.trim();
+          if (!trimmed) return;
+          set({
+            queries: [
+              trimmed,
+              ...get().queries.filter((q) => q !== trimmed)
+            ].slice(0, limit)
+          });
+        },
+        clear: () => set({ queries: [] })
+      }),
+      { name: persistKey, version: 1 }
+    )
+  );
+}
+
+// src/query/QueryHistory.tsx
+import { History as HistoryIcon } from "lucide-react";
+import {
+  Button as Button2,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@petrarca/sonnet-ui";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function QueryHistory({
+  store,
+  onSelect
+}) {
+  const queries = store((s) => s.queries);
+  const clear = store((s) => s.clear);
+  return /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+      Button2,
+      {
+        variant: "ghost",
+        size: "icon",
+        title: "Query history",
+        disabled: queries.length === 0,
+        children: /* @__PURE__ */ jsx2(HistoryIcon, { size: 16 })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(DropdownMenuContent, { align: "end", className: "max-w-[560px]", children: [
+      queries.map((q) => /* @__PURE__ */ jsx2(DropdownMenuItem, { onClick: () => onSelect(q), children: /* @__PURE__ */ jsx2("span", { className: "truncate font-mono text-xs", children: q }) }, q)),
+      queries.length > 0 && /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx2(DropdownMenuItem, { onClick: clear, disabled: queries.length === 0, children: "Clear history" })
+    ] })
+  ] });
+}
+
+// src/stores/Selection.ts
+import { create as create2 } from "zustand";
 import { devLog } from "@petrarca/sonnet-core";
+var MAX_NODE_SELECTION = 2;
+function evictToMax(selected, id, max = MAX_NODE_SELECTION) {
+  return [...selected.filter((existing) => existing !== id), id].slice(-max);
+}
 function createSelectionStore() {
-  return create()((set, get) => ({
+  return create2()((set, get) => ({
     selectedNodeIds: [],
     setSelectedNodeIds: (ids) => {
       const prev = get().selectedNodeIds;
@@ -213,10 +427,10 @@ function createSelectionStore() {
 var useSelection = createSelectionStore();
 
 // src/stores/GraphData.ts
-import { create as create2 } from "zustand";
+import { create as create3 } from "zustand";
 import { devLog as devLog2 } from "@petrarca/sonnet-core";
 function createGraphDataStore() {
-  return create2()((set, get) => ({
+  return create3()((set, get) => ({
     nodes: [],
     edges: [],
     stats: void 0,
@@ -324,7 +538,7 @@ function createGraphDataStore() {
 var useGraphData = createGraphDataStore();
 
 // src/stores/GraphFilter.ts
-import { create as create3 } from "zustand";
+import { create as create4 } from "zustand";
 function calculateNodeLabelUpdate(affectedLabels, currentNodeFilters, allNodesDisabled) {
   if (affectedLabels.length === 0) return null;
   if (allNodesDisabled) {
@@ -362,7 +576,7 @@ function handleToggleFilter(label, current, exists, getNodeLabelUpdate, set) {
   set({ edgeLabelFilters: next, ...nodeUpdate });
 }
 function createGraphFilterStore() {
-  return create3()((set, get) => ({
+  return create4()((set, get) => ({
     nodeLabelFilters: [],
     allLabelsDisabled: false,
     edgeLabelFilters: [],
@@ -438,7 +652,7 @@ function createGraphFilterStore() {
 var useGraphFilter = createGraphFilterStore();
 
 // src/stores/GraphExploration.ts
-import { create as create4 } from "zustand";
+import { create as create5 } from "zustand";
 import { devLog as devLog3, errorLog } from "@petrarca/sonnet-core";
 import { toast } from "sonner";
 function collectReachable(startId, direction, allEdges, includeStart) {
@@ -565,7 +779,7 @@ function mergeExpandedLabelsIntoFilters(stores, enrichedNodes, nodeId2) {
 }
 function createGraphExplorationStore(deps) {
   const stores = deps;
-  return create4()((set, get) => ({
+  return create5()((set, get) => ({
     focusedNodeIds: /* @__PURE__ */ new Set(),
     isFocusMode: false,
     hiddenElementIds: /* @__PURE__ */ new Set(),
@@ -974,7 +1188,7 @@ function createGraphExplorationStore(deps) {
 }
 
 // src/stores/GraphFocus.ts
-import { create as create5 } from "zustand";
+import { create as create6 } from "zustand";
 import { devLog as devLog4 } from "@petrarca/sonnet-core";
 function buildStore() {
   return (set, get) => ({
@@ -1008,13 +1222,13 @@ function buildStore() {
   });
 }
 function createGraphFocusStore() {
-  return create5()(buildStore());
+  return create6()(buildStore());
 }
 var useGraphFocus = createGraphFocusStore();
 var GraphFocus_default = useGraphFocus;
 
 // src/stores/ActionPanelStore.ts
-import { create as create6 } from "zustand";
+import { create as create7 } from "zustand";
 import { devLog as devLog5 } from "@petrarca/sonnet-core";
 function buildStore2() {
   return (set, get) => ({
@@ -1035,7 +1249,7 @@ function buildStore2() {
   });
 }
 function createActionPanelStore() {
-  return create6()(buildStore2());
+  return create7()(buildStore2());
 }
 var useActionPanelStore = createActionPanelStore();
 
@@ -1046,7 +1260,7 @@ function useGraphStores() {
   const ctx = useContext(GraphStoresContext);
   if (!ctx) {
     throw new Error(
-      "useGraphStores must be used within a GraphStoresProvider. Wrap your graph UI with <GraphStoresContext.Provider value={...}>."
+      "useGraphStores must be used within a GraphStoresContext.Provider. Wrap your graph UI with <GraphStoresContext.Provider value={...}>."
     );
   }
   return ctx;
@@ -1063,31 +1277,35 @@ function useWorkspaceGraphExploration() {
 function useWorkspaceSelection() {
   return useGraphStores().selection;
 }
+function useWorkspaceGraphFocus() {
+  return useGraphStores().graphFocus;
+}
 
 // src/hooks/useStableRef.ts
-import { useCallback, useRef } from "react";
+import { useCallback as useCallback2, useRef as useRef2 } from "react";
 function useStableRef(fn) {
-  const ref = useRef(fn);
+  const ref = useRef2(fn);
   ref.current = fn;
-  return useCallback(
+  return useCallback2(
     ((...args) => ref.current?.(...args)),
     []
   );
 }
 
 // src/hooks/useLiveGraphData.ts
-import { useMemo, useEffect } from "react";
+import { useMemo, useEffect as useEffect2 } from "react";
 import { devLog as devLog6 } from "@petrarca/sonnet-core";
 function useLiveGraphData() {
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const useGraphData2 = useWorkspaceGraphData();
   const useGraphExploration = useWorkspaceGraphExploration();
+  const useGraphFocus2 = useWorkspaceGraphFocus();
   const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
   const filterLabels = useGraphFilter2((s) => s.nodeLabelFilters);
   const allLabelsDisabled = useGraphFilter2((s) => s.allLabelsDisabled);
   const edgeFilterLabels = useGraphFilter2((s) => s.edgeLabelFilters);
   const allEdgeLabelsDisabled = useGraphFilter2((s) => s.allEdgeLabelsDisabled);
-  const overrideElementIds = GraphFocus_default((s) => s.overrideElementIds);
+  const overrideElementIds = useGraphFocus2((s) => s.overrideElementIds);
   const isFocusMode = useGraphExploration((s) => s.isFocusMode);
   const focusedNodeIds = useGraphExploration((s) => s.focusedNodeIds);
   const hiddenElementIds = useGraphExploration((s) => s.hiddenElementIds);
@@ -1103,9 +1321,9 @@ function useLiveGraphData() {
     focusedCount: focusedNodeIds.size,
     hiddenCount: hiddenElementIds.size
   });
-  useEffect(() => {
-    GraphFocus_default.getState().clearOverrides();
-  }, [lastDataChangeTime]);
+  useEffect2(() => {
+    useGraphFocus2.getState().clearOverrides();
+  }, [lastDataChangeTime, useGraphFocus2]);
   const allLabelCounts = useMemo(() => {
     if (isValueSet) return {};
     const counts = {};
@@ -1301,10 +1519,11 @@ function useLiveGraphData() {
       edges: availableEdges.length
     };
   }, [stats, availableNodes.length, availableEdges.length]);
-  useEffect(() => {
-    const { clearOverrides } = GraphFocus_default.getState();
+  useEffect2(() => {
+    const { clearOverrides } = useGraphFocus2.getState();
     clearOverrides();
   }, [
+    useGraphFocus2,
     filterLabels,
     allLabelsDisabled,
     edgeFilterLabels,
@@ -1439,30 +1658,30 @@ function useGraphRenderer() {
 }
 
 // src/hooks/graphRendererProvider.tsx
-import { useState, useCallback as useCallback2 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useState as useState2, useCallback as useCallback3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function GraphRendererProvider({
   children,
   defaultRenderer = "cytoscape",
   onRendererChange
 }) {
-  const [renderer, setRendererState] = useState(defaultRenderer);
-  const setRenderer = useCallback2(
+  const [renderer, setRendererState] = useState2(defaultRenderer);
+  const setRenderer = useCallback3(
     (newRenderer) => {
       setRendererState(newRenderer);
       onRendererChange?.(newRenderer);
     },
     [onRendererChange]
   );
-  return /* @__PURE__ */ jsx(GraphRendererContext.Provider, { value: { renderer, setRenderer }, children });
+  return /* @__PURE__ */ jsx3(GraphRendererContext.Provider, { value: { renderer, setRenderer }, children });
 }
 
 // src/components/rea/ReaGraph.tsx
 import {
-  useEffect as useEffect3,
-  useRef as useRef3,
-  useState as useState5,
-  useCallback as useCallback4
+  useEffect as useEffect4,
+  useRef as useRef4,
+  useState as useState6,
+  useCallback as useCallback5
 } from "react";
 import { devLog as devLog8 } from "@petrarca/sonnet-core";
 import {
@@ -1507,43 +1726,43 @@ import { cn } from "@petrarca/sonnet-core";
 
 // src/components/rea/LayoutAndCameraControls.tsx
 import {
-  Button as Button2,
-  DropdownMenu as DropdownMenu2,
-  DropdownMenuContent as DropdownMenuContent2,
-  DropdownMenuItem as DropdownMenuItem2,
+  Button as Button4,
+  DropdownMenu as DropdownMenu3,
+  DropdownMenuContent as DropdownMenuContent3,
+  DropdownMenuItem as DropdownMenuItem3,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger as DropdownMenuTrigger2,
-  SimpleTooltip as SimpleTooltip2
+  DropdownMenuSeparator as DropdownMenuSeparator2,
+  DropdownMenuTrigger as DropdownMenuTrigger3,
+  SimpleTooltip as SimpleTooltip3
 } from "@petrarca/sonnet-ui";
 import { LayoutPanelTop, Maximize, Shrink, ArrowUp, Eye } from "lucide-react";
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 
 // src/components/shared/RendererDropdown.tsx
 import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  SimpleTooltip
+  Button as Button3,
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuItem as DropdownMenuItem2,
+  DropdownMenuTrigger as DropdownMenuTrigger2,
+  SimpleTooltip as SimpleTooltip2
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function RendererDropdown() {
   const { renderer, setRenderer } = useGraphRenderer();
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx2(SimpleTooltip, { label: "Renderer", side: "left", children: /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "icon", children: renderer === "reagraph" ? "RG" : "CY" }) }) }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "left", align: "start", children: [
-      /* @__PURE__ */ jsx2(
-        DropdownMenuItem,
+  return /* @__PURE__ */ jsxs3(DropdownMenu2, { children: [
+    /* @__PURE__ */ jsx4(SimpleTooltip2, { label: "Renderer", side: "left", children: /* @__PURE__ */ jsx4(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(Button3, { variant: "ghost", size: "icon", children: renderer === "reagraph" ? "RG" : "CY" }) }) }),
+    /* @__PURE__ */ jsxs3(DropdownMenuContent2, { side: "left", align: "start", children: [
+      /* @__PURE__ */ jsx4(
+        DropdownMenuItem2,
         {
           onClick: () => setRenderer("reagraph"),
           className: renderer === "reagraph" ? "text-blue-600" : "",
           children: "Reagraph"
         }
       ),
-      /* @__PURE__ */ jsx2(
-        DropdownMenuItem,
+      /* @__PURE__ */ jsx4(
+        DropdownMenuItem2,
         {
           onClick: () => setRenderer("cytoscape"),
           className: renderer === "cytoscape" ? "text-blue-600" : "",
@@ -1555,46 +1774,46 @@ function RendererDropdown() {
 }
 
 // src/components/rea/LayoutAndCameraControls.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function PathSelectionDropdown({
   setPathSelectionType
 }) {
-  return /* @__PURE__ */ jsxs2(DropdownMenu2, { children: [
-    /* @__PURE__ */ jsx3(SimpleTooltip2, { label: "Path Selection Type", side: "left", children: /* @__PURE__ */ jsx3(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx3(ArrowUp, {}) }) }) }),
-    /* @__PURE__ */ jsxs2(DropdownMenuContent2, { side: "left", align: "start", children: [
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => setPathSelectionType("direct"), children: "None" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => setPathSelectionType("all"), children: "All Paths" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => setPathSelectionType("in"), children: "Inbound" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => setPathSelectionType("out"), children: "Outbound" })
+  return /* @__PURE__ */ jsxs4(DropdownMenu3, { children: [
+    /* @__PURE__ */ jsx5(SimpleTooltip3, { label: "Path Selection Type", side: "left", children: /* @__PURE__ */ jsx5(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx5(Button4, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx5(ArrowUp, {}) }) }) }),
+    /* @__PURE__ */ jsxs4(DropdownMenuContent3, { side: "left", align: "start", children: [
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => setPathSelectionType("direct"), children: "None" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => setPathSelectionType("all"), children: "All Paths" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => setPathSelectionType("in"), children: "Inbound" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => setPathSelectionType("out"), children: "Outbound" })
     ] })
   ] });
 }
 function LayoutDropdown({ updateLayout }) {
-  const [showTooltip, setShowTooltip] = useState2(true);
+  const [showTooltip, setShowTooltip] = useState3(true);
   const handleSelect = (layout) => {
     updateLayout(layout);
     setShowTooltip(false);
     setTimeout(() => setShowTooltip(true), 500);
   };
-  const trigger = /* @__PURE__ */ jsx3(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx3(LayoutPanelTop, {}) }) });
-  return /* @__PURE__ */ jsxs2(DropdownMenu2, { children: [
-    showTooltip ? /* @__PURE__ */ jsx3(SimpleTooltip2, { label: "Layout", side: "left", children: trigger }) : trigger,
-    /* @__PURE__ */ jsxs2(DropdownMenuContent2, { side: "left", align: "start", children: [
-      /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: "Force-directed Layouts" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("forceDirected2d"), children: "Force Directed" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("forceatlas2"), children: "Force Atlas 2" }),
-      /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: "Tree Layouts" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("treeTd2d"), children: "Tree Top-Down" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("treeLr2d"), children: "Tree Left-Right" }),
-      /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: "Circular & Radial Layouts" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("circular2d"), children: "Circular" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("radialOut2d"), children: "Radial Out" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("concentric2d"), children: "Concentric" }),
-      /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: "Utility Layouts" }),
-      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("nooverlap"), children: "No Overlap" })
+  const trigger = /* @__PURE__ */ jsx5(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx5(Button4, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx5(LayoutPanelTop, {}) }) });
+  return /* @__PURE__ */ jsxs4(DropdownMenu3, { children: [
+    showTooltip ? /* @__PURE__ */ jsx5(SimpleTooltip3, { label: "Layout", side: "left", children: trigger }) : trigger,
+    /* @__PURE__ */ jsxs4(DropdownMenuContent3, { side: "left", align: "start", children: [
+      /* @__PURE__ */ jsx5(DropdownMenuLabel, { children: "Force-directed Layouts" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => handleSelect("forceDirected2d"), children: "Force Directed" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => handleSelect("forceatlas2"), children: "Force Atlas 2" }),
+      /* @__PURE__ */ jsx5(DropdownMenuSeparator2, {}),
+      /* @__PURE__ */ jsx5(DropdownMenuLabel, { children: "Tree Layouts" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => handleSelect("treeTd2d"), children: "Tree Top-Down" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => handleSelect("treeLr2d"), children: "Tree Left-Right" }),
+      /* @__PURE__ */ jsx5(DropdownMenuSeparator2, {}),
+      /* @__PURE__ */ jsx5(DropdownMenuLabel, { children: "Circular & Radial Layouts" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => handleSelect("circular2d"), children: "Circular" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => handleSelect("radialOut2d"), children: "Radial Out" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => handleSelect("concentric2d"), children: "Concentric" }),
+      /* @__PURE__ */ jsx5(DropdownMenuSeparator2, {}),
+      /* @__PURE__ */ jsx5(DropdownMenuLabel, { children: "Utility Layouts" }),
+      /* @__PURE__ */ jsx5(DropdownMenuItem3, { onClick: () => handleSelect("nooverlap"), children: "No Overlap" })
     ] })
   ] });
 }
@@ -1606,15 +1825,15 @@ function ViewControls({
   isFocusMode,
   onResetView
 }) {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx3(SimpleTooltip2, { label: "Fullscreen", side: "left", children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", onClick: toggleFullscreen, children: !fullscreen ? /* @__PURE__ */ jsx3(Maximize, {}) : /* @__PURE__ */ jsx3(Shrink, {}) }) }),
-    /* @__PURE__ */ jsx3(SimpleTooltip2, { label: "Fit to screen", side: "left", children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", onClick: fitToScreen, children: /* @__PURE__ */ jsx3(Shrink, {}) }) }),
-    (hasHiddenElements || isFocusMode) && onResetView && /* @__PURE__ */ jsx3(
-      SimpleTooltip2,
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx5(SimpleTooltip3, { label: "Fullscreen", side: "left", children: /* @__PURE__ */ jsx5(Button4, { variant: "ghost", size: "icon", onClick: toggleFullscreen, children: !fullscreen ? /* @__PURE__ */ jsx5(Maximize, {}) : /* @__PURE__ */ jsx5(Shrink, {}) }) }),
+    /* @__PURE__ */ jsx5(SimpleTooltip3, { label: "Fit to screen", side: "left", children: /* @__PURE__ */ jsx5(Button4, { variant: "ghost", size: "icon", onClick: fitToScreen, children: /* @__PURE__ */ jsx5(Shrink, {}) }) }),
+    (hasHiddenElements || isFocusMode) && onResetView && /* @__PURE__ */ jsx5(
+      SimpleTooltip3,
       {
         label: isFocusMode ? "Reset Focus" : "Show All Hidden",
         side: "left",
-        children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", onClick: onResetView, children: /* @__PURE__ */ jsx3(Eye, {}) })
+        children: /* @__PURE__ */ jsx5(Button4, { variant: "ghost", size: "icon", onClick: onResetView, children: /* @__PURE__ */ jsx5(Eye, {}) })
       }
     )
   ] });
@@ -1630,9 +1849,9 @@ function LayoutAndCameraControls({
   onResetView,
   extraToolbarContent
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "absolute right-2 top-2 flex flex-col border", children: [
-    /* @__PURE__ */ jsx3(RendererDropdown, {}),
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("div", { className: "absolute right-2 top-2 flex flex-col border", children: [
+    /* @__PURE__ */ jsx5(RendererDropdown, {}),
+    /* @__PURE__ */ jsx5(
       ViewControls,
       {
         fullscreen,
@@ -1643,9 +1862,9 @@ function LayoutAndCameraControls({
         onResetView
       }
     ),
-    /* @__PURE__ */ jsx3(PathSelectionDropdown, { setPathSelectionType }),
+    /* @__PURE__ */ jsx5(PathSelectionDropdown, { setPathSelectionType }),
     extraToolbarContent,
-    /* @__PURE__ */ jsx3(LayoutDropdown, { updateLayout })
+    /* @__PURE__ */ jsx5(LayoutDropdown, { updateLayout })
   ] });
 }
 var LayoutAndCameraControls_default = LayoutAndCameraControls;
@@ -1655,10 +1874,10 @@ import { Card as Card2 } from "@petrarca/sonnet-ui";
 
 // src/components/rea/NodeHoverInfo.tsx
 import { Card, Separator } from "@petrarca/sonnet-ui";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function NodeHoverInfo({ node }) {
-  return /* @__PURE__ */ jsx4(Card, { className: "absolute top-2 left-1/2 -translate-x-1/2 bg-white shadow-md p-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-row items-center gap-2", children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(Card, { className: "absolute top-2 left-1/2 -translate-x-1/2 bg-white shadow-md p-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-row items-center gap-2", children: [
+    /* @__PURE__ */ jsx6(
       Separator,
       {
         orientation: "vertical",
@@ -1667,43 +1886,43 @@ function NodeHoverInfo({ node }) {
         style: { backgroundColor: node.fill }
       }
     ),
-    /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsxs3("p", { children: [
-        /* @__PURE__ */ jsxs3("strong", { children: [
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsxs5("p", { children: [
+        /* @__PURE__ */ jsxs5("strong", { children: [
           node.data.label_,
           ": "
         ] }),
         node.label
       ] }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: node.data.id_ })
+      /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: node.data.id_ })
     ] })
   ] }) });
 }
 var NodeHoverInfo_default = NodeHoverInfo;
 
 // src/components/rea/ReaContextMenu.tsx
-import React3, { useState as useState4 } from "react";
+import React4, { useState as useState5 } from "react";
 import { devLog as devLog7 } from "@petrarca/sonnet-core";
 
 // src/components/rea/ExpandOptionsPanel.tsx
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { Checkbox, Input, Label } from "@petrarca/sonnet-ui";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } 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 expandBtnRef = useRef2(null);
-  const dragRef = useRef2(null);
-  const onPointerDown = useCallback3(
+  const [direction, setDirection] = useState4("both");
+  const [limit, setLimit] = useState4(100);
+  const [edgeTypes, setEdgeTypes] = useState4([]);
+  const [selectedTypes, setSelectedTypes] = useState4([]);
+  const [loading, setLoading] = useState4(!!getEdgeTypes);
+  const [offset, setOffset] = useState4({ x: 0, y: 0 });
+  const expandBtnRef = useRef3(null);
+  const dragRef = useRef3(null);
+  const onPointerDown = useCallback4(
     (e) => {
       if (e.target.closest("button")) return;
       e.preventDefault();
@@ -1717,16 +1936,16 @@ function ExpandOptionsPanel({
     },
     [offset]
   );
-  const onPointerMove = useCallback3((e) => {
+  const onPointerMove = useCallback4((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 = useCallback3(() => {
+  const onPointerUp = useCallback4(() => {
     dragRef.current = null;
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!getEdgeTypes) return;
     setLoading(true);
     getEdgeTypes().then((types) => {
@@ -1751,18 +1970,18 @@ function ExpandOptionsPanel({
   };
   const allSelected = selectedTypes.length === edgeTypes.length;
   const noneSelected = edgeTypes.length > 0 && selectedTypes.length === 0;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!loading && !noneSelected) {
       expandBtnRef.current?.focus();
     }
   }, [loading, noneSelected]);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "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(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             className: "flex items-center justify-between gap-2 cursor-grab active:cursor-grabbing select-none",
@@ -1770,7 +1989,7 @@ function ExpandOptionsPanel({
             onPointerMove,
             onPointerUp,
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   className: "text-[11px] text-muted-foreground hover:text-foreground cursor-pointer",
@@ -1778,13 +1997,13 @@ function ExpandOptionsPanel({
                   children: "Back"
                 }
               ),
-              /* @__PURE__ */ jsx5("span", { className: "text-[11px] font-medium text-foreground truncate max-w-32", children: nodeLabel })
+              /* @__PURE__ */ jsx7("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(
+        /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx7(Label, { className: "text-[11px] text-muted-foreground", children: "Direction" }),
+          /* @__PURE__ */ jsx7("div", { className: "flex gap-0.5", children: ["both", "out", "in"].map((dir) => /* @__PURE__ */ jsx7(
             "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"}`,
@@ -1794,10 +2013,10 @@ function ExpandOptionsPanel({
             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(
+        !loading && edgeTypes.length > 1 && /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx7(Label, { className: "text-[11px] text-muted-foreground", children: "Rel Types" }),
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "text-[10px] text-muted-foreground hover:text-foreground cursor-pointer",
@@ -1806,12 +2025,12 @@ function ExpandOptionsPanel({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx5("div", { className: "space-y-0.5 max-h-32 overflow-y-auto", children: edgeTypes.map((type) => /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsx7("div", { className: "space-y-0.5 max-h-32 overflow-y-auto", children: edgeTypes.map((type) => /* @__PURE__ */ jsxs6(
             "label",
             {
               className: "flex items-center gap-1.5 text-[11px] cursor-pointer",
               children: [
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   Checkbox,
                   {
                     checked: selectedTypes.includes(type),
@@ -1819,15 +2038,15 @@ function ExpandOptionsPanel({
                     className: "h-3 w-3"
                   }
                 ),
-                /* @__PURE__ */ jsx5("span", { className: "truncate", children: type })
+                /* @__PURE__ */ jsx7("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(
+        /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx7(Label, { className: "text-[11px] text-muted-foreground", children: "Limit" }),
+          /* @__PURE__ */ jsx7(
             Input,
             {
               type: "number",
@@ -1842,7 +2061,7 @@ function ExpandOptionsPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             ref: expandBtnRef,
@@ -1860,7 +2079,7 @@ function ExpandOptionsPanel({
 var ExpandOptionsPanel_default = ExpandOptionsPanel;
 
 // src/components/rea/ReaContextMenu.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function ReaContextMenu({
   data,
   onClose,
@@ -1869,8 +2088,8 @@ function ReaContextMenu({
   onCopyNode,
   getNodeEdgeTypes
 }) {
-  const [showExpandPanel, setShowExpandPanel] = useState4(false);
-  React3.useEffect(() => {
+  const [showExpandPanel, setShowExpandPanel] = useState5(false);
+  React4.useEffect(() => {
     const handleKey = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -1980,7 +2199,7 @@ function ReaContextMenu({
   const menuItems = elementType === "node" ? nodeMenuItems : edgeMenuItems;
   if (showExpandPanel && elementType === "node") {
     const nodeLabel = data.label || data.id;
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx8(
       ExpandOptionsPanel_default,
       {
         nodeLabel: String(nodeLabel),
@@ -1990,9 +2209,9 @@ function ReaContextMenu({
       }
     );
   }
-  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(
+  return /* @__PURE__ */ jsxs7("div", { className: "bg-background border border-border rounded-md shadow-lg py-1 min-w-48", children: [
+    menuItems.map((item, index) => /* @__PURE__ */ jsxs7(React4.Fragment, { children: [
+      /* @__PURE__ */ jsx8(
         "button",
         {
           className: "w-full text-left px-3 py-2 text-sm hover:bg-muted/50 cursor-pointer",
@@ -2000,10 +2219,10 @@ function ReaContextMenu({
           children: item.label
         }
       ),
-      index === 1 && /* @__PURE__ */ jsx6("div", { className: "border-t border-border my-1" })
+      index === 1 && /* @__PURE__ */ jsx8("div", { className: "border-t border-border my-1" })
     ] }, item.label)),
-    /* @__PURE__ */ jsx6("div", { className: "border-t border-border my-1" }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx8("div", { className: "border-t border-border my-1" }),
+    /* @__PURE__ */ jsx8(
       "button",
       {
         className: "w-full text-left px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted/50 cursor-pointer",
@@ -2017,7 +2236,7 @@ var ReaContextMenu_default = ReaContextMenu;
 
 // src/components/rea/ReaGraph.tsx
 import { toast as toast2 } from "sonner";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function findElementInGraphData(elementId, elementType, nodes, edges) {
   if (elementType === "node") {
     const node = nodes.find((n) => n.id === elementId);
@@ -2084,24 +2303,25 @@ function ReaGraph({
   extraToolbarContent,
   getNodeEdgeTypes
 }) {
-  const isMountedRef = useRef3(false);
+  const isMountedRef = useRef4(false);
   const { nodes, edges } = useReagraphData();
   const { normalized } = useLiveGraphData();
-  useEffect3(() => {
+  useEffect4(() => {
     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 = useRef3(null);
-  const [hoveredNode, setHoveredNode] = useState5(
+  const canvas = useRef4(null);
+  const [hoveredNode, setHoveredNode] = useState6(
     void 0
   );
-  const [layout, setLayout] = useState5("forceDirected2d");
-  const [fullscreen, setFullscreen] = useState5(false);
-  const [pathSelectionType, setPathSelectionType] = useState5("direct");
+  const [layout, setLayout] = useState6("forceDirected2d");
+  const [fullscreen, setFullscreen] = useState6(false);
+  const [pathSelectionType, setPathSelectionType] = useState6("direct");
   const useGraphSelection = useWorkspaceSelection();
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const useGraphExploration = useWorkspaceGraphExploration();
+  const useGraphFocus2 = useWorkspaceGraphFocus();
   const hiddenElementIds = useGraphExploration((s) => s.hiddenElementIds);
   const isFocusMode = useGraphExploration((s) => s.isFocusMode);
   const hasHiddenElements = hiddenElementIds.size > 0;
@@ -2124,8 +2344,8 @@ function ReaGraph({
     pathSelectionType,
     type: "multi"
   });
-  useEffect3(() => {
-    const unsubscribe = GraphFocus_default.subscribe((state) => {
+  useEffect4(() => {
+    const unsubscribe = useGraphFocus2.subscribe((state) => {
       const focusAction = state.focusAction;
       if (!focusAction || !canvas.current) return;
       devLog8("[ReGraph] Processing focus action", {
@@ -2143,17 +2363,17 @@ function ReaGraph({
         setSelectedEdge
       );
       if (handled) {
-        GraphFocus_default.setState({ focusAction: null });
+        useGraphFocus2.setState({ focusAction: null });
       }
     });
     return unsubscribe;
-  }, [nodes, edges, setSelectedNodeIds, setSelectedEdge]);
-  useEffect3(() => {
+  }, [nodes, edges, setSelectedNodeIds, setSelectedEdge, useGraphFocus2]);
+  useEffect4(() => {
     if (!canvas.current) return;
     clearSelections();
     clearSelectionStore();
   }, [lastDataChangeTime, clearSelections, clearSelectionStore]);
-  const fitToScreen = useCallback4(
+  const fitToScreen = useCallback5(
     (reason) => {
       if (!isMountedRef.current) return;
       if (nodes.length === 0) return;
@@ -2179,7 +2399,7 @@ function ReaGraph({
     },
     [nodes.length]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     isMountedRef.current = true;
     fitToScreen("mount");
     const state = useGraphSelection.getState();
@@ -2199,9 +2419,9 @@ function ReaGraph({
       isMountedRef.current = false;
     };
   }, [fitToScreen, setSelections, setSelectedEdge, useGraphSelection]);
-  const selectionsRef = useRef3(selections);
+  const selectionsRef = useRef4(selections);
   selectionsRef.current = selections;
-  useEffect3(() => {
+  useEffect4(() => {
     const inSync = (nodeIds) => {
       const cur = selectionsRef.current;
       return cur.length === nodeIds.length && nodeIds.every((id) => cur.includes(id));
@@ -2213,7 +2433,7 @@ function ReaGraph({
     });
     return unsubscribe;
   }, [useGraphSelection, setSelections]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isMountedRef.current) fitToScreen("counts-changed");
   }, [nodes.length, edges.length, fitToScreen]);
   function updateLayout(next) {
@@ -2222,7 +2442,13 @@ function ReaGraph({
   }
   function handleNodeClick(node) {
     setSelectedEdge(null);
-    if (selections.length < 2 && onNodeClick) onNodeClick(node);
+    if (!onNodeClick) return;
+    const alreadySelected = selections.includes(node.id);
+    if (alreadySelected || selections.length < MAX_NODE_SELECTION) {
+      onNodeClick(node);
+      return;
+    }
+    setSelections(evictToMax(selections, node.id));
   }
   function handleEdgeClick(edge) {
     const startNode = normalized.nodesById[edge.data.start_id_ + ""];
@@ -2255,14 +2481,12 @@ function ReaGraph({
     setSelectedEdge(null);
     if (onCanvasClick) onCanvasClick(e);
   }
-  useEffect3(() => {
+  useEffect4(() => {
     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));
-    }
+    const selectedNodes = selections.map((id) => nodes.find((n) => n.id === id)).filter(Boolean);
+    setSelectedNodeIds(selectedNodes.map((n) => n.id));
   }, [selections, nodes]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isMountedRef.current) return;
     const currentSelectedIds = useGraphSelection.getState().selectedNodeIds;
     if (!currentSelectedIds.length) return;
@@ -2281,7 +2505,7 @@ function ReaGraph({
     setSelectedEdge,
     useGraphSelection
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isMountedRef.current) return;
     const currentSelectedIds = useGraphSelection.getState().selectedNodeIds;
     if (!currentSelectedIds.length) return;
@@ -2293,7 +2517,7 @@ function ReaGraph({
       if (stillPresentIds.length < 2) setSelectedEdge(null);
     }
   }, [nodes, setSelectedNodeIds, setSelectedEdge, useGraphSelection]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!fullscreen) return;
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2307,7 +2531,7 @@ function ReaGraph({
       window.removeEventListener("keydown", handleKey);
     };
   }, [fullscreen, fitToScreen]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!fullscreen) return;
     const id = setTimeout(() => {
       if (canvas.current) {
@@ -2316,7 +2540,7 @@ function ReaGraph({
     }, 50);
     return () => clearTimeout(id);
   }, [fullscreen, fitToScreen]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isMountedRef.current) return;
     const handleResize = () => {
       if (isMountedRef.current && canvas.current) {
@@ -2328,8 +2552,8 @@ function ReaGraph({
       window.removeEventListener("resize", handleResize);
     };
   }, [fitToScreen]);
-  const firstDataRef = useRef3(true);
-  useEffect3(() => {
+  const firstDataRef = useRef4(true);
+  useEffect4(() => {
     if (!isMountedRef.current) return;
     if (nodes.length > 0) {
       if (firstDataRef.current) {
@@ -2342,18 +2566,18 @@ function ReaGraph({
   }, [nodes.length, fitToScreen]);
   if (nodes.length === 0) {
     devLog8("[ReGraph] empty state render");
-    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: [
+    return /* @__PURE__ */ jsxs8(Card2, { className: "relative w-full h-full items-center justify-center text-slate-500 gap-2 shadow-xs p-4", children: [
+      /* @__PURE__ */ jsx9("div", { children: "No data to display." }),
+      /* @__PURE__ */ jsxs8("div", { children: [
         "Please",
         " ",
-        /* @__PURE__ */ jsx7("span", { className: "font-semibold", children: "run a query, check filters, or add a node" }),
+        /* @__PURE__ */ jsx9("span", { className: "font-semibold", children: "run a query, check filters, or add a node" }),
         " ",
         "to the workbench to populate the graph."
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: cn(
@@ -2361,7 +2585,7 @@ function ReaGraph({
         fullscreen ? "fixed inset-0 z-50 w-screen h-screen p-0 m-0" : "relative w-full h-full"
       ),
       children: [
-        /* @__PURE__ */ jsx7(Card2, { className: "h-full shadow-xs p-4", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(Card2, { className: "h-full shadow-xs p-4", children: /* @__PURE__ */ jsx9(
           GraphCanvas,
           {
             ref: canvas,
@@ -2386,7 +2610,7 @@ function ReaGraph({
                 elementId: data.id,
                 elementType
               });
-              return /* @__PURE__ */ jsx7(
+              return /* @__PURE__ */ jsx9(
                 ReaContextMenu_default,
                 {
                   data,
@@ -2400,8 +2624,8 @@ function ReaGraph({
             }
           }
         ) }),
-        hoveredNode && /* @__PURE__ */ jsx7(NodeHoverInfo_default, { node: hoveredNode }),
-        /* @__PURE__ */ jsx7(
+        hoveredNode && /* @__PURE__ */ jsx9(NodeHoverInfo_default, { node: hoveredNode }),
+        /* @__PURE__ */ jsx9(
           LayoutAndCameraControls_default,
           {
             fitToScreen,
@@ -2428,10 +2652,10 @@ var ReaGraph_default = ReaGraph;
 
 // src/components/cyto/CytoscapeGraph.tsx
 import {
-  useEffect as useEffect4,
-  useRef as useRef4,
-  useState as useState6,
-  useCallback as useCallback5
+  useEffect as useEffect5,
+  useRef as useRef5,
+  useState as useState7,
+  useCallback as useCallback6
 } from "react";
 import { devLog as devLog10, errorLog as errorLog3 } from "@petrarca/sonnet-core";
 import cytoscape from "cytoscape";
@@ -2445,17 +2669,17 @@ import cxtmenu from "cytoscape-cxtmenu";
 
 // src/components/cyto/CytoscapeControls.tsx
 import {
-  Button as Button3,
-  DropdownMenu as DropdownMenu3,
-  DropdownMenuContent as DropdownMenuContent3,
-  DropdownMenuItem as DropdownMenuItem3,
+  Button as Button5,
+  DropdownMenu as DropdownMenu4,
+  DropdownMenuContent as DropdownMenuContent4,
+  DropdownMenuItem as DropdownMenuItem4,
   DropdownMenuLabel as DropdownMenuLabel2,
-  DropdownMenuSeparator as DropdownMenuSeparator2,
-  DropdownMenuTrigger as DropdownMenuTrigger3,
-  SimpleTooltip as SimpleTooltip3
+  DropdownMenuSeparator as DropdownMenuSeparator3,
+  DropdownMenuTrigger as DropdownMenuTrigger4,
+  SimpleTooltip as SimpleTooltip4
 } from "@petrarca/sonnet-ui";
 import { LayoutPanelTop as LayoutPanelTop2, Monitor, Frame, Eye as Eye2, Minus } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function ViewControls2({
   zoomIn,
   zoomOut,
@@ -2466,17 +2690,17 @@ function ViewControls2({
   isFocusMode,
   onResetView
 }) {
-  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,
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(SimpleTooltip4, { label: "Zoom In", side: "left", children: /* @__PURE__ */ jsx10(Button5, { variant: "ghost", size: "icon", onClick: zoomIn, children: /* @__PURE__ */ jsx10("span", { style: { fontWeight: 600 }, children: "+" }) }) }),
+    /* @__PURE__ */ jsx10(SimpleTooltip4, { label: "Zoom Out", side: "left", children: /* @__PURE__ */ jsx10(Button5, { variant: "ghost", size: "icon", onClick: zoomOut, children: /* @__PURE__ */ jsx10(Minus, {}) }) }),
+    /* @__PURE__ */ jsx10(SimpleTooltip4, { label: "Fullscreen", side: "left", children: /* @__PURE__ */ jsx10(Button5, { variant: "ghost", size: "icon", onClick: toggleFullscreen, children: !fullscreen ? /* @__PURE__ */ jsx10(Monitor, {}) : /* @__PURE__ */ jsx10(Frame, {}) }) }),
+    /* @__PURE__ */ jsx10(SimpleTooltip4, { label: "Fit to screen", side: "left", children: /* @__PURE__ */ jsx10(Button5, { variant: "ghost", size: "icon", onClick: fitToScreen, children: /* @__PURE__ */ jsx10(Frame, {}) }) }),
+    (hasHiddenElements || isFocusMode) && onResetView && /* @__PURE__ */ jsx10(
+      SimpleTooltip4,
       {
         label: isFocusMode ? "Reset Focus" : "Show All Hidden",
         side: "left",
-        children: /* @__PURE__ */ jsx8(Button3, { variant: "ghost", size: "icon", onClick: onResetView, children: /* @__PURE__ */ jsx8(Eye2, {}) })
+        children: /* @__PURE__ */ jsx10(Button5, { variant: "ghost", size: "icon", onClick: onResetView, children: /* @__PURE__ */ jsx10(Eye2, {}) })
       }
     )
   ] });
@@ -2511,13 +2735,13 @@ var LAYOUT_GROUPS = [
   }
 ];
 function LayoutDropdown2({ currentLayout, updateLayout }) {
-  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,
+  return /* @__PURE__ */ jsxs9(DropdownMenu4, { children: [
+    /* @__PURE__ */ jsx10(SimpleTooltip4, { label: "Layout", side: "left", children: /* @__PURE__ */ jsx10(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsx10(Button5, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx10(LayoutPanelTop2, {}) }) }) }),
+    /* @__PURE__ */ jsx10(DropdownMenuContent4, { side: "left", align: "start", children: LAYOUT_GROUPS.map((group, groupIdx) => /* @__PURE__ */ jsxs9("div", { children: [
+      groupIdx > 0 && /* @__PURE__ */ jsx10(DropdownMenuSeparator3, {}),
+      /* @__PURE__ */ jsx10(DropdownMenuLabel2, { children: group.label }),
+      group.items.map((item) => /* @__PURE__ */ jsx10(
+        DropdownMenuItem4,
         {
           onClick: () => updateLayout(item.layout),
           className: currentLayout === item.layout ? "text-blue-600" : "",
@@ -2541,9 +2765,9 @@ function CytoscapeControls({
   onResetView,
   extraToolbarContent
 }) {
-  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(
+  return /* @__PURE__ */ jsxs9("div", { className: "absolute right-2 top-2 flex flex-col border bg-white rounded-md shadow-sm z-10", children: [
+    /* @__PURE__ */ jsx10(RendererDropdown, {}),
+    /* @__PURE__ */ jsx10(
       ViewControls2,
       {
         zoomIn,
@@ -2557,7 +2781,7 @@ function CytoscapeControls({
       }
     ),
     extraToolbarContent,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       LayoutDropdown2,
       {
         currentLayout,
@@ -2997,7 +3221,7 @@ var createEdgeContextMenu = ({
 
 // src/components/cyto/CytoscapeGraph.tsx
 import { toast as toast4 } from "sonner";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function CytoscapeExpandOverlay({
   expandRequest,
   containerRef,
@@ -3005,7 +3229,7 @@ function CytoscapeExpandOverlay({
   getNodeEdgeTypes,
   onClose
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       className: "absolute z-50",
@@ -3020,7 +3244,7 @@ function CytoscapeExpandOverlay({
         ),
         transform: "translate(-50%, 12px)"
       },
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx11(
         ExpandOptionsPanel_default,
         {
           nodeLabel: expandRequest.nodeLabel,
@@ -3133,6 +3357,7 @@ function applyLayout({
   }
 }
 function processPendingFocus({
+  focusStore,
   cy,
   pendingFocus,
   edgesRef,
@@ -3157,7 +3382,7 @@ function processPendingFocus({
         }
       );
       pendingFocusActionRef.current = null;
-      GraphFocus_default.setState({ focusAction: null });
+      focusStore.setState({ focusAction: null });
       return;
     }
     cy.animate(
@@ -3177,7 +3402,7 @@ function processPendingFocus({
       });
     }
     pendingFocusActionRef.current = null;
-    GraphFocus_default.setState({ focusAction: null });
+    focusStore.setState({ focusAction: null });
   }, 100);
 }
 function selectFocusedElement({
@@ -3220,6 +3445,7 @@ function selectFocusedElement({
   }
 }
 function handleFocusStateChange({
+  focusStore,
   focusAction,
   cyRef,
   edgesRef,
@@ -3240,6 +3466,7 @@ function handleFocusStateChange({
   const element = cy.$id(elementId);
   if (element.length > 0) {
     handleImmediateFocus({
+      focusStore,
       cy,
       element,
       focusAction,
@@ -3256,7 +3483,7 @@ function handleFocusStateChange({
     elementType: focusAction.elementType
   });
   pendingFocusActionRef.current = focusAction;
-  GraphFocus_default.setState((state) => {
+  focusStore.setState((state) => {
     const overrides = new Set(state.overrideElementIds);
     overrides.add(elementId);
     if (focusAction.elementType === "edge") {
@@ -3280,6 +3507,7 @@ function handleFocusStateChange({
   });
 }
 function handleImmediateFocus({
+  focusStore,
   cy,
   element,
   focusAction,
@@ -3310,7 +3538,7 @@ function handleImmediateFocus({
       selectedEdgeRef
     });
   }
-  GraphFocus_default.setState({ focusAction: null });
+  focusStore.setState({ focusAction: null });
 }
 function computeGraphViewState({
   hasNodes,
@@ -3328,8 +3556,8 @@ function computeGraphViewState({
   };
 }
 function useFullscreen(fitToScreen, cyRef) {
-  const [fullscreen, setFullscreen] = useState6(false);
-  useEffect4(() => {
+  const [fullscreen, setFullscreen] = useState7(false);
+  useEffect5(() => {
     if (fullscreen) {
       const prevOverflow = document.body.style.overflow;
       document.body.style.overflow = "hidden";
@@ -3344,7 +3572,7 @@ function useFullscreen(fitToScreen, cyRef) {
       };
     }
   }, [fullscreen, fitToScreen]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!fullscreen) return;
     const id = setTimeout(() => {
       if (cyRef.current) {
@@ -3357,7 +3585,7 @@ function useFullscreen(fitToScreen, cyRef) {
   return {
     fullscreen,
     setFullscreen,
-    toggleFullscreen: useCallback5(() => setFullscreen((f) => !f), [])
+    toggleFullscreen: useCallback6(() => setFullscreen((f) => !f), [])
   };
 }
 function setupCytoscapeEventHandlers({
@@ -3400,16 +3628,14 @@ function setupCytoscapeEventHandlers({
       updateSelectedEdge(null);
     }
     let selectedIds = evtCy.$("node:selected").map((e) => e.id());
-    if (selectedIds.length > 2) {
-      const currentOrder = [...selectedNodeIdsRef.current];
-      const updatedOrder = [...currentOrder.filter((cid) => cid !== id), id];
-      const keep = updatedOrder.slice(-2);
+    if (selectedIds.length > MAX_NODE_SELECTION) {
+      const keep = evictToMax(selectedNodeIdsRef.current, id);
       evtCy.batch(() => {
         evtCy.$("node:selected").unselect();
         keep.forEach((kid) => evtCy.$id(kid).select());
       });
       selectedIds = keep;
-      devLog10("[CytoscapeGraph] enforced max 2 after select", { keep });
+      devLog10("[CytoscapeGraph] enforced max selection after select", { keep });
     }
     updateSelectedNodeIds(selectedIds);
   });
@@ -3473,16 +3699,16 @@ function CytoscapeGraph({
   extraToolbarContent,
   getNodeEdgeTypes
 }) {
-  const containerRef = useRef4(null);
-  const cyRef = useRef4(null);
-  const isInitializedRef = useRef4(false);
-  const [currentLayout, setCurrentLayout] = useState6(initialLayout);
-  const [expandRequest, setExpandRequest] = useState6(
+  const containerRef = useRef5(null);
+  const cyRef = useRef5(null);
+  const isInitializedRef = useRef5(false);
+  const [currentLayout, setCurrentLayout] = useState7(initialLayout);
+  const [expandRequest, setExpandRequest] = useState7(
     null
   );
-  const nodesRef = useRef4([]);
-  const edgesRef = useRef4([]);
-  const pendingFocusActionRef = useRef4(null);
+  const nodesRef = useRef5([]);
+  const edgesRef = useRef5([]);
+  const pendingFocusActionRef = useRef5(null);
   const cytoData = useCytoscapeData();
   const live = useLiveGraphData();
   const nodes = live.nodes;
@@ -3491,6 +3717,7 @@ function CytoscapeGraph({
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const useGraphExploration = useWorkspaceGraphExploration();
   const useSelection3 = useWorkspaceSelection();
+  const useGraphFocus2 = useWorkspaceGraphFocus();
   const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
   const resetView = useGraphExploration((s) => s.resetView);
   const hasHiddenElements = useGraphExploration(
@@ -3502,13 +3729,13 @@ function CytoscapeGraph({
     setSelectedEdge: setSelectedEdgeStore,
     clear: clearSelectionStore
   } = useSelection3.getState();
-  const selectedNodeIdsRef = useRef4(
+  const selectedNodeIdsRef = useRef5(
     useSelection3.getState().selectedNodeIds
   );
-  const selectedEdgeRef = useRef4(
+  const selectedEdgeRef = useRef5(
     useSelection3.getState().selectedEdge
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const applyStoreSelection = (nodeIds, edge) => {
       selectedNodeIdsRef.current = nodeIds;
       selectedEdgeRef.current = edge;
@@ -3548,13 +3775,13 @@ function CytoscapeGraph({
     });
     return unsubscribe;
   }, [useSelection3]);
-  useEffect4(() => {
+  useEffect5(() => {
     nodesRef.current = nodes;
   }, [nodes]);
-  useEffect4(() => {
+  useEffect5(() => {
     edgesRef.current = edges;
   }, [edges]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!containerRef.current || cyRef.current) return;
     isInitializedRef.current = true;
     cyRef.current = cytoscape({
@@ -3717,10 +3944,10 @@ function CytoscapeGraph({
       cyRef.current = null;
     };
   }, []);
-  const elementIdsRef = useRef4("");
-  const lastLayoutRef = useRef4("");
-  const lastFitPaddingRef = useRef4(fitPadding);
-  useEffect4(() => {
+  const elementIdsRef = useRef5("");
+  const lastLayoutRef = useRef5("");
+  const lastFitPaddingRef = useRef5(fitPadding);
+  useEffect5(() => {
     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(",");
@@ -3782,6 +4009,7 @@ function CytoscapeGraph({
     const pendingFocus = pendingFocusActionRef.current;
     if (pendingFocus) {
       processPendingFocus({
+        focusStore: useGraphFocus2,
         cy,
         pendingFocus,
         edgesRef,
@@ -3793,14 +4021,15 @@ function CytoscapeGraph({
       });
     }
   }, [nodes, edges, currentLayout, fitPadding]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!cyRef.current) return;
     cyRef.current.elements().unselect();
     clearSelectionStore();
   }, [lastDataChangeTime, clearSelectionStore]);
-  useEffect4(() => {
-    const unsubscribe = GraphFocus_default.subscribe((state) => {
+  useEffect5(() => {
+    const unsubscribe = useGraphFocus2.subscribe((state) => {
       handleFocusStateChange({
+        focusStore: useGraphFocus2,
         focusAction: state.focusAction,
         cyRef,
         edgesRef,
@@ -3813,19 +4042,24 @@ function CytoscapeGraph({
       });
     });
     return unsubscribe;
-  }, [baseNormalized, setSelectedEdgeStore, setSelectedNodeIdsStore]);
+  }, [
+    baseNormalized,
+    setSelectedEdgeStore,
+    setSelectedNodeIdsStore,
+    useGraphFocus2
+  ]);
   const updateLayout = (newLayout) => {
     setCurrentLayout(newLayout);
   };
-  const fitToScreen = useCallback5(() => {
+  const fitToScreen = useCallback6(() => {
     if (cyRef.current) {
       cyRef.current.fit(void 0, fitPadding);
     }
   }, [fitPadding]);
-  useEffect4(() => {
+  useEffect5(() => {
     fitToScreen();
   }, [nodes.length, fitToScreen]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isInitializedRef.current) return;
     const handleResize = () => cyRef.current?.resize();
     window.addEventListener("resize", handleResize);
@@ -3844,9 +4078,9 @@ function CytoscapeGraph({
     isFocusMode,
     fullscreen
   });
-  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(
+  return /* @__PURE__ */ jsx11("div", { className: outerClass, children: /* @__PURE__ */ jsxs10("div", { className: innerClass, children: [
+    /* @__PURE__ */ jsx11("div", { ref: containerRef, className: "absolute inset-0" }),
+    expandRequest && /* @__PURE__ */ jsx11(
       CytoscapeExpandOverlay,
       {
         expandRequest,
@@ -3856,9 +4090,9 @@ function CytoscapeGraph({
         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(
+    showEmptyMessage && /* @__PURE__ */ jsx11("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__ */ jsx11("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__ */ jsx11(
       CytoscapeControls_default,
       {
         updateLayout,
@@ -3906,15 +4140,15 @@ function CytoscapeGraph({
 var CytoscapeGraph_default = CytoscapeGraph;
 
 // src/components/GraphVisualizer.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function GraphVisualizer({
   onCopyNode,
   extraToolbarContent,
   getNodeEdgeTypes
 }) {
   const { renderer } = useGraphRenderer();
-  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(
+  return /* @__PURE__ */ jsx12("div", { className: "relative w-full h-full flex flex-col overflow-hidden", children: /* @__PURE__ */ jsxs11("div", { className: "flex-1 h-full", children: [
+    renderer === "reagraph" && /* @__PURE__ */ jsx12(
       ReaGraph_default,
       {
         onCopyNode,
@@ -3923,7 +4157,7 @@ function GraphVisualizer({
       },
       "reagraph"
     ),
-    renderer === "cytoscape" && /* @__PURE__ */ jsx10(
+    renderer === "cytoscape" && /* @__PURE__ */ jsx12(
       CytoscapeGraph_default,
       {
         onCopyNode,
@@ -3940,7 +4174,7 @@ var GraphVisualizer_default = GraphVisualizer;
 import { Card as Card5 } from "@petrarca/sonnet-ui";
 
 // src/components/ActionPanel/NodeInfoCard.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import {
   Card as Card3,
   Collapsible,
@@ -3948,11 +4182,11 @@ import {
   CollapsibleTrigger,
   PropertyList
 } from "@petrarca/sonnet-ui";
-import { copyTextToClipboard } from "@petrarca/sonnet-core";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { copyTextToClipboard as copyTextToClipboard2 } from "@petrarca/sonnet-core";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function NodeInfoCard({ node }) {
-  const [showProperties, setShowProperties] = useState7(false);
-  return /* @__PURE__ */ jsxs10(
+  const [showProperties, setShowProperties] = useState8(false);
+  return /* @__PURE__ */ jsxs12(
     Card3,
     {
       className: "w-full rounded-lg overflow-hidden bg-muted/30 border shadow-none p-3",
@@ -3960,20 +4194,20 @@ function NodeInfoCard({ node }) {
         borderLeft: `4px solid ${node.visual.color}`
       },
       children: [
-        /* @__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(
+        /* @__PURE__ */ jsx13("p", { className: "text-sm leading-tight font-medium mb-0", children: node.label_ }),
+        /* @__PURE__ */ jsx13("p", { className: "text-sm leading-tight mb-1", children: node.visual.displayName }),
+        /* @__PURE__ */ jsx13(
           "p",
           {
             className: "text-xs text-muted-foreground cursor-pointer select-all mb-2",
-            onClick: () => copyTextToClipboard(String(node.id_)),
+            onClick: () => copyTextToClipboard2(String(node.id_)),
             title: "Click to copy id",
             children: node.id_
           }
         ),
-        /* @__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 }) }) })
+        /* @__PURE__ */ jsxs12(Collapsible, { open: showProperties, onOpenChange: setShowProperties, children: [
+          /* @__PURE__ */ jsx13(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx13("button", { className: "text-xs cursor-pointer", children: showProperties ? "Hide" : "Show more" }) }),
+          /* @__PURE__ */ jsx13(CollapsibleContent, { children: /* @__PURE__ */ jsx13("div", { className: "mt-2", children: /* @__PURE__ */ jsx13(PropertyList, { properties: node.properties_ || {}, showHeader: true }) }) })
         ] })
       ]
     }
@@ -3982,7 +4216,7 @@ function NodeInfoCard({ node }) {
 var NodeInfoCard_default = NodeInfoCard;
 
 // src/components/ActionPanel/EdgeInfoCard.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import {
   Card as Card4,
   Collapsible as Collapsible2,
@@ -3991,11 +4225,11 @@ import {
   PropertyList as PropertyList2
 } from "@petrarca/sonnet-ui";
 import { ArrowDown } from "lucide-react";
-import { copyTextToClipboard as copyTextToClipboard2 } from "@petrarca/sonnet-core";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { copyTextToClipboard as copyTextToClipboard3 } from "@petrarca/sonnet-core";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function EdgeInfoCard({ edge }) {
-  const [showProperties, setShowProperties] = useState8(false);
-  return /* @__PURE__ */ jsxs11(
+  const [showProperties, setShowProperties] = useState9(false);
+  return /* @__PURE__ */ jsxs13(
     Card4,
     {
       className: "w-full rounded-lg overflow-hidden bg-muted/30 border shadow-none p-3",
@@ -4003,22 +4237,22 @@ function EdgeInfoCard({ edge }) {
         borderLeft: `4px solid ${edge.visual.color}`
       },
       children: [
-        /* @__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_ })
+        /* @__PURE__ */ jsxs13("p", { className: "text-sm leading-tight mb-1", children: [
+          /* @__PURE__ */ jsx14(ArrowDown, { className: "inline-block mr-1 opacity-70 align-middle h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx14("strong", { className: "font-medium align-middle", children: edge.label_ })
         ] }),
-        edge.id_ && /* @__PURE__ */ jsx12(
+        edge.id_ && /* @__PURE__ */ jsx14(
           "p",
           {
             className: "text-xs text-muted-foreground select-all cursor-pointer mt-1 mb-2",
             title: "Click to copy edge id",
-            onClick: () => copyTextToClipboard2(String(edge.id_)),
+            onClick: () => copyTextToClipboard3(String(edge.id_)),
             children: edge.id_
           }
         ),
-        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 }) }) })
+        edge.properties_ && Object.keys(edge.properties_).length > 0 && /* @__PURE__ */ jsxs13(Collapsible2, { open: showProperties, onOpenChange: setShowProperties, children: [
+          /* @__PURE__ */ jsx14(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx14("button", { className: "text-xs cursor-pointer", children: showProperties ? "Hide" : "Show more" }) }),
+          /* @__PURE__ */ jsx14(CollapsibleContent2, { children: /* @__PURE__ */ jsx14("div", { className: "mt-2", children: /* @__PURE__ */ jsx14(PropertyList2, { properties: edge.properties_ || {}, showHeader: true }) }) })
         ] })
       ]
     }
@@ -4030,7 +4264,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 jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function computeEdgeToNodeLabels(nodesById, edgesById) {
   const mapping = {};
   for (const edge of Object.values(edgesById)) {
@@ -4063,7 +4297,7 @@ function AllToggleBadge({
   badgeKey
 }) {
   const bgColor = allDisabled ? colorPalette["faded"] : colorPalette["neutral"];
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     Badge,
     {
       className: "cursor-pointer text-xs px-2.5 py-0.5",
@@ -4091,7 +4325,7 @@ function NodeLabelBadges({
 }) {
   return labels.map((label) => {
     const bgColor = shown.has(label) ? colorPalette[label] : colorPalette["faded"];
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs14(
       Badge,
       {
         className: "cursor-pointer text-xs px-2.5 py-0.5",
@@ -4129,7 +4363,7 @@ function EdgeLabelBadges({
       colorPalette,
       "neutral"
     );
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs14(
       Badge,
       {
         className: "cursor-pointer text-xs px-2.5 py-0.5",
@@ -4232,9 +4466,9 @@ function GraphOverview({
     nodeLabelFilters
   );
   const handleEdgeToggle = toggleAllEdgeLabelsDisabled;
-  return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    /* @__PURE__ */ jsx13("p", { className: "mt-2 heading-component", children: "Overview" }),
-    allLabels.length > 0 && /* @__PURE__ */ jsx13("div", { children: buckets.map((bucket) => {
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx15("p", { className: "mt-2 heading-component", children: "Overview" }),
+    allLabels.length > 0 && /* @__PURE__ */ jsx15("div", { children: buckets.map((bucket) => {
       if (bucket.labels.length === 0) return null;
       const bucketAllDisabled = isBucketAllOff(
         bucket.labels,
@@ -4246,10 +4480,10 @@ function GraphOverview({
         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(
+      return /* @__PURE__ */ jsxs14("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx15("p", { className: "heading-meta mb-2", children: bucket.title }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-start gap-2", children: [
+          /* @__PURE__ */ jsx15(
             AllToggleBadge,
             {
               allDisabled: bucketAllDisabled,
@@ -4259,7 +4493,7 @@ function GraphOverview({
               badgeKey: `all-${bucket.title}`
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             NodeLabelBadges,
             {
               labels: bucket.labels,
@@ -4277,10 +4511,10 @@ function GraphOverview({
         ] })
       ] }, bucket.title);
     }) }),
-    allEdgeLabels.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("p", { className: "heading-meta mb-2", children: edgeSectionTitle }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-start gap-2", children: [
-        /* @__PURE__ */ jsx13(
+    allEdgeLabels.length > 0 && /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx15("p", { className: "heading-meta mb-2", children: edgeSectionTitle }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-start gap-2", children: [
+        /* @__PURE__ */ jsx15(
           AllToggleBadge,
           {
             allDisabled: allEdgeLabelsDisabled,
@@ -4290,7 +4524,7 @@ function GraphOverview({
             badgeKey: "edge-all"
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx15(
           EdgeLabelBadges,
           {
             labels: allEdgeLabels,
@@ -4316,16 +4550,16 @@ function Overview({ nodeBuckets, edgeSectionTitle } = {}) {
     );
   }, [baseNormalized]);
   if (stats && stats.values != null && stats.values > 0) {
-    return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-      /* @__PURE__ */ jsx13("p", { className: "mt-2 heading-component", children: "Overview" }),
-      /* @__PURE__ */ jsxs12("p", { className: "text-sm text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+      /* @__PURE__ */ jsx15("p", { className: "mt-2 heading-component", children: "Overview" }),
+      /* @__PURE__ */ jsxs14("p", { className: "text-sm text-muted-foreground", children: [
         formatNumber(stats.values),
         " Values"
       ] })
     ] });
   }
   if (stats && stats.nodes > 0 && colorPalette) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx15(
       GraphOverview,
       {
         stats,
@@ -4344,7 +4578,7 @@ var Overview_default = Overview;
 
 // src/components/ActionPanel/ActionPanel.tsx
 import { useMemo as useMemo5 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function ActionPanel({ actions }) {
   const useSelection3 = useWorkspaceSelection();
   const selectedNodeIds = useSelection3(
@@ -4360,18 +4594,18 @@ function ActionPanel({ actions }) {
   const secondNode = selectedNodes?.[1];
   const hasEdge = !!selectedEdge;
   const showOverview = !firstNode && !hasEdge;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     Card5,
     {
       className: "h-full min-w-64 flex flex-col bg-card shadow-none p-4",
       style: { maxHeight: "100%", overflow: "hidden" },
       children: [
-        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, {})
+        actions && /* @__PURE__ */ jsx16("div", { className: "flex-shrink-0 mb-2", children: actions }),
+        /* @__PURE__ */ jsx16("div", { className: "flex-1 overflow-auto pr-1", children: /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-3", children: [
+          firstNode && /* @__PURE__ */ jsx16(NodeInfoCard_default, { node: firstNode }),
+          hasEdge && selectedEdge && /* @__PURE__ */ jsx16(EdgeInfoCard_default, { edge: selectedEdge }),
+          secondNode && /* @__PURE__ */ jsx16(NodeInfoCard_default, { node: secondNode }),
+          showOverview && /* @__PURE__ */ jsx16(Overview_default, {})
         ] }) })
       ]
     }
@@ -4380,12 +4614,11 @@ function ActionPanel({ actions }) {
 var ActionPanel_default = ActionPanel;
 
 // src/components/GraphA11yList/GraphA11yList.tsx
-import { useCallback as useCallback6, useMemo as useMemo6, useRef as useRef5 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo6, useRef as useRef6 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { cn as cn2 } from "@petrarca/sonnet-core";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } 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,
@@ -4419,14 +4652,14 @@ function GraphA11yList({
     }));
     return [...nodeRows, ...edgeRows];
   }, [live.nodes, live.edges]);
-  const parentRef = useRef5(null);
+  const parentRef = useRef6(null);
   const virtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => rowHeight,
     overscan: 8
   });
-  const activateNode = useCallback6(
+  const activateNode = useCallback7(
     (id, additive) => {
       setSelectedEdge(null);
       if (!additive) {
@@ -4437,11 +4670,11 @@ function GraphA11yList({
         setSelectedNodeIds(selectedNodeIds.filter((x) => x !== id));
         return;
       }
-      setSelectedNodeIds([...selectedNodeIds, id].slice(-MAX_NODE_SELECTION));
+      setSelectedNodeIds(evictToMax(selectedNodeIds, id));
     },
     [selectedNodeIds, setSelectedNodeIds, setSelectedEdge]
   );
-  const selectRow = useCallback6(
+  const selectRow = useCallback7(
     (row, e) => {
       if (row.kind === "node") {
         activateNode(row.id, e.metaKey || e.ctrlKey || e.shiftKey);
@@ -4453,19 +4686,19 @@ function GraphA11yList({
     [activateNode, setSelectedNodeIds, setSelectedEdge]
   );
   const isSelected = (row) => row.kind === "node" ? selectedNodeIds.includes(row.id) : selectedEdge?.id_ === row.edge.id_;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       role: "listbox",
       "aria-label": "Graph elements",
       "aria-multiselectable": true,
       className: cn2(visible ? "rounded-md border" : SR_ONLY, className),
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx17(
         "div",
         {
           ref: parentRef,
           style: { maxHeight: visible ? maxHeight : void 0, overflow: "auto" },
-          children: /* @__PURE__ */ jsx15(
+          children: /* @__PURE__ */ jsx17(
             "div",
             {
               style: {
@@ -4477,7 +4710,7 @@ function GraphA11yList({
                 const row = rows[vi.index];
                 if (!row) return null;
                 const selected = isSelected(row);
-                return /* @__PURE__ */ jsx15(
+                return /* @__PURE__ */ jsx17(
                   "button",
                   {
                     type: "button",
@@ -4495,7 +4728,7 @@ function GraphA11yList({
                       height: `${vi.size}px`,
                       transform: `translateY(${vi.start}px)`
                     },
-                    children: /* @__PURE__ */ jsx15("span", { className: "truncate", children: row.label })
+                    children: /* @__PURE__ */ jsx17("span", { className: "truncate", children: row.label })
                   },
                   vi.key
                 );
@@ -4633,16 +4866,16 @@ function reconcileFilter(current, model, baselineReset, showEdgeTypes) {
 }
 
 // src/graph-model/GraphModelEditor.tsx
-import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef6, useState as useState13 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef7, useState as useState14 } 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 { useMemo as useMemo8, useState as useState13 } from "react";
+import { Button as Button8, 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 { useState as useState12 } from "react";
 import { Badge as Badge2, IconButton } from "@petrarca/sonnet-ui";
 import { Plus, Pencil, Trash2 } from "lucide-react";
 
@@ -4962,7 +5195,7 @@ import {
   SheetDescription
 } from "@petrarca/sonnet-ui";
 import { JsonSchemaFormRenderer } from "@petrarca/sonnet-forms";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var TYPE_OPTIONS = [
   "string",
   "integer",
@@ -5052,18 +5285,18 @@ function PropertyFormSheet({
   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: [
+  return /* @__PURE__ */ jsx18(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs16(SheetContent, { children: [
+    /* @__PURE__ */ jsxs16(SheetHeader, { children: [
+      /* @__PURE__ */ jsxs16(SheetTitle, { children: [
         isEdit ? "Edit property" : "Add property",
         " ",
         "\u2014",
         " ",
         ownerLabel
       ] }),
-      /* @__PURE__ */ jsx16(SheetDescription, { children: "Define the property and how it is rendered." })
+      /* @__PURE__ */ jsx18(SheetDescription, { children: "Define the property and how it is rendered." })
     ] }),
-    /* @__PURE__ */ jsx16(SheetBody, { children: /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(SheetBody, { children: /* @__PURE__ */ jsx18(
       JsonSchemaFormRenderer,
       {
         schema,
@@ -5082,7 +5315,7 @@ function PropertyFormSheet({
 }
 
 // src/graph-model/RelationFormSheet.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import {
   Sheet as Sheet2,
   SheetContent as SheetContent2,
@@ -5090,11 +5323,11 @@ import {
   SheetBody as SheetBody2,
   SheetTitle as SheetTitle2,
   SheetDescription as SheetDescription2,
-  Button as Button4
+  Button as Button6
 } 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";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var CARDINALITIES = ["ONE_TO_MANY", "ONE_TO_ONE"];
 function RelationTypeField({
   relType,
@@ -5107,7 +5340,7 @@ function RelationTypeField({
   );
   const options = labels.map((l) => ({ value: l, label: l }));
   const canCreate = edgeTypeMode === "edit";
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     FormSelect,
     {
       label: "Relation type",
@@ -5129,14 +5362,14 @@ function DirectionField({
   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,
+  return /* @__PURE__ */ jsxs17("div", { children: [
+    /* @__PURE__ */ jsx19("label", { className: "mb-1 block text-xs font-medium", children: "Direction" }),
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx19("span", { className: "font-medium", children: source }),
+      /* @__PURE__ */ jsx19(ArrowRight, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx19("span", { className: "font-medium", children: target }),
+      canSwap && /* @__PURE__ */ jsx19(
+        Button6,
         {
           variant: "ghost",
           size: "sm",
@@ -5152,10 +5385,10 @@ 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,
+  return /* @__PURE__ */ jsxs17("div", { children: [
+    /* @__PURE__ */ jsx19("label", { className: "mb-1 block text-xs font-medium", children: "Cardinality" }),
+    /* @__PURE__ */ jsx19("div", { className: "flex gap-2", children: CARDINALITIES.map((c) => /* @__PURE__ */ jsx19(
+      Button6,
       {
         variant: c === cardinality ? "default" : "outline",
         size: "sm",
@@ -5176,9 +5409,9 @@ function RelationFormSheet({
   edgeTypeMode = "edit",
   onSave
 }) {
-  const [relType, setRelType] = useState9(initial?.relType ?? "");
-  const [swapped, setSwapped] = useState9(false);
-  const [cardinality, setCardinality] = useState9(
+  const [relType, setRelType] = useState10(initial?.relType ?? "");
+  const [swapped, setSwapped] = useState10(false);
+  const [cardinality, setCardinality] = useState10(
     initial?.cardinality ?? "ONE_TO_MANY"
   );
   const source = swapped ? nodeB : nodeA;
@@ -5194,13 +5427,13 @@ function RelationFormSheet({
     });
     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." })
+  return /* @__PURE__ */ jsx19(Sheet2, { open, onOpenChange, children: /* @__PURE__ */ jsxs17(SheetContent2, { children: [
+    /* @__PURE__ */ jsxs17(SheetHeader2, { children: [
+      /* @__PURE__ */ jsx19(SheetTitle2, { children: isEdit ? "Edit relation" : "Create relation" }),
+      /* @__PURE__ */ jsx19(SheetDescription2, { children: "A relation is stored on the source node type." })
     ] }),
-    /* @__PURE__ */ jsxs15(SheetBody2, { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsxs17(SheetBody2, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx19(
         RelationTypeField,
         {
           relType,
@@ -5209,7 +5442,7 @@ function RelationFormSheet({
           edgeTypeMode
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19(
         DirectionField,
         {
           source,
@@ -5218,23 +5451,23 @@ function RelationFormSheet({
           onSwap: () => setSwapped((s) => !s)
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19(
         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" })
+      /* @__PURE__ */ jsxs17("div", { className: "flex justify-end gap-2 pt-2", children: [
+        /* @__PURE__ */ jsx19(Button6, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx19(Button6, { disabled: !canSave, onClick: handleSave, children: isEdit ? "Save" : "Create relation" })
       ] })
     ] })
   ] }) });
 }
 
 // src/graph-model/NodeTypeNameSheet.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import {
   Sheet as Sheet3,
   SheetContent as SheetContent3,
@@ -5242,10 +5475,10 @@ import {
   SheetBody as SheetBody3,
   SheetTitle as SheetTitle3,
   SheetDescription as SheetDescription3,
-  Button as Button5,
+  Button as Button7,
   Input as Input2
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function NodeTypeNameSheet({
   open,
   onOpenChange,
@@ -5254,21 +5487,21 @@ function NodeTypeNameSheet({
   noun = "node",
   onSave
 }) {
-  const [name, setName] = useState10(initial ?? "");
+  const [name, setName] = useState11(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." })
+  return /* @__PURE__ */ jsx20(Sheet3, { open, onOpenChange, children: /* @__PURE__ */ jsxs18(SheetContent3, { children: [
+    /* @__PURE__ */ jsxs18(SheetHeader3, { children: [
+      /* @__PURE__ */ jsx20(SheetTitle3, { children: isEdit ? `Rename ${typeNoun}` : `Add ${typeNoun}` }),
+      /* @__PURE__ */ jsx20(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(
+    /* @__PURE__ */ jsxs18(SheetBody3, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs18("div", { children: [
+        /* @__PURE__ */ jsx20("label", { className: "mb-1 block text-xs font-medium", children: "Label" }),
+        /* @__PURE__ */ jsx20(
           Input2,
           {
             value: name,
@@ -5277,12 +5510,12 @@ function NodeTypeNameSheet({
             autoFocus: true
           }
         ),
-        duplicate && /* @__PURE__ */ jsx18("p", { className: "mt-1 text-xs text-destructive", children: "A type with this label already exists." })
+        duplicate && /* @__PURE__ */ jsx20("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,
+      /* @__PURE__ */ jsxs18("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx20(Button7, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx20(
+          Button7,
           {
             disabled: !canSave,
             onClick: () => {
@@ -5298,7 +5531,7 @@ function NodeTypeNameSheet({
 }
 
 // src/graph-model/TypeDetailPanel.tsx
-import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function relationViewOf(view) {
   return {
     relType: view.relType,
@@ -5311,9 +5544,9 @@ 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 })
+  return /* @__PURE__ */ jsxs19("div", { className: "mt-4 mb-2 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx21("span", { className: "heading-meta", children }),
+    action && /* @__PURE__ */ jsx21("span", { className: "ml-auto", children: action })
   ] });
 }
 function PropertyRows({
@@ -5324,37 +5557,37 @@ function PropertyRows({
   onDelete
 }) {
   if (properties.length === 0) {
-    return /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground", children: emptyText });
+    return /* @__PURE__ */ jsx21("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(
+  return /* @__PURE__ */ jsx21("div", { className: "rounded-lg border divide-y", children: properties.map((p) => /* @__PURE__ */ jsxs19(
     "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: [
+        /* @__PURE__ */ jsx21("span", { className: "text-sm font-medium min-w-24", children: p.name }),
+        /* @__PURE__ */ jsxs19("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(
+        p.required && /* @__PURE__ */ jsx21(Badge2, { badgeColor: "orange", children: "required" }),
+        editable && /* @__PURE__ */ jsxs19("span", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx21(
             IconButton,
             {
               label: "Edit property",
               revealOnHover: true,
               onClick: () => onEdit(p),
-              children: /* @__PURE__ */ jsx19(Pencil, {})
+              children: /* @__PURE__ */ jsx21(Pencil, {})
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx21(
             IconButton,
             {
               label: "Delete property",
               tone: "destructive",
               revealOnHover: true,
               onClick: () => onDelete(p),
-              children: /* @__PURE__ */ jsx19(Trash2, {})
+              children: /* @__PURE__ */ jsx21(Trash2, {})
             }
           )
         ] })
@@ -5408,9 +5641,9 @@ function TypeDetailPanel({
   capabilities,
   widgetOptions
 }) {
-  const [sheet, setSheet] = useState11({ open: false });
-  const [relSheet, setRelSheet] = useState11(null);
-  const [renameOpen, setRenameOpen] = useState11(false);
+  const [sheet, setSheet] = useState12({ open: false });
+  const [relSheet, setRelSheet] = useState12(null);
+  const [renameOpen, setRenameOpen] = useState12(false);
   const view = resolveView(model, selection);
   if (!view) return null;
   const editable = !readOnly && !!onChange;
@@ -5437,7 +5670,7 @@ function TypeDetailPanel({
     if (!onChange) return;
     onChange(updateRelation(model, source, prev.relType, prev.target, input));
   };
-  const propertiesSection = propsHidden ? null : /* @__PURE__ */ jsx19(
+  const propertiesSection = propsHidden ? null : /* @__PURE__ */ jsx21(
     PropertiesSection,
     {
       view,
@@ -5447,8 +5680,8 @@ function TypeDetailPanel({
       onDelete: removeProperty
     }
   );
-  return /* @__PURE__ */ jsxs17("div", { children: [
-    view.kind === "node" ? /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs19("div", { children: [
+    view.kind === "node" ? /* @__PURE__ */ jsx21(
       NodeDetail,
       {
         view,
@@ -5460,7 +5693,7 @@ function TypeDetailPanel({
         onDeleteRelation: removeRelation,
         children: propertiesSection
       }
-    ) : view.kind === "edge" ? /* @__PURE__ */ jsx19(
+    ) : view.kind === "edge" ? /* @__PURE__ */ jsx21(
       EdgeDetail,
       {
         view,
@@ -5469,7 +5702,7 @@ function TypeDetailPanel({
         onDelete: () => onChange?.(deleteEdgeType(model, view.label)),
         children: propertiesSection
       }
-    ) : /* @__PURE__ */ jsx19(
+    ) : /* @__PURE__ */ jsx21(
       RelationDetail,
       {
         view,
@@ -5479,7 +5712,7 @@ function TypeDetailPanel({
         children: propertiesSection
       }
     ),
-    editable && /* @__PURE__ */ jsx19(
+    editable && /* @__PURE__ */ jsx21(
       DetailSheets,
       {
         model,
@@ -5523,8 +5756,8 @@ function DetailSheets({
   onRename
 }) {
   const edgeTypeOptions = model.filter(isEdgeType).map(typeLabel);
-  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    /* @__PURE__ */ jsx21(
       PropertyFormSheet,
       {
         open: sheet.open,
@@ -5535,7 +5768,7 @@ function DetailSheets({
         onSave: onSaveProperty
       }
     ),
-    relSheet && (view.kind === "node" || view.kind === "relation") && /* @__PURE__ */ jsx19(
+    relSheet && (view.kind === "node" || view.kind === "relation") && /* @__PURE__ */ jsx21(
       RelationFormSheet,
       {
         open: !!relSheet,
@@ -5552,7 +5785,7 @@ function DetailSheets({
       },
       `${relSheet.relType}:${relSheet.target}`
     ),
-    (view.kind === "node" || view.kind === "edge") && renameOpen && /* @__PURE__ */ jsx19(
+    (view.kind === "node" || view.kind === "edge") && renameOpen && /* @__PURE__ */ jsx21(
       NodeTypeNameSheet,
       {
         open: renameOpen,
@@ -5573,15 +5806,15 @@ function PropertiesSection({
   onEdit,
   onDelete
 }) {
-  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    /* @__PURE__ */ jsx21(
       SectionTitle,
       {
-        action: editable ? /* @__PURE__ */ jsx19(IconButton, { label: "Add property", onClick: onAdd, children: /* @__PURE__ */ jsx19(Plus, {}) }) : void 0,
+        action: editable ? /* @__PURE__ */ jsx21(IconButton, { label: "Add property", onClick: onAdd, children: /* @__PURE__ */ jsx21(Plus, {}) }) : void 0,
         children: "Properties"
       }
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx21(
       PropertyRows,
       {
         properties: view.properties,
@@ -5603,11 +5836,11 @@ function NodeDetail({
   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(
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx21("span", { className: "text-base font-semibold", children: view.label }),
+      /* @__PURE__ */ jsx21(Badge2, { children: "NODE TYPE" }),
+      nodeTypeEditable && /* @__PURE__ */ jsx21(
         RenameDeleteActions,
         {
           noun: "node type",
@@ -5616,16 +5849,16 @@ function NodeDetail({
         }
       )
     ] }),
-    view.description && /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
+    view.description && /* @__PURE__ */ jsx21("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(
+    /* @__PURE__ */ jsx21(SectionTitle, { children: "Relations" }),
+    view.relations.length === 0 ? /* @__PURE__ */ jsx21("p", { className: "text-xs text-muted-foreground", children: "No relations." }) : /* @__PURE__ */ jsx21("div", { className: "rounded-lg border divide-y", children: view.relations.map((r) => /* @__PURE__ */ jsxs19(
       "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: [
+          /* @__PURE__ */ jsx21("span", { className: "text-sm font-medium min-w-24", children: r.relType }),
+          /* @__PURE__ */ jsxs19("span", { className: "flex-1 font-mono text-xs text-muted-foreground", children: [
             "\u2192",
             " ",
             r.target,
@@ -5634,24 +5867,24 @@ function NodeDetail({
             " ",
             cardinalityLabel(r.cardinality)
           ] }),
-          relationsEditable && /* @__PURE__ */ jsxs17("span", { className: "flex gap-1", children: [
-            /* @__PURE__ */ jsx19(
+          relationsEditable && /* @__PURE__ */ jsxs19("span", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx21(
               IconButton,
               {
                 label: "Edit relation",
                 revealOnHover: true,
                 onClick: () => onEditRelation(r),
-                children: /* @__PURE__ */ jsx19(Pencil, {})
+                children: /* @__PURE__ */ jsx21(Pencil, {})
               }
             ),
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx21(
               IconButton,
               {
                 label: "Delete relation",
                 tone: "destructive",
                 revealOnHover: true,
                 onClick: () => onDeleteRelation(r),
-                children: /* @__PURE__ */ jsx19(Trash2, {})
+                children: /* @__PURE__ */ jsx21(Trash2, {})
               }
             )
           ] })
@@ -5664,7 +5897,7 @@ function NodeDetail({
 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 });
+  return /* @__PURE__ */ jsx21("p", { className: "mt-3 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground", children });
 }
 function RenameDeleteActions({
   noun,
@@ -5672,15 +5905,15 @@ function RenameDeleteActions({
   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(
+  return /* @__PURE__ */ jsxs19("span", { className: "ml-auto flex gap-1", children: [
+    /* @__PURE__ */ jsx21(IconButton, { label: `${editVerb} ${noun}`, onClick: onRename, children: /* @__PURE__ */ jsx21(Pencil, {}) }),
+    /* @__PURE__ */ jsx21(
       IconButton,
       {
         label: `Delete ${noun}`,
         tone: "destructive",
         onClick: onDelete,
-        children: /* @__PURE__ */ jsx19(Trash2, {})
+        children: /* @__PURE__ */ jsx21(Trash2, {})
       }
     )
   ] });
@@ -5692,11 +5925,11 @@ function EdgeDetail({
   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(
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx21("span", { className: "text-base font-semibold", children: view.label }),
+      /* @__PURE__ */ jsx21(Badge2, { children: "EDGE TYPE" }),
+      editable && /* @__PURE__ */ jsx21(
         RenameDeleteActions,
         {
           noun: "edge type",
@@ -5705,11 +5938,11 @@ function EdgeDetail({
         }
       )
     ] }),
-    view.description && /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
-    /* @__PURE__ */ jsxs17(EdgeTypeNote, { children: [
+    view.description && /* @__PURE__ */ jsx21("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
+    /* @__PURE__ */ jsxs19(EdgeTypeNote, { children: [
       "These properties belong to the",
       " ",
-      /* @__PURE__ */ jsx19("span", { className: "font-medium", children: view.label }),
+      /* @__PURE__ */ jsx21("span", { className: "font-medium", children: view.label }),
       " edge type and are shared by every relation of this type."
     ] }),
     children
@@ -5722,11 +5955,11 @@ function RelationDetail({
   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(
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx21("span", { className: "text-base font-semibold", children: view.relType }),
+      /* @__PURE__ */ jsx21(Badge2, { children: "RELATION" }),
+      editable && /* @__PURE__ */ jsx21(
         RenameDeleteActions,
         {
           noun: "relation",
@@ -5736,17 +5969,17 @@ function RelationDetail({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs17("p", { className: "mt-1 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx19("span", { className: "font-medium text-foreground", children: view.source }),
+    /* @__PURE__ */ jsxs19("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx21("span", { className: "font-medium text-foreground", children: view.source }),
       " \u2192 ",
-      /* @__PURE__ */ jsx19("span", { className: "font-medium text-foreground", children: view.target }),
+      /* @__PURE__ */ jsx21("span", { className: "font-medium text-foreground", children: view.target }),
       " \xB7 ",
       cardinalityLabel(view.cardinality)
     ] }),
-    /* @__PURE__ */ jsxs17(EdgeTypeNote, { children: [
+    /* @__PURE__ */ jsxs19(EdgeTypeNote, { children: [
       "Properties are defined on the",
       " ",
-      /* @__PURE__ */ jsx19("span", { className: "font-medium", children: view.relType }),
+      /* @__PURE__ */ jsx21("span", { className: "font-medium", children: view.relType }),
       " edge type, shared by every relation of this type -- not on this single relation."
     ] }),
     children
@@ -5811,7 +6044,7 @@ function validateCapabilities(input) {
 }
 
 // src/graph-model/ModelActionPanel.tsx
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function nodeTypeLabels(model) {
   return model.filter(isNodeType).map(typeLabel);
 }
@@ -5825,19 +6058,19 @@ function CreateRelationPrompt({
   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 }),
+  const [open, setOpen] = useState13(false);
+  return /* @__PURE__ */ jsxs20("div", { children: [
+    /* @__PURE__ */ jsxs20("div", { className: "text-sm", children: [
+      /* @__PURE__ */ jsx22("span", { className: "font-medium", children: nodeA }),
       " and ",
-      /* @__PURE__ */ jsx20("span", { className: "font-medium", children: nodeB }),
+      /* @__PURE__ */ jsx22("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" }),
+    /* @__PURE__ */ jsxs20(Button8, { size: "sm", className: "mt-3 gap-1.5", onClick: () => setOpen(true), children: [
+      /* @__PURE__ */ jsx22(GitBranchPlus, { className: "h-4 w-4" }),
       "Create relation"
     ] }),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx22(
       RelationFormSheet,
       {
         open,
@@ -5893,7 +6126,7 @@ function ModelActionPanel({
     const schema = findType(model, l);
     return schema ? isNodeType(schema) : false;
   }) : [];
-  return /* @__PURE__ */ jsx20("div", { className: "h-full overflow-auto p-4", children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22("div", { className: "h-full overflow-auto p-4", children: /* @__PURE__ */ jsx22(
     PanelBody,
     {
       model,
@@ -5916,7 +6149,7 @@ function PanelBody({
   twoLabels
 }) {
   if (selection) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx22(
       TypeDetailPanel,
       {
         model,
@@ -5930,7 +6163,7 @@ function PanelBody({
   }
   const canEdit = !readOnly && !!onChange;
   if (twoLabels.length === 2 && canEdit && caps.relations === "edit") {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx22(
       CreateRelationPrompt,
       {
         nodeA: twoLabels[0],
@@ -5941,8 +6174,8 @@ function PanelBody({
       }
     );
   }
-  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
-    canEdit && /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+    canEdit && /* @__PURE__ */ jsx22(
       AddTypeToolbar,
       {
         model,
@@ -5951,7 +6184,7 @@ function PanelBody({
         canAddEdge: caps.edgeTypes === "edit"
       }
     ),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx22(
       Overview_default,
       {
         nodeBuckets: [
@@ -5970,9 +6203,9 @@ function AddTypeIconButton({
   existing,
   onSave
 }) {
-  const [open, setOpen] = useState12(false);
-  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
-    /* @__PURE__ */ jsx20(
+  const [open, setOpen] = useState13(false);
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+    /* @__PURE__ */ jsx22(
       IconButton2,
       {
         label: tooltip,
@@ -5981,7 +6214,7 @@ function AddTypeIconButton({
         children: icon
       }
     ),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx22(
       NodeTypeNameSheet,
       {
         open,
@@ -6001,22 +6234,22 @@ function AddTypeToolbar({
 }) {
   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(
+  return /* @__PURE__ */ jsxs20("div", { className: "mb-3 flex gap-1.5", children: [
+    canAddNode && /* @__PURE__ */ jsx22(
       AddTypeIconButton,
       {
         tooltip: "Add node type",
-        icon: /* @__PURE__ */ jsx20(CirclePlus, {}),
+        icon: /* @__PURE__ */ jsx22(CirclePlus, {}),
         noun: "node",
         existing,
         onSave: (name) => onChange(addNodeType(model, name))
       }
     ),
-    canAddEdge && /* @__PURE__ */ jsx20(
+    canAddEdge && /* @__PURE__ */ jsx22(
       AddTypeIconButton,
       {
         tooltip: "Add edge type",
-        icon: /* @__PURE__ */ jsx20(Waypoints, {}),
+        icon: /* @__PURE__ */ jsx22(Waypoints, {}),
         noun: "edge",
         existing,
         onSave: (name) => onChange(addEdgeType(model, name))
@@ -6026,7 +6259,7 @@ function AddTypeToolbar({
 }
 
 // src/graph-model/GraphModelEditor.tsx
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function createEditorStores() {
   const graphFilter = createGraphFilterStore();
   const graphData = createGraphDataStore();
@@ -6040,7 +6273,7 @@ function createEditorStores() {
     expandNode: async () => ({ nodes: [], edges: [], has_more: false }),
     getNodes: async () => []
   });
-  return { graphFilter, graphData, graphExploration, selection };
+  return { graphFilter, graphData, graphExploration, selection, graphFocus };
 }
 function loadModel(stores, model) {
   const { nodes: rawNodes, edges: rawEdges } = modelToGraph(model);
@@ -6063,14 +6296,14 @@ function GraphModelEditor({
   defaultRenderer = "cytoscape",
   hideActionPanel = false
 }) {
-  const storesRef = useRef6(null);
+  const storesRef = useRef7(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(() => {
+  const firstLoadRef = useRef7(true);
+  const prevShowEdgeTypesRef = useRef7(showEdgeTypes);
+  useEffect6(() => {
     loadModel(stores, value);
     const filter = stores.graphFilter.getState();
     const baselineReset = firstLoadRef.current || prevShowEdgeTypesRef.current !== showEdgeTypes;
@@ -6084,9 +6317,9 @@ function GraphModelEditor({
     firstLoadRef.current = false;
     prevShowEdgeTypesRef.current = showEdgeTypes;
   }, [stores, value, showEdgeTypes]);
-  const rowRef = useRef6(null);
-  const [panelWidth, setPanelWidth] = useState13(380);
-  const startResize = useCallback7((e) => {
+  const rowRef = useRef7(null);
+  const [panelWidth, setPanelWidth] = useState14(380);
+  const startResize = useCallback8((e) => {
     e.preventDefault();
     const target = e.currentTarget;
     target.setPointerCapture(e.pointerId);
@@ -6101,10 +6334,10 @@ function GraphModelEditor({
     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(
+  return /* @__PURE__ */ jsx23(GraphStoresContext.Provider, { value: stores, children: /* @__PURE__ */ jsx23(GraphRendererProvider, { defaultRenderer, children: /* @__PURE__ */ jsxs21("div", { ref: rowRef, className: "flex w-full h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx23("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx23(GraphVisualizer_default, {}) }),
+    !hideActionPanel && /* @__PURE__ */ jsxs21(Fragment6, { children: [
+      /* @__PURE__ */ jsx23(
         ResizeHandle,
         {
           orientation: "vertical",
@@ -6115,12 +6348,12 @@ function GraphModelEditor({
           onDoubleClick: () => setPanelWidth(380)
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx23(
         "div",
         {
           style: { width: panelWidth },
           className: "shrink-0 border-l overflow-hidden bg-card",
-          children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx23(
             ModelActionPanel,
             {
               model: value,
@@ -6284,17 +6517,17 @@ function enrichSchemaWithRelations(baseSchema, relations) {
 }
 
 // src/graph-edit/GraphEditToolbar.tsx
-import { useCallback as useCallback11, useMemo as useMemo11, useState as useState17 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo11, useState as useState18 } 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,
+  useCallback as useCallback9,
+  useEffect as useEffect7,
   useMemo as useMemo9,
-  useRef as useRef7,
-  useState as useState14
+  useRef as useRef8,
+  useState as useState15
 } from "react";
 import {
   Sheet as Sheet4,
@@ -6303,7 +6536,7 @@ import {
   SheetBody as SheetBody4,
   SheetTitle as SheetTitle4,
   SheetDescription as SheetDescription4,
-  Alert
+  Alert as Alert2
 } from "@petrarca/sonnet-ui";
 import {
   FormSelect as FormSelect2,
@@ -6311,7 +6544,7 @@ import {
   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";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_RESOLVED = {
   schema: null,
   uiSchema: {},
@@ -6335,10 +6568,10 @@ function resolveBaseSchema(provided, node) {
   return { type: "object", properties: {} };
 }
 function useNodeSchema(schemaProvider, label, node) {
-  const [resolved, setResolved] = useState14(EMPTY_RESOLVED);
-  const nodeRef = useRef7(node);
+  const [resolved, setResolved] = useState15(EMPTY_RESOLVED);
+  const nodeRef = useRef8(node);
   nodeRef.current = node;
-  useEffect6(() => {
+  useEffect7(() => {
     let cancelled = false;
     if (!label) {
       setResolved(EMPTY_RESOLVED);
@@ -6376,11 +6609,11 @@ function useNodeSchema(schemaProvider, label, node) {
   return resolved;
 }
 function useExistingFormData(port, node, relationTypes) {
-  const [data, setData] = useState14(null);
+  const [data, setData] = useState15(null);
   const nodeId2 = node?.id_;
-  const propertiesRef = useRef7(node?.properties_);
+  const propertiesRef = useRef8(node?.properties_);
   propertiesRef.current = node?.properties_;
-  useEffect6(() => {
+  useEffect7(() => {
     let cancelled = false;
     if (nodeId2 == null) {
       setData(null);
@@ -6422,12 +6655,12 @@ function LabelField({
   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__ */ jsxs22("div", { children: [
+      /* @__PURE__ */ jsx24("span", { className: "heading-meta block", children: "Label" }),
+      /* @__PURE__ */ jsx24("span", { className: "text-sm text-muted-foreground", children: selectedLabel })
     ] });
   }
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     FormSelect2,
     {
       label: "Label",
@@ -6439,8 +6672,8 @@ function LabelField({
   );
 }
 function useCreateModeLabels(schemaProvider, open, isEdit) {
-  const [labels, setLabels] = useState14([]);
-  useEffect6(() => {
+  const [labels, setLabels] = useState15([]);
+  useEffect7(() => {
     let cancelled = false;
     if (!open || isEdit) return;
     void schemaProvider.listNodeLabels().then((ls) => {
@@ -6462,7 +6695,7 @@ function NodeForm({
   onSave,
   onCancel
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     JsonSchemaFormRenderer2,
     {
       schema,
@@ -6496,13 +6729,13 @@ function NodeFormSheetBody({
   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." })
+  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
+    /* @__PURE__ */ jsxs22(SheetHeader4, { children: [
+      /* @__PURE__ */ jsx24(SheetTitle4, { children: isEdit ? "Edit node" : "Add node" }),
+      /* @__PURE__ */ jsx24(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(
+    /* @__PURE__ */ jsxs22(SheetBody4, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx24(
         LabelField,
         {
           isEdit,
@@ -6511,7 +6744,7 @@ function NodeFormSheetBody({
           onSelect: onSelectLabel
         }
       ),
-      schema && /* @__PURE__ */ jsx22(
+      schema && /* @__PURE__ */ jsx24(
         NodeForm,
         {
           formKey,
@@ -6524,7 +6757,7 @@ function NodeFormSheetBody({
           onCancel
         }
       ),
-      !isEdit && /* @__PURE__ */ jsx22(
+      !isEdit && /* @__PURE__ */ jsx24(
         FormCheckbox,
         {
           label: "Create another node",
@@ -6532,7 +6765,7 @@ function NodeFormSheetBody({
           onChange: (c) => onKeepOpenChange(c === true)
         }
       ),
-      error && /* @__PURE__ */ jsx22(Alert, { variant: "destructive", children: error })
+      error && /* @__PURE__ */ jsx24(Alert2, { variant: "destructive", children: error })
     ] })
   ] });
 }
@@ -6546,14 +6779,14 @@ function NodeFormSheet({
   onSaved
 }) {
   const isEdit = !!node?.id_;
-  const [selectedLabel, setSelectedLabel] = useState14(
+  const [selectedLabel, setSelectedLabel] = useState15(
     node?.label_ ?? null
   );
-  const [error, setError] = useState14("");
-  const [keepOpen, setKeepOpen] = useState14(false);
-  const [formNonce, setFormNonce] = useState14(0);
+  const [error, setError] = useState15("");
+  const [keepOpen, setKeepOpen] = useState15(false);
+  const [formNonce, setFormNonce] = useState15(0);
   const labels = useCreateModeLabels(schemaProvider, open, isEdit);
-  useEffect6(() => {
+  useEffect7(() => {
     if (open) {
       setSelectedLabel(node?.label_ ?? null);
       setError("");
@@ -6570,7 +6803,7 @@ function NodeFormSheet({
   const formData = useMemo9(() => existingData ?? {}, [existingData]);
   const stableOnSaved = useStableRef(onSaved);
   const stableOnOpenChange = useStableRef(onOpenChange);
-  const handleSave = useCallback8(
+  const handleSave = useCallback9(
     (data) => {
       if (!selectedLabel) return;
       void (async () => {
@@ -6603,7 +6836,7 @@ function NodeFormSheet({
       stableOnOpenChange
     ]
   );
-  return /* @__PURE__ */ jsx22(Sheet4, { open, onOpenChange, children: /* @__PURE__ */ jsx22(SheetContent4, { children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(Sheet4, { open, onOpenChange, children: /* @__PURE__ */ jsx24(SheetContent4, { children: /* @__PURE__ */ jsx24(
     NodeFormSheetBody,
     {
       isEdit,
@@ -6660,7 +6893,7 @@ async function saveNode({
 }
 
 // src/graph-edit/EdgeFormSheet.tsx
-import { useCallback as useCallback9, useEffect as useEffect7, useMemo as useMemo10, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect8, useMemo as useMemo10, useState as useState16 } from "react";
 import {
   Sheet as Sheet5,
   SheetContent as SheetContent5,
@@ -6674,20 +6907,20 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-  Button as Button7,
+  Button as Button9,
   IconButton as IconButton3,
-  Alert as Alert2
+  Alert as Alert3
 } 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";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function usePairState(port, schemaProvider, open, nodeAId, nodeALabel, nodeBId, nodeBLabel, reloadKey) {
-  const [active, setActive] = useState15([]);
-  const [available, setAvailable] = useState15([]);
-  useEffect7(() => {
+  const [active, setActive] = useState16([]);
+  const [available, setAvailable] = useState16([]);
+  useEffect8(() => {
     let cancelled = false;
     if (!open || nodeAId == null || nodeBId == null) {
       setActive([]);
@@ -6752,9 +6985,9 @@ var EMPTY_EDGE_SCHEMA = {
   properties: {}
 };
 function useEdgeSchema(schemaProvider, draft) {
-  const [schema, setSchema] = useState15(null);
+  const [schema, setSchema] = useState16(null);
   const label = useMemo10(() => draftLabel(draft), [draft]);
-  useEffect7(() => {
+  useEffect8(() => {
     let cancelled = false;
     if (!label) {
       setSchema(null);
@@ -6774,12 +7007,12 @@ function useEdgeSchema(schemaProvider, draft) {
   return schema;
 }
 function useEditableEdgeTypes(schemaProvider, active) {
-  const [editable, setEditable] = useState15({});
+  const [editable, setEditable] = useState16({});
   const labelsKey = useMemo10(
     () => Array.from(new Set(active.map((e) => e.label_))).sort().join("\0"),
     [active]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     let cancelled = false;
     const labels = labelsKey ? labelsKey.split("\0") : [];
     if (labels.length === 0) {
@@ -6808,7 +7041,7 @@ function useEditableEdgeTypes(schemaProvider, active) {
 function SectionTitle2({
   children
 }) {
-  return /* @__PURE__ */ jsx23("div", { className: "mb-2", children: /* @__PURE__ */ jsx23("span", { className: "heading-meta", children }) });
+  return /* @__PURE__ */ jsx25("div", { className: "mb-2", children: /* @__PURE__ */ jsx25("span", { className: "heading-meta", children }) });
 }
 function EdgeRow({
   label,
@@ -6816,19 +7049,19 @@ function EdgeRow({
   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(
+  return /* @__PURE__ */ jsxs23("div", { className: "group/row flex items-center gap-2 px-3 py-2", children: [
+    /* @__PURE__ */ jsx25("span", { className: "flex-1 text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs23("span", { className: "flex gap-1", children: [
+      onAdd && /* @__PURE__ */ jsx25(IconButton3, { label: "Create edge", revealOnHover: true, onClick: onAdd, children: /* @__PURE__ */ jsx25(Plus2, {}) }),
+      onEdit && /* @__PURE__ */ jsx25(IconButton3, { label: "Edit edge", revealOnHover: true, onClick: onEdit, children: /* @__PURE__ */ jsx25(Pencil2, {}) }),
+      onDelete && /* @__PURE__ */ jsx25(
         IconButton3,
         {
           label: "Delete edge",
           tone: "destructive",
           revealOnHover: true,
           onClick: onDelete,
-          children: /* @__PURE__ */ jsx23(Trash22, {})
+          children: /* @__PURE__ */ jsx25(Trash22, {})
         }
       )
     ] })
@@ -6856,17 +7089,17 @@ function PairLists({
     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: [
+  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-4", children: [
+    empty && /* @__PURE__ */ jsxs23("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(
+    active.length > 0 && /* @__PURE__ */ jsxs23("div", { children: [
+      /* @__PURE__ */ jsx25(SectionTitle2, { children: "Active edges" }),
+      /* @__PURE__ */ jsx25("div", { className: "rounded-lg border divide-y", children: active.map((edge) => /* @__PURE__ */ jsx25(
         EdgeRow,
         {
           label: edge.label_,
@@ -6876,9 +7109,9 @@ function PairLists({
         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(
+    available.length > 0 && /* @__PURE__ */ jsxs23("div", { children: [
+      /* @__PURE__ */ jsx25(SectionTitle2, { children: "Available edges" }),
+      /* @__PURE__ */ jsx25("div", { className: "rounded-lg border divide-y", children: available.map((entry) => /* @__PURE__ */ jsx25(
         EdgeRow,
         {
           label: rowLabel(entry),
@@ -6898,13 +7131,13 @@ function DraftForm({
 }) {
   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: [
+  return /* @__PURE__ */ jsxs23("div", { children: [
+    /* @__PURE__ */ jsxs23(SectionTitle2, { children: [
       draft.mode === "create" ? "Add" : "Edit",
       " ",
       label
     ] }),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx25(
       JsonSchemaFormRenderer3,
       {
         schema,
@@ -6932,10 +7165,10 @@ function EdgeFormSheet({
   widgets,
   onChanged
 }) {
-  const [reloadKey, setReloadKey] = useState15(0);
-  const [draft, setDraft] = useState15(null);
-  const [error, setError] = useState15("");
-  const [pendingDelete, setPendingDelete] = useState15(null);
+  const [reloadKey, setReloadKey] = useState16(0);
+  const [draft, setDraft] = useState16(null);
+  const [error, setError] = useState16("");
+  const [pendingDelete, setPendingDelete] = useState16(null);
   const { active, available } = usePairState(
     port,
     schemaProvider,
@@ -6950,18 +7183,18 @@ function EdgeFormSheet({
   const editableTypes = useEditableEdgeTypes(schemaProvider, active);
   const nodeAId = nodeA.id_;
   const nodeBId = nodeB.id_;
-  useEffect7(() => {
+  useEffect8(() => {
     if (open) {
       setDraft(null);
       setError("");
       setPendingDelete(null);
     }
   }, [open, nodeAId, nodeBId]);
-  const reload = useCallback9(() => {
+  const reload = useCallback10(() => {
     setReloadKey((k) => k + 1);
     onChanged?.();
   }, [onChanged]);
-  const handleSave = useCallback9(
+  const handleSave = useCallback10(
     (formData) => {
       if (!draft) return;
       const { properties } = extractRelationFields(formData);
@@ -6993,7 +7226,7 @@ function EdgeFormSheet({
     },
     [draft, port, reload]
   );
-  const confirmDelete = useCallback9(async () => {
+  const confirmDelete = useCallback10(async () => {
     const edge = pendingDelete;
     if (!edge || edge.id_ == null) return;
     try {
@@ -7006,19 +7239,19 @@ function EdgeFormSheet({
       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." })
+  return /* @__PURE__ */ jsxs23(Sheet5, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxs23(SheetContent5, { children: [
+      /* @__PURE__ */ jsxs23(SheetHeader5, { children: [
+        /* @__PURE__ */ jsx25(SheetTitle5, { children: "Edges" }),
+        /* @__PURE__ */ jsx25(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) })
+      /* @__PURE__ */ jsxs23(SheetBody5, { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx25("span", { className: "font-medium", children: extractDisplayLabel(nodeA) }),
+          /* @__PURE__ */ jsx25(ArrowRight2, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx25("span", { className: "font-medium", children: extractDisplayLabel(nodeB) })
         ] }),
-        !draft && /* @__PURE__ */ jsx23(
+        !draft && /* @__PURE__ */ jsx25(
           PairLists,
           {
             nodeALabel: nodeA.label_,
@@ -7032,7 +7265,7 @@ function EdgeFormSheet({
             onCreate: (entry) => setDraft({ mode: "create", entry })
           }
         ),
-        draft && schema && /* @__PURE__ */ jsx23(
+        draft && schema && /* @__PURE__ */ jsx25(
           DraftForm,
           {
             draft,
@@ -7042,10 +7275,10 @@ function EdgeFormSheet({
             onCancel: () => setDraft(null)
           }
         ),
-        error && /* @__PURE__ */ jsx23(Alert2, { variant: "destructive", children: error })
+        error && /* @__PURE__ */ jsx25(Alert3, { variant: "destructive", children: error })
       ] })
     ] }),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx25(
       DeleteEdgeConfirm,
       {
         edge: pendingDelete,
@@ -7060,24 +7293,24 @@ function DeleteEdgeConfirm({
   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: [
+  return /* @__PURE__ */ jsx25(Dialog, { open: !!edge, onOpenChange: (o) => !o && onCancel(), children: /* @__PURE__ */ jsxs23(DialogContent, { children: [
+    /* @__PURE__ */ jsxs23(DialogHeader, { children: [
+      /* @__PURE__ */ jsx25(DialogTitle, { children: "Delete edge" }),
+      /* @__PURE__ */ jsxs23(DialogDescription, { children: [
         "Delete the edge ",
-        /* @__PURE__ */ jsx23("strong", { children: edge?.label_ }),
+        /* @__PURE__ */ jsx25("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" })
+    /* @__PURE__ */ jsxs23(DialogFooter, { children: [
+      /* @__PURE__ */ jsx25(Button9, { variant: "outline", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx25(Button9, { variant: "destructive", onClick: onConfirm, children: "Delete" })
     ] })
   ] }) });
 }
 
 // src/graph-edit/DeleteNodeDialog.tsx
-import { useCallback as useCallback10, useEffect as useEffect8, useState as useState16 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect9, useState as useState17 } from "react";
 import {
   Dialog as Dialog2,
   DialogContent as DialogContent2,
@@ -7085,19 +7318,19 @@ import {
   DialogTitle as DialogTitle2,
   DialogDescription as DialogDescription2,
   DialogFooter as DialogFooter2,
-  Button as Button8,
-  Alert as Alert3
+  Button as Button10,
+  Alert as Alert4
 } from "@petrarca/sonnet-ui";
 import { errorLog as errorLog6 } from "@petrarca/sonnet-core";
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 var EMPTY_DEPENDENT = {
   inbound: [],
   outbound: [],
   names: {}
 };
 function useDependentEdges(port, open, node) {
-  const [dependent, setDependent] = useState16(EMPTY_DEPENDENT);
-  useEffect8(() => {
+  const [dependent, setDependent] = useState17(EMPTY_DEPENDENT);
+  useEffect9(() => {
     if (!open) return;
     if (node.id_ == null) {
       setDependent(EMPTY_DEPENDENT);
@@ -7147,12 +7380,12 @@ function EdgeList({
   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) => {
+  return /* @__PURE__ */ jsxs24("div", { className: "mb-2", children: [
+    /* @__PURE__ */ jsx26("span", { className: "heading-meta block", children: title }),
+    /* @__PURE__ */ jsx26("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_);
+      return /* @__PURE__ */ jsx26("li", { children: neighbour ? text : edge.label_ }, edge.id_);
     }) })
   ] });
 }
@@ -7164,9 +7397,9 @@ function DeleteNodeDialog({
   onDeleted
 }) {
   const { inbound, outbound, names } = useDependentEdges(port, open, node);
-  const [error, setError] = useState16("");
+  const [error, setError] = useState17("");
   const hasEdges = inbound.length > 0 || outbound.length > 0;
-  const handleDelete = useCallback10(() => {
+  const handleDelete = useCallback11(() => {
     if (node.id_ == null) return;
     void (async () => {
       try {
@@ -7179,17 +7412,17 @@ function DeleteNodeDialog({
       }
     })();
   }, [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: [
+  return /* @__PURE__ */ jsx26(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs24(DialogContent2, { children: [
+    /* @__PURE__ */ jsxs24(DialogHeader2, { children: [
+      /* @__PURE__ */ jsx26(DialogTitle2, { children: "Delete node" }),
+      /* @__PURE__ */ jsxs24(DialogDescription2, { children: [
         "Delete the node ",
-        /* @__PURE__ */ jsx24("strong", { children: extractDisplayLabel(node) }),
+        /* @__PURE__ */ jsx26("strong", { children: extractDisplayLabel(node) }),
         "?"
       ] })
     ] }),
-    !hasEdges && /* @__PURE__ */ jsx24("p", { className: "text-sm text-muted-foreground", children: "No connected edges." }),
-    /* @__PURE__ */ jsx24(
+    !hasEdges && /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "No connected edges." }),
+    /* @__PURE__ */ jsx26(
       EdgeList,
       {
         title: "Inbound edges",
@@ -7198,7 +7431,7 @@ function DeleteNodeDialog({
         direction: "inbound"
       }
     ),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx26(
       EdgeList,
       {
         title: "Outbound edges",
@@ -7207,16 +7440,16 @@ function DeleteNodeDialog({
         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" })
+    error && /* @__PURE__ */ jsx26(Alert4, { variant: "destructive", children: error }),
+    /* @__PURE__ */ jsxs24(DialogFooter2, { children: [
+      /* @__PURE__ */ jsx26(Button10, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx26(Button10, { 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";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 function toPerms(caps) {
   const canCreateNode = caps.createNode === "edit";
   const canUpdateNode = caps.updateNode === "edit";
@@ -7235,38 +7468,38 @@ function ToolbarButtons({
   count,
   onOpen
 }) {
-  return /* @__PURE__ */ jsxs23("div", { className: "flex gap-0.5", children: [
-    perms.canCreateNode && /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs25("div", { className: "flex gap-0.5", children: [
+    perms.canCreateNode && /* @__PURE__ */ jsx27(
       IconButton4,
       {
         label: "Add node",
         variant: "outline",
         disabled: count > 0,
         onClick: () => onOpen("node-create"),
-        children: /* @__PURE__ */ jsx25(Plus3, {})
+        children: /* @__PURE__ */ jsx27(Plus3, {})
       }
     ),
-    perms.canUpdateNode && /* @__PURE__ */ jsx25(
+    perms.canUpdateNode && /* @__PURE__ */ jsx27(
       IconButton4,
       {
         label: "Edit node",
         variant: "outline",
         disabled: count !== 1,
         onClick: () => onOpen("node-edit"),
-        children: /* @__PURE__ */ jsx25(Edit, {})
+        children: /* @__PURE__ */ jsx27(Edit, {})
       }
     ),
-    perms.canEditEdges && /* @__PURE__ */ jsx25(
+    perms.canEditEdges && /* @__PURE__ */ jsx27(
       IconButton4,
       {
         label: "Edges",
         variant: "outline",
         disabled: count !== 2,
         onClick: () => onOpen("edge"),
-        children: /* @__PURE__ */ jsx25(Link, {})
+        children: /* @__PURE__ */ jsx27(Link, {})
       }
     ),
-    perms.canDeleteNode && /* @__PURE__ */ jsx25(
+    perms.canDeleteNode && /* @__PURE__ */ jsx27(
       IconButton4,
       {
         label: "Delete node",
@@ -7274,7 +7507,7 @@ function ToolbarButtons({
         tone: "destructive",
         disabled: count !== 1,
         onClick: () => onOpen("delete"),
-        children: /* @__PURE__ */ jsx25(Trash23, {})
+        children: /* @__PURE__ */ jsx27(Trash23, {})
       }
     )
   ] });
@@ -7290,14 +7523,14 @@ function ToolbarDialogs({
   onClose,
   onMutated
 }) {
-  const onChange = useCallback11(
+  const onChange = useCallback12(
     (o) => {
       if (!o) onClose();
     },
     [onClose]
   );
-  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
-    (perms.canCreateNode || perms.canUpdateNode) && /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs25(Fragment8, { children: [
+    (perms.canCreateNode || perms.canUpdateNode) && /* @__PURE__ */ jsx27(
       NodeFormSheet,
       {
         open: dialog === "node-create" || dialog === "node-edit",
@@ -7309,7 +7542,7 @@ function ToolbarDialogs({
         onSaved: onMutated
       }
     ),
-    perms.canEditEdges && firstNode && secondNode && /* @__PURE__ */ jsx25(
+    perms.canEditEdges && firstNode && secondNode && /* @__PURE__ */ jsx27(
       EdgeFormSheet,
       {
         open: dialog === "edge",
@@ -7322,7 +7555,7 @@ function ToolbarDialogs({
         onChanged: onMutated
       }
     ),
-    perms.canDeleteNode && firstNode && /* @__PURE__ */ jsx25(
+    perms.canDeleteNode && firstNode && /* @__PURE__ */ jsx27(
       DeleteNodeDialog,
       {
         open: dialog === "delete",
@@ -7347,7 +7580,7 @@ function GraphEditToolbar({
     (s) => s.selectedNodeIds
   );
   const live = useLiveGraphData();
-  const [dialog, setDialog] = useState17(null);
+  const [dialog, setDialog] = useState18(null);
   const perms = useMemo11(
     () => toPerms(resolveGraphCapabilities(capabilities, readOnly)),
     [capabilities, readOnly]
@@ -7358,8 +7591,8 @@ function GraphEditToolbar({
   );
   const stableOnMutated = useStableRef(onMutated);
   if (!perms.anyEditable) return null;
-  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs25(Fragment8, { children: [
+    /* @__PURE__ */ jsx27(
       ToolbarButtons,
       {
         perms,
@@ -7367,7 +7600,7 @@ function GraphEditToolbar({
         onOpen: setDialog
       }
     ),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx27(
       ToolbarDialogs,
       {
         perms,
@@ -7383,6 +7616,662 @@ function GraphEditToolbar({
     )
   ] });
 }
+
+// src/finder/GraphFinder.tsx
+import { FormSelect as FormSelect3, FormTextarea } from "@petrarca/sonnet-forms";
+import {
+  Alert as Alert5,
+  AlertDescription,
+  AlertTitle,
+  Button as Button11,
+  SimpleTooltip as SimpleTooltip5
+} from "@petrarca/sonnet-ui";
+import { Search } from "lucide-react";
+
+// src/finder/useFinderState.ts
+import { useState as useState20, useEffect as useEffect11 } from "react";
+import mistql from "mistql";
+
+// src/finder/flattenGraphData.ts
+function flattenGraphData(normalized) {
+  const flattenedNodes = normalized.nodeIds.map((id) => {
+    const node = normalized.nodesById[id];
+    return {
+      ...node.properties_,
+      id_: node.id_,
+      label_: node.label_,
+      displayName: node.visual.displayName,
+      color: node.visual.color
+    };
+  });
+  const flattenedEdges = normalized.edgeIds.map((id) => {
+    const edge = normalized.edgesById[id];
+    return {
+      ...edge.properties_ || {},
+      id_: edge.id_,
+      label_: edge.label_,
+      start_id_: edge.start_id_,
+      end_id_: edge.end_id_
+    };
+  });
+  const nodesByLabel = groupByLabel(flattenedNodes);
+  const edgesByLabel = groupByLabel(flattenedEdges);
+  return {
+    nodes: flattenedNodes,
+    edges: flattenedEdges,
+    graph: [...flattenedNodes, ...flattenedEdges],
+    _labels: Object.keys(nodesByLabel),
+    _edgeLabels: Object.keys(edgesByLabel),
+    ...nodesByLabel,
+    ...edgesByLabel
+  };
+}
+function groupByLabel(items) {
+  const byLabel = {};
+  for (const item of items) {
+    (byLabel[item.label_] ??= []).push(item);
+  }
+  return byLabel;
+}
+
+// src/finder/useGraphSearch.ts
+import { useRef as useRef9, useState as useState19, useEffect as useEffect10 } from "react";
+import { errorLog as errorLog7 } from "@petrarca/sonnet-core";
+
+// src/finder/OramaSearchService.ts
+import { create as create8, insert, search } from "@orama/orama";
+
+// src/finder/oramaSchemaBuilder.ts
+function buildOramaSchema() {
+  return {
+    id_: "string",
+    type: "string",
+    label_: "string",
+    displayName: "string",
+    searchableText: "string",
+    properties_json: "string",
+    isVisible: "boolean",
+    start_id_: "string",
+    end_id_: "string"
+  };
+}
+function getDefaultFieldBoosting() {
+  return {
+    displayName: 2,
+    searchableText: 1.5,
+    properties_json: 1
+  };
+}
+
+// src/finder/oramaTransformers.ts
+function transformNodeToOramaDoc(node, normalized) {
+  return {
+    id_: String(node.id_),
+    type: "node",
+    label_: node.label_,
+    displayName: node.visual.displayName || node.label_,
+    searchableText: buildSearchableText(node),
+    properties_json: JSON.stringify(node.properties_ || {}),
+    isVisible: normalized ? !normalized.hiddenNodeIds.has(String(node.id_)) : true
+  };
+}
+function transformEdgeToOramaDoc(edge, normalized) {
+  return {
+    id_: String(edge.id_),
+    type: "edge",
+    label_: edge.label_,
+    displayName: edge.label_,
+    searchableText: buildSearchableTextEdge(edge),
+    properties_json: JSON.stringify(edge.properties_ || {}),
+    isVisible: normalized ? !normalized.hiddenEdgeIds.has(String(edge.id_)) : true,
+    start_id_: String(edge.start_id_),
+    end_id_: String(edge.end_id_)
+  };
+}
+function buildSearchableText(node) {
+  const parts = [node.label_, node.visual.displayName || ""];
+  appendPropertyValues(parts, node.properties_);
+  return parts.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+}
+function buildSearchableTextEdge(edge) {
+  const parts = [edge.label_];
+  appendPropertyValues(parts, edge.properties_);
+  return parts.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+}
+function appendPropertyValues(parts, properties) {
+  if (!properties) return;
+  for (const value of Object.values(properties)) {
+    if (value == null) continue;
+    if (Array.isArray(value)) {
+      parts.push(...value.map(String));
+    } else if (typeof value === "object") {
+      parts.push(JSON.stringify(value));
+    } else {
+      parts.push(String(value));
+    }
+  }
+}
+
+// src/finder/OramaSearchService.ts
+function buildWhereClause(options) {
+  const where = {};
+  const includeNodes = options.includeNodes ?? true;
+  const includeEdges = options.includeEdges ?? true;
+  if (includeNodes !== includeEdges) {
+    where.type = includeNodes ? "node" : "edge";
+  }
+  const labels = options.labels;
+  if (labels?.length) {
+    where.label_ = labels.length === 1 ? labels[0] : { in: labels };
+  }
+  if (options.visibleOnly) {
+    where.isVisible = true;
+  }
+  return where;
+}
+var OramaSearchService = class {
+  db = null;
+  config;
+  isDirty = false;
+  isInitialized = false;
+  lastIndexBuild = null;
+  stats = { totalIndexed: 0, nodesIndexed: 0, edgesIndexed: 0 };
+  constructor(config = {}) {
+    this.config = {
+      debug: config.debug ?? false,
+      maxNodes: config.maxNodes ?? 1e5,
+      lazyInit: config.lazyInit ?? true
+    };
+  }
+  // ---- lifecycle ----------------------------------------------------------
+  /** Create the empty index with the finder schema (idempotent). */
+  async initialize() {
+    if (this.isInitialized) return;
+    this.db = await create8({
+      schema: buildOramaSchema(),
+      components: {
+        tokenizer: {
+          stemming: true,
+          stopWords: ["the", "a", "an", "and", "or", "but"]
+        }
+      }
+    });
+    this.isInitialized = true;
+    this.isDirty = false;
+  }
+  /** Drop all documents (recreates the index; Orama has no bulk delete). */
+  async clear() {
+    if (!this.db) return;
+    this.isInitialized = false;
+    await this.initialize();
+    this.stats = { totalIndexed: 0, nodesIndexed: 0, edgesIndexed: 0 };
+    this.lastIndexBuild = null;
+    this.isDirty = false;
+  }
+  /** Mark the index stale so the next search rebuilds it. */
+  markDirty() {
+    this.isDirty = true;
+  }
+  /** Whether the index needs a (re)build before searching. */
+  needsRebuild() {
+    return this.isDirty || !this.isInitialized;
+  }
+  // ---- indexing -----------------------------------------------------------
+  /** Rebuild the whole index from the given nodes and edges. */
+  async rebuildIndex(nodes, edges, normalized) {
+    if (!this.isInitialized) await this.initialize();
+    await this.clear();
+    if (!this.db) throw new Error("Finder index not initialized");
+    let indexedNodes = nodes;
+    if (nodes.length > this.config.maxNodes) {
+      if (this.config.debug) {
+        console.warn(
+          `[GraphFinder] node count (${nodes.length}) exceeds maxNodes (${this.config.maxNodes}); truncating`
+        );
+      }
+      indexedNodes = nodes.slice(0, this.config.maxNodes);
+    }
+    for (const node of indexedNodes) {
+      await insert(this.db, transformNodeToOramaDoc(node, normalized));
+    }
+    for (const edge of edges) {
+      await insert(this.db, transformEdgeToOramaDoc(edge, normalized));
+    }
+    this.stats = {
+      totalIndexed: indexedNodes.length + edges.length,
+      nodesIndexed: indexedNodes.length,
+      edgesIndexed: edges.length
+    };
+    this.lastIndexBuild = Date.now();
+    this.isDirty = false;
+  }
+  // ---- search -------------------------------------------------------------
+  /** Run a full-text query against the index. */
+  async search(options) {
+    if (!this.db || !this.isInitialized || this.isDirty) return [];
+    const { term, limit = 50, boost } = options;
+    const where = buildWhereClause(options);
+    const results = await search(this.db, {
+      term,
+      where: Object.keys(where).length > 0 ? where : void 0,
+      limit,
+      boost: boost || getDefaultFieldBoosting(),
+      tolerance: 1
+      // allow a 1-character typo
+    });
+    return results.hits.map((hit) => ({
+      document: hit.document,
+      score: hit.score
+    }));
+  }
+  // ---- status -------------------------------------------------------------
+  /** Current index statistics. */
+  getStats() {
+    return {
+      ...this.stats,
+      lastIndexBuild: this.lastIndexBuild,
+      isReady: this.isInitialized && !this.isDirty
+    };
+  }
+  /** Whether the index is ready to serve searches. */
+  isReady() {
+    return this.isInitialized && !this.isDirty;
+  }
+};
+
+// src/finder/useGraphSearch.ts
+function useGraphSearch() {
+  const { baseNormalized } = useLiveGraphData();
+  const serviceRef = useRef9(null);
+  const [isReady, setIsReady] = useState19(false);
+  const [isIndexing, setIsIndexing] = useState19(false);
+  const [error, setError] = useState19(null);
+  const [stats, setStats] = useState19(null);
+  const lastDataKeyRef = useRef9("");
+  useEffect10(() => {
+    const nodeCount = Object.keys(baseNormalized.nodesById).length;
+    const edgeCount = Object.keys(baseNormalized.edgesById).length;
+    const currentKey = `${nodeCount}-${edgeCount}`;
+    if (!serviceRef.current) serviceRef.current = new OramaSearchService();
+    const service = serviceRef.current;
+    const changed = currentKey !== lastDataKeyRef.current;
+    if (changed && lastDataKeyRef.current !== "") {
+      lastDataKeyRef.current = currentKey;
+      service.markDirty();
+      setIsReady(false);
+      setStats(service.getStats());
+    } else if (lastDataKeyRef.current === "") {
+      lastDataKeyRef.current = currentKey;
+    }
+  }, [baseNormalized]);
+  const ensureIndexReady = async () => {
+    const nodes = Object.values(baseNormalized.nodesById);
+    const edges = Object.values(baseNormalized.edgesById);
+    const service = serviceRef.current;
+    if (!service) return false;
+    if (service.isReady() && !service.needsRebuild()) return true;
+    setIsIndexing(true);
+    setError(null);
+    try {
+      if (!service.isReady()) await service.initialize();
+      await service.rebuildIndex(nodes, edges);
+      setIsReady(true);
+      setStats(service.getStats());
+      return true;
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setIsReady(false);
+      return false;
+    } finally {
+      setIsIndexing(false);
+    }
+  };
+  const search2 = async (query, searchOptions) => {
+    const term = query.trim();
+    if (!term) return [];
+    try {
+      const ready = await ensureIndexReady();
+      if (!ready || !serviceRef.current) return [];
+      return await serviceRef.current.search({ term, ...searchOptions });
+    } catch (err) {
+      errorLog7("[GraphFinder] search error:", err);
+      setError(err instanceof Error ? err : new Error(String(err)));
+      return [];
+    }
+  };
+  return { search: search2, isReady, isIndexing, stats, error };
+}
+
+// src/finder/useFinderState.ts
+function isNodeRow(item) {
+  return "displayName" in item && !("start_id_" in item);
+}
+function isEdgeRow(item) {
+  return "start_id_" in item && "end_id_" in item;
+}
+function deduplicateResults(items) {
+  const seen = /* @__PURE__ */ new Set();
+  const deduped = [];
+  for (const raw of items) {
+    if (raw && typeof raw === "object" && "id_" in raw) {
+      const item = raw;
+      const key = `${isEdgeRow(item) ? "edge" : "node"}:${String(item.id_)}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        deduped.push(item);
+      }
+    } else {
+      deduped.push(raw);
+    }
+  }
+  return deduped;
+}
+function oramaHitToRow(r) {
+  const doc = r.document;
+  const properties = doc.properties_json ? JSON.parse(doc.properties_json) : {};
+  return {
+    id_: doc.id_,
+    label_: doc.label_,
+    displayName: doc.displayName,
+    ...doc.type === "edge" ? { start_id_: doc.start_id_, end_id_: doc.end_id_ } : {},
+    ...properties
+  };
+}
+function useFinderState() {
+  const useGraphFilter2 = useWorkspaceGraphFilter();
+  const [searchMode, setSearchMode] = useState20("fulltext");
+  const [expressionQuery, setExpressionQuery] = useState20("");
+  const [fulltextQuery, setFulltextQuery] = useState20("");
+  const [results, setResults] = useState20([]);
+  const [error, setError] = useState20(null);
+  const [hasSearched, setHasSearched] = useState20(false);
+  const [searchInfo, setSearchInfo] = useState20("");
+  const { baseNormalized, normalized } = useLiveGraphData();
+  const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
+  const { search: fullTextSearch, isIndexing, stats } = useGraphSearch();
+  useEffect11(() => {
+    setExpressionQuery("");
+    setFulltextQuery("");
+    setResults([]);
+    setError(null);
+    setHasSearched(false);
+    setSearchInfo("");
+  }, [lastDataChangeTime]);
+  const buildQueryData = () => {
+    const all = flattenGraphData(baseNormalized);
+    const visible = flattenGraphData(normalized);
+    return {
+      ...all,
+      vnodes: visible.nodes,
+      vedges: visible.edges,
+      vgraph: visible.graph
+    };
+  };
+  const runExpression = () => {
+    const result = mistql.query(expressionQuery, buildQueryData());
+    const arr = Array.isArray(result) ? result : [result];
+    setResults(deduplicateResults(arr));
+    setHasSearched(true);
+  };
+  const runFullText = async () => {
+    const hits = await fullTextSearch(fulltextQuery);
+    setResults(deduplicateResults(hits.map(oramaHitToRow)));
+    setHasSearched(true);
+  };
+  const runBoth = async () => {
+    const exprResult = expressionQuery.trim() ? mistql.query(expressionQuery, buildQueryData()) : buildQueryData().graph;
+    const exprArray = Array.isArray(exprResult) ? exprResult : [exprResult];
+    if (!fulltextQuery.trim()) {
+      setResults(deduplicateResults(exprArray));
+      setSearchInfo(`${exprArray.length} items after expression filter`);
+      setHasSearched(true);
+      return;
+    }
+    const exprIds = new Set(
+      exprArray.filter((i) => i && typeof i === "object" && "id_" in i).map((i) => String(i.id_))
+    );
+    const hits = await fullTextSearch(fulltextQuery);
+    const filtered = hits.filter((h) => exprIds.has(h.document.id_));
+    const deduped = deduplicateResults(filtered.map(oramaHitToRow));
+    setResults(deduped);
+    setSearchInfo(
+      `${exprArray.length} items after expression -> ${deduped.length} matches in full-text search`
+    );
+    setHasSearched(true);
+  };
+  const activeQuery = () => {
+    if (searchMode === "expression") return expressionQuery;
+    if (searchMode === "fulltext") return fulltextQuery;
+    return expressionQuery || fulltextQuery;
+  };
+  const runActiveMode = async () => {
+    if (searchMode === "expression") return runExpression();
+    if (searchMode === "fulltext") return runFullText();
+    return runBoth();
+  };
+  const handleSearch = async () => {
+    if (!activeQuery().trim()) {
+      setError(null);
+      setResults([]);
+      setHasSearched(false);
+      setSearchInfo("");
+      return;
+    }
+    try {
+      setError(null);
+      setSearchInfo("");
+      await runActiveMode();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Search execution failed");
+      setResults([]);
+      setHasSearched(true);
+      setSearchInfo("");
+    }
+  };
+  return {
+    searchMode,
+    setSearchMode,
+    expressionQuery,
+    setExpressionQuery,
+    fulltextQuery,
+    setFulltextQuery,
+    results,
+    error,
+    hasSearched,
+    searchInfo,
+    isIndexing,
+    statsLabel: stats && stats.isReady ? ` - ${stats.totalIndexed} indexed` : "",
+    handleSearch
+  };
+}
+
+// src/finder/GraphFinder.tsx
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+function GraphFinder() {
+  const {
+    searchMode,
+    setSearchMode,
+    expressionQuery,
+    setExpressionQuery,
+    fulltextQuery,
+    setFulltextQuery,
+    results,
+    error,
+    hasSearched,
+    searchInfo,
+    isIndexing,
+    statsLabel,
+    handleSearch
+  } = useFinderState();
+  const handleKeyDown = (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") handleSearch();
+  };
+  const both = searchMode === "both";
+  return /* @__PURE__ */ jsxs26("div", { className: "h-full flex flex-col p-4", children: [
+    /* @__PURE__ */ jsx28("div", { className: "mb-3 flex-shrink-0", children: /* @__PURE__ */ jsx28(
+      FormSelect3,
+      {
+        label: "Search Mode",
+        value: searchMode,
+        onChange: (value) => setSearchMode(value || "fulltext"),
+        options: [
+          { value: "fulltext", label: "Full-Text" },
+          { value: "expression", label: "Expression" },
+          { value: "both", label: "Both" }
+        ],
+        clearable: false
+      }
+    ) }),
+    /* @__PURE__ */ jsxs26("div", { className: "mb-4 flex-shrink-0 space-y-3", children: [
+      (searchMode === "expression" || both) && /* @__PURE__ */ jsx28(
+        ExpressionInput,
+        {
+          value: expressionQuery,
+          onChange: setExpressionQuery,
+          onKeyDown: handleKeyDown,
+          both
+        }
+      ),
+      (searchMode === "fulltext" || both) && /* @__PURE__ */ jsx28(
+        FullTextInput,
+        {
+          value: fulltextQuery,
+          onChange: setFulltextQuery,
+          onKeyDown: handleKeyDown,
+          onSearch: handleSearch,
+          both,
+          isIndexing,
+          statsLabel
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxs26(Alert5, { variant: "destructive", className: "mb-4 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx28(AlertTitle, { children: "Query Error" }),
+      /* @__PURE__ */ jsx28(AlertDescription, { children: error })
+    ] }),
+    hasSearched && !error && /* @__PURE__ */ jsx28(ResultsPanel, { results, searchInfo })
+  ] });
+}
+function ExpressionInput({
+  value,
+  onChange,
+  onKeyDown,
+  both
+}) {
+  return /* @__PURE__ */ jsxs26("div", { children: [
+    both && /* @__PURE__ */ jsx28("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Expression filter (applied first):" }),
+    /* @__PURE__ */ jsx28(
+      FormTextarea,
+      {
+        placeholder: 'e.g., Person | filter name == "John"',
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown,
+        autosize: true,
+        minRows: both ? 2 : 3
+      }
+    ),
+    !both && /* @__PURE__ */ jsx28("div", { className: "text-xs text-muted-foreground mt-1", children: "Use pipes (|) to filter and transform. Available: nodes, edges, graph, and each label." })
+  ] });
+}
+function FullTextInput({
+  value,
+  onChange,
+  onKeyDown,
+  onSearch,
+  both,
+  isIndexing,
+  statsLabel
+}) {
+  return /* @__PURE__ */ jsxs26("div", { children: [
+    both && /* @__PURE__ */ jsx28("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Full-text search (on filtered results):" }),
+    /* @__PURE__ */ jsx28(
+      FormTextarea,
+      {
+        placeholder: "e.g., software engineer machine learning",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown,
+        autosize: true,
+        minRows: both ? 2 : 3,
+        rightSection: /* @__PURE__ */ jsx28(SimpleTooltip5, { label: "Search", children: /* @__PURE__ */ jsx28(Button11, { variant: "ghost", size: "icon", onClick: onSearch, children: /* @__PURE__ */ jsx28(Search, { size: 16 }) }) }),
+        rightSectionWidth: 48
+      }
+    ),
+    !both && /* @__PURE__ */ jsxs26("div", { className: "text-xs text-muted-foreground mt-1", children: [
+      "Natural language search with typo tolerance",
+      isIndexing && " - building index...",
+      statsLabel
+    ] })
+  ] });
+}
+function ResultsPanel({
+  results,
+  searchInfo
+}) {
+  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-col flex-1 min-h-0", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "mb-2 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "text-sm font-semibold", children: [
+        "Results: ",
+        results.length,
+        " ",
+        results.length === 1 ? "item" : "items"
+      ] }),
+      searchInfo && /* @__PURE__ */ jsx28("div", { className: "text-xs text-muted-foreground mt-1", children: searchInfo })
+    ] }),
+    results.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "text-sm text-muted-foreground italic", children: "No results found" }) : /* @__PURE__ */ jsx28("div", { className: "space-y-2 overflow-y-auto flex-1", children: results.map((item, index) => /* @__PURE__ */ jsx28(ResultItem, { item }, resultKey(item, index))) })
+  ] });
+}
+function resultKey(item, index) {
+  if (item && typeof item === "object" && "id_" in item) {
+    return `${isEdgeRow(item) ? "edge" : "node"}:${String(item.id_)}`;
+  }
+  return String(index);
+}
+function ResultItem({ item }) {
+  const useGraphFocus2 = useWorkspaceGraphFocus();
+  const requestFocus = useGraphFocus2((s) => s.requestFocus);
+  if (typeof item !== "object" || item === null) {
+    return /* @__PURE__ */ jsx28("div", { className: "p-3 bg-muted/40 rounded border border-border", children: /* @__PURE__ */ jsx28("div", { className: "text-sm font-medium", children: String(item) }) });
+  }
+  const isNodeItem = isNodeRow(item);
+  const isEdgeItem = isEdgeRow(item);
+  const isGraphElement = isNodeItem || isEdgeItem;
+  const focus = (shouldSelect) => {
+    if (!isGraphElement) return;
+    requestFocus(String(item.id_), isNodeItem ? "node" : "edge", shouldSelect);
+  };
+  return /* @__PURE__ */ jsx28(
+    "div",
+    {
+      className: `p-3 bg-background rounded border border-border transition-colors ${isGraphElement ? "hover:border-primary hover:bg-accent cursor-pointer" : ""}`,
+      onClick: () => focus(false),
+      onDoubleClick: () => focus(true),
+      title: isGraphElement ? "Click to focus, double-click to focus and select" : void 0,
+      children: /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
+          isNodeItem && /* @__PURE__ */ jsxs26(Fragment9, { children: [
+            /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold px-2 py-0.5 bg-accent text-accent-foreground rounded", children: item.label_ }),
+            /* @__PURE__ */ jsx28("span", { className: "text-sm font-medium", children: item.displayName })
+          ] }),
+          isEdgeItem && /* @__PURE__ */ jsxs26(Fragment9, { children: [
+            /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold px-2 py-0.5 bg-accent text-accent-foreground rounded", children: item.label_ }),
+            /* @__PURE__ */ jsxs26("span", { className: "text-xs text-muted-foreground", children: [
+              String(item.start_id_),
+              " -> ",
+              String(item.end_id_)
+            ] })
+          ] }),
+          !isGraphElement && /* @__PURE__ */ jsx28("span", { className: "text-sm font-medium", children: "Object" })
+        ] }),
+        isGraphElement && /* @__PURE__ */ jsxs26("span", { className: "text-xs text-muted-foreground", children: [
+          "ID: ",
+          String(item.id_)
+        ] })
+      ] })
+    }
+  );
+}
 export {
   ActionPanel_default as ActionPanel,
   DeleteNodeDialog,
@@ -7391,6 +8280,7 @@ export {
   EdgeInfoCard_default as EdgeInfoCard,
   GraphA11yList,
   GraphEditToolbar,
+  GraphFinder,
   GraphModelEditor,
   GraphRendererProvider,
   GraphStoresContext,
@@ -7399,8 +8289,11 @@ export {
   NodeFormSheet,
   NodeInfoCard_default as NodeInfoCard,
   NodeTypeNameSheet,
+  OramaSearchService,
   Overview_default as Overview,
   PropertyFormSheet,
+  QueryEditor,
+  QueryHistory,
   RelationFormSheet,
   TypeDetailPanel,
   addEdgeType,
@@ -7415,6 +8308,7 @@ export {
   createGraphExplorationStore,
   createGraphFilterStore,
   createGraphFocusStore,
+  createQueryHistoryStore,
   createSelectionStore,
   deleteEdgeType,
   deleteEdgeTypeProperty,
@@ -7430,9 +8324,11 @@ export {
   enrichNodes,
   enrichSchemaWithRelations,
   extractDisplayLabel,
+  extractGraphFromRows,
   extractRelationFields,
   findEdgeType,
   findType,
+  flattenGraphData,
   graphCapabilitiesSchema,
   groupEdgesByRelation,
   hasProperties,
@@ -7470,12 +8366,14 @@ export {
   useCytoscapeData,
   GraphFocus_default as useGraphFocus,
   useGraphRenderer,
+  useGraphSearch,
   useLiveGraphData,
   useReagraphData,
   useStableRef,
   useWorkspaceGraphData,
   useWorkspaceGraphExploration,
   useWorkspaceGraphFilter,
+  useWorkspaceGraphFocus,
   useWorkspaceSelection,
   validateCapabilities,
   validateGraphCapabilities