jig-ui 0.17.3 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # Changelog
 
+## 0.18.1
+
+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.
+
+### Fixed
+
+- **The probe reads a `<details>` menu the way the browser shows it.** On
+  jig-site's Reference it reported a working phone menu as broken, and
+  `jig verdicts` refused a correct `P-14` verdict on the strength of it. Four
+  defects, each now covered by a browser test:
+  - Where the banner's menu is hidden at a width, the probe took the next
+    disclosure in some other `<nav>` (a docs rail's section tree) as the menu,
+    and reported "a menu button beside links that already show". A menu the
+    page names, or one in its banner, is now the only candidate once it exists.
+  - A closed `<details>` hides its content with `content-visibility` in
+    Chromium, which still gives its links boxes, so the closed menu's links
+    counted as showing and opening it "showed no more links". Visibility now
+    also asks `checkVisibility()`.
+  - A label swapped with CSS ("Menu" to "Close") keeps both words in
+    `textContent`; the label is now read from the rendered text.
+  - A native `<summary>` has no `aria-expanded` attribute; its expanded state
+    is its `<details>`'s `open`, which is what assistive technology is given.
+
+  Probe files are now version 6, so earlier ones are re-recorded.
+
+- **`A-05` catches an arrow that turns into an emoji.** ↔ ↕ ↖ ↗ ↘ ↙ ↩ ↪ ▶ ◀
+  are text by default but have an emoji form, and the detector skipped the
+  whole arrow block so prose arrows would not fire. jig-site marked its
+  external links with `<span aria-hidden="true">↗</span>`, which some platforms
+  draw as a colour emoji, and `check --all` and three critiques passed it. One
+  of these characters now fires when it stands alone as an icon (the whole
+  content of an element, or a pseudo-element's `content`) without U+FE0E. The
+  same arrow in a sentence still does not.
+
+## 0.18.0
+
+A page's frame gets tokens, a project gets a place to record where its layout
+switches, and keyboard access a rule requires fits every script budget. All of
+it found building jig-site's header and Reference with the full loop.
+
+### Added
+
+- **Keyboard access a rule requires does not count against a script budget.**
+  `P-14` requires `Escape` to close an open menu, and `editorial`'s budget was
+  0 KB, with `<details>` as the menu, which cannot do it. No editorial page
+  could satisfy both, and a real site's home and not-found pages kept a menu a
+  keyboard could not dismiss. `M-01` now allows, in every mode, a few lines
+  under 1 KB whose only job is keyboard behaviour a rule asks for and the
+  browser does not give, with the rule named in a comment. `P-14` carries the
+  six lines for `Escape`.
+- **Layout sizes: `--size-container`, `--size-rail`, `--size-header`.** Every
+  mode now sizes a page's frame, not only what is inside it. Building one site
+  with the full loop, four gaps turned out to be one: no token for a page's
+  maximum width, a rail's width, or a fixed header's height. The site made up
+  its own, one of them a raw pixel value. The container is 1280px in every
+  mode, because it is not density. A rail is 288, 256 or 240px, sized to hold
+  labels at the mode's type size. The header is `--size-touch-target` plus
+  `--border-width-hairline`. See T-04.
+- **Where a layout switches is measured and recorded.** Jig still defines no
+  breakpoint, and the four judged widths are checkpoints, not places the CSS
+  changes. T-04 now says how a project records a width it measured:
+  `--breakpoint-<what switches>` in its own layer, with the measurement
+  beside it.
+- **`jig probe --run` measures either side of every declared switch.** A switch
+  falls between the judged widths by design, and a range nobody measured is
+  where a layout breaks: a real site's three-column frame appeared at 1216px,
+  and 1024 to 1215 still got the phone arrangement. The probe now also records
+  one pixel before and at each `--breakpoint-*` the project declares, and the
+  gate's refresh keeps those probes current too.
+
 ## 0.17.3
 
 Three defects found building jig-site's header with the full loop.

package/dist/index.js

@@ -2,9 +2,9 @@
 
 // src/index.ts
 import { Command } from "commander";
-import { readFileSync as readFileSync32 } from "fs";
+import { readFileSync as readFileSync33 } from "fs";
 import { homedir as homedir2 } from "os";
-import { join as join39 } from "path";
+import { join as join40 } from "path";
 
 // src/paths.ts
 import { existsSync } from "fs";
@@ -2265,6 +2265,11 @@ function maskProseComments(raw) {
 // src/check/detectors/emoji-icon.ts
 var EMOJI_RE = /[\u{1F300}-\u{1FAFF}\u{1F000}-\u{1F2FF}\u{2600}-\u{27BF}\u{2B00}-\u{2BFF}\u{FE0F}]/gu;
 var TEXTUAL = /* @__PURE__ */ new Set(["\u2192", "\u2190", "\u2191", "\u2193", "\u2194", "\u21D2", "\u21D0", "\u2122", "\u2713", "\u2717", "\u2212", "\u2217", "\u2318", "\u2325", "\u23CE"]);
+var EMOJI_CAPABLE = "\\u2194-\\u2199\\u21A9\\u21AA\\u25B6\\u25C0";
+var LONE_GLYPH = new RegExp(
+  `>\\s*([${EMOJI_CAPABLE}])(?!\\uFE0E)\\s*<|content\\s*:\\s*["']([${EMOJI_CAPABLE}])(?!\\uFE0E)["']`,
+  "gu"
+);
 var emojiIcon = {
   name: "emoji-icon",
   appliesTo: (file) => isStyleBearing(file),
@@ -2289,6 +2294,22 @@ var emojiIcon = {
         )
       );
     }
+    for (const m of masked.matchAll(LONE_GLYPH)) {
+      const glyph = m[1] ?? m[2];
+      const line = masked.slice(0, m.index + m[0].indexOf(glyph)).split("\n").length;
+      if (seen.has(line)) continue;
+      seen.add(line);
+      findings.push(
+        mkFinding(
+          ctx,
+          "emoji-icon",
+          file,
+          line,
+          `A character with an emoji form used as an icon (${glyph}). Standing alone, it renders as a colour emoji on some platforms. Use an icon set, or words.`,
+          lines[line - 1] ?? ""
+        )
+      );
+    }
     return findings;
   }
 };
@@ -5652,8 +5673,8 @@ Could not write to ${wireTarget}: ${err.message}`);
 }
 
 // src/commands/verdicts.ts
-import { existsSync as existsSync23, readFileSync as readFileSync29 } from "fs";
-import { join as join36, resolve as resolve5 } from "path";
+import { existsSync as existsSync23, readFileSync as readFileSync30 } from "fs";
+import { join as join37, resolve as resolve5 } from "path";
 
 // src/rules/citations.ts
 import { join as join29 } from "path";
@@ -5667,19 +5688,22 @@ function citableIds(packageRoot2) {
 }
 
 // src/probe/check.ts
-import { existsSync as existsSync20, readdirSync as readdirSync13, readFileSync as readFileSync26 } from "fs";
-import { join as join33 } from "path";
+import { existsSync as existsSync20, readdirSync as readdirSync13, readFileSync as readFileSync27 } from "fs";
+import { join as join34 } from "path";
 
 // src/probe/save.ts
-import { existsSync as existsSync19, mkdirSync as mkdirSync7, readdirSync as readdirSync12, readFileSync as readFileSync25, writeFileSync as writeFileSync6 } from "fs";
+import { existsSync as existsSync19, mkdirSync as mkdirSync7, readdirSync as readdirSync12, readFileSync as readFileSync26, writeFileSync as writeFileSync6 } from "fs";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { join as join32, relative as relative3, resolve as resolve4, sep as sep5 } from "path";
+import { join as join33, relative as relative3, resolve as resolve4, sep as sep5 } from "path";
 
 // src/probe/script.ts
-var PROBE_VERSION = 5;
+var PROBE_VERSION = 6;
 var PROBE_SCRIPT = `(async () => {
   const doc = document.documentElement;
-  const vis = (e) => { const r = e.getBoundingClientRect(); const s = getComputedStyle(e); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; };
+  // checkVisibility also sees content a closed <details> hides: Chromium hides
+  // it with content-visibility, which still gives its links real boxes, so a
+  // closed menu counted as open and an opened one showed "no more links".
+  const vis = (e) => { const r = e.getBoundingClientRect(); const s = getComputedStyle(e); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none' && (!e.checkVisibility || e.checkVisibility()); };
   const probe = document.createElement('div');
   probe.style.all = 'initial';
   document.body.appendChild(probe);
@@ -5772,19 +5796,32 @@ var PROBE_SCRIPT = `(async () => {
   const inChrome = (b) => !!b.closest('header, [role=banner]') ||
     (!!b.closest('nav, [role=navigation]') && !b.closest('main, article, aside, [role=main]'));
   const named = (b) => /\b(menu|navigation)\b/i.test((b.getAttribute('aria-label') || '') + ' ' + b.textContent);
-  const toggle = [...document.querySelectorAll('button, summary, [role=button]')].find((b) => vis(b) &&
-    (named(b) || (inChrome(b) && (b.tagName === 'SUMMARY' || b.hasAttribute('aria-expanded') || b.hasAttribute('aria-controls')))));
+  const candidates = [...document.querySelectorAll('button, summary, [role=button]')].filter((b) =>
+    named(b) || (inChrome(b) && (b.tagName === 'SUMMARY' || b.hasAttribute('aria-expanded') || b.hasAttribute('aria-controls'))));
+  // A menu the page names, or one in its banner, is the menu. Where it exists
+  // but is hidden at this width, the links show instead and there is no menu
+  // here; the next disclosure in some other <nav> (a docs rail's tree) is not
+  // a stand-in for it.
+  const primary = (b) => named(b) || !!b.closest('header, [role=banner]');
+  const pool = candidates.some(primary) ? candidates.filter(primary) : candidates;
+  const toggle = pool.find(vis);
   let menu = null;
   if (toggle) {
-    const name = () => ((toggle.getAttribute('aria-label') || '') + ' ' + (toggle.textContent || '')).replace(/\\s+/g, ' ').trim();
+    // The label as rendered: a menu that swaps "Menu" for "Close" with CSS keeps
+    // both words in its textContent at all times, so only innerText sees the swap.
+    const name = () => ((toggle.getAttribute('aria-label') || '') + ' ' + (toggle.innerText || toggle.textContent || '')).replace(/\\s+/g, ' ').trim();
+    // A native <summary> carries no aria-expanded attribute; the browser exposes
+    // its <details>'s open state as the expanded state, which is what counts.
+    const expanded = () => toggle.getAttribute('aria-expanded') ??
+      (toggle.tagName === 'SUMMARY' && toggle.parentElement && toggle.parentElement.tagName === 'DETAILS' ? String(toggle.parentElement.open) : null);
     // Opening is judged by what becomes visible anywhere: a menu panel is often
     // a sibling of the header, not inside it (arm test 3, tw-1).
     const allLinks = () => [...document.querySelectorAll('a')].filter(vis).length;
     const controlled = () => { const id = toggle.getAttribute('aria-controls'); const el = id && document.getElementById(id); return el ? vis(el) : null; };
-    const before = { links: allLinks(), controlled: controlled(), expanded: toggle.getAttribute('aria-expanded'), name: name(), html: toggle.innerHTML };
+    const before = { links: allLinks(), controlled: controlled(), expanded: expanded(), name: name(), html: toggle.innerHTML };
     toggle.click();
     await new Promise((r) => setTimeout(r, 350));
-    const after = { links: allLinks(), controlled: controlled(), expanded: toggle.getAttribute('aria-expanded'), name: name(), htmlChanged: toggle.innerHTML !== before.html };
+    const after = { links: allLinks(), controlled: controlled(), expanded: expanded(), name: name(), htmlChanged: toggle.innerHTML !== before.html };
     toggle.focus();
     toggle.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
     document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
@@ -5794,7 +5831,7 @@ var PROBE_SCRIPT = `(async () => {
       expandedBefore: before.expanded, expandedAfter: after.expanded,
       opened: after.links > before.links || (before.controlled === false && after.controlled === true),
       labelChanged: after.name !== before.name || after.htmlChanged,
-      escapeCloses: toggle.getAttribute('aria-expanded') !== 'true' && allLinks() <= before.links,
+      escapeCloses: expanded() !== 'true' && allLinks() <= before.links,
       focusReturned: document.activeElement === toggle,
     };
   }
@@ -6055,6 +6092,31 @@ async function serveDirectory(dir) {
   };
 }
 
+// src/probe/switches.ts
+import { readFileSync as readFileSync25 } from "fs";
+import { join as join32 } from "path";
+var DECLARATION = /--breakpoint-([a-z0-9-]+)\s*:\s*(\d+(?:\.\d+)?)(px|rem)\b/g;
+function declaredSwitches(projectRoot) {
+  const found = /* @__PURE__ */ new Map();
+  for (const file of wholeRepoFiles(projectRoot)) {
+    if (!/\.(css|scss|astro|vue|svelte|html)$/i.test(file)) continue;
+    let text;
+    try {
+      text = readFileSync25(join32(projectRoot, file), "utf8");
+    } catch {
+      continue;
+    }
+    for (const m of text.matchAll(DECLARATION)) {
+      const px2 = Math.round(m[3] === "rem" ? Number(m[2]) * 16 : Number(m[2]));
+      if (px2 > 0) found.set(`${m[1]}:${px2}`, { name: m[1], px: px2 });
+    }
+  }
+  return [...found.values()].sort((a, b) => a.px - b.px);
+}
+function probeWidths(base, switches) {
+  return [.../* @__PURE__ */ new Set([...base, ...switches.flatMap((s) => [s.px - 1, s.px])])].sort((a, b) => a - b);
+}
+
 // src/probe/save.ts
 function saveProbe(opts) {
   let probe;
@@ -6075,11 +6137,11 @@ function saveProbe(opts) {
   }
   probe.pageFile = relative3(opts.projectRoot, page).split("\\").join("/");
   if (opts.serveRoot) probe.serveRoot = relative3(opts.projectRoot, resolve4(opts.projectRoot, opts.serveRoot)).split("\\").join("/") || ".";
-  probe.pageChecksum = checksum(readFileSync25(page, "utf8"));
+  probe.pageChecksum = checksum(readFileSync26(page, "utf8"));
   probe.recordedAt = (/* @__PURE__ */ new Date()).toISOString();
-  const dir = join32(opts.projectRoot, ".jig", "critique", opts.surface);
+  const dir = join33(opts.projectRoot, ".jig", "critique", opts.surface);
   mkdirSync7(dir, { recursive: true });
-  const path = join32(dir, `probe-${width}.json`);
+  const path = join33(dir, `probe-${width}.json`);
   writeFileSync6(path, JSON.stringify(probe), "utf8");
   return { path: `.jig/critique/${opts.surface}/probe-${width}.json`, width, page: probe.pageFile };
 }
@@ -6105,8 +6167,9 @@ async function runAndSaveProbes(opts) {
   const abs = resolve4(opts.projectRoot, opts.page);
   if (!existsSync19(abs)) throw new Error(`${opts.page} does not exist, so there is nothing to render.`);
   const saved = [];
+  const widths = opts.widths ?? probeWidths(PROBE_WIDTHS, declaredSwitches(opts.projectRoot));
   await withPageUrl(opts.projectRoot, abs, opts.serve, async (url) => {
-    for (const width of opts.widths ?? PROBE_WIDTHS) {
+    for (const width of widths) {
       const json = await runProbe({ url, width });
       saved.push(saveProbe({ projectRoot: opts.projectRoot, surface: opts.surface, json, page: abs, serveRoot: opts.serve }));
     }
@@ -6127,17 +6190,19 @@ async function withPageUrl(projectRoot, abs, serve, use) {
   }
 }
 async function ensureProbes(opts) {
-  const dir = join32(opts.projectRoot, ".jig", "critique", opts.surface);
+  const dir = join33(opts.projectRoot, ".jig", "critique", opts.surface);
   const abs = resolve4(opts.projectRoot, opts.page);
   let current;
   try {
-    current = checksum(readFileSync25(abs, "utf8"));
+    current = checksum(readFileSync26(abs, "utf8"));
   } catch {
     return { recorded: [], reason: `${opts.page} could not be read` };
   }
-  const missing = PROBE_WIDTHS.filter((width) => {
+  const recorded = existsSync19(dir) ? readdirSync12(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 {
-      const probe = JSON.parse(readFileSync25(join32(dir, `probe-${width}.json`), "utf8"));
+      const probe = JSON.parse(readFileSync26(join33(dir, `probe-${width}.json`), "utf8"));
       return probe.jigProbe !== PROBE_VERSION || probe.pageChecksum !== current;
     } catch {
       return true;
@@ -6146,9 +6211,9 @@ async function ensureProbes(opts) {
   if (missing.length === 0) return { recorded: [] };
   if (!findChrome()) return { recorded: [], reason: "no browser on this machine" };
   let serve;
-  for (const width of PROBE_WIDTHS) {
+  for (const width of widths) {
     try {
-      const probe = JSON.parse(readFileSync25(join32(dir, `probe-${width}.json`), "utf8"));
+      const probe = JSON.parse(readFileSync26(join33(dir, `probe-${width}.json`), "utf8"));
       if (probe.serveRoot) {
         serve = probe.serveRoot;
         break;
@@ -6164,9 +6229,9 @@ async function ensureProbes(opts) {
   return { recorded: missing };
 }
 function critiquedSurfaces(projectRoot) {
-  const root = join32(projectRoot, ".jig", "critique");
+  const root = join33(projectRoot, ".jig", "critique");
   if (!existsSync19(root)) return [];
-  return readdirSync12(root).filter((surface) => !surface.startsWith("_") && (existsSync19(join32(root, surface, "screen.json")) || existsSync19(join32(root, surface, "code.json"))));
+  return readdirSync12(root).filter((surface) => !surface.startsWith("_") && (existsSync19(join33(root, surface, "screen.json")) || existsSync19(join33(root, surface, "code.json"))));
 }
 
 // src/probe/check.ts
@@ -6178,7 +6243,7 @@ function stampProblem(projectRoot, file, p) {
   if (!page) return `${file} names a page outside this project (${p.serveRoot ? p.pageFile : p.url ?? "no url"}).`;
   let current;
   try {
-    current = readFileSync26(page, "utf8");
+    current = readFileSync27(page, "utf8");
   } catch {
     return `${file} was taken on ${p.pageFile}, which no longer exists.`;
   }
@@ -6192,7 +6257,7 @@ function readProbes(projectRoot, dir, errors) {
   const probes = [];
   for (const f of readdirSync13(dir).filter((n) => /^probe-\d+\.json$/.test(n)).sort()) {
     try {
-      const p = JSON.parse(readFileSync26(join33(dir, f), "utf8"));
+      const p = JSON.parse(readFileSync27(join34(dir, f), "utf8"));
       if (p.jigProbe !== PROBE_VERSION || typeof p.width !== "number") {
         errors.push(`${f} is not output of \`jig probe\` (version ${PROBE_VERSION}). Re-run the probe; do not write it by hand.`);
         continue;
@@ -6284,19 +6349,19 @@ function probeContradictions(probes, verdictOf, indexable = true) {
 }
 
 // src/check/decisions.ts
-import { existsSync as existsSync21, readFileSync as readFileSync27 } from "fs";
-import { join as join34, posix as posix3 } from "path";
+import { existsSync as existsSync21, readFileSync as readFileSync28 } from "fs";
+import { join as join35, posix as posix3 } from "path";
 var HEADING3 = /^(#{2,3})\s+(.+?)\s*$/gm;
 var NOT_A_DECISION = /^(unresolved|open questions?|undecided|contents?|index)$/i;
 function decisionsFile(projectRoot) {
   const candidates = ["jig/DECISIONS.md", "DECISIONS.md", "src/jig/DECISIONS.md", "src/styles/jig/DECISIONS.md", ".jig/DECISIONS.md"];
   try {
-    const brand = JSON.parse(readFileSync27(join34(projectRoot, "jig.config.json"), "utf8")).brand;
+    const brand = JSON.parse(readFileSync28(join35(projectRoot, "jig.config.json"), "utf8")).brand;
     if (typeof brand === "string" && brand.includes("/")) candidates.unshift(`${posix3.dirname(brand.replace(/^\.\//, ""))}/DECISIONS.md`);
   } catch {
   }
   for (const candidate of candidates) {
-    if (existsSync21(join34(projectRoot, candidate))) return candidate;
+    if (existsSync21(join35(projectRoot, candidate))) return candidate;
   }
   return void 0;
 }
@@ -6305,7 +6370,7 @@ function decisionNames(projectRoot) {
   if (!path) return [];
   let body;
   try {
-    body = readFileSync27(join34(projectRoot, path), "utf8");
+    body = readFileSync28(join35(projectRoot, path), "utf8");
   } catch {
     return [];
   }
@@ -6319,15 +6384,15 @@ function decisionNames(projectRoot) {
 }
 
 // src/check/spec-shape.ts
-import { existsSync as existsSync22, readFileSync as readFileSync28, readdirSync as readdirSync14, statSync as statSync3 } from "fs";
-import { join as join35 } from "path";
+import { existsSync as existsSync22, readFileSync as readFileSync29, readdirSync as readdirSync14, statSync as statSync3 } from "fs";
+import { join as join36 } from "path";
 function newestSpec(projectRoot) {
-  const dir = join35(projectRoot, ".jig", "specs");
+  const dir = join36(projectRoot, ".jig", "specs");
   if (!existsSync22(dir)) return void 0;
   const files = readdirSync14(dir).filter((f) => f.endsWith(".md"));
   if (files.length === 0) return void 0;
-  const newest = files.map((f) => ({ f, at: statSync3(join35(dir, f)).mtimeMs })).sort((a, b) => b.at - a.at)[0].f;
-  return { path: `.jig/specs/${newest}`, slug: newest.replace(/\.spec\.md$|\.md$/, ""), body: readFileSync28(join35(dir, newest), "utf8") };
+  const newest = files.map((f) => ({ f, at: statSync3(join36(dir, f)).mtimeMs })).sort((a, b) => b.at - a.at)[0].f;
+  return { path: `.jig/specs/${newest}`, slug: newest.replace(/\.spec\.md$|\.md$/, ""), body: readFileSync29(join36(dir, newest), "utf8") };
 }
 function specProblems(spec) {
   const parts = spec.body.split(/^---\s*$/m);
@@ -6410,17 +6475,17 @@ var ABSENCE = /\b(rule (not found|does not exist)|context unavailable|cannot (fi
 function readJson(path, errors) {
   if (!existsSync23(path)) return null;
   try {
-    return JSON.parse(readFileSync29(path, "utf8"));
+    return JSON.parse(readFileSync30(path, "utf8"));
   } catch (e) {
     errors.push(`${path}: not valid JSON (${e.message})`);
     return {};
   }
 }
 function specIndexable(projectRoot, surface) {
-  const path = join36(projectRoot, ".jig", "specs", `${surface}.spec.md`);
+  const path = join37(projectRoot, ".jig", "specs", `${surface}.spec.md`);
   let front = "";
   try {
-    front = readFileSync29(path, "utf8").split(/^---\s*$/m)[1] ?? "";
+    front = readFileSync30(path, "utf8").split(/^---\s*$/m)[1] ?? "";
   } catch {
   }
   const declared = specIndexableField(front);
@@ -6429,9 +6494,9 @@ function specIndexable(projectRoot, surface) {
   return mode !== "product" && mode !== "operator";
 }
 function specNeedsNav(projectRoot, surface) {
-  const path = join36(projectRoot, ".jig", "specs", `${surface}.spec.md`);
+  const path = join37(projectRoot, ".jig", "specs", `${surface}.spec.md`);
   if (!existsSync23(path)) return false;
-  const front = readFileSync29(path, "utf8").split(/^---\s*$/m)[1] ?? "";
+  const front = readFileSync30(path, "utf8").split(/^---\s*$/m)[1] ?? "";
   const navField = [...front.matchAll(/^\s*nav:\s*(.+)$/gim)].some((m) => !/^\s*(none|n\/a|-)\b/i.test(m[1]));
   const navRegion = /^\s*-\s*(nav|navigation)\s*:/im.test(front);
   return navField || navRegion;
@@ -6482,7 +6547,7 @@ function checkArm(name, file, required, otherPass, extraAllowed, extraRequired,
 function checkDecisions(projectRoot, dir, errors) {
   const required = decisionNames(projectRoot);
   if (required.length === 0) return { state: "ran", judged: 0, total: 0, findings: 0 };
-  const file = readJson(join36(dir, "decisions.json"), errors);
+  const file = readJson(join37(dir, "decisions.json"), errors);
   if (!file) {
     errors.push(
       `decisions.json is missing. Every decision in DECISIONS.md is judged against the built page, one verdict each: ${required.slice(0, 4).join(", ")}${required.length > 4 ? `, and ${required.length - 4} more` : ""}. A page can satisfy every rule and still break what this project decided.`
@@ -6527,7 +6592,7 @@ function checkDecisions(projectRoot, dir, errors) {
 function verifyVerdicts(opts) {
   const root = opts.packageRoot ?? assetRoot();
   const errors = [];
-  const index = JSON.parse(readFileSync29(join36(root, "rules.index.json"), "utf8"));
+  const index = JSON.parse(readFileSync30(join37(root, "rules.index.json"), "utf8"));
   const judgment = index.filter((r) => r.bucket === "judgment" || r.bucket === "hybrid" && r.pass !== void 0);
   const screenIds = judgment.filter((r) => r.pass === "screen").map((r) => r.id);
   const codeIds = judgment.filter((r) => r.pass === "code").map((r) => r.id);
@@ -6536,9 +6601,9 @@ function verifyVerdicts(opts) {
     ...judgment.map((r) => [r.id, r.pass ?? ""])
   ]);
   const specIds = new Set(citableIds(root).filter((id) => /^[PMLRT]-\d+$/.test(id)));
-  const dir = join36(opts.projectRoot, ".jig", "critique", opts.surface);
-  const screenFile = readJson(join36(dir, "screen.json"), errors);
-  const codeFile = readJson(join36(dir, "code.json"), errors);
+  const dir = join37(opts.projectRoot, ".jig", "critique", opts.surface);
+  const screenFile = readJson(join37(dir, "screen.json"), errors);
+  const codeFile = readJson(join37(dir, "code.json"), errors);
   const screenExtraRequired = specNeedsNav(opts.projectRoot, opts.surface) ? ["P-14"] : [];
   const screen = checkArm("screen", screenFile, screenIds, passOf, specIds, screenExtraRequired, errors);
   const code = checkArm("code", codeFile, codeIds, passOf, specIds, [], errors);
@@ -6566,7 +6631,7 @@ function verifyVerdicts(opts) {
   };
   let specFront = "";
   try {
-    specFront = readFileSync29(join36(opts.projectRoot, ".jig", "specs", `${opts.surface}.spec.md`), "utf8").split(/^---\s*$/m)[1] ?? "";
+    specFront = readFileSync30(join37(opts.projectRoot, ".jig", "specs", `${opts.surface}.spec.md`), "utf8").split(/^---\s*$/m)[1] ?? "";
   } catch {
   }
   if (specIndexableField(specFront) === "unreadable") {
@@ -6582,15 +6647,15 @@ function verifyVerdicts(opts) {
 }
 
 // src/commands/gate.ts
-import { existsSync as existsSync24, mkdirSync as mkdirSync8, readdirSync as readdirSync15, readFileSync as readFileSync30, statSync as statSync4, writeFileSync as writeFileSync7 } from "fs";
+import { existsSync as existsSync24, mkdirSync as mkdirSync8, readdirSync as readdirSync15, readFileSync as readFileSync31, statSync as statSync4, writeFileSync as writeFileSync7 } from "fs";
 import { createHash as createHash2 } from "crypto";
-import { join as join37 } from "path";
+import { join as join38 } from "path";
 var MAX_BLOCKS = 3;
 function lastJigCommand(transcriptPath) {
   if (!transcriptPath || !existsSync24(transcriptPath)) return void 0;
   let text;
   try {
-    text = readFileSync30(transcriptPath, "utf8");
+    text = readFileSync31(transcriptPath, "utf8");
   } catch {
     return void 0;
   }
@@ -6608,7 +6673,7 @@ function lastAssistantText(transcriptPath) {
   if (!transcriptPath || !existsSync24(transcriptPath)) return void 0;
   let found;
   try {
-    for (const line of readFileSync30(transcriptPath, "utf8").split("\n")) {
+    for (const line of readFileSync31(transcriptPath, "utf8").split("\n")) {
       if (!line.includes('"assistant"')) continue;
       let entry;
       try {
@@ -6634,7 +6699,7 @@ var ASKS_THE_OWNER = /* @__PURE__ */ new Set(["decide", "spec", "mockup"]);
 function sessionStart(transcriptPath) {
   if (!transcriptPath || !existsSync24(transcriptPath)) return void 0;
   try {
-    for (const line of readFileSync30(transcriptPath, "utf8").split("\n")) {
+    for (const line of readFileSync31(transcriptPath, "utf8").split("\n")) {
       const m = /"timestamp"\s*:\s*"([^"]+)"/.exec(line);
       if (m) {
         const t = Date.parse(m[1]);
@@ -6649,20 +6714,20 @@ function verdictsMtime(dir) {
   let newest = 0;
   for (const name of VERDICT_FILES) {
     try {
-      newest = Math.max(newest, statSync4(join37(dir, name)).mtimeMs);
+      newest = Math.max(newest, statSync4(join38(dir, name)).mtimeMs);
     } catch {
     }
   }
   return newest;
 }
 function surfacesInPlay(root, command, transcriptPath) {
-  const critiqueDir = join37(root, ".jig", "critique");
+  const critiqueDir = join38(root, ".jig", "critique");
   if (!existsSync24(critiqueDir)) return [];
   const all = readdirSync15(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" ? /^\s*surface\s*:\s*(.+)$/im.exec(newestSpec(root)?.body.split(/^---\s*$/m)[1] ?? "")?.[1]?.trim().replace(/^["']|["']$/g, "") : void 0;
-  return all.filter((s) => s === current || verdictsMtime(join37(critiqueDir, s)) >= start - 1e3);
+  return all.filter((s) => s === current || verdictsMtime(join38(critiqueDir, s)) >= start - 1e3);
 }
 function commandProblems(root, command) {
   const problems = [];
@@ -6671,7 +6736,7 @@ function commandProblems(root, command) {
     const found = decisionsFile(root);
     if (!found) problems.push("decide wrote no DECISIONS.md beside the token layer.");
     else {
-      const body = readFileSync30(join37(root, found), "utf8");
+      const body = readFileSync31(join38(root, found), "utf8");
       if (!/^##\s+Unresolved\s*$/im.test(body)) {
         problems.push("DECISIONS.md has no `## Unresolved` section. Round 3 asks by name what is still undecided; write what the owner named, or `None named by the owner.`");
       }
@@ -6692,13 +6757,13 @@ function commandProblems(root, command) {
     const at = /^\s*mockup_at\s*:\s*(.+)$/im.exec(front)?.[1]?.trim().replace(/^["']|["']$/g, "") ?? "";
     if (/^approved/i.test(mockup)) {
       if (!at) problems.push(`${spec.path}: \`mockup_at:\` is empty. Record where the approved drawing is.`);
-      else if (!/^https?:/i.test(at) && !existsSync24(join37(root, at))) problems.push(`${spec.path}: \`mockup_at: ${at}\` does not exist.`);
+      else if (!/^https?:/i.test(at) && !existsSync24(join38(root, at))) problems.push(`${spec.path}: \`mockup_at: ${at}\` does not exist.`);
       else if (!/^https?:/i.test(at) && !at.startsWith(".jig/mockups/")) problems.push(`The drawing is at ${at}. A mockup lives in .jig/mockups/, outside what check scans and outside what ships.`);
     }
   }
   if (command === "critique") {
-    const dir = join37(root, ".jig", "critique");
-    const surfaces = existsSync24(dir) ? readdirSync15(dir).filter((s) => existsSync24(join37(dir, s, "screen.json")) || existsSync24(join37(dir, s, "code.json"))) : [];
+    const dir = join38(root, ".jig", "critique");
+    const surfaces = existsSync24(dir) ? readdirSync15(dir).filter((s) => existsSync24(join38(dir, s, "screen.json")) || existsSync24(join38(dir, s, "code.json"))) : [];
     for (const surface of surfaces) {
       const v = verifyVerdicts({ projectRoot: root, surface });
       if (v.ok && v.decisions.state !== "ran" && v.decisions.total > 0) {
@@ -6720,13 +6785,13 @@ function surfacePage(projectRoot, surface) {
   const declared = /^\s*surface\s*:\s*(.+)$/im.exec(front)?.[1]?.trim().replace(/^["']|["']$/g, "");
   const candidates = [declared, `${surface}.html`, declared ? `${declared.replace(/^\//, "")}.html` : void 0].filter((c) => !!c && /\.\w+$/.test(c) === (c === declared ? /\.\w+$/.test(c) : true));
   for (const candidate of candidates) {
-    if (candidate && existsSync24(join37(projectRoot, candidate))) return candidate;
+    if (candidate && existsSync24(join38(projectRoot, candidate))) return candidate;
   }
   return void 0;
 }
 function gate(opts) {
   const root = opts.projectRoot;
-  if (!existsSync24(join37(root, "jig.config.json")) && !existsSync24(join37(root, ".jig"))) {
+  if (!existsSync24(join38(root, "jig.config.json")) && !existsSync24(join38(root, ".jig"))) {
     return { block: false, reason: "" };
   }
   const command = lastJigCommand(opts.input.transcript_path);
@@ -6753,11 +6818,11 @@ function gate(opts) {
     }
   }
   problems.push(...verdictGuard(root, command, surfacesInPlay(root, command, opts.input.transcript_path)));
-  const critiqueDir = join37(root, ".jig", "critique");
+  const critiqueDir = join38(root, ".jig", "critique");
   if (existsSync24(critiqueDir)) {
     for (const surface of surfacesInPlay(root, command, opts.input.transcript_path)) {
-      const dir = join37(critiqueDir, surface);
-      if (!existsSync24(join37(dir, "screen.json")) && !existsSync24(join37(dir, "code.json"))) continue;
+      const dir = join38(critiqueDir, surface);
+      if (!existsSync24(join38(dir, "screen.json")) && !existsSync24(join38(dir, "code.json"))) continue;
       const v = verifyVerdicts({ projectRoot: root, surface });
       if (!v.ok) {
         const shown = v.errors.slice(0, 6).map((e) => `  ${e}`);
@@ -6771,10 +6836,10 @@ function gate(opts) {
   }
   const session = opts.input.session_id ?? "unknown";
   const key = `${session}:${createHash2("sha256").update(problems.join("\n")).digest("hex").slice(0, 12)}`;
-  const stateFile = join37(root, ".jig", "gate.json");
+  const stateFile = join38(root, ".jig", "gate.json");
   let state = {};
   try {
-    state = JSON.parse(readFileSync30(stateFile, "utf8"));
+    state = JSON.parse(readFileSync31(stateFile, "utf8"));
   } catch {
   }
   if (problems.length === 0) {
@@ -6808,7 +6873,7 @@ function verdictChecksum(dir) {
   const parts = VERDICT_FILES.map((f) => {
     try {
       return `${f}
-${readFileSync30(join37(dir, f), "utf8")}`;
+${readFileSync31(join38(dir, f), "utf8")}`;
     } catch {
       return "";
     }
@@ -6816,15 +6881,15 @@ ${readFileSync30(join37(dir, f), "utf8")}`;
   return parts.some(Boolean) ? checksum(parts.join("\n")) : void 0;
 }
 function verdictGuard(root, command, inPlay) {
-  const critiqueDir = join37(root, ".jig", "critique");
+  const critiqueDir = join38(root, ".jig", "critique");
   if (!existsSync24(critiqueDir)) return [];
   const problems = [];
   for (const surface of readdirSync15(critiqueDir)) {
     if (surface.startsWith("_")) continue;
-    const dir = join37(critiqueDir, surface);
+    const dir = join38(critiqueDir, surface);
     const now = verdictChecksum(dir);
     if (!now) continue;
-    const lockPath = join37(dir, LOCK);
+    const lockPath = join38(dir, LOCK);
     if (command === "critique" && (!inPlay || inPlay.includes(surface))) {
       try {
         writeFileSync7(lockPath, JSON.stringify({ checksum: now }) + "\n", "utf8");
@@ -6834,7 +6899,7 @@ function verdictGuard(root, command, inPlay) {
     }
     let locked;
     try {
-      locked = JSON.parse(readFileSync30(lockPath, "utf8")).checksum;
+      locked = JSON.parse(readFileSync31(lockPath, "utf8")).checksum;
     } catch {
       continue;
     }
@@ -6848,15 +6913,15 @@ function verdictGuard(root, command, inPlay) {
 }
 function save(file, state) {
   try {
-    mkdirSync8(join37(file, ".."), { recursive: true });
+    mkdirSync8(join38(file, ".."), { recursive: true });
     writeFileSync7(file, JSON.stringify(state), "utf8");
   } catch {
   }
 }
 
 // src/commands/seo.ts
-import { readFileSync as readFileSync31 } from "fs";
-import { join as join38 } from "path";
+import { readFileSync as readFileSync32 } from "fs";
+import { join as join39 } from "path";
 var SITEMAP_FILE = /(^|\/)sitemap(-index)?\.(xml|ts|js|mjs|tsx|jsx|rb|php|py)$/i;
 var ROBOTS_FILE = /(^|\/)robots\.(txt|ts|js|mjs|tsx|jsx)$/i;
 var ROUTE_IN_SITEMAP = /(?:<loc>\s*([^<\s]+)\s*<\/loc>)|(?:url\s*:\s*["'`]([^"'`]+)["'`])/gi;
@@ -6897,7 +6962,7 @@ function seo(opts) {
   for (const file of files) {
     let raw;
     try {
-      raw = readFileSync31(join38(root, file), "utf8");
+      raw = readFileSync32(join39(root, file), "utf8");
     } catch {
       continue;
     }
@@ -6953,7 +7018,7 @@ function seo(opts) {
 
 // src/index.ts
 var packageRoot = getPackageRoot();
-var { version } = JSON.parse(readFileSync32(join39(packageRoot, "package.json"), "utf8"));
+var { version } = JSON.parse(readFileSync33(join40(packageRoot, "package.json"), "utf8"));
 function warnIfUnpublishedPin() {
   if (isPublishedBuild(packageRoot)) return;
   console.warn(
@@ -7103,7 +7168,7 @@ program.command("seo").description("Audit what a search engine and a link previe
     process.exit(1);
   }
 });
-program.command("probe").description("Print the render probe. With --save, read what it returned on stdin and record it for `jig verdicts`.").option("--save <surface>", "record the probe's output (piped in) under .jig/critique/<surface>/").option("--run <page>", "render this page here, at 360, 768, 1280 and 1600, and record each (needs --save)").option("--serve <dir>", "serve this directory over local http and load --run from it, so root-relative links resolve (a built static site)").action(async (opts) => {
+program.command("probe").description("Print the render probe. With --save, read what it returned on stdin and record it for `jig verdicts`.").option("--save <surface>", "record the probe's output (piped in) under .jig/critique/<surface>/").option("--run <page>", "render this page here, at 360, 768, 1280 and 1600 and either side of each --breakpoint-* the project declares, and record each (needs --save)").option("--serve <dir>", "serve this directory over local http and load --run from it, so root-relative links resolve (a built static site)").action(async (opts) => {
   if (opts.run) {
     if (!opts.save) {
       console.error("  \u2717 --run records what it measures, so it needs --save <surface>.");
@@ -7145,7 +7210,7 @@ program.command("probe").description("Print the render probe. With --save, read
 program.command("gate").description("Run by the Claude Code Stop hook: block stopping while check or a critique fails.").action(async () => {
   let input = {};
   try {
-    if (!process.stdin.isTTY) input = JSON.parse(readFileSync32(0, "utf8") || "{}");
+    if (!process.stdin.isTTY) input = JSON.parse(readFileSync33(0, "utf8") || "{}");
   } catch {
   }
   const cwd = input.cwd ?? process.cwd();
@@ -7184,7 +7249,7 @@ program.command("init").description("Set the project up to use Jig: a brand file
 });
 function resolveSurfaceMode(projectRoot) {
   try {
-    const config = JSON.parse(readFileSync32(join39(projectRoot, "jig.config.json"), "utf8"));
+    const config = JSON.parse(readFileSync33(join40(projectRoot, "jig.config.json"), "utf8"));
     const modes = [...new Set((config.surfaces ?? []).map((s) => s.mode).filter(Boolean))];
     return modes.length === 1 ? modes[0] : void 0;
   } catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.17.3",
+  "version": "0.18.1",
   "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/01-modes.md

@@ -86,7 +86,7 @@ Resolved values: `02-tokens.md` — the option sets for type, spacing, radius an
 - Every page states its subject above the fold in text, not only in an image.
 - Prose blocks are measure-capped even when the container is wide.
 - No horizontal scrolling regions on mobile. Reflow instead.
-- Total JS budget for a content page: **0 KB** unless a specific feature requires it. Interactivity is opt-in per component and must be justified in a comment.
+- Total JS budget for a content page: **0 KB** unless a specific feature requires it. Interactivity is opt-in per component and must be justified in a comment. **Keyboard access a rule requires is not a feature and is not counted**: a few lines whose only job is behaviour a rule asks for and the browser does not give, such as `Escape` closing a `<details>` menu (`P-14`), are allowed in every mode, under 1 KB, with the rule named in a comment. Nothing else rides along in them.
 
 ---
 

package/rules/02-tokens.md

@@ -80,9 +80,10 @@ Modes **select** from these; they never define their own values. `--spacing-card
 **A range means the heading is fluid.** `32–48` is not two values to choose
 between: `--text-h1` interpolates continuously with viewport width, reaching its
 minimum at a 360px viewport and its maximum at 1024px, saturating outside that
-range. There is no breakpoint here and none anywhere else in the system — a
-`clamp()` has no threshold to place, which is exactly why it was chosen over a
-second `-sm` scale.
+range. There is no breakpoint here, and the system defines none anywhere
+else — a `clamp()` has no threshold to place, which is exactly why it was chosen
+over a second `-sm` scale. Where a project's layout does switch, the project
+measures and records the width (T-04).
 
 Editorial `--text-h1` at a fixed 48px gives **13 characters per line** on a
 360px screen, so a 45-character headline sets as four lines and 211px of
@@ -258,6 +259,55 @@ 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.
 
+**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:
+
+| Token | `editorial` | `product` | `operator` |
+| --- | --- | --- | --- |
+| `--size-container` | 1280px | 1280px | 1280px |
+| `--size-rail` | 288px | 256px | 240px |
+
+- `--size-container` is the page's frame: a rail, a readable column and a rail
+  fit inside it, centred, and the viewport less `--grid-margin-sm` below that.
+- `--size-rail` is a side column of navigation or filters, sized to hold labels
+  at the mode's type size.
+- `--size-header` is one row of touch targets and its hairline, in every mode:
+  `calc(var(--size-touch-target) + var(--border-width-hairline))`, 49px with
+  the default brand. A fixed header's rails
+  stick at it, their height is the viewport less it, and `scroll-padding-top`
+  clears it.
+
+`--size-container` is one value for the same reason the touch target is: it is
+not density. Past it, a header's last item drifts hundreds of pixels from where
+the text stops, and the page runs empty down one side. A product whose screens
+are wall-to-wall data raises it in its own layer, after the barrel, with the
+reason written beside it.
+
+**Where a layout switches is measured, not chosen.** This system defines no
+breakpoint, and the four widths a page is judged at (360, 768, 1280, 1600) are
+checkpoints, not places the CSS changes. A layout switches where its content
+needs it: a header row where its labels fit (`P-14`), a third column where two
+rails and a readable column fit. That width is the project's, found by
+measuring, and it is recorded once, in the project's own layer:
+
+```css
+@theme {
+  /* The four header labels and the wordmark need 504px, measured in the
+     site's own fonts; the row replaces Menu here. */
+  --breakpoint-nav: 540px;
+}
+```
+
+Name it `--breakpoint-<what switches>`, never after a device (a name like
+"tablet" says nothing about what changes), and write the measurement beside it. In
+Tailwind 4, `@theme` makes it the variant `nav:`. In plain CSS a custom property
+cannot be read inside `@media`, so the literal is repeated there, with a
+comment naming the token. `jig probe --run` reads these declarations and also
+measures one pixel either side of each, because a switch falls between the
+judged widths by design, and a range nobody measured is where a layout breaks:
+a real site's three-column frame appeared at 1216px, and 1024 to 1215 still got
+the phone arrangement.
+
 **Spacing selections.** `--spacing-card` and `--spacing-section` pick from the
 shared ladder rather than stating their own values:
 

package/rules/03-patterns.md

@@ -458,13 +458,25 @@ Compose it for the phone first. Mobile navigation is a different control — not
   - While open, its visible label or icon reads as close — the word **Close**, or a cross — and its accessible name says so. Tapping it again closes the menu.
   - `Escape` closes an open menu and returns focus to the button.
   - `<details>`/`<summary>` gives the first three for free; a hand-rolled button has to do each one.
+  - `Escape` is the one `<details>` does not give. A few lines add it, and they fit every mode's budget, `editorial`'s included (`M-01`), because keyboard access a rule requires is not counted:
+
+    ```js
+    // P-14: Escape closes the open menu and returns focus to its button.
+    addEventListener('keydown', (e) => {
+      if (e.key !== 'Escape') return;
+      const menu = document.activeElement?.closest('details[open]');
+      if (!menu) return;
+      menu.open = false;
+      menu.querySelector('summary')?.focus();
+    });
+    ```
 - **Where the menu button sits is the project's decision.** Top right, top left, centred — that is taste, and it belongs in `DECISIONS.md`, not here. What the system asks is only that it stays in the same place on every screen and at every width it appears. **The decision is where it sits, never whether it exists:** at a width where every destination fits, the table above shows the links and there is no menu button, whatever `DECISIONS.md` says about its position.
 - **Mark where the reader is, the same way at every width.** Every screen has to answer *where am I?* without the reader remembering how they arrived.
   - The link to the current page carries `aria-current="page"`. A section link whose child page is open may carry `aria-current="true"`.
   - Style the mark from that attribute — `[aria-current="page"]` in CSS — not from a separate `.active` or `.current` class. One source for both what is seen and what is announced means the two cannot drift apart; a class alone looks marked and tells a screen reader nothing.
   - The visible cue is not colour alone (`C-20`): weight, an underline or bar, or a filled state. Which one is the project's decision.
   - Inside an open menu, the current item is marked the same way. When the menu is closed nothing in the navigation is visible, so the page's `<h1>` is what tells the reader where they are — every page has one, and it names the page.
-- **It works with no JavaScript** (`F-41`). The links are ordinary links in the page and render visibly by default; script, if there is any, only adds the collapse. In `editorial`, where the script budget is zero (`M-01`), use `<details>` with `<summary>Menu</summary>` — a disclosure the browser provides with no script at all.
+- **It works with no JavaScript** (`F-41`). The links are ordinary links in the page and render visibly by default; script, if there is any, only adds the collapse. In `editorial`, where the script budget is zero (`M-01`), use `<details>` with `<summary>Menu</summary>` — a disclosure the browser provides with no script at all — and the few lines above for `Escape`.
 - **Never let a row that does not fit scroll sideways.** Its last items go past the edge where nobody sees them (`E-62`), and `editorial` forbids horizontal scrolling on mobile outright. An open menu is a vertical list.
 - **Same destinations, same order, at every width.** The phone may show fewer at once. It never shows different ones, and never reorders them — `product` fixes navigation position across the app (`M-02`), and a reader who learned the order on one screen should not have to relearn it on another.
 - **Every item is at least `--size-touch-target` tall**, made with padding rather than a larger font. The target grows; the text does not.

package/tokens/mode.editorial.css

@@ -78,6 +78,13 @@
   --size-row: 56px;  --size-row-compact: 48px;
   --size-touch-target: 48px;  --size-icon: 20px;
 
+  /* Layout sizes (T-04). The container is the page's frame: a rail, a readable
+     column and a rail fit inside it, and above it navigation stays near what it
+     navigates. A rail is sized to hold labels at this mode's type size. The
+     header is one touch-target row and its hairline. */
+  --size-container: 1280px;  --size-rail: 288px;
+  --size-header: calc(var(--size-touch-target) + var(--border-width-hairline));
+
   --border-width-control: var(--border-width-hairline);
   --radius-control: var(--radius-sm);  --radius-surface: var(--radius-md);
   --shadow-surface: var(--shadow-none);

package/tokens/mode.operator.css

@@ -70,6 +70,13 @@
   --size-row: 36px;  --size-row-compact: 32px;
   --size-touch-target: 48px;  --size-icon: 16px;
 
+  /* Layout sizes (T-04). The container is the page's frame: a rail, a readable
+     column and a rail fit inside it, and above it navigation stays near what it
+     navigates. A rail is sized to hold labels at this mode's type size. The
+     header is one touch-target row and its hairline. */
+  --size-container: 1280px;  --size-rail: 240px;
+  --size-header: calc(var(--size-touch-target) + var(--border-width-hairline));
+
   --border-width-control: var(--border-width-hairline);
   --radius-control: var(--radius-sm);  --radius-surface: var(--radius-sm);
   --shadow-surface: var(--shadow-none);

package/tokens/mode.product.css

@@ -74,6 +74,13 @@
   --size-control: 40px;  --size-control-sm: 32px;  --size-row: 48px;  --size-row-compact: 40px;
   --size-touch-target: 48px;  --size-icon: 18px;
 
+  /* Layout sizes (T-04). The container is the page's frame: a rail, a readable
+     column and a rail fit inside it, and above it navigation stays near what it
+     navigates. A rail is sized to hold labels at this mode's type size. The
+     header is one touch-target row and its hairline. */
+  --size-container: 1280px;  --size-rail: 256px;
+  --size-header: calc(var(--size-touch-target) + var(--border-width-hairline));
+
   --border-width-control: var(--border-width-hairline);
   --radius-control: var(--radius-sm);  --radius-surface: var(--radius-md);
   --shadow-surface: var(--shadow-none);