@intentius/behold 0.6.0 → 0.8.0

package/web/layout-store.test.js

@@ -0,0 +1,163 @@
+// #228: the hand-layout delta store, checked without a browser. The pointer
+// work and the SVG live in app.js and are covered by smoke/ui-smoke.mjs; every
+// rule that decides WHAT gets stored and under which key lives here.
+import { describe, expect, it } from "vitest";
+import {
+  applicable,
+  clearLayout,
+  isEmpty,
+  layoutKey,
+  lensKeyOf,
+  normalize,
+  projectKeyOf,
+  readLayout,
+  setDelta,
+  slug,
+  writeLayout,
+} from "./layout-store.js";
+
+/** A localStorage stand-in; `fail` makes every operation throw (private mode). */
+function fakeStorage(seed = {}, fail = false) {
+  const map = new Map(Object.entries(seed));
+  return {
+    map,
+    getItem(k) {
+      if (fail) throw new Error("nope");
+      return map.has(k) ? map.get(k) : null;
+    },
+    setItem(k, v) {
+      if (fail) throw new Error("nope");
+      map.set(k, v);
+    },
+    removeItem(k) {
+      if (fail) throw new Error("nope");
+      map.delete(k);
+    },
+  };
+}
+
+describe("keys", () => {
+  it("slugs a project dir and a lens into one readable key", () => {
+    expect(layoutKey("/estates/stub-estate", "components")).toBe("behold.layout.estates-stub-estate.components");
+  });
+
+  it("takes the project half from /api/project's projectDir", () => {
+    expect(projectKeyOf({ projectDir: "/Users/me/work/My Estate" })).toBe("users-me-work-my-estate");
+    expect(projectKeyOf(null)).toBe("unknown");
+    expect(projectKeyOf({})).toBe("unknown");
+  });
+
+  it("gives the logical lens and the plain graph independent keys (#228 acceptance)", () => {
+    const p = "/estates/x";
+    expect(layoutKey(p, lensKeyOf({ zoom: "logical" }))).not.toBe(layoutKey(p, lensKeyOf({ zoom: "resources" })));
+  });
+
+  it("separates radial from straight, and one stack from another", () => {
+    expect(lensKeyOf({ zoom: "resources", radial: true })).toBe("resources+radial");
+    expect(lensKeyOf({ zoom: "resources", stack: "edge" })).toBe("resources+stack-edge");
+    expect(lensKeyOf({ zoom: "resources" })).toBe("resources");
+    expect(layoutKey("/e", lensKeyOf({ zoom: "resources", radial: true }))).not.toBe(layoutKey("/e", lensKeyOf({ zoom: "resources" })));
+  });
+
+  it("keeps the env OUT of the key — an overlay recolours, it does not re-place", () => {
+    expect(lensKeyOf({ zoom: "components", env: "prod" })).toBe(lensKeyOf({ zoom: "components" }));
+  });
+
+  it("never produces an empty segment", () => {
+    expect(slug("///")).toBe("unknown");
+    expect(layoutKey("", "")).toBe("behold.layout.unknown.unknown");
+  });
+});
+
+describe("normalize", () => {
+  it("keeps finite non-zero deltas only", () => {
+    expect(normalize({ a: { dx: 10, dy: 0, dw: 4 } })).toEqual({ a: { dx: 10, dw: 4 } });
+  });
+
+  it("drops junk without throwing", () => {
+    expect(normalize(null)).toEqual({});
+    expect(normalize("nope")).toEqual({});
+    expect(normalize({ a: 5, b: null, c: { dx: NaN }, d: { dx: "x" }, e: { nope: 1 } })).toEqual({});
+  });
+
+  it("parses numeric strings (JSON round-trips are not always clean)", () => {
+    expect(normalize({ a: { dx: "12.5" } })).toEqual({ a: { dx: 12.5 } });
+  });
+
+  it("isEmpty ignores entries that normalize away", () => {
+    expect(isEmpty({ a: { dx: 0, dy: 0 } })).toBe(true);
+    expect(isEmpty({ a: { dx: 1 } })).toBe(false);
+  });
+});
+
+describe("setDelta", () => {
+  it("replaces one id and leaves the rest alone", () => {
+    const next = setDelta({ a: { dx: 1 }, b: { dy: 2 } }, "a", { dx: 9, dy: 9 });
+    expect(next).toEqual({ a: { dx: 9, dy: 9 }, b: { dy: 2 } });
+  });
+
+  it("prunes an id dragged back to where dagre put it", () => {
+    expect(setDelta({ a: { dx: 1 } }, "a", { dx: 0, dy: 0 })).toEqual({});
+  });
+
+  it("does not mutate its input", () => {
+    const before = { a: { dx: 1 } };
+    setDelta(before, "a", { dx: 4 });
+    expect(before).toEqual({ a: { dx: 1 } });
+  });
+
+  it("carries a box's size delta alongside its position delta", () => {
+    expect(setDelta({}, "box:vpc", { dx: 3, dy: 0, dw: 40, dh: -20 })).toEqual({ "box:vpc": { dx: 3, dw: 40, dh: -20 } });
+  });
+});
+
+describe("applicable", () => {
+  it("silently drops a delta for a node that left the estate", () => {
+    expect(applicable({ gone: { dx: 5 }, here: { dy: 3 } }, ["here"])).toEqual({ here: { dy: 3 } });
+  });
+
+  it("takes a Set as well as an array", () => {
+    expect(applicable({ a: { dx: 1 } }, new Set(["a"]))).toEqual({ a: { dx: 1 } });
+  });
+
+  it("is a no-op filter when nothing is live", () => {
+    expect(applicable({ a: { dx: 1 } }, [])).toEqual({});
+  });
+});
+
+describe("storage", () => {
+  it("round-trips through a storage", () => {
+    const s = fakeStorage();
+    const key = layoutKey("/estates/x", "components");
+    writeLayout(s, key, { api: { dx: 12, dy: -4 } });
+    expect(readLayout(s, key)).toEqual({ api: { dx: 12, dy: -4 } });
+  });
+
+  it("removes the key rather than storing an empty layout", () => {
+    const s = fakeStorage();
+    writeLayout(s, "k", { api: { dx: 1 } });
+    writeLayout(s, "k", {});
+    expect(s.map.has("k")).toBe(false);
+    expect(readLayout(s, "k")).toEqual({});
+  });
+
+  it("survives a corrupt value", () => {
+    expect(readLayout(fakeStorage({ k: "{not json" }), "k")).toEqual({});
+  });
+
+  it("survives a storage that throws (private mode, quota, file://)", () => {
+    const s = fakeStorage({}, true);
+    expect(() => writeLayout(s, "k", { a: { dx: 1 } })).not.toThrow();
+    expect(readLayout(s, "k")).toEqual({});
+    expect(() => clearLayout(s, "k")).not.toThrow();
+  });
+
+  it("clearLayout drops just this lens's key", () => {
+    const s = fakeStorage();
+    writeLayout(s, layoutKey("/e", "components"), { a: { dx: 1 } });
+    writeLayout(s, layoutKey("/e", "logical"), { a: { dy: 2 } });
+    clearLayout(s, layoutKey("/e", "components"));
+    expect(readLayout(s, layoutKey("/e", "components"))).toEqual({});
+    expect(readLayout(s, layoutKey("/e", "logical"))).toEqual({ a: { dy: 2 } });
+  });
+});

package/web/theme.js

@@ -53,20 +53,69 @@ 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 });
+}
+
 // --- 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),
+    muted: desaturate(fgMix(0.5), 0.75),
     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 +133,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 +222,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()) {