jig-ui 0.18.5 → 0.18.6

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.18.6 (2026-09-25)
+
+A mockup's frames must hold each size's regions, and the drawing shows either
+side of each switch the project records.
+
+### Fixed
+
+- **The gate checks what a mockup's frames hold, not only that they exist.**
+  0.18.5 required a frame per size; a frame can still be empty, or hold the
+  desktop composition narrower. The procedure's self-check, "go down the spec's
+  `regions:` and find each one in that frame", was prose only. Now each size's
+  regions must be labelled in its frame: by name where the spec gives a short
+  one (`nav`, or `h1: "Versions"`), and by count where it writes a description,
+  so wording never trips it.
+- **A mockup draws either side of each switch the project records.** The probe
+  has measured one pixel either side of every `--breakpoint-*` since 0.18.0, but
+  the drawing the owner approves showed only the four sizes; jig-site's header
+  changes at 540, between phone and tablet, and no frame showed 539 beside 540.
+  A new spec field, `switches:`, names the switches a page crosses (`none` if it
+  crosses none); absent, the mockup draws every one.
+- **A spec's `indexable:` reads past a YAML comment.** The spec template itself
+  writes `indexable: true   # from the mode ...`; a spec that copied it was
+  reported unreadable.
+
 ## 0.18.5 (2026-09-25)
 
 The gate holds an HTML mockup that does not draw the page at every size.

package/dist/index.js

@@ -2,9 +2,9 @@
 
 // src/index.ts
 import { Command } from "commander";
-import { readFileSync as readFileSync33 } from "fs";
+import { readFileSync as readFileSync34 } from "fs";
 import { homedir as homedir2 } from "os";
-import { join as join40 } from "path";
+import { join as join41 } from "path";
 
 // src/paths.ts
 import { existsSync } from "fs";
@@ -6471,7 +6471,7 @@ function navProblems(spec) {
 function specIndexableField(front) {
   const line = /^\s*indexable\s*:(.*)$/im.exec(front);
   if (!line) return "absent";
-  const value = line[1].trim().replace(/^["']|["']$/g, "").toLowerCase();
+  const value = line[1].replace(/\s+#.*$/, "").trim().replace(/^["']|["']$/g, "").toLowerCase();
   if (value === "true" || value === "yes") return true;
   if (value === "false" || value === "no") return false;
   return "unreadable";
@@ -6685,15 +6685,145 @@ function verifyVerdicts(opts) {
 }
 
 // src/commands/gate.ts
-import { existsSync as existsSync24, mkdirSync as mkdirSync8, readdirSync as readdirSync15, readFileSync as readFileSync31, statSync as statSync4, writeFileSync as writeFileSync7 } from "fs";
+import { existsSync as existsSync24, mkdirSync as mkdirSync8, readdirSync as readdirSync15, readFileSync as readFileSync32, statSync as statSync4, writeFileSync as writeFileSync7 } from "fs";
 import { createHash as createHash2 } from "crypto";
+import { join as join39 } from "path";
+
+// src/check/mockup-drawing.ts
+import { readFileSync as readFileSync31 } from "fs";
 import { join as join38 } from "path";
+var FRAMES = [["phone", 360], ["tablet", 768], ["desktop", 1280], ["wide", 1600]];
+function mockupDrawingProblems(root, specBody, at) {
+  let html;
+  try {
+    html = readFileSync31(join38(root, at), "utf8");
+  } catch {
+    return [];
+  }
+  const frames = readFrames(html);
+  const problems = [];
+  const missing = FRAMES.filter(([size]) => !frames.some((f) => f.size === size));
+  if (missing.length) {
+    problems.push(
+      `${at} has no frame for ${missing.map(([size, px2]) => `${size} (${px2}px)`).join(", ")}. A mockup draws the page once per size, side by side, in the wireframe template's \`<section class="frame" data-size="\u2026">\` boxes, so the owner sees every size at once. A single responsive page shows only the width of the window it is opened in.`
+    );
+  }
+  const regions = specRegions(specBody);
+  for (const [size] of FRAMES) {
+    const listed = regions[size];
+    const inFrame = frames.filter((f) => f.size === size).flatMap((f) => f.labels);
+    if (!listed || listed.length === 0 || !frames.some((f) => f.size === size)) continue;
+    const named = listed.filter((r) => r.name).map((r) => r.name);
+    const absent = named.filter((name) => !inFrame.some((label) => labelMatches(label, name)));
+    if (absent.length) {
+      problems.push(
+        `${at}: the ${size} frame has no labelled region for ${absent.map((n) => `"${n}"`).join(", ")}. Every region the spec lists for a size is drawn in that size's frame, with its name in a \`.name\` label.`
+      );
+    } else if (inFrame.length < listed.length) {
+      problems.push(
+        `${at}: the ${size} frame labels ${inFrame.length} region(s) and the spec lists ${listed.length} for ${size}. Draw each one in the frame, with its name in a \`.name\` label.`
+      );
+    }
+  }
+  const widths = new Set(frames.map((f) => f.width).filter((w) => w !== void 0));
+  const crossed = specSwitches(specBody);
+  for (const s of declaredSwitches(root).filter((sw) => !crossed || crossed.includes(sw.name))) {
+    const absent = [s.px - 1, s.px].filter((w) => !widths.has(w));
+    if (absent.length) {
+      problems.push(
+        `${at} does not draw either side of the \`--breakpoint-${s.name}\` switch at ${s.px}px (no frame at ${absent.join(" or ")}px). The layout changes there, between the four sizes, so the owner sees the last width before it and the first at it: a frame with \`data-width="${s.px - 1}"\` and one with \`data-width="${s.px}"\`, each that wide. A page that never crosses it says so in its spec: \`switches:\` lists the ones it does, or \`none\`.`
+      );
+    }
+  }
+  return problems;
+}
+function specSwitches(specBody) {
+  const front = specBody.split(/^---\s*$/m)[1] ?? "";
+  const value = /^switches\s*:\s*(.+)$/im.exec(front)?.[1]?.replace(/#.*$/, "").trim();
+  if (value === void 0) return void 0;
+  if (/^(none|\[\s*\])$/i.test(value)) return [];
+  return value.replace(/^\[|\]$/g, "").split(",").map((n) => n.trim().replace(/^["']|["']$/g, "").replace(/^--breakpoint-/, "")).filter(Boolean);
+}
+function readFrames(html) {
+  const opens = [...html.matchAll(/<\w+\b[^>]*\bclass\s*=\s*["'][^"']*\bframe\b[^"']*["'][^>]*>/gi)];
+  return opens.map((open, i) => {
+    const tag = open[0];
+    const body = html.slice(open.index + tag.length, opens[i + 1]?.index ?? html.length);
+    const size = /\bdata-size\s*=\s*["']([\w-]+)["']/i.exec(tag)?.[1]?.toLowerCase();
+    const width = Number(/\bdata-width\s*=\s*["'](\d+)["']/i.exec(tag)?.[1]) || void 0;
+    const labels = [...body.matchAll(/<\w+\b[^>]*\bclass\s*=\s*["'][^"']*\bname\b[^"']*["'][^>]*>([^<]*)/gi)].map((m) => normalise(m[1])).filter(Boolean);
+    return { size, width, labels };
+  });
+}
+function specRegions(specBody) {
+  const front = specBody.split(/^---\s*$/m)[1] ?? "";
+  const sizes = front.split(/^sizes\s*:/im)[1] ?? "";
+  const out = {};
+  const own = {};
+  const sameAs = {};
+  for (const [size] of [...FRAMES, ["landscape", 900]]) {
+    const block = sizeBlock2(sizes, size);
+    if (!block) continue;
+    const alias = /^\s*same-as\s*:\s*([\w-]+)/im.exec(block)?.[1];
+    if (alias) {
+      sameAs[size] = alias.toLowerCase();
+      continue;
+    }
+    own[size] = regionEntries(block).map(regionName);
+  }
+  for (const size of [...Object.keys(own), ...Object.keys(sameAs)]) {
+    let at = size;
+    for (let hops = 0; sameAs[at] && hops < 5; hops++) at = sameAs[at];
+    if (own[at]) out[size] = own[at];
+  }
+  return out;
+}
+function regionEntries(block) {
+  const inline = /^\s*regions\s*:\s*\[(.*)\]\s*$/im.exec(block);
+  if (inline) return inline[1].split(",").map((s) => s.trim()).filter(Boolean);
+  const start = /^(\s*)regions\s*:\s*$/im.exec(block);
+  if (!start) return [];
+  const indent = start[1].length;
+  const entries = [];
+  for (const line of block.slice(start.index + start[0].length).split("\n")) {
+    if (!line.trim()) continue;
+    const lead = /^\s*/.exec(line)[0].length;
+    if (lead <= indent) break;
+    const item = /^\s*-\s*(.+)$/.exec(line);
+    if (item) entries.push(item[1]);
+  }
+  return entries;
+}
+function regionName(entry) {
+  const text = entry.trim().replace(/^["']|["']$/g, "").replace(/\\"/g, '"');
+  const head = normalise(text.split(":")[0]);
+  return head && head.split(" ").length <= 4 ? { name: head } : {};
+}
+function labelMatches(label, name) {
+  return label === name || label.startsWith(`${name} `) || label.startsWith(`${name}:`) || new RegExp(`\\b${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`).test(label);
+}
+function normalise(text) {
+  return text.toLowerCase().replace(/[`"'“”]/g, "").replace(/\s+/g, " ").trim();
+}
+function sizeBlock2(sizes, size) {
+  const start = new RegExp(`^(\\s+)${size}\\s*:.*$`, "im").exec(sizes);
+  if (!start) return "";
+  const indent = start[1].length;
+  const lines = [];
+  for (const line of sizes.slice(start.index + start[0].length).split("\n")) {
+    if (line.trim() && /^\s*/.exec(line)[0].length <= indent) break;
+    lines.push(line);
+  }
+  return lines.join("\n");
+}
+
+// src/commands/gate.ts
 var MAX_BLOCKS = 3;
 function lastJigCommand(transcriptPath) {
   if (!transcriptPath || !existsSync24(transcriptPath)) return void 0;
   let text;
   try {
-    text = readFileSync31(transcriptPath, "utf8");
+    text = readFileSync32(transcriptPath, "utf8");
   } catch {
     return void 0;
   }
@@ -6711,7 +6841,7 @@ function lastAssistantText(transcriptPath) {
   if (!transcriptPath || !existsSync24(transcriptPath)) return void 0;
   let found;
   try {
-    for (const line of readFileSync31(transcriptPath, "utf8").split("\n")) {
+    for (const line of readFileSync32(transcriptPath, "utf8").split("\n")) {
       if (!line.includes('"assistant"')) continue;
       let entry;
       try {
@@ -6737,7 +6867,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 readFileSync31(transcriptPath, "utf8").split("\n")) {
+    for (const line of readFileSync32(transcriptPath, "utf8").split("\n")) {
       const m = /"timestamp"\s*:\s*"([^"]+)"/.exec(line);
       if (m) {
         const t = Date.parse(m[1]);
@@ -6752,20 +6882,20 @@ function verdictsMtime(dir) {
   let newest = 0;
   for (const name of VERDICT_FILES) {
     try {
-      newest = Math.max(newest, statSync4(join38(dir, name)).mtimeMs);
+      newest = Math.max(newest, statSync4(join39(dir, name)).mtimeMs);
     } catch {
     }
   }
   return newest;
 }
 function surfacesInPlay(root, command, transcriptPath) {
-  const critiqueDir = join38(root, ".jig", "critique");
+  const critiqueDir = join39(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(join38(critiqueDir, s)) >= start - 1e3);
+  return all.filter((s) => s === current || verdictsMtime(join39(critiqueDir, s)) >= start - 1e3);
 }
 function commandProblems(root, command) {
   const problems = [];
@@ -6774,7 +6904,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 = readFileSync31(join38(root, found), "utf8");
+      const body = readFileSync32(join39(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.`");
       }
@@ -6795,14 +6925,14 @@ 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(join38(root, at))) problems.push(`${spec.path}: \`mockup_at: ${at}\` does not exist.`);
+      else if (!/^https?:/i.test(at) && !existsSync24(join39(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 (at && /\.html?$/i.test(at) && existsSync24(join38(root, at))) problems.push(...mockupFrameProblems(root, at));
+    if (at && /\.html?$/i.test(at) && existsSync24(join39(root, at))) problems.push(...mockupDrawingProblems(root, spec.body, at));
   }
   if (command === "critique") {
-    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"))) : [];
+    const dir = join39(root, ".jig", "critique");
+    const surfaces = existsSync24(dir) ? readdirSync15(dir).filter((s) => existsSync24(join39(dir, s, "screen.json")) || existsSync24(join39(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) {
@@ -6824,13 +6954,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(join38(projectRoot, candidate))) return candidate;
+    if (candidate && existsSync24(join39(projectRoot, candidate))) return candidate;
   }
   return void 0;
 }
 function gate(opts) {
   const root = opts.projectRoot;
-  if (!existsSync24(join38(root, "jig.config.json")) && !existsSync24(join38(root, ".jig"))) {
+  if (!existsSync24(join39(root, "jig.config.json")) && !existsSync24(join39(root, ".jig"))) {
     return { block: false, reason: "" };
   }
   const command = lastJigCommand(opts.input.transcript_path);
@@ -6857,11 +6987,11 @@ function gate(opts) {
     }
   }
   problems.push(...verdictGuard(root, command, surfacesInPlay(root, command, opts.input.transcript_path)));
-  const critiqueDir = join38(root, ".jig", "critique");
+  const critiqueDir = join39(root, ".jig", "critique");
   if (existsSync24(critiqueDir)) {
     for (const surface of surfacesInPlay(root, command, opts.input.transcript_path)) {
-      const dir = join38(critiqueDir, surface);
-      if (!existsSync24(join38(dir, "screen.json")) && !existsSync24(join38(dir, "code.json"))) continue;
+      const dir = join39(critiqueDir, surface);
+      if (!existsSync24(join39(dir, "screen.json")) && !existsSync24(join39(dir, "code.json"))) continue;
       const v = verifyVerdicts({ projectRoot: root, surface });
       if (!v.ok) {
         const shown = v.errors.slice(0, 6).map((e) => `  ${e}`);
@@ -6875,10 +7005,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 = join38(root, ".jig", "gate.json");
+  const stateFile = join39(root, ".jig", "gate.json");
   let state = {};
   try {
-    state = JSON.parse(readFileSync31(stateFile, "utf8"));
+    state = JSON.parse(readFileSync32(stateFile, "utf8"));
   } catch {
   }
   if (problems.length === 0) {
@@ -6906,27 +7036,13 @@ ${problems.join("\n\n")}`
 ${problems.join("\n\n")}`
   };
 }
-var MOCKUP_FRAMES = [["phone", 360], ["tablet", 768], ["desktop", 1280], ["wide", 1600]];
-function mockupFrameProblems(root, at) {
-  let html;
-  try {
-    html = readFileSync31(join38(root, at), "utf8");
-  } catch {
-    return [];
-  }
-  const missing = MOCKUP_FRAMES.filter(([size]) => !new RegExp(`data-size\\s*=\\s*["']${size}["']`).test(html));
-  if (missing.length === 0) return [];
-  return [
-    `${at} has no frame for ${missing.map(([size, px2]) => `${size} (${px2}px)`).join(", ")}. A mockup draws the page once per size, side by side, in the wireframe template's \`<div class="frame" data-size="\u2026">\` boxes, so the owner sees every size at once. A single responsive page shows only the width of the window it is opened in.`
-  ];
-}
 var VERDICT_FILES = ["screen.json", "code.json", "decisions.json"];
 var LOCK = "verdicts.lock";
 function verdictChecksum(dir) {
   const parts = VERDICT_FILES.map((f) => {
     try {
       return `${f}
-${readFileSync31(join38(dir, f), "utf8")}`;
+${readFileSync32(join39(dir, f), "utf8")}`;
     } catch {
       return "";
     }
@@ -6934,15 +7050,15 @@ ${readFileSync31(join38(dir, f), "utf8")}`;
   return parts.some(Boolean) ? checksum(parts.join("\n")) : void 0;
 }
 function verdictGuard(root, command, inPlay) {
-  const critiqueDir = join38(root, ".jig", "critique");
+  const critiqueDir = join39(root, ".jig", "critique");
   if (!existsSync24(critiqueDir)) return [];
   const problems = [];
   for (const surface of readdirSync15(critiqueDir)) {
     if (surface.startsWith("_")) continue;
-    const dir = join38(critiqueDir, surface);
+    const dir = join39(critiqueDir, surface);
     const now = verdictChecksum(dir);
     if (!now) continue;
-    const lockPath = join38(dir, LOCK);
+    const lockPath = join39(dir, LOCK);
     if (command === "critique" && (!inPlay || inPlay.includes(surface))) {
       try {
         writeFileSync7(lockPath, JSON.stringify({ checksum: now }) + "\n", "utf8");
@@ -6952,7 +7068,7 @@ function verdictGuard(root, command, inPlay) {
     }
     let locked;
     try {
-      locked = JSON.parse(readFileSync31(lockPath, "utf8")).checksum;
+      locked = JSON.parse(readFileSync32(lockPath, "utf8")).checksum;
     } catch {
       continue;
     }
@@ -6966,15 +7082,15 @@ function verdictGuard(root, command, inPlay) {
 }
 function save(file, state) {
   try {
-    mkdirSync8(join38(file, ".."), { recursive: true });
+    mkdirSync8(join39(file, ".."), { recursive: true });
     writeFileSync7(file, JSON.stringify(state), "utf8");
   } catch {
   }
 }
 
 // src/commands/seo.ts
-import { readFileSync as readFileSync32 } from "fs";
-import { join as join39 } from "path";
+import { readFileSync as readFileSync33 } from "fs";
+import { join as join40 } 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;
@@ -7015,7 +7131,7 @@ function seo(opts) {
   for (const file of files) {
     let raw;
     try {
-      raw = readFileSync32(join39(root, file), "utf8");
+      raw = readFileSync33(join40(root, file), "utf8");
     } catch {
       continue;
     }
@@ -7071,7 +7187,7 @@ function seo(opts) {
 
 // src/index.ts
 var packageRoot = getPackageRoot();
-var { version } = JSON.parse(readFileSync33(join40(packageRoot, "package.json"), "utf8"));
+var { version } = JSON.parse(readFileSync34(join41(packageRoot, "package.json"), "utf8"));
 function warnIfUnpublishedPin() {
   if (isPublishedBuild(packageRoot)) return;
   console.warn(
@@ -7265,7 +7381,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(readFileSync33(0, "utf8") || "{}");
+    if (!process.stdin.isTTY) input = JSON.parse(readFileSync34(0, "utf8") || "{}");
   } catch {
   }
   const cwd = input.cwd ?? process.cwd();
@@ -7304,7 +7420,7 @@ program.command("init").description("Set the project up to use Jig: a brand file
 });
 function resolveSurfaceMode(projectRoot) {
   try {
-    const config = JSON.parse(readFileSync33(join40(projectRoot, "jig.config.json"), "utf8"));
+    const config = JSON.parse(readFileSync34(join41(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.18.5",
+  "version": "0.18.6",
   "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/templates/COMMAND.md.tmpl

@@ -343,6 +343,7 @@ sizes:                     # phone first. Each size is a whole composition, not
   wide:                    # judged at 1600px — where a layout with no upper bound shows itself
     same-as: desktop
     why: "content is capped at 1200px, so 1600 adds margin and nothing else"
+switches: none             # the recorded switches (--breakpoint-*, T-04) this page crosses, by name; none if it crosses none. Absent, the mockup draws either side of every one
 states: [default, loading, error, success]
 decisions: [The Engineer Reads First]     # every DECISIONS.md entry this screen implements, by name
 later: [social sign-in, remember this device]   # cut from V1, by name — the next specs start here
@@ -561,6 +562,14 @@ look. So the drawing contains:
   detail: a phone composition that is only the desktop one narrower is the failure
   specs are written per size to prevent. A `same-as:` size is drawn anyway, so the
   claim can be seen to hold.
+- **Either side of each switch the project records.** Where the project has
+  measured and recorded a width its layout changes at (`--breakpoint-<what>`,
+  `T-04`), draw the last width before it and the first at it, after the four
+  sizes: `<section class="frame" data-size="switch" data-width="539"
+  style="width:539px">` and the same at 540. The spec's `switches:` names the
+  ones this page crosses; absent, draw every one. The four sizes are where a page is
+  judged, not where it changes, and a switch between them is otherwise never
+  seen before it is built.
 - **Navigation at every size, exactly as the spec's `nav:` says for that size.** On
   the phone that usually means the Menu button, drawn where `DECISIONS.md` puts it —
   and, because an open menu changes the structure, a second phone frame labelled
@@ -634,7 +643,10 @@ for is review: is the header taking a sixth of the phone? Is a tap target under
 
 **Check the drawing against the spec before anyone sees it.** For each size, go
 down the spec's `regions:` and its `nav:` and find each one in that frame. A region
-the spec names and the frame lacks is drawn now, not raised in review. This matters
+the spec names and the frame lacks is drawn now, not raised in review. The gate
+checks an HTML drawing when you stop: a frame for each of the four sizes, each
+size's regions labelled in its frame (by name where the spec names them), and a
+frame either side of each recorded switch. This matters
 most on the phone, where a region dropped for space is easy to miss and the reviewer
 is looking at what is there, not at what is not.