npm - @intentius/behold - Versions diffs - 0.2.2 - Mend

@intentius/behold 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/web/index.html ADDED Viewed

@@ -0,0 +1,248 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>behold</title>
+    <style>
+      :root {
+        --bg: #0d1117; --panel: #161b22; --line: #30363d; --fg: #e6edf3; --muted: #8b949e;
+        --managed: #3fb950; --foreign: #d29922; --pending: #58a6ff; --edge: #6e7681;
+        --degraded: #f85149;
+      }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
+        font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; }
+      #app { display: grid; grid-template-columns: 1fr var(--inspect-w, 320px); grid-template-rows: auto auto auto 1fr auto;
+        height: 100%; }
+      #app.inspect-collapsed { grid-template-columns: 1fr 0; }
+      #app.inspect-collapsed #inspect { display: none; }
+      header { grid-column: 1 / 3; grid-row: 1; padding: 10px 16px; border-bottom: 1px solid var(--line);
+        display: flex; align-items: baseline; gap: 12px; }
+      header h1 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .3px; }
+      header .meta { color: var(--muted); font-size: 12px; }
+      #graph { grid-row: 4; grid-column: 1; overflow: auto; position: relative; }
+      #inspect { grid-row: 4; grid-column: 2; border-left: 1px solid var(--line); background: var(--panel);
+        padding: 14px; overflow: auto; position: relative; }
+      #inspect h2 { font-size: 13px; margin: 0 0 8px; color: var(--muted); font-weight: 600;
+        text-transform: uppercase; letter-spacing: .5px; }
+      /* Declared/identity: key ABOVE value, value full-width — long ARNs wrap
+         readably instead of being crushed into a squeezed right column. */
+      #inspect dl { margin: 0; }
+      #inspect dt { color: var(--muted); font-size: 11px; margin-top: 9px; }
+      #inspect dd { margin: 1px 0 0; font-size: 12px; overflow-wrap: anywhere; }
+      /* Drag handle on the pane's left edge → resize; chevron → collapse. */
+      #inspect-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 6; }
+      #inspect-resize:hover { background: var(--pending); opacity: .35; }
+      #inspect-collapse { position: absolute; top: 12px; right: 12px; z-index: 6; background: none;
+        border: none; color: var(--muted); font-size: 15px; cursor: pointer; line-height: 1; padding: 2px; }
+      #inspect-collapse:hover { color: var(--fg); }
+      #inspect-reopen { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 30; display: none;
+        background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-right: none;
+        border-radius: 6px 0 0 6px; padding: 10px 5px; cursor: pointer; writing-mode: vertical-rl; font-size: 11px; }
+      #inspect-reopen:hover { color: var(--fg); border-color: var(--pending); }
+      #app.inspect-collapsed #inspect-reopen { display: block; }
+      /* The graph SVG is pinhole's, self-styled. It fills the pane; behold drives
+         zoom/pan by mutating its viewBox (see setupPanZoom in app.js) — pinch or
+         ⌘/Ctrl+scroll to zoom at the cursor, drag to pan. It starts fit-to-pane;
+         the "⤢ fit" button resets. behold also adds a selection highlight. */
+      #graph svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
+      #graph svg.grabbing { cursor: grabbing; }
+      /* Edge hover-highlight — trace a single edge through an overlapping bundle.
+         pinhole already paints a fat transparent hit-path per edge (pointer-events
+         on the stroke), so hovering the edge OR either endpoint node lights the
+         visible line. The hovered edge is also raised to the top in JS so it isn't
+         buried under the bundle. */
+      #graph g[data-edge-from] .pin-edge-line { transition: stroke .08s ease, stroke-width .08s ease; }
+      #graph g[data-edge-from]:hover .pin-edge-line,
+      #graph g[data-edge-from].edge-hi .pin-edge-line { stroke: var(--pending); stroke-width: 3.2; }
+      /* Edge kind by reason (logical view): a data dependency reads as a dashed
+         "logical link", distinct from the solid network-traffic edges; hover
+         either for the full reason (native SVG <title>). */
+      #graph g[data-edge-via="data dependency"] .pin-edge-line { stroke-dasharray: 6 5; }
+      #graph g[data-edge-from][data-edge-via] { cursor: help; }
+      /* Fit reset + a zoom hint, floating top-right of the graph pane. */
+      #zoom-toggle { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--panel);
+        color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px;
+        font-size: 12px; cursor: pointer; }
+      #zoom-toggle:hover { border-color: var(--pending); color: var(--fg); }
+      /* The way out of waves view, floating top-LEFT so it sits where the eye
+         already is when observe drops you into the wave-laned graph. */
+      #back-to-infra { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--panel);
+        color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px;
+        font-size: 12px; cursor: pointer; }
+      #back-to-infra:hover { border-color: var(--pending); color: var(--fg); }
+      /* Blocking load scrim: covers everything (clicks can't pass through) while
+         a live view change is in flight. */
+      #loading-overlay { position: fixed; inset: 0; z-index: 100; display: flex;
+        flex-direction: column; align-items: center; justify-content: center; gap: 14px;
+        background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(1.5px);
+        cursor: progress; }
+      #loading-overlay[hidden] { display: none; }
+      #loading-overlay #loading-msg { font-size: 13px; color: var(--muted); }
+      #loading-overlay .spinner { width: 34px; height: 34px; border-radius: 50%;
+        border: 3px solid var(--line); border-top-color: var(--pending);
+        animation: spin 0.7s linear infinite; }
+      @keyframes spin { to { transform: rotate(360deg); } }
+      .sel rect, .sel path, .sel > rect { stroke: var(--pending) !important; stroke-width: 2.5 !important; }
+      .err { padding: 24px; color: var(--foreign); }
+      /* #72: a classified precondition failure (chant's lint gate, a project
+         that isn't installed/typegen'd, a tier that needs credentials) reads
+         as a calm entry/error card — not the alarming red .err, since these
+         are usually expected states on a real (imperfect) project, not bugs.
+         Generalizes the old M2 (#54) tier-only `.tier-note`. */
+      .precondition-error { padding: 24px; max-width: 640px; }
+      .precondition-error-title { color: var(--fg); font-size: 15px; font-weight: 600; margin-bottom: 10px; }
+      .precondition-error-message { color: var(--muted); white-space: pre-wrap; font: 12px/1.5 ui-monospace, monospace; }
+      .precondition-error-remedy { color: var(--pending); margin-top: 14px; }
+      .precondition-error-remedy::before { content: "→ "; }
+      #actions button, #inspect button { background: var(--panel); color: var(--fg); border: 1px solid var(--line);
+        border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
+      #actions button:hover, #inspect button:hover { border-color: var(--pending); }
+      #actions button.approve { border-color: var(--managed); color: var(--managed); }
+      #inspect button { border-color: var(--foreign); color: var(--foreign); }
+      #pickers select, #zoom-slot select { background: var(--panel); color: var(--fg); border: 1px solid var(--line);
+        border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
+      #pickers select:hover, #zoom-slot select:hover { border-color: var(--pending); }
+      /* The observe → reconcile → apply dial (M2, #54): where the selected
+         target sits on the lifecycle progression. Its own row below the
+         header — a target-level control, not a per-node inspect detail. */
+      #dial { grid-column: 1 / 3; grid-row: 3; display: none; align-items: center; gap: 10px;
+        padding: 6px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
+      .dial-track { display: flex; align-items: center; gap: 8px; }
+      .dial-arrow { color: var(--muted); }
+      .dial-step { background: var(--panel); color: var(--fg); border: 1px solid var(--line);
+        border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; }
+      .dial-step:hover:not(:disabled) { border-color: var(--pending); }
+      .dial-step.active { border-color: var(--pending); color: var(--pending); }
+      .dial-step:disabled { opacity: .5; cursor: not-allowed; }
+      .dial-detail { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
+      /* Substrate readiness strip (M5, #54): is each substrate the project needs
+         actually up (Floci, k3d, GitLab CI, Forgejo)? A slim row of status pills
+         under the header — pure state (#73: the pills' own "Bring up"/"Reset"
+         buttons moved into the ⌘K palette, see paletteCommands() in app.js). */
+      #substrates { grid-column: 1 / 3; grid-row: 2; display: none; align-items: center; gap: 8px;
+        padding: 5px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
+      #substrates .label { color: var(--muted); margin-right: 2px; }
+      .sub { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
+        border-radius: 999px; padding: 2px 10px; }
+      .sub .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+      .sub.up .dot { background: var(--managed); }
+      .sub.down .dot { background: var(--degraded); }
+      .sub.on-demand .dot { background: var(--pending); }
+      .sub.unknown .dot { background: var(--muted); }
+      .sub.blocked { opacity: .6; }
+      .sub.blocked .dot { background: var(--muted); }
+      #nowline { grid-column: 1 / 3; grid-row: 5; margin: 0; max-height: 160px; overflow: auto; display: none;
+        background: #010409; border-top: 1px solid var(--line); padding: 8px 12px; font: 11px/1.5 ui-monospace, monospace;
+        color: var(--fg); white-space: pre-wrap; }
+      /* Persistent state strip (#73 "hide controls, never state"): current zoom
+         + env + stack (#76) + tier stay visible in the header even though the
+         pickers that used to sit here moved into the ⌘K palette — see
+         renderStatusbar() in app.js. #hintk is the palette's always-visible
+         entry point. */
+      #statusbar { color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
+        padding: 2px 10px; font-size: 11px; white-space: nowrap; }
+      /* #131: why the current zoom rendered what it did. Same muted strip,
+         italic so it reads as a caption on the state rather than more state. */
+      .statusbar-note { font-style: italic; opacity: 0.85; }
+      #hintk { color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
+        padding: 2px 8px; font-size: 11px; cursor: pointer; white-space: nowrap; }
+      #hintk:hover { border-color: var(--pending); color: var(--fg); }
+      /* Command palette (⌘K / Ctrl+K, #73) — ported from spicypath's FG-036
+         pattern (../spicypath/src/index.html), theme vars mapped onto behold's
+         own: --panel/--line/--fg/--bg already exist; --pending stands in for
+         spicypath's --accent (behold already uses it as the one accent hue);
+         there's no static --on-accent since --pending varies per Ghostty theme —
+         --pal-sel-fg is computed via theme.js's readableOn() instead (see
+         applyPaletteContrast() in app.js) so the selected row stays legible
+         across all 552 themes, light or dark. */
+      #palette { position: fixed; inset: 0; z-index: 110; display: none; align-items: flex-start;
+        justify-content: center; background: rgba(0,0,0,.45); }
+      #palette.on { display: flex; }
+      #palette .box { margin-top: 12vh; width: min(560px, 92vw); background: var(--panel);
+        border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 50px rgba(0,0,0,.55);
+        overflow: hidden; }
+      #pal-input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg);
+        border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; font: inherit; outline: none; }
+      #pal-list { max-height: 50vh; overflow: auto; padding: 5px; }
+      #pal-list .row { padding: 7px 11px; border-radius: 6px; color: var(--fg); font-size: 13px;
+        cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      #pal-list .row.sel { background: var(--pending); color: var(--pal-sel-fg, var(--fg)); }
+      #pal-list .empty { padding: 8px 11px; color: var(--muted); font-size: 12px; }
+    </style>
+  </head>
+  <body>
+    <div id="loading-overlay" hidden>
+      <div class="spinner"></div>
+      <span id="loading-msg">loading…</span>
+    </div>
+    <div id="app">
+      <header>
+        <h1>behold</h1>
+        <!-- Zoom sits here, first after the brand, rather than in #pickers on
+             the far right with the theme select. It is the control you reach
+             for constantly — the one thing worth the chrome #73 otherwise
+             thinned — and in the right-hand cluster it read as chrome and got
+             missed. The ⌘K palette keeps its entry; this is the same action,
+             discoverable without knowing the shortcut exists. -->
+        <span id="zoom-slot" style="display:flex;align-self:center"></span>
+        <span class="meta" id="meta">loading…</span>
+        <span id="legend" style="display:none;gap:12px;font-size:11px;align-self:center">
+          <span style="color:var(--managed)">● managed</span>
+          <span style="color:var(--foreign)">● foreign</span>
+          <span style="color:var(--pending)">● pending</span>
+          <!-- chant#1168 (#1089): a declared node chant couldn't read live
+               state for — its own state, not folded into managed/foreign/
+               pending. Reuses --muted, same convention as the component
+               legend's "not deployed" chip below. -->
+          <span style="color:var(--muted)">● unobserved</span>
+          <!-- chant#1180 (#1077, #86): a live, undeclared node whose owner
+               chain reaches a declared entity — expected runtime (a Pod its
+               Deployment created), never foreign and never drift. Its own
+               colour (--runtime) so it's never mistaken for foreign/pending. -->
+          <span style="color:var(--runtime)">● runtime</span>
+        </span>
+        <!-- M1.1 (#57), palette hardened M2 (#54): the component DAG's live
+             per-component AWS status — a different join than the entity
+             overlay above (component name -> CFN stack, not chant's
+             cross-substrate --live --overlay), so it's a separate legend
+             rather than reusing #legend's vocabulary. 4 states now (chant
+             0.18.29's machine-readable live/stack): pinhole has no literal
+             amber token, so "in progress" reuses its blue accent paint —
+             see src/component-status.ts's doc comment for the mapping. -->
+        <span id="component-legend" style="display:none;gap:12px;font-size:11px;align-self:center">
+          <span style="color:var(--managed)">● healthy</span>
+          <span style="color:var(--pending)">● in progress</span>
+          <span style="color:var(--degraded)">● rollback / failed</span>
+          <span style="color:var(--muted)">● not deployed</span>
+        </span>
+        <!-- #73 "hide controls, never state": zoom/env/stack/tier stay visible
+             here even though the pickers that used to render into this slot
+             moved into the ⌘K palette below — see renderStatusbar() in app.js.
+             stack (#76) only ever appears for a project that declares
+             chant.config.ts's stacks[]. -->
+        <span id="statusbar" style="margin-left:auto;align-self:center" title="current zoom · env · stack · tier — press ⌘K to change"></span>
+        <span id="pickers" style="display:flex;gap:8px;align-self:center"></span>
+        <span id="actions" style="display:flex;gap:8px;align-self:center"></span>
+        <a href="/lanes" style="color:var(--pending);text-decoration:none;font-size:12px;align-self:center">lanes →</a>
+        <span id="hintk" title="Command palette — deploy, apply, reset, bring up, lens/zoom, env/stack/tier, export… (⌘K / Ctrl+K)">⌘K</span>
+      </header>
+      <div id="substrates"></div>
+      <div id="dial"></div>
+      <div id="graph"></div>
+      <aside id="inspect">
+        <div id="inspect-resize" title="Drag to resize"></div>
+        <button id="inspect-collapse" title="Collapse panel">›</button>
+        <div id="inspect-body"><h2>inspect</h2><p style="color:var(--muted)">click a node</p></div>
+      </aside>
+      <button id="inspect-reopen" title="Show inspect panel">inspect ‹</button>
+      <pre id="nowline"></pre>
+    </div>
+    <!-- Command palette (⌘K / Ctrl+K, #73) — the spicypath FG-036 shape
+         (../spicypath/src/index.html): input + filtered list, driven entirely
+         by app.js's paletteCommands()/palRender()/openPalette()/closePalette(). -->
+    <div id="palette"><div class="box"><input id="pal-input" placeholder="type a command…   (Esc to close)" autocomplete="off"><div id="pal-list"></div></div></div>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>

package/web/theme.js ADDED Viewed

@@ -0,0 +1,188 @@
+// Theme engine for behold — adopted from spicypath's FG-040 engine. Parses/holds Ghostty
+// themes (vendored in ./themes.js from mbadolato/iTerm2-Color-Schemes), derives behold's
+// semantic UI + drift tokens from the 16-color palette, applies them as CSS custom
+// properties (so the inlined pinhole SVG and all chrome recolour live), and picks readable
+// text on any coloured fill. Pure browser JS, no build step. See INTENTIUS/behold#62.
+import { THEMES, DEFAULT_THEME } from "./themes.js";
+const STORE_KEY = "behold.theme";
+// --- low-level colour math (from spicypath) ------------------------------
+const clamp = (x, lo, hi) => (x < lo ? lo : x > hi ? hi : x);
+export function hexToRgb(hex) {
+  let h = String(hex).trim().replace(/^#/, "");
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+export function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((v) => clamp(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("");
+}
+export function mix(a, b, t) {
+  const A = hexToRgb(a), B = hexToRgb(b);
+  return rgbToHex(A[0] + (B[0] - A[0]) * t, A[1] + (B[1] - A[1]) * t, A[2] + (B[2] - A[2]) * t);
+}
+export function luminance(hex) { const [r, g, b] = hexToRgb(hex); return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255; }
+export const isDark = (hex) => luminance(hex) < 0.5;
+// The headline contrast feature (#62): readable text on any coloured background —
+// white on a dark fill, black on a light one, so labels never vanish across 552 themes.
+export function readableOn(bg) { return isDark(bg) ? "#ffffff" : "#000000"; }
+// --- OKLCH (perceptual hue rotation for category counts > palette slots) --
+const s2l = (c) => ((c /= 255) <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+const l2s = (c) => { const v = c <= 0.0031308 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055; return clamp(v, 0, 1) * 255; };
+export function hexToOklch(hex) {
+  const [R, G, B] = hexToRgb(hex).map(s2l);
+  const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B);
+  const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B);
+  const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B);
+  const L = 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s;
+  const a = 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s;
+  const bb = 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s;
+  return { L, C: Math.hypot(a, bb), H: (Math.atan2(bb, a) * 180 / Math.PI + 360) % 360 };
+}
+export function oklchToHex({ L, C, H }) {
+  const h = H * Math.PI / 180, a = C * Math.cos(h), bb = C * Math.sin(h);
+  const l = (L + 0.3963377774 * a + 0.2158037573 * bb) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * bb) ** 3;
+  const s = (L - 0.0894841775 * a - 1.2914855480 * bb) ** 3;
+  return rgbToHex(
+    l2s(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+    l2s(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+    l2s(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s));
+}
+// --- behold's semantic tokens derived from a theme -----------------------
+// Drift states are ANCHORED to palette slots so "coloured by drift" stays meaningful across
+// every theme (green=managed … red=degraded); only the shades change. Chrome is derived from
+// bg/fg mixes. `cat` are the chromatic slots that colorForCategory cycles for substrates.
+export function tokensFor(th) {
+  const fgMix = (t) => mix(th.bg, th.fg, t);
+  return {
+    dark: th.dark,
+    bg: th.bg,
+    panel: fgMix(0.09),
+    line: fgMix(0.16),
+    fg: th.fg,
+    muted: fgMix(0.5),
+    edge: fgMix(0.32),
+    managed: th.palette[2],   // green  — good / managed
+    foreign: th.palette[3],   // yellow — warn / foreign
+    pending: th.palette[4],   // blue   — accent / pending
+    degraded: th.palette[1],  // red    — degraded / failed
+    neutral: fgMix(0.45),     // grey   — not deployed / unknown
+    // chant#1180 (#1077, behold#86): a live, undeclared node whose owner
+    // chain reaches a declared entity — expected runtime (a Pod its
+    // Deployment created), never drift and never foreign. Cyan keeps it
+    // clearly apart from foreign (yellow) and degraded (red) — "informational,
+    // not a problem" — while still being its own colour, not a reuse of
+    // managed/pending (which would misreport it as chant-declared or as a
+    // pending change).
+    runtime: th.palette[6],   // cyan   — runtime child (expected, not drift)
+    cat: [1, 2, 3, 4, 5, 6, 9, 10, 11, 12, 13, 14].map((i) => th.palette[i]),
+  };
+}
+// CSS custom properties behold's chrome (:root) reads.
+const CSS_VARS = ["bg", "panel", "line", "fg", "muted", "edge", "managed", "foreign", "pending", "degraded", "neutral", "runtime"];
+// pinhole (the graph painter) reads its OWN vars, `--pin-<token>` (emitted as
+// `var(--pin-token, <baked default>)`). Derive them from the active Ghostty theme so the graph
+// recolours with everything else. Keep pinhole's status intent (good=green, warn=red,
+// accent=blue). Node cards are a PANEL clearly distinct from the bg — else neutral nodes
+// blend into the background and look transparent — tinted toward the status hue; node text
+// (--pin-text = fg) stays readable on them.
+export function pinTokensFor(th) {
+  const P = th.palette, fgMix = (t) => mix(th.bg, th.fg, t);
+  const good = P[2], warn = P[1], accent = P[4], runtime = P[6]; // P[6] = the cyan the CSS --runtime var rides
+  const panel = fgMix(0.18);                 // node card base — elevated well off the bg
+  const fill = (c) => mix(panel, c, 0.4);    // panel pulled strongly toward the status hue
+  const stroke = (c) => mix(th.bg, c, 0.62);
+  return {
+    bg0: th.bg, bg1: fgMix(0.045), dots: fgMix(0.12),
+    text: th.fg, textMuted: fgMix(0.5), textFaint: fgMix(0.38), edge: fgMix(0.3),
+    neutralFill: panel, neutralStroke: fgMix(0.3), neutralBar: fgMix(0.5),
+    accentFill: fill(accent), accentStroke: stroke(accent), accentBar: accent,
+    goodFill: fill(good), goodStroke: stroke(good), goodBar: good,
+    warnFill: fill(warn), warnStroke: stroke(warn), warnBar: warn,
+    runtimeFill: fill(runtime), runtimeStroke: stroke(runtime), runtimeBar: runtime,
+    selectedStroke: accent,
+  };
+}
+const PIN_VARS = ["bg0", "bg1", "dots", "text", "textMuted", "textFaint", "edge", "neutralFill", "neutralStroke", "neutralBar", "accentFill", "accentStroke", "accentBar", "goodFill", "goodStroke", "goodBar", "warnFill", "warnStroke", "warnBar", "runtimeFill", "runtimeStroke", "runtimeBar", "selectedStroke"];
+function hash(s) { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return h >>> 0; }
+// A substrate/lexicon (aws, k8s, gcp, …) gets one of the theme's categorical hues, perturbed
+// in OKLCH deterministically so families stay distinct past the ~12 slot count (spicypath pattern).
+// The active theme name is folded into the hash (#62): each theme redistributes categories across
+// different palette slots, so switching themes visibly re-maps every node's colour rather than
+// keeping a category anchored to one slot (which stayed e.g. teal in every terminal palette).
+export function colorForCategory(key) {
+  const cat = _tokens.cat;
+  const h = hash((_active ? _active.name : "") + " " + String(key));
+  const { L, C, H } = hexToOklch(cat[h % cat.length]);
+  const dH = (((h >>> 4) % 31) - 15) * 1.6;
+  const dL = (((h >>> 9) % 5) - 2) * 0.035;
+  return oklchToHex({ L: clamp(L + dL, 0.2, 0.92), C, H: (H + dH + 360) % 360 });
+}
+// --- active theme state + application -------------------------------------
+let _active = THEMES[DEFAULT_THEME] || Object.values(THEMES)[0] || null;
+let _tokens = _active ? tokensFor(_active) : null;
+const _subs = new Set();
+export function listThemes() { return Object.keys(THEMES); }
+export function getTheme() { return _active; }
+export function getTokens() { return _tokens; }
+export function getThemeName() { return _active && _active.name; }
+export function onThemeChange(cb) { _subs.add(cb); return () => _subs.delete(cb); }
+export function applyTheme(tokens = _tokens) {
+  if (!tokens || typeof document === "undefined") return;
+  const root = document.documentElement;
+  for (const k of CSS_VARS) root.style.setProperty("--" + k, tokens[k]);
+  if (_active) { const pin = pinTokensFor(_active); for (const k of PIN_VARS) root.style.setProperty("--pin-" + k, pin[k]); }
+  root.style.setProperty("color-scheme", tokens.dark ? "dark" : "light");
+}
+export function setTheme(nameOrObj, { persist = true } = {}) {
+  const th = typeof nameOrObj === "string" ? THEMES[nameOrObj] : nameOrObj;
+  if (!th) return false;
+  _active = th; _tokens = tokensFor(th);
+  applyTheme(_tokens);
+  if (persist) { try { localStorage.setItem(STORE_KEY, th.name); } catch { /* private mode */ } }
+  for (const cb of _subs) cb(th, _tokens);
+  return true;
+}
+// Restore the persisted theme (or default) and apply. Call once on boot.
+export function initTheme() {
+  let saved = null;
+  try { saved = localStorage.getItem(STORE_KEY); } catch { /* private mode */ }
+  setTheme(saved && THEMES[saved] ? saved : (_active ? _active.name : DEFAULT_THEME), { persist: false });
+  return getThemeName();
+}
+// A minimal, searchable picker (native <select>; type-to-search over 552 themes). Grouped
+// dark/light. Mount it into any container; it stays in sync with programmatic setTheme.
+export function mountThemePicker(container) {
+  if (!container || typeof document === "undefined") return null;
+  const sel = document.createElement("select");
+  sel.setAttribute("aria-label", "Color theme");
+  sel.title = "Color theme";
+  sel.style.cssText = "background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:12px;max-width:220px";
+  const groups = { Dark: document.createElement("optgroup"), Light: document.createElement("optgroup") };
+  groups.Dark.label = "Dark"; groups.Light.label = "Light";
+  for (const name of listThemes()) {
+    const o = document.createElement("option");
+    o.value = name; o.textContent = name;
+    (THEMES[name].dark ? groups.Dark : groups.Light).appendChild(o);
+  }
+  sel.appendChild(groups.Dark); sel.appendChild(groups.Light);
+  sel.value = getThemeName();
+  sel.addEventListener("change", () => setTheme(sel.value));
+  onThemeChange(() => { if (sel.value !== getThemeName()) sel.value = getThemeName(); });
+  container.appendChild(sel);
+  return sel;
+}