@pipelex/mthds-ui 0.6.4 → 0.7.0

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
@@ -26,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,
@@ -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: [
@@ -483,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
+    ] })
   ] });
 }
 
@@ -1134,15 +1149,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 +1170,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 +1187,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" } })
     ] }),
@@ -1316,6 +1326,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,
@@ -1323,8 +1334,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 }),
@@ -1335,22 +1348,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({
@@ -1390,9 +1469,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 +1618,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 +1770,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 +1820,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 +1913,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 +2023,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 +2069,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 +2143,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 +2156,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,11 +2164,12 @@ 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
 });
 function StuffNodeDetail({
+  nodeId,
   stuffData,
   graphspec,
   resolveStorageUrl,
@@ -2041,11 +2177,12 @@ 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,
       ioData: stuffData,
+      instanceKey: nodeId,
       resolveStorageUrl,
       canEmbedPdf,
       onOpenExternally
@@ -2067,6 +2204,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 +2234,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,38 +2254,61 @@ function GraphViewer(props) {
     canEmbedPdf,
     onOpenExternally
   } = props;
-  const [direction, setDirection] = React7.useState(
+  const graphspec = React8.useMemo(
+    () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
+    [graphspecProp]
+  );
+  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] = React8.useState(externalTheme);
+  const prevExternalThemeRef = React8.useRef(externalTheme);
+  React8.useEffect(() => {
+    if (externalTheme !== prevExternalThemeRef.current) {
+      prevExternalThemeRef.current = externalTheme;
+      setTheme(externalTheme);
+    }
+  }, [externalTheme]);
+  const onThemeChangeRef = React8.useRef(onThemeChange);
+  onThemeChangeRef.current = onThemeChange;
+  const prevReportedThemeRef = React8.useRef(theme);
+  React8.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(() => {
+  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(() => {
-    var _a2;
+  React8.useEffect(() => {
     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,15 +2317,15 @@ 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);
-  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);
@@ -2166,8 +2333,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);
@@ -2181,34 +2348,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 () => {
@@ -2260,7 +2427,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;
@@ -2280,7 +2447,7 @@ function GraphViewer(props) {
     );
     setEdges(toAppEdges(withControllers.edges));
   }, [showControllers, expandedControllers, toggleCollapse, toggleFold]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!graphspec) {
       initialDataRef.current = null;
       rawGraphDataRef.current = null;
@@ -2384,7 +2551,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [graphspec, edgeType]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (isFirstFoldEffect.current) {
       isFirstFoldEffect.current = false;
       prevFoldSizeRef.current = foldedControllers.size;
@@ -2464,7 +2631,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;
@@ -2482,7 +2649,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;
@@ -2524,7 +2691,7 @@ function GraphViewer(props) {
       conceptOverride
     ]
   );
-  const onInit = React7.useCallback(
+  const onInit = React8.useCallback(
     (reactFlowInstance) => {
       reactFlowRef.current = reactFlowInstance;
       if (onReactFlowInit) {
@@ -2533,12 +2700,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);
@@ -2550,7 +2717,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,
@@ -2566,93 +2733,103 @@ 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,
+          {
+            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,
           {
-            variant: BackgroundVariant.Dots,
-            gap: 20,
-            size: 1,
-            color: "var(--color-bg-dots)"
+            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
           }
         )
-      }
-    ),
-    /* @__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,