@erclx/canon 4.90.0 → 4.93.0

package/src/design/tokens.ts

@@ -39,6 +39,12 @@ export interface TypeToken {
   readonly verify?: readonly ('family' | 'weight' | 'size' | 'lineHeight')[]
 }
 
+/** One size the system offers, named apart from any role that takes it. */
+export interface TypeStep {
+  readonly step: string
+  readonly size: string
+}
+
 export interface SpaceToken {
   readonly step: string
   readonly multiplier: string
@@ -57,6 +63,7 @@ export interface DesignTokens {
   readonly personality: string
   readonly color: readonly ColorToken[]
   readonly colorNote: string
+  readonly typeScale: readonly TypeStep[]
   readonly typography: readonly TypeToken[]
   readonly typographyNote: string
   readonly spacing: readonly SpaceToken[]
@@ -68,20 +75,19 @@ export interface DesignTokens {
   readonly preamble: string
 }
 
-/** The monospace stack every surface but the landing page hero declares. */
+/** The monospace stack, taken by code and by the terminal frames a page embeds. */
 const MONO = 'Noto Sans Mono, DejaVu Sans Mono, monospace'
 
 /**
- * The proportional stack the landing page hero declares and nothing else does.
- * Noto Sans is the proportional sibling of the mono above rather than a face
- * picked for taste, so the pairing is one superfamily rather than two systems.
+ * The proportional stack every role but `code` declares. Geist is the face the
+ * visual-direction track set throughout, embedded through `FONT_FACES`.
  *
  * The stack stops at two names and a generic because `src/design/base.css` is
  * written by `canon design regen` and formatted by prettier, and a declaration
  * past 80 columns is wrapped by the second and flattened by the first. Every
  * emitted line stays inside the width so the two writers never disagree.
  */
-const SANS = 'Noto Sans, DejaVu Sans, sans-serif'
+const SANS = 'Geist Variable, DejaVu Sans, sans-serif'
 
 const DARK_GROUNDS = ['background', 'surface'] as const
 const LIGHT_GROUNDS = ['light-background', 'light-surface'] as const
@@ -98,9 +104,9 @@ export const TOKENS: DesignTokens = {
   ].join('\n'),
 
   personality: [
-    'Warm neutrals carry the frame under a single rust accent, rendered in the same monospace the terminal uses. The subject picks the register rather than taste: a toolkit whose primary surface is a shell has no proportional voice available, so the rendered surfaces match the terminal instead of the reverse. One accent carries every count, link, and primary action. Promoting a second and third into structural roles is what reads as a generated interface, so the palette stays at one.',
+    'Warm neutrals carry the frame under a single rust accent, set in Geist. The subject is a toolkit for people who read documents and diffs as much as they run commands, so the voice is a proportional one and the page reads as prose. One accent carries every count, link, and primary action. Promoting a second and third into structural roles is what reads as a generated interface, so the palette stays at one.',
     '',
-    'One surface is carved out of the sentence above, and it is the landing page hero. A rendered surface here shows a reader what the terminal did, so matching the terminal is what makes it legible. A public page addresses somebody who has never opened the terminal at all, and the shell has no voice available for that, which is the reverse of the case the rule was written for. The `page-display` role below is the whole of the carve-out. Every other role on that page stays monospace, including its body, its controls, and every frame it embeds, so the page reads as two families rather than as a second design system.',
+    'Monospace is a role the page uses rather than its voice. The `code` role takes it, and so does any terminal frame a surface embeds, since those show what the shell printed and matching the shell is what makes them legible. Every other role is Geist.',
   ].join('\n'),
 
   colorNote: [
@@ -236,52 +242,62 @@ export const TOKENS: DesignTokens = {
   ],
 
   typographyNote: [
-    'One family covers every role but `page-display`, which is the landing page hero and takes the proportional sibling of the same superfamily. The size scale runs from 11.5 to 52 pixels, and six values map onto a role. Five further values are adjustments inside a single component and get no role here, since a scale with five invented steps reads as a system the surfaces do not implement. They are 11.5, 12.5, 13, 14, and 15 pixels.',
+    'Seven sizes are on offer, named `t0` through `t6` and emitted as custom properties beside the roles. They are 3.175, 2.375, 1.375, 1.125, 0.9375, 0.8125 and 0.6875 rem, which paint at 50.8, 38, 22, 18, 15, 13 and 11 pixels, and each role takes one. A step answers what sizes exist and a role answers what a stylesheet asks for, so the two stay separate: a role whose step did not move renders as it did, and a role that moved is the only thing that changes what a surface paints. Two steps, `t3` at 18 pixels and `t6` at 11, are offered with no role pointing at them yet.',
     '',
-    'The 52 pixel step sits above the 34 the rest of the scale tops out at, and it is the one size no other surface reaches, since a hero headline set at the display cap reads as an opening rather than as a section heading.',
+    'Every role but `code` is Geist and `code` is monospace. The hero headline takes the largest step at 50.8 pixels, which no other role reaches, since a headline set at the display cap reads as an opening rather than as a section heading.',
     '',
     'A tagged cell is one no rendering surface exercises yet, which is a declaration the system has not tested rather than one it has.',
     '',
     'Two rules set tracking and no others touch it. The label role carries `0.05em`, and the display role tightens to `-0.01em`.',
   ].join('\n'),
 
+  typeScale: [
+    { step: 't0', size: '3.175rem' },
+    { step: 't1', size: '2.375rem' },
+    { step: 't2', size: '1.375rem' },
+    { step: 't3', size: '1.125rem' },
+    { step: 't4', size: '0.9375rem' },
+    { step: 't5', size: '0.8125rem' },
+    { step: 't6', size: '0.6875rem' },
+  ],
+
   typography: [
     {
       role: 'display',
-      family: MONO,
+      family: SANS,
       weight: '700',
-      size: '34px',
+      size: '2.375rem',
       lineHeight: '1.3',
     },
     {
       role: 'page-display',
       family: SANS,
       weight: '700',
-      size: '52px',
+      size: '3.175rem',
       lineHeight: '1.1',
-      verify: ['family', 'size', 'lineHeight'],
+      verify: ['size', 'lineHeight'],
     },
     {
       role: 'heading',
-      family: MONO,
+      family: SANS,
       weight: '700',
-      size: '19px',
+      size: '1.375rem',
       lineHeight: '1.3',
       verify: ['lineHeight'],
     },
     {
       role: 'body',
-      family: MONO,
+      family: SANS,
       weight: '400',
-      size: '16px',
+      size: '0.9375rem',
       lineHeight: '1.65',
       verify: ['weight'],
     },
     {
       role: 'label',
-      family: MONO,
+      family: SANS,
       weight: '400',
-      size: '12px',
+      size: '0.8125rem',
       lineHeight: '1.45',
       verify: ['weight', 'lineHeight'],
     },
@@ -289,27 +305,26 @@ export const TOKENS: DesignTokens = {
       role: 'code',
       family: MONO,
       weight: '700',
-      size: '14.5px',
+      size: '0.8125rem',
       lineHeight: '1.3',
       verify: ['lineHeight'],
     },
   ],
 
   spacingNote: [
-    'The base is six pixels, which is the largest unit dividing the values that recur: 6, 12, 18, 24, and 30. One-off paddings at 9, 10, 11, 13, 14, 16, 22, 26, 34, and 40 pixels sit off the scale entirely and get no step.',
+    'Seven steps run from a quarter rem to six, at 4, 8, 14, 24, 40, 64 and 96 pixels on a 16 pixel root. The scale is not a grid of one base, since the 14 between the 8 and the 24 is the step a control needs and no multiple of four supplies it, so the multiplier column counts quarter rems rather than claiming a unit.',
     '',
-    'The outer window padding is a single declaration reading `44px 52px 38px`, and none of its three values divides by six. They carry no multiplier for that reason, and one declaration setting all three is the only thing grouping them, so they are a frame register rather than a scale.',
+    'The outer window padding of the capture frames, which the previous record carried as a three-value frame register, is not part of the scale. Those frames set their own padding in the template and read no step, so the register is retired here rather than mapped onto steps no frame uses.',
   ].join('\n'),
 
   spacing: [
-    { step: 'xs', multiplier: '1', value: '6px' },
-    { step: 'sm', multiplier: '2', value: '12px' },
-    { step: 'md', multiplier: '3', value: '18px' },
-    { step: 'lg', multiplier: '4', value: '24px' },
-    { step: 'xl', multiplier: '5', value: '30px' },
-    { step: 'frame-top', multiplier: 'none', value: '44px' },
-    { step: 'frame-inline', multiplier: 'none', value: '52px' },
-    { step: 'frame-bottom', multiplier: 'none', value: '38px' },
+    { step: 'xs', multiplier: '1', value: '0.25rem' },
+    { step: 'sm', multiplier: '2', value: '0.5rem' },
+    { step: 'md', multiplier: '3.5', value: '0.875rem' },
+    { step: 'lg', multiplier: '6', value: '1.5rem' },
+    { step: 'xl', multiplier: '10', value: '2.5rem' },
+    { step: '2xl', multiplier: '16', value: '4rem' },
+    { step: '3xl', multiplier: '24', value: '6rem' },
   ],
 
   bordersNote: [

package/src/gate/measures.ts

@@ -142,7 +142,7 @@ export function auditsBaselineRel(root: string): string {
 }
 
 export const CAPTURE_STAMP_FAILURE =
-  'A capture set disagrees with the stamp written when its image was captured. Run canon capture assets/captures --selector .window --out assets and commit each frame with its image and its stamp.'
+  'A capture set disagrees with the stamp written when its image was captured. Run canon capture assets/captures --selector .window --out assets/evidence and commit each frame with its image and its stamp.'
 
 function parseJson(payload: string): unknown {
   try {
@@ -1118,11 +1118,12 @@ async function collectPluginManifests(ctx: MeasureContext): Promise<string[]> {
 /**
  * A capture set spans two folders. The markup and the template beside it are
  * the authored half and sit under `assets/captures/`, while the image a
- * document points at and the stamp answering for it stay in `assets/`, which is
- * where `--out assets` sends them.
+ * document points at and the stamp answering for it sit under
+ * `assets/evidence/`, which is where `--out assets/evidence` sends them and where
+ * `canon pr evidence` looks for a changed image.
  */
 const CAPTURE_MARKUP_DIR = 'assets/captures'
-const CAPTURE_OUTPUT_DIR = 'assets'
+const CAPTURE_OUTPUT_DIR = 'assets/evidence'
 
 /**
  * Every capture under `assets/captures/`, named by the base its three files

package/src/gate/stages.ts

@@ -201,7 +201,7 @@ export const STAGES: readonly Stage[] = [
         kind: 'drift',
         pathspec: 'assets/captures/*.html',
         failure:
-          'A generated frame drifted from the catalogs or the design source. Run bun run check, then canon capture assets/captures --selector .window --out assets, and commit each assets/captures/*.html with its .png and .stamp.',
+          'A generated frame drifted from the catalogs or the design source. Run bun run check, then canon capture assets/captures --selector .window --out assets/evidence, and commit each assets/captures/*.html with its .png and .stamp.',
       },
       { kind: 'measure', measure: captureStamps },
     ],

package/src/serve/static.ts

@@ -1,4 +1,4 @@
-import { existsSync, realpathSync, statSync } from 'node:fs'
+import { existsSync, readdirSync, realpathSync, statSync } from 'node:fs'
 import { join, resolve, sep } from 'node:path'
 
 /**
@@ -81,6 +81,66 @@ export type ServeOutcome = ServeStarted | ServeRefused
 export interface ServeOptions {
   readonly port?: number
   readonly entry?: string
+  /** Answers a directory request with no index page by listing it. Off by default. */
+  readonly index?: boolean
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+interface ListingEntry {
+  readonly name: string
+  readonly isDirectory: boolean
+}
+
+/**
+ * Reads the entries a listing may name. Each one takes the same containment
+ * test a request for it would, since a listed name is itself a fact about a
+ * place outside the root. Dotfiles are hidden because a listing is for
+ * navigating pages, and a hidden file is still reachable by its URL.
+ */
+function listEntries(root: string, directory: string): ListingEntry[] {
+  return readdirSync(directory)
+    .filter((name) => !name.startsWith('.'))
+    .filter((name) => !escapesThroughLink(root, join(directory, name)))
+    .map((name) => ({
+      name,
+      isDirectory:
+        statSync(join(directory, name), {
+          throwIfNoEntry: false,
+        })?.isDirectory() ?? false,
+    }))
+    .sort(
+      (a, b) =>
+        Number(b.isDirectory) - Number(a.isDirectory) ||
+        a.name.localeCompare(b.name),
+    )
+}
+
+function renderListing(
+  pathname: string,
+  entries: readonly ListingEntry[],
+  hasParent: boolean,
+): string {
+  const rows = entries.map(({ name, isDirectory }) => {
+    const label = isDirectory ? `${name}/` : name
+    return `<li><a href="${escapeHtml(encodeURIComponent(name))}${isDirectory ? '/' : ''}">${escapeHtml(label)}</a></li>`
+  })
+  if (hasParent) rows.unshift('<li><a href="../">../</a></li>')
+  return `<!doctype html>
+<meta charset="utf-8">
+<title>Index of ${escapeHtml(pathname)}</title>
+<h1>Index of ${escapeHtml(pathname)}</h1>
+<ul>
+${rows.join('\n')}
+</ul>
+`
 }
 
 function refuse(reason: ServeRefusal, detail: string): ServeRefused {
@@ -165,13 +225,14 @@ export function shouldWalkPast(error: unknown): boolean {
 function listen(
   root: string,
   first: number,
+  index: boolean,
 ): { server: ReturnType<typeof Bun.serve>; port: number } | undefined {
   for (let port = first; port < first + PORT_ATTEMPTS; port++) {
     try {
       const server = Bun.serve({
         hostname: SERVE_HOST,
         port,
-        fetch: (request) => respond(root, request),
+        fetch: (request) => respond(root, request, index),
       })
       /**
        * The bound port rather than the requested one. Port 0 asks the OS to
@@ -196,6 +257,7 @@ function listen(
 export async function respond(
   root: string,
   request: Request,
+  index = false,
 ): Promise<Response> {
   const { pathname, search } = new URL(request.url)
   const forbidden = () =>
@@ -229,7 +291,19 @@ export async function respond(
         headers: { location: `${pathname}/${search}` },
       })
     }
-    path = join(path, DEFAULT_ENTRY)
+    const indexPage = join(path, DEFAULT_ENTRY)
+    if (index && !existsSync(indexPage)) {
+      return new Response(
+        renderListing(pathname, listEntries(root, path), path !== root),
+        {
+          headers: {
+            'content-type': 'text/html; charset=utf-8',
+            'cache-control': 'no-store',
+          },
+        },
+      )
+    }
+    path = indexPage
   }
 
   /**
@@ -291,7 +365,7 @@ export function startServer(
    */
   let bound: ReturnType<typeof listen>
   try {
-    bound = listen(root, first)
+    bound = listen(root, first, options.index ?? false)
   } catch (error) {
     const code = (error as NodeJS.ErrnoException).code ?? 'unknown'
     return refuse(
@@ -307,14 +381,24 @@ export function startServer(
     )
   }
 
+  /**
+   * A listing answers `/` where no index page exists, so under the flag the
+   * default entry is the root itself. An explicit `--entry` keeps its own link
+   * and its own warning.
+   */
+  const listsRoot =
+    (options.index ?? false) &&
+    options.entry === undefined &&
+    !existsSync(entryPath)
+
   return {
     ok: true,
     root,
     host: SERVE_HOST,
     port: bound.port,
     entry,
-    url: `http://${SERVE_HOST}:${bound.port}/${entry}`,
-    entryExists: existsSync(entryPath),
+    url: `http://${SERVE_HOST}:${bound.port}/${listsRoot ? '' : entry}`,
+    entryExists: listsRoot || existsSync(entryPath),
     stop: async () => {
       await bound.server.stop(true)
     },

package/src/teach/render.ts

@@ -109,8 +109,8 @@ function renderBlock(
 
 /**
  * Renders a lesson body's structural blocks through the same components
- * `render-fixture.tsx` composes by hand, so a real lesson and the committed
- * fixture share one rendering mechanism. Every block past the first refusal
+ * `lesson.test.tsx` composes as JSX, so a real lesson and the component test
+ * share one rendering mechanism. Every block past the first refusal
  * goes unread, matching how a malformed JSON parse refuses the whole call.
  */
 export function renderLessonBody(blocks: readonly unknown[]): RenderOutcome {

package/src/teach/workspace.ts

@@ -246,6 +246,7 @@ async function listSlugs(dir: string): Promise<string[]> {
   return entries
     .filter((entry) => entry.isDirectory())
     .map((entry) => entry.name)
+    .filter((name) => WORKSPACE_NAME.test(name))
     .sort()
 }
 

package/standards/ready.md

@@ -11,6 +11,8 @@ The folder is gitignored, and backed wherever a records remote is configured: `c
 
 ## Scope
 
+The `draft-ready` skill owns the procedure that writes a ready folder, and this standard owns the shape it writes to.
+
 Governs a ready folder under `.canon/ready/<nn>-<slug>/`: folder layout, ordinal naming, the overview's frontmatter, what the mirrored tree holds, the thin-plan contract that ships it, and the lifecycle from the live folder to the archive.
 
 Does not govern:

package/standards/session.md

@@ -18,6 +18,7 @@ Does not govern:
 - The task board the file sits beside, its filenames, and its archiving: `tasks.md`
 - The transform from a branch name to the slug in the filename: `slug.md`
 - The role-specific sections a caller adds over the core, which belong to that caller
+- The note a plain session writes at `.canon/compact/<slug>.md`, whose shape lives in the `session-compact` skill's own reference
 - Which memories a session captures before writing, which is the capture surface's own subject
 
 ## What a working session map looks like

package/tooling/astro/configs/playwright.config.ts

@@ -13,6 +13,8 @@ export default defineConfig({
   use: {
     trace: 'on-first-retry',
     baseURL,
+    // Nothing to wait out unless a test asserts motion. Opt back in per test with page.emulateMedia({ reducedMotion: 'no-preference' }).
+    reducedMotion: 'reduce',
   },
   projects: [
     { name: 'chromium', use: { ...devices['Desktop Chrome'] } },

package/tooling/nextjs/configs/playwright.config.ts

@@ -11,6 +11,8 @@ export default defineConfig({
   use: {
     trace: 'on-first-retry',
     baseURL,
+    // Nothing to wait out unless a test asserts motion. Opt back in per test with page.emulateMedia({ reducedMotion: 'no-preference' }).
+    reducedMotion: 'reduce',
   },
   projects: [
     { name: 'chromium', use: { ...devices['Desktop Chrome'] } },

package/tooling/vite-react/configs/playwright.config.ts

@@ -13,6 +13,8 @@ export default defineConfig({
   use: {
     trace: 'on-first-retry',
     baseURL,
+    // Nothing to wait out unless a test asserts motion. Opt back in per test with page.emulateMedia({ reducedMotion: 'no-preference' }).
+    reducedMotion: 'reduce',
   },
   projects: [
     { name: 'chromium', use: { ...devices['Desktop Chrome'] } },

package/src/teach/render-fixture.tsx

@@ -1,95 +0,0 @@
-/** @jsxImportSource ./html */
-import { mkdir, writeFile } from 'node:fs/promises'
-import { join } from 'node:path'
-import { TEACH_STYLESHEET_COMPONENTS } from '@/design/components'
-import { buildDesignCss } from '@/design/css'
-import { TEACH_FONT_FACES } from '@/teach/fonts'
-import { Heading } from '@/teach/components/heading'
-import { List } from '@/teach/components/list'
-import { Paragraph } from '@/teach/components/paragraph'
-import { render } from '@/teach/html/jsx-runtime'
-
-/**
- * Regenerates the committed fixture lesson under
- * `examples/teach/00-fixture/`, the same shape `examples/slides/showcase.md`
- * takes against its own hand-rendered snapshot. Run with
- * `bun src/teach/render-fixture.tsx` after a component changes shape.
- */
-
-const FIXTURE_ROOT = join(
-  import.meta.dir,
-  '..',
-  '..',
-  'examples',
-  'teach',
-  '00-fixture',
-)
-const LESSON_TITLE = 'Compass bearings'
-const LESSON_FILE = '0001-compass-bearings.html'
-
-const STEPS = [
-  'Point the direction-of-travel arrow at the landmark.',
-  'Rotate the bezel until the orienting arrow lines up with the needle.',
-  'Read the bearing where the direction-of-travel arrow meets the bezel.',
-]
-
-const body = (
-  <>
-    <Heading level={1}>{LESSON_TITLE}</Heading>
-    <Paragraph lede>
-      A bearing is the compass direction from where you stand to whatever you
-      are aiming at, measured clockwise from north.
-    </Paragraph>
-    <Paragraph>
-      Hold the compass level and let the needle settle before reading anything
-      off it. A bearing taken while walking or tilted reads confidently and
-      wrong.
-    </Paragraph>
-    <Paragraph>
-      Three steps turn a sighted landmark into a number you can act on:
-    </Paragraph>
-    <List ordered items={STEPS} />
-    <Paragraph>
-      The same three steps run in reverse turn a bearing on a map into a
-      direction to walk, which is the only reason to learn them in this order.
-    </Paragraph>
-  </>
-)
-
-function page(title: string, main: string): string {
-  return `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${title}</title>
-<link rel="stylesheet" href="../assets/course.css">
-</head>
-<body>
-<main class="wide-body">
-${main}
-</main>
-</body>
-</html>
-`
-}
-
-async function main(): Promise<void> {
-  await mkdir(join(FIXTURE_ROOT, 'lessons'), { recursive: true })
-  await mkdir(join(FIXTURE_ROOT, 'assets'), { recursive: true })
-
-  await writeFile(
-    join(FIXTURE_ROOT, 'assets', 'course.css'),
-    buildDesignCss(undefined, {
-      embedFonts: TEACH_FONT_FACES,
-      components: TEACH_STYLESHEET_COMPONENTS,
-    }),
-  )
-
-  await writeFile(
-    join(FIXTURE_ROOT, 'lessons', LESSON_FILE),
-    page(LESSON_TITLE, render(body)),
-  )
-}
-
-await main()