@pipelex/mthds-ui 0.29.0 → 0.30.0

package/dist/{chunk-ZTXSDTVF.js → chunk-3BXB6HSF.js}

@@ -1,25 +1,37 @@
 import {
-  makePipeRef
+  makePipeRef,
+  parsePipeRef
 } from "./chunk-2N65P32H.js";
+import {
+  DEFAULT_GRAPH_CONFIG
+} from "./chunk-GAOBB3UT.js";
 import {
   ARROW_CLOSED_MARKER,
   BINDING_STEP_TYPE,
   CONTROLLER_PADDING_BOTTOM,
   CONTROLLER_PADDING_TOP,
   CONTROLLER_PADDING_X,
+  EDGE_TYPE_ROUTED,
+  GRAPH_STYLE,
   KNOWN_PIPE_TYPES,
   NODE_TYPE_CONTROLLER,
   NODE_TYPE_PIPE_CARD,
+  NODE_TYPE_SIMPLE_DECISION,
+  NODE_TYPE_SIMPLE_FRAME,
+  NODE_TYPE_SIMPLE_STEP,
+  NODE_TYPE_SIMPLE_TERMINAL,
   NODE_TYPE_STUFF,
+  STEP_CATEGORY,
   graphSpecMode,
   isBindingNode,
+  isPluralMultiplicity,
   isStuffNodeId,
   multiplicitySuffix,
   nodeHeight,
   nodeWidth,
   stuffDigestFromId,
   stuffNodeId
-} from "./chunk-3I3ZPYMW.js";
+} from "./chunk-PJTYQURQ.js";
 import {
   __objRest,
   __spreadProps,
@@ -934,13 +946,12 @@ function issueTargetIds(issue, graphspec) {
   }
   return [];
 }
-function buildValidationDecorations(issues, graphspec, childToCtrl, foldedSet) {
-  var _a;
+function buildValidationDecorations(issues, graphspec, childToCtrl, foldedSet, standIns) {
   const decorations = /* @__PURE__ */ new Map();
   if (!issues || issues.length === 0 || !graphspec) return decorations;
   for (const issue of issues) {
     for (const targetId of issueTargetIds(issue, graphspec)) {
-      const visibleId = (_a = outermostFoldedAncestor(targetId, childToCtrl, foldedSet)) != null ? _a : targetId;
+      const visibleId = visibleNodeId(targetId, childToCtrl, foldedSet, standIns);
       const existing = decorations.get(visibleId);
       const lines = [issue.message, ...issue.suggestedFix ? [`Fix: ${issue.suggestedFix}`] : []];
       if (existing) {
@@ -954,11 +965,15 @@ function buildValidationDecorations(issues, graphspec, childToCtrl, foldedSet) {
   }
   return decorations;
 }
-function resolveIssueTargetNodeId(issue, graphspec, childToCtrl, foldedSet, renderedNodeIds) {
-  var _a;
+function visibleNodeId(targetId, childToCtrl, foldedSet, standIns) {
+  var _a, _b;
+  const unfolded = (_a = outermostFoldedAncestor(targetId, childToCtrl, foldedSet)) != null ? _a : targetId;
+  return (_b = standIns == null ? void 0 : standIns.get(unfolded)) != null ? _b : unfolded;
+}
+function resolveIssueTargetNodeId(issue, graphspec, childToCtrl, foldedSet, renderedNodeIds, standIns) {
   if (!graphspec) return null;
   for (const targetId of issueTargetIds(issue, graphspec)) {
-    const visibleId = (_a = outermostFoldedAncestor(targetId, childToCtrl, foldedSet)) != null ? _a : targetId;
+    const visibleId = visibleNodeId(targetId, childToCtrl, foldedSet, standIns);
     if (renderedNodeIds.has(visibleId)) return visibleId;
   }
   return null;
@@ -1133,6 +1148,7 @@ function countTbPillRows(pills, cardWidth) {
 function estimateNodeDimensions(node, isHorizontal) {
   var _a, _b, _c;
   const nodeData = node.data || {};
+  if (nodeData.layoutSize) return __spreadValues({}, nodeData.layoutSize);
   const isStuff = nodeData.isStuff;
   const labelText = nodeData.labelText || "";
   const isPipeCard = node.type === NODE_TYPE_PIPE_CARD;
@@ -1217,11 +1233,35 @@ function makeLeafNode(nodeId, dims, direction) {
     }
   };
 }
+function makeElkEdge(edge, routeEdges) {
+  const elkEdge = {
+    id: edge.id,
+    sources: [outputPortId(edge.source)],
+    targets: [inputPortId(edge.target)]
+  };
+  if (routeEdges && edge.label && edge.labelSize) {
+    elkEdge.labels = [
+      {
+        id: `${edge.id}_label`,
+        text: edge.label,
+        width: edge.labelSize.width,
+        height: edge.labelSize.height
+      }
+    ];
+  }
+  return elkEdge;
+}
 function buildElkGraph(nodes, edges, graphspec, analysis, direction, layoutConfig) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const isHorizontal = direction === "LR" || direction === "RL";
   const nodesep = (_a = layoutConfig == null ? void 0 : layoutConfig.nodesep) != null ? _a : 80;
   const ranksep = (_b = layoutConfig == null ? void 0 : layoutConfig.ranksep) != null ? _b : 70;
+  const routeEdges = (_c = layoutConfig == null ? void 0 : layoutConfig.routeEdges) != null ? _c : false;
+  const groupPadding = (_d = layoutConfig == null ? void 0 : layoutConfig.groupPadding) != null ? _d : {
+    x: CONTROLLER_PADDING_X,
+    top: CONTROLLER_PADDING_TOP,
+    bottom: CONTROLLER_PADDING_BOTTOM
+  };
   const elkDir = elkDirection(direction);
   const edgeNodeSpacing = "30";
   const rootLayoutOptions = {
@@ -1236,6 +1276,9 @@ function buildElkGraph(nodes, edges, graphspec, analysis, direction, layoutConfi
     "elk.layered.spacing.edgeEdgeBetweenLayers": "15",
     "elk.layered.nodePlacement.favorStraightEdges": "true"
   };
+  if (routeEdges) {
+    rootLayoutOptions["elk.json.edgeCoords"] = "ROOT";
+  }
   if (!graphspec || !analysis || analysis.controllerNodeIds.size === 0) {
     const dimensionMap2 = {};
     const elkChildren = nodes.map((node) => {
@@ -1243,11 +1286,7 @@ function buildElkGraph(nodes, edges, graphspec, analysis, direction, layoutConfi
       dimensionMap2[node.id] = dims;
       return makeLeafNode(node.id, dims, direction);
     });
-    const elkEdges2 = edges.map((edge) => ({
-      id: edge.id,
-      sources: [outputPortId(edge.source)],
-      targets: [inputPortId(edge.target)]
-    }));
+    const elkEdges2 = edges.map((edge) => makeElkEdge(edge, routeEdges));
     return {
       elkGraph: {
         id: "root",
@@ -1270,11 +1309,11 @@ function buildElkGraph(nodes, edges, graphspec, analysis, direction, layoutConfi
     return ((_a2 = depths[a]) != null ? _a2 : 0) - ((_b2 = depths[b]) != null ? _b2 : 0);
   });
   for (const ctrlId of controllerIds) {
-    const depth = (_c = depths[ctrlId]) != null ? _c : 0;
+    const depth = (_e = depths[ctrlId]) != null ? _e : 0;
     const depthScale = 1 + depth * 0.15;
-    const padX = Math.round(CONTROLLER_PADDING_X * depthScale);
-    const padTop = Math.round(CONTROLLER_PADDING_TOP * depthScale);
-    const padBottom = Math.round(CONTROLLER_PADDING_BOTTOM * depthScale);
+    const padX = Math.round(groupPadding.x * depthScale);
+    const padTop = Math.round(groupPadding.top * depthScale);
+    const padBottom = Math.round(groupPadding.bottom * depthScale);
     const ctrlLayoutOptions = {
       "elk.padding": `[top=${padTop},left=${padX},bottom=${padBottom},right=${padX}]`,
       "elk.spacing.nodeNode": String(nodesep),
@@ -1327,11 +1366,7 @@ function buildElkGraph(nodes, edges, graphspec, analysis, direction, layoutConfi
     }
   }
   const nodeIdSet = new Set(nodes.map((n) => n.id));
-  const elkEdges = edges.filter((e) => nodeIdSet.has(e.source) && nodeIdSet.has(e.target)).map((edge) => ({
-    id: edge.id,
-    sources: [outputPortId(edge.source)],
-    targets: [inputPortId(edge.target)]
-  }));
+  const elkEdges = edges.filter((e) => nodeIdSet.has(e.source) && nodeIdSet.has(e.target)).map((edge) => makeElkEdge(edge, routeEdges));
   return {
     elkGraph: {
       id: "root",
@@ -1363,6 +1398,38 @@ function extractAbsolutePositions(elkResult) {
   walk(elkResult, 0, 0);
   return positions;
 }
+function extractEdgeRoutes(elkResult) {
+  const routes = {};
+  function walk(node) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    for (const edge of (_a = node.edges) != null ? _a : []) {
+      const points = [];
+      for (const section of (_b = edge.sections) != null ? _b : []) {
+        for (const point of [section.startPoint, ...(_c = section.bendPoints) != null ? _c : [], section.endPoint]) {
+          const last = points[points.length - 1];
+          if (!last || last.x !== point.x || last.y !== point.y) {
+            points.push({ x: point.x, y: point.y });
+          }
+        }
+      }
+      if (points.length < 2) continue;
+      const route = { points };
+      const label = (_d = edge.labels) == null ? void 0 : _d[0];
+      if (label && label.x !== void 0 && label.y !== void 0) {
+        route.label = {
+          x: label.x,
+          y: label.y,
+          width: (_e = label.width) != null ? _e : 0,
+          height: (_f = label.height) != null ? _f : 0
+        };
+      }
+      routes[edge.id] = route;
+    }
+    for (const child of (_g = node.children) != null ? _g : []) walk(child);
+  }
+  walk(elkResult);
+  return routes;
+}
 
 // src/graph/graphLayout.ts
 import ELK from "elkjs/lib/elk.bundled.js";
@@ -1422,7 +1489,98 @@ async function getLayoutedElements(nodes, edges, direction, layoutConfig, graphs
       targetPosition: isHorizontal ? direction === "LR" ? "left" : "right" : direction === "TB" ? "top" : "bottom"
     });
   });
-  return { nodes: result, edges, controllerPositions };
+  if (!(layoutConfig == null ? void 0 : layoutConfig.routeEdges)) return { nodes: result, edges, controllerPositions };
+  const routes = extractEdgeRoutes(layoutResult);
+  const routedEdges = edges.map((edge) => {
+    const route = routes[edge.id];
+    return route ? __spreadProps(__spreadValues({}, edge), { route }) : edge;
+  });
+  return { nodes: result, edges: routedEdges, controllerPositions };
+}
+
+// src/graph/edgeRoutes.ts
+var ROUTE_ENDPOINT_TOLERANCE_PX = 8;
+var ROUTE_CORNER_RADIUS_PX = 8;
+var SAME_AXIS_EPSILON = 0.5;
+function near(a, b, tolerance) {
+  return Math.abs(a.x - b.x) <= tolerance && Math.abs(a.y - b.y) <= tolerance;
+}
+function fitRoute(points, source, target, tolerance = ROUTE_ENDPOINT_TOLERANCE_PX) {
+  if (points.length < 2) return null;
+  const first = points[0];
+  const last = points[points.length - 1];
+  if (!near(first, source, tolerance) || !near(last, target, tolerance)) return null;
+  const fitted = points.map((p) => ({ x: p.x, y: p.y }));
+  const end = fitted.length - 1;
+  if (fitted.length > 2) {
+    alignNeighbour(fitted, 0, 1, source);
+    alignNeighbour(fitted, end, end - 1, target);
+  }
+  fitted[0] = { x: source.x, y: source.y };
+  fitted[end] = { x: target.x, y: target.y };
+  return fitted;
+}
+function alignNeighbour(points, endIndex, neighbourIndex, to) {
+  const end = points[endIndex];
+  const neighbour = points[neighbourIndex];
+  if (Math.abs(end.y - neighbour.y) <= SAME_AXIS_EPSILON) neighbour.y = to.y;
+  else if (Math.abs(end.x - neighbour.x) <= SAME_AXIS_EPSILON) neighbour.x = to.x;
+}
+function roundedPolylinePath(points, radius = ROUTE_CORNER_RADIUS_PX) {
+  if (points.length === 0) return "";
+  const parts = [`M ${points[0].x},${points[0].y}`];
+  for (let i = 1; i < points.length - 1; i++) {
+    const previous = points[i - 1];
+    const bend = points[i];
+    const next = points[i + 1];
+    const inLength = Math.hypot(bend.x - previous.x, bend.y - previous.y);
+    const outLength = Math.hypot(next.x - bend.x, next.y - bend.y);
+    const r = Math.min(radius, inLength / 2, outLength / 2);
+    if (r <= 0) {
+      parts.push(`L ${bend.x},${bend.y}`);
+      continue;
+    }
+    const before = {
+      x: bend.x + (previous.x - bend.x) / inLength * r,
+      y: bend.y + (previous.y - bend.y) / inLength * r
+    };
+    const after = {
+      x: bend.x + (next.x - bend.x) / outLength * r,
+      y: bend.y + (next.y - bend.y) / outLength * r
+    };
+    parts.push(`L ${before.x},${before.y}`, `Q ${bend.x},${bend.y} ${after.x},${after.y}`);
+  }
+  const last = points[points.length - 1];
+  parts.push(`L ${last.x},${last.y}`);
+  return parts.join(" ");
+}
+function polylineMidpoint(points) {
+  if (points.length === 0) return { x: 0, y: 0 };
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    total += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+  }
+  let remaining = total / 2;
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1];
+    const b = points[i];
+    const length = Math.hypot(b.x - a.x, b.y - a.y);
+    if (length >= remaining && length > 0) {
+      const t = remaining / length;
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    remaining -= length;
+  }
+  return points[points.length - 1];
+}
+function routeLabelCenter(route, fitted) {
+  if (route.label) {
+    return {
+      x: route.label.x + route.label.width / 2,
+      y: route.label.y + route.label.height / 2
+    };
+  }
+  return polylineMidpoint(fitted);
 }
 
 // src/graph/graphControllers.ts
@@ -1655,9 +1813,11 @@ function applyControllers(layoutedNodes, layoutedEdges, graphspec, analysis, sho
       cn.data.onToggleFold = (options) => onToggleFold(id, options);
     }
   }
-  const allNodes = [...controllerNodes, ...filteredNodes];
+  return { nodes: sortParentsFirst([...controllerNodes, ...filteredNodes]), edges: filteredEdges };
+}
+function sortParentsFirst(nodes) {
   const nodeMap = {};
-  for (const n of allNodes) nodeMap[n.id] = n;
+  for (const n of nodes) nodeMap[n.id] = n;
   const depthOf = {};
   const depthVisiting = /* @__PURE__ */ new Set();
   function getContainmentDepth(id) {
@@ -1673,11 +1833,1084 @@ function applyControllers(layoutedNodes, layoutedEdges, graphspec, analysis, sho
     depthVisiting.delete(id);
     return depthOf[id];
   }
-  for (const n of allNodes) getContainmentDepth(n.id);
-  allNodes.sort((a, b) => depthOf[a.id] - depthOf[b.id]);
-  return { nodes: allNodes, edges: filteredEdges };
+  for (const n of nodes) getContainmentDepth(n.id);
+  return [...nodes].sort((a, b) => depthOf[a.id] - depthOf[b.id]);
+}
+
+// src/graph/styles/graphStyles.ts
+var GRAPH_STYLES = {
+  [GRAPH_STYLE.DETAILED]: {
+    id: GRAPH_STYLE.DETAILED,
+    name: "Detailed",
+    description: "Every pipe with its inputs, outputs and settings",
+    capabilities: { controllerFrameToggle: true, foldAll: true }
+  },
+  [GRAPH_STYLE.SIMPLE]: {
+    id: GRAPH_STYLE.SIMPLE,
+    name: "Simple",
+    description: "The method's steps in plain words",
+    capabilities: { controllerFrameToggle: false, foldAll: true },
+    layout: {
+      nodesep: 28,
+      ranksep: 44,
+      routeEdges: true,
+      groupPadding: { x: 20, top: 40, bottom: 16 }
+    }
+  }
+};
+var GRAPH_STYLE_IDS = [GRAPH_STYLE.DETAILED, GRAPH_STYLE.SIMPLE];
+function isGraphStyleId(value) {
+  return typeof value === "string" && Object.hasOwn(GRAPH_STYLES, value);
+}
+function resolveGraphStyle(styleProp, configStyle) {
+  if (isGraphStyleId(styleProp)) return styleProp;
+  if (isGraphStyleId(configStyle)) return configStyle;
+  return DEFAULT_GRAPH_CONFIG.graphStyle;
+}
+function resolveStyleMenu(styleMenu) {
+  if (styleMenu === void 0 || styleMenu === false) return [];
+  const requested = styleMenu === true ? GRAPH_STYLE_IDS : styleMenu;
+  const offered = [];
+  for (const id of requested) {
+    if (isGraphStyleId(id) && !offered.includes(id)) offered.push(id);
+  }
+  return offered.length >= 2 ? offered : [];
+}
+
+// src/graph/styles/humanize.ts
+var VOWELED_ACRONYMS = /* @__PURE__ */ new Set([
+  "ai",
+  "api",
+  "faq",
+  "iban",
+  "id",
+  "io",
+  "ip",
+  "json",
+  "kpi",
+  "ocr",
+  "roi",
+  "seo",
+  "ui",
+  "uri",
+  "url",
+  "uuid",
+  "ux"
+]);
+var VOWELS = /[aeiouy]/;
+var VOWELLESS_WORDS = /* @__PURE__ */ new Set([
+  "cfg",
+  "cm",
+  "cnt",
+  "ctx",
+  "dr",
+  "dst",
+  "fn",
+  "ft",
+  "hmm",
+  "hr",
+  "kg",
+  "km",
+  "lb",
+  "mg",
+  "ml",
+  "mm",
+  "mr",
+  "mrs",
+  "ms",
+  "msg",
+  "nd",
+  "nth",
+  "pkg",
+  "pt",
+  "rd",
+  "src",
+  "st",
+  "th",
+  "tmp",
+  "vs"
+]);
+var SINGULAR_S_ACRONYMS = /* @__PURE__ */ new Set([
+  "cms",
+  "css",
+  "dns",
+  "gps",
+  "rss",
+  "sms"
+]);
+var NATIVE_PLAIN_NAMES = {
+  Html: "HTML",
+  JSON: "JSON",
+  TextAndImages: "Text and images",
+  YesNo: "Yes or no",
+  SearchResult: "Search result",
+  Composite: "Combined results",
+  Dynamic: "Data"
+};
+var GENERIC_NATIVES = /* @__PURE__ */ new Set(["Anything", "Dynamic", "Composite"]);
+function isAcronymWord(lower) {
+  if (lower.length < 2 || !/^[a-z]+$/.test(lower)) return false;
+  if (VOWELLESS_WORDS.has(lower)) return false;
+  if (lower.endsWith("s") && VOWELLESS_WORDS.has(lower.slice(0, -1))) return false;
+  return !VOWELS.test(lower) || VOWELED_ACRONYMS.has(lower);
+}
+function spellWord(lower, wasAllCaps) {
+  if (/^\d+$/.test(lower)) return lower;
+  if (wasAllCaps && lower.length >= 2) return lower.toUpperCase();
+  if (lower.endsWith("s") && !SINGULAR_S_ACRONYMS.has(lower) && isAcronymWord(lower.slice(0, -1))) {
+    return lower.slice(0, -1).toUpperCase() + "s";
+  }
+  if (isAcronymWord(lower)) return lower.toUpperCase();
+  return lower;
+}
+function splitIdentifier(identifier) {
+  const parts = identifier.replace(/([a-z\d])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").replace(/([A-Za-z])(\d)/g, "$1 $2").split(/[\s_\-.]+/).filter((p) => p.length > 0);
+  return parts.map((p) => ({
+    word: p.toLowerCase(),
+    wasAllCaps: p.length >= 2 && p === p.toUpperCase() && /[A-Z]/.test(p)
+  }));
+}
+function capitalizeFirst(text) {
+  return text.length === 0 ? text : text.charAt(0).toUpperCase() + text.slice(1);
+}
+function stripDomain(ref) {
+  const dot = ref.lastIndexOf(".");
+  return dot === -1 ? ref : ref.slice(dot + 1);
+}
+function humanizeIdentifier(identifier) {
+  const words = splitIdentifier(stripDomain(identifier.trim()));
+  if (words.length === 0) return "";
+  return capitalizeFirst(words.map((w) => spellWord(w.word, w.wasAllCaps)).join(" "));
+}
+function conceptPlainName(conceptRef) {
+  var _a;
+  const code = stripDomain(conceptRef.trim());
+  return (_a = NATIVE_PLAIN_NAMES[code]) != null ? _a : humanizeIdentifier(code);
+}
+function isGenericConcept(conceptRef) {
+  return GENERIC_NATIVES.has(stripDomain(conceptRef.trim()));
+}
+function sentenceCase(text) {
+  const collapsed = text.replace(/\s+/g, " ").trim();
+  const trimmed = collapsed.endsWith(".") && !collapsed.endsWith("..") ? collapsed.slice(0, -1) : collapsed;
+  return capitalizeFirst(trimmed);
+}
+var OUTCOME_WORDS = {
+  true: "Yes",
+  false: "No",
+  default: "Otherwise"
+};
+function outcomeLabel(outcome) {
+  const outcomes = outcome.split("|").map((o) => o.trim()).filter((o) => o.length > 0);
+  const labels = outcomes.map((o, index) => {
+    var _a;
+    const label = (_a = OUTCOME_WORDS[o.toLowerCase()]) != null ? _a : humanizeIdentifier(o);
+    return index === 0 ? label : label.charAt(0).toLowerCase() + label.slice(1);
+  });
+  return labels.join(" or ");
+}
+
+// src/graph/styles/textMetrics.ts
+var GLYPH_EM_GROUPS = [
+  [0.28, "il .,'"],
+  [0.33, "fjt:;!()"],
+  [0.35, "/"],
+  [0.39, "I"],
+  [0.44, "r-"],
+  [0.51, "1z"],
+  [0.56, '7aceksvxyJ"'],
+  [0.59, "25"],
+  [0.6, "8"],
+  [0.61, "369bdghnopquF?"],
+  [0.64, "04"],
+  [0.67, "ELPSTZ"],
+  [0.72, "ABCDNRUVXY"],
+  [0.78, "GHKOQ"],
+  [0.8, "w"],
+  [0.83, "&"],
+  [0.89, "m"],
+  [0.94, "M"],
+  [1, "W%"]
+];
+var GLYPH_EM = new Map(
+  GLYPH_EM_GROUPS.flatMap(([em, glyphs]) => [...glyphs].map((glyph) => [glyph, em]))
+);
+var UNLISTED_LOWER_EM = 0.62;
+var UNLISTED_UPPER_EM = 0.78;
+function glyphEm(glyph) {
+  const listed = GLYPH_EM.get(glyph);
+  if (listed !== void 0) return listed;
+  return glyph !== glyph.toLowerCase() ? UNLISTED_UPPER_EM : UNLISTED_LOWER_EM;
+}
+function textWidthPx(text, fontPx) {
+  let em = 0;
+  for (const glyph of text) em += glyphEm(glyph);
+  return em * fontPx;
+}
+function estimateWrap(text, lineWidthPx, fontPx, maxLines) {
+  const words = text.split(/\s+/).filter((w) => w.length > 0);
+  const spacePx = textWidthPx(" ", fontPx);
+  let lines = words.length === 0 ? 0 : 1;
+  let used = 0;
+  for (const word of words) {
+    const wordPx = textWidthPx(word, fontPx);
+    if (wordPx > lineWidthPx) {
+      if (used > 0) lines += 1;
+      used = 0;
+      for (const glyph of word) {
+        const glyphPx = textWidthPx(glyph, fontPx);
+        if (used > 0 && used + glyphPx > lineWidthPx) {
+          lines += 1;
+          used = 0;
+        }
+        used += glyphPx;
+      }
+      continue;
+    }
+    const needed = used === 0 ? wordPx : used + spacePx + wordPx;
+    if (needed <= lineWidthPx) {
+      used = needed;
+    } else {
+      lines += 1;
+      used = wordPx;
+    }
+  }
+  const drawnLines = Math.min(lines, maxLines);
+  return { lines, drawnLines, clamped: lines > maxLines };
+}
+
+// src/graph/styles/simpleStyle.ts
+var NATIVE_DOMAIN = "native";
+var SIMPLE_STEP_WIDTH = 160;
+var SIMPLE_STEP_WIDE_WIDTH = 200;
+var STEP_PADDING_X = 12;
+var STEP_PADDING_Y = 10;
+var STEP_BORDER = 1.5;
+var STEP_HEADER_HEIGHT = 16;
+var STEP_GAP = 6;
+var SIMPLE_STEP_TITLE_FONT_PX = 15;
+var STEP_TITLE_LINE_HEIGHT = 20;
+var SIMPLE_TITLE_MAX_LINES = 3;
+var STEP_MARKER_HEIGHT = 18;
+var STEP_INNER_HEIGHT = 22;
+var EDGE_LABEL_FONT_PX = 11;
+var EDGE_LABEL_LINE_HEIGHT = 13;
+var EDGE_LABEL_PADDING = [5, 3];
+var SIMPLE_TERMINAL_WIDTH = 124;
+var TERMINAL_PADDING_X = 12;
+var TERMINAL_PADDING_TOP = 10;
+var TERMINAL_PADDING_BOTTOM = 16;
+var TERMINAL_TITLE_FONT_PX = 13;
+var TERMINAL_TITLE_LINE_HEIGHT = 17;
+var TERMINAL_TITLE_MAX_LINES = 2;
+var TERMINAL_SUBTITLE_HEIGHT = 17;
+var TERMINAL_MIN_HEIGHT = 52;
+var SIMPLE_DECISION_WIDTHS = [188, 220, 252, 284];
+var DECISION_TITLE_FONT_PX = 13;
+var DECISION_TITLE_LINE_HEIGHT = 16;
+var DECISION_TEXT_WIDTH_SHARE = 0.56;
+var DECISION_TEXT_HEIGHT_SHARE = 0.4;
+var DECISION_MIN_HEIGHT = 84;
+var WRAP_SLACK_PX = 2;
+function stepTitleWidth(boxWidth) {
+  return boxWidth - 2 * (STEP_PADDING_X + STEP_BORDER) - WRAP_SLACK_PX;
+}
+var TERMINAL_TITLE_WIDTH = SIMPLE_TERMINAL_WIDTH - 2 * TERMINAL_PADDING_X - WRAP_SLACK_PX;
+function decisionTextWidth(diamondWidth) {
+  return Math.floor(diamondWidth * DECISION_TEXT_WIDTH_SHARE) - WRAP_SLACK_PX;
+}
+var SIMPLE_FOLD_DEPTH = 3;
+var STEP_CATEGORY_BY_PIPE_TYPE = {
+  PipeLLM: STEP_CATEGORY.AI,
+  PipeStructure: STEP_CATEGORY.AI,
+  PipeJudge: STEP_CATEGORY.JUDGE,
+  PipeExtract: STEP_CATEGORY.EXTRACT,
+  PipeImgGen: STEP_CATEGORY.IMAGE,
+  PipeSearch: STEP_CATEGORY.SEARCH,
+  PipeFunc: STEP_CATEGORY.CODE,
+  PipeCompose: STEP_CATEGORY.TEMPLATE,
+  PipeDocGen: STEP_CATEGORY.DOCUMENT,
+  PipeSignature: STEP_CATEGORY.PLANNED,
+  PipeSequence: STEP_CATEGORY.STEPS,
+  PipeParallel: STEP_CATEGORY.PARALLEL,
+  PipeCondition: STEP_CATEGORY.DECISION,
+  PipeBatch: STEP_CATEGORY.REPEAT,
+  BindingStep: STEP_CATEGORY.PICK
+};
+var STEP_CATEGORY_WORDS = {
+  ai: "AI",
+  extract: "Extract",
+  image: "Image",
+  search: "Search",
+  code: "Code",
+  template: "Template",
+  document: "Document",
+  judge: "Judge",
+  planned: "To build",
+  steps: "Steps",
+  parallel: "Side by side",
+  decision: "Decision",
+  repeat: "For each",
+  pick: "Pick"
+};
+function simpleStepSize(title, options = {}) {
+  let width = SIMPLE_STEP_WIDTH;
+  let wrap = simpleTitleWrap(title);
+  if (wrap.clamped) {
+    const wide = simpleTitleWrap(title, SIMPLE_STEP_WIDE_WIDTH);
+    if (!wide.clamped) {
+      width = SIMPLE_STEP_WIDE_WIDTH;
+      wrap = wide;
+    }
+  }
+  let height = 2 * STEP_PADDING_Y + STEP_HEADER_HEIGHT + STEP_GAP + Math.max(1, wrap.drawnLines) * STEP_TITLE_LINE_HEIGHT;
+  if (options.forEach) height += STEP_GAP + STEP_MARKER_HEIGHT;
+  if (options.innerSteps) height += STEP_GAP + STEP_INNER_HEIGHT;
+  return { width, height: Math.ceil(height + 2 * STEP_BORDER) };
+}
+function simpleTerminalSize(title, hasSubtitle) {
+  const wrap = estimateWrap(
+    title,
+    TERMINAL_TITLE_WIDTH,
+    TERMINAL_TITLE_FONT_PX,
+    TERMINAL_TITLE_MAX_LINES
+  );
+  const height = TERMINAL_PADDING_TOP + Math.max(1, wrap.drawnLines) * TERMINAL_TITLE_LINE_HEIGHT + (hasSubtitle ? TERMINAL_SUBTITLE_HEIGHT : 0) + TERMINAL_PADDING_BOTTOM;
+  return { width: SIMPLE_TERMINAL_WIDTH, height: Math.max(TERMINAL_MIN_HEIGHT, height) };
+}
+function simpleDecisionSize(title) {
+  let width = SIMPLE_DECISION_WIDTHS[0];
+  let wrap = estimateWrap(
+    title,
+    decisionTextWidth(width),
+    DECISION_TITLE_FONT_PX,
+    SIMPLE_TITLE_MAX_LINES
+  );
+  for (const candidate of SIMPLE_DECISION_WIDTHS.slice(1)) {
+    if (!wrap.clamped) break;
+    width = candidate;
+    wrap = estimateWrap(
+      title,
+      decisionTextWidth(width),
+      DECISION_TITLE_FONT_PX,
+      SIMPLE_TITLE_MAX_LINES
+    );
+  }
+  const textHeight = Math.max(1, wrap.drawnLines) * DECISION_TITLE_LINE_HEIGHT;
+  const height = Math.max(DECISION_MIN_HEIGHT, Math.ceil(textHeight / DECISION_TEXT_HEIGHT_SHARE));
+  return { width, height };
+}
+function simpleTitleWrap(title, boxWidth = SIMPLE_STEP_WIDTH) {
+  return estimateWrap(
+    title,
+    stepTitleWidth(boxWidth),
+    SIMPLE_STEP_TITLE_FONT_PX,
+    SIMPLE_TITLE_MAX_LINES
+  );
+}
+var STATUS_PRECEDENCE = [
+  "failed",
+  "running",
+  "scheduled",
+  "canceled",
+  "skipped",
+  "succeeded"
+];
+function aggregateStatus(statuses) {
+  for (const status of STATUS_PRECEDENCE) {
+    if (statuses.includes(status)) return status;
+  }
+  return void 0;
+}
+function parentMap(containmentTree) {
+  const parentOf = {};
+  for (const [ctrlId, children] of Object.entries(containmentTree)) {
+    for (const child of children) parentOf[child] = ctrlId;
+  }
+  return parentOf;
+}
+function unique(items) {
+  return [...new Set(items)];
+}
+function batchRepresentatives(graphspec, analysis, drawability) {
+  var _a;
+  const specById = new Map(graphspec.nodes.map((n) => [n.id, n]));
+  const runsWithPath = /* @__PURE__ */ new Map();
+  const representativeOf = /* @__PURE__ */ new Map();
+  const order = [];
+  function visit(ids, parentPath, inBatch) {
+    var _a2, _b;
+    const seen = /* @__PURE__ */ new Map();
+    for (const id of ids) {
+      const spec = specById.get(id);
+      const pipe = spec ? stepIdentity(spec) : id;
+      const occurrence = (_a2 = seen.get(pipe)) != null ? _a2 : 0;
+      seen.set(pipe, occurrence + 1);
+      const path = `${parentPath}/${pipe}#${inBatch ? "*" : occurrence}`;
+      const runs = runsWithPath.get(path);
+      if (runs) runs.push(id);
+      else runsWithPath.set(path, [id]);
+      order.push(id);
+      visit((_b = analysis.containmentTree[id]) != null ? _b : [], path, (spec == null ? void 0 : spec.pipe_type) === "PipeBatch");
+    }
+  }
+  visit(
+    graphspec.nodes.filter((n) => !analysis.childNodeIds.has(n.id)).map((n) => n.id),
+    "",
+    false
+  );
+  for (const runs of runsWithPath.values()) {
+    if (runs.length < 2) continue;
+    const best = Math.max(...runs.map(drawability));
+    const representative = (_a = runs.find((id) => drawability(id) === best)) != null ? _a : runs[0];
+    for (const id of runs) if (id !== representative) representativeOf.set(id, representative);
+  }
+  return { representativeOf, order };
+}
+function stepIdentity(spec) {
+  var _a;
+  const ref = spec.domain_code && spec.pipe_code ? makePipeRef(spec.domain_code, spec.pipe_code) : (_a = spec.pipe_code) != null ? _a : spec.pipe_type;
+  return `${spec.kind}:${ref}`;
+}
+function forEachLabel(itemName) {
+  var _a;
+  const words = humanizeIdentifier(itemName);
+  const first = (_a = words.split(" ")[0]) != null ? _a : "";
+  const inSentence = first.length >= 2 && first === first.toUpperCase() ? words : words.charAt(0).toLowerCase() + words.slice(1);
+  return `For each ${inSentence}`;
+}
+function projectSimpleGraph(input) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { graphspec, nodes, analysis, rawAnalysis } = input;
+  const graphMode = graphSpecMode(graphspec);
+  const specById = new Map(graphspec.nodes.map((n) => [n.id, n]));
+  const cards = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    if (node.type === NODE_TYPE_PIPE_CARD) cards.set(node.id, node);
+  }
+  const liveControllers = analysis.controllerNodeIds;
+  const pipeTypeOf = (id) => {
+    var _a2;
+    return (_a2 = specById.get(id)) == null ? void 0 : _a2.pipe_type;
+  };
+  const { representativeOf, order } = batchRepresentatives(graphspec, rawAnalysis, (id) => {
+    var _a2;
+    if (liveControllers.has(id)) return 2;
+    const card = cards.get(id);
+    if (!card) return 0;
+    return card.data.isController !== true && ((_a2 = specById.get(id)) == null ? void 0 : _a2.kind) === "controller" ? 1 : 2;
+  });
+  const repOf = (id) => {
+    var _a2;
+    return (_a2 = representativeOf.get(id)) != null ? _a2 : id;
+  };
+  const parentOf = {};
+  for (const [id, parent] of Object.entries(parentMap(rawAnalysis.containmentTree))) {
+    parentOf[id] = repOf(parent);
+  }
+  const foldedAbove = /* @__PURE__ */ new Map();
+  for (const id of order) {
+    for (let current = parentOf[id]; current; current = parentOf[current]) {
+      if (((_a = cards.get(current)) == null ? void 0 : _a.data.isController) === true) {
+        foldedAbove.set(id, current);
+        break;
+      }
+    }
+  }
+  const drawnAs = (id) => {
+    var _a2;
+    return (_a2 = foldedAbove.get(id)) != null ? _a2 : repOf(id);
+  };
+  const hidden = /* @__PURE__ */ new Set([...representativeOf.keys(), ...foldedAbove.keys()]);
+  const childrenOf = {};
+  for (const id of order) {
+    const parent = parentOf[id];
+    if (parent && !hidden.has(id)) ((_b = childrenOf[parent]) != null ? _b : childrenOf[parent] = []).push(id);
+  }
+  function isInside(id, ancestorId) {
+    let current = parentOf[id];
+    while (current) {
+      if (current === ancestorId) return true;
+      current = parentOf[current];
+    }
+    return false;
+  }
+  const batchBranch = {};
+  for (const ctrlId of liveControllers) {
+    if (hidden.has(ctrlId) || pipeTypeOf(ctrlId) !== "PipeBatch") continue;
+    const first = (_c = analysis.containmentTree[ctrlId]) == null ? void 0 : _c[0];
+    if (first) batchBranch[ctrlId] = repOf(first);
+  }
+  const decisions = [...liveControllers].filter(
+    (id) => !hidden.has(id) && pipeTypeOf(id) === "PipeCondition"
+  );
+  const decisionSet = new Set(decisions);
+  const frameSet = new Set(
+    Object.entries(batchBranch).filter(([batchId, branchId]) => !hidden.has(batchId) && liveControllers.has(branchId)).map(([batchId]) => batchId)
+  );
+  const markedSteps = {};
+  for (const [batchId, branchId] of Object.entries(batchBranch)) {
+    if (!hidden.has(batchId) && cards.has(branchId)) markedSteps[branchId] = batchId;
+  }
+  const runStatuses = /* @__PURE__ */ new Map();
+  for (const spec of graphspec.nodes) {
+    const rep = repOf(spec.id);
+    const statuses = runStatuses.get(rep);
+    if (statuses) statuses.push(spec.status);
+    else runStatuses.set(rep, [spec.status]);
+  }
+  function stepStatus(spec) {
+    var _a2, _b2;
+    return (_b2 = aggregateStatus((_a2 = runStatuses.get(spec.id)) != null ? _a2 : [])) != null ? _b2 : spec.status;
+  }
+  const drawnSteps = [...cards.values()].filter(
+    (card) => {
+      var _a2;
+      return !hidden.has(card.id) && (card.data.pipeType !== BINDING_STEP_TYPE || aggregateStatus((_a2 = runStatuses.get(card.id)) != null ? _a2 : []) === "failed");
+    }
+  );
+  const drawnStepIds = new Set(drawnSteps.map((card) => card.id));
+  const roots = graphspec.nodes.filter(
+    (n) => !rawAnalysis.childNodeIds.has(n.id) && (n.kind === "controller" || n.kind === "operator")
+  );
+  const rootReads = new Set(roots.flatMap((r) => r.io.inputs.map((item) => item.digest)));
+  const rootWrites = new Set(roots.flatMap((r) => r.io.outputs.map((item) => item.digest)));
+  const inputItems = /* @__PURE__ */ new Map();
+  const outputItems = /* @__PURE__ */ new Map();
+  for (const root of roots) {
+    for (const item of root.io.inputs) {
+      if (!item.digest || inputItems.has(item.digest) || rootWrites.has(item.digest)) continue;
+      inputItems.set(item.digest, item);
+    }
+  }
+  for (const root of roots) {
+    for (const item of root.io.outputs) {
+      if (!item.digest || inputItems.has(item.digest) || outputItems.has(item.digest)) continue;
+      if (rootReads.has(item.digest)) continue;
+      outputItems.set(item.digest, item);
+    }
+  }
+  const combinedFrom = /* @__PURE__ */ new Map();
+  for (const edge of graphspec.edges) {
+    const from = edge.source_stuff_digest;
+    const into = edge.target_stuff_digest;
+    if (!from || !into || from === into) continue;
+    if (edge.kind !== "parallel_combine" && edge.kind !== "batch_aggregate" && edge.kind !== "batch_item") {
+      continue;
+    }
+    const list = combinedFrom.get(into);
+    if (list) list.push(from);
+    else combinedFrom.set(into, [from]);
+  }
+  const sourceMemo = /* @__PURE__ */ new Map();
+  function sourcesOf(digest, visiting = /* @__PURE__ */ new Set()) {
+    var _a2, _b2, _c2, _d2;
+    const memo = sourceMemo.get(digest);
+    if (memo) return memo;
+    if (inputItems.has(digest)) return [stuffNodeId(digest)];
+    if (visiting.has(digest)) return [];
+    visiting.add(digest);
+    const found = [];
+    const producers = (_a2 = analysis.stuffProducers[digest]) != null ? _a2 : [];
+    for (const producerId of producers) {
+      const card = cards.get(drawnAs(producerId));
+      if (!card) continue;
+      if (card.data.pipeType === BINDING_STEP_TYPE && !drawnStepIds.has(card.id)) {
+        for (const item of (_c2 = (_b2 = specById.get(producerId)) == null ? void 0 : _b2.io.inputs) != null ? _c2 : []) {
+          if (item.digest) found.push(...sourcesOf(item.digest, visiting));
+        }
+      } else {
+        found.push(card.id);
+      }
+    }
+    if (producers.length === 0) {
+      for (const from of (_d2 = combinedFrom.get(digest)) != null ? _d2 : []) found.push(...sourcesOf(from, visiting));
+    }
+    visiting.delete(digest);
+    const result = unique(found);
+    sourceMemo.set(digest, result);
+    return result;
+  }
+  function branchOf(decisionId, nodeId) {
+    let current = nodeId;
+    while (parentOf[current] && parentOf[current] !== decisionId) current = parentOf[current];
+    return current;
+  }
+  function outcomeFor(decisionId, branchId) {
+    var _a2;
+    const branch = specById.get(branchId);
+    const tagged = (_a2 = branch == null ? void 0 : branch.tags) == null ? void 0 : _a2.outcome;
+    if (tagged) return outcomeLabel(tagged);
+    const contains = graphspec.edges.find(
+      (e) => e.kind === "contains" && repOf(e.source) === decisionId && e.target === branchId && e.label
+    );
+    if (contains == null ? void 0 : contains.label) return outcomeLabel(contains.label);
+    const decision = specById.get(decisionId);
+    if (!(decision == null ? void 0 : decision.domain_code) || !decision.pipe_code || !(branch == null ? void 0 : branch.pipe_code)) return void 0;
+    const blueprint = getPipeBlueprint(
+      graphspec,
+      makePipeRef(decision.domain_code, decision.pipe_code)
+    );
+    if ((blueprint == null ? void 0 : blueprint.type) !== "PipeCondition") return void 0;
+    const conditionDomain = decision.domain_code;
+    const branchCode = branch.pipe_code;
+    function namesBranch(pipeRef) {
+      var _a3;
+      const parsed = parsePipeRef(pipeRef);
+      if (!parsed) return stripDomain(pipeRef) === branchCode;
+      if (parsed.pipeCode !== branchCode) return false;
+      const domain = (_a3 = parsed.domainPath) != null ? _a3 : conditionDomain;
+      return (branch == null ? void 0 : branch.domain_code) === void 0 || branch.domain_code === domain;
+    }
+    const outcomes = Object.entries(blueprint.outcome_map).filter(([, pipeRef]) => namesBranch(pipeRef)).map(([outcome]) => outcome);
+    if (blueprint.default_outcome && namesBranch(blueprint.default_outcome)) {
+      outcomes.push("default");
+    }
+    return outcomes.length > 0 ? outcomeLabel(outcomes.join("|")) : void 0;
+  }
+  function decisionsAbove(nodeId) {
+    const chain = [];
+    let current = parentOf[nodeId];
+    while (current) {
+      if (decisionSet.has(current)) chain.unshift(current);
+      current = parentOf[current];
+    }
+    return chain;
+  }
+  const edges = /* @__PURE__ */ new Map();
+  let edgeCount = 0;
+  function addEdge(source, target) {
+    if (source === target) return;
+    const key = `${source}->${target}`;
+    if (edges.has(key)) return;
+    const label = decisionSet.has(source) ? outcomeFor(source, branchOf(source, target)) : void 0;
+    edges.set(key, simpleEdge(`simple_edge_${edgeCount++}`, source, target, label));
+  }
+  function route(sources, target) {
+    let froms = [...sources];
+    for (const decisionId of decisionsAbove(target)) {
+      const outside = froms.filter((s) => !isInside(s, decisionId));
+      if (outside.length === 0) continue;
+      for (const source of outside) addEdge(source, decisionId);
+      froms = [decisionId, ...froms.filter((s) => isInside(s, decisionId))];
+    }
+    for (const source of froms) addEdge(source, target);
+  }
+  const danglingInputs = /* @__PURE__ */ new Map();
+  function sourcesOrDangling(digest) {
+    const sources = sourcesOf(digest);
+    if (sources.length > 0) return sources;
+    const entry = analysis.stuffRegistry[digest];
+    if (!entry) return [];
+    danglingInputs.set(digest, __spreadValues(__spreadValues({
+      name: entry.name,
+      digest
+    }, entry.concept !== void 0 ? { concept: entry.concept } : {}), entry.multiplicity !== void 0 ? { multiplicity: entry.multiplicity } : {}));
+    return [stuffNodeId(digest)];
+  }
+  function routeRead(digest, readerId) {
+    const target = drawnAs(readerId);
+    if (target === readerId) route(sourcesOrDangling(digest), target);
+    else route(sourcesOf(digest), target);
+  }
+  for (const [digest, consumers] of Object.entries(analysis.stuffConsumers)) {
+    for (const consumerId of consumers) {
+      if (drawnStepIds.has(drawnAs(consumerId))) routeRead(digest, consumerId);
+    }
+  }
+  for (const conditionId of liveControllers) {
+    if (!decisionSet.has(drawnAs(conditionId))) continue;
+    for (const item of (_e = (_d = specById.get(conditionId)) == null ? void 0 : _d.io.inputs) != null ? _e : []) {
+      if (item.digest) routeRead(item.digest, conditionId);
+    }
+  }
+  for (const digest of outputItems.keys()) {
+    for (const source of sourcesOf(digest)) addEdge(source, stuffNodeId(digest));
+  }
+  for (const [key, edge] of [...edges]) {
+    if (!decisionSet.has(edge.source)) continue;
+    const branchId = branchOf(edge.source, edge.target);
+    const followsInBranch = [...edges.values()].some(
+      (other) => other.target === edge.target && other.source !== edge.source && isInside(other.source, branchId)
+    );
+    if (followsInBranch) edges.delete(key);
+  }
+  function firstDrawnIn(id) {
+    var _a2;
+    if (drawnStepIds.has(id) || decisionSet.has(id)) return id;
+    for (const child of (_a2 = childrenOf[id]) != null ? _a2 : []) {
+      const found = firstDrawnIn(child);
+      if (found) return found;
+    }
+    return void 0;
+  }
+  for (const decisionId of decisions) {
+    for (const branchId of (_f = childrenOf[decisionId]) != null ? _f : []) {
+      const reached = [...edges.values()].some(
+        (e) => e.source === decisionId && (e.target === branchId || isInside(e.target, branchId))
+      );
+      const entry = reached ? void 0 : firstDrawnIn(branchId);
+      if (entry) addEdge(decisionId, entry);
+    }
+  }
+  const simpleNodes = [];
+  function isBuiltInConcept(conceptRef) {
+    const info = resolveConceptRef(graphspec, conceptRef);
+    if (info) return info.domain_code === NATIVE_DOMAIN;
+    return conceptRef.startsWith(`${NATIVE_DOMAIN}.`) || isGenericConcept(conceptRef);
+  }
+  function terminalNode(item, kind) {
+    const digest = item.digest;
+    const concept = item.concept;
+    const isList = isPluralMultiplicity(item.multiplicity);
+    let title;
+    let subtitle;
+    if (kind === "output" && concept && !isBuiltInConcept(concept)) {
+      title = conceptPlainName(concept);
+    } else {
+      title = humanizeIdentifier(item.name);
+      const plain = concept ? conceptPlainName(concept) : void 0;
+      subtitle = plain && plain.toLowerCase() !== title.toLowerCase() ? plain : void 0;
+    }
+    const simple = __spreadValues({ kind, title, isList }, subtitle ? { subtitle } : {});
+    return {
+      id: stuffNodeId(digest),
+      type: NODE_TYPE_SIMPLE_TERMINAL,
+      data: {
+        isPipe: false,
+        isStuff: true,
+        labelText: title,
+        stuffRole: kind,
+        stuffDigest: digest,
+        graphMode,
+        simple,
+        layoutSize: simpleTerminalSize(title, subtitle !== void 0)
+      },
+      position: { x: 0, y: 0 }
+    };
+  }
+  for (const item of [...inputItems.values(), ...danglingInputs.values()]) {
+    simpleNodes.push(terminalNode(item, "input"));
+  }
+  function itemName(batchId) {
+    var _a2, _b2, _c2, _d2;
+    const batch = specById.get(batchId);
+    if ((batch == null ? void 0 : batch.domain_code) && batch.pipe_code) {
+      const blueprint = getPipeBlueprint(
+        graphspec,
+        makePipeRef(batch.domain_code, batch.pipe_code)
+      );
+      if ((blueprint == null ? void 0 : blueprint.type) === "PipeBatch" && blueprint.batch_params.input_item_stuff_name) {
+        return blueprint.batch_params.input_item_stuff_name;
+      }
+    }
+    const runsOfBatch = /* @__PURE__ */ new Set([batchId]);
+    for (const [id, representative] of representativeOf) {
+      if (representative === batchId) runsOfBatch.add(id);
+    }
+    const itemEdges = graphspec.edges.filter(
+      (e) => e.kind === "batch_item" && runsOfBatch.has(e.source) && e.target_stuff_digest
+    );
+    const itemDigests = new Set(itemEdges.map((e) => e.target_stuff_digest));
+    const branchId = (_b2 = batchBranch[batchId]) != null ? _b2 : (_a2 = rawAnalysis.containmentTree[batchId]) == null ? void 0 : _a2[0];
+    const branch = branchId ? specById.get(branchId) : void 0;
+    const read = branch == null ? void 0 : branch.io.inputs.find((i) => itemDigests.has(i.digest));
+    if (read == null ? void 0 : read.name) return read.name;
+    const firstItem = (_c2 = itemEdges.find((e) => e.source === batchId)) != null ? _c2 : itemEdges[0];
+    return (firstItem == null ? void 0 : firstItem.target_stuff_digest) ? ((_d2 = analysis.stuffRegistry[firstItem.target_stuff_digest]) == null ? void 0 : _d2.name) || void 0 : void 0;
+  }
+  function stepsInside(id) {
+    var _a2;
+    const spec = specById.get(id);
+    const children = (_a2 = rawAnalysis.containmentTree[id]) != null ? _a2 : [];
+    if (children.length === 0) return spec && spec.kind === "operator" ? 1 : 0;
+    const counted = (spec == null ? void 0 : spec.pipe_type) === "PipeBatch" ? children.slice(0, 1) : children;
+    return counted.reduce((sum, child) => sum + stepsInside(child), 0);
+  }
+  function stepTitle(spec, folded) {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    if (spec.pipe_type === BINDING_STEP_TYPE) {
+      return humanizeIdentifier((_b2 = (_a2 = spec.pipe_code) == null ? void 0 : _a2.split(".").pop()) != null ? _b2 : "");
+    }
+    let source = spec;
+    if (folded && spec.pipe_type === "PipeBatch") {
+      const branch = specById.get((_d2 = (_c2 = rawAnalysis.containmentTree[spec.id]) == null ? void 0 : _c2[0]) != null ? _d2 : "");
+      if (branch) source = branch;
+    }
+    const described = sentenceCase((_e2 = source.description) != null ? _e2 : "");
+    return described || humanizeIdentifier((_f2 = source.pipe_code) != null ? _f2 : "");
+  }
+  const stepById = new Map(drawnSteps.map((card) => [card.id, card]));
+  for (const spec of graphspec.nodes) {
+    const card = stepById.get(spec.id);
+    if (card) {
+      const folded = card.data.isController === true;
+      const pipeType = spec.pipe_type;
+      const title = stepTitle(spec, folded);
+      const markerBatch = (_g = markedSteps[spec.id]) != null ? _g : folded && pipeType === "PipeBatch" ? spec.id : void 0;
+      const markerItem = markerBatch ? itemName(markerBatch) : void 0;
+      const forEach = markerBatch ? forEachLabel(markerItem || "item") : void 0;
+      const innerStepCount = folded ? stepsInside(spec.id) : void 0;
+      const onExpand = (_h = card.data.pipeCardData) == null ? void 0 : _h.onExpand;
+      const simple = __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+        kind: "step",
+        title,
+        category: STEP_CATEGORY_BY_PIPE_TYPE[pipeType],
+        status: stepStatus(spec)
+      }, graphMode !== void 0 ? { graphMode } : {}), forEach ? { forEach } : {}), innerStepCount !== void 0 ? { innerStepCount } : {}), onExpand ? { onExpand } : {});
+      simpleNodes.push({
+        id: spec.id,
+        type: NODE_TYPE_SIMPLE_STEP,
+        data: {
+          nodeData: spec,
+          isPipe: !folded,
+          isStuff: false,
+          isController: folded,
+          labelText: title,
+          pipeCode: spec.pipe_code,
+          pipeType: spec.pipe_type,
+          graphMode,
+          simple,
+          layoutSize: simpleStepSize(title, {
+            forEach: forEach !== void 0,
+            innerSteps: innerStepCount !== void 0
+          })
+        },
+        position: { x: 0, y: 0 }
+      });
+      continue;
+    }
+    if (decisionSet.has(spec.id)) {
+      const title = sentenceCase((_i = spec.description) != null ? _i : "") || humanizeIdentifier((_j = spec.pipe_code) != null ? _j : "");
+      simpleNodes.push({
+        id: spec.id,
+        type: NODE_TYPE_SIMPLE_DECISION,
+        data: {
+          nodeData: spec,
+          isPipe: false,
+          isStuff: false,
+          isController: true,
+          labelText: title,
+          pipeCode: spec.pipe_code,
+          pipeType: spec.pipe_type,
+          graphMode,
+          simple: __spreadValues({
+            kind: "decision",
+            title,
+            status: stepStatus(spec)
+          }, graphMode !== void 0 ? { graphMode } : {}),
+          layoutSize: simpleDecisionSize(title)
+        },
+        position: { x: 0, y: 0 }
+      });
+    }
+  }
+  for (const item of outputItems.values()) {
+    simpleNodes.push(terminalNode(item, "output"));
+  }
+  const nearestFrame = (id) => {
+    let current = parentOf[id];
+    while (current) {
+      if (frameSet.has(current)) return current;
+      current = parentOf[current];
+    }
+    return void 0;
+  };
+  const containmentTree = {};
+  for (const frameId of frameSet) containmentTree[frameId] = [];
+  for (const node of simpleNodes) {
+    const frameId = node.data.isStuff ? void 0 : nearestFrame(node.id);
+    if (frameId) containmentTree[frameId].push(node.id);
+  }
+  for (const frameId of frameSet) {
+    const outer = nearestFrame(frameId);
+    if (outer) containmentTree[outer].push(frameId);
+  }
+  const childNodeIds = new Set(Object.values(containmentTree).flat());
+  for (const frameId of frameSet) {
+    const spec = specById.get(frameId);
+    if (!spec) continue;
+    const title = forEachLabel(itemName(frameId) || "item");
+    simpleNodes.push({
+      id: frameId,
+      type: NODE_TYPE_SIMPLE_FRAME,
+      data: {
+        nodeData: spec,
+        isPipe: false,
+        isStuff: false,
+        isController: true,
+        labelText: title,
+        pipeCode: spec.pipe_code,
+        pipeType: spec.pipe_type,
+        graphMode,
+        simple: __spreadValues({
+          kind: "frame",
+          title,
+          status: stepStatus(spec)
+        }, graphMode !== void 0 ? { graphMode } : {})
+      },
+      position: { x: 0, y: 0 }
+    });
+  }
+  const drawnIds = new Set(simpleNodes.map((n) => n.id));
+  const standIns = /* @__PURE__ */ new Map();
+  const resolving = /* @__PURE__ */ new Set();
+  function standIn(id) {
+    var _a2, _b2, _c2, _d2, _e2;
+    if (drawnIds.has(id)) return id;
+    if (standIns.has(id)) return standIns.get(id);
+    if (resolving.has(id)) return void 0;
+    resolving.add(id);
+    let found;
+    const representative = (_a2 = foldedAbove.get(id)) != null ? _a2 : representativeOf.get(id);
+    const branch = batchBranch[id];
+    if (representative) {
+      found = standIn(representative);
+    } else if (branch && markedSteps[branch] === id) {
+      found = standIn(branch);
+    } else if (pipeTypeOf(id) === BINDING_STEP_TYPE) {
+      for (const item of (_c2 = (_b2 = specById.get(id)) == null ? void 0 : _b2.io.outputs) != null ? _c2 : []) {
+        if (!item.digest) continue;
+        for (const reader of (_d2 = rawAnalysis.stuffConsumers[item.digest]) != null ? _d2 : []) {
+          found != null ? found : found = standIn(reader);
+        }
+        if (!found && drawnIds.has(stuffNodeId(item.digest))) found = stuffNodeId(item.digest);
+        if (found) break;
+      }
+      const parent = parentOf[id];
+      if (!found && parent) found = standIn(parent);
+    } else {
+      for (const child of (_e2 = childrenOf[id]) != null ? _e2 : []) {
+        found = standIn(child);
+        if (found) break;
+      }
+    }
+    resolving.delete(id);
+    if (found) standIns.set(id, found);
+    return found;
+  }
+  for (const spec of graphspec.nodes) standIn(spec.id);
+  return {
+    nodes: simpleNodes,
+    edges: [...edges.values()],
+    standIns,
+    analysis: {
+      stuffRegistry: analysis.stuffRegistry,
+      stuffProducers: {},
+      stuffConsumers: {},
+      controllerNodeIds: frameSet,
+      childNodeIds,
+      containmentTree
+    }
+  };
+}
+function simpleEdgeLabelSize(label) {
+  const [padX, padY] = EDGE_LABEL_PADDING;
+  return {
+    width: Math.ceil(textWidthPx(label, EDGE_LABEL_FONT_PX)) + 2 * padX,
+    height: EDGE_LABEL_LINE_HEIGHT + 2 * padY
+  };
+}
+function simpleEdge(id, source, target, label) {
+  const edge = {
+    id,
+    source,
+    target,
+    type: EDGE_TYPE_ROUTED,
+    animated: false,
+    style: { stroke: "var(--color-edge)", strokeWidth: 1.5 },
+    markerEnd: { type: ARROW_CLOSED_MARKER, color: "var(--color-edge)" }
+  };
+  if (label) {
+    edge.label = label;
+    edge.labelStyle = {
+      fontSize: `${EDGE_LABEL_FONT_PX}px`,
+      fontFamily: "var(--font-sans)",
+      fontWeight: 600,
+      fill: "var(--ctrl-condition-text)"
+    };
+    edge.labelBgStyle = { fill: "var(--color-bg)", fillOpacity: 0.92 };
+    edge.labelBgPadding = [...EDGE_LABEL_PADDING];
+    edge.labelBgBorderRadius = 4;
+    edge.labelSize = simpleEdgeLabelSize(label);
+  }
+  return edge;
+}
+function simpleDefaultFolds(graphspec, rawAnalysis) {
+  const parentOf = parentMap(rawAnalysis.containmentTree);
+  const sequenceIds = new Set(
+    graphspec.nodes.filter((n) => n.pipe_type === "PipeSequence").map((n) => n.id)
+  );
+  const folded = /* @__PURE__ */ new Set();
+  for (const ctrlId of rawAnalysis.controllerNodeIds) {
+    let depth = 0;
+    let current = parentOf[ctrlId];
+    while (current) {
+      depth += 1;
+      current = parentOf[current];
+    }
+    if (depth >= SIMPLE_FOLD_DEPTH && sequenceIds.has(ctrlId)) folded.add(ctrlId);
+  }
+  return folded;
+}
+function applySimpleFrames(args) {
+  const { nodes, edges, graphspec, analysis, controllerPositions, onToggleFold } = args;
+  const placeholders = /* @__PURE__ */ new Map();
+  const content = [];
+  for (const node of nodes) {
+    if (node.type === NODE_TYPE_SIMPLE_FRAME) placeholders.set(node.id, node);
+    else content.push(node);
+  }
+  if (analysis.controllerNodeIds.size === 0) return { nodes: content, edges };
+  const groups = buildControllerNodes(graphspec, analysis, content, controllerPositions);
+  const frames = groups.map((group) => {
+    var _a;
+    const placeholder = placeholders.get(group.id);
+    const id = group.id;
+    const simple = placeholder == null ? void 0 : placeholder.data.simple;
+    const withFold = (simple == null ? void 0 : simple.kind) === "frame" && onToggleFold ? __spreadProps(__spreadValues({}, simple), { onFold: (options) => onToggleFold(id, options) }) : simple;
+    return __spreadProps(__spreadValues({}, group), {
+      type: NODE_TYPE_SIMPLE_FRAME,
+      data: __spreadProps(__spreadValues({}, (_a = placeholder == null ? void 0 : placeholder.data) != null ? _a : group.data), { simple: withFold })
+    });
+  });
+  return { nodes: sortParentsFirst([...frames, ...content]), edges };
 }
 
+// src/graph/styles/stylePipelines.ts
+var GRAPH_STYLE_PIPELINES = {
+  // Today's drawing: the dataflow graph as built, framed by controller groups
+  // when the viewer shows them.
+  [GRAPH_STYLE.DETAILED]: {
+    defaultFolds: () => /* @__PURE__ */ new Set(),
+    project: ({ nodes, edges, analysis }) => ({ nodes, edges, analysis }),
+    frame: (args) => applyControllers(
+      args.nodes,
+      args.edges,
+      args.graphspec,
+      args.analysis,
+      args.showControllers,
+      args.expandedControllers,
+      args.onToggleCollapse,
+      args.controllerPositions,
+      args.onToggleFold
+    )
+  },
+  [GRAPH_STYLE.SIMPLE]: {
+    defaultFolds: simpleDefaultFolds,
+    project: ({ graphspec, nodes, analysis, rawAnalysis }) => analysis && rawAnalysis ? projectSimpleGraph({ graphspec, nodes, analysis, rawAnalysis }) : { nodes: [], edges: [], analysis: null },
+    // Its frames are its own decision, whatever the controllers toggle says.
+    frame: (args) => args.graphspec && args.analysis ? applySimpleFrames({
+      nodes: args.nodes,
+      edges: args.edges,
+      graphspec: args.graphspec,
+      analysis: args.analysis,
+      controllerPositions: args.controllerPositions,
+      onToggleFold: args.onToggleFold
+    }) : { nodes: args.nodes, edges: args.edges }
+  }
+};
+
 export {
   GraphSpecValidationError,
   validateGraphSpec,
@@ -1705,9 +2938,49 @@ export {
   estimateNodeDimensions,
   buildElkGraph,
   extractAbsolutePositions,
+  extractEdgeRoutes,
   getLayoutedElements,
+  ROUTE_ENDPOINT_TOLERANCE_PX,
+  ROUTE_CORNER_RADIUS_PX,
+  fitRoute,
+  roundedPolylinePath,
+  polylineMidpoint,
+  routeLabelCenter,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   buildControllerNodes,
-  applyControllers
+  applyControllers,
+  sortParentsFirst,
+  GRAPH_STYLES,
+  GRAPH_STYLE_IDS,
+  isGraphStyleId,
+  resolveGraphStyle,
+  resolveStyleMenu,
+  stripDomain,
+  humanizeIdentifier,
+  conceptPlainName,
+  isGenericConcept,
+  sentenceCase,
+  outcomeLabel,
+  textWidthPx,
+  estimateWrap,
+  SIMPLE_STEP_WIDTH,
+  SIMPLE_STEP_WIDE_WIDTH,
+  SIMPLE_STEP_TITLE_FONT_PX,
+  SIMPLE_TITLE_MAX_LINES,
+  SIMPLE_TERMINAL_WIDTH,
+  SIMPLE_DECISION_WIDTHS,
+  SIMPLE_FOLD_DEPTH,
+  STEP_CATEGORY_BY_PIPE_TYPE,
+  STEP_CATEGORY_WORDS,
+  simpleStepSize,
+  simpleTerminalSize,
+  simpleDecisionSize,
+  simpleTitleWrap,
+  aggregateStatus,
+  projectSimpleGraph,
+  simpleEdgeLabelSize,
+  simpleDefaultFolds,
+  applySimpleFrames,
+  GRAPH_STYLE_PIPELINES
 };
-//# sourceMappingURL=chunk-ZTXSDTVF.js.map
+//# sourceMappingURL=chunk-3BXB6HSF.js.map