@pipelex/mthds-ui 0.13.0 → 0.14.0

package/dist/graph/index.d.ts

@@ -1,5 +1,5 @@
-import { n as GraphSpecNode, q as PipeCallNode, G as GraphSpec, D as DataflowAnalysis, C as ConceptInfo, P as PipeBlueprintUnion, r as GraphData, m as GraphSpecMode, s as PipeCardPayload, k as FoldToggleOptions, c as GraphNode, b as GraphEdge, e as GraphDirection, t as LayoutConfig, d as GraphConfig, T as ToolbarPosition, g as GraphTheme } from '../types-Cm4147S5.js';
-export { A as ARROW_CLOSED_MARKER, u as CONTROLLER_PADDING_BOTTOM, v as CONTROLLER_PADDING_TOP, w as CONTROLLER_PADDING_X, E as EDGE_TYPE, x as EdgeType, y as FOLD_MODE, z as FieldResolution, F as FoldMode, B as GRAPH_DIRECTION, H as GRAPH_SPEC_MODE, I as GRAPH_THEME, J as GRAPH_THEME_MODE, a as GraphNodeData, K as GraphSpecEdge, M as GraphSpecEdgeKind, N as GraphSpecMeta, O as GraphSpecNodeError, Q as GraphSpecNodeIo, o as GraphSpecNodeIoItem, R as GraphSpecNodeTiming, f as GraphThemeMode, S as KNOWN_PIPE_TYPES, L as LabelDescriptor, U as NODE_TYPE_CONTROLLER, W as NODE_TYPE_PIPE_CARD, X as NODE_TYPE_STUFF, Y as NodeKind, Z as PipeBatchBlueprint, _ as PipeBlueprintBase, $ as PipeComposeBlueprint, a0 as PipeComposeConstructBlueprint, a1 as PipeComposeConstructField, a2 as PipeConditionBlueprint, j as PipeControllerType, a3 as PipeExtractBlueprint, a4 as PipeFuncBlueprint, a5 as PipeImgGenBlueprint, a6 as PipeLLMBlueprint, p as PipeOperatorType, a7 as PipeParallelBlueprint, a8 as PipeSearchBlueprint, a9 as PipeSequenceBlueprint, aa as PipeSignatureBlueprint, h as PipeStatus, ab as PipeStructureBlueprint, l as PipeType, ac as STUFF_ID_PREFIX, ad as StuffRole, ae as StuffSpecInfo, af as SubPipeSpec, ag as TOOLBAR_POSITION, ah as TemplateBlueprint, ai as ToolbarOrientation, aj as ToolbarSide, ak as VALIDATION_STATE, V as ValidationIssue, i as ValidationState, al as graphSpecMode, am as isDryGraphSpec, an as isStaticGraphSpec, ao as isStuffNodeId, ap as nodeHeight, aq as nodeWidth, ar as stuffDigestFromId, as as stuffNodeId, at as toolbarOrientation, au as toolbarSide } from '../types-Cm4147S5.js';
+import { n as GraphSpecNode, q as PipeCallNode, G as GraphSpec, D as DataflowAnalysis, C as ConceptInfo, P as PipeBlueprintUnion, r as GraphData, m as GraphSpecMode, s as PipeCardPayload, k as FoldToggleOptions, c as GraphNode, b as GraphEdge, a as GraphNodeData, N as NodeValidationSummary, V as ValidationIssue, e as GraphDirection, t as LayoutConfig, d as GraphConfig, T as ToolbarPosition, g as GraphTheme } from '../types-CIH1Ae16.js';
+export { A as ARROW_CLOSED_MARKER, u as CONTROLLER_PADDING_BOTTOM, v as CONTROLLER_PADDING_TOP, w as CONTROLLER_PADDING_X, E as EDGE_TYPE, x as EdgeType, y as FOLD_MODE, z as FieldResolution, F as FoldMode, B as GRAPH_DIRECTION, H as GRAPH_SPEC_MODE, I as GRAPH_THEME, J as GRAPH_THEME_MODE, K as GraphSpecEdge, M as GraphSpecEdgeKind, O as GraphSpecMeta, Q as GraphSpecNodeError, R as GraphSpecNodeIo, o as GraphSpecNodeIoItem, S as GraphSpecNodeTiming, f as GraphThemeMode, U as KNOWN_PIPE_TYPES, L as LabelDescriptor, W as NODE_TYPE_CONTROLLER, X as NODE_TYPE_PIPE_CARD, Y as NODE_TYPE_STUFF, Z as NodeKind, _ as PipeBatchBlueprint, $ as PipeBlueprintBase, a0 as PipeComposeBlueprint, a1 as PipeComposeConstructBlueprint, a2 as PipeComposeConstructField, a3 as PipeConditionBlueprint, j as PipeControllerType, a4 as PipeExtractBlueprint, a5 as PipeFuncBlueprint, a6 as PipeImgGenBlueprint, a7 as PipeLLMBlueprint, p as PipeOperatorType, a8 as PipeParallelBlueprint, a9 as PipeSearchBlueprint, aa as PipeSequenceBlueprint, ab as PipeSignatureBlueprint, h as PipeStatus, ac as PipeStructureBlueprint, l as PipeType, ad as STUFF_ID_PREFIX, ae as StuffRole, af as StuffSpecInfo, ag as SubPipeSpec, ah as TOOLBAR_POSITION, ai as TemplateBlueprint, aj as ToolbarOrientation, ak as ToolbarSide, al as VALIDATION_STATE, i as ValidationState, am as graphSpecMode, an as isDryGraphSpec, ao as isStaticGraphSpec, ap as isStuffNodeId, aq as nodeHeight, ar as nodeWidth, as as stuffDigestFromId, at as stuffNodeId, au as toolbarOrientation, av as toolbarSide } from '../types-CIH1Ae16.js';
 import { ElkNode } from 'elkjs/lib/elk-api';
 
 /**
@@ -130,6 +130,40 @@ declare function applyFolds(graphData: GraphData, analysis: DataflowAnalysis, gr
     analysis: DataflowAnalysis;
 };
 
+/**
+ * Build the per-node decoration map for the current fold state.
+ *
+ * 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
+ * diagnostic about a pipe that was skipped during the static walk) simply
+ * produce no decoration — those issues stay panel-only.
+ *
+ * Counts are per issue × target invocation: a folded controller containing two
+ * 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>;
+/**
+ * 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).
+ */
+declare function resolveIssueTargetNodeId(issue: ValidationIssue, graphspec: GraphSpec | null, childToCtrl: Readonly<Record<string, string>>, foldedSet: ReadonlySet<string>, renderedNodeIds: ReadonlySet<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
+ * disappeared gets its stamp cleared, so verdict flips are fully reactive.
+ * `onBadgeClick` (when provided) rides along on decorated nodes only — the
+ * badge renders as a button that opens the validation panel.
+ */
+declare function applyValidationDecorations<T extends {
+    id: string;
+    data: GraphNodeData;
+}>(nodes: T[], decorations: ReadonlyMap<string, NodeValidationSummary>, onBadgeClick?: () => void): T[];
+
 declare function inputPortId(nodeId: string): string;
 declare function outputPortId(nodeId: string): string;
 interface NodeDimensions {
@@ -197,4 +231,4 @@ declare const DEFAULT_GRAPH_CONFIG: GraphConfig & {
 };
 declare function getPaletteColors(): Record<string, string>;
 
-export { ConceptInfo, type ControllerRect, DARK_PALETTE_COLORS, DEFAULT_GRAPH_CONFIG, DataflowAnalysis, type ElkPositionResult, FoldToggleOptions, GraphConfig, GraphData, GraphDirection, GraphEdge, GraphNode, GraphSpec, GraphSpecMode, GraphSpecNode, GraphSpecValidationError, GraphTheme, LIGHT_PALETTE_COLORS, LayoutConfig, type LayoutResult, MAX_VISIBLE_CONTROLLER_CHILDREN, PipeBlueprintUnion, PipeCallNode, PipeCardPayload, ToolbarPosition, applyControllers, applyFolds, asPipeCallNode, buildChildToControllerMap, buildContainmentChain, buildControllerNodes, buildDataflowAnalysis, buildDataflowGraph, buildElkGraph, buildGraph, buildPipeCardPayload, estimateNodeDimensions, extractAbsolutePositions, findCousinControllers, getConceptInfo, getLayoutedElements, getPaletteColors, getPaletteForTheme, getPipeBlueprint, inputPortId, outermostFoldedAncestor, outputPortId, resolveConceptRef, validateGraphSpec };
+export { ConceptInfo, type ControllerRect, DARK_PALETTE_COLORS, DEFAULT_GRAPH_CONFIG, DataflowAnalysis, type ElkPositionResult, FoldToggleOptions, GraphConfig, GraphData, GraphDirection, GraphEdge, GraphNode, GraphNodeData, GraphSpec, GraphSpecMode, GraphSpecNode, GraphSpecValidationError, GraphTheme, LIGHT_PALETTE_COLORS, LayoutConfig, type LayoutResult, MAX_VISIBLE_CONTROLLER_CHILDREN, NodeValidationSummary, PipeBlueprintUnion, PipeCallNode, PipeCardPayload, ToolbarPosition, ValidationIssue, applyControllers, applyFolds, applyValidationDecorations, asPipeCallNode, buildChildToControllerMap, buildContainmentChain, buildControllerNodes, buildDataflowAnalysis, buildDataflowGraph, buildElkGraph, buildGraph, buildPipeCardPayload, buildValidationDecorations, estimateNodeDimensions, extractAbsolutePositions, findCousinControllers, getConceptInfo, getLayoutedElements, getPaletteColors, getPaletteForTheme, getPipeBlueprint, inputPortId, outermostFoldedAncestor, outputPortId, resolveConceptRef, resolveIssueTargetNodeId, validateGraphSpec };

package/dist/graph/index.js

@@ -1,4 +1,4 @@
-import "../chunk-L24K3TZU.js";
+import "../chunk-LJQS5ZNA.js";
 import {
   DARK_PALETTE_COLORS,
   DEFAULT_GRAPH_CONFIG,
@@ -7,6 +7,7 @@ import {
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   applyControllers,
   applyFolds,
+  applyValidationDecorations,
   asPipeCallNode,
   buildChildToControllerMap,
   buildContainmentChain,
@@ -16,6 +17,7 @@ import {
   buildElkGraph,
   buildGraph,
   buildPipeCardPayload,
+  buildValidationDecorations,
   estimateNodeDimensions,
   extractAbsolutePositions,
   findCousinControllers,
@@ -28,8 +30,9 @@ import {
   outermostFoldedAncestor,
   outputPortId,
   resolveConceptRef,
+  resolveIssueTargetNodeId,
   validateGraphSpec
-} from "../chunk-XCZLRCEJ.js";
+} from "../chunk-V4FKGLKA.js";
 import {
   ARROW_CLOSED_MARKER,
   CONTROLLER_PADDING_BOTTOM,
@@ -58,7 +61,7 @@ import {
   stuffNodeId,
   toolbarOrientation,
   toolbarSide
-} from "../chunk-IMQ7MVYL.js";
+} from "../chunk-GS2KODND.js";
 import "../chunk-2NMEKWO5.js";
 export {
   ARROW_CLOSED_MARKER,
@@ -85,6 +88,7 @@ export {
   VALIDATION_STATE,
   applyControllers,
   applyFolds,
+  applyValidationDecorations,
   asPipeCallNode,
   buildChildToControllerMap,
   buildContainmentChain,
@@ -94,6 +98,7 @@ export {
   buildElkGraph,
   buildGraph,
   buildPipeCardPayload,
+  buildValidationDecorations,
   estimateNodeDimensions,
   extractAbsolutePositions,
   findCousinControllers,
@@ -112,6 +117,7 @@ export {
   outermostFoldedAncestor,
   outputPortId,
   resolveConceptRef,
+  resolveIssueTargetNodeId,
   stuffDigestFromId,
   stuffNodeId,
   toolbarOrientation,

package/dist/graph/react/graph-core.css

@@ -126,16 +126,22 @@
     var(--shadow-lg) !important;
   z-index: 1000 !important;
 }
-/* Pipe cards handle their own selection styling — suppress the wrapper outline */
+/* Pipe cards handle their own selection styling — suppress the wrapper outline.
+   The outline reset excludes .node-validation-flash: the flash animates the
+   wrapper outline, and an !important reset would override the animation. */
 .react-flow__node-pipeCard {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
-  outline: none !important;
   padding: 0 !important;
 }
+.react-flow__node-pipeCard:not(.node-validation-flash) {
+  outline: none !important;
+}
 .react-flow__node-pipeCard.selected {
   box-shadow: none !important;
+}
+.react-flow__node-pipeCard.selected:not(.node-validation-flash) {
   outline: none !important;
 }
 .react-flow__node-pipeCard.selected .pipe-card {
@@ -586,3 +592,66 @@
 .pipe-card--tb .pipe-card-io-pill-concept {
   max-width: 100px;
 }
+
+/* ─── Validation decorations (severity ring + count badge) ─────────────────
+   Stamped by GraphViewer from targeted ValidationIssues. The ring is an
+   outline so node geometry (and therefore layout) never changes; the badge
+   lives in the header flow, which is size-locked by the ELK dimensions. */
+
+.node-validation-ring--error {
+  outline: 2px solid var(--color-error);
+  outline-offset: 1px;
+}
+.node-validation-ring--warning {
+  outline: 1.5px solid var(--color-warning);
+  outline-offset: 1px;
+}
+
+.node-validation-badge {
+  flex-shrink: 0;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border: none;
+  border-radius: 999px;
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  box-sizing: border-box;
+}
+.node-validation-badge--error {
+  background: var(--color-error);
+  color: #fff;
+}
+.node-validation-badge--warning {
+  background: var(--color-warning);
+  color: rgba(0, 0, 0, 0.85);
+}
+button.node-validation-badge {
+  cursor: pointer;
+}
+/* The controller header disables pointer events (it overlays children); the
+   badge re-enables them for its tooltip and click-through to the panel. */
+.controller-group-header .node-validation-badge {
+  pointer-events: auto;
+}
+
+/* Transient highlight when a validation-panel row navigates to its node.
+   Applied to the ReactFlow node wrapper; the animation fades the halo out and
+   the class is cleared (or dropped by the next rebuild) once it has played. */
+.react-flow__node.node-validation-flash {
+  animation: node-validation-flash 1.6s ease-out;
+}
+@keyframes node-validation-flash {
+  0%,
+  50% {
+    outline: 3px solid var(--color-accent-strong);
+    outline-offset: 5px;
+  }
+  100% {
+    outline: 3px solid transparent;
+    outline-offset: 5px;
+  }
+}

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 { a as GraphNodeData, b as GraphEdge, c as GraphNode, G as GraphSpec, d as GraphConfig, e as GraphDirection, F as FoldMode, f as GraphThemeMode, T as ToolbarPosition, g as GraphTheme, h as PipeStatus, i as ValidationState, V as ValidationIssue, L as LabelDescriptor, j as PipeControllerType, k as FoldToggleOptions, l as PipeType, m as GraphSpecMode, n as GraphSpecNode, C as ConceptInfo, o as GraphSpecNodeIoItem } from '../../types-Cm4147S5.js';
-export { p as PipeOperatorType } from '../../types-Cm4147S5.js';
+import { a as GraphNodeData, b as GraphEdge, c as GraphNode, G as GraphSpec, d as GraphConfig, e as GraphDirection, F as FoldMode, f as GraphThemeMode, T as ToolbarPosition, g as GraphTheme, h as PipeStatus, i as ValidationState, V as ValidationIssue, L as LabelDescriptor, j as PipeControllerType, k as FoldToggleOptions, N as NodeValidationSummary, l as PipeType, m as GraphSpecMode, n as GraphSpecNode, C as ConceptInfo, o as GraphSpecNodeIoItem } from '../../types-CIH1Ae16.js';
+export { p as PipeOperatorType } from '../../types-CIH1Ae16.js';
 import { Edge, Node, ReactFlowInstance } from '@xyflow/react';
 
 /** Data for rendering a stuff (data item) in the StuffViewer component. */
@@ -237,6 +237,8 @@ interface ControllerGroupData {
     isCollapsed?: boolean;
     onToggleCollapse?: () => void;
     onToggleFold?: (options?: FoldToggleOptions) => void;
+    validation?: NodeValidationSummary;
+    onValidationBadgeClick?: () => void;
 }
 declare function ControllerGroupNode({ data }: {
     data: ControllerGroupData;
@@ -266,6 +268,10 @@ interface PipeCardData {
     direction?: PipeCardDirection;
     /** When set, the card renders an unfold button that invokes this callback. */
     onExpand?: (options?: FoldToggleOptions) => void;
+    /** Validation decoration (severity ring + count badge), stamped by GraphViewer. */
+    validation?: NodeValidationSummary;
+    /** Badge click handler (opens the validation panel), stamped alongside `validation`. */
+    onValidationBadgeClick?: () => void;
 }
 
 interface PipeCardNodeProps {