Repository navigation
refactor(react)!: remove UI components; ship state and plane hooks only - #249
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
This was referenced Oct 9, 2026
This was referenced Oct 9, 2026
Owner
Author
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ed327922fd
ℹ️ 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".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
 |
Comments Outside DiffThese findings could not be posted inline.
|
pbroom
added a commit
that referenced
this pull request
Oct 10, 2026
ColorPlane still accepts the deprecated alias at runtime, so its exported ColorPlaneRenderer type keeps it too; only the new hook's option type is narrower. Dropping the alias stays with the component removal (#249) and its breaking changeset. Co-Authored-By: Claude Opus 5.5 <[email protected]>
pbroom
force-pushed
the
docs/react-hooks-guide
branch
from
October 10, 2026 02:12
a1f8229 to
3fc7e3f
Compare
pbroom
force-pushed
the
refactor/react-remove-ui-components
branch
from
October 10, 2026 02:12
ed32792 to
e6d6fe7
Compare
pbroom
force-pushed
the
docs/react-hooks-guide
branch
from
October 10, 2026 02:39
3fc7e3f to
f35e674
Compare
pbroom
force-pushed
the
refactor/react-remove-ui-components
branch
from
October 10, 2026 02:39
e6d6fe7 to
c3695c2
Compare
Owner
Author
pbroom
added a commit
that referenced
this pull request
Oct 10, 2026
ColorPlane still accepts the deprecated alias at runtime, so its exported ColorPlaneRenderer type keeps it too; only the new hook's option type is narrower. Dropping the alias stays with the component removal (#249) and its breaking changeset. Co-Authored-By: Claude Opus 5.5 <[email protected]>
pbroom
added a commit
that referenced
this pull request
Oct 10, 2026
…247) ## Stack Context First of three PRs that cut `color-kit/react` down to state utilities and performance primitives (#247 → #248 → #249). This one sits on #246 (`docs/syntax-colors`) and is additive: the new hooks land next to the existing components, which now delegate to them. ## What? New headless hooks. They own no DOM and take one plane, `ColorPlaneSpec = { color, axes? }`, where `axes` is the driver's `ColorAreaAxes`. - **`useColorPlaneRenderer(plane, options)`** is the `ColorPlane` rasterizer reshaped into a hook. - It keeps the WebGL path, the CPU fallback, the context-loss / restore handling and GPU cleanup on unmount. - It keeps the render-key dedupe (moving along an axis channel does not repaint), the DPR × `resolutionScale` × quality-scaled backing store, and rAF + `ResizeObserver` redraws. - It returns a stable callback `ref`, a `canvasKey` and the active `renderer`. The caller must use `canvasKey` as the canvas `key`: a canvas is locked to its first context kind, so the GPU ↔ CPU swap needs a fresh element. The hook warns once if the key is dropped. - **Geometry hooks** return memoized points plus `toSvgPath` / `toSvgCompoundPath` data for a `0 0 100 100` viewBox. They keep the layers' sync-at-rest / worker-while-dragging behaviour. - `useGamutBoundary` and `useChromaBand`. `useChromaBand` takes core's `ChromaBandMode`: `'clamped'` / `'proportional'`. - `useContrastRegion` returns `path` (contours) and `fillPath` (closed fill polygons). It keeps frozen drag sampling, the stable-fill fallback, the boundary snapping and closure, and `onMetrics`. Its non-rendering geometry moved out of `contrast-region-layer.tsx` into `contrast-region-geometry.ts`. - `useFallbackPoints` returns the sRGB and Display P3 fallback points. - **`useAdaptiveQuality(profile)`** is `ColorArea`'s frame-cost quality controller, extracted. - `ColorPlane` and `ColorArea` now run on `useColorPlaneRenderer` and `useAdaptiveQuality`, so the existing component tests cover the hooks too. - New tests: `use-color-plane-renderer.test.tsx` and `plane-geometry-hooks.test.tsx` (39 cases). They port the WebGL lifecycle, CPU fallback and edge-behaviour cases, and the contrast fill-side, APCA polarity, sampling and worker-metrics cases. - A changeset (`'color-kit': minor`) for the new hooks. ## Why? Approved API reduction: `color-kit/react` keeps state and perf primitives, and UI components go. Landing the hooks first keeps every step green and lets #249 delete the components without losing the renderer or the overlay math. ## Validation - `pnpm lint`, `pnpm build` (including DTS and the docs build), `pnpm test` (core 921, driver 157, react 256, docs 938), `pnpm format:check`, `pnpm agents:check:strict`, `pnpm check:preprod` and `pnpm --filter @color-kit/docs typecheck` all pass. - `eval-dependencies.test.ts` passes locally on macOS. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
pbroom
changed the base branch from
docs/react-hooks-guide
to
graphite-base/249
October 10, 2026 20:37
pbroom
added a commit
that referenced
this pull request
Oct 10, 2026
## Stack Context Second of three (#247 → #248 → #249). Sits on #247, which adds the hooks. The docs move off the components before #249 removes them, so each PR builds on its own. ## What? The React docs now build pickers from the hooks and plain elements. - **`examples/react/plane-picker.tsx`** exports a reusable `PlanePicker`: - A `<canvas>` painted by `useColorPlaneRenderer`. - An `<svg viewBox="0 0 100 100">` overlay drawn through a render prop. The demo draws two `useGamutBoundary` edges. - A `role="slider"` thumb. Pointer input goes through the driver's `createPointerDragController` with `normalizeColorAreaPointer` and `colorFromColorAreaPosition`. Keyboard and ARIA come from `colorFromColorAreaKey` and `getColorAreaValueText`. - `useAdaptiveQuality` feeds the renderer and the overlays. - **Other examples:** - `contrast-region.tsx` and `color-provider.tsx` (controlled) reuse `PlanePicker`. - New `channel-inputs.tsx` (on the guide page) shows native range inputs with `getSliderGradientStyles` rails, and a text field built on the driver's string helpers. - `color-area.tsx`, `color-slider.tsx` and `color-string-input.tsx` are removed. - **Narrative pages:** - Rewrote `/api/react` and `/guides/react`. - New symbol notes for `useColorPlaneRenderer` and `useContrastRegion`; the component notes are removed. - Updated cross-references in the performance, contrast-palette and headless-picker guides, the plane intro, and the entry summaries. - The callout names control-kit's `Plane` / `Slider` as an optional host, without depending on it. - **API sidebar:** the react domains are now Color / Plane renderer / Plane geometry / Performance. - **Scripts:** retargeted the drag profiling scripts to the hook-based example. They are now `profile:plane-picker` and `test:plane-picker-drag`, and use the `[data-picker-area]` / `[data-picker-thumb]` selectors. ## Why? The components go away in #249. The docs must show the supported way to build a picker: hooks for rendering and geometry, the driver for input math, and your own elements. ## Validation - `pnpm lint`, `pnpm build` (including DTS and the docs bundle budget), `pnpm test` (core 921, driver 157, react 256, docs 949), `pnpm format:check`, `pnpm agents:check:strict`, `pnpm check:preprod` and `pnpm --filter @color-kit/docs typecheck` all pass. - **Bundle budget:** the channel-inputs example moved to the guide page so the `/api/react` chunk stays under the 200 kB budget. It is 187 kB. - **Browser check:** on a production build served with `vite preview`, `/api/react` and `/guides/react` render the canvas and the overlays. - A pointer drag moves the thumb continuously (21 distinct positions over 21 frames). - The arrow keys step the focused thumb, and the hue slider repaints the WebGL plane. - The contrast fill stays on screen while dragging, and the text field commits and reverts as described. - No console errors from real interaction. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
color-kit/react now exports the Color provider/context, useColor, useMultiColor, the color store, and the plane hooks (useColorPlaneRenderer, useGamutBoundary, useChromaBand, useContrastRegion, useFallbackPoints, useAdaptiveQuality). The UI components are removed outright rather than moved: ColorArea, Thumb, ColorPlane, OutOfGamutLayer, Layer, Background, Line, Point, GamutBoundaryLayer, ChromaBandLayer, ContrastRegionLayer, ContrastRegionFill, FallbackPointsLayer, ColorSlider, SliderMarker, ChromaMarkers, ColorStringInput and ColorInput, with their tests, prop types and the unused internal helpers they relied on. - Drop the optional @color-kit/control-kit peer/dev dependency, the ./color-input subpath and tsup entry, the onlyBuiltDependencies allowance, and the now-unused axe-core and user-event dev deps; update the lockfile. - Rename ColorArea quality types to ColorPlanePerformanceProfile / ColorPlaneQualityLevel; drop the deprecated 'canvas2d' renderer alias. - Facade: stop excluding color-input from the react copy; test-exports asserts the hooks exist and the removed components stay absent. - Add size-limit budgets for color-kit/react imports. - Retarget the react benches (plane-interaction-bench), update README, DESIGN, the backlog and driver doc comments, and the docs declaration test; add a breaking changeset (minor, pre-1.0). BREAKING CHANGE: the color-kit/react UI components and the @color-kit/react/color-input subpath are removed; build pickers from the hooks and color-kit/driver. Co-Authored-By: Claude Opus 5.5 <[email protected]>
Color's JSDoc example (shown in the API reference and editor hovers) imported ColorArea, ColorSlider and ColorStringInput, which no longer exist. It now composes useColorPlaneRenderer and a native range input under the provider. Comments, test names and bench labels that still named ContrastRegionLayer, ColorPlane or ColorInput now name the hooks or the driver behaviour, and the README example no longer reuses the ColorPlane name. Co-Authored-By: Claude Opus 5.5 <[email protected]>
pbroom
force-pushed
the
refactor/react-remove-ui-components
branch
from
October 10, 2026 20:40
c3695c2 to
470f905
Compare
|
Deployment failed for project color-kit with the following error: Learn More: https://vercel.com/pbrooms-projects?upgradeToPro=build-rate-limit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stack Context
Third of three (#247 → #248 → #249). Sits on #248. The hooks (#247) and the docs (#248) are already in place, so this PR only removes code.
What?
color-kit/reactnow exports state hooks and plane hooks only.ColorArea,Thumb,ColorPlane,OutOfGamutLayer,Layer,Background,Line,Point,GamutBoundaryLayer,ChromaBandLayer,ContrastRegionLayer/ContrastRegionFill,FallbackPointsLayer,ColorSlider,SliderMarker,ChromaMarkers,ColorStringInputandColorInput. Their props and metrics types, their tests, and the internal helpers only they used (assign-ref,use-focus-visible,use-measured-element-size) go too.@color-kit/control-kitpeer and dev dependency, the./color-inputsubpath and its tsup entry, and theonlyBuiltDependenciesallowance.axe-coreand@testing-library/user-event.ColorAreaPerformanceProfile→ColorPlanePerformanceProfile;ColorAreaQualityLevel→ColorPlaneQualityLevel.ColorPlaneRendererloses the deprecated'canvas2d'alias.build.mjsno longer excludes the color-input files.check-artifacts.mjsdrops the color-input guard.test-exports.mjsasserts the hooks exist (ESM and CJS) and the removed components stay absent..size-limit.jsonbudgets forcolor-kit/reactimports:Color + useColor: 19.1 kB, budget 20 kB.useColorPlaneRenderer: 16.1 kB, budget 17 kB.color-area-interaction-benchbecomesplane-interaction-bench(bench:plane-interaction); the README is updated. The renderer bench is unchanged.ContrastRegionLayerfollow-up now points atuseContrastRegion.@color-kit/react/color-inputalias, stale domain aliases) and the declarations test now coverColor, the hooks andColorContext.'color-kit': minor, written as a breaking change per the pre-1.0 convention, with migration notes.Export count: 105 root exports (24 values) plus the
color-inputsubpath on the base, down to 60 (13 values).Why?
Approved decision:
color-kit/reactkeeps state utilities and performance primitives. Generic UI controls are not color-specific; apps compose the hooks with their own elements or with control-kit, which has no color math and no color-kit dependency. Pre-1.0, so this is a hard cut-over.Validation
pnpm lint,pnpm build(including DTS),pnpm test(core 921, driver 157, react 104, docs 906),pnpm format:check,pnpm agents:check:strict,pnpm --filter @color-kit/docs typecheck,pnpm check:preprod,pnpm sizeandpnpm check:artifacts:metadata(publint + attw) all pass./api/reactpicker drags continuously, the arrow keys step it, and/guides/reactworks, with no console errors.🤖 Generated with Claude Code