@pipelex/mthds-ui 0.13.0 → 0.14.0

package/dist/standalone/graph-viewer.css

@@ -749,16 +749,22 @@ svg.react-flow__connectionline {
     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 {
@@ -1210,6 +1216,69 @@ svg.react-flow__connectionline {
   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;
+  }
+}
+
 /* ─── StuffViewer component styles ────────────────────────────────────────── */
 /* StuffViewer is also exported standalone (used outside GraphViewer — e.g.
  * docs pages, embedded previews). The theme tokens are normally applied to