@erclx/canon 4.76.0 → 4.78.0

package/claude/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "canon",
   "description": "Automated governance, versioning, and discovery tools for Claude Code.",
-  "version": "4.76.0",
+  "version": "4.78.0",
   "author": {
     "name": "Eric Le",
     "url": "https://github.com/erclx"

package/claude/skills/draft-and-pick/SKILL.md

@@ -16,7 +16,7 @@ Some decisions are settled by looking rather than by reasoning, and no draft is
 ## Step 1: name the decision and the arms
 
 1. State the decision in one sentence, naming what changes between arms and what stays fixed.
-2. Derive a kebab slug from that sentence. Call the folder every file this run writes to `<dest>` below. `<dest>` is `.canon/tmp/<slug>/`, per `.claude/rules/canon/core/055-scratch.md`. Running inside a live `plan-groundwork` track is the one exception: `<dest>` is the track's own `evidence/<slug>/` instead, since a candidate render is evidence the track's decision file cites rather than spike input.
+2. Derive a kebab slug from that sentence. Call the folder every file this run writes to `<dest>` below. `<dest>` is `.canon/tmp/<slug>/`, a nested `<slug>/` folder rather than a flat `<slug>-<file>.md`, which is the shape every temporary write in this project takes. Running inside a live `plan-groundwork` track is the one exception: `<dest>` is the track's own `evidence/<slug>/` instead, since a candidate render is evidence the track's decision file cites rather than spike input.
 3. Write one arm per candidate, each carrying an id, a label, and what the arm costs. An arm with no stated cost is not an option.
 4. Make the current state arm `0`, so the baseline is a candidate rather than an absence. A decision with nothing shipped yet says so and starts at arm `1`.
 5. Stop at three to five arms. Two is a comparison the operator can hold in prose, and past five the pick stops being a look and becomes a sort.
@@ -48,7 +48,7 @@ canon capture <dest>/candidates.html --selector <element>
 
 ## Step 4: take the pick
 
-Put the choice to the operator through the structured question surface, per `.claude/rules/canon/core/005-behavior.md`.
+Put the choice to the operator through the structured question surface, since a call the operator's preference decides always routes through it rather than through prose.
 
 - One option per arm, labeled with the arm's id and carrying its cost as the description.
 - Rank the recommendation first and mark it `(Recommended)`.
@@ -68,7 +68,7 @@ Put the choice to the operator through the structured question surface, per `.cl
 1. Apply the winning arm to the real surface, in one change.
 2. Close out whatever document stated the decision as open, in the same change, naming the arm that won and the ones that stayed defensible. A pick that changes a surface and records nothing about why leaves the next reader to re-derive it from a diff. Skip this where nothing stated the decision.
 3. Batch-capture the final round's arm files, when `<dest>` is the scratch path: `canon capture <dest>/arms --selector <wrapper-class> --out <archive-dir>`, naming Step 2's chosen class. This is the directory-batch convention `draft-identity` Step 6 already uses.
-4. Resolve `<archive-dir>` as `.canon/review/evidence/<slug>/` against the main worktree root, per `.claude/rules/canon/core/085-worktrees.md`, never against a linked worktree this run happens to be building in. The capture is what keeps every arm past the pick, the losing ones included, as a durable revert record distinct from the live comparison page.
+4. Resolve `<archive-dir>` as `.canon/review/evidence/<slug>/` against the main worktree root, since shared session scratch resolves there rather than against a linked worktree this run happens to be building in. The capture is what keeps every arm past the pick, the losing ones included, as a durable revert record distinct from the live comparison page.
 5. Delete `<dest>` and every file inside it, when `<dest>` is the scratch path, now that every arm sits at the durable path above. A variant left behind there is a second design nobody maintains.
 6. Leave `<dest>` in place when it is a live track's `evidence/<slug>/`: `plan-groundwork`'s write scope treats evidence as durable rather than as scratch a session may delete, and the arms already sit at a durable path there.
 7. Report `<dest>` as still standing when the scratch-path delete is refused, naming the path for the operator to remove, rather than closing on a report the tree contradicts. The pick is applied either way, so the run has done its work and the folder is what outlives it.

package/claude/skills/teach-workspace/references/promotion.md

@@ -14,16 +14,14 @@ A reference page that reads like a lesson is a lesson wearing the wrong extensio
 
 Sort by who owns the subject, which is the test the wiki already runs. The reader's activity decided the workspace and decides nothing here.
 
-| The page's subject                                             | Destination                                                                                                 |
-| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| Owned by someone outside the project, such as a tool or vendor | the project's wiki                                                                                          |
-| How this project itself works, for the people who build it     | `.claude/context/<domain>.md`, or the domain's own nested `index.md` when it is already split into a folder |
-| Written for someone consuming what this project ships          | the project's public docs                                                                                   |
+| The page's subject                                                                                                   | Destination                                                                                                 |
+| -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| Owned by Anthropic                                                                                                   | the project's wiki                                                                                          |
+| Owned by another tool or vendor, owned by no single vendor, or written for someone consuming what this project ships | the project's public docs                                                                                   |
+| How this project itself works, for the people who build it                                                           | `.claude/context/<domain>.md`, or the domain's own nested `index.md` when it is already split into a folder |
 
 A page a reader cannot sort by that question is a page whose subject has not been settled. Say which two destinations it sits between and let the operator choose, rather than picking the nearer one.
 
-Within the wiki, place the page by the same owner test that decides the folder: a vendor's own subject, another tool's subject, and a subject no single vendor owns each take the folder the project's wiki index names for them.
-
 ## Where the wiki sits
 
 The folder has two spellings and a project carries whichever its scaffold wrote:

package/docs/agents/capture.md

@@ -11,6 +11,7 @@ description: Rendering HTML sources to PNG, what the command asserts about fonts
 canon capture --selector .window
 canon capture assets/captures/install.html --selector .window --out assets
 canon capture assets/captures --selector .window --out .canon/review/captures
+canon capture https://example.com --selector .window --out preview.png
 ```
 
 `--selector` is required and every example above passes it. The element a capture crops to belongs to the page, not to the command, so there is no value that could be right for an arbitrary project's markup. `.window` is what this repository's own five sources declare, and a project renders its own pages by naming whatever theirs declare.
@@ -29,10 +30,10 @@ Every render writes a stamp beside its PNG, `hero.png` next to `hero.stamp`, hol
 
 Neither digest is ever written by hand. A digest is what the gate compares, so a hand-set one asserts agreement the tool never checked, and the way to move it is a capture. The `source:` line above them is the one field a rename may correct in place, since nothing reads it and the alternative is a stamp naming a file that no longer exists. Renaming a frame is the case that comes up, and the correction is the same basename the next capture would have written anyway.
 
-| Option             | Behavior                                          |
-| ------------------ | ------------------------------------------------- |
-| `--out <dir>`      | Write every PNG here instead of beside its source |
-| `--selector <sel>` | Element to capture, required and never defaulted  |
+| Option             | Behavior                                                                                               |
+| ------------------ | ------------------------------------------------------------------------------------------------------ |
+| `--out <dir>`      | Write every PNG here instead of beside its source. For a URL source, names the destination PNG itself. |
+| `--selector <sel>` | Element to capture, required and never defaulted                                                       |
 
 ## What the command asserts
 
@@ -48,4 +49,4 @@ The command ships to targets, alongside `demo`, `inventory`, and `drive`. It was
 
 Shipping it also fixed what the exclusion was hiding. The render module imported the `@playwright/test` development dependency, which no published tarball carries. Every browser reference still sits behind a dynamic import, so a browser loads for this command rather than in front of every other one.
 
-`demo.md` and `driver.md` cover two of the other three browser commands. What separates this one is that a capture renders a single state from a file on disk, where the rest drive a running application.
+`demo.md` and `driver.md` cover two of the other three browser commands. What separates this one is that a capture renders a single state, from a file on disk or a named `http(s)://` URL, where the rest drive a running application.

package/docs/agents/commands.md

@@ -24,7 +24,7 @@ Full help: `canon <command> --help`. Behavior notes for the install and sync ver
 | `canon docs [topic]`             | Emit toolkit reference docs (`list`, or a topic by name)                                                                                                                                                                                                                                                               |
 | `canon design render`            | Render `.claude/DESIGN.md` tokens to HTML and CSS                                                                                                                                                                                                                                                                      |
 | `canon design regen`             | Rewrite this repository's `.claude/DESIGN.md` and `src/design/base.css` from `src/design/tokens.ts`                                                                                                                                                                                                                    |
-| `canon design board`             | Generate a static page set indexing tokens, surfaces, wireframes, and past candidates, against the toolkit checkout like `regen` (`--out`)                                                                                                                                                                             |
+| `canon design board`             | Generate a static page set indexing tokens, surfaces, wireframes, past candidates, and components, against the toolkit checkout like `regen` (`--out`)                                                                                                                                                                 |
 | `canon design css`               | Emit the design tokens and components as CSS on stdout (`--no-components` for properties alone)                                                                                                                                                                                                                        |
 | `canon design install`           | Install the base stylesheet into a project at `.claude/design/base.css`                                                                                                                                                                                                                                                |
 | `canon design sync`              | Update a base stylesheet already installed under `.claude/design/`                                                                                                                                                                                                                                                     |
@@ -94,7 +94,7 @@ Full help: `canon <command> --help`. Behavior notes for the install and sync ver
 | `canon gate run`                 | Run every stage that guards a branch here, scoping shell, types, and tests to the changed set (`--all`, `--no-write`, `--nested`, `--json`)                                                                                                                                                                            |
 | `canon inventory [subject]`      | Walk every route a project declares and group its elements by the property each computes, as a listing rather than a gate (`--json`)                                                                                                                                                                                   |
 | `canon drive <url> <run>`        | Walk a page through named interactions and measure each state it reaches, reporting findings rather than gating (`--json`)                                                                                                                                                                                             |
-| `canon capture [source]`         | Render HTML sources to PNG and prove the font each one declares resolved (`--selector` required, `--out`)                                                                                                                                                                                                              |
+| `canon capture [source]`         | Render an HTML source or an `http(s)://` URL to PNG and prove the font each one declares resolved (`--selector` required, `--out`)                                                                                                                                                                                     |
 | `canon serve [dir]`              | Serve a directory on the loopback interface and print the link that opens it, running until interrupted (`--port`, `--entry`, `--json`)                                                                                                                                                                                |
 | `canon upgrade`                  | Reinstall the CLI globally with the package manager the install path names (`--json`)                                                                                                                                                                                                                                  |
 

package/docs/agents/design-board.md

@@ -5,7 +5,7 @@ description: Generating a static index over the toolkit checkout's own design su
 
 # Design board
 
-`canon design board [--out <path>]` generates a static page set indexing four design surfaces and reports the path a reader opens with `canon serve`. Like `canon design regen`, it runs against the toolkit checkout the CLI resolves its own root from, never against a target project's own files: a target holds none of the sources below, since none of `.claude/DESIGN.md`, `.claude/wireframes/`, `web/`, or the gitignored `.canon/` records ship with the published package. Running the installed CLI from inside a checkout of this project prints a mismatch warning when the caller's working directory disagrees with the root it resolved.
+`canon design board [--out <path>]` generates a static page set indexing five design surfaces and reports the path a reader opens with `canon serve`. Like `canon design regen`, it runs against the toolkit checkout the CLI resolves its own root from, never against a target project's own files: a target holds none of the sources below, since none of `.claude/DESIGN.md`, `.claude/wireframes/`, `web/`, or the gitignored `.canon/` records ship with the published package. Running the installed CLI from inside a checkout of this project prints a mismatch warning when the caller's working directory disagrees with the root it resolved.
 
 Each panel reads what is already on disk and reports its own missing source rather than failing the run, so an absent build or an empty corpus renders an empty-state message instead of a broken frame.
 
@@ -24,6 +24,7 @@ canon serve .canon/review/board
 - **Surfaces** iframes the built landing page from `web/dist/` and a teach workspace from `.canon/teach/`, copying each whole into the board's own tree. Either reports its own missing build or absent workspace rather than rendering a broken frame.
 - **Wireframes** renders each of the six files under `.claude/wireframes/` as-is inside a `<pre>`, beside a line naming the surface it describes.
 - **Past candidates** lists an arm capture image per folder under `.canon/review/evidence/`, and states the corpus carries none rather than rendering an empty grid.
+- **Components** iframes the gallery built by `bun run web:gallery`, a second Astro config at `web/gallery.config.mjs` reading `web/gallery-src/` and writing `web/gallery-dist/`. That config's `srcDir` is never read by `web:build`'s own config, so the gallery never reaches the published `web/dist/`. The gallery page renders every component under `web/src/components/` except two whose props carry no defaults, which it names rather than filling with invented data. Reports a missing gallery build rather than rendering a broken frame.
 
 ## What it does not do
 

package/docs/agents/driver.md

@@ -49,7 +49,7 @@ Every step names what it did, and that name is carried onto each finding it prod
 
 Probes run after a step and never on arrival, so a run reaches the load state by opening with a `wait` step of its own, as the example above does. Nothing probes before the first step runs, which makes that leading step the only way to measure the page as it first painted, and naming it is what puts the load state on its own findings rather than under whatever ran next.
 
-Write one wherever no capture runs against the page. `canon capture` renders a single state from a source on disk, so where it runs it already answers about arrival and a leading `wait` duplicates it. Where it does not, this command is the only thing measuring the page at all, and a run without that step reports every driven state and nothing about the one a visitor sees first.
+Write one wherever no capture runs against the page. `canon capture` renders a single state from a source on disk or a URL, so where it runs it already answers about arrival and a leading `wait` duplicates it. Where it does not, this command is the only thing measuring the page at all, and a run without that step reports every driven state and nothing about the one a visitor sees first.
 
 Each height is driven in a context of its own from a fresh navigation, rather than by resizing the page the previous height already drove, since a sweep asks the same question of each height rather than a later question of an already-driven page.
 

package/docs/workflow/ai-workflow.md

@@ -323,7 +323,7 @@ This section is the corpus the coverage claim is measured against: every name `c
 
 Every row answers a question rather than marking a point in a project's life, so a phase above would send a reader to the wrong group.
 
-A learning workspace produces two halves and only one of them leaves. A lesson is worked through once and stays in the workspace, and a reference page or a glossary carries no learner, so it belongs wherever the project already keeps prose on that subject. Asking `canon:teach-workspace` to promote sorts each durable page by who owns its subject, sending an outside subject to the wiki, an internal one to the matching context entry, and consumer-facing material to the public docs. It proposes and waits, because a promoted page is public prose that needs a line naming who owns the subject, and it writes nothing to a destination: each page the operator confirms goes to a handoff file that `canon:docs-fold` folds in from a branch. A project with no wiki folder gets a refusal naming `canon wiki init` rather than a folder it never asked for.
+A learning workspace produces two halves and only one of them leaves. A lesson is worked through once and stays in the workspace, and a reference page or a glossary carries no learner, so it belongs wherever the project already keeps prose on that subject. Asking `canon:teach-workspace` to promote sorts each durable page by who owns its subject, sending an Anthropic-owned subject to the wiki, an internal one to the matching context entry, and everything else, subject-neutral material included, to the public docs. It proposes and waits, because a promoted page is public prose that needs a line naming who owns the subject, and it writes nothing to a destination: each page the operator confirms goes to a handoff file that `canon:docs-fold` folds in from a branch. A project with no wiki folder gets a refusal naming `canon wiki init` rather than a folder it never asked for.
 
 ## Feedback routing
 

package/docs/workflow/visual-design-workflow.md

@@ -8,9 +8,9 @@ category: Workflow
 
 Three tiers cover the range from prose-only design docs to a fully graphical design source of truth. Pick one per project based on how UI-heavy the work is, whether stakeholders review visuals, and whether a designer is involved. Tiers stack, so moving up does not invalidate work done at a lower tier.
 
-The tier framework sits alongside [Claude Design](../../wiki/claude/claude-design.md), [visual wireframes](../../wiki/tools/visual-wireframes.md), [community skills and plugins](../../wiki/tools/community-skills.md), and [community MCP servers](../../wiki/tools/community-mcp-servers.md). Those pages catalog the tooling. This page decides when to reach for what.
+The tier framework sits alongside [Claude Design](../../wiki/claude/claude-design.md), the one catalog page in this range. Stitch, Excalidraw, and the surrounding MCP and skill ecosystem are named inline below rather than catalogued separately. This page decides when to reach for what.
 
-Two tools anchor tier 1 and tier 2. [Stitch](../../wiki/tools/stitch.md) is the agent-addressable default through its MCP server at `stitch.googleapis.com/mcp`, with a free tier of 400 daily credits that covers daily iteration. [Claude Design](../../wiki/claude/claude-design.md), released 2026-04-17 and priced inside Claude subscriptions, is the ceiling tool reserved for codebase extraction and the richly annotated handoff bundle. Each covers a different job, they are not swappable.
+Two tools anchor tier 1 and tier 2. Stitch is the agent-addressable default through its MCP server at `stitch.googleapis.com/mcp`, with a free tier of 400 daily credits that covers daily iteration. [Claude Design](../../wiki/claude/claude-design.md), released 2026-04-17 and priced inside Claude subscriptions, is the ceiling tool reserved for codebase extraction and the richly annotated handoff bundle. Each covers a different job, they are not swappable.
 
 ## Tier 0: prose only
 
@@ -68,16 +68,16 @@ Impeccable, if installed, keeps its own root `DESIGN.md` and `PRODUCT.md` in the
 
 ### Tools
 
-- Stitch via MCP at `stitch.googleapis.com/mcp`. Default pick for agent-driven visual generation. Free tier of 400 daily credits. See [Stitch](../../wiki/tools/stitch.md).
-- Excalidraw canvas server on localhost plus the `yctimlin/mcp_excalidraw` MCP shim, for projects that need an agent to draw, read back, and revise a canvas. See [visual wireframes](../../wiki/tools/visual-wireframes.md) for setup and footguns.
-- Playwright MCP for browser-side verification. See [Playwright](../../wiki/tools/community-mcp-servers.md#playwright-microsoft).
-- Chrome DevTools MCP for live frontend debugging. See [Chrome DevTools](../../wiki/tools/community-mcp-servers.md#chrome-devtools-google).
+- Stitch via MCP at `stitch.googleapis.com/mcp`, Google's Gemini-powered design product. Agent-addressable through `generate_screen_from_text`, `edit_screens`, and `generate_variants`. Default pick for agent-driven visual generation. Free tier of 400 daily credits.
+- Excalidraw canvas server on localhost plus the community [`yctimlin/mcp_excalidraw`](https://github.com/yctimlin/mcp_excalidraw) MCP shim, for projects that need an agent to draw, read back, and revise a canvas. MIT-licensed, plaintext JSON scene format. `describe_scene` and `get_canvas_screenshot` let the agent verify its own layout before claiming it is correct.
+- Playwright MCP ([`microsoft/playwright-mcp`](https://github.com/microsoft/playwright-mcp)) for browser-side verification, driven off the accessibility tree rather than screenshots.
+- Chrome DevTools MCP ([`ChromeDevTools/chrome-devtools-mcp`](https://github.com/ChromeDevTools/chrome-devtools-mcp)) for live frontend debugging: performance traces, network inspection, and DOM and CSS inspection.
 - Claude Design as the ceiling option for codebase extraction or polished handoff bundles. See [Claude Design](../../wiki/claude/claude-design.md).
 
 ### Skills
 
 - Everything from tier 0
-- A frontend design skill to steer visual quality. Pick one of [Impeccable](../../wiki/tools/community-skills.md#pbakausimpeccable), [UI/UX Pro Max](../../wiki/tools/community-skills.md#nextlevelbuilderui-ux-pro-max-skill), or Anthropic's `frontend-design` plugin. Impeccable is the strongest default because of its curated anti-patterns.
+- A frontend design skill to steer visual quality. Pick one of [pbakaus/impeccable](https://github.com/pbakaus/impeccable), which bundles curated anti-pattern references and is the strongest default, [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill), which maps product type to UI rules through a reasoning engine, or Anthropic's `frontend-design` plugin.
 
 ### When to pick
 
@@ -108,9 +108,9 @@ Design happens in a graphical tool. `.claude/DESIGN.md` either regenerates from
 
 ### Tools
 
-- Figma desktop app with the [Figma Dev Mode MCP](../../wiki/tools/community-skills.md#figma-mcp-and-code-to-canvas) for teams with a dedicated designer already on Figma. Bidirectional sync and Code to Canvas capture.
+- Figma desktop app with the official [Figma Dev Mode MCP](https://www.figma.com/blog/introducing-claude-code-to-figma/) for teams with a dedicated designer already on Figma. Bidirectional sync and Code to Canvas capture of a running Claude Code UI into editable Figma frames.
 - Claude Design with its Claude Code handoff bundle for teams without an existing Figma investment and for solo founders or PMs driving design themselves. One-way handoff, no bidirectional sync. See [Claude Design](../../wiki/claude/claude-design.md).
-- Stitch via MCP as a low-cost complement to either, used for bulk screen generation driven by Claude Code. See [Stitch](../../wiki/tools/stitch.md).
+- Stitch via MCP as a low-cost complement to either, used for bulk screen generation driven by Claude Code.
 - Playwright and Chrome DevTools MCPs as in tier 1
 
 ### Skills
@@ -147,9 +147,8 @@ Resist over-tiering early. Moving up is cheap because tiers stack. Moving down m
 
 ## References
 
-- [Stitch](../../wiki/tools/stitch.md): Gemini-powered design product with the MCP server that anchors tier 1
 - [Claude Design](../../wiki/claude/claude-design.md): first-party hosted design product and handoff bundle
 - `.claude/context/claude-plugin/skill-strategy.md`: how to decide between workflow and domain-knowledge skills
-- [Visual wireframes](../../wiki/tools/visual-wireframes.md): Excalidraw research and setup for the tier 1 wireframe companion
-- [Community skills and plugins](../../wiki/tools/community-skills.md): catalog of frontend design skills and integrations
-- [Community MCP servers](../../wiki/tools/community-mcp-servers.md): catalog of MCPs referenced across all tiers
+- [`microsoft/playwright-mcp`](https://github.com/microsoft/playwright-mcp): browser automation MCP used in tier 1 and tier 2
+- [`ChromeDevTools/chrome-devtools-mcp`](https://github.com/ChromeDevTools/chrome-devtools-mcp): live frontend debugging MCP used in tier 1 and tier 2
+- [`yctimlin/mcp_excalidraw`](https://github.com/yctimlin/mcp_excalidraw): community MCP server behind the tier 1 wireframe companion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erclx/canon",
   "type": "module",
-  "version": "4.76.0",
+  "version": "4.78.0",
   "description": "Infrastructure and quality tooling for developer workflows",
   "license": "MIT",
   "bin": {
@@ -46,6 +46,7 @@
     "web:favicon": "bun scripts/core/regen-web-favicon.ts",
     "web:previews": "bun scripts/core/regen-web-previews.ts",
     "web:build": "bun run web:tokens && bun run web:favicon && bun run web:previews && cd web && astro check && astro build",
+    "web:gallery": "cd web && astro build --config gallery.config.mjs",
     "web:preview": "cd web && astro preview",
     "web:e2e": "cd web && playwright test"
   },

package/scripts/core/check-gallery-exclusion.sh

@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+set -e
+set -o pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="${PROJECT_ROOT:-$(cd "$SCRIPT_DIR/../.." && pwd)}"
+
+WEB_DIST="$PROJECT_ROOT/web/dist"
+GALLERY_DIST="$PROJECT_ROOT/web/gallery-dist"
+MARKER='name="canon-gallery-marker"'
+
+# Nothing to grep without a build. Callers run this after `bun run web:build`
+# and `bun run web:gallery`, so an absent dist here means a build step itself
+# failed rather than something this check can verify.
+if [ ! -d "$WEB_DIST" ]; then
+  echo "No $WEB_DIST. Run bun run web:build first." >&2
+  exit 1
+fi
+
+if [ ! -d "$GALLERY_DIST" ]; then
+  echo "No $GALLERY_DIST. Run bun run web:gallery first." >&2
+  exit 1
+fi
+
+# A prose notice is not load-bearing: rewording it silently retires the leak
+# check it backed with every workflow still green. The marker is a fixed
+# `<meta>` tag `web/gallery-src/pages/index.astro` carries for exactly this,
+# so asserting it survives in the gallery's own build is what turns a dropped
+# marker into a loud failure here rather than a blind spot in the check below.
+if ! grep -rl "$MARKER" "$GALLERY_DIST" >/dev/null 2>&1; then
+  echo "The gallery build at $GALLERY_DIST carries no $MARKER. The gallery page dropped its own marker, which is what the leak check below reads for." >&2
+  exit 1
+fi
+
+# `web/gallery.config.mjs` keeps the components-panel gallery out of the
+# published build by never pointing its srcDir at it. A later config change
+# that widens srcDir, or a gallery file moving under web/src/, would publish
+# this repository's component internals to a live domain with every other
+# check still green, which is what this guards against.
+if find "$WEB_DIST" -iname '*gallery*' | grep -q .; then
+  echo "A file named for the gallery reached $WEB_DIST. See web/gallery.config.mjs's srcDir." >&2
+  exit 1
+fi
+
+if grep -rl "$MARKER" "$WEB_DIST" >/dev/null 2>&1; then
+  echo "The gallery's own marker ($MARKER) reached $WEB_DIST. See web/gallery.config.mjs's srcDir." >&2
+  exit 1
+fi
+
+echo "check-gallery-exclusion: gallery marker present in $GALLERY_DIST, absent from $WEB_DIST"

package/src/capture/render.ts

@@ -37,12 +37,12 @@ export interface CaptureOptions {
 export type CaptureResult =
   | {
       status: 'rendered'
-      htmlPath: string
+      source: string
       pngPath: string
       width: number
       height: number
     }
-  | { status: 'failed'; htmlPath: string; reason: string }
+  | { status: 'failed'; source: string; reason: string }
 
 export async function captureSources(
   sourcePath: string,
@@ -74,7 +74,9 @@ async function captureOne(
     deviceScaleFactor: DEVICE_SCALE_FACTOR,
   })
   try {
-    await page.goto(pathToFileURL(source.htmlPath).href)
+    await page.goto(
+      source.kind === 'url' ? source.url : pathToFileURL(source.htmlPath).href,
+    )
     const element = page.locator(selector).first()
     if ((await element.count()) === 0) {
       return failed(source, `no element matched ${selector}`)
@@ -97,7 +99,7 @@ async function captureOne(
     writeStamp(source, png)
     return {
       status: 'rendered',
-      htmlPath: source.htmlPath,
+      source: sourceIdentifier(source),
       pngPath: source.pngPath,
       width: png.readUInt32BE(16),
       height: png.readUInt32BE(20),
@@ -118,8 +120,11 @@ async function captureOne(
  * caller's catch and reports the source as failed, which is correct: a PNG
  * whose stamp never landed is the state the verify stage exists to reject.
  *
- * The source is stored as a bare filename. An absolute path would record the
- * machine that ran the capture into a tracked file and differ per checkout.
+ * A file source is stored as a bare filename. An absolute path would record
+ * the machine that ran the capture into a tracked file and differ per
+ * checkout. A URL source is stored as the URL itself, and its digest hashes
+ * the URL string's UTF-8 bytes rather than any local file, since there is
+ * none to hash.
  *
  * The image digest is taken over the buffer the screenshot returned rather than
  * by reading the file back, so the stamp describes the bytes this run wrote.
@@ -128,15 +133,27 @@ function writeStamp(source: CaptureSource, png: Uint8Array): void {
   writeFileSync(
     stampPath(source.pngPath),
     formatStamp({
-      source: basename(source.htmlPath),
-      sourceSha256: hashSource(readFileSync(source.htmlPath)),
+      source: source.kind === 'url' ? source.url : basename(source.htmlPath),
+      sourceSha256:
+        source.kind === 'url'
+          ? hashSource(Buffer.from(source.url, 'utf8'))
+          : hashSource(readFileSync(source.htmlPath)),
       imageSha256: hashSource(png),
     }),
   )
 }
 
+/**
+ * The identifier a `CaptureResult` reports, kept as the full path for a file
+ * source so `displayPath` in `src/commands/capture.ts` can still show it
+ * relative to the working directory.
+ */
+function sourceIdentifier(source: CaptureSource): string {
+  return source.kind === 'url' ? source.url : source.htmlPath
+}
+
 function failed(source: CaptureSource, reason: string): CaptureResult {
-  return { status: 'failed', htmlPath: source.htmlPath, reason }
+  return { status: 'failed', source: sourceIdentifier(source), reason }
 }
 
 /**

package/src/capture/sources.ts

@@ -1,20 +1,45 @@
 import { readdirSync, statSync } from 'node:fs'
 import { basename, dirname, extname, join } from 'node:path'
 
-export interface CaptureSource {
-  htmlPath: string
-  pngPath: string
+const URL_SOURCE = /^https?:\/\//
+
+/**
+ * The one test for whether a source string names a URL rather than a
+ * filesystem path, shared with `src/commands/capture.ts` so the two never
+ * drift apart on what counts as a URL source.
+ */
+export function isUrlSource(source: string): boolean {
+  return URL_SOURCE.test(source)
 }
 
+export type CaptureSource =
+  | {
+      readonly kind: 'file'
+      readonly htmlPath: string
+      readonly pngPath: string
+    }
+  | { readonly kind: 'url'; readonly url: string; readonly pngPath: string }
+
 /**
  * Pairs each HTML source with the PNG it renders to. A directory expands to
  * every `.html` directly inside it, so adding a capture is a file drop rather
  * than a flag. Omitting `outDir` writes the PNG beside its source.
+ *
+ * A `http(s)://` source has no directory to walk and no basename on disk to
+ * name the PNG from, so `outDir` there is read as the destination file
+ * itself rather than a directory, and the caller is what requires it.
  */
 export function resolveCaptureSources(
   sourcePath: string,
   outDir?: string,
 ): CaptureSource[] {
+  if (isUrlSource(sourcePath)) {
+    if (!outDir) {
+      throw new Error('a URL source needs --out naming the destination PNG')
+    }
+    return [{ kind: 'url', url: sourcePath, pngPath: outDir }]
+  }
+
   const htmlPaths = statSync(sourcePath).isDirectory()
     ? readdirSync(sourcePath)
         .filter((name) => extname(name) === '.html')
@@ -23,6 +48,7 @@ export function resolveCaptureSources(
     : [sourcePath]
 
   return htmlPaths.map((htmlPath) => ({
+    kind: 'file',
     htmlPath,
     pngPath: join(
       outDir ?? dirname(htmlPath),

package/src/commands/capture.ts

@@ -6,6 +6,7 @@ import {
   isBrowserMissing,
   isEngineMissing,
 } from '@/browser/engine'
+import { isUrlSource } from '@/capture/sources'
 import {
   frameError,
   intro,
@@ -42,8 +43,15 @@ export function register(program: Command): void {
   program
     .command('capture')
     .description('Render HTML capture sources to PNG')
-    .argument('[source]', 'HTML file or a directory of them', DEFAULT_SOURCE)
-    .option('-o, --out <dir>', 'Output directory, defaults beside the source')
+    .argument(
+      '[source]',
+      'HTML file, a directory of them, or an http(s):// URL',
+      DEFAULT_SOURCE,
+    )
+    .option(
+      '-o, --out <path>',
+      'Output directory for a file source, or the destination PNG for a URL source; defaults beside the source',
+    )
     .option('-s, --selector <selector>', 'Element to capture')
     .action(
       async (
@@ -66,8 +74,9 @@ export function register(program: Command): void {
         }
         const selector = opts.selector
 
-        const sourcePath = resolve(process.cwd(), source)
-        if (!existsSync(sourcePath)) {
+        const isUrl = isUrlSource(source)
+        const sourcePath = isUrl ? source : resolve(process.cwd(), source)
+        if (!isUrl && !existsSync(sourcePath)) {
           frameError(`${source} not found`)
           process.exitCode = 1
           return
@@ -100,7 +109,7 @@ export function register(program: Command): void {
               `${displayPath(result.pngPath)} ${result.width}x${result.height}`,
             )
           } else {
-            logError(`${displayPath(result.htmlPath)}: ${result.reason}`)
+            logError(`${displayPath(result.source)}: ${result.reason}`)
           }
         }
         outro()
@@ -141,9 +150,11 @@ function reportInFrame(error: unknown): void {
 /**
  * Keeps a path clickable in the operator's terminal. A source outside the
  * project reports absolute, since a relative path to it is a run of `..`
- * segments no editor resolves.
+ * segments no editor resolves. A URL is not a filesystem path at all, so it
+ * reports as given.
  */
 function displayPath(path: string): string {
+  if (isUrlSource(path)) return path
   const fromCwd = relative(process.cwd(), path)
   return fromCwd.startsWith('..') ? path : fromCwd
 }

package/src/design/board.ts

@@ -25,6 +25,15 @@ export const WIREFRAME_DIR = join('.claude', 'wireframes')
 const WEB_DIST = join('web', 'dist')
 const WEB_DIST_ENTRY = 'index.html'
 
+/**
+ * The gallery build, generated by `bun run web:gallery` through
+ * `web/gallery.config.mjs`. That config's own `srcDir` is `web/gallery-src`,
+ * which `web:build`'s config never reads, so this output never reaches
+ * `web/dist`.
+ */
+const WEB_GALLERY_DIST = join('web', 'gallery-dist')
+const WEB_GALLERY_DIST_ENTRY = 'index.html'
+
 interface WireframeEntry {
   readonly path: string
   readonly describes: string
@@ -338,6 +347,19 @@ function writeSurfacesPanel(root: string, outDir: string): void {
   )
 }
 
+function writeComponentsPanel(root: string, outDir: string): void {
+  const dir = join(outDir, 'components')
+  mkdirSync(dir, { recursive: true })
+
+  const gallerySource = join(root, WEB_GALLERY_DIST)
+  const body = existsSync(join(gallerySource, WEB_GALLERY_DIST_ENTRY))
+    ? (copyBuilt(gallerySource, join(dir, 'gallery')),
+      '<iframe src="gallery/index.html" loading="lazy"></iframe>')
+    : `<p class="empty">No ${WEB_GALLERY_DIST}/ build. Run bun run web:gallery, then regenerate the board.</p>`
+
+  writeFileSync(join(dir, 'index.html'), panelPage('Components', body))
+}
+
 function isImage(name: string): boolean {
   return IMAGE_EXTENSIONS.some((ext) => name.toLowerCase().endsWith(ext))
 }
@@ -437,12 +459,14 @@ export function generateBoard(
       title: 'Past candidates',
       path: 'candidates/index.html',
     },
+    { id: 'components', title: 'Components', path: 'components/index.html' },
   ]
 
   writeTokensPanel(root, outDir)
   writeSurfacesPanel(root, outDir)
   writeWireframesPanel(root, outDir)
   writeCandidatesPanel(root, outDir)
+  writeComponentsPanel(root, outDir)
 
   const indexPath = join(outDir, 'index.html')
   writeFileSync(indexPath, shellHtml(panels))

package/src/gate/measures.ts

@@ -523,6 +523,8 @@ function describeShippedReference(reference: ShippedReference): string {
       return 'a bare standards/ path that has nothing to expand it in an installed plugin cache'
     case 'phase-label':
       return 'a phase label that names a board no target holds'
+    case 'rule-path':
+      return 'a numbered rule path that reaches a target only through a separate canon gov sync, and only where governance was installed at all'
   }
 }
 
@@ -579,8 +581,8 @@ export const shippedReferences: Measure = async (ctx) => {
     ),
     failure:
       found.length === 1
-        ? `One reference in the shipped corpora resolves wrong for a reader in a target. Qualify a cross-repository citation as owner/repo#123 or owner/repo@abc1234, cite a docs page through canon docs <name>, rewrite a bare standards/ path under claude/skills/ as \${CLAUDE_SKILL_DIR}/../../standards/<name>.md, state a same-repository citation or a phase label as a fact instead and relocate the evidence to the owning .claude/context/ entry, or mark the line ${REFERENCE_MARKER}: <reason> where the bare form is the point.`
-        : `${found.length} references in the shipped corpora resolve wrong for a reader in a target. Qualify a cross-repository citation as owner/repo#123 or owner/repo@abc1234, cite a docs page through canon docs <name>, rewrite a bare standards/ path under claude/skills/ as \${CLAUDE_SKILL_DIR}/../../standards/<name>.md, state a same-repository citation or a phase label as a fact instead and relocate the evidence to the owning .claude/context/ entry, or mark each line ${REFERENCE_MARKER}: <reason> where the bare form is the point.`,
+        ? `One reference in the shipped corpora resolves wrong for a reader in a target. Qualify a cross-repository citation as owner/repo#123 or owner/repo@abc1234, cite a docs page through canon docs <name>, rewrite a bare standards/ path under claude/skills/ as \${CLAUDE_SKILL_DIR}/../../standards/<name>.md, state a same-repository citation or a phase label as a fact instead and relocate the evidence to the owning .claude/context/ entry, state the fact a shipped skill body's cited rule enforces instead of its path, or mark the line ${REFERENCE_MARKER}: <reason> where the bare form is the point.`
+        : `${found.length} references in the shipped corpora resolve wrong for a reader in a target. Qualify a cross-repository citation as owner/repo#123 or owner/repo@abc1234, cite a docs page through canon docs <name>, rewrite a bare standards/ path under claude/skills/ as \${CLAUDE_SKILL_DIR}/../../standards/<name>.md, state a same-repository citation or a phase label as a fact instead and relocate the evidence to the owning .claude/context/ entry, state the fact a shipped skill body's cited rule enforces instead of its path, or mark each line ${REFERENCE_MARKER}: <reason> where the bare form is the point.`,
   }
 }
 

package/src/shipped/references.ts

@@ -203,6 +203,22 @@ const STANDARDS_PATH = /(?<![\w./-])standards\/[^\s`)\]]*\.md\b/g
  */
 const PHASE_LABEL = /\bv\d+\.\d+(?!\.\d)\b/g
 
+/**
+ * A `.claude/rules/<segments>/<nnn>-<slug>.md` citation from a body under
+ * `claude/skills/`, the installed-path spelling `598-authoring-layout.md`
+ * bans a shipped skill body from citing as authority for its own behavior.
+ *
+ * Anchored on the trailing `\d{3}-[\w-]+\.md` rather than on the bare
+ * `.claude/rules/` prefix, which is what keeps a folder mention carrying no
+ * number, such as `create-rule`, `memory-review`, and `setup-gov` already
+ * write correctly, from matching. The segment group between `rules/` and the
+ * numbered file admits both a governance-namespace path
+ * (`canon/core/055-scratch.md`) and a project-namespace one
+ * (`project/<subdir>/<n>-<slug>.md`) without distinguishing them, since
+ * either shape is the same broken citation.
+ */
+const RULE_PATH = /(?<![\w./-])\.claude\/rules\/[^\s`)\]]*\/\d{3}-[\w-]+\.md\b/g
+
 export interface ShippedReference {
   readonly file: string
   /** One-based, matching the `file:line` form a reader clicks. */
@@ -213,6 +229,7 @@ export interface ShippedReference {
     | 'docs-path'
     | 'standards-path'
     | 'phase-label'
+    | 'rule-path'
   /** The reference as written, so a report names the token to qualify. */
   readonly text: string
   /**
@@ -259,14 +276,19 @@ function isDocsPathReportable(
 }
 
 /**
- * Whether `file` sits in the one corpus `STANDARDS_PATH` gates.
+ * Whether `file` sits in the one corpus `STANDARDS_PATH` and `RULE_PATH`
+ * both gate: a shipped skill body, minus its own `REQUIREMENT.md`.
  *
- * `REQUIREMENT.md` is excluded for the reason `598-authoring-layout.md`
- * leaves it alone: a maintainer or an audit command reads that file rather
- * than a session loading it, so the resolver rule this pattern enforces
- * never applies there.
+ * Both patterns share this scope because both bans live in
+ * `598-authoring-layout.md`, stated for the same reader: a session loading
+ * the `SKILL.md` body a target actually receives. `REQUIREMENT.md` is
+ * excluded for the reason that file states there, since a maintainer or an
+ * audit command reads it rather than a session loading it, so neither
+ * resolver rule this pair enforces ever applies to it. One predicate serves
+ * both call sites rather than two copies drifting apart with nothing
+ * comparing them.
  */
-function isStandardsPathScope(file: string): boolean {
+function isSkillBodyScope(file: string): boolean {
   return file.startsWith('claude/skills/') && !file.endsWith('/REQUIREMENT.md')
 }
 
@@ -357,7 +379,7 @@ export function referencesIn(
       })
     }
 
-    if (isStandardsPathScope(file)) {
+    if (isSkillBodyScope(file)) {
       for (const match of line.matchAll(STANDARDS_PATH)) {
         if (!isStandardsPathReportable(match[0])) continue
         references.push({
@@ -377,6 +399,18 @@ export function referencesIn(
         text: match[0],
       })
     }
+
+    if (isSkillBodyScope(file)) {
+      for (const match of line.matchAll(RULE_PATH)) {
+        if (isPlaceholderPath(match[0])) continue
+        references.push({
+          file,
+          line: index + 1,
+          kind: 'rule-path',
+          text: match[0],
+        })
+      }
+    }
   }
 
   return references

package/src/teach/components/heading.tsx

@@ -0,0 +1,11 @@
+/** @jsxImportSource ../html */
+import type { Child, Element } from '@/teach/html/jsx-runtime'
+
+export interface HeadingProps {
+  readonly level: 1 | 2
+  readonly children: Child
+}
+
+export function Heading({ level, children }: HeadingProps): Element {
+  return level === 1 ? <h1>{children}</h1> : <h2>{children}</h2>
+}

package/src/teach/components/list.tsx

@@ -0,0 +1,17 @@
+/** @jsxImportSource ../html */
+import type { Child, Element } from '@/teach/html/jsx-runtime'
+
+export interface ListProps {
+  readonly ordered?: boolean
+  readonly items: readonly Child[]
+}
+
+/**
+ * Composes an item per entry rather than taking pre-built `<li>` children, so
+ * every list in a lesson escapes the same way regardless of what the caller
+ * hands in.
+ */
+export function List({ ordered, items }: ListProps): Element {
+  const rendered = items.map((item) => <li>{item}</li>)
+  return ordered ? <ol>{rendered}</ol> : <ul>{rendered}</ul>
+}

package/src/teach/components/paragraph.tsx

@@ -0,0 +1,12 @@
+/** @jsxImportSource ../html */
+import type { Child, Element } from '@/teach/html/jsx-runtime'
+
+export interface ParagraphProps {
+  /** The lesson's dek, read back by `extractLessonMeta` in `@/teach/nav`. */
+  readonly lede?: boolean
+  readonly children: Child
+}
+
+export function Paragraph({ lede, children }: ParagraphProps): Element {
+  return lede ? <p class="lede">{children}</p> : <p>{children}</p>
+}

package/src/teach/html/jsx-dev-runtime.ts

@@ -0,0 +1,13 @@
+/**
+ * Bun resolves this module rather than `jsx-runtime` at run time (spike 1,
+ * `.canon/groundwork/56-teach-render-layer/08-spikes.md`), so every export a
+ * caller might reach through either entry point has to exist here too.
+ */
+export {
+  Fragment,
+  jsx,
+  jsx as jsxDEV,
+  jsxs,
+  render,
+  type JSX,
+} from './jsx-runtime'

package/src/teach/html/jsx-runtime.ts

@@ -0,0 +1,113 @@
+import { escape, isRaw, raw, type RawMarkup } from './raw'
+
+export type Child =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | RawMarkup
+  | readonly Child[]
+
+export interface Props {
+  readonly children?: Child
+  readonly [key: string]: unknown
+}
+
+/**
+ * What a component returns and what `jsx` produces: markup already rendered,
+ * carrying the same brand `raw` gives an author's own escape hatch. One brand
+ * for both is what lets a parent's `{children}` compose a child's output
+ * without escaping it a second time, since a plain string cannot say whether
+ * it is author text or already-rendered markup.
+ */
+export type Element = RawMarkup
+
+export type Component<P extends Props = Props> = (props: P) => Element
+
+export const Fragment = Symbol('Fragment')
+
+const ARIA_PREFIX = 'aria-'
+
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'source',
+  'track',
+  'wbr',
+])
+
+function renderChild(child: Child): string {
+  if (child === null || child === undefined || typeof child === 'boolean') {
+    return ''
+  }
+  if (typeof child === 'number') return String(child)
+  if (typeof child === 'string') return escape(child)
+  if (isRaw(child)) return child.html
+  return child.map(renderChild).join('')
+}
+
+/**
+ * ARIA takes the literal word for a boolean, where HTML boolean attributes
+ * take presence or absence. Spike 1's first draft rendered a bare
+ * `aria-disabled` for `true` and dropped `aria-disabled={false}` entirely,
+ * silently removing state a screen reader reads.
+ */
+function renderAttribute(key: string, value: unknown): string {
+  if (key.startsWith(ARIA_PREFIX) && typeof value === 'boolean') {
+    return ` ${key}="${value}"`
+  }
+  if (value === undefined || value === null || value === false) return ''
+  if (value === true) return ` ${key}`
+  if (isRaw(value)) return ` ${key}="${escape(value.html)}"`
+  return ` ${key}="${escape(String(value))}"`
+}
+
+function renderAttributes(props: Props): string {
+  return Object.entries(props)
+    .filter(([key]) => key !== 'children')
+    .map(([key, value]) => renderAttribute(key, value))
+    .join('')
+}
+
+export function jsx(
+  type: string | Component | typeof Fragment,
+  props: Props,
+): Element {
+  if (type === Fragment) return raw(renderChild(props.children ?? null))
+  if (typeof type === 'function') return type(props)
+
+  const attrs = renderAttributes(props)
+  if (VOID_ELEMENTS.has(type)) return raw(`<${type}${attrs}>`)
+
+  return raw(
+    `<${type}${attrs}>${renderChild(props.children ?? null)}</${type}>`,
+  )
+}
+
+export const jsxs = jsx
+
+/** Unwraps a rendered element to the plain string a file writes to disk. */
+export function render(element: Element): string {
+  return element.html
+}
+
+export namespace JSX {
+  export type Element = RawMarkup
+
+  export interface ElementChildrenAttribute {
+    children: Record<string, never>
+  }
+
+  export interface IntrinsicElements {
+    [name: string]: Props
+  }
+}

package/src/teach/html/raw.ts

@@ -0,0 +1,28 @@
+const RAW = Symbol('raw')
+
+/**
+ * Markup already rendered, exempt from the escaping every other string
+ * receives. `raw` is the only way to produce one, so a lesson has to opt in
+ * explicitly rather than an author text string accidentally passing through
+ * unescaped.
+ */
+export interface RawMarkup {
+  readonly [RAW]: true
+  readonly html: string
+}
+
+export function raw(html: string): RawMarkup {
+  return { [RAW]: true, html }
+}
+
+export function isRaw(value: unknown): value is RawMarkup {
+  return typeof value === 'object' && value !== null && RAW in value
+}
+
+export function escape(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}

package/src/teach/render-fixture.tsx

@@ -0,0 +1,95 @@
+/** @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()

package/standards/wiki.md

@@ -28,8 +28,7 @@ A page failing either is non-conforming even when it satisfies every shape rule
 ## Placement
 
 - Write a page here only when its subject is owned outside this repository. Route anything about how this repository works to `docs/`, `.claude/context/`, or a skill body instead.
-- File the page by owner: `wiki/claude/` for Anthropic, `wiki/tools/` for another vendor, `wiki/concepts/` where no single vendor owns the subject.
-- Treat `wiki/concepts/rule-writing-vocabulary.md` as the one recorded exception to the owner test, stated in the page itself.
+- File the page under `wiki/claude/`. A subject Anthropic does not own, whether a third-party tool or a vendor-neutral concept, is out of scope for this folder split. Route it to `docs/` or a skill body instead of adding a second wiki folder for it.
 
 ## Frontmatter
 
@@ -38,8 +37,7 @@ A page failing either is non-conforming even when it satisfies every shape rule
 
 ## Naming
 
-- Name a `wiki/claude/` page with a `claude-` prefix before the kebab subject.
-- Name a `wiki/tools/` or `wiki/concepts/` page as a bare kebab subject, with no prefix.
+- Name a page with a `claude-` prefix before the kebab subject.
 
 ## Sourcing
 

package/tsconfig.json

@@ -3,6 +3,7 @@
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "jsx": "react-jsx",
     "types": ["bun-types"],
     "strict": true,
     "skipLibCheck": true,