feat(docs): live plane hero on home and the example system

[pbroom]

Summary

Docs overhaul slice S3: the live plane hero on the home page, plus the example system.

Home page

• Headline: "A queryable OKLCH color engine.", set over a live hue slice of OKLCH (chroma × lightness).
• sense(plane) answers three queries:
  • the sRGB region
  • the Display P3 boundary
  • the WCAG AA region on white or black, chosen by the theme
• Underneath, a 160×160 toP3Into loop paints a display-p3 canvas.
• The first frame (hue 264) is computed in Node at build time via ?build. The SVG prerenders and hydrates from the same JSON, and color-kit/plane loads lazily after hydration.
• Hue is set with a native range input that has aria-valuetext, or by dragging horizontally on the plane. Updates are rAF-throttled.
• Below the hero: its own source, the install line and three "what you can ask" links.
• Follow-up commit: the hero axes get every tick and separate axis titles.

Examples

• <Example> renders the live component above its source, which is highlighted at build time. It collapses long sources and isolates failures.
• plugins/eval-example.ts fills in // → results by running each snippet against the color-kit source. This is documented in src/examples/README.md.
• The graphics demos get *Example wrappers.
• The old Sandpack plane quick start is now a real example in src/examples/plane/quick-start.tsx.

Contract changes (backwards compatible)

• <Example>'s source also accepts the ?highlighted module.
• New collapseAfter prop.
• New ?build imports.
• Prerender links route-chunk CSS.
• ESLint allows bare expressions in example snippets.

Rebased onto #242 with no conflicts. The eslint.config.js and styles changes merged cleanly with S2's; the api.css import and the example-snippet rule are both kept.

Verified

• On this branch: pnpm build and pnpm test.
  • Bundle check passes: the largest chunk is 194.8 kB against a 200 kB limit, and home initial JS is 100.2 kB gzip against a 110 kB limit.
  • Docs tests pass: 601 tests.
• At the stack top (docs: add concept pages, guides and entry-point narratives #244): lint, format:check, typecheck, size, check:artifacts, check:preprod and agents:check:strict all pass.
• Browser checks at the stack top:
  • Dragging the hero hue slider from 264° to 65° recomputes the geometry (about 3.8 ms of queries plus paint).
  • In light theme the contrast reference flips to white.
  • At 375 px the hero fits with no horizontal scroll.
  • No console errors or hydration warnings.

Part of the color-kit assessment stack.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
color-kit	Ready	Preview	Oct 10, 2026 3:01am UTC

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-08T03:55:36.100183Z	89c7f6e	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[pbroom]

Reviewed the full incremental PR and its corrections at dbb123899603d3196da2d964fba6d65fa6064ad1. Examples/content reviewed; transitive evaluator invalidation and hero failed-download recovery corrected. No remaining actionable findings in the reviewed scope.

Independent correction re-reviews and stack preservation verification passed. At the integrated tip, lint, full build/DTS, 2,208 tests, formatting, strict agent checks and 14 built-site Chrome tests passed. All recorded actionable review threads are addressed. Hosted CI is being verified separately; this review does not authorize merge or release.

[pbroom]

Hosted CI follow-up: the dependency invalidation regression failed on the published head (cached output after a transitive edit): https://github.com/pbroom/color-kit/actions/runs/37826729585. The two dependency threads are reopened while the author and independent reviewer diagnose it. Local success did not establish hosted success; correction and exact-head CI verification remain owned.

[pbroom]

Final re-review at b3eb6234f03affa9404225e4439aae233951b387: Examples/content reviewed; transitive evaluator invalidation and hero failed-download recovery corrected. The hosted dependency-test follow-up is included; no remaining actionable findings in scope.

All 12 final stack heads now pass CI, including Node 20/22 and the plane benchmark. Final local lint, build/DTS, 2,209 tests, formatting and strict agent checks pass. The 14 built-site browser checks passed on unchanged application code; the follow-up changes only the regression test and archive lesson. Vercel previews are tracked separately while pending.

[pbroom]

Merge activity

• Oct 10, 6:47 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Oct 10, 8:23 PM UTC: Graphite rebased this pull request as part of a merge.
• Oct 10, 8:24 PM UTC: @pbroom merged this pull request with Graphite.

[vercel]

Deployment failed for project color-kit with the following error:

Resource is limited - try again in 24 hours (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/pbrooms-projects?upgradeToPro=build-rate-limit