@pipelex/mthds-ui 0.29.0 → 0.30.0

package/dist/graph/index.d.ts

@@ -1,5 +1,5 @@
-import { p as GraphSpecNode, r as CardNode, s as PipeCallNode, b as GraphSpec, D as DataflowAnalysis, C as ConceptInfo, P as PipeBlueprintUnion, t as GraphData, o as GraphSpecMode, u as PipeCardPayload, m as FoldToggleOptions, e as GraphNode, d as GraphEdge, c as GraphNodeData, N as NodeValidationSummary, V as ValidationIssue, j as GraphSpecNodeIoItem, g as GraphDirection, v as LayoutConfig, f as GraphConfig, T as ToolbarPosition, G as GraphTheme } from '../types-BaFWy56P.js';
-export { A as ARROW_CLOSED_MARKER, B as BINDING_STEP_TYPE, w as BindingNode, x as BindingStepSpec, y as BindingStepType, z as CONTROLLER_PADDING_BOTTOM, E as CONTROLLER_PADDING_TOP, H as CONTROLLER_PADDING_X, I as EDGE_TYPE, J as EdgeType, K as FOLD_MODE, M as FieldResolution, F as FoldMode, O as GRAPH_DIRECTION, Q as GRAPH_SPEC_MODE, R as GRAPH_THEME, S as GRAPH_THEME_MODE, U as GraphSpecEdge, W as GraphSpecEdgeKind, X as GraphSpecMeta, Y as GraphSpecModelUsage, Z as GraphSpecNodeError, _ as GraphSpecNodeIo, $ as GraphSpecNodeTiming, a0 as GraphSpecNodeUsage, a1 as GraphSpecUsage, h as GraphThemeMode, a2 as JudgmentQuestionSpec, a3 as KNOWN_PIPE_TYPES, L as LabelDescriptor, a4 as NODE_TYPE_CONTROLLER, a5 as NODE_TYPE_PIPE_CARD, a6 as NODE_TYPE_STUFF, a7 as NodeKind, n as NodePipeType, a8 as PipeBatchBlueprint, a9 as PipeBlueprintBase, aa as PipeComposeBlueprint, ab as PipeComposeConstructBlueprint, ac as PipeComposeConstructField, ad as PipeConditionBlueprint, l as PipeControllerType, ae as PipeDocGenBlueprint, af as PipeExtractBlueprint, ag as PipeFuncBlueprint, ah as PipeImgGenBlueprint, ai as PipeJudgeBlueprint, aj as PipeLLMBlueprint, q as PipeOperatorType, ak as PipeParallelBlueprint, al as PipeSearchBlueprint, am as PipeSequenceBlueprint, an as PipeSignatureBlueprint, i as PipeStatus, ao as PipeStructureBlueprint, ap as PipeType, a as PresenceMarker, aq as STUFF_ID_PREFIX, ar as SequenceStepSpec, as as StuffMultiplicity, at as StuffRegistryEntry, au as StuffRole, av as StuffSpecInfo, aw as SubPipeSpec, ax as TOOLBAR_POSITION, ay as TemplateBlueprint, az as ToolbarOrientation, aA as ToolbarSide, aB as VALIDATION_STATE, k as ValidationState, aC as graphSpecMode, aD as isBindingNode, aE as isBindingStepSpec, aF as isDryGraphSpec, aG as isPluralMultiplicity, aH as isStaticGraphSpec, aI as isStuffNodeId, aJ as multiplicitySuffix, aK as nodeHeight, aL as nodeWidth, aM as stuffDigestFromId, aN as stuffNodeId, aO as toolbarOrientation, aP as toolbarSide } from '../types-BaFWy56P.js';
+import { q as GraphSpecNode, s as CardNode, t as PipeCallNode, b as GraphSpec, D as DataflowAnalysis, C as ConceptInfo, P as PipeBlueprintUnion, u as GraphData, p as GraphSpecMode, v as PipeCardPayload, n as FoldToggleOptions, e as GraphNode, d as GraphEdge, c as GraphNodeData, N as NodeValidationSummary, V as ValidationIssue, k as GraphSpecNodeIoItem, g as GraphDirection, w as LayoutConfig, E as EdgeRoute, x as GraphPoint, f as GraphConfig, T as ToolbarPosition, i as GraphStyleId, G as GraphTheme, o as NodePipeType, S as StepCategory, j as PipeStatus } from '../types-BNqjYF_x.js';
+export { A as ARROW_CLOSED_MARKER, B as BINDING_STEP_TYPE, y as BindingNode, z as BindingStepSpec, H as BindingStepType, I as CONTROLLER_PADDING_BOTTOM, J as CONTROLLER_PADDING_TOP, K as CONTROLLER_PADDING_X, M as EDGE_TYPE, O as EDGE_TYPE_ROUTED, Q as EdgeType, R as FOLD_MODE, U as FieldResolution, F as FoldMode, W as GRAPH_DIRECTION, X as GRAPH_SPEC_MODE, Y as GRAPH_STYLE, Z as GRAPH_THEME, _ as GRAPH_THEME_MODE, $ as GraphSpecEdge, a0 as GraphSpecEdgeKind, a1 as GraphSpecMeta, a2 as GraphSpecModelUsage, a3 as GraphSpecNodeError, a4 as GraphSpecNodeIo, a5 as GraphSpecNodeTiming, a6 as GraphSpecNodeUsage, a7 as GraphSpecUsage, h as GraphThemeMode, a8 as JudgmentQuestionSpec, a9 as KNOWN_PIPE_TYPES, L as LabelDescriptor, aa as NODE_TYPE_CONTROLLER, ab as NODE_TYPE_PIPE_CARD, ac as NODE_TYPE_SIMPLE_DECISION, ad as NODE_TYPE_SIMPLE_FRAME, ae as NODE_TYPE_SIMPLE_STEP, af as NODE_TYPE_SIMPLE_TERMINAL, ag as NODE_TYPE_STUFF, ah as NodeKind, ai as PipeBatchBlueprint, aj as PipeBlueprintBase, ak as PipeComposeBlueprint, al as PipeComposeConstructBlueprint, am as PipeComposeConstructField, an as PipeConditionBlueprint, m as PipeControllerType, ao as PipeDocGenBlueprint, ap as PipeExtractBlueprint, aq as PipeFuncBlueprint, ar as PipeImgGenBlueprint, as as PipeJudgeBlueprint, at as PipeLLMBlueprint, r as PipeOperatorType, au as PipeParallelBlueprint, av as PipeSearchBlueprint, aw as PipeSequenceBlueprint, ax as PipeSignatureBlueprint, ay as PipeStructureBlueprint, az as PipeType, a as PresenceMarker, aA as STEP_CATEGORY, aB as STUFF_ID_PREFIX, aC as SequenceStepSpec, aD as SimpleNodePayload, aE as StuffMultiplicity, aF as StuffRegistryEntry, aG as StuffRole, aH as StuffSpecInfo, aI as SubPipeSpec, aJ as TOOLBAR_POSITION, aK as TemplateBlueprint, aL as ToolbarOrientation, aM as ToolbarSide, aN as VALIDATION_STATE, l as ValidationState, aO as graphSpecMode, aP as isBindingNode, aQ as isBindingStepSpec, aR as isDryGraphSpec, aS as isPluralMultiplicity, aT as isStaticGraphSpec, aU as isStuffNodeId, aV as multiplicitySuffix, aW as nodeHeight, aX as nodeWidth, aY as stuffDigestFromId, aZ as stuffNodeId, a_ as toolbarOrientation, a$ as toolbarSide } from '../types-BNqjYF_x.js';
 export { P as ParsedPipeRef, m as makePipeRef, p as parsePipeRef } from '../pipeRefs-BQJO5nh5.js';
 import { ElkNode } from 'elkjs/lib/elk-api';
 
@@ -150,7 +150,10 @@ declare function applyFolds(graphData: GraphData, analysis: DataflowAnalysis, gr
  * Each issue's target ids are remapped through the fold containment
  * (`outermostFoldedAncestor`): an issue on a node hidden inside a folded
  * controller decorates the folded controller's card instead, so folding never
- * hides an error. Targets that don't resolve to a rendered node (e.g. a
+ * hides an error. They then go through the style's `standIns`: an issue on a
+ * node the style does not draw decorates the drawn node standing for it, such
+ * as a batch item's run in the simple style, drawn once for every item. Targets
+ * that don't resolve to a rendered node (e.g. a
  * diagnostic about a pipe that was skipped during the static walk) simply
  * produce no decoration — those issues stay panel-only.
  *
@@ -158,14 +161,14 @@ declare function applyFolds(graphData: GraphData, analysis: DataflowAnalysis, gr
  * invocations of a broken pipe shows 2, matching the sum of the badges that
  * become visible when it is expanded.
  */
-declare function buildValidationDecorations(issues: readonly ValidationIssue[] | undefined, graphspec: GraphSpec | null, childToCtrl: Readonly<Record<string, string>>, foldedSet: ReadonlySet<string>): Map<string, NodeValidationSummary>;
+declare function buildValidationDecorations(issues: readonly ValidationIssue[] | undefined, graphspec: GraphSpec | null, childToCtrl: Readonly<Record<string, string>>, foldedSet: ReadonlySet<string>, standIns?: ReadonlyMap<string, string>): Map<string, NodeValidationSummary>;
 /**
  * Resolve the rendered node a panel row should navigate to: the issue's first
- * target, remapped through the fold containment, and only if that id is
- * actually rendered. `null` for panel-only issues (no target, or the target
- * never became a node).
+ * target, remapped through the fold containment and the style's stand-ins, and
+ * only if that id is actually rendered. `null` for panel-only issues (no
+ * target, or the target never became a node).
  */
-declare function resolveIssueTargetNodeId(issue: ValidationIssue, graphspec: GraphSpec | null, childToCtrl: Readonly<Record<string, string>>, foldedSet: ReadonlySet<string>, renderedNodeIds: ReadonlySet<string>): string | null;
+declare function resolveIssueTargetNodeId(issue: ValidationIssue, graphspec: GraphSpec | null, childToCtrl: Readonly<Record<string, string>>, foldedSet: ReadonlySet<string>, renderedNodeIds: ReadonlySet<string>, standIns?: ReadonlyMap<string, string>): string | null;
 /**
  * Stamp the decoration map onto rendered nodes (and their pipe-card payloads).
  * Nodes whose decoration is unchanged are returned as-is; a node whose issues
@@ -265,6 +268,12 @@ interface ElkPositionResult {
     height: number;
 }
 declare function extractAbsolutePositions(elkResult: ElkNode): Record<string, ElkPositionResult>;
+/**
+ * Every edge's route, keyed by edge id, from a layout run with `routeEdges`
+ * (its coordinates are then the root's). An edge ELK reports no section for is
+ * left out, and is drawn as a free curve.
+ */
+declare function extractEdgeRoutes(elkResult: ElkNode): Record<string, EdgeRoute>;
 
 interface LayoutResult {
     nodes: GraphNode[];
@@ -274,6 +283,32 @@ interface LayoutResult {
 }
 declare function getLayoutedElements(nodes: GraphNode[], edges: GraphEdge[], direction: GraphDirection, layoutConfig?: LayoutConfig, graphspec?: GraphSpec | null, analysis?: DataflowAnalysis | null): Promise<LayoutResult>;
 
+/**
+ * How far a measured handle may sit from the port the layout routed from
+ * before the route is stale: a node dragged away. Handles are drawn a few
+ * pixels outside their node, which this absorbs.
+ */
+declare const ROUTE_ENDPOINT_TOLERANCE_PX = 8;
+/** The radius each bend of a route is rounded with, shrunk on short segments. */
+declare const ROUTE_CORNER_RADIUS_PX = 8;
+/**
+ * A route's points with its ends moved onto the measured handles, or null
+ * when either handle is too far from the port the layout routed from. The
+ * point next to a moved end moves with it along the segment's axis, so an
+ * orthogonal route stays orthogonal.
+ */
+declare function fitRoute(points: readonly GraphPoint[], source: GraphPoint, target: GraphPoint, tolerance?: number): GraphPoint[] | null;
+/**
+ * An SVG path through a polyline, each bend rounded by a quadratic curve. A
+ * bend's radius shrinks to half its shorter segment, so close bends never
+ * overshoot each other.
+ */
+declare function roundedPolylinePath(points: readonly GraphPoint[], radius?: number): string;
+/** The point halfway along a polyline, for a label the layout did not place. */
+declare function polylineMidpoint(points: readonly GraphPoint[]): GraphPoint;
+/** Where a routed edge's label is centred: the box the layout placed, or the route's midpoint. */
+declare function routeLabelCenter(route: EdgeRoute, fitted: readonly GraphPoint[]): GraphPoint;
+
 /** Max visible children before a parallel/batch controller auto-collapses. */
 declare const MAX_VISIBLE_CONTROLLER_CHILDREN = 5;
 /** Position and size for a controller, as computed by the layout engine. */
@@ -305,13 +340,305 @@ declare function applyControllers(layoutedNodes: GraphNode[], layoutedEdges: Gra
     nodes: GraphNode[];
     edges: GraphEdge[];
 };
+/**
+ * Order nodes so every group node comes before its children, which ReactFlow
+ * requires. Stable within a nesting depth. Throws on a cycle in the parent
+ * chain rather than looping.
+ */
+declare function sortParentsFirst(nodes: GraphNode[]): GraphNode[];
 
 declare const DARK_PALETTE_COLORS: Record<string, string>;
 declare const LIGHT_PALETTE_COLORS: Record<string, string>;
 declare function getPaletteForTheme(theme: GraphTheme): Record<string, string>;
 declare const DEFAULT_GRAPH_CONFIG: GraphConfig & {
     toolbarPosition: ToolbarPosition;
+    graphStyle: GraphStyleId;
 };
 declare function getPaletteColors(): Record<string, string>;
 
-export { CardNode, ConceptInfo, type ControllerRect, DARK_PALETTE_COLORS, DEFAULT_GRAPH_CONFIG, DataflowAnalysis, type ElkPositionResult, FoldToggleOptions, GraphConfig, GraphData, GraphDirection, GraphEdge, GraphNode, GraphNodeData, GraphSpec, GraphSpecMode, GraphSpecNode, GraphSpecNodeIoItem, GraphSpecValidationError, GraphTheme, LIGHT_PALETTE_COLORS, LayoutConfig, type LayoutResult, MAX_VISIBLE_CONTROLLER_CHILDREN, NodeValidationSummary, PipeBlueprintUnion, PipeCallNode, PipeCardPayload, type StuffLocation, ToolbarPosition, ValidationIssue, applyControllers, applyFolds, applyValidationDecorations, asCardNode, asPipeCallNode, buildChildToControllerMap, buildContainmentChain, buildControllerNodes, buildDataflowAnalysis, buildDataflowGraph, buildElkGraph, buildGraph, buildPipeCardPayload, buildValidationDecorations, estimateNodeDimensions, extractAbsolutePositions, findCousinControllers, findStuffByDigest, getConceptInfo, getLayoutedElements, getPaletteColors, getPaletteForTheme, getPipeBlueprint, inputPortId, outermostFoldedAncestor, outputPortId, pipeRefOf, resolveConceptRef, resolveIssueTargetNodeId, validateGraphSpec };
+/** Which of the toolbar's controls make sense for a style. */
+interface GraphStyleCapabilities {
+    /**
+     * The toolbar's show/hide controllers toggle applies: the style draws
+     * controller frames on demand. A style that decides its own frames hides it.
+     */
+    controllerFrameToggle: boolean;
+    /**
+     * Fold-all and expand-all apply. In a style that also has the frame toggle
+     * they apply only while the frames are shown, since a fold is undone from a
+     * frame.
+     */
+    foldAll: boolean;
+}
+/** What the registry says of one style: what it is called, what it is for, and what it supports. */
+interface GraphStyleDescriptor {
+    id: GraphStyleId;
+    /** The style's name in the toolbar menu. */
+    name: string;
+    /** One line saying what the style shows, under its name in the menu. */
+    description: string;
+    capabilities: GraphStyleCapabilities;
+    /**
+     * How the style lays out: its spacing, which replaces `config.nodesep` and
+     * `config.ranksep` for it, the room its frames keep around their steps, and
+     * whether its edges follow routes around the nodes in their way. A style
+     * that leaves it undefined keeps the host's spacing and the controller
+     * groups' padding, and draws free curves of the host's `edgeType`.
+     */
+    layout?: Required<LayoutConfig>;
+}
+declare const GRAPH_STYLES: Record<GraphStyleId, GraphStyleDescriptor>;
+/** Every registered style, in the order the menu lists them. */
+declare const GRAPH_STYLE_IDS: readonly GraphStyleId[];
+/**
+ * Whether a value names a registered style. For values that cross an untyped
+ * boundary — an editor setting, the standalone page's config embed, a host
+ * written in plain JavaScript — before they reach the viewer.
+ */
+declare function isGraphStyleId(value: unknown): value is GraphStyleId;
+/**
+ * Resolve the active style from `(graphStyle prop, config.graphStyle, default)`.
+ * Pure + exported so the controlled/reactive precedence is unit-testable
+ * without React, under the same contract `resolveExternalThemeMode` holds:
+ * - the prop wins when it names a style,
+ * - falls back to `config.graphStyle` when the prop is undefined (so a host can
+ *   hand control back to config after passing the prop),
+ * - falls back to the library default (`detailed`) when neither is set.
+ *
+ * A value naming no registered style is treated as unset rather than thrown
+ * on: a style is a preference, and a host relaying a setting written for a
+ * newer version of this package should still get a graph.
+ */
+declare function resolveGraphStyle(styleProp: unknown, configStyle: unknown): GraphStyleId;
+/**
+ * The styles the toolbar menu offers, from the viewer's `styleMenu` prop:
+ * nothing for `false` or `undefined` (the menu is opt-in), every registered
+ * style in registry order for `true`, and for a list the registered styles it
+ * names, in its order and without repeats. A menu needs two styles to choose
+ * between, so fewer than two offer none.
+ */
+declare function resolveStyleMenu(styleMenu: boolean | readonly GraphStyleId[] | undefined): GraphStyleId[];
+
+/** The last segment of a dotted ref: the code without its domain (`recruitment.CandidateProfile` → `CandidateProfile`). */
+declare function stripDomain(ref: string): string;
+/**
+ * An identifier as words in sentence case: `job_offer` → "Job offer",
+ * `CandidateProfile` → "Candidate profile", `pr_url` → "PR URL",
+ * `cvs` → "CVs". A dotted ref is humanized by its last segment.
+ */
+declare function humanizeIdentifier(identifier: string): string;
+/** A concept's plain name, from its code or ref: a native's own plain name, or the humanized code. */
+declare function conceptPlainName(conceptRef: string): string;
+/** Whether a concept is a native that names no particular kind of content (`Anything`, `Dynamic`, `Composite`). */
+declare function isGenericConcept(conceptRef: string): boolean;
+/**
+ * Authored text as a title: whitespace collapsed (descriptions are often
+ * written across lines), the first letter capitalized, and a single closing
+ * period dropped, since a label in a box reads as a heading. Nothing else is
+ * touched: the words are the author's.
+ */
+declare function sentenceCase(text: string): string;
+/**
+ * A condition's outcome as an arrow label: `english` → "English",
+ * `high_priority` → "High priority", a yes-or-no test's `true` and `false` →
+ * "Yes" and "No", and the `default` outcome → "Otherwise". A branch taken on
+ * several outcomes, written `no_fit | default` as the static builder labels it,
+ * reads "No fit or otherwise".
+ */
+declare function outcomeLabel(outcome: string): string;
+
+/** A text's rendered width at a font size, in pixels. */
+declare function textWidthPx(text: string, fontPx: number): number;
+/** How many lines a text wraps to at a width, and whether it fits in `maxLines`. */
+interface WrapEstimate {
+    /** Lines the text needs, unclamped. */
+    lines: number;
+    /** Lines it is drawn on: `lines` clamped to `maxLines`. */
+    drawnLines: number;
+    /** Whether the text is cut, so its box must carry the full text in a tooltip. */
+    clamped: boolean;
+}
+/**
+ * Estimate a text's wrapped line count by greedy word wrap at a line width,
+ * the way the browser wraps it. A word wider than a line is broken across as
+ * many lines as it needs (`overflow-wrap: anywhere`), starting on a line of
+ * its own.
+ */
+declare function estimateWrap(text: string, lineWidthPx: number, fontPx: number, maxLines: number): WrapEstimate;
+
+declare const SIMPLE_STEP_WIDTH = 160;
+/**
+ * The wider box a step takes when its title would need more lines than
+ * `SIMPLE_TITLE_MAX_LINES` at `SIMPLE_STEP_WIDTH` and fits them at this one:
+ * one step of width, not a box per title, so a column of steps keeps its rhythm.
+ */
+declare const SIMPLE_STEP_WIDE_WIDTH = 200;
+declare const SIMPLE_STEP_TITLE_FONT_PX = 15;
+declare const SIMPLE_TITLE_MAX_LINES = 3;
+declare const SIMPLE_TERMINAL_WIDTH = 124;
+/**
+ * The widths a decision diamond may take, narrowest first: it takes the first
+ * at which its text fits in `SIMPLE_TITLE_MAX_LINES`, so a long question
+ * widens the diamond rather than losing its end.
+ */
+declare const SIMPLE_DECISION_WIDTHS: readonly number[];
+/**
+ * The controller depth from which the simple style folds a sub-method by
+ * default (the method's own controller is depth 0). Deep nesting is where a
+ * flowchart stops reading as one; a folded sub-method is one step a reader
+ * can open. Only sequences fold this way: a decision, a loop or a parallel is
+ * structure the reader came to see, however deep it sits.
+ */
+declare const SIMPLE_FOLD_DEPTH = 3;
+/**
+ * The category each card class reads as. Exhaustive over `NodePipeType`, so a
+ * new pipe class must say what it is. A binding step is drawn only when it
+ * failed, as the field it was picking.
+ */
+declare const STEP_CATEGORY_BY_PIPE_TYPE: Record<NodePipeType, StepCategory>;
+/** The plain word each category is shown with. */
+declare const STEP_CATEGORY_WORDS: Record<StepCategory, string>;
+/** The size of a step box for its title and markers. */
+declare function simpleStepSize(title: string, options?: {
+    forEach?: boolean;
+    innerSteps?: boolean;
+}): {
+    width: number;
+    height: number;
+};
+/** The size of an input or output's document shape. */
+declare function simpleTerminalSize(title: string, hasSubtitle: boolean): {
+    width: number;
+    height: number;
+};
+/**
+ * The size of a decision diamond for its text: the narrowest of
+ * `SIMPLE_DECISION_WIDTHS` its text fits in, and the height that keeps the
+ * text block inside the rhombus.
+ */
+declare function simpleDecisionSize(title: string): {
+    width: number;
+    height: number;
+};
+/**
+ * How a step title wraps in a box of a width (the default box unless given):
+ * what the readability rubric checks, at the width the step is drawn at.
+ */
+declare function simpleTitleWrap(title: string, boxWidth?: number): WrapEstimate;
+/** The status a step drawn once stands for when it ran several times (once per batch item). */
+declare function aggregateStatus(statuses: readonly PipeStatus[]): PipeStatus | undefined;
+interface SimpleProjectionInput {
+    graphspec: GraphSpec;
+    /** The dataflow graph after the folds: what the detailed style would lay out. */
+    nodes: GraphNode[];
+    /** The analysis after the folds (a folded controller is one producer and consumer). */
+    analysis: DataflowAnalysis;
+    /** The analysis before the folds: the full containment, which a fold hides. */
+    rawAnalysis: DataflowAnalysis;
+}
+interface SimpleProjection {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    /**
+     * The analysis the layout and the frames read: the "for each" frames are its
+     * only controllers, holding the nodes drawn inside them, and it names no
+     * producer or consumer, since every value the style draws is a method input
+     * or a final output and sits outside every frame.
+     */
+    analysis: DataflowAnalysis;
+    /** Each spec node the style does not draw, mapped to the drawn node that stands for it. */
+    standIns: ReadonlyMap<string, string>;
+}
+/**
+ * Project the folded dataflow graph into the simple style's nodes and edges.
+ * Node ids stay the GraphSpec's — a step keeps its pipe node's id and a method
+ * input or final output keeps its stuff node's — so selection, the detail
+ * panel, run status and validation decorations find them as in any style.
+ */
+declare function projectSimpleGraph(input: SimpleProjectionInput): SimpleProjection;
+/**
+ * The size an arrow label is drawn at, background included, so the layout
+ * reserves room for it: the text at `EDGE_LABEL_FONT_PX`, padded by
+ * `EDGE_LABEL_PADDING`.
+ */
+declare function simpleEdgeLabelSize(label: string): {
+    width: number;
+    height: number;
+};
+/**
+ * The controllers the simple style folds when a graph is first drawn: every
+ * sub-method (a sequence) from `SIMPLE_FOLD_DEPTH` levels down. The host's own fold mode
+ * still applies on top.
+ */
+declare function simpleDefaultFolds(graphspec: GraphSpec, rawAnalysis: DataflowAnalysis): Set<string>;
+/**
+ * Wrap the laid-out nodes in the simple style's "for each" frames: the group
+ * nodes are built by the same pass that builds the detailed style's controller
+ * groups, at the positions and sizes the layout gave them, and take what they
+ * say from the projection's placeholders. Mutates the content nodes' `parentId`
+ * and positions as that pass does, so callers pass a copy of the layout.
+ */
+declare function applySimpleFrames(args: {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    graphspec: GraphSpec;
+    analysis: DataflowAnalysis;
+    controllerPositions?: Record<string, ControllerRect>;
+    onToggleFold?: (controllerId: string, options?: FoldToggleOptions) => void;
+}): {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+};
+
+/** What a style's projection receives: the dataflow graph after the folds, for one spec. */
+interface StyleProjectionArgs {
+    graphspec: GraphSpec;
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    /** The analysis after the folds; null for a spec with no data flow. */
+    analysis: DataflowAnalysis | null;
+    /** The analysis before the folds; null for a spec with no data flow. */
+    rawAnalysis: DataflowAnalysis | null;
+}
+/** What the layout lays out for a style, and the analysis its frames are built from. */
+interface StyleProjection {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    analysis: DataflowAnalysis | null;
+    /**
+     * For a style that draws some of the spec's nodes through others: each node
+     * it does not draw, mapped to the drawn node that stands for it, so that a
+     * validation issue pinned to the first still badges the second.
+     */
+    standIns?: ReadonlyMap<string, string>;
+}
+/** What a style's frame pass receives: the laid-out nodes, and the viewer's frame and fold state. */
+interface StyleFrameArgs {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    graphspec: GraphSpec | null;
+    analysis: DataflowAnalysis | null;
+    controllerPositions?: Record<string, ControllerRect>;
+    showControllers: boolean;
+    expandedControllers?: ReadonlySet<string>;
+    onToggleCollapse?: (controllerId: string) => void;
+    onToggleFold?: (controllerId: string, options?: FoldToggleOptions) => void;
+}
+/**
+ * The drawing pipeline a style contributes, in the order the viewer runs it:
+ * the controllers it folds on a fresh graph, the projection of the folded
+ * dataflow graph into the nodes and edges it lays out, and the pass that wraps
+ * the laid-out nodes in its frames. Pure: the node components that draw the
+ * result are the React layer's.
+ */
+interface GraphStylePipeline {
+    defaultFolds(graphspec: GraphSpec, rawAnalysis: DataflowAnalysis): Set<string>;
+    project(args: StyleProjectionArgs): StyleProjection;
+    frame(args: StyleFrameArgs): {
+        nodes: GraphNode[];
+        edges: GraphEdge[];
+    };
+}
+declare const GRAPH_STYLE_PIPELINES: Record<GraphStyleId, GraphStylePipeline>;
+
+export { CardNode, ConceptInfo, type ControllerRect, DARK_PALETTE_COLORS, DEFAULT_GRAPH_CONFIG, DataflowAnalysis, EdgeRoute, type ElkPositionResult, FoldToggleOptions, GRAPH_STYLES, GRAPH_STYLE_IDS, GRAPH_STYLE_PIPELINES, GraphConfig, GraphData, GraphDirection, GraphEdge, GraphNode, GraphNodeData, GraphPoint, GraphSpec, GraphSpecMode, GraphSpecNode, GraphSpecNodeIoItem, GraphSpecValidationError, type GraphStyleCapabilities, type GraphStyleDescriptor, GraphStyleId, type GraphStylePipeline, GraphTheme, LIGHT_PALETTE_COLORS, LayoutConfig, type LayoutResult, MAX_VISIBLE_CONTROLLER_CHILDREN, NodePipeType, NodeValidationSummary, PipeBlueprintUnion, PipeCallNode, PipeCardPayload, PipeStatus, ROUTE_CORNER_RADIUS_PX, ROUTE_ENDPOINT_TOLERANCE_PX, SIMPLE_DECISION_WIDTHS, SIMPLE_FOLD_DEPTH, SIMPLE_STEP_TITLE_FONT_PX, SIMPLE_STEP_WIDE_WIDTH, SIMPLE_STEP_WIDTH, SIMPLE_TERMINAL_WIDTH, SIMPLE_TITLE_MAX_LINES, STEP_CATEGORY_BY_PIPE_TYPE, STEP_CATEGORY_WORDS, type SimpleProjection, type SimpleProjectionInput, StepCategory, type StuffLocation, type StyleFrameArgs, type StyleProjection, type StyleProjectionArgs, ToolbarPosition, ValidationIssue, type WrapEstimate, aggregateStatus, applyControllers, applyFolds, applySimpleFrames, applyValidationDecorations, asCardNode, asPipeCallNode, buildChildToControllerMap, buildContainmentChain, buildControllerNodes, buildDataflowAnalysis, buildDataflowGraph, buildElkGraph, buildGraph, buildPipeCardPayload, buildValidationDecorations, conceptPlainName, estimateNodeDimensions, estimateWrap, extractAbsolutePositions, extractEdgeRoutes, findCousinControllers, findStuffByDigest, fitRoute, getConceptInfo, getLayoutedElements, getPaletteColors, getPaletteForTheme, getPipeBlueprint, humanizeIdentifier, inputPortId, isGenericConcept, isGraphStyleId, outcomeLabel, outermostFoldedAncestor, outputPortId, pipeRefOf, polylineMidpoint, projectSimpleGraph, resolveConceptRef, resolveGraphStyle, resolveIssueTargetNodeId, resolveStyleMenu, roundedPolylinePath, routeLabelCenter, sentenceCase, simpleDecisionSize, simpleDefaultFolds, simpleEdgeLabelSize, simpleStepSize, simpleTerminalSize, simpleTitleWrap, sortParentsFirst, stripDomain, textWidthPx, validateGraphSpec };

package/dist/graph/index.js

@@ -1,9 +1,25 @@
-import "../chunk-F6TZIJ7A.js";
+import "../chunk-KB2DIEVF.js";
 import {
+  GRAPH_STYLES,
+  GRAPH_STYLE_IDS,
+  GRAPH_STYLE_PIPELINES,
   GraphSpecValidationError,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
+  ROUTE_CORNER_RADIUS_PX,
+  ROUTE_ENDPOINT_TOLERANCE_PX,
+  SIMPLE_DECISION_WIDTHS,
+  SIMPLE_FOLD_DEPTH,
+  SIMPLE_STEP_TITLE_FONT_PX,
+  SIMPLE_STEP_WIDE_WIDTH,
+  SIMPLE_STEP_WIDTH,
+  SIMPLE_TERMINAL_WIDTH,
+  SIMPLE_TITLE_MAX_LINES,
+  STEP_CATEGORY_BY_PIPE_TYPE,
+  STEP_CATEGORY_WORDS,
+  aggregateStatus,
   applyControllers,
   applyFolds,
+  applySimpleFrames,
   applyValidationDecorations,
   asCardNode,
   asPipeCallNode,
@@ -16,21 +32,45 @@ import {
   buildGraph,
   buildPipeCardPayload,
   buildValidationDecorations,
+  conceptPlainName,
   estimateNodeDimensions,
+  estimateWrap,
   extractAbsolutePositions,
+  extractEdgeRoutes,
   findCousinControllers,
   findStuffByDigest,
+  fitRoute,
   getConceptInfo,
   getLayoutedElements,
   getPipeBlueprint,
+  humanizeIdentifier,
   inputPortId,
+  isGenericConcept,
+  isGraphStyleId,
+  outcomeLabel,
   outermostFoldedAncestor,
   outputPortId,
   pipeRefOf,
+  polylineMidpoint,
+  projectSimpleGraph,
   resolveConceptRef,
+  resolveGraphStyle,
   resolveIssueTargetNodeId,
+  resolveStyleMenu,
+  roundedPolylinePath,
+  routeLabelCenter,
+  sentenceCase,
+  simpleDecisionSize,
+  simpleDefaultFolds,
+  simpleEdgeLabelSize,
+  simpleStepSize,
+  simpleTerminalSize,
+  simpleTitleWrap,
+  sortParentsFirst,
+  stripDomain,
+  textWidthPx,
   validateGraphSpec
-} from "../chunk-ZTXSDTVF.js";
+} from "../chunk-3BXB6HSF.js";
 import {
   makePipeRef,
   parsePipeRef
@@ -41,7 +81,7 @@ import {
   LIGHT_PALETTE_COLORS,
   getPaletteColors,
   getPaletteForTheme
-} from "../chunk-Y46574OW.js";
+} from "../chunk-GAOBB3UT.js";
 import {
   ARROW_CLOSED_MARKER,
   BINDING_STEP_TYPE,
@@ -49,15 +89,22 @@ import {
   CONTROLLER_PADDING_TOP,
   CONTROLLER_PADDING_X,
   EDGE_TYPE,
+  EDGE_TYPE_ROUTED,
   FOLD_MODE,
   GRAPH_DIRECTION,
   GRAPH_SPEC_MODE,
+  GRAPH_STYLE,
   GRAPH_THEME,
   GRAPH_THEME_MODE,
   KNOWN_PIPE_TYPES,
   NODE_TYPE_CONTROLLER,
   NODE_TYPE_PIPE_CARD,
+  NODE_TYPE_SIMPLE_DECISION,
+  NODE_TYPE_SIMPLE_FRAME,
+  NODE_TYPE_SIMPLE_STEP,
+  NODE_TYPE_SIMPLE_TERMINAL,
   NODE_TYPE_STUFF,
+  STEP_CATEGORY,
   STUFF_ID_PREFIX,
   TOOLBAR_POSITION,
   VALIDATION_STATE,
@@ -75,7 +122,7 @@ import {
   stuffNodeId,
   toolbarOrientation,
   toolbarSide
-} from "../chunk-3I3ZPYMW.js";
+} from "../chunk-PJTYQURQ.js";
 import "../chunk-2NMEKWO5.js";
 export {
   ARROW_CLOSED_MARKER,
@@ -86,9 +133,14 @@ export {
   DARK_PALETTE_COLORS,
   DEFAULT_GRAPH_CONFIG,
   EDGE_TYPE,
+  EDGE_TYPE_ROUTED,
   FOLD_MODE,
   GRAPH_DIRECTION,
   GRAPH_SPEC_MODE,
+  GRAPH_STYLE,
+  GRAPH_STYLES,
+  GRAPH_STYLE_IDS,
+  GRAPH_STYLE_PIPELINES,
   GRAPH_THEME,
   GRAPH_THEME_MODE,
   GraphSpecValidationError,
@@ -97,12 +149,30 @@ export {
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   NODE_TYPE_CONTROLLER,
   NODE_TYPE_PIPE_CARD,
+  NODE_TYPE_SIMPLE_DECISION,
+  NODE_TYPE_SIMPLE_FRAME,
+  NODE_TYPE_SIMPLE_STEP,
+  NODE_TYPE_SIMPLE_TERMINAL,
   NODE_TYPE_STUFF,
+  ROUTE_CORNER_RADIUS_PX,
+  ROUTE_ENDPOINT_TOLERANCE_PX,
+  SIMPLE_DECISION_WIDTHS,
+  SIMPLE_FOLD_DEPTH,
+  SIMPLE_STEP_TITLE_FONT_PX,
+  SIMPLE_STEP_WIDE_WIDTH,
+  SIMPLE_STEP_WIDTH,
+  SIMPLE_TERMINAL_WIDTH,
+  SIMPLE_TITLE_MAX_LINES,
+  STEP_CATEGORY,
+  STEP_CATEGORY_BY_PIPE_TYPE,
+  STEP_CATEGORY_WORDS,
   STUFF_ID_PREFIX,
   TOOLBAR_POSITION,
   VALIDATION_STATE,
+  aggregateStatus,
   applyControllers,
   applyFolds,
+  applySimpleFrames,
   applyValidationDecorations,
   asCardNode,
   asPipeCallNode,
@@ -115,20 +185,27 @@ export {
   buildGraph,
   buildPipeCardPayload,
   buildValidationDecorations,
+  conceptPlainName,
   estimateNodeDimensions,
+  estimateWrap,
   extractAbsolutePositions,
+  extractEdgeRoutes,
   findCousinControllers,
   findStuffByDigest,
+  fitRoute,
   getConceptInfo,
   getLayoutedElements,
   getPaletteColors,
   getPaletteForTheme,
   getPipeBlueprint,
   graphSpecMode,
+  humanizeIdentifier,
   inputPortId,
   isBindingNode,
   isBindingStepSpec,
   isDryGraphSpec,
+  isGenericConcept,
+  isGraphStyleId,
   isPluralMultiplicity,
   isStaticGraphSpec,
   isStuffNodeId,
@@ -136,14 +213,31 @@ export {
   multiplicitySuffix,
   nodeHeight,
   nodeWidth,
+  outcomeLabel,
   outermostFoldedAncestor,
   outputPortId,
   parsePipeRef,
   pipeRefOf,
+  polylineMidpoint,
+  projectSimpleGraph,
   resolveConceptRef,
+  resolveGraphStyle,
   resolveIssueTargetNodeId,
+  resolveStyleMenu,
+  roundedPolylinePath,
+  routeLabelCenter,
+  sentenceCase,
+  simpleDecisionSize,
+  simpleDefaultFolds,
+  simpleEdgeLabelSize,
+  simpleStepSize,
+  simpleTerminalSize,
+  simpleTitleWrap,
+  sortParentsFirst,
+  stripDomain,
   stuffDigestFromId,
   stuffNodeId,
+  textWidthPx,
   toolbarOrientation,
   toolbarSide,
   validateGraphSpec

package/dist/graph/react/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { b as GraphSpec, c as GraphNodeData, d as GraphEdge, e as GraphNode, f as GraphConfig, g as GraphDirection, F as FoldMode, h as GraphThemeMode, T as ToolbarPosition, G as GraphTheme, i as PipeStatus, j as GraphSpecNodeIoItem, k as ValidationState, V as ValidationIssue, L as LabelDescriptor, l as PipeControllerType, m as FoldToggleOptions, N as NodeValidationSummary, n as NodePipeType, o as GraphSpecMode, C as ConceptInfo, p as GraphSpecNode } from '../../types-BaFWy56P.js';
-export { q as PipeOperatorType } from '../../types-BaFWy56P.js';
+import { b as GraphSpec, c as GraphNodeData, d as GraphEdge, e as GraphNode, f as GraphConfig, g as GraphDirection, F as FoldMode, h as GraphThemeMode, T as ToolbarPosition, i as GraphStyleId, G as GraphTheme, j as PipeStatus, k as GraphSpecNodeIoItem, l as ValidationState, V as ValidationIssue, L as LabelDescriptor, m as PipeControllerType, n as FoldToggleOptions, N as NodeValidationSummary, o as NodePipeType, p as GraphSpecMode, C as ConceptInfo, q as GraphSpecNode } from '../../types-BNqjYF_x.js';
+export { r as PipeOperatorType } from '../../types-BNqjYF_x.js';
 import { PipeIOContracts, OutputForm, InputForm, SaveFiles } from '@pipelex/mthds-form';
 import { ResolveUrl, ResolveShareUrl, DownloadDisplay } from '@pipelex/mthds-form/react';
 import { Edge, Node, ReactFlowInstance } from '@xyflow/react';
@@ -98,6 +98,8 @@ declare function toAppNodes(nodes: GraphNode[]): AppNode[];
  * Domain-only fields (_batchEdge, _crossGroup) are dropped — they're only used
  * by pure graph logic (layout weight calculation), not by ReactFlow rendering.
  * The markerEnd cast is safe: our { type: "arrowclosed", color } satisfies EdgeMarker.
+ * A route the layout computed travels in `data.route`, where the routed edge
+ * component reads it (see `RoutedEdgeData`).
  */
 declare function toAppEdges(edges: GraphEdge[]): AppEdge[];
 
@@ -157,6 +159,28 @@ interface GraphViewerProps {
      * Precedence: this prop → `config.toolbarPosition` → `"top-right"`.
      */
     toolbarPosition?: ToolbarPosition;
+    /**
+     * The style the graph is drawn in: `detailed` (every pipe with its inputs,
+     * outputs and settings) or `simple` (the method's steps in plain words).
+     * Reactive, like `theme`: passing it drives the active style, and clearing it
+     * back to `undefined` hands control to `config.graphStyle`, then the default
+     * `detailed`. The toolbar's style menu, when shown, changes it too. A value
+     * naming no registered style is treated as unset. This library persists
+     * nothing: the host keeps the choice, reported by `onGraphStyleChange`.
+     */
+    graphStyle?: GraphStyleId;
+    /**
+     * Called whenever the style changes — from the menu, or from a prop or config
+     * update — so the host can persist it. Not called on mount.
+     */
+    onGraphStyleChange?: (style: GraphStyleId) => void;
+    /**
+     * Show a style menu in the toolbar. Opt-in: `true` offers every registered
+     * style in registry order, a list offers those styles in that order, and the
+     * default offers no menu, for a host that fixes the style for its audience.
+     * A menu needs two styles to choose between.
+     */
+    styleMenu?: boolean | readonly GraphStyleId[];
     /**
      * Host-injected environment theme, authoritative when set. Forwarded to the
      * `system` resolver so non-browser hosts (e.g. VS Code webviews, where