@pipelex/mthds-ui 0.29.0 → 0.30.0

package/dist/graph/react/index.css

@@ -1,749 +0,0 @@
-/* src/graph/react/detail/DetailPanel.css */
-.detail-panel {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 380px;
-  height: 100%;
-  background: var(--surface-panel);
-  border-left: 1px solid var(--border-default);
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--font-sans);
-  color: var(--text-default);
-  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: var(--color-accent);
-  opacity: 0.6;
-}
-.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: var(--color-accent);
-}
-.detail-panel--dragging {
-  transition: none;
-}
-.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;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  color: var(--text-dim);
-  font-size: 18px;
-  line-height: 1;
-  z-index: 2;
-}
-.detail-panel-close:hover {
-  color: var(--text-muted);
-  background: var(--surface-elevated);
-}
-.detail-panel-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 16px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.detail-sticky-header {
-  position: sticky;
-  top: -12px;
-  z-index: 1;
-  background: var(--surface-panel);
-  padding-top: 12px;
-  margin-top: -12px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.detail-section-label {
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-dim);
-  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: var(--color-pipe);
-  color: var(--text-on-accent);
-}
-.detail-badge--controller {
-  background: var(--color-batch-item);
-  color: var(--text-on-accent);
-}
-.detail-pipe-code {
-  font-family: var(--font-mono);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-pipe);
-}
-.detail-pipe-code--controller {
-  color: var(--color-batch-item);
-}
-.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: var(--text-dim);
-  font-family: var(--font-mono);
-}
-.detail-description {
-  font-size: 12px;
-  color: var(--text-muted);
-  line-height: 1.5;
-}
-.detail-io-pill {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  padding: 3px 8px;
-  border-radius: 4px;
-  background: var(--surface-sunken);
-  border: 1px solid var(--border-subtle);
-}
-.detail-io-name {
-  font-family: var(--font-mono);
-  color: var(--text-default);
-}
-.detail-io-concept {
-  color: var(--text-dim);
-  font-size: 10px;
-}
-.detail-io-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.detail-prompt-block {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-muted);
-  background: var(--surface-sunken);
-  border: 1px solid var(--border-subtle);
-  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: var(--text-dim);
-  padding: 2px 6px;
-  border-radius: 3px;
-  background: var(--surface-sunken);
-  border: 1px solid var(--border-subtle);
-  transition: color 0.15s;
-}
-.detail-prompt-expand-btn:hover {
-  color: var(--text-muted);
-}
-.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: var(--text-dim);
-  flex-shrink: 0;
-}
-.detail-kv-value {
-  font-family: var(--font-mono);
-  color: var(--text-default);
-  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: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-dim);
-}
-.detail-field-block-value {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-default);
-  background: var(--surface-sunken);
-  border: 1px solid var(--border-subtle);
-  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 var(--color-success);
-}
-.detail-nested-header-name {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-default);
-}
-.detail-nested-header-meta {
-  font-family: var(--font-mono);
-  font-size: 9px;
-  color: var(--text-dim);
-  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: var(--text-dim);
-  font-size: 9px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--border-default);
-}
-.detail-schema-table td {
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--border-subtle);
-  color: var(--text-muted);
-}
-.detail-schema-field {
-  font-family: var(--font-mono);
-  color: var(--text-default);
-}
-.detail-schema-type {
-  color: var(--color-accent);
-}
-.detail-schema-required {
-  color: var(--color-pipe);
-  font-size: 9px;
-}
-.detail-error {
-  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: var(--color-error);
-  margin-bottom: 4px;
-}
-.detail-error-message {
-  font-size: 11px;
-  color: var(--text-muted);
-  line-height: 1.5;
-}
-.detail-error-stack {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-dim);
-  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: var(--surface-sunken);
-  border: 1px solid var(--border-subtle);
-}
-.detail-step-index {
-  color: var(--text-dim);
-  font-size: 10px;
-  font-weight: 700;
-  min-width: 16px;
-}
-.detail-step-code {
-  font-family: var(--font-mono);
-  color: var(--text-default);
-}
-.detail-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.detail-tag {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 3px;
-  background: var(--surface-sunken);
-  border: 1px solid var(--border-subtle);
-}
-.detail-tag-key {
-  color: var(--text-dim);
-}
-.detail-tag-value {
-  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: var(--font-mono);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-success);
-}
-.detail-concept-domain {
-  font-size: 11px;
-  color: var(--text-dim);
-}
-.detail-refines {
-  font-size: 11px;
-  color: var(--text-muted);
-}
-.detail-multiplicity {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-.detail-refines-code {
-  font-family: var(--font-mono);
-  color: var(--color-accent);
-}
-.detail-not-available {
-  font-size: 12px;
-  color: var(--text-dim);
-  font-style: italic;
-  padding: 8px 0;
-}
-.detail-usage-inline {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  color: inherit;
-}
-.detail-usage-value {
-  font-size: 11px;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-  font-variant-numeric: tabular-nums;
-}
-.detail-usage-inline:hover .detail-usage-value {
-  color: var(--text-muted);
-}
-.detail-usage-chevron {
-  color: var(--text-dim);
-  opacity: 0.55;
-  transition: transform 120ms ease, opacity 120ms ease;
-}
-.detail-usage-inline:hover .detail-usage-chevron {
-  opacity: 0.9;
-}
-.detail-usage-chevron--open {
-  transform: rotate(180deg);
-}
-.detail-usage-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.detail-model-value {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 1px;
-}
-.detail-model-resolved {
-  color: var(--text-dim);
-  font-size: 10px;
-}
-
-/* src/graph/react/viewer/GraphToolbar.css */
-.graph-toolbar-panel {
-  z-index: 11;
-}
-.graph-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  pointer-events: auto;
-}
-.graph-toolbar--vertical {
-  flex-direction: column;
-}
-.graph-toolbar--vertical .graph-toolbar-separator {
-  width: 18px;
-  height: 1px;
-  margin: 2px 0;
-}
-.graph-toolbar-btn {
-  all: unset;
-  box-sizing: border-box;
-  cursor: pointer;
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  background: var(--surface-overlay);
-  border: 1px solid var(--border-default);
-  color: var(--text-secondary);
-  backdrop-filter: blur(6px);
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-}
-.graph-toolbar-btn:hover {
-  background: var(--surface-overlay-hover);
-  color: var(--text-primary);
-  border-color: var(--border-strong);
-}
-.graph-toolbar-btn:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 1px;
-}
-.graph-toolbar-btn--active {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--text-on-accent);
-}
-.graph-toolbar-btn--active:hover {
-  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:hover {
-  opacity: 0.4;
-  cursor: not-allowed;
-  background: var(--surface-overlay-disabled);
-  color: var(--text-dim);
-  border-color: var(--border-subtle);
-}
-.graph-toolbar-separator {
-  width: 1px;
-  height: 18px;
-  background: var(--border-default);
-  margin: 0 2px;
-}
-.graph-toolbar-validation {
-  position: relative;
-  display: inline-flex;
-}
-.graph-toolbar-validation-btn {
-  position: relative;
-}
-.graph-toolbar-validation-btn--valid,
-.graph-toolbar-validation-btn--valid:hover {
-  color: var(--color-success);
-}
-.graph-toolbar-validation-btn--invalid,
-.graph-toolbar-validation-btn--invalid:hover {
-  color: var(--color-error);
-}
-.graph-toolbar-validation-btn--error,
-.graph-toolbar-validation-btn--error:hover {
-  color: var(--color-warning);
-}
-.graph-toolbar-validation-spin {
-  animation: graph-toolbar-validation-rotate 1s linear infinite;
-}
-@keyframes graph-toolbar-validation-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.graph-toolbar-validation-badge {
-  position: absolute;
-  top: -5px;
-  right: -5px;
-  min-width: 14px;
-  height: 14px;
-  padding: 0 3px;
-  box-sizing: border-box;
-  border-radius: 7px;
-  background: var(--color-error);
-  color: var(--text-on-accent);
-  font-family: var(--font-sans);
-  font-size: 9px;
-  line-height: 14px;
-  font-weight: 600;
-  text-align: center;
-  pointer-events: none;
-}
-.graph-toolbar-validation-btn--valid .graph-toolbar-validation-badge,
-.graph-toolbar-validation-btn--error .graph-toolbar-validation-badge,
-.graph-toolbar-validation-btn--unvalidated .graph-toolbar-validation-badge {
-  background: var(--color-warning);
-}
-.graph-validation-panel {
-  position: absolute;
-  z-index: 12;
-  min-width: min(260px, calc(100vw - 24px));
-  max-width: min(360px, calc(100vw - 24px));
-  max-height: 320px;
-  overflow-y: auto;
-  padding: 6px;
-  border-radius: 8px;
-  background: var(--surface-overlay);
-  border: 1px solid var(--border-default);
-  box-shadow: var(--shadow-md);
-  backdrop-filter: blur(6px);
-  pointer-events: auto;
-  font-family: var(--font-sans);
-  cursor: default;
-}
-.graph-validation-panel--down-start {
-  top: calc(100% + 6px);
-  left: 0;
-}
-.graph-validation-panel--down-end {
-  top: calc(100% + 6px);
-  right: 0;
-}
-.graph-validation-panel--up-start {
-  bottom: calc(100% + 6px);
-  left: 0;
-}
-.graph-validation-panel--up-end {
-  bottom: calc(100% + 6px);
-  right: 0;
-}
-.graph-validation-panel--side-end {
-  left: calc(100% + 6px);
-  top: 0;
-}
-.graph-validation-panel--side-start {
-  right: calc(100% + 6px);
-  top: 0;
-}
-.graph-validation-panel-header {
-  padding: 4px 6px 6px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-.graph-validation-empty {
-  padding: 2px 6px 6px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-.graph-validation-issues {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.graph-validation-issue {
-  padding: 6px 8px;
-  border-radius: 6px;
-  border-left: 3px solid var(--color-error);
-  background: var(--color-error-bg);
-  font-size: 12px;
-  color: var(--text-primary);
-}
-.graph-validation-issue-body {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.graph-validation-issue--warning {
-  border-left-color: var(--color-warning);
-  background: var(--surface-sunken);
-}
-.graph-validation-issue--clickable {
-  cursor: pointer;
-}
-.graph-validation-issue--clickable:hover {
-  filter: brightness(1.1);
-}
-.graph-validation-issue-body:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 1px;
-  border-radius: 4px;
-}
-.graph-validation-issue-meta {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-.graph-validation-issue-context {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-.graph-validation-issue-file {
-  font-size: 10px;
-  color: var(--text-dim);
-}
-.graph-validation-issue-message {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-.graph-validation-issue-fix {
-  font-size: 11px;
-  color: var(--text-secondary);
-}
-.graph-validation-issue-fix::before {
-  content: "Fix: ";
-  font-weight: 600;
-}
-/*# sourceMappingURL=index.css.map */