@pipelex/mthds-ui 0.6.5 → 0.8.0

package/dist/graph/react/index.js

@@ -16,7 +16,7 @@ import {
   resolveConceptRef,
   stuffDigestFromId,
   validateGraphSpec
-} from "../../chunk-ILX53OYM.js";
+} from "../../chunk-7VQUZ35P.js";
 import {
   __spreadProps,
   __spreadValues
@@ -29,7 +29,7 @@ import "./stuff/StuffViewer.css";
 import "./viewer/GraphToolbar.css";
 
 // src/graph/react/viewer/GraphViewer.tsx
-import React7 from "react";
+import React8 from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -496,8 +496,10 @@ function DetailPanel({
         "aria-label": "Resize panel"
       }
     ),
-    /* @__PURE__ */ jsx2("button", { className: "detail-panel-close", onClick: onClose, "aria-label": "Close panel", children: "x" }),
-    /* @__PURE__ */ jsx2("div", { className: "detail-panel-content", children })
+    /* @__PURE__ */ jsxs2("div", { className: "detail-panel-content", children: [
+      /* @__PURE__ */ jsx2("div", { className: "detail-panel-close-row", children: /* @__PURE__ */ jsx2("button", { className: "detail-panel-close", onClick: onClose, "aria-label": "Close panel", children: "x" }) }),
+      children
+    ] })
   ] });
 }
 
@@ -1131,6 +1133,7 @@ var PIPE_TYPE_BADGES = {
   PipeImgGen: "ImgGen",
   PipeSearch: "Search",
   PipeFunc: "Func",
+  PipeSignature: "Signature",
   PipeSequence: "Seq",
   PipeParallel: "Par",
   PipeCondition: "Cond",
@@ -1285,6 +1288,10 @@ function BlueprintSection({
       return /* @__PURE__ */ jsx13(PipeBatchSection, { blueprint, executionData });
     case "PipeFunc":
       return null;
+    case "PipeSignature":
+      return /* @__PURE__ */ jsx13("div", { className: "detail-not-available", children: "Signature stub \u2014 declared but not yet implemented." });
+    default:
+      return null;
   }
 }
 function ExecutionDataSection({
@@ -1324,6 +1331,7 @@ function GenericExecutionData({ data }) {
 }
 
 // src/graph/react/detail/ConceptDetailPanel.tsx
+import React6 from "react";
 import { Fragment as Fragment10, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function ConceptDetailPanel({
   concept,
@@ -1331,8 +1339,10 @@ function ConceptDetailPanel({
   isDryRun,
   resolveStorageUrl,
   canEmbedPdf,
-  onOpenExternally
+  onOpenExternally,
+  instanceKey
 }) {
+  var _a;
   return /* @__PURE__ */ jsxs14(Fragment10, { children: [
     /* @__PURE__ */ jsxs14("div", { className: "detail-header", children: [
       /* @__PURE__ */ jsx14("span", { className: "detail-concept-code", children: concept.code }),
@@ -1343,22 +1353,88 @@ function ConceptDetailPanel({
       "refines ",
       /* @__PURE__ */ jsx14("span", { className: "detail-refines-code", children: concept.refines })
     ] }),
-    concept.json_schema ? /* @__PURE__ */ jsxs14("div", { children: [
-      /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Structure" }),
-      /* @__PURE__ */ jsx14(SchemaTable, { schema: concept.json_schema, isDryRun })
-    ] }) : /* @__PURE__ */ jsx14("div", { className: "detail-not-available", children: "Schema not available" }),
-    ioData && !isDryRun && /* @__PURE__ */ jsxs14("div", { children: [
-      /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Data" }),
-      /* @__PURE__ */ jsx14(
-        StuffViewer,
-        {
-          stuff: toStuffViewerData(ioData),
-          resolveStorageUrl,
-          canEmbedPdf,
-          onOpenExternally
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx14(
+      ConceptBody,
+      {
+        concept,
+        ioData,
+        isDryRun,
+        resolveStorageUrl,
+        canEmbedPdf,
+        onOpenExternally
+      },
+      instanceKey != null ? instanceKey : `${concept.code}:${ioData && "digest" in ioData ? ioData.digest : (_a = ioData == null ? void 0 : ioData.name) != null ? _a : ""}`
+    )
+  ] });
+}
+function ConceptBody({
+  concept,
+  ioData,
+  isDryRun,
+  resolveStorageUrl,
+  canEmbedPdf,
+  onOpenExternally
+}) {
+  const hasData = Boolean(ioData) && !isDryRun;
+  const [activeTab, setActiveTab] = React6.useState(hasData ? "data" : "structure");
+  const baseId = React6.useId();
+  const tabId = (tab) => `${baseId}-tab-${tab}`;
+  const panelId = (tab) => `${baseId}-tabpanel-${tab}`;
+  const structure = concept.json_schema ? /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Structure" }),
+    /* @__PURE__ */ jsx14(SchemaTable, { schema: concept.json_schema, isDryRun })
+  ] }) : /* @__PURE__ */ jsx14("div", { className: "detail-not-available", children: "Schema not available" });
+  if (!hasData) return structure;
+  const onTabKeyDown = (event) => {
+    var _a;
+    let next;
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowRight":
+        next = activeTab === "data" ? "structure" : "data";
+        break;
+      case "Home":
+        next = "data";
+        break;
+      case "End":
+        next = "structure";
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    setActiveTab(next);
+    (_a = document.getElementById(tabId(next))) == null ? void 0 : _a.focus();
+  };
+  const renderTab = (tab, label) => /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: tabId(tab),
+      "aria-selected": activeTab === tab,
+      "aria-controls": panelId(tab),
+      tabIndex: activeTab === tab ? 0 : -1,
+      className: `detail-tab ${activeTab === tab ? "detail-tab--active" : ""}`,
+      onClick: () => setActiveTab(tab),
+      onKeyDown: onTabKeyDown,
+      children: label
+    }
+  );
+  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: "detail-tabs", role: "tablist", "aria-label": "Concept views", children: [
+      renderTab("data", "Data"),
+      renderTab("structure", "Structure")
+    ] }),
+    /* @__PURE__ */ jsx14("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? /* @__PURE__ */ jsx14(
+      StuffViewer,
+      {
+        stuff: toStuffViewerData(ioData),
+        resolveStorageUrl,
+        canEmbedPdf,
+        onOpenExternally
+      }
+    ) : structure })
   ] });
 }
 function SchemaTable({
@@ -1933,6 +2009,7 @@ var PIPE_TYPE_BADGES2 = {
   PipeImgGen: "ImgGen",
   PipeSearch: "Search",
   PipeFunc: "Func",
+  PipeSignature: "Signature",
   PipeSequence: "Sequence",
   PipeParallel: "Parallel",
   PipeCondition: "Condition",
@@ -1964,14 +2041,16 @@ function PipeCardBase({ data, children }) {
   const statusConfig = STATUS_CONFIG[data.status];
   const isRunning = data.status === "running";
   const isController = isControllerType(data.pipeType);
+  const isSignature = data.pipeType === "PipeSignature";
   const [inputsExpanded, setInputsExpanded] = useState2(false);
   const hasMany = data.inputs.length > MAX_VISIBLE_INPUTS;
   const visibleInputs = hasMany && !inputsExpanded ? data.inputs.slice(0, MAX_VISIBLE_INPUTS) : data.inputs;
   const hiddenCount = data.inputs.length - MAX_VISIBLE_INPUTS;
   const dirClass = data.direction === "TB" ? "pipe-card--tb" : "pipe-card--lr";
   const controllerClass = isController ? " pipe-card--controller" : "";
-  const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : "pipe-card-badge";
-  return /* @__PURE__ */ jsxs18("div", { className: `pipe-card ${dirClass}${controllerClass}`, children: [
+  const signatureClass = isSignature ? " pipe-card--signature" : "";
+  const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : isSignature ? "pipe-card-badge pipe-card-badge--signature" : "pipe-card-badge";
+  return /* @__PURE__ */ jsxs18("div", { className: `pipe-card ${dirClass}${controllerClass}${signatureClass}`, children: [
     /* @__PURE__ */ jsxs18("div", { className: "pipe-card-header", children: [
       /* @__PURE__ */ jsx18("span", { className: badgeClass, children: badge }),
       /* @__PURE__ */ jsx18("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
@@ -2062,6 +2141,7 @@ var PIPE_CARD_REGISTRY = {
   PipeImgGen: PipeCardBase,
   PipeSearch: PipeCardBase,
   PipeFunc: PipeCardBase,
+  PipeSignature: PipeCardBase,
   PipeSequence: PipeCardBase,
   PipeParallel: PipeCardBase,
   PipeCondition: PipeCardBase,
@@ -2098,6 +2178,7 @@ var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
   pipeCard: PipeCardRFNode
 });
 function StuffNodeDetail({
+  nodeId,
   stuffData,
   graphspec,
   resolveStorageUrl,
@@ -2110,6 +2191,7 @@ function StuffNodeDetail({
     {
       concept: conceptInfo,
       ioData: stuffData,
+      instanceKey: nodeId,
       resolveStorageUrl,
       canEmbedPdf,
       onOpenExternally
@@ -2181,29 +2263,29 @@ function GraphViewer(props) {
     canEmbedPdf,
     onOpenExternally
   } = props;
-  const graphspec = React7.useMemo(
+  const graphspec = React8.useMemo(
     () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
     [graphspecProp]
   );
-  const [direction, setDirection] = React7.useState(
+  const [direction, setDirection] = React8.useState(
     () => {
       var _a2, _b2;
       return (_b2 = (_a2 = initialDirection != null ? initialDirection : config.direction) != null ? _a2 : DEFAULT_GRAPH_CONFIG.direction) != null ? _b2 : GRAPH_DIRECTION.TB;
     }
   );
   const externalTheme = resolveExternalTheme(themeProp, config.theme);
-  const [theme, setTheme] = React7.useState(externalTheme);
-  const prevExternalThemeRef = React7.useRef(externalTheme);
-  React7.useEffect(() => {
+  const [theme, setTheme] = React8.useState(externalTheme);
+  const prevExternalThemeRef = React8.useRef(externalTheme);
+  React8.useEffect(() => {
     if (externalTheme !== prevExternalThemeRef.current) {
       prevExternalThemeRef.current = externalTheme;
       setTheme(externalTheme);
     }
   }, [externalTheme]);
-  const onThemeChangeRef = React7.useRef(onThemeChange);
+  const onThemeChangeRef = React8.useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
-  const prevReportedThemeRef = React7.useRef(theme);
-  React7.useEffect(() => {
+  const prevReportedThemeRef = React8.useRef(theme);
+  React8.useEffect(() => {
     var _a2;
     if (theme !== prevReportedThemeRef.current) {
       prevReportedThemeRef.current = theme;
@@ -2211,26 +2293,26 @@ function GraphViewer(props) {
     }
   }, [theme]);
   const effectiveFoldMode = (_b = (_a = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _a : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _b : FOLD_MODE.EXPANDED;
-  const [showControllers, setShowControllers] = React7.useState(() => {
+  const [showControllers, setShowControllers] = React8.useState(() => {
     var _a2, _b2;
     if (effectiveFoldMode === FOLD_MODE.FOLDED) return true;
     return (_b2 = (_a2 = initialShowControllers != null ? initialShowControllers : config.showControllers) != null ? _a2 : DEFAULT_GRAPH_CONFIG.showControllers) != null ? _b2 : false;
   });
-  const foldModeRef = React7.useRef(effectiveFoldMode);
+  const foldModeRef = React8.useRef(effectiveFoldMode);
   foldModeRef.current = effectiveFoldMode;
-  const containerRef = React7.useRef(null);
-  const [detailSelection, setDetailSelection] = React7.useState(null);
-  const [conceptOverride, setConceptOverride] = React7.useState(null);
+  const containerRef = React8.useRef(null);
+  const [detailSelection, setDetailSelection] = React8.useState(null);
+  const [conceptOverride, setConceptOverride] = React8.useState(null);
   const {
     width: panelWidth,
     isDragging: isPanelDragging,
     handleMouseDown: onResizeMouseDown
   } = useResizable({ defaultWidth: 380, minWidth: 280, maxWidth: 800, containerRef });
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     setDetailSelection(null);
     setConceptOverride(null);
   }, [graphspec]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const themePalette = getPaletteForTheme(theme);
@@ -2247,12 +2329,12 @@ function GraphViewer(props) {
   }, [config.paletteColors, theme]);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowRef = React7.useRef(null);
-  const initialDataRef = React7.useRef(null);
-  const rawGraphDataRef = React7.useRef(null);
-  const layoutCacheRef = React7.useRef(null);
-  const [expandedControllers, setExpandedControllers] = React7.useState(/* @__PURE__ */ new Set());
-  const toggleCollapse = React7.useCallback((controllerId) => {
+  const reactFlowRef = React8.useRef(null);
+  const initialDataRef = React8.useRef(null);
+  const rawGraphDataRef = React8.useRef(null);
+  const layoutCacheRef = React8.useRef(null);
+  const [expandedControllers, setExpandedControllers] = React8.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = React8.useCallback((controllerId) => {
     setExpandedControllers((prev) => {
       const next = new Set(prev);
       if (next.has(controllerId)) next.delete(controllerId);
@@ -2260,8 +2342,8 @@ function GraphViewer(props) {
       return next;
     });
   }, []);
-  const [foldedControllers, setFoldedControllers] = React7.useState(/* @__PURE__ */ new Set());
-  const toggleFold = React7.useCallback((controllerId, options) => {
+  const [foldedControllers, setFoldedControllers] = React8.useState(/* @__PURE__ */ new Set());
+  const toggleFold = React8.useCallback((controllerId, options) => {
     setFoldedControllers((prev) => {
       const next = new Set(prev);
       const shouldFold = !next.has(controllerId);
@@ -2275,34 +2357,34 @@ function GraphViewer(props) {
     });
   }, []);
   const edgeType = config.edgeType || EDGE_TYPE.DEFAULT;
-  const layoutConfig = React7.useMemo(
+  const layoutConfig = React8.useMemo(
     () => ({ nodesep: config.nodesep, ranksep: config.ranksep }),
     [config.nodesep, config.ranksep]
   );
-  const showControllersRef = React7.useRef(showControllers);
+  const showControllersRef = React8.useRef(showControllers);
   showControllersRef.current = showControllers;
-  const directionRef = React7.useRef(direction);
+  const directionRef = React8.useRef(direction);
   directionRef.current = direction;
-  const layoutConfigRef = React7.useRef(layoutConfig);
+  const layoutConfigRef = React8.useRef(layoutConfig);
   layoutConfigRef.current = layoutConfig;
-  const initialZoomRef = React7.useRef(config.initialZoom);
+  const initialZoomRef = React8.useRef(config.initialZoom);
   initialZoomRef.current = config.initialZoom;
-  const panToTopRef = React7.useRef(config.panToTop);
+  const panToTopRef = React8.useRef(config.panToTop);
   panToTopRef.current = config.panToTop;
-  const expandedRef = React7.useRef(expandedControllers);
+  const expandedRef = React8.useRef(expandedControllers);
   expandedRef.current = expandedControllers;
-  const toggleCollapseRef = React7.useRef(toggleCollapse);
+  const toggleCollapseRef = React8.useRef(toggleCollapse);
   toggleCollapseRef.current = toggleCollapse;
-  const foldedRef = React7.useRef(foldedControllers);
+  const foldedRef = React8.useRef(foldedControllers);
   foldedRef.current = foldedControllers;
-  const toggleFoldRef = React7.useRef(toggleFold);
+  const toggleFoldRef = React8.useRef(toggleFold);
   toggleFoldRef.current = toggleFold;
-  const isFirstFoldEffect = React7.useRef(true);
-  const prevFoldSizeRef = React7.useRef(0);
-  const skipNextFoldEffectRef = React7.useRef(false);
-  const statusMapRef = React7.useRef(statusMap);
+  const isFirstFoldEffect = React8.useRef(true);
+  const prevFoldSizeRef = React8.useRef(0);
+  const skipNextFoldEffectRef = React8.useRef(false);
+  const statusMapRef = React8.useRef(statusMap);
   statusMapRef.current = statusMap;
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!initialDataRef.current) return;
     let cancelled = false;
     (async () => {
@@ -2354,7 +2436,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [direction, layoutConfig]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!layoutCacheRef.current || !initialDataRef.current) return;
     const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
     const cachedEdges = layoutCacheRef.current.edges;
@@ -2374,7 +2456,7 @@ function GraphViewer(props) {
     );
     setEdges(toAppEdges(withControllers.edges));
   }, [showControllers, expandedControllers, toggleCollapse, toggleFold]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!graphspec) {
       initialDataRef.current = null;
       rawGraphDataRef.current = null;
@@ -2478,7 +2560,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [graphspec, edgeType]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (isFirstFoldEffect.current) {
       isFirstFoldEffect.current = false;
       prevFoldSizeRef.current = foldedControllers.size;
@@ -2558,7 +2640,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [foldedControllers, toggleFold]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!layoutCacheRef.current || !initialDataRef.current) return;
     const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
     const cachedEdges = layoutCacheRef.current.edges;
@@ -2576,7 +2658,7 @@ function GraphViewer(props) {
     setNodes(applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMap));
     setEdges(toAppEdges(withControllers.edges));
   }, [statusMap]);
-  const onNodeClick = React7.useCallback(
+  const onNodeClick = React8.useCallback(
     (event, node) => {
       var _a2;
       const nodeData = node.data;
@@ -2618,7 +2700,7 @@ function GraphViewer(props) {
       conceptOverride
     ]
   );
-  const onInit = React7.useCallback(
+  const onInit = React8.useCallback(
     (reactFlowInstance) => {
       reactFlowRef.current = reactFlowInstance;
       if (onReactFlowInit) {
@@ -2627,12 +2709,12 @@ function GraphViewer(props) {
     },
     [onReactFlowInit]
   );
-  const handlePaneClick = React7.useCallback(() => {
+  const handlePaneClick = React8.useCallback(() => {
     setDetailSelection(null);
     setConceptOverride(null);
     onPaneClick == null ? void 0 : onPaneClick();
   }, [onPaneClick]);
-  const handleConceptClick = React7.useCallback(
+  const handleConceptClick = React8.useCallback(
     (conceptCode) => {
       if (!graphspec) return;
       const info = resolveConceptRef(graphspec, conceptCode);
@@ -2644,7 +2726,7 @@ function GraphViewer(props) {
   const detailOpen = detailSelection !== null || conceptOverride !== null;
   const rawAnalysis = (_c = rawGraphDataRef.current) == null ? void 0 : _c.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
-  const foldAllProps = React7.useMemo(() => {
+  const foldAllProps = React8.useMemo(() => {
     if (!showControllers || !allControllerIds || allControllerIds.size === 0) {
       return {
         onFoldAll: void 0,
@@ -2660,102 +2742,96 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [showControllers, allControllerIds, foldedControllers]);
-  return /* @__PURE__ */ jsxs20(
-    "div",
-    {
-      ref: containerRef,
-      className: `react-flow-container react-flow-container--theme-${theme}`,
-      children: [
-        /* @__PURE__ */ jsx20(
-          ReactFlow,
-          {
-            nodes,
-            edges,
-            nodeTypes,
-            onNodesChange,
-            onEdgesChange,
-            onNodeClick,
-            onPaneClick: handlePaneClick,
-            onInit,
-            fitView: true,
-            fitViewOptions: { padding: 0.1 },
-            defaultEdgeOptions: { type: edgeType },
-            panOnScroll: true,
-            minZoom: 0.1,
-            proOptions: { hideAttribution: true },
-            panActivationKeyCode: null,
-            children: /* @__PURE__ */ jsx20(
-              Background,
-              {
-                variant: BackgroundVariant.Dots,
-                gap: 20,
-                size: 1,
-                color: "var(--color-bg-dots)"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs20(
-          DetailPanel,
-          {
-            isOpen: detailOpen,
-            onClose: handlePaneClick,
-            width: panelWidth,
-            isDragging: isPanelDragging,
-            onResizeHandleMouseDown: onResizeMouseDown,
-            children: [
-              conceptOverride ? /* @__PURE__ */ jsx20(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx20(
-                PipeDetailPanel,
-                {
-                  node: selectedSpecNode,
-                  spec: graphspec,
-                  onConceptClick: handleConceptClick
-                }
-              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx20(
-                StuffNodeDetail,
-                {
-                  stuffData: detailSelection.stuffData,
-                  graphspec,
-                  resolveStorageUrl,
-                  canEmbedPdf,
-                  onOpenExternally
-                }
-              ) : null,
-              renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
-            ]
-          }
-        ),
-        !hideToolbar && /* @__PURE__ */ jsx20(
-          GraphToolbar,
+  return /* @__PURE__ */ jsxs20("div", { ref: containerRef, className: `react-flow-container react-flow-container--theme-${theme}`, children: [
+    /* @__PURE__ */ jsx20(
+      ReactFlow,
+      {
+        nodes,
+        edges,
+        nodeTypes,
+        onNodesChange,
+        onEdgesChange,
+        onNodeClick,
+        onPaneClick: handlePaneClick,
+        onInit,
+        fitView: true,
+        fitViewOptions: { padding: 0.1 },
+        defaultEdgeOptions: { type: edgeType },
+        panOnScroll: true,
+        minZoom: 0.1,
+        proOptions: { hideAttribution: true },
+        panActivationKeyCode: null,
+        children: /* @__PURE__ */ jsx20(
+          Background,
           {
-            direction,
-            onDirectionChange: setDirection,
-            showControllers,
-            onShowControllersChange: setShowControllers,
-            onZoomIn: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
-            },
-            onZoomOut: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
-            },
-            onFitView: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
-            },
-            onFoldAll: foldAllProps.onFoldAll,
-            onExpandAll: foldAllProps.onExpandAll,
-            foldAllDisabled: foldAllProps.foldAllDisabled,
-            expandAllDisabled: foldAllProps.expandAllDisabled,
-            theme: showThemeToggle ? theme : void 0,
-            onThemeChange: showThemeToggle ? setTheme : void 0,
-            rightOffset: detailOpen ? panelWidth : 0
+            variant: BackgroundVariant.Dots,
+            gap: 20,
+            size: 1,
+            color: "var(--color-bg-dots)"
           }
         )
-      ]
-    }
-  );
+      }
+    ),
+    /* @__PURE__ */ jsxs20(
+      DetailPanel,
+      {
+        isOpen: detailOpen,
+        onClose: handlePaneClick,
+        width: panelWidth,
+        isDragging: isPanelDragging,
+        onResizeHandleMouseDown: onResizeMouseDown,
+        children: [
+          conceptOverride ? /* @__PURE__ */ jsx20(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx20(
+            PipeDetailPanel,
+            {
+              node: selectedSpecNode,
+              spec: graphspec,
+              onConceptClick: handleConceptClick
+            }
+          ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx20(
+            StuffNodeDetail,
+            {
+              nodeId: detailSelection.nodeId,
+              stuffData: detailSelection.stuffData,
+              graphspec,
+              resolveStorageUrl,
+              canEmbedPdf,
+              onOpenExternally
+            }
+          ) : null,
+          renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
+        ]
+      }
+    ),
+    !hideToolbar && /* @__PURE__ */ jsx20(
+      GraphToolbar,
+      {
+        direction,
+        onDirectionChange: setDirection,
+        showControllers,
+        onShowControllersChange: setShowControllers,
+        onZoomIn: () => {
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
+        },
+        onZoomOut: () => {
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
+        },
+        onFitView: () => {
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
+        },
+        onFoldAll: foldAllProps.onFoldAll,
+        onExpandAll: foldAllProps.onExpandAll,
+        foldAllDisabled: foldAllProps.foldAllDisabled,
+        expandAllDisabled: foldAllProps.expandAllDisabled,
+        theme: showThemeToggle ? theme : void 0,
+        onThemeChange: showThemeToggle ? setTheme : void 0,
+        rightOffset: detailOpen ? panelWidth : 0
+      }
+    )
+  ] });
 }
 export {
   ConceptDetailPanel,