@pipelex/mthds-ui 0.8.0 → 0.10.0

package/dist/standalone/graph-viewer.css

@@ -2100,16 +2100,31 @@ button.stuff-viewer-local-file--button:focus-visible {
 /* Token-only styling: theme switching happens by swapping `--surface-*`,   */
 /* `--text-*`, `--border-*`, and `--color-accent` values on the container.  */
 
+/* The ReactFlow <Panel> owns positioning now (anchor + margin). It sits above
+   the graph but the old code used z-index 11, so keep parity. */
+.graph-toolbar-panel {
+  z-index: 11;
+}
+
 .graph-toolbar {
-  position: absolute;
-  top: 8px;
   display: flex;
   align-items: center;
   gap: 4px;
-  z-index: 11;
   pointer-events: auto;
 }
 
+/* Vertical bar — `center-left` / `center-right` anchors. Stack the buttons in a
+   column and rotate the separators so they divide rows instead of columns. */
+.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;
@@ -2172,20 +2187,37 @@ button.stuff-viewer-local-file--button:focus-visible {
 
 /* ─── Standalone GraphViewer chrome (toolbar, theme, layout) ─────────── */
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
-html, body {
+html,
+body {
   height: 100%;
   overflow: hidden;
-  font-family: "Inter", -apple-system, sans-serif;
+  font-family:
+    "Inter",
+    -apple-system,
+    sans-serif;
 }
 
 /* ─── Theme system ──────────────────────────────────────────────────── */
 
-body[data-theme="dark"], body:not([data-theme]) {
+/* `data-theme="system"` defaults to the dark palette so a host with no
+   `prefers-color-scheme` support (legacy WebKit / older Electron / some
+   webviews) still gets themed chrome on first paint, before — and even if —
+   the JS bundle loads. This mirrors the JS side, where `detectSystemTheme()`
+   also falls back to dark. The `prefers-color-scheme: light` query below flips
+   it to light when the engine supports it; `prefers-color-scheme: dark` needs
+   no block because it already matches this default. */
+body[data-theme="dark"],
+body[data-theme="system"],
+body:not([data-theme]) {
   --chrome-bg: #0d1117;
   --chrome-surface: #161b22;
-  --chrome-border: rgba(255,255,255,0.08);
+  --chrome-border: rgba(255, 255, 255, 0.08);
   --chrome-text: #e2e8f0;
   --chrome-text-muted: #8b949e;
   background: #0a0a0f;
@@ -2195,7 +2227,7 @@ body[data-theme="dark"], body:not([data-theme]) {
 body[data-theme="light"] {
   --chrome-bg: #ffffff;
   --chrome-surface: #f6f8fa;
-  --chrome-border: rgba(0,0,0,0.1);
+  --chrome-border: rgba(0, 0, 0, 0.1);
   --chrome-text: #1f2328;
   --chrome-text-muted: #656d76;
   background: #ffffff;
@@ -2206,7 +2238,7 @@ body[data-theme="light"] {
   body[data-theme="system"] {
     --chrome-bg: #ffffff;
     --chrome-surface: #f6f8fa;
-    --chrome-border: rgba(0,0,0,0.1);
+    --chrome-border: rgba(0, 0, 0, 0.1);
     --chrome-text: #1f2328;
     --chrome-text-muted: #656d76;
     background: #ffffff;
@@ -2214,18 +2246,6 @@ body[data-theme="light"] {
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  body[data-theme="system"] {
-    --chrome-bg: #0d1117;
-    --chrome-surface: #161b22;
-    --chrome-border: rgba(255,255,255,0.08);
-    --chrome-text: #e2e8f0;
-    --chrome-text-muted: #8b949e;
-    background: #0a0a0f;
-    color: #e2e8f0;
-  }
-}
-
 /* ─── Layout ────────────────────────────────────────────────────────── */
 
 #app-container {
@@ -2253,7 +2273,9 @@ body[data-theme="light"] {
   z-index: 20;
 }
 
-.toolbar-spacer { flex: 1; }
+.toolbar-spacer {
+  flex: 1;
+}
 
 .toolbar-btn {
   all: unset;
@@ -2265,7 +2287,9 @@ body[data-theme="light"] {
   height: 28px;
   border-radius: 4px;
   color: var(--chrome-text-muted);
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
 }
 
 .toolbar-btn:hover {
@@ -2279,8 +2303,12 @@ body[data-theme="light"] {
 }
 
 /* Direction toggle */
-.direction-icon { display: none; }
-.direction-icon.active { display: inline-flex; }
+.direction-icon {
+  display: none;
+}
+.direction-icon.active {
+  display: inline-flex;
+}
 
 /* Controllers toggle */
 .toggle-switch {
@@ -2293,7 +2321,9 @@ body[data-theme="light"] {
   user-select: none;
 }
 
-.toggle-switch input { display: none; }
+.toggle-switch input {
+  display: none;
+}
 
 .toggle-track {
   width: 28px;
@@ -2305,7 +2335,7 @@ body[data-theme="light"] {
 }
 
 .toggle-switch input:checked + .toggle-track {
-  background: #50FA7B44;
+  background: #50fa7b44;
 }
 
 .toggle-knob {
@@ -2316,39 +2346,22 @@ body[data-theme="light"] {
   height: 12px;
   border-radius: 50%;
   background: var(--chrome-text-muted);
-  transition: left 0.15s, background 0.15s;
+  transition:
+    left 0.15s,
+    background 0.15s;
 }
 
 .toggle-switch input:checked + .toggle-track .toggle-knob {
   left: 14px;
-  background: #50FA7B;
+  background: #50fa7b;
 }
 
 .toggle-label {
   font-size: 11px;
 }
 
-/* Theme toggle */
-.theme-btn {
-  all: unset;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
-  color: var(--chrome-text-muted);
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background 0.15s;
-}
-
-.theme-btn:hover {
-  background: var(--chrome-border);
-}
-
-.theme-label {
-  text-transform: capitalize;
-}
+/* The theme toggle lives in the in-graph toolbar (library-owned tri-state);
+   the standalone page no longer renders its own theme button. */
 
 /* ─── Header branding ───────────────────────────────────────────────── */
 
@@ -2363,7 +2376,10 @@ body[data-theme="light"] {
   opacity: 0.7;
 }
 
+/* `system` defaults to the dark logo (hide the light variant), matching the
+   chrome default above; the `prefers-color-scheme: light` query flips it. */
 body[data-theme="dark"] .header-logo.light-logo,
+body[data-theme="system"] .header-logo.light-logo,
 body:not([data-theme]) .header-logo.light-logo {
   display: none;
 }
@@ -2385,14 +2401,40 @@ body[data-theme="light"] .header-logo.light-logo {
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  body[data-theme="system"] .header-logo.light-logo {
-    display: none;
-  }
-}
-
 .header-title {
   font-size: 12px;
   font-weight: 600;
   color: var(--chrome-text-muted);
 }
+
+/* ─── Error screen ──────────────────────────────────────────────────── */
+
+/* Shown when the embedded config or spec is malformed. Uses explicit colors
+   rather than the `--chrome-*` vars so it stays legible even when the theme
+   parse is the thing that failed. */
+.standalone-error {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  padding: 24px;
+  overflow: auto;
+  background: #0a0a0f;
+  color: #e2e8f0;
+}
+
+.standalone-error-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #ff6b6b;
+}
+
+.standalone-error-message {
+  margin: 0;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #8b949e;
+}