@pipelex/mthds-ui 0.6.4 → 0.7.0

package/dist/graph/react/index.css

@@ -1,14 +1,14 @@
 /* src/graph/react/stuff/StuffViewer.css */
 .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, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
   --sv-font-mono: var(--font-mono, "JetBrains Mono", "Monaco", "Menlo", monospace);
@@ -66,7 +66,7 @@
 }
 .stuff-viewer-tab--active {
   background: var(--sv-accent);
-  color: #fff;
+  color: var(--text-on-accent, #0e0e0e);
 }
 .stuff-viewer-actions {
   display: flex;
@@ -235,6 +235,25 @@ button.stuff-viewer-local-file--button:focus-visible {
   font-style: italic;
   font-size: 13px;
 }
+.stuff-viewer-error {
+  border: 1px solid var(--color-status-failed, #ff5555);
+  border-radius: 6px;
+  padding: 12px;
+  background: rgba(255, 85, 85, 0.08);
+}
+.stuff-viewer-error-title {
+  color: var(--color-status-failed, #ff5555);
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+.stuff-viewer-error-detail {
+  color: var(--sv-text-muted);
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
 
 /* src/graph/react/detail/DetailPanel.css */
 .detail-panel {
@@ -243,16 +262,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;
 }
@@ -282,7 +298,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;
 }
 .detail-panel-resize-handle::after {
   content: "";
@@ -298,7 +315,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);
 }
 .detail-panel--dragging {
   transition: none;
@@ -306,42 +323,44 @@ button.stuff-viewer-local-file--button:focus-visible {
 .detail-panel--dragging .detail-panel-content {
   pointer-events: none;
 }
+.detail-panel-close-row {
+  display: flex;
+  justify-content: flex-end;
+  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;
+  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;
 }
 .detail-sticky-header {
   position: sticky;
-  top: -20px;
+  top: -12px;
   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;
@@ -351,7 +370,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;
 }
 .detail-header {
@@ -369,24 +388,21 @@ button.stuff-viewer-local-file--button:focus-visible {
   white-space: nowrap;
 }
 .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 {
   display: flex;
@@ -406,15 +422,12 @@ 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;
 }
 .detail-io-pill {
@@ -424,18 +437,15 @@ 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;
 }
 .detail-io-list {
@@ -444,14 +454,11 @@ button.stuff-viewer-local-file--button:focus-visible {
   gap: 4px;
 }
 .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;
@@ -473,15 +480,15 @@ 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 {
   display: flex;
@@ -492,15 +499,12 @@ button.stuff-viewer-local-file--button:focus-visible {
   padding: 3px 0;
 }
 .detail-kv-key {
-  color: #64748b;
+  color: var(--text-dim);
   flex-shrink: 0;
 }
 .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;
@@ -513,22 +517,16 @@ button.stuff-viewer-local-file--button:focus-visible {
   gap: 4px;
 }
 .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;
@@ -546,24 +544,18 @@ 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;
 }
@@ -575,56 +567,50 @@ 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;
 }
 .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;
 }
 .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;
@@ -643,21 +629,18 @@ 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);
 }
 .detail-tags {
   display: flex;
@@ -668,46 +651,67 @@ 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 {
+  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);
+}
+.detail-tab:focus-visible,
+.detail-panel-close:focus-visible,
+.detail-prompt-expand-btn:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 .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);
 }
 .detail-not-available {
   font-size: 12px;
-  color: #64748b;
+  color: var(--text-dim);
   font-style: italic;
   padding: 8px 0;
 }
@@ -732,9 +736,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,
@@ -742,40 +746,37 @@ button.stuff-viewer-local-file--button:focus-visible {
     border-color 0.15s;
 }
 .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;
 }
 /*# sourceMappingURL=index.css.map */