jig-ui 0.26.1 → 0.26.3

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # Changelog
 
+## 0.26.3 (2026-10-14)
+
+Form text in `operator` stops making phones zoom, and `check` catches three
+things it missed or got wrong.
+
+### Fixed
+
+- **`operator` body text is 16px on touch screens.** At 14px, any input set in
+  the body size, or inheriting it, made iOS zoom the page when it took focus.
+  Under a coarse pointer the body token now rises to 16px, beside the rows
+  that already rose to the touch target. A mouse keeps the dense 14px.
+- **`check` reads form text that inherits its size.** An input that wrote
+  `font: inherit` under a 14px body went unreported, and so did any page with
+  a touch-screen query, whatever that query changed. A touch query now counts
+  only when it raises form text.
+- **Low contrast in small inline text is reported.** Text sized no larger than
+  the text around it (`0.9em`, `85%`, `smaller`) was read as possibly large and
+  held to 3:1, so an inline code span at 4.03:1 passed. It is held to 4.5:1.
+- **A pale red is not cream.** The cream-palette warning fired on a red status
+  tint behind an "Overdue" badge. It now needs a tint that leans toward yellow,
+  and leaves alone a token named for a state or a component.
+- **A signed-in page without a spec is not asked for search metadata.** A
+  review took every page without a spec as public. It now takes the project's
+  mode when `jig.config.json` declares one, so an `operator` or `product`
+  page is asked for `noindex` instead of a description and a link preview.
+- **A table's scroll box holds what is hidden inside it.** The layout method
+  now says the box a wide table scrolls in is `position: relative`. Without
+  it, a label hidden for screen readers in each row was placed against the
+  page, and an invoices page scrolled sideways by 200px on a phone.
+
+## 0.26.2 (2026-10-13)
+
+A button in a table row keeps the row's height, and the render probe reports
+rows it stretches.
+
+### Fixed
+
+- **A button in a table row takes the row's height.** 0.26.0 said so in the
+  tokens chapter, but the Button pattern, which an agent reads to build a
+  button, still gave its hit area a 48px floor with no exception, and an
+  invoices table on 0.26.1 had its "Mark as paid" rows at 65px among 41px ones.
+  The Button and Data table patterns now say it where buttons are built: a
+  button in a row is sized to the control height with no minimum of its own,
+  and on a touch screen the whole row rises to the touch target instead. On a
+  run of this release, every row stood 36px with a mouse and 48px on touch.
+
+### Added
+
+- **The render probe reports a table whose rows are not one height because of
+  a control.** When the rows holding a button or link stand taller than the
+  rest, and the control is taller than the short rows, it is a measured
+  failure (`P-02`, `P-06`). Rows that differ only because text wraps are left
+  alone.
+
 ## 0.26.1 (2026-10-13)
 
 The colour and typeface you decide in `/jig decide` now reach the pages, and

package/dist/index.js

@@ -1699,7 +1699,7 @@ function sectionsOf(entries) {
 }
 
 // src/commands/check.ts
-import { existsSync as existsSync18, readFileSync as readFileSync23 } from "fs";
+import { existsSync as existsSync18, readdirSync as readdirSync11, readFileSync as readFileSync23 } from "fs";
 import { join as join27 } from "path";
 
 // src/check/files.ts
@@ -3329,6 +3329,7 @@ var REM_TO_PX = 16;
 var FONT_SIZE_DECL_RE = /(?<![-\w])font-size\s*:\s*([^;]+?)(?:;|$)/i;
 var FONT_SIZE_PX_RE = /^(-?\d*\.?\d+)px$/i;
 var FONT_SIZE_REM_RE = /^(-?\d*\.?\d+)rem$/i;
+var NOT_LARGER_RE = /^(?:0*\.\d+em|1(?:\.0+)?em|(?:\d{1,2}(?:\.\d+)?|100)%|smaller|small|x-small|xx-small)$/i;
 var BOLD_RE = /(?<![-\w])font-weight\s*:\s*(bold|[6-9]\d\d)/i;
 function resolveFloor(body) {
   const m = FONT_SIZE_DECL_RE.exec(body);
@@ -3339,6 +3340,7 @@ function resolveFloor(body) {
   let px2;
   if (pxMatch) px2 = parseFloat(pxMatch[1]);
   else if (remMatch) px2 = parseFloat(remMatch[1]) * REM_TO_PX;
+  else if (NOT_LARGER_RE.test(raw)) return FLOOR;
   else return LARGE_FLOOR;
   const large = BOLD_RE.test(body) ? px2 >= 18.66 : px2 >= 24;
   return large ? LARGE_FLOOR : FLOOR;
@@ -3669,9 +3671,22 @@ var viewportHeight = {
 
 // src/check/detectors/input-zoom.ts
 var SELECTOR_RE = /(?:^|[\s,>+~(])(?:input|select|textarea)\b(?![-\w])|\[contenteditable/i;
-var SIZE_RE = /(?<![-\w])font-size\s*:\s*([^;}]+)/gi;
-var TOUCH_QUERY_RE = /@media[^{]*\b(?:pointer\s*:\s*coarse|hover\s*:\s*none)\b/i;
+var SIZE_RE = /(?<![-\w])font(?:-size)?\s*:\s*([^;}]+)/gi;
+var TOUCH_QUERY_RE = /^@media[^{]*\b(?:pointer\s*:\s*coarse|hover\s*:\s*none)\b/i;
+var BODY_SELECTOR_RE = /(?:^|,)\s*(?:html\s*,\s*)?body\s*(?:,|$)/i;
 var ROOT_PX = 16;
+function touchFormText(source) {
+  const out = { body: false, control: false };
+  for (const media of splitRuleBlocks(source)) {
+    if (!TOUCH_QUERY_RE.test(media.selector.trim())) continue;
+    for (const block of leafBlocks(media.body)) {
+      const body = /--text-body\s*:\s*([^;}]+)/i.exec(block.body);
+      if (body && (pixels(body[1], void 0) ?? 0) >= ROOT_PX) out.body = true;
+      if (SELECTOR_RE.test(block.selector) && /(?<![-\w])font(?:-size)?\s*:/i.test(block.body)) out.control = true;
+    }
+  }
+  return out;
+}
 function pixels(value, mode) {
   const v = value.trim().replace(/\s*!important$/i, "");
   const unit = /^(\d*\.?\d+)(px|rem|em)$/i.exec(v);
@@ -3680,18 +3695,36 @@ function pixels(value, mode) {
   if (/^var\(\s*--text-body\s*\)$/i.test(v) && mode === "operator") return 14;
   return void 0;
 }
+function sizeOf(property, value) {
+  if (!/^font\s*:/i.test(property)) return value;
+  const m = /(?:^|\s)((?:\d*\.?\d+(?:px|rem|em))|var\(\s*--text-[\w-]+\s*\))\s*(?:\/|\s|$)/i.exec(value.trim());
+  return m ? m[1] : value.trim();
+}
+function bodySize(source) {
+  for (const block of leafBlocks(source)) {
+    if (block.atRuleDepth !== 0 || !BODY_SELECTOR_RE.test(block.selector.trim())) continue;
+    const m = /(?<![-\w])font-size\s*:\s*([^;}]+)/i.exec(block.body);
+    if (m) return m[1];
+  }
+  return void 0;
+}
 var inputZoom = {
   name: "input-zoom",
   appliesTo: (file) => isStyleBearing(file),
   run(source, file, ctx) {
-    if (TOUCH_QUERY_RE.test(source)) return [];
+    const own = touchFormText(source);
+    if (own.control || ctx.touchFormText?.control) return [];
+    const mode = own.body || ctx.touchFormText?.body ? void 0 : ctx.mode;
     const findings = [];
     for (const block of leafBlocks(source)) {
       if (!SELECTOR_RE.test(block.selector)) continue;
       SIZE_RE.lastIndex = 0;
       let m;
       while (m = SIZE_RE.exec(block.body)) {
-        const px2 = pixels(m[1], ctx.mode);
+        let value = sizeOf(m[0], m[1]);
+        const inherited = /^inherit\b/i.test(value.trim());
+        if (inherited) value = bodySize(source) ?? "";
+        const px2 = pixels(value, mode);
         if (px2 === void 0 || px2 >= ROOT_PX) continue;
         const line = lineOfOffset(block, m.index);
         findings.push(
@@ -3700,7 +3733,7 @@ var inputZoom = {
             "input-zoom",
             file,
             line,
-            `form control text resolves to ${px2}px; iOS zooms the page on focus below 16px`,
+            inherited ? `form control inherits the body's ${px2}px; iOS zooms the page on focus below 16px` : `form control text resolves to ${px2}px; iOS zooms the page on focus below 16px`,
             sourceLine(source, line)
           )
         );
@@ -4495,12 +4528,13 @@ var glowAccent = {
   }
 };
 var PAGE_SELECTOR = /(?:^|[\s,>])(?:html|body|:root|main)\b|--[\w-]*(?:bg|background|surface|page|canvas)[\w-]*/i;
+var NOT_PAGE_TOKEN = /-(?:success|error|danger|warn|warning|info|notice|overdue|due|paid|draft|pending|status|badge|tag|chip|pill|alert|toast|hover|active|selected|highlight|mark|code|kbd|tooltip|input|button|btn)(?=-|$)/i;
 var TW_CREAM = /^bg-(?:amber|orange|yellow)-(?:50|100)$|^bg-stone-(?:100|200)$/;
 function cream(value, tokens) {
   const c = extractColorComponents(value.trim(), tokens);
   if (!c || c.alpha < 0.9) return false;
   const { r, g, b } = c.rgb;
-  return Math.min(r, g, b) >= 215 && r >= g && g >= b && r - b >= 6;
+  return Math.min(r, g, b) >= 215 && r >= g && g >= b && r - b >= 6 && g - b >= (r - b) * 0.35;
 }
 var creamPalette = {
   name: "cream-palette",
@@ -4510,7 +4544,7 @@ var creamPalette = {
     for (const block of leafBlocks(source)) {
       for (const m of block.body.matchAll(/(?:^|[;{\s])((?:--[\w-]+|background(?:-color)?))\s*:\s*([^;}]+)/g)) {
         const prop = m[1];
-        const onPage = prop.startsWith("--") ? PAGE_SELECTOR.test(prop) : PAGE_SELECTOR.test(block.selector);
+        const onPage = prop.startsWith("--") ? PAGE_SELECTOR.test(prop) && !NOT_PAGE_TOKEN.test(prop) : PAGE_SELECTOR.test(block.selector);
         if (!onPage || !cream(m[2], ctx.tokens)) continue;
         hits.push({ line: lineOfOffset(block, m.index), message: `a cream page surface (${m[2].trim()}): the palette a model reaches for when asked to look tasteful` });
       }
@@ -4692,7 +4726,7 @@ function getDetector(name) {
 }
 
 // src/check/run.ts
-function runChecks(projectRoot, files, index, tokens, bucketFilter, projectParticipates = false, mode, projectResponsive, viewportFitCover, projectMenuToggle, declaredProperties) {
+function runChecks(projectRoot, files, index, tokens, bucketFilter, projectParticipates = false, mode, projectResponsive, viewportFitCover, projectMenuToggle, declaredProperties, touchFormText2) {
   const findings = [];
   const active = index.filter(
     (e) => !!e.detector && !!getDetector(e.detector)
@@ -4710,7 +4744,7 @@ function runChecks(projectRoot, files, index, tokens, bucketFilter, projectParti
     }
     const source = maskComments(maskNonStyleRegions(raw, file));
     for (const { entry, detector } of applicable) {
-      const ctx = { ruleId: entry.id, bucket: entry.bucket, severity: entry.severity, tokens, projectParticipates, raw, mode, projectResponsive, viewportFitCover, projectMenuToggle, declaredProperties };
+      const ctx = { ruleId: entry.id, bucket: entry.bucket, severity: entry.severity, tokens, projectParticipates, raw, mode, projectResponsive, viewportFitCover, projectMenuToggle, declaredProperties, touchFormText: touchFormText2 };
       findings.push(...detector.run(source, file, ctx));
     }
   }
@@ -5214,6 +5248,17 @@ function check(opts) {
     }
   });
   const declaredProperties = collectDeclaredProperties(opts.projectRoot, stylesheets, Object.keys(tokens));
+  const touchFormText2 = { body: false, control: false };
+  const vendoredTokens = existsSync18(join27(opts.projectRoot, ".jig", "tokens")) ? readdirSync11(join27(opts.projectRoot, ".jig", "tokens")).filter((f) => f.endsWith(".css")).map((f) => join27(".jig", "tokens", f)) : [];
+  for (const f of [...stylesheets, ...vendoredTokens]) {
+    if (!isStyleBearing(f)) continue;
+    try {
+      const found = touchFormText(maskComments(maskNonStyleRegions(readFileSync23(join27(opts.projectRoot, f), "utf8"), f)));
+      touchFormText2.body ||= found.body;
+      touchFormText2.control ||= found.control;
+    } catch {
+    }
+  }
   const withStyles = files.filter((f) => {
     try {
       const src = readFileSync23(join27(opts.projectRoot, f), "utf8");
@@ -5225,7 +5270,7 @@ function check(opts) {
     }
   }).length;
   const resolvedMode = resolveMode(opts.projectRoot);
-  const detected = runChecks(opts.projectRoot, files, index, tokens, bucketFilter, projectParticipates, resolvedMode, projectResponsive, viewportFitCover, projectMenuToggle, declaredProperties);
+  const detected = runChecks(opts.projectRoot, files, index, tokens, bucketFilter, projectParticipates, resolvedMode, projectResponsive, viewportFitCover, projectMenuToggle, declaredProperties, touchFormText2);
   const TOKEN_RULE = {
     "--text-prose": "B-75",
     "--size-touch-target": "E-51"
@@ -5284,7 +5329,7 @@ function check(opts) {
 }
 
 // src/commands/init.ts
-import { existsSync as existsSync19, mkdirSync as mkdirSync6, readdirSync as readdirSync11, readFileSync as readFileSync27, rmSync as rmSync2, writeFileSync as writeFileSync4 } from "fs";
+import { existsSync as existsSync19, mkdirSync as mkdirSync6, readdirSync as readdirSync12, readFileSync as readFileSync27, rmSync as rmSync2, writeFileSync as writeFileSync4 } from "fs";
 import { dirname as dirname7, isAbsolute, join as join31, resolve as resolve2, sep as sep3 } from "path";
 
 // src/init/detect.ts
@@ -5878,7 +5923,7 @@ function isCssModule(path) {
 function legacyBrandFile(projectRoot) {
   const dir = join31(projectRoot, ".jig", "tokens");
   if (!existsSync19(dir)) return void 0;
-  const found = readdirSync11(dir).find((f) => /^brand\.[\w.-]+\.css$/.test(f));
+  const found = readdirSync12(dir).find((f) => /^brand\.[\w.-]+\.css$/.test(f));
   return found ? relKey(".jig", "tokens", found) : void 0;
 }
 function isTokenLayerFile(f) {
@@ -6253,7 +6298,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
     const oldDir = currentBrand.split("/").slice(0, -1);
     const oldAbsDir = join31(opts.projectRoot, ...oldDir);
     if (existsSync19(oldAbsDir)) {
-      for (const name of readdirSync11(oldAbsDir).filter((f) => f.endsWith(".css"))) {
+      for (const name of readdirSync12(oldAbsDir).filter((f) => f.endsWith(".css"))) {
         const rel = relKey(...oldDir, name);
         const abs = join31(oldAbsDir, name);
         const state = fileState(opts.projectRoot, abs, rel, initManifest);
@@ -6401,11 +6446,11 @@ function citableIds(packageRoot2) {
 }
 
 // src/probe/check.ts
-import { existsSync as existsSync23, readdirSync as readdirSync14, readFileSync as readFileSync31 } from "fs";
+import { existsSync as existsSync23, readdirSync as readdirSync15, readFileSync as readFileSync31 } from "fs";
 import { join as join37 } from "path";
 
 // src/probe/save.ts
-import { existsSync as existsSync22, mkdirSync as mkdirSync7, readdirSync as readdirSync13, readFileSync as readFileSync30, writeFileSync as writeFileSync5 } from "fs";
+import { existsSync as existsSync22, mkdirSync as mkdirSync7, readdirSync as readdirSync14, readFileSync as readFileSync30, writeFileSync as writeFileSync5 } from "fs";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import { join as join36, relative as relative3, resolve as resolve4, sep as sep5 } from "path";
 
@@ -6633,6 +6678,25 @@ var PROBE_SCRIPT = `(async () => {
     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 });
   }
+  // Rows of one table at different heights, where the taller rows are the
+  // ones holding a control taller than the short rows: a button given the
+  // touch-target floor as its own minimum height. An invoices table had its
+  // "Mark as paid" rows at 65px among 41px ones. Rows that differ because a
+  // cell's text wraps are left alone: only a control can be the cause here.
+  const unevenRows = [];
+  for (const table of [...document.querySelectorAll('table')].slice(0, 20)) {
+    if (unevenRows.length >= 3 || getComputedStyle(table).display !== 'table' || !vis(table)) continue;
+    const rows = [...table.querySelectorAll('tbody tr')].filter((r) => vis(r));
+    if (rows.length < 2) continue;
+    const heights = rows.map((r) => Math.round(r.getBoundingClientRect().height));
+    const short = Math.min(...heights);
+    const control = rows
+      .filter((r, i) => heights[i] > short + 2)
+      .map((r) => [...r.querySelectorAll('button, a[href], input, select')].find((c) => vis(c) && c.getBoundingClientRect().height > short))
+      .find(Boolean);
+    if (!control) continue;
+    unevenRows.push({ table: 'table' + (table.classList[0] ? '.' + table.classList[0] : ''), short, tall: Math.max(...heights), control: control.tagName.toLowerCase() + (control.classList[0] ? '.' + control.classList[0] : ''), controlHeight: Math.round(control.getBoundingClientRect().height) });
+  }
   return JSON.stringify({
     jigProbe: ${PROBE_VERSION},
     url: location.href,
@@ -6642,6 +6706,7 @@ var PROBE_SCRIPT = `(async () => {
     sidewaysScroll: doc.scrollWidth > doc.clientWidth,
     sidewaysBoxes,
     brokenCells,
+    unevenRows,
     bodyFont: getComputedStyle(document.body).fontFamily,
     defaultFont: getComputedStyle(document.body).fontFamily === defaultFont,
     unresolvedTokens: [...unresolved],
@@ -6672,7 +6737,7 @@ var PROBE_SCRIPT = `(async () => {
 
 // src/probe/browser.ts
 import { spawn } from "child_process";
-import { existsSync as existsSync20, mkdtempSync, readdirSync as readdirSync12, rmSync as rmSync3 } from "fs";
+import { existsSync as existsSync20, mkdtempSync, readdirSync as readdirSync13, rmSync as rmSync3 } from "fs";
 import { homedir as homedir2, tmpdir } from "os";
 import { join as join33 } from "path";
 var CHROME_ENV = ["JIG_CHROME", "CHROME_PATH", "PUPPETEER_EXECUTABLE_PATH", "CHROMIUM_PATH"];
@@ -6699,7 +6764,7 @@ function cachedBrowsers() {
   for (const root of roots) {
     let entries;
     try {
-      entries = readdirSync12(root);
+      entries = readdirSync13(root);
     } catch {
       continue;
     }
@@ -7007,7 +7072,7 @@ async function withPageUrl(projectRoot, abs, serve, use) {
 function recordedPage(projectRoot, surface) {
   const dir = join36(projectRoot, ".jig", "critique", surface);
   if (!existsSync22(dir)) return void 0;
-  for (const f of readdirSync13(dir).filter((name) => /^probe-\d+\.json$/.test(name)).sort()) {
+  for (const f of readdirSync14(dir).filter((name) => /^probe-\d+\.json$/.test(name)).sort()) {
     try {
       const probe = JSON.parse(readFileSync30(join36(dir, f), "utf8"));
       if (probe.pageFile && existsSync22(resolve4(projectRoot, probe.pageFile))) return probe.pageFile;
@@ -7025,7 +7090,7 @@ async function ensureProbes(opts) {
   } catch {
     return { recorded: [], reason: `${opts.page} could not be read` };
   }
-  const recorded = existsSync22(dir) ? readdirSync13(dir).map((f) => /^probe-(\d+)\.json$/.exec(f)?.[1]).filter((w) => !!w).map(Number) : [];
+  const recorded = existsSync22(dir) ? readdirSync14(dir).map((f) => /^probe-(\d+)\.json$/.exec(f)?.[1]).filter((w) => !!w).map(Number) : [];
   const widths = [.../* @__PURE__ */ new Set([...probeWidths(PROBE_WIDTHS, declaredSwitches(opts.projectRoot)), ...recorded])].sort((a, b) => a - b);
   const missing = widths.filter((width) => {
     try {
@@ -7058,7 +7123,7 @@ async function ensureProbes(opts) {
 function critiquedSurfaces(projectRoot) {
   const root = join36(projectRoot, ".jig", "critique");
   if (!existsSync22(root)) return [];
-  return readdirSync13(root).filter((surface) => !surface.startsWith("_") && (existsSync22(join36(root, surface, "screen.json")) || existsSync22(join36(root, surface, "code.json"))));
+  return readdirSync14(root).filter((surface) => !surface.startsWith("_") && (existsSync22(join36(root, surface, "screen.json")) || existsSync22(join36(root, surface, "code.json"))));
 }
 
 // src/probe/check.ts
@@ -7082,7 +7147,7 @@ function stampProblem(projectRoot, file, p) {
 function readProbes(projectRoot, dir, errors) {
   if (!existsSync23(dir)) return [];
   const probes = [];
-  for (const f of readdirSync14(dir).filter((n) => /^probe-\d+\.json$/.test(n)).sort()) {
+  for (const f of readdirSync15(dir).filter((n) => /^probe-\d+\.json$/.test(n)).sort()) {
     try {
       const p = JSON.parse(readFileSync31(join37(dir, f), "utf8"));
       if (typeof p.jigProbe === "number" && p.jigProbe < PROBE_VERSION && typeof p.width === "number") {
@@ -7128,6 +7193,9 @@ function probeCheck(probes, verdictOf, indexable = true, mode) {
       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).`);
     }
+    for (const u of p.unevenRows ?? []) {
+      failures.push(`${at(p)}: ${u.table}'s rows are not one height: those holding ${u.control} (${u.controlHeight}px tall) stand ${u.tall}px, the rest ${u.short}px. A button in a row takes the row's height and has no minimum height of its own; on a touch screen the row rises to the touch target instead (P-02, 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.`);
     }
@@ -7205,12 +7273,12 @@ function probeCheck(probes, verdictOf, indexable = true, mode) {
 }
 
 // src/check/spec-shape.ts
-import { existsSync as existsSync24, readdirSync as readdirSync15, statSync as statSync4 } from "fs";
+import { existsSync as existsSync24, readdirSync as readdirSync16, statSync as statSync4 } from "fs";
 import { join as join38 } from "path";
 function newestSpec(projectRoot) {
   const dir = join38(projectRoot, ".jig", "specs");
   if (!existsSync24(dir)) return void 0;
-  const files = readdirSync15(dir).filter((f) => f.endsWith(".md"));
+  const files = readdirSync16(dir).filter((f) => f.endsWith(".md"));
   if (files.length === 0) return void 0;
   const newest = files.map((f) => ({ f, at: statSync4(join38(dir, f)).mtimeMs })).sort((a, b) => b.at - a.at)[0].f;
   return { path: `.jig/specs/${newest}`, slug: newest.replace(/\.spec\.md$|\.md$/, ""), body: readText(join38(dir, newest)) };
@@ -7390,9 +7458,18 @@ function specIndexable(projectRoot, surface) {
   }
   const declared2 = specIndexableField(front);
   if (declared2 === true || declared2 === false) return declared2;
-  const mode = /^\s*mode\s*:\s*(\w+)/im.exec(front)?.[1]?.toLowerCase();
+  const mode = /^\s*mode\s*:\s*(\w+)/im.exec(front)?.[1]?.toLowerCase() ?? projectMode(projectRoot);
   return mode !== "product" && mode !== "operator";
 }
+function projectMode(projectRoot) {
+  try {
+    const config = JSON.parse(readText(join39(projectRoot, "jig.config.json")));
+    const modes = [...new Set((config.surfaces ?? []).map((s) => s?.mode).filter((m) => typeof m === "string"))];
+    return modes.length === 1 ? modes[0].toLowerCase() : void 0;
+  } catch {
+    return void 0;
+  }
+}
 function specNeedsNav(projectRoot, surface) {
   const path = join39(projectRoot, ".jig", "specs", `${surface}.spec.md`);
   if (!existsSync25(path)) return false;
@@ -7599,7 +7676,7 @@ function verifyVerdicts(opts) {
   if (specIndexableField(specFront) === "unreadable") {
     errors.push(`.jig/specs/${opts.surface}.spec.md: \`indexable:\` is neither true nor false, so this review cannot tell whether the page is meant to be found and does not guess. Write \`indexable: true\` or \`indexable: false\`, and put the reason in the spec's body.`);
   } else {
-    const mode = /^\s*mode\s*:\s*["']?(\w+)/im.exec(specFront)?.[1]?.toLowerCase();
+    const mode = /^\s*mode\s*:\s*["']?(\w+)/im.exec(specFront)?.[1]?.toLowerCase() ?? projectMode(opts.projectRoot);
     const probed = probeCheck(probes, verdictOf, specIndexable(opts.projectRoot, opts.surface), mode);
     errors.push(...probed.contradictions);
     const seen = /* @__PURE__ */ new Set();
@@ -7720,7 +7797,7 @@ function sourceChanges(git, from, to) {
 }
 
 // src/commands/gate.ts
-import { existsSync as existsSync28, mkdirSync as mkdirSync8, readdirSync as readdirSync17, readFileSync as readFileSync37, statSync as statSync5, writeFileSync as writeFileSync6 } from "fs";
+import { existsSync as existsSync28, mkdirSync as mkdirSync8, readdirSync as readdirSync18, readFileSync as readFileSync37, statSync as statSync5, writeFileSync as writeFileSync6 } from "fs";
 import { createHash as createHash3 } from "crypto";
 import { join as join44 } from "path";
 
@@ -7897,7 +7974,7 @@ function sizeBlock2(sizes, size) {
 import { execFileSync as execFileSync4 } from "child_process";
 
 // src/commands/ship.ts
-import { existsSync as existsSync26, readdirSync as readdirSync16, readFileSync as readFileSync35 } from "fs";
+import { existsSync as existsSync26, readdirSync as readdirSync17, readFileSync as readFileSync35 } from "fs";
 import { join as join42 } from "path";
 
 // src/commands/seo.ts
@@ -8095,7 +8172,7 @@ function ship(opts) {
   const seoResult = seo({ projectRoot: root });
   const seoErrors = seoResult.findings.filter((f) => f.severity === "error").length;
   const specsDir = join42(root, ".jig", "specs");
-  const surfaces = existsSync26(specsDir) ? readdirSync16(specsDir).filter((f) => f.endsWith(".spec.md") && !f.startsWith("_")).map((f) => f.replace(/\.spec\.md$/, "")).sort() : [];
+  const surfaces = existsSync26(specsDir) ? readdirSync17(specsDir).filter((f) => f.endsWith(".spec.md") && !f.startsWith("_")).map((f) => f.replace(/\.spec\.md$/, "")).sort() : [];
   const pages = surfaces.map((s) => pageStatus(root, s));
   const owed = pages.filter((p) => p.state !== "judged" && p.state !== "in-progress" && p.state !== "superseded");
   const agentFiles = agentFileProblems(root);
@@ -8389,7 +8466,7 @@ function verdictsMtime(dir) {
 function surfacesInPlay(root, command, transcriptPath, surface) {
   const critiqueDir = join44(root, ".jig", "critique");
   if (!existsSync28(critiqueDir)) return [];
-  const all = readdirSync17(critiqueDir, { withFileTypes: true }).filter((d) => d.isDirectory() && !d.name.startsWith("_") && !d.name.startsWith(".")).map((d) => d.name);
+  const all = readdirSync18(critiqueDir, { withFileTypes: true }).filter((d) => d.isDirectory() && !d.name.startsWith("_") && !d.name.startsWith(".")).map((d) => d.name);
   const start = sessionStart(transcriptPath);
   if (start === void 0) return all;
   const current = command === "critique" || command === "tweak" ? specFor(root, surface)?.slug : void 0;
@@ -8565,7 +8642,7 @@ function commandProblems(root, command, surface, start, owner = "") {
   }
   if (command === "critique") {
     const dir = join44(root, ".jig", "critique");
-    const surfaces = existsSync28(dir) ? readdirSync17(dir).filter((s) => existsSync28(join44(dir, s, "screen.json")) || existsSync28(join44(dir, s, "code.json"))) : [];
+    const surfaces = existsSync28(dir) ? readdirSync18(dir).filter((s) => existsSync28(join44(dir, s, "screen.json")) || existsSync28(join44(dir, s, "code.json"))) : [];
     for (const surface2 of surfaces) {
       const v = verifyVerdicts({ projectRoot: root, surface: surface2 });
       if (v.ok && v.decisions.state !== "ran" && v.decisions.total > 0) {
@@ -8911,7 +8988,7 @@ function verdictGuard(root, command, inPlay) {
   const critiqueDir = join44(root, ".jig", "critique");
   if (!existsSync28(critiqueDir)) return [];
   const problems = [];
-  for (const surface of readdirSync17(critiqueDir)) {
+  for (const surface of readdirSync18(critiqueDir)) {
     if (surface.startsWith("_")) continue;
     const dir = join44(critiqueDir, surface);
     const now = verdictChecksum(dir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.26.1",
+  "version": "0.26.3",
   "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/00-anti-patterns.md

@@ -366,7 +366,7 @@ Without `viewport-fit=cover`, the browser keeps the page inside the safe area on
 ### D-115 The page scrolls sideways on a phone
 ❌ At phone width the whole page is wider than the screen — a data table, a long URL, an image, a `width: 100vw` element or a fixed-width block pushes it out, and the reader can drag the page left and right
 ✅ At every width, nothing makes the page wider than the screen. Content that is genuinely wider — a data table, a code block — scrolls inside its own container with a visible edge (`E-62`), and the page itself never does. `editorial` goes further and allows no scrolling regions on mobile at all (`M-01`): there a code block wraps its long lines and a wide table stacks its rows (`L-01`, step 6).
-Judge it on a render, not in the source: at 360px, `document.documentElement.scrollWidth` must not be greater than `document.documentElement.clientWidth`. The usual causes are each one line to fix — `overflow-wrap: anywhere` on text the author does not control, `max-width: 100%` on media, `width: 100%` instead of `100vw` (which includes the scrollbar), and a wrapper with `overflow-x: auto` around anything tabular.
+Judge it on a render, not in the source: at 360px, `document.documentElement.scrollWidth` must not be greater than `document.documentElement.clientWidth`. The usual causes are each one line to fix — `overflow-wrap: anywhere` on text the author does not control, `max-width: 100%` on media, `width: 100%` instead of `100vw` (which includes the scrollbar), and a wrapper with `overflow-x: auto` around anything tabular. That wrapper also takes `position: relative`, or a visually hidden label inside it, positioned absolutely, lays itself out against the page and widens it.
 A page that scrolls sideways is not merely untidy. The reader's vertical swipes drift, the page slides half off the screen, and every line of text needs re-centring before it can be read.
 
 ## E. States and interaction
@@ -556,8 +556,8 @@ Where people must *browse* to decide, split the list into two dependent fields
 ---
 
 ### F-113 Form text small enough to make the phone zoom
-❌ An input, select or textarea whose text is below 16px — including `operator`'s 14px `--text-body`, and `--text-caption` in every mode
-✅ At least 16px on touch screens. To keep a denser size on desktop, raise it only where it matters: `@media (pointer: coarse) { input, select, textarea { font-size: max(16px, var(--text-body)); } }`
+❌ An input, select or textarea whose text is below 16px — including `--text-caption` in every mode, a size written as `font: inherit` under a 14px body, and `operator`'s 14px `--text-body` where the tokens do not raise it on touch screens
+✅ At least 16px on touch screens. `operator`'s tokens raise `--text-body` to 16px under a coarse pointer, so a control set in the body size, or inheriting it, is safe there. To keep any other denser size on desktop, raise it only where it matters: `@media (pointer: coarse) { input, select, textarea { font-size: max(16px, var(--text-body)); } }`
 iOS Safari zooms the whole page when a field whose text is below 16px takes focus, and it does not zoom back out when the field loses it. The reader is left with a form wider than the screen, scrolling sideways to find the next field (`D-115`).
 Setting `maximum-scale=1` on the viewport to stop it is not the fix. That disables pinch zoom for everyone, which is an accessibility failure in its own right.
 

package/rules/03-patterns.md

@@ -53,7 +53,16 @@ Four numbers, and most button designs in the wild fail at least one:
 | Button **shape** — fill or border — against its background | **3:1** |
 | Button **text** against the button | **4.5:1** |
 | Two buttons sharing a style, distinguished only by contrast | **3:1 between them** |
-| Hit area | `--size-touch-target` — **48×48px** floor |
+| Hit area | `--size-touch-target` — **48×48px** floor, except inside a table row (below) |
+
+**Inside a table row, a button takes the row's height.** A dense row is shorter
+than the floor, and a button given `min-height: var(--size-touch-target)` there
+stretches the rows that hold it and not the rest: an invoices table had its
+"Mark as paid" rows at 65px among 41px ones, twice. Size it to `--size-control`
+and never give it a minimum height of its own. On a touch screen the row itself
+rises to `--size-touch-target` (the mode files do it under a coarse pointer), so
+a finger still gets the floor. The render probe reports rows made uneven this
+way.
 
 A secondary button's fill or border is **not decorative**. It is the only thing identifying the element as a button, so it carries the 3:1 non-text requirement (`02-tokens.md`). Strip it and you have coloured text.
 
@@ -285,6 +294,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.
+- Every row is one height. A button or link in a row takes the row's height and has no minimum height of its own (see the Button pattern, Hit area).
 - 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`).
@@ -568,7 +578,11 @@ everything else follows from.
 5. **Content that is genuinely wider scrolls inside itself, except in
    `editorial` on a phone.** A code block, a wide table, a long identifier: its
    own container scrolls with a visible edge (`E-62`), keeps its type size, and
-   the page never scrolls sideways (`D-115`). `editorial` allows no scrolling
+   the page never scrolls sideways (`D-115`). The container is
+   `position: relative` as well as `overflow-x: auto`: text hidden for screen
+   readers in a cell is positioned absolutely, against the nearest positioned
+   ancestor, and without one it escapes the container and widens the page,
+   though nothing shows. `editorial` allows no scrolling
    region on mobile (`M-01`), so there each one reflows instead:
    - **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

package/tokens/mode.operator.css

@@ -107,7 +107,13 @@
    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. */
+   table is one height, and here the tokens make that height the right one.
+   Body text rises to 16px with it: an input, select or textarea set in 14px
+   makes iOS zoom the page on focus (`F-113`), and a form control's text is
+   body text, set by this token or inherited from it. */
 @media (pointer: coarse) {
-  :root { --size-row: var(--size-touch-target); --size-row-compact: var(--size-touch-target); }
+  :root {
+    --size-row: var(--size-touch-target); --size-row-compact: var(--size-touch-target);
+    --text-body: 16px;
+  }
 }