[mvilacad]

Closes #223

Summary

The site now carries the 2026 concept: the library is a sketchbook, every page a numbered reference that a person picks and an AI reproduces. The sketchbook aesthetic (grid paper, serif display, hard shadows, marks.css) is kept; no new font, no new colors.

• site/src/styles/sketch.css (new): .sk-page, .sk-page__num, .sk-caption, .sk-eyebrow, .sk-hatch, plus the bar and footer rules moved out of landing.css; forced-colors block.
• SiteBar.astro / SiteFooter.astro (new): one chrome for landing and templates; the footer is also on gallery, theme, changelog and every docs page (the docs header stays the DocsShell contract, so the package is untouched, no changeset).
• Landing: hero is SketchbookHero.svelte (two-page book: gallery cards #001, #005, #015 with Pick on the left, the live prompt and the first 12 lines of the last pick's /api/v1/en/e/{id}.txt on the right, Copy picks, "Continue in the gallery"). Chapters: #pick, #agents (real p/001.txt prompt, MCP/plugin/skills/llms.txt list), #theme (ThemeLab + HeroStage), #mobile, #data, #start. #quality removed. New finale copy and actions.
• Gallery cards are sk-page sheets with a number tab, new header, and a "how it works" page.
• Demo.astro blocks are numbered pages (#NNN tab, Reference #NNN and Pick in the gallery links, matched from the catalog by page + title slug).
• Docs: Gallery card on /docs/, "Pick a demo by number" section in ai-agents.
• site/public/api/v1/** was regenerated by the package build (needs/version 4.0.0 to 4.1.0, stale on the branch).

Deviations from the plan, with reason: the nav bar collapses to brand + "Open the sketchbook" below 900px (the token lint only allows the breakpoint scale, and the docs header brand is nowrap, so the "sketchbook" tag is hidden below 900px there to avoid a 65px sideways scroll at 360px). The hero is one column (copy above, the open book below) instead of the old two-column hero, since the book needs the full row.

Regression test (written first)

Both new tests were added before any implementation and failed on the unchanged site:

4 failed
  [desktop] › tests/docs.spec.ts:35:2 › docs › demo blocks carry their catalog number
  [desktop] › tests/landing.spec.ts:29:2 › landing › hero sketchbook: picking #005 updates the prompt and the gallery link
  [mobile]  › tests/docs.spec.ts:35:2 › docs › demo blocks carry their catalog number
  [mobile]  › tests/landing.spec.ts:29:2 › landing › hero sketchbook: picking #005 updates the prompt and the gallery link
landing: Error: locator.check: Test timeout of 30000ms exceeded. waiting for getByLabel('Pick #005')
docs:    no `Reference #001` link / no `.sk-page__num` on the page

After the implementation:

bun run test:e2e -- tests/landing.spec.ts tests/docs.spec.ts -g "hero sketchbook|demo blocks carry" --retries=0
  4 passed

(The docs test first failed once for a test bug, .first() matched #006 because the page lists demos in a different order from the catalog; it now scopes to the "Full width" block.)

Verification

• bun run --cwd site build: ok; grep -c sk-page__num site/dist/docs/inputs/button/index.html = 7 (>= 6); grep -o '#001' site/dist/index.html | head -1 = #001.
• bun run test:e2e -- tests/landing.spec.ts tests/gallery.spec.ts tests/docs.spec.ts tests/layout.spec.ts tests/routes.a11y.spec.ts tests/routes.smoke.spec.ts --retries=0: 1129 passed, 412 skipped, 0 failed. The chapter-rail test now iterates pick, agents, theme, mobile, data, start. The layout suite caught two real defects on the way (number tab overlapping demo headings; brand tag widening the mobile docs header), both fixed.
• bun run validate: green (build, themes, token lint, biome, unit, package and site types, size).

Visual baselines: regenerated

Regenerated on CI (run 38925777766, bun run test:vrt:update, ci.yml enabled for that dispatch and disabled again): commit d44f7c9 test: update site visual baselines.

Checklist

• bun run validate passes
• Changeset: not needed, packages/ui is untouched
• Docs updated (/docs/ Gallery card, ai-agents "Pick a demo by number")