@opentrace/opentrace 0.4.0-rc.635 → 0.4.0-rc.641

package/dist/lib/{SidePanel-BaXstpCn.js → SidePanel-CmyYalhz.js}

@@ -8,9 +8,9 @@ import { p as parseGitHubUrl, h as parseGitLabUrl, j as parseBitbucketUrl, k as
 import { V as useResizablePanel, Q as PanelResizeHandle, o as DEFAULT_LAYOUT_CONFIG, R as PhysicsPanel, z as GraphToolbar, y as GraphLegend, P as PixiGraphCanvas, U as useDiscoverTree, p as DiscoverPanel, b6 as useResizablePanelHeight, w as FilterPanel } from "./useDiscoverTree-D0ibE3xF.js";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { A as AddRepoModal, n as normalizeRepoUrl, I as IndexingProgress, d as detectProvider } from "./IndexingProgress-oSLMNtVa.js";
 import { g as getNodeColor } from "./nodeColors-DlBHz1C_.js";
 import { c as getLinkColor, u as useCommunities, d as useHighlights } from "./communityColors-CZf-Unx2.js";
-import { A as AddRepoModal, n as normalizeRepoUrl, I as IndexingProgress, d as detectProvider } from "./IndexingProgress-oSLMNtVa.js";
 import { D as DEFAULT_SUMMARIZER_CONFIG } from "./types-C9CgA2DQ.js";
 const anthropic = {
   name: "Anthropic Claude",
@@ -68386,7 +68386,7 @@ async function postAzureDevOpsPRComment(owner, repo, number2, token, body) {
     })
   });
 }
-const ATTRIBUTION_FOOTER = "\n\n---\n*Generated via [OpenTrace](https://oss.opentrace.ai)*";
+const ATTRIBUTION_FOOTER = "\n\n---\n*Generated via [OpenTrace](https://app.opentrace.ai)*";
 class PRClient {
   meta;
   token;
@@ -72538,6 +72538,568 @@ function useGraphInteraction() {
   }
   return ctx;
 }
+const EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
+function readPersistedSettings() {
+  try {
+    return JSON.parse(localStorage.getItem("graph-settings") ?? "{}");
+  } catch {
+    return {};
+  }
+}
+function useGraphViewer(options = {}) {
+  const {
+    chatHighlightNodes,
+    extraHighlightSource,
+    suppressNextAutoFitRef,
+    autoFitMode = "schedule"
+  } = options;
+  const canvasRef = useRef(null);
+  const { graphData, stats, lastSearchQuery, graphVersion, loadGraph } = useGraph();
+  const {
+    selectedNode,
+    setSelectedNode,
+    selectedLink,
+    setSelectedLink,
+    setNodeHistory,
+    setHiddenNodeTypes,
+    setHiddenCommunities,
+    colorMode,
+    searchQuery,
+    setSearchQuery,
+    hops,
+    setHops,
+    focusedCommunityNodes,
+    setFocusedCommunityNodes,
+    communityData,
+    filteredGraphData,
+    highlights
+  } = useGraphInteraction();
+  const graphDataRef = useRef(graphData);
+  useEffect(() => {
+    graphDataRef.current = graphData;
+  }, [graphData]);
+  useEffect(() => {
+    if (graphVersion === 0) return;
+    if (suppressNextAutoFitRef?.current) {
+      suppressNextAutoFitRef.current = false;
+      return;
+    }
+    if (autoFitMode === "unconditional") {
+      const t = setTimeout(() => canvasRef.current?.zoomToFit(400), 500);
+      return () => clearTimeout(t);
+    }
+    canvasRef.current?.scheduleAutoFit?.(400);
+  }, [graphVersion, suppressNextAutoFitRef, autoFitMode]);
+  const chatHighlightLinks = useMemo(() => {
+    if (!chatHighlightNodes || chatHighlightNodes.size < 2) return EMPTY_SET;
+    const links = /* @__PURE__ */ new Set();
+    for (const link of graphData.links) {
+      if (chatHighlightNodes.has(link.source) && chatHighlightNodes.has(link.target)) {
+        links.add(`${link.source}-${link.target}`);
+      }
+    }
+    return links;
+  }, [graphData.links, chatHighlightNodes]);
+  useEffect(() => {
+    if (!chatHighlightNodes || chatHighlightNodes.size === 0) return;
+    const now = Date.now();
+    setNodeHistory((prev) => {
+      const existing = new Set(prev.map((e) => e.id));
+      const newEntries = [];
+      for (const id of chatHighlightNodes) {
+        if (existing.has(id)) continue;
+        const node = graphDataRef.current.nodes.find((n2) => n2.id === id);
+        if (!node) continue;
+        newEntries.push({
+          id: node.id,
+          name: node.name,
+          type: node.type,
+          timestamp: now,
+          source: "chat"
+        });
+      }
+      if (newEntries.length === 0) return prev;
+      return [...newEntries, ...prev].slice(0, 500);
+    });
+  }, [chatHighlightNodes, setNodeHistory]);
+  const [edgeHighlightNodes, setEdgeHighlightNodes] = useState(EMPTY_SET);
+  const [edgeHighlightLinks, setEdgeHighlightLinks] = useState(EMPTY_SET);
+  const [edgeLabelNodes, setEdgeLabelNodes] = useState(EMPTY_SET);
+  const [activeFilter, setActiveFilter] = useState(null);
+  const stored = useMemo(readPersistedSettings, []);
+  const ps = (key, def) => stored[key] ?? def;
+  const [zoomOnSelect, setZoomOnSelect] = useState(
+    () => ps("zoomOnSelect", true)
+  );
+  const [repulsion, setRepulsion] = useState(() => ps("repulsion", 120));
+  const [labelsVisible, setLabelsVisible] = useState(
+    () => ps("labelsVisible", true)
+  );
+  const [physicsRunning, setPhysicsRunning] = useState(false);
+  const [pixiLinkDist, setPixiLinkDist] = useState(
+    () => ps("pixiLinkDist", 200)
+  );
+  const [pixiCenter, setPixiCenter] = useState(() => ps("pixiCenter", 0.3));
+  const [pixiZoomExponent, setPixiZoomExponent] = useState(
+    () => ps("pixiZoomExponent", 0.8)
+  );
+  const [layoutMode, setLayoutMode] = useState(
+    () => ps("layoutMode", "spread")
+  );
+  const [compactRadial, setCompactRadial] = useState(
+    () => ps("compactRadial", 8)
+  );
+  const [compactCommunity, setCompactCommunity] = useState(
+    () => ps("compactCommunity", 10)
+  );
+  const [compactCentering, setCompactCentering] = useState(
+    () => ps("compactCentering", 5)
+  );
+  const [compactRadius, setCompactRadius] = useState(
+    () => ps("compactRadius", 32)
+  );
+  const [mode3d, setMode3d] = useState(() => ps("mode3d", true));
+  const [mode3dSpeed, setMode3dSpeed] = useState(() => ps("mode3dSpeed", 30));
+  const [mode3dTilt, setMode3dTilt] = useState(() => ps("mode3dTilt", 35));
+  const [labelScale, setLabelScale] = useState(() => ps("labelScale", 100));
+  const [rendererAutoRotate, setRendererAutoRotate] = useState(
+    null
+  );
+  useEffect(() => {
+    const settings2 = {
+      repulsion,
+      labelsVisible,
+      zoomOnSelect,
+      pixiLinkDist,
+      pixiCenter,
+      pixiZoomExponent,
+      layoutMode,
+      compactRadial,
+      compactCommunity,
+      compactCentering,
+      compactRadius,
+      mode3d,
+      mode3dSpeed,
+      mode3dTilt,
+      labelScale
+    };
+    localStorage.setItem("graph-settings", JSON.stringify(settings2));
+  }, [
+    repulsion,
+    labelsVisible,
+    zoomOnSelect,
+    pixiLinkDist,
+    pixiCenter,
+    pixiZoomExponent,
+    layoutMode,
+    compactRadial,
+    compactCommunity,
+    compactCentering,
+    compactRadius,
+    mode3d,
+    mode3dSpeed,
+    mode3dTilt,
+    labelScale
+  ]);
+  const handleSearch = useCallback(() => {
+    if (searchQuery.trim()) {
+      loadGraph(searchQuery.trim(), hops);
+    }
+  }, [searchQuery, hops, loadGraph]);
+  const handleReset = useCallback(() => {
+    setSearchQuery("");
+    setHops(2);
+    setSelectedNode(null);
+    setSelectedLink(null);
+    setActiveFilter(null);
+    setFocusedCommunityNodes(EMPTY_SET);
+    setHiddenNodeTypes(/* @__PURE__ */ new Set());
+    setHiddenCommunities(/* @__PURE__ */ new Set());
+    if (lastSearchQuery) {
+      loadGraph();
+    }
+  }, [
+    setSearchQuery,
+    setHops,
+    setSelectedNode,
+    setSelectedLink,
+    setFocusedCommunityNodes,
+    setHiddenNodeTypes,
+    setHiddenCommunities,
+    lastSearchQuery,
+    loadGraph
+  ]);
+  const applyFilter = useCallback(
+    (filter) => {
+      if (!filter) {
+        setFocusedCommunityNodes(EMPTY_SET);
+        return;
+      }
+      if (filter.type === "community") {
+        const nodeIds = Object.entries(communityData.assignments).filter(([, id]) => id === filter.communityId).map(([nodeId]) => nodeId);
+        if (nodeIds.length > 0) {
+          const nodeSet = new Set(nodeIds);
+          setFocusedCommunityNodes(nodeSet);
+          canvasRef.current?.zoomToNodes(nodeSet, 600);
+        }
+      }
+    },
+    [communityData.assignments, setFocusedCommunityNodes]
+  );
+  const onNodeClick = useCallback(
+    (node) => {
+      setSelectedNode(node);
+      setSelectedLink(null);
+      setEdgeHighlightNodes(EMPTY_SET);
+      setEdgeHighlightLinks(EMPTY_SET);
+      setEdgeLabelNodes(EMPTY_SET);
+      setFocusedCommunityNodes(EMPTY_SET);
+      setNodeHistory((prev) => {
+        if (prev.length > 0 && prev[0].id === node.id) return prev;
+        const entry = {
+          id: node.id,
+          name: node.name,
+          type: node.type,
+          timestamp: Date.now(),
+          source: "user"
+        };
+        return [entry, ...prev].slice(0, 500);
+      });
+    },
+    [
+      setSelectedNode,
+      setSelectedLink,
+      setFocusedCommunityNodes,
+      setNodeHistory
+    ]
+  );
+  const onLinkClick = useCallback(
+    (edge) => {
+      setSelectedLink(edge);
+      setSelectedNode(null);
+    },
+    [setSelectedLink, setSelectedNode]
+  );
+  const activeFilterRef = useRef(activeFilter);
+  activeFilterRef.current = activeFilter;
+  const onStageClick = useCallback(() => {
+    setSelectedNode(null);
+    setSelectedLink(null);
+    setEdgeHighlightNodes(EMPTY_SET);
+    setEdgeHighlightLinks(EMPTY_SET);
+    setEdgeLabelNodes(EMPTY_SET);
+    applyFilter(activeFilterRef.current);
+  }, [applyFilter, setSelectedLink, setSelectedNode]);
+  const handleSuggestionSelect = useCallback(
+    (suggestion) => {
+      switch (suggestion.category) {
+        case "community": {
+          const cid = suggestion.communityId;
+          if (cid !== void 0) {
+            setActiveFilter({ type: "community", communityId: cid });
+            applyFilter({ type: "community", communityId: cid });
+            setSelectedNode(null);
+            setSelectedLink(null);
+          }
+          break;
+        }
+        default: {
+          setActiveFilter(null);
+          const targetId = suggestion.nodeId;
+          loadGraph(suggestion.label, hops).then(() => {
+            if (targetId) {
+              const node = graphDataRef.current.nodes.find(
+                (n2) => n2.id === targetId
+              );
+              if (node) {
+                onNodeClick(node);
+                setTimeout(() => {
+                  canvasRef.current?.zoomToNodes(/* @__PURE__ */ new Set([targetId]), 600);
+                }, 100);
+              }
+            }
+          });
+          break;
+        }
+      }
+    },
+    [
+      applyFilter,
+      hops,
+      loadGraph,
+      onNodeClick,
+      setSelectedLink,
+      setSelectedNode
+    ]
+  );
+  useEffect(() => {
+    if (focusedCommunityNodes.size > 0) {
+      canvasRef.current?.zoomToNodes(focusedCommunityNodes, 600);
+    }
+  }, [focusedCommunityNodes]);
+  useEffect(() => {
+    if (!selectedLink) {
+      setEdgeHighlightNodes(EMPTY_SET);
+      setEdgeHighlightLinks(EMPTY_SET);
+      setEdgeLabelNodes(EMPTY_SET);
+      return;
+    }
+    const { source: sourceId, target: targetId } = selectedLink;
+    setEdgeHighlightNodes(/* @__PURE__ */ new Set([sourceId, targetId]));
+    setEdgeHighlightLinks(/* @__PURE__ */ new Set([`${sourceId}-${targetId}`]));
+    setEdgeLabelNodes(/* @__PURE__ */ new Set([sourceId, targetId]));
+    canvasRef.current?.zoomToNodes([sourceId, targetId], 600);
+  }, [selectedLink]);
+  const selectedNodeId = selectedNode?.id;
+  const hasSelectedLink = !!selectedLink;
+  const focusedCommunitySize = focusedCommunityNodes.size;
+  useEffect(() => {
+    if (!zoomOnSelect) return;
+    if (selectedNode) {
+      if (highlights.highlightNodes.size > 0) {
+        canvasRef.current?.zoomToNodes(highlights.highlightNodes, 600);
+      }
+    } else if (!selectedLink && focusedCommunityNodes.size === 0) {
+      canvasRef.current?.zoomToFit(600);
+    }
+  }, [zoomOnSelect, selectedNodeId, hasSelectedLink, focusedCommunitySize]);
+  const legendNodeItems = useMemo(() => {
+    const counts = {};
+    filteredGraphData.nodes.forEach((n2) => {
+      counts[n2.type] = (counts[n2.type] || 0) + 1;
+    });
+    return Object.entries(counts).map(([label, count]) => ({
+      label,
+      count,
+      color: getNodeColor(label)
+    })).sort((a, b) => b.count - a.count);
+  }, [filteredGraphData.nodes]);
+  const legendCommunityItems = useMemo(() => {
+    if (colorMode !== "community") return [];
+    const counts = /* @__PURE__ */ new Map();
+    for (const n2 of filteredGraphData.nodes) {
+      const cid = communityData.assignments[n2.id];
+      if (cid !== void 0) {
+        counts.set(cid, (counts.get(cid) || 0) + 1);
+      }
+    }
+    return [...counts.entries()].sort((a, b) => b[1] - a[1]).map(([cid, count]) => ({
+      label: communityData.names.get(cid) ?? `Community ${cid}`,
+      count,
+      color: communityData.colorMap.get(cid) ?? "#64748b"
+    }));
+  }, [colorMode, filteredGraphData.nodes, communityData]);
+  const legendItems = colorMode === "community" ? legendCommunityItems : legendNodeItems;
+  const legendLinkItems = useMemo(() => {
+    const counts = {};
+    filteredGraphData.links.forEach((l) => {
+      const label = l.label || "unknown";
+      counts[label] = (counts[label] || 0) + 1;
+    });
+    return Object.entries(counts).map(([label, count]) => ({
+      label,
+      count,
+      color: getLinkColor(label)
+    })).sort((a, b) => b.count - a.count);
+  }, [filteredGraphData.links]);
+  const searchSuggestions = useMemo(() => {
+    const nameMap = /* @__PURE__ */ new Map();
+    for (const n2 of graphData.nodes) {
+      if (!nameMap.has(n2.name)) {
+        const cid = communityData.assignments[n2.id];
+        nameMap.set(n2.name, {
+          type: n2.type,
+          communityId: cid,
+          nodeId: n2.id
+        });
+      }
+    }
+    const suggestions = [];
+    for (const [name, info] of nameMap) {
+      const cLabel = info.communityId !== void 0 ? communityData.names.get(info.communityId) : void 0;
+      const cColor = info.communityId !== void 0 ? communityData.colorMap.get(info.communityId) : void 0;
+      suggestions.push({
+        label: name,
+        category: "name",
+        color: getNodeColor(info.type),
+        communityLabel: cLabel,
+        communityColor: cColor,
+        nodeId: info.nodeId
+      });
+    }
+    for (const [cid, name] of communityData.names) {
+      suggestions.push({
+        label: name,
+        category: "community",
+        color: communityData.colorMap.get(cid),
+        communityId: cid
+      });
+    }
+    return suggestions;
+  }, [graphData.nodes, communityData]);
+  const layoutConfig = useMemo(
+    () => ({
+      ...DEFAULT_LAYOUT_CONFIG,
+      fa2ScalingRatio: repulsion
+    }),
+    [repulsion]
+  );
+  const highlightProps = useMemo(() => {
+    const hasChat = !!chatHighlightNodes && chatHighlightNodes.size > 0;
+    const hasExtraNodes = !!extraHighlightSource && extraHighlightSource.nodes.size > 0;
+    const hasExtraLinks = !!extraHighlightSource && extraHighlightSource.links.size > 0;
+    const hasExtraLabels = !!extraHighlightSource && extraHighlightSource.labels.size > 0;
+    const highlightNodes = selectedLink ? edgeHighlightNodes : focusedCommunityNodes.size > 0 ? focusedCommunityNodes : highlights.highlightNodes.size > 0 ? highlights.highlightNodes : hasChat ? chatHighlightNodes : hasExtraNodes ? extraHighlightSource.nodes : highlights.highlightNodes;
+    const highlightLinks = selectedLink ? edgeHighlightLinks : focusedCommunityNodes.size > 0 ? EMPTY_SET : highlights.highlightLinks.size > 0 ? highlights.highlightLinks : chatHighlightLinks.size > 0 ? chatHighlightLinks : hasExtraLinks ? extraHighlightSource.links : highlights.highlightLinks;
+    const labelNodes = selectedLink ? edgeLabelNodes : focusedCommunityNodes.size > 0 ? focusedCommunityNodes : highlights.labelNodes.size > 0 ? highlights.labelNodes : hasChat ? chatHighlightNodes : hasExtraLabels ? extraHighlightSource.labels : highlights.labelNodes;
+    return { highlightNodes, highlightLinks, labelNodes };
+  }, [
+    selectedLink,
+    edgeHighlightNodes,
+    edgeHighlightLinks,
+    edgeLabelNodes,
+    focusedCommunityNodes,
+    highlights.highlightNodes,
+    highlights.highlightLinks,
+    highlights.labelNodes,
+    chatHighlightNodes,
+    chatHighlightLinks,
+    extraHighlightSource
+  ]);
+  const toolbar = useMemo(
+    () => ({
+      searchQuery,
+      onSearchQueryChange: setSearchQuery,
+      onSearch: handleSearch,
+      onReset: handleReset,
+      searchDisabled: !searchQuery.trim() || searchQuery === lastSearchQuery,
+      showResetButton: !!lastSearchQuery,
+      searchSuggestions,
+      onSuggestionSelect: handleSuggestionSelect,
+      hops,
+      onHopsChange: setHops,
+      nodeCount: filteredGraphData.nodes.length,
+      edgeCount: filteredGraphData.links.length,
+      totalNodes: stats?.total_nodes,
+      totalEdges: stats?.total_edges,
+      showDetailsTab: !!(selectedNode || selectedLink)
+    }),
+    [
+      searchQuery,
+      setSearchQuery,
+      handleSearch,
+      handleReset,
+      lastSearchQuery,
+      searchSuggestions,
+      handleSuggestionSelect,
+      hops,
+      setHops,
+      filteredGraphData.nodes.length,
+      filteredGraphData.links.length,
+      stats?.total_nodes,
+      stats?.total_edges,
+      selectedNode,
+      selectedLink
+    ]
+  );
+  const settings = useMemo(
+    () => ({
+      repulsion,
+      setRepulsion,
+      labelsVisible,
+      setLabelsVisible,
+      zoomOnSelect,
+      setZoomOnSelect,
+      pixiLinkDist,
+      setPixiLinkDist,
+      pixiCenter,
+      setPixiCenter,
+      pixiZoomExponent,
+      setPixiZoomExponent,
+      layoutMode,
+      setLayoutMode,
+      compactRadial,
+      setCompactRadial,
+      compactCommunity,
+      setCompactCommunity,
+      compactCentering,
+      setCompactCentering,
+      compactRadius,
+      setCompactRadius,
+      mode3d,
+      setMode3d,
+      mode3dSpeed,
+      setMode3dSpeed,
+      mode3dTilt,
+      setMode3dTilt,
+      labelScale,
+      setLabelScale,
+      rendererAutoRotate,
+      setRendererAutoRotate,
+      physicsRunning,
+      setPhysicsRunning
+    }),
+    [
+      repulsion,
+      labelsVisible,
+      zoomOnSelect,
+      pixiLinkDist,
+      pixiCenter,
+      pixiZoomExponent,
+      layoutMode,
+      compactRadial,
+      compactCommunity,
+      compactCentering,
+      compactRadius,
+      mode3d,
+      mode3dSpeed,
+      mode3dTilt,
+      labelScale,
+      rendererAutoRotate,
+      physicsRunning
+    ]
+  );
+  const isEmpty2 = graphData.nodes.length === 0;
+  const isSearchEmpty = isEmpty2 && !!lastSearchQuery;
+  const buildImperativeHandle = useCallback(
+    () => ({
+      selectNode: (nodeId, nodeHops) => {
+        if (nodeHops !== void 0) setHops(nodeHops);
+        const node = graphDataRef.current.nodes.find((n2) => n2.id === nodeId);
+        if (node) onNodeClick(node);
+      },
+      triggerPing: (nodeIds) => {
+        canvasRef.current?.triggerPing?.(nodeIds);
+      },
+      resetCamera: () => {
+        canvasRef.current?.resetCamera();
+      },
+      zoomToFit: (duration2) => {
+        canvasRef.current?.zoomToFit(duration2);
+      },
+      reload: (query, hopsArg) => loadGraph(query, hopsArg)
+    }),
+    [onNodeClick, setHops, loadGraph]
+  );
+  return {
+    canvasRef,
+    graphDataRef,
+    settings,
+    toolbar,
+    legendNodeItems,
+    legendCommunityItems,
+    legendItems,
+    legendLinkItems,
+    onNodeClick,
+    onLinkClick,
+    onStageClick,
+    highlightProps,
+    layoutConfig,
+    isEmpty: isEmpty2,
+    isSearchEmpty,
+    buildImperativeHandle
+  };
+}
 function ExportModal({ onExport, onCancel }) {
   const { store } = useStore();
   const [includeSource, setIncludeSource] = useState(false);
@@ -73536,7 +74098,6 @@ function toIndexingProps(job, repoUrl) {
   const icon = provider === "gitlab" ? /* @__PURE__ */ jsx(GitLabIcon, {}) : provider ? /* @__PURE__ */ jsx(GitHubIcon, {}) : null;
   return { state, title, message, icon };
 }
-const EMPTY_SET = Object.freeze(/* @__PURE__ */ new Set());
 const GraphViewer = memo(
   forwardRef(
     function GraphViewer2(props, ref) {
@@ -73569,7 +74130,30 @@ const GraphViewer = memo(
         onMobilePanelTabChange
       } = props;
       const { store } = useStore();
-      const canvasRef = useRef(null);
+      const suppressNextFitRef = useRef(false);
+      const v = useGraphViewer({
+        chatHighlightNodes,
+        suppressNextAutoFitRef: suppressNextFitRef
+      });
+      const {
+        graphData,
+        loading,
+        error,
+        lastSearchQuery,
+        loadGraph,
+        setError
+      } = useGraph();
+      const {
+        selectedNode,
+        hiddenNodeTypes,
+        hiddenLinkTypes,
+        hiddenSubTypes,
+        hiddenCommunities,
+        colorMode,
+        setColorMode,
+        availableSubTypes,
+        communityData
+      } = useGraphInteraction();
       const [indexedRepos, setIndexedRepos] = useState([]);
       useEffect(() => {
         if (!showAddRepo) return;
@@ -73599,188 +74183,14 @@ const GraphViewer = memo(
         },
         [indexedRepos]
       );
-      const suppressNextFitRef = useRef(false);
-      const {
-        graphData,
-        loading,
-        error,
-        stats,
-        lastSearchQuery,
-        graphVersion,
-        loadGraph,
-        setError
-      } = useGraph();
-      const graphDataRef = useRef(graphData);
-      useEffect(() => {
-        graphDataRef.current = graphData;
-      }, [graphData]);
-      useEffect(() => {
-        if (graphVersion === 0) return;
-        if (suppressNextFitRef.current) {
-          suppressNextFitRef.current = false;
-          return;
-        }
-        canvasRef.current?.scheduleAutoFit?.(400);
-      }, [graphVersion]);
-      const chatHighlightLinks = useMemo(() => {
-        if (!chatHighlightNodes || chatHighlightNodes.size < 2)
-          return EMPTY_SET;
-        const links = /* @__PURE__ */ new Set();
-        for (const link of graphData.links) {
-          if (chatHighlightNodes.has(link.source) && chatHighlightNodes.has(link.target)) {
-            links.add(`${link.source}-${link.target}`);
-          }
-        }
-        return links;
-      }, [graphData.links, chatHighlightNodes]);
-      const {
-        selectedNode,
-        setSelectedNode,
-        selectedLink,
-        setSelectedLink,
-        setNodeHistory,
-        hiddenNodeTypes,
-        setHiddenNodeTypes,
-        hiddenLinkTypes,
-        hiddenSubTypes,
-        hiddenCommunities,
-        setHiddenCommunities,
-        colorMode,
-        setColorMode,
-        searchQuery,
-        setSearchQuery,
-        hops,
-        setHops,
-        focusedCommunityNodes,
-        setFocusedCommunityNodes,
-        availableSubTypes,
-        communityData,
-        filteredGraphData,
-        highlights
-      } = useGraphInteraction();
       const [showResetConfirm, setShowResetConfirm] = useState(false);
       const [showExportModal, setShowExportModal] = useState(false);
       const [exporting, setExporting] = useState(false);
-      useEffect(() => {
-        if (!chatHighlightNodes || chatHighlightNodes.size === 0) return;
-        const now = Date.now();
-        setNodeHistory((prev) => {
-          const existing = new Set(prev.map((e) => e.id));
-          const newEntries = [];
-          for (const id of chatHighlightNodes) {
-            if (existing.has(id)) continue;
-            const node = graphDataRef.current.nodes.find((n2) => n2.id === id);
-            if (!node) continue;
-            newEntries.push({
-              id: node.id,
-              name: node.name,
-              type: node.type,
-              timestamp: now,
-              source: "chat"
-            });
-          }
-          if (newEntries.length === 0) return prev;
-          return [...newEntries, ...prev].slice(0, 500);
-        });
-      }, [chatHighlightNodes, setNodeHistory]);
+      const [showPhysicsPanel, setShowPhysicsPanel] = useState(false);
       const pendingMinimize = useRef(false);
       const minimizeTimeoutRef = useRef(
         null
       );
-      const [edgeHighlightNodes, setEdgeHighlightNodes] = useState(
-        /* @__PURE__ */ new Set()
-      );
-      const [edgeHighlightLinks, setEdgeHighlightLinks] = useState(
-        /* @__PURE__ */ new Set()
-      );
-      const [edgeLabelNodes, setEdgeLabelNodes] = useState(
-        /* @__PURE__ */ new Set()
-      );
-      const [activeFilter, setActiveFilter] = useState(null);
-      const [showPhysicsPanel, setShowPhysicsPanel] = useState(false);
-      const stored = useMemo(() => {
-        try {
-          return JSON.parse(
-            localStorage.getItem("graph-settings") ?? "{}"
-          );
-        } catch {
-          return {};
-        }
-      }, []);
-      const ps = (key, def) => stored[key] ?? def;
-      const [zoomOnSelect, setZoomOnSelect] = useState(
-        () => ps("zoomOnSelect", true)
-      );
-      const [repulsion, setRepulsion] = useState(() => ps("repulsion", 120));
-      const [labelsVisible, setLabelsVisible] = useState(
-        () => ps("labelsVisible", true)
-      );
-      const [physicsRunning, setPhysicsRunning] = useState(false);
-      const [pixiLinkDist, setPixiLinkDist] = useState(
-        () => ps("pixiLinkDist", 200)
-      );
-      const [pixiCenter, setPixiCenter] = useState(() => ps("pixiCenter", 0.3));
-      const [pixiZoomExponent, setPixiZoomExponent] = useState(
-        () => ps("pixiZoomExponent", 0.8)
-      );
-      const [layoutMode, setLayoutMode] = useState(
-        () => ps("layoutMode", "spread")
-      );
-      const [compactRadial, setCompactRadial] = useState(
-        () => ps("compactRadial", 8)
-      );
-      const [compactCommunity, setCompactCommunity] = useState(
-        () => ps("compactCommunity", 10)
-      );
-      const [compactCentering, setCompactCentering] = useState(
-        () => ps("compactCentering", 5)
-      );
-      const [compactRadius, setCompactRadius] = useState(
-        () => ps("compactRadius", 32)
-      );
-      const [mode3d, setMode3d] = useState(() => ps("mode3d", true));
-      const [mode3dSpeed, setMode3dSpeed] = useState(
-        () => ps("mode3dSpeed", 30)
-      );
-      const [mode3dTilt, setMode3dTilt] = useState(() => ps("mode3dTilt", 35));
-      const [labelScale, setLabelScale] = useState(() => ps("labelScale", 100));
-      const [rendererAutoRotate, setRendererAutoRotate] = useState(null);
-      useEffect(() => {
-        const settings = {
-          repulsion,
-          labelsVisible,
-          zoomOnSelect,
-          pixiLinkDist,
-          pixiCenter,
-          pixiZoomExponent,
-          layoutMode,
-          compactRadial,
-          compactCommunity,
-          compactCentering,
-          compactRadius,
-          mode3d,
-          mode3dSpeed,
-          mode3dTilt,
-          labelScale
-        };
-        localStorage.setItem("graph-settings", JSON.stringify(settings));
-      }, [
-        repulsion,
-        labelsVisible,
-        zoomOnSelect,
-        pixiLinkDist,
-        pixiCenter,
-        pixiZoomExponent,
-        layoutMode,
-        compactRadial,
-        compactCommunity,
-        compactCentering,
-        compactRadius,
-        mode3d,
-        mode3dSpeed,
-        mode3dTilt,
-        labelScale
-      ]);
       useEffect(() => {
         if (jobState.status === "persisted") {
           loadGraph().then(() => {
@@ -73797,259 +74207,11 @@ const GraphViewer = memo(
           });
         }
       }, [jobState.status, loadGraph]);
-      const handleSearch = () => {
-        if (searchQuery.trim()) {
-          loadGraph(searchQuery.trim(), hops);
-        }
-      };
-      const handleReset = () => {
-        setSearchQuery("");
-        setHops(2);
-        setSelectedNode(null);
-        setSelectedLink(null);
-        setActiveFilter(null);
-        setFocusedCommunityNodes(EMPTY_SET);
-        setHiddenNodeTypes(/* @__PURE__ */ new Set());
-        setHiddenCommunities(/* @__PURE__ */ new Set());
-        if (lastSearchQuery) {
-          loadGraph();
-        }
-      };
-      const layoutConfig = useMemo(
-        () => ({
-          ...DEFAULT_LAYOUT_CONFIG,
-          fa2ScalingRatio: repulsion
-        }),
-        [repulsion]
-      );
-      const onNodeClick = useCallback(
-        (node) => {
-          setSelectedNode(node);
-          setSelectedLink(null);
-          setEdgeHighlightNodes(EMPTY_SET);
-          setEdgeHighlightLinks(EMPTY_SET);
-          setEdgeLabelNodes(EMPTY_SET);
-          setFocusedCommunityNodes(EMPTY_SET);
-          setNodeHistory((prev) => {
-            if (prev.length > 0 && prev[0].id === node.id) return prev;
-            const entry = {
-              id: node.id,
-              name: node.name,
-              type: node.type,
-              timestamp: Date.now(),
-              source: "user"
-            };
-            return [entry, ...prev].slice(0, 500);
-          });
-        },
-        [
-          setSelectedNode,
-          setSelectedLink,
-          setFocusedCommunityNodes,
-          setNodeHistory
-        ]
-      );
-      useEffect(() => {
-        if (focusedCommunityNodes.size > 0) {
-          canvasRef.current?.zoomToNodes(focusedCommunityNodes, 600);
-        }
-      }, [focusedCommunityNodes]);
-      useImperativeHandle(
-        ref,
-        () => ({
-          selectNode: (nodeId, nodeHops) => {
-            if (nodeHops !== void 0) setHops(nodeHops);
-            const node = graphDataRef.current.nodes.find(
-              (n2) => n2.id === nodeId
-            );
-            if (node) onNodeClick(node);
-          },
-          triggerPing: (nodeIds) => {
-            canvasRef.current?.triggerPing?.(nodeIds);
-          },
-          resetCamera: () => {
-            canvasRef.current?.resetCamera();
-          },
-          zoomToFit: (duration2) => {
-            canvasRef.current?.zoomToFit(duration2);
-          }
-        }),
-        [onNodeClick, setHops]
-      );
-      const onLinkClick = useCallback(
-        (edge) => {
-          setSelectedLink(edge);
-          setSelectedNode(null);
-        },
-        [setSelectedLink, setSelectedNode]
-      );
-      useEffect(() => {
-        if (!selectedLink) {
-          setEdgeHighlightNodes(EMPTY_SET);
-          setEdgeHighlightLinks(EMPTY_SET);
-          setEdgeLabelNodes(EMPTY_SET);
-          return;
-        }
-        const { source: sourceId, target: targetId } = selectedLink;
-        setEdgeHighlightNodes(/* @__PURE__ */ new Set([sourceId, targetId]));
-        setEdgeHighlightLinks(/* @__PURE__ */ new Set([`${sourceId}-${targetId}`]));
-        setEdgeLabelNodes(/* @__PURE__ */ new Set([sourceId, targetId]));
-        canvasRef.current?.zoomToNodes([sourceId, targetId], 600);
-      }, [selectedLink]);
-      useEffect(() => {
-        if (!zoomOnSelect) return;
-        if (selectedNode) {
-          if (highlights.highlightNodes.size > 0) {
-            canvasRef.current?.zoomToNodes(highlights.highlightNodes, 600);
-          }
-        } else if (!selectedLink && focusedCommunityNodes.size === 0) {
-          canvasRef.current?.zoomToFit(600);
-        }
-      }, [
-        zoomOnSelect,
-        selectedNode?.id,
-        !!selectedLink,
-        focusedCommunityNodes.size
-      ]);
-      const legendNodeItems = useMemo(() => {
-        const counts = {};
-        filteredGraphData.nodes.forEach((n2) => {
-          counts[n2.type] = (counts[n2.type] || 0) + 1;
-        });
-        return Object.entries(counts).map(([label, count]) => ({
-          label,
-          count,
-          color: getNodeColor(label)
-        })).sort((a, b) => b.count - a.count);
-      }, [filteredGraphData.nodes]);
-      const legendCommunityItems = useMemo(() => {
-        if (colorMode !== "community") return [];
-        const counts = /* @__PURE__ */ new Map();
-        for (const n2 of filteredGraphData.nodes) {
-          const cid = communityData.assignments[n2.id];
-          if (cid !== void 0) {
-            counts.set(cid, (counts.get(cid) || 0) + 1);
-          }
-        }
-        return [...counts.entries()].sort((a, b) => b[1] - a[1]).map(([cid, count]) => ({
-          label: communityData.names.get(cid) ?? `Community ${cid}`,
-          count,
-          color: communityData.colorMap.get(cid) ?? "#64748b"
-        }));
-      }, [colorMode, filteredGraphData.nodes, communityData]);
-      const legendItems = colorMode === "community" ? legendCommunityItems : legendNodeItems;
-      const searchSuggestions = useMemo(() => {
-        const nameMap = /* @__PURE__ */ new Map();
-        for (const n2 of graphData.nodes) {
-          if (!nameMap.has(n2.name)) {
-            const cid = communityData.assignments[n2.id];
-            nameMap.set(n2.name, {
-              type: n2.type,
-              communityId: cid,
-              nodeId: n2.id
-            });
-          }
-        }
-        const suggestions = [];
-        for (const [name, info] of nameMap) {
-          const cLabel = info.communityId !== void 0 ? communityData.names.get(info.communityId) : void 0;
-          const cColor = info.communityId !== void 0 ? communityData.colorMap.get(info.communityId) : void 0;
-          suggestions.push({
-            label: name,
-            category: "name",
-            color: getNodeColor(info.type),
-            communityLabel: cLabel,
-            communityColor: cColor,
-            nodeId: info.nodeId
-          });
-        }
-        for (const [cid, name] of communityData.names) {
-          suggestions.push({
-            label: name,
-            category: "community",
-            color: communityData.colorMap.get(cid),
-            communityId: cid
-          });
-        }
-        return suggestions;
-      }, [graphData.nodes, communityData]);
-      const applyFilter = useCallback(
-        (filter) => {
-          if (!filter) {
-            setFocusedCommunityNodes(EMPTY_SET);
-            return;
-          }
-          if (filter.type === "community") {
-            const nodeIds = Object.entries(communityData.assignments).filter(([, id]) => id === filter.communityId).map(([nodeId]) => nodeId);
-            if (nodeIds.length > 0) {
-              const nodeSet = new Set(nodeIds);
-              setFocusedCommunityNodes(nodeSet);
-              canvasRef.current?.zoomToNodes(nodeSet, 600);
-            }
-          }
-        },
-        [communityData.assignments, setFocusedCommunityNodes]
-      );
-      const handleSuggestionSelect = useCallback(
-        (suggestion) => {
-          switch (suggestion.category) {
-            case "community": {
-              const cid = suggestion.communityId;
-              if (cid !== void 0) {
-                setActiveFilter({ type: "community", communityId: cid });
-                applyFilter({ type: "community", communityId: cid });
-                setSelectedNode(null);
-                setSelectedLink(null);
-              }
-              break;
-            }
-            default: {
-              setActiveFilter(null);
-              const targetId = suggestion.nodeId;
-              loadGraph(suggestion.label, hops).then(() => {
-                if (targetId) {
-                  const node = graphDataRef.current.nodes.find(
-                    (n2) => n2.id === targetId
-                  );
-                  if (node) {
-                    onNodeClick(node);
-                    setTimeout(() => {
-                      canvasRef.current?.zoomToNodes(/* @__PURE__ */ new Set([targetId]), 600);
-                    }, 100);
-                  }
-                }
-              });
-              break;
-            }
-          }
-        },
-        [
-          applyFilter,
-          hops,
-          loadGraph,
-          onNodeClick,
-          setSelectedLink,
-          setSelectedNode
-        ]
-      );
-      const legendLinkItems = useMemo(() => {
-        const counts = {};
-        filteredGraphData.links.forEach((l) => {
-          const label = l.label || "unknown";
-          counts[label] = (counts[label] || 0) + 1;
-        });
-        return Object.entries(counts).map(([label, count]) => ({
-          label,
-          count,
-          color: getLinkColor(label)
-        })).sort((a, b) => b.count - a.count);
-      }, [filteredGraphData.links]);
-      const isEmpty2 = graphData.nodes.length === 0;
-      const isSearchEmpty = isEmpty2 && !!lastSearchQuery;
-      const showFullModal = jobState.status === "running" || jobState.status === "persisted" || jobState.status === "error" || (jobState.status === "enriching" || jobState.status === "done") && (jobExpanded || loading && isEmpty2);
+      useImperativeHandle(ref, () => v.buildImperativeHandle(), [v]);
+      const showFullModal = jobState.status === "running" || jobState.status === "persisted" || jobState.status === "error" || (jobState.status === "enriching" || jobState.status === "done") && (jobExpanded || loading && v.isEmpty);
       const graphWidth = showChat || showHelp ? width - chatWidth : width;
       useEffect(() => {
-        if (pendingMinimize.current && !isEmpty2) {
+        if (pendingMinimize.current && !v.isEmpty) {
           pendingMinimize.current = false;
           minimizeTimeoutRef.current = setTimeout(() => {
             minimizeTimeoutRef.current = null;
@@ -74062,23 +74224,14 @@ const GraphViewer = memo(
             minimizeTimeoutRef.current = null;
           }
         };
-      }, [isEmpty2, onJobMinimize]);
+      }, [v.isEmpty, onJobMinimize]);
       useEffect(() => {
-        if (isEmpty2 && !isSearchEmpty && !loading && jobState.status === "idle") {
+        if (v.isEmpty && !v.isSearchEmpty && !loading && jobState.status === "idle") {
           onAddRepoOpen();
         }
-      }, [isEmpty2, isSearchEmpty, loading, jobState.status, onAddRepoOpen]);
-      const activeFilterRef = useRef(activeFilter);
-      activeFilterRef.current = activeFilter;
-      const handleStageClick = useCallback(() => {
-        setSelectedNode(null);
-        setSelectedLink(null);
-        setEdgeHighlightNodes(EMPTY_SET);
-        setEdgeHighlightLinks(EMPTY_SET);
-        setEdgeLabelNodes(EMPTY_SET);
-        applyFilter(activeFilterRef.current);
-      }, [applyFilter, setSelectedLink, setSelectedNode]);
-      if (loading && isEmpty2 && !showAddRepo && !showFullModal) {
+      }, [v.isEmpty, v.isSearchEmpty, loading, jobState.status, onAddRepoOpen]);
+      const persistentActions = useMemo(() => /* @__PURE__ */ jsx(GitHubStarButton, {}), []);
+      if (loading && v.isEmpty && !showAddRepo && !showFullModal) {
         return /* @__PURE__ */ jsx(GraphLoadingState, {});
       }
       if (error) {
@@ -74093,16 +74246,16 @@ const GraphViewer = memo(
           }
         );
       }
-      if (isSearchEmpty && !showFullModal) {
+      if (v.isSearchEmpty && !showFullModal) {
         return /* @__PURE__ */ jsx(
           GraphSearchEmpty,
           {
             searchQuery: lastSearchQuery,
-            onClearSearch: handleReset
+            onClearSearch: v.toolbar.onReset
           }
         );
       }
-      if (isEmpty2 && !showFullModal) {
+      if (v.isEmpty && !showFullModal) {
         return /* @__PURE__ */ jsx(
           GraphInitialEmpty,
           {
@@ -74139,25 +74292,25 @@ const GraphViewer = memo(
                 ]
               }
             ),
-            searchQuery,
-            onSearchQueryChange: setSearchQuery,
-            onSearch: handleSearch,
-            onReset: handleReset,
-            searchDisabled: !searchQuery.trim() || searchQuery === lastSearchQuery,
-            showResetButton: !!lastSearchQuery,
-            searchSuggestions,
-            onSuggestionSelect: handleSuggestionSelect,
-            hops,
-            onHopsChange: setHops,
-            nodeCount: filteredGraphData.nodes.length,
-            edgeCount: filteredGraphData.links.length,
-            totalNodes: stats?.total_nodes,
-            totalEdges: stats?.total_edges,
+            searchQuery: v.toolbar.searchQuery,
+            onSearchQueryChange: v.toolbar.onSearchQueryChange,
+            onSearch: v.toolbar.onSearch,
+            onReset: v.toolbar.onReset,
+            searchDisabled: v.toolbar.searchDisabled,
+            showResetButton: v.toolbar.showResetButton,
+            searchSuggestions: v.toolbar.searchSuggestions,
+            onSuggestionSelect: v.toolbar.onSuggestionSelect,
+            hops: v.toolbar.hops,
+            onHopsChange: v.toolbar.onHopsChange,
+            nodeCount: v.toolbar.nodeCount,
+            edgeCount: v.toolbar.edgeCount,
+            totalNodes: v.toolbar.totalNodes,
+            totalEdges: v.toolbar.totalEdges,
             mobilePanelTabs: buildMobilePanelTabs({
-              showDetails: !!(selectedNode || selectedLink)
+              showDetails: v.toolbar.showDetailsTab
             }),
             onMobilePanelTab: (key) => onMobilePanelTabChange?.(key),
-            persistentActions: /* @__PURE__ */ jsx(GitHubStarButton, {}),
+            persistentActions,
             actions: /* @__PURE__ */ jsx(
               GraphToolbarActionButtons,
               {
@@ -74228,7 +74381,7 @@ const GraphViewer = memo(
             onValidate: validateRepo
           }
         ),
-        isEmpty2 && showFullModal && /* @__PURE__ */ jsx(EmptyStateHeader, {}),
+        v.isEmpty && showFullModal && /* @__PURE__ */ jsx(EmptyStateHeader, {}),
         showFullModal && /* @__PURE__ */ jsx(
           IndexingProgress,
           {
@@ -74237,38 +74390,38 @@ const GraphViewer = memo(
             onClose: onJobClose
           }
         ),
-        /* @__PURE__ */ jsx(GraphLegend, { items: legendItems, linkItems: legendLinkItems }),
+        /* @__PURE__ */ jsx(GraphLegend, { items: v.legendItems, linkItems: v.legendLinkItems }),
         /* @__PURE__ */ jsx(
           PixiGraphCanvas,
           {
-            ref: canvasRef,
+            ref: v.canvasRef,
             nodes: graphData.nodes,
             links: graphData.links,
             width: graphWidth,
             height,
-            layoutConfig,
+            layoutConfig: v.layoutConfig,
             colorMode,
             hiddenNodeTypes,
             hiddenLinkTypes,
             hiddenSubTypes,
             hiddenCommunities,
-            searchQuery,
+            searchQuery: v.toolbar.searchQuery,
             selectedNodeId: selectedNode?.id,
-            hops,
+            hops: v.toolbar.hops,
             getSubType,
-            highlightNodes: selectedLink ? edgeHighlightNodes : focusedCommunityNodes.size > 0 ? focusedCommunityNodes : highlights.highlightNodes.size > 0 ? highlights.highlightNodes : chatHighlightNodes && chatHighlightNodes.size > 0 ? chatHighlightNodes : highlights.highlightNodes,
-            highlightLinks: selectedLink ? edgeHighlightLinks : focusedCommunityNodes.size > 0 ? EMPTY_SET : highlights.highlightLinks.size > 0 ? highlights.highlightLinks : chatHighlightLinks.size > 0 ? chatHighlightLinks : highlights.highlightLinks,
-            labelNodes: selectedLink ? edgeLabelNodes : focusedCommunityNodes.size > 0 ? focusedCommunityNodes : highlights.labelNodes.size > 0 ? highlights.labelNodes : chatHighlightNodes && chatHighlightNodes.size > 0 ? chatHighlightNodes : highlights.labelNodes,
+            highlightNodes: v.highlightProps.highlightNodes,
+            highlightLinks: v.highlightProps.highlightLinks,
+            labelNodes: v.highlightProps.labelNodes,
             availableSubTypes,
             zIndex: true,
             communityData,
-            onNodeClick,
-            onEdgeClick: onLinkClick,
-            onStageClick: handleStageClick,
-            labelsVisible,
-            layoutMode,
-            mode3d,
-            on3DAutoRotateChange: setRendererAutoRotate,
+            onNodeClick: v.onNodeClick,
+            onEdgeClick: v.onLinkClick,
+            onStageClick: v.onStageClick,
+            labelsVisible: v.settings.labelsVisible,
+            layoutMode: v.settings.layoutMode,
+            mode3d: v.settings.mode3d,
+            on3DAutoRotateChange: v.settings.setRendererAutoRotate,
             animationSettings,
             style: { isolation: "isolate" }
           }
@@ -74276,57 +74429,57 @@ const GraphViewer = memo(
         showPhysicsPanel && /* @__PURE__ */ jsx(
           PhysicsPanelContainer,
           {
-            canvasRef,
-            repulsion,
-            setRepulsion,
-            labelsVisible,
-            setLabelsVisible,
+            canvasRef: v.canvasRef,
+            repulsion: v.settings.repulsion,
+            setRepulsion: v.settings.setRepulsion,
+            labelsVisible: v.settings.labelsVisible,
+            setLabelsVisible: v.settings.setLabelsVisible,
             colorMode,
             setColorMode,
-            physicsRunning,
-            setPhysicsRunning,
-            pixiLinkDist,
-            setPixiLinkDist,
-            pixiCenter,
-            setPixiCenter,
-            pixiZoomExponent,
-            setPixiZoomExponent,
-            layoutMode,
-            setLayoutMode,
-            compactRadial,
-            setCompactRadial,
-            compactCommunity,
-            setCompactCommunity,
-            compactCentering,
-            setCompactCentering,
-            compactRadius,
-            setCompactRadius,
-            mode3d,
-            setMode3d,
-            mode3dSpeed,
-            setMode3dSpeed,
-            mode3dTilt,
-            setMode3dTilt,
-            rendererAutoRotate,
-            setRendererAutoRotate,
-            labelScale,
-            setLabelScale
+            physicsRunning: v.settings.physicsRunning,
+            setPhysicsRunning: v.settings.setPhysicsRunning,
+            pixiLinkDist: v.settings.pixiLinkDist,
+            setPixiLinkDist: v.settings.setPixiLinkDist,
+            pixiCenter: v.settings.pixiCenter,
+            setPixiCenter: v.settings.setPixiCenter,
+            pixiZoomExponent: v.settings.pixiZoomExponent,
+            setPixiZoomExponent: v.settings.setPixiZoomExponent,
+            layoutMode: v.settings.layoutMode,
+            setLayoutMode: v.settings.setLayoutMode,
+            compactRadial: v.settings.compactRadial,
+            setCompactRadial: v.settings.setCompactRadial,
+            compactCommunity: v.settings.compactCommunity,
+            setCompactCommunity: v.settings.setCompactCommunity,
+            compactCentering: v.settings.compactCentering,
+            setCompactCentering: v.settings.setCompactCentering,
+            compactRadius: v.settings.compactRadius,
+            setCompactRadius: v.settings.setCompactRadius,
+            mode3d: v.settings.mode3d,
+            setMode3d: v.settings.setMode3d,
+            mode3dSpeed: v.settings.mode3dSpeed,
+            setMode3dSpeed: v.settings.setMode3dSpeed,
+            mode3dTilt: v.settings.mode3dTilt,
+            setMode3dTilt: v.settings.setMode3dTilt,
+            rendererAutoRotate: v.settings.rendererAutoRotate,
+            setRendererAutoRotate: v.settings.setRendererAutoRotate,
+            labelScale: v.settings.labelScale,
+            setLabelScale: v.settings.setLabelScale
           }
         ),
         /* @__PURE__ */ jsx(
           GraphControlsBar,
           {
-            canvasRef,
+            canvasRef: v.canvasRef,
             graphFullscreen,
             onToggleGraphFullscreen,
-            zoomOnSelect,
-            setZoomOnSelect,
+            zoomOnSelect: v.settings.zoomOnSelect,
+            setZoomOnSelect: v.settings.setZoomOnSelect,
             showPhysicsPanel,
             setShowPhysicsPanel,
-            layoutMode,
-            setLayoutMode,
-            mode3d,
-            setMode3d
+            layoutMode: v.settings.layoutMode,
+            setLayoutMode: v.settings.setLayoutMode,
+            mode3d: v.settings.mode3d,
+            setMode3d: v.settings.setMode3d
           }
         )
       ] });
@@ -79081,7 +79234,8 @@ export {
   useGraphData as k,
   linkId as l,
   useGraphInteraction as m,
-  loadAnimationSettings as n,
+  useGraphViewer as n,
+  loadAnimationSettings as o,
   useGraph as u
 };
-//# sourceMappingURL=SidePanel-BaXstpCn.js.map
+//# sourceMappingURL=SidePanel-CmyYalhz.js.map