@erclx/canon 5.77.0 → 5.78.0

package/src/commands/pr.ts

@@ -43,6 +43,8 @@ import {
   isEvidencePath,
   PNG_HEADER_BYTES,
   readChecklistBoxes,
+  countDrivable,
+  type ChecklistBox,
   readOwed,
   readPngWidth,
   readUncaptured,
@@ -51,6 +53,7 @@ import {
   settleChecklist,
 } from '@/pr/evidence'
 import { isWithinTolerance } from '@/pr/pixels'
+import { REEL_MAX_BYTES } from '@/take/reel'
 import {
   dropFramesWithLegacy,
   FRAMES_BRANCH,
@@ -64,7 +67,6 @@ import {
   LEGACY_FRAMES_BRANCH,
   pruneFramesWithLegacy,
   pushFrame,
-  REEL_MAX_BYTES,
   readFrame,
   readReel,
   isDesignReference,
@@ -83,6 +85,7 @@ import {
   type PullState,
   readBaseStanding,
   readChangedPaths,
+  readsDrivableBox,
 } from '@/pr/lift'
 import { close, type CloseApi, type CloseRefusal } from '@/pr/close'
 import {
@@ -171,7 +174,8 @@ interface ReadOptions {
 
 interface EvidenceOptions extends ReadOptions {
   readonly preview?: string
-  readonly checklist?: string
+  /** A path to fold in, or false from `--no-checklist` to drop the carried one. */
+  readonly checklist?: string | false
   readonly local?: string
   readonly reel?: string
   readonly localSkip?: string
@@ -255,7 +259,7 @@ const TICK_REFUSALS: Record<TickReason | 'gh-failed', string> = {
   'no-box':
     'A named box is past the end of the checklist. Number boxes off `canon pr evidence --json`.',
   'taste-box':
-    'A named box ends in (taste), which no driver passes. Nothing was written.',
+    'A named box carries (taste) among its trailing markers, which no driver passes. Nothing was written.',
   'gh-failed':
     'gh could not read or edit the marked comment on this pull request.',
 }
@@ -438,7 +442,7 @@ type EvidenceRefusal =
 
 const EVIDENCE_REFUSALS: Record<EvidenceRefusal, string> = {
   'check-writes':
-    '--check is a read and renders no body, so it takes none of --preview, --local, --checklist, --reel, --local-skip, or --reel-skip. Run the check and the render as two calls.',
+    '--check is a read and renders no body, so it takes none of --preview, --local, --checklist, --no-checklist, --reel, --local-skip, or --reel-skip. Run the check and the render as two calls.',
   'gh-failed':
     'gh could not answer for this repository. Name the pull request number.',
   'unreadable-checklist':
@@ -709,9 +713,11 @@ export function register(program: Command): void {
         '',
         '`ui` also carries the newest `## UI review` pass (`heading`, `state`,',
         '`commit`, `source`), `isBound`, which is whether the evidence comment',
-        'carries a checklist, and `carriedFrom` when the lift carried a close',
-        'forward, or `drivenPaths` and the painted subset `paintedPaths` when it',
-        'refused to. An unbound family reads covered.',
+        'carries a checklist holding a box a driver can run or the newest UI',
+        'pass is open, so a checklist of taste boxes alone binds nothing until',
+        'a pass opens, and `carriedFrom` when the lift carried a close',
+        'forward, or `drivenPaths` and the painted subset `paintedPaths` when',
+        'it refused to. An unbound family reads covered.',
         '',
         'Both families post as pull request reviews, so this reads',
         '`pulls/<n>/reviews` alone, as the lift does. Issue comments are not',
@@ -772,6 +778,10 @@ export function register(program: Command): void {
       '--checklist <path>',
       'Close the body with this visual checklist file, from canon:ui-checklist',
     )
+    .option(
+      '--no-checklist',
+      'Drop the checklist the marked comment carries, rendering the body without it',
+    )
     .option(
       '--local <url>',
       "Add this worktree's running server to the address line, from canon pr local",
@@ -809,8 +819,9 @@ export function register(program: Command): void {
         'Read `reason` on the JSON record before posting anything:',
         '  ok           a body was rendered, with `commentId` set when a marked',
         '               comment already exists and should be edited in place',
-        '  no-evidence  nothing in the diff carries an evidence/ segment, which',
-        '               is an ordinary, silent no-op rather than a refusal',
+        '  no-evidence  nothing in the diff carries an evidence/ segment and no',
+        '               painted path is uncaptured, which is an ordinary,',
+        '               silent no-op rather than a refusal',
         '  would-empty  the render holds no cases and the marked comment holds',
         '               some, so no body is printed and a person edits the comment',
         '',
@@ -853,6 +864,12 @@ export function register(program: Command): void {
         'branch with a checklist and no evidence image renders a marked body',
         'holding the checklist, so a later call finds and edits that comment.',
         '',
+        '--no-checklist drops the checklist the marked comment carries, so the',
+        'body renders without it and the record reports no checklist fields.',
+        'A marked comment holding a checklist still renders as ok rather than',
+        'no-evidence, so the comment is edited rather than left showing it.',
+        'Of --checklist and --no-checklist, the last one passed wins.',
+        '',
         '--local adds a **Local preview:** segment after any hosted one on the',
         'address line, or carries the line alone, and is carried forward the',
         'same way. It does not by itself turn no-evidence into ok, so a',
@@ -891,9 +908,13 @@ export function register(program: Command): void {
         '  checklist  the checklist between its delimiters, ticks included',
         '  boxes      each checklist box with its number, tick, stamp, and taste',
         '             mark, the numbering `canon pr tick` takes',
+        '  drivable   how many boxes a driver can run, every box but one whose',
+        '             trailing markers hold (taste), in any order. Zero binds no',
+        '             UI review, so `canon pr lift` and `review-state` leave the',
+        '             UI family unbound',
         'These come from the comment already posted, never from the flags this',
         'call passed. A checklist the caller posted raw after a refused render',
-        'carries no marker, so the record reports none of the three for it. An',
+        'carries no marker, so the record reports none of these for it. An',
         'unread thread refuses as gh-failed on both reasons rather than',
         'reporting the fields absent.',
         '',
@@ -907,6 +928,14 @@ export function register(program: Command): void {
         'unchecked rather than clean. It never adds to `owed`, since no step of',
         'the ship chain can take a capture.',
         '',
+        'A rendered body carries the list as an **Uncaptured:** line under the',
+        'addresses, each path in a code span. A non-empty list opens a comment',
+        'the way a checklist does, so a head whose only news is an uncaptured',
+        'path reports ok rather than no-evidence. The line is computed on every',
+        'render and never carried, so it drops once a capture empties the list',
+        'or a reel filmed at the head renders beside it. `canon pr lift`',
+        'refuses `painted-uncaptured` on the same list.',
+        '',
         '--check reads the same changed set and thread, renders no body, and',
         'reports what the ship chain still owes the pull request:',
         '  settled  nothing is owed',
@@ -917,8 +946,8 @@ export function register(program: Command): void {
         'request changed, and the marked comment carries no **Preview:**',
         'address. A failed deploy reads the same as a skipped one.',
         'The record carries `owed` and the same marked fields. --check refuses',
-        'with --preview, --local, --checklist, --reel, --local-skip, or',
-        '--reel-skip as check-writes.',
+        'with --preview, --local, --checklist, --no-checklist, --reel,',
+        '--local-skip, or --reel-skip as check-writes.',
         '',
         'Refusals, read off `reason`:',
         '  unreadable-checklist  --checklist named a path that could not be read,',
@@ -973,7 +1002,9 @@ export function register(program: Command): void {
         'they are read:',
         '  review    the newest `## Review` is closed at the head, off its marker',
         '  ui        the newest `## UI review` is closed at the head, bound only',
-        '            where `canon pr evidence --check` carries a checklist. A close',
+        '            where `canon pr evidence --check` carries a checklist whose',
+        '            `drivable` count is not zero, a missing count binding. An',
+        '            open UI review refuses `ui-open` whatever the count. A close',
         '            on an earlier commit still holds when it is an ancestor of the',
         '            head and every path changed since is one no box can observe,',
         '            being tests, stories, snapshots, markdown in the root and in',
@@ -984,7 +1015,19 @@ export function register(program: Command): void {
         '            a box drives behavior a `.ts` file holds too. A close whose',
         '            count line shows boxes not driven and none passed, failed,',
         '            or needing eyes refuses `ui-undriven`, carried or not',
-        '  evidence  the evidence check reads settled',
+        '  evidence  the evidence check reads settled, and every painted path',
+        '            it lists as `uncaptured` is covered. A reel the marked',
+        '            comment embeds at the head covers every path, and a',
+        '            `- **Waived capture:** `<path>`: <reason>` line outside a code',
+        '            fence covers the path it names as the list spells it. Only',
+        '            the newest `## Review` and the newest `## UI review` count,',
+        '            each closed by its own marker and not dismissed, so a pass',
+        '            must restate a waiver for it to hold on a later head. A',
+        '            review with no pass heading waives nothing. Any other path',
+        '            refuses `painted-uncaptured`,',
+        '            the gate entry naming what is left as `uncaptured` and what',
+        '            a review waived as `waived`, each sorted. An absent list,',
+        '            in a project whose base keeps no captures, passes',
         '  standing  the head is fresh against the base, not stale or conflicted',
         '  ci        every required check run on the tip passed, waited on up to --wait',
         '',
@@ -1014,7 +1057,8 @@ export function register(program: Command): void {
         '  lifted, already-ready, redrafted, clear (--check)',
         '  pull-closed, review-missing, review-open, review-unmarked,',
         '  review-behind, ui-missing, ui-open, ui-unmarked, ui-behind,',
-        '  ui-undriven, evidence-owed, standing-stale, standing-conflict, standing-unknown,',
+        '  ui-undriven, evidence-owed, painted-uncaptured, standing-stale,',
+        '  standing-conflict, standing-unknown,',
         '  ci-pending (--check), ci-failing, ci-conflicted, ci-timeout,',
         '  head-moved, gh-failed',
         '',
@@ -1367,7 +1411,7 @@ export function register(program: Command): void {
         '               nothing written, with `driven`, `head`, and `drivenPaths`',
         '  stale-head   --head is behind the tip with no readable linear gap,',
         '               as a force-push or a rebase leaves, nothing written',
-        '  taste-box    a named box ends in (taste), nothing written',
+        '  taste-box    a named box carries (taste), nothing written',
         '  no-box       a named number is past the checklist, nothing written',
         '  no-checklist the evidence comment carries no checklist',
         '  no-comment   no comment carries the evidence marker',
@@ -2065,7 +2109,7 @@ async function listReviews(cwd: string, number: string) {
   return listPages<RestReview>(
     cwd,
     `repos/{owner}/{repo}/pulls/${number}/reviews`,
-    'id, body, commit_id, submitted_at',
+    'id, body, commit_id, submitted_at, state',
   )
 }
 
@@ -2439,7 +2483,9 @@ function logReviewState(number: number, record: ReviewStateRecord): void {
     else logWarn(line)
   }
   if (!record.ui.isBound) {
-    logInfo('ui: the evidence carries no checklist, so the family is unbound')
+    logInfo(
+      'ui: the evidence carries no box a driver can run, so the family is unbound',
+    )
   }
 }
 
@@ -2708,7 +2754,7 @@ async function runEvidence(
   // Read ahead of anything else, so a bad path refuses before a `gh` round
   // trip rather than after one.
   let suppliedChecklist: string | undefined
-  if (opts.checklist !== undefined) {
+  if (typeof opts.checklist === 'string') {
     suppliedChecklist = await readFile(resolve(root, opts.checklist), 'utf8')
       .then((text) => text.trim() || undefined)
       .catch(() => undefined)
@@ -2794,7 +2840,10 @@ async function runEvidence(
   commentId = findEvidenceCommentId(comments)
   existingCases = findEvidenceCaseCount(comments)
   carriedPreview = findEvidencePreview(comments)
-  carriedChecklist = findEvidenceChecklist(comments)
+  // A dropped checklist is not carried, so neither the record nor the render
+  // shows it, while the marked comment holding it still counts below.
+  const postedChecklist = findEvidenceChecklist(comments)
+  carriedChecklist = opts.checklist === false ? undefined : postedChecklist
   carriedLocal = findEvidenceLocal(comments)
   const carriedReel = findEvidenceReel(comments)
 
@@ -2804,10 +2853,7 @@ async function runEvidence(
     ...(carriedPreview !== undefined && { preview: carriedPreview }),
     ...(carriedLocal !== undefined && { local: carriedLocal }),
     ...(carriedReel !== undefined && { reel: carriedReel }),
-    ...(carriedChecklist !== undefined && {
-      checklist: carriedChecklist,
-      boxes: readChecklistBoxes(carriedChecklist),
-    }),
+    ...(carriedChecklist !== undefined && checklistFields(carriedChecklist)),
   }
 
   // A deploy that resolves and does not build from any changed path makes a
@@ -2866,13 +2912,18 @@ async function runEvidence(
   // A checklist opens a comment on its own, so it always lands in the marked
   // comment a later call edits. A local address rides on a checklist or a
   // hosted preview and never opens one alone, so a docs-only branch with a
-  // server up posts nothing.
+  // server up posts nothing. An uncaptured painted path opens one too, so the
+  // gap the lift refuses on shows on the thread.
+  // A dropped checklist still opens a render, so the marked comment holding
+  // it is edited without the block rather than left showing it.
   const hasChecklist =
-    suppliedChecklist !== undefined || carriedChecklist !== undefined
+    suppliedChecklist !== undefined || postedChecklist !== undefined
+  const hasUncaptured = uncaptured !== undefined && uncaptured.length > 0
   if (
     grouped.kind === 'refused' &&
     opts.preview === undefined &&
-    !hasChecklist
+    !hasChecklist &&
+    !hasUncaptured
   ) {
     logStep('Skipped')
     logInfo(
@@ -2933,6 +2984,7 @@ async function runEvidence(
     local,
     reel,
     skips,
+    uncaptured,
   )
 
   const caseCount = states.reduce((n, s) => n + s.items.length, 0)
@@ -3030,6 +3082,16 @@ async function runEvidence(
   return 0
 }
 
+/** The record fields a checklist carries, with `drivable` counting the boxes a driver can run. */
+function checklistFields(checklist: string): {
+  checklist: string
+  boxes: ChecklistBox[]
+  drivable: number
+} {
+  const boxes = readChecklistBoxes(checklist)
+  return { checklist, boxes, drivable: countDrivable(boxes) }
+}
+
 async function readWorkflows(root: string): Promise<WorkflowFile[]> {
   const dir = join(root, '.github', 'workflows')
   if (!existsSync(dir)) return []
@@ -4122,7 +4184,7 @@ const LIFT_REFUSALS: Record<LiftRefusal | 'bad-wait' | 'gh-missing', string> = {
   'review-behind':
     'The newest code review closed on an earlier commit than the head.',
   'ui-missing':
-    'The evidence comment carries a checklist and no UI review has been posted.',
+    'The evidence comment carries a checklist holding a box a driver can run, and no UI review has been posted.',
   'ui-open': 'The newest UI review is open, so a box still owes a fix.',
   'ui-unmarked':
     'The newest UI review carries no head marker, so the commit it covers is a GitHub stamp this gate does not trust.',
@@ -4132,6 +4194,8 @@ const LIFT_REFUSALS: Record<LiftRefusal | 'bad-wait' | 'gh-missing', string> = {
     'The newest UI review closed having driven no box, so it looked at nothing. Re-drive the checklist on an address that answers.',
   'evidence-owed':
     'The evidence check reads owed, so the ship chain left a step undone.',
+  'painted-uncaptured':
+    'A painted path changed with no capture, no reel at the head, and no waiver in a review. Capture it, or have a review waive it.',
   'standing-stale':
     'The base moved under a path this branch writes since it branched, so CI measured a tree that is gone.',
   'standing-conflict': 'The head does not merge cleanly into the base.',
@@ -4235,7 +4299,14 @@ async function readEvidenceGate(
     .at(-1)
   if (last === undefined) return undefined
 
-  let record: { reason?: unknown; owed?: unknown; checklist?: unknown }
+  let record: {
+    reason?: unknown
+    owed?: unknown
+    checklist?: unknown
+    drivable?: unknown
+    uncaptured?: unknown
+    reel?: unknown
+  }
   try {
     record = JSON.parse(last)
   } catch {
@@ -4243,12 +4314,27 @@ async function readEvidenceGate(
   }
   if (record.reason !== 'settled' && record.reason !== 'owed') return undefined
 
+  const reelHead = readReelHead(record.reel)
   return {
     isSettled: record.reason === 'settled',
     owed: Array.isArray(record.owed) ? record.owed.map(String) : [],
-    hasChecklist:
-      typeof record.checklist === 'string' && record.checklist !== '',
+    hasDrivableBox: readsDrivableBox(record),
+    // Absent stays absent, since it means the base keeps no captures and
+    // the gate passes as it did before the list existed.
+    ...(Array.isArray(record.uncaptured) && {
+      uncaptured: record.uncaptured.map(String),
+    }),
+    ...(reelHead !== undefined && { reelHead }),
+  }
+}
+
+function readReelHead(reel: unknown): string | undefined {
+  if (typeof reel !== 'object' || reel === null || !('head' in reel)) {
+    return undefined
   }
+  return typeof reel.head === 'string' && reel.head !== ''
+    ? reel.head
+    : undefined
 }
 
 async function readChecksGate(

package/src/commands/take.ts

@@ -114,6 +114,9 @@ export function register(program: Command): void {
         'WebP at 960 wide and 20 fps, keeping every third frame, with the cursor',
         'and click ring drawn from each camera track. It carries no zoom, so a',
         "reviewer sees the whole page. clip.mp4 stays each beat's raw take.",
+        'The reel is lossless, so a fade-out leaves no ghost, and it falls back',
+        'to lossy past 10 MB so a long reel still posts. The record says which',
+        'in `lossless`.',
         '',
         '  {',
         '    "beats": [',
@@ -127,7 +130,8 @@ export function register(program: Command): void {
         '  }',
         '',
         'Step kinds:',
-        '  move <target>|<x,y>    glide the pointer to a target or a point',
+        '  move <target>|<x,y>    glide the pointer to a target or a point, and',
+        '                         with hold <ms>, zoom onto its end for that long',
         '  click <target>         glide to the target and press it',
         '  dblclick <target>      glide to the target and press it twice',
         '  drag <from> <to>       press the from target, glide held, release on to',
@@ -143,6 +147,13 @@ export function register(program: Command): void {
         'PageDown, the four arrows as ArrowUp and the like, and F1 to F12. A key',
         'moves no pointer, so the camera neither aims at it nor ends a zoom.',
         '',
+        'A take paces each press on its own: the pointer rests 300 ms on the',
+        'target before a click, dblclick, or drag, and holds 500 ms on the',
+        'result before the next step. A fill waits 400 ms between pressing the',
+        'field and its first key, and holds 500 ms after its last. Setup steps',
+        'run unpaced. The camera zooms in over the glide reaching a target and',
+        'out over the glide leaving it, scaling about the target.',
+        '',
         'drag drives pointer events, the kind a canvas board listens for. It',
         'starts no native HTML5 drag of a draggable element on the stepped route,',
         'so a beat needing one films the same only on the screencast route.',

package/src/design/components.ts

@@ -15,6 +15,8 @@
  * names out of that record and says they live in code, which is here.
  */
 
+import { readTemplate } from '@/design/template'
+
 export interface Component {
   readonly name: string
   /** Why the component exists, carried into the emitted stylesheet as a comment. */
@@ -43,30 +45,7 @@ const STATUS: Component = {
     '--color-muted',
     '--radius-marker',
   ],
-  rules: `.status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.42rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0;
-  text-transform: none;
-  color: var(--color-muted);
-  white-space: nowrap;
-}
-
-.status::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  flex: none;
-  border-radius: var(--radius-marker);
-  background: var(--color-border);
-}
-
-.status.is-done::before {
-  background: var(--color-accent);
-}`,
+  rules: readTemplate('status.css'),
 }
 
 /**
@@ -84,35 +63,7 @@ const SCROLLBAR: Component = {
     'so the two engines cannot drift apart.',
   ].join('\n   '),
   reads: ['--color-border', '--color-muted', '--color-background'],
-  rules: `* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
-}
-
-*::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  border-radius: var(--radius-marker);
-  background: var(--color-border);
-  /* Inset by painting a border in the page color, which is what keeps the
-     thumb off the edges without a second element. */
-  border: 3px solid var(--color-background);
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background: var(--color-muted);
-}
-
-*::-webkit-scrollbar-corner {
-  background: transparent;
-}`,
+  rules: readTemplate('scrollbar.css'),
 }
 
 /**
@@ -130,60 +81,7 @@ const HAND_DRAWN_FIGURE: Component = {
     'reading measure and cleared past an outline rail on a wide viewport.',
   ].join('\n   '),
   reads: ['--color-muted', '--figure-hand', '--figure-wide'],
-  rules: `/* ---- Figures: hand-drawn, and wider than the measure ---- */
-
-:root {
-  --figure-hand: 'Virgil', 'Excalifont', cursive;
-  --figure-wide: 64rem;
-}
-
-figure {
-  margin: 2.75rem 0;
-  width: var(--figure-wide);
-  max-width: 92vw;
-  margin-left: 50%;
-  transform: translateX(-50%);
-}
-
-figure svg {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-/* CSS beats an SVG presentation attribute, so the diagrams pick up the
-   hand face without editing a single lesson. */
-figure svg text {
-  font-family: var(--figure-hand);
-}
-
-figcaption {
-  font-family: var(--figure-hand);
-  font-size: 1rem;
-  color: var(--color-muted);
-  margin: 1rem auto 0;
-  line-height: 1.5;
-  max-width: 52rem;
-}
-
-/* A figure breaks the measure and must still clear an outline rail. Deriving
-   the ceiling from the viewport does not hold, since a rail positioned from
-   the centre keeps overlapping as the window widens, so the ceiling is fixed
-   instead. */
-@media (min-width: 1421px) {
-  figure {
-    max-width: 54rem;
-  }
-}
-
-@media (max-width: 640px) {
-  figure {
-    width: 100%;
-    max-width: 100%;
-    margin-left: 0;
-    transform: none;
-  }
-}`,
+  rules: readTemplate('hand-drawn-figure.css'),
 }
 
 export const COMPONENTS: readonly Component[] = [

package/src/design/favicon.ts

@@ -1,3 +1,6 @@
+// Relative, since web/ bundles this module for FAVICON_COLORS and its `@` means web/src.
+import { fillTemplate, readTemplate } from './template'
+
 export interface ThemePair {
   readonly light: string
   readonly dark: string
@@ -68,23 +71,24 @@ export function renderFavicon(mark: string, colors: FaviconColors): string {
   const inset = EDGE_WIDTH / 2
   const shapes = markShapes(mark)
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${left} ${top} ${round(side)} ${round(side)}">
-  <style>
-    .tile { fill: ${colors.tile.dark}; stroke: ${colors.tile.dark}; }
-    .c { fill: ${colors.c.dark}; }
-    .pip { fill: ${colors.pip.dark}; }
-    @media (prefers-color-scheme: light) {
-      .tile { fill: ${colors.tile.light}; stroke: ${colors.edge}; }
-      .c { fill: ${colors.c.light}; }
-      .pip { fill: ${colors.pip.light}; }
-    }
-  </style>
-  <rect class="tile" x="${round(left + inset)}" y="${round(top + inset)}" width="${round(side - EDGE_WIDTH)}" height="${round(side - EDGE_WIDTH)}" rx="${round(side * TILE_RADIUS - inset)}" stroke-width="${EDGE_WIDTH}" />
-  <g class="c">
-  ${shapes.replace(/\n\s*/g, '\n  ')}
-  </g>
-</svg>
-`
+  return fillTemplate(readTemplate('favicon.svg'), {
+    left: String(left),
+    top: String(top),
+    side: String(round(side)),
+    tileX: String(round(left + inset)),
+    tileY: String(round(top + inset)),
+    tileSide: String(round(side - EDGE_WIDTH)),
+    tileRadius: String(round(side * TILE_RADIUS - inset)),
+    edgeWidth: String(EDGE_WIDTH),
+    tileDark: colors.tile.dark,
+    tileLight: colors.tile.light,
+    edge: colors.edge,
+    cDark: colors.c.dark,
+    cLight: colors.c.light,
+    pipDark: colors.pip.dark,
+    pipLight: colors.pip.light,
+    shapes: shapes.replace(/\n\s*/g, '\n  '),
+  })
 }
 
 /**

package/src/design/render.ts

@@ -6,6 +6,7 @@ import { fontFaceBlock } from '@/design/css'
 import { faviconLink } from '@/design/favicon'
 import type { FontFace } from '@/design/fonts'
 import { FONT_FACES } from '@/design/fonts'
+import { fillTemplate, readTemplate } from '@/design/template'
 import { colorValue } from '@/design/tokens'
 
 export interface RenderResult {
@@ -239,33 +240,14 @@ function buildHtml(
   const summary = tagged
     ? `\n<p class="note">${total - tagged} of ${total} cells are anchored to a source. The other ${tagged} ${verb} <code>? verify</code>, so nothing anchors them yet.</p>`
     : ''
-  return `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">${favicon === undefined ? '' : `\n${faviconLink(favicon)}`}
-<title>Design tokens</title>
-<link rel="stylesheet" href="design.css">
-<style>
-${previewChrome()}
-  body { font-family: ${bodyStack}; margin: 2rem; max-width: 960px; color: var(--preview-ink); background: var(--preview-paper); }
-  h1 { margin-top: 0; }
-  h2 { margin-top: 2rem; border-bottom: 1px solid var(--preview-rule); padding-bottom: 0.25rem; }
-  table { border-collapse: collapse; width: 100%; margin-top: 0.5rem; }
-  th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--preview-rule); font-size: 14px; }
-  th { background: var(--preview-panel); font-weight: 600; }
-  .swatch { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 4px; border: 1px solid var(--preview-rule); vertical-align: middle; margin-right: 0.5rem; }
-  .bar { display: inline-block; height: 1rem; background: var(--preview-muted); border-radius: 2px; vertical-align: middle; }
-  .note { color: var(--preview-muted); font-size: 13px; margin-top: 0.5rem; }
-  .empty { color: var(--preview-muted); font-style: italic; }${verifyStyle}
-</style>
-</head>
-<body>
-<h1>Design tokens</h1>
-<p class="note">Generated from <code>canon/DESIGN.md</code> by <code>bun run web:previews</code>. Token preview only, not a screen mock.</p>${summary}
-${sections.join('\n')}
-</body>
-</html>
-`
+  return fillTemplate(readTemplate('preview.html'), {
+    favicon: favicon === undefined ? '' : `\n${faviconLink(favicon)}`,
+    chrome: previewChrome(),
+    bodyStack,
+    verifyStyle,
+    summary,
+    sections: sections.join('\n'),
+  })
 }
 
 function sectionPersonality(text: string): string {