@pipelex/mthds-ui 0.27.0 → 0.29.0

package/dist/graph/react/index.js

@@ -14,15 +14,16 @@ import {
   resolveConceptRef,
   resolveIssueTargetNodeId,
   validateGraphSpec
-} from "../../chunk-K3BWHQVX.js";
+} from "../../chunk-ZTXSDTVF.js";
 import {
   parsePipeRef
 } from "../../chunk-2N65P32H.js";
 import {
   DEFAULT_GRAPH_CONFIG,
   getPaletteForTheme
-} from "../../chunk-XBHDA3PQ.js";
+} from "../../chunk-Y46574OW.js";
 import {
+  BINDING_STEP_TYPE,
   EDGE_TYPE,
   FOLD_MODE,
   GRAPH_DIRECTION,
@@ -32,6 +33,8 @@ import {
   TOOLBAR_POSITION,
   VALIDATION_STATE,
   graphSpecMode,
+  isBindingNode,
+  isBindingStepSpec,
   isDryGraphSpec,
   isPluralMultiplicity,
   isStaticGraphSpec,
@@ -39,7 +42,7 @@ import {
   stuffDigestFromId,
   toolbarOrientation,
   toolbarSide
-} from "../../chunk-VCO4GZDZ.js";
+} from "../../chunk-3I3ZPYMW.js";
 import {
   __spreadProps,
   __spreadValues
@@ -121,7 +124,7 @@ import {
 } from "@pipelex/mthds-form/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function StuffResultPanel({
-  contracts,
+  pipeIoContracts,
   outputForm,
   inputForm,
   stuff,
@@ -135,9 +138,9 @@ function StuffResultPanel({
   const field = React2.useMemo(
     () => {
       var _a;
-      return (_a = fromProducer(contracts, outputForm, producerPipeRef)) != null ? _a : fromConsumer(contracts, inputForm, consumer);
+      return (_a = fromProducer(pipeIoContracts, outputForm, producerPipeRef)) != null ? _a : fromConsumer(pipeIoContracts, inputForm, consumer);
     },
-    [contracts, outputForm, inputForm, producerPipeRef, consumer]
+    [pipeIoContracts, outputForm, inputForm, producerPipeRef, consumer]
   );
   if (field) {
     const panel = /* @__PURE__ */ jsx(StuffViewer, { field, value: stuff.data, name: stuff.name });
@@ -186,6 +189,25 @@ function fromConsumer(contracts, inputForm, consumer) {
   return buildResultField({ field: node }, slot.json_schema);
 }
 
+// src/graph/react/viewer/graphArtifacts.ts
+function graphArtifactsFrom(source) {
+  var _a, _b, _c;
+  if (source.graph_spec === void 0 || source.graph_spec === null) return null;
+  return {
+    graphSpec: source.graph_spec,
+    pipeIoContracts: (_a = source.pipe_io_contracts) != null ? _a : null,
+    outputForm: (_b = source.output_form) != null ? _b : null,
+    inputForm: (_c = source.input_form) != null ? _c : null
+  };
+}
+function resultDescriptors(graph) {
+  const pipeIoContracts = graph == null ? void 0 : graph.pipeIoContracts;
+  const outputForm = graph == null ? void 0 : graph.outputForm;
+  if (!pipeIoContracts || !outputForm) return null;
+  const inputForm = graph == null ? void 0 : graph.inputForm;
+  return inputForm ? { pipeIoContracts, outputForm, inputForm } : { pipeIoContracts, outputForm };
+}
+
 // src/graph/react/detail/DetailPanel.tsx
 import React3 from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -993,7 +1015,13 @@ function PipeSequenceSection({
     /* @__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 }),
-      /* @__PURE__ */ jsx12("span", { className: "detail-step-code", children: step.pipe_code }),
+      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: [
+          "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: [
         "-> ",
         step.output_name
@@ -1038,6 +1066,20 @@ function PipeBatchSection({
   ] });
 }
 
+// src/graph/react/detail/sections/BindingStepDetail.tsx
+import { jsx as jsx15, jsxs as jsxs15 } 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 })
+  ] });
+}
+
 // src/graph/react/detail/sections/executionData.ts
 var MERGED_EXECUTION_DATA_TYPES = /* @__PURE__ */ new Set([
   "PipeLLM",
@@ -1057,7 +1099,7 @@ function shouldDumpExecutionData(pipeType, hasBlueprint) {
 }
 
 // src/graph/react/detail/PipeDetailPanel.tsx
-import { Fragment as Fragment10, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -1066,11 +1108,14 @@ var PIPE_TYPE_BADGES = {
   PipeSearch: "Search",
   PipeFunc: "Func",
   PipeStructure: "Structure",
+  PipeJudge: "Judge",
+  PipeDocGen: "DocGen",
   PipeSignature: "Signature",
   PipeSequence: "Seq",
   PipeParallel: "Par",
   PipeCondition: "Cond",
-  PipeBatch: "Batch"
+  PipeBatch: "Batch",
+  BindingStep: "Binding"
 };
 var CONTROLLER_TYPES = /* @__PURE__ */ new Set([
   "PipeSequence",
@@ -1090,6 +1135,7 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const pipeType = node.pipe_type;
   const isController = CONTROLLER_TYPES.has(pipeType);
+  const isBinding = isBindingNode(node);
   const isStatic = isStaticGraphSpec(spec);
   const showsGeneratedData = !isStatic && !isDryGraphSpec(spec);
   const badge = PIPE_TYPE_BADGES[pipeType];
@@ -1097,7 +1143,7 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
   const statusColor = (_a = STATUS_COLORS[status]) != null ? _a : "#6272a4";
   const blueprint = React6.useMemo(() => {
     var _a2, _b2;
-    if (!node.pipe_code || !spec.pipe_registry) return void 0;
+    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;
@@ -1105,22 +1151,22 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
       if (ref.endsWith(`.${node.pipe_code}`)) return pipe;
     }
     return void 0;
-  }, [node.pipe_code, spec]);
+  }, [isBinding, node.pipe_code, spec]);
   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__ */ jsxs15(Fragment10, { children: [
-    /* @__PURE__ */ jsxs15("div", { className: "detail-sticky-header", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "detail-header", children: [
-        /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs16(Fragment10, { children: [
+    /* @__PURE__ */ jsxs16("div", { className: "detail-sticky-header", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "detail-header", children: [
+        /* @__PURE__ */ jsx16(
           "span",
           {
             className: `detail-badge ${isController ? "detail-badge--controller" : "detail-badge--operator"}`,
             children: badge
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "span",
           {
             className: `detail-pipe-code ${isController ? "detail-pipe-code--controller" : ""}`,
@@ -1128,11 +1174,11 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
           }
         )
       ] }),
-      !isStatic && /* @__PURE__ */ jsxs15("div", { className: "detail-status", children: [
-        /* @__PURE__ */ jsx15("span", { className: "detail-status-dot", style: { background: statusColor } }),
-        /* @__PURE__ */ jsx15("span", { className: "detail-status-label", style: { color: statusColor }, children: status }),
-        ((_g = node.timing) == null ? void 0 : _g.duration) != null && /* @__PURE__ */ jsx15("span", { className: "detail-duration", children: formatDuration(node.timing.duration) }),
-        showsGeneratedData && node.usage && /* @__PURE__ */ jsx15(
+      !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(
           UsageCostInline,
           {
             usage: node.usage,
@@ -1142,43 +1188,44 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
           }
         )
       ] }),
-      showsGeneratedData && node.usage && usageExpanded && /* @__PURE__ */ jsx15(UsageDetails, { usage: node.usage, isController }),
-      description && /* @__PURE__ */ jsx15("div", { className: "detail-description", children: description }),
-      inputs.length > 0 && /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx15("div", { className: "detail-section-label", children: "Inputs" }),
-        /* @__PURE__ */ jsx15("div", { className: "detail-io-list", children: inputs.map((input, idx) => /* @__PURE__ */ jsxs15(
+      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(
           "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__ */ jsx15("span", { className: "detail-io-name", children: input.name }),
-              input.concept && /* @__PURE__ */ jsx15("span", { className: "detail-io-concept", children: input.concept + multiplicitySuffix(input.multiplicity) })
+              /* @__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) })
             ]
           },
           idx
         )) })
       ] }),
-      outputs.length > 0 && /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx15("div", { className: "detail-section-label", children: "Output" }),
-        /* @__PURE__ */ jsx15("div", { className: "detail-io-list", children: outputs.map((output, idx) => /* @__PURE__ */ jsxs15(
+      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(
           "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__ */ jsx15("span", { className: "detail-io-name", children: output.name }),
-              output.concept && /* @__PURE__ */ jsx15("span", { className: "detail-io-concept", children: output.concept + multiplicitySuffix(output.multiplicity) })
+              /* @__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) })
             ]
           },
           idx
         )) })
       ] }),
-      (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx15("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
+      (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx16("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
     ] }),
-    blueprint && /* @__PURE__ */ jsx15(
+    isBinding && /* @__PURE__ */ jsx16(BindingStepSection, { node }),
+    blueprint && /* @__PURE__ */ jsx16(
       BlueprintSection,
       {
         blueprint,
@@ -1187,7 +1234,7 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
         modelHandles: node.execution_data
       }
     ),
-    showsGeneratedData && node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx15(
+    showsGeneratedData && !isBinding && node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx16(
       ExecutionDataSection,
       {
         executionData: node.execution_data,
@@ -1195,14 +1242,14 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
         hasBlueprint: !!blueprint
       }
     ),
-    node.error && /* @__PURE__ */ jsxs15("div", { className: "detail-error", children: [
-      /* @__PURE__ */ jsx15("div", { className: "detail-error-type", children: node.error.error_type }),
-      /* @__PURE__ */ jsx15("div", { className: "detail-error-message", children: node.error.message }),
-      node.error.stack && /* @__PURE__ */ jsx15("div", { className: "detail-error-stack", children: node.error.stack })
+    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 })
     ] }),
-    showsGeneratedData && node.metrics && Object.keys(node.metrics).length > 0 && /* @__PURE__ */ jsxs15("div", { children: [
-      /* @__PURE__ */ jsx15("div", { className: "detail-section-label", children: "Metrics" }),
-      Object.entries(node.metrics).map(([key, value]) => /* @__PURE__ */ jsx15(
+    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(
         KV,
         {
           label: key,
@@ -1211,17 +1258,17 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
         key
       ))
     ] }),
-    node.tags && Object.keys(node.tags).length > 0 && /* @__PURE__ */ jsxs15("div", { children: [
-      /* @__PURE__ */ jsx15("div", { className: "detail-section-label", children: "Tags" }),
-      /* @__PURE__ */ jsx15("div", { className: "detail-tags", children: Object.entries(node.tags).map(([key, value]) => /* @__PURE__ */ jsxs15("span", { className: "detail-tag", children: [
-        /* @__PURE__ */ jsxs15("span", { className: "detail-tag-key", children: [
+    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: [
           key,
           ": "
         ] }),
-        /* @__PURE__ */ jsx15("span", { className: "detail-tag-value", children: value })
+        /* @__PURE__ */ jsx16("span", { className: "detail-tag-value", children: value })
       ] }, key)) })
     ] }),
-    !blueprint && /* @__PURE__ */ jsx15("div", { className: "detail-not-available", children: "Blueprint not available" })
+    !blueprint && !isBinding && /* @__PURE__ */ jsx16("div", { className: "detail-not-available", children: "Blueprint not available" })
   ] });
 }
 function BlueprintSection({
@@ -1232,7 +1279,7 @@ function BlueprintSection({
 }) {
   switch (blueprint.type) {
     case "PipeLLM":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         PipeLLMSection,
         {
           blueprint,
@@ -1242,7 +1289,7 @@ function BlueprintSection({
         }
       );
     case "PipeImgGen":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         PipeImgGenSection,
         {
           blueprint,
@@ -1252,9 +1299,9 @@ function BlueprintSection({
         }
       );
     case "PipeCompose":
-      return /* @__PURE__ */ jsx15(PipeComposeSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx16(PipeComposeSection, { blueprint, executionData });
     case "PipeExtract":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         PipeExtractSection,
         {
           blueprint,
@@ -1263,7 +1310,7 @@ function BlueprintSection({
         }
       );
     case "PipeSearch":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         PipeSearchSection,
         {
           blueprint,
@@ -1273,7 +1320,7 @@ function BlueprintSection({
         }
       );
     case "PipeStructure":
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         PipeStructureSection,
         {
           blueprint,
@@ -1283,17 +1330,17 @@ function BlueprintSection({
         }
       );
     case "PipeSequence":
-      return /* @__PURE__ */ jsx15(PipeSequenceSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx16(PipeSequenceSection, { blueprint, executionData });
     case "PipeParallel":
-      return /* @__PURE__ */ jsx15(PipeParallelSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx16(PipeParallelSection, { blueprint, executionData });
     case "PipeCondition":
-      return /* @__PURE__ */ jsx15(PipeConditionSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx16(PipeConditionSection, { blueprint, executionData });
     case "PipeBatch":
-      return /* @__PURE__ */ jsx15(PipeBatchSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx16(PipeBatchSection, { blueprint, executionData });
     case "PipeFunc":
       return null;
     case "PipeSignature":
-      return /* @__PURE__ */ jsx15("div", { className: "detail-not-available", children: "Signature stub \u2014 declared but not yet implemented." });
+      return /* @__PURE__ */ jsx16("div", { className: "detail-not-available", children: "Signature stub \u2014 declared but not yet implemented." });
     default:
       return null;
   }
@@ -1304,20 +1351,20 @@ function ExecutionDataSection({
   hasBlueprint
 }) {
   if (!shouldDumpExecutionData(pipeType, hasBlueprint)) return null;
-  return /* @__PURE__ */ jsx15(GenericExecutionData, { data: executionData });
+  return /* @__PURE__ */ jsx16(GenericExecutionData, { data: executionData });
 }
 function GenericExecutionData({ data }) {
   const entries = Object.entries(data);
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsxs15(Fragment10, { children: [
-    /* @__PURE__ */ jsx15("div", { className: "detail-section-label", children: "Execution" }),
-    entries.map(([key, value]) => /* @__PURE__ */ jsx15(KV, { label: key, value: String(value) }, key))
+  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))
   ] });
 }
 
 // src/graph/react/detail/ConceptDetailPanel.tsx
 import React7 from "react";
-import { Fragment as Fragment11, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 function ConceptDetailPanel({
   concept,
   ioData,
@@ -1327,18 +1374,18 @@ function ConceptDetailPanel({
 }) {
   var _a;
   const multiplicity = ioData == null ? void 0 : ioData.multiplicity;
-  return /* @__PURE__ */ jsxs16(Fragment11, { children: [
-    /* @__PURE__ */ jsxs16("div", { className: "detail-header", children: [
-      /* @__PURE__ */ jsx16("span", { className: "detail-concept-code", children: concept.code + multiplicitySuffix(multiplicity) }),
-      /* @__PURE__ */ jsx16("span", { className: "detail-concept-domain", children: concept.domain_code })
+  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 })
     ] }),
-    isPluralMultiplicity(multiplicity) && /* @__PURE__ */ jsx16("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__ */ jsx16("div", { className: "detail-description", children: concept.description }),
-    concept.refines && /* @__PURE__ */ jsxs16("div", { className: "detail-refines", children: [
+    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: [
       "refines ",
-      /* @__PURE__ */ jsx16("span", { className: "detail-refines-code", children: concept.refines })
+      /* @__PURE__ */ jsx17("span", { className: "detail-refines-code", children: concept.refines })
     ] }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       ConceptBody,
       {
         concept,
@@ -1357,10 +1404,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__ */ jsxs16("div", { children: [
-    /* @__PURE__ */ jsx16("div", { className: "detail-section-label", children: "Structure" }),
-    /* @__PURE__ */ jsx16(SchemaTable, { schema: concept.json_schema })
-  ] }) : /* @__PURE__ */ jsx16("div", { className: "detail-not-available", children: "Schema not available" });
+  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" });
   if (!hasData) return structure;
   const onTabKeyDown = (event) => {
     var _a;
@@ -1383,7 +1430,7 @@ function ConceptBody({ concept, ioData, isDryRun, renderData }) {
     setActiveTab(next);
     (_a = document.getElementById(tabId(next))) == null ? void 0 : _a.focus();
   };
-  const renderTab = (tab, label) => /* @__PURE__ */ jsx16(
+  const renderTab = (tab, label) => /* @__PURE__ */ jsx17(
     "button",
     {
       type: "button",
@@ -1398,12 +1445,12 @@ function ConceptBody({ concept, ioData, isDryRun, renderData }) {
       children: label
     }
   );
-  return /* @__PURE__ */ jsxs16(Fragment11, { children: [
-    /* @__PURE__ */ jsxs16("div", { className: "detail-tabs", role: "tablist", "aria-label": "Concept views", children: [
+  return /* @__PURE__ */ jsxs17(Fragment11, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "detail-tabs", role: "tablist", "aria-label": "Concept views", children: [
       renderTab("data", "Data"),
       renderTab("structure", "Structure")
     ] }),
-    /* @__PURE__ */ jsx16("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? dataView : structure })
+    /* @__PURE__ */ jsx17("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? dataView : structure })
   ] });
 }
 function SchemaTable({ schema }) {
@@ -1411,23 +1458,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__ */ jsx16("div", { className: "detail-not-available", children: "No fields defined" });
+    return /* @__PURE__ */ jsx17("div", { className: "detail-not-available", children: "No fields defined" });
   }
   const fields = Object.entries(properties);
-  return /* @__PURE__ */ jsxs16("table", { className: "detail-schema-table", children: [
-    /* @__PURE__ */ jsx16("thead", { children: /* @__PURE__ */ jsxs16("tr", { children: [
-      /* @__PURE__ */ jsx16("th", { children: "Field" }),
-      /* @__PURE__ */ jsx16("th", { children: "Type" }),
-      /* @__PURE__ */ jsx16("th", {}),
-      /* @__PURE__ */ jsx16("th", { children: "Description" })
+  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" })
     ] }) }),
-    /* @__PURE__ */ jsx16("tbody", { children: fields.map(([fieldName, fieldSchema]) => {
+    /* @__PURE__ */ jsx17("tbody", { children: fields.map(([fieldName, fieldSchema]) => {
       var _a2;
-      return /* @__PURE__ */ jsxs16("tr", { children: [
-        /* @__PURE__ */ jsx16("td", { className: "detail-schema-field", children: fieldName }),
-        /* @__PURE__ */ jsx16("td", { className: "detail-schema-type", children: extractType(fieldSchema) }),
-        /* @__PURE__ */ jsx16("td", { children: required.has(fieldName) && /* @__PURE__ */ jsx16("span", { className: "detail-schema-required", children: "req" }) }),
-        /* @__PURE__ */ jsx16("td", { children: (_a2 = fieldSchema.description) != null ? _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 : "" })
       ] }, fieldName);
     }) })
   ] });
@@ -1478,10 +1525,10 @@ function toAppEdges(edges) {
 }
 
 // src/graph/react/viewer/renderLabel.tsx
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 function renderLabel(desc) {
   if (desc.kind === "pipe") {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       "div",
       {
         style: {
@@ -1495,7 +1542,7 @@ function renderLabel(desc) {
           minWidth: 0
         },
         title: desc.label,
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           "span",
           {
             style: {
@@ -1514,7 +1561,7 @@ function renderLabel(desc) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       style: {
@@ -1530,7 +1577,7 @@ function renderLabel(desc) {
       },
       title: desc.concept ? `${desc.label}: ${desc.concept}` : desc.label,
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "span",
           {
             style: {
@@ -1546,7 +1593,7 @@ function renderLabel(desc) {
             children: desc.label
           }
         ),
-        desc.concept && /* @__PURE__ */ jsx17(
+        desc.concept && /* @__PURE__ */ jsx18(
           "span",
           {
             style: {
@@ -1580,7 +1627,7 @@ import React8 from "react";
 import { Panel } from "@xyflow/react";
 
 // src/graph/react/viewer/ValidationPanel.tsx
-import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 function validationLabel(state, issueCount) {
   const issues = issueCount === 1 ? "1 issue" : `${issueCount} issues`;
   switch (state) {
@@ -1647,7 +1694,7 @@ function ValidationPanel({
   placement,
   id
 }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       id,
@@ -1655,18 +1702,18 @@ function ValidationPanel({
       role: "region",
       "aria-label": "Validation issues",
       children: [
-        /* @__PURE__ */ jsx18("div", { className: "graph-validation-panel-header", children: validationLabel(state, issues.length) }),
-        issues.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "graph-validation-empty", children: validationEmptyText(state) }) : /* @__PURE__ */ jsx18("ul", { className: "graph-validation-issues", role: "list", children: issues.map((issue, index) => {
+        /* @__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) => {
           const clickable = onIssueClick !== void 0;
-          const meta = (issue.context || issue.file) && /* @__PURE__ */ jsxs18("div", { className: "graph-validation-issue-meta", children: [
-            issue.context && /* @__PURE__ */ jsx18("span", { className: "graph-validation-issue-context", children: issue.context }),
-            issue.file && /* @__PURE__ */ jsx18("span", { className: "graph-validation-issue-file", children: issue.file })
+          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 })
           ] });
-          return /* @__PURE__ */ jsx18(
+          return /* @__PURE__ */ jsx19(
             "li",
             {
               className: `graph-validation-issue graph-validation-issue--${issue.severity}` + (clickable ? " graph-validation-issue--clickable" : ""),
-              children: /* @__PURE__ */ jsxs18(
+              children: /* @__PURE__ */ jsxs19(
                 "div",
                 {
                   className: "graph-validation-issue-body",
@@ -1681,8 +1728,8 @@ function ValidationPanel({
                   } : void 0,
                   children: [
                     meta,
-                    /* @__PURE__ */ jsx18("div", { className: "graph-validation-issue-message", children: issue.message }),
-                    issue.suggestedFix && /* @__PURE__ */ jsx18("div", { className: "graph-validation-issue-fix", children: issue.suggestedFix })
+                    /* @__PURE__ */ jsx19("div", { className: "graph-validation-issue-message", children: issue.message }),
+                    issue.suggestedFix && /* @__PURE__ */ jsx19("div", { className: "graph-validation-issue-fix", children: issue.suggestedFix })
                   ]
                 }
               )
@@ -1696,9 +1743,9 @@ function ValidationPanel({
 }
 
 // src/graph/react/viewer/GraphToolbar.tsx
-import { Fragment as Fragment12, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 var REACTFLOW_PANEL_MARGIN = 15;
-var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs19(
+var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1710,12 +1757,12 @@ var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "12 5 19 12 12 19" })
+      /* @__PURE__ */ jsx20("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "12 5 19 12 12 19" })
     ]
   }
 );
-var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs19(
+var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1727,12 +1774,12 @@ var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "19 12 12 19 5 12" })
+      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "19 12 12 19 5 12" })
     ]
   }
 );
-var MINUS_ICON = /* @__PURE__ */ jsx19(
+var MINUS_ICON = /* @__PURE__ */ jsx20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1743,10 +1790,10 @@ var MINUS_ICON = /* @__PURE__ */ jsx19(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx19("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    children: /* @__PURE__ */ jsx20("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   }
 );
-var PLUS_ICON = /* @__PURE__ */ jsxs19(
+var PLUS_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1758,12 +1805,12 @@ var PLUS_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx19("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx20("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
     ]
   }
 );
-var FIT_VIEW_ICON = /* @__PURE__ */ jsxs19(
+var FIT_VIEW_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1775,14 +1822,14 @@ var FIT_VIEW_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("polyline", { points: "15 3 21 3 21 9" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "9 21 3 21 3 15" }),
-      /* @__PURE__ */ jsx19("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-      /* @__PURE__ */ jsx19("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      /* @__PURE__ */ jsx20("polyline", { points: "15 3 21 3 21 9" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "9 21 3 21 3 15" }),
+      /* @__PURE__ */ jsx20("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+      /* @__PURE__ */ jsx20("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
     ]
   }
 );
-var BOXES_ICON = /* @__PURE__ */ jsxs19(
+var BOXES_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1794,22 +1841,22 @@ var BOXES_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("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__ */ jsx19("path", { d: "m7 16.5-4.74-2.85" }),
-      /* @__PURE__ */ jsx19("path", { d: "m7 16.5 5-3" }),
-      /* @__PURE__ */ jsx19("path", { d: "M7 16.5v5.17" }),
-      /* @__PURE__ */ jsx19("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__ */ jsx19("path", { d: "m17 16.5-5-3" }),
-      /* @__PURE__ */ jsx19("path", { d: "m17 16.5 4.74-2.85" }),
-      /* @__PURE__ */ jsx19("path", { d: "M17 16.5v5.17" }),
-      /* @__PURE__ */ jsx19("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__ */ jsx19("path", { d: "M12 8 7.26 5.15" }),
-      /* @__PURE__ */ jsx19("path", { d: "m12 8 4.74-2.85" }),
-      /* @__PURE__ */ jsx19("path", { d: "M12 13.5V8" })
+      /* @__PURE__ */ jsx20("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__ */ jsx20("path", { d: "m7 16.5-4.74-2.85" }),
+      /* @__PURE__ */ jsx20("path", { d: "m7 16.5 5-3" }),
+      /* @__PURE__ */ jsx20("path", { d: "M7 16.5v5.17" }),
+      /* @__PURE__ */ jsx20("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__ */ jsx20("path", { d: "m17 16.5-5-3" }),
+      /* @__PURE__ */ jsx20("path", { d: "m17 16.5 4.74-2.85" }),
+      /* @__PURE__ */ jsx20("path", { d: "M17 16.5v5.17" }),
+      /* @__PURE__ */ jsx20("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__ */ jsx20("path", { d: "M12 8 7.26 5.15" }),
+      /* @__PURE__ */ jsx20("path", { d: "m12 8 4.74-2.85" }),
+      /* @__PURE__ */ jsx20("path", { d: "M12 13.5V8" })
     ]
   }
 );
-var FOLD_ALL_ICON = /* @__PURE__ */ jsxs19(
+var FOLD_ALL_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1821,15 +1868,15 @@ var FOLD_ALL_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "2 2 6 6 2 6" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "22 2 18 6 22 6" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "2 22 6 18 2 18" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "22 22 18 18 22 18" })
+      /* @__PURE__ */ jsx20("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "2 2 6 6 2 6" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "22 2 18 6 22 6" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "2 22 6 18 2 18" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "22 22 18 18 22 18" })
     ]
   }
 );
-var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs19(
+var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1841,15 +1888,15 @@ var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "3 3 7 7 3 7" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "21 3 17 7 21 7" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "3 21 7 17 3 17" }),
-      /* @__PURE__ */ jsx19("polyline", { points: "21 21 17 17 21 17" })
+      /* @__PURE__ */ jsx20("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "3 3 7 7 3 7" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "21 3 17 7 21 7" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "3 21 7 17 3 17" }),
+      /* @__PURE__ */ jsx20("polyline", { points: "21 21 17 17 21 17" })
     ]
   }
 );
-var SUN_ICON = /* @__PURE__ */ jsxs19(
+var SUN_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1861,19 +1908,19 @@ var SUN_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "4" }),
-      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
-      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
-      /* @__PURE__ */ jsx19("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
-      /* @__PURE__ */ jsx19("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
-      /* @__PURE__ */ jsx19("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
-      /* @__PURE__ */ jsx19("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
-      /* @__PURE__ */ jsx19("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
-      /* @__PURE__ */ jsx19("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
+      /* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
+      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
+      /* @__PURE__ */ jsx20("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
+      /* @__PURE__ */ jsx20("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
+      /* @__PURE__ */ jsx20("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
+      /* @__PURE__ */ jsx20("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx20("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
+      /* @__PURE__ */ jsx20("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
     ]
   }
 );
-var MOON_ICON = /* @__PURE__ */ jsx19(
+var MOON_ICON = /* @__PURE__ */ jsx20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1884,10 +1931,10 @@ var MOON_ICON = /* @__PURE__ */ jsx19(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx19("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    children: /* @__PURE__ */ jsx20("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
   }
 );
-var MONITOR_ICON = /* @__PURE__ */ jsxs19(
+var MONITOR_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1899,13 +1946,13 @@ var MONITOR_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
-      /* @__PURE__ */ jsx19("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+      /* @__PURE__ */ jsx20("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx20("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
     ]
   }
 );
-var SPINNER_ICON = /* @__PURE__ */ jsx19(
+var SPINNER_ICON = /* @__PURE__ */ jsx20(
   "svg",
   {
     className: "graph-toolbar-validation-spin",
@@ -1917,10 +1964,10 @@ var SPINNER_ICON = /* @__PURE__ */ jsx19(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx19("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    children: /* @__PURE__ */ jsx20("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
   }
 );
-var CHECK_ICON2 = /* @__PURE__ */ jsx19(
+var CHECK_ICON2 = /* @__PURE__ */ jsx20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1931,10 +1978,10 @@ var CHECK_ICON2 = /* @__PURE__ */ jsx19(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx19("polyline", { points: "20 6 9 17 4 12" })
+    children: /* @__PURE__ */ jsx20("polyline", { points: "20 6 9 17 4 12" })
   }
 );
-var X_CIRCLE_ICON = /* @__PURE__ */ jsxs19(
+var X_CIRCLE_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1946,13 +1993,13 @@ var X_CIRCLE_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx19("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
-      /* @__PURE__ */ jsx19("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+      /* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx20("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+      /* @__PURE__ */ jsx20("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
     ]
   }
 );
-var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs19(
+var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1964,13 +2011,13 @@ var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("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__ */ jsx19("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      /* @__PURE__ */ jsx20("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__ */ jsx20("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
 );
-var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs19(
+var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs20(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1982,9 +2029,9 @@ var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs19(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+      /* @__PURE__ */ jsx20("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
     ]
   }
 );
@@ -2088,10 +2135,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__ */ jsx19(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs19("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
-    validationState !== void 0 && /* @__PURE__ */ jsxs19(Fragment12, { children: [
-      /* @__PURE__ */ jsxs19("div", { className: "graph-toolbar-validation", ref: validationRef, children: [
-        /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx20(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs20("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
+    validationState !== void 0 && /* @__PURE__ */ jsxs20(Fragment12, { children: [
+      /* @__PURE__ */ jsxs20("div", { className: "graph-toolbar-validation", ref: validationRef, children: [
+        /* @__PURE__ */ jsxs20(
           "button",
           {
             type: "button",
@@ -2104,11 +2151,11 @@ function GraphToolbar({
             "aria-controls": validationPanelId,
             children: [
               validationIcon(validationState),
-              validationIssues.length > 0 && /* @__PURE__ */ jsx19("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
+              validationIssues.length > 0 && /* @__PURE__ */ jsx20("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
             ]
           }
         ),
-        validationOpen && /* @__PURE__ */ jsx19(
+        validationOpen && /* @__PURE__ */ jsx20(
           ValidationPanel,
           {
             id: validationPanelId,
@@ -2119,9 +2166,9 @@ function GraphToolbar({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx19("div", { className: "graph-toolbar-separator" })
+      /* @__PURE__ */ jsx20("div", { className: "graph-toolbar-separator" })
     ] }),
-    onFoldAll && /* @__PURE__ */ jsx19(
+    onFoldAll && /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
@@ -2133,7 +2180,7 @@ function GraphToolbar({
         children: FOLD_ALL_ICON
       }
     ),
-    onExpandAll && /* @__PURE__ */ jsx19(
+    onExpandAll && /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
@@ -2145,8 +2192,8 @@ function GraphToolbar({
         children: EXPAND_ALL_ICON
       }
     ),
-    foldAllSection && /* @__PURE__ */ jsx19("div", { className: "graph-toolbar-separator" }),
-    /* @__PURE__ */ jsx19(
+    foldAllSection && /* @__PURE__ */ jsx20("div", { className: "graph-toolbar-separator" }),
+    /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
@@ -2157,7 +2204,7 @@ function GraphToolbar({
         children: BOXES_ICON
       }
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
@@ -2168,8 +2215,8 @@ function GraphToolbar({
         children: isVertical ? ARROW_RIGHT_ICON : ARROW_DOWN_ICON
       }
     ),
-    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx19("div", { className: "graph-toolbar-separator" }),
-    onZoomOut && /* @__PURE__ */ jsx19(
+    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx20("div", { className: "graph-toolbar-separator" }),
+    onZoomOut && /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
@@ -2180,7 +2227,7 @@ function GraphToolbar({
         children: MINUS_ICON
       }
     ),
-    onZoomIn && /* @__PURE__ */ jsx19(
+    onZoomIn && /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
@@ -2191,7 +2238,7 @@ function GraphToolbar({
         children: PLUS_ICON
       }
     ),
-    onFitView && /* @__PURE__ */ jsx19(
+    onFitView && /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
@@ -2202,9 +2249,9 @@ function GraphToolbar({
         children: FIT_VIEW_ICON
       }
     ),
-    themeToggleEnabled && /* @__PURE__ */ jsxs19(Fragment12, { children: [
-      /* @__PURE__ */ jsx19("div", { className: "graph-toolbar-separator" }),
-      /* @__PURE__ */ jsx19(
+    themeToggleEnabled && /* @__PURE__ */ jsxs20(Fragment12, { children: [
+      /* @__PURE__ */ jsx20("div", { className: "graph-toolbar-separator" }),
+      /* @__PURE__ */ jsx20(
         "button",
         {
           type: "button",
@@ -2220,7 +2267,7 @@ function GraphToolbar({
 }
 
 // src/graph/react/nodes/NodeValidationBadge.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function NodeValidationBadge({
   validation,
   onClick
@@ -2230,9 +2277,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__ */ jsx20("span", { className, title: tooltip, "aria-label": label, children: text });
+    return /* @__PURE__ */ jsx21("span", { className, title: tooltip, "aria-label": label, children: text });
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
@@ -2252,7 +2299,7 @@ function validationRingClass(validation) {
 }
 
 // src/graph/react/nodes/controller/ControllerGroupNode.tsx
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 var CONTROLLER_CONFIG = {
   PipeSequence: { badge: "Sequence", icon: "\u2192" },
   PipeParallel: { badge: "Parallel", icon: "//" },
@@ -2274,12 +2321,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__ */ jsxs20("div", { className: `controller-group-node ${modifier}${validationRingClass(data.validation)}`, children: [
-    /* @__PURE__ */ jsxs20("div", { className: "controller-group-header", children: [
-      /* @__PURE__ */ jsx21("span", { className: "controller-group-icon", children: config.icon }),
-      /* @__PURE__ */ jsx21("span", { className: "controller-group-badge", children: config.badge }),
-      data.label && /* @__PURE__ */ jsx21("span", { className: "controller-group-label", children: data.label }),
-      data.onToggleFold && /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs21("div", { className: `controller-group-node ${modifier}${validationRingClass(data.validation)}`, children: [
+    /* @__PURE__ */ jsxs21("div", { className: "controller-group-header", children: [
+      /* @__PURE__ */ jsx22("span", { className: "controller-group-icon", children: config.icon }),
+      /* @__PURE__ */ jsx22("span", { className: "controller-group-badge", children: config.badge }),
+      data.label && /* @__PURE__ */ jsx22("span", { className: "controller-group-label", children: data.label }),
+      data.onToggleFold && /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
@@ -2294,9 +2341,9 @@ function ControllerGroupNode({ data }) {
           children: "\u2921"
         }
       ),
-      data.validation && /* @__PURE__ */ jsx21(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
+      data.validation && /* @__PURE__ */ jsx22(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
     ] }),
-    isCollapsible && /* @__PURE__ */ jsx21(
+    isCollapsible && /* @__PURE__ */ jsx22(
       "button",
       {
         className: "controller-group-collapse",
@@ -2317,7 +2364,7 @@ import { Handle, Position } from "@xyflow/react";
 
 // src/graph/react/nodes/pipe/PipeCardBase.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES2 = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -2326,11 +2373,14 @@ var PIPE_TYPE_BADGES2 = {
   PipeSearch: "Search",
   PipeFunc: "Func",
   PipeStructure: "Structure",
+  PipeJudge: "Judge",
+  PipeDocGen: "DocGen",
   PipeSignature: "Signature",
   PipeSequence: "Sequence",
   PipeParallel: "Parallel",
   PipeCondition: "Condition",
-  PipeBatch: "Batch"
+  PipeBatch: "Batch",
+  BindingStep: "Binding"
 };
 var CONTROLLER_TYPE_TABLE = {
   PipeSequence: true,
@@ -2360,6 +2410,7 @@ function PipeCardBase({ data, children }) {
   const isRunning = data.status === "running";
   const isController = isControllerType(data.pipeType);
   const isSignature = data.pipeType === "PipeSignature";
+  const isBinding = data.pipeType === BINDING_STEP_TYPE;
   const isStatic = data.graphMode === "static";
   const outcome = isStatic ? (_a = data.tags) == null ? void 0 : _a.outcome : void 0;
   const batchMultiplicity = isStatic ? (_b = data.tags) == null ? void 0 : _b.batch_multiplicity : void 0;
@@ -2370,24 +2421,25 @@ function PipeCardBase({ data, children }) {
   const dirClass = data.direction === "TB" ? "pipe-card--tb" : "pipe-card--lr";
   const controllerClass = isController ? " pipe-card--controller" : "";
   const signatureClass = isSignature ? " pipe-card--signature" : "";
+  const bindingClass = isBinding ? " pipe-card--binding" : "";
   const staticClass = isStatic ? " pipe-card--static" : "";
-  const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : isSignature ? "pipe-card-badge pipe-card-badge--signature" : "pipe-card-badge";
+  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__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
-      className: `pipe-card ${dirClass}${controllerClass}${signatureClass}${staticClass}${ringClass}`,
+      className: `pipe-card ${dirClass}${controllerClass}${signatureClass}${bindingClass}${staticClass}${ringClass}`,
       children: [
-        /* @__PURE__ */ jsxs21("div", { className: "pipe-card-header", children: [
-          /* @__PURE__ */ jsx22("span", { className: badgeClass, children: badge }),
-          /* @__PURE__ */ jsx22("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
-          !isStatic && /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs22("div", { className: "pipe-card-header", children: [
+          /* @__PURE__ */ jsx23("span", { className: badgeClass, children: badge }),
+          /* @__PURE__ */ jsx23("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
+          !isStatic && /* @__PURE__ */ jsx23(
             "span",
             {
               className: "pipe-card-status",
               style: { color: statusConfig.color },
               title: statusConfig.label,
-              children: /* @__PURE__ */ jsx22(
+              children: /* @__PURE__ */ jsx23(
                 "span",
                 {
                   className: `pipe-card-status-dot ${isRunning ? "pipe-card-status-dot--pulse" : ""}`,
@@ -2396,7 +2448,7 @@ function PipeCardBase({ data, children }) {
               )
             }
           ),
-          data.onExpand && /* @__PURE__ */ jsx22(
+          data.onExpand && /* @__PURE__ */ jsx23(
             "button",
             {
               type: "button",
@@ -2411,32 +2463,32 @@ function PipeCardBase({ data, children }) {
               children: "\u2922"
             }
           ),
-          data.validation && /* @__PURE__ */ jsx22(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
+          data.validation && /* @__PURE__ */ jsx23(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
         ] }),
-        (outcome || batchMultiplicity) && /* @__PURE__ */ jsxs21("div", { className: "pipe-card-annotations", children: [
-          outcome && /* @__PURE__ */ jsxs21("span", { className: "pipe-card-annotation pipe-card-annotation--outcome", children: [
+        (outcome || batchMultiplicity) && /* @__PURE__ */ jsxs22("div", { className: "pipe-card-annotations", children: [
+          outcome && /* @__PURE__ */ jsxs22("span", { className: "pipe-card-annotation pipe-card-annotation--outcome", children: [
             "outcome: ",
             outcome
           ] }),
-          batchMultiplicity && /* @__PURE__ */ jsx22("span", { className: "pipe-card-annotation pipe-card-annotation--batch", children: batchMultiplicity })
+          batchMultiplicity && /* @__PURE__ */ jsx23("span", { className: "pipe-card-annotation pipe-card-annotation--batch", children: batchMultiplicity })
         ] }),
-        data.description && /* @__PURE__ */ jsx22("span", { className: "pipe-card-description", title: data.description, children: data.description }),
-        data.inputs.length > 0 && /* @__PURE__ */ jsxs21("div", { className: "pipe-card-io", children: [
-          /* @__PURE__ */ jsx22("span", { className: "pipe-card-io-label", children: "INPUTS" }),
-          /* @__PURE__ */ jsxs21("div", { className: "pipe-card-io-pills", children: [
-            visibleInputs.map((input) => /* @__PURE__ */ jsxs21(
+        data.description && /* @__PURE__ */ jsx23("span", { className: "pipe-card-description", title: data.description, children: data.description }),
+        data.inputs.length > 0 && /* @__PURE__ */ jsxs22("div", { className: "pipe-card-io", children: [
+          /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-label", children: "INPUTS" }),
+          /* @__PURE__ */ jsxs22("div", { className: "pipe-card-io-pills", children: [
+            visibleInputs.map((input) => /* @__PURE__ */ jsxs22(
               "span",
               {
                 className: "pipe-card-io-pill",
                 title: `${input.name}: ${input.concept}`,
                 children: [
-                  /* @__PURE__ */ jsx22("span", { className: "pipe-card-io-pill-name", children: input.name }),
-                  /* @__PURE__ */ jsx22("span", { className: "pipe-card-io-pill-concept", children: input.concept })
+                  /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-pill-name", children: input.name }),
+                  /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-pill-concept", children: input.concept })
                 ]
               },
               input.name
             )),
-            hasMany && /* @__PURE__ */ jsx22(
+            hasMany && /* @__PURE__ */ jsx23(
               "button",
               {
                 className: "pipe-card-io-more",
@@ -2449,16 +2501,16 @@ function PipeCardBase({ data, children }) {
             )
           ] })
         ] }),
-        data.outputs.length > 0 && /* @__PURE__ */ jsxs21("div", { className: "pipe-card-io", children: [
-          /* @__PURE__ */ jsx22("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
-          /* @__PURE__ */ jsx22("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs21(
+        data.outputs.length > 0 && /* @__PURE__ */ jsxs22("div", { className: "pipe-card-io", children: [
+          /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
+          /* @__PURE__ */ jsx23("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs22(
             "span",
             {
               className: "pipe-card-io-pill",
               title: `${output.name}: ${output.concept}`,
               children: [
-                /* @__PURE__ */ jsx22("span", { className: "pipe-card-io-pill-name", children: output.name }),
-                /* @__PURE__ */ jsx22("span", { className: "pipe-card-io-pill-concept", children: output.concept })
+                /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-pill-name", children: output.name }),
+                /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-pill-concept", children: output.concept })
               ]
             },
             output.name
@@ -2479,22 +2531,25 @@ var PIPE_CARD_REGISTRY = {
   PipeSearch: PipeCardBase,
   PipeFunc: PipeCardBase,
   PipeStructure: PipeCardBase,
+  PipeJudge: PipeCardBase,
+  PipeDocGen: PipeCardBase,
   PipeSignature: PipeCardBase,
   PipeSequence: PipeCardBase,
   PipeParallel: PipeCardBase,
   PipeCondition: PipeCardBase,
-  PipeBatch: PipeCardBase
+  PipeBatch: PipeCardBase,
+  BindingStep: PipeCardBase
 };
 function getPipeCardComponent(pipeType) {
   return PIPE_CARD_REGISTRY[pipeType];
 }
 
 // src/graph/react/nodes/pipe/PipeCardNode.tsx
-import { Fragment as Fragment13, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function PipeCardNode({ data }) {
   var _a;
   const Card = (_a = getPipeCardComponent(data.pipeType)) != null ? _a : PipeCardBase;
-  return /* @__PURE__ */ jsx23(Card, { data });
+  return /* @__PURE__ */ jsx24(Card, { data });
 }
 function PipeCardRFNode({
   data,
@@ -2503,15 +2558,15 @@ function PipeCardRFNode({
 }) {
   const payload = data.pipeCardData;
   if (!payload) return null;
-  return /* @__PURE__ */ jsxs22(Fragment13, { children: [
-    /* @__PURE__ */ jsx23(Handle, { type: "target", position: targetPosition }),
-    /* @__PURE__ */ jsx23(PipeCardNode, { data: payload }),
-    /* @__PURE__ */ jsx23(Handle, { type: "source", position: sourcePosition })
+  return /* @__PURE__ */ jsxs23(Fragment13, { children: [
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: targetPosition }),
+    /* @__PURE__ */ jsx24(PipeCardNode, { data: payload }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: sourcePosition })
   ] });
 }
 
 // src/graph/react/viewer/GraphViewer.tsx
-import { Fragment as Fragment14, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
   pipeCard: PipeCardRFNode
 });
@@ -2521,10 +2576,8 @@ function StuffNodeDetail({
   producerPipeRef,
   consumer,
   graphspec,
+  artifacts,
   theme,
-  contracts,
-  outputForm,
-  inputForm,
   resolveUrl,
   resolveShareUrl,
   saveFiles,
@@ -2533,19 +2586,17 @@ function StuffNodeDetail({
   var _a;
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
   const isDryRun = graphSpecMode(graphspec) === GRAPH_SPEC_MODE.DRY;
-  const renderData = contracts && outputForm ? () => /* @__PURE__ */ jsx24(
+  const descriptors = resultDescriptors(artifacts);
+  const renderData = descriptors ? () => /* @__PURE__ */ jsx25(
     StuffResultPanel,
-    __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
-      contracts,
-      outputForm
-    }, inputForm ? { inputForm } : {}), {
+    __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, descriptors), {
       stuff: stuffData
     }), conceptInfo ? { concept: conceptInfo } : {}), producerPipeRef ? { producerPipeRef } : {}), consumer ? { consumer } : {}), resolveUrl ? { resolveUrl } : {}), resolveShareUrl ? { resolveShareUrl } : {}), saveFiles ? { saveFiles } : {}), downloads ? { downloads } : {}), {
       theme
     })
   ) : void 0;
   if (conceptInfo) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       ConceptDetailPanel,
       {
         concept: conceptInfo,
@@ -2556,8 +2607,8 @@ function StuffNodeDetail({
       }
     );
   }
-  if (isDryRun) return /* @__PURE__ */ jsx24("div", { className: "detail-not-available", children: "Dry run data hidden" });
-  return /* @__PURE__ */ jsx24(Fragment14, { children: (_a = renderData == null ? void 0 : renderData()) != null ? _a : /* @__PURE__ */ jsx24("div", { className: "detail-not-available", children: "No data" }) });
+  if (isDryRun) return /* @__PURE__ */ jsx25("div", { className: "detail-not-available", children: "Dry run data hidden" });
+  return /* @__PURE__ */ jsx25(Fragment14, { children: (_a = renderData == null ? void 0 : renderData()) != null ? _a : /* @__PURE__ */ jsx25("div", { className: "detail-not-available", children: "No data" }) });
 }
 function seedFoldedControllers(mode, controllerIds) {
   if (mode === FOLD_MODE.FOLDED) return new Set(controllerIds);
@@ -2591,6 +2642,7 @@ function applyStatusOverrides(nodes, statusMap) {
     if (node.data.graphMode === "static" || ((_a = node.data.pipeCardData) == null ? void 0 : _a.graphMode) === "static") {
       return node;
     }
+    if (node.data.pipeType === BINDING_STEP_TYPE) return node;
     const pipeCode = node.data.pipeCode;
     if (!pipeCode || !Object.hasOwn(statusMap, pipeCode)) return node;
     const newStatus = statusMap[pipeCode];
@@ -2604,9 +2656,9 @@ function applyStatusOverrides(nodes, statusMap) {
   });
 }
 function GraphViewer(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
-    graphspec: graphspecProp,
+    graph,
     config = DEFAULT_GRAPH_CONFIG,
     initialDirection,
     initialShowControllers,
@@ -2624,9 +2676,6 @@ function GraphViewer(props) {
     onNodeSelect,
     onPaneClick,
     renderDetailExtra,
-    contracts,
-    outputForm,
-    inputForm,
     resolveUrl,
     resolveShareUrl,
     saveFiles,
@@ -2635,6 +2684,7 @@ function GraphViewer(props) {
     validationIssues,
     onValidationIssueClick
   } = props;
+  const graphspecProp = (_a = graph == null ? void 0 : graph.graphSpec) != null ? _a : null;
   const graphspec = React10.useMemo(
     () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
     [graphspecProp]
@@ -2670,7 +2720,7 @@ function GraphViewer(props) {
       (_a2 = onThemeChangeRef.current) == null ? void 0 : _a2.call(onThemeChangeRef, mode, resolvedTheme);
     }
   }, [mode, resolvedTheme]);
-  const effectiveFoldMode = (_b = (_a = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _a : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _b : FOLD_MODE.EXPANDED;
+  const effectiveFoldMode = (_c = (_b = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _b : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _c : FOLD_MODE.EXPANDED;
   const [showControllers, setShowControllers] = React10.useState(() => {
     var _a2, _b2;
     if (effectiveFoldMode === FOLD_MODE.FOLDED) return true;
@@ -3125,7 +3175,7 @@ function GraphViewer(props) {
       var _a2;
       const nodeData = node.data;
       onNodeSelect == null ? void 0 : onNodeSelect(node.id, nodeData, event);
-      if (nodeData.isController || nodeData.isPipe) {
+      if ((nodeData.isController || nodeData.isPipe) && nodeData.pipeType !== BINDING_STEP_TYPE) {
         const code = nodeData.pipeCode || nodeData.labelText;
         if (code && onNavigateToPipe) {
           onNavigateToPipe(code, (_a2 = nodeData.pipeCardData) == null ? void 0 : _a2.status);
@@ -3184,13 +3234,13 @@ function GraphViewer(props) {
     },
     [graphspec]
   );
-  const selectedSpecNode = (detailSelection == null ? void 0 : detailSelection.kind) === "pipe" && graphspec ? graphspec.nodes.find((n) => n.pipe_code === detailSelection.nodeData.pipeCode) : void 0;
+  const selectedSpecNode = (detailSelection == null ? void 0 : detailSelection.kind) === "pipe" && graphspec ? graphspec.nodes.find((n) => n.id === detailSelection.nodeId) : void 0;
   const detailOpen = detailSelection !== null || conceptOverride !== null;
   const effectiveToolbarPosition = resolveToolbarPosition(
     toolbarPositionProp,
     config.toolbarPosition
   );
-  const rawAnalysis = (_c = rawGraphDataRef.current) == null ? void 0 : _c.analysis;
+  const rawAnalysis = (_d = rawGraphDataRef.current) == null ? void 0 : _d.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
   const foldAllProps = React10.useMemo(() => {
     if (!showControllers || !allControllerIds || allControllerIds.size === 0) {
@@ -3208,13 +3258,13 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [showControllers, allControllerIds, foldedControllers]);
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       ref: containerRef,
       className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}`,
       children: [
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs24(
           ReactFlow,
           {
             nodes,
@@ -3233,7 +3283,7 @@ function GraphViewer(props) {
             proOptions: { hideAttribution: true },
             panActivationKeyCode: null,
             children: [
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 Background,
                 {
                   variant: BackgroundVariant.Dots,
@@ -3242,7 +3292,7 @@ function GraphViewer(props) {
                   color: "var(--color-bg-dots)"
                 }
               ),
-              !hideToolbar && /* @__PURE__ */ jsx24(
+              !hideToolbar && /* @__PURE__ */ jsx25(
                 GraphToolbar,
                 {
                   direction,
@@ -3279,7 +3329,7 @@ function GraphViewer(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs24(
           DetailPanel,
           {
             isOpen: detailOpen,
@@ -3288,14 +3338,14 @@ function GraphViewer(props) {
             isDragging: isPanelDragging,
             onResizeHandleMouseDown: onResizeMouseDown,
             children: [
-              conceptOverride ? /* @__PURE__ */ jsx24(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx24(
+              conceptOverride ? /* @__PURE__ */ jsx25(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx25(
                 PipeDetailPanel,
                 {
                   node: selectedSpecNode,
                   spec: graphspec,
                   onConceptClick: handleConceptClick
                 }
-              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx24(
+              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx25(
                 StuffNodeDetail,
                 {
                   nodeId: detailSelection.nodeId,
@@ -3304,9 +3354,7 @@ function GraphViewer(props) {
                   consumer: detailSelection.consumer,
                   graphspec,
                   theme: resolvedTheme,
-                  contracts,
-                  outputForm,
-                  inputForm,
+                  artifacts: graph,
                   resolveUrl,
                   resolveShareUrl,
                   saveFiles,
@@ -3334,8 +3382,10 @@ export {
   applyStatusOverrides,
   controllerNodeTypes,
   detectSystemTheme,
+  graphArtifactsFrom,
   hydrateLabels,
   renderLabel,
+  resultDescriptors,
   toAppEdges,
   toAppNodes,
   useResizable,