@pipelex/mthds-ui 0.31.0 → 0.33.0

package/dist/graph/react/index.js

@@ -13,22 +13,22 @@ import {
   findStuffByDigest,
   fitRoute,
   getLayoutedElements,
-  getPipeBlueprint,
   resolveConceptRef,
   resolveGraphStyle,
   resolveIssueTargetNodeId,
+  resolveNodeBlueprint,
   resolveStyleMenu,
   roundedPolylinePath,
   routeLabelCenter,
   validateGraphSpec
-} from "../../chunk-BXRVND2C.js";
+} from "../../chunk-ABUDTHWF.js";
 import {
   parsePipeRef
 } from "../../chunk-2N65P32H.js";
 import {
   DEFAULT_GRAPH_CONFIG,
   getPaletteForTheme
-} from "../../chunk-7H3RHOYA.js";
+} from "../../chunk-K2C5FU4W.js";
 import {
   BINDING_STEP_TYPE,
   EDGE_TYPE,
@@ -55,7 +55,7 @@ import {
   stuffDigestFromId,
   toolbarOrientation,
   toolbarSide
-} from "../../chunk-QRO3TYZE.js";
+} from "../../chunk-TMZ2JR2J.js";
 import {
   __spreadProps,
   __spreadValues
@@ -68,7 +68,7 @@ import "./viewer/GraphToolbar.css";
 import "./styles/simple/SimpleStyle.css";
 
 // src/graph/react/viewer/GraphViewer.tsx
-import React12 from "react";
+import React13 from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -477,20 +477,52 @@ function ModelRows({
   handle,
   label = "Model"
 }) {
+  var _a, _b, _c;
   const ran = modelsRan != null ? modelsRan : [];
-  const ranLabels = ran.map(
-    (entry) => ran.length > 1 ? `${entry.inference_model_name} (${entry.inference_calls})` : entry.inference_model_name
-  );
-  const chain = [];
-  for (const rung of [authored, handle, ...ranLabels]) {
-    if (rung && rung !== chain[chain.length - 1]) chain.push(rung);
+  const nameCounts = /* @__PURE__ */ new Map();
+  for (const entry of ran) {
+    nameCounts.set(
+      entry.inference_model_name,
+      ((_a = nameCounts.get(entry.inference_model_name)) != null ? _a : 0) + 1
+    );
+  }
+  const ranRungs = ran.map((entry, index) => {
+    var _a2;
+    const name = ((_a2 = nameCounts.get(entry.inference_model_name)) != null ? _a2 : 0) > 1 ? `${entry.inference_model_name} \xB7 ${modelTypeLabel(entry.model_type)}` : entry.inference_model_name;
+    return {
+      key: `ran-${index}`,
+      text: ran.length > 1 ? `${name} (${entry.inference_calls})` : name
+    };
+  });
+  const requested = [];
+  const requestedRungs = [
+    { key: "authored", text: authored != null ? authored : "" },
+    { key: "handle", text: handle != null ? handle : "" }
+  ];
+  for (const rung of requestedRungs) {
+    if (rung.text && rung.text !== ((_b = requested[requested.length - 1]) == null ? void 0 : _b.text)) requested.push(rung);
+  }
+  if (ranRungs.length > 0 && ((_c = requested[requested.length - 1]) == null ? void 0 : _c.text) === ranRungs[0].text) {
+    requested.pop();
   }
+  const chain = [...requested, ...ranRungs];
   if (chain.length === 0) return null;
   return /* @__PURE__ */ jsxs3("div", { className: "detail-kv-row", children: [
     /* @__PURE__ */ jsx3("span", { className: "detail-kv-key", children: label }),
-    /* @__PURE__ */ jsx3("span", { className: "detail-kv-value detail-model-value", children: chain.map((rung, index) => /* @__PURE__ */ jsx3("span", { className: index === 0 ? void 0 : "detail-model-resolved", children: rung }, rung)) })
+    /* @__PURE__ */ jsx3("span", { className: "detail-kv-value detail-model-value", children: chain.map((rung, index) => /* @__PURE__ */ jsx3("span", { className: index === 0 ? void 0 : "detail-model-resolved", children: rung.text }, rung.key)) })
   ] });
 }
+var MODEL_TYPE_LABELS = {
+  llm: "LLM",
+  extract: "extraction",
+  img_gen: "image generation",
+  search: "search",
+  judgment: "judgment"
+};
+function modelTypeLabel(modelType) {
+  var _a;
+  return (_a = MODEL_TYPE_LABELS[modelType]) != null ? _a : modelType.replaceAll("_", " ");
+}
 
 // src/graph/usageFormat.ts
 function scopeUsage(usage, scope) {
@@ -529,8 +561,9 @@ function formatCost(cost) {
   if (cost > 0 && cost < 1e-4) return "<$0.0001";
   return `$${cost.toFixed(4)}`;
 }
+var TOKEN_BILLED_MODEL_TYPES = /* @__PURE__ */ new Set(["llm", "judgment"]);
 function hasRealTokenCounts(scoped) {
-  return scoped.models.length > 0 && scoped.models.every((entry) => entry.model_type === "llm");
+  return scoped.models.length > 0 && scoped.models.every((entry) => TOKEN_BILLED_MODEL_TYPES.has(entry.model_type));
 }
 
 // src/graph/react/detail/sections/UsageSection.tsx
@@ -979,27 +1012,74 @@ function PipeComposeSection({
   ] });
 }
 
-// src/graph/react/detail/sections/PipeConditionDetail.tsx
+// src/graph/react/detail/sections/PipeDocGenDetail.tsx
 import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var DOC_GEN_SOURCE_LABELS = {
+  layout: "auto-layout",
+  html: "HTML template",
+  template_file: "template file"
+};
+function declaredSource(blueprint) {
+  if (blueprint.template == null && blueprint.template_file == null) return "layout";
+  if (blueprint.template != null || blueprint.doc_gen_format === "pdf") return "html";
+  return "template_file";
+}
+function nonEmpty(value) {
+  return typeof value === "string" && value.trim() !== "" ? value : void 0;
+}
+function PipeDocGenSection({
+  blueprint,
+  executionData,
+  modelsRan,
+  modelHandles
+}) {
+  var _a, _b, _c;
+  const format = nonEmpty(blueprint.doc_gen_format);
+  const authoredEngine = labelFromLlmChoice(blueprint.doc_gen_choice);
+  const resolvedEngine = nonEmpty(modelHandles == null ? void 0 : modelHandles.resolved_model);
+  const hasEngine = !!authoredEngine || !!resolvedEngine || ((_a = modelsRan == null ? void 0 : modelsRan.length) != null ? _a : 0) > 0;
+  const source = (_b = nonEmpty(modelHandles == null ? void 0 : modelHandles.source)) != null ? _b : declaredSource(blueprint);
+  const renderedFilename = nonEmpty(executionData == null ? void 0 : executionData.filename);
+  return /* @__PURE__ */ jsxs11(Fragment7, { children: [
+    /* @__PURE__ */ jsx11(KV, { label: "Format", value: format == null ? void 0 : format.toUpperCase() }),
+    hasEngine ? /* @__PURE__ */ jsx11(
+      ModelRows,
+      {
+        label: "Engine",
+        modelsRan,
+        authored: authoredEngine,
+        handle: resolvedEngine
+      }
+    ) : /* @__PURE__ */ jsx11(KV, { label: "Engine", value: "deck default" }),
+    /* @__PURE__ */ jsx11(KV, { label: "Source", value: (_c = DOC_GEN_SOURCE_LABELS[source]) != null ? _c : source }),
+    /* @__PURE__ */ jsx11(KV, { label: "Template File", value: blueprint.template_file }),
+    /* @__PURE__ */ jsx11(KV, { label: "File Name", value: blueprint.filename }),
+    renderedFilename && renderedFilename !== blueprint.filename && /* @__PURE__ */ jsx11(KV, { label: "Stored As", value: renderedFilename }),
+    blueprint.template && /* @__PURE__ */ jsx11(PromptToggle, { label: "Template", templateText: blueprint.template, renderedText: null })
+  ] });
+}
+
+// src/graph/react/detail/sections/PipeConditionDetail.tsx
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function PipeConditionSection({
   blueprint,
   executionData
 }) {
   const evaluatedExpression = executionData == null ? void 0 : executionData.evaluated_expression;
   const selectedOutcome = executionData == null ? void 0 : executionData.selected_outcome;
-  return /* @__PURE__ */ jsxs11(Fragment7, { children: [
-    /* @__PURE__ */ jsx11(PromptBlock, { label: "Expression", text: blueprint.expression }),
-    evaluatedExpression && /* @__PURE__ */ jsx11(KV, { label: "Expression Result", value: evaluatedExpression }),
-    /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx11("div", { className: "detail-section-label", children: "Outcomes" }),
-      Object.entries(blueprint.outcome_map).map(([outcome, pipeCode]) => /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(Fragment8, { children: [
+    /* @__PURE__ */ jsx12(PromptBlock, { label: "Expression", text: blueprint.expression }),
+    evaluatedExpression && /* @__PURE__ */ jsx12(KV, { label: "Expression Result", value: evaluatedExpression }),
+    /* @__PURE__ */ jsxs12("div", { children: [
+      /* @__PURE__ */ jsx12("div", { className: "detail-section-label", children: "Outcomes" }),
+      Object.entries(blueprint.outcome_map).map(([outcome, pipeCode]) => /* @__PURE__ */ jsxs12(
         "div",
         {
           className: "detail-kv-row",
           style: selectedOutcome === pipeCode ? { background: "rgba(80,250,123,0.08)" } : void 0,
           children: [
-            /* @__PURE__ */ jsx11("span", { className: "detail-kv-key", children: outcome }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12("span", { className: "detail-kv-key", children: outcome }),
+            /* @__PURE__ */ jsx12(
               "span",
               {
                 className: "detail-kv-value",
@@ -1011,32 +1091,32 @@ function PipeConditionSection({
         },
         outcome
       )),
-      /* @__PURE__ */ jsxs11("div", { className: "detail-kv-row", children: [
-        /* @__PURE__ */ jsx11("span", { className: "detail-kv-key", children: "default" }),
-        /* @__PURE__ */ jsx11("span", { className: "detail-kv-value", children: blueprint.default_outcome })
+      /* @__PURE__ */ jsxs12("div", { className: "detail-kv-row", children: [
+        /* @__PURE__ */ jsx12("span", { className: "detail-kv-key", children: "default" }),
+        /* @__PURE__ */ jsx12("span", { className: "detail-kv-value", children: blueprint.default_outcome })
       ] })
     ] }),
-    /* @__PURE__ */ jsx11(KV, { label: "Alias Expression To", value: blueprint.add_alias_from_expression_to })
+    /* @__PURE__ */ jsx12(KV, { label: "Alias Expression To", value: blueprint.add_alias_from_expression_to })
   ] });
 }
 
 // src/graph/react/detail/sections/PipeSequenceDetail.tsx
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function PipeSequenceSection({
   blueprint
 }) {
-  return /* @__PURE__ */ jsxs12("div", { children: [
-    /* @__PURE__ */ jsx12("div", { className: "detail-section-label", children: "Steps" }),
-    /* @__PURE__ */ jsx12("div", { className: "detail-steps-list", children: blueprint.sequential_sub_pipes.map((step, idx) => /* @__PURE__ */ jsxs12("div", { className: "detail-step-item", children: [
-      /* @__PURE__ */ jsx12("span", { className: "detail-step-index", children: idx + 1 }),
+  return /* @__PURE__ */ jsxs13("div", { children: [
+    /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Steps" }),
+    /* @__PURE__ */ jsx13("div", { className: "detail-steps-list", children: blueprint.sequential_sub_pipes.map((step, idx) => /* @__PURE__ */ jsxs13("div", { className: "detail-step-item", children: [
+      /* @__PURE__ */ jsx13("span", { className: "detail-step-index", children: idx + 1 }),
       isBindingStepSpec(step) ? (
         // A binding step runs no pipe: it names the path it binds.
-        /* @__PURE__ */ jsxs12("span", { className: "detail-step-code", title: "Binding step", children: [
+        /* @__PURE__ */ jsxs13("span", { className: "detail-step-code", title: "Binding step", children: [
           "from ",
           step.from_path
         ] })
-      ) : /* @__PURE__ */ jsx12("span", { className: "detail-step-code", children: step.pipe_code }),
-      step.output_name && /* @__PURE__ */ jsxs12("span", { className: "detail-io-concept", children: [
+      ) : /* @__PURE__ */ jsx13("span", { className: "detail-step-code", children: step.pipe_code }),
+      step.output_name && /* @__PURE__ */ jsxs13("span", { className: "detail-io-concept", children: [
         "-> ",
         step.output_name
       ] })
@@ -1045,52 +1125,52 @@ function PipeSequenceSection({
 }
 
 // src/graph/react/detail/sections/PipeParallelDetail.tsx
-import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function PipeParallelSection({
   blueprint
 }) {
-  return /* @__PURE__ */ jsxs13(Fragment8, { children: [
-    /* @__PURE__ */ jsxs13("div", { children: [
-      /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Branches" }),
-      /* @__PURE__ */ jsx13("div", { className: "detail-steps-list", children: blueprint.parallel_sub_pipes.map((branch, idx) => /* @__PURE__ */ jsxs13("div", { className: "detail-step-item", children: [
-        /* @__PURE__ */ jsx13("span", { className: "detail-step-code", children: branch.pipe_code }),
-        branch.output_name && /* @__PURE__ */ jsxs13("span", { className: "detail-io-concept", children: [
+  return /* @__PURE__ */ jsxs14(Fragment9, { children: [
+    /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Branches" }),
+      /* @__PURE__ */ jsx14("div", { className: "detail-steps-list", children: blueprint.parallel_sub_pipes.map((branch, idx) => /* @__PURE__ */ jsxs14("div", { className: "detail-step-item", children: [
+        /* @__PURE__ */ jsx14("span", { className: "detail-step-code", children: branch.pipe_code }),
+        branch.output_name && /* @__PURE__ */ jsxs14("span", { className: "detail-io-concept", children: [
           "-> ",
           branch.output_name
         ] })
       ] }, idx)) })
     ] }),
-    /* @__PURE__ */ jsx13(KV, { label: "Add Each Output", value: blueprint.add_each_output }),
-    /* @__PURE__ */ jsx13(KV, { label: "Combined Output", value: blueprint.combined_output })
+    /* @__PURE__ */ jsx14(KV, { label: "Add Each Output", value: blueprint.add_each_output }),
+    /* @__PURE__ */ jsx14(KV, { label: "Combined Output", value: blueprint.combined_output })
   ] });
 }
 
 // src/graph/react/detail/sections/PipeBatchDetail.tsx
-import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function PipeBatchSection({
   blueprint,
   executionData
 }) {
   const itemCount = executionData == null ? void 0 : executionData.item_count;
-  return /* @__PURE__ */ jsxs14(Fragment9, { children: [
-    /* @__PURE__ */ jsx14(KV, { label: "Branch Pipe", value: blueprint.branch_pipe_code }),
-    /* @__PURE__ */ jsx14(KV, { label: "Input List Variable", value: blueprint.batch_params.input_list_stuff_name }),
-    /* @__PURE__ */ jsx14(KV, { label: "Input Item Variable", value: blueprint.batch_params.input_item_stuff_name }),
-    itemCount != null && /* @__PURE__ */ jsx14(KV, { label: "Items Processed", value: itemCount })
+  return /* @__PURE__ */ jsxs15(Fragment10, { children: [
+    /* @__PURE__ */ jsx15(KV, { label: "Branch Pipe", value: blueprint.branch_pipe_code }),
+    /* @__PURE__ */ jsx15(KV, { label: "Input List Variable", value: blueprint.batch_params.input_list_stuff_name }),
+    /* @__PURE__ */ jsx15(KV, { label: "Input Item Variable", value: blueprint.batch_params.input_item_stuff_name }),
+    itemCount != null && /* @__PURE__ */ jsx15(KV, { label: "Items Processed", value: itemCount })
   ] });
 }
 
 // src/graph/react/detail/sections/BindingStepDetail.tsx
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 function BindingStepSection({ node }) {
   var _a, _b;
   const executionData = (_a = node.execution_data) != null ? _a : {};
   const fromPath = typeof executionData.from === "string" ? executionData.from : node.pipe_code;
   const result = typeof executionData.result === "string" ? executionData.result : (_b = node.io.outputs[0]) == null ? void 0 : _b.name;
-  return /* @__PURE__ */ jsxs15("div", { children: [
-    /* @__PURE__ */ jsx15("div", { className: "detail-section-label", children: "Binding" }),
-    /* @__PURE__ */ jsx15(KV, { label: "From", value: fromPath }),
-    /* @__PURE__ */ jsx15(KV, { label: "Result", value: result })
+  return /* @__PURE__ */ jsxs16("div", { children: [
+    /* @__PURE__ */ jsx16("div", { className: "detail-section-label", children: "Binding" }),
+    /* @__PURE__ */ jsx16(KV, { label: "From", value: fromPath }),
+    /* @__PURE__ */ jsx16(KV, { label: "Result", value: result })
   ] });
 }
 
@@ -1102,18 +1182,27 @@ var MERGED_EXECUTION_DATA_TYPES = /* @__PURE__ */ new Set([
   "PipeSearch",
   "PipeStructure",
   "PipeCompose",
+  "PipeDocGen",
   "PipeSequence",
   "PipeParallel",
   "PipeCondition",
   "PipeBatch"
 ]);
+var UNDUMPED_EXECUTION_DATA_KEYS = {
+  PipeDocGen: /* @__PURE__ */ new Set(["url"])
+};
 function shouldDumpExecutionData(pipeType, hasBlueprint) {
   if (MERGED_EXECUTION_DATA_TYPES.has(pipeType)) return !hasBlueprint;
   return true;
 }
+function dumpableExecutionData(pipeType, executionData) {
+  const undumped = UNDUMPED_EXECUTION_DATA_KEYS[pipeType];
+  const entries = Object.entries(executionData);
+  return undumped ? entries.filter(([key]) => !undumped.has(key)) : entries;
+}
 
 // src/graph/react/detail/PipeDetailPanel.tsx
-import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -1155,32 +1244,22 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
   const badge = PIPE_TYPE_BADGES[pipeType];
   const status = node.status;
   const statusColor = (_a = STATUS_COLORS[status]) != null ? _a : "#6272a4";
-  const blueprint = React6.useMemo(() => {
-    var _a2, _b2;
-    if (isBinding || !node.pipe_code || !spec.pipe_registry) return void 0;
-    const directKey = `${(_b2 = (_a2 = spec.pipeline_ref) == null ? void 0 : _a2.domain) != null ? _b2 : ""}.${node.pipe_code}`;
-    const direct = getPipeBlueprint(spec, directKey);
-    if (direct) return direct;
-    for (const [ref, pipe] of Object.entries(spec.pipe_registry)) {
-      if (ref.endsWith(`.${node.pipe_code}`)) return pipe;
-    }
-    return void 0;
-  }, [isBinding, node.pipe_code, spec]);
+  const blueprint = React6.useMemo(() => resolveNodeBlueprint(spec, node), [spec, node]);
   const [usageExpanded, setUsageExpanded] = React6.useState(false);
   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__ */ jsxs16(Fragment10, { children: [
-    /* @__PURE__ */ jsxs16("div", { className: "detail-sticky-header", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "detail-header", children: [
-        /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs17(Fragment11, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "detail-sticky-header", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "detail-header", children: [
+        /* @__PURE__ */ jsx17(
           "span",
           {
             className: `detail-badge ${isController ? "detail-badge--controller" : "detail-badge--operator"}`,
             children: badge
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "span",
           {
             className: `detail-pipe-code ${isController ? "detail-pipe-code--controller" : ""}`,
@@ -1188,11 +1267,11 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
           }
         )
       ] }),
-      !isStatic && /* @__PURE__ */ jsxs16("div", { className: "detail-status", children: [
-        /* @__PURE__ */ jsx16("span", { className: "detail-status-dot", style: { background: statusColor } }),
-        /* @__PURE__ */ jsx16("span", { className: "detail-status-label", style: { color: statusColor }, children: status }),
-        ((_g = node.timing) == null ? void 0 : _g.duration) != null && /* @__PURE__ */ jsx16("span", { className: "detail-duration", children: formatDuration(node.timing.duration) }),
-        showsGeneratedData && node.usage && /* @__PURE__ */ jsx16(
+      !isStatic && /* @__PURE__ */ jsxs17("div", { className: "detail-status", children: [
+        /* @__PURE__ */ jsx17("span", { className: "detail-status-dot", style: { background: statusColor } }),
+        /* @__PURE__ */ jsx17("span", { className: "detail-status-label", style: { color: statusColor }, children: status }),
+        ((_g = node.timing) == null ? void 0 : _g.duration) != null && /* @__PURE__ */ jsx17("span", { className: "detail-duration", children: formatDuration(node.timing.duration) }),
+        showsGeneratedData && node.usage && /* @__PURE__ */ jsx17(
           UsageCostInline,
           {
             usage: node.usage,
@@ -1202,44 +1281,44 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
           }
         )
       ] }),
-      showsGeneratedData && node.usage && usageExpanded && /* @__PURE__ */ jsx16(UsageDetails, { usage: node.usage, isController }),
-      description && /* @__PURE__ */ jsx16("div", { className: "detail-description", children: description }),
-      inputs.length > 0 && /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx16("div", { className: "detail-section-label", children: "Inputs" }),
-        /* @__PURE__ */ jsx16("div", { className: "detail-io-list", children: inputs.map((input, idx) => /* @__PURE__ */ jsxs16(
+      showsGeneratedData && node.usage && usageExpanded && /* @__PURE__ */ jsx17(UsageDetails, { usage: node.usage, isController }),
+      description && /* @__PURE__ */ jsx17("div", { className: "detail-description", children: description }),
+      inputs.length > 0 && /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx17("div", { className: "detail-section-label", children: "Inputs" }),
+        /* @__PURE__ */ jsx17("div", { className: "detail-io-list", children: inputs.map((input, idx) => /* @__PURE__ */ jsxs17(
           "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__ */ jsx16("span", { className: "detail-io-name", children: input.name }),
-              input.concept && /* @__PURE__ */ jsx16("span", { className: "detail-io-concept", children: input.concept + multiplicitySuffix(input.multiplicity) })
+              /* @__PURE__ */ jsx17("span", { className: "detail-io-name", children: input.name }),
+              input.concept && /* @__PURE__ */ jsx17("span", { className: "detail-io-concept", children: input.concept + multiplicitySuffix(input.multiplicity) })
             ]
           },
           idx
         )) })
       ] }),
-      outputs.length > 0 && /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx16("div", { className: "detail-section-label", children: "Output" }),
-        /* @__PURE__ */ jsx16("div", { className: "detail-io-list", children: outputs.map((output, idx) => /* @__PURE__ */ jsxs16(
+      outputs.length > 0 && /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx17("div", { className: "detail-section-label", children: "Output" }),
+        /* @__PURE__ */ jsx17("div", { className: "detail-io-list", children: outputs.map((output, idx) => /* @__PURE__ */ jsxs17(
           "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__ */ jsx16("span", { className: "detail-io-name", children: output.name }),
-              output.concept && /* @__PURE__ */ jsx16("span", { className: "detail-io-concept", children: output.concept + multiplicitySuffix(output.multiplicity) })
+              /* @__PURE__ */ jsx17("span", { className: "detail-io-name", children: output.name }),
+              output.concept && /* @__PURE__ */ jsx17("span", { className: "detail-io-concept", children: output.concept + multiplicitySuffix(output.multiplicity) })
             ]
           },
           idx
         )) })
       ] }),
-      (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx16("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
+      (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx17("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
     ] }),
-    isBinding && /* @__PURE__ */ jsx16(BindingStepSection, { node }),
-    blueprint && /* @__PURE__ */ jsx16(
+    isBinding && /* @__PURE__ */ jsx17(BindingStepSection, { node }),
+    blueprint && /* @__PURE__ */ jsx17(
       BlueprintSection,
       {
         blueprint,
@@ -1248,7 +1327,7 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
         modelHandles: node.execution_data
       }
     ),
-    showsGeneratedData && !isBinding && node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx16(
+    showsGeneratedData && !isBinding && node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx17(
       ExecutionDataSection,
       {
         executionData: node.execution_data,
@@ -1256,14 +1335,14 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
         hasBlueprint: !!blueprint
       }
     ),
-    node.error && /* @__PURE__ */ jsxs16("div", { className: "detail-error", children: [
-      /* @__PURE__ */ jsx16("div", { className: "detail-error-type", children: node.error.error_type }),
-      /* @__PURE__ */ jsx16("div", { className: "detail-error-message", children: node.error.message }),
-      node.error.stack && /* @__PURE__ */ jsx16("div", { className: "detail-error-stack", children: node.error.stack })
+    node.error && /* @__PURE__ */ jsxs17("div", { className: "detail-error", children: [
+      /* @__PURE__ */ jsx17("div", { className: "detail-error-type", children: node.error.error_type }),
+      /* @__PURE__ */ jsx17("div", { className: "detail-error-message", children: node.error.message }),
+      node.error.stack && /* @__PURE__ */ jsx17("div", { className: "detail-error-stack", children: node.error.stack })
     ] }),
-    showsGeneratedData && node.metrics && Object.keys(node.metrics).length > 0 && /* @__PURE__ */ jsxs16("div", { children: [
-      /* @__PURE__ */ jsx16("div", { className: "detail-section-label", children: "Metrics" }),
-      Object.entries(node.metrics).map(([key, value]) => /* @__PURE__ */ jsx16(
+    showsGeneratedData && node.metrics && Object.keys(node.metrics).length > 0 && /* @__PURE__ */ jsxs17("div", { children: [
+      /* @__PURE__ */ jsx17("div", { className: "detail-section-label", children: "Metrics" }),
+      Object.entries(node.metrics).map(([key, value]) => /* @__PURE__ */ jsx17(
         KV,
         {
           label: key,
@@ -1272,17 +1351,17 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
         key
       ))
     ] }),
-    node.tags && Object.keys(node.tags).length > 0 && /* @__PURE__ */ jsxs16("div", { children: [
-      /* @__PURE__ */ jsx16("div", { className: "detail-section-label", children: "Tags" }),
-      /* @__PURE__ */ jsx16("div", { className: "detail-tags", children: Object.entries(node.tags).map(([key, value]) => /* @__PURE__ */ jsxs16("span", { className: "detail-tag", children: [
-        /* @__PURE__ */ jsxs16("span", { className: "detail-tag-key", children: [
+    node.tags && Object.keys(node.tags).length > 0 && /* @__PURE__ */ jsxs17("div", { children: [
+      /* @__PURE__ */ jsx17("div", { className: "detail-section-label", children: "Tags" }),
+      /* @__PURE__ */ jsx17("div", { className: "detail-tags", children: Object.entries(node.tags).map(([key, value]) => /* @__PURE__ */ jsxs17("span", { className: "detail-tag", children: [
+        /* @__PURE__ */ jsxs17("span", { className: "detail-tag-key", children: [
           key,
           ": "
         ] }),
-        /* @__PURE__ */ jsx16("span", { className: "detail-tag-value", children: value })
+        /* @__PURE__ */ jsx17("span", { className: "detail-tag-value", children: value })
       ] }, key)) })
     ] }),
-    !blueprint && !isBinding && /* @__PURE__ */ jsx16("div", { className: "detail-not-available", children: "Blueprint not available" })
+    !blueprint && !isBinding && /* @__PURE__ */ jsx17("div", { className: "detail-not-available", children: "Blueprint not available" })
   ] });
 }
 function BlueprintSection({
@@ -1293,7 +1372,7 @@ function BlueprintSection({
 }) {
   switch (blueprint.type) {
     case "PipeLLM":
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         PipeLLMSection,
         {
           blueprint,
@@ -1303,7 +1382,7 @@ function BlueprintSection({
         }
       );
     case "PipeImgGen":
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         PipeImgGenSection,
         {
           blueprint,
@@ -1313,9 +1392,19 @@ function BlueprintSection({
         }
       );
     case "PipeCompose":
-      return /* @__PURE__ */ jsx16(PipeComposeSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx17(PipeComposeSection, { blueprint, executionData });
+    case "PipeDocGen":
+      return /* @__PURE__ */ jsx17(
+        PipeDocGenSection,
+        {
+          blueprint,
+          executionData,
+          modelsRan,
+          modelHandles
+        }
+      );
     case "PipeExtract":
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         PipeExtractSection,
         {
           blueprint,
@@ -1324,7 +1413,7 @@ function BlueprintSection({
         }
       );
     case "PipeSearch":
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         PipeSearchSection,
         {
           blueprint,
@@ -1334,7 +1423,7 @@ function BlueprintSection({
         }
       );
     case "PipeStructure":
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         PipeStructureSection,
         {
           blueprint,
@@ -1344,19 +1433,24 @@ function BlueprintSection({
         }
       );
     case "PipeSequence":
-      return /* @__PURE__ */ jsx16(PipeSequenceSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx17(PipeSequenceSection, { blueprint, executionData });
     case "PipeParallel":
-      return /* @__PURE__ */ jsx16(PipeParallelSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx17(PipeParallelSection, { blueprint, executionData });
     case "PipeCondition":
-      return /* @__PURE__ */ jsx16(PipeConditionSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx17(PipeConditionSection, { blueprint, executionData });
     case "PipeBatch":
-      return /* @__PURE__ */ jsx16(PipeBatchSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx17(PipeBatchSection, { blueprint, executionData });
     case "PipeFunc":
       return null;
+    case "PipeJudge":
+      return null;
     case "PipeSignature":
-      return /* @__PURE__ */ jsx16("div", { className: "detail-not-available", children: "Signature stub \u2014 declared but not yet implemented." });
-    default:
+      return /* @__PURE__ */ jsx17("div", { className: "detail-not-available", children: "Signature stub \u2014 declared but not yet implemented." });
+    default: {
+      const _unhandled = blueprint;
+      void _unhandled;
       return null;
+    }
   }
 }
 function ExecutionDataSection({
@@ -1365,20 +1459,19 @@ function ExecutionDataSection({
   hasBlueprint
 }) {
   if (!shouldDumpExecutionData(pipeType, hasBlueprint)) return null;
-  return /* @__PURE__ */ jsx16(GenericExecutionData, { data: executionData });
+  return /* @__PURE__ */ jsx17(GenericExecutionData, { entries: dumpableExecutionData(pipeType, executionData) });
 }
-function GenericExecutionData({ data }) {
-  const entries = Object.entries(data);
+function GenericExecutionData({ entries }) {
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsxs16(Fragment10, { children: [
-    /* @__PURE__ */ jsx16("div", { className: "detail-section-label", children: "Execution" }),
-    entries.map(([key, value]) => /* @__PURE__ */ jsx16(KV, { label: key, value: String(value) }, key))
+  return /* @__PURE__ */ jsxs17(Fragment11, { children: [
+    /* @__PURE__ */ jsx17("div", { className: "detail-section-label", children: "Execution" }),
+    entries.map(([key, value]) => /* @__PURE__ */ jsx17(KV, { label: key, value: String(value) }, key))
   ] });
 }
 
 // src/graph/react/detail/ConceptDetailPanel.tsx
 import React7 from "react";
-import { Fragment as Fragment11, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 function ConceptDetailPanel({
   concept,
   ioData,
@@ -1388,18 +1481,18 @@ function ConceptDetailPanel({
 }) {
   var _a;
   const multiplicity = ioData == null ? void 0 : ioData.multiplicity;
-  return /* @__PURE__ */ jsxs17(Fragment11, { children: [
-    /* @__PURE__ */ jsxs17("div", { className: "detail-header", children: [
-      /* @__PURE__ */ jsx17("span", { className: "detail-concept-code", children: concept.code + multiplicitySuffix(multiplicity) }),
-      /* @__PURE__ */ jsx17("span", { className: "detail-concept-domain", children: concept.domain_code })
+  return /* @__PURE__ */ jsxs18(Fragment12, { children: [
+    /* @__PURE__ */ jsxs18("div", { className: "detail-header", children: [
+      /* @__PURE__ */ jsx18("span", { className: "detail-concept-code", children: concept.code + multiplicitySuffix(multiplicity) }),
+      /* @__PURE__ */ jsx18("span", { className: "detail-concept-domain", children: concept.domain_code })
     ] }),
-    isPluralMultiplicity(multiplicity) && /* @__PURE__ */ jsx17("div", { className: "detail-multiplicity", children: multiplicity === true ? `A variable-length list of ${concept.code} items` : `A fixed-length list of exactly ${multiplicity} ${concept.code} items` }),
-    concept.description && /* @__PURE__ */ jsx17("div", { className: "detail-description", children: concept.description }),
-    concept.refines && /* @__PURE__ */ jsxs17("div", { className: "detail-refines", children: [
+    isPluralMultiplicity(multiplicity) && /* @__PURE__ */ jsx18("div", { className: "detail-multiplicity", children: multiplicity === true ? `A variable-length list of ${concept.code} items` : `A fixed-length list of exactly ${multiplicity} ${concept.code} items` }),
+    concept.description && /* @__PURE__ */ jsx18("div", { className: "detail-description", children: concept.description }),
+    concept.refines && /* @__PURE__ */ jsxs18("div", { className: "detail-refines", children: [
       "refines ",
-      /* @__PURE__ */ jsx17("span", { className: "detail-refines-code", children: concept.refines })
+      /* @__PURE__ */ jsx18("span", { className: "detail-refines-code", children: concept.refines })
     ] }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       ConceptBody,
       {
         concept,
@@ -1418,10 +1511,10 @@ function ConceptBody({ concept, ioData, isDryRun, renderData }) {
   const baseId = React7.useId();
   const tabId = (tab) => `${baseId}-tab-${tab}`;
   const panelId = (tab) => `${baseId}-tabpanel-${tab}`;
-  const structure = concept.json_schema ? /* @__PURE__ */ jsxs17("div", { children: [
-    /* @__PURE__ */ jsx17("div", { className: "detail-section-label", children: "Structure" }),
-    /* @__PURE__ */ jsx17(SchemaTable, { schema: concept.json_schema })
-  ] }) : /* @__PURE__ */ jsx17("div", { className: "detail-not-available", children: "Schema not available" });
+  const structure = concept.json_schema ? /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsx18("div", { className: "detail-section-label", children: "Structure" }),
+    /* @__PURE__ */ jsx18(SchemaTable, { schema: concept.json_schema })
+  ] }) : /* @__PURE__ */ jsx18("div", { className: "detail-not-available", children: "Schema not available" });
   if (!hasData) return structure;
   const onTabKeyDown = (event) => {
     var _a;
@@ -1444,7 +1537,7 @@ function ConceptBody({ concept, ioData, isDryRun, renderData }) {
     setActiveTab(next);
     (_a = document.getElementById(tabId(next))) == null ? void 0 : _a.focus();
   };
-  const renderTab = (tab, label) => /* @__PURE__ */ jsx17(
+  const renderTab = (tab, label) => /* @__PURE__ */ jsx18(
     "button",
     {
       type: "button",
@@ -1459,12 +1552,12 @@ function ConceptBody({ concept, ioData, isDryRun, renderData }) {
       children: label
     }
   );
-  return /* @__PURE__ */ jsxs17(Fragment11, { children: [
-    /* @__PURE__ */ jsxs17("div", { className: "detail-tabs", role: "tablist", "aria-label": "Concept views", children: [
+  return /* @__PURE__ */ jsxs18(Fragment12, { children: [
+    /* @__PURE__ */ jsxs18("div", { className: "detail-tabs", role: "tablist", "aria-label": "Concept views", children: [
       renderTab("data", "Data"),
       renderTab("structure", "Structure")
     ] }),
-    /* @__PURE__ */ jsx17("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? dataView : structure })
+    /* @__PURE__ */ jsx18("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? dataView : structure })
   ] });
 }
 function SchemaTable({ schema }) {
@@ -1472,23 +1565,23 @@ function SchemaTable({ schema }) {
   const properties = schema.properties;
   const required = new Set((_a = schema.required) != null ? _a : []);
   if (!properties || Object.keys(properties).length === 0) {
-    return /* @__PURE__ */ jsx17("div", { className: "detail-not-available", children: "No fields defined" });
+    return /* @__PURE__ */ jsx18("div", { className: "detail-not-available", children: "No fields defined" });
   }
   const fields = Object.entries(properties);
-  return /* @__PURE__ */ jsxs17("table", { className: "detail-schema-table", children: [
-    /* @__PURE__ */ jsx17("thead", { children: /* @__PURE__ */ jsxs17("tr", { children: [
-      /* @__PURE__ */ jsx17("th", { children: "Field" }),
-      /* @__PURE__ */ jsx17("th", { children: "Type" }),
-      /* @__PURE__ */ jsx17("th", {}),
-      /* @__PURE__ */ jsx17("th", { children: "Description" })
+  return /* @__PURE__ */ jsxs18("table", { className: "detail-schema-table", children: [
+    /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsxs18("tr", { children: [
+      /* @__PURE__ */ jsx18("th", { children: "Field" }),
+      /* @__PURE__ */ jsx18("th", { children: "Type" }),
+      /* @__PURE__ */ jsx18("th", {}),
+      /* @__PURE__ */ jsx18("th", { children: "Description" })
     ] }) }),
-    /* @__PURE__ */ jsx17("tbody", { children: fields.map(([fieldName, fieldSchema]) => {
+    /* @__PURE__ */ jsx18("tbody", { children: fields.map(([fieldName, fieldSchema]) => {
       var _a2;
-      return /* @__PURE__ */ jsxs17("tr", { children: [
-        /* @__PURE__ */ jsx17("td", { className: "detail-schema-field", children: fieldName }),
-        /* @__PURE__ */ jsx17("td", { className: "detail-schema-type", children: extractType(fieldSchema) }),
-        /* @__PURE__ */ jsx17("td", { children: required.has(fieldName) && /* @__PURE__ */ jsx17("span", { className: "detail-schema-required", children: "req" }) }),
-        /* @__PURE__ */ jsx17("td", { children: (_a2 = fieldSchema.description) != null ? _a2 : "" })
+      return /* @__PURE__ */ jsxs18("tr", { children: [
+        /* @__PURE__ */ jsx18("td", { className: "detail-schema-field", children: fieldName }),
+        /* @__PURE__ */ jsx18("td", { className: "detail-schema-type", children: extractType(fieldSchema) }),
+        /* @__PURE__ */ jsx18("td", { children: required.has(fieldName) && /* @__PURE__ */ jsx18("span", { className: "detail-schema-required", children: "req" }) }),
+        /* @__PURE__ */ jsx18("td", { children: (_a2 = fieldSchema.description) != null ? _a2 : "" })
       ] }, fieldName);
     }) })
   ] });
@@ -1539,10 +1632,10 @@ function toAppEdges(edges) {
 }
 
 // src/graph/react/viewer/renderLabel.tsx
-import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 function renderLabel(desc) {
   if (desc.kind === "pipe") {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         style: {
@@ -1556,7 +1649,7 @@ function renderLabel(desc) {
           minWidth: 0
         },
         title: desc.label,
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           "span",
           {
             style: {
@@ -1575,7 +1668,7 @@ function renderLabel(desc) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       style: {
@@ -1591,7 +1684,7 @@ function renderLabel(desc) {
       },
       title: desc.concept ? `${desc.label}: ${desc.concept}` : desc.label,
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "span",
           {
             style: {
@@ -1607,7 +1700,7 @@ function renderLabel(desc) {
             children: desc.label
           }
         ),
-        desc.concept && /* @__PURE__ */ jsx18(
+        desc.concept && /* @__PURE__ */ jsx19(
           "span",
           {
             style: {
@@ -1641,7 +1734,7 @@ import React10 from "react";
 import { Panel } from "@xyflow/react";
 
 // src/graph/react/viewer/ValidationPanel.tsx
-import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 function validationLabel(state, issueCount) {
   const issues = issueCount === 1 ? "1 issue" : `${issueCount} issues`;
   switch (state) {
@@ -1708,7 +1801,7 @@ function ValidationPanel({
   placement,
   id
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       id,
@@ -1716,18 +1809,18 @@ function ValidationPanel({
       role: "region",
       "aria-label": "Validation issues",
       children: [
-        /* @__PURE__ */ jsx19("div", { className: "graph-validation-panel-header", children: validationLabel(state, issues.length) }),
-        issues.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "graph-validation-empty", children: validationEmptyText(state) }) : /* @__PURE__ */ jsx19("ul", { className: "graph-validation-issues", role: "list", children: issues.map((issue, index) => {
+        /* @__PURE__ */ jsx20("div", { className: "graph-validation-panel-header", children: validationLabel(state, issues.length) }),
+        issues.length === 0 ? /* @__PURE__ */ jsx20("div", { className: "graph-validation-empty", children: validationEmptyText(state) }) : /* @__PURE__ */ jsx20("ul", { className: "graph-validation-issues", role: "list", children: issues.map((issue, index) => {
           const clickable = onIssueClick !== void 0;
-          const meta = (issue.context || issue.file) && /* @__PURE__ */ jsxs19("div", { className: "graph-validation-issue-meta", children: [
-            issue.context && /* @__PURE__ */ jsx19("span", { className: "graph-validation-issue-context", children: issue.context }),
-            issue.file && /* @__PURE__ */ jsx19("span", { className: "graph-validation-issue-file", children: issue.file })
+          const meta = (issue.context || issue.file) && /* @__PURE__ */ jsxs20("div", { className: "graph-validation-issue-meta", children: [
+            issue.context && /* @__PURE__ */ jsx20("span", { className: "graph-validation-issue-context", children: issue.context }),
+            issue.file && /* @__PURE__ */ jsx20("span", { className: "graph-validation-issue-file", children: issue.file })
           ] });
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx20(
             "li",
             {
               className: `graph-validation-issue graph-validation-issue--${issue.severity}` + (clickable ? " graph-validation-issue--clickable" : ""),
-              children: /* @__PURE__ */ jsxs19(
+              children: /* @__PURE__ */ jsxs20(
                 "div",
                 {
                   className: "graph-validation-issue-body",
@@ -1742,8 +1835,8 @@ function ValidationPanel({
                   } : void 0,
                   children: [
                     meta,
-                    /* @__PURE__ */ jsx19("div", { className: "graph-validation-issue-message", children: issue.message }),
-                    issue.suggestedFix && /* @__PURE__ */ jsx19("div", { className: "graph-validation-issue-fix", children: issue.suggestedFix })
+                    /* @__PURE__ */ jsx20("div", { className: "graph-validation-issue-message", children: issue.message }),
+                    issue.suggestedFix && /* @__PURE__ */ jsx20("div", { className: "graph-validation-issue-fix", children: issue.suggestedFix })
                   ]
                 }
               )
@@ -1785,7 +1878,7 @@ function usePopoverDismiss(open, wrapperRef, onDismiss) {
 }
 
 // src/graph/react/viewer/StyleMenu.tsx
-import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 var ICON_PROPS = {
   viewBox: "0 0 24 24",
   width: 14,
@@ -1798,22 +1891,22 @@ var ICON_PROPS = {
 };
 var STYLE_ICONS = {
   // Cards with their rows: every pipe with its slots.
-  [GRAPH_STYLE.DETAILED]: /* @__PURE__ */ jsxs20("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: [
-    /* @__PURE__ */ jsx20("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx20("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx20("line", { x1: "14", y1: "4", x2: "21", y2: "4" }),
-    /* @__PURE__ */ jsx20("line", { x1: "14", y1: "9", x2: "21", y2: "9" }),
-    /* @__PURE__ */ jsx20("line", { x1: "14", y1: "15", x2: "21", y2: "15" }),
-    /* @__PURE__ */ jsx20("line", { x1: "14", y1: "20", x2: "21", y2: "20" })
+  [GRAPH_STYLE.DETAILED]: /* @__PURE__ */ jsxs21("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: [
+    /* @__PURE__ */ jsx21("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx21("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx21("line", { x1: "14", y1: "4", x2: "21", y2: "4" }),
+    /* @__PURE__ */ jsx21("line", { x1: "14", y1: "9", x2: "21", y2: "9" }),
+    /* @__PURE__ */ jsx21("line", { x1: "14", y1: "15", x2: "21", y2: "15" }),
+    /* @__PURE__ */ jsx21("line", { x1: "14", y1: "20", x2: "21", y2: "20" })
   ] })),
   // Two steps and the arrow between them: a flowchart.
-  [GRAPH_STYLE.SIMPLE]: /* @__PURE__ */ jsxs20("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: [
-    /* @__PURE__ */ jsx20("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2" }),
-    /* @__PURE__ */ jsx20("path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }),
-    /* @__PURE__ */ jsx20("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2" })
+  [GRAPH_STYLE.SIMPLE]: /* @__PURE__ */ jsxs21("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: [
+    /* @__PURE__ */ jsx21("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2" }),
+    /* @__PURE__ */ jsx21("path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx21("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2" })
   ] }))
 };
-var CHECK_ICON2 = /* @__PURE__ */ jsx20("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: /* @__PURE__ */ jsx20("polyline", { points: "20 6 9 17 4 12" }) }));
+var CHECK_ICON2 = /* @__PURE__ */ jsx21("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: /* @__PURE__ */ jsx21("polyline", { points: "20 6 9 17 4 12" }) }));
 function graphStyleIcon(style) {
   return STYLE_ICONS[style];
 }
@@ -1878,8 +1971,8 @@ function StyleMenu({ value, options, onChange, placement }) {
     if (style !== value) onChange(style);
   };
   const label = styleMenuLabel(value);
-  return /* @__PURE__ */ jsxs20("div", { className: "graph-toolbar-style", ref: wrapperRef, children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs21("div", { className: "graph-toolbar-style", ref: wrapperRef, children: [
+    /* @__PURE__ */ jsx21(
       "button",
       {
         ref: buttonRef,
@@ -1900,7 +1993,7 @@ function StyleMenu({ value, options, onChange, placement }) {
         children: graphStyleIcon(value)
       }
     ),
-    open && /* @__PURE__ */ jsx20(
+    open && /* @__PURE__ */ jsx21(
       "div",
       {
         id: menuId,
@@ -1911,7 +2004,7 @@ function StyleMenu({ value, options, onChange, placement }) {
         children: options.map((style, index) => {
           const descriptor = GRAPH_STYLES[style];
           const checked = style === value;
-          return /* @__PURE__ */ jsxs20(
+          return /* @__PURE__ */ jsxs21(
             "button",
             {
               ref: (el) => {
@@ -1924,12 +2017,12 @@ function StyleMenu({ value, options, onChange, placement }) {
               className: `graph-style-menu-item${checked ? " graph-style-menu-item--checked" : ""}`,
               onClick: () => choose(style),
               children: [
-                /* @__PURE__ */ jsx20("span", { className: "graph-style-menu-icon", "aria-hidden": "true", children: graphStyleIcon(style) }),
-                /* @__PURE__ */ jsxs20("span", { className: "graph-style-menu-text", children: [
-                  /* @__PURE__ */ jsx20("span", { className: "graph-style-menu-name", children: descriptor.name }),
-                  /* @__PURE__ */ jsx20("span", { className: "graph-style-menu-description", children: descriptor.description })
+                /* @__PURE__ */ jsx21("span", { className: "graph-style-menu-icon", "aria-hidden": "true", children: graphStyleIcon(style) }),
+                /* @__PURE__ */ jsxs21("span", { className: "graph-style-menu-text", children: [
+                  /* @__PURE__ */ jsx21("span", { className: "graph-style-menu-name", children: descriptor.name }),
+                  /* @__PURE__ */ jsx21("span", { className: "graph-style-menu-description", children: descriptor.description })
                 ] }),
-                /* @__PURE__ */ jsx20("span", { className: "graph-style-menu-check", "aria-hidden": "true", children: checked ? CHECK_ICON2 : null })
+                /* @__PURE__ */ jsx21("span", { className: "graph-style-menu-check", "aria-hidden": "true", children: checked ? CHECK_ICON2 : null })
               ]
             },
             style
@@ -1941,9 +2034,9 @@ function StyleMenu({ value, options, onChange, placement }) {
 }
 
 // src/graph/react/viewer/GraphToolbar.tsx
-import { Fragment as Fragment12, jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
 var REACTFLOW_PANEL_MARGIN = 15;
-var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs21(
+var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1955,12 +2048,12 @@ var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "12 5 19 12 12 19" })
+      /* @__PURE__ */ jsx22("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "12 5 19 12 12 19" })
     ]
   }
 );
-var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs21(
+var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1972,12 +2065,12 @@ var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "19 12 12 19 5 12" })
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "19 12 12 19 5 12" })
     ]
   }
 );
-var MINUS_ICON = /* @__PURE__ */ jsx21(
+var MINUS_ICON = /* @__PURE__ */ jsx22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1988,10 +2081,10 @@ var MINUS_ICON = /* @__PURE__ */ jsx21(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx21("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    children: /* @__PURE__ */ jsx22("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   }
 );
-var PLUS_ICON = /* @__PURE__ */ jsxs21(
+var PLUS_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2003,12 +2096,12 @@ var PLUS_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx21("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx22("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
     ]
   }
 );
-var FIT_VIEW_ICON = /* @__PURE__ */ jsxs21(
+var FIT_VIEW_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2020,14 +2113,14 @@ var FIT_VIEW_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("polyline", { points: "15 3 21 3 21 9" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "9 21 3 21 3 15" }),
-      /* @__PURE__ */ jsx21("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-      /* @__PURE__ */ jsx21("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      /* @__PURE__ */ jsx22("polyline", { points: "15 3 21 3 21 9" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "9 21 3 21 3 15" }),
+      /* @__PURE__ */ jsx22("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+      /* @__PURE__ */ jsx22("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
     ]
   }
 );
-var BOXES_ICON = /* @__PURE__ */ jsxs21(
+var BOXES_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2039,22 +2132,22 @@ var BOXES_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
-      /* @__PURE__ */ jsx21("path", { d: "m7 16.5-4.74-2.85" }),
-      /* @__PURE__ */ jsx21("path", { d: "m7 16.5 5-3" }),
-      /* @__PURE__ */ jsx21("path", { d: "M7 16.5v5.17" }),
-      /* @__PURE__ */ jsx21("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
-      /* @__PURE__ */ jsx21("path", { d: "m17 16.5-5-3" }),
-      /* @__PURE__ */ jsx21("path", { d: "m17 16.5 4.74-2.85" }),
-      /* @__PURE__ */ jsx21("path", { d: "M17 16.5v5.17" }),
-      /* @__PURE__ */ jsx21("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
-      /* @__PURE__ */ jsx21("path", { d: "M12 8 7.26 5.15" }),
-      /* @__PURE__ */ jsx21("path", { d: "m12 8 4.74-2.85" }),
-      /* @__PURE__ */ jsx21("path", { d: "M12 13.5V8" })
+      /* @__PURE__ */ jsx22("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
+      /* @__PURE__ */ jsx22("path", { d: "m7 16.5-4.74-2.85" }),
+      /* @__PURE__ */ jsx22("path", { d: "m7 16.5 5-3" }),
+      /* @__PURE__ */ jsx22("path", { d: "M7 16.5v5.17" }),
+      /* @__PURE__ */ jsx22("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
+      /* @__PURE__ */ jsx22("path", { d: "m17 16.5-5-3" }),
+      /* @__PURE__ */ jsx22("path", { d: "m17 16.5 4.74-2.85" }),
+      /* @__PURE__ */ jsx22("path", { d: "M17 16.5v5.17" }),
+      /* @__PURE__ */ jsx22("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
+      /* @__PURE__ */ jsx22("path", { d: "M12 8 7.26 5.15" }),
+      /* @__PURE__ */ jsx22("path", { d: "m12 8 4.74-2.85" }),
+      /* @__PURE__ */ jsx22("path", { d: "M12 13.5V8" })
     ]
   }
 );
-var FOLD_ALL_ICON = /* @__PURE__ */ jsxs21(
+var FOLD_ALL_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2066,15 +2159,15 @@ var FOLD_ALL_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "2 2 6 6 2 6" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "22 2 18 6 22 6" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "2 22 6 18 2 18" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "22 22 18 18 22 18" })
+      /* @__PURE__ */ jsx22("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "2 2 6 6 2 6" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "22 2 18 6 22 6" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "2 22 6 18 2 18" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "22 22 18 18 22 18" })
     ]
   }
 );
-var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs21(
+var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2086,15 +2179,15 @@ var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "3 3 7 7 3 7" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "21 3 17 7 21 7" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "3 21 7 17 3 17" }),
-      /* @__PURE__ */ jsx21("polyline", { points: "21 21 17 17 21 17" })
+      /* @__PURE__ */ jsx22("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "3 3 7 7 3 7" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "21 3 17 7 21 7" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "3 21 7 17 3 17" }),
+      /* @__PURE__ */ jsx22("polyline", { points: "21 21 17 17 21 17" })
     ]
   }
 );
-var SUN_ICON = /* @__PURE__ */ jsxs21(
+var SUN_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2106,19 +2199,19 @@ var SUN_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("circle", { cx: "12", cy: "12", r: "4" }),
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
-      /* @__PURE__ */ jsx21("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
-      /* @__PURE__ */ jsx21("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
-      /* @__PURE__ */ jsx21("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
-      /* @__PURE__ */ jsx21("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
-      /* @__PURE__ */ jsx21("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
-      /* @__PURE__ */ jsx21("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
+      /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
+      /* @__PURE__ */ jsx22("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
+      /* @__PURE__ */ jsx22("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
+      /* @__PURE__ */ jsx22("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
+      /* @__PURE__ */ jsx22("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx22("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
+      /* @__PURE__ */ jsx22("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
     ]
   }
 );
-var MOON_ICON = /* @__PURE__ */ jsx21(
+var MOON_ICON = /* @__PURE__ */ jsx22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2129,10 +2222,10 @@ var MOON_ICON = /* @__PURE__ */ jsx21(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx21("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    children: /* @__PURE__ */ jsx22("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
   }
 );
-var MONITOR_ICON = /* @__PURE__ */ jsxs21(
+var MONITOR_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2144,13 +2237,13 @@ var MONITOR_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
-      /* @__PURE__ */ jsx21("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+      /* @__PURE__ */ jsx22("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx22("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
     ]
   }
 );
-var SPINNER_ICON = /* @__PURE__ */ jsx21(
+var SPINNER_ICON = /* @__PURE__ */ jsx22(
   "svg",
   {
     className: "graph-toolbar-validation-spin",
@@ -2162,10 +2255,10 @@ var SPINNER_ICON = /* @__PURE__ */ jsx21(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx21("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    children: /* @__PURE__ */ jsx22("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
   }
 );
-var CHECK_ICON3 = /* @__PURE__ */ jsx21(
+var CHECK_ICON3 = /* @__PURE__ */ jsx22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2176,10 +2269,10 @@ var CHECK_ICON3 = /* @__PURE__ */ jsx21(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx21("polyline", { points: "20 6 9 17 4 12" })
+    children: /* @__PURE__ */ jsx22("polyline", { points: "20 6 9 17 4 12" })
   }
 );
-var X_CIRCLE_ICON = /* @__PURE__ */ jsxs21(
+var X_CIRCLE_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2191,13 +2284,13 @@ var X_CIRCLE_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx21("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
-      /* @__PURE__ */ jsx21("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+      /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx22("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+      /* @__PURE__ */ jsx22("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
     ]
   }
 );
-var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs21(
+var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2209,13 +2302,13 @@ var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      /* @__PURE__ */ jsx22("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
 );
-var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs21(
+var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2227,9 +2320,9 @@ var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx21("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+      /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx22("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
     ]
   }
 );
@@ -2320,10 +2413,10 @@ function GraphToolbar({
   const foldAllSection = onFoldAll || onExpandAll;
   const foldAllTitle = foldAllDisabled ? "Fold all controllers (nothing to fold)" : "Fold all controllers";
   const expandAllTitle = expandAllDisabled ? "Expand all controllers (nothing to expand)" : "Expand all controllers";
-  return /* @__PURE__ */ jsx21(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs21("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
-    validationState !== void 0 && /* @__PURE__ */ jsxs21(Fragment12, { children: [
-      /* @__PURE__ */ jsxs21("div", { className: "graph-toolbar-validation", ref: validationRef, children: [
-        /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsx22(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs22("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
+    validationState !== void 0 && /* @__PURE__ */ jsxs22(Fragment13, { children: [
+      /* @__PURE__ */ jsxs22("div", { className: "graph-toolbar-validation", ref: validationRef, children: [
+        /* @__PURE__ */ jsxs22(
           "button",
           {
             type: "button",
@@ -2336,11 +2429,11 @@ function GraphToolbar({
             "aria-controls": validationPanelId,
             children: [
               validationIcon(validationState),
-              validationIssues.length > 0 && /* @__PURE__ */ jsx21("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
+              validationIssues.length > 0 && /* @__PURE__ */ jsx22("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
             ]
           }
         ),
-        validationOpen && /* @__PURE__ */ jsx21(
+        validationOpen && /* @__PURE__ */ jsx22(
           ValidationPanel,
           {
             id: validationPanelId,
@@ -2351,10 +2444,10 @@ function GraphToolbar({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" })
+      /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" })
     ] }),
-    styleMenuEnabled && /* @__PURE__ */ jsxs21(Fragment12, { children: [
-      /* @__PURE__ */ jsx21(
+    styleMenuEnabled && /* @__PURE__ */ jsxs22(Fragment13, { children: [
+      /* @__PURE__ */ jsx22(
         StyleMenu,
         {
           value: graphStyle,
@@ -2363,9 +2456,9 @@ function GraphToolbar({
           placement: validationPanelPlacement(position)
         }
       ),
-      /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" })
+      /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" })
     ] }),
-    onFoldAll && /* @__PURE__ */ jsx21(
+    onFoldAll && /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -2377,7 +2470,7 @@ function GraphToolbar({
         children: FOLD_ALL_ICON
       }
     ),
-    onExpandAll && /* @__PURE__ */ jsx21(
+    onExpandAll && /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -2389,8 +2482,8 @@ function GraphToolbar({
         children: EXPAND_ALL_ICON
       }
     ),
-    foldAllSection && /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" }),
-    onShowControllersChange && /* @__PURE__ */ jsx21(
+    foldAllSection && /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
+    onShowControllersChange && /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -2401,7 +2494,7 @@ function GraphToolbar({
         children: BOXES_ICON
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -2412,8 +2505,8 @@ function GraphToolbar({
         children: isVertical ? ARROW_RIGHT_ICON : ARROW_DOWN_ICON
       }
     ),
-    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" }),
-    onZoomOut && /* @__PURE__ */ jsx21(
+    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
+    onZoomOut && /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -2424,7 +2517,7 @@ function GraphToolbar({
         children: MINUS_ICON
       }
     ),
-    onZoomIn && /* @__PURE__ */ jsx21(
+    onZoomIn && /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -2435,7 +2528,7 @@ function GraphToolbar({
         children: PLUS_ICON
       }
     ),
-    onFitView && /* @__PURE__ */ jsx21(
+    onFitView && /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -2446,9 +2539,9 @@ function GraphToolbar({
         children: FIT_VIEW_ICON
       }
     ),
-    themeToggleEnabled && /* @__PURE__ */ jsxs21(Fragment12, { children: [
-      /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" }),
-      /* @__PURE__ */ jsx21(
+    themeToggleEnabled && /* @__PURE__ */ jsxs22(Fragment13, { children: [
+      /* @__PURE__ */ jsx22("div", { className: "graph-toolbar-separator" }),
+      /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
@@ -2463,8 +2556,73 @@ function GraphToolbar({
   ] }) });
 }
 
+// src/graph/react/viewer/StillFit.tsx
+import React11 from "react";
+import { useEdges, useNodes, useNodesInitialized, useReactFlow, useStore } from "@xyflow/react";
+
+// src/graph/react/viewer/stillViewport.ts
+var STILL_PADDING_PX = 16;
+var STILL_PLACEHOLDER_HEIGHT_PX = 120;
+function stillContentBounds(nodeBounds, routes) {
+  let minX = nodeBounds.x;
+  let minY = nodeBounds.y;
+  let maxX = nodeBounds.x + nodeBounds.width;
+  let maxY = nodeBounds.y + nodeBounds.height;
+  const take = (x, y) => {
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  };
+  for (const route of routes) {
+    if (!route) continue;
+    for (const point of route.points) take(point.x, point.y);
+    if (route.label) {
+      take(route.label.x, route.label.y);
+      take(route.label.x + route.label.width, route.label.y + route.label.height);
+    }
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function stillViewport(bounds, containerWidth, padding = STILL_PADDING_PX) {
+  if (!(containerWidth > 0) || !(bounds.width > 0) || !(bounds.height > 0)) return null;
+  const room = Math.max(containerWidth - 2 * padding, 1);
+  const zoom = Math.min(1, room / bounds.width);
+  return {
+    x: (containerWidth - bounds.width * zoom) / 2 - bounds.x * zoom,
+    y: padding - bounds.y * zoom,
+    zoom,
+    height: Math.ceil(bounds.height * zoom + 2 * padding)
+  };
+}
+
+// src/graph/react/viewer/StillFit.tsx
+function StillFit({ onHeight }) {
+  const width = useStore((s) => s.width);
+  const nodesInitialized = useNodesInitialized();
+  const nodes = useNodes();
+  const edges = useEdges();
+  const { getNodesBounds, setViewport } = useReactFlow();
+  React11.useLayoutEffect(() => {
+    if (!nodesInitialized || nodes.length === 0) return;
+    const bounds = stillContentBounds(
+      getNodesBounds(nodes),
+      edges.map((e) => {
+        var _a;
+        return (_a = e.data) == null ? void 0 : _a.route;
+      })
+    );
+    const view = stillViewport(bounds, width);
+    if (!view) return;
+    void setViewport({ x: view.x, y: view.y, zoom: view.zoom });
+    onHeight(view.height);
+  }, [nodesInitialized, nodes, edges, width, getNodesBounds, setViewport, onHeight]);
+  return null;
+}
+
 // src/graph/react/nodes/NodeValidationBadge.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function NodeValidationBadge({
   validation,
   onClick
@@ -2474,9 +2632,9 @@ function NodeValidationBadge({
   const className = `node-validation-badge node-validation-badge--${validation.severity}`;
   const text = validation.count > 99 ? "99+" : String(validation.count);
   if (!onClick) {
-    return /* @__PURE__ */ jsx22("span", { className, title: tooltip, "aria-label": label, children: text });
+    return /* @__PURE__ */ jsx23("span", { className, title: tooltip, "aria-label": label, children: text });
   }
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "button",
     {
       type: "button",
@@ -2496,7 +2654,7 @@ function validationRingClass(validation) {
 }
 
 // src/graph/react/nodes/controller/ControllerGroupNode.tsx
-import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var CONTROLLER_CONFIG = {
   PipeSequence: { badge: "Sequence", icon: "\u2192" },
   PipeParallel: { badge: "Parallel", icon: "//" },
@@ -2518,12 +2676,12 @@ function ControllerGroupNode({ data }) {
   const modifier = getControllerModifier(data.pipeType);
   const isCollapsible = (data.pipeType === "PipeParallel" || data.pipeType === "PipeBatch") && ((_a = data.childCount) != null ? _a : 0) > MAX_VISIBLE_CONTROLLER_CHILDREN;
   const hiddenCount = isCollapsible ? ((_b = data.childCount) != null ? _b : 0) - MAX_VISIBLE_CONTROLLER_CHILDREN : 0;
-  return /* @__PURE__ */ jsxs22("div", { className: `controller-group-node ${modifier}${validationRingClass(data.validation)}`, children: [
-    /* @__PURE__ */ jsxs22("div", { className: "controller-group-header", children: [
-      /* @__PURE__ */ jsx23("span", { className: "controller-group-icon", children: config.icon }),
-      /* @__PURE__ */ jsx23("span", { className: "controller-group-badge", children: config.badge }),
-      data.label && /* @__PURE__ */ jsx23("span", { className: "controller-group-label", children: data.label }),
-      data.onToggleFold && /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs23("div", { className: `controller-group-node ${modifier}${validationRingClass(data.validation)}`, children: [
+    /* @__PURE__ */ jsxs23("div", { className: "controller-group-header", children: [
+      /* @__PURE__ */ jsx24("span", { className: "controller-group-icon", children: config.icon }),
+      /* @__PURE__ */ jsx24("span", { className: "controller-group-badge", children: config.badge }),
+      data.label && /* @__PURE__ */ jsx24("span", { className: "controller-group-label", children: data.label }),
+      data.onToggleFold && /* @__PURE__ */ jsx24(
         "button",
         {
           type: "button",
@@ -2538,9 +2696,9 @@ function ControllerGroupNode({ data }) {
           children: "\u2921"
         }
       ),
-      data.validation && /* @__PURE__ */ jsx23(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
+      data.validation && /* @__PURE__ */ jsx24(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
     ] }),
-    isCollapsible && /* @__PURE__ */ jsx23(
+    isCollapsible && /* @__PURE__ */ jsx24(
       "button",
       {
         className: "controller-group-collapse",
@@ -2561,7 +2719,7 @@ import { Handle, Position } from "@xyflow/react";
 
 // src/graph/react/nodes/pipe/PipeCardBase.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES2 = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -2622,21 +2780,22 @@ function PipeCardBase({ data, children }) {
   const staticClass = isStatic ? " pipe-card--static" : "";
   const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : isSignature ? "pipe-card-badge pipe-card-badge--signature" : isBinding ? "pipe-card-badge pipe-card-badge--binding" : "pipe-card-badge";
   const ringClass = validationRingClass(data.validation);
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: `pipe-card ${dirClass}${controllerClass}${signatureClass}${bindingClass}${staticClass}${ringClass}`,
       children: [
-        /* @__PURE__ */ jsxs23("div", { className: "pipe-card-header", children: [
-          /* @__PURE__ */ jsx24("span", { className: badgeClass, children: badge }),
-          /* @__PURE__ */ jsx24("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
-          !isStatic && /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsxs24("div", { className: "pipe-card-header", children: [
+          /* @__PURE__ */ jsx25("span", { className: badgeClass, children: badge }),
+          data.docGenFormat && /* @__PURE__ */ jsx25("span", { className: "pipe-card-format", title: `Document format: ${data.docGenFormat}`, children: data.docGenFormat.toUpperCase() }),
+          /* @__PURE__ */ jsx25("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
+          !isStatic && /* @__PURE__ */ jsx25(
             "span",
             {
               className: "pipe-card-status",
               style: { color: statusConfig.color },
               title: statusConfig.label,
-              children: /* @__PURE__ */ jsx24(
+              children: /* @__PURE__ */ jsx25(
                 "span",
                 {
                   className: `pipe-card-status-dot ${isRunning ? "pipe-card-status-dot--pulse" : ""}`,
@@ -2645,7 +2804,7 @@ function PipeCardBase({ data, children }) {
               )
             }
           ),
-          data.onExpand && /* @__PURE__ */ jsx24(
+          data.onExpand && /* @__PURE__ */ jsx25(
             "button",
             {
               type: "button",
@@ -2660,32 +2819,32 @@ function PipeCardBase({ data, children }) {
               children: "\u2922"
             }
           ),
-          data.validation && /* @__PURE__ */ jsx24(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
+          data.validation && /* @__PURE__ */ jsx25(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
         ] }),
-        (outcome || batchMultiplicity) && /* @__PURE__ */ jsxs23("div", { className: "pipe-card-annotations", children: [
-          outcome && /* @__PURE__ */ jsxs23("span", { className: "pipe-card-annotation pipe-card-annotation--outcome", children: [
+        (outcome || batchMultiplicity) && /* @__PURE__ */ jsxs24("div", { className: "pipe-card-annotations", children: [
+          outcome && /* @__PURE__ */ jsxs24("span", { className: "pipe-card-annotation pipe-card-annotation--outcome", children: [
             "outcome: ",
             outcome
           ] }),
-          batchMultiplicity && /* @__PURE__ */ jsx24("span", { className: "pipe-card-annotation pipe-card-annotation--batch", children: batchMultiplicity })
+          batchMultiplicity && /* @__PURE__ */ jsx25("span", { className: "pipe-card-annotation pipe-card-annotation--batch", children: batchMultiplicity })
         ] }),
-        data.description && /* @__PURE__ */ jsx24("span", { className: "pipe-card-description", title: data.description, children: data.description }),
-        data.inputs.length > 0 && /* @__PURE__ */ jsxs23("div", { className: "pipe-card-io", children: [
-          /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-label", children: "INPUTS" }),
-          /* @__PURE__ */ jsxs23("div", { className: "pipe-card-io-pills", children: [
-            visibleInputs.map((input) => /* @__PURE__ */ jsxs23(
+        data.description && /* @__PURE__ */ jsx25("span", { className: "pipe-card-description", title: data.description, children: data.description }),
+        data.inputs.length > 0 && /* @__PURE__ */ jsxs24("div", { className: "pipe-card-io", children: [
+          /* @__PURE__ */ jsx25("span", { className: "pipe-card-io-label", children: "INPUTS" }),
+          /* @__PURE__ */ jsxs24("div", { className: "pipe-card-io-pills", children: [
+            visibleInputs.map((input) => /* @__PURE__ */ jsxs24(
               "span",
               {
                 className: "pipe-card-io-pill",
                 title: `${input.name}: ${input.concept}`,
                 children: [
-                  /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-pill-name", children: input.name }),
-                  /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-pill-concept", children: input.concept })
+                  /* @__PURE__ */ jsx25("span", { className: "pipe-card-io-pill-name", children: input.name }),
+                  /* @__PURE__ */ jsx25("span", { className: "pipe-card-io-pill-concept", children: input.concept })
                 ]
               },
               input.name
             )),
-            hasMany && /* @__PURE__ */ jsx24(
+            hasMany && /* @__PURE__ */ jsx25(
               "button",
               {
                 className: "pipe-card-io-more",
@@ -2698,16 +2857,16 @@ function PipeCardBase({ data, children }) {
             )
           ] })
         ] }),
-        data.outputs.length > 0 && /* @__PURE__ */ jsxs23("div", { className: "pipe-card-io", children: [
-          /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
-          /* @__PURE__ */ jsx24("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs23(
+        data.outputs.length > 0 && /* @__PURE__ */ jsxs24("div", { className: "pipe-card-io", children: [
+          /* @__PURE__ */ jsx25("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
+          /* @__PURE__ */ jsx25("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs24(
             "span",
             {
               className: "pipe-card-io-pill",
               title: `${output.name}: ${output.concept}`,
               children: [
-                /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-pill-name", children: output.name }),
-                /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-pill-concept", children: output.concept })
+                /* @__PURE__ */ jsx25("span", { className: "pipe-card-io-pill-name", children: output.name }),
+                /* @__PURE__ */ jsx25("span", { className: "pipe-card-io-pill-concept", children: output.concept })
               ]
             },
             output.name
@@ -2742,11 +2901,11 @@ function getPipeCardComponent(pipeType) {
 }
 
 // src/graph/react/nodes/pipe/PipeCardNode.tsx
-import { Fragment as Fragment13, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function PipeCardNode({ data }) {
   var _a;
   const Card = (_a = getPipeCardComponent(data.pipeType)) != null ? _a : PipeCardBase;
-  return /* @__PURE__ */ jsx25(Card, { data });
+  return /* @__PURE__ */ jsx26(Card, { data });
 }
 function PipeCardRFNode({
   data,
@@ -2755,16 +2914,16 @@ function PipeCardRFNode({
 }) {
   const payload = data.pipeCardData;
   if (!payload) return null;
-  return /* @__PURE__ */ jsxs24(Fragment13, { children: [
-    /* @__PURE__ */ jsx25(Handle, { type: "target", position: targetPosition }),
-    /* @__PURE__ */ jsx25(PipeCardNode, { data: payload }),
-    /* @__PURE__ */ jsx25(Handle, { type: "source", position: sourcePosition })
+  return /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26(Handle, { type: "target", position: targetPosition }),
+    /* @__PURE__ */ jsx26(PipeCardNode, { data: payload }),
+    /* @__PURE__ */ jsx26(Handle, { type: "source", position: sourcePosition })
   ] });
 }
 
 // src/graph/react/styles/simple/SimpleNodes.tsx
 import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
-import { Fragment as Fragment14, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
 var ICON_PROPS2 = {
   viewBox: "0 0 24 24",
   fill: "none",
@@ -2775,90 +2934,90 @@ var ICON_PROPS2 = {
   "aria-hidden": true
 };
 function Icon({ size = 13, children }) {
-  return /* @__PURE__ */ jsx26("svg", __spreadProps(__spreadValues({}, ICON_PROPS2), { width: size, height: size, children }));
+  return /* @__PURE__ */ jsx27("svg", __spreadProps(__spreadValues({}, ICON_PROPS2), { width: size, height: size, children }));
 }
 var CATEGORY_ICONS = {
-  ai: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("path", { d: "M9.94 15.5a2 2 0 0 0-1.44-1.44l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0l1.58 6.14a2 2 0 0 0 1.44 1.44l6.14 1.58a.5.5 0 0 1 0 .96l-6.14 1.58a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z" }),
-    /* @__PURE__ */ jsx26("path", { d: "M20 3v4" }),
-    /* @__PURE__ */ jsx26("path", { d: "M22 5h-4" })
+  ai: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("path", { d: "M9.94 15.5a2 2 0 0 0-1.44-1.44l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0l1.58 6.14a2 2 0 0 0 1.44 1.44l6.14 1.58a.5.5 0 0 1 0 .96l-6.14 1.58a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z" }),
+    /* @__PURE__ */ jsx27("path", { d: "M20 3v4" }),
+    /* @__PURE__ */ jsx27("path", { d: "M22 5h-4" })
   ] }),
-  extract: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
-    /* @__PURE__ */ jsx26("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
-    /* @__PURE__ */ jsx26("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
-    /* @__PURE__ */ jsx26("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
-    /* @__PURE__ */ jsx26("path", { d: "M7 8h8" }),
-    /* @__PURE__ */ jsx26("path", { d: "M7 12h10" }),
-    /* @__PURE__ */ jsx26("path", { d: "M7 16h6" })
+  extract: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+    /* @__PURE__ */ jsx27("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+    /* @__PURE__ */ jsx27("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+    /* @__PURE__ */ jsx27("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
+    /* @__PURE__ */ jsx27("path", { d: "M7 8h8" }),
+    /* @__PURE__ */ jsx27("path", { d: "M7 12h10" }),
+    /* @__PURE__ */ jsx27("path", { d: "M7 16h6" })
   ] }),
-  image: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    /* @__PURE__ */ jsx26("circle", { cx: "9", cy: "9", r: "2" }),
-    /* @__PURE__ */ jsx26("path", { d: "m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21" })
+  image: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx27("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx27("path", { d: "m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21" })
   ] }),
-  search: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ jsx26("path", { d: "m21 21-4.3-4.3" })
+  search: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx27("path", { d: "m21 21-4.3-4.3" })
   ] }),
-  code: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("polyline", { points: "16 18 22 12 16 6" }),
-    /* @__PURE__ */ jsx26("polyline", { points: "8 6 2 12 8 18" })
+  code: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("polyline", { points: "16 18 22 12 16 6" }),
+    /* @__PURE__ */ jsx27("polyline", { points: "8 6 2 12 8 18" })
   ] }),
-  template: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-    /* @__PURE__ */ jsx26("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
-    /* @__PURE__ */ jsx26("path", { d: "M16 13H8" }),
-    /* @__PURE__ */ jsx26("path", { d: "M16 17H8" })
+  template: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx27("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx27("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ jsx27("path", { d: "M16 17H8" })
   ] }),
-  document: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-    /* @__PURE__ */ jsx26("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
-    /* @__PURE__ */ jsx26("path", { d: "M12 18v-6" }),
-    /* @__PURE__ */ jsx26("path", { d: "m9 15 3 3 3-3" })
+  document: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx27("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx27("path", { d: "M12 18v-6" }),
+    /* @__PURE__ */ jsx27("path", { d: "m9 15 3 3 3-3" })
   ] }),
-  judge: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
-    /* @__PURE__ */ jsx26("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
-    /* @__PURE__ */ jsx26("path", { d: "M7 21h10" }),
-    /* @__PURE__ */ jsx26("path", { d: "M12 3v18" }),
-    /* @__PURE__ */ jsx26("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
+  judge: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx27("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx27("path", { d: "M7 21h10" }),
+    /* @__PURE__ */ jsx27("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ jsx27("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
   ] }),
-  planned: /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "12", r: "9", strokeDasharray: "3 3" }),
-  steps: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("path", { d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" }),
-    /* @__PURE__ */ jsx26("path", { d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" }),
-    /* @__PURE__ */ jsx26("path", { d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" })
+  planned: /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "12", r: "9", strokeDasharray: "3 3" }),
+  steps: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("path", { d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" }),
+    /* @__PURE__ */ jsx27("path", { d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" }),
+    /* @__PURE__ */ jsx27("path", { d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" })
   ] }),
-  parallel: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("path", { d: "M16 3h5v5" }),
-    /* @__PURE__ */ jsx26("path", { d: "M8 3H3v5" }),
-    /* @__PURE__ */ jsx26("path", { d: "M12 22v-8.3a4 4 0 0 0-1.17-2.87L3 3" }),
-    /* @__PURE__ */ jsx26("path", { d: "m15 9 6-6" })
+  parallel: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("path", { d: "M16 3h5v5" }),
+    /* @__PURE__ */ jsx27("path", { d: "M8 3H3v5" }),
+    /* @__PURE__ */ jsx27("path", { d: "M12 22v-8.3a4 4 0 0 0-1.17-2.87L3 3" }),
+    /* @__PURE__ */ jsx27("path", { d: "m15 9 6-6" })
   ] }),
-  decision: /* @__PURE__ */ jsx26("path", { d: "M12 2 22 12 12 22 2 12Z" }),
-  repeat: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("path", { d: "m17 2 4 4-4 4" }),
-    /* @__PURE__ */ jsx26("path", { d: "M3 11v-1a4 4 0 0 1 4-4h14" }),
-    /* @__PURE__ */ jsx26("path", { d: "m7 22-4-4 4-4" }),
-    /* @__PURE__ */ jsx26("path", { d: "M21 13v1a4 4 0 0 1-4 4H3" })
+  decision: /* @__PURE__ */ jsx27("path", { d: "M12 2 22 12 12 22 2 12Z" }),
+  repeat: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("path", { d: "m17 2 4 4-4 4" }),
+    /* @__PURE__ */ jsx27("path", { d: "M3 11v-1a4 4 0 0 1 4-4h14" }),
+    /* @__PURE__ */ jsx27("path", { d: "m7 22-4-4 4-4" }),
+    /* @__PURE__ */ jsx27("path", { d: "M21 13v1a4 4 0 0 1-4 4H3" })
   ] }),
-  pick: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("polyline", { points: "15 10 20 15 15 20" }),
-    /* @__PURE__ */ jsx26("path", { d: "M4 4v7a4 4 0 0 0 4 4h12" })
+  pick: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("polyline", { points: "15 10 20 15 15 20" }),
+    /* @__PURE__ */ jsx27("path", { d: "M4 4v7a4 4 0 0 0 4 4h12" })
   ] })
 };
-var EXPAND_ICON2 = /* @__PURE__ */ jsxs25(Icon, { size: 12, children: [
-  /* @__PURE__ */ jsx26("polyline", { points: "15 3 21 3 21 9" }),
-  /* @__PURE__ */ jsx26("polyline", { points: "9 21 3 21 3 15" }),
-  /* @__PURE__ */ jsx26("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-  /* @__PURE__ */ jsx26("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+var EXPAND_ICON2 = /* @__PURE__ */ jsxs26(Icon, { size: 12, children: [
+  /* @__PURE__ */ jsx27("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx27("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ jsx27("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  /* @__PURE__ */ jsx27("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
-var COLLAPSE_ICON2 = /* @__PURE__ */ jsxs25(Icon, { size: 12, children: [
-  /* @__PURE__ */ jsx26("polyline", { points: "4 14 10 14 10 20" }),
-  /* @__PURE__ */ jsx26("polyline", { points: "20 10 14 10 14 4" }),
-  /* @__PURE__ */ jsx26("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
-  /* @__PURE__ */ jsx26("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+var COLLAPSE_ICON2 = /* @__PURE__ */ jsxs26(Icon, { size: 12, children: [
+  /* @__PURE__ */ jsx27("polyline", { points: "4 14 10 14 10 20" }),
+  /* @__PURE__ */ jsx27("polyline", { points: "20 10 14 10 14 4" }),
+  /* @__PURE__ */ jsx27("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+  /* @__PURE__ */ jsx27("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
 var STATUS_LABELS = {
   succeeded: "Done",
@@ -2869,25 +3028,25 @@ var STATUS_LABELS = {
   canceled: "Canceled"
 };
 var STATUS_ICONS = {
-  succeeded: /* @__PURE__ */ jsx26("polyline", { points: "20 6 9 17 4 12" }),
-  failed: /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ jsx26("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  succeeded: /* @__PURE__ */ jsx27("polyline", { points: "20 6 9 17 4 12" }),
+  failed: /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx27("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] }),
-  running: /* @__PURE__ */ jsx26("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }),
-  scheduled: /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "12", r: "8" }),
-  skipped: /* @__PURE__ */ jsx26("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-  canceled: /* @__PURE__ */ jsx26("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  running: /* @__PURE__ */ jsx27("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }),
+  scheduled: /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "12", r: "8" }),
+  skipped: /* @__PURE__ */ jsx27("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+  canceled: /* @__PURE__ */ jsx27("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
 };
 function StatusMark({ status, graphMode }) {
   if (graphMode === "static") return null;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "span",
     {
       className: `simple-status simple-status--${status}`,
       title: STATUS_LABELS[status],
       "aria-label": STATUS_LABELS[status],
-      children: /* @__PURE__ */ jsx26(Icon, { size: 11, children: STATUS_ICONS[status] })
+      children: /* @__PURE__ */ jsx27(Icon, { size: 11, children: STATUS_ICONS[status] })
     }
   );
 }
@@ -2896,17 +3055,17 @@ function Handles({
   targetPosition = Position2.Left,
   children
 }) {
-  return /* @__PURE__ */ jsxs25(Fragment14, { children: [
-    /* @__PURE__ */ jsx26(Handle2, { type: "target", position: targetPosition, className: "simple-handle" }),
+  return /* @__PURE__ */ jsxs26(Fragment15, { children: [
+    /* @__PURE__ */ jsx27(Handle2, { type: "target", position: targetPosition, className: "simple-handle" }),
     children,
-    /* @__PURE__ */ jsx26(Handle2, { type: "source", position: sourcePosition, className: "simple-handle" })
+    /* @__PURE__ */ jsx27(Handle2, { type: "source", position: sourcePosition, className: "simple-handle" })
   ] });
 }
 function ValidationMark({
   validation,
   onClick
 }) {
-  return validation ? /* @__PURE__ */ jsx26(NodeValidationBadge, { validation, onClick }) : null;
+  return validation ? /* @__PURE__ */ jsx27(NodeValidationBadge, { validation, onClick }) : null;
 }
 function payloadOf(data, kinds) {
   const simple = data.simple;
@@ -2917,20 +3076,20 @@ function SimpleStepNode({ data, sourcePosition, targetPosition }) {
   const step = payloadOf(data, ["step"]);
   if (!step) return null;
   const statusClass = step.graphMode !== "static" ? ` simple-step--${step.status}` : "";
-  return /* @__PURE__ */ jsx26(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx27(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs26(
     "div",
     {
       className: `simple-step simple-step--${step.category}${statusClass}${validationRingClass(data.validation)}`,
       children: [
-        /* @__PURE__ */ jsxs25("div", { className: "simple-step-header", children: [
-          /* @__PURE__ */ jsxs25("span", { className: "simple-step-category", children: [
-            /* @__PURE__ */ jsx26(Icon, { children: CATEGORY_ICONS[step.category] }),
+        /* @__PURE__ */ jsxs26("div", { className: "simple-step-header", children: [
+          /* @__PURE__ */ jsxs26("span", { className: "simple-step-category", children: [
+            /* @__PURE__ */ jsx27(Icon, { children: CATEGORY_ICONS[step.category] }),
             STEP_CATEGORY_WORDS[step.category]
           ] }),
-          /* @__PURE__ */ jsx26(StatusMark, { status: step.status, graphMode: step.graphMode }),
-          /* @__PURE__ */ jsx26(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick })
+          /* @__PURE__ */ jsx27(StatusMark, { status: step.status, graphMode: step.graphMode }),
+          /* @__PURE__ */ jsx27(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick })
         ] }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           "div",
           {
             className: "simple-step-title",
@@ -2943,11 +3102,11 @@ function SimpleStepNode({ data, sourcePosition, targetPosition }) {
             children: step.title
           }
         ),
-        step.forEach && /* @__PURE__ */ jsxs25("span", { className: "simple-step-foreach", children: [
-          /* @__PURE__ */ jsx26(Icon, { size: 11, children: CATEGORY_ICONS.repeat }),
+        step.forEach && /* @__PURE__ */ jsxs26("span", { className: "simple-step-foreach", children: [
+          /* @__PURE__ */ jsx27(Icon, { size: 11, children: CATEGORY_ICONS.repeat }),
           step.forEach
         ] }),
-        step.innerStepCount !== void 0 && /* @__PURE__ */ jsxs25(
+        step.innerStepCount !== void 0 && /* @__PURE__ */ jsxs26(
           "button",
           {
             type: "button",
@@ -2971,24 +3130,24 @@ function SimpleStepNode({ data, sourcePosition, targetPosition }) {
 }
 var DOCUMENT_PATH = "M1 1 H99 V84 C80 98 62 74 44 86 C28 96 14 96 1 88 Z";
 function DocumentShape({ className }) {
-  return /* @__PURE__ */ jsx26("svg", { className, viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx26("path", { d: DOCUMENT_PATH, vectorEffect: "non-scaling-stroke" }) });
+  return /* @__PURE__ */ jsx27("svg", { className, viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx27("path", { d: DOCUMENT_PATH, vectorEffect: "non-scaling-stroke" }) });
 }
 function SimpleTerminalNode({ data, sourcePosition, targetPosition }) {
   const terminal = payloadOf(data, ["input", "output"]);
   if (!terminal) return null;
-  return /* @__PURE__ */ jsx26(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx27(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs26(
     "div",
     {
       className: `simple-terminal simple-terminal--${terminal.kind}${terminal.isList ? " simple-terminal--list" : ""}`,
       children: [
-        terminal.isList && /* @__PURE__ */ jsxs25(Fragment14, { children: [
-          /* @__PURE__ */ jsx26(DocumentShape, { className: "simple-terminal-shape simple-terminal-shape--back2" }),
-          /* @__PURE__ */ jsx26(DocumentShape, { className: "simple-terminal-shape simple-terminal-shape--back1" })
+        terminal.isList && /* @__PURE__ */ jsxs26(Fragment15, { children: [
+          /* @__PURE__ */ jsx27(DocumentShape, { className: "simple-terminal-shape simple-terminal-shape--back2" }),
+          /* @__PURE__ */ jsx27(DocumentShape, { className: "simple-terminal-shape simple-terminal-shape--back1" })
         ] }),
-        /* @__PURE__ */ jsx26(DocumentShape, { className: "simple-terminal-shape" }),
-        /* @__PURE__ */ jsxs25("div", { className: "simple-terminal-text", children: [
-          /* @__PURE__ */ jsx26("span", { className: "simple-terminal-title", title: terminal.title, children: terminal.title }),
-          terminal.subtitle && /* @__PURE__ */ jsx26("span", { className: "simple-terminal-subtitle", children: terminal.subtitle })
+        /* @__PURE__ */ jsx27(DocumentShape, { className: "simple-terminal-shape" }),
+        /* @__PURE__ */ jsxs26("div", { className: "simple-terminal-text", children: [
+          /* @__PURE__ */ jsx27("span", { className: "simple-terminal-title", title: terminal.title, children: terminal.title }),
+          terminal.subtitle && /* @__PURE__ */ jsx27("span", { className: "simple-terminal-subtitle", children: terminal.subtitle })
         ] })
       ]
     }
@@ -2998,35 +3157,35 @@ function SimpleDecisionNode({ data, sourcePosition, targetPosition }) {
   const decision = payloadOf(data, ["decision"]);
   if (!decision) return null;
   const statusClass = decision.graphMode !== "static" ? ` simple-decision--${decision.status}` : "";
-  return /* @__PURE__ */ jsx26(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs25("div", { className: `simple-decision${statusClass}${validationRingClass(data.validation)}`, children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs26("div", { className: `simple-decision${statusClass}${validationRingClass(data.validation)}`, children: [
+    /* @__PURE__ */ jsx27(
       "svg",
       {
         className: "simple-decision-shape",
         viewBox: "0 0 100 100",
         preserveAspectRatio: "none",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx26("path", { d: "M50 1 L99 50 L50 99 L1 50 Z", vectorEffect: "non-scaling-stroke" })
+        children: /* @__PURE__ */ jsx27("path", { d: "M50 1 L99 50 L50 99 L1 50 Z", vectorEffect: "non-scaling-stroke" })
       }
     ),
-    /* @__PURE__ */ jsx26("div", { className: "simple-decision-text", title: decision.title, children: decision.title }),
-    /* @__PURE__ */ jsxs25("div", { className: "simple-decision-marks", children: [
-      /* @__PURE__ */ jsx26(StatusMark, { status: decision.status, graphMode: decision.graphMode }),
-      /* @__PURE__ */ jsx26(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick })
+    /* @__PURE__ */ jsx27("div", { className: "simple-decision-text", title: decision.title, children: decision.title }),
+    /* @__PURE__ */ jsxs26("div", { className: "simple-decision-marks", children: [
+      /* @__PURE__ */ jsx27(StatusMark, { status: decision.status, graphMode: decision.graphMode }),
+      /* @__PURE__ */ jsx27(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick })
     ] })
   ] }) });
 }
 function SimpleFrameNode({ data }) {
   const frame = payloadOf(data, ["frame"]);
   if (!frame) return null;
-  return /* @__PURE__ */ jsx26("div", { className: `simple-frame${validationRingClass(data.validation)}`, children: /* @__PURE__ */ jsxs25("div", { className: "simple-frame-header", children: [
-    /* @__PURE__ */ jsxs25("span", { className: "simple-frame-title", children: [
-      /* @__PURE__ */ jsx26(Icon, { size: 12, children: CATEGORY_ICONS.repeat }),
+  return /* @__PURE__ */ jsx27("div", { className: `simple-frame${validationRingClass(data.validation)}`, children: /* @__PURE__ */ jsxs26("div", { className: "simple-frame-header", children: [
+    /* @__PURE__ */ jsxs26("span", { className: "simple-frame-title", children: [
+      /* @__PURE__ */ jsx27(Icon, { size: 12, children: CATEGORY_ICONS.repeat }),
       frame.title
     ] }),
-    /* @__PURE__ */ jsx26(StatusMark, { status: frame.status, graphMode: frame.graphMode }),
-    /* @__PURE__ */ jsx26(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick }),
-    frame.onFold && /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(StatusMark, { status: frame.status, graphMode: frame.graphMode }),
+    /* @__PURE__ */ jsx27(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick }),
+    frame.onFold && /* @__PURE__ */ jsx27(
       "button",
       {
         type: "button",
@@ -3052,7 +3211,7 @@ var simpleNodeTypes = {
 
 // src/graph/react/edges/RoutedEdge.tsx
 import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function RoutedEdge({
   id,
   sourceX,
@@ -3092,7 +3251,7 @@ function RoutedEdge({
       borderRadius: 8
     });
   }
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     BaseEdge,
     {
       id,
@@ -3114,11 +3273,24 @@ function RoutedEdge({
 }
 
 // src/graph/react/viewer/GraphViewer.tsx
-import { Fragment as Fragment15, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
 var nodeTypes = __spreadValues(__spreadProps(__spreadValues({}, controllerNodeTypes), {
   pipeCard: PipeCardRFNode
 }), simpleNodeTypes);
 var edgeTypes = { [EDGE_TYPE_ROUTED]: RoutedEdge };
+var STILL_FLOW_PROPS = {
+  panOnDrag: false,
+  zoomOnScroll: false,
+  zoomOnPinch: false,
+  zoomOnDoubleClick: false,
+  preventScrolling: false,
+  nodesDraggable: false,
+  nodesConnectable: false,
+  nodesFocusable: false,
+  edgesFocusable: false,
+  elementsSelectable: false,
+  disableKeyboardA11y: true
+};
 function StuffNodeDetail({
   nodeId,
   stuffData,
@@ -3136,7 +3308,7 @@ function StuffNodeDetail({
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
   const isDryRun = graphSpecMode(graphspec) === GRAPH_SPEC_MODE.DRY;
   const descriptors = resultDescriptors(artifacts);
-  const renderData = descriptors ? () => /* @__PURE__ */ jsx28(
+  const renderData = descriptors ? () => /* @__PURE__ */ jsx29(
     StuffResultPanel,
     __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, descriptors), {
       stuff: stuffData
@@ -3145,7 +3317,7 @@ function StuffNodeDetail({
     })
   ) : void 0;
   if (conceptInfo) {
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       ConceptDetailPanel,
       {
         concept: conceptInfo,
@@ -3156,8 +3328,8 @@ function StuffNodeDetail({
       }
     );
   }
-  if (isDryRun) return /* @__PURE__ */ jsx28("div", { className: "detail-not-available", children: "Dry run data hidden" });
-  return /* @__PURE__ */ jsx28(Fragment15, { children: (_a = renderData == null ? void 0 : renderData()) != null ? _a : /* @__PURE__ */ jsx28("div", { className: "detail-not-available", children: "No data" }) });
+  if (isDryRun) return /* @__PURE__ */ jsx29("div", { className: "detail-not-available", children: "Dry run data hidden" });
+  return /* @__PURE__ */ jsx29(Fragment16, { children: (_a = renderData == null ? void 0 : renderData()) != null ? _a : /* @__PURE__ */ jsx29("div", { className: "detail-not-available", children: "No data" }) });
 }
 function seedFoldedControllers(mode, controllerIds) {
   if (mode === FOLD_MODE.FOLDED) return new Set(controllerIds);
@@ -3222,6 +3394,7 @@ function GraphViewer(props) {
     initialShowControllers,
     initialFoldMode,
     hideToolbar = false,
+    interactive = true,
     theme: themeProp,
     graphStyle: graphStyleProp,
     onGraphStyleChange,
@@ -3246,20 +3419,20 @@ function GraphViewer(props) {
     onValidationIssueClick
   } = props;
   const graphspecProp = (_a = graph == null ? void 0 : graph.graphSpec) != null ? _a : null;
-  const graphspec = React12.useMemo(
+  const graphspec = React13.useMemo(
     () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
     [graphspecProp]
   );
-  const [direction, setDirection] = React12.useState(
+  const [direction, setDirection] = React13.useState(
     () => {
       var _a2, _b2;
       return (_b2 = (_a2 = initialDirection != null ? initialDirection : config.direction) != null ? _a2 : DEFAULT_GRAPH_CONFIG.direction) != null ? _b2 : GRAPH_DIRECTION.TB;
     }
   );
   const externalMode = resolveExternalThemeMode(themeProp, config.theme);
-  const [mode, setMode] = React12.useState(externalMode);
-  const prevExternalModeRef = React12.useRef(externalMode);
-  React12.useEffect(() => {
+  const [mode, setMode] = React13.useState(externalMode);
+  const prevExternalModeRef = React13.useRef(externalMode);
+  React13.useEffect(() => {
     if (externalMode !== prevExternalModeRef.current) {
       prevExternalModeRef.current = externalMode;
       setMode(externalMode);
@@ -3267,13 +3440,13 @@ function GraphViewer(props) {
   }, [externalMode]);
   const systemTheme = useSystemTheme(systemThemeProp);
   const resolvedTheme = resolveActiveTheme(mode, systemTheme);
-  const onThemeChangeRef = React12.useRef(onThemeChange);
+  const onThemeChangeRef = React13.useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
-  const prevReportedRef = React12.useRef({
+  const prevReportedRef = React13.useRef({
     mode,
     resolvedTheme
   });
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     var _a2;
     const prev = prevReportedRef.current;
     if (prev.mode !== mode || prev.resolvedTheme !== resolvedTheme) {
@@ -3282,48 +3455,48 @@ function GraphViewer(props) {
     }
   }, [mode, resolvedTheme]);
   const externalStyle = resolveGraphStyle(graphStyleProp, config.graphStyle);
-  const [graphStyle, setGraphStyle] = React12.useState(externalStyle);
-  const prevExternalStyleRef = React12.useRef(externalStyle);
-  React12.useEffect(() => {
+  const [graphStyle, setGraphStyle] = React13.useState(externalStyle);
+  const prevExternalStyleRef = React13.useRef(externalStyle);
+  React13.useEffect(() => {
     if (externalStyle !== prevExternalStyleRef.current) {
       prevExternalStyleRef.current = externalStyle;
       setGraphStyle(externalStyle);
     }
   }, [externalStyle]);
-  const onGraphStyleChangeRef = React12.useRef(onGraphStyleChange);
+  const onGraphStyleChangeRef = React13.useRef(onGraphStyleChange);
   onGraphStyleChangeRef.current = onGraphStyleChange;
-  const prevReportedStyleRef = React12.useRef(graphStyle);
-  React12.useEffect(() => {
+  const prevReportedStyleRef = React13.useRef(graphStyle);
+  React13.useEffect(() => {
     var _a2;
     if (prevReportedStyleRef.current !== graphStyle) {
       prevReportedStyleRef.current = graphStyle;
       (_a2 = onGraphStyleChangeRef.current) == null ? void 0 : _a2.call(onGraphStyleChangeRef, graphStyle);
     }
   }, [graphStyle]);
-  const graphStyleRef = React12.useRef(graphStyle);
+  const graphStyleRef = React13.useRef(graphStyle);
   graphStyleRef.current = graphStyle;
   const styleCapabilities = GRAPH_STYLES[graphStyle].capabilities;
   const effectiveFoldMode = (_c = (_b = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _b : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _c : FOLD_MODE.EXPANDED;
-  const [showControllers, setShowControllers] = React12.useState(() => {
+  const [showControllers, setShowControllers] = React13.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 = React12.useRef(effectiveFoldMode);
+  const foldModeRef = React13.useRef(effectiveFoldMode);
   foldModeRef.current = effectiveFoldMode;
-  const containerRef = React12.useRef(null);
-  const [detailSelection, setDetailSelection] = React12.useState(null);
-  const [conceptOverride, setConceptOverride] = React12.useState(null);
+  const containerRef = React13.useRef(null);
+  const [detailSelection, setDetailSelection] = React13.useState(null);
+  const [conceptOverride, setConceptOverride] = React13.useState(null);
   const {
     width: panelWidth,
     isDragging: isPanelDragging,
     handleMouseDown: onResizeMouseDown
   } = useResizable({ defaultWidth: 380, minWidth: 280, maxWidth: 800, containerRef });
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     setDetailSelection(null);
     setConceptOverride(null);
   }, [graphspec]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const themePalette = getPaletteForTheme(resolvedTheme);
@@ -3338,14 +3511,15 @@ function GraphViewer(props) {
       }
     };
   }, [config.paletteColors, resolvedTheme]);
+  const [stillHeight, setStillHeight] = React13.useState(STILL_PLACEHOLDER_HEIGHT_PX);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowRef = React12.useRef(null);
-  const initialDataRef = React12.useRef(null);
-  const rawGraphDataRef = React12.useRef(null);
-  const layoutCacheRef = React12.useRef(null);
-  const [expandedControllers, setExpandedControllers] = React12.useState(/* @__PURE__ */ new Set());
-  const toggleCollapse = React12.useCallback((controllerId) => {
+  const reactFlowRef = React13.useRef(null);
+  const initialDataRef = React13.useRef(null);
+  const rawGraphDataRef = React13.useRef(null);
+  const layoutCacheRef = React13.useRef(null);
+  const [expandedControllers, setExpandedControllers] = React13.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = React13.useCallback((controllerId) => {
     setExpandedControllers((prev) => {
       const next = new Set(prev);
       if (next.has(controllerId)) next.delete(controllerId);
@@ -3353,17 +3527,17 @@ function GraphViewer(props) {
       return next;
     });
   }, []);
-  const [foldedControllers, setFoldedControllers] = React12.useState(/* @__PURE__ */ new Set());
-  const styleDefaultFoldsRef = React12.useRef(/* @__PURE__ */ new Set());
-  const readerOpenedRef = React12.useRef(/* @__PURE__ */ new Set());
-  const markReaderFolds = React12.useCallback((ids, folded) => {
+  const [foldedControllers, setFoldedControllers] = React13.useState(/* @__PURE__ */ new Set());
+  const styleDefaultFoldsRef = React13.useRef(/* @__PURE__ */ new Set());
+  const readerOpenedRef = React13.useRef(/* @__PURE__ */ new Set());
+  const markReaderFolds = React13.useCallback((ids, folded) => {
     for (const id of ids) {
       styleDefaultFoldsRef.current.delete(id);
       if (folded) readerOpenedRef.current.delete(id);
       else readerOpenedRef.current.add(id);
     }
   }, []);
-  const toggleFold = React12.useCallback(
+  const toggleFold = React13.useCallback(
     (controllerId, options) => {
       setFoldedControllers((prev) => {
         const next = new Set(prev);
@@ -3381,43 +3555,45 @@ function GraphViewer(props) {
     [markReaderFolds]
   );
   const edgeType = config.edgeType || EDGE_TYPE.DEFAULT;
-  const layoutConfig = React12.useMemo(
+  const layoutConfig = React13.useMemo(
     () => ({ nodesep: config.nodesep, ranksep: config.ranksep }),
     [config.nodesep, config.ranksep]
   );
-  const showControllersRef = React12.useRef(showControllers);
+  const showControllersRef = React13.useRef(showControllers);
   showControllersRef.current = showControllers;
-  const directionRef = React12.useRef(direction);
+  const directionRef = React13.useRef(direction);
   directionRef.current = direction;
-  const layoutConfigRef = React12.useRef(layoutConfig);
+  const layoutConfigRef = React13.useRef(layoutConfig);
   layoutConfigRef.current = layoutConfig;
-  const initialZoomRef = React12.useRef(config.initialZoom);
+  const initialZoomRef = React13.useRef(config.initialZoom);
   initialZoomRef.current = config.initialZoom;
-  const panToTopRef = React12.useRef(config.panToTop);
+  const panToTopRef = React13.useRef(config.panToTop);
   panToTopRef.current = config.panToTop;
-  const expandedRef = React12.useRef(expandedControllers);
+  const interactiveRef = React13.useRef(interactive);
+  interactiveRef.current = interactive;
+  const expandedRef = React13.useRef(expandedControllers);
   expandedRef.current = expandedControllers;
-  const toggleCollapseRef = React12.useRef(toggleCollapse);
+  const toggleCollapseRef = React13.useRef(toggleCollapse);
   toggleCollapseRef.current = toggleCollapse;
-  const foldedRef = React12.useRef(foldedControllers);
+  const foldedRef = React13.useRef(foldedControllers);
   foldedRef.current = foldedControllers;
-  const toggleFoldRef = React12.useRef(toggleFold);
+  const toggleFoldRef = React13.useRef(toggleFold);
   toggleFoldRef.current = toggleFold;
-  const isFirstFoldEffect = React12.useRef(true);
-  const prevFoldSizeRef = React12.useRef(0);
-  const skipNextFoldEffectRef = React12.useRef(false);
-  const statusMapRef = React12.useRef(statusMap);
+  const isFirstFoldEffect = React13.useRef(true);
+  const prevFoldSizeRef = React13.useRef(0);
+  const skipNextFoldEffectRef = React13.useRef(false);
+  const statusMapRef = React13.useRef(statusMap);
   statusMapRef.current = statusMap;
-  const validationIssuesRef = React12.useRef(validationIssues);
+  const validationIssuesRef = React13.useRef(validationIssues);
   validationIssuesRef.current = validationIssues;
-  const selectedNodeIdRef = React12.useRef(null);
+  const selectedNodeIdRef = React13.useRef(null);
   selectedNodeIdRef.current = (_d = detailSelection == null ? void 0 : detailSelection.nodeId) != null ? _d : null;
-  const [validationOpen, setValidationOpen] = React12.useState(false);
-  const openValidationPanel = React12.useCallback(() => setValidationOpen(true), []);
-  const validationWidgetAvailable = validationState !== void 0 && !hideToolbar;
-  const validationWidgetAvailableRef = React12.useRef(validationWidgetAvailable);
+  const [validationOpen, setValidationOpen] = React13.useState(false);
+  const openValidationPanel = React13.useCallback(() => setValidationOpen(true), []);
+  const validationWidgetAvailable = validationState !== void 0 && !hideToolbar && interactive;
+  const validationWidgetAvailableRef = React13.useRef(validationWidgetAvailable);
   validationWidgetAvailableRef.current = validationWidgetAvailable;
-  const decorateNodes = React12.useCallback(
+  const decorateNodes = React13.useCallback(
     (nodes2) => {
       var _a2, _b2, _c2;
       const raw = rawGraphDataRef.current;
@@ -3438,7 +3614,7 @@ function GraphViewer(props) {
     },
     [openValidationPanel]
   );
-  const frameLayout = React12.useCallback(
+  const frameLayout = React13.useCallback(
     (style, layout, graphspec2, analysis) => GRAPH_STYLE_PIPELINES[style].frame({
       nodes: cloneCachedNodes(layout.nodes),
       edges: layout.edges,
@@ -3457,18 +3633,18 @@ function GraphViewer(props) {
     const data = initialDataRef.current;
     return cache !== null && data !== null && cache.graphspec === data._graphspec && cache.graphStyle === data._graphStyle;
   };
-  const nodesRef = React12.useRef([]);
+  const nodesRef = React13.useRef([]);
   nodesRef.current = nodes;
-  const onValidationIssueClickRef = React12.useRef(onValidationIssueClick);
+  const onValidationIssueClickRef = React13.useRef(onValidationIssueClick);
   onValidationIssueClickRef.current = onValidationIssueClick;
-  const flashTimeoutRef = React12.useRef(null);
-  React12.useEffect(
+  const flashTimeoutRef = React13.useRef(null);
+  React13.useEffect(
     () => () => {
       if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
     },
     []
   );
-  const handleValidationIssueClick = React12.useCallback(
+  const handleValidationIssueClick = React13.useCallback(
     (index, issue) => {
       var _a2, _b2, _c2;
       (_a2 = onValidationIssueClickRef.current) == null ? void 0 : _a2.call(onValidationIssueClickRef, index, issue);
@@ -3511,7 +3687,7 @@ function GraphViewer(props) {
     },
     [setNodes]
   );
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (!initialDataRef.current) return;
     let cancelled = false;
     void (async () => {
@@ -3544,7 +3720,7 @@ function GraphViewer(props) {
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
-          if (!cancelled && reactFlowRef.current) {
+          if (!cancelled && reactFlowRef.current && interactiveRef.current) {
             void reactFlowRef.current.fitView({ padding: 0.1 });
           }
         }, 50);
@@ -3556,7 +3732,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [direction, layoutConfig]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const cache = layoutCacheRef.current;
     const data = initialDataRef.current;
     if (!cache || !data || !cacheMatchesData()) return;
@@ -3564,7 +3740,7 @@ function GraphViewer(props) {
     setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
   }, [showControllers, expandedControllers, toggleCollapse, toggleFold, decorateNodes]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     var _a2;
     if (!graphspec) {
       initialDataRef.current = null;
@@ -3664,7 +3840,7 @@ function GraphViewer(props) {
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
-          if (!cancelled && reactFlowRef.current) {
+          if (!cancelled && reactFlowRef.current && interactiveRef.current) {
             void reactFlowRef.current.fitView({ padding: 0.1 });
             if (initialZoomRef.current !== void 0 && initialZoomRef.current !== null) {
               void reactFlowRef.current.zoomTo(initialZoomRef.current);
@@ -3683,7 +3859,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [graphspec, edgeType, graphStyle]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (isFirstFoldEffect.current) {
       isFirstFoldEffect.current = false;
       prevFoldSizeRef.current = foldedControllers.size;
@@ -3748,7 +3924,7 @@ function GraphViewer(props) {
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
-          if (!cancelled && reactFlowRef.current) {
+          if (!cancelled && reactFlowRef.current && interactiveRef.current) {
             void reactFlowRef.current.fitView({ padding: 0.1 });
           }
         }, 50);
@@ -3760,7 +3936,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [foldedControllers, toggleFold]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const cache = layoutCacheRef.current;
     const data = initialDataRef.current;
     if (!cache || !data || !cacheMatchesData()) return;
@@ -3768,14 +3944,14 @@ function GraphViewer(props) {
     setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
   }, [statusMap, decorateNodes]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const cache = layoutCacheRef.current;
     const data = initialDataRef.current;
     if (!cache || !data || !cacheMatchesData()) return;
     const withControllers = frameLayout(cache.graphStyle, cache, data._graphspec, data._analysis);
     setNodes(decorateNodes(withControllers.nodes));
   }, [validationIssues, validationWidgetAvailable, decorateNodes]);
-  const onNodeClick = React12.useCallback(
+  const onNodeClick = React13.useCallback(
     (event, node) => {
       const nodeData = node.data;
       onNodeSelect == null ? void 0 : onNodeSelect(node.id, nodeData, event);
@@ -3816,7 +3992,7 @@ function GraphViewer(props) {
       conceptOverride
     ]
   );
-  const onInit = React12.useCallback(
+  const onInit = React13.useCallback(
     (reactFlowInstance) => {
       reactFlowRef.current = reactFlowInstance;
       if (onReactFlowInit) {
@@ -3825,12 +4001,28 @@ function GraphViewer(props) {
     },
     [onReactFlowInit]
   );
-  const handlePaneClick = React12.useCallback(() => {
+  const prevInteractiveRef = React13.useRef(interactive);
+  React13.useEffect(() => {
+    if (prevInteractiveRef.current === interactive) return;
+    prevInteractiveRef.current = interactive;
+    if (!interactive) {
+      setDetailSelection(null);
+      setConceptOverride(null);
+      setValidationOpen(false);
+      return;
+    }
+    const timer = setTimeout(() => {
+      var _a2;
+      void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 }));
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [interactive]);
+  const handlePaneClick = React13.useCallback(() => {
     setDetailSelection(null);
     setConceptOverride(null);
     onPaneClick == null ? void 0 : onPaneClick();
   }, [onPaneClick]);
-  const handleConceptClick = React12.useCallback(
+  const handleConceptClick = React13.useCallback(
     (conceptCode) => {
       if (!graphspec) return;
       const info = resolveConceptRef(graphspec, conceptCode);
@@ -3847,7 +4039,7 @@ function GraphViewer(props) {
   const rawAnalysis = (_e = rawGraphDataRef.current) == null ? void 0 : _e.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
   const foldControlsAvailable = styleCapabilities.foldAll && (!styleCapabilities.controllerFrameToggle || showControllers);
-  const foldAllProps = React12.useMemo(() => {
+  const foldAllProps = React13.useMemo(() => {
     if (!foldControlsAvailable || !allControllerIds || allControllerIds.size === 0) {
       return {
         onFoldAll: void 0,
@@ -3869,34 +4061,37 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [foldControlsAvailable, allControllerIds, foldedControllers, markReaderFolds]);
-  const styleMenuOptions = React12.useMemo(() => resolveStyleMenu(styleMenu), [styleMenu]);
-  return /* @__PURE__ */ jsxs26(
+  const styleMenuOptions = React13.useMemo(() => resolveStyleMenu(styleMenu), [styleMenu]);
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: containerRef,
-      className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}`,
+      className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}${interactive ? "" : " react-flow-container--still"}`,
+      style: interactive ? void 0 : { height: stillHeight },
+      inert: !interactive,
       children: [
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           ReactFlow,
-          {
+          __spreadProps(__spreadValues({
             nodes,
             edges,
             nodeTypes,
             edgeTypes,
             onNodesChange,
             onEdgesChange,
-            onNodeClick,
-            onPaneClick: handlePaneClick,
+            onNodeClick: interactive ? onNodeClick : void 0,
+            onPaneClick: interactive ? handlePaneClick : void 0,
             onInit,
-            fitView: true,
+            fitView: interactive,
             fitViewOptions: { padding: 0.1 },
             defaultEdgeOptions: { type: edgeType },
-            panOnScroll: true,
-            minZoom: 0.1,
+            panOnScroll: interactive,
+            minZoom: interactive ? 0.1 : 0.01,
             proOptions: { hideAttribution: true },
-            panActivationKeyCode: null,
+            panActivationKeyCode: null
+          }, interactive ? {} : STILL_FLOW_PROPS), {
             children: [
-              /* @__PURE__ */ jsx28(
+              interactive ? /* @__PURE__ */ jsx29(
                 Background,
                 {
                   variant: BackgroundVariant.Dots,
@@ -3904,8 +4099,8 @@ function GraphViewer(props) {
                   size: 1,
                   color: "var(--color-bg-dots)"
                 }
-              ),
-              !hideToolbar && /* @__PURE__ */ jsx28(
+              ) : /* @__PURE__ */ jsx29(StillFit, { onHeight: setStillHeight }),
+              interactive && !hideToolbar && /* @__PURE__ */ jsx29(
                 GraphToolbar,
                 {
                   direction,
@@ -3943,9 +4138,9 @@ function GraphViewer(props) {
                 }
               )
             ]
-          }
+          })
         ),
-        /* @__PURE__ */ jsxs26(
+        interactive && /* @__PURE__ */ jsxs27(
           DetailPanel,
           {
             isOpen: detailOpen,
@@ -3954,14 +4149,14 @@ function GraphViewer(props) {
             isDragging: isPanelDragging,
             onResizeHandleMouseDown: onResizeMouseDown,
             children: [
-              conceptOverride ? /* @__PURE__ */ jsx28(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx28(
+              conceptOverride ? /* @__PURE__ */ jsx29(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx29(
                 PipeDetailPanel,
                 {
                   node: selectedSpecNode,
                   spec: graphspec,
                   onConceptClick: handleConceptClick
                 }
-              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx28(
+              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx29(
                 StuffNodeDetail,
                 {
                   nodeId: detailSelection.nodeId,