@pipelex/mthds-ui 0.6.4 → 0.7.0

package/dist/standalone/graph-viewer.css

@@ -624,17 +624,103 @@ svg.react-flow__connectionline {
 }
 
 /* ReactFlow base styles — resolved by the consumer's bundler */
-/* Default theme — consumers can override any var on an ancestor element */
+/**
+ * Tokens (--surface-*, --text-*, --border-*, --shadow-*, --color-*) are
+ * applied to `.react-flow-container` inline by `GraphViewer` based on the
+ * active theme (dark / light). Component CSS only references those tokens —
+ * never raw hex/rgba — so a new theme is just a new set of values.
+ *
+ * The block below provides STATIC dark-palette defaults so that any of these
+ * cases still render with valid colors / fonts / shadows:
+ *   - first paint before the React inline-palette effect runs
+ *   - SSR / hydration mismatches
+ *   - a consumer rendering a graph subcomponent outside `GraphViewer`
+ *   - JS disabled / failed
+ * Values mirror `DARK_PALETTE_COLORS` in `graphConfig.ts`. The runtime
+ * palette (dark or light) is applied as higher-specificity inline styles
+ * and wins automatically.
+ */
 .react-flow-container {
+  /* Surfaces */
+  --surface-page: #0a0a0a;
+  --surface-panel: #111118;
+  --surface-overlay: rgba(17, 17, 24, 0.8);
+  --surface-overlay-hover: rgba(30, 30, 40, 0.9);
+  --surface-overlay-disabled: rgba(17, 17, 24, 0.6);
+  --surface-elevated: rgba(255, 255, 255, 0.06);
+  --surface-elevated-hover: rgba(255, 255, 255, 0.1);
+  --surface-sunken: rgba(255, 255, 255, 0.03);
+  --surface-pill: rgba(255, 255, 255, 0.06);
+  --surface-pill-border: rgba(255, 255, 255, 0.08);
+
+  /* Borders */
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: rgba(255, 255, 255, 0.1);
+  --border-strong: rgba(255, 255, 255, 0.18);
+  --border-dashed: rgba(255, 255, 255, 0.15);
+
+  /* Text */
+  --text-primary: #f8fafc;
+  --text-default: #e2e8f0;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --text-dim: #64748b;
+  --text-on-accent: #0e0e0e;
+
+  /* Effects */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --focus-ring: rgba(59, 130, 246, 0.6);
+
+  /* Domain-semantic colors */
+  --color-pipe: #ff6b6b;
+  --color-pipe-bg: rgba(224, 108, 117, 0.18);
+  --color-pipe-text: #ffffff;
+  --color-stuff: #4ecdc4;
+  --color-stuff-bg: rgba(78, 205, 196, 0.12);
+  --color-stuff-border: #9ddcfd;
+  --color-stuff-text: #98fb98;
+  --color-stuff-text-dim: #9ddcfd;
+  --color-edge: #fffacd;
+  --color-batch-item: #bd93f9;
+  --color-batch-aggregate: #50fa7b;
+  --color-parallel-combine: #d6a4ff;
+  --color-success: #50fa7b;
+  --color-success-bg: rgba(80, 250, 123, 0.15);
+  --color-error: #ff5555;
+  --color-error-bg: rgba(255, 85, 85, 0.15);
+  --color-error-border: rgba(255, 85, 85, 0.2);
+  --color-accent: #8be9fd;
+  --color-accent-strong: #3b82f6;
+  --color-warning: #ffb86c;
+
+  /* Controller-group palette */
+  --ctrl-sequence-border: rgba(148, 163, 184, 0.25);
+  --ctrl-sequence-bg: rgba(148, 163, 184, 0.03);
+  --ctrl-sequence-text: #94a3b8;
+  --ctrl-parallel-border: rgba(139, 233, 253, 0.35);
+  --ctrl-parallel-bg: rgba(139, 233, 253, 0.03);
+  --ctrl-parallel-text: #8be9fd;
+  --ctrl-condition-border: rgba(251, 191, 36, 0.35);
+  --ctrl-condition-bg: rgba(251, 191, 36, 0.03);
+  --ctrl-condition-text: #fbbf24;
+  --ctrl-batch-border: rgba(167, 139, 250, 0.35);
+  --ctrl-batch-bg: rgba(167, 139, 250, 0.03);
+  --ctrl-batch-text: #a78bfa;
+  --ctrl-folded-bg: rgba(148, 163, 184, 0.25);
+  --ctrl-folded-border: rgba(148, 163, 184, 0.4);
+
+  /* Legacy aliases — still consumed by some inline styles in graph builders */
   --color-bg: #0a0a0a;
   --color-bg-dots: rgba(255, 255, 255, 0.35);
   --color-text-muted: #94a3b8;
   --color-controller-text: #94a3b8;
+
+  /* Fonts */
   --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: "JetBrains Mono", "Monaco", "Menlo", monospace;
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-}
-.react-flow-container {
+
   position: absolute;
   inset: 0;
   background: var(--color-bg);
@@ -644,17 +730,17 @@ svg.react-flow__connectionline {
   cursor: pointer;
 }
 .react-flow__background {
-  background: var(--color-bg) !important;
+  background: var(--color-bg, #0a0a0a) !important;
 }
 .react-flow__edge-path {
   stroke-width: 2;
 }
 .react-flow__edge-text {
   font-size: 11px;
-  fill: var(--color-text-muted);
+  fill: var(--text-muted);
 }
 .react-flow__edge-textbg {
-  fill: var(--color-bg);
+  fill: var(--color-bg, #0a0a0a);
 }
 /* Selected node highlight */
 .react-flow__node.selected {
@@ -677,8 +763,8 @@ svg.react-flow__connectionline {
 }
 .react-flow__node-pipeCard.selected .pipe-card {
   box-shadow:
-    0 0 0 2px var(--color-accent, #3b82f6),
-    0 4px 16px rgba(0, 0, 0, 0.6);
+    0 0 0 2px var(--color-accent),
+    var(--shadow-md);
 }
 .react-flow__node-controllerGroup.selected {
   box-shadow:
@@ -690,9 +776,9 @@ svg.react-flow__connectionline {
 }
 /* ─── Controller Group Node ──────────────────────────────────────────── */
 .controller-group-node {
-  --controller-border: 2px dashed rgba(148, 163, 184, 0.3);
-  --controller-bg: rgba(148, 163, 184, 0.04);
-  --controller-header-color: #64748b;
+  --controller-border: 2px dashed var(--ctrl-sequence-border);
+  --controller-bg: var(--ctrl-sequence-bg);
+  --controller-header-color: var(--ctrl-sequence-text);
 
   width: 100%;
   height: 100%;
@@ -724,13 +810,13 @@ svg.react-flow__connectionline {
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--controller-header-color);
-  font-family: var(--font-mono, "JetBrains Mono", monospace);
+  font-family: var(--font-mono);
 }
 .controller-group-label {
   font-size: 11px;
-  font-family: var(--font-mono, "JetBrains Mono", monospace);
+  font-family: var(--font-mono);
   font-weight: 500;
-  color: var(--color-controller-text, #94a3b8);
+  color: var(--color-controller-text);
   white-space: nowrap;
   margin-left: auto;
 }
@@ -742,23 +828,23 @@ svg.react-flow__connectionline {
   bottom: 4px;
   right: 8px;
   font-size: 10px;
-  font-family: var(--font-mono, "JetBrains Mono", monospace);
-  color: var(--controller-header-color, #94a3b8);
+  font-family: var(--font-mono);
+  color: var(--controller-header-color);
   cursor: pointer;
   padding: 2px 8px;
   border-radius: 4px;
-  border: 1px dashed rgba(255, 255, 255, 0.15);
+  border: 1px dashed var(--border-dashed);
   pointer-events: auto;
   z-index: 10;
   white-space: nowrap;
 }
 .controller-group-collapse:hover {
-  color: #e2e8f0;
-  border-color: rgba(255, 255, 255, 0.35);
-  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  border-color: var(--border-strong);
+  background: var(--surface-elevated);
 }
 .controller-group-collapse:focus-visible {
-  outline: 2px solid var(--controller-header-color, #94a3b8);
+  outline: 2px solid var(--controller-header-color);
   outline-offset: 2px;
 }
 
@@ -768,73 +854,64 @@ svg.react-flow__connectionline {
   cursor: pointer;
   font-size: 20px;
   line-height: 1;
-  color: var(--controller-header-color, #94a3b8);
+  color: var(--controller-header-color);
   padding: 4px 10px;
   border-radius: 6px;
   pointer-events: auto;
   margin-left: auto;
 }
 .controller-group-fold:hover {
-  color: #e2e8f0;
-  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+  background: var(--surface-elevated);
 }
 .controller-group-fold:focus-visible {
-  outline: 2px solid var(--controller-header-color, #94a3b8);
+  outline: 2px solid var(--controller-header-color);
   outline-offset: 2px;
 }
 
 /* Sequence — solid thin border, calm flow */
 .controller-group--sequence {
-  --controller-border: 1.5px solid rgba(148, 163, 184, 0.25);
-  --controller-bg: rgba(148, 163, 184, 0.03);
-  --controller-header-color: #94a3b8;
+  --controller-border: 1.5px solid var(--ctrl-sequence-border);
+  --controller-bg: var(--ctrl-sequence-bg);
+  --controller-header-color: var(--ctrl-sequence-text);
 }
 
 /* Parallel — double border, forking lanes */
 .controller-group--parallel {
-  --controller-border: 3px double rgba(139, 233, 253, 0.35);
-  --controller-bg: rgba(139, 233, 253, 0.03);
-  --controller-header-color: #8be9fd;
+  --controller-border: 3px double var(--ctrl-parallel-border);
+  --controller-bg: var(--ctrl-parallel-bg);
+  --controller-header-color: var(--ctrl-parallel-text);
 }
 
 /* Condition — dashed with diamond accent */
 .controller-group--condition {
-  --controller-border: 2px dashed rgba(251, 191, 36, 0.35);
-  --controller-bg: rgba(251, 191, 36, 0.03);
-  --controller-header-color: #fbbf24;
+  --controller-border: 2px dashed var(--ctrl-condition-border);
+  --controller-bg: var(--ctrl-condition-bg);
+  --controller-header-color: var(--ctrl-condition-text);
 }
 
 /* Batch — dotted border, loop/repeat */
 .controller-group--batch {
-  --controller-border: 2px dotted rgba(167, 139, 250, 0.35);
-  --controller-bg: rgba(167, 139, 250, 0.03);
-  --controller-header-color: #a78bfa;
+  --controller-border: 2px dotted var(--ctrl-batch-border);
+  --controller-bg: var(--ctrl-batch-bg);
+  --controller-header-color: var(--ctrl-batch-text);
 }
 
 /* ─── Pipe Card Node ─────────────────────────────────────────────────── */
-/* All tokens overridable via CSS custom properties on an ancestor.      */
 .pipe-card {
-  --pipe-card-accent: #ff6b6b;
-  --pipe-card-bg: rgba(148, 163, 184, 0.08);
-  --pipe-card-text: #e2e8f0;
-  --pipe-card-text-bright: #f8fafc;
-  --pipe-card-text-muted: #94a3b8;
-  --pipe-card-text-dim: #64748b;
-  --pipe-card-pill-bg: rgba(255, 255, 255, 0.06);
-  --pipe-card-pill-border: rgba(255, 255, 255, 0.08);
-  --pipe-card-pill-text: #cbd5e1;
+  --pipe-card-accent: var(--color-pipe);
   --pipe-card-radius: 8px;
 
   border-left: 4px solid var(--pipe-card-accent);
   border-radius: var(--pipe-card-radius);
   padding: 12px 14px;
-  background: var(--pipe-card-bg);
-  font-family: var(--font-sans, "Inter", -apple-system, sans-serif);
-  color: var(--pipe-card-text);
+  background: var(--surface-elevated);
+  font-family: var(--font-sans);
+  color: var(--text-default);
   display: flex;
   flex-direction: column;
   gap: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-sm);
   transition: box-shadow 0.2s;
   /* Fill the ReactFlow wrapper whose size is locked to ELK's layout dimensions */
   width: 100%;
@@ -843,7 +920,7 @@ svg.react-flow__connectionline {
   overflow: hidden;
 }
 .pipe-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
+  box-shadow: var(--shadow-md);
 }
 
 /* Direction-aware sizing: LR = narrow + tall, TB = wide + short */
@@ -872,10 +949,10 @@ svg.react-flow__connectionline {
   white-space: nowrap;
   line-height: 1.4;
   background: var(--pipe-card-accent);
-  color: #0e0e0e;
+  color: var(--text-on-accent);
 }
 .pipe-card-code {
-  font-family: var(--font-mono, "JetBrains Mono", monospace);
+  font-family: var(--font-mono);
   font-size: 13px;
   font-weight: 600;
   color: var(--pipe-card-accent);
@@ -906,29 +983,29 @@ svg.react-flow__connectionline {
   cursor: pointer;
   font-size: 20px;
   line-height: 1;
-  color: var(--pipe-card-text-muted);
+  color: var(--text-muted);
   padding: 4px 8px;
   border-radius: 6px;
   flex-shrink: 0;
 }
 .pipe-card-expand:hover {
-  color: var(--pipe-card-text-bright);
-  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+  background: var(--surface-elevated-hover);
 }
 .pipe-card-expand:focus-visible {
-  outline: 2px solid var(--pipe-card-text-bright);
+  outline: 2px solid var(--text-primary);
   outline-offset: 2px;
 }
 
 /* Folded-controller card variant — slightly tinted badge to differentiate
    from operator cards. */
 .pipe-card-badge--controller {
-  background: rgba(148, 163, 184, 0.25);
-  color: var(--pipe-card-text-bright);
-  border: 1px solid rgba(148, 163, 184, 0.4);
+  background: var(--ctrl-folded-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--ctrl-folded-border);
 }
 .pipe-card--controller {
-  --pipe-card-accent: #94a3b8;
+  --pipe-card-accent: var(--text-muted);
 }
 @keyframes pipe-card-pulse {
   0%,
@@ -956,7 +1033,7 @@ svg.react-flow__connectionline {
    TB gets 1 line (wide card, horizontal layout). Both truncate with ellipsis. */
 .pipe-card-description {
   font-size: 11.5px;
-  color: var(--pipe-card-text-muted);
+  color: var(--text-muted);
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -977,7 +1054,7 @@ svg.react-flow__connectionline {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--pipe-card-text-dim);
+  color: var(--text-dim);
   flex-shrink: 0;
 }
 .pipe-card-io-pills {
@@ -990,22 +1067,22 @@ svg.react-flow__connectionline {
   align-items: center;
   gap: 3px;
   font-size: 10px;
-  background: var(--pipe-card-pill-bg);
-  border: 1px solid var(--pipe-card-pill-border);
+  background: var(--surface-pill);
+  border: 1px solid var(--surface-pill-border);
   border-radius: 4px;
   padding: 1px 5px;
   line-height: 1.4;
   min-width: 0;
 }
 .pipe-card-io-pill-name {
-  font-family: var(--font-mono, "JetBrains Mono", monospace);
-  color: var(--pipe-card-pill-text);
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .pipe-card-io-pill-concept {
-  color: var(--pipe-card-text-dim);
+  color: var(--text-dim);
   font-size: 9px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1014,21 +1091,21 @@ svg.react-flow__connectionline {
 .pipe-card-io-more {
   all: unset;
   font-size: 10px;
-  font-family: var(--font-mono, "JetBrains Mono", monospace);
-  color: var(--pipe-card-text-muted);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
   cursor: pointer;
   padding: 2px 6px;
   border-radius: 4px;
-  border: 1px dashed rgba(255, 255, 255, 0.12);
+  border: 1px dashed var(--border-default);
   white-space: nowrap;
   line-height: 1.4;
 }
 .pipe-card-io-more:hover {
-  color: var(--pipe-card-text);
-  border-color: rgba(255, 255, 255, 0.25);
+  color: var(--text-default);
+  border-color: var(--border-strong);
 }
 .pipe-card-io-more:focus-visible {
-  outline: 2px solid var(--pipe-card-text);
+  outline: 2px solid var(--text-default);
   outline-offset: 2px;
 }
 
@@ -1087,18 +1164,23 @@ svg.react-flow__connectionline {
 }
 
 /* ─── 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,
@@ -1178,7 +1260,7 @@ svg.react-flow__connectionline {
 
 .stuff-viewer-tab--active {
   background: var(--sv-accent);
-  color: #fff;
+  color: var(--text-on-accent, #0e0e0e);
 }
 
 /* ─── Action buttons ─────────────────────────────────────────────────────── */
@@ -1394,7 +1476,31 @@ button.stuff-viewer-local-file--button:focus-visible {
   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;
+}
+
 /* ─── Detail Panel — sliding side panel for node inspection ─────────────── */
+/* Token-only — all colors come from the active theme palette on the         */
+/* container. See `graphConfig.ts` for token definitions.                    */
 
 .detail-panel {
   position: absolute;
@@ -1402,13 +1508,13 @@ button.stuff-viewer-local-file--button:focus-visible {
   right: 0;
   width: 380px;
   height: 100%;
-  background: #111118;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--surface-panel);
+  border-left: 1px solid var(--border-default);
   z-index: 10;
   display: flex;
   flex-direction: column;
-  font-family: "Inter", -apple-system, sans-serif;
-  color: #e2e8f0;
+  font-family: var(--font-sans);
+  color: var(--text-default);
   overflow: hidden;
   transition: transform 0.2s ease;
 }
@@ -1445,7 +1551,8 @@ button.stuff-viewer-local-file--button:focus-visible {
 
 .detail-panel-resize-handle:hover::before,
 .detail-panel--dragging .detail-panel-resize-handle::before {
-  background: rgba(59, 130, 246, 0.5);
+  background: var(--color-accent);
+  opacity: 0.6;
 }
 
 /* Grip indicator — visible on hover */
@@ -1464,7 +1571,7 @@ button.stuff-viewer-local-file--button:focus-visible {
 
 .detail-panel-resize-handle:hover::after,
 .detail-panel--dragging .detail-panel-resize-handle::after {
-  background: rgba(59, 130, 246, 0.8);
+  background: var(--color-accent);
 }
 
 /* Disable transition during drag for smooth resizing */
@@ -1476,33 +1583,48 @@ button.stuff-viewer-local-file--button:focus-visible {
   pointer-events: none;
 }
 
+/* ─── Close row — scrolls away with the content (intentionally NOT pinned) ─ */
+/* The close button is part of the content's top, not panel chrome: it
+ * scrolls out of view with the content, and closing the panel means
+ * scrolling back up. The negative margin tucks the following section up
+ * beside it so the row doesn't cost a full line of vertical space. */
+
+.detail-panel-close-row {
+  display: flex;
+  justify-content: flex-end;
+  /* Pull the next section up by exactly this row's height + the column
+   * gap, so the close button sits ON the first content line (concept /
+   * pipe header), right-aligned — not on its own line above it. */
+  margin-bottom: -40px;
+}
+
 .detail-panel-close {
   all: unset;
   cursor: pointer;
-  position: absolute;
-  top: 12px;
-  right: 12px;
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  color: #64748b;
+  color: var(--text-dim);
   font-size: 18px;
   line-height: 1;
-  z-index: 3;
+  /* Above the sticky pipe header (z 1) so the X is visible at rest while
+   * sharing its line; on scroll it briefly slides over the stuck header's
+   * empty right side before leaving the viewport. */
+  z-index: 2;
 }
 
 .detail-panel-close:hover {
-  color: #94a3b8;
-  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-muted);
+  background: var(--surface-elevated);
 }
 
 .detail-panel-content {
   flex: 1;
   overflow-y: auto;
-  padding: 20px 16px;
+  padding: 12px 16px 20px;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -1512,11 +1634,11 @@ button.stuff-viewer-local-file--button:focus-visible {
 
 .detail-sticky-header {
   position: sticky;
-  top: -20px;
+  top: -12px; /* must mirror .detail-panel-content's top padding */
   z-index: 1;
-  background: #111118;
-  padding-top: 20px;
-  margin-top: -20px;
+  background: var(--surface-panel);
+  padding-top: 12px;
+  margin-top: -12px;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -1529,7 +1651,7 @@ button.stuff-viewer-local-file--button:focus-visible {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: #64748b;
+  color: var(--text-dim);
   margin-bottom: 6px;
 }
 
@@ -1550,24 +1672,24 @@ button.stuff-viewer-local-file--button:focus-visible {
 }
 
 .detail-badge--operator {
-  background: #ff6b6b;
-  color: #0e0e0e;
+  background: var(--color-pipe);
+  color: var(--text-on-accent);
 }
 
 .detail-badge--controller {
-  background: #bd93f9;
-  color: #0e0e0e;
+  background: var(--color-batch-item);
+  color: var(--text-on-accent);
 }
 
 .detail-pipe-code {
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 600;
-  color: #ff6b6b;
+  color: var(--color-pipe);
 }
 
 .detail-pipe-code--controller {
-  color: #bd93f9;
+  color: var(--color-batch-item);
 }
 
 .detail-status {
@@ -1591,13 +1713,13 @@ button.stuff-viewer-local-file--button:focus-visible {
 
 .detail-duration {
   font-size: 11px;
-  color: #64748b;
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
 }
 
 .detail-description {
   font-size: 12px;
-  color: #94a3b8;
+  color: var(--text-muted);
   line-height: 1.5;
 }
 
@@ -1610,17 +1732,17 @@ button.stuff-viewer-local-file--button:focus-visible {
   font-size: 11px;
   padding: 3px 8px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-subtle);
 }
 
 .detail-io-name {
-  font-family: "JetBrains Mono", "Monaco", monospace;
-  color: #e2e8f0;
+  font-family: var(--font-mono);
+  color: var(--text-default);
 }
 
 .detail-io-concept {
-  color: #64748b;
+  color: var(--text-dim);
   font-size: 10px;
 }
 
@@ -1633,11 +1755,11 @@ button.stuff-viewer-local-file--button:focus-visible {
 /* ─── Blueprint-specific sections ───────────────────────────────────────── */
 
 .detail-prompt-block {
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
-  color: #94a3b8;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  color: var(--text-muted);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-subtle);
   border-radius: 6px;
   padding: 10px 12px;
   white-space: pre-wrap;
@@ -1662,16 +1784,16 @@ button.stuff-viewer-local-file--button:focus-visible {
   align-items: center;
   gap: 4px;
   font-size: 9px;
-  color: #64748b;
+  color: var(--text-dim);
   padding: 2px 6px;
   border-radius: 3px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-subtle);
   transition: color 0.15s;
 }
 
 .detail-prompt-expand-btn:hover {
-  color: #94a3b8;
+  color: var(--text-muted);
 }
 
 .detail-kv-row {
@@ -1684,13 +1806,13 @@ button.stuff-viewer-local-file--button:focus-visible {
 }
 
 .detail-kv-key {
-  color: #64748b;
+  color: var(--text-dim);
   flex-shrink: 0; /* label stays at its natural width */
 }
 
 .detail-kv-value {
-  font-family: "JetBrains Mono", "Monaco", monospace;
-  color: #e2e8f0;
+  font-family: var(--font-mono);
+  color: var(--text-default);
   flex: 1 1 0;
   min-width: 0;
   text-align: right;
@@ -1707,17 +1829,17 @@ button.stuff-viewer-local-file--button:focus-visible {
 }
 
 .detail-field-block-label {
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
-  color: #64748b;
+  color: var(--text-dim);
 }
 
 .detail-field-block-value {
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
-  color: #e2e8f0;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  color: var(--text-default);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-subtle);
   border-radius: 6px;
   padding: 8px 10px;
   white-space: pre-wrap;
@@ -1741,20 +1863,20 @@ button.stuff-viewer-local-file--button:focus-visible {
   margin-top: 6px;
   margin-bottom: 4px;
   padding: 4px 0 4px 8px;
-  border-left: 2px solid rgba(80, 250, 123, 0.35);
+  border-left: 2px solid var(--color-success);
 }
 
 .detail-nested-header-name {
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
-  color: #e2e8f0;
+  color: var(--text-default);
 }
 
 .detail-nested-header-meta {
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  font-family: var(--font-mono);
   font-size: 9px;
-  color: #64748b;
+  color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -1770,39 +1892,39 @@ button.stuff-viewer-local-file--button:focus-visible {
 .detail-schema-table th {
   text-align: left;
   font-weight: 700;
-  color: #64748b;
+  color: var(--text-dim);
   font-size: 9px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 4px 6px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .detail-schema-table td {
   padding: 4px 6px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-  color: #94a3b8;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-muted);
 }
 
 .detail-schema-field {
-  font-family: "JetBrains Mono", "Monaco", monospace;
-  color: #e2e8f0;
+  font-family: var(--font-mono);
+  color: var(--text-default);
 }
 
 .detail-schema-type {
-  color: #8be9fd;
+  color: var(--color-accent);
 }
 
 .detail-schema-required {
-  color: #ff6b6b;
+  color: var(--color-pipe);
   font-size: 9px;
 }
 
 /* ─── Error section ─────────────────────────────────────────────────────── */
 
 .detail-error {
-  background: rgba(255, 85, 85, 0.08);
-  border: 1px solid rgba(255, 85, 85, 0.2);
+  background: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
   border-radius: 6px;
   padding: 10px 12px;
 }
@@ -1810,20 +1932,20 @@ button.stuff-viewer-local-file--button:focus-visible {
 .detail-error-type {
   font-size: 12px;
   font-weight: 600;
-  color: #ff5555;
+  color: var(--color-error);
   margin-bottom: 4px;
 }
 
 .detail-error-message {
   font-size: 11px;
-  color: #94a3b8;
+  color: var(--text-muted);
   line-height: 1.5;
 }
 
 .detail-error-stack {
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
-  color: #64748b;
+  color: var(--text-dim);
   margin-top: 8px;
   max-height: 150px;
   overflow-y: auto;
@@ -1846,20 +1968,20 @@ button.stuff-viewer-local-file--button:focus-visible {
   font-size: 11px;
   padding: 4px 8px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-subtle);
 }
 
 .detail-step-index {
-  color: #64748b;
+  color: var(--text-dim);
   font-size: 10px;
   font-weight: 700;
   min-width: 16px;
 }
 
 .detail-step-code {
-  font-family: "JetBrains Mono", "Monaco", monospace;
-  color: #e2e8f0;
+  font-family: var(--font-mono);
+  color: var(--text-default);
 }
 
 /* ─── Tags/Metrics ──────────────────────────────────────────────────────── */
@@ -1874,53 +1996,96 @@ button.stuff-viewer-local-file--button:focus-visible {
   font-size: 10px;
   padding: 2px 6px;
   border-radius: 3px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-subtle);
 }
 
 .detail-tag-key {
-  color: #64748b;
+  color: var(--text-dim);
 }
 
 .detail-tag-value {
-  color: #e2e8f0;
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  color: var(--text-default);
+  font-family: var(--font-mono);
+}
+
+/* ─── Detail tabs (Data / Structure) ────────────────────────────────────── */
+
+.detail-tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--border-default);
+}
+
+.detail-tab {
+  all: unset;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  padding: 5px 10px;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.detail-tab:hover {
+  color: var(--text-muted);
+}
+
+.detail-tab--active {
+  color: var(--text-default);
+  border-bottom-color: var(--color-accent);
+}
+
+/* `all: unset` strips the UA focus ring — restore a visible indicator for
+ * keyboard users (WCAG 2.4.7) on every unset button in the panel. */
+.detail-tab:focus-visible,
+.detail-panel-close:focus-visible,
+.detail-prompt-expand-btn:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
 /* ─── Concept panel header ──────────────────────────────────────────────── */
 
 .detail-concept-code {
-  font-family: "JetBrains Mono", "Monaco", monospace;
+  font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 600;
-  color: #50fa7b;
+  color: var(--color-success);
 }
 
 .detail-concept-domain {
   font-size: 11px;
-  color: #64748b;
+  color: var(--text-dim);
 }
 
 .detail-refines {
   font-size: 11px;
-  color: #94a3b8;
+  color: var(--text-muted);
 }
 
 .detail-refines-code {
-  font-family: "JetBrains Mono", "Monaco", monospace;
-  color: #8be9fd;
+  font-family: var(--font-mono);
+  color: var(--color-accent);
 }
 
 /* ─── Not available fallback ────────────────────────────────────────────── */
 
 .detail-not-available {
   font-size: 12px;
-  color: #64748b;
+  color: var(--text-dim);
   font-style: italic;
   padding: 8px 0;
 }
 
 /* ─── 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;
@@ -1942,9 +2107,9 @@ button.stuff-viewer-local-file--button:focus-visible {
   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,
@@ -1953,46 +2118,42 @@ button.stuff-viewer-local-file--button:focus-visible {
 }
 
 .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;
 }