@petrarca/sonnet-graph 0.8.0 → 0.9.0

package/dist/index.js

@@ -1681,7 +1681,8 @@ import {
   useEffect as useEffect4,
   useRef as useRef4,
   useState as useState6,
-  useCallback as useCallback5
+  useCallback as useCallback5,
+  useMemo as useMemo4
 } from "react";
 import { devLog as devLog8 } from "@petrarca/sonnet-core";
 import {
@@ -1690,38 +1691,87 @@ import {
 } from "reagraph";
 
 // src/components/rea/theme.ts
-import { lightTheme } from "reagraph";
+import { darkTheme, lightTheme } from "reagraph";
 var highlightColor = SELECTION_COLOR;
-var highlightColorText = "#1d4ed8";
-var theme = {
-  ...lightTheme,
-  node: {
-    ...lightTheme.node,
-    activeFill: highlightColor,
-    label: {
-      ...lightTheme.node.label,
-      activeColor: highlightColorText
-    }
-  },
-  ring: {
-    ...lightTheme.ring,
-    activeFill: highlightColor
-  },
-  edge: {
-    ...lightTheme.edge,
-    activeFill: highlightColor,
-    label: {
-      ...lightTheme.edge.label,
-      activeColor: highlightColorText
+var HIGHLIGHT_TEXT = { light: "#1d4ed8", dark: "#93c5fd" };
+function reaTheme(dark, colors) {
+  const base = dark ? darkTheme : lightTheme;
+  const highlightColorText = dark ? HIGHLIGHT_TEXT.dark : HIGHLIGHT_TEXT.light;
+  return {
+    ...base,
+    canvas: { ...base.canvas, background: colors.background },
+    node: {
+      ...base.node,
+      activeFill: highlightColor,
+      label: {
+        ...base.node.label,
+        color: colors.text,
+        stroke: colors.background,
+        activeColor: highlightColorText
+      }
+    },
+    ring: {
+      ...base.ring,
+      activeFill: highlightColor
+    },
+    edge: {
+      ...base.edge,
+      activeFill: highlightColor,
+      label: {
+        ...base.edge.label,
+        color: colors.text,
+        stroke: colors.background,
+        activeColor: highlightColorText
+      }
+    },
+    arrow: {
+      ...base.arrow,
+      activeFill: highlightColor
     }
-  },
-  arrow: {
-    ...lightTheme.arrow,
-    activeFill: highlightColor
-  }
+  };
+}
+
+// src/graph/canvasColors.ts
+var FALLBACK = {
+  background: "#ffffff",
+  text: "#020817",
+  labelBackground: "#f1f5f9",
+  raised: "#39445a"
 };
+function hslToHex(triple) {
+  const match = triple.trim().match(/^(-?[\d.]+)(?:deg)?\s+([\d.]+)%\s+([\d.]+)%$/);
+  if (!match) return void 0;
+  const [h, s, l] = [
+    Number(match[1]),
+    Number(match[2]) / 100,
+    Number(match[3]) / 100
+  ];
+  const a = s * Math.min(l, 1 - l);
+  const channel = (n) => {
+    const k = (n + h / 30) % 12;
+    const value = l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    return Math.round(value * 255).toString(16).padStart(2, "0");
+  };
+  return `#${channel(0)}${channel(8)}${channel(4)}`;
+}
+function withAlpha(hex, alpha) {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function canvasColors(theme) {
+  const style = getComputedStyle(document.documentElement);
+  const token = (name, fallback) => hslToHex(style.getPropertyValue(name)) ?? fallback;
+  const text = token("--foreground", FALLBACK.text);
+  return {
+    background: token("--background", FALLBACK.background),
+    text,
+    labelBackground: token("--muted", FALLBACK.labelBackground),
+    menu: theme === "dark" ? withAlpha(token("--border-strong", FALLBACK.raised), 0.95) : withAlpha(text, 0.75)
+  };
+}
 
 // src/components/rea/ReaGraph.tsx
+import { useTheme } from "@petrarca/sonnet-core/hooks";
 import { cn } from "@petrarca/sonnet-core";
 
 // src/components/rea/LayoutAndCameraControls.tsx
@@ -1876,7 +1926,7 @@ import { Card as Card2 } from "@petrarca/sonnet-ui";
 import { Card, Separator } from "@petrarca/sonnet-ui";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function NodeHoverInfo({ node }) {
-  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: [
+  return /* @__PURE__ */ jsx6(Card, { className: "absolute top-2 left-1/2 -translate-x-1/2 bg-card shadow-md p-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-row items-center gap-2", children: [
     /* @__PURE__ */ jsx6(
       Separator,
       {
@@ -2312,6 +2362,11 @@ function ReaGraph({
     if (edges.length > 0) devLog8("[ReGraph] sample edge", edges[0]);
   }, [nodes, edges]);
   const canvas = useRef4(null);
+  const { theme: pageTheme } = useTheme();
+  const theme = useMemo4(
+    () => reaTheme(pageTheme === "dark", canvasColors(pageTheme)),
+    [pageTheme]
+  );
   const [hoveredNode, setHoveredNode] = useState6(
     void 0
   );
@@ -2581,7 +2636,7 @@ function ReaGraph({
     "div",
     {
       className: cn(
-        "bg-white",
+        "bg-background",
         fullscreen ? "fixed inset-0 z-50 w-screen h-screen p-0 m-0" : "relative w-full h-full"
       ),
       children: [
@@ -2658,6 +2713,7 @@ import {
   useCallback as useCallback6
 } from "react";
 import { devLog as devLog10, errorLog as errorLog3 } from "@petrarca/sonnet-core";
+import { useTheme as useTheme2 } from "@petrarca/sonnet-core/hooks";
 import cytoscape from "cytoscape";
 import fcose from "cytoscape-fcose";
 import cola from "cytoscape-cola";
@@ -2765,7 +2821,7 @@ function CytoscapeControls({
   onResetView,
   extraToolbarContent
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: "absolute right-2 top-2 flex flex-col border bg-white rounded-md shadow-sm z-10", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "absolute right-2 top-2 flex flex-col border bg-background rounded-md shadow-sm z-10", children: [
     /* @__PURE__ */ jsx10(RendererDropdown, {}),
     /* @__PURE__ */ jsx10(
       ViewControls2,
@@ -3067,7 +3123,8 @@ var createNodeContextMenu = ({
   cy,
   useGraphExploration,
   onCopyNode,
-  onExpandRequest
+  onExpandRequest,
+  fillColor
 }) => {
   devLog9("[CxtMenu] Initializing node context menu");
   return cy.cxtmenu({
@@ -3136,7 +3193,7 @@ var createNodeContextMenu = ({
       }
     ],
     menuRadius: 60,
-    fillColor: "rgba(0, 0, 0, 0.75)",
+    fillColor,
     activeFillColor: "rgba(59, 130, 246, 0.75)",
     // blue-500
     activePadding: 10,
@@ -3155,7 +3212,8 @@ var createNodeContextMenu = ({
 };
 var createEdgeContextMenu = ({
   cy,
-  useGraphExploration
+  useGraphExploration,
+  fillColor
 }) => {
   return cy.cxtmenu({
     selector: "edge",
@@ -3204,7 +3262,7 @@ var createEdgeContextMenu = ({
     ],
     menuRadius: 90,
     // Increased for more items
-    fillColor: "rgba(0, 0, 0, 0.75)",
+    fillColor,
     activeFillColor: "rgba(239, 68, 68, 0.75)",
     // red-500
     activePadding: 10,
@@ -3221,6 +3279,139 @@ var createEdgeContextMenu = ({
 
 // src/components/cyto/CytoscapeGraph.tsx
 import { toast as toast4 } from "sonner";
+
+// src/components/cyto/stylesheet.ts
+function graphStylesheet(colors) {
+  return [
+    // Base node style with data mappers for dynamic properties
+    {
+      selector: "node",
+      style: {
+        "background-color": "data(color)",
+        // Read color from element data
+        "background-opacity": 0.9,
+        width: "data(size)",
+        // Read size from element data
+        height: "data(size)",
+        shape: "ellipse",
+        label: "data(label)",
+        // Label text on a chip, in the theme's colours
+        color: colors.text,
+        "font-size": "11px",
+        // Increased from 10px
+        "font-weight": "500",
+        // medium: legible on the chip without shouting
+        "text-valign": "bottom",
+        "text-halign": "center",
+        "text-wrap": "wrap",
+        "text-max-width": "120px",
+        // Increased from 100px for longer labels
+        "text-margin-y": 5,
+        "text-background-color": colors.labelBackground,
+        "text-background-opacity": 1,
+        "text-background-padding": "3px",
+        "text-background-shape": "roundrectangle",
+        "border-width": 1,
+        "border-color": colors.background,
+        "border-opacity": 0.8
+      }
+    },
+    // Override background color only when fill data is present
+    {
+      selector: "node[fill]",
+      style: {
+        "background-color": "data(fill)"
+      }
+    },
+    {
+      selector: "edge",
+      style: {
+        width: "data(size)",
+        // Read width from element data
+        "line-color": "data(color)",
+        // Read color from element data
+        "target-arrow-color": "data(color)",
+        "target-arrow-shape": "triangle",
+        "curve-style": "bezier",
+        "control-point-step-size": 40,
+        "control-point-weight": 0.5,
+        opacity: 0.8,
+        "arrow-scale": 0.8,
+        "mid-target-arrow-shape": "none",
+        "source-endpoint": "outside-to-node-or-label",
+        "target-endpoint": "outside-to-node-or-label"
+      }
+    },
+    // Dashed edges (when dashed property is true)
+    {
+      selector: "edge[dashed]",
+      style: {
+        "line-style": "dashed"
+      }
+    },
+    // Show edge labels by default with good styling
+    {
+      selector: "edge[label]",
+      style: {
+        label: "data(label)",
+        "font-size": "10px",
+        // Increased from 8px for better readability
+        "font-weight": "500",
+        // Semi-bold for better visibility
+        "text-background-color": colors.background,
+        "text-background-opacity": 0.9,
+        // Increased from 0.8 for better contrast
+        "text-background-padding": "3px",
+        // Increased from 2px
+        "text-background-shape": "roundrectangle",
+        "text-rotation": "autorotate",
+        "text-margin-y": -8,
+        // Adjusted for larger font
+        color: colors.text
+      }
+    },
+    {
+      selector: "edge:selected",
+      style: {
+        "line-color": SELECTION_COLOR,
+        "target-arrow-color": SELECTION_COLOR,
+        // Modest bump over the base width (~3); selection is conveyed mainly
+        // by colour + overlay, not a slab. (Was 8, which looked oversized.)
+        width: 4,
+        "z-index": 999,
+        "font-size": "11px",
+        "font-weight": "bold",
+        "text-background-opacity": 1,
+        "text-background-color": colors.background,
+        "text-background-padding": "3px",
+        "arrow-scale": 0.9,
+        opacity: 1,
+        "overlay-color": SELECTION_COLOR,
+        "overlay-opacity": 0.08
+      }
+    },
+    {
+      selector: "node:selected",
+      style: {
+        "border-width": 10,
+        // thicker circle outline
+        "border-color": SELECTION_COLOR,
+        "border-opacity": 1,
+        "background-opacity": 1,
+        "text-background-opacity": 1,
+        "text-background-color": colors.background,
+        "text-background-padding": "4px",
+        "overlay-color": SELECTION_COLOR,
+        "overlay-opacity": 0.18,
+        width: 48,
+        // slight size bump from 40
+        height: 48
+      }
+    }
+  ];
+}
+
+// src/components/cyto/CytoscapeGraph.tsx
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function CytoscapeExpandOverlay({
   expandRequest,
@@ -3551,8 +3742,8 @@ function computeGraphViewState({
     showEmptyMessage: !hasNodes && !hasExplorationState,
     showFilteredMessage: !hasNodes && hasExplorationState,
     showControls: hasNodes || hasExplorationState,
-    outerClass: fullscreen ? "fixed inset-0 z-50 w-screen h-screen bg-white flex flex-col" : "w-full h-full flex flex-col relative",
-    innerClass: fullscreen ? "flex-1 relative overflow-hidden bg-white" : "flex-1 relative border border-gray-300 rounded-md overflow-hidden bg-white"
+    outerClass: fullscreen ? "fixed inset-0 z-50 w-screen h-screen bg-background flex flex-col" : "w-full h-full flex flex-col relative",
+    innerClass: fullscreen ? "flex-1 relative overflow-hidden bg-background" : "flex-1 relative border border-border rounded-md overflow-hidden bg-background"
   };
 }
 function useFullscreen(fitToScreen, cyRef) {
@@ -3595,10 +3786,7 @@ function setupCytoscapeEventHandlers({
   selectedEdgeRef,
   setSelectedNodeIdsStore,
   setSelectedEdgeStore,
-  clearSelectionStore,
-  useGraphExploration,
-  onCopyNode,
-  onExpandRequest
+  clearSelectionStore
 }) {
   const updateSelectedNodeIds = (nodeIds) => {
     setSelectedNodeIdsStore(nodeIds);
@@ -3684,13 +3872,6 @@ function setupCytoscapeEventHandlers({
   cy.on("tap", (evt) => {
     if (evt.target === cy) clearAll();
   });
-  createNodeContextMenu({
-    cy,
-    useGraphExploration,
-    onCopyNode,
-    onExpandRequest
-  });
-  createEdgeContextMenu({ cy, useGraphExploration });
 }
 function CytoscapeGraph({
   layout: initialLayout = "auto",
@@ -3716,6 +3897,7 @@ function CytoscapeGraph({
   const baseNormalized = live.baseNormalized;
   const useGraphFilter2 = useWorkspaceGraphFilter();
   const useGraphExploration = useWorkspaceGraphExploration();
+  const { theme } = useTheme2();
   const useSelection3 = useWorkspaceSelection();
   const useGraphFocus2 = useWorkspaceGraphFocus();
   const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
@@ -3791,135 +3973,7 @@ function CytoscapeGraph({
       // Shift/Cmd to add a second node (e.g. for the two-node edge action).
       // This matches the conventional canvas-selection expectation.
       selectionType: "single",
-      style: [
-        // Base node style with data mappers for dynamic properties
-        {
-          selector: "node",
-          style: {
-            "background-color": "data(color)",
-            // Read color from element data
-            "background-opacity": 0.9,
-            width: "data(size)",
-            // Read size from element data
-            height: "data(size)",
-            shape: "ellipse",
-            label: "data(label)",
-            // Dark gray text for readability on subtle gray background
-            color: "#374151",
-            "font-size": "11px",
-            // Increased from 10px
-            "font-weight": "bold",
-            "text-valign": "bottom",
-            "text-halign": "center",
-            "text-wrap": "wrap",
-            "text-max-width": "120px",
-            // Increased from 100px for longer labels
-            "text-margin-y": 5,
-            // Subtle light gray label background
-            "text-background-color": "#e5e7eb",
-            // gray-200
-            "text-background-opacity": 1,
-            "text-background-padding": "3px",
-            "text-background-shape": "roundrectangle",
-            "border-width": 1,
-            "border-color": "#ffffff",
-            "border-opacity": 0.8
-          }
-        },
-        // Override background color only when fill data is present
-        {
-          selector: "node[fill]",
-          style: {
-            "background-color": "data(fill)"
-          }
-        },
-        {
-          selector: "edge",
-          style: {
-            width: "data(size)",
-            // Read width from element data
-            "line-color": "data(color)",
-            // Read color from element data
-            "target-arrow-color": "data(color)",
-            "target-arrow-shape": "triangle",
-            "curve-style": "bezier",
-            "control-point-step-size": 40,
-            "control-point-weight": 0.5,
-            opacity: 0.8,
-            "arrow-scale": 0.8,
-            "mid-target-arrow-shape": "none",
-            "source-endpoint": "outside-to-node-or-label",
-            "target-endpoint": "outside-to-node-or-label"
-          }
-        },
-        // Dashed edges (when dashed property is true)
-        {
-          selector: "edge[dashed]",
-          style: {
-            "line-style": "dashed"
-          }
-        },
-        // Show edge labels by default with good styling
-        {
-          selector: "edge[label]",
-          style: {
-            label: "data(label)",
-            "font-size": "10px",
-            // Increased from 8px for better readability
-            "font-weight": "500",
-            // Semi-bold for better visibility
-            "text-background-color": "#ffffff",
-            "text-background-opacity": 0.9,
-            // Increased from 0.8 for better contrast
-            "text-background-padding": "3px",
-            // Increased from 2px
-            "text-background-shape": "roundrectangle",
-            "text-rotation": "autorotate",
-            "text-margin-y": -8,
-            // Adjusted for larger font
-            color: "#1a1a1a"
-            // Darker for better contrast
-          }
-        },
-        {
-          selector: "edge:selected",
-          style: {
-            "line-color": SELECTION_COLOR,
-            "target-arrow-color": SELECTION_COLOR,
-            // Modest bump over the base width (~3); selection is conveyed mainly
-            // by colour + overlay, not a slab. (Was 8, which looked oversized.)
-            width: 4,
-            "z-index": 999,
-            "font-size": "11px",
-            "font-weight": "bold",
-            "text-background-opacity": 1,
-            "text-background-color": "#ffffff",
-            "text-background-padding": "3px",
-            "arrow-scale": 0.9,
-            opacity: 1,
-            "overlay-color": SELECTION_COLOR,
-            "overlay-opacity": 0.08
-          }
-        },
-        {
-          selector: "node:selected",
-          style: {
-            "border-width": 10,
-            // thicker circle outline
-            "border-color": SELECTION_COLOR,
-            "border-opacity": 1,
-            "background-opacity": 1,
-            "text-background-opacity": 1,
-            "text-background-color": "#ffffff",
-            "text-background-padding": "4px",
-            "overlay-color": SELECTION_COLOR,
-            "overlay-opacity": 0.18,
-            width: 48,
-            // slight size bump from 40
-            height: 48
-          }
-        }
-      ],
+      style: graphStylesheet(canvasColors(theme)),
       layout: { name: "grid", fit: true, avoidOverlap: true, condense: true },
       // initial quick layout
       wheelSensitivity: 0.2
@@ -3933,10 +3987,7 @@ function CytoscapeGraph({
         selectedEdgeRef,
         setSelectedNodeIdsStore,
         setSelectedEdgeStore,
-        clearSelectionStore,
-        useGraphExploration,
-        onCopyNode,
-        onExpandRequest: setExpandRequest
+        clearSelectionStore
       });
     }
     return () => {
@@ -3944,6 +3995,27 @@ function CytoscapeGraph({
       cyRef.current = null;
     };
   }, []);
+  useEffect5(() => {
+    const cy = cyRef.current;
+    if (!cy) return;
+    const colors = canvasColors(theme);
+    cy.style(graphStylesheet(colors));
+    const menus = [
+      createNodeContextMenu({
+        cy,
+        useGraphExploration,
+        onCopyNode,
+        onExpandRequest: setExpandRequest,
+        fillColor: colors.menu
+      }),
+      createEdgeContextMenu({
+        cy,
+        useGraphExploration,
+        fillColor: colors.menu
+      })
+    ];
+    return () => menus.forEach((menu) => menu.destroy());
+  }, [theme, useGraphExploration, onCopyNode]);
   const elementIdsRef = useRef5("");
   const lastLayoutRef = useRef5("");
   const lastFitPaddingRef = useRef5(fitPadding);
@@ -4090,8 +4162,8 @@ function CytoscapeGraph({
         onClose: () => setExpandRequest(null)
       }
     ),
-    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)' }),
+    showEmptyMessage && /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 flex items-center justify-center text-xs text-muted-foreground 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-muted-foreground pointer-events-none select-none", children: 'All elements are hidden or filtered (click "Reset Focus" to restore)' }),
     showControls && /* @__PURE__ */ jsx11(
       CytoscapeControls_default,
       {
@@ -4263,7 +4335,7 @@ var EdgeInfoCard_default = EdgeInfoCard;
 // src/components/ActionPanel/Overview.tsx
 import { Badge } from "@petrarca/sonnet-ui";
 import { formatNumber, devLog as devLog11 } from "@petrarca/sonnet-core";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function computeEdgeToNodeLabels(nodesById, edgesById) {
   const mapping = {};
@@ -4542,7 +4614,7 @@ function GraphOverview({
 }
 function Overview({ nodeBuckets, edgeSectionTitle } = {}) {
   const { stats, colorPalette, labelCounts, edgeLabelCounts, baseNormalized } = useLiveGraphData();
-  const edgeToNodeLabels = useMemo4(() => {
+  const edgeToNodeLabels = useMemo5(() => {
     if (!baseNormalized?.nodesById || !baseNormalized?.edgesById) return {};
     return computeEdgeToNodeLabels(
       baseNormalized.nodesById,
@@ -4577,7 +4649,7 @@ function Overview({ nodeBuckets, edgeSectionTitle } = {}) {
 var Overview_default = Overview;
 
 // src/components/ActionPanel/ActionPanel.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function ActionPanel({ actions }) {
   const useSelection3 = useWorkspaceSelection();
@@ -4586,7 +4658,7 @@ function ActionPanel({ actions }) {
   );
   const selectedEdge = useSelection3((s) => s.selectedEdge);
   const live = useLiveGraphData();
-  const selectedNodes = useMemo5(
+  const selectedNodes = useMemo6(
     () => selectedNodeIds.map((id) => live.normalized.nodesById[id]).filter(Boolean),
     [selectedNodeIds, live.normalized]
   );
@@ -4613,11 +4685,30 @@ function ActionPanel({ actions }) {
 }
 var ActionPanel_default = ActionPanel;
 
+// src/components/CenteredMessage.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var TONE = {
+  muted: "text-muted-foreground",
+  destructive: "text-destructive"
+};
+function CenteredMessage({
+  children,
+  tone = "muted"
+}) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: `flex-1 flex items-center justify-center text-sm ${TONE[tone]}`,
+      children
+    }
+  );
+}
+
 // src/components/GraphA11yList/GraphA11yList.tsx
-import { useCallback as useCallback7, useMemo as useMemo6, useRef as useRef6 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo7, useRef as useRef6 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { cn as cn2 } from "@petrarca/sonnet-core";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var SR_ONLY = "absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)] [clip-path:inset(50%)] -m-px";
 function GraphA11yList({
   visible = false,
@@ -4637,7 +4728,7 @@ function GraphA11yList({
   const setSelectedEdge = useSelection3(
     (s) => s.setSelectedEdge
   );
-  const rows = useMemo6(() => {
+  const rows = useMemo7(() => {
     const nodeRows = live.nodes.map((n) => ({
       kind: "node",
       id: String(n.id_),
@@ -4686,19 +4777,19 @@ function GraphA11yList({
     [activateNode, setSelectedNodeIds, setSelectedEdge]
   );
   const isSelected = (row) => row.kind === "node" ? selectedNodeIds.includes(row.id) : selectedEdge?.id_ === row.edge.id_;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       role: "listbox",
       "aria-label": "Graph elements",
       "aria-multiselectable": true,
       className: cn2(visible ? "rounded-md border" : SR_ONLY, className),
-      children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsx18(
         "div",
         {
           ref: parentRef,
           style: { maxHeight: visible ? maxHeight : void 0, overflow: "auto" },
-          children: /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsx18(
             "div",
             {
               style: {
@@ -4710,7 +4801,7 @@ function GraphA11yList({
                 const row = rows[vi.index];
                 if (!row) return null;
                 const selected = isSelected(row);
-                return /* @__PURE__ */ jsx17(
+                return /* @__PURE__ */ jsx18(
                   "button",
                   {
                     type: "button",
@@ -4728,7 +4819,7 @@ function GraphA11yList({
                       height: `${vi.size}px`,
                       transform: `translateY(${vi.start}px)`
                     },
-                    children: /* @__PURE__ */ jsx17("span", { className: "truncate", children: row.label })
+                    children: /* @__PURE__ */ jsx18("span", { className: "truncate", children: row.label })
                   },
                   vi.key
                 );
@@ -4870,7 +4961,7 @@ import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef7
 import { ResizeHandle } from "@petrarca/sonnet-ui";
 
 // src/graph-model/ModelActionPanel.tsx
-import { useMemo as useMemo8, useState as useState13 } from "react";
+import { useMemo as useMemo9, useState as useState13 } from "react";
 import { Button as Button8, IconButton as IconButton2 } from "@petrarca/sonnet-ui";
 import { GitBranchPlus, CirclePlus, Waypoints } from "lucide-react";
 
@@ -5185,7 +5276,7 @@ function deleteEdgeType(model, label) {
 }
 
 // src/graph-model/PropertyFormSheet.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import {
   Sheet,
   SheetContent,
@@ -5195,7 +5286,7 @@ import {
   SheetDescription
 } from "@petrarca/sonnet-ui";
 import { JsonSchemaFormRenderer } from "@petrarca/sonnet-forms";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var TYPE_OPTIONS = [
   "string",
   "integer",
@@ -5278,14 +5369,14 @@ function PropertyFormSheet({
   widgetOptions,
   onSave
 }) {
-  const widgets = useMemo7(
+  const widgets = useMemo8(
     () => [...DEFAULT_WIDGETS, ...widgetOptions ?? []],
     [widgetOptions]
   );
-  const schema = useMemo7(() => buildSchema(widgets), [widgets]);
-  const data = useMemo7(() => toFormData(property), [property]);
+  const schema = useMemo8(() => buildSchema(widgets), [widgets]);
+  const data = useMemo8(() => toFormData(property), [property]);
   const isEdit = !!property;
-  return /* @__PURE__ */ jsx18(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs16(SheetContent, { children: [
+  return /* @__PURE__ */ jsx19(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs16(SheetContent, { children: [
     /* @__PURE__ */ jsxs16(SheetHeader, { children: [
       /* @__PURE__ */ jsxs16(SheetTitle, { children: [
         isEdit ? "Edit property" : "Add property",
@@ -5294,9 +5385,9 @@ function PropertyFormSheet({
         " ",
         ownerLabel
       ] }),
-      /* @__PURE__ */ jsx18(SheetDescription, { children: "Define the property and how it is rendered." })
+      /* @__PURE__ */ jsx19(SheetDescription, { children: "Define the property and how it is rendered." })
     ] }),
-    /* @__PURE__ */ jsx18(SheetBody, { children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(SheetBody, { children: /* @__PURE__ */ jsx19(
       JsonSchemaFormRenderer,
       {
         schema,
@@ -5327,7 +5418,7 @@ import {
 } from "@petrarca/sonnet-ui";
 import { FormSelect } from "@petrarca/sonnet-forms";
 import { ArrowRight } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var CARDINALITIES = ["ONE_TO_MANY", "ONE_TO_ONE"];
 function RelationTypeField({
   relType,
@@ -5340,7 +5431,7 @@ function RelationTypeField({
   );
   const options = labels.map((l) => ({ value: l, label: l }));
   const canCreate = edgeTypeMode === "edit";
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     FormSelect,
     {
       label: "Relation type",
@@ -5363,12 +5454,12 @@ function DirectionField({
   onSwap
 }) {
   return /* @__PURE__ */ jsxs17("div", { children: [
-    /* @__PURE__ */ jsx19("label", { className: "mb-1 block text-xs font-medium", children: "Direction" }),
+    /* @__PURE__ */ jsx20("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(
+      /* @__PURE__ */ jsx20("span", { className: "font-medium", children: source }),
+      /* @__PURE__ */ jsx20(ArrowRight, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx20("span", { className: "font-medium", children: target }),
+      canSwap && /* @__PURE__ */ jsx20(
         Button6,
         {
           variant: "ghost",
@@ -5386,8 +5477,8 @@ function CardinalityField({
   onChange
 }) {
   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(
+    /* @__PURE__ */ jsx20("label", { className: "mb-1 block text-xs font-medium", children: "Cardinality" }),
+    /* @__PURE__ */ jsx20("div", { className: "flex gap-2", children: CARDINALITIES.map((c) => /* @__PURE__ */ jsx20(
       Button6,
       {
         variant: c === cardinality ? "default" : "outline",
@@ -5427,13 +5518,13 @@ function RelationFormSheet({
     });
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsx19(Sheet2, { open, onOpenChange, children: /* @__PURE__ */ jsxs17(SheetContent2, { children: [
+  return /* @__PURE__ */ jsx20(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__ */ jsx20(SheetTitle2, { children: isEdit ? "Edit relation" : "Create relation" }),
+      /* @__PURE__ */ jsx20(SheetDescription2, { children: "A relation is stored on the source node type." })
     ] }),
     /* @__PURE__ */ jsxs17(SheetBody2, { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         RelationTypeField,
         {
           relType,
@@ -5442,7 +5533,7 @@ function RelationFormSheet({
           edgeTypeMode
         }
       ),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         DirectionField,
         {
           source,
@@ -5451,7 +5542,7 @@ function RelationFormSheet({
           onSwap: () => setSwapped((s) => !s)
         }
       ),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         CardinalityField,
         {
           cardinality,
@@ -5459,8 +5550,8 @@ function RelationFormSheet({
         }
       ),
       /* @__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" })
+        /* @__PURE__ */ jsx20(Button6, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx20(Button6, { disabled: !canSave, onClick: handleSave, children: isEdit ? "Save" : "Create relation" })
       ] })
     ] })
   ] }) });
@@ -5478,7 +5569,7 @@ import {
   Button as Button7,
   Input as Input2
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function NodeTypeNameSheet({
   open,
   onOpenChange,
@@ -5493,15 +5584,15 @@ function NodeTypeNameSheet({
   const duplicate = trimmed !== initial && existing.includes(trimmed);
   const canSave = trimmed.length > 0 && !duplicate;
   const typeNoun = noun === "edge" ? "edge type" : "node type";
-  return /* @__PURE__ */ jsx20(Sheet3, { open, onOpenChange, children: /* @__PURE__ */ jsxs18(SheetContent3, { children: [
+  return /* @__PURE__ */ jsx21(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__ */ jsx21(SheetTitle3, { children: isEdit ? `Rename ${typeNoun}` : `Add ${typeNoun}` }),
+      /* @__PURE__ */ jsx21(SheetDescription3, { children: "The label identifies this type and its instances." })
     ] }),
     /* @__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(
+        /* @__PURE__ */ jsx21("label", { className: "mb-1 block text-xs font-medium", children: "Label" }),
+        /* @__PURE__ */ jsx21(
           Input2,
           {
             value: name,
@@ -5510,11 +5601,11 @@ function NodeTypeNameSheet({
             autoFocus: true
           }
         ),
-        duplicate && /* @__PURE__ */ jsx20("p", { className: "mt-1 text-xs text-destructive", children: "A type with this label already exists." })
+        duplicate && /* @__PURE__ */ jsx21("p", { className: "mt-1 text-xs text-destructive", children: "A type with this label already exists." })
       ] }),
       /* @__PURE__ */ jsxs18("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ jsx20(Button7, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(Button7, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx21(
           Button7,
           {
             disabled: !canSave,
@@ -5531,7 +5622,7 @@ function NodeTypeNameSheet({
 }
 
 // src/graph-model/TypeDetailPanel.tsx
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function relationViewOf(view) {
   return {
     relType: view.relType,
@@ -5545,8 +5636,8 @@ function SectionTitle({
   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 })
+    /* @__PURE__ */ jsx22("span", { className: "heading-meta", children }),
+    action && /* @__PURE__ */ jsx22("span", { className: "ml-auto", children: action })
   ] });
 }
 function PropertyRows({
@@ -5557,37 +5648,37 @@ function PropertyRows({
   onDelete
 }) {
   if (properties.length === 0) {
-    return /* @__PURE__ */ jsx21("p", { className: "text-xs text-muted-foreground", children: emptyText });
+    return /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground", children: emptyText });
   }
-  return /* @__PURE__ */ jsx21("div", { className: "rounded-lg border divide-y", children: properties.map((p) => /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx22("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__ */ jsx21("span", { className: "text-sm font-medium min-w-24", children: p.name }),
+        /* @__PURE__ */ jsx22("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__ */ jsx21(Badge2, { badgeColor: "orange", children: "required" }),
+        p.required && /* @__PURE__ */ jsx22(Badge2, { badgeColor: "orange", children: "required" }),
         editable && /* @__PURE__ */ jsxs19("span", { className: "flex gap-1", children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             IconButton,
             {
               label: "Edit property",
               revealOnHover: true,
               onClick: () => onEdit(p),
-              children: /* @__PURE__ */ jsx21(Pencil, {})
+              children: /* @__PURE__ */ jsx22(Pencil, {})
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             IconButton,
             {
               label: "Delete property",
               tone: "destructive",
               revealOnHover: true,
               onClick: () => onDelete(p),
-              children: /* @__PURE__ */ jsx21(Trash2, {})
+              children: /* @__PURE__ */ jsx22(Trash2, {})
             }
           )
         ] })
@@ -5670,7 +5761,7 @@ function TypeDetailPanel({
     if (!onChange) return;
     onChange(updateRelation(model, source, prev.relType, prev.target, input));
   };
-  const propertiesSection = propsHidden ? null : /* @__PURE__ */ jsx21(
+  const propertiesSection = propsHidden ? null : /* @__PURE__ */ jsx22(
     PropertiesSection,
     {
       view,
@@ -5681,7 +5772,7 @@ function TypeDetailPanel({
     }
   );
   return /* @__PURE__ */ jsxs19("div", { children: [
-    view.kind === "node" ? /* @__PURE__ */ jsx21(
+    view.kind === "node" ? /* @__PURE__ */ jsx22(
       NodeDetail,
       {
         view,
@@ -5693,7 +5784,7 @@ function TypeDetailPanel({
         onDeleteRelation: removeRelation,
         children: propertiesSection
       }
-    ) : view.kind === "edge" ? /* @__PURE__ */ jsx21(
+    ) : view.kind === "edge" ? /* @__PURE__ */ jsx22(
       EdgeDetail,
       {
         view,
@@ -5702,7 +5793,7 @@ function TypeDetailPanel({
         onDelete: () => onChange?.(deleteEdgeType(model, view.label)),
         children: propertiesSection
       }
-    ) : /* @__PURE__ */ jsx21(
+    ) : /* @__PURE__ */ jsx22(
       RelationDetail,
       {
         view,
@@ -5712,7 +5803,7 @@ function TypeDetailPanel({
         children: propertiesSection
       }
     ),
-    editable && /* @__PURE__ */ jsx21(
+    editable && /* @__PURE__ */ jsx22(
       DetailSheets,
       {
         model,
@@ -5757,7 +5848,7 @@ function DetailSheets({
 }) {
   const edgeTypeOptions = model.filter(isEdgeType).map(typeLabel);
   return /* @__PURE__ */ jsxs19(Fragment4, { children: [
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       PropertyFormSheet,
       {
         open: sheet.open,
@@ -5768,7 +5859,7 @@ function DetailSheets({
         onSave: onSaveProperty
       }
     ),
-    relSheet && (view.kind === "node" || view.kind === "relation") && /* @__PURE__ */ jsx21(
+    relSheet && (view.kind === "node" || view.kind === "relation") && /* @__PURE__ */ jsx22(
       RelationFormSheet,
       {
         open: !!relSheet,
@@ -5785,7 +5876,7 @@ function DetailSheets({
       },
       `${relSheet.relType}:${relSheet.target}`
     ),
-    (view.kind === "node" || view.kind === "edge") && renameOpen && /* @__PURE__ */ jsx21(
+    (view.kind === "node" || view.kind === "edge") && renameOpen && /* @__PURE__ */ jsx22(
       NodeTypeNameSheet,
       {
         open: renameOpen,
@@ -5807,14 +5898,14 @@ function PropertiesSection({
   onDelete
 }) {
   return /* @__PURE__ */ jsxs19(Fragment4, { children: [
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       SectionTitle,
       {
-        action: editable ? /* @__PURE__ */ jsx21(IconButton, { label: "Add property", onClick: onAdd, children: /* @__PURE__ */ jsx21(Plus, {}) }) : void 0,
+        action: editable ? /* @__PURE__ */ jsx22(IconButton, { label: "Add property", onClick: onAdd, children: /* @__PURE__ */ jsx22(Plus, {}) }) : void 0,
         children: "Properties"
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       PropertyRows,
       {
         properties: view.properties,
@@ -5838,9 +5929,9 @@ function NodeDetail({
 }) {
   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(
+      /* @__PURE__ */ jsx22("span", { className: "text-base font-semibold", children: view.label }),
+      /* @__PURE__ */ jsx22(Badge2, { children: "NODE TYPE" }),
+      nodeTypeEditable && /* @__PURE__ */ jsx22(
         RenameDeleteActions,
         {
           noun: "node type",
@@ -5849,15 +5940,15 @@ function NodeDetail({
         }
       )
     ] }),
-    view.description && /* @__PURE__ */ jsx21("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
+    view.description && /* @__PURE__ */ jsx22("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
     children,
-    /* @__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(
+    /* @__PURE__ */ jsx22(SectionTitle, { children: "Relations" }),
+    view.relations.length === 0 ? /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground", children: "No relations." }) : /* @__PURE__ */ jsx22("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__ */ jsx21("span", { className: "text-sm font-medium min-w-24", children: r.relType }),
+          /* @__PURE__ */ jsx22("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",
             " ",
@@ -5868,23 +5959,23 @@ function NodeDetail({
             cardinalityLabel(r.cardinality)
           ] }),
           relationsEditable && /* @__PURE__ */ jsxs19("span", { className: "flex gap-1", children: [
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               IconButton,
               {
                 label: "Edit relation",
                 revealOnHover: true,
                 onClick: () => onEditRelation(r),
-                children: /* @__PURE__ */ jsx21(Pencil, {})
+                children: /* @__PURE__ */ jsx22(Pencil, {})
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               IconButton,
               {
                 label: "Delete relation",
                 tone: "destructive",
                 revealOnHover: true,
                 onClick: () => onDeleteRelation(r),
-                children: /* @__PURE__ */ jsx21(Trash2, {})
+                children: /* @__PURE__ */ jsx22(Trash2, {})
               }
             )
           ] })
@@ -5897,7 +5988,7 @@ function NodeDetail({
 function EdgeTypeNote({
   children
 }) {
-  return /* @__PURE__ */ jsx21("p", { className: "mt-3 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground", children });
+  return /* @__PURE__ */ jsx22("p", { className: "mt-3 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground", children });
 }
 function RenameDeleteActions({
   noun,
@@ -5906,14 +5997,14 @@ function RenameDeleteActions({
   onDelete
 }) {
   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(
+    /* @__PURE__ */ jsx22(IconButton, { label: `${editVerb} ${noun}`, onClick: onRename, children: /* @__PURE__ */ jsx22(Pencil, {}) }),
+    /* @__PURE__ */ jsx22(
       IconButton,
       {
         label: `Delete ${noun}`,
         tone: "destructive",
         onClick: onDelete,
-        children: /* @__PURE__ */ jsx21(Trash2, {})
+        children: /* @__PURE__ */ jsx22(Trash2, {})
       }
     )
   ] });
@@ -5927,9 +6018,9 @@ function EdgeDetail({
 }) {
   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(
+      /* @__PURE__ */ jsx22("span", { className: "text-base font-semibold", children: view.label }),
+      /* @__PURE__ */ jsx22(Badge2, { children: "EDGE TYPE" }),
+      editable && /* @__PURE__ */ jsx22(
         RenameDeleteActions,
         {
           noun: "edge type",
@@ -5938,11 +6029,11 @@ function EdgeDetail({
         }
       )
     ] }),
-    view.description && /* @__PURE__ */ jsx21("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
+    view.description && /* @__PURE__ */ jsx22("p", { className: "mt-1 text-sm text-muted-foreground", children: view.description }),
     /* @__PURE__ */ jsxs19(EdgeTypeNote, { children: [
       "These properties belong to the",
       " ",
-      /* @__PURE__ */ jsx21("span", { className: "font-medium", children: view.label }),
+      /* @__PURE__ */ jsx22("span", { className: "font-medium", children: view.label }),
       " edge type and are shared by every relation of this type."
     ] }),
     children
@@ -5957,9 +6048,9 @@ function RelationDetail({
 }) {
   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(
+      /* @__PURE__ */ jsx22("span", { className: "text-base font-semibold", children: view.relType }),
+      /* @__PURE__ */ jsx22(Badge2, { children: "RELATION" }),
+      editable && /* @__PURE__ */ jsx22(
         RenameDeleteActions,
         {
           noun: "relation",
@@ -5970,16 +6061,16 @@ function RelationDetail({
       )
     ] }),
     /* @__PURE__ */ jsxs19("p", { className: "mt-1 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx21("span", { className: "font-medium text-foreground", children: view.source }),
+      /* @__PURE__ */ jsx22("span", { className: "font-medium text-foreground", children: view.source }),
       " \u2192 ",
-      /* @__PURE__ */ jsx21("span", { className: "font-medium text-foreground", children: view.target }),
+      /* @__PURE__ */ jsx22("span", { className: "font-medium text-foreground", children: view.target }),
       " \xB7 ",
       cardinalityLabel(view.cardinality)
     ] }),
     /* @__PURE__ */ jsxs19(EdgeTypeNote, { children: [
       "Properties are defined on the",
       " ",
-      /* @__PURE__ */ jsx21("span", { className: "font-medium", children: view.relType }),
+      /* @__PURE__ */ jsx22("span", { className: "font-medium", children: view.relType }),
       " edge type, shared by every relation of this type -- not on this single relation."
     ] }),
     children
@@ -6044,7 +6135,7 @@ function validateCapabilities(input) {
 }
 
 // src/graph-model/ModelActionPanel.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 function nodeTypeLabels(model) {
   return model.filter(isNodeType).map(typeLabel);
 }
@@ -6061,16 +6152,16 @@ function CreateRelationPrompt({
   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 }),
+      /* @__PURE__ */ jsx23("span", { className: "font-medium", children: nodeA }),
       " and ",
-      /* @__PURE__ */ jsx22("span", { className: "font-medium", children: nodeB }),
+      /* @__PURE__ */ jsx23("span", { className: "font-medium", children: nodeB }),
       " selected."
     ] }),
     /* @__PURE__ */ jsxs20(Button8, { size: "sm", className: "mt-3 gap-1.5", onClick: () => setOpen(true), children: [
-      /* @__PURE__ */ jsx22(GitBranchPlus, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx23(GitBranchPlus, { className: "h-4 w-4" }),
       "Create relation"
     ] }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       RelationFormSheet,
       {
         open,
@@ -6099,7 +6190,7 @@ function ModelActionPanel({
   const selectedEdge = useSelection3((s) => s.selectedEdge);
   const live = useLiveGraphData();
   const labelsById = (ids) => ids.map((id) => live.normalized.nodesById[id]?.label_).filter((l) => !!l);
-  const selection = useMemo8(() => {
+  const selection = useMemo9(() => {
     if (selectedEdge) {
       const r = resolveRelationEdge(selectedEdge);
       if (r) {
@@ -6126,7 +6217,7 @@ function ModelActionPanel({
     const schema = findType(model, l);
     return schema ? isNodeType(schema) : false;
   }) : [];
-  return /* @__PURE__ */ jsx22("div", { className: "h-full overflow-auto p-4", children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23("div", { className: "h-full overflow-auto p-4", children: /* @__PURE__ */ jsx23(
     PanelBody,
     {
       model,
@@ -6149,7 +6240,7 @@ function PanelBody({
   twoLabels
 }) {
   if (selection) {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       TypeDetailPanel,
       {
         model,
@@ -6163,7 +6254,7 @@ function PanelBody({
   }
   const canEdit = !readOnly && !!onChange;
   if (twoLabels.length === 2 && canEdit && caps.relations === "edit") {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       CreateRelationPrompt,
       {
         nodeA: twoLabels[0],
@@ -6175,7 +6266,7 @@ function PanelBody({
     );
   }
   return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    canEdit && /* @__PURE__ */ jsx22(
+    canEdit && /* @__PURE__ */ jsx23(
       AddTypeToolbar,
       {
         model,
@@ -6184,7 +6275,7 @@ function PanelBody({
         canAddEdge: caps.edgeTypes === "edit"
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       Overview_default,
       {
         nodeBuckets: [
@@ -6205,7 +6296,7 @@ function AddTypeIconButton({
 }) {
   const [open, setOpen] = useState13(false);
   return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       IconButton2,
       {
         label: tooltip,
@@ -6214,7 +6305,7 @@ function AddTypeIconButton({
         children: icon
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       NodeTypeNameSheet,
       {
         open,
@@ -6235,21 +6326,21 @@ function AddTypeToolbar({
   if (!canAddNode && !canAddEdge) return null;
   const existing = model.map(typeLabel);
   return /* @__PURE__ */ jsxs20("div", { className: "mb-3 flex gap-1.5", children: [
-    canAddNode && /* @__PURE__ */ jsx22(
+    canAddNode && /* @__PURE__ */ jsx23(
       AddTypeIconButton,
       {
         tooltip: "Add node type",
-        icon: /* @__PURE__ */ jsx22(CirclePlus, {}),
+        icon: /* @__PURE__ */ jsx23(CirclePlus, {}),
         noun: "node",
         existing,
         onSave: (name) => onChange(addNodeType(model, name))
       }
     ),
-    canAddEdge && /* @__PURE__ */ jsx22(
+    canAddEdge && /* @__PURE__ */ jsx23(
       AddTypeIconButton,
       {
         tooltip: "Add edge type",
-        icon: /* @__PURE__ */ jsx22(Waypoints, {}),
+        icon: /* @__PURE__ */ jsx23(Waypoints, {}),
         noun: "edge",
         existing,
         onSave: (name) => onChange(addEdgeType(model, name))
@@ -6259,7 +6350,7 @@ function AddTypeToolbar({
 }
 
 // src/graph-model/GraphModelEditor.tsx
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function createEditorStores() {
   const graphFilter = createGraphFilterStore();
   const graphData = createGraphDataStore();
@@ -6334,10 +6425,10 @@ function GraphModelEditor({
     window.addEventListener("pointermove", move);
     window.addEventListener("pointerup", up);
   }, []);
-  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, {}) }),
+  return /* @__PURE__ */ jsx24(GraphStoresContext.Provider, { value: stores, children: /* @__PURE__ */ jsx24(GraphRendererProvider, { defaultRenderer, children: /* @__PURE__ */ jsxs21("div", { ref: rowRef, className: "flex w-full h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx24("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx24(GraphVisualizer_default, {}) }),
     !hideActionPanel && /* @__PURE__ */ jsxs21(Fragment6, { children: [
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         ResizeHandle,
         {
           orientation: "vertical",
@@ -6348,12 +6439,12 @@ function GraphModelEditor({
           onDoubleClick: () => setPanelWidth(380)
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx24(
         "div",
         {
           style: { width: panelWidth },
           className: "shrink-0 border-l overflow-hidden bg-card",
-          children: /* @__PURE__ */ jsx23(
+          children: /* @__PURE__ */ jsx24(
             ModelActionPanel,
             {
               model: value,
@@ -6517,7 +6608,7 @@ function enrichSchemaWithRelations(baseSchema, relations) {
 }
 
 // src/graph-edit/GraphEditToolbar.tsx
-import { useCallback as useCallback12, useMemo as useMemo11, useState as useState18 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo12, 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";
 
@@ -6525,7 +6616,7 @@ import { Plus as Plus3, Edit, Link, Trash2 as Trash23 } from "lucide-react";
 import {
   useCallback as useCallback9,
   useEffect as useEffect7,
-  useMemo as useMemo9,
+  useMemo as useMemo10,
   useRef as useRef8,
   useState as useState15
 } from "react";
@@ -6544,7 +6635,7 @@ import {
   JsonSchemaFormRenderer as JsonSchemaFormRenderer2
 } from "@petrarca/sonnet-forms";
 import { errorLog as errorLog4 } from "@petrarca/sonnet-core";
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_RESOLVED = {
   schema: null,
   uiSchema: {},
@@ -6656,11 +6747,11 @@ function LabelField({
 }) {
   if (isEdit) {
     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 })
+      /* @__PURE__ */ jsx25("span", { className: "heading-meta block", children: "Label" }),
+      /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: selectedLabel })
     ] });
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     FormSelect2,
     {
       label: "Label",
@@ -6695,7 +6786,7 @@ function NodeForm({
   onSave,
   onCancel
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     JsonSchemaFormRenderer2,
     {
       schema,
@@ -6731,11 +6822,11 @@ function NodeFormSheetBody({
 }) {
   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__ */ jsx25(SheetTitle4, { children: isEdit ? "Edit node" : "Add node" }),
+      /* @__PURE__ */ jsx25(SheetDescription4, { children: isEdit ? "Edit this node's properties and relations." : "Create a node and (optionally) its relations." })
     ] }),
     /* @__PURE__ */ jsxs22(SheetBody4, { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25(
         LabelField,
         {
           isEdit,
@@ -6744,7 +6835,7 @@ function NodeFormSheetBody({
           onSelect: onSelectLabel
         }
       ),
-      schema && /* @__PURE__ */ jsx24(
+      schema && /* @__PURE__ */ jsx25(
         NodeForm,
         {
           formKey,
@@ -6757,7 +6848,7 @@ function NodeFormSheetBody({
           onCancel
         }
       ),
-      !isEdit && /* @__PURE__ */ jsx24(
+      !isEdit && /* @__PURE__ */ jsx25(
         FormCheckbox,
         {
           label: "Create another node",
@@ -6765,7 +6856,7 @@ function NodeFormSheetBody({
           onChange: (c) => onKeepOpenChange(c === true)
         }
       ),
-      error && /* @__PURE__ */ jsx24(Alert2, { variant: "destructive", children: error })
+      error && /* @__PURE__ */ jsx25(Alert2, { variant: "destructive", children: error })
     ] })
   ] });
 }
@@ -6800,7 +6891,7 @@ function NodeFormSheet({
     node
   );
   const existingData = useExistingFormData(port, node, relationTypes);
-  const formData = useMemo9(() => existingData ?? {}, [existingData]);
+  const formData = useMemo10(() => existingData ?? {}, [existingData]);
   const stableOnSaved = useStableRef(onSaved);
   const stableOnOpenChange = useStableRef(onOpenChange);
   const handleSave = useCallback9(
@@ -6836,7 +6927,7 @@ function NodeFormSheet({
       stableOnOpenChange
     ]
   );
-  return /* @__PURE__ */ jsx24(Sheet4, { open, onOpenChange, children: /* @__PURE__ */ jsx24(SheetContent4, { children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(Sheet4, { open, onOpenChange, children: /* @__PURE__ */ jsx25(SheetContent4, { children: /* @__PURE__ */ jsx25(
     NodeFormSheetBody,
     {
       isEdit,
@@ -6893,7 +6984,7 @@ async function saveNode({
 }
 
 // src/graph-edit/EdgeFormSheet.tsx
-import { useCallback as useCallback10, useEffect as useEffect8, useMemo as useMemo10, useState as useState16 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect8, useMemo as useMemo11, useState as useState16 } from "react";
 import {
   Sheet as Sheet5,
   SheetContent as SheetContent5,
@@ -6916,7 +7007,7 @@ import {
   JsonSchemaFormRenderer as JsonSchemaFormRenderer3
 } from "@petrarca/sonnet-forms";
 import { errorLog as errorLog5 } from "@petrarca/sonnet-core";
-import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function usePairState(port, schemaProvider, open, nodeAId, nodeALabel, nodeBId, nodeBLabel, reloadKey) {
   const [active, setActive] = useState16([]);
   const [available, setAvailable] = useState16([]);
@@ -6986,7 +7077,7 @@ var EMPTY_EDGE_SCHEMA = {
 };
 function useEdgeSchema(schemaProvider, draft) {
   const [schema, setSchema] = useState16(null);
-  const label = useMemo10(() => draftLabel(draft), [draft]);
+  const label = useMemo11(() => draftLabel(draft), [draft]);
   useEffect8(() => {
     let cancelled = false;
     if (!label) {
@@ -7008,7 +7099,7 @@ function useEdgeSchema(schemaProvider, draft) {
 }
 function useEditableEdgeTypes(schemaProvider, active) {
   const [editable, setEditable] = useState16({});
-  const labelsKey = useMemo10(
+  const labelsKey = useMemo11(
     () => Array.from(new Set(active.map((e) => e.label_))).sort().join("\0"),
     [active]
   );
@@ -7041,7 +7132,7 @@ function useEditableEdgeTypes(schemaProvider, active) {
 function SectionTitle2({
   children
 }) {
-  return /* @__PURE__ */ jsx25("div", { className: "mb-2", children: /* @__PURE__ */ jsx25("span", { className: "heading-meta", children }) });
+  return /* @__PURE__ */ jsx26("div", { className: "mb-2", children: /* @__PURE__ */ jsx26("span", { className: "heading-meta", children }) });
 }
 function EdgeRow({
   label,
@@ -7050,18 +7141,18 @@ function EdgeRow({
   onAdd
 }) {
   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__ */ jsx26("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(
+      onAdd && /* @__PURE__ */ jsx26(IconButton3, { label: "Create edge", revealOnHover: true, onClick: onAdd, children: /* @__PURE__ */ jsx26(Plus2, {}) }),
+      onEdit && /* @__PURE__ */ jsx26(IconButton3, { label: "Edit edge", revealOnHover: true, onClick: onEdit, children: /* @__PURE__ */ jsx26(Pencil2, {}) }),
+      onDelete && /* @__PURE__ */ jsx26(
         IconButton3,
         {
           label: "Delete edge",
           tone: "destructive",
           revealOnHover: true,
           onClick: onDelete,
-          children: /* @__PURE__ */ jsx25(Trash22, {})
+          children: /* @__PURE__ */ jsx26(Trash22, {})
         }
       )
     ] })
@@ -7098,8 +7189,8 @@ function PairLists({
       "."
     ] }),
     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(
+      /* @__PURE__ */ jsx26(SectionTitle2, { children: "Active edges" }),
+      /* @__PURE__ */ jsx26("div", { className: "rounded-lg border divide-y", children: active.map((edge) => /* @__PURE__ */ jsx26(
         EdgeRow,
         {
           label: edge.label_,
@@ -7110,8 +7201,8 @@ function PairLists({
       )) })
     ] }),
     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(
+      /* @__PURE__ */ jsx26(SectionTitle2, { children: "Available edges" }),
+      /* @__PURE__ */ jsx26("div", { className: "rounded-lg border divide-y", children: available.map((entry) => /* @__PURE__ */ jsx26(
         EdgeRow,
         {
           label: rowLabel(entry),
@@ -7137,7 +7228,7 @@ function DraftForm({
       " ",
       label
     ] }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       JsonSchemaFormRenderer3,
       {
         schema,
@@ -7242,16 +7333,16 @@ function EdgeFormSheet({
   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__ */ jsx26(SheetTitle5, { children: "Edges" }),
+        /* @__PURE__ */ jsx26(SheetDescription5, { children: "Manage the edges between the two selected nodes." })
       ] }),
       /* @__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) })
+          /* @__PURE__ */ jsx26("span", { className: "font-medium", children: extractDisplayLabel(nodeA) }),
+          /* @__PURE__ */ jsx26(ArrowRight2, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx26("span", { className: "font-medium", children: extractDisplayLabel(nodeB) })
         ] }),
-        !draft && /* @__PURE__ */ jsx25(
+        !draft && /* @__PURE__ */ jsx26(
           PairLists,
           {
             nodeALabel: nodeA.label_,
@@ -7265,7 +7356,7 @@ function EdgeFormSheet({
             onCreate: (entry) => setDraft({ mode: "create", entry })
           }
         ),
-        draft && schema && /* @__PURE__ */ jsx25(
+        draft && schema && /* @__PURE__ */ jsx26(
           DraftForm,
           {
             draft,
@@ -7275,10 +7366,10 @@ function EdgeFormSheet({
             onCancel: () => setDraft(null)
           }
         ),
-        error && /* @__PURE__ */ jsx25(Alert3, { variant: "destructive", children: error })
+        error && /* @__PURE__ */ jsx26(Alert3, { variant: "destructive", children: error })
       ] })
     ] }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       DeleteEdgeConfirm,
       {
         edge: pendingDelete,
@@ -7293,18 +7384,18 @@ function DeleteEdgeConfirm({
   onCancel,
   onConfirm
 }) {
-  return /* @__PURE__ */ jsx25(Dialog, { open: !!edge, onOpenChange: (o) => !o && onCancel(), children: /* @__PURE__ */ jsxs23(DialogContent, { children: [
+  return /* @__PURE__ */ jsx26(Dialog, { open: !!edge, onOpenChange: (o) => !o && onCancel(), children: /* @__PURE__ */ jsxs23(DialogContent, { children: [
     /* @__PURE__ */ jsxs23(DialogHeader, { children: [
-      /* @__PURE__ */ jsx25(DialogTitle, { children: "Delete edge" }),
+      /* @__PURE__ */ jsx26(DialogTitle, { children: "Delete edge" }),
       /* @__PURE__ */ jsxs23(DialogDescription, { children: [
         "Delete the edge ",
-        /* @__PURE__ */ jsx25("strong", { children: edge?.label_ }),
+        /* @__PURE__ */ jsx26("strong", { children: edge?.label_ }),
         "? This removes the relationship between the two nodes."
       ] })
     ] }),
     /* @__PURE__ */ jsxs23(DialogFooter, { children: [
-      /* @__PURE__ */ jsx25(Button9, { variant: "outline", onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx25(Button9, { variant: "destructive", onClick: onConfirm, children: "Delete" })
+      /* @__PURE__ */ jsx26(Button9, { variant: "outline", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx26(Button9, { variant: "destructive", onClick: onConfirm, children: "Delete" })
     ] })
   ] }) });
 }
@@ -7322,7 +7413,7 @@ import {
   Alert as Alert4
 } from "@petrarca/sonnet-ui";
 import { errorLog as errorLog6 } from "@petrarca/sonnet-core";
-import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var EMPTY_DEPENDENT = {
   inbound: [],
   outbound: [],
@@ -7381,11 +7472,11 @@ function EdgeList({
 }) {
   if (edges.length === 0) return null;
   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) => {
+    /* @__PURE__ */ jsx27("span", { className: "heading-meta block", children: title }),
+    /* @__PURE__ */ jsx27("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__ */ jsx26("li", { children: neighbour ? text : edge.label_ }, edge.id_);
+      return /* @__PURE__ */ jsx27("li", { children: neighbour ? text : edge.label_ }, edge.id_);
     }) })
   ] });
 }
@@ -7412,17 +7503,17 @@ function DeleteNodeDialog({
       }
     })();
   }, [port, node.id_, onDeleted, onOpenChange]);
-  return /* @__PURE__ */ jsx26(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs24(DialogContent2, { children: [
+  return /* @__PURE__ */ jsx27(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs24(DialogContent2, { children: [
     /* @__PURE__ */ jsxs24(DialogHeader2, { children: [
-      /* @__PURE__ */ jsx26(DialogTitle2, { children: "Delete node" }),
+      /* @__PURE__ */ jsx27(DialogTitle2, { children: "Delete node" }),
       /* @__PURE__ */ jsxs24(DialogDescription2, { children: [
         "Delete the node ",
-        /* @__PURE__ */ jsx26("strong", { children: extractDisplayLabel(node) }),
+        /* @__PURE__ */ jsx27("strong", { children: extractDisplayLabel(node) }),
         "?"
       ] })
     ] }),
-    !hasEdges && /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "No connected edges." }),
-    /* @__PURE__ */ jsx26(
+    !hasEdges && /* @__PURE__ */ jsx27("p", { className: "text-sm text-muted-foreground", children: "No connected edges." }),
+    /* @__PURE__ */ jsx27(
       EdgeList,
       {
         title: "Inbound edges",
@@ -7431,7 +7522,7 @@ function DeleteNodeDialog({
         direction: "inbound"
       }
     ),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       EdgeList,
       {
         title: "Outbound edges",
@@ -7440,16 +7531,16 @@ function DeleteNodeDialog({
         direction: "outbound"
       }
     ),
-    error && /* @__PURE__ */ jsx26(Alert4, { variant: "destructive", children: error }),
+    error && /* @__PURE__ */ jsx27(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" })
+      /* @__PURE__ */ jsx27(Button10, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx27(Button10, { variant: "destructive", onClick: handleDelete, children: "Delete" })
     ] })
   ] }) });
 }
 
 // src/graph-edit/GraphEditToolbar.tsx
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function toPerms(caps) {
   const canCreateNode = caps.createNode === "edit";
   const canUpdateNode = caps.updateNode === "edit";
@@ -7469,37 +7560,37 @@ function ToolbarButtons({
   onOpen
 }) {
   return /* @__PURE__ */ jsxs25("div", { className: "flex gap-0.5", children: [
-    perms.canCreateNode && /* @__PURE__ */ jsx27(
+    perms.canCreateNode && /* @__PURE__ */ jsx28(
       IconButton4,
       {
         label: "Add node",
         variant: "outline",
         disabled: count > 0,
         onClick: () => onOpen("node-create"),
-        children: /* @__PURE__ */ jsx27(Plus3, {})
+        children: /* @__PURE__ */ jsx28(Plus3, {})
       }
     ),
-    perms.canUpdateNode && /* @__PURE__ */ jsx27(
+    perms.canUpdateNode && /* @__PURE__ */ jsx28(
       IconButton4,
       {
         label: "Edit node",
         variant: "outline",
         disabled: count !== 1,
         onClick: () => onOpen("node-edit"),
-        children: /* @__PURE__ */ jsx27(Edit, {})
+        children: /* @__PURE__ */ jsx28(Edit, {})
       }
     ),
-    perms.canEditEdges && /* @__PURE__ */ jsx27(
+    perms.canEditEdges && /* @__PURE__ */ jsx28(
       IconButton4,
       {
         label: "Edges",
         variant: "outline",
         disabled: count !== 2,
         onClick: () => onOpen("edge"),
-        children: /* @__PURE__ */ jsx27(Link, {})
+        children: /* @__PURE__ */ jsx28(Link, {})
       }
     ),
-    perms.canDeleteNode && /* @__PURE__ */ jsx27(
+    perms.canDeleteNode && /* @__PURE__ */ jsx28(
       IconButton4,
       {
         label: "Delete node",
@@ -7507,7 +7598,7 @@ function ToolbarButtons({
         tone: "destructive",
         disabled: count !== 1,
         onClick: () => onOpen("delete"),
-        children: /* @__PURE__ */ jsx27(Trash23, {})
+        children: /* @__PURE__ */ jsx28(Trash23, {})
       }
     )
   ] });
@@ -7530,7 +7621,7 @@ function ToolbarDialogs({
     [onClose]
   );
   return /* @__PURE__ */ jsxs25(Fragment8, { children: [
-    (perms.canCreateNode || perms.canUpdateNode) && /* @__PURE__ */ jsx27(
+    (perms.canCreateNode || perms.canUpdateNode) && /* @__PURE__ */ jsx28(
       NodeFormSheet,
       {
         open: dialog === "node-create" || dialog === "node-edit",
@@ -7542,7 +7633,7 @@ function ToolbarDialogs({
         onSaved: onMutated
       }
     ),
-    perms.canEditEdges && firstNode && secondNode && /* @__PURE__ */ jsx27(
+    perms.canEditEdges && firstNode && secondNode && /* @__PURE__ */ jsx28(
       EdgeFormSheet,
       {
         open: dialog === "edge",
@@ -7555,7 +7646,7 @@ function ToolbarDialogs({
         onChanged: onMutated
       }
     ),
-    perms.canDeleteNode && firstNode && /* @__PURE__ */ jsx27(
+    perms.canDeleteNode && firstNode && /* @__PURE__ */ jsx28(
       DeleteNodeDialog,
       {
         open: dialog === "delete",
@@ -7581,18 +7672,18 @@ function GraphEditToolbar({
   );
   const live = useLiveGraphData();
   const [dialog, setDialog] = useState18(null);
-  const perms = useMemo11(
+  const perms = useMemo12(
     () => toPerms(resolveGraphCapabilities(capabilities, readOnly)),
     [capabilities, readOnly]
   );
-  const selectedNodes = useMemo11(
+  const selectedNodes = useMemo12(
     () => selectedNodeIds.map((id) => live.normalized.nodesById[id]).filter(Boolean),
     [selectedNodeIds, live.normalized]
   );
   const stableOnMutated = useStableRef(onMutated);
   if (!perms.anyEditable) return null;
   return /* @__PURE__ */ jsxs25(Fragment8, { children: [
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       ToolbarButtons,
       {
         perms,
@@ -7600,7 +7691,7 @@ function GraphEditToolbar({
         onOpen: setDialog
       }
     ),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       ToolbarDialogs,
       {
         perms,
@@ -8086,7 +8177,7 @@ function useFinderState() {
 }
 
 // src/finder/GraphFinder.tsx
-import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 function GraphFinder() {
   const {
     searchMode,
@@ -8108,7 +8199,7 @@ function GraphFinder() {
   };
   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(
+    /* @__PURE__ */ jsx29("div", { className: "mb-3 flex-shrink-0", children: /* @__PURE__ */ jsx29(
       FormSelect3,
       {
         label: "Search Mode",
@@ -8123,7 +8214,7 @@ function GraphFinder() {
       }
     ) }),
     /* @__PURE__ */ jsxs26("div", { className: "mb-4 flex-shrink-0 space-y-3", children: [
-      (searchMode === "expression" || both) && /* @__PURE__ */ jsx28(
+      (searchMode === "expression" || both) && /* @__PURE__ */ jsx29(
         ExpressionInput,
         {
           value: expressionQuery,
@@ -8132,7 +8223,7 @@ function GraphFinder() {
           both
         }
       ),
-      (searchMode === "fulltext" || both) && /* @__PURE__ */ jsx28(
+      (searchMode === "fulltext" || both) && /* @__PURE__ */ jsx29(
         FullTextInput,
         {
           value: fulltextQuery,
@@ -8146,10 +8237,10 @@ function GraphFinder() {
       )
     ] }),
     error && /* @__PURE__ */ jsxs26(Alert5, { variant: "destructive", className: "mb-4 flex-shrink-0", children: [
-      /* @__PURE__ */ jsx28(AlertTitle, { children: "Query Error" }),
-      /* @__PURE__ */ jsx28(AlertDescription, { children: error })
+      /* @__PURE__ */ jsx29(AlertTitle, { children: "Query Error" }),
+      /* @__PURE__ */ jsx29(AlertDescription, { children: error })
     ] }),
-    hasSearched && !error && /* @__PURE__ */ jsx28(ResultsPanel, { results, searchInfo })
+    hasSearched && !error && /* @__PURE__ */ jsx29(ResultsPanel, { results, searchInfo })
   ] });
 }
 function ExpressionInput({
@@ -8159,8 +8250,8 @@ function ExpressionInput({
   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(
+    both && /* @__PURE__ */ jsx29("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Expression filter (applied first):" }),
+    /* @__PURE__ */ jsx29(
       FormTextarea,
       {
         placeholder: 'e.g., Person | filter name == "John"',
@@ -8171,7 +8262,7 @@ function ExpressionInput({
         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." })
+    !both && /* @__PURE__ */ jsx29("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({
@@ -8184,8 +8275,8 @@ function FullTextInput({
   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(
+    both && /* @__PURE__ */ jsx29("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Full-text search (on filtered results):" }),
+    /* @__PURE__ */ jsx29(
       FormTextarea,
       {
         placeholder: "e.g., software engineer machine learning",
@@ -8194,7 +8285,7 @@ function FullTextInput({
         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 }) }) }),
+        rightSection: /* @__PURE__ */ jsx29(SimpleTooltip5, { label: "Search", children: /* @__PURE__ */ jsx29(Button11, { variant: "ghost", size: "icon", onClick: onSearch, children: /* @__PURE__ */ jsx29(Search, { size: 16 }) }) }),
         rightSectionWidth: 48
       }
     ),
@@ -8217,9 +8308,9 @@ function ResultsPanel({
         " ",
         results.length === 1 ? "item" : "items"
       ] }),
-      searchInfo && /* @__PURE__ */ jsx28("div", { className: "text-xs text-muted-foreground mt-1", children: searchInfo })
+      searchInfo && /* @__PURE__ */ jsx29("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))) })
+    results.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "text-sm text-muted-foreground italic", children: "No results found" }) : /* @__PURE__ */ jsx29("div", { className: "space-y-2 overflow-y-auto flex-1", children: results.map((item, index) => /* @__PURE__ */ jsx29(ResultItem, { item }, resultKey(item, index))) })
   ] });
 }
 function resultKey(item, index) {
@@ -8232,7 +8323,7 @@ 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) }) });
+    return /* @__PURE__ */ jsx29("div", { className: "p-3 bg-muted/40 rounded border border-border", children: /* @__PURE__ */ jsx29("div", { className: "text-sm font-medium", children: String(item) }) });
   }
   const isNodeItem = isNodeRow(item);
   const isEdgeItem = isEdgeRow(item);
@@ -8241,7 +8332,7 @@ function ResultItem({ item }) {
     if (!isGraphElement) return;
     requestFocus(String(item.id_), isNodeItem ? "node" : "edge", shouldSelect);
   };
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       className: `p-3 bg-background rounded border border-border transition-colors ${isGraphElement ? "hover:border-primary hover:bg-accent cursor-pointer" : ""}`,
@@ -8251,18 +8342,18 @@ function ResultItem({ item }) {
       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 })
+            /* @__PURE__ */ jsx29("span", { className: "text-xs font-semibold px-2 py-0.5 bg-accent text-accent-foreground rounded", children: item.label_ }),
+            /* @__PURE__ */ jsx29("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__ */ jsx29("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__ */ jsx29("span", { className: "text-sm font-medium", children: "Object" })
         ] }),
         isGraphElement && /* @__PURE__ */ jsxs26("span", { className: "text-xs text-muted-foreground", children: [
           "ID: ",
@@ -8272,19 +8363,1091 @@ function ResultItem({ item }) {
     }
   );
 }
+
+// src/tabular/TabularVisualizer.tsx
+import { useCallback as useCallback13, useMemo as useMemo16, useState as useState22 } from "react";
+
+// src/tabular/cellContext.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var TabularCellContext = createContext3({});
+function useTabularCellContext() {
+  return useContext3(TabularCellContext);
+}
+
+// src/tabular/columns.ts
+function isRecordRow(row) {
+  return typeof row === "object" && row !== null && !Array.isArray(row);
+}
+function resolveColumnNames(colNames, columnCount) {
+  const headers = namesFromColNames(colNames);
+  while (headers.length < columnCount) {
+    headers.push(`column_${headers.length + 1}`);
+  }
+  return headers;
+}
+function namesFromColNames(colNames) {
+  if (!colNames) return [];
+  const entries = Object.entries(colNames);
+  const allNumeric = entries.every(([key]) => !isNaN(parseInt(key, 10)));
+  if (allNumeric) {
+    entries.sort((a, b) => parseInt(a[0], 10) - parseInt(b[0], 10));
+    return entries.map(([, value]) => value);
+  }
+  return entries.map(([key]) => key);
+}
+function deriveHeaders(rows, colNames) {
+  if (rows.length === 0) return { headers: [], mode: "value" };
+  const recordKeys = /* @__PURE__ */ new Set();
+  let maxArrayLength = 0;
+  for (const row of rows) {
+    if (isRecordRow(row)) {
+      Object.keys(row).forEach((key) => recordKeys.add(key));
+    } else if (Array.isArray(row)) {
+      maxArrayLength = Math.max(maxArrayLength, row.length);
+    }
+  }
+  if (recordKeys.size > 0) {
+    return { headers: Array.from(recordKeys).sort(), mode: "record" };
+  }
+  if (maxArrayLength > 0) {
+    return {
+      headers: resolveColumnNames(colNames, maxArrayLength),
+      mode: "array"
+    };
+  }
+  return { headers: ["value"], mode: "value" };
+}
+function getCellValue(row, header, index, mode) {
+  if (mode === "record" && isRecordRow(row)) return row[header];
+  if (mode === "array" && Array.isArray(row)) return row[index];
+  return row;
+}
+function rowCells(row) {
+  if (Array.isArray(row)) return row;
+  if (isRecordRow(row)) return Object.values(row);
+  return [row];
+}
+
+// src/tabular/ExportMenu.tsx
+import { useMemo as useMemo13 } from "react";
+import { ClipboardCopy, Download } from "lucide-react";
+import { toast as toast5 } from "sonner";
+import {
+  Button as Button12,
+  DropdownMenu as DropdownMenu5,
+  DropdownMenuContent as DropdownMenuContent5,
+  DropdownMenuItem as DropdownMenuItem5,
+  DropdownMenuSeparator as DropdownMenuSeparator4,
+  DropdownMenuTrigger as DropdownMenuTrigger5
+} from "@petrarca/sonnet-ui";
+
+// src/tabular/exportTabular.ts
+function escapeDsvCell(value, delimiter) {
+  if (value === null || value === void 0) return "";
+  const str = typeof value === "object" ? JSON.stringify(value) : String(value);
+  const needsQuoting = str.includes(delimiter) || str.includes('"') || str.includes("\n") || str.includes("\r");
+  return needsQuoting ? `"${str.replace(/"/g, '""')}"` : str;
+}
+function toDsv(rows, headers, mode, delimiter) {
+  const lines = [
+    headers.map((h) => escapeDsvCell(h, delimiter)).join(delimiter)
+  ];
+  for (const row of rows) {
+    const cells = headers.map(
+      (header, index) => escapeDsvCell(getCellValue(row, header, index, mode), delimiter)
+    );
+    lines.push(cells.join(delimiter));
+  }
+  return lines.join("\n");
+}
+function toCsv(rows, headers, mode) {
+  return toDsv(rows, headers, mode, ",");
+}
+function toTsv(rows, headers, mode) {
+  return toDsv(rows, headers, mode, "	");
+}
+function toJson(rows, headers, mode) {
+  const objects = rows.map((row) => {
+    const obj = {};
+    headers.forEach((header, index) => {
+      obj[header] = getCellValue(row, header, index, mode);
+    });
+    return obj;
+  });
+  return JSON.stringify(objects, null, 2);
+}
+function isFlatExportSuitable(rows, headers, mode) {
+  if (rows.length === 0 || headers.length === 0) return false;
+  const sample = rows.slice(0, 3);
+  return sample.some(
+    (row) => headers.some((header, index) => {
+      const value = getCellValue(row, header, index, mode);
+      return value === null || value === void 0 || typeof value !== "object";
+    })
+  );
+}
+function downloadFile(content, filename, mimeType) {
+  const blob = new Blob([content], { type: `${mimeType};charset=utf-8` });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.style.display = "none";
+  document.body.appendChild(anchor);
+  anchor.click();
+  setTimeout(() => {
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(url);
+  }, 100);
+}
+
+// src/tabular/ExportMenu.tsx
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+var CLIPBOARD_ROW_LIMIT = 1e3;
+function copyToClipboard(content, what) {
+  navigator.clipboard.writeText(content).then(() => toast5.success(`Copied as ${what} to clipboard`)).catch(() => toast5.error("Failed to copy to clipboard"));
+}
+function ExportMenu({
+  rows,
+  headerInfo,
+  fileName
+}) {
+  const { headers, mode } = headerInfo;
+  const flat = useMemo13(
+    () => isFlatExportSuitable(rows, headers, mode),
+    [rows, headers, mode]
+  );
+  const clipboard = rows.length <= CLIPBOARD_ROW_LIMIT;
+  return /* @__PURE__ */ jsxs27(DropdownMenu5, { children: [
+    /* @__PURE__ */ jsx30(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs27(Button12, { variant: "outline", size: "sm", className: "gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx30(Download, { className: "h-3.5 w-3.5" }),
+      "Export"
+    ] }) }),
+    /* @__PURE__ */ jsxs27(DropdownMenuContent5, { align: "end", children: [
+      flat && /* @__PURE__ */ jsxs27(Fragment10, { children: [
+        /* @__PURE__ */ jsxs27(
+          DropdownMenuItem5,
+          {
+            onClick: () => downloadFile(
+              toCsv(rows, headers, mode),
+              `${fileName}.csv`,
+              "text/csv"
+            ),
+            children: [
+              /* @__PURE__ */ jsx30(Download, {}),
+              "Download CSV"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs27(
+          DropdownMenuItem5,
+          {
+            onClick: () => downloadFile(
+              toTsv(rows, headers, mode),
+              `${fileName}.tsv`,
+              "text/tab-separated-values"
+            ),
+            children: [
+              /* @__PURE__ */ jsx30(Download, {}),
+              "Download TSV"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs27(
+        DropdownMenuItem5,
+        {
+          onClick: () => downloadFile(
+            toJson(rows, headers, mode),
+            `${fileName}.json`,
+            "application/json"
+          ),
+          children: [
+            /* @__PURE__ */ jsx30(Download, {}),
+            "Download JSON"
+          ]
+        }
+      ),
+      clipboard && /* @__PURE__ */ jsxs27(Fragment10, { children: [
+        /* @__PURE__ */ jsx30(DropdownMenuSeparator4, {}),
+        flat && /* @__PURE__ */ jsxs27(
+          DropdownMenuItem5,
+          {
+            onClick: () => copyToClipboard(toTsv(rows, headers, mode), "TSV"),
+            children: [
+              /* @__PURE__ */ jsx30(ClipboardCopy, {}),
+              "Copy as TSV"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs27(
+          DropdownMenuItem5,
+          {
+            onClick: () => copyToClipboard(toJson(rows, headers, mode), "JSON"),
+            children: [
+              /* @__PURE__ */ jsx30(ClipboardCopy, {}),
+              "Copy as JSON"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/tabular/GraphInspector.tsx
+import { useMemo as useMemo14 } from "react";
+import { Copy as Copy2 } from "lucide-react";
+import { toast as toast6 } from "sonner";
+import {
+  Button as Button13,
+  JsonTree,
+  PropertyList as PropertyList3,
+  ScrollArea,
+  Sheet as Sheet6,
+  SheetBody as SheetBody6,
+  SheetContent as SheetContent6,
+  SheetDescription as SheetDescription6,
+  SheetHeader as SheetHeader6,
+  SheetTitle as SheetTitle6,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@petrarca/sonnet-ui";
+
+// src/tabular/graphCell.ts
+var CAPTION_PRIORITY = [
+  "name",
+  "title",
+  "label",
+  "displayName",
+  "symbol",
+  "id",
+  "code"
+];
+function asGraphCell(value) {
+  if (!value || typeof value !== "object") return null;
+  const obj = value;
+  if (obj.node && typeof obj.node === "object") {
+    return { kind: "node", data: obj.node };
+  }
+  if (obj.edge && typeof obj.edge === "object") {
+    return { kind: "edge", data: obj.edge };
+  }
+  return null;
+}
+function captionFor(cell, labelDisplayMap) {
+  const { data } = cell;
+  const config = labelDisplayMap?.[data.label_];
+  if (config) {
+    const resolved = extractDisplayLabel(data, config);
+    if (resolved && resolved !== data.label_) return resolved;
+  }
+  const props = data.properties_ ?? {};
+  const key = CAPTION_PRIORITY.find((k) => props[k] != null && props[k] !== "");
+  if (key) return String(props[key]);
+  return data.id_ != null ? `${data.label_} #${data.id_}` : data.label_;
+}
+function propertyCount(cell) {
+  return Object.keys(cell.data.properties_ ?? {}).length;
+}
+function colorForLabel(label, palette) {
+  if (!palette) return "hsl(var(--muted-foreground))";
+  return palette[label] ?? palette.neutral ?? "hsl(var(--muted-foreground))";
+}
+
+// src/tabular/GraphInspector.tsx
+import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
+function copy(text, what) {
+  navigator.clipboard.writeText(text).then(() => toast6.success(`Copied ${what}`)).catch(() => toast6.error("Failed to copy"));
+}
+function InspectorTitle({
+  cell,
+  color
+}) {
+  return /* @__PURE__ */ jsxs28(SheetTitle6, { className: "flex items-center gap-2 text-base", children: [
+    cell.kind === "node" ? /* @__PURE__ */ jsx31(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "h-3 w-3 shrink-0 rounded-full",
+        style: { backgroundColor: color }
+      }
+    ) : /* @__PURE__ */ jsx31("span", { "aria-hidden": "true", className: "text-sm", style: { color }, children: "\u2192" }),
+    /* @__PURE__ */ jsx31("span", { className: "font-semibold", children: cell.data.label_ }),
+    cell.data.id_ != null && /* @__PURE__ */ jsxs28("span", { className: "text-xs font-normal text-muted-foreground", children: [
+      "#",
+      cell.data.id_
+    ] })
+  ] });
+}
+function InspectorBody({ cell }) {
+  return /* @__PURE__ */ jsx31(SheetBody6, { className: "flex-1 min-h-0 p-0", children: /* @__PURE__ */ jsxs28(Tabs, { defaultValue: "properties", className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs28(TabsList, { className: "mx-6", children: [
+      /* @__PURE__ */ jsx31(TabsTrigger, { value: "properties", children: "Properties" }),
+      /* @__PURE__ */ jsx31(TabsTrigger, { value: "json", children: "JSON" })
+    ] }),
+    /* @__PURE__ */ jsx31(TabsContent, { value: "properties", className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx31(ScrollArea, { className: "h-full px-6 py-3", children: /* @__PURE__ */ jsx31(PropertyList3, { properties: cell.data.properties_ ?? {} }) }) }),
+    /* @__PURE__ */ jsx31(TabsContent, { value: "json", className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx31(ScrollArea, { className: "h-full px-6 py-3", children: /* @__PURE__ */ jsx31("div", { className: "text-sm font-mono", children: /* @__PURE__ */ jsx31(JsonTree, { data: cell.data }) }) }) })
+  ] }) });
+}
+function GraphInspector({
+  cell,
+  open,
+  onOpenChange,
+  palette,
+  labelDisplayMap
+}) {
+  const caption = useMemo14(
+    () => cell ? captionFor(cell, labelDisplayMap) : "",
+    [cell, labelDisplayMap]
+  );
+  return /* @__PURE__ */ jsx31(Sheet6, { open, onOpenChange, children: /* @__PURE__ */ jsx31(
+    SheetContent6,
+    {
+      side: "right",
+      className: "w-[420px] sm:max-w-[420px] flex flex-col gap-0",
+      children: cell && /* @__PURE__ */ jsxs28(Fragment11, { children: [
+        /* @__PURE__ */ jsxs28(SheetHeader6, { children: [
+          /* @__PURE__ */ jsx31(
+            InspectorTitle,
+            {
+              cell,
+              color: colorForLabel(cell.data.label_, palette)
+            }
+          ),
+          /* @__PURE__ */ jsx31(SheetDescription6, { className: "truncate", children: caption })
+        ] }),
+        /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 px-6 pb-2", children: [
+          /* @__PURE__ */ jsxs28(
+            Button13,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-7 gap-1.5 text-xs",
+              onClick: () => copy(JSON.stringify(cell.data, null, 2), "as JSON"),
+              children: [
+                /* @__PURE__ */ jsx31(Copy2, { className: "h-3 w-3" }),
+                "Copy JSON"
+              ]
+            }
+          ),
+          cell.data.id_ != null && /* @__PURE__ */ jsxs28(
+            Button13,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-7 gap-1.5 text-xs",
+              onClick: () => copy(String(cell.data.id_), "id"),
+              children: [
+                /* @__PURE__ */ jsx31(Copy2, { className: "h-3 w-3" }),
+                "Copy id"
+              ]
+            }
+          )
+        ] }),
+        cell.kind === "edge" && /* @__PURE__ */ jsxs28("div", { className: "px-6 pb-2 text-xs text-muted-foreground", children: [
+          cell.data.start_id_,
+          " ",
+          /* @__PURE__ */ jsx31("span", { className: "text-foreground", children: "\u2192" }),
+          " ",
+          cell.data.end_id_
+        ] }),
+        /* @__PURE__ */ jsx31(InspectorBody, { cell })
+      ] })
+    }
+  ) });
+}
+
+// src/tabular/PaginationFooter.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button as Button14 } from "@petrarca/sonnet-ui";
+
+// src/tabular/pagination.ts
+function pageLabels(page, rowsOnPage) {
+  const end = page.offset + rowsOnPage;
+  const range = rowsOnPage > 0 ? `${(page.offset + 1).toLocaleString()}\u2013${end.toLocaleString()}` : "0";
+  const total = page.total != null ? page.total.toLocaleString() : `${end.toLocaleString()}+`;
+  return { range, total };
+}
+
+// src/tabular/PaginationFooter.tsx
+import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
+function PageSizeSelect({
+  size,
+  options,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs29("label", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx32("span", { children: "Rows" }),
+    /* @__PURE__ */ jsx32(
+      "select",
+      {
+        className: "rounded border border-border bg-background px-1.5 py-0.5 text-foreground",
+        value: size,
+        onChange: (e) => onChange(Number(e.target.value)),
+        children: options.map((opt) => /* @__PURE__ */ jsx32("option", { value: opt, children: opt }, opt))
+      }
+    )
+  ] });
+}
+function PageNav({
+  pageIndex,
+  hasMore,
+  onPageChange
+}) {
+  return /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx32(
+      Button14,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-7 gap-1 px-2",
+        disabled: pageIndex <= 0,
+        onClick: () => onPageChange(pageIndex - 1),
+        "aria-label": "Previous page",
+        children: /* @__PURE__ */ jsx32(ChevronLeft, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxs29("span", { className: "px-1", children: [
+      "Page ",
+      pageIndex + 1
+    ] }),
+    /* @__PURE__ */ jsx32(
+      Button14,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-7 gap-1 px-2",
+        disabled: !hasMore,
+        onClick: () => onPageChange(pageIndex + 1),
+        "aria-label": "Next page",
+        children: /* @__PURE__ */ jsx32(ChevronRight, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] });
+}
+function PaginationFooter({
+  page,
+  rowsOnPage,
+  controls
+}) {
+  if (!page) return null;
+  const { range, total } = pageLabels(page, rowsOnPage);
+  const {
+    pageIndex,
+    pageSize,
+    pageSizeOptions,
+    onPageChange,
+    onPageSizeChange
+  } = controls;
+  return /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between gap-4 border-t border-border px-3 py-2 text-xs text-muted-foreground shrink-0", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs29("span", { children: [
+        "Showing ",
+        /* @__PURE__ */ jsx32("span", { className: "text-foreground", children: range }),
+        " of",
+        " ",
+        /* @__PURE__ */ jsx32("span", { className: "text-foreground", children: total })
+      ] }),
+      page.truncated && /* @__PURE__ */ jsx32("span", { className: "text-amber-600 dark:text-amber-400", children: "(capped)" })
+    ] }),
+    onPageChange && /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3", children: [
+      pageSizeOptions && onPageSizeChange && /* @__PURE__ */ jsx32(
+        PageSizeSelect,
+        {
+          size: pageSize ?? page.limit,
+          options: pageSizeOptions,
+          onChange: onPageSizeChange
+        }
+      ),
+      /* @__PURE__ */ jsx32(
+        PageNav,
+        {
+          pageIndex,
+          hasMore: page.has_more,
+          onPageChange
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/tabular/JsonCell.tsx
+import React18 from "react";
+import { escapeHtml, formatJsonValue } from "@petrarca/sonnet-core";
+
+// src/tabular/GraphChip.tsx
+import React17, { useMemo as useMemo15 } from "react";
+import { ArrowRight as ArrowRight3 } from "lucide-react";
+import { SimpleTooltip as SimpleTooltip6 } from "@petrarca/sonnet-ui";
+import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+function GraphChipImpl({ cell }) {
+  const { palette, labelDisplayMap, onInspect } = useTabularCellContext();
+  const caption = useMemo15(
+    () => captionFor(cell, labelDisplayMap),
+    [cell, labelDisplayMap]
+  );
+  const extraProps = useMemo15(() => propertyCount(cell), [cell]);
+  const color = colorForLabel(cell.data.label_, palette);
+  const isNode = cell.kind === "node";
+  const idSuffix = cell.data.id_ != null ? ` #${cell.data.id_}` : "";
+  const propsLabel = `${extraProps} ${extraProps === 1 ? "property" : "properties"}`;
+  return /* @__PURE__ */ jsx33(SimpleTooltip6, { label: `${cell.data.label_}${idSuffix} \xB7 ${caption}`, children: /* @__PURE__ */ jsxs30(
+    "button",
+    {
+      type: "button",
+      onClick: () => onInspect?.(cell),
+      "aria-label": `${isNode ? "Node" : "Relationship"} ${cell.data.label_}, ${caption}, ${propsLabel}. Activate to inspect.`,
+      className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-card px-2 py-0.5 text-xs hover:bg-state-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      children: [
+        isNode ? /* @__PURE__ */ jsx33(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "h-2.5 w-2.5 shrink-0 rounded-full",
+            style: { backgroundColor: color }
+          }
+        ) : /* @__PURE__ */ jsx33(
+          ArrowRight3,
+          {
+            "aria-hidden": "true",
+            className: "h-3 w-3 shrink-0",
+            style: { color }
+          }
+        ),
+        /* @__PURE__ */ jsx33("span", { className: "shrink-0 font-semibold text-foreground", children: cell.data.label_ }),
+        /* @__PURE__ */ jsx33("span", { className: "truncate text-muted-foreground", children: caption }),
+        extraProps > 0 && /* @__PURE__ */ jsxs30("span", { className: "shrink-0 text-tertiary-foreground", children: [
+          "+",
+          extraProps
+        ] })
+      ]
+    }
+  ) });
+}
+var GraphChip = React17.memo(GraphChipImpl);
+
+// src/tabular/JsonCell.tsx
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
+function ScalarValue({
+  value
+}) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx34("span", { style: { color: "var(--json-null)" }, children: "null" });
+  }
+  if (typeof value === "string") {
+    return /* @__PURE__ */ jsxs31("span", { style: { color: "var(--json-string)" }, children: [
+      '"',
+      escapeHtml(value),
+      '"'
+    ] });
+  }
+  if (typeof value === "number") {
+    return /* @__PURE__ */ jsx34("span", { style: { color: "var(--json-number)" }, children: value });
+  }
+  return /* @__PURE__ */ jsx34("span", { style: { color: "var(--json-boolean)" }, children: value ? "true" : "false" });
+}
+function JsonRenderer({
+  value,
+  className = "max-w-sm"
+}) {
+  if (value === null || typeof value !== "object") {
+    return /* @__PURE__ */ jsx34(
+      ScalarValue,
+      {
+        value
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      className: `text-sm font-mono whitespace-pre-wrap break-words ${className}`,
+      dangerouslySetInnerHTML: { __html: formatJsonValue(value) }
+    }
+  );
+}
+function JsonCellImpl({ value }) {
+  const graphCell = asGraphCell(value);
+  if (graphCell) return /* @__PURE__ */ jsx34(GraphChip, { cell: graphCell });
+  return /* @__PURE__ */ jsx34(JsonRenderer, { value });
+}
+var JsonCell = React18.memo(JsonCellImpl);
+
+// src/tabular/tableColumns.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+var COLUMN_SIZING = {
+  record: { size: 220, minSize: 140, maxSize: 280 },
+  array: { size: 200, minSize: 140, maxSize: 260 },
+  value: { size: 200, minSize: 140, maxSize: 260 }
+};
+function buildColumns(headerInfo, rowOffset, sortingEnabled) {
+  const { headers, mode } = headerInfo;
+  const sizing = COLUMN_SIZING[mode];
+  const dataColumns = headers.map((header, index) => ({
+    id: header,
+    header,
+    accessorFn: (row) => getCellValue(row, header, index, mode),
+    cell: ({ getValue }) => /* @__PURE__ */ jsx35(JsonCell, { value: getValue() }),
+    enableSorting: sortingEnabled,
+    ...sizing
+  }));
+  return [
+    {
+      id: "__index",
+      header: "#",
+      enableSorting: false,
+      size: 48,
+      minSize: 40,
+      maxSize: 64,
+      cell: ({ row }) => /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground", children: rowOffset + row.index + 1 })
+    },
+    ...dataColumns
+  ];
+}
+
+// src/tabular/VirtualTable.tsx
+import { useRef as useRef10, useState as useState21 } from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+var ROW_HEIGHT = 41;
+var HEADER_PADDING = { index: "px-2 py-2", data: "px-4 py-2" };
+var CELL_PADDING = { index: "px-2 py-3", data: "px-4 py-3" };
+function padding(table, columnId) {
+  return columnId === "__index" ? table.index : table.data;
+}
+function SortIndicator({
+  sorted
+}) {
+  if (sorted === "asc") return /* @__PURE__ */ jsx36("span", { className: "text-muted-foreground", children: "\u25B2" });
+  if (sorted === "desc")
+    return /* @__PURE__ */ jsx36("span", { className: "text-muted-foreground", children: "\u25BC" });
+  return null;
+}
+function HeaderCell({
+  header
+}) {
+  const width = { width: `${header.getSize()}px` };
+  if (header.isPlaceholder)
+    return /* @__PURE__ */ jsx36("th", { className: "border-r border-border", style: width });
+  const sortable = header.column.getCanSort();
+  const sorted = header.column.getIsSorted();
+  const ariaSort = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none";
+  return /* @__PURE__ */ jsx36(
+    "th",
+    {
+      scope: "col",
+      "aria-sort": sortable ? ariaSort : void 0,
+      className: `text-left text-xs font-semibold tracking-wide border-r border-border ${padding(HEADER_PADDING, header.id)} ${sortable ? "cursor-pointer select-none" : ""}`,
+      onClick: sortable ? header.column.getToggleSortingHandler() : void 0,
+      style: width,
+      children: /* @__PURE__ */ jsxs32("span", { className: "inline-flex items-center gap-1", children: [
+        flexRender(header.column.columnDef.header, header.getContext()),
+        /* @__PURE__ */ jsx36(SortIndicator, { sorted })
+      ] })
+    }
+  );
+}
+function SpacerRow({
+  height,
+  colSpan
+}) {
+  if (height <= 0) return null;
+  return /* @__PURE__ */ jsx36("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx36("td", { style: { height: `${height}px` }, colSpan }) });
+}
+function VirtualTable({
+  rows,
+  columns
+}) {
+  const [sorting, setSorting] = useState21([]);
+  const [columnSizing, setColumnSizing] = useState21({});
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { sorting, columnSizing },
+    onSortingChange: setSorting,
+    onColumnSizingChange: setColumnSizing,
+    enableSortingRemoval: true,
+    // 'onEnd' commits the width once, instead of re-rendering cells per pixel.
+    columnResizeMode: "onEnd",
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel()
+  });
+  const tableRows = table.getRowModel().rows;
+  const scrollRef = useRef10(null);
+  const virtualizer = useVirtualizer2({
+    count: tableRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 12
+  });
+  const virtualRows = virtualizer.getVirtualItems();
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingBottom = virtualRows.length > 0 ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+  return /* @__PURE__ */ jsx36("div", { ref: scrollRef, className: "flex-1 overflow-auto px-3 min-h-0", children: /* @__PURE__ */ jsxs32("table", { className: "min-w-full table-fixed border border-border border-collapse text-sm font-mono text-foreground shadow-sm", children: [
+    /* @__PURE__ */ jsx36("thead", { className: "sticky top-0 z-10 bg-muted text-muted-foreground", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx36("tr", { className: "border-b border-border", children: group.headers.map((header) => /* @__PURE__ */ jsx36(HeaderCell, { header }, header.id)) }, group.id)) }),
+    /* @__PURE__ */ jsxs32("tbody", { children: [
+      /* @__PURE__ */ jsx36(SpacerRow, { height: paddingTop, colSpan: columns.length }),
+      virtualRows.map((virtualRow) => {
+        const row = tableRows[virtualRow.index];
+        return /* @__PURE__ */ jsx36(
+          "tr",
+          {
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement,
+            className: "border-b border-border",
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx36(
+              "td",
+              {
+                className: `align-top border-r border-border bg-background ${padding(CELL_PADDING, cell.column.id)}`,
+                style: { width: `${cell.column.getSize()}px` },
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            ))
+          },
+          row.id
+        );
+      }),
+      /* @__PURE__ */ jsx36(SpacerRow, { height: paddingBottom, colSpan: columns.length })
+    ] })
+  ] }) });
+}
+
+// src/tabular/TabularVisualizer.tsx
+import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+function paletteFromRows(rows) {
+  const nodes = [];
+  for (const row of rows) {
+    for (const cell of rowCells(row)) {
+      const gc = asGraphCell(cell);
+      if (gc?.kind === "node") nodes.push({ label_: gc.data.label_ });
+    }
+  }
+  return buildColorPaletteFromNodes(nodes);
+}
+function useInspector() {
+  const [cell, setCell] = useState22(null);
+  const [open, setOpen] = useState22(false);
+  const onInspect = useCallback13((next) => {
+    setCell(next);
+    setOpen(true);
+  }, []);
+  return { cell, open, setOpen, onInspect };
+}
+function TabularVisualizer({
+  result,
+  labelDisplayMap,
+  exportFileName = "query-result",
+  pageIndex = 0,
+  ...controls
+}) {
+  const rows = useMemo16(() => result?.rows ?? [], [result]);
+  const page = result?.page ?? null;
+  const headerInfo = useMemo16(
+    () => deriveHeaders(rows, result?.colNames),
+    [rows, result?.colNames]
+  );
+  const palette = useMemo16(() => paletteFromRows(rows), [rows]);
+  const inspector = useInspector();
+  const { onInspect } = inspector;
+  const cellContext = useMemo16(
+    () => ({ palette, labelDisplayMap, onInspect }),
+    [palette, labelDisplayMap, onInspect]
+  );
+  const rowOffset = page?.offset ?? 0;
+  const columns = useMemo16(
+    () => buildColumns(headerInfo, rowOffset, !page),
+    [headerInfo, rowOffset, page]
+  );
+  if (!result)
+    return /* @__PURE__ */ jsx37(CenteredMessage, { children: "No tabular data available." });
+  if (rows.length === 0)
+    return /* @__PURE__ */ jsx37(CenteredMessage, { children: "Result set is empty." });
+  return /* @__PURE__ */ jsx37(TabularCellContext.Provider, { value: cellContext, children: /* @__PURE__ */ jsxs33("div", { className: "w-full h-full flex flex-col bg-background", children: [
+    /* @__PURE__ */ jsx37("div", { className: "flex justify-end px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsx37(
+      ExportMenu,
+      {
+        rows,
+        headerInfo,
+        fileName: exportFileName
+      }
+    ) }),
+    /* @__PURE__ */ jsx37(VirtualTable, { rows, columns }),
+    /* @__PURE__ */ jsx37(
+      PaginationFooter,
+      {
+        page,
+        rowsOnPage: rows.length,
+        controls: { pageIndex, ...controls }
+      }
+    ),
+    /* @__PURE__ */ jsx37(
+      GraphInspector,
+      {
+        cell: inspector.cell,
+        open: inspector.open,
+        onOpenChange: inspector.setOpen,
+        palette,
+        labelDisplayMap
+      }
+    )
+  ] }) });
+}
+
+// src/tabular/ResultViewTabs.tsx
+import { Tabs as Tabs2, TabsList as TabsList2, TabsTrigger as TabsTrigger2 } from "@petrarca/sonnet-ui";
+import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
+function ResultViewTabs({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx38(Tabs2, { value, onValueChange: (v) => onChange(v), children: /* @__PURE__ */ jsxs34(TabsList2, { children: [
+    /* @__PURE__ */ jsx38(TabsTrigger2, { value: "graph", children: "Graph View" }),
+    /* @__PURE__ */ jsx38(TabsTrigger2, { value: "table", children: "Table View" })
+  ] }) });
+}
+
+// src/tabular/resultView.ts
+import { useState as useState23 } from "react";
+function classifyResult(isGraph, rowCount) {
+  if (isGraph) return "graph";
+  return rowCount > 0 ? "tabular" : "empty";
+}
+function isViewValid(view, kind) {
+  return view === "table" || kind !== "tabular";
+}
+function naturalView(kind) {
+  return kind === "graph" ? "graph" : "table";
+}
+function useResultView(kind, resultKey2, { initialView } = {}) {
+  const [state, setState] = useState23(() => ({
+    key: resultKey2,
+    view: initialView ?? naturalView(kind)
+  }));
+  let view = state.view;
+  if (state.key !== resultKey2) {
+    const firstResult = state.key == null && resultKey2 != null;
+    view = firstResult ? naturalView(kind) : state.view;
+    if (!isViewValid(view, kind)) view = naturalView(kind);
+    setState({ key: resultKey2, view });
+  }
+  const setView = (next) => setState((s) => ({ ...s, view: next }));
+  return [view, setView];
+}
+
+// src/workspace/panes.ts
+function choosePane(view, kind) {
+  if (view === "graph") {
+    return isViewValid("graph", kind) ? "graph" : "graph-unavailable";
+  }
+  return kind === "empty" ? "table-empty" : "table";
+}
+
+// src/workspace/ResultWorkspace.tsx
+import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
+function ResultWorkspace({
+  kind,
+  resultKey: resultKey2,
+  graphPane,
+  tablePane,
+  view: controlledView,
+  onViewChange,
+  initialView
+}) {
+  const [ownView, setOwnView] = useResultView(kind, resultKey2, { initialView });
+  const view = controlledView ?? ownView;
+  const setView = (next) => {
+    if (next === view) return;
+    setOwnView(next);
+    onViewChange?.(next);
+  };
+  const pane = choosePane(view, kind);
+  return (
+    // contain-inline-size: the workspace fills the width it is given and never
+    // asks its parent for more. Without it a wide table (long names, virtualized
+    // so it changes as you scroll) widens any shrink-to-fit ancestor -- e.g. a
+    // scroll area's display:table wrapper -- and pushes the whole page sideways.
+    /* @__PURE__ */ jsxs35("div", { className: "flex flex-col w-full h-full min-h-0 min-w-0 [contain:inline-size]", children: [
+      /* @__PURE__ */ jsx39("div", { className: "shrink-0", children: /* @__PURE__ */ jsx39(ResultViewTabs, { value: view, onChange: setView }) }),
+      /* @__PURE__ */ jsxs35("div", { className: "flex-1 overflow-hidden flex min-h-0", children: [
+        pane === "graph" && graphPane,
+        pane === "graph-unavailable" && /* @__PURE__ */ jsx39(CenteredMessage, { children: "This result cannot be displayed in the graph view." }),
+        pane === "table" && tablePane,
+        pane === "table-empty" && /* @__PURE__ */ jsx39(CenteredMessage, { children: "No results to display." })
+      ] })
+    ] })
+  );
+}
+
+// src/workspace/GraphPane.tsx
+import { ResizeHandle as ResizeHandle2 } from "@petrarca/sonnet-ui";
+
+// src/workspace/usePanelResize.ts
+import { useCallback as useCallback14, useEffect as useEffect12, useRef as useRef11, useState as useState24 } from "react";
+function usePanelResize({
+  defaultWidth,
+  minWidth,
+  maxWidth
+}) {
+  const [width, setWidth] = useState24(defaultWidth);
+  const dragging = useRef11(false);
+  const startX = useRef11(0);
+  const startWidth = useRef11(0);
+  const finish = useCallback14(() => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    document.body.classList.remove("select-none");
+  }, []);
+  useEffect12(() => {
+    const clamp = (v) => Math.min(Math.max(v, minWidth), maxWidth);
+    const onMove = (e) => {
+      if (!dragging.current) return;
+      setWidth(clamp(startWidth.current - (e.clientX - startX.current)));
+    };
+    const onKey = (e) => {
+      if (e.key !== "Escape" || !dragging.current) return;
+      setWidth(startWidth.current);
+      finish();
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", finish);
+    window.addEventListener("pointercancel", finish);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", finish);
+      window.removeEventListener("pointercancel", finish);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [finish, minWidth, maxWidth]);
+  const onPointerDown = useCallback14(
+    (e) => {
+      dragging.current = true;
+      startX.current = e.clientX;
+      startWidth.current = width;
+      document.body.classList.add("select-none");
+    },
+    [width]
+  );
+  const onDoubleClick = useCallback14(
+    () => setWidth(defaultWidth),
+    [defaultWidth]
+  );
+  return { width, onPointerDown, onDoubleClick };
+}
+
+// src/workspace/GraphPane.tsx
+import { Fragment as Fragment12, jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
+var PANEL_DEFAULT_WIDTH = 320;
+var PANEL_MIN_WIDTH = 260;
+var PANEL_MAX_WIDTH = 640;
+function ActionPanelSlot({
+  actions
+}) {
+  const visible = useActionPanelStore((s) => s.state) === "visible";
+  const { width, onPointerDown, onDoubleClick } = usePanelResize({
+    defaultWidth: PANEL_DEFAULT_WIDTH,
+    minWidth: PANEL_MIN_WIDTH,
+    maxWidth: PANEL_MAX_WIDTH
+  });
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs36(Fragment12, { children: [
+    /* @__PURE__ */ jsx40(
+      ResizeHandle2,
+      {
+        orientation: "vertical",
+        "aria-valuenow": width,
+        "aria-valuemin": PANEL_MIN_WIDTH,
+        "aria-valuemax": PANEL_MAX_WIDTH,
+        tabIndex: 0,
+        onPointerDown,
+        onDoubleClick
+      }
+    ),
+    /* @__PURE__ */ jsx40("div", { className: "flex-shrink-0 min-h-0 overflow-hidden", style: { width }, children: /* @__PURE__ */ jsx40(ActionPanel_default, { actions }) })
+  ] });
+}
+function GraphPane({
+  ready = true,
+  loadingLabel = "Preparing graph\u2026",
+  banner,
+  actions,
+  defaultRenderer = "cytoscape",
+  onRendererChange,
+  ...visualizerProps
+}) {
+  return /* @__PURE__ */ jsxs36(
+    GraphRendererProvider,
+    {
+      defaultRenderer,
+      onRendererChange,
+      children: [
+        ready && /* @__PURE__ */ jsx40(GraphA11yList, {}),
+        /* @__PURE__ */ jsxs36("div", { className: "flex-1 flex overflow-hidden min-h-0", children: [
+          !ready && /* @__PURE__ */ jsx40(CenteredMessage, { children: loadingLabel }),
+          ready && /* @__PURE__ */ jsxs36("div", { className: "relative flex-1 min-w-0 overflow-hidden", children: [
+            banner,
+            /* @__PURE__ */ jsx40(GraphVisualizer_default, { ...visualizerProps })
+          ] }),
+          ready && /* @__PURE__ */ jsx40(ActionPanelSlot, { actions })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/workspace/LargeResultBanner.tsx
+import { Info } from "lucide-react";
+import { formatNumber as formatNumber2 } from "@petrarca/sonnet-core";
+import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
+function LargeResultBanner({
+  page
+}) {
+  if (!page || !page.has_more) return null;
+  const returned = page.returned ?? page.limit;
+  const total = page.total != null ? formatNumber2(page.total) : `${formatNumber2(returned)}+`;
+  return /* @__PURE__ */ jsx41("div", { className: "pointer-events-none absolute left-1/2 top-3 z-10 -translate-x-1/2", children: /* @__PURE__ */ jsxs37("div", { className: "pointer-events-auto flex items-center gap-2 rounded-md border border-border bg-card/95 px-3 py-1.5 text-xs text-muted-foreground shadow-sm backdrop-blur", children: [
+    /* @__PURE__ */ jsx41(Info, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
+    /* @__PURE__ */ jsxs37("span", { children: [
+      "Showing first",
+      " ",
+      /* @__PURE__ */ jsx41("span", { className: "text-foreground", children: formatNumber2(returned) }),
+      " of",
+      " ",
+      /* @__PURE__ */ jsx41("span", { className: "text-foreground", children: total }),
+      " results \u2014 refine your query or add filters to focus."
+    ] })
+  ] }) });
+}
 export {
   ActionPanel_default as ActionPanel,
+  CenteredMessage,
   DeleteNodeDialog,
   EMPTY_NORMALIZED,
   EdgeFormSheet,
   EdgeInfoCard_default as EdgeInfoCard,
   GraphA11yList,
+  GraphChip,
   GraphEditToolbar,
   GraphFinder,
+  GraphInspector,
   GraphModelEditor,
+  GraphPane,
   GraphRendererProvider,
   GraphStoresContext,
   GraphVisualizer_default as GraphVisualizer,
+  JsonCell,
+  JsonRenderer,
+  LargeResultBanner,
   ModelActionPanel,
   NodeFormSheet,
   NodeInfoCard_default as NodeInfoCard,
@@ -8295,14 +9458,22 @@ export {
   QueryEditor,
   QueryHistory,
   RelationFormSheet,
+  ResultViewTabs,
+  ResultWorkspace,
+  TabularVisualizer,
   TypeDetailPanel,
   addEdgeType,
   addNodeType,
   addRelation,
+  asGraphCell,
   buildColorPalette,
   buildColorPaletteFromNodes,
   capabilitiesSchema,
+  captionFor,
   cardinalityLabel,
+  choosePane,
+  classifyResult,
+  colorForLabel,
   createActionPanelStore,
   createGraphDataStore,
   createGraphExplorationStore,
@@ -8316,6 +9487,8 @@ export {
   deleteNodeType,
   deleteRelation,
   deleteRelationProperty,
+  deriveHeaders,
+  downloadFile,
   edgeTypeView,
   editableRelations,
   enrichEdge,
@@ -8329,20 +9502,25 @@ export {
   findEdgeType,
   findType,
   flattenGraphData,
+  getCellValue,
   graphCapabilitiesSchema,
   groupEdgesByRelation,
   hasProperties,
   hasRelationFields,
   initializeFormData,
   isEdgeType,
+  isFlatExportSuitable,
   isNodeType,
   isRawGraphNode,
   isRelationField,
+  isViewValid,
   isVisualEdge,
   isVisualNode,
   modelToGraph,
+  naturalView,
   nodeTypeView,
   normalizeGraph,
+  propertyCount,
   reconcileFilter,
   relationFieldName,
   relationTitle,
@@ -8351,15 +9529,19 @@ export {
   renameEdgeType,
   renameNodeType,
   resolveCapabilities,
+  resolveColumnNames,
   resolveGraphCapabilities,
   resolveRelationEdge,
   setEdgeTypeProperty,
   setNodeProperty,
   setRelationProperty,
+  toCsv,
   toCytoscapeEdge,
   toCytoscapeNode,
+  toJson,
   toReagraphEdge,
   toReagraphNode,
+  toTsv,
   typeLabel,
   updateRelation,
   useActionPanelStore,
@@ -8369,6 +9551,7 @@ export {
   useGraphSearch,
   useLiveGraphData,
   useReagraphData,
+  useResultView,
   useStableRef,
   useWorkspaceGraphData,
   useWorkspaceGraphExploration,