jig-ui 0.18.3 → 0.18.6

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # 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.
+
+### Fixed
+
+- **The gate holds a mockup that does not show every size.** On jig-site three
+  HTML mockups in a row were single responsive pages, so the owner saw only the
+  width of the window they opened and asked twice where the other sizes were.
+  The procedure's wireframe template draws the page once per size, side by
+  side, in `.frame[data-size]` boxes, and nothing checked a drawing used them.
+  When a `mockup` session stops with an HTML drawing, the gate now requires a
+  frame for phone (360), tablet (768), desktop (1280) and wide (1600).
+
+## 0.18.4 (2026-09-25)
+
+Every release summary is one or two lines, for jig-site's Versions page.
+
+### Changed
+
+- **Every release summary is one or two lines, with no em dash.** jig-site's
+  Versions page shows the summary under each release, so it is interface text.
+  Nine ran to three to thirteen lines; their detail now sits under
+  `### Upgrading` or `### Notes` in the same release. A test keeps summaries
+  short.
+
 ## 0.18.3 (2026-09-25)
 
 Recording a decision no longer undoes the critiques written before it, and an
@@ -72,9 +122,8 @@ menu, and `A-05` missed an arrow that renders as an emoji.
 
 ## 0.18.0 (2026-09-25)
 
-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.
+A page's frame gets tokens, a project records where its layout switches, and
+keyboard access a rule requires fits every script budget.
 
 ### Added
 
@@ -181,8 +230,12 @@ The gate judges only the critiques a session touched.
 ## 0.17.0 (2026-09-24)
 
 Thirteen more tells of a generated page, ten of them caught by `check`, and a
-picture for every rule. Also carries the probe and verdict fixes tagged as 0.16.2,
-which was not published to npm.
+picture for every rule.
+
+### Notes
+
+Also carries the probe and verdict fixes tagged as 0.16.2, which was not
+published to npm.
 
 ### Added
 
@@ -468,8 +521,8 @@ One new rule: no em dashes in interface text (`I-118`), with a detector.
 
 ## 0.11.1 (2026-09-18)
 
-Two holes in the gate, both found by running the loop twice on 0.11.0 —
-once on Haiku, once on Sonnet.
+Two holes in the gate, found by running the loop twice on 0.11.0: once on
+Haiku, once on Sonnet.
 
 ### Fixed
 
@@ -487,9 +540,8 @@ once on Haiku, once on Sonnet.
 
 ## 0.11.0 (2026-09-18)
 
-One release, one lesson: a measurement an agent can type is not a
-measurement. Everything here came from two live runs at the capability
-floor the day 0.10.0 shipped.
+A measurement an agent can type is not a measurement. Everything here came
+from two live runs at the capability floor.
 
 ### Added
 
@@ -516,9 +568,8 @@ floor the day 0.10.0 shipped.
 
 ## 0.10.0 (2026-09-18)
 
-Mobile-first, and a design loop that a weak model cannot skip. Everything here
-was measured on live runs at the capability floor (Haiku), and most of it exists
-because an instruction the agent could choose to ignore was ignored.
+Mobile-first, and a design loop that a weak model cannot skip, measured on live
+runs with Haiku.
 
 ### Added
 
@@ -582,9 +633,8 @@ because an instruction the agent could choose to ignore was ignored.
 
 ## 0.9.0 (2026-09-13)
 
-One new rule and one amended correction, both from the same afternoon of
-dogfooding and both about the same blind spot: H-47's correction always pointed
-at a token, so an agent reading it literally always produced one.
+One new rule and one amended correction, both about the same blind spot: H-47's
+correction always pointed an agent at a token.
 
 ### Added
 
@@ -627,12 +677,12 @@ at a token, so an agent reading it literally always produced one.
 
 ## 0.8.2 (2026-09-12)
 
-Every fix here was found by a consumer using Jig rather than by Jig checking
-itself: the documentation site was upgraded to 0.8.1 and then styled in
-Tailwind, which is the first time Jig's Tailwind guidance had been followed
-end to end by anything other than its own tests.
+Four fixes found by following Jig's Tailwind guidance end to end on its own
+documentation site.
 
-Three of the four are the same shape — two places answering one question, and
+### Notes
+
+Three of the four are the same shape: two places answering one question, and
 disagreeing without either knowing the other existed.
 
 ### Fixed
@@ -706,10 +756,8 @@ disagreeing without either knowing the other existed.
 
 ## 0.8.1 (2026-09-12)
 
-Both fixes here are the same shape: 0.8.0 corrected the instance it was looking
-at and left the class alone, and in each case the commit message claimed a
-verification that had only checked the file it had just edited. Both were found
-by inspecting the published tarball rather than the working tree.
+Two fixes where 0.8.0 corrected one instance and left the class alone, both
+found by inspecting the published tarball.
 
 ### Fixed
 
@@ -766,9 +814,10 @@ by inspecting the published tarball rather than the working tree.
 
 ## 0.8.0 (2026-09-11)
 
-Everything here was found by handing Jig to agents that had never seen it and
-asking them to build something real — its own documentation site. None of it
-was found by the test suite, which passed throughout.
+Fixes found by agents new to Jig building its documentation site. The test
+suite passed throughout and caught none of them.
+
+### Notes
 
 Minor rather than patch: `explain` prints lines it did not print before, and
 `init` can write a file it did not write before.
@@ -904,6 +953,8 @@ Minor rather than patch: `explain` prints lines it did not print before, and
 
 A rule file that contradicted the tool, and the guard that kept it that way.
 
+### Notes
+
 Patch: the shipped rules change, but no command writes anything different.
 
 ### Fixed
@@ -956,7 +1007,9 @@ already knew where the tokens were.
 
 ## 0.7.0 (2026-09-11)
 
-A silent no-op, fixed, plus the missing half of 0.6.0's token-layer move.
+A silent no-op, fixed, and the missing half of 0.6.0's token-layer move.
+
+### Notes
 
 Minor rather than patch, and the call is arguable. The non-TTY fix is a
 correction; the relocation offer is new behaviour that can move files, though
@@ -998,19 +1051,25 @@ to move their token layer should read these notes.
 
 ## 0.6.0 (2026-09-11)
 
-The token layer stops hiding in a dotfolder, and `check` starts reading it back.
+The token layer leaves its dotfolder, and `check` reads the layer's own
+declarations back.
+
+### Upgrading
 
-Both came from the same question: who should write the tokens. The answer turned
-out to depend on something that did not exist — **nothing validated the token
-layer's own declarations.** `init` checked a brand colour once, at write time,
-and no command ever looked again. A generated file edited afterwards, by a person
-or an agent, went unexamined: `--color-text-weak` dropped to 22% opacity and
-`check` reported "No findings". With that closed, where the files live and who
-writes them become ordinary decisions rather than load-bearing ones.
+Run `npx jig-ui@latest update`, then `npx jig-ui@latest init`. Existing installs
+keep their `.jig/tokens/` layout. Nothing moves unless you move it, because
+relocating files could break an import you wrote yourself.
 
-**Upgrading:** run `npx jig-ui@latest update`, then `npx jig-ui@latest init`.
-Existing installs keep their `.jig/tokens/` layout — nothing moves unless you
-move it, because relocating files could break an import you wrote yourself.
+### Notes
+
+Both changes came from the same question: who should write the tokens. The
+answer turned out to depend on something that did not exist: **nothing
+validated the token layer's own declarations.** `init` checked a brand colour
+once, at write time, and no command ever looked again. A generated file edited
+afterwards, by a person or an agent, went unexamined: `--color-text-weak`
+dropped to 22% opacity and `check` reported "No findings". With that closed,
+where the files live and who writes them become ordinary decisions rather than
+load-bearing ones.
 
 ### Added
 
@@ -1092,18 +1151,24 @@ move it, because relocating files could break an import you wrote yourself.
 
 ## 0.5.0 (2026-09-10)
 
-Four things shipped in 0.4.0 were broken in ways that reported success. `/jig
-update` refreshed to the version already installed and said "Updated Jig →
-0.4.0". Dark mode could not be reached by choosing it. `check` skipped nearly
-every colour in a project that had not run `init`. And the reconciliation of
-every numeric default against an external reference is finished — 0 rows open —
-which is where most of the rest of this release came from.
+Four things 0.4.0 reported as working did not, and the reconciliation of every
+numeric default against an external reference is finished.
+
+### Upgrading
 
 **If you are on 0.4.0, run `npx jig-ui@latest update` from a terminal.** The
 `/jig update` fix cannot deliver itself: your command file is the broken one, so
 the slash command will keep reporting a successful no-op until the CLI replaces
 it. Once, from the terminal, and the slash command works from then on.
 
+### Notes
+
+The four: `/jig update` refreshed to the version already installed and said
+"Updated Jig → 0.4.0". Dark mode could not be reached by choosing it. `check`
+skipped nearly every colour in a project that had not run `init`. And the
+reconciliation ended with 0 rows open, which is where most of the rest of this
+release came from.
+
 ### Fixed
 
 - **`/jig update` could never upgrade anyone.** Every subcommand is invoked at
@@ -1186,11 +1251,14 @@ them, and nothing at all checked that a token cited in the rules exists.
 
 ## 0.4.0 (2026-09-04)
 
-Jig stops copying itself into your project. It is a skill an agent reads, and
-0.3.0 wrote 220KB across 17 files into every consuming repo to deliver it —
-roughly 200KB of that Jig's own property, read by an agent that already had it
-from the skill install. A single-mode project now gets **three** files, all of
-them its own.
+Jig stops copying itself into your project. A single-mode project now gets
+**three** files, all of them its own.
+
+### Notes
+
+Jig is a skill an agent reads, and 0.3.0 wrote 220KB across 17 files into every
+consuming repo to deliver it. Roughly 200KB of that was Jig's own, read by an
+agent that already had it from the skill install.
 
 ### Changed
 

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,13 +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(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) {
@@ -6823,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);
@@ -6856,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}`);
@@ -6874,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) {
@@ -6911,7 +7042,7 @@ function verdictChecksum(dir) {
   const parts = VERDICT_FILES.map((f) => {
     try {
       return `${f}
-${readFileSync31(join38(dir, f), "utf8")}`;
+${readFileSync32(join39(dir, f), "utf8")}`;
     } catch {
       return "";
     }
@@ -6919,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");
@@ -6937,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;
     }
@@ -6951,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;
@@ -7000,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;
     }
@@ -7056,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(
@@ -7250,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();
@@ -7289,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.3",
+  "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.