jig-ui 0.25.0 → 0.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "description": "A design system for coding agents. 160 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

@@ -262,6 +262,16 @@ It is an accessibility floor, so it is excluded from the table above — there i
 nothing per-mode about it to resolve. The same is true of `--focus-ring-width`
 and `--focus-ring-offset`, which live in the brand file for that reason.
 
+**Inside a table row, the row is the target, and every row is one height.** A
+dense row is shorter than the floor (`operator`'s 36px), and a control that
+sets its own `min-height` to the floor stretches the rows that hold it and not
+the rest: in a run, an invoices table whose "Mark paid" rows stood 48px tall
+among 36px ones. So a control in a row takes the row's height and never its
+own. For a mouse, a dense row is above WCAG 2.2's 24px minimum; for a finger it
+is not, so under `@media (pointer: coarse)` the mode files raise `--size-row`
+(and `--size-row-compact`) to `--size-touch-target`, and every row grows
+together.
+
 **Layout sizes.** Three tokens size a page's frame, where the others size what
 is inside it. A real site found none of them and made up its own three:
 

package/rules/03-patterns.md

@@ -285,6 +285,7 @@ Primarily an `operator` pattern; the rules apply wherever a table appears.
 **Rules**
 - Row identity is stable across refresh, sort and filter. A row that moves under a click causes the wrong record to be acted on — the most damaging bug this pattern has.
 - Numeric columns are right-aligned and use tabular figures (`--font-numeric`). Text columns are start-aligned. Never centre either.
+- A cell stays a table cell. To line up what is inside it (a name and a tag, an icon and a label), put `display: flex` on a wrapper inside the cell, never on the `<td>` or `<th>` itself: a cell given its own display stops taking its row's height, so its text and its border drift from the rest of the row. A table stacked on a phone, the whole table set to `block`, is the exception (`L-01`, step 6). The render probe reports a cell that has left its table.
 - Column headers state units. "Weight" is ambiguous; "Weight (kg)" is not.
 - Truncation is resolvable by click or expand, never by hover alone (`E-31`, `01-modes.md`).
 - Sort state is visible in the header and reflected in the URL, so a view can be shared.
@@ -572,10 +573,17 @@ everything else follows from.
    - **A code block** keeps its line breaks and indents and wraps a long line
      (`white-space: pre-wrap`, `overflow-wrap: anywhere`). What is copied is
      the source as written, not the wrapped lines.
-   - **A table too wide to fit** stacks its rows: each row a block, each cell a
-     line with its column's name in front. It stays a `<table>` with its header
-     row, so a screen reader still reads it as one. Where it fits, it stays a
-     table: the switch is the width at which its columns stop fitting.
+   - **A table too wide to fit** stacks its rows: each row a block, led by the
+     cell that names the row (a person, an invoice, a rule) as the block's own
+     heading, with no label in front of it. The other cells follow beneath it,
+     and a cell carries its column's name only where its value does not say
+     what it is: a bare "Yes", a number, a date. An email address, a role, a
+     status badge or a price says what it is, so it gets no "Email:", "Role:"
+     or "Status:". The row's actions sit together at the block's end, side by
+     side where they fit, with no "Actions" label. It stays a `<table>` with
+     its header row, so a screen reader still reads it as one. Where it fits,
+     it stays a table: the switch is the width at which its columns stop
+     fitting.
    - **A long identifier** (a URL, a hash, a file path) breaks where it must
      (`overflow-wrap: anywhere`).
 6. **Each transition happens where the content needs it.** The width at which

package/templates/COMMAND.md.tmpl

@@ -78,12 +78,13 @@ came from, and the surfaces it used — the output says whether they came from
 `jig.config.json` or from the default.
 
 If the token layer does not exist yet, this is the command that creates it. **Do
-not author token values yourself.** `init` derives the brand colour, checks it
+not write the token files by hand.** `init` derives the brand colour, checks it
 against the contrast floor in both light and dark, and records a checksum for
 each file it writes; a file you write by hand is untracked, so `jig update` can
-never refresh it again. `jig check` now reads the token layer back and holds it
-to those floors either way, so a hand-written value will be caught — but caught
-late, and unmaintainable, is worse than derived.
+never refresh it again. The brand file it writes is the project's own, though:
+once `DECISIONS.md` records a colour, a typeface or corners, change those values
+in it to match (see `decide`). `jig check` reads the token layer back and holds it
+to those floors, so a value that fails one is caught however it got there.
 
 ## check
 
@@ -1973,6 +1974,18 @@ the user as left out on purpose, with the reason. Then go the other way: every
 and ask. A `Why (inferred):` traces to what it was inferred from; say what that was.
 Include this mapping in your message, below the file.
 
+**Then put the answers into the brand file.** The type, the colour and the
+corners each name the token they become, and the brand file `init` wrote is the
+project's own: `jig update` refreshes the mode files and never touches it. Change
+its values to match what the user decided: the brand hue, saturation and lightness
+for the colour, `--font-text` and `--font-display` for the type (and load the face
+wherever the pages load their styles, if it is a web font), and the `--radius-*`
+scale for the corners. A value the user did not decide stays as `init` wrote it.
+Then run `{{scripts_path}} check`: it holds the brand file to the contrast floors
+in light and dark, and says if a decided colour or typeface never reached it. Of
+six runs whose owner named a colour and a typeface, four recorded both in this file
+and built every page in Jig's unbranded default, because no step said to apply them.
+
 Show it and ask the user to confirm it is right before you stop. Leave no
 `[TODO]` markers — the gate treats them as an unwritten file, correctly, because
 a placeholder decision is not a decision.

package/tokens/brand.default.css

@@ -117,9 +117,13 @@
   --focus-ring-offset: 2px;
 
   /* ================= TYPE ================= */
-  --font-text:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  /* Each platform's own interface face, named one by one: San Francisco,
+     Segoe UI, Roboto, then Noto Sans and Helvetica/Arial for the rest.
+     `system-ui` is left out on purpose: on Linux it resolves to the desktop's
+     own font, often DejaVu Sans, before any face below it is tried. */
+  --font-text:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
   --font-display: var(--font-text);
-  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", monospace;
+  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Code", "Liberation Mono", monospace;
   --font-numeric-features: "tnum" 1, "lnum" 1;
 
   /* ================= RADIUS — four, by element size ================= */

package/tokens/mode.operator.css

@@ -102,3 +102,12 @@
 @media (prefers-reduced-motion: reduce) {
   :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
 }
+
+/* On a touch screen a table row is a finger's target. A dense row (36px, 32px
+   compact) is above WCAG 2.2's 24px minimum for a mouse, and below the 48px a
+   finger needs, so under a coarse pointer every row rises to the floor. A
+   control inside a row never sets its own height to reach it: every row in a
+   table is one height, and here the tokens make that height the right one. */
+@media (pointer: coarse) {
+  :root { --size-row: var(--size-touch-target); --size-row-compact: var(--size-touch-target); }
+}

package/tokens/mode.product.css

@@ -105,3 +105,10 @@
 @media (prefers-reduced-motion: reduce) {
   :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
 }
+
+/* On a touch screen a table row is a finger's target: a compact row (40px)
+   rises to the 48px floor under a coarse pointer, as `operator`'s rows do. A
+   control inside a row never sets its own height to reach it. */
+@media (pointer: coarse) {
+  :root { --size-row-compact: var(--size-touch-target); }
+}