@pipelex/mthds-ui 0.13.0 → 0.15.0

package/dist/graph/index.js

@@ -1,4 +1,4 @@
-import "../chunk-L24K3TZU.js";
+import "../chunk-QD5YDMWV.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-O62372BD.js";
 import {
   ARROW_CLOSED_MARKER,
   CONTROLLER_PADDING_BOTTOM,
@@ -52,13 +55,15 @@ import {
   isDryGraphSpec,
   isStaticGraphSpec,
   isStuffNodeId,
+  makePipeRef,
   nodeHeight,
   nodeWidth,
+  parsePipeRef,
   stuffDigestFromId,
   stuffNodeId,
   toolbarOrientation,
   toolbarSide
-} from "../chunk-IMQ7MVYL.js";
+} from "../chunk-YC7TW3BW.js";
 import "../chunk-2NMEKWO5.js";
 export {
   ARROW_CLOSED_MARKER,
@@ -85,6 +90,7 @@ export {
   VALIDATION_STATE,
   applyControllers,
   applyFolds,
+  applyValidationDecorations,
   asPipeCallNode,
   buildChildToControllerMap,
   buildContainmentChain,
@@ -94,6 +100,7 @@ export {
   buildElkGraph,
   buildGraph,
   buildPipeCardPayload,
+  buildValidationDecorations,
   estimateNodeDimensions,
   extractAbsolutePositions,
   findCousinControllers,
@@ -107,11 +114,14 @@ export {
   isDryGraphSpec,
   isStaticGraphSpec,
   isStuffNodeId,
+  makePipeRef,
   nodeHeight,
   nodeWidth,
   outermostFoldedAncestor,
   outputPortId,
+  parsePipeRef,
   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-DFIZ_rx6.js';
+export { p as PipeOperatorType } from '../../types-DFIZ_rx6.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 {