diff --git a/DESIGN.md b/DESIGN.md
index 62705e72..80e47a0f 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -1,432 +1,43 @@
 # VisionSet design foundations
 
-## Purpose and Ownership
+The design system — the shadcn Nova foundation, its tokens, the primitive governance, the
+status palette, and the gates that hold all of it — lives in
+[Robomous/ui-core](https://github.com/Robomous/ui-core), consumed here as `@robomous/ui-core`.
+That repository's `DESIGN.md` is the governing document; what follows is only what is
+VisionSet's own: the extension registry, where the brand paints, and which gate holds each
+rule in this repo.
 
-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)), or frontend architecture
-([`docs/content/architecture/frontend/`](docs/content/architecture/frontend/README.md)).
+## VisionSet extensions
 
-## Source of Truth
+Everything VisionSet owns above the foundation, each following shadcn's extension convention —
+a value in `:root`, a dark counterpart in `.dark`, exposure through `@theme inline` — in
+`frontend/ui-core/src/styles.css`, mirrored by `src/tokens.ts`:
 
-Six layers decide the visual result. **When two disagree, the earlier one wins.**
-
-| # | 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 |
-| --- | --- | --- |
-| `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).
+| Extension | Rule |
+| --- | --- |
+| `stage` | The annotator's surround — the neutral a photograph is judged against. Its own role: not `muted`'s subtle fill, not `card`'s surface, distinguishable from `background` so a white asset edge still shows where it ends. Usage: [`docs/content/ui/annotator.md`](docs/content/ui/annotator.md#the-stage) |
+| `origin-hub` / `origin-custom` / `origin-robomous` | 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. Theme-stable, like the chart palette |
+| `--spacing-sidebar` / `--spacing-sidebar-collapsed` | 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 |
+| `--spacing-project-nav` / `--container-page` | 180px project-nav column; the 96rem page cap |
 
-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.
+An extension that turns out to be universal is a candidate to move into the package — that is
+a design decision and a PR against Robomous/ui-core, with the justification written into its
+`DESIGN.md`.
 
-### Where the brand is
+## 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 |
-| --- | --- |
-| `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 |
-
-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.
-
-## 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 |
-| --- | --- |
-| `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 |
-| --- | --- | --- |
-| `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 |
-
-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.
-
-## 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
-
-`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.
-
-**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".
-
-### Borders and focus
-
-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
-
-- **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) |
+| `frontend/ui-core/src/tokens.test.ts` | The extension stylesheet and token module agree declaration for declaration; no extension shadows a foundation name; the merged `LIGHT_THEME`/`DARK_THEME` view lost nothing |
+| `tests/scripts/design_system.test.mjs` | Vocabulary discipline over VisionSet's own sources: no retired shapes, no status colour outside the packaged Badge/statusTone, no rival palette, no retired token utilities, `menuSurface` on every menu |
+| `tests/scripts/design_tokens.test.mjs` | No colour in a class string; `brand` confined to its two identity sites; no retired declaration in the extension stylesheet; one icon library; no `tailwind.config.js` |
 
-A rule in this document that no gate holds is a rule under review, not an exemption.
+The scan helpers those gates run come from `@robomous/ui-core/gates`, versioned with the
+primitives they describe. A rule no gate holds is a rule under review, not an exemption.
diff --git a/frontend/app/src/styleguide/Styleguide.tsx b/frontend/app/src/styleguide/Styleguide.tsx
index ba064071..f98c7d1d 100644
--- a/frontend/app/src/styleguide/Styleguide.tsx
+++ b/frontend/app/src/styleguide/Styleguide.tsx
@@ -160,7 +160,7 @@ export function Styleguide(): JSX.Element {
 
         <Section
           title="Colour"
-          description="Intent, never a value. The shadcn preset's own vocabulary, plus VisionSet's four justified extensions. Every caption is LIGHT_THEME's value for that name."
+          description="Intent, never a value. The shadcn preset's own vocabulary, plus the foundation's brand and VisionSet's four justified extensions. Every caption is LIGHT_THEME's value for that name."
         >
           <div className="flex flex-col gap-5">
             <div className="flex flex-col gap-2">
diff --git a/frontend/ui-core/components.json b/frontend/ui-core/components.json
deleted file mode 100644
index acca9a50..00000000
--- a/frontend/ui-core/components.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": { "config": "", "css": "src/styles.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": { "components": "@/components", "utils": "@/lib/cn", "ui": "@/primitives", "lib": "@/lib", "hooks": "@/hooks" },
-  "menuColor": "inverted",
-  "menuAccent": "subtle",
-  "registries": {}
-}
diff --git a/frontend/ui-core/package.json b/frontend/ui-core/package.json
index 5e8c56a5..0384991e 100644
--- a/frontend/ui-core/package.json
+++ b/frontend/ui-core/package.json
@@ -21,8 +21,7 @@
     "build": "tsc -p tsconfig.build.json",
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "lint": "eslint src && pnpm run typecheck",
-    "shadcn:add": "bash ../../scripts/shadcn_add.sh"
+    "lint": "eslint src && pnpm run typecheck"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -44,20 +43,14 @@
     "vitest": "^4.1.11"
   },
   "dependencies": {
-    "@base-ui/react": "^1.7.0",
-    "@fontsource-variable/geist": "^5.3.0",
+    "@robomous/ui-core": "^0.1.0",
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-virtual": "^3.14.10",
     "@visionset/annotator": "workspace:*",
     "class-variance-authority": "^0.7.1",
-    "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",
-    "tw-animate-css": "^1.4.0"
+    "sonner": "^2.0.8"
   },
   "peerDependencies": {
     "react": ">=19",
diff --git a/frontend/ui-core/shadcn/README.md b/frontend/ui-core/shadcn/README.md
deleted file mode 100644
index 30ebcd44..00000000
--- a/frontend/ui-core/shadcn/README.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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
deleted file mode 100644
index 8a84d989..00000000
--- a/frontend/ui-core/shadcn/alert.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-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
deleted file mode 100644
index fe855569..00000000
--- a/frontend/ui-core/shadcn/badge.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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
deleted file mode 100644
index 239fbb6b..00000000
--- a/frontend/ui-core/shadcn/button.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-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
deleted file mode 100644
index 94dbba32..00000000
--- a/frontend/ui-core/shadcn/card.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-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
deleted file mode 100644
index 70a65e08..00000000
--- a/frontend/ui-core/shadcn/combobox.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-"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
deleted file mode 100644
index f1b8ae66..00000000
--- a/frontend/ui-core/shadcn/dialog.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-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
deleted file mode 100644
index 98f8a975..00000000
--- a/frontend/ui-core/shadcn/dropdown-menu.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-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
deleted file mode 100644
index af7e4441..00000000
--- a/frontend/ui-core/shadcn/field.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-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
deleted file mode 100644
index f2315e0c..00000000
--- a/frontend/ui-core/shadcn/input-group.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-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
deleted file mode 100644
index f73a5796..00000000
--- a/frontend/ui-core/shadcn/input.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 9f9ea366..00000000
--- a/frontend/ui-core/shadcn/label.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index 3b3735d2..00000000
--- a/frontend/ui-core/shadcn/progress.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 40638e77..00000000
--- a/frontend/ui-core/shadcn/select.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-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
deleted file mode 100644
index 5fc60fc0..00000000
--- a/frontend/ui-core/shadcn/separator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"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
deleted file mode 100644
index 0bf86ece..00000000
--- a/frontend/ui-core/shadcn/sheet.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-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
deleted file mode 100644
index 4e53f22b..00000000
--- a/frontend/ui-core/shadcn/skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 9280ee52..00000000
--- a/frontend/ui-core/shadcn/sonner.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"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
deleted file mode 100644
index 70280a10..00000000
--- a/frontend/ui-core/shadcn/table.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-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
deleted file mode 100644
index 4d4a2001..00000000
--- a/frontend/ui-core/shadcn/tabs.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-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
deleted file mode 100644
index b056e573..00000000
--- a/frontend/ui-core/shadcn/textarea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index aef6c65c..00000000
--- a/frontend/ui-core/shadcn/tooltip.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"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 7f6ad6f9..0cc41cd1 100644
--- a/frontend/ui-core/src/annotator/AddClassDialog.tsx
+++ b/frontend/ui-core/src/annotator/AddClassDialog.tsx
@@ -91,18 +91,7 @@ import { useEffect, useRef, useState, type JSX } from "react";
 import { asApiError } from "../data/errors";
 import { refusalProse } from "../data/refusals";
 import { classColor } from "../palette";
-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 } from "../primitives/input";
-import { Label } from "../primitives/label";
+import { Alert, AlertDescription, AlertTitle, Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Input, Label } from "@robomous/ui-core";
 import { formatGeometries } from "../data/geometryCategory";
 import { ClassFields } from "../patterns/ClassFields";
 import type {
diff --git a/frontend/ui-core/src/annotator/AnnotationPage.tsx b/frontend/ui-core/src/annotator/AnnotationPage.tsx
index d8fd60ea..851e35a1 100644
--- a/frontend/ui-core/src/annotator/AnnotationPage.tsx
+++ b/frontend/ui-core/src/annotator/AnnotationPage.tsx
@@ -155,20 +155,8 @@ 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 { inlineLink, cn, menuSurface, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Tooltip, TooltipContent, TooltipTrigger } from "@robomous/ui-core";
 import { EmptyState, ErrorState, LoadingState } from "../patterns/AsyncStates";
-import { Badge } from "../primitives/badge";
-import { Button } from "../primitives/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../primitives/dropdown-menu";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/tooltip";
 import { AnnotatorPanel } from "./AnnotatorPanel";
 import { CanvasReassign } from "./CanvasReassign";
 import { EditorNotice, EditorNotices } from "./EditorNotice";
diff --git a/frontend/ui-core/src/annotator/AnnotatorPanel.tsx b/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
index cc1ff12d..ebd3f1a5 100644
--- a/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
+++ b/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
@@ -87,14 +87,9 @@ import { useEffect, useRef, useState, type JSX, type RefObject } from "react";
 
 import { geometryLabel } from "../data/geometryCategory";
 import { classColor } from "../palette";
-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 { Badge, Button, DropdownMenu, DropdownMenuTrigger, Input, Tooltip, TooltipContent, TooltipTrigger, cn } from "@robomous/ui-core";
 import { ClassRegion } from "./ClassRegion";
 import { ReassignMenu } from "./ReassignMenu";
-import { cn } from "../lib/cn";
 
 export interface AnnotatorPanelProps {
   readonly store: AnnotatorStore;
diff --git a/frontend/ui-core/src/annotator/CanvasReassign.tsx b/frontend/ui-core/src/annotator/CanvasReassign.tsx
index d39bf493..9a9a14b7 100644
--- a/frontend/ui-core/src/annotator/CanvasReassign.tsx
+++ b/frontend/ui-core/src/annotator/CanvasReassign.tsx
@@ -57,8 +57,7 @@ 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/dropdown-menu";
+import { Button, DropdownMenu, DropdownMenuTrigger } from "@robomous/ui-core";
 import { ReassignMenu } from "./ReassignMenu";
 
 /**
diff --git a/frontend/ui-core/src/annotator/ClassRegion.tsx b/frontend/ui-core/src/annotator/ClassRegion.tsx
index 21bc2b06..d654fda9 100644
--- a/frontend/ui-core/src/annotator/ClassRegion.tsx
+++ b/frontend/ui-core/src/annotator/ClassRegion.tsx
@@ -63,8 +63,7 @@ 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, Input } from "@robomous/ui-core";
 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 96d461f7..c5e759f8 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 "@robomous/ui-core";
 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 cfc95ed0..bd97116d 100644
--- a/frontend/ui-core/src/annotator/ReassignMenu.tsx
+++ b/frontend/ui-core/src/annotator/ReassignMenu.tsx
@@ -51,10 +51,8 @@ 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 { cn, menuSurface, DropdownMenuContent, DropdownMenuItem } from "@robomous/ui-core";
 import { classColor } from "../palette";
-import { DropdownMenuContent, DropdownMenuItem } from "../primitives/dropdown-menu";
 
 export interface ReassignMenuProps {
   /** The object whose class is being changed. Its geometry decides what fits. */
diff --git a/frontend/ui-core/src/annotator/ShortcutSheet.tsx b/frontend/ui-core/src/annotator/ShortcutSheet.tsx
index c9eacb0a..368f5bed 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 "@robomous/ui-core";
 
 /**
  * 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 72dbe1bc..e261e89c 100644
--- a/frontend/ui-core/src/annotator/SuggestPanel.tsx
+++ b/frontend/ui-core/src/annotator/SuggestPanel.tsx
@@ -67,16 +67,7 @@ import { Check, Loader2, Sparkles, TriangleAlert, X } from "lucide-react";
 import type { JSX, ReactNode } from "react";
 
 import { EditorNotice } from "./EditorNotice";
-import { cn } from "../lib/cn";
-import { twoLineTrigger } from "../lib/select";
-import { Button } from "../primitives/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../primitives/select";
+import { cn, twoLineTrigger, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@robomous/ui-core";
 import type { Connection, SuggestBlocker } from "../data/inferenceQueries";
 
 export interface SuggestPanelProps {
diff --git a/frontend/ui-core/src/annotator/ToolPalette.tsx b/frontend/ui-core/src/annotator/ToolPalette.tsx
index 65057af1..bf9cae45 100644
--- a/frontend/ui-core/src/annotator/ToolPalette.tsx
+++ b/frontend/ui-core/src/annotator/ToolPalette.tsx
@@ -99,8 +99,7 @@ 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/tooltip";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@robomous/ui-core";
 
 /**
  * Why a declared geometry has no tool yet, keyed by the geometry.
diff --git a/frontend/ui-core/src/annotator/ZoomWidget.tsx b/frontend/ui-core/src/annotator/ZoomWidget.tsx
index 02bff94d..a90ccb9d 100644
--- a/frontend/ui-core/src/annotator/ZoomWidget.tsx
+++ b/frontend/ui-core/src/annotator/ZoomWidget.tsx
@@ -28,8 +28,7 @@
 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/tooltip";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@robomous/ui-core";
 
 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 8976fec3..55080565 100644
--- a/frontend/ui-core/src/annotator/addClassProvenance.test.tsx
+++ b/frontend/ui-core/src/annotator/addClassProvenance.test.tsx
@@ -28,8 +28,7 @@ import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { JSX, ReactNode } from "react";
 
 import { ApiProvider } from "../data/ApiProvider";
-import { Toaster } from "../primitives/sonner";
-import { TooltipProvider } from "../primitives/tooltip";
+import { Toaster, TooltipProvider } from "@robomous/ui-core";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
 import { stubResizeObserver } from "../testing/resizeObserver.js";
diff --git a/frontend/ui-core/src/annotator/drawingClass.test.tsx b/frontend/ui-core/src/annotator/drawingClass.test.tsx
index 78e19971..8fd332fb 100644
--- a/frontend/ui-core/src/annotator/drawingClass.test.tsx
+++ b/frontend/ui-core/src/annotator/drawingClass.test.tsx
@@ -23,7 +23,7 @@ import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { JSX, ReactNode } from "react";
 
 import { ApiProvider } from "../data/ApiProvider";
-import { TooltipProvider } from "../primitives/tooltip";
+import { TooltipProvider } from "@robomous/ui-core";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
 import { stubResizeObserver } from "../testing/resizeObserver.js";
diff --git a/frontend/ui-core/src/annotator/editorNotice.test.tsx b/frontend/ui-core/src/annotator/editorNotice.test.tsx
index 84452d5b..941954e0 100644
--- a/frontend/ui-core/src/annotator/editorNotice.test.tsx
+++ b/frontend/ui-core/src/annotator/editorNotice.test.tsx
@@ -25,7 +25,7 @@ import type { JSX, ReactNode } from "react";
 import { ApiProvider } from "../data/ApiProvider";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
-import { TooltipProvider } from "../primitives/tooltip";
+import { TooltipProvider } from "@robomous/ui-core";
 import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
 
diff --git a/frontend/ui-core/src/annotator/frameGallery.test.tsx b/frontend/ui-core/src/annotator/frameGallery.test.tsx
index 25ba5b95..3406668e 100644
--- a/frontend/ui-core/src/annotator/frameGallery.test.tsx
+++ b/frontend/ui-core/src/annotator/frameGallery.test.tsx
@@ -29,10 +29,9 @@ import type { JSX, ReactNode } from "react";
 import { ApiProvider } from "../data/ApiProvider";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
-import { TooltipProvider } from "../primitives/tooltip";
+import { TooltipProvider, TONE_BORDER, TONE_FILL } from "@robomous/ui-core";
 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";
diff --git a/frontend/ui-core/src/annotator/panel.test.tsx b/frontend/ui-core/src/annotator/panel.test.tsx
index 44ff4164..df07dc63 100644
--- a/frontend/ui-core/src/annotator/panel.test.tsx
+++ b/frontend/ui-core/src/annotator/panel.test.tsx
@@ -18,7 +18,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { JSX } from "react";
 
 import { AnnotatorPanel } from "./AnnotatorPanel";
-import { TooltipProvider } from "../primitives/tooltip";
+import { TooltipProvider } from "@robomous/ui-core";
 import { stubResizeObserver } from "../testing/resizeObserver.js";
 
 const SCHEMA = {
diff --git a/frontend/ui-core/src/annotator/pinBadge.test.tsx b/frontend/ui-core/src/annotator/pinBadge.test.tsx
index 25b30446..433ed1f1 100644
--- a/frontend/ui-core/src/annotator/pinBadge.test.tsx
+++ b/frontend/ui-core/src/annotator/pinBadge.test.tsx
@@ -21,7 +21,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { JSX, ReactNode } from "react";
 
 import { ApiProvider } from "../data/ApiProvider";
-import { TooltipProvider } from "../primitives/tooltip";
+import { TooltipProvider } from "@robomous/ui-core";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
 import { stubResizeObserver } from "../testing/resizeObserver.js";
diff --git a/frontend/ui-core/src/annotator/suggestFlow.test.tsx b/frontend/ui-core/src/annotator/suggestFlow.test.tsx
index 82d71d87..444147eb 100644
--- a/frontend/ui-core/src/annotator/suggestFlow.test.tsx
+++ b/frontend/ui-core/src/annotator/suggestFlow.test.tsx
@@ -27,7 +27,7 @@ import { ApiProvider } from "../data/ApiProvider";
 import { clearPrefs, writePref } from "../data/prefs";
 import { writeToken } from "../data/session";
 import { AnnotationPage } from "./AnnotationPage";
-import { TooltipProvider } from "../primitives/tooltip";
+import { TooltipProvider } from "@robomous/ui-core";
 import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { assetActions, batchActions, jobActions } from "../testing/wire.fixtures.js";
 
diff --git a/frontend/ui-core/src/annotator/toolPalette.test.tsx b/frontend/ui-core/src/annotator/toolPalette.test.tsx
index c26a955f..cac758bf 100644
--- a/frontend/ui-core/src/annotator/toolPalette.test.tsx
+++ b/frontend/ui-core/src/annotator/toolPalette.test.tsx
@@ -12,7 +12,7 @@ import { userEvent } from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { JSX } from "react";
 
-import { TooltipProvider } from "../primitives/tooltip";
+import { TooltipProvider } from "@robomous/ui-core";
 import { stubResizeObserver } from "../testing/resizeObserver.js";
 import { ToolPalette, toolChoices } from "./ToolPalette";
 
diff --git a/frontend/ui-core/src/annotator/topBar.test.tsx b/frontend/ui-core/src/annotator/topBar.test.tsx
index ff44477b..ba273637 100644
--- a/frontend/ui-core/src/annotator/topBar.test.tsx
+++ b/frontend/ui-core/src/annotator/topBar.test.tsx
@@ -23,10 +23,9 @@ 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/tooltip";
+import { TooltipProvider, TONE_BORDER, TONE_FILL } from "@robomous/ui-core";
 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";
diff --git a/frontend/ui-core/src/data/TokenGate.tsx b/frontend/ui-core/src/data/TokenGate.tsx
index 3447fe9d..a8980e03 100644
--- a/frontend/ui-core/src/data/TokenGate.tsx
+++ b/frontend/ui-core/src/data/TokenGate.tsx
@@ -49,11 +49,7 @@ 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 { Input } from "../primitives/input";
-import { Label } from "../primitives/label";
-import { FieldDescription, FieldError } from "../primitives/field";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, FieldDescription, FieldError } from "@robomous/ui-core";
 import { useApiSession } from "./ApiProvider";
 import { refusalProse } from "./refusals";
 import { asApiError, NETWORK_ERROR, unwrap } from "./errors";
diff --git a/frontend/ui-core/src/harness.test.tsx b/frontend/ui-core/src/harness.test.tsx
index 0f411e0a..928b5ac4 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 "@robomous/ui-core";
 
 const unmountFocusReturned = vi.fn();
 
diff --git a/frontend/ui-core/src/index.ts b/frontend/ui-core/src/index.ts
index 3e95639b..dbdb9692 100644
--- a/frontend/ui-core/src/index.ts
+++ b/frontend/ui-core/src/index.ts
@@ -1,6 +1,10 @@
 /**
- * `@visionset/ui-core` — the design system, the domain components, and the
- * generated API client.
+ * `@visionset/ui-core` — VisionSet's domain components, screens, and the
+ * generated API client, over the Robomous design system.
+ *
+ * The design system itself lives in `@robomous/ui-core`; this package
+ * re-exports its whole surface so a consumer keeps one import, and adds
+ * what is VisionSet's own.
  *
  * ## What a consumer imports
  *
@@ -32,111 +36,20 @@
  * package promises stays auditable — the rule `generated/api.ts` already follows.
  */
 
-// The design tokens, and their prose contract at the repository root.
-export { cssVar, DARK_THEME, EXTENSIONS, LIGHT_THEME, THEME } from "./tokens.js";
+// The design system, whole: primitives, lib helpers, statusTone, foundation
+// tokens. Everything it exports is re-exported here.
+export * from "@robomous/ui-core";
+
+// The merged token view — foundation plus VisionSet's extensions, so
+// `LIGHT_THEME.stage` keeps answering. Explicit local exports take precedence
+// over the star. (`cssVar`/`THEME` arrive via the star.)
+export { DARK_THEME, EXTENSIONS, LIGHT_THEME } from "./tokens.js";
 
 // The class palette. Re-exported from the annotator, never respelled — see the
 // argument in `palette.ts`.
 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 lucide.
-export { Button, buttonVariants } from "./primitives/button.js";
-export {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} 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,
-} 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,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "./primitives/table.js";
-
 // The three states every async surface owes.
 export {
   EmptyState,
diff --git a/frontend/ui-core/src/lib/button.ts b/frontend/ui-core/src/lib/button.ts
deleted file mode 100644
index 912cf9e2..00000000
--- a/frontend/ui-core/src/lib/button.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// 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/cn.test.ts b/frontend/ui-core/src/lib/cn.test.ts
deleted file mode 100644
index bf4e3909..00000000
--- a/frontend/ui-core/src/lib/cn.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * `cn` — the generic merge cases. No custom `tailwind-merge` configuration
- * lives behind this one (the shadcn preset's names do not collide with a
- * stock class group the way v1's `--text-*` scale did), so there is nothing
- * scale-specific left to pin here.
- */
-
-import { describe, expect, it } from "vitest";
-
-import { cn } from "./cn";
-
-describe("cn", () => {
-  it("lets a caller override a stock utility", () => {
-    expect(cn("px-4", "px-6")).toBe("px-6");
-    expect(cn("rounded-md", "rounded-full")).toBe("rounded-full");
-  });
-
-  it("keeps utilities that do not conflict", () => {
-    expect(cn("flex", "items-center").split(" ").sort()).toEqual(["flex", "items-center"]);
-  });
-
-  it("drops falsy input rather than emitting it", () => {
-    expect(cn("flex", false, undefined, null, "gap-2")).toBe("flex gap-2");
-  });
-
-  it("keeps a semantic colour beside a layout utility", () => {
-    expect(cn("bg-primary", "rounded-lg").split(" ").sort()).toEqual(["bg-primary", "rounded-lg"]);
-  });
-
-  it("lets a caller override a semantic background colour", () => {
-    expect(cn("bg-primary", "bg-destructive")).toBe("bg-destructive");
-  });
-});
diff --git a/frontend/ui-core/src/lib/cn.ts b/frontend/ui-core/src/lib/cn.ts
deleted file mode 100644
index 15a91e12..00000000
--- a/frontend/ui-core/src/lib/cn.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * `cn` — merge class names, last conflicting utility wins.
- *
- * `clsx` handles the conditionals; `tailwind-merge` handles the part a naive
- * join gets wrong. Without it `cn("px-4", props.className)` with `px-6`
- * passed in emits both, and which one applies is decided by the order
- * Tailwind happened to write them into the stylesheet — so a caller's
- * override works or does not depending on a rule nobody can see. That is why
- * the `className` prop on every primitive here is a real extension point
- * rather than a suggestion.
- *
- * The shadcn preset's own vocabulary needs no custom `tailwind-merge`
- * configuration — unlike v1's `--text-*` scale, none of its names collide
- * with a stock Tailwind class group — so this is the bare merge, the same
- * shape the CLI scratch's own `lib/utils.ts` ships.
- */
-
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: readonly ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
diff --git a/frontend/ui-core/src/lib/menu.ts b/frontend/ui-core/src/lib/menu.ts
deleted file mode 100644
index a67ac46d..00000000
--- a/frontend/ui-core/src/lib/menu.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// 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
deleted file mode 100644
index 16e95d78..00000000
--- a/frontend/ui-core/src/lib/progress.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// 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
deleted file mode 100644
index cc90b6ba..00000000
--- a/frontend/ui-core/src/lib/select.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// 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 18e32b78..249f257d 100644
--- a/frontend/ui-core/src/patterns/AsyncStates.tsx
+++ b/frontend/ui-core/src/patterns/AsyncStates.tsx
@@ -20,10 +20,7 @@
 import { Inbox, TriangleAlert } from "lucide-react";
 import type { JSX, ReactNode } from "react";
 
-import { cn } from "../lib/cn";
-import { Alert, AlertDescription, AlertTitle } from "../primitives/alert";
-import { Button } from "../primitives/button";
-import { Skeleton } from "../primitives/skeleton";
+import { cn, Alert, AlertDescription, AlertTitle, Button, Skeleton } from "@robomous/ui-core";
 
 export interface LoadingStateProps {
   /** How many placeholder rows. Match the shape being waited for. */
diff --git a/frontend/ui-core/src/patterns/BackLink.tsx b/frontend/ui-core/src/patterns/BackLink.tsx
index 748c0dce..a426ec30 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 "@robomous/ui-core";
 
 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 0fe2f8ad..49d77ce1 100644
--- a/frontend/ui-core/src/patterns/ClassFields.tsx
+++ b/frontend/ui-core/src/patterns/ClassFields.tsx
@@ -24,17 +24,7 @@ import type { JSX } from "react";
 
 import { geometryLabel, groupGeometries } from "../data/geometryCategory";
 import { classColor, hexColor } from "../palette";
-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";
+import { Button, Input, Label, FieldDescription, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@robomous/ui-core";
 import type { AttributeBody, GeometryType, LabelClassBody } from "../screens/queries";
 
 /**
diff --git a/frontend/ui-core/src/patterns/DataDisplay.tsx b/frontend/ui-core/src/patterns/DataDisplay.tsx
index eb3e0763..9bd6cb44 100644
--- a/frontend/ui-core/src/patterns/DataDisplay.tsx
+++ b/frontend/ui-core/src/patterns/DataDisplay.tsx
@@ -34,7 +34,7 @@
 
 import type { HTMLAttributes, JSX, ReactNode } from "react";
 
-import { cn } from "../lib/cn";
+import { cn } from "@robomous/ui-core";
 import { formatCount } from "../lib/format";
 
 export interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
diff --git a/frontend/ui-core/src/patterns/ErrorBoundary.tsx b/frontend/ui-core/src/patterns/ErrorBoundary.tsx
index ea340b1a..7e935e80 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 "@robomous/ui-core";
 import { EmptyState } from "./AsyncStates.js";
 
 export interface ErrorBoundaryProps {
diff --git a/frontend/ui-core/src/patterns/ExportTargetSelect.tsx b/frontend/ui-core/src/patterns/ExportTargetSelect.tsx
index beeae6d2..7a50f582 100644
--- a/frontend/ui-core/src/patterns/ExportTargetSelect.tsx
+++ b/frontend/ui-core/src/patterns/ExportTargetSelect.tsx
@@ -17,16 +17,7 @@
 import type { JSX } from "react";
 
 import { GEOMETRY_LABELS } from "../data/geometryCategory";
-import { twoLineTrigger } from "../lib/select";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "../primitives/select";
+import { twoLineTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@robomous/ui-core";
 import type { ExportTarget } from "../screens/queries";
 
 export interface ExportTargetFamily {
diff --git a/frontend/ui-core/src/patterns/ProjectEyebrow.tsx b/frontend/ui-core/src/patterns/ProjectEyebrow.tsx
index 4b581ae6..53637c20 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 "@robomous/ui-core";
 
 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 5e689bac..b10c5ac9 100644
--- a/frontend/ui-core/src/patterns/ProjectNav.tsx
+++ b/frontend/ui-core/src/patterns/ProjectNav.tsx
@@ -50,16 +50,7 @@ import { ChevronDown, Database, Grid3x3, Layers, MoreHorizontal, Network, Pencil
 import { cva } from "class-variance-authority";
 import type { JSX, MouseEvent, ReactNode } from "react";
 
-import { menuSurface } from "../lib/menu";
-import { Button } from "../primitives/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../primitives/dropdown-menu";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs";
+import { menuSurface, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Tabs, TabsContent, TabsList, TabsTrigger } from "@robomous/ui-core";
 
 /**
  * The four sections of a project, in the order work happens in: what a project
diff --git a/frontend/ui-core/src/patterns/RecipeEditor.tsx b/frontend/ui-core/src/patterns/RecipeEditor.tsx
index 8317a3f8..f8377f7f 100644
--- a/frontend/ui-core/src/patterns/RecipeEditor.tsx
+++ b/frontend/ui-core/src/patterns/RecipeEditor.tsx
@@ -20,12 +20,8 @@ import type { JSX, ReactNode } from "react";
 
 import { GEOMETRY_LABELS, GEOMETRY_PLURALS } from "../data/geometryCategory";
 import { refusalProse } from "../data/refusals";
-import { cn } from "../lib/cn";
+import { cn, Button, FieldError, FieldDescription, Input, Label } from "@robomous/ui-core";
 import { formatCount } from "../lib/format";
-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,
diff --git a/frontend/ui-core/src/patterns/RecipeList.tsx b/frontend/ui-core/src/patterns/RecipeList.tsx
index 9d839a17..7198459b 100644
--- a/frontend/ui-core/src/patterns/RecipeList.tsx
+++ b/frontend/ui-core/src/patterns/RecipeList.tsx
@@ -16,9 +16,7 @@
 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 { cn, Badge, Button } from "@robomous/ui-core";
 import { describeRecipeSpec, type RecipeSpec } from "../screens/recipeDraft";
 
 export interface RecipeListItem {
diff --git a/frontend/ui-core/src/patterns/StepMarker.tsx b/frontend/ui-core/src/patterns/StepMarker.tsx
index c2c32b39..a9a1bc52 100644
--- a/frontend/ui-core/src/patterns/StepMarker.tsx
+++ b/frontend/ui-core/src/patterns/StepMarker.tsx
@@ -11,7 +11,7 @@
 import { Check } from "lucide-react";
 import type { JSX } from "react";
 
-import { cn } from "../lib/cn";
+import { cn } from "@robomous/ui-core";
 
 export type StepState = "upcoming" | "active" | "complete";
 
diff --git a/frontend/ui-core/src/patterns/statusTone.test.ts b/frontend/ui-core/src/patterns/statusTone.test.ts
deleted file mode 100644
index 9ce46a21..00000000
--- a/frontend/ui-core/src/patterns/statusTone.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-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
deleted file mode 100644
index 028fafb3..00000000
--- a/frontend/ui-core/src/patterns/statusTone.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * 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/alert.tsx b/frontend/ui-core/src/primitives/alert.tsx
deleted file mode 100644
index 8c88a3e1..00000000
--- a/frontend/ui-core/src/primitives/alert.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-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
deleted file mode 100644
index 10549b27..00000000
--- a/frontend/ui-core/src/primitives/badge.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-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
deleted file mode 100644
index baa8437e..00000000
--- a/frontend/ui-core/src/primitives/button.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-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
deleted file mode 100644
index 2bd2186c..00000000
--- a/frontend/ui-core/src/primitives/card.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-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
deleted file mode 100644
index 9d7f5663..00000000
--- a/frontend/ui-core/src/primitives/combobox.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "./combobox";
-
-const FRUIT = ["apple", "banana", "cherry"];
-
-function Demo() {
-  return (
-    <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>
-  );
-}
-
-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
deleted file mode 100644
index 174177df..00000000
--- a/frontend/ui-core/src/primitives/combobox.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-"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
deleted file mode 100644
index cf7e8c6f..00000000
--- a/frontend/ui-core/src/primitives/dialog.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-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
deleted file mode 100644
index 7f5f6fdf..00000000
--- a/frontend/ui-core/src/primitives/dropdown-menu.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-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
deleted file mode 100644
index 47a9ee7c..00000000
--- a/frontend/ui-core/src/primitives/field.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-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
deleted file mode 100644
index 60a5c8e0..00000000
--- a/frontend/ui-core/src/primitives/input-group.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-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
deleted file mode 100644
index 531fc6ab..00000000
--- a/frontend/ui-core/src/primitives/input.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 16076f0f..00000000
--- a/frontend/ui-core/src/primitives/label.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
deleted file mode 100644
index ae86045c..00000000
--- a/frontend/ui-core/src/primitives/primitives.test.tsx
+++ /dev/null
@@ -1,440 +0,0 @@
-/**
- * The component harness, proved on the primitives that carry a decision.
- *
- * 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 — 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
- * under deadline.
- */
-
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import type { JSX } from "react";
-import { describe, expect, it } from "vitest";
-
-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 "./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 { 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("keeps an explicit type", () => {
-    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", () => {
-    // Without `tailwind-merge` both `px-4` and `px-6` survive and which one wins is
-    // decided by the order Tailwind wrote them into the stylesheet — a rule nobody
-    // can see from the call site. This is what makes `className` an extension
-    // point rather than a suggestion.
-    render(<Button className="px-6">Wide</Button>);
-    const className = screen.getByRole("button", { name: "Wide" }).className;
-    expect(className).toContain("px-6");
-    expect(className).not.toContain("px-4");
-  });
-
-  it("renders the child element with asChild, so a link stays a link", () => {
-    render(
-      <Button asChild variant="default">
-        <a href="/projects">Projects</a>
-      </Button>,
-    );
-    // A `role="link"` on a `<button>` would read the same to a test and behave
-    // differently to a browser — no middle-click, no "open in new tab".
-    const link = screen.getByRole("link", { name: "Projects" });
-    expect(link.tagName).toBe("A");
-    expect(link.className).toContain("bg-primary");
-  });
-
-  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("hands back the height and padding a link button in prose cannot keep", () => {
-    render(
-      <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-8");
-    expect(classes).not.toContain("px-2.5");
-  });
-});
-
-describe("Alert and Badge", () => {
-  it("announces an alert, and composes its title and description", () => {
-    render(
-      <Alert variant="destructive">
-        <AlertTitle>Refused</AlertTitle>
-        <AlertDescription>because</AlertDescription>
-      </Alert>,
-    );
-    const alert = screen.getByRole("alert");
-    expect(alert.textContent).toContain("Refused");
-    expect(alert.textContent).toContain("because");
-  });
-
-  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)/);
-  });
-});
-
-describe("fields", () => {
-  it("associates a label with its control by id", () => {
-    render(
-      <>
-        <Label htmlFor="tag">Tag</Label>
-        <Input id="tag" defaultValue="v1" />
-      </>,
-    );
-    expect(screen.getByLabelText("Tag")).toHaveProperty("value", "v1");
-  });
-
-  it("announces a field error", () => {
-    render(<FieldError>must not be blank</FieldError>);
-    expect(screen.getByRole("alert").textContent).toBe("must not be blank");
-  });
-});
-
-/**
- * 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
- * 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" className={twoLineTrigger}>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <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>
-      </Select>
-    );
-  }
-
-  it("stacks the identifier and its meta in the closed trigger", () => {
-    render(pickOne());
-    const trigger = screen.getByTestId("model");
-    expect(trigger.textContent).toContain("org/model-tiny");
-    expect(trigger.textContent).toContain("311.9 MB · tiny");
-    // Two elements, not one line that happens to wrap — the meta carries the
-    // muted role and the id does not.
-    const meta = trigger.querySelector(".text-muted-foreground");
-    expect(meta?.textContent).toBe("311.9 MB · tiny");
-    expect(meta?.textContent).not.toContain("org/model-tiny");
-  });
-
-  it("grows rather than clipping, and leaves a one-line option where it was", () => {
-    render(pickOne());
-    // `h-8` would fix the height and squash the second line; `min-h-8` keeps the
-    // 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");
-    // Nothing truncates: half a model id is not a model id.
-    expect(trigger.className).not.toContain("truncate");
-    // `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 () => {
-    render(pickOne());
-    await userEvent.click(screen.getByTestId("model"));
-    const viewport = document.querySelector("[data-radix-select-viewport]");
-    expect(viewport).not.toBeNull();
-    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("marks a card title with its slot, for the styling that reads it", () => {
-    render(
-      <Card>
-        <CardTitle>Classes</CardTitle>
-      </Card>,
-    );
-    expect(screen.getByText("Classes").getAttribute("data-slot")).toBe("card-title");
-  });
-
-  it("keeps the table's header while the body is empty", () => {
-    render(
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>State</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody />
-      </Table>,
-    );
-    expect(screen.getByRole("columnheader", { name: "Name" })).not.toBeNull();
-    expect(screen.getByRole("columnheader", { name: "State" })).not.toBeNull();
-  });
-});
-
-/**
- * The tab bar, asserted on what it *means* rather than on what it looks like.
- *
- * The distinction between the open section and the other two has to survive a
- * restyling, so nothing here matches a class string — a test that pinned
- * `bg-card` would have failed on the very change it was supposed to protect, and
- * a test that pinned `border-primary` would fail on the next one. What is asserted
- * is the part a screen reader and the keyboard both read: the roles, `aria-selected`,
- * Radix's `data-state`, and that only the open panel is in the tree at all.
- *
- * There is nothing here about a variant cascade: `TabsList` has one shape and no
- * context to hand down.
- */
-describe("Tabs", () => {
-  function bar(): JSX.Element {
-    return (
-      <Tabs defaultValue="schema">
-        <TabsList aria-label="Sections">
-          <TabsTrigger value="schema">Schema</TabsTrigger>
-          <TabsTrigger value="batches">Batches</TabsTrigger>
-        </TabsList>
-        <TabsContent value="schema">the classes</TabsContent>
-        <TabsContent value="batches">the batches</TabsContent>
-      </Tabs>
-    );
-  }
-
-  it("marks the open section as the selected tab and the others as not", () => {
-    render(bar());
-
-    const [schema, batches] = screen.getAllByRole("tab");
-    expect(schema.getAttribute("aria-selected")).toBe("true");
-    expect(schema.dataset.state).toBe("active");
-    expect(batches.getAttribute("aria-selected")).toBe("false");
-    expect(batches.dataset.state).toBe("inactive");
-  });
-
-  it("moves the selection when the tab is clicked, so the state is the source of the styling", async () => {
-    render(bar());
-
-    await userEvent.click(screen.getByRole("tab", { name: "Batches" }));
-    expect(screen.getByRole("tab", { name: "Batches" }).getAttribute("aria-selected")).toBe("true");
-    expect(screen.getByRole("tab", { name: "Schema" }).getAttribute("aria-selected")).toBe("false");
-  });
-
-  it("keeps only the open panel in the tree, and labels it with its tab", () => {
-    render(bar());
-
-    const panels = screen.getAllByRole("tabpanel");
-    expect(panels).toHaveLength(1);
-    expect(panels[0]?.textContent).toBe("the classes");
-    expect(screen.getByRole("tablist").getAttribute("aria-label")).toBe("Sections");
-  });
-
-  it("is operable from the keyboard, because every trigger is a real button", async () => {
-    render(bar());
-
-    // Radix's roving tabindex: one stop for the whole bar, arrows move within it.
-    await userEvent.tab();
-    expect(document.activeElement).toBe(screen.getByRole("tab", { name: "Schema" }));
-
-    await userEvent.keyboard("{ArrowRight}");
-    expect(document.activeElement).toBe(screen.getByRole("tab", { name: "Batches" }));
-    expect(screen.getByRole("tab", { name: "Batches" }).getAttribute("aria-selected")).toBe("true");
-  });
-});
-
-describe("Progress", () => {
-  it("reports its value to assistive technology, not only as a width", () => {
-    // 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, 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", () => {
-    let track: HTMLDivElement | null = null;
-    render(
-      <Progress
-        value={7}
-        aria-label="Ingest"
-        ref={(node) => {
-          track = node;
-        }}
-      />,
-    );
-    expect(track).toBe(screen.getByRole("progressbar"));
-  });
-});
-
-describe("Dialog", () => {
-  function describedBy(dialog: HTMLElement): readonly (string | null)[] {
-    return (dialog.getAttribute("aria-describedby") ?? "")
-      .split(" ")
-      .filter(Boolean)
-      .map((id) => document.getElementById(id)?.textContent ?? null);
-  }
-
-  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"]);
-    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");
-  });
-});
-
-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();
-  });
-});
-
-describe("DropdownMenu", () => {
-  it("sizes its surface to the items, not to the trigger", async () => {
-    const user = userEvent.setup();
-    render(
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" aria-label="Actions" />
-        </DropdownMenuTrigger>
-        <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(" ");
-    // 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
deleted file mode 100644
index 5561569c..00000000
--- a/frontend/ui-core/src/primitives/progress.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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
deleted file mode 100644
index 115b420d..00000000
--- a/frontend/ui-core/src/primitives/select.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-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
deleted file mode 100644
index e5f1419a..00000000
--- a/frontend/ui-core/src/primitives/separator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"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
deleted file mode 100644
index 5d00e191..00000000
--- a/frontend/ui-core/src/primitives/sheet.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-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
deleted file mode 100644
index dfadacac..00000000
--- a/frontend/ui-core/src/primitives/skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index c6ee606d..00000000
--- a/frontend/ui-core/src/primitives/sonner.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index 4e09dca4..00000000
--- a/frontend/ui-core/src/primitives/sonner.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"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
deleted file mode 100644
index 593987c9..00000000
--- a/frontend/ui-core/src/primitives/table.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-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
deleted file mode 100644
index 7befd7c5..00000000
--- a/frontend/ui-core/src/primitives/tabs.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-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
deleted file mode 100644
index 6f935a30..00000000
--- a/frontend/ui-core/src/primitives/textarea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index badbca95..00000000
--- a/frontend/ui-core/src/primitives/tooltip.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"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 eccf6331..2511bb18 100644
--- a/frontend/ui-core/src/screens/BatchLifecycle.tsx
+++ b/frontend/ui-core/src/screens/BatchLifecycle.tsx
@@ -27,27 +27,7 @@ import { SquareCheck } from "lucide-react";
 
 import { asApiError } from "../data/errors";
 import { refusalProse } from "../data/refusals";
-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 { 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";
+import { inlineLink, progressAria, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Input, Label, FieldDescription, FieldError, Progress, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@robomous/ui-core";
 import { annotatedShare, outstandingWork } from "./batchState";
 import {
   useApproveBatch,
diff --git a/frontend/ui-core/src/screens/BatchesScreen.tsx b/frontend/ui-core/src/screens/BatchesScreen.tsx
index e28cc80b..a99d7a62 100644
--- a/frontend/ui-core/src/screens/BatchesScreen.tsx
+++ b/frontend/ui-core/src/screens/BatchesScreen.tsx
@@ -36,12 +36,8 @@ import { useState, type JSX } from "react";
 import { Async } from "../data/Async";
 import { BATCH_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-import { inlineLink } from "../lib/button";
-import { Badge } from "../primitives/badge";
+import { inlineLink, Badge, Button, FieldError, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@robomous/ui-core";
 import { SectionHeader } from "../patterns/SectionHeader";
-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";
diff --git a/frontend/ui-core/src/screens/ClipRangeTimeline.tsx b/frontend/ui-core/src/screens/ClipRangeTimeline.tsx
index 5fe25d72..50571152 100644
--- a/frontend/ui-core/src/screens/ClipRangeTimeline.tsx
+++ b/frontend/ui-core/src/screens/ClipRangeTimeline.tsx
@@ -31,7 +31,7 @@ import {
   type SyntheticEvent,
 } from "react";
 
-import { cn } from "../lib/cn";
+import { cn } from "@robomous/ui-core";
 import { clock, mergedRanges, type ClipRange } from "./clipRanges";
 
 function capture(target: Element, pointerId: number): void {
diff --git a/frontend/ui-core/src/screens/ComposedTransitions.tsx b/frontend/ui-core/src/screens/ComposedTransitions.tsx
index 3b94e2b3..3ce5fbad 100644
--- a/frontend/ui-core/src/screens/ComposedTransitions.tsx
+++ b/frontend/ui-core/src/screens/ComposedTransitions.tsx
@@ -26,8 +26,7 @@ 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/field";
+import { Button, FieldError } from "@robomous/ui-core";
 import { outstandingWork } from "./batchState";
 import { promotionSummary } from "./PromoteButton";
 import {
diff --git a/frontend/ui-core/src/screens/CorrectionBatch.tsx b/frontend/ui-core/src/screens/CorrectionBatch.tsx
index 59f85d5e..78aac1b2 100644
--- a/frontend/ui-core/src/screens/CorrectionBatch.tsx
+++ b/frontend/ui-core/src/screens/CorrectionBatch.tsx
@@ -36,19 +36,7 @@ import { useState, type JSX } from "react";
 
 import { BATCH_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-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 { Input } from "../primitives/input";
-import { Label } from "../primitives/label";
-import { FieldDescription, FieldError } from "../primitives/field";
+import { inlineLink, cn, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Input, Label, FieldDescription, FieldError } from "@robomous/ui-core";
 import { useCreateCorrection, type Batch } from "./queries";
 
 /** What a correction covers. `all` sends nothing and lets the server default. */
diff --git a/frontend/ui-core/src/screens/DatasetAssetDialog.tsx b/frontend/ui-core/src/screens/DatasetAssetDialog.tsx
index 8533fef5..0224fb91 100644
--- a/frontend/ui-core/src/screens/DatasetAssetDialog.tsx
+++ b/frontend/ui-core/src/screens/DatasetAssetDialog.tsx
@@ -28,17 +28,9 @@ 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, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle } from "@robomous/ui-core";
 import { DescriptionList, DescriptionRow } from "../patterns/DataDisplay";
 import { StaticAnnotationOverlay } from "../patterns/StaticAnnotationOverlay";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from "../primitives/dialog";
 import { useActiveSchema, useDatasetAssetAnnotations, type DatasetAsset } from "./queries";
 
 export interface DatasetAssetDialogProps {
diff --git a/frontend/ui-core/src/screens/DatasetScreen.tsx b/frontend/ui-core/src/screens/DatasetScreen.tsx
index c8ff812b..ccbe8566 100644
--- a/frontend/ui-core/src/screens/DatasetScreen.tsx
+++ b/frontend/ui-core/src/screens/DatasetScreen.tsx
@@ -50,24 +50,9 @@ import { useEffect, useState, type FormEvent, type JSX } from "react";
 
 import { Async } from "../data/Async";
 import { asApiError } from "../data/errors";
-import { twoLineTrigger } from "../lib/select";
-import { Alert, AlertDescription, AlertTitle } from "../primitives/alert";
-import { Badge } from "../primitives/badge";
+import { twoLineTrigger, Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardAction, CardContent, CardHeader, CardTitle, Tabs, TabsContent, TabsList, TabsTrigger, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Input, Label, FieldDescription, FieldError, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@robomous/ui-core";
 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 {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from "../primitives/dialog";
-import { Input } from "../primitives/input";
-import { Label } from "../primitives/label";
-import { FieldDescription, FieldError } from "../primitives/field";
 import {
   classBlockers,
   describeClassCount,
@@ -76,14 +61,6 @@ import {
   lostClasses,
   refusalProse,
 } from "../data/refusals";
-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 { AssetThumbnail } from "./AssetThumbnail";
diff --git a/frontend/ui-core/src/screens/DeleteBatch.tsx b/frontend/ui-core/src/screens/DeleteBatch.tsx
index 24e5c923..c1a00d91 100644
--- a/frontend/ui-core/src/screens/DeleteBatch.tsx
+++ b/frontend/ui-core/src/screens/DeleteBatch.tsx
@@ -38,18 +38,7 @@ import { useState, type JSX } from "react";
 
 import { BATCH_ACTION, declares, withheldBecause } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-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/field";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../primitives/dropdown-menu";
+import { cn, menuSurface, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, FieldError, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@robomous/ui-core";
 import { useDeleteBatch, type Batch } from "./queries";
 
 export interface BatchOverflowMenuProps {
diff --git a/frontend/ui-core/src/screens/FrameGrid.tsx b/frontend/ui-core/src/screens/FrameGrid.tsx
index b8660c2f..fe23983d 100644
--- a/frontend/ui-core/src/screens/FrameGrid.tsx
+++ b/frontend/ui-core/src/screens/FrameGrid.tsx
@@ -47,14 +47,7 @@ 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 {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from "../primitives/dialog";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle } from "@robomous/ui-core";
 import { AssetThumbnail } from "./AssetThumbnail";
 import {
   ASSET_ACTION,
diff --git a/frontend/ui-core/src/screens/GalleryControls.tsx b/frontend/ui-core/src/screens/GalleryControls.tsx
index 1622fc8c..ba533c13 100644
--- a/frontend/ui-core/src/screens/GalleryControls.tsx
+++ b/frontend/ui-core/src/screens/GalleryControls.tsx
@@ -13,9 +13,7 @@ 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 } from "../primitives/field";
-import { Input } from "../primitives/input";
+import { Button, FieldError, Input } from "@robomous/ui-core";
 import { JOB_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
 import { DEFAULT_DENSITY, DENSITY_STEPS, FrameGrid } from "./FrameGrid";
diff --git a/frontend/ui-core/src/screens/GalleryScreen.tsx b/frontend/ui-core/src/screens/GalleryScreen.tsx
index e80e00b9..f75ff7bd 100644
--- a/frontend/ui-core/src/screens/GalleryScreen.tsx
+++ b/frontend/ui-core/src/screens/GalleryScreen.tsx
@@ -12,9 +12,7 @@
 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/field";
+import { Badge, Button, FieldError } from "@robomous/ui-core";
 import { BackLink } from "../patterns/BackLink";
 import {
   DEFAULT_DENSITY,
diff --git a/frontend/ui-core/src/screens/HomeScreen.tsx b/frontend/ui-core/src/screens/HomeScreen.tsx
index d705e7a7..18380221 100644
--- a/frontend/ui-core/src/screens/HomeScreen.tsx
+++ b/frontend/ui-core/src/screens/HomeScreen.tsx
@@ -53,9 +53,7 @@ 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/skeleton";
+import { Badge, Button, Skeleton } from "@robomous/ui-core";
 import { CreateProjectDialog } from "./ProjectsScreen";
 import { AssetThumbnail } from "./AssetThumbnail";
 import {
diff --git a/frontend/ui-core/src/screens/IngestScreen.tsx b/frontend/ui-core/src/screens/IngestScreen.tsx
index 037cf3b0..2d98a34a 100644
--- a/frontend/ui-core/src/screens/IngestScreen.tsx
+++ b/frontend/ui-core/src/screens/IngestScreen.tsx
@@ -134,31 +134,13 @@ import {
 } from "react";
 
 import { refusalProse } from "../data/refusals";
-import { cn } from "../lib/cn";
+import { cn, progressAria, STATUS_INK, Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardContent, Progress, Input, Label, FieldDescription, FieldError, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@robomous/ui-core";
 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, 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/progress";
-import { Input } from "../primitives/input";
-import { Label } from "../primitives/label";
 import { ScaleField, scaledDimension } from "./ingestScale";
-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";
 import { OutcomeNextStep } from "./ComposedTransitions";
 import { SchemaForeshadow } from "./SchemaForeshadow";
 import { ClipRangeTimeline } from "./ClipRangeTimeline";
diff --git a/frontend/ui-core/src/screens/JobPanels.tsx b/frontend/ui-core/src/screens/JobPanels.tsx
index efb97b2e..3d4f20f0 100644
--- a/frontend/ui-core/src/screens/JobPanels.tsx
+++ b/frontend/ui-core/src/screens/JobPanels.tsx
@@ -37,9 +37,7 @@
 import { useEffect, useState, type JSX, type KeyboardEvent } from "react";
 import { ChevronDown, ChevronRight, User } from "lucide-react";
 
-import { progressAria } from "../lib/progress";
-import { Progress } from "../primitives/progress";
-import { FieldError } from "../primitives/field";
+import { progressAria, Progress, FieldError } from "@robomous/ui-core";
 import { refusalProse } from "../data/refusals";
 import { DEFAULT_JOB_VIEW, JobWorkspace, patchView, type JobView } from "./GalleryControls";
 import { annotatedShare } from "./batchState";
diff --git a/frontend/ui-core/src/screens/ModelsScreen.tsx b/frontend/ui-core/src/screens/ModelsScreen.tsx
index 9a74c048..44f6973a 100644
--- a/frontend/ui-core/src/screens/ModelsScreen.tsx
+++ b/frontend/ui-core/src/screens/ModelsScreen.tsx
@@ -159,48 +159,8 @@ import {
   type WeightDownload,
 } 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 { cn, menuSurface, progressAria, twoLineTrigger, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Progress, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Label, FieldDescription, FieldError, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@robomous/ui-core";
 import { ErrorState, LoadingState } from "../patterns/AsyncStates";
-import { Badge } from "../primitives/badge";
-import { Button } from "../primitives/button";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../primitives/card";
-import { Progress } from "../primitives/progress";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from "../primitives/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../primitives/dropdown-menu";
-import { Input } from "../primitives/input";
-import { Label } from "../primitives/label";
-import { FieldDescription, FieldError } from "../primitives/field";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "../primitives/select";
 import {
   CUSTOM_MODEL,
   DEVICES,
diff --git a/frontend/ui-core/src/screens/OverviewPanel.tsx b/frontend/ui-core/src/screens/OverviewPanel.tsx
index 7da4a276..26e1762a 100644
--- a/frontend/ui-core/src/screens/OverviewPanel.tsx
+++ b/frontend/ui-core/src/screens/OverviewPanel.tsx
@@ -46,13 +46,9 @@ 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 { inlineLink, cn, STATUS_INK, Button, Skeleton } from "@robomous/ui-core";
 import { formatCount, formatPercent } from "../lib/format";
 import { EmptyState, ErrorState } from "../patterns/AsyncStates";
-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";
diff --git a/frontend/ui-core/src/screens/PreLabelDialog.tsx b/frontend/ui-core/src/screens/PreLabelDialog.tsx
index b357918b..5710c842 100644
--- a/frontend/ui-core/src/screens/PreLabelDialog.tsx
+++ b/frontend/ui-core/src/screens/PreLabelDialog.tsx
@@ -93,27 +93,7 @@ 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, AlertDescription } from "../primitives/alert";
-import { Badge } from "../primitives/badge";
-import { Button } from "../primitives/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} 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";
+import { Alert, AlertDescription, Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Input, Label, FieldDescription, FieldError, twoLineTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@robomous/ui-core";
 import type { BadgeTone, Segment } from "./batchState";
 import type { KnownMembers } from "../generated/api";
 import { jobKeys, useJobProgress } from "../annotator/jobQueries";
diff --git a/frontend/ui-core/src/screens/PreprocessingTab.tsx b/frontend/ui-core/src/screens/PreprocessingTab.tsx
index c7c8ad35..58de59bf 100644
--- a/frontend/ui-core/src/screens/PreprocessingTab.tsx
+++ b/frontend/ui-core/src/screens/PreprocessingTab.tsx
@@ -39,15 +39,7 @@ 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 {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from "../primitives/dialog";
-import { FieldError } from "../primitives/field";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, FieldError } from "@robomous/ui-core";
 import {
   useActiveSchema,
   useCreatePreprocessingRecipe,
diff --git a/frontend/ui-core/src/screens/ProjectFrame.tsx b/frontend/ui-core/src/screens/ProjectFrame.tsx
index 1ce35667..f458c5d3 100644
--- a/frontend/ui-core/src/screens/ProjectFrame.tsx
+++ b/frontend/ui-core/src/screens/ProjectFrame.tsx
@@ -25,17 +25,7 @@ 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 {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} from "../primitives/dialog";
-import { Input } from "../primitives/input";
-import { Label } from "../primitives/label";
-import { FieldError } from "../primitives/field";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Input, Label, FieldError } from "@robomous/ui-core";
 import {
   useActiveSchema,
   useBatches,
diff --git a/frontend/ui-core/src/screens/ProjectPreLabelDialog.tsx b/frontend/ui-core/src/screens/ProjectPreLabelDialog.tsx
index a121e426..1f927375 100644
--- a/frontend/ui-core/src/screens/ProjectPreLabelDialog.tsx
+++ b/frontend/ui-core/src/screens/ProjectPreLabelDialog.tsx
@@ -20,18 +20,7 @@ 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 { 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 { Label } from "../primitives/label";
-import { FieldError } from "../primitives/field";
+import { inlineLink, Alert, AlertDescription, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Label, FieldError } from "@robomous/ui-core";
 import {
   DEFAULT_CONFIDENCE,
   NO_SHAPES,
diff --git a/frontend/ui-core/src/screens/ProjectScreen.tsx b/frontend/ui-core/src/screens/ProjectScreen.tsx
index 42acff05..3e16f98f 100644
--- a/frontend/ui-core/src/screens/ProjectScreen.tsx
+++ b/frontend/ui-core/src/screens/ProjectScreen.tsx
@@ -73,15 +73,11 @@ import { Async } from "../data/Async";
 import { useApiClient } from "../data/ApiProvider";
 import { asApiError } from "../data/errors";
 import { refusalProse } from "../data/refusals";
-import { inlineLink } from "../lib/button";
-import { cn } from "../lib/cn";
-import { Badge } from "../primitives/badge";
-import { Button } from "../primitives/button";
+import { inlineLink, cn, Badge, Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@robomous/ui-core";
 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 { BatchesScreen } from "./BatchesScreen";
 import { DatasetScreen, type DatasetTab } from "./DatasetScreen";
 import { AssetThumbnail } from "./AssetThumbnail";
diff --git a/frontend/ui-core/src/screens/ProjectsScreen.tsx b/frontend/ui-core/src/screens/ProjectsScreen.tsx
index d327e736..e5ddda22 100644
--- a/frontend/ui-core/src/screens/ProjectsScreen.tsx
+++ b/frontend/ui-core/src/screens/ProjectsScreen.tsx
@@ -29,21 +29,8 @@ import { useState, type FormEvent, type JSX } from "react";
 
 import { Async } from "../data/Async";
 import { refusalProse } from "../data/refusals";
-import { inlineLink } from "../lib/button";
+import { inlineLink, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Input, Textarea, Label, FieldDescription, FieldError, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@robomous/ui-core";
 import { formatWhen } from "../lib/format";
-import { Button } from "../primitives/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogTitle,
-} 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";
 
diff --git a/frontend/ui-core/src/screens/PromoteButton.tsx b/frontend/ui-core/src/screens/PromoteButton.tsx
index 7fa2ca56..a779d80e 100644
--- a/frontend/ui-core/src/screens/PromoteButton.tsx
+++ b/frontend/ui-core/src/screens/PromoteButton.tsx
@@ -48,9 +48,7 @@ import type { JSX } from "react";
 
 import { BATCH_ACTION, declares } from "../data/capabilities";
 import { refusalProse } from "../data/refusals";
-import { inlineLink } from "../lib/button";
-import { Button } from "../primitives/button";
-import { FieldError } from "../primitives/field";
+import { inlineLink, Button, FieldError } from "@robomous/ui-core";
 import { usePromoteBatch, type Batch } from "./queries";
 
 export interface PromoteButtonProps {
diff --git a/frontend/ui-core/src/screens/SchemaEditor.tsx b/frontend/ui-core/src/screens/SchemaEditor.tsx
index 8b198550..1a3312af 100644
--- a/frontend/ui-core/src/screens/SchemaEditor.tsx
+++ b/frontend/ui-core/src/screens/SchemaEditor.tsx
@@ -102,32 +102,11 @@ import { useId, useMemo, useRef, useState, type JSX, type KeyboardEvent } from "
 import { formatGeometries } from "../data/geometryCategory";
 import { asApiError } from "../data/errors";
 import { classBlockers, describeClassCount, refusalProse } from "../data/refusals";
-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 } from "../primitives/input";
-import { Label } from "../primitives/label";
+import { inlineLink, cn, Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardAction, CardContent, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@robomous/ui-core";
 import { ClassFields, swatchOf } from "../patterns/ClassFields";
 import { ClassListRow } from "../patterns/DataDisplay";
 import { formatCount, formatWhen } from "../lib/format";
 import { toast } from "sonner";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../primitives/select";
 import type {
   ClassCount,
   DraftLabelClassBody,
diff --git a/frontend/ui-core/src/screens/SchemaForeshadow.tsx b/frontend/ui-core/src/screens/SchemaForeshadow.tsx
index addaa83d..6b1fba23 100644
--- a/frontend/ui-core/src/screens/SchemaForeshadow.tsx
+++ b/frontend/ui-core/src/screens/SchemaForeshadow.tsx
@@ -21,10 +21,7 @@
 
 import type { JSX } from "react";
 
-import { inlineLink } from "../lib/button";
-import { cn } from "../lib/cn";
-import { Alert, AlertDescription } from "../primitives/alert";
-import { Button } from "../primitives/button";
+import { inlineLink, cn, Alert, AlertDescription, Button } from "@robomous/ui-core";
 import { useProjectReadiness } from "./queries";
 
 export function SchemaForeshadow({
diff --git a/frontend/ui-core/src/screens/batchState.test.ts b/frontend/ui-core/src/screens/batchState.test.ts
index 1fd20766..079f0135 100644
--- a/frontend/ui-core/src/screens/batchState.test.ts
+++ b/frontend/ui-core/src/screens/batchState.test.ts
@@ -33,7 +33,7 @@ import {
   type Segment,
 } from "./batchState";
 import type { AssetProgress } from "../annotator/jobQueries";
-import { TONE_BORDER, TONE_FILL } from "../patterns/statusTone";
+import { TONE_BORDER, TONE_FILL } from "@robomous/ui-core";
 
 /** The domain's six, written out so a seventh fails here first. */
 const STATES: readonly AssetProgress[] = [
diff --git a/frontend/ui-core/src/screens/batchState.ts b/frontend/ui-core/src/screens/batchState.ts
index b3b68b59..e3724d13 100644
--- a/frontend/ui-core/src/screens/batchState.ts
+++ b/frontend/ui-core/src/screens/batchState.ts
@@ -54,7 +54,7 @@
  */
 
 import type { AssetProgress } from "../annotator/jobQueries.js";
-import { TONE_BORDER, TONE_FILL, type StatusTone } from "../patterns/statusTone.js";
+import { TONE_BORDER, TONE_FILL, type StatusTone } from "@robomous/ui-core";
 
 /**
  * The semantic tokens a status may wear, and the whole list of them.
diff --git a/frontend/ui-core/src/screens/gallery.test.tsx b/frontend/ui-core/src/screens/gallery.test.tsx
index 54c82f34..6f0b712d 100644
--- a/frontend/ui-core/src/screens/gallery.test.tsx
+++ b/frontend/ui-core/src/screens/gallery.test.tsx
@@ -37,7 +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";
+import { TONE_BORDER, TONE_FILL } from "@robomous/ui-core";
 
 type BatchState = components["schemas"]["BatchState"];
 type JobState = components["schemas"]["AnnotationJobState"];
diff --git a/frontend/ui-core/src/screens/ingestScale.tsx b/frontend/ui-core/src/screens/ingestScale.tsx
index f573fc91..62462796 100644
--- a/frontend/ui-core/src/screens/ingestScale.tsx
+++ b/frontend/ui-core/src/screens/ingestScale.tsx
@@ -1,6 +1,6 @@
 import type { JSX } from "react";
 
-import { Label } from "../primitives/label";
+import { Label } from "@robomous/ui-core";
 
 /**
  * The server's scaled-dimension formula, mirrored exactly.
diff --git a/frontend/ui-core/src/screens/schemaDraft.test.tsx b/frontend/ui-core/src/screens/schemaDraft.test.tsx
index ed2ebcc8..195cc022 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/sonner";
+import { Toaster } from "@robomous/ui-core";
 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 3137e212..06689af8 100644
--- a/frontend/ui-core/src/styles.css
+++ b/frontend/ui-core/src/styles.css
@@ -1,75 +1,27 @@
 /*
- * @visionset/ui-core — the design system's stylesheet.
+ * @visionset/ui-core — VisionSet's extensions over the Robomous design system.
  *
- * This is the shadcn preset `b2iH` (style `nova` on the Radix base, base colour
- * `neutral`, chart palette `neutral`, icons `lucide`, Geist throughout with the
- * 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 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
- * inline`. `src/tokens.ts` is the TypeScript mirror of this file and
- * `tokens.test.ts` asserts the two agree, declaration for declaration.
- *
- * A consuming app imports exactly this:
+ * The foundation stylesheet (the shadcn preset plus `brand`) is
+ * `@robomous/ui-core/styles.css`, imported first. Declared here is only what
+ * is VisionSet's own, each following shadcn's extension convention — a value
+ * in `:root`, a dark counterpart in `.dark`, exposure through `@theme inline`
+ * — plus the shell's layout widths. `src/tokens.ts` mirrors the colour
+ * extensions and `tokens.test.ts` asserts the two agree. A consuming app
+ * still imports exactly this file:
  *
  *     import "@visionset/ui-core/styles.css";
  *
- * and adds an `@source` for its own sources. Tailwind v4 is CSS-first: there
- * is no `tailwind.config.js` anywhere in this repository and there must not
- * be one, or the tokens acquire a second home.
+ * There is no `tailwind.config.js` anywhere in this repository and there must
+ * not be one, or the tokens acquire a second home.
  */
 
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
+@import "@robomous/ui-core/styles.css";
 
-/*
- * The package's own components, so a class string that only ever appears
- * inside `ui-core` still produces CSS in the consumer's build. Relative to
- * this file, which is what `@source` takes.
- */
+/* This package's own components, so a class string that only ever appears
+   inside `ui-core` still produces CSS in the consumer's build. */
 @source ".";
 
-@custom-variant dark (&:is(.dark *));
-
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --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);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-
   /*
    * The stage a picture sits on: the annotator's surround. Its own role —
    * not `muted`'s subtle fill, not `card`'s surface — the neutral a
@@ -77,19 +29,11 @@
    * an asset with white borders still shows where it ends.
    */
   --stage: oklch(0.94 0 0);
-  /*
-   * Robomous coral. Identity only — the wordmark and its styleguide swatch,
-   * named in `DESIGN.md` — never a functional-UI colour. A third site
-   * is a design decision, not a styling one.
-   */
-  --brand: oklch(0.653 0.178 32.3);
   /*
    * 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
-   * surface or ink — a few pixels of colour on the plain card — and never
-   * status: an origin is a kind, not a state. Identical in both themes, like
-   * the chart palette, because a mark this small must read the same wherever
-   * the card is.
+   * surface or ink — and never status: an origin is a kind, not a state.
+   * Identical in both themes, like the chart palette.
    */
   --origin-hub: oklch(0.8 0.16 85);
   --origin-custom: oklch(0.65 0.15 250);
@@ -97,90 +41,15 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --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);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-
   --stage: oklch(0.24 0 0);
-  --brand: oklch(0.653 0.178 32.3);
   --origin-hub: oklch(0.8 0.16 85);
   --origin-custom: oklch(0.65 0.15 250);
   --origin-robomous: oklch(0.68 0.17 35);
 }
 
 @theme inline {
-  --font-sans: 'Geist Variable', sans-serif;
-  --font-heading: var(--font-sans);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-
   /* VisionSet's extensions, exposed the same way as every preset colour. */
   --color-stage: var(--stage);
-  --color-brand: var(--brand);
   --color-origin-hub: var(--origin-hub);
   --color-origin-custom: var(--origin-custom);
   --color-origin-robomous: var(--origin-robomous);
@@ -193,49 +62,6 @@
   --container-page: 96rem;
 }
 
-@layer base {
-  /* 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.
-     Nothing here may declare focus geometry again: one blanket declaration in
-     this layer is how thirteen components' rings got overridden at once. */
-  * {
-    @apply border-border outline-ring/50;
-  }
-  /* Motion is opt-out for vestibular safety: under prefers-reduced-motion every
-     animation and transition collapses to a frame. Information is never
-     motion-only (DESIGN.md §Accessibility), so nothing is lost. */
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    ::before,
-    ::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  /* The preset's pointer option. Scoped to what is actually pressable and away
-     from what is not: a disabled control keeps the arrow, because a hand over
-     something that will not respond is the cursor telling a lie. */
-  button:not(:disabled), [role="button"]:not(:disabled) {
-    cursor: pointer;
-  }
-  html {
-    @apply font-sans;
-  }
-  /* One family now: the preset sets `--font-heading` to `--font-sans`, so this
-     rule keeps the semantic hook without changing the face. A later preset that
-     splits them again lands here without a diff at every heading. */
-  h1, h2, h3, h4 {
-    @apply font-heading;
-  }
-}
-
 /* The ingest preview player is always muted — a vision dataset has no use for
    the audio track — so the volume controls are dead weight. Only the WebKit
    engines expose the pseudo-elements; elsewhere the player is merely muted. */
diff --git a/frontend/ui-core/src/tokens.test.ts b/frontend/ui-core/src/tokens.test.ts
index 93fd7be7..3cdf4ef2 100644
--- a/frontend/ui-core/src/tokens.test.ts
+++ b/frontend/ui-core/src/tokens.test.ts
@@ -1,307 +1,69 @@
 /**
  * @vitest-environment node
  *
- * 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`, 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
- * back in.
- *
- * The CSS is parsed rather than imported — same reason as before: vitest's
- * jsdom does not evaluate `@theme`, and `import.meta.url` under jsdom is an
- * `http://localhost/` URL that `fileURLToPath` rejects. Hence `node` above.
+ * The consumer half of the token gate. The foundation's own agreement suite
+ * runs in Robomous/ui-core; asserted here is VisionSet's extension layer:
+ * `styles.css` declares exactly the `EXTENSIONS`, their values match the
+ * token module in both themes, no extension shadows a foundation name, and
+ * the merged view loses nothing.
  */
-
 import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 
+import { blockBody, declarations, foundationTokenNames, rawDeclarations } from "@robomous/ui-core/gates";
 import { describe, expect, it } from "vitest";
 
-import { cssVar, DARK_THEME, EXTENSIONS, LIGHT_THEME, THEME } from "./tokens";
+import { DARK_THEME, EXTENSION_DARK, EXTENSION_LIGHT, EXTENSIONS, LIGHT_THEME } from "./tokens";
 
 const STYLESHEET = readFileSync(fileURLToPath(new URL("./styles.css", import.meta.url)), "utf8");
 
-/** Whitespace is presentation; a value that wraps is the same value. */
-function normalize(value: string): string {
-  return value.replace(/\s+/g, " ").trim();
-}
-
-/**
- * The `{ … }` body belonging to the block whose header (e.g. `:root {` or
- * `.dark {`) appears first in the file, matched by brace depth rather than by
- * the next `\n}` so a nested `calc(...)` or `color-mix(...)` cannot fool it.
- */
-function blockBody(css: string, header: string): string {
-  const headerAt = css.indexOf(header);
-  expect(headerAt, `styles.css has no ${JSON.stringify(header)} block`).toBeGreaterThan(-1);
-  const braceAt = css.indexOf("{", headerAt);
-  let depth = 1;
-  let i = braceAt + 1;
-  while (depth > 0 && i < css.length) {
-    if (css[i] === "{") depth++;
-    else if (css[i] === "}") depth--;
-    i++;
-  }
-  return css.slice(braceAt + 1, i - 1);
-}
-
-/** Every `--name: value;` declaration in a block, keyed WITH the leading `--`. */
-function rawDeclarations(block: string): Map<string, string> {
-  const map = new Map<string, string>();
-  for (const match of block.matchAll(/(--[\w-]+):\s*([^;]+);/g)) {
-    map.set(match[1], normalize(match[2]));
-  }
-  return map;
-}
-
-/** The same, keyed WITHOUT the leading `--` — the shape `LIGHT_THEME` uses. */
-function declarations(block: string): Map<string, string> {
-  const map = new Map<string, string>();
-  for (const [name, value] of rawDeclarations(block)) {
-    map.set(name.slice(2), value);
-  }
-  return map;
-}
-
-// The shadcn standard vocabulary, exactly as the CLI 4.18.0 scratch emitted
-// it — not derived from `tokens.ts`, so a mistake in the mirror cannot also
-// erase the thing it was supposed to mirror.
-const CHART_NAMES = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
-const SIDEBAR_NAMES = [
-  "sidebar",
-  "sidebar-foreground",
-  "sidebar-primary",
-  "sidebar-primary-foreground",
-  "sidebar-accent",
-  "sidebar-accent-foreground",
-  "sidebar-border",
-  "sidebar-ring",
-];
-const BASE_SEMANTIC_NAMES = [
-  "background",
-  "foreground",
-  "card",
-  "card-foreground",
-  "popover",
-  "popover-foreground",
-  "primary",
-  "primary-foreground",
-  "secondary",
-  "secondary-foreground",
-  "muted",
-  "muted-foreground",
-  "accent",
-  "accent-foreground",
-  "destructive",
-  "border",
-  "input",
-  "ring",
-];
-const SEMANTIC_NAMES = [...BASE_SEMANTIC_NAMES, ...CHART_NAMES, ...SIDEBAR_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",
-  "origin-hub",
-  "origin-custom",
-  "origin-robomous",
-];
-
-const ORANGE_CHART = {
-  "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)",
-} as const;
-
-describe("EXTENSIONS", () => {
-  it("names exactly the five extension variables, in the order tokens.ts declares them", () => {
-    expect(EXTENSIONS).toEqual(EXTENSION_NAMES);
-  });
-});
-
-describe(":root", () => {
+describe("extension declarations", () => {
   const root = declarations(blockBody(STYLESHEET, ":root {"));
-
-  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(),
-    );
-  });
-
-  it("matches LIGHT_THEME's value for every name it declares", () => {
-    for (const [name, value] of root) {
-      if (name === "radius") continue;
-      expect(LIGHT_THEME[name], `LIGHT_THEME is missing ${name}`).toBe(value);
-    }
-  });
-
-  it("names no variable LIGHT_THEME does not also carry", () => {
-    const lightKeys = Object.keys(LIGHT_THEME).sort();
-    const rootKeys = [...root.keys()].filter((name) => name !== "radius").sort();
-    expect(lightKeys).toEqual(rootKeys);
-  });
-
-  it("pins --radius to the preset's medium step, in both the CSS and THEME", () => {
-    expect(root.get("radius")).toBe("0.625rem");
-    expect(THEME.radius).toBe("0.625rem");
-  });
-
-  it("pins the neutral chart palette exactly", () => {
-    for (const [name, value] of Object.entries(ORANGE_CHART)) {
-      expect(root.get(name)).toBe(value);
-    }
-  });
-});
-
-describe(".dark", () => {
   const dark = declarations(blockBody(STYLESHEET, ".dark {"));
 
-  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());
+  it(":root declares exactly the extensions, with EXTENSION_LIGHT's values", () => {
+    expect([...root.keys()].sort()).toEqual([...EXTENSIONS].sort());
+    for (const [name, value] of root) expect(EXTENSION_LIGHT[name]).toBe(value);
   });
 
-  it("matches DARK_THEME's value for every name it declares", () => {
-    for (const [name, value] of dark) {
-      expect(DARK_THEME[name], `DARK_THEME is missing ${name}`).toBe(value);
-    }
+  it(".dark declares exactly the extensions, with EXTENSION_DARK's values", () => {
+    expect([...dark.keys()].sort()).toEqual([...EXTENSIONS].sort());
+    for (const [name, value] of dark) expect(EXTENSION_DARK[name]).toBe(value);
   });
 
-  it("names no variable DARK_THEME does not also carry", () => {
-    expect(Object.keys(DARK_THEME).sort()).toEqual([...dark.keys()].sort());
-  });
-
-  it("pins the neutral chart palette exactly, unchanged from light", () => {
-    for (const [name, value] of Object.entries(ORANGE_CHART)) {
-      expect(dark.get(name)).toBe(value);
-    }
-  });
-});
-
-describe("@theme inline", () => {
-  const inline = rawDeclarations(blockBody(STYLESHEET, "@theme inline {"));
-
-  it("exposes --color-<name>: var(--<name>) for every semantic and extension name", () => {
-    for (const name of [...SEMANTIC_NAMES, ...EXTENSION_NAMES]) {
-      expect(inline.get(`--color-${name}`), `@theme inline is missing --color-${name}`).toBe(
-        `var(--${name})`,
-      );
-    }
-  });
-
-  it("declares the two font variables from THEME", () => {
-    expect(inline.get("--font-sans")).toBe(normalize(THEME.fontSans));
-    expect(inline.get("--font-heading")).toBe(normalize(THEME.fontHeading));
-  });
-
-  it("derives all seven radius steps from --radius, verbatim", () => {
-    expect(inline.get("--radius-sm")).toBe("calc(var(--radius) * 0.6)");
-    expect(inline.get("--radius-md")).toBe("calc(var(--radius) * 0.8)");
-    expect(inline.get("--radius-lg")).toBe("var(--radius)");
-    expect(inline.get("--radius-xl")).toBe("calc(var(--radius) * 1.4)");
-    expect(inline.get("--radius-2xl")).toBe("calc(var(--radius) * 1.8)");
-    expect(inline.get("--radius-3xl")).toBe("calc(var(--radius) * 2.2)");
-    expect(inline.get("--radius-4xl")).toBe("calc(var(--radius) * 2.6)");
-  });
-
-  it("carries the sidebar rail's two layout widths, the project column's, and the page's cap", () => {
+  it("@theme inline exposes every extension and the shell's layout widths, and nothing else", () => {
+    const inline = rawDeclarations(blockBody(STYLESHEET, "@theme inline {"));
+    for (const name of EXTENSIONS) expect(inline.get(`--color-${name}`)).toBe(`var(--${name})`);
     expect(inline.get("--spacing-sidebar")).toBe("240px");
     expect(inline.get("--spacing-sidebar-collapsed")).toBe("48px");
     expect(inline.get("--spacing-project-nav")).toBe("180px");
     expect(inline.get("--container-page")).toBe("96rem");
+    expect(inline.size).toBe(EXTENSIONS.length + 4);
   });
 });
 
-/**
- * The four `--text-*` custom properties this rewrite retired (Task 2 moved
- * their consumers onto Tailwind's standard scale: xs/sm/base/2xl). Assembled
- * from fragments — the same trick `tests/scripts/design_tokens.test.mjs`'s
- * `HEX` uses — so this guard's own source never spells any retired name as a
- * contiguous string and cannot trip the repo-wide sweep that proves the
- * migration complete everywhere else.
- */
-const RETIRED_TEXT_SCALE_SUFFIXES = ["meta", "body", "section", "page"];
-const RETIRED_TEXT_SCALE = RETIRED_TEXT_SCALE_SUFFIXES.map((name) => `--text-${name}`);
-
-describe("legacy tokens", () => {
-  it("removes every v1 name this rewrite retired from the whole stylesheet", () => {
-    const retired = [
-      "--color-primary-hover",
-      "--color-disabled",
-      "--color-disabled-foreground",
-      "--color-success-hover",
-      "--color-destructive-foreground",
-      "--color-sidebar-strong",
-      "--color-sidebar-muted",
-      ...RETIRED_TEXT_SCALE,
-      "--spacing-sidebar-mobile",
-    ];
-    const present = retired.filter((name) => STYLESHEET.includes(name));
-    expect(present, `styles.css still names: ${present.join(", ")}`).toEqual([]);
-  });
-});
-
-describe("structure", () => {
-  it("declares the dark variant and the four imports, in order", () => {
-    const anchors = [
-      '@import "tailwindcss";',
-      '@import "tw-animate-css";',
-      '@import "shadcn/tailwind.css";',
-      // One family, so one font import: `b2iH` sets the heading face to the body's
-      // rather than naming a second one.
-      '@import "@fontsource-variable/geist";',
-      "@custom-variant dark (&:is(.dark *));",
-    ];
-    let cursor = -1;
-    for (const anchor of anchors) {
-      const at = STYLESHEET.indexOf(anchor);
-      expect(at, `styles.css is missing ${JSON.stringify(anchor)}`).toBeGreaterThan(-1);
-      expect(at, `${JSON.stringify(anchor)} is out of order`).toBeGreaterThan(cursor);
-      cursor = at;
-    }
+describe("foundation boundary", () => {
+  it("no extension shadows a foundation token name", () => {
+    const foundation = new Set(foundationTokenNames());
+    expect(EXTENSIONS.filter((name) => foundation.has(name))).toEqual([]);
   });
 
-  it("reaches its own package's classes: @source after the imports", () => {
-    const sourceAt = STYLESHEET.indexOf('@source ".";');
-    const lastImportAt = STYLESHEET.lastIndexOf("@import");
-    expect(sourceAt, "styles.css has no @source \".\";").toBeGreaterThan(-1);
-    expect(sourceAt).toBeGreaterThan(lastImportAt);
+  it("the merged view is the foundation plus exactly the extensions — the split lost nothing", () => {
+    const merged = [...foundationTokenNames(), ...EXTENSIONS].sort();
+    expect(Object.keys(LIGHT_THEME).sort()).toEqual(merged);
+    expect(Object.keys(DARK_THEME).sort()).toEqual(merged);
   });
 
-  it("applies the base-layer ring/border rule shadcn ships", () => {
-    expect(/\*\s*\{\s*@apply border-border outline-ring\/50;\s*\}/.test(STYLESHEET)).toBe(true);
-  });
-
-  /**
-   * The `*` rule above names the outline *colour* and nothing else about focus.
-   * The geometry is the primitives': every focusable one carries Nova's
-   * `focus-visible:ring-3 focus-visible:ring-ring/50` (the tab bar adds a 1px
-   * `outline-ring` on top of it), so a stylesheet-level `:focus-visible`
-   * override would now fight the components instead of backing them up.
-   *
-   * Asserted as an absence, because the absence is what the migration bought:
-   * re-adding a blanket rule here is how a single global declaration would
-   * quietly start overriding thirteen components again.
-   */
-  it("leaves focus geometry to the primitives: no stylesheet-level :focus-visible rule", () => {
-    expect(STYLESHEET).not.toContain(":focus-visible");
-  });
-
-  it("applies the heading font at the semantic-HTML level", () => {
-    expect(/h1,\s*h2,\s*h3,\s*h4\s*\{\s*@apply font-heading;\s*\}/.test(STYLESHEET)).toBe(true);
+  it("brand stayed in the foundation", () => {
+    expect(LIGHT_THEME.brand).toBe("oklch(0.653 0.178 32.3)");
   });
 });
 
-describe("cssVar", () => {
-  it("wraps a bare token name as a CSS var() reference", () => {
-    expect(cssVar("popover")).toBe("var(--popover)");
-    expect(cssVar("brand")).toBe("var(--brand)");
+describe("structure", () => {
+  it("imports the foundation stylesheet first, then reaches its own sources", () => {
+    const importAt = STYLESHEET.indexOf('@import "@robomous/ui-core/styles.css";');
+    const sourceAt = STYLESHEET.indexOf('@source ".";');
+    expect(importAt).toBeGreaterThan(-1);
+    expect(sourceAt).toBeGreaterThan(importAt);
   });
 });
diff --git a/frontend/ui-core/src/tokens.ts b/frontend/ui-core/src/tokens.ts
index 5313253b..c3d160cc 100644
--- a/frontend/ui-core/src/tokens.ts
+++ b/frontend/ui-core/src/tokens.ts
@@ -1,125 +1,48 @@
 /**
- * The design tokens, as TypeScript.
+ * VisionSet's design-token extensions, layered over `@robomous/ui-core`.
  *
- * `styles.css` is the one that *runs* — Tailwind reads its `:root`, `.dark`
- * and `@theme inline` blocks and every utility in the package comes out of
- * them. This module exists for the two kinds of caller that cannot read CSS:
- * a `<canvas>`/`<svg>` that needs a colour as a string, and `tokens.test.ts`,
- * which parses the stylesheet and asserts the two agree, declaration for
- * declaration.
- *
- * `LIGHT_THEME`/`DARK_THEME` are the shadcn preset (`b2iH` — style
- * `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), and the three `origin-*` marks a Models card's accent edge
- * takes. Everything else is shadcn's own vocabulary.
+ * The foundation (shadcn preset + `brand`) lives in the package; VisionSet
+ * keeps `stage` (the annotator's surround) and the three `origin-*` marks a
+ * Models card's accent edge takes. `styles.css` here declares them following
+ * shadcn's own extension convention, and `tokens.test.ts` asserts the two
+ * agree, declaration for declaration. `LIGHT_THEME`/`DARK_THEME` re-export
+ * the *merged* view so a caller reading `LIGHT_THEME.stage` — the styleguide's
+ * swatch captions — keeps working unchanged.
  */
+import {
+  DARK_THEME as FOUNDATION_DARK,
+  LIGHT_THEME as FOUNDATION_LIGHT,
+} from "@robomous/ui-core";
 
-export const LIGHT_THEME: Readonly<Record<string, string>> = Object.freeze({
-  background: "oklch(1 0 0)",
-  foreground: "oklch(0.145 0 0)",
-  card: "oklch(1 0 0)",
-  "card-foreground": "oklch(0.145 0 0)",
-  popover: "oklch(1 0 0)",
-  "popover-foreground": "oklch(0.145 0 0)",
-  primary: "oklch(0.205 0 0)",
-  "primary-foreground": "oklch(0.985 0 0)",
-  secondary: "oklch(0.97 0 0)",
-  "secondary-foreground": "oklch(0.205 0 0)",
-  muted: "oklch(0.97 0 0)",
-  "muted-foreground": "oklch(0.556 0 0)",
-  accent: "oklch(0.97 0 0)",
-  "accent-foreground": "oklch(0.205 0 0)",
-  destructive: "oklch(0.577 0.245 27.325)",
-  border: "oklch(0.922 0 0)",
-  input: "oklch(0.922 0 0)",
-  ring: "oklch(0.708 0 0)",
-  "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)",
-  sidebar: "oklch(0.985 0 0)",
-  "sidebar-foreground": "oklch(0.145 0 0)",
-  "sidebar-primary": "oklch(0.205 0 0)",
-  "sidebar-primary-foreground": "oklch(0.985 0 0)",
-  "sidebar-accent": "oklch(0.97 0 0)",
-  "sidebar-accent-foreground": "oklch(0.205 0 0)",
-  "sidebar-border": "oklch(0.922 0 0)",
-  "sidebar-ring": "oklch(0.708 0 0)",
+/** The variable names VisionSet keeps beyond the foundation's vocabulary. */
+export const EXTENSIONS = [
+  "stage",
+  "origin-hub",
+  "origin-custom",
+  "origin-robomous",
+] as const;
 
+export const EXTENSION_LIGHT: Readonly<Record<string, string>> = Object.freeze({
   // The annotator's surround — the neutral a photograph is judged against.
-  // Distinguishable from `background` in both themes, so a white asset edge
-  // still shows where it ends.
   stage: "oklch(0.94 0 0)",
-  // Robomous coral. Identity only — the wordmark and its styleguide swatch
-  // — never a functional-UI colour.
-  brand: "oklch(0.653 0.178 32.3)",
-  // 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.
+  // Where a model's weights come from, as a card's accent edge. Theme-stable.
   "origin-hub": "oklch(0.8 0.16 85)",
   "origin-custom": "oklch(0.65 0.15 250)",
   "origin-robomous": "oklch(0.68 0.17 35)",
 });
 
-export const DARK_THEME: Readonly<Record<string, string>> = Object.freeze({
-  background: "oklch(0.145 0 0)",
-  foreground: "oklch(0.985 0 0)",
-  card: "oklch(0.205 0 0)",
-  "card-foreground": "oklch(0.985 0 0)",
-  popover: "oklch(0.205 0 0)",
-  "popover-foreground": "oklch(0.985 0 0)",
-  primary: "oklch(0.922 0 0)",
-  "primary-foreground": "oklch(0.205 0 0)",
-  secondary: "oklch(0.269 0 0)",
-  "secondary-foreground": "oklch(0.985 0 0)",
-  muted: "oklch(0.269 0 0)",
-  "muted-foreground": "oklch(0.708 0 0)",
-  accent: "oklch(0.269 0 0)",
-  "accent-foreground": "oklch(0.985 0 0)",
-  destructive: "oklch(0.704 0.191 22.216)",
-  border: "oklch(1 0 0 / 10%)",
-  input: "oklch(1 0 0 / 15%)",
-  ring: "oklch(0.556 0 0)",
-  "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)",
-  sidebar: "oklch(0.205 0 0)",
-  "sidebar-foreground": "oklch(0.985 0 0)",
-  "sidebar-primary": "oklch(0.488 0.243 264.376)",
-  "sidebar-primary-foreground": "oklch(0.985 0 0)",
-  "sidebar-accent": "oklch(0.269 0 0)",
-  "sidebar-accent-foreground": "oklch(0.985 0 0)",
-  "sidebar-border": "oklch(1 0 0 / 10%)",
-  "sidebar-ring": "oklch(0.556 0 0)",
-
+export const EXTENSION_DARK: Readonly<Record<string, string>> = Object.freeze({
   stage: "oklch(0.24 0 0)",
-  brand: "oklch(0.653 0.178 32.3)",
   "origin-hub": "oklch(0.8 0.16 85)",
   "origin-custom": "oklch(0.65 0.15 250)",
   "origin-robomous": "oklch(0.68 0.17 35)",
 });
 
-/** The two provenance facts a colour string alone cannot carry. */
-export const THEME = {
-  radius: "0.625rem",
-  fontSans: "'Geist Variable', sans-serif",
-  fontHeading: "var(--font-sans)",
-} as const;
-
-/** The five variable names VisionSet keeps beyond shadcn's own vocabulary. */
-export const EXTENSIONS = [
-  "stage",
-  "brand",
-  "origin-hub",
-  "origin-custom",
-  "origin-robomous",
-] as const;
-
-/** `cssVar("popover")` → `"var(--popover)"` — for a runtime caller that needs a string. */
-export function cssVar(name: string): string {
-  return `var(--${name})`;
-}
+export const LIGHT_THEME: Readonly<Record<string, string>> = Object.freeze({
+  ...FOUNDATION_LIGHT,
+  ...EXTENSION_LIGHT,
+});
+export const DARK_THEME: Readonly<Record<string, string>> = Object.freeze({
+  ...FOUNDATION_DARK,
+  ...EXTENSION_DARK,
+});
diff --git a/package.json b/package.json
index ae08840f..790c9366 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     }
   },
   "devDependencies": {
+    "@robomous/ui-core": "^0.1.0",
     "openapi-typescript": "7.13.0",
     "typescript": "^6.0.3"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d2e09d6..fd04cada 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
 
   .:
     devDependencies:
+      '@robomous/ui-core':
+        specifier: ^0.1.0
+        version: 0.1.0(@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)(tailwindcss@4.3.3)(typescript@6.0.3)
       openapi-typescript:
         specifier: 7.13.0
         version: 7.13.0(typescript@6.0.3)
@@ -123,12 +126,9 @@ 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
+      '@robomous/ui-core':
+        specifier: ^0.1.0
+        version: 0.1.0(@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)(tailwindcss@4.3.3)(typescript@6.0.3)
       '@tanstack/react-query':
         specifier: ^5.101.4
         version: 5.101.4(react@19.2.8)
@@ -141,30 +141,15 @@ importers:
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
       lucide-react:
         specifier: ^1.32.0
         version: 1.33.0(react@19.2.8)
       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)
       sonner:
         specifier: ^2.0.8
         version: 2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      tailwind-merge:
-        specifier: ^3.6.0
-        version: 3.6.0
-      tw-animate-css:
-        specifier: ^1.4.0
-        version: 1.4.0
     devDependencies:
       '@eslint/js':
         specifier: ^10.0.1
@@ -1438,6 +1423,13 @@ packages:
     resolution: {integrity: sha512-UyKIm0wTPw5BcY7Z2PkbK1Ma260um96LSBWXHrdSMe+ZV0EPMyDfAcUcjjm3qEiGST9OK/1TriekdPCZkn4Q3A==}
     engines: {node: '>=18.17.0', npm: '>=9.5.0'}
 
+  '@robomous/ui-core@0.1.0':
+    resolution: {integrity: sha512-aZXQR8zyjv3NpOw1+H1aPF7P33pWa7s9j97Jsa0RHNZi6G5OtO5+YjaPKn/s7eJ9/M7mAAWB+IP8X6J4vyXM+g==}
+    peerDependencies:
+      react: '>=19'
+      react-dom: '>=19'
+      tailwindcss: '>=4'
+
   '@rolldown/binding-android-arm-eabi@1.2.5':
     resolution: {integrity: sha512-DLe/i+l8ynIBY7XEQ191TeZvCoowIGa18R+dIV30GW7DiOtp74i/xX8hs8GUjW5ARV7VZuie3d6AumSmCwbeRA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -5016,6 +5008,31 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@robomous/ui-core@0.1.0(@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)(tailwindcss@4.3.3)(typescript@6.0.3)':
+    dependencies:
+      '@base-ui/react': 1.7.0(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@fontsource-variable/geist': 5.3.0
+      class-variance-authority: 0.7.1
+      clsx: 2.1.1
+      lucide-react: 1.33.0(react@19.2.8)
+      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)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      shadcn: 4.19.0(typescript@6.0.3)
+      sonner: 2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tailwind-merge: 3.6.0
+      tailwindcss: 4.3.3
+      tw-animate-css: 1.4.0
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@date-fns/tz'
+      - '@types/react'
+      - '@types/react-dom'
+      - babel-plugin-macros
+      - date-fns
+      - supports-color
+      - typescript
+
   '@rolldown/binding-android-arm-eabi@1.2.5':
     optional: true
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e31164ee..fbfbe456 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -25,4 +25,7 @@ minimumReleaseAge: 4320
 # Packages allowed to skip the wait. Empty, and a new entry should say why in the
 # commit that adds it — an exclusion with no stated reason is a cool-down quietly
 # switched off for one package.
-minimumReleaseAgeExclude: []
+minimumReleaseAgeExclude:
+  # First-party package, released from our own CI minutes before it is
+  # consumed here — the supply-chain cool-down guards third-party releases.
+  - "@robomous/ui-core"
diff --git a/scripts/shadcn_add.sh b/scripts/shadcn_add.sh
deleted file mode 100644
index f8ac87e9..00000000
--- a/scripts/shadcn_add.sh
+++ /dev/null
@@ -1,13 +0,0 @@
-#!/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
deleted file mode 100644
index caa0f245..00000000
--- a/scripts/shadcn_relativize.mjs
+++ /dev/null
@@ -1,16 +0,0 @@
-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_system.test.mjs b/tests/scripts/design_system.test.mjs
new file mode 100644
index 00000000..9eaa3668
--- /dev/null
+++ b/tests/scripts/design_system.test.mjs
@@ -0,0 +1,64 @@
+/**
+ * The consumer half of the design-system gates. The canonical and roster
+ * gates travelled to Robomous/ui-core with the primitives; what a consumer
+ * still owes is vocabulary discipline over its OWN sources: no retired
+ * shapes, no status colour outside the packaged Badge/statusTone, no rival
+ * palette, no retired token utilities, and menuSurface on every menu.
+ * The helpers come from @robomous/ui-core/gates — one spelling, versioned
+ * with the primitives they describe.
+ */
+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";
+
+import {
+  competingStatusPaletteIn,
+  legacyVocabularyIn,
+  menuSurfaceGapsIn,
+  statusPaletteIn,
+  statusTokenUtilitiesIn,
+} from "@robomous/ui-core/gates";
+
+const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "..");
+const SOURCE = /\.(?:ts|tsx|css)$/;
+const GENERATED = /^frontend\/ui-core\/src\/generated\//;
+
+/** Every tracked `frontend` source, minus the generated client. */
+function frontendSources() {
+  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));
+}
+
+const scan = (fn) =>
+  frontendSources().flatMap((file) => fn(file, readFileSync(path.join(REPO, file), "utf8")));
+
+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 sources, so it proves nothing");
+  const offenders = scan(legacyVocabularyIn);
+  assert.deepEqual(offenders, [], `retired vocabulary:\n${offenders.join("\n")}`);
+});
+
+test("the status palette has no home in this repo — read the tone from @robomous/ui-core's statusTone", () => {
+  const offenders = scan(statusPaletteIn);
+  assert.deepEqual(offenders, [], `status palette outside the package:\n${offenders.join("\n")}`);
+});
+
+test("no competing colour family stands in for the status palette", () => {
+  const offenders = scan(competingStatusPaletteIn);
+  assert.deepEqual(offenders, [], `competing palette:\n${offenders.join("\n")}`);
+});
+
+test("no source reaches for the retired success/warning token utility", () => {
+  const offenders = scan(statusTokenUtilitiesIn);
+  assert.deepEqual(offenders, [], `retired token utility:\n${offenders.join("\n")}`);
+});
+
+test("every DropdownMenuContent call site carries menuSurface", () => {
+  const offenders = scan(menuSurfaceGapsIn);
+  assert.deepEqual(offenders, [], `menuSurface missing:\n${offenders.join("\n")}`);
+});
diff --git a/tests/scripts/design_tokens.test.mjs b/tests/scripts/design_tokens.test.mjs
index a546134d..0c3b5b6b 100644
--- a/tests/scripts/design_tokens.test.mjs
+++ b/tests/scripts/design_tokens.test.mjs
@@ -2,32 +2,17 @@
  * `DESIGN.md`'s first principle, machine-enforced: **never a colour in a class
  * string.**
  *
- * v1 spent its life migrating away from hardcoded colours and never finished;
- * VisionSet starts clean, so the rule gets a gate on the day the design system
- * lands rather than a migration later. The design system asks for
- * exactly this, "lintable or greppable", and this is the greppable half.
+ * The scan helpers live in `@robomous/ui-core/gates` now — one spelling,
+ * versioned with the primitives they describe, with their fabricated-input
+ * self-tests running in that repo. What this file keeps is the repo scans
+ * over VisionSet's own tracked sources: the coloured-classes sweep, the
+ * brand-sites gate, the retired-declarations check on the extension
+ * stylesheet, the one-icon-set rule, and the tailwind-config refusal.
  *
- * ## What it looks for, and why that is the whole rule
- *
- * In Tailwind there is exactly one way to put a raw colour into a class: the
- * arbitrary-value bracket — `bg-[#eb5a47]`, `text-[var(--accent)]`,
- * `border-[rgb(0_0_0)]`. Every other colour in a class name is a token utility by
- * construction, because Tailwind only generates the utilities `@theme` declares.
- * So the scan is for that bracket, and it is precise rather than heuristic: it has
- * no opinion about `style={{ background: … }}`, which is a different thing and is
- * legitimately how a *schema-supplied* colour reaches the screen (`classColor`'s
- * answer cannot be a utility — Tailwind has never seen it).
- *
- * ## And no second home for the tokens
- *
- * Tailwind v4 is CSS-first. A `tailwind.config.js` appearing anywhere would give
- * the tokens a second definition that silently wins for some utilities and not
- * others, which is worse than either file alone. The second test refuses one.
- *
- * The bargain is `annotator_boundary.test.mjs`'s: the rule is a pure function, so
- * this file can prove it fires while containing no violation itself. 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.
+ * The bargain is `annotator_boundary.test.mjs`'s: the rules are pure
+ * functions, proven with fabricated input where they live. These scans read
+ * `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.
  */
 
 import assert from "node:assert/strict";
@@ -37,130 +22,14 @@ import { spawnSync } from "node:child_process";
 import { fileURLToPath } from "node:url";
 import { test } from "node:test";
 
+import { brandUsagesIn, colouredClassesIn, retiredDeclarationsIn } from "@robomous/ui-core/gates";
+
 const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "..");
 
-/**
- * A Tailwind arbitrary value whose content is a colour.
- *
- * Assembled from fragments so this file does not match itself, the trick its two
- * neighbours already use. The `-` before the bracket is what makes it a *utility*
- * rather than an array index or a TypeScript tuple type.
- */
-const HEX = ["#", "[0-9a-fA-F]{3,8}"].join("");
-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.
 const GENERATED = /^frontend\/ui-core\/src\/generated\//;
 
-/** Every `file:line` in `text` that puts a colour inside a Tailwind class. */
-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) || (BRACKET_MIX.test(line) && !ALLOWED_MIX.test(line))),
-    )
-    .map(({ line, at }) => `${file}:${at}: ${line.trim()}`);
-}
-
-test("the scan finds a colour smuggled into a class, and nothing that merely looks like one", () => {
-  assert.deepEqual(colouredClassesIn("a.tsx", `  <div className="bg-[${HEX.slice(0, 1)}eb5a47]" />`), [
-    `a.tsx:1: <div className="bg-[#eb5a47]" />`,
-  ]);
-  assert.deepEqual(colouredClassesIn("b.tsx", `  className="text-[var(--accent)]"`), [
-    `b.tsx:1: className="text-[var(--accent)]"`,
-  ]);
-  assert.deepEqual(colouredClassesIn("c.tsx", `  className="ring-[rgb(0 0 0)]"`), [
-    `c.tsx:1: className="ring-[rgb(0 0 0)]"`,
-  ]);
-
-  // A token utility is the whole point of the rule and must pass.
-  assert.deepEqual(colouredClassesIn("d.tsx", `  className="bg-primary text-primary-foreground"`), []);
-  // The accent at 10% is a token with an opacity modifier, not a colour.
-  assert.deepEqual(colouredClassesIn("e.tsx", `  className="bg-primary/10 border-primary"`), []);
-  // An arbitrary value that is *not* a colour stays legal — the rule is about
-  // colour, and a one-off `top-[50%]` is not what v1 got wrong.
-  assert.deepEqual(colouredClassesIn("f.tsx", `  className="translate-y-[3px]"`), []);
-  // An inline style carrying a schema-supplied colour is the sanctioned road:
-  // `classColor` answers with whatever the kernel stored, and Tailwind has never
-  // seen it, so no utility could name it.
-  assert.deepEqual(
-    colouredClassesIn("g.tsx", `  style={{ background: classColor(declared, name) }}`),
-    [],
-  );
-  // A docstring explaining the rule must pass, or the gate forbids its own
-  // explanation — the mistake a boundary scan makes when it matches its own prose.
-  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);
-});
-
-/**
- * `DESIGN.md` "Where the brand is": coral is identity, not a functional-UI
- * colour — the wordmark and the styleguide swatch that shows it off, nothing
- * a person acts on. This is not a headcount: the gate does not exist to hold
- * a count of sites, it exists so brand can never migrate onto a control (a
- * button, a progress fill, anything with a function) instead of staying the
- * one place it is allowed to just be seen. Same bargain as
- * `colouredClassesIn`: a pure function over one file's text, so the gate is
- * provable with fabricated input, and `COMMENT` keeps the styles.css line
- * that *states* the rule from counting as a usage of it.
- */
-const BRAND_UTILITY = /\b(?:bg|text|border|ring|fill|stroke)-brand\b/;
-
-/** Every line in `text` that paints with the brand colour. */
-export function brandUsagesIn(file, text) {
-  return text
-    .split("\n")
-    .map((line, index) => ({ line, at: index + 1 }))
-    .filter(({ line }) => !COMMENT.test(line) && BRAND_UTILITY.test(line))
-    .map(({ line, at }) => ({ file, at, text: line.trim() }));
-}
-
-test("the brand scan counts a usage, and not the comment that states the rule", () => {
-  // A utility usage on any of the six colour-bearing prefixes is counted.
-  assert.deepEqual(brandUsagesIn("a.tsx", `  <span className="text-brand">VisionSet</span>`), [
-    { file: "a.tsx", at: 1, text: `<span className="text-brand">VisionSet</span>` },
-  ]);
-  assert.deepEqual(brandUsagesIn("b.tsx", `  className="h-full bg-brand transition-transform"`), [
-    { file: "b.tsx", at: 1, text: `className="h-full bg-brand transition-transform"` },
-  ]);
-  // An opacity modifier is still a usage of the brand colour.
-  assert.deepEqual(
-    brandUsagesIn("c.tsx", `  className="bg-brand/10"`).map((u) => u.at),
-    [1],
-  );
-  // A comment line states the rule rather than applying it — styles.css:48's case.
-  assert.deepEqual(brandUsagesIn("d.css", `   * a third \`bg-brand\` is a design decision`), []);
-  assert.deepEqual(brandUsagesIn("e.tsx", `  // never add bg-brand here`), []);
-  // Another token on the same prefixes is not the brand.
-  assert.deepEqual(brandUsagesIn("f.tsx", `  className="bg-primary text-primary-foreground"`), []);
-  // The token *name* without a utility prefix is not a usage — tokens.test.ts
-  // asserts COLOR.brand's value and must not trip the gate.
-  assert.deepEqual(brandUsagesIn("g.ts", `  expect(COLOR.brand).toBe("#e85d44");`), []);
-});
-
 test("no frontend source puts a colour inside a class name", () => {
   const listed = spawnSync("git", ["ls-files", "-z", "frontend"], { cwd: REPO, encoding: "utf8" });
   assert.equal(listed.status, 0, `git ls-files failed: ${listed.stderr}`);
@@ -214,82 +83,6 @@ test("the brand colour paints identity only — the wordmark and its styleguide
   );
 });
 
-/**
- * The names Task 1's audit retired outright — no shadcn analogue, no
- * VisionSet extension, no idiom left to fall back to. `tokens.test.ts`
- * already guards this structurally, parsed against `styles.css`'s own
- * `:root`/`.dark` blocks; this is the same guard by a different method, on
- * purpose — a plain-text scan that keeps working even if that vitest suite
- * is ever refactored or its parser changes shape. Same bargain as
- * `colouredClassesIn`: a pure function, provable with fabricated input.
- *
- * Assembled from fragments — the trick this file's own `HEX` already uses —
- * so none of these twelve names is a contiguous string anywhere in this
- * file's own source, and a repo-wide sweep for one of them never mistakes
- * this guard for a lingering usage.
- */
-const dash = (...parts) => parts.join("-");
-const RETIRED_DECLARATIONS = [
-  dash("--color", "primary", "hover"),
-  dash("--color", "disabled"),
-  dash("--color", "disabled", "foreground"),
-  dash("--color", "success", "hover"),
-  dash("--color", "destructive", "foreground"),
-  dash("--color", "sidebar", "strong"),
-  dash("--color", "sidebar", "muted"),
-  dash("--text", "meta"),
-  dash("--text", "body"),
-  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. */
-export function retiredDeclarationsIn(text) {
-  return text
-    .split("\n")
-    .map((line, index) => ({ line, at: index + 1 }))
-    .filter(({ line }) => !COMMENT.test(line))
-    .flatMap(({ line, at }) =>
-      RETIRED_DECLARATIONS.filter((name) => line.includes(`${name}:`)).map((name) => `${at}: ${name}`),
-    );
-}
-
-test("the scan finds a retired declaration, and not a comment or a longer name that merely contains it", () => {
-  assert.deepEqual(retiredDeclarationsIn(`  ${dash("--color", "disabled")}: oklch(0.9 0 0);`), [
-    `1: ${dash("--color", "disabled")}`,
-  ]);
-  assert.deepEqual(retiredDeclarationsIn(`  ${dash("--text", "meta")}: 0.75rem;`), [
-    `1: ${dash("--text", "meta")}`,
-  ]);
-  // A comment recalling the retired name states history, not a declaration.
-  assert.deepEqual(
-    retiredDeclarationsIn(`  /* ${dash("--color", "primary", "hover")} no longer exists */`),
-    [],
-  );
-  // A name that merely starts with a retired one is a different declaration —
-  // disabled-foreground is its own retired entry, and its presence must not
-  // be double-counted as disabled's.
-  assert.deepEqual(retiredDeclarationsIn(`  ${dash("--color", "disabled", "foreground")}: red;`), [
-    `1: ${dash("--color", "disabled", "foreground")}`,
-  ]);
-  // A current, kept extension is not a retired one.
-  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", () => {
   const STYLES_PATH = "frontend/ui-core/src/styles.css";
   const stylesheet = readFileSync(path.join(REPO, STYLES_PATH), "utf8");
@@ -302,55 +95,6 @@ test("the retired foundation vocabulary is absent from the stylesheet", () => {
   );
 });
 
-/**
- * `components.json` carries the preset properties shadcn's own tools read, and
- * only those: the fields its config schema defines. The schema is **strict** —
- * `rawConfigSchema.safeParse` answers `unrecognized_keys` for anything else — so
- * a decoded preset property the schema has no field for cannot be added here
- * even as documentation. It would not be ignored; it would break every `shadcn`
- * invocation that reads the file.
- *
- * `radius` is the property that keeps inviting the mistake: the preset decodes to
- * `radius: medium`, and the obvious repair for "the config does not say so" is to
- * write it in. The medium step's one home is `styles.css`'s `--radius: 0.625rem`
- * (asserted by `tokens.test.ts`); this test is the other half, refusing the field
- * that would look like a second home while doing nothing. Keys rather than a
- * count, so a failure names what moved.
- */
-const CONFIG_PATH = "frontend/ui-core/components.json";
-const SCHEMA_SUPPORTED_KEYS = [
-  "$schema",
-  "aliases",
-  "iconLibrary",
-  "menuAccent",
-  "menuColor",
-  "registries",
-  "rsc",
-  "rtl",
-  "style",
-  "tailwind",
-  "tsx",
-];
-
-test("components.json holds the schema-supported preset fields, and no others", () => {
-  const config = JSON.parse(readFileSync(path.join(REPO, CONFIG_PATH), "utf8"));
-  assert.deepEqual(
-    Object.keys(config).sort(),
-    SCHEMA_SUPPORTED_KEYS,
-    `${CONFIG_PATH} must carry exactly the fields shadcn's strict config schema defines. ` +
-      "A decoded preset property with no field here belongs in frontend/ui-core/src/styles.css " +
-      "as a value — see DESIGN.md 'Source of Truth'",
-  );
-
-  // The preset's own values, where the schema does have a field for them.
-  assert.equal(config.style, "radix-nova");
-  assert.equal(config.iconLibrary, "lucide");
-  assert.equal(config.menuColor, "inverted");
-  assert.equal(config.menuAccent, "subtle");
-  assert.equal(config.tailwind.baseColor, "neutral");
-  assert.equal(config.tailwind.css, "src/styles.css");
-});
-
 /**
  * Lucide is the icon set, and the only one.
  *
@@ -369,8 +113,7 @@ test("components.json holds the schema-supported preset fields, and no others",
  *
  * Assembled from fragments so this file never holds the package's name as a
  * contiguous string, and a repository-wide sweep for it never mistakes its own
- * guard for a lingering usage — the trick `HEX` and `RETIRED_DECLARATIONS` above
- * already use.
+ * guard for a lingering usage.
  */
 const RETIRED_ICON_PACKAGE = ["@tabler", "icons-react"].join("/");
 
diff --git a/tests/scripts/shadcn_canonical.test.mjs b/tests/scripts/shadcn_canonical.test.mjs
deleted file mode 100644
index e312037e..00000000
--- a/tests/scripts/shadcn_canonical.test.mjs
+++ /dev/null
@@ -1,110 +0,0 @@
-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
deleted file mode 100644
index a08e2eb1..00000000
--- a/tests/scripts/shadcn_extensions.test.mjs
+++ /dev/null
@@ -1,611 +0,0 @@
-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
deleted file mode 100644
index 5a711074..00000000
--- a/tests/scripts/shadcn_relativize.test.mjs
+++ /dev/null
@@ -1,15 +0,0 @@
-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"),
-  );
-});