@pipelex/mthds-ui 0.6.4 → 0.6.5

package/dist/graph/react/index.js

@@ -4,16 +4,19 @@ import {
   EDGE_TYPE,
   FOLD_MODE,
   GRAPH_DIRECTION,
+  GRAPH_THEME,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   applyControllers,
   applyFolds,
   buildGraph,
   findCousinControllers,
   getLayoutedElements,
+  getPaletteForTheme,
   getPipeBlueprint,
   resolveConceptRef,
-  stuffDigestFromId
-} from "../../chunk-FHRUYFGV.js";
+  stuffDigestFromId,
+  validateGraphSpec
+} from "../../chunk-ILX53OYM.js";
 import {
   __spreadProps,
   __spreadValues
@@ -186,7 +189,7 @@ function StuffViewer({
   canEmbedPdf,
   onOpenExternally
 }) {
-  var _a;
+  var _a, _b;
   const [activeTab, setActiveTab] = React.useState("html");
   const [copied, setCopied] = React.useState(false);
   const contentRef = React.useRef(null);
@@ -220,12 +223,12 @@ function StuffViewer({
   const isPdf = effectiveMime === "application/pdf";
   const isImage = (_a = effectiveMime == null ? void 0 : effectiveMime.startsWith("image/")) != null ? _a : false;
   const htmlTabLabel = getHtmlTabLabel(effectiveMime != null ? effectiveMime : stuff.contentType);
-  const jsonString = React.useMemo(() => {
-    if (stuff.data == null) return null;
+  const { jsonString, jsonError } = React.useMemo(() => {
+    if (stuff.data == null) return { jsonString: null, jsonError: null };
     try {
-      return JSON.stringify(stuff.data, null, 2);
-    } catch (e) {
-      return "[Unable to serialize data]";
+      return { jsonString: JSON.stringify(stuff.data, null, 2), jsonError: null };
+    } catch (err) {
+      return { jsonString: null, jsonError: err instanceof Error ? err.message : String(err) };
     }
   }, [stuff.data]);
   React.useEffect(() => {
@@ -248,7 +251,14 @@ function StuffViewer({
       ] })
     ] });
   }
+  function renderJsonError(detail) {
+    return /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-error", role: "alert", children: [
+      /* @__PURE__ */ jsx("div", { className: "stuff-viewer-error-title", children: "Unable to serialize data" }),
+      /* @__PURE__ */ jsx("div", { className: "stuff-viewer-error-detail", children: detail })
+    ] });
+  }
   function renderContent() {
+    var _a2;
     if (activeTab === "html") {
       if (isPdf) {
         const canEmbed = canEmbedPdf !== false;
@@ -278,7 +288,7 @@ function StuffViewer({
       }
       if (isImage) {
         if (inlineUrl) {
-          return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-image", children: /* @__PURE__ */ jsx("img", { src: inlineUrl, alt: stuff.name || "Image content" }) });
+          return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-image", children: /* @__PURE__ */ jsx("img", { src: inlineUrl, alt: (_a2 = stuff.name) != null ? _a2 : "(unnamed stuff)" }) });
         }
         return renderMediaFallback("Image");
       }
@@ -300,6 +310,7 @@ function StuffViewer({
           }
         );
       }
+      if (jsonError) return renderJsonError(jsonError);
       return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-placeholder", children: "No content available" });
     }
     if (activeTab === "json") {
@@ -312,6 +323,7 @@ function StuffViewer({
           }
         );
       }
+      if (jsonError) return renderJsonError(jsonError);
       return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-placeholder", children: "No JSON data available" });
     }
     if (stuff.dataText) {
@@ -332,6 +344,7 @@ function StuffViewer({
         }
       );
     }
+    if (jsonError) return renderJsonError(jsonError);
     return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-placeholder", children: "No text data available" });
   }
   function handleCopy() {
@@ -389,7 +402,7 @@ function StuffViewer({
   const rootClass = ["stuff-viewer", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
     /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-header", children: [
-      /* @__PURE__ */ jsx("h3", { className: "stuff-viewer-title", children: stuff.name || "Data" }),
+      /* @__PURE__ */ jsx("h3", { className: "stuff-viewer-title", children: (_b = stuff.name) != null ? _b : "(unnamed stuff)" }),
       stuff.concept && /* @__PURE__ */ jsx("p", { className: "stuff-viewer-subtitle", children: stuff.concept })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-toolbar", children: [
@@ -1134,15 +1147,16 @@ var STATUS_COLORS = {
   failed: "#FF5555",
   running: "#8BE9FD",
   scheduled: "#6272a4",
-  skipped: "#6272a4"
+  skipped: "#6272a4",
+  canceled: "#6272a4"
 };
 function PipeDetailPanel({ node, spec, onConceptClick }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  const pipeType = (_a = node.pipe_type) != null ? _a : "PipeFunc";
+  var _a, _b, _c, _d, _e, _f, _g;
+  const pipeType = node.pipe_type;
   const isController = CONTROLLER_TYPES.has(pipeType);
-  const badge = (_b = PIPE_TYPE_BADGES[pipeType]) != null ? _b : pipeType;
-  const status = (_c = node.status) != null ? _c : "scheduled";
-  const statusColor = (_d = STATUS_COLORS[status]) != null ? _d : "#6272a4";
+  const badge = PIPE_TYPE_BADGES[pipeType];
+  const status = node.status;
+  const statusColor = (_a = STATUS_COLORS[status]) != null ? _a : "#6272a4";
   const blueprint = React5.useMemo(() => {
     var _a2, _b2;
     if (!node.pipe_code || !spec.pipe_registry) return void 0;
@@ -1154,9 +1168,9 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
     }
     return void 0;
   }, [node.pipe_code, spec]);
-  const inputs = (_f = (_e = node.io) == null ? void 0 : _e.inputs) != null ? _f : [];
-  const outputs = (_h = (_g = node.io) == null ? void 0 : _g.outputs) != null ? _h : [];
-  const description = (_i = blueprint == null ? void 0 : blueprint.description) != null ? _i : node.description;
+  const inputs = (_c = (_b = node.io) == null ? void 0 : _b.inputs) != null ? _c : [];
+  const outputs = (_e = (_d = node.io) == null ? void 0 : _d.outputs) != null ? _e : [];
+  const description = (_f = blueprint == null ? void 0 : blueprint.description) != null ? _f : node.description;
   return /* @__PURE__ */ jsxs13(Fragment9, { children: [
     /* @__PURE__ */ jsxs13("div", { className: "detail-sticky-header", children: [
       /* @__PURE__ */ jsxs13("div", { className: "detail-header", children: [
@@ -1171,53 +1185,47 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
           "span",
           {
             className: `detail-pipe-code ${isController ? "detail-pipe-code--controller" : ""}`,
-            children: (_j = node.pipe_code) != null ? _j : "unknown"
+            children: node.pipe_code
           }
         )
       ] }),
       /* @__PURE__ */ jsxs13("div", { className: "detail-status", children: [
         /* @__PURE__ */ jsx13("span", { className: "detail-status-dot", style: { background: statusColor } }),
         /* @__PURE__ */ jsx13("span", { className: "detail-status-label", style: { color: statusColor }, children: status }),
-        ((_k = node.timing) == null ? void 0 : _k.duration) != null && /* @__PURE__ */ jsx13("span", { className: "detail-duration", children: formatDuration(node.timing.duration) })
+        ((_g = node.timing) == null ? void 0 : _g.duration) != null && /* @__PURE__ */ jsx13("span", { className: "detail-duration", children: formatDuration(node.timing.duration) })
       ] }),
       description && /* @__PURE__ */ jsx13("div", { className: "detail-description", children: description }),
       inputs.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
         /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Inputs" }),
-        /* @__PURE__ */ jsx13("div", { className: "detail-io-list", children: inputs.map((input, idx) => {
-          var _a2;
-          return /* @__PURE__ */ jsxs13(
-            "div",
-            {
-              className: "detail-io-pill",
-              style: { cursor: input.concept && onConceptClick ? "pointer" : void 0 },
-              onClick: () => input.concept && (onConceptClick == null ? void 0 : onConceptClick(input.concept)),
-              children: [
-                /* @__PURE__ */ jsx13("span", { className: "detail-io-name", children: (_a2 = input.name) != null ? _a2 : "unnamed" }),
-                input.concept && /* @__PURE__ */ jsx13("span", { className: "detail-io-concept", children: input.concept })
-              ]
-            },
-            idx
-          );
-        }) })
+        /* @__PURE__ */ jsx13("div", { className: "detail-io-list", children: inputs.map((input, idx) => /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: "detail-io-pill",
+            style: { cursor: input.concept && onConceptClick ? "pointer" : void 0 },
+            onClick: () => input.concept && (onConceptClick == null ? void 0 : onConceptClick(input.concept)),
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: "detail-io-name", children: input.name }),
+              input.concept && /* @__PURE__ */ jsx13("span", { className: "detail-io-concept", children: input.concept })
+            ]
+          },
+          idx
+        )) })
       ] }),
       outputs.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
         /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Output" }),
-        /* @__PURE__ */ jsx13("div", { className: "detail-io-list", children: outputs.map((output, idx) => {
-          var _a2;
-          return /* @__PURE__ */ jsxs13(
-            "div",
-            {
-              className: "detail-io-pill",
-              style: { cursor: output.concept && onConceptClick ? "pointer" : void 0 },
-              onClick: () => output.concept && (onConceptClick == null ? void 0 : onConceptClick(output.concept)),
-              children: [
-                /* @__PURE__ */ jsx13("span", { className: "detail-io-name", children: (_a2 = output.name) != null ? _a2 : "unnamed" }),
-                output.concept && /* @__PURE__ */ jsx13("span", { className: "detail-io-concept", children: output.concept })
-              ]
-            },
-            idx
-          );
-        }) })
+        /* @__PURE__ */ jsx13("div", { className: "detail-io-list", children: outputs.map((output, idx) => /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: "detail-io-pill",
+            style: { cursor: output.concept && onConceptClick ? "pointer" : void 0 },
+            onClick: () => output.concept && (onConceptClick == null ? void 0 : onConceptClick(output.concept)),
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: "detail-io-name", children: output.name }),
+              output.concept && /* @__PURE__ */ jsx13("span", { className: "detail-io-concept", children: output.concept })
+            ]
+          },
+          idx
+        )) })
       ] }),
       (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx13("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
     ] }),
@@ -1390,9 +1398,9 @@ function extractType(schema) {
   if (schema.allOf) return "all";
   if (schema.$ref) {
     const ref = String(schema.$ref);
-    return (_a = ref.split("/").pop()) != null ? _a : "ref";
+    return (_a = ref.split("/").pop()) != null ? _a : "(unresolved type)";
   }
-  return "unknown";
+  return "(unresolved type)";
 }
 function toStuffViewerData(ioData) {
   var _a;
@@ -1539,7 +1547,7 @@ function hydrateLabels(nodes) {
 }
 
 // src/graph/react/viewer/GraphToolbar.tsx
-import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs16(
   "svg",
   {
@@ -1691,6 +1699,44 @@ var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs16(
     ]
   }
 );
+var SUN_ICON = /* @__PURE__ */ jsxs16(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
+      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
+      /* @__PURE__ */ jsx16("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
+      /* @__PURE__ */ jsx16("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
+      /* @__PURE__ */ jsx16("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
+      /* @__PURE__ */ jsx16("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx16("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
+      /* @__PURE__ */ jsx16("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
+    ]
+  }
+);
+var MOON_ICON = /* @__PURE__ */ jsx16(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx16("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+  }
+);
 function GraphToolbar({
   direction,
   onDirectionChange,
@@ -1703,8 +1749,12 @@ function GraphToolbar({
   onExpandAll,
   foldAllDisabled = false,
   expandAllDisabled = false,
+  theme,
+  onThemeChange,
   rightOffset = 0
 }) {
+  const themeToggleEnabled = theme !== void 0 && onThemeChange !== void 0;
+  const themeLabel = theme === GRAPH_THEME.LIGHT ? "Switch to dark theme" : "Switch to light theme";
   const isVertical = direction === GRAPH_DIRECTION.TB || direction === GRAPH_DIRECTION.BT;
   const directionLabel = isVertical ? "Switch to horizontal layout" : "Switch to vertical layout";
   const controllersLabel = showControllers ? "Hide pipe controllers" : "Show pipe controllers \u2014 groups pipes by their controlling pipe";
@@ -1792,7 +1842,21 @@ function GraphToolbar({
         "aria-label": "Fit view",
         children: FIT_VIEW_ICON
       }
-    )
+    ),
+    themeToggleEnabled && /* @__PURE__ */ jsxs16(Fragment11, { children: [
+      /* @__PURE__ */ jsx16("div", { className: "graph-toolbar-separator" }),
+      /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          className: "graph-toolbar-btn",
+          onClick: () => onThemeChange(theme === GRAPH_THEME.LIGHT ? GRAPH_THEME.DARK : GRAPH_THEME.LIGHT),
+          title: themeLabel,
+          "aria-label": themeLabel,
+          children: theme === GRAPH_THEME.LIGHT ? MOON_ICON : SUN_ICON
+        }
+      )
+    ] })
   ] });
 }
 
@@ -1888,16 +1952,16 @@ var STATUS_CONFIG = {
   failed: { color: "#FF5555", label: "Failed" },
   running: { color: "#8BE9FD", label: "Running" },
   scheduled: { color: "#6272a4", label: "Scheduled" },
-  skipped: { color: "#6272a4", label: "Skipped" }
+  skipped: { color: "#6272a4", label: "Skipped" },
+  canceled: { color: "#6272a4", label: "Canceled" }
 };
 var MAX_VISIBLE_INPUTS = 4;
 function getBadge(pipeType) {
   return PIPE_TYPE_BADGES2[pipeType];
 }
 function PipeCardBase({ data, children }) {
-  var _a;
   const badge = getBadge(data.pipeType);
-  const statusConfig = (_a = STATUS_CONFIG[data.status]) != null ? _a : STATUS_CONFIG.scheduled;
+  const statusConfig = STATUS_CONFIG[data.status];
   const isRunning = data.status === "running";
   const isController = isControllerType(data.pipeType);
   const [inputsExpanded, setInputsExpanded] = useState2(false);
@@ -1934,9 +1998,9 @@ function PipeCardBase({ data, children }) {
           title: "Expand controller (alt/option: only this one)",
           "aria-label": "Expand controller",
           onClick: (e) => {
-            var _a2;
+            var _a;
             e.stopPropagation();
-            (_a2 = data.onExpand) == null ? void 0 : _a2.call(data, { soloMode: e.altKey });
+            (_a = data.onExpand) == null ? void 0 : _a.call(data, { soloMode: e.altKey });
           },
           children: "\u2922"
         }
@@ -2008,7 +2072,7 @@ function getPipeCardComponent(pipeType) {
 }
 
 // src/graph/react/nodes/pipe/PipeCardNode.tsx
-import { Fragment as Fragment11, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 function PipeCardNode({ data }) {
   var _a;
   const Card = (_a = getPipeCardComponent(data.pipeType)) != null ? _a : PipeCardBase;
@@ -2021,7 +2085,7 @@ function PipeCardRFNode({
 }) {
   const payload = data.pipeCardData;
   if (!payload) return null;
-  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment12, { children: [
     /* @__PURE__ */ jsx19(Handle, { type: "target", position: targetPosition }),
     /* @__PURE__ */ jsx19(PipeCardNode, { data: payload }),
     /* @__PURE__ */ jsx19(Handle, { type: "source", position: sourcePosition })
@@ -2029,7 +2093,7 @@ function PipeCardRFNode({
 }
 
 // src/graph/react/viewer/GraphViewer.tsx
-import { Fragment as Fragment12, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
   pipeCard: PipeCardRFNode
 });
@@ -2041,7 +2105,7 @@ function StuffNodeDetail({
   onOpenExternally
 }) {
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
-  return /* @__PURE__ */ jsx20(Fragment12, { children: conceptInfo ? /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx20(Fragment13, { children: conceptInfo ? /* @__PURE__ */ jsx20(
     ConceptDetailPanel,
     {
       concept: conceptInfo,
@@ -2067,6 +2131,10 @@ function seedFoldedControllers(mode, controllerIds) {
   if (mode === FOLD_MODE.FOLDED) return new Set(controllerIds);
   return /* @__PURE__ */ new Set();
 }
+function resolveExternalTheme(themeProp, configTheme) {
+  var _a, _b;
+  return (_b = (_a = themeProp != null ? themeProp : configTheme) != null ? _a : DEFAULT_GRAPH_CONFIG.theme) != null ? _b : GRAPH_THEME.DARK;
+}
 function cloneCachedNodes(nodes) {
   return nodes.map((n) => __spreadProps(__spreadValues({}, n), {
     position: __spreadValues({}, n.position),
@@ -2093,12 +2161,15 @@ function applyStatusOverrides(nodes, statusMap) {
 function GraphViewer(props) {
   var _a, _b, _c;
   const {
-    graphspec,
+    graphspec: graphspecProp,
     config = DEFAULT_GRAPH_CONFIG,
     initialDirection,
     initialShowControllers,
     initialFoldMode,
     hideToolbar = false,
+    theme: themeProp,
+    showThemeToggle = true,
+    onThemeChange,
     onNavigateToPipe,
     onStuffNodeClick,
     onReactFlowInit,
@@ -2110,12 +2181,35 @@ function GraphViewer(props) {
     canEmbedPdf,
     onOpenExternally
   } = props;
+  const graphspec = React7.useMemo(
+    () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
+    [graphspecProp]
+  );
   const [direction, setDirection] = React7.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(() => {
+    if (externalTheme !== prevExternalThemeRef.current) {
+      prevExternalThemeRef.current = externalTheme;
+      setTheme(externalTheme);
+    }
+  }, [externalTheme]);
+  const onThemeChangeRef = React7.useRef(onThemeChange);
+  onThemeChangeRef.current = onThemeChange;
+  const prevReportedThemeRef = React7.useRef(theme);
+  React7.useEffect(() => {
+    var _a2;
+    if (theme !== prevReportedThemeRef.current) {
+      prevReportedThemeRef.current = theme;
+      (_a2 = onThemeChangeRef.current) == null ? void 0 : _a2.call(onThemeChangeRef, theme);
+    }
+  }, [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(() => {
     var _a2, _b2;
@@ -2137,11 +2231,11 @@ function GraphViewer(props) {
     setConceptOverride(null);
   }, [graphspec]);
   React7.useEffect(() => {
-    var _a2;
     const el = containerRef.current;
     if (!el) return;
-    const palette = (_a2 = config.paletteColors) != null ? _a2 : DEFAULT_GRAPH_CONFIG.paletteColors;
-    if (!palette) return;
+    const themePalette = getPaletteForTheme(theme);
+    const overrides = config.paletteColors;
+    const palette = overrides ? __spreadValues(__spreadValues({}, themePalette), overrides) : themePalette;
     for (const [cssVar, value] of Object.entries(palette)) {
       el.style.setProperty(cssVar, value);
     }
@@ -2150,7 +2244,7 @@ function GraphViewer(props) {
         el.style.removeProperty(cssVar);
       }
     };
-  }, [config.paletteColors]);
+  }, [config.paletteColors, theme]);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const reactFlowRef = React7.useRef(null);
@@ -2566,93 +2660,102 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [showControllers, allControllerIds, foldedControllers]);
-  return /* @__PURE__ */ jsxs20("div", { ref: containerRef, className: "react-flow-container", 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,
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      ref: containerRef,
+      className: `react-flow-container react-flow-container--theme-${theme}`,
+      children: [
+        /* @__PURE__ */ jsx20(
+          ReactFlow,
           {
-            variant: BackgroundVariant.Dots,
-            gap: 20,
-            size: 1,
-            color: "var(--color-bg-dots)"
+            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,
+          {
+            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
           }
         )
-      }
-    ),
-    /* @__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,
-      {
-        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,
-        rightOffset: detailOpen ? panelWidth : 0
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 export {
   ConceptDetailPanel,