jig-ui 0.17.1 → 0.17.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # 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

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;
@@ -6641,6 +6646,7 @@ function sessionStart(transcriptPath) {
 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);
   }
@@ -6743,7 +6749,7 @@ 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 surfacesInPlay(root, command, opts.input.transcript_path)) {
@@ -6806,7 +6812,7 @@ ${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 = [];
@@ -6816,7 +6822,7 @@ function verdictGuard(root, command) {
     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.1",
+  "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/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) {