@erclx/canon 5.79.0 → 5.80.0

package/governance/ledger/skills/design-taste/tells.md

@@ -21,29 +21,31 @@ The main catalog is Taste-Skill's v2 experimental skill, which its author moved
 
 ## Composition
 
-| Bullet                     | Source                                                                                                                                                                                                                                                                 | Read       |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| The three equal cards      | Catalog observation, [Redesign skill](https://github.com/nxpatterns/claude-taste-skill/blob/main/skills/redesign-skill/SKILL.md): "Three equal card columns as feature row. This is the most generic AI layout."                                                       | 2026-10-24 |
-| One section shape repeated | Catalog observation, [Taste-Skill tells](https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/references/tells.md): "Every section the same layout family" is a structural tell, reached past with "Different composition per section"                 | 2026-10-24 |
-| The centered hero          | Catalog observation, [Taste-Skill tells](https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/references/tells.md): "Centred headline, subtitle, two buttons, screenshot below"                                                                        | 2026-10-24 |
-| Decoration as structure    | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "NO crosshair / hairline grid lines as decoration", kept "only when they organize real content"            | 2026-10-24 |
-| The corner floater         | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "a small explainer paragraph floating with no clear alignment to anything else. That floater is the Tell." | 2026-10-24 |
+| Bullet                      | Source                                                                                                                                                                                                                                                                 | Read       |
+| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| The three equal cards       | Catalog observation, [Redesign skill](https://github.com/nxpatterns/claude-taste-skill/blob/main/skills/redesign-skill/SKILL.md): "Three equal card columns as feature row. This is the most generic AI layout."                                                       | 2026-10-24 |
+| One section shape repeated  | Catalog observation, [Taste-Skill tells](https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/references/tells.md): "Every section the same layout family" is a structural tell, reached past with "Different composition per section"                 | 2026-10-24 |
+| The centered hero           | Catalog observation, [Taste-Skill tells](https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/references/tells.md): "Centred headline, subtitle, two buttons, screenshot below"                                                                        | 2026-10-24 |
+| Decoration as structure     | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "NO crosshair / hairline grid lines as decoration", kept "only when they organize real content"            | 2026-10-24 |
+| A figure of identical parts | [Wikipedia, Chartjunk](https://en.wikipedia.org/wiki/Chartjunk), quoting Tufte: "The interior decoration of graphics generates a lot of ink that does not tell the viewer anything new."                                                                               | 2026-11-08 |
+| The corner floater          | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "a small explainer paragraph floating with no clear alignment to anything else. That floater is the Tell." | 2026-10-24 |
 
 ## Content and labels
 
-| Bullet                     | Source                                                                                                                                                                                                                                                                               | Read       |
-| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
-| Enumerated eyebrows        | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): generic step labels are banned, since "The actual step content is the label"                                             | 2026-10-24 |
-| Poetic section labels      | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "Field notes" and "On our desks" style labels read "as performative-craftsman. Use plain functional labels"              | 2026-10-24 |
-| Atmospheric strips         | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "NO weather / locale strips" and "NO version footers on marketing pages"                                                 | 2026-10-24 |
-| Scroll cues                | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "Scroll cues are banned." Readers "know what scroll is."                                                                 | 2026-10-24 |
-| Decorative status dots     | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): a dot is "Only acceptable when conveying real semantic state" and "limited to one per page section"                      | 2026-10-24 |
-| Filler verbs               | Catalog observation, [Redesign skill](https://github.com/nxpatterns/claude-taste-skill/blob/main/skills/redesign-skill/SKILL.md): "Never use 'Elevate', 'Seamless', 'Unleash', 'Next-Gen'", and "Write plain, specific language."                                                    | 2026-10-24 |
-| Placeholder as placeholder | Catalog observation, [Redesign skill](https://github.com/nxpatterns/claude-taste-skill/blob/main/skills/redesign-skill/SKILL.md): "Generic names like 'John Doe'" and "Placeholder company names like 'Acme Corp'"                                                                   | 2026-10-24 |
-| Invented precision         | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "Fake-precise numbers are flagged", passing only when they "Come from real data" or "Are explicitly labeled as mock"     | 2026-10-24 |
-| The fake screenshot        | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "NO div-based fake product UI in the hero", which it ranks first among the tells                                         | 2026-10-24 |
-| Copy nobody re-read        | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "re-read every visible string on the page", since "AI-generated cute copy is worse than boring copy"                     | 2026-10-24 |
-| What the re-read rewrites  | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): the re-read flags a string that is "Grammatically broken", "Has unclear referents", or carries "cute-but-wrong wordplay" | 2026-10-24 |
+| Bullet                     | Source                                                                                                                                                                                                                                                                                                | Read       |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| Enumerated eyebrows        | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): generic step labels are banned, since "The actual step content is the label"                                                              | 2026-10-24 |
+| Poetic section labels      | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "Field notes" and "On our desks" style labels read "as performative-craftsman. Use plain functional labels"                               | 2026-10-24 |
+| Atmospheric strips         | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "NO weather / locale strips" and "NO version footers on marketing pages"                                                                  | 2026-10-24 |
+| Scroll cues                | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "Scroll cues are banned." Readers "know what scroll is."                                                                                  | 2026-10-24 |
+| Decorative status dots     | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): a dot is "Only acceptable when conveying real semantic state" and "limited to one per page section"                                       | 2026-10-24 |
+| Filler verbs               | Catalog observation, [Redesign skill](https://github.com/nxpatterns/claude-taste-skill/blob/main/skills/redesign-skill/SKILL.md): "Never use 'Elevate', 'Seamless', 'Unleash', 'Next-Gen'", and "Write plain, specific language."                                                                     | 2026-10-24 |
+| Placeholder as placeholder | Catalog observation, [Redesign skill](https://github.com/nxpatterns/claude-taste-skill/blob/main/skills/redesign-skill/SKILL.md): "Generic names like 'John Doe'" and "Placeholder company names like 'Acme Corp'"                                                                                    | 2026-10-24 |
+| Template token in a mock   | Catalog observation, [Redesign skill](https://github.com/nxpatterns/claude-taste-skill/blob/main/skills/redesign-skill/SKILL.md): "Lorem Ipsum. Never use placeholder latin text. Write real draft copy." The copied real id is a House choice: in a mock it reads as a reference a reader may follow | 2026-11-08 |
+| Invented precision         | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "Fake-precise numbers are flagged", passing only when they "Come from real data" or "Are explicitly labeled as mock"                      | 2026-10-24 |
+| The fake screenshot        | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "NO div-based fake product UI in the hero", which it ranks first among the tells                                                          | 2026-10-24 |
+| Copy nobody re-read        | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): "re-read every visible string on the page", since "AI-generated cute copy is worse than boring copy"                                      | 2026-10-24 |
+| What the re-read rewrites  | Catalog observation, [Taste-Skill v2 experimental](https://github.com/Leonxlnx/taste-skill-classics/blob/main/skills/taste-skill-v2-experimental/SKILL.md): the re-read flags a string that is "Grammatically broken", "Has unclear referents", or carries "cute-but-wrong wordplay"                  | 2026-10-24 |
 
 ## Surface and palette
 

package/governance/ledger/skills/search-craft/SKILL.md

@@ -45,6 +45,12 @@ The access note's Reddit and X rows record refusals, so they are measurements re
 | A public API over a summarized page   | [Crossref REST API](https://www.crossref.org/documentation/retrieve-metadata/rest-api/): "Our publicly available REST API exposes the scholarly metadata that members and trusted sources deposit with Crossref" | 2026-10-28 |
 | A plain request rather than a wrapper | [claude-research-stack](https://github.com/aghori3004/claude-research-stack): "The skill talks to the CLIs and MCPs directly, on purpose", listing "No wrapper scripts" among what it leaves out                 | 2026-10-28 |
 
+## Quote what was read
+
+| Bullet                   | Source                                                                                                                                                                                    | Read       |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| Quote only what was read | [Caulfield, SIFT (The Four Moves)](https://hapgood.us/2019/06/19/sift-the-four-moves/): "trace the claim, quote, or media back to the source, so you can see it in it's original context" | 2026-11-08 |
+
 ## Access note
 
 | Bullet                          | Source                                                                                                                                                                                                       | Read       |

package/governance/ledger/skills/ui-craft/capture.md

@@ -45,6 +45,16 @@ The rule states canon's own evidence procedure for a rendered change, so most ro
 | State case at one width, driven | House choice: a case driving a menu open tests the state, and repeating it at every layout width multiplies the evidence with no layout to compare, and an initial render reports nothing about a menu that opens, an answer that is chosen, or a rail that tracks scrolling | 2026-10-18           |
 | Case lives with the surface     | House choice: a surface with no case ships uncaptured, and a case left after its surface goes fails every later capture run                                                                                                                                                  | 2026-10-18           |
 
+## What a moving change owes
+
+| Bullet                        | Source                                                                                                                                                                                                                           | Read                 |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| Real input at each width      | House choice: on a proximity-snap page, `scrollIntoView` reached section 3 while six spaced wheel notches left `scrollY` at 0, so a scripted scroll passed a page a wheel could not move                                         | 2026-11-08           |
+| Notches at two paces          | House choice: on the same page, six notches one call apart stayed at 0 and six notches 50 ms apart reached 522, so each pace catches a stall the other misses                                                                    | 2026-11-08           |
+| Keyboard through the same     | [Understanding Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html): "all functionality of the content is operable through a keyboard interface". Arrow keys and Page Down reached 783 and 1566 on the snap page | 2026-11-08, WCAG 2.2 |
+| Sample at fixed steps         | House choice: a read taken only at the end reports where the page settled and hides a notch that moved nothing, which a read after each notch shows                                                                              | 2026-11-08           |
+| Touch and hover in touch mode | House choice: a desktop session refused a tap and kept `(hover: hover)` true when resized, while a mobile session reported hover false and took the tap                                                                          | 2026-11-08           |
+
 ## Sharing a capture
 
 | Bullet                    | Source                                                                                                                                                                                                        | Read       |

package/governance/ledger/skills/ui-craft/controls.md

@@ -23,9 +23,17 @@ The field is interaction design, and the authorities are the Nielsen Norman Grou
 | Declare `color-scheme`        | [MDN, color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme): the user agent adapts "The default colors of scrollbars and other interaction UI" and "The default colors of form controls", and the page opts in by declaring it on the `:root` element  | 2026-10-23 |
 | No intermediate flash         | [Cumulative Layout Shift](https://web.dev/articles/cls): "Unexpected layout shifts can disrupt the user experience", caused by content "dynamically added to the page before existing content"                                                                                                     | 2026-10-18 |
 
+## Signifiers
+
+| Bullet                              | Source                                                                                                                                                                                                                                                                                                                                 | Read       |
+| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| No control look without an action   | [Beyond Blue Links](https://www.nngroup.com/articles/clickable-elements/): "Conversely, don't make nonclickable items look like buttons." [Flat UI Elements Attract Less Attention](https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/): "UIs with weak signifiers required more user effort than strong ones" | 2026-11-08 |
+| Default cursor on decorative chrome | [MDN, cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor): `pointer` is "a pointer that indicates a link", and `default` is "The platform-dependent default cursor"                                                                                                                                                       | 2026-11-08 |
+
 ## Hover and focus effects
 
 | Bullet                                 | Source                                                                                                                                                                                                                                                                                                                                                                                      | Read                 |
 | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
 | Hover and focus content                | [Understanding Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html): additional content is "Dismissible" without moving hover or focus, "Hoverable" so the pointer can move over it, and "Persistent" until "the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid"                         | 2026-10-23, WCAG 2.2 |
 | No change of context on focus or input | [Understanding On Focus](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html): "When any user interface component receives focus, it does not initiate a change of context". [Understanding On Input](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html): changing a setting does not cause one "unless the user has been advised of the behavior before using the component" | 2026-10-23, WCAG 2.2 |
+| Hover behind a hover query             | [MDN, hover](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover): `none` covers devices where "many mobile devices emulate hovering when the user performs an inconvenient long tap", and `hover` means "The primary input mechanism can conveniently hover over elements."                                                                                                      | 2026-11-08           |

package/governance/ledger/skills/ui-craft/motion.md

@@ -5,7 +5,7 @@ description: Sources for claude/skills/ui-craft/references/motion.md, one row pe
 
 # Motion reference ledger
 
-The field is web accessibility, and the authorities are the W3C, through WCAG 2.2 and the ARIA Authoring Practices Guide, and MDN for the media feature.
+The fields are web accessibility, interaction design, and web performance. The W3C, through WCAG 2.2 and the ARIA Authoring Practices Guide, and MDN for the media feature back the accessibility rows. Shneiderman's direct manipulation paper and Material's motion system back reader-paced motion, and web.dev backs the held size.
 
 ## Moving content
 
@@ -15,6 +15,14 @@ The field is web accessibility, and the authorities are the W3C, through WCAG 2.
 | Halt rotation on focus or hover | [Carousel pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/): a rotating carousel "Stops rotating when keyboard focus enters the carousel" and "whenever the mouse is hovering over the carousel"                                                                     | 2026-10-18, APG      |
 | Three flashes                   | [Understanding Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html): pages "do not contain anything that flashes more than three times in any one second period"                                                | 2026-10-18, WCAG 2.2 |
 
+## Motion the reader drives
+
+| Bullet              | Source                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Read                           |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
+| Follow the input    | [Shneiderman, Direct Manipulation, IEEE Computer 1983](https://www.cs.umd.edu/~ben/papers/Shneiderman1983Direct.pdf): direct manipulation rests on "Rapid, incremental, reversible operations whose impact on the object of interest is immediately visible."                                                                                                                                                                                                                                 | 2026-11-08, IEEE Computer 1983 |
+| Swap at a threshold | [Material Components Android, Motion](https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md): the fade through variant will "sequentially fade out and in the outgoing and incoming views, respectively, in order to minimize the visual overlap of these views". Ruling out a blank frame is a House choice: a fade through dips both views toward zero at the seam, so a swap at the threshold keeps one text fully legible at every moment | 2026-11-08, Material           |
+| Hold the outer size | [Cumulative Layout Shift](https://web.dev/articles/cls): to animate without shifting layout, "Instead of changing the height and width properties, use transform: scale()"                                                                                                                                                                                                                                                                                                                    | 2026-11-08, web.dev            |
+
 ## Reduced motion
 
 | Bullet                           | Source                                                                                                                                                                                                                                                         | Read                 |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erclx/canon",
   "type": "module",
-  "version": "5.79.0",
+  "version": "5.80.0",
   "description": "Runs your agent's work and keeps its code good, on one setup for every repo.",
   "license": "MIT",
   "bin": {
@@ -75,8 +75,8 @@
     "astro": "^6.1.9",
     "husky": "^9.1.7",
     "micromatch": "^4.0.8",
-    "oxfmt": "0.75.0",
-    "oxlint": "1.90.0",
+    "oxfmt": "0.76.0",
+    "oxlint": "1.91.0",
     "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.8.1",

package/src/capture/render.ts

@@ -1,11 +1,18 @@
 import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
-import { basename, dirname } from 'node:path'
+import { basename, dirname, join } from 'node:path'
 import { pathToFileURL } from 'node:url'
 import { chromium } from 'playwright-core'
 import type { Browser, Locator, Page } from 'playwright-core'
+import {
+  mergeBlocks,
+  preparePage,
+  revealSection,
+  splitBlocks,
+} from '@/capture/sections'
 import type { CaptureSource } from '@/capture/sources'
 import {
   isGenericFamily,
+  isUrlSource,
   resolveCaptureSources,
   textFamilies,
 } from '@/capture/sources'
@@ -141,6 +148,148 @@ async function captureOne(
   }
 }
 
+export interface SectionOptions {
+  outDir: string
+  root?: string
+  width?: number
+  colorScheme?: ColorScheme
+}
+
+export interface SectionShot {
+  readonly index: number
+  readonly path: string
+  readonly top: number
+  readonly height: number
+}
+
+/**
+ * Families the page draws text in that a shot cannot promise to reproduce,
+ * recorded rather than refused, since a reference shows a site as a browser
+ * draws it and most outside sites declare a generic family somewhere.
+ */
+export interface SectionFonts {
+  readonly generic: readonly string[]
+  readonly missing: readonly string[]
+}
+
+export type SectionsResult =
+  | {
+      status: 'captured'
+      source: string
+      sections: SectionShot[]
+      failed: { index: number; reason: string }[]
+      fonts: SectionFonts
+    }
+  | { status: 'failed'; source: string; reason: string }
+
+/**
+ * Shoots one page as one PNG per section, in page order, each with its stamp.
+ * A section that fails to shoot is reported beside the rest rather than
+ * dropping them, and a page that never loads or names no root fails whole.
+ *
+ * Each shot is a document-coordinate clip rather than an element shot, since a
+ * merged section spans several elements and one element cannot frame them.
+ */
+export async function captureSections(
+  sourcePath: string,
+  { outDir, root, width, colorScheme }: SectionOptions,
+): Promise<SectionsResult> {
+  const pageSource: CaptureSource = isUrlSource(sourcePath)
+    ? { kind: 'url', url: sourcePath, pngPath: outDir }
+    : { kind: 'file', htmlPath: sourcePath, pngPath: outDir }
+  const browser = await chromium.launch()
+  try {
+    const page = await browser.newPage({
+      deviceScaleFactor: DEVICE_SCALE_FACTOR,
+      ...(width === undefined
+        ? {}
+        : { viewport: { width, height: DEFAULT_VIEWPORT_HEIGHT } }),
+      ...(colorScheme === undefined ? {} : { colorScheme }),
+    })
+    await page.goto(
+      pageSource.kind === 'url'
+        ? pageSource.url
+        : pathToFileURL(pageSource.htmlPath).href,
+    )
+    if (colorScheme !== undefined) await applyColorScheme(page, colorScheme)
+    await page.evaluate(() => document.fonts.ready.then(() => undefined))
+    await preparePage(page)
+
+    const blocks = await splitBlocks(page, root)
+    if (blocks === null) {
+      return failed(pageSource, `no element matched ${root}`)
+    }
+    if (blocks.length === 0) {
+      return failed(
+        pageSource,
+        `${root ?? 'main, or body without one,'} drew no box to split into sections`,
+      )
+    }
+    const fonts = await unresolvedFonts(page)
+
+    mkdirSync(outDir, { recursive: true })
+    const shots: SectionShot[] = []
+    const misses: { index: number; reason: string }[] = []
+    for (const [offset, section] of mergeBlocks(blocks).entries()) {
+      const index = offset + 1
+      const pngPath = join(
+        outDir,
+        `section-${String(index).padStart(2, '0')}.png`,
+      )
+      try {
+        const clip = await revealSection(page, section)
+        if (clip === null) {
+          misses.push({ index, reason: 'the section drew no box' })
+          continue
+        }
+        const png = await page.screenshot({ clip, fullPage: true })
+        writeFileSync(pngPath, png)
+        writeStamp({ ...pageSource, pngPath }, png)
+        shots.push({ index, path: pngPath, top: clip.y, height: clip.height })
+      } catch (error) {
+        misses.push({
+          index,
+          reason: error instanceof Error ? error.message : String(error),
+        })
+      }
+    }
+    return {
+      status: 'captured',
+      source: sourceIdentifier(pageSource),
+      sections: shots,
+      failed: misses,
+      fonts,
+    }
+  } catch (error) {
+    return failed(
+      pageSource,
+      error instanceof Error ? error.message : String(error),
+    )
+  } finally {
+    await browser.close()
+  }
+}
+
+/**
+ * The generic and the absent families among those the page's text draws in,
+ * read once over the whole body, which is the probe single-element capture
+ * refuses on, turned into a record.
+ */
+async function unresolvedFonts(page: Page): Promise<SectionFonts> {
+  const declarations = await renderedTextFamilies(page.locator('body'))
+  const generic = textFamilies(declarations.filter(isGenericFamily))
+  const named = textFamilies(
+    declarations.filter((declaration) => !isGenericFamily(declaration)),
+  )
+  const resolved = await Promise.all(
+    named.map((family) => resolvesFont(page, family)),
+  )
+  return {
+    generic,
+    missing: named.filter((_, index) => !resolved[index]),
+  }
+}
+
 /**
  * Runs inside the render rather than in a wrapper around it, so a capture
  * cannot succeed and leave the provenance unrecorded. A throw here reaches the
@@ -202,7 +351,10 @@ async function applyColorScheme(
   }, scheme)
 }
 
-function failed(source: CaptureSource, reason: string): CaptureResult {
+function failed(
+  source: CaptureSource,
+  reason: string,
+): Extract<CaptureResult, { status: 'failed' }> {
   return { status: 'failed', source: sourceIdentifier(source), reason }
 }
 

package/src/capture/sections.ts

@@ -0,0 +1,257 @@
+import type { Page } from 'playwright-core'
+
+/**
+ * The split, the merge, and the page preparation behind `canon capture
+ * --sections`. The thresholds are the ones track 218 measured on Notion,
+ * Vercel, Linear, and ElevenLabs, and nothing beyond those four sites tuned
+ * them.
+ */
+
+/** A block taller than this many viewports splits into its children. */
+const SPLIT_VIEWPORTS = 1.6
+/** A child shorter than this is decoration rather than a block of its own. */
+const MIN_CHILD_HEIGHT = 120
+/** A child narrower than this share of the viewport is a column, not a band. */
+const MIN_WIDTH_SHARE = 0.6
+/** A block shorter than this joins the section above it. */
+export const MERGE_BELOW_PX = 400
+/** The tallest shot a section takes, in CSS pixels. Taller is cut. */
+export const MAX_SECTION_PX = 2400
+
+const SECTION_ATTRIBUTE = 'data-canon-section'
+const WHEEL_STEP_PX = 600
+const WHEEL_PAUSE_MS = 150
+const SETTLE_MS = 800
+const NETWORK_IDLE_MS = 5_000
+
+/** One block the split found, in document coordinates and page order. */
+export interface Block {
+  readonly index: number
+  readonly top: number
+  readonly height: number
+}
+
+/** One or more adjacent blocks shot as one image. */
+export interface Section {
+  readonly blocks: readonly number[]
+  readonly top: number
+  readonly height: number
+}
+
+/**
+ * Loads what a reader would see by the time they reached each part of the
+ * page, then hides every fixed and sticky layer so none paints into the middle
+ * of a shot. Hiding is how a consent banner leaves, since a click on one
+ * decides something on the operator's behalf.
+ *
+ * Wheeling rather than `scrollTo`, because a lazy loader listening for wheel
+ * or for intersection sees each step, and a jump to the bottom skips them.
+ */
+export async function preparePage(page: Page): Promise<void> {
+  await page
+    .waitForLoadState('networkidle', { timeout: NETWORK_IDLE_MS })
+    .catch(() => undefined)
+  const height = await page.evaluate(
+    () => document.documentElement.scrollHeight,
+  )
+  for (let y = 0; y < height; y += WHEEL_STEP_PX) {
+    await page.mouse.wheel(0, WHEEL_STEP_PX)
+    await page.waitForTimeout(WHEEL_PAUSE_MS)
+  }
+  await page.evaluate(() => window.scrollTo(0, 0))
+  await page.waitForTimeout(SETTLE_MS)
+  await hideFixedLayers(page)
+}
+
+/**
+ * Runs again before every shot as well as once in preparation, since a consent
+ * banner commonly mounts on a timer after load and a single pass misses it.
+ * Starts at the root element rather than the body, since a consent manager
+ * can attach its host straight to `<html>`, and walks into open shadow roots,
+ * where such widgets mount and a document-level query never reaches. A closed
+ * root stays out of reach.
+ */
+async function hideFixedLayers(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const hide = (root: ParentNode): void => {
+      for (const element of root.querySelectorAll<HTMLElement>('*')) {
+        const position = getComputedStyle(element).position
+        if (position === 'fixed' || position === 'sticky') {
+          element.style.setProperty('visibility', 'hidden', 'important')
+        }
+        if (element.shadowRoot) hide(element.shadowRoot)
+      }
+    }
+    hide(document.documentElement)
+  })
+}
+
+/**
+ * Walks down from the root, splitting any block taller than the split
+ * threshold into its full-width children, and tags each block it keeps so a
+ * later step can find it again. Null when the root selector matched nothing.
+ *
+ * With no root named, `main` is tried and then `body`, since track 218 found
+ * `main` on every site it tried and a page without one still has a body.
+ */
+export async function splitBlocks(
+  page: Page,
+  root: string | undefined,
+): Promise<Block[] | null> {
+  return page.evaluate(
+    ({ root, attribute, splitViewports, minChildHeight, minWidthShare }) => {
+      const start = root
+        ? document.querySelector(root)
+        : (document.querySelector('main') ?? document.body)
+      if (!start) return null
+
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+      const measure = (element: Element) => {
+        const rect = element.getBoundingClientRect()
+        return {
+          element,
+          top: Math.round(rect.top + window.scrollY),
+          height: Math.round(rect.height),
+          width: Math.round(rect.width),
+        }
+      }
+      type Measured = ReturnType<typeof measure>
+      const split = (element: Element): Measured[] => {
+        const box = measure(element)
+        if (box.height <= viewportHeight * splitViewports) return [box]
+        const children = [...element.children]
+          .map(measure)
+          .filter(
+            (child) =>
+              child.height >= minChildHeight &&
+              child.width >= viewportWidth * minWidthShare,
+          )
+        if (children.length === 0) return [box]
+        return children.flatMap((child) => split(child.element))
+      }
+
+      return split(start)
+        .filter((box) => box.height > 0)
+        .map((box, index) => {
+          box.element.setAttribute(attribute, String(index))
+          return { index, top: box.top, height: box.height }
+        })
+    },
+    {
+      root,
+      attribute: SECTION_ATTRIBUTE,
+      splitViewports: SPLIT_VIEWPORTS,
+      minChildHeight: MIN_CHILD_HEIGHT,
+      minWidthShare: MIN_WIDTH_SHARE,
+    },
+  )
+}
+
+/**
+ * Joins each block shorter than the merge threshold to the section above it,
+ * so a page built of thin bands comes back as the sections a person would
+ * name. A short first block has nothing above it and joins the one below.
+ *
+ * A merge that would carry a section past the shot cap starts a new section
+ * instead, so a run of bands under a tall block is not cut off by the cap.
+ */
+export function mergeBlocks(
+  blocks: readonly Block[],
+  minHeight: number = MERGE_BELOW_PX,
+  maxHeight: number = MAX_SECTION_PX,
+): Section[] {
+  const sections: Section[] = []
+  let leading: Block[] = []
+  for (const block of blocks) {
+    const last = sections.at(-1)
+    if (last === undefined) {
+      if (leading.length && spanOf([...leading, block]).height > maxHeight) {
+        sections.push(spanOf(leading))
+        leading = []
+      }
+      leading.push(block)
+      const span = spanOf(leading)
+      if (span.height >= minHeight) {
+        sections.push(span)
+        leading = []
+      }
+      continue
+    }
+    const merged = spanOf([last, block])
+    if (block.height < minHeight && merged.height <= maxHeight) {
+      sections[sections.length - 1] = {
+        ...merged,
+        blocks: [...last.blocks, block.index],
+      }
+    } else {
+      sections.push(spanOf([block]))
+    }
+  }
+  if (leading.length) sections.push(spanOf(leading))
+  return sections
+}
+
+function spanOf(parts: readonly (Block | Section)[]): Section {
+  const top = Math.min(...parts.map((part) => part.top))
+  const bottom = Math.max(...parts.map((part) => part.top + part.height))
+  const blocks = parts.flatMap((part) =>
+    'blocks' in part ? part.blocks : [part.index],
+  )
+  return { blocks, top, height: bottom - top }
+}
+
+/** The clip a section's shot takes, measured again after it scrolled in. */
+export interface Clip {
+  readonly x: number
+  readonly y: number
+  readonly width: number
+  readonly height: number
+}
+
+/**
+ * Scrolls a section's first block into view so a reveal-on-view block paints,
+ * waits for it to settle, then measures the union of its blocks in document
+ * coordinates, cut at the shot cap. Measured after the scroll rather than
+ * taken from the split, since content loading above can move it.
+ */
+export async function revealSection(
+  page: Page,
+  section: Section,
+): Promise<Clip | null> {
+  const first = section.blocks[0]
+  if (first === undefined) return null
+  await page
+    .locator(`[${SECTION_ATTRIBUTE}="${first}"]`)
+    .scrollIntoViewIfNeeded()
+    .catch(() => undefined)
+  await page.waitForTimeout(SETTLE_MS)
+  await hideFixedLayers(page)
+  return page.evaluate(
+    ({ attribute, blocks, cap }) => {
+      const rects = blocks
+        .map((index) => document.querySelector(`[${attribute}="${index}"]`))
+        .filter((element): element is Element => element !== null)
+        .map((element) => element.getBoundingClientRect())
+      if (!rects.length) return null
+      const left = Math.min(...rects.map((rect) => rect.left))
+      const right = Math.max(...rects.map((rect) => rect.right))
+      const top = Math.min(...rects.map((rect) => rect.top))
+      const bottom = Math.max(...rects.map((rect) => rect.bottom))
+      const width = Math.round(right - left)
+      const height = Math.round(Math.min(bottom - top, cap))
+      if (width <= 0 || height <= 0) return null
+      return {
+        x: Math.max(0, Math.round(left + window.scrollX)),
+        y: Math.max(0, Math.round(top + window.scrollY)),
+        width,
+        height,
+      }
+    },
+    {
+      attribute: SECTION_ATTRIBUTE,
+      blocks: section.blocks,
+      cap: MAX_SECTION_PX,
+    },
+  )
+}

package/src/claude/cases/misc.ts

@@ -26,6 +26,11 @@ export const MISC_CASES: readonly SkillCase[] = [
       'Show me a few different treatments for this callout so I can pick one by looking.',
     expect: 'design-pick',
   },
+  {
+    prompt:
+      'Before we draft the landing page, pull references from linear.app so the round has a real site to look at.',
+    expect: 'design-references',
+  },
   {
     prompt:
       'Which layer of this landing page should I settle first, and what has to stay constant across it?',

package/src/claude/cases/setup.ts

@@ -35,6 +35,13 @@ export const SETUP_CASES: readonly SkillCase[] = [
       'Check that the dev server actually starts and the end-to-end suite passes against the scaffold.',
     expect: 'target-setup',
   },
+  // An empty folder has no files for setup's detection to read, which is what
+  // separates starting a project from bootstrapping one that already exists.
+  {
+    prompt:
+      'This folder is empty, start a new astro project in it and get it on the toolkit.',
+    expect: 'target-scaffold',
+  },
   {
     prompt:
       "Before I run this sync, tell me exactly what it's going to overwrite.",