jig-ui 0.18.9 → 0.18.10

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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

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.9",
+  "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.