@pipelex/mthds-ui 0.9.0 → 0.10.0

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":"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","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":";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;;;ACjkBA,CAAC;AACC,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,kBAAgB;AAClB;AAIA,CAAC;AACC,kBAAgB;AAClB;AAEA,CAJC,wBAIwB,CAAC;AACxB,SAAO;AACP,UAAQ;AACR,UAAQ,IAAI;AACd;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,CA3D0B;AA4DxB,SAAO;AACP,UAAQ;AACR,cAAY,IAAI;AAChB,UAAQ,EAAE;AACZ;","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 GraphThemeMode, 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-uGRs3n4k.js';
-export { m as PipeOperatorType } from '../../types-uGRs3n4k.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. */
@@ -85,6 +85,19 @@ interface GraphViewerProps {
      * 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

package/dist/graph/react/index.js

@@ -16,8 +16,10 @@ import {
   getPipeBlueprint,
   resolveConceptRef,
   stuffDigestFromId,
+  toolbarOrientation,
+  toolbarSide,
   validateGraphSpec
-} from "../../chunk-WNSV4E7G.js";
+} from "../../chunk-D2ID5Z3Y.js";
 import {
   __spreadProps,
   __spreadValues
@@ -1515,18 +1517,19 @@ function SchemaTable({
 }
 function extractType(schema) {
   var _a;
-  if (schema.type) return String(schema.type);
+  if (typeof schema.type === "string") return schema.type;
+  if (Array.isArray(schema.type)) return schema.type.join(" | ");
   if (schema.anyOf) return "union";
   if (schema.allOf) return "all";
-  if (schema.$ref) {
-    const ref = String(schema.$ref);
+  if (typeof schema.$ref === "string") {
+    const ref = schema.$ref;
     return (_a = ref.split("/").pop()) != null ? _a : "(unresolved type)";
   }
   return "(unresolved type)";
 }
 function toStuffViewerData(ioData) {
   var _a;
-  if ("digest" in ioData) return ioData;
+  if (isStuffViewerData(ioData)) return ioData;
   return {
     digest: (_a = ioData.digest) != null ? _a : "",
     name: ioData.name,
@@ -1537,6 +1540,9 @@ function toStuffViewerData(ioData) {
     dataHtml: ioData.data_html
   };
 }
+function isStuffViewerData(ioData) {
+  return "contentType" in ioData || "dataText" in ioData || "dataHtml" in ioData;
+}
 
 // src/graph/react/rfTypes.ts
 function toAppNodes(nodes) {
@@ -1669,7 +1675,9 @@ function hydrateLabels(nodes) {
 }
 
 // src/graph/react/viewer/GraphToolbar.tsx
+import { Panel } from "@xyflow/react";
 import { Fragment as Fragment11, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+var REACTFLOW_PANEL_MARGIN = 15;
 var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs16(
   "svg",
   {
@@ -1914,16 +1922,20 @@ function GraphToolbar({
   expandAllDisabled = false,
   themeMode,
   onThemeModeChange,
-  rightOffset = 0
+  rightOffset = 0,
+  position
 }) {
   const themeToggleEnabled = themeMode !== void 0 && onThemeModeChange !== void 0;
+  const orientation = toolbarOrientation(position);
+  const dodgesDetailPanel = toolbarSide(position) === "right" && rightOffset > 0;
+  const panelStyle = dodgesDetailPanel ? { marginRight: REACTFLOW_PANEL_MARGIN + rightOffset } : void 0;
   const isVertical = direction === GRAPH_DIRECTION.TB || direction === GRAPH_DIRECTION.BT;
   const directionLabel = isVertical ? "Switch to horizontal layout" : "Switch to vertical layout";
   const controllersLabel = showControllers ? "Hide pipe controllers" : "Show pipe controllers \u2014 groups pipes by their controlling pipe";
   const foldAllSection = onFoldAll || onExpandAll;
   const foldAllTitle = foldAllDisabled ? "Fold all controllers (nothing to fold)" : "Fold all controllers";
   const expandAllTitle = expandAllDisabled ? "Expand all controllers (nothing to expand)" : "Expand all controllers";
-  return /* @__PURE__ */ jsxs16("div", { className: "graph-toolbar", style: { right: `${rightOffset + 8}px` }, children: [
+  return /* @__PURE__ */ jsx16(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs16("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
     onFoldAll && /* @__PURE__ */ jsx16(
       "button",
       {
@@ -2019,7 +2031,7 @@ function GraphToolbar({
         }
       )
     ] })
-  ] });
+  ] }) });
 }
 
 // src/graph/react/nodes/controller/ControllerGroupNode.tsx
@@ -2306,6 +2318,10 @@ function resolveExternalThemeMode(themeProp, configTheme) {
 function resolveActiveTheme(mode, systemTheme) {
   return mode === GRAPH_THEME_MODE.SYSTEM ? systemTheme : mode;
 }
+function resolveToolbarPosition(positionProp, configPosition) {
+  var _a;
+  return (_a = positionProp != null ? positionProp : configPosition) != null ? _a : DEFAULT_GRAPH_CONFIG.toolbarPosition;
+}
 function cloneCachedNodes(nodes) {
   return nodes.map((n) => __spreadProps(__spreadValues({}, n), {
     position: __spreadValues({}, n.position),
@@ -2339,6 +2355,7 @@ function GraphViewer(props) {
     initialFoldMode,
     hideToolbar = false,
     theme: themeProp,
+    toolbarPosition: toolbarPositionProp,
     systemTheme: systemThemeProp,
     showThemeToggle = true,
     onThemeChange,
@@ -2483,7 +2500,7 @@ function GraphViewer(props) {
   React9.useEffect(() => {
     if (!initialDataRef.current) return;
     let cancelled = false;
-    (async () => {
+    void (async () => {
       try {
         const data = initialDataRef.current;
         if (!data) return;
@@ -2521,7 +2538,7 @@ function GraphViewer(props) {
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
-            reactFlowRef.current.fitView({ padding: 0.1 });
+            void reactFlowRef.current.fitView({ padding: 0.1 });
           }
         }, 50);
       } catch (err) {
@@ -2593,7 +2610,7 @@ function GraphViewer(props) {
       _analysis: folded.analysis,
       _graphspec: graphspec
     };
-    (async () => {
+    void (async () => {
       try {
         const currentDirection = directionRef.current;
         const currentLayoutConfig = layoutConfigRef.current;
@@ -2638,13 +2655,13 @@ function GraphViewer(props) {
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
-            reactFlowRef.current.fitView({ padding: 0.1 });
+            void reactFlowRef.current.fitView({ padding: 0.1 });
             if (initialZoomRef.current !== void 0 && initialZoomRef.current !== null) {
-              reactFlowRef.current.zoomTo(initialZoomRef.current);
+              void reactFlowRef.current.zoomTo(initialZoomRef.current);
             }
             if (panToTopRef.current) {
               const vp = reactFlowRef.current.getViewport();
-              reactFlowRef.current.setViewport({ x: vp.x, y: 20, zoom: vp.zoom });
+              void reactFlowRef.current.setViewport({ x: vp.x, y: 20, zoom: vp.zoom });
             }
           }
         }, 100);
@@ -2689,7 +2706,7 @@ function GraphViewer(props) {
       _analysis: folded.analysis,
       _graphspec: currentGraphspec
     };
-    (async () => {
+    void (async () => {
       try {
         const layouted = await getLayoutedElements(
           folded.nodes,
@@ -2725,7 +2742,7 @@ function GraphViewer(props) {
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
-            reactFlowRef.current.fitView({ padding: 0.1 });
+            void reactFlowRef.current.fitView({ padding: 0.1 });
           }
         }, 50);
       } catch (err) {
@@ -2820,6 +2837,10 @@ function GraphViewer(props) {
   );
   const selectedSpecNode = (detailSelection == null ? void 0 : detailSelection.kind) === "pipe" && graphspec ? graphspec.nodes.find((n) => n.pipe_code === detailSelection.nodeData.pipeCode) : void 0;
   const detailOpen = detailSelection !== null || conceptOverride !== null;
+  const effectiveToolbarPosition = resolveToolbarPosition(
+    toolbarPositionProp,
+    config.toolbarPosition
+  );
   const rawAnalysis = (_c = rawGraphDataRef.current) == null ? void 0 : _c.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
   const foldAllProps = React9.useMemo(() => {
@@ -2844,7 +2865,7 @@ function GraphViewer(props) {
       ref: containerRef,
       className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}`,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs20(
           ReactFlow,
           {
             nodes,
@@ -2862,15 +2883,46 @@ function GraphViewer(props) {
             minZoom: 0.1,
             proOptions: { hideAttribution: true },
             panActivationKeyCode: null,
-            children: /* @__PURE__ */ jsx20(
-              Background,
-              {
-                variant: BackgroundVariant.Dots,
-                gap: 20,
-                size: 1,
-                color: "var(--color-bg-dots)"
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx20(
+                Background,
+                {
+                  variant: BackgroundVariant.Dots,
+                  gap: 20,
+                  size: 1,
+                  color: "var(--color-bg-dots)"
+                }
+              ),
+              !hideToolbar && /* @__PURE__ */ jsx20(
+                GraphToolbar,
+                {
+                  direction,
+                  onDirectionChange: setDirection,
+                  showControllers,
+                  onShowControllersChange: setShowControllers,
+                  onZoomIn: () => {
+                    var _a2;
+                    void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn());
+                  },
+                  onZoomOut: () => {
+                    var _a2;
+                    void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut());
+                  },
+                  onFitView: () => {
+                    var _a2;
+                    void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 }));
+                  },
+                  onFoldAll: foldAllProps.onFoldAll,
+                  onExpandAll: foldAllProps.onExpandAll,
+                  foldAllDisabled: foldAllProps.foldAllDisabled,
+                  expandAllDisabled: foldAllProps.expandAllDisabled,
+                  themeMode: showThemeToggle ? mode : void 0,
+                  onThemeModeChange: showThemeToggle ? setMode : void 0,
+                  rightOffset: detailOpen ? panelWidth : 0,
+                  position: effectiveToolbarPosition
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsxs20(
@@ -2903,34 +2955,6 @@ function GraphViewer(props) {
               renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
             ]
           }
-        ),
-        !hideToolbar && /* @__PURE__ */ jsx20(
-          GraphToolbar,
-          {
-            direction,
-            onDirectionChange: setDirection,
-            showControllers,
-            onShowControllersChange: setShowControllers,
-            onZoomIn: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
-            },
-            onZoomOut: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
-            },
-            onFitView: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
-            },
-            onFoldAll: foldAllProps.onFoldAll,
-            onExpandAll: foldAllProps.onExpandAll,
-            foldAllDisabled: foldAllProps.foldAllDisabled,
-            expandAllDisabled: foldAllProps.expandAllDisabled,
-            themeMode: showThemeToggle ? mode : void 0,
-            onThemeModeChange: showThemeToggle ? setMode : void 0,
-            rightOffset: detailOpen ? panelWidth : 0
-          }
         )
       ]
     }