@pipelex/mthds-ui 0.5.0

package/dist/graph/react/index.css

@@ -0,0 +1,753 @@
+/* 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-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);
+  font-family: var(--sv-font-sans);
+  color: var(--sv-text);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.stuff-viewer-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 16px 8px;
+  border-bottom: 1px solid var(--sv-border);
+  flex-shrink: 0;
+}
+.stuff-viewer-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--sv-text);
+  margin: 0;
+}
+.stuff-viewer-subtitle {
+  font-size: 12px;
+  color: var(--sv-text-muted);
+  margin: 0;
+}
+.stuff-viewer-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.stuff-viewer-tabs {
+  display: flex;
+  gap: 4px;
+}
+.stuff-viewer-tab {
+  padding: 5px 10px;
+  border-radius: var(--sv-radius);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--sv-surface-hover);
+  color: var(--sv-text-muted);
+  border: none;
+  transition: background 0.15s, color 0.15s;
+}
+.stuff-viewer-tab:hover {
+  background: var(--sv-border);
+  color: var(--sv-text);
+}
+.stuff-viewer-tab--active {
+  background: var(--sv-accent);
+  color: #fff;
+}
+.stuff-viewer-actions {
+  display: flex;
+  gap: 4px;
+}
+.stuff-viewer-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--sv-radius);
+  cursor: pointer;
+  background: var(--sv-surface-hover);
+  color: var(--sv-text-muted);
+  border: none;
+  transition: background 0.15s, color 0.15s;
+}
+.stuff-viewer-action-btn:hover {
+  background: var(--sv-border);
+  color: var(--sv-text);
+}
+.stuff-viewer-action-btn--copied {
+  background: var(--sv-success-bg);
+  color: var(--sv-success);
+}
+.stuff-viewer-action-btn svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+.stuff-viewer-content {
+  flex: 1;
+  overflow: auto;
+  padding: 12px 16px 16px;
+  min-height: 0;
+}
+.stuff-viewer-pre {
+  font-family: var(--sv-font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
+  color: var(--sv-text-muted);
+}
+.stuff-viewer-pre--nowrap {
+  white-space: pre;
+  word-wrap: normal;
+  line-height: 1;
+  overflow-x: auto;
+  padding-right: 20px;
+}
+.stuff-viewer-html {
+  font-family: var(--sv-font-sans);
+  font-size: 11px;
+  color: var(--sv-text-muted);
+  line-height: 1.5;
+}
+.stuff-viewer-html table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.stuff-viewer-html th,
+.stuff-viewer-html td {
+  border: 1px solid var(--sv-border);
+  padding: 8px 12px;
+  text-align: left;
+}
+.stuff-viewer-html th {
+  background: var(--sv-surface-hover);
+  color: var(--sv-text);
+  font-weight: 600;
+}
+.stuff-viewer-html tr:hover {
+  background: var(--sv-surface-hover);
+}
+.stuff-viewer-html a {
+  color: var(--sv-accent);
+  text-decoration: none;
+}
+.stuff-viewer-html a:hover {
+  text-decoration: underline;
+}
+.stuff-viewer-html ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+.stuff-viewer-pdf {
+  min-height: 400px;
+  height: 100%;
+}
+.stuff-viewer-pdf embed {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  border: none;
+}
+.stuff-viewer-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+.stuff-viewer-image img {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+}
+.stuff-viewer-local-file {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 6px;
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-border);
+}
+.stuff-viewer-local-file-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  color: var(--sv-text-muted);
+}
+.stuff-viewer-local-file-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+.stuff-viewer-local-file-info {
+  flex: 1;
+  min-width: 0;
+}
+.stuff-viewer-local-file-name {
+  font-family: var(--sv-font-mono);
+  font-size: 12px;
+  color: var(--sv-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stuff-viewer-local-file-hint {
+  font-size: 11px;
+  color: var(--sv-text-muted);
+  margin-top: 2px;
+}
+.stuff-viewer-placeholder {
+  color: var(--sv-text-muted);
+  font-style: italic;
+  font-size: 13px;
+}
+
+/* src/graph/react/detail/DetailPanel.css */
+.detail-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 380px;
+  height: 100%;
+  background: #111118;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  font-family:
+    "Inter",
+    -apple-system,
+    sans-serif;
+  color: #e2e8f0;
+  overflow: hidden;
+  transition: transform 0.2s ease;
+}
+.detail-panel--closed {
+  transform: translateX(100%);
+  pointer-events: none;
+}
+.detail-panel-resize-handle {
+  position: absolute;
+  top: 0;
+  left: -6px;
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 2;
+  background: transparent;
+}
+.detail-panel-resize-handle::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 5px;
+  width: 2px;
+  height: 100%;
+  background: transparent;
+  transition: background 0.15s;
+}
+.detail-panel-resize-handle:hover::before,
+.detail-panel--dragging .detail-panel-resize-handle::before {
+  background: rgba(59, 130, 246, 0.5);
+}
+.detail-panel-resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 24px;
+  border-radius: 1px;
+  background: transparent;
+  transition: background 0.15s;
+}
+.detail-panel-resize-handle:hover::after,
+.detail-panel--dragging .detail-panel-resize-handle::after {
+  background: rgba(59, 130, 246, 0.8);
+}
+.detail-panel--dragging {
+  transition: none;
+}
+.detail-panel--dragging .detail-panel-content {
+  pointer-events: none;
+}
+.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;
+  font-size: 18px;
+  line-height: 1;
+  z-index: 3;
+}
+.detail-panel-close:hover {
+  color: #94a3b8;
+  background: rgba(255, 255, 255, 0.06);
+}
+.detail-panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.detail-sticky-header {
+  position: sticky;
+  top: -20px;
+  z-index: 1;
+  background: #111118;
+  padding-top: 20px;
+  margin-top: -20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.detail-section-label {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #64748b;
+  margin-bottom: 6px;
+}
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.detail-badge {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 7px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+.detail-badge--operator {
+  background: #ff6b6b;
+  color: #0e0e0e;
+}
+.detail-badge--controller {
+  background: #bd93f9;
+  color: #0e0e0e;
+}
+.detail-pipe-code {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ff6b6b;
+}
+.detail-pipe-code--controller {
+  color: #bd93f9;
+}
+.detail-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.detail-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.detail-status-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+.detail-duration {
+  font-size: 11px;
+  color: #64748b;
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+}
+.detail-description {
+  font-size: 12px;
+  color: #94a3b8;
+  line-height: 1.5;
+}
+.detail-io-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  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);
+}
+.detail-io-name {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  color: #e2e8f0;
+}
+.detail-io-concept {
+  color: #64748b;
+  font-size: 10px;
+}
+.detail-io-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.detail-prompt-block {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  font-size: 11px;
+  color: #94a3b8;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 6px;
+  padding: 10px 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-y: auto;
+  line-height: 1.5;
+}
+.detail-prompt-block--collapsed {
+  max-height: 300px;
+}
+.detail-prompt-block--expanded {
+  max-height: none;
+  overflow-y: visible;
+}
+.detail-prompt-expand-btn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 9px;
+  color: #64748b;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  transition: color 0.15s;
+}
+.detail-prompt-expand-btn:hover {
+  color: #94a3b8;
+}
+.detail-kv-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  font-size: 11px;
+  padding: 3px 0;
+}
+.detail-kv-key {
+  color: #64748b;
+  flex-shrink: 0;
+}
+.detail-kv-value {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  color: #e2e8f0;
+  flex: 1 1 0;
+  min-width: 0;
+  text-align: right;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+.detail-field-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.detail-field-block-label {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  font-size: 10px;
+  color: #64748b;
+}
+.detail-field-block-value {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  font-size: 11px;
+  color: #e2e8f0;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 6px;
+  padding: 8px 10px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.detail-nested-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 6px;
+  margin-bottom: 4px;
+  padding: 4px 0 4px 8px;
+  border-left: 2px solid rgba(80, 250, 123, 0.35);
+}
+.detail-nested-header-name {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  font-size: 11px;
+  font-weight: 600;
+  color: #e2e8f0;
+}
+.detail-nested-header-meta {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  font-size: 9px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.detail-schema-table {
+  width: 100%;
+  font-size: 11px;
+  border-collapse: collapse;
+}
+.detail-schema-table th {
+  text-align: left;
+  font-weight: 700;
+  color: #64748b;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 4px 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.detail-schema-table td {
+  padding: 4px 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  color: #94a3b8;
+}
+.detail-schema-field {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  color: #e2e8f0;
+}
+.detail-schema-type {
+  color: #8be9fd;
+}
+.detail-schema-required {
+  color: #ff6b6b;
+  font-size: 9px;
+}
+.detail-error {
+  background: rgba(255, 85, 85, 0.08);
+  border: 1px solid rgba(255, 85, 85, 0.2);
+  border-radius: 6px;
+  padding: 10px 12px;
+}
+.detail-error-type {
+  font-size: 12px;
+  font-weight: 600;
+  color: #ff5555;
+  margin-bottom: 4px;
+}
+.detail-error-message {
+  font-size: 11px;
+  color: #94a3b8;
+  line-height: 1.5;
+}
+.detail-error-stack {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  font-size: 10px;
+  color: #64748b;
+  margin-top: 8px;
+  max-height: 150px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.detail-steps-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.detail-step-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  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);
+}
+.detail-step-index {
+  color: #64748b;
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 16px;
+}
+.detail-step-code {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  color: #e2e8f0;
+}
+.detail-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.detail-tag {
+  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);
+}
+.detail-tag-key {
+  color: #64748b;
+}
+.detail-tag-value {
+  color: #e2e8f0;
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+}
+.detail-concept-code {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  font-size: 14px;
+  font-weight: 600;
+  color: #50fa7b;
+}
+.detail-concept-domain {
+  font-size: 11px;
+  color: #64748b;
+}
+.detail-refines {
+  font-size: 11px;
+  color: #94a3b8;
+}
+.detail-refines-code {
+  font-family:
+    "JetBrains Mono",
+    "Monaco",
+    monospace;
+  color: #8be9fd;
+}
+.detail-not-available {
+  font-size: 12px;
+  color: #64748b;
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* src/graph/react/viewer/GraphToolbar.css */
+.graph-toolbar {
+  position: absolute;
+  top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 11;
+  pointer-events: auto;
+}
+.graph-toolbar-btn {
+  all: unset;
+  box-sizing: border-box;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  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;
+  backdrop-filter: blur(6px);
+  transition:
+    background 0.15s,
+    color 0.15s,
+    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);
+}
+.graph-toolbar-btn:focus-visible {
+  outline: 2px solid rgba(59, 130, 246, 0.6);
+  outline-offset: 1px;
+}
+.graph-toolbar-btn--active {
+  background: #3b82f6;
+  border-color: #3b82f6;
+  color: #ffffff;
+}
+.graph-toolbar-btn--active:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+  color: #ffffff;
+}
+.graph-toolbar-separator {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.12);
+  margin: 0 2px;
+}
+/*# sourceMappingURL=index.css.map */