@pipelex/mthds-ui 0.29.0 → 0.30.0

package/dist/graph/react/index.js

@@ -1,7 +1,9 @@
 "use client";
 import {
+  GRAPH_STYLES,
+  GRAPH_STYLE_PIPELINES,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
-  applyControllers,
+  STEP_CATEGORY_WORDS,
   applyFolds,
   applyValidationDecorations,
   buildChildToControllerMap,
@@ -9,27 +11,38 @@ import {
   buildValidationDecorations,
   findCousinControllers,
   findStuffByDigest,
+  fitRoute,
   getLayoutedElements,
   getPipeBlueprint,
   resolveConceptRef,
+  resolveGraphStyle,
   resolveIssueTargetNodeId,
+  resolveStyleMenu,
+  roundedPolylinePath,
+  routeLabelCenter,
   validateGraphSpec
-} from "../../chunk-ZTXSDTVF.js";
+} from "../../chunk-3BXB6HSF.js";
 import {
   parsePipeRef
 } from "../../chunk-2N65P32H.js";
 import {
   DEFAULT_GRAPH_CONFIG,
   getPaletteForTheme
-} from "../../chunk-Y46574OW.js";
+} from "../../chunk-GAOBB3UT.js";
 import {
   BINDING_STEP_TYPE,
   EDGE_TYPE,
+  EDGE_TYPE_ROUTED,
   FOLD_MODE,
   GRAPH_DIRECTION,
   GRAPH_SPEC_MODE,
+  GRAPH_STYLE,
   GRAPH_THEME,
   GRAPH_THEME_MODE,
+  NODE_TYPE_SIMPLE_DECISION,
+  NODE_TYPE_SIMPLE_FRAME,
+  NODE_TYPE_SIMPLE_STEP,
+  NODE_TYPE_SIMPLE_TERMINAL,
   TOOLBAR_POSITION,
   VALIDATION_STATE,
   graphSpecMode,
@@ -42,7 +55,7 @@ import {
   stuffDigestFromId,
   toolbarOrientation,
   toolbarSide
-} from "../../chunk-3I3ZPYMW.js";
+} from "../../chunk-PJTYQURQ.js";
 import {
   __spreadProps,
   __spreadValues
@@ -52,9 +65,10 @@ import {
 import "./graph-core.css";
 import "./detail/DetailPanel.css";
 import "./viewer/GraphToolbar.css";
+import "./styles/simple/SimpleStyle.css";
 
 // src/graph/react/viewer/GraphViewer.tsx
-import React10 from "react";
+import React12 from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -1508,7 +1522,7 @@ function toAppNodes(nodes) {
   }));
 }
 function toAppEdges(edges) {
-  return edges.map((e) => ({
+  return edges.map((e) => __spreadValues({
     id: e.id,
     source: e.source,
     target: e.target,
@@ -1521,7 +1535,7 @@ function toAppEdges(edges) {
     labelBgBorderRadius: e.labelBgBorderRadius,
     style: e.style,
     markerEnd: e.markerEnd
-  }));
+  }, e.route ? { data: { route: e.route } } : {}));
 }
 
 // src/graph/react/viewer/renderLabel.tsx
@@ -1623,7 +1637,7 @@ function hydrateLabels(nodes) {
 }
 
 // src/graph/react/viewer/GraphToolbar.tsx
-import React8 from "react";
+import React10 from "react";
 import { Panel } from "@xyflow/react";
 
 // src/graph/react/viewer/ValidationPanel.tsx
@@ -1742,10 +1756,194 @@ function ValidationPanel({
   );
 }
 
+// src/graph/react/viewer/StyleMenu.tsx
+import React9 from "react";
+
+// src/graph/react/viewer/usePopoverDismiss.ts
+import React8 from "react";
+function usePopoverDismiss(open, wrapperRef, onDismiss) {
+  const onDismissRef = React8.useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  React8.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const wrapper = wrapperRef.current;
+      if (wrapper && event.target instanceof Node && !wrapper.contains(event.target)) {
+        onDismissRef.current("outside");
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onDismissRef.current("escape");
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, wrapperRef]);
+}
+
+// src/graph/react/viewer/StyleMenu.tsx
+import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+var ICON_PROPS = {
+  viewBox: "0 0 24 24",
+  width: 14,
+  height: 14,
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var STYLE_ICONS = {
+  // Cards with their rows: every pipe with its slots.
+  [GRAPH_STYLE.DETAILED]: /* @__PURE__ */ jsxs20("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: [
+    /* @__PURE__ */ jsx20("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx20("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx20("line", { x1: "14", y1: "4", x2: "21", y2: "4" }),
+    /* @__PURE__ */ jsx20("line", { x1: "14", y1: "9", x2: "21", y2: "9" }),
+    /* @__PURE__ */ jsx20("line", { x1: "14", y1: "15", x2: "21", y2: "15" }),
+    /* @__PURE__ */ jsx20("line", { x1: "14", y1: "20", x2: "21", y2: "20" })
+  ] })),
+  // Two steps and the arrow between them: a flowchart.
+  [GRAPH_STYLE.SIMPLE]: /* @__PURE__ */ jsxs20("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: [
+    /* @__PURE__ */ jsx20("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2" }),
+    /* @__PURE__ */ jsx20("path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx20("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2" })
+  ] }))
+};
+var CHECK_ICON2 = /* @__PURE__ */ jsx20("svg", __spreadProps(__spreadValues({}, ICON_PROPS), { children: /* @__PURE__ */ jsx20("polyline", { points: "20 6 9 17 4 12" }) }));
+function graphStyleIcon(style) {
+  return STYLE_ICONS[style];
+}
+function styleMenuLabel(style) {
+  return `Graph style: ${GRAPH_STYLES[style].name} \u2014 choose how the graph is drawn`;
+}
+function StyleMenu({ value, options, onChange, placement }) {
+  const [open, setOpen] = React9.useState(false);
+  const [activeIndex, setActiveIndex] = React9.useState(0);
+  const wrapperRef = React9.useRef(null);
+  const buttonRef = React9.useRef(null);
+  const itemRefs = React9.useRef([]);
+  const menuId = React9.useId();
+  usePopoverDismiss(open, wrapperRef, (reason) => {
+    var _a;
+    setOpen(false);
+    if (reason === "escape") (_a = buttonRef.current) == null ? void 0 : _a.focus();
+  });
+  React9.useEffect(() => {
+    var _a;
+    if (!open) return;
+    const index = Math.max(0, options.indexOf(value));
+    setActiveIndex(index);
+    (_a = itemRefs.current[index]) == null ? void 0 : _a.focus();
+  }, [open]);
+  const focusItem = (index) => {
+    var _a;
+    const count = options.length;
+    const next = (index % count + count) % count;
+    setActiveIndex(next);
+    (_a = itemRefs.current[next]) == null ? void 0 : _a.focus();
+  };
+  const onMenuKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        focusItem(activeIndex + 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        focusItem(activeIndex - 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        focusItem(0);
+        break;
+      case "End":
+        event.preventDefault();
+        focusItem(options.length - 1);
+        break;
+      case "Tab":
+        setOpen(false);
+        break;
+      default:
+        break;
+    }
+  };
+  const choose = (style) => {
+    var _a;
+    setOpen(false);
+    (_a = buttonRef.current) == null ? void 0 : _a.focus();
+    if (style !== value) onChange(style);
+  };
+  const label = styleMenuLabel(value);
+  return /* @__PURE__ */ jsxs20("div", { className: "graph-toolbar-style", ref: wrapperRef, children: [
+    /* @__PURE__ */ jsx20(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        className: `graph-toolbar-btn${open ? " graph-toolbar-btn--open" : ""}`,
+        onClick: () => setOpen(!open),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            setOpen(true);
+          }
+        },
+        title: label,
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        children: graphStyleIcon(value)
+      }
+    ),
+    open && /* @__PURE__ */ jsx20(
+      "div",
+      {
+        id: menuId,
+        role: "menu",
+        "aria-label": "Graph style",
+        className: `graph-style-menu graph-style-menu--${placement}`,
+        onKeyDown: onMenuKeyDown,
+        children: options.map((style, index) => {
+          const descriptor = GRAPH_STYLES[style];
+          const checked = style === value;
+          return /* @__PURE__ */ jsxs20(
+            "button",
+            {
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": checked,
+              tabIndex: index === activeIndex ? 0 : -1,
+              className: `graph-style-menu-item${checked ? " graph-style-menu-item--checked" : ""}`,
+              onClick: () => choose(style),
+              children: [
+                /* @__PURE__ */ jsx20("span", { className: "graph-style-menu-icon", "aria-hidden": "true", children: graphStyleIcon(style) }),
+                /* @__PURE__ */ jsxs20("span", { className: "graph-style-menu-text", children: [
+                  /* @__PURE__ */ jsx20("span", { className: "graph-style-menu-name", children: descriptor.name }),
+                  /* @__PURE__ */ jsx20("span", { className: "graph-style-menu-description", children: descriptor.description })
+                ] }),
+                /* @__PURE__ */ jsx20("span", { className: "graph-style-menu-check", "aria-hidden": "true", children: checked ? CHECK_ICON2 : null })
+              ]
+            },
+            style
+          );
+        })
+      }
+    )
+  ] });
+}
+
 // src/graph/react/viewer/GraphToolbar.tsx
-import { Fragment as Fragment12, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 var REACTFLOW_PANEL_MARGIN = 15;
-var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs20(
+var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1757,12 +1955,12 @@ var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx20("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-      /* @__PURE__ */ jsx20("polyline", { points: "12 5 19 12 12 19" })
+      /* @__PURE__ */ jsx21("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "12 5 19 12 12 19" })
     ]
   }
 );
-var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs20(
+var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1774,12 +1972,12 @@ var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx20("polyline", { points: "19 12 12 19 5 12" })
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "19 12 12 19 5 12" })
     ]
   }
 );
-var MINUS_ICON = /* @__PURE__ */ jsx20(
+var MINUS_ICON = /* @__PURE__ */ jsx21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1790,10 +1988,10 @@ var MINUS_ICON = /* @__PURE__ */ jsx20(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx20("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    children: /* @__PURE__ */ jsx21("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   }
 );
-var PLUS_ICON = /* @__PURE__ */ jsxs20(
+var PLUS_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1805,12 +2003,12 @@ var PLUS_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx20("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx20("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx21("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
     ]
   }
 );
-var FIT_VIEW_ICON = /* @__PURE__ */ jsxs20(
+var FIT_VIEW_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1822,14 +2020,14 @@ var FIT_VIEW_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("polyline", { points: "15 3 21 3 21 9" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "9 21 3 21 3 15" }),
+      /* @__PURE__ */ jsx21("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+      /* @__PURE__ */ jsx21("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
     ]
   }
 );
-var BOXES_ICON = /* @__PURE__ */ jsxs20(
+var BOXES_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1841,22 +2039,22 @@ var BOXES_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
+      /* @__PURE__ */ jsx21("path", { d: "m7 16.5-4.74-2.85" }),
+      /* @__PURE__ */ jsx21("path", { d: "m7 16.5 5-3" }),
+      /* @__PURE__ */ jsx21("path", { d: "M7 16.5v5.17" }),
+      /* @__PURE__ */ jsx21("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
+      /* @__PURE__ */ jsx21("path", { d: "m17 16.5-5-3" }),
+      /* @__PURE__ */ jsx21("path", { d: "m17 16.5 4.74-2.85" }),
+      /* @__PURE__ */ jsx21("path", { d: "M17 16.5v5.17" }),
+      /* @__PURE__ */ jsx21("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
+      /* @__PURE__ */ jsx21("path", { d: "M12 8 7.26 5.15" }),
+      /* @__PURE__ */ jsx21("path", { d: "m12 8 4.74-2.85" }),
+      /* @__PURE__ */ jsx21("path", { d: "M12 13.5V8" })
     ]
   }
 );
-var FOLD_ALL_ICON = /* @__PURE__ */ jsxs20(
+var FOLD_ALL_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1868,15 +2066,15 @@ var FOLD_ALL_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "2 2 6 6 2 6" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "22 2 18 6 22 6" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "2 22 6 18 2 18" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "22 22 18 18 22 18" })
     ]
   }
 );
-var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs20(
+var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1888,15 +2086,15 @@ var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "3 3 7 7 3 7" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "21 3 17 7 21 7" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "3 21 7 17 3 17" }),
+      /* @__PURE__ */ jsx21("polyline", { points: "21 21 17 17 21 17" })
     ]
   }
 );
-var SUN_ICON = /* @__PURE__ */ jsxs20(
+var SUN_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1908,19 +2106,19 @@ var SUN_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
+      /* @__PURE__ */ jsx21("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
+      /* @__PURE__ */ jsx21("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
+      /* @__PURE__ */ jsx21("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
+      /* @__PURE__ */ jsx21("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx21("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
+      /* @__PURE__ */ jsx21("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
     ]
   }
 );
-var MOON_ICON = /* @__PURE__ */ jsx20(
+var MOON_ICON = /* @__PURE__ */ jsx21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1931,10 +2129,10 @@ var MOON_ICON = /* @__PURE__ */ jsx20(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx20("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    children: /* @__PURE__ */ jsx21("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
   }
 );
-var MONITOR_ICON = /* @__PURE__ */ jsxs20(
+var MONITOR_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1946,13 +2144,13 @@ var MONITOR_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx21("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
     ]
   }
 );
-var SPINNER_ICON = /* @__PURE__ */ jsx20(
+var SPINNER_ICON = /* @__PURE__ */ jsx21(
   "svg",
   {
     className: "graph-toolbar-validation-spin",
@@ -1964,10 +2162,10 @@ var SPINNER_ICON = /* @__PURE__ */ jsx20(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx20("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    children: /* @__PURE__ */ jsx21("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
   }
 );
-var CHECK_ICON2 = /* @__PURE__ */ jsx20(
+var CHECK_ICON3 = /* @__PURE__ */ jsx21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1978,10 +2176,10 @@ var CHECK_ICON2 = /* @__PURE__ */ jsx20(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx20("polyline", { points: "20 6 9 17 4 12" })
+    children: /* @__PURE__ */ jsx21("polyline", { points: "20 6 9 17 4 12" })
   }
 );
-var X_CIRCLE_ICON = /* @__PURE__ */ jsxs20(
+var X_CIRCLE_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1993,13 +2191,13 @@ var X_CIRCLE_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx21("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+      /* @__PURE__ */ jsx21("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
     ]
   }
 );
-var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs20(
+var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2011,13 +2209,13 @@ var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
 );
-var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs20(
+var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2029,9 +2227,9 @@ var INFO_CIRCLE_ICON = /* @__PURE__ */ jsxs20(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__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" })
+      /* @__PURE__ */ jsx21("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
     ]
   }
 );
@@ -2040,7 +2238,7 @@ function validationIcon(state) {
     case VALIDATION_STATE.VALIDATING:
       return SPINNER_ICON;
     case VALIDATION_STATE.VALID:
-      return CHECK_ICON2;
+      return CHECK_ICON3;
     case VALIDATION_STATE.INVALID:
       return X_CIRCLE_ICON;
     case VALIDATION_STATE.ERROR:
@@ -2081,6 +2279,9 @@ function GraphToolbar({
   onDirectionChange,
   showControllers,
   onShowControllersChange,
+  graphStyle,
+  styleMenuOptions = [],
+  onGraphStyleChange,
   onZoomIn,
   onZoomOut,
   onFitView,
@@ -2102,31 +2303,15 @@ function GraphToolbar({
   const orientation = toolbarOrientation(position);
   const setValidationOpen = onValidationOpenChange != null ? onValidationOpenChange : (() => {
   });
-  const setValidationOpenRef = React8.useRef(setValidationOpen);
+  const setValidationOpenRef = React10.useRef(setValidationOpen);
   setValidationOpenRef.current = setValidationOpen;
-  const validationRef = React8.useRef(null);
-  const validationPanelId = React8.useId();
-  React8.useEffect(() => {
+  const validationRef = React10.useRef(null);
+  const validationPanelId = React10.useId();
+  React10.useEffect(() => {
     if (validationState === void 0) setValidationOpenRef.current(false);
   }, [validationState]);
-  React8.useEffect(() => {
-    if (!validationOpen) return;
-    const onPointerDown = (event) => {
-      const wrapper = validationRef.current;
-      if (wrapper && event.target instanceof Node && !wrapper.contains(event.target)) {
-        setValidationOpenRef.current(false);
-      }
-    };
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") setValidationOpenRef.current(false);
-    };
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [validationOpen]);
+  usePopoverDismiss(validationOpen, validationRef, () => setValidationOpenRef.current(false));
+  const styleMenuEnabled = graphStyle !== void 0 && onGraphStyleChange !== void 0 && styleMenuOptions.length >= 2;
   const dodgesDetailPanel = toolbarSide(position) === "right" && rightOffset > 0;
   const panelStyle = dodgesDetailPanel ? { marginRight: REACTFLOW_PANEL_MARGIN + rightOffset } : void 0;
   const isVertical = direction === GRAPH_DIRECTION.TB || direction === GRAPH_DIRECTION.BT;
@@ -2135,10 +2320,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__ */ 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(
+  return /* @__PURE__ */ jsx21(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs21("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
+    validationState !== void 0 && /* @__PURE__ */ jsxs21(Fragment12, { children: [
+      /* @__PURE__ */ jsxs21("div", { className: "graph-toolbar-validation", ref: validationRef, children: [
+        /* @__PURE__ */ jsxs21(
           "button",
           {
             type: "button",
@@ -2151,11 +2336,11 @@ function GraphToolbar({
             "aria-controls": validationPanelId,
             children: [
               validationIcon(validationState),
-              validationIssues.length > 0 && /* @__PURE__ */ jsx20("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
+              validationIssues.length > 0 && /* @__PURE__ */ jsx21("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
             ]
           }
         ),
-        validationOpen && /* @__PURE__ */ jsx20(
+        validationOpen && /* @__PURE__ */ jsx21(
           ValidationPanel,
           {
             id: validationPanelId,
@@ -2166,9 +2351,21 @@ function GraphToolbar({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx20("div", { className: "graph-toolbar-separator" })
+      /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" })
+    ] }),
+    styleMenuEnabled && /* @__PURE__ */ jsxs21(Fragment12, { children: [
+      /* @__PURE__ */ jsx21(
+        StyleMenu,
+        {
+          value: graphStyle,
+          options: styleMenuOptions,
+          onChange: onGraphStyleChange,
+          placement: validationPanelPlacement(position)
+        }
+      ),
+      /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" })
     ] }),
-    onFoldAll && /* @__PURE__ */ jsx20(
+    onFoldAll && /* @__PURE__ */ jsx21(
       "button",
       {
         type: "button",
@@ -2180,7 +2377,7 @@ function GraphToolbar({
         children: FOLD_ALL_ICON
       }
     ),
-    onExpandAll && /* @__PURE__ */ jsx20(
+    onExpandAll && /* @__PURE__ */ jsx21(
       "button",
       {
         type: "button",
@@ -2192,8 +2389,8 @@ function GraphToolbar({
         children: EXPAND_ALL_ICON
       }
     ),
-    foldAllSection && /* @__PURE__ */ jsx20("div", { className: "graph-toolbar-separator" }),
-    /* @__PURE__ */ jsx20(
+    foldAllSection && /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" }),
+    onShowControllersChange && /* @__PURE__ */ jsx21(
       "button",
       {
         type: "button",
@@ -2204,7 +2401,7 @@ function GraphToolbar({
         children: BOXES_ICON
       }
     ),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       "button",
       {
         type: "button",
@@ -2215,8 +2412,8 @@ function GraphToolbar({
         children: isVertical ? ARROW_RIGHT_ICON : ARROW_DOWN_ICON
       }
     ),
-    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx20("div", { className: "graph-toolbar-separator" }),
-    onZoomOut && /* @__PURE__ */ jsx20(
+    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" }),
+    onZoomOut && /* @__PURE__ */ jsx21(
       "button",
       {
         type: "button",
@@ -2227,7 +2424,7 @@ function GraphToolbar({
         children: MINUS_ICON
       }
     ),
-    onZoomIn && /* @__PURE__ */ jsx20(
+    onZoomIn && /* @__PURE__ */ jsx21(
       "button",
       {
         type: "button",
@@ -2238,7 +2435,7 @@ function GraphToolbar({
         children: PLUS_ICON
       }
     ),
-    onFitView && /* @__PURE__ */ jsx20(
+    onFitView && /* @__PURE__ */ jsx21(
       "button",
       {
         type: "button",
@@ -2249,9 +2446,9 @@ function GraphToolbar({
         children: FIT_VIEW_ICON
       }
     ),
-    themeToggleEnabled && /* @__PURE__ */ jsxs20(Fragment12, { children: [
-      /* @__PURE__ */ jsx20("div", { className: "graph-toolbar-separator" }),
-      /* @__PURE__ */ jsx20(
+    themeToggleEnabled && /* @__PURE__ */ jsxs21(Fragment12, { children: [
+      /* @__PURE__ */ jsx21("div", { className: "graph-toolbar-separator" }),
+      /* @__PURE__ */ jsx21(
         "button",
         {
           type: "button",
@@ -2267,7 +2464,7 @@ function GraphToolbar({
 }
 
 // src/graph/react/nodes/NodeValidationBadge.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function NodeValidationBadge({
   validation,
   onClick
@@ -2277,9 +2474,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__ */ jsx21("span", { className, title: tooltip, "aria-label": label, children: text });
+    return /* @__PURE__ */ jsx22("span", { className, title: tooltip, "aria-label": label, children: text });
   }
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "button",
     {
       type: "button",
@@ -2299,7 +2496,7 @@ function validationRingClass(validation) {
 }
 
 // src/graph/react/nodes/controller/ControllerGroupNode.tsx
-import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var CONTROLLER_CONFIG = {
   PipeSequence: { badge: "Sequence", icon: "\u2192" },
   PipeParallel: { badge: "Parallel", icon: "//" },
@@ -2321,12 +2518,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__ */ 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(
+  return /* @__PURE__ */ jsxs22("div", { className: `controller-group-node ${modifier}${validationRingClass(data.validation)}`, children: [
+    /* @__PURE__ */ jsxs22("div", { className: "controller-group-header", children: [
+      /* @__PURE__ */ jsx23("span", { className: "controller-group-icon", children: config.icon }),
+      /* @__PURE__ */ jsx23("span", { className: "controller-group-badge", children: config.badge }),
+      data.label && /* @__PURE__ */ jsx23("span", { className: "controller-group-label", children: data.label }),
+      data.onToggleFold && /* @__PURE__ */ jsx23(
         "button",
         {
           type: "button",
@@ -2341,9 +2538,9 @@ function ControllerGroupNode({ data }) {
           children: "\u2921"
         }
       ),
-      data.validation && /* @__PURE__ */ jsx22(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
+      data.validation && /* @__PURE__ */ jsx23(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
     ] }),
-    isCollapsible && /* @__PURE__ */ jsx22(
+    isCollapsible && /* @__PURE__ */ jsx23(
       "button",
       {
         className: "controller-group-collapse",
@@ -2364,7 +2561,7 @@ import { Handle, Position } from "@xyflow/react";
 
 // src/graph/react/nodes/pipe/PipeCardBase.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES2 = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -2425,21 +2622,21 @@ function PipeCardBase({ data, children }) {
   const staticClass = isStatic ? " pipe-card--static" : "";
   const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : isSignature ? "pipe-card-badge pipe-card-badge--signature" : isBinding ? "pipe-card-badge pipe-card-badge--binding" : "pipe-card-badge";
   const ringClass = validationRingClass(data.validation);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: `pipe-card ${dirClass}${controllerClass}${signatureClass}${bindingClass}${staticClass}${ringClass}`,
       children: [
-        /* @__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(
+        /* @__PURE__ */ jsxs23("div", { className: "pipe-card-header", children: [
+          /* @__PURE__ */ jsx24("span", { className: badgeClass, children: badge }),
+          /* @__PURE__ */ jsx24("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
+          !isStatic && /* @__PURE__ */ jsx24(
             "span",
             {
               className: "pipe-card-status",
               style: { color: statusConfig.color },
               title: statusConfig.label,
-              children: /* @__PURE__ */ jsx23(
+              children: /* @__PURE__ */ jsx24(
                 "span",
                 {
                   className: `pipe-card-status-dot ${isRunning ? "pipe-card-status-dot--pulse" : ""}`,
@@ -2448,7 +2645,7 @@ function PipeCardBase({ data, children }) {
               )
             }
           ),
-          data.onExpand && /* @__PURE__ */ jsx23(
+          data.onExpand && /* @__PURE__ */ jsx24(
             "button",
             {
               type: "button",
@@ -2463,32 +2660,32 @@ function PipeCardBase({ data, children }) {
               children: "\u2922"
             }
           ),
-          data.validation && /* @__PURE__ */ jsx23(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
+          data.validation && /* @__PURE__ */ jsx24(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
         ] }),
-        (outcome || batchMultiplicity) && /* @__PURE__ */ jsxs22("div", { className: "pipe-card-annotations", children: [
-          outcome && /* @__PURE__ */ jsxs22("span", { className: "pipe-card-annotation pipe-card-annotation--outcome", children: [
+        (outcome || batchMultiplicity) && /* @__PURE__ */ jsxs23("div", { className: "pipe-card-annotations", children: [
+          outcome && /* @__PURE__ */ jsxs23("span", { className: "pipe-card-annotation pipe-card-annotation--outcome", children: [
             "outcome: ",
             outcome
           ] }),
-          batchMultiplicity && /* @__PURE__ */ jsx23("span", { className: "pipe-card-annotation pipe-card-annotation--batch", children: batchMultiplicity })
+          batchMultiplicity && /* @__PURE__ */ jsx24("span", { className: "pipe-card-annotation pipe-card-annotation--batch", children: batchMultiplicity })
         ] }),
-        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(
+        data.description && /* @__PURE__ */ jsx24("span", { className: "pipe-card-description", title: data.description, children: data.description }),
+        data.inputs.length > 0 && /* @__PURE__ */ jsxs23("div", { className: "pipe-card-io", children: [
+          /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-label", children: "INPUTS" }),
+          /* @__PURE__ */ jsxs23("div", { className: "pipe-card-io-pills", children: [
+            visibleInputs.map((input) => /* @__PURE__ */ jsxs23(
               "span",
               {
                 className: "pipe-card-io-pill",
                 title: `${input.name}: ${input.concept}`,
                 children: [
-                  /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-pill-name", children: input.name }),
-                  /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-pill-concept", children: input.concept })
+                  /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-pill-name", children: input.name }),
+                  /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-pill-concept", children: input.concept })
                 ]
               },
               input.name
             )),
-            hasMany && /* @__PURE__ */ jsx23(
+            hasMany && /* @__PURE__ */ jsx24(
               "button",
               {
                 className: "pipe-card-io-more",
@@ -2501,16 +2698,16 @@ function PipeCardBase({ data, children }) {
             )
           ] })
         ] }),
-        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(
+        data.outputs.length > 0 && /* @__PURE__ */ jsxs23("div", { className: "pipe-card-io", children: [
+          /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
+          /* @__PURE__ */ jsx24("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs23(
             "span",
             {
               className: "pipe-card-io-pill",
               title: `${output.name}: ${output.concept}`,
               children: [
-                /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-pill-name", children: output.name }),
-                /* @__PURE__ */ jsx23("span", { className: "pipe-card-io-pill-concept", children: output.concept })
+                /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-pill-name", children: output.name }),
+                /* @__PURE__ */ jsx24("span", { className: "pipe-card-io-pill-concept", children: output.concept })
               ]
             },
             output.name
@@ -2545,11 +2742,11 @@ function getPipeCardComponent(pipeType) {
 }
 
 // src/graph/react/nodes/pipe/PipeCardNode.tsx
-import { Fragment as Fragment13, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function PipeCardNode({ data }) {
   var _a;
   const Card = (_a = getPipeCardComponent(data.pipeType)) != null ? _a : PipeCardBase;
-  return /* @__PURE__ */ jsx24(Card, { data });
+  return /* @__PURE__ */ jsx25(Card, { data });
 }
 function PipeCardRFNode({
   data,
@@ -2558,18 +2755,358 @@ function PipeCardRFNode({
 }) {
   const payload = data.pipeCardData;
   if (!payload) return null;
-  return /* @__PURE__ */ jsxs23(Fragment13, { children: [
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: targetPosition }),
-    /* @__PURE__ */ jsx24(PipeCardNode, { data: payload }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: sourcePosition })
+  return /* @__PURE__ */ jsxs24(Fragment13, { children: [
+    /* @__PURE__ */ jsx25(Handle, { type: "target", position: targetPosition }),
+    /* @__PURE__ */ jsx25(PipeCardNode, { data: payload }),
+    /* @__PURE__ */ jsx25(Handle, { type: "source", position: sourcePosition })
   ] });
 }
 
+// src/graph/react/styles/simple/SimpleNodes.tsx
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { Fragment as Fragment14, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+var ICON_PROPS2 = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+function Icon({ size = 13, children }) {
+  return /* @__PURE__ */ jsx26("svg", __spreadProps(__spreadValues({}, ICON_PROPS2), { width: size, height: size, children }));
+}
+var CATEGORY_ICONS = {
+  ai: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("path", { d: "M9.94 15.5a2 2 0 0 0-1.44-1.44l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0l1.58 6.14a2 2 0 0 0 1.44 1.44l6.14 1.58a.5.5 0 0 1 0 .96l-6.14 1.58a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z" }),
+    /* @__PURE__ */ jsx26("path", { d: "M20 3v4" }),
+    /* @__PURE__ */ jsx26("path", { d: "M22 5h-4" })
+  ] }),
+  extract: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+    /* @__PURE__ */ jsx26("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+    /* @__PURE__ */ jsx26("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+    /* @__PURE__ */ jsx26("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
+    /* @__PURE__ */ jsx26("path", { d: "M7 8h8" }),
+    /* @__PURE__ */ jsx26("path", { d: "M7 12h10" }),
+    /* @__PURE__ */ jsx26("path", { d: "M7 16h6" })
+  ] }),
+  image: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx26("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx26("path", { d: "m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21" })
+  ] }),
+  search: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx26("path", { d: "m21 21-4.3-4.3" })
+  ] }),
+  code: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("polyline", { points: "16 18 22 12 16 6" }),
+    /* @__PURE__ */ jsx26("polyline", { points: "8 6 2 12 8 18" })
+  ] }),
+  template: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx26("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx26("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ jsx26("path", { d: "M16 17H8" })
+  ] }),
+  document: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx26("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx26("path", { d: "M12 18v-6" }),
+    /* @__PURE__ */ jsx26("path", { d: "m9 15 3 3 3-3" })
+  ] }),
+  judge: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx26("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx26("path", { d: "M7 21h10" }),
+    /* @__PURE__ */ jsx26("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ jsx26("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
+  ] }),
+  planned: /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "12", r: "9", strokeDasharray: "3 3" }),
+  steps: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("path", { d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" }),
+    /* @__PURE__ */ jsx26("path", { d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" }),
+    /* @__PURE__ */ jsx26("path", { d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" })
+  ] }),
+  parallel: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("path", { d: "M16 3h5v5" }),
+    /* @__PURE__ */ jsx26("path", { d: "M8 3H3v5" }),
+    /* @__PURE__ */ jsx26("path", { d: "M12 22v-8.3a4 4 0 0 0-1.17-2.87L3 3" }),
+    /* @__PURE__ */ jsx26("path", { d: "m15 9 6-6" })
+  ] }),
+  decision: /* @__PURE__ */ jsx26("path", { d: "M12 2 22 12 12 22 2 12Z" }),
+  repeat: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("path", { d: "m17 2 4 4-4 4" }),
+    /* @__PURE__ */ jsx26("path", { d: "M3 11v-1a4 4 0 0 1 4-4h14" }),
+    /* @__PURE__ */ jsx26("path", { d: "m7 22-4-4 4-4" }),
+    /* @__PURE__ */ jsx26("path", { d: "M21 13v1a4 4 0 0 1-4 4H3" })
+  ] }),
+  pick: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("polyline", { points: "15 10 20 15 15 20" }),
+    /* @__PURE__ */ jsx26("path", { d: "M4 4v7a4 4 0 0 0 4 4h12" })
+  ] })
+};
+var EXPAND_ICON2 = /* @__PURE__ */ jsxs25(Icon, { size: 12, children: [
+  /* @__PURE__ */ jsx26("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx26("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ jsx26("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  /* @__PURE__ */ jsx26("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+] });
+var COLLAPSE_ICON2 = /* @__PURE__ */ jsxs25(Icon, { size: 12, children: [
+  /* @__PURE__ */ jsx26("polyline", { points: "4 14 10 14 10 20" }),
+  /* @__PURE__ */ jsx26("polyline", { points: "20 10 14 10 14 4" }),
+  /* @__PURE__ */ jsx26("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+  /* @__PURE__ */ jsx26("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+] });
+var STATUS_LABELS = {
+  succeeded: "Done",
+  failed: "Failed",
+  running: "Running",
+  scheduled: "Waiting",
+  skipped: "Skipped",
+  canceled: "Canceled"
+};
+var STATUS_ICONS = {
+  succeeded: /* @__PURE__ */ jsx26("polyline", { points: "20 6 9 17 4 12" }),
+  failed: /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx26("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] }),
+  running: /* @__PURE__ */ jsx26("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }),
+  scheduled: /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "12", r: "8" }),
+  skipped: /* @__PURE__ */ jsx26("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+  canceled: /* @__PURE__ */ jsx26("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+};
+function StatusMark({ status, graphMode }) {
+  if (graphMode === "static") return null;
+  return /* @__PURE__ */ jsx26(
+    "span",
+    {
+      className: `simple-status simple-status--${status}`,
+      title: STATUS_LABELS[status],
+      "aria-label": STATUS_LABELS[status],
+      children: /* @__PURE__ */ jsx26(Icon, { size: 11, children: STATUS_ICONS[status] })
+    }
+  );
+}
+function Handles({
+  sourcePosition = Position2.Right,
+  targetPosition = Position2.Left,
+  children
+}) {
+  return /* @__PURE__ */ jsxs25(Fragment14, { children: [
+    /* @__PURE__ */ jsx26(Handle2, { type: "target", position: targetPosition, className: "simple-handle" }),
+    children,
+    /* @__PURE__ */ jsx26(Handle2, { type: "source", position: sourcePosition, className: "simple-handle" })
+  ] });
+}
+function ValidationMark({
+  validation,
+  onClick
+}) {
+  return validation ? /* @__PURE__ */ jsx26(NodeValidationBadge, { validation, onClick }) : null;
+}
+function payloadOf(data, kinds) {
+  const simple = data.simple;
+  if (!simple || !kinds.includes(simple.kind)) return null;
+  return simple;
+}
+function SimpleStepNode({ data, sourcePosition, targetPosition }) {
+  const step = payloadOf(data, ["step"]);
+  if (!step) return null;
+  const statusClass = step.graphMode !== "static" ? ` simple-step--${step.status}` : "";
+  return /* @__PURE__ */ jsx26(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      className: `simple-step simple-step--${step.category}${statusClass}${validationRingClass(data.validation)}`,
+      children: [
+        /* @__PURE__ */ jsxs25("div", { className: "simple-step-header", children: [
+          /* @__PURE__ */ jsxs25("span", { className: "simple-step-category", children: [
+            /* @__PURE__ */ jsx26(Icon, { children: CATEGORY_ICONS[step.category] }),
+            STEP_CATEGORY_WORDS[step.category]
+          ] }),
+          /* @__PURE__ */ jsx26(StatusMark, { status: step.status, graphMode: step.graphMode }),
+          /* @__PURE__ */ jsx26(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick })
+        ] }),
+        /* @__PURE__ */ jsx26("div", { className: "simple-step-title", title: step.title, children: step.title }),
+        step.forEach && /* @__PURE__ */ jsxs25("span", { className: "simple-step-foreach", children: [
+          /* @__PURE__ */ jsx26(Icon, { size: 11, children: CATEGORY_ICONS.repeat }),
+          step.forEach
+        ] }),
+        step.innerStepCount !== void 0 && /* @__PURE__ */ jsxs25(
+          "button",
+          {
+            type: "button",
+            className: "simple-step-open",
+            title: "Show the steps inside (alt/option: only this one)",
+            onClick: (event) => {
+              var _a;
+              event.stopPropagation();
+              (_a = step.onExpand) == null ? void 0 : _a.call(step, { soloMode: event.altKey });
+            },
+            disabled: !step.onExpand,
+            children: [
+              EXPAND_ICON2,
+              step.innerStepCount === 1 ? "1 step inside" : `${step.innerStepCount} steps inside`
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+var DOCUMENT_PATH = "M1 1 H99 V84 C80 98 62 74 44 86 C28 96 14 96 1 88 Z";
+function DocumentShape({ className }) {
+  return /* @__PURE__ */ jsx26("svg", { className, viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx26("path", { d: DOCUMENT_PATH, vectorEffect: "non-scaling-stroke" }) });
+}
+function SimpleTerminalNode({ data, sourcePosition, targetPosition }) {
+  const terminal = payloadOf(data, ["input", "output"]);
+  if (!terminal) return null;
+  return /* @__PURE__ */ jsx26(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      className: `simple-terminal simple-terminal--${terminal.kind}${terminal.isList ? " simple-terminal--list" : ""}`,
+      children: [
+        terminal.isList && /* @__PURE__ */ jsxs25(Fragment14, { children: [
+          /* @__PURE__ */ jsx26(DocumentShape, { className: "simple-terminal-shape simple-terminal-shape--back2" }),
+          /* @__PURE__ */ jsx26(DocumentShape, { className: "simple-terminal-shape simple-terminal-shape--back1" })
+        ] }),
+        /* @__PURE__ */ jsx26(DocumentShape, { className: "simple-terminal-shape" }),
+        /* @__PURE__ */ jsxs25("div", { className: "simple-terminal-text", children: [
+          /* @__PURE__ */ jsx26("span", { className: "simple-terminal-title", title: terminal.title, children: terminal.title }),
+          terminal.subtitle && /* @__PURE__ */ jsx26("span", { className: "simple-terminal-subtitle", children: terminal.subtitle })
+        ] })
+      ]
+    }
+  ) });
+}
+function SimpleDecisionNode({ data, sourcePosition, targetPosition }) {
+  const decision = payloadOf(data, ["decision"]);
+  if (!decision) return null;
+  const statusClass = decision.graphMode !== "static" ? ` simple-decision--${decision.status}` : "";
+  return /* @__PURE__ */ jsx26(Handles, { sourcePosition, targetPosition, children: /* @__PURE__ */ jsxs25("div", { className: `simple-decision${statusClass}${validationRingClass(data.validation)}`, children: [
+    /* @__PURE__ */ jsx26(
+      "svg",
+      {
+        className: "simple-decision-shape",
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "none",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx26("path", { d: "M50 1 L99 50 L50 99 L1 50 Z", vectorEffect: "non-scaling-stroke" })
+      }
+    ),
+    /* @__PURE__ */ jsx26("div", { className: "simple-decision-text", title: decision.title, children: decision.title }),
+    /* @__PURE__ */ jsxs25("div", { className: "simple-decision-marks", children: [
+      /* @__PURE__ */ jsx26(StatusMark, { status: decision.status, graphMode: decision.graphMode }),
+      /* @__PURE__ */ jsx26(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick })
+    ] })
+  ] }) });
+}
+function SimpleFrameNode({ data }) {
+  const frame = payloadOf(data, ["frame"]);
+  if (!frame) return null;
+  return /* @__PURE__ */ jsx26("div", { className: `simple-frame${validationRingClass(data.validation)}`, children: /* @__PURE__ */ jsxs25("div", { className: "simple-frame-header", children: [
+    /* @__PURE__ */ jsxs25("span", { className: "simple-frame-title", children: [
+      /* @__PURE__ */ jsx26(Icon, { size: 12, children: CATEGORY_ICONS.repeat }),
+      frame.title
+    ] }),
+    /* @__PURE__ */ jsx26(StatusMark, { status: frame.status, graphMode: frame.graphMode }),
+    /* @__PURE__ */ jsx26(ValidationMark, { validation: data.validation, onClick: data.onValidationBadgeClick }),
+    frame.onFold && /* @__PURE__ */ jsx26(
+      "button",
+      {
+        type: "button",
+        className: "simple-frame-fold",
+        title: "Fold into one step (alt/option: only this one)",
+        "aria-label": "Fold into one step",
+        onClick: (event) => {
+          var _a;
+          event.stopPropagation();
+          (_a = frame.onFold) == null ? void 0 : _a.call(frame, { soloMode: event.altKey });
+        },
+        children: COLLAPSE_ICON2
+      }
+    )
+  ] }) });
+}
+var simpleNodeTypes = {
+  [NODE_TYPE_SIMPLE_STEP]: SimpleStepNode,
+  [NODE_TYPE_SIMPLE_TERMINAL]: SimpleTerminalNode,
+  [NODE_TYPE_SIMPLE_DECISION]: SimpleDecisionNode,
+  [NODE_TYPE_SIMPLE_FRAME]: SimpleFrameNode
+};
+
+// src/graph/react/edges/RoutedEdge.tsx
+import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function RoutedEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  label,
+  labelStyle,
+  labelShowBg,
+  labelBgStyle,
+  labelBgPadding,
+  labelBgBorderRadius,
+  style,
+  markerEnd,
+  markerStart,
+  interactionWidth
+}) {
+  const route = data == null ? void 0 : data.route;
+  const fitted = route ? fitRoute(route.points, { x: sourceX, y: sourceY }, { x: targetX, y: targetY }) : null;
+  let path;
+  let labelX;
+  let labelY;
+  if (route && fitted) {
+    path = roundedPolylinePath(fitted);
+    ({ x: labelX, y: labelY } = routeLabelCenter(route, fitted));
+  } else {
+    [path, labelX, labelY] = getSmoothStepPath({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      borderRadius: 8
+    });
+  }
+  return /* @__PURE__ */ jsx27(
+    BaseEdge,
+    {
+      id,
+      path,
+      labelX,
+      labelY,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      interactionWidth
+    }
+  );
+}
+
 // src/graph/react/viewer/GraphViewer.tsx
-import { Fragment as Fragment14, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
-var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
+import { Fragment as Fragment15, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+var nodeTypes = __spreadValues(__spreadProps(__spreadValues({}, controllerNodeTypes), {
   pipeCard: PipeCardRFNode
-});
+}), simpleNodeTypes);
+var edgeTypes = { [EDGE_TYPE_ROUTED]: RoutedEdge };
 function StuffNodeDetail({
   nodeId,
   stuffData,
@@ -2587,7 +3124,7 @@ function StuffNodeDetail({
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
   const isDryRun = graphSpecMode(graphspec) === GRAPH_SPEC_MODE.DRY;
   const descriptors = resultDescriptors(artifacts);
-  const renderData = descriptors ? () => /* @__PURE__ */ jsx25(
+  const renderData = descriptors ? () => /* @__PURE__ */ jsx28(
     StuffResultPanel,
     __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, descriptors), {
       stuff: stuffData
@@ -2596,7 +3133,7 @@ function StuffNodeDetail({
     })
   ) : void 0;
   if (conceptInfo) {
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx28(
       ConceptDetailPanel,
       {
         concept: conceptInfo,
@@ -2607,8 +3144,8 @@ function StuffNodeDetail({
       }
     );
   }
-  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" }) });
+  if (isDryRun) return /* @__PURE__ */ jsx28("div", { className: "detail-not-available", children: "Dry run data hidden" });
+  return /* @__PURE__ */ jsx28(Fragment15, { children: (_a = renderData == null ? void 0 : renderData()) != null ? _a : /* @__PURE__ */ jsx28("div", { className: "detail-not-available", children: "No data" }) });
 }
 function seedFoldedControllers(mode, controllerIds) {
   if (mode === FOLD_MODE.FOLDED) return new Set(controllerIds);
@@ -2635,10 +3172,16 @@ function cloneCachedNodes(nodes) {
     style: n.style ? __spreadValues({}, n.style) : void 0
   }));
 }
+function nodeRunStatus(data) {
+  var _a;
+  const simple = data.simple;
+  if (simple) return "status" in simple ? simple.status : void 0;
+  return (_a = data.pipeCardData) == null ? void 0 : _a.status;
+}
 function applyStatusOverrides(nodes, statusMap) {
   if (!statusMap || Object.keys(statusMap).length === 0) return nodes;
   return nodes.map((node) => {
-    var _a, _b;
+    var _a;
     if (node.data.graphMode === "static" || ((_a = node.data.pipeCardData) == null ? void 0 : _a.graphMode) === "static") {
       return node;
     }
@@ -2646,17 +3189,20 @@ function applyStatusOverrides(nodes, statusMap) {
     const pipeCode = node.data.pipeCode;
     if (!pipeCode || !Object.hasOwn(statusMap, pipeCode)) return node;
     const newStatus = statusMap[pipeCode];
-    if (((_b = node.data.pipeCardData) == null ? void 0 : _b.status) === newStatus) return node;
+    const simple = node.data.simple;
+    const simpleWithStatus = simple && "status" in simple ? simple : void 0;
+    if (nodeRunStatus(node.data) === newStatus) return node;
     return __spreadProps(__spreadValues({}, node), {
       data: __spreadProps(__spreadValues({}, node.data), {
         nodeData: node.data.nodeData ? __spreadProps(__spreadValues({}, node.data.nodeData), { status: newStatus }) : node.data.nodeData,
-        pipeCardData: node.data.pipeCardData ? __spreadProps(__spreadValues({}, node.data.pipeCardData), { status: newStatus }) : node.data.pipeCardData
+        pipeCardData: node.data.pipeCardData ? __spreadProps(__spreadValues({}, node.data.pipeCardData), { status: newStatus }) : node.data.pipeCardData,
+        simple: simpleWithStatus ? __spreadProps(__spreadValues({}, simpleWithStatus), { status: newStatus }) : simple
       })
     });
   });
 }
 function GraphViewer(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const {
     graph,
     config = DEFAULT_GRAPH_CONFIG,
@@ -2665,6 +3211,9 @@ function GraphViewer(props) {
     initialFoldMode,
     hideToolbar = false,
     theme: themeProp,
+    graphStyle: graphStyleProp,
+    onGraphStyleChange,
+    styleMenu,
     toolbarPosition: toolbarPositionProp,
     systemTheme: systemThemeProp,
     showThemeToggle = true,
@@ -2685,20 +3234,20 @@ function GraphViewer(props) {
     onValidationIssueClick
   } = props;
   const graphspecProp = (_a = graph == null ? void 0 : graph.graphSpec) != null ? _a : null;
-  const graphspec = React10.useMemo(
+  const graphspec = React12.useMemo(
     () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
     [graphspecProp]
   );
-  const [direction, setDirection] = React10.useState(
+  const [direction, setDirection] = React12.useState(
     () => {
       var _a2, _b2;
       return (_b2 = (_a2 = initialDirection != null ? initialDirection : config.direction) != null ? _a2 : DEFAULT_GRAPH_CONFIG.direction) != null ? _b2 : GRAPH_DIRECTION.TB;
     }
   );
   const externalMode = resolveExternalThemeMode(themeProp, config.theme);
-  const [mode, setMode] = React10.useState(externalMode);
-  const prevExternalModeRef = React10.useRef(externalMode);
-  React10.useEffect(() => {
+  const [mode, setMode] = React12.useState(externalMode);
+  const prevExternalModeRef = React12.useRef(externalMode);
+  React12.useEffect(() => {
     if (externalMode !== prevExternalModeRef.current) {
       prevExternalModeRef.current = externalMode;
       setMode(externalMode);
@@ -2706,13 +3255,13 @@ function GraphViewer(props) {
   }, [externalMode]);
   const systemTheme = useSystemTheme(systemThemeProp);
   const resolvedTheme = resolveActiveTheme(mode, systemTheme);
-  const onThemeChangeRef = React10.useRef(onThemeChange);
+  const onThemeChangeRef = React12.useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
-  const prevReportedRef = React10.useRef({
+  const prevReportedRef = React12.useRef({
     mode,
     resolvedTheme
   });
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     var _a2;
     const prev = prevReportedRef.current;
     if (prev.mode !== mode || prev.resolvedTheme !== resolvedTheme) {
@@ -2720,27 +3269,49 @@ function GraphViewer(props) {
       (_a2 = onThemeChangeRef.current) == null ? void 0 : _a2.call(onThemeChangeRef, mode, resolvedTheme);
     }
   }, [mode, resolvedTheme]);
+  const externalStyle = resolveGraphStyle(graphStyleProp, config.graphStyle);
+  const [graphStyle, setGraphStyle] = React12.useState(externalStyle);
+  const prevExternalStyleRef = React12.useRef(externalStyle);
+  React12.useEffect(() => {
+    if (externalStyle !== prevExternalStyleRef.current) {
+      prevExternalStyleRef.current = externalStyle;
+      setGraphStyle(externalStyle);
+    }
+  }, [externalStyle]);
+  const onGraphStyleChangeRef = React12.useRef(onGraphStyleChange);
+  onGraphStyleChangeRef.current = onGraphStyleChange;
+  const prevReportedStyleRef = React12.useRef(graphStyle);
+  React12.useEffect(() => {
+    var _a2;
+    if (prevReportedStyleRef.current !== graphStyle) {
+      prevReportedStyleRef.current = graphStyle;
+      (_a2 = onGraphStyleChangeRef.current) == null ? void 0 : _a2.call(onGraphStyleChangeRef, graphStyle);
+    }
+  }, [graphStyle]);
+  const graphStyleRef = React12.useRef(graphStyle);
+  graphStyleRef.current = graphStyle;
+  const styleCapabilities = GRAPH_STYLES[graphStyle].capabilities;
   const effectiveFoldMode = (_c = (_b = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _b : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _c : FOLD_MODE.EXPANDED;
-  const [showControllers, setShowControllers] = React10.useState(() => {
+  const [showControllers, setShowControllers] = React12.useState(() => {
     var _a2, _b2;
     if (effectiveFoldMode === FOLD_MODE.FOLDED) return true;
     return (_b2 = (_a2 = initialShowControllers != null ? initialShowControllers : config.showControllers) != null ? _a2 : DEFAULT_GRAPH_CONFIG.showControllers) != null ? _b2 : false;
   });
-  const foldModeRef = React10.useRef(effectiveFoldMode);
+  const foldModeRef = React12.useRef(effectiveFoldMode);
   foldModeRef.current = effectiveFoldMode;
-  const containerRef = React10.useRef(null);
-  const [detailSelection, setDetailSelection] = React10.useState(null);
-  const [conceptOverride, setConceptOverride] = React10.useState(null);
+  const containerRef = React12.useRef(null);
+  const [detailSelection, setDetailSelection] = React12.useState(null);
+  const [conceptOverride, setConceptOverride] = React12.useState(null);
   const {
     width: panelWidth,
     isDragging: isPanelDragging,
     handleMouseDown: onResizeMouseDown
   } = useResizable({ defaultWidth: 380, minWidth: 280, maxWidth: 800, containerRef });
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     setDetailSelection(null);
     setConceptOverride(null);
   }, [graphspec]);
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const themePalette = getPaletteForTheme(resolvedTheme);
@@ -2757,12 +3328,12 @@ function GraphViewer(props) {
   }, [config.paletteColors, resolvedTheme]);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowRef = React10.useRef(null);
-  const initialDataRef = React10.useRef(null);
-  const rawGraphDataRef = React10.useRef(null);
-  const layoutCacheRef = React10.useRef(null);
-  const [expandedControllers, setExpandedControllers] = React10.useState(/* @__PURE__ */ new Set());
-  const toggleCollapse = React10.useCallback((controllerId) => {
+  const reactFlowRef = React12.useRef(null);
+  const initialDataRef = React12.useRef(null);
+  const rawGraphDataRef = React12.useRef(null);
+  const layoutCacheRef = React12.useRef(null);
+  const [expandedControllers, setExpandedControllers] = React12.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = React12.useCallback((controllerId) => {
     setExpandedControllers((prev) => {
       const next = new Set(prev);
       if (next.has(controllerId)) next.delete(controllerId);
@@ -2770,87 +3341,124 @@ function GraphViewer(props) {
       return next;
     });
   }, []);
-  const [foldedControllers, setFoldedControllers] = React10.useState(/* @__PURE__ */ new Set());
-  const toggleFold = React10.useCallback((controllerId, options) => {
-    setFoldedControllers((prev) => {
-      const next = new Set(prev);
-      const shouldFold = !next.has(controllerId);
-      const raw = rawGraphDataRef.current;
-      const targets = !(options == null ? void 0 : options.soloMode) && (raw == null ? void 0 : raw.graphspec) && raw.analysis ? findCousinControllers(controllerId, raw.graphspec, raw.analysis.controllerNodeIds) : /* @__PURE__ */ new Set([controllerId]);
-      for (const id of targets) {
-        if (shouldFold) next.add(id);
-        else next.delete(id);
-      }
-      return next;
-    });
+  const [foldedControllers, setFoldedControllers] = React12.useState(/* @__PURE__ */ new Set());
+  const styleDefaultFoldsRef = React12.useRef(/* @__PURE__ */ new Set());
+  const readerOpenedRef = React12.useRef(/* @__PURE__ */ new Set());
+  const markReaderFolds = React12.useCallback((ids, folded) => {
+    for (const id of ids) {
+      styleDefaultFoldsRef.current.delete(id);
+      if (folded) readerOpenedRef.current.delete(id);
+      else readerOpenedRef.current.add(id);
+    }
   }, []);
+  const toggleFold = React12.useCallback(
+    (controllerId, options) => {
+      setFoldedControllers((prev) => {
+        const next = new Set(prev);
+        const shouldFold = !next.has(controllerId);
+        const raw = rawGraphDataRef.current;
+        const targets = !(options == null ? void 0 : options.soloMode) && (raw == null ? void 0 : raw.graphspec) && raw.analysis ? findCousinControllers(controllerId, raw.graphspec, raw.analysis.controllerNodeIds) : /* @__PURE__ */ new Set([controllerId]);
+        for (const id of targets) {
+          if (shouldFold) next.add(id);
+          else next.delete(id);
+        }
+        markReaderFolds(targets, shouldFold);
+        return next;
+      });
+    },
+    [markReaderFolds]
+  );
   const edgeType = config.edgeType || EDGE_TYPE.DEFAULT;
-  const layoutConfig = React10.useMemo(
+  const layoutConfig = React12.useMemo(
     () => ({ nodesep: config.nodesep, ranksep: config.ranksep }),
     [config.nodesep, config.ranksep]
   );
-  const showControllersRef = React10.useRef(showControllers);
+  const showControllersRef = React12.useRef(showControllers);
   showControllersRef.current = showControllers;
-  const directionRef = React10.useRef(direction);
+  const directionRef = React12.useRef(direction);
   directionRef.current = direction;
-  const layoutConfigRef = React10.useRef(layoutConfig);
+  const layoutConfigRef = React12.useRef(layoutConfig);
   layoutConfigRef.current = layoutConfig;
-  const initialZoomRef = React10.useRef(config.initialZoom);
+  const initialZoomRef = React12.useRef(config.initialZoom);
   initialZoomRef.current = config.initialZoom;
-  const panToTopRef = React10.useRef(config.panToTop);
+  const panToTopRef = React12.useRef(config.panToTop);
   panToTopRef.current = config.panToTop;
-  const expandedRef = React10.useRef(expandedControllers);
+  const expandedRef = React12.useRef(expandedControllers);
   expandedRef.current = expandedControllers;
-  const toggleCollapseRef = React10.useRef(toggleCollapse);
+  const toggleCollapseRef = React12.useRef(toggleCollapse);
   toggleCollapseRef.current = toggleCollapse;
-  const foldedRef = React10.useRef(foldedControllers);
+  const foldedRef = React12.useRef(foldedControllers);
   foldedRef.current = foldedControllers;
-  const toggleFoldRef = React10.useRef(toggleFold);
+  const toggleFoldRef = React12.useRef(toggleFold);
   toggleFoldRef.current = toggleFold;
-  const isFirstFoldEffect = React10.useRef(true);
-  const prevFoldSizeRef = React10.useRef(0);
-  const skipNextFoldEffectRef = React10.useRef(false);
-  const statusMapRef = React10.useRef(statusMap);
+  const isFirstFoldEffect = React12.useRef(true);
+  const prevFoldSizeRef = React12.useRef(0);
+  const skipNextFoldEffectRef = React12.useRef(false);
+  const statusMapRef = React12.useRef(statusMap);
   statusMapRef.current = statusMap;
-  const validationIssuesRef = React10.useRef(validationIssues);
+  const validationIssuesRef = React12.useRef(validationIssues);
   validationIssuesRef.current = validationIssues;
-  const [validationOpen, setValidationOpen] = React10.useState(false);
-  const openValidationPanel = React10.useCallback(() => setValidationOpen(true), []);
+  const selectedNodeIdRef = React12.useRef(null);
+  selectedNodeIdRef.current = (_d = detailSelection == null ? void 0 : detailSelection.nodeId) != null ? _d : null;
+  const [validationOpen, setValidationOpen] = React12.useState(false);
+  const openValidationPanel = React12.useCallback(() => setValidationOpen(true), []);
   const validationWidgetAvailable = validationState !== void 0 && !hideToolbar;
-  const validationWidgetAvailableRef = React10.useRef(validationWidgetAvailable);
+  const validationWidgetAvailableRef = React12.useRef(validationWidgetAvailable);
   validationWidgetAvailableRef.current = validationWidgetAvailable;
-  const decorateNodes = React10.useCallback(
+  const decorateNodes = React12.useCallback(
     (nodes2) => {
-      var _a2, _b2;
+      var _a2, _b2, _c2;
       const raw = rawGraphDataRef.current;
       const decorations = buildValidationDecorations(
         validationIssuesRef.current,
         (_a2 = raw == null ? void 0 : raw.graphspec) != null ? _a2 : null,
         (_b2 = raw == null ? void 0 : raw.childToCtrl) != null ? _b2 : {},
-        foldedRef.current
+        foldedRef.current,
+        (_c2 = initialDataRef.current) == null ? void 0 : _c2._standIns
       );
-      return applyValidationDecorations(
+      const decorated = applyValidationDecorations(
         applyStatusOverrides(toAppNodes(hydrateLabels(nodes2)), statusMapRef.current),
         decorations,
         validationWidgetAvailableRef.current ? openValidationPanel : void 0
       );
+      const selectedId = selectedNodeIdRef.current;
+      return selectedId ? decorated.map((n) => n.id === selectedId ? __spreadProps(__spreadValues({}, n), { selected: true }) : n) : decorated;
     },
     [openValidationPanel]
   );
-  const nodesRef = React10.useRef([]);
+  const frameLayout = React12.useCallback(
+    (style, layout, graphspec2, analysis) => GRAPH_STYLE_PIPELINES[style].frame({
+      nodes: cloneCachedNodes(layout.nodes),
+      edges: layout.edges,
+      graphspec: graphspec2,
+      analysis,
+      controllerPositions: layout.controllerPositions,
+      showControllers: showControllersRef.current,
+      expandedControllers: expandedRef.current,
+      onToggleCollapse: toggleCollapseRef.current,
+      onToggleFold: toggleFoldRef.current
+    }),
+    []
+  );
+  const cacheMatchesData = () => {
+    const cache = layoutCacheRef.current;
+    const data = initialDataRef.current;
+    return cache !== null && data !== null && cache.graphspec === data._graphspec && cache.graphStyle === data._graphStyle;
+  };
+  const nodesRef = React12.useRef([]);
   nodesRef.current = nodes;
-  const onValidationIssueClickRef = React10.useRef(onValidationIssueClick);
+  const onValidationIssueClickRef = React12.useRef(onValidationIssueClick);
   onValidationIssueClickRef.current = onValidationIssueClick;
-  const flashTimeoutRef = React10.useRef(null);
-  React10.useEffect(
+  const flashTimeoutRef = React12.useRef(null);
+  React12.useEffect(
     () => () => {
       if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
     },
     []
   );
-  const handleValidationIssueClick = React10.useCallback(
+  const handleValidationIssueClick = React12.useCallback(
     (index, issue) => {
-      var _a2, _b2;
+      var _a2, _b2, _c2;
       (_a2 = onValidationIssueClickRef.current) == null ? void 0 : _a2.call(onValidationIssueClickRef, index, issue);
       const raw = rawGraphDataRef.current;
       if (!(raw == null ? void 0 : raw.graphspec) || !raw.analysis) return;
@@ -2859,10 +3467,11 @@ function GraphViewer(props) {
         raw.graphspec,
         raw.childToCtrl,
         foldedRef.current,
-        new Set(nodesRef.current.map((n) => n.id))
+        new Set(nodesRef.current.map((n) => n.id)),
+        (_b2 = initialDataRef.current) == null ? void 0 : _b2._standIns
       );
       if (!targetId) return;
-      void ((_b2 = reactFlowRef.current) == null ? void 0 : _b2.fitView({
+      void ((_c2 = reactFlowRef.current) == null ? void 0 : _c2.fitView({
         nodes: [{ id: targetId }],
         duration: 500,
         padding: 0.4
@@ -2890,10 +3499,11 @@ function GraphViewer(props) {
     },
     [setNodes]
   );
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (!initialDataRef.current) return;
     let cancelled = false;
     void (async () => {
+      var _a2;
       try {
         const data = initialDataRef.current;
         if (!data) return;
@@ -2901,7 +3511,7 @@ function GraphViewer(props) {
           data.nodes,
           data.edges,
           direction,
-          layoutConfig,
+          (_a2 = GRAPH_STYLES[data._graphStyle].layout) != null ? _a2 : layoutConfig,
           data._graphspec,
           data._analysis
         );
@@ -2910,18 +3520,14 @@ function GraphViewer(props) {
           nodes: relayouted.nodes,
           edges: relayouted.edges,
           controllerPositions: relayouted.controllerPositions,
-          graphspec: data._graphspec
+          graphspec: data._graphspec,
+          graphStyle: data._graphStyle
         };
-        const withControllers = applyControllers(
-          cloneCachedNodes(relayouted.nodes),
-          relayouted.edges,
+        const withControllers = frameLayout(
+          data._graphStyle,
+          relayouted,
           data._graphspec,
-          data._analysis,
-          showControllersRef.current,
-          expandedRef.current,
-          toggleCollapseRef.current,
-          relayouted.controllerPositions,
-          toggleFoldRef.current
+          data._analysis
         );
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
@@ -2938,26 +3544,16 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [direction, layoutConfig]);
-  React10.useEffect(() => {
-    if (!layoutCacheRef.current || !initialDataRef.current) return;
-    if (layoutCacheRef.current.graphspec !== initialDataRef.current._graphspec) return;
-    const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
-    const cachedEdges = layoutCacheRef.current.edges;
-    const withControllers = applyControllers(
-      cachedNodes,
-      cachedEdges,
-      initialDataRef.current._graphspec,
-      initialDataRef.current._analysis,
-      showControllers,
-      expandedControllers,
-      toggleCollapse,
-      layoutCacheRef.current.controllerPositions,
-      toggleFold
-    );
+  React12.useEffect(() => {
+    const cache = layoutCacheRef.current;
+    const data = initialDataRef.current;
+    if (!cache || !data || !cacheMatchesData()) return;
+    const withControllers = frameLayout(cache.graphStyle, cache, data._graphspec, data._analysis);
     setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
   }, [showControllers, expandedControllers, toggleCollapse, toggleFold, decorateNodes]);
-  React10.useEffect(() => {
+  React12.useEffect(() => {
+    var _a2;
     if (!graphspec) {
       initialDataRef.current = null;
       rawGraphDataRef.current = null;
@@ -2967,8 +3563,13 @@ function GraphViewer(props) {
       return;
     }
     let cancelled = false;
-    setExpandedControllers(/* @__PURE__ */ new Set());
-    expandedRef.current = /* @__PURE__ */ new Set();
+    const sameSpec = ((_a2 = rawGraphDataRef.current) == null ? void 0 : _a2.graphspec) === graphspec;
+    if (!sameSpec) {
+      setExpandedControllers(/* @__PURE__ */ new Set());
+      expandedRef.current = /* @__PURE__ */ new Set();
+    }
+    const style = graphStyleRef.current;
+    const pipeline = GRAPH_STYLE_PIPELINES[style];
     const { graphData, analysis } = buildGraph(graphspec, edgeType);
     rawGraphDataRef.current = {
       nodes: graphData.nodes,
@@ -2977,12 +3578,24 @@ function GraphViewer(props) {
       graphspec,
       childToCtrl: analysis ? buildChildToControllerMap(graphspec, analysis) : {}
     };
-    const seedSet = analysis ? seedFoldedControllers(foldModeRef.current, analysis.controllerNodeIds) : /* @__PURE__ */ new Set();
+    if (!sameSpec) readerOpenedRef.current = /* @__PURE__ */ new Set();
+    let seedSet = /* @__PURE__ */ new Set();
+    const styleDefaults = /* @__PURE__ */ new Set();
+    if (analysis) {
+      const kept = sameSpec ? [...foldedRef.current].filter((id) => !styleDefaultFoldsRef.current.has(id)) : [...seedFoldedControllers(foldModeRef.current, analysis.controllerNodeIds)];
+      seedSet = new Set(kept);
+      for (const id of pipeline.defaultFolds(graphspec, analysis)) {
+        if (seedSet.has(id) || readerOpenedRef.current.has(id)) continue;
+        styleDefaults.add(id);
+        seedSet.add(id);
+      }
+    }
+    styleDefaultFoldsRef.current = styleDefaults;
     setFoldedControllers(seedSet);
     foldedRef.current = seedSet;
     skipNextFoldEffectRef.current = seedSet.size > 0;
     prevFoldSizeRef.current = seedSet.size;
-    if (seedSet.size > 0 && !showControllersRef.current) {
+    if (seedSet.size > 0 && GRAPH_STYLES[style].capabilities.controllerFrameToggle && !showControllersRef.current) {
       setShowControllers(true);
       showControllersRef.current = true;
     }
@@ -2993,29 +3606,38 @@ function GraphViewer(props) {
       seedSet,
       toggleFoldRef.current
     ) : { nodes: graphData.nodes, edges: graphData.edges, analysis };
-    initialDataRef.current = {
+    const projected = pipeline.project({
+      graphspec,
       nodes: folded.nodes,
       edges: folded.edges,
-      _analysis: folded.analysis,
-      _graphspec: graphspec
-    };
+      analysis: folded.analysis,
+      rawAnalysis: analysis
+    });
+    initialDataRef.current = __spreadValues({
+      nodes: projected.nodes,
+      edges: projected.edges,
+      _analysis: projected.analysis,
+      _graphspec: graphspec,
+      _graphStyle: style
+    }, projected.standIns ? { _standIns: projected.standIns } : {});
     void (async () => {
+      var _a3;
       try {
         const currentDirection = directionRef.current;
-        const currentLayoutConfig = layoutConfigRef.current;
-        const needsLayout = folded.nodes.some(
+        const currentLayoutConfig = (_a3 = GRAPH_STYLES[style].layout) != null ? _a3 : layoutConfigRef.current;
+        const needsLayout = projected.nodes.some(
           (n) => !n.position || n.position.x === 0 && n.position.y === 0
         );
         const layouted = needsLayout ? await getLayoutedElements(
-          folded.nodes,
-          folded.edges,
+          projected.nodes,
+          projected.edges,
           currentDirection,
           currentLayoutConfig,
           graphspec,
-          folded.analysis
+          projected.analysis
         ) : {
-          nodes: folded.nodes,
-          edges: folded.edges,
+          nodes: projected.nodes,
+          edges: projected.edges,
           controllerPositions: {}
         };
         if (cancelled) return;
@@ -3023,19 +3645,10 @@ function GraphViewer(props) {
           nodes: layouted.nodes,
           edges: layouted.edges,
           controllerPositions: layouted.controllerPositions,
-          graphspec
-        };
-        const withControllers = applyControllers(
-          cloneCachedNodes(layouted.nodes),
-          layouted.edges,
           graphspec,
-          folded.analysis,
-          showControllersRef.current,
-          expandedRef.current,
-          toggleCollapseRef.current,
-          layouted.controllerPositions,
-          toggleFoldRef.current
-        );
+          graphStyle: style
+        };
+        const withControllers = frameLayout(style, layouted, graphspec, projected.analysis);
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
@@ -3057,8 +3670,8 @@ function GraphViewer(props) {
     return () => {
       cancelled = true;
     };
-  }, [graphspec, edgeType]);
-  React10.useEffect(() => {
+  }, [graphspec, edgeType, graphStyle]);
+  React12.useEffect(() => {
     if (isFirstFoldEffect.current) {
       isFirstFoldEffect.current = false;
       prevFoldSizeRef.current = foldedControllers.size;
@@ -3078,6 +3691,7 @@ function GraphViewer(props) {
     const currentAnalysis = raw.analysis;
     if (!currentGraphspec || !currentAnalysis) return;
     let cancelled = false;
+    const style = graphStyleRef.current;
     const folded = applyFolds(
       { nodes: raw.nodes, edges: raw.edges },
       currentAnalysis,
@@ -3085,40 +3699,40 @@ function GraphViewer(props) {
       foldedControllers,
       toggleFold
     );
-    initialDataRef.current = {
+    const projected = GRAPH_STYLE_PIPELINES[style].project({
+      graphspec: currentGraphspec,
       nodes: folded.nodes,
       edges: folded.edges,
-      _analysis: folded.analysis,
-      _graphspec: currentGraphspec
-    };
+      analysis: folded.analysis,
+      rawAnalysis: currentAnalysis
+    });
+    initialDataRef.current = __spreadValues({
+      nodes: projected.nodes,
+      edges: projected.edges,
+      _analysis: projected.analysis,
+      _graphspec: currentGraphspec,
+      _graphStyle: style
+    }, projected.standIns ? { _standIns: projected.standIns } : {});
     void (async () => {
+      var _a2;
       try {
         const layouted = await getLayoutedElements(
-          folded.nodes,
-          folded.edges,
+          projected.nodes,
+          projected.edges,
           directionRef.current,
-          layoutConfigRef.current,
+          (_a2 = GRAPH_STYLES[style].layout) != null ? _a2 : layoutConfigRef.current,
           currentGraphspec,
-          folded.analysis
+          projected.analysis
         );
         if (cancelled) return;
         layoutCacheRef.current = {
           nodes: layouted.nodes,
           edges: layouted.edges,
           controllerPositions: layouted.controllerPositions,
-          graphspec: currentGraphspec
+          graphspec: currentGraphspec,
+          graphStyle: style
         };
-        const withControllers = applyControllers(
-          cloneCachedNodes(layouted.nodes),
-          layouted.edges,
-          currentGraphspec,
-          folded.analysis,
-          showControllersRef.current,
-          expandedRef.current,
-          toggleCollapseRef.current,
-          layouted.controllerPositions,
-          toggleFoldRef.current
-        );
+        const withControllers = frameLayout(style, layouted, currentGraphspec, projected.analysis);
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
@@ -3134,51 +3748,29 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [foldedControllers, toggleFold]);
-  React10.useEffect(() => {
-    if (!layoutCacheRef.current || !initialDataRef.current) return;
-    if (layoutCacheRef.current.graphspec !== initialDataRef.current._graphspec) return;
-    const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
-    const cachedEdges = layoutCacheRef.current.edges;
-    const withControllers = applyControllers(
-      cachedNodes,
-      cachedEdges,
-      initialDataRef.current._graphspec,
-      initialDataRef.current._analysis,
-      showControllersRef.current,
-      expandedRef.current,
-      toggleCollapseRef.current,
-      layoutCacheRef.current.controllerPositions,
-      toggleFoldRef.current
-    );
+  React12.useEffect(() => {
+    const cache = layoutCacheRef.current;
+    const data = initialDataRef.current;
+    if (!cache || !data || !cacheMatchesData()) return;
+    const withControllers = frameLayout(cache.graphStyle, cache, data._graphspec, data._analysis);
     setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
   }, [statusMap, decorateNodes]);
-  React10.useEffect(() => {
-    if (!layoutCacheRef.current || !initialDataRef.current) return;
-    if (layoutCacheRef.current.graphspec !== initialDataRef.current._graphspec) return;
-    const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
-    const withControllers = applyControllers(
-      cachedNodes,
-      layoutCacheRef.current.edges,
-      initialDataRef.current._graphspec,
-      initialDataRef.current._analysis,
-      showControllersRef.current,
-      expandedRef.current,
-      toggleCollapseRef.current,
-      layoutCacheRef.current.controllerPositions,
-      toggleFoldRef.current
-    );
+  React12.useEffect(() => {
+    const cache = layoutCacheRef.current;
+    const data = initialDataRef.current;
+    if (!cache || !data || !cacheMatchesData()) return;
+    const withControllers = frameLayout(cache.graphStyle, cache, data._graphspec, data._analysis);
     setNodes(decorateNodes(withControllers.nodes));
   }, [validationIssues, validationWidgetAvailable, decorateNodes]);
-  const onNodeClick = React10.useCallback(
+  const onNodeClick = React12.useCallback(
     (event, node) => {
-      var _a2;
       const nodeData = node.data;
       onNodeSelect == null ? void 0 : onNodeSelect(node.id, nodeData, event);
       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);
+          onNavigateToPipe(code, nodeRunStatus(nodeData));
         }
       } else if (nodeData.isStuff && onStuffNodeClick && graphspec) {
         const found = findStuffByDigest(graphspec, stuffDigestFromId(node.id));
@@ -3212,7 +3804,7 @@ function GraphViewer(props) {
       conceptOverride
     ]
   );
-  const onInit = React10.useCallback(
+  const onInit = React12.useCallback(
     (reactFlowInstance) => {
       reactFlowRef.current = reactFlowInstance;
       if (onReactFlowInit) {
@@ -3221,12 +3813,12 @@ function GraphViewer(props) {
     },
     [onReactFlowInit]
   );
-  const handlePaneClick = React10.useCallback(() => {
+  const handlePaneClick = React12.useCallback(() => {
     setDetailSelection(null);
     setConceptOverride(null);
     onPaneClick == null ? void 0 : onPaneClick();
   }, [onPaneClick]);
-  const handleConceptClick = React10.useCallback(
+  const handleConceptClick = React12.useCallback(
     (conceptCode) => {
       if (!graphspec) return;
       const info = resolveConceptRef(graphspec, conceptCode);
@@ -3240,10 +3832,11 @@ function GraphViewer(props) {
     toolbarPositionProp,
     config.toolbarPosition
   );
-  const rawAnalysis = (_d = rawGraphDataRef.current) == null ? void 0 : _d.analysis;
+  const rawAnalysis = (_e = rawGraphDataRef.current) == null ? void 0 : _e.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
-  const foldAllProps = React10.useMemo(() => {
-    if (!showControllers || !allControllerIds || allControllerIds.size === 0) {
+  const foldControlsAvailable = styleCapabilities.foldAll && (!styleCapabilities.controllerFrameToggle || showControllers);
+  const foldAllProps = React12.useMemo(() => {
+    if (!foldControlsAvailable || !allControllerIds || allControllerIds.size === 0) {
       return {
         onFoldAll: void 0,
         onExpandAll: void 0,
@@ -3252,24 +3845,32 @@ function GraphViewer(props) {
       };
     }
     return {
-      onFoldAll: () => setFoldedControllers(new Set(allControllerIds)),
-      onExpandAll: () => setFoldedControllers(/* @__PURE__ */ new Set()),
+      onFoldAll: () => {
+        markReaderFolds(allControllerIds, true);
+        setFoldedControllers(new Set(allControllerIds));
+      },
+      onExpandAll: () => {
+        markReaderFolds(allControllerIds, false);
+        setFoldedControllers(/* @__PURE__ */ new Set());
+      },
       foldAllDisabled: foldedControllers.size === allControllerIds.size,
       expandAllDisabled: foldedControllers.size === 0
     };
-  }, [showControllers, allControllerIds, foldedControllers]);
-  return /* @__PURE__ */ jsxs24(
+  }, [foldControlsAvailable, allControllerIds, foldedControllers, markReaderFolds]);
+  const styleMenuOptions = React12.useMemo(() => resolveStyleMenu(styleMenu), [styleMenu]);
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ref: containerRef,
       className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}`,
       children: [
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs26(
           ReactFlow,
           {
             nodes,
             edges,
             nodeTypes,
+            edgeTypes,
             onNodesChange,
             onEdgesChange,
             onNodeClick,
@@ -3283,7 +3884,7 @@ function GraphViewer(props) {
             proOptions: { hideAttribution: true },
             panActivationKeyCode: null,
             children: [
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx28(
                 Background,
                 {
                   variant: BackgroundVariant.Dots,
@@ -3292,13 +3893,16 @@ function GraphViewer(props) {
                   color: "var(--color-bg-dots)"
                 }
               ),
-              !hideToolbar && /* @__PURE__ */ jsx25(
+              !hideToolbar && /* @__PURE__ */ jsx28(
                 GraphToolbar,
                 {
                   direction,
                   onDirectionChange: setDirection,
                   showControllers,
-                  onShowControllersChange: setShowControllers,
+                  onShowControllersChange: styleCapabilities.controllerFrameToggle ? setShowControllers : void 0,
+                  graphStyle,
+                  styleMenuOptions,
+                  onGraphStyleChange: setGraphStyle,
                   onZoomIn: () => {
                     var _a2;
                     void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn());
@@ -3329,7 +3933,7 @@ function GraphViewer(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs26(
           DetailPanel,
           {
             isOpen: detailOpen,
@@ -3338,14 +3942,14 @@ function GraphViewer(props) {
             isDragging: isPanelDragging,
             onResizeHandleMouseDown: onResizeMouseDown,
             children: [
-              conceptOverride ? /* @__PURE__ */ jsx25(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx25(
+              conceptOverride ? /* @__PURE__ */ jsx28(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx28(
                 PipeDetailPanel,
                 {
                   node: selectedSpecNode,
                   spec: graphspec,
                   onConceptClick: handleConceptClick
                 }
-              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx25(
+              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx28(
                 StuffNodeDetail,
                 {
                   nodeId: detailSelection.nodeId,