jig-ui 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 0.26.0 (2026-10-13)
+
+An unbranded page that looks designed, tables that hold together on a phone and
+on a touch screen, and two layout faults the render probe now measures.
+
+### Fixed
+
+- **An unbranded page no longer reads as unstyled.** The default font stack put
+  `system-ui` first, and on Linux that resolves to the desktop's own font,
+  often DejaVu Sans, before any better face is tried. It now names each
+  platform's interface face in turn: San Francisco, Segoe UI, Roboto, then
+  Noto Sans, Helvetica and Arial. The `A-138` serif check knows these names,
+  so the stack is not read as a serif for ending in `sans-serif`.
+- **A table stacked on a phone leads with what each row is.** `L-01`, step 6,
+  told an agent to put each column's name in front of every cell, and a member
+  list on a phone read like a form: "Member:", "Email:", "Role:", "Status:".
+  The row's own name now leads its block with no label, a value that says what
+  it is (an email, a role, a status) gets none, and the row's actions sit
+  together on one line where they fit, with no "Actions" label. In three runs,
+  every row kept its actions on one line at 390px.
+- **A table's rows stay one height.** `operator`'s 36px row is below the 48px
+  touch target, and an agent met the floor with a control's own minimum
+  height, so rows with an action stood taller than rows without one. A control
+  in a row now takes the row's height. For a mouse a dense row is above WCAG
+  2.2's 24px minimum; for a finger it is not, so under a coarse pointer
+  `operator` and `product` raise their row tokens to the touch target, and
+  every row grows together.
+
+### Added
+
+- **The render probe reports a page that scrolls sideways, with or without a
+  review.** A page wider than the screen was reported only when a critique had
+  called it clean; with no critique the measurement was dropped. Help articles
+  built without Jig ran 424 to 478px wide on a 360px phone, with nothing
+  reported. It is now a measured failure in every mode (`D-115`).
+- **The render probe reports a table cell that has left its table.** An agent
+  set a cell to `display: flex` to line up a name and a tag; the cell stopped
+  taking its row's height, and every name drifted above its row's divider. Any
+  `td` or `th` that is not a table cell while its table is drawn as a table is
+  now a measured failure (`P-06`), which also says to put the flex on a wrapper
+  inside the cell. A table stacked on a phone is left out.
+
 ## 0.25.0 (2026-10-09)
 
 Link previews, code and tables that reflow on an `editorial` phone, and the
@@ -339,8 +381,7 @@ and `jig ship` is where nothing is optional.
 
 ## 0.21.0 (2026-09-28)
 
-Dev builds, so a fix is tried on a real project before it ships, and the gate
-fixes that trial on jig-site turned up.
+Dev builds, so a fix is tried on a real project before it ships, and gate fixes that trial turned up.
 
 ### Added
 
@@ -622,7 +663,7 @@ The gate holds an HTML mockup that does not draw the page at every size.
 
 ## 0.18.4 (2026-09-25)
 
-Every release summary is one or two lines, for jig-site's Versions page.
+Every release summary is one or two lines.
 
 ### Changed
 
@@ -654,8 +695,7 @@ older probe file says it is older rather than forged.
 
 ## 0.18.2 (2026-09-25)
 
-Every release in this changelog now carries its date and a one-line summary,
-for jig-site's Versions page.
+Every release in this changelog now carries its date and a one-line summary.
 
 ### Changed
 
@@ -669,8 +709,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 the emoji rule missed an arrow that renders as an emoji.
+Two fixes: the probe misread a `<details>` menu, and the emoji rule missed an arrow that renders as an emoji.
 
 ### Fixed
 
@@ -739,7 +778,7 @@ keyboard access a rule requires fits every script budget.
 
 ## 0.17.3 (2026-09-25)
 
-Three defects found building jig-site's header with the full loop.
+Three defects found building a site header with the full loop.
 
 ### Fixed
 

package/dist/index.js

@@ -4268,7 +4268,7 @@ var HEADLINE_SELECTOR = /\bh1\b|\bh2\b|hero|display|headline|title/i;
 var SERIF = /font-family\s*:\s*([^;}]+)/i;
 function serifFamily(value) {
   const first = value.split(",")[0].trim().toLowerCase();
-  if (/sans|mono|system-ui|ui-sans|inter\b|helvetica|arial/.test(first)) return false;
+  if (/sans|mono|system-ui|ui-sans|-apple-system|blinkmacsystemfont|segoe|roboto|inter\b|helvetica|arial/.test(first)) return false;
   return /serif|georgia|garamond|playfair|fraunces|lora|merriweather|instrument serif|dm serif|cormorant|newsreader|times|baskerville|bodoni|caslon|libre caslon|source serif|pt serif|crimson/.test(value.toLowerCase());
 }
 var italicSerifDisplay = {
@@ -6332,6 +6332,19 @@ var PROBE_SCRIPT = `(async () => {
     if ((ox !== 'auto' && ox !== 'scroll') || el.scrollWidth <= el.clientWidth + 1 || !vis(el)) continue;
     sidewaysBoxes.push({ box: el.tagName.toLowerCase() + (el.classList[0] ? '.' + el.classList[0] : ''), text: (el.innerText || '').trim().replace(/\\s+/g, ' ').slice(0, 40), scrollWidth: el.scrollWidth, clientWidth: el.clientWidth });
   }
+  // A table cell given its own display (flex, grid, block) while its table is
+  // still drawn as a table stops being a cell: it no longer takes its row's
+  // height, and its border no longer meets the row's. A team table set its
+  // name cells to flex, to line up a name and a tag, and every name drifted
+  // above its row. A stacked table (the table itself set to block) is left out.
+  const brokenCells = [];
+  for (const cell of [...document.querySelectorAll('td, th')].slice(0, 2000)) {
+    if (brokenCells.length >= 5) break;
+    const table = cell.closest('table');
+    const display = getComputedStyle(cell).display;
+    if (!table || getComputedStyle(table).display !== 'table' || display === 'table-cell' || display === 'none' || !vis(cell)) continue;
+    brokenCells.push({ cell: cell.tagName.toLowerCase() + (cell.classList[0] ? '.' + cell.classList[0] : ''), text: (cell.innerText || '').trim().replace(/\\s+/g, ' ').slice(0, 40), display });
+  }
   return JSON.stringify({
     jigProbe: ${PROBE_VERSION},
     url: location.href,
@@ -6340,6 +6353,7 @@ var PROBE_SCRIPT = `(async () => {
     clientWidth: doc.clientWidth,
     sidewaysScroll: doc.scrollWidth > doc.clientWidth,
     sidewaysBoxes,
+    brokenCells,
     bodyFont: getComputedStyle(document.body).fontFamily,
     defaultFont: getComputedStyle(document.body).fontFamily === defaultFont,
     unresolvedTokens: [...unresolved],
@@ -6811,13 +6825,21 @@ function probeCheck(probes, verdictOf, indexable = true, mode) {
   const clean = (id) => ["ok", "n/a"].includes(verdictOf(id) ?? "");
   const at = (p) => `probe-${p.width}.json`;
   for (const p of probes) {
-    if (p.sidewaysScroll && clean("D-115")) {
-      errors.push(`D-115 is "${verdictOf("D-115")}", but ${at(p)} measured the page ${p.scrollWidth}px wide in a ${p.clientWidth}px viewport \u2014 it scrolls sideways.`);
+    if (p.sidewaysScroll) {
+      if (clean("D-115")) {
+        errors.push(`D-115 is "${verdictOf("D-115")}", but ${at(p)} measured the page ${p.scrollWidth}px wide in a ${p.clientWidth}px viewport \u2014 it scrolls sideways.`);
+      } else {
+        failures.push(`${at(p)}: the page is ${p.scrollWidth}px wide in a ${p.clientWidth}px viewport, so the whole page scrolls sideways (D-115). Find what is wider than the screen and let it wrap, stack, or scroll inside its own box (L-01, step 6).`);
+      }
     }
     if (mode === "editorial" && p.width <= 480 && p.sidewaysBoxes?.length) {
       const shown = p.sidewaysBoxes.map((b) => `${b.box}${b.text ? ` ("${b.text}")` : ""}, ${b.scrollWidth}px in ${b.clientWidth}px`).join("; ");
       failures.push(`${at(p)}: ${p.sidewaysBoxes.length === 1 ? "a box scrolls" : `${p.sidewaysBoxes.length} boxes scroll`} sideways on a phone: ${shown}. \`editorial\` allows no scrolling region on mobile (M-01): a code block wraps its long lines, keeping its line breaks and indents, and a wide table stacks its rows (L-01, step 6).`);
     }
+    if (p.brokenCells?.length) {
+      const shown = p.brokenCells.map((c) => `${c.cell}${c.text ? ` ("${c.text}")` : ""} is display: ${c.display}`).join("; ");
+      failures.push(`${at(p)}: ${p.brokenCells.length === 1 ? "a table cell has" : `${p.brokenCells.length} table cells have`} left the table: ${shown}. A cell given its own display stops taking its row's height, so its border and its text drift from the row's. Keep the cell a cell and put the flex on a wrapper inside it (P-06).`);
+    }
     if (p.defaultFont) {
       failures.push(`${at(p)}: the page renders in the browser's default font (${p.bodyFont ?? "unknown"}) \u2014 its styles are not applying. No review of this page can pass until they do.`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "A design system for coding agents. 160 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/02-tokens.md

@@ -262,6 +262,16 @@ It is an accessibility floor, so it is excluded from the table above — there i
 nothing per-mode about it to resolve. The same is true of `--focus-ring-width`
 and `--focus-ring-offset`, which live in the brand file for that reason.
 
+**Inside a table row, the row is the target, and every row is one height.** A
+dense row is shorter than the floor (`operator`'s 36px), and a control that
+sets its own `min-height` to the floor stretches the rows that hold it and not
+the rest: in a run, an invoices table whose "Mark paid" rows stood 48px tall
+among 36px ones. So a control in a row takes the row's height and never its
+own. For a mouse, a dense row is above WCAG 2.2's 24px minimum; for a finger it
+is not, so under `@media (pointer: coarse)` the mode files raise `--size-row`
+(and `--size-row-compact`) to `--size-touch-target`, and every row grows
+together.
+
 **Layout sizes.** Three tokens size a page's frame, where the others size what
 is inside it. A real site found none of them and made up its own three:
 

package/rules/03-patterns.md

@@ -285,6 +285,7 @@ Primarily an `operator` pattern; the rules apply wherever a table appears.
 **Rules**
 - Row identity is stable across refresh, sort and filter. A row that moves under a click causes the wrong record to be acted on — the most damaging bug this pattern has.
 - Numeric columns are right-aligned and use tabular figures (`--font-numeric`). Text columns are start-aligned. Never centre either.
+- A cell stays a table cell. To line up what is inside it (a name and a tag, an icon and a label), put `display: flex` on a wrapper inside the cell, never on the `<td>` or `<th>` itself: a cell given its own display stops taking its row's height, so its text and its border drift from the rest of the row. A table stacked on a phone, the whole table set to `block`, is the exception (`L-01`, step 6). The render probe reports a cell that has left its table.
 - Column headers state units. "Weight" is ambiguous; "Weight (kg)" is not.
 - Truncation is resolvable by click or expand, never by hover alone (`E-31`, `01-modes.md`).
 - Sort state is visible in the header and reflected in the URL, so a view can be shared.
@@ -572,10 +573,17 @@ everything else follows from.
    - **A code block** keeps its line breaks and indents and wraps a long line
      (`white-space: pre-wrap`, `overflow-wrap: anywhere`). What is copied is
      the source as written, not the wrapped lines.
-   - **A table too wide to fit** stacks its rows: each row a block, each cell a
-     line with its column's name in front. It stays a `<table>` with its header
-     row, so a screen reader still reads it as one. Where it fits, it stays a
-     table: the switch is the width at which its columns stop fitting.
+   - **A table too wide to fit** stacks its rows: each row a block, led by the
+     cell that names the row (a person, an invoice, a rule) as the block's own
+     heading, with no label in front of it. The other cells follow beneath it,
+     and a cell carries its column's name only where its value does not say
+     what it is: a bare "Yes", a number, a date. An email address, a role, a
+     status badge or a price says what it is, so it gets no "Email:", "Role:"
+     or "Status:". The row's actions sit together at the block's end, side by
+     side where they fit, with no "Actions" label. It stays a `<table>` with
+     its header row, so a screen reader still reads it as one. Where it fits,
+     it stays a table: the switch is the width at which its columns stop
+     fitting.
    - **A long identifier** (a URL, a hash, a file path) breaks where it must
      (`overflow-wrap: anywhere`).
 6. **Each transition happens where the content needs it.** The width at which

package/tokens/brand.default.css

@@ -117,9 +117,13 @@
   --focus-ring-offset: 2px;
 
   /* ================= TYPE ================= */
-  --font-text:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  /* Each platform's own interface face, named one by one: San Francisco,
+     Segoe UI, Roboto, then Noto Sans and Helvetica/Arial for the rest.
+     `system-ui` is left out on purpose: on Linux it resolves to the desktop's
+     own font, often DejaVu Sans, before any face below it is tried. */
+  --font-text:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
   --font-display: var(--font-text);
-  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", monospace;
+  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Code", "Liberation Mono", monospace;
   --font-numeric-features: "tnum" 1, "lnum" 1;
 
   /* ================= RADIUS — four, by element size ================= */

package/tokens/mode.operator.css

@@ -102,3 +102,12 @@
 @media (prefers-reduced-motion: reduce) {
   :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
 }
+
+/* On a touch screen a table row is a finger's target. A dense row (36px, 32px
+   compact) is above WCAG 2.2's 24px minimum for a mouse, and below the 48px a
+   finger needs, so under a coarse pointer every row rises to the floor. A
+   control inside a row never sets its own height to reach it: every row in a
+   table is one height, and here the tokens make that height the right one. */
+@media (pointer: coarse) {
+  :root { --size-row: var(--size-touch-target); --size-row-compact: var(--size-touch-target); }
+}

package/tokens/mode.product.css

@@ -105,3 +105,10 @@
 @media (prefers-reduced-motion: reduce) {
   :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
 }
+
+/* On a touch screen a table row is a finger's target: a compact row (40px)
+   rises to the 48px floor under a coarse pointer, as `operator`'s rows do. A
+   control inside a row never sets its own height to reach it. */
+@media (pointer: coarse) {
+  :root { --size-row-compact: var(--size-touch-target); }
+}