@pipelex/mthds-ui 0.6.3 → 0.6.5

package/dist/graph/react/stuff/StuffViewer.css

@@ -1,16 +1,21 @@
 /* ─── StuffViewer component styles ────────────────────────────────────────── */
-/* Uses CSS custom properties for consumer theming. Defaults match graph-core.css. */
+/* StuffViewer is also exported standalone (used outside GraphViewer — e.g.
+ * docs pages, embedded previews). The theme tokens are normally applied to
+ * the GraphViewer container, but when this component is rendered on its own
+ * those tokens may not be set. The fallbacks below match the dark palette
+ * from `graphConfig.ts` (DARK_PALETTE_COLORS) so the component always
+ * renders with valid colors and fonts. */
 
 .stuff-viewer {
-  --sv-bg: var(--color-bg, #0a0a0a);
-  --sv-surface: var(--color-surface, #16213e);
-  --sv-surface-hover: var(--color-surface-hover, #1f2b47);
-  --sv-border: var(--color-border, #2a3a5a);
-  --sv-text: var(--color-text, #e2e8f0);
-  --sv-text-muted: var(--color-text-muted, #94a3b8);
-  --sv-accent: var(--color-accent, #3b82f6);
-  --sv-success: #10b981;
-  --sv-success-bg: rgba(16, 185, 129, 0.2);
+  --sv-bg: var(--surface-page, #0a0a0a);
+  --sv-surface: var(--surface-panel, #111118);
+  --sv-surface-hover: var(--surface-elevated, rgba(255, 255, 255, 0.06));
+  --sv-border: var(--border-default, rgba(255, 255, 255, 0.1));
+  --sv-text: var(--text-default, #e2e8f0);
+  --sv-text-muted: var(--text-muted, #94a3b8);
+  --sv-accent: var(--color-accent, #8be9fd);
+  --sv-success: var(--color-success, #50fa7b);
+  --sv-success-bg: var(--color-success-bg, rgba(80, 250, 123, 0.15));
   --sv-radius: 4px;
   --sv-font-sans: var(
     --font-sans,
@@ -90,7 +95,7 @@
 
 .stuff-viewer-tab--active {
   background: var(--sv-accent);
-  color: #fff;
+  color: var(--text-on-accent, #0e0e0e);
 }
 
 /* ─── Action buttons ─────────────────────────────────────────────────────── */
@@ -305,3 +310,25 @@ button.stuff-viewer-local-file--button:focus-visible {
   font-style: italic;
   font-size: 13px;
 }
+
+.stuff-viewer-error {
+  border: 1px solid var(--color-status-failed, #ff5555);
+  border-radius: 6px;
+  padding: 12px;
+  background: rgba(255, 85, 85, 0.08);
+}
+
+.stuff-viewer-error-title {
+  color: var(--color-status-failed, #ff5555);
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.stuff-viewer-error-detail {
+  color: var(--sv-text-muted);
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}

package/dist/graph/react/viewer/GraphToolbar.css

@@ -1,4 +1,6 @@
 /* ─── Graph Toolbar — floating controls over the graph background ─────── */
+/* Token-only styling: theme switching happens by swapping `--surface-*`,   */
+/* `--text-*`, `--border-*`, and `--color-accent` values on the container.  */
 
 .graph-toolbar {
   position: absolute;
@@ -20,9 +22,9 @@
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background: rgba(17, 17, 24, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #cbd5e1;
+  background: var(--surface-overlay);
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
   backdrop-filter: blur(6px);
   transition:
     background 0.15s,
@@ -31,45 +33,41 @@
 }
 
 .graph-toolbar-btn:hover {
-  background: rgba(30, 30, 40, 0.9);
-  color: #f1f5f9;
-  border-color: rgba(255, 255, 255, 0.18);
+  background: var(--surface-overlay-hover);
+  color: var(--text-primary);
+  border-color: var(--border-strong);
 }
 
 .graph-toolbar-btn:focus-visible {
-  outline: 2px solid rgba(59, 130, 246, 0.6);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 1px;
 }
 
 .graph-toolbar-btn--active {
-  background: #3b82f6;
-  border-color: #3b82f6;
-  color: #ffffff;
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--text-on-accent);
 }
 
 .graph-toolbar-btn--active:hover {
-  background: #2563eb;
-  border-color: #2563eb;
-  color: #ffffff;
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--text-on-accent);
+  filter: brightness(1.1);
 }
 
-.graph-toolbar-btn:disabled {
+.graph-toolbar-btn:disabled,
+.graph-toolbar-btn:disabled:hover {
   opacity: 0.4;
   cursor: not-allowed;
-  background: rgba(17, 17, 24, 0.6);
-  color: #64748b;
-  border-color: rgba(255, 255, 255, 0.06);
-}
-
-.graph-toolbar-btn:disabled:hover {
-  background: rgba(17, 17, 24, 0.6);
-  color: #64748b;
-  border-color: rgba(255, 255, 255, 0.06);
+  background: var(--surface-overlay-disabled);
+  color: var(--text-dim);
+  border-color: var(--border-subtle);
 }
 
 .graph-toolbar-separator {
   width: 1px;
   height: 18px;
-  background: rgba(255, 255, 255, 0.12);
+  background: var(--border-default);
   margin: 0 2px;
 }

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { A as ARROW_CLOSED_MARKER, p as CONTROLLER_PADDING_BOTTOM, q as CONTROLLER_PADDING_TOP, r as CONTROLLER_PADDING_X, C as ConceptInfo, D as DataflowAnalysis, E as EDGE_TYPE, s as EdgeType, t as FOLD_MODE, u as FieldResolution, F as FoldMode, g as FoldToggleOptions, v as GRAPH_DIRECTION, d as GraphConfig, m as GraphData, e as GraphDirection, a as GraphEdge, b as GraphNode, G as GraphNodeData, c as GraphSpec, w as GraphSpecEdge, x as GraphSpecEdgeKind, i as GraphSpecNode, y as GraphSpecNodeError, z as GraphSpecNodeIo, j as GraphSpecNodeIoItem, B as GraphSpecNodeTiming, L as LabelDescriptor, o as LayoutConfig, N as NODE_TYPE_CONTROLLER, H as NODE_TYPE_PIPE_CARD, I as NODE_TYPE_STUFF, J as NodeKind, K as PipeBatchBlueprint, M as PipeBlueprintBase, l as PipeBlueprintUnion, n as PipeCardPayload, O as PipeComposeBlueprint, Q as PipeComposeConstructBlueprint, R as PipeComposeConstructField, S as PipeConditionBlueprint, f as PipeControllerType, T as PipeExtractBlueprint, U as PipeFuncBlueprint, V as PipeImgGenBlueprint, W as PipeLLMBlueprint, k as PipeOperatorType, X as PipeParallelBlueprint, Y as PipeSearchBlueprint, Z as PipeSequenceBlueprint, P as PipeStatus, h as PipeType, _ as STUFF_ID_PREFIX, $ as StuffRole, a0 as StuffSpecInfo, a1 as SubPipeSpec, a2 as TemplateBlueprint, a3 as isStuffNodeId, a4 as nodeHeight, a5 as nodeWidth, a6 as stuffDigestFromId, a7 as stuffNodeId } from './types-C7rr1Egj.js';
-export { ControllerRect, DEFAULT_GRAPH_CONFIG, ElkPositionResult, LayoutResult, MAX_VISIBLE_CONTROLLER_CHILDREN, applyControllers, applyFolds, buildChildToControllerMap, buildContainmentChain, buildControllerNodes, buildDataflowAnalysis, buildDataflowGraph, buildElkGraph, buildGraph, buildPipeCardPayload, estimateNodeDimensions, extractAbsolutePositions, findCousinControllers, getConceptInfo, getLayoutedElements, getPaletteColors, getPipeBlueprint, inputPortId, outermostFoldedAncestor, outputPortId, resolveConceptRef } from './graph/index.js';
+export { A as ARROW_CLOSED_MARKER, r as CONTROLLER_PADDING_BOTTOM, s as CONTROLLER_PADDING_TOP, t as CONTROLLER_PADDING_X, C as ConceptInfo, D as DataflowAnalysis, E as EDGE_TYPE, u as EdgeType, v as FOLD_MODE, w as FieldResolution, F as FoldMode, h as FoldToggleOptions, x as GRAPH_DIRECTION, y as GRAPH_THEME, d as GraphConfig, o as GraphData, e as GraphDirection, a as GraphEdge, b as GraphNode, G as GraphNodeData, c as GraphSpec, z as GraphSpecEdge, B as GraphSpecEdgeKind, j as GraphSpecNode, H as GraphSpecNodeError, I as GraphSpecNodeIo, k as GraphSpecNodeIoItem, J as GraphSpecNodeTiming, f as GraphTheme, K as KNOWN_PIPE_TYPES, L as LabelDescriptor, q as LayoutConfig, N as NODE_TYPE_CONTROLLER, M as NODE_TYPE_PIPE_CARD, O as NODE_TYPE_STUFF, Q as NodeKind, R as PipeBatchBlueprint, S as PipeBlueprintBase, n as PipeBlueprintUnion, m as PipeCallNode, p as PipeCardPayload, T as PipeComposeBlueprint, U as PipeComposeConstructBlueprint, V as PipeComposeConstructField, W as PipeConditionBlueprint, g as PipeControllerType, X as PipeExtractBlueprint, Y as PipeFuncBlueprint, Z as PipeImgGenBlueprint, _ as PipeLLMBlueprint, l as PipeOperatorType, $ as PipeParallelBlueprint, a0 as PipeSearchBlueprint, a1 as PipeSequenceBlueprint, P as PipeStatus, i as PipeType, a2 as STUFF_ID_PREFIX, a3 as StuffRole, a4 as StuffSpecInfo, a5 as SubPipeSpec, a6 as TemplateBlueprint, a7 as isStuffNodeId, a8 as nodeHeight, a9 as nodeWidth, aa as stuffDigestFromId, ab as stuffNodeId } from './types-DJTrDxjV.js';
+export { ControllerRect, DARK_PALETTE_COLORS, DEFAULT_GRAPH_CONFIG, ElkPositionResult, GraphSpecValidationError, LIGHT_PALETTE_COLORS, LayoutResult, MAX_VISIBLE_CONTROLLER_CHILDREN, applyControllers, applyFolds, asPipeCallNode, buildChildToControllerMap, buildContainmentChain, buildControllerNodes, buildDataflowAnalysis, buildDataflowGraph, buildElkGraph, buildGraph, buildPipeCardPayload, estimateNodeDimensions, extractAbsolutePositions, findCousinControllers, getConceptInfo, getLayoutedElements, getPaletteColors, getPaletteForTheme, getPipeBlueprint, inputPortId, outermostFoldedAncestor, outputPortId, resolveConceptRef, validateGraphSpec } from './graph/index.js';
 import 'elkjs/lib/elk-api';

package/dist/index.js

@@ -1,13 +1,18 @@
-import "./chunk-IZ4FH2WM.js";
+import "./chunk-L24K3TZU.js";
 import {
   ARROW_CLOSED_MARKER,
   CONTROLLER_PADDING_BOTTOM,
   CONTROLLER_PADDING_TOP,
   CONTROLLER_PADDING_X,
+  DARK_PALETTE_COLORS,
   DEFAULT_GRAPH_CONFIG,
   EDGE_TYPE,
   FOLD_MODE,
   GRAPH_DIRECTION,
+  GRAPH_THEME,
+  GraphSpecValidationError,
+  KNOWN_PIPE_TYPES,
+  LIGHT_PALETTE_COLORS,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   NODE_TYPE_CONTROLLER,
   NODE_TYPE_PIPE_CARD,
@@ -15,6 +20,7 @@ import {
   STUFF_ID_PREFIX,
   applyControllers,
   applyFolds,
+  asPipeCallNode,
   buildChildToControllerMap,
   buildContainmentChain,
   buildControllerNodes,
@@ -29,6 +35,7 @@ import {
   getConceptInfo,
   getLayoutedElements,
   getPaletteColors,
+  getPaletteForTheme,
   getPipeBlueprint,
   inputPortId,
   isStuffNodeId,
@@ -38,18 +45,24 @@ import {
   outputPortId,
   resolveConceptRef,
   stuffDigestFromId,
-  stuffNodeId
-} from "./chunk-FHRUYFGV.js";
+  stuffNodeId,
+  validateGraphSpec
+} from "./chunk-ILX53OYM.js";
 import "./chunk-2NMEKWO5.js";
 export {
   ARROW_CLOSED_MARKER,
   CONTROLLER_PADDING_BOTTOM,
   CONTROLLER_PADDING_TOP,
   CONTROLLER_PADDING_X,
+  DARK_PALETTE_COLORS,
   DEFAULT_GRAPH_CONFIG,
   EDGE_TYPE,
   FOLD_MODE,
   GRAPH_DIRECTION,
+  GRAPH_THEME,
+  GraphSpecValidationError,
+  KNOWN_PIPE_TYPES,
+  LIGHT_PALETTE_COLORS,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   NODE_TYPE_CONTROLLER,
   NODE_TYPE_PIPE_CARD,
@@ -57,6 +70,7 @@ export {
   STUFF_ID_PREFIX,
   applyControllers,
   applyFolds,
+  asPipeCallNode,
   buildChildToControllerMap,
   buildContainmentChain,
   buildControllerNodes,
@@ -71,6 +85,7 @@ export {
   getConceptInfo,
   getLayoutedElements,
   getPaletteColors,
+  getPaletteForTheme,
   getPipeBlueprint,
   inputPortId,
   isStuffNodeId,
@@ -80,6 +95,7 @@ export {
   outputPortId,
   resolveConceptRef,
   stuffDigestFromId,
-  stuffNodeId
+  stuffNodeId,
+  validateGraphSpec
 };
 //# sourceMappingURL=index.js.map