@intentius/behold 0.7.0 → 0.9.0

package/web/panel.js

@@ -122,6 +122,34 @@ export function setPanelTab(tab, { expand = true } = {}) {
   }
 }
 
+/**
+ * #254: add a tab the markup doesn't ship — the Carve walkthrough, which only
+ * exists when the server is serving one. Mounted at runtime rather than hidden
+ * in index.html so no other project grows a dead tab (and so a persisted
+ * `tab: "carve"` can never strand someone on an empty section: the tab isn't
+ * there to be restored). Returns the section element to render into; calling it
+ * twice is a no-op that returns the same one.
+ */
+export function addPanelTab(id, label, title) {
+  if (!panel) return null;
+  const existing = panel.querySelector(`#panel-body section[data-tab="${id}"]`);
+  if (existing) return existing;
+  const b = document.createElement("button");
+  b.dataset.tab = id;
+  b.textContent = label;
+  if (title) b.title = title;
+  b.addEventListener("click", () => setPanelTab(id));
+  // Before the ⌘K pill + collapse chevron, which are not tabs.
+  document.getElementById("panel-tabs").insertBefore(b, document.getElementById("hintk"));
+  const section = document.createElement("section");
+  section.dataset.tab = id;
+  document.getElementById("panel-body").appendChild(section);
+  // The new button starts inactive; the section starts hidden. Re-applying the
+  // current tab keeps the two in step whatever it happens to be.
+  setPanelTab(state.tab, { expand: false });
+  return section;
+}
+
 function setCollapsed(on) {
   state.collapsed = !!on;
   panel.classList.toggle("collapsed", state.collapsed);

package/web/theme.js

@@ -32,6 +32,18 @@ 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; };
+// A real WCAG contrast ratio (#240) — sRGB→linear via s2l (the same EOTF step
+// hexToOklch already does below), unlike the quick luminance() above, which
+// skips gamma correction and is only good enough for a light/dark coin-flip
+// (isDark/readableOn). The floor --muted has to clear is a real accessibility
+// number, and luminance()'s shortcut proved too far off it on the exact
+// palette that opened this issue (Darkermatrix: quick metric said 3.03,
+// actual WCAG was 2.13) to be worth the savings.
+function relLuminance(hex) { const [r, g, b] = hexToRgb(hex).map(s2l); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }
+export function contrast(a, b) {
+  const A = relLuminance(a), B = relLuminance(b);
+  return (Math.max(A, B) + 0.05) / (Math.min(A, B) + 0.05);
+}
 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);
@@ -53,20 +65,113 @@ export function oklchToHex({ L, C, H }) {
     l2s(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s));
 }
 
+// Drop a colour's chroma without touching its lightness — the chrome's one
+// "quieter" step (#229). Used on the tokens that SURROUND the drift hues, never
+// on the drift hues themselves.
+export function desaturate(hex, k) {
+  const { L, C, H } = hexToOklch(hex);
+  return oklchToHex({ L, C: C * k, H });
+}
+
+// #240: the same guaranteed-visible trick #229 used for --active (push OKLCH
+// L away from a reference until it clears a bar), generalised from a fixed L
+// delta to an actual contrast() floor — because unlike --active's "just don't
+// land on the same fill", secondary text has a real legibility target.
+//
+// Tries `dark`'s intended direction first (lighter text on a dark theme,
+// darker on a light one — the direction a person would actually pick, and
+// the one #229's --active push uses). luminance() isn't gamma-corrected, so
+// its contrast() ratio is asymmetric in a way real perceived contrast isn't
+// — it overstates how much headroom the near-black end has. Chasing that
+// headroom blindly is how a dark theme's muted text ends up pushed to
+// near-black-on-dark-panel, technically clearing the ratio while reading as
+// invisible. So the "chase more headroom" fallback only fires if the
+// intended direction's own gamut-limited walk can't reach the floor at all
+// (a saturated, nominally-dark bg like Hot Dog Stand's red, whose panel ends
+// up mid-bright once mixed toward fg) — never as a first choice. Chroma
+// eases toward 0 as L walks away so a saturated start doesn't clip out of
+// gamut and stall short of the target.
+function pushForContrast(hex, against, floor, dark) {
+  if (contrast(hex, against) >= floor) return hex;
+  const tok = hexToOklch(hex);
+  const walk = (dir) => {
+    let best = hex, bestRatio = contrast(hex, against);
+    for (let step = 1; step <= 100; step++) {
+      const t = step / 100;
+      const L = clamp(tok.L + dir * step * 0.01, 0, 1);
+      const out = oklchToHex({ L, C: tok.C * (1 - t * 0.6), H: tok.H });
+      const ratio = contrast(out, against);
+      if (ratio > bestRatio) { bestRatio = ratio; best = out; }
+      if (ratio >= floor) return { hex: out, ratio, reached: true };
+      if (L === 0 || L === 1) break;
+    }
+    return { hex: best, ratio: bestRatio, reached: false };
+  };
+  const primary = walk(dark ? 1 : -1);
+  if (primary.reached) return primary.hex;
+  const fallback = walk(dark ? -1 : 1);
+  return fallback.ratio > primary.ratio ? fallback.hex : primary.hex;
+}
+
 // --- 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.
+//
+// #229: the chrome tokens (line/muted/rule/focus/active/well/shadow) are one
+// step quieter than the palette that feeds them — the status hues are behold's
+// actual message, so everything around them gives up chroma to let them land.
+// Every one of them is still DERIVED: no chrome constant is a fixed colour, and
+// all 552 palettes have to come out of here legible.
 export function tokensFor(th) {
   const fgMix = (t) => mix(th.bg, th.fg, t);
+  const P = th.palette;
+  const panel = fgMix(0.09);
+  // The active-control fill (tab strip, the picked option) — the panel pulled
+  // toward the accent, then pushed AWAY from the panel's own lightness so the
+  // fill is visible even on a palette whose blue slot happens to sit exactly at
+  // the panel's lightness (Red Sands, CGA). It stays within one step of the
+  // panel, so `--fg` reads on the fill exactly as it reads on the panel — no
+  // second ink token to keep legible across the corpus.
+  const panelL = hexToOklch(panel).L;
+  const rawActive = hexToOklch(mix(panel, P[4], 0.17));
+  const active = oklchToHex({
+    ...rawActive,
+    L: clamp(panelL + (th.dark ? 1 : -1) * clamp(Math.abs(rawActive.L - panelL), 0.055, 0.1), 0.05, 0.95),
+  });
   return {
     dark: th.dark,
     bg: th.bg,
-    panel: fgMix(0.09),
-    line: fgMix(0.16),
+    panel,
+    line: desaturate(fgMix(0.16), 0.75),
     fg: th.fg,
-    muted: fgMix(0.5),
+    // #240: secondary text needs an actual floor, not just "quieter than
+    // fg" — a handful of low-range palettes (Darkermatrix and friends) mix
+    // fg/panel close enough that the quieted 0.5 mix reads at ~1.25:1.
+    // Push its OKLCH L away from --panel's until it clears 3:1.
+    muted: pushForContrast(desaturate(fgMix(0.5), 0.75), panel, 3, th.dark),
     edge: fgMix(0.32),
+    // The structural border — the panel shell, the pane edge, the footer rule.
+    // Tinted by the palette's OWN bright-black slot instead of being one more
+    // fg/bg mix, but anchored to a guaranteed-visible mix so a theme whose
+    // slot 8 sits on the panel's lightness still draws an edge.
+    rule: mix(fgMix(0.22), P[8], 0.45),
+    // Interaction chrome (hover/focus borders, the load spinner): the accent
+    // with most of its chroma taken off, so hover doesn't compete with a
+    // pending node for the same blue.
+    focus: desaturate(P[4], 0.4),
+    active,
+    // The recessed ground — the nowline log, the ⌘K input. One perceptual step
+    // off the background (down, or UP on the near-black palettes where there is
+    // no "darker" left), keeping the bg's own hue so it never reads as a patch
+    // of a different theme.
+    well: (() => {
+      const b = hexToOklch(th.bg);
+      return oklchToHex({ ...b, L: clamp(b.L + (b.L < 0.16 ? 0.06 : -0.06), 0, 1) });
+    })(),
+    // Shadow/scrim base, used through color-mix() at the call site — a light
+    // theme's drop shadow must not be the same slab of black a dark one wants.
+    shadow: mix(th.bg, "#000000", th.dark ? 0.85 : 0.6),
     managed: th.palette[2],   // green  — good / managed
     foreign: th.palette[3],   // yellow — warn / foreign
     pending: th.palette[4],   // blue   — accent / pending
@@ -84,8 +189,10 @@ export function tokensFor(th) {
   };
 }
 
-// CSS custom properties behold's chrome (:root) reads.
-const CSS_VARS = ["bg", "panel", "line", "fg", "muted", "edge", "managed", "foreign", "pending", "degraded", "neutral", "runtime"];
+// CSS custom properties behold's chrome (:root) reads. The pre-paint fallback
+// block in index.html mirrors these for the DEFAULT theme — smoke/ui-smoke.mjs
+// recomputes it from here and fails if the two ever drift apart.
+const CSS_VARS = ["bg", "panel", "line", "fg", "muted", "edge", "managed", "foreign", "pending", "degraded", "neutral", "runtime", "rule", "focus", "active", "well", "shadow"];
 
 // 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
@@ -171,7 +278,8 @@ export function mountThemePicker(container) {
   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";
+  sel.style.cssText =
+    "background:var(--well);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-ctl);padding:4px 8px;font:var(--t-body)/1.3 var(--font-ui);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()) {