feat(docs): native API map at /api/map by pbroom · Pull Request #245 · pbroom/color-kit

pbroom · 2026-10-08T04:22:41Z

Slice S5, the final slice of the docs overhaul.

Commits

feat(docs): native API map at /api/map. A d3-hierarchy tidy tree rendered as React SVG and fed by the generated API data. There are no CDN scripts. It has its own pan/zoom (drag, pinch, ⌘/Ctrl-wheel), arrow/Home/End keyboard navigation, entry/kind/name filters and a ledger per entry point. The first view is prerendered. The chunk is 16.2 kB gzip.
docs(react): entry narrative, live examples and symbol notes. /api/react covers the provider and hooks, requested vs displayed, controlled vs uncontrolled, accessibility and performance. It has five live examples (ColorArea + ColorPlane, ColorSlider, ColorStringInput, a controlled provider, a contrast region layer) and edge-case notes for the main components. Every claim was checked against packages/react/src.
feat(docs): polish the search dialog. Symbols come first with kind and entry, then pages, then prose with highlighted excerpts. Recent searches are kept, and the dialog goes full-screen below 640 px.
fix(docs): truncate long sidebar names and collapse API domains. The symbol tree is lazy-loaded.
chore(docs): point the ColorArea Playwright tools at /api/react. The profile shows about 0.3 ms from pointer to thumb and no dropped frames.
fix(docs): keep the map ledger from widening phone pages.
fix(docs): wrap long export names in symbol page headings. The 60 longest names were checked at 375 px.

Verified

Gates: lint, build, test (docs 830), format:check, typecheck, size, check:artifacts and agents:check:strict all pass.
Budgets: home initial JS is 101.7 kB gzip (limit 110), unchanged from docs: add concept pages, guides and entry-point narratives #244. The largest chunk is 194.8 kB (limit 200).
Browser: checked light and dark at 1440 and 375 px. No hydration warnings or console errors.

Part of the color-kit assessment stack (#204 → #245).

🤖 Generated with Claude Code

vercel · 2026-10-08T04:22:44Z

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

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

chatgpt-codex-connector · 2026-10-08T04:22:54Z

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-08T04:26:03.302556Z	`30b4168`	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 d031ce6aa4bbb155a83eda3db83867be260ef659. Full map/search range reviewed; inherited search focus/error fixes ported to replacement component. 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

Final re-review at bcfcfe9c14a7d1fd08f873b9076f80a04ef30202: Full map/search range reviewed; inherited search focus/error fixes ported to replacement component. 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 · 2026-10-10T18:47:23Z

Merge activity

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

Rebuild the API map prototype as a route over the generated entry data: a d3-hierarchy tidy tree drawn as React SVG with pointer pan, pinch and Cmd/Ctrl-wheel zoom, tree keyboard navigation, collapsible entry → domain → symbol levels, find/entry/kind filters, an export ledger per entry point, and nodes that open their reference pages. The first view (entry points closed) and the ledger prerender; styles are inlined so the route adds no stylesheet request. Co-Authored-By: Claude Opus 5.5 <[email protected]>

Write the color-kit/react narrative (provider and hooks, requested vs displayed, controlled vs uncontrolled, accessibility, performance) with live examples for ColorArea + ColorPlane, ColorSlider, ColorStringInput, a controlled Color provider and a contrast region layer, plus edge-case notes for Color, ColorArea, ColorSlider, ColorStringInput and ContrastRegionLayer. Notes that ColorInput stays off the published facade until control-kit is published. Co-Authored-By: Claude Opus 5.5 <[email protected]>

Move the dialog to components/search. Symbol hits list first with their kind and entry point, then page titles, then Pagefind prose hits with highlighted excerpts. An empty query shows recently opened results (local to the browser, clearable); every opening starts empty. Arrow keys, Ctrl+Home/End, Enter and Escape drive it; a key legend shows on pointer devices, and below 640 px the dialog fills the screen with a close button. Its styles load globally so the shell's preload map does not grow. Co-Authored-By: Claude Opus 5.5 <[email protected]>

Grid tracks sized to the longest symbol name made the sidebar scroll sideways. Pin the tracks to the nav width so names end in an ellipsis (with the full name in `title`), and group an entry's symbols into collapsible domains with kind glyphs; the current page's domain starts open and a nav filter opens every match. The symbol tree is a lazy chunk, so the home page's initial JS does not grow. Co-Authored-By: Claude Opus 5.5 <[email protected]>

profile-color-area and test-color-area-drag now target the ColorArea examples on /api/react by their figure names. The profiler measures from outside (frame durations, long tasks, pointer-to-thumb latency) instead of relying on instrumentation in the removed demo page. Co-Authored-By: Claude Opus 5.5 <[email protected]>

The ledger's visually hidden cell labels were positioned against the page, so their static position past the scroll edge counted as page overflow at 375 px. Contain them in the scroll region. Co-Authored-By: Claude Opus 5.5 <[email protected]>

Export names have no spaces, so the longest (getDefaultPlaneComputeTelemetrySnapshot, 39 characters) widened symbol pages to 531 px on a 375 px phone. Let mono titles break inside the name, step them down to the 17 px size below 640 px, and let the breadcrumb wrap the same way. Checked the 60 longest names: none widen the page; declarations keep scrolling inside their block. Co-Authored-By: Claude Opus 5.5 <[email protected]>

… map "Show … on the map" searched only the already-filtered tree, so with a different entry, a name query, or kinds that excluded it, the action did nothing. Reset the entry, name and kind filters when they hide the entry, then expand, reveal and focus it (focus after the node renders). Co-Authored-By: Claude Opus 5.5 <[email protected]>

- Drop a mouse gesture whose release happened outside the map before capture. - Give map treeitems aria-posinset/aria-setsize from their visible siblings. - Keep the search footer's Clear recent button on phones and touch devices; hide only the keyboard hints. Co-Authored-By: Claude Opus 5.5 <[email protected]>

vercel · 2026-10-10T20:28:44Z

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

## Stack Context Part of the docs overhaul stack (S1–S5). This PR sits on #245 and replaces the gray-only syntax styling with a hue palette. ## What? - Adds five syntax roles to `src/styles/tokens.ts`: keyword (330°), function (255°), type (195°), constant (55°) and string (145°). Each theme uses one lightness and chroma: L 0.5 / C 0.16 in light, L 0.8 / C 0.12 in dark. - The roles are generated into `tokens.css` like the accent: sRGB fallbacks come from `toSrgbGamut`, and a `display-p3` override applies when a role falls outside sRGB. - Punctuation, parameters and comments stay gray. - The Shiki CSS-variables theme gets a separate `token-type` scope, so types and functions read differently. - API signatures use the same palette: - The declared name is colored as a function, or as a type for classes, interfaces and type aliases. - Type references are colored as types. - The import line is highlighted. - Removes the font-weight emphasis on code tokens. - `tokens.test.ts` now holds every syntax role to 4.5:1 contrast on `--code-bg` in both themes. ## Why? Review feedback: code samples should have real syntax highlighting. Swatch chips still mark color literals as data. ## Validation - `pnpm lint`, `pnpm build`, `pnpm test` (docs 844, core 904, driver 150, react 217), `pnpm format:check` and `pnpm agents:check:strict` all pass. The docs typecheck also passes. - A scan of the prerendered `dist` found token colors in all 826 `<pre>` blocks. - Checked in the browser, in light and dark themes, on `/start`, `/api/core/toCss` and `/guides/react`. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

pbroom force-pushed the docs/s4-content branch from c0501d3 to 97ff2cd Compare October 8, 2026 18:45

pbroom commented Oct 8, 2026

View reviewed changes

vercel Bot deployed to Preview October 8, 2026 18:54

View deployment

pbroom force-pushed the docs/s5-react-map-search branch from d031ce6 to bcfcfe9 Compare October 8, 2026 18:54

pbroom force-pushed the docs/s4-content branch from 97ff2cd to 0b1fb88 Compare October 8, 2026 18:54

pbroom commented Oct 8, 2026

View reviewed changes

vercel Bot deployed to Preview October 8, 2026 19:06

View deployment

This was referenced Oct 9, 2026

feat(react): add plane renderer, geometry and adaptive-quality hooks #247

Merged

docs(react): rebuild the React docs around the plane hooks #248

Merged

refactor(react)!: remove UI components; ship state and plane hooks only #249

Merged

pbroom force-pushed the docs/s5-react-map-search branch from bcfcfe9 to d0baac5 Compare October 10, 2026 02:39

pbroom force-pushed the docs/s4-content branch from 0b1fb88 to 9cc3717 Compare October 10, 2026 02:39

vercel Bot deployed to Preview October 10, 2026 02:43

View deployment

pbroom changed the base branch from docs/s4-content to graphite-base/245 October 10, 2026 20:25

pbroom changed the base branch from graphite-base/245 to main October 10, 2026 20:27

pbroom and others added 9 commits October 10, 2026 20:28

pbroom force-pushed the docs/s5-react-map-search branch from d0baac5 to f41cc3a Compare October 10, 2026 20:28

pbroom merged commit 3fc9e02 into main Oct 10, 2026
5 of 6 checks passed

pbroom deleted the docs/s5-react-map-search branch October 10, 2026 20:30

Navigation Menu

Repository navigation

feat(docs): native API map at /api/map - #245

feat(docs): native API map at /api/map#245
pbroom merged 9 commits into
mainfrom
docs/s5-react-map-search

pbroom commented Oct 8, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

pbroom left a comment

Uh oh!

pbroom left a comment

Uh oh!

pbroom commented Oct 10, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Oct 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

pbroom commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Commits

Verified

Uh oh!

vercel Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

pbroom left a comment

Choose a reason for hiding this comment

Uh oh!

pbroom left a comment

Choose a reason for hiding this comment

Uh oh!

pbroom commented Oct 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

vercel Bot commented Oct 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

pbroom commented Oct 8, 2026 •

edited

Loading

vercel Bot commented Oct 8, 2026 •

edited

Loading

chatgpt-codex-connector Bot commented Oct 8, 2026 •

edited

Loading

pbroom commented Oct 10, 2026 •

edited

Loading