jig-ui 0.17.0 → 0.17.2

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## 0.17.2
+
+Four defects found by building one page with the full loop.
+
+### Fixed
+
+- **Every mode declares every token name.** `editorial` had no row heights or
+  `--font-numeric`, and `product` and `operator` had no ambient durations. A
+  project with two modes shares one alias block, so those aliases resolved to
+  nothing on the routes of the mode that lacked them; a real site's editorial
+  pages had three undefined utilities, and the probe failed them. Each mode now
+  states a value for each name (ambient motion is `0s` outside `editorial`),
+  and `check-tokens` Rule 14 fails a mode file that declares a name another
+  does not.
+- **The gate no longer marks a critique as touched by writing its own lock.**
+  0.17.1 judged only critiques touched this session, but a critique session
+  wrote a lock into every critique folder, and the next stop read that write as
+  a touch. Locks are now written only for the critiques in play, and the lock
+  file is ignored when dating a folder.
+- **The probe does not take an in-page section list for the site menu.** A
+  `<summary>` in a `<nav>` inside `<main>`, `<article>` or `<aside>` is page
+  navigation; judging it as a menu failed a rule page's "More in this section"
+  disclosure for not behaving like one.
+- **Every example fits 320 by 260.** The examples README promised about
+  320 by 180; one figure was 363px wide and four were taller. The bound is now
+  stated as measured, the two outliers are trimmed, and a test renders all 286
+  figures in Chrome and fails any wider or taller.
+
+## 0.17.1
+
+### Fixed
+
+- **The gate judges the critiques a session touched, not every critique.**
+  A spec for one page could not finish because another page's critique
+  predated 0.17.0, whose new rules that critique had never judged, and a
+  record the project had set aside still failed for screenshots it no longer
+  had. The gate now checks a critique with a file changed since the session
+  began, and the current spec's surface after `critique`. A folder whose name
+  starts with `_` is set aside and never judged. With no transcript, as when
+  the gate is run by hand, it checks every critique as before.
+
 ## 0.17.0
 
 Thirteen more tells of a generated page, ten of them caught by `check`, and a

package/dist/index.js

@@ -5763,7 +5763,12 @@ var PROBE_SCRIPT = `(async () => {
   const navAtRest = navLinks();
   // The menu control: inside the header or navigation, or named as the menu.
   // Not any disclosure \u2014 an FAQ <summary> is not a menu.
-  const inChrome = (b) => !!b.closest('header, nav, [role=navigation], [role=banner]');
+  // The site's navigation, not a page's own: a <nav> inside <main>, an
+  // <article> or an <aside> is in-page navigation (a section list, a table of
+  // contents), and its <summary> is a disclosure the reader opens, not the menu.
+  // A rule page's "More in this section" list was judged a broken menu this way.
+  const inChrome = (b) => !!b.closest('header, [role=banner]') ||
+    (!!b.closest('nav, [role=navigation]') && !b.closest('main, article, aside, [role=main]'));
   const named = (b) => /\b(menu|navigation)\b/i.test((b.getAttribute('aria-label') || '') + ' ' + b.textContent);
   const toggle = [...document.querySelectorAll('button, summary, [role=button]')].find((b) => vis(b) &&
     (named(b) || (inChrome(b) && (b.tagName === 'SUMMARY' || b.hasAttribute('aria-expanded') || b.hasAttribute('aria-controls')))));
@@ -5928,7 +5933,7 @@ async function runProbe(opts) {
         fail(new Error(`${chrome} exited with code ${code} before it was ready.`));
       });
     });
-    return await evaluate(endpoint, opts.url, opts.width, opts.height ?? 900, timeoutMs);
+    return await evaluate(endpoint, opts.url, opts.width, opts.height ?? 900, timeoutMs, opts.expression ?? PROBE_SCRIPT);
   } finally {
     const exited = child.exitCode !== null ? Promise.resolve() : new Promise((done) => child.once("exit", () => done()));
     child.kill();
@@ -5939,7 +5944,7 @@ async function runProbe(opts) {
     }
   }
 }
-async function evaluate(endpoint, url, width, height, timeoutMs) {
+async function evaluate(endpoint, url, width, height, timeoutMs, expression) {
   const socket = new WebSocket(endpoint);
   let nextId = 1;
   const pending = /* @__PURE__ */ new Map();
@@ -5983,7 +5988,7 @@ async function evaluate(endpoint, url, width, height, timeoutMs) {
       ]);
     }
     await new Promise((done) => setTimeout(done, 250));
-    const result = await send("Runtime.evaluate", { expression: PROBE_SCRIPT, awaitPromise: true, returnByValue: true }, session);
+    const result = await send("Runtime.evaluate", { expression, awaitPromise: true, returnByValue: true }, session);
     const value = result.result?.value;
     if (typeof value !== "string") {
       const description = result.exceptionDetails?.text;
@@ -6159,7 +6164,7 @@ async function ensureProbes(opts) {
 function critiquedSurfaces(projectRoot) {
   const root = join32(projectRoot, ".jig", "critique");
   if (!existsSync19(root)) return [];
-  return readdirSync12(root).filter((surface) => existsSync19(join32(root, surface, "screen.json")) || existsSync19(join32(root, surface, "code.json")));
+  return readdirSync12(root).filter((surface) => !surface.startsWith("_") && (existsSync19(join32(root, surface, "screen.json")) || existsSync19(join32(root, surface, "code.json"))));
 }
 
 // src/probe/check.ts
@@ -6575,7 +6580,7 @@ function verifyVerdicts(opts) {
 }
 
 // src/commands/gate.ts
-import { existsSync as existsSync24, mkdirSync as mkdirSync8, readdirSync as readdirSync15, readFileSync as readFileSync30, writeFileSync as writeFileSync7 } from "fs";
+import { existsSync as existsSync24, mkdirSync as mkdirSync8, readdirSync as readdirSync15, readFileSync as readFileSync30, statSync as statSync4, writeFileSync as writeFileSync7 } from "fs";
 import { createHash as createHash2 } from "crypto";
 import { join as join37 } from "path";
 var MAX_BLOCKS = 3;
@@ -6624,6 +6629,38 @@ function asksOwner(text) {
   return /\?(?=[\s)\]"'*_]|$)/.test(prose);
 }
 var ASKS_THE_OWNER = /* @__PURE__ */ new Set(["decide", "spec", "mockup"]);
+function sessionStart(transcriptPath) {
+  if (!transcriptPath || !existsSync24(transcriptPath)) return void 0;
+  try {
+    for (const line of readFileSync30(transcriptPath, "utf8").split("\n")) {
+      const m = /"timestamp"\s*:\s*"([^"]+)"/.exec(line);
+      if (m) {
+        const t = Date.parse(m[1]);
+        if (!Number.isNaN(t)) return t;
+      }
+    }
+  } catch {
+  }
+  return void 0;
+}
+function newestMtime(dir) {
+  let newest = 0;
+  for (const name of readdirSync15(dir, { withFileTypes: true })) {
+    if (name.name === LOCK) continue;
+    const path = join37(dir, name.name);
+    newest = Math.max(newest, name.isDirectory() ? newestMtime(path) : statSync4(path).mtimeMs);
+  }
+  return newest;
+}
+function surfacesInPlay(root, command, transcriptPath) {
+  const critiqueDir = join37(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 || newestMtime(join37(critiqueDir, s)) >= start - 1e3);
+}
 function commandProblems(root, command) {
   const problems = [];
   const spec = newestSpec(root);
@@ -6712,10 +6749,10 @@ function gate(opts) {
       );
     }
   }
-  problems.push(...verdictGuard(root, command));
+  problems.push(...verdictGuard(root, command, surfacesInPlay(root, command, opts.input.transcript_path)));
   const critiqueDir = join37(root, ".jig", "critique");
   if (existsSync24(critiqueDir)) {
-    for (const surface of readdirSync15(critiqueDir)) {
+    for (const surface of surfacesInPlay(root, command, opts.input.transcript_path)) {
       const dir = join37(critiqueDir, surface);
       if (!existsSync24(join37(dir, "screen.json")) && !existsSync24(join37(dir, "code.json"))) continue;
       const v = verifyVerdicts({ projectRoot: root, surface });
@@ -6775,16 +6812,17 @@ ${readFileSync30(join37(dir, f), "utf8")}`;
   });
   return parts.some(Boolean) ? checksum(parts.join("\n")) : void 0;
 }
-function verdictGuard(root, command) {
+function verdictGuard(root, command, inPlay) {
   const critiqueDir = join37(root, ".jig", "critique");
   if (!existsSync24(critiqueDir)) return [];
   const problems = [];
   for (const surface of readdirSync15(critiqueDir)) {
+    if (surface.startsWith("_")) continue;
     const dir = join37(critiqueDir, surface);
     const now = verdictChecksum(dir);
     if (!now) continue;
     const lockPath = join37(dir, LOCK);
-    if (command === "critique") {
+    if (command === "critique" && (!inPlay || inPlay.includes(surface))) {
       try {
         writeFileSync7(lockPath, JSON.stringify({ checksum: now }) + "\n", "utf8");
       } catch {

package/examples/I-82.html

@@ -1,6 +1,6 @@
 <!-- I-82 · Uneven text length across parallel elements -->
 <figure data-example="dont">
-  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap;align-items:stretch"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Words.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Saved questions that run every five minutes and message you when the answer changes.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Sharing</b><div style="color:#5c5c5c;margin-top:4px;">A link.</div></div></div></div>
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap;align-items:stretch"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Words.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Saved questions that run every five minutes and tell you on change.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Sharing</b><div style="color:#5c5c5c;margin-top:4px;">A link.</div></div></div></div>
 </figure>
 <figure data-example="do">
   <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap;align-items:stretch"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Ask in plain English.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Hear when an answer changes.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Sharing</b><div style="color:#5c5c5c;margin-top:4px;">Send any result by link.</div></div></div></div>

package/examples/K-132.html

@@ -3,5 +3,5 @@
   <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">API key</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace">tw_live_8f2c91a7d44e0b6c3e</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">On screen, in a screenshot, in a screen share.</div></div>
 </figure>
 <figure data-example="do">
-  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">API key</div><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap"><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;flex:1">tw_live_••••••••••0b6c3e</div><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Copy</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Reveal</span></div></div></div>
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">API key</div><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap"><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;flex:1;min-width:0">tw_live_••••6c3e</div><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Copy</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Reveal</span></div></div></div>
 </figure>

package/examples/README.md

@@ -22,8 +22,11 @@ for them. The example is the picture beside the name.
 - **Self-contained.** Styles are `style` attributes on the elements. No `<style>`,
   `<script>`, `<link>`, event handler, or external URL. A consumer renders a figure
   in a sandboxed frame or an inert box, and it has to look the same in both.
-- **Small.** A figure is drawn for a box about 320 by 180 pixels. It exaggerates
-  just enough to be recognised, and no more.
+- **Small, and bounded.** A figure is drawn 320 pixels wide and is at most 260
+  tall; most are 176. Frame each one at 320 by 260, or size the frame to the
+  figure's measured height. A figure that shows content running off an edge
+  clips it inside itself, so nothing ever spills past 320. It exaggerates just
+  enough to be recognised, and no more.
 - **Raw values are fine here.** An example has to show violet, a glow, a 44px
   radius. It is a specimen of the failure, not a component, so the token rule
   that governs a real page does not apply inside it.
@@ -41,4 +44,5 @@ Where even that is impossible, the figure shows the code, set as code.
 
 `packages/cli/test/examples.test.ts` fails when a rule has no example, when a file
 has other than one `dont` and one `do`, or when a figure carries anything that
-would not render the same in a sandbox.
+would not render the same in a sandbox. It also renders every figure in a real
+browser and fails any wider than 320 pixels or taller than 260.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "A design system for coding agents. 143 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
   "license": "Apache-2.0",
   "type": "module",

package/rules/02-tokens.md

@@ -194,24 +194,28 @@ mode states its own value, because density is the thing a mode *is*.
 | --- | --- | --- | --- |
 | `--size-control` | 48px | 40px | 32px |
 | `--size-control-sm` | 40px | 32px | 28px |
-| `--size-row` | — | 48px | 36px |
-| `--size-row-compact` | — | — | 32px |
+| `--size-row` | 56px | 48px | 36px |
+| `--size-row-compact` | 48px | 40px | 32px |
 | `--size-icon` | 20px | 18px | 16px |
 | `--duration-fast` | 150ms | 100ms | 75ms |
 | `--duration-base` | 250ms | 150ms | 100ms |
 | `--duration-slow` | 300ms | 200ms | 120ms |
-| `--duration-ambient-fast` | 3s | — | — |
-| `--duration-ambient-base` | 4.7s | — | — |
-| `--duration-ambient-slow` | 7.1s | — | — |
+| `--duration-ambient-fast` | 3s | 0s | 0s |
+| `--duration-ambient-base` | 4.7s | 0s | 0s |
+| `--duration-ambient-slow` | 7.1s | 0s | 0s |
 | `--measure-prose` | 68ch | 60ch | 72ch |
 | `--ease-out` | cubic-bezier(0.16, 1, 0.3, 1) | cubic-bezier(0.16, 1, 0.3, 1) | cubic-bezier(0.2, 0, 0, 1) |
 | `--ease-in-out` | cubic-bezier(0.65, 0, 0.35, 1) | cubic-bezier(0.65, 0, 0.35, 1) | cubic-bezier(0.4, 0, 0.2, 1) |
 
-A `—` means the mode does not define that token: `editorial` has no row
-heights because it has no dense record views, and `product` selects a single
-row height rather than a compact variant. A pattern that needs one in those
-modes is using the wrong mode, or the mode file needs the token added
-deliberately.
+**Every mode declares every token name.** A project with two modes shares one
+alias block (`utilities.css`) between them, and an alias for a token one mode
+never declares points at nothing on that mode's routes: on a real site, three
+utilities for row height and tabular figures were undefined on every editorial
+page. So each mode states a value for each name, even where the value is only
+a fallback: `editorial` rows are sized to its controls, though it rarely shows
+dense records, and ambient motion is `0s` outside `editorial` (`P-13`), so a
+shared class resolves and nothing loops. `check-tokens` fails a mode file that
+declares a name another does not.
 
 **The ambient periods are a chord, not a ladder.** The three interaction
 durations are a scale — fast, base, slow, pick by weight of change. The three

package/templates/COMMAND.md.tmpl

@@ -1191,6 +1191,12 @@ blocking. It also refuses when a critique's verdict files changed after `critiqu
 wrote them, in a session that did not run `critique`: a fix is judged by the next
 review, never by the builder editing the last one.
 
+It judges the critiques this session touched: any with a file changed since the
+session began, and the current spec's surface when you ran `critique`. Another
+page's older critique does not hold you back. To set a critique aside for good,
+rename its folder with a leading underscore (`.jig/critique/_old-catalog`); the
+gate never judges it.
+
 A warning you are sure is right as it stands, because the detector guessed and the
 guess is wrong here, is waived on its own line or the line above, in the file's
 comment syntax: `jig-allow <ID>: <why>`. The reason is what the user reads, so write

package/tokens/mode.editorial.css

@@ -75,6 +75,7 @@
   --grid-margin:  var(--spacing-xxl); --grid-margin-sm: var(--spacing-s);   /* 80 → 16 */
 
   --size-control: 48px;  --size-control-sm: 40px;
+  --size-row: 56px;  --size-row-compact: 48px;
   --size-touch-target: 48px;  --size-icon: 20px;
 
   --border-width-control: var(--border-width-hairline);
@@ -102,6 +103,10 @@
   --duration-ambient-fast: 3s;
   --duration-ambient-base: 4.7s;
   --duration-ambient-slow: 7.1s;
+
+  /* Every mode declares every token name, so one alias block (utilities.css)
+     resolves on every surface. Tabular figures are harmless in prose. */
+  --font-numeric: var(--font-numeric-features);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/tokens/mode.operator.css

@@ -83,6 +83,13 @@
      have anything moving on it that they did not cause. */
 
   --font-numeric: var(--font-numeric-features);
+
+  /* Every mode declares every token name, so one alias block (utilities.css)
+     resolves on every surface. Ambient motion is editorial's (P-13); here it
+     is declared still, so a shared class resolves and nothing loops. */
+  --duration-ambient-fast: 0s;
+  --duration-ambient-base: 0s;
+  --duration-ambient-slow: 0s;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/tokens/mode.product.css

@@ -71,7 +71,7 @@
   --grid-gutter:  var(--spacing-m);   --grid-gutter-sm: var(--spacing-s);   /* 24 → 16 */
   --grid-margin:  var(--spacing-l);   --grid-margin-sm: var(--spacing-s);   /* 32 → 16 */
 
-  --size-control: 40px;  --size-control-sm: 32px;  --size-row: 48px;
+  --size-control: 40px;  --size-control-sm: 32px;  --size-row: 48px;  --size-row-compact: 40px;
   --size-touch-target: 48px;  --size-icon: 18px;
 
   --border-width-control: var(--border-width-hairline);
@@ -85,6 +85,14 @@
   /* No ambient duration tokens here, deliberately. Ambient motion is
      editorial only (P-13) — a surface someone works in all day must not
      have anything moving on it that they did not cause. */
+
+  /* Every mode declares every token name, so one alias block (utilities.css)
+     resolves on every surface. Ambient motion is editorial's (P-13); here it
+     is declared still, so a shared class resolves and nothing loops. */
+  --font-numeric: var(--font-numeric-features);
+  --duration-ambient-fast: 0s;
+  --duration-ambient-base: 0s;
+  --duration-ambient-slow: 0s;
 }
 
 @media (prefers-reduced-motion: reduce) {