feat(studio): shared Input, NumberField, Select, Slider and Toggle primitives

[miguel-heygen]

Lands unit U5 (Input, NumberField, Select, Slider, Toggle) of the Studio design-system foundation. Stacked on the vertical-slice PR (#3624). No ratchet change; no color literal added. Bundle: about 0.7 KB gzipped as shipped (no consumer yet); cumulative since before the primitives about 53.2 KB, against a 100 KB budget for the primitive set (raised from the plan's 60 KB; recorded here).

What

Adds the five shared value controls to packages/studio/src/components/ui: Input, NumberField, Select, Slider and Toggle, each built on Base UI and styled only from theme.css. Adds [role='switch'] to the typing-target selector list.

Stacked on the header/tabs sweep branch. No consumer moves onto these primitives here; the inspector, timeline and Renders panels migrate in their own PRs.

Why

Studio's value controls exist several times over: two slider implementations, native <select> elements the app cannot style, and inspector fields with no visible boundary, so a value reads the same as the label next to it. One implementation per control is the point, and a field that looks like a field is the user-visible half of it.

The controls also carry a contract that is easy to lose in a reskin: a drag is one write and one usage event, not one per pointer move. Rebuilding on a library without pinning that down would have quietly multiplied both.

How

• One box, three controls. fieldBase in Input.tsx is the shared recipe: control height, radius, border, background, hover and focus states. NumberField and the Select trigger wear the same one, so the three cannot drift apart.
• Commit boundaries, not keystrokes. Slider splits onPreview (every intermediate value, for the live canvas) from onCommit (release, settled step, track press). onTrack fires beside onCommit only. NumberField commits on blur, Enter and a settled step. Input commits on Enter and blur, and Escape abandons the draft.
• Right-click and Escape abort a drag in flight, putting the pre-drag value back. Base UI has no cancel API for a running drag, but every change event carries cancel(), so an aborted gesture stops applying moves while the button is still down.
• Telemetry stays outside the primitives. Each takes an optional onTrack callback; consumers pass the design-panel tracker they already have. A shared primitive does not need to know the inspector exists.
• role="switch" joins the typing-target list. The native checkboxes Toggle replaces matched that list as input elements. Without the new row, a shared toggle would have let a global shortcut claim Space instead of flipping the control, silently.

Two findings worth recording, both places where the plan's assumption did not survive contact with the library:

• The "type letters into a number field" error state is unreachable. Base UI filters non-numeral characters at the keystroke, so the text never arrives. The reachable invalid cases are a lone sign character and an emptied field; both are tested, and both show the error boundary and commit nothing rather than committing zero.
• Right-click abort is preserved, so the accepted-regression path was not needed.

Test plan

packages/studio/src/components/ui/valueControls.test.tsx, 15 cases, plain react-dom plus act under happy-dom:

• a pointer drag across five moves produces exactly one onCommit and one telemetry call;
• three fast arrow-key steps produce three commits and one telemetry event, through the real coalescing sink rather than a stub;
• a right-click mid-drag reverts the value and commits nothing;
• typing a number and pressing Enter commits it once and keeps the unit; an unparseable or emptied field shows the error state and commits nothing;
• the select opens from the keyboard, moves its highlight and commits on Enter;
• the toggle flips on click and on Space and reports aria-checked;
• every class the five controls emit compiles against Studio's real stylesheet, with a deliberate non-resolving pair proving that check is not vacuous;
• each control is classified by both hotkey selector lists exactly as the native control it replaces was, including the slider thumb still counting as a typing target so arrow keys step it.

Each of the three load-bearing tests was confirmed non-vacuous by breaking the implementation on purpose (moving the telemetry call onto the continuous change handler, and removing the new selector row) and watching them fail.

Also run: full Studio suite (441 files, 4836 tests, green), typecheck, build, oxlint, oxfmt, and the repo fallow audit. The screenshot capture and its computed-style table are unchanged, as expected while no consumer has moved.

Bundle size, gzipped JS plus CSS: this PR adds about 0.7 KB over its base. Cumulative growth since the primitive work began is about 53 KB, which is inside the agreed budget but leaves limited headroom for the remaining primitive PR.

Not covered

• No consumer migration. Every existing slider, select, checkbox and inspector field is untouched, so nothing on screen changes yet.
• No Storybook stories; the gallery is a separate PR.
• No Menu, ContextMenu or Popover; those land alongside this one.
• The scrub area on NumberField (drag a label to change a number) is not wired up. The inspector's existing scrub lives on its label component and moves with that consumer.
• Range (two-thumb) sliders are not exposed. Nothing in Studio needs one.
• happy-dom has no layout, so nothing here asserts a rendered pixel, a focus ring or popup placement. Those belong to the screenshot pass.