jig-ui 0.18.8 → 0.18.10

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 0.18.10 (2026-09-26)
+
+The rule against a stranded word holds in every browser, and the probe checks
+it where `text-wrap: pretty` is not supported.
+
+### Fixed
+
+- **`B-106` holds in every browser, and the probe checks it there.** The rule's
+  correction was `text-wrap: balance` and `pretty`, which Firefox and Safari
+  before 26 ignore. jig-site's Versions page did exactly that, passed its
+  critique in Chromium, and stranded "back." under 0.6.0 on the owner's phone.
+  The correction now adds a fallback: join each block's last two words with a
+  non-breaking space, in one function in the template layer. The render probe
+  (version 7) also lays the page out without `text-wrap: pretty` and records
+  every block that ends on one word, and `jig verdicts` refuses a `B-106` "ok"
+  that it contradicts.
+
+## 0.18.9 (2026-09-25)
+
+Each theme names its colour scheme, and no release summary names a rule by its
+id.
+
+### Changed
+
+- **No release summary names a rule by its id.** jig-site's Versions page shows
+  each summary, and the site keeps rule ids out of its interface. Three named a
+  rule as `A-05`, `I-118` or `H-47`; they now name it in words. A test keeps ids
+  out of summaries.
+
+### Fixed
+
+- **Each theme names its `color-scheme`.** The default brand file's `:root`
+  said `color-scheme: light dark`, which follows the device, and its dark blocks
+  set tokens only. jig-site added a theme toggle and a reader who chose the
+  other theme got the right page inside the device's scrollbars and form
+  controls. Both dark blocks now set `color-scheme: dark`, `[data-theme="light"]`
+  sets `light`, and `T-09` says why. A project whose brand file predates this
+  adds the same three declarations.
+
 ## 0.18.8 (2026-09-25)
 
 Two runs writing one manifest no longer lose an entry.
@@ -121,7 +160,7 @@ for jig-site's Versions page.
 ## 0.18.1 (2026-09-25)
 
 Two fixes found by jig-site's fourth round: the probe misread a `<details>`
-menu, and `A-05` missed an arrow that renders as an emoji.
+menu, and the emoji rule missed an arrow that renders as an emoji.
 
 ### Fixed
 
@@ -539,7 +578,7 @@ Meaning before presentation, and one fewer step anyone can skip.
 
 ## 0.12.0 (2026-09-18)
 
-One new rule: no em dashes in interface text (`I-118`), with a detector.
+One new rule: no em dashes in interface text, with a detector.
 
 ### Added
 
@@ -666,8 +705,8 @@ runs with Haiku.
 
 ## 0.9.0 (2026-09-13)
 
-One new rule and one amended correction, both about the same blind spot: H-47's
-correction always pointed an agent at a token.
+One new rule and one amended correction, both about the same blind spot: a
+rule's correction always pointed an agent at a token.
 
 ### Added
 

package/dist/index.js

@@ -5749,7 +5749,7 @@ import { fileURLToPath as fileURLToPath2 } from "url";
 import { join as join33, relative as relative3, resolve as resolve4, sep as sep5 } from "path";
 
 // src/probe/script.ts
-var PROBE_VERSION = 6;
+var PROBE_VERSION = 7;
 var PROBE_SCRIPT = `(async () => {
   const doc = document.documentElement;
   // checkVisibility also sees content a closed <details> hides: Chromium hides
@@ -5839,6 +5839,32 @@ var PROBE_SCRIPT = `(async () => {
   const navLinks = () => [...document.querySelectorAll('nav a, header a, [role=navigation] a')].filter(vis).length;
   // Measured before anything is clicked: what a reader sees on arrival.
   const navAtRest = navLinks();
+  // B-106 in every browser. \`text-wrap: pretty\` moves a lone last word up in
+  // Chromium and does nothing in Firefox or in Safari before 26, so the page is
+  // also measured as those lay it out: wrap forced plain, and the last word of
+  // each block compared with the word before it. jig-site's Versions page was
+  // clean in this browser and stranded "back." on an iPhone.
+  const plainWrap = document.createElement('style');
+  plainWrap.textContent = '*{text-wrap:wrap !important}';
+  document.head.appendChild(plainWrap);
+  const stranded = [];
+  for (const el of document.querySelectorAll('h1,h2,h3,h4,h5,h6,p,li,dd,dt,figcaption,blockquote,td,th,caption,summary')) {
+    if (!vis(el) || el.closest('pre, script, style, [aria-hidden="true"]')) continue;
+    if (el.querySelector('p,li,dd,dt,blockquote,h1,h2,h3,h4,h5,h6')) continue;
+    const words = [];
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      for (const m of n.data.matchAll(/\\S+/g)) words.push([n, m.index, m.index + m[0].length, m[0]]);
+    }
+    if (words.length < 3) continue;
+    const top = (w) => { const r = document.createRange(); r.setStart(w[0], w[1]); r.setEnd(w[0], w[2]); const rs = r.getClientRects(); return rs.length ? rs[rs.length - 1].top : null; };
+    const last = words[words.length - 1];
+    const a = top(words[words.length - 2]), b = top(last);
+    if (/[\\p{L}\\p{N}]/u.test(last[3]) && a !== null && b !== null && b - a > 2) {
+      stranded.push({ word: last[3], text: (el.innerText || '').trim().replace(/\\s+/g, ' ').slice(0, 40) });
+    }
+  }
+  plainWrap.remove();
   // The menu control: inside the header or navigation, or named as the menu.
   // Not any disclosure \u2014 an FAQ <summary> is not a menu.
   // The site's navigation, not a page's own: a <nav> inside <main>, an
@@ -5901,6 +5927,8 @@ var PROBE_SCRIPT = `(async () => {
     emDashes: [...new Set((ownText.match(/[^.!?\\n]{0,28}\u2014[^.!?\\n]{0,28}/g) || []).map((t) => t.trim()))].slice(0, 5),
     brokenImages: [...document.images].filter((i) => i.complete && i.naturalWidth === 0).length,
     navLinksVisible: navAtRest,
+    strandedCount: stranded.length,
+    strandedWords: stranded.slice(0, 6),
     head: {
       title: (document.title || '').trim(),
       description: (document.querySelector('meta[name=description]') || {}).content || '',
@@ -6352,6 +6380,10 @@ function probeContradictions(probes, verdictOf, indexable = true) {
     if (p.emDashes?.length) {
       errors.push(`${at(p)}: the rendered page shows an em dash in ${p.emDashes.map((t) => `"${t}"`).join(", ")} (I-118) \u2014 use a full stop, a comma, a colon, or a second element.`);
     }
+    if (clean("B-106") && p.strandedCount) {
+      const shown = (p.strandedWords ?? []).map((w) => `"${w.word}" (in "${w.text}\u2026")`).join(", ");
+      errors.push(`B-106 is "${verdictOf("B-106")}", but ${at(p)} found ${p.strandedCount} block(s) ending on one word where \`text-wrap: pretty\` is not supported (Firefox, Safari before 26): ${shown}. B-106 says what holds in every browser.`);
+    }
     const line = p.longestLine;
     if (line && line.chars > 90 && clean("B-11")) {
       errors.push(`B-11 is "${verdictOf("B-11")}", but ${at(p)} measured a line of about ${line.chars} characters ("${line.text}\u2026") \u2014 past every mode's measure. Cap prose at \`--measure-prose\`.`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.18.8",
+  "version": "0.18.10",
   "description": "A design system for coding agents. 143 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
   "license": "Apache-2.0",
   "type": "module",

package/rules/00-anti-patterns.md

@@ -210,9 +210,9 @@ The measurement is one line in a browser: render `x` in both faces at the same s
 
 ### B-106 A word stranded on its own line
 ❌ A heading that wraps to leave one word alone on the last line, or a paragraph ending on a single short word
-✅ `text-wrap: balance` on headings and short blocks, `text-wrap: pretty` on body copy. One declaration in the type layer, not a fix applied per heading.
+✅ `text-wrap: balance` on headings and short blocks, `text-wrap: pretty` on body copy: one declaration in the type layer. Both do nothing in Firefox and in Safari before 26, so where the text is rendered, join each block's last two words with a non-breaking space (U+00A0): one function in the template layer that every heading and block of text passes through, never a space typed into content.
 The eye reads a block's shape before it reads the words. A heading whose last line holds one word reads as a mistake to someone who could not name what is wrong with it — the silhouette says unfinished, and that impression lands before the sentence does.
-This is invisible in the source. The same heading breaks cleanly at 1280px and badly at 900px: where a line breaks depends on the box, the face and the string together, and none of the three is decidable from the others. It is judged on the rendered page at more than one width, which is why it carries `pass: screen`.
+This is invisible in the source. The same heading breaks cleanly at 1280px and badly at 900px: where a line breaks depends on the box, the face and the string together, and none of the three is decidable from the others. It is judged on the rendered page at more than one width, which is why it carries `pass: screen`, and the render probe also lays the page out without `text-wrap: pretty`, as those browsers do, because a page can be clean in one browser and stranded in the reader's.
 A manual break is not the fix. `<br>` placed by eye is correct at exactly one viewport width and wrong at the next, and it survives into every layout the component is later used in.
 Ragged-right is not the failure — that is correct, and `B-12` requires it. The failure is a *stranded* word, not an uneven edge. Do not chase every short last line; chase the one that is alone.
 

package/rules/02-tokens.md

@@ -442,6 +442,8 @@ These thresholds are APCA's own and do not line up with WCAG's large-text defini
 
 Not an inversion (`C-21`). Each brand file supplies a dark block under `@media (prefers-color-scheme: dark)` and `[data-theme="dark"]`, remapping semantics only. Mode files are theme-independent — density does not change with colour scheme.
 
+Each theme also names its `color-scheme`: `dark` in both dark blocks, and `light` under `[data-theme="light"]`. The browser's own parts, its scrollbars, form controls and the canvas behind the page, follow `color-scheme` and not the tokens, so a site with a theme toggle otherwise draws the chosen theme inside the device's scrollbars.
+
 In dark, elevated surfaces get **lighter**, not shadowed. Border-led elevation survives the switch; shadow-led does not, which is one reason border-led is the unbranded default.
 
 ## T-10 · Consuming

package/tokens/brand.default.css

@@ -154,6 +154,7 @@
    is the answer to it. */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
+    color-scheme: dark;
 
     /* Three solid levels. In dark, DEPTH COMES FROM BACKGROUND, NOT SHADOW —
        shadows are nearly invisible on a dark surface. Never pure black. */
@@ -186,6 +187,7 @@
 }
 
 :root[data-theme="dark"] {
+    color-scheme: dark;
 
     /* Three solid levels. In dark, DEPTH COMES FROM BACKGROUND, NOT SHADOW —
        shadows are nearly invisible on a dark surface. Never pure black. */
@@ -215,3 +217,11 @@
     --shadow-raised:  none;
     --shadow-overlay: 0 8px 24px -8px rgb(0 0 0 / 60%);
 }
+
+/* The browser's own parts (scrollbars, form controls, the canvas behind the
+   page) follow `color-scheme`, not the tokens. `:root` says `light dark`, which
+   follows the device, so a reader who chose the other theme got the right page
+   inside the wrong scrollbars (jig-site, DRIFT 48). Each theme names its own. */
+:root[data-theme="light"] {
+  color-scheme: light;
+}