@intentius/behold 0.29.17 → 0.29.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.29.17",
+  "version": "0.29.18",
   "license": "Apache-2.0",
   "type": "module",
   "description": "behold — a live control plane on chant. See your whole estate (every substrate in one graph), coloured by drift; act through delegated, gated Ops.",

package/web/app.js

@@ -3489,7 +3489,10 @@ function paintTgProgress() {
 // says which run all of it comes from. `view.focus` brings some roots forward
 // and dims the rest. From the pull request's plan, or from the run view once
 // merged. Not live; redrawn on each render and each read.
-const TG_TONE = { plan: "var(--pending)", wait: "var(--foreign)", busy: "var(--runtime)", ok: "var(--managed)", bad: "var(--degraded)", idle: "var(--neutral)" };
+// behold#571: the state colours as the frame draws them on cards and boxes, each legible on every ground (theme.js frameInks).
+const TG_TONE = { plan: "var(--frame-pending, var(--pending))", wait: "var(--frame-foreign, var(--foreign))", busy: "var(--frame-runtime, var(--runtime))", ok: "var(--frame-managed, var(--managed))", bad: "var(--frame-degraded, var(--degraded))", idle: "var(--frame-neutral, var(--neutral))" };
+/** The same, for words on a card: read on the card's own ground. */
+const TG_CARD_TONE = Object.fromEntries(Object.entries(TG_TONE).map(([k, v]) => [k, v.replace("--frame-", "--frame-card-")]));
 function drawTgReads() {
   if (embedOpts.bare) queueMicrotask(kioskDecorate); // behold#571: once this draw is done
   watchTgRuns(); // #571: the wave boxes' jobs, while the components zoom is on screen
@@ -3748,7 +3751,7 @@ function drawTgReads() {
   };
   const edgeIn = (r) => edgePoints.filter((p) => p.x >= r.x - 3 && p.x <= r.x2 + 3 && p.y >= r.y - 3 && p.y <= r.y2 + 3).length;
   const defs = svg.querySelector("defs") || svg.insertBefore(make("defs", {}), svg.firstChild);
-  for (const [id, color] of [["tg-arrow-unknown", "var(--foreign)"], ["tg-arrow-planned", "var(--pending)"], ["tg-arrow-applied", "var(--focus)"]]) {
+  for (const [id, color] of [["tg-arrow-unknown", "var(--frame-foreign, var(--foreign))"], ["tg-arrow-planned", "var(--frame-pending, var(--pending))"], ["tg-arrow-applied", "var(--frame-focus, var(--focus))"]]) {
     if (svg.querySelector(`#${id}`)) continue;
     const m = make("marker", { id, viewBox: "0 0 10 10", refX: 9, refY: 5, markerWidth: 7, markerHeight: 7, orient: "auto-start-reverse", "data-tg-reads": "marker" });
     m.appendChild(make("path", { d: "M0,0 L10,5 L0,10 z", fill: color }));
@@ -3759,7 +3762,7 @@ function drawTgReads() {
   for (const e of edges) {
     const card = tgReadCardIds(tgAnswer, e).map((id) => svg.querySelector('[data-node-id="' + CSS.escape(id) + '"]')).find(Boolean);
     const kind = e.unknown.length ? "unknown" : e.outputs === "planned" ? "planned" : "applied";
-    const color = kind === "unknown" ? "var(--foreign)" : kind === "planned" ? "var(--pending)" : "var(--focus)";
+    const color = kind === "unknown" ? "var(--frame-foreign, var(--foreign))" : kind === "planned" ? "var(--frame-pending, var(--pending))" : "var(--frame-focus, var(--focus))";
     if (card) {
       // The tag on the reader's card, at its bottom right, clear of the card's own "root:" line.
       const rect = card.querySelector("rect");
@@ -3800,7 +3803,11 @@ function drawTgReads() {
     drawn.push({ p0, p1 });
     labels.push({ e, p0, p1, color, kind });
   }
-  clearMarksOfReads(svg, drawn); // behold#571: the marks step aside from the read lines
+  // behold#571: the marks step aside from the read lines, and a box lifts its marks off an arrowhead (its box then reaches higher).
+  for (const [rect] of clearMarksOfReads(svg, drawn)) {
+    const now = boxOf(rect);
+    for (const b of boxes) if (now && Math.abs(b.x - now.x) < 0.5 && Math.abs(b.x2 - now.x2) < 0.5 && Math.abs(b.y2 - now.y2) < 0.5) b.y = now.y;
+  }
   // Each read's words beside its line: covering no text, crossing no line,
   // over as few cards and box headers as can be.
   const cardBoxes = cardEls.map((g) => cardBoxOf.get(g)).filter(Boolean);
@@ -3990,7 +3997,7 @@ function drawTgComponentMarks(svg, { drawnAnswer, focus, boxOf, make, edgePoints
     const words = width(m.words, 12, 700) <= room ? m.words : m.short;
     sub.setAttribute("visibility", "hidden");
     sub.setAttribute("data-tg-hid", "1");
-    const t = make("text", { "data-tg-root": "card", x, y, "font-size": 12, "font-weight": 700, fill: quiet ? "var(--muted)" : tone(m.tone) }, words);
+    const t = make("text", { "data-tg-root": "card", x, y, "font-size": 12, "font-weight": 700, fill: quiet ? "var(--frame-card-muted, var(--muted))" : TG_CARD_TONE[m.tone] || TG_CARD_TONE.idle }, words);
     if (m.state === "applying") t.setAttribute("class", "pin-pulse");
     if (!inFocus) t.style.opacity = "0.6";
     t.appendChild(make("title", {}, [`wave ${m.wave} · ${m.words}`, ...m.facts].join("\n") + "\n(from terragucci's reports, not live)"));
@@ -4093,7 +4100,7 @@ function markTerragucciCards() {
     tag.setAttribute("text-anchor", "end");
     tag.setAttribute("font-size", "11");
     tag.setAttribute("font-weight", "600");
-    tag.setAttribute("fill", corner.tone === "drift" ? "var(--degraded)" : corner.tone === "wave" ? "var(--pending)" : "var(--muted)");
+    tag.setAttribute("fill", corner.tone === "drift" ? "var(--frame-card-degraded, var(--degraded))" : corner.tone === "wave" ? "var(--frame-card-pending, var(--pending))" : "var(--frame-card-muted, var(--muted))");
     tag.textContent = `${corner.text} · ${markAge(marks)}`;
     const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
     title.setAttribute("data-tg-mark", "title");
@@ -5583,9 +5590,10 @@ function titleRowFits(row, left) {
 /**
  * The marks' own row, just under the title: the box grows upward by a row
  * and its title moves up into it, so no card moves and none is covered. The
- * marks run left to right from the box's left, stepping past an edge where
- * they can, and keep their icons: short of room they run onto another row,
- * and the box grows by that one too. Only at phone width do the icons go
+ * marks stay one cluster, the forge first, at the row's start or end where
+ * no edge crosses it, else at its start with the edge behind. They keep
+ * their icons: short of room the cluster runs onto another row, and the box
+ * grows by that one too. Only at phone width do the icons go
  * first, while one row of names alone holds them.
  */
 function marksOwnRow(row, rect, title, grown = 0) {
@@ -5596,31 +5604,43 @@ function marksOwnRow(row, rect, title, grown = 0) {
   const avoid = (row.getAttribute("data-pm-avoid") || "").split(",").filter(Boolean).map(Number);
   const marks = [...row.querySelectorAll(":scope > .pm-mark")];
   const widths = markWidths(marks);
-  // Left to right in rows, a mark that would sit on an edge stepping past it.
-  const lay = (icons, step, maxRows) => {
-    const xs = [];
-    const rowOf = [];
-    let r = 0;
-    let x = left;
+  // One cluster, the forge first, then the tools: in rows when one row can't hold it, each row's
+  // part together. A part goes at the row's start or its end, whichever an edge doesn't cross
+  // (`clear`); else at the start, any edge passing behind it.
+  const lay = (icons, clear, maxRows) => {
+    const parts = [[]];
+    let used = 0;
     for (let i = 0; i < marks.length; i++) {
       const w = markWidth(marks[i], widths[i], icons);
-      const at = (x0) => {
-        let p = x0;
-        if (step) for (const e of avoid.filter((e) => e > p - 4 && e < p + w + 4).sort((a, b) => a - b)) p = Math.max(p, e + 6);
-        return p;
-      };
-      let p = at(x);
-      if (p + w > right && x > left) {
-        r++;
-        x = left;
-        p = at(x);
+      const part = parts[parts.length - 1];
+      const need = used + (part.length ? MARK_STEP : 0) + w;
+      if (part.length && need > right - left) {
+        parts.push([i]);
+        used = w;
+      } else {
+        part.push(i);
+        used = need;
+      }
+      if (w > right - left || parts.length > maxRows) return null;
+    }
+    const xs = [];
+    const rowOf = [];
+    for (const [r, part] of parts.entries()) {
+      const width = part.reduce((s, i) => s + markWidth(marks[i], widths[i], icons), 0) + MARK_STEP * (part.length - 1);
+      const crosses = (x0) => avoid.some((e) => e > x0 - 4 && e < x0 + width + 4);
+      let x0 = left;
+      if (clear) {
+        const spot = [left, right - width].find((x) => !crosses(x));
+        if (spot === undefined) return null;
+        x0 = spot;
+      }
+      for (const i of part) {
+        xs[i] = x0;
+        rowOf[i] = r;
+        x0 += markWidth(marks[i], widths[i], icons) + MARK_STEP;
       }
-      if (p + w > right || r >= maxRows) return null;
-      xs.push(p);
-      rowOf.push(r);
-      x = p + w + MARK_STEP;
     }
-    return { xs, rowOf, rows: r + 1 };
+    return { xs, rowOf, rows: parts.length };
   };
   // Phone width is the viewer's screen: the kiosk frames this page narrow on a wide one.
   const phone = (() => {
@@ -5682,7 +5702,14 @@ function clearMarksOfReads(svgEl, lines) {
         if (f >= 0 && f <= 1) xs.push(p0.x + (p1.x - p0.x) * f - dx);
       }
     }
-    if (!xs.length) continue;
+    if (xs.length) stepAside(row, xs, own);
+  }
+  return liftOffArrowheads(svgEl, lines);
+}
+
+/** Lay a row out again clear of `xs` too, or leave it as it was where that doesn't fit. */
+function stepAside(row, xs, own) {
+  {
     const was = row.getAttribute("data-pm-avoid") || "";
     row.setAttribute("data-pm-avoid", [was, ...xs.map((x) => x.toFixed(1))].filter(Boolean).join(","));
     // The old places, should the new avoidance not fit.
@@ -5699,6 +5726,70 @@ function clearMarksOfReads(svgEl, lines) {
   }
 }
 
+/** How far a read's arrowhead reaches back from its tip, and how wide it spreads (marker 7 x stroke 3). */
+const ARROWHEAD = { length: 22, half: 11 };
+
+/**
+ * No arrowhead sits on a mark. A read that ends in a box whose marks its head
+ * would cover lifts the box's title and marks a row up, the box growing by
+ * that row, so the head lands on open ground just over the card. Returns each
+ * lifted box as [its rect, the rows it grew by].
+ */
+function liftOffArrowheads(svgEl, lines) {
+  const G = MARK.size + 6;
+  const lifted = [];
+  const hit = (a, b) => a.x < b.x2 && a.x2 > b.x && a.y < b.y2 && a.y2 > b.y;
+  const heads = lines.map(({ p0, p1 }) => {
+    const len = Math.hypot(p1.x - p0.x, p1.y - p0.y) || 1;
+    const bx = p1.x - ((p1.x - p0.x) / len) * ARROWHEAD.length;
+    const by = p1.y - ((p1.y - p0.y) / len) * ARROWHEAD.length;
+    const h = ARROWHEAD.half;
+    return { x: Math.min(p1.x, bx) - h, y: Math.min(p1.y, by) - h, x2: Math.max(p1.x, bx) + h, y2: Math.max(p1.y, by) + h };
+  });
+  for (const row of svgEl.querySelectorAll(".pipeline-marks")) {
+    if (row.style.display === "none") continue;
+    const m = /translate\(\s*([-\d.]+)[\s,]+([-\d.]+)/.exec((row.parentNode.getAttribute && row.parentNode.getAttribute("transform")) || "");
+    const dx = m ? Number(m[1]) : 0;
+    const dy = m ? Number(m[2]) : 0;
+    const boxes = [...row.querySelectorAll(":scope > .pm-mark")]
+      .filter((mk) => mk.style.display !== "none")
+      .map((mk) => {
+        try {
+          const b = mk.getBBox();
+          return { x: b.x + dx - 2, y: b.y + dy - 2, x2: b.x + b.width + dx + 2, y2: b.y + b.height + dy + 2 };
+        } catch {
+          return null;
+        }
+      })
+      .filter(Boolean);
+    if (!heads.some((h) => boxes.some((b) => hit(h, b)))) continue;
+    const rect = svgEl.querySelector(`rect[data-group-id="wave-${row.getAttribute("data-pm-wave")}"]`);
+    const title = row.nextElementSibling && row.nextElementSibling.tagName.toLowerCase() === "text" ? row.nextElementSibling : null;
+    if (!rect) continue;
+    if (!rect.hasAttribute("data-pm-y0")) {
+      rect.setAttribute("data-pm-y0", rect.getAttribute("y"));
+      rect.setAttribute("data-pm-h0", rect.getAttribute("height"));
+    }
+    if (title && !title.hasAttribute("data-pm-ty0")) title.setAttribute("data-pm-ty0", title.getAttribute("y"));
+    const titleCy = title ? Number(title.getAttribute("y")) : null;
+    rect.setAttribute("y", String(Number(rect.getAttribute("y")) - G));
+    rect.setAttribute("height", String(Number(rect.getAttribute("height")) + G));
+    if (title) title.setAttribute("y", String(titleCy - G));
+    row.setAttribute("data-pm-cy", String(Number(row.getAttribute("data-pm-cy")) - G));
+    for (const n of row.querySelectorAll(".pm-icon, .pm-label")) n.setAttribute("y", String(Number(n.getAttribute("y")) - G));
+    // The job's status rides its title's line.
+    if (title) {
+      const tb = title.getBBox();
+      for (const s of svgEl.querySelectorAll('[data-tg-root="wave-status"]')) {
+        const y = Number(s.getAttribute("y"));
+        if (Math.abs(y - (tb.y + tb.height / 2 + G + dy)) < tb.height) s.setAttribute("y", String(y - G));
+      }
+    }
+    lifted.push([rect, G]);
+  }
+  return lifted;
+}
+
 /** The x's at which the graph's edges cross a band of the svg (`y0`..`y1`), in the svg's own coordinates. */
 function edgeXsIn(svgEl, y0, y1) {
   const xs = [];

package/web/theme.js

@@ -65,6 +65,27 @@ export function oklchToHex({ L, C, H }) {
     l2s(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s));
 }
 
+// behold#571: the most chroma an OKLCH lightness and hue holds inside sRGB,
+// so a lightness walk keeps its hue by giving up chroma, not by clipping.
+function oklchInGamut({ 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;
+  const rgb = [4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s];
+  return rgb.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
+}
+export function oklchToHexMapped({ L, C, H }) {
+  if (oklchInGamut({ L, C, H })) return oklchToHex({ L, C, H });
+  let lo = 0, hi = C;
+  for (let i = 0; i < 24; i++) {
+    const mid = (lo + hi) / 2;
+    if (oklchInGamut({ L, C: mid, H })) lo = mid;
+    else hi = mid;
+  }
+  return oklchToHex({ L, C: lo, H });
+}
+
 // 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.
@@ -313,9 +334,26 @@ const KIOSK_VARS = { surfaceBox: "surface-box", surfacePaneA: "surface-pane-a",
 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
+  // behold#571: a card a state's words can read on at 4.5:1. A mid-tone palette
+  // (Blue Dolphin, Grass) mixes a card even white or black can't reach that on;
+  // its lightness steps away from the text's side until one of them can.
+  const panel = (() => {
+    const p0 = fgMix(0.18);
+    const best = (c) => Math.max(contrast(c, "#ffffff"), contrast(c, "#000000"));
+    if (best(p0) >= 4.8) return p0;
+    const o = hexToOklch(p0);
+    const dir = contrast(p0, "#ffffff") >= contrast(p0, "#000000") ? -1 : 1;
+    for (let step = 1; step <= 40; step++) {
+      const c = oklchToHexMapped({ ...o, L: clamp(o.L + dir * step * 0.005, 0, 1) });
+      if (best(c) >= 4.8) return c;
+    }
+    return p0;
+  })();                                      // 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);
+  // behold#571: a status outline is a thin line on the background and the wave box: 3:1 on both, its hue kept.
+  const up = hexToOklch(th.bg).L < 0.6;
+  const line = (c) => lightnessFor(c, [th.bg, fgMix(0.045)], 3, up);
+  const stroke = (c) => line(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),
@@ -324,9 +362,62 @@ export function pinTokensFor(th) {
     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,
+    selectedStroke: line(accent),
+  };
+}
+/**
+ * behold#571: the state colours as the graph frame draws them as text and thin
+ * lines: a card's state words and its outline, a wave box's job status and
+ * outline, a read's line. Each is the state's hue with its OKLCH lightness
+ * moved until it reads at WCAG AA (4.5:1) on the ground its words sit on, and
+ * at 3:1 (a line's floor) on every other ground of the frame: `box` inks for
+ * the background and the wave boxes, `card` inks for the cards.
+ */
+export const FRAME_STATES = ["managed", "foreign", "pending", "degraded", "runtime", "neutral", "focus", "muted"];
+export function frameGrounds(th) {
+  const pin = pinTokensFor(th);
+  return { box: [th.bg, pin.bg1], card: [pin.neutralFill] };
+}
+const worstOn = (c, grounds) => Math.min(...grounds.map((g) => contrast(c, g)));
+/**
+ * `hex` with its OKLCH lightness walked, its hue kept, until it clears
+ * `floor` on each of `grounds` and `lineFloor` on each of `others`. Chroma
+ * gives way only where sRGB can't hold it at that lightness; a theme whose
+ * grounds leave no room at all gets white or black.
+ */
+function lightnessFor(hex, grounds, floor, up, others = [], lineFloor = 3) {
+  const ok = (c) => worstOn(c, grounds) >= floor && (!others.length || worstOn(c, others) >= lineFloor);
+  if (ok(hex)) return hex;
+  const o = hexToOklch(hex);
+  const walk = (dir) => {
+    for (let step = 1; step <= 200; step++) {
+      const L = clamp(o.L + dir * step * 0.005, 0, 1);
+      const out = oklchToHexMapped({ L, C: o.C, H: o.H });
+      if (ok(out)) return out;
+      if (L === 0 || L === 1) break;
+    }
+    return null;
   };
+  const found = walk(up ? 1 : -1) || walk(up ? -1 : 1);
+  if (found) return found;
+  const ends = up ? ["#ffffff", "#000000"] : ["#000000", "#ffffff"];
+  return ends.find(ok) || ends.reduce((a, b) => (worstOn(b, grounds) > worstOn(a, grounds) ? b : a));
+}
+export function frameInks(th) {
+  const t = tokensFor(th);
+  const g = frameGrounds(th);
+  const all = [...g.box, ...g.card];
+  // Lighter on a ground that is dark, darker on a light one.
+  const up = (gs) => hexToOklch(gs[0]).L < 0.6;
+  const box = {};
+  const card = {};
+  for (const s of FRAME_STATES) {
+    box[s] = lightnessFor(t[s], g.box, 4.5, up(g.box), all);
+    card[s] = lightnessFor(t[s], g.card, 4.5, up(g.card), all);
+  }
+  return { box, card };
 }
+
 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; }
@@ -362,6 +453,14 @@ export function applyTheme(tokens = _tokens) {
   for (const [k, v] of Object.entries(KIOSK_VARS)) if (tokens[k]) root.style.setProperty("--" + v, tokens[k]);
   (tokens.roots || []).forEach((c, i) => root.style.setProperty(`--root-${i}`, c));
   if (_active) { const pin = pinTokensFor(_active); for (const k of PIN_VARS) root.style.setProperty("--pin-" + k, pin[k]); }
+  // behold#571: the state colours the graph frame draws as text and lines, legible on every ground (frameInks).
+  if (_active) {
+    const inks = frameInks(_active);
+    for (const k of FRAME_STATES) {
+      root.style.setProperty("--frame-" + k, inks.box[k]);
+      root.style.setProperty("--frame-card-" + k, inks.card[k]);
+    }
+  }
   root.style.setProperty("color-scheme", tokens.dark ? "dark" : "light");
 }
 

package/web/theme.test.js

@@ -6,7 +6,7 @@
 // sweeps all 552 palettes for the same assertion; this pins the exact
 // palette the issue was filed against, with no browser involved.
 import { describe, it, expect } from "vitest";
-import { MIN_STEP, SOFT_CEILING, ZEBRA, contrast, desaturate, hexToOklch, mix, tokensFor } from "./theme.js";
+import { FRAME_STATES, MIN_STEP, SOFT_CEILING, ZEBRA, contrast, desaturate, frameGrounds, frameInks, hexToOklch, mix, pinTokensFor, tokensFor } from "./theme.js";
 import { THEMES } from "./themes.js";
 
 describe("tokensFor — the --muted contrast floor (#240)", () => {
@@ -83,3 +83,58 @@ describe("tokensFor — the kiosk's surfaces (behold#571)", () => {
     expect(mocha.soft).toBe(THEMES["Catppuccin Mocha"].fg);
   });
 });
+
+// behold#571: the graph frame's state colours, as text and thin lines, in every theme.
+describe("the graph frame's state colours", () => {
+  const all = Object.values(THEMES);
+  const hueGap = (a, b) => Math.min(Math.abs(a - b), 360 - Math.abs(a - b));
+
+  it("read at WCAG AA (4.5:1) on the ground their words sit on, and 3:1 as a line on every other, in every theme", () => {
+    const short = [];
+    for (const th of all) {
+      const inks = frameInks(th);
+      const g = frameGrounds(th);
+      for (const side of ["box", "card"]) {
+        for (const s of FRAME_STATES) {
+          const c = inks[side][s];
+          for (const gr of g[side]) if (contrast(c, gr) < 4.5) short.push(`${th.name} ${side} ${s} ${c} on ${gr}: ${contrast(c, gr).toFixed(2)}`);
+          // And as a line, 3:1 on every ground of the frame.
+          for (const gr of [...g.box, ...g.card]) if (contrast(c, gr) < 3) short.push(`${th.name} ${side} ${s} line ${c} on ${gr}: ${contrast(c, gr).toFixed(2)}`);
+        }
+      }
+    }
+    expect(short).toEqual([]);
+  });
+
+  it("draw a status outline at 3:1 or better on the background and the wave box, in every theme", () => {
+    const short = [];
+    for (const th of all) {
+      const pin = pinTokensFor(th);
+      for (const k of ["accentStroke", "goodStroke", "warnStroke", "runtimeStroke", "selectedStroke"]) {
+        for (const g of [pin.bg0, pin.bg1]) if (contrast(pin[k], g) < 3) short.push(`${th.name} ${k} ${pin[k]} on ${g}: ${contrast(pin[k], g).toFixed(2)}`);
+      }
+    }
+    expect(short).toEqual([]);
+  });
+
+  it("keep each state's hue where it has one, moving its lightness", () => {
+    const off = [];
+    for (const th of all) {
+      const t = tokensFor(th);
+      const inks = frameInks(th);
+      for (const s of FRAME_STATES) for (const side of ["box", "card"]) {
+        const a = hexToOklch(t[s]);
+        const b = hexToOklch(inks[side][s]);
+        if (a.C < 0.04 || b.C < 0.04) continue;
+        if (hueGap(a.H, b.H) > 20) off.push(`${th.name} ${side} ${s} ${t[s]} -> ${inks[side][s]}`);
+      }
+    }
+    expect(off).toEqual([]);
+  });
+
+  it("fixes Sea Shells' planned text, which read dark blue on a dark card", () => {
+    const th = THEMES["Sea Shells"];
+    expect(contrast(tokensFor(th).pending, pinTokensFor(th).neutralFill)).toBeLessThan(2);
+    expect(contrast(frameInks(th).card.pending, pinTokensFor(th).neutralFill)).toBeGreaterThanOrEqual(4.5);
+  });
+});