@petrarca/sonnet-graph 0.1.6

package/dist/index.js

@@ -0,0 +1,4074 @@
+// src/models/visual-graph.ts
+function isVisualNode(obj) {
+  return typeof obj === "object" && obj !== null && "id_" in obj && "label_" in obj && "properties_" in obj && "visual" in obj && typeof obj.visual === "object" && "displayName" in obj.visual && "color" in obj.visual;
+}
+function isVisualEdge(obj) {
+  return typeof obj === "object" && obj !== null && "id_" in obj && "label_" in obj && "start_id_" in obj && "end_id_" in obj && "visual" in obj && typeof obj.visual === "object" && "color" in obj.visual;
+}
+
+// src/models/graph-types.ts
+function isRawGraphNode(obj) {
+  return "label_" in obj && !("start_id_" in obj) && !("end_id_" in obj);
+}
+
+// src/graph/extractDisplayLabel.ts
+function interpolateTemplate(template, properties) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => {
+    const val = properties[key];
+    return val !== void 0 && val !== null ? String(val) : "";
+  }).replace(/\s+/g, " ").trim();
+}
+function resolveLabel(strategies, fallback) {
+  for (const strategy of strategies) {
+    const result = strategy();
+    if (result) return result;
+  }
+  return fallback;
+}
+function fromTemplate(displayConfig, props) {
+  if (!displayConfig?.labelTemplate || !props) return void 0;
+  return interpolateTemplate(displayConfig.labelTemplate, props) || void 0;
+}
+function fromLabelProperty(displayConfig, props) {
+  if (!displayConfig?.labelProperty || !props?.[displayConfig.labelProperty])
+    return void 0;
+  return String(props[displayConfig.labelProperty]);
+}
+function fromFallbackProperty(displayConfig, props) {
+  if (!displayConfig?.fallbackProperty || !props?.[displayConfig.fallbackProperty])
+    return void 0;
+  return String(props[displayConfig.fallbackProperty]);
+}
+function extractNodeDisplayLabel(node, displayConfig) {
+  const props = node?.properties_;
+  return resolveLabel(
+    [
+      () => fromTemplate(displayConfig, props),
+      () => fromLabelProperty(displayConfig, props),
+      () => fromFallbackProperty(displayConfig, props),
+      () => props?.name ? String(props.name) : void 0,
+      () => {
+        const keys = props ? Object.keys(props) : [];
+        return keys.length > 0 ? String(props[keys[0]]) : void 0;
+      },
+      () => node?.id_ !== void 0 && node.id_ !== null ? `Node #${node.id_}` : void 0
+    ],
+    "Unknown"
+  );
+}
+function extractEdgeDisplayLabel(edge, displayConfig) {
+  const props = edge?.properties_;
+  return resolveLabel(
+    [
+      () => fromTemplate(displayConfig, props),
+      () => fromLabelProperty(displayConfig, props),
+      () => fromFallbackProperty(displayConfig, props),
+      () => edge?.label_ ? edge.label_ : void 0,
+      () => edge?.id_ !== void 0 && edge.id_ !== null ? `Edge #${edge.id_}` : void 0
+    ],
+    "Unknown"
+  );
+}
+function extractDisplayLabel(item, displayConfig) {
+  if (isRawGraphNode(item)) {
+    return extractNodeDisplayLabel(item, displayConfig);
+  } else {
+    return extractEdgeDisplayLabel(item, displayConfig);
+  }
+}
+
+// src/graph/enrichment.ts
+var BASE_COLORS = [
+  "#f94144",
+  "#118ab2",
+  "#f8961e",
+  "#43aa8b",
+  "#f3722c",
+  "#90be6d",
+  "#f9c74f",
+  "#c4bbaf"
+];
+function buildColorPalette(labelCounts) {
+  const palette = {};
+  let i = 0;
+  for (const label of Object.keys(labelCounts)) {
+    palette[label] = BASE_COLORS[i % BASE_COLORS.length];
+    i++;
+  }
+  palette["neutral"] = "#6c757d";
+  palette["faded"] = "#adb5bd";
+  return palette;
+}
+function buildColorPaletteFromNodes(nodes) {
+  const labelCounts = {};
+  for (const n of nodes) {
+    const l = n?.label_;
+    if (l) labelCounts[l] = (labelCounts[l] || 0) + 1;
+  }
+  return buildColorPalette(labelCounts);
+}
+function enrichNode(apiNode, colorPalette, displayConfig) {
+  const displayName = extractDisplayLabel(apiNode, displayConfig);
+  const color = colorPalette[apiNode.label_];
+  return {
+    // Copy core data from API
+    id_: apiNode.id_ ?? 0,
+    // Handle optional id for creation scenarios
+    label_: apiNode.label_,
+    properties_: apiNode.properties_ ?? {},
+    // Add visual enrichment
+    visual: {
+      displayName,
+      // Use color from palette, or fall back to neutral if not found
+      // This ensures every node has a color (no undefined)
+      color: color || colorPalette["neutral"] || "#6c757d",
+      // Size can be added later if needed
+      size: void 0,
+      icon: void 0
+    }
+  };
+}
+function enrichEdge(apiEdge, colorPalette) {
+  return {
+    // Copy core data from API
+    id_: apiEdge.id_ ?? 0,
+    label_: apiEdge.label_,
+    start_id_: apiEdge.start_id_,
+    end_id_: apiEdge.end_id_,
+    properties_: apiEdge.properties_,
+    // Add visual enrichment
+    visual: {
+      // Use neutral color from palette if available, otherwise default
+      color: colorPalette?.["neutral"] ?? "#999999",
+      // Default size of 3
+      size: 3,
+      dashed: void 0
+    }
+  };
+}
+function enrichNodes(apiNodes, colorPalette, labelDisplayMap) {
+  return apiNodes.map(
+    (node) => enrichNode(node, colorPalette, labelDisplayMap?.[node.label_])
+  );
+}
+function enrichEdges(apiEdges, colorPalette) {
+  return apiEdges.map((edge) => enrichEdge(edge, colorPalette));
+}
+
+// src/graph/normalize.ts
+function normalizeGraph(nodes, edges) {
+  const nodesById = {};
+  const edgesById = {};
+  for (const n of nodes) {
+    const key = String(n.id_);
+    nodesById[key] = n;
+  }
+  for (const e of edges) {
+    const key = String(e.id_);
+    edgesById[key] = e;
+  }
+  return {
+    nodesById,
+    edgesById,
+    nodeIds: Object.keys(nodesById),
+    edgeIds: Object.keys(edgesById)
+  };
+}
+var EMPTY_NORMALIZED = {
+  nodesById: {},
+  edgesById: {},
+  nodeIds: [],
+  edgeIds: []
+};
+
+// src/stores/Selection.ts
+import { create } from "zustand";
+import { devLog } from "@petrarca/sonnet-core";
+function createSelectionStore() {
+  return create()((set, get) => ({
+    selectedNodeIds: [],
+    setSelectedNodeIds: (ids) => {
+      const prev = get().selectedNodeIds;
+      if (prev.length === ids.length && prev.every((v, i) => v === ids[i])) {
+        return;
+      }
+      devLog("[SelectionStore] setSelectedNodeIds", { prev, next: ids });
+      set({ selectedNodeIds: ids });
+    },
+    selectedEdge: null,
+    setSelectedEdge: (edge) => {
+      devLog("[SelectionStore] setSelectedEdge", {
+        prev: get().selectedEdge?.id_,
+        next: edge?.id_
+      });
+      set({ selectedEdge: edge });
+    },
+    clear: () => {
+      devLog("[SelectionStore] clear called");
+      set({ selectedNodeIds: [], selectedEdge: null });
+    }
+  }));
+}
+var useSelection = createSelectionStore();
+
+// src/stores/GraphData.ts
+import { create as create2 } from "zustand";
+import { devLog as devLog2 } from "@petrarca/sonnet-core";
+function createGraphDataStore() {
+  return create2()((set, get) => ({
+    nodes: [],
+    edges: [],
+    stats: void 0,
+    values: [],
+    isValueSet: false,
+    queryNodeIds: /* @__PURE__ */ new Set(),
+    expandedNodeIds: /* @__PURE__ */ new Set(),
+    queryEdgeIds: /* @__PURE__ */ new Set(),
+    expandedEdgeIds: /* @__PURE__ */ new Set(),
+    setQueryData: (nodes, edges, stats, values, isValueSet = false) => {
+      const nodeIds = new Set(nodes.map((n) => String(n.id_)));
+      const edgeIds = new Set(edges.map((e) => String(e.id_)));
+      devLog2("[GraphData] setQueryData", {
+        nodes: nodes.length,
+        edges: edges.length
+      });
+      set({
+        nodes,
+        edges,
+        stats,
+        values: values || [],
+        isValueSet,
+        queryNodeIds: nodeIds,
+        queryEdgeIds: edgeIds,
+        expandedNodeIds: /* @__PURE__ */ new Set(),
+        expandedEdgeIds: /* @__PURE__ */ new Set()
+      });
+    },
+    mergeExpandedData: (newNodes, newEdges) => {
+      const state = get();
+      const existingNodesMap = new Map(
+        state.nodes.map((n) => [String(n.id_), n])
+      );
+      const existingEdgesMap = new Map(
+        state.edges.map((e) => [String(e.id_), e])
+      );
+      const newExpandedNodeIds = new Set(state.expandedNodeIds);
+      const newExpandedEdgeIds = new Set(state.expandedEdgeIds);
+      const nodesToAdd = [];
+      for (const node of newNodes) {
+        const id = String(node.id_);
+        if (!existingNodesMap.has(id)) {
+          nodesToAdd.push(node);
+          newExpandedNodeIds.add(id);
+        }
+      }
+      const edgesToAdd = [];
+      for (const edge of newEdges) {
+        const id = String(edge.id_);
+        if (!existingEdgesMap.has(id)) {
+          edgesToAdd.push(edge);
+          newExpandedEdgeIds.add(id);
+        }
+      }
+      devLog2("[GraphData] mergeExpandedData", {
+        newNodes: newNodes.length,
+        newEdges: newEdges.length,
+        addedNodes: nodesToAdd.length,
+        addedEdges: edgesToAdd.length,
+        duplicatesSkipped: {
+          nodes: newNodes.length - nodesToAdd.length,
+          edges: newEdges.length - edgesToAdd.length
+        }
+      });
+      if (nodesToAdd.length > 0 || edgesToAdd.length > 0) {
+        set({
+          nodes: [...state.nodes, ...nodesToAdd],
+          edges: [...state.edges, ...edgesToAdd],
+          expandedNodeIds: newExpandedNodeIds,
+          expandedEdgeIds: newExpandedEdgeIds
+        });
+      } else {
+        devLog2(
+          "[GraphData] mergeExpandedData: No new elements to add (all duplicates)"
+        );
+      }
+    },
+    clear: () => {
+      devLog2("[GraphData] clear");
+      set({
+        nodes: [],
+        edges: [],
+        stats: void 0,
+        values: [],
+        isValueSet: false,
+        queryNodeIds: /* @__PURE__ */ new Set(),
+        expandedNodeIds: /* @__PURE__ */ new Set(),
+        queryEdgeIds: /* @__PURE__ */ new Set(),
+        expandedEdgeIds: /* @__PURE__ */ new Set()
+      });
+    },
+    getStats: () => {
+      const state = get();
+      return {
+        totalNodes: state.nodes.length,
+        totalEdges: state.edges.length,
+        queryNodes: state.queryNodeIds.size,
+        expandedNodes: state.expandedNodeIds.size,
+        queryEdges: state.queryEdgeIds.size,
+        expandedEdges: state.expandedEdgeIds.size
+      };
+    }
+  }));
+}
+var useGraphData = createGraphDataStore();
+
+// src/stores/GraphFilter.ts
+import { create as create3 } from "zustand";
+function calculateNodeLabelUpdate(affectedLabels, currentNodeFilters, allNodesDisabled) {
+  if (affectedLabels.length === 0) return null;
+  if (allNodesDisabled) {
+    return { allLabelsDisabled: false, nodeLabelFilters: affectedLabels };
+  }
+  if (currentNodeFilters.length > 0) {
+    const labelsToAdd = affectedLabels.filter(
+      (l) => !currentNodeFilters.includes(l)
+    );
+    if (labelsToAdd.length > 0) {
+      return { nodeLabelFilters: [...currentNodeFilters, ...labelsToAdd] };
+    }
+  }
+  return null;
+}
+function handleEnableFromAllDisabled(label, getNodeLabelUpdate, set) {
+  const nodeUpdate = getNodeLabelUpdate(label);
+  set({
+    allEdgeLabelsDisabled: false,
+    edgeLabelFilters: [label],
+    ...nodeUpdate
+  });
+}
+function handleFirstFilter(label, allAvailableLabels, set) {
+  const next = allAvailableLabels.filter((l) => l !== label);
+  set({ edgeLabelFilters: next });
+}
+function handleToggleFilter(label, current, exists, getNodeLabelUpdate, set) {
+  const next = exists ? current.filter((l) => l !== label) : [...current, label];
+  if (next.length === 0 && exists) {
+    set({ allEdgeLabelsDisabled: true, edgeLabelFilters: [] });
+    return;
+  }
+  const nodeUpdate = exists ? null : getNodeLabelUpdate(label);
+  set({ edgeLabelFilters: next, ...nodeUpdate });
+}
+function createGraphFilterStore() {
+  return create3()((set, get) => ({
+    nodeLabelFilters: [],
+    allLabelsDisabled: false,
+    edgeLabelFilters: [],
+    allEdgeLabelsDisabled: false,
+    lastDataChangeTime: 0,
+    notifyDataChange: () => set({ lastDataChangeTime: Date.now() }),
+    resetFilters: () => set({
+      nodeLabelFilters: [],
+      allLabelsDisabled: false,
+      edgeLabelFilters: [],
+      allEdgeLabelsDisabled: false
+    }),
+    toggleNodeLabelFilter: (label, allAvailableLabels) => {
+      const wasAllDisabled = get().allLabelsDisabled;
+      if (wasAllDisabled) set({ allLabelsDisabled: false });
+      const current = get().nodeLabelFilters;
+      const exists = current.includes(label);
+      if (wasAllDisabled) {
+        set({ nodeLabelFilters: [label] });
+      } else if (current.length === 0 && !exists && allAvailableLabels && allAvailableLabels.length > 0) {
+        const next = allAvailableLabels.filter((l) => l !== label);
+        set({ nodeLabelFilters: next });
+      } else {
+        const next = exists ? current.filter((l) => l !== label) : [...current, label];
+        if (next.length === 0 && exists) {
+          set({ allLabelsDisabled: true, nodeLabelFilters: [] });
+        } else {
+          set({ nodeLabelFilters: next });
+        }
+      }
+    },
+    clearNodeLabelFilters: () => set({ nodeLabelFilters: [] }),
+    setNodeLabelFilters: (labels) => set({ nodeLabelFilters: labels }),
+    toggleAllLabelsDisabled: () => {
+      const now = !get().allLabelsDisabled;
+      set({ allLabelsDisabled: now, nodeLabelFilters: [] });
+    },
+    toggleEdgeLabelFilter: (label, allAvailableLabels, edgeToNodeLabels) => {
+      const getNodeLabelUpdate = (edgeLabel) => {
+        if (!edgeToNodeLabels) return null;
+        const affectedLabels = edgeToNodeLabels[edgeLabel] || [];
+        return calculateNodeLabelUpdate(
+          affectedLabels,
+          get().nodeLabelFilters,
+          get().allLabelsDisabled
+        );
+      };
+      if (get().allEdgeLabelsDisabled) {
+        handleEnableFromAllDisabled(label, getNodeLabelUpdate, set);
+      } else if (get().edgeLabelFilters.length === 0 && allAvailableLabels && allAvailableLabels.length > 0) {
+        handleFirstFilter(label, allAvailableLabels, set);
+      } else {
+        const current = get().edgeLabelFilters;
+        handleToggleFilter(
+          label,
+          current,
+          current.includes(label),
+          getNodeLabelUpdate,
+          set
+        );
+      }
+    },
+    clearEdgeLabelFilters: () => set({ edgeLabelFilters: [] }),
+    setEdgeLabelFilters: (labels) => set({ edgeLabelFilters: labels }),
+    toggleAllEdgeLabelsDisabled: () => {
+      const now = !get().allEdgeLabelsDisabled;
+      set({ allEdgeLabelsDisabled: now, edgeLabelFilters: [] });
+    }
+  }));
+}
+var useGraphFilter = createGraphFilterStore();
+
+// src/stores/GraphExploration.ts
+import { create as create4 } from "zustand";
+import { devLog as devLog3 } from "@petrarca/sonnet-core";
+function collectReachable(startId, direction, allEdges, includeStart) {
+  const nodes = /* @__PURE__ */ new Set();
+  const edges = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  const traverse = (currentId, isStart) => {
+    if (visited.has(currentId)) return;
+    visited.add(currentId);
+    if (!isStart || includeStart) nodes.add(currentId);
+    for (const edge of allEdges) {
+      const srcId = String(edge.start_id_);
+      const tgtId = String(edge.end_id_);
+      const edgeId = String(edge.id_);
+      if (direction === "in" && tgtId === currentId) {
+        edges.add(edgeId);
+        traverse(srcId, false);
+      } else if (direction === "out" && srcId === currentId) {
+        edges.add(edgeId);
+        traverse(tgtId, false);
+      }
+    }
+  };
+  traverse(startId, true);
+  return { nodes, edges };
+}
+function determineEdgeDirection(endpoints, selectedNodeIds) {
+  const { startNodeId, endNodeId } = endpoints;
+  if (selectedNodeIds.length !== 1) {
+    return { direction: "outgoing", referenceNodeId: startNodeId };
+  }
+  const selected = selectedNodeIds[0];
+  if (selected === startNodeId) {
+    return { direction: "outgoing", referenceNodeId: selected };
+  }
+  if (selected === endNodeId) {
+    return { direction: "incoming", referenceNodeId: selected };
+  }
+  devLog3(
+    "[GraphExploration] focusEdge - selected node not an endpoint, defaulting to outgoing",
+    { selectedNode: selected, startNodeId, endNodeId }
+  );
+  return { direction: "outgoing", referenceNodeId: startNodeId };
+}
+function buildFocusSet(referenceNodeId, direction, edgeLabel, allEdges) {
+  const focusNodeIds = /* @__PURE__ */ new Set([referenceNodeId]);
+  for (const e of allEdges) {
+    if (e.label_ !== edgeLabel) continue;
+    const sourceId = String(e.start_id_);
+    const targetId = String(e.end_id_);
+    if (direction === "outgoing" && sourceId === referenceNodeId) {
+      focusNodeIds.add(targetId);
+    } else if (direction === "incoming" && targetId === referenceNodeId) {
+      focusNodeIds.add(sourceId);
+    }
+  }
+  return focusNodeIds;
+}
+function handleExistingNode(nodeId, nodeIdStr, existingNodes, autoFocus, graphFocusStore) {
+  const existingNode = existingNodes.find((n) => n.id_ === nodeId);
+  if (!existingNode) return false;
+  if (autoFocus) {
+    devLog3("[GraphExploration] Node already in graph, focusing", { nodeId });
+    graphFocusStore.getState().requestFocus(nodeIdStr, "node", false);
+  } else {
+    devLog3("[GraphExploration] Node already in graph, skipping focus", {
+      nodeId
+    });
+  }
+  return true;
+}
+async function fetchAndEnrichNode(nodeId, existingNodes, stores) {
+  devLog3("[GraphExploration] Fetching node from backend", { nodeId });
+  const result = await stores.getNodes([nodeId]);
+  if (result.length === 0) {
+    throw new Error(`Node ${nodeId} not found`);
+  }
+  const colorPalette = buildColorPaletteFromNodes([
+    ...existingNodes,
+    ...result
+  ]);
+  const enrichedNodes = enrichNodes(
+    result,
+    colorPalette,
+    stores.getLabelDisplayMap?.()
+  );
+  devLog3("[GraphExploration] Enriched nodes", {
+    nodeId,
+    enrichedCount: enrichedNodes.length
+  });
+  stores.graphData.getState().mergeExpandedData(enrichedNodes, []);
+  return enrichedNodes;
+}
+function ensureNodeLabelInFilters(enrichedNodes, nodeId, graphFilterStore) {
+  const addedNode = enrichedNodes[0];
+  if (!addedNode) return;
+  const { nodeLabelFilters: currentFilters } = graphFilterStore.getState();
+  const nodeLabel = addedNode.label_;
+  if (currentFilters.length > 0 && !currentFilters.includes(nodeLabel)) {
+    devLog3("[GraphExploration] Adding node label to active filters", {
+      nodeId,
+      nodeLabel,
+      currentFilters
+    });
+    graphFilterStore.getState().setNodeLabelFilters([...currentFilters, nodeLabel]);
+  }
+}
+function createGraphExplorationStore(deps) {
+  const stores = deps;
+  return create4()((set, get) => ({
+    focusedNodeIds: /* @__PURE__ */ new Set(),
+    isFocusMode: false,
+    hiddenElementIds: /* @__PURE__ */ new Set(),
+    expandedNodeIds: /* @__PURE__ */ new Set(),
+    setFocusMode: (nodeIds) => {
+      devLog3("[GraphExploration] setFocusMode", {
+        nodeIds,
+        count: nodeIds.length
+      });
+      set({
+        focusedNodeIds: new Set(nodeIds),
+        isFocusMode: true
+      });
+    },
+    setFocusModeWithNeighborhood: (nodeId) => {
+      const edges = stores.graphData.getState().edges;
+      const connectedNodeIds = /* @__PURE__ */ new Set();
+      const nodeIdStr = String(nodeId);
+      for (const edge of edges) {
+        const sourceId = String(edge.start_id_);
+        const targetId = String(edge.end_id_);
+        if (sourceId === nodeIdStr) {
+          connectedNodeIds.add(targetId);
+        } else if (targetId === nodeIdStr) {
+          connectedNodeIds.add(sourceId);
+        }
+      }
+      const focusNodeIds = [nodeIdStr, ...Array.from(connectedNodeIds)];
+      devLog3("[GraphExploration] setFocusModeWithNeighborhood", {
+        nodeId: nodeIdStr,
+        connectedNodes: connectedNodeIds.size,
+        totalFocused: focusNodeIds.length
+      });
+      set({
+        focusedNodeIds: new Set(focusNodeIds),
+        isFocusMode: true
+      });
+    },
+    clearFocusMode: () => {
+      devLog3("[GraphExploration] clearFocusMode");
+      set({
+        focusedNodeIds: /* @__PURE__ */ new Set(),
+        isFocusMode: false
+      });
+    },
+    hideElements: (elementIds) => {
+      const current = get().hiddenElementIds;
+      const updated = new Set(current);
+      elementIds.forEach((id) => updated.add(id));
+      devLog3("[GraphExploration] hideElements", {
+        newIds: elementIds,
+        totalHidden: updated.size
+      });
+      set({ hiddenElementIds: updated });
+    },
+    showElements: (elementIds) => {
+      const current = get().hiddenElementIds;
+      const updated = new Set(current);
+      elementIds.forEach((id) => updated.delete(id));
+      devLog3("[GraphExploration] showElements", {
+        restoredIds: elementIds,
+        remainingHidden: updated.size
+      });
+      set({ hiddenElementIds: updated });
+    },
+    hideNodeIncoming: (nodeId) => {
+      devLog3("[GraphExploration] hideNodeIncoming - hiding predecessors", {
+        nodeId
+      });
+      const { edges } = stores.graphData.getState();
+      const { nodes: nodesToHide, edges: edgesToHide } = collectReachable(
+        nodeId,
+        "in",
+        edges,
+        false
+      );
+      devLog3("[GraphExploration] hideNodeIncoming - traversal complete", {
+        nodeId,
+        nodesToHide: nodesToHide.size,
+        edgesToHide: edgesToHide.size
+      });
+      const allElementsToHide = [...nodesToHide, ...edgesToHide];
+      if (allElementsToHide.length > 0) {
+        get().hideElements(allElementsToHide);
+      } else {
+        devLog3("[GraphExploration] hideNodeIncoming - no predecessors found");
+      }
+    },
+    hideNodeOutgoing: (nodeId) => {
+      devLog3("[GraphExploration] hideNodeOutgoing - hiding successors", {
+        nodeId
+      });
+      const { edges } = stores.graphData.getState();
+      const { nodes: nodesToHide, edges: edgesToHide } = collectReachable(
+        nodeId,
+        "out",
+        edges,
+        false
+      );
+      devLog3("[GraphExploration] hideNodeOutgoing - traversal complete", {
+        nodeId,
+        nodesToHide: nodesToHide.size,
+        edgesToHide: edgesToHide.size
+      });
+      const allElementsToHide = [...nodesToHide, ...edgesToHide];
+      if (allElementsToHide.length > 0) {
+        get().hideElements(allElementsToHide);
+      } else {
+        devLog3("[GraphExploration] hideNodeOutgoing - no successors found");
+      }
+    },
+    hideEdgeForwardPath: (edgeId) => {
+      devLog3(
+        "[GraphExploration] hideEdgeForwardPath - hiding edge + target + downstream",
+        { edgeId }
+      );
+      const { edges } = stores.graphData.getState();
+      const edge = edges.find((e) => String(e.id_) === edgeId);
+      if (!edge) {
+        devLog3("[GraphExploration] hideEdgeForwardPath - edge not found", {
+          edgeId
+        });
+        return;
+      }
+      const targetNodeId = String(edge.end_id_);
+      get().hideElements([edgeId]);
+      const { nodes: nodesToHide, edges: edgesToHide } = collectReachable(
+        targetNodeId,
+        "out",
+        edges,
+        true
+      );
+      devLog3("[GraphExploration] hideEdgeForwardPath - traversal complete", {
+        edgeId,
+        nodesToHide: nodesToHide.size,
+        edgesToHide: edgesToHide.size
+      });
+      const allElementsToHide = [...nodesToHide, ...edgesToHide];
+      if (allElementsToHide.length > 0) get().hideElements(allElementsToHide);
+    },
+    hideEdgeReversePath: (edgeId) => {
+      devLog3(
+        "[GraphExploration] hideEdgeReversePath - hiding edge + source + upstream",
+        { edgeId }
+      );
+      const { edges } = stores.graphData.getState();
+      const edge = edges.find((e) => String(e.id_) === edgeId);
+      if (!edge) {
+        devLog3("[GraphExploration] hideEdgeReversePath - edge not found", {
+          edgeId
+        });
+        return;
+      }
+      const sourceNodeId = String(edge.start_id_);
+      get().hideElements([edgeId]);
+      const { nodes: nodesToHide, edges: edgesToHide } = collectReachable(
+        sourceNodeId,
+        "in",
+        edges,
+        true
+      );
+      devLog3("[GraphExploration] hideEdgeReversePath - traversal complete", {
+        edgeId,
+        nodesToHide: nodesToHide.size,
+        edgesToHide: edgesToHide.size
+      });
+      const allElementsToHide = [...nodesToHide, ...edgesToHide];
+      if (allElementsToHide.length > 0) get().hideElements(allElementsToHide);
+    },
+    focusOnEdgeType: (edgeId) => {
+      devLog3(
+        "[GraphExploration] focusOnEdgeType - show only edges of this type and connected nodes",
+        { edgeId }
+      );
+      const graphData = stores.graphData.getState();
+      const edge = graphData.edges.find((e) => String(e.id_) === edgeId);
+      if (!edge) {
+        devLog3("[GraphExploration] focusOnEdgeType - edge not found", {
+          edgeId
+        });
+        return;
+      }
+      const edgeLabel = edge.label_;
+      devLog3("[GraphExploration] focusOnEdgeType - filtering by label", {
+        edgeId,
+        edgeLabel
+      });
+      const edgesOfType = graphData.edges.filter((e) => e.label_ === edgeLabel);
+      const connectedNodeIds = /* @__PURE__ */ new Set();
+      const visibleEdgeIds = /* @__PURE__ */ new Set();
+      for (const e of edgesOfType) {
+        connectedNodeIds.add(String(e.start_id_));
+        connectedNodeIds.add(String(e.end_id_));
+        visibleEdgeIds.add(String(e.id_));
+      }
+      const nodesToHide = [];
+      const edgesToHide = [];
+      for (const node of graphData.nodes) {
+        const nodeId = String(node.id_);
+        if (!connectedNodeIds.has(nodeId)) {
+          nodesToHide.push(nodeId);
+        }
+      }
+      for (const e of graphData.edges) {
+        const eId = String(e.id_);
+        if (!visibleEdgeIds.has(eId)) {
+          edgesToHide.push(eId);
+        }
+      }
+      devLog3("[GraphExploration] focusOnEdgeType - hiding elements", {
+        edgeLabel,
+        visibleEdges: visibleEdgeIds.size,
+        visibleNodes: connectedNodeIds.size,
+        hidingNodes: nodesToHide.length,
+        hidingEdges: edgesToHide.length
+      });
+      const allElementsToHide = [...nodesToHide, ...edgesToHide];
+      if (allElementsToHide.length > 0) {
+        get().hideElements(allElementsToHide);
+      }
+    },
+    focusEdge: (edgeId) => {
+      devLog3(
+        "[GraphExploration] focusEdge - unified focus with auto-direction detection",
+        { edgeId }
+      );
+      const graphData = stores.graphData.getState();
+      const selection = stores.selection.getState();
+      const edge = graphData.edges.find((e) => String(e.id_) === edgeId);
+      if (!edge) {
+        devLog3("[GraphExploration] focusEdge - edge not found", { edgeId });
+        return;
+      }
+      const endpoints = {
+        edgeLabel: edge.label_,
+        startNodeId: String(edge.start_id_),
+        endNodeId: String(edge.end_id_)
+      };
+      const { direction, referenceNodeId } = determineEdgeDirection(
+        endpoints,
+        selection.selectedNodeIds
+      );
+      devLog3("[GraphExploration] focusEdge - determined direction", {
+        edgeId,
+        edgeLabel: endpoints.edgeLabel,
+        direction,
+        referenceNodeId,
+        selectionMode: selection.selectedNodeIds.length === 1 ? "single-node" : "traditional"
+      });
+      const focusNodeIds = buildFocusSet(
+        referenceNodeId,
+        direction,
+        endpoints.edgeLabel,
+        graphData.edges
+      );
+      devLog3("[GraphExploration] focusEdge - found nodes", {
+        edgeLabel: endpoints.edgeLabel,
+        direction,
+        referenceNodeId,
+        totalNodes: focusNodeIds.size
+      });
+      set({
+        focusedNodeIds: focusNodeIds,
+        isFocusMode: true
+      });
+    },
+    resetView: () => {
+      devLog3("[GraphExploration] resetView - clearing all exploration state");
+      set({
+        focusedNodeIds: /* @__PURE__ */ new Set(),
+        isFocusMode: false,
+        hiddenElementIds: /* @__PURE__ */ new Set()
+        // Note: We keep expandedNodeIds - those nodes are still in the data
+      });
+    },
+    resetForNewQuery: () => {
+      devLog3(
+        "[GraphExploration] resetForNewQuery - clearing ALL exploration state for new query"
+      );
+      set({
+        focusedNodeIds: /* @__PURE__ */ new Set(),
+        isFocusMode: false,
+        hiddenElementIds: /* @__PURE__ */ new Set(),
+        expandedNodeIds: /* @__PURE__ */ new Set()
+      });
+    },
+    markNodeExpanded: (nodeId) => {
+      const current = get().expandedNodeIds;
+      const updated = new Set(current);
+      updated.add(nodeId);
+      devLog3("[GraphExploration] markNodeExpanded", { nodeId });
+      set({ expandedNodeIds: updated });
+    },
+    isNodeExpanded: (nodeId) => {
+      return get().expandedNodeIds.has(nodeId);
+    },
+    expandNode: async (nodeId) => {
+      devLog3("[GraphExploration] expandNode", { nodeId });
+      try {
+        const result = await stores.expandNode(Number(nodeId));
+        devLog3("[GraphExploration] Expansion API result", {
+          nodeId,
+          newNodes: result.nodes.length,
+          newEdges: result.edges.length
+        });
+        if (result.nodes.length === 0 && result.edges.length === 0) {
+          devLog3("[GraphExploration] No connected nodes found", { nodeId });
+          return;
+        }
+        const existingNodes = stores.graphData.getState().nodes;
+        const colorPalette = buildColorPaletteFromNodes([
+          ...existingNodes,
+          ...result.nodes
+        ]);
+        const enrichedNodes = enrichNodes(
+          result.nodes,
+          colorPalette,
+          stores.getLabelDisplayMap?.()
+        );
+        const enrichedEdges = enrichEdges(result.edges);
+        stores.graphData.getState().mergeExpandedData(enrichedNodes, enrichedEdges);
+        const graphFilterState = stores.graphFilter.getState();
+        const currentFilters = graphFilterState.nodeLabelFilters;
+        if (currentFilters.length > 0 && enrichedNodes.length > 0) {
+          const newLabels = new Set(enrichedNodes.map((n) => n.label_));
+          const labelsToAdd = Array.from(newLabels).filter(
+            (label) => !currentFilters.includes(label)
+          );
+          if (labelsToAdd.length > 0) {
+            devLog3(
+              "[GraphExploration] Adding expanded node labels to active filters",
+              {
+                nodeId,
+                labelsToAdd,
+                currentFilters
+              }
+            );
+            stores.graphFilter.getState().setNodeLabelFilters([...currentFilters, ...labelsToAdd]);
+          }
+        }
+        get().markNodeExpanded(nodeId);
+        const currentState = get();
+        if (currentState.isFocusMode) {
+          const newFocusedIds = new Set(currentState.focusedNodeIds);
+          for (const node of enrichedNodes) {
+            newFocusedIds.add(String(node.id_));
+          }
+          devLog3("[GraphExploration] Adding expanded nodes to focus set", {
+            nodeId,
+            previousFocusCount: currentState.focusedNodeIds.size,
+            addedToFocus: enrichedNodes.length,
+            newFocusCount: newFocusedIds.size
+          });
+          set({ focusedNodeIds: newFocusedIds });
+        }
+        devLog3("[GraphExploration] Expansion complete", {
+          nodeId,
+          addedNodes: enrichedNodes.length,
+          addedEdges: enrichedEdges.length
+        });
+      } catch (error) {
+        devLog3("[GraphExploration] Expansion failed", { nodeId, error });
+        throw error;
+      }
+    },
+    addNodeById: async (nodeId, autoFocus = false) => {
+      const nodeIdStr = String(nodeId);
+      devLog3("[GraphExploration] addNodeById", { nodeId, autoFocus });
+      try {
+        const existingNodes = stores.graphData.getState().nodes;
+        if (handleExistingNode(
+          nodeId,
+          nodeIdStr,
+          existingNodes,
+          autoFocus,
+          stores.graphFocus
+        )) {
+          return;
+        }
+        const enrichedNodes = await fetchAndEnrichNode(
+          nodeId,
+          existingNodes,
+          stores
+        );
+        ensureNodeLabelInFilters(enrichedNodes, nodeId, stores.graphFilter);
+        if (autoFocus) {
+          devLog3("[GraphExploration] Requesting focus for newly added node", {
+            nodeId
+          });
+          stores.graphFocus.getState().requestFocus(nodeIdStr, "node", false);
+        } else {
+          devLog3("[GraphExploration] Skipping focus for newly added node", {
+            nodeId
+          });
+        }
+        const currentState = get();
+        if (currentState.isFocusMode) {
+          const newFocusedIds = new Set(currentState.focusedNodeIds);
+          newFocusedIds.add(nodeIdStr);
+          devLog3("[GraphExploration] Adding node to focus set", {
+            nodeId,
+            previousFocusCount: currentState.focusedNodeIds.size,
+            newFocusCount: newFocusedIds.size
+          });
+          set({ focusedNodeIds: newFocusedIds });
+        }
+        devLog3("[GraphExploration] addNodeById complete", {
+          nodeId,
+          addedNodes: enrichedNodes.length,
+          autoFocus
+        });
+      } catch (error) {
+        devLog3("[GraphExploration] addNodeById failed", { nodeId, error });
+        throw error;
+      }
+    }
+  }));
+}
+
+// src/stores/GraphFocus.ts
+import { create as create5 } from "zustand";
+import { devLog as devLog4 } from "@petrarca/sonnet-core";
+function buildStore() {
+  return (set, get) => ({
+    focusAction: null,
+    overrideElementIds: /* @__PURE__ */ new Set(),
+    requestFocus: (elementId, elementType, shouldSelect) => {
+      const action = {
+        elementId,
+        elementType,
+        action: shouldSelect ? "focus-and-select" : "focus",
+        timestamp: Date.now()
+      };
+      devLog4("[GraphFocusStore] requestFocus", {
+        elementId,
+        elementType,
+        action: action.action
+      });
+      set({ focusAction: action });
+    },
+    clear: () => {
+      const prev = get().focusAction;
+      if (prev) {
+        devLog4("[GraphFocusStore] clear", { prevElementId: prev.elementId });
+      }
+      set({ focusAction: null, overrideElementIds: /* @__PURE__ */ new Set() });
+    },
+    clearOverrides: () => {
+      devLog4("[GraphFocusStore] clearOverrides");
+      set({ overrideElementIds: /* @__PURE__ */ new Set() });
+    }
+  });
+}
+function createGraphFocusStore() {
+  return create5()(buildStore());
+}
+var useGraphFocus = createGraphFocusStore();
+var GraphFocus_default = useGraphFocus;
+
+// src/stores/ActionPanelStore.ts
+import { create as create6 } from "zustand";
+import { devLog as devLog5 } from "@petrarca/sonnet-core";
+function buildStore2() {
+  return (set, get) => ({
+    state: "visible",
+    setState: (state) => {
+      devLog5("[ActionPanelStore] setState", { state });
+      set({ state });
+    },
+    hide: () => {
+      devLog5("[ActionPanelStore] hide");
+      set({ state: "hidden" });
+    },
+    show: () => {
+      devLog5("[ActionPanelStore] show");
+      set({ state: "visible" });
+    },
+    isHidden: () => get().state === "hidden"
+  });
+}
+function createActionPanelStore() {
+  return create6()(buildStore2());
+}
+var useActionPanelStore = createActionPanelStore();
+
+// src/hooks/useWorkspaceStores.ts
+import { createContext, useContext } from "react";
+var GraphStoresContext = createContext(null);
+function useGraphStores() {
+  const ctx = useContext(GraphStoresContext);
+  if (!ctx) {
+    throw new Error(
+      "useGraphStores must be used within a GraphStoresProvider. Wrap your graph UI with <GraphStoresContext.Provider value={...}>."
+    );
+  }
+  return ctx;
+}
+function useWorkspaceGraphFilter() {
+  return useGraphStores().graphFilter;
+}
+function useWorkspaceGraphData() {
+  return useGraphStores().graphData;
+}
+function useWorkspaceGraphExploration() {
+  return useGraphStores().graphExploration;
+}
+function useWorkspaceSelection() {
+  return useGraphStores().selection;
+}
+
+// src/hooks/useLiveGraphData.ts
+import { useMemo, useEffect } from "react";
+import { devLog as devLog6 } from "@petrarca/sonnet-core";
+function useLiveGraphData() {
+  const useGraphFilter2 = useWorkspaceGraphFilter();
+  const useGraphData2 = useWorkspaceGraphData();
+  const useGraphExploration = useWorkspaceGraphExploration();
+  const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
+  const filterLabels = useGraphFilter2((s) => s.nodeLabelFilters);
+  const allLabelsDisabled = useGraphFilter2((s) => s.allLabelsDisabled);
+  const edgeFilterLabels = useGraphFilter2((s) => s.edgeLabelFilters);
+  const allEdgeLabelsDisabled = useGraphFilter2((s) => s.allEdgeLabelsDisabled);
+  const overrideElementIds = GraphFocus_default((s) => s.overrideElementIds);
+  const isFocusMode = useGraphExploration((s) => s.isFocusMode);
+  const focusedNodeIds = useGraphExploration((s) => s.focusedNodeIds);
+  const hiddenElementIds = useGraphExploration((s) => s.hiddenElementIds);
+  const baseNodes = useGraphData2((s) => s.nodes);
+  const baseEdges = useGraphData2((s) => s.edges);
+  const stats = useGraphData2((s) => s.stats);
+  const values = useGraphData2((s) => s.values);
+  const isValueSet = useGraphData2((s) => s.isValueSet);
+  devLog6("[useLiveGraphData] Store data", {
+    baseNodes: baseNodes.length,
+    baseEdges: baseEdges.length,
+    isFocusMode,
+    focusedCount: focusedNodeIds.size,
+    hiddenCount: hiddenElementIds.size
+  });
+  useEffect(() => {
+    GraphFocus_default.getState().clearOverrides();
+  }, [lastDataChangeTime]);
+  const allLabelCounts = useMemo(() => {
+    if (isValueSet) return {};
+    const counts = {};
+    for (const n of baseNodes) {
+      const l = n?.label_;
+      if (l) counts[l] = (counts[l] || 0) + 1;
+    }
+    return counts;
+  }, [baseNodes, isValueSet]);
+  const colorPalette = useMemo(() => {
+    if (isValueSet) return {};
+    return buildColorPalette(allLabelCounts);
+  }, [allLabelCounts, isValueSet]);
+  const availableNodes = useMemo(() => {
+    let available = baseNodes;
+    if (isFocusMode && focusedNodeIds.size > 0) {
+      available = available.filter(
+        (n) => focusedNodeIds.has(String(n.id_))
+      );
+    }
+    if (hiddenElementIds.size > 0) {
+      available = available.filter(
+        (n) => !hiddenElementIds.has(String(n.id_))
+      );
+    }
+    return available;
+  }, [baseNodes, isFocusMode, focusedNodeIds, hiddenElementIds]);
+  const availableEdges = useMemo(() => {
+    const availableNodeIds = new Set(
+      availableNodes.map((n) => String(n.id_))
+    );
+    let available = baseEdges.filter(
+      (e) => availableNodeIds.has(String(e.start_id_)) && availableNodeIds.has(String(e.end_id_))
+    );
+    if (hiddenElementIds.size > 0) {
+      available = available.filter(
+        (e) => !hiddenElementIds.has(String(e.id_))
+      );
+    }
+    return available;
+  }, [baseEdges, availableNodes, hiddenElementIds]);
+  const labelCounts = useMemo(() => {
+    if (isValueSet) return {};
+    const counts = {};
+    for (const n of availableNodes) {
+      const l = n?.label_;
+      if (l) counts[l] = (counts[l] || 0) + 1;
+    }
+    return counts;
+  }, [availableNodes, isValueSet]);
+  const edgeLabelCounts = useMemo(() => {
+    if (isValueSet) return {};
+    const counts = {};
+    for (const e of availableEdges) {
+      const l = e?.label_;
+      if (l) counts[l] = (counts[l] || 0) + 1;
+    }
+    return counts;
+  }, [availableEdges, isValueSet]);
+  const filteredNodes = useMemo(() => {
+    let filtered;
+    if (allLabelsDisabled) {
+      filtered = [];
+    } else if (filterLabels && filterLabels.length > 0) {
+      const setLabels = new Set(filterLabels);
+      filtered = baseNodes.filter(
+        (n) => setLabels.has(n.label_)
+      );
+    } else {
+      filtered = baseNodes;
+    }
+    if (isFocusMode && focusedNodeIds.size > 0) {
+      devLog6("[useLiveGraphData] Applying focus mode filter", {
+        focusedCount: focusedNodeIds.size,
+        beforeFilter: filtered.length
+      });
+      filtered = filtered.filter((n) => focusedNodeIds.has(String(n.id_)));
+      devLog6("[useLiveGraphData] After focus mode filter", {
+        afterFilter: filtered.length
+      });
+    }
+    if (hiddenElementIds.size > 0) {
+      devLog6("[useLiveGraphData] Applying hidden elements filter", {
+        hiddenCount: hiddenElementIds.size,
+        beforeFilter: filtered.length
+      });
+      filtered = filtered.filter((n) => !hiddenElementIds.has(String(n.id_)));
+      devLog6("[useLiveGraphData] After hidden elements filter", {
+        afterFilter: filtered.length
+      });
+    }
+    if (overrideElementIds.size > 0) {
+      const filteredIds = new Set(
+        filtered.map((n) => String(n.id_))
+      );
+      const overrideNodes = baseNodes.filter(
+        (n) => overrideElementIds.has(String(n.id_)) && !filteredIds.has(String(n.id_))
+      );
+      if (overrideNodes.length > 0) {
+        devLog6("[useLiveGraphData] Adding override nodes", {
+          overrideCount: overrideNodes.length,
+          overrideIds: overrideNodes.map((n) => n.id_),
+          totalAfterOverride: filtered.length + overrideNodes.length
+        });
+        filtered = [...filtered, ...overrideNodes];
+      }
+    }
+    return filtered;
+  }, [
+    baseNodes,
+    filterLabels,
+    allLabelsDisabled,
+    isFocusMode,
+    focusedNodeIds,
+    hiddenElementIds,
+    overrideElementIds
+  ]);
+  const filteredEdges = useMemo(() => {
+    let edgesStage;
+    if (allLabelsDisabled || allEdgeLabelsDisabled) {
+      edgesStage = [];
+    } else {
+      const nodeIds = new Set(
+        filteredNodes.map((n) => String(n.id_))
+      );
+      edgesStage = baseEdges.filter(
+        (e) => nodeIds.has(String(e.start_id_)) && nodeIds.has(String(e.end_id_))
+      );
+      if (edgeFilterLabels && edgeFilterLabels.length > 0) {
+        const setEdge = new Set(edgeFilterLabels);
+        edgesStage = edgesStage.filter((e) => setEdge.has(e.label_));
+      }
+    }
+    if (hiddenElementIds.size > 0) {
+      devLog6("[useLiveGraphData] Applying hidden elements filter to edges", {
+        hiddenCount: hiddenElementIds.size,
+        beforeFilter: edgesStage.length
+      });
+      edgesStage = edgesStage.filter(
+        (e) => !hiddenElementIds.has(String(e.id_))
+      );
+      devLog6("[useLiveGraphData] After hidden elements filter (edges)", {
+        afterFilter: edgesStage.length
+      });
+    }
+    if (overrideElementIds.size > 0) {
+      const filteredIds = new Set(
+        edgesStage.map((e) => String(e.id_))
+      );
+      const overrideEdges = baseEdges.filter(
+        (e) => overrideElementIds.has(String(e.id_)) && !filteredIds.has(String(e.id_))
+      );
+      if (overrideEdges.length > 0) {
+        devLog6("[useLiveGraphData] Adding override edges", {
+          overrideCount: overrideEdges.length,
+          overrideIds: overrideEdges.map((e) => e.id_),
+          totalAfterOverride: edgesStage.length + overrideEdges.length
+        });
+        edgesStage = [...edgesStage, ...overrideEdges];
+      }
+    }
+    return edgesStage;
+  }, [
+    baseEdges,
+    filteredNodes,
+    allLabelsDisabled,
+    allEdgeLabelsDisabled,
+    edgeFilterLabels,
+    hiddenElementIds,
+    overrideElementIds
+  ]);
+  const baseNormalized = useMemo(() => {
+    if (isValueSet) return EMPTY_NORMALIZED;
+    return normalizeGraph(baseNodes, baseEdges);
+  }, [isValueSet, baseNodes, baseEdges]);
+  const normalized = useMemo(() => {
+    if (isValueSet) return EMPTY_NORMALIZED;
+    return normalizeGraph(filteredNodes, filteredEdges);
+  }, [isValueSet, filteredNodes, filteredEdges]);
+  const nodes = useMemo(
+    () => normalized.nodeIds.map((id) => normalized.nodesById[id]),
+    [normalized]
+  );
+  const edges = useMemo(
+    () => normalized.edgeIds.map((id) => normalized.edgesById[id]),
+    [normalized]
+  );
+  const adjustedStats = useMemo(() => {
+    if (!stats) return void 0;
+    return {
+      ...stats,
+      nodes: availableNodes.length,
+      edges: availableEdges.length
+    };
+  }, [stats, availableNodes.length, availableEdges.length]);
+  useEffect(() => {
+    const { clearOverrides } = GraphFocus_default.getState();
+    clearOverrides();
+  }, [
+    filterLabels,
+    allLabelsDisabled,
+    edgeFilterLabels,
+    allEdgeLabelsDisabled
+  ]);
+  return {
+    nodes,
+    edges,
+    stats: adjustedStats,
+    labelCounts,
+    edgeLabelCounts,
+    values,
+    colorPalette,
+    normalized,
+    baseNormalized
+  };
+}
+
+// src/hooks/useReagraphData.ts
+import { useMemo as useMemo2 } from "react";
+function toReagraphNode(visualNode) {
+  return {
+    id: String(visualNode.id_),
+    label: visualNode.visual.displayName,
+    fill: visualNode.visual.color,
+    size: visualNode.visual.size,
+    icon: visualNode.visual.icon,
+    // Embed full visual node so event handlers can access all domain data
+    data: visualNode
+  };
+}
+function toReagraphEdge(visualEdge) {
+  return {
+    id: String(visualEdge.id_),
+    source: String(visualEdge.start_id_),
+    target: String(visualEdge.end_id_),
+    label: visualEdge.label_,
+    fill: visualEdge.visual.color,
+    size: visualEdge.visual.size ?? 3,
+    dashed: visualEdge.visual.dashed,
+    // Embed full visual edge so event handlers can access all domain data
+    data: visualEdge
+  };
+}
+function useReagraphData() {
+  const live = useLiveGraphData();
+  const nodes = useMemo2(
+    () => live.nodes.map(toReagraphNode),
+    [live.nodes]
+  );
+  const edges = useMemo2(
+    () => live.edges.map(toReagraphEdge),
+    [live.edges]
+  );
+  return {
+    nodes,
+    edges,
+    stats: live.stats,
+    colorPalette: live.colorPalette
+  };
+}
+
+// src/hooks/useCytoscapeData.ts
+import { useMemo as useMemo3 } from "react";
+function toCytoscapeNode(visualNode) {
+  const color = visualNode.visual.color ?? "#4285F4";
+  const size = visualNode.visual.size ?? 40;
+  return {
+    data: {
+      id: String(visualNode.id_),
+      label: visualNode.visual.displayName,
+      id_: visualNode.id_,
+      label_: visualNode.label_,
+      properties_: visualNode.properties_,
+      displayName: visualNode.visual.displayName,
+      color,
+      size,
+      icon: visualNode.visual.icon,
+      // Full node reference for context menu and event handlers
+      visualGraph: visualNode
+    }
+    // No inline styles — stylesheet handles all styling via data mappers
+  };
+}
+function toCytoscapeEdge(visualEdge) {
+  return {
+    data: {
+      id: String(visualEdge.id_),
+      source: String(visualEdge.start_id_),
+      target: String(visualEdge.end_id_),
+      label: visualEdge.label_,
+      id_: visualEdge.id_,
+      label_: visualEdge.label_,
+      start_id_: visualEdge.start_id_,
+      end_id_: visualEdge.end_id_,
+      properties_: visualEdge.properties_,
+      color: visualEdge.visual.color ?? "#9E9E9E",
+      size: visualEdge.visual.size ?? 3,
+      // Only set dashed when true — falsy values omitted to avoid stylesheet noise
+      dashed: visualEdge.visual.dashed || void 0
+    }
+    // No inline styles — stylesheet handles all styling via data mappers
+  };
+}
+function useCytoscapeData() {
+  const live = useLiveGraphData();
+  const elements = useMemo3(
+    () => ({
+      nodes: live.nodes.map(toCytoscapeNode),
+      edges: live.edges.map(toCytoscapeEdge)
+    }),
+    [live.nodes, live.edges]
+  );
+  return {
+    elements,
+    stats: live.stats,
+    colorPalette: live.colorPalette
+  };
+}
+
+// src/hooks/useGraphRendererContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var GraphRendererContext = createContext2(null);
+function useGraphRenderer() {
+  const ctx = useContext2(GraphRendererContext);
+  if (!ctx) {
+    throw new Error(
+      "useGraphRenderer must be used within a GraphRendererProvider"
+    );
+  }
+  return ctx;
+}
+
+// src/hooks/graphRendererProvider.tsx
+import { useState, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+function GraphRendererProvider({
+  children,
+  defaultRenderer = "cytoscape",
+  onRendererChange
+}) {
+  const [renderer, setRendererState] = useState(defaultRenderer);
+  const setRenderer = useCallback(
+    (newRenderer) => {
+      setRendererState(newRenderer);
+      onRendererChange?.(newRenderer);
+    },
+    [onRendererChange]
+  );
+  return /* @__PURE__ */ jsx(GraphRendererContext.Provider, { value: { renderer, setRenderer }, children });
+}
+
+// src/components/rea/ReaGraph.tsx
+import {
+  useEffect as useEffect2,
+  useRef,
+  useState as useState3,
+  useCallback as useCallback2
+} from "react";
+import { devLog as devLog8 } from "@petrarca/sonnet-core";
+import {
+  GraphCanvas,
+  useSelection as useSelection2
+} from "reagraph";
+
+// src/components/rea/theme.ts
+import { lightTheme } from "reagraph";
+var highlightColor = "#ffb512";
+var highlightColorText = "#c98a02";
+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
+    }
+  },
+  arrow: {
+    ...lightTheme.arrow,
+    activeFill: highlightColor
+  }
+};
+
+// src/components/rea/ReaGraph.tsx
+import { cn } from "@petrarca/sonnet-core";
+
+// src/components/rea/LayoutAndCameraControls.tsx
+import {
+  Button as Button2,
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuItem as DropdownMenuItem2,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger as DropdownMenuTrigger2,
+  SimpleTooltip as SimpleTooltip2
+} from "@petrarca/sonnet-ui";
+import { LayoutPanelTop, Maximize, Shrink, ArrowUp, Eye } from "lucide-react";
+import { useState as useState2 } from "react";
+
+// src/components/shared/RendererDropdown.tsx
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  SimpleTooltip
+} from "@petrarca/sonnet-ui";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function RendererDropdown() {
+  const { renderer, setRenderer } = useGraphRenderer();
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx2(SimpleTooltip, { label: "Renderer", side: "left", children: /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "icon", children: renderer === "reagraph" ? "RG" : "CY" }) }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "left", align: "start", children: [
+      /* @__PURE__ */ jsx2(
+        DropdownMenuItem,
+        {
+          onClick: () => setRenderer("reagraph"),
+          className: renderer === "reagraph" ? "text-blue-600" : "",
+          children: "Reagraph"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        DropdownMenuItem,
+        {
+          onClick: () => setRenderer("cytoscape"),
+          className: renderer === "cytoscape" ? "text-blue-600" : "",
+          children: "Cytoscape"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/rea/LayoutAndCameraControls.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function PathSelectionDropdown({
+  setPathSelectionType
+}) {
+  return /* @__PURE__ */ jsxs2(DropdownMenu2, { children: [
+    /* @__PURE__ */ jsx3(SimpleTooltip2, { label: "Path Selection Type", side: "left", children: /* @__PURE__ */ jsx3(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx3(ArrowUp, {}) }) }) }),
+    /* @__PURE__ */ jsxs2(DropdownMenuContent2, { side: "left", align: "start", children: [
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => setPathSelectionType("direct"), children: "None" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => setPathSelectionType("all"), children: "All Paths" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => setPathSelectionType("in"), children: "Inbound" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => setPathSelectionType("out"), children: "Outbound" })
+    ] })
+  ] });
+}
+function LayoutDropdown({ updateLayout }) {
+  const [showTooltip, setShowTooltip] = useState2(true);
+  const handleSelect = (layout) => {
+    updateLayout(layout);
+    setShowTooltip(false);
+    setTimeout(() => setShowTooltip(true), 500);
+  };
+  const trigger = /* @__PURE__ */ jsx3(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx3(LayoutPanelTop, {}) }) });
+  return /* @__PURE__ */ jsxs2(DropdownMenu2, { children: [
+    showTooltip ? /* @__PURE__ */ jsx3(SimpleTooltip2, { label: "Layout", side: "left", children: trigger }) : trigger,
+    /* @__PURE__ */ jsxs2(DropdownMenuContent2, { side: "left", align: "start", children: [
+      /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: "Force-directed Layouts" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("forceDirected2d"), children: "Force Directed" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("forceatlas2"), children: "Force Atlas 2" }),
+      /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: "Tree Layouts" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("treeTd2d"), children: "Tree Top-Down" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("treeLr2d"), children: "Tree Left-Right" }),
+      /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: "Circular & Radial Layouts" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("circular2d"), children: "Circular" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("radialOut2d"), children: "Radial Out" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("concentric2d"), children: "Concentric" }),
+      /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: "Utility Layouts" }),
+      /* @__PURE__ */ jsx3(DropdownMenuItem2, { onClick: () => handleSelect("nooverlap"), children: "No Overlap" })
+    ] })
+  ] });
+}
+function ViewControls({
+  fullscreen,
+  toggleFullscreen,
+  fitToScreen,
+  hasHiddenElements,
+  isFocusMode,
+  onResetView
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(SimpleTooltip2, { label: "Fullscreen", side: "left", children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", onClick: toggleFullscreen, children: !fullscreen ? /* @__PURE__ */ jsx3(Maximize, {}) : /* @__PURE__ */ jsx3(Shrink, {}) }) }),
+    /* @__PURE__ */ jsx3(SimpleTooltip2, { label: "Fit to screen", side: "left", children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", onClick: fitToScreen, children: /* @__PURE__ */ jsx3(Shrink, {}) }) }),
+    (hasHiddenElements || isFocusMode) && onResetView && /* @__PURE__ */ jsx3(
+      SimpleTooltip2,
+      {
+        label: isFocusMode ? "Reset Focus" : "Show All Hidden",
+        side: "left",
+        children: /* @__PURE__ */ jsx3(Button2, { variant: "ghost", size: "icon", onClick: onResetView, children: /* @__PURE__ */ jsx3(Eye, {}) })
+      }
+    )
+  ] });
+}
+function LayoutAndCameraControls({
+  fitToScreen,
+  fullscreen,
+  toggleFullscreen,
+  updateLayout,
+  setPathSelectionType,
+  hasHiddenElements = false,
+  isFocusMode = false,
+  onResetView,
+  extraToolbarContent
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "absolute right-2 top-2 flex flex-col border", children: [
+    /* @__PURE__ */ jsx3(RendererDropdown, {}),
+    /* @__PURE__ */ jsx3(
+      ViewControls,
+      {
+        fullscreen,
+        toggleFullscreen,
+        fitToScreen,
+        hasHiddenElements,
+        isFocusMode,
+        onResetView
+      }
+    ),
+    /* @__PURE__ */ jsx3(PathSelectionDropdown, { setPathSelectionType }),
+    extraToolbarContent,
+    /* @__PURE__ */ jsx3(LayoutDropdown, { updateLayout })
+  ] });
+}
+var LayoutAndCameraControls_default = LayoutAndCameraControls;
+
+// src/components/rea/ReaGraph.tsx
+import { Card as Card2 } from "@petrarca/sonnet-ui";
+
+// src/components/rea/NodeHoverInfo.tsx
+import { Card, Separator } from "@petrarca/sonnet-ui";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function NodeHoverInfo({ node }) {
+  return /* @__PURE__ */ jsx4(Card, { className: "absolute top-2 left-1/2 -translate-x-1/2 bg-white shadow-md p-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-row items-center gap-2", children: [
+    /* @__PURE__ */ jsx4(
+      Separator,
+      {
+        orientation: "vertical",
+        decorative: true,
+        className: "h-10 w-1",
+        style: { backgroundColor: node.fill }
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsxs3("p", { children: [
+        /* @__PURE__ */ jsxs3("strong", { children: [
+          node.data.label_,
+          ": "
+        ] }),
+        node.label
+      ] }),
+      /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: node.data.id_ })
+    ] })
+  ] }) });
+}
+var NodeHoverInfo_default = NodeHoverInfo;
+
+// src/components/rea/ReaContextMenu.tsx
+import React2 from "react";
+import { devLog as devLog7 } from "@petrarca/sonnet-core";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ReaContextMenu({
+  data,
+  onClose,
+  elementType,
+  useGraphExploration,
+  onCopyNode
+}) {
+  const handleFocus = () => {
+    if (elementType === "node") {
+      const nodeId = data.id;
+      devLog7("[ReaContextMenu] Focus on node and neighborhood:", nodeId);
+      useGraphExploration.getState().setFocusModeWithNeighborhood(nodeId);
+    } else {
+      const startNodeId = data.data.start_id_;
+      devLog7("[ReaContextMenu] Focus on edge start node:", startNodeId);
+      useGraphExploration.getState().setFocusModeWithNeighborhood(startNodeId);
+    }
+    onClose();
+  };
+  const handleCopy = () => {
+    devLog7("[ReaContextMenu] Copy to clipboard");
+    if (elementType === "node") {
+      const visualGraph = data.data?.visualGraph;
+      if (visualGraph && onCopyNode) {
+        onCopyNode(visualGraph);
+      } else if (!visualGraph) {
+        const nodeText = `Node: ${data.label || data.id}`;
+        navigator.clipboard.writeText(nodeText);
+      }
+    } else {
+      const edgeText = `Edge: ${data.data.start_id_} -> ${data.data.end_id_}`;
+      navigator.clipboard.writeText(edgeText);
+    }
+    onClose();
+  };
+  const handleHideNode = () => {
+    if (elementType === "node") {
+      const nodeId = data.id;
+      devLog7("[ReaContextMenu] Hide node:", nodeId);
+      useGraphExploration.getState().hideElements([nodeId]);
+    }
+    onClose();
+  };
+  const handleHideIncoming = () => {
+    if (elementType === "node") {
+      const nodeId = data.id;
+      devLog7("[ReaContextMenu] Hide incoming edges:", nodeId);
+      useGraphExploration.getState().hideNodeIncoming(nodeId);
+    }
+    onClose();
+  };
+  const handleHideOutgoing = () => {
+    if (elementType === "node") {
+      const nodeId = data.id;
+      devLog7("[ReaContextMenu] Hide outgoing edges:", nodeId);
+      useGraphExploration.getState().hideNodeOutgoing(nodeId);
+    }
+    onClose();
+  };
+  const handleExpand = () => {
+    if (elementType === "node") {
+      const nodeId = data.id;
+      devLog7("[ReaContextMenu] Expand node:", nodeId);
+      useGraphExploration.getState().expandNode(nodeId);
+    }
+    onClose();
+  };
+  const handleHideForwardPath = () => {
+    if (elementType === "edge") {
+      const edgeId = data.id;
+      devLog7("[ReaContextMenu] Hide forward path from edge:", edgeId);
+      useGraphExploration.getState().hideEdgeForwardPath(edgeId);
+    }
+    onClose();
+  };
+  const handleHideReversePath = () => {
+    if (elementType === "edge") {
+      const edgeId = data.id;
+      devLog7("[ReaContextMenu] Hide reverse path from edge:", edgeId);
+      useGraphExploration.getState().hideEdgeReversePath(edgeId);
+    }
+    onClose();
+  };
+  const handleFocusOnEdgeType = () => {
+    if (elementType === "edge") {
+      const edgeId = data.id;
+      const edgeLabel = data.data?.label_ || "edge";
+      devLog7("[ReaContextMenu] Focus on edge type:", edgeId, edgeLabel);
+      useGraphExploration.getState().focusOnEdgeType(edgeId);
+    }
+    onClose();
+  };
+  const nodeMenuItems = [
+    { label: "Focus", action: handleFocus },
+    { label: "Copy", action: handleCopy },
+    { label: "Hide Node", action: handleHideNode },
+    { label: "Hide Incoming", action: handleHideIncoming },
+    { label: "Hide Outgoing", action: handleHideOutgoing },
+    { label: "Expand", action: handleExpand }
+  ];
+  const edgeMenuItems = [
+    { label: "Focus", action: handleFocus },
+    { label: "Focus Edge Type", action: handleFocusOnEdgeType },
+    { label: "Copy", action: handleCopy },
+    { label: "Hide Forward Path", action: handleHideForwardPath },
+    { label: "Hide Reverse Path", action: handleHideReversePath }
+  ];
+  const menuItems = elementType === "node" ? nodeMenuItems : edgeMenuItems;
+  return /* @__PURE__ */ jsx5("div", { className: "bg-white border border-gray-200 rounded-md shadow-lg py-1 min-w-48", children: menuItems.map((item, index) => /* @__PURE__ */ jsxs4(React2.Fragment, { children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 cursor-pointer",
+        onClick: item.action,
+        children: item.label
+      }
+    ),
+    index === 1 && /* @__PURE__ */ jsx5("div", { className: "border-t border-gray-200 my-1" })
+  ] }, item.label)) });
+}
+var ReaContextMenu_default = ReaContextMenu;
+
+// src/components/rea/ReaGraph.tsx
+import { toast } from "sonner";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function findElementInGraphData(elementId, elementType, nodes, edges) {
+  if (elementType === "node") {
+    const node = nodes.find((n) => n.id === elementId);
+    if (node) return { element: node, actualElementType: "node" };
+    const edge = edges.find((e) => e.id === elementId);
+    if (edge) {
+      devLog8("[ReGraph] ID mismatch: requested as node but found as edge", {
+        elementId
+      });
+      return { element: edge, actualElementType: "edge" };
+    }
+  } else {
+    const edge = edges.find((e) => e.id === elementId);
+    if (edge) return { element: edge, actualElementType: "edge" };
+    const node = nodes.find((n) => n.id === elementId);
+    if (node) {
+      devLog8("[ReGraph] ID mismatch: requested as edge but found as node", {
+        elementId
+      });
+      return { element: node, actualElementType: "node" };
+    }
+  }
+  return null;
+}
+function processFocusAction(focusAction, canvasRef, nodes, edges, setSelectedNodeIds, setSelectedEdge) {
+  const { elementId, elementType, action } = focusAction;
+  const found = findElementInGraphData(elementId, elementType, nodes, edges);
+  if (!found) {
+    devLog8("[ReGraph] Element not found in current Reagraph data", {
+      elementId,
+      elementType,
+      availableNodes: nodes.length,
+      availableEdges: edges.length,
+      nodeIds: nodes.slice(0, 5).map((n) => n.id),
+      edgeIds: edges.slice(0, 5).map((e) => e.id)
+    });
+    return false;
+  }
+  const { element, actualElementType } = found;
+  devLog8("[ReGraph] Element found, focusing", {
+    elementId,
+    elementType: actualElementType
+  });
+  if (actualElementType === "node") {
+    canvasRef.fitNodesInView([elementId]);
+  } else {
+    const edge = element;
+    canvasRef.fitNodesInView([edge.source, edge.target]);
+  }
+  if (action === "focus-and-select") {
+    if (actualElementType === "node") {
+      setSelectedNodeIds([elementId]);
+    } else {
+      const edgeForFocus = edges.find((e) => e.id === elementId);
+      setSelectedEdge(
+        edgeForFocus ? edgeForFocus.data : null
+      );
+    }
+  }
+  return true;
+}
+function ReaGraph({ onCopyNode, extraToolbarContent }) {
+  const isMountedRef = useRef(false);
+  const { nodes, edges } = useReagraphData();
+  const { normalized } = useLiveGraphData();
+  useEffect2(() => {
+    devLog8("[ReGraph] counts", { nodes: nodes.length, edges: edges.length });
+    if (nodes.length > 0) devLog8("[ReGraph] sample node", nodes[0]);
+    if (edges.length > 0) devLog8("[ReGraph] sample edge", edges[0]);
+  }, [nodes, edges]);
+  const canvas = useRef(null);
+  const [hoveredNode, setHoveredNode] = useState3(
+    void 0
+  );
+  const [layout, setLayout] = useState3("forceDirected2d");
+  const [fullscreen, setFullscreen] = useState3(false);
+  const [pathSelectionType, setPathSelectionType] = useState3("direct");
+  const useGraphSelection = useWorkspaceSelection();
+  const useGraphFilter2 = useWorkspaceGraphFilter();
+  const useGraphExploration = useWorkspaceGraphExploration();
+  const hiddenElementIds = useGraphExploration((s) => s.hiddenElementIds);
+  const isFocusMode = useGraphExploration((s) => s.isFocusMode);
+  const hasHiddenElements = hiddenElementIds.size > 0;
+  const { setSelectedNodeIds, setSelectedEdge } = useGraphSelection(
+    (s) => s
+  );
+  const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
+  const { clear: clearSelectionStore } = useGraphSelection.getState();
+  const {
+    selections,
+    actives,
+    onNodeClick,
+    onCanvasClick,
+    clearSelections,
+    setSelections
+  } = useSelection2({
+    ref: canvas,
+    nodes,
+    edges,
+    pathSelectionType,
+    type: "multi"
+  });
+  useEffect2(() => {
+    const unsubscribe = GraphFocus_default.subscribe((state) => {
+      const focusAction = state.focusAction;
+      if (!focusAction || !canvas.current) return;
+      devLog8("[ReGraph] Processing focus action", {
+        elementId: focusAction.elementId,
+        elementType: focusAction.elementType,
+        action: focusAction.action,
+        timestamp: focusAction.timestamp
+      });
+      const handled = processFocusAction(
+        focusAction,
+        canvas.current,
+        nodes,
+        edges,
+        setSelectedNodeIds,
+        setSelectedEdge
+      );
+      if (handled) {
+        GraphFocus_default.setState({ focusAction: null });
+      }
+    });
+    return unsubscribe;
+  }, [nodes, edges, setSelectedNodeIds, setSelectedEdge]);
+  useEffect2(() => {
+    if (!canvas.current) return;
+    clearSelections();
+    clearSelectionStore();
+  }, [lastDataChangeTime, clearSelections, clearSelectionStore]);
+  const fitToScreen = useCallback2(
+    (reason) => {
+      if (!isMountedRef.current) return;
+      if (nodes.length === 0) return;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (!isMountedRef.current) return;
+          const ref = canvas.current;
+          if (!ref) return;
+          try {
+            ref.fitNodesInView();
+            devLog8("[ReGraph] fitToScreen", {
+              reason,
+              nodeCount: nodes.length
+            });
+          } catch (e) {
+            devLog8("[ReGraph] fitToScreen failed", {
+              reason,
+              error: e.message
+            });
+          }
+        });
+      });
+    },
+    [nodes.length]
+  );
+  useEffect2(() => {
+    isMountedRef.current = true;
+    fitToScreen("mount");
+    const state = useGraphSelection.getState();
+    if (state.selectedNodeIds.length || state.selectedEdge) {
+      devLog8("[ReGraph] Initial sync of selection store", {
+        selectedNodeIds: state.selectedNodeIds,
+        selectedEdge: state.selectedEdge
+      });
+      if (state.selectedNodeIds.length > 0) {
+        setSelections(state.selectedNodeIds);
+      }
+      if (state.selectedEdge) {
+        setSelectedEdge(state.selectedEdge);
+      }
+    }
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [fitToScreen, setSelections, setSelectedEdge, useGraphSelection]);
+  useEffect2(() => {
+    if (isMountedRef.current) fitToScreen("counts-changed");
+  }, [nodes.length, edges.length, fitToScreen]);
+  function updateLayout(next) {
+    setLayout(next);
+    fitToScreen("layout-change");
+  }
+  function handleNodeClick(node) {
+    setSelectedEdge(null);
+    if (selections.length < 2 && onNodeClick) onNodeClick(node);
+  }
+  function handleEdgeClick(edge) {
+    const startNode = normalized.nodesById[edge.data.start_id_ + ""];
+    const endNode = normalized.nodesById[edge.data.end_id_ + ""];
+    if (!startNode || !endNode) return;
+    const startNodeId = String(startNode.id_);
+    const endNodeId = String(endNode.id_);
+    const currentSelectedIds = useGraphSelection.getState().selectedNodeIds;
+    if (currentSelectedIds.length === 1) {
+      const selectedNodeId = currentSelectedIds[0];
+      if (selectedNodeId === startNodeId || selectedNodeId === endNodeId) {
+        devLog8("[ReGraph] handleEdgeClick - node+edge selection", {
+          edgeId: edge.id,
+          selectedNode: selectedNodeId,
+          direction: selectedNodeId === startNodeId ? "outgoing" : "incoming"
+        });
+        setSelectedEdge(edge.data);
+        return;
+      }
+    }
+    devLog8("[ReGraph] handleEdgeClick - default (both endpoints)", {
+      edgeId: edge.id
+    });
+    setSelections([startNodeId, endNodeId]);
+    setSelectedEdge(edge.data);
+  }
+  function handleCanvasClick(e) {
+    clearSelections();
+    setSelectedNodeIds([]);
+    setSelectedEdge(null);
+    if (onCanvasClick) onCanvasClick(e);
+  }
+  useEffect2(() => {
+    if (!isMountedRef.current) return;
+    if (selections.length > 0 && selections.length <= 2) {
+      const selectedNodes = selections.map((id) => nodes.find((n) => n.id === id)).filter(Boolean);
+      setSelectedNodeIds(selectedNodes.map((n) => n.id));
+    }
+  }, [selections, nodes]);
+  useEffect2(() => {
+    if (!isMountedRef.current) return;
+    const currentSelectedIds = useGraphSelection.getState().selectedNodeIds;
+    if (!currentSelectedIds.length) return;
+    const stillPresentIds = currentSelectedIds.filter(
+      (id) => nodes.find((n) => n.id === id)
+    );
+    if (stillPresentIds.length !== currentSelectedIds.length) {
+      clearSelections();
+      setSelectedNodeIds(stillPresentIds);
+      if (stillPresentIds.length < 2) setSelectedEdge(null);
+    }
+  }, [
+    nodes,
+    clearSelections,
+    setSelectedNodeIds,
+    setSelectedEdge,
+    useGraphSelection
+  ]);
+  useEffect2(() => {
+    if (!isMountedRef.current) return;
+    const currentSelectedIds = useGraphSelection.getState().selectedNodeIds;
+    if (!currentSelectedIds.length) return;
+    const stillPresentIds = currentSelectedIds.filter(
+      (id) => nodes.find((n) => n.id === id)
+    );
+    if (stillPresentIds.length !== currentSelectedIds.length) {
+      setSelectedNodeIds(stillPresentIds);
+      if (stillPresentIds.length < 2) setSelectedEdge(null);
+    }
+  }, [nodes, setSelectedNodeIds, setSelectedEdge, useGraphSelection]);
+  useEffect2(() => {
+    if (!fullscreen) return;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    fitToScreen("enter-fullscreen");
+    const handleKey = (e) => {
+      if (e.key === "Escape") setFullscreen(false);
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      window.removeEventListener("keydown", handleKey);
+    };
+  }, [fullscreen, fitToScreen]);
+  useEffect2(() => {
+    if (!fullscreen) return;
+    const id = setTimeout(() => {
+      if (canvas.current) {
+        fitToScreen("fullscreen-resize-delay");
+      }
+    }, 50);
+    return () => clearTimeout(id);
+  }, [fullscreen, fitToScreen]);
+  useEffect2(() => {
+    if (!isMountedRef.current) return;
+    const handleResize = () => {
+      if (isMountedRef.current && canvas.current) {
+        fitToScreen("window-resize");
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [fitToScreen]);
+  const firstDataRef = useRef(true);
+  useEffect2(() => {
+    if (!isMountedRef.current) return;
+    if (nodes.length > 0) {
+      if (firstDataRef.current) {
+        fitToScreen("first-data");
+        firstDataRef.current = false;
+      }
+    } else {
+      firstDataRef.current = true;
+    }
+  }, [nodes.length, fitToScreen]);
+  if (nodes.length === 0) {
+    devLog8("[ReGraph] empty state render");
+    return /* @__PURE__ */ jsxs5(Card2, { className: "relative w-full h-full items-center justify-center text-slate-500 gap-2 shadow-xs p-4", children: [
+      /* @__PURE__ */ jsx6("div", { children: "No data to display." }),
+      /* @__PURE__ */ jsxs5("div", { children: [
+        "Please",
+        " ",
+        /* @__PURE__ */ jsx6("span", { className: "font-semibold", children: "run a query, check filters, or add a node" }),
+        " ",
+        "to the workbench to populate the graph."
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "bg-white",
+        fullscreen ? "fixed inset-0 z-50 w-screen h-screen p-0 m-0" : "relative w-full h-full"
+      ),
+      children: [
+        /* @__PURE__ */ jsx6(Card2, { className: "h-full shadow-xs p-4", children: /* @__PURE__ */ jsx6(
+          GraphCanvas,
+          {
+            ref: canvas,
+            theme,
+            nodes,
+            edges,
+            draggable: true,
+            layoutType: layout,
+            selections,
+            actives,
+            onCanvasClick: handleCanvasClick,
+            onNodeClick: (e) => handleNodeClick(e),
+            edgeArrowPosition: "end",
+            edgeLabelPosition: "natural",
+            labelType: "all",
+            onNodePointerOver: setHoveredNode,
+            onNodePointerOut: () => setHoveredNode(void 0),
+            onEdgeClick: handleEdgeClick,
+            contextMenu: ({ data, onClose }) => {
+              const elementType = "source" in data ? "edge" : "node";
+              devLog8("[ReGraph] Context menu opened", {
+                elementId: data.id,
+                elementType
+              });
+              return /* @__PURE__ */ jsx6(
+                ReaContextMenu_default,
+                {
+                  data,
+                  onClose,
+                  elementType,
+                  useGraphExploration,
+                  onCopyNode
+                }
+              );
+            }
+          }
+        ) }),
+        hoveredNode && /* @__PURE__ */ jsx6(NodeHoverInfo_default, { node: hoveredNode }),
+        /* @__PURE__ */ jsx6(
+          LayoutAndCameraControls_default,
+          {
+            fitToScreen,
+            fullscreen,
+            toggleFullscreen: () => setFullscreen((prev) => !prev),
+            updateLayout,
+            setPathSelectionType,
+            hasHiddenElements,
+            isFocusMode,
+            onResetView: () => {
+              useGraphExploration.getState().resetView();
+              toast.success(
+                isFocusMode ? "Focus mode cleared" : "Hidden elements restored"
+              );
+            },
+            extraToolbarContent
+          }
+        )
+      ]
+    }
+  );
+}
+var ReaGraph_default = ReaGraph;
+
+// src/components/cyto/CytoscapeGraph.tsx
+import {
+  useEffect as useEffect3,
+  useRef as useRef2,
+  useState as useState4,
+  useCallback as useCallback3
+} from "react";
+import { devLog as devLog10, errorLog as errorLog2 } from "@petrarca/sonnet-core";
+import cytoscape from "cytoscape";
+import fcose from "cytoscape-fcose";
+import cola from "cytoscape-cola";
+import dagre from "cytoscape-dagre";
+import klay from "cytoscape-klay";
+import elk from "cytoscape-elk";
+import cise from "cytoscape-cise";
+import cxtmenu from "cytoscape-cxtmenu";
+
+// src/components/cyto/CytoscapeControls.tsx
+import {
+  Button as Button3,
+  DropdownMenu as DropdownMenu3,
+  DropdownMenuContent as DropdownMenuContent3,
+  DropdownMenuItem as DropdownMenuItem3,
+  DropdownMenuLabel as DropdownMenuLabel2,
+  DropdownMenuSeparator as DropdownMenuSeparator2,
+  DropdownMenuTrigger as DropdownMenuTrigger3,
+  SimpleTooltip as SimpleTooltip3
+} from "@petrarca/sonnet-ui";
+import { LayoutPanelTop as LayoutPanelTop2, Monitor, Frame, Eye as Eye2, Minus } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ViewControls2({
+  zoomIn,
+  zoomOut,
+  fullscreen,
+  toggleFullscreen,
+  fitToScreen,
+  hasHiddenElements,
+  isFocusMode,
+  onResetView
+}) {
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Zoom In", side: "left", children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: zoomIn, children: /* @__PURE__ */ jsx7("span", { style: { fontWeight: 600 }, children: "+" }) }) }),
+    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Zoom Out", side: "left", children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: zoomOut, children: /* @__PURE__ */ jsx7(Minus, {}) }) }),
+    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Fullscreen", side: "left", children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: toggleFullscreen, children: !fullscreen ? /* @__PURE__ */ jsx7(Monitor, {}) : /* @__PURE__ */ jsx7(Frame, {}) }) }),
+    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Fit to screen", side: "left", children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: fitToScreen, children: /* @__PURE__ */ jsx7(Frame, {}) }) }),
+    (hasHiddenElements || isFocusMode) && onResetView && /* @__PURE__ */ jsx7(
+      SimpleTooltip3,
+      {
+        label: isFocusMode ? "Reset Focus" : "Show All Hidden",
+        side: "left",
+        children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", onClick: onResetView, children: /* @__PURE__ */ jsx7(Eye2, {}) })
+      }
+    )
+  ] });
+}
+var LAYOUT_GROUPS = [
+  {
+    label: "Force-directed Layouts",
+    items: [
+      { layout: "cola", name: "Cola (Best for Knowledge Graphs)" },
+      { layout: "fcose", name: "F-CoSE (Large Graphs)" },
+      { layout: "cise", name: "CiSE (Clustered Circles)" },
+      { layout: "cose", name: "CoSE" }
+    ]
+  },
+  {
+    label: "Hierarchical Layouts",
+    items: [
+      { layout: "dagre", name: "Dagre (Left to Right)" },
+      { layout: "klay", name: "KLay (Layered)" },
+      { layout: "elk", name: "ELK (Layered)" },
+      { layout: "breadthfirst", name: "Breadth-first" },
+      { layout: "tree", name: "Tree (Top-Down)" }
+    ]
+  },
+  {
+    label: "Other Layouts",
+    items: [
+      { layout: "concentric", name: "Concentric" },
+      { layout: "circle", name: "Circle" },
+      { layout: "grid", name: "Grid" }
+    ]
+  }
+];
+function LayoutDropdown2({ currentLayout, updateLayout }) {
+  return /* @__PURE__ */ jsxs6(DropdownMenu3, { children: [
+    /* @__PURE__ */ jsx7(SimpleTooltip3, { label: "Layout", side: "left", children: /* @__PURE__ */ jsx7(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx7(Button3, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx7(LayoutPanelTop2, {}) }) }) }),
+    /* @__PURE__ */ jsx7(DropdownMenuContent3, { side: "left", align: "start", children: LAYOUT_GROUPS.map((group, groupIdx) => /* @__PURE__ */ jsxs6("div", { children: [
+      groupIdx > 0 && /* @__PURE__ */ jsx7(DropdownMenuSeparator2, {}),
+      /* @__PURE__ */ jsx7(DropdownMenuLabel2, { children: group.label }),
+      group.items.map((item) => /* @__PURE__ */ jsx7(
+        DropdownMenuItem3,
+        {
+          onClick: () => updateLayout(item.layout),
+          className: currentLayout === item.layout ? "text-blue-600" : "",
+          children: item.name
+        },
+        item.layout
+      ))
+    ] }, group.label)) })
+  ] });
+}
+function CytoscapeControls({
+  fitToScreen,
+  hasHiddenElements,
+  isFocusMode,
+  updateLayout,
+  zoomIn,
+  zoomOut,
+  currentLayout,
+  fullscreen,
+  toggleFullscreen,
+  onResetView,
+  extraToolbarContent
+}) {
+  return /* @__PURE__ */ jsxs6("div", { className: "absolute right-2 top-2 flex flex-col border bg-white rounded-md shadow-sm z-10", children: [
+    /* @__PURE__ */ jsx7(RendererDropdown, {}),
+    /* @__PURE__ */ jsx7(
+      ViewControls2,
+      {
+        zoomIn,
+        zoomOut,
+        fullscreen,
+        toggleFullscreen,
+        fitToScreen,
+        hasHiddenElements,
+        isFocusMode,
+        onResetView
+      }
+    ),
+    extraToolbarContent,
+    /* @__PURE__ */ jsx7(
+      LayoutDropdown2,
+      {
+        currentLayout,
+        updateLayout
+      }
+    )
+  ] });
+}
+var CytoscapeControls_default = CytoscapeControls;
+
+// src/components/cyto/layoutPresets.ts
+function buildColaLayout(count) {
+  return {
+    name: "cola",
+    // Always animate regardless of node count for better user experience
+    animate: true,
+    // Increase refresh rate for smoother animation
+    refresh: 2,
+    // Limit simulation time to prevent hanging with large graphs
+    maxSimulationTime: 2e3,
+    // Prevent grabbing during simulation for better performance
+    ungrabifyWhileSimulating: true,
+    fit: true,
+    padding: 50,
+    // Scale spacing based on node count for better distribution
+    nodeSpacing: () => Math.max(10, 30 - Math.log(count) * 3),
+    edgeLength: () => Math.max(80, 150 - Math.log(count) * 10),
+    // Always avoid node overlap
+    avoidOverlap: true,
+    // Prevent infinite running
+    infinite: false,
+    // Add convergence threshold for faster completion with large graphs
+    convergenceThreshold: 0.01,
+    // Add randomize false to maintain consistent layouts
+    randomize: false
+  };
+}
+function buildDagreLayout(count) {
+  return {
+    name: "dagre",
+    rankDir: "LR",
+    // Left to right
+    // Much more compact separation for tree-like hierarchical layouts
+    rankSep: Math.min(80, 50 + Math.sqrt(count) * 1.5),
+    // Further reduced
+    nodeSep: Math.min(40, 25 + Math.sqrt(count) * 0.8),
+    // Further reduced
+    edgeSep: Math.min(10, 5 + Math.log(count) * 0.5),
+    // Further reduced
+    // Always animate for better user experience
+    animate: true,
+    fit: true,
+    padding: 30
+    // Reduced for more compact layout
+  };
+}
+function buildTreeLayout(count) {
+  return {
+    name: "breadthfirst",
+    fit: true,
+    padding: 30,
+    // Reduced for more compact layout
+    animate: true,
+    directed: true,
+    spacingFactor: Math.min(0.9, 0.7 + 60 / (count + 50)),
+    // Compact spacing: 0.7 to 0.9
+    circle: false
+  };
+}
+function buildKlayLayout(count) {
+  return {
+    name: "klay",
+    nodeDimensionsIncludeLabels: true,
+    fit: true,
+    padding: 30,
+    // Reduced for more compact layout
+    animate: true,
+    animationDuration: 500,
+    klay: {
+      direction: "RIGHT",
+      spacing: Math.min(30, 12 + Math.sqrt(count) * 1.5),
+      // Further reduced for much denser layout
+      nodeLayering: "NETWORK_SIMPLEX",
+      layoutHierarchy: true,
+      // Increase thoroughness a bit for nicer layering on medium graphs
+      thoroughness: count < 400 ? 30 : 10
+    }
+  };
+}
+function buildFcoseLayout(count) {
+  return {
+    name: "fcose",
+    animate: true,
+    animationDuration: 600,
+    fit: true,
+    padding: 50,
+    // Scale edge length based on node count
+    idealEdgeLength: Math.min(150, 80 + Math.sqrt(count) * 3),
+    // Scale repulsion based on node count
+    nodeRepulsion: Math.min(3e4, 4e3 + count * 50),
+    // Scale separation based on node count
+    nodeSeparation: Math.min(100, 50 + Math.sqrt(count) * 2),
+    // Adjust gravity based on node count
+    gravity: 0.3,
+    // Never randomize for consistent layouts
+    randomize: false,
+    // Consistent energy for all graph sizes
+    initialEnergyOnIncremental: 0.5,
+    // Always use sampling for better performance
+    samplingType: true,
+    // Use default quality for best balance
+    quality: "default",
+    // Limit iterations for large graphs
+    numIter: Math.min(2500, 1e3 + count * 5),
+    // Use consistent cooling factor
+    coolingFactor: 0.95,
+    // Prevent infinite running
+    infinite: false
+  };
+}
+function buildCiseLayout(count, nodeData) {
+  const labelToIds = {};
+  nodeData.forEach((n) => {
+    const label = n.data?.label_ || "Unknown";
+    if (!labelToIds[label]) labelToIds[label] = [];
+    labelToIds[label].push(n.id);
+  });
+  const clusters = Object.values(labelToIds).filter((arr) => arr.length > 0);
+  return {
+    name: "cise",
+    animate: true,
+    animationDuration: 600,
+    clusters,
+    nodeSeparation: Math.min(40, 20 + Math.sqrt(count)),
+    idealInterClusterEdgeLengthCoefficient: 1.2,
+    allowNodesInsideCircle: false,
+    maxRatioOfNodesInsideCircle: 0.1,
+    springCoeff: 0.45,
+    nodeRepulsion: 4500,
+    gravity: 0.25,
+    gravityRange: 3.8,
+    fit: true,
+    padding: 50
+  };
+}
+function buildElkLayout(count) {
+  return {
+    name: "elk",
+    // elk algorithm options under `elk` key
+    elk: {
+      algorithm: "layered",
+      "elk.direction": "RIGHT",
+      "elk.layered.spacing.nodeNodeBetweenLayers": Math.min(
+        150,
+        60 + Math.sqrt(count) * 10
+      ),
+      "elk.spacing.nodeNode": Math.min(120, 40 + Math.sqrt(count) * 8),
+      "elk.layered.crossingMinimization.semiInteractive": "true"
+    },
+    fit: true,
+    padding: 50,
+    animate: true,
+    animationDuration: 500
+  };
+}
+function buildCoseLayout(count) {
+  return {
+    name: "cose",
+    // Always animate for better user experience
+    animate: true,
+    fit: true,
+    padding: 50,
+    // Scale overlap based on node count
+    nodeOverlap: Math.min(30, 15 + Math.sqrt(count)),
+    // Scale spacing based on node count
+    componentSpacing: Math.min(150, 80 + Math.sqrt(count) * 2),
+    // Increase refresh for smoother animation
+    refresh: 10,
+    // Scale parameters based on node count
+    idealEdgeLength: () => Math.min(150, 80 + Math.sqrt(count) * 2),
+    edgeElasticity: () => Math.min(150, 80 + Math.sqrt(count) * 2),
+    nodeRepulsion: () => Math.min(6e5, 2e5 + count * 1e3),
+    nestingFactor: 1.2,
+    // Adjust gravity based on node count
+    gravity: Math.min(100, 60 + Math.sqrt(count)),
+    // Limit iterations for large graphs
+    numIter: Math.min(2500, 1e3 + count * 5),
+    // Use consistent cooling factor
+    coolingFactor: 0.95
+  };
+}
+function buildConcentricLayout(count) {
+  return {
+    name: "concentric",
+    fit: true,
+    padding: 50,
+    // Always animate for better user experience
+    animate: true,
+    // Scale spacing based on node count
+    minNodeSpacing: Math.min(60, 40 + Math.log(count) * 3),
+    // Adjust level width based on node count
+    levelWidth: () => Math.max(1, 3 - Math.log(count) * 0.3),
+    // Use degree for concentric layout
+    concentric: (node) => node.degree(),
+    // Start from outside for better distribution
+    startAngle: Math.PI * 1.5
+  };
+}
+function buildBreadthfirstLayout(count) {
+  return {
+    name: "breadthfirst",
+    fit: true,
+    padding: 50,
+    // Always animate for better user experience
+    animate: true,
+    directed: true,
+    // Scale spacing based on node count
+    spacingFactor: Math.min(1.8, 1.2 + 100 / (count + 50)),
+    // Add circle option for better distribution with smaller graphs
+    circle: count < 100
+  };
+}
+function buildCircleLayout(count) {
+  return {
+    name: "circle",
+    fit: true,
+    padding: 50,
+    // Always animate for better user experience
+    animate: true,
+    // Scale radius based on node count
+    radius: Math.min(500, count * 3 + 50),
+    // Add startAngle for consistent layout
+    startAngle: Math.PI / 2
+  };
+}
+function buildGridLayout(count) {
+  const approxCols = Math.ceil(Math.sqrt(count * 1.5));
+  const cols = Math.max(approxCols, 1);
+  const rows = Math.max(Math.ceil(count / cols), 1);
+  return {
+    name: "grid",
+    fit: true,
+    padding: 40,
+    avoidOverlap: true,
+    // Extra space around each node beyond actual dimensions
+    avoidOverlapPadding: Math.min(80, 20 + Math.log(count + 1) * 10),
+    // Do NOT condense; we want uniform padding for labels
+    condense: false,
+    animate: true,
+    animationDuration: 400,
+    rows,
+    cols
+  };
+}
+var layoutFactories = {
+  cola: buildColaLayout,
+  dagre: buildDagreLayout,
+  tree: buildTreeLayout,
+  klay: buildKlayLayout,
+  fcose: buildFcoseLayout,
+  cise: buildCiseLayout,
+  elk: buildElkLayout,
+  cose: buildCoseLayout,
+  concentric: buildConcentricLayout,
+  breadthfirst: buildBreadthfirstLayout,
+  circle: buildCircleLayout,
+  grid: buildGridLayout
+};
+function getLayoutPreset(options) {
+  let { layoutName } = options;
+  const { count, nodeData = [] } = options;
+  if (layoutName === "auto") {
+    layoutName = "cola";
+  }
+  const factory = layoutFactories[layoutName] ?? layoutFactories.grid;
+  return factory(count, nodeData);
+}
+
+// src/components/cyto/contextMenuConfig.ts
+import { devLog as devLog9, errorLog } from "@petrarca/sonnet-core";
+import { toast as toast2 } from "sonner";
+var createNodeContextMenu = ({
+  cy,
+  useGraphExploration,
+  onCopyNode
+}) => {
+  devLog9("[CxtMenu] Initializing node context menu");
+  return cy.cxtmenu({
+    selector: "node",
+    commands: [
+      {
+        content: "Focus",
+        select: (ele) => {
+          const nodeId = ele.id();
+          devLog9("[CxtMenu] Focus on node and neighborhood:", nodeId);
+          useGraphExploration.getState().setFocusModeWithNeighborhood(nodeId);
+        }
+      },
+      {
+        content: "Copy",
+        select: (ele) => {
+          devLog9("[CxtMenu] Copy node to clipboard");
+          const visualGraph = ele.data("visualGraph");
+          if (visualGraph) {
+            onCopyNode?.(visualGraph);
+          } else {
+            errorLog("[CxtMenu] visualGraph not found in element data");
+          }
+        }
+      },
+      {
+        content: "Hide Node",
+        select: (ele) => {
+          const nodeId = ele.id();
+          devLog9("[CxtMenu] Hide node:", nodeId);
+          useGraphExploration.getState().hideElements([nodeId]);
+        }
+      },
+      {
+        content: "Hide Incoming",
+        select: (ele) => {
+          const nodeId = ele.id();
+          devLog9("[CxtMenu] Hide incoming (predecessors) of node:", nodeId);
+          useGraphExploration.getState().hideNodeIncoming(nodeId);
+        }
+      },
+      {
+        content: "Hide Outgoing",
+        select: (ele) => {
+          const nodeId = ele.id();
+          devLog9("[CxtMenu] Hide outgoing (successors) of node:", nodeId);
+          useGraphExploration.getState().hideNodeOutgoing(nodeId);
+        }
+      },
+      {
+        content: "Expand",
+        select: async (ele) => {
+          const nodeId = ele.id();
+          devLog9("[CxtMenu] Expanding node:", nodeId);
+          try {
+            await useGraphExploration.getState().expandNode(nodeId);
+            devLog9("[CxtMenu] Expansion complete");
+          } catch (error) {
+            errorLog("[CxtMenu] Expansion failed:", error);
+            toast2.error("Failed to expand node");
+          }
+        }
+      }
+    ],
+    menuRadius: 60,
+    // Increased for more items (default is 100)
+    fillColor: "rgba(0, 0, 0, 0.75)",
+    activeFillColor: "rgba(59, 130, 246, 0.75)",
+    // blue-500
+    activePadding: 10,
+    indicatorSize: 12,
+    separatorWidth: 2,
+    spotlightPadding: 2,
+    adaptativeNodeSpotlightRadius: true,
+    minSpotlightRadius: 12,
+    maxSpotlightRadius: 20,
+    openMenuEvents: "cxttapstart taphold",
+    itemColor: "white",
+    itemTextShadowColor: "transparent",
+    zIndex: 9999,
+    atMouse: false
+  });
+};
+var createEdgeContextMenu = ({
+  cy,
+  useGraphExploration
+}) => {
+  return cy.cxtmenu({
+    selector: "edge",
+    commands: [
+      {
+        content: "Focus",
+        select: (ele) => {
+          const edgeId = ele.id();
+          devLog9(
+            "[CxtMenu] Focus on edge (auto-direction based on selection):",
+            edgeId
+          );
+          useGraphExploration.getState().focusEdge(edgeId);
+        }
+      },
+      {
+        content: "Focus Edge Type",
+        select: (ele) => {
+          const edgeId = ele.id();
+          devLog9("[CxtMenu] Focus on edge type:", edgeId);
+          useGraphExploration.getState().focusOnEdgeType(edgeId);
+        }
+      },
+      {
+        content: "Hide Forward Path",
+        select: (ele) => {
+          const edgeId = ele.id();
+          devLog9(
+            "[CxtMenu] Hide forward path (edge + target + downstream):",
+            edgeId
+          );
+          useGraphExploration.getState().hideEdgeForwardPath(edgeId);
+        }
+      },
+      {
+        content: "Hide Reverse Path",
+        select: (ele) => {
+          const edgeId = ele.id();
+          devLog9(
+            "[CxtMenu] Hide reverse path (edge + source + upstream):",
+            edgeId
+          );
+          useGraphExploration.getState().hideEdgeReversePath(edgeId);
+        }
+      }
+    ],
+    menuRadius: 90,
+    // Increased for more items
+    fillColor: "rgba(0, 0, 0, 0.75)",
+    activeFillColor: "rgba(239, 68, 68, 0.75)",
+    // red-500
+    activePadding: 10,
+    indicatorSize: 12,
+    separatorWidth: 2,
+    spotlightPadding: 2,
+    openMenuEvents: "cxttapstart taphold",
+    itemColor: "white",
+    itemTextShadowColor: "transparent",
+    zIndex: 9999,
+    atMouse: false
+  });
+};
+
+// src/components/cyto/CytoscapeGraph.tsx
+import { toast as toast3 } from "sonner";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+try {
+  cytoscape.use(fcose);
+  cytoscape.use(cola);
+  cytoscape.use(dagre);
+  cytoscape.use(klay);
+  cytoscape.use(elk);
+  cytoscape.use(cise);
+  cxtmenu(cytoscape);
+} catch {
+}
+var ALLOWED_LAYOUTS = [
+  "auto",
+  "fcose",
+  "cola",
+  "dagre",
+  "klay",
+  "elk",
+  "cise",
+  "grid",
+  "cose",
+  "concentric",
+  "breadthfirst",
+  "tree",
+  "circle",
+  "random"
+];
+function classifyUpdate({
+  cy,
+  currentIds,
+  elementIdsRef,
+  lastLayoutRef,
+  lastFitPaddingRef,
+  currentLayout,
+  fitPadding,
+  nodeCount,
+  edgeCount
+}) {
+  const paddingChanged = fitPadding !== lastFitPaddingRef.current;
+  const cyHasElements = cy.nodes().length === nodeCount && cy.edges().length === edgeCount;
+  const layoutChanged = currentLayout !== lastLayoutRef.current;
+  if (paddingChanged && currentIds === elementIdsRef.current && cyHasElements && !layoutChanged) {
+    return "refit";
+  }
+  if (currentIds === elementIdsRef.current && cyHasElements && !layoutChanged) {
+    return "skip";
+  }
+  return "update";
+}
+function applyLayout({
+  cy,
+  chosen,
+  nodeCount,
+  nodesForLayout,
+  fitPadding
+}) {
+  const layoutOpts = getLayoutPreset({
+    layoutName: chosen,
+    count: nodeCount,
+    nodeData: nodesForLayout
+  });
+  if (chosen === "tree") {
+    const cyNodes = cy.nodes();
+    const rootCandidates = cyNodes.filter((n) => n.indegree(false) === 0);
+    if (rootCandidates.length > 0) {
+      layoutOpts.roots = rootCandidates;
+    } else if (cyNodes.length) {
+      layoutOpts.roots = cyNodes[0];
+    }
+  }
+  const getPreset = (name) => getLayoutPreset({
+    layoutName: name,
+    count: nodeCount,
+    nodeData: nodesForLayout
+  });
+  try {
+    cy.layout(layoutOpts).run();
+  } catch (e) {
+    errorLog2("Layout error, falling back to dagre:", e);
+    if (chosen === "klay") {
+      try {
+        cy.layout(getPreset("dagre")).run();
+      } catch (inner) {
+        errorLog2("Fallback layout also failed, using grid:", inner);
+        cy.layout(getPreset("grid")).run();
+      }
+    } else {
+      cy.layout(getPreset("grid")).run();
+    }
+  }
+  if (!layoutOpts.fit) {
+    cy.fit(void 0, fitPadding);
+  }
+}
+function processPendingFocus({
+  cy,
+  pendingFocus,
+  edgesRef,
+  setSelectedNodeIdsStore,
+  setSelectedEdgeStore,
+  selectedNodeIdsRef,
+  selectedEdgeRef,
+  pendingFocusActionRef
+}) {
+  devLog10("[CytoscapeGraph] Processing pending focus action", {
+    elementId: pendingFocus.elementId,
+    elementType: pendingFocus.elementType
+  });
+  setTimeout(() => {
+    const element = cy.$id(pendingFocus.elementId);
+    if (element.length === 0) {
+      devLog10(
+        "[CytoscapeGraph] Focus requested but element not found after graph update",
+        {
+          elementId: pendingFocus.elementId,
+          elementType: pendingFocus.elementType
+        }
+      );
+      pendingFocusActionRef.current = null;
+      GraphFocus_default.setState({ focusAction: null });
+      return;
+    }
+    cy.animate(
+      { zoom: 2, center: { eles: element } },
+      { duration: 500, easing: "ease-in-out-cubic" }
+    );
+    if (pendingFocus.action === "focus-and-select") {
+      selectFocusedElement({
+        cy,
+        pendingFocus,
+        element,
+        edgesRef,
+        setSelectedNodeIdsStore,
+        setSelectedEdgeStore,
+        selectedNodeIdsRef,
+        selectedEdgeRef
+      });
+    }
+    pendingFocusActionRef.current = null;
+    GraphFocus_default.setState({ focusAction: null });
+  }, 100);
+}
+function selectFocusedElement({
+  cy,
+  pendingFocus,
+  element,
+  edgesRef,
+  setSelectedNodeIdsStore,
+  setSelectedEdgeStore,
+  selectedNodeIdsRef,
+  selectedEdgeRef
+}) {
+  if (pendingFocus.elementType === "node") {
+    cy.batch(() => {
+      cy.elements().unselect();
+      element.select();
+    });
+    setSelectedNodeIdsStore([pendingFocus.elementId]);
+    selectedNodeIdsRef.current = [pendingFocus.elementId];
+    setSelectedEdgeStore(null);
+    selectedEdgeRef.current = null;
+  } else {
+    const edgeObj = edgesRef.current.find(
+      (e) => String(e.id_) === pendingFocus.elementId
+    );
+    if (edgeObj) {
+      const sourceId = String(edgeObj.start_id_);
+      const targetId = String(edgeObj.end_id_);
+      cy.batch(() => {
+        cy.elements().unselect();
+        cy.$id(sourceId).select();
+        cy.$id(targetId).select();
+        element.select();
+      });
+      setSelectedNodeIdsStore([sourceId, targetId]);
+      selectedNodeIdsRef.current = [sourceId, targetId];
+      setSelectedEdgeStore(edgeObj);
+      selectedEdgeRef.current = edgeObj;
+    }
+  }
+}
+function handleFocusStateChange({
+  focusAction,
+  cyRef,
+  edgesRef,
+  selectedNodeIdsRef,
+  selectedEdgeRef,
+  setSelectedNodeIdsStore,
+  setSelectedEdgeStore,
+  pendingFocusActionRef,
+  baseNormalized
+}) {
+  if (!focusAction || !cyRef.current) return;
+  devLog10("[CytoscapeGraph] Processing focus action", {
+    elementId: focusAction.elementId,
+    timestamp: focusAction.timestamp
+  });
+  const cy = cyRef.current;
+  const elementId = focusAction.elementId;
+  const element = cy.$id(elementId);
+  if (element.length > 0) {
+    handleImmediateFocus({
+      cy,
+      element,
+      focusAction,
+      edgesRef,
+      selectedNodeIdsRef,
+      selectedEdgeRef,
+      setSelectedNodeIdsStore,
+      setSelectedEdgeStore
+    });
+    return;
+  }
+  devLog10("[CytoscapeGraph] Element not visible, setting up override", {
+    elementId,
+    elementType: focusAction.elementType
+  });
+  pendingFocusActionRef.current = focusAction;
+  GraphFocus_default.setState((state) => {
+    const overrides = new Set(state.overrideElementIds);
+    overrides.add(elementId);
+    if (focusAction.elementType === "edge") {
+      let edgeObj = edgesRef.current.find((e) => String(e.id_) === elementId);
+      if (!edgeObj) {
+        edgeObj = baseNormalized.edgesById[elementId];
+      }
+      if (edgeObj) {
+        overrides.add(String(edgeObj.start_id_));
+        overrides.add(String(edgeObj.end_id_));
+        devLog10("[CytoscapeGraph] Added edge and endpoints to overrides", {
+          edgeId: elementId,
+          startId: edgeObj.start_id_,
+          endId: edgeObj.end_id_
+        });
+      }
+    } else {
+      devLog10("[CytoscapeGraph] Added node to overrides", { nodeId: elementId });
+    }
+    return { overrideElementIds: overrides };
+  });
+}
+function handleImmediateFocus({
+  cy,
+  element,
+  focusAction,
+  edgesRef,
+  selectedNodeIdsRef,
+  selectedEdgeRef,
+  setSelectedNodeIdsStore,
+  setSelectedEdgeStore
+}) {
+  const elementId = focusAction.elementId;
+  devLog10("[CytoscapeGraph] Element already visible, focusing immediately", {
+    elementId,
+    elementType: focusAction.elementType
+  });
+  cy.animate(
+    { zoom: 2, center: { eles: element } },
+    { duration: 500, easing: "ease-in-out-cubic" }
+  );
+  if (focusAction.action === "focus-and-select") {
+    selectFocusedElement({
+      cy,
+      pendingFocus: focusAction,
+      element,
+      edgesRef,
+      setSelectedNodeIdsStore,
+      setSelectedEdgeStore,
+      selectedNodeIdsRef,
+      selectedEdgeRef
+    });
+  }
+  GraphFocus_default.setState({ focusAction: null });
+}
+function computeGraphViewState({
+  hasNodes,
+  hasHiddenElements,
+  isFocusMode,
+  fullscreen
+}) {
+  const hasExplorationState = hasHiddenElements || isFocusMode;
+  return {
+    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"
+  };
+}
+function useFullscreen(fitToScreen, cyRef) {
+  const [fullscreen, setFullscreen] = useState4(false);
+  useEffect3(() => {
+    if (fullscreen) {
+      const prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      fitToScreen();
+      const handleKey = (e) => {
+        if (e.key === "Escape") setFullscreen(false);
+      };
+      window.addEventListener("keydown", handleKey);
+      return () => {
+        document.body.style.overflow = prevOverflow;
+        window.removeEventListener("keydown", handleKey);
+      };
+    }
+  }, [fullscreen, fitToScreen]);
+  useEffect3(() => {
+    if (!fullscreen) return;
+    const id = setTimeout(() => {
+      if (cyRef.current) {
+        cyRef.current.resize();
+        fitToScreen();
+      }
+    }, 50);
+    return () => clearTimeout(id);
+  }, [fullscreen, fitToScreen, cyRef]);
+  return {
+    fullscreen,
+    setFullscreen,
+    toggleFullscreen: useCallback3(() => setFullscreen((f) => !f), [])
+  };
+}
+function setupCytoscapeEventHandlers({
+  cy,
+  edgesRef,
+  selectedNodeIdsRef,
+  selectedEdgeRef,
+  setSelectedNodeIdsStore,
+  setSelectedEdgeStore,
+  clearSelectionStore,
+  useGraphExploration,
+  onCopyNode
+}) {
+  const updateSelectedNodeIds = (nodeIds) => {
+    setSelectedNodeIdsStore(nodeIds);
+    selectedNodeIdsRef.current = nodeIds;
+  };
+  const updateSelectedEdge = (edgeToSet) => {
+    setSelectedEdgeStore(edgeToSet);
+    selectedEdgeRef.current = edgeToSet;
+  };
+  const clearAll = () => {
+    cy.batch(() => {
+      cy.elements().unselect();
+    });
+    clearSelectionStore();
+    selectedNodeIdsRef.current = [];
+    selectedEdgeRef.current = null;
+  };
+  cy.on("select", "node", (evt) => {
+    const nodeEle = evt.target;
+    const evtCy = evt.cy;
+    const id = nodeEle.id();
+    devLog10("[CytoscapeGraph] node selected", { id });
+    if (selectedEdgeRef.current) {
+      devLog10("[CytoscapeGraph] clearing edge due to node selection", {
+        edgeId: selectedEdgeRef.current.id_
+      });
+      updateSelectedEdge(null);
+    }
+    let selectedIds = evtCy.$("node:selected").map((e) => e.id());
+    if (selectedIds.length > 2) {
+      const currentOrder = [...selectedNodeIdsRef.current];
+      const updatedOrder = [...currentOrder.filter((cid) => cid !== id), id];
+      const keep = updatedOrder.slice(-2);
+      evtCy.batch(() => {
+        evtCy.$("node:selected").unselect();
+        keep.forEach((kid) => evtCy.$id(kid).select());
+      });
+      selectedIds = keep;
+      devLog10("[CytoscapeGraph] enforced max 2 after select", { keep });
+    }
+    updateSelectedNodeIds(selectedIds);
+  });
+  cy.on("unselect", "node", (evt) => {
+    devLog10("[CytoscapeGraph] node unselected", { id: evt.target.id() });
+    const selectedIds = evt.cy.$("node:selected").map((e) => e.id());
+    updateSelectedNodeIds(selectedIds);
+  });
+  cy.on("tap", "edge", (evt) => {
+    const edgeEle = evt.target;
+    const edgeId = edgeEle.id();
+    const edgeObj = edgesRef.current.find((e) => String(e.id_) === edgeId);
+    if (!edgeObj) return;
+    const sourceId = edgeEle.data("source");
+    const targetId = edgeEle.data("target");
+    const evtCy = evt.cy;
+    const currentlySelectedNodes = evtCy.$("node:selected").toArray();
+    if (currentlySelectedNodes.length === 1) {
+      const selectedNodeId = currentlySelectedNodes[0].id();
+      if (selectedNodeId === sourceId || selectedNodeId === targetId) {
+        devLog10("[CytoscapeGraph] tap edge - node+edge selection", {
+          edgeId,
+          selectedNode: selectedNodeId,
+          direction: selectedNodeId === sourceId ? "outgoing" : "incoming"
+        });
+        evtCy.batch(() => {
+          evtCy.elements().unselect();
+          evtCy.$id(selectedNodeId).select();
+          edgeEle.select();
+        });
+        updateSelectedNodeIds([selectedNodeId]);
+        updateSelectedEdge(edgeObj);
+        return;
+      }
+    }
+    devLog10("[CytoscapeGraph] tap edge - default (both endpoints)", { edgeId });
+    evtCy.batch(() => {
+      evtCy.elements().unselect();
+      evtCy.$id(sourceId).select();
+      evtCy.$id(targetId).select();
+      edgeEle.select();
+    });
+    updateSelectedNodeIds([sourceId, targetId]);
+    updateSelectedEdge(edgeObj);
+  });
+  cy.on("tap", (evt) => {
+    if (evt.target === cy) clearAll();
+  });
+  createNodeContextMenu({ cy, useGraphExploration, onCopyNode });
+  createEdgeContextMenu({ cy, useGraphExploration });
+}
+function CytoscapeGraph({
+  layout: initialLayout = "auto",
+  fitPadding = 30,
+  onCopyNode,
+  extraToolbarContent
+}) {
+  const containerRef = useRef2(null);
+  const cyRef = useRef2(null);
+  const isInitializedRef = useRef2(false);
+  const [currentLayout, setCurrentLayout] = useState4(initialLayout);
+  const nodesRef = useRef2([]);
+  const edgesRef = useRef2([]);
+  const pendingFocusActionRef = useRef2(null);
+  const cytoData = useCytoscapeData();
+  const live = useLiveGraphData();
+  const nodes = live.nodes;
+  const edges = live.edges;
+  const baseNormalized = live.baseNormalized;
+  const useGraphFilter2 = useWorkspaceGraphFilter();
+  const useGraphExploration = useWorkspaceGraphExploration();
+  const useSelection3 = useWorkspaceSelection();
+  const lastDataChangeTime = useGraphFilter2((s) => s.lastDataChangeTime);
+  const resetView = useGraphExploration((s) => s.resetView);
+  const hasHiddenElements = useGraphExploration(
+    (s) => s.hiddenElementIds.size > 0
+  );
+  const isFocusMode = useGraphExploration((s) => s.isFocusMode);
+  const {
+    setSelectedNodeIds: setSelectedNodeIdsStore,
+    setSelectedEdge: setSelectedEdgeStore,
+    clear: clearSelectionStore
+  } = useSelection3.getState();
+  const selectedNodeIdsRef = useRef2(
+    useSelection3.getState().selectedNodeIds
+  );
+  const selectedEdgeRef = useRef2(
+    useSelection3.getState().selectedEdge
+  );
+  useEffect3(() => {
+    const state = useSelection3.getState();
+    selectedNodeIdsRef.current = state.selectedNodeIds;
+    selectedEdgeRef.current = state.selectedEdge;
+    const cy = cyRef.current;
+    if (cy && (state.selectedNodeIds.length || state.selectedEdge)) {
+      cy.batch(() => {
+        cy.elements().unselect();
+        state.selectedNodeIds.forEach((id) => cy.$id(id).select());
+        if (state.selectedEdge) {
+          const edge = cy.$id(String(state.selectedEdge.id_));
+          if (edge) {
+            edge.select();
+            cy.$id(edge.data("source")).select();
+            cy.$id(edge.data("target")).select();
+          }
+        }
+      });
+    }
+  }, [useSelection3]);
+  useEffect3(() => {
+    nodesRef.current = nodes;
+  }, [nodes]);
+  useEffect3(() => {
+    edgesRef.current = edges;
+  }, [edges]);
+  useEffect3(() => {
+    if (!containerRef.current || cyRef.current) return;
+    isInitializedRef.current = true;
+    cyRef.current = cytoscape({
+      container: containerRef.current,
+      elements: [],
+      selectionType: "additive",
+      // allow clicking multiple nodes without modifier
+      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": "#ff1a1a",
+            "target-arrow-color": "#ff1a1a",
+            width: 8,
+            // even thicker
+            "z-index": 999,
+            "font-size": "11px",
+            "font-weight": "bold",
+            "text-background-opacity": 1,
+            "text-background-color": "#ffffff",
+            "text-background-padding": "3px",
+            "arrow-scale": 1.35,
+            opacity: 1,
+            "overlay-color": "#ff1a1a",
+            "overlay-opacity": 0.08
+          }
+        },
+        {
+          selector: "node:selected",
+          style: {
+            "border-width": 10,
+            // thicker circle outline
+            "border-color": "#ff1a1a",
+            "border-opacity": 1,
+            "background-opacity": 1,
+            "text-background-opacity": 1,
+            "text-background-color": "#ffffff",
+            "text-background-padding": "4px",
+            "overlay-color": "#ff1a1a",
+            "overlay-opacity": 0.18,
+            width: 48,
+            // slight size bump from 40
+            height: 48
+          }
+        }
+      ],
+      layout: { name: "grid", fit: true, avoidOverlap: true, condense: true },
+      // initial quick layout
+      wheelSensitivity: 0.2
+    });
+    const cy = cyRef.current;
+    if (cy) {
+      setupCytoscapeEventHandlers({
+        cy,
+        edgesRef,
+        selectedNodeIdsRef,
+        selectedEdgeRef,
+        setSelectedNodeIdsStore,
+        setSelectedEdgeStore,
+        clearSelectionStore,
+        useGraphExploration,
+        onCopyNode
+      });
+    }
+    return () => {
+      cyRef.current?.destroy();
+      cyRef.current = null;
+    };
+  }, []);
+  const elementIdsRef = useRef2("");
+  const lastLayoutRef = useRef2("");
+  const lastFitPaddingRef = useRef2(fitPadding);
+  useEffect3(() => {
+    const cy = cyRef.current;
+    if (!cy || !isInitializedRef.current) return;
+    const currentIds = nodes.map((n) => n.id_).sort().join(",") + "|" + edges.map((e) => e.id_).sort().join(",");
+    const action = classifyUpdate({
+      cy,
+      currentIds,
+      elementIdsRef,
+      lastLayoutRef,
+      lastFitPaddingRef,
+      currentLayout,
+      fitPadding,
+      nodeCount: nodes.length,
+      edgeCount: edges.length
+    });
+    if (action === "refit") {
+      lastFitPaddingRef.current = fitPadding;
+      cy.fit(void 0, fitPadding);
+      return;
+    }
+    if (action === "skip") {
+      return;
+    }
+    elementIdsRef.current = currentIds;
+    lastLayoutRef.current = currentLayout;
+    lastFitPaddingRef.current = fitPadding;
+    const { nodes: nodeElements, edges: edgeElements } = cytoData.elements;
+    cy.batch(() => {
+      cy.elements().remove();
+      cy.add([...nodeElements, ...edgeElements]);
+    });
+    if (selectedNodeIdsRef.current.length > 0 || selectedEdgeRef.current) {
+      cy.batch(() => {
+        cy.elements().unselect();
+        selectedNodeIdsRef.current.forEach((id) => cy.$id(id).select());
+        if (selectedEdgeRef.current) {
+          const edge = cy.$id(String(selectedEdgeRef.current.id_));
+          if (edge) {
+            edge.select();
+            cy.$id(edge.data("source")).select();
+            cy.$id(edge.data("target")).select();
+          }
+        }
+      });
+    }
+    const chosen = ALLOWED_LAYOUTS.includes(
+      currentLayout
+    ) ? currentLayout : "auto";
+    const nodesForLayout = nodes.map((n) => ({
+      id: String(n.id_),
+      data: { label_: n.label_ }
+    }));
+    applyLayout({
+      cy,
+      chosen,
+      nodeCount: nodes.length,
+      nodesForLayout,
+      fitPadding
+    });
+    const pendingFocus = pendingFocusActionRef.current;
+    if (pendingFocus) {
+      processPendingFocus({
+        cy,
+        pendingFocus,
+        edgesRef,
+        setSelectedNodeIdsStore,
+        setSelectedEdgeStore,
+        selectedNodeIdsRef,
+        selectedEdgeRef,
+        pendingFocusActionRef
+      });
+    }
+  }, [nodes, edges, currentLayout, fitPadding]);
+  useEffect3(() => {
+    if (!cyRef.current) return;
+    cyRef.current.elements().unselect();
+    clearSelectionStore();
+  }, [lastDataChangeTime, clearSelectionStore]);
+  useEffect3(() => {
+    const unsubscribe = GraphFocus_default.subscribe((state) => {
+      handleFocusStateChange({
+        focusAction: state.focusAction,
+        cyRef,
+        edgesRef,
+        selectedNodeIdsRef,
+        selectedEdgeRef,
+        setSelectedNodeIdsStore,
+        setSelectedEdgeStore,
+        pendingFocusActionRef,
+        baseNormalized
+      });
+    });
+    return unsubscribe;
+  }, [baseNormalized, setSelectedEdgeStore, setSelectedNodeIdsStore]);
+  const updateLayout = (newLayout) => {
+    setCurrentLayout(newLayout);
+  };
+  const fitToScreen = useCallback3(() => {
+    if (cyRef.current) {
+      cyRef.current.fit(void 0, fitPadding);
+    }
+  }, [fitPadding]);
+  useEffect3(() => {
+    fitToScreen();
+  }, [nodes.length, fitToScreen]);
+  useEffect3(() => {
+    if (!isInitializedRef.current) return;
+    const handleResize = () => cyRef.current?.resize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const { fullscreen, toggleFullscreen } = useFullscreen(fitToScreen, cyRef);
+  const {
+    outerClass,
+    innerClass,
+    showEmptyMessage,
+    showFilteredMessage,
+    showControls
+  } = computeGraphViewState({
+    hasNodes: nodes.length > 0,
+    hasHiddenElements,
+    isFocusMode,
+    fullscreen
+  });
+  return /* @__PURE__ */ jsx8("div", { className: outerClass, children: /* @__PURE__ */ jsxs7("div", { className: innerClass, children: [
+    /* @__PURE__ */ jsx8("div", { ref: containerRef, className: "absolute inset-0" }),
+    showEmptyMessage && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center text-xs text-gray-500 pointer-events-none select-none", children: "No graph data to visualize (run a query or check the filters)" }),
+    showFilteredMessage && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center text-xs text-gray-500 pointer-events-none select-none", children: 'All elements are hidden or filtered (click "Reset Focus" to restore)' }),
+    showControls && /* @__PURE__ */ jsx8(
+      CytoscapeControls_default,
+      {
+        updateLayout,
+        fitToScreen,
+        onResetView: () => {
+          resetView();
+          toast3.success(
+            isFocusMode ? "Focus mode cleared" : "Hidden elements restored"
+          );
+        },
+        hasHiddenElements,
+        isFocusMode,
+        extraToolbarContent,
+        zoomIn: () => {
+          if (cyRef.current) {
+            const z = cyRef.current.zoom();
+            cyRef.current.zoom({
+              level: Math.min(z * 1.2, 5),
+              renderedPosition: {
+                x: cyRef.current.width() / 2,
+                y: cyRef.current.height() / 2
+              }
+            });
+          }
+        },
+        zoomOut: () => {
+          if (cyRef.current) {
+            const z = cyRef.current.zoom();
+            cyRef.current.zoom({
+              level: Math.max(z / 1.2, 0.1),
+              renderedPosition: {
+                x: cyRef.current.width() / 2,
+                y: cyRef.current.height() / 2
+              }
+            });
+          }
+        },
+        currentLayout,
+        fullscreen,
+        toggleFullscreen
+      }
+    )
+  ] }) });
+}
+var CytoscapeGraph_default = CytoscapeGraph;
+
+// src/components/GraphVisualizer.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function GraphVisualizer({
+  onCopyNode,
+  extraToolbarContent
+}) {
+  const { renderer } = useGraphRenderer();
+  return /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full flex flex-col overflow-hidden", children: /* @__PURE__ */ jsxs8("div", { className: "flex-1 h-full", children: [
+    renderer === "reagraph" && /* @__PURE__ */ jsx9(
+      ReaGraph_default,
+      {
+        onCopyNode,
+        extraToolbarContent
+      },
+      "reagraph"
+    ),
+    renderer === "cytoscape" && /* @__PURE__ */ jsx9(
+      CytoscapeGraph_default,
+      {
+        onCopyNode,
+        extraToolbarContent
+      },
+      "cytoscape"
+    )
+  ] }) });
+}
+var GraphVisualizer_default = GraphVisualizer;
+
+// src/components/ActionPanel/ActionPanel.tsx
+import { Card as Card5 } from "@petrarca/sonnet-ui";
+
+// src/components/ActionPanel/NodeInfoCard.tsx
+import { useState as useState5 } from "react";
+import {
+  Card as Card3,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@petrarca/sonnet-ui";
+import { copyTextToClipboard } from "@petrarca/sonnet-core";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function NodeInfoCard({ node }) {
+  const [showProperties, setShowProperties] = useState5(false);
+  return /* @__PURE__ */ jsxs9(
+    Card3,
+    {
+      className: "w-full rounded-lg overflow-hidden bg-gray-100 border p-4 shadow-xs",
+      style: {
+        background: "#f3f4f6",
+        borderLeft: `4px solid ${node.visual.color}`
+      },
+      children: [
+        /* @__PURE__ */ jsx10("p", { className: "leading-tight font-semibold mb-0", children: node.label_ }),
+        /* @__PURE__ */ jsx10("p", { className: "leading-tight mb-1", children: node.visual.displayName }),
+        /* @__PURE__ */ jsx10(
+          "p",
+          {
+            className: "text-xs text-muted-foreground cursor-pointer select-all mb-2",
+            onClick: () => copyTextToClipboard(String(node.id_)),
+            title: "Click to copy id",
+            children: node.id_
+          }
+        ),
+        /* @__PURE__ */ jsxs9(Collapsible, { open: showProperties, onOpenChange: setShowProperties, children: [
+          /* @__PURE__ */ jsx10(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx10("button", { className: "text-xs cursor-pointer", children: showProperties ? "Hide" : "Show more" }) }),
+          /* @__PURE__ */ jsx10(CollapsibleContent, { children: /* @__PURE__ */ jsxs9("ul", { className: "list-none mt-2", children: [
+            /* @__PURE__ */ jsx10("p", { className: "text-sm font-semibold mb-1 tracking-wide", children: "Properties" }),
+            Object.entries(node.properties_ || {}).map(([key, value]) => /* @__PURE__ */ jsxs9("li", { className: "mb-2 leading-tight", children: [
+              /* @__PURE__ */ jsx10("p", { className: "text-xs text-slate-600 uppercase tracking-wide", children: key }),
+              /* @__PURE__ */ jsx10(
+                "p",
+                {
+                  className: "text-sm truncate max-w-[190px] cursor-pointer",
+                  onClick: () => copyTextToClipboard(String(value)),
+                  title: "Click to copy value",
+                  children: String(value)
+                }
+              )
+            ] }, key))
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+var NodeInfoCard_default = NodeInfoCard;
+
+// src/components/ActionPanel/EdgeInfoCard.tsx
+import { useState as useState6 } from "react";
+import {
+  Card as Card4,
+  Collapsible as Collapsible2,
+  CollapsibleContent as CollapsibleContent2,
+  CollapsibleTrigger as CollapsibleTrigger2
+} from "@petrarca/sonnet-ui";
+import { ArrowDown } from "lucide-react";
+import { copyTextToClipboard as copyTextToClipboard2 } from "@petrarca/sonnet-core";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function EdgeInfoCard({ edge }) {
+  const [showProperties, setShowProperties] = useState6(false);
+  return /* @__PURE__ */ jsxs10(
+    Card4,
+    {
+      className: "w-full rounded-lg overflow-hidden bg-gray-100 border p-4 shadow-xs",
+      style: {
+        background: "#f3f4f6",
+        borderLeft: `4px solid ${edge.visual.color}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs10("p", { className: "leading-tight mb-1", children: [
+          /* @__PURE__ */ jsx11(ArrowDown, { className: "inline-block mr-1 opacity-70 align-middle" }),
+          /* @__PURE__ */ jsx11("strong", { className: "font-semibold align-middle", children: edge.label_ })
+        ] }),
+        edge.id_ && /* @__PURE__ */ jsx11(
+          "p",
+          {
+            className: "text-xs text-muted-foreground select-all cursor-pointer mt-1 mb-2",
+            title: "Click to copy edge id",
+            onClick: () => copyTextToClipboard2(String(edge.id_)),
+            children: edge.id_
+          }
+        ),
+        edge.properties_ && Object.keys(edge.properties_).length > 0 && /* @__PURE__ */ jsxs10(Collapsible2, { open: showProperties, onOpenChange: setShowProperties, children: [
+          /* @__PURE__ */ jsx11(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsx11("button", { className: "text-xs cursor-pointer", children: showProperties ? "Hide" : "Show more" }) }),
+          /* @__PURE__ */ jsx11(CollapsibleContent2, { children: /* @__PURE__ */ jsxs10("ul", { className: "list-none mt-2", children: [
+            /* @__PURE__ */ jsx11("p", { className: "text-sm font-semibold mb-1 tracking-wide", children: "Properties" }),
+            Object.entries(edge.properties_ || {}).map(([key, value]) => /* @__PURE__ */ jsxs10("li", { className: "mb-2 leading-tight", children: [
+              /* @__PURE__ */ jsx11("p", { className: "text-xs text-slate-600 uppercase tracking-wide", children: key }),
+              /* @__PURE__ */ jsx11(
+                "p",
+                {
+                  className: "text-sm truncate max-w-[190px] cursor-pointer",
+                  onClick: () => copyTextToClipboard2(String(value)),
+                  title: "Click to copy value",
+                  children: String(value)
+                }
+              )
+            ] }, key))
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+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 { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function computeEdgeToNodeLabels(nodesById, edgesById) {
+  const mapping = {};
+  for (const edge of Object.values(edgesById)) {
+    const edgeLabel = edge.label_;
+    const startNode = nodesById[String(edge.start_id_)];
+    const endNode = nodesById[String(edge.end_id_)];
+    if (!mapping[edgeLabel]) {
+      mapping[edgeLabel] = /* @__PURE__ */ new Set();
+    }
+    if (startNode) mapping[edgeLabel].add(startNode.label_);
+    if (endNode) mapping[edgeLabel].add(endNode.label_);
+  }
+  const result = {};
+  for (const [edgeLabel, nodeLabels] of Object.entries(mapping)) {
+    result[edgeLabel] = Array.from(nodeLabels);
+  }
+  return result;
+}
+function resolveBadgeColor(isAllDisabled, filters, label, colorPalette, activeColor) {
+  if (isAllDisabled) return colorPalette["faded"];
+  if (filters.length === 0 || filters.includes(label))
+    return colorPalette[activeColor];
+  return colorPalette["faded"];
+}
+function AllToggleBadge({
+  allDisabled,
+  colorPalette,
+  count,
+  onToggle,
+  badgeKey
+}) {
+  const bgColor = allDisabled ? colorPalette["faded"] : colorPalette["neutral"];
+  return /* @__PURE__ */ jsxs11(
+    Badge,
+    {
+      className: "cursor-pointer text-sm px-3 py-1",
+      style: {
+        textTransform: "none",
+        backgroundColor: bgColor,
+        borderRadius: "10px"
+      },
+      onClick: onToggle,
+      children: [
+        "* (",
+        formatNumber(count),
+        ")"
+      ]
+    },
+    badgeKey
+  );
+}
+function NodeLabelBadges({
+  labels,
+  labelCounts,
+  colorPalette,
+  allLabelsDisabled,
+  nodeLabelFilters,
+  toggleNodeLabelFilter
+}) {
+  return labels.map((label) => {
+    const bgColor = resolveBadgeColor(
+      allLabelsDisabled,
+      nodeLabelFilters,
+      label,
+      colorPalette,
+      label
+    );
+    return /* @__PURE__ */ jsxs11(
+      Badge,
+      {
+        className: "cursor-pointer text-sm px-3 py-1",
+        style: {
+          textTransform: "none",
+          backgroundColor: bgColor,
+          borderRadius: "10px"
+        },
+        onClick: () => toggleNodeLabelFilter(label, labels),
+        children: [
+          label,
+          " (",
+          formatNumber(labelCounts[label]),
+          ")"
+        ]
+      },
+      label
+    );
+  });
+}
+function EdgeLabelBadges({
+  labels,
+  edgeLabelCounts,
+  colorPalette,
+  allEdgeLabelsDisabled,
+  edgeLabelFilters,
+  toggleEdgeLabelFilter,
+  edgeToNodeLabels
+}) {
+  return labels.map((label) => {
+    const bgColor = resolveBadgeColor(
+      allEdgeLabelsDisabled,
+      edgeLabelFilters,
+      label,
+      colorPalette,
+      "neutral"
+    );
+    return /* @__PURE__ */ jsxs11(
+      Badge,
+      {
+        className: "cursor-pointer text-sm px-3 py-1",
+        style: {
+          textTransform: "none",
+          backgroundColor: bgColor,
+          borderRadius: "10px"
+        },
+        onClick: () => toggleEdgeLabelFilter(label, labels, edgeToNodeLabels),
+        children: [
+          label,
+          " (",
+          formatNumber(edgeLabelCounts[label]),
+          ")"
+        ]
+      },
+      label
+    );
+  });
+}
+function GraphOverview({
+  stats,
+  colorPalette,
+  labelCounts,
+  edgeLabelCounts,
+  edgeToNodeLabels
+}) {
+  const useGraphFilter2 = useWorkspaceGraphFilter();
+  const nodeLabelFilters = useGraphFilter2((state) => state.nodeLabelFilters);
+  const allLabelsDisabled = useGraphFilter2((state) => state.allLabelsDisabled);
+  const edgeLabelFilters = useGraphFilter2((state) => state.edgeLabelFilters);
+  const allEdgeLabelsDisabled = useGraphFilter2(
+    (state) => state.allEdgeLabelsDisabled
+  );
+  const toggleNodeLabelFilter = useGraphFilter2(
+    (state) => state.toggleNodeLabelFilter
+  );
+  const clearNodeLabelFilters = useGraphFilter2(
+    (state) => state.clearNodeLabelFilters
+  );
+  const toggleAllLabelsDisabled = useGraphFilter2(
+    (state) => state.toggleAllLabelsDisabled
+  );
+  const toggleEdgeLabelFilter = useGraphFilter2(
+    (state) => state.toggleEdgeLabelFilter
+  );
+  const clearEdgeLabelFilters = useGraphFilter2(
+    (state) => state.clearEdgeLabelFilters
+  );
+  const toggleAllEdgeLabelsDisabled = useGraphFilter2(
+    (state) => state.toggleAllEdgeLabelsDisabled
+  );
+  const allLabels = Object.keys(labelCounts).sort();
+  devLog11("[Overview] Rendering labels", {
+    labels: allLabels,
+    colorKeys: Object.keys(colorPalette || {}),
+    labelCounts,
+    stats
+  });
+  const allEdgeLabels = Object.keys(edgeLabelCounts || {}).sort();
+  const handleNodeToggle = () => {
+    if (allLabelsDisabled) {
+      toggleAllLabelsDisabled();
+      clearNodeLabelFilters();
+    } else {
+      toggleAllLabelsDisabled();
+    }
+  };
+  const handleEdgeToggle = () => {
+    if (allEdgeLabelsDisabled) {
+      toggleAllEdgeLabelsDisabled();
+      clearEdgeLabelFilters();
+    } else {
+      toggleAllEdgeLabelsDisabled();
+    }
+  };
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm font-semibold", children: "Overview" }),
+    allLabels.length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Node Labels" }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start gap-2", children: [
+        /* @__PURE__ */ jsx12(
+          AllToggleBadge,
+          {
+            allDisabled: allLabelsDisabled,
+            colorPalette,
+            count: stats.nodes,
+            onToggle: handleNodeToggle,
+            badgeKey: "all"
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          NodeLabelBadges,
+          {
+            labels: allLabels,
+            labelCounts,
+            colorPalette,
+            allLabelsDisabled,
+            nodeLabelFilters,
+            toggleNodeLabelFilter
+          }
+        )
+      ] })
+    ] }),
+    allEdgeLabels.length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Edge Types" }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start gap-2", children: [
+        /* @__PURE__ */ jsx12(
+          AllToggleBadge,
+          {
+            allDisabled: allEdgeLabelsDisabled,
+            colorPalette,
+            count: stats.edges,
+            onToggle: handleEdgeToggle,
+            badgeKey: "edge-all"
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          EdgeLabelBadges,
+          {
+            labels: allEdgeLabels,
+            edgeLabelCounts,
+            colorPalette,
+            allEdgeLabelsDisabled,
+            edgeLabelFilters,
+            toggleEdgeLabelFilter,
+            edgeToNodeLabels
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function Overview() {
+  const { stats, colorPalette, labelCounts, edgeLabelCounts, baseNormalized } = useLiveGraphData();
+  const edgeToNodeLabels = useMemo4(() => {
+    if (!baseNormalized?.nodesById || !baseNormalized?.edgesById) return {};
+    return computeEdgeToNodeLabels(
+      baseNormalized.nodesById,
+      baseNormalized.edgesById
+    );
+  }, [baseNormalized]);
+  if (stats && stats.values != null && stats.values > 0) {
+    return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm font-semibold", children: "Overview" }),
+      /* @__PURE__ */ jsxs11("p", { className: "text-sm text-slate-700", children: [
+        formatNumber(stats.values),
+        " Values"
+      ] })
+    ] });
+  }
+  if (stats && stats.nodes > 0 && colorPalette) {
+    return /* @__PURE__ */ jsx12(
+      GraphOverview,
+      {
+        stats,
+        colorPalette,
+        labelCounts,
+        edgeLabelCounts,
+        edgeToNodeLabels
+      }
+    );
+  }
+  return null;
+}
+var Overview_default = Overview;
+
+// src/components/ActionPanel/ActionPanel.tsx
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function ActionPanel({ actions }) {
+  const useSelection3 = useWorkspaceSelection();
+  const selectedNodeIds = useSelection3(
+    (s) => s.selectedNodeIds
+  );
+  const selectedEdge = useSelection3((s) => s.selectedEdge);
+  const live = useLiveGraphData();
+  const selectedNodes = useMemo5(
+    () => selectedNodeIds.map((id) => live.normalized.nodesById[id]).filter(Boolean),
+    [selectedNodeIds, live.normalized]
+  );
+  const firstNode = selectedNodes[0];
+  const secondNode = selectedNodes?.[1];
+  const hasEdge = !!selectedEdge;
+  const showOverview = !firstNode && !hasEdge;
+  return /* @__PURE__ */ jsxs12(
+    Card5,
+    {
+      className: "h-full min-w-64 flex flex-col bg-gray-50 shadow-xs p-4",
+      style: { maxHeight: "100%", overflow: "hidden" },
+      children: [
+        actions && /* @__PURE__ */ jsx13("div", { className: "flex-shrink-0 mb-2", children: actions }),
+        /* @__PURE__ */ jsx13("div", { className: "flex-1 overflow-auto pr-1", children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-4", children: [
+          firstNode && /* @__PURE__ */ jsx13(NodeInfoCard_default, { node: firstNode }),
+          hasEdge && selectedEdge && /* @__PURE__ */ jsx13(EdgeInfoCard_default, { edge: selectedEdge }),
+          secondNode && /* @__PURE__ */ jsx13(NodeInfoCard_default, { node: secondNode }),
+          showOverview && /* @__PURE__ */ jsx13(Overview_default, {})
+        ] }) })
+      ]
+    }
+  );
+}
+var ActionPanel_default = ActionPanel;
+export {
+  ActionPanel_default as ActionPanel,
+  EMPTY_NORMALIZED,
+  EdgeInfoCard_default as EdgeInfoCard,
+  GraphRendererProvider,
+  GraphStoresContext,
+  GraphVisualizer_default as GraphVisualizer,
+  NodeInfoCard_default as NodeInfoCard,
+  Overview_default as Overview,
+  buildColorPalette,
+  buildColorPaletteFromNodes,
+  createActionPanelStore,
+  createGraphDataStore,
+  createGraphExplorationStore,
+  createGraphFilterStore,
+  createGraphFocusStore,
+  createSelectionStore,
+  enrichEdge,
+  enrichEdges,
+  enrichNode,
+  enrichNodes,
+  extractDisplayLabel,
+  isRawGraphNode,
+  isVisualEdge,
+  isVisualNode,
+  normalizeGraph,
+  toCytoscapeEdge,
+  toCytoscapeNode,
+  toReagraphEdge,
+  toReagraphNode,
+  useActionPanelStore,
+  useCytoscapeData,
+  GraphFocus_default as useGraphFocus,
+  useGraphRenderer,
+  useLiveGraphData,
+  useReagraphData,
+  useWorkspaceGraphData,
+  useWorkspaceGraphExploration,
+  useWorkspaceGraphFilter,
+  useWorkspaceSelection
+};
+//# sourceMappingURL=index.js.map