jig-ui 0.18.5 → 0.18.8

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## 0.18.8 (2026-09-25)
+
+Two runs writing one manifest no longer lose an entry.
+
+### Fixed
+
+- **Two runs writing one manifest no longer lose an entry.** The merge added
+  for this in 0.4 re-read after writing and retried if its own keys were gone,
+  but a writer only checked its own keys: one that read before another's write
+  could rename over it afterwards, and both reported success. The
+  parallel-process test caught it under load in the 0.18.7 release run. The
+  read, merge and write now happen under a lock file; a lock whose process has
+  died, or older than any write takes, is taken over, so a killed run cannot
+  wedge an install.
+
+## 0.18.7 (2026-09-25)
+
+The mockup gate reads a spec's switches however they are spelled, and refuses
+icons and images in a drawing's frames.
+
+### Fixed
+
+- **`switches:` reads a switch however the spec spells it.** jig-site's
+  Versions spec wrote `switches: [breakpoint-nav]`; read as a switch named
+  that, it matched nothing, no switch was checked, and the gate passed. `nav`,
+  `breakpoint-nav` and `--breakpoint-nav` now name the same switch, and a name
+  the project does not record is reported with the ones it does.
+- **The gate refuses icons and images in a mockup's frames.** The procedure
+  says an icon is its name in brackets and an image a labelled box; jig-site's
+  Versions drawing carried the site's real icons and GitHub's mark, and nothing
+  checked. `<svg>`, `<img>`, `<picture>`, `<canvas>` and icon fonts inside a
+  frame now stop the session.
+
+## 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";
@@ -42,7 +42,7 @@ function isPublishedBuild(packageRoot2) {
 }
 
 // src/commands/install.ts
-import { existsSync as existsSync5, mkdirSync as mkdirSync4, readFileSync as readFileSync4, writeFileSync as writeFileSync3 } from "fs";
+import { existsSync as existsSync5, mkdirSync as mkdirSync4, readFileSync as readFileSync4, writeFileSync as writeFileSync2 } from "fs";
 import { join as join7 } from "path";
 
 // src/adapters/types.ts
@@ -270,7 +270,7 @@ function referenceFiles(packageRoot2) {
 
 // src/install/manifest.ts
 import { createHash } from "crypto";
-import { existsSync as existsSync3, mkdirSync as mkdirSync2, readFileSync as readFileSync2 } from "fs";
+import { closeSync, existsSync as existsSync3, mkdirSync as mkdirSync2, openSync, readFileSync as readFileSync2, statSync, unlinkSync as unlinkSync2, writeSync } from "fs";
 import { dirname as dirname3, join as join4 } from "path";
 
 // src/install/atomic.ts
@@ -342,19 +342,70 @@ function readManifest(root, manifestDir = ".jig") {
   }
   return validateManifest(raw, path);
 }
-var MERGE_ATTEMPTS = 5;
+var LOCK_STALE_MS = 1e4;
+var LOCK_WAIT_MS = 15e3;
 function writeManifest(root, m, manifestDir = ".jig") {
   const path = manifestPath(root, manifestDir);
   mkdirSync2(dirname3(path), { recursive: true });
-  for (let attempt = 0; attempt < MERGE_ATTEMPTS; attempt++) {
+  withLock(`${path}.lock`, () => {
     const onDisk = readManifestQuietly(path);
     const merged = { ...m, files: { ...onDisk?.files ?? {}, ...m.files } };
     writeFileAtomic(path, `${JSON.stringify(merged, null, 2)}
 `);
-    const after = readManifestQuietly(path);
-    if (after && Object.keys(merged.files).every((k) => k in after.files)) return;
+  });
+}
+function withLock(lock, fn) {
+  const deadline = Date.now() + LOCK_WAIT_MS;
+  for (; ; ) {
+    try {
+      const fd = openSync(lock, "wx");
+      try {
+        writeSync(fd, `${process.pid} ${Date.now()}`);
+      } finally {
+        closeSync(fd);
+      }
+      break;
+    } catch (err) {
+      if (err.code !== "EEXIST") throw err;
+      if (lockIsStale(lock) || Date.now() > deadline) {
+        try {
+          unlinkSync2(lock);
+        } catch {
+        }
+        continue;
+      }
+      sleep(10 + Math.random() * 20);
+    }
+  }
+  try {
+    fn();
+  } finally {
+    try {
+      unlinkSync2(lock);
+    } catch {
+    }
   }
 }
+function lockIsStale(lock) {
+  try {
+    const [pid, at] = readFileSync2(lock, "utf8").trim().split(/\s+/).map(Number);
+    if (at && Date.now() - at > LOCK_STALE_MS) return true;
+    if (pid && pid !== process.pid) {
+      try {
+        process.kill(pid, 0);
+      } catch (e) {
+        if (e.code === "ESRCH") return true;
+      }
+    }
+    if (!pid || !at) return Date.now() - statSync(lock).mtimeMs > LOCK_STALE_MS;
+    return false;
+  } catch {
+    return false;
+  }
+}
+function sleep(ms) {
+  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+}
 function readManifestQuietly(path) {
   try {
     const parsed = JSON.parse(readFileSync2(path, "utf8"));
@@ -695,7 +746,7 @@ function installStopHook(projectRoot, version2) {
   stop.push({ hooks: [{ type: "command", command }] });
   settings.hooks = { ...hooks, Stop: stop };
   mkdirSync4(join7(projectRoot, ".claude"), { recursive: true });
-  writeFileSync3(path, JSON.stringify(settings, null, 2) + "\n", "utf8");
+  writeFileSync2(path, JSON.stringify(settings, null, 2) + "\n", "utf8");
   return true;
 }
 
@@ -764,11 +815,11 @@ function readInitManifest(projectRoot) {
     return null;
   }
 }
-var MERGE_ATTEMPTS2 = 5;
+var MERGE_ATTEMPTS = 5;
 function writeInitManifest(projectRoot, m) {
   const path = join8(projectRoot, INIT_MANIFEST_REL);
   mkdirSync5(dirname5(path), { recursive: true });
-  for (let attempt = 0; attempt < MERGE_ATTEMPTS2; attempt++) {
+  for (let attempt = 0; attempt < MERGE_ATTEMPTS; attempt++) {
     const onDisk = readInitManifest(projectRoot);
     const merged = {
       ...m,
@@ -1476,7 +1527,7 @@ import { join as join24 } from "path";
 
 // src/check/files.ts
 import { execFileSync } from "child_process";
-import { readdirSync as readdirSync7, realpathSync, statSync } from "fs";
+import { readdirSync as readdirSync7, realpathSync, statSync as statSync2 } from "fs";
 import { join as join16, relative, sep } from "path";
 var EXCLUDE_DIRS = /* @__PURE__ */ new Set([
   "node_modules",
@@ -1557,7 +1608,7 @@ function walk(root, dir, out, seen) {
     let isFile = entry.isFile();
     if (entry.isSymbolicLink()) {
       try {
-        const target = statSync(abs);
+        const target = statSync2(abs);
         isDir = target.isDirectory();
         isFile = target.isFile();
       } catch {
@@ -4584,7 +4635,7 @@ function check(opts) {
 }
 
 // src/commands/init.ts
-import { existsSync as existsSync16, mkdirSync as mkdirSync6, readdirSync as readdirSync10, readFileSync as readFileSync23, rmSync as rmSync2, writeFileSync as writeFileSync5 } from "fs";
+import { existsSync as existsSync16, mkdirSync as mkdirSync6, readdirSync as readdirSync10, readFileSync as readFileSync23, rmSync as rmSync2, writeFileSync as writeFileSync4 } from "fs";
 import { dirname as dirname7, isAbsolute, join as join28, resolve as resolve2, sep as sep3 } from "path";
 
 // src/init/detect.ts
@@ -5215,7 +5266,7 @@ function wireBarrel(absPath, barrelImport) {
   if (legacy) {
     const next2 = content.slice(0, legacy.index) + `${line}
 ` + content.slice(legacy.index + legacy[0].length);
-    writeFileSync5(absPath, next2, "utf8");
+    writeFileSync4(absPath, next2, "utf8");
     return { status: "rewired", detail: "replaced the separate brand and mode imports with the barrel" };
   }
   const tailwind = /@import\s+["']tailwindcss["'];?\r?\n?/.exec(content);
@@ -5225,7 +5276,7 @@ function wireBarrel(absPath, barrelImport) {
 ` : `${line}
 `);
   mkdirSync6(dirname7(absPath), { recursive: true });
-  writeFileSync5(next === content ? absPath : absPath, next, "utf8");
+  writeFileSync4(next === content ? absPath : absPath, next, "utf8");
   return { status: "wired" };
 }
 async function init(opts) {
@@ -5385,7 +5436,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
     const defaultCssRaw = readFileSync23(join28(opts.packageRoot, "tokens", "brand.default.css"), "utf8");
     const content = renderBrandFile(defaultCssRaw, projectSlug, opts.version, proposal);
     mkdirSync6(dirname7(brandAbsPath), { recursive: true });
-    writeFileSync5(brandAbsPath, content, "utf8");
+    writeFileSync4(brandAbsPath, content, "utf8");
     files[brandRelPath] = checksum(content);
   }
   if (relocateTo && configAction !== "written") {
@@ -5393,7 +5444,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
       const existing = JSON.parse(readFileSync23(configAbsPath, "utf8"));
       const content = `${JSON.stringify({ ...existing, brand: brandRelPath }, null, 2)}
 `;
-      writeFileSync5(configAbsPath, content, "utf8");
+      writeFileSync4(configAbsPath, content, "utf8");
       files[configRelPath] = checksum(content);
       log(`  Updated ${configRelPath} to point at the new location.`);
     } catch {
@@ -5404,7 +5455,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
     const config = opts.yes ? { brand: brandRelPath } : { brand: brandRelPath, surfaces };
     const content = `${JSON.stringify(config, null, 2)}
 `;
-    writeFileSync5(configAbsPath, content, "utf8");
+    writeFileSync4(configAbsPath, content, "utf8");
     files[configRelPath] = checksum(content);
   } else if (configAction === "merged") {
     let existing = {};
@@ -5424,7 +5475,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
     };
     const content = `${JSON.stringify(merged, null, 2)}
 `;
-    writeFileSync5(configAbsPath, content, "utf8");
+    writeFileSync4(configAbsPath, content, "utf8");
     files[configRelPath] = checksum(content);
   }
   const effectiveConfig = loadEffectiveConfig(opts.projectRoot, configAbsPath, brandRelPath, surfaces);
@@ -5445,7 +5496,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
       const modeSourceRaw = readFileSync23(join28(opts.packageRoot, "tokens", modeFileName), "utf8");
       const content = vendorHeader(modeFileName, opts.version, "css", null) + modeSourceRaw;
       mkdirSync6(dirname7(modeAbsPath2), { recursive: true });
-      writeFileSync5(modeAbsPath2, content, "utf8");
+      writeFileSync4(modeAbsPath2, content, "utf8");
       files[modeRelPath] = checksum(content);
     } else {
       log(`  ${modeRelPath} exists and is not jig-tracked (or has been edited) \u2014 leaving it alone (re-run 'jig update' to refresh it).`);
@@ -5465,7 +5516,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
     }
     const content = barrelBody(barrelFor(mode), brandFileOnly, mode, opts.version);
     mkdirSync6(dirname7(abs), { recursive: true });
-    writeFileSync5(abs, content, "utf8");
+    writeFileSync4(abs, content, "utf8");
     files[rel] = checksum(content);
   }
   if (multiMode) {
@@ -5518,7 +5569,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
         } else {
           const content = utilitiesBody(aliasable, opts.version);
           mkdirSync6(dirname7(abs), { recursive: true });
-          writeFileSync5(abs, content, "utf8");
+          writeFileSync4(abs, content, "utf8");
           files[rel] = checksum(content);
           const target = findWireTarget(detection);
           const importPath = target ? relativeImportPath(
@@ -5570,7 +5621,7 @@ ${configRelPath} already exists and was not created by 'jig init' (or has been e
           return !(m && !/^[a-z]+:|^\//i.test(m[1]) && resolve2(dirname7(abs), m[1]) === bare2);
         }).join("\n");
         if (after !== before) {
-          writeFileSync5(abs, after, "utf8");
+          writeFileSync4(abs, after, "utf8");
           log(`
 Unwired ${file}: removed its import of ${relKey(...tokensRelDir, "theme.css")}.`);
           log(`  With more than one mode, the global stylesheet imports no barrel: every route would carry that mode's tokens.`);
@@ -5598,7 +5649,7 @@ Could not edit ${file}: ${err.message}. Remove its import of ${relKey(...tokensR
         const oldDirName = currentBrand.split("/").slice(0, -1).join("/");
         const before = existsSync16(abs) ? readFileSync23(abs, "utf8") : "";
         const after = before.split("\n").filter((l) => !(l.includes("@import") && l.includes(oldDirName))).join("\n");
-        if (after !== before) writeFileSync5(abs, after, "utf8");
+        if (after !== before) writeFileSync4(abs, after, "utf8");
       }
       const outcome = wireBarrel(join28(opts.projectRoot, wireTarget), barrelImport);
       wiring = { target: wireTarget, status: outcome.status, snippet };
@@ -5693,7 +5744,7 @@ import { existsSync as existsSync20, readdirSync as readdirSync13, readFileSync
 import { join as join34 } from "path";
 
 // src/probe/save.ts
-import { existsSync as existsSync19, mkdirSync as mkdirSync7, readdirSync as readdirSync12, readFileSync as readFileSync26, writeFileSync as writeFileSync6 } from "fs";
+import { existsSync as existsSync19, mkdirSync as mkdirSync7, readdirSync as readdirSync12, readFileSync as readFileSync26, writeFileSync as writeFileSync5 } from "fs";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import { join as join33, relative as relative3, resolve as resolve4, sep as sep5 } from "path";
 
@@ -6042,7 +6093,7 @@ async function evaluate(endpoint, url, width, height, timeoutMs, expression) {
 
 // src/probe/serve.ts
 import { createServer } from "http";
-import { existsSync as existsSync18, readFileSync as readFileSync24, statSync as statSync2 } from "fs";
+import { existsSync as existsSync18, readFileSync as readFileSync24, statSync as statSync3 } from "fs";
 import { extname, join as join31, resolve as resolve3, sep as sep4 } from "path";
 var TYPES = {
   ".html": "text/html; charset=utf-8",
@@ -6075,7 +6126,7 @@ async function serveDirectory(dir) {
       res.writeHead(403).end();
       return;
     }
-    if (existsSync18(file) && statSync2(file).isDirectory()) file = join31(file, "index.html");
+    if (existsSync18(file) && statSync3(file).isDirectory()) file = join31(file, "index.html");
     else if (!existsSync18(file) && existsSync18(`${file}.html`)) file = `${file}.html`;
     if (!existsSync18(file)) {
       res.writeHead(404).end();
@@ -6143,7 +6194,7 @@ function saveProbe(opts) {
   const dir = join33(opts.projectRoot, ".jig", "critique", opts.surface);
   mkdirSync7(dir, { recursive: true });
   const path = join33(dir, `probe-${width}.json`);
-  writeFileSync6(path, JSON.stringify(probe), "utf8");
+  writeFileSync5(path, JSON.stringify(probe), "utf8");
   return { path: `.jig/critique/${opts.surface}/probe-${width}.json`, width, page: probe.pageFile };
 }
 function projectFile(projectRoot, path) {
@@ -6392,14 +6443,14 @@ function decisionHeadings(projectRoot) {
 }
 
 // src/check/spec-shape.ts
-import { existsSync as existsSync22, readFileSync as readFileSync29, readdirSync as readdirSync14, statSync as statSync3 } from "fs";
+import { existsSync as existsSync22, readFileSync as readFileSync29, readdirSync as readdirSync14, statSync as statSync4 } from "fs";
 import { join as join36 } from "path";
 function newestSpec(projectRoot) {
   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(join36(dir, f)).mtimeMs })).sort((a, b) => b.at - a.at)[0].f;
+  const newest = files.map((f) => ({ f, at: statSync4(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) {
@@ -6471,7 +6522,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 +6736,159 @@ 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 statSync5, writeFileSync as writeFileSync6 } 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 drawn = frames.flatMap((f) => f.art.map((a) => `${f.size ?? "a"} frame: ${a}`));
+  if (drawn.length) {
+    problems.push(
+      `${at} draws icons or images in its frames (${[...new Set(drawn)].slice(0, 4).join("; ")}). A mockup is structure only: an icon is its name in brackets, \`[search]\`, and an image is a labelled box saying what goes there.`
+    );
+  }
+  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);
+  const recorded = declaredSwitches(root);
+  const unknown = (crossed ?? []).filter((name) => !recorded.some((sw) => sw.name === name));
+  if (unknown.length) {
+    problems.push(
+      `The spec's \`switches:\` names ${unknown.map((n) => `"${n}"`).join(", ")}, which the project does not record. Recorded: ${recorded.map((sw) => `${sw.name} (${sw.px}px)`).join(", ") || "none"}. Name them as \`--breakpoint-<name>\` gives them.`
+    );
+  }
+  for (const s of recorded.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);
+    const art = [...body.matchAll(/<(svg|img|picture|canvas)\b|<i\b[^>]*\bclass\s*=\s*["'][^"']*\b(?:fa|fa-[\w-]+|material-icons|material-symbols[\w-]*|bi|bi-[\w-]+)\b/gi)].map((m) => m[1] ? `<${m[1].toLowerCase()}>` : "an icon font");
+    return { size, width, labels, art };
+  });
+}
+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 +6906,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 +6932,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 +6947,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, statSync5(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 +6969,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 +6990,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 +7019,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 +7052,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 +7070,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 +7101,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,25 +7115,25 @@ ${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");
+        writeFileSync6(lockPath, JSON.stringify({ checksum: now }) + "\n", "utf8");
       } catch {
       }
       continue;
     }
     let locked;
     try {
-      locked = JSON.parse(readFileSync31(lockPath, "utf8")).checksum;
+      locked = JSON.parse(readFileSync32(lockPath, "utf8")).checksum;
     } catch {
       continue;
     }
@@ -6966,15 +7147,15 @@ function verdictGuard(root, command, inPlay) {
 }
 function save(file, state) {
   try {
-    mkdirSync8(join38(file, ".."), { recursive: true });
-    writeFileSync7(file, JSON.stringify(state), "utf8");
+    mkdirSync8(join39(file, ".."), { recursive: true });
+    writeFileSync6(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 +7196,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 +7252,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 +7446,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 +7485,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.8",
   "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), a
+frame either side of each recorded switch, and no icon or image in any frame. 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.