feat: registry hardening, installable themes, Theme Studio, a11y & tests#87
Merged
Conversation
Served registry JSON leaked unresolvable @repo/*, @smoothui/data, and deep-relative import specifiers into user projects. Rewrite them to the paths where the shadcn CLI installs the files, emit registry:block for blocks, registry:lib for data and animation constants, human-readable titles, and deduplicated registry dependencies detected from rewritten content. Ship lib/animation.ts as a new installable lib item.
Add six registry:theme items (candy, indigo, blue, red, orange, green) exposing the SmoothUI neutral scale and brand accents as standard shadcn cssVars with light and dark modes, plus the Inter font token. Add a registry:item skill that installs SKILL.md with SmoothUI usage and animation conventions for AI assistants. The docs color picker now offers a copy-to-clipboard install command for the selected theme. A CI verification script renders every registry item, validates it against the shadcn registry-item schema, and fails on workspace import leaks.
Wire a typecheck task through Turbo and GitHub Actions with tsc scripts in every TS workspace, fixing the broken tsconfig resolution in the smoothui package along the way. Pin radix-ui to a single exact version via pnpm override so mixed resolutions can't duplicate Radix context providers (regenerated "latest" from bump-ui stays harmless). Bump the shadcn dependency to ^4.10.0 (4.11.0 is still inside the supply-chain release cooldown) and run the registry verification script in CI.
The v3 to v4 migration kept numeric size props, but v4 interprets bare
numbers as pixels: maxSize={100} became a 100px ceiling that conflicted
with the other panel's constraints and locked the preview resizer
(separator rendered with aria-valuemin equal to aria-valuemax). Use
percent strings for panel constraints and the imperative resize call,
and drop the data-panel-size handle class that no longer exists in v4.
Every animated block (headers, pricing, stats, testimonials, footers, faqs, team, logo clouds, shared helpers) now gates its motion props behind useReducedMotion, per WCAG 2.1 SC 2.3.3: entrance and in-view animations render in their final state instantly, gesture animations are disabled, and transitions drop to zero duration. The non-reduced animation design is unchanged. Also removes two dead constants in footer-2.
Add render smoke tests for the 12 previously untested components and render + axe accessibility tests for all 34 blocks (previously zero block coverage). Fix the three real accessibility violations the new tests caught: unlabeled logo links in logo-cloud-2, unlabeled nav buttons in testimonials-2, and an invalid dl structure in faq-1. Test infra: include blocks in the vitest run, alias @smoothui/data, inline react-tweet so its CSS-module imports load (its suite previously failed silently at load time), and drop dangerouslyIgnoreUnhandledErrors since the teardown errors it suppressed no longer reproduce. Add v8 coverage with regression thresholds (lines 55, statements 55, functions 48, branches 38) enforced by pnpm test, and stop caching the root lint task in Turbo.
The component claimed full viewport height wherever it was embedded — including in user projects installing it from the registry.
Add /themes, a shadcn/create-style studio in its own full-bleed route group (the (home) layout caps content at max-w-7xl). The left inspector panel follows the Grid Loader customizer language: palette swatch strip, light/dark segment, a live radius scrubber that drives the preview and the copied CSS, the shadcn preset code (b3gmgq), and install/copy-CSS actions. The preview is a draggable board (pan in any direction, starting centered) showing every component demo in the registry — 70 cards in flex-column masonry over a frame-box dotted field. Demos are code-split and mounted/unmounted with an IntersectionObserver that remembers card heights, so only the visible ~10 run at any time. Interactive controls inside demos keep pointer ownership; the pan only engages elsewhere. Flex columns replace CSS multicol, which broke Motion layout animations. Theming is scoped to the board by overriding the underlying SmoothUI tokens (the docs Tailwind theme is declared with @theme inline). Navigation: Themes entry in the desktop and mobile navbars, and a link from the floating color picker.
Browsers start a ghost image drag on any <img> press-and-move, which
fights drag/select interactions (interactive-image-selector, phototab)
and feels broken anywhere else. Set draggable={false} on every image
rendered by components and blocks so installed copies behave too.
Two stacked causes broke demo interactions on the theme studio board: The frame-box ::before dots layer is absolutely positioned, so it painted above the board's static children and intercepted every pointer event — clicks never reached the demos at all. Decorative layers must not hit-test: add pointer-events-none to the pseudo element in the shared class. The pan also captured the pointer on pointerdown, which retargets the eventual click to the canvas and silently kills onClick handlers on non-button elements (expandable cards). The pan now only captures after the pointer travels a 5px threshold, and ignores non-primary buttons so right-click reaches context menus. Verified in-browser: dropdown menu opens, context menu opens on right-click, expandable cards expand, and panning still works.
Each board card now has a terminal icon next to the docs link that copies the shadcn CLI install command for that component, with the full command shown as the tooltip.
The design system's @theme inline block mapped --color-destructive and --color-sidebar-accent to source variables that were never declared, so the 76 destructive-token usages across the library resolved to nothing — the smooth-button destructive gradient visibly faded to white. Declare --destructive (light and dark, matching the registry themes) and --sidebar-accent in the docs theme, and have the studio preview override --destructive per palette mode from the theme cssVars.
The Grid Loader customize panel now floats detached from the screen edges (margin on top, right and bottom, fully rounded) instead of hugging the viewport, and its rows pick up the larger 16px radius. The theme studio sidebar adopts the same visual language: wider panel, 56px rounded-2xl rows with 17px labels, larger palette swatches, and roomier preset rows so nothing wraps.
… panels Measured the original dialkit inspector (joshpuckett.me/dialkit): 36px rows with 8px radius, 13px/500 labels, 13px mono values, 15px/600 title, 13px/600 section headers at 65% opacity, ~254px panel. The previous pass overshot every metric because the reference screenshots were 2x retina. Both the Grid Loader customize drawer and the theme studio sidebar now use the real scale.
Track 36px with 8px radius (was 52/12), 13px/500 label and 13px mono value (was 17/15), with thumb, ticks and insets scaled to match. Keeps the component visually consistent with the design-tool panels it is meant for.
The shadcn/create link and --preset row previously used the pink preset for every palette; each palette now carries its own verified preset code (generated on ui.shadcn.com/create and round-tripped through shadcn preset decode): candy b3gmgq, indigo b2pzIe, blue b1PzeK, red b4Fywy, orange b3PBYm, green b2YOAa. New customization rows in the dialkit language: a Sans/Serif/Mono font segment that drives the preview typography and the copied CSS font-sans token, and an Accent lightness scrubber (±15) that shifts the oklch lightness of the brand accent across the preview and every accent-bearing variable in the copied CSS (accent, ring, charts, sidebar).
shadcn/create presets can only carry their catalog enums, so opening a SmoothUI theme there loses the exact oklch palette, continuous radius, accent shift, font and neutral tint. The studio now has its own preset format (s1.<palette>.<radius>.<accent>.<font>.<tint>) that round-trips the full state: - Shareable links: /themes?preset=<code> restores every control. - Full distribution without shadcn's limits: the registry route serves theme-custom-<code>.json built on the fly from the code, so any custom combination installs with the standard shadcn CLI. - New Tint control (neutral/warm/cool) that re-tints the smooth neutral scale across preview, copied CSS and installable item. The preset row shows the SmoothUI code, with a copy-link action; the shadcn/create link remains as an explicitly labeled approximation. The preset/encoding logic lives in lib/studio-preset.ts, shared by the studio client and the registry route.
The supply-chain release cooldown has passed. Its published schema still lacks the registry:skill type, so the skill item stays as registry:item.
Next flagged it as the LCP on the studio's initial centered view.
A search row in the sidebar filters the board's demo cards by component name, and a crosshair action next to shuffle re-centers the pan field — useful after wandering across 70 cards.
Document the installable themes, the Theme Studio controls, the SmoothUI preset format (share, install, copy CSS) and the shadcn/create approximation caveat. Add the 3.5.0 highlight entry covering the studio, themes and presets, reduced-motion compliance, and the registry and testing infrastructure work.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
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.
What
Integration PR for the macro update into
develop. Bundles the registry hardening, installable themes, the Theme Studio, full reduced-motion accessibility, and the test/CI expansion. This is the first slab; the UI redesign lands ondevelopnext.Highlights
Registry correctness
b73ac1drewrite workspace imports (@repo/*,@smoothui/data, deep relatives) in served registry JSON — installs were shipping unresolvable specifiers to user projects246e0a2missing"use client"on scramble-hoverf065d77installable themes, AI skill item, theme install buttonverify-registry.mtsrenders every item and fails on any leaked workspace importThemes + Theme Studio
registry:themeitems (theme-candy…theme-green), light + dark, Radix + Base UI/themes: pannable infinite board previewing all 70 demos with the theme applied live; dialkit-style inspector (palette, mode, font, neutral tint, continuous radius scrubber, accent lightness scrubber); component search + center-board actions1.<palette>.<radius>.<accent>.<font>.<tint>): shareable URL, installable on-the-fly astheme-custom-<code>.json, copy-CSS — full fidelity vs shadcn/create's catalog-only presetsAccessibility
74d0ce1100%prefers-reduced-motioncompliance across every animated block (WCAG 2.1 SC 2.3.3)119157fnative image dragging disabled library-wide<dl>)Tests + CI
a3bf67dsuite 106 → 186 tests; smoke + axe for all blocks and previously-untested components0aa10fdtypecheck pipeline, radix-ui pinned via pnpm override, shadcn → 4.10 (later 4.11)Docs
0c35db4themes guide + curated 3.5.0 changelog entryRelease-please note
Merge
develop→mainwith a merge commit (not squash) so everyfeat:/fix:is preserved and release-please builds an accurate changelog.Verification
npx turbo build --filter=docsgreen · typecheck 0 errors · 186 tests pass · registry validation pass.