@pipelex/mthds-ui 0.8.0 → 0.10.0

package/dist/graph/index.d.ts

@@ -1,5 +1,5 @@
-import { j as GraphSpecNode, m as PipeCallNode, c as GraphSpec, D as DataflowAnalysis, C as ConceptInfo, n as PipeBlueprintUnion, o as GraphData, p as PipeCardPayload, h as FoldToggleOptions, b as GraphNode, a as GraphEdge, e as GraphDirection, q as LayoutConfig, d as GraphConfig, f as GraphTheme } from '../types-D7NALhbw.js';
-export { A as ARROW_CLOSED_MARKER, r as CONTROLLER_PADDING_BOTTOM, s as CONTROLLER_PADDING_TOP, t as CONTROLLER_PADDING_X, E as EDGE_TYPE, u as EdgeType, v as FOLD_MODE, w as FieldResolution, F as FoldMode, x as GRAPH_DIRECTION, y as GRAPH_THEME, G as GraphNodeData, z as GraphSpecEdge, B as GraphSpecEdgeKind, H as GraphSpecNodeError, I as GraphSpecNodeIo, k as GraphSpecNodeIoItem, J as GraphSpecNodeTiming, K as KNOWN_PIPE_TYPES, L as LabelDescriptor, 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, 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, a2 as PipeSignatureBlueprint, P as PipeStatus, i as PipeType, a3 as STUFF_ID_PREFIX, a4 as StuffRole, a5 as StuffSpecInfo, a6 as SubPipeSpec, a7 as TemplateBlueprint, a8 as isStuffNodeId, a9 as nodeHeight, aa as nodeWidth, ab as stuffDigestFromId, ac as stuffNodeId } from '../types-D7NALhbw.js';
+import { k as GraphSpecNode, n as PipeCallNode, c as GraphSpec, D as DataflowAnalysis, C as ConceptInfo, o as PipeBlueprintUnion, p as GraphData, q as PipeCardPayload, i as FoldToggleOptions, b as GraphNode, a as GraphEdge, e as GraphDirection, r as LayoutConfig, d as GraphConfig, T as ToolbarPosition, g as GraphTheme } from '../types-CEDZIAmh.js';
+export { A as ARROW_CLOSED_MARKER, s as CONTROLLER_PADDING_BOTTOM, t as CONTROLLER_PADDING_TOP, u as CONTROLLER_PADDING_X, E as EDGE_TYPE, v as EdgeType, w as FOLD_MODE, x as FieldResolution, F as FoldMode, y as GRAPH_DIRECTION, z as GRAPH_THEME, B as GRAPH_THEME_MODE, G as GraphNodeData, H as GraphSpecEdge, I as GraphSpecEdgeKind, J as GraphSpecNodeError, K as GraphSpecNodeIo, l as GraphSpecNodeIoItem, M as GraphSpecNodeTiming, f as GraphThemeMode, N as KNOWN_PIPE_TYPES, L as LabelDescriptor, O as NODE_TYPE_CONTROLLER, Q as NODE_TYPE_PIPE_CARD, R as NODE_TYPE_STUFF, S as NodeKind, U as PipeBatchBlueprint, V as PipeBlueprintBase, W as PipeComposeBlueprint, X as PipeComposeConstructBlueprint, Y as PipeComposeConstructField, Z as PipeConditionBlueprint, h as PipeControllerType, _ as PipeExtractBlueprint, $ as PipeFuncBlueprint, a0 as PipeImgGenBlueprint, a1 as PipeLLMBlueprint, m as PipeOperatorType, a2 as PipeParallelBlueprint, a3 as PipeSearchBlueprint, a4 as PipeSequenceBlueprint, a5 as PipeSignatureBlueprint, P as PipeStatus, j as PipeType, a6 as STUFF_ID_PREFIX, a7 as StuffRole, a8 as StuffSpecInfo, a9 as SubPipeSpec, aa as TOOLBAR_POSITION, ab as TemplateBlueprint, ac as ToolbarOrientation, ad as ToolbarSide, ae as isStuffNodeId, af as nodeHeight, ag as nodeWidth, ah as stuffDigestFromId, ai as stuffNodeId, aj as toolbarOrientation, ak as toolbarSide } from '../types-CEDZIAmh.js';
 import { ElkNode } from 'elkjs/lib/elk-api';
 
 /**
@@ -192,7 +192,9 @@ declare function applyControllers(layoutedNodes: GraphNode[], layoutedEdges: Gra
 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;
+declare const DEFAULT_GRAPH_CONFIG: GraphConfig & {
+    toolbarPosition: ToolbarPosition;
+};
 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, GraphSpecNode, GraphSpecValidationError, GraphTheme, LIGHT_PALETTE_COLORS, LayoutConfig, type LayoutResult, MAX_VISIBLE_CONTROLLER_CHILDREN, PipeBlueprintUnion, PipeCallNode, PipeCardPayload, 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, GraphSpec, 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 };

package/dist/graph/index.js

@@ -10,6 +10,7 @@ import {
   FOLD_MODE,
   GRAPH_DIRECTION,
   GRAPH_THEME,
+  GRAPH_THEME_MODE,
   GraphSpecValidationError,
   KNOWN_PIPE_TYPES,
   LIGHT_PALETTE_COLORS,
@@ -18,6 +19,7 @@ import {
   NODE_TYPE_PIPE_CARD,
   NODE_TYPE_STUFF,
   STUFF_ID_PREFIX,
+  TOOLBAR_POSITION,
   applyControllers,
   applyFolds,
   asPipeCallNode,
@@ -46,8 +48,10 @@ import {
   resolveConceptRef,
   stuffDigestFromId,
   stuffNodeId,
+  toolbarOrientation,
+  toolbarSide,
   validateGraphSpec
-} from "../chunk-7VQUZ35P.js";
+} from "../chunk-D2ID5Z3Y.js";
 import "../chunk-2NMEKWO5.js";
 export {
   ARROW_CLOSED_MARKER,
@@ -60,6 +64,7 @@ export {
   FOLD_MODE,
   GRAPH_DIRECTION,
   GRAPH_THEME,
+  GRAPH_THEME_MODE,
   GraphSpecValidationError,
   KNOWN_PIPE_TYPES,
   LIGHT_PALETTE_COLORS,
@@ -68,6 +73,7 @@ export {
   NODE_TYPE_PIPE_CARD,
   NODE_TYPE_STUFF,
   STUFF_ID_PREFIX,
+  TOOLBAR_POSITION,
   applyControllers,
   applyFolds,
   asPipeCallNode,
@@ -96,6 +102,8 @@ export {
   resolveConceptRef,
   stuffDigestFromId,
   stuffNodeId,
+  toolbarOrientation,
+  toolbarSide,
   validateGraphSpec
 };
 //# sourceMappingURL=index.js.map

package/dist/graph/react/index.css

@@ -717,15 +717,23 @@ button.stuff-viewer-local-file--button:focus-visible {
 }
 
 /* src/graph/react/viewer/GraphToolbar.css */
+.graph-toolbar-panel {
+  z-index: 11;
+}
 .graph-toolbar {
-  position: absolute;
-  top: 8px;
   display: flex;
   align-items: center;
   gap: 4px;
-  z-index: 11;
   pointer-events: auto;
 }
+.graph-toolbar--vertical {
+  flex-direction: column;
+}
+.graph-toolbar--vertical .graph-toolbar-separator {
+  width: 18px;
+  height: 1px;
+  margin: 2px 0;
+}
 .graph-toolbar-btn {
   all: unset;
   box-sizing: border-box;

package/dist/graph/react/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/graph/react/stuff/StuffViewer.css","../../../src/graph/react/detail/DetailPanel.css","../../../src/graph/react/viewer/GraphToolbar.css"],"sourcesContent":["/* ─── StuffViewer component styles ────────────────────────────────────────── */\n/* StuffViewer is also exported standalone (used outside GraphViewer — e.g.\n * docs pages, embedded previews). The theme tokens are normally applied to\n * the GraphViewer container, but when this component is rendered on its own\n * those tokens may not be set. The fallbacks below match the dark palette\n * from `graphConfig.ts` (DARK_PALETTE_COLORS) so the component always\n * renders with valid colors and fonts. */\n\n.stuff-viewer {\n  --sv-bg: var(--surface-page, #0a0a0a);\n  --sv-surface: var(--surface-panel, #111118);\n  --sv-surface-hover: var(--surface-elevated, rgba(255, 255, 255, 0.06));\n  --sv-border: var(--border-default, rgba(255, 255, 255, 0.1));\n  --sv-text: var(--text-default, #e2e8f0);\n  --sv-text-muted: var(--text-muted, #94a3b8);\n  --sv-accent: var(--color-accent, #8be9fd);\n  --sv-success: var(--color-success, #50fa7b);\n  --sv-success-bg: var(--color-success-bg, rgba(80, 250, 123, 0.15));\n  --sv-radius: 4px;\n  --sv-font-sans: var(\n    --font-sans,\n    \"Inter\",\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    sans-serif\n  );\n  --sv-font-mono: var(--font-mono, \"JetBrains Mono\", \"Monaco\", \"Menlo\", monospace);\n\n  font-family: var(--sv-font-sans);\n  color: var(--sv-text);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n/* ─── Header ─────────────────────────────────────────────────────────────── */\n\n.stuff-viewer-header {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 12px 16px 8px;\n  border-bottom: 1px solid var(--sv-border);\n  flex-shrink: 0;\n}\n\n.stuff-viewer-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--sv-text);\n  margin: 0;\n}\n\n.stuff-viewer-subtitle {\n  font-size: 12px;\n  color: var(--sv-text-muted);\n  margin: 0;\n}\n\n/* ─── Toolbar: tabs + action buttons ─────────────────────────────────────── */\n\n.stuff-viewer-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 16px;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.stuff-viewer-tabs {\n  display: flex;\n  gap: 4px;\n}\n\n.stuff-viewer-tab {\n  padding: 5px 10px;\n  border-radius: var(--sv-radius);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  background: var(--sv-surface-hover);\n  color: var(--sv-text-muted);\n  border: none;\n  transition:\n    background 0.15s,\n    color 0.15s;\n}\n\n.stuff-viewer-tab:hover {\n  background: var(--sv-border);\n  color: var(--sv-text);\n}\n\n.stuff-viewer-tab--active {\n  background: var(--sv-accent);\n  color: var(--text-on-accent, #0e0e0e);\n}\n\n/* ─── Action buttons ─────────────────────────────────────────────────────── */\n\n.stuff-viewer-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.stuff-viewer-action-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: var(--sv-radius);\n  cursor: pointer;\n  background: var(--sv-surface-hover);\n  color: var(--sv-text-muted);\n  border: none;\n  transition:\n    background 0.15s,\n    color 0.15s;\n}\n\n.stuff-viewer-action-btn:hover {\n  background: var(--sv-border);\n  color: var(--sv-text);\n}\n\n.stuff-viewer-action-btn--copied {\n  background: var(--sv-success-bg);\n  color: var(--sv-success);\n}\n\n.stuff-viewer-action-btn svg {\n  width: 14px;\n  height: 14px;\n  fill: currentColor;\n}\n\n/* ─── Content area ───────────────────────────────────────────────────────── */\n\n.stuff-viewer-content {\n  flex: 1;\n  overflow: auto;\n  padding: 12px 16px 16px;\n  min-height: 0;\n}\n\n/* Pre-formatted text (JSON and Pretty tabs) */\n.stuff-viewer-pre {\n  font-family: var(--sv-font-mono);\n  font-size: 11px;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  margin: 0;\n  color: var(--sv-text-muted);\n}\n\n.stuff-viewer-pre--nowrap {\n  white-space: pre;\n  word-wrap: normal;\n  line-height: 1;\n  overflow-x: auto;\n  padding-right: 20px;\n}\n\n/* HTML content */\n.stuff-viewer-html {\n  font-family: var(--sv-font-sans);\n  font-size: 11px;\n  color: var(--sv-text-muted);\n  line-height: 1.5;\n}\n\n.stuff-viewer-html table {\n  border-collapse: collapse;\n  width: 100%;\n}\n\n.stuff-viewer-html th,\n.stuff-viewer-html td {\n  border: 1px solid var(--sv-border);\n  padding: 8px 12px;\n  text-align: left;\n}\n\n.stuff-viewer-html th {\n  background: var(--sv-surface-hover);\n  color: var(--sv-text);\n  font-weight: 600;\n}\n\n.stuff-viewer-html tr:hover {\n  background: var(--sv-surface-hover);\n}\n\n.stuff-viewer-html a {\n  color: var(--sv-accent);\n  text-decoration: none;\n}\n\n.stuff-viewer-html a:hover {\n  text-decoration: underline;\n}\n\n.stuff-viewer-html ul {\n  list-style: none;\n  padding-left: 0;\n  margin: 0;\n}\n\n/* PDF embed */\n.stuff-viewer-pdf {\n  min-height: 400px;\n  height: 100%;\n}\n\n.stuff-viewer-pdf embed {\n  width: 100%;\n  height: 100%;\n  min-height: 500px;\n  border: none;\n}\n\n/* Image content */\n.stuff-viewer-image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 200px;\n}\n\n.stuff-viewer-image img {\n  max-width: 100%;\n  max-height: 70vh;\n  object-fit: contain;\n}\n\n/* Local file fallback (file:// URLs that can't render inline) */\n.stuff-viewer-local-file {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  border-radius: 6px;\n  background: var(--sv-surface);\n  border: 1px solid var(--sv-border);\n}\n\n/* Clickable variant — used when an open-externally action is bound (e.g. PDF\n   fallback in hosts that can't render <embed type=\"application/pdf\">). */\nbutton.stuff-viewer-local-file--button {\n  width: 100%;\n  text-align: left;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease;\n}\n\nbutton.stuff-viewer-local-file--button:hover {\n  background: var(--sv-surface-hover, var(--sv-surface));\n  border-color: var(--sv-accent, var(--sv-border));\n}\n\nbutton.stuff-viewer-local-file--button:focus-visible {\n  outline: 2px solid var(--sv-accent, var(--sv-border));\n  outline-offset: 2px;\n}\n\n.stuff-viewer-local-file-icon {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  color: var(--sv-text-muted);\n}\n\n.stuff-viewer-local-file-icon svg {\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n}\n\n.stuff-viewer-local-file-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.stuff-viewer-local-file-name {\n  font-family: var(--sv-font-mono);\n  font-size: 12px;\n  color: var(--sv-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.stuff-viewer-local-file-hint {\n  font-size: 11px;\n  color: var(--sv-text-muted);\n  margin-top: 2px;\n}\n\n/* Placeholder for missing data */\n.stuff-viewer-placeholder {\n  color: var(--sv-text-muted);\n  font-style: italic;\n  font-size: 13px;\n}\n\n.stuff-viewer-error {\n  border: 1px solid var(--color-status-failed, #ff5555);\n  border-radius: 6px;\n  padding: 12px;\n  background: rgba(255, 85, 85, 0.08);\n}\n\n.stuff-viewer-error-title {\n  color: var(--color-status-failed, #ff5555);\n  font-weight: 600;\n  font-size: 13px;\n  margin-bottom: 4px;\n}\n\n.stuff-viewer-error-detail {\n  color: var(--sv-text-muted);\n  font-family: var(--font-mono, monospace);\n  font-size: 12px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n","/* ─── Detail Panel — sliding side panel for node inspection ─────────────── */\n/* Token-only — all colors come from the active theme palette on the         */\n/* container. See `graphConfig.ts` for token definitions.                    */\n\n.detail-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 380px;\n  height: 100%;\n  background: var(--surface-panel);\n  border-left: 1px solid var(--border-default);\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-sans);\n  color: var(--text-default);\n  overflow: hidden;\n  transition: transform 0.2s ease;\n}\n\n.detail-panel--closed {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Resize handle — left edge drag target ────────────────────────────── */\n\n.detail-panel-resize-handle {\n  position: absolute;\n  top: 0;\n  left: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 2;\n  background: transparent;\n}\n\n/* Visible bar — narrower than the hit area */\n.detail-panel-resize-handle::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 5px;\n  width: 2px;\n  height: 100%;\n  background: transparent;\n  transition: background 0.15s;\n}\n\n.detail-panel-resize-handle:hover::before,\n.detail-panel--dragging .detail-panel-resize-handle::before {\n  background: var(--color-accent);\n  opacity: 0.6;\n}\n\n/* Grip indicator — visible on hover */\n.detail-panel-resize-handle::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 2px;\n  height: 24px;\n  border-radius: 1px;\n  background: transparent;\n  transition: background 0.15s;\n}\n\n.detail-panel-resize-handle:hover::after,\n.detail-panel--dragging .detail-panel-resize-handle::after {\n  background: var(--color-accent);\n}\n\n/* Disable transition during drag for smooth resizing */\n.detail-panel--dragging {\n  transition: none;\n}\n\n.detail-panel--dragging .detail-panel-content {\n  pointer-events: none;\n}\n\n/* ─── Close row — scrolls away with the content (intentionally NOT pinned) ─ */\n/* The close button is part of the content's top, not panel chrome: it\n * scrolls out of view with the content, and closing the panel means\n * scrolling back up. The negative margin tucks the following section up\n * beside it so the row doesn't cost a full line of vertical space. */\n\n.detail-panel-close-row {\n  display: flex;\n  justify-content: flex-end;\n  /* Pull the next section up by exactly this row's height + the column\n   * gap, so the close button sits ON the first content line (concept /\n   * pipe header), right-aligned — not on its own line above it. */\n  margin-bottom: -40px;\n}\n\n.detail-panel-close {\n  all: unset;\n  cursor: pointer;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  color: var(--text-dim);\n  font-size: 18px;\n  line-height: 1;\n  /* Above the sticky pipe header (z 1) so the X is visible at rest while\n   * sharing its line; on scroll it briefly slides over the stuck header's\n   * empty right side before leaving the viewport. */\n  z-index: 2;\n}\n\n.detail-panel-close:hover {\n  color: var(--text-muted);\n  background: var(--surface-elevated);\n}\n\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 16px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n/* ─── Sticky header (pipe info + IO stays pinned at top) ───────────────── */\n\n.detail-sticky-header {\n  position: sticky;\n  top: -12px; /* must mirror .detail-panel-content's top padding */\n  z-index: 1;\n  background: var(--surface-panel);\n  padding-top: 12px;\n  margin-top: -12px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n/* ─── Shared detail components ──────────────────────────────────────────── */\n\n.detail-section-label {\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--text-dim);\n  margin-bottom: 6px;\n}\n\n.detail-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-badge {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px 7px;\n  border-radius: 4px;\n  white-space: nowrap;\n}\n\n.detail-badge--operator {\n  background: var(--color-pipe);\n  color: var(--text-on-accent);\n}\n\n.detail-badge--controller {\n  background: var(--color-batch-item);\n  color: var(--text-on-accent);\n}\n\n.detail-pipe-code {\n  font-family: var(--font-mono);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--color-pipe);\n}\n\n.detail-pipe-code--controller {\n  color: var(--color-batch-item);\n}\n\n.detail-status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-status-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n.detail-status-label {\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: capitalize;\n}\n\n.detail-duration {\n  font-size: 11px;\n  color: var(--text-dim);\n  font-family: var(--font-mono);\n}\n\n.detail-description {\n  font-size: 12px;\n  color: var(--text-muted);\n  line-height: 1.5;\n}\n\n/* ─── IO Pills ──────────────────────────────────────────────────────────── */\n\n.detail-io-pill {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  padding: 3px 8px;\n  border-radius: 4px;\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n}\n\n.detail-io-name {\n  font-family: var(--font-mono);\n  color: var(--text-default);\n}\n\n.detail-io-concept {\n  color: var(--text-dim);\n  font-size: 10px;\n}\n\n.detail-io-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* ─── Blueprint-specific sections ───────────────────────────────────────── */\n\n.detail-prompt-block {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-muted);\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n  border-radius: 6px;\n  padding: 10px 12px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-y: auto;\n  line-height: 1.5;\n}\n\n.detail-prompt-block--collapsed {\n  max-height: 300px;\n}\n\n.detail-prompt-block--expanded {\n  max-height: none;\n  overflow-y: visible;\n}\n\n.detail-prompt-expand-btn {\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 9px;\n  color: var(--text-dim);\n  padding: 2px 6px;\n  border-radius: 3px;\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n  transition: color 0.15s;\n}\n\n.detail-prompt-expand-btn:hover {\n  color: var(--text-muted);\n}\n\n.detail-kv-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start; /* top-align so the label stays next to the first line of a wrapped value */\n  gap: 12px;\n  font-size: 11px;\n  padding: 3px 0;\n}\n\n.detail-kv-key {\n  color: var(--text-dim);\n  flex-shrink: 0; /* label stays at its natural width */\n}\n\n.detail-kv-value {\n  font-family: var(--font-mono);\n  color: var(--text-default);\n  flex: 1 1 0;\n  min-width: 0;\n  text-align: right;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n}\n\n/* ─── Field block: labeled multi-line text (for long resolved values) ─── */\n\n.detail-field-block {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.detail-field-block-label {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  color: var(--text-dim);\n}\n\n.detail-field-block-value {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-default);\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n  border-radius: 6px;\n  padding: 8px 10px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.5;\n  max-height: 240px;\n  overflow-y: auto;\n}\n\n/* ─── Nested construct sub-section header ───────────────────────────────── */\n/* Rendered before each nested sub-construct's recursive contents. The left\n * border + indent provides a visual \"branch\" cue so the tree structure is\n * obvious without needing collapse state. */\n\n.detail-nested-header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n  padding: 4px 0 4px 8px;\n  border-left: 2px solid var(--color-success);\n}\n\n.detail-nested-header-name {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-default);\n}\n\n.detail-nested-header-meta {\n  font-family: var(--font-mono);\n  font-size: 9px;\n  color: var(--text-dim);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n/* ─── Concept schema table ──────────────────────────────────────────────── */\n\n.detail-schema-table {\n  width: 100%;\n  font-size: 11px;\n  border-collapse: collapse;\n}\n\n.detail-schema-table th {\n  text-align: left;\n  font-weight: 700;\n  color: var(--text-dim);\n  font-size: 9px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  padding: 4px 6px;\n  border-bottom: 1px solid var(--border-default);\n}\n\n.detail-schema-table td {\n  padding: 4px 6px;\n  border-bottom: 1px solid var(--border-subtle);\n  color: var(--text-muted);\n}\n\n.detail-schema-field {\n  font-family: var(--font-mono);\n  color: var(--text-default);\n}\n\n.detail-schema-type {\n  color: var(--color-accent);\n}\n\n.detail-schema-required {\n  color: var(--color-pipe);\n  font-size: 9px;\n}\n\n/* ─── Error section ─────────────────────────────────────────────────────── */\n\n.detail-error {\n  background: var(--color-error-bg);\n  border: 1px solid var(--color-error-border);\n  border-radius: 6px;\n  padding: 10px 12px;\n}\n\n.detail-error-type {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--color-error);\n  margin-bottom: 4px;\n}\n\n.detail-error-message {\n  font-size: 11px;\n  color: var(--text-muted);\n  line-height: 1.5;\n}\n\n.detail-error-stack {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  color: var(--text-dim);\n  margin-top: 8px;\n  max-height: 150px;\n  overflow-y: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* ─── Steps list (PipeSequence, PipeCondition outcomes) ─────────────────── */\n\n.detail-steps-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.detail-step-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 11px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n}\n\n.detail-step-index {\n  color: var(--text-dim);\n  font-size: 10px;\n  font-weight: 700;\n  min-width: 16px;\n}\n\n.detail-step-code {\n  font-family: var(--font-mono);\n  color: var(--text-default);\n}\n\n/* ─── Tags/Metrics ──────────────────────────────────────────────────────── */\n\n.detail-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.detail-tag {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 3px;\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n}\n\n.detail-tag-key {\n  color: var(--text-dim);\n}\n\n.detail-tag-value {\n  color: var(--text-default);\n  font-family: var(--font-mono);\n}\n\n/* ─── Detail tabs (Data / Structure) ────────────────────────────────────── */\n\n.detail-tabs {\n  display: flex;\n  gap: 2px;\n  border-bottom: 1px solid var(--border-default);\n}\n\n.detail-tab {\n  all: unset;\n  cursor: pointer;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-dim);\n  padding: 5px 10px;\n  border-radius: 4px 4px 0 0;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  transition:\n    color 0.15s,\n    border-color 0.15s;\n}\n\n.detail-tab:hover {\n  color: var(--text-muted);\n}\n\n.detail-tab--active {\n  color: var(--text-default);\n  border-bottom-color: var(--color-accent);\n}\n\n/* `all: unset` strips the UA focus ring — restore a visible indicator for\n * keyboard users (WCAG 2.4.7) on every unset button in the panel. */\n.detail-tab:focus-visible,\n.detail-panel-close:focus-visible,\n.detail-prompt-expand-btn:focus-visible {\n  outline: 2px solid var(--color-accent);\n  outline-offset: 2px;\n}\n\n/* ─── Concept panel header ──────────────────────────────────────────────── */\n\n.detail-concept-code {\n  font-family: var(--font-mono);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--color-success);\n}\n\n.detail-concept-domain {\n  font-size: 11px;\n  color: var(--text-dim);\n}\n\n.detail-refines {\n  font-size: 11px;\n  color: var(--text-muted);\n}\n\n.detail-refines-code {\n  font-family: var(--font-mono);\n  color: var(--color-accent);\n}\n\n/* ─── Not available fallback ────────────────────────────────────────────── */\n\n.detail-not-available {\n  font-size: 12px;\n  color: var(--text-dim);\n  font-style: italic;\n  padding: 8px 0;\n}\n","/* ─── Graph Toolbar — floating controls over the graph background ─────── */\n/* Token-only styling: theme switching happens by swapping `--surface-*`,   */\n/* `--text-*`, `--border-*`, and `--color-accent` values on the container.  */\n\n.graph-toolbar {\n  position: absolute;\n  top: 8px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  z-index: 11;\n  pointer-events: auto;\n}\n\n.graph-toolbar-btn {\n  all: unset;\n  box-sizing: border-box;\n  cursor: pointer;\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  background: var(--surface-overlay);\n  border: 1px solid var(--border-default);\n  color: var(--text-secondary);\n  backdrop-filter: blur(6px);\n  transition:\n    background 0.15s,\n    color 0.15s,\n    border-color 0.15s;\n}\n\n.graph-toolbar-btn:hover {\n  background: var(--surface-overlay-hover);\n  color: var(--text-primary);\n  border-color: var(--border-strong);\n}\n\n.graph-toolbar-btn:focus-visible {\n  outline: 2px solid var(--focus-ring);\n  outline-offset: 1px;\n}\n\n.graph-toolbar-btn--active {\n  background: var(--color-accent);\n  border-color: var(--color-accent);\n  color: var(--text-on-accent);\n}\n\n.graph-toolbar-btn--active:hover {\n  background: var(--color-accent);\n  border-color: var(--color-accent);\n  color: var(--text-on-accent);\n  filter: brightness(1.1);\n}\n\n.graph-toolbar-btn:disabled,\n.graph-toolbar-btn:disabled:hover {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background: var(--surface-overlay-disabled);\n  color: var(--text-dim);\n  border-color: var(--border-subtle);\n}\n\n.graph-toolbar-separator {\n  width: 1px;\n  height: 18px;\n  background: var(--border-default);\n  margin: 0 2px;\n}\n"],"mappings":";AAQA,CAAC;AACC,WAAS,IAAI,cAAc,EAAE;AAC7B,gBAAc,IAAI,eAAe,EAAE;AACnC,sBAAoB,IAAI,kBAAkB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAChE,eAAa,IAAI,gBAAgB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACvD,aAAW,IAAI,cAAc,EAAE;AAC/B,mBAAiB,IAAI,YAAY,EAAE;AACnC,eAAa,IAAI,cAAc,EAAE;AACjC,gBAAc,IAAI,eAAe,EAAE;AACnC,mBAAiB,IAAI,kBAAkB,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AAC5D,eAAa;AACb,kBAAgB,KACd,WAAW,EACX,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,UAAU,EACV;AAEF,kBAAgB,IAAI,WAAW,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,EAAE;AAEtE,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,WAAS;AACT,kBAAgB;AAChB,UAAQ;AACV;AAIA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,WAAS,KAAK,KAAK;AACnB,iBAAe,IAAI,MAAM,IAAI;AAC7B,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACX,eAAa;AACb,SAAO,IAAI;AACX,UAAQ;AACV;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,UAAQ;AACV;AAIA,CAAC;AACC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,WAAS,IAAI;AACb,OAAK;AACL,eAAa;AACf;AAEA,CAAC;AACC,WAAS;AACT,OAAK;AACP;AAEA,CAAC;AACC,WAAS,IAAI;AACb,iBAAe,IAAI;AACnB,UAAQ;AACR,aAAW;AACX,eAAa;AACb,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ;AACR,cACE,WAAW,KAAK,EAChB,MAAM;AACV;AAEA,CAdC,gBAcgB;AACf,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,cAAY,IAAI;AAChB,SAAO,IAAI,gBAAgB,EAAE;AAC/B;AAIA,CAAC;AACC,WAAS;AACT,OAAK;AACP;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACR,iBAAe,IAAI;AACnB,UAAQ;AACR,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ;AACR,cACE,WAAW,KAAK,EAChB,MAAM;AACV;AAEA,CAhBC,uBAgBuB;AACtB,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAEA,CA1BC,wBA0BwB;AACvB,SAAO;AACP,UAAQ;AACR,QAAM;AACR;AAIA,CAAC;AACC,QAAM;AACN,YAAU;AACV,WAAS,KAAK,KAAK;AACnB,cAAY;AACd;AAGA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,eAAa;AACb,eAAa;AACb,aAAW;AACX,UAAQ;AACR,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa;AACb,aAAW;AACX,eAAa;AACb,cAAY;AACZ,iBAAe;AACjB;AAGA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAPC,kBAOkB;AACjB,mBAAiB;AACjB,SAAO;AACT;AAEA,CAZC,kBAYkB;AACnB,CAbC,kBAakB;AACjB,UAAQ,IAAI,MAAM,IAAI;AACtB,WAAS,IAAI;AACb,cAAY;AACd;AAEA,CAnBC,kBAmBkB;AACjB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAzBC,kBAyBkB,EAAE;AACnB,cAAY,IAAI;AAClB;AAEA,CA7BC,kBA6BkB;AACjB,SAAO,IAAI;AACX,mBAAiB;AACnB;AAEA,CAlCC,kBAkCkB,CAAC;AAClB,mBAAiB;AACnB;AAEA,CAtCC,kBAsCkB;AACjB,cAAY;AACZ,gBAAc;AACd,UAAQ;AACV;AAGA,CAAC;AACC,cAAY;AACZ,UAAQ;AACV;AAEA,CALC,iBAKiB;AAChB,SAAO;AACP,UAAQ;AACR,cAAY;AACZ,UAAQ;AACV;AAGA,CAAC;AACC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,cAAY;AACd;AAEA,CAPC,mBAOmB;AAClB,aAAW;AACX,cAAY;AACZ,cAAY;AACd;AAGA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,WAAS;AACT,iBAAe;AACf,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACxB;AAIA,MAAM,CAAC;AACL,SAAO;AACP,cAAY;AACZ,QAAM;AACN,SAAO;AACP,UAAQ;AACR,cACE,WAAW,MAAM,IAAI,EACrB,aAAa,MAAM;AACvB;AAEA,MAAM,CAXC,+BAW+B;AACpC,cAAY,IAAI,kBAAkB,EAAE,IAAI;AACxC,gBAAc,IAAI,WAAW,EAAE,IAAI;AACrC;AAEA,MAAM,CAhBC,+BAgB+B;AACpC,WAAS,IAAI,MAAM,IAAI,WAAW,EAAE,IAAI;AACxC,kBAAgB;AAClB;AAEA,CAAC;AACC,eAAa;AACb,SAAO;AACP,UAAQ;AACR,SAAO,IAAI;AACb;AAEA,CAPC,6BAO6B;AAC5B,SAAO;AACP,UAAQ;AACR,QAAM;AACR;AAEA,CAAC;AACC,QAAM;AACN,aAAW;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,SAAO,IAAI;AACX,YAAU;AACV,iBAAe;AACf,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,cAAY;AACd;AAGA,CAAC;AACC,SAAO,IAAI;AACX,cAAY;AACZ,aAAW;AACb;AAEA,CAAC;AACC,UAAQ,IAAI,MAAM,IAAI,qBAAqB,EAAE;AAC7C,iBAAe;AACf,WAAS;AACT,cAAY,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE;AAChC;AAEA,CAAC;AACC,SAAO,IAAI,qBAAqB,EAAE;AAClC,eAAa;AACb,aAAW;AACX,iBAAe;AACjB;AAEA,CAAC;AACC,SAAO,IAAI;AACX,eAAa,IAAI,WAAW,EAAE;AAC9B,aAAW;AACX,eAAa;AACb,cAAY;AACd;;;ACzUA,CAAC;AACC,YAAU;AACV,OAAK;AACL,SAAO;AACP,SAAO;AACP,UAAQ;AACR,cAAY,IAAI;AAChB,eAAa,IAAI,MAAM,IAAI;AAC3B,WAAS;AACT,WAAS;AACT,kBAAgB;AAChB,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,YAAU;AACV,cAAY,UAAU,KAAK;AAC7B;AAEA,CAAC;AACC,aAAW,WAAW;AACtB,kBAAgB;AAClB;AAIA,CAAC;AACC,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,UAAQ;AACR,WAAS;AACT,cAAY;AACd;AAGA,CAZC,0BAY0B;AACzB,WAAS;AACT,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,cAAY;AACZ,cAAY,WAAW;AACzB;AAEA,CAvBC,0BAuB0B,MAAM;AACjC,CAAC,uBAAuB,CAxBvB,0BAwBkD;AACjD,cAAY,IAAI;AAChB,WAAS;AACX;AAGA,CA9BC,0BA8B0B;AACzB,WAAS;AACT,YAAU;AACV,OAAK;AACL,QAAM;AACN,aAAW,UAAU,IAAI,EAAE;AAC3B,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY;AACZ,cAAY,WAAW;AACzB;AAEA,CA3CC,0BA2C0B,MAAM;AACjC,CApBC,uBAoBuB,CA5CvB,0BA4CkD;AACjD,cAAY,IAAI;AAClB;AAGA,CAzBC;AA0BC,cAAY;AACd;AAEA,CA7BC,uBA6BuB,CAAC;AACvB,kBAAgB;AAClB;AAQA,CAAC;AACC,WAAS;AACT,mBAAiB;AAIjB,iBAAe;AACjB;AAEA,CAAC;AACC,OAAK;AACL,UAAQ;AACR,SAAO;AACP,UAAQ;AACR,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,iBAAe;AACf,SAAO,IAAI;AACX,aAAW;AACX,eAAa;AAIb,WAAS;AACX;AAEA,CAlBC,kBAkBkB;AACjB,SAAO,IAAI;AACX,cAAY,IAAI;AAClB;AAEA,CA1CyB;AA2CvB,QAAM;AACN,cAAY;AACZ,WAAS,KAAK,KAAK;AACnB,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAIA,CAAC;AACC,YAAU;AACV,OAAK;AACL,WAAS;AACT,cAAY,IAAI;AAChB,eAAa;AACb,cAAY;AACZ,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAIA,CAAC;AACC,aAAW;AACX,eAAa;AACb,kBAAgB;AAChB,kBAAgB;AAChB,SAAO,IAAI;AACX,iBAAe;AACjB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACP;AAEA,CAAC;AACC,aAAW;AACX,eAAa;AACb,kBAAgB;AAChB,kBAAgB;AAChB,WAAS,IAAI;AACb,iBAAe;AACf,eAAa;AACf;AAEA,CAAC;AACC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,eAAa;AACb,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACP;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,WAAS;AACX;AAEA,CAAC;AACC,aAAW;AACX,eAAa;AACb,kBAAgB;AAClB;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,eAAa,IAAI;AACnB;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,eAAa;AACf;AAIA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,aAAW;AACX,WAAS,IAAI;AACb,iBAAe;AACf,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACxB;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACX,aAAW;AACb;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAIA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,SAAO,IAAI;AACX,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe;AACf,WAAS,KAAK;AACd,eAAa;AACb,cAAY;AACZ,cAAY;AACZ,eAAa;AACf;AAEA,CAAC;AACC,cAAY;AACd;AAEA,CAAC;AACC,cAAY;AACZ,cAAY;AACd;AAEA,CAAC;AACC,OAAK;AACL,UAAQ;AACR,WAAS;AACT,eAAa;AACb,OAAK;AACL,aAAW;AACX,SAAO,IAAI;AACX,WAAS,IAAI;AACb,iBAAe;AACf,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACtB,cAAY,MAAM;AACpB;AAEA,CAfC,wBAewB;AACvB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,OAAK;AACL,aAAW;AACX,WAAS,IAAI;AACf;AAEA,CAAC;AACC,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,QAAM,EAAE,EAAE;AACV,aAAW;AACX,cAAY;AACZ,cAAY;AACZ,iBAAe;AACjB;AAIA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,SAAO,IAAI;AACX,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe;AACf,WAAS,IAAI;AACb,eAAa;AACb,cAAY;AACZ,iBAAe;AACf,eAAa;AACb,cAAY;AACZ,cAAY;AACd;AAOA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK;AACL,cAAY;AACZ,iBAAe;AACf,WAAS,IAAI,EAAE,IAAI;AACnB,eAAa,IAAI,MAAM,IAAI;AAC7B;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,eAAa;AACb,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,SAAO,IAAI;AACX,kBAAgB;AAChB,kBAAgB;AAClB;AAIA,CAAC;AACC,SAAO;AACP,aAAW;AACX,mBAAiB;AACnB;AAEA,CANC,oBAMoB;AACnB,cAAY;AACZ,eAAa;AACb,SAAO,IAAI;AACX,aAAW;AACX,kBAAgB;AAChB,kBAAgB;AAChB,WAAS,IAAI;AACb,iBAAe,IAAI,MAAM,IAAI;AAC/B;AAEA,CAjBC,oBAiBoB;AACnB,WAAS,IAAI;AACb,iBAAe,IAAI,MAAM,IAAI;AAC7B,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACX,aAAW;AACb;AAIA,CAAC;AACC,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe;AACf,WAAS,KAAK;AAChB;AAEA,CAAC;AACC,aAAW;AACX,eAAa;AACb,SAAO,IAAI;AACX,iBAAe;AACjB;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,eAAa;AACf;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,SAAO,IAAI;AACX,cAAY;AACZ,cAAY;AACZ,cAAY;AACZ,eAAa;AACb,cAAY;AACd;AAIA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,aAAW;AACX,WAAS,IAAI;AACb,iBAAe;AACf,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACxB;AAEA,CAAC;AACC,SAAO,IAAI;AACX,aAAW;AACX,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAIA,CAAC;AACC,WAAS;AACT,aAAW;AACX,OAAK;AACP;AAEA,CAAC;AACC,aAAW;AACX,WAAS,IAAI;AACb,iBAAe;AACf,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACxB;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACX,eAAa,IAAI;AACnB;AAIA,CAAC;AACC,WAAS;AACT,OAAK;AACL,iBAAe,IAAI,MAAM,IAAI;AAC/B;AAEA,CAAC;AACC,OAAK;AACL,UAAQ;AACR,aAAW;AACX,eAAa;AACb,SAAO,IAAI;AACX,WAAS,IAAI;AACb,iBAAe,IAAI,IAAI,EAAE;AACzB,iBAAe,IAAI,MAAM;AACzB,iBAAe;AACf,cACE,MAAM,KAAK,EACX,aAAa;AACjB;AAEA,CAfC,UAeU;AACT,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACX,uBAAqB,IAAI;AAC3B;AAIA,CA1BC,UA0BU;AACX,CA9bC,kBA8bkB;AACnB,CA5QC,wBA4QwB;AACvB,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAIA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW;AACX,eAAa;AACb,SAAO,IAAI;AACb;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACb;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAIA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,cAAY;AACZ,WAAS,IAAI;AACf;;;ACnkBA,CAAC;AACC,YAAU;AACV,OAAK;AACL,WAAS;AACT,eAAa;AACb,OAAK;AACL,WAAS;AACT,kBAAgB;AAClB;AAEA,CAAC;AACC,OAAK;AACL,cAAY;AACZ,UAAQ;AACR,SAAO;AACP,UAAQ;AACR,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,iBAAe;AACf,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACtB,SAAO,IAAI;AACX,mBAAiB,KAAK;AACtB;AAAA,IACE,WAAW,KAAK;AAAA,IAChB,MAAM,KAAK;AAAA,IACX,aAAa;AACjB;AAEA,CApBC,iBAoBiB;AAChB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,gBAAc,IAAI;AACpB;AAEA,CA1BC,iBA0BiB;AAChB,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAEA,CAAC;AACC,cAAY,IAAI;AAChB,gBAAc,IAAI;AAClB,SAAO,IAAI;AACb;AAEA,CANC,yBAMyB;AACxB,cAAY,IAAI;AAChB,gBAAc,IAAI;AAClB,SAAO,IAAI;AACX,UAAQ,WAAW;AACrB;AAEA,CA5CC,iBA4CiB;AAClB,CA7CC,iBA6CiB,SAAS;AACzB,WAAS;AACT,UAAQ;AACR,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,gBAAc,IAAI;AACpB;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,cAAY,IAAI;AAChB,UAAQ,EAAE;AACZ;","names":[]}
+{"version":3,"sources":["../../../src/graph/react/stuff/StuffViewer.css","../../../src/graph/react/detail/DetailPanel.css","../../../src/graph/react/viewer/GraphToolbar.css"],"sourcesContent":["/* ─── StuffViewer component styles ────────────────────────────────────────── */\n/* StuffViewer is also exported standalone (used outside GraphViewer — e.g.\n * docs pages, embedded previews). The theme tokens are normally applied to\n * the GraphViewer container, but when this component is rendered on its own\n * those tokens may not be set. The fallbacks below match the dark palette\n * from `graphConfig.ts` (DARK_PALETTE_COLORS) so the component always\n * renders with valid colors and fonts. */\n\n.stuff-viewer {\n  --sv-bg: var(--surface-page, #0a0a0a);\n  --sv-surface: var(--surface-panel, #111118);\n  --sv-surface-hover: var(--surface-elevated, rgba(255, 255, 255, 0.06));\n  --sv-border: var(--border-default, rgba(255, 255, 255, 0.1));\n  --sv-text: var(--text-default, #e2e8f0);\n  --sv-text-muted: var(--text-muted, #94a3b8);\n  --sv-accent: var(--color-accent, #8be9fd);\n  --sv-success: var(--color-success, #50fa7b);\n  --sv-success-bg: var(--color-success-bg, rgba(80, 250, 123, 0.15));\n  --sv-radius: 4px;\n  --sv-font-sans: var(\n    --font-sans,\n    \"Inter\",\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    sans-serif\n  );\n  --sv-font-mono: var(--font-mono, \"JetBrains Mono\", \"Monaco\", \"Menlo\", monospace);\n\n  font-family: var(--sv-font-sans);\n  color: var(--sv-text);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n/* ─── Header ─────────────────────────────────────────────────────────────── */\n\n.stuff-viewer-header {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 12px 16px 8px;\n  border-bottom: 1px solid var(--sv-border);\n  flex-shrink: 0;\n}\n\n.stuff-viewer-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--sv-text);\n  margin: 0;\n}\n\n.stuff-viewer-subtitle {\n  font-size: 12px;\n  color: var(--sv-text-muted);\n  margin: 0;\n}\n\n/* ─── Toolbar: tabs + action buttons ─────────────────────────────────────── */\n\n.stuff-viewer-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 16px;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.stuff-viewer-tabs {\n  display: flex;\n  gap: 4px;\n}\n\n.stuff-viewer-tab {\n  padding: 5px 10px;\n  border-radius: var(--sv-radius);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  background: var(--sv-surface-hover);\n  color: var(--sv-text-muted);\n  border: none;\n  transition:\n    background 0.15s,\n    color 0.15s;\n}\n\n.stuff-viewer-tab:hover {\n  background: var(--sv-border);\n  color: var(--sv-text);\n}\n\n.stuff-viewer-tab--active {\n  background: var(--sv-accent);\n  color: var(--text-on-accent, #0e0e0e);\n}\n\n/* ─── Action buttons ─────────────────────────────────────────────────────── */\n\n.stuff-viewer-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.stuff-viewer-action-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: var(--sv-radius);\n  cursor: pointer;\n  background: var(--sv-surface-hover);\n  color: var(--sv-text-muted);\n  border: none;\n  transition:\n    background 0.15s,\n    color 0.15s;\n}\n\n.stuff-viewer-action-btn:hover {\n  background: var(--sv-border);\n  color: var(--sv-text);\n}\n\n.stuff-viewer-action-btn--copied {\n  background: var(--sv-success-bg);\n  color: var(--sv-success);\n}\n\n.stuff-viewer-action-btn svg {\n  width: 14px;\n  height: 14px;\n  fill: currentColor;\n}\n\n/* ─── Content area ───────────────────────────────────────────────────────── */\n\n.stuff-viewer-content {\n  flex: 1;\n  overflow: auto;\n  padding: 12px 16px 16px;\n  min-height: 0;\n}\n\n/* Pre-formatted text (JSON and Pretty tabs) */\n.stuff-viewer-pre {\n  font-family: var(--sv-font-mono);\n  font-size: 11px;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  margin: 0;\n  color: var(--sv-text-muted);\n}\n\n.stuff-viewer-pre--nowrap {\n  white-space: pre;\n  word-wrap: normal;\n  line-height: 1;\n  overflow-x: auto;\n  padding-right: 20px;\n}\n\n/* HTML content */\n.stuff-viewer-html {\n  font-family: var(--sv-font-sans);\n  font-size: 11px;\n  color: var(--sv-text-muted);\n  line-height: 1.5;\n}\n\n.stuff-viewer-html table {\n  border-collapse: collapse;\n  width: 100%;\n}\n\n.stuff-viewer-html th,\n.stuff-viewer-html td {\n  border: 1px solid var(--sv-border);\n  padding: 8px 12px;\n  text-align: left;\n}\n\n.stuff-viewer-html th {\n  background: var(--sv-surface-hover);\n  color: var(--sv-text);\n  font-weight: 600;\n}\n\n.stuff-viewer-html tr:hover {\n  background: var(--sv-surface-hover);\n}\n\n.stuff-viewer-html a {\n  color: var(--sv-accent);\n  text-decoration: none;\n}\n\n.stuff-viewer-html a:hover {\n  text-decoration: underline;\n}\n\n.stuff-viewer-html ul {\n  list-style: none;\n  padding-left: 0;\n  margin: 0;\n}\n\n/* PDF embed */\n.stuff-viewer-pdf {\n  min-height: 400px;\n  height: 100%;\n}\n\n.stuff-viewer-pdf embed {\n  width: 100%;\n  height: 100%;\n  min-height: 500px;\n  border: none;\n}\n\n/* Image content */\n.stuff-viewer-image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 200px;\n}\n\n.stuff-viewer-image img {\n  max-width: 100%;\n  max-height: 70vh;\n  object-fit: contain;\n}\n\n/* Local file fallback (file:// URLs that can't render inline) */\n.stuff-viewer-local-file {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  border-radius: 6px;\n  background: var(--sv-surface);\n  border: 1px solid var(--sv-border);\n}\n\n/* Clickable variant — used when an open-externally action is bound (e.g. PDF\n   fallback in hosts that can't render <embed type=\"application/pdf\">). */\nbutton.stuff-viewer-local-file--button {\n  width: 100%;\n  text-align: left;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease;\n}\n\nbutton.stuff-viewer-local-file--button:hover {\n  background: var(--sv-surface-hover, var(--sv-surface));\n  border-color: var(--sv-accent, var(--sv-border));\n}\n\nbutton.stuff-viewer-local-file--button:focus-visible {\n  outline: 2px solid var(--sv-accent, var(--sv-border));\n  outline-offset: 2px;\n}\n\n.stuff-viewer-local-file-icon {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  color: var(--sv-text-muted);\n}\n\n.stuff-viewer-local-file-icon svg {\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n}\n\n.stuff-viewer-local-file-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.stuff-viewer-local-file-name {\n  font-family: var(--sv-font-mono);\n  font-size: 12px;\n  color: var(--sv-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.stuff-viewer-local-file-hint {\n  font-size: 11px;\n  color: var(--sv-text-muted);\n  margin-top: 2px;\n}\n\n/* Placeholder for missing data */\n.stuff-viewer-placeholder {\n  color: var(--sv-text-muted);\n  font-style: italic;\n  font-size: 13px;\n}\n\n.stuff-viewer-error {\n  border: 1px solid var(--color-status-failed, #ff5555);\n  border-radius: 6px;\n  padding: 12px;\n  background: rgba(255, 85, 85, 0.08);\n}\n\n.stuff-viewer-error-title {\n  color: var(--color-status-failed, #ff5555);\n  font-weight: 600;\n  font-size: 13px;\n  margin-bottom: 4px;\n}\n\n.stuff-viewer-error-detail {\n  color: var(--sv-text-muted);\n  font-family: var(--font-mono, monospace);\n  font-size: 12px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n","/* ─── Detail Panel — sliding side panel for node inspection ─────────────── */\n/* Token-only — all colors come from the active theme palette on the         */\n/* container. See `graphConfig.ts` for token definitions.                    */\n\n.detail-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 380px;\n  height: 100%;\n  background: var(--surface-panel);\n  border-left: 1px solid var(--border-default);\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-sans);\n  color: var(--text-default);\n  overflow: hidden;\n  transition: transform 0.2s ease;\n}\n\n.detail-panel--closed {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Resize handle — left edge drag target ────────────────────────────── */\n\n.detail-panel-resize-handle {\n  position: absolute;\n  top: 0;\n  left: -6px;\n  width: 12px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 2;\n  background: transparent;\n}\n\n/* Visible bar — narrower than the hit area */\n.detail-panel-resize-handle::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 5px;\n  width: 2px;\n  height: 100%;\n  background: transparent;\n  transition: background 0.15s;\n}\n\n.detail-panel-resize-handle:hover::before,\n.detail-panel--dragging .detail-panel-resize-handle::before {\n  background: var(--color-accent);\n  opacity: 0.6;\n}\n\n/* Grip indicator — visible on hover */\n.detail-panel-resize-handle::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 2px;\n  height: 24px;\n  border-radius: 1px;\n  background: transparent;\n  transition: background 0.15s;\n}\n\n.detail-panel-resize-handle:hover::after,\n.detail-panel--dragging .detail-panel-resize-handle::after {\n  background: var(--color-accent);\n}\n\n/* Disable transition during drag for smooth resizing */\n.detail-panel--dragging {\n  transition: none;\n}\n\n.detail-panel--dragging .detail-panel-content {\n  pointer-events: none;\n}\n\n/* ─── Close row — scrolls away with the content (intentionally NOT pinned) ─ */\n/* The close button is part of the content's top, not panel chrome: it\n * scrolls out of view with the content, and closing the panel means\n * scrolling back up. The negative margin tucks the following section up\n * beside it so the row doesn't cost a full line of vertical space. */\n\n.detail-panel-close-row {\n  display: flex;\n  justify-content: flex-end;\n  /* Pull the next section up by exactly this row's height + the column\n   * gap, so the close button sits ON the first content line (concept /\n   * pipe header), right-aligned — not on its own line above it. */\n  margin-bottom: -40px;\n}\n\n.detail-panel-close {\n  all: unset;\n  cursor: pointer;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  color: var(--text-dim);\n  font-size: 18px;\n  line-height: 1;\n  /* Above the sticky pipe header (z 1) so the X is visible at rest while\n   * sharing its line; on scroll it briefly slides over the stuck header's\n   * empty right side before leaving the viewport. */\n  z-index: 2;\n}\n\n.detail-panel-close:hover {\n  color: var(--text-muted);\n  background: var(--surface-elevated);\n}\n\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 16px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n/* ─── Sticky header (pipe info + IO stays pinned at top) ───────────────── */\n\n.detail-sticky-header {\n  position: sticky;\n  top: -12px; /* must mirror .detail-panel-content's top padding */\n  z-index: 1;\n  background: var(--surface-panel);\n  padding-top: 12px;\n  margin-top: -12px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n/* ─── Shared detail components ──────────────────────────────────────────── */\n\n.detail-section-label {\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--text-dim);\n  margin-bottom: 6px;\n}\n\n.detail-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-badge {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px 7px;\n  border-radius: 4px;\n  white-space: nowrap;\n}\n\n.detail-badge--operator {\n  background: var(--color-pipe);\n  color: var(--text-on-accent);\n}\n\n.detail-badge--controller {\n  background: var(--color-batch-item);\n  color: var(--text-on-accent);\n}\n\n.detail-pipe-code {\n  font-family: var(--font-mono);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--color-pipe);\n}\n\n.detail-pipe-code--controller {\n  color: var(--color-batch-item);\n}\n\n.detail-status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-status-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n.detail-status-label {\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: capitalize;\n}\n\n.detail-duration {\n  font-size: 11px;\n  color: var(--text-dim);\n  font-family: var(--font-mono);\n}\n\n.detail-description {\n  font-size: 12px;\n  color: var(--text-muted);\n  line-height: 1.5;\n}\n\n/* ─── IO Pills ──────────────────────────────────────────────────────────── */\n\n.detail-io-pill {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  padding: 3px 8px;\n  border-radius: 4px;\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n}\n\n.detail-io-name {\n  font-family: var(--font-mono);\n  color: var(--text-default);\n}\n\n.detail-io-concept {\n  color: var(--text-dim);\n  font-size: 10px;\n}\n\n.detail-io-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* ─── Blueprint-specific sections ───────────────────────────────────────── */\n\n.detail-prompt-block {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-muted);\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n  border-radius: 6px;\n  padding: 10px 12px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-y: auto;\n  line-height: 1.5;\n}\n\n.detail-prompt-block--collapsed {\n  max-height: 300px;\n}\n\n.detail-prompt-block--expanded {\n  max-height: none;\n  overflow-y: visible;\n}\n\n.detail-prompt-expand-btn {\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 9px;\n  color: var(--text-dim);\n  padding: 2px 6px;\n  border-radius: 3px;\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n  transition: color 0.15s;\n}\n\n.detail-prompt-expand-btn:hover {\n  color: var(--text-muted);\n}\n\n.detail-kv-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start; /* top-align so the label stays next to the first line of a wrapped value */\n  gap: 12px;\n  font-size: 11px;\n  padding: 3px 0;\n}\n\n.detail-kv-key {\n  color: var(--text-dim);\n  flex-shrink: 0; /* label stays at its natural width */\n}\n\n.detail-kv-value {\n  font-family: var(--font-mono);\n  color: var(--text-default);\n  flex: 1 1 0;\n  min-width: 0;\n  text-align: right;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n}\n\n/* ─── Field block: labeled multi-line text (for long resolved values) ─── */\n\n.detail-field-block {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.detail-field-block-label {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  color: var(--text-dim);\n}\n\n.detail-field-block-value {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-default);\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n  border-radius: 6px;\n  padding: 8px 10px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  line-height: 1.5;\n  max-height: 240px;\n  overflow-y: auto;\n}\n\n/* ─── Nested construct sub-section header ───────────────────────────────── */\n/* Rendered before each nested sub-construct's recursive contents. The left\n * border + indent provides a visual \"branch\" cue so the tree structure is\n * obvious without needing collapse state. */\n\n.detail-nested-header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n  padding: 4px 0 4px 8px;\n  border-left: 2px solid var(--color-success);\n}\n\n.detail-nested-header-name {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-default);\n}\n\n.detail-nested-header-meta {\n  font-family: var(--font-mono);\n  font-size: 9px;\n  color: var(--text-dim);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n/* ─── Concept schema table ──────────────────────────────────────────────── */\n\n.detail-schema-table {\n  width: 100%;\n  font-size: 11px;\n  border-collapse: collapse;\n}\n\n.detail-schema-table th {\n  text-align: left;\n  font-weight: 700;\n  color: var(--text-dim);\n  font-size: 9px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  padding: 4px 6px;\n  border-bottom: 1px solid var(--border-default);\n}\n\n.detail-schema-table td {\n  padding: 4px 6px;\n  border-bottom: 1px solid var(--border-subtle);\n  color: var(--text-muted);\n}\n\n.detail-schema-field {\n  font-family: var(--font-mono);\n  color: var(--text-default);\n}\n\n.detail-schema-type {\n  color: var(--color-accent);\n}\n\n.detail-schema-required {\n  color: var(--color-pipe);\n  font-size: 9px;\n}\n\n/* ─── Error section ─────────────────────────────────────────────────────── */\n\n.detail-error {\n  background: var(--color-error-bg);\n  border: 1px solid var(--color-error-border);\n  border-radius: 6px;\n  padding: 10px 12px;\n}\n\n.detail-error-type {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--color-error);\n  margin-bottom: 4px;\n}\n\n.detail-error-message {\n  font-size: 11px;\n  color: var(--text-muted);\n  line-height: 1.5;\n}\n\n.detail-error-stack {\n  font-family: var(--font-mono);\n  font-size: 10px;\n  color: var(--text-dim);\n  margin-top: 8px;\n  max-height: 150px;\n  overflow-y: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* ─── Steps list (PipeSequence, PipeCondition outcomes) ─────────────────── */\n\n.detail-steps-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.detail-step-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 11px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n}\n\n.detail-step-index {\n  color: var(--text-dim);\n  font-size: 10px;\n  font-weight: 700;\n  min-width: 16px;\n}\n\n.detail-step-code {\n  font-family: var(--font-mono);\n  color: var(--text-default);\n}\n\n/* ─── Tags/Metrics ──────────────────────────────────────────────────────── */\n\n.detail-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.detail-tag {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 3px;\n  background: var(--surface-sunken);\n  border: 1px solid var(--border-subtle);\n}\n\n.detail-tag-key {\n  color: var(--text-dim);\n}\n\n.detail-tag-value {\n  color: var(--text-default);\n  font-family: var(--font-mono);\n}\n\n/* ─── Detail tabs (Data / Structure) ────────────────────────────────────── */\n\n.detail-tabs {\n  display: flex;\n  gap: 2px;\n  border-bottom: 1px solid var(--border-default);\n}\n\n.detail-tab {\n  all: unset;\n  cursor: pointer;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-dim);\n  padding: 5px 10px;\n  border-radius: 4px 4px 0 0;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  transition:\n    color 0.15s,\n    border-color 0.15s;\n}\n\n.detail-tab:hover {\n  color: var(--text-muted);\n}\n\n.detail-tab--active {\n  color: var(--text-default);\n  border-bottom-color: var(--color-accent);\n}\n\n/* `all: unset` strips the UA focus ring — restore a visible indicator for\n * keyboard users (WCAG 2.4.7) on every unset button in the panel. */\n.detail-tab:focus-visible,\n.detail-panel-close:focus-visible,\n.detail-prompt-expand-btn:focus-visible {\n  outline: 2px solid var(--color-accent);\n  outline-offset: 2px;\n}\n\n/* ─── Concept panel header ──────────────────────────────────────────────── */\n\n.detail-concept-code {\n  font-family: var(--font-mono);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--color-success);\n}\n\n.detail-concept-domain {\n  font-size: 11px;\n  color: var(--text-dim);\n}\n\n.detail-refines {\n  font-size: 11px;\n  color: var(--text-muted);\n}\n\n.detail-refines-code {\n  font-family: var(--font-mono);\n  color: var(--color-accent);\n}\n\n/* ─── Not available fallback ────────────────────────────────────────────── */\n\n.detail-not-available {\n  font-size: 12px;\n  color: var(--text-dim);\n  font-style: italic;\n  padding: 8px 0;\n}\n","/* ─── Graph Toolbar — floating controls over the graph background ─────── */\n/* Token-only styling: theme switching happens by swapping `--surface-*`,   */\n/* `--text-*`, `--border-*`, and `--color-accent` values on the container.  */\n\n/* The ReactFlow <Panel> owns positioning now (anchor + margin). It sits above\n   the graph but the old code used z-index 11, so keep parity. */\n.graph-toolbar-panel {\n  z-index: 11;\n}\n\n.graph-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  pointer-events: auto;\n}\n\n/* Vertical bar — `center-left` / `center-right` anchors. Stack the buttons in a\n   column and rotate the separators so they divide rows instead of columns. */\n.graph-toolbar--vertical {\n  flex-direction: column;\n}\n\n.graph-toolbar--vertical .graph-toolbar-separator {\n  width: 18px;\n  height: 1px;\n  margin: 2px 0;\n}\n\n.graph-toolbar-btn {\n  all: unset;\n  box-sizing: border-box;\n  cursor: pointer;\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  background: var(--surface-overlay);\n  border: 1px solid var(--border-default);\n  color: var(--text-secondary);\n  backdrop-filter: blur(6px);\n  transition:\n    background 0.15s,\n    color 0.15s,\n    border-color 0.15s;\n}\n\n.graph-toolbar-btn:hover {\n  background: var(--surface-overlay-hover);\n  color: var(--text-primary);\n  border-color: var(--border-strong);\n}\n\n.graph-toolbar-btn:focus-visible {\n  outline: 2px solid var(--focus-ring);\n  outline-offset: 1px;\n}\n\n.graph-toolbar-btn--active {\n  background: var(--color-accent);\n  border-color: var(--color-accent);\n  color: var(--text-on-accent);\n}\n\n.graph-toolbar-btn--active:hover {\n  background: var(--color-accent);\n  border-color: var(--color-accent);\n  color: var(--text-on-accent);\n  filter: brightness(1.1);\n}\n\n.graph-toolbar-btn:disabled,\n.graph-toolbar-btn:disabled:hover {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background: var(--surface-overlay-disabled);\n  color: var(--text-dim);\n  border-color: var(--border-subtle);\n}\n\n.graph-toolbar-separator {\n  width: 1px;\n  height: 18px;\n  background: var(--border-default);\n  margin: 0 2px;\n}\n"],"mappings":"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","names":[]}

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 { G as GraphNodeData, a as GraphEdge, b as GraphNode, c as GraphSpec, d as GraphConfig, e as GraphDirection, F as FoldMode, f as GraphTheme, P as PipeStatus, L as LabelDescriptor, g as PipeControllerType, h as FoldToggleOptions, i as PipeType, j as GraphSpecNode, C as ConceptInfo, k as GraphSpecNodeIoItem } from '../../types-D7NALhbw.js';
-export { l as PipeOperatorType } from '../../types-D7NALhbw.js';
+import { G as GraphNodeData, a as GraphEdge, b as GraphNode, c as GraphSpec, d as GraphConfig, e as GraphDirection, F as FoldMode, f as GraphThemeMode, T as ToolbarPosition, g as GraphTheme, P as PipeStatus, L as LabelDescriptor, h as PipeControllerType, i as FoldToggleOptions, j as PipeType, k as GraphSpecNode, C as ConceptInfo, l as GraphSpecNodeIoItem } from '../../types-CEDZIAmh.js';
+export { m as PipeOperatorType } from '../../types-CEDZIAmh.js';
 import { Edge, Node, ReactFlowInstance } from '@xyflow/react';
 
 /** Data for rendering a stuff (data item) in the StuffViewer component. */
@@ -74,14 +74,37 @@ interface GraphViewerProps {
     /** Hide the built-in floating toolbar (direction + controllers toggle). */
     hideToolbar?: boolean;
     /**
-     * Color theme. Reactive: passing it as a prop drives the active theme, and
-     * clearing it back to `undefined` hands control back to `config.theme` (or
-     * the default). Users can also toggle via the built-in toolbar button
-     * (unless `showThemeToggle` is `false`).
+     * Theme *mode*: `dark | light | system`. Reactive: passing it as a prop drives
+     * the active mode, and clearing it back to `undefined` hands control back to
+     * `config.theme` (or the default `system`). Users can also cycle it via the
+     * built-in toolbar button (unless `showThemeToggle` is `false`).
      *
-     * Defaults to `config.theme` or `"dark"`.
+     * `system` resolves to the environment theme — the browser's
+     * `prefers-color-scheme`, or `systemTheme` when injected.
+     *
+     * Defaults to `config.theme` or `"system"`.
+     */
+    theme?: GraphThemeMode;
+    /**
+     * Anchor for the built-in toolbar. Controlled + reactive: pass a new value to
+     * move it, and the viewer reacts immediately. This library does NOT persist the
+     * value — the host owns it (read its own state, change it by passing a new prop).
+     *
+     * Orientation (horizontal row vs vertical column) is derived from the position,
+     * not configured separately: only `center-left` / `center-right` render a
+     * vertical bar; the four corners plus `top-center` / `bottom-center` are
+     * horizontal.
+     *
+     * Precedence: this prop → `config.toolbarPosition` → `"top-right"`.
+     */
+    toolbarPosition?: ToolbarPosition;
+    /**
+     * Host-injected environment theme, authoritative when set. Forwarded to the
+     * `system` resolver so non-browser hosts (e.g. VS Code webviews, where
+     * `prefers-color-scheme` is unreliable) can drive `system` from their own
+     * detection. When omitted, `system` follows the browser's `prefers-color-scheme`.
      */
-    theme?: GraphTheme;
+    systemTheme?: GraphTheme;
     /**
      * Whether to render the theme toggle button in the built-in toolbar.
      * Defaults to `true`. Set to `false` to hide it (useful when the host app
@@ -89,11 +112,12 @@ interface GraphViewerProps {
      */
     showThemeToggle?: boolean;
     /**
-     * Called whenever the active theme changes — both from the built-in toggle
-     * and from external prop / config updates. Use this to keep page chrome
-     * outside the GraphViewer container in sync with the graph's theme.
+     * Called whenever the theme changes — from the built-in toggle, from external
+     * prop / config updates, or when `system` re-resolves because the environment
+     * changed. Receives both the selected `mode` (for persistence) and the
+     * `resolvedTheme` (for keeping page chrome outside the container in sync).
      */
-    onThemeChange?: (theme: GraphTheme) => void;
+    onThemeChange?: (mode: GraphThemeMode, resolvedTheme: GraphTheme) => void;
     onNavigateToPipe?: (pipeCode: string, status?: PipeStatus) => void;
     onStuffNodeClick?: (stuffData: StuffViewerData) => void;
     onReactFlowInit?: (instance: AppRFInstance) => void;
@@ -133,6 +157,29 @@ declare function renderLabel(desc: LabelDescriptor): React.ReactNode;
 /** Convert label descriptors to React elements on all nodes */
 declare function hydrateLabels(nodes: GraphNode[]): GraphNode[];
 
+/**
+ * Read the environment's current color scheme once. SSR / no-`matchMedia` safe:
+ * defaults to `dark` when `window.matchMedia` is unavailable. Exported so
+ * non-React callers (e.g. the standalone adapter's initial body-palette paint,
+ * before any `onThemeChange` fires) can resolve `system` the same way the hook does.
+ */
+declare function detectSystemTheme(): GraphTheme;
+/**
+ * Resolved environment theme.
+ *
+ * - `injected` set → return it (host owns detection; host re-renders drive
+ *   updates). No live `matchMedia` subscription is registered.
+ * - otherwise → subscribe to `prefers-color-scheme` and re-render on `change`.
+ *
+ * Uses `useSyncExternalStore` so the subscription is concurrent-safe. The hook
+ * is always called (rules-of-hooks); only the `systemThemeStore` triple branches
+ * on `injected`, memoized so the `subscribe` reference stays stable across
+ * renders (no re-subscribe churn). SSR with no injected value falls back to
+ * `dark` via the server snapshot — see `docs/theming.md` → "SSR" for the
+ * consequence and the recommended `theme` / `systemTheme` pinning.
+ */
+declare function useSystemTheme(injected?: GraphTheme): GraphTheme;
+
 interface ControllerGroupData {
     label?: React.ReactNode;
     pipeType?: PipeControllerType;
@@ -325,4 +372,4 @@ interface UseResizableResult {
 }
 declare function useResizable({ defaultWidth, minWidth, maxWidth, containerRef, }: UseResizableOptions): UseResizableResult;
 
-export { type AppEdge, type AppNode, type AppRFInstance, ConceptDetailPanel, type ConceptDetailPanelProps, ControllerGroupNode, DetailPanel, type DetailPanelProps, GraphViewer, type GraphViewerProps, PipeCardBase, type PipeCardBaseProps, type PipeCardData, PipeCardNode, PipeDetailPanel, type PipeDetailPanelProps, PipeStatus, type ResolveStorageUrl, StuffViewer, type StuffViewerData, type StuffViewerProps, type UseResizableOptions, type UseResizableResult, applyStatusOverrides, controllerNodeTypes, extractFilename, extractInlineUrl, extractStorageUri, extractUrl, findStuffDataByDigest, getHtmlTabLabel, hydrateLabels, isInlineRenderableUrl, isSafeDisplayUrl, renderLabel, resolveMimeType, toAppEdges, toAppNodes, useResizable };
+export { type AppEdge, type AppNode, type AppRFInstance, ConceptDetailPanel, type ConceptDetailPanelProps, ControllerGroupNode, DetailPanel, type DetailPanelProps, GraphViewer, type GraphViewerProps, PipeCardBase, type PipeCardBaseProps, type PipeCardData, PipeCardNode, PipeDetailPanel, type PipeDetailPanelProps, PipeStatus, type ResolveStorageUrl, StuffViewer, type StuffViewerData, type StuffViewerProps, type UseResizableOptions, type UseResizableResult, applyStatusOverrides, controllerNodeTypes, detectSystemTheme, extractFilename, extractInlineUrl, extractStorageUri, extractUrl, findStuffDataByDigest, getHtmlTabLabel, hydrateLabels, isInlineRenderableUrl, isSafeDisplayUrl, renderLabel, resolveMimeType, toAppEdges, toAppNodes, useResizable, useSystemTheme };