Repository navigation
feat(studio): add shadcn primitives from the prototype and upstream shadcn - #2211
Merged
Merged
Conversation
…hadcn Studio lacked most shadcn/ui primitives, so features hand-rolled controls with native elements, <details> menus and ad-hoc ARIA. Add the missing primitives, each with a focused test: - From the design prototype (stacklok/mecatl-prototypes, stack/08-tooling, Apache-2.0): label, checkbox, select, popover, tabs, toggle, toggle-group, command (cmdk), skeleton, avatar, input-search, and sonner with a themed Toaster mounted once at the app root. - From upstream shadcn/ui new-york-v4 (MIT), for primitives the prototype lacks: accordion, alert, radio-group, empty. input.tsx now matches the prototype (border-input and its focus ring). No feature call sites change yet; migrations follow per area. Refs #2201 Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
kantord
approved these changes
Oct 8, 2026
This was referenced Oct 9, 2026
Merged
peppescg
added a commit
that referenced
this pull request
Oct 9, 2026
#2211 replaced the input with the prototype's verbatim, which brought the prototype's aria-invalid, file:, and selection: states but also swapped Studio's border-control-border and solid ring-2 ring-ring focus ring for the prototype's border-input and translucent 3px ring. Those fall below 3:1 non-text contrast, which #1873 had fixed. Keep the prototype's states and restore Studio's border and focus ring. An invalid field focuses with a solid destructive ring rather than the prototype's translucent one, for the same reason. Inputs look as they did before #2211: a darker border at rest and a solid ring on focus. Refs #2204 Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Merged
2 tasks
2 of 11 tasks
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
2 participants
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.
Refs #2201
Summary
This PR adds the shadcn/ui primitives Studio lacked, so features can stop hand-rolling controls with native elements,
<details>menus and ad-hoc ARIA. No feature call sites change here. Migrations follow per area, as listed in #2201.Sources (OSS only, nothing from SEP):
Toasterstacklok/mecatl-prototypesstack/08-tooling:apps/web/src/components/ui/shadcn-ui/ui@0132174), used where the prototype has no equivalentdata-slotattributes differ.cmdk1.1.1 andsonner2.0.8. All new packages are MIT.Toasteris mounted once inmain.tsx. It follows Studio's light/dark theme and has no visible effect until something callstoast().input.tsxnow matches the prototype:border-input, thering-[3px] ring-ring/50focus ring, and the aria-invalid, file and selection styles. Its border is lighter than Studio's oldcontrol-border, in both themes.Licence and provenance audit
Proprietary, "all rights reserved", SEP, or Next-only references appear in the diff.SPDX-License-Identifier: Apache-2.0and traces to the prototype (Apache-2.0) or upstream shadcn (MIT).pnpm licenses list --prodshows no new non-MIT packages.Screenshots
Input (before | after)
Light and dark shots for all 7 surfaces are here.
Primitives (Studio vs prototype)
Light and dark shots for every primitive are here.
Verification
Node 26.10.0, pnpm 12.4.2:
task studio:lint,task studio:typecheck,task studio:generated-checkandtask studio:auditpass;pnpm install --frozen-lockfilepasses.task studio:test: web 681 tests, server 182. Each primitive has a focused behavior test.task studio:browser: 54 Playwright journeys.Notes
tw-animate-css. The same is true in the prototype.🤖 Generated with Claude Code