diff --git a/DESIGN.md b/DESIGN.md
index c78ef5c4..62705e72 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -1,438 +1,432 @@
 # VisionSet design foundations
 
-## Purpose
-
-This document is the visual and interaction contract for every VisionSet interface: the
-M5 app (`@visionset/app` + `@visionset/ui-core`), the annotator demo, and any surface
-built after them. It answers one question — **how should a VisionSet interface look,
-feel, and behave visually?** — and deliberately answers nothing else.
-
-What this document does **not** own: product behaviour
+## Purpose and Ownership
+
+This document governs how VisionSet interfaces look and behave. It is not a component
+catalogue: the components are shadcn's, and their classes, anatomy and states are read from
+the files the CLI wrote rather than transcribed here. What it owns is the *governance* — which
+layer decides what, what VisionSet may add, what it may not change, and which gate holds each
+rule. Where a rule is machine-checked the gate is named, because a rule nothing checks is a
+preference. It does not own product behaviour
 ([`docs/content/ui/product-principles.md`](docs/content/ui/product-principles.md)), navigation
 ([`docs/content/ui/navigation.md`](docs/content/ui/navigation.md)), the annotation workspace
 ([`docs/content/ui/annotator.md`](docs/content/ui/annotator.md)), the data shell
-([`docs/content/ui.md`](docs/content/ui.md)), frontend architecture and library choices
-([`docs/content/architecture/frontend/`](docs/content/architecture/frontend/README.md)), or test
-mechanics. Rules here are stated as the present contract; enforcement details live with
-the tests and contributor docs.
+([`docs/content/ui.md`](docs/content/ui.md)), or frontend architecture
+([`docs/content/architecture/frontend/`](docs/content/architecture/frontend/README.md)).
 
 ## Source of Truth
 
-VisionSet's visual language is a **shadcn preset**, not a hand-authored system: preset
-code `b2iH`, decoded as `style: nova` (on the Radix base — `radix-nova` in
-`components.json`), `baseColor: neutral`, `chart: neutral`, `icons: lucide`,
-`font: geist`, `heading: inherit`, `radius: medium`, `menu: inverted/subtle`, with the
-CLI's `--pointer` option on. The preset was generated with shadcn CLI **4.19.0** and
-transcribed verbatim into this repository; that CLI version is the reference for every
-value in this document. Nothing here is invented — every token, every derived radius,
-every chart colour traces back to the CLI's own output.
-
-`heading: inherit` is the one decoded value with no token of its own: it means the
-heading face *is* the body face, which the stylesheet spells as
-`--font-heading: var(--font-sans)` rather than as a second family.
+Six layers decide the visual result. **When two disagree, the earlier one wins.**
 
-`@visionset/ui-core` owns the implementation, in exactly three files:
-
-| File | Role |
-| --- | --- |
-| [`frontend/ui-core/components.json`](frontend/ui-core/components.json) | The preset properties shadcn's own tools read — the fields its config schema defines, and no others |
-| [`frontend/ui-core/src/styles.css`](frontend/ui-core/src/styles.css) | The tokens that run — `:root`, `.dark`, `@theme inline`, the base layer |
-| [`frontend/ui-core/src/tokens.ts`](frontend/ui-core/src/tokens.ts) | The TypeScript mirror, for a caller that cannot read CSS |
-
-**One intent, three layers — and they do not hold the same fields.** `components.json`
-carries only what shadcn's config schema defines (`style`, `tailwind.baseColor`,
-`iconLibrary`, `menuColor`, `menuAccent`, `rsc`/`tsx`/`rtl`, the aliases, the registries).
-That schema is **strict**: a decoded property it has no field for is *rejected*, not
-ignored, so the file cannot be made to restate the whole preset even as documentation.
-Everything else the preset decides — the radius, both fonts, the chart palette, every
-colour — is a *value*, and values live in `styles.css`. A decoded property missing from
-`components.json` is therefore the design working as intended, never drift:
-
-| Layer | Owns | Radius, as the worked example |
+| # | Layer | Where it lives | Decides |
+| --- | --- | --- | --- |
+| 1 | CLI configuration | [`frontend/ui-core/components.json`](frontend/ui-core/components.json) | The fields shadcn's own tools read — style, base colour, icon library, menu treatment, aliases |
+| 2 | Decoded preset intent | preset code `b2iH`, shadcn CLI **4.19.0** | Every value the config schema has no field for — radius, fonts, chart palette, both themes |
+| 3 | Official registry output | [`frontend/ui-core/shadcn/`](frontend/ui-core/shadcn) snapshots, realised in [`frontend/ui-core/src/primitives/`](frontend/ui-core/src/primitives) | A primitive's API, anatomy, variants, sizes, states and styling |
+| 4 | VisionSet additive extensions | `primitives/badge.tsx`, `src/tokens.ts`, `src/styles.css` | Semantic variants and tokens the foundation has no name for |
+| 5 | Patterns | [`frontend/ui-core/src/patterns/`](frontend/ui-core/src/patterns) | Composition of primitives into VisionSet shapes, and layout rhythm |
+| 6 | Screens and the annotator | `src/screens/`, `src/annotator/` | Which shape a page uses, and when |
+
+A screen may not reach past layer 5 to restyle a primitive, and a primitive may not encode a
+screen's decision. A value missing from `components.json` is not drift: the config schema is
+**strict** and rejects a property it has no field for, so the preset's radius, fonts and chart
+palette live in `styles.css` as runtime values instead. The stylesheet is the one that runs;
+[`frontend/ui-core/src/tokens.ts`](frontend/ui-core/src/tokens.ts) mirrors it for callers that
+cannot read CSS (a `<canvas>`, a test), and `tokens.test.ts` asserts the two agree declaration
+for declaration.
+
+## shadcn Foundation
+
+Preset `b2iH`, generated with shadcn CLI **4.19.0**, decodes to:
+
+| Property | Value | Where it lands |
 | --- | --- | --- |
-| Preset intent | What the code decodes to (`shadcn preset decode b3bXyyPdWj`) | `radius: medium` |
-| Runtime | The value that actually paints, in `styles.css` | `--radius: 0.625rem` |
-| CLI configuration | The schema-supported fields, in `components.json` | no `radius` field — the schema defines none |
-
-Three machine gates hold this contract, each in one line: `tokens.test.ts` asserts
-`styles.css` and `tokens.ts` agree, declaration for declaration, and that no retired
-token has crept back in; `tests/scripts/design_tokens.test.mjs` bans a raw colour in any
-class string, bans a second `tailwind.config.js`, confines `brand` to its two identity
-sites, holds `components.json` to the schema-supported field set, and re-checks the
-retired vocabulary by an independent method; `tests/scripts/docs_links.test.mjs` keeps
-every link and heading anchor in this document itself honest.
-
-Radix stays the behaviour layer under every primitive — this is a visual foundation
-rewrite, not a component replacement.
-
-## Design Character
-
-Each principle is a decision rule, not a slogan. When two of them conflict on a concrete
-screen, the earlier one wins.
-
-1. **Content first.** The interface recedes; the user's data — images, annotations,
-   counts — is the loudest thing on screen. Chrome earns its pixels: hairlines, a
-   resting shadow, no gradients, no decoration.
-2. **One action colour.** `primary` is the one high-emphasis colour, product-wide: the
-   dominant action, the active tool, the selected surface. Colour elsewhere is either a
-   hover/focus surface (`accent`) or a status hue — never a second reading of emphasis.
-3. **Precise.** Alignment, spacing, and geometry sit on the scales below — never
-   eyeballed. Two screens built by two people are indistinguishable in styling.
-4. **Hierarchy through structure, not volume.** Typography, spacing, hairlines, and
-   surfaces carry hierarchy. Reaching for a louder colour or a heavier shadow to make
-   something "stand out" is a hierarchy failure upstream.
-5. **Dense where the content is plural.** VisionSet's users are ML engineers and
-   professional annotators; on data surfaces, showing more of the thing the user came
-   for beats whitespace. Generosity belongs to forms and prose, read one thing at a
-   time.
-6. **Fast and quiet.** Interfaces respond on the frame the user acts; motion orients or
-   confirms and never makes anyone wait.
-7. **Accessible by default.** Semantic HTML, keyboard operability, visible focus, and
-   redundant (never colour-only) signals are part of the definition of done.
-8. **Consistent over novel.** Reuse the token, the role, the primitive. A new visual
-   treatment is a decision made in this document, not in a component diff.
-9. **Roles, not polarity.** Every rule below is written against a semantic role, not a
-   fixed light-mode value — "the page" resolves per theme; it is never asserted to be
-   white, and the sidebar is never asserted to be dark. Light and dark are both defined
-   from the preset, in full, from the start.
-
-## Theme Token Model
-
-shadcn's semantic names are the only vocabulary components speak. There is no second
-naming layer (`surface`, `error`, `foreground-secondary`) and no alias that renames what
-a token already means.
-
-| Token(s) | Meaning |
+| `style` | `nova` on the Radix base | `components.json` → `"style": "radix-nova"` |
+| `baseColor` | `neutral` | `components.json` → `tailwind.baseColor` |
+| `chart` | `neutral` | `styles.css` → `--chart-1` … `--chart-5` |
+| `icons` | `lucide` | `components.json` → `iconLibrary` |
+| `font` | `geist` | `styles.css` → `--font-sans: 'Geist Variable', sans-serif` |
+| `heading` | `inherit` | `styles.css` → `--font-heading: var(--font-sans)` |
+| `radius` | `medium` | `styles.css` → `--radius: 0.625rem` |
+| `menu` | `inverted` / `subtle` | `components.json` → `menuColor`, `menuAccent` |
+| `pointer` | on | `styles.css` base layer → `cursor: pointer` on pressable controls |
+
+**What `components.json` can hold** is its whole current content: `style`, `rsc` (`false`),
+`tsx` (`true`), `tailwind` (`config` empty, `css` `src/styles.css`, `baseColor` `neutral`,
+`cssVariables` `true`, `prefix` empty), `iconLibrary`, `rtl` (`false`), the five `aliases`
+(`@/components`, `@/lib/cn`, `@/primitives`, `@/lib`, `@/hooks`), `menuColor`, `menuAccent`,
+`registries` (empty). **What it cannot hold:** the radius, either font, the chart palette, any
+colour — `design_tokens.test.mjs` holds the file to that set, so nobody adds a documentary
+field the CLI then rejects. Radix supplies behaviour under every primitive and Nova is the
+styling on top; Base UI is an accepted official dependency for the same reason — shadcn's own
+Combobox is Base UI-backed, and nothing else here uses it.
+
+## Primitive Governance
+
+> Components in the primitive layer preserve the API, anatomy, official variants, default
+> variants, sizes, states, data attributes, accessibility behavior, and Nova styling generated
+> by the configured shadcn foundation. VisionSet may add semantic variants only when they are
+> additive and do not reinterpret an upstream variant. Product-specific compositions belong
+> above primitives. A behavioral deviation from upstream requires a reproduced defect, a
+> regression test, and an explicit SHADCN DEVIATION comment.
+
+The primitive layer is exactly these twenty-one files: `alert`, `badge`, `button`, `card`,
+`combobox`, `dialog`, `dropdown-menu`, `field`, `input`, `input-group`, `label`, `progress`,
+`select`, `separator`, `sheet`, `skeleton`, `sonner`, `table`, `tabs`, `textarea`, `tooltip`.
+
+**The snapshot gate.** `frontend/ui-core/shadcn/<name>.tsx` is the CLI's pristine output, and
+`tests/scripts/shadcn_canonical.test.mjs` refuses any primitive that is not its snapshot **plus
+added lines** — a removed line, a reworded class, a renamed prop all fail. Import paths are
+relativised (`@/lib/cn` → `../lib/cn`, `@/primitives/x` → `./x`) because ui-core is compiled by
+`tsc` rather than bundled with a path alias; the gate accounts for that rewrite and nothing
+else.
+
+**Allowed:** an added `cva` variant line whose meaning the foundation has no name for (today,
+four on the Badge), and a framework adapter under *Allowed shadcn Deviations*. **Forbidden:**
+changing an official variant's classes; renaming or dropping a subcomponent; adding a prop;
+changing a default variant or size; touching focus, keyboard or `aria` behaviour; adjusting
+geometry. Each of those belongs above the primitive — at a call site, or in a pattern.
+
+## Composition Layers
+
+- **Primitives** (`src/primitives/`) are shadcn's, governed above. They know nothing about
+  datasets, frames or models.
+- **Patterns** (`src/patterns/`) compose primitives into VisionSet shapes, and are where layout
+  rhythm and product vocabulary meet.
+- **Screens and the annotator** (`src/screens/`, `src/annotator/`) decide which pattern a page
+  uses and what it says.
+
+**No wrapper that merely renames.** A component whose whole body forwards props to one
+primitive is a second name for the same thing, and the second name is what drifts: compose at
+the call site, or add the pattern that earns its name by holding a decision. The rhythm that
+follows — content under a `line` `TabsList` takes 16px — is applied in
+`patterns/ProjectNav.tsx` (`mt-2` on its `TabsContent`), never in `tabs.tsx`.
+
+## Color and Theme
+
+shadcn's semantic names are the only vocabulary. There is no second layer (`surface`, `error`,
+`foreground-secondary`) and no alias renaming what a token already means — `destructive` stays
+`destructive`. Two roles are worth restating because they are the two that get confused:
+`primary` is the one high-emphasis colour, and `accent` is the interactive hover/focus surface,
+the token a row or a menu item lights up with and never what a button fills with.
+`chart-1`…`chart-5` identify a series, never a status.
+
+Both themes are declared in full, so switching theme is a variable swap. Every rule here is
+written against a role rather than a light-mode value: "the page" resolves per theme and is
+never asserted to be white.
+
+**Retained VisionSet extensions**, each for a role the foundation has no name for: `stage` (the
+neutral surround a photograph is judged against — distinguishable from both `background` and
+`muted`, so a white asset edge still shows where it ends), `brand` (Robomous coral, identity
+only), and `origin-hub` / `origin-custom` / `origin-robomous` (a model's provenance as a card's
+accent edge — a mark, never a surface, ink or status; theme-stable like the chart palette).
+
+The former `success` and `warning` tokens are **retired**, with their `-foreground` companions:
+status colour is a Badge variant or `patterns/statusTone.ts`, so a status hue is spelled in one
+place instead of two. `tests/scripts/design_tokens.test.mjs` re-checks the retired vocabulary
+by an independent method from `tokens.test.ts`. **There is no `info` token** — the Badge has an
+`info` variant and `statusTone.ts` an `info` ink, neither of which implies one; adding one is a
+product decision to make here first.
+
+### Where the brand is
+
+Robomous coral is identity: the `AppShell` wordmark and its styleguide swatch. Two sites,
+enumerated in `tests/scripts/design_tokens.test.mjs`. A functional control reaching for `brand`
+is a semantic-colour violation however many other sites already use it correctly, and the gate
+and this section move together or not at all.
+
+### Menus and the inverted subtree
+
+`menuColor: inverted` means every menu, select and combobox surface carries the literal `dark`
+class, so a floating surface is the dark theme's `popover` whatever the page is doing. That is
+contrast on purpose. The tooltip reaches the same intent without a subtree — Nova gives it
+`bg-foreground text-background`, which flips by construction, because one line of text has no
+palette of its own to keep in step. `menuAccent: subtle` means items highlight with `accent`,
+the token every other hover state uses.
+
+## Action Hierarchy
+
+Six official Button variants, one intent each:
+
+| Variant | Intent |
 | --- | --- |
-| `background` / `foreground` | The page, and the ink that sits directly on it |
-| `card` / `card-foreground` | A raised surface — panels, cards |
-| `popover` / `popover-foreground` | A floating surface — menus, popovers, tooltips, dialogs |
-| `primary` / `primary-foreground` | **High-emphasis actions and selected surfaces.** The one dominant-action colour |
-| `secondary` / `secondary-foreground` | Lower-emphasis filled actions — a second filled weight, not a second accent |
-| `muted` / `muted-foreground` | Subtle fills and lower-emphasis (secondary, meta) content |
-| `accent` / `accent-foreground` | **Interactive hover/focus/active surfaces.** Not the action colour — this is the token a row highlights or a menu item lights up with, never what a button fills with |
-| `destructive` | Destructive actions and their state. Stays `destructive` — never renamed `error` |
-| `border` / `input` / `ring` | Hairlines and dividers; field borders; the focus ring's colour |
-| `chart-1` … `chart-5` | Series colours in a chart. Identify a series, never a status |
-| `sidebar` / `sidebar-foreground` / `sidebar-primary(-foreground)` / `sidebar-accent(-foreground)` / `sidebar-border` / `sidebar-ring` | The navigation rail's own surface, ink, active-item fill, and hairline — a parallel set so the rail can differ from `card` without inventing a name |
-| `radius` | The one geometry constant every radius step derives from |
-
-Both themes are declared **in full** from the preset — `:root` and `.dark` each name
-every token above, so switching theme is a variable swap, never a redesign. A rule that
-only makes sense in one theme ("the page is near-white") is written as its role instead.
-
-## Surfaces
-
-`background` is the page. `card` and `popover` are the two raised materials — `card` for
-content that sits in place, `popover` for anything that floats and closes (see *Sidebar
-/ Menu* for the one deliberate exception to popover's own colour). `muted` is a recessed
-or subtle fill — a footer strip, a quiet chip, secondary content's backdrop. A component
-picks one of these three; it does not compose a fill from scratch.
-
-## Actions and Interactive States
-
-- **One dominant action per view**, in `primary`; supporting actions take `secondary` or
-  a quieter (ghost/link) treatment. Which action is dominant on which screen, and how it
-  tracks state, is product behaviour — [`docs/content/ui/product-principles.md`](docs/content/ui/product-principles.md).
-- **Hover** on a filled control is the same fill at reduced opacity (`hover:bg-primary/80`),
-  not a colour change of meaning; a menu or list item highlights with `accent` instead.
-- **Press** reads as the control moving, not recolouring.
-- **The cursor turns to a hand over anything pressable**, which is the preset's
-  `--pointer` option: `button` and `[role="button"]`, in the base layer. It stops at
-  `:not(:disabled)` on purpose — a hand over a control that will not respond is the
-  cursor making a promise the control does not keep, and the disabled rule below is what
-  the reader should be getting instead.
-- **Disabled** is uniform reduced opacity plus `pointer-events-none` — the control dims
-  as itself rather than swapping to a separate greyed-out skin. A disabled control still
-  explains itself; see the product principles' never-disable-without-explanation rule.
-- **Destructive** actions use a soft treatment — tinted background and ink, not a solid
-  fill — so the one action that can end something does not read louder than `primary`.
-- **Focus** is always visible (see *Borders and Focus*).
+| `default` | The one dominant action in the view |
+| `outline` | A supporting action that still reads as a control |
+| `secondary` | A filled second weight, quieter than `default` |
+| `ghost` | An action inside dense chrome — toolbars, rows, icon-only controls |
+| `destructive` | The action that ends something |
+| `link` | Navigation wearing a control's affordance |
 
-## Typography
+Sizes are `default`, `xs`, `sm`, `lg`, `icon`, `icon-xs`, `icon-sm`, `icon-lg`. **One dominant
+action per view**; which action that is on which screen is product behaviour
+([`docs/content/ui/product-principles.md`](docs/content/ui/product-principles.md)).
+
+**A status is not a step in the action hierarchy.** `success` describes an outcome, never a
+control's emphasis, and there is no variant for it — a saved form reports itself with a toast or
+a Badge while its button stays `default`. Three names a v1 call site may still reach for —
+`primary`, `success`, `md` — **do not exist** here, and
+`tests/scripts/shadcn_extensions.test.mjs` pins the variant and size lists exactly.
+
+Every `<Button>` inside a `<form>` states its `type`: the canonical primitive adds no default
+and HTML's is *submit*, so a Cancel with no `type` submits. `form_buttons.test.mjs` is the gate.
 
-- **One family: Geist**, via `--font-sans` (`'Geist Variable', sans-serif`). The preset
-  sets `--font-heading` to `var(--font-sans)`, so a heading is the same face as body
-  copy at a different size and weight rather than a second typeface.
-- **`font-heading` survives as a hook, not as a difference.** `h1`–`h4` still carry it
-  in the base layer, so no screen writes it by hand and a later preset that splits the
-  two families again lands in one declaration rather than at every heading.
-- Bundled offline through `@fontsource-variable/geist` — no runtime fetch to a font
-  host, ever.
-- **One justified technical role: `font-mono`.** Tailwind's default monospace stack (no
-  Geist Mono package is bundled) marks *machine-shaped* content — identifiers, hashes,
-  model references, measurements. It is never decoration, and prose never wears it; this
-  rule is unchanged from the previous contract.
-
-## Density and Spacing
-
-Two different scales answer two different questions, and conflating them is the
-anti-pattern this section exists to prevent:
-
-- **Component geometry is Nova's**, fixed per control by the preset — not a per-screen
-  choice, not eyeballed.
-- **Page and layout rhythm is VisionSet's own composition**, on Tailwind's ordinary
-  spacing scale — gaps between sections, page padding, list rhythm. A screen reaches for
-  `p-6`, `gap-4`, `space-y-8`; it does not invent a control's internal geometry.
-
-Nova's component geometry, transcribed from the preset (the concrete defaults every
-primitive targets):
-
-| Control | Geometry |
+## Status and Feedback
+
+- **Badge** — a state belonging to a row, a card or a heading, that stays on screen.
+- **Alert** — a condition about the surface the reader is looking at, in place.
+- **Sonner** (`Toaster`, mounted `position="bottom-right"`) — the outcome of something the
+  reader just did, which does not need to persist.
+- **Progress** — how much of a known quantity is done. It carries **no polarity**: there is no
+  variant, and a failing job is not a red bar. The words beside it say what happened.
+
+**Colour is never the only signal.** Every status carries a redundant channel — a word, an icon,
+a shape. The product's status vocabulary and its mapping to product states is
+[`docs/content/ui/product-principles.md`](docs/content/ui/product-principles.md#status-semantics).
+
+## Badge Variants
+
+Official: `default`, `secondary`, `destructive`, `outline`, `ghost`, `link`. VisionSet adds
+exactly four, as four added `cva` entries, verbatim:
+
+| Variant | Classes |
 | --- | --- |
-| Button — default | `h-8 px-2.5 gap-1.5 text-sm font-medium rounded-lg` |
-| Button — sizes | `sm` → `h-7`; `xs` → `h-6`; `lg` → `h-9`; `icon` → `size-8` |
-| Button — press / focus / disabled | press `active:translate-y-px`; focus `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`; disabled `opacity-50` |
-| Button — icon | `svg size-4` (`size-3.5`/`size-3` at `sm`/`xs`) |
-| Button — hover | default `hover:bg-primary/80`; secondary `color-mix(in oklch, var(--secondary), var(--foreground) 5%)`; destructive soft |
-| Input | `h-8 rounded-lg border-input px-2.5 text-base md:text-sm`; dark theme `bg-input/30` |
-| Badge | `h-5 px-2 text-xs rounded-4xl`; icons `size-3`. The `quiet` variant alone is `rounded-md` — a square, colourless label for a fact read beside other facts, never a state |
-| Menu — surface | `dark` subtree + `bg-popover p-1 rounded-lg ring-1 ring-foreground/10 shadow-md`, `min-w-32`, `duration-100` enter and **no exit** — see *Motion* |
-| Menu — item | `px-1.5 py-1 text-sm rounded-md focus:bg-accent focus:text-accent-foreground`; destructive item soft |
-| Card | `rounded-xl ring-1 ring-foreground/10 text-sm`; `--card-spacing` = `--spacing(4)` (16px; 12px at the `sm` size); footer `bg-muted/50` |
-| Dialog — overlay | `bg-black/10 supports-backdrop-filter:backdrop-blur-xs duration-100` |
-| Dialog — content | `rounded-xl bg-popover p-4 text-sm ring-1 ring-foreground/10 sm:max-w-sm` |
-| Sidebar (shadcn's own component; VisionSet's rail is a custom composition — see *Sidebar / Menu*) | `16rem` / `18rem` mobile / `3rem` icon |
-| Elevation | `ring-1 ring-foreground/10` + a resting shadow — never a coloured border |
-
-`frontend/ui-core/src/primitives/` carries the table itself, not a family resemblance to
-it: the heights, the `ring-3` focus treatment, the `duration-100` enter, the
-`--card-spacing` variable and Nova's interaction idioms (uniform disabled opacity, soft
-destructive, `/80`-opacity hover, the inverted menu subtree) are the primitives' own
-declarations. The table is the contract and the primitives are where it is spelled, so a
-control reaching past it is now a diff against this document rather than a gap in a
-migration.
-
-Two measurements are deliberately *not* the table's, and both are argued at the
-component: `SelectTrigger` is `min-h-8` rather than `h-8`, because a two-line option has
-to grow the control instead of being squashed inside it, and `Textarea` is `min-h-16` for
-the same reason. A minimum where the table says a fixed height is the one substitution
-this document sanctions, and only where the content's own height is the point.
-
-## Radius
-
-The preset's `radius: medium` materialises here and nowhere else: `--radius: 0.625rem`
-(10px) in `styles.css` is the authoritative runtime value, mirrored by `tokens.ts` and
-pinned by `tokens.test.ts`. `components.json` holds no radius field — shadcn's config
-schema defines none, and being strict it rejects one. This stylesheet is the single place
-the medium step is spelled.
-
-`--radius` is the one constant; every other radius step is derived from it in
-`@theme inline`, verbatim:
-
-| Step | Formula | Result |
+| `success` | `bg-emerald-500/10 text-emerald-700 focus-visible:ring-emerald-500/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:focus-visible:ring-emerald-400/40 [a]:hover:bg-emerald-500/20 dark:[a]:hover:bg-emerald-400/20` |
+| `warning` | `bg-amber-500/10 text-amber-700 focus-visible:ring-amber-500/20 dark:bg-amber-400/10 dark:text-amber-400 dark:focus-visible:ring-amber-400/40 [a]:hover:bg-amber-500/20 dark:[a]:hover:bg-amber-400/20` |
+| `info` | `bg-sky-500/10 text-sky-700 focus-visible:ring-sky-500/20 dark:bg-sky-400/10 dark:text-sky-400 dark:focus-visible:ring-sky-400/40 [a]:hover:bg-sky-500/20 dark:[a]:hover:bg-sky-400/20` |
+| `quiet` | `bg-muted text-muted-foreground [a]:hover:bg-muted/80` |
+
+Each is Nova's own `destructive` recipe on another hue: a `/10` surface, ink at `700` (`400` in
+dark), a focus ring at matching opacity, a hover step for the anchor case. `quiet` is the one
+that is not a hue — the absence of one, for a state that exists without asking for attention.
+
+**Geometry is untouched.** The base string keeps its height, padding, type size, radius and
+transparent hairline, and no added variant names a size, a radius or a border colour.
+
+## Status Palette
+
+One family, five roles: **emerald** settled, **amber** waiting on a person, **sky**
+informational, **muted** no signal, **destructive** failed. Those three hues are the only ones
+outside the semantic tokens, and the treatment is always **soft surface plus moderate ink** — a
+`/10` fill with `700`/`400` text — so a chip carries a hue without competing with `primary`.
+
+The `emerald`, `amber` and `sky` utilities are permitted in exactly three files:
+`primitives/badge.tsx`,
+[`patterns/statusTone.ts`](frontend/ui-core/src/patterns/statusTone.ts) and its test. A fourth
+place naming the family is a fork of the palette, not a use of it. **No competing family** —
+`green`, `lime`, `teal`, `yellow`, `orange`, `blue`, `cyan`, `red` — appears anywhere in
+`frontend`. `tests/scripts/shadcn_extensions.test.mjs` holds both halves.
+
+**Screen authors never pick a shade.** A status takes a Badge variant, or reads its colour from
+`statusTone.ts`, whose utilities are written out whole rather than assembled — Tailwind scans
+source text, so a class built at runtime is a rule the build never emitted:
+
+| Export | Values | Use |
 | --- | --- | --- |
-| `radius-sm` | `var(--radius) * 0.6` | 6px |
-| `radius-md` | `var(--radius) * 0.8` | 8px |
-| `radius-lg` | `var(--radius)` | 10px |
-| `radius-xl` | `var(--radius) * 1.4` | 14px |
-| `radius-2xl` | `var(--radius) * 1.8` | 18px |
-| `radius-3xl` | `var(--radius) * 2.2` | 22px |
-| `radius-4xl` | `var(--radius) * 2.6` | 26px |
-
-No arbitrary radius appears outside this scale.
-
-## Borders and Focus
-
-The base layer applies `border-border` and `outline-ring/50` to every element and
-`bg-background text-foreground` to `body` — a hairline and the outline's colour are the
-default state of anything on the page, not something each component re-declares.
-Nova's component-level focus treatment is stronger and more specific:
-`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50` — a 3px ring
-in the `ring` token's colour, painted outside the control so it survives any fill. Focus
-is never colour-only and never removed; an element that can be focused shows it.
-
-Focus *geometry* is never declared in the base layer. The `*` rule names the outline
-colour and stops there; the ring itself belongs to the component, because a single
-stylesheet-wide `:focus-visible` declaration overrides every primitive's ring at once and
-wins on layer order no matter how specific the component's own selector is. So each
-focusable primitive carries the treatment: `Button`, `Badge`, `Input`, `Textarea` and
-`SelectTrigger` the `ring-3` ring above, `TabsTrigger` the same ring plus a 1px
-`outline-ring` hairline, and menu and select items `focus:bg-accent
-focus:text-accent-foreground` (the combobox paints the same fill on its active option,
-which it tracks itself because the list keeps DOM focus on the input). An item inside a
-floating surface reads focus as the fill it would take on hover, not as a ring inside a
-list.
-
-`frontend/app/e2e/styleguide.spec.ts` measures the tab bar's ring in a real browser,
-which is the only place the composition can be checked: Tailwind renders `ring-3` as a
-`box-shadow` layer, so "the ring is there" is a question about a computed shadow list
-rather than about a class string.
+| `StatusTone` | `neutral · accent · success · warning · destructive` | The type every tone-taking prop speaks |
+| `TONE_BORDER` | `border-emerald-500 dark:border-emerald-400`, `border-amber-500 dark:border-amber-400`, `border-border`, `border-primary`, `border-destructive` | A tone's stroke, where the stroke is the mark |
+| `TONE_FILL` | `bg-emerald-500 dark:bg-emerald-400`, `bg-amber-500 dark:bg-amber-400`, `bg-muted-foreground`, `bg-primary`, `bg-destructive` | A solid mark — a dot, a timeline cell — where the Badge's `/10` surface would vanish at 4px |
+| `STATUS_INK` | `text-emerald-700 dark:text-emerald-400`, `text-amber-700 dark:text-amber-400`, `text-sky-700 dark:text-sky-400` | An icon or a run of inline text carrying a status |
 
-## Motion
+Status Badge contrast is measured against page/card surfaces; on a full `bg-muted` panel the
+warning ink measures ~4.3:1, so a status Badge is not placed on a muted panel without a re-check.
 
-Motion orients or confirms, and never stands between somebody and their next action —
-*Fast and quiet*, applied. An **enter** animation is free to play: nothing is waiting on
-it, because the surface it introduces did not exist a frame ago. An **exit** animation is
-not, and the difference is not a matter of taste.
-
-**A floating surface leaves on the frame it is dismissed.** While an exit animation runs,
-Radix keeps the content mounted, and the dismissable layer stays mounted with it. A press
-on the trigger inside that window is read twice — the trigger toggles the surface open,
-and the layer still listening reads the same pointer-down as an interaction outside itself
-and dismisses — so the two cancel and the surface never appears. At `duration-100` that
-window covers the gap between an `Escape` and the click after it, which makes it a defect
-a fast hand meets routinely rather than an edge case. The annotation workspace is where
-that tempo is normal, and it is where the behaviour was measured; the fix belongs to the
-primitive because every menu in the product shared the flaw.
-
-So `DropdownMenuContent` animates in and not out, and
-`frontend/app/e2e/annotate.spec.ts` holds the two presses that would catch a fade being
-restored. A surface that genuinely needs an exit — one whose trigger cannot be pressed
-again straight away, as a modal's cannot — may keep one; the tooltip keeps its own,
-because a hover has no toggle to swallow.
-
-`prefers-reduced-motion` sits above all of this: the base layer in `styles.css` collapses
-every animation and transition to a single frame under that query, so none of the above is
-something a component opts into.
-
-## Sidebar / Menu
-
-- **`menuColor: inverted`.** Every menu and popover subtree — dropdown content, select
-  and combobox popovers — carries the literal `dark` class, so a menu is always the dark
-  theme's `popover`/`popover-foreground` regardless of the page's own theme. This is
-  deliberate contrast, not a bug: a floating surface reads as "above" the page partly by
-  not matching it.
-- **The tooltip inverts itself instead.** `TooltipContent` is Nova's own recipe:
-  `bg-foreground text-background` with a matching `Arrow` and `sideOffset` 0, so it flips
-  with the theme by construction rather than by being handed the `dark` class. Same
-  intent as the bullet above, reached without a subtree — a tooltip holds one line of
-  text and no tokens of its own to keep in step, so the token pair *is* the inversion.
-  Menus, selects and the combobox keep the `dark` mechanism, because a surface with its
-  own borders, hover fills and destructive items needs a whole palette flipped, not two
-  colours swapped.
-- **`menuAccent: subtle`.** Items highlight on hover/focus with `bg-accent
-  text-accent-foreground` — the same interactive-surface token every other hover state
-  uses, not a saturated selection colour.
-- **The rail follows the theme.** VisionSet's navigation rail (`AppShell`) is a custom
-  composition on the 8 `sidebar-*` tokens above — light in the light theme, dark in the
-  dark theme — never a hardcoded dark surface independent of the theme switch. Its
-  widths are a VisionSet layout extension in `@theme inline` (`--spacing-sidebar: 240px`,
-  `--spacing-sidebar-collapsed: 48px`), consumed by `AppShell`, its collapse toggle, and
-  the content offset, which must agree or the layout jumps on collapse. The collapsed
-  width is the preset's own icon-sidebar width (`3rem`): with the rail's `p-2` it holds
-  exactly one `size-8` control per row, so every icon is centred by construction. The
-  expanded width is not the preset's (unused) Sidebar component's — VisionSet does not
-  consume that component.
-
-## Charts
-
-The preset's chart palette — five neutral steps from light to dark, **identical in both
-themes** (a chart does not restyle when the page switches theme):
-
-| Token | Value |
-| --- | --- |
-| `chart-1` | `oklch(0.87 0 0)` |
-| `chart-2` | `oklch(0.556 0 0)` |
-| `chart-3` | `oklch(0.439 0 0)` |
-| `chart-4` | `oklch(0.371 0 0)` |
-| `chart-5` | `oklch(0.269 0 0)` |
-
-They separate by **lightness rather than by hue**, which is the trade this preset makes:
-a series stays legible to a reader who cannot separate two hues, and it survives being
-printed or screenshotted in greyscale — at the cost of holding fewer series apart before
-the steps run together. A chart needing more than five wants a second channel, a shape
-or a label, not a sixth colour invented here.
-
-These are **series colours, never status.** A chart never leans on `chart-2` to mean
-"warning" — status uses the status tokens below, a chart uses these to tell one series
-from another.
-
-## VisionSet Extensions
-
-Five roles the preset has no token for, each following shadcn's own extension
-convention exactly — a value in `:root`, a dark counterpart in `.dark`, exposure through
-`@theme inline` (`--color-<name>: var(--<name>)`), and coverage in both `tokens.test.ts`
-and `tests/scripts/design_tokens.test.mjs`:
-
-| Token | Purpose | Light | Dark |
-| --- | --- | --- | --- |
-| `stage` | The neutral surround an image is judged against in the annotation workspace — not `background`, not `muted`; distinguishable from both so a white-bordered asset still shows where it ends. Usage rules: [`docs/content/ui/annotator.md`](docs/content/ui/annotator.md#the-stage) | `oklch(0.94 0 0)` | `oklch(0.24 0 0)` |
-| `brand` | Robomous coral. Identity only — the wordmark, and its styleguide swatch. Never a functional-UI colour; there is no counted quota, and introducing it into a control is a semantic-colour violation whatever the count | `oklch(0.653 0.178 32.3)` | `oklch(0.653 0.178 32.3)` |
-| `success` / `success-foreground` | The batch-state family's settled/succeeded state and its one filled control — a green analogue of the preset's own destructive treatment | `oklch(0.577 0.132 152)` / `oklch(1 0 0)` | `oklch(0.696 0.17 152)` / `oklch(0.205 0 0)` |
-| `warning` / `warning-foreground` | Something is waiting on a person | `oklch(0.646 0.13 80)` / `oklch(0.205 0 0)` | `oklch(0.75 0.14 80)` / `oklch(0.205 0 0)` |
-| `origin-hub` / `origin-custom` / `origin-robomous` | Where a model's weights come from, as a **mark** — the accent edge of a card on the Models page, a few pixels wide on the plain `card` — amber for the hub, blue for the user's own, orange on the brand's hue for the Robomous registry. A mark only: never a surface, never ink, and an origin is a kind, never a state, so these never stand in for a status. Identical in both themes, like the chart palette, because a mark this small must read the same wherever the card is. `origin-robomous` is its own token; `brand` stays identity-only | `oklch(0.8 0.16 85)` / `oklch(0.65 0.15 250)` / `oklch(0.68 0.17 35)` | same |
+## Alerts
+
+The official anatomy, and only it: `Alert`, `AlertTitle`, `AlertDescription`, `AlertAction` — a
+title is a child, never a prop. Variants are `default` and `destructive`; there is no
+informational or settled Alert, because a condition worth interrupting the page for is either
+neutral or bad.
+
+An Alert's border is **structural**: `default` takes the card surface, and `destructive` keeps
+that same surface, recolouring only the ink. No saturated surface, no coloured stroke. An Alert
+that needs to shout is a copy problem.
+
+## Surfaces, Borders, and Elevation
 
-No sixth extension exists. An `info` family was considered and rejected for now:
-in-flight product states keep the current `primary`-tinted treatment; a dedicated `info`
-token is a later product decision, not a gap in this rewrite.
+`background` is the page; `card` holds content that sits in place; `popover` holds anything that
+floats and closes; `muted` recesses. A component picks one — it does not compose a fill.
+Elevation is a ring plus a resting shadow, never a coloured border and never a gradient.
 
-## Components
+**Borders are structural**: a hairline separates or contains. **Status is not a stroke** — no
+status is communicated by recolouring a border, which is why every added Badge variant keeps
+`border-transparent`, and why `TONE_BORDER` exists only for marks whose whole body *is* the
+stroke. `outline` on its own, Badge or Button, takes `border-border`, because `outline` means
+"bounded", not "notable".
 
-shadcn's model is **open code**: a primitive is source VisionSet owns and edits in
-`frontend/ui-core/src/primitives/`, not a package dependency upgraded blindly. Radix
-supplies the behaviour (focus management, `aria-*` wiring, keyboard patterns); the style
-on top of it is `radix-nova`, recorded as `components.json`'s `style` field. There is no
-`shadcn add` run against this package after the initial generation, and no component
-replacement — the same primitives from before this rewrite still exist, now speaking the
-preset's vocabulary.
+### Borders and focus
 
-Rendered to look at: `pnpm --filter @visionset/app dev`, then the `/styleguide` route
-(`frontend/app/src/styleguide/Styleguide.tsx`).
+The base layer applies `border-border` and `outline-ring/50` to every element, naming the
+outline's **colour only**. Focus *geometry* belongs to the component: one blanket
+`:focus-visible` declaration in the stylesheet overrides every primitive's ring at once and wins
+on layer order, so each focusable primitive carries Nova's own treatment instead. Focus is never
+removed and never colour-only. `frontend/app/e2e/styleguide.spec.ts` measures the ring in a real
+browser, because Tailwind renders it as a `box-shadow` layer.
+
+## Typography
+
+- **One family: Geist**, through `--font-sans`, bundled offline through
+  `@fontsource-variable/geist`. No runtime fetch to a font host, ever.
+- **`font-heading` survives as a hook, not a difference.** It resolves to `--font-sans`, so a
+  heading is the same face at another size and weight; `h1`–`h4` carry it in the base layer, so
+  a later preset that splits the families again lands in one declaration.
+- **One justified technical role: `font-mono`**, on Tailwind's default stack. It marks
+  machine-shaped content — identifiers, hashes, model references, measurements. Prose never
+  wears it.
+- Size and weight come from the primitive, or from Tailwind's ordinary scale. There is no
+  VisionSet type-scale token: `--text-page`, `--text-section`, `--text-body` and `--text-meta`
+  are retired, and `design_tokens.test.mjs` keeps them retired.
+
+## Density, Spacing, and Radius
+
+Two scales answer two questions, and conflating them is the anti-pattern this section exists to
+prevent. **Component geometry is Nova's**, fixed per control by the foundation: a control's
+height, padding and internal gaps are not a per-screen choice, and this document does not
+restate them — `src/primitives/` carries them and the snapshot gate holds them. **Page and
+layout rhythm is VisionSet's own composition**, on Tailwind's ordinary spacing scale: `p-6`,
+`gap-4`, `space-y-8`, and the pattern layer's `mt-2` under a `line` tab bar. Dense where the
+content is plural — data surfaces show more of the thing the reader came for; generous where
+prose and forms are read one thing at a time.
+
+**Radius is a runtime value, not a config field.** The preset's `radius: medium` materialises as
+`--radius: 0.625rem` (10px) in `styles.css`, mirrored by `tokens.ts` and pinned by
+`tokens.test.ts`; `components.json` holds no radius field because the schema defines none. Every
+other step derives from `--radius` in `@theme inline` (`radius-sm` at `× 0.6` through
+`radius-4xl` at `× 2.6`), and no arbitrary radius appears outside that scale.
+
+## Icons
+
+`lucide-react` is the set, and the only one. No package declares a second icon library, and
+`tests/scripts/design_tokens.test.mjs` refuses one that reappears in a manifest or an import.
+The rule is *one* set rather than one particular set — what costs a reader is two of them on a
+screen, where the same idea arrives at two weights and two grids. Changing which one is a
+decision to make here, not a dependency to add. Icon size comes from the primitive that contains
+the icon; a call site does not resize an icon to fit a control it did not measure.
+
+## Motion
+
+Motion orients or confirms, and never stands between somebody and their next action. An
+**enter** animation is free to play: the surface it introduces did not exist a frame ago, so
+nothing is waiting on it. An **exit** animation is not, and the difference is not taste.
+
+**A menu leaves on the frame it is dismissed.** While Radix runs an exit animation the content
+stays mounted and the dismissable layer with it, so a press meant to open the next menu is read
+twice — as the open, and as an interaction outside the closing surface — and the two cancel. At a
+100ms exit that window covers the gap between an `Escape` and the click after it, which a fast
+hand meets routinely. Canonical `dropdown-menu.tsx` animates out like any other floating
+surface and the snapshot gate holds it there, so the rule is a **call-site constant**, not a
+primitive edit: every
+`DropdownMenuContent` applies `menuSurface`
+([`frontend/ui-core/src/lib/menu.ts`](frontend/ui-core/src/lib/menu.ts),
+`data-closed:animate-none! w-auto`). Both halves are one rule — a menu that behaves like a menu —
+and travel together, `w-auto` freeing the surface from canonical's trigger-width pin, which
+behind an icon-sized button leaves a 128px floor every longer item wraps against. A surface whose
+trigger cannot be pressed again straight away — a dialog's, a tooltip's — keeps its exit animation
+and never takes the constant. `TooltipProvider` defaults `delayDuration` to `0`; a screen wanting
+Radix's debounce sets it on the provider.
+
+`prefers-reduced-motion` sits above all of this: the base layer collapses every animation and
+transition to a single frame under that query, so no component opts in.
 
 ## Accessibility
 
-First-class, and part of every rule above rather than a section to satisfy afterwards:
-
-- **Semantic HTML.** Real `<button>`/`<a>`, native form controls, lists as lists, one
-  `<h1>` and a meaningful heading hierarchy below it.
-- **Keyboard parity.** Everything a pointer can do, the keyboard can do: real
-  interactive elements, logical tab order, arrow-key movement inside composite widgets.
-- **Focus is always visible** — the component `ring-3 ring-ring/50` treatment where a
-  primitive defines one, the base layer's `outline-ring/50` everywhere else; never
-  removed, never colour-only.
-- **No colour-only communication.** Status, selection, validity, and provenance all
-  carry a redundant channel (a word, an icon, a shape). The product status vocabulary
-  itself — the five semantic families and their mapping to product states — is defined
-  in [`docs/content/ui/product-principles.md`](docs/content/ui/product-principles.md#status-semantics).
-- **`destructive` stays semantically destructive** — the one token that is its own
-  status, never repurposed for emphasis and never renamed.
-- **`prefers-reduced-motion`** is a standing rule: motion collapses to opacity changes or
-  nothing, with no loss of information. The base layer in `styles.css` enforces it: under
-  the media query, every animation and transition duration collapses to a single frame,
-  so no component needs to opt in individually.
-- **Never disable without explanation** stays exactly as the product principles state it
-  — [`docs/content/ui/product-principles.md`](docs/content/ui/product-principles.md#principles) — this
-  document only fixes disabled's *look* (`opacity-50`), not when a control may be one.
-- Dialogs, menus, and tooltips follow their ARIA patterns: roles, labelled-by
-  relationships, focus trap and return, `Escape` behaviour — Radix's own guarantees,
-  which is why no primitive here is hand-rolled from a `<div>`.
-
-## Responsive / Product Composition
-
-- Designed for mobile, laptop, desktop, and wide displays; standard breakpoints
-  640 / 768 / 1024 / 1280.
-- **Adaptation reflows; it does not amputate.** Content and controls remain reachable
-  and legible at every supported size — nothing simply disappears; see
-  [`docs/content/ui/navigation.md`](docs/content/ui/navigation.md) for the rail's own collapse behaviour.
-- **Content growth is supported, not fought.** Text wraps rather than truncates unless
-  the value is re-readable elsewhere; identifiers wrap rather than truncate mid-token;
-  controls are never clipped — a readout yields before a button does.
-- Hit targets stay comfortable on touch (44px-order), whatever the pointer.
-- Page, section, and list rhythm is Tailwind's ordinary spacing scale (see *Density and
-  Spacing*) — exact page and dialog dimensions are screen-level decisions living with
-  [`docs/content/ui/product-principles.md`](docs/content/ui/product-principles.md) and
-  [`docs/content/ui/navigation.md`](docs/content/ui/navigation.md), not this document.
-
-## Anti-Patterns
-
-- **A raw colour outside the foundation.** Every hex, `rgb()`, `hsl()`, `oklch()`, or
-  `var()` inside a Tailwind class string is machine-refused
-  (`tests/scripts/design_tokens.test.mjs`); the one sanctioned exception is an inline
-  style carrying a schema-supplied class colour, which is user data no token could name.
-- **A second token vocabulary.** No `surface`, `error`, `foreground-secondary`, or
-  "accent as the action colour" alias — shadcn's names are the only spelling of intent,
-  and a parallel naming layer is exactly the drift this rewrite removed.
-- **Ad-hoc geometry that fights Nova.** A control's height, padding, or radius is not a
-  per-screen decision; reaching past the geometry table above for a bespoke size is a
-  design decision to make in this document, not in a component diff.
-- **Mixing icon sets in new code.** `lucide-react` is the set, and the only one: every
-  icon the primitives, the screens and the annotation workspace draw comes from it, no
-  package declares a second icon library, and `tests/scripts/design_tokens.test.mjs`
-  refuses one that reappears in a manifest or an import. The rule is *one* set rather
-  than one particular set — what costs a reader is two of them on a screen, where the
-  same idea arrives at two weights and two grids. Changing which one is a decision to
-  make in this document, not a dependency to add.
-- **Brand in a functional control.** Robomous coral is identity — the wordmark and its
-  styleguide swatch, nothing else. A functional control reaching for `brand` is a
-  semantic-colour violation regardless of how many other sites already use it correctly.
+- **Semantic HTML.** Real `<button>`/`<a>`, native controls, lists as lists, one `<h1>` and a
+  meaningful hierarchy under it.
+- **Keyboard parity.** Everything a pointer can do, the keyboard can do — logical tab order,
+  arrow-key movement inside composite widgets.
+- **Focus is always visible**, per *Borders and focus*: never removed, never colour-only.
+- **No colour-only communication.** Status, selection, validity and provenance each carry a
+  redundant channel.
+- **Field anatomy carries the wiring.** `Field`, `FieldLabel`, `FieldDescription`, `FieldError`,
+  `FieldGroup`, `FieldSet`, `FieldLegend`, `FieldContent`, `FieldTitle`, `FieldSeparator`: a
+  description and an error are subcomponents, so `aria-describedby` and `aria-invalid` come from
+  the primitive rather than from a screen remembering.
+- **Dialog and Sheet keep their official anatomy** — trigger, overlay, content, header, title,
+  description, footer, close. Focus trap and return, `Escape`, and the labelled-by relationships
+  are Radix's guarantees, which is why no primitive here is hand-rolled from a `<div>`.
+- **Never disable without explanation** stays as the product principles state it
+  ([`docs/content/ui/product-principles.md`](docs/content/ui/product-principles.md#principles));
+  this document fixes only disabled's look.
+
+## Product-Specific Extensions
+
+Everything VisionSet owns above the foundation, in one list:
+
+| Extension | Where | Rule |
+| --- | --- | --- |
+| `stage` | `styles.css`, `tokens.ts` | The annotator's surround. Usage: [`docs/content/ui/annotator.md`](docs/content/ui/annotator.md#the-stage) |
+| `brand` | `styles.css`, `tokens.ts` | Identity only — see *Where the brand is* |
+| `origin-hub` / `origin-custom` / `origin-robomous` | `styles.css`, `tokens.ts` | A model's provenance, as a card's accent edge. A mark: never a surface, never ink, and an origin is a kind rather than a state, so these never stand in for a status |
+| Badge `success` / `warning` / `info` / `quiet` | `primitives/badge.tsx` | Four added lines — see *Badge Variants* |
+| `statusTone.ts` | `patterns/` | The one home for status colour outside the Badge |
+| `menuSurface` | `lib/menu.ts` | The call-site menu constant — see *Motion* |
+| `--spacing-sidebar` / `--spacing-sidebar-collapsed` | `styles.css` `@theme inline` | 240px and 48px, consumed by `AppShell`, its collapse toggle and the content offset, which must agree or the layout jumps on collapse. The collapsed width is the preset's own icon-sidebar width, so with the rail's `p-2` it holds exactly one `size-8` control per row |
+| Patterns | `patterns/` | `AsyncStates`, `BackLink`, `ClassFields`, `DataDisplay`, `ErrorBoundary`, `ExportTargetSelect`, `PaddedContent`, `ProjectEyebrow`, `ProjectNav`, `ProjectShell`, `RecipeEditor`, `RecipeList`, `SectionHeader`, `StaticAnnotationOverlay`, `StepMarker` |
+
+The navigation rail follows the theme on the eight `sidebar-*` tokens — light in the light theme,
+dark in the dark one, never a hardcoded dark surface independent of the switch. Layout adapts by
+reflowing, not by amputating: standard breakpoints 640 / 768 / 1024 / 1280, content and controls
+reachable at every supported size, text wrapping rather than truncating unless the value is
+re-readable elsewhere, touch targets comfortable (44px-order) whatever the pointer. The rail's
+own collapse behaviour is [`docs/content/ui/navigation.md`](docs/content/ui/navigation.md).
+
+Anything outside this list is not an extension; it is a diff against this document.
+
+## Allowed shadcn Deviations
+
+**Policy.** A behavioural change to a primitive requires all three of: a **reproduced defect**
+(not a preference, not a hypothetical), a **regression test** that fails on the canonical file
+and passes on the changed one, and an explicit `SHADCN DEVIATION` comment naming the defect.
+Absent any one of them, the change belongs at a call site.
+
+**Current list: none.** No primitive carries a `SHADCN DEVIATION` marker. The historic
+DropdownMenu rapid-reopen patch was retired — its rule lives in `menuSurface` at the call site,
+and `frontend/app/e2e/annotate.spec.ts`'s "the overflow reopens on a press straight after
+Escape" passes on the canonical file.
+
+**Framework adapters are a separate, narrower category.** A primitive may replace an upstream
+integration that assumes a framework VisionSet does not run, and nothing else. There is exactly
+one: `primitives/sonner.tsx` replaces shadcn's `next-themes` `useTheme` — a Next.js integration
+— with a hook reading `.dark` on `<html>`, VisionSet's one theme source under Vite. It carries a
+`SHADCN FRAMEWORK ADAPTER` comment, it is the only entry in `FRAMEWORK_ADAPTERS` in
+`tests/scripts/shadcn_canonical.test.mjs`, and the gate names the exact snapshot lines it may
+remove. An adapter is not a licence for divergence in general, and the marker on an unlisted
+file fails the gate.
+
+## Updating shadcn Components
+
+Install or refresh from inside Docker:
+
+```
+pnpm --filter @visionset/ui-core shadcn:add <name>
+```
+
+That writes the CLI's pristine output to `frontend/ui-core/shadcn/<name>.tsx`, then relativises
+the import paths in `src/primitives/<name>.tsx`. The CLI version is pinned at **4.19.0** in the
+installer, matching the `shadcn` dependency in `frontend/ui-core/package.json`, so a refresh
+cannot quietly move the foundation. `shadcn add <name> --diff` reports what upstream changed; it
+is inspection only.
+
+**Accept upstream by default.** A refresh that changes a class, a size or an anatomy is the
+foundation moving, and VisionSet follows it — keeping the primitives canonical is what makes that
+a routine update rather than a merge. `shadcn:add` itself runs `--overwrite --yes`, so the
+discipline is not to withhold the flag but to know what it will replace: **`add --diff` first,
+then reapply** the additive lines this document names (today, only the Badge's four), re-run the
+gates below, and check the visual baselines. An overwrite that drops those four lines, or the
+sonner adapter, type-checks and fails the gate — the gate doing its job, but the diff is easier to
+read before the fact than after.
+
+Rendered to look at: `pnpm --filter @visionset/app dev`, then the `/styleguide` route.
+
+## Verification
+
+| Gate | Holds |
+| --- | --- |
+| `tests/scripts/shadcn_canonical.test.mjs` | Every primitive is its snapshot plus added lines; the framework-adapter allow-list |
+| `tests/scripts/shadcn_extensions.test.mjs` | Button's variants and sizes exactly; the Badge's four additions and their classes; the status palette's three files; no competing colour family; no retired v1 vocabulary |
+| `tests/scripts/design_tokens.test.mjs` | No colour in a class string; `components.json` within the schema-supported set; `brand` confined to its two identity sites; the retired token vocabulary; one icon library |
+| `frontend/ui-core/src/tokens.test.ts` | `styles.css` and `tokens.ts` agree declaration for declaration, and no retired token has returned |
+| `tests/scripts/docs_links.test.mjs` | Every link and `#anchor` in every tracked Markdown file resolves — this document included |
+| `tests/scripts/form_buttons.test.mjs` | Every `<Button>` inside a `<form>` states its `type` |
+| `frontend/app/e2e/visual.spec.ts` | The rendered result, against Linux baselines — see [`docs/content/architecture/frontend/visual-baselines.md`](docs/content/architecture/frontend/visual-baselines.md) |
+
+A rule in this document that no gate holds is a rule under review, not an exemption.
diff --git a/docs/content/architecture/frontend/ui-core.md b/docs/content/architecture/frontend/ui-core.md
index b4b6f65d..728310b6 100644
--- a/docs/content/architecture/frontend/ui-core.md
+++ b/docs/content/architecture/frontend/ui-core.md
@@ -77,8 +77,8 @@ whenever its asserted type is and `tsc` cannot see the mismatch.
 colour `neutral`, chart palette `neutral`, icons `lucide`, Geist throughout with
 the heading face inheriting the body's, radius `medium`, menu
 `inverted`/`subtle`, pointer cursor on pressable controls) - the CLI's own
-generated output, transcribed verbatim, plus five VisionSet extension roles
-(`stage`, `brand`, `success`, `warning`, `origin-*`) added through shadcn's own
+generated output, transcribed verbatim, plus three VisionSet extension roles
+(`stage`, `brand`, `origin-*`) added through shadcn's own
 extension convention. `components.json` (`style: "radix-nova"`,
 `iconLibrary: "lucide"`, `menuColor: "inverted"`, `menuAccent: "subtle"`) holds
 the preset properties shadcn's own tools read - the fields its config schema
@@ -91,12 +91,13 @@ preset, so `bg-primary` in a component here and `bg-primary` in a screen mean
 the same colour by construction. There is no `tailwind.config.js` in this
 repository and there must not be one - the tokens would acquire a second home.
 
-Three gates hold this: `tokens.test.ts` asserts `styles.css` and `tokens.ts`
+Four gates hold this: `tokens.test.ts` asserts `styles.css` and `tokens.ts`
 agree, declaration for declaration, and that no retired token has returned;
 `tests/scripts/design_tokens.test.mjs` scans every tracked frontend file for a
 raw colour in a class string, refuses a second `tailwind.config.js`, confines
 `brand` to its two identity sites, and holds `components.json` to the
-schema-supported field set; `tests/scripts/docs_links.test.mjs`
+schema-supported field set; `tests/scripts/shadcn_canonical.test.mjs` holds
+every primitive to its CLI snapshot; `tests/scripts/docs_links.test.mjs`
 keeps [`DESIGN.md`](../../../../DESIGN.md)'s own cross-references honest.
 
 ## Libraries
@@ -106,10 +107,10 @@ visual-design rule. The current choices:
 
 | Concern | Choice |
 | --- | --- |
-| UI primitives | Radix (+ shadcn-style composition with `cva` and `cn`) - the open-code shadcn maintenance model is the direction: a primitive is VisionSet-owned source in `frontend/ui-core/src/primitives/`, edited directly, not a package dependency upgraded blindly |
+| UI primitives | Radix (+ shadcn-style composition with `cva` and `cn`) - the open-code shadcn maintenance model is the direction: a primitive is VisionSet-owned source in `frontend/ui-core/src/primitives/`, edited directly, not a package dependency upgraded blindly — each file there is the shadcn CLI's own output (snapshot in `shadcn/`), edited only by adding lines. The dependency is the `radix-ui` umbrella package, not the scoped `@radix-ui/react-*` packages it replaces |
 | Icons | `lucide-react`, and nothing else: the primitives, the screens and the annotation workspace all draw from it, and no package declares a second icon library |
-| Styling | Tailwind v4, CSS-first `@theme`, on the shadcn preset `b3bXyyPdWj` - no `tailwind.config.js`, ever |
-| Toasts | sonner |
+| Styling | Tailwind v4, CSS-first `@theme`, on the shadcn preset `b2iH` - no `tailwind.config.js`, ever |
+| Toasts | sonner, themed by a framework adapter in `sonner.tsx` (marked `SHADCN FRAMEWORK ADAPTER`) that reads VisionSet's one theme source — `.dark` on `<html>` — instead of shadcn's canonical `next-themes` hook, which has no provider to read here |
 | Component tests | vitest + jsdom + @testing-library/react |
 | Server state | TanStack Query v5 |
 
diff --git a/docs/content/ui/annotator.md b/docs/content/ui/annotator.md
index 95a4a19a..5def4047 100644
--- a/docs/content/ui/annotator.md
+++ b/docs/content/ui/annotator.md
@@ -66,9 +66,9 @@ advancing — and neither ever collapses into the overflow.
   first** as the third member of the resolve group — `Skip · [flow verb] · Save and stay`.
   *Advance* and *persist in place* are one decision read two ways, so they are adjacent
   rather than a bar apart. In the current implementation the flow verb is filled in
-  `primary` and Save and stay is filled in `success`; colour is what separates their
-  intent, since a second `primary` beside the first would read as a bar that could not
-  decide. It keeps the frame verbs' lifetime rather than the mode's: a closed batch or a
+  `primary` and Save and stay is an outline control beside it; adjacency is what says
+  they are alternatives, since a second filled `primary` beside the first would read as
+  a bar that could not decide. It keeps the frame verbs' lifetime rather than the mode's: a closed batch or a
   finished job has nothing to save on any frame, so it leaves with Skip and the flow verb;
   inside a working job it holds its slot, disabled, so the cluster does not change width as
   somebody walks a mixed job.
diff --git a/docs/content/ui/product-principles.md b/docs/content/ui/product-principles.md
index 61ba6ca1..49361066 100644
--- a/docs/content/ui/product-principles.md
+++ b/docs/content/ui/product-principles.md
@@ -131,7 +131,7 @@ emptied-result rule.
 
 ## Tabs
 
-One tab shape, product-wide (`frontend/ui-core/src/primitives/Tabs.tsx`): a row on a
+One tab shape, product-wide (`frontend/ui-core/src/primitives/tabs.tsx`): a row on a
 full-width hairline; the active tab carries a 2px accent rule sitting on that hairline plus
 foreground text; an inactive tab carries no border, no fill and no shadow, and gets a
 subtle fill on hover or focus. The inactive tab keeps the same 2px border at `transparent`,
@@ -263,7 +263,7 @@ Presentational contracts, all in `ui-core`, all data-only — no fetching, no ro
 | `ClassListRow` | Swatch + name + a `geometry · count` secondary line. Selected = tinted background + 2px left accent rule covering the row's full height. The whole row is the click target and a real `<button>` — except when it carries shape chips, which are press targets and cannot nest inside a button: that row is a `role="group"` with an inner name button, addressed by the same `-name` handle in both markups. A row carrying a refusal never takes the group form, because only the button can be disabled. |
 | `EmptyState` | Icon + a headline naming the space + one line of body + a verb-first CTA. Never a bare "No items". |
 | `ThumbnailGrid` | Square tiles, 6px gap, small radius. The last tile becomes a `+N` overflow linking onward. Missing thumbnails show a photo icon on a subtle fill — never a broken-image glyph. |
-| Chip | `primitives/Badge.tsx`, which already is one. It gains variants; it is not reimplemented. |
+| Chip | `primitives/badge.tsx`, which already is one. It gains variants; it is not reimplemented. |
 
 **Class colour is data, not chrome.** It appears as a small swatch or a thin bar and never
 floods a card or a row — the content-over-chrome rule applied to a colour the *kernel*
diff --git a/frontend/app/cycle/cycle.spec.ts b/frontend/app/cycle/cycle.spec.ts
index 892e67e6..b1456f24 100644
--- a/frontend/app/cycle/cycle.spec.ts
+++ b/frontend/app/cycle/cycle.spec.ts
@@ -410,9 +410,9 @@ test("the whole cycle, from opening the app to a downloaded export", async ({ pa
     // road below, which is the one that exercises the partition dialog.
     await expect(page.getByTestId("approve-start-cycle-batch")).toHaveAttribute(
       "data-variant",
-      "primary",
+      "default",
     );
-    await expect(page.getByTestId("open-batch")).toHaveAttribute("data-variant", "secondary");
+    await expect(page.getByTestId("open-batch")).toHaveAttribute("data-variant", "outline");
     await expect(page.getByTestId("approve-needs-schema")).toHaveCount(0);
     await page.getByTestId("open-batch").click();
     await expect(page).toHaveURL(/\/projects\/[0-9a-f-]+\/batches\/[0-9a-f-]+$/);
@@ -481,10 +481,10 @@ test("the whole cycle, from opening the app to a downloaded export", async ({ pa
     await openProject(page, PROJECT, "batches");
     await expect(page.getByTestId("batches-table")).toBeVisible();
     await expect(page.getByTestId("batch-cycle-batch")).toContainText("pending approval");
-    // A draft row offers the composed step too, secondary like every row action.
+    // A draft row offers the composed step too, outline like every row action.
     await expect(page.getByTestId("approve-start-cycle-batch")).toHaveAttribute(
       "data-variant",
-      "secondary",
+      "outline",
     );
 
     await page.getByTestId("approve-cycle-batch").click();
diff --git a/frontend/app/e2e/gallery.spec.ts b/frontend/app/e2e/gallery.spec.ts
index 8ae8ad90..c1a4a2b8 100644
--- a/frontend/app/e2e/gallery.spec.ts
+++ b/frontend/app/e2e/gallery.spec.ts
@@ -774,7 +774,7 @@ test("Complete and promote finishes the job, closes the batch, promotes, and say
   await openGallery(page, sent, { settled: true });
 
   const composed = page.getByTestId("complete-promote-drive-01");
-  await expect(composed).toHaveAttribute("data-variant", "secondary");
+  await expect(composed).toHaveAttribute("data-variant", "outline");
   await composed.click();
 
   // In order, and the job first: the batch refuses while its job is open.
@@ -815,9 +815,17 @@ test("a one-job batch draws its job flat: no accordion, one bar, the job's contr
   await expect(workspace.getByTestId("timeline")).toBeVisible();
   // The door, Pre-label's slot and the assignee line are the job's, under the
   // header — and none of them is the page's filled control.
-  await expect(workspace.getByTestId(`start-job-${JOB}`)).toHaveAttribute("data-variant", "secondary");
+  await expect(workspace.getByTestId(`start-job-${JOB}`)).toHaveAttribute("data-variant", "outline");
   await expect(workspace.getByTestId(`assignee-${JOB}`)).toContainText("Unassigned");
-  await expect(page.getByTestId("gallery").locator('[data-variant="primary"]')).toHaveCount(0);
+  // Scoped to `Button`, not `[data-variant]` alone: the batch-state `Badge`
+  // legitimately carries `data-variant="default"` too (`in_annotation` reads
+  // as the near-black `default` tone, per `batchState.ts`), and a bare
+  // attribute selector would catch that badge instead of asking the question
+  // this line means to ask — whether the job's door duplicates the page's one
+  // filled button.
+  await expect(
+    page.getByTestId("gallery").locator('[data-slot="button"][data-variant="default"]'),
+  ).toHaveCount(0);
   await expect(workspace.getByTestId("segments")).toBeVisible();
   await expect(workspace.getByTestId("tile-asset-0")).toBeVisible();
 });
diff --git a/frontend/app/e2e/navigation.spec.ts b/frontend/app/e2e/navigation.spec.ts
index 9797fd74..67d3d0ed 100644
--- a/frontend/app/e2e/navigation.spec.ts
+++ b/frontend/app/e2e/navigation.spec.ts
@@ -388,7 +388,7 @@ async function channelsOf(page: Page, colour: string): Promise<readonly number[]
   }, colour);
 }
 
-test("a batch row's progress fills with the success colour on a bordered muted track", async ({
+test("a batch row's progress fills with the primary colour on a bordered muted track", async ({
   page,
 }) => {
   await openCold(page, `/projects/${PROJECT}/batches`);
@@ -399,7 +399,7 @@ test("a batch row's progress fills with the success colour on a bordered muted t
   const tokens = await page.evaluate(() => {
     const style = getComputedStyle(document.documentElement);
     return {
-      success: style.getPropertyValue("--success"),
+      primary: style.getPropertyValue("--primary"),
       muted: style.getPropertyValue("--muted"),
       border: style.getPropertyValue("--border"),
     };
@@ -407,8 +407,10 @@ test("a batch row's progress fills with the success colour on a bordered muted t
   const painted = async (locator: typeof bar, prop: string): Promise<readonly number[]> =>
     channelsOf(page, await locator.evaluate((node, p) => getComputedStyle(node).getPropertyValue(p), prop));
 
-  expect(await painted(bar.locator("> *").first(), "background-color")).toEqual(
-    await channelsOf(page, tokens.success),
+  const indicator = bar.locator('[data-slot="progress-indicator"]');
+  await expect(indicator).toHaveClass(/bg-primary/);
+  expect(await painted(indicator, "background-color")).toEqual(
+    await channelsOf(page, tokens.primary),
   );
   expect(await painted(bar, "background-color")).toEqual(await channelsOf(page, tokens.muted));
   expect(await painted(bar, "border-top-color")).toEqual(await channelsOf(page, tokens.border));
diff --git a/frontend/app/e2e/styleguide.spec.ts b/frontend/app/e2e/styleguide.spec.ts
index b51de83e..bd582c7b 100644
--- a/frontend/app/e2e/styleguide.spec.ts
+++ b/frontend/app/e2e/styleguide.spec.ts
@@ -142,7 +142,7 @@ test("the token utilities reach the browser as the contract's values", async ({
  * nowhere near the primary button" — the palette's whole point was that a
  * functional fill was never the identity colour. Task 5 of the shadcn preset
  * rewrite changed the *premise*, not just the value: the progress indicator is
- * now `bg-primary` (`ui-core/src/primitives/Feedback.tsx`), the same functional
+ * now `bg-primary` (`ui-core/src/primitives/progress.tsx`), the same functional
  * colour as the primary button, and `brand` dropped to exactly two call sites —
  * the wordmark and its styleguide swatch — neither of which is this page's
  * progress bar. So the claim this test can still make, and the one worth
@@ -445,3 +445,67 @@ test("a two-line option grows its trigger, and a one-line one is Nova's 32px", a
   const id = page.getByLabel("Model").locator("span", { hasText: "facebook/sam2.1-hiera-base-plus" }).first();
   await expect(id).toHaveCSS("text-overflow", "clip");
 });
+
+/**
+ * Base UI's Combobox, read back from a real browser rather than jsdom.
+ *
+ * `combobox.test.tsx` proves the same shape — filter-as-you-type, Escape closes
+ * — against the fruit demo; this is the styleguide's own seven class names,
+ * and it adds the one thing jsdom cannot: keyboard selection actually closing
+ * the popup and committing a value, not just removing the highlighted option
+ * from the tree.
+ */
+test("the Combobox filters as you type, ArrowDown+Enter selects and closes, and Escape backs out", async ({
+  page,
+}) => {
+  const input = page.getByLabel("Class");
+  await input.click();
+  await input.fill("an");
+
+  // Of the seven demo classes, "lane" is the only one containing "an".
+  await expect(page.getByRole("option")).toHaveCount(1);
+  await expect(page.getByRole("option", { name: "lane" })).toBeVisible();
+
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.press("Enter");
+  await expect(page.getByRole("option")).toHaveCount(0);
+  await expect(input).toHaveValue("lane");
+
+  await input.click();
+  await input.fill("an");
+  await expect(page.getByRole("option")).toHaveCount(1);
+  await page.keyboard.press("Escape");
+  await expect(page.getByRole("option")).toHaveCount(0);
+});
+
+/**
+ * `Sheet` shares Radix's `Dialog` primitive under the hood (`shadcn/sheet.tsx`),
+ * so this is the same claim as the dialog test above, made about the other
+ * shape: it opens as `role="dialog"`, Escape closes it, and focus comes back
+ * to the outline trigger that opened it.
+ */
+test("a sheet opens as a dialog, closes on Escape and returns focus to its trigger", async ({ page }) => {
+  const trigger = page.getByRole("button", { name: "Open sheet" });
+  await trigger.click();
+
+  const sheet = page.getByRole("dialog");
+  await expect(sheet).toBeVisible();
+
+  await page.keyboard.press("Escape");
+  await expect(sheet).toHaveCount(0);
+  await expect(trigger).toBeFocused();
+});
+
+/**
+ * The extension contract's own claim (`shadcn_extensions.test.mjs`, "a status
+ * Badge paints a soft surface and readable ink, never a coloured stroke"),
+ * read back as a computed style rather than a class string — and in both
+ * themes, since `border-transparent` is a base class every variant inherits
+ * rather than something `dark:` has to repeat.
+ */
+test("a status Badge is a soft fill with no visible border, in both themes", async ({ page }) => {
+  for (const variant of ["success", "warning", "info", "quiet"]) {
+    await expect(page.getByTestId(`badge-${variant}-light`)).toHaveCSS("border-color", "rgba(0, 0, 0, 0)");
+    await expect(page.getByTestId(`badge-${variant}-dark`)).toHaveCSS("border-color", "rgba(0, 0, 0, 0)");
+  }
+});
diff --git a/frontend/app/e2e/visual.spec.ts-snapshots/annotator-desktop-dark-visual-linux.png b/frontend/app/e2e/visual.spec.ts-snapshots/annotator-desktop-dark-visual-linux.png
index b4c04a64..dd6651a2 100644
Binary files a/frontend/app/e2e/visual.spec.ts-snapshots/annotator-desktop-dark-visual-linux.png and b/frontend/app/e2e/visual.spec.ts-snapshots/annotator-desktop-dark-visual-linux.png differ
diff --git a/frontend/app/e2e/visual.spec.ts-snapshots/annotator-desktop-light-visual-linux.png b/frontend/app/e2e/visual.spec.ts-snapshots/annotator-desktop-light-visual-linux.png
index 48d31866..8ac4da06 100644
Binary files a/frontend/app/e2e/visual.spec.ts-snapshots/annotator-desktop-light-visual-linux.png and b/frontend/app/e2e/visual.spec.ts-snapshots/annotator-desktop-light-visual-linux.png differ
diff --git a/frontend/app/e2e/visual.spec.ts-snapshots/models-desktop-dark-visual-linux.png b/frontend/app/e2e/visual.spec.ts-snapshots/models-desktop-dark-visual-linux.png
index f462bff4..cca77ee6 100644
Binary files a/frontend/app/e2e/visual.spec.ts-snapshots/models-desktop-dark-visual-linux.png and b/frontend/app/e2e/visual.spec.ts-snapshots/models-desktop-dark-visual-linux.png differ
diff --git a/frontend/app/e2e/visual.spec.ts-snapshots/models-desktop-light-visual-linux.png b/frontend/app/e2e/visual.spec.ts-snapshots/models-desktop-light-visual-linux.png
index d68b2696..b827d336 100644
Binary files a/frontend/app/e2e/visual.spec.ts-snapshots/models-desktop-light-visual-linux.png and b/frontend/app/e2e/visual.spec.ts-snapshots/models-desktop-light-visual-linux.png differ
diff --git a/frontend/app/e2e/visual.spec.ts-snapshots/projects-desktop-dark-visual-linux.png b/frontend/app/e2e/visual.spec.ts-snapshots/projects-desktop-dark-visual-linux.png
index 9ddfb435..a0673a6a 100644
Binary files a/frontend/app/e2e/visual.spec.ts-snapshots/projects-desktop-dark-visual-linux.png and b/frontend/app/e2e/visual.spec.ts-snapshots/projects-desktop-dark-visual-linux.png differ
diff --git a/frontend/app/e2e/visual.spec.ts-snapshots/projects-desktop-light-visual-linux.png b/frontend/app/e2e/visual.spec.ts-snapshots/projects-desktop-light-visual-linux.png
index df4f0cff..769b6d10 100644
Binary files a/frontend/app/e2e/visual.spec.ts-snapshots/projects-desktop-light-visual-linux.png and b/frontend/app/e2e/visual.spec.ts-snapshots/projects-desktop-light-visual-linux.png differ
diff --git a/frontend/app/e2e/visual.spec.ts-snapshots/schema-desktop-dark-visual-linux.png b/frontend/app/e2e/visual.spec.ts-snapshots/schema-desktop-dark-visual-linux.png
index 22a64f6a..8309aa34 100644
Binary files a/frontend/app/e2e/visual.spec.ts-snapshots/schema-desktop-dark-visual-linux.png and b/frontend/app/e2e/visual.spec.ts-snapshots/schema-desktop-dark-visual-linux.png differ
diff --git a/frontend/app/e2e/visual.spec.ts-snapshots/schema-narrow-light-visual-linux.png b/frontend/app/e2e/visual.spec.ts-snapshots/schema-narrow-light-visual-linux.png
index 02ac5672..f2d5a909 100644
Binary files a/frontend/app/e2e/visual.spec.ts-snapshots/schema-narrow-light-visual-linux.png and b/frontend/app/e2e/visual.spec.ts-snapshots/schema-narrow-light-visual-linux.png differ
diff --git a/frontend/app/src/main.tsx b/frontend/app/src/main.tsx
index 5d8656e1..0f44453e 100644
--- a/frontend/app/src/main.tsx
+++ b/frontend/app/src/main.tsx
@@ -94,7 +94,7 @@ createRoot(container).render(
         <ApiProvider baseUrl={API_BASE_URL}>
           <TooltipProvider>
             <AppRoutes />
-            <Toaster />
+            <Toaster position="bottom-right" />
           </TooltipProvider>
         </ApiProvider>
       </BrowserRouter>
diff --git a/frontend/app/src/shell/AppShell.tsx b/frontend/app/src/shell/AppShell.tsx
index 17712eb5..02902617 100644
--- a/frontend/app/src/shell/AppShell.tsx
+++ b/frontend/app/src/shell/AppShell.tsx
@@ -273,7 +273,7 @@ function RailLink({
       // one — so the geometry comes from `buttonVariants` directly.
       className={({ isActive }) =>
         cn(
-          buttonVariants({ variant: "ghost", size: "md" }),
+          buttonVariants({ variant: "ghost", size: "default" }),
           "w-full justify-start gap-2 px-2 text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground dark:hover:bg-sidebar-accent",
           collapsed && "justify-center",
           isActive &&
@@ -303,7 +303,7 @@ function RailButton({
   return (
     <Button
       variant="ghost"
-      size={wide === true ? "md" : "icon"}
+      size={wide === true ? "default" : "icon"}
       data-testid={testId}
       aria-label={label}
       title={label}
diff --git a/frontend/app/src/shell/NotFound.tsx b/frontend/app/src/shell/NotFound.tsx
index a57d8462..56b40bb7 100644
--- a/frontend/app/src/shell/NotFound.tsx
+++ b/frontend/app/src/shell/NotFound.tsx
@@ -22,7 +22,7 @@ export function NotFound(): JSX.Element {
       title="No such page"
       description={pathname}
       action={
-        <Button asChild variant="primary">
+        <Button asChild variant="default">
           <Link to="/">Back to Home</Link>
         </Button>
       }
diff --git a/frontend/app/src/styleguide/Styleguide.tsx b/frontend/app/src/styleguide/Styleguide.tsx
index 0f9fed5d..ba064071 100644
--- a/frontend/app/src/styleguide/Styleguide.tsx
+++ b/frontend/app/src/styleguide/Styleguide.tsx
@@ -19,6 +19,10 @@
  */
 
 import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
   Badge,
   Button,
   Card,
@@ -27,6 +31,12 @@ import {
   CardHeader,
   CardTitle,
   ClassListRow,
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
   DistributionBar,
   formatCount,
   formatPercent,
@@ -45,12 +55,18 @@ import {
   DropdownMenuTrigger,
   EmptyState,
   ErrorState,
-  FieldHint,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
   Input,
-  Label,
   LIGHT_THEME,
   LoadingState,
   Progress,
+  progressAria,
   PROJECT_SECTIONS,
   ProjectEyebrow,
   ProjectNav,
@@ -60,6 +76,13 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
   Table,
   TableBody,
   TableCell,
@@ -78,9 +101,12 @@ import {
   TooltipTrigger,
   classColor,
   formatGeometries,
+  inlineLink,
+  menuSurface,
   toast,
+  twoLineTrigger,
 } from "@visionset/ui-core";
-import { MousePointer2, Plus, Square, Trash2 } from "lucide-react";
+import { Info, MousePointer2, Plus, Square, Trash2 } from "lucide-react";
 import type { JSX, ReactNode } from "react";
 
 /** The demo schema, borrowed so the swatches show the real palette rule. */
@@ -112,6 +138,13 @@ const DISTRIBUTION = [
 // old stacked-card schema editor became unusable at.
 const ONTOLOGY = Array.from({ length: 40 }, (_, index) => `class-${String(index + 1).padStart(2, "0")}`);
 
+/** The Combobox demo's items — one of them ("lane") is the sole `an` match. */
+const DEMO_CLASSES = ["barrier", "bicycle", "cyclist", "lane", "sign", "truck", "vehicle"];
+
+/** `Badge`'s shadcn variants, then VisionSet's four status extensions. */
+const BADGE_OFFICIAL = ["default", "secondary", "outline", "destructive", "ghost", "link"] as const;
+const BADGE_STATUS = ["success", "warning", "info", "quiet"] as const;
+
 export function Styleguide(): JSX.Element {
   return (
     <TooltipProvider>
@@ -184,8 +217,6 @@ export function Styleguide(): JSX.Element {
                     inspected rather than used. Its two product sites are the rail's
                     wordmark and the progress fill. */}
                 <Swatch name="brand" className="bg-brand" />
-                <Swatch name="success" className="bg-success" />
-                <Swatch name="warning" className="bg-warning" />
                 <Swatch name="origin-hub" className="bg-origin-hub" />
                 <Swatch name="origin-custom" className="bg-origin-custom" />
                 <Swatch name="origin-robomous" className="bg-origin-robomous" />
@@ -201,25 +232,32 @@ export function Styleguide(): JSX.Element {
           <p className="text-xs text-muted-foreground">Meta — 0.75rem, muted</p>
         </Section>
 
-        <Section title="Buttons" description="Five variants, four sizes.">
+        <Section title="Buttons" description="Six variants, eight sizes.">
           <div className="flex flex-wrap items-center gap-2">
-            <Button variant="primary" data-testid="button-primary">
+            <Button variant="default" data-testid="button-primary">
               <Plus className="size-4" aria-hidden="true" />
               New project
             </Button>
-            <Button variant="secondary">Cancel</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="secondary">Secondary</Button>
             <Button variant="ghost">Ghost</Button>
             <Button variant="destructive">
               <Trash2 className="size-4" aria-hidden="true" />
               Delete
             </Button>
-            <Button variant="link">Learn more</Button>
+            <Button variant="link" className={inlineLink}>
+              Learn more
+            </Button>
             <Button disabled>Disabled</Button>
           </div>
           <div className="flex flex-wrap items-center gap-2">
+            <Button size="xs">Extra small</Button>
+            <Button size="sm">Small</Button>
+            <Button size="default">Default</Button>
+            <Button size="lg">Large</Button>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="primary" size="icon" aria-label="Select (V)">
+                <Button variant="default" size="icon" aria-label="Select (V)">
                   <MousePointer2 className="size-4" aria-hidden="true" />
                 </Button>
               </TooltipTrigger>
@@ -227,14 +265,28 @@ export function Styleguide(): JSX.Element {
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" aria-label="Box (B)">
+                <Button variant="ghost" size="icon-xs" aria-label="Zoom out">
+                  <Square className="size-4" aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right">Zoom out</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon-sm" aria-label="Box (B)">
                   <Square className="size-4" aria-hidden="true" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="right">Box (B)</TooltipContent>
             </Tooltip>
-            <Button size="sm">Small</Button>
-            <Button size="lg">Large</Button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon-lg" aria-label="Zoom in">
+                  <Square className="size-4" aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right">Zoom in</TooltipContent>
+            </Tooltip>
           </div>
         </Section>
 
@@ -270,95 +322,102 @@ export function Styleguide(): JSX.Element {
           title="Fields"
           description="Radix labels; every control carries Nova's own focus ring."
         >
-          <div className="grid max-w-3xl gap-4 md:grid-cols-2">
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="sg-name">Project name</Label>
-              <Input id="sg-name" defaultValue="highway-survey" />
-              <FieldHint>Unique per workspace, case-insensitively.</FieldHint>
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="sg-geometry">Geometry</Label>
-              <Select defaultValue="bbox">
-                <SelectTrigger id="sg-geometry">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="bbox">bbox</SelectItem>
-                  <SelectItem value="polygon">polygon</SelectItem>
-                  <SelectItem value="classification_tag">classification_tag</SelectItem>
-                </SelectContent>
-              </Select>
-              <FieldHint>A hint, under a field that needs one.</FieldHint>
-            </div>
-            {/*
-              The two-line option. Here because it is a primitive variant
-              rather than one screen's styling: an option that is an identifier
-              plus the facts about it stacks them, and the trigger shows the same
-              two lines the list does because Radix renders the selected item's
-              own text into it.
-            */}
-            <div className="flex flex-col gap-1.5 md:col-span-2">
-              <Label htmlFor="sg-model">Model</Label>
-              <Select defaultValue="facebook/sam2.1-hiera-base-plus">
-                <SelectTrigger id="sg-model">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem
-                    value="facebook/sam2.1-hiera-tiny"
-                    meta="311.9 MB · tiny — fastest, comfortable on a CPU"
-                  >
-                    facebook/sam2.1-hiera-tiny
-                  </SelectItem>
-                  <SelectItem
-                    value="facebook/sam2.1-hiera-base-plus"
-                    meta="647.1 MB · base-plus — the balanced default"
-                  >
-                    facebook/sam2.1-hiera-base-plus
-                  </SelectItem>
-                  <SelectItem
-                    value="facebook/sam2.1-hiera-large"
-                    meta="1.8 GB · large — the most accurate, wants a GPU"
-                  >
-                    facebook/sam2.1-hiera-large
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-              <FieldHint>
-                The id at the label role, what it costs beneath it. Nothing truncates.
-              </FieldHint>
-            </div>
-            <div className="flex flex-col gap-1.5 md:col-span-2">
-              <Label htmlFor="sg-notes">Description</Label>
-              <Textarea id="sg-notes" placeholder="What this dataset is for" />
-            </div>
-          </div>
+          <FieldSet className="max-w-3xl">
+            <FieldLegend>Dataset</FieldLegend>
+            <FieldGroup className="grid gap-4 md:grid-cols-2">
+              <Field>
+                <FieldLabel htmlFor="sg-name">Project name</FieldLabel>
+                <Input id="sg-name" defaultValue="highway-survey" />
+                <FieldDescription>Unique per workspace, case-insensitively.</FieldDescription>
+                <FieldError>Already taken — try “highway-survey-2”.</FieldError>
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="sg-geometry">Geometry</FieldLabel>
+                <Select defaultValue="bbox">
+                  <SelectTrigger id="sg-geometry">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="bbox">bbox</SelectItem>
+                    <SelectItem value="polygon">polygon</SelectItem>
+                    <SelectItem value="classification_tag">classification_tag</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FieldDescription>A hint, under a field that needs one.</FieldDescription>
+              </Field>
+              {/*
+                The two-line option, composed at the call site: an option that is
+                an identifier plus the facts about it stacks them, and the trigger
+                shows the same two lines the list does because Radix renders the
+                selected item's own children into it.
+              */}
+              <Field className="md:col-span-2">
+                <FieldLabel htmlFor="sg-model">Model</FieldLabel>
+                <Select defaultValue="facebook/sam2.1-hiera-base-plus">
+                  <SelectTrigger id="sg-model" className={twoLineTrigger}>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="facebook/sam2.1-hiera-tiny">
+                      <span className="flex flex-col items-start">
+                        <span>facebook/sam2.1-hiera-tiny</span>
+                        <span className="text-xs text-muted-foreground">
+                          311.9 MB · tiny — fastest, comfortable on a CPU
+                        </span>
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="facebook/sam2.1-hiera-base-plus">
+                      <span className="flex flex-col items-start">
+                        <span>facebook/sam2.1-hiera-base-plus</span>
+                        <span className="text-xs text-muted-foreground">
+                          647.1 MB · base-plus — the balanced default
+                        </span>
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="facebook/sam2.1-hiera-large">
+                      <span className="flex flex-col items-start">
+                        <span>facebook/sam2.1-hiera-large</span>
+                        <span className="text-xs text-muted-foreground">
+                          1.8 GB · large — the most accurate, wants a GPU
+                        </span>
+                      </span>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                <FieldDescription>
+                  The id at the label role, what it costs beneath it. Nothing truncates.
+                </FieldDescription>
+              </Field>
+              <Field className="md:col-span-2">
+                <FieldLabel htmlFor="sg-notes">Description</FieldLabel>
+                <Textarea id="sg-notes" placeholder="What this dataset is for" />
+              </Field>
+            </FieldGroup>
+          </FieldSet>
         </Section>
 
-        <Section title="Badges and status" description="The domain's states, as intents.">
-          <div className="flex flex-wrap items-center gap-2">
-            <Badge>draft</Badge>
-            <Badge variant="accent">in_annotation</Badge>
-            <Badge variant="success">completed</Badge>
-            <Badge variant="warning">stale</Badge>
-            <Badge variant="outline">outline</Badge>
-            <Badge variant="destructive">failed</Badge>
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <Badge variant="quiet">quiet — a fact, not a state</Badge>
+        <Section
+          title="Badges and status"
+          description="Status is a soft surface and readable ink on shadcn's geometry — no coloured stroke. Outline is the only visible border."
+        >
+          <BadgeRow theme="light" />
+          <div className="dark bg-background text-foreground rounded-lg p-3">
+            <BadgeRow theme="dark" />
           </div>
           <div className="max-w-md">
-            <p className="mb-1 text-xs text-muted-foreground">Ingest — 240 of 412</p>
-            <Progress value={58} aria-label="Ingest progress" />
+            <p className="mb-1 text-xs text-muted-foreground">
+              Ingest — 240 of 412. An amount completed, never a polarity.
+            </p>
+            <Progress value={58} {...progressAria(58)} aria-label="Ingest progress" />
           </div>
           <div className="max-w-md">
             <p className="mb-1 text-xs text-muted-foreground">
-              Annotation — 7 of 11 annotated (64%); the batch surfaces' variant
+              Annotation — 7 of 11 annotated (64%)
             </p>
             <Progress
               value={64}
               aria-label="Annotation progress"
-              variant="success"
+              {...progressAria(64)}
               className="h-2 border border-border"
             />
           </div>
@@ -388,7 +447,7 @@ export function Styleguide(): JSX.Element {
                     <TableRow key={batch.name}>
                       <TableCell className="font-medium">{batch.name}</TableCell>
                       <TableCell>
-                        <Badge variant={batch.state === "in_annotation" ? "accent" : "neutral"}>
+                        <Badge variant={batch.state === "in_annotation" ? "default" : "secondary"}>
                           {batch.state}
                         </Badge>
                       </TableCell>
@@ -468,7 +527,7 @@ export function Styleguide(): JSX.Element {
             title="Overview"
             meta="11 images · ingested Aug 7, 2026"
             actions={
-              <Button variant="secondary">
+              <Button variant="outline">
                 <Plus className="size-4" aria-hidden="true" />
                 Ingest
               </Button>
@@ -480,7 +539,28 @@ export function Styleguide(): JSX.Element {
           title="Overlays"
           description="Radix owns the focus trap, the Escape key and the scroll lock."
         >
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-col gap-3">
+            <Alert className="max-w-md">
+              <AlertTitle>Ingest queued</AlertTitle>
+              <AlertDescription>
+                412 assets are being processed. This can take a few minutes.
+              </AlertDescription>
+            </Alert>
+            <Alert variant="destructive" className="max-w-md">
+              <AlertTitle>Export failed</AlertTitle>
+              <AlertDescription>
+                The release manifest could not be written. Retry, or contact support if it keeps
+                happening.
+              </AlertDescription>
+              <AlertAction>
+                <Button variant="outline" size="sm">
+                  Retry
+                </Button>
+              </AlertAction>
+            </Alert>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
             <Dialog>
               <DialogTrigger asChild>
                 <Button variant="destructive" data-testid="open-dialog">
@@ -494,32 +574,50 @@ export function Styleguide(): JSX.Element {
                   releases. Blobs are never deleted.
                 </DialogDescription>
                 <DialogFooter>
-                  <Button variant="secondary">Cancel</Button>
+                  <Button variant="outline">Cancel</Button>
                   <Button variant="destructive">Delete</Button>
                 </DialogFooter>
               </DialogContent>
             </Dialog>
 
+            <SheetDemo />
+
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="secondary">Actions</Button>
+                <Button variant="outline">Actions</Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="start">
+              <DropdownMenuContent align="start" className={menuSurface}>
                 <DropdownMenuItem>Rename</DropdownMenuItem>
                 <DropdownMenuItem>Duplicate schema</DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem destructive>Delete</DropdownMenuItem>
+                <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
 
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon-sm" aria-label="What is a release?">
+                  <Info className="size-4" aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>A frozen, exportable snapshot of one schema version.</TooltipContent>
+            </Tooltip>
+
             <Button
-              variant="secondary"
+              variant="outline"
               data-testid="open-toast"
               onClick={() => toast("Release v0.3 published")}
             >
               Toast
             </Button>
           </div>
+
+          <div className="max-w-sm">
+            <p className="mb-1 text-xs text-muted-foreground">
+              Combobox — Base UI, filtered as you type.
+            </p>
+            <ComboboxDemo />
+          </div>
         </Section>
 
         <Section
@@ -531,7 +629,7 @@ export function Styleguide(): JSX.Element {
             <EmptyState
               title="No batches yet"
               description="Ingest images or a video to create the first one."
-              action={<Button variant="primary">Ingest</Button>}
+              action={<Button variant="default">Ingest</Button>}
             />
             <ErrorState
               code="SCHEMA_CHANGE_WOULD_ORPHAN"
@@ -613,7 +711,7 @@ export function Styleguide(): JSX.Element {
           </div>
         </Section>
       </div>
-      <Toaster />
+      <Toaster position="bottom-right" />
     </TooltipProvider>
   );
 }
@@ -638,6 +736,63 @@ function Section({
   );
 }
 
+/** `Badge`'s ten variants, each labelled with its own name — see `BADGE_OFFICIAL`/`BADGE_STATUS`. */
+function BadgeRow({ theme }: { readonly theme: "light" | "dark" }): JSX.Element {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {BADGE_OFFICIAL.map((variant) => (
+        <Badge key={variant} variant={variant}>
+          {variant}
+        </Badge>
+      ))}
+      {BADGE_STATUS.map((variant) => (
+        <Badge key={variant} variant={variant} data-testid={`badge-${variant}-${theme}`}>
+          {variant}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+/** A right-hand sheet, opened from an outline trigger — the panel `Dialog` never is. */
+function SheetDemo(): JSX.Element {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open sheet</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>drive-02</SheetTitle>
+          <SheetDescription>96 assets, none annotated yet.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <Button variant="outline">Close</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+/** Base UI's Combobox, filtered against `DEMO_CLASSES` — see its own docstring. */
+function ComboboxDemo(): JSX.Element {
+  return (
+    <Combobox items={DEMO_CLASSES}>
+      <ComboboxInput aria-label="Class" placeholder="Search classes" />
+      <ComboboxContent>
+        <ComboboxEmpty>No matches</ComboboxEmpty>
+        <ComboboxList>
+          {(item: string) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
 function Swatch({ name, className }: { readonly name: string; readonly className: string }): JSX.Element {
   return (
     <div className="flex flex-col gap-1">
diff --git a/frontend/ui-core/package.json b/frontend/ui-core/package.json
index 63d0350f..5e8c56a5 100644
--- a/frontend/ui-core/package.json
+++ b/frontend/ui-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@visionset/ui-core",
   "version": "0.0.1-beta.2",
-  "description": "VisionSet domain components, design tokens, and the generated typed API client. UI primitives: Radix behaviour under shadcn Nova styling, with Tabler icons.",
+  "description": "VisionSet domain components, design tokens, and the generated typed API client. UI primitives: Radix behaviour under shadcn Nova styling, with lucide icons.",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,8 @@
     "build": "tsc -p tsconfig.build.json",
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "lint": "eslint src && pnpm run typecheck"
+    "lint": "eslint src && pnpm run typecheck",
+    "shadcn:add": "bash ../../scripts/shadcn_add.sh"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -43,15 +44,8 @@
     "vitest": "^4.1.11"
   },
   "dependencies": {
+    "@base-ui/react": "^1.7.0",
     "@fontsource-variable/geist": "^5.3.0",
-    "@radix-ui/react-dialog": "^1.1.23",
-    "@radix-ui/react-dropdown-menu": "^2.1.24",
-    "@radix-ui/react-label": "^2.1.15",
-    "@radix-ui/react-progress": "^1.1.16",
-    "@radix-ui/react-select": "^2.3.7",
-    "@radix-ui/react-slot": "^1.3.3",
-    "@radix-ui/react-tabs": "^1.1.21",
-    "@radix-ui/react-tooltip": "^1.2.16",
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-virtual": "^3.14.10",
     "@visionset/annotator": "workspace:*",
@@ -59,6 +53,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.32.0",
     "openapi-fetch": "^0.17.0",
+    "radix-ui": "^1.6.7",
     "shadcn": "^4.19.0",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.6.0",
diff --git a/frontend/ui-core/shadcn/README.md b/frontend/ui-core/shadcn/README.md
new file mode 100644
index 00000000..30ebcd44
--- /dev/null
+++ b/frontend/ui-core/shadcn/README.md
@@ -0,0 +1,13 @@
+# shadcn canonical snapshots
+
+Each file here is exactly what `shadcn@4.19.0 add <name>` wrote for this
+package's `components.json` (radix-nova, preset b2iH), before the import
+relativisation `scripts/shadcn_relativize.mjs` applies. `tests/scripts/shadcn_canonical.test.mjs`
+holds every `src/primitives/<name>.tsx` to its snapshot plus added lines only.
+Regenerate with `pnpm --filter @visionset/ui-core shadcn:add <name>`; never edit by hand.
+
+The gate matches the snapshot as an **ordered subsequence**, so a green run is a
+strong signal rather than a proof: an edited line whose original text also appears
+further down — including on a line that was added — still satisfies the match, and
+the edit goes unreported. Read the diff when a primitive changes; the gate does not
+stand in for that.
diff --git a/frontend/ui-core/shadcn/alert.tsx b/frontend/ui-core/shadcn/alert.tsx
new file mode 100644
index 00000000..8a84d989
--- /dev/null
+++ b/frontend/ui-core/shadcn/alert.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/cn"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/frontend/ui-core/shadcn/badge.tsx b/frontend/ui-core/shadcn/badge.tsx
new file mode 100644
index 00000000..fe855569
--- /dev/null
+++ b/frontend/ui-core/shadcn/badge.tsx
@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/ui-core/shadcn/button.tsx b/frontend/ui-core/shadcn/button.tsx
new file mode 100644
index 00000000..239fbb6b
--- /dev/null
+++ b/frontend/ui-core/shadcn/button.tsx
@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/frontend/ui-core/shadcn/card.tsx b/frontend/ui-core/shadcn/card.tsx
new file mode 100644
index 00000000..94dbba32
--- /dev/null
+++ b/frontend/ui-core/shadcn/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/cn"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/frontend/ui-core/shadcn/combobox.tsx b/frontend/ui-core/shadcn/combobox.tsx
new file mode 100644
index 00000000..70a65e08
--- /dev/null
+++ b/frontend/ui-core/shadcn/combobox.tsx
@@ -0,0 +1,299 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "@/lib/cn"
+import { Button } from "@/primitives/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/primitives/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("dark group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/frontend/ui-core/shadcn/dialog.tsx b/frontend/ui-core/shadcn/dialog.tsx
new file mode 100644
index 00000000..f1b8ae66
--- /dev/null
+++ b/frontend/ui-core/shadcn/dialog.tsx
@@ -0,0 +1,166 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+import { Button } from "@/primitives/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/frontend/ui-core/shadcn/dropdown-menu.tsx b/frontend/ui-core/shadcn/dropdown-menu.tsx
new file mode 100644
index 00000000..98f8a975
--- /dev/null
+++ b/frontend/ui-core/shadcn/dropdown-menu.tsx
@@ -0,0 +1,267 @@
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("dark z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("dark z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/frontend/ui-core/shadcn/field.tsx b/frontend/ui-core/shadcn/field.tsx
new file mode 100644
index 00000000..af7e4441
--- /dev/null
+++ b/frontend/ui-core/shadcn/field.tsx
@@ -0,0 +1,236 @@
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/cn"
+import { Label } from "@/primitives/label"
+import { Separator } from "@/primitives/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/frontend/ui-core/shadcn/input-group.tsx b/frontend/ui-core/shadcn/input-group.tsx
new file mode 100644
index 00000000..f2315e0c
--- /dev/null
+++ b/frontend/ui-core/shadcn/input-group.tsx
@@ -0,0 +1,154 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/cn"
+import { Button } from "@/primitives/button"
+import { Input } from "@/primitives/input"
+import { Textarea } from "@/primitives/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/frontend/ui-core/shadcn/input.tsx b/frontend/ui-core/shadcn/input.tsx
new file mode 100644
index 00000000..f73a5796
--- /dev/null
+++ b/frontend/ui-core/shadcn/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/frontend/ui-core/shadcn/label.tsx b/frontend/ui-core/shadcn/label.tsx
new file mode 100644
index 00000000..9f9ea366
--- /dev/null
+++ b/frontend/ui-core/shadcn/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/frontend/ui-core/shadcn/progress.tsx b/frontend/ui-core/shadcn/progress.tsx
new file mode 100644
index 00000000..3b3735d2
--- /dev/null
+++ b/frontend/ui-core/shadcn/progress.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/frontend/ui-core/shadcn/select.tsx b/frontend/ui-core/shadcn/select.tsx
new file mode 100644
index 00000000..40638e77
--- /dev/null
+++ b/frontend/ui-core/shadcn/select.tsx
@@ -0,0 +1,190 @@
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("dark relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/frontend/ui-core/shadcn/separator.tsx b/frontend/ui-core/shadcn/separator.tsx
new file mode 100644
index 00000000..5fc60fc0
--- /dev/null
+++ b/frontend/ui-core/shadcn/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/frontend/ui-core/shadcn/sheet.tsx b/frontend/ui-core/shadcn/sheet.tsx
new file mode 100644
index 00000000..0bf86ece
--- /dev/null
+++ b/frontend/ui-core/shadcn/sheet.tsx
@@ -0,0 +1,145 @@
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+import { Button } from "@/primitives/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-3 right-3"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/frontend/ui-core/shadcn/skeleton.tsx b/frontend/ui-core/shadcn/skeleton.tsx
new file mode 100644
index 00000000..4e53f22b
--- /dev/null
+++ b/frontend/ui-core/shadcn/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/frontend/ui-core/shadcn/sonner.tsx b/frontend/ui-core/shadcn/sonner.tsx
new file mode 100644
index 00000000..9280ee52
--- /dev/null
+++ b/frontend/ui-core/shadcn/sonner.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/frontend/ui-core/shadcn/table.tsx b/frontend/ui-core/shadcn/table.tsx
new file mode 100644
index 00000000..70280a10
--- /dev/null
+++ b/frontend/ui-core/shadcn/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/cn"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/frontend/ui-core/shadcn/tabs.tsx b/frontend/ui-core/shadcn/tabs.tsx
new file mode 100644
index 00000000..4d4a2001
--- /dev/null
+++ b/frontend/ui-core/shadcn/tabs.tsx
@@ -0,0 +1,88 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/frontend/ui-core/shadcn/textarea.tsx b/frontend/ui-core/shadcn/textarea.tsx
new file mode 100644
index 00000000..b056e573
--- /dev/null
+++ b/frontend/ui-core/shadcn/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/frontend/ui-core/shadcn/tooltip.tsx b/frontend/ui-core/shadcn/tooltip.tsx
new file mode 100644
index 00000000..aef6c65c
--- /dev/null
+++ b/frontend/ui-core/shadcn/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/frontend/ui-core/src/annotator/AddClassDialog.tsx b/frontend/ui-core/src/annotator/AddClassDialog.tsx
index 934be458..7f6ad6f9 100644
--- a/frontend/ui-core/src/annotator/AddClassDialog.tsx
+++ b/frontend/ui-core/src/annotator/AddClassDialog.tsx
@@ -91,16 +91,18 @@ import { useEffect, useRef, useState, type JSX } from "react";
 import { asApiError } from "../data/errors";
 import { refusalProse } from "../data/refusals";
 import { classColor } from "../palette";
-import { Alert } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { Alert, AlertDescription, AlertTitle } from "../primitives/alert";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { Input, Label } from "../primitives/Input";
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
 import { formatGeometries } from "../data/geometryCategory";
 import { ClassFields } from "../patterns/ClassFields";
 import type {
@@ -552,14 +554,16 @@ export function AddClassDialog({
             without seeing this would publish classes they never typed.
           */}
           {resumedNames.length > 0 && (
-            <Alert title="Classes are already pending here" data-testid="resumed-draft">
+            <Alert data-testid="resumed-draft">
+              <AlertTitle>Classes are already pending here</AlertTitle>
+              <AlertDescription>
               {namesInProse(resumedNames)} {resumedNames.length === 1 ? "was" : "were"} banked in an
               earlier sitting and never published — this draft is shared, so that may not have been
               you. Keep working to fold {resumedNames.length === 1 ? "it" : "them"} into this
               version, or clear the slate.
               <div className="mt-2">
                 <Button
-                  variant="secondary"
+                  variant="outline"
                   data-testid="discard-resumed"
                   disabled={pending}
                   onClick={() => {
@@ -592,6 +596,7 @@ export function AddClassDialog({
                   {pending ? "Discarding…" : `Discard the pending ${resumedNames.length === 1 ? "class" : "classes"}`}
                 </Button>
               </div>
+              </AlertDescription>
             </Alert>
           )}
 
@@ -603,40 +608,38 @@ export function AddClassDialog({
           {session.length > 0 && (
             <ul className="flex flex-wrap gap-1.5" data-testid="session-classes" aria-label="Classes to publish">
               {session.map((entry) => (
-                <li
-                  key={entry.name}
-                  data-testid={`session-class-${entry.name}`}
-                  className="flex items-center gap-1.5 rounded-full border border-border bg-muted py-0.5 pl-2 pr-1 text-xs"
-                >
-                  <span
-                    aria-hidden="true"
-                    className="size-2 shrink-0 rounded-full"
-                    style={{
-                      background: classColor(
-                        { ...entry, color: entry.color ?? null, attributes: [] },
-                        entry.name,
-                      ),
-                    }}
-                  />
-                  {entry.name}
-                  <span className="text-muted-foreground">
-                    {formatGeometries(entry.geometries)}
-                  </span>
-                  <button
-                    type="button"
-                    aria-label={`Remove ${entry.name}`}
-                    data-testid={`session-remove-${entry.name}`}
-                    disabled={pending}
-                    className="rounded-full p-0.5 text-muted-foreground hover:bg-card hover:text-foreground disabled:cursor-not-allowed"
-                    onClick={() => {
-                      const banked = session.filter((held) => held.name !== entry.name);
-                      setSession(banked);
-                      onBank?.(banked);
-                    }}
-                  >
-                    <X className="size-3" aria-hidden="true" />
-                  </button>
-                </li>
+                <Badge asChild key={entry.name} variant="secondary" className="pr-1">
+                  <li data-testid={`session-class-${entry.name}`}>
+                    <span
+                      aria-hidden="true"
+                      className="size-2 shrink-0 rounded-full"
+                      style={{
+                        background: classColor(
+                          { ...entry, color: entry.color ?? null, attributes: [] },
+                          entry.name,
+                        ),
+                      }}
+                    />
+                    {entry.name}
+                    <span className="text-muted-foreground">
+                      {formatGeometries(entry.geometries)}
+                    </span>
+                    <button
+                      type="button"
+                      aria-label={`Remove ${entry.name}`}
+                      data-testid={`session-remove-${entry.name}`}
+                      disabled={pending}
+                      className="rounded-full p-0.5 text-muted-foreground hover:bg-card hover:text-foreground disabled:cursor-not-allowed"
+                      onClick={() => {
+                        const banked = session.filter((held) => held.name !== entry.name);
+                        setSession(banked);
+                        onBank?.(banked);
+                      }}
+                    >
+                      <X className="size-3" aria-hidden="true" />
+                    </button>
+                  </li>
+                </Badge>
               ))}
             </ul>
           )}
@@ -688,7 +691,9 @@ export function AddClassDialog({
             that before they act rather than from an error afterwards.
           */}
           {!canRepin && (
-            <Alert title="This batch will stay on its current version" data-testid="no-repin-notice">
+            <Alert data-testid="no-repin-notice">
+              <AlertTitle>This batch will stay on its current version</AlertTitle>
+              <AlertDescription>
               {/* The subject is the whole session, not the form field: by the time
                   somebody presses, the field is often empty and the classes are
                   banked — a notice saying “this class” would then name nothing at
@@ -697,6 +702,7 @@ export function AddClassDialog({
               {namesInProse(publishing.map((entry) => entry.name))} will not be available to
               draw with here. The version is still published to the project, and a correction
               batch approved from now on will pin to it.
+              </AlertDescription>
             </Alert>
           )}
 
@@ -710,27 +716,35 @@ export function AddClassDialog({
             twice in this one sitting, where there is nothing to offer.
           */}
           {existing !== undefined && widening.length > 0 && (
-            <Alert title={`“${existing.name}” already exists`} data-testid="widen-offer">
+            <Alert data-testid="widen-offer">
+              <AlertTitle>{`“${existing.name}” already exists`}</AlertTitle>
+              <AlertDescription>
               Version {active?.version} declares it as{" "}
               {formatGeometries(existing.geometries)}. Publishing adds{" "}
               {formatGeometries(widening)} to it, and leaves its colour and
               attributes alone.
+              </AlertDescription>
             </Alert>
           )}
 
           {taken && (
-            <Alert variant="destructive" title="That name is taken">
+            <Alert variant="destructive">
+              <AlertTitle>That name is taken</AlertTitle>
+              <AlertDescription>
               {/* Which of the two rules refused it, because the remedies differ —
                   and each names what would clear it, which is what lets the
                   primary below stay disabled without being a bare grey box. */}
               {inSession
                 ? `You have already added a class called “${name}” to this version. Rename one of them, or take the banked one back out.`
                 : `Version ${active?.version} already declares “${name}” as ${formatGeometries(existing?.geometries ?? [])}, and this form adds nothing to it. Tick a shape it does not have, or choose another name.`}
+              </AlertDescription>
             </Alert>
           )}
 
           {failure !== null && (
-            <Alert variant="destructive" title="Could not add this class" data-testid="add-class-error">
+            <Alert variant="destructive" data-testid="add-class-error">
+              <AlertTitle>Could not add this class</AlertTitle>
+              <AlertDescription>
               {refusalProse(error)}
               {/* The one refusal whose remedy is somewhere else. `repin` has no
                   flag for it on purpose: the pin did not move because somebody
@@ -743,6 +757,7 @@ export function AddClassDialog({
                   project’s Schema tab to see what changed.
                 </>
               )}
+              </AlertDescription>
             </Alert>
           )}
 
@@ -753,10 +768,13 @@ export function AddClassDialog({
             resort — the question is about *this* form, so it belongs in it.
           */}
           {discarding && (
-            <Alert variant="destructive" title="Discard the classes you added?" data-testid="discard-session">
+            <Alert variant="destructive" data-testid="discard-session">
+              <AlertTitle>Discard the classes you added?</AlertTitle>
+              <AlertDescription>
               {session.length} class{session.length === 1 ? "" : "es"} {session.length === 1 ? "is" : "are"}{" "}
               written and not published. Closing now discards {session.length === 1 ? "it" : "them"} from
               the shared draft — anyone else with this project open loses them too.
+              </AlertDescription>
             </Alert>
           )}
         </div>
@@ -772,7 +790,7 @@ export function AddClassDialog({
                 still waiting on the promise that closes it.
               */}
               <Button
-                variant="secondary"
+                variant="outline"
                 data-testid="keep-editing"
                 disabled={pending}
                 onClick={() => setDiscarding(false)}
@@ -814,7 +832,7 @@ export function AddClassDialog({
             </>
           ) : (
             <>
-              <Button variant="secondary" data-testid="add-class-cancel" onClick={requestClose} disabled={pending}>
+              <Button variant="outline" data-testid="add-class-cancel" onClick={requestClose} disabled={pending}>
                 Cancel
               </Button>
               {/*
@@ -825,7 +843,7 @@ export function AddClassDialog({
                 publish time.
               */}
               <Button
-                variant="secondary"
+                variant="outline"
                 data-testid="add-another"
                 disabled={pending || !readyForm}
                 onClick={addAnother}
@@ -837,7 +855,7 @@ export function AddClassDialog({
                 </kbd>
               </Button>
               <Button
-                variant="primary"
+                variant="default"
                 data-testid="add-class-submit"
                 // Disabled only for states a label cannot explain: nothing to
                 // publish, a duplicate in the form, a schema that has not loaded,
diff --git a/frontend/ui-core/src/annotator/AnnotationPage.tsx b/frontend/ui-core/src/annotator/AnnotationPage.tsx
index 1bb34d4f..d8fd60ea 100644
--- a/frontend/ui-core/src/annotator/AnnotationPage.tsx
+++ b/frontend/ui-core/src/annotator/AnnotationPage.tsx
@@ -155,19 +155,20 @@ import {
 import type { OpenMember } from "../generated/api.js";
 import { asApiError } from "../data/errors";
 import { refusalProse } from "../data/refusals";
+import { inlineLink } from "../lib/button";
+import { cn } from "../lib/cn";
+import { menuSurface } from "../lib/menu";
 import { EmptyState, ErrorState, LoadingState } from "../patterns/AsyncStates";
-import { Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../primitives/Menu";
+} from "../primitives/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/tooltip";
 import { AnnotatorPanel } from "./AnnotatorPanel";
 import { CanvasReassign } from "./CanvasReassign";
 import { EditorNotice, EditorNotices } from "./EditorNotice";
@@ -234,7 +235,7 @@ import {
   useSchemaComparison,
   useSchemaDraft,
 } from "../screens/queries";
-import { toast } from "../primitives/Feedback";
+import { toast } from "sonner";
 
 /**
  * The frame-level *review* actions, in the order they take their slot.
@@ -484,7 +485,7 @@ function TooNarrow({
           : {
               action: (
                 <Button
-                  variant="secondary"
+                  variant="outline"
                   data-testid="too-narrow-gallery"
                   onClick={() => onOpenGallery(destination.project_id, destination.id)}
                 >
@@ -2090,7 +2091,7 @@ function Workspace({
             */}
             {!frameVerbs ? null : skipped ? (
               <Button
-                variant="secondary"
+                variant="outline"
                 size="sm"
                 className="min-w-27"
                 data-testid="unskip"
@@ -2102,7 +2103,7 @@ function Workspace({
               </Button>
             ) : (
               <Button
-                variant="secondary"
+                variant="outline"
                 size="sm"
                 className="min-w-27"
                 data-testid="skip"
@@ -2174,7 +2175,7 @@ function Workspace({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    variant="primary"
+                    variant="default"
                     size="sm"
                     className={
                       finishWithheld === null ? "min-w-36" : "min-w-36 cursor-not-allowed opacity-40"
@@ -2262,7 +2263,7 @@ function Workspace({
                 in the one place that cannot go stale.
               */
               <Button
-                variant="primary"
+                variant="default"
                 size="sm"
                 className="min-w-36"
                 data-testid="save-and-next"
@@ -2285,12 +2286,6 @@ function Workspace({
               Adjacency is what says they are alternatives; a ghost at the far end
               said the quieter thing, that saving without moving is a convenience.
 
-              **Filled `success`, which is the recorded exception to one filled
-              button per view** (`DESIGN.md`). Two filled controls compete when
-              they are two answers to *what do I do next*; these are two halves of
-              one answer, and colour is what separates their intent where a second
-              near-black would simply contend with the primary.
-
               **No hotkey chip.** `Chip` is a muted box on a bordered ground,
               which inverts into a smudge inside a filled control — the same
               finding that keeps one off the flow verb. The chord is unchanged and
@@ -2310,7 +2305,7 @@ function Workspace({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    variant="success"
+                    variant="outline"
                     size="sm"
                     className="hidden xl:inline-flex"
                     data-testid="save-and-stay"
@@ -2367,7 +2362,7 @@ function Workspace({
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  variant="secondary"
+                  variant="outline"
                   size="sm"
                   className="hidden lg:inline-flex"
                   data-testid={reviewAction.testId}
@@ -2410,7 +2405,7 @@ function Workspace({
                 <MoreHorizontal className="size-4" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
+            <DropdownMenuContent align="end" className={menuSurface}>
               {/* `Save and stay`, reabsorbed — `xl:hidden` is the exact inverse of
                   the button's `hidden xl:inline-flex`, so the control exists once
                   at every width. Gated on `frameVerbs` for the same reason the
@@ -2515,7 +2510,7 @@ function Workspace({
             declares({ allowed_actions: batchActions }, BATCH_ACTION.createCorrection) && (
               <Button
                 variant="link"
-                className="h-auto p-0 text-xs"
+                className={cn(inlineLink, "text-xs")}
                 data-testid="banner-create-correction"
                 onClick={onOpenGallery}
               >
@@ -2935,11 +2930,11 @@ function Workspace({
  *
  * ## A disclosure, not a Popover
  *
- * `Combobox` declined Radix's Popover for a reason that applies here verbatim: it
- * owns focus on open and restores it on close, and the annotator reads the
- * keyboard off its own root — so a press that landed anywhere but back on the
- * canvas would leave every chord dead until the user clicked twice. What this
- * needs is a button, a panel, an outside press and Escape.
+ * Radix's Popover owns focus on open and restores it on close, and the
+ * annotator reads the keyboard off its own root — so a press that landed
+ * anywhere but back on the canvas would leave every chord dead until the user
+ * clicked twice. What this needs is a button, a panel, an outside press and
+ * Escape.
  */
 function PinBadge({
   projectId,
@@ -2986,21 +2981,23 @@ function PinBadge({
 
   return (
     <div ref={root} className="relative">
-      <button
-        type="button"
-        data-testid="pinned-schema"
-        aria-expanded={open}
-        aria-label={`Schema v${pinned}, pinned by this batch`}
-        className="rounded-full border border-border px-2 py-0.5 font-mono text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-        onClick={() => onOpenChange(!open)}
-      >
-        v{pinned}
-        {/* The dot is a *tell*, not the answer — it appears only once the panel
-            has been opened and learned there is a gap, because a badge that
-            fetched on arrival to decide whether to show a dot would be the very
-            request this whole surface is arranged not to make. */}
-        {behind && <span className="ml-1 inline-block size-1.5 rounded-full bg-primary align-middle" aria-hidden="true" />}
-      </button>
+      <Badge asChild variant="outline" className="font-mono">
+        <button
+          type="button"
+          data-testid="pinned-schema"
+          aria-expanded={open}
+          aria-label={`Schema v${pinned}, pinned by this batch`}
+          className="hover:bg-muted hover:text-foreground"
+          onClick={() => onOpenChange(!open)}
+        >
+          v{pinned}
+          {/* The dot is a *tell*, not the answer — it appears only once the panel
+              has been opened and learned there is a gap, because a badge that
+              fetched on arrival to decide whether to show a dot would be the very
+              request this whole surface is arranged not to make. */}
+          {behind && <span className="ml-1 inline-block size-1.5 rounded-full bg-primary align-middle" aria-hidden="true" />}
+        </button>
+      </Badge>
 
       {open && (
         <div
@@ -3170,19 +3167,15 @@ function SaveState({
   }
   if (dirty) {
     return (
-      <Badge variant="accent" data-testid="save-state">
+      <Badge variant="default" data-testid="save-state">
         unsaved
       </Badge>
     );
   }
   return (
-    // `success`, which is the indicator v1 wanted a hardcoded `text-green-600` for
-    // and `DESIGN.md` carried as its one sanctioned exception. The token exists,
-    // so the exception is retired rather than inherited. The tick still
-    // carries the meaning on its own — state is never colour alone.
-    <span className="flex items-center gap-1 text-xs text-success" data-testid="save-state">
-      <Check className="size-3.5" aria-hidden="true" />
+    <Badge variant="success" data-testid="save-state">
+      <Check aria-hidden="true" />
       Saved
-    </span>
+    </Badge>
   );
 }
diff --git a/frontend/ui-core/src/annotator/AnnotatorPanel.tsx b/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
index f562f194..cc1ff12d 100644
--- a/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
+++ b/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
@@ -87,15 +87,11 @@ import { useEffect, useRef, useState, type JSX, type RefObject } from "react";
 
 import { geometryLabel } from "../data/geometryCategory";
 import { classColor } from "../palette";
-import { Button } from "../primitives/Button";
-import { Input } from "../primitives/Input";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../primitives/Menu";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import { DropdownMenu, DropdownMenuTrigger } from "../primitives/dropdown-menu";
+import { Input } from "../primitives/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/tooltip";
 import { ClassRegion } from "./ClassRegion";
 import { ReassignMenu } from "./ReassignMenu";
 import { cn } from "../lib/cn";
@@ -406,35 +402,39 @@ function TagRegion({
           {tagClasses.map((declared) => {
             const on = tagged.has(declared.name);
             return (
-              <button
+              <Badge
                 key={declared.name}
-                type="button"
-                data-testid={`tag-chip-${declared.name}`}
-                data-active={on ? "true" : "false"}
-                aria-pressed={on}
-                disabled={readOnly}
-                onClick={() => press(declared)}
+                asChild
+                variant="outline"
                 className={cn(
-                  "flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs",
                   on
                     ? "border-primary bg-primary/10 text-foreground"
                     : "border-border bg-card text-muted-foreground",
                 )}
               >
-                <span
-                  aria-hidden="true"
-                  className="size-2 shrink-0 rounded-full"
-                  style={{ background: classColor(declared, declared.name) }}
-                />
-                <span className="truncate">{declared.name}</span>
-                {on ? (
-                  <Check className="size-3 text-primary" aria-hidden="true" />
-                ) : (
-                  <kbd className="rounded-sm border border-border px-1 font-mono text-xs">
-                    {hotkeyForClass(schema, declared.name) ?? "—"}
-                  </kbd>
-                )}
-              </button>
+                <button
+                  type="button"
+                  data-testid={`tag-chip-${declared.name}`}
+                  data-active={on ? "true" : "false"}
+                  aria-pressed={on}
+                  disabled={readOnly}
+                  onClick={() => press(declared)}
+                >
+                  <span
+                    aria-hidden="true"
+                    className="size-2 shrink-0 rounded-full"
+                    style={{ background: classColor(declared, declared.name) }}
+                  />
+                  <span className="truncate">{declared.name}</span>
+                  {on ? (
+                    <Check className="size-3 text-primary" aria-hidden="true" />
+                  ) : (
+                    <kbd className="rounded-sm border border-border px-1 font-mono text-xs">
+                      {hotkeyForClass(schema, declared.name) ?? "—"}
+                    </kbd>
+                  )}
+                </button>
+              </Badge>
             );
           })}
         </div>
diff --git a/frontend/ui-core/src/annotator/CanvasReassign.tsx b/frontend/ui-core/src/annotator/CanvasReassign.tsx
index 9e7f8150..d39bf493 100644
--- a/frontend/ui-core/src/annotator/CanvasReassign.tsx
+++ b/frontend/ui-core/src/annotator/CanvasReassign.tsx
@@ -57,8 +57,8 @@ import type { AnnotatorStore, Geometry, Viewport } from "@visionset/annotator";
 import { Tag } from "lucide-react";
 import type { JSX } from "react";
 
-import { Button } from "../primitives/Button";
-import { DropdownMenu, DropdownMenuTrigger } from "../primitives/Menu";
+import { Button } from "../primitives/button";
+import { DropdownMenu, DropdownMenuTrigger } from "../primitives/dropdown-menu";
 import { ReassignMenu } from "./ReassignMenu";
 
 /**
@@ -124,7 +124,7 @@ export function CanvasReassign({
       >
         <DropdownMenuTrigger asChild>
           <Button
-            variant="secondary"
+            variant="outline"
             size="icon-xs"
             className="shadow-sm"
             aria-label={`Reassign the selected ${subject.label_class}`}
diff --git a/frontend/ui-core/src/annotator/ClassRegion.tsx b/frontend/ui-core/src/annotator/ClassRegion.tsx
index cabd93d0..21bc2b06 100644
--- a/frontend/ui-core/src/annotator/ClassRegion.tsx
+++ b/frontend/ui-core/src/annotator/ClassRegion.tsx
@@ -63,8 +63,8 @@ import { useState, type JSX, type RefObject } from "react";
 
 import { formatGeometries, geometryLabel } from "../data/geometryCategory";
 import { classColor } from "../palette";
-import { Button } from "../primitives/Button";
-import { Input } from "../primitives/Input";
+import { Button } from "../primitives/button";
+import { Input } from "../primitives/input";
 import { CLASS_ROW_PX, ClassListRow } from "../patterns/DataDisplay";
 
 /** The fewest rows' worth of height the region ever takes. */
diff --git a/frontend/ui-core/src/annotator/FrameGallery.tsx b/frontend/ui-core/src/annotator/FrameGallery.tsx
index 5059bb1a..96d461f7 100644
--- a/frontend/ui-core/src/annotator/FrameGallery.tsx
+++ b/frontend/ui-core/src/annotator/FrameGallery.tsx
@@ -50,7 +50,7 @@ import { useEffect, useRef, useState, type JSX, type KeyboardEvent } from "react
 
 
 import { AssetThumbnail } from "../screens/AssetThumbnail";
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../primitives/Dialog";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../primitives/dialog";
 import { ThumbnailGrid } from "../patterns/DataDisplay";
 import {
   inSegment,
diff --git a/frontend/ui-core/src/annotator/ReassignMenu.tsx b/frontend/ui-core/src/annotator/ReassignMenu.tsx
index bca1d259..cfc95ed0 100644
--- a/frontend/ui-core/src/annotator/ReassignMenu.tsx
+++ b/frontend/ui-core/src/annotator/ReassignMenu.tsx
@@ -51,8 +51,10 @@ import { Check } from "lucide-react";
 import type { JSX, KeyboardEvent } from "react";
 
 import { formatGeometries } from "../data/geometryCategory";
+import { cn } from "../lib/cn";
+import { menuSurface } from "../lib/menu";
 import { classColor } from "../palette";
-import { DropdownMenuContent, DropdownMenuItem } from "../primitives/Menu";
+import { DropdownMenuContent, DropdownMenuItem } from "../primitives/dropdown-menu";
 
 export interface ReassignMenuProps {
   /** The object whose class is being changed. Its geometry decides what fits. */
@@ -119,7 +121,7 @@ export function ReassignMenu({
   }
 
   return (
-    <DropdownMenuContent align={align} className="max-w-64" onKeyDown={byHotkey}>
+    <DropdownMenuContent align={align} className={cn(menuSurface, "max-w-64")} onKeyDown={byHotkey}>
       {schema.classes.map((declared) => {
         const ok = fits(declared);
         const current = declared.name === annotation.label_class;
diff --git a/frontend/ui-core/src/annotator/ShortcutSheet.tsx b/frontend/ui-core/src/annotator/ShortcutSheet.tsx
index 8b82b813..c9eacb0a 100644
--- a/frontend/ui-core/src/annotator/ShortcutSheet.tsx
+++ b/frontend/ui-core/src/annotator/ShortcutSheet.tsx
@@ -67,7 +67,7 @@ import {
 } from "@visionset/annotator";
 import type { JSX } from "react";
 
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../primitives/Dialog";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../primitives/dialog";
 
 /**
  * What each action kind means, in words.
diff --git a/frontend/ui-core/src/annotator/SuggestPanel.tsx b/frontend/ui-core/src/annotator/SuggestPanel.tsx
index d2023455..72dbe1bc 100644
--- a/frontend/ui-core/src/annotator/SuggestPanel.tsx
+++ b/frontend/ui-core/src/annotator/SuggestPanel.tsx
@@ -67,14 +67,16 @@ import { Check, Loader2, Sparkles, TriangleAlert, X } from "lucide-react";
 import type { JSX, ReactNode } from "react";
 
 import { EditorNotice } from "./EditorNotice";
-import { Button } from "../primitives/Button";
+import { cn } from "../lib/cn";
+import { twoLineTrigger } from "../lib/select";
+import { Button } from "../primitives/button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
+} from "../primitives/select";
 import type { Connection, SuggestBlocker } from "../data/inferenceQueries";
 
 export interface SuggestPanelProps {
@@ -273,7 +275,7 @@ export function SuggestPanel({
             control and leaves the explanation — never a dead button. */}
         {copy.action !== null && onConfigure !== undefined && (
           <Button
-            variant="secondary"
+            variant="outline"
             size="sm"
             className="mt-1 self-start"
             data-testid="suggest-configure"
@@ -377,7 +379,7 @@ export function SuggestPanel({
           Click again to refine it — alt-click to take a part away.
         </p>
         <div className="mt-1 flex gap-2">
-          <Button variant="primary" size="sm" data-testid="suggest-accept" onClick={onAccept}>
+          <Button variant="default" size="sm" data-testid="suggest-accept" onClick={onAccept}>
             <Check className="size-4" aria-hidden="true" />
             Accept
             <Chip>↵</Chip>
@@ -462,7 +464,11 @@ function Through({
   }
   return (
     <Select value={active.id} onValueChange={onChoose}>
-      <SelectTrigger className="mt-1" data-testid="suggest-connection-select" aria-label="Model">
+      <SelectTrigger
+        className={cn(twoLineTrigger, "mt-1")}
+        data-testid="suggest-connection-select"
+        aria-label="Model"
+      >
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
@@ -470,8 +476,11 @@ function Through({
           // The two-line option: the name people gave it, then the model it
           // actually names. Two connections onto the same weights at different
           // precisions are otherwise told apart by nothing on screen.
-          <SelectItem key={one.id} value={one.id} meta={one.model_id}>
-            {one.name}
+          <SelectItem key={one.id} value={one.id}>
+            <span className="flex flex-col items-start">
+              <span>{one.name}</span>
+              <span className="text-xs text-muted-foreground">{one.model_id}</span>
+            </span>
           </SelectItem>
         ))}
       </SelectContent>
diff --git a/frontend/ui-core/src/annotator/ToolPalette.tsx b/frontend/ui-core/src/annotator/ToolPalette.tsx
index e0f36e79..65057af1 100644
--- a/frontend/ui-core/src/annotator/ToolPalette.tsx
+++ b/frontend/ui-core/src/annotator/ToolPalette.tsx
@@ -99,8 +99,8 @@ import { CircleHelp, Hand, Plus, Redo2, Sparkles, Undo2 } from "lucide-react";
 import { GeometryIcon } from "./GeometryIcon";
 import type { JSX, MouseEvent, ReactNode } from "react";
 
-import { Button } from "../primitives/Button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/Menu";
+import { Button } from "../primitives/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/tooltip";
 
 /**
  * Why a declared geometry has no tool yet, keyed by the geometry.
@@ -538,7 +538,7 @@ function PaletteButton({
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          variant={active ? "primary" : "ghost"}
+          variant={active ? "default" : "ghost"}
           size="icon"
           aria-label={label}
           aria-pressed={active}
diff --git a/frontend/ui-core/src/annotator/ZoomWidget.tsx b/frontend/ui-core/src/annotator/ZoomWidget.tsx
index 410236fc..02bff94d 100644
--- a/frontend/ui-core/src/annotator/ZoomWidget.tsx
+++ b/frontend/ui-core/src/annotator/ZoomWidget.tsx
@@ -28,8 +28,8 @@
 import { Maximize2, Minimize2, Minus, Plus, Scan } from "lucide-react";
 import { useEffect, useState, type JSX } from "react";
 
-import { Button } from "../primitives/Button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/Menu";
+import { Button } from "../primitives/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/tooltip";
 
 export interface ZoomWidgetProps {
   /** The live scale, or `null` before the stage has measured itself. */
diff --git a/frontend/ui-core/src/annotator/addClassProvenance.test.tsx b/frontend/ui-core/src/annotator/addClassProvenance.test.tsx
index 2440db8d..8976fec3 100644
--- a/frontend/ui-core/src/annotator/addClassProvenance.test.tsx
+++ b/frontend/ui-core/src/annotator/addClassProvenance.test.tsx
@@ -28,10 +28,11 @@ import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { JSX, ReactNode } from "react";
 
 import { ApiProvider } from "../data/ApiProvider";
-import { Toaster } from "../primitives/Feedback";
-import { TooltipProvider } from "../primitives/Menu";
+import { Toaster } from "../primitives/sonner";
+import { TooltipProvider } from "../primitives/tooltip";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
 
 const API = "http://visionset.test";
@@ -164,6 +165,9 @@ beforeEach(() => {
     addEventListener: () => {},
     removeEventListener: () => {},
   }));
+  // The tool strip this test opens mounts its tooltips immediately. See
+  // `testing/resizeObserver.ts`.
+  stubResizeObserver();
   vi.stubGlobal("fetch", async (request: Request) => {
     const path = new URL(request.url).pathname;
 
diff --git a/frontend/ui-core/src/annotator/drawingClass.test.tsx b/frontend/ui-core/src/annotator/drawingClass.test.tsx
index 0e0dde76..78e19971 100644
--- a/frontend/ui-core/src/annotator/drawingClass.test.tsx
+++ b/frontend/ui-core/src/annotator/drawingClass.test.tsx
@@ -23,9 +23,10 @@ import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { JSX, ReactNode } from "react";
 
 import { ApiProvider } from "../data/ApiProvider";
-import { TooltipProvider } from "../primitives/Menu";
+import { TooltipProvider } from "../primitives/tooltip";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
 
 const API = "http://visionset.test";
@@ -105,6 +106,9 @@ function answer(path: string): unknown {
 
 beforeEach(() => {
   writeToken("a-token");
+  // This file clicks through the tool strip and the top bar, both rows of
+  // Tooltip triggers. See `testing/resizeObserver.ts`.
+  stubResizeObserver();
   // A viewport at least the annotator's floor, or no store and no top bar mount
   // at all — see `viewportFloor.test.tsx` for why that gate exists.
   vi.stubGlobal("matchMedia", (query: string) => ({
diff --git a/frontend/ui-core/src/annotator/editorNotice.test.tsx b/frontend/ui-core/src/annotator/editorNotice.test.tsx
index bc22dac0..84452d5b 100644
--- a/frontend/ui-core/src/annotator/editorNotice.test.tsx
+++ b/frontend/ui-core/src/annotator/editorNotice.test.tsx
@@ -25,7 +25,8 @@ import type { JSX, ReactNode } from "react";
 import { ApiProvider } from "../data/ApiProvider";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
-import { TooltipProvider } from "../primitives/Menu";
+import { TooltipProvider } from "../primitives/tooltip";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
 
 const API = "http://visionset.test";
@@ -117,6 +118,9 @@ beforeEach(() => {
   batchState = "in_annotation";
   refuseWith = null;
   writeToken("a-token");
+  // The tool strip this file clicks through is a row of Tooltip triggers, and it
+  // is where this absence was first reported. See `testing/resizeObserver.ts`.
+  stubResizeObserver();
   vi.stubGlobal("matchMedia", (query: string) => ({
     media: query,
     matches: true,
diff --git a/frontend/ui-core/src/annotator/frameGallery.test.tsx b/frontend/ui-core/src/annotator/frameGallery.test.tsx
index e6caa839..25ba5b95 100644
--- a/frontend/ui-core/src/annotator/frameGallery.test.tsx
+++ b/frontend/ui-core/src/annotator/frameGallery.test.tsx
@@ -29,8 +29,10 @@ import type { JSX, ReactNode } from "react";
 import { ApiProvider } from "../data/ApiProvider";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
-import { TooltipProvider } from "../primitives/Menu";
+import { TooltipProvider } from "../primitives/tooltip";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
+import { TONE_BORDER, TONE_FILL } from "../patterns/statusTone.js";
 
 const API = "http://visionset.test";
 const PROJECT = "11111111-1111-4111-8111-111111111111";
@@ -133,6 +135,9 @@ function answer(path: string): unknown {
 beforeEach(() => {
   sent.length = 0;
   writeToken("a-token");
+  // The top bar this file clicks through is a row of Tooltip triggers. See
+  // `testing/resizeObserver.ts`.
+  stubResizeObserver();
   vi.stubGlobal("matchMedia", (query: string) => ({
     media: query,
     matches: true,
@@ -240,8 +245,8 @@ describe("what the gallery shows", () => {
     }
     // The drawn class, not only the declared tone — an attribute agreeing with a
     // map the dot no longer reads is a test of the map alone.
-    expect(within(modal).getByTestId(`frame-${assetId(1)}`).innerHTML).toContain("bg-success");
-    expect(within(modal).getByTestId(`frame-${assetId(2)}`).innerHTML).toContain("border-warning");
+    expect(within(modal).getByTestId(`frame-${assetId(1)}`).innerHTML).toContain(TONE_FILL.success);
+    expect(within(modal).getByTestId(`frame-${assetId(2)}`).innerHTML).toContain(TONE_BORDER.warning);
   });
 
   it("marks the frame that is on screen", async () => {
@@ -290,7 +295,7 @@ describe("what the gallery shows", () => {
           ? "frame"
           : (button.getAttribute("data-testid")?.startsWith("frame-segment-") ?? false)
             ? "filter"
-            : (button.getAttribute("aria-label") ?? "other"),
+            : (button.getAttribute("aria-label") ?? button.textContent?.trim() ?? "other"),
       );
     expect(new Set(kinds)).toEqual(new Set(["frame", "filter", "Close"]));
   });
diff --git a/frontend/ui-core/src/annotator/panel.test.tsx b/frontend/ui-core/src/annotator/panel.test.tsx
index e601d37d..44ff4164 100644
--- a/frontend/ui-core/src/annotator/panel.test.tsx
+++ b/frontend/ui-core/src/annotator/panel.test.tsx
@@ -14,11 +14,12 @@
 import { AnnotatorStore, documentFromWire, selectOnly } from "@visionset/annotator";
 import { render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { JSX } from "react";
 
 import { AnnotatorPanel } from "./AnnotatorPanel";
-import { TooltipProvider } from "../primitives/Menu";
+import { TooltipProvider } from "../primitives/tooltip";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 
 const SCHEMA = {
   project_id: "11111111-1111-4111-8111-111111111111",
@@ -90,6 +91,16 @@ function mount(
   );
 }
 
+// The provenance badge on an accepted row is a Tooltip trigger. See
+// `testing/resizeObserver.ts`.
+beforeEach(() => {
+  stubResizeObserver();
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
 describe("the three regions the panel is now", () => {
   it("stacks them without tabs, so all three subjects are on screen at once", () => {
     // One view rather than Objects | Labels tabs.
diff --git a/frontend/ui-core/src/annotator/pinBadge.test.tsx b/frontend/ui-core/src/annotator/pinBadge.test.tsx
index f263a056..25b30446 100644
--- a/frontend/ui-core/src/annotator/pinBadge.test.tsx
+++ b/frontend/ui-core/src/annotator/pinBadge.test.tsx
@@ -21,9 +21,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { JSX, ReactNode } from "react";
 
 import { ApiProvider } from "../data/ApiProvider";
-import { TooltipProvider } from "../primitives/Menu";
+import { TooltipProvider } from "../primitives/tooltip";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
 
 const API = "http://visionset.test";
@@ -129,6 +130,9 @@ beforeEach(() => {
   asked.length = 0;
   activeVersion = 3;
   writeToken("a-token");
+  // The badge this file opens sits in the top bar, among Tooltip triggers. See
+  // `testing/resizeObserver.ts`.
+  stubResizeObserver();
   // A viewport at least the annotator's floor, or no store and no top bar mount
   // at all — see `viewportFloor.test.tsx` for why that gate exists.
   vi.stubGlobal("matchMedia", (query: string) => ({
diff --git a/frontend/ui-core/src/annotator/suggestFlow.test.tsx b/frontend/ui-core/src/annotator/suggestFlow.test.tsx
index 5ba63ec6..82d71d87 100644
--- a/frontend/ui-core/src/annotator/suggestFlow.test.tsx
+++ b/frontend/ui-core/src/annotator/suggestFlow.test.tsx
@@ -27,7 +27,8 @@ import { ApiProvider } from "../data/ApiProvider";
 import { clearPrefs, writePref } from "../data/prefs";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
-import { TooltipProvider } from "../primitives/Menu";
+import { TooltipProvider } from "../primitives/tooltip";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
 
 const API = "http://visionset.test";
@@ -245,6 +246,9 @@ beforeEach(() => {
     addEventListener: () => {},
     removeEventListener: () => {},
   }));
+  // The tool palette's tooltips open on the same hover `userEvent.click`
+  // produces. See `testing/resizeObserver.ts`.
+  stubResizeObserver();
   vi.stubGlobal("fetch", async (request: Request) => {
     const path = new URL(request.url).pathname;
     if (request.method !== "GET") {
diff --git a/frontend/ui-core/src/annotator/toolPalette.test.tsx b/frontend/ui-core/src/annotator/toolPalette.test.tsx
index 0cc74968..c26a955f 100644
--- a/frontend/ui-core/src/annotator/toolPalette.test.tsx
+++ b/frontend/ui-core/src/annotator/toolPalette.test.tsx
@@ -9,12 +9,23 @@
 
 import { fireEvent, render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { JSX } from "react";
 
-import { TooltipProvider } from "../primitives/Menu";
+import { TooltipProvider } from "../primitives/tooltip";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { ToolPalette, toolChoices } from "./ToolPalette";
 
+// Every button below is a Tooltip trigger, and `userEvent.click` opens the
+// tooltip on its way to the press. See `testing/resizeObserver.ts`.
+beforeEach(() => {
+  stubResizeObserver();
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
 /**
  * Four classes covering all four cases `drawableGeometry` distinguishes: two bbox
  * classes (which must collapse to one tool), a polygon, a tag, and a geometry the
diff --git a/frontend/ui-core/src/annotator/topBar.test.tsx b/frontend/ui-core/src/annotator/topBar.test.tsx
index 2abb23f7..ff44477b 100644
--- a/frontend/ui-core/src/annotator/topBar.test.tsx
+++ b/frontend/ui-core/src/annotator/topBar.test.tsx
@@ -23,8 +23,10 @@ import type { JSX, ReactNode } from "react";
 import { ApiProvider } from "../data/ApiProvider";
 import { writeToken } from "../data/session";
 import { AnnotationPage, REVIEW_ACTIONS } from "./AnnotationPage";
-import { TooltipProvider } from "../primitives/Menu";
+import { TooltipProvider } from "../primitives/tooltip";
+import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
+import { TONE_BORDER, TONE_FILL } from "../patterns/statusTone.js";
 
 const API = "http://visionset.test";
 const PROJECT = "11111111-1111-4111-8111-111111111111";
@@ -208,21 +210,9 @@ beforeEach(() => {
     addEventListener: () => {},
     removeEventListener: () => {},
   }));
-  // Nova's `TooltipContent` renders a Radix `Arrow`, and the popper measures
-  // it through `@radix-ui/react-use-size`, which reaches for `ResizeObserver`
-  // unconditionally on mount. jsdom has none, and this file is the one that
-  // actually hovers a trigger long enough for the tooltip to open — every
-  // other suite renders a `Tooltip` closed. Scoped to this file rather than
-  // the shared setup: `gallery.test.tsx` asserts jsdom's real absence of
-  // `ResizeObserver` on purpose, and a global stub would falsify that.
-  vi.stubGlobal(
-    "ResizeObserver",
-    class {
-      observe(): void {}
-      unobserve(): void {}
-      disconnect(): void {}
-    },
-  );
+  // This file hovers a trigger long enough for the tooltip to open. See
+  // `testing/resizeObserver.ts`, which carries the reason it is scoped.
+  stubResizeObserver();
   vi.stubGlobal("fetch", async (request: Request) => {
     const path = new URL(request.url).pathname;
     if (request.method !== "GET") {
@@ -453,7 +443,7 @@ describe("the single review action", () => {
 /**
  * The filled slot: exactly one weight on the bar.
  *
- * `variant="primary"` is the one weight on the bar, so "exactly one filled
+ * `variant="default"` is the one weight on the bar, so "exactly one filled
  * control" is a claim about `bg-primary` rather than about a `data-` attribute
  * nobody styles from — asserting a marker the design does not read would pass
  * over a bar with two coral buttons on it.
@@ -745,21 +735,19 @@ describe("the flow verb", () => {
 });
 
 /**
- * The forward pair: two filled controls, and the exception that lets them be two.
+ * The forward pair: one filled control and an outline second half beside it.
  *
- * `DESIGN.md`'s *one filled button per view* is a count and is tested as one, so
- * the recorded exception has to be a count too — otherwise "two fills are allowed
- * here" degrades into "any number of fills are allowed here", which is the rule
- * with nothing left of it. The sweep below is `filled()`'s twin over `bg-success`,
- * and both are asserted as whole sets rather than as memberships.
+ * `DESIGN.md`'s *one filled button per view* is a count and is tested as one,
+ * and the outline half is why it stays a count of one — the pair is two
+ * answers to *what do I do next* only in the filled sense; colour never had
+ * to separate them. The sweep below is `filled()`'s twin over `data-variant`,
+ * asserted as a whole set rather than as a membership.
  */
 describe("the forward-action pair", () => {
-  /** Every `success`-filled control on the bar. `filled()`'s counterpart. */
-  function successFilled(): HTMLElement[] {
-    // `classList.contains`, for `filled()`'s reason: the substring form also
-    // matches `hover:bg-success/90`.
-    return [...document.querySelectorAll<HTMLElement>("header button")].filter((button) =>
-      button.classList.contains("bg-success"),
+  /** Any bar control still carrying the retired `success` variant. */
+  function successVariantButtons(): HTMLElement[] {
+    return [...document.querySelectorAll<HTMLElement>("header button")].filter(
+      (button) => button.getAttribute("data-variant") === "success",
     );
   }
 
@@ -777,19 +765,18 @@ describe("the forward-action pair", () => {
     expect(order).toEqual(["skip", "save-and-next", "save-and-stay"]);
   });
 
-  it("leaves exactly one primary fill and exactly one success fill", async () => {
+  it("leaves exactly one primary fill, with Save and stay outlined beside it", async () => {
     assetCount = 2;
     await open();
 
     expect(filled().map((button) => button.getAttribute("data-testid"))).toEqual(["save-and-next"]);
-    expect(successFilled().map((button) => button.getAttribute("data-testid"))).toEqual([
-      "save-and-stay",
-    ]);
+    expect(screen.getByTestId("save-and-stay").getAttribute("data-variant")).toBe("outline");
+    expect(successVariantButtons()).toEqual([]);
   });
 
   it("keeps the pair a pair on the last frame, where Finish job holds the primary", async () => {
     // The filled slot is contended by arithmetic rather than by a declaration,
-    // and the success half is not part of that contention: you can still save
+    // and the outline half is not part of that contention: you can still save
     // without leaving the frame you are finishing on.
     assetCount = 1;
     jobSettled = true;
@@ -797,9 +784,7 @@ describe("the forward-action pair", () => {
     await open();
 
     expect(filled().map((button) => button.getAttribute("data-testid"))).toEqual(["finish-job"]);
-    expect(successFilled().map((button) => button.getAttribute("data-testid"))).toEqual([
-      "save-and-stay",
-    ]);
+    expect(screen.getByTestId("save-and-stay").getAttribute("data-variant")).toBe("outline");
   });
 
   it("leaves with the frame verbs once the job is closed, in both its places", async () => {
@@ -814,7 +799,7 @@ describe("the forward-action pair", () => {
 
     expect(screen.queryByTestId("save-and-stay")).toBeNull();
     expect(screen.queryByTestId("menu-save")).toBeNull();
-    expect(successFilled()).toEqual([]);
+    expect(successVariantButtons()).toEqual([]);
   });
 });
 
@@ -850,7 +835,7 @@ describe("the frame's state, in prose", () => {
     const state = screen.getByTestId("asset-progress");
     expect(state.textContent).toContain("accepted");
     expect(state.getAttribute("data-tone")).toBe("success");
-    expect(state.innerHTML).toContain("bg-success");
+    expect(state.innerHTML).toContain(TONE_FILL.success);
   });
 
   it("draws a frame awaiting review with the warning token (#391)", async () => {
@@ -861,7 +846,7 @@ describe("the frame's state, in prose", () => {
     // `PROGRESS_LABEL`'s wording, not the wire's `review_pending`.
     expect(state.textContent).toContain("in review");
     expect(state.getAttribute("data-tone")).toBe("warning");
-    expect(state.innerHTML).toContain("border-warning");
+    expect(state.innerHTML).toContain(TONE_BORDER.warning);
   });
 
   it("sits beside the save state, so the two read as one sentence", async () => {
diff --git a/frontend/ui-core/src/data/TokenGate.tsx b/frontend/ui-core/src/data/TokenGate.tsx
index fa9727b7..3447fe9d 100644
--- a/frontend/ui-core/src/data/TokenGate.tsx
+++ b/frontend/ui-core/src/data/TokenGate.tsx
@@ -49,9 +49,11 @@ import { Key } from "lucide-react";
 import { useEffect, useState, type FormEvent, type JSX, type ReactNode } from "react";
 
 import { createApiClient } from "../client";
-import { Button } from "../primitives/Button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/Card";
-import { FieldError, FieldHint, Input, Label } from "../primitives/Input";
+import { Button } from "../primitives/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldDescription, FieldError } from "../primitives/field";
 import { useApiSession } from "./ApiProvider";
 import { refusalProse } from "./refusals";
 import { asApiError, NETWORK_ERROR, unwrap } from "./errors";
@@ -122,7 +124,7 @@ export function TokenForm(): JSX.Element {
     <div className="flex min-h-screen items-center justify-center p-6">
       <Card className="w-full max-w-md">
         <CardHeader>
-          <CardTitle className="flex items-center gap-2">
+          <CardTitle role="heading" aria-level={2} className="flex items-center gap-2">
             <Key className="size-4 text-primary" aria-hidden="true" />
             Connect to a workspace
           </CardTitle>
@@ -146,15 +148,15 @@ export function TokenForm(): JSX.Element {
                 onChange={(event) => setValue(event.target.value)}
                 placeholder="paste the secret printed by visionset token create"
               />
-              <FieldHint>
+              <FieldDescription>
                 Mint one with <code className="font-mono">visionset token create --name ui</code>.
                 It is shown exactly once. Kept for this browser tab only.
-              </FieldHint>
+              </FieldDescription>
               {failure !== null && <FieldError data-testid="token-error">{failure}</FieldError>}
             </div>
             <Button
               type="submit"
-              variant="primary"
+              variant="default"
               data-testid="token-submit"
               disabled={checking || value.trim() === ""}
             >
diff --git a/frontend/ui-core/src/data/dataShell.test.tsx b/frontend/ui-core/src/data/dataShell.test.tsx
index dc940e5c..e25ab2e2 100644
--- a/frontend/ui-core/src/data/dataShell.test.tsx
+++ b/frontend/ui-core/src/data/dataShell.test.tsx
@@ -259,7 +259,12 @@ describe("the token form", () => {
       </ApiProvider>,
     );
 
-    await userEvent.type(await screen.findByTestId("token-input"), "wrong");
+    await screen.findByTestId("token-input");
+    expect(
+      screen.getByRole("heading", { level: 2, name: /connect to a workspace/i }),
+    ).not.toBeNull();
+
+    await userEvent.type(screen.getByTestId("token-input"), "wrong");
     await userEvent.click(screen.getByTestId("token-submit"));
 
     await waitFor(() => expect(screen.queryByTestId("token-error")).not.toBeNull());
diff --git a/frontend/ui-core/src/harness.test.tsx b/frontend/ui-core/src/harness.test.tsx
index 2820d9fa..0f411e0a 100644
--- a/frontend/ui-core/src/harness.test.tsx
+++ b/frontend/ui-core/src/harness.test.tsx
@@ -17,7 +17,7 @@
 import { render } from "@testing-library/react";
 import { expect, it, vi } from "vitest";
 
-import { Dialog, DialogContent, DialogTitle } from "./primitives/Dialog";
+import { Dialog, DialogContent, DialogTitle } from "./primitives/dialog";
 
 const unmountFocusReturned = vi.fn();
 
diff --git a/frontend/ui-core/src/index.ts b/frontend/ui-core/src/index.ts
index b13fe75f..3e95639b 100644
--- a/frontend/ui-core/src/index.ts
+++ b/frontend/ui-core/src/index.ts
@@ -40,10 +40,14 @@ export { cssVar, DARK_THEME, EXTENSIONS, LIGHT_THEME, THEME } from "./tokens.js"
 export { CLASS_FILL_OPACITY, classColor } from "./palette.js";
 export type { LabelClass } from "./palette.js";
 
+export { inlineLink } from "./lib/button.js";
 export { cn } from "./lib/cn.js";
+export { menuSurface } from "./lib/menu.js";
+export { twoLineTrigger } from "./lib/select.js";
+export { progressAria } from "./lib/progress.js";
 
-// Primitives — Radix behaviour under shadcn Nova styling, iconed with Tabler.
-export { Button, buttonVariants, type ButtonProps } from "./primitives/Button.js";
+// Primitives — Radix behaviour under shadcn Nova styling, iconed with lucide.
+export { Button, buttonVariants } from "./primitives/button.js";
 export {
   Card,
   CardAction,
@@ -52,67 +56,86 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "./primitives/Card.js";
-export { FieldError, FieldHint, Input, Label, Textarea } from "./primitives/Input.js";
-export { Combobox, type ComboboxFooter, type ComboboxProps } from "./primitives/Combobox.js";
-export {
-  Alert,
-  Badge,
-  badgeVariants,
-  type AlertProps,
-  type BadgeProps,
-} from "./primitives/Badge.js";
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetTitle,
-  SheetTrigger,
-  type SheetContentProps,
-} from "./primitives/Dialog.js";
-// `tabsListVariants` stays unexported: `TabsList`'s own `variant` prop is the
-// public surface, and the `cva` behind it is `Tabs.tsx`'s implementation detail.
-export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "./primitives/Select.js";
+} from "./primitives/card.js";
+export { Input } from "./primitives/input.js";
+export { Textarea } from "./primitives/textarea.js";
+export { Label } from "./primitives/label.js";
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "./primitives/field.js";
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "./primitives/input-group.js";
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "./primitives/combobox.js";
+export { Badge, badgeVariants } from "./primitives/badge.js";
+export { Alert, AlertAction, AlertDescription, AlertTitle } from "./primitives/alert.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./primitives/tabs.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
 export {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./primitives/Menu.js";
-export { Progress, Skeleton, Toaster, toast } from "./primitives/Feedback.js";
+} from "./primitives/dropdown-menu.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
+export { Progress } from "./primitives/progress.js";
+export { Skeleton } from "./primitives/skeleton.js";
+export { Toaster } from "./primitives/sonner.js";
+export { toast } from "sonner";
 export {
   Table,
   TableBody,
+  TableCaption,
   TableCell,
-  TableEmpty,
+  TableFooter,
   TableHead,
   TableHeader,
   TableRow,
-} from "./primitives/Table.js";
+} from "./primitives/table.js";
 
 // The three states every async surface owes.
 export {
diff --git a/frontend/ui-core/src/lib/button.ts b/frontend/ui-core/src/lib/button.ts
new file mode 100644
index 00000000..912cf9e2
--- /dev/null
+++ b/frontend/ui-core/src/lib/button.ts
@@ -0,0 +1,4 @@
+// A link button is inline prose, not a boxed control: the canonical variant keeps
+// the button's height and padding, so the sites that sit inside a sentence or a
+// table cell hand them back.
+export const inlineLink = "h-auto p-0";
diff --git a/frontend/ui-core/src/lib/menu.ts b/frontend/ui-core/src/lib/menu.ts
new file mode 100644
index 00000000..a67ac46d
--- /dev/null
+++ b/frontend/ui-core/src/lib/menu.ts
@@ -0,0 +1,16 @@
+// What every `DropdownMenuContent` call site adds to the canonical surface, in
+// one constant because both halves are the same rule — a menu that behaves like
+// a menu (DESIGN.md, Motion).
+//
+// `data-closed:animate-none!`: a menu surface leaves on the frame it is
+// dismissed. While Radix runs an exit animation the dismissable layer stays
+// mounted, and a press that should open the next menu is swallowed as the
+// dismissal of this one.
+//
+// `w-auto`: a menu sizes to its items, not to its trigger. Canonical carries
+// `w-(--radix-dropdown-menu-trigger-width) min-w-32`, which pins the surface to
+// the trigger — behind an icon-sized button that is the 128px floor, and every
+// item longer than that wraps (the row actions on ModelsScreen, the Annotate
+// picker). `min-w-32` survives as the floor it was meant to be, because
+// tailwind-merge replaces only the `w-*` in the same utility group.
+export const menuSurface = "data-closed:animate-none! w-auto";
diff --git a/frontend/ui-core/src/lib/progress.ts b/frontend/ui-core/src/lib/progress.ts
new file mode 100644
index 00000000..16e95d78
--- /dev/null
+++ b/frontend/ui-core/src/lib/progress.ts
@@ -0,0 +1,6 @@
+// Canonical `Progress` reads `value` only to size the indicator and never
+// forwards it to Radix's `Root`, so the number a screen reader would announce
+// is otherwise never rendered at all — a caller that needs it says so again here.
+export function progressAria(value: number): { readonly "aria-valuenow": number } {
+  return { "aria-valuenow": value };
+}
diff --git a/frontend/ui-core/src/lib/select.ts b/frontend/ui-core/src/lib/select.ts
new file mode 100644
index 00000000..cc90b6ba
--- /dev/null
+++ b/frontend/ui-core/src/lib/select.ts
@@ -0,0 +1,4 @@
+// A two-line option needs the closed trigger to grow and to stop clamping its
+// value; both overrides name canonical's own variants so the merge replaces them.
+export const twoLineTrigger =
+  "data-[size=default]:h-auto min-h-8 *:data-[slot=select-value]:line-clamp-none";
diff --git a/frontend/ui-core/src/patterns/AsyncStates.tsx b/frontend/ui-core/src/patterns/AsyncStates.tsx
index 6c85bfac..18e32b78 100644
--- a/frontend/ui-core/src/patterns/AsyncStates.tsx
+++ b/frontend/ui-core/src/patterns/AsyncStates.tsx
@@ -21,9 +21,9 @@ import { Inbox, TriangleAlert } from "lucide-react";
 import type { JSX, ReactNode } from "react";
 
 import { cn } from "../lib/cn";
-import { Alert } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
-import { Skeleton } from "../primitives/Feedback";
+import { Alert, AlertDescription, AlertTitle } from "../primitives/alert";
+import { Button } from "../primitives/button";
+import { Skeleton } from "../primitives/skeleton";
 
 export interface LoadingStateProps {
   /** How many placeholder rows. Match the shape being waited for. */
@@ -122,26 +122,25 @@ export function ErrorState({
   ];
 
   return (
-    <Alert
-      variant="destructive"
-      title={
+    <Alert variant="destructive" className={className}>
+      <AlertTitle>
         <span className="flex items-center gap-2">
           <TriangleAlert className="size-4 shrink-0" aria-hidden="true" />
           {message}
         </span>
-      }
-      className={className}
-    >
+      </AlertTitle>
+      <AlertDescription>
       {meta.length > 0 && (
         <p className="font-mono text-xs" data-testid="error-code">
           {meta.join(" · ")}
         </p>
       )}
       {onRetry !== undefined && (
-        <Button variant="secondary" size="sm" className="mt-3" onClick={onRetry}>
+        <Button type="button" variant="outline" size="sm" className="mt-3" onClick={onRetry}>
           {retryLabel}
         </Button>
       )}
+      </AlertDescription>
     </Alert>
   );
 }
diff --git a/frontend/ui-core/src/patterns/BackLink.tsx b/frontend/ui-core/src/patterns/BackLink.tsx
index 1eafdbeb..748c0dce 100644
--- a/frontend/ui-core/src/patterns/BackLink.tsx
+++ b/frontend/ui-core/src/patterns/BackLink.tsx
@@ -20,7 +20,7 @@
 import { ArrowLeft } from "lucide-react";
 import type { JSX } from "react";
 
-import { Button } from "../primitives/Button";
+import { Button } from "../primitives/button";
 
 export interface BackLinkProps {
   /** The parent, named: "Batches", a project's name. */
diff --git a/frontend/ui-core/src/patterns/ClassFields.tsx b/frontend/ui-core/src/patterns/ClassFields.tsx
index 9d857649..0fe2f8ad 100644
--- a/frontend/ui-core/src/patterns/ClassFields.tsx
+++ b/frontend/ui-core/src/patterns/ClassFields.tsx
@@ -24,15 +24,17 @@ import type { JSX } from "react";
 
 import { geometryLabel, groupGeometries } from "../data/geometryCategory";
 import { classColor, hexColor } from "../palette";
-import { Button } from "../primitives/Button";
-import { FieldHint, Input, Label } from "../primitives/Input";
+import { Button } from "../primitives/button";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldDescription } from "../primitives/field";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
+} from "../primitives/select";
 import type { AttributeBody, GeometryType, LabelClassBody } from "../screens/queries";
 
 /**
@@ -184,9 +186,9 @@ export function ClassFields({
               </div>
             ))}
           </div>
-          <FieldHint>
+          <FieldDescription>
             {describeGeometries(declared.geometries)}
-          </FieldHint>
+          </FieldDescription>
         </fieldset>
       </div>
 
diff --git a/frontend/ui-core/src/patterns/DataDisplay.tsx b/frontend/ui-core/src/patterns/DataDisplay.tsx
index e0133644..eb3e0763 100644
--- a/frontend/ui-core/src/patterns/DataDisplay.tsx
+++ b/frontend/ui-core/src/patterns/DataDisplay.tsx
@@ -14,7 +14,7 @@
  * - **`EmptyState`** is in `patterns/AsyncStates.tsx`, and is already icon +
  *   title + description + one action — the spec, down to the "one primary
  *   action, two is a decision" comment.
- * - **Chip** is `primitives/Badge.tsx`. It already carries the tinted-fill and
+ * - **Chip** is `primitives/badge.tsx`. It already carries the tinted-fill and
  *   neutral-outline variants the header chips want.
  *
  * A second spelling of either would be the failure the "one spelling" rule
diff --git a/frontend/ui-core/src/patterns/ErrorBoundary.tsx b/frontend/ui-core/src/patterns/ErrorBoundary.tsx
index 44971e31..ea340b1a 100644
--- a/frontend/ui-core/src/patterns/ErrorBoundary.tsx
+++ b/frontend/ui-core/src/patterns/ErrorBoundary.tsx
@@ -41,7 +41,7 @@
 import { Component, type ErrorInfo, type ReactNode } from "react";
 
 import { refusalProse } from "../data/refusals.js";
-import { Button } from "../primitives/Button.js";
+import { Button } from "../primitives/button.js";
 import { EmptyState } from "./AsyncStates.js";
 
 export interface ErrorBoundaryProps {
@@ -94,11 +94,11 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
                 module-level failure, and it is the honest fallback when the
                 first button does nothing.
               */}
-              <Button variant="primary" data-testid="error-boundary-retry" onClick={this.reset}>
+              <Button variant="default" data-testid="error-boundary-retry" onClick={this.reset}>
                 Try again
               </Button>
               <Button
-                variant="secondary"
+                variant="outline"
                 data-testid="error-boundary-reload"
                 onClick={() => window.location.reload()}
               >
diff --git a/frontend/ui-core/src/patterns/ExportTargetSelect.tsx b/frontend/ui-core/src/patterns/ExportTargetSelect.tsx
index 1b052418..beeae6d2 100644
--- a/frontend/ui-core/src/patterns/ExportTargetSelect.tsx
+++ b/frontend/ui-core/src/patterns/ExportTargetSelect.tsx
@@ -10,12 +10,14 @@
  *
  * Each option's second line is what the target takes: the tasks it accepts for a
  * model, and, for a self-named format with no task vocabulary, the geometries it
- * carries. `SelectItem`'s `meta` puts the same two lines on the closed control.
+ * carries. Composed straight into `SelectItem`'s children — `twoLineTrigger`
+ * is what keeps the same two lines readable on the closed control.
  */
 
 import type { JSX } from "react";
 
 import { GEOMETRY_LABELS } from "../data/geometryCategory";
+import { twoLineTrigger } from "../lib/select";
 import {
   Select,
   SelectContent,
@@ -24,7 +26,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
+} from "../primitives/select";
 import type { ExportTarget } from "../screens/queries";
 
 export interface ExportTargetFamily {
@@ -96,18 +98,28 @@ export function ExportTargetSelect({
 }: ExportTargetSelectProps): JSX.Element {
   return (
     <Select value={value} onValueChange={onValueChange}>
-      <SelectTrigger id={id} data-testid={testId}>
+      <SelectTrigger id={id} data-testid={testId} className={twoLineTrigger}>
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>
         {groupExportTargets(targets).map((group) => (
           <SelectGroup key={group.heading}>
             <SelectLabel>{group.heading}</SelectLabel>
-            {group.targets.map((one) => (
-              <SelectItem key={one.name} value={one.name} meta={exportTargetMeta(one)}>
-                {one.label}
-              </SelectItem>
-            ))}
+            {group.targets.map((one) => {
+              const meta = exportTargetMeta(one);
+              return (
+                <SelectItem key={one.name} value={one.name}>
+                  {meta === undefined ? (
+                    one.label
+                  ) : (
+                    <span className="flex flex-col items-start">
+                      <span>{one.label}</span>
+                      <span className="text-xs text-muted-foreground">{meta}</span>
+                    </span>
+                  )}
+                </SelectItem>
+              );
+            })}
           </SelectGroup>
         ))}
       </SelectContent>
diff --git a/frontend/ui-core/src/patterns/ProjectEyebrow.tsx b/frontend/ui-core/src/patterns/ProjectEyebrow.tsx
index 856949ec..4b581ae6 100644
--- a/frontend/ui-core/src/patterns/ProjectEyebrow.tsx
+++ b/frontend/ui-core/src/patterns/ProjectEyebrow.tsx
@@ -8,7 +8,7 @@
 
 import type { JSX } from "react";
 
-import { Badge } from "../primitives/Badge";
+import { Badge } from "../primitives/badge";
 
 export interface ProjectEyebrowProps {
   /** The project's name, or the empty string while it is in flight. */
diff --git a/frontend/ui-core/src/patterns/ProjectNav.tsx b/frontend/ui-core/src/patterns/ProjectNav.tsx
index 8150ceca..5e689bac 100644
--- a/frontend/ui-core/src/patterns/ProjectNav.tsx
+++ b/frontend/ui-core/src/patterns/ProjectNav.tsx
@@ -50,15 +50,16 @@ import { ChevronDown, Database, Grid3x3, Layers, MoreHorizontal, Network, Pencil
 import { cva } from "class-variance-authority";
 import type { JSX, MouseEvent, ReactNode } from "react";
 
-import { Button } from "../primitives/Button";
+import { menuSurface } from "../lib/menu";
+import { Button } from "../primitives/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "../primitives/Menu";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/Tabs";
+} from "../primitives/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs";
 
 /**
  * The four sections of a project, in the order work happens in: what a project
@@ -196,8 +197,10 @@ function Column(props: ProjectNavProps): JSX.Element {
 /**
  * The strip: the filled control and the overflow on a row, the sections as a
  * full-width tab bar under it, the content in the panel beneath. A Radix `Tabs`
- * rather than a second list of links, so the panel is labelled by its tab and the
- * gaps between the three are the primitive's own.
+ * rather than a second list of links, so the panel is labelled by its tab; the
+ * row gaps are the primitive's own `gap-2`, except the last one, where this
+ * pattern (not `tabs.tsx`) adds a second `gap-2` so content under a `line` bar
+ * keeps the wider 16px rhythm navigation calls for.
  */
 function Strip(props: ProjectNavProps): JSX.Element {
   const { sections, active, onNavigate, children } = props;
@@ -219,7 +222,7 @@ function Strip(props: ProjectNavProps): JSX.Element {
         <Overflow {...props} />
       </div>
       <div className="min-w-0 overflow-x-auto pb-1.5 -mb-1.5">
-        <TabsList variant="line">
+        <TabsList variant="line" className="w-full justify-start border-b">
           {sections.map((section) => {
             const { label, icon: Icon } = SECTION_LABELS[section];
             return (
@@ -231,7 +234,9 @@ function Strip(props: ProjectNavProps): JSX.Element {
           })}
         </TabsList>
       </div>
-      <TabsContent value={active ?? ""}>{children}</TabsContent>
+      <TabsContent value={active ?? ""} className="mt-2">
+        {children}
+      </TabsContent>
     </Tabs>
   );
 }
@@ -252,7 +257,7 @@ function Cta({ annotate, onIngest, contentOwnsTheAction = false, layout }: Proje
   if (onIngest === undefined) return null;
   return (
     <Button
-      variant={contentOwnsTheAction ? "secondary" : "primary"}
+      variant={contentOwnsTheAction ? "outline" : "default"}
       data-testid="go-ingest"
       className={wide}
       onClick={onIngest}
@@ -290,7 +295,7 @@ function AnnotateAction({
   const [only] = targets;
   if (targets.length === 1 && only !== undefined) {
     return (
-      <Button variant="primary" data-testid="go-annotate" className={className} onClick={() => go(only)}>
+      <Button variant="default" data-testid="go-annotate" className={className} onClick={() => go(only)}>
         <Pencil className="size-4" aria-hidden="true" />
         Annotate
       </Button>
@@ -301,13 +306,13 @@ function AnnotateAction({
       <DropdownMenuTrigger asChild>
         {/* Same testid and variant as the jumping form: one control with two
             shapes, and the chevron is what tells them apart. */}
-        <Button variant="primary" data-testid="go-annotate" className={className}>
+        <Button variant="default" data-testid="go-annotate" className={className}>
           <Pencil className="size-4" aria-hidden="true" />
           Annotate
           <ChevronDown className="size-4" aria-hidden="true" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start">
+      <DropdownMenuContent align="start" className={menuSurface}>
         {targets.map((batch) => (
           <DropdownMenuItem
             key={batch.id}
@@ -336,7 +341,7 @@ function Overflow({ onRename, onDelete }: ProjectNavProps): JSX.Element | null {
           <MoreHorizontal className="size-4" aria-hidden="true" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start">
+      <DropdownMenuContent align="start" className={menuSurface}>
         {onRename !== undefined && (
           <DropdownMenuItem data-testid="rename-project" onSelect={onRename}>
             <Pencil className="size-4" aria-hidden="true" />
@@ -345,7 +350,7 @@ function Overflow({ onRename, onDelete }: ProjectNavProps): JSX.Element | null {
         )}
         {onRename !== undefined && onDelete !== undefined && <DropdownMenuSeparator />}
         {onDelete !== undefined && (
-          <DropdownMenuItem destructive data-testid="delete-project" onSelect={onDelete}>
+          <DropdownMenuItem variant="destructive" data-testid="delete-project" onSelect={onDelete}>
             <Trash2 className="size-4" aria-hidden="true" />
             Delete
           </DropdownMenuItem>
diff --git a/frontend/ui-core/src/patterns/RecipeEditor.tsx b/frontend/ui-core/src/patterns/RecipeEditor.tsx
index 7f151da0..8317a3f8 100644
--- a/frontend/ui-core/src/patterns/RecipeEditor.tsx
+++ b/frontend/ui-core/src/patterns/RecipeEditor.tsx
@@ -22,8 +22,10 @@ import { GEOMETRY_LABELS, GEOMETRY_PLURALS } from "../data/geometryCategory";
 import { refusalProse } from "../data/refusals";
 import { cn } from "../lib/cn";
 import { formatCount } from "../lib/format";
-import { Button } from "../primitives/Button";
-import { FieldError, FieldHint, Input, Label } from "../primitives/Input";
+import { Button } from "../primitives/button";
+import { FieldError, FieldDescription } from "../primitives/field";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
 import type { ExportTarget } from "../screens/queries";
 import {
   AMOUNT_MAX,
@@ -126,10 +128,10 @@ export function RecipeEditor({
           placeholder="yolo-640"
           className="max-w-xs"
         />
-        <FieldHint>
+        <FieldDescription>
           Lowercase letters, digits, dots, hyphens and underscores; unique in this project. This is
           what an export names.
-        </FieldHint>
+        </FieldDescription>
       </div>
 
       <ol className="flex flex-col">
@@ -151,17 +153,17 @@ export function RecipeEditor({
               />
               {target !== undefined && (
                 <>
-                  <FieldHint data-testid="recipe-target-meta">{targetSubtitle(target)}</FieldHint>
-                  <FieldHint data-testid="recipe-target-carries">
+                  <FieldDescription data-testid="recipe-target-meta">{targetSubtitle(target)}</FieldDescription>
+                  <FieldDescription data-testid="recipe-target-carries">
                     {targetCarries(target, classCount)}
-                  </FieldHint>
+                  </FieldDescription>
                 </>
               )}
               {target === undefined && (
-                <FieldHint>
+                <FieldDescription>
                   Optional: a recipe applies to any export. Choosing a model preselects its
                   recommended size and strategy.
-                </FieldHint>
+                </FieldDescription>
               )}
             </div>
           )}
@@ -341,10 +343,10 @@ export function RecipeEditor({
         <span className="mr-auto text-xs text-muted-foreground" data-testid="recipe-footer-note">
           {footerNote}
         </span>
-        <Button variant="secondary" data-testid="recipe-discard" disabled={!dirty || saving} onClick={onDiscard}>
+        <Button variant="outline" data-testid="recipe-discard" disabled={!dirty || saving} onClick={onDiscard}>
           Discard
         </Button>
-        <Button variant="primary" data-testid="recipe-save" disabled={!canSave} onClick={onSave}>
+        <Button data-testid="recipe-save" disabled={!canSave} onClick={onSave}>
           {saving ? "Saving…" : "Save recipe"}
         </Button>
       </div>
diff --git a/frontend/ui-core/src/patterns/RecipeList.tsx b/frontend/ui-core/src/patterns/RecipeList.tsx
index 3d83fa95..9d839a17 100644
--- a/frontend/ui-core/src/patterns/RecipeList.tsx
+++ b/frontend/ui-core/src/patterns/RecipeList.tsx
@@ -17,8 +17,8 @@ import { Plus, Trash2 } from "lucide-react";
 import type { JSX } from "react";
 
 import { cn } from "../lib/cn";
-import { Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
 import { describeRecipeSpec, type RecipeSpec } from "../screens/recipeDraft";
 
 export interface RecipeListItem {
@@ -51,7 +51,7 @@ export function RecipeList({
     <section className={cn("flex flex-col gap-3", className)} data-testid="recipe-list">
       <div className="flex items-center justify-between gap-2">
         <h2 className="text-sm font-semibold">Recipes</h2>
-        <Button variant="secondary" size="sm" data-testid="recipe-new" onClick={onNew}>
+        <Button variant="outline" size="sm" data-testid="recipe-new" onClick={onNew}>
           <Plus aria-hidden="true" />
           New
         </Button>
diff --git a/frontend/ui-core/src/patterns/projectNav.test.tsx b/frontend/ui-core/src/patterns/projectNav.test.tsx
index 75cdeeb1..b7517d24 100644
--- a/frontend/ui-core/src/patterns/projectNav.test.tsx
+++ b/frontend/ui-core/src/patterns/projectNav.test.tsx
@@ -35,9 +35,9 @@ function props(overrides: Partial<ProjectNavProps> = {}): ProjectNavProps {
   };
 }
 
-/** The filled controls on screen: Nova's default `Button` carries `data-variant="primary"`. */
+/** The filled controls on screen: Nova's default `Button` carries `data-variant="default"`. */
 function filled(): HTMLElement[] {
-  return Array.from(document.querySelectorAll<HTMLElement>('[data-slot="button"][data-variant="primary"]'));
+  return Array.from(document.querySelectorAll<HTMLElement>('[data-slot="button"][data-variant="default"]'));
 }
 
 describe("ProjectNav", () => {
@@ -104,7 +104,7 @@ describe("ProjectNav", () => {
   it("steps Ingest back when the content owns the page's filled control", () => {
     render(<ProjectNav {...props({ annotate: undefined, contentOwnsTheAction: true })} />);
     expect(filled()).toHaveLength(0);
-    expect(screen.getByTestId("go-ingest").dataset.variant).toBe("secondary");
+    expect(screen.getByTestId("go-ingest").dataset.variant).toBe("outline");
   });
 
   it("renders no filled control at all when the host wired neither action", () => {
diff --git a/frontend/ui-core/src/patterns/statusTone.test.ts b/frontend/ui-core/src/patterns/statusTone.test.ts
new file mode 100644
index 00000000..9ce46a21
--- /dev/null
+++ b/frontend/ui-core/src/patterns/statusTone.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+
+import { STATUS_INK, TONE_BORDER, TONE_FILL } from "./statusTone";
+
+describe("status tones", () => {
+  it("names one Tailwind family per status and never a retired token", () => {
+    expect(TONE_FILL.success).toBe("bg-emerald-500 dark:bg-emerald-400");
+    expect(TONE_FILL.warning).toBe("bg-amber-500 dark:bg-amber-400");
+    expect(TONE_BORDER.success).toBe("border-emerald-500 dark:border-emerald-400");
+    expect(TONE_BORDER.warning).toBe("border-amber-500 dark:border-amber-400");
+    expect(TONE_FILL.destructive).toBe("bg-destructive");
+    expect(TONE_BORDER.neutral).toBe("border-border");
+    expect(STATUS_INK.warning).toBe("text-amber-700 dark:text-amber-400");
+    expect(STATUS_INK.success).toBe("text-emerald-700 dark:text-emerald-400");
+    expect(STATUS_INK.info).toBe("text-sky-700 dark:text-sky-400");
+    for (const v of [...Object.values(TONE_FILL), ...Object.values(TONE_BORDER), ...Object.values(STATUS_INK)]) {
+      expect(v).not.toMatch(/\b(?:bg|border|text)-(?:success|warning)\b/);
+    }
+  });
+});
diff --git a/frontend/ui-core/src/patterns/statusTone.ts b/frontend/ui-core/src/patterns/statusTone.ts
new file mode 100644
index 00000000..028fafb3
--- /dev/null
+++ b/frontend/ui-core/src/patterns/statusTone.ts
@@ -0,0 +1,52 @@
+/**
+ * The one home for status colour outside the `Badge`.
+ *
+ * `badge.tsx` earns its own emerald/amber/sky because a chip's `/10` surface
+ * and hairline are a treatment nothing else draws. Everything else that paints
+ * a status — a dot, a timeline cell, an inline icon or word — reads its colour
+ * from here instead of naming a Tailwind family at its own call site, so a
+ * sixth place inventing a fourth spelling of "warning" is a type error, not a
+ * diff nobody notices.
+ */
+export type StatusTone = "neutral" | "accent" | "success" | "warning" | "destructive";
+
+/**
+ * A tone's border and its fill, as whole utility names.
+ *
+ * Whole names rather than a `border-${tone}` template, because Tailwind scans
+ * source *text*: a class assembled at runtime is a class the build never saw and
+ * therefore a rule that is never emitted. The failure is silent and looks like a
+ * styling mistake, which is why these are written out.
+ *
+ * A status **dot** and a timeline **cell** are solid marks, not `Badge`s — a
+ * full-strength `*-500` fill is right there, where the `Badge`'s `/10` surface
+ * would vanish at 4px.
+ */
+export const TONE_BORDER: Record<StatusTone, string> = {
+  neutral: "border-border",
+  accent: "border-primary",
+  success: "border-emerald-500 dark:border-emerald-400",
+  warning: "border-amber-500 dark:border-amber-400",
+  destructive: "border-destructive",
+};
+
+export const TONE_FILL: Record<StatusTone, string> = {
+  neutral: "bg-muted-foreground",
+  accent: "bg-primary",
+  success: "bg-emerald-500 dark:bg-emerald-400",
+  warning: "bg-amber-500 dark:bg-amber-400",
+  destructive: "bg-destructive",
+};
+
+/**
+ * Ink for an icon or a run of inline text carrying a status — a `warning`
+ * triangle beside a sentence, not a dot or a cell, so it wants a legible
+ * foreground rather than `TONE_FILL`'s solid mark. `info` has no `StatusTone`
+ * counterpart: it names sky for surfaces that are informational without being
+ * any of `neutral`/`accent`/`success`/`warning`/`destructive`.
+ */
+export const STATUS_INK = {
+  success: "text-emerald-700 dark:text-emerald-400",
+  warning: "text-amber-700 dark:text-amber-400",
+  info: "text-sky-700 dark:text-sky-400",
+} as const;
diff --git a/frontend/ui-core/src/primitives/Badge.tsx b/frontend/ui-core/src/primitives/Badge.tsx
deleted file mode 100644
index e86ccd29..00000000
--- a/frontend/ui-core/src/primitives/Badge.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Badges and the alert.
- *
- * The badge's variants are the ones the domain actually produces — a batch state,
- * an asset's progress, a refusal — so a screen picks an intent and never a colour.
- *
- * Every variant is its colour as ink over that colour at 10% behind its own
- * border. On a near-monochrome page that is enough separation to read as a
- * state without any of them becoming a saturated block: `accent` is the near-black
- * action, so it is the neutral chip, and `success` / `warning` / `destructive` are
- * the three desaturated statuses.
- *
- * `quiet` is the one variant that is not a state: a square, colourless label for
- * a fact read beside other facts — what a model does, what it writes — where a
- * pill would read as a status and a colour would compete with the one the card
- * carries. Square corners are the whole of its difference, and the reason it is
- * a variant here rather than a class on a screen.
- *
- * `Alert` carries `role="alert"` on the destructive variant only. An informational
- * panel announced as an alert interrupts a screen reader for something nobody
- * needs to hear; an error must interrupt.
- */
-
-import { cva, type VariantProps } from "class-variance-authority";
-import type { HTMLAttributes, JSX, ReactNode } from "react";
-
-import { cn } from "../lib/cn";
-
-export const badgeVariants = cva(
-  "inline-flex h-5 w-fit shrink-0 items-center gap-1 rounded-4xl border px-2 py-0.5 text-xs font-medium " +
-    "whitespace-nowrap focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 " +
-    "[&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        neutral: "border-border bg-muted text-muted-foreground",
-        accent: "border-primary bg-primary/10 text-primary",
-        success: "border-success bg-success/10 text-success",
-        warning: "border-warning bg-warning/10 text-warning",
-        destructive: "border-destructive bg-destructive/10 text-destructive",
-        outline: "border-border bg-card text-foreground",
-        quiet: "rounded-md border-transparent bg-muted text-foreground",
-      },
-    },
-    defaultVariants: { variant: "neutral" },
-  },
-);
-
-export interface BadgeProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {}
-
-export function Badge({ className, variant, ...props }: BadgeProps): JSX.Element {
-  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-// `title` is omitted from the DOM attributes and re-declared: the native one is a
-// tooltip string, and an alert's heading is a node. Widening it in place is a type
-// error, and shipping both under one name would be a trap.
-export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  readonly variant?: "info" | "destructive";
-  readonly title?: ReactNode;
-}
-
-export function Alert({
-  className,
-  variant = "info",
-  title,
-  children,
-  ...props
-}: AlertProps): JSX.Element {
-  return (
-    <div
-      role={variant === "destructive" ? "alert" : undefined}
-      className={cn(
-        "rounded-lg border p-4 text-sm",
-        variant === "destructive"
-          ? "border-destructive bg-destructive/5 text-destructive"
-          : "border-border bg-muted text-foreground",
-        className,
-      )}
-      {...props}
-    >
-      {title !== undefined && <p className="font-medium">{title}</p>}
-      {children !== undefined && <div className="text-muted-foreground">{children}</div>}
-    </div>
-  );
-}
diff --git a/frontend/ui-core/src/primitives/Button.tsx b/frontend/ui-core/src/primitives/Button.tsx
deleted file mode 100644
index cabf11f4..00000000
--- a/frontend/ui-core/src/primitives/Button.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * The button, and the variant convention every other primitive follows.
- *
- * `cva` holds the variants as data rather than as a chain of ternaries, which is
- * what makes "the active tool is the primary variant" (`DESIGN.md`) a lookup
- * instead of a rule six components each remember. `asChild` is Radix's `Slot`:
- * a link that should look like a button stays an `<a>`, so the accessibility
- * comes from the element and not from a role attribute.
- *
- * Every colour here is a token utility. There is no hex and no `var()` in any
- * class string in this package, and `tests/scripts/design_tokens.test.mjs` fails
- * the build if one appears.
- */
-
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { forwardRef, type ButtonHTMLAttributes } from "react";
-
-import { cn } from "../lib/cn";
-
-export const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent " +
-    "bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none " +
-    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 " +
-    // A `haspopup` trigger's own menu opening *is* its press feedback; every
-    // other button nudges down a pixel so a click reads as physically taken.
-    "active:not-aria-[haspopup]:translate-y-px " +
-    // Nova's disabled idiom is uniform 50% opacity rather than a colour swap,
-    // and — unlike the previous per-variant treatment — it now lives on the
-    // base string, so every variant dims as itself instead of putting on a
-    // separate neutral skin. `pointer-events-none` is what keeps every
-    // `hover:` above from firing here.
-    "disabled:pointer-events-none disabled:opacity-50 " +
-    "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 " +
-    "dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 " +
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-border bg-background hover:bg-muted hover:text-foreground " +
-          "aria-expanded:bg-muted aria-expanded:text-foreground " +
-          "dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        /**
-         * The second filled weight, and it has exactly one sanctioned caller:
-         * the annotation editor's `Save and stay` (`DESIGN.md`, *One filled
-         * button per view*). Colour is what separates *advance* from
-         * *persist in place* where a second near-black would compete with the
-         * primary rather than pair with it.
-         *
-         * Not a general "confirm" variant. A view whose forward action is a
-         * success is still `primary` — this exists because two halves of one
-         * gesture sit side by side, which is a shape the rest of the product
-         * does not have.
-         */
-        success: "bg-success text-success-foreground hover:bg-success/80",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground " +
-          "dark:hover:bg-muted/50",
-        // Nova's soft destructive: a tinted background and ink rather than a
-        // solid fill, so the one variant that can end something does not read
-        // as loud as `primary`.
-        destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 " +
-          "focus-visible:border-destructive/40 focus-visible:ring-destructive/20 " +
-          "dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        // The neutral preset's `primary` is near-black: without a resting
-        // underline a link button reads as static prose. Hover answers with the
-        // same `/80` step every filled variant uses.
-        link: "text-primary underline underline-offset-4 hover:text-primary/80",
-      },
-      size: {
-        xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-8 gap-1.5 px-2.5",
-        lg: "h-9 gap-1.5 px-2.5",
-        // 32px square — Nova's icon-button contract.
-        icon: "size-8 p-0",
-        "icon-xs": "size-6 p-0 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-7 p-0",
-      },
-    },
-    compoundVariants: [
-      // A link button is inline prose, not a boxed control: no height, no
-      // padding, whatever `size` says — `size` still picks the text scale.
-      { variant: "link", class: "h-auto p-0" },
-    ],
-    defaultVariants: { variant: "secondary", size: "md" },
-  },
-);
-
-export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  /** Render the child element instead of a `<button>`, keeping the styling. */
-  readonly asChild?: boolean;
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { className, variant, size, asChild = false, type, ...props },
-  ref,
-) {
-  const Component = asChild ? Slot : "button";
-  return (
-    <Component
-      ref={ref}
-      data-slot="button"
-      data-variant={variant ?? "secondary"}
-      data-size={size ?? "md"}
-      // A `<button>` inside a form defaults to `submit`, which is how a "Cancel"
-      // ends up posting one. Only defaulted for a real button — `asChild` may be
-      // rendering an `<a>`, where the attribute means something else entirely.
-      type={asChild ? type : (type ?? "button")}
-      className={cn(buttonVariants({ variant, size }), className)}
-      {...props}
-    />
-  );
-});
diff --git a/frontend/ui-core/src/primitives/Card.tsx b/frontend/ui-core/src/primitives/Card.tsx
deleted file mode 100644
index 8d5d94c4..00000000
--- a/frontend/ui-core/src/primitives/Card.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * The card, and the layout primitives that go inside it.
- *
- * Nova's model: elevation is a hairline `ring`, not a border-plus-shadow, and the
- * padding rhythm lives in one custom property — `--card-spacing` — so `CardHeader`,
- * `CardContent` and `CardFooter` all breathe in the same unit and `size="sm"`
- * tightens all three at once instead of three call sites agreeing by hand. A card
- * is a `<section>` rather than a `<div>` when it carries a title, which `CardTitle`
- * assumes by rendering an `<h3>` — a screen with eight unlabelled `<div>`s is one a
- * screen reader cannot navigate.
- *
- * `CardAction` is the header's right-aligned slot: `CardHeader`'s grid switches to
- * two columns only when a `CardAction` is actually present (`has-data-[slot=...]`),
- * so a plain title-only header stays a single column.
- */
-
-import { forwardRef, type HTMLAttributes } from "react";
-
-import { cn } from "../lib/cn";
-
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  readonly size?: "default" | "sm";
-}
-
-export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
-  { className, size = "default", ...props },
-  ref,
-) {
-  return (
-    <div
-      ref={ref}
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  function CardHeader({ className, ...props }, ref) {
-    return (
-      <div
-        ref={ref}
-        data-slot="card-header"
-        className={cn(
-          "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-
-export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-  function CardTitle({ className, ...props }, ref) {
-    return (
-      <h3
-        ref={ref}
-        data-slot="card-title"
-        className={cn(
-          "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-
-export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
-  function CardDescription({ className, ...props }, ref) {
-    return (
-      <p
-        ref={ref}
-        data-slot="card-description"
-        className={cn("text-sm text-muted-foreground", className)}
-        {...props}
-      />
-    );
-  },
-);
-
-export const CardAction = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  function CardAction({ className, ...props }, ref) {
-    return (
-      <div
-        ref={ref}
-        data-slot="card-action"
-        className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
-        {...props}
-      />
-    );
-  },
-);
-
-export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  function CardContent({ className, ...props }, ref) {
-    return (
-      <div ref={ref} data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />
-    );
-  },
-);
-
-export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  function CardFooter({ className, ...props }, ref) {
-    return (
-      <div
-        ref={ref}
-        data-slot="card-footer"
-        className={cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className)}
-        {...props}
-      />
-    );
-  },
-);
diff --git a/frontend/ui-core/src/primitives/Combobox.tsx b/frontend/ui-core/src/primitives/Combobox.tsx
deleted file mode 100644
index f8711147..00000000
--- a/frontend/ui-core/src/primitives/Combobox.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-/**
- * A filtering combobox: a text field that narrows a list, plus one optional row
- * after it.
- *
- * ## Built here rather than installed
- *
- * `DESIGN.md`'s **Libraries** section constrains what may be added, and a
- * combobox is the wrong size of thing to take a dependency for. What it needs is
- * a text input, a list, and four keys — all of which this repository already has
- * — and what a library would bring with it is its own focus management, which is
- * exactly the part that has to cooperate with the annotator canvas's keyboard
- * root. The behaviour is modelled on the hand-built filter + arrow-key list in
- * `screens/SchemaEditor.tsx`.
- *
- * Radix is a dependency already, so `Popover` was available and was declined for
- * the same reason: it owns focus on open and restores it on close, and the one
- * caller here needs the field focused while the popup is open and the *canvas*
- * focused after it closes — neither of which is a Popover's idea of correct.
- *
- * ## The footer is an option, not a button under the list
- *
- * "Create class `<text>`" has to be reachable by the same ArrowDown that reaches
- * every other row, or a keyboard user meets a dead end in exactly the state the
- * row exists for — nothing matched what they typed. So it is the last entry of
- * the listbox, carries `role="option"`, and takes the active ring like any other.
- * A `<button>` sitting below a `<ul>` would be correct HTML and unreachable in
- * the flow this is for.
- *
- * ## What it owns and what it does not
- *
- * `open` is the caller's, because something outside the field opens it — a
- * hotkey, a click on a summary. The query text, the active row and the focus
- * dance are ephemeral view state and stay in here; hoisting them would put three
- * `useState`s in every caller and make the invariant "the active row is always
- * within the filtered list" the caller's to maintain.
- *
- * Selecting **never** mutates the field's own text: this is a picker, not an
- * autocomplete. The trigger renders what is selected, and the query is cleared on
- * every close so re-opening starts from the whole list rather than from whatever
- * was typed a minute ago.
- */
-
-import { useEffect, useId, useMemo, useRef, useState, type JSX, type ReactNode } from "react";
-
-import { cn } from "../lib/cn";
-import { Input } from "./Input";
-
-/** An extra row after the items, or `null` for none in this state. */
-export interface ComboboxFooter {
-  readonly label: string;
-  readonly onSelect: () => void;
-  readonly testId?: string;
-}
-
-export interface ComboboxProps<T> {
-  /** What shows when the popup is closed. Pressing it opens. */
-  readonly trigger: ReactNode;
-  readonly items: readonly T[];
-  readonly itemKey: (item: T) => string;
-  /** What the filter matches on, and what a screen reader reads for the row. */
-  readonly itemLabel: (item: T) => string;
-  readonly renderItem: (item: T) => ReactNode;
-  readonly onSelect: (item: T) => void;
-  readonly open: boolean;
-  readonly onOpenChange: (open: boolean) => void;
-  /**
-   * Called with the live query, so a caller can offer "create `<what they
-   * typed>`". Returning `null` renders no row.
-   */
-  readonly footer?: (query: string) => ComboboxFooter | null;
-  readonly placeholder?: string;
-  /** Said when the filter matches nothing and there is no footer either. */
-  readonly emptyLabel?: string;
-  readonly label: string;
-  readonly testId?: string;
-  readonly disabled?: boolean;
-}
-
-export function Combobox<T>({
-  trigger,
-  items,
-  itemKey,
-  itemLabel,
-  renderItem,
-  onSelect,
-  open,
-  onOpenChange,
-  footer,
-  placeholder,
-  emptyLabel = "No matches",
-  label,
-  testId = "combobox",
-  disabled = false,
-}: ComboboxProps<T>): JSX.Element {
-  const [query, setQuery] = useState("");
-  const [active, setActive] = useState(0);
-  const listId = useId();
-  const optionId = (index: number): string => `${listId}-option-${index}`;
-  const fieldRef = useRef<HTMLInputElement | null>(null);
-  const rootRef = useRef<HTMLDivElement | null>(null);
-
-  const shown = useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    return needle === ""
-      ? items
-      : items.filter((item) => itemLabel(item).toLowerCase().includes(needle));
-    // `itemLabel` is a prop and callers write it inline, so a new identity every
-    // render would defeat this memo — the deps are the data, and the accessor is
-    // assumed pure the way `Array.prototype.map`'s callback is.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items, query]);
-
-  const extra = footer?.(query.trim()) ?? null;
-  /** The footer sits one past the last item, so one number indexes both. */
-  const rows = shown.length + (extra === null ? 0 : 1);
-
-  // Re-opening starts clean, and the ring starts at the top. Both are the same
-  // decision: a picker that reopened mid-list would put the highlight somewhere
-  // the person did not leave it, because the list itself may have changed.
-  useEffect(() => {
-    if (!open) return;
-    setQuery("");
-    setActive(0);
-    // Directly, not behind a frame: this effect runs after the open render has
-    // committed, so the field is already in the tree. Deferring it to a
-    // `requestAnimationFrame` was the first draft and it cost the field the
-    // focus in any environment that does not paint — which is every test.
-    fieldRef.current?.focus();
-  }, [open]);
-
-  // Typing shortens the list, so the ring has to come back inside it. Clamped
-  // rather than reset, so narrowing from six rows to two keeps the highlight on
-  // the last one instead of jumping to the first.
-  useEffect(() => {
-    setActive((current) => (rows === 0 ? 0 : Math.min(current, rows - 1)));
-  }, [rows]);
-
-  // A press outside is a dismissal, and it must reach the canvas: the annotator
-  // reads the keyboard off its own root, so a popup that swallowed the press
-  // would leave every chord dead until the user clicked twice.
-  useEffect(() => {
-    if (!open) return undefined;
-    const dismiss = (event: MouseEvent): void => {
-      if (rootRef.current?.contains(event.target as Node) === true) return;
-      onOpenChange(false);
-    };
-    document.addEventListener("mousedown", dismiss);
-    return () => document.removeEventListener("mousedown", dismiss);
-  }, [open, onOpenChange]);
-
-  function choose(index: number): void {
-    if (extra !== null && index === shown.length) {
-      onOpenChange(false);
-      extra.onSelect();
-      return;
-    }
-    const item = shown[index];
-    if (item === undefined) return;
-    onOpenChange(false);
-    onSelect(item);
-  }
-
-  function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      onOpenChange(false);
-      return;
-    }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      choose(active);
-      return;
-    }
-    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
-    event.preventDefault();
-    if (rows === 0) return;
-    // Wrapping, because the footer is the last row: a person arrowing down past
-    // "create it" expects to land back at the top, not to stick.
-    const step = event.key === "ArrowDown" ? 1 : -1;
-    setActive((current) => (current + step + rows) % rows);
-  }
-
-  if (!open) {
-    return (
-      <div ref={rootRef} className="relative" data-testid={testId}>
-        <button
-          type="button"
-          aria-label={label}
-          aria-expanded={false}
-          aria-haspopup="listbox"
-          data-testid={`${testId}-trigger`}
-          disabled={disabled}
-          className="flex h-8 max-w-64 items-center gap-2 rounded-md border border-input bg-card px-2 text-sm text-foreground disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
-          onClick={() => onOpenChange(true)}
-        >
-          {trigger}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div ref={rootRef} className="relative" data-testid={testId}>
-      <Input
-        ref={fieldRef}
-        role="combobox"
-        aria-label={label}
-        aria-expanded
-        aria-controls={listId}
-        aria-autocomplete="list"
-        aria-activedescendant={rows === 0 ? undefined : optionId(active)}
-        data-testid={`${testId}-input`}
-        className="h-8 w-64"
-        placeholder={placeholder}
-        value={query}
-        onChange={(event) => setQuery(event.target.value)}
-        onKeyDown={onKeyDown}
-        // A blur that is not a dismissal — clicking a row — would close the popup
-        // before the click landed. The outside-press listener above is what
-        // dismisses, so blur does nothing here on purpose.
-      />
-      <ul
-        id={listId}
-        role="listbox"
-        aria-label={label}
-        data-testid={`${testId}-list`}
-        className="dark absolute left-0 top-9 z-50 max-h-72 w-64 overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10"
-      >
-        {shown.map((item, index) => (
-          <li
-            key={itemKey(item)}
-            id={optionId(index)}
-            role="option"
-            aria-selected={index === active}
-            data-testid={`${testId}-option-${itemKey(item)}`}
-            data-active={index === active ? "true" : "false"}
-            className={cn(
-              "flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-1 text-sm",
-              index === active && "bg-accent text-accent-foreground",
-            )}
-            // `mousedown`, not `click`: the outside-press dismissal also runs on
-            // mousedown, and a row that waited for `click` would be gone by then.
-            onMouseDown={(event) => {
-              event.preventDefault();
-              choose(index);
-            }}
-            onMouseEnter={() => setActive(index)}
-          >
-            {renderItem(item)}
-          </li>
-        ))}
-
-        {extra !== null && (
-          <li
-            id={optionId(shown.length)}
-            role="option"
-            aria-selected={shown.length === active}
-            data-testid={extra.testId ?? `${testId}-footer`}
-            data-active={shown.length === active ? "true" : "false"}
-            className={cn(
-              "mt-1 flex cursor-pointer items-center gap-2 rounded-md border-t border-border px-1.5 py-1 text-sm text-muted-foreground",
-              shown.length === active && "bg-accent text-accent-foreground",
-            )}
-            onMouseDown={(event) => {
-              event.preventDefault();
-              choose(shown.length);
-            }}
-            onMouseEnter={() => setActive(shown.length)}
-          >
-            {extra.label}
-          </li>
-        )}
-
-        {rows === 0 && (
-          <li
-            role="presentation"
-            data-testid={`${testId}-empty`}
-            className="px-1.5 py-1 text-sm text-muted-foreground"
-          >
-            {emptyLabel}
-          </li>
-        )}
-      </ul>
-    </div>
-  );
-}
diff --git a/frontend/ui-core/src/primitives/Dialog.tsx b/frontend/ui-core/src/primitives/Dialog.tsx
deleted file mode 100644
index 9109ca68..00000000
--- a/frontend/ui-core/src/primitives/Dialog.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * Dialog and sheet — one Radix primitive, two presentations.
- *
- * A sheet is a dialog that slides in from an edge. Building it on
- * `@radix-ui/react-dialog` rather than on its own primitive is what gives both the
- * focus trap, the `Escape` handler, the scroll lock, the `aria-modal` wiring and
- * the return of focus to the trigger — none of which a hand-rolled panel gets, and
- * all of which a destructive-confirmation dialog genuinely needs.
- *
- * `DialogTitle` is **required** by Radix: without one it warns, and a modal with
- * no accessible name is unusable with a screen reader. It is exported rather than
- * folded into `DialogContent` so a caller can place it, but there is no variant
- * that omits it.
- */
-
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import {
-  createContext,
-  forwardRef,
-  useCallback,
-  useContext,
-  useId,
-  useLayoutEffect,
-  useState,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  type HTMLAttributes,
-  type JSX,
-} from "react";
-
-import { cn } from "../lib/cn";
-
-export const Dialog = DialogPrimitive.Root;
-
-/*
- * Radix mints one description id per dialog root: every `Description` renders it
- * and `Content` points `aria-describedby` at it, so a dialog with two
- * descriptions has duplicate ids and a screen reader hears only the first. Each
- * description here carries its own id and registers it with the enclosing
- * content, which describes itself by all of them.
- */
-type RegisterDescription = (id: string) => () => void;
-const DescriptionRegistry = createContext<RegisterDescription | null>(null);
-
-function useDescribedBy(): { readonly describedBy: string | undefined; readonly register: RegisterDescription } {
-  const [ids, setIds] = useState<readonly string[]>([]);
-  const register = useCallback<RegisterDescription>((id) => {
-    setIds((previous) => [...previous, id]);
-    return () => setIds((previous) => previous.filter((known) => known !== id));
-  }, []);
-  return { describedBy: ids.length > 0 ? ids.join(" ") : undefined, register };
-}
-export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogClose = DialogPrimitive.Close;
-export const DialogPortal = DialogPrimitive.Portal;
-
-const OVERLAY =
-  "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs " +
-  "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0";
-
-export const DialogOverlay = forwardRef<
-  ElementRef<typeof DialogPrimitive.Overlay>,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(function DialogOverlay({ className, ...props }, ref) {
-  return <DialogPrimitive.Overlay ref={ref} className={cn(OVERLAY, className)} {...props} />;
-});
-
-export const DialogContent = forwardRef<
-  ElementRef<typeof DialogPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(function DialogContent({ className, children, ...props }, ref) {
-  const { describedBy, register } = useDescribedBy();
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        ref={ref}
-        aria-describedby={describedBy}
-        className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 " +
-            "gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 " +
-            "duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 " +
-            "data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className,
-        )}
-        {...props}
-      >
-        <DescriptionRegistry.Provider value={register}>{children}</DescriptionRegistry.Provider>
-        <DialogPrimitive.Close
-          aria-label="Close"
-          className={
-            "absolute top-2 right-2 inline-flex size-7 items-center justify-center rounded-lg " +
-            "text-muted-foreground outline-none transition-all hover:bg-muted hover:text-foreground " +
-            "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:hover:bg-muted/50"
-          }
-        >
-          <X className="size-4" aria-hidden="true" />
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-});
-
-export const DialogTitle = forwardRef<
-  ElementRef<typeof DialogPrimitive.Title>,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(function DialogTitle({ className, ...props }, ref) {
-  return (
-    <DialogPrimitive.Title
-      ref={ref}
-      className={cn("font-heading text-base leading-none font-medium", className)}
-      {...props}
-    />
-  );
-});
-
-export const DialogDescription = forwardRef<
-  ElementRef<typeof DialogPrimitive.Description>,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(function DialogDescription({ className, ...props }, ref) {
-  const id = useId();
-  const register = useContext(DescriptionRegistry);
-  useLayoutEffect(() => register?.(id), [register, id]);
-  return (
-    <DialogPrimitive.Description
-      ref={ref}
-      id={id}
-      className={cn(
-        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-export function DialogFooter({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>): JSX.Element {
-  return (
-    <div
-      className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** The sheet: the same dialog, anchored to an edge. `DESIGN.md`'s 12px radius. */
-export const Sheet = DialogPrimitive.Root;
-export const SheetTrigger = DialogPrimitive.Trigger;
-export const SheetClose = DialogPrimitive.Close;
-
-export interface SheetContentProps
-  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-  readonly side?: "left" | "right";
-}
-
-export const SheetContent = forwardRef<
-  ElementRef<typeof DialogPrimitive.Content>,
-  SheetContentProps
->(function SheetContent({ className, side = "right", children, ...props }, ref) {
-  const { describedBy, register } = useDescribedBy();
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        ref={ref}
-        aria-describedby={describedBy}
-        className={cn(
-          "fixed inset-y-0 z-50 flex w-full max-w-sm flex-col gap-4 border-border bg-popover p-6 shadow-lg",
-          side === "right" ? "right-0 border-l" : "left-0 border-r",
-          className,
-        )}
-        {...props}
-      >
-        <DescriptionRegistry.Provider value={register}>{children}</DescriptionRegistry.Provider>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-});
-
-export const SheetTitle = DialogTitle;
-export const SheetDescription = DialogDescription;
diff --git a/frontend/ui-core/src/primitives/Feedback.tsx b/frontend/ui-core/src/primitives/Feedback.tsx
deleted file mode 100644
index f0dd4be4..00000000
--- a/frontend/ui-core/src/primitives/Feedback.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Progress, skeleton and toasts — the three things that say "something is
- * happening" without moving the layout.
- *
- * `Skeleton` is a shape, not a spinner, and that is `DESIGN.md`'s rule: a skeleton
- * **preserves layout**, so the page does not jump when the data lands. A spinner
- * in the middle of an empty box does the opposite. Callers give it the size of the
- * thing it stands in for.
- *
- * The toaster is `sonner`, pinned by `DESIGN.md`'s library table. It is exported
- * pre-styled so the app mounts one line and never re-decides the placement.
- */
-
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { cva, type VariantProps } from "class-variance-authority";
-import type { ComponentProps, HTMLAttributes, JSX } from "react";
-import { Toaster as SonnerToaster, toast } from "sonner";
-
-import { cn } from "../lib/cn";
-import { cssVar } from "../tokens";
-
-// `primary`, not `brand`: the fill is a functional control — the thing a person
-// watches to know work is happening — and brand is identity, never a functional
-// colour. `success` is the batch-state family's settled colour, for a bar that
-// measures annotation rather than a transfer.
-const progressFill = cva("h-full w-full flex-1 transition-transform", {
-  variants: {
-    variant: {
-      primary: "bg-primary",
-      success: "bg-success",
-    },
-  },
-  defaultVariants: { variant: "primary" },
-});
-
-export type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root> &
-  VariantProps<typeof progressFill>;
-
-export function Progress({ className, value, variant, ...props }: ProgressProps): JSX.Element {
-  return (
-    <ProgressPrimitive.Root
-      value={value}
-      className={cn("relative h-1 w-full overflow-hidden rounded-full bg-muted", className)}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        className={progressFill({ variant })}
-        // The width is data, so it is a style rather than a class: Tailwind cannot
-        // generate a utility for a number it will not see until runtime, and a
-        // `w-[${n}%]` string is the one arbitrary value that silently produces
-        // nothing. Radix's own recipe.
-        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  );
-}
-
-export function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>): JSX.Element {
-  return (
-    <div
-      aria-hidden="true"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  );
-}
-
-/**
- * The app's single toaster.
- *
- * Its colours are passed as inline custom properties rather than as classes,
- * because sonner renders into a portal it owns and styles with its own
- * `--normal-*` variables — reaching them from a `className` is not possible. The
- * values come from `tokens.ts`, so this is still one spelling and not a hex in a
- * component.
- */
-export function Toaster(): JSX.Element {
-  return (
-    <SonnerToaster
-      position="bottom-right"
-      toastOptions={{
-        style: {
-          background: cssVar("popover"),
-          color: cssVar("popover-foreground"),
-          border: `1px solid ${cssVar("border")}`,
-          borderRadius: "var(--radius-lg)",
-        },
-      }}
-    />
-  );
-}
-
-export { toast };
diff --git a/frontend/ui-core/src/primitives/Input.tsx b/frontend/ui-core/src/primitives/Input.tsx
deleted file mode 100644
index 2945ca2b..00000000
--- a/frontend/ui-core/src/primitives/Input.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Text input, textarea and label.
- *
- * `Label` is Radix's, not a bare `<label>`, because Radix's handles the case an
- * ordinary one gets wrong: clicking a label whose control is a Radix `Select` or
- * `Checkbox` — a composite that is not a native form element — still focuses it.
- *
- * The focus ring is the base layer's `:focus-visible`, not a per-component
- * `focus:ring-*`. One rule, in one place, that a new screen cannot forget.
- */
-
-import * as LabelPrimitive from "@radix-ui/react-label";
-import {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  type HTMLAttributes,
-  type InputHTMLAttributes,
-  type JSX,
-  type TextareaHTMLAttributes,
-} from "react";
-
-import { cn } from "../lib/cn";
-
-export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
-  function Input({ className, ...props }, ref) {
-    return (
-      <input
-        ref={ref}
-        className={cn(
-          "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(
-  function Textarea({ className, ...props }, ref) {
-    return (
-      <textarea
-        ref={ref}
-        className={cn(
-          "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-
-export const Label = forwardRef<
-  ElementRef<typeof LabelPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(function Label({ className, ...props }, ref) {
-  return (
-    <LabelPrimitive.Root
-      ref={ref}
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-/** Helper text under a field, and its error twin. `DESIGN.md`'s meta scale. */
-export function FieldHint({
-  className,
-  ...props
-}: HTMLAttributes<HTMLParagraphElement>): JSX.Element {
-  return <p className={cn("text-xs text-muted-foreground", className)} {...props} />;
-}
-
-export function FieldError({
-  className,
-  ...props
-}: HTMLAttributes<HTMLParagraphElement>): JSX.Element {
-  return <p role="alert" className={cn("text-xs text-destructive", className)} {...props} />;
-}
diff --git a/frontend/ui-core/src/primitives/Menu.tsx b/frontend/ui-core/src/primitives/Menu.tsx
deleted file mode 100644
index 81b63752..00000000
--- a/frontend/ui-core/src/primitives/Menu.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * The dropdown menu and the tooltip — the two overlays a row of icon buttons
- * needs.
- *
- * `TooltipProvider` is exported and must wrap the app **once**: Radix keeps the
- * open/close delay on the provider, so a tooltip mounted without one either warns
- * or opens on a timing of its own. `DESIGN.md` gives the tool strip tooltips that
- * carry the shortcut ("Select (V)"), which only reads as one behaviour if they
- * share a delay.
- */
-
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
-
-import { cn } from "../lib/cn";
-
-export const DropdownMenu = DropdownMenuPrimitive.Root;
-export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-/**
- * The enter animation, and no exit animation — the absence is the load-bearing
- * part.
- *
- * An animated exit keeps Radix's content mounted for its duration after `open`
- * goes false, and the dismissable layer stays mounted with it. A press on the
- * trigger inside that window is then read twice: the trigger toggles the menu
- * open, and the layer still listening reads the same pointer-down as an
- * interaction *outside* itself and dismisses. The two cancel and the menu never
- * appears. A hundred milliseconds is well inside the gap between an `Escape` and
- * the click after it, so a fast hand hit this routinely rather than rarely.
- *
- * `DESIGN.md`'s "fast and quiet" is the principle it broke — motion orients or
- * confirms and never makes anyone wait — so the menu leaves on the frame it is
- * dismissed. Restoring a fade here reintroduces the swallow;
- * `annotate.spec.ts` holds the two presses that prove it.
- */
-const SURFACE =
-  "dark z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 " +
-  "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto " +
-  "rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 " +
-  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 " +
-  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 " +
-  "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95";
-
-export const DropdownMenuContent = forwardRef<
-  ElementRef<typeof DropdownMenuPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(function DropdownMenuContent({ className, sideOffset = 4, ...props }, ref) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        className={cn(SURFACE, className)}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-
-export const DropdownMenuItem = forwardRef<
-  ElementRef<typeof DropdownMenuPrimitive.Item>,
-  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { readonly destructive?: boolean }
->(function DropdownMenuItem({ className, destructive = false, ...props }, ref) {
-  return (
-    <DropdownMenuPrimitive.Item
-      ref={ref}
-      data-variant={destructive ? "destructive" : undefined}
-      className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 " +
-          "py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground " +
-          "not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 " +
-          "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 " +
-          "data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 " +
-          "data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none " +
-          "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-export const DropdownMenuSeparator = forwardRef<
-  ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(function DropdownMenuSeparator({ className, ...props }, ref) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      ref={ref}
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  );
-});
-
-export const TooltipProvider = TooltipPrimitive.Provider;
-export const Tooltip = TooltipPrimitive.Root;
-export const TooltipTrigger = TooltipPrimitive.Trigger;
-
-export const TooltipContent = forwardRef<
-  ElementRef<typeof TooltipPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(function TooltipContent({ className, sideOffset = 0, children, ...props }, ref) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center " +
-            "gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background " +
-            "has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 " +
-            "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 " +
-            "data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate " +
-            "**:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in " +
-            "data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in " +
-            "data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 " +
-            "data-closed:zoom-out-95",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-});
diff --git a/frontend/ui-core/src/primitives/Select.tsx b/frontend/ui-core/src/primitives/Select.tsx
deleted file mode 100644
index 9f3aad0a..00000000
--- a/frontend/ui-core/src/primitives/Select.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-/**
- * Select — the schema class picker, the partition strategy, the export format.
- *
- * Radix's rather than a native `<select>`, and the reason is `DESIGN.md`'s own
- * side panel: a class picker shows a colour swatch beside each name, and a native
- * option element cannot hold one. Everything else that matters — typeahead, the
- * keyboard, `aria-activedescendant`, closing on `Escape` — comes with it.
- *
- * One rule rides on this component's *callers* rather than on the component:
- * every class control in VisionSet is a picker over the schema, never free text.
- *
- * ## An option can be two lines
- *
- * Some options are an identifier plus the facts about it — a model id, then the
- * one line saying what it is for. On one line that is a sentence long enough to
- * wrap inside a control measured for one line, which reads as squashed text
- * rather than as a choice.
- *
- * So {@link SelectItem} takes an optional `meta`: the children stay the
- * identifier, at the label role, and `meta` goes underneath at the meta role.
- * Because Radix renders the *selected* item's `ItemText` into the trigger, the
- * closed control and the open list are the same two lines by construction — there
- * is no second place to keep in step, which is the whole reason this lives on the
- * primitive rather than at a call site.
- *
- * The trigger grows to fit rather than clipping: `min-h-8` and vertical padding
- * instead of Nova's fixed `data-[size=default]:h-8`. A single-line option still
- * lands on Nova's own control height, and a two-line one grows the control
- * instead of overflowing it. Nothing truncates and nothing ellipsises — an
- * identifier cut off in the middle is not an identifier, which is also why the
- * trigger omits Nova's own `*:data-[slot=select-value]:line-clamp-1`.
- *
- * The padding is `py-1`, which is `Input`'s — and it is `py-1` *because* the
- * height is a minimum rather than a fixed one. Under a fixed `h-8` the padding
- * cannot change the height, so Nova's own `py-2` is free; under `min-h-8` it
- * adds, and one line of `text-sm` (20px) plus `py-2` (16px) plus the border
- * (2px) is a 38px control standing beside a 32px `Input` in the same field row.
- * With `py-1` the minimum governs the one-line case at exactly Nova's 32px and
- * the second line still grows the box. `styleguide.spec.ts` measures both, and
- * measures the trigger against the `Input` next to it.
- *
- * ## The list scrolls; it never runs off the screen
- *
- * Two-line options make a list tall quickly, and a list taller than the room under
- * its trigger used to be **clipped** rather than scrolled: the options past the
- * edge stayed in the DOM and stayed reachable by keyboard, while a pointer had no
- * way to get to them and nothing on screen said they were there. A list that looks
- * complete and is not is worse than either a scrollbar or a shorter list. Measured
- * before the fix, on a 600px-tall window, the list's bottom edge sat at 836px.
- *
- * So the content is bounded by `--radix-select-content-available-height` — Radix's
- * own measurement of the gap between the trigger and the viewport edge, which
- * tracks a window resize and a trigger near the bottom of the screen without a
- * constant here guessing at either — and the viewport scrolls inside it.
- *
- * The scroll buttons are the affordance, not decoration. macOS hides overlay
- * scrollbars until a scroll is already under way, so on a stock Mac a truncated
- * list and a whole one look the same until somebody gambles on a gesture; Radix
- * mounts the buttons only while there is somewhere to scroll to, which is exactly
- * when that ambiguity exists.
- *
- * It is a property of layout under a real viewport, so `models.spec.ts` asserts
- * it in chromium. jsdom reports every height as zero and would agree with any
- * implementation, including the broken one this replaced.
- */
-
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  type ReactNode,
-} from "react";
-
-import { cn } from "../lib/cn";
-
-export const Select = SelectPrimitive.Root;
-export const SelectGroup = SelectPrimitive.Group;
-export const SelectValue = SelectPrimitive.Value;
-
-export const SelectTrigger = forwardRef<
-  ElementRef<typeof SelectPrimitive.Trigger>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(function SelectTrigger({ className, children, ...props }, ref) {
-  return (
-    <SelectPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        // `bg-transparent` and `dark:bg-input/30`, for `Input`'s reasons — Nova's
-        // own neutral skin, not a card surface.
-        //
-        // `min-h-8` with `py-1` rather than Nova's fixed `data-[size=default]:h-8`:
-        // a one-line value still lands on Nova's own control height, and a
-        // two-line one grows the control instead of overflowing it. The padding
-        // is `Input`'s, not Nova's `py-2`, because under a *minimum* height the
-        // padding adds — see the module note. `text-left`
-        // because this is a <button>, which centres its text, and a value that
-        // wrapped would centre with it. No `whitespace-nowrap`: that is Nova's
-        // one-line contract, and this trigger's is two lines.
-        "flex min-h-8 w-full items-center justify-between gap-1.5 rounded-lg border border-input " +
-          "bg-transparent py-1 pr-2 pl-2.5 text-left text-sm transition-colors outline-none " +
-          "select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 " +
-          "disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive " +
-          "aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground " +
-          "dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 " +
-          "dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 " +
-          "[&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDown className="size-4 text-muted-foreground" aria-hidden="true" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-});
-
-export const SelectContent = forwardRef<
-  ElementRef<typeof SelectPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(function SelectContent({ className, children, position = "popper", ...props }, ref) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        ref={ref}
-        position={position}
-        data-align-trigger={position === "item-aligned"}
-        className={cn(
-          // `data-[state=open]`/`data-[state=closed]`, not a bare `data-open`: Radix
-          // reports open/closed as `data-state`'s value, and Tailwind's bare
-          // `data-*` variant only matches an attribute's *presence*.
-          "dark relative z-50 flex max-h-(--radix-select-content-available-height) min-w-36 " +
-            "origin-(--radix-select-content-transform-origin) flex-col overflow-hidden rounded-lg " +
-            "bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 " +
-            "data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 " +
-            "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 " +
-            "data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in " +
-            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out " +
-            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 " +
-              "data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
-        )}
-        {...props}
-      >
-        {/*
-          `overflow-hidden` above is what rounds the corners, and on its own it
-          silently clipped anything past the bottom edge. The bound and the
-          scrolling viewport are what turn that into a scroll; the module note
-          above carries the argument and the measurement. Nova's own recipe
-          scrolls the content element itself — this keeps the split deliberately,
-          because it is the fix `models.spec.ts` asserts.
-        */}
-        <SelectPrimitive.ScrollUpButton className="z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4">
-          <ChevronUp className="size-4 text-muted-foreground" aria-hidden="true" />
-        </SelectPrimitive.ScrollUpButton>
-        <SelectPrimitive.Viewport
-          className={cn(
-            "overflow-y-auto p-1",
-            position === "popper" && "w-full min-w-(--radix-select-trigger-width)",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectPrimitive.ScrollDownButton className="z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4">
-          <ChevronDown className="size-4 text-muted-foreground" aria-hidden="true" />
-        </SelectPrimitive.ScrollDownButton>
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-});
-
-export const SelectItem = forwardRef<
-  ElementRef<typeof SelectPrimitive.Item>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
-    /**
-     * A second line under the option, for the facts about it.
-     *
-     * Inside `ItemText`, so the trigger shows the same two lines the list does.
-     * Absent leaves the one-line option exactly as it was.
-     */
-    readonly meta?: ReactNode;
-  }
->(function SelectItem({ className, children, meta, ...props }, ref) {
-  return (
-    <SelectPrimitive.Item
-      ref={ref}
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 " +
-          "text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground " +
-          "not-data-[variant=destructive]:focus:**:text-accent-foreground " +
-          "data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none " +
-          "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex " +
-          "*:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <SelectPrimitive.ItemText>
-        {meta === undefined ? (
-          children
-        ) : (
-          // `break-words` and no `truncate`: a long identifier wraps onto a third
-          // line rather than losing its end, because half a model id is not one.
-          <span className="flex min-w-0 flex-col gap-0.5 break-words">
-            <span className="font-medium text-foreground">{children}</span>
-            <span className="text-xs text-muted-foreground">{meta}</span>
-          </span>
-        )}
-      </SelectPrimitive.ItemText>
-      <span className="absolute right-2 flex size-4 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <Check className="size-4 text-primary" aria-hidden="true" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-    </SelectPrimitive.Item>
-  );
-});
-
-export const SelectLabel = forwardRef<
-  ElementRef<typeof SelectPrimitive.Label>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(function SelectLabel({ className, ...props }, ref) {
-  return (
-    <SelectPrimitive.Label
-      ref={ref}
-      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  );
-});
diff --git a/frontend/ui-core/src/primitives/Table.tsx b/frontend/ui-core/src/primitives/Table.tsx
deleted file mode 100644
index 1e0815ad..00000000
--- a/frontend/ui-core/src/primitives/Table.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * The table — the batch list, the release timeline.
- *
- * Real `<table>` semantics rather than a grid of `<div>`s, because a screen reader
- * announces "row 3 of 12, column State" only for the former, and both of the
- * screens this exists for are dense lists somebody scans.
- *
- * `TableEmpty` is here rather than in `patterns/` because an empty *table* is not
- * an empty *screen*: the header stays, so the columns still explain what is
- * missing. `EmptyState` is the whole-surface version.
- */
-
-import { forwardRef, type HTMLAttributes, type JSX, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
-
-import { cn } from "../lib/cn";
-
-export const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(function Table(
-  { className, ...props },
-  ref,
-) {
-  return (
-    <div className="w-full overflow-x-auto rounded-xl ring-1 ring-foreground/10">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
-    </div>
-  );
-});
-
-export const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
-  function TableHeader({ className, ...props }, ref) {
-    return <thead ref={ref} className={cn("bg-muted", className)} {...props} />;
-  },
-);
-
-export const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
-  function TableBody({ className, ...props }, ref) {
-    return <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
-  },
-);
-
-export const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
-  function TableRow({ className, ...props }, ref) {
-    return (
-      <tr
-        ref={ref}
-        className={cn("border-b hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
-        {...props}
-      />
-    );
-  },
-);
-
-export const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(
-  function TableHead({ className, ...props }, ref) {
-    return (
-      <th
-        ref={ref}
-        className={cn("h-10 px-2 text-left align-middle text-xs font-medium text-muted-foreground", className)}
-        {...props}
-      />
-    );
-  },
-);
-
-export const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(
-  function TableCell({ className, ...props }, ref) {
-    return <td ref={ref} className={cn("p-2 align-middle", className)} {...props} />;
-  },
-);
-
-/** A row spanning every column, so the header keeps explaining what is absent. */
-export function TableEmpty({
-  colSpan,
-  children,
-}: {
-  readonly colSpan: number;
-  readonly children: ReactNode;
-}): JSX.Element {
-  return (
-    <tr>
-      <td colSpan={colSpan} className="px-2 py-8 text-center text-sm text-muted-foreground">
-        {children}
-      </td>
-    </tr>
-  );
-}
diff --git a/frontend/ui-core/src/primitives/Tabs.tsx b/frontend/ui-core/src/primitives/Tabs.tsx
deleted file mode 100644
index 637e0bd5..00000000
--- a/frontend/ui-core/src/primitives/Tabs.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * Tabs — Nova's segmented control by default, plus a `line` variant for when
- * a tab bar should read as navigation rather than a switch.
- *
- * ## Two shapes, chosen at the call site
- *
- * `TabsList`'s `variant` prop defaults to `"default"`: a `bg-muted` pill with
- * the active tab raised onto `bg-background` behind a hairline shadow, Nova's
- * own segmented-control recipe. A caller that wants the underline shape
- * instead — a row on a full-width hairline, content-sized tabs, the active one
- * wearing a 2px rule that sits on the line — passes `variant="line"`. The
- * hairline is the variant's own, so no consumer draws one around the list
- * (`docs/content/ui/product-principles.md`, *Tabs*). `tabsListVariants`
- * (a `cva`, unexported) holds both as data, the same shape `buttonVariants`
- * uses for its own variants, rather than as a chain of ternaries a second
- * shape would have to be threaded through by hand.
- *
- * The two previous shapes this file carried — a bordered `muted` segmented
- * control, and a full-width `border-b` list with a `border-primary` underline
- * — are both gone as literal recipes: Nova's `default` and `line` variants
- * replace them, and `TabsContent`'s baked `mt-3` is gone too, folded into the
- * `Tabs` root's own gap instead of living on the panel.
- *
- * ## The gap between the bar and the panel is the root's, and it knows the variant
- *
- * Nova's `gap-2` for the segmented control — a switch sitting directly on its
- * panel. A `line` bar reads as navigation over a page's content, and content
- * under navigation takes the layout unit, `gap-4`; the root reads which it holds
- * through `:has()`, so the two values live in this one declaration and no consumer
- * ever adds a margin of its own (`docs/content/ui/product-principles.md`, *Tabs*).
- *
- * ## `data-state`, not a boolean `data-active`
- *
- * Radix's `Tabs.Trigger` reports which tab is selected as `data-state="active"
- * | "inactive"` and its orientation as `data-orientation="horizontal" |
- * "vertical"` — there is no separate boolean `data-active` or `data-horizontal`
- * attribute in the installed `@radix-ui/react-tabs`. Tailwind's bare `data-*`
- * variant only ever matches attribute *presence* (`&[data-active]`), so the
- * selectors here are the bracket form, `data-[state=active]:` and
- * `group-data-[orientation=horizontal]/tabs:`, wired to the attribute Radix
- * actually sets rather than to a same-looking one it does not.
- *
- * ## The focus ring
- *
- * `focus-visible:ring-[3px] focus-visible:ring-ring/50` plus a 1px
- * `outline-ring` matches every other Nova control (`Button`, `Input`,
- * `SelectTrigger`): one focus idiom regardless of which variant's background
- * sits underneath it.
- */
-
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cva, type VariantProps } from "class-variance-authority";
-import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
-
-import { cn } from "../lib/cn";
-
-export const Tabs = forwardRef<
-  ElementRef<typeof TabsPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
->(function Tabs({ className, orientation = "horizontal", ...props }, ref) {
-  return (
-    <TabsPrimitive.Root
-      ref={ref}
-      orientation={orientation}
-      className={cn(
-        "group/tabs flex gap-2 has-[[data-variant=line]]:gap-4 data-[orientation=horizontal]:flex-col",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] " +
-    "text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 " +
-    "group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col " +
-    "data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "w-full justify-start gap-1 border-b bg-transparent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export const TabsList = forwardRef<
-  ElementRef<typeof TabsPrimitive.List>,
-  ComponentPropsWithoutRef<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>
->(function TabsList({ className, variant = "default", ...props }, ref) {
-  return (
-    <TabsPrimitive.List
-      ref={ref}
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-
-export const TabsTrigger = forwardRef<
-  ElementRef<typeof TabsPrimitive.Trigger>,
-  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(function TabsTrigger({ className, ...props }, ref) {
-  return (
-    <TabsPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 " +
-          "rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap " +
-          "text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full " +
-          "group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground " +
-          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " +
-          "focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none " +
-          "disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 " +
-          "dark:text-muted-foreground dark:hover:text-foreground " +
-          "group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm " +
-          "group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none " +
-          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:bg-transparent " +
-          "group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent " +
-          "dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent " +
-          "dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background data-[state=active]:text-foreground " +
-          "dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 " +
-          "dark:data-[state=active]:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity " +
-          "group-data-[orientation=horizontal]/tabs:after:inset-x-0 " +
-          "group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] " +
-          "group-data-[orientation=horizontal]/tabs:after:h-0.5 " +
-          "group-data-[orientation=vertical]/tabs:after:inset-y-0 " +
-          "group-data-[orientation=vertical]/tabs:after:-right-1 " +
-          "group-data-[orientation=vertical]/tabs:after:w-0.5 " +
-          "group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-export const TabsContent = forwardRef<
-  ElementRef<typeof TabsPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(function TabsContent({ className, ...props }, ref) {
-  return (
-    <TabsPrimitive.Content ref={ref} className={cn("flex-1 text-sm outline-none", className)} {...props} />
-  );
-});
diff --git a/frontend/ui-core/src/primitives/alert.tsx b/frontend/ui-core/src/primitives/alert.tsx
new file mode 100644
index 00000000..8c88a3e1
--- /dev/null
+++ b/frontend/ui-core/src/primitives/alert.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/cn"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/frontend/ui-core/src/primitives/badge.tsx b/frontend/ui-core/src/primitives/badge.tsx
new file mode 100644
index 00000000..10549b27
--- /dev/null
+++ b/frontend/ui-core/src/primitives/badge.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        success:
+          "bg-emerald-500/10 text-emerald-700 focus-visible:ring-emerald-500/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:focus-visible:ring-emerald-400/40 [a]:hover:bg-emerald-500/20 dark:[a]:hover:bg-emerald-400/20",
+        warning:
+          "bg-amber-500/10 text-amber-700 focus-visible:ring-amber-500/20 dark:bg-amber-400/10 dark:text-amber-400 dark:focus-visible:ring-amber-400/40 [a]:hover:bg-amber-500/20 dark:[a]:hover:bg-amber-400/20",
+        info:
+          "bg-sky-500/10 text-sky-700 focus-visible:ring-sky-500/20 dark:bg-sky-400/10 dark:text-sky-400 dark:focus-visible:ring-sky-400/40 [a]:hover:bg-sky-500/20 dark:[a]:hover:bg-sky-400/20",
+        quiet:
+          "bg-muted text-muted-foreground [a]:hover:bg-muted/80",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/ui-core/src/primitives/button.tsx b/frontend/ui-core/src/primitives/button.tsx
new file mode 100644
index 00000000..baa8437e
--- /dev/null
+++ b/frontend/ui-core/src/primitives/button.tsx
@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/frontend/ui-core/src/primitives/card.tsx b/frontend/ui-core/src/primitives/card.tsx
new file mode 100644
index 00000000..2bd2186c
--- /dev/null
+++ b/frontend/ui-core/src/primitives/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/frontend/ui-core/src/primitives/combobox.test.tsx b/frontend/ui-core/src/primitives/combobox.test.tsx
index 96eb6cb3..9d7f5663 100644
--- a/frontend/ui-core/src/primitives/combobox.test.tsx
+++ b/frontend/ui-core/src/primitives/combobox.test.tsx
@@ -1,249 +1,38 @@
-/**
- * The combobox primitive: filtering, the four keys, and the footer row.
- *
- * Written against the primitive rather than through `ClassField`, because the
- * behaviour is the primitive's and the field is one caller of it. What the field
- * adds — swatches, hotkeys, recency ordering, "create this class" — is asserted
- * in `classField.test.tsx`.
- */
-
 import { render, screen } from "@testing-library/react";
-import { userEvent } from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import { useState, type JSX } from "react";
-
-import { Combobox, type ComboboxFooter } from "./Combobox";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "./combobox";
 
-const FRUIT = ["apricot", "Banana", "cherry", "blackcurrant"];
+const FRUIT = ["apple", "banana", "cherry"];
 
-/** The primitive with `open` hoisted, which is how every caller drives it. */
-function Harness({
-  onSelect,
-  footer,
-  items = FRUIT,
-}: {
-  readonly onSelect?: (item: string) => void;
-  readonly footer?: (query: string) => ComboboxFooter | null;
-  readonly items?: readonly string[];
-}): JSX.Element {
-  const [open, setOpen] = useState(false);
+function Demo() {
   return (
-    <Combobox
-      label="Fruit"
-      trigger={<span>Pick one</span>}
-      items={items}
-      itemKey={(item) => item}
-      itemLabel={(item) => item}
-      renderItem={(item) => <span>{item}</span>}
-      onSelect={onSelect ?? (() => {})}
-      open={open}
-      onOpenChange={setOpen}
-      {...(footer === undefined ? {} : { footer })}
-    />
+    <Combobox items={FRUIT}>
+      <ComboboxInput placeholder="Pick" aria-label="Fruit" />
+      <ComboboxContent>
+        <ComboboxEmpty>No matches</ComboboxEmpty>
+        <ComboboxList>{(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}</ComboboxList>
+      </ComboboxContent>
+    </Combobox>
   );
 }
 
-async function openIt(): Promise<void> {
-  await userEvent.click(screen.getByTestId("combobox-trigger"));
-  expect(await screen.findByTestId("combobox-input")).toBeDefined();
-}
-
-describe("filtering", () => {
-  it("matches anywhere in the label, not only at the start", async () => {
-    // Substring, deliberately: a person hunting `blackcurrant` in a forty-class
-    // schema is as likely to type `currant` as `black`.
-    render(<Harness />);
-    await openIt();
-    await userEvent.type(screen.getByTestId("combobox-input"), "curr");
-
-    expect(screen.getByTestId("combobox-option-blackcurrant")).toBeDefined();
-    expect(screen.queryByTestId("combobox-option-cherry")).toBeNull();
-  });
-
-  it("ignores case in both directions", async () => {
-    render(<Harness />);
-    await openIt();
-    await userEvent.type(screen.getByTestId("combobox-input"), "BAN");
-
-    expect(screen.getByTestId("combobox-option-Banana")).toBeDefined();
-  });
-
-  it("says so when nothing matches, rather than rendering an empty box", async () => {
-    render(<Harness />);
-    await openIt();
-    await userEvent.type(screen.getByTestId("combobox-input"), "durian");
-
-    expect(screen.getByTestId("combobox-empty")).toBeDefined();
-  });
-
-  it("starts from the whole list again on every open", async () => {
-    // A picker that reopened holding the last query would make the second use of
-    // it a puzzle: the list is short for a reason nobody can see.
-    render(<Harness />);
-    await openIt();
-    await userEvent.type(screen.getByTestId("combobox-input"), "ban");
-    await userEvent.keyboard("{Escape}");
-
-    await openIt();
-    expect((screen.getByTestId("combobox-input") as HTMLInputElement).value).toBe("");
-    expect(screen.getAllByRole("option")).toHaveLength(FRUIT.length);
-  });
-});
-
-describe("the keyboard", () => {
-  it("walks the list with the arrows and takes the row Enter is on", async () => {
-    const onSelect = vi.fn();
-    render(<Harness onSelect={onSelect} />);
-    await openIt();
-
-    await userEvent.keyboard("{ArrowDown}{ArrowDown}{Enter}");
-
-    expect(onSelect).toHaveBeenCalledWith("cherry");
-  });
-
-  it("wraps at both ends, because the last row is the one worth reaching", async () => {
-    const onSelect = vi.fn();
-    render(<Harness onSelect={onSelect} />);
-    await openIt();
-
-    // Up from the first row lands on the last.
-    await userEvent.keyboard("{ArrowUp}{Enter}");
-
-    expect(onSelect).toHaveBeenCalledWith("blackcurrant");
-  });
-
-  it("closes on Escape without selecting anything", async () => {
-    const onSelect = vi.fn();
-    render(<Harness onSelect={onSelect} />);
-    await openIt();
-    await userEvent.keyboard("{Escape}");
-
-    expect(screen.queryByTestId("combobox-input")).toBeNull();
-    expect(onSelect).not.toHaveBeenCalled();
-  });
-
-  it("keeps the ring inside the list as typing shortens it", async () => {
-    // Clamped rather than reset: narrowing six rows to two should leave the
-    // highlight on the last one, not throw it back to the top.
-    const onSelect = vi.fn();
-    render(<Harness onSelect={onSelect} />);
-    await openIt();
-    await userEvent.keyboard("{ArrowDown}{ArrowDown}{ArrowDown}");
-    // `an` matches two — "Banana" and "black-curr-ant" — so the list goes from
-    // four rows to two with the ring sitting past the end of it.
-    await userEvent.type(screen.getByTestId("combobox-input"), "an");
-    await userEvent.keyboard("{Enter}");
-
-    // The **last** of the two, not the first: clamped back inside the list
-    // rather than reset to the top, which is what would have happened if the
-    // filter simply zeroed the ring.
-    expect(onSelect).toHaveBeenCalledWith("blackcurrant");
-  });
-});
-
-describe("the footer row", () => {
-  const creating = (query: string): ComboboxFooter | null =>
-    query === "" ? null : { label: `Create "${query}"`, onSelect: () => {} };
-
-  it("appears only once something is typed", async () => {
-    render(<Harness footer={creating} />);
-    await openIt();
-    expect(screen.queryByTestId("combobox-footer")).toBeNull();
-
-    await userEvent.type(screen.getByTestId("combobox-input"), "durian");
-    expect(screen.getByTestId("combobox-footer").textContent).toBe('Create "durian"');
-  });
-
-  it("is an option, so the arrows walk past the matches onto it", async () => {
-    // The whole reason it is a `role="option"` in the listbox rather than a
-    // button underneath. **Driven with a query that still matches something**,
-    // deliberately: with an empty list the footer is row 0 and Enter reaches it
-    // whether or not the arrow keys count it, so a no-match scenario cannot tell
-    // a reachable footer from an unreachable one. Here it is row 1, and only a
-    // row count that includes it gets there.
-    const create = vi.fn();
-    const onSelect = vi.fn();
-    render(
-      <Harness
-        onSelect={onSelect}
-        footer={(query) => (query === "" ? null : { label: "Create", onSelect: create })}
-      />,
-    );
-    await openIt();
-    await userEvent.type(screen.getByTestId("combobox-input"), "apri");
-    expect(screen.getAllByRole("option")).toHaveLength(2);
-
-    await userEvent.keyboard("{ArrowDown}{Enter}");
-
-    expect(create).toHaveBeenCalledTimes(1);
-    expect(onSelect).not.toHaveBeenCalled();
-  });
-
-  it("wraps back to the first match from the footer", async () => {
-    // The other half of the same claim: if the footer were outside the row count
-    // the wrap would be over the items alone and this would select "apricot".
-    const create = vi.fn();
-    const onSelect = vi.fn();
-    render(
-      <Harness
-        onSelect={onSelect}
-        footer={(query) => (query === "" ? null : { label: "Create", onSelect: create })}
-      />,
-    );
-    await openIt();
-    await userEvent.type(screen.getByTestId("combobox-input"), "apri");
-    await userEvent.keyboard("{ArrowUp}{Enter}");
-
-    expect(create).toHaveBeenCalledTimes(1);
-  });
-
-  it("is the only row when the filter matched nothing, and Enter takes it", async () => {
-    const create = vi.fn();
-    render(<Harness footer={(query) => (query === "" ? null : { label: "Create", onSelect: create })} />);
-    await openIt();
-    await userEvent.type(screen.getByTestId("combobox-input"), "durian");
-    await userEvent.keyboard("{Enter}");
-
-    expect(create).toHaveBeenCalledTimes(1);
-    expect(screen.queryByTestId("combobox-empty")).toBeNull();
-  });
-});
-
-describe("the ARIA contract", () => {
-  it("names the listbox it controls and the option the ring is on", async () => {
-    render(<Harness />);
-    await openIt();
-
-    const field = screen.getByTestId("combobox-input");
-    const list = screen.getByRole("listbox");
-    expect(field.getAttribute("aria-expanded")).toBe("true");
-    expect(field.getAttribute("aria-controls")).toBe(list.id);
-    // The active descendant is what a screen reader announces as the cursor
-    // moves; without it the arrows move a highlight nobody is told about.
-    expect(field.getAttribute("aria-activedescendant")).toBe(
-      screen.getAllByRole("option")[0].id,
-    );
-
-    await userEvent.keyboard("{ArrowDown}");
-    expect(field.getAttribute("aria-activedescendant")).toBe(
-      screen.getAllByRole("option")[1].id,
-    );
-  });
-
-  it("marks exactly one option selected at a time", async () => {
-    render(<Harness />);
-    await openIt();
-    await userEvent.keyboard("{ArrowDown}");
-
-    const selected = screen
-      .getAllByRole("option")
-      .filter((option) => option.getAttribute("aria-selected") === "true");
-    expect(selected).toHaveLength(1);
-    expect(selected[0].textContent).toBe("Banana");
-  });
-
-  it("says it is collapsed while it is", () => {
-    render(<Harness />);
-    expect(screen.getByTestId("combobox-trigger").getAttribute("aria-expanded")).toBe("false");
+describe("combobox", () => {
+  it("filters as you type and offers the survivors as options", async () => {
+    const user = userEvent.setup();
+    render(<Demo />);
+    const input = screen.getByRole("combobox", { name: "Fruit" });
+    await user.type(input, "an");
+    expect(await screen.findByRole("option", { name: "banana" })).toBeTruthy();
+    expect(screen.queryByRole("option", { name: "cherry" })).toBeNull();
+  });
+  it("closes on Escape", async () => {
+    const user = userEvent.setup();
+    render(<Demo />);
+    const input = screen.getByRole("combobox", { name: "Fruit" });
+    await user.type(input, "a");
+    await screen.findByRole("option", { name: "apple" });
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("option", { name: "apple" })).toBeNull();
   });
 });
diff --git a/frontend/ui-core/src/primitives/combobox.tsx b/frontend/ui-core/src/primitives/combobox.tsx
new file mode 100644
index 00000000..174177df
--- /dev/null
+++ b/frontend/ui-core/src/primitives/combobox.tsx
@@ -0,0 +1,299 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "./input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("dark group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/frontend/ui-core/src/primitives/dialog.tsx b/frontend/ui-core/src/primitives/dialog.tsx
new file mode 100644
index 00000000..cf7e8c6f
--- /dev/null
+++ b/frontend/ui-core/src/primitives/dialog.tsx
@@ -0,0 +1,166 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/frontend/ui-core/src/primitives/dropdown-menu.tsx b/frontend/ui-core/src/primitives/dropdown-menu.tsx
new file mode 100644
index 00000000..7f5f6fdf
--- /dev/null
+++ b/frontend/ui-core/src/primitives/dropdown-menu.tsx
@@ -0,0 +1,267 @@
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("dark z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("dark z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/frontend/ui-core/src/primitives/field.tsx b/frontend/ui-core/src/primitives/field.tsx
new file mode 100644
index 00000000..47a9ee7c
--- /dev/null
+++ b/frontend/ui-core/src/primitives/field.tsx
@@ -0,0 +1,236 @@
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/cn"
+import { Label } from "./label"
+import { Separator } from "./separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/frontend/ui-core/src/primitives/input-group.tsx b/frontend/ui-core/src/primitives/input-group.tsx
new file mode 100644
index 00000000..60a5c8e0
--- /dev/null
+++ b/frontend/ui-core/src/primitives/input-group.tsx
@@ -0,0 +1,154 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/frontend/ui-core/src/primitives/input.tsx b/frontend/ui-core/src/primitives/input.tsx
new file mode 100644
index 00000000..531fc6ab
--- /dev/null
+++ b/frontend/ui-core/src/primitives/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/frontend/ui-core/src/primitives/label.tsx b/frontend/ui-core/src/primitives/label.tsx
new file mode 100644
index 00000000..16076f0f
--- /dev/null
+++ b/frontend/ui-core/src/primitives/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/frontend/ui-core/src/primitives/primitives.test.tsx b/frontend/ui-core/src/primitives/primitives.test.tsx
index 17f83054..ae86045c 100644
--- a/frontend/ui-core/src/primitives/primitives.test.tsx
+++ b/frontend/ui-core/src/primitives/primitives.test.tsx
@@ -3,9 +3,14 @@
  *
  * Not a snapshot of every class string — that would pin the design system to
  * whatever it happened to be on the day. What is asserted here is the handful of behaviours a screen
- * would silently lose: the merge that makes `className` a real override, the
- * button type that stops a "Cancel" submitting a form, the `asChild` that keeps a
- * link a link, and the role an error is announced with.
+ * would silently lose: the merge that makes `className` a real override — and the
+ * two geometry overrides that ride on it, `inlineLink` and `menuSurface`, whose
+ * whole job is to beat a canonical utility — the `asChild` that keeps a link a
+ * link, and the role an error is announced with.
+ *
+ * The button no longer defaults `type`, so nothing here stops a "Cancel"
+ * submitting a form; that is a call-site property now, and
+ * `tests/scripts/form_buttons.test.mjs` is what holds it.
  *
  * This file is also the reason the jsdom harness exists at all: standing the
  * environment up once here is cheaper than the first screen that needs it doing so
@@ -17,37 +22,40 @@ import userEvent from "@testing-library/user-event";
 import type { JSX } from "react";
 import { describe, expect, it } from "vitest";
 
-import { Alert, Badge } from "./Badge";
-import { Button } from "./Button";
-import { Card, CardTitle } from "./Card";
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./Dialog";
-import { Progress } from "./Feedback";
-import { FieldError, Input, Label } from "./Input";
+import { inlineLink } from "../lib/button";
+import { menuSurface } from "../lib/menu";
+import { progressAria } from "../lib/progress";
+import { twoLineTrigger } from "../lib/select";
+import { Alert, AlertDescription, AlertTitle } from "./alert";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Card, CardTitle } from "./card";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "./Menu";
+} from "./dropdown-menu";
+import { Progress } from "./progress";
+import { FieldError } from "./field";
+import { Input } from "./input";
+import { Label } from "./label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "./Select";
-import { Table, TableBody, TableEmpty } from "./Table";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
+} from "./select";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet";
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "./table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 
 describe("Button", () => {
-  it("defaults to type=button, so a Cancel does not submit its form", () => {
-    render(<Button>Cancel</Button>);
-    expect(screen.getByRole("button", { name: "Cancel" })).toHaveProperty("type", "button");
-  });
-
   it("keeps an explicit type", () => {
-    render(<Button type="submit">Save</Button>);
-    expect(screen.getByRole("button", { name: "Save" })).toHaveProperty("type", "submit");
+    render(<Button type="submit">Go</Button>);
+    expect(screen.getByRole("button").getAttribute("type")).toBe("submit");
   });
 
   it("lets a caller override a conflicting utility rather than emitting both", () => {
@@ -63,7 +71,7 @@ describe("Button", () => {
 
   it("renders the child element with asChild, so a link stays a link", () => {
     render(
-      <Button asChild variant="primary">
+      <Button asChild variant="default">
         <a href="/projects">Projects</a>
       </Button>,
     );
@@ -74,47 +82,62 @@ describe("Button", () => {
     expect(link.className).toContain("bg-primary");
   });
 
-  it("underlines a link button at rest, not only under the pointer", () => {
-    render(<Button variant="link">Browse dataset</Button>);
-    const classes = screen.getByRole("button").className.split(" ");
-    expect(classes).toContain("underline");
-    expect(classes).not.toContain("hover:underline");
+  it("styles a link button as an underline-on-hover text link", () => {
+    render(<Button variant="link">More</Button>);
+
+    const classes = screen.getByRole("button").className;
+    // The underline arrives on hover. A rule that underlined at rest would look
+    // like a link in a screenshot and read as one to `toContain("underline")`,
+    // which is why the resting state is asserted as an absence and the utility
+    // is matched whole — `hover:underline` and `underline-offset-4` both contain
+    // the substring.
+    expect(classes).toContain("hover:underline");
+    expect(classes).not.toMatch(/(^|\s)underline(\s|$)/);
   });
 
-  it("collapses a link button to inline geometry, whatever size says", () => {
+  it("hands back the height and padding a link button in prose cannot keep", () => {
     render(
-      <Button variant="link" size="sm">
-        Open batch
+      <Button variant="link" className={inlineLink}>
+        More
       </Button>,
     );
+
+    // `Button` merges `className` over `buttonVariants` with tailwind-merge, so
+    // this is the merge itself: canonical's `h-8 px-2.5` is gone from the
+    // rendered attribute rather than merely outranked by a later rule.
     const classes = screen.getByRole("button").className.split(" ");
     expect(classes).toContain("h-auto");
     expect(classes).toContain("p-0");
-    expect(classes).not.toContain("h-7");
+    expect(classes).not.toContain("h-8");
+    expect(classes).not.toContain("px-2.5");
   });
 });
 
 describe("Alert and Badge", () => {
-  it("announces a destructive alert and stays quiet for an informational one", () => {
-    const { rerender } = render(<Alert variant="destructive" title="PROJECT_NOT_FOUND" />);
-    expect(screen.getByRole("alert")).toHaveProperty("textContent", "PROJECT_NOT_FOUND");
-
-    rerender(<Alert title="Nothing to do yet" />);
-    expect(screen.queryByRole("alert")).toBeNull();
-  });
-
-  it("renders a node title, which the native attribute could not hold", () => {
+  it("announces an alert, and composes its title and description", () => {
     render(
-      <Alert variant="destructive" title={<span data-testid="icon">!</span>}>
-        the message
+      <Alert variant="destructive">
+        <AlertTitle>Refused</AlertTitle>
+        <AlertDescription>because</AlertDescription>
       </Alert>,
     );
-    expect(screen.getByTestId("icon")).not.toBeNull();
+    const alert = screen.getByRole("alert");
+    expect(alert.textContent).toContain("Refused");
+    expect(alert.textContent).toContain("because");
   });
 
-  it("gives a badge the accent only through the accent variant", () => {
-    render(<Badge variant="accent">annotated</Badge>);
-    expect(screen.getByText("annotated").className).toContain("border-primary");
+  it("marks a badge with its variant, so a style can be keyed on data rather than colour", () => {
+    render(<Badge variant="success">done</Badge>);
+    expect(screen.getByText("done").getAttribute("data-variant")).toBe("success");
+    expect(screen.getByText("done").getAttribute("data-slot")).toBe("badge");
+  });
+
+  it.each(["success", "warning", "info", "quiet"] as const)("%s is a Badge variant keyed on data", (variant) => {
+    render(<Badge variant={variant}>x</Badge>);
+    const el = screen.getByText("x");
+    expect(el.getAttribute("data-variant")).toBe(variant);
+    expect(el.className).toContain("border-transparent");
+    expect(el.className).not.toMatch(/border-(emerald|amber|sky)/);
   });
 });
 
@@ -136,24 +159,28 @@ describe("fields", () => {
 });
 
 /**
- * The two-line option — a primitive variant rather than one screen's styling,
- * which is why it is asserted here.
+ * The two-line option — composed at the call site rather than a primitive prop,
+ * which is why what is asserted here is the trigger's own behaviour and not a
+ * layout this file would otherwise have to keep in step with a call site.
  *
  * The claim worth a test is the one that is easy to lose: the trigger shows the
  * *same* two lines the list does, because Radix renders the selected item's own
- * `ItemText` into it. A second copy of the layout at the call site would look
+ * children into it. A second copy of the layout at the call site would look
  * identical the day it was written and drift the day either half moved.
  */
 describe("Select", () => {
   function pickOne(): JSX.Element {
     return (
       <Select defaultValue="a">
-        <SelectTrigger data-testid="model">
+        <SelectTrigger data-testid="model" className={twoLineTrigger}>
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="a" meta="311.9 MB · tiny">
-            org/model-tiny
+          <SelectItem value="a">
+            <span className="flex flex-col items-start">
+              <span>org/model-tiny</span>
+              <span className="text-xs text-muted-foreground">311.9 MB · tiny</span>
+            </span>
           </SelectItem>
           <SelectItem value="b">org/model-large</SelectItem>
         </SelectContent>
@@ -179,16 +206,15 @@ describe("Select", () => {
     // one-line control on Nova's contract height and lets a two-line one grow.
     const trigger = screen.getByTestId("model");
     expect(trigger.className).toContain("min-h-8");
-    expect(trigger.className).not.toMatch(/(^|\s)h-8(\s|$)/);
     // Nothing truncates: half a model id is not a model id.
     expect(trigger.className).not.toContain("truncate");
-  });
-
-  it("leaves an option with no meta exactly as it was", async () => {
-    render(pickOne());
-    await userEvent.click(screen.getByTestId("model"));
-    const plain = screen.getByRole("option", { name: "org/model-large" });
-    expect(plain.querySelector(".text-muted-foreground")).toBeNull();
+    // `twoLineTrigger` names canonical's own modifier chains, so `cn`'s merge
+    // replaces the fixed height and the value clamp rather than stacking beside
+    // them — a real check of the merge at render, not an echo of the constant.
+    expect(trigger.className).toContain("data-[size=default]:h-auto");
+    expect(trigger.className).toContain("line-clamp-none");
+    expect(trigger.className).not.toContain("data-[size=default]:h-8");
+    expect(trigger.className).not.toContain("line-clamp-1");
   });
 
   it("floors the open list at the closed control's width", async () => {
@@ -196,32 +222,36 @@ describe("Select", () => {
     await userEvent.click(screen.getByTestId("model"));
     const viewport = document.querySelector("[data-radix-select-viewport]");
     expect(viewport).not.toBeNull();
-    const classes = (viewport as HTMLElement).className.split(" ");
-    expect(classes).toContain("w-full");
-    expect(classes).toContain("min-w-(--radix-select-trigger-width)");
+    const className = (viewport as HTMLElement).className;
+    expect(className).toContain("w-full");
+    expect(className).toContain("min-w-(--radix-select-trigger-width)");
   });
 });
 
 describe("Card and Table", () => {
-  it("gives a card title a heading role, so a screen is navigable", () => {
+  it("marks a card title with its slot, for the styling that reads it", () => {
     render(
       <Card>
         <CardTitle>Classes</CardTitle>
       </Card>,
     );
-    expect(screen.getByRole("heading", { name: "Classes" })).not.toBeNull();
+    expect(screen.getByText("Classes").getAttribute("data-slot")).toBe("card-title");
   });
 
   it("keeps the table's header while the body is empty", () => {
     render(
       <Table>
-        <TableBody>
-          <TableEmpty colSpan={3}>No batches yet</TableEmpty>
-        </TableBody>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>State</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody />
       </Table>,
     );
-    expect(screen.getByRole("table")).not.toBeNull();
-    expect(screen.getByText("No batches yet")).not.toBeNull();
+    expect(screen.getByRole("columnheader", { name: "Name" })).not.toBeNull();
+    expect(screen.getByRole("columnheader", { name: "State" })).not.toBeNull();
   });
 });
 
@@ -294,20 +324,24 @@ describe("Tabs", () => {
 
 describe("Progress", () => {
   it("reports its value to assistive technology, not only as a width", () => {
-    render(<Progress value={42} aria-label="Ingest" />);
+    // Canonical `Progress` reads `value` only to size the indicator and never
+    // forwards it to Radix's `Root`, so `progressAria` says it again — every
+    // caller in the product spreads it beside `value` for exactly this reason.
+    render(<Progress value={42} {...progressAria(42)} aria-label="Ingest" />);
     expect(screen.getByRole("progressbar", { name: "Ingest" }).getAttribute("aria-valuenow")).toBe(
       "42",
     );
   });
 
-  it("fills with the functional colour by default and with success when asked", () => {
-    const { rerender } = render(<Progress value={42} aria-label="Ingest" />);
-    const fill = (): Element => screen.getByRole("progressbar").firstElementChild as Element;
-    expect(fill().className).toContain("bg-primary");
-    expect(fill().className).not.toContain("bg-success");
-    rerender(<Progress value={42} aria-label="Ingest" variant="success" />);
-    expect(fill().className).toContain("bg-success");
-    expect(fill().className).not.toContain("bg-primary");
+  it("fills with the functional colour, and carries the data-slot a caller can restyle from", () => {
+    // Canonical `Progress` has no `variant` prop and no notion of status — a
+    // batch's completion is an amount, not a polarity, so the indicator is
+    // always `bg-primary`. A caller who needs to reach it targets the
+    // `data-slot` it renders with, from its own `className` on `Root`.
+    render(<Progress value={42} aria-label="Ingest" />);
+    const fill = screen.getByRole("progressbar").firstElementChild as Element;
+    expect(fill.getAttribute("data-slot")).toBe("progress-indicator");
+    expect(fill.className).toBe("size-full flex-1 bg-primary transition-all");
   });
 
   it("hands its ref to the track element", () => {
@@ -326,18 +360,6 @@ describe("Progress", () => {
 });
 
 describe("Dialog", () => {
-  function Described({ second }: { readonly second: boolean }): JSX.Element {
-    return (
-      <Dialog open>
-        <DialogContent>
-          <DialogTitle>Narrowing</DialogTitle>
-          <DialogDescription>one class narrows</DialogDescription>
-          {second ? <DialogDescription>nothing becomes invalid</DialogDescription> : null}
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
   function describedBy(dialog: HTMLElement): readonly (string | null)[] {
     return (dialog.getAttribute("aria-describedby") ?? "")
       .split(" ")
@@ -345,15 +367,46 @@ describe("Dialog", () => {
       .map((id) => document.getElementById(id)?.textContent ?? null);
   }
 
-  it("points aria-describedby at every description, each under its own id", () => {
-    const { rerender } = render(<Described second />);
+  it("points aria-describedby at every description, each under its own id, when the caller names them", () => {
+    render(
+      <Dialog open>
+        <DialogContent aria-describedby="d1 d2">
+          <DialogTitle>Narrowing</DialogTitle>
+          <DialogDescription id="d1">one class narrows</DialogDescription>
+          <DialogDescription id="d2">nothing becomes invalid</DialogDescription>
+        </DialogContent>
+      </Dialog>,
+    );
     const dialog = screen.getByRole("dialog");
+    expect(dialog.getAttribute("aria-describedby")).toBe("d1 d2");
     expect(describedBy(dialog)).toEqual(["one class narrows", "nothing becomes invalid"]);
-    const ids = Array.from(dialog.querySelectorAll("p")).map((p) => p.id);
-    expect(new Set(ids).size).toBe(ids.length);
+    expect(document.getElementById("d1")?.textContent).toBe("one class narrows");
+    expect(document.getElementById("d2")?.textContent).toBe("nothing becomes invalid");
+  });
+
+  it("wires a single, unnamed description through Radix's own id by default", () => {
+    render(
+      <Dialog open>
+        <DialogContent>
+          <DialogTitle>Narrowing</DialogTitle>
+          <DialogDescription>one class narrows</DialogDescription>
+        </DialogContent>
+      </Dialog>,
+    );
+    const dialog = screen.getByRole("dialog");
+    const describedById = dialog.getAttribute("aria-describedby");
+    expect(describedById).toBeTruthy();
+    expect(document.getElementById(describedById ?? "")?.textContent).toBe("one class narrows");
+  });
+});
 
-    rerender(<Described second={false} />);
-    expect(describedBy(dialog)).toEqual(["one class narrows"]);
+describe("sheet", () => {
+  it("renders a dialog with its title and description wired by Radix", async () => {
+    render(<Sheet open><SheetContent><SheetHeader><SheetTitle>Filters</SheetTitle><SheetDescription>Narrow the list</SheetDescription></SheetHeader></SheetContent></Sheet>);
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog.getAttribute("data-slot")).toBe("sheet-content");
+    expect(dialog.getAttribute("data-side")).toBe("right");
+    expect(screen.getByRole("button", { name: "Close" })).toBeTruthy();
   });
 });
 
@@ -365,14 +418,23 @@ describe("DropdownMenu", () => {
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" size="icon" aria-label="Actions" />
         </DropdownMenuTrigger>
-        <DropdownMenuContent>
+        <DropdownMenuContent className={menuSurface}>
           <DropdownMenuItem>Check integrity of this connection</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>,
     );
     await user.click(screen.getByRole("button", { name: "Actions" }));
     const classes = (await screen.findByRole("menu")).className.split(" ");
-    expect(classes).toContain("min-w-32");
+    // Canonical pins the surface to the trigger with
+    // `w-(--radix-dropdown-menu-trigger-width)`, which behind this icon-sized
+    // button is the 128px floor — long items wrap. `menuSurface` is in the same
+    // utility group, so tailwind-merge drops canonical's at render and the
+    // rendered class list is the assertion: this is the merge, not a hope about
+    // cascade order.
+    expect(classes).toContain("w-auto");
     expect(classes).not.toContain("w-(--radix-dropdown-menu-trigger-width)");
+    // The floor is a different group and survives, which is what keeps a
+    // one-word menu from collapsing to its widest item.
+    expect(classes).toContain("min-w-32");
   });
 });
diff --git a/frontend/ui-core/src/primitives/progress.tsx b/frontend/ui-core/src/primitives/progress.tsx
new file mode 100644
index 00000000..5561569c
--- /dev/null
+++ b/frontend/ui-core/src/primitives/progress.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/frontend/ui-core/src/primitives/select.tsx b/frontend/ui-core/src/primitives/select.tsx
new file mode 100644
index 00000000..115b420d
--- /dev/null
+++ b/frontend/ui-core/src/primitives/select.tsx
@@ -0,0 +1,190 @@
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("dark relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/frontend/ui-core/src/primitives/separator.tsx b/frontend/ui-core/src/primitives/separator.tsx
new file mode 100644
index 00000000..e5f1419a
--- /dev/null
+++ b/frontend/ui-core/src/primitives/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/frontend/ui-core/src/primitives/sheet.tsx b/frontend/ui-core/src/primitives/sheet.tsx
new file mode 100644
index 00000000..5d00e191
--- /dev/null
+++ b/frontend/ui-core/src/primitives/sheet.tsx
@@ -0,0 +1,145 @@
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-3 right-3"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/frontend/ui-core/src/primitives/skeleton.tsx b/frontend/ui-core/src/primitives/skeleton.tsx
new file mode 100644
index 00000000..dfadacac
--- /dev/null
+++ b/frontend/ui-core/src/primitives/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "../lib/cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/frontend/ui-core/src/primitives/sonner.test.tsx b/frontend/ui-core/src/primitives/sonner.test.tsx
new file mode 100644
index 00000000..c6ee606d
--- /dev/null
+++ b/frontend/ui-core/src/primitives/sonner.test.tsx
@@ -0,0 +1,41 @@
+import { render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { toast } from "sonner";
+import { Toaster } from "./sonner";
+
+afterEach(() => document.documentElement.classList.remove("dark"));
+
+// sonner only mounts `[data-sonner-toaster]` once a toast exists (it maps
+// over `filteredToasts` and returns `null` for every position while that
+// list is empty), and the theme it stamps on that element lands in
+// `data-sonner-theme`, not `data-theme`. A toast is fired here to bring the
+// element into being; `waitFor` covers the render sonner does outside this
+// call stack when it flushes the toast through its module-global store.
+describe("toaster theme", () => {
+  it("is light when <html> carries no class", async () => {
+    const { container } = render(<Toaster />);
+    toast("hi");
+    await waitFor(() => {
+      expect(container.querySelector("[data-sonner-toaster]")?.getAttribute("data-sonner-theme")).toBe("light");
+    });
+  });
+  it("is dark when <html> carries .dark", async () => {
+    document.documentElement.classList.add("dark");
+    const { container } = render(<Toaster />);
+    toast("hi");
+    await waitFor(() => {
+      expect(container.querySelector("[data-sonner-toaster]")?.getAttribute("data-sonner-theme")).toBe("dark");
+    });
+  });
+  it("follows <html> from light to dark after mount, via the MutationObserver", async () => {
+    const { container } = render(<Toaster />);
+    toast("hi");
+    await waitFor(() => {
+      expect(container.querySelector("[data-sonner-toaster]")?.getAttribute("data-sonner-theme")).toBe("light");
+    });
+    document.documentElement.classList.add("dark");
+    await waitFor(() => {
+      expect(container.querySelector("[data-sonner-toaster]")?.getAttribute("data-sonner-theme")).toBe("dark");
+    });
+  });
+});
diff --git a/frontend/ui-core/src/primitives/sonner.tsx b/frontend/ui-core/src/primitives/sonner.tsx
new file mode 100644
index 00000000..4e09dca4
--- /dev/null
+++ b/frontend/ui-core/src/primitives/sonner.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+// SHADCN FRAMEWORK ADAPTER: shadcn's sonner reads next-themes (a Next.js
+// integration). VisionSet is Vite with one theme source, `.dark` on <html>
+// (styles.css `@custom-variant dark`). This hook is the only difference from
+// frontend/ui-core/shadcn/sonner.tsx; drop it if the app ever adopts a
+// provider that shadcn's file can read.
+function useTheme(): { theme: "light" | "dark" } {
+  const read = () => (typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light")
+  const [theme, setTheme] = React.useState<"light" | "dark">(read)
+  React.useEffect(() => {
+    const observer = new MutationObserver(() => setTheme(read()))
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
+    return () => observer.disconnect()
+  }, [])
+  return { theme }
+}
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/frontend/ui-core/src/primitives/table.tsx b/frontend/ui-core/src/primitives/table.tsx
new file mode 100644
index 00000000..593987c9
--- /dev/null
+++ b/frontend/ui-core/src/primitives/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/frontend/ui-core/src/primitives/tabs.tsx b/frontend/ui-core/src/primitives/tabs.tsx
new file mode 100644
index 00000000..7befd7c5
--- /dev/null
+++ b/frontend/ui-core/src/primitives/tabs.tsx
@@ -0,0 +1,88 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/frontend/ui-core/src/primitives/textarea.tsx b/frontend/ui-core/src/primitives/textarea.tsx
new file mode 100644
index 00000000..6f935a30
--- /dev/null
+++ b/frontend/ui-core/src/primitives/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/frontend/ui-core/src/primitives/tooltip.tsx b/frontend/ui-core/src/primitives/tooltip.tsx
new file mode 100644
index 00000000..badbca95
--- /dev/null
+++ b/frontend/ui-core/src/primitives/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/frontend/ui-core/src/screens/BatchLifecycle.tsx b/frontend/ui-core/src/screens/BatchLifecycle.tsx
index 8dbcc50c..eccf6331 100644
--- a/frontend/ui-core/src/screens/BatchLifecycle.tsx
+++ b/frontend/ui-core/src/screens/BatchLifecycle.tsx
@@ -27,23 +27,27 @@ import { SquareCheck } from "lucide-react";
 
 import { asApiError } from "../data/errors";
 import { refusalProse } from "../data/refusals";
-import { Button } from "../primitives/Button";
+import { inlineLink } from "../lib/button";
+import { progressAria } from "../lib/progress";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError, FieldHint, Input, Label } from "../primitives/Input";
-import { Progress } from "../primitives/Feedback";
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldDescription, FieldError } from "../primitives/field";
+import { Progress } from "../primitives/progress";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
+} from "../primitives/select";
 import { annotatedShare, outstandingWork } from "./batchState";
 import {
   useApproveBatch,
@@ -82,7 +86,7 @@ export function BatchProgressBar({
       <Progress
         aria-label="Annotation progress"
         value={share.percent}
-        variant="success"
+        {...progressAria(share.percent)}
         className="h-2 border border-border"
       />
       {draft ? (
@@ -156,7 +160,7 @@ export function CompleteBatchButton({
   return (
     <div className={className ?? "flex flex-col items-end gap-1"}>
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid={`complete-${batch.name}`}
         disabled={outstanding > 0 || finish.isPending}
@@ -255,10 +259,10 @@ export function ApproveDialog({
                 <SelectItem value="by_size">Jobs of N assets</SelectItem>
               </SelectContent>
             </Select>
-            <FieldHint>
+            <FieldDescription>
               The cut is exact — disjoint, and every asset in one job. An explicit list of
               segments is the SDK&rsquo;s and the API&rsquo;s, not a form&rsquo;s.
-            </FieldHint>
+            </FieldDescription>
           </div>
 
           {kind === "by_size" && (
@@ -272,9 +276,9 @@ export function ApproveDialog({
                 value={size}
                 onChange={(event) => setSize(event.target.value)}
               />
-              <FieldHint data-testid="partition-preview">
+              <FieldDescription data-testid="partition-preview">
                 {batch?.asset_count ?? 0} assets → {jobs} job{jobs === 1 ? "" : "s"}
-              </FieldHint>
+              </FieldDescription>
             </div>
           )}
 
@@ -297,6 +301,7 @@ export function ApproveDialog({
                 {onOpenSchema !== undefined && (
                   <Button
                     variant="link"
+                    className={inlineLink}
                     data-testid="approve-go-schema"
                     onClick={() => {
                       onClose();
@@ -313,11 +318,11 @@ export function ApproveDialog({
         </div>
 
         <DialogFooter>
-          <Button variant="secondary" data-testid="approve-cancel" onClick={onClose}>
+          <Button variant="outline" data-testid="approve-cancel" onClick={onClose}>
             Cancel
           </Button>
           <Button
-            variant="primary"
+            variant="default"
             data-testid="approve-submit"
             disabled={approve.isPending || (kind === "by_size" && !(count >= 1))}
             onClick={submit}
@@ -359,7 +364,7 @@ export function StartAnnotatingButton({
   return (
     <div className={className ?? "flex flex-col items-end gap-1"}>
       <Button
-        variant="primary"
+        variant="default"
         size="sm"
         data-testid="start-batch"
         disabled={start.isPending}
diff --git a/frontend/ui-core/src/screens/BatchesScreen.tsx b/frontend/ui-core/src/screens/BatchesScreen.tsx
index 99a238aa..e28cc80b 100644
--- a/frontend/ui-core/src/screens/BatchesScreen.tsx
+++ b/frontend/ui-core/src/screens/BatchesScreen.tsx
@@ -36,11 +36,12 @@ import { useState, type JSX } from "react";
 import { Async } from "../data/Async";
 import { BATCH_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-import { Badge } from "../primitives/Badge";
+import { inlineLink } from "../lib/button";
+import { Badge } from "../primitives/badge";
 import { SectionHeader } from "../patterns/SectionHeader";
-import { Button } from "../primitives/Button";
-import { FieldError } from "../primitives/Input";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/Table";
+import { Button } from "../primitives/button";
+import { FieldError } from "../primitives/field";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table";
 import { ApproveDialog, BatchProgressBar, CompleteBatchButton } from "./BatchLifecycle";
 import { ApproveAndStartButton } from "./ComposedTransitions";
 import { BATCH_STATE_VARIANT, batchStateLabel } from "./batchState";
@@ -89,7 +90,7 @@ export function BatchesScreen({
         actions={
           <>
             {onIngest !== undefined && (
-              <Button variant="secondary" data-testid="go-ingest" onClick={onIngest}>
+              <Button variant="outline" data-testid="go-ingest" onClick={onIngest}>
                 <Upload className="size-4" aria-hidden="true" />
                 Ingest
               </Button>
@@ -139,6 +140,7 @@ export function BatchesScreen({
                     <div className="flex flex-col items-start">
                       <Button
                         variant="link"
+                        className={inlineLink}
                         data-testid={`open-batch-${batch.name}`}
                         onClick={() => onOpenBatch(batch.id)}
                       >
@@ -161,11 +163,11 @@ export function BatchesScreen({
                     <div className="flex flex-col items-start gap-1">
                       {/* The label the gallery header already uses, rather than the
                           raw kernel identifier. */}
-                      <Badge variant={BATCH_STATE_VARIANT[batch.state] ?? "neutral"} data-testid={`state-${batch.name}`}>
+                      <Badge variant={BATCH_STATE_VARIANT[batch.state] ?? "secondary"} data-testid={`state-${batch.name}`}>
                         {batchStateLabel(batch.state)}
                       </Badge>
                       {batch.pre_label_run !== null && isLiveJobState(batch.pre_label_run.state) && (
-                        <Badge variant="accent" data-testid={`prelabel-live-${batch.id}`}>
+                        <Badge variant="default" data-testid={`prelabel-live-${batch.id}`}>
                           pre-labeling…
                         </Badge>
                       )}
@@ -289,7 +291,7 @@ function Lifecycle({
       // view — and a table holding a draft beside a queued batch used to render
       // several filled buttons down the same column, under a page header whose
       // "Annotate" is the actual forward action.
-      <Button variant="secondary" size="sm" data-testid={`approve-${batch.name}`} onClick={onApprove}>
+      <Button variant="outline" size="sm" data-testid={`approve-${batch.name}`} onClick={onApprove}>
         <Layers className="size-4" aria-hidden="true" />
         Approve
       </Button>
@@ -299,7 +301,7 @@ function Lifecycle({
     return (
       <div className="flex flex-col items-end gap-1">
         <Button
-          variant="secondary"
+          variant="outline"
           size="sm"
           data-testid={`start-${batch.name}`}
           disabled={start.isPending}
diff --git a/frontend/ui-core/src/screens/ComposedTransitions.tsx b/frontend/ui-core/src/screens/ComposedTransitions.tsx
index 5fb6377e..3b94e2b3 100644
--- a/frontend/ui-core/src/screens/ComposedTransitions.tsx
+++ b/frontend/ui-core/src/screens/ComposedTransitions.tsx
@@ -26,8 +26,8 @@ import { useState, type JSX } from "react";
 import { asApiError } from "../data/errors";
 import { BATCH_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-import { Button } from "../primitives/Button";
-import { FieldError } from "../primitives/Input";
+import { Button } from "../primitives/button";
+import { FieldError } from "../primitives/field";
 import { outstandingWork } from "./batchState";
 import { promotionSummary } from "./PromoteButton";
 import {
@@ -49,9 +49,9 @@ const SCHEMA_NOT_FOUND = "SCHEMA_NOT_FOUND";
 export interface ApproveAndStartButtonProps {
   readonly batch: Batch;
   readonly projectId: string;
-  /** The ingest outcome card's own filled control; a table row's is secondary. */
-  readonly variant?: "primary" | "secondary";
-  readonly size?: "sm" | "md";
+  /** The ingest outcome card's own filled control; a table row's is outline. */
+  readonly variant?: "default" | "outline";
+  readonly size?: "sm" | "default";
   readonly className?: string;
 }
 
@@ -66,7 +66,7 @@ export interface ApproveAndStartButtonProps {
 export function ApproveAndStartButton({
   batch,
   projectId,
-  variant = "secondary",
+  variant = "outline",
   size = "sm",
   className,
 }: ApproveAndStartButtonProps): JSX.Element | null {
@@ -172,7 +172,7 @@ export function CompleteAndPromoteButton({
     <div className={className ?? "flex flex-col items-end gap-1"}>
       {offered && (
         <Button
-          variant="secondary"
+          variant="outline"
           size="sm"
           data-testid={`complete-promote-${batch.name}`}
           disabled={outstanding > 0 || pending}
@@ -285,15 +285,15 @@ export function OutcomeNextStep({
           <ApproveAndStartButton
             batch={batch.data}
             projectId={projectId}
-            variant="primary"
-            size="md"
+            variant="default"
+            size="default"
             className="flex flex-col items-start gap-1"
           />
         </div>
       )}
       {onOpenBatch !== undefined && (
         <Button
-          variant={composed ? "secondary" : "primary"}
+          variant={composed ? "outline" : "default"}
           data-testid="open-batch"
           onClick={() => onOpenBatch(batchId)}
         >
diff --git a/frontend/ui-core/src/screens/CorrectionBatch.tsx b/frontend/ui-core/src/screens/CorrectionBatch.tsx
index 6fd8e5b7..59f85d5e 100644
--- a/frontend/ui-core/src/screens/CorrectionBatch.tsx
+++ b/frontend/ui-core/src/screens/CorrectionBatch.tsx
@@ -36,15 +36,19 @@ import { useState, type JSX } from "react";
 
 import { BATCH_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-import { Button } from "../primitives/Button";
+import { inlineLink } from "../lib/button";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError, FieldHint, Input, Label } from "../primitives/Input";
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldDescription, FieldError } from "../primitives/field";
 import { useCreateCorrection, type Batch } from "./queries";
 
 /** What a correction covers. `all` sends nothing and lets the server default. */
@@ -113,7 +117,7 @@ export function CorrectionButton({
   return (
     <>
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         className={className}
         data-testid={`correct-${batch.name}`}
@@ -235,10 +239,10 @@ function CorrectionDialog({
                 The {chosen.length} frame{chosen.length === 1 ? "" : "s"} selected
               </label>
             )}
-            <FieldHint>
+            <FieldDescription>
               The correction starts as a draft, so its frames can still change. Approving it pins
               the project’s current label schema — not the one {batch.name} was judged against.
-            </FieldHint>
+            </FieldDescription>
           </fieldset>
 
           {create.isError && (
@@ -247,11 +251,11 @@ function CorrectionDialog({
         </div>
 
         <DialogFooter>
-          <Button variant="secondary" onClick={onClose} disabled={create.isPending}>
+          <Button variant="outline" onClick={onClose} disabled={create.isPending}>
             Cancel
           </Button>
           <Button
-            variant="primary"
+            variant="default"
             data-testid="correction-submit"
             disabled={create.isPending || value.trim() === ""}
             onClick={submit}
@@ -293,7 +297,7 @@ export function CorrectionOf({
       ) : (
         <Button
           variant="link"
-          className="text-xs"
+          className={cn(inlineLink, "text-xs")}
           data-testid="open-parent-batch"
           onClick={onOpenParent}
         >
diff --git a/frontend/ui-core/src/screens/DatasetAssetDialog.tsx b/frontend/ui-core/src/screens/DatasetAssetDialog.tsx
index c38a76c8..8533fef5 100644
--- a/frontend/ui-core/src/screens/DatasetAssetDialog.tsx
+++ b/frontend/ui-core/src/screens/DatasetAssetDialog.tsx
@@ -28,8 +28,8 @@ import type { WireAnnotation } from "../annotator/jobQueries";
 import { refusalProse } from "../data/refusals";
 import { formatWhen } from "../lib/format";
 import { classColor } from "../palette";
-import { Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
 import { DescriptionList, DescriptionRow } from "../patterns/DataDisplay";
 import { StaticAnnotationOverlay } from "../patterns/StaticAnnotationOverlay";
 import {
@@ -38,7 +38,7 @@ import {
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
+} from "../primitives/dialog";
 import { useActiveSchema, useDatasetAssetAnnotations, type DatasetAsset } from "./queries";
 
 export interface DatasetAssetDialogProps {
@@ -140,7 +140,7 @@ export function DatasetAssetDialog({
         <DialogFooter className="mx-0 mb-0 flex-row flex-wrap items-center justify-between">
           <div className="flex items-center gap-1">
             <Button
-              variant="secondary"
+              variant="outline"
               size="sm"
               data-testid="preview-previous"
               aria-label="Previous image"
@@ -150,7 +150,7 @@ export function DatasetAssetDialog({
               <ChevronLeft aria-hidden="true" />
             </Button>
             <Button
-              variant="secondary"
+              variant="outline"
               size="sm"
               data-testid="preview-next"
               aria-label="Next image"
@@ -172,7 +172,7 @@ export function DatasetAssetDialog({
           </div>
           <div className="flex items-center gap-2">
             <Button
-              variant="secondary"
+              variant="outline"
               size="sm"
               data-testid="preview-remove"
               onClick={() => onRemove(asset)}
@@ -180,7 +180,7 @@ export function DatasetAssetDialog({
               <Trash2 aria-hidden="true" />
               Remove from dataset
             </Button>
-            <Button variant="secondary" size="sm" onClick={onClose}>
+            <Button variant="outline" size="sm" onClick={onClose}>
               Close
             </Button>
           </div>
diff --git a/frontend/ui-core/src/screens/DatasetScreen.tsx b/frontend/ui-core/src/screens/DatasetScreen.tsx
index 4e5d5acb..c8ff812b 100644
--- a/frontend/ui-core/src/screens/DatasetScreen.tsx
+++ b/frontend/ui-core/src/screens/DatasetScreen.tsx
@@ -50,20 +50,24 @@ import { useEffect, useState, type FormEvent, type JSX } from "react";
 
 import { Async } from "../data/Async";
 import { asApiError } from "../data/errors";
-import { Alert, Badge } from "../primitives/Badge";
+import { twoLineTrigger } from "../lib/select";
+import { Alert, AlertDescription, AlertTitle } from "../primitives/alert";
+import { Badge } from "../primitives/badge";
 import type { BadgeTone } from "./batchState";
 import { SectionHeader } from "../patterns/SectionHeader";
-import { Button } from "../primitives/Button";
-import { Card, CardAction, CardContent, CardHeader, CardTitle } from "../primitives/Card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/Tabs";
+import { Button } from "../primitives/button";
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "../primitives/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError, FieldHint, Input, Label } from "../primitives/Input";
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldDescription, FieldError } from "../primitives/field";
 import {
   classBlockers,
   describeClassCount,
@@ -72,10 +76,16 @@ import {
   lostClasses,
   refusalProse,
 } from "../data/refusals";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/Table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table";
 import { EmptyState, ErrorState } from "../patterns/AsyncStates";
 import { ExportTargetSelect } from "../patterns/ExportTargetSelect";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../primitives/Select";
 import { AssetThumbnail } from "./AssetThumbnail";
 import { DatasetAssetDialog, trunkAssetLabel } from "./DatasetAssetDialog";
 import { saveBlob } from "./download";
@@ -160,7 +170,7 @@ export function DatasetScreen({ projectId, tab, onTabChange }: DatasetScreenProp
           // `secondary`: the project's navigation holds the page's filled
           // action. One filled action per view.
           <Button
-            variant="secondary"
+            variant="outline"
             data-testid="publish-release"
             disabled={dataset.data === undefined}
             onClick={() => setPublishing(true)}
@@ -194,21 +204,21 @@ export function DatasetScreen({ projectId, tab, onTabChange }: DatasetScreenProp
             more than a scroll does. The padding pair keeps the focus ring off
             the scroller's clip. */}
         <div className="min-w-0 overflow-x-auto pb-1.5 -mb-1.5">
-        <TabsList variant="line">
+        <TabsList variant="line" className="w-full justify-start border-b">
           <TabsTrigger value="overview" data-testid="dataset-tab-overview">
             Overview
           </TabsTrigger>
           <TabsTrigger value="assets" data-testid="dataset-tab-assets">
             Assets
-            {stats.data !== undefined && <Badge>{stats.data.asset_count}</Badge>}
+            {stats.data !== undefined && <Badge variant="secondary">{stats.data.asset_count}</Badge>}
           </TabsTrigger>
           <TabsTrigger value="preprocessing" data-testid="dataset-tab-preprocessing">
             Pre-processing
-            {recipes.data !== undefined && <Badge>{recipes.data.total}</Badge>}
+            {recipes.data !== undefined && <Badge variant="secondary">{recipes.data.total}</Badge>}
           </TabsTrigger>
           <TabsTrigger value="releases" data-testid="dataset-tab-releases">
             Releases
-            {releases.data !== undefined && <Badge>{releases.data.total}</Badge>}
+            {releases.data !== undefined && <Badge variant="secondary">{releases.data.total}</Badge>}
           </TabsTrigger>
         </TabsList>
         </div>
@@ -359,7 +369,7 @@ function TrunkAssets({
               {offset + 1}&ndash;{Math.min(offset + TRUNK_PAGE_SIZE, total)} of {total}
             </span>
             <Button
-              variant="secondary"
+              variant="outline"
               size="sm"
               data-testid="trunk-previous"
               disabled={offset === 0}
@@ -368,7 +378,7 @@ function TrunkAssets({
               Previous
             </Button>
             <Button
-              variant="secondary"
+              variant="outline"
               size="sm"
               data-testid="trunk-next"
               disabled={offset + TRUNK_PAGE_SIZE >= total}
@@ -560,7 +570,7 @@ function RemoveAssetDialog({
           <FieldError data-testid="remove-asset-error">{refusalProse(remove.error)}</FieldError>
         )}
         <DialogFooter>
-          <Button variant="secondary" onClick={onClose}>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
@@ -609,12 +619,12 @@ function ReleaseCard({
   return (
     <Card data-testid={`release-${release.tag}`}>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
+        <CardTitle role="heading" aria-level={3} className="flex items-center gap-2">
           <Tag className="size-4 text-muted-foreground" aria-hidden="true" />
           {release.tag}
-          <Badge>v{release.schema_version}</Badge>
+          <Badge variant="secondary">v{release.schema_version}</Badge>
           {release.split !== null && release.split !== undefined && (
-            <Badge variant="accent" data-testid={`split-${release.tag}`}>
+            <Badge variant="default" data-testid={`split-${release.tag}`}>
               split
             </Badge>
           )}
@@ -632,12 +642,12 @@ function ReleaseCard({
         </p>
 
         <div className="flex flex-wrap items-center gap-2">
-          <Button variant="secondary" size="sm" data-testid={`export-${release.tag}`} onClick={() => setExporting(true)}>
+          <Button variant="outline" size="sm" data-testid={`export-${release.tag}`} onClick={() => setExporting(true)}>
             <Download className="size-4" aria-hidden="true" />
             Export
           </Button>
           <Button
-            variant="secondary"
+            variant="outline"
             size="sm"
             data-testid={`manifest-${release.tag}`}
             disabled={manifest.isPending}
@@ -729,9 +739,12 @@ function Verification({
 }): JSX.Element {
   if (!report.manifest_intact) {
     return (
-      <Alert variant="destructive" title="The manifest itself does not match its hash" data-testid={`verified-${tag}`}>
+      <Alert variant="destructive" data-testid={`verified-${tag}`}>
+        <AlertTitle>The manifest itself does not match its hash</AlertTitle>
+        <AlertDescription>
         Nothing else could be checked — every count in this release is derived from a
         document that is not the one its hash names.
+        </AlertDescription>
       </Alert>
     );
   }
@@ -744,10 +757,13 @@ function Verification({
     );
   }
   return (
-    <Alert variant="destructive" title="This release cannot be reproduced" data-testid={`verified-${tag}`}>
+    <Alert variant="destructive" data-testid={`verified-${tag}`}>
+      <AlertTitle>This release cannot be reproduced</AlertTitle>
+      <AlertDescription>
       {report.missing.length} missing · {report.corrupt.length} corrupt ·{" "}
       {report.cache_mismatches.length} cache mismatch
       {report.cache_mismatches.length === 1 ? "" : "es"} of {report.checked} checked.
+      </AlertDescription>
     </Alert>
   );
 }
@@ -822,7 +838,7 @@ function PublishDialog({
             />
             {/* The opposite of a project name, which is unique case-insensitively.
                 Two rules, each beside its own index. */}
-            <FieldHint>Unique per dataset, and case-sensitive.</FieldHint>
+            <FieldDescription>Unique per dataset, and case-sensitive.</FieldDescription>
           </div>
 
           <label className="flex items-center gap-2 text-sm">
@@ -897,12 +913,12 @@ function PublishDialog({
           )}
 
           <DialogFooter>
-            <Button variant="secondary" onClick={onClose}>
+            <Button type="button" variant="outline" onClick={onClose}>
               Cancel
             </Button>
             <Button
               type="submit"
-              variant="primary"
+              variant="default"
               data-testid="publish-submit"
               disabled={tag.trim() === "" || publish.isPending || (split && !balanced)}
             >
@@ -941,14 +957,13 @@ const JOB_STATE_LABEL: Record<string, string> = {
 };
 
 const JOB_STATE_VARIANT: Record<string, BadgeTone> = {
-  queued: "neutral",
-  running: "accent",
+  queued: "secondary",
+  running: "default",
   succeeded: "success",
   failed: "destructive",
-  cancelled: "neutral",
+  cancelled: "secondary",
 };
 
-
 /**
  * A recipe name is a slug, so a tilde can never be one — which is what makes it
  * safe as the "no recipe" option's value. `Select` refuses an empty string.
@@ -1097,17 +1112,17 @@ function ExportDialog({
             {/* Declared by the format, never by the release: a bbox-only format
                 loses a polygon whether or not today's dataset holds one. */}
             {lossy && (
-              <FieldHint data-testid="lossy-hint">
+              <FieldDescription data-testid="lossy-hint">
                 {chosen?.label} cannot take everything the schema allows.
-              </FieldHint>
+              </FieldDescription>
             )}
             {/* A formats read that failed is said, not swallowed: the hint is
                 absent for a reason, and the launch still asks before dropping. */}
             {chosen !== undefined && formats.isError && (
-              <FieldHint data-testid="lossy-unknown">
+              <FieldDescription data-testid="lossy-unknown">
                 Whether {chosen.label} loses anything could not be read — the export asks before
                 dropping a shape.
-              </FieldHint>
+              </FieldDescription>
             )}
           </div>
 
@@ -1118,26 +1133,36 @@ function ExportDialog({
                 for when there is something to choose. `None` is always an
                 option, because an export without a recipe applies no transform. */}
             {recipes.isError ? (
-              <FieldHint data-testid="export-recipes-error">
+              <FieldDescription data-testid="export-recipes-error">
                 {refusalProse(recipes.error)} The export runs without a recipe.
-              </FieldHint>
+              </FieldDescription>
             ) : recipes.data !== undefined && recipes.data.items.length === 0 ? (
-              <FieldHint data-testid="export-recipes-empty">
+              <FieldDescription data-testid="export-recipes-empty">
                 None yet — a recipe is written on the Pre-processing view. This export applies no
                 transform.
-              </FieldHint>
+              </FieldDescription>
             ) : (
               <Select value={recipe} onValueChange={setRecipe}>
-                <SelectTrigger id="export-recipe" data-testid="export-recipe">
+                <SelectTrigger id="export-recipe" data-testid="export-recipe" className={twoLineTrigger}>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value={NO_RECIPE} meta="Images and labels as the release holds them">
-                    None
+                  <SelectItem value={NO_RECIPE}>
+                    <span className="flex flex-col items-start">
+                      <span>None</span>
+                      <span className="text-xs text-muted-foreground">
+                        Images and labels as the release holds them
+                      </span>
+                    </span>
                   </SelectItem>
                   {(recipes.data?.items ?? []).map((one) => (
-                    <SelectItem key={one.name} value={one.name} meta={describeRecipeSpec(one.spec)}>
-                      {one.name}
+                    <SelectItem key={one.name} value={one.name}>
+                      <span className="flex flex-col items-start">
+                        <span>{one.name}</span>
+                        <span className="text-xs text-muted-foreground">
+                          {describeRecipeSpec(one.spec)}
+                        </span>
+                      </span>
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -1150,7 +1175,7 @@ function ExportDialog({
               below stay: a badge is the glance, prose is the answer. */}
           {shownState !== null && (
             <p className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Badge variant={JOB_STATE_VARIANT[shownState] ?? "neutral"} data-testid="export-job-state">
+              <Badge variant={JOB_STATE_VARIANT[shownState] ?? "secondary"} data-testid="export-job-state">
                 {JOB_STATE_LABEL[shownState] ?? shownState}
               </Badge>
               {job.data?.total !== null && job.data?.total !== undefined && (
@@ -1162,11 +1187,9 @@ function ExportDialog({
           )}
 
           {needsConsent && (
-            <Alert
-              variant="destructive"
-              title="Some shapes cannot be exported"
-              data-testid="lossy-consent"
-            >
+            <Alert variant="destructive" data-testid="lossy-consent">
+              <AlertTitle>Some shapes cannot be exported</AlertTitle>
+              <AlertDescription>
               {/* The sentence names the target and the counts when the 409
                   carried its report; without one, the vocabulary's own line. */}
               <p>
@@ -1196,6 +1219,7 @@ function ExportDialog({
                 />
                 Export anyway, accepting that the copy is incomplete.
               </label>
+              </AlertDescription>
             </Alert>
           )}
 
@@ -1223,11 +1247,11 @@ function ExportDialog({
         </div>
 
         <DialogFooter>
-          <Button variant="secondary" onClick={onClose}>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
-            variant="primary"
+            variant="default"
             data-testid="export-submit"
             // The consent gate: while the API is asking, the button stays shut until
             // the box is ticked. It is `allow_lossy` and never `confirm`.
diff --git a/frontend/ui-core/src/screens/DeleteBatch.tsx b/frontend/ui-core/src/screens/DeleteBatch.tsx
index ca3b1a9d..24e5c923 100644
--- a/frontend/ui-core/src/screens/DeleteBatch.tsx
+++ b/frontend/ui-core/src/screens/DeleteBatch.tsx
@@ -38,16 +38,18 @@ import { useState, type JSX } from "react";
 
 import { BATCH_ACTION, declares, withheldBecause } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-import { Button } from "../primitives/Button";
+import { cn } from "../lib/cn";
+import { menuSurface } from "../lib/menu";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError } from "../primitives/Input";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../primitives/Menu";
+} from "../primitives/dialog";
+import { FieldError } from "../primitives/field";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../primitives/dropdown-menu";
 import { useDeleteBatch, type Batch } from "./queries";
 
 export interface BatchOverflowMenuProps {
@@ -92,7 +94,7 @@ export function BatchOverflowMenu({
             <MoreHorizontal aria-hidden="true" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align={align} className="w-64">
+        <DropdownMenuContent align={align} className={cn(menuSurface, "w-64")}>
           {/*
             Disabled-with-reason rather than hidden: there *is* an operation
             behind this and a state that would enable it, which is the whole
@@ -102,7 +104,7 @@ export function BatchOverflowMenu({
             a menu item that cannot be hovered into is a reason nobody reads.
           */}
           <DropdownMenuItem
-            destructive={deletable}
+            variant={deletable ? "destructive" : "default"}
             disabled={!deletable}
             data-testid={`delete-batch-${batch.name}`}
             onSelect={() => setConfirming(true)}
@@ -171,7 +173,7 @@ function DeleteBatchDialog({
           <FieldError data-testid="delete-batch-error">{refusalProse(remove.error)}</FieldError>
         )}
         <DialogFooter>
-          <Button variant="secondary" onClick={onClose}>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
diff --git a/frontend/ui-core/src/screens/FrameGrid.tsx b/frontend/ui-core/src/screens/FrameGrid.tsx
index 9243a17c..b8660c2f 100644
--- a/frontend/ui-core/src/screens/FrameGrid.tsx
+++ b/frontend/ui-core/src/screens/FrameGrid.tsx
@@ -47,14 +47,14 @@ import { useWindowVirtualizer } from "@tanstack/react-virtual";
 import { Check, Eraser, SkipForward, Trash2, Undo2, X } from "lucide-react";
 
 import { Async } from "../data/Async";
-import { Button } from "../primitives/Button";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
+} from "../primitives/dialog";
 import { AssetThumbnail } from "./AssetThumbnail";
 import {
   ASSET_ACTION,
@@ -772,7 +772,7 @@ function BulkBar({
       </span>
 
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid="bulk-skip"
         disabled={skippable.length === 0 || bulk.isPending}
@@ -784,7 +784,7 @@ function BulkBar({
       </Button>
 
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid="bulk-restore"
         disabled={restorable.length === 0 || bulk.isPending}
@@ -802,7 +802,7 @@ function BulkBar({
         `return_to_annotator` pressed one frame at a time in the annotator.
       */}
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid="bulk-return"
         disabled={returnable.length === 0 || bulk.isPending}
@@ -814,7 +814,7 @@ function BulkBar({
       </Button>
 
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid="bulk-confirm"
         disabled={confirmable.length === 0 || bulk.isPending}
@@ -826,7 +826,7 @@ function BulkBar({
       </Button>
 
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid="bulk-discard"
         disabled={discardable.length === 0 || discard.isPending}
@@ -845,7 +845,7 @@ function BulkBar({
         thing a person cannot see from the tiles.
       */}
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid="bulk-remove"
         disabled={!removable || removalIds.length === 0 || remove.isPending}
@@ -1044,7 +1044,7 @@ function RemoveFromBatchDialog({
             holds them. Only this batch stops listing them.
           </DialogDescription>
         <DialogFooter>
-          <Button variant="secondary" onClick={onCancel} data-testid="remove-cancel">
+          <Button variant="outline" onClick={onCancel} data-testid="remove-cancel">
             Cancel
           </Button>
           <Button variant="destructive" onClick={onConfirm} disabled={pending} data-testid="remove-confirm">
@@ -1080,7 +1080,7 @@ function DiscardModelLabelsDialog({
           back to unannotated, where a new pre-labeling run reaches them again.
         </DialogDescription>
         <DialogFooter>
-          <Button variant="secondary" onClick={onCancel} data-testid="discard-cancel">
+          <Button variant="outline" onClick={onCancel} data-testid="discard-cancel">
             Cancel
           </Button>
           <Button variant="destructive" onClick={onConfirm} disabled={pending} data-testid="discard-confirm">
diff --git a/frontend/ui-core/src/screens/GalleryControls.tsx b/frontend/ui-core/src/screens/GalleryControls.tsx
index 521942b7..1622fc8c 100644
--- a/frontend/ui-core/src/screens/GalleryControls.tsx
+++ b/frontend/ui-core/src/screens/GalleryControls.tsx
@@ -13,8 +13,9 @@ import { useCallback, useRef, useState, type JSX } from "react";
 import { Play, User, X } from "lucide-react";
 
 import type { AssetProgress } from "../annotator/jobQueries";
-import { Button } from "../primitives/Button";
-import { FieldError, Input } from "../primitives/Input";
+import { Button } from "../primitives/button";
+import { FieldError } from "../primitives/field";
+import { Input } from "../primitives/input";
 import { JOB_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
 import { DEFAULT_DENSITY, DENSITY_STEPS, FrameGrid } from "./FrameGrid";
@@ -225,7 +226,7 @@ export function StartJobButton({
   return (
     <div className="flex flex-col gap-1">
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid={`start-job-${job.id}`}
         disabled={start.isPending}
diff --git a/frontend/ui-core/src/screens/GalleryScreen.tsx b/frontend/ui-core/src/screens/GalleryScreen.tsx
index 2d88f0a1..e80e00b9 100644
--- a/frontend/ui-core/src/screens/GalleryScreen.tsx
+++ b/frontend/ui-core/src/screens/GalleryScreen.tsx
@@ -12,9 +12,9 @@
 import { useState, type JSX, type ReactNode } from "react";
 
 import { readStep, writePref } from "../data/prefs";
-import { Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
-import { FieldError } from "../primitives/Input";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import { FieldError } from "../primitives/field";
 import { BackLink } from "../patterns/BackLink";
 import {
   DEFAULT_DENSITY,
@@ -356,7 +356,7 @@ function BatchHeader({
             </h1>
             {batch !== undefined && (
               <Badge
-                variant={BATCH_STATE_VARIANT[batch.state] ?? "neutral"}
+                variant={BATCH_STATE_VARIANT[batch.state] ?? "secondary"}
                 data-testid="batch-state"
               >
                 {batchStateLabel(batch.state)}
@@ -389,7 +389,7 @@ function BatchHeader({
             has no route back. See `BatchLifecycle`.
           */}
           {declares(batch, BATCH_ACTION.approve) && (
-            <Button variant="primary" size="sm" data-testid="approve-batch" onClick={onApprove}>
+            <Button size="sm" data-testid="approve-batch" onClick={onApprove}>
               Approve batch
             </Button>
           )}
diff --git a/frontend/ui-core/src/screens/HomeScreen.tsx b/frontend/ui-core/src/screens/HomeScreen.tsx
index 48ae4414..d705e7a7 100644
--- a/frontend/ui-core/src/screens/HomeScreen.tsx
+++ b/frontend/ui-core/src/screens/HomeScreen.tsx
@@ -53,9 +53,9 @@ import { refusalProse } from "../data/refusals";
 import { formatCount, formatPercent, formatWhen } from "../lib/format";
 import { ErrorState } from "../patterns/AsyncStates";
 import { StatCard } from "../patterns/DataDisplay";
-import { Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
-import { Skeleton } from "../primitives/Feedback";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import { Skeleton } from "../primitives/skeleton";
 import { CreateProjectDialog } from "./ProjectsScreen";
 import { AssetThumbnail } from "./AssetThumbnail";
 import {
@@ -133,11 +133,11 @@ export function HomeScreen({
         </div>
         {/*
           The page's one filled button when there is nothing to carry on with.
-          With a resume card on screen this steps back to `secondary`, because
+          With a resume card on screen this steps back to `outline`, because
           two filled buttons is the same rule broken from the other side.
         */}
         <Button
-          variant={page.resume === null ? "primary" : "secondary"}
+          variant={page.resume === null ? "default" : "outline"}
           data-testid="home-new-project"
           onClick={() => setCreating(true)}
         >
@@ -203,7 +203,7 @@ function FirstRun({ onCreate }: { readonly onCreate: () => void }): JSX.Element
           A project is where a schema, its batches and its dataset live.
         </p>
       </div>
-      <Button variant="primary" data-testid="home-create-project" onClick={onCreate}>
+      <Button variant="default" data-testid="home-create-project" onClick={onCreate}>
         <Plus aria-hidden="true" />
         Create project
       </Button>
@@ -315,7 +315,7 @@ function Resume({
           </span>
         </div>
         {act !== undefined && (
-          <Button variant="primary" className="ml-auto" data-testid="home-resume-cta" onClick={act}>
+          <Button variant="default" className="ml-auto" data-testid="home-resume-cta" onClick={act}>
             <Play aria-hidden="true" />
             {RESUME_LABEL[resume.kind]}
           </Button>
diff --git a/frontend/ui-core/src/screens/IngestScreen.tsx b/frontend/ui-core/src/screens/IngestScreen.tsx
index d463e74b..1b864b63 100644
--- a/frontend/ui-core/src/screens/IngestScreen.tsx
+++ b/frontend/ui-core/src/screens/IngestScreen.tsx
@@ -136,23 +136,28 @@ import {
 import { refusalProse } from "../data/refusals";
 import { cn } from "../lib/cn";
 import { formatBytes, formatCount } from "../lib/format";
+import { progressAria } from "../lib/progress";
 import { BackLink } from "../patterns/BackLink";
 import { parentLabel } from "../patterns/parentLabel";
+import { STATUS_INK } from "../patterns/statusTone";
 import { StepMarker } from "../patterns/StepMarker";
-import { Alert, Badge } from "../primitives/Badge";
+import { Alert, AlertDescription, AlertTitle } from "../primitives/alert";
+import { Badge } from "../primitives/badge";
 import type { BadgeTone } from "./batchState";
-import { Button } from "../primitives/Button";
-import { Card, CardContent } from "../primitives/Card";
-import { Progress } from "../primitives/Feedback";
-import { FieldError, FieldHint, Input, Label } from "../primitives/Input";
+import { Button } from "../primitives/button";
+import { Card, CardContent } from "../primitives/card";
+import { Progress } from "../primitives/progress";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldDescription, FieldError } from "../primitives/field";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/Table";
+} from "../primitives/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table";
 import { OutcomeNextStep } from "./ComposedTransitions";
 import { SchemaForeshadow } from "./SchemaForeshadow";
 import { ClipRangeTimeline } from "./ClipRangeTimeline";
@@ -212,14 +217,14 @@ function runStateLabel(state: string): string {
  * the *type*: a colour outside `BadgeTone` fails to compile.
  */
 const RUN_STATE_VARIANT: Record<string, BadgeTone> = {
-  pending: "accent",
-  running: "accent",
+  pending: "default",
+  running: "default",
   completed: "success",
   failed: "destructive",
 };
 
 function runStateVariant(state: string): BadgeTone {
-  return RUN_STATE_VARIANT[state] ?? "neutral";
+  return RUN_STATE_VARIANT[state] ?? "secondary";
 }
 
 /**
@@ -532,7 +537,7 @@ export function IngestScreen({
                 <div className="flex justify-end">
                   <Button
                     type="submit"
-                    variant="primary"
+                    variant="default"
                     data-testid="register-source"
                     // Explained by adjacency (`DESIGN.md` principle 9): with no
                     // files the dropzone above says what to do, and with a bad
@@ -570,7 +575,7 @@ export function IngestScreen({
                     <span className="text-sm font-medium" title={source.name}>
                       {sourceLabel(source.name)}
                     </span>
-                    <Badge>{source.kind}</Badge>
+                    <Badge variant="secondary">{source.kind}</Badge>
                   </div>
 
                   {source.video !== null && source.video !== undefined && (
@@ -623,7 +628,7 @@ export function IngestScreen({
                           ))}
                         </SelectContent>
                       </Select>
-                      <FieldHint>Only a draft batch can take new assets.</FieldHint>
+                      <FieldDescription>Only a draft batch can take new assets.</FieldDescription>
                     </div>
                     {batchChoice === NEW_BATCH && (
                       <div className="flex flex-col gap-1.5">
@@ -635,7 +640,7 @@ export function IngestScreen({
                           placeholder={source.name}
                           onChange={(event) => setBatchName(event.target.value)}
                         />
-                        <FieldHint>Defaults to the source name.</FieldHint>
+                        <FieldDescription>Defaults to the source name.</FieldDescription>
                       </div>
                     )}
                   </div>
@@ -651,13 +656,13 @@ export function IngestScreen({
                         restart — the registered source stays on the server
                         (registration is idempotent, nothing to undo), but every
                         setting on this screen resets with the files. */}
-                    <Button variant="ghost" data-testid="back-to-files" onClick={again}>
+                    <Button type="button" variant="ghost" data-testid="back-to-files" onClick={again}>
                       <ArrowLeft aria-hidden="true" />
                       Change files
                     </Button>
                     <Button
                       type="submit"
-                      variant="primary"
+                      variant="default"
                       data-testid="start-ingest"
                       disabled={start.isPending}
                     >
@@ -876,6 +881,7 @@ function SelectionPanel({
           )}
         </div>
         <Button
+          type="button"
           variant="ghost"
           size="icon"
           data-testid="clear-files"
@@ -897,10 +903,10 @@ function SelectionPanel({
               placeholder={suggestedName}
               onChange={(event) => onSourceName(event.target.value)}
             />
-            <FieldHint>
+            <FieldDescription>
               Names the source — and the new batch inherits it. Without one the server calls
               both by the upload&apos;s content digest.
-            </FieldHint>
+            </FieldDescription>
           </div>
         </div>
       )}
@@ -934,10 +940,10 @@ function SelectionPanel({
                       {selectionSummary(ranges, clip.durationSeconds)}
                     </dd>
                   </dl>
-                  <FieldHint>
+                  <FieldDescription>
                     Part of what the source <em>is</em> — the same clip registered at another
                     rate or other ranges becomes a second source.
-                  </FieldHint>
+                  </FieldDescription>
                 </div>
               }
             />
@@ -949,10 +955,10 @@ function SelectionPanel({
                 </p>
               )}
               <RateField fps={fps} onFps={onFps} />
-              <FieldHint>
+              <FieldDescription>
                 Part of what the source <em>is</em> — the same clip registered at another rate
                 or other ranges becomes a second source.
-              </FieldHint>
+              </FieldDescription>
             </div>
           )}
         </div>
@@ -990,6 +996,29 @@ function Fact({ label, value }: { readonly label: string; readonly value: string
   );
 }
 
+/** A clip has no denominator until it is over: `VideoMetadata` carries no frame count, by design. */
+function ingestPercent(job: IngestJob): number {
+  if (job.total === null || job.total === undefined) {
+    return job.state === "completed" ? 100 : 0;
+  }
+  return Math.round((job.processed / Math.max(job.total, 1)) * 100);
+}
+
+/** Bound once, so `value` and the `aria-valuenow` canonical `Progress` drops never disagree. */
+function IngestProgress({ job }: { readonly job: IngestJob }): JSX.Element {
+  const percent = ingestPercent(job);
+  return (
+    <div className="flex flex-col gap-1">
+      <p className="text-xs text-muted-foreground" data-testid="run-progress">
+        {job.total === null || job.total === undefined
+          ? `${job.processed} extracted`
+          : `${job.processed} of ${job.total}`}
+      </p>
+      <Progress aria-label="Ingest progress" value={percent} {...progressAria(percent)} />
+    </div>
+  );
+}
+
 function RunCard({
   job,
   projectId,
@@ -1014,29 +1043,12 @@ function RunCard({
           <p className="text-sm text-muted-foreground">Starting…</p>
         ) : (
           <>
-            <div className="flex flex-col gap-1">
-              <p className="text-xs text-muted-foreground" data-testid="run-progress">
-                {job.total === null || job.total === undefined
-                  ? // A clip has no denominator until it is over: `VideoMetadata`
-                    // carries no frame count, by design.
-                    `${job.processed} extracted`
-                  : `${job.processed} of ${job.total}`}
-              </p>
-              <Progress
-                aria-label="Ingest progress"
-                value={
-                  job.total === null || job.total === undefined
-                    ? job.state === "completed"
-                      ? 100
-                      : 0
-                    : Math.round((job.processed / Math.max(job.total, 1)) * 100)
-                }
-              />
-            </div>
+            <IngestProgress job={job} />
 
             {job.error !== null && job.error !== undefined && (
-              <Alert variant="destructive" title="The run stopped" data-testid="run-error">
-                {job.error}
+              <Alert variant="destructive" data-testid="run-error">
+                <AlertTitle>The run stopped</AlertTitle>
+                <AlertDescription>{job.error}</AlertDescription>
               </Alert>
             )}
 
@@ -1049,7 +1061,7 @@ function RunCard({
             {job.state === "failed" && (
               <div>
                 <Button
-                  variant="secondary"
+                  variant="outline"
                   data-testid="resume-ingest"
                   disabled={resume.isPending}
                   onClick={() => resume.mutate(job.id)}
@@ -1057,10 +1069,10 @@ function RunCard({
                   <RefreshCw aria-hidden="true" />
                   {resume.isPending ? "Resuming…" : "Resume"}
                 </Button>
-                <FieldHint>
+                <FieldDescription>
                   A resume is a redo, not a skip — nothing records which files already
                   succeeded, and content addressing makes re-reading them free.
-                </FieldHint>
+                </FieldDescription>
                 {/*
                   The refusal of the *resume*, which is a different fact from the
                   run's own error above it (audit F9). `resume.isError` was read
@@ -1071,12 +1083,9 @@ function RunCard({
                   reason: same screen, two different things that went wrong.
                 */}
                 {resume.isError && (
-                  <Alert
-                    variant="destructive"
-                    title="That resume was refused"
-                    data-testid="resume-error"
-                  >
-                    {refusalProse(resume.error)}
+                  <Alert variant="destructive" data-testid="resume-error">
+                    <AlertTitle>That resume was refused</AlertTitle>
+                    <AlertDescription>{refusalProse(resume.error)}</AlertDescription>
                   </Alert>
                 )}
               </div>
@@ -1173,11 +1182,11 @@ function Outcome({
         {/* Back to step 2, source kept: the same frames into a different batch
             is a real second run — registration is idempotent and content
             addressing makes re-reading free. */}
-        <Button variant="secondary" data-testid="rerun-source" onClick={onRerun}>
+        <Button variant="outline" data-testid="rerun-source" onClick={onRerun}>
           <RotateCw aria-hidden="true" />
           Ingest into another batch
         </Button>
-        <Button variant="secondary" data-testid="ingest-another" onClick={onAgain}>
+        <Button variant="outline" data-testid="ingest-another" onClick={onAgain}>
           <Upload aria-hidden="true" />
           Ingest another source
         </Button>
@@ -1221,15 +1230,14 @@ function Partials({
   if (partials.length === 0) return null;
 
   return (
-    <Alert
-      title={
+    <Alert data-testid="partials">
+      <AlertTitle>
         <span className="flex items-center gap-2">
-          <TriangleAlert className="size-4 text-warning" aria-hidden="true" />
+          <TriangleAlert className={cn("size-4", STATUS_INK.warning)} aria-hidden="true" />
           Some of what you ingested was damaged
         </span>
-      }
-      data-testid="partials"
-    >
+      </AlertTitle>
+      <AlertDescription>
       <ul className="flex flex-col gap-2">
         {partials.map((failure, index) => (
           <li key={`${failure.name}-${index}`} data-testid={`partial-${index}`}>
@@ -1245,6 +1253,7 @@ function Partials({
           </li>
         ))}
       </ul>
+      </AlertDescription>
     </Alert>
   );
 }
@@ -1286,7 +1295,7 @@ function Failures({
           </Badge>
         )}
         {unsupported.length > 0 && (
-          <Badge data-testid="unsupported-count">{unsupported.length} unsupported</Badge>
+          <Badge variant="secondary" data-testid="unsupported-count">{unsupported.length} unsupported</Badge>
         )}
       </p>
       <Table>
@@ -1304,7 +1313,7 @@ function Failures({
                 {basename(failure.name)}
               </TableCell>
               <TableCell>
-                <Badge variant={failure.kind === "corrupt" ? "destructive" : "neutral"}>
+                <Badge variant={failure.kind === "corrupt" ? "destructive" : "secondary"}>
                   {failureKindLabel(failure.kind)}
                 </Badge>
               </TableCell>
diff --git a/frontend/ui-core/src/screens/JobPanels.tsx b/frontend/ui-core/src/screens/JobPanels.tsx
index c686dd15..efb97b2e 100644
--- a/frontend/ui-core/src/screens/JobPanels.tsx
+++ b/frontend/ui-core/src/screens/JobPanels.tsx
@@ -37,8 +37,9 @@
 import { useEffect, useState, type JSX, type KeyboardEvent } from "react";
 import { ChevronDown, ChevronRight, User } from "lucide-react";
 
-import { Progress } from "../primitives/Feedback";
-import { FieldError } from "../primitives/Input";
+import { progressAria } from "../lib/progress";
+import { Progress } from "../primitives/progress";
+import { FieldError } from "../primitives/field";
 import { refusalProse } from "../data/refusals";
 import { DEFAULT_JOB_VIEW, JobWorkspace, patchView, type JobView } from "./GalleryControls";
 import { annotatedShare } from "./batchState";
@@ -311,7 +312,7 @@ function JobHeader({
         <Progress
           aria-label="Annotation progress"
           value={share.percent}
-          variant="success"
+          {...progressAria(share.percent)}
           className="min-w-0 flex-1"
         />
       )}
diff --git a/frontend/ui-core/src/screens/ModelsScreen.tsx b/frontend/ui-core/src/screens/ModelsScreen.tsx
index 677cf80e..9a74c048 100644
--- a/frontend/ui-core/src/screens/ModelsScreen.tsx
+++ b/frontend/ui-core/src/screens/ModelsScreen.tsx
@@ -160,9 +160,12 @@ import {
 } from "../data/inferenceQueries";
 import { jobFailureProse, refusalProse } from "../data/refusals";
 import { cn } from "../lib/cn";
+import { menuSurface } from "../lib/menu";
+import { progressAria } from "../lib/progress";
+import { twoLineTrigger } from "../lib/select";
 import { ErrorState, LoadingState } from "../patterns/AsyncStates";
-import { Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
 import {
   Card,
   CardAction,
@@ -171,22 +174,24 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "../primitives/Card";
-import { Progress } from "../primitives/Feedback";
+} from "../primitives/card";
+import { Progress } from "../primitives/progress";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
+} from "../primitives/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "../primitives/Menu";
-import { FieldError, FieldHint, Input, Label } from "../primitives/Input";
+} from "../primitives/dropdown-menu";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldDescription, FieldError } from "../primitives/field";
 import {
   Select,
   SelectContent,
@@ -195,7 +200,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
+} from "../primitives/select";
 import {
   CUSTOM_MODEL,
   DEVICES,
@@ -246,7 +251,7 @@ export function ModelsScreen(): JSX.Element {
             by every project in this workspace.
           </p>
         </div>
-        <Button variant="primary" data-testid="new-connection" onClick={() => setCreating(true)}>
+        <Button variant="default" data-testid="new-connection" onClick={() => setCreating(true)}>
           <Plug aria-hidden="true" />
           Add model
         </Button>
@@ -262,7 +267,7 @@ export function ModelsScreen(): JSX.Element {
           // `secondary`, not `primary`: the header's "Add model" is on screen
           // and opens the same dialog. One filled action per view.
           action: (
-            <Button variant="secondary" onClick={() => setCreating(true)}>
+            <Button variant="outline" onClick={() => setCreating(true)}>
               Add model
             </Button>
           ),
@@ -549,7 +554,7 @@ export function ConnectionCard({
                   <MoreHorizontal aria-hidden="true" />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
+              <DropdownMenuContent align="end" className={menuSurface}>
                 {/*
                   Two checks over the same files, and each label says what its
                   own check *proves* rather than what it is called.
@@ -669,7 +674,7 @@ export function ConnectionCard({
           </FieldError>
         )}
         {probe.isPending && (
-          <FieldHint data-testid="test-endpoint-pending">Asking the endpoint…</FieldHint>
+          <FieldDescription data-testid="test-endpoint-pending">Asking the endpoint…</FieldDescription>
         )}
         {probe.isError && (
           <FieldError data-testid="test-endpoint-error">{refusalProse(probe.error)}</FieldError>
@@ -697,7 +702,7 @@ export function ConnectionCard({
             control may exist is still `allowed_actions` and nothing else.
           */}
           <Button
-            variant="secondary"
+            variant="outline"
             size="sm"
             data-testid="download-weights"
             disabled={busy}
@@ -819,7 +824,12 @@ function RunProgress({
   return (
     <div className="flex w-56 flex-col gap-1" data-testid={testId}>
       {percent !== null && (
-        <Progress value={percent} data-testid={`${testId}-bar`} data-phase={phase} />
+        <Progress
+          value={percent}
+          {...progressAria(percent)}
+          data-testid={`${testId}-bar`}
+          data-phase={phase}
+        />
       )}
       {/*
         Tabular figures, `DESIGN.md`'s Numbers rule: the number changes every two
@@ -917,10 +927,10 @@ function FixedModel({ connection }: { readonly connection: Connection }): JSX.El
       <p className="font-mono text-sm break-all" data-testid="connection-model-fixed">
         {connection.model_id} @ {connection.model_revision}
       </p>
-      <FieldHint>
+      <FieldDescription>
         Set up with these weights, so the model cannot change here. Add a new model to run a
         different one.
-      </FieldHint>
+      </FieldDescription>
     </div>
   );
 }
@@ -1256,7 +1266,7 @@ function ConnectionForm({
                 onChange={(event) => setName(event.target.value)}
                 autoFocus
               />
-              <FieldHint>Unique in this workspace, ignoring case.</FieldHint>
+              <FieldDescription>Unique in this workspace, ignoring case.</FieldDescription>
             </div>
             {/*
               The offered list is the *local* form's, and only its. An offer is
@@ -1290,7 +1300,7 @@ function ConnectionForm({
                         be announced twice.
                       */}
                       <LoadingState rows={1} label="" />
-                      <FieldHint>Reading which models this installation can run…</FieldHint>
+                      <FieldDescription>Reading which models this installation can run…</FieldDescription>
                     </div>
                   ) : catalog.isError ? (
                     <div data-testid="catalog-unavailable">
@@ -1302,15 +1312,19 @@ function ConnectionForm({
                       />
                     </div>
                   ) : groups.length === 0 ? (
-                    <FieldHint data-testid="catalog-empty">
+                    <FieldDescription data-testid="catalog-empty">
                       No installed driver offers a model by name. Install a provider
                       distribution to be offered one, or name a model below and pin its
                       revision yourself.
-                    </FieldHint>
+                    </FieldDescription>
                   ) : (
                     <>
                       <Select value={choice} onValueChange={pickModel}>
-                        <SelectTrigger id="connection-model" data-testid="connection-model">
+                        <SelectTrigger
+                          id="connection-model"
+                          data-testid="connection-model"
+                          className={twoLineTrigger}
+                        >
                           <SelectValue placeholder="Choose a model" />
                         </SelectTrigger>
                         <SelectContent>
@@ -1325,31 +1339,34 @@ function ConnectionForm({
                                 harder to read than a stacked one.
                               */}
                               {group.entries.map((entry) => (
-                                <SelectItem
-                                  key={entry.model_id}
-                                  value={entry.model_id}
-                                  meta={entry.hint}
-                                >
-                                  {entry.model_id}
+                                <SelectItem key={entry.model_id} value={entry.model_id}>
+                                  <span className="flex flex-col items-start">
+                                    <span>{entry.model_id}</span>
+                                    <span className="text-xs text-muted-foreground">
+                                      {entry.hint}
+                                    </span>
+                                  </span>
                                 </SelectItem>
                               ))}
                             </SelectGroup>
                           ))}
                           <SelectGroup>
-                            <SelectItem
-                              value={CUSTOM_MODEL}
-                              meta="Any model id, at a revision you pin yourself"
-                            >
-                              Custom model…
+                            <SelectItem value={CUSTOM_MODEL}>
+                              <span className="flex flex-col items-start">
+                                <span>Custom model…</span>
+                                <span className="text-xs text-muted-foreground">
+                                  Any model id, at a revision you pin yourself
+                                </span>
+                              </span>
                             </SelectItem>
                           </SelectGroup>
                         </SelectContent>
                       </Select>
-                      <FieldHint>
+                      <FieldDescription>
                         {custom
                           ? "Any model this build has an adapter for. The list above is a starting point, not a limit."
                           : "Pinned to the revision the driver that offers it declares."}
-                      </FieldHint>
+                      </FieldDescription>
                     </>
                   )}
                   {/* What choosing this model commits to, read where the choice is made. */}
@@ -1400,7 +1417,7 @@ function ConnectionForm({
                         value={revision}
                         onChange={(event) => setRevision(event.target.value)}
                       />
-                      <FieldHint>Pinned. A moving pointer is not a provenance.</FieldHint>
+                      <FieldDescription>Pinned. A moving pointer is not a provenance.</FieldDescription>
                     </div>
                   </>
                 )}
@@ -1447,11 +1464,11 @@ function ConnectionForm({
                         ))}
                       </SelectContent>
                     </Select>
-                    <FieldHint data-testid="precision-hint">
+                    <FieldDescription data-testid="precision-hint">
                       {precisionsFor(device).length === 1
                         ? "Half precision applies on CUDA only — on a CPU it has no effect."
                         : "fp16 halves the memory and runs faster on CUDA."}
-                    </FieldHint>
+                    </FieldDescription>
                   </div>
               </>
             ) : (
@@ -1465,7 +1482,7 @@ function ConnectionForm({
                     value={revision}
                     onChange={(event) => setRevision(event.target.value)}
                   />
-                  <FieldHint>Pinned. A moving pointer is not a provenance.</FieldHint>
+                  <FieldDescription>Pinned. A moving pointer is not a provenance.</FieldDescription>
                 </div>
                 )}
                 <div className="flex flex-col gap-1.5">
@@ -1485,11 +1502,11 @@ function ConnectionForm({
                     value={credentialEnv}
                     onChange={(event) => setCredentialEnv(event.target.value)}
                   />
-                  <FieldHint>
+                  <FieldDescription>
                     The name of an environment variable, not the secret itself. VisionSet reads
                     it where the server runs, sends it as a bearer token, and never stores the
                     value. Leave empty if the endpoint wants none.
-                  </FieldHint>
+                  </FieldDescription>
                 </div>
               </>
             )}
@@ -1498,12 +1515,12 @@ function ConnectionForm({
               <FieldError data-testid="connection-error">{refusalProse(failure)}</FieldError>
             )}
             <DialogFooter>
-              <Button variant="secondary" onClick={onClose}>
+              <Button type="button" variant="outline" onClick={onClose}>
                 Cancel
               </Button>
               <Button
                 type="submit"
-                variant="primary"
+                variant="default"
                 data-testid="connection-submit"
                 disabled={!complete || pending}
               >
@@ -1671,7 +1688,7 @@ function DeleteConnectionDialog({
           </FieldError>
         )}
         <DialogFooter>
-          <Button variant="secondary" onClick={onClose}>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
diff --git a/frontend/ui-core/src/screens/OverviewPanel.tsx b/frontend/ui-core/src/screens/OverviewPanel.tsx
index 9f110671..7da4a276 100644
--- a/frontend/ui-core/src/screens/OverviewPanel.tsx
+++ b/frontend/ui-core/src/screens/OverviewPanel.tsx
@@ -46,10 +46,13 @@ import type { JSX } from "react";
 import { asApiError } from "../data/errors";
 import { refusalProse } from "../data/refusals";
 import { classColor } from "../palette";
+import { inlineLink } from "../lib/button";
+import { cn } from "../lib/cn";
 import { formatCount, formatPercent } from "../lib/format";
 import { EmptyState, ErrorState } from "../patterns/AsyncStates";
-import { Button } from "../primitives/Button";
-import { Skeleton } from "../primitives/Feedback";
+import { STATUS_INK } from "../patterns/statusTone";
+import { Button } from "../primitives/button";
+import { Skeleton } from "../primitives/skeleton";
 import { DistributionBar, StatCard, ThumbnailGrid } from "../patterns/DataDisplay";
 import { AssetThumbnail } from "./AssetThumbnail";
 import { imbalanceNote } from "./imbalance";
@@ -365,7 +368,7 @@ function FirstRun({
               // `secondary`: the project header's "Ingest" is on screen right
               // above this one, same label and same handler, so a filled button
               // here would render the identical action twice.
-              <Button variant="secondary" data-testid="overview-ingest" onClick={onIngest}>
+              <Button variant="outline" data-testid="overview-ingest" onClick={onIngest}>
                 <Upload aria-hidden="true" />
                 Ingest
               </Button>
@@ -393,7 +396,7 @@ function FirstRun({
         action={
           <div className="flex flex-col items-center gap-2">
             {onOpenSchema !== undefined && (
-              <Button variant="primary" data-testid="first-run-cta" onClick={onOpenSchema}>
+              <Button variant="default" data-testid="first-run-cta" onClick={onOpenSchema}>
                 <Tags aria-hidden="true" />
                 Define classes
               </Button>
@@ -408,7 +411,7 @@ function FirstRun({
                 <Button
                   variant="link"
                   size="sm"
-                  className="text-xs"
+                  className={cn(inlineLink, "text-xs")}
                   data-testid="first-run-alt"
                   onClick={onIngest}
                 >
@@ -489,7 +492,7 @@ function Distribution({
           </div>
           {note !== null && (
             <p
-              className="flex items-center gap-1.5 text-xs text-warning"
+              className={cn("flex items-center gap-1.5 text-xs", STATUS_INK.warning)}
               data-testid="imbalance-note"
             >
               <TriangleAlert className="size-3.5 shrink-0" aria-hidden="true" />
@@ -548,7 +551,7 @@ function Samples({
       {onBrowseDataset !== undefined && (
         <Button
           variant="link"
-          className="self-start"
+          className={cn(inlineLink, "self-start")}
           data-testid="browse-dataset"
           onClick={onBrowseDataset}
         >
diff --git a/frontend/ui-core/src/screens/PreLabelDialog.tsx b/frontend/ui-core/src/screens/PreLabelDialog.tsx
index a8fe4da3..b357918b 100644
--- a/frontend/ui-core/src/screens/PreLabelDialog.tsx
+++ b/frontend/ui-core/src/screens/PreLabelDialog.tsx
@@ -93,23 +93,27 @@ import { JOB_ACTION, declares } from "../data/capabilities";
 import { producesProse } from "../data/geometryCategory";
 import { useConnections, type Connection } from "../data/inferenceQueries";
 import { refusalProse } from "../data/refusals";
-import { Alert, Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { Alert, AlertDescription } from "../primitives/alert";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError, FieldHint, Input, Label } from "../primitives/Input";
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldDescription, FieldError } from "../primitives/field";
+import { twoLineTrigger } from "../lib/select";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
+} from "../primitives/select";
 import type { BadgeTone, Segment } from "./batchState";
 import type { KnownMembers } from "../generated/api";
 import { jobKeys, useJobProgress } from "../annotator/jobQueries";
@@ -149,11 +153,11 @@ const JOB_STATE_LABEL: Record<string, string> = {
 };
 
 const JOB_STATE_VARIANT: Record<string, BadgeTone> = {
-  queued: "neutral",
-  running: "accent",
+  queued: "secondary",
+  running: "default",
   succeeded: "success",
   failed: "destructive",
-  cancelled: "neutral",
+  cancelled: "secondary",
 };
 
 /** The five faces of this dialog, over the watched run and nothing else. */
@@ -399,7 +403,7 @@ export function PromptClasses({ plan }: { readonly plan: PreLabelPlan | null }):
  */
 function DeadStart(): JSX.Element {
   return (
-    <Button variant="secondary" data-testid="prelabel-submit" disabled>
+    <Button variant="outline" data-testid="prelabel-submit" disabled>
       Start
     </Button>
   );
@@ -469,13 +473,20 @@ export function PreLabelSettings({
           </p>
         ) : (
           <Select value={activeId} onValueChange={onConnectionChange} disabled={disabled}>
-            <SelectTrigger id="prelabel-model" data-testid="prelabel-model">
+            <SelectTrigger
+              id="prelabel-model"
+              data-testid="prelabel-model"
+              className={twoLineTrigger}
+            >
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
               {candidates.map((one) => (
-                <SelectItem key={one.id} value={one.id} meta={connectionMeta(one)}>
-                  {one.name}
+                <SelectItem key={one.id} value={one.id}>
+                  <span className="flex flex-col items-start">
+                    <span>{one.name}</span>
+                    <span className="text-xs text-muted-foreground">{connectionMeta(one)}</span>
+                  </span>
                 </SelectItem>
               ))}
             </SelectContent>
@@ -496,11 +507,11 @@ export function PreLabelSettings({
           disabled={disabled}
           onChange={(event) => onConfidenceChange(event.target.value)}
         />
-        <FieldHint>
+        <FieldDescription>
           How well a region matches the words it was asked for — a different scale from a
           point-prompt model&rsquo;s mask confidence, which is why the number needs a name of
           its own rather than a bare percentage.
-        </FieldHint>
+        </FieldDescription>
       </div>
 
       {selected !== null && (
@@ -526,10 +537,10 @@ export function PreLabelSettings({
               Tick at least one shape — a run that writes no shape has nothing to do.
             </FieldError>
           ) : (
-            <FieldHint>
+            <FieldDescription>
               This model answers in every shape here, one region each, and writes every ticked
               one. Untick a shape to leave it out of the run.
-            </FieldHint>
+            </FieldDescription>
           )}
         </fieldset>
       )}
@@ -561,7 +572,7 @@ export function PreLabelButton({
   return (
     <>
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         className={className}
         data-testid={`pre-label-${job.id}`}
@@ -769,7 +780,7 @@ function PreLabelDialog({
           {view !== null && (
             <p className="flex items-center gap-2 text-xs text-muted-foreground">
               <Badge
-                variant={JOB_STATE_VARIANT[view.state] ?? "neutral"}
+                variant={JOB_STATE_VARIANT[view.state] ?? "secondary"}
                 data-testid="prelabel-job-state"
               >
                 {JOB_STATE_LABEL[view.state] ?? view.state}
@@ -851,10 +862,10 @@ function PreLabelDialog({
                       {preLabeled === 1 ? "" : "s"}
                     </span>
                   </label>
-                  <FieldHint>
+                  <FieldDescription>
                     Frames anyone has edited, confirmed or skipped in this job are never
                     touched. This cannot be undone.
-                  </FieldHint>
+                  </FieldDescription>
                 </div>
               )}
 
@@ -868,7 +879,7 @@ function PreLabelDialog({
 
           {blocked && mode !== "running" && (
             <Alert data-testid="prelabel-blocked-reason">
-              {blockedReason(view, preLabeled)}
+              <AlertDescription>{blockedReason(view, preLabeled)}</AlertDescription>
             </Alert>
           )}
 
@@ -885,14 +896,14 @@ function PreLabelDialog({
           {mode === "running" && (
             // The run keeps going in the background — closing only stops
             // watching it, so this is the one button and it is the primary one.
-            <Button variant="primary" onClick={close}>
+            <Button variant="default" onClick={close}>
               Close
             </Button>
           )}
 
           {mode !== "running" && (
             <>
-              <Button variant="secondary" onClick={close}>
+              <Button variant="outline" onClick={close}>
                 Close
               </Button>
 
@@ -902,7 +913,7 @@ function PreLabelDialog({
                 // button already on screen rather than replace it with another.
                 <>
                   <Button
-                    variant={blocked ? "secondary" : "primary"}
+                    variant={blocked ? "outline" : "default"}
                     data-testid="prelabel-submit"
                     disabled={launchDisabled}
                     onClick={submit}
@@ -910,7 +921,7 @@ function PreLabelDialog({
                     {running ? "Labeling…" : "Start"}
                   </Button>
                   {blocked && preLabeled > 0 && (
-                    <Button variant="primary" data-testid="prelabel-edit" onClick={goToPreLabeled}>
+                    <Button variant="default" data-testid="prelabel-edit" onClick={goToPreLabeled}>
                       Edit these frames
                     </Button>
                   )}
@@ -923,7 +934,7 @@ function PreLabelDialog({
                     // Quiet, deliberately: the next real step is correcting what
                     // this run already produced, not launching another one over it.
                     <Button
-                      variant="secondary"
+                      variant="outline"
                       data-testid="prelabel-run-again"
                       disabled={launchDisabled}
                       onClick={submit}
@@ -933,7 +944,7 @@ function PreLabelDialog({
                   ) : (
                     <DeadStart />
                   )}
-                  <Button variant="primary" data-testid="prelabel-edit" onClick={goToPreLabeled}>
+                  <Button variant="default" data-testid="prelabel-edit" onClick={goToPreLabeled}>
                     Edit these frames
                   </Button>
                 </>
@@ -944,21 +955,21 @@ function PreLabelDialog({
                   <>
                     <div className="flex flex-col items-end gap-1">
                       <Button
-                        variant="primary"
+                        variant="default"
                         data-testid="prelabel-continue"
                         disabled={launchDisabled}
                         onClick={submit}
                       >
                         Continue
                       </Button>
-                      <FieldHint data-testid="prelabel-continue-hint">
+                      <FieldDescription data-testid="prelabel-continue-hint">
                         {replacing
                           ? `Also rewrites the model labels on the ${preLabeled} pre-labeled frame${preLabeled === 1 ? "" : "s"}.`
                           : "Only untouched assets are eligible — this can’t create a duplicate label."}
-                      </FieldHint>
+                      </FieldDescription>
                     </div>
                     {blocked && preLabeled > 0 && (
-                      <Button variant="primary" data-testid="prelabel-edit" onClick={goToPreLabeled}>
+                      <Button variant="default" data-testid="prelabel-edit" onClick={goToPreLabeled}>
                         Edit these frames
                       </Button>
                     )}
@@ -971,7 +982,7 @@ function PreLabelDialog({
                 (offering ? (
                   <>
                     <Button
-                      variant="primary"
+                      variant="default"
                       data-testid="prelabel-retry"
                       disabled={launchDisabled}
                       onClick={submit}
@@ -979,7 +990,7 @@ function PreLabelDialog({
                       Try again
                     </Button>
                     {blocked && preLabeled > 0 && (
-                      <Button variant="primary" data-testid="prelabel-edit" onClick={goToPreLabeled}>
+                      <Button variant="default" data-testid="prelabel-edit" onClick={goToPreLabeled}>
                         Edit these frames
                       </Button>
                     )}
diff --git a/frontend/ui-core/src/screens/PreprocessingTab.tsx b/frontend/ui-core/src/screens/PreprocessingTab.tsx
index c3965d4c..c7c8ad35 100644
--- a/frontend/ui-core/src/screens/PreprocessingTab.tsx
+++ b/frontend/ui-core/src/screens/PreprocessingTab.tsx
@@ -39,15 +39,15 @@ import { EmptyState, ErrorState, LoadingState } from "../patterns/AsyncStates";
 import { RecipeEditor } from "../patterns/RecipeEditor";
 import { RecipeList } from "../patterns/RecipeList";
 import { StaticAnnotationOverlay } from "../patterns/StaticAnnotationOverlay";
-import { Button } from "../primitives/Button";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError } from "../primitives/Input";
+} from "../primitives/dialog";
+import { FieldError } from "../primitives/field";
 import {
   useActiveSchema,
   useCreatePreprocessingRecipe,
@@ -148,7 +148,7 @@ export function PreprocessingTab({ projectId, datasetId }: PreprocessingTabProps
           title="No recipes yet"
           description="A recipe resizes every exported image to one size and writes augmented variants of the training images. It is applied at export, by name, beside the target model."
           action={
-            <Button variant="primary" data-testid="recipe-new" onClick={startNew}>
+            <Button data-testid="recipe-new" onClick={startNew}>
               <Plus aria-hidden="true" />
               Write a recipe
             </Button>
@@ -282,7 +282,7 @@ function DeleteRecipeDialog({
           <FieldError data-testid="delete-recipe-error">{refusalProse(remove.error)}</FieldError>
         )}
         <DialogFooter>
-          <Button variant="secondary" data-testid="delete-recipe-cancel" onClick={onClose}>
+          <Button variant="outline" data-testid="delete-recipe-cancel" onClick={onClose}>
             Cancel
           </Button>
           <Button
diff --git a/frontend/ui-core/src/screens/ProjectFrame.tsx b/frontend/ui-core/src/screens/ProjectFrame.tsx
index 4d093237..1ce35667 100644
--- a/frontend/ui-core/src/screens/ProjectFrame.tsx
+++ b/frontend/ui-core/src/screens/ProjectFrame.tsx
@@ -25,15 +25,17 @@ import { ErrorState } from "../patterns/AsyncStates";
 import { ProjectEyebrow } from "../patterns/ProjectEyebrow";
 import type { AnnotateTarget, ProjectSection } from "../patterns/ProjectNav";
 import { ProjectShell, type ProjectNavData } from "../patterns/ProjectShell";
-import { Button } from "../primitives/Button";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError, Input, Label } from "../primitives/Input";
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { FieldError } from "../primitives/field";
 import {
   useActiveSchema,
   useBatches,
@@ -255,7 +257,7 @@ function DeleteDialog({
           </FieldError>
         )}
         <DialogFooter>
-          <Button variant="secondary" onClick={onClose}>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
@@ -329,12 +331,12 @@ function RenameDialog({
             </FieldError>
           )}
           <DialogFooter>
-            <Button variant="secondary" onClick={onClose}>
+            <Button type="button" variant="outline" onClick={onClose}>
               Cancel
             </Button>
             <Button
               type="submit"
-              variant="primary"
+              variant="default"
               data-testid="rename-submit"
               disabled={name.trim() === "" || rename.isPending}
             >
diff --git a/frontend/ui-core/src/screens/ProjectPreLabelDialog.tsx b/frontend/ui-core/src/screens/ProjectPreLabelDialog.tsx
index 1cf530d1..a121e426 100644
--- a/frontend/ui-core/src/screens/ProjectPreLabelDialog.tsx
+++ b/frontend/ui-core/src/screens/ProjectPreLabelDialog.tsx
@@ -20,16 +20,18 @@ import { useMemo, useState, type JSX } from "react";
 import { BATCH_ACTION, declares } from "../data/capabilities";
 import { useConnections, type Connection } from "../data/inferenceQueries";
 import { refusalProse } from "../data/refusals";
-import { Alert } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { inlineLink } from "../lib/button";
+import { Alert, AlertDescription } from "../primitives/alert";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError, Label } from "../primitives/Input";
+} from "../primitives/dialog";
+import { Label } from "../primitives/label";
+import { FieldError } from "../primitives/field";
 import {
   DEFAULT_CONFIDENCE,
   NO_SHAPES,
@@ -87,7 +89,7 @@ export function ProjectPreLabelButton({
   return (
     <>
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid="project-prelabel"
         onClick={() => setOpen(true)}
@@ -255,15 +257,17 @@ function ProjectPreLabelDialog({
 
             {refused.length > 0 && (
               <Alert data-testid="project-prelabel-blocked">
+                <AlertDescription>
                 {refused.length === 1
                   ? `${refused[0]!.name} cannot be pre-labeled as planned — uncheck it, or change the model or the shapes, to start.`
                   : `${refused.map((one) => one.name).join(", ")} cannot be pre-labeled as planned — uncheck them, or change the model or the shapes, to start.`}
+                </AlertDescription>
               </Alert>
             )}
 
             {launch.isError && (
               <Alert variant="destructive" data-testid="project-prelabel-error">
-                {refusalProse(launch.error)}
+                <AlertDescription>{refusalProse(launch.error)}</AlertDescription>
               </Alert>
             )}
           </div>
@@ -273,6 +277,7 @@ function ProjectPreLabelDialog({
               <li key={item.annotation_job_id} className="flex items-center justify-between gap-2">
                 <Button
                   variant="link"
+                  className={inlineLink}
                   onClick={() => onOpenBatch(item.batch_id)}
                 >
                   {label}
@@ -288,11 +293,11 @@ function ProjectPreLabelDialog({
         <DialogFooter>
           {result === null ? (
             <>
-              <Button variant="secondary" onClick={onClose}>
+              <Button variant="outline" onClick={onClose}>
                 Cancel
               </Button>
               <Button
-                variant="primary"
+                variant="default"
                 data-testid="project-prelabel-start"
                 disabled={!canStart}
                 onClick={start}
@@ -301,7 +306,7 @@ function ProjectPreLabelDialog({
               </Button>
             </>
           ) : (
-            <Button variant="primary" onClick={onClose}>
+            <Button variant="default" onClick={onClose}>
               Close
             </Button>
           )}
diff --git a/frontend/ui-core/src/screens/ProjectScreen.tsx b/frontend/ui-core/src/screens/ProjectScreen.tsx
index fa9073b7..42acff05 100644
--- a/frontend/ui-core/src/screens/ProjectScreen.tsx
+++ b/frontend/ui-core/src/screens/ProjectScreen.tsx
@@ -73,13 +73,15 @@ import { Async } from "../data/Async";
 import { useApiClient } from "../data/ApiProvider";
 import { asApiError } from "../data/errors";
 import { refusalProse } from "../data/refusals";
-import { Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { inlineLink } from "../lib/button";
+import { cn } from "../lib/cn";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
 import { formatCount, formatWhen } from "../lib/format";
 import { ErrorState, LoadingState } from "../patterns/AsyncStates";
 import { DEFAULT_PROJECT_SECTION, PROJECT_SECTIONS, type ProjectSection } from "../patterns/ProjectNav";
 import { SectionHeader } from "../patterns/SectionHeader";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/Table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table";
 import { BatchesScreen } from "./BatchesScreen";
 import { DatasetScreen, type DatasetTab } from "./DatasetScreen";
 import { AssetThumbnail } from "./AssetThumbnail";
@@ -556,7 +558,7 @@ function Section({
 }): JSX.Element | null {
   const headerIngest: ReactNode =
     ingestInHeader === undefined ? undefined : (
-      <Button variant="secondary" data-testid="go-ingest" onClick={ingestInHeader}>
+      <Button variant="outline" data-testid="go-ingest" onClick={ingestInHeader}>
         <Upload className="size-4" aria-hidden="true" />
         Ingest
       </Button>
@@ -863,7 +865,7 @@ function BlockingAssets({
                         <Button
                           key={batchId}
                           variant="link"
-                          className="text-xs"
+                          className={cn(inlineLink, "text-xs")}
                           data-testid="blocking-asset-batch"
                           onClick={() => onOpenBatch(batchId)}
                         >
@@ -967,7 +969,7 @@ function VersionRow({
     <TableRow data-testid={`version-${entry.version}`} {...(nested ? { "data-nested": "true" } : {})}>
       <TableCell className={`flex items-center gap-2${nested ? " pl-8" : ""}`}>
         v{entry.version}
-        {entry.version === active && <Badge variant="accent">active</Badge>}
+        {entry.version === active && <Badge variant="default">active</Badge>}
       </TableCell>
       {/* Both are null for a version published before the fields existed, and nothing backfills
           either — an em dash is the honest rendering of a moment nobody recorded. */}
@@ -1040,7 +1042,7 @@ function AnnotationRun({
               <ChevronRight className="size-4 shrink-0" aria-hidden="true" />
             )}
             v{oldest.version}–v{newest.version}
-            {newest.version === active && <Badge variant="accent">active</Badge>}
+            {newest.version === active && <Badge variant="default">active</Badge>}
           </button>
         </TableCell>
         <TableCell className="text-muted-foreground">
diff --git a/frontend/ui-core/src/screens/ProjectsScreen.tsx b/frontend/ui-core/src/screens/ProjectsScreen.tsx
index 96cfae82..d327e736 100644
--- a/frontend/ui-core/src/screens/ProjectsScreen.tsx
+++ b/frontend/ui-core/src/screens/ProjectsScreen.tsx
@@ -29,17 +29,21 @@ import { useState, type FormEvent, type JSX } from "react";
 
 import { Async } from "../data/Async";
 import { refusalProse } from "../data/refusals";
+import { inlineLink } from "../lib/button";
 import { formatWhen } from "../lib/format";
-import { Button } from "../primitives/Button";
+import { Button } from "../primitives/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { FieldError, FieldHint, Input, Label, Textarea } from "../primitives/Input";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/Table";
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Textarea } from "../primitives/textarea";
+import { Label } from "../primitives/label";
+import { FieldDescription, FieldError } from "../primitives/field";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table";
 import { AssetThumbnail, ThumbnailPlaceholder } from "./AssetThumbnail";
 import { useCreateProject, useDeleteProject, useProjects, type Project } from "./queries";
 
@@ -85,7 +89,7 @@ export function ProjectsScreen({ onOpenProject }: ProjectsScreenProps): JSX.Elem
             A project owns a schema, its batches and one dataset.
           </p>
         </div>
-        <Button variant="primary" data-testid="new-project" onClick={() => setCreating(true)}>
+        <Button variant="default" data-testid="new-project" onClick={() => setCreating(true)}>
           <FolderPlus aria-hidden="true" />
           New project
         </Button>
@@ -103,7 +107,7 @@ export function ProjectsScreen({ onOpenProject }: ProjectsScreenProps): JSX.Elem
           // One filled action per view — and the header's is the one that
           // survives when the list fills up.
           action: (
-            <Button variant="secondary" onClick={() => setCreating(true)}>
+            <Button variant="outline" onClick={() => setCreating(true)}>
               New project
             </Button>
           ),
@@ -164,6 +168,7 @@ export function ProjectsScreen({ onOpenProject }: ProjectsScreenProps): JSX.Elem
                   <TableCell>
                     <Button
                       variant="link"
+                      className={inlineLink}
                       data-testid={`open-${project.name}`}
                       onClick={() => onOpenProject(project.id)}
                     >
@@ -295,18 +300,18 @@ export function CreateProjectDialog({
               value={description}
               onChange={(event) => setDescription(event.target.value)}
             />
-            <FieldHint>Optional.</FieldHint>
+            <FieldDescription>Optional.</FieldDescription>
           </div>
           {create.isError && (
             <FieldError data-testid="create-error">{refusal(create.error)}</FieldError>
           )}
           <DialogFooter>
-            <Button variant="secondary" onClick={onClose}>
+            <Button type="button" variant="outline" onClick={onClose}>
               Cancel
             </Button>
             <Button
               type="submit"
-              variant="primary"
+              variant="default"
               data-testid="create-submit"
               disabled={name.trim() === "" || create.isPending}
             >
@@ -341,7 +346,7 @@ function DeleteProjectDialog({
           <FieldError data-testid="delete-error">{refusal(remove.error)}</FieldError>
         )}
         <DialogFooter>
-          <Button variant="secondary" onClick={onClose}>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
diff --git a/frontend/ui-core/src/screens/PromoteButton.tsx b/frontend/ui-core/src/screens/PromoteButton.tsx
index 7aef90f3..7fa2ca56 100644
--- a/frontend/ui-core/src/screens/PromoteButton.tsx
+++ b/frontend/ui-core/src/screens/PromoteButton.tsx
@@ -48,8 +48,9 @@ import type { JSX } from "react";
 
 import { BATCH_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-import { Button } from "../primitives/Button";
-import { FieldError } from "../primitives/Input";
+import { inlineLink } from "../lib/button";
+import { Button } from "../primitives/button";
+import { FieldError } from "../primitives/field";
 import { usePromoteBatch, type Batch } from "./queries";
 
 export interface PromoteButtonProps {
@@ -110,7 +111,7 @@ export function PromoteButton({
   return (
     <div className={className ?? "flex flex-col items-end gap-1"}>
       <Button
-        variant="secondary"
+        variant="outline"
         size="sm"
         data-testid={`promote-${batch.name}`}
         disabled={promote.isPending}
@@ -154,6 +155,7 @@ export function PromoteButton({
       {promote.isSuccess && onOpenDataset !== undefined && (
         <Button
           variant="link"
+          className={inlineLink}
           data-testid={`promoted-open-dataset-${batch.name}`}
           onClick={onOpenDataset}
         >
diff --git a/frontend/ui-core/src/screens/SchemaEditor.tsx b/frontend/ui-core/src/screens/SchemaEditor.tsx
index 069f718e..8b198550 100644
--- a/frontend/ui-core/src/screens/SchemaEditor.tsx
+++ b/frontend/ui-core/src/screens/SchemaEditor.tsx
@@ -97,33 +97,37 @@
  */
 
 import { Plus, Trash2 } from "lucide-react";
-import { useMemo, useRef, useState, type JSX, type KeyboardEvent } from "react";
+import { useId, useMemo, useRef, useState, type JSX, type KeyboardEvent } from "react";
 
 import { formatGeometries } from "../data/geometryCategory";
 import { asApiError } from "../data/errors";
 import { classBlockers, describeClassCount, refusalProse } from "../data/refusals";
-import { Alert, Badge } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
-import { Card, CardAction, CardContent, CardHeader, CardTitle } from "../primitives/Card";
+import { inlineLink } from "../lib/button";
+import { cn } from "../lib/cn";
+import { Alert, AlertDescription, AlertTitle } from "../primitives/alert";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "../primitives/card";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogTitle,
-} from "../primitives/Dialog";
-import { Input, Label } from "../primitives/Input";
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
 import { ClassFields, swatchOf } from "../patterns/ClassFields";
 import { ClassListRow } from "../patterns/DataDisplay";
 import { formatCount, formatWhen } from "../lib/format";
-import { toast } from "../primitives/Feedback";
+import { toast } from "sonner";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
+} from "../primitives/select";
 import type {
   ClassCount,
   DraftLabelClassBody,
@@ -750,7 +754,7 @@ export function SchemaEditor({
             }}
           />
           <Button
-            variant="secondary"
+            variant="outline"
             data-testid="add-class"
             disabled={draftLocked}
             onClick={addClass}
@@ -762,7 +766,7 @@ export function SchemaEditor({
             // `secondary`: the project's navigation holds the one filled
             // control of the project shell, and a section's own actions sit
             // a weight below it. Still never disabled for "nothing to save".
-            variant="secondary"
+            variant="outline"
             data-testid="save-schema"
             // Never disabled for "nothing to save" — `save` answers that with a
             // toast. It is also disabled while a removal preview, flush, or
@@ -777,12 +781,9 @@ export function SchemaEditor({
       </div>
 
       {flow.kind === "preview-error" && (
-        <Alert
-          variant="destructive"
-          title="Could not preview this change"
-          data-testid="schema-preview-error"
-        >
-          {refusalProse(flow.error)}
+        <Alert variant="destructive" data-testid="schema-preview-error">
+          <AlertTitle>Could not preview this change</AlertTitle>
+          <AlertDescription>{refusalProse(flow.error)}</AlertDescription>
         </Alert>
       )}
 
@@ -825,7 +826,7 @@ export function SchemaEditor({
           <Button
             variant="link"
             size="sm"
-            className="align-baseline text-xs"
+            className={cn(inlineLink, "align-baseline text-xs")}
             data-testid="schema-reload"
             disabled={draftLocked}
             onClick={() => {
@@ -858,7 +859,7 @@ export function SchemaEditor({
           <Button
             variant="link"
             size="sm"
-            className="align-baseline text-xs"
+            className={cn(inlineLink, "align-baseline text-xs")}
             data-testid="schema-reload-draft"
             disabled={draftLocked}
             onClick={() => {
@@ -877,8 +878,9 @@ export function SchemaEditor({
           is, and typing is unaffected either way. Still rendered rather than
           swallowed, in the same register as a publish failure below. */}
       {draftFailure !== null && !staleDraft && (
-        <Alert variant="destructive" title="Could not save this change" data-testid="schema-draft-error">
-          {refusalProse(draftSaveError)}
+        <Alert variant="destructive" data-testid="schema-draft-error">
+          <AlertTitle>Could not save this change</AlertTitle>
+          <AlertDescription>{refusalProse(draftSaveError)}</AlertDescription>
         </Alert>
       )}
 
@@ -893,16 +895,20 @@ export function SchemaEditor({
       {failure !== null &&
         failure.code !== STALE_DRAFT &&
         (failure.code !== WOULD_ORPHAN || shownBlockers === null) && (
-          <Alert variant="destructive" title="Could not save this version" data-testid="schema-error">
-            {refusalProse(publish.error)}
+          <Alert variant="destructive" data-testid="schema-error">
+            <AlertTitle>Could not save this version</AlertTitle>
+            <AlertDescription>{refusalProse(publish.error)}</AlertDescription>
           </Alert>
         )}
 
       {past !== undefined ? (
         <PastVersion declared={past} />
       ) : classes.length === 0 ? (
-        <Alert title="No classes yet">
+        <Alert>
+          <AlertTitle>No classes yet</AlertTitle>
+          <AlertDescription>
           A class is a label plus the one geometry it carries — picking a class picks a tool.
+          </AlertDescription>
         </Alert>
       ) : (
         // 240px and then everything else. `minmax(0, 1fr)` rather than `1fr`, so a
@@ -913,10 +919,10 @@ export function SchemaEditor({
               already stacks two-column detail views at that breakpoint, and
               inventing a fifth breakpoint for one panel is the kind of one-off the
               token discipline exists to stop. */}
-          <div className="lg:hidden">
+          <div className="min-w-0 lg:hidden">
             <Label htmlFor="class-picker">Class</Label>
             <Select value={String(selected)} onValueChange={(value) => setSelected(Number(value))}>
-              <SelectTrigger id="class-picker" data-testid="class-picker">
+              <SelectTrigger id="class-picker" data-testid="class-picker" className="w-full">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -1153,7 +1159,7 @@ function VersionDiff({
         <li key={index} className="flex items-start gap-2 text-xs">
           {/* The kernel's own words — they are accurate — sentence-cased for a
               badge. `detail` below stays verbatim; see the docstring. */}
-          <Badge variant={change.kind === "destructive" ? "destructive" : "neutral"}>
+          <Badge variant={change.kind === "destructive" ? "destructive" : "secondary"}>
             {change.kind === "destructive" ? "Destructive" : change.kind === "additive" ? "Additive" : change.kind}
           </Badge>
           <span className="text-muted-foreground">{change.detail}</span>
@@ -1173,8 +1179,11 @@ function VersionDiff({
 function PastVersion({ declared }: { readonly declared: SchemaVersion }): JSX.Element {
   if (declared.classes.length === 0) {
     return (
-      <Alert title="No classes">
+      <Alert>
+        <AlertTitle>No classes</AlertTitle>
+        <AlertDescription>
         Version {declared.version} declares nothing. A project can publish an empty contract.
+        </AlertDescription>
       </Alert>
     );
   }
@@ -1328,20 +1337,29 @@ function OrphanBlockersDialog({
   readonly framesListed: boolean;
   readonly onClose: () => void;
 }): JSX.Element {
+  // Radix mints one description id per dialog root, so a dialog with several
+  // `DialogDescription`s needs each one named here — `label_class` can hold a
+  // space, which a `space`-joined `aria-describedby` cannot, so `uid` prefixes
+  // an index rather than the class name itself.
+  const uid = useId();
+  const blockerIds = blockers?.map((_blocker, index) => `${uid}-blocker-${index}`) ?? [];
+  const noteId = `${uid}-note`;
   return (
     <Dialog open={blockers !== null} onOpenChange={(next) => !next && onClose()}>
-      <DialogContent data-testid="orphan-dialog">
+      <DialogContent data-testid="orphan-dialog" aria-describedby={[...blockerIds, noteId].join(" ")}>
         <DialogTitle>Annotations already use these classes</DialogTitle>
         <NarrowingChanges diff={diff} />
-        {blockers?.map((blocker) => (
-          <DialogDescription key={blocker.label_class}>{describeClassCount(blocker)}</DialogDescription>
+        {blockers?.map((blocker, index) => (
+          <DialogDescription key={blocker.label_class} id={blockerIds[index]}>
+            {describeClassCount(blocker)}
+          </DialogDescription>
         ))}
-        <DialogDescription>
+        <DialogDescription id={noteId}>
           There is no override for this one. Keep the class, or clear those labels first
           {framesListed ? " — the frames carrying them are under “Frames in the way”, below the editor" : ""}.
         </DialogDescription>
         <DialogFooter>
-          <Button variant="secondary" data-testid="orphan-close" onClick={onClose}>
+          <Button variant="outline" data-testid="orphan-close" onClick={onClose}>
             Close
           </Button>
         </DialogFooter>
@@ -1385,27 +1403,34 @@ function DestructiveDialog({
   readonly onConfirm: () => void;
 }): JSX.Element {
   const destructiveClasses = preview?.diff.destructive_classes ?? [];
+  const uid = useId();
+  const summaryId = `${uid}-summary`;
+  const noRegressionId = `${uid}-no-regression`;
+  const openBatchId = `${uid}-open-batch`;
   return (
     <Dialog open={preview !== null} onOpenChange={(next) => !next && onCancel()}>
-      <DialogContent data-testid="destructive-dialog">
+      <DialogContent
+        data-testid="destructive-dialog"
+        aria-describedby={[summaryId, noRegressionId, openBatchId].join(" ")}
+      >
         <DialogTitle>This narrows the schema</DialogTitle>
-        <DialogDescription>
+        <DialogDescription id={summaryId}>
           <span className="tabular-nums">{formatCount(destructiveClasses.length)}</span>{" "}
           {destructiveClasses.length === 1 ? "class narrows" : "classes narrow"}:{" "}
           {describeDestructiveClasses(destructiveClasses)}.
         </DialogDescription>
         <NarrowingChanges diff={preview?.diff ?? null} />
-        <DialogDescription>
+        <DialogDescription id={noRegressionId}>
           No existing annotation becomes invalid — that is why this can be published at all.
           Publishing adds a new version; earlier versions keep what they declared.
         </DialogDescription>
-        <DialogDescription>
+        <DialogDescription id={openBatchId}>
           A batch still open on the current version keeps writing what that version declares,
           including what this one drops. Those labels are kept — but a release cannot be published
           while they are in it.
         </DialogDescription>
         <DialogFooter>
-          <Button variant="secondary" onClick={onCancel}>
+          <Button variant="outline" onClick={onCancel}>
             Cancel
           </Button>
           <Button
diff --git a/frontend/ui-core/src/screens/SchemaForeshadow.tsx b/frontend/ui-core/src/screens/SchemaForeshadow.tsx
index 48cf621f..addaa83d 100644
--- a/frontend/ui-core/src/screens/SchemaForeshadow.tsx
+++ b/frontend/ui-core/src/screens/SchemaForeshadow.tsx
@@ -21,8 +21,10 @@
 
 import type { JSX } from "react";
 
-import { Alert } from "../primitives/Badge";
-import { Button } from "../primitives/Button";
+import { inlineLink } from "../lib/button";
+import { cn } from "../lib/cn";
+import { Alert, AlertDescription } from "../primitives/alert";
+import { Button } from "../primitives/button";
 import { useProjectReadiness } from "./queries";
 
 export function SchemaForeshadow({
@@ -37,17 +39,19 @@ export function SchemaForeshadow({
   if (readiness === null || readiness.hasSchema) return null;
   return (
     <Alert data-testid="schema-foreshadow">
+      <AlertDescription>
       <span>You can ingest now — you&rsquo;ll need labels before annotating.</span>
       {onOpenSchema !== undefined && (
         <Button
           variant="link"
-          className="ml-2"
+          className={cn(inlineLink, "ml-2")}
           data-testid="foreshadow-schema"
           onClick={onOpenSchema}
         >
           Define your labels
         </Button>
       )}
+      </AlertDescription>
     </Alert>
   );
 }
diff --git a/frontend/ui-core/src/screens/batchLifecycle.test.tsx b/frontend/ui-core/src/screens/batchLifecycle.test.tsx
index 0a763ff0..81a8caba 100644
--- a/frontend/ui-core/src/screens/batchLifecycle.test.tsx
+++ b/frontend/ui-core/src/screens/batchLifecycle.test.tsx
@@ -194,13 +194,15 @@ describe("BatchProgressBar", () => {
     accepted: 0,
   };
 
-  it("draws annotation as a success fill on a bordered track, above the counts", () => {
+  it("draws annotation as a fill on a bordered track, above the counts", () => {
     render(<BatchProgressBar counts={COUNTS} />);
     const bar = screen.getByRole("progressbar", { name: "Annotation progress" });
     expect(bar.getAttribute("aria-valuenow")).toBe("64");
     expect(bar.className).toContain("h-2");
     expect(bar.className).toContain("border");
-    expect((bar.firstElementChild as Element).className).toContain("bg-success");
+    // The bar shows an amount, not a polarity, so it stays the primitive's
+    // plain indicator, untouched by any call-site override.
+    expect(bar.firstElementChild?.className).toBe("size-full flex-1 bg-primary transition-all");
     expect(screen.getByText(/7 annotated · 0 skipped · 0 accepted · 4 to do/)).toBeTruthy();
   });
 
diff --git a/frontend/ui-core/src/screens/batchState.test.ts b/frontend/ui-core/src/screens/batchState.test.ts
index 32570954..1fd20766 100644
--- a/frontend/ui-core/src/screens/batchState.test.ts
+++ b/frontend/ui-core/src/screens/batchState.test.ts
@@ -33,6 +33,7 @@ import {
   type Segment,
 } from "./batchState";
 import type { AssetProgress } from "../annotator/jobQueries";
+import { TONE_BORDER, TONE_FILL } from "../patterns/statusTone";
 
 /** The domain's six, written out so a seventh fails here first. */
 const STATES: readonly AssetProgress[] = [
@@ -224,9 +225,9 @@ describe("the status colour vocabulary (#391)", () => {
     // survives a monochrome screen.
     expect(progressDotClass("unannotated")).toBe("border-border bg-transparent");
     expect(progressDotClass("pre_labeled")).toBe("border-primary bg-transparent");
-    expect(progressDotClass("annotated")).toBe("border-success bg-success");
-    expect(progressDotClass("review_pending")).toBe("border-warning bg-transparent");
-    expect(progressDotClass("accepted")).toBe("border-success bg-success");
+    expect(progressDotClass("annotated")).toBe(`${TONE_BORDER.success} ${TONE_FILL.success}`);
+    expect(progressDotClass("review_pending")).toBe(`${TONE_BORDER.warning} bg-transparent`);
+    expect(progressDotClass("accepted")).toBe(`${TONE_BORDER.success} ${TONE_FILL.success}`);
     expect(progressDotClass("skipped")).toBe("border-border bg-stage");
   });
 
@@ -236,9 +237,9 @@ describe("the status colour vocabulary (#391)", () => {
     // unavailable.
     expect(progressCellClass("unannotated")).toBe("bg-muted");
     expect(progressCellClass("pre_labeled")).toBe("bg-primary");
-    expect(progressCellClass("annotated")).toBe("bg-success");
-    expect(progressCellClass("review_pending")).toBe("bg-warning");
-    expect(progressCellClass("accepted")).toBe("bg-success");
+    expect(progressCellClass("annotated")).toBe(TONE_FILL.success);
+    expect(progressCellClass("review_pending")).toBe(TONE_FILL.warning);
+    expect(progressCellClass("accepted")).toBe(TONE_FILL.success);
     expect(progressCellClass("skipped")).toBe("bg-stage");
   });
 
@@ -263,9 +264,9 @@ describe("the status colour vocabulary (#391)", () => {
     // batch somebody is annotating is the *healthy* majority state, so painting
     // it amber would make a list of ordinary work read as a list of problems.
     // The near-black is the action colour: it says "the work is here".
-    expect(BATCH_STATE_VARIANT.in_annotation).toBe("accent");
+    expect(BATCH_STATE_VARIANT.in_annotation).toBe("default");
     expect(BATCH_STATE_VARIANT.completed).toBe("success");
-    expect(BATCH_STATE_VARIANT.draft).toBe("neutral");
+    expect(BATCH_STATE_VARIANT.draft).toBe("secondary");
   });
 });
 
diff --git a/frontend/ui-core/src/screens/batchState.ts b/frontend/ui-core/src/screens/batchState.ts
index af95a680..b3b68b59 100644
--- a/frontend/ui-core/src/screens/batchState.ts
+++ b/frontend/ui-core/src/screens/batchState.ts
@@ -13,11 +13,12 @@
  * promoted-not-copied rule. The variant map moved here out of `BatchesScreen`
  * unchanged, so no shipped pixel moved with it.
  *
- * ## Green arrived, and it arrived the way the old note said it would have to
+ * ## Green arrived, and it lives in one file
  *
- * `tests/scripts/design_tokens.test.mjs` fails the build on a colour that is not a
- * token, so a status green has to be a published token before anything can use
- * one. `success` is that token, and `completed` takes it.
+ * `patterns/statusTone.ts` is the one home for the Tailwind family behind
+ * `success`, `warning` and the rest — this module and every screen that draws
+ * a status read their colour from there rather than naming a family at their
+ * own call site. `completed` takes `success`.
  *
  * ## The tone is a token, and the word is not optional
  *
@@ -53,6 +54,7 @@
  */
 
 import type { AssetProgress } from "../annotator/jobQueries.js";
+import { TONE_BORDER, TONE_FILL, type StatusTone } from "../patterns/statusTone.js";
 
 /**
  * The semantic tokens a status may wear, and the whole list of them.
@@ -63,16 +65,24 @@ import type { AssetProgress } from "../annotator/jobQueries.js";
  * than a diff nobody notices. `outline` is on `BadgeTone` alone: it is a chip
  * treatment (a `card` fill on a hairline) rather than a colour, so nothing can
  * paint a dot or a timeline cell with it.
+ *
+ * Defined in `patterns/statusTone.ts` now, and re-exported here so `PROGRESS_TONE`
+ * and the rest of this module's callers are unchanged.
  */
-export type StatusTone = "neutral" | "accent" | "success" | "warning" | "destructive";
+export type { StatusTone };
 
-export type BadgeTone = StatusTone | "outline";
+/**
+ * `StatusTone` translated into the shadcn `Badge` component's own variant
+ * vocabulary: `default` is the near-black `accent` reading and `secondary` is
+ * the inert `neutral` one, since neither of those words is a `Badge` variant.
+ */
+export type BadgeTone = "default" | "secondary" | "outline" | "success" | "warning" | "destructive";
 
 /** `BatchState`, and how each reads. The order is the machine's own. */
 export const BATCH_STATE_VARIANT: Record<string, BadgeTone> = {
-  draft: "neutral",
+  draft: "secondary",
   approved: "outline",
-  in_annotation: "accent",
+  in_annotation: "default",
   completed: "success",
 };
 
@@ -325,30 +335,6 @@ export function progressTone(progress: AssetProgress | null | undefined): Status
   return PROGRESS_TONE[progress] ?? "neutral";
 }
 
-/**
- * A tone's border and its fill, as whole utility names.
- *
- * Whole names rather than a `border-${tone}` template, because Tailwind scans
- * source *text*: a class assembled at runtime is a class the build never saw and
- * therefore a rule that is never emitted. The failure is silent and looks like a
- * styling mistake, which is why these are written out.
- */
-const TONE_BORDER: Record<StatusTone, string> = {
-  neutral: "border-border",
-  accent: "border-primary",
-  success: "border-success",
-  warning: "border-warning",
-  destructive: "border-destructive",
-};
-
-const TONE_FILL: Record<StatusTone, string> = {
-  neutral: "bg-muted-foreground",
-  accent: "bg-primary",
-  success: "bg-success",
-  warning: "bg-warning",
-  destructive: "bg-destructive",
-};
-
 /**
  * The dot, as the classes that draw it — border and fill, no geometry.
  *
diff --git a/frontend/ui-core/src/screens/composedTransitions.test.tsx b/frontend/ui-core/src/screens/composedTransitions.test.tsx
index 282aad2c..21182bc3 100644
--- a/frontend/ui-core/src/screens/composedTransitions.test.tsx
+++ b/frontend/ui-core/src/screens/composedTransitions.test.tsx
@@ -315,8 +315,8 @@ describe("the ingest outcome's next step", () => {
       ),
     );
     const composed = await screen.findByTestId("approve-start-drive-01");
-    expect(composed.dataset.variant).toBe("primary");
-    expect(screen.getByTestId("open-batch").dataset.variant).toBe("secondary");
+    expect(composed.dataset.variant).toBe("default");
+    expect(screen.getByTestId("open-batch").dataset.variant).toBe("outline");
     expect(screen.queryByTestId("approve-needs-schema")).toBeNull();
   });
 
@@ -339,7 +339,7 @@ describe("the ingest outcome's next step", () => {
     await userEvent.click(screen.getByTestId("approve-needs-schema-go"));
     expect(openSchema).toHaveBeenCalledOnce();
     expect(screen.queryByTestId("approve-start-drive-01")).toBeNull();
-    expect(screen.getByTestId("open-batch").dataset.variant).toBe("primary");
+    expect(screen.getByTestId("open-batch").dataset.variant).toBe("default");
   });
 
   it("offers what it always did when the schema read fails for another reason", async () => {
@@ -356,7 +356,7 @@ describe("the ingest outcome's next step", () => {
     await waitFor(() => expect(sent.some((r) => r.url.endsWith("/schema"))).toBe(true));
     expect(screen.queryByTestId("approve-needs-schema")).toBeNull();
     expect(screen.queryByTestId("approve-start-drive-01")).toBeNull();
-    expect(screen.getByTestId("open-batch").dataset.variant).toBe("primary");
+    expect(screen.getByTestId("open-batch").dataset.variant).toBe("default");
   });
 
   it("keeps the approval line when the batch moves on under it", async () => {
diff --git a/frontend/ui-core/src/screens/dataset.test.tsx b/frontend/ui-core/src/screens/dataset.test.tsx
index 121f0b89..d7691970 100644
--- a/frontend/ui-core/src/screens/dataset.test.tsx
+++ b/frontend/ui-core/src/screens/dataset.test.tsx
@@ -283,6 +283,20 @@ describe("the dataset view", () => {
     // the same total and a very different dataset.
     expect(row.textContent).toContain("31");
     expect(row.textContent).toContain("8");
+
+    // The three tab-count chips are all "secondary" badges — an inert count,
+    // never the filled/primary reading canonical's bare default would give one
+    // tab for no reason its neighbours do not share.
+    const badgeIn = (testId: string): Element | null =>
+      screen.getByTestId(testId).querySelector('[data-slot="badge"]');
+    await waitFor(() => {
+      expect(badgeIn("dataset-tab-assets")).not.toBeNull();
+      expect(badgeIn("dataset-tab-preprocessing")).not.toBeNull();
+      expect(badgeIn("dataset-tab-releases")).not.toBeNull();
+    });
+    expect(badgeIn("dataset-tab-assets")?.getAttribute("data-variant")).toBe("secondary");
+    expect(badgeIn("dataset-tab-preprocessing")?.getAttribute("data-variant")).toBe("secondary");
+    expect(badgeIn("dataset-tab-releases")?.getAttribute("data-variant")).toBe("secondary");
   });
 });
 
@@ -387,7 +401,8 @@ describe("verification", () => {
     });
 
     render(mount(<DatasetScreen projectId={PROJECT} tab="releases" />));
-    await screen.findByTestId("release-v1");
+    const releaseCard = await screen.findByTestId("release-v1");
+    expect(within(releaseCard).getByRole("heading", { level: 3, name: /v1/i })).not.toBeNull();
     expect(sent.some((r) => r.url.endsWith("/verify"))).toBe(false);
 
     await userEvent.click(screen.getByTestId("verify-v1"));
@@ -728,7 +743,7 @@ describe("export, and the third gate word", () => {
   it("says a finished export is done, in the success token (#391)", async () => {
     const badge = await exportWith("succeeded");
     expect(badge.textContent).toContain("Done");
-    expect(badge.className).toContain("text-success");
+    expect(badge.getAttribute("data-variant")).toBe("success");
   });
 
   it("says a failed export failed, and the prose stays beside it (#391)", async () => {
diff --git a/frontend/ui-core/src/screens/gallery.test.tsx b/frontend/ui-core/src/screens/gallery.test.tsx
index 14726396..2f6cd22e 100644
--- a/frontend/ui-core/src/screens/gallery.test.tsx
+++ b/frontend/ui-core/src/screens/gallery.test.tsx
@@ -37,6 +37,7 @@ import { AssetThumbnail } from "./AssetThumbnail";
 import { GalleryScreen, columnsFor } from "./GalleryScreen";
 import { assetActions, batchActions, jobActions, datasetOf } from "../testing/wire.fixtures.js";
 import type { components } from "../generated/api.js";
+import { TONE_BORDER, TONE_FILL } from "../patterns/statusTone.js";
 
 type BatchState = components["schemas"]["BatchState"];
 type JobState = components["schemas"]["AnnotationJobState"];
@@ -797,9 +798,27 @@ describe("the gallery", () => {
     // second, narrower string.
     const expected = [
       { id: "asset-0", tone: "neutral", word: "unannotated", dot: "bg-transparent", cell: "bg-muted" },
-      { id: "asset-1", tone: "success", word: "annotated", dot: "bg-success", cell: "bg-success" },
-      { id: "asset-2", tone: "warning", word: "in review", dot: "border-warning", cell: "bg-warning" },
-      { id: "asset-3", tone: "success", word: "accepted", dot: "bg-success", cell: "bg-success" },
+      {
+        id: "asset-1",
+        tone: "success",
+        word: "annotated",
+        dot: TONE_FILL.success,
+        cell: TONE_FILL.success,
+      },
+      {
+        id: "asset-2",
+        tone: "warning",
+        word: "in review",
+        dot: TONE_BORDER.warning,
+        cell: TONE_FILL.warning,
+      },
+      {
+        id: "asset-3",
+        tone: "success",
+        word: "accepted",
+        dot: TONE_FILL.success,
+        cell: TONE_FILL.success,
+      },
       { id: "asset-4", tone: "neutral", word: "skipped", dot: "bg-stage", cell: "bg-stage" },
     ];
 
@@ -2122,11 +2141,11 @@ describe("the job panel's way into the annotator", () => {
     // page whose step is the column's Annotate is correct. The job's door is
     // never the filled one — the batch's own step is, while it has one.
     const filled = (): Element[] => [
-      ...document.querySelectorAll('[data-testid="gallery"] [data-variant="primary"]'),
+      ...document.querySelectorAll('[data-testid="gallery"] [data-slot="button"][data-variant="default"]'),
     ];
     await openWith("in_annotation", "in_progress", "unannotated");
     expect(filled()).toHaveLength(0);
-    expect(screen.getByTestId(`start-job-${JOB}`).dataset.variant).toBe("secondary");
+    expect(screen.getByTestId(`start-job-${JOB}`).dataset.variant).toBe("outline");
   });
 
   it("starts a pending job, then opens it", async () => {
@@ -2146,7 +2165,7 @@ describe("the job panel's way into the annotator", () => {
     const door = screen.getByTestId(`start-job-${JOB}`);
     expect(door.textContent).toContain("Annotate");
     expect(door.querySelector("svg")).not.toBeNull();
-    expect(door.dataset.variant).toBe("secondary");
+    expect(door.dataset.variant).toBe("outline");
     await userEvent.click(door);
     await waitFor(() => expect(openedJob).toHaveBeenCalledWith(JOB));
     expect(sent.filter((r) => r.method === "POST").map((r) => new URL(r.url).pathname)).toEqual([
@@ -2299,7 +2318,7 @@ describe("the gallery header's own next step", () => {
 
   it("fills exactly one control while the batch has a step of its own", async () => {
     const filled = (): Element[] => [
-      ...document.querySelectorAll('[data-testid="gallery"] [data-variant="primary"]'),
+      ...document.querySelectorAll('[data-testid="gallery"] [data-slot="button"][data-variant="default"]'),
     ];
     await openIn("approved", "unannotated", "unannotated");
     expect(filled()).toHaveLength(1);
diff --git a/frontend/ui-core/src/screens/ingest.test.tsx b/frontend/ui-core/src/screens/ingest.test.tsx
index 0e83a9e3..8719867b 100644
--- a/frontend/ui-core/src/screens/ingest.test.tsx
+++ b/frontend/ui-core/src/screens/ingest.test.tsx
@@ -830,7 +830,7 @@ describe("watching a run", () => {
 
     const badge = await screen.findByTestId("run-state");
     await waitFor(() => expect(badge.textContent).toBe("Done"));
-    expect(badge.className).toContain("text-success");
+    expect(badge.getAttribute("data-variant")).toBe("success");
   });
 
   it("keeps a failed run in the error colour, and the word with it (#391)", async () => {
diff --git a/frontend/ui-core/src/screens/models.test.tsx b/frontend/ui-core/src/screens/models.test.tsx
index 2dbe2f00..7dcaa7f5 100644
--- a/frontend/ui-core/src/screens/models.test.tsx
+++ b/frontend/ui-core/src/screens/models.test.tsx
@@ -406,7 +406,7 @@ it("renders every field a full connection carries, top to bottom", async () => {
     card(<ConnectionCard connection={full()} onEdit={() => undefined} onDelete={() => undefined} />),
   );
   const shown = await screen.findByTestId("connection-sam2-full");
-  expect(within(shown).getByRole("heading", { level: 3 }).textContent).toBe("sam2-full");
+  expect(within(shown).getByText("sam2-full").getAttribute("data-slot")).toBe("card-title");
   expect(within(shown).getByTestId("model-reference").textContent).toBe(
     `${SAM_BASE_PLUS} @ ${SAM_BASE_PLUS_COMMIT}`,
   );
diff --git a/frontend/ui-core/src/screens/schemaDraft.test.tsx b/frontend/ui-core/src/screens/schemaDraft.test.tsx
index 417e3061..ed2ebcc8 100644
--- a/frontend/ui-core/src/screens/schemaDraft.test.tsx
+++ b/frontend/ui-core/src/screens/schemaDraft.test.tsx
@@ -28,7 +28,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { JSX, ReactNode } from "react";
 
 import { ApiProvider } from "../data/ApiProvider";
-import { Toaster } from "../primitives/Feedback";
+import { Toaster } from "../primitives/sonner";
 import { writeToken } from "../data/session";
 import { ProjectScreen } from "./ProjectScreen";
 
diff --git a/frontend/ui-core/src/styles.css b/frontend/ui-core/src/styles.css
index 3fea9bf5..23d45c6f 100644
--- a/frontend/ui-core/src/styles.css
+++ b/frontend/ui-core/src/styles.css
@@ -6,8 +6,7 @@
  * heading face inheriting the body's, radius medium, menu inverted/subtle, and
  * the pointer cursor on pressable controls) — the CLI's exact generated output,
  * transcribed verbatim from a Docker scratch project built with `shadcn` 4.19.0. The preset is the source of truth for every
- * name below except nine: `stage`, `brand`, `success`/`success-foreground`,
- * `warning`/`warning-foreground` and the three `origin-*` marks are
+ * name below except five: `stage`, `brand` and the three `origin-*` marks are
  * VisionSet's own, each justified in
  * `DESIGN.md` and each following shadcn's own extension convention — a value
  * in `:root`, a dark counterpart in `.dark`, exposure through `@theme
@@ -84,15 +83,6 @@
    * is a design decision, not a styling one.
    */
   --brand: oklch(0.653 0.178 32.3);
-  /*
-   * The batch-state family's one filled control (the annotation editor's
-   * `Save and stay`), a green analogue of the preset's own destructive
-   * treatment.
-   */
-  --success: oklch(0.577 0.132 152);
-  --success-foreground: oklch(1 0 0);
-  --warning: oklch(0.646 0.13 80);
-  --warning-foreground: oklch(0.205 0 0);
   /*
    * Where a model's weights come from, as a card's accent edge on the Models
    * page: the hub, the user's own, the Robomous registry. A mark, never a
@@ -141,10 +131,6 @@
 
   --stage: oklch(0.24 0 0);
   --brand: oklch(0.653 0.178 32.3);
-  --success: oklch(0.696 0.17 152);
-  --success-foreground: oklch(0.205 0 0);
-  --warning: oklch(0.75 0.14 80);
-  --warning-foreground: oklch(0.205 0 0);
   --origin-hub: oklch(0.8 0.16 85);
   --origin-custom: oklch(0.65 0.15 250);
   --origin-robomous: oklch(0.68 0.17 35);
@@ -195,10 +181,6 @@
   /* VisionSet's extensions, exposed the same way as every preset colour. */
   --color-stage: var(--stage);
   --color-brand: var(--brand);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
   --color-origin-hub: var(--origin-hub);
   --color-origin-custom: var(--origin-custom);
   --color-origin-robomous: var(--origin-robomous);
@@ -215,7 +197,7 @@
   /* The hairline and the outline *colour* — the two things every element
      inherits. The focus treatment itself belongs to the primitives: each one
      carries Nova's own `ring-3` ring in `ring/50` (DESIGN.md, Borders and
-     Focus), so the base layer names the colour and stays out of the geometry.
+     focus), so the base layer names the colour and stays out of the geometry.
      Nothing here may declare focus geometry again: one blanket declaration in
      this layer is how thirteen components' rings got overridden at once. */
   * {
diff --git a/frontend/ui-core/src/testing/resizeObserver.ts b/frontend/ui-core/src/testing/resizeObserver.ts
new file mode 100644
index 00000000..f1d4c9e9
--- /dev/null
+++ b/frontend/ui-core/src/testing/resizeObserver.ts
@@ -0,0 +1,44 @@
+/**
+ * `ResizeObserver`, for the test files that open a tooltip.
+ *
+ * Canonical `TooltipProvider` defaults `delayDuration` to 0, so a trigger opens
+ * its tooltip on the same hover `userEvent.click` produces — there is no dwell
+ * left to not reach. Nova's `TooltipContent` renders a Radix `Arrow`, and the
+ * popper measures it through `@radix-ui/react-use-size`, which reaches for
+ * `ResizeObserver` unconditionally on mount. jsdom implements none, so the mount
+ * throws `ReferenceError: ResizeObserver is not defined`.
+ *
+ * The failure is load-dependent, which is why it is worth a shared file rather
+ * than a stub per accident. The tooltip's open is a `setTimeout(…, 0)` racing
+ * `userEvent`'s own awaits, so whether it lands inside the test that caused it
+ * depends on how busy the machine is: `toolPalette.test.tsx` fails 1 of its 38
+ * tests with this absent, and which of the nine tooltip files reports it changes
+ * between runs. A file that renders a `TooltipProvider` and drives it with
+ * `userEvent` is exposed whether or not it has failed yet, so all nine call this.
+ *
+ * **Opt-in rather than installed in `vitest.setup.ts`.** A global stand-in would
+ * be the shorter fix and it falsifies a deliberate assertion:
+ * `gallery.test.tsx` pins `globalThis.ResizeObserver` as `undefined` to prove the
+ * one-column fallback it measures is reached by a genuinely absent observer and
+ * not asserted against itself. Installing this globally fails that test — and
+ * more quietly, it would flip `useColumns` and `ClipRangeTimeline` onto their
+ * observer path in all 59 files, with a stand-in that never fires. Scoped, the
+ * blast radius is exactly the files that need it.
+ *
+ * `vi.stubGlobal` rather than an assignment, so the `vi.unstubAllGlobals()` these
+ * files already run in `afterEach` takes it back down.
+ */
+
+import { vi } from "vitest";
+
+/** Call in `beforeEach`. */
+export function stubResizeObserver(): void {
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    },
+  );
+}
diff --git a/frontend/ui-core/src/tokens.test.ts b/frontend/ui-core/src/tokens.test.ts
index b8db4b9f..93fd7be7 100644
--- a/frontend/ui-core/src/tokens.test.ts
+++ b/frontend/ui-core/src/tokens.test.ts
@@ -3,9 +3,8 @@
  *
  * The foundation gate: `styles.css` is the shadcn preset's exact generated
  * output (`:root`, `.dark`, `@theme inline`, the base layer) plus VisionSet's
- * justified extensions (`stage`, `brand`, `success`, `warning` — each with
- * its own `-foreground` where the preset's own status token has one — and the
- * three `origin-*` marks) and the sidebar rail's two layout widths. `tokens.ts` is the TypeScript mirror a
+ * justified extensions (`stage`, `brand`, and the three `origin-*` marks)
+ * and the sidebar rail's two layout widths. `tokens.ts` is the TypeScript mirror a
  * `<canvas>`/`<svg>` or a test reads a colour off of; this suite parses the
  * stylesheet structurally and asserts the two agree, declaration for
  * declaration, and that none of the tokens this rewrite retired have crept
@@ -103,16 +102,12 @@ const BASE_SEMANTIC_NAMES = [
 ];
 const SEMANTIC_NAMES = [...BASE_SEMANTIC_NAMES, ...CHART_NAMES, ...SIDEBAR_NAMES];
 
-// The extensions VisionSet keeps, spelled as their nine variable names —
+// The extensions VisionSet keeps, spelled as their five variable names —
 // the same list `tokens.ts` exports as `EXTENSIONS`, checked for drift below
 // rather than assumed equal to it.
 const EXTENSION_NAMES = [
   "stage",
   "brand",
-  "success",
-  "success-foreground",
-  "warning",
-  "warning-foreground",
   "origin-hub",
   "origin-custom",
   "origin-robomous",
@@ -127,7 +122,7 @@ const ORANGE_CHART = {
 } as const;
 
 describe("EXTENSIONS", () => {
-  it("names exactly the nine extension variables, in the order tokens.ts declares them", () => {
+  it("names exactly the five extension variables, in the order tokens.ts declares them", () => {
     expect(EXTENSIONS).toEqual(EXTENSION_NAMES);
   });
 });
@@ -135,7 +130,7 @@ describe("EXTENSIONS", () => {
 describe(":root", () => {
   const root = declarations(blockBody(STYLESHEET, ":root {"));
 
-  it("declares every standard shadcn semantic variable, the nine extensions, and --radius, and nothing else", () => {
+  it("declares every standard shadcn semantic variable, the five extensions, and --radius, and nothing else", () => {
     expect([...root.keys()].sort()).toEqual(
       [...SEMANTIC_NAMES, ...EXTENSION_NAMES, "radius"].sort(),
     );
@@ -169,7 +164,7 @@ describe(":root", () => {
 describe(".dark", () => {
   const dark = declarations(blockBody(STYLESHEET, ".dark {"));
 
-  it("declares every standard shadcn semantic variable and the nine extensions, and nothing else (no --radius)", () => {
+  it("declares every standard shadcn semantic variable and the five extensions, and nothing else (no --radius)", () => {
     expect([...dark.keys()].sort()).toEqual([...SEMANTIC_NAMES, ...EXTENSION_NAMES].sort());
   });
 
diff --git a/frontend/ui-core/src/tokens.ts b/frontend/ui-core/src/tokens.ts
index 8b30708c..5313253b 100644
--- a/frontend/ui-core/src/tokens.ts
+++ b/frontend/ui-core/src/tokens.ts
@@ -12,8 +12,7 @@
  * `nova`, base colour `neutral`, chart palette `neutral`) exactly as the CLI
  * 4.19.0 scratch generated it, plus VisionSet's justified extensions:
  * `stage` (the annotator's surround), `brand` (Robomous coral — identity
- * only), the `success`/`warning` status pair, each with its own
- * `-foreground`, and the three `origin-*` marks a Models card's accent edge
+ * only), and the three `origin-*` marks a Models card's accent edge
  * takes. Everything else is shadcn's own vocabulary.
  */
 
@@ -57,12 +56,6 @@ export const LIGHT_THEME: Readonly<Record<string, string>> = Object.freeze({
   // Robomous coral. Identity only — the wordmark and its styleguide swatch
   // — never a functional-UI colour.
   brand: "oklch(0.653 0.178 32.3)",
-  // The batch-state family's filled control, a green analogue of the
-  // preset's own destructive treatment.
-  success: "oklch(0.577 0.132 152)",
-  "success-foreground": "oklch(1 0 0)",
-  warning: "oklch(0.646 0.13 80)",
-  "warning-foreground": "oklch(0.205 0 0)",
   // Where a model's weights come from, as a card's accent edge: a mark,
   // never a surface, ink or status. Theme-stable, like the chart palette.
   "origin-hub": "oklch(0.8 0.16 85)",
@@ -105,10 +98,6 @@ export const DARK_THEME: Readonly<Record<string, string>> = Object.freeze({
 
   stage: "oklch(0.24 0 0)",
   brand: "oklch(0.653 0.178 32.3)",
-  success: "oklch(0.696 0.17 152)",
-  "success-foreground": "oklch(0.205 0 0)",
-  warning: "oklch(0.75 0.14 80)",
-  "warning-foreground": "oklch(0.205 0 0)",
   "origin-hub": "oklch(0.8 0.16 85)",
   "origin-custom": "oklch(0.65 0.15 250)",
   "origin-robomous": "oklch(0.68 0.17 35)",
@@ -121,14 +110,10 @@ export const THEME = {
   fontHeading: "var(--font-sans)",
 } as const;
 
-/** The nine variable names VisionSet keeps beyond shadcn's own vocabulary. */
+/** The five variable names VisionSet keeps beyond shadcn's own vocabulary. */
 export const EXTENSIONS = [
   "stage",
   "brand",
-  "success",
-  "success-foreground",
-  "warning",
-  "warning-foreground",
   "origin-hub",
   "origin-custom",
   "origin-robomous",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 90fb3d69..2d2e09d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,33 +123,12 @@ importers:
 
   frontend/ui-core:
     dependencies:
+      '@base-ui/react':
+        specifier: ^1.7.0
+        version: 1.7.0(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@fontsource-variable/geist':
         specifier: ^5.3.0
         version: 5.3.0
-      '@radix-ui/react-dialog':
-        specifier: ^1.1.23
-        version: 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.24
-        version: 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-label':
-        specifier: ^2.1.15
-        version: 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-progress':
-        specifier: ^1.1.16
-        version: 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-select':
-        specifier: ^2.3.7
-        version: 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot':
-        specifier: ^1.3.3
-        version: 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-tabs':
-        specifier: ^1.1.21
-        version: 1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-tooltip':
-        specifier: ^1.2.16
-        version: 1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@tanstack/react-query':
         specifier: ^5.101.4
         version: 5.101.4(react@19.2.8)
@@ -171,6 +150,9 @@ importers:
       openapi-fetch:
         specifier: ^0.17.0
         version: 0.17.0
+      radix-ui:
+        specifier: ^1.6.7
+        version: 1.6.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       shadcn:
         specifier: ^4.19.0
         version: 4.19.0(typescript@6.0.3)
@@ -388,6 +370,33 @@ packages:
     resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
     engines: {node: '>=6.9.0'}
 
+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@bramus/specificity@2.4.2':
     resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
     hasBin: true
@@ -735,6 +744,45 @@ packages:
   '@radix-ui/primitive@1.1.7':
     resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
 
+  '@radix-ui/react-accessible-icon@1.1.15':
+    resolution: {integrity: sha512-WTQwcAvQf5sOcuUyi90lKPbhwcvQ+j55cjrSmeaN+L2vKU3DooOvlKw2MDeiJ5IkV5N905KW0/fGojKOBhD11A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-accordion@1.2.20':
+    resolution: {integrity: sha512-jDhG9FvAEnlhnjrsINbNXcUa4G+L1KqSkJSunkbKEzFRcAb52jvM0PjPxPRvhe1HNc5F5yc0yzzWeeqlH4yBIg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-alert-dialog@1.1.23':
+    resolution: {integrity: sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.15':
     resolution: {integrity: sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA==}
     peerDependencies:
@@ -748,6 +796,58 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-aspect-ratio@1.1.15':
+    resolution: {integrity: sha512-fy+dyVR+90nelK8rqIznFlxzx7uPcGbhxH8Nfr2bHb4UfSe+e3hklOC0luK0hDwVwnRX7xTRySpsrQVeW+/oNQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.2.6':
+    resolution: {integrity: sha512-4ULOTJ/mqy2hT9GlWa/MFHxHSvH3nJzHnZM1waNsc5Bonv7i70aNenghXmD97S6OJ81ekXONGGt4nT1r0PfEdA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.11':
+    resolution: {integrity: sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.20':
+    resolution: {integrity: sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.15':
     resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
     peerDependencies:
@@ -770,6 +870,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context-menu@2.3.7':
+    resolution: {integrity: sha512-CtXP35dxaB5T3zXSd+E3uHe/QpXcpYnZmxp6OaIbfthtfW4wyb77M23BG+bwIJDtsMwEP/YssdsmNyZu7jhWew==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-context@1.2.2':
     resolution: {integrity: sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==}
     peerDependencies:
@@ -849,6 +962,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-form@0.1.16':
+    resolution: {integrity: sha512-Q4TLEn2A7TAypxwmd6R9EwrlXDvkfYSDMrq9/887AXAGh+G1rH+kYJKSTv+Si9Y0JPKTwKYv6PviAJosysNimA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.23':
+    resolution: {integrity: sha512-H8qONfZd3ltrU3+jHCIgITbWo6e1iTKvP9DHdrvYbX48ooRM5FjEDTn16AMwdfuOGkWdZEhpl3PLL/Wk/AnHDQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-id@1.1.4':
     resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
     peerDependencies:
@@ -884,6 +1023,71 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menubar@1.1.24':
+    resolution: {integrity: sha512-eeVs0vf7cuqXaM0qLQCPcufImiJNVBXdJDLu7ZGYl2732UH23Qat/foNGrr6vYV3/DdTsBqASoggUFgH14OcZA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.22':
+    resolution: {integrity: sha512-ou7iLEJ+yrhQndkkA4U21XIdS/CS45F4iXIkTZcb6/Ne9EMsOuDudVmCwmDnfFZZ+y1FZqXRNSIgBy+YMvZVZg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-one-time-password-field@0.1.16':
+    resolution: {integrity: sha512-Tj9P6ntAJEw52oq/F0AGknXR4XncxEt7XU47O3xJQOiWfLzEy3d9gtgKfvjSzGxzHkfL+VzvxGu2KTFsloJqXw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-password-toggle-field@0.1.11':
+    resolution: {integrity: sha512-4gvFnmDXu3dgj21CqsufzIameRvlRd4SBqaWhcrlrNhRo0Y5i/49AmRJYe1fdAM3G2VNBbmin4b0D6cdQocwgw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.23':
+    resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.3.7':
     resolution: {integrity: sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==}
     peerDependencies:
@@ -949,8 +1153,121 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-roving-focus@1.1.19':
-    resolution: {integrity: sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==}
+  '@radix-ui/react-radio-group@1.4.7':
+    resolution: {integrity: sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.19':
+    resolution: {integrity: sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.18':
+    resolution: {integrity: sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.3.7':
+    resolution: {integrity: sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.15':
+    resolution: {integrity: sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.4.7':
+    resolution: {integrity: sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.3.3':
+    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.3.7':
+    resolution: {integrity: sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.21':
+    resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.23':
+    resolution: {integrity: sha512-ofhyAsYaocRGOs/n0XWdUOSVzEAG6BfrMVM8z0c0kLEWY38w/0WuMFPTJP/HVaZPYkMvHZoKIIhNcjbTCBILPg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -962,8 +1279,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-select@2.3.7':
-    resolution: {integrity: sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==}
+  '@radix-ui/react-toggle-group@1.1.19':
+    resolution: {integrity: sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -975,17 +1292,21 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-slot@1.3.3':
-    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
+  '@radix-ui/react-toggle@1.1.18':
+    resolution: {integrity: sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==}
     peerDependencies:
       '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@radix-ui/react-tabs@1.1.21':
-    resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
+  '@radix-ui/react-toolbar@1.1.19':
+    resolution: {integrity: sha512-Ph0IvtYw4VB12ZnZg+YtrGs8yJQsnizwo/zu0R4Y/nWugtJzA7Pg1eWeuDR9+LSqn+xjamss+UOSOJJJ4gx8jw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1037,6 +1358,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-escape-keydown@1.1.5':
+    resolution: {integrity: sha512-ge3ipobwSXTj4JyVtswQ7qZj0ZHdtbGuOno/LrgAAeSxtsJ6Vs4Gz5IkPH2bmqpjcLUFoqGhA/mueuIf63UXlA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-is-hydrated@0.1.3':
     resolution: {integrity: sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==}
     peerDependencies:
@@ -2812,6 +3142,19 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  radix-ui@1.6.7:
+    resolution: {integrity: sha512-QBdhh1arIEUvPC0dQ5+nwWAxt7+N+oP/9jPwjJkGFoSk/sqxg32gJtSXGtFh8frAIcS6oC9cx2Q+7KYCQLOAeA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   range-parser@1.3.0:
     resolution: {integrity: sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==}
     engines: {node: '>= 0.6'}
@@ -2880,6 +3223,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  reselect@5.3.0:
+    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -3210,6 +3556,11 @@ packages:
       '@types/react':
         optional: true
 
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -3611,6 +3962,29 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
+  '@base-ui/react@1.7.0(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.3.2(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@base-ui/utils@0.3.2(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      reselect: 5.3.0
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
   '@bramus/specificity@2.4.2':
     dependencies:
       css-tree: 3.2.1
@@ -3876,6 +4250,45 @@ snapshots:
 
   '@radix-ui/primitive@1.1.7': {}
 
+  '@radix-ui/react-accessible-icon@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-accordion@1.2.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-alert-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
   '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -3885,45 +4298,236 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-aspect-ratio@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-avatar@1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-checkbox@1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-collapsible@1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-context@1.2.2(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-direction@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-form@0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-hover-card@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
+      '@radix-ui/primitive': 1.1.7
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+  '@radix-ui/react-id@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@radix-ui/react-context@1.2.2(@types/react@19.2.18)(react@19.2.8)':
+  '@radix-ui/react-label@2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       aria-hidden: 1.2.6
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
@@ -3932,80 +4536,87 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-direction@1.1.4(@types/react@19.2.18)(react@19.2.8)':
-    dependencies:
-      react: 19.2.8
-    optionalDependencies:
-      '@types/react': 19.2.18
-
-  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-menubar@1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-navigation-menu@1.2.22(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.18)(react@19.2.8)':
-    dependencies:
-      react: 19.2.8
-    optionalDependencies:
-      '@types/react': 19.2.18
-
-  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-one-time-password-field@0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-id@1.1.4(@types/react@19.2.18)(react@19.2.8)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      react: 19.2.8
-    optionalDependencies:
-      '@types/react': 19.2.18
-
-  '@radix-ui/react-label@2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-password-toggle-field@0.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-popover@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -4014,9 +4625,8 @@ snapshots:
       '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       aria-hidden: 1.2.6
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
@@ -4081,6 +4691,23 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
+  '@radix-ui/react-radio-group@1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
   '@radix-ui/react-roving-focus@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -4100,6 +4727,23 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
+  '@radix-ui/react-scroll-area@1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
   '@radix-ui/react-select@2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/number': 1.1.3
@@ -4130,6 +4774,34 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
+  '@radix-ui/react-separator@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-slider@1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
   '@radix-ui/react-slot@1.3.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
@@ -4137,6 +4809,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
+  '@radix-ui/react-switch@1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
   '@radix-ui/react-tabs@1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -4153,6 +4839,67 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
+  '@radix-ui/react-toast@1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toggle-group@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toggle@1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toolbar@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
   '@radix-ui/react-tooltip@1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -4196,6 +4943,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
+  '@radix-ui/react-use-escape-keydown@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
   '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
@@ -5805,6 +6559,69 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  radix-ui@1.6.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-accessible-icon': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-accordion': 1.2.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-alert-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-aspect-ratio': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-avatar': 1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context-menu': 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-form': 0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-hover-card': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menubar': 1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-navigation-menu': 1.2.22(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-one-time-password-field': 0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-password-toggle-field': 0.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popover': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-radio-group': 1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-scroll-area': 1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-select': 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slider': 1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-switch': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-tabs': 1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toast': 1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toolbar': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-escape-keydown': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
   range-parser@1.3.0: {}
 
   raw-body@3.0.2:
@@ -5867,6 +6684,8 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  reselect@5.3.0: {}
+
   resolve-from@4.0.0: {}
 
   restore-cursor@5.1.0:
@@ -6215,6 +7034,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
+  use-sync-external-store@1.6.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
   util-deprecate@1.0.2: {}
 
   validate-npm-package-name@7.0.2: {}
diff --git a/scripts/shadcn_add.sh b/scripts/shadcn_add.sh
new file mode 100644
index 00000000..f8ac87e9
--- /dev/null
+++ b/scripts/shadcn_add.sh
@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+# Runs from frontend/ui-core (pnpm --filter sets the cwd). Writes the CLI's
+# pristine output to shadcn/<name>.tsx, then relativises src/primitives/<name>.tsx.
+set -euo pipefail
+[ "$#" -gt 0 ] || { echo "usage: pnpm shadcn:add <component>..." >&2; exit 2; }
+# `pnpm dlx`, not `npx`: pnpm is the only package manager here, and a fetch-and-run
+# of an uninstalled package is exactly what the cool-down governs (cooldown.test.mjs).
+pnpm dlx shadcn@4.19.0 add "$@" --overwrite --yes
+mkdir -p shadcn
+for name in "$@"; do
+  cp "src/primitives/$name.tsx" "shadcn/$name.tsx"
+done
+node ../../scripts/shadcn_relativize.mjs src/primitives/*.tsx
diff --git a/scripts/shadcn_relativize.mjs b/scripts/shadcn_relativize.mjs
new file mode 100644
index 00000000..caa0f245
--- /dev/null
+++ b/scripts/shadcn_relativize.mjs
@@ -0,0 +1,16 @@
+import { readFileSync, writeFileSync } from "node:fs";
+
+const RULES = [
+  [/from "@\/lib\/cn"/g, 'from "../lib/cn"'],
+  [/from "@\/primitives\/([a-z-]+)"/g, 'from "./$1"'],
+];
+
+export function relativize(source) {
+  return RULES.reduce((text, [pattern, replacement]) => text.replace(pattern, replacement), source);
+}
+
+if (process.argv[1] === new URL(import.meta.url).pathname || process.argv[1].endsWith("shadcn_relativize.mjs")) {
+  for (const file of process.argv.slice(2)) {
+    writeFileSync(file, relativize(readFileSync(file, "utf8")));
+  }
+}
diff --git a/tests/scripts/design_tokens.test.mjs b/tests/scripts/design_tokens.test.mjs
index c57c7067..a546134d 100644
--- a/tests/scripts/design_tokens.test.mjs
+++ b/tests/scripts/design_tokens.test.mjs
@@ -47,9 +47,15 @@ const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", ".
  * rather than an array index or a TypeScript tuple type.
  */
 const HEX = ["#", "[0-9a-fA-F]{3,8}"].join("");
-const ARBITRARY_COLOUR = new RegExp(
-  String.raw`-\[\s*(?:${HEX}|var\(\s*--|rgba?\(|hsla?\(|oklch\(|color-mix\()`,
-);
+const LITERAL = String.raw`(?:${HEX}|rgba?\(|hsla?\(|oklch\()`;
+// A raw colour right inside the bracket…
+const ARBITRARY_COLOUR = new RegExp(String.raw`-\[\s*(?:${LITERAL}|var\(\s*--)`);
+// The one colour-mix the preset writes mixes tokens only:
+// `color-mix(in_oklch,var(--secondary),var(--foreground)_5%)`. Any other
+// argument shape — a literal, a named colour, a bare number — is a colour.
+const TOKEN_MIX = String.raw`color-mix\(in_[a-z0-9-]+(?:,var\(--[a-z0-9-]+\)(?:_\d+(?:\.\d+)?%)?)+\)`;
+const BRACKET_MIX = new RegExp(String.raw`-\[\s*color-mix\([^\]]*\]`);
+const ALLOWED_MIX = new RegExp(String.raw`-\[\s*${TOKEN_MIX}\]`);
 const COMMENT = /^\s*(?:\/\/|\/\*|\*|#)/;
 const SOURCE = /\.(?:ts|tsx|css)$/;
 // The generated client is 6,000 machine-written lines and contains no class name.
@@ -60,7 +66,11 @@ export function colouredClassesIn(file, text) {
   return text
     .split("\n")
     .map((line, index) => ({ line, at: index + 1 }))
-    .filter(({ line }) => !COMMENT.test(line) && ARBITRARY_COLOUR.test(line))
+    .filter(
+      ({ line }) =>
+        !COMMENT.test(line) &&
+        (ARBITRARY_COLOUR.test(line) || (BRACKET_MIX.test(line) && !ALLOWED_MIX.test(line))),
+    )
     .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
 }
 
@@ -94,6 +104,16 @@ test("the scan finds a colour smuggled into a class, and nothing that merely loo
   assert.deepEqual(colouredClassesIn("h.tsx", `   * Never write \`bg-[${"#"}eb5a47]\`.`), []);
   // And a CSS custom property *declaration* is where colours are supposed to live.
   assert.deepEqual(colouredClassesIn("i.css", `  --color-primary: #eb5a47;`), []);
+  // A colour-mix of two tokens names no colour of its own — the preset's own
+  // Button hover step.
+  assert.deepEqual(colouredClassesIn("x.tsx", 'className="hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]"'), []);
+  // A colour-mix that mixes in a literal is still a colour smuggled into a class.
+  assert.equal(colouredClassesIn("x.tsx", 'className="bg-[color-mix(in_srgb,#fff,var(--x))]"').length, 1);
+  // A named CSS colour inside color-mix is still a colour.
+  assert.equal(colouredClassesIn("x.tsx", 'className="bg-[color-mix(in_oklch,red,var(--x))]"').length, 1);
+  // Whatever order the tokens come in, and whichever colour space, two tokens
+  // stay two tokens.
+  assert.equal(colouredClassesIn("x.tsx", 'className="bg-[color-mix(in_srgb,var(--a)_40%,var(--b))]"').length, 0);
 });
 
 /**
@@ -222,6 +242,14 @@ const RETIRED_DECLARATIONS = [
   dash("--text", "section"),
   dash("--text", "page"),
   dash("--spacing", "sidebar", "mobile"),
+  dash("--success"),
+  dash("--success", "foreground"),
+  dash("--warning"),
+  dash("--warning", "foreground"),
+  dash("--color", "success"),
+  dash("--color", "success", "foreground"),
+  dash("--color", "warning"),
+  dash("--color", "warning", "foreground"),
 ];
 
 /** Every retired name in `text` declared as a custom property, not merely mentioned. */
@@ -254,7 +282,12 @@ test("the scan finds a retired declaration, and not a comment or a longer name t
     `1: ${dash("--color", "disabled", "foreground")}`,
   ]);
   // A current, kept extension is not a retired one.
-  assert.deepEqual(retiredDeclarationsIn(`  --success-foreground: white;`), []);
+  assert.deepEqual(retiredDeclarationsIn(`  --stage: white;`), []);
+  // success/warning retired alongside the forked primitives that needed them —
+  // no longer a kept extension, so this now reports a hit.
+  assert.deepEqual(retiredDeclarationsIn(`  --success-foreground: white;`), [
+    `1: ${dash("--success", "foreground")}`,
+  ]);
 });
 
 test("the retired foundation vocabulary is absent from the stylesheet", () => {
diff --git a/tests/scripts/form_buttons.test.mjs b/tests/scripts/form_buttons.test.mjs
new file mode 100644
index 00000000..7b63ae57
--- /dev/null
+++ b/tests/scripts/form_buttons.test.mjs
@@ -0,0 +1,425 @@
+/**
+ * Every `<Button>` inside a `<form>` says what kind it is.
+ *
+ * ## Why this is a gate and not a review note
+ *
+ * A `<button>` with no `type` is a **submit** button — that is HTML's default,
+ * not a browser quirk. The old VisionSet `Button` papered over it by defaulting
+ * `type="button"`, so a "Cancel" beside a submit was harmless. The canonical
+ * shadcn file does not: it forwards props and adds no default, which is the
+ * correct thing for a primitive to do and the reason this rule has to live
+ * somewhere else.
+ *
+ * The failure it prevents is quiet and destructive in the same breath. A
+ * "Cancel" that submits does not look broken — it closes the dialog, because the
+ * submit handler navigates or the mutation succeeds. The person who pressed it
+ * believes they backed out; the record says they went ahead. Nothing in the
+ * suite catches that unless a test happens to press Cancel *and* assert the
+ * absence of a request, and no jsdom test asserts absence by default.
+ *
+ * `primitives.test.tsx` used to hold this claim about the primitive. It cannot
+ * any more — there is no default left to assert — so the claim moves to where
+ * the property now lives: every call site, checked as text.
+ *
+ * ## The bargain
+ *
+ * The same one `design_tokens.test.mjs` and `annotator_boundary.test.mjs` strike:
+ * the rule is a pure function over one file's text, so the gate proves it fires
+ * against fabricated input and then runs it over the repo. It reads
+ * `git ls-files` — the **index** — so a merely staged file is checked before any
+ * commit lands, and `node_modules/` and `dist/` stay out for free.
+ *
+ * A text scan is the right instrument here rather than a limitation. The
+ * question "is this button inside a form" is answered by the JSX as written; a
+ * runtime check would need every dialog opened in every state to see the same
+ * pairs, and would still miss the branch that did not render.
+ */
+
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+
+const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "..");
+
+const TSX = /\.tsx$/;
+
+/**
+ * An attribute named exactly `type`, so `data-type=` and `itemType=` do not
+ * satisfy the rule by accident — the lookbehind is the whole point of spelling
+ * it out rather than using `\btype=`, which a hyphen satisfies.
+ */
+const SAYS_TYPE = /(?<![-\w])type=/;
+
+/**
+ * Walk an opening JSX tag from `<` to the `>` that closes *it*.
+ *
+ * Not a regex, because an attribute value legitimately contains the terminator:
+ * `onClick={() => close()}` has a `>` in an arrow, `data-testid="a>b"` has one in
+ * a string, and `{/* … *\/}` can have one in a comment. Tracking brace depth and
+ * quote state answers all three, and anything a JSX attribute can hold is inside
+ * one or the other.
+ *
+ * Returns the tag's source text, or `null` if the file ends mid-tag — which is
+ * not valid TSX and would have failed `tsc` long before this gate ran.
+ */
+function openingTagAt(text, start) {
+  let depth = 0;
+  let quote = null;
+  for (let i = start; i < text.length; i += 1) {
+    const ch = text[i];
+    if (quote !== null) {
+      if (ch === "\\") i += 1;
+      else if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === "`") quote = ch;
+    else if (ch === "{") depth += 1;
+    else if (ch === "}") depth -= 1;
+    else if (ch === ">" && depth === 0) return text.slice(start, i + 1);
+  }
+  return null;
+}
+
+/** The 1-based line `index` falls on. */
+function lineAt(text, index) {
+  let line = 1;
+  for (let i = 0; i < index; i += 1) if (text[i] === "\n") line += 1;
+  return line;
+}
+
+/**
+ * Every `<form>` … `</form>` span in `text`, as `[start, end)` offsets.
+ *
+ * A `<form>` may not contain another `<form>` — HTML forbids it and React will
+ * not invent one — so the next `</form>` is always the matching close. The
+ * gate's own repo pass asserts open/close counts line up, which is what would
+ * catch the day that stops being true.
+ */
+export function formRanges(text) {
+  const ranges = [];
+  const opens = /<form(?=[\s/>])/g;
+  let open;
+  while ((open = opens.exec(text)) !== null) {
+    const close = text.indexOf("</form>", open.index);
+    ranges.push([open.index, close === -1 ? text.length : close + "</form>".length]);
+    if (close !== -1) opens.lastIndex = close;
+  }
+  return ranges;
+}
+
+/**
+ * Every `<Button` opening tag in `text` whose `<` falls inside one of `ranges`
+ * (or anywhere, when `ranges` is `null`), reported as the findings this gate
+ * makes: the ones that do not name a `type`.
+ *
+ * `(?=[\s/>])` is what keeps `<ButtonGroup` out of a rule about buttons.
+ */
+function typelessButtons(file, text, ranges) {
+  const findings = [];
+  const tags = /<Button(?=[\s/>])/g;
+  let tag;
+  while ((tag = tags.exec(text)) !== null) {
+    const inside = ranges === null || ranges.some(([from, to]) => tag.index >= from && tag.index < to);
+    if (!inside) continue;
+    const source = openingTagAt(text, tag.index);
+    if (source === null || SAYS_TYPE.test(source)) continue;
+    findings.push(`${file}:${lineAt(text, tag.index)}: ${source.split("\n")[0].trim()}`);
+  }
+  return findings;
+}
+
+/** Every `<Button` inside a `<form>` in this file that does not say its type. */
+export function typelessFormButtonsIn(file, text) {
+  return typelessButtons(file, text, formRanges(text));
+}
+
+/** A module-level declaration: the keyword at column 0, optionally exported. */
+const TOP_LEVEL = String.raw`(?:export\s+)?(?:default\s+)?(?:async\s+)?(?:function|const|let|class|type|interface|enum)\s`;
+
+/**
+ * The `[start, end)` offsets of the component declared as `name`.
+ *
+ * Needed because "rendered inside a form" is a property of a *component*, not of
+ * a file: `SelectionPanel` is declared in `IngestScreen.tsx` — the same file as
+ * the form that renders it — several hundred lines below the `</form>`. Scanning
+ * the whole file instead would drag in that screen's seven other buttons, none
+ * of which is in a form, and the gate would demand `type` on controls that have
+ * no submit to trigger.
+ *
+ * The span runs from the declaration to the next declaration at column 0, rather
+ * than by matching the body's braces. Brace matching is the obvious approach and
+ * it is wrong here: `function Name({ … }: { … }) { … }` opens its first brace on
+ * the *destructured parameter*, so a walk that stops when depth returns to zero
+ * stops at the end of the parameter list and never reaches the JSX. That is not a
+ * hypothetical — it is what the first draft of this file did, and it made the
+ * repo pass below vacuously green because the scanned span contained no
+ * `<Button` at all. Hence `assert.ok(found > 0)` in that test, and hence this.
+ *
+ * Ending at the next top-level declaration over-covers slightly: a trailing
+ * comment block belongs to the neighbour. For a gate that is the safe direction —
+ * it can only ever ask for a `type` on one button too many, never one too few.
+ */
+export function componentRange(text, name) {
+  const declared = new RegExp(
+    String.raw`(?:^|\n)(?:export\s+)?(?:async\s+)?(?:function\s+${name}\b|(?:const|let)\s+${name}\b)`,
+  );
+  const found = declared.exec(text);
+  if (found === null) return null;
+
+  const from = found.index === 0 ? 0 : found.index + 1;
+  const next = new RegExp(String.raw`\n${TOP_LEVEL}`, "g");
+  next.lastIndex = from + 1;
+  const after = next.exec(text);
+  return [from, after === null ? text.length : after.index + 1];
+}
+
+/**
+ * Every `<Button` in the component `name` that does not say its type — for a
+ * component rendered inside somebody else's `<form>`, where the enclosing tag is
+ * out of reach of any range in the component's own source.
+ */
+export function typelessButtonsInComponent(file, text, name) {
+  const range = componentRange(text, name);
+  assert.ok(range !== null, `${file} does not declare ${name}`);
+  return typelessButtons(file, text, [range]);
+}
+
+test("the scan finds a typeless button in a form, and nothing that merely looks like one", () => {
+  const form = (button) => `<form onSubmit={submit}>\n  ${button}\n</form>\n`;
+
+  // The defect itself: inside a form, no type.
+  assert.deepEqual(typelessFormButtonsIn("a.tsx", form("<Button>Cancel</Button>")), [
+    "a.tsx:2: <Button>",
+  ]);
+  // And the fix clears it.
+  assert.deepEqual(typelessFormButtonsIn("b.tsx", form('<Button type="button">Cancel</Button>')), []);
+  assert.deepEqual(typelessFormButtonsIn("c.tsx", form('<Button type="submit">Save</Button>')), []);
+
+  // Outside a form there is no default to get wrong, so it is not this gate's
+  // business — a page is full of typeless buttons and all of them are correct.
+  assert.deepEqual(typelessFormButtonsIn("d.tsx", "<div>\n  <Button>Open</Button>\n</div>\n"), []);
+
+  // A different component whose name starts the same way is not a Button.
+  assert.deepEqual(typelessFormButtonsIn("e.tsx", form("<ButtonGroup><span /></ButtonGroup>")), []);
+
+  // `data-type` is not `type`, and a scan using `\btype=` would accept it.
+  assert.deepEqual(typelessFormButtonsIn("f.tsx", form('<Button data-type="ghost">Go</Button>')), [
+    "f.tsx:2: <Button data-type=\"ghost\">",
+  ]);
+
+  // A multi-line tag is the shape every real call site has, and the `>` in the
+  // arrow function must not end it early.
+  assert.deepEqual(
+    typelessFormButtonsIn(
+      "g.tsx",
+      '<form onSubmit={submit}>\n  <Button\n    variant="outline"\n    onClick={() => close()}\n  >\n    Cancel\n  </Button>\n</form>\n',
+    ),
+    ["g.tsx:2: <Button"],
+  );
+  // Same tag, typed — proving the walker reached the real end rather than
+  // stopping somewhere that happened to contain `type=`.
+  assert.deepEqual(
+    typelessFormButtonsIn(
+      "h.tsx",
+      '<form onSubmit={submit}>\n  <Button\n    variant="outline"\n    onClick={() => close()}\n    type="button"\n  >\n    Cancel\n  </Button>\n</form>\n',
+    ),
+    [],
+  );
+  // A `>` inside a string attribute is not the end of the tag either.
+  assert.deepEqual(
+    typelessFormButtonsIn("i.tsx", form('<Button data-testid="a>b">Go</Button>')),
+    ['i.tsx:2: <Button data-testid="a>b">'],
+  );
+
+  // Two forms in one file, which `IngestScreen.tsx` really has: a button in the
+  // second is inside a form as much as one in the first, and the space between
+  // them is not.
+  const two =
+    "<form onSubmit={a}>\n  <Button>One</Button>\n</form>\n" +
+    "<Button>Between</Button>\n" +
+    "<form onSubmit={b}>\n  <Button>Two</Button>\n</form>\n";
+  assert.deepEqual(typelessFormButtonsIn("j.tsx", two), ["j.tsx:2: <Button>", "j.tsx:6: <Button>"]);
+
+  // A self-closing button, which carries its label in a prop.
+  assert.deepEqual(typelessFormButtonsIn("k.tsx", form('<Button aria-label="Clear" />')), [
+    'k.tsx:2: <Button aria-label="Clear" />',
+  ]);
+
+  // The component-scoped variant ignores form boundaries, because its callers
+  // supply the form from elsewhere — and it stops at the component's own end, so
+  // a neighbour's buttons are not its problem.
+  const two_components =
+    "function Card() {\n  return <Button>Retry</Button>;\n}\n" +
+    "function Other() {\n  return <Button>Open</Button>;\n}\n";
+  assert.deepEqual(typelessButtonsInComponent("l.tsx", two_components, "Card"), [
+    "l.tsx:2: <Button>",
+  ]);
+  assert.deepEqual(typelessButtonsInComponent("l.tsx", two_components, "Other"), [
+    "l.tsx:5: <Button>",
+  ]);
+  // And a typed one in that component clears.
+  assert.deepEqual(
+    typelessButtonsInComponent("m.tsx", 'export function Card() {\n  return <Button type="button">Retry</Button>;\n}\n', "Card"),
+    [],
+  );
+});
+
+test("componentRange covers a declaration with a destructured parameter, and stops at its end", () => {
+  // The shape every component in this repo has: destructured props, an inline
+  // type, then the body.
+  const text =
+    "function Panel({\n  files,\n}: {\n  readonly files: readonly File[];\n}) {\n  return <Button>Clear</Button>;\n}\n" +
+    "function After() {\n  return <Button>No</Button>;\n}\n";
+  const [from, to] = componentRange(text, "Panel");
+  const body = text.slice(from, to);
+  assert.ok(body.includes("Clear"), "the parameter walk must reach the body");
+  assert.ok(!body.includes("No"), "and must stop before the next declaration");
+  assert.equal(componentRange(text, "Missing"), null);
+});
+
+test("formRanges spans the form and stops at its close", () => {
+  const text = "x\n<form>\n  y\n</form>\nz\n";
+  const [[from, to]] = formRanges(text);
+  assert.equal(text.slice(from, to), "<form>\n  y\n</form>");
+  // A form left unclosed runs to the end rather than silently spanning nothing,
+  // so a malformed file over-reports instead of going quiet.
+  assert.deepEqual(formRanges("<form>\n  <Button>x</Button>\n").length, 1);
+});
+
+/**
+ * Components that hold a `<Button>` and are only ever rendered *inside* somebody
+ * else's `<form>`, so the enclosing tag is in a different file.
+ *
+ * Kept as an explicit list rather than resolved by following imports, because
+ * following imports would make the gate a type checker and get the answer wrong
+ * at the first conditional render. The list is small on purpose: two entries is
+ * a sign the composition is shallow, and a third should prompt the question of
+ * whether the form is being assembled too far from itself.
+ *
+ * The list is asserted **total** below — every name here has to actually appear
+ * inside a `<form>` range somewhere — so a stale entry fails the gate rather
+ * than quietly widening it, which is the failure mode an allow-list normally has.
+ */
+const RENDERED_INSIDE_FORMS = {
+  // The chosen-files summary inside `IngestScreen`'s upload form; its "Clear"
+  // button is a plain control sitting between the file input and Upload. Declared
+  // in the same file as that form and several hundred lines below it, which is
+  // exactly why this is scoped to the component rather than the file.
+  SelectionPanel: "frontend/ui-core/src/screens/IngestScreen.tsx",
+  // `AsyncStates`' error card carries a Retry, and `ModelsScreen`'s connection
+  // form renders one when the connection list fails to load.
+  ErrorState: "frontend/ui-core/src/patterns/AsyncStates.tsx",
+};
+
+/** Every tracked `frontend/**\/*.tsx`, read from the index. */
+function trackedTsx() {
+  const listed = spawnSync("git", ["ls-files", "-z", "frontend"], { cwd: REPO, encoding: "utf8" });
+  assert.equal(listed.status, 0, `git ls-files failed: ${listed.stderr}`);
+  const tracked = listed.stdout.split("\0").filter((name) => TSX.test(name));
+  assert.ok(tracked.length > 0, "the scan found no frontend components, so it proves nothing");
+  return tracked;
+}
+
+test("every button inside a form says what kind it is", () => {
+  const offenders = trackedTsx().flatMap((file) =>
+    typelessFormButtonsIn(file, readFileSync(path.join(REPO, file), "utf8")),
+  );
+  assert.deepEqual(
+    offenders,
+    [],
+    "a <button> with no type is a submit button — the canonical shadcn Button adds no " +
+      'default, so a "Cancel" inside a form submits it. Add type="button" (or type="submit" ' +
+      `where that is the intent):\n${offenders.join("\n")}`,
+  );
+});
+
+test("a form's buttons that live in another file are typed too, and the list naming them is current", () => {
+  const sources = new Map(
+    trackedTsx().map((file) => [file, readFileSync(path.join(REPO, file), "utf8")]),
+  );
+
+  const offenders = Object.entries(RENDERED_INSIDE_FORMS).flatMap(([name, file]) => {
+    const text = sources.get(file);
+    assert.ok(text !== undefined, `RENDERED_INSIDE_FORMS names ${file}, which is not tracked`);
+
+    // The non-vacuity guard, and it has already earned its place: an earlier
+    // `componentRange` stopped at the destructured parameter list, so this scan
+    // ran over a span with no JSX in it and reported nothing wrong. A component
+    // listed here is listed *because* it holds a button, so a span with none in
+    // it means the span is wrong, not that the code is clean.
+    const [from, to] = componentRange(text, name);
+    assert.ok(
+      /<Button(?=[\s/>])/.test(text.slice(from, to)),
+      `${name} is listed as holding a button and the scanned span of ${file} has none — ` +
+        "componentRange is not covering the component's JSX",
+    );
+
+    return typelessButtonsInComponent(file, text, name);
+  });
+  assert.deepEqual(
+    offenders,
+    [],
+    "this component renders inside somebody's <form>, so its buttons need a type for the " +
+      `same reason the form's own do:\n${offenders.join("\n")}`,
+  );
+
+  // The half that keeps the list honest: a name that no longer renders inside a
+  // form is an allowance nobody is using, and it would go on excusing the file
+  // from nothing while reading as though it meant something.
+  const insideSomeForm = (name) =>
+    [...sources].some(([, text]) => {
+      const ranges = formRanges(text);
+      const uses = new RegExp(`<${name}(?=[\\s/>])`, "g");
+      let use;
+      while ((use = uses.exec(text)) !== null) {
+        if (ranges.some(([from, to]) => use.index >= from && use.index < to)) return true;
+      }
+      return false;
+    });
+
+  const stale = Object.keys(RENDERED_INSIDE_FORMS).filter((name) => !insideSomeForm(name));
+  assert.deepEqual(
+    stale,
+    [],
+    "RENDERED_INSIDE_FORMS names a component that is no longer rendered inside any <form>. " +
+      `Drop the entry rather than leaving the gate an allowance it does not need:\n${stale.join("\n")}`,
+  );
+});
+
+test("the forms this gate is about are all still there, and none nests", () => {
+  // Not a headcount for its own sake: the scan is only as good as its ability to
+  // find a form at all, and a refactor that renamed the element or moved to a
+  // form library would leave every assertion above vacuously green.
+  const withForms = trackedTsx()
+    .map((file) => [file, readFileSync(path.join(REPO, file), "utf8")])
+    .filter(([, text]) => formRanges(text).length > 0);
+
+  assert.deepEqual(
+    withForms.map(([file]) => file).sort(),
+    [
+      "frontend/ui-core/src/data/TokenGate.tsx",
+      "frontend/ui-core/src/screens/DatasetScreen.tsx",
+      "frontend/ui-core/src/screens/IngestScreen.tsx",
+      "frontend/ui-core/src/screens/ModelsScreen.tsx",
+      "frontend/ui-core/src/screens/ProjectFrame.tsx",
+      "frontend/ui-core/src/screens/ProjectsScreen.tsx",
+    ],
+    "a form appeared or moved. That is fine — add it here, having checked its buttons say " +
+      "their type.",
+  );
+
+  // `formRanges` trusts that a form never contains another, which is what makes
+  // "the next `</form>`" the matching close. This is that assumption, checked.
+  for (const [file, text] of withForms) {
+    const opens = text.match(/<form(?=[\s/>])/g) ?? [];
+    const closes = text.match(/<\/form>/g) ?? [];
+    assert.equal(
+      opens.length,
+      closes.length,
+      `${file} has ${opens.length} <form> and ${closes.length} </form>`,
+    );
+  }
+});
diff --git a/tests/scripts/shadcn_canonical.test.mjs b/tests/scripts/shadcn_canonical.test.mjs
new file mode 100644
index 00000000..e312037e
--- /dev/null
+++ b/tests/scripts/shadcn_canonical.test.mjs
@@ -0,0 +1,110 @@
+import assert from "node:assert/strict";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+import { relativize } from "../../scripts/shadcn_relativize.mjs";
+
+const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "..");
+const PRIMITIVES = path.join(REPO, "frontend/ui-core/src/primitives");
+const SNAPSHOTS = path.join(REPO, "frontend/ui-core/shadcn");
+
+const lines = (text) => text.split(/\r?\n/).map((l) => l.trimEnd());
+
+// Every snapshot line must appear in the primitive, in order. Added lines are
+// the only permitted difference — that is the whole of the "do not modify
+// shadcn's code" rule, in a form a machine can check.
+export function additiveOnly(snapshot, actual) {
+  const want = lines(snapshot);
+  const have = lines(actual);
+  let cursor = 0;
+  for (const line of want) {
+    const at = have.indexOf(line, cursor);
+    if (at === -1) return { ok: false, missing: line };
+    cursor = at + 1;
+  }
+  return { ok: true };
+}
+
+test("additiveOnly accepts an added line and refuses a changed one", () => {
+  assert.equal(additiveOnly("a\nb\n", "a\nx\nb\n").ok, true);
+  assert.equal(additiveOnly("a\nb\n", "a\nB\n").ok, false);
+  assert.equal(additiveOnly("a\nb\n", "b\na\n").ok, false);
+  assert.equal(additiveOnly("a\n\nb\n", "a\nb\n").ok, false);
+  assert.equal(additiveOnly("a\r\nb  \r\n", "a\nb\n").ok, true);
+});
+
+// A primitive may replace a framework-specific hook (shadcn's Next.js
+// integrations) with a thin adapter that reads VisionSet's one theme source
+// instead — never a shortcut for divergence in general. `FRAMEWORK_ADAPTERS`
+// is the explicit allow-list; the marker comment `SHADCN FRAMEWORK ADAPTER`
+// is how a primitive claims the exemption, and it must be on the list to
+// claim it. `ADAPTER_REMOVED_LINES` are exactly the snapshot lines the
+// adapter is permitted to drop — every other snapshot line must still appear,
+// in order, same as any other primitive.
+const FRAMEWORK_ADAPTERS = ["sonner.tsx"];
+const ADAPTER_REMOVED_LINES = ['import { useTheme } from "next-themes"', '  const { theme = "system" } = useTheme()'];
+
+export function withoutLines(text, removed) {
+  const removedTrimmed = new Set(removed.map((l) => l.trimEnd()));
+  return lines(text)
+    .filter((line) => !removedTrimmed.has(line))
+    .join("\n");
+}
+
+// Decides which comparison a primitive gets. Returns { ok: false, reason }
+// when the marker is present on a file that isn't allow-listed; otherwise
+// { ok: true, isAdapter } says whether the adapter-adjusted snapshot applies.
+export function checkAdapter(file, actualText) {
+  if (!actualText.includes("SHADCN FRAMEWORK ADAPTER")) return { ok: true, isAdapter: false };
+  if (!FRAMEWORK_ADAPTERS.includes(file)) {
+    return { ok: false, reason: `${file} carries the SHADCN FRAMEWORK ADAPTER marker but is not in FRAMEWORK_ADAPTERS` };
+  }
+  return { ok: true, isAdapter: true };
+}
+
+test("checkAdapter refuses an unlisted file carrying the marker", () => {
+  const result = checkAdapter("unlisted.tsx", "// SHADCN FRAMEWORK ADAPTER\nconst x = 1\n");
+  assert.equal(result.ok, false);
+});
+
+test("checkAdapter accepts a listed file carrying the marker", () => {
+  const result = checkAdapter("sonner.tsx", "// SHADCN FRAMEWORK ADAPTER\nconst x = 1\n");
+  assert.deepEqual(result, { ok: true, isAdapter: true });
+});
+
+test("checkAdapter ignores a file with no marker even if unlisted", () => {
+  const result = checkAdapter("unlisted.tsx", "const x = 1\n");
+  assert.deepEqual(result, { ok: true, isAdapter: false });
+});
+
+test("a listed adapter passes when only the two next-themes lines are removed", () => {
+  const snapshot = 'import { useTheme } from "next-themes"\nconst x = 1\n  const { theme = "system" } = useTheme()\nconst y = 2\n';
+  const actual = "// SHADCN FRAMEWORK ADAPTER\nconst x = 1\nconst y = 2\n";
+  const result = additiveOnly(withoutLines(relativize(snapshot), ADAPTER_REMOVED_LINES), actual);
+  assert.equal(result.ok, true);
+});
+
+test("a listed adapter that also drops a different snapshot line still fails", () => {
+  const snapshot = 'import { useTheme } from "next-themes"\nconst x = 1\n  const { theme = "system" } = useTheme()\nconst y = 2\n';
+  const actual = "// SHADCN FRAMEWORK ADAPTER\nconst y = 2\n"; // "const x = 1" went missing too
+  const result = additiveOnly(withoutLines(relativize(snapshot), ADAPTER_REMOVED_LINES), actual);
+  assert.equal(result.ok, false);
+});
+
+const primitives = readdirSync(PRIMITIVES).filter((f) => f.endsWith(".tsx") && !f.endsWith(".test.tsx"));
+
+for (const file of primitives) {
+  test(`${file} is shadcn's canonical file plus added lines only`, () => {
+    const snapshot = path.join(SNAPSHOTS, file);
+    assert.ok(existsSync(snapshot), `${file} has no snapshot in frontend/ui-core/shadcn/ — install it with pnpm --filter @visionset/ui-core shadcn:add`);
+    const snapshotText = relativize(readFileSync(snapshot, "utf8"));
+    const actualText = readFileSync(path.join(PRIMITIVES, file), "utf8");
+    const adapter = checkAdapter(file, actualText);
+    assert.ok(adapter.ok, adapter.reason);
+    const result = adapter.isAdapter
+      ? additiveOnly(withoutLines(snapshotText, ADAPTER_REMOVED_LINES), actualText)
+      : additiveOnly(snapshotText, actualText);
+    assert.ok(result.ok, `${file} diverges from its snapshot at: ${result.missing}`);
+  });
+}
diff --git a/tests/scripts/shadcn_extensions.test.mjs b/tests/scripts/shadcn_extensions.test.mjs
new file mode 100644
index 00000000..a08e2eb1
--- /dev/null
+++ b/tests/scripts/shadcn_extensions.test.mjs
@@ -0,0 +1,611 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+
+const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "..");
+const read = (rel) => readFileSync(path.join(REPO, rel), "utf8");
+
+const COMMENT = /^\s*(?:\/\/|\/\*|\*|#)/;
+const SOURCE = /\.(?:ts|tsx|css)$/;
+const GENERATED = /^frontend\/ui-core\/src\/generated\//;
+const SHADCN_SNAPSHOT = /^frontend\/ui-core\/shadcn\//;
+
+/** Every tracked `frontend` file matching `SOURCE`, minus the generated client. */
+function frontendSources({ includeSnapshots } = {}) {
+  const listed = spawnSync("git", ["ls-files", "-z", "frontend"], { cwd: REPO, encoding: "utf8" });
+  assert.equal(listed.status, 0, `git ls-files failed: ${listed.stderr}`);
+  return listed.stdout
+    .split("\0")
+    .filter(
+      (name) =>
+        SOURCE.test(name) && !GENERATED.test(name) && (includeSnapshots || !SHADCN_SNAPSHOT.test(name)),
+    );
+}
+
+/** The variant keys of the first `variant: { … }` block in a cva source. */
+export function variantKeys(source, block = "variant") {
+  const start = source.indexOf(`${block}: {`);
+  assert.notEqual(start, -1, `no "${block}" block`);
+  let depth = 0, i = start + block.length + 3;
+  const begin = i;
+  for (; i < source.length; i++) {
+    if (source[i] === "{") depth++;
+    else if (source[i] === "}") { if (depth === 0) break; depth--; }
+  }
+  const body = source.slice(begin, i);
+  return [...body.matchAll(/(?:^|,)\s*"?([a-z][a-z0-9-]*)"?:\s/g)].map((m) => m[1]);
+}
+
+test("variantKeys reads quoted and bare keys and ignores class text", () => {
+  assert.deepEqual(
+    variantKeys(`x({ variants: { variant: { default: "a: b", "icon-xs": "c" }, size: { sm: "d" } } })`),
+    ["default", "icon-xs"],
+  );
+  assert.deepEqual(variantKeys(`variants: { variant: { a: "" }, size: { sm: "x", lg: "y" } }`, "size"), ["sm", "lg"]);
+});
+
+const BUTTON = "frontend/ui-core/src/primitives/button.tsx";
+test("Button carries shadcn's variants and sizes, and nothing else", () => {
+  const src = read(BUTTON);
+  assert.deepEqual(variantKeys(src, "variant"), ["default", "outline", "secondary", "ghost", "destructive", "link"]);
+  assert.deepEqual(variantKeys(src, "size"), ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"]);
+});
+
+const BADGE = "frontend/ui-core/src/primitives/badge.tsx";
+const OFFICIAL_BADGE = ["default", "secondary", "destructive", "outline", "ghost", "link"];
+const VISIONSET_BADGE = ["success", "warning", "info", "quiet"];
+
+test("Badge keeps shadcn's variants and adds exactly the four VisionSet status variants", () => {
+  const keys = variantKeys(read(BADGE), "variant");
+  for (const k of OFFICIAL_BADGE) assert.ok(keys.includes(k), `official Badge variant ${k} missing`);
+  assert.deepEqual(keys.filter((k) => !OFFICIAL_BADGE.includes(k)).sort(), [...VISIONSET_BADGE].sort());
+});
+
+/** The class string of one variant line in a cva source. */
+export function variantClasses(source, key) {
+  const m = source.match(new RegExp(String.raw`^\s*"?${key}"?:\s*\n?\s*"([^"]*)"`, "m"));
+  assert.ok(m, `no variant ${key}`);
+  return m[1];
+}
+
+test("a status Badge paints a soft surface and readable ink, never a coloured stroke", () => {
+  const src = read(BADGE);
+  const stroke = /\bborder-(?:emerald|amber|sky|success|warning|destructive|primary)\b/;
+  for (const k of [...VISIONSET_BADGE, "destructive"]) {
+    assert.doesNotMatch(variantClasses(src, k), stroke, `${k} adds a coloured border`);
+  }
+  assert.match(variantClasses(src, "success"), /\bbg-emerald-500\/10\b/);
+  assert.match(variantClasses(src, "success"), /\btext-emerald-700\b/);
+  assert.match(variantClasses(src, "warning"), /\bbg-amber-500\/10\b/);
+  assert.match(variantClasses(src, "warning"), /\btext-amber-700\b/);
+  assert.match(variantClasses(src, "info"), /\bbg-sky-500\/10\b/);
+  assert.match(variantClasses(src, "info"), /\btext-sky-700\b/);
+  assert.match(variantClasses(src, "quiet"), /\bbg-muted\b/);
+  assert.match(variantClasses(src, "quiet"), /\btext-muted-foreground\b/);
+  // Official destructive stays on the semantic token, never red-*.
+  assert.match(variantClasses(src, "destructive"), /\bbg-destructive\/10\b/);
+  assert.doesNotMatch(src, /\b(?:bg|text)-red-\d/);
+});
+
+/**
+ * v1's vocabulary the extension contract retired: prop names and shapes no
+ * shadcn primitive carries, and the PascalCase import paths and framework
+ * package v1 read them from.
+ *
+ * Every forbidden token is assembled from fragments — the trick
+ * `design_tokens.test.mjs` uses for `RETIRED_ICON_PACKAGE` — so none of them
+ * sits contiguously anywhere in this file's own source.
+ */
+const NEXT_THEMES = ["next", "themes"].join("-");
+const FIELD_HINT = ["Field", "Hint"].join("");
+const TABLE_EMPTY = ["Table", "Empty"].join("");
+const LEGACY_PRIMITIVES = [
+  "Badge",
+  "Button",
+  "Card",
+  "Combobox",
+  "Dialog",
+  "Feedback",
+  "Input",
+  "Menu",
+  "Select",
+  "Table",
+  "Tabs",
+];
+
+/**
+ * `Badge`'s `quiet` variant is the shape for a soft, borderless status chip —
+ * an `outline` Badge hand-rounded with a `rounded-*` utility on `className`
+ * is that same shape built by hand, so it is forbidden wherever both
+ * attributes land on the one tag (in either order).
+ */
+const BADGE_OUTLINE_ROUNDED = /(?=[\s\S]*\bvariant="outline")(?=[\s\S]*\bclassName="[^"]*\brounded-)/;
+
+const TAG_ATTRIBUTE_RULES = [
+  { tag: "Button", attribute: /variant="(?:primary|success)"|size="(?:md)"/ },
+  { tag: "Badge", attribute: /variant="(?:neutral|accent)"/ },
+  { tag: "Badge", attribute: BADGE_OUTLINE_ROUNDED },
+  { tag: "Progress", attribute: /\bvariant=/ },
+  { tag: "SelectItem", attribute: /\bmeta=/ },
+  { tag: "Alert", attribute: /\btitle=/ },
+];
+const LEGACY_IMPORT = new RegExp(
+  String.raw`from\s+["'][^"']*/primitives/(?:${LEGACY_PRIMITIVES.join("|")})(?:\.js)?["']`,
+);
+const NEXT_THEMES_IMPORT = new RegExp(String.raw`from\s+["']${NEXT_THEMES}["']`);
+const BARE_LEGACY_NAME = new RegExp(String.raw`\b(?:${FIELD_HINT}|${TABLE_EMPTY})\b`);
+
+/**
+ * The same retired names, written the way a test reads them back off the DOM
+ * rather than the way a component spells them. `TAG_ATTRIBUTE_RULES` walks JSX
+ * opening tags only, so a spec asserting v1's vocabulary sails straight past
+ * it — which is how `cycle.spec.ts` kept `"primary"` through the whole
+ * realignment, with CI the only thing that ever caught it.
+ *
+ * Listed here are the values **no** primitive carries any more, so naming one
+ * is wrong wherever it lands: `primary` belongs to no variant block at all,
+ * `Badge` dropped `neutral` and `accent`, and `Button`'s `md` is the official
+ * `default`. `secondary` and `success` are deliberately absent — both are
+ * still real variants, so an assertion naming one asks a question about its
+ * own call site that no vocabulary sweep can answer.
+ */
+const RETIRED_ATTRIBUTE_VALUES = { variant: ["primary", "neutral", "accent"], size: ["md"] };
+
+/**
+ * Three shapes per attribute, because a spec has three ways to say the one
+ * thing: `toHaveAttribute("data-variant", "primary")`, a
+ * `[data-variant="primary"]` selector, and `getAttribute("data-variant")` or
+ * `dataset.variant` compared with `toBe`/`toEqual`. The first crosses newlines
+ * on purpose — prettier puts the two arguments on their own lines once the
+ * call runs long, and that wrapped form is exactly the one that got through.
+ */
+const RETIRED_ATTRIBUTE_ASSERTIONS = Object.entries(RETIRED_ATTRIBUTE_VALUES).flatMap(
+  ([name, values]) => {
+    const value = `(?:${values.join("|")})`;
+    return [
+      new RegExp(String.raw`"data-${name}"\s*,\s*"${value}"`, "g"),
+      new RegExp(String.raw`\[data-${name}="${value}"\]`, "g"),
+      new RegExp(
+        String.raw`(?:getAttribute\("data-${name}"\)|dataset\.${name})[^\n]*?\.to(?:Be|Equal)\(\s*"${value}"`,
+        "g",
+      ),
+    ];
+  },
+);
+
+/** The 1-based line of `text` that character offset `index` falls on. */
+function lineAt(text, index) {
+  return text.slice(0, index).split("\n").length;
+}
+
+/**
+ * The index just past a JSX opening tag's real closing `>`, starting the scan
+ * at `start` (the tag's own `<`). A `[^>]*?` regex is fooled by any literal
+ * `>` — an arrow function, a `count > 0` comparison, a `>` inside a quoted
+ * string — so this instead walks the text tracking `{}` depth (a `>` only
+ * ends the tag at depth zero) and skips over `"…"`/`'…'`/`` `…` `` bodies
+ * wholesale, wherever they appear, so a `>` quoted inside one is never read
+ * as the tag's own.
+ */
+function openTagEnd(text, start) {
+  let depth = 0;
+  for (let i = start; i < text.length; i++) {
+    const ch = text[i];
+    if (ch === '"' || ch === "'" || ch === "`") {
+      const quote = ch;
+      i++;
+      while (i < text.length && text[i] !== quote) {
+        if (text[i] === "\\") i++;
+        i++;
+      }
+      continue;
+    }
+    if (ch === "{") depth++;
+    else if (ch === "}") depth--;
+    else if (ch === ">" && depth === 0) return i + 1;
+  }
+  return text.length;
+}
+
+/** Every `<Tag …>` opening tag in `text`, as `{ at, tag }` in source order. */
+function openTagsIn(text, tagName) {
+  const starts = new RegExp(String.raw`<${tagName}\b`, "g");
+  return [...text.matchAll(starts)].map((m) => ({
+    at: m.index,
+    tag: text.slice(m.index, openTagEnd(text, m.index)),
+  }));
+}
+
+/** Every `file:line` in `text` reaching for a name the extension contract retired. */
+export function legacyVocabularyIn(file, text) {
+  const scrubbed = text
+    .split("\n")
+    .map((line) => (COMMENT.test(line) ? "" : line))
+    .join("\n");
+  const hits = [];
+
+  for (const { tag, attribute } of TAG_ATTRIBUTE_RULES) {
+    for (const { at, tag: tagText } of openTagsIn(scrubbed, tag)) {
+      if (attribute.test(tagText)) hits.push({ at: lineAt(scrubbed, at), text: tagText.split("\n")[0].trim() });
+    }
+  }
+
+  for (const matcher of RETIRED_ATTRIBUTE_ASSERTIONS) {
+    for (const { 0: found, index } of scrubbed.matchAll(matcher)) {
+      hits.push({ at: lineAt(scrubbed, index), text: found.replace(/\s+/g, " ").trim() });
+    }
+  }
+
+  scrubbed.split("\n").forEach((line, index) => {
+    if (BARE_LEGACY_NAME.test(line) || LEGACY_IMPORT.test(line) || NEXT_THEMES_IMPORT.test(line)) {
+      hits.push({ at: index + 1, text: line.trim() });
+    }
+  });
+
+  return hits
+    .sort((a, b) => a.at - b.at)
+    .map(({ at, text: t }) => `${file}:${at}: ${t}`);
+}
+
+test("legacyVocabularyIn flags v1's shapes and stays silent on the shadcn contract", () => {
+  assert.deepEqual(legacyVocabularyIn("a.tsx", `<Button variant="primary">Go</Button>`), [
+    `a.tsx:1: <Button variant="primary">`,
+  ]);
+  assert.deepEqual(legacyVocabularyIn("b.tsx", `<Button size="md">Go</Button>`), [`b.tsx:1: <Button size="md">`]);
+  assert.deepEqual(legacyVocabularyIn("c.tsx", `<Badge variant="neutral">Draft</Badge>`), [
+    `c.tsx:1: <Badge variant="neutral">`,
+  ]);
+  assert.deepEqual(legacyVocabularyIn("d.tsx", `<Progress value={40} variant="thin" />`), [
+    `d.tsx:1: <Progress value={40} variant="thin" />`,
+  ]);
+  assert.deepEqual(legacyVocabularyIn("e.tsx", `<SelectItem value="a" meta="12 items">A</SelectItem>`), [
+    `e.tsx:1: <SelectItem value="a" meta="12 items">`,
+  ]);
+  assert.deepEqual(legacyVocabularyIn("f.tsx", `<Alert title="Heads up">…</Alert>`), [
+    `f.tsx:1: <Alert title="Heads up">`,
+  ]);
+  // An outline Badge hand-rounded with a className utility is the `quiet`
+  // shape built by hand — forbidden regardless of attribute order.
+  assert.deepEqual(
+    legacyVocabularyIn("f2.tsx", `<Badge variant="outline" className="rounded-md">Chip</Badge>`),
+    [`f2.tsx:1: <Badge variant="outline" className="rounded-md">`],
+  );
+  assert.deepEqual(
+    legacyVocabularyIn("f3.tsx", `<Badge className="rounded-full" variant="outline">Chip</Badge>`),
+    [`f3.tsx:1: <Badge className="rounded-full" variant="outline">`],
+  );
+  // A multi-line tag is still one tag.
+  assert.deepEqual(
+    legacyVocabularyIn("g.tsx", `<Button\n  variant="primary"\n  onClick={go}\n>\n  Go\n</Button>`),
+    [`g.tsx:1: <Button`],
+  );
+  // An arrow function's own `>` does not end the tag before the real attribute.
+  assert.deepEqual(
+    legacyVocabularyIn("g2.tsx", `<Button onClick={() => setOpen(true)} variant="primary">Go</Button>`),
+    [`g2.tsx:1: <Button onClick={() => setOpen(true)} variant="primary">`],
+  );
+  // Nor does a `>` comparison inside the expression.
+  assert.deepEqual(
+    legacyVocabularyIn("g3.tsx", `<Progress value={count > 0 ? count : 0} variant="thin" />`),
+    [`g3.tsx:1: <Progress value={count > 0 ? count : 0} variant="thin" />`],
+  );
+  // The same tricky arrow function with no forbidden attribute stays silent.
+  assert.deepEqual(legacyVocabularyIn("g4.tsx", `<Button onClick={() => go()}>ok</Button>`), []);
+  // Nor does a `>` quoted inside a string inside braces — the tag still
+  // extends to its real close, past the attribute that follows the string.
+  assert.deepEqual(
+    legacyVocabularyIn("g5.tsx", `<Alert data-note={"a > b"} title="Heads up">Body</Alert>`),
+    [`g5.tsx:1: <Alert data-note={"a > b"} title="Heads up">`],
+  );
+  assert.deepEqual(legacyVocabularyIn("h.tsx", `<FieldHint>Optional</FieldHint>`), [
+    `h.tsx:1: <FieldHint>Optional</FieldHint>`,
+  ]);
+  assert.deepEqual(legacyVocabularyIn("i.tsx", `<TableEmpty>No rows</TableEmpty>`), [
+    `i.tsx:1: <TableEmpty>No rows</TableEmpty>`,
+  ]);
+  assert.deepEqual(legacyVocabularyIn("j.ts", `import { Badge } from "../primitives/Badge.js";`), [
+    `j.ts:1: import { Badge } from "../primitives/Badge.js";`,
+  ]);
+  assert.deepEqual(legacyVocabularyIn("k.tsx", `import { useTheme } from "next-themes";`), [
+    `k.tsx:1: import { useTheme } from "next-themes";`,
+  ]);
+
+  // The shadcn contract itself must pass clean.
+  assert.deepEqual(legacyVocabularyIn("l.tsx", `<Button variant="outline" size="sm">Go</Button>`), []);
+  assert.deepEqual(legacyVocabularyIn("m.tsx", `<AlertTitle title="not this one">x</AlertTitle>`), []);
+  assert.deepEqual(legacyVocabularyIn("n.tsx", `<Badge variant="secondary">Draft</Badge>`), []);
+  // The `quiet` variant is the shape itself, not the hand-rolled shape.
+  assert.deepEqual(legacyVocabularyIn("n2.tsx", `<Badge variant="quiet">Chip</Badge>`), []);
+  // Only one of the two attributes is not yet the forbidden shape.
+  assert.deepEqual(legacyVocabularyIn("n3.tsx", `<Badge variant="outline">Chip</Badge>`), []);
+  assert.deepEqual(legacyVocabularyIn("n4.tsx", `<Badge className="rounded-md">Chip</Badge>`), []);
+  assert.deepEqual(legacyVocabularyIn("o.ts", `import { Badge } from "../primitives/badge.js";`), []);
+  // A comment recalling the retired shape states history, not a usage.
+  assert.deepEqual(legacyVocabularyIn("p.tsx", `  // <Button variant="primary">Go</Button>`), []);
+  assert.deepEqual(legacyVocabularyIn("q.tsx", `// reads next-themes for the mounted flag`), []);
+
+  // The same vocabulary as a test reads it back, the wrapped call included —
+  // the shape `TAG_ATTRIBUTE_RULES` cannot see.
+  assert.deepEqual(
+    legacyVocabularyIn("r.ts", `await expect(go).toHaveAttribute(\n  "data-variant",\n  "primary",\n);`),
+    [`r.ts:2: "data-variant", "primary"`],
+  );
+  assert.deepEqual(legacyVocabularyIn("r2.ts", `page.locator('[data-variant="primary"]')`), [
+    `r2.ts:1: [data-variant="primary"]`,
+  ]);
+  assert.deepEqual(
+    legacyVocabularyIn("r3.tsx", `expect(el.getAttribute("data-variant")).toBe("accent");`),
+    [`r3.tsx:1: getAttribute("data-variant")).toBe("accent"`],
+  );
+  assert.deepEqual(legacyVocabularyIn("r4.tsx", `expect(el.dataset.size).toBe("md");`), [
+    `r4.tsx:1: dataset.size).toBe("md"`,
+  ]);
+  // A variant that still exists is a question about the call site, not the vocabulary.
+  assert.deepEqual(legacyVocabularyIn("s.ts", `toHaveAttribute("data-variant", "outline")`), []);
+  assert.deepEqual(
+    legacyVocabularyIn("s2.tsx", `expect(b.getAttribute("data-variant")).toBe("success");`),
+    [],
+  );
+});
+
+test("no frontend consumer reaches for a name the extension contract retired", () => {
+  const tracked = frontendSources();
+  assert.ok(tracked.length > 0, "the scan found no frontend consumers, so it proves nothing");
+
+  const offenders = tracked.flatMap((file) => legacyVocabularyIn(file, readFileSync(path.join(REPO, file), "utf8")));
+  assert.deepEqual(
+    offenders,
+    [],
+    "a consumer still reaches for a name the extension contract retired:\n" + offenders.join("\n"),
+  );
+});
+
+/**
+ * The status palette's one Tailwind family: emerald/amber/sky, across every
+ * prefix that can carry a colour. `Badge` and `statusTone.ts` are its one
+ * home — see `statusTone.ts`'s own docstring — so a third place naming the
+ * family is a fork of the palette, not a use of it.
+ */
+const STATUS_PALETTE = /\b(?:bg|text|border|ring|fill|stroke|from|to|via|outline|decoration|shadow)-(?:emerald|amber|sky)-\d/;
+
+/** Every `file:line` in `text` painting with the status palette, outside a comment. */
+export function statusPaletteIn(file, text) {
+  return text
+    .split("\n")
+    .map((line, index) => ({ line, at: index + 1 }))
+    .filter(({ line }) => !COMMENT.test(line) && STATUS_PALETTE.test(line))
+    .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+
+test("statusPaletteIn finds the emerald/amber/sky family, and not a token or a comment", () => {
+  assert.deepEqual(statusPaletteIn("a.tsx", `  className="bg-emerald-500/10"`), [
+    `a.tsx:1: className="bg-emerald-500/10"`,
+  ]);
+  assert.deepEqual(statusPaletteIn("b.tsx", `  className="border-amber-400 dark:border-amber-300"`), [
+    `b.tsx:1: className="border-amber-400 dark:border-amber-300"`,
+  ]);
+  assert.deepEqual(statusPaletteIn("c.tsx", `  className="ring-sky-500"`), [`c.tsx:1: className="ring-sky-500"`]);
+  assert.deepEqual(statusPaletteIn("d.tsx", `  className="shadow-emerald-500/20"`), [
+    `d.tsx:1: className="shadow-emerald-500/20"`,
+  ]);
+  // A token, not the palette.
+  assert.deepEqual(statusPaletteIn("e.tsx", `  className="bg-primary text-primary-foreground"`), []);
+  // The family name without a shade is not yet a colour.
+  assert.deepEqual(statusPaletteIn("f.tsx", `  className="bg-emerald"`), []);
+  // A comment recalling the palette states history, not a usage.
+  assert.deepEqual(statusPaletteIn("g.tsx", `  // never bg-emerald-500 outside statusTone`), []);
+});
+
+/**
+ * A colour family that competes with the status palette for the same job —
+ * "a warning", "a success" — and so could stand in for it undetected. Unlike
+ * the palette itself these have no allowed home anywhere in `frontend`.
+ */
+const COMPETING_PALETTE = /\b(?:bg|text|border)-(?:green|lime|teal|yellow|orange|blue|cyan|red)-\d/;
+
+/** Every `file:line` in `text` reaching for a colour family that competes with the status palette. */
+export function competingStatusPaletteIn(file, text) {
+  return text
+    .split("\n")
+    .map((line, index) => ({ line, at: index + 1 }))
+    .filter(({ line }) => !COMMENT.test(line) && COMPETING_PALETTE.test(line))
+    .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+
+test("competingStatusPaletteIn finds a rival colour family, and not the status palette itself", () => {
+  assert.deepEqual(competingStatusPaletteIn("a.tsx", `  className="bg-green-500"`), [
+    `a.tsx:1: className="bg-green-500"`,
+  ]);
+  assert.deepEqual(competingStatusPaletteIn("b.tsx", `  className="text-yellow-700"`), [
+    `b.tsx:1: className="text-yellow-700"`,
+  ]);
+  assert.deepEqual(competingStatusPaletteIn("c.tsx", `  className="border-blue-400"`), [
+    `c.tsx:1: className="border-blue-400"`,
+  ]);
+  assert.deepEqual(competingStatusPaletteIn("d.tsx", `  className="bg-emerald-500"`), []);
+  assert.deepEqual(competingStatusPaletteIn("e.tsx", `  // never bg-red-500 for a destructive state`), []);
+});
+
+test("the status palette lives in exactly Badge and statusTone, nowhere else", () => {
+  const ALLOWED_PALETTE_FILES = [
+    "frontend/ui-core/src/primitives/badge.tsx",
+    "frontend/ui-core/src/patterns/statusTone.ts",
+    "frontend/ui-core/src/patterns/statusTone.test.ts",
+  ];
+  const tracked = frontendSources({ includeSnapshots: true });
+  assert.ok(tracked.length > 0, "the scan found no frontend sources, so it proves nothing");
+
+  const offenders = tracked
+    .filter((file) => !ALLOWED_PALETTE_FILES.includes(file))
+    .flatMap((file) => statusPaletteIn(file, readFileSync(path.join(REPO, file), "utf8")));
+  assert.deepEqual(
+    offenders,
+    [],
+    "the status palette has exactly one home outside Badge and statusTone — read the tone from " +
+      `patterns/statusTone.ts instead:\n${offenders.join("\n")}`,
+  );
+});
+
+test("no competing colour family stands in for the status palette anywhere in frontend", () => {
+  const tracked = frontendSources({ includeSnapshots: true });
+  assert.ok(tracked.length > 0, "the scan found no frontend sources, so it proves nothing");
+
+  const offenders = tracked.flatMap((file) =>
+    competingStatusPaletteIn(file, readFileSync(path.join(REPO, file), "utf8")),
+  );
+  assert.deepEqual(
+    offenders,
+    [],
+    `a competing colour family stands in for the status palette:\n${offenders.join("\n")}`,
+  );
+});
+
+/**
+ * `--success`/`--warning` and their `-foreground` companions are retired
+ * declarations (`design_tokens.test.mjs` guards `styles.css` itself); this is
+ * the other half — no consumer may reach for the *utility* either, on any of
+ * the four prefixes that could carry one.
+ */
+const STATUS_TOKEN_UTILITY = /\b(?:bg|text|border|ring)-(?:success|warning)(?:-foreground)?\b/;
+
+/** Every `file:line` in `text` reaching for the retired status token utility, outside a comment. */
+export function statusTokenUtilitiesIn(file, text) {
+  return text
+    .split("\n")
+    .map((line, index) => ({ line, at: index + 1 }))
+    .filter(({ line }) => !COMMENT.test(line) && STATUS_TOKEN_UTILITY.test(line))
+    .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
+}
+
+test("statusTokenUtilitiesIn finds the retired success/warning utility, and not the emerald/amber tokens that replaced it", () => {
+  assert.deepEqual(statusTokenUtilitiesIn("a.tsx", `  className="bg-success"`), [`a.tsx:1: className="bg-success"`]);
+  assert.deepEqual(statusTokenUtilitiesIn("b.tsx", `  className="text-warning-foreground"`), [
+    `b.tsx:1: className="text-warning-foreground"`,
+  ]);
+  assert.deepEqual(statusTokenUtilitiesIn("c.tsx", `  className="border-success"`), [
+    `c.tsx:1: className="border-success"`,
+  ]);
+  assert.deepEqual(statusTokenUtilitiesIn("d.tsx", `  className="ring-warning"`), [
+    `d.tsx:1: className="ring-warning"`,
+  ]);
+  assert.deepEqual(statusTokenUtilitiesIn("e.tsx", `  className="bg-emerald-500 text-emerald-700"`), []);
+  assert.deepEqual(statusTokenUtilitiesIn("f.tsx", `  className="bg-destructive"`), []);
+  assert.deepEqual(statusTokenUtilitiesIn("g.tsx", `  // bg-success no longer exists`), []);
+});
+
+test("no frontend source reaches for the retired success/warning token utility", () => {
+  const tracked = frontendSources({ includeSnapshots: true });
+  assert.ok(tracked.length > 0, "the scan found no frontend sources, so it proves nothing");
+
+  const offenders = tracked.flatMap((file) =>
+    statusTokenUtilitiesIn(file, readFileSync(path.join(REPO, file), "utf8")),
+  );
+  assert.deepEqual(
+    offenders,
+    [],
+    `a source reaches for the retired success/warning token utility:\n${offenders.join("\n")}`,
+  );
+});
+
+/**
+ * The public surface `index.ts` promises: every canonical primitive
+ * re-exported, the retired pattern-layer `Combobox` gone now that it is a
+ * primitive, and no `*Variants` beyond the three shadcn's own `cva` calls
+ * produce.
+ */
+const INDEX_PATH = "frontend/ui-core/src/index.ts";
+const PUBLIC_PRIMITIVES = [
+  "badge",
+  "button",
+  "alert",
+  "field",
+  "dialog",
+  "sheet",
+  "combobox",
+  "input-group",
+  "select",
+  "dropdown-menu",
+  "tooltip",
+  "progress",
+  "skeleton",
+  "sonner",
+  "table",
+  "tabs",
+  "card",
+  "input",
+  "textarea",
+  "label",
+];
+
+test("index.ts exports every canonical primitive, drops the retired pattern Combobox, and adds no *Variants beyond shadcn's own three", () => {
+  const source = read(INDEX_PATH);
+
+  for (const name of PUBLIC_PRIMITIVES) {
+    const exported = new RegExp(String.raw`export\s*\{[^;]*\}\s*from\s*"\./primitives/${name}\.js"`).test(source);
+    assert.ok(exported, `${INDEX_PATH} does not export from ./primitives/${name}.js`);
+  }
+
+  assert.ok(
+    !source.includes('from "./patterns/Combobox.js"'),
+    `${INDEX_PATH} must not export the retired ./patterns/Combobox.js — Combobox is a primitive now`,
+  );
+
+  const variantsExports = [...new Set([...source.matchAll(/\b[a-zA-Z]*Variants\b/g)].map((m) => m[0]))].sort();
+  assert.deepEqual(
+    variantsExports,
+    ["badgeVariants", "buttonVariants", "tabsListVariants"],
+    `${INDEX_PATH} exports a *Variants beyond shadcn's own three:\n${variantsExports.join(", ")}`,
+  );
+});
+
+/**
+ * Every `DropdownMenuContent` call site owns `lib/menu.ts`'s `menuSurface` —
+ * the constant that carries the canonical surface classes plus the exit-
+ * animation and sizing fixes documented there. A call site that drops it
+ * silently reverts to the bare Radix surface.
+ */
+
+/** Every `file:line` in `text` opening a `DropdownMenuContent` without `menuSurface` on it. */
+export function menuSurfaceGapsIn(file, text) {
+  return openTagsIn(text, "DropdownMenuContent")
+    .filter(({ tag }) => !tag.includes("menuSurface"))
+    .map(({ at, tag }) => `${file}:${lineAt(text, at)}: ${tag.split("\n")[0].trim()}`);
+}
+
+test("menuSurfaceGapsIn flags a DropdownMenuContent missing menuSurface, and stays silent when it carries it", () => {
+  assert.deepEqual(
+    menuSurfaceGapsIn("a.tsx", `<DropdownMenuContent align="end">x</DropdownMenuContent>`),
+    [`a.tsx:1: <DropdownMenuContent align="end">`],
+  );
+  assert.deepEqual(
+    menuSurfaceGapsIn(
+      "b.tsx",
+      `<DropdownMenuContent align="end" className={menuSurface}>x</DropdownMenuContent>`,
+    ),
+    [],
+  );
+  assert.deepEqual(
+    menuSurfaceGapsIn(
+      "c.tsx",
+      `<DropdownMenuContent className={cn(menuSurface, "w-64")}>x</DropdownMenuContent>`,
+    ),
+    [],
+  );
+});
+
+test("every DropdownMenuContent call site outside the shadcn snapshot carries menuSurface", () => {
+  const tracked = frontendSources();
+  assert.ok(tracked.length > 0, "the scan found no frontend sources, so it proves nothing");
+
+  const offenders = tracked.flatMap((file) =>
+    menuSurfaceGapsIn(file, readFileSync(path.join(REPO, file), "utf8")),
+  );
+  assert.deepEqual(
+    offenders,
+    [],
+    `a DropdownMenuContent call site is missing lib/menu.ts's menuSurface:\n${offenders.join("\n")}`,
+  );
+});
diff --git a/tests/scripts/shadcn_relativize.test.mjs b/tests/scripts/shadcn_relativize.test.mjs
new file mode 100644
index 00000000..5a711074
--- /dev/null
+++ b/tests/scripts/shadcn_relativize.test.mjs
@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { relativize } from "../../scripts/shadcn_relativize.mjs";
+
+test("the cn import and a sibling primitive import become relative; nothing else moves", () => {
+  const source = [
+    'import { cn } from "@/lib/cn"',
+    'import { Button } from "@/primitives/button"',
+    'import { Slot } from "radix-ui"',
+  ].join("\n");
+  assert.equal(
+    relativize(source),
+    ['import { cn } from "../lib/cn"', 'import { Button } from "./button"', 'import { Slot } from "radix-ui"'].join("\n"),
+  );
+});