diff --git a/.agents/docs/components-package.md b/.agents/docs/components-package.md
index a370ca77c..5abb0ed09 100644
--- a/.agents/docs/components-package.md
+++ b/.agents/docs/components-package.md
@@ -58,6 +58,12 @@ button for a file the machine will refuse, and the user would lose the edit at s
 
 ## Theming and fields
 
+Reusable visual primitives and semantic design tokens are owned by
+[`@lody/ui`](../../packages/ui/README.md). `@lody/components` composes those
+primitives into product surfaces and may add layout or interaction constraints,
+while the primitive's props remain the owner of its visual variant, size, tone,
+and shape.
+
 `--input` is the theme's raw `input.background` and doubles as a muted chip/composer
 slab, so in a light theme it can sit below the page color and read as a disabled field.
 `--input-field` is derived in `lib/vscode-theme/vscode-theme-css.ts` as the lighter of
diff --git a/.agents/notes/implemented/architecture/2026-09-08-ui-button-migration-takeover.md b/.agents/notes/implemented/architecture/2026-09-08-ui-button-migration-takeover.md
new file mode 100644
index 000000000..30fc939bd
--- /dev/null
+++ b/.agents/notes/implemented/architecture/2026-09-08-ui-button-migration-takeover.md
@@ -0,0 +1,68 @@
+# UI Button migration takeover
+
+Status: implemented
+Translation: pending
+Issue: https://github.com/LodyAI/Lody/issues/304
+Original PR: https://github.com/LodyAI/Lody/pull/305
+
+## Abstract
+
+PR #305 redesigns Lody buttons around `@lody/ui`, Base UI, and StyleX tokens,
+but its September 2 branch no longer merged cleanly with current `main`. The
+takeover keeps that redesign as the visual authority, preserves business behavior
+added on `main`, and migrates newer Button consumers to the author's public API.
+It does not provide a compatibility layer for the deleted Button or restore its
+appearance through caller classes. Surface-specific accessibility and layout
+requirements remain explicit at their owning call sites.
+
+## Decision
+
+Update the author's branch by merging current `main` into its existing commit.
+Resolve overlapping product files by retaining current navigation, session,
+onboarding, machine, and Skills behavior, then express their controls using the
+new Button variants, sizes, tones, shapes, and icon flag.
+
+New Button consumers added after the PR base follow the same API used by the
+author's migration. They do not select sizes by matching the removed component's
+pixel dimensions. Mermaid viewer controls keep their existing 44 px touch target
+because that surface has an independent mobile accessibility requirement; the
+new Button still owns their appearance.
+
+`@lody/ui` owns primitive visuals and semantic tokens. Product packages compose
+those primitives and may pass classes for layout or interaction constraints.
+Caller classes must not recreate the deleted Button's colors, typography,
+shadows, radii, or state styling.
+
+Composer submit and stop actions use the Button's `primary`, `medium`, `pill`,
+and icon choices directly. Their former `ghost` variant plus Tailwind color,
+size, radius, shadow, and press-state overrides bypassed the primitive and could
+leave the stop glyph with insufficient contrast. Landing, session, mobile-sheet,
+and Storybook compositions now select the same token-owned control treatment.
+
+## Integration evidence
+
+The original PR is commit `11ef421f86c29fe50773c6c101bf129839368c3c`,
+based on `947affd0741e35b3644622c841e8457a26133a95`. Current `main` is merged as
+the second parent so the author's commit and authorship remain intact. Conflict
+resolution retains the current package dependencies and application handlers,
+adds `@lody/ui` where needed, and regenerates the lockfile from the merged
+manifests.
+
+Verification used the repository's supported Node 22 runtime. The complete
+`pnpm check` suite passed after disabling commit signing for its synthetic Git
+repository, and the focused `@lody/ui` test suite passed all eight tests. The
+Electron application, documentation site, and component Storybook production
+builds completed with StyleX compiling the package source. A source scan found no
+remaining imports of the deleted Button module or uses of its old size and variant
+props.
+
+Interactive browser screenshot comparison was unavailable in the takeover
+environment. The production application and Storybook builds provide compiler
+and integration coverage, but a maintainer should still inspect the PR preview as
+the final visual acceptance step.
+
+## Limits
+
+This migration establishes the Button and token foundation described in the
+linked draft Spec. Other primitives remain in `@lody/components` until a later
+migration gives each one an explicit `@lody/ui` contract.
diff --git a/.agents/notes/implemented/architecture/2026-09-17-ui-icons-package.md b/.agents/notes/implemented/architecture/2026-09-17-ui-icons-package.md
new file mode 100644
index 000000000..24739a718
--- /dev/null
+++ b/.agents/notes/implemented/architecture/2026-09-17-ui-icons-package.md
@@ -0,0 +1,48 @@
+# Extract the icon system into `@lody/icons`
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+The icon system is now an independently consumable workspace package. The
+extraction removes its implementation dependencies on `@lody/ui` while keeping
+the old UI subpath available during caller migration.
+
+## Decision
+
+The original Lody icon registry, SVG renderer, four visual treatments, and
+stateful icons now live in the independent `@lody/icons` workspace package.
+`@lody/ui` depends on `@lody/icons`; the icon package does not depend on
+`@lody/ui`, Base UI, product components, or UI token modules.
+
+The old `@lody/ui/icons` subpath remains a compatibility re-export so existing
+consumers do not need a flag-day import change. New code and the icon playground
+use `@lody/icons` directly. The legacy `src/internal/glyphs.tsx` primitives
+remain in `@lody/ui` because they are private marks owned by its controls, not
+members of the independent icon set.
+
+## Implementation
+
+- Moved the icon registry, renderer, stateful icons, icon-specific rules, and
+  tests from `packages/ui` to `packages/icons`.
+- Replaced the renderer's dependency on `@lody/ui/internal/class-name` with a
+  local helper.
+- Replaced the stateful renderer's dependency on `@lody/ui` motion tokens with
+  its own fixed transition contract.
+- Added public root and focused subpath exports to `@lody/icons` and added its
+  workspace importer and lockfile entry.
+- Updated the existing icon playground to consume the new package and emit
+  `@lody/icons` examples.
+
+## Validation
+
+- `pnpm --filter @lody/icons typecheck`
+- `pnpm --filter @lody/icons test` — 18 tests passed
+- `pnpm --filter @lody/ui typecheck`
+- `pnpm --filter @lody/ui test` — 258 tests passed
+
+The package extraction implements the boundary proposed in
+`.agents/notes/proposed/feature/2026-09-14-ui-icon-set.md`; product-wide
+migration from `lucide-react` and other product-local icons remains separate
+work.
diff --git a/.agents/notes/implemented/feature/2026-09-09-ui-field-primitives.md b/.agents/notes/implemented/feature/2026-09-09-ui-field-primitives.md
new file mode 100644
index 000000000..7f9e6dcee
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-09-ui-field-primitives.md
@@ -0,0 +1,266 @@
+# UI field primitives
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` had proven one component and a token set, but every remaining control
+in `packages/components/src/ui` still reads Tailwind field concepts —
+`input-border`, `input-field`, `input-placeholder`, `ring`, `muted` — that the
+new token rules define no equivalent for. Migrating Input, Textarea and Label
+one at a time across that gap would have let each control invent its own focus,
+invalid and disabled colours, forking the token system the migration exists to
+unify. This note records adding one `field` component token group and a Base UI
+Field composition — `Field.Root` with `Field.Label`, `Input`, `Textarea`,
+`Field.Description` and `Field.Error` — so those states are defined once and read
+from the field rather than passed to each control, and writing the state mapping
+into the token rules and the gallery. Building it exposed that the product
+shell's `*:focus, *:focus-visible { outline: none !important }` suppresses every
+outline-based focus ring, including the migrated Button's, so the field ring is a
+box-shadow instead; Button still carries the suppressed outline and is not fixed
+here. Every in-repo caller then moved onto the composition and the three Radix
+and Tailwind files were deleted, which is what took the mapping from a board
+into the product.
+
+## Problem
+
+The package exported `Button` and the theme; `packages/components/src/ui`
+still owned every other atom. Proving "the Button pattern works" is not the same
+as proving the contract for a control that has states.
+
+The three files this pilot replaces read a vocabulary the new tokens do not have:
+
+- `input.tsx`: `border-input-border`, `bg-input-field`, `text-input-foreground`,
+  `placeholder:text-input-placeholder`, `focus-visible:ring-1 ring-ring`,
+  `disabled:bg-muted disabled:opacity-60`
+- `textarea.tsx`: the same set, plus `ring-offset-background` and an explicitly
+  removed focus ring
+- `label.tsx`: `@radix-ui/react-label` with `peer-disabled:opacity-70`
+
+Three different disabled treatments (`bg-muted` + 60%, 70%, and the rules'
+45%) and two different focus rings already existed in three files. Without a
+decided mapping, each migrated control would add a fourth.
+
+## Decision
+
+**One token group for the family, not one per component.** `field` covers the
+label, the control, the help text and the error, and the selects, checkboxes and
+switches that follow. `button` stays separate because a button is not a field.
+The alternative — `input`, `textarea` and `label` groups — is exactly the fork
+this change exists to prevent: the same focus colour would be declared three
+times and drift on the first redesign.
+
+**Composition, not props.** `Field.Root` owns `name`, `disabled` and validity.
+`Input` and `Textarea` read that state through Base UI's `className` callback and
+pick their own classes from it. A control therefore has no `invalid` prop for a
+caller to keep in sync with the field, and a label is associated with its control
+without a hand-written `htmlFor`.
+
+**Base UI throughout.** `Input` is Base UI's `Input`, which is `Field.Control`.
+Base UI has no textarea part, so `Textarea` is the same `Field.Control` rendered
+as a `<textarea>`; its props are typed from `<textarea>` and cast at the boundary,
+because Base UI types the part as an `<input>` while forwarding element props
+untouched. `Field.Label` replaces `@radix-ui/react-label`, which keeps the
+package's dependency rule intact.
+
+**State is read, not selected.** StyleX conditions are pseudo-classes,
+pseudo-elements and at-rules; an attribute selector such as `[data-invalid]` is
+not expressible. Base UI passes each part its own state to `className`, which is
+both available and more direct than the data attributes it also emits. Focus
+stays a CSS `:focus-visible` because a text control matches it for pointer focus
+too, so it needs no React state.
+
+Because StyleX keys a conditional value per condition, the invalid style restates
+the focused case; otherwise an invalid control would flip back to the accent ring
+the moment it takes focus.
+
+### The mapping this closes
+
+| Old Tailwind concept           | New token                                |
+| ------------------------------ | ---------------------------------------- |
+| `bg-input-field`               | `field.background` (`wellBackground`)    |
+| `border-input-border`          | `field.well` (`shadow.inset`); no border |
+| `text-input-foreground`        | `field.value` (`label`)                  |
+| `text-input-placeholder`       | `field.placeholder` (`tertiaryLabel`)    |
+| `ring-ring`                    | `field.ring` (`accent`), 2px             |
+| `aria-invalid` colours         | `field.invalidRing` (`destructive`), 2px |
+| `disabled:bg-muted opacity-60` | `field.disabledOpacity`, no colour swap  |
+| input `text-base md:text-sm`   | `field.text` (13) at weight 500          |
+| label `text-sm`                | `field.labelSize` (12) at weight 500     |
+
+The control's own text follows the rules' control step — 13 at weight 500 with
+`text.controlTracking` — rather than the prose weight a text field might
+suggest. Dimensions that land on the space scale reference it (`space.2`,
+`space.3`, `space.1.5`); the 10px inline padding of the 32px control is the one
+literal, because the scale has no half step between 8 and 12.
+
+### One type step for the whole ladder
+
+The first cut sized control text by step: 12 at 28, 13 at 32 and 36, copying
+what Button already did. That is wrong for this system, and the reason is the
+system's own grammar rather than a typographic preference.
+
+These rules give each channel one job and then forbid a second: `accent` marks
+live state and is "never a button fill", `separator` divides rows and is "never
+around a surface", disabled is an opacity and "not a color". Type size is
+already spoken for the same way — controls 13, prose 14, labels and help 12 —
+which is the type axis restating what the colour axis says with `label`,
+`secondaryLabel` and `tertiaryLabel`: the thing, about the thing, a hint.
+Density already has its own channels, the 28 / 32 / 36 height and the radius
+that compensates for it. Letting size drive type as well is the channel
+overloading the rest of the document bans.
+
+The concrete collision: `field.textSmall` and `field.labelSize` both resolved to
+`footnoteSize`, so at the 28 step a control's own value was typographically
+indistinguishable from the label describing it, in a system whose first colour
+rule is that those two are different things.
+
+So the ladder is one step, and one token carries it: `field.text` and
+`button.text` replace the per-size text tokens, because tokens whose values
+happen to match are an invitation to drift apart later. Button's `small` moves
+from 12 to 13 with it; a compact button and a dialog button are the same command
+at two densities and should not disagree about how their label is set. Button's
+`mini` keeps 12 and is left alone: at 24px it is not on the ladder the rules
+define, and whether it belongs to the ladder or to the "16px things" the radius
+rule mentions is a separate question this change does not settle.
+
+## Discovered defect: the shell suppresses every outline ring
+
+`packages/components/src/tailwind/index.css` ends its base layer with
+`*:focus, *:focus-visible { outline: none !important; }`. Layer order is
+`theme, base, stylex, components, utilities`, and for `!important` declarations
+layer priority is reversed, so no ordering lets a StyleX rule win. Measured in
+Chromium: a focused `Button` with `:focus-visible` matching reports
+`outline-style: none` and no ring, and the field's first outline-based ring
+behaved the same.
+
+The field ring is therefore a `box-shadow` composed with the well's own inset
+shadow, which the same base layer cannot override because its companion
+`box-shadow` rule is not `!important` and StyleX sits in a later layer. This is
+also the more robust mechanism, so it is now the rule for the package rather
+than a local workaround.
+
+Button follows. Its ring has to be restated per variant rather than added by a
+second class, because CSS cannot append to a `box-shadow` list, and each variant
+already owns a different edge: `primary` and `destructive` an ink highlight,
+`secondary` a raised shadow, `ghost` and `link` nothing. Each variant therefore
+declares its own `:focus-visible` value composing that edge with the ring, and
+`button.ring` joins the palette theme so it resolves inside a forced subtree.
+
+`:active` stays `none`, which is the press the rules describe — translate 1px
+and drop the edge. Putting the ring there instead would draw it on an ordinary
+mouse press, because a pointer press matches `:active` while `:focus-visible`
+stays false. The cost is that a keyboard-held press loses the ring for as long
+as the key is down, which is the smaller of the two errors.
+
+The alternative was scoping the shell's global reset so it stops covering
+`@lody/ui` primitives. It was rejected: that reset is the legacy focus system
+for every remaining Radix control, the hashed StyleX classes give it nothing
+stable to exclude, and narrowing it would resurface browser default outlines
+across surfaces this change never touched.
+
+## Other alternatives considered
+
+- An `invalid` prop on `Input`. Rejected: two sources of truth for one state,
+  and every caller would have to mirror `Field.Root` by hand.
+- Keeping `@radix-ui/react-label` and styling it. Rejected: the package depends
+  on Base UI only, and a Radix label carries no field state.
+- Exporting a flat `Label` alongside `Field.Label`. Rejected: two names for one
+  component. `Field.Label` covers the standalone case because this package makes
+  it work without a root; see the correction below.
+
+The gallery's own `Field` layout helper was renamed to `Sample` so the primitive
+can own the name. `ThemeRoot` now applies a list of component palette themes
+rather than a single one, which is the general mechanism the token gallery note
+left open until a second colour-valued group existed.
+
+## Verification
+
+`pnpm --filter @lody/ui test` (24 tests) and `pnpm --filter @lody/ui typecheck`
+pass. The tests cover label-to-control association, the error staying out of the
+markup until the field reports it, invalid adding a class the valid control does
+not have, `Field.Root disabled` reaching the control and the label, Input and
+Textarea sharing the well styles rather than each defining one, a caller class
+landing last, and the field palette theme riding along with both forced palettes.
+
+The board was read in Chromium through Storybook at 1400px. Values read back off
+the rendered nodes: heights 28 / 32 / 36 px, radius 8 at 28 and 10 at 32 and 36,
+control text 13, well `rgb(232, 234, 237)` in Lody Light and `rgb(28, 28, 28)` in
+Vesper with the matching inset shadow, disabled opacity `0.45`, and the invalid
+ring `rgb(206, 34, 45)` and `rgb(255, 128, 128)`. Focusing a control by pointer
+and by keyboard produced `… inset, rgb(93, 141, 239) 0px 0px 0px 2px` in Lody
+Light and `rgb(255, 199, 153)` in Vesper, and an invalid control kept
+`rgb(206, 34, 45)` while focused. The console reported no errors.
+
+Limits: no test asserts a rendered appearance, and the focus ring on the board is
+drawn on a non-interactive stand-in because a board cannot hold focus while it is
+read. Only Chromium was checked. `pnpm check` was not run to completion for the
+whole repository in this session.
+
+## Migrating the callers
+
+Every `Input`, `Textarea` and `Label` import in `packages/components` and
+`site-docs` now points at `@lody/ui`, and `input.tsx`, `label.tsx` and
+`textarea.tsx` are deleted with their barrel exports, which is the package rule
+that a Radix file goes when its in-repo callers reach zero. `Label` becomes
+`Field.Label`, imported as `UiField` wherever a surface already had a local
+`Field` of its own; `site-docs` drops its ambient `@/ui/textarea` declaration.
+
+Spending the contract on real call sites found two holes in it:
+
+- `Textarea` accepted no `style`. The props were built by omitting `style` from
+  `<textarea>` the way Base UI does, but Base UI re-adds it and this did not, so
+  a surface that sets its own font size on the composer could not. `style` is
+  back as `CSSProperties`; it carries layout a caller owns, not visual identity.
+- `PasswordInput` typed its props from a raw `<input>`, so the HTML `size`
+  attribute collided with the token step of the same name. A wrapper around a
+  primitive follows the primitive's props, so it now extends `InputProps`.
+
+`form.tsx` also kept typing `FormLabel` from `@radix-ui/react-label` while
+rendering a Base UI label. The type follows the element it renders.
+
+## Correction: the parts do require a root, and the ring follows aria-invalid
+
+Two claims in the first version of this note were wrong, and both reached the
+product.
+
+**`Field.Label` does not work outside a `Field.Root`.** Base UI's Label,
+Description and Error call `useFieldRootContext(false)`, whose `optional` flag
+is false, so they throw without a root; only Control passes `optional` and
+survives alone. This note had it backwards, and the caller migration was written
+against the wrong reading: all 25 files that render `UiField.Label` do so with
+no root, including the login page, every settings panel, onboarding and several
+dialogs. Loading the `UI/Switch` story reproduced it — a blank surface and
+`Base UI error #28` — so this was a crash on the way to shipping, not a
+theoretical gap.
+
+`Field.Label`, `Field.Description` and `Field.Error` now fall back to the plain
+`<label>`, `<p>` and `<div>` when no root is above them, styled identically and
+still honouring `render` through Base UI's `useRender`. A label with `htmlFor`
+is meaningful on its own; the only thing lost outside a field is field state,
+and outside a field there is none. Wrapping 25 surfaces in a root instead was
+rejected: it changes the DOM and layout of files this change should not be
+reshaping, to work around a primitive that should not crash.
+
+**The invalid ring ignored `aria-invalid`.** Reading validity only from Base
+UI's `state.valid` meant a caller that marks its own control — `agent-role-form`
+does — put `aria-invalid` on the DOM and got no ring: a screen reader announced
+invalid while nothing looked wrong. `Field.Root` renders its validity _as_
+`aria-invalid`, so the attribute is not a second source of truth but the
+rendered form of the one truth; `src/field/invalid.ts` reads it, and every ARIA
+value except `false` counts, `grammar` and `spelling` included. StyleX has no
+attribute selector, so the read happens in JS rather than in a condition.
+
+Both were found by review rather than by the tests, which is the gap worth
+naming: the package's tests render markup, so they can assert a class appears,
+but nothing here mounts a real surface. The Storybook check that reproduced the
+crash is manual.
+
+## Follow-ups
+
+`Button` still has no visible keyboard focus ring in the desktop shell; the two
+open fixes are in the discovered-defect section above. Checkbox, Select and
+Switch join the same `field` group rather than opening their own. Callers that
+still pass Tailwind classes to a migrated control are carrying layout, not
+visual identity, and are worth a pass once more of the family has moved.
diff --git a/.agents/notes/implemented/feature/2026-09-09-ui-token-gallery.md b/.agents/notes/implemented/feature/2026-09-09-ui-token-gallery.md
new file mode 100644
index 000000000..9d3e9cd5b
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-09-ui-token-gallery.md
@@ -0,0 +1,172 @@
+# UI token gallery
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` shipped tokens and a Button with no place to see them: the design
+reference for PR [#305](https://github.com/LodyAI/Lody/pull/305) was an external
+Claude artifact that nobody in the repository can open, so the visual system had
+no in-repo authority. This note records rebuilding that board as
+`packages/ui/src/gallery`, a StyleX component that renders every semantic token,
+elevation rung, control size, type step and Button state in both palettes and
+reads each sample's value back off the rendered node, hosted as a Storybook story
+in `@lody/components`. Building it exposed a real defect: component tokens that
+point at semantic colours are declared once at the document root, so a palette
+forced on a subtree left buttons carrying the root palette, which the board made
+visible as light secondary buttons inside the Vesper panel. The fix re-declares
+those tokens in a palette theme applied with each forced palette. Coverage of the
+board is asserted from the token objects themselves, so a token without a sample
+fails the package's tests; nothing asserts that a sample looks right.
+
+## Problem
+
+The token set landed with its Button, but the only picture of it lived at
+`https://claude.ai/code/artifact/8a512704-cd50-4b69-805b-c3277f9d6405`, linked
+from the PR description. That URL needs an authenticated Claude session, is not
+versioned with the tokens, and cannot be reviewed in a diff. The PR's own note
+listed "a token gallery" as a later step, and the takeover note closed with the
+observation that no story or screenshot asserts the rendered look.
+
+Without a board, a person choosing between `raisedBackground` and
+`secondaryBackground`, or between `tone="destructive"` and
+`variant="destructive"`, has to read `colors.stylex.ts` and `button.tsx` and
+imagine the result in two palettes.
+
+## Decision
+
+Rebuild the board in the repository rather than fetch the artifact. `@lody/ui`
+owns the gallery because it owns the tokens; `@lody/components` only hosts it,
+through a `Design System / UI Gallery` story on the existing Storybook, which
+already compiles this package's StyleX with the shared options. No new dev
+server, package or dependency was added.
+
+Two properties keep the board honest:
+
+- Samples are rendered from the tokens. A swatch's fill is `colors.<name>`, a
+  radius chip's corner is `radius.<name>`, a control bar's height is
+  `control.<name>`; nothing in the board restates a palette value.
+- The value printed under each sample is read back with `getComputedStyle` on the
+  rendered node, so the board reports what the token produced in that palette. A
+  token whose value changes needs no edit here. The read happens once per mount,
+  which is sufficient because every sample is mounted under a fixed palette.
+
+Each section renders its samples once per palette in labelled panels, side by
+side, so the two values of a token are compared in place rather than by toggling
+a theme. `palettes` selects `both`, one palette, or the ambient theme.
+
+Coverage is asserted structurally: the test walks the keys of the token objects
+and fails when a name has no entry on the board. That turns "the gallery is
+current" into a test rather than a habit, and is why the AGENTS.md rule asking
+for a board entry with each new token can be enforced.
+
+## Discovered defect: component tokens froze at the document root
+
+The first render of the board showed the Vesper panel with white secondary and
+icon buttons. The cause is CSS custom property resolution, not StyleX: the button
+token group is declared once at `:root` with values such as
+`--button-secondaryBackground: var(--colors-raisedBackground)`. A custom property
+is substituted at the element where it is declared, and the resolved value is
+what descendants inherit. A palette applied to a subtree redefines
+`--colors-raisedBackground` on that subtree, but `--button-secondaryBackground`
+had already resolved against the root palette.
+
+Production did not show this because `ThemeProvider` puts the forced classes on
+`<html>`, the same element the tokens are declared on. `ThemeRoot` — exported and
+documented as applying a theme to a subtree — was therefore broken for every
+component token that derives from a colour, and the gallery is its first
+consumer.
+
+The fix adds `buttonPaletteTheme`, a `createTheme` over the same group that
+re-declares only the colour-valued tokens as the same semantic references.
+`ThemeRoot` and `forcedThemeClassNames` apply it with each palette, so the
+declarations sit on the element that carries the palette and resolve against it.
+One theme serves both palettes because the overrides are references, not values.
+
+Alternatives considered:
+
+- Reference `colors.*` directly from `button.tsx` and keep only dimensions in the
+  component token file. Fewer moving parts, but it deletes the button's colour
+  token surface and contradicts the package rule that component tokens live
+  beside the component.
+- Write literal palette values into per-palette button themes. This duplicates
+  the palettes in a second place, which is the drift the token file exists to
+  prevent.
+- Leave the defect and render the board in one palette at a time. This gives up
+  the side-by-side comparison that motivates the board, and leaves a documented
+  guarantee of `ThemeRoot` broken.
+
+## Verification
+
+`pnpm --filter @lody/ui test` covers the board's token coverage, both palettes
+being rendered, every Button variant and size appearing, and a single-palette
+render carrying no classes of the other palette. `pnpm --filter @lody/ui
+typecheck` passes.
+
+The board was read in Chromium through Storybook at 1400px, in slices down the
+full scroll height, before and after the palette-theme fix; the Vesper panel's
+secondary, icon and pill buttons change from light to the dark palette between
+the two. Measured values render as expected (for example `rgb(255, 255, 255)`
+against `background` in Lody Light and `rgb(16, 16, 16)` in Vesper, `5px` for
+`radius.mini`, `28px` for `control.small`). The console reported no errors.
+
+Limits: no test asserts a rendered appearance, so a sample that renders in the
+wrong place or with the wrong emphasis is caught only by a person reading the
+board. The measured values are read once per mount, so a palette changed after
+mount without remounting would show stale values; `palettes="ambient"` is the
+only mode where that is reachable. Only Chromium was checked, which is also the
+only engine that draws `corner-shape: squircle`. `pnpm check` was not run to
+completion for the whole repository in this session.
+
+## Follow-up, 2026-09-14: the board's own panel is a rung
+
+Three separate reports of "this component looks wrong" turned out to be one
+board defect, and none of them were the component.
+
+`PaletteSplit`'s panel is `elevatedBackground` under `shadow.card` — **it is the
+card rung**. So every sample that *is* a rung was being shown on itself. In the
+light palette the card rung and the page are both white and the shadow still
+separates them, which is why this survived review; in the dark palette
+`elevatedBackground` is `rgb(22,22,22)` and the panel is the same value, so a
+`Card` had no background step at all and the only thing left was a shadow
+already spent on the panel behind it. The report was "did you change something
+about `background`? the contrast is terrible" — nothing had changed; the board
+had never shown it.
+
+It reached further than the Card:
+
+- The **elevation ladder** stood on `secondaryBackground`, and in the dark
+  palette that is `rgb(22,22,22)` as well — the same value as
+  `elevatedBackground`. A ladder of surfaces could not show its own `card` or
+  `modal` step. It stands on the page rung now, where exactly one chip matches
+  its ground: `page`, which is supposed to. A card that cannot be told from what
+  it sits on is a lie; a page that cannot be is the truth.
+- An **Alert** takes the card rung by the ladder's own table, so the four tones
+  were four tints of the panel they sat on. They sit on the page now.
+- The **modal stand-in** was painting two of the three things its own caption
+  says the rung states — the background and the shadow, but not the overlay —
+  on a surface that cancelled the first. It stands on the page under
+  `colors.overlay`, painted as a `background-image` because `dialogReplica`
+  needs that box to stay the containing block for its close button.
+
+**The rule this leaves:** a sample that *is* a rung has to be given a different
+rung to stand on. The badge section already did this — three explicit strips,
+`on a page` / `on a card` / `on a menu` — and that was read as a badge-specific
+flourish rather than as the general case it is.
+
+Two things this does not fix, recorded rather than hidden. The card-to-page step
+in the dark palette is `rgb(22,22,22)` against `rgb(16,16,16)`, six values of
+255; it reads because the shadow carries most of the work, and moving it means
+moving `elevatedBackground`, which every card, alert, dialog and panel in the
+product reads. And the board's own panel still sits on the board's own page fill
+with only its shadow between them — the same relationship a card has to a page,
+which is the thing the panel is.
+
+## Follow-ups
+
+Primitives that migrate into `@lody/ui` after the Button add their states to the
+board in the same change. If a second component token group with colour values
+appears, the palette theme it needs is part of that group, and `ThemeRoot`
+applies it the same way; a general mechanism is worth considering only once more
+than one exists.
diff --git a/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md b/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
new file mode 100644
index 000000000..6050676fa
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
@@ -0,0 +1,272 @@
+# UI choice controls: Checkbox, Radio and Switch
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+The `@lody/ui` field family covered the controls a person types into, while every
+control a person picks with — 9 `Checkbox` call sites and 24 `Switch` ones —
+still rendered Radix with Tailwind classes the new token rules define no
+equivalent for, including a `primary` fill and a `switch-track` colour that are
+not tokens at all. This note records adding `Checkbox`, `Radio` and `Switch` to
+the same `field` token group rather than opening one of their own, and settling
+the state the text controls never had to answer: a control that holds a value is
+ink, the `label` fill under a `background` mark with the primary button's own top
+highlight, because the rules reserve `accent` for live state. Each renders a real
+`<button>` through Base UI's `nativeButton` rather than the default `<span>`, so
+the family's existing `:disabled` and `:focus-visible` rules reach them and a
+`<label>` can point at them; the cost is that the ring has to be restated for the
+ink edge, since CSS cannot append to a box-shadow list. Every caller moved and
+the three Radix files are deleted. The board was read in both palettes; no test
+asserts a rendered appearance, and the switch's on state is ink rather than the
+`accent` the rules mention for a "live switch", which is left for a surface that
+actually has one.
+
+## Problem
+
+`packages/ui` owned the label, Input and Textarea. `packages/components/src/ui`
+still owned `checkbox.tsx`, `switch.tsx` and `radio-group.tsx`, and their
+Tailwind classes reach for a vocabulary the token rules do not have:
+
+- `checkbox.tsx`: `border-input-border`, `data-[state=checked]:bg-primary`,
+  `data-[state=checked]:text-primary-foreground`, `focus-visible:ring-ring/50`,
+  `aria-invalid:ring-destructive/20`, `rounded-[4px]`, `disabled:opacity-50`
+- `switch.tsx`: `data-[state=checked]:bg-primary`,
+  `data-[state=unchecked]:bg-switch-track`, `focus-visible:ring-offset-2`,
+  `disabled:opacity-50`, a 36×20 track with a 16px thumb
+- `radio-group.tsx`: the checkbox's set again, plus `fill-primary`
+
+Three problems compound there. The two disabled treatments are 50%, where the
+rules say 45% and the field family already reads `field.disabledOpacity`. The
+focus rings are `ring-offset` haloes, which the rules ban and which the desktop
+shell suppresses anyway. And `primary` is the concept the new system deliberately
+does not have: the rules replace it with an elevation rung plus ink, and a
+migrated control that kept reaching for it would carry the old design forward
+under a new import path.
+
+`radio-group.tsx` had no caller at all and was not exported from the barrel, so
+it was dead code carrying a `@radix-ui/react-radio-group` dependency.
+
+## Decision
+
+**They join the `field` group.** `field` now covers the label, the text
+controls, the choice controls, the help text and the error. This is what the
+field note said would happen, and the reason holds: five colour tokens declared
+per component drift on the first redesign. `checkedFill`, `checkedMark`,
+`checkedEdge`, `thumb` and `thumbShadow` are the only new colour-valued tokens,
+and they join `fieldPaletteTheme` so they resolve inside a forced palette.
+
+**Ink for a stored value, not accent.** The rules are explicit: "Ink for stored
+state: primary button, checked, on. `label` fill, `background` text", and
+"`accent` for live state only … Never a button fill." So a ticked box, a selected
+radio and a switch that is on take `colors.label` with `colors.background` on top
+of them. The elevation table already puts "switch off, checkbox off" on the well
+rung; on is the rung the primary button sits at, so it takes `shadow.inkEdge` as
+its top highlight too. The alternative — `accent` for the on state, which is what
+most systems do and what the rules' own phrase "live switch" gestures at — was
+rejected here because none of these 33 call sites is a live indicator. They store
+a preference. A surface that genuinely shows something running can revisit it,
+and the rules' sentence is the place to argue from.
+
+**A real `<button>`, not Base UI's default `<span>`.** Base UI renders these
+three as a `<span role="checkbox">` with a hidden input beside it, and its
+`nativeButton` prop swaps in a `<button>`. The span is the wrong element for this
+package for three separate reasons, each of which would otherwise cost a
+mechanism:
+
+- `:disabled` does not match a span. The field family dims a disabled control
+  with `opacity` under `:disabled`, so a span would need the disabled opacity
+  read from React state instead — a second disabled mechanism inside one family.
+- A `<label>`'s labelled control must be a labelable element, and `<button>` is
+  one while `<span>` is not. `Field.Root` renders `htmlFor` onto the control
+  either way, but only the button turns a click on the label into a toggle.
+- The repo's existing tests already query `button[role="switch"]`. Keeping the
+  element keeps what those tests assert true rather than rewriting them around a
+  new implementation.
+
+The cost is that a disabled control drops out of the tab order rather than
+staying focusable with `aria-disabled`. That matches how a disabled `<input>`
+behaves in the same family, so it is the consistent answer rather than a new one.
+
+**The ring is restated for each edge.** `well.box` composes the focus ring with
+`field.well`; `well.checked` composes it with `field.checkedEdge`. This is the
+same shape as Button, where each variant restates the ring with its own edge, and
+for the same reason: a box-shadow list cannot be appended to from a second class.
+Four states, two of them invalid, therefore cost four declarations in `well.ts`
+rather than one. The alternative was drawing the ring on a `::after` pseudo
+element, which composes with anything, but it would give this half of the family
+a different ring mechanism from the text controls for no gain.
+
+**Mixed is its own prop.** Radix modelled the third state as
+`checked="indeterminate"`, so every call site typed the value as
+`boolean | 'indeterminate'` and narrowed it back with `=== true` in its handler.
+Base UI has a separate `indeterminate` prop, `checked` is a boolean, and the two
+select-all call sites now pass `checked={allSelected}` beside
+`indeterminate={someSelected}`. A mixed box wears the checked ink and draws a
+dash, and announces `aria-checked="mixed"` — it must not fall back to the tick,
+which would state a value the selection does not hold.
+
+### Sizes
+
+A checkbox and a radio are `field.boxSize` (16) at `radius.mini`, which is
+exactly the "16px things" case the corner rule names; the radio overrides the
+radius to a full round. The switch is a 28×16 track at `radius.full` with a 12px
+thumb inset 2px, so its travel is derived in CSS from those three tokens rather
+than written down as a fourth. 16 is also the checkbox's height, so a settings
+list mixing the two lines up — which the old 36×20 switch did not, and which is
+why `auto-review-menu-item` had reached for `scale-75` to shrink one.
+
+There is no size ladder here. The 28 / 32 / 36 steps are heights for controls
+that hold text; a tick box has no text to set.
+
+### The mapping this closes
+
+| Old Tailwind concept                       | New token                                 |
+| ------------------------------------------ | ----------------------------------------- |
+| `border-input-border`, `shadow-xs`         | `field.well` (`shadow.inset`); no border  |
+| `data-[state=checked]:bg-primary`          | `field.checkedFill` (`label`)             |
+| `data-[state=checked]:text-primary-fg`     | `field.checkedMark` (`background`)        |
+| — (the checked box had no edge)            | `field.checkedEdge` (`shadow.inkEdge`)    |
+| `data-[state=unchecked]:bg-switch-track`   | `field.background` (`wellBackground`)     |
+| switch thumb `bg-background shadow-lg`     | `field.thumb` + `field.thumbShadow`       |
+| `focus-visible:ring-ring/50 ring-offset-2` | `field.ring` (`accent`), 2px, no offset   |
+| `aria-invalid:ring-destructive/20`         | `field.invalidRing` (`destructive`), 2px  |
+| `disabled:opacity-50`                      | `field.disabledOpacity` (45%)             |
+| `size-4 rounded-[4px]`                     | `field.boxSize` (16) at `radius.mini` (5) |
+| switch `h-5 w-9` with a 16px thumb         | 28×16 track with a 12px thumb, inset 2px  |
+
+The tick and the dash are drawn as inline SVG paths rather than taken from
+`lucide-react`, because the package depends on React, Base UI and StyleX only.
+
+## Migrating the callers
+
+All 33 files import from `@lody/ui/checkbox` and `@lody/ui/switch`, and
+`checkbox.tsx`, `switch.tsx` and `radio-group.tsx` are deleted with their barrel
+exports and their three `@radix-ui` dependencies. `Radio` and `RadioGroup` ship
+with no caller: the file they replace had none either, and a primitive library is
+the one place where that is the right order.
+
+Spending the contract on real call sites found three classes of caller state:
+
+- **Visual overrides.** `workdir-mode-selector` rebuilt the checkbox at 12px in
+  `muted-foreground/15` with its own checked colours and `disabled:opacity-100`,
+  which is the reconstruction the package rule forbids and which stopped matching
+  anything the moment `data-[state=checked]` became `data-checked`. It is gone;
+  the pill holds the primitive.
+- **Sizes that are now the primitive's.** `mobile-chat-list` and
+  `mobile-project-screen` passed `h-4 w-4`, and `auto-review-menu-item` passed
+  `scale-75`. All three were compensating for the old dimensions.
+- **Layout and interaction.** `pointer-events-none`, `shrink-0`, `ml-4`, `mt-0.5`
+  stay: they are the caller's constraint, not the primitive's identity.
+
+`message-selection`'s tests read `[data-state="checked"]`, which is Radix's
+attribute; Base UI writes `data-checked`. The four assertions moved with it.
+
+## Correction: a squircle at `radius.full` is not a pill
+
+The first version of this change gave the switch track and the radio
+`radius.full` and left them under the squircle every control in `well.box`
+carries, on the reading that the corner rule's "`corner.shape` on every radius"
+covers the whole scale. It does not, and the result shipped visibly wrong: the
+28×16 track rendered as a rounded rectangle rather than a stadium.
+
+`corner-shape: squircle` does not degrade to a circle as the radius grows. It
+draws a superellipse of that radius, so at `radius.full` a wide box becomes a
+rounded rectangle and a square one becomes a squircle instead of a circle.
+Measured in Chromium against `corner-shape: round` at the same radius, the two
+are plainly different shapes at 28×16, at 16×16 and at 120×56.
+
+`radius.full` therefore takes `corner.round`, a second constant beside
+`corner.shape`, and the rule in `RULES.md` gains the exception. The switch track
+and the radio box set it; the switch thumb and the radio dot never needed it,
+because `corner-shape` does not inherit and their default is already round.
+`Button`'s `pill` shape had the same defect since it was written and is fixed
+with them: at `radius.full` a squircle is not the stadium the shape name
+promises. The gallery's `radius.full` chip carried the squircle too, so the board
+was showing a rounded rectangle under the label "pills"; it now renders the round
+shape beside the four squircles.
+
+Three tests pin it. They re-declare both corner shapes through `stylex.create`
+and rely on StyleX hashing a class per property and value, so the expected class
+is derived from the compiler rather than written down: the switch and the radio
+must carry the round class and not the squircle one, the checkbox must carry the
+squircle at its 5px radius, and the two classes must differ at all.
+
+## Correction: the local suite failure was real, and it hid three others
+
+This note first recorded that `packages/components`' suite fails on this machine
+"before and after the change" with `act is not a function`, and called it
+environmental. That reading was wrong, and it was wrong in the way that costs
+the most: it dismissed the one signal that was working.
+
+React 19 exports `act` only from its development build, so the suite needs
+`NODE_ENV=development`. Without it nearly every file fails, which is exactly why
+the base commit failed the same way — the comparison that seemed to prove the
+failure was pre-existing proved only that the same variable was missing on both
+sides. `NODE_ENV=development pnpm --filter @lody/components test` reproduces CI.
+
+Under that blanket failure sat three real ones, and they reached CI:
+
+- Base UI's Switch constructs a `PointerEvent`, which jsdom does not implement,
+  so `mobile-about-developer-mode` and `tasks-beta-gate` needed a polyfill. The
+  fix that added it also moved `act` to `react-dom/client`, which does not
+  export it, and that is what CI then reported. `act` comes from `react`.
+- `message-selection` proved its auto-scroll loop had stopped by counting
+  outstanding `requestAnimationFrame` callbacks. Base UI's scheduler keeps its
+  last native frame queued on purpose and turns it into a no-op instead of
+  cancelling it, so a checked box in the tree leaves one behind and the count
+  can never reach zero. No product change fixes that; the test now asserts that
+  draining further frames does not advance the scroll, which is the behaviour
+  its own name claims.
+
+## Verification
+
+`pnpm --filter @lody/ui test` (46 tests, 16 of them new) and
+`pnpm --filter @lody/ui typecheck` pass, as does
+`pnpm --filter @lody/components typecheck`. The new tests cover the rendered
+element and role, the tick appearing only once the box holds a value, the mixed
+box announcing mixed and drawing the dash rather than the tick, the checked state
+swapping the well for the ink rather than stacking on it, the thumb differing
+between tracks by its travel alone, the three sharing the box styles rather than
+each defining one, an unchecked control wearing the same invalid ring class as a
+text control while a checked one gets a different one composed with its ink edge,
+`Field.Root` reaching the control with disabled and validity, the label pointing
+at the control, and a caller class landing last.
+
+The board was read in Chromium through Storybook at 1440px, values taken off the
+rendered nodes in both palettes. The box is 16×16 at radius 5 with `corner-shape: squircle`,
+the track 28×16 at `radius.full` with `corner-shape: round` and a 12×12 thumb
+inset 2px that travels to 14px from the left.
+Off is `rgb(232, 234, 237)` in Lody Light and `rgb(28, 28, 28)` in Vesper with
+the matching inset; on is `rgb(26, 27, 30)` and `rgb(255, 255, 255)` with the ink
+highlight; disabled reports opacity `0.45`. Focusing a control by keyboard
+produced `… inset, rgb(93, 141, 239) 0px 0px 0px 2px`, an invalid one kept
+`rgb(206, 34, 45)` while focused, and a checked one kept its ink edge under the
+accent ring. Clicking the label toggled the box, which is the labelable-element
+behaviour the native button buys. The console reported no errors.
+
+The product shell was checked too, which is where the shell's Tailwind base layer
+could have interfered: the `UI/Switch` story and the beta-features settings
+section render at the right size and colours, and clicking a switch there flipped
+the atom the surface reads.
+
+Limits: no test asserts a rendered appearance, and the board itself draws no
+focus ring, because a board cannot hold focus while it is read — the rings above
+were read by focusing a control in the browser rather than from a sample.
+`pnpm check` was not run to completion for the whole repository in this session,
+and the first version of this note wrongly excused a local test failure rather
+than reading it; see the correction above. `THIRD_PARTY_NOTICES.md` still
+lists the three removed packages: regenerating it here would rewrite the whole
+file against a different dependency snapshot, and the field migration left it in
+the same state. Only Chromium was checked, and no mobile surface was opened.
+
+## Follow-ups
+
+`Button` still has no visible keyboard focus ring in the desktop shell; the two
+open fixes are in the [field primitives note](2026-09-09-ui-field-primitives.md).
+Select and Combobox are the next slice and are the first controls in this family
+to need popup, keyboard navigation and overlay tokens. Whether a switch that
+reports something live should take `accent` rather than ink is open, and belongs
+to the first surface that has one. `THIRD_PARTY_NOTICES.md` and the generated
+attributions want one regeneration pass together.
diff --git a/.agents/notes/implemented/feature/2026-09-10-ui-select-combobox.md b/.agents/notes/implemented/feature/2026-09-10-ui-select-combobox.md
new file mode 100644
index 000000000..51687c831
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-10-ui-select-combobox.md
@@ -0,0 +1,283 @@
+# UI Select and Combobox, and the popup token group
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` owned every control that sits still. Select and Combobox are the first
+that open something, and they made the field family answer three questions it had
+never had to: where a floating list gets its colours, where it mounts, and what
+the difference is between the row you are on and the row that holds the value.
+This note records giving the list its own token group, `popup`, rather than
+stretching `field` over the floating rung; deriving both row fills from that rung
+because `hoverFill` and `selectedFill` each resolve to invisible there in one of
+the two palettes; and letting a host name the container its popups mount into,
+which is what makes a Base UI list work inside a Radix dialog. All twelve
+`@/ui/select` callers moved and the Radix file is deleted. Three defects were
+found by opening the board and the product in Chromium rather than by any test,
+and are recorded below. Combobox ships with no in-repo caller.
+
+## Problem
+
+`packages/components/src/ui/select.tsx` was Radix with Tailwind classes reaching
+for a vocabulary the token rules do not have: `border-input-border`,
+`bg-popover`, `focus:ring-1 focus:ring-ring`, `shadow-md`, `bg-hover` and a
+`rounded-xs` row inside a `rounded-md` popup. Twelve files imported it. Its
+trigger was `h-9`, the largest step on a ladder whose default is 32.
+
+The interesting part was not the trigger. `field` had covered a family that never
+left the well rung, and a Select is two things on two rungs: a control a person
+reads at rest, and a list that floats over the page. The rules already said so —
+the elevation table puts "menu, popover, select list" on the floating rung — but
+nothing in the package had been on that rung yet.
+
+## Decision
+
+**The list gets its own group.** `field` covers the trigger, which is a control
+on the well rung and takes the family's size ladder, ring, invalid ring and
+disabled opacity unchanged. `popup` covers the list. The alternative — stretching
+`field` over both — reads fine for a Select and falls apart for the very next
+component: a `Menu` has no field around it and no trigger in the family, and
+`field.background` would be the wrong name for the right colour. `popup` is the
+group a Menu, a DropdownMenu, a ContextMenu and a Popover will share, so it is
+sized for that from the start.
+
+`popup/surface.ts` is to `popup` what `field/well.ts` is to `field`: the rules
+both lists apply, in one place, so a row cannot be styled twice. A test asserts a
+Select row and a Combobox row carry exactly the same classes.
+
+**Two facts about a row, not one.** `highlighted` is where the keyboard or the
+pointer is right now; `selected` is the row that holds the value. Both are a
+background colour, so StyleX resolves them to a single class and the one declared
+last wins: a row that is both wears the highlight, and the tick keeps saying
+which row is current. That is the right way round — the highlight is the thing
+that moves.
+
+**Both fills are derived, not borrowed.** The rules name `hoverFill` for "pointer
+over a row" and `selectedFill` for "the row that is current", and on the floating
+rung both collapse. Measured in Chromium: `hoverFill` renders `rgb(240, 241, 244)`
+against a `rgb(238, 240, 243)` popup in Lody Light — two units out of 255 — and
+`selectedFill` resolves to `rgb(35, 35, 35)` against a `rgb(35, 35, 35)` popup in
+Vesper, which is not a difference at all. Both were tuned against the page and
+card rungs, which are at 100% lightness in the light palette; the floating rung
+is at 94.3%, below them.
+
+`popup.highlight` and `popup.selected` therefore mix `raisedBackground` toward
+`label` by 6% and 3%. Mixing toward `label` moves away from the surface in both
+palettes at once — darker in a light one, lighter in a dark one — and it is the
+derivation `Button` already uses for a secondary button's hover, so it is not a
+new mechanism. Read back off the board, the two rows land at oklab lightness
+0.9105 and 0.9325 against a 0.9545 surface in Lody Light, and 0.3008 and 0.2785
+against 0.256 in Vesper: the same step in both directions.
+
+**A host names where popups mount.** `PopupContainerProvider` is a container, not
+a flag, so `@lody/ui` needs no knowledge of which modal implementation a host
+uses. `@lody/components`' `DialogContent` names its own panel once, and every
+Select and Combobox under it mounts inside the panel. Without it a Base UI list
+portalled to the body is *outside* the Radix dialog: the dialog's focus scope
+drags focus back the moment the list opens, and its scroll lock swallows the
+wheel before the list sees it.
+
+**The list is anchored under its trigger, not overlapping it.** Base UI's default
+overlaps the popup with the trigger so the selected row's text lands on the value,
+the way a macOS pop-up button does. The motion rule in this system says something
+else — "popups from 4px below at opacity 0" — so `Select.Content` defaults
+`alignItemWithTrigger` to `false` and offsets by 4px. A caller can ask for the
+overlap back; `surface.popupHiddenInPlace` is kept for it, because a popup that
+must not move cannot slide as it fades.
+
+**`Content` assembles the plumbing.** Base UI splits a popup into a portal, a
+positioner, the popup, a scrolling list and two scroll arrows. Every caller writes
+the same five, so `Select.Content` and `Combobox.Content` write them once and take
+the positioning props on the outside. `Select.Item` renders its own `ItemText` and
+tick; `endContent` is the one slot for a row that carries an affordance, which the
+path-launcher list uses for its edit button.
+
+**Combobox is the same list with a query in front of it.** On its own the input is
+the whole control; inside a `Combobox.InputGroup` the group is the well — the ring
+follows `:focus-within`, since the element that takes focus is the input — and the
+input is bare, so a chevron beside it lands inside one control rather than beside a
+second one. Which of the two it is, is read from context rather than taken as a
+prop, so the two cannot disagree and draw two wells.
+
+## Migrating the callers
+
+All twelve files import `Select` from `@lody/ui/select`; `select.tsx` and
+`@radix-ui/react-select` are gone. `h-9`, `h-8`, `text-xs` and `w-full` are gone
+with them: the ladder is `size`, and the trigger is already full width. The
+onboarding screen's `h-11` became `size="large"`, which is what the rules give an
+onboarding surface.
+
+Three differences from Radix cost real work:
+
+- **`Select.Value` reads its text from `items` on the root, not from the rows.**
+  Radix rendered the selected `SelectItem`'s text. Base UI resolves the label from
+  `Select.Root items` and otherwise shows the raw value, so ten of the twelve
+  callers were briefly showing `machine-macbook` where they had shown
+  `Zoe's MacBook Pro`. Each now states its list once and renders both the `items`
+  and the rows from it. Two tests pin this, including one that pins the failure
+  mode, because it is quiet: the control still works, it just names the value.
+- **`null` is the empty value.** Radix's `onValueChange` gave a string; Base UI's
+  gives `Value | null`, because a `null`-valued row can clear the select. No
+  migrated list has one, so each handler narrows rather than casting. Two callers
+  were passing `value={x ?? ''}` to satisfy Radix; `''` matches no row in Base UI,
+  so they pass `null` and get the placeholder they meant.
+- **A popup inside a dialog needs the absolute positioning strategy.** See below.
+
+`path-launchers-setting`'s edit button was absolutely positioned inside a row with
+`pr-14` to clear Radix's tick. Our tick is a flex sibling, so right padding would
+push it out of line; the button moved to `endContent` and the positioning hack is
+gone.
+
+## Three defects the browser found and the tests did not
+
+Each of these passed every test in the suite and was visible the moment the board
+or the product was opened in Chromium.
+
+1. **The invisible row fills**, above. No test asserts a rendered colour, and no
+   test could have caught two tokens resolving to the same value in one palette.
+2. **The raw value in the trigger.** The unit tests all passed `items`, because
+   the fixture was written from the Base UI documentation; every migrated caller
+   was written from the Radix code it replaced, which needed no such thing.
+3. **The popup landing at the far corner of a dialog.** A `position: fixed`
+   element inside an ancestor with a `translate` is positioned against that
+   ancestor, not the viewport — and `DialogContent` centres itself with
+   `translate-x-[-50%] translate-y-[-50%]`, which Tailwind compiles to the
+   `translate` property. Floating UI had computed `left: 519px; top: 547px`
+   correctly and the browser resolved it to `(1016, 850)`, offset by exactly the
+   dialog's own origin. `Content` now uses the absolute strategy whenever a
+   container is in force, which resolves against the offset parent — the panel —
+   so the two agree. Anchoring under the trigger rather than overlapping it was
+   needed as well: the overlapping mode pins `position: fixed` itself and ignores
+   the strategy.
+
+## Correction: four more the board found after review
+
+The slice was opened for review with the board looking right at rest. Pulling it
+down and *clicking* the controls found four more, all of them the same class of
+bug as the three above — a popup is not where it was written, so anything that
+depends on where it is breaks quietly.
+
+**A blank row above every list.** `Combobox.Empty` must stay mounted so a screen
+reader has a live region to announce into; Base UI swaps its children rather
+than the element. `surface.empty` gave it `min-height: 28px` unconditionally, so
+an empty announcement region reserved a row at the top of every popup. It now
+collapses through `:empty` — the element stays rendered and in the accessibility
+tree at zero height, which `display: none`, `hidden` or `aria-hidden` would not.
+Measured on the board: 0px with no padding while empty, 28px with the hint
+colour once a query matches nothing, and the first row now sits 4px from the top,
+which is `popup.inset` and nothing else.
+
+**A light popup opening from a dark panel.** A forced theme works by cascade, and
+a portalled popup is not in the subtree that declares it, so it inherited the
+document palette. That contradicts the spec directly: "A forced theme applies to
+the subtree it is placed on, including the primitives inside it… so two palettes
+can be shown at once on one page." `ThemeRoot` now publishes its mode and
+`Content` re-declares the palette on the positioner — the same fix
+`componentPaletteThemes` already makes for a custom property declared only at the
+document root, applied one level further out. The board's Vesper panel now opens
+`rgb(35, 35, 35)` with white text and the dark accent on its focus ring, and the
+Lody Light panel opens `rgb(238, 240, 243)`.
+
+**A stray blue ring on the highlighted row.** Measured
+`rgba(91, 141, 239, 0.5) 0px 0px 0px 1px inset` on the row Base UI had moved
+focus to — not ours. The product shell's "Pro focus style" rings any focused
+`[tabindex]` through a zero-specificity `:where()` rule, and its exemption list
+already carries `[role="menuitem"]` with a comment describing this exact
+failure; an option is the same case and was not on the list. Rather than extend
+the shell's list, `surface.item` states `box-shadow: none`: the row owns its
+edge, which is no edge, and no host can put one on it. The fill is how this
+system marks where the keyboard is.
+
+**The board's stand-in read as a second, different list.** With the palette fixed
+the two are now identical, which is the point — but nothing said so. The legend
+is `list · stand-in` and a caption under it says that opening a trigger above
+shows this same list in this same palette.
+
+The first two are the reason this correction exists rather than a follow-up: a
+blank row and a wrong-palette popup are visible to anyone who opens a Select, and
+both were invisible to a suite that never opens one in a themed subtree.
+
+## Testing a popup in jsdom
+
+Four things about driving Base UI in jsdom are load-bearing, and `test/dom.tsx`
+carries them so no suite has to rediscover them:
+
+- **React 19 ships `act` only in its development build**, and its entry picks the
+  build from `process.env.NODE_ENV`, which is `production` under this package's
+  vitest config because the StyleX plugin compiles with `dev: false`. The config
+  now sets it. Without it every test that drives a control fails with
+  `act is not a function` rather than reporting what it asserts.
+- **A stand-in `PointerEvent` must default `pointerType` to `''`**, which is the
+  spec's default. Base UI reads exactly that to tell a keyboard-generated click
+  from a stray pointer one, so a stand-in defaulting to `mouse` makes every
+  synthesized Enter look like a mouse click on an unhighlighted row and the item
+  refuses to commit.
+- **A click is a sequence.** A Select opens on the click and a Combobox on the
+  mousedown, and a row is picked where the pointer moved, so a helper that fires
+  only one of the three silently tests half the family.
+- **Frames have to be drained.** Base UI defers part of opening a popup to an
+  animation frame and `act` flushes React's work but not the frame queue, so an
+  interaction that follows lands between a popup being asked to open and its
+  opening, and the deferred frame then undoes it.
+
+A closed Select also keeps its list mounted and marks the positioner `hidden`, so
+"closed" is what the trigger announces rather than the row count, and the helper
+that collects elements skips anything inside a `[hidden]` subtree.
+
+## Verification
+
+`pnpm --filter @lody/ui test` (85 tests, 36 of them new) and
+`pnpm --filter @lody/ui typecheck` pass, as does
+`pnpm --filter @lody/components typecheck`.
+`NODE_ENV=development pnpm --filter @lody/components test` reports 3305 passing
+and one failure in `tests/avatar-cache.test.ts`, which passes on its own and is
+unrelated to this change — it awaits a blob revalidation and loses that race under
+a loaded worker pool.
+
+The new tests cover the trigger's element and role, the placeholder giving way to
+the value, the label resolved from `items` and the raw value shown without them,
+opening on click and closing on Escape with focus handed back, the arrow keys and
+Home/End walking the list, Enter taking the highlighted row, the selected row
+being the only one that draws a tick, the highlight winning the fill from the
+selected row, a disabled row being dimmed and unpickable, groups and separators,
+the container a provider names, the query narrowing the list, the empty message,
+the input group carrying the well while the input inside it is bare, and a Select
+row and a Combobox row being the same row.
+
+Read in Chromium through Storybook at 1440px, values taken off the rendered nodes
+in both palettes: the trigger is 28/32/36 at radius 8/10/10 with `corner-shape: squircle`,
+`rgb(232, 234, 237)` with the inset shadow in Lody Light, the destructive ring at
+`rgb(206, 34, 45)` while invalid at rest, and `opacity: 0.45` when the field is
+disabled. The popup is 14px radius with a 4px inset holding 10px rows at 28px,
+8px padding, an 8px gap and a 16px tick, group labels at 11/16 and a 20px scroll
+arrow, and its hidden end resolves to `matrix(1, 0, 0, 1, 0, 4)`. The Combobox
+group carries the well at 32px while the input inside it is transparent with no
+shadow. In the bug report dialog the list mounts inside `[data-lody-dialog-content]`,
+opens 4px under a 398px trigger at the trigger's own left edge, keeps focus on an
+option, and shows the machine name with its online dot. The console reported no
+errors.
+
+Limits: no test asserts a rendered colour, which is what let the two invisible
+fills ship as far as the board, and what makes the collapsed announcement region
+and the absent row edge browser-verified rather than unit-tested — jsdom applies
+no stylesheet, so the tests pin the mechanism (one element, one class list, a
+declared `box-shadow`) and the board pins the value. Only Chromium was checked and no mobile surface
+was opened. `Combobox` has no in-repo caller — `OptionSelector`, the cmdk-based
+searchable picker with 61 call sites, is the caller it is for and is a slice of
+its own. `pnpm check` was not run to completion for the whole repository in this
+session. `THIRD_PARTY_NOTICES.md` still lists `@radix-ui/react-select`.
+
+## Follow-ups
+
+`OptionSelector` is the Combobox migration, and it brings virtualization and a
+fuzzy scorer with it. The menus — `dropdown-menu`, `context-menu`, `menubar`,
+`popover` — are the next users of the `popup` group and the first test of whether
+it was drawn wide enough. Whether `hoverFill` and `selectedFill` should be
+retuned so they work on every rung, rather than each component deriving its own,
+is a palette question this change deliberately did not answer. `Button` still has
+no visible keyboard focus ring in the desktop shell; the two open fixes are in the
+[field primitives note](2026-09-09-ui-field-primitives.md).
+`THIRD_PARTY_NOTICES.md` and the generated attributions want one regeneration pass
+together with the packages the earlier slices removed.
diff --git a/.agents/notes/implemented/feature/2026-09-11-ui-menu-primitives.md b/.agents/notes/implemented/feature/2026-09-11-ui-menu-primitives.md
new file mode 100644
index 000000000..ca0786286
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-11-ui-menu-primitives.md
@@ -0,0 +1,179 @@
+# UI menu primitives: one surface, three ways in
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` already owned the floating surface — a Select and a Combobox open one
+— but every menu in the product was still Radix with Tailwind classes reaching
+for a vocabulary the token rules do not have. This note records adding `Menu`,
+`ContextMenu` and `Menubar` to the package as one family rather than three
+components: the rows, the groups, the separators and the submenu trigger are
+written once and re-exported, and only the way in differs. It records the one
+declaration a menu replaces on the shared surface — a list's `--anchor-width` —
+and why `DropdownMenu` is not a separate name. It also records what this change
+deliberately does **not** do: the 41 files importing `@/ui/dropdown-menu` and the
+11 importing `@/ui/context-menu` are not migrated here, and the reasoning for
+that is below. The Radix `menubar.tsx` had no caller at all and is deleted with
+its dependency.
+
+## Problem
+
+`packages/components/src/ui/menu-styles.ts` computed the menu's edge as
+`color-mix(in oklab, hsl(var(--background)) 90%, hsl(var(--foreground)) 10%)`
+and painted it as a hairline ring in a `box-shadow` stack, with a comment
+explaining that `--border` could not be used because it "can clash hard against
+`--background`". That is a workaround for a border token in a system whose rules
+say there is no border token: edges are wells, raised shadows, elevation shadows
+and the focus ring. Rows were `min-h-8` at `rounded-lg` inside a `rounded-xl`
+surface — neither pair is on the nested-radius rule — group labels were 10px at
+`tracking-[0.6px]`, and the disabled treatment was 50% where the rules say 45%.
+
+Three files carried the same vocabulary in three copies. `dropdown-menu.tsx` had
+grown 630 lines around Radix: a touch workaround that blocks Radix's
+`pointerdown` and re-dispatches a synthetic mouse one on `click`, because Radix
+toggles from `pointerdown` alone and a scroll starting over a trigger opened the
+menu; a whole submenu-level context that exists only to beat Radix's hard-coded
+100ms hover delay; and a search field that installs a native `keydown` listener
+on the menu content to claim printable keys back from Radix's typeahead.
+
+The fourth, `menubar.tsx`, was shadcn's default with `border border-border`,
+`bg-popover`, `rounded-xs` rows and `zoom-in-95` animations. Nothing in the
+repository imported it.
+
+## Decision
+
+**A menu is the surface a list already opens, not a new one.** `popup` covers
+every floating surface, and `src/popup/surface.ts` already held the popup, the
+row, the highlight, the group label and the separator that a Select uses. A menu
+reads all of it. Exactly one declaration is replaced: a list states
+`min-width: var(--anchor-width)` because the control it belongs to shows the
+value the list holds and the two read as one control, while a menu is opened by
+whatever the surface already had there — often a 28px icon button — so it states
+`popup.menuWidth` and grows past it for its longest row. `test/menu.test.tsx`
+pins that as a count: of the classes a list's surface compiles to, exactly one is
+missing from a menu's.
+
+Three tokens are added to `popup` rather than a `menu` group being opened beside
+it, because a group per component is what the package's rules already rule out:
+`menuWidth`, `destructive`, and `destructiveHighlight`. The last is mixed toward
+`destructive` for the same reason `highlight` is mixed toward `label` — measured
+on the floating rung, the palette's named fills collapse into the surface — so a
+row about to delete something stays legible while the keyboard is on it.
+
+**`Menu` is the dropdown menu.** Base UI has no separate part for one; a
+`DropdownMenu` export would be a second name for the same component and a second
+thing to keep in step. `ContextMenu` restates its root and its trigger — a right
+click or a long press over a region — and `Menubar` restates the bar and the
+names on it; both re-export `Menu`'s rows. The alternative, four components with
+four row implementations, is exactly the shape the deleted files had, and it is
+why `menu-styles.ts` existed at all: three copies that had already drifted, since
+`menubar.tsx` never imported it.
+
+**The bar is rows laid sideways.** A menubar trigger takes `popup.itemHeight`,
+`popup.itemRadius`, `popup.text` and `popup.highlight` — a menu row turned along
+a bar — rather than a token group of its own. The bar itself declares no
+background and no edge, because a menubar is not a surface: it sits on whatever
+rung the shell put it on, and giving it a fill would put a second surface inside
+the one already holding it.
+
+**The rise is measured against the anchor, not the page.** The motion rule says a
+popup rises from 4px below, which was written when the only popup was a list that
+always opens below its trigger. A menu flips to stay on screen and a submenu
+opens beside its row, so the rule is restated as a distance from what opened it:
+the popup starts one step further away on whichever side it landed and closes
+that step as it arrives. `hiddenSurfaceForSide` reads Base UI's resolved side,
+because StyleX cannot express `[data-starting-style]`. A context menu is anchored
+to the pointer rather than to a control, so `ContextMenu.Content` states no offset
+at all and lets Base UI place its corner under the click.
+
+**A row's leading box holds one thing.** A plain row's box holds a caller's
+glyph; a checkbox or radio row's box holds its mark and nothing else. Base UI
+unmounts the mark while the row is unticked, so an icon sharing that box would
+slide sideways every time the row was toggled — the row would animate a layout
+change to report a state change. A row with no icon takes no box, so an icon-less
+menu is not indented for nothing, and a row in a mixed list asks for one with
+`inset`.
+
+**Post-close focus is the product's.** `packages/components/src/lib/menu-focus.ts`
+holds a real product policy: after a selection, focus belongs in the composer
+rather than back on the trigger, or the next Enter reopens the menu instead of
+submitting. That is a decision about Lody's composer, not about menus, so the
+primitive exposes Base UI's `finalFocus` and does not choose. The touch
+workaround is dropped: Base UI already distinguishes a tap from a scroll, so the
+synthetic-`pointerdown` re-dispatch has nothing left to fix.
+
+## Deliberately not done: the migration
+
+The established shape for this series is that a primitive lands with its callers
+moved and the Radix file deleted. That is not what happened here, and the reason
+is size rather than difficulty. Radix's menus have about a thousand usage sites
+in this repository — 283 `DropdownMenuItem`, 162 `DropdownMenuContent`, 150
+`DropdownMenuTrigger`, and so on across 41 files, plus 11 for the context menu —
+and unlike the field family this is not an import swap. Radix's `onSelect` with
+`preventDefault` to keep a menu open becomes `closeOnClick={false}`; `asChild`
+becomes `render`; `align` and `side` move from the content to the positioner;
+`Sub` becomes `Submenu`; and `DropdownMenuSearchInput`, which exists only to
+fight Radix's typeahead, has to be re-examined against Base UI rather than
+ported. Landing that in the same change as the primitives would put the
+Electron shell's menus behind one unreviewable diff.
+
+So this change lands the primitives, the tokens, the board and the tests, and the
+migration follows per surface. `Menubar` is the one piece that is complete: it
+had no caller, so its Radix file, its barrel export, its `@radix-ui/react-menubar`
+dependency and its attribution entry are gone.
+
+Until the migration finishes, two menu vocabularies are alive at once — the new
+one in `@lody/ui` and `menu-styles.ts` in `@lody/components`. That is the cost of
+splitting it, and it is why the migration should not be left open indefinitely.
+One thing the migration must carry: `@lody/ui` has no descendant selector, so a
+menu row's leading box cannot size a lucide icon the way
+`menuItemIconClassName`'s `[&>svg]:size-full` did. Each migrated call site — or
+one shared wrapper in `@lody/components`, which is a Tailwind package and may
+still write that rule — has to make the glyph fill its box, or it renders at the
+icon library's 24px default.
+
+## Found by opening it, not by a test
+
+Three defects survived a green suite and were caught in Chromium. All three are
+the same shape: the board is rendered to static markup in the gallery test, and a
+menu is portalled and unmounted while it is closed, so nothing a test could reach
+was ever the thing a person sees.
+
+**A group label outside a group throws.** `Menu.GroupLabel` is Base UI's, and it
+reads a context only `Menu.Group` and `Menu.RadioGroup` provide; a bare one takes
+the whole subtree down with `Base UI error #31`. The suite had not caught it
+because its only group label was inside a `RadioGroup`, which supplies the same
+context. This is the migration's sharpest edge: Radix's `DropdownMenuLabel`
+rendered anywhere, and there are 52 of them. `test/menu.test.tsx` now pins both
+halves — that a label names the group it is in, and that one outside a group
+throws rather than quietly labelling nothing.
+
+**`popup.menuWidth` read back as `0px` on the board.** The stand-in reused the
+list stand-in's style, which sets `min-width: 0` to neutralise the
+`var(--anchor-width)` a popup has outside a positioner. That is right for a list
+and wrong for a menu, whose width floor is the one declaration it states for
+itself; the menu stand-in keeps it and now reports `200px`.
+
+**Two strings rendered as their own escape sequences.** A JSX attribute value
+is not a JavaScript string literal and does not process backslash escapes, so
+the section heading read `Menu \u00b7 dropdown, context menu and menubar` on the
+page and a shortcut read `\u2318N`. The same text inside braces is a JS literal
+and resolves; the two written as plain attributes did not.
+
+## Evidence
+
+Intended behavior: [Shared UI primitives](../../../../specs/ui-primitives.md),
+which this change returns to `draft` with the menu family stated.
+
+Inspected implementation: `packages/ui/src/menu`, `packages/ui/src/popup`, and
+the deleted `packages/components/src/ui/menubar.tsx`.
+
+Executed validation: `pnpm --filter @lody/ui typecheck` and
+`pnpm --filter @lody/ui test` (112 tests, 25 of them new in
+`test/menu.test.tsx`), and the board opened in Chromium under both palettes —
+the tests run in jsdom, where StyleX's compiled CSS is never applied, so no test
+here can see a layout or a colour. Every visual assertion in `test/menu.test.tsx`
+is therefore made against the classes a style compiles to rather than against
+`getComputedStyle`, which returns the empty string for all of them.
diff --git a/.agents/notes/implemented/feature/2026-09-12-ui-card-badge-separator.md b/.agents/notes/implemented/feature/2026-09-12-ui-card-badge-separator.md
new file mode 100644
index 000000000..e8efc8481
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-12-ui-card-badge-separator.md
@@ -0,0 +1,375 @@
+# UI card, badge and separator: three answers to "what is an edge?"
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` had every part that reports, acts or opens, and nothing for the
+furniture a page is made of while nothing is happening. `card.tsx` was
+`rounded-lg border border-border shadow-xs` — a border in a system whose first
+rule is that no border token exists — `badge.tsx` was a `cva` whose default
+variant filled the chip with the colour these rules give a stored value, and
+`separator.tsx` was a Radix wrapper that defaulted to `decorative`, which is
+`role="none"`. This note records why the three are three components and not one
+family; why Card takes a Dialog's parts and its own token group; why a Badge is
+the one part of this system on **no rung**, which makes its tone a film rather
+than a fill and keeps its words ink in every tone; why a Separator gets no token
+group at all; and what the board showed that the tokens could not. Twenty-nine
+surfaces are migrated, `badge.tsx` and `separator.tsx` are deleted, and the four
+Card callers that are not cards are recorded rather than forced.
+
+## Problem
+
+Three files, three vocabularies, and each one reaching outside the rules in a
+different direction.
+
+`card.tsx` was `rounded-lg border border-border bg-card shadow-xs` with `p-6` on
+every section. The border is the thing this system does not have: the first line
+of `RULES.md` is "depth without lines", and a card's edge is `shadow.card`. Its
+title was `text-2xl font-semibold` — 24px, which is not on this type scale at
+all — and its padding was stated three times, once per section, so a card whose
+content had to meet its own edge (a table) fought `p-6 pt-0` with `p-0`.
+
+`badge.tsx` was a `cva` with six variants, and the default filled the chip with
+`bg-primary text-primary-foreground shadow-sm` plus `hover:bg-primary/80` and a
+focus ring. Every one of those is wrong here rather than merely different: ink
+is what the rules give a *stored value* — a primary button, a checked box — so a
+badge wearing it invited a press it does not answer, and a chip with a hover and
+a focus ring claims to be a control. Two more variants, `secondary` and
+`outline`, were two answers to a question this system does not ask, because
+there is no border to outline with. The product knew it: of 44 call sites, 38
+overrode the size (`px-1.5 py-0 text-[10px]`, `h-5`, `text-[9px]`), and the
+onboarding screen had grown a `PROVIDER_STATUS_CHIP` constant plus four
+hand-mixed colour pairs — `border-amber-500/40 bg-amber-500/10 text-amber-600
+dark:text-amber-400` — for statuses the palette now names.
+
+`separator.tsx` defaulted to `decorative`, which renders `role="none"`. That
+default is right for a library used to draw lines for looks; it is wrong here,
+where the rules allow a line in exactly one place — between the rows of a list
+or a table — and that place is structural by definition. Three of its four
+callers also restated its colour (`bg-border/60`, `bg-sidebar-border`).
+
+## Decision
+
+**Three components, two token groups, and one with none.** They are not a
+family. The family test this package uses is whether what differs is the
+arrangement rather than what a thing is made of — the test that makes `field`
+cover a checkbox and a Select trigger. A card, a badge and a line fail it in
+both directions: they share no colour, no measurement and no state. What they
+do share is a question, and three different answers to it. A card's edge is the
+shadow that lifts it off the page. A badge has no edge, because it is on no rung
+and cannot have one. A separator *is* an edge, and it is the only one the rules
+allow.
+
+### Card
+
+**A Card is a Dialog's panel one rung down, and takes the same parts.** A
+header, the body a caller writes, the answers; `headerGap` inside the heading
+block, `footerGap` between the answers, the footer reversed on a narrow window.
+What separates the two is the rung and the heading step, not what either is made
+of — which is exactly the argument that made Dialog, AlertDialog and Drawer one
+family — so reproducing that structure is cheaper to learn than inventing a
+second one.
+
+**It does not read `dialog`, though.** Every value except the title step is
+currently identical, and sharing the group would still be wrong for the reason
+the rules give for a menu not reading `field.background`: it would be naming the
+wrong thing to get the right value, and the day either rung moves, one of the
+two surfaces silently follows the other. `card` is its own group.
+
+**The title is `headline`, and the auth pages shrink.** The rules put a dialog's
+title at `headline` and reserve `title` for a page that is a page. Seven of the
+eight migrated pages set `text-2xl font-bold` on it, and 24px is not a step on
+this scale; their headings are now 16px at weight 600. This is the redesign the
+spec asks for rather than an accident of migration, and it is the most visible
+single change in this diff.
+
+**A card does not nest, and the board proves it rather than claiming it.** In
+the light palette `elevatedBackground` and `background` are the same white, so a
+card inside a card is one fill twice and a shadow. The board's own sample panels
+are cards, which is why the dark screenshot shows the sample card separated from
+its panel by nothing but its shadow. A block inside a card is the region rung,
+which a surface lays out; it is not a smaller Card.
+
+**`interactive` marks the card; it does not make one.** The card takes the
+pointer's fill and a pointer cursor, and the caller still brings the `<button>`
+or the link — what a press *does* (navigate, select, open) is a product
+decision, and a component that rendered its own control would have made it. Only
+the fill changes: a card that lifted on hover would be claiming a rung it is not
+on.
+
+**`card.hover` is not the rung the ladder named, and that is measured.** The
+elevation table listed "hover on a card" under the region rung, and in the dark
+palette `secondaryBackground` and `elevatedBackground` are both `hsl(0 0% 8.6%)`
+— the hover would have been invisible in exactly one of the two palettes, which
+is the same trap the rules already record for `hoverFill` on the floating rung.
+It mixes the rung toward `label` at 4% instead: the derivation `popup.highlight`
+uses at 6% for a row and a secondary Button uses at 4% for itself, at the
+Button's strength because a card is a large area and a row's step over one reads
+as a fill. Measured in Chromium, rest and hover are `#ffffff` and
+`oklab(0.9689 …)` in the light palette and `rgb(22,22,22)` against
+`oklab(0.2322 …)` in the dark one. The ladder's table was corrected to match.
+
+### Badge
+
+**A badge is on no rung, and everything else follows from that.** It appears on
+a page, on a card, inside a menu row a person has opened, and on a modal panel.
+Three of those six rungs are surfaces whose named fills the rules already record
+as collapsing — `hoverFill` lands 2/255 from `raisedBackground` in the light
+palette, `selectedFill` resolves to exactly `raisedBackground` in the dark one —
+so a badge that took a background from the ladder would be invisible somewhere
+by construction. Its fill is a **film**: the tone at 8% of `label` or 14% of an
+outcome colour over whatever is underneath (12% and 22% since the follow-up
+below), which is the form
+`Button`'s destructive ghost hover already takes. One declaration, every rung,
+both palettes. The board carries the same five badges on the page, the card and
+the floating rung for exactly this reason.
+
+**The words stay ink in every tone, and that is measured rather than
+preferred.** The obvious design is the product's current one: colour the text
+with the tone. In the light palette `warning` is `hsl(32 90% 48%)`, which is
+2.8:1 on a near-white surface — a colour tuned for a 16px mark, where the
+contrast bar is 3:1, used as 11px text, where it is 4.5:1. It would have been
+the one place this palette is used below what a person needs. An Alert can
+afford a coloured mark because the mark is a graphic; a badge is only words. And
+it does not need the colour to be legible as a *kind*, because unlike an Alert's
+mark a badge is never wordless: the tint carries the tone and the word carries
+the fact. `badge.label` is `secondaryLabel` for all five tones, which is also
+what most callers had already written by hand as `text-muted-foreground`. That
+last sentence is the part the follow-up below corrects: the argument for not
+using a *tone* as the ink was sound, and the choice of which neutral ink to use
+instead was never measured on the film it would sit on.
+
+**Five tones, and the fifth is `running`.** The four outcomes are the message
+family's, imported as its type so the vocabulary cannot drift into two; the
+fifth is the one `Progress` adds, for the same reason and by the same name. A
+machine being reached, a screen being opened, a checkout in flight — that is
+live state, which is what the rules give `accent` to. It has real callers: the
+onboarding screen's in-progress chip and the desktop hand-off page both said
+this in `bg-primary/10 text-primary` before.
+
+**There is no tone mark, and the leading box is the caller's.** An Alert draws
+its own mark because a tone is the entire point of a message and a caller free
+to choose a glyph can put a tick on a failure. A badge's glyph is doing a
+different job: it identifies the *thing* — a lock beside "Private", a laptop
+beside an OS, a spinner beside "Opening" — which is what a menu row's leading
+box holds, and this is that box at a badge's scale. A tick beside the word
+"Verified" would have said nothing the word does not.
+
+**It neither grows nor shrinks, and a surface that must cap one caps the
+badge.** This is the rule the menu's trailing shortcut already follows: what is
+beside it is the thing, and the badge is the note about it. The board revealed
+the consequence — a clamp on a *box around* a badge does nothing, because
+`flex-shrink: 0` means the chip keeps its content's width and overflows that box
+instead of ellipsing inside it. The board's sample was wrong in exactly that way
+and now clamps the badge, where the ellipsis appears (96px box, 138px of text).
+The one product caller that caps a badge, `machine-quota-compact.tsx`, had
+already put its `max-w-[180px]` in the right place.
+
+### Separator
+
+**It gets no token group.** Every other component in this package derives its
+edge from tokens that say which rung it is on. This one *is* the edge:
+`separator` is already the semantic name for "the next row starts here", and a
+`separator.color` pointing at it would be a second name for one fact — the drift
+`RULES.md` warns about — with a `createTheme` entry to keep in step for nothing.
+The hairline is the same 1px the popup's own row divider takes.
+
+**It is announced, and there is no `decorative` prop.** Base UI renders
+`role="separator"` with the orientation and offers no escape hatch, which is the
+right default here rather than a limitation to work around: a line in this
+system is never decoration, because the only place it is allowed is structural.
+
+**It carries no margin, and a vertical one stretches.** Where a line sits in a
+stack is the surface's layout — the popup's divider has margins only because it
+must bleed through an inset the caller cannot see. A vertical line takes
+`align-self: stretch` rather than `height: 100%`, because its row is a flex
+container and a percentage height there resolves against a height the row has
+not got. Measured on the board: 1px wide, 28px tall beside two 28px buttons.
+
+## Migrated
+
+Twenty-nine surfaces, and two Radix files deleted (`badge.tsx`,
+`separator.tsx`) with their barrel exports and the now-unused
+`@radix-ui/react-separator` dependency.
+
+- **Card** — eight auth, onboarding and hand-off pages, plus the settings
+  category grid, which is the one `interactive` caller and dropped
+  `hover:bg-hover transition-colors cursor-pointer` for the prop. Two pages also
+  dropped bespoke chrome the primitive now owns: `rounded-2xl`,
+  `border-border/60`, `shadow-[0_20px_60px_-30px_rgba(0,0,0,0.25)]` and `px-8
+  pt-11`. Every `CardContent` wrapper went: the card's own `gap` does what its
+  `p-6 pt-0` was for.
+- **Card, removed rather than migrated** — `session-conversation-page.tsx` used
+  `CardHeader` as a bare flex container with a `border-b`, overriding all four
+  of its declarations. It is a `<div>` now. That is not a card, and a component
+  used for its layout only is a dependency for nothing.
+- **Badge** — twenty-one files, 44 call sites. Every size override went (38 of
+  them), `PROVIDER_STATUS_CHIP` and its four hand-mixed colour pairs became four
+  tones, and `PRIORITY_META` in the AI GUI lost the three
+  `border-status-*/20 bg-status-*/[0.15] text-status-*` triples it was carrying
+  for high, medium and low. The `secondary` / `outline` split disappeared
+  wherever it was decorative; where it carried meaning it became a tone — a paid
+  invoice is `success` and a checkout in flight is `running`.
+- **Separator** — four, three of which were restating its colour.
+
+## Follow-up, 2026-09-14: a film too thin to read, and an ink that never cleared
+
+The five tones were reported as hard to tell apart in use — twice, the second
+time after the first fix below had shipped — and measuring them **against each
+other** rather than each on its own showed why. Off the rendered
+board, the closest pair of composited chips was 0.019 apart in oklab in the
+light palette (neutral against success) and 0.026 in the dark one (running
+against warning) — a difference that survives a swatch comparison and does not
+survive a 20px chip glanced at in a row.
+
+The films are now **12% of `label`** for neutral and **22% of the tone** for the
+rest, which puts those closest pairs at 0.030 and 0.035. That is still a film:
+the word is what says which tone a badge is, and the tint only has to make that
+believable at a glance. A film nobody can separate is a film doing nothing.
+
+**And the ink was already failing.** Raising the tint is the kind of change that
+costs contrast, so the word was measured on its own chip — which, it turns out,
+the original change never did. `secondaryLabel` on a danger badge was **3.9:1**
+on the page and **3.4:1** on one inside a popup, against the 4.5:1 that 11px
+text needs. Those are the *old* numbers: the film's strength made a failing
+number worse rather than causing it.
+
+So `badge.label` is `colors.label`. It clears 4.5:1 in every tone on every rung
+in both palettes, by 9:1 at the narrowest, measured off Chromium's own
+compositing rather than modelled. A badge stays quieter than the thing it is
+attached to by taking the caption step, which is a size — not by taking a colour
+that cannot carry its own words. This is the same correction the avatar's
+initials took for the same reason, four days later and in the opposite
+direction from the one the original note assumed.
+
+### And the film was still not enough
+
+Shipping that was not enough: the dark palette was still reported as
+indistinguishable. Chasing it with a bigger percentage turned out to be the
+wrong instrument, and the reason is visible only in oklch rather than in the ΔE
+the first pass used.
+
+`ΔE` said the dark palette was *better* separated than the light one at every
+strength — 0.035 against 0.030 at the shipped film. What it hid is **which**
+pairs are close. In the light palette the closest pair is neutral against
+success, which is a gray against a green: trivially named apart whatever the
+distance says. In the dark palette it is running against warning, and there
+`accent` is `hsl(27 100% 80%)` — a pale peach — while `warning` is
+`hsl(43 96% 56%)`. Composited at 22% over a near-black surface those land at
+hue 61° with chroma 0.024 and hue 87° with chroma 0.053: two brown washes,
+twenty-six degrees apart, one of them barely chromatic at all. Raising the film
+scales both and separates neither, because the cause is the hue distance and the
+low chroma `accent` brings to it. Every candidate up to 60% was checked; the
+pair stays the closest at all of them.
+
+**So the word carries the tone.** The rule the note above states — do not colour
+a badge's words with its tone — was right about the *raw* tone and wrong to stop
+there. `warning` at 11px is still 2.8:1, and that measurement is untouched. But
+a tone pulled **halfway to `label`** keeps its hue and gains the ink's contrast:
+the worst of the four measures 5.2:1 on its own chip, on every rung, in both
+palettes. `label` was already the ink, so this is the same expression in both
+palettes — it darkens toward near-black in one and lightens toward white in the
+other — rather than a palette-conditional value the component token groups have
+no way to carry.
+
+Half is measured too. At 60% of the tone the worst word is 4.2:1, under the bar
+on the floating rung where the chip is already a step darker; at 40% the hues
+wash out.
+
+This is the move the film could not make. A 20px chip's tint is a wash; its word
+is the mark a person looks at. Measured off the rendered board, the four words
+land 0.097 apart in oklab at the closest in the light palette and 0.048 in the
+dark one, against 0.030 and 0.035 for the films under them — and in the dark
+palette running and warning become a peach and a gold at four times the chroma
+of their washes.
+
+### What is left
+
+`running` and `warning` remain the closest pair in the dark palette; they are
+now a peach word on a brown chip against a gold word on an olive one, which is
+told apart at a glance, rather than two brown chips which were not. Moving them
+properly apart means moving `accent`, which every focus ring, link and live
+indicator in the product reads — still not a decision a badge gets to make.
+
+## Deliberately not done
+
+**`billing-setting-pure.tsx` keeps the old Card, and it is the file that needs a
+sixth decision.** Its nine cards are four things: sections (`p-5`), a tinted
+callout with an icon and a sentence (`border-primary/30 bg-primary/5 p-4`, which
+is an `Alert`), a summary row, and three that hold tables with
+`overflow-hidden`. The last group needs a **flush** card — no padding, corners
+that clip their content — which is a real axis this system does not have yet,
+and inventing it for one unreviewed file is how an axis arrives without a rule
+behind it. The callouts want the Alert this package already has. Both belong in
+a change that can be read against that file.
+
+**Two surfaces use Card for a rung it is not.**
+`device-resource-monitor.tsx` builds stat tiles with `bg-card/40 p-2
+shadow-none` and `floating-permission-request.tsx` uses it as a conversation
+panel with `CONVERSATION_PANEL_FRAME_CLASS`. Neither is on the card rung —
+they are the region rung and a product frame — so migrating them to `Card` would
+be using the primitive to get a box, which is what the note above says not to
+do. They are the next candidates for a region surface, if one is ever worth a
+primitive.
+
+**`ChatComposer.stories.tsx`** wraps the composer in a glass card
+(`rounded-[32px] bg-white/5 ring-1 backdrop-blur-2xl`) that exists to photograph
+the composer on a marketing background. It is a story, not a surface.
+
+**`packages/code-review-helper` keeps its own `separator.tsx`.** It is a
+separate package with its own viewer packaging rules and its own Radix
+dependency; nothing here reaches into it.
+
+## Verification limits
+
+The two every note in this series records. jsdom applies none of StyleX's
+compiled CSS, so `getComputedStyle` returns nothing and every visual assertion
+in the suite is made against the classes a style compiles to; the values in this
+note were read in Chromium off the rendered board. And a `color-mix` with
+`transparent` is resolved by the browser, not by the test — the films are
+`oklab(… / 0.08)` and `oklab(… / 0.14)` there, and a test can only pin that the
+five tones compile to five different classes over one shared chip.
+
+One limit is specific here. A Card's hover and an interactive card's cursor are
+the only states either primitive has, and neither is reachable in jsdom; the
+hover was driven with a real pointer on the board instead. Nothing about a Badge
+or a Separator has a state at all, which is the point of both.
+
+## Evidence
+
+Intended behavior: [Shared UI primitives](../../../../specs/ui-primitives.md),
+which stays `draft` with the block, the standing fact and the line stated.
+
+Inspected implementation: `packages/ui/src/{card,badge,separator}`, the corrected
+region row in `packages/ui/src/tokens/RULES.md`, the deleted
+`packages/components/src/ui/{badge,separator}.tsx`, and the twenty-nine migrated
+surfaces.
+
+Executed validation: `pnpm --filter @lody/ui typecheck` and
+`pnpm --filter @lody/ui test` (226 tests, 15 of them new across
+`test/card.test.tsx`, `test/badge.test.tsx` and `test/separator.test.tsx`, plus
+two new board tests); `pnpm --filter @lody/components typecheck`;
+`NODE_ENV=development pnpm --filter @lody/components test` (3306 tests, with one
+unrelated teardown race in `tests/acp-inline-selector-group-ui.test.ts` that
+passes when run alone — React's scheduler finishing work after the environment
+is torn down under parallel load, in a file that touches none of these three);
+`pnpm --filter @lody/site-docs typecheck`; `pnpm lint`, `pnpm format`,
+`pnpm lint:i18n`, `pnpm check:platform-boundaries`,
+`pnpm check:public-boundary` and `pnpm run docs check`. `pnpm check`'s own test
+leg fails here for the reason this worktree always does — React 19 exports `act`
+only from its development build, so the suite needs `NODE_ENV=development`.
+
+The board was opened in Chromium under both palettes and driven there. The card
+measured a 14px squircle on `elevatedBackground` under `shadow.card` with 16px
+padding and gap, its title at 16/24 weight 600 and its description at 14/20; the
+interactive one measured `#ffffff` at rest against `oklab(0.9689 …)` under a
+real pointer in the light palette, and `rgb(22,22,22)` against
+`oklab(0.2322 …)` in the dark. The five badges measured 20px tall at a 5px
+squircle with 6px inline padding, 11/16 text at weight 500 in
+`rgb(107,114,128)`, over films at 8% and 14% alpha, on all three rungs and in
+both palettes; a caller's glyph measured 12×12 inside its box; the clamped one
+reported 96px of box against 138px of text. The separator measured 1px in both
+axes, `rgb(230,232,237)` in the light palette and `rgb(40,40,40)` in the dark,
+stretched to its row's 28px when vertical.
diff --git a/.agents/notes/implemented/feature/2026-09-12-ui-disclosure-primitives.md b/.agents/notes/implemented/feature/2026-09-12-ui-disclosure-primitives.md
new file mode 100644
index 000000000..aafd6f67c
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-12-ui-disclosure-primitives.md
@@ -0,0 +1,207 @@
+# UI disclosure primitives: one family for the three ways of showing one thing
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` had no answer for the parts that show one thing out of several, so
+`Tabs`, `Accordion` and `Collapsible` were still Radix with Tailwind classes that
+reconstructed a segmented control by hand — `data-[state=active]:bg-background
+data-[state=active]:shadow-xs` repeated in four places, each at a slightly
+different height. This note records why the three are one family under a single
+new `disclosure` token group rather than three components; why the strip's
+indicator is drawn by `Tabs.List` rather than by a caller; why a revealed
+panel's padding has to ride on a child of the panel; and the one defect that a
+green test suite could not see — a disabled tab that was not dimmed, because
+neither a Base UI tab nor an accordion row carries the native `disabled`
+attribute that `:disabled` needs. Seven surfaces are migrated and the Radix
+`accordion.tsx` and `collapsible.tsx` are deleted; `tabs.tsx` survives for
+`ContextSwitch`, whose dark-hero `tone` prop is a decision about the landing
+page rather than about a tab.
+
+## Problem
+
+Four files were assembling the same segmented control out of Tailwind, and
+disagreeing while they did it. `tabs.tsx` gave a list `h-9 bg-muted p-1` with
+`data-[state=active]:bg-background data-[state=active]:shadow-sm` on the
+trigger; `context-switch.tsx` restated all of it at `h-10` with a `border` and a
+second version for a dark tone; `chat-landing.tsx` restated it again at `h-10`
+with `shadow-xs`; `mobile-stats-settings.tsx` used `grid-cols-4` and no height
+at all. Two of them carried a border in a system whose first rule is that no
+border token exists, and the four heights — 28, 32, 36, 40 — included one that
+is not on the control ladder.
+
+`accordion.tsx` was shadcn's default: `border-b` on every item, `hover:underline`
+on the trigger, and a pair of keyframe animations (`accordion-up`/`down`) that
+exist nowhere in the token rules. `collapsible.tsx` was three re-exports of Radix
+with no design in it at all, which meant every caller wrote its own reveal — and
+two of the three wrote none, so a panel appeared instantly.
+
+## Decision
+
+**Three layouts of one idea, one token group.** A tab strip lays the choices
+side by side and swaps the panel under them; an accordion stacks them and opens
+one in place; a collapsible is a single one of those rows with no list around
+it. Each is a trigger and the thing it shows, so `disclosure` covers all three
+for the reason `dialog` covers three modals: what differs is the arrangement,
+not what either is made of. The colour a closed row's label takes and the colour
+a tab you are not on takes are one decision, not two that can drift.
+
+The group is deliberately *not* `field`. None of the three holds a value — a tab
+picks what is shown, not what is stored — so none takes a name, answers to a
+`Field.Root`, or has an invalid state. A strip borrows the well the controls sit
+in because the elevation ladder puts it there, not because it is one of them.
+
+**The strip is the ladder read twice over.** A well-rung track with one thing
+raised out of it is the same pair a `Switch` takes, and it says the same thing:
+the track is where something sits, and the thing sitting in it is the one you
+can press. The indicator therefore takes `raisedBackground` under
+`shadow.raised`, which is what the Edges rule already gives "you can press
+this", and what a secondary `Button` already uses.
+
+**The indicator is one element that moves, and `Tabs.List` draws it.** A fill on
+each tab would light up and go out; one pill that slides between the choices
+says that the strip is a single control. Base UI publishes the selected tab's
+box on the indicator as physical pixels from the list's own top-left corner, so
+the pill is anchored physically with `left`/`top` and moved with `translate` —
+reading those offsets from the inline edge would put it on the wrong tab in a
+right-to-left document. The list renders it rather than the caller for the
+reason a submenu's chevron is drawn by its row: a strip assembled without one is
+a segmented control with nothing segmented.
+
+**The size is stated once, on the strip.** A tab's height, corner and share of
+the width all follow from the track's, so `Tabs.List size` carries them through
+context and no two tabs can disagree. Nested radius applies as everywhere else —
+a 28px track at `radius.small` holds a 4px tab, a 32 or 36px one at
+`radius.medium` holds a 6px tab — and `test/disclosure.test.tsx` pins the pair
+that shares a corner, which is the corner rule's own "medium 10 for 32 and 36px
+controls".
+
+**`stretch` is one prop because it is two facts.** Three of the migrated
+surfaces want a strip that takes the width on offer with the choices splitting
+it, and they each wrote it twice: `w-full` on the list and `flex-1` or
+`grid-cols-4` on the triggers. A surface that stated only the first would get a
+full-width groove with its choices huddled at the start, so the primitive takes
+one named choice and applies both.
+
+**Arrow keys move without taking.** This is Base UI's default and it is also the
+right one here: a tab swaps a panel that may be expensive to build — a settings
+tab that syncs history, a file preview that renders Markdown — and arrowing to
+the fourth tab should not build the second and third on the way. APG allows
+either; a surface whose panels are cheap says `activateOnFocus`, and the board
+shows one that does.
+
+**A row has no fill, so the line is the separator.** An accordion's rows are its
+own children, which leaves nowhere for a caller to put a separator part and
+nothing to stop them forgetting it, so the line is an inset `box-shadow` on the
+item and the last row draws none. That is the `separator` token used for exactly
+what the rules name it for — a divider between list rows — rather than a border
+reintroduced under another name.
+
+**A revealed panel's padding rides on a child.** Base UI animates the panel's
+height from a size it measures with `scrollHeight`, which counts padding. A
+padded panel is therefore cropped by exactly its own padding under `border-box`
+and overshoots by it under `content-box`. `Accordion.Panel` holds its prose in
+such a child, and the one migrated caller that had padding on the old Radix
+content — `session-plan-bar.tsx`, with `border-t pt-2` — has it moved inwards.
+This is the trap in the migration, because at rest the height is `auto` and the
+mistake only shows while the panel is moving.
+
+**A `Collapsible`'s trigger is Base UI's, unstyled.** A lone disclosure is
+opened by whatever the surface already had there — a card header, a row of a
+table, a button that also says how many files changed — so handing it a styled
+control would be a second thing to keep in step with `Button`. What the
+primitive owns is the panel: the measured height, the transition, and the
+overflow that hides what is arriving. Both migrated callers keep the trigger
+they had and gain the reveal they never wrote.
+
+## Found by opening it, not by a test
+
+**A disabled tab was not dimmed.** The strip was written with the family's usual
+`opacity: { ':disabled': … }`, the suite was green, and the board reported
+`disclosure.disabledOpacity 1`. Base UI does not put the native `disabled`
+attribute on a tab or an accordion row: both stay focusable so a keyboard
+reaches them and hears `aria-disabled`, which is the accessible behaviour and
+the opposite of what the field family does. `:disabled` therefore never matched,
+and neither did the `cursor` beside it. Both parts now take the dim from Base
+UI's state in the `className` callback, the way the field family reads validity
+in JS, and the tab also freezes its hover colour — a tab that cannot be taken
+should not light up under the pointer. `test/disclosure.test.tsx` pins the
+reason rather than the symptom: the element carries no `disabled` attribute,
+carries `aria-disabled`, and carries the state's classes.
+
+The jsdom limits the menu and overlay notes recorded apply here too, and two
+more are specific to this family. StyleX's compiled CSS is never applied in the
+test environment, so `getComputedStyle` returns nothing and every visual
+assertion is made against classes. And because no CSS is applied, no transition
+duration exists: Base UI reads `transition-duration` off the panel to decide how
+to reveal it, finds `0s`, and takes the no-motion path — so the two ends of a
+reveal never occur in a test at all. `isCollapsed` is exported and asserted
+directly for that reason, and the reveal itself was verified in Chromium, where
+the panel measures `height: 32px` with `transition: height 0.18s` and its child
+holds the 12px padding.
+
+Taking a tab with Enter is also unverifiable here: it is the platform's own
+activation of a real `<button>`, which jsdom does not synthesise.
+
+## The one test that had to move
+
+`tests/agent-config-dialog.test.tsx` selected a tab by dispatching `mousedown`
+alone, because that is when Radix committed. Base UI commits on the click, so
+the helper now performs a whole press. That is the same treatment the drawer
+note recorded for a test asserting Radix class names: a test written against a
+library's internal moment has to be rewritten against what a person does.
+
+## Deliberately not done
+
+**`ContextSwitch` stays on Radix, and so does the story that mimics it.** It is
+not a rename: the component takes a `tone` prop and paints a different tab strip
+for the landing page's dark hero, which the whole landing shares with its
+selectors and its chips. The right migration is for that hero to declare a
+palette with `ThemeRoot` and let the primitive resolve against it, which is a
+decision about `chat-landing-view.tsx` rather than about tabs. Its second
+complication is a "disabled" tab that must still answer a click, to open a
+tooltip explaining why it is unavailable — a Base UI tab will not, so that
+surface needs a control beside the strip rather than a tab in it.
+
+**`tree-view.tsx` keeps `@radix-ui/react-accordion`.** It builds a file tree out
+of accordion primitives rather than using the shadcn wrapper; it is a component
+of its own, not a caller of this one. `@radix-ui/react-collapsible` also stays,
+for `collapsible-card.tsx`. Both dependencies therefore remain in
+`packages/components`, while `src/ui/accordion.tsx` and `src/ui/collapsible.tsx`
+are deleted with their barrel exports.
+
+`packages/ui/AGENTS.md` is 266 bytes from its 8 KiB gate after this change. The
+Drawer and Tooltip bullets were compressed into their binding rule to make room,
+with the explanation left where it already was in the README; the next family to
+land will have to route a topic out rather than add a bullet.
+
+## Evidence
+
+Intended behavior: [Shared UI primitives](../../../../specs/ui-primitives.md),
+which stays `draft` with the disclosure family stated.
+
+Inspected implementation: `packages/ui/src/disclosure`, the deleted
+`packages/components/src/ui/accordion.tsx` and
+`packages/components/src/ui/collapsible.tsx`, and the seven migrated surfaces.
+
+Executed validation: `pnpm --filter @lody/ui typecheck` and
+`pnpm --filter @lody/ui test` (166 tests, 18 of them new in
+`test/disclosure.test.tsx` plus one new board assertion);
+`pnpm --filter @lody/components typecheck`; and
+`NODE_ENV=development pnpm --filter @lody/components test` (3306 tests; the one
+failure outside the changed scope, `tests/avatar-cache.test.ts`, passes when run
+alone and is the known parallel-load flake).
+
+The board was opened in Chromium under both palettes and driven there: the three
+track heights measured 28/32/36 with corners 8/10/10 and their tabs 20/24/28 at
+corners 4/6/6; the indicator measured `raisedBackground` under `shadow.raised`
+and moved from `translate: 4px 4px` to `137.6px 4px` when a third tab was taken;
+the accordion's first two items carried the inset separator and the last carried
+`none` in both palettes; and an open panel measured `overflow: hidden`,
+`height: 32px`, `transition: height 0.18s` with `padding-bottom: 0`, its child
+carrying the 12px. Three migrated surfaces were opened the same way — Project
+Settings, the DeepSeek provider dialog with its stretched strip and its two
+collapsibles, and the expanded session plan bar — plus the open-source notices
+accordion with both of its rows open.
diff --git a/.agents/notes/implemented/feature/2026-09-12-ui-feedback-primitives.md b/.agents/notes/implemented/feature/2026-09-12-ui-feedback-primitives.md
new file mode 100644
index 000000000..52c0b309b
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-12-ui-feedback-primitives.md
@@ -0,0 +1,229 @@
+# UI feedback primitives: what the system says back
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` had nothing for the parts that report: an inline message, a toast, a
+progress bar, a skeleton and a spinner were still Radix-era files reaching for
+colours the package did not have — `text-status-warning` and `bg-primary/20`
+against a palette with no success, no warning, and a rule that `accent` is for
+live state only. This note records why those five are one `feedback` family; why
+the palette gains exactly two semantic colours, taken from the values the
+product already ships; why a tone is a tint and a mark and never a fill, and why
+the tint is mixed per rung in a style rather than frozen into six tokens; and
+why the toast is built here but migrated nowhere — 61 files and 267 call sites
+reach for `sonner`, and two toasters alive at once would stack messages in two
+places. Alert, Progress, Skeleton and Spinner are migrated across seventeen
+surfaces and their four Radix files deleted.
+
+## Problem
+
+Five files, five vocabularies, and three of them reaching outside the token
+rules.
+
+`alert.tsx` was a `cva` with `rounded-lg border px-4 py-3` — a border in a
+system whose first rule is that no border token exists — and a `destructive`
+variant that coloured the whole message red while leaving its surface the card.
+`progress.tsx` was `bg-primary/20` with a `bg-primary` child, which no rule in
+this system names: `accent` is for live state, and an alpha of the *primary*
+colour is neither. `skeleton.tsx` was `animate-pulse bg-primary/10`, where the
+rules explicitly say a skeleton is one of the few things that takes a gray.
+`loading.tsx` was a lucide spinner in a centring box, which is two decisions —
+the mark, and where it goes — welded into one component. `sonner.tsx` was 100
+lines of `!important` overrides fighting a third-party toast's own layout.
+
+The product had also grown its own status palette in Tailwind —
+`--status-success`, `--status-warning` — which `@lody/ui` could not see. So a
+warning in a settings page and a warning in a primitive were two different
+oranges by construction.
+
+## Decision
+
+**Five components, one group.** `feedback` covers all of them because what the
+system says back has two halves of one sentence — what happened, and that it is
+not finished — and the halves share more than they look: the tone that marks a
+message is the tone a bar takes when it reports a quota nearly spent, and the
+type of a toast's title is the type of an alert's. One group is the same call
+`field` makes over a checkbox and a select trigger.
+
+**The palette gains `success` and `warning`, and nothing else.** Their values
+are the product's own `--status-success` and `--status-warning` in both
+palettes, so a message in a primitive and a status line in a settings page are
+finally the same colour. They are named as outcomes rather than actions:
+`destructive` stays the colour of an action that destroys *and* of an outcome
+that failed, which is why there is no third "danger" colour.
+
+**A tone is a tint and a mark, never a fill.** A filled panel would leave the
+elevation ladder and claim the attention a modal is for. The tint is 8% of the
+tone mixed into the rung's own background — the mix `popup.destructiveHighlight`
+already uses to say "this row is dangerous" — and it is mixed in
+`feedback/surface.ts` rather than frozen into tokens, because it is a mix *of a
+surface* and the two surfaces are on different rungs. Six tint tokens would have
+had to pick one base, and whichever they picked, the other rung would stop
+looking like itself.
+
+**The neutral tone tints too, and that was not the first answer.** It began with
+no tint at all, on the argument that the card rung is already a surface. Opening
+the board showed why that is wrong: in the light palette `elevatedBackground`
+and `background` are the same white, so a neutral alert inside a card was a
+shadow and nothing else. It now takes 4% of `label` — the derivation a popup's
+highlight already uses when a named fill collapses into its surface. A toast
+needs none: nothing else is ever on the floating rung beside it.
+
+**The mark belongs to the tone.** There is no `icon` prop. The point of a tone
+is that a person knows what kind of message this is before reading a word of it,
+and a caller free to choose a glyph can put a tick on a failure. The warning is
+deliberately the one mark that is not a circle: a triangle is what separates it
+from an error for a person who does not see the two colours apart.
+
+**The role follows the tone.** `alert` for a failure or a warning, which
+interrupts what a screen reader is saying; `status` for the rest, which waits
+its turn. It is not a prop, because a surface that had to choose would choose
+`alert` every time, and that is the version that teaches people to ignore it.
+
+**A toast is the same message on the floating rung.** Not the modal rung: a
+toast does not have to be answered, so nothing behind it recedes and nothing
+about it holds the keyboard. `Toast.Provider` renders its own viewport, so a
+surface wraps its app once instead of keeping a provider, a portal, a viewport
+and a list in step — the same call `Select.Content` and `Menu.Content` already
+make. The tone travels as Base UI's `type`, which is the field it already
+carries from the call that reported to the toast that shows it.
+
+Two things about the toast are corrections to a first draft. Its arrival was
+written as a keyframe animation on the `starting` status, which cannot work:
+that status lasts one frame, and an animation whose class is removed after a
+frame is cancelled. It is a transition between two declared ends now, the way
+the popover's rise and the accordion's reveal are. And the viewport's accessible
+name was Base UI's English "Notifications", which a translated product cannot
+use; it takes the product's word through `label`.
+
+**A bar is `accent`, and a bar with no value is a different report.** The rules
+give `accent` to live state and name the running indicator by name; ink there
+would say the value is stored, which is the opposite of a bar in motion. A
+value of `null` is not a bar at zero — "I do not know how far" and "nothing has
+happened" are different things to tell someone — so it becomes the same track
+with a band crossing it. The band's sweep ends at 250% of its own width, which
+is where its leading edge reaches the end of the track; the first draft used
+350% and the bar spent a quarter of every cycle off the track, reading as
+stopped.
+
+`Progress` also takes a tone, because two of the three migrated callers needed
+one: a quota nearly spent is the warning an Alert would carry, and a usage meter
+is not live state at all and gives the accent back. Without it neither caller
+could migrate without reconstructing the bar's colours in Tailwind, which is
+exactly what the package forbids.
+
+**An icon-only `Button` now draws the box its glyph needs, which is a defect
+this change inherited rather than introduced.** This package's glyphs state
+their size as 100% of whatever holds them, and every holder gives them a 16px
+box — a menu row's leading box, a Select's chevron, a message's mark. An
+icon-only Button gave none, and StyleX has no descendant selector with which it
+could reach the glyph, so a cross filled a 28px button edge to edge: measured
+28×28 in Chromium, on the Dialog's close since #634 and on the Toast's close as
+soon as it was written. `Button` renders a `button.iconSize` box around its
+children when `icon` is set. The 122 icon buttons in `@lody/components` size
+their own lucide icons at 14 or 16px, so the box is a no-op for them and a
+constraint on the three that pass a caller's icon straight through. The board's
+own `PlusGlyph` had been quietly working around the same hole with hardcoded
+`width="14"`, which is gone now.
+
+**A skeleton takes its room as props.** `width` and `height` resolve to inline
+values through a dynamic style, which nothing has to win a specificity fight
+against — and there is a fight to lose: the line shape sets a default height,
+and a caller's `h-3` would have to beat it from another stylesheet in another
+layer. It is hidden from screen readers, and it stops breathing under reduced
+motion, because it reports nothing its own shape does not already say.
+
+**It is a `Spinner`, not a `Loading`.** The mark, not the state: where it goes,
+whether what is behind it is dimmed and what it is waiting for are the surface's
+decisions, and a component called `Loading` that centres itself in a box has
+already made two of them. It is drawn in `currentColor` so the one inside a
+ghost button takes the button's ink, and it keeps turning under reduced motion —
+it is the only thing saying the work has not stopped, and a still spinner says
+it has.
+
+## Deliberately not done: the toast migration
+
+`Toast` is built, on the board, and tested; nothing uses it. 61 files import
+`sonner` and 267 call sites call `toast.error`, `toast.success`, `toast.info`
+and `toast.warning`. That migration is a single flip — two toasters alive at
+once would stack messages in two places on one screen — so it cannot be done a
+file at a time, and doing it here would put the whole product behind one
+unreviewable diff.
+
+What it needs, recorded so the next change does not rediscover it: a shim that
+maps `toast.error(message, { description })` onto `manager.add({ title,
+description, type: 'danger' })`, a decision about `toast.promise` (Base UI has
+one, with the same shape), and the deletion of `sonner.tsx`, whose 100 lines of
+`!important` overrides exist to make a third-party toast lay out the way this
+one does natively. The product's `toast.info` maps to the neutral tone, which is
+why neutral exists as a tone at all.
+
+## Migrated
+
+Seventeen surfaces, and four Radix files deleted (`alert.tsx`, `progress.tsx`,
+`skeleton.tsx`, `loading.tsx`) with their barrel exports.
+
+- **Alert** — four auth and device pages. Each dropped a lucide glyph it was
+  passing in beside the message, and `device-auth-page.tsx` dropped a
+  hand-rolled success alert built from `border-status-success/30
+  bg-status-success/[0.08] text-status-success`, which is the thing the tone now
+  is.
+- **Progress** — three. `billing-setting-pure.tsx` dropped
+  `[&>div]:bg-destructive` for `tone="danger"`; `session-usage-popover.tsx`
+  dropped `bg-foreground/10 [&>div]:bg-foreground/55` for `tone="neutral"`.
+- **Skeleton** — nine, every one of which was sizing itself with Tailwind and
+  three of which were overriding the corner or the fill. Sizes became `width`
+  and `height` props; the overrides went.
+- **Spinner** — seven call sites across two settings screens, every one of them
+  `<Loading size="sm" className="h-5 w-9" />`: a spinner centred in the box a
+  Switch would occupy. The box is the caller's now and the spinner is the
+  primitive's, and it announces the wait in the product's language rather than
+  being a silent icon.
+
+## Verification limits
+
+The same two the menu and overlay notes record. jsdom applies none of StyleX's
+compiled CSS, so `getComputedStyle` returns nothing and every visual assertion
+is made against the classes a style compiles to. And a portalled toast is not in
+the board's static markup, which is why the board carries a stand-in beside the
+button that reports a real one.
+
+One limit is specific here: a toast's arrival, its swipe and its five-second
+timeout are Base UI's, driven by real pointer input and real timers, and the
+jsdom suite drives none of them. What the tests pin is this package's half —
+that a message reported through the manager arrives with its tone, that the
+title and description are the Alert's own parts rather than a second pair, that
+the viewport takes no pointer while each toast takes it back, and that closing
+one removes it.
+
+## Evidence
+
+Intended behavior: [Shared UI primitives](../../../../specs/ui-primitives.md),
+which stays `draft` with the messages and the waits stated.
+
+Inspected implementation: `packages/ui/src/feedback`, the two new colours in
+`packages/ui/src/tokens/colors.stylex.ts`, the deleted
+`packages/components/src/ui/{alert,progress,skeleton,loading}.tsx`, and the
+seventeen migrated surfaces.
+
+Executed validation: `pnpm --filter @lody/ui typecheck` and
+`pnpm --filter @lody/ui test` (183 tests, 15 of them new in
+`test/feedback.test.tsx`, one pinning the icon button's glyph box, plus one new
+board assertion);
+`pnpm --filter @lody/components typecheck`; and
+`NODE_ENV=development pnpm --filter @lody/components test` (3306 tests, one
+timeout outside the changed scope in `tests/path-launchers-setting.test.tsx`
+that passes when run alone — the known parallel-load flake).
+
+The board was opened in Chromium under both palettes and driven there: the four
+alert tones measured their tints as `oklab()` mixes of the card rung with the
+16px mark in the tone's colour; a real toast, reported through the manager,
+landed 16px below the top edge at `z-index: 100`, 360px wide, with the popover
+shadow, `pointer-events: none` on the viewport and `auto` on itself, and it was
+the topmost painted element at its own centre; the bars measured a 6px well-rung
+track with the accent in it; the skeleton and the three spinner sizes were read
+for fill and measurement. Both close crosses measured 16×16 inside their 28px
+buttons after the Button fix, where each had been 28×28 before it.
diff --git a/.agents/notes/implemented/feature/2026-09-12-ui-overlay-primitives.md b/.agents/notes/implemented/feature/2026-09-12-ui-overlay-primitives.md
new file mode 100644
index 000000000..abd5ada39
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-12-ui-overlay-primitives.md
@@ -0,0 +1,305 @@
+# UI overlay primitives: the popover, the modal rung, and the one thing that inverts
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` owned the floating surface a list and a menu open. This note records
+the things that sit over a page and were still Radix with Tailwind classes:
+`Popover`, `Dialog`, `AlertDialog`, `Drawer` and `Tooltip`. It records why the
+popover joins the `popup` group instead of opening a second floating surface;
+why the three modal surfaces are one family under one new `dialog` group; why the
+tooltip is the one floating part that does **not** read `popup`; and the defects
+found in the primitives as they were first written — two by the tests, three more
+only by opening the board in Chromium. It also records
+why there is deliberately no `Sheet`; and what this change does not do: the
+`Drawer` is migrated and the Radix `sheet.tsx` deleted, while the Popover,
+Dialog, AlertDialog and Tooltip call sites are not.
+
+## Problem
+
+The five deleted-or-doomed files reached for a vocabulary the token rules do not
+have. `tooltip.tsx` was `border border-border shadow-md bg-popover` with
+`zoom-in-95`; `popover.tsx` the same plus a `useSafeAreaInsets` merge into
+Radix's `collisionPadding`; `dialog.tsx` `border border-border bg-background
+shadow-lg rounded-lg` at `max-w-lg`; `alert-dialog.tsx` shadcn's default with a
+`zoom-in-95` the dialog beside it had already been changed to drop;
+`sheet.tsx` `border-l border-border` with a `cva` for its four sides. Two of them
+carried a hairline border in a system whose first rule is that no border token
+exists, and the dialog and the alert dialog disagreed about their own animation.
+
+`dialog.tsx` also carried the one piece of real design in the set: it named its
+own panel to `PopupContainerProvider`, because a modal traps focus and locks the
+scroll by DOM position and a Select portalled to the body is "outside" the dialog
+to the dialog. That belongs in the primitive, not in a product file.
+
+## Decision
+
+**A popover is the surface a list already opens.** `popup` covers every floating
+surface, and `src/popup/surface.ts` already held the popup, the rows, the group
+label and the separator. A popover reads all of it and replaces five
+declarations: the `--anchor-width` a list takes because its control shows the
+value it holds, the 4px inset that lets a row bleed to the surface's edge, and
+the three that make the type a control's rather than prose. Two tokens are added
+to `popup` rather than a `popover` group being opened beside it —
+`panelPadding` and `panelGap` — plus `description`, which resolves to the same
+colour as `groupLabel` today and means something else. `test/popover.test.tsx`
+pins the five as a count, the way `test/menu.test.tsx` pins a menu's one.
+
+The count was wrong when it was written. The first draft of this note, the doc
+comments and the test all said "exactly two", counting only the layout pair and
+forgetting that stepping from the control type rule to the prose rule replaces
+three more declarations. The test failed, and the claim was corrected rather than
+the test loosened.
+
+**Dialog, AlertDialog and Drawer are one family, not three components.** They
+share `src/dialog/surface.ts` and one `dialog` token group for the reason `field`
+serves the whole control family: the three differ in how they arrive and in what
+may dismiss them, not in what they are made of. A dialog carries a cross; an
+alert dialog does not, and a press beside it is not an answer; a drawer arrives
+from an edge and can be dragged back out of it.
+
+**There is no `Sheet`, and the first version of this change was wrong about
+that.** It shipped a `Sheet` built on Base UI's `Dialog` with a `side` prop —
+which is Base UI's `Drawer` reimplemented out of the wrong primitive. Base UI's
+own subtitle for Drawer, *"a panel that slides in from the edge of the screen"*,
+is word for word what that `Sheet`'s documentation said. That is the mistake the
+menu note already recorded under a different name: a second name for the same
+component and a second thing to keep in step.
+
+The behaviour is the real argument, not the naming. A panel that slides in from
+an edge promises that it can be sent back, and on a touch screen a person will
+try; a dialog cannot answer that gesture at all. The repository had already voted
+on this — 23 files reach for `vaul` precisely because the Dialog-based sheet was
+not enough — and every one of the five callers this change migrates is a mobile
+bottom or side panel. The `Sheet` migration would have made five surfaces worse
+on touch than the vaul drawers beside them.
+
+**A drawer is laid out by a viewport, not positioned by itself.** That is the
+mechanical reason the two cannot be the same component. A dialog centres itself
+with `translate(-50%, -50%)`, which spends the one property CSS has for movement;
+Base UI's Drawer puts the panel inside a fixed `Viewport` whose alignment picks
+the edge, leaving the panel's `transform` free to carry the drag from
+`--drawer-swipe-movement-x/y`. `test/drawer.test.tsx` pins that the drawer panel
+never carries the dialog's centring class.
+
+**The edge is stated in writing direction; the swipe is derived from it.** Base
+UI names a swipe physically, because a finger moves in physical space, while this
+package names an edge as `start`/`end`. `drawerSwipeDirection` resolves between
+them and flips only the inline pair, so a drawer on the start edge is swiped away
+leftwards in a left-to-right document and rightwards in a right-to-left one. The
+direction is read from the document rather than taken as a prop.
+
+**Flush or inset is the second axis.** A flush drawer is part of the window: it
+meets the edge, squares the two corners that touch it, and pads its own content
+clear of the safe area. An inset one is an object resting over the page: the
+viewport pads it off every edge by `dialog.drawerInset`, it keeps all four
+corners, and it has to travel that gap as well on its way out. The gap is the
+viewport's padding rather than a margin on the panel for the same reason the
+position is — a margin would be one more thing competing with the drag.
+
+**A drawer crosses the window, so it takes a new motion step.** The scale gains
+`duration.slow` at 320ms: 180ms over 600px reads as a snap rather than a slide.
+The backdrop lifts with `--drawer-swipe-progress` rather than only at the end, so
+a half-dismissed drawer shows a half-lit page and the gesture reads as
+reversible.
+
+Escape still closes an alert dialog. The first draft claimed it did not — that
+was an assumption about Base UI, and `test/dialog.test.tsx` showed it false. It
+is also the right behaviour: Escape is the platform's cancel, and removing it
+leaves a keyboard user holding a panel they have no way to put down. What an
+alert dialog actually refuses is the outside press, which is the thing a stray
+click produces.
+
+**An alert dialog's answers are Buttons, not parts.** Which variant an answer
+takes is the surface's decision — "Delete" is the destructive variant in one
+place and an ordinary primary in another — so the footer writes
+`AlertDialog.Close render={<Button variant="destructive" />}`. That is the same
+reasoning `Menu.Trigger` already follows, and it drops the old
+`AlertDialogAction`/`AlertDialogCancel` pair, which decided both.
+
+**The panel is held in state, not in a ref.** `usePanelContainer` began as the
+callback ref the deleted `dialog.tsx` used, and `test/dialog.test.tsx` caught it:
+React attaches a child's refs before its parent's, so a Select rendered open
+inside a dialog rendered open reads the ref while it is still null and portals
+itself to the body — precisely the case the whole mechanism exists to prevent. In
+the product this only shows when both open in one commit, which is why five
+months of the ref version looked fine. Holding the element in state costs one
+extra render when the panel mounts and makes the container a fact rather than a
+race.
+
+**Safe areas are read with `env()`.** The deleted dialog used `--safe-area-top`,
+a variable the desktop shell publishes. A shared package cannot depend on a host
+publishing one, and `env(safe-area-inset-*)` is standard CSS that resolves to 0
+everywhere it does not apply, so the panel's cap and centre are stated with it.
+
+**A tooltip does not read `popup`.** This is the one place the elevation ladder
+names something apart, and it is worth restating why: the ladder puts a menu, a
+popover and a list on `raisedBackground` under `shadow.popover`, and then says
+"tooltip is `label` with `shadow.medium`". That is an inversion. A popup is a
+place to act; a tooltip only names what is already under the pointer, and has to
+read at a glance over whatever it covers without becoming another surface. So
+`tooltip` is its own group, and the chip carries the page's text colour as its
+fill and the page's background as its ink — the same two colours, in the same
+order, that a primary button and a checked box take.
+
+Two things about it are behaviour rather than appearance and are pinned as such.
+It never takes the pointer: one that landed under the cursor and accepted it
+would take the pointer off its own trigger and flicker itself closed and open
+again. And it sits above every popup, because what it names may itself be in one.
+
+## The tooltip's accessibility contract, which the migration must carry
+
+Base UI 1.7 makes a tooltip **visual only**: the popup has no `role="tooltip"`,
+and no `aria-describedby` is wired onto the trigger. Its own documentation says
+so — a tooltip reaches neither touch nor a screen reader, and a role that
+promised otherwise would be a lie. The trigger must therefore carry an
+`aria-label` that matches what the tooltip says.
+
+This is the sharpest edge in the work still owed. Radix wired `aria-describedby`,
+so a Lody control whose only accessible name came from its tooltip is named today
+and would be nameless after a mechanical port. There are 75 files importing
+`@/ui/tooltip`; each has to be read for that, not swapped.
+`test/tooltip.test.tsx` pins the contract so it cannot be forgotten.
+
+## Found by opening it, not by a test
+
+Four defects survived a green suite. Three did so for the reason the menu note
+already recorded: the tests run in jsdom, where StyleX's compiled CSS is never applied,
+so no test here can see a layout or a colour.
+
+**Every edge-anchored panel collapsed to the height of its own content.** The
+first version composed the centred dialog panel, a reset that set `top: auto`,
+and an edge style that set `inset-block: 0`. StyleX keeps one class per property *key* and
+has no idea that `top`, `inset-block-start` and `inset-block` are three names for
+one thing, so both declarations survived into the stylesheet and the cascade, not
+the author, picked the winner. It picked `top`, leaving `top: auto` with
+`bottom: 0`: a 380px panel 158px tall, sitting on the bottom edge. Every inset in
+`dialog/surface.ts` is now a logical longhand, and each edge states all four
+rather than relying on a reset before it — "the last style wins" is only true
+between styles that use one vocabulary. This is a general hazard for this
+package, not a detail of drawers.
+
+**The board's dialog stand-in ran off its column, twice, for two reasons.**
+First `width: 100%` on a flex item resolves against the whole row rather than the
+room left in it. Then, once the stand-in was made `position: relative` so the
+cross had something to pin to, it started honouring the panel's own
+`inset-inline-start: 50%` and sat half a column to the right of itself. A
+stand-in that drops `position: fixed` inherits every inset the real part set.
+
+**The overlay painted over the drawer.** The panel rendered greyed under its own
+backdrop, which is the whole surface looking subtly wrong rather than obviously
+broken. `position: fixed` creates a stacking context, so the `z-index: z.dialog`
+on the panel ordered it only against its own siblings inside the viewport; the
+viewport itself had no `z-index`, counted as `auto` against the page, and the
+backdrop at `z.dialogBackdrop` won. The rung's stacking belongs to the viewport,
+because the viewport is the element that stacks against the product shell, and
+the panel now states none. This one *was* checkable without a browser — it is a
+fact about which classes compile onto which part — and `test/drawer.test.tsx`
+pins it now: the viewport carries the same z-index class the dialog panel does,
+the backdrop carries the other, and the drawer panel carries neither.
+
+**The board's dimension probes reported the width they were given, not the one
+they declared.** `dialog.width` read back as 167.5px because the probe was a flex
+item in the metrics row. It is out of flow and hidden now, the way the rise probe
+already was: a probe that participates in layout measures the layout.
+
+One more was an error in the examples rather than in the primitives.
+`tone="destructive"` on a `Button` is deliberately a no-op when the variant is
+already `primary` or `destructive` — the destructive *variant* is the destructive
+primary — so the alert dialog's answer rendered as an ordinary primary button in
+the gallery, the README, this note and the component's own doc comment. All four
+now say `variant="destructive"`.
+
+## The naming collision this leaves behind
+
+Eleven of the 23 vaul files are *named* `*-sheet.tsx` — `mobile-new-chat-sheet`,
+`mobile-session-tab-sheet`, `mobile-acp-history-sheet` and so on. The product's
+word for a vaul drawer is "sheet", and this package now says a panel from an edge
+is a Drawer. Naming the primitive `Drawer` is what resolves that rather than
+deepening it: when those files migrate they become drawers in both the import and
+the filename. `session-detail.tsx` imports both today, so the new primitive is
+aliased `UiDrawer` there until the vaul one goes.
+
+## Deliberately not done: four of the five migrations
+
+`Drawer` is complete: all five callers are on `@lody/ui/drawer`, the Radix
+`sheet.tsx` and its barrel export are deleted. `sidebar.tsx`'s
+`[&>button]:hidden` became `closeButton={false}`, and its `side` moved from
+`left`/`right` to the writing-direction `start`/`end`. The 23 vaul drawers are
+untouched; Base UI's Drawer is what they eventually migrate to, and this change
+makes that a rename rather than a third vocabulary.
+
+One test moved with it, and the way it had to move is worth recording.
+`tests/path-launchers-setting.test.tsx` asserted `bottom-0` and
+`slide-in-from-bottom` on the panel — the class names the deleted `cva`
+produced, which is a description of the component rather than of what a person
+sees. It now asserts `data-side="bottom"`, which is the fact the primitive
+states and from which the pinning, the radius and the slide are all derived. Any
+other test reaching for a Radix class name will need the same treatment.
+
+The other four are not migrated, and the reason differs by component.
+
+**Popover** is 14 files, and the blocker is not size. The deleted
+`PopoverContent` folded `useSafeAreaInsets()` into Radix's `collisionPadding` on
+every popover in the app — a product policy about a device, which `@lody/ui`
+cannot hold and should not. Two call sites also use `PopoverAnchor`, one of them
+with a `virtualRef`, which becomes Base UI's `anchor` prop on the positioner.
+Both want a decision per surface rather than a rename: most likely a thin
+`@lody/components` wrapper that keeps the safe-area policy and re-exports the
+rest, which is where that policy belongs anyway.
+
+**Dialog** (34 files), **AlertDialog** (19) and **Tooltip** (75) are together
+about a thousand usage sites, and none is an import swap: `asChild` becomes
+`render`, `AlertDialogAction`/`Cancel` become a `Close` around a `Button` whose
+variant each surface has to choose, `DialogContentWithoutClose` becomes
+`closeButton={false}`, the `noAnimation` escape hatch the command palette uses
+has no equivalent yet, and every tooltip trigger has to be given a name. Landing
+that with the primitives would put the whole shell behind one unreviewable diff.
+
+Until those land, two vocabularies are alive at once, which is the same cost the
+menu change accepted and the same reason not to leave it open indefinitely.
+
+## Evidence
+
+Intended behavior: [Shared UI primitives](../../../../specs/ui-primitives.md),
+which stays `draft` with the popover, the modal rung and the tooltip stated.
+
+Inspected implementation: `packages/ui/src/popover`, `packages/ui/src/dialog`,
+`packages/ui/src/tooltip`, `packages/ui/src/popup`, and the deleted
+`packages/components/src/ui/sheet.tsx`.
+
+One limit of the browser pass is worth stating: a drag cannot be synthesised
+from JavaScript here — Base UI reads real pointer input, and dispatched
+`PointerEvent`s leave `data-swiping` unset. What was verified instead is this
+package's half of it: setting `--drawer-swipe-movement-y` moves the panel by
+exactly that much, and setting `--drawer-swipe-progress` fades the backdrop to
+match. The gesture itself is Base UI's tested code; that it is wired to these
+styles is what was checked.
+
+Executed validation: `pnpm --filter @lody/components test` under
+`NODE_ENV=development` (3306 tests, all passing; the root `pnpm check` does not
+set that variable and every React test fails there with `act is not a function`,
+which is a pre-existing gate problem rather than one this change introduced).
+The board opened in Chromium under both palettes and every
+part driven there — all eight drawer configurations measured against the
+viewport, flush and inset on each of the four edges, with the derived
+`data-swipe-direction` read off each,
+the dialog and the alert dialog opened and read for fill, padding, radius and
+answer variant, the popover for its panel padding and prose type, the tooltip
+hovered for its inversion — plus `pnpm --filter @lody/ui typecheck` and
+`pnpm --filter @lody/ui test` (141 tests, 23 of them new across
+`test/popover.test.tsx`, `test/dialog.test.tsx` and `test/tooltip.test.tsx`,
+plus three new board assertions), and `pnpm --filter @lody/components typecheck`
+for the Drawer migration.
+
+The same limit the menu note recorded applies here and is worth repeating: these
+tests run in jsdom, where StyleX's compiled CSS is never applied, so
+`getComputedStyle` returns the empty string for every property this package sets.
+Every visual assertion is therefore made against the classes a style compiles to,
+and the gallery test renders the board to static markup, where a portalled popup
+is closed and unmounted — nothing inside a `Dialog.Content`, `Popover.Content` or
+`Tooltip.Content` is in that markup, which is why the board carries stand-ins for
+all three. A defect in what a person actually sees can still survive a green
+suite; the board has to be opened in Chromium under both palettes.
diff --git a/.agents/notes/implemented/feature/2026-09-12-ui-table-pagination.md b/.agents/notes/implemented/feature/2026-09-12-ui-table-pagination.md
new file mode 100644
index 000000000..fc43abbef
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-12-ui-table-pagination.md
@@ -0,0 +1,320 @@
+# UI table and pagination: records, and the way to the ones that did not fit
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+`@lody/ui` had no way to show records, and the first attempt at one was a styled
+`<table>`: parts mirroring the HTML elements, with the design work all in the
+skin. It was rejected on review as conventional, and this note records the
+design that replaced it. **A column is stated once** — `Table` takes
+`columns: TableColumn<Row>[]`, and from that one fact it owns the width, the
+ordering, the selection, the empty row's span, the head that stays, and the
+stack a table becomes when its own container is too narrow. The evidence for
+that shape is in the repository: every surface here that draws a table writes
+its column template as a literal `grid-cols-[…]` string in the header and again
+in the row, by hand, and one of them renders every cell a second time for a
+narrow window. This note also records why a table is the only part of this
+package with no surface of its own; why `border-collapse: separate` is what lets
+its line, its sticky head and a row's focus ring all be box-shadows; why the two
+row fills are the palette's `hoverFill` and `selectedFill`; and why `Pagination`
+is one control with the windowing rule inside it. Base UI ships neither
+component. Both Radix files are deleted and three callers migrated.
+
+## Problem
+
+Two files, one of them a design the package had already outgrown and the other
+dead.
+
+`table.tsx` gave every row `hover:bg-muted/50` and every cell
+`p-2 whitespace-nowrap`, with `[&_tr]:border-b` on the head and
+`[&_tr:last-child]:border-0` on the body — Tailwind reaching into descendants
+for what a part should own. The always-on hover is the interesting defect: its
+one in-repo caller, the onboarding summary, is a two-column list of facts that
+nothing can be done to, and it had to pass `hover:bg-transparent` on every row
+to put the default back. A default a caller has to undo is the wrong default.
+
+`pagination.tsx` had **no callers**. It was already half-migrated — its
+`PaginationLink` rendered `@lody/ui`'s `Button` — and the pieces it exported
+(`Root`, `Content`, `Item`, `Link`, `Previous`, `Next`, `Ellipsis`) put the part
+that is actually hard back on the caller: deciding which pages to list, and
+where to put the gaps. The repository does have a pager, and it is hand-rolled:
+`paged-file-viewer.tsx` has two ghost buttons and a number `<Input>` for a file
+of up to 49,000 pages, and it navigates on every keystroke, so typing `45` reads
+and throws away page 4 on the way.
+
+Neither file could state any of this in tokens: `@lody/ui` had no token for a
+row's height, the line between rows, the colour of a column's name, or the two
+fills a row takes.
+
+### And the first attempt was not a design
+
+The first version of this work shipped `Root / Head / Body / Foot / Row /
+ColumnHeader / Cell / Caption` — the HTML element list with React casing — and
+put every decision into the skin. Reviewed, it was "very standard, and very
+ordinary", and that was right. A caller assembling those parts still has to keep
+the head and the body in step, still has to work out which pages of a column's
+width belong where, still has to count the columns an empty row must cross, and
+still has to hand-roll the narrow layout. The parts are kept, because a table
+that is *not* a list of records needs them, but they are no longer the thing a
+caller reaches for.
+
+## Decision
+
+**One group, `table`, for both.** A pager exists because a table did not fit,
+the two sit on the same rung, and they state the same size; how dense a list of
+records is has one place to change rather than two. This is the call `dialog`
+makes over the Drawer — a drawer is not a dialog either, it shares the rung and
+the construction. The pager's own tokens are prefixed inside the group
+(`pagerGap`, `pagerHint`, `pagerJumpWidth`) the way `feedback` carries
+`toastWidth` beside `spinnerSmall`.
+
+**A column is stated once, and everything follows from it.** This is the design.
+A table's hard parts are facts about a *column* — how wide it is, which way it
+aligns, whether it holds figures, whether the table can be ordered by it, what a
+totals row holds under it — and a column written twice can drift. The evidence
+is not hypothetical: `device-resource-monitor.tsx` and
+`account-machines-overview.tsx` each write
+`grid-cols-[minmax(160px,40%)_minmax(0,1fr)…]` in the header and again in the
+row; `review-policy-setting.tsx` hand-rolls `role="table"`, `role="row"` and
+`role="columnheader"` around a template written twice. What the table can do
+once the columns are stated, and a caller cannot:
+
+| it owns | because |
+| --- | --- |
+| the widths | a `<colgroup>` reaches cells the caller never writes |
+| the ordering | one column at a time is unrepresentable per column |
+| the selection | the head's box is *derived* from the rows, mixed and all |
+| the empty row | only the table knows how many columns to cross |
+| the head that stays | it is the root that knows there is a box to stay in |
+| the stacked layout | a cell can carry its column's name when the head is gone |
+
+**The rows are never reordered.** The table owns the control, the arrow,
+`aria-sort` and the shape of the state; the surface owns the data, because a
+server sorts, a comparator breaks ties and a page is one slice of many. A table
+that quietly sorted what it was handed would be wrong exactly once — on the
+surface that had already sorted it.
+
+**Selection is a tick, and the fill is second.** `aria-selected` on a `<tr>`
+inside a `<table>` is an ARIA violation, so the table puts a `Checkbox` in the
+row: the thing a person presses and the thing a screen reader is told are then
+the same thing. The box over that column is derived rather than passed — none,
+some (`mixed`), or all — and a select-all keeps keys the table is not currently
+showing, so one page of a long selection does not drop the other pages.
+
+**A table has no surface.** No background, no shadow, no radius. Every other
+part in this package names a rung; a table deliberately names none, because it
+is rows on whatever was already there, and a table that drew a card inside a
+card is the same fill twice — the defect the feedback family's neutral tint had
+to fix. The one exception is a head that *stays*: that is no longer a row but a
+band over the rows moving under it, and the ladder already has a rung for a band
+over the page. A transparent one is not a quieter design — the records are
+painted through the column names, which is legible in a screenshot.
+
+**`border-collapse: separate`, and the border exception is gone.** The first
+version claimed a table had to draw its line as a border, "the one place in the
+package where it has to be". That was wrong, and a Chromium probe of six cases
+showed why: the inset shadow had been hidden by an opaque cell background in the
+test, not by the table model. Under `separate` a row's inset shadow paints, a
+row can carry an outer focus ring, and a sticky head keeps its line — while
+under `collapse` a sticky head's border does **not** travel with it, which is a
+real defect rather than a preference. So the table went back to the
+`inset 0 -1px 0` every other row in this package draws, and a row keeps one
+`box-shadow` in which its line and its ring compose.
+
+**The pointer is answered only where pressing a row does something.** `interactive`
+on the root became `onRowPress`, which is the same default made honest: the hover
+now arrives with the thing that justifies it, and the row takes the keyboard with
+it (Enter and Space press it, and the ring says where the keyboard is).
+
+**A table too narrow for its columns becomes a list of records.** This was
+deliberately not done in the first version, on the argument that a breakpoint is
+the wrong unit — a table in a 360px side panel on a 27-inch screen is narrow, and
+a media query calls it wide. That argument was right and the conclusion was
+wrong: the correct unit exists. StyleX supports `@container`, so the table asks
+about **its own** width. Each record becomes a stack of label-and-value lines
+where the label is the head's own words — only reachable because the columns were
+stated. The width belongs to the system rather than a caller: a caller choosing
+it is a caller deciding how wide a record may be. Without this the primitive
+could migrate nothing: all three of the repository's real tables collapse on a
+narrow window today, by hand.
+
+**`Pagination` is one control, not parts.** The window is what a caller would
+otherwise get wrong, so `pageWindow(page, pages, siblings, boundaries)` is a
+pure function with its own tests: one fixed width from the first page to the
+last, so the buttons do not move out from under the pointer; a gap only where it
+stands for more than one page, since a gap hiding a single page is wider than
+the page it hides; and against either end, the gap that is not needed spent on
+listing more pages instead.
+
+**Two layouts, because nine thousand pages are not a list.** `numbered` lists
+them; `compact` says where you are. `compact` is not a lesser version — it is
+what the one real caller in this repository needs, and `jump` gives it the
+typed page the hand-rolled pager already had. It commits on Enter or on leaving
+the field rather than on every keystroke, which is the second defect this change
+fixes: page 4 is no longer read and discarded on the way to 45.
+
+**Base UI ships neither part.** `@base-ui/react` 1.7.0 has no table and no
+pagination, and there is no behaviour here to import: a table's semantics are
+the platform's `<table>`, and a pager is a `<nav>` of buttons. So these are
+written the way `Skeleton` and `Spinner` are — plain `forwardRef` parts over
+real elements — and Base UI enters where it has something to give: every button
+in the pager is this package's `Button`, which is Base UI's, and the jump field
+is `Input`, which is Base UI's. No `render` prop was added to the table parts,
+because nothing in the repository needs to swap those elements and a speculative
+escape hatch on eight parts is eight more contracts to keep.
+
+**The size is stated once**, on the root, and reaches the cells through context
+— the call `Tabs.List` makes for the same reason: a row's height and a cell's
+padding are one decision, and stated per cell two of them could disagree inside
+one row.
+
+## Deliberately not done
+
+**No virtualisation.** The table owns the row loop now, and the row height is a
+token, so a windowed body is implementable — but it needs a caller with enough
+rows to prove it, and none of the three migrated here has one. The shape it
+would take is recorded rather than guessed at.
+
+**No `Table.Empty` part, and no loading state.** The empty row is a prop because
+only the table can count the columns; a *loading* table is the same row with
+different words, which is what `review-policy-setting.tsx` passes. A spinner
+inside a table would be this package deciding what waiting looks like in a place
+`Spinner` already answers.
+
+**The markdown renderer's table is not migrated.** `markdown-renderer.tsx`
+renders `<table>` through Streamdown's component map, where the rows and cells
+are produced by the Markdown AST and never pass through a React component this
+package could supply. Migrating it means replacing the `td`/`th`/`tr` handlers
+as well, which is a change to how agent output is rendered rather than to a UI
+primitive, and it belongs with whoever owns that surface.
+
+**`device-resource-monitor.tsx` and `account-machines-overview.tsx` are not
+migrated here.** They are the two biggest wins — ~115 and ~100 lines of row
+markup, a duplicated column template each, and a duplicated mobile cell block in
+the first — and that is exactly why they are not being folded into the PR that
+introduces the primitive. They are recorded as the next callers.
+
+## Migrated
+
+Three callers, and both Radix files deleted.
+
+- **`review-policy-setting.tsx`** — `ReviewerMachineConfigTable` was a
+  hand-rolled `role="table"` / `role="row"` / `role="columnheader"` over a
+  `grid-cols-[minmax(150px,0.75fr)_minmax(0,1.75fr)]` template written twice,
+  with `hidden … sm:grid` on the header and `flex flex-col … sm:grid` on the row
+  to collapse it on a narrow window. All of that is now two `TableColumn`
+  entries; the roles are the elements' own, the collapse is the container query,
+  and the loading and empty branches became one `empty` prop. The row component
+  split into the two cells it always was.
+- **`summary-screen.tsx`** — the onboarding summary's two-column list of facts.
+  It is *not* a list of records, so it is the demonstration of why the parts are
+  still exported: it reads its labels as `scope="row"` headers. It loses
+  `hover:bg-transparent` on every row, the three classes that were reproducing
+  the head's type, and `py-4` on all three cells (`size="large"` now).
+- **`paged-file-viewer.tsx`** — two ghost buttons and a number field become one
+  `Pagination layout="compact" jump size="small"`. The words stay the product's
+  through `labels`, with two keys added for the sentences the pager needs. The
+  keystroke-navigation defect goes with it.
+
+## Verification limits
+
+jsdom applies none of StyleX's compiled CSS, so `getComputedStyle` returns
+nothing there and every visual assertion in `test/table.test.tsx` is made
+against the classes a style compiles to. What the board in Chromium is for is
+the other half, and this change needed it twice: the first measurement run read
+the wrong `<table>` in the document and reported a head with no line at all, and
+the board then caught a **real** defect the tests had not — a table that renders
+its own rows applies `last` explicitly, so the `:last-child` style no longer
+applied and *no* body row drew a line. Both are now pinned in tests.
+
+The container query is also beyond jsdom: the tests pin that the stacked classes
+are applied and that `stack={false}` withholds them, and Chromium is where the
+layout itself was read, at 320px and 640px, against the same markup.
+
+### Follow-up, 2026-09-14: the board was showing only the stacked form
+
+The component was measured at two widths in Chromium; **the board it lives on
+was not**, and it turned out to hand every table sample a 342px box — under the
+480px at which the rules say a table stops being columns. So every sample on
+that section rendered as the stacked list, including the one sample whose entire
+point is that it is the exception, and the section read as a wall of
+label-and-value pairs rather than as a table.
+
+Two board defects, neither of them the primitive's:
+
+- The section used the two-palette split, which is `minmax(340px, 1fr)` twice
+  across a 1120px page; with the 168px legend column beside it, a sample got
+  342px. `PaletteSplit` now takes `wide`, which puts one palette per row, and
+  the Table section asks for it. Samples measure 908px, and the one sample with
+  a 320px box is the only one that stacks — which is what makes it a
+  demonstration.
+- A sample's explanatory note shared the wrapping row with the sample and
+  competed with it for width, so two tables of the same size were laid out
+  260px and 342px wide on one board. Notes are now a `Note` part at
+  `flex-basis: 100%`, which always takes its own line. It carries **no**
+  `max-width`: a flex item's base size is clamped by `max-width` before the line
+  is broken, so a 72ch note fits beside the sample after all and squeezes it to
+  its minimum — the same bug wearing a reading measure.
+
+The 480px stack width is unchanged. It is conservative for a three-column table
+whose stated widths total about 300px, but it is the system's number and leaves
+room for the values rather than only the column names; a caller that wants the
+scrollbar instead still says `stack={false}`.
+
+What this says about the board generally: a sample is only a reference if it is
+given the width it needs, and nothing in this package's tests can tell that it
+was not. That is a thing to read off the rendered page, and it is now the reason
+`parts.tsx` carries both `splitWide` and `Note` with their rationale beside
+them.
+
+`ReviewerMachineConfigTable`'s own story cannot render in Storybook — it reaches
+`useCloudQuery` through the run-config menu and the story carries no
+`PlatformContext`, which is true of it before this change as well — so that
+migration was verified by the type checker and the suite rather than on screen.
+What was read in a browser is the primitive it now uses.
+
+`pageWindow` is pure and is tested as one: every page of a 40-page pager is
+checked for a constant width, for containing the page you are on and both ends,
+and for never hiding a single page behind a gap.
+
+## Evidence
+
+Intended behavior: [Shared UI primitives](../../../../specs/ui-primitives.md),
+which stays `draft` with the records and the pager stated.
+
+Inspected implementation: `packages/ui/src/table` (`table.tsx` for the columns,
+`parts.tsx` for the elements, `surface.ts`, `pagination.tsx`), the two new
+glyphs in `packages/ui/src/internal/glyphs.tsx`, the deleted
+`packages/components/src/ui/{table,pagination}.tsx`, and the three migrated
+surfaces. The table-shaped surfaces this repository holds were surveyed before
+the API was chosen; the survey is what the `columns` decision rests on.
+
+Executed validation: `pnpm --filter @lody/ui typecheck` and
+`pnpm --filter @lody/ui test` (209 tests, 26 of them new in `test/table.test.tsx`
+plus a new board assertion in `test/gallery.test.tsx`);
+`pnpm --filter @lody/components typecheck`;
+`NODE_ENV=development pnpm --filter @lody/components test`; `pnpm lint`; and
+`pnpm run docs check`.
+
+Two Chromium passes, both load-bearing. A six-case CSS probe settled the
+mechanism before any of it was written: a row's inset box-shadow paints under
+`border-collapse: separate` and is hidden only by an opaque cell background; a
+row carries an outer focus ring; a sticky head keeps a shadow line and **loses a
+border** under `collapse`; and a transparent sticky head has the rows painted
+through it. A second probe read the stacked layout at 320px and 640px from one
+markup.
+
+The board was then opened under both palettes and read back off the rendered
+nodes: the three row sizes measured 28 / 32 / 36 with 8 / 10 / 12px of inline
+padding; a body row's line measured
+`rgb(230, 232, 237) 0px -1px 0px 0px inset` and the last record `none`; the
+sticky head measured `position: sticky`, `z-index: 1` and a
+`rgb(247, 248, 250)` fill, which is the region rung; the head's box measured
+`mixed` with one row taken and the row's fill `rgb(232, 234, 239)`; the scroller
+measured `container-type: inline-size`, and at 320px the head measured
+`display: none` while a cell measured `display: flex` with its label visible at
+12px in `rgb(107, 114, 128)` — the same cell measuring `display: none` on its
+label in the wide table. The pager was read at the start, the middle and the end
+of a 40-page run and listed seven items in each.
diff --git a/.agents/notes/implemented/feature/2026-09-13-ui-avatar-kbd.md b/.agents/notes/implemented/feature/2026-09-13-ui-avatar-kbd.md
new file mode 100644
index 000000000..89abd0f8e
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-13-ui-avatar-kbd.md
@@ -0,0 +1,225 @@
+# UI avatar and kbd: two parts that stand for something outside the interface
+
+Status: implemented
+Translation: pending
+PR: https://github.com/LodyAI/Lody/pull/678
+
+## Abstract
+
+`@lody/ui` had every part that acts, reports or opens, and nothing for the two
+things an interface has to name but does not own: a person, and a key on their
+keyboard. `avatar.tsx` was a Radix wrapper with one size, `size-8`, and of its
+twenty-seven call sites twenty-one named a box and fifteen also named a type
+step for the letters — `h-5 w-5 text-[9px]`, `h-7 w-7 text-[11px]`, `h-16 w-16
+text-xl` — which is two facts a surface had to keep in step, at eight different
+sizes. `kbd.tsx` reached the surface it sat on with a descendant selector
+StyleX cannot express. This note records why both take the gray ramp; why an
+avatar's rung picks its own letters and why those letters take `label` rather
+than `secondaryLabel`; why a person is a circle and a workspace is a tile; why
+a component token group, not a selector, is how a tooltip tells a key cap that
+it has inverted; and the layout defect the board found that no unit test in
+this package could have. Twenty-seven avatar call sites and four key-cap files
+are migrated, `avatar.tsx` and `kbd.tsx` are deleted, and one Radix tooltip
+moved with them because the cap inside it would otherwise have gone unreadable.
+
+## Problem
+
+Two files, and each reaching outside the rules in a different direction.
+
+`avatar.tsx` was `relative flex size-8 shrink-0 overflow-hidden rounded-full`
+with a `bg-muted` fallback. One size, so every caller brought its own: of
+twenty-seven call sites, twenty-one named a box inline and fifteen also named a
+type step for the letters — `text-[8px]`, `text-[9px]`, `text-[10px]`,
+`text-[11px]`, `text-[12px]`, `text-[0.55rem]`, `text-[0.6rem]`,
+`text-[0.72rem]`, `text-[0.82rem]`, `text-xs`, `text-xl` — the rest passing one
+through a variable or a second wrapper. That is not a missing size prop; it is
+two facts a surface had to keep in step, and the sizes themselves had drifted
+into 16, 18, 20, 24, 28, 32, 36 and 64 with no decision behind the gaps. Four
+callers also restated the fill through `fallbackClassName` (`bg-muted` twice,
+`bg-sidebar-hover/60`, `bg-primary/10 text-primary`), the last of which put the
+accent — which these rules reserve for live state — under a static portrait.
+
+`kbd.tsx` was closer to right: a gray chip, no hover, no focus ring. Its one
+problem was the one that does not survive the move off Tailwind. A cap on a
+tooltip has to invert, because the tooltip is the one surface in this system
+that does, and it said so with
+`[[data-slot=tooltip-content]_&]:bg-background/20`. StyleX has no descendant
+selector, so the rule had to be re-founded rather than translated.
+
+## Decision
+
+**Two components, two token groups, one question.** They are not a family: they
+share no measurement, no state and no structure. What they share is that
+neither stands for anything *in* this interface — one stands for a person, the
+other for a piece of hardware — and that is exactly the condition the rules
+already attach to the gray ramp: "`gray…gray6` only for things with no role."
+`Skeleton` was already there. These two join it, and the rule's list grew by
+one rather than the palette growing.
+
+### The avatar
+
+**The rung picks the letters.** Five rungs — 16, 20, 24, 32, 64 — and each
+carries its own type step and its own glyph box. This is the whole reason the
+size is a prop rather than a class: a box and a type step stated separately are
+two facts that can disagree, and across twenty-seven call sites they had. The
+ladder is deliberately not the control ladder's 28/32/36: an avatar in a row is
+a mark beside text rather than a control, and the sizes the product had reached
+for between 32 and 64 (36, and a 28-vs-32 conditional in the AI GUI) were a row
+avatar that had drifted rather than a third kind of thing. Everything at 28 and
+36 landed on `large`; 18 landed on `small`.
+
+**A person is a circle, a thing is a tile.** `WorkspaceAvatar` was a circle
+everywhere except the mobile switcher sheet, which passed `rounded-xl`. A
+circle around a logo is a crop, and the mark inside one was drawn square, so
+the shape follows what is being stood in for rather than the surface it is on.
+The tile's corner is the radius-by-size table read per rung — 5, 5, 8, 10, 14 —
+rather than a token of its own; the circle takes `radius.full` on
+`corner.round`, because the rules already say a squircle at that radius is a
+superellipse and would turn a face into a rounded square.
+
+**The letters take `label`, not `secondaryLabel`,** and the board is what
+settled it. The first draft copied Badge's reading — metadata is *about* the
+thing beside it — but initials are not about a person; they are what is left of
+one. Measured on `gray5`, `secondaryLabel` is 3.5:1 in the light palette, under
+the 4.5:1 that 8-to-11px letters need. `label` clears it in both palettes.
+
+**The fill is a gray rather than a film.** A Badge can be a tint over whatever
+holds it because a word reads through a tint. What an avatar stands in for is a
+photograph; a translucent face would show a sidebar row's hover through it and
+change colour as the pointer moved.
+
+**An identity colour is the product's.** `WorkspaceAvatar` derives a hue from
+the workspace name so one workspace is one colour on every screen. Which hue
+belongs to which name is not a token — no palette can hold it, and the recipe
+is already shared with the mobile initial-letter avatar — so it arrives as a
+`style`, and `Avatar.Fallback` is the one part in this package that *merges* a
+caller's `style` rather than replacing it. Unifying the two copies of the hash
+recipe is a separate decision and is not made here.
+
+### The key cap
+
+**A cap is not a menu row's shortcut.** The rules give that slot plain trailing
+metadata in `popup.hint`, and that stays: a menu row already carries a leading
+box, a label and a chevron, and a column of chips down its right edge turns a
+quiet list into a keyboard diagram. A cap is for the surfaces where the keys
+are the subject — the command palette's footer, a tooltip that teaches one.
+
+**A component token group is how a surface tells what is inside it what it is
+standing on.** This is the replacement for the deleted descendant selector, and
+it is better rather than merely possible: `Tooltip.Content` declares
+`kbdOnInvertedTheme` on its own popup, every cap under it inherits through the
+cascade, and unlike a `[data-slot]` selector it also reaches a cap a caller
+wrapped in something of their own. It is the same mechanism `ThemeRoot` already
+uses to carry a forced palette across a portal. The theme re-declares exactly
+two values — the film and the letters — so a cap on a chip is the same cap,
+made of different things, rather than a second cap.
+
+**The face is the UI font.** `<kbd>` defaults to monospace, and `⌘`, `⇧` and `↵`
+are drawn by the product font here; a cap that fell back to the mono stack
+would render a different glyph from the identical character in the label beside
+it.
+
+## What the board showed
+
+Both defects below are invisible to this package's tests, because jsdom applies
+none of StyleX's CSS. They were found by opening the gallery in Chromium, which
+is why that step is not optional for a change here.
+
+**A fixed size is not a fixed size on a flex item.** A 16px circle holding two
+initials laid out **20px wide** and stopped being a circle. A flex item's
+automatic minimum size is its content's, and an avatar is always in a row of
+something; `width` loses to it. The box and the fallback inside it both declare
+`min-width: 0`, so the width is the fact and anything wider than it is cropped
+— an avatar is a ceiling as well as a floor. `test/avatar.test.tsx` pins the declaration,
+which is the most a test in this package can do about it.
+
+**The contrast failure above** was read off the rendered swatches in the light
+palette, not reasoned about: the board prints what a token resolved to.
+
+**Two capitals did not fit the smallest circle.** At the first draft's 8px step,
+`WW` measures exactly 16px against a 16px circle: the widest pair of capitals
+was flush with the crop and lost its outer strokes on both sides. The step
+moved to 7px, which measures 14px and leaves a pixel either side. Two letters
+barely belong in a circle that small at all — the board's legend and the README
+both say a `mini` avatar wants a picture or a mark first — but small beats cut,
+and the product's `mini` callers (an archived session's owner, a chat member, a
+GitHub login) all pass two characters.
+
+## Migration
+
+Twenty-seven avatar call sites, four key-cap files, and two Radix files
+deleted.
+
+`UserAvatar` and `WorkspaceAvatar` keep their names and their blob-cache
+strategy, and now take a `size` instead of a box class; `fallbackClassName` is
+gone, because everything it carried — a type step, `bg-muted`,
+`bg-sidebar-hover/60`, `bg-primary/10 text-primary` — is the package's decision
+now. `pr-tab-view.tsx` had a third local avatar with its own `xs`/`sm`/`md`
+ladder and three hand-tuned type steps; it now takes the package's rungs.
+`usage-calendar-visualization.tsx` and `github-comment-thread.tsx` used the
+Radix parts directly and now use `Avatar.Root`/`Image`/`Fallback`.
+
+`components/commands/kbd.tsx` keeps the one thing that is genuinely the
+product's — splitting a binding string in Lody's registry syntax into keys —
+and draws the caps with the package's.
+
+**One Radix tooltip moved with the caps.** `SidebarNewTaskButton` in
+`loro-sidebar.tsx` is the only surface that puts a `Kbd` inside a tooltip, and
+that tooltip was Radix's: leaving it there would have left a gray cap on a dark
+chip with its letters gone, since only `@lody/ui`'s `Tooltip.Content` declares
+the inverted theme. Migrating one tooltip was cheaper and more honest than
+shipping an unreadable one or deferring the cap.
+
+### Deliberately not done
+
+- **The hashed identity hue is still written twice**, here and in
+  `MobileInitialLetterAvatar`. Moving it into the package would make the
+  package own a brand colour, which is a product decision rather than a
+  migration.
+- **The remaining Radix tooltips stay.** Only the one holding a key cap had a
+  reason to move in this change.
+- **`ScrollArea`, `Toggle`, `ToggleGroup` and `Toolbar`** are the Base UI parts
+  still unmigrated; the scroll area in particular has thirteen callers and a
+  wide class-based API, and belongs in its own change.
+
+## Follow-up: CI caught the suite waiting on scheduler luck
+
+`select.test.tsx`'s "End walks to the last row" failed once on CI and passed on
+the commit before it, on a change that touched only the gallery and two
+documents. It was not a regression and it was not the component: `dom.tsx`
+settles every interaction with a **fixed two animation frames**, which is enough
+on an idle machine and is otherwise exactly the "scheduler luck" the root
+testing rule forbids. Base UI schedules part of a popup's state on its own
+animation frame, so how many frames an interaction needs is a property of the
+machine that ran it — at one frame a *different* test in the same file fails
+than at two, which is how the fragility was measured rather than guessed.
+
+The keyboard tests in that file all press a key immediately after opening the
+list; the failing one was the only one that did not first state the precondition
+the others assert. A probe showed why that matters: moving focus off a row
+clears every `data-highlighted` mark, so a key arriving a beat early finds a
+list with no active row and does nothing — which is the failure CI reported.
+
+`dom.tsx` gains `until(ready, what)`, a bounded wait on an explicit condition
+that throws with what it was waiting for, and the test states its precondition
+and both of its effects through it. Verified by running the suite with the frame
+budget cut to one, which is the stress proxy: before, the select file failed
+there; after, all 244 pass. At zero frames the menu suite fails wholesale, which
+is not load but a popup never opening — the proxy has a floor.
+
+## Verification
+
+`pnpm --filter @lody/ui typecheck` and `pnpm --filter @lody/ui test` (243
+tests, including nine for `Avatar`, seven for `Kbd`, and two added board
+assertions). `pnpm --filter @lody/components exec tsc --noEmit` and
+`NODE_ENV=development pnpm --filter @lody/components test`.
+
+The board was opened in Chromium at both palettes and read back with
+`getComputedStyle`: every rung measures square at its stated size, the tile
+corners step 5/5/8/10/14, and a cap on the tooltip chip resolves to a film of
+the chip's own ink in both palettes. The migrated `AvatarEditor` story was
+rendered as well.
+
+Not verified: no product surface was driven end to end in the desktop app, and
+the mobile surfaces that changed rung (the workspace switcher sheet, the home
+header chip) were read from the code rather than rendered.
diff --git a/.agents/notes/implemented/feature/2026-09-15-ui-toggle-toolbar.md b/.agents/notes/implemented/feature/2026-09-15-ui-toggle-toolbar.md
new file mode 100644
index 000000000..c483d21a6
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-15-ui-toggle-toolbar.md
@@ -0,0 +1,281 @@
+# UI toggle and toolbar: a control that stays pressed, and the row that holds it
+
+Status: implemented
+Translation: pending
+PR: https://github.com/LodyAI/Lody/pull/727
+
+## Abstract
+
+`@lody/ui` had a control for every value a form stores and none for the state an
+interface holds without storing it — bold, wrapped lines, this filter — so
+twenty-two files in `packages/components` each drew their own `aria-pressed`
+button, and the fills they chose to mean "on" run to a dozen unrelated washes
+(`bg-muted-foreground/20`, `bg-primary/[0.12]`, `bg-white/14`, and several that
+change nothing but the text colour). This note records the family that replaces
+them — `Toggle`, `ToggleGroup` and `Toolbar`, sharing one `toggle` token group —
+and its single real design decision: **on is the well, not ink**, because ink is
+what a control that _already sits in a well_ becomes when it is on, and a toggle
+rests on nothing. It also records why a set of toggles is not a `Tabs` strip
+with the track removed, and why a bar that draws nothing at all is still a
+primitive. Two callers are migrated whole and the dead Radix `toggle.tsx` and
+its dependency are removed; the rest of the product's pressed buttons are left
+to the surfaces that own them, because a half-migrated row of controls is the
+inconsistency this work exists to remove. The board showed that in the dark
+palette it is the label colour rather than the fill that carries the state.
+
+## Problem
+
+Every rung of this system had a component except the one a person leaves pressed.
+
+`Switch`, `Checkbox` and `Radio` cover a value a form stores. `Tabs` covers one
+thing shown out of several. Neither is what a formatting bar, a file viewer's
+strip of actions or a row of filter chips needs: a button that is on right now,
+that has no name, belongs to no `Field.Root`, and cannot be invalid.
+
+So the product drew its own, twenty-two files of it, and the appearances had
+diverged as far as appearances can. A survey of the fills within six lines of an
+`aria-pressed` attribute in `packages/components/src` finds `bg-muted`,
+`bg-muted/30`, `bg-muted/40`, `bg-muted/60`, `bg-muted/80`,
+`bg-muted-foreground/20`, `bg-secondary`, `bg-secondary/50`, `bg-primary/10`,
+`bg-primary/15`, `bg-primary/[0.05]`, `bg-white/10` and `bg-white/14` — thirteen
+answers to one question. Two of the worst are in
+`sessions/session-file-content-view.tsx`, where "wrap long lines is on" and
+"annotation is on" are said with `text-foreground` against
+`text-muted-foreground` and nothing else: a 24px icon button whose entire state
+is a shade of gray, standing in a row of eight that are never pressed.
+
+`packages/components/src/ui/toggle.tsx` — the Radix wrapper with a `cva` of two
+variants — had reached zero in-repo callers some time earlier and had not been
+deleted, so `@radix-ui/react-toggle` was still a production dependency of a
+package that never imported it.
+
+## Decision
+
+One family, one token group, `toggle`: a control that stays pressed, a set of
+them answering to one value, and the bar that holds them. They are one family
+for the reason `disclosure` covers three layouts of one idea — how far apart two
+of these stand, and what "pressed" looks like, cannot become three decisions in
+three files.
+
+### On is the well, not ink
+
+This is the decision the rest follows from, and it is the elevation rules read
+carefully rather than literally.
+
+`src/tokens/RULES.md` says ink is for a stored state: the primary button,
+checked, on. A toggle does store a state, so the literal reading gives it ink —
+`label` fill under `background` text. That reading is wrong, and the reason is
+visible in the controls the rule was written for. A Switch's **off** state is
+already the well: `wellBackground` under `shadow.inset`. A Checkbox's empty box
+is the same. On has to leave the well, because the well is taken, and ink is
+where it goes. Ink is therefore not "what a stored state looks like" — it is
+what a control that already sits in a well _becomes_ when it is on.
+
+A toggle rests on nothing at all. It is a ghost Button when it is off: no fill,
+`secondaryLabel`, `hoverFill` under the pointer. The well is free, so it sinks
+into it, which is also the most literal thing this system can say about a button
+that went down and stayed down — depth without lines, which is the construction
+rule at the top of the same file. And it is what keeps a formatting bar of eight
+from reading as eight of the most important thing on the screen, which is what
+eight ink-filled buttons would be.
+
+The second half of the state is the label: `secondaryLabel` off, `label` on. A
+toggle that is off is _about_ the thing it acts on; one that is on **is** the
+thing. That pair matters more than it looks — see what the board showed.
+
+A toggle also does not bob. The motion rules give a press `translateY(1px)` and
+a dropped `shadow.inkEdge`, which is a raised thing going down and coming back.
+This one goes down and stays, so what changes is the surface under it.
+
+### The ladder, and where it comes from
+
+Sizes are `mini` 24, `small` 28, `medium` 32 and `large` 36 — the control ladder
+plus the 24px step a file viewer's strip of actions needs, which is the same
+ladder `Button` carries. It is taken from `control` in `scales.stylex.ts` rather
+than from `button`: a Button and a Toggle in one bar line up because both read
+the same scale, not because one component's group reads another's, which is the
+rule that keeps a menu from reaching for `field.background`.
+
+### A set is not a strip
+
+`ToggleGroup` and `Tabs` hold the same three words and are not the same part.
+
+A strip picks what a person **sees**. It is a single control, so it can be — and
+is — a sunken track with one thing raised out of it and one pill sliding between
+the choices. A set stores what is **on**, and two of its members can be pressed
+at once, which no single sliding pill can say. So a set has no track and each
+member sinks on its own. Asked for one choice out of several, with `multiple`
+left off, it _still_ draws no track: the same set with `multiple` on has to look
+like itself, and a component that changed its construction with a boolean would
+be two components sharing a name.
+
+The size and the shape are stated once on the set and read from a context in
+`src/toggle/set.ts`, the way `Tabs.List` states them for its tabs. The context
+lives in its own file because both parts need it and either importing the other
+to reach it would close a cycle.
+
+### A bar that draws nothing
+
+`Toolbar` has no fill, no shadow, no radius, and not even the line a table
+draws. It is a row of controls on whatever surface the product already had
+there, so a bar inside a popover is not a second surface inside one.
+
+It is a primitive anyway, and what it is for is the keyboard. A row of eight
+icon buttons is eight tab stops unless something says otherwise, and a person
+tabbing past a formatting bar should pass it rather than walk it. Base UI's
+composite makes the bar one stop, gives the arrow keys the walking, and steps
+over a control that cannot be used rather than stopping on it. That is the whole
+argument for it not being a `div` with a gap.
+
+Two gaps say what belongs with what: `toggle.groupGap` (4) between the members
+of one cluster or set, `toggle.barGap` (8) between clusters and either side of
+the line between two. The line is `Separator`'s — the one line these rules allow
+— and the bar states its orientation rather than the caller, so a horizontal bar
+cannot end up divided the wrong way. `separator.tsx` now exports its styles so
+there is one definition of that hairline rather than two.
+
+`Toolbar.Button` is Base UI's, unstyled, the way every trigger in this package
+is: joining the walk is all it does, and what arrives is `render={<Toggle …/>}`
+or `render={<Button variant="ghost" …/>}`. There is no `Toolbar.Input` or
+`Toolbar.Link`, though Base UI ships both: neither has an appearance of this
+system's to add, and an unused part is a contract to keep in step for nothing.
+
+### Alternatives considered
+
+**Ink for on.** The literal reading of the rule. Rejected above; a bar of eight
+would compete with the page's actual primary action, and the distinction between
+"this is the thing to press" and "this option is on" would be gone.
+
+**A `pressed` prop on `Button`.** Rejected because the state is Base UI's —
+controlled and uncontrolled `pressed`, `onPressedChange`, `value` inside a
+group, and `aria-pressed` — and none of it belongs to a button that acts once.
+A Button that could stay pressed would carry a state most of its call sites
+never use.
+
+**A `Tabs` strip with its track suppressed.** Rejected because the two are not
+one part with a flag: a strip cannot describe two members pressed at once, and
+the board row that puts them side by side is there to keep the next reader from
+trying it.
+
+**`toggle` as part of the `field` group.** Rejected: nothing here takes a name,
+answers to a `Field.Root` or can be invalid, and sharing the group would invite
+exactly the confusion between a Switch and a Toggle this note opens with.
+
+## What the board showed
+
+The pressed fill resolves to `rgb(232, 234, 237)` on the light panel and
+`rgb(28, 28, 28)` on the dark one, both under `shadow.inset`, measured off the
+rendered nodes. Two things follow that no unit test in this package sees.
+
+**In the dark palette the fill is a six-value step.** The board's panel is the
+card rung, `hsl(0 0% 8.6%)` — `rgb(22, 22, 22)` — and the well is
+`hsl(0 0% 11%)`, `rgb(28, 28, 28)`. With the inset shadow above it that reads as
+recessed, but it is not what a person notices first: the label going from
+`rgb(160, 160, 160)` to `rgb(255, 255, 255)` is. That is why the state is a fill
+**and** a colour rather than a fill alone, and why an implementation that
+changed only the background would have looked correct in the light palette and
+nearly stateless in the dark one — which is precisely the defect the deleted
+callers had, in reverse.
+
+**In the light palette a pressed toggle and a `Tabs` track are the same fill,**
+because they are the same rung. That is not a collision to fix; it is the point,
+and it is why the board puts a set and a strip on one row. A reader sees that
+the strip has a groove around all three choices and the set does not, which is
+the one difference between them.
+
+The bar rows confirmed the rest: the bar paints nothing (`background-color:
+rgba(0, 0, 0, 0)`, `box-shadow: none`), its gap resolves to 8px with 4px inside
+a cluster, and the separator is a 1px hairline stretched to the 28px row in both
+palettes.
+
+## Migration
+
+Two surfaces, each migrated whole, and between them they exercise every part of
+the family:
+
+- **`tasks/task-body-selection-toolbar.tsx`** — the whole bar. `role="toolbar"`
+  and a hand-built `ToolbarButton` become `Toolbar.Root`, two `Toolbar.Group`
+  clusters, `Toolbar.Separator`, and `FormatToggle` / `FormatAction` composing a
+  `Toggle` and a ghost `Button` through `render`. The link sub-state's bare
+  `<input>` becomes an `Input`. The bar is now one tab stop; it was nine.
+  `onPointerDown` preventDefault — the thing that keeps the editor's selection
+  alive — passes straight through to the composed control.
+- **`tasks/tasks-workspace.tsx`** — the set. The "Show" chips in the view menu
+  were already commented as "toggles, not menu items"; they are now a
+  `ToggleGroup multiple wrap`. `toggleProperty` became `setVisibleProperties`,
+  because a set reports every pressed member rather than the one that changed.
+
+`packages/components/src/ui/toggle.tsx` is deleted and `@radix-ui/react-toggle`
+removed from `packages/components/package.json`, per the rule that a Radix file
+goes when its in-repo callers reach zero. The lockfile entries were removed by
+hand rather than by re-resolving: `pnpm install --lockfile-only` on this branch
+also re-resolves `esbuild`, `better-auth` and `@stylexjs/unplugin` for unrelated
+reasons, and a 137-line lockfile diff for a 3-line removal is not reviewable.
+`pnpm install --frozen-lockfile` passes on the hand-edited file.
+
+### Deliberately not done
+
+- **The remaining twenty files that render `aria-pressed`.** Most are not
+  toggles wearing a disguise — a selected machine tab, a theme tile, a row in a
+  multi-select mode — and each needs its own decision about whether the thing is
+  a pressed control, a selected row or a radio. Migrating them by pattern-match
+  would put a well under a 200px card.
+- **The file viewer's action strip.** `session-file-content-view.tsx` holds the
+  two toggles whose whole state is a shade of gray, and they are the clearest
+  case this family has. They were migrated and then reverted: they sit in a row
+  of eight 24px buttons whose glyphs are 14px, and an icon-only control here
+  draws a 16px box, so moving two of eight puts two glyph sizes in one row —
+  the inconsistency this work exists to remove. The row has to move together,
+  and it cannot yet: its Save button turns `status-warning` while there are
+  unsaved edits, and these rules give `warning` to an outcome rather than to a
+  control a person presses. What an unsaved save button should look like is a
+  product decision, not this package's.
+- **The formatting bar's own surface.** `Toolbar` draws nothing, so the
+  popover's `rounded-lg border bg-popover shadow-md` stays on the caller. It
+  should become the floating rung when ProseKit's `InlinePopover` is reconciled
+  with this package's `Popover`; it is a border this system does not have.
+- **`open-source-attributions.generated.ts` and `THIRD_PARTY_NOTICES.md`.**
+  Removing the dependency makes them stale by two entries, and regenerating them
+  produces a 12,484-line diff: the file was last generated on 2026-09-04 and the
+  dependency tree has moved a long way since. That regeneration is its own
+  change.
+- **A focus sample on the board.** The ring is on the board as `toggle.ring` and
+  `toggle.ringWidth`; a focused sample would need the board to hold focus, which
+  no other section does either.
+
+### The seam this migration sits on
+
+Worth writing down because it will be read as a defect: the package's rungs and
+the product's Tailwind surfaces are not the same palette yet, and a well-rung
+control placed on a Tailwind surface can land on its own colour.
+
+The "Show" set is inside a Radix `DropdownMenuContent`, whose fill in the
+product's dark theme is `--popover: 220 54% 11.5%`
+(`packages/components/src/tailwind/index.css`). The package's well is
+`hsl(0 0% 11%)`. Those are half a percent of lightness apart, so on that one
+surface a pressed chip is carried almost entirely by its label going from
+`secondaryLabel` to `label`, plus the inset shadow's top edge — not by the fill.
+
+This is the staged migration's general seam rather than anything this family
+introduces: every `Input` already placed inside a Radix popover has it, and it
+closes when that menu becomes this package's `Menu`, which puts the chips on the
+floating rung (`hsl(0 0% 13.7%)`) where an 11% well reads as sunken. It is also
+the second reason the pressed state is a fill **and** a colour: the colour is
+what survives a surface the package did not choose.
+
+## Verification
+
+- `pnpm --filter @lody/ui test` — 276 tests, 22 files, all passing, including
+  the 13 new ones in `test/toggle.test.tsx` and the board's token coverage.
+- `pnpm --filter @lody/ui typecheck` and `pnpm --filter @lody/components
+typecheck` are clean.
+- The board was read in Chromium at both palettes, and the resolved values above
+  were measured off the rendered nodes rather than copied from the tokens.
+
+Limits: the two migrated surfaces were verified by type checking and by the
+primitives' own tests, not by driving them in the running app — the formatting
+bar lives inside a ProseKit inline popover anchored to a live text selection,
+which neither the package's jsdom suite nor its board can produce. The pressed
+appearance those callers now get is the appearance the board shows, since it is
+the same component; what is unverified is the layout around it, and the fill's
+reading on the Tailwind surface described above.
diff --git a/.agents/notes/proposed/feature/2026-09-14-icon-family-exploration.zh.md b/.agents/notes/proposed/feature/2026-09-14-icon-family-exploration.zh.md
new file mode 100644
index 000000000..4f4cfb6e9
--- /dev/null
+++ b/.agents/notes/proposed/feature/2026-09-14-icon-family-exploration.zh.md
@@ -0,0 +1,30 @@
+# Lody 图标族扩展探索
+
+Status: proposed
+Translation: pending
+
+## 摘要
+
+已有图标探索稿覆盖了基础操作，但还不足以对照会话、文件、审查和任务界面中的具体使用需求。本次提出沿用 24px 网格、1.5px 线宽、圆端点与圆连接，补充 60 个原创图标，并通过六个交互原型比较它们的语义和视觉重量。新增图标提供 Outline、Duotone、Glyph、Bulk 四种处理，实心版区分主体、内部挖空和外部结构。这是产品采用前的设计探索，未改变产品规范或替换运行中的图标；16px 版本目前仍是同比缩放，需要单独进行光学校正后才能视为小尺寸专用资产。
+
+## 设计与责任
+
+临时设计目录 `/tmp/lody-icons` 保存原有稿与新增页面、路径源文件、独立 SVG 及使用说明。原稿保存在 `draft-02.html`，新稿入口为 `index.html`；这些临时资产不是仓库内的产品实现。本记录只保存公开的设计结论，不包含会话记录，原型中的文件、消息和任务均为合成数据。
+
+新增图标按会话、文件、Git、工具、布局、状态分成六族，每族十个。气泡、文件折角和 Git 圆节点复用各自几何骨架。六个案例分别覆盖会话工作台、代码审查、命令菜单、文件预览、本地工具开关和任务状态操作；原有发送、搜索和 Agent 图标继续承担已有操作语义。
+
+默认预览与导出使用 24px、1.5px 线宽。Duotone 主体填充为 18%，Bulk 为 32%。Glyph 通过 SVG mask 实现真正透明的内部挖空，插脚和支架等外部结构继续使用前景色；避免用背景色描内部细节导致图标只能放在单一背景上。没有封闭主体的线形图标保留线条，因此四种导出可能相同。重复内联同一导出文件时需要给 mask ID 添加唯一后缀，页面渲染器自动生成唯一 ID。
+
+## 参考与取舍
+
+[Nucleo UI Icons](https://nucleoapp.com/ui-icons) 的公开介绍强调系列一致性和四种样式，其当前 UI 系列使用 18px 网格、16px 主体区域及 1.5px 线宽。本稿继承 Lody 原稿的 24px 网格，不把 Nucleo 当前网格直接当作本稿规范，也没有使用其图标路径或付费资源。
+
+相比按背景色覆盖细节，mask 让实心图标能适应不同背景，但带来重复内联时的 ID 管理成本。相比为每个尺寸重新绘制，统一骨架便于快速比较，但不能保证缩至 16px 后所有复杂细节仍有最佳辨识度。半像素坐标也不能保证 1.5px 线宽在任意设备比例下像素对齐。
+
+交互原型在页面内演示状态变化，刷新重置，不执行真实文件、Git、工具或 Agent 操作。产品接入、独立小尺寸绘制与实际无障碍验收仍待另行决定；本提案不意味着已获批准。
+
+## 验证与限制
+
+浏览器检查确认新增图标数量为 60、案例数量为六，无页面脚本错误，1440px、768px、390px、320px 视口均无页面横向溢出。搜索、分类、样式和尺寸切换、详情键盘关闭、SVG 剪贴板和下载，以及六个案例的交互状态检查均通过；消息输入也验证了 HTML 字符按文本展示。240 个独立 SVG 均通过 XML 解析，已打包页面源码和资产。已生成浅色、深色与手机宽度截图进行视觉检查，详细结果保存在临时目录的 `verification.json`；这些检查不代表产品采用审批。
+
+维护命令在任务开始时已报告四条指向缺失 ACP 扩展文件的既有文档链接错误，与图标提案无关。本次没有修改对应文档或产品源代码。
diff --git a/.agents/notes/proposed/feature/2026-09-14-ui-icon-set.md b/.agents/notes/proposed/feature/2026-09-14-ui-icon-set.md
new file mode 100644
index 000000000..dc8b1c606
--- /dev/null
+++ b/.agents/notes/proposed/feature/2026-09-14-ui-icon-set.md
@@ -0,0 +1,274 @@
+# UI icons: one grid, four treatments, and a number to move by
+
+Status: proposed
+Translation: pending
+
+## Abstract
+
+`@lody/ui` had a handful of glyphs drawn by hand for its own triggers and rows,
+and `packages/components` had `react-icons` for brand marks plus several hundred
+inlined `<svg>`s of no shared grid. This note proposes an original icon set for
+the package, drawn on one 24 grid at a 1.5 stroke following Nucleo's drawing
+conventions but none of its paths, and records three decisions that came out of
+drawing it: a variant is a layer treatment of one drawing rather than a second
+drawing; a glyph's cut-outs are a mask and never a painted panel colour; and a
+stateful icon moves by a single registered custom property that CSS
+transitions, with no path morphing. The set is in the package with its own
+playground and its tests; whether it becomes the product's icon language, and
+which product callers migrate, is not decided here.
+
+## Problem
+
+Three sources of icons, none on a grid the others share. `src/internal/glyphs.tsx`
+draws nine glyphs on a 16 grid at a 1.6 stroke, because the package may depend
+on nothing but React, Base UI and StyleX. `packages/components` uses
+`react-icons` at sixteen sites, almost all for brand logos, and inlines an
+`<svg>` in roughly four hundred files, each drawn to whatever its author had to
+hand. A menu row's chevron and the sidebar's toggle are therefore two weights
+of two strokes on two grids, and every new surface draws a third.
+
+The user asked for an original set in the manner of Nucleo, then for the
+intermediate treatments — the "black and grey" ones — and then for detail and
+state: a sidebar that shows what is in it and whether it is open, with the way
+between the two states animated.
+
+## Decisions
+
+**One grid, in the package.** 91 icons on a 24 canvas with a 20 live area, 1.5
+stroke, round caps and joins, 2px corners on containers, 2px nodes for the git
+family, strokes on .5 coordinates. A family shares one skeleton: the chat family
+one bubble, the file family one folded sheet, the git family the same two node
+columns. Drawn here for the reason the glyphs were: the dependency rule. The set
+follows Nucleo's conventions — gear form, folder tab line, bell nub, robot face —
+and copies no path; Nucleo is a paid library whose files were never in hand and
+whose licence, as understood, forbids redistributing them in a public repository.
+
+**A variant is a layer treatment.** The first draft had a second drawing per
+treatment. The board showed that was wrong twice over: it doubled the paths to
+maintain, and the "bulk" draft that dimmed the whole icon and painted the
+details at full strength put a black line across a grey folder — a divider with
+no meaning. So `registry.ts` gives an icon `marks` (the outline) and, where it
+has depth, `layers`: `mass` (back), `front`, an optional `mid`, `detail` inside
+the mass, `outer` strokes outside it, and `dots`. Outline draws the marks;
+duotone adds the mass at 18%; glyph fills everything and cuts the details;
+bulk is the mass at 35%, `mid` at 55% and `front` at 100% with no outline, so
+the depth is the difference between fills. The cube that became `model` showed
+the last rule: its edge line in bulk was a 100% stroke over a 35% face and stuck
+out past the vertex; the three faces at three opacities are the edge.
+
+**A glyph cuts through a mask.** The draft painted cut marks in the panel
+colour, which is correct on exactly one background. The component builds an SVG
+mask per glyph — `useId`, with React's punctuation stripped so it survives
+`url(#…)` — so the cut is transparent. Strokes outside the mass (an antenna, a
+bell's nub, a chip's pins) are drawn in every variant and never cut: they are
+the silhouette.
+
+**Icons state no size and no colour.** The rules give the box to whatever holds
+a glyph; an icon fills it and inherits `currentColor`, the contract
+`glyphs.tsx` already has. The playground is the holder and states every size and
+colour it applies from the outside.
+
+**The set's surface is a playground, not a board row.** The first draft put the
+set in `src/gallery` as four more rows, and the gallery is reached through
+`packages/components`' Storybook. That was wrong twice. The board's question is
+"what is this token's value", answered once per token off the rendered node; an
+icon has no token, and its question is asked once per drawing — find it, put it
+at the size the surface uses, in that surface's colour, on the rung it will sit
+on, and take it away as markup. Those are controls, not samples, and a row on a
+board cannot carry them. And the set is `@lody/ui`'s, while Storybook belongs to
+a package that only consumes it: looking at an icon should not require building
+the product's component library. So `packages/ui/playground` is a Vite page of
+its own — `pnpm --filter @lody/ui playground` — with search, a size slider from
+12 to 64, the four treatments, the semantic tones, the four rungs (the accent
+rung is where a glyph's mask shows, since the cut is a hole and the rung shows
+through), a per-icon panel with the drawing enlarged on the 24 grid and
+`copy svg`, and the stateful icons under a slow-motion switch. It is dev-only:
+nothing in `playground/` is exported, and the package still depends on React,
+Base UI and StyleX alone at runtime.
+
+**A stateful icon moves by one number.** `--lody-icon-t` is registered with
+`CSS.registerProperty` as a `<number>` so CSS can transition it; every part of
+the icon is a function of it — the sidebar's divider slides 1.5 units and its
+rows retract by their dash, a chevron rotates 180°, a check draws through
+`pathLength` and dash offset, a bell swings by `sin` and comes back to rest.
+Only transform, opacity and dash offset move, no path morphs, so at rest each
+state is the static drawing and a host without property transitions snaps to
+the right state. `prefers-reduced-motion` sets the duration to zero. Nine icons
+ship this way; the pattern covers displacement, rotation, draw-in,
+fill-and-pop and crossfade.
+
+**Correction: the collapsed sidebar was drawn into a rail that could not hold
+it, and scaled where it should have retracted.** As first drawn, the collapsed
+state put its divider at 6.5, leaving a 3-unit rail; the two strokes bounding
+that rail take 1.5 of it, so the marks inside had 1.5 units to live in and were
+drawn 2 wide. They overlapped the frame on one side and the divider on the
+other, and the icon read as three lumps rather than a rail — which is what
+opening the playground showed. The animated state was wrong a second way: it
+shrank the rows with `scaleX`, and a horizontal scale leaves a stroke's
+thickness alone while squashing its round caps, so at t = 1 the marks were 0.8
+wide against the static drawing's 2. The two ends of the transition were two
+different drawings, against the rule stated above.
+
+Both are redrawn. The divider collapses to 8.5, so the rail is 5 units and the
+3.5 between its strokes holds one mark of 2 with 0.75 of air on either side.
+The rows retract by dash instead: a dash shortened to zero length is a round
+cap and nothing else, which is a dot, and the uniform scale carrying it from
+1.5 to 2 grows the stroke without touching its shape. Two marks, not three —
+at 2 wide a third leaves a 1-unit gap, and a size ladder shows three dots
+smearing into one vertical stroke by 20px while two stay separate. The middle
+row fades; the outer two become the marks at (6, 9.5) and (6, 14.5), which is
+what `sidebar-collapsed` now draws.
+
+**Correction: the bell was a tube, and its flange was a spike.** Drawn with an
+11-wide dome over 6 units of straight side it was 14 across and 13 down, which
+is not the proportion of a bell; the playground showed that too. The dome is 12
+now and the side sweeps out to a mouth 16.4 across a 12.7-tall body.
+
+The interesting part is the mouth. The first widening kept the flange — a
+straight flare from the side to the mouth line — and made it bigger, and the
+filled variants grew horns: the flare met the mouth at 39 degrees, and a
+39-degree tip is a spike that `stroke-linejoin: round` hides in the outline and
+a fill cannot. Rounding the spike is not available either, because a 0.8 radius
+at that angle consumes 2.28 units of a 3.2-unit flare and there is no flange
+left. So the flange is gone: the side arrives at the mouth vertically through a
+curve, turns through a 0.7 corner, and the mouth is a line under it. The corner
+is 90 degrees, which a fill can hold. This is the general form of the rule the
+set already had for glyphs — **what the outline's stroke rounds, the mass has to
+round itself**, since a variant is a treatment of one drawing and the fill has
+no join to round.
+
+Widening the bell also widened its swing: the mouth is 16 units from the nub it
+pivots on, and at the old 14 degrees the corner furthest from the pivot put its
+stroke 0.03 from the canvas. That is inside, and it is not a margin. The swing
+is 12 degrees now, which leaves 0.42 and reads the same.
+
+`BellRingIcon` no longer restates the path. It reads `ICONS.bell` — the bell
+swings as one piece, so there is one drawing and the state only rotates it —
+and `test/icons.test.tsx` holds it there. That is the guard the sidebar did not
+have: both of these corrections are a stateful icon and a static icon drifting
+apart, and where a state moves the whole drawing the drift is now impossible.
+
+**Fifteen more drawings, picked from what the product already reaches for.**
+`packages/components` imports 239 distinct icons from `lucide-react` across 295
+files, 2138 usages. Collapsed onto the drawings that would serve them, the set
+covered 78% of that before this change; the fifteen added here — `monitor`,
+`alert-circle`, `users`, `circle`, `shield-alert`, `folder-plus`, `arrow-up`,
+`mail`, `wrench`, `undo`, `quote`, `save`, `image`, `pin-off` and `fork` — take
+it to about 90%. `monitor` alone answers 52 usages, which is what a product
+about machines looks like from the icon layer.
+
+Three of them were redrawn after the first pass, and all three failed the same
+way — a shape that reads at 120px and not at 20. `quote` as a block with the
+tail notched out of a corner is a pair of counters by 20px; it is a hook now.
+`pin-off` broken into fragments the way `eye-off` breaks is not a pin; the pin
+stays whole and takes the line across it, because a pin has no centre for a
+line to be mistaken for.
+
+`package` was dropped from the batch rather than drawn: a box with a lid is
+`archive` and an isometric one is `model`. And `folder-plus` and `users` lost
+their layer models on the same inspection that produced the rule above — the
+playground's bulk column is where both showed.
+
+A second reading of the board sent six of the sixteen back, and the reasons
+divide into three kinds. **A shape that is not the thing**: `quote` twice — a
+notched block reads as a counter, a ball with the tail swept too far round it
+reads as a lowercase e, and what a quote mark actually is is a ball with a
+short tail, so the third draft is that. **A proportion that is not the
+thing's**: `save` at 17 by 15 is a letterbox, and a disk is square, so it is 15
+by 15; `code` had 4.5 of chevron travel and a slash 4 wide, which bunched its
+mass in the middle and read narrow beside everything on its row. **A part that
+does not belong to the whole**: `folder-plus` carried the front-panel line as
+well as the cross, and the line splits the face the cross has to sit in. And
+`fork` put its heads on 6.5 and 17.5 while `branch`, `merge` and
+`pull-request` put theirs on 7 and 17: symmetrical on its own, out of line the
+moment the family is read down a list, which is the only way a family is ever
+read.
+
+None of this is visible from a test, and none of it was visible at 120px. Most
+of them read fine enlarged and failed at 20, which is the size they will be
+used at.
+
+**`pull-request-closed` is withdrawn**, and the reason is worth keeping. It was
+substituted into the batch when `package` turned out to be `archive`, and it
+went through four drawings without arriving: a cross capping the branch, which
+leaves two columns with nothing between them and reads as two lollipops rather
+than a pull request; the branch run up into the cross to close that gap, which
+came out a spear; `pull-request`'s arm restored with a cross for its arrowhead,
+drawn at the size that fit the room left above the arm rather than the size a
+cross is in this set; and the same again at `x-circle`'s 5. The last was
+defensible and still not good enough to keep.
+
+The lesson is about the batch rather than the drawing. `pull-request-closed`
+answers four usages; everything else in the fifteen answers seven or more, and
+none of them needed more than one redraw. A drawing that has to say a _relation
+did not happen_ — not a thing, not a state — is a harder problem than four
+usages justify, and the honest move when `package` fell out of the batch was to
+draw fifteen, not to fill the slot from the ranked list because it was open.
+`packages/components` keeps `lucide-react`'s at those four sites, as it does for
+every icon this set has not taken over.
+
+## Alternatives
+
+An icon package — Lucide, Phosphor, Tabler, Iconify through `unplugin-icons` —
+was surveyed first and is the right answer for a product that does not draw.
+Rejected here because the package's dependency rule forbids it and because the
+product wants a set of its own; brand marks stay with `react-icons/si`, which
+none of the drawn sets carry. A chip was drawn for `model` and rejected: it is
+the hardware, not the model; twelve alternatives were boarded and the cube won
+on the mental model OpenRouter, Raycast and Vercel AI have already trained. A
+brain was drawn and rejected on sight.
+
+## Trade-offs and limits
+
+The 16px rendering is the 24 grid scaled, not an optically corrected small size;
+`worktree` and `model` are the first to show it. Path morphing would give a
+truer play-to-pause than a crossfade, but only in Chromium; the crossfade is the
+same everywhere. `sin()` in `calc()` and registered-property transitions need
+Chromium, Safari 16.4 or Firefox 128, which the Electron host meets; older
+hosts snap. The mask makes each glyph carry its own `<mask>` element, which is
+more markup than a painted cut. `registry.ts` is generated from the design
+board rather than written by hand, and the board is a `/tmp` file, not a
+repository artifact; a future change edits the registry directly.
+
+## Verification
+
+`test/icons.test.tsx` pins the registry's shape and its stay on the grid, the
+accessibility contract, the four treatments, mask uniqueness, that outer strokes
+survive a glyph, that bulk has no outline, and that a stateful icon's two states
+are the same markup with one number changed. The board in `src/gallery` has no
+icon section and `test/gallery.test.tsx` is unchanged: an icon adds no token, so
+the test that fails on a token without an entry has nothing to say about one.
+
+The drawings themselves were seen earlier on the static Storybook board in
+Chromium, both palettes — every icon in its 24px box, the four sizes, the four
+treatments with transparent glyph cuts, the two-state pairs. That check reported
+the sidebar divider computing to `translateX(-3px)`, which was the measurement
+of the drawing corrected above and no longer holds; it is `-1.5px` now. Reading
+a number off a broken drawing and recording it as evidence is what that check
+did wrong: it proved the property was transitioning, not that the icon was
+right.
+
+The redrawn sidebar was checked in the playground in Chromium at 64px. The
+animated state at t = 1 and the static `sidebar-collapsed` were screenshotted
+and compared pixel by pixel: 825 ink pixels against 833, differing only by a
+one-pixel fringe on every stroke in the same direction, which is a sub-pixel
+crop offset rather than a difference in shape. The two marks land in the same
+place in both. The transition was rendered at t = 0, 0.25, 0.5, 0.75 and 1: the
+rows retract, the middle one fades, the caps stay round throughout, and no
+sliver appears. A size ladder at 16, 20, 24, 32 and 48 decided two marks over
+three. At 16px the rail is 2px wide and its marks are gone — the same limit the
+expanded drawing already has there, and the reason this set still owes an
+optically corrected small size.
+
+## Deliberately not done
+
+No product caller migrates; `glyphs.tsx` keeps its 16 grid until a caller does.
+No optically corrected 16px family. No `Spinner` from `refresh`: a turn is one
+transition, a spinner is an animation and already exists. The other exploration
+of a wider family in this repository's notes is a separate proposal.
+
+The playground does not scrub `--lody-icon-t` by hand. A stateful icon takes a
+boolean and writes the number itself, and `Frame` states `style` after spreading
+its rest props, so a holder cannot pass one in; slow motion is a duration
+override on the host page instead. Making the number an input is a change to the
+components, and was not made for a dev page.
diff --git a/README.md b/README.md
index 113350c05..6eaf09bf3 100644
--- a/README.md
+++ b/README.md
@@ -150,6 +150,7 @@ Lody is still moving toward full local-first support.
 - `apps/cli` — Connect machines and run coding agents
 - `apps/electron` — Lody desktop app
 - `packages/components` — Shared workspace UI
+- `packages/ui` — Base UI primitives and StyleX design tokens
 - `packages/platform` — Platform capabilities and integrations
 - `packages/shared` — Shared schemas, protocols, and utilities
 - `packages/cloud-api` — Optional-cloud protocol names and DTOs
diff --git a/README.zh-CN.md b/README.zh-CN.md
index c492777e9..262ce6988 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -161,6 +161,7 @@ Lody 仍在走向完整的 local-first 支持。
 - `apps/cli` — 连接机器并运行 Coding Agents
 - `apps/electron` — Lody 桌面应用
 - `packages/components` — 工作空间共享 UI
+- `packages/ui` — Base UI 基础组件与 StyleX 设计令牌
 - `packages/platform` — 平台能力与集成
 - `packages/shared` — 共享 Schema、协议与工具
 - `site-docs` — 官网、文档与博客
diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md
index c41f3f912..5a0fd0f47 100644
--- a/THIRD_PARTY_NOTICES.md
+++ b/THIRD_PARTY_NOTICES.md
@@ -949,7 +949,6 @@ This list covers shipped production dependencies plus vendored third-party asset
 - `@radix-ui/react-focus-guards @ 1.1.3` — https://radix-ui.com/primitives
 - `@radix-ui/react-focus-scope @ 1.1.7` — https://radix-ui.com/primitives
 - `@radix-ui/react-id @ 1.1.1, 1.1.2` — https://radix-ui.com/primitives
-- `@radix-ui/react-label @ 2.1.8` — https://radix-ui.com/primitives
 - `@radix-ui/react-menu @ 2.1.16` — https://radix-ui.com/primitives
 - `@radix-ui/react-menubar @ 1.1.16` — https://radix-ui.com/primitives
 - `@radix-ui/react-popover @ 1.1.15` — https://radix-ui.com/primitives
diff --git a/apps/electron/electron.vite.config.ts b/apps/electron/electron.vite.config.ts
index e5cd6bbe5..295002520 100644
--- a/apps/electron/electron.vite.config.ts
+++ b/apps/electron/electron.vite.config.ts
@@ -6,6 +6,7 @@ import type { Plugin } from 'vite'
 import react from '@vitejs/plugin-react'
 import wasm from 'vite-plugin-wasm'
 import tailwindcss from '@tailwindcss/vite'
+import stylex from '@stylexjs/unplugin'
 import {
   loroCrdtBundlerAlias,
   loroCrdtWasmUrlWorkaround
@@ -17,6 +18,7 @@ import {
   rendererBundleAliasPlugin,
   rendererBundleAliases
 } from '../../packages/components/vite-renderer-bundle-aliases'
+import { stylexOptions } from '../../packages/ui/stylex-options'
 import { emojibaseAssetsPlugin } from '../../packages/components/vite-emojibase-assets'
 
 function getGitCommitHash(): string {
@@ -187,6 +189,7 @@ export default defineConfig(({ mode }) => {
       plugins: [
         previewPublicBaseDomainHtmlPlugin(previewPublicBaseDomain),
         tailwindcss(),
+        stylex.vite(stylexOptions),
         loroCrdtWasmUrlWorkaround(),
         react(),
         wasm(),
diff --git a/apps/electron/package.json b/apps/electron/package.json
index 6ed410786..33fbf4544 100644
--- a/apps/electron/package.json
+++ b/apps/electron/package.json
@@ -54,10 +54,12 @@
     "react-dom": "catalog:"
   },
   "devDependencies": {
+    "@stylexjs/unplugin": "0.19.0",
     "@electron-toolkit/eslint-config-prettier": "^3.0.0",
     "@electron-toolkit/eslint-config-ts": "^3.1.0",
     "@electron-toolkit/tsconfig": "^2.0.0",
     "@lody/components": "workspace:*",
+    "@lody/ui": "workspace:*",
     "@lody/configs": "workspace:*",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/vite": "^4.3.0",
diff --git a/apps/electron/src/main/services/app-updater-sparkle-policy.test.mjs b/apps/electron/src/main/services/app-updater-sparkle-policy.test.mjs
index 62596e28c..62305a3c7 100644
--- a/apps/electron/src/main/services/app-updater-sparkle-policy.test.mjs
+++ b/apps/electron/src/main/services/app-updater-sparkle-policy.test.mjs
@@ -12,18 +12,9 @@ import {
 } from './app-updater-sparkle-policy.ts'
 
 void test('keeps OSS local updater off unless explicitly force-enabled', () => {
-  assert.equal(
-    shouldConstructUpdaterEnabled({ localPlatform: true, forceEnable: false }),
-    false
-  )
-  assert.equal(
-    shouldConstructUpdaterEnabled({ localPlatform: true, forceEnable: true }),
-    true
-  )
-  assert.equal(
-    shouldConstructUpdaterEnabled({ localPlatform: false, forceEnable: false }),
-    true
-  )
+  assert.equal(shouldConstructUpdaterEnabled({ localPlatform: true, forceEnable: false }), false)
+  assert.equal(shouldConstructUpdaterEnabled({ localPlatform: true, forceEnable: true }), true)
+  assert.equal(shouldConstructUpdaterEnabled({ localPlatform: false, forceEnable: false }), true)
 })
 
 void test('uses Sparkle only for packaged macOS when the native bridge is available', () => {
diff --git a/apps/electron/tsconfig.web.json b/apps/electron/tsconfig.web.json
index 80f817eb0..75e57ef6e 100644
--- a/apps/electron/tsconfig.web.json
+++ b/apps/electron/tsconfig.web.json
@@ -19,6 +19,9 @@
       "react/jsx-dev-runtime": ["./node_modules/@types/react/jsx-dev-runtime"],
       "@lody/components": ["../../packages/components/src"],
       "@lody/components/*": ["../../packages/components/src/*"],
+      "@lody/ui": ["../../packages/ui/src"],
+      "@lody/ui/tokens/*": ["../../packages/ui/src/tokens/*"],
+      "@lody/ui/theme": ["../../packages/ui/src/theme/theme"],
       "@/ui": ["../../packages/components/src/ui"],
       "@/ui/*": ["../../packages/components/src/ui/*"],
       "@/components": ["../../packages/components/src/components"],
diff --git a/locales/en.json b/locales/en.json
index 43d0186d0..aecad26fb 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -3648,6 +3648,8 @@
   "tasks.body.linkPlaceholder": "Paste or type a link",
   "tasks.body.format.link": "Link",
   "tasks.body.format.removeLink": "Remove link",
+  "tasks.body.format.marks": "Marks",
+  "tasks.body.format.blocks": "Blocks",
   "tasks.body.format.more": "More…",
   "tasks.actions.more": "More actions",
   "tasks.actions.copyUrl": "Copy task URL",
@@ -3947,5 +3949,7 @@
   "sessions.fileViewer.previousPage": "Previous page",
   "sessions.fileViewer.nextPage": "Next page",
   "sessions.fileViewer.page": "Page",
+  "sessions.fileViewer.pagination": "File pages",
+  "sessions.fileViewer.position": "Page {{page}} of {{total}}",
   "sessions.fileViewer.pageUnavailable": "File changed or is unavailable. Reopen the preview."
 }
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index 8417d0186..9125fc307 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -3648,6 +3648,8 @@
   "tasks.body.linkPlaceholder": "粘贴或输入链接",
   "tasks.body.format.link": "链接",
   "tasks.body.format.removeLink": "移除链接",
+  "tasks.body.format.marks": "标记",
+  "tasks.body.format.blocks": "块",
   "tasks.body.format.more": "更多…",
   "tasks.actions.more": "更多操作",
   "tasks.actions.copyUrl": "复制任务链接",
@@ -3947,5 +3949,7 @@
   "sessions.fileViewer.previousPage": "上一页",
   "sessions.fileViewer.nextPage": "下一页",
   "sessions.fileViewer.page": "页码",
+  "sessions.fileViewer.pagination": "文件分页",
+  "sessions.fileViewer.position": "第 {{page}} 页，共 {{total}} 页",
   "sessions.fileViewer.pageUnavailable": "文件已更改或无法读取，请重新打开预览。"
 }
diff --git a/packages/components/.storybook/main.cjs b/packages/components/.storybook/main.cjs
index 251e4bdcf..342284c8b 100644
--- a/packages/components/.storybook/main.cjs
+++ b/packages/components/.storybook/main.cjs
@@ -1,4 +1,6 @@
 const tailwindcss = require('@tailwindcss/vite').default;
+const stylex = require('@stylexjs/unplugin').default;
+const { stylexOptions } = require('../../ui/stylex-options.ts');
 const { loadEnv } = require('vite');
 const { resolve } = require('node:path');
 const wasm = require('vite-plugin-wasm').default;
@@ -33,6 +35,7 @@ const config = {
       return true;
     });
     viteConfig.plugins.push(tailwindcss());
+    viteConfig.plugins.push(stylex.vite(stylexOptions));
 
     viteConfig.worker = {
       ...(viteConfig.worker ?? {}),
diff --git a/packages/components/package.json b/packages/components/package.json
index 9023024de..93c7e5859 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -70,6 +70,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@lody/ui": "workspace:*",
     "@zumer/snapdom": "^2.24.15",
     "@assistant-ui/react": "^0.10.39",
     "@assistant-ui/react-markdown": "^0.10.8",
@@ -101,22 +102,14 @@
     "@posthog/react": "^1.10.3",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.15",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-menubar": "^1.1.15",
     "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.9",
     "@react-three/fiber": "^9.7.0",
     "@sqlite.org/sqlite-wasm": "3.50.1-build1",
@@ -196,6 +189,7 @@
     "zod": "catalog:"
   },
   "devDependencies": {
+    "@stylexjs/unplugin": "0.19.0",
     "@lody/configs": "workspace:*",
     "@playwright/test": "^1.58.2",
     "@radix-ui/react-avatar": "^1.1.10",
diff --git a/packages/components/src/components/ai-gui/chat-failed-detail-dialog.tsx b/packages/components/src/components/ai-gui/chat-failed-detail-dialog.tsx
index fe3ee3a39..0ec23890c 100644
--- a/packages/components/src/components/ai-gui/chat-failed-detail-dialog.tsx
+++ b/packages/components/src/components/ai-gui/chat-failed-detail-dialog.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { AlertCircle, Check, Copy } from 'lucide-react';
 
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   Dialog,
   DialogClose,
@@ -128,11 +128,11 @@ export function ChatFailedDetailDialog({
 
         <DialogFooter className="gap-2">
           <DialogClose asChild>
-            <Button type="button" variant="ghost" size="sm">
+            <Button type="button" variant="ghost" size="small">
               {t('common.close', 'Close')}
             </Button>
           </DialogClose>
-          <Button type="button" variant="outline" size="sm" onClick={handleCopy}>
+          <Button type="button" variant="secondary" size="small" onClick={handleCopy}>
             {copied ? (
               <Check className="size-3.5 text-emerald-500" aria-hidden="true" />
             ) : (
diff --git a/packages/components/src/components/ai-gui/mermaid-diagram-viewer.tsx b/packages/components/src/components/ai-gui/mermaid-diagram-viewer.tsx
index 6143ba0cc..c8688e0a7 100644
--- a/packages/components/src/components/ai-gui/mermaid-diagram-viewer.tsx
+++ b/packages/components/src/components/ai-gui/mermaid-diagram-viewer.tsx
@@ -9,7 +9,7 @@ import {
 import { createPortal } from 'react-dom';
 import { Maximize, X, ZoomIn, ZoomOut } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 
 /**
@@ -41,9 +41,8 @@ const MERMAID_DIAGRAM_MAX_INITIAL_ZOOM = 3;
 const MERMAID_DIAGRAM_ZOOM_STEP = 1.25;
 
 /**
- * `size="icon"` is 36px square. The viewer's controls sit at the top edge of a
- * phone screen, where the shared size is under the 44px touch-target floor
- * (iOS HIG / WCAG 2.5.5) that this whole fix is about.
+ * The shared Button sizes are under this viewer's 44px touch-target floor, so
+ * the toolbar keeps an explicit size at the top edge of a phone screen.
  */
 const CONTROL_CLASS_NAME = 'h-11 w-11 shrink-0 text-muted-foreground';
 
@@ -274,7 +273,8 @@ function OpenMermaidDiagramViewer({
         <Button
           type="button"
           variant="ghost"
-          size="icon"
+          size="small"
+          icon
           className={CONTROL_CLASS_NAME}
           onClick={() => zoomBy(1 / MERMAID_DIAGRAM_ZOOM_STEP)}
           disabled={zoom !== null && zoom <= MERMAID_DIAGRAM_MIN_ZOOM}
@@ -286,7 +286,7 @@ function OpenMermaidDiagramViewer({
         <Button
           type="button"
           variant="ghost"
-          size="icon"
+          size="small"
           className={cn(CONTROL_CLASS_NAME, 'w-auto min-w-11 px-2 font-mono text-xs tabular-nums')}
           onClick={resetZoom}
           title={resetZoomLabel}
@@ -297,7 +297,8 @@ function OpenMermaidDiagramViewer({
         <Button
           type="button"
           variant="ghost"
-          size="icon"
+          size="small"
+          icon
           className={CONTROL_CLASS_NAME}
           onClick={() => zoomBy(MERMAID_DIAGRAM_ZOOM_STEP)}
           disabled={zoom !== null && zoom >= MERMAID_DIAGRAM_MAX_ZOOM}
@@ -310,7 +311,8 @@ function OpenMermaidDiagramViewer({
           ref={closeRef}
           type="button"
           variant="ghost"
-          size="icon"
+          size="small"
+          icon
           data-testid="mermaid-diagram-viewer-close"
           className={CONTROL_CLASS_NAME}
           onClick={onClose}
diff --git a/packages/components/src/components/ai-gui/message-selection.tsx b/packages/components/src/components/ai-gui/message-selection.tsx
index 3a10db4f5..d17f836fb 100644
--- a/packages/components/src/components/ai-gui/message-selection.tsx
+++ b/packages/components/src/components/ai-gui/message-selection.tsx
@@ -12,8 +12,8 @@ import {
 import { useTranslation } from 'react-i18next';
 import { ImageIcon } from 'lucide-react';
 import type { ConversationMessage } from '@lody/shared';
-import { Button } from '@/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Button } from '@lody/ui/button';
+import { Checkbox } from '@lody/ui/checkbox';
 import { ConversationColumn } from '@/components/shared/conversation-column';
 
 type SelectionGesture = {
@@ -366,15 +366,15 @@ export function MessageSelectionToolbar({
           count: selection.messages.length,
         })}
       </span>
-      <Button variant="ghost" size="sm" onClick={selection.toggleAll}>
+      <Button variant="ghost" size="small" onClick={selection.toggleAll}>
         {selection.allSelected
           ? t('sessions.shareImage.clearSelection', 'Clear selection')
           : t('sessions.shareImage.selectAll', 'Select all')}
       </Button>
-      <Button variant="ghost" size="sm" onClick={selection.cancel}>
+      <Button variant="ghost" size="small" onClick={selection.cancel}>
         {t('common.cancel', 'Cancel')}
       </Button>
-      <Button size="sm" disabled={!selection.messages.length} onClick={selection.confirm}>
+      <Button size="small" disabled={!selection.messages.length} onClick={selection.confirm}>
         <ImageIcon className="size-4" />
         {t('sessions.shareImage.preview', 'Preview image')}
       </Button>
diff --git a/packages/components/src/components/ai-gui/session-file-preview-dialog.tsx b/packages/components/src/components/ai-gui/session-file-preview-dialog.tsx
index 945649250..f0798a636 100644
--- a/packages/components/src/components/ai-gui/session-file-preview-dialog.tsx
+++ b/packages/components/src/components/ai-gui/session-file-preview-dialog.tsx
@@ -4,8 +4,8 @@ import { toast } from 'sonner';
 import { Check, Copy, Download, FileWarning, Loader2, X } from 'lucide-react';
 import type { SessionFilePayload } from '@lody/shared';
 import { Dialog, DialogClose, DialogContentWithoutClose, DialogTitle } from '@/ui/dialog';
-import { Button } from '@/ui/button';
-import { Tabs, TabsList, TabsTrigger } from '@/ui/tabs';
+import { Button } from '@lody/ui/button';
+import { Tabs } from '@lody/ui/tabs';
 import { formatFileSize } from '@/lib/session-file-presentation';
 import { MarkdownRenderer } from './markdown-renderer';
 
@@ -82,26 +82,24 @@ export function SessionFilePreviewPanel({
         </div>
         <div className="flex shrink-0 items-center gap-1">
           {markdown ? (
-            <Tabs
+            <Tabs.Root
               value={showRaw ? 'raw' : 'rendered'}
-              onValueChange={(v) => setShowRaw(v === 'raw')}
+              onValueChange={(value) => setShowRaw(value === 'raw')}
               className="mr-1"
             >
-              <TabsList className="h-7 p-0.5">
-                <TabsTrigger value="rendered" className="h-6 px-2.5 text-xs">
+              <Tabs.List size="small">
+                <Tabs.Tab value="rendered">
                   {t('sessions.filePreviewRendered', 'Rendered')}
-                </TabsTrigger>
-                <TabsTrigger value="raw" className="h-6 px-2.5 text-xs">
-                  {t('sessions.filePreviewRaw', 'Raw')}
-                </TabsTrigger>
-              </TabsList>
-            </Tabs>
+                </Tabs.Tab>
+                <Tabs.Tab value="raw">{t('sessions.filePreviewRaw', 'Raw')}</Tabs.Tab>
+              </Tabs.List>
+            </Tabs.Root>
           ) : null}
           <Button
             type="button"
             variant="ghost"
-            size="icon"
-            className="size-7 text-muted-foreground hover:text-foreground"
+            size="small"
+            icon
             onClick={handleCopy}
             disabled={status.kind !== 'loaded'}
             aria-label={t('common.copy', 'Copy')}
@@ -111,8 +109,8 @@ export function SessionFilePreviewPanel({
           <Button
             type="button"
             variant="ghost"
-            size="icon"
-            className="size-7 text-muted-foreground hover:text-foreground"
+            size="small"
+            icon
             onClick={() => onDownload(file)}
             disabled={isDownloading}
             aria-label={t('sessions.fileDownload', 'Download')}
@@ -131,9 +129,9 @@ export function SessionFilePreviewPanel({
             <Button
               type="button"
               variant="ghost"
-              size="icon"
-              className="size-7 text-muted-foreground hover:text-foreground"
               aria-label={t('common.close', 'Close')}
+              size="small"
+              icon
             >
               <X className="size-4" />
             </Button>
@@ -153,8 +151,8 @@ export function SessionFilePreviewPanel({
           <Button
             type="button"
             variant="secondary"
-            size="sm"
-            className="h-6 shrink-0 px-2.5 text-xs"
+            size="small"
+            className="shrink-0"
             onClick={() => onDownload(file)}
             disabled={isDownloading}
           >
@@ -177,7 +175,7 @@ export function SessionFilePreviewPanel({
           <div className="flex flex-col items-center gap-3 py-12 text-sm text-muted-foreground">
             <FileWarning className="size-6 text-muted-foreground/60" aria-hidden="true" />
             <span>{status.message}</span>
-            <Button type="button" variant="secondary" size="sm" onClick={() => onDownload(file)}>
+            <Button type="button" variant="secondary" size="small" onClick={() => onDownload(file)}>
               {t('sessions.fileDownload', 'Download')}
             </Button>
           </div>
diff --git a/packages/components/src/components/ai-gui/subagent-task-panel.tsx b/packages/components/src/components/ai-gui/subagent-task-panel.tsx
index cc983a9c6..94b487753 100644
--- a/packages/components/src/components/ai-gui/subagent-task-panel.tsx
+++ b/packages/components/src/components/ai-gui/subagent-task-panel.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Check, ChevronRight, CircleDashed, Loader2, X } from 'lucide-react';
 import type { MessageContent } from '@lody/shared';
 import { cn } from '@/lib/utils';
-import { Badge } from '@/ui/badge';
+import { Badge } from '@lody/ui/badge';
 
 /**
  * Renders the subagent/background tasks a turn spawned as a single grouped
@@ -114,9 +114,7 @@ const SubagentTaskRow = ({ task }: { task: SubagentTask }) => {
           <span className="min-w-0 flex-1" />
         )}
         {task.isBackgrounded ? (
-          <Badge variant="secondary" className="shrink-0 px-1.5 py-0 text-[10px] font-medium">
-            {t('sessions.subagentTasks.background', 'Background')}
-          </Badge>
+          <Badge>{t('sessions.subagentTasks.background', 'Background')}</Badge>
         ) : null}
         {action ? (
           <span
diff --git a/packages/components/src/components/ai-gui/user-message-editor.tsx b/packages/components/src/components/ai-gui/user-message-editor.tsx
index 553d64824..6929397cb 100644
--- a/packages/components/src/components/ai-gui/user-message-editor.tsx
+++ b/packages/components/src/components/ai-gui/user-message-editor.tsx
@@ -2,8 +2,8 @@ import { useCallback, useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Loader2 } from 'lucide-react';
 
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 import { cn } from '@/lib/utils';
 import type { ConversationFontSize } from '@/atoms/settings';
 import { conversationTextFontSizeStyle } from './conversation-font-size-classes';
@@ -101,24 +101,20 @@ export function UserMessageEditor({
         <Button
           type="button"
           variant="ghost"
-          size="sm"
+          size="small"
+          shape="pill"
           disabled={isSaving}
           onClick={onCancel}
-          className="h-7 rounded-full px-3 text-xs font-normal text-muted-foreground hover:text-foreground"
         >
           {t('common.cancel', 'Cancel')}
         </Button>
         <Button
           type="button"
-          variant="ghost"
-          size="sm"
+          variant="primary"
+          size="small"
+          shape="pill"
           disabled={!canSave}
           onClick={onSave}
-          className={cn(
-            'h-7 rounded-full px-3.5 text-xs font-medium shadow-xs transition-all',
-            'bg-foreground text-background hover:bg-foreground/90 hover:text-background',
-            'active:translate-y-[1px]'
-          )}
         >
           {isSaving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
           {t('sessions.send', 'Send')}
diff --git a/packages/components/src/components/ai-gui/view.tsx b/packages/components/src/components/ai-gui/view.tsx
index 1d967a6df..25a663e5e 100644
--- a/packages/components/src/components/ai-gui/view.tsx
+++ b/packages/components/src/components/ai-gui/view.tsx
@@ -176,7 +176,7 @@ import { formatConversationTimestamp } from '@/lib/format-conversation-timestamp
 import { toIntlLocale } from '@/lib/intl-locale';
 import { useStableCallback } from '@/hooks/use-stable-callback';
 import { normalizeWorktreePath, normalizeWorktreeTitle } from '@/lib/worktree-path';
-import { Badge } from '@/ui/badge';
+import { Badge, type BadgeTone } from '@lody/ui/badge';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -187,14 +187,14 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/ui/alert-dialog';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   AgentActivityIndicator,
   type AgentActivityTone,
 } from '@/components/shared/agent-activity-indicator';
 import { stripRecommended } from '@/components/shared/acp-selector-options';
 import { DiffViewer } from '@/ui/diff-viewer/diff-viewer';
-import { Skeleton } from '@/ui/skeleton';
+import { Skeleton } from '@lody/ui/skeleton';
 import { getSessionImageBlobUrl, getSessionImageDataUrl } from '@/lib/session-image-cache';
 import { SessionFileCard, SessionFileCardList } from './session-file-card';
 import {
@@ -1794,8 +1794,9 @@ export const SessionChatStreamView = forwardRef<
                 <ConversationColumn className="flex justify-end">
                   <Button
                     variant="secondary"
-                    size="icon"
-                    className="pointer-events-auto rounded-full border border-border/70 shadow-lg"
+                    icon
+                    shape="pill"
+                    className="pointer-events-auto"
                     onClick={scrollToBottom}
                     aria-label={t('sessions.scrollToLatest')}
                   >
@@ -2923,9 +2924,9 @@ const UserMessageRowView = ({
                     <Button
                       type="button"
                       variant="ghost"
-                      size="icon"
+                      size="small"
+                      icon
                       className={cn(
-                        'h-7 w-7 text-muted-foreground hover:bg-hover hover:text-foreground transition-opacity',
                         !isMobile &&
                           'opacity-0 group-hover/usermsg:opacity-100 focus-visible:opacity-100'
                       )}
@@ -2949,9 +2950,9 @@ const UserMessageRowView = ({
                     <Button
                       type="button"
                       variant="ghost"
-                      size="icon"
+                      size="small"
+                      icon
                       className={cn(
-                        'h-7 w-7 text-muted-foreground hover:bg-hover hover:text-foreground transition-opacity',
                         !isMobile &&
                           'opacity-0 group-hover/usermsg:opacity-100 focus-visible:opacity-100'
                       )}
@@ -2983,9 +2984,9 @@ const UserMessageRowView = ({
                   <Button
                     type="button"
                     variant="ghost"
-                    size="icon"
+                    size="small"
+                    icon
                     className={cn(
-                      'h-7 w-7 text-muted-foreground hover:bg-hover hover:text-foreground transition-opacity',
                       !isMobile &&
                         'opacity-0 group-hover/usermsg:opacity-100 focus-visible:opacity-100'
                     )}
@@ -3028,9 +3029,9 @@ function UserMessageAuthorAvatar({
 }) {
   const { t } = useTranslation();
   const displayName = user?.name?.trim() || user?.email?.trim();
-  const avatar = (
-    <UserAvatar user={user} className={cn(isMobile ? 'h-7 w-7' : 'h-8 w-8')} showIcon />
-  );
+  // One rung on both shells: the 28/32 split was a size that had drifted rather
+  // than a decision, and `@lody/ui`'s ladder has nothing between them.
+  const avatar = <UserAvatar user={user} size="large" showIcon />;
 
   if (isMobile || !showProfile || !displayName) {
     return avatar;
@@ -3057,11 +3058,7 @@ function UserMessageAuthorAvatar({
         aria-label={t('sessions.senderProfile', 'Sender profile')}
       >
         <div className="flex items-center gap-3.5 p-4">
-          <UserAvatar
-            user={user}
-            className="h-16 w-16 shrink-0 text-xl"
-            fallbackClassName="bg-primary/10 text-primary"
-          />
+          <UserAvatar user={user} size="xlarge" className="shrink-0" />
           <div className="min-w-0">
             <div className="truncate text-sm font-semibold text-foreground">
               {user?.name?.trim() || displayName}
@@ -3570,8 +3567,8 @@ const AssistantForkButton = ({
     <Button
       type="button"
       variant="ghost"
-      size="icon"
-      className="h-7 w-7 text-muted-foreground hover:bg-hover hover:text-foreground"
+      size="small"
+      icon
       onClick={offerWorktree ? undefined : () => onFork(turnId, 'shared')}
       disabled={isForking}
       aria-label={t('sessions.forkSession', 'Fork session')}
@@ -3756,8 +3753,8 @@ const AssistantTurnFooter = ({
                       <Button
                         type="button"
                         variant="ghost"
-                        size="icon"
-                        className="h-7 w-7 text-muted-foreground hover:bg-hover hover:text-foreground"
+                        size="small"
+                        icon
                         onClick={() => {
                           void handleCopy();
                         }}
@@ -3817,14 +3814,8 @@ const AssistantTurnFooter = ({
               <Button
                 key={action.id}
                 type="button"
-                variant={isAccent ? 'default' : 'outline'}
-                size="sm"
-                className={cn(
-                  'h-8 gap-1.5 rounded-md px-3 text-xs font-medium transition-colors',
-                  isAccent
-                    ? 'border border-primary/40 bg-primary/[0.12] text-primary shadow-xs hover:bg-primary/[0.18] hover:text-primary disabled:opacity-60'
-                    : 'border-border/60 bg-background/60 text-foreground/85 shadow-none hover:bg-muted/55 hover:text-foreground'
-                )}
+                variant={isAccent ? 'primary' : 'secondary'}
+                size="small"
                 onClick={action.onClick}
                 disabled={action.disabled}
               >
@@ -4691,6 +4682,7 @@ const UserImageBlock = ({
     >
       {isThumbnailLoading && (
         <Skeleton
+          shape="block"
           className={cn(isThumbnail ? thumbnailFrameClass : `h-36 ${fullFrameWidthClass}`)}
         />
       )}
@@ -5252,8 +5244,7 @@ const UserPlainTextBlock = ({
             <Button
               type="button"
               variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+              size="small"
               onClick={() => setIsExpanded((prev) => !prev)}
             >
               {isExpanded ? 'Show less' : 'Show more'}
@@ -5531,8 +5522,9 @@ const PlanPanel = ({
               <Button
                 type="button"
                 variant="ghost"
-                size="icon"
-                className="-mr-1 h-6 w-6 shrink-0 text-muted-foreground hover:bg-hover hover:text-foreground"
+                size="mini"
+                icon
+                className="-mr-1 shrink-0"
                 onClick={() => {
                   void handleCopy();
                 }}
@@ -5641,19 +5633,14 @@ const PLAN_STATUS_META: Record<
   },
 };
 
-const PRIORITY_META: Record<PlanEntryItem['priority'], { label: string; className: string }> = {
-  high: {
-    label: 'High',
-    className: 'border-status-danger/20 bg-status-danger/[0.15] text-status-danger',
-  },
-  medium: {
-    label: 'Medium',
-    className: 'border-status-warning/20 bg-status-warning/[0.15] text-status-warning',
-  },
-  low: {
-    label: 'Low',
-    className: 'border-status-success/20 bg-status-success/[0.15] text-status-success',
-  },
+/**
+ * How urgent a plan entry is, as one of the tones the Badge already has: the
+ * three colours this table used to name by hand are those three outcomes.
+ */
+const PRIORITY_META: Record<PlanEntryItem['priority'], { label: string; tone: BadgeTone }> = {
+  high: { label: 'High', tone: 'danger' },
+  medium: { label: 'Medium', tone: 'warning' },
+  low: { label: 'Low', tone: 'success' },
 };
 
 const PlanEntryRow = ({
@@ -5680,10 +5667,7 @@ const PlanEntryRow = ({
           <StatusIcon className={cn('h-4 w-4 flex-none shrink-0', statusMeta.className)} />
           <span className="break-words">{entry.content}</span>
         </div>
-        <Badge
-          variant="outline"
-          className={cn('text-[10px] font-semibold uppercase', priorityMeta.className)}
-        >
+        <Badge tone={priorityMeta.tone} className="uppercase">
           {priorityMeta.label}
         </Badge>
       </div>
diff --git a/packages/components/src/components/archive/archive-view.tsx b/packages/components/src/components/archive/archive-view.tsx
index c3c428566..cc42aac62 100644
--- a/packages/components/src/components/archive/archive-view.tsx
+++ b/packages/components/src/components/archive/archive-view.tsx
@@ -25,8 +25,8 @@ import {
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Button } from '@lody/ui/button';
+import { Checkbox } from '@lody/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -42,7 +42,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
-import { Input } from '@/ui/input';
+import { Input } from '@lody/ui/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { currentWorkspaceSlugAtom, setMobileDrawerOpenAtom, userAtom } from '@/atoms';
 import { getAgentMetaByIdAtomFamily } from '@/atoms/agents';
@@ -538,11 +538,7 @@ function DesktopArchivedSessionItem({
           <Tooltip delayDuration={500}>
             <TooltipTrigger asChild>
               <span className="inline-flex shrink-0">
-                <UserAvatar
-                  user={owner}
-                  className="h-4 w-4"
-                  fallbackClassName="text-[8px] font-medium"
-                />
+                <UserAvatar user={owner} size="mini" />
               </span>
             </TooltipTrigger>
             <TooltipContent side="top">{owner.name ?? 'Unknown'}</TooltipContent>
@@ -739,11 +735,7 @@ function MobileArchivedSessionItem({
               <Tooltip delayDuration={500}>
                 <TooltipTrigger asChild>
                   <span className="inline-flex shrink-0">
-                    <UserAvatar
-                      user={owner}
-                      className="h-4 w-4"
-                      fallbackClassName="text-[8px] font-medium"
-                    />
+                    <UserAvatar user={owner} size="mini" />
                   </span>
                 </TooltipTrigger>
                 <TooltipContent side="top">{owner.name ?? 'Unknown'}</TooltipContent>
@@ -895,12 +887,6 @@ export function ArchivedSessionGroupSection({
   const allSelected = selectedInGroup === group.sessions.length && group.sessions.length > 0;
   const someSelected = selectedInGroup > 0 && !allSelected;
 
-  const groupCheckboxState: boolean | 'indeterminate' = allSelected
-    ? true
-    : someSelected
-      ? 'indeterminate'
-      : false;
-
   const showHeader = !hideGroupHeader;
   const showSessions = hideGroupHeader || !group.collapsed;
   const sessionTree = useMemo(() => buildArchivedSessionTree(group.sessions), [group.sessions]);
@@ -928,7 +914,8 @@ export function ArchivedSessionGroupSection({
               }}
             >
               <Checkbox
-                checked={groupCheckboxState}
+                checked={allSelected}
+                indeterminate={someSelected}
                 onCheckedChange={() => onToggleGroupSelect(groupKey, groupSessionIds)}
                 aria-label={`Select all in ${label}`}
               />
@@ -1489,12 +1476,7 @@ export function ArchiveView() {
         {isMobile ? (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-8 shrink-0 gap-1.5 border-foreground/[0.10] bg-background px-2.5 text-xs font-medium shadow-none dark:border-input-border"
-              >
+              <Button type="button" variant="secondary" size="small" className="shrink-0">
                 <span className="max-w-[6.5rem] truncate">{scopeLabel}</span>
                 <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
               </Button>
@@ -1520,12 +1502,7 @@ export function ArchiveView() {
       <div className="flex shrink-0 items-center gap-1.5">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-8 gap-1.5 border-foreground/[0.10] bg-background px-2.5 text-xs font-medium shadow-none dark:border-input-border"
-            >
+            <Button type="button" variant="secondary" size="small">
               {groupMode === 'flat' ? (
                 <List className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
               ) : (
@@ -1554,12 +1531,7 @@ export function ArchiveView() {
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-8 gap-1.5 border-foreground/[0.10] bg-background px-2.5 text-xs font-medium shadow-none dark:border-input-border"
-            >
+            <Button type="button" variant="secondary" size="small">
               {sortMode === 'title' ? (
                 <ArrowDownAZ className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
               ) : sortMode === 'oldest' ? (
@@ -1661,7 +1633,7 @@ export function ArchiveView() {
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteConfirmSession(null)}>
+            <Button variant="secondary" onClick={() => setDeleteConfirmSession(null)}>
               {t('common.cancel', 'Cancel')}
             </Button>
             <Button
@@ -1705,7 +1677,7 @@ export function ArchiveView() {
           </DialogHeader>
           <DialogFooter>
             <Button
-              variant="outline"
+              variant="secondary"
               disabled={bulkActionInFlight === 'delete'}
               onClick={() => setBulkDeleteConfirmOpen(false)}
             >
diff --git a/packages/components/src/components/archive/web-archive-screen.tsx b/packages/components/src/components/archive/web-archive-screen.tsx
index 385450976..aeb51243e 100644
--- a/packages/components/src/components/archive/web-archive-screen.tsx
+++ b/packages/components/src/components/archive/web-archive-screen.tsx
@@ -7,7 +7,7 @@ import { navigationSidebarHiddenAtom, showNavigationSidebarAtom } from '@/atoms/
 import { isMacOSElectronRenderer, useElectronFullscreen } from '@/lib/electron';
 import { useWindowDragRegionClass, useWindowsCaptionPadClass } from '@/ui/window-drag-region';
 import { isNativeAppShell } from '@/lib/native-platform';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -76,22 +76,18 @@ export function WebArchiveScreen({
             <Button
               type="button"
               variant="ghost"
-              size="icon"
+              size="small"
+              icon
               onClick={() => showNavigationSidebar()}
               aria-label={t('sessions.leftSidebar.show', 'Show navigation sidebar')}
-              className="-ml-1 h-7 w-7 shrink-0 text-muted-foreground"
+              className="-ml-1 shrink-0"
             >
               <PanelLeft className="h-4 w-4" />
             </Button>
           ) : null}
           {isMultiSelectMode ? (
             <>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 text-muted-foreground hover:text-foreground"
-                onClick={onExitMultiSelect}
-              >
+              <Button variant="ghost" icon onClick={onExitMultiSelect}>
                 <X className="h-4 w-4" />
                 <span className="sr-only">{t('archive.multiSelect.exit', 'Exit selection')}</span>
               </Button>
@@ -102,22 +98,20 @@ export function WebArchiveScreen({
               </span>
               <div className="flex-1" />
               <Button
-                variant="outline"
-                size="sm"
+                variant="secondary"
+                size="small"
                 disabled={selectedCount === 0 || isBulkActionBusy || bulkRestoreDisabled}
                 title={bulkRestoreDisabled ? bulkRestoreDisabledReason : undefined}
                 onClick={onBulkRestore}
-                className="gap-1.5"
               >
                 <Undo2 className="h-3.5 w-3.5" />
                 {t('archive.multiSelect.restore', 'Restore')}
               </Button>
               <Button
                 variant="destructive"
-                size="sm"
+                size="small"
                 disabled={selectedCount === 0 || isBulkActionBusy}
                 onClick={onRequestBulkDelete}
-                className="gap-1.5"
               >
                 <Trash2 className="h-3.5 w-3.5" />
                 {t('archive.multiSelect.delete', 'Delete')}
diff --git a/packages/components/src/components/bug-report/bug-report-dialog.tsx b/packages/components/src/components/bug-report/bug-report-dialog.tsx
index b96126184..31c3c6638 100644
--- a/packages/components/src/components/bug-report/bug-report-dialog.tsx
+++ b/packages/components/src/components/bug-report/bug-report-dialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CircleCheck, Loader2 } from 'lucide-react';
 import type { MachineId } from '@lody/shared';
@@ -10,11 +10,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/ui/dialog';
-import { Button } from '@/ui/button';
-import { Label } from '@/ui/label';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Field as UiField } from '@lody/ui/field';
+import { Textarea } from '@lody/ui/textarea';
 import { CopyButton } from '@/ui/copy-button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
+import { Select } from '@lody/ui/select';
 
 export type BugReportMachineOption = {
   id: MachineId;
@@ -67,6 +67,35 @@ export function BugReportDialog({
     selectedMachineId != null && machines.some((machine) => machine.id === selectedMachineId)
       ? selectedMachineId
       : null;
+  // `Select.Value` reads the label of the current value from `items` rather than
+  // from the rows, so the online dot travels with the name to the trigger only
+  // because both come from here.
+  const machineOptions = useMemo(
+    () => [
+      {
+        value: NO_MACHINE_VALUE,
+        label: (
+          <span className="flex items-center gap-2">
+            <span className="h-2 w-2 shrink-0 rounded-full border border-muted-foreground/50" />
+            <span className="truncate">
+              {t('bugReport.noMachineOption', 'No machine (description only)')}
+            </span>
+          </span>
+        ),
+      },
+      ...machines.map((machine) => ({
+        value: machine.id as string,
+        label: (
+          <span className="flex items-center gap-2">
+            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500" />
+            <span className="truncate">{machine.name}</span>
+          </span>
+        ),
+      })),
+    ],
+    [machines, t]
+  );
+
   const submitting = state.status === 'submitting';
   const canSubmit = !submitting && description.trim().length > 0;
 
@@ -121,9 +150,9 @@ export function BugReportDialog({
             </DialogHeader>
             <div className="grid gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="bug-report-description">
+                <UiField.Label htmlFor="bug-report-description">
                   {t('bugReport.descriptionLabel', 'What happened?')}
-                </Label>
+                </UiField.Label>
                 <Textarea
                   id="bug-report-description"
                   value={description}
@@ -137,7 +166,9 @@ export function BugReportDialog({
                 />
               </div>
               <div className="grid gap-2">
-                <Label htmlFor="bug-report-machine">{t('bugReport.machineLabel', 'Machine')}</Label>
+                <UiField.Label htmlFor="bug-report-machine">
+                  {t('bugReport.machineLabel', 'Machine')}
+                </UiField.Label>
                 {machines.length === 0 ? (
                   <p className="text-sm text-muted-foreground">
                     {t(
@@ -147,7 +178,8 @@ export function BugReportDialog({
                   </p>
                 ) : (
                   <>
-                    <Select
+                    <Select.Root
+                      items={machineOptions}
                       value={machineId ?? NO_MACHINE_VALUE}
                       disabled={submitting}
                       onValueChange={(value) =>
@@ -156,30 +188,19 @@ export function BugReportDialog({
                         )
                       }
                     >
-                      <SelectTrigger id="bug-report-machine">
-                        <SelectValue
+                      <Select.Trigger id="bug-report-machine">
+                        <Select.Value
                           placeholder={t('bugReport.machinePlaceholder', 'Select a machine')}
                         />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value={NO_MACHINE_VALUE}>
-                          <span className="flex items-center gap-2">
-                            <span className="h-2 w-2 shrink-0 rounded-full border border-muted-foreground/50" />
-                            <span className="truncate">
-                              {t('bugReport.noMachineOption', 'No machine (description only)')}
-                            </span>
-                          </span>
-                        </SelectItem>
-                        {machines.map((machine) => (
-                          <SelectItem key={machine.id} value={machine.id}>
-                            <span className="flex items-center gap-2">
-                              <span className="h-2 w-2 shrink-0 rounded-full bg-green-500" />
-                              <span className="truncate">{machine.name}</span>
-                            </span>
-                          </SelectItem>
+                      </Select.Trigger>
+                      <Select.Content>
+                        {machineOptions.map((option) => (
+                          <Select.Item key={option.value} value={option.value}>
+                            {option.label}
+                          </Select.Item>
                         ))}
-                      </SelectContent>
-                    </Select>
+                      </Select.Content>
+                    </Select.Root>
                     {machineId == null ? (
                       <p className="text-sm text-muted-foreground">
                         {t(
@@ -196,7 +217,7 @@ export function BugReportDialog({
               ) : null}
             </div>
             <DialogFooter>
-              <Button variant="outline" disabled={submitting} onClick={onClose}>
+              <Button variant="secondary" disabled={submitting} onClick={onClose}>
                 {t('common.cancel', 'Cancel')}
               </Button>
               <Button
diff --git a/packages/components/src/components/chat/attachment-add-menu.tsx b/packages/components/src/components/chat/attachment-add-menu.tsx
index 7c29cd923..024e56cd4 100644
--- a/packages/components/src/components/chat/attachment-add-menu.tsx
+++ b/packages/components/src/components/chat/attachment-add-menu.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { ChevronLeft, ChevronRight, Paperclip, Plug, Plus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { describeMcpConnection, type McpServerId, type WorkspaceMcpServerMeta } from '@lody/shared';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 import {
   DropdownMenu,
@@ -102,7 +102,7 @@ export function AttachmentAddMenu({
         <Button
           type="button"
           variant="ghost"
-          size="icon"
+          icon
           disabled={disabled}
           aria-label={triggerLabel}
           className={cn(
@@ -110,8 +110,6 @@ export function AttachmentAddMenu({
             // Light-stroke "+" with a circular hover/open fill. `bg-hover` (not
             // `bg-accent`/`bg-muted`) because those equal the background in the
             // dark theme and paint nothing.
-            'rounded-full text-foreground transition-colors',
-            'hover:bg-hover hover:text-foreground',
             'data-[state=open]:bg-hover data-[state=open]:text-foreground'
           )}
         >
diff --git a/packages/components/src/components/chat/chat-composer.tsx b/packages/components/src/components/chat/chat-composer.tsx
index 37a098c62..9645d8b4b 100644
--- a/packages/components/src/components/chat/chat-composer.tsx
+++ b/packages/components/src/components/chat/chat-composer.tsx
@@ -45,7 +45,7 @@ import type { Mention as MentionRange } from '@/ui/mention/index';
 import type { PersistedMentionRange } from '@/components/mentions/mention-persistence';
 import { toIntlLocale } from '@/lib/intl-locale';
 import { useIsMobile } from '@/hooks/use-mobile';
-import { Button, type ButtonProps } from '@/ui/button';
+import { Button, type ButtonProps } from '@lody/ui/button';
 import {
   Dialog,
   DialogClose,
@@ -54,8 +54,8 @@ import {
   DialogDescription,
   DialogTitle,
 } from '@/ui/dialog';
-import { Sheet, SheetContent, SheetDescription, SheetTitle } from '@/ui/sheet';
-import { Textarea, type TextareaProps } from '@/ui/textarea';
+import { Drawer } from '@lody/ui/drawer';
+import { Textarea, type TextareaProps } from '@lody/ui/textarea';
 import { hasFileTransfer, readDroppedTransfer } from '@/lib/file-drop';
 import {
   getChatComposerPromptPlaceholderKey,
@@ -773,8 +773,9 @@ export function ChatComposer({
                         <Button
                           type="button"
                           variant="secondary"
-                          size="icon"
-                          className={cn('rounded-full', isMobile ? 'h-6 w-6' : 'h-5 w-5')}
+                          size="mini"
+                          icon
+                          className={cn(isMobile ? '' : '')}
                           onClick={() => onImageRemove?.(image.id)}
                           aria-label={removeImageLabel}
                         >
@@ -869,8 +870,9 @@ export function ChatComposer({
                         <Button
                           type="button"
                           variant="secondary"
-                          size="icon"
-                          className={cn('rounded-full', isMobile ? 'h-6 w-6' : 'h-5 w-5')}
+                          size="mini"
+                          icon
+                          className={cn(isMobile ? '' : '')}
                           onClick={() => onFileRemove?.(file.id)}
                           aria-label={removeAttachmentLabel}
                         >
@@ -1089,8 +1091,12 @@ export function ChatComposer({
 
         if (isMobile) {
           return (
-            <Sheet open={previewPastedTextDraft !== null} onOpenChange={handlePastedTextOpenChange}>
-              <SheetContent
+            <Drawer.Root
+              side="bottom"
+              open={previewPastedTextDraft !== null}
+              onOpenChange={handlePastedTextOpenChange}
+            >
+              <Drawer.Content
                 side="bottom"
                 className="flex h-[85vh] flex-col gap-0 rounded-t-2xl p-0"
               >
@@ -1100,13 +1106,13 @@ export function ChatComposer({
                       <div className="h-1 w-9 rounded-full bg-muted-foreground/30" />
                     </div>
                     <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border/60 px-4 py-2.5">
-                      <SheetTitle className="flex items-center gap-2 text-sm font-medium">
+                      <Drawer.Title className="flex items-center gap-2 text-sm font-medium">
                         <ClipboardPaste className="h-3.5 w-3.5 text-muted-foreground" />
                         {pastedTextDialogTitle}
-                      </SheetTitle>
-                      <SheetDescription className="text-xs text-muted-foreground tabular-nums">
+                      </Drawer.Title>
+                      <Drawer.Description className="text-xs text-muted-foreground tabular-nums">
                         {summaryText}
-                      </SheetDescription>
+                      </Drawer.Description>
                     </div>
                     <Textarea
                       aria-label={pastedTextEditorLabel}
@@ -1119,8 +1125,8 @@ export function ChatComposer({
                     />
                   </>
                 ) : null}
-              </SheetContent>
-            </Sheet>
+              </Drawer.Content>
+            </Drawer.Root>
           );
         }
 
diff --git a/packages/components/src/components/chat/chat-landing-view.tsx b/packages/components/src/components/chat/chat-landing-view.tsx
index 5bf0ca9d0..322d2cabd 100644
--- a/packages/components/src/components/chat/chat-landing-view.tsx
+++ b/packages/components/src/components/chat/chat-landing-view.tsx
@@ -7,7 +7,7 @@ import type { PersistedMentionRange } from '@/components/mentions/mention-persis
 import type { AcpCommandSummary, AgentConfigCliType } from '@lody/shared';
 import { cn } from '@/lib/utils';
 import { useSessionMentionDropZone } from '@/hooks/use-session-mention-drag';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   ChatComposer,
   type ChatComposerFileItem,
@@ -270,11 +270,6 @@ export function ChatLandingView({
     'border-border bg-background/70 text-foreground hover:bg-muted/60'
   );
 
-  const primaryActionButtonClassName = cn(
-    'h-8 w-8 rounded-full shadow-xs transition-all',
-    'bg-foreground text-background hover:bg-foreground/90 hover:text-background active:translate-y-[1px] focus-visible:ring-ring focus-visible:ring-offset-background'
-  );
-
   // No-agent-config hint shown in scrollable area (not as overlay)
   const agentConfigHintNode =
     hintType === 'no-agent-config' ? (
@@ -356,12 +351,13 @@ export function ChatLandingView({
     <ErrorBoundary name="ChatLandingPrimaryAction" variant="inline" resetKeys={resetKeys}>
       <Button
         type="button"
-        size="icon"
-        variant="ghost"
+        variant="primary"
+        size="medium"
+        shape="pill"
+        icon
         onClick={onSubmit}
         disabled={submitDisabled}
         aria-label={submissionPending ? submittingLabel : submitLabel}
-        className={cn(primaryActionButtonClassName, isMobile ? 'h-6 w-6' : 'h-7 w-7')}
       >
         {submissionPending ? (
           <Loader2 className="h-4 w-4 animate-spin" />
diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index 65111d598..c48832ac5 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -53,7 +53,7 @@ import {
   RefreshCw,
   X,
 } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 import {
   type AgentSelection,
@@ -312,7 +312,7 @@ import {
 } from '@/lib/local-project-rpc-file-provider';
 import { GitHubRepoFileProvider } from '@/lib/github-repo-file-provider';
 import type { FileWorkspaceProvider } from '@/lib/file-workspace-provider';
-import { Tabs, TabsList, TabsTrigger } from '@/ui/tabs';
+import { Tabs } from '@lody/ui/tabs';
 import { Folder as FolderIcon, GitBranch as GitBranchIcon } from 'lucide-react';
 import { AddLocalProjectDialogContainer } from '@/components/local-projects/add-local-project-dialog-container';
 import {
@@ -3417,12 +3417,13 @@ function WorkspaceChatLanding({
           <Button
             type="button"
             variant="ghost"
-            size="icon"
-            className="h-6 w-6 rounded-md px-0 text-status-error hover:text-status-error [&_svg]:size-3.5"
+            size="mini"
+            icon
+            className="text-status-error hover:text-status-error"
             onClick={handleLocalGitStateRetry}
             aria-label={t('chat.localGitStateRetry', 'Retry loading branches')}
           >
-            <RefreshCw aria-hidden="true" />
+            <RefreshCw aria-hidden="true" className="size-4" />
           </Button>
         </TooltipTrigger>
         <TooltipContent side="bottom">
@@ -4038,38 +4039,30 @@ function WorkspaceChatLanding({
      small to read at a glance on a phone and doesn't surface both
      options without an extra tap. */
   /* Workdir mode pills: icon+label as a tight group, centered in each
-     equal-width segment (same affinity pattern as the Type ContextSwitch). */
-  const mobileSheetWorkdirModePillTriggerClassName = cn(
-    'flex-1 justify-center gap-1 rounded-md px-2 py-1 text-sm font-medium transition-all',
-    'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
-    'text-muted-foreground'
-  );
+     equal-width segment (same affinity pattern as the Type ContextSwitch).
+     The track, the pill and the dimming of an unavailable choice are the
+     primitive's; a stretched strip is what splits the width between them. */
   const mobileSheetWorkdirModeNode =
     contextType === 'local' && selectedLocalProject ? (
-      <Tabs
+      <Tabs.Root
         value={effectiveWorkdirMode}
         onValueChange={(value) => handleWorkdirModeChange(value as WorkdirMode)}
-        className="w-full"
       >
-        <TabsList className="flex h-10 w-full rounded-md bg-muted p-1">
-          <TabsTrigger value="local" className={mobileSheetWorkdirModePillTriggerClassName}>
+        <Tabs.List size="large" stretch>
+          <Tabs.Tab value="local">
             <FolderIcon className="h-3.5 w-3.5" aria-hidden="true" />
             <span>{t('chat.mobileNewChat.workdirLocalLabel', '本地文件')}</span>
-          </TabsTrigger>
-          <TabsTrigger
+          </Tabs.Tab>
+          <Tabs.Tab
             value="worktree"
             disabled={!worktreeAvailable}
             title={worktreeUnavailableReason}
-            className={cn(
-              mobileSheetWorkdirModePillTriggerClassName,
-              !worktreeAvailable && 'cursor-not-allowed opacity-50'
-            )}
           >
             <GitBranchIcon className="h-3.5 w-3.5" aria-hidden="true" />
             <span>{t('chat.mobileNewChat.workdirWorktreeLabel', '新工作树')}</span>
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
+          </Tabs.Tab>
+        </Tabs.List>
+      </Tabs.Root>
     ) : null;
 
   /* ── Composer footer: same MobileSessionRunConfig as the in-session
@@ -6118,19 +6111,15 @@ function WorkspaceChatLanding({
             primaryAction={
               <Button
                 type="button"
-                size="icon"
-                variant="ghost"
+                variant="primary"
+                size="medium"
+                shape="pill"
+                icon
                 onClick={() => {
                   void handleSubmit();
                 }}
                 disabled={submitDisabled}
                 aria-label={submitDisabled ? t('chat.submitting') : t('chat.send')}
-                /* Match the in-session mobile composer send face: solid
-                   foreground disc + ArrowUp (not the old primary-tint chip). */
-                className={cn(
-                  'h-8 w-8 rounded-full shadow-xs transition-all',
-                  'bg-foreground text-background hover:bg-foreground/90 hover:text-background active:translate-y-[1px]'
-                )}
               >
                 {submitting ? (
                   <Loader2 className="h-5 w-5 animate-spin" />
@@ -6589,10 +6578,11 @@ function WorkspaceChatLanding({
             <Button
               type="button"
               variant="ghost"
-              size="icon"
+              size="small"
+              icon
               onClick={() => showNavigationSidebar()}
               aria-label={t('chat.leftSidebar.show', 'Show navigation sidebar')}
-              className="h-7 w-7 shrink-0 text-muted-foreground"
+              className="shrink-0"
             >
               <PanelLeft className="h-4 w-4" />
             </Button>
diff --git a/packages/components/src/components/chat/machine-pairing-dialog.tsx b/packages/components/src/components/chat/machine-pairing-dialog.tsx
index a07585b36..3cc2b0308 100644
--- a/packages/components/src/components/chat/machine-pairing-dialog.tsx
+++ b/packages/components/src/components/chat/machine-pairing-dialog.tsx
@@ -15,7 +15,7 @@ import { toast } from 'sonner';
 import { useConvexErrorMessage } from '@/hooks/use-convex-error-message';
 
 import { writeTextToClipboard } from '@/lib/clipboard';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -164,7 +164,7 @@ export function MachinePairingDialog({
                 <p className="text-sm text-destructive">
                   {t('machinePairing.createFailed', 'Could not create a connection request.')}
                 </p>
-                <Button variant="outline" onClick={onRetry}>
+                <Button variant="secondary" onClick={onRetry}>
                   {t('common.retry', 'Retry')}
                 </Button>
               </div>
@@ -187,7 +187,7 @@ export function MachinePairingDialog({
                       </p>
                     </div>
                   </div>
-                  <Button className="mt-3 w-full gap-2" onClick={downloadDesktop}>
+                  <Button className="mt-3 w-full" onClick={downloadDesktop}>
                     <Download className="h-4 w-4" aria-hidden="true" />
                     {t('machinePairing.downloadDesktop', 'Download Lody Desktop')}
                   </Button>
@@ -223,8 +223,8 @@ export function MachinePairingDialog({
                         <Button
                           type="button"
                           variant="ghost"
-                          size="icon"
-                          className="absolute right-1.5 top-1.5 h-8 w-8"
+                          icon
+                          className="absolute right-1.5 top-1.5"
                           onClick={() => void copyCommand()}
                           aria-label={t('machinePairing.copyCommand', 'Copy command')}
                         >
@@ -269,7 +269,7 @@ export function MachinePairingDialog({
                     ? t('machinePairing.cancelled', 'This connection request was cancelled.')
                     : t('machinePairing.expired', 'This connection request has expired.')}
                 </p>
-                <Button variant="outline" onClick={onRetry}>
+                <Button variant="secondary" onClick={onRetry}>
                   {t('machinePairing.createNew', 'Create a new request')}
                 </Button>
               </div>
diff --git a/packages/components/src/components/chat/unified-project-selector.tsx b/packages/components/src/components/chat/unified-project-selector.tsx
index 9bb5ec0a3..baf1b596e 100644
--- a/packages/components/src/components/chat/unified-project-selector.tsx
+++ b/packages/components/src/components/chat/unified-project-selector.tsx
@@ -34,7 +34,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
-import { Input } from '@/ui/input';
+import { Input } from '@lody/ui/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 
 function GitHubOwnerAvatarIcon({ repoFullName }: { repoFullName: string }) {
@@ -105,11 +105,7 @@ export function compareUnifiedProjectOptions(
 
 function selectUnifiedProjectOptionsForRender<
   TOption extends Pick<UnifiedProjectOption, 'label' | 'description' | 'selection'>,
->(
-  options: readonly TOption[],
-  query: string,
-  limit?: number
-): TOption[] {
+>(options: readonly TOption[], query: string, limit?: number): TOption[] {
   if (limit !== undefined && limit <= 0) return [];
   const normalizedQuery = query.trim().toLocaleLowerCase();
   const visible: TOption[] = [];
@@ -231,11 +227,10 @@ export function buildUnifiedLocalProjectOptions({
   return visible;
 }
 
-export interface UnifiedProjectSelectorViewProps
-  extends Omit<
-    UnifiedProjectSelectorProps,
-    'selectedMachineId' | 'latestMessageAtByLocalProject' | 'projectSharing'
-  > {
+export interface UnifiedProjectSelectorViewProps extends Omit<
+  UnifiedProjectSelectorProps,
+  'selectedMachineId' | 'latestMessageAtByLocalProject' | 'projectSharing'
+> {
   localProjects: ReadonlyArray<UnifiedLocalProjectOption>;
   onShareLocalProjectWithTeam?: (selection: LocalProjectSelection) => Promise<void>;
   getShareErrorMessage?: (error: unknown, fallback: string) => string;
@@ -465,19 +460,16 @@ export function UnifiedProjectSelectorView({
     : undefined;
   const canShareSelectedProject = Boolean(
     selectedOption &&
-      selectedPrivateSharing?.canManage &&
-      selectedPrivateSharing.privateReason !== 'machine-not-registered' &&
-      onShareLocalProjectWithTeam
+    selectedPrivateSharing?.canManage &&
+    selectedPrivateSharing.privateReason !== 'machine-not-registered' &&
+    onShareLocalProjectWithTeam
   );
 
   const isPropertyRow = triggerVariant === 'property-row';
 
   return (
     <div
-      className={cn(
-        'group/project relative flex min-w-0 items-center',
-        isPropertyRow && 'w-full'
-      )}
+      className={cn('group/project relative flex min-w-0 items-center', isPropertyRow && 'w-full')}
     >
       {value.kind !== 'none' && !isPropertyRow ? (
         <button
diff --git a/packages/components/src/components/codex-reset/codex-reset-forecast-dialog.tsx b/packages/components/src/components/codex-reset/codex-reset-forecast-dialog.tsx
index 2bc1b30e5..d3b99f5e0 100644
--- a/packages/components/src/components/codex-reset/codex-reset-forecast-dialog.tsx
+++ b/packages/components/src/components/codex-reset/codex-reset-forecast-dialog.tsx
@@ -4,8 +4,8 @@ import { formatDistance, type Locale } from 'date-fns';
 import { enUS, zhCN } from 'date-fns/locale';
 import { ExternalLink, Loader2, TimerReset } from 'lucide-react';
 
-import { Badge } from '@/ui/badge';
-import { Button } from '@/ui/button';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/ui/dialog';
 import { openExternalUrl } from '@/lib/native-browser';
 import { cn } from '@/lib/utils';
@@ -139,7 +139,7 @@ function RetryButton({ onRetry }: { onRetry: () => void }) {
   const { t } = useTranslation();
 
   return (
-    <Button variant="outline" size="sm" className="h-7 shrink-0 px-2 text-xs" onClick={onRetry}>
+    <Button variant="secondary" size="small" className="shrink-0" onClick={onRetry}>
       {t('codexReset.retry', 'Try again')}
     </Button>
   );
@@ -183,10 +183,7 @@ function ActiveForecast({
             </p>
           )}
           {watch.level ? (
-            <Badge
-              variant={watch.level === 'strong' ? 'warning' : 'secondary'}
-              className="shrink-0 font-normal"
-            >
+            <Badge tone={watch.level === 'strong' ? 'warning' : 'neutral'}>
               {watch.level === 'strong'
                 ? t('codexReset.levelStrong', 'Strong signal')
                 : t('codexReset.levelElevated', 'Elevated signal')}
diff --git a/packages/components/src/components/commands/command-palette-view.tsx b/packages/components/src/components/commands/command-palette-view.tsx
index 281932d2c..fcdbaad2d 100644
--- a/packages/components/src/components/commands/command-palette-view.tsx
+++ b/packages/components/src/components/commands/command-palette-view.tsx
@@ -1,6 +1,6 @@
 import { Command as CommandIcon, MessagesSquare, SearchX } from 'lucide-react';
 import { CommandDialog, CommandInput, CommandItem, CommandList } from '@/ui/command';
-import { Kbd as KeyHint } from '@/ui/kbd';
+import { Kbd as KeyHint } from '@lody/ui/kbd';
 import { Kbd } from './kbd';
 
 export type PaletteResult = {
diff --git a/packages/components/src/components/commands/kbd.tsx b/packages/components/src/components/commands/kbd.tsx
index 43ccdf4ad..40d93b4c4 100644
--- a/packages/components/src/components/commands/kbd.tsx
+++ b/packages/components/src/components/commands/kbd.tsx
@@ -1,6 +1,5 @@
-import { cn } from '@/lib/utils';
+import { Kbd as KbdPrimitive, KbdGroup } from '@lody/ui/kbd';
 import { formatKeyParts } from '@/lib/commands';
-import { Kbd as KbdPrimitive, KbdGroup } from '@/ui/kbd';
 
 type KbdProps = {
   /** Binding string in registry syntax, e.g. `$mod+b`, `Shift+Enter`. */
@@ -9,15 +8,17 @@ type KbdProps = {
 };
 
 /**
- * Display a key binding as a row of individual key chips. Built on the shadcn-style
- * `Kbd` / `KbdGroup` primitives in `@/ui/kbd` so it shares the platform-wide visual
- * language for keys (palette, settings, future tooltips, etc.).
+ * Display a key binding as a row of individual key chips, built on `@lody/ui`'s
+ * `Kbd` / `KbdGroup`, so every surface that teaches a shortcut — the palette,
+ * settings, a tooltip — draws the same cap. The package owns what a cap is made
+ * of; this component owns only the split from a binding string into keys, which
+ * is a fact about Lody's registry syntax rather than about keyboards.
  */
 export function Kbd({ binding, className }: KbdProps) {
   const parts = formatKeyParts(binding);
   if (parts.length === 0) return null;
   return (
-    <KbdGroup className={cn(className)}>
+    <KbdGroup className={className}>
       {parts.map((label, i) => (
         <KbdPrimitive key={`${label}-${i}`}>{label}</KbdPrimitive>
       ))}
diff --git a/packages/components/src/components/error-boundary-fallback.tsx b/packages/components/src/components/error-boundary-fallback.tsx
index 6fa46a989..3cfc02042 100644
--- a/packages/components/src/components/error-boundary-fallback.tsx
+++ b/packages/components/src/components/error-boundary-fallback.tsx
@@ -10,7 +10,7 @@ import {
   Trash2,
 } from 'lucide-react';
 
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -207,14 +207,14 @@ export function ErrorBoundaryFallback({
         ) : null}
 
         <div className="flex flex-wrap items-center gap-2">
-          <Button type="button" size="sm" onClick={resetErrorBoundary}>
+          <Button type="button" size="small" onClick={resetErrorBoundary}>
             <RotateCcw className="size-3.5" aria-hidden="true" />
             {t('errorBoundary.tryAgain', 'Try again')}
           </Button>
           <Button
             type="button"
-            size="sm"
-            variant="outline"
+            variant="secondary"
+            size="small"
             onClick={() => {
               reloadApp();
             }}
@@ -222,7 +222,7 @@ export function ErrorBoundaryFallback({
             <RefreshCw className="size-3.5" aria-hidden="true" />
             {t('errorBoundary.reload', 'Reload Lody')}
           </Button>
-          <Button type="button" size="sm" variant="outline" onClick={handleCopy}>
+          <Button type="button" variant="secondary" size="small" onClick={handleCopy}>
             {copied ? (
               <Check className="size-3.5 text-emerald-500" aria-hidden="true" />
             ) : (
@@ -301,9 +301,9 @@ export function ErrorBoundaryFallback({
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-border/60 pt-3">
           <Button
             type="button"
-            size="sm"
             variant="ghost"
-            className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+            size="small"
+            tone="destructive"
             onClick={() => setHardResetOpen(true)}
           >
             <Trash2 className="size-3.5" aria-hidden="true" />
@@ -368,7 +368,7 @@ export function HardResetConfirmDialog({
               onConfirm();
             }}
             disabled={isResetting}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            variant="destructive"
           >
             <Trash2 className="mr-1.5 size-3.5" aria-hidden="true" />
             {isResetting
diff --git a/packages/components/src/components/local-projects/add-local-project-dialog.tsx b/packages/components/src/components/local-projects/add-local-project-dialog.tsx
index 0bb379f5c..71272e468 100644
--- a/packages/components/src/components/local-projects/add-local-project-dialog.tsx
+++ b/packages/components/src/components/local-projects/add-local-project-dialog.tsx
@@ -24,9 +24,9 @@ import type {
   LocalProjectBrowseRootsResult,
 } from '@lody/shared';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Skeleton } from '@/ui/skeleton';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Skeleton } from '@lody/ui/skeleton';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ui/dialog';
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
 import {
@@ -329,8 +329,9 @@ function BrowseStep({
             <Button
               type="button"
               variant="ghost"
-              size="icon"
-              className="h-7 w-7 shrink-0"
+              size="small"
+              icon
+              className="shrink-0"
               title={t('localProjects.add.go', 'Go')}
               onClick={onPathSubmit}
             >
@@ -380,8 +381,9 @@ function BrowseStep({
             <Button
               type="button"
               variant="ghost"
-              size="icon"
-              className="h-7 w-7 shrink-0"
+              size="small"
+              icon
+              className="shrink-0"
               title={t('localProjects.add.editPath', 'Edit path')}
               onClick={onStartEditPath}
               disabled={!current}
@@ -399,9 +401,8 @@ function BrowseStep({
             <Button
               key={drive}
               type="button"
-              variant="outline"
-              size="sm"
-              className="h-6 gap-1 px-2 text-xs"
+              variant="secondary"
+              size="small"
               onClick={() => onNavigate(drive)}
             >
               <HardDrive className="h-3 w-3" />
@@ -422,13 +423,7 @@ function BrowseStep({
             title={errorView.title}
             description={errorView.description}
             action={
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={onRetry}
-                className="gap-1.5"
-              >
+              <Button type="button" variant="secondary" size="small" onClick={onRetry}>
                 <RefreshCw className="h-3.5 w-3.5" />
                 {t('common.retry', 'Retry')}
               </Button>
@@ -472,8 +467,8 @@ function BrowseStep({
                 <Button
                   type="button"
                   variant="ghost"
-                  size="sm"
-                  className="w-full text-muted-foreground"
+                  size="small"
+                  className="w-full"
                   disabled={loadingMore}
                   onClick={onLoadMore}
                 >
@@ -519,13 +514,12 @@ function BrowseStep({
             )}
           </div>
           <div className="flex shrink-0 items-center gap-2">
-            <Button type="button" variant="ghost" size="sm" onClick={onCancel} disabled={adding}>
+            <Button type="button" variant="ghost" size="small" onClick={onCancel} disabled={adding}>
               {t('common.cancel', 'Cancel')}
             </Button>
             <Button
               type="button"
-              size="sm"
-              className="gap-1.5"
+              size="small"
               disabled={!current || status !== 'ready' || adding}
               onClick={onAddCurrentFolder}
             >
@@ -590,8 +584,8 @@ function DirectorySkeleton() {
     <div className="space-y-1 p-2">
       {Array.from({ length: 7 }).map((_, index) => (
         <div key={index} className="flex items-center gap-3 px-2 py-2">
-          <Skeleton className="h-5 w-5 rounded" />
-          <Skeleton className="h-4 flex-1 rounded" style={{ maxWidth: `${60 - index * 4}%` }} />
+          <Skeleton width={20} height={20} />
+          <Skeleton height={16} className="flex-1" style={{ maxWidth: `${60 - index * 4}%` }} />
         </div>
       ))}
     </div>
diff --git a/packages/components/src/components/local-projects/mobile-add-local-project-flow.tsx b/packages/components/src/components/local-projects/mobile-add-local-project-flow.tsx
index 81271cd3a..f1e370e9d 100644
--- a/packages/components/src/components/local-projects/mobile-add-local-project-flow.tsx
+++ b/packages/components/src/components/local-projects/mobile-add-local-project-flow.tsx
@@ -19,9 +19,9 @@ import {
 } from 'lucide-react';
 import type { LocalProjectBrowseDirectoryEntry } from '@lody/shared';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Skeleton } from '@/ui/skeleton';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Skeleton } from '@lody/ui/skeleton';
 import {
   describeBrowseError,
   getTailPriorityBreadcrumbs,
@@ -245,7 +245,7 @@ function MobileBrowse({ controller: c }: { controller: RemoteDirectoryPickerCont
           <>
             <div className="flex min-h-10 min-w-0 flex-1 items-center gap-0.5 overflow-hidden whitespace-nowrap text-[0.9rem] text-muted-foreground">
               {crumbs.length === 0 ? (
-                <Skeleton className="mx-1.5 h-4 w-32 shrink-0 rounded" />
+                <Skeleton width={128} height={16} className="mx-1.5 shrink-0" />
               ) : (
                 <>
                   {breadcrumbTrail.hiddenPrefix ? (
@@ -327,7 +327,7 @@ function MobileBrowse({ controller: c }: { controller: RemoteDirectoryPickerCont
             title={errorView.title}
             description={errorView.description}
             action={
-              <Button type="button" variant="outline" onClick={c.retry} className="h-10 gap-1.5">
+              <Button type="button" variant="secondary" size="large" onClick={c.retry}>
                 <RefreshCw className="h-4 w-4" />
                 {t('common.retry', 'Retry')}
               </Button>
@@ -386,7 +386,8 @@ function MobileBrowse({ controller: c }: { controller: RemoteDirectoryPickerCont
         ) : null}
         <Button
           type="button"
-          className="h-12 w-full gap-2 text-[1rem]"
+          size="large"
+          className="w-full"
           disabled={!c.current || c.status !== 'ready' || c.editingPath || c.adding}
           onClick={() => void c.addCurrentFolder()}
         >
@@ -448,8 +449,8 @@ function MobileDirectorySkeleton() {
     <div className="py-1">
       {Array.from({ length: 8 }).map((_, index) => (
         <div key={index} className="flex items-center gap-3 px-4 py-3.5">
-          <Skeleton className="h-7 w-7 shrink-0 rounded" />
-          <Skeleton className="h-4 flex-1 rounded" style={{ maxWidth: `${64 - index * 5}%` }} />
+          <Skeleton width={28} height={28} className="shrink-0" />
+          <Skeleton height={16} className="flex-1" style={{ maxWidth: `${64 - index * 5}%` }} />
         </div>
       ))}
     </div>
diff --git a/packages/components/src/components/login-page.tsx b/packages/components/src/components/login-page.tsx
index 284115a32..89fb34ba5 100644
--- a/packages/components/src/components/login-page.tsx
+++ b/packages/components/src/components/login-page.tsx
@@ -6,9 +6,9 @@ import { usePostHog } from '@posthog/react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import isEmail from 'validator/lib/isEmail';
 import { electronDeepLinkSignInInProgressAtom, nativeSignInInProgressAtom } from '@/atoms';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import { PasswordInput } from '@/ui/password-input';
 import { isDevEmailPasswordLoginEnabled } from '@lody/shared/electron-ipc';
 import { setLoginHintCookie } from '@/lib/login-hint-cookie';
@@ -482,35 +482,35 @@ const PROVIDER_CONFIG: {
   icon: React.ComponentType;
   labelKey: string;
   labelDefault: string;
-  variant: 'default' | 'outline';
+  variant: 'primary' | 'secondary';
 }[] = [
   {
     id: 'github',
     icon: GitHubIcon,
     labelKey: 'login.githubSignIn',
     labelDefault: 'Continue with GitHub',
-    variant: 'default',
+    variant: 'primary',
   },
   {
     id: 'google',
     icon: GoogleIcon,
     labelKey: 'login.googleSignIn',
     labelDefault: 'Continue with Google',
-    variant: 'outline',
+    variant: 'secondary',
   },
   {
     id: 'apple',
     icon: AppleIcon,
     labelKey: 'login.appleSignIn',
     labelDefault: 'Continue with Apple',
-    variant: 'outline',
+    variant: 'secondary',
   },
   {
     id: 'discord',
     icon: DiscordIcon,
     labelKey: 'login.discordSignIn',
     labelDefault: 'Continue with Discord',
-    variant: 'outline',
+    variant: 'secondary',
   },
 ];
 
@@ -1291,10 +1291,11 @@ export function LoginPage({
         return (
           <Button
             key={provider.id}
+            size="large"
             onClick={() => {
               void handleSocialLogin(provider.id);
             }}
-            className="h-10 w-full"
+            className="w-full"
             disabled={isButtonsDisabled}
             variant={provider.variant}
           >
@@ -1317,15 +1318,16 @@ export function LoginPage({
 
           <Button
             type="button"
-            variant="outline"
+            variant="secondary"
+            size="large"
             onClick={handleEnterEmailView}
-            className="h-10 w-full"
+            className="w-full"
             disabled={isButtonsDisabled}
           >
             <SocialLoginButtonContent
               icon={
                 <ProviderIcon>
-                  <Mail strokeWidth={1.75} />
+                  <Mail strokeWidth={1.75} className="size-4" />
                 </ProviderIcon>
               }
               label={emailEntryLabel}
@@ -1433,9 +1435,9 @@ export function LoginPage({
                 className="overflow-hidden"
               >
                 <div className="grid gap-1.5 pb-3">
-                  <Label htmlFor="email-auth-name" className="text-xs font-medium">
+                  <UiField.Label htmlFor="email-auth-name" className="text-xs font-medium">
                     {t('login.nameLabel', 'Name')}
-                  </Label>
+                  </UiField.Label>
                   <Input
                     id="email-auth-name"
                     autoComplete="name"
@@ -1455,9 +1457,9 @@ export function LoginPage({
           </AnimatePresence>
 
           <div className="grid gap-1.5">
-            <Label htmlFor="email-auth-email" className="text-xs font-medium">
+            <UiField.Label htmlFor="email-auth-email" className="text-xs font-medium">
               {t('login.emailLabel', 'Email address')}
-            </Label>
+            </UiField.Label>
             <Input
               ref={emailInputRef}
               id="email-auth-email"
@@ -1478,9 +1480,9 @@ export function LoginPage({
 
           <div className="grid gap-1.5">
             <div className="flex items-center justify-between">
-              <Label htmlFor="email-auth-password" className="text-xs font-medium">
+              <UiField.Label htmlFor="email-auth-password" className="text-xs font-medium">
                 {t('login.passwordLabel', 'Password')}
-              </Label>
+              </UiField.Label>
             </div>
             <PasswordInput
               id="email-auth-password"
@@ -1515,7 +1517,7 @@ export function LoginPage({
             ) : null}
           </div>
 
-          <Button type="submit" className="mt-1 h-10 w-full" disabled={isButtonsDisabled}>
+          <Button type="submit" size="large" className="mt-1 w-full" disabled={isButtonsDisabled}>
             {isEmailSubmitting ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -1603,8 +1605,9 @@ export function LoginPage({
       className="flex flex-col gap-3"
     >
       <Button
+        size="large"
         onClick={() => void handleElectronBrowserLogin()}
-        className="h-10 w-full"
+        className="w-full"
         disabled={isButtonsDisabled}
       >
         <SocialLoginButtonContent
@@ -1626,15 +1629,16 @@ export function LoginPage({
       {isDevElectronEmailPasswordLoginEnabled ? (
         <Button
           type="button"
-          variant="outline"
+          variant="secondary"
+          size="large"
           onClick={handleEnterEmailView}
-          className="h-10 w-full"
+          className="w-full"
           disabled={isButtonsDisabled}
         >
           <SocialLoginButtonContent
             icon={
               <ProviderIcon>
-                <Mail strokeWidth={1.75} />
+                <Mail strokeWidth={1.75} className="size-4" />
               </ProviderIcon>
             }
             label={emailEntryLabel}
diff --git a/packages/components/src/components/loro-app-sidebar.tsx b/packages/components/src/components/loro-app-sidebar.tsx
index ee63a9b00..dae27d2d3 100644
--- a/packages/components/src/components/loro-app-sidebar.tsx
+++ b/packages/components/src/components/loro-app-sidebar.tsx
@@ -105,8 +105,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/ui/dialog';
-import { Button } from '@/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Button } from '@lody/ui/button';
+import { Checkbox } from '@lody/ui/checkbox';
 import {
   ContextMenu,
   ContextMenuContent,
@@ -354,7 +354,7 @@ export function RemoveLocalProjectDialog({
                 className="mt-0.5"
                 checked={cleanupWorktrees}
                 disabled={!canCleanupWorktrees || isRemoving}
-                onCheckedChange={(checked) => void setCleanup(checked === true)}
+                onCheckedChange={(checked) => void setCleanup(checked)}
               />
               <span>
                 <span className="block font-medium text-foreground">
@@ -423,7 +423,7 @@ export function RemoveLocalProjectDialog({
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isRemoving}>
+          <Button variant="secondary" onClick={() => onOpenChange(false)} disabled={isRemoving}>
             {t('common.cancel', 'Cancel')}
           </Button>
           <Button
diff --git a/packages/components/src/components/loro-sidebar.tsx b/packages/components/src/components/loro-sidebar.tsx
index b0202473c..768fac883 100644
--- a/packages/components/src/components/loro-sidebar.tsx
+++ b/packages/components/src/components/loro-sidebar.tsx
@@ -14,10 +14,10 @@ import {
 import { cn } from '@/lib/utils';
 import { WINDOW_DRAG_EXEMPT_CLASS, WINDOW_DRAG_HEADER_CLASS } from '@/ui/window-drag-region';
 import { useElectronFullscreen } from '@/lib/electron';
-import { Badge } from '@/ui/badge';
-import { Button } from '@/ui/button';
-import { Kbd } from '@/ui/kbd';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ui/tooltip';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
+import { Kbd } from '@lody/ui/kbd';
+import { Tooltip as UiTooltip } from '@lody/ui/tooltip';
 import { commands, formatKeyBinding, type ShortcutCommandId } from '@/lib/commands';
 import {
   DropdownMenu,
@@ -484,7 +484,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconB
       ref={ref}
       type="button"
       variant="ghost"
-      size="icon"
+      icon
       className={cn(getLoroSidebarFooterIconButtonClassName(isMobile, active), className)}
       {...buttonProps}
     >
@@ -518,29 +518,35 @@ function useCommandShortcutLabel(id: ShortcutCommandId): string | null {
  */
 function SidebarNewTaskButton({ label, onClick }: { label: string; onClick: () => void }) {
   const shortcut = useCommandShortcutLabel('tasks.quickAdd');
+  // `@lody/ui`'s tooltip rather than the Radix one, because the cap inside it
+  // is the reason this tooltip exists: the chip inverts, and only that Content
+  // tells a `Kbd` what surface it is standing on. The trigger keeps its own
+  // aria-label — a Base UI tooltip is visual-only and names nothing.
   return (
-    <TooltipProvider delayDuration={400}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            type="button"
-            aria-label={label}
-            onClick={onClick}
-            className={cn(
-              'flex h-6 w-6 items-center justify-center rounded-md text-sidebar-foreground-muted',
-              'transition-colors hover:bg-sidebar-hover hover:text-sidebar-hover-foreground',
-              'outline-hidden focus-visible:ring-1 focus-visible:ring-sidebar-ring/40'
-            )}
-          >
-            <Plus className="h-3.5 w-3.5" />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent side="right" className="flex items-center gap-1.5">
+    <UiTooltip.Provider delay={400}>
+      <UiTooltip.Root>
+        <UiTooltip.Trigger
+          render={
+            <button
+              type="button"
+              aria-label={label}
+              onClick={onClick}
+              className={cn(
+                'flex h-6 w-6 items-center justify-center rounded-md text-sidebar-foreground-muted',
+                'transition-colors hover:bg-sidebar-hover hover:text-sidebar-hover-foreground',
+                'outline-hidden focus-visible:ring-1 focus-visible:ring-sidebar-ring/40'
+              )}
+            />
+          }
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </UiTooltip.Trigger>
+        <UiTooltip.Content side="right" className="flex items-center gap-1.5">
           <span>{label}</span>
           {shortcut ? <Kbd>{shortcut}</Kbd> : null}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+        </UiTooltip.Content>
+      </UiTooltip.Root>
+    </UiTooltip.Provider>
   );
 }
 
@@ -814,8 +820,7 @@ export const LoroSidebar = memo(function LoroSidebar({
           name: workspaceName,
           logo: workspaces.find((ws) => ws.id === currentWorkspaceId)?.logo,
         }}
-        className="h-5 w-5 text-[10px]"
-        fallbackClassName="bg-sidebar-hover/60 text-sidebar-foreground"
+        size="small"
       />
       <span className="min-w-0 flex flex-1 items-center gap-2">
         <span className="min-w-0 flex-1 truncate font-medium">{workspaceName}</span>
@@ -926,14 +931,12 @@ export const LoroSidebar = memo(function LoroSidebar({
                         <DropdownMenuRadioItem key={ws.id} value={ws.id} className="gap-2">
                           <WorkspaceAvatar
                             workspace={{ name: ws.name, logo: ws.logo }}
-                            className="h-5 w-5 shrink-0 text-[10px]"
+                            size="small"
+                            className="shrink-0"
                           />
                           <span className="min-w-0 truncate">{ws.name}</span>
                           {ws.planTier ? (
-                            <Badge
-                              variant="secondary"
-                              className="ml-auto shrink-0 px-1.5 py-0 text-[10px]"
-                            >
+                            <Badge className="ml-auto">
                               {ws.planTier === 'enterprise'
                                 ? mergedLabels.planEnterprise
                                 : mergedLabels.planPlus}
diff --git a/packages/components/src/components/mentions/combined-mention-textarea.tsx b/packages/components/src/components/mentions/combined-mention-textarea.tsx
index fa42aa235..411e4822e 100644
--- a/packages/components/src/components/mentions/combined-mention-textarea.tsx
+++ b/packages/components/src/components/mentions/combined-mention-textarea.tsx
@@ -60,7 +60,7 @@ import {
 import { getAgentRoleEmoji, type AcpCommandSummary } from '@lody/shared';
 import { Mention, MentionInput, MentionLabel, useMentionContext } from '@/ui/mention';
 import type { Mention as MentionRange, MentionChipResolver } from '@/ui/mention/index';
-import { Textarea, type TextareaProps } from '@/ui/textarea';
+import { Textarea, type TextareaProps } from '@lody/ui/textarea';
 import { parseMentionNamespaceSearch } from '@/ui/mention/mention-trigger';
 import { getCommandKeybindings, useCommand } from '@/lib/commands';
 
diff --git a/packages/components/src/components/mentions/file-at-mention.tsx b/packages/components/src/components/mentions/file-at-mention.tsx
index 37d56c29f..bccca2b7b 100644
--- a/packages/components/src/components/mentions/file-at-mention.tsx
+++ b/packages/components/src/components/mentions/file-at-mention.tsx
@@ -23,7 +23,7 @@ import {
   MentionLabel,
   useMentionContext,
 } from '@/ui/mention';
-import type { TextareaProps } from '@/ui/textarea';
+import type { TextareaProps } from '@lody/ui/textarea';
 
 export type RepoFilePathsResult = {
   repoFullName: string;
diff --git a/packages/components/src/components/mobile/mobile-about-settings.tsx b/packages/components/src/components/mobile/mobile-about-settings.tsx
index 30b747900..bed5dd188 100644
--- a/packages/components/src/components/mobile/mobile-about-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-about-settings.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { Loader2, CheckCircle2, AlertCircle, Download, ExternalLink } from 'lucide-react';
 import type { ElectronUpdaterPhase } from '@lody/shared';
 import { useAtom } from 'jotai';
-import { Button } from '@/ui/button';
-import { Switch } from '@/ui/switch';
+import { Button } from '@lody/ui/button';
+import { Switch } from '@lody/ui/switch';
 import {
   developerModeEnabledAtom,
   inboxBetaEnabledAtom,
@@ -230,8 +230,7 @@ export function MobileAboutSettings() {
           >
             {isDownloaded ? (
               <Button
-                size="sm"
-                className="h-8 px-3"
+                size="small"
                 onClick={() => {
                   void handleQuitAndInstall();
                 }}
@@ -246,9 +245,8 @@ export function MobileAboutSettings() {
               </Button>
             ) : (
               <Button
-                variant="outline"
-                size="sm"
-                className="h-8 px-3"
+                variant="secondary"
+                size="small"
                 onClick={() => {
                   void handleCheckForUpdates();
                 }}
diff --git a/packages/components/src/components/mobile/mobile-account-settings.tsx b/packages/components/src/components/mobile/mobile-account-settings.tsx
index 74f0498d0..a1f530b57 100644
--- a/packages/components/src/components/mobile/mobile-account-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-account-settings.tsx
@@ -16,10 +16,10 @@ import {
   Pencil,
   X,
 } from 'lucide-react';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
-import { Badge } from '@/ui/badge';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
+import { Badge } from '@lody/ui/badge';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -452,8 +452,8 @@ export function MobileAccountSettings({
           ) : null}
           <MobileSettingsRow label={t('settings.account.signOut')} hasDivider>
             <Button
-              variant="outline"
-              size="sm"
+              variant="secondary"
+              size="small"
               onClick={() => {
                 void onSignOut();
               }}
@@ -529,12 +529,7 @@ export function MobileAccountSettings({
           title={t('workspace.members.title')}
           actions={
             hasAdminPermission ? (
-              <Button
-                size="sm"
-                variant="outline"
-                className="h-8 px-2.5"
-                onClick={() => setInviteDialogOpen(true)}
-              >
+              <Button variant="secondary" size="small" onClick={() => setInviteDialogOpen(true)}>
                 <UserPlus className="mr-1.5 h-3.5 w-3.5" />
                 {t('workspace.members.invite')}
               </Button>
@@ -553,7 +548,7 @@ export function MobileAccountSettings({
                   index > 0 && 'border-t border-border'
                 )}
               >
-                <UserAvatar user={member.user} className="h-9 w-9 shrink-0 text-[12px]" />
+                <UserAvatar user={member.user} size="large" className="shrink-0" />
                 <div className="min-w-0 flex-1">
                   <p className="truncate text-[0.95rem] font-medium leading-tight">
                     {member.user?.name || '—'}
@@ -615,9 +610,10 @@ export function MobileAccountSettings({
                   {isEditable && (
                     <Button
                       variant="ghost"
-                      size="icon"
                       aria-label={t('workspace.removeMember.title')}
-                      className="h-9 w-9 text-muted-foreground hover:text-destructive"
+                      size="large"
+                      icon
+                      tone="destructive"
                       onClick={() => {
                         setUserToDelete(member.id);
                         setDeleteUserDialogOpen(true);
@@ -664,9 +660,9 @@ export function MobileAccountSettings({
                 <div className="flex shrink-0 items-center gap-1">
                   <Button
                     variant="ghost"
-                    size="icon"
                     aria-label={t('workspace.invitations.copyLink')}
-                    className="h-9 w-9 text-muted-foreground hover:text-foreground"
+                    size="large"
+                    icon
                     onClick={() => {
                       void onCopyInviteLink(getInviteLink(invitation));
                     }}
@@ -676,9 +672,10 @@ export function MobileAccountSettings({
                   {hasAdminPermission && (
                     <Button
                       variant="ghost"
-                      size="icon"
                       aria-label={t('common.cancel')}
-                      className="h-9 w-9 text-muted-foreground hover:text-destructive"
+                      size="large"
+                      icon
+                      tone="destructive"
                       disabled={cancellingInvitationIds.has(invitation.id)}
                       onClick={() => {
                         void (async () => {
@@ -730,8 +727,7 @@ export function MobileAccountSettings({
           description={t('settings.account.cliAuth.description')}
           actions={
             <Button
-              size="sm"
-              className="h-8 px-2.5"
+              size="small"
               onClick={() => {
                 setCliApiKeyDialogOpen(true);
               }}
@@ -776,7 +772,7 @@ export function MobileAccountSettings({
                         {apiKey.note || t('settings.account.cliAuth.recordNoteFallback')}
                       </p>
                       {sourceLabel && (
-                        <Badge variant="outline" className="h-5 rounded-md px-1.5 text-[10px]">
+                        <Badge>
                           {sourceLabel}
                         </Badge>
                       )}
@@ -804,9 +800,9 @@ export function MobileAccountSettings({
                   </div>
                   <div>
                     <Button
-                      variant="outline"
-                      size="sm"
-                      className="border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                      variant="secondary"
+                      size="small"
+                      tone="destructive"
                       onClick={() => setCliApiKeyToRevoke(apiKey)}
                       disabled={revokingCliApiKeyId === apiKey.id}
                     >
@@ -835,9 +831,9 @@ export function MobileAccountSettings({
               stack
             >
               <Button
-                variant="outline"
-                size="sm"
-                className="border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                variant="secondary"
+                size="small"
+                tone="destructive"
                 onClick={() => setLeaveDialogOpen(true)}
               >
                 {t('workspace.danger.leaveWorkspace.button')}
@@ -851,9 +847,9 @@ export function MobileAccountSettings({
               stack
             >
               <Button
-                variant="outline"
-                size="sm"
-                className="border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                variant="secondary"
+                size="small"
+                tone="destructive"
                 onClick={() => {
                   // A live subscription blocks deletion; explain instead of
                   // letting the backend reject the delete.
@@ -879,9 +875,9 @@ export function MobileAccountSettings({
             stack
           >
             <Button
-              variant="outline"
-              size="sm"
-              className="border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
+              variant="secondary"
+              size="small"
+              tone="destructive"
               onClick={() => setDeleteAccountDialogOpen(true)}
             >
               <Trash2 className="mr-1.5 h-3.5 w-3.5" />
@@ -910,8 +906,8 @@ export function MobileAccountSettings({
               <div className="space-y-3 py-4 text-sm">
                 <p className="text-muted-foreground">{t('settings.account.cliAuth.usageHint')}</p>
                 <Button
-                  variant="outline"
-                  size="sm"
+                  variant="secondary"
+                  size="small"
                   onClick={() => {
                     void onCopyGeneratedCliApiKey?.();
                   }}
@@ -923,7 +919,9 @@ export function MobileAccountSettings({
               </div>
             ) : (
               <div className="space-y-2 py-4">
-                <Label htmlFor="cli-api-key-note">{t('settings.account.cliAuth.noteLabel')}</Label>
+                <UiField.Label htmlFor="cli-api-key-note">
+                  {t('settings.account.cliAuth.noteLabel')}
+                </UiField.Label>
                 <Input
                   id="cli-api-key-note"
                   value={cliApiKeyNote}
@@ -938,8 +936,8 @@ export function MobileAccountSettings({
             )}
             <DialogFooter>
               <Button
-                variant="outline"
-                size="sm"
+                variant="secondary"
+                size="small"
                 onClick={() => handleCliApiKeyDialogOpenChange(false)}
                 disabled={isCreatingCliApiKey}
               >
@@ -947,7 +945,7 @@ export function MobileAccountSettings({
               </Button>
               {!hasGeneratedCliApiKey && (
                 <Button
-                  size="sm"
+                  size="small"
                   onClick={() => {
                     void handleCreateCliApiKey();
                   }}
@@ -991,7 +989,7 @@ export function MobileAccountSettings({
                   })();
                 }}
                 disabled={!cliApiKeyToRevoke || Boolean(revokingCliApiKeyId)}
-                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                variant="destructive"
               >
                 {revokingCliApiKeyId ? (
                   <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
@@ -1036,7 +1034,7 @@ export function MobileAccountSettings({
               onClick={() => {
                 void handleRemoveMember();
               }}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              variant="destructive"
             >
               {t('common.remove')}
             </AlertDialogAction>
@@ -1070,7 +1068,7 @@ export function MobileAccountSettings({
                 })();
               }}
               disabled={isLeaving}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              variant="destructive"
             >
               {isLeaving ? (
                 <>
@@ -1137,11 +1135,11 @@ export function MobileAccountSettings({
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="mobileDeleteAccountConfirmText">
+              <UiField.Label htmlFor="mobileDeleteAccountConfirmText">
                 {t('settings.account.accountDeletion.typeToConfirm', {
                   email: currentUser?.email ?? '',
                 })}
-              </Label>
+              </UiField.Label>
               <Input
                 id="mobileDeleteAccountConfirmText"
                 value={deleteAccountConfirmText}
@@ -1157,7 +1155,7 @@ export function MobileAccountSettings({
           </div>
           <DialogFooter>
             <Button
-              variant="outline"
+              variant="secondary"
               onClick={() => {
                 setDeleteAccountDialogOpen(false);
                 setDeleteAccountConfirmText('');
diff --git a/packages/components/src/components/mobile/mobile-acp-history-sheet.tsx b/packages/components/src/components/mobile/mobile-acp-history-sheet.tsx
index 9a15cb703..7f2005165 100644
--- a/packages/components/src/components/mobile/mobile-acp-history-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-acp-history-sheet.tsx
@@ -7,7 +7,7 @@ import { AlertCircle, Check, Download, Loader2, RefreshCw, X } from 'lucide-reac
 import type { LocalProjectHistoryCatalogItem, LocalProjectHistoryProvider } from '@lody/shared';
 
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -390,9 +390,9 @@ export function MobileAcpHistorySheet({
                             <div className="px-4 pb-3 pl-12">
                               <Button
                                 type="button"
-                                variant="outline"
-                                size="sm"
-                                className="h-8 rounded-full px-3 text-[0.75rem]"
+                                variant="secondary"
+                                size="small"
+                                shape="pill"
                                 disabled={!canResolveConflict}
                                 onClick={() => {
                                   if (!canResolveConflict) return;
@@ -431,8 +431,8 @@ export function MobileAcpHistorySheet({
               >
                 <Button
                   type="button"
-                  className="w-full gap-2"
-                  size="lg"
+                  size="large"
+                  className="w-full"
                   disabled={!importEnabled}
                   onClick={() => {
                     void onImportHistory(row, state.provider);
@@ -477,8 +477,7 @@ export function MobileAcpHistorySheet({
           <AlertDialogFooter>
             <AlertDialogCancel>{t('common.cancel', 'Cancel')}</AlertDialogCancel>
             <AlertDialogAction
-              onClick={confirmConflictReplace}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={confirmConflictReplace} variant="destructive"
             >
               {t('workspace.projects.resolveHistoryConflict', 'Re-import')}
             </AlertDialogAction>
diff --git a/packages/components/src/components/mobile/mobile-appearance-settings.tsx b/packages/components/src/components/mobile/mobile-appearance-settings.tsx
index db6bbfcde..fa8253083 100644
--- a/packages/components/src/components/mobile/mobile-appearance-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-appearance-settings.tsx
@@ -20,7 +20,7 @@ import {
 } from '@/components/mobile/mobile-inline-picker';
 import { MobileSettingsPickerTrigger } from '@/components/mobile/mobile-settings-picker-trigger';
 import { MobileSettingsRow, MobileSettingsSection } from '@/components/mobile/mobile-settings-row';
-import { Input } from '@/ui/input';
+import { Input } from '@lody/ui/input';
 import { currentSupportedLanguages, languageCodeToName } from '../../i18n';
 import { cn } from '@/lib/utils';
 import { withOneSignal } from '@/lib/onesignal';
diff --git a/packages/components/src/components/mobile/mobile-archive-screen.tsx b/packages/components/src/components/mobile/mobile-archive-screen.tsx
index 3e1a0a280..ff86aab3f 100644
--- a/packages/components/src/components/mobile/mobile-archive-screen.tsx
+++ b/packages/components/src/components/mobile/mobile-archive-screen.tsx
@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react';
 import { Archive, PanelLeft, Trash2, Undo2, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { TooltipProvider } from '@/ui/tooltip';
 
 export type MobileArchiveScreenProps = {
@@ -45,12 +44,7 @@ export function MobileArchiveScreen({
         <header className="flex h-[calc(56px+var(--safe-area-top))] w-full shrink-0 items-center gap-3 border-b border-border bg-background pl-[calc(16px+var(--safe-area-left))] pr-[calc(16px+var(--safe-area-right))] pt-[var(--safe-area-top)]">
           {isMultiSelectMode ? (
             <>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-11 w-11 text-muted-foreground hover:text-foreground"
-                onClick={onExitMultiSelect}
-              >
+              <Button variant="ghost" size="large" icon onClick={onExitMultiSelect}>
                 <X className="h-4 w-4" />
                 <span className="sr-only">{t('archive.multiSelect.exit', 'Exit selection')}</span>
               </Button>
@@ -61,22 +55,20 @@ export function MobileArchiveScreen({
               </span>
               <div className="flex-1" />
               <Button
-                variant="outline"
-                size="sm"
+                variant="secondary"
+                size="small"
                 disabled={selectedCount === 0 || isBulkActionBusy || bulkRestoreDisabled}
                 title={bulkRestoreDisabled ? bulkRestoreDisabledReason : undefined}
                 onClick={onBulkRestore}
-                className="gap-1.5"
               >
                 <Undo2 className="h-3.5 w-3.5" />
                 {t('archive.multiSelect.restore', 'Restore')}
               </Button>
               <Button
                 variant="destructive"
-                size="sm"
+                size="small"
                 disabled={selectedCount === 0 || isBulkActionBusy}
                 onClick={onRequestBulkDelete}
-                className="gap-1.5"
               >
                 <Trash2 className="h-3.5 w-3.5" />
                 {t('archive.multiSelect.delete', 'Delete')}
@@ -84,15 +76,7 @@ export function MobileArchiveScreen({
             </>
           ) : (
             <>
-              <Button
-                variant="ghost"
-                size="icon"
-                className={cn(
-                  'h-11 w-11 rounded-xl',
-                  'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
-                )}
-                onClick={onOpenMobileDrawer}
-              >
+              <Button variant="ghost" size="large" icon onClick={onOpenMobileDrawer}>
                 <PanelLeft className="h-4 w-4" />
                 <span className="sr-only">Open sidebar</span>
               </Button>
diff --git a/packages/components/src/components/mobile/mobile-chat-landing-screen.tsx b/packages/components/src/components/mobile/mobile-chat-landing-screen.tsx
index eccf8afc4..5140d72d6 100644
--- a/packages/components/src/components/mobile/mobile-chat-landing-screen.tsx
+++ b/packages/components/src/components/mobile/mobile-chat-landing-screen.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { PanelLeft } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 
 export type MobileChatLandingScreenProps = {
@@ -31,14 +31,12 @@ export function MobileChatLandingScreen({
         <div className="relative flex items-center pb-2 pl-[calc(16px+var(--safe-area-left))] pr-[calc(16px+var(--safe-area-right))] pt-[calc(16px+var(--safe-area-top))]">
           <Button
             variant="ghost"
-            size="icon"
-            className={cn(
-              'h-11 w-11 rounded-xl md:hidden',
-              'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
-            )}
+            size="large"
+            icon
+            className={cn('md:hidden')}
             onClick={onOpenMobileDrawer}
           >
-            <PanelLeft />
+            <PanelLeft className="size-4" />
             <span className="sr-only">Open sidebar</span>
           </Button>
           <span className="sr-only">{title}</span>
diff --git a/packages/components/src/components/mobile/mobile-chat-list.tsx b/packages/components/src/components/mobile/mobile-chat-list.tsx
index e78604f37..a89374de7 100644
--- a/packages/components/src/components/mobile/mobile-chat-list.tsx
+++ b/packages/components/src/components/mobile/mobile-chat-list.tsx
@@ -29,7 +29,7 @@ import {
 } from '@/atoms/focus-layer';
 import { buildSessionRowOpenedByTreeSlot } from '@/components/sidebar-row-shared';
 import { cn } from '@/lib/utils';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -1383,7 +1383,7 @@ export function MobileChatList({
                 void handleDelete();
               }}
               disabled={isDeleting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              variant="destructive"
             >
               {selectionLabels?.confirmDelete ?? '删除'}
             </AlertDialogAction>
@@ -1428,7 +1428,7 @@ function SelectionToolbar({
         onClick={onToggleAll}
         className="inline-flex items-center gap-2 text-sm font-medium text-foreground"
       >
-        <Checkbox checked={allSelected} tabIndex={-1} className="pointer-events-none h-4 w-4" />
+        <Checkbox checked={allSelected} tabIndex={-1} className="pointer-events-none" />
         <span>{countLabel}</span>
       </button>
       <div className="flex items-center gap-1">
diff --git a/packages/components/src/components/mobile/mobile-create-workspace-sheet.tsx b/packages/components/src/components/mobile/mobile-create-workspace-sheet.tsx
index 2fc411cc4..8c61a1745 100644
--- a/packages/components/src/components/mobile/mobile-create-workspace-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-create-workspace-sheet.tsx
@@ -5,9 +5,9 @@ import { cloudOperations } from '@/lib/cloud-api-operations';
 import { useCloudQuery } from '@lody/platform/react';
 
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import { useOrganization } from '../../hooks/useOrganization';
 import { useWorkspaceSlugField } from '../../hooks/useWorkspaceSlugField';
 import { cn } from '@/lib/utils';
@@ -155,12 +155,12 @@ export function MobileCreateWorkspaceSheet({
             <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-2">
               <div className="flex flex-col gap-4">
                 <div className="space-y-1.5">
-                  <Label
+                  <UiField.Label
                     htmlFor="mobile-create-workspace-name"
                     className="text-[0.78rem] font-medium"
                   >
                     {t('organization.workspaceName', 'Workspace name')}
-                  </Label>
+                  </UiField.Label>
                   <Input
                     id="mobile-create-workspace-name"
                     value={name}
@@ -174,12 +174,12 @@ export function MobileCreateWorkspaceSheet({
 
                 <div className="space-y-1.5">
                   <div className="flex items-center justify-between">
-                    <Label
+                    <UiField.Label
                       htmlFor="mobile-create-workspace-slug"
                       className="text-[0.78rem] font-medium"
                     >
                       {t('organization.workspaceSlug', 'Workspace slug')}
-                    </Label>
+                    </UiField.Label>
                     {canReset ? (
                       <button
                         type="button"
@@ -244,7 +244,7 @@ export function MobileCreateWorkspaceSheet({
           >
             <Button
               type="button"
-              variant={creationBlocked ? 'default' : 'outline'}
+              variant={creationBlocked ? 'primary' : 'secondary'}
               className="flex-1"
               onClick={() => handleClose(false)}
               disabled={creating}
diff --git a/packages/components/src/components/mobile/mobile-delete-workspace-sheet.tsx b/packages/components/src/components/mobile/mobile-delete-workspace-sheet.tsx
index 590e0a764..9d72106e2 100644
--- a/packages/components/src/components/mobile/mobile-delete-workspace-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-delete-workspace-sheet.tsx
@@ -2,16 +2,10 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTriangle, Loader2, X } from 'lucide-react';
 
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerTitle,
-} from '@/ui/drawer';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import { cn } from '@/lib/utils';
 
 export type MobileDeleteWorkspaceSheetProps = {
@@ -117,8 +111,7 @@ export function MobileDeleteWorkspaceSheet({
           <DrawerDescription className="px-4 pb-3 text-[0.78rem] leading-relaxed text-muted-foreground">
             {t('workspace.danger.deleteWorkspace.confirmDescription', {
               workspace: workspaceName,
-              defaultValue:
-                'Permanently delete "{{workspace}}". This action cannot be undone.',
+              defaultValue: 'Permanently delete "{{workspace}}". This action cannot be undone.',
             })}
           </DrawerDescription>
 
@@ -134,7 +127,7 @@ export function MobileDeleteWorkspaceSheet({
                 'shadow-[0_0_0_3px_hsl(var(--destructive)/0.04)]'
               )}
             >
-              <Label
+              <UiField.Label
                 htmlFor="mobile-delete-workspace-confirm"
                 className="text-[0.78rem] font-medium text-foreground"
               >
@@ -142,7 +135,7 @@ export function MobileDeleteWorkspaceSheet({
                   workspace: workspaceName,
                   defaultValue: 'Type "{{workspace}}" to confirm',
                 })}
-              </Label>
+              </UiField.Label>
               <Input
                 id="mobile-delete-workspace-confirm"
                 value={confirmText}
@@ -179,7 +172,7 @@ export function MobileDeleteWorkspaceSheet({
           >
             <Button
               type="button"
-              variant="outline"
+              variant="secondary"
               className="flex-1"
               onClick={() => onOpenChange(false)}
               disabled={isDeleting}
diff --git a/packages/components/src/components/mobile/mobile-file-viewer-drawer.tsx b/packages/components/src/components/mobile/mobile-file-viewer-drawer.tsx
index 8553b4434..3a2eb6479 100644
--- a/packages/components/src/components/mobile/mobile-file-viewer-drawer.tsx
+++ b/packages/components/src/components/mobile/mobile-file-viewer-drawer.tsx
@@ -12,7 +12,7 @@ import { VaulDrawerBody } from '@/components/mobile/vaul-drawer-edge-back-zone';
 import { getSessionDetailTouchIconButtonClassName } from '@/lib/session-detail-a11y';
 import { getBasename } from '@/lib';
 import { isNativeAppShell } from '@/lib/native-platform';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Drawer, DrawerContent, DrawerTitle } from '@/ui/drawer';
 
 const MOBILE_FILE_DRAWER_HEADER_INSET = 'calc(3.5rem + var(--safe-area-top))';
@@ -90,7 +90,7 @@ export function MobileFileViewerDrawer({
                 <Button
                   type="button"
                   variant="ghost"
-                  size="icon"
+                  icon
                   className={getSessionDetailTouchIconButtonClassName('-ml-1')}
                   onClick={() => onOpenChange(false)}
                   aria-label={t('common.back', 'Back')}
@@ -104,7 +104,7 @@ export function MobileFileViewerDrawer({
                 <Button
                   type="button"
                   variant="ghost"
-                  size="icon"
+                  icon
                   className={getSessionDetailTouchIconButtonClassName('-mr-1')}
                   onClick={() => setMenuOpen(true)}
                   aria-label={t('sessions.fileViewer.moreActions', 'File actions')}
diff --git a/packages/components/src/components/mobile/mobile-general-settings.tsx b/packages/components/src/components/mobile/mobile-general-settings.tsx
index 037f39da1..7f6999b1c 100644
--- a/packages/components/src/components/mobile/mobile-general-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-general-settings.tsx
@@ -5,8 +5,8 @@ import type {
   OpenSystemNotificationSettingsResult,
 } from '@lody/shared';
 import { useAtom, useAtomValue } from 'jotai';
-import { Loading } from '@/ui';
-import { Switch } from '@/ui/switch';
+import { Spinner } from '@lody/ui/spinner';
+import { Switch } from '@lody/ui/switch';
 import { toast } from 'sonner';
 import {
   autoArchiveOnPrClosedAtom,
@@ -605,7 +605,9 @@ export function MobileGeneralSettings() {
             }
           >
             {isProcessing ? (
-              <Loading size="sm" className="h-5 w-9" />
+              <span className="flex h-5 w-9 items-center justify-center">
+                  <Spinner size="small" label={t('common.loading', 'Loading...')} />
+                </span>
             ) : (
               <Switch
                 id="notification-toggle"
@@ -724,7 +726,9 @@ export function MobileGeneralSettings() {
           <MobileSettingsRowGroup>
             <MobileSettingsRow label={t('settings.general.autoLaunch.label', 'Launch at startup')}>
               {autoLaunch.enabledLoading ? (
-                <Loading size="sm" className="h-5 w-9" />
+                <span className="flex h-5 w-9 items-center justify-center">
+                  <Spinner size="small" label={t('common.loading', 'Loading...')} />
+                </span>
               ) : (
                 <Switch
                   id="auto-launch-toggle"
@@ -744,7 +748,9 @@ export function MobileGeneralSettings() {
               )}
             >
               {autoLaunch.hideWindowLoading ? (
-                <Loading size="sm" className="h-5 w-9" />
+                <span className="flex h-5 w-9 items-center justify-center">
+                  <Spinner size="small" label={t('common.loading', 'Loading...')} />
+                </span>
               ) : (
                 <Switch
                   id="auto-launch-hide-window-toggle"
diff --git a/packages/components/src/components/mobile/mobile-home-screen.tsx b/packages/components/src/components/mobile/mobile-home-screen.tsx
index f1656bd53..699e53453 100644
--- a/packages/components/src/components/mobile/mobile-home-screen.tsx
+++ b/packages/components/src/components/mobile/mobile-home-screen.tsx
@@ -489,18 +489,14 @@ export type MobileHomeScreenProps = {
 
 /* Home header workspace chip — shared `WorkspaceAvatar` so logo /
    first-letter fallback match the switcher sheet and desktop sidebar. */
-function HomeWorkspaceAvatar({
-  workspace,
-  size = 'sm',
-}: {
-  workspace: MobileHomeWorkspace;
-  size?: 'sm' | 'md';
-}) {
-  const sizeClass = size === 'sm' ? 'h-7 w-7 text-[0.72rem]' : 'h-9 w-9 text-[0.82rem]';
+function HomeWorkspaceAvatar({ workspace }: { workspace: MobileHomeWorkspace }) {
+  /* One rung: `@lody/ui`'s ladder has nothing between 32 and 64, and the
+     28-vs-36 split this used to carry was a size that had drifted rather than
+     two decisions about how big a workspace tile is. */
   return (
     <WorkspaceAvatar
       workspace={{ name: workspace.name, logo: workspace.avatarUrl }}
-      className={sizeClass}
+      size="large"
     />
   );
 }
@@ -1461,14 +1457,14 @@ export function MobileHomeScreen({
                   aria-haspopup="dialog"
                   onClick={onWorkspaceMenuOpen}
                 >
-                  <HomeWorkspaceAvatar workspace={workspace} size="sm" />
+                  <HomeWorkspaceAvatar workspace={workspace} />
                 </FloatingPill>
               ) : (
                 <div
                   className="flex h-9 w-9 items-center justify-center rounded-full border border-border/50 bg-muted text-foreground dark:border-white/12 dark:bg-white/10"
                   data-workspace-identity
                 >
-                  <HomeWorkspaceAvatar workspace={workspace} size="sm" />
+                  <HomeWorkspaceAvatar workspace={workspace} />
                 </div>
               )}
             </div>
diff --git a/packages/components/src/components/mobile/mobile-integrations-settings.tsx b/packages/components/src/components/mobile/mobile-integrations-settings.tsx
index 36e583772..752a689c7 100644
--- a/packages/components/src/components/mobile/mobile-integrations-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-integrations-settings.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/ui/button';
-import { Badge } from '@/ui/badge';
+import { Button } from '@lody/ui/button';
+import { Badge } from '@lody/ui/badge';
 import { ArrowUpRight, Book, Github, Loader2, Search } from 'lucide-react';
 import { useCloudAction, useCloudMutation } from '@lody/platform/react';
 import { useAtomValue } from 'jotai';
@@ -8,8 +8,8 @@ import { currentWorkspaceSlugAtom } from '@/atoms';
 import { cloudOperations } from '@/lib/cloud-api-operations';
 import { cn } from '@/lib/utils';
 import { useAppCapability } from '@/lib/app-platform';
-import { Switch } from '@/ui/switch';
-import { Input } from '@/ui/input';
+import { Switch } from '@lody/ui/switch';
+import { Input } from '@lody/ui/input';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import {
@@ -88,7 +88,9 @@ function MobileCloudIntegrationsSettings() {
   const setPersonalOperationPreference = useCloudMutation(
     cloudOperations.github.setPersonalOperationPreference
   );
-  const refreshPersonalGitHubProfile = useCloudAction(cloudOperations.github.refreshPersonalGitHubProfile);
+  const refreshPersonalGitHubProfile = useCloudAction(
+    cloudOperations.github.refreshPersonalGitHubProfile
+  );
   const [connectingToGitHub, setConnectingToGitHub] = useState(false);
   const [updatingPersonalPreference, setUpdatingPersonalPreference] = useState(false);
   const [authorizingPersonalGitHub, setAuthorizingPersonalGitHub] = useState(false);
@@ -349,9 +351,7 @@ function MobileCloudIntegrationsSettings() {
           >
             {canManage ? (
               <Button
-                size="sm"
-                className="inline-flex items-center gap-1 whitespace-nowrap"
-                variant="default"
+                size="small"
                 onClick={() => {
                   void handleConnectGitHub();
                 }}
@@ -437,7 +437,7 @@ function MobileCloudIntegrationsSettings() {
         title={t('settings.integrations.github.authorizedReposTitle', 'Authorized Repositories')}
         actions={
           repos.length > 0 ? (
-            <Badge variant="outline" className="text-[11px]">
+            <Badge>
               {searchQuery && filteredRepos.length !== repos.length
                 ? `${filteredRepos.length} / ${repos.length}`
                 : `${enabledCount} / ${repos.length}`}{' '}
@@ -489,7 +489,7 @@ function MobileCloudIntegrationsSettings() {
                       {repo.repoFullName}
                     </span>
                     {repo.private && (
-                      <Badge variant="outline" className="px-1 py-0 text-[10px]">
+                      <Badge>
                         {t('settings.integrations.github.private')}
                       </Badge>
                     )}
diff --git a/packages/components/src/components/mobile/mobile-local-project-settings.tsx b/packages/components/src/components/mobile/mobile-local-project-settings.tsx
index 0202e61fc..9e698a9ea 100644
--- a/packages/components/src/components/mobile/mobile-local-project-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-local-project-settings.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useAtomValue } from 'jotai';
 import { machineSupportsLocalProjectRemovalProtocol, type MachineId } from '@lody/shared';
 import { ChevronRight, Loader2, Wrench } from 'lucide-react';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { TooltipProvider } from '@/ui/tooltip';
 import { currentWorkspaceIdAtom } from '@/atoms';
 import { getMachineMetaMapAtom } from '@/atoms/machines';
diff --git a/packages/components/src/components/mobile/mobile-project-screen.tsx b/packages/components/src/components/mobile/mobile-project-screen.tsx
index 9e5625288..a3b0f33e3 100644
--- a/packages/components/src/components/mobile/mobile-project-screen.tsx
+++ b/packages/components/src/components/mobile/mobile-project-screen.tsx
@@ -22,7 +22,7 @@ import { isNativeAppShell } from '@/lib/native-platform';
 import { consumeMobileBackNavigation } from '@/lib/mobile-back-navigation';
 import { cn } from '@/lib/utils';
 import { useLongPress } from '@/hooks/use-long-press';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import { CachedAvatarImg } from '@/components/cached-avatar-img';
 import { WorktreeIcon } from '@/components/icons/worktree-icon';
 import {
@@ -563,7 +563,7 @@ export function ConversationRow({
           <Checkbox
             checked={isSelected}
             tabIndex={-1}
-            className="pointer-events-none h-4 w-4"
+            className="pointer-events-none"
             aria-hidden="true"
           />
         ) : (
diff --git a/packages/components/src/components/mobile/mobile-project-settings.tsx b/packages/components/src/components/mobile/mobile-project-settings.tsx
index 946a147bf..d481993e9 100644
--- a/packages/components/src/components/mobile/mobile-project-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-project-settings.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChevronRight, Folder, FolderOpen, FolderPlus, Github, Loader2 } from 'lucide-react';
 import type { MachineId } from '@lody/shared';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { TooltipProvider } from '@/ui/tooltip';
 import { cn } from '@/lib/utils';
 import { useOnlineMachineIds } from '@/hooks/use-machine-online-status';
diff --git a/packages/components/src/components/mobile/mobile-remove-local-project-sheet.tsx b/packages/components/src/components/mobile/mobile-remove-local-project-sheet.tsx
index 217545f54..68efde21c 100644
--- a/packages/components/src/components/mobile/mobile-remove-local-project-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-remove-local-project-sheet.tsx
@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { Loader2, X } from 'lucide-react';
 
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
-import { Button } from '@/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Button } from '@lody/ui/button';
+import { Checkbox } from '@lody/ui/checkbox';
 import { cn } from '@/lib/utils';
 
 export type MobileRemoveLocalProjectSheetProps = {
@@ -197,7 +197,7 @@ export function MobileRemoveLocalProjectSheet({
                   className="mt-0.5"
                   checked={cleanupWorktrees}
                   disabled={!canCleanupWorktrees || isRemoving}
-                  onCheckedChange={(checked) => void handleCleanupChange(checked === true)}
+                  onCheckedChange={(checked) => void handleCleanupChange(checked)}
                 />
                 <span>
                   <span className="block font-medium text-foreground">
@@ -265,7 +265,7 @@ export function MobileRemoveLocalProjectSheet({
           >
             <Button
               type="button"
-              variant="outline"
+              variant="secondary"
               className="flex-1"
               onClick={() => onOpenChange(false)}
               disabled={isRemoving}
diff --git a/packages/components/src/components/mobile/mobile-run-config-sheet.tsx b/packages/components/src/components/mobile/mobile-run-config-sheet.tsx
index b85874010..22d384528 100644
--- a/packages/components/src/components/mobile/mobile-run-config-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-run-config-sheet.tsx
@@ -33,7 +33,7 @@ import { openExternalUrl } from '@/lib/native-browser';
 import { useKeyboardAwareSheet } from '@/hooks/use-keyboard-aware-scroll-into-view';
 import { cn } from '@/lib/utils';
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   classifyPermissionModeFace,
   getAgentRoleEmoji,
diff --git a/packages/components/src/components/mobile/mobile-session-menu-sheet.tsx b/packages/components/src/components/mobile/mobile-session-menu-sheet.tsx
index 533fa53c9..029ef8468 100644
--- a/packages/components/src/components/mobile/mobile-session-menu-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-session-menu-sheet.tsx
@@ -179,8 +179,8 @@ export function MobileSessionMenuSheet({
                       >
                         <UserAvatar
                           user={{ id: member.userId, name: member.name, image: member.image }}
-                          className="h-5 w-5 shrink-0"
-                          fallbackClassName="text-[0.6rem]"
+                          size="small"
+                          className="shrink-0"
                         />
                         <span className="min-w-0 flex-1 truncate text-foreground">
                           {member.name}
diff --git a/packages/components/src/components/mobile/mobile-stats-settings.tsx b/packages/components/src/components/mobile/mobile-stats-settings.tsx
index 2e028d564..c89af9612 100644
--- a/packages/components/src/components/mobile/mobile-stats-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-stats-settings.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOrganization } from '@/hooks/useOrganization';
-import { Tabs, TabsList, TabsTrigger } from '@/ui/tabs';
+import { Tabs } from '@lody/ui/tabs';
 import {
   UsageStackedAreaChart,
   type StackedAreaBucket,
@@ -124,28 +124,19 @@ export function MobileStatsSettings() {
     <div className="pb-6 pt-1">
       <MobileSettingsSection title={activeOrganization?.name || t('workspace.usage.title')}>
         <div className="px-3 py-3">
-          <Tabs
+          <Tabs.Root
             value={range}
             onValueChange={(nextValue) => {
               setRange(nextValue as SettingsUsageRange);
             }}
-            className="w-full"
           >
-            <TabsList className="grid w-full grid-cols-4">
-              <TabsTrigger value="day" className="h-full">
-                {t('workspace.usage.tabs.day')}
-              </TabsTrigger>
-              <TabsTrigger value="week" className="h-full">
-                {t('workspace.usage.tabs.week')}
-              </TabsTrigger>
-              <TabsTrigger value="month" className="h-full">
-                {t('workspace.usage.tabs.month')}
-              </TabsTrigger>
-              <TabsTrigger value="total" className="h-full">
-                {t('workspace.usage.tabs.total')}
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
+            <Tabs.List size="large" stretch>
+              <Tabs.Tab value="day">{t('workspace.usage.tabs.day')}</Tabs.Tab>
+              <Tabs.Tab value="week">{t('workspace.usage.tabs.week')}</Tabs.Tab>
+              <Tabs.Tab value="month">{t('workspace.usage.tabs.month')}</Tabs.Tab>
+              <Tabs.Tab value="total">{t('workspace.usage.tabs.total')}</Tabs.Tab>
+            </Tabs.List>
+          </Tabs.Root>
         </div>
       </MobileSettingsSection>
 
diff --git a/packages/components/src/components/mobile/mobile-workspace-switcher-sheet.tsx b/packages/components/src/components/mobile/mobile-workspace-switcher-sheet.tsx
index 663430aa9..6e18eb0f1 100644
--- a/packages/components/src/components/mobile/mobile-workspace-switcher-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-workspace-switcher-sheet.tsx
@@ -163,7 +163,8 @@ function WorkspaceLeadingAvatar({
   return (
     <WorkspaceAvatar
       workspace={{ name: workspace.name, logo: workspace.avatarUrl }}
-      className="h-9 w-9 shrink-0 rounded-xl text-[0.82rem]"
+      size="large"
+      className="shrink-0"
     />
   );
 }
diff --git a/packages/components/src/components/not-found.tsx b/packages/components/src/components/not-found.tsx
index a98e98573..9ffd5d47b 100644
--- a/packages/components/src/components/not-found.tsx
+++ b/packages/components/src/components/not-found.tsx
@@ -3,7 +3,7 @@
  * 当用户访问不存在的页面时显示
  */
 import { useNavigate } from '@tanstack/react-router';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Home, ArrowLeft } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
@@ -48,12 +48,12 @@ export function NotFound() {
         </p>
 
         <div className="flex justify-center gap-4">
-          <Button variant="outline" onClick={handleGoBack} className="flex items-center gap-2">
+          <Button variant="secondary" onClick={handleGoBack} className="flex">
             <ArrowLeft className="h-4 w-4" />
             {t('notFound.goBack', 'Go Back')}
           </Button>
 
-          <Button onClick={handleGoHome} className="flex items-center gap-2">
+          <Button onClick={handleGoHome} className="flex">
             <Home className="h-4 w-4" />
             {t('notFound.goHome', 'Go Home')}
           </Button>
diff --git a/packages/components/src/components/onboarding/ceremony/intro-sequence.tsx b/packages/components/src/components/onboarding/ceremony/intro-sequence.tsx
index 941785ff1..d03fec258 100644
--- a/packages/components/src/components/onboarding/ceremony/intro-sequence.tsx
+++ b/packages/components/src/components/onboarding/ceremony/intro-sequence.tsx
@@ -5,7 +5,7 @@ import quietWork from '@/assets/onboarding/intro/quiet-work.png';
 import continuousScroll from '@/assets/onboarding/intro/continuous-scroll.png';
 import readyToBegin from '@/assets/onboarding/intro/ready-to-begin.png';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { WINDOW_DRAG_EXEMPT_CLASS } from '@/ui/window-drag-region';
 import type { AudioLayers } from './use-onboarding-audio';
 import { playClick, playCut, playReveal, playSelect } from './ui-sounds';
@@ -395,10 +395,10 @@ export function IntroSequence({
           <div className="mt-[clamp(18px,2.6vh,32px)] flex h-11 items-center">
             {beat.final ? (
               <Button
-                size="lg"
+                size="large"
                 disabled={departing}
                 autoFocus
-                className="lody-intro-motion rounded-md bg-slate-950 px-6 text-white hover:bg-slate-800"
+                className="lody-intro-motion"
                 style={{ animation: `lody-intro-copy-in 520ms ${INTRO_EASE} 300ms both` }}
                 onClick={beginSetup}
               >
diff --git a/packages/components/src/components/onboarding/onboarding-shell.tsx b/packages/components/src/components/onboarding/onboarding-shell.tsx
index 76cfe6072..0bc1a28d0 100644
--- a/packages/components/src/components/onboarding/onboarding-shell.tsx
+++ b/packages/components/src/components/onboarding/onboarding-shell.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { PlatformContext } from '@lody/platform/react';
 import { ArrowLeft, Check, Loader2 } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { TourStill, type TourStillDebugOptions } from './tour/tour-still';
 import { DEFAULT_TOUR_IDENTITY, type TourIdentity } from './tour/tour-fixtures';
 import type { TourAppTracks, TourConfigurationState } from './tour/tour-app';
@@ -595,15 +595,14 @@ export function OnboardingBackButton({ onClick, disabled, label }: OnboardingBac
   return (
     <Button
       variant="ghost"
-      size="lg"
       onMouseEnter={() => playHover()}
+      size="large"
       onClick={() => {
         // Going back falls in pitch, as it does everywhere else in the flow.
         playBack();
         onClick();
       }}
       disabled={disabled}
-      className="gap-2"
     >
       <ArrowLeft className="h-4 w-4" />
       {label ?? t('common.back', 'Back')}
@@ -634,8 +633,8 @@ export function OnboardingNextButton({
   const text = label ?? (isFinish ? t('common.finish', 'Finish') : t('common.next', 'Next'));
   return (
     <Button
-      size="lg"
       onMouseEnter={() => playHover()}
+      size="large"
       onClick={() => {
         // Advancing rises; the last step gets the confirming click instead.
         if (isFinish) playClick();
@@ -643,7 +642,6 @@ export function OnboardingNextButton({
         onClick();
       }}
       disabled={disabled}
-      className="gap-2"
     >
       {loading === true ? (
         <Loader2 className="h-4 w-4 animate-spin" />
diff --git a/packages/components/src/components/onboarding/screens/first-task-screen.tsx b/packages/components/src/components/onboarding/screens/first-task-screen.tsx
index b55f12cde..b532875a9 100644
--- a/packages/components/src/components/onboarding/screens/first-task-screen.tsx
+++ b/packages/components/src/components/onboarding/screens/first-task-screen.tsx
@@ -21,9 +21,9 @@ import { useSessionActions } from '@/hooks/use-session-actions';
 import { buildAgentPrompt } from '@/lib';
 import { cn } from '@/lib/utils';
 import { AgentIcon } from '@/components/icons/agent-icon';
-import { Button } from '@/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Select } from '@lody/ui/select';
+import { Textarea } from '@lody/ui/textarea';
 import { getFirstTaskPrimaryAction } from '../first-task-primary-action';
 import { OnboardingBackButton, OnboardingNextButton, OnboardingShell } from '../onboarding-shell';
 import { useOnboardingAnalytics } from '../onboarding-analytics';
@@ -248,12 +248,7 @@ export function FirstTaskScreen({
       secondaryAction={<OnboardingBackButton onClick={onBack} />}
       primaryAction={
         <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="lg"
-            onClick={onSkip}
-            className="text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="ghost" size="large" onClick={onSkip}>
             {t('onboarding.firstTask.skip', 'Skip for now')}
           </Button>
           <OnboardingNextButton
@@ -287,7 +282,7 @@ export function FirstTaskScreen({
           >
             {t('onboarding.firstTask.agent', 'Agent')}
           </label>
-          <Select
+          <Select.Root
             value={config?.id}
             onValueChange={(value) => {
               const next = availableConfigs.find((candidate) => candidate.id === value);
@@ -296,12 +291,12 @@ export function FirstTaskScreen({
             }}
             disabled={availableConfigs.length === 0}
           >
-            <SelectTrigger
+            <Select.Trigger
               id="onboarding-first-task-agent"
               aria-label={t('onboarding.firstTask.agent', 'Agent')}
-              className="h-11"
+              size="large"
             >
-              <SelectValue placeholder={t('onboarding.firstTask.selectAgent', 'Select an Agent')}>
+              <Select.Value placeholder={t('onboarding.firstTask.selectAgent', 'Select an Agent')}>
                 {config ? (
                   <span className="flex min-w-0 items-center gap-2">
                     <AgentIcon
@@ -314,11 +309,11 @@ export function FirstTaskScreen({
                     <span className="truncate">{config.name}</span>
                   </span>
                 ) : undefined}
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
+              </Select.Value>
+            </Select.Trigger>
+            <Select.Content>
               {availableConfigs.map((candidate) => (
-                <SelectItem key={candidate.id} value={candidate.id}>
+                <Select.Item key={candidate.id} value={candidate.id}>
                   <span className="flex min-w-0 items-center gap-2">
                     <AgentIcon
                       cliType={candidate.cliType}
@@ -329,10 +324,10 @@ export function FirstTaskScreen({
                     />
                     <span className="truncate">{candidate.name}</span>
                   </span>
-                </SelectItem>
+                </Select.Item>
               ))}
-            </SelectContent>
-          </Select>
+            </Select.Content>
+          </Select.Root>
           {!config ? (
             <p className="text-xs text-muted-foreground">
               {t(
diff --git a/packages/components/src/components/onboarding/screens/invite-screen.tsx b/packages/components/src/components/onboarding/screens/invite-screen.tsx
index 7d3e7904c..1233ce5ff 100644
--- a/packages/components/src/components/onboarding/screens/invite-screen.tsx
+++ b/packages/components/src/components/onboarding/screens/invite-screen.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { motion, AnimatePresence } from 'framer-motion';
 import { ArrowRight, Loader2, Mail, Plus, Send, X } from 'lucide-react';
 import { toast } from 'sonner';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
 import { cn } from '@/lib/utils';
 import { useOrganization } from '@/hooks/useOrganization';
 import { useAuthClient } from '../../../providers/convex-provider';
@@ -61,13 +61,12 @@ export function InviteScreenView({
       secondaryAction={<OnboardingBackButton onClick={onBack} disabled={sending} />}
       primaryAction={
         <div className="flex items-center gap-2">
-          <Button variant="ghost" size="lg" onClick={onSkip} disabled={sending}>
+          <Button variant="ghost" size="large" onClick={onSkip} disabled={sending}>
             {t('onboarding.invite.skip', 'Skip')}
           </Button>
           <Button
-            size="lg"
+            size="large"
             onClick={onSendAndContinue}
-            className="gap-2"
             disabled={!hasAnything || sending || pendingCount === 0}
           >
             {sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
@@ -100,7 +99,7 @@ export function InviteScreenView({
               disabled={sending}
             />
           </div>
-          <Button type="submit" variant="outline" disabled={!email.trim() || sending}>
+          <Button type="submit" variant="secondary" disabled={!email.trim() || sending}>
             <Plus className="h-4 w-4" />
             {t('onboarding.invite.add', 'Add')}
           </Button>
@@ -132,9 +131,10 @@ export function InviteScreenView({
                   ) : (
                     <Button
                       variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 text-muted-foreground hover:text-destructive"
                       aria-label={t('common.remove', 'Remove')}
+                      size="small"
+                      icon
+                      tone="destructive"
                       onClick={() => onRemove(invite.id)}
                       disabled={sending}
                     >
diff --git a/packages/components/src/components/onboarding/screens/login-screen.tsx b/packages/components/src/components/onboarding/screens/login-screen.tsx
index 39dc2acdc..129fc0e1d 100644
--- a/packages/components/src/components/onboarding/screens/login-screen.tsx
+++ b/packages/components/src/components/onboarding/screens/login-screen.tsx
@@ -3,7 +3,7 @@ import { useRouter } from '@tanstack/react-router';
 import { useTranslation } from 'react-i18next';
 import { usePlatformSession } from '@lody/platform/react';
 import { ExternalLink, Loader2, LogIn } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { OnboardingBackButton, OnboardingShell } from '../onboarding-shell';
 import { useOnboardingAnalytics } from '../onboarding-analytics';
 
@@ -96,7 +96,7 @@ export function LoginScreen({ onBack, onNext }: { onBack: () => void; onNext: ()
       )}
       secondaryAction={<OnboardingBackButton onClick={onBack} disabled={locked} />}
       primaryAction={
-        <Button size="lg" onClick={handleSignIn} disabled={locked}>
+        <Button size="large" onClick={handleSignIn} disabled={locked}>
           {locked ? <Loader2 className="size-4 animate-spin" /> : <LogIn className="size-4" />}
           {openingBrowser
             ? t('onboarding.login.openBrowserAgain', 'Open browser again')
diff --git a/packages/components/src/components/onboarding/screens/projects-screen.tsx b/packages/components/src/components/onboarding/screens/projects-screen.tsx
index 9caaf8884..4fa5abac6 100644
--- a/packages/components/src/components/onboarding/screens/projects-screen.tsx
+++ b/packages/components/src/components/onboarding/screens/projects-screen.tsx
@@ -23,7 +23,7 @@ import { isElectronRenderer } from '@/lib/electron';
 import { getIpcServices } from '@/lib/electron-ipc-client';
 import { selectAndWriteLocalProject } from '@/lib/local-project-import';
 import { openExternalUrl } from '@/lib/native-browser';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { OnboardingShell, OnboardingBackButton, OnboardingNextButton } from '../onboarding-shell';
 import { useOnboardingAnalytics } from '../onboarding-analytics';
 
@@ -114,12 +114,7 @@ export function ProjectsScreenView({
       secondaryAction={<OnboardingBackButton onClick={onBack} />}
       primaryAction={
         <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="lg"
-            onClick={onSkip}
-            className="text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="ghost" size="large" onClick={onSkip}>
             {t('onboarding.projects.skip', 'Skip for now')}
           </Button>
           <OnboardingNextButton
diff --git a/packages/components/src/components/onboarding/screens/providers-screen.tsx b/packages/components/src/components/onboarding/screens/providers-screen.tsx
index 1aa355fe7..cc33fdd61 100644
--- a/packages/components/src/components/onboarding/screens/providers-screen.tsx
+++ b/packages/components/src/components/onboarding/screens/providers-screen.tsx
@@ -27,8 +27,8 @@ import {
   type ProviderSetupTask,
 } from '@lody/shared';
 import { toast } from 'sonner';
-import { Button } from '@/ui/button';
-import { Badge } from '@/ui/badge';
+import { Button } from '@lody/ui/button';
+import { Badge } from '@lody/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ui/tooltip';
 import {
   AlertDialog,
@@ -317,12 +317,7 @@ export function ProvidersScreenView({
       secondaryAction={<OnboardingBackButton onClick={onBack} />}
       primaryAction={
         <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="lg"
-            onClick={onSkip}
-            className="text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="ghost" size="large" onClick={onSkip}>
             {t('onboarding.providers.skip', 'Skip for now')}
           </Button>
           <OnboardingNextButton
@@ -446,8 +441,8 @@ export function ProvidersScreenView({
                       <div className="flex shrink-0 items-center gap-1 py-3 pr-3">
                         <Button
                           variant="ghost"
-                          size="sm"
-                          className="w-12 shrink-0 px-0"
+                          size="small"
+                          className="w-12 shrink-0"
                           onClick={() => onEdit(config)}
                         >
                           {t('common.edit', 'Edit')}
@@ -456,17 +451,13 @@ export function ProvidersScreenView({
                           {activity ? (
                             <ProviderActivityAction activity={activity} config={config} />
                           ) : status !== 'needs-auth' ? (
-                            // Always outline, passed or not. Ghosting the
-                            // button once a test succeeded emptied the slot of
-                            // everything but a word, so the one row that had
-                            // been verified read as a hole in the column while
-                            // its neighbours kept a bordered control. A fixed
-                            // slot only holds the column if what sits in it
-                            // keeps its shape too.
+                            // Keep the same visual role after success. Changing
+                            // the action to a ghost made the verified row read
+                            // as a hole in this fixed-width column.
                             <Button
-                              variant="outline"
-                              size="sm"
-                              className="w-full px-0"
+                              variant="secondary"
+                              size="small"
+                              className="w-full"
                               disabled={noLocalMachine}
                               onClick={() => onTest(config)}
                             >
@@ -478,9 +469,11 @@ export function ProvidersScreenView({
                         </div>
                         <Button
                           variant="ghost"
-                          size="icon"
-                          className="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive"
+                          size="small"
+                          className="shrink-0"
                           aria-label={t('common.delete', 'Delete')}
+                          icon
+                          tone="destructive"
                           onClick={() => onDelete(config)}
                         >
                           <Trash2 className="h-3.5 w-3.5" />
@@ -1326,7 +1319,7 @@ export function ProvidersScreen({
                 event.preventDefault();
                 void handleConfirmDelete();
               }}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              variant="destructive"
             >
               {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
               {t('common.delete', 'Delete')}
@@ -1470,13 +1463,11 @@ function getProviderTestActivityPercent(activity?: ProviderTestActivity): number
 }
 
 /**
- * One chip geometry for every provider status. The words differ in length and
- * only some carry a glyph, so without a fixed height and a single padding the
- * column read as five different controls stacked on top of each other.
+ * Every provider status is one `Badge`, and the tone says which kind it is. The
+ * geometry is the primitive's — one height, one padding, one corner — which is
+ * what this column needed when it was five hand-built chips that read as five
+ * different controls stacked on top of each other.
  */
-const PROVIDER_STATUS_CHIP =
-  'h-5 shrink-0 gap-1 whitespace-nowrap rounded-full border px-2 py-0 text-[10px] font-medium';
-
 function ProviderStatusBadge({
   status,
   activity,
@@ -1530,18 +1521,10 @@ function ProviderStatusBadge({
     );
     const badge = (
       <Badge
-        variant="outline"
         // The badge is not focusable, so the tooltip is a hover-only detail.
         // The acknowledgement itself must reach assistive tech regardless.
         aria-label={exceptional ? slowDetail : undefined}
-        className={cn(
-          PROVIDER_STATUS_CHIP,
-          runtimeFailed
-            ? 'border-destructive/40 bg-destructive/8 text-destructive'
-            : exceptional
-              ? 'border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400'
-              : 'border-primary/35 bg-primary/8 text-primary'
-        )}
+        tone={runtimeFailed ? 'danger' : exceptional ? 'warning' : 'running'}
       >
         {exceptional ? t('onboarding.providers.activitySlow', 'Taking longer') : stageLabel}
       </Badge>
@@ -1563,11 +1546,7 @@ function ProviderStatusBadge({
   }
   if (status === 'passed') {
     return (
-      <Badge
-        variant="outline"
-        className={cn(PROVIDER_STATUS_CHIP, 'border-primary/40 bg-primary/10 text-primary')}
-      >
-        <CheckCircle2 className="h-2.5 w-2.5" />
+      <Badge tone="success" icon={<CheckCircle2 className="h-3 w-3" />}>
         {t('onboarding.providers.statusPassed', 'Verified')}
       </Badge>
     );
@@ -1575,7 +1554,6 @@ function ProviderStatusBadge({
   if (status === 'failed') {
     const badge = (
       <Badge
-        variant="outline"
         aria-label={
           failureReason
             ? t('onboarding.providers.failureReasonA11y', 'Failed: {{reason}}', {
@@ -1583,12 +1561,9 @@ function ProviderStatusBadge({
               })
             : undefined
         }
-        className={cn(
-          PROVIDER_STATUS_CHIP,
-          'border-destructive/40 bg-destructive/8 text-destructive'
-        )}
+        tone="danger"
+        icon={<XCircle className="h-3 w-3" />}
       >
-        <XCircle className="h-2.5 w-2.5" />
         {t('onboarding.providers.statusFailed', 'Failed')}
       </Badge>
     );
@@ -1608,24 +1583,7 @@ function ProviderStatusBadge({
     );
   }
   if (status === 'needs-auth') {
-    return (
-      <Badge
-        variant="outline"
-        className={cn(
-          PROVIDER_STATUS_CHIP,
-          'border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400'
-        )}
-      >
-        {t('onboarding.providers.statusNeedsAuth', 'Sign in')}
-      </Badge>
-    );
+    return <Badge tone="warning">{t('onboarding.providers.statusNeedsAuth', 'Sign in')}</Badge>;
   }
-  return (
-    <Badge
-      variant="outline"
-      className={cn(PROVIDER_STATUS_CHIP, 'border-border/70 bg-muted/40 text-muted-foreground')}
-    >
-      {t('onboarding.providers.statusUntested', 'Untested')}
-    </Badge>
-  );
+  return <Badge>{t('onboarding.providers.statusUntested', 'Untested')}</Badge>;
 }
diff --git a/packages/components/src/components/onboarding/screens/summary-screen.tsx b/packages/components/src/components/onboarding/screens/summary-screen.tsx
index 2bc531287..429fa11a8 100644
--- a/packages/components/src/components/onboarding/screens/summary-screen.tsx
+++ b/packages/components/src/components/onboarding/screens/summary-screen.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Clock3, Loader2, Minus, RotateCcw, XCircle } from 'lucide-react';
 import type { ProviderSetupFailureCode } from '@lody/shared';
-import { Table, TableBody, TableCell, TableRow } from '@/ui/table';
-import { Button } from '@/ui/button';
+import { Table } from '@lody/ui/table';
+import { Button } from '@lody/ui/button';
 import { OnboardingBackButton, OnboardingNextButton, OnboardingShell } from '../onboarding-shell';
 import { useOnboardingAnalytics } from '../onboarding-analytics';
 
@@ -84,8 +84,8 @@ export function SummaryScreen({
       }
     >
       <div className="overflow-hidden rounded-xl border border-border/60 bg-card/45">
-        <Table>
-          <TableBody>
+        <Table.Root size="large">
+          <Table.Body>
             <SummaryRow
               label={t('onboarding.summary.agent', 'Agent')}
               value={resolvedAgentName}
@@ -96,8 +96,8 @@ export function SummaryScreen({
               value={resolvedProjectName}
               status={projectName ? 'ready' : 'missing'}
             />
-          </TableBody>
-        </Table>
+          </Table.Body>
+        </Table.Root>
       </div>
       {agentState === 'failed' && onRetryAgent ? (
         <div className="mt-3 space-y-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-3 text-xs text-destructive">
@@ -113,9 +113,8 @@ export function SummaryScreen({
           </div>
           <Button
             type="button"
-            variant="outline"
-            size="sm"
-            className="gap-2"
+            variant="secondary"
+            size="small"
             disabled={retryingAgent}
             onClick={() => {
               if (retryingAgent) return;
@@ -206,10 +205,12 @@ function SummaryRow({
           : t('onboarding.summary.statusLater', 'Set up later');
 
   return (
-    <TableRow className="hover:bg-transparent">
-      <TableCell className="w-24 py-4 text-xs font-medium text-muted-foreground">{label}</TableCell>
-      <TableCell className="max-w-48 truncate py-4 font-medium">{value}</TableCell>
-      <TableCell className="py-4 text-right">
+    <Table.Row>
+      <Table.ColumnHeader scope="row" className="w-24">
+        {label}
+      </Table.ColumnHeader>
+      <Table.Cell className="max-w-48 truncate font-medium">{value}</Table.Cell>
+      <Table.Cell align="end">
         <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
           {status === 'ready' ? (
             <Check className="size-3.5 text-primary" />
@@ -222,7 +223,7 @@ function SummaryRow({
           )}
           {statusLabel}
         </span>
-      </TableCell>
-    </TableRow>
+      </Table.Cell>
+    </Table.Row>
   );
 }
diff --git a/packages/components/src/components/onboarding/screens/workspace-screen.tsx b/packages/components/src/components/onboarding/screens/workspace-screen.tsx
index 1926cb0a5..dc4a5b57b 100644
--- a/packages/components/src/components/onboarding/screens/workspace-screen.tsx
+++ b/packages/components/src/components/onboarding/screens/workspace-screen.tsx
@@ -8,9 +8,9 @@ import { setWorkspaceContextAtom } from '@/atoms/workspace-context';
 import { cloudOperations } from '@/lib/cloud-api-operations';
 import { toast } from 'sonner';
 import { useCloudQuery, usePlatform, usePlatformWorkspaces } from '@lody/platform/react';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import { cn } from '@/lib/utils';
 import { ErrorBoundary } from '@/components/error-boundary';
 import {
@@ -216,7 +216,7 @@ export function WorkspaceScreenView({
       }
       primaryAction={
         creating ? (
-          <Button size="lg" disabled={!canSubmitCreate} onClick={onSubmitCreate} className="gap-2">
+          <Button size="large" disabled={!canSubmitCreate} onClick={onSubmitCreate}>
             {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
             {createError
               ? t('common.retry', 'Retry')
@@ -252,16 +252,16 @@ export function WorkspaceScreenView({
           >
             {repairingWorkspace ? (
               <div className="space-y-2">
-                <Label>{t('organization.workspaceName', 'Workspace name')}</Label>
+                <UiField.Label>{t('organization.workspaceName', 'Workspace name')}</UiField.Label>
                 <div className="rounded-md border border-border bg-muted/30 px-3 py-2.5 text-sm font-medium">
                   {repairingWorkspaceName}
                 </div>
               </div>
             ) : (
               <div className="space-y-2">
-                <Label htmlFor="onboarding-workspace-name">
+                <UiField.Label htmlFor="onboarding-workspace-name">
                   {t('organization.workspaceName', 'Workspace name')}
-                </Label>
+                </UiField.Label>
                 <Input
                   id="onboarding-workspace-name"
                   value={newName}
@@ -277,9 +277,9 @@ export function WorkspaceScreenView({
 
             <div className="space-y-2">
               <div className="flex items-center justify-between gap-4">
-                <Label htmlFor="onboarding-workspace-slug" className="whitespace-nowrap">
+                <UiField.Label htmlFor="onboarding-workspace-slug" className="whitespace-nowrap">
                   {t('organization.workspaceSlug', 'Handle')}
-                </Label>
+                </UiField.Label>
                 {canResetSlug ? (
                   <button
                     type="button"
@@ -312,9 +312,8 @@ export function WorkspaceScreenView({
                   <p className="break-words font-mono opacity-90">{newSlugCheckError}</p>
                   <Button
                     type="button"
-                    variant="outline"
-                    size="sm"
-                    className="gap-2"
+                    variant="secondary"
+                    size="small"
                     onClick={onRetryNewSlugCheck}
                   >
                     <RotateCcw className="size-3.5" />
@@ -404,11 +403,10 @@ export function WorkspaceScreenView({
                 </div>
                 <Button
                   type="button"
-                  variant="outline"
-                  size="sm"
+                  variant="secondary"
+                  size="small"
                   disabled={retryingWorkspaces}
                   onClick={onRetryWorkspaces}
-                  className="gap-2"
                 >
                   <RotateCcw className={cn('size-3.5', retryingWorkspaces && 'animate-spin')} />
                   {t('common.retry', 'Retry')}
diff --git a/packages/components/src/components/organization-switcher.tsx b/packages/components/src/components/organization-switcher.tsx
index 86512bd94..6bcf6d048 100644
--- a/packages/components/src/components/organization-switcher.tsx
+++ b/packages/components/src/components/organization-switcher.tsx
@@ -13,8 +13,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
-import { Badge } from '@/ui/badge';
-import { Button } from '@/ui/button';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -23,8 +23,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/ui/dialog';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui';
 import { useNavigate } from '@tanstack/react-router';
 import { useIsMobile } from '@/hooks/use-mobile';
@@ -66,7 +66,7 @@ function LocalWorkspaceNameplate() {
     <div className="flex w-full items-center gap-3 px-3 py-2">
       <WorkspaceAvatar
         workspace={{ name: workspace.name, logo: resolveWorkspaceIdentityLogo(null, false) }}
-        className="h-8 w-8"
+        size="large"
       />
       <span className="truncate text-lg font-semibold">{workspace.name}</span>
     </div>
@@ -82,10 +82,7 @@ function CloudOrganizationSwitcher() {
   const isMobile = useIsMobile();
   // Paid workspaces only (free ones are omitted by the query); keyed by the
   // better-auth organization id, which is what billing uses as workspaceId.
-  const paidPlanTiers = useCloudQuery(
-    cloudOperations.billing.getMyPaidWorkspacePlanTiers,
-    {}
-  );
+  const paidPlanTiers = useCloudQuery(cloudOperations.billing.getMyPaidWorkspacePlanTiers, {});
   const planTierByWorkspaceId = useMemo(
     () => new Map((paidPlanTiers ?? []).map((entry) => [entry.workspaceId, entry.planTier])),
     [paidPlanTiers]
@@ -151,14 +148,14 @@ function CloudOrganizationSwitcher() {
       <div className="flex items-center gap-1 w-full">
         <DropdownMenu modal={!isMobile} open={open} onOpenChange={setOpen}>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="flex-1 justify-between px-3 py-2" disabled={loading}>
+            <Button variant="ghost" className="flex-1 justify-between" disabled={loading}>
               <div className="flex items-center gap-3">
                 <WorkspaceAvatar
                   workspace={{
                     name: activeOrganization.name,
                     logo: activeOrganization.logo,
                   }}
-                  className="h-8 w-8"
+                  size="large"
                 />
                 <div className="flex flex-col items-start">
                   <span className="text-lg font-semibold truncate max-w-[120px]">
@@ -208,11 +205,12 @@ function CloudOrganizationSwitcher() {
                   <div className="flex min-w-0 items-center gap-2">
                     <WorkspaceAvatar
                       workspace={{ name: org.name, logo: org.logo }}
-                      className="h-6 w-6 shrink-0 text-xs"
+                      size="medium"
+                      className="shrink-0"
                     />
                     <span className="truncate text-sm">{org.name}</span>
                     {planTierByWorkspaceId.has(org.id) ? (
-                      <Badge variant="secondary" className="shrink-0 px-1.5 py-0 text-[10px]">
+                      <Badge>
                         {planTierByWorkspaceId.get(org.id) === 'enterprise'
                           ? t('billing.plan.enterprise')
                           : t('billing.plan.plus')}
@@ -263,7 +261,7 @@ function CloudOrganizationSwitcher() {
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="name">{t('organization.workspaceName')}</Label>
+              <UiField.Label htmlFor="name">{t('organization.workspaceName')}</UiField.Label>
               <Input
                 id="name"
                 value={newOrgName}
@@ -278,7 +276,7 @@ function CloudOrganizationSwitcher() {
             </div>
             <div className="space-y-2">
               <div className="flex items-center justify-between">
-                <Label htmlFor="slug">{t('organization.workspaceSlug')}</Label>
+                <UiField.Label htmlFor="slug">{t('organization.workspaceSlug')}</UiField.Label>
                 {canResetNewOrgSlug && (
                   <button
                     type="button"
@@ -315,7 +313,7 @@ function CloudOrganizationSwitcher() {
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={creating}>
+            <Button variant="secondary" onClick={() => setDialogOpen(false)} disabled={creating}>
               {t('common.cancel')}
             </Button>
             <Button
diff --git a/packages/components/src/components/page-headers/base-header.tsx b/packages/components/src/components/page-headers/base-header.tsx
index 06f430b52..ccf61cb4b 100644
--- a/packages/components/src/components/page-headers/base-header.tsx
+++ b/packages/components/src/components/page-headers/base-header.tsx
@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import { Menu } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { useIsMobile } from '../../hooks/use-mobile';
 import { useSetAtom } from 'jotai';
 import { toggleMobileDrawerAtom } from '../../atoms';
@@ -50,7 +50,7 @@ export function BaseHeader({
       {isMobile && !hideMenuButton && (
         <Button
           variant="ghost"
-          size="icon"
+          icon
           className="mr-2 md:hidden"
           onClick={(e) => {
             // Remove focus to avoid aria-hidden warnings in some browsers.
diff --git a/packages/components/src/components/pages/accept-invitation-page.tsx b/packages/components/src/components/pages/accept-invitation-page.tsx
index c148f54cd..bd19418ef 100644
--- a/packages/components/src/components/pages/accept-invitation-page.tsx
+++ b/packages/components/src/components/pages/accept-invitation-page.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Loader2 } from 'lucide-react';
 
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 // Placeholder workspace avatar until per-workspace avatars are supported.
 import workspaceAvatarPlaceholder from '@/assets/icon-transparent.png';
@@ -105,7 +105,7 @@ export function AcceptInvitationPage({
                 )}
               </Description>
               {roleLabel ? <InvitationRole role={roleLabel} /> : null}
-              <Button onClick={onAccept} size="lg" className="mt-6 h-10 w-full">
+              <Button size="large" onClick={onAccept} className="mt-6 w-full">
                 {t('invite.idle.accept', 'Accept invitation')}
               </Button>
             </>
@@ -142,7 +142,7 @@ export function AcceptInvitationPage({
                   />
                 </p>
               ) : null}
-              <Button onClick={onContinue} size="lg" className="mt-6 h-10 w-full">
+              <Button size="large" onClick={onContinue} className="mt-6 w-full">
                 {t('invite.authRequired.continue', 'Continue with invited email')}
               </Button>
             </>
@@ -168,10 +168,10 @@ export function AcceptInvitationPage({
                 />
               </Description>
               {roleLabel ? <InvitationRole role={roleLabel} /> : null}
-              <Button onClick={onSwitchAccount} size="lg" className="mt-6 h-10 w-full">
+              <Button size="large" onClick={onSwitchAccount} className="mt-6 w-full">
                 {t('invite.accountMismatch.switch', 'Switch account')}
               </Button>
-              <Button onClick={onBackHome} variant="ghost" size="lg" className="mt-2 h-10 w-full">
+              <Button size="large" onClick={onBackHome} variant="ghost" className="mt-2 w-full">
                 {t('invite.error.backButton', 'Back to home')}
               </Button>
             </>
@@ -186,7 +186,7 @@ export function AcceptInvitationPage({
                   'For security, verify the email address named by this invitation before accepting it.'
                 )}
               </Description>
-              <Button onClick={onVerifyEmail} size="lg" className="mt-6 h-10 w-full">
+              <Button size="large" onClick={onVerifyEmail} className="mt-6 w-full">
                 {t('invite.verificationRequired.continue', 'Continue to verification')}
               </Button>
             </>
@@ -212,7 +212,7 @@ export function AcceptInvitationPage({
               <Description>
                 {errorMessage || t('invite.error.notFound', 'Invitation not found or expired.')}
               </Description>
-              <Button onClick={onBackHome} variant="outline" size="lg" className="mt-6 h-10 w-full">
+              <Button size="large" onClick={onBackHome} variant="secondary" className="mt-6 w-full">
                 {t('invite.error.backButton', 'Back to home')}
               </Button>
             </>
diff --git a/packages/components/src/components/pages/complete-email-page.tsx b/packages/components/src/components/pages/complete-email-page.tsx
index d6df6cca1..2fdf810a7 100644
--- a/packages/components/src/components/pages/complete-email-page.tsx
+++ b/packages/components/src/components/pages/complete-email-page.tsx
@@ -2,11 +2,11 @@ import type { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Loader2, Mail } from 'lucide-react';
 
-import { Alert, AlertDescription } from '@/ui/alert';
-import { Button } from '@/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/ui/card';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Alert } from '@lody/ui/alert';
+import { Button } from '@lody/ui/button';
+import { Card } from '@lody/ui/card';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 
 export interface CompleteEmailPageProps {
   userLabel: string;
@@ -33,87 +33,85 @@ export function CompleteEmailPage({
 
   return (
     <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-4">
-          <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
-            <div className="min-w-0 truncate">
-              {t('completeEmail.signedInAs', 'Signed in as')}: {userLabel}
-            </div>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={onSignOut}
-              disabled={signingOut || submitting}
-            >
-              {signingOut ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('completeEmail.loggingOut', 'Logging out')}
-                </>
-              ) : (
-                t('completeEmail.logout', 'Logout')
-              )}
-            </Button>
+      <Card.Root className="w-full max-w-md">
+        <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
+          <div className="min-w-0 truncate">
+            {t('completeEmail.signedInAs', 'Signed in as')}: {userLabel}
           </div>
-          <div className="space-y-1 text-center">
-            <div className="mb-4 flex justify-center">
-              <div className="rounded-full bg-primary/10 p-3">
-                <Mail className="h-6 w-6 text-primary" aria-hidden="true" />
-              </div>
-            </div>
-            <CardTitle id="complete-email-title" as="h1" className="text-2xl font-bold">
-              {t('completeEmail.title', 'Add your email')}
-            </CardTitle>
-            <CardDescription>
-              {t(
-                'completeEmail.description',
-                'Your OAuth provider did not share an email. Add one so we can finish setting up your account.'
-              )}
-            </CardDescription>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <form
-            onSubmit={onSubmit}
-            className="space-y-4"
-            aria-labelledby="complete-email-title"
-            aria-describedby={submitError ? 'complete-email-error' : undefined}
-            aria-busy={submitting || signingOut}
+          <Button
+            type="button"
+            variant="ghost"
+            size="small"
+            onClick={onSignOut}
+            disabled={signingOut || submitting}
           >
-            <div className="space-y-2">
-              <Label htmlFor="email">{t('completeEmail.emailLabel', 'Email address')}</Label>
-              <Input
-                id="email"
-                type="email"
-                autoComplete="email"
-                required
-                placeholder={t('completeEmail.emailPlaceholder', 'you@example.com')}
-                value={email}
-                onChange={(event) => onEmailChange(event.target.value)}
-                disabled={submitting || signingOut}
-              />
-            </div>
+            {signingOut ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t('completeEmail.loggingOut', 'Logging out')}
+              </>
+            ) : (
+              t('completeEmail.logout', 'Logout')
+            )}
+          </Button>
+        </div>
+        <div className="flex justify-center">
+          <div className="rounded-full bg-primary/10 p-3">
+            <Mail className="h-6 w-6 text-primary" aria-hidden="true" />
+          </div>
+        </div>
+        <Card.Header className="text-center">
+          <Card.Title id="complete-email-title" as="h1">
+            {t('completeEmail.title', 'Add your email')}
+          </Card.Title>
+          <Card.Description>
+            {t(
+              'completeEmail.description',
+              'Your OAuth provider did not share an email. Add one so we can finish setting up your account.'
+            )}
+          </Card.Description>
+        </Card.Header>
+        <form
+          onSubmit={onSubmit}
+          className="space-y-4"
+          aria-labelledby="complete-email-title"
+          aria-describedby={submitError ? 'complete-email-error' : undefined}
+          aria-busy={submitting || signingOut}
+        >
+          <div className="space-y-2">
+            <UiField.Label htmlFor="email">
+              {t('completeEmail.emailLabel', 'Email address')}
+            </UiField.Label>
+            <Input
+              id="email"
+              type="email"
+              autoComplete="email"
+              required
+              placeholder={t('completeEmail.emailPlaceholder', 'you@example.com')}
+              value={email}
+              onChange={(event) => onEmailChange(event.target.value)}
+              disabled={submitting || signingOut}
+            />
+          </div>
 
-            {submitError ? (
-              <Alert variant="destructive">
-                <AlertDescription id="complete-email-error">{submitError}</AlertDescription>
-              </Alert>
-            ) : null}
+          {submitError ? (
+            <Alert.Root tone="danger">
+              <Alert.Description id="complete-email-error">{submitError}</Alert.Description>
+            </Alert.Root>
+          ) : null}
 
-            <Button type="submit" className="w-full" disabled={submitting || signingOut}>
-              {submitting ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('completeEmail.saving', 'Saving email')}
-                </>
-              ) : (
-                t('completeEmail.save', 'Save and continue')
-              )}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+          <Button type="submit" className="w-full" disabled={submitting || signingOut}>
+            {submitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t('completeEmail.saving', 'Saving email')}
+              </>
+            ) : (
+              t('completeEmail.save', 'Save and continue')
+            )}
+          </Button>
+        </form>
+      </Card.Root>
     </div>
   );
 }
diff --git a/packages/components/src/components/pages/create-workspace-page.tsx b/packages/components/src/components/pages/create-workspace-page.tsx
index 323c5b7f6..766bbb4bb 100644
--- a/packages/components/src/components/pages/create-workspace-page.tsx
+++ b/packages/components/src/components/pages/create-workspace-page.tsx
@@ -2,10 +2,10 @@ import { useTranslation } from 'react-i18next';
 import { ArrowLeft, ArrowRight, Building2, CreditCard } from 'lucide-react';
 import { Loader2 } from 'lucide-react';
 
-import { Button } from '@/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/ui/card';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Card } from '@lody/ui/card';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import { PricingPageLink } from '../shared/pricing-page-link';
 import { SubscribeConsentNotice } from '../shared/subscribe-consent-notice';
 import { formatUsd } from '../settings/billing-setting-pure';
@@ -67,27 +67,27 @@ export function CreateWorkspacePage({
           <Button
             type="button"
             variant="ghost"
-            size="sm"
+            size="small"
             onClick={onBackToWorkspace}
             disabled={creating}
-            className="mb-3 -ml-2 gap-2 text-muted-foreground hover:text-foreground"
+            className="mb-3 -ml-2"
           >
             <ArrowLeft className="h-4 w-4" />
             {t('organization.backToPreviousWorkspace', 'Back to previous workspace')}
           </Button>
         ) : null}
 
-        <Card>
-          <CardHeader className="text-center">
-            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-              <Building2 className="h-6 w-6 text-primary" />
-            </div>
-            <CardTitle className="text-2xl">
+        <Card.Root>
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            <Building2 className="h-6 w-6 text-primary" />
+          </div>
+          <Card.Header className="text-center">
+            <Card.Title as="h1">
               {paidRequired
                 ? t('organization.createPlusWorkspaceTitle', 'Create a Plus workspace')
                 : t('organization.welcomeTitle', 'Welcome to Lody Agent')}
-            </CardTitle>
-            <CardDescription className="mt-2 whitespace-pre-line">
+            </Card.Title>
+            <Card.Description className="whitespace-pre-line">
               {paidRequired
                 ? t(
                     'organization.createPlusWorkspaceDescription',
@@ -97,169 +97,171 @@ export function CreateWorkspacePage({
                     'organization.welcomeDescription',
                     "Let's create your first workspace to get started"
                   )}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="workspace-name">{t('organization.workspaceName')}</Label>
-                <Input
-                  id="workspace-name"
-                  type="text"
-                  placeholder={t('organization.workspaceNamePlaceholder', 'My Workspace')}
-                  value={workspaceName}
-                  onChange={(event) => onWorkspaceNameChange(event.target.value)}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter' && !creating) {
-                      onSubmit();
-                    }
-                  }}
-                  disabled={creating}
-                  className={error ? 'border-destructive' : ''}
-                />
-                {error ? <p className="text-sm text-destructive">{error}</p> : null}
+            </Card.Description>
+          </Card.Header>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <UiField.Label htmlFor="workspace-name">
+                {t('organization.workspaceName')}
+              </UiField.Label>
+              <Input
+                id="workspace-name"
+                type="text"
+                placeholder={t('organization.workspaceNamePlaceholder', 'My Workspace')}
+                value={workspaceName}
+                onChange={(event) => onWorkspaceNameChange(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && !creating) {
+                    onSubmit();
+                  }
+                }}
+                disabled={creating}
+                className={error ? 'border-destructive' : ''}
+              />
+              {error ? <p className="text-sm text-destructive">{error}</p> : null}
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  'organization.workspaceNameHint',
+                  'You can change this name later in settings'
+                )}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <UiField.Label htmlFor="workspace-slug">
+                  {t('organization.workspaceSlug')}
+                </UiField.Label>
+                <div className="flex items-center gap-2">
+                  {canResetSlug ? (
+                    <button
+                      type="button"
+                      className="text-xs text-muted-foreground hover:text-foreground"
+                      onClick={onResetWorkspaceSlug}
+                      disabled={creating}
+                    >
+                      {t('organization.workspaceSlugReset')}
+                    </button>
+                  ) : null}
+                  {workspaceSlug && !slugErrorType ? (
+                    <span className="text-xs text-muted-foreground">
+                      {slugChecking
+                        ? t('organization.workspaceSlugChecking')
+                        : slugAvailable
+                          ? t('organization.workspaceSlugAvailable')
+                          : null}
+                    </span>
+                  ) : null}
+                </div>
+              </div>
+
+              <Input
+                id="workspace-slug"
+                type="text"
+                placeholder={t('organization.workspaceSlugPlaceholder', 'my-workspace')}
+                value={workspaceSlug}
+                onChange={(event) => onWorkspaceSlugChange(event.target.value)}
+                disabled={creating}
+                className={slugErrorType ? 'border-destructive' : ''}
+              />
+              {slugErrorType ? (
+                <p className="text-xs text-destructive">
+                  {t(`organization.workspaceSlugError.${slugErrorType}`)}
+                </p>
+              ) : null}
+            </div>
+
+            {paidRequired ? (
+              <div className="space-y-2 border-t border-border/60 pt-4">
+                <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                  <CreditCard className="h-4 w-4" />
+                  {t('organization.plusBillingInterval', 'Billing interval')}
+                </div>
+                <div className="grid grid-cols-2 rounded-lg border border-border bg-muted/40 p-0.5">
+                  {(['year', 'month'] as const).map((value) => (
+                    <button
+                      key={value}
+                      type="button"
+                      onClick={() => onBillingIntervalChange?.(value)}
+                      disabled={creating}
+                      className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                        billingInterval === value
+                          ? 'bg-background text-foreground shadow-xs'
+                          : 'text-muted-foreground hover:text-foreground'
+                      }`}
+                    >
+                      {value === 'year'
+                        ? t('billing.yearly', 'Yearly')
+                        : t('billing.monthly', 'Monthly')}
+                      {pricing ? (
+                        <span className="mt-0.5 block text-xs font-normal text-muted-foreground">
+                          {t('organization.plusPricePerSeatMonth', {
+                            price: formatUsd(
+                              value === 'year'
+                                ? Math.round(pricing.yearlyAmountCents / 12)
+                                : pricing.monthlyAmountCents
+                            ),
+                          })}
+                          {value === 'year' ? (
+                            <>
+                              {' · '}
+                              {t('organization.plusPriceBilledYearly')}
+                            </>
+                          ) : null}
+                        </span>
+                      ) : null}
+                    </button>
+                  ))}
+                </div>
                 <p className="text-xs text-muted-foreground">
                   {t(
-                    'organization.workspaceNameHint',
-                    'You can change this name later in settings'
+                    'organization.plusBillingHelp',
+                    'Plus is billed per accepted workspace member. Stripe shows the final total before payment.'
                   )}
                 </p>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="workspace-slug">{t('organization.workspaceSlug')}</Label>
-                  <div className="flex items-center gap-2">
-                    {canResetSlug ? (
-                      <button
-                        type="button"
-                        className="text-xs text-muted-foreground hover:text-foreground"
-                        onClick={onResetWorkspaceSlug}
-                        disabled={creating}
-                      >
-                        {t('organization.workspaceSlugReset')}
-                      </button>
-                    ) : null}
-                    {workspaceSlug && !slugErrorType ? (
-                      <span className="text-xs text-muted-foreground">
-                        {slugChecking
-                          ? t('organization.workspaceSlugChecking')
-                          : slugAvailable
-                            ? t('organization.workspaceSlugAvailable')
-                            : null}
-                      </span>
-                    ) : null}
-                  </div>
-                </div>
-
-                <Input
-                  id="workspace-slug"
-                  type="text"
-                  placeholder={t('organization.workspaceSlugPlaceholder', 'my-workspace')}
-                  value={workspaceSlug}
-                  onChange={(event) => onWorkspaceSlugChange(event.target.value)}
-                  disabled={creating}
-                  className={slugErrorType ? 'border-destructive' : ''}
-                />
-                {slugErrorType ? (
-                  <p className="text-xs text-destructive">
-                    {t(`organization.workspaceSlugError.${slugErrorType}`)}
+                {yearlyEarlyBirdSelected ? (
+                  <p className="text-xs font-medium text-foreground">
+                    {t('billing.yearlyEarlyBirdCheckoutPromise')}
                   </p>
                 ) : null}
+                <PricingPageLink />
               </div>
+            ) : null}
 
-              {paidRequired ? (
-                <div className="space-y-2 border-t border-border/60 pt-4">
-                  <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-                    <CreditCard className="h-4 w-4" />
-                    {t('organization.plusBillingInterval', 'Billing interval')}
-                  </div>
-                  <div className="grid grid-cols-2 rounded-lg border border-border bg-muted/40 p-0.5">
-                    {(['year', 'month'] as const).map((value) => (
-                      <button
-                        key={value}
-                        type="button"
-                        onClick={() => onBillingIntervalChange?.(value)}
-                        disabled={creating}
-                        className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
-                          billingInterval === value
-                            ? 'bg-background text-foreground shadow-xs'
-                            : 'text-muted-foreground hover:text-foreground'
-                        }`}
-                      >
-                        {value === 'year'
-                          ? t('billing.yearly', 'Yearly')
-                          : t('billing.monthly', 'Monthly')}
-                        {pricing ? (
-                          <span className="mt-0.5 block text-xs font-normal text-muted-foreground">
-                            {t('organization.plusPricePerSeatMonth', {
-                              price: formatUsd(
-                                value === 'year'
-                                  ? Math.round(pricing.yearlyAmountCents / 12)
-                                  : pricing.monthlyAmountCents
-                              ),
-                            })}
-                            {value === 'year' ? (
-                              <>
-                                {' · '}
-                                {t('organization.plusPriceBilledYearly')}
-                              </>
-                            ) : null}
-                          </span>
-                        ) : null}
-                      </button>
-                    ))}
-                  </div>
-                  <p className="text-xs text-muted-foreground">
-                    {t(
-                      'organization.plusBillingHelp',
-                      'Plus is billed per accepted workspace member. Stripe shows the final total before payment.'
-                    )}
-                  </p>
-                  {yearlyEarlyBirdSelected ? (
-                    <p className="text-xs font-medium text-foreground">
-                      {t('billing.yearlyEarlyBirdCheckoutPromise')}
-                    </p>
-                  ) : null}
-                  <PricingPageLink />
-                </div>
-              ) : null}
+            <Button
+              size="large"
+              onClick={onSubmit}
+              disabled={
+                creating ||
+                !workspaceName.trim() ||
+                slugChecking ||
+                Boolean(slugErrorType) ||
+                !slugAvailable
+              }
+              className="w-full"
+            >
+              {creating ? (
+                <span className="flex items-center">
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  {paidRequired
+                    ? t('billing.startingCheckout', 'Starting checkout...')
+                    : t('common.creating')}
+                </span>
+              ) : (
+                <span className="flex items-center">
+                  {paidRequired
+                    ? yearlyEarlyBirdSelected
+                      ? t('billing.upgradeEarlyBird')
+                      : t('organization.continueToCheckout', 'Continue to checkout')
+                    : t('organization.createWorkspace', 'Create Workspace')}
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </span>
+              )}
+            </Button>
 
-              <Button
-                onClick={onSubmit}
-                disabled={
-                  creating ||
-                  !workspaceName.trim() ||
-                  slugChecking ||
-                  Boolean(slugErrorType) ||
-                  !slugAvailable
-                }
-                className="w-full"
-                size="lg"
-              >
-                {creating ? (
-                  <span className="flex items-center">
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    {paidRequired
-                      ? t('billing.startingCheckout', 'Starting checkout...')
-                      : t('common.creating')}
-                  </span>
-                ) : (
-                  <span className="flex items-center">
-                    {paidRequired
-                      ? yearlyEarlyBirdSelected
-                        ? t('billing.upgradeEarlyBird')
-                        : t('organization.continueToCheckout', 'Continue to checkout')
-                      : t('organization.createWorkspace', 'Create Workspace')}
-                    <ArrowRight className="ml-2 h-4 w-4" />
-                  </span>
-                )}
-              </Button>
-
-              {paidRequired ? <SubscribeConsentNotice className="text-center" /> : null}
-            </div>
-          </CardContent>
-        </Card>
+            {paidRequired ? <SubscribeConsentNotice className="text-center" /> : null}
+          </div>
+        </Card.Root>
       </div>
     </div>
   );
diff --git a/packages/components/src/components/pages/desktop-checkout-return-page.tsx b/packages/components/src/components/pages/desktop-checkout-return-page.tsx
index ada2bafce..a63c58082 100644
--- a/packages/components/src/components/pages/desktop-checkout-return-page.tsx
+++ b/packages/components/src/components/pages/desktop-checkout-return-page.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '@/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/ui/card';
+import { Button } from '@lody/ui/button';
+import { Card } from '@lody/ui/card';
 import lodyLogo from '@/assets/lody-icon.png';
 
 export interface DesktopCheckoutReturnPageProps {
@@ -35,22 +35,23 @@ export function DesktopCheckoutReturnPage({
 
   return (
     <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md rounded-2xl border-border/60">
-        <CardHeader className="items-center gap-6 px-8 pt-10 pb-4 text-center">
-          <span className="flex h-16 w-16 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10">
-            <img src={lodyLogo} alt="Lody" className="h-11 w-11 object-contain" draggable={false} />
-          </span>
-          <div className="flex flex-col items-center gap-2">
-            <CardTitle className="text-xl font-semibold tracking-tight">{title}</CardTitle>
-            <p className="text-sm text-muted-foreground">{subtitle}</p>
-          </div>
-        </CardHeader>
-        <CardContent className="px-8 pb-9">
-          <Button asChild={!!deepLink} className="h-11 w-full text-[0.9375rem]" disabled={!deepLink}>
-            {deepLink ? <a href={deepLink}>{openLabel}</a> : <span>{openLabel}</span>}
-          </Button>
-        </CardContent>
-      </Card>
+      <Card.Root className="w-full max-w-md">
+        <span className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
+          <img src={lodyLogo} alt="Lody" className="h-11 w-11 object-contain" draggable={false} />
+        </span>
+        <Card.Header className="text-center">
+          <Card.Title as="h1">{title}</Card.Title>
+          <Card.Description>{subtitle}</Card.Description>
+        </Card.Header>
+        <Button
+          render={deepLink ? <a href={deepLink} /> : undefined}
+          size="large"
+          className="w-full"
+          disabled={!deepLink}
+        >
+          {openLabel}
+        </Button>
+      </Card.Root>
     </div>
   );
 }
diff --git a/packages/components/src/components/pages/desktop-github-install-page.tsx b/packages/components/src/components/pages/desktop-github-install-page.tsx
index 922641e42..c49cafd5c 100644
--- a/packages/components/src/components/pages/desktop-github-install-page.tsx
+++ b/packages/components/src/components/pages/desktop-github-install-page.tsx
@@ -2,8 +2,9 @@ import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 import { Github, Loader2 } from 'lucide-react';
 
-import { Button } from '@/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/ui/card';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
+import { Card } from '@lody/ui/card';
 import lodyLogo from '@/assets/lody-icon.png';
 
 export interface DesktopGithubInstallPageProps {
@@ -22,35 +23,26 @@ export function DesktopGithubInstallPage({ deepLink }: DesktopGithubInstallPageP
         transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
         className="w-full max-w-md"
       >
-        <Card className="relative overflow-hidden rounded-2xl border-border/60 shadow-[0_20px_60px_-30px_rgba(0,0,0,0.25)]">
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-12 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"
-          />
-          <CardHeader className="items-center gap-8 px-8 pt-11 pb-6 text-center">
-            <HandoffVisual />
-            <div className="flex flex-col items-center gap-3.5">
-              <CardTitle className="text-2xl font-semibold tracking-tight">
-                {t('desktopGithubInstall.title', 'Continue in Lody Desktop')}
-              </CardTitle>
-              <span className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground">
-                <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
-                {t('desktopGithubInstall.opening', 'Opening Lody Desktop…')}
-              </span>
-            </div>
-          </CardHeader>
-          <CardContent className="px-8 pb-9">
-            {deepLink ? (
-              <Button asChild className="h-11 w-full text-[0.9375rem]">
-                <a href={deepLink}>{openLabel}</a>
-              </Button>
-            ) : (
-              <Button className="h-11 w-full text-[0.9375rem]" disabled>
-                {openLabel}
-              </Button>
-            )}
-          </CardContent>
-        </Card>
+        <Card.Root>
+          <HandoffVisual />
+          <Card.Header className="items-center text-center">
+            <Card.Title as="h1">
+              {t('desktopGithubInstall.title', 'Continue in Lody Desktop')}
+            </Card.Title>
+            <Badge tone="running" icon={<Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />}>
+              {t('desktopGithubInstall.opening', 'Opening Lody Desktop…')}
+            </Badge>
+          </Card.Header>
+          {deepLink ? (
+            <Button render={<a href={deepLink} />} size="large" className="w-full">
+              {openLabel}
+            </Button>
+          ) : (
+            <Button size="large" className="w-full" disabled>
+              {openLabel}
+            </Button>
+          )}
+        </Card.Root>
       </motion.div>
     </div>
   );
diff --git a/packages/components/src/components/pages/device-auth-page.tsx b/packages/components/src/components/pages/device-auth-page.tsx
index e696ca3d0..c069a3b26 100644
--- a/packages/components/src/components/pages/device-auth-page.tsx
+++ b/packages/components/src/components/pages/device-auth-page.tsx
@@ -1,11 +1,11 @@
 import type { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AlertCircle, CheckCircle2, Loader2 } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 
-import { Alert, AlertDescription } from '@/ui/alert';
-import { Button } from '@/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/ui/card';
-import { Input } from '@/ui/input';
+import { Alert } from '@lody/ui/alert';
+import { Button } from '@lody/ui/button';
+import { Card } from '@lody/ui/card';
+import { Input } from '@lody/ui/input';
 
 export interface DeviceAuthPageProps {
   userLabel: string;
@@ -34,23 +34,20 @@ export function DeviceAuthPage({
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="text-center">
-          <CardTitle id="device-auth-title" as="h1" className="text-2xl">
+      <Card.Root className="w-full max-w-md">
+        <Card.Header className="text-center">
+          <Card.Title id="device-auth-title" as="h1">
             {t('device.title')}
-          </CardTitle>
-          <CardDescription>{t('device.description')}</CardDescription>
-        </CardHeader>
+          </Card.Title>
+          <Card.Description>{t('device.description')}</Card.Description>
+        </Card.Header>
 
-        <CardContent>
+        <div>
           {success ? (
             <div className="space-y-4">
-              <Alert className="border-status-success/30 bg-status-success/[0.08] text-status-success">
-                <CheckCircle2 className="h-4 w-4 text-status-success" aria-hidden="true" />
-                <AlertDescription className="text-status-success">
-                  {t('device.success')}
-                </AlertDescription>
-              </Alert>
+              <Alert.Root tone="success">
+                <Alert.Description>{t('device.success')}</Alert.Description>
+              </Alert.Root>
 
               <div className="text-center text-sm text-muted-foreground">
                 {t('device.windowHint')}
@@ -92,10 +89,9 @@ export function DeviceAuthPage({
                 </div>
 
                 {error ? (
-                  <Alert variant="destructive">
-                    <AlertCircle className="h-4 w-4" aria-hidden="true" />
-                    <AlertDescription id="device-auth-error">{error}</AlertDescription>
-                  </Alert>
+                  <Alert.Root tone="danger">
+                    <Alert.Description id="device-auth-error">{error}</Alert.Description>
+                  </Alert.Root>
                 ) : null}
 
                 <Button type="submit" className="w-full" disabled={!canSubmit || isVerifying}>
@@ -111,8 +107,8 @@ export function DeviceAuthPage({
               </form>
             </>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </Card.Root>
     </div>
   );
 }
diff --git a/packages/components/src/components/pages/email-verified-page.tsx b/packages/components/src/components/pages/email-verified-page.tsx
index 142a0311d..5147019f9 100644
--- a/packages/components/src/components/pages/email-verified-page.tsx
+++ b/packages/components/src/components/pages/email-verified-page.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '@/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/ui/card';
+import { Button } from '@lody/ui/button';
+import { Card } from '@lody/ui/card';
 import lodyLogo from '@/assets/lody-icon.png';
 
 export interface EmailVerifiedPageProps {
@@ -18,35 +18,27 @@ export function EmailVerifiedPage({ email, secondsRemaining, onContinue }: Email
 
   return (
     <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-4">
-          <div className="flex justify-center">
-            <img src={lodyLogo} alt="Lody" className="h-10 w-10 object-contain" draggable={false} />
-          </div>
-          <div className="space-y-2 text-center">
-            <CardTitle className="text-2xl font-bold">
-              {t('emailVerified.title', 'Email verified')}
-            </CardTitle>
-            {email ? (
-              <p className="break-all text-sm font-medium text-foreground">{email}</p>
-            ) : null}
-            <CardDescription>
-              {t('emailVerified.signInPrompt', 'You can now sign in.')}
-            </CardDescription>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <p className="text-center text-sm text-muted-foreground">
-            {t('emailVerified.redirectNotice', {
-              seconds: secondsRemaining,
-              defaultValue: 'Redirecting to sign in in {{seconds}}s…',
-            })}
-          </p>
-          <Button type="button" className="w-full" onClick={onContinue}>
-            {t('emailVerified.continueNow', 'Sign in now')}
-          </Button>
-        </CardContent>
-      </Card>
+      <Card.Root className="w-full max-w-md">
+        <div className="flex justify-center">
+          <img src={lodyLogo} alt="Lody" className="h-10 w-10 object-contain" draggable={false} />
+        </div>
+        <Card.Header className="text-center">
+          <Card.Title as="h1">{t('emailVerified.title', 'Email verified')}</Card.Title>
+          {email ? <p className="break-all text-sm font-medium text-foreground">{email}</p> : null}
+          <Card.Description>
+            {t('emailVerified.signInPrompt', 'You can now sign in.')}
+          </Card.Description>
+        </Card.Header>
+        <p className="text-center text-sm text-muted-foreground">
+          {t('emailVerified.redirectNotice', {
+            seconds: secondsRemaining,
+            defaultValue: 'Redirecting to sign in in {{seconds}}s…',
+          })}
+        </p>
+        <Button type="button" className="w-full" onClick={onContinue}>
+          {t('emailVerified.continueNow', 'Sign in now')}
+        </Button>
+      </Card.Root>
     </div>
   );
 }
diff --git a/packages/components/src/components/pages/forgot-password-page.tsx b/packages/components/src/components/pages/forgot-password-page.tsx
index 2c4095ba5..c0dfffbaf 100644
--- a/packages/components/src/components/pages/forgot-password-page.tsx
+++ b/packages/components/src/components/pages/forgot-password-page.tsx
@@ -1,12 +1,12 @@
 import type { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CheckCircle2, Loader2, Mail } from 'lucide-react';
+import { Loader2, Mail } from 'lucide-react';
 
-import { Alert, AlertDescription } from '@/ui/alert';
-import { Button } from '@/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/ui/card';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Alert } from '@lody/ui/alert';
+import { Button } from '@lody/ui/button';
+import { Card } from '@lody/ui/card';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 
 export interface ForgotPasswordPageProps {
   email: string;
@@ -31,88 +31,79 @@ export function ForgotPasswordPage({
 
   return (
     <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-4 text-center">
-          <div className="flex justify-center">
-            <div className="rounded-full bg-primary/10 p-3">
-              <Mail className="h-6 w-6 text-primary" aria-hidden="true" />
-            </div>
+      <Card.Root className="w-full max-w-md">
+        <div className="flex justify-center">
+          <div className="rounded-full bg-primary/10 p-3">
+            <Mail className="h-6 w-6 text-primary" aria-hidden="true" />
           </div>
-          <div className="space-y-1">
-            <CardTitle
-              id="forgot-password-title"
-              as="h1"
-              className="text-2xl font-semibold tracking-tight"
-            >
-              {t('forgotPassword.title', 'Reset your password')}
-            </CardTitle>
-            <CardDescription>
-              {t(
-                'forgotPassword.description',
-                'Enter your account email and we will send you a password reset link.'
-              )}
-            </CardDescription>
+        </div>
+        <Card.Header className="text-center">
+          <Card.Title id="forgot-password-title" as="h1">
+            {t('forgotPassword.title', 'Reset your password')}
+          </Card.Title>
+          <Card.Description>
+            {t(
+              'forgotPassword.description',
+              'Enter your account email and we will send you a password reset link.'
+            )}
+          </Card.Description>
+        </Card.Header>
+        <form
+          onSubmit={onSubmit}
+          className="grid gap-4"
+          aria-labelledby="forgot-password-title"
+          aria-describedby={submitError ? 'forgot-password-error' : undefined}
+          aria-busy={submitting}
+        >
+          <div className="grid gap-2">
+            <UiField.Label htmlFor="forgot-password-email">
+              {t('forgotPassword.emailLabel', 'Email address')}
+            </UiField.Label>
+            <Input
+              id="forgot-password-email"
+              type="email"
+              autoComplete="email"
+              required
+              placeholder={t('forgotPassword.emailPlaceholder', 'you@example.com')}
+              value={email}
+              onChange={(event) => onEmailChange(event.target.value)}
+              disabled={submitting}
+            />
           </div>
-        </CardHeader>
-        <CardContent>
-          <form
-            onSubmit={onSubmit}
-            className="grid gap-4"
-            aria-labelledby="forgot-password-title"
-            aria-describedby={submitError ? 'forgot-password-error' : undefined}
-            aria-busy={submitting}
-          >
-            <div className="grid gap-2">
-              <Label htmlFor="forgot-password-email">
-                {t('forgotPassword.emailLabel', 'Email address')}
-              </Label>
-              <Input
-                id="forgot-password-email"
-                type="email"
-                autoComplete="email"
-                required
-                placeholder={t('forgotPassword.emailPlaceholder', 'you@example.com')}
-                value={email}
-                onChange={(event) => onEmailChange(event.target.value)}
-                disabled={submitting}
-              />
-            </div>
 
-            {sent ? (
-              <Alert>
-                <CheckCircle2 className="h-4 w-4" aria-hidden="true" />
-                <AlertDescription>
-                  {t(
-                    'forgotPassword.sent',
-                    'If an account exists for this email, a reset link has been sent.'
-                  )}
-                </AlertDescription>
-              </Alert>
-            ) : null}
+          {sent ? (
+            <Alert.Root tone="success">
+              <Alert.Description>
+                {t(
+                  'forgotPassword.sent',
+                  'If an account exists for this email, a reset link has been sent.'
+                )}
+              </Alert.Description>
+            </Alert.Root>
+          ) : null}
 
-            {submitError !== null && submitError.length > 0 ? (
-              <Alert variant="destructive">
-                <AlertDescription id="forgot-password-error">{submitError}</AlertDescription>
-              </Alert>
-            ) : null}
+          {submitError !== null && submitError.length > 0 ? (
+            <Alert.Root tone="danger">
+              <Alert.Description id="forgot-password-error">{submitError}</Alert.Description>
+            </Alert.Root>
+          ) : null}
 
-            <Button type="submit" className="w-full" disabled={submitting}>
-              {submitting ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('forgotPassword.sending', 'Sending reset link...')}
-                </>
-              ) : (
-                t('forgotPassword.submit', 'Send reset link')
-              )}
-            </Button>
+          <Button type="submit" className="w-full" disabled={submitting}>
+            {submitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t('forgotPassword.sending', 'Sending reset link...')}
+              </>
+            ) : (
+              t('forgotPassword.submit', 'Send reset link')
+            )}
+          </Button>
 
-            <Button type="button" variant="ghost" onClick={onBackToLogin} disabled={submitting}>
-              {t('forgotPassword.backToLogin', 'Back to login')}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+          <Button type="button" variant="ghost" onClick={onBackToLogin} disabled={submitting}>
+            {t('forgotPassword.backToLogin', 'Back to login')}
+          </Button>
+        </form>
+      </Card.Root>
     </div>
   );
 }
diff --git a/packages/components/src/components/pages/reset-password-page.tsx b/packages/components/src/components/pages/reset-password-page.tsx
index 4281f83fa..a5e5b7d69 100644
--- a/packages/components/src/components/pages/reset-password-page.tsx
+++ b/packages/components/src/components/pages/reset-password-page.tsx
@@ -1,11 +1,11 @@
 import type { FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CheckCircle2, KeyRound, Loader2 } from 'lucide-react';
+import { KeyRound, Loader2 } from 'lucide-react';
 
-import { Alert, AlertDescription } from '@/ui/alert';
-import { Button } from '@/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/ui/card';
-import { Label } from '@/ui/label';
+import { Alert } from '@lody/ui/alert';
+import { Button } from '@lody/ui/button';
+import { Card } from '@lody/ui/card';
+import { Field as UiField } from '@lody/ui/field';
 import { PasswordInput } from '@/ui/password-input';
 
 export interface ResetPasswordPageProps {
@@ -37,120 +37,111 @@ export function ResetPasswordPage({
 
   return (
     <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-4 text-center">
-          <div className="flex justify-center">
-            <div className="rounded-full bg-primary/10 p-3">
-              <KeyRound className="h-6 w-6 text-primary" aria-hidden="true" />
-            </div>
+      <Card.Root className="w-full max-w-md">
+        <div className="flex justify-center">
+          <div className="rounded-full bg-primary/10 p-3">
+            <KeyRound className="h-6 w-6 text-primary" aria-hidden="true" />
           </div>
-          <div className="space-y-1">
-            <CardTitle
-              id="reset-password-title"
-              as="h1"
-              className="text-2xl font-semibold tracking-tight"
-            >
-              {t('resetPassword.title', 'Choose a new password')}
-            </CardTitle>
-            <CardDescription>
-              {t(
-                'resetPassword.description',
-                'Use at least 8 characters. You can sign in after resetting your password.'
-              )}
-            </CardDescription>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <form
-            onSubmit={onSubmit}
-            className="grid gap-4"
-            aria-labelledby="reset-password-title"
-            aria-describedby={submitError ? 'reset-password-error' : undefined}
-            aria-busy={submitting}
-          >
-            {!tokenAvailable ? (
-              <Alert variant="destructive">
-                <AlertDescription>
-                  {t(
-                    'resetPassword.missingToken',
-                    'This reset link is missing a token. Request a new password reset email.'
-                  )}
-                </AlertDescription>
-              </Alert>
-            ) : null}
-
-            {success ? (
-              <Alert>
-                <CheckCircle2 className="h-4 w-4" aria-hidden="true" />
-                <AlertDescription>
-                  {t('resetPassword.success', 'Password reset. You can now sign in.')}
-                </AlertDescription>
-              </Alert>
-            ) : null}
-
-            <div className="grid gap-2">
-              <Label htmlFor="reset-password-new">
-                {t('resetPassword.passwordLabel', 'New password')}
-              </Label>
-              <PasswordInput
-                id="reset-password-new"
-                autoComplete="new-password"
-                required
-                value={password}
-                onChange={(event) => onPasswordChange(event.target.value)}
-                disabled={submitting || success || !tokenAvailable}
-                placeholder={t(
-                  'resetPassword.passwordPlaceholder',
-                  'Letters and numbers, 8+ characters'
+        </div>
+        <Card.Header className="text-center">
+          <Card.Title id="reset-password-title" as="h1">
+            {t('resetPassword.title', 'Choose a new password')}
+          </Card.Title>
+          <Card.Description>
+            {t(
+              'resetPassword.description',
+              'Use at least 8 characters. You can sign in after resetting your password.'
+            )}
+          </Card.Description>
+        </Card.Header>
+        <form
+          onSubmit={onSubmit}
+          className="grid gap-4"
+          aria-labelledby="reset-password-title"
+          aria-describedby={submitError ? 'reset-password-error' : undefined}
+          aria-busy={submitting}
+        >
+          {!tokenAvailable ? (
+            <Alert.Root tone="danger">
+              <Alert.Description>
+                {t(
+                  'resetPassword.missingToken',
+                  'This reset link is missing a token. Request a new password reset email.'
                 )}
-                showPasswordLabel={t('resetPassword.showPassword', 'Show password')}
-                hidePasswordLabel={t('resetPassword.hidePassword', 'Hide password')}
-              />
-            </div>
-
-            <div className="grid gap-2">
-              <Label htmlFor="reset-password-confirm">
-                {t('resetPassword.confirmPasswordLabel', 'Confirm password')}
-              </Label>
-              <PasswordInput
-                id="reset-password-confirm"
-                autoComplete="new-password"
-                required
-                value={confirmPassword}
-                onChange={(event) => onConfirmPasswordChange(event.target.value)}
-                disabled={submitting || success || !tokenAvailable}
-                showPasswordLabel={t('resetPassword.showPassword', 'Show password')}
-                hidePasswordLabel={t('resetPassword.hidePassword', 'Hide password')}
-              />
-            </div>
+              </Alert.Description>
+            </Alert.Root>
+          ) : null}
 
-            {submitError !== null && submitError.length > 0 ? (
-              <Alert variant="destructive">
-                <AlertDescription id="reset-password-error">{submitError}</AlertDescription>
-              </Alert>
-            ) : null}
+          {success ? (
+            <Alert.Root tone="success">
+              <Alert.Description>
+                {t('resetPassword.success', 'Password reset. You can now sign in.')}
+              </Alert.Description>
+            </Alert.Root>
+          ) : null}
 
-            <Button
-              type="submit"
-              className="w-full"
+          <div className="grid gap-2">
+            <UiField.Label htmlFor="reset-password-new">
+              {t('resetPassword.passwordLabel', 'New password')}
+            </UiField.Label>
+            <PasswordInput
+              id="reset-password-new"
+              autoComplete="new-password"
+              required
+              value={password}
+              onChange={(event) => onPasswordChange(event.target.value)}
               disabled={submitting || success || !tokenAvailable}
-            >
-              {submitting ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('resetPassword.saving', 'Saving password...')}
-                </>
-              ) : (
-                t('resetPassword.submit', 'Reset password')
+              placeholder={t(
+                'resetPassword.passwordPlaceholder',
+                'Letters and numbers, 8+ characters'
               )}
-            </Button>
+              showPasswordLabel={t('resetPassword.showPassword', 'Show password')}
+              hidePasswordLabel={t('resetPassword.hidePassword', 'Hide password')}
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <UiField.Label htmlFor="reset-password-confirm">
+              {t('resetPassword.confirmPasswordLabel', 'Confirm password')}
+            </UiField.Label>
+            <PasswordInput
+              id="reset-password-confirm"
+              autoComplete="new-password"
+              required
+              value={confirmPassword}
+              onChange={(event) => onConfirmPasswordChange(event.target.value)}
+              disabled={submitting || success || !tokenAvailable}
+              showPasswordLabel={t('resetPassword.showPassword', 'Show password')}
+              hidePasswordLabel={t('resetPassword.hidePassword', 'Hide password')}
+            />
+          </div>
+
+          {submitError !== null && submitError.length > 0 ? (
+            <Alert.Root tone="danger">
+              <Alert.Description id="reset-password-error">{submitError}</Alert.Description>
+            </Alert.Root>
+          ) : null}
+
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={submitting || success || !tokenAvailable}
+          >
+            {submitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {t('resetPassword.saving', 'Saving password...')}
+              </>
+            ) : (
+              t('resetPassword.submit', 'Reset password')
+            )}
+          </Button>
 
-            <Button type="button" variant="ghost" onClick={onBackToLogin} disabled={submitting}>
-              {t('resetPassword.backToLogin', 'Back to login')}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+          <Button type="button" variant="ghost" onClick={onBackToLogin} disabled={submitting}>
+            {t('resetPassword.backToLogin', 'Back to login')}
+          </Button>
+        </form>
+      </Card.Root>
     </div>
   );
 }
diff --git a/packages/components/src/components/pages/workspace-join-request-page.tsx b/packages/components/src/components/pages/workspace-join-request-page.tsx
index a9eb0b38c..c73fffc6b 100644
--- a/packages/components/src/components/pages/workspace-join-request-page.tsx
+++ b/packages/components/src/components/pages/workspace-join-request-page.tsx
@@ -1,7 +1,7 @@
 import { Loader2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 import workspaceAvatarPlaceholder from '@/assets/icon-transparent.png';
 
 export type WorkspaceJoinPageState =
@@ -86,7 +86,7 @@ export function WorkspaceJoinRequestPage({
                   'Sign in or create an account to request access. You can use any verified email.'
                 )}
               </Message>
-              <Button className="mt-6 h-10 w-full" onClick={onContinue}>
+              <Button size="large" className="mt-6 w-full" onClick={onContinue}>
                 {t('joinRequest.continue', 'Continue')}
               </Button>
             </>
@@ -98,7 +98,7 @@ export function WorkspaceJoinRequestPage({
                   email: currentEmail || '',
                 })}
               </Message>
-              <Button className="mt-6 h-10 w-full" onClick={onVerifyEmail}>
+              <Button size="large" className="mt-6 w-full" onClick={onVerifyEmail}>
                 {t('joinRequest.verifyAction', 'Verify email')}
               </Button>
             </>
@@ -134,7 +134,8 @@ export function WorkspaceJoinRequestPage({
                 })}
               </p>
               <Button
-                className="mt-5 h-10 w-full"
+                size="large"
+                className="mt-5 w-full"
                 disabled={!reason.trim() || state === 'submitting'}
                 onClick={onSubmit}
               >
@@ -156,7 +157,7 @@ export function WorkspaceJoinRequestPage({
                   ? t('joinRequest.approved', 'Your request was approved.')
                   : t('joinRequest.alreadyMember', 'You are already a member of this workspace.')}
               </Message>
-              <Button className="mt-6 h-10 w-full" onClick={onOpenWorkspace}>
+              <Button size="large" className="mt-6 w-full" onClick={onOpenWorkspace}>
                 {t('joinRequest.openWorkspace', 'Open workspace')}
               </Button>
             </>
diff --git a/packages/components/src/components/preview/visual-annotation-draft-composer.tsx b/packages/components/src/components/preview/visual-annotation-draft-composer.tsx
index b9cc30f49..d9f971f99 100644
--- a/packages/components/src/components/preview/visual-annotation-draft-composer.tsx
+++ b/packages/components/src/components/preview/visual-annotation-draft-composer.tsx
@@ -3,8 +3,8 @@ import { Loader2, Send, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 
 export type VisualAnnotationDraftComposerProps = {
   targetLabel: string;
@@ -50,8 +50,9 @@ export function VisualAnnotationDraftComposer({
         <Button
           type="button"
           variant="ghost"
-          size="icon"
-          className="h-6 w-6 shrink-0"
+          size="mini"
+          icon
+          className="shrink-0"
           aria-label={t('common.cancel', 'Cancel')}
           onClick={onCancel}
         >
@@ -66,7 +67,12 @@ export function VisualAnnotationDraftComposer({
         autoFocus={autoFocus}
       />
       <div className="mt-2 flex justify-end">
-        <Button type="button" size="sm" disabled={!value.trim() || submitting} onClick={onSubmit}>
+        <Button
+          type="button"
+          size="small"
+          disabled={!value.trim() || submitting}
+          onClick={onSubmit}
+        >
           {submitting ? (
             <Loader2 className="h-3.5 w-3.5 animate-spin" />
           ) : (
diff --git a/packages/components/src/components/sessions/ask-user-question-card.tsx b/packages/components/src/components/sessions/ask-user-question-card.tsx
index bb473cf17..95a7ffc2e 100644
--- a/packages/components/src/components/sessions/ask-user-question-card.tsx
+++ b/packages/components/src/components/sessions/ask-user-question-card.tsx
@@ -20,7 +20,7 @@ import {
   getServerNow,
 } from '@lody/shared';
 
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/ui/dialog';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { cn } from '@/lib/utils';
@@ -494,12 +494,13 @@ export function AskUserQuestionCard({ meta, mode, className }: AskUserQuestionCa
         {!isReadonly && mode.kind === 'interactive' ? (
           <Button
             type="button"
-            size="icon"
             variant="ghost"
+            size="mini"
+            icon
             disabled={disabled && !mode.isPendingCancel}
             onClick={mode.onCancel}
             aria-label={t('sessions.cancel', 'Cancel')}
-            className="-mr-1 mt-0.5 h-5 w-5 shrink-0 rounded-md text-muted-foreground hover:text-foreground"
+            className="-mr-1 mt-0.5 shrink-0"
           >
             {mode.isPendingCancel ? (
               <Loader2 className="h-3 w-3 animate-spin" />
@@ -640,11 +641,10 @@ export function AskUserQuestionCard({ meta, mode, className }: AskUserQuestionCa
           <div className="mt-2">
             <Button
               type="button"
-              size="sm"
               variant="secondary"
+              size="small"
               disabled={disabled || !canSubmit}
               onClick={() => mode.kind === 'interactive' && submit(drafts)}
-              className="h-8 gap-1.5 px-3 text-xs"
             >
               {mode.kind === 'interactive' && mode.isPendingSubmit ? (
                 <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -661,11 +661,11 @@ export function AskUserQuestionCard({ meta, mode, className }: AskUserQuestionCa
         <div className="flex items-center justify-between gap-2 border-t border-border/40 bg-transparent px-3 py-1">
           <Button
             type="button"
-            size="sm"
             variant="ghost"
+            size="small"
             disabled={isFirst}
             onClick={goPrev}
-            className="h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground disabled:opacity-50"
+            className="disabled:opacity-50"
           >
             <ChevronLeft className="h-3.5 w-3.5" />
             {t('sessions.askQuestion.prev', 'Prev')}
@@ -676,11 +676,11 @@ export function AskUserQuestionCard({ meta, mode, className }: AskUserQuestionCa
           {isReadonly ? (
             <Button
               type="button"
-              size="sm"
               variant="ghost"
+              size="small"
               disabled={isLast}
               onClick={goNext}
-              className="h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground disabled:opacity-50"
+              className="disabled:opacity-50"
             >
               {t('sessions.askQuestion.next', 'Next')}
               <ChevronRight className="h-3.5 w-3.5" />
@@ -688,11 +688,10 @@ export function AskUserQuestionCard({ meta, mode, className }: AskUserQuestionCa
           ) : isLast ? (
             <Button
               type="button"
-              size="sm"
               variant="secondary"
+              size="small"
               disabled={disabled || !canSubmit}
               onClick={() => mode.kind === 'interactive' && submit(drafts)}
-              className="h-6 gap-1.5 px-3 text-xs"
             >
               {mode.kind === 'interactive' && mode.isPendingSubmit ? (
                 <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -704,14 +703,11 @@ export function AskUserQuestionCard({ meta, mode, className }: AskUserQuestionCa
           ) : (
             <Button
               type="button"
-              size="sm"
               variant="ghost"
+              size="small"
               disabled={!canGoNext}
               onClick={goNext}
-              className={cn(
-                'h-6 gap-1 px-2 text-xs',
-                canGoNext ? 'text-foreground hover:text-foreground' : 'text-muted-foreground'
-              )}
+              className={cn(canGoNext ? '' : '')}
             >
               {t('sessions.askQuestion.next', 'Next')}
               <ChevronRight className="h-3.5 w-3.5" />
diff --git a/packages/components/src/components/sessions/auto-review-info.tsx b/packages/components/src/components/sessions/auto-review-info.tsx
index 499e9666d..e18cbafea 100644
--- a/packages/components/src/components/sessions/auto-review-info.tsx
+++ b/packages/components/src/components/sessions/auto-review-info.tsx
@@ -8,7 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/ui/dialog';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 /**
  * The contract the user reads once.
@@ -129,11 +129,11 @@ export function AutoReviewConfirmDialog({
         <AutoReviewContract budget={budget} />
 
         <DialogFooter>
-          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+          <Button variant="secondary" size="small" onClick={() => onOpenChange(false)}>
             {t('common.cancel', 'Cancel')}
           </Button>
           <Button
-            size="sm"
+            size="small"
             onClick={() => {
               onConfirm();
               onOpenChange(false);
@@ -179,11 +179,11 @@ export function ReviewAgentSetupDialog({
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+          <Button variant="secondary" size="small" onClick={() => onOpenChange(false)}>
             {t('common.cancel', 'Cancel')}
           </Button>
           <Button
-            size="sm"
+            size="small"
             onClick={() => {
               onOpenChange(false);
               onOpenSettings();
diff --git a/packages/components/src/components/sessions/auto-review-menu-item.tsx b/packages/components/src/components/sessions/auto-review-menu-item.tsx
index bec08d0ff..596892c2f 100644
--- a/packages/components/src/components/sessions/auto-review-menu-item.tsx
+++ b/packages/components/src/components/sessions/auto-review-menu-item.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { SessionId, SessionMeta } from '@lody/shared';
 import { DropdownMenuItem, DropdownMenuSeparator } from '@/ui/dropdown-menu';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';
 import { reviewAgentFeatureEnabledAtom } from '@/atoms/settings';
 import { useAutoReview } from '@/hooks/use-auto-review';
@@ -126,7 +126,7 @@ export function AutoReviewMenuItem({
         </Popover>
         <Switch
           checked={enabled}
-          className="pointer-events-none scale-75"
+          className="pointer-events-none"
           aria-label={t('sessions.autoReview.menuLabel', 'Auto review and merge')}
         />
       </DropdownMenuItem>
diff --git a/packages/components/src/components/sessions/auto-review-status.tsx b/packages/components/src/components/sessions/auto-review-status.tsx
index 7cbdd9438..8e584030c 100644
--- a/packages/components/src/components/sessions/auto-review-status.tsx
+++ b/packages/components/src/components/sessions/auto-review-status.tsx
@@ -6,7 +6,7 @@ import {
   type ReviewRun,
   type ReviewRunState,
 } from '@lody/shared';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 
 /**
@@ -85,8 +85,7 @@ export function AutoReviewStatus({
       <div className="flex items-center gap-2">
         {busy ? (
           <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />
-        ) : run.state === 'merged' ||
-          (run.state === 'reviewed' && blocking.length === 0) ? (
+        ) : run.state === 'merged' || (run.state === 'reviewed' && blocking.length === 0) ? (
           <Check className="h-3.5 w-3.5 shrink-0 text-emerald-500" />
         ) : (
           <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-amber-500" />
@@ -108,8 +107,9 @@ export function AutoReviewStatus({
 
         <Button
           variant="ghost"
-          size="icon"
-          className="h-6 w-6 shrink-0 text-muted-foreground"
+          size="mini"
+          icon
+          className="shrink-0"
           onClick={onDisable}
           aria-label={t('sessions.autoReview.turnOff', 'Turn off auto review')}
           title={t('sessions.autoReview.turnOff', 'Turn off auto review')}
@@ -118,16 +118,14 @@ export function AutoReviewStatus({
         </Button>
       </div>
 
-      {run.blocked ? (
-        <p className="mt-1.5 text-muted-foreground">{run.blocked.summary}</p>
-      ) : null}
+      {run.blocked ? <p className="mt-1.5 text-muted-foreground">{run.blocked.summary}</p> : null}
 
       {/* The confirmation prompt has exactly one exit, and this is it. Without
           the button the run waits forever: the workspace-level flag that would
           satisfy the gate is only ever written by the merge it gates. */}
       {run.state === 'awaiting_merge_confirmation' && onConfirmMerge ? (
         <div className="mt-2 flex items-center gap-2">
-          <Button size="sm" className="h-7 px-2.5 text-[0.7rem]" onClick={onConfirmMerge}>
+          <Button size="small" onClick={onConfirmMerge}>
             {t('sessions.autoReview.confirmMerge', 'Merge now')}
           </Button>
           <span className="text-muted-foreground">
@@ -141,12 +139,7 @@ export function AutoReviewStatus({
 
       {run.state === 'paused' && onResume ? (
         <div className="mt-2 flex items-center gap-2">
-          <Button
-            size="sm"
-            variant="outline"
-            className="h-7 px-2.5 text-[0.7rem]"
-            onClick={onResume}
-          >
+          <Button variant="secondary" size="small" onClick={onResume}>
             {t('sessions.autoReview.resume', 'Resume')}
           </Button>
           <span className="text-muted-foreground">
@@ -170,8 +163,8 @@ export function AutoReviewStatus({
               {onFixFinding && canFixManually ? (
                 <Button
                   variant="ghost"
-                  size="sm"
-                  className="h-6 shrink-0 px-2 text-[0.7rem]"
+                  size="small"
+                  className="shrink-0"
                   onClick={() => onFixFinding(finding)}
                 >
                   {t('sessions.autoReview.fixThis', 'Fix this')}
diff --git a/packages/components/src/components/sessions/chat-share-image-dialog.tsx b/packages/components/src/components/sessions/chat-share-image-dialog.tsx
index 8854488f8..2c9a08462 100644
--- a/packages/components/src/components/sessions/chat-share-image-dialog.tsx
+++ b/packages/components/src/components/sessions/chat-share-image-dialog.tsx
@@ -6,12 +6,12 @@ import { formatCompactNumber } from '@/lib/format-compact-number';
 import { toIntlLocaleOrEn } from '@/lib/intl-locale';
 import { cn } from '@/lib/utils';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/ui/dialog';
-import { Label } from '@/ui/label';
-import { Input } from '@/ui/input';
-import { Button } from '@/ui/button';
+import { Field as UiField } from '@lody/ui/field';
+import { Input } from '@lody/ui/input';
+import { Button } from '@lody/ui/button';
 import { copyChatShareImage, exportChatShareImage } from '@/lib/chat-share-image-export';
-import { Switch } from '@/ui/switch';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
+import { Switch } from '@lody/ui/switch';
+import { Select } from '@lody/ui/select';
 import {
   ChatShareCard,
   type ChatShareCardBackdrop,
@@ -130,6 +130,29 @@ export function ChatShareImageDialog({
   const { t, i18n } = useTranslation();
   const intlLocale = toIntlLocaleOrEn(i18n.resolvedLanguage ?? i18n.language);
   const modelName = messages.findLast((message) => message.role === 'assistant')?.modelName;
+  // `Select.Value` reads the label of the current value from `items`, not from
+  // the rows, so each list is stated once and drives both.
+  const themeOptions = useMemo(
+    () => [
+      { value: 'app' as const, label: t('sessions.shareImage.themeApp', 'Follow app') },
+      { value: 'light' as const, label: t('sessions.shareImage.themeLight', 'Light') },
+      { value: 'dark' as const, label: t('sessions.shareImage.themeDark', 'Dark') },
+    ],
+    [t]
+  );
+  const paddingOptions = useMemo(
+    () => [
+      { value: 'compact' as const, label: t('sessions.shareImage.paddingCompact', 'Compact') },
+      { value: 'regular' as const, label: t('sessions.shareImage.paddingRegular', 'Regular') },
+      { value: 'spacious' as const, label: t('sessions.shareImage.paddingSpacious', 'Spacious') },
+    ],
+    [t]
+  );
+  const footerOptions = useMemo(
+    () => FOOTER_VARIANTS.map((value) => ({ value, label: value })),
+    []
+  );
+
   const selectedTokenCount = useMemo(
     () =>
       messages.reduce(
@@ -239,30 +262,31 @@ export function ChatShareImageDialog({
             className="min-h-0 min-w-0 space-y-5 overflow-y-auto border-b border-border/70 px-4 py-4 sm:border-b-0 sm:border-r sm:px-5"
           >
             <div className="space-y-2">
-              <Label htmlFor="chat-share-theme">{t('sessions.shareImage.theme', 'Theme')}</Label>
-              <Select
+              <UiField.Label htmlFor="chat-share-theme">
+                {t('sessions.shareImage.theme', 'Theme')}
+              </UiField.Label>
+              <Select.Root
+                items={themeOptions}
                 value={theme}
                 onValueChange={(value) => setTheme(value as 'app' | 'light' | 'dark')}
               >
-                <SelectTrigger id="chat-share-theme" className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="app">
-                    {t('sessions.shareImage.themeApp', 'Follow app')}
-                  </SelectItem>
-                  <SelectItem value="light">
-                    {t('sessions.shareImage.themeLight', 'Light')}
-                  </SelectItem>
-                  <SelectItem value="dark">{t('sessions.shareImage.themeDark', 'Dark')}</SelectItem>
-                </SelectContent>
-              </Select>
+                <Select.Trigger id="chat-share-theme">
+                  <Select.Value />
+                </Select.Trigger>
+                <Select.Content>
+                  {themeOptions.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
             </div>
 
             <div className="space-y-2">
-              <Label className="mb-2 block">
+              <UiField.Label className="mb-2 block">
                 {t('sessions.shareImage.backdrop', 'Background')}
-              </Label>
+              </UiField.Label>
               <div className="grid grid-cols-5 gap-1.5" role="group">
                 <button
                   type="button"
@@ -312,61 +336,63 @@ export function ChatShareImageDialog({
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="chat-share-padding">
+              <UiField.Label htmlFor="chat-share-padding">
                 {t('sessions.shareImage.framePadding', 'Backdrop padding')}
-              </Label>
-              <Select
+              </UiField.Label>
+              <Select.Root
+                items={paddingOptions}
                 value={framePadding}
                 onValueChange={(value) =>
                   setFramePadding(value as 'compact' | 'regular' | 'spacious')
                 }
                 disabled={backdrop === 'none'}
               >
-                <SelectTrigger id="chat-share-padding" className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="compact">
-                    {t('sessions.shareImage.paddingCompact', 'Compact')}
-                  </SelectItem>
-                  <SelectItem value="regular">
-                    {t('sessions.shareImage.paddingRegular', 'Regular')}
-                  </SelectItem>
-                  <SelectItem value="spacious">
-                    {t('sessions.shareImage.paddingSpacious', 'Spacious')}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+                <Select.Trigger id="chat-share-padding">
+                  <Select.Value />
+                </Select.Trigger>
+                <Select.Content>
+                  {paddingOptions.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="chat-share-footer">{t('sessions.shareImage.footer', 'Footer')}</Label>
-              <Select
+              <UiField.Label htmlFor="chat-share-footer">
+                {t('sessions.shareImage.footer', 'Footer')}
+              </UiField.Label>
+              <Select.Root
+                items={footerOptions}
                 value={footerVariant}
                 onValueChange={(value) => setFooterVariant(value as ChatShareCardFooterVariant)}
               >
-                <SelectTrigger id="chat-share-footer" className="w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
+                <Select.Trigger id="chat-share-footer">
+                  <Select.Value />
+                </Select.Trigger>
+                <Select.Content>
                   {FOOTER_VARIANTS.map((value) => (
-                    <SelectItem key={value} value={value}>
+                    <Select.Item key={value} value={value}>
                       {value}
-                    </SelectItem>
+                    </Select.Item>
                   ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </div>
 
             <div className="space-y-2">
-              <Label className="mb-2 block">{t('sessions.shareImage.content', 'Content')}</Label>
+              <UiField.Label className="mb-2 block">
+                {t('sessions.shareImage.content', 'Content')}
+              </UiField.Label>
               <div className="flex items-center justify-between gap-3">
-                <Label
+                <UiField.Label
                   htmlFor="chat-share-show-title"
                   className="font-normal text-muted-foreground"
                 >
                   {t('sessions.shareImage.showTitle', 'Session title')}
-                </Label>
+                </UiField.Label>
                 <Switch
                   id="chat-share-show-title"
                   checked={showTitle}
@@ -374,9 +400,12 @@ export function ChatShareImageDialog({
                 />
               </div>
               <div className="flex items-center justify-between gap-3">
-                <Label htmlFor="chat-share-show-date" className="font-normal text-muted-foreground">
+                <UiField.Label
+                  htmlFor="chat-share-show-date"
+                  className="font-normal text-muted-foreground"
+                >
                   {t('sessions.shareImage.showDate', 'Date (EXIF footer)')}
-                </Label>
+                </UiField.Label>
                 <Switch
                   id="chat-share-show-date"
                   checked={showDate}
@@ -385,9 +414,12 @@ export function ChatShareImageDialog({
                 />
               </div>
               <div className="flex items-center justify-between gap-3">
-                <Label htmlFor="chat-share-show-qr" className="font-normal text-muted-foreground">
+                <UiField.Label
+                  htmlFor="chat-share-show-qr"
+                  className="font-normal text-muted-foreground"
+                >
                   {t('sessions.shareImage.showQr', 'QR code')}
-                </Label>
+                </UiField.Label>
                 <Switch
                   id="chat-share-show-qr"
                   checked={showQr}
@@ -398,17 +430,25 @@ export function ChatShareImageDialog({
             </div>
 
             <div className="space-y-2">
-              <Label className="mb-2 block">{t('sessions.shareImage.code', 'Code')}</Label>
+              <UiField.Label className="mb-2 block">
+                {t('sessions.shareImage.code', 'Code')}
+              </UiField.Label>
               <div className="flex items-center justify-between gap-3">
-                <Label htmlFor="chat-share-wrap" className="font-normal text-muted-foreground">
+                <UiField.Label
+                  htmlFor="chat-share-wrap"
+                  className="font-normal text-muted-foreground"
+                >
                   {t('sessions.shareImage.wrapLines', 'Wrap long lines')}
-                </Label>
+                </UiField.Label>
                 <Switch id="chat-share-wrap" checked={wrapCode} onCheckedChange={setWrapCode} />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="chat-share-collapse" className="font-normal text-muted-foreground">
+                <UiField.Label
+                  htmlFor="chat-share-collapse"
+                  className="font-normal text-muted-foreground"
+                >
                   {t('sessions.shareImage.collapseAfter', 'Collapse code blocks after (lines)')}
-                </Label>
+                </UiField.Label>
                 <Input
                   id="chat-share-collapse"
                   type="number"
@@ -462,7 +502,7 @@ export function ChatShareImageDialog({
             </p>
           ) : null}
           <Button
-            variant="outline"
+            variant="secondary"
             onClick={() => void handleCopy()}
             disabled={exporting || !assetsReady || messages.length === 0}
           >
diff --git a/packages/components/src/components/sessions/components/file-tree-states.tsx b/packages/components/src/components/sessions/components/file-tree-states.tsx
index b2227b067..73ec69972 100644
--- a/packages/components/src/components/sessions/components/file-tree-states.tsx
+++ b/packages/components/src/components/sessions/components/file-tree-states.tsx
@@ -1,6 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
 import { cn } from '@/lib/utils';
-import { Skeleton } from '@/ui/skeleton';
+import { Skeleton } from '@lody/ui/skeleton';
 
 // Skeleton rows mirror the real file-tree layout: 22px row height, 8px indent
 // per level, a 16px icon slot, then a filename bar. A fixed, deterministic shape
@@ -49,11 +49,8 @@ export function FileTreeSkeleton({ className }: { className?: string }) {
           className="flex h-[22px] items-center"
           style={{ paddingLeft: row.level * TREE_INDENT_PX + ROW_BASE_PADDING_PX }}
         >
-          <Skeleton className="mr-1.5 h-4 w-4 shrink-0 rounded-[4px] bg-muted-foreground/20" />
-          <Skeleton
-            className="h-2.5 rounded-sm bg-muted-foreground/20"
-            style={{ width: row.width }}
-          />
+          <Skeleton width={16} height={16} className="mr-1.5 shrink-0" />
+          <Skeleton width={row.width} height={10} />
         </div>
       ))}
     </div>
diff --git a/packages/components/src/components/sessions/components/file-tree-view.tsx b/packages/components/src/components/sessions/components/file-tree-view.tsx
index d943a53a9..31b4dc1a2 100644
--- a/packages/components/src/components/sessions/components/file-tree-view.tsx
+++ b/packages/components/src/components/sessions/components/file-tree-view.tsx
@@ -864,7 +864,7 @@ const AutoFileTreeView = ({
           localError ?? t('sessions.localProject.files.loadFailed', 'Failed to load files.')
         }
         action={
-          <Button variant="outline" size="sm" className="gap-1.5" onClick={handleRetryLocalFiles}>
+          <Button variant="secondary" size="small" onClick={handleRetryLocalFiles}>
             <RefreshCw className="h-3.5 w-3.5" />
             {t('sessions.codeSession.files.retry', 'Try again')}
           </Button>
diff --git a/packages/components/src/components/sessions/desktop-run-config-menu.tsx b/packages/components/src/components/sessions/desktop-run-config-menu.tsx
index 9ebdc0966..66eddbabd 100644
--- a/packages/components/src/components/sessions/desktop-run-config-menu.tsx
+++ b/packages/components/src/components/sessions/desktop-run-config-menu.tsx
@@ -48,8 +48,8 @@ import {
 } from '@/lib/composer-agent-roles';
 import { cn } from '@/lib/utils';
 import { useOnlineMachines } from '@/hooks/use-online-machines';
-import { Badge } from '@/ui/badge';
-import { Switch } from '@/ui/switch';
+import { Badge } from '@lody/ui/badge';
+import { Switch } from '@lody/ui/switch';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import {
   DropdownMenu,
@@ -253,9 +253,7 @@ export function DesktopMachineMenu({
           <Monitor className="h-4 w-4 shrink-0" aria-hidden="true" />
           <span className="max-w-32 truncate">{label}</span>
           {selectedIsLocal ? (
-            <Badge variant="secondary" className="shrink-0 px-1.5 py-0 text-[10px]">
-              {t('chat.machineSelector.local', 'Local')}
-            </Badge>
+            <Badge>{t('chat.machineSelector.local', 'Local')}</Badge>
           ) : null}
           {selectedOption?.isPrivate ? (
             <LockKeyhole
@@ -287,9 +285,7 @@ export function DesktopMachineMenu({
               {option.label}
             </span>
             {option.value === visibleLocalMachineId ? (
-              <Badge variant="secondary" className="shrink-0 px-1.5 py-0 text-[10px]">
-                {t('chat.machineSelector.local', 'Local')}
-              </Badge>
+              <Badge>{t('chat.machineSelector.local', 'Local')}</Badge>
             ) : null}
             {option.isPrivate ? (
               <Tooltip delayDuration={250}>
diff --git a/packages/components/src/components/sessions/floating-permission-request.tsx b/packages/components/src/components/sessions/floating-permission-request.tsx
index 6b6b34634..1657993d6 100644
--- a/packages/components/src/components/sessions/floating-permission-request.tsx
+++ b/packages/components/src/components/sessions/floating-permission-request.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ChevronDown, ChevronRight, Loader2 } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/ui/card';
 import { ScrollArea } from '@/ui/scroll-area';
 import { cn } from '@/lib/utils';
@@ -275,12 +275,12 @@ export function PermissionRequestCard({
             return (
               <Button
                 key={option.optionId}
-                size="sm"
                 type="button"
+                size="small"
                 disabled={disabled}
                 variant="ghost"
                 className={cn(
-                  'h-auto min-h-8 w-full min-w-0 items-start justify-start gap-2 whitespace-normal break-words rounded-md px-3 py-1.5 text-left text-xs leading-5 transition-colors',
+                  'w-full min-w-0 items-start justify-start whitespace-normal break-words text-left',
                   toneClass
                 )}
                 onClick={() => onSelect(option.optionId)}
diff --git a/packages/components/src/components/sessions/managed-preview-surface.tsx b/packages/components/src/components/sessions/managed-preview-surface.tsx
index ea47ede47..11358d698 100644
--- a/packages/components/src/components/sessions/managed-preview-surface.tsx
+++ b/packages/components/src/components/sessions/managed-preview-surface.tsx
@@ -44,8 +44,8 @@ import {
 } from '@lody/shared/preview-comment-types';
 
 import { userAtom } from '@/atoms';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 import { toast } from 'sonner';
 import { VisualAnnotationCommentsOverlay } from '@/components/preview/visual-annotation-comments-overlay';
 import { getVisiblePreviewVisualComments } from '@/components/preview/preview-visual-comments';
@@ -741,8 +741,9 @@ export function ManagedPreviewSurface({
             <Button
               type="button"
               variant="ghost"
-              size="icon"
-              className="h-6 w-6 shrink-0"
+              size="mini"
+              icon
+              className="shrink-0"
               aria-label={t('common.cancel', 'Cancel')}
               onClick={() => {
                 setSelectedTarget(null);
@@ -762,7 +763,7 @@ export function ManagedPreviewSurface({
           <div className="mt-2 flex justify-end">
             <Button
               type="button"
-              size="sm"
+              size="small"
               disabled={!draftBody.trim() || submitting}
               onClick={() => void submitDraft()}
             >
diff --git a/packages/components/src/components/sessions/notification-permission-prompt.tsx b/packages/components/src/components/sessions/notification-permission-prompt.tsx
index c48ce7fd2..65b441f92 100644
--- a/packages/components/src/components/sessions/notification-permission-prompt.tsx
+++ b/packages/components/src/components/sessions/notification-permission-prompt.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Bell, X } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { useTranslation } from 'react-i18next';
 import { useAtom, useAtomValue } from 'jotai';
 import { notificationPromptDismissedAtom, userAtom, currentWorkspaceSlugAtom } from '@/atoms';
@@ -133,14 +133,14 @@ export function NotificationPermissionPrompt({
             {t('notifications.prompt.description', 'Get notified when your AI tasks complete.')}
           </p>
           <div className="mt-2 flex items-center gap-2">
-            <Button variant="default" size="sm" onClick={handleEnable} className="h-7 px-3 text-xs">
+            <Button size="small" onClick={handleEnable}>
               {t('notifications.prompt.enable', 'Enable')}
             </Button>
             <Button
               variant="ghost"
-              size="sm"
+              size="small"
               onClick={handleDismiss}
-              className="h-7 px-3 text-xs text-status-info hover:bg-status-info/10 hover:text-status-info"
+              className="text-status-info hover:bg-status-info/10 hover:text-status-info"
             >
               {t('notifications.prompt.dontRemind', "Don't remind me")}
             </Button>
@@ -148,9 +148,10 @@ export function NotificationPermissionPrompt({
         </div>
         <Button
           variant="ghost"
-          size="icon"
+          size="mini"
+          icon
           onClick={handleClose}
-          className="h-6 w-6 shrink-0 text-status-info/70 hover:bg-status-info/10 hover:text-status-info"
+          className="shrink-0 text-status-info/70 hover:bg-status-info/10 hover:text-status-info"
           aria-label={t('common.close', 'Close')}
         >
           <X className="h-3.5 w-3.5" />
diff --git a/packages/components/src/components/sessions/paged-file-viewer.tsx b/packages/components/src/components/sessions/paged-file-viewer.tsx
index 3541a67ba..23273e759 100644
--- a/packages/components/src/components/sessions/paged-file-viewer.tsx
+++ b/packages/components/src/components/sessions/paged-file-viewer.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VList } from 'virtua';
 import type { PagedFileSource } from '@/lib/paged-file-source';
-import { Input } from '@/ui/input';
-import { Button } from '@/ui/button';
+import { Pagination } from '@lody/ui/pagination';
+import { Button } from '@lody/ui/button';
 
 /** One bounded page, virtual rows, no editor/LSP/HTML execution or accumulated cache. */
 export function PagedFileViewer({
@@ -43,41 +43,27 @@ export function PagedFileViewer({
     <div className="flex h-full min-h-0 flex-col">
       <div className="flex flex-wrap items-center gap-2 border-b p-2 text-xs text-muted-foreground">
         <span>{t('sessions.fileViewer.paged', 'Large file · read-only')}</span>
-        <Button
-          variant="ghost"
-          size="sm"
-          disabled={current === 0}
-          onClick={() => setPage(current - 1)}
-        >
-          {t('sessions.fileViewer.previousPage', 'Previous page')}
-        </Button>
-        <label>
-          {t('sessions.fileViewer.page', 'Page')}{' '}
-          <Input
-            aria-label={t('sessions.fileViewer.page', 'Page')}
-            type="number"
-            min={1}
-            max={pages}
-            value={current + 1}
-            className="inline-flex h-7 w-20 px-2 py-1"
-            onChange={(event) => {
-              const value = Number(event.target.value);
-              if (Number.isSafeInteger(value) && value >= 1 && value <= pages) setPage(value - 1);
-            }}
-          />
-          {' / '}
-          {pages.toLocaleString()}
-        </label>
-        <Button
-          variant="ghost"
-          size="sm"
-          disabled={current + 1 >= pages}
-          onClick={() => setPage(current + 1)}
-        >
-          {t('sessions.fileViewer.nextPage', 'Next page')}
-        </Button>
+        <Pagination
+          layout="compact"
+          jump
+          size="small"
+          page={current + 1}
+          pages={pages}
+          onPageChange={(next) => setPage(next - 1)}
+          labels={{
+            root: t('sessions.fileViewer.pagination', 'File pages'),
+            previous: t('sessions.fileViewer.previousPage', 'Previous page'),
+            next: t('sessions.fileViewer.nextPage', 'Next page'),
+            jump: t('sessions.fileViewer.page', 'Page'),
+            position: (shown, count) =>
+              t('sessions.fileViewer.position', 'Page {{page}} of {{total}}', {
+                page: shown,
+                total: count,
+              }),
+          }}
+        />
         {onOpenExternal ? (
-          <Button variant="ghost" size="sm" onClick={onOpenExternal}>
+          <Button variant="ghost" size="small" onClick={onOpenExternal}>
             {t('sessions.fileActions.openInDefaultApp', 'Open in default app')}
           </Button>
         ) : null}
diff --git a/packages/components/src/components/sessions/pr-merge-button.tsx b/packages/components/src/components/sessions/pr-merge-button.tsx
index 8de173de4..e07e22a43 100644
--- a/packages/components/src/components/sessions/pr-merge-button.tsx
+++ b/packages/components/src/components/sessions/pr-merge-button.tsx
@@ -2,7 +2,7 @@ import { Check, ChevronDown, GitMerge, Loader2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import type { GitHubMergeMethod } from '@lody/shared';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -71,7 +71,7 @@ export function PrMergeButton({
   const { t } = useTranslation();
   const isDisabled = disabled || isMerging || !onMerge;
   const buttonVariant =
-    tone === 'ready' ? 'default' : tone === 'conflict' ? 'destructive' : 'outline';
+    tone === 'ready' ? 'primary' : tone === 'conflict' ? 'destructive' : 'secondary';
   // The full (non-compact) ready button uses GitHub's green so "merge" reads as
   // the positive terminal action, matching the compact info-bar merge control.
   const readyGreen = tone === 'ready' && !compact;
@@ -108,11 +108,11 @@ export function PrMergeButton({
       ) : (
         <Button
           type="button"
-          size="sm"
           variant={buttonVariant}
+          size="small"
           disabled={isDisabled}
           onClick={() => void onMerge?.(method)}
-          className={cn('h-8 gap-1 rounded-r-none border-transparent', readyGreen && greenClasses)}
+          className={cn(readyGreen && greenClasses)}
         >
           {mainContent}
         </Button>
@@ -131,14 +131,11 @@ export function PrMergeButton({
           ) : (
             <Button
               type="button"
-              size="sm"
               variant={buttonVariant}
+              size="small"
               disabled={isMerging || !onSelectMethod}
               aria-label={t('sessions.prTab.chooseMergeMethod', 'Choose merge method')}
-              className={cn(
-                'h-8 rounded-l-none border-l border-black/10 px-1.5',
-                readyGreen && cn(greenClasses, 'border-l-white/25')
-              )}
+              className={cn(readyGreen && greenClasses)}
             >
               <ChevronDown className="h-3.5 w-3.5" />
             </Button>
diff --git a/packages/components/src/components/sessions/pr-tab-view.tsx b/packages/components/src/components/sessions/pr-tab-view.tsx
index dd1efa071..9213fa7a6 100644
--- a/packages/components/src/components/sessions/pr-tab-view.tsx
+++ b/packages/components/src/components/sessions/pr-tab-view.tsx
@@ -39,11 +39,11 @@ import {
   isDraftPr,
   isPullRequestMergeabilityPending,
 } from '@/lib/github-pr-details-state';
-import { Avatar, AvatarFallback, AvatarImage } from '@/ui/avatar';
-import { Button } from '@/ui/button';
+import { Avatar, type AvatarSize } from '@lody/ui/avatar';
+import { Button } from '@lody/ui/button';
 import { ScrollArea } from '@/ui/scroll-area';
-import { Skeleton } from '@/ui/skeleton';
-import { Textarea } from '@/ui/textarea';
+import { Skeleton } from '@lody/ui/skeleton';
+import { Textarea } from '@lody/ui/textarea';
 import { SessionCommentMarkdown } from '@/ui/diff-viewer/session-comment-markdown';
 import { GitHubCommentThread } from '@/ui/diff-viewer/github-comment-thread';
 import { PullRequestBadge } from '@/components/sessions/pull-request-badge';
@@ -133,24 +133,24 @@ function prToBadgeMeta(pr: GitHubPullRequestDetails): SessionPullRequestMeta {
   };
 }
 
+/**
+ * A GitHub account, which is a person: a circle, and the rung picks the letters
+ * inside it. The three hand-tuned type steps this used to carry are gone with
+ * the ladder.
+ */
 function UserAvatar({
   user,
-  size = 'md',
+  size = 'medium',
 }: {
   user: { login: string; avatarUrl: string } | null | undefined;
-  size?: 'xs' | 'sm' | 'md';
+  size?: AvatarSize;
 }) {
   const login = user?.login ?? 'ghost';
-  const sizeClass = size === 'xs' ? 'h-4 w-4' : size === 'sm' ? 'h-5 w-5' : 'h-6 w-6';
-  const fallbackTextClass =
-    size === 'xs' ? 'text-[8px]' : size === 'sm' ? 'text-[10px]' : 'text-[11px]';
   return (
-    <Avatar className={cn('shrink-0', sizeClass)}>
-      {user?.avatarUrl && <AvatarImage src={user.avatarUrl} alt={login} />}
-      <AvatarFallback className={fallbackTextClass}>
-        {login.slice(0, 2).toUpperCase()}
-      </AvatarFallback>
-    </Avatar>
+    <Avatar.Root size={size} className="shrink-0">
+      {user?.avatarUrl && <Avatar.Image src={user.avatarUrl} alt={login} />}
+      <Avatar.Fallback>{login.slice(0, 2).toUpperCase()}</Avatar.Fallback>
+    </Avatar.Root>
   );
 }
 
@@ -314,13 +314,7 @@ function ChecksPermissionNotice({
         </p>
       </div>
       {onGrantChecksPermission && (
-        <Button
-          type="button"
-          size="sm"
-          variant="outline"
-          onClick={onGrantChecksPermission}
-          className="h-6 gap-1 text-[11px]"
-        >
+        <Button type="button" variant="secondary" size="small" onClick={onGrantChecksPermission}>
           <Github className="h-3 w-3" />
           {t('sessions.prTab.checksPermissionCta', 'Update permissions')}
         </Button>
@@ -342,7 +336,7 @@ function MergeStatusNotice({ kind }: { kind: 'conflict' | 'blocked' | 'checking'
         <p className="min-w-0 flex-1">
           {t(
             'sessions.prTab.mergeConflictNotice',
-            "This branch has conflicts with the base branch — resolve them before it can be merged."
+            'This branch has conflicts with the base branch — resolve them before it can be merged.'
           )}
         </p>
       </section>
@@ -383,7 +377,7 @@ const IssueCommentItem = memo(function IssueCommentItem({
       <header className="flex items-center gap-2 border-b border-border bg-muted/30 px-3 py-2">
         <UserAvatar
           user={comment.user ? { login, avatarUrl: comment.user.avatarUrl } : null}
-          size="md"
+          size="medium"
         />
         <span className="text-sm font-medium leading-none">{login}</span>
         <span className="text-[11px] text-muted-foreground leading-none">
@@ -486,7 +480,7 @@ const ReviewSubmissionItem = memo(function ReviewSubmissionItem({
       <header className="flex flex-wrap items-center gap-2 border-b border-border bg-muted/30 px-3 py-2">
         <UserAvatar
           user={review.user ? { login, avatarUrl: review.user.avatarUrl } : null}
-          size="md"
+          size="medium"
         />
         <span className="text-sm font-medium leading-none">{login}</span>
         <ReviewStateBadge state={review.state} />
@@ -700,10 +694,10 @@ function PrHeaderActionButton({
       <div data-pr-merge-action="" className="flex items-stretch overflow-hidden rounded-md">
         <Button
           type="button"
-          size="sm"
+          size="small"
           onClick={() => void onMerge(mergeMethod)}
           disabled={busy}
-          className={cn(PR_ACTION_BTN, PR_MERGE_BTN_GREEN, 'rounded-r-none border-transparent')}
+          className={cn(PR_ACTION_BTN, PR_MERGE_BTN_GREEN)}
         >
           {isMerging ? (
             <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -716,10 +710,10 @@ function PrHeaderActionButton({
           <DropdownMenuTrigger asChild>
             <Button
               type="button"
-              size="sm"
+              size="small"
               disabled={busy}
               aria-label={t('sessions.prTab.moreActions', 'More actions')}
-              className={cn('h-7 rounded-l-none px-1.5', PR_MERGE_BTN_GREEN, PR_SPLIT_DIVIDER)}
+              className={cn(PR_MERGE_BTN_GREEN, PR_SPLIT_DIVIDER)}
             >
               <ChevronDown className="h-3.5 w-3.5" />
             </Button>
@@ -733,7 +727,11 @@ function PrHeaderActionButton({
               onValueChange={(value) => onSelectMergeMethod?.(value as GitHubMergeMethod)}
             >
               {HEADER_MERGE_METHODS.map((method) => (
-                <DropdownMenuRadioItem key={method.value} value={method.value} className="items-start">
+                <DropdownMenuRadioItem
+                  key={method.value}
+                  value={method.value}
+                  className="items-start"
+                >
                   <div className="flex min-w-0 flex-col gap-0.5">
                     <span className="text-sm font-medium">
                       {t(method.labelKey, method.labelFallback)}
@@ -771,12 +769,12 @@ function PrHeaderActionButton({
       <div className="flex items-stretch overflow-hidden rounded-md">
         <Button
           type="button"
-          size="sm"
-          variant="outline"
+          variant="secondary"
+          size="small"
           onClick={canResolve ? onResolveConflicts : undefined}
           disabled={!canResolve}
           title={tip}
-          className={cn(PR_ACTION_BTN, canClose && 'rounded-r-none')}
+          className={cn(PR_ACTION_BTN, canClose && '')}
         >
           {resolving ? (
             <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -790,11 +788,10 @@ function PrHeaderActionButton({
             <DropdownMenuTrigger asChild>
               <Button
                 type="button"
-                size="sm"
-                variant="outline"
+                variant="secondary"
+                size="small"
                 disabled={busy}
                 aria-label={t('sessions.prTab.moreActions', 'More actions')}
-                className="h-7 rounded-l-none border-l px-1.5"
               >
                 <ChevronDown className="h-3.5 w-3.5" />
               </Button>
@@ -821,11 +818,11 @@ function PrHeaderActionButton({
       <div className="flex items-stretch overflow-hidden rounded-md">
         <Button
           type="button"
-          size="sm"
-          variant="outline"
+          variant="secondary"
+          size="small"
           disabled
           title={tip}
-          className={cn(PR_ACTION_BTN, canClose && 'rounded-r-none')}
+          className={cn(PR_ACTION_BTN, canClose && '')}
         >
           {kind === 'checking' ? (
             <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -839,11 +836,10 @@ function PrHeaderActionButton({
             <DropdownMenuTrigger asChild>
               <Button
                 type="button"
-                size="sm"
-                variant="outline"
+                variant="secondary"
+                size="small"
                 disabled={busy}
                 aria-label={t('sessions.prTab.moreActions', 'More actions')}
-                className="h-7 rounded-l-none border-l px-1.5"
               >
                 <ChevronDown className="h-3.5 w-3.5" />
               </Button>
@@ -863,10 +859,10 @@ function PrHeaderActionButton({
       <div className="flex items-stretch overflow-hidden rounded-md">
         <Button
           type="button"
-          size="sm"
+          size="small"
           onClick={() => void onMarkReadyForReview()}
           disabled={busy}
-          className={cn(PR_ACTION_BTN, canClose && 'rounded-r-none')}
+          className={cn(PR_ACTION_BTN, canClose && '')}
         >
           {isMarkingReady ? (
             <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -880,10 +876,10 @@ function PrHeaderActionButton({
             <DropdownMenuTrigger asChild>
               <Button
                 type="button"
-                size="sm"
+                size="small"
                 disabled={busy}
                 aria-label={t('sessions.prTab.moreActions', 'More actions')}
-                className={cn('h-7 rounded-l-none px-1.5', PR_SPLIT_DIVIDER)}
+                className={cn(PR_SPLIT_DIVIDER)}
               >
                 <ChevronDown className="h-3.5 w-3.5" />
               </Button>
@@ -902,8 +898,8 @@ function PrHeaderActionButton({
     return (
       <Button
         type="button"
-        size="sm"
-        variant="outline"
+        variant="secondary"
+        size="small"
         onClick={() => void onSetState?.('open')}
         disabled={busy}
         className={PR_ACTION_BTN}
@@ -926,8 +922,8 @@ function PrHeaderActionButton({
     return (
       <Button
         type="button"
-        size="sm"
-        variant="outline"
+        variant="secondary"
+        size="small"
         onClick={() => void onDeleteBranch?.()}
         disabled={busy}
         className={PR_ACTION_BTN}
@@ -947,8 +943,8 @@ function PrHeaderActionButton({
     return (
       <Button
         type="button"
-        size="sm"
-        variant="outline"
+        variant="secondary"
+        size="small"
         onClick={() => void onSetState?.('closed')}
         disabled={busy}
         className={cn(PR_ACTION_BTN, 'text-status-danger')}
@@ -969,10 +965,10 @@ function PrHeaderActionButton({
 function PrBodySkeleton() {
   return (
     <div className="space-y-3">
-      <Skeleton className="h-5 w-2/3" />
-      <Skeleton className="h-4 w-1/2" />
-      <Skeleton className="h-24 w-full" />
-      <Skeleton className="h-16 w-full" />
+      <Skeleton width="66%" height={20} />
+      <Skeleton width="50%" height={16} />
+      <Skeleton shape="block" width="100%" height={96} />
+      <Skeleton shape="block" width="100%" height={64} />
     </div>
   );
 }
@@ -1048,13 +1044,7 @@ function Composer({
         disabled={isPending}
       />
       <div className="flex justify-end">
-        <Button
-          type="button"
-          size="sm"
-          onClick={() => void submit()}
-          disabled={!canSubmit}
-          className="gap-1"
-        >
+        <Button type="button" size="small" onClick={() => void submit()} disabled={!canSubmit}>
           {isPending && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
           {t('sessions.prTab.composerSubmit', 'Comment')}
         </Button>
@@ -1081,31 +1071,31 @@ function BranchRow({ pr }: { pr: GitHubPullRequestDetails }) {
     <div className="border-b border-border px-4 py-2">
       <div className="mx-auto flex w-full max-w-3xl flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
         <span className="inline-flex items-center gap-1">
-        <span className="uppercase tracking-wide text-muted-foreground/80">
-          {t('sessions.prTab.base', 'base')}
+          <span className="uppercase tracking-wide text-muted-foreground/80">
+            {t('sessions.prTab.base', 'base')}
+          </span>
+          <code className="rounded-sm bg-muted px-1 py-px font-mono text-foreground">
+            {pr.baseRef}
+          </code>
+          <InlineCopyButton
+            value={pr.baseRef}
+            label={t('sessions.prTab.copyBranch', 'Copy branch name')}
+          />
         </span>
-        <code className="rounded-sm bg-muted px-1 py-px font-mono text-foreground">
-          {pr.baseRef}
-        </code>
-        <InlineCopyButton
-          value={pr.baseRef}
-          label={t('sessions.prTab.copyBranch', 'Copy branch name')}
-        />
-      </span>
-      <span aria-hidden className="text-muted-foreground/60">
-        ←
-      </span>
-      <span className="inline-flex items-center gap-1">
-        <span className="uppercase tracking-wide text-muted-foreground/80">
-          {t('sessions.prTab.head', 'head')}
+        <span aria-hidden className="text-muted-foreground/60">
+          ←
         </span>
-        <code className="rounded-sm bg-muted px-1 py-px font-mono text-foreground">
-          {pr.headRef}
-        </code>
-        <InlineCopyButton
-          value={pr.headRef}
-          label={t('sessions.prTab.copyBranch', 'Copy branch name')}
-        />
+        <span className="inline-flex items-center gap-1">
+          <span className="uppercase tracking-wide text-muted-foreground/80">
+            {t('sessions.prTab.head', 'head')}
+          </span>
+          <code className="rounded-sm bg-muted px-1 py-px font-mono text-foreground">
+            {pr.headRef}
+          </code>
+          <InlineCopyButton
+            value={pr.headRef}
+            label={t('sessions.prTab.copyBranch', 'Copy branch name')}
+          />
         </span>
       </div>
     </div>
@@ -1176,13 +1166,7 @@ export const PrTabView = memo(function PrTabView({
           </div>
           <div className="flex shrink-0 items-center gap-1.5">
             {onRefresh && (
-              <Button
-                type="button"
-                size="sm"
-                variant="outline"
-                onClick={onRefresh}
-                className="h-6 text-[11px]"
-              >
+              <Button type="button" variant="secondary" size="small" onClick={onRefresh}>
                 {t('sessions.prTab.retry', 'Retry')}
               </Button>
             )}
@@ -1214,7 +1198,7 @@ export const PrTabView = memo(function PrTabView({
                 <>
                   <UserAvatar
                     user={{ login: pr.user.login, avatarUrl: pr.user.avatarUrl }}
-                    size="xs"
+                    size="mini"
                   />
                   <span className="font-medium text-foreground">{pr.user.login}</span>
                 </>
@@ -1267,9 +1251,9 @@ export const PrTabView = memo(function PrTabView({
             data && <ChecksSection summary={data.checkRuns} />
           )}
 
-          {(mergeKind === 'conflict' ||
-            mergeKind === 'blocked' ||
-            mergeKind === 'checking') && <MergeStatusNotice kind={mergeKind} />}
+          {(mergeKind === 'conflict' || mergeKind === 'blocked' || mergeKind === 'checking') && (
+            <MergeStatusNotice kind={mergeKind} />
+          )}
 
           <section className={cn(embedded ? 'space-y-2' : 'space-y-3')}>
             {conversation.length > 0 && (
@@ -1326,19 +1310,12 @@ export const PrTabView = memo(function PrTabView({
         onDeleteBranch={onDeleteBranch}
         onResolveConflicts={onResolveConflicts}
         isResolvingConflicts={isResolvingConflicts}
-        menuContentClassName={
-          embedded ? 'lody-app-preview-portal-dark' : undefined
-        }
+        menuContentClassName={embedded ? 'lody-app-preview-portal-dark' : undefined}
       />
     ) : null;
 
   return (
-    <div
-      className={cn(
-        'flex h-full min-h-0 flex-col bg-background',
-        className
-      )}
-    >
+    <div className={cn('flex h-full min-h-0 flex-col bg-background', className)}>
       {embedded ? (
         /* Landing: slim bar — badge + merge only (no branch row / github chrome). */
         <div className="flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border/60 px-5">
@@ -1363,8 +1340,8 @@ export const PrTabView = memo(function PrTabView({
                 <Button
                   type="button"
                   variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground"
+                  size="small"
+                  icon
                   onClick={onRefresh}
                   aria-label={t('sessions.prTab.refresh', 'Refresh')}
                   title={t('sessions.prTab.refresh', 'Refresh')}
@@ -1378,20 +1355,20 @@ export const PrTabView = memo(function PrTabView({
                 </Button>
               )}
               <Button
-                asChild
+                render={
+                  <a
+                    href={badgeMeta.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    aria-label={t('sessions.prTab.openOnGitHub', 'Open on GitHub')}
+                  />
+                }
                 variant="ghost"
-                size="icon"
-                className="h-7 w-7 text-muted-foreground"
                 title={t('sessions.prTab.openOnGitHub', 'Open on GitHub')}
+                size="small"
+                icon
               >
-                <a
-                  href={badgeMeta.url}
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label={t('sessions.prTab.openOnGitHub', 'Open on GitHub')}
-                >
-                  <Github className="h-3.5 w-3.5" />
-                </a>
+                <Github className="h-3.5 w-3.5" />
               </Button>
               {mergeAction}
             </div>
diff --git a/packages/components/src/components/sessions/rename-session-dialog.tsx b/packages/components/src/components/sessions/rename-session-dialog.tsx
index 7c39385ed..59f0a18d3 100644
--- a/packages/components/src/components/sessions/rename-session-dialog.tsx
+++ b/packages/components/src/components/sessions/rename-session-dialog.tsx
@@ -10,8 +10,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/ui/dialog';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 import { useSessionActions } from '@/hooks/use-session-actions';
 import { isImeComposingKeyboardEvent } from '@/lib/ime';
 import { observeResizeOnAnimationFrame } from '@/lib/resize-observer';
@@ -159,11 +159,11 @@ export function RenameSessionDialogView({
         </div>
 
         <DialogFooter className="border-t border-border/70 bg-muted/30 px-4 py-3 sm:px-5">
-          <Button size="sm" variant="outline" onClick={onClose} disabled={saving}>
+          <Button variant="secondary" size="small" onClick={onClose} disabled={saving}>
             {t('common.cancel', 'Cancel')}
           </Button>
           <Button
-            size="sm"
+            size="small"
             onClick={() => {
               void handleSubmit();
             }}
diff --git a/packages/components/src/components/sessions/session-browser-panel.tsx b/packages/components/src/components/sessions/session-browser-panel.tsx
index 8a85de14f..baa536b61 100644
--- a/packages/components/src/components/sessions/session-browser-panel.tsx
+++ b/packages/components/src/components/sessions/session-browser-panel.tsx
@@ -23,7 +23,7 @@ import {
 
 import { activeWorkspaceRuntimeAtom, userAtom } from '@/atoms';
 import { getMachineMetaByIdAtomFamily } from '@/atoms/machines';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -713,12 +713,14 @@ function SessionBrowserPanelController({
       publicState?.canGoBack &&
       getPublicBrowserBridge()
     ) {
-      void getPublicBrowserBridge()?.back(`session-browser-${session.id}`).then(
-        (result) => {
-          if (!result.ok) setError(result.error);
-        },
-        (commandError: unknown) => setError(errorMessage(commandError))
-      );
+      void getPublicBrowserBridge()
+        ?.back(`session-browser-${session.id}`)
+        .then(
+          (result) => {
+            if (!result.ok) setError(result.error);
+          },
+          (commandError: unknown) => setError(errorMessage(commandError))
+        );
       return;
     }
     if (currentAddress?.engine === 'managed-preview' && managedState?.canGoBack) {
@@ -741,12 +743,14 @@ function SessionBrowserPanelController({
       publicState?.canGoForward &&
       getPublicBrowserBridge()
     ) {
-      void getPublicBrowserBridge()?.forward(`session-browser-${session.id}`).then(
-        (result) => {
-          if (!result.ok) setError(result.error);
-        },
-        (commandError: unknown) => setError(errorMessage(commandError))
-      );
+      void getPublicBrowserBridge()
+        ?.forward(`session-browser-${session.id}`)
+        .then(
+          (result) => {
+            if (!result.ok) setError(result.error);
+          },
+          (commandError: unknown) => setError(errorMessage(commandError))
+        );
       return;
     }
     if (currentAddress?.engine === 'managed-preview' && managedState?.canGoForward) {
@@ -765,12 +769,14 @@ function SessionBrowserPanelController({
 
   const handleReload = useCallback(() => {
     if (currentAddress?.engine === 'public-web' && getPublicBrowserBridge()) {
-      void getPublicBrowserBridge()?.reload(`session-browser-${session.id}`).then(
-        (result) => {
-          if (!result.ok) setError(result.error);
-        },
-        (commandError: unknown) => setError(errorMessage(commandError))
-      );
+      void getPublicBrowserBridge()
+        ?.reload(`session-browser-${session.id}`)
+        .then(
+          (result) => {
+            if (!result.ok) setError(result.error);
+          },
+          (commandError: unknown) => setError(errorMessage(commandError))
+        );
       return;
     }
     if (viewerUrl) {
@@ -788,12 +794,14 @@ function SessionBrowserPanelController({
 
   const handleStop = useCallback(() => {
     if (currentAddress?.engine === 'public-web' && getPublicBrowserBridge()) {
-      void getPublicBrowserBridge()?.stop(`session-browser-${session.id}`).then(
-        (result) => {
-          if (!result.ok) setError(result.error);
-        },
-        (commandError: unknown) => setError(errorMessage(commandError))
-      );
+      void getPublicBrowserBridge()
+        ?.stop(`session-browser-${session.id}`)
+        .then(
+          (result) => {
+            if (!result.ok) setError(result.error);
+          },
+          (commandError: unknown) => setError(errorMessage(commandError))
+        );
       return;
     }
     if (currentAddress?.engine === 'managed-preview' && annotationAvailable) {
@@ -1004,8 +1012,8 @@ function SessionBrowserPanelController({
           <Button
             type="button"
             variant="ghost"
-            size="sm"
-            className="ml-auto h-6 px-2"
+            size="small"
+            className="ml-auto"
             onClick={() => setError(null)}
           >
             {t('common.dismiss', 'Dismiss')}
diff --git a/packages/components/src/components/sessions/session-browser-toolbar.tsx b/packages/components/src/components/sessions/session-browser-toolbar.tsx
index 1ba2f46d6..e7edcd86f 100644
--- a/packages/components/src/components/sessions/session-browser-toolbar.tsx
+++ b/packages/components/src/components/sessions/session-browser-toolbar.tsx
@@ -12,7 +12,7 @@ import {
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ui/tooltip';
 import { cn } from '@/lib/utils';
 
@@ -54,8 +54,8 @@ function ToolbarButton({
         <Button
           type="button"
           variant="ghost"
-          size="icon"
-          className={cn('h-8 w-8 shrink-0', className)}
+          icon
+          className={cn('shrink-0', className)}
           aria-label={label}
           {...props}
         >
diff --git a/packages/components/src/components/sessions/session-chat-input-area.tsx b/packages/components/src/components/sessions/session-chat-input-area.tsx
index 0e8046ff9..41c16f814 100644
--- a/packages/components/src/components/sessions/session-chat-input-area.tsx
+++ b/packages/components/src/components/sessions/session-chat-input-area.tsx
@@ -13,7 +13,7 @@ import {
 } from 'react';
 import { useAtomValue } from 'jotai';
 import { ArrowUp, Loader2 } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import type { AcpSessionSelectOption } from '@/components/shared/acp-session-select';
 import { useSessionAgentRole, type SessionAgentRoleControl } from '@/hooks/use-session-agent-role';
 import { buildAgentRoleFormValueFromRunConfig } from '@/lib/agent-role-form';
@@ -2392,21 +2392,17 @@ export const SessionChatInputArea = memo(
         ) : null}
       </div>
     ) : null;
-    /* Keep desktop actions compact while preserving the mobile touch target. */
-    const primaryActionSizeClassName = isMobile ? 'h-8 w-8' : 'h-7 w-7';
     const primaryActionNode = showStopButton ? (
       <Button
+        type="button"
+        variant="primary"
+        size="medium"
+        shape="pill"
+        icon
         onClick={() => {
           void onStop();
         }}
-        variant="ghost"
-        size="icon"
         aria-label={t('sessions.stop')}
-        className={cn(
-          primaryActionSizeClassName,
-          'rounded-full shadow-xs transition-all',
-          'bg-foreground text-background hover:bg-foreground/90 hover:text-background active:translate-y-[1px]'
-        )}
       >
         <span
           className={cn('rounded-[3px] bg-current', isMobile ? 'h-3 w-3' : 'h-2.5 w-2.5')}
@@ -2416,8 +2412,10 @@ export const SessionChatInputArea = memo(
     ) : (
       <Button
         type="button"
-        size="icon"
-        variant="ghost"
+        variant="primary"
+        size="medium"
+        shape="pill"
+        icon
         onClick={() => void sendMessage()}
         disabled={!hasSendableContent || isSendActionDisabled}
         aria-label={
@@ -2425,11 +2423,6 @@ export const SessionChatInputArea = memo(
             ? externalHistorySyncLabel
             : t('sessions.send')
         }
-        className={cn(
-          primaryActionSizeClassName,
-          'rounded-full shadow-xs transition-all',
-          'bg-foreground text-background hover:bg-foreground/90 hover:text-background active:translate-y-[1px]'
-        )}
       >
         {submissionPending || hasBlockingImages || isExternalHistoryRefreshing ? (
           <Loader2 className={isMobile ? 'h-5 w-5 animate-spin' : 'h-4 w-4 animate-spin'} />
diff --git a/packages/components/src/components/sessions/session-chat-interface.tsx b/packages/components/src/components/sessions/session-chat-interface.tsx
index 5ddcdf5fd..cc5b50fc7 100644
--- a/packages/components/src/components/sessions/session-chat-interface.tsx
+++ b/packages/components/src/components/sessions/session-chat-interface.tsx
@@ -48,7 +48,7 @@ import {
   Users,
   X,
 } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { isMacOSElectronRenderer, useElectronFullscreen } from '@/lib/electron';
 import { getIpcServices } from '@/lib/electron-ipc-client';
 import { isMac } from '@/lib/commands/platform';
@@ -189,10 +189,10 @@ import {
   type SessionSharingTranslator,
 } from '@/components/session-sharing';
 
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/ui/sheet';
-import { Badge } from '@/ui/badge';
-import { Input } from '@/ui/input';
-import { Separator } from '@/ui/separator';
+import { Drawer } from '@lody/ui/drawer';
+import { Badge } from '@lody/ui/badge';
+import { Input } from '@lody/ui/input';
+import { Separator } from '@lody/ui/separator';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { useSessionDoc } from '@/hooks/use-session-doc';
 import { useSessionActions } from '@/hooks/use-session-actions';
@@ -814,9 +814,10 @@ export function SessionHistoryButton({
 
   const trigger = (
     <Button
-      variant={compact ? 'ghost' : 'outline'}
-      size={compact ? 'icon' : 'sm'}
-      className={cn('shrink-0', compact ? 'h-8 w-8' : '')}
+      variant={compact ? 'ghost' : 'secondary'}
+      size="small"
+      icon={compact}
+      className="shrink-0"
       disabled={historySessions.length === 0}
     >
       <History className={cn('h-4 w-4', compact ? '' : 'mr-2')} />
@@ -825,13 +826,13 @@ export function SessionHistoryButton({
   );
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>{trigger}</SheetTrigger>
-      <SheetContent side={isMobile ? 'bottom' : 'right'} className="sm:max-w-md">
-        <SheetHeader>
-          <SheetTitle>{t('sessions.history', 'History')}</SheetTitle>
+    <Drawer.Root side={isMobile ? 'bottom' : 'end'} open={open} onOpenChange={setOpen}>
+      <Drawer.Trigger render={trigger} />
+      <Drawer.Content side={isMobile ? 'bottom' : 'end'} className="sm:max-w-md">
+        <Drawer.Header>
+          <Drawer.Title>{t('sessions.history', 'History')}</Drawer.Title>
           <p className="text-sm text-muted-foreground">{t('sessions.newSession.title')}</p>
-        </SheetHeader>
+        </Drawer.Header>
         <div className="mt-6 space-y-2">
           {historySessions.length === 0 ? (
             <div className="text-sm text-muted-foreground">{t('sessions.noSessions')}</div>
@@ -877,7 +878,7 @@ export function SessionHistoryButton({
                       </div>
                     </div>
                     {isActive && (
-                      <Badge variant="secondary">{t('common.current', 'Current')}</Badge>
+                      <Badge>{t('common.current', 'Current')}</Badge>
                     )}
                   </div>
                 </button>
@@ -885,8 +886,8 @@ export function SessionHistoryButton({
             })
           )}
         </div>
-      </SheetContent>
-    </Sheet>
+      </Drawer.Content>
+    </Drawer.Root>
   );
 }
 
@@ -1156,8 +1157,9 @@ export function SessionHeaderMenu({
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            size="icon"
-            className="h-7 w-7 shrink-0 text-muted-foreground"
+            size="small"
+            icon
+            className="shrink-0"
             aria-label={t('sessions.moreActions', 'More actions')}
           >
             <Ellipsis className="h-4 w-4" />
@@ -1393,8 +1395,8 @@ export function SessionHeaderMenu({
                     >
                       <UserAvatar
                         user={{ id: member.userId, name: member.name, image: member.image }}
-                        className="h-4 w-4 shrink-0"
-                        fallbackClassName="text-[0.55rem]"
+                        size="mini"
+                        className="shrink-0"
                       />
                       <span className="min-w-0 flex-1 truncate">{member.name}</span>
                       {isPending ? (
@@ -1621,8 +1623,9 @@ export function SessionSearchBar({
       <Button
         type="button"
         variant="ghost"
-        size="icon"
-        className="h-7 w-7 shrink-0 rounded-md text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground disabled:pointer-events-none disabled:text-muted-foreground/40"
+        size="small"
+        icon
+        className="shrink-0 disabled:pointer-events-none"
         disabled={!hasResults}
         onClick={onClick}
         aria-label={label}
@@ -1704,7 +1707,7 @@ export function SessionSearchBar({
           </span>
         )}
 
-        <Separator orientation="vertical" className="mx-0.5 h-5 bg-border/60" />
+        <Separator orientation="vertical" className="mx-0.5 h-5" />
 
         <div className="flex items-center gap-px">
           {renderNavButton(
@@ -1719,8 +1722,9 @@ export function SessionSearchBar({
               <Button
                 type="button"
                 variant="ghost"
-                size="icon"
-                className="h-7 w-7 shrink-0 rounded-md text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground"
+                size="small"
+                icon
+                className="shrink-0"
                 onClick={onClose}
                 aria-label={t('common.close', 'Close')}
               >
@@ -5657,22 +5661,16 @@ export const SessionChatInterface = memo(
       <>
         {shouldShowOpenInIdeButton && isElectronRendererForPathLaunch && (
           <div className="flex items-center">
-            <Button
-              className="h-6 px-2 py-1 rounded-r-none border-r-0 gap-1"
-              variant="outline"
-              size="sm"
-              onClick={handleOpenInIde}
-            >
+            <Button size="small" variant="secondary" onClick={handleOpenInIde}>
               <SelectedPathLauncherIcon className="h-3.5 w-3.5" />
               <span className="text-xs">{selectedPathLauncher.label}</span>
             </Button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  className="h-6 px-1 py-1 rounded-l-none"
-                  variant="outline"
-                  size="sm"
+                  variant="secondary"
                   aria-label={t('sessions.selectPathLauncher', 'Select launcher')}
+                  size="small"
                 >
                   <ChevronDown className="h-3 w-3" />
                 </Button>
diff --git a/packages/components/src/components/sessions/session-conversation-diff-panel.tsx b/packages/components/src/components/sessions/session-conversation-diff-panel.tsx
index 1b3b2ae42..7595d8404 100644
--- a/packages/components/src/components/sessions/session-conversation-diff-panel.tsx
+++ b/packages/components/src/components/sessions/session-conversation-diff-panel.tsx
@@ -28,7 +28,7 @@ import {
 } from './diff-pr-analytics';
 import { DiffViewer } from '@/ui/diff-viewer/diff-viewer';
 import { ScrollArea } from '@/ui/scroll-area';
-import { Skeleton } from '@/ui/skeleton';
+import { Skeleton } from '@lody/ui/skeleton';
 import { cn } from '@/lib/utils';
 import { observeDiffPerfLongTasks } from '@/lib/diff-perf';
 import { FileIcon } from '@/components/icons/file-icons';
@@ -72,11 +72,11 @@ function FileDiffSkeleton({
         </div>
       </div>
       <div className="space-y-1.5 px-4 py-3">
-        <Skeleton className="h-3 w-full" />
-        <Skeleton className="h-3 w-11/12" />
-        <Skeleton className="h-3 w-4/5" />
-        <Skeleton className="h-3 w-full" />
-        <Skeleton className="h-3 w-3/4" />
+        <Skeleton width="100%" height={12} />
+        <Skeleton width="91%" height={12} />
+        <Skeleton width="80%" height={12} />
+        <Skeleton width="100%" height={12} />
+        <Skeleton width="75%" height={12} />
       </div>
     </div>
   );
diff --git a/packages/components/src/components/sessions/session-conversation-page.tsx b/packages/components/src/components/sessions/session-conversation-page.tsx
index 8924fd00e..46b5ac57e 100644
--- a/packages/components/src/components/sessions/session-conversation-page.tsx
+++ b/packages/components/src/components/sessions/session-conversation-page.tsx
@@ -4,7 +4,6 @@ import {
   ConversationDropOverlay,
   type ConversationDropKind,
 } from '@/components/shared/conversation-drop-overlay';
-import { CardHeader } from '@/ui/card';
 import { cn } from '@/lib/utils';
 
 export interface SessionConversationPageHeaderProps {
@@ -27,7 +26,7 @@ export function SessionConversationPageHeader({
   reserveMacTrafficLightInset = false,
 }: SessionConversationPageHeaderProps) {
   return (
-    <CardHeader
+    <div
       className={cn(
         'flex flex-col justify-center gap-1 border-b border-border px-3 py-2 shrink-0 h-12',
         nativeApp &&
@@ -48,7 +47,7 @@ export function SessionConversationPageHeader({
           {endSlot}
         </div>
       </div>
-    </CardHeader>
+    </div>
   );
 }
 
diff --git a/packages/components/src/components/sessions/session-detail.tsx b/packages/components/src/components/sessions/session-detail.tsx
index 13639ab0b..d81af4a25 100644
--- a/packages/components/src/components/sessions/session-detail.tsx
+++ b/packages/components/src/components/sessions/session-detail.tsx
@@ -23,7 +23,7 @@ import {
   Users,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { useRouter } from '@tanstack/react-router';
 import { useComposerNavigationFocus } from '../chat/submission/use-composer-navigation-focus';
 import { usePostHog } from '@posthog/react';
@@ -181,7 +181,9 @@ import {
 import { isSessionMarkdownPath } from '@/lib/session-file-language';
 import { SessionNotFound } from './session-not-found';
 import { SessionSyncingIndicator } from './session-syncing-indicator';
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/ui/sheet';
+// Aliased while the vaul drawer below still holds the bare name; the two
+// merge when the mobile drawers migrate onto this primitive.
+import { Drawer as UiDrawer } from '@lody/ui/drawer';
 import { Drawer, DrawerContent, DrawerTitle } from '@/ui/drawer';
 import { VaulDrawerBody } from '@/components/mobile/vaul-drawer-edge-back-zone';
 import {
@@ -673,12 +675,13 @@ const TerminalDockToggleButton = memo(function TerminalDockToggleButton() {
     <Button
       type="button"
       variant="ghost"
-      size="icon"
+      size="small"
+      icon
       disabled={!canCreate}
       onClick={() => store.get(terminalControllerAtom)?.toggleOpen()}
       aria-label={label}
       title={label}
-      className={cn('h-7 w-7 shrink-0 text-muted-foreground', isOpen && 'text-foreground')}
+      className={cn('shrink-0', isOpen && '')}
     >
       <PanelBottom className="h-4 w-4" />
     </Button>
@@ -4572,7 +4575,7 @@ const SessionDetail = ({
           <p className="text-sm text-muted-foreground">
             {t('sessions.tabWaitingForSync', 'Waiting for this conversation to sync…')}
           </p>
-          <Button variant="ghost" size="sm" onClick={() => handleSessionTabSelect(sessionId)}>
+          <Button variant="ghost" size="small" onClick={() => handleSessionTabSelect(sessionId)}>
             {t('sessions.tabBackToMain', 'Back to main conversation')}
           </Button>
         </>
@@ -4598,7 +4601,7 @@ const SessionDetail = ({
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button variant="outline" onClick={() => setDeleteConfirmOpen(false)}>
+          <Button variant="secondary" onClick={() => setDeleteConfirmOpen(false)}>
             {t('common.cancel', 'Cancel')}
           </Button>
           <Button
@@ -4636,7 +4639,7 @@ const SessionDetail = ({
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button variant="outline" onClick={() => setArchiveConfirmOpen(false)}>
+          <Button variant="secondary" onClick={() => setArchiveConfirmOpen(false)}>
             {t('common.cancel', 'Cancel')}
           </Button>
           <Button
@@ -4700,7 +4703,7 @@ const SessionDetail = ({
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button variant="outline" onClick={cancelDirtyFork}>
+          <Button variant="secondary" onClick={cancelDirtyFork}>
             {t('common.cancel', 'Cancel')}
           </Button>
           <Button
@@ -5242,16 +5245,17 @@ const SessionDetail = ({
         </div>
 
         {/* Mobile diff sheet */}
-        <Sheet
+        <UiDrawer.Root
+          side="bottom"
           open={mobileDiffState !== null}
           onOpenChange={(open) => !open && handleCloseMobileDiff()}
         >
-          <SheetContent side="bottom" className="h-[85vh] flex flex-col p-0">
-            <SheetHeader className="shrink-0 border-b border-border px-4 py-3">
-              <SheetTitle className="text-sm font-medium">
+          <UiDrawer.Content side="bottom" className="h-[85vh] flex flex-col p-0">
+            <UiDrawer.Header className="shrink-0 border-b border-border px-4 py-3">
+              <UiDrawer.Title className="text-sm font-medium">
                 {t('sessions.diffTab', 'Changes')}
-              </SheetTitle>
-            </SheetHeader>
+              </UiDrawer.Title>
+            </UiDrawer.Header>
             <div className="flex-1 min-h-0 overflow-hidden">
               {mobileDiffState && (
                 <SessionConversationDiffPanel
@@ -5296,8 +5300,8 @@ const SessionDetail = ({
                 />
               )}
             </div>
-          </SheetContent>
-        </Sheet>
+          </UiDrawer.Content>
+        </UiDrawer.Root>
         {viewerTabs
           .filter((tab): tab is Extract<ViewerTab, { type: 'file' }> => tab.type === 'file')
           .map((tab) => {
@@ -5371,7 +5375,7 @@ const SessionDetail = ({
                   <Button
                     type="button"
                     variant="ghost"
-                    size="icon"
+                    icon
                     className={getSessionDetailTouchIconButtonClassName('-ml-1')}
                     /* Same order as the edge swipe: pop a directory level
                        first, close the drawer only at the root. */
@@ -5444,7 +5448,7 @@ const SessionDetail = ({
                     <Button
                       type="button"
                       variant="ghost"
-                      size="icon"
+                      icon
                       className={getSessionDetailTouchIconButtonClassName('-ml-1')}
                       onClick={handleClosePrTab}
                       aria-label={t('common.back', 'Back')}
@@ -5509,7 +5513,7 @@ const SessionDetail = ({
                     <Button
                       type="button"
                       variant="ghost"
-                      size="icon"
+                      icon
                       className={getSessionDetailTouchIconButtonClassName('-ml-1')}
                       onClick={handleCloseBrowserTab}
                       aria-label={t('common.back', 'Back')}
@@ -5643,14 +5647,15 @@ const SessionDetail = ({
     <Button
       type="button"
       variant="ghost"
-      size="icon"
+      size="small"
+      icon
       onClick={handleToggleSidebar}
       aria-label={
         isSidebarVisible
           ? t('sessions.sidebar.hide', 'Hide sidebar')
           : t('sessions.sidebar.show', 'Show sidebar')
       }
-      className={cn('h-7 w-7 shrink-0 text-muted-foreground', !isSidebarVisible && 'mr-[9px]')}
+      className={cn('shrink-0', !isSidebarVisible && 'mr-[9px]')}
     >
       <PanelRight className="h-4 w-4" />
     </Button>
@@ -5660,10 +5665,11 @@ const SessionDetail = ({
     <Button
       type="button"
       variant="ghost"
-      size="icon"
+      size="small"
+      icon
       onClick={() => showNavigationSidebar()}
       aria-label={t('sessions.leftSidebar.show', 'Show navigation sidebar')}
-      className="h-7 w-7 shrink-0 text-muted-foreground"
+      className="shrink-0"
     >
       <PanelLeft className="h-4 w-4" />
     </Button>
diff --git a/packages/components/src/components/sessions/session-file-content-view.tsx b/packages/components/src/components/sessions/session-file-content-view.tsx
index 9fcc7d9a1..7856c3e77 100644
--- a/packages/components/src/components/sessions/session-file-content-view.tsx
+++ b/packages/components/src/components/sessions/session-file-content-view.tsx
@@ -81,7 +81,7 @@ import {
   type SessionFileLiveSyncStatus,
   type SessionFileSaveStatus,
 } from '@/hooks/use-code-collab-save-text';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { useCodeCollabLsp, type CodeCollabLspState } from '@/hooks/use-code-collab-lsp';
 import { useLatestRef } from '@/hooks/use-latest-ref';
@@ -1983,18 +1983,12 @@ export function SessionFileConflictActionRow({
       <span className="ml-auto flex gap-1.5">
         {pendingOverride ? (
           <>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="h-6 px-2 text-[11px]"
-              onClick={() => setPendingOverride(false)}
-            >
+            <Button variant="ghost" size="small" onClick={() => setPendingOverride(false)}>
               {t('common.cancel', 'Cancel')}
             </Button>
             <Button
-              size="sm"
               variant="destructive"
-              className="h-6 px-2 text-[11px]"
+              size="small"
               onClick={() => {
                 setPendingOverride(false);
                 void onResolveConflict('override');
@@ -2006,37 +2000,33 @@ export function SessionFileConflictActionRow({
         ) : (
           <>
             <Button
-              size="sm"
               variant="ghost"
-              className="h-6 px-2 text-[11px]"
               title={t(
                 'sessions.fileSave.conflictDiscardHint',
                 'Throw away your local edits and reload from disk.'
               )}
+              size="small"
               onClick={() => void onResolveConflict('discard')}
             >
               {t('sessions.fileSave.conflictDiscard', 'Discard my edits')}
             </Button>
             <Button
-              size="sm"
               variant="ghost"
-              className="h-6 px-2 text-[11px]"
               title={t(
                 'sessions.fileSave.conflictMarkersHint',
                 'Reload with <<<<<<< / >>>>>>> conflict markers so you can resolve by hand.'
               )}
+              size="small"
               onClick={() => void onResolveConflict('load_with_conflicts')}
             >
               {t('sessions.fileSave.conflictMarkers', 'Insert conflict markers')}
             </Button>
             <Button
-              size="sm"
-              variant="default"
-              className="h-6 px-2 text-[11px]"
               title={t(
                 'sessions.fileSave.conflictOverrideHint',
                 'Replace the disk version with your edits. Concurrent changes will be lost.'
               )}
+              size="small"
               onClick={() => setPendingOverride(true)}
             >
               {t('sessions.fileSave.conflictOverride', 'Overwrite disk')}
@@ -2079,7 +2069,7 @@ function SessionFileLspPanel({
     <div className="flex flex-col gap-1 border-t border-border bg-muted/30 px-3 py-2 text-xs">
       <div className="flex items-center justify-between gap-2">
         <span className="font-medium text-foreground">{actionLabel}</span>
-        <Button size="sm" variant="ghost" onClick={onDismiss}>
+        <Button variant="ghost" size="small" onClick={onDismiss}>
           {t('sessions.lsp.dismiss', 'Dismiss')}
         </Button>
       </div>
diff --git a/packages/components/src/components/sessions/session-file-error-state.tsx b/packages/components/src/components/sessions/session-file-error-state.tsx
index 7b69bc8f6..bf284f1ee 100644
--- a/packages/components/src/components/sessions/session-file-error-state.tsx
+++ b/packages/components/src/components/sessions/session-file-error-state.tsx
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
 // The action model is shared with the file tree context menu and the side
 // panel ⋯ menu; the card is one consumer of it, not its owner.
 import type { SessionFileErrorActions } from '@/lib/session-file-actions';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 type Translation = (key: string, defaultValue: string, options?: Record<string, unknown>) => string;
 
@@ -304,7 +304,7 @@ export function SessionFileErrorState({
             {localHost ? (
               <>
                 <Button
-                  size="sm"
+                  size="small"
                   variant="secondary"
                   className={ACTION_BUTTON_CLASS}
                   onClick={localHost.onOpen}
@@ -316,7 +316,7 @@ export function SessionFileErrorState({
                     : t('sessions.fileActions.openInDefaultApp', 'Open in default app')}
                 </Button>
                 <Button
-                  size="sm"
+                  size="small"
                   variant="ghost"
                   className={ACTION_BUTTON_CLASS}
                   onClick={localHost.onReveal}
@@ -328,7 +328,7 @@ export function SessionFileErrorState({
               </>
             ) : null}
             <Button
-              size="sm"
+              size="small"
               // Without the local-host pair this is the only way out of the
               // card, so it leads instead of trailing them.
               variant={localHost ? 'ghost' : 'secondary'}
diff --git a/packages/components/src/components/sessions/session-goal-banner.tsx b/packages/components/src/components/sessions/session-goal-banner.tsx
index 6dd316f4d..7bd8820f1 100644
--- a/packages/components/src/components/sessions/session-goal-banner.tsx
+++ b/packages/components/src/components/sessions/session-goal-banner.tsx
@@ -11,7 +11,7 @@ import {
 import { ChevronDown, Clock, Loader2, Pause, Play, Target, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { getGoalStatusPresentation } from '@/lib/session-goal-status';
 import { formatDurationCompact, type DurationUnitLabels } from '@/lib/format-duration';
@@ -63,18 +63,14 @@ export const GoalActionButton = ({
   return (
     <Button
       type="button"
-      variant="outline"
-      size="sm"
+      variant="secondary"
+      size="small"
       disabled={disabled}
       onClick={onClick}
       className={cn(
-        'h-7 gap-1.5 rounded-md px-2.5 text-xs font-medium',
-        'bg-background/70 backdrop-blur-xs',
         tone === 'success' &&
           'border-status-success/40 text-status-success hover:text-status-success hover:bg-status-success/10',
-        tone === 'danger' &&
-          'border-destructive/40 text-destructive hover:text-destructive hover:bg-destructive/10',
-        tone === 'default' && 'text-foreground/80 hover:text-foreground'
+        tone === 'danger' && 'text-destructive'
       )}
     >
       {loading ? (
@@ -311,11 +307,12 @@ export const SessionGoalBanner = memo(function SessionGoalBanner({
               <Button
                 type="button"
                 variant="ghost"
-                size="icon"
+                size="small"
+                icon
                 onClick={() => onDismiss(goal)}
                 aria-label={t('sessions.goal.actions.dismiss', 'Dismiss goal banner')}
                 title={t('sessions.goal.actions.dismiss', 'Dismiss goal banner')}
-                className="h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground"
+                className="shrink-0"
               >
                 <X className="h-3.5 w-3.5" aria-hidden="true" />
               </Button>
diff --git a/packages/components/src/components/sessions/session-info-chips.tsx b/packages/components/src/components/sessions/session-info-chips.tsx
index 8b63ac331..dc6f1bdc1 100644
--- a/packages/components/src/components/sessions/session-info-chips.tsx
+++ b/packages/components/src/components/sessions/session-info-chips.tsx
@@ -32,7 +32,7 @@ import {
   type SessionPullRequestMeta,
 } from '@lody/shared';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { writeTextToClipboard } from '@/lib/clipboard';
 import { getGoalStatusPresentation } from '@/lib/session-goal-status';
 import { formatDurationCompact, type DurationUnitLabels } from '@/lib/format-duration';
@@ -273,11 +273,12 @@ export function GoalChip({
                   <Button
                     type="button"
                     variant="ghost"
-                    size="icon"
+                    size="small"
+                    icon
                     onClick={() => onDismiss?.(goal)}
                     aria-label={t('sessions.goal.actions.dismiss', 'Dismiss goal banner')}
                     title={t('sessions.goal.actions.dismiss', 'Dismiss goal banner')}
-                    className="h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground"
+                    className="shrink-0"
                   >
                     <X className="h-3.5 w-3.5" aria-hidden="true" />
                   </Button>
diff --git a/packages/components/src/components/sessions/session-not-found.tsx b/packages/components/src/components/sessions/session-not-found.tsx
index 66139c885..6e532d19f 100644
--- a/packages/components/src/components/sessions/session-not-found.tsx
+++ b/packages/components/src/components/sessions/session-not-found.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from '@tanstack/react-router';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { ArrowLeft, MessageSquareOff } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAtomValue } from 'jotai';
@@ -54,7 +54,7 @@ export function SessionNotFound({ onBack }: SessionNotFoundProps) {
           )}
         </p>
 
-        <Button onClick={handleBack} variant="outline" className="gap-2">
+        <Button onClick={handleBack} variant="secondary">
           <ArrowLeft className="h-4 w-4" />
           {t('sessions.notFound.backToList', 'Back to Sessions')}
         </Button>
diff --git a/packages/components/src/components/sessions/session-pin.tsx b/packages/components/src/components/sessions/session-pin.tsx
index 33d054a7b..59544dce3 100644
--- a/packages/components/src/components/sessions/session-pin.tsx
+++ b/packages/components/src/components/sessions/session-pin.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useMemo } from 'react';
 import { Pin, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import type { SessionHistoryParsed } from '@lody/shared';
 import { useTranslation } from 'react-i18next';
 import { ConversationColumn } from '@/components/shared/conversation-column';
@@ -61,7 +61,7 @@ export const SessionPin = memo(function SessionPin({
         <Button
           type="button"
           variant="ghost"
-          className="flex-1 min-w-0 truncate h-auto py-2 px-0 text-sm text-left text-foreground/80 cursor-pointer hover:text-foreground hover:bg-transparent transition-colors justify-start"
+          className="flex-1 min-w-0 truncate text-left cursor-pointer justify-start"
           onClick={handleClick}
           title={pinnedText}
         >
@@ -70,8 +70,9 @@ export const SessionPin = memo(function SessionPin({
         <Button
           type="button"
           variant="ghost"
-          size="icon"
-          className="shrink-0 h-6 w-6 text-muted-foreground hover:text-foreground"
+          size="mini"
+          icon
+          className="shrink-0"
           onClick={onUnpin}
           aria-label={t('sessions.pin.unpin', 'Unpin message')}
         >
diff --git a/packages/components/src/components/sessions/session-plan-bar.tsx b/packages/components/src/components/sessions/session-plan-bar.tsx
index beae086fc..f7637cbd0 100644
--- a/packages/components/src/components/sessions/session-plan-bar.tsx
+++ b/packages/components/src/components/sessions/session-plan-bar.tsx
@@ -6,7 +6,7 @@ import type { SessionPlanEntry } from '@lody/shared';
 
 import { CarbonInProgress } from '@/components/icons/carbon-in-progress';
 import { cn } from '@/lib/utils';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ui/collapsible';
+import { Collapsible } from '@lody/ui/collapsible';
 
 type SessionPlanBarProps = {
   entries?: SessionPlanEntry[] | null;
@@ -67,32 +67,37 @@ export const SessionPlanBar = ({
   const summaryText = summary ? summary.content : t('codexMessage.plan.empty', 'Plan cleared');
 
   return (
-    <Collapsible defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>
+    <Collapsible.Root defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>
       <div className={cn('rounded-lg border bg-muted/30 px-3 py-2', className)}>
-        <CollapsibleTrigger asChild>
-          <button
-            type="button"
-            className={cn(
-              'group flex w-full items-center justify-between gap-3 text-left',
-              'focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
-            )}
-          >
-            <div className="flex min-w-0 items-center gap-2">
-              <PlanStatusIcon status={summary?.status ?? 'pending'} />
-              <span className="min-w-0 truncate text-sm font-medium">
-                {statusLabel}: {summaryText}
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-xs text-muted-foreground">
-                {completedCount}/{totalCount}
-              </span>
-              <ChevronRight className="h-4 w-4 transition-transform group-data-[state=open]:rotate-90" />
-            </div>
-          </button>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="mt-2 border-t border-border/60 pt-2">
-          <ul className="space-y-1">
+        <Collapsible.Trigger
+          render={
+            <button
+              type="button"
+              className={cn(
+                'group flex w-full items-center justify-between gap-3 text-left',
+                'focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+              )}
+            />
+          }
+        >
+          <div className="flex min-w-0 items-center gap-2">
+            <PlanStatusIcon status={summary?.status ?? 'pending'} />
+            <span className="min-w-0 truncate text-sm font-medium">
+              {statusLabel}: {summaryText}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">
+              {completedCount}/{totalCount}
+            </span>
+            <ChevronRight className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-90" />
+          </div>
+        </Collapsible.Trigger>
+        <Collapsible.Panel className="mt-2">
+          {/* The rule and the space above the list ride on a child: the panel's
+              own height is what the reveal animates, and Base UI measures it
+              with `scrollHeight`, which counts padding. */}
+          <ul className="space-y-1 border-t border-border/60 pt-2">
             {safeEntries.map((entry, index) => (
               <li
                 key={`${index}-${entry.content}`}
@@ -105,9 +110,9 @@ export const SessionPlanBar = ({
               </li>
             ))}
           </ul>
-        </CollapsibleContent>
+        </Collapsible.Panel>
       </div>
-    </Collapsible>
+    </Collapsible.Root>
   );
 };
 
diff --git a/packages/components/src/components/sessions/session-usage-popover.tsx b/packages/components/src/components/sessions/session-usage-popover.tsx
index 614dc4aa4..99c9bece5 100644
--- a/packages/components/src/components/sessions/session-usage-popover.tsx
+++ b/packages/components/src/components/sessions/session-usage-popover.tsx
@@ -5,14 +5,14 @@ import { enUS, zhCN } from 'date-fns/locale';
 import { getServerNow, type SessionContextWindowUsage } from '@lody/shared';
 import { Loader2 } from 'lucide-react';
 
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   CodexResetForecastDialogHost,
   CodexResetForecastUsageRow,
 } from '@/components/codex-reset/codex-reset-forecast-entry';
 import { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';
-import { Progress } from '@/ui/progress';
-import { Separator } from '@/ui/separator';
+import { Progress } from '@lody/ui/progress';
+import { Separator } from '@lody/ui/separator';
 import { formatCompactNumber } from '@/lib/format-compact-number';
 import { toIntlLocaleOrEn } from '@/lib/intl-locale';
 import { cn } from '@/lib/utils';
@@ -124,11 +124,8 @@ export const SessionUsagePopover = memo(function SessionUsagePopover({
           <Button
             type="button"
             variant="ghost"
-            size="sm"
-            className={cn(
-              'h-7 select-none gap-1 rounded-md px-1.5 font-normal text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring',
-              className
-            )}
+            size="small"
+            className={cn('select-none focus-visible:ring-1 focus-visible:ring-ring', className)}
             aria-label={triggerLabel}
             title={triggerLabel}
           >
@@ -174,7 +171,7 @@ export const SessionUsagePopover = memo(function SessionUsagePopover({
           ) : null}
 
           {(context || isContextCompacting) && hasRateLimitDetails ? (
-            <Separator className="my-2.5 bg-border/60" />
+            <Separator className="my-2.5" />
           ) : null}
 
           {hasRateLimitDetails ? (
@@ -318,8 +315,9 @@ function UsageMeter({
       </div>
       <Progress
         value={value}
+        tone="neutral"
         aria-label={`${label}: ${valueLabel}`}
-        className="mt-1 h-1 bg-foreground/10 [&>div]:bg-foreground/55"
+        className="mt-1"
       />
       {detail ? (
         <div className="mt-1 truncate text-[10px] leading-3.5 text-muted-foreground/75">
diff --git a/packages/components/src/components/settings/about-setting.tsx b/packages/components/src/components/settings/about-setting.tsx
index 821969f69..773cdcef2 100644
--- a/packages/components/src/components/settings/about-setting.tsx
+++ b/packages/components/src/components/settings/about-setting.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { useAtom } from 'jotai';
 import { Loader2, CheckCircle2, AlertCircle, Download, ExternalLink } from 'lucide-react';
 import type { ElectronUpdaterPhase } from '@lody/shared';
-import { Button } from '@/ui/button';
-import { Switch } from '@/ui/switch';
+import { Button } from '@lody/ui/button';
+import { Switch } from '@lody/ui/switch';
 import { BetaFeaturesSection } from './beta-features-setting';
 import { CompactRow, CompactSection } from './compact-layout';
 import { settingContainerClass } from '.';
@@ -147,18 +147,13 @@ export function AboutSettingsComponent() {
           <JoinCommunityButton />
         </CompactRow>
         <CompactRow label={t('settings.about.downloadApps', 'Download apps')}>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 px-2.5"
-            onClick={handleOpenDownloadPage}
-          >
+          <Button variant="secondary" size="small" onClick={handleOpenDownloadPage}>
             <ExternalLink className="mr-1 h-3.5 w-3.5" />
             {t('settings.about.openDownloadPage', 'Open download page')}
           </Button>
         </CompactRow>
         <CompactRow label={t('settings.about.website', 'Website')}>
-          <Button variant="outline" size="sm" className="h-7 px-2.5" onClick={handleOpenWebsite}>
+          <Button variant="secondary" size="small" onClick={handleOpenWebsite}>
             <ExternalLink className="mr-1 h-3.5 w-3.5" />
             {t('settings.about.visitWebsite', 'Visit website')}
           </Button>
@@ -202,8 +197,7 @@ export function AboutSettingsComponent() {
             )}
             {isDownloaded ? (
               <Button
-                size="sm"
-                className="h-7 px-2.5"
+                size="small"
                 onClick={() => {
                   void handleQuitAndInstall();
                 }}
@@ -218,9 +212,8 @@ export function AboutSettingsComponent() {
               </Button>
             ) : (
               <Button
-                variant="outline"
-                size="sm"
-                className="h-7 px-2.5"
+                variant="secondary"
+                size="small"
                 onClick={() => {
                   void handleCheckForUpdates();
                 }}
diff --git a/packages/components/src/components/settings/account-machines-overview.tsx b/packages/components/src/components/settings/account-machines-overview.tsx
index c58fd3c45..9da005ad4 100644
--- a/packages/components/src/components/settings/account-machines-overview.tsx
+++ b/packages/components/src/components/settings/account-machines-overview.tsx
@@ -24,8 +24,8 @@ import { useVisibleLocalProjectsFromMachineIndex } from '@/hooks/use-visible-loc
 import { useVisibleMachineMetas } from '@/hooks/use-visible-machine-metas';
 import { isElectronRenderer } from '@/lib/electron';
 import { cn } from '@/lib/utils';
-import { Badge } from '@/ui/badge';
-import { Button } from '@/ui/button';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ui/tooltip';
 
 export type AccountMachineDirectory = {
@@ -177,8 +177,9 @@ export function AccountMachinesOverviewView({
               <Button
                 type="button"
                 variant="ghost"
-                size="icon"
-                className="h-7 w-7 shrink-0 text-muted-foreground"
+                size="small"
+                icon
+                className="shrink-0"
                 aria-label={t('settings.account.machines.privacyHelpLabel', 'About private access')}
               >
                 <CircleHelp className="h-3.5 w-3.5" strokeWidth={1.75} />
@@ -236,10 +237,7 @@ export function AccountMachinesOverviewView({
                           {item.name}
                         </button>
                         {item.id === currentMachineId ? (
-                          <Badge
-                            variant="secondary"
-                            className="shrink-0 px-1.5 py-0 text-[10px] font-medium text-muted-foreground"
-                          >
+                          <Badge>
                             {t('settings.account.machines.localMachine', 'This machine')}
                           </Badge>
                         ) : null}
@@ -268,8 +266,8 @@ export function AccountMachinesOverviewView({
                   <Button
                     type="button"
                     variant="ghost"
-                    size="sm"
-                    className="h-8 justify-between gap-2 bg-foreground/[0.04] px-2 text-xs hover:bg-foreground/[0.08]"
+                    size="small"
+                    className="justify-between"
                     onClick={() => toggleDirectories(item.id)}
                     aria-expanded={expanded}
                   >
@@ -295,8 +293,8 @@ export function AccountMachinesOverviewView({
                       <Button
                         type="button"
                         variant="ghost"
-                        size="icon"
-                        className="hidden h-8 w-8 text-muted-foreground md:inline-flex"
+                        icon
+                        className="hidden"
                         onClick={() => onManageMachine(item.id)}
                         aria-label={t('settings.account.machines.manageMachine', {
                           name: item.name,
@@ -324,8 +322,7 @@ export function AccountMachinesOverviewView({
                         </span>
                         <Button
                           variant="ghost"
-                          size="sm"
-                          className="h-7 text-xs"
+                          size="small"
                           onClick={() => onOpenDirectories(item.id)}
                         >
                           {t('settings.account.machines.openProjects', 'Open Projects')}
@@ -387,8 +384,8 @@ function AgentStackButton({ agents, onClick }: { agents: AgentConfigMeta[]; onCl
         <Button
           type="button"
           variant="ghost"
-          size="sm"
-          className="h-8 min-w-0 justify-between gap-2 bg-foreground/[0.04] px-2 hover:bg-foreground/[0.08]"
+          size="small"
+          className="min-w-0 justify-between"
           onClick={onClick}
           aria-label={t('settings.account.machines.configureAgents', 'Configure Agents')}
         >
diff --git a/packages/components/src/components/settings/account-setting-pure.tsx b/packages/components/src/components/settings/account-setting-pure.tsx
index e7e893601..fa84bd36c 100644
--- a/packages/components/src/components/settings/account-setting-pure.tsx
+++ b/packages/components/src/components/settings/account-setting-pure.tsx
@@ -17,10 +17,10 @@ import {
   Pencil,
   X,
 } from 'lucide-react';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
-import { Badge } from '@/ui/badge';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
+import { Badge } from '@lody/ui/badge';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -607,8 +607,7 @@ export function AccountSettingsPure({
           <CompactRow label={t('settings.account.signOut')}>
             <Button
               variant="ghost"
-              size="sm"
-              className="bg-foreground/[0.06] hover:bg-foreground/[0.1]"
+              size="small"
               onClick={() => {
                 void onSignOut();
               }}
@@ -694,8 +693,8 @@ export function AccountSettingsPure({
               <div className="space-y-3 py-4 text-sm">
                 <p className="text-muted-foreground">{t('settings.account.cliAuth.usageHint')}</p>
                 <Button
-                  variant="outline"
-                  size="sm"
+                  variant="secondary"
+                  size="small"
                   onClick={() => {
                     void onCopyGeneratedCliApiKey?.();
                   }}
@@ -707,7 +706,9 @@ export function AccountSettingsPure({
               </div>
             ) : (
               <div className="space-y-2 py-4">
-                <Label htmlFor="cli-api-key-note">{t('settings.account.cliAuth.noteLabel')}</Label>
+                <UiField.Label htmlFor="cli-api-key-note">
+                  {t('settings.account.cliAuth.noteLabel')}
+                </UiField.Label>
                 <Input
                   id="cli-api-key-note"
                   value={cliApiKeyNote}
@@ -722,8 +723,8 @@ export function AccountSettingsPure({
             )}
             <DialogFooter>
               <Button
-                variant="outline"
-                size="sm"
+                variant="secondary"
+                size="small"
                 onClick={() => handleCliApiKeyDialogOpenChange(false)}
                 disabled={isCreatingCliApiKey}
               >
@@ -731,7 +732,7 @@ export function AccountSettingsPure({
               </Button>
               {!hasGeneratedCliApiKey && (
                 <Button
-                  size="sm"
+                  size="small"
                   onClick={() => {
                     void handleCreateCliApiKey();
                   }}
@@ -775,7 +776,7 @@ export function AccountSettingsPure({
                   })();
                 }}
                 disabled={!cliApiKeyToRevoke || Boolean(revokingCliApiKeyId)}
-                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                variant="destructive"
               >
                 {revokingCliApiKeyId ? (
                   <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
@@ -796,9 +797,9 @@ export function AccountSettingsPure({
           actions={
             hasAdminPermission && (
               <Button
-                size="icon"
                 variant="ghost"
                 aria-label={t('workspace.members.invite')}
+                icon
                 onClick={() => setInviteDialogOpen(true)}
               >
                 <UserPlus className="h-4 w-4" />
@@ -812,7 +813,7 @@ export function AccountSettingsPure({
 
             return (
               <div key={member.id} className="flex items-center gap-3 px-3 py-2.5 text-sm">
-                <UserAvatar user={member.user} className="h-7 w-7 shrink-0 text-[11px]" />
+                <UserAvatar user={member.user} size="large" className="shrink-0" />
                 <div className="min-w-0 flex-1">
                   <p className="truncate font-medium leading-tight">
                     {member.user?.name || '—'}
@@ -872,8 +873,9 @@ export function AccountSettingsPure({
                   {isEditable && (
                     <Button
                       variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                      size="small"
+                      icon
+                      tone="destructive"
                       onClick={() => {
                         setUserToDelete(member.id);
                         setDeleteUserDialogOpen(true);
@@ -911,8 +913,7 @@ export function AccountSettingsPure({
                 <div className="flex shrink-0 items-center gap-1">
                   <Button
                     variant="ghost"
-                    size="sm"
-                    className="h-7 text-xs text-muted-foreground hover:text-foreground"
+                    size="small"
                     onClick={() => {
                       void onCopyInviteLink(getInviteLink(invitation));
                     }}
@@ -923,8 +924,9 @@ export function AccountSettingsPure({
                   {hasAdminPermission && (
                     <Button
                       variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                      size="small"
+                      icon
+                      tone="destructive"
                       disabled={cancellingInvitationIds.has(invitation.id)}
                       onClick={() => {
                         void (async () => {
@@ -973,8 +975,8 @@ export function AccountSettingsPure({
           actions={
             <Button
               variant="ghost"
-              size="sm"
-              className="h-7 w-auto bg-foreground/[0.06] px-2 text-foreground hover:bg-foreground/[0.1]"
+              size="small"
+              className="w-auto"
               onClick={() => {
                 setCliApiKeyDialogOpen(true);
               }}
@@ -1017,7 +1019,7 @@ export function AccountSettingsPure({
                         {apiKey.note || t('settings.account.cliAuth.recordNoteFallback')}
                       </p>
                       {sourceLabel && (
-                        <Badge variant="outline" className="h-5 rounded-md px-1.5 text-[10px]">
+                        <Badge>
                           {sourceLabel}
                         </Badge>
                       )}
@@ -1045,8 +1047,8 @@ export function AccountSettingsPure({
                   </div>
                   <Button
                     variant="ghost"
-                    size="sm"
-                    className="bg-destructive/[0.06] text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    size="small"
+                    tone="destructive"
                     onClick={() => setCliApiKeyToRevoke(apiKey)}
                     disabled={revokingCliApiKeyId === apiKey.id}
                   >
@@ -1075,8 +1077,8 @@ export function AccountSettingsPure({
             >
               <Button
                 variant="ghost"
-                size="sm"
-                className="bg-destructive/[0.06] text-destructive hover:bg-destructive/10 hover:text-destructive"
+                size="small"
+                tone="destructive"
                 onClick={() => setLeaveDialogOpen(true)}
               >
                 {t('workspace.danger.leaveWorkspace.button')}
@@ -1090,8 +1092,8 @@ export function AccountSettingsPure({
             >
               <Button
                 variant="ghost"
-                size="sm"
-                className="bg-destructive/[0.06] text-destructive hover:bg-destructive/10 hover:text-destructive"
+                size="small"
+                tone="destructive"
                 onClick={() => {
                   // A live subscription blocks deletion outright; surface the
                   // guidance dialog instead of the type-to-confirm flow (the
@@ -1142,7 +1144,7 @@ export function AccountSettingsPure({
               onClick={() => {
                 void handleRemoveMember();
               }}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              variant="destructive"
             >
               {t('common.remove')}
             </AlertDialogAction>
@@ -1176,7 +1178,7 @@ export function AccountSettingsPure({
                 })();
               }}
               disabled={isLeaving}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              variant="destructive"
             >
               {isLeaving ? (
                 <>
@@ -1248,11 +1250,11 @@ export function AccountSettingsPure({
               </p>
             ) : null}
             <div className="space-y-2">
-              <Label htmlFor="confirmText">
+              <UiField.Label htmlFor="confirmText">
                 {t('workspace.danger.deleteWorkspace.typeToConfirm', {
                   workspace: organization.name,
                 })}
-              </Label>
+              </UiField.Label>
               <Input
                 id="confirmText"
                 value={deleteConfirmText}
@@ -1263,7 +1265,7 @@ export function AccountSettingsPure({
           </div>
           <DialogFooter>
             <Button
-              variant="outline"
+              variant="secondary"
               onClick={() => {
                 setDeleteDialogOpen(false);
                 setDeleteConfirmText('');
@@ -1328,11 +1330,11 @@ export function AccountSettingsPure({
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="deleteAccountConfirmText">
+              <UiField.Label htmlFor="deleteAccountConfirmText">
                 {t('settings.account.accountDeletion.typeToConfirm', {
                   email: currentUser?.email ?? '',
                 })}
-              </Label>
+              </UiField.Label>
               <Input
                 id="deleteAccountConfirmText"
                 value={deleteAccountConfirmText}
@@ -1348,7 +1350,7 @@ export function AccountSettingsPure({
           </div>
           <DialogFooter>
             <Button
-              variant="outline"
+              variant="secondary"
               onClick={() => {
                 setDeleteAccountDialogOpen(false);
                 setDeleteAccountConfirmText('');
diff --git a/packages/components/src/components/settings/acp-authentication-panel.tsx b/packages/components/src/components/settings/acp-authentication-panel.tsx
index 4b8bada7e..11d684464 100644
--- a/packages/components/src/components/settings/acp-authentication-panel.tsx
+++ b/packages/components/src/components/settings/acp-authentication-panel.tsx
@@ -23,9 +23,9 @@ import {
   type MachineAcpAuthenticationArgs,
 } from '@/hooks/use-machine-acp-authentication';
 import { resyncMachineFlockRows } from '@/hooks/use-machine-flock-rows';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import { isElectronRenderer } from '@/lib/electron';
 import { openExternalUrl } from '@/lib/native-browser';
 import { isNativeAppShell } from '@/lib/native-platform';
@@ -574,13 +574,13 @@ export function AcpAuthenticationPanel({
       <div className="flex flex-wrap items-center gap-2">
         {phase === 'running' ? (
           <>
-            <Button type="button" size="sm" variant="outline" disabled>
+            <Button type="button" variant="secondary" size="small" disabled>
               <Loader2 className="h-3.5 w-3.5 animate-spin" />
               {t('agents.authentication.waiting', 'Waiting for {{provider}} sign-in', {
                 provider,
               })}
             </Button>
-            <Button type="button" size="sm" variant="ghost" onClick={handleCancel}>
+            <Button type="button" variant="ghost" size="small" onClick={handleCancel}>
               <Square className="h-3.5 w-3.5" />
               {t('common.cancel', 'Cancel')}
             </Button>
@@ -588,8 +588,8 @@ export function AcpAuthenticationPanel({
         ) : (
           <Button
             type="button"
-            size="sm"
-            variant="outline"
+            variant="secondary"
+            size="small"
             disabled={!authArgs || !interactiveProtocolSupported}
             onClick={handleStart}
           >
@@ -696,8 +696,8 @@ export function AcpAuthenticationAuthorizationView({
         </div>
         <Button
           type="button"
-          size="sm"
-          variant="outline"
+          variant="secondary"
+          size="small"
           disabled={authorizationConsentPending}
           onClick={onOpenAuthorization}
         >
@@ -729,7 +729,7 @@ export function AcpAuthenticationAuthorizationView({
                 {authorization.userCode}
               </code>
             </div>
-            <Button type="button" size="sm" variant="ghost" onClick={onCopyUserCode}>
+            <Button type="button" variant="ghost" size="small" onClick={onCopyUserCode}>
               {userCodeCopied ? (
                 <Check className="h-3.5 w-3.5" />
               ) : (
@@ -754,9 +754,9 @@ export function AcpAuthenticationAuthorizationView({
 
       {authorization.acceptsAuthorizationCode ? (
         <div className="mt-3 space-y-1.5">
-          <Label htmlFor={authorizationCodeInputId} className="text-xs">
+          <UiField.Label htmlFor={authorizationCodeInputId} className="text-xs">
             {t('agents.authentication.authorizationCode', 'Authorization code')}
-          </Label>
+          </UiField.Label>
           <div className="flex flex-col gap-2 sm:flex-row">
             <Input
               id={authorizationCodeInputId}
@@ -778,7 +778,7 @@ export function AcpAuthenticationAuthorizationView({
             />
             <Button
               type="button"
-              size="sm"
+              size="small"
               disabled={
                 authorizationCodeSubmitted ||
                 submittingAuthorizationCode ||
@@ -841,8 +841,8 @@ export function AcpAuthenticationInteractionView({
             <Button
               key={method.id}
               type="button"
-              variant="outline"
-              className="h-auto justify-start px-3 py-2 text-left"
+              variant="secondary"
+              className="justify-start text-left"
               disabled={submitting}
               onClick={() => onSubmit({ action: 'accept', methodId: method.id })}
             >
@@ -879,10 +879,10 @@ export function AcpAuthenticationInteractionView({
       </div>
       {interaction.form.fields.map((field) => (
         <div key={field.id} className="space-y-1.5">
-          <Label className="text-xs">
+          <UiField.Label className="text-xs">
             {field.label}
             {!field.required ? ` ${t('common.optional', '(optional)')}` : ''}
-          </Label>
+          </UiField.Label>
           {field.type === 'select' ? (
             <select
               className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
@@ -916,7 +916,7 @@ export function AcpAuthenticationInteractionView({
       ))}
       <Button
         type="button"
-        size="sm"
+        size="small"
         disabled={submitting || invalid}
         onClick={() => onSubmit({ action: 'accept', content: values })}
       >
diff --git a/packages/components/src/components/settings/agent-config-dialog.tsx b/packages/components/src/components/settings/agent-config-dialog.tsx
index 44f95733f..0b4cfc559 100644
--- a/packages/components/src/components/settings/agent-config-dialog.tsx
+++ b/packages/components/src/components/settings/agent-config-dialog.tsx
@@ -65,14 +65,14 @@ import { cn } from '@/lib/utils';
 import { useKeyboardAwareScrollIntoView } from '@/hooks/use-keyboard-aware-scroll-into-view';
 import { useMachineAcpBinaryProgress } from '@/hooks/use-machine-acp-binary-progress';
 import { activeWorkspaceRuntimeAtom } from '@/atoms/runtime';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ui/dialog';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ui/collapsible';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
-import { Textarea } from '@/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/ui/tabs';
+import { Collapsible } from '@lody/ui/collapsible';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
+import { Textarea } from '@lody/ui/textarea';
+import { Select } from '@lody/ui/select';
+import { Tabs } from '@lody/ui/tabs';
 import { EnvVarsTextarea, envVarsToText } from './env-vars-textarea';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { AcpAuthenticationPanel } from './acp-authentication-panel';
@@ -2095,8 +2095,8 @@ export function AgentConfigDialog(props: AgentConfigDialogProps) {
               <div className="flex items-center gap-2">
                 <Button
                   type="button"
-                  size="sm"
                   variant="secondary"
+                  size="small"
                   disabled={!parsedCustomAcp || probing}
                   onClick={() => void runCustomProbe()}
                 >
@@ -2169,8 +2169,8 @@ export function AgentConfigDialog(props: AgentConfigDialogProps) {
               <div className="mt-3 flex items-center gap-2">
                 <Button
                   type="button"
-                  size="sm"
                   variant="secondary"
+                  size="small"
                   disabled={!hasBuiltinRuntimeOverride || probing}
                   onClick={() => {
                     setProbeError(null);
@@ -2302,8 +2302,8 @@ export function AgentConfigDialog(props: AgentConfigDialogProps) {
                   (binaryStatus === 'not-installed' || binaryStatus === 'error') ? (
                     <Button
                       type="button"
-                      size="sm"
                       variant="secondary"
+                      size="small"
                       disabled={installingBinary || probing}
                       onClick={() => void handleInstallBinary()}
                     >
@@ -2441,10 +2441,10 @@ export function AgentConfigDialog(props: AgentConfigDialogProps) {
         </div>
         <div className="flex gap-2">
           <Button
-            variant="outline"
+            variant="secondary"
+            size="small"
             onClick={() => onOpenChange(false)}
             disabled={submitting}
-            size="sm"
           >
             {t('common.cancel', 'Cancel')}
           </Button>
@@ -2452,11 +2452,11 @@ export function AgentConfigDialog(props: AgentConfigDialogProps) {
             <TooltipTrigger asChild>
               <span>
                 <Button
+                  size="small"
                   onClick={() => void submit()}
                   disabled={
                     !!disableReason || submitting || (builtinCreationPending && !probeError)
                   }
-                  size="sm"
                 >
                   {(submitting || (builtinCreationPending && !authRequired && !probeError)) && (
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -2714,9 +2714,9 @@ function ProbeStatus({
     return (
       <Button
         type="button"
-        variant="outline"
-        size="sm"
-        className="h-7 gap-1 px-2 text-xs text-status-warning"
+        variant="secondary"
+        size="small"
+        className="text-status-warning"
         onClick={onRetry}
         aria-label={t('settings.agent.dialog.retryProbe', 'Retry capability probe')}
       >
@@ -2763,8 +2763,7 @@ function ProbeStatus({
     <Button
       type="button"
       variant="secondary"
-      size="sm"
-      className="h-7 gap-1 px-2 text-xs"
+      size="small"
       onClick={onRetry}
       aria-label={t('settings.agent.dialog.testCapabilities', 'Test agent capabilities')}
     >
@@ -2826,7 +2825,7 @@ function DeepSeekHarnessPanel({
   const { t } = useTranslation();
   return (
     <div className="space-y-3 rounded-xl border border-primary/20 bg-primary/[0.04] p-4">
-      <Tabs
+      <Tabs.Root
         value={endpointMode}
         onValueChange={(value) => {
           if (value === 'official' || value === 'custom') {
@@ -2834,18 +2833,18 @@ function DeepSeekHarnessPanel({
           }
         }}
       >
-        <TabsList className="grid h-8 w-full grid-cols-2">
-          <TabsTrigger value="official" className="px-2.5 text-xs">
+        <Tabs.List stretch>
+          <Tabs.Tab value="official">
             {t('settings.agent.dialog.deepseek.officialTab', 'DeepSeek official')}
-          </TabsTrigger>
-          <TabsTrigger value="custom" className="px-2.5 text-xs">
+          </Tabs.Tab>
+          <Tabs.Tab value="custom">
             {t('settings.agent.dialog.deepseek.customTab', 'Custom Endpoint')}
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="official" className="mt-3">
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="official">
           <DeepSeekApiKeyField value={apiKey} onChange={onApiKeyChange} />
-        </TabsContent>
-        <TabsContent value="custom" className="mt-3 space-y-3">
+        </Tabs.Panel>
+        <Tabs.Panel value="custom" className="space-y-3">
           <Field
             htmlFor="deepseek-endpoint"
             label={t('settings.agent.dialog.deepseek.endpointLabel', 'API Endpoint')}
@@ -2879,8 +2878,8 @@ function DeepSeekHarnessPanel({
             onChange={onApiKeyChange}
             label={t('settings.agent.dialog.deepseek.customApiKeyLabel', 'API Key')}
           />
-        </TabsContent>
-      </Tabs>
+        </Tabs.Panel>
+      </Tabs.Root>
     </div>
   );
 }
@@ -2914,6 +2913,12 @@ function PresetPanel({
   const credentialModes = preset.credentialModes ?? [];
   const baseUrlOption = getBaseUrlOption(credentialMode, baseUrlOptionId);
   const selectedBaseUrlOptionId = baseUrlOption?.id;
+  // `Select.Value` reads the label of the current value from `items`, not from
+  // the rows, so the list is stated once and drives both.
+  const baseUrlItems = (credentialMode?.baseUrlOptions ?? []).map((option) => ({
+    value: option.id,
+    label: t(option.labelKey, option.labelDefault),
+  }));
   const showCustomBaseUrl =
     !!credentialMode?.baseUrlEnvKey && baseUrlOption?.id === credentialMode.customBaseUrlOptionId;
   const tokenEnvKey = getPresetTokenEnvKey(preset, credentialMode);
@@ -3021,18 +3026,26 @@ function PresetPanel({
           )}
         >
           <div className="space-y-2">
-            <Select value={selectedBaseUrlOptionId} onValueChange={onBaseUrlOptionChange}>
-              <SelectTrigger className="h-9 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {credentialMode.baseUrlOptions.map((option) => (
-                  <SelectItem key={option.id} value={option.id} className="text-xs">
-                    {t(option.labelKey, option.labelDefault)}
-                  </SelectItem>
+            <Select.Root
+              items={baseUrlItems}
+              value={selectedBaseUrlOptionId}
+              onValueChange={(value) => {
+                // Only a null-valued row clears a Base UI select, and this list
+                // has none; the guard is what states that rather than a cast.
+                if (value != null) onBaseUrlOptionChange(value);
+              }}
+            >
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Content>
+                {baseUrlItems.map((option) => (
+                  <Select.Item key={option.value} value={option.value}>
+                    {option.label}
+                  </Select.Item>
                 ))}
-              </SelectContent>
-            </Select>
+              </Select.Content>
+            </Select.Root>
             {showCustomBaseUrl ? (
               <Input
                 id="preset-base-url"
@@ -3053,18 +3066,20 @@ function PresetPanel({
         </Field>
       ) : null}
 
-      <Collapsible>
-        <CollapsibleTrigger asChild>
-          <button
-            type="button"
-            className="group inline-flex items-center gap-1.5 rounded-md text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <ChevronDown className="h-3 w-3 transition-transform group-data-[state=open]:rotate-180" />
-            {t('settings.agent.dialog.preset.showInjected', 'Show injected variables')}
-            <Lock className="h-3 w-3 opacity-70" aria-hidden="true" />
-          </button>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="mt-2">
+      <Collapsible.Root>
+        <Collapsible.Trigger
+          render={
+            <button
+              type="button"
+              className="group inline-flex items-center gap-1.5 rounded-md text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          }
+        >
+          <ChevronDown className="h-3 w-3 transition-transform group-data-[panel-open]:rotate-180" />
+          {t('settings.agent.dialog.preset.showInjected', 'Show injected variables')}
+          <Lock className="h-3 w-3 opacity-70" aria-hidden="true" />
+        </Collapsible.Trigger>
+        <Collapsible.Panel className="mt-2">
           <div className="rounded-md border border-border/60 bg-background/50">
             <dl className="divide-y divide-border/40 text-[11px]">
               {Object.entries(injectedEnv).map(([key, value]) => (
@@ -3085,8 +3100,8 @@ function PresetPanel({
               </div>
             </dl>
           </div>
-        </CollapsibleContent>
-      </Collapsible>
+        </Collapsible.Panel>
+      </Collapsible.Root>
     </div>
   );
 }
@@ -3108,9 +3123,9 @@ function Field({
     <div className="space-y-1.5">
       <div className="flex items-center gap-1.5">
         {icon && <span className="text-muted-foreground">{icon}</span>}
-        <Label htmlFor={htmlFor} className="text-xs font-medium">
+        <UiField.Label htmlFor={htmlFor} className="text-xs font-medium">
           {label}
-        </Label>
+        </UiField.Label>
       </div>
       {children}
       {hint && <p className="text-[11px] leading-snug text-muted-foreground">{hint}</p>}
@@ -3136,25 +3151,27 @@ function Section({
   action?: ReactNode;
 }) {
   return (
-    <Collapsible defaultOpen={defaultOpen}>
+    <Collapsible.Root defaultOpen={defaultOpen}>
       <div className="flex h-9 items-center gap-1 rounded-md border border-border/60 bg-card/40 pr-1 hover:bg-card/70">
-        <CollapsibleTrigger asChild>
-          <button
-            type="button"
-            className="group flex h-full min-w-0 flex-1 items-center gap-2 rounded-md px-3 text-left text-sm font-medium text-foreground/90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <ChevronDown className="h-3 w-3 shrink-0 transition-transform group-data-[state=open]:rotate-180" />
-            <span className="min-w-0 truncate">{title}</span>
-            {typeof count === 'number' && count > 0 ? (
-              <span className="ml-auto rounded-full bg-muted px-1.5 text-[10px] text-muted-foreground">
-                {count}
-              </span>
-            ) : null}
-          </button>
-        </CollapsibleTrigger>
+        <Collapsible.Trigger
+          render={
+            <button
+              type="button"
+              className="group flex h-full min-w-0 flex-1 items-center gap-2 rounded-md px-3 text-left text-sm font-medium text-foreground/90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          }
+        >
+          <ChevronDown className="h-3 w-3 shrink-0 transition-transform group-data-[panel-open]:rotate-180" />
+          <span className="min-w-0 truncate">{title}</span>
+          {typeof count === 'number' && count > 0 ? (
+            <span className="ml-auto rounded-full bg-muted px-1.5 text-[10px] text-muted-foreground">
+              {count}
+            </span>
+          ) : null}
+        </Collapsible.Trigger>
         {action}
       </div>
-      <CollapsibleContent className="mt-2">
+      <Collapsible.Panel className="mt-2">
         <div className="pl-1">
           {disabled ? (
             <p className="px-1 py-2 text-xs text-muted-foreground">{disabledHint}</p>
@@ -3162,8 +3179,8 @@ function Section({
             children
           )}
         </div>
-      </CollapsibleContent>
-    </Collapsible>
+      </Collapsible.Panel>
+    </Collapsible.Root>
   );
 }
 
@@ -3173,8 +3190,9 @@ function InlineCopyButton({ value, ariaLabel }: { value: string; ariaLabel: stri
     <Button
       type="button"
       variant="ghost"
-      size="icon"
-      className="h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground"
+      size="small"
+      icon
+      className="shrink-0"
       aria-label={ariaLabel}
       onClick={(event) => {
         event.stopPropagation();
@@ -3211,11 +3229,11 @@ function TitleGenerationFields({
               key={sel.configId}
               className="grid gap-2 sm:grid-cols-[120px_minmax(0,1fr)] sm:items-center"
             >
-              <Label className="text-xs text-muted-foreground">{sel.label}</Label>
+              <UiField.Label className="text-xs text-muted-foreground">{sel.label}</UiField.Label>
               <Button
                 type="button"
-                variant="outline"
-                className="h-8 w-fit gap-1 rounded-md px-2 text-xs"
+                variant="secondary"
+                className="w-fit"
                 onClick={() => onChange(sel.configId, !isEnabled)}
                 aria-pressed={isEnabled}
               >
@@ -3232,22 +3250,25 @@ function TitleGenerationFields({
             key={sel.configId}
             className="grid gap-2 sm:grid-cols-[120px_minmax(0,1fr)] sm:items-center"
           >
-            <Label className="text-xs text-muted-foreground">{sel.label}</Label>
-            <Select
+            <UiField.Label className="text-xs text-muted-foreground">{sel.label}</UiField.Label>
+            <Select.Root
+              items={sel.options}
               value={(stored as string | undefined) ?? sel.currentValue}
-              onValueChange={(value) => onChange(sel.configId, value)}
+              onValueChange={(value) => {
+                if (value != null) onChange(sel.configId, value);
+              }}
             >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
+              <Select.Trigger size="small">
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Content>
                 {sel.options.map((opt) => (
-                  <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                  <Select.Item key={opt.value} value={opt.value}>
                     {opt.label}
-                  </SelectItem>
+                  </Select.Item>
                 ))}
-              </SelectContent>
-            </Select>
+              </Select.Content>
+            </Select.Root>
           </div>
         );
       })}
diff --git a/packages/components/src/components/settings/agent-role-form.tsx b/packages/components/src/components/settings/agent-role-form.tsx
index 400ee6c44..998d2ecf6 100644
--- a/packages/components/src/components/settings/agent-role-form.tsx
+++ b/packages/components/src/components/settings/agent-role-form.tsx
@@ -18,13 +18,13 @@ import {
   type AgentRoleRunConfigIssue,
 } from '@/lib/agent-role-form';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
-import { Switch } from '@/ui/switch';
-import { Textarea } from '@/ui/textarea';
+import { Select } from '@lody/ui/select';
+import { Switch } from '@lody/ui/switch';
+import { Textarea } from '@lody/ui/textarea';
 import { Field, Section } from './form-primitives';
 
 const AgentRoleEmojiPicker = lazy(() => import('./agent-role-emoji-picker'));
@@ -92,6 +92,26 @@ export function AgentRoleForm({
   const fieldId = useId();
   const update = (patch: Partial<AgentRoleFormValue>) => onChange({ ...value, ...patch });
 
+  // `Select.Value` reads the label of the current value from `items`, not from
+  // the rows, so each list is stated once and drives both.
+  const machineOptions = machines.map((machine) => ({
+    value: machine.machineId as string,
+    label: (
+      <span className="flex items-center gap-1.5">
+        {machine.label}
+        {machine.online ? null : (
+          <span className="text-[10px] text-muted-foreground">
+            {t('settings.agentRoles.status.offline')}
+          </span>
+        )}
+      </span>
+    ),
+  }));
+  const agentConfigOptions = agentConfigs.map((config) => ({
+    value: config.agentConfigId as string,
+    label: config.label,
+  }));
+
   const submit = (event: FormEvent) => {
     event.preventDefault();
     onSubmit();
@@ -149,8 +169,9 @@ export function AgentRoleForm({
         >
           <div className="grid gap-3 sm:grid-cols-2">
             <Field label={t('settings.agentRoles.form.machine')}>
-              <Select
-                value={value.machineId ?? ''}
+              <Select.Root
+                items={machineOptions}
+                value={value.machineId ?? null}
                 onValueChange={(machineId) =>
                   // Changing machine clears the config: an agent config belongs
                   // to exactly one machine, and carrying the old id over is how
@@ -158,32 +179,25 @@ export function AgentRoleForm({
                   update({ machineId: machineId as MachineId, agentConfigId: null })
                 }
               >
-                <SelectTrigger
-                  className="h-9 text-xs"
+                <Select.Trigger
                   aria-label={t('settings.agentRoles.form.machine')}
                   aria-invalid={hasError('machine_required') || undefined}
                 >
-                  <SelectValue placeholder={t('settings.agentRoles.form.machinePlaceholder')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {machines.map((machine) => (
-                    <SelectItem key={machine.machineId} value={machine.machineId}>
-                      <span className="flex items-center gap-1.5">
-                        {machine.label}
-                        {machine.online ? null : (
-                          <span className="text-[10px] text-muted-foreground">
-                            {t('settings.agentRoles.status.offline')}
-                          </span>
-                        )}
-                      </span>
-                    </SelectItem>
+                  <Select.Value placeholder={t('settings.agentRoles.form.machinePlaceholder')} />
+                </Select.Trigger>
+                <Select.Content>
+                  {machineOptions.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
                   ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </Field>
             <Field label={t('settings.agentRoles.form.agentConfig')}>
-              <Select
-                value={value.agentConfigId ?? ''}
+              <Select.Root
+                items={agentConfigOptions}
+                value={value.agentConfigId ?? null}
                 disabled={!value.machineId || agentConfigs.length === 0}
                 onValueChange={(agentConfigId) =>
                   update({
@@ -196,21 +210,20 @@ export function AgentRoleForm({
                   })
                 }
               >
-                <SelectTrigger
-                  className="h-9 text-xs"
+                <Select.Trigger
                   aria-label={t('settings.agentRoles.form.agentConfig')}
                   aria-invalid={hasError('agent_config_required') || undefined}
                 >
-                  <SelectValue placeholder={t('settings.agentRoles.form.agentConfigPlaceholder')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {agentConfigs.map((config) => (
-                    <SelectItem key={config.agentConfigId} value={config.agentConfigId}>
-                      {config.label}
-                    </SelectItem>
+                  <Select.Value placeholder={t('settings.agentRoles.form.agentConfigPlaceholder')} />
+                </Select.Trigger>
+                <Select.Content>
+                  {agentConfigOptions.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
                   ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </Field>
           </div>
           {value.machineId && agentConfigs.length === 0 ? (
@@ -295,9 +308,9 @@ export function AgentRoleForm({
 
         <div className="flex items-center justify-between gap-4 rounded-lg border border-border/70 bg-card/60 px-3 py-2.5">
           <div className="min-w-0">
-            <Label htmlFor={`${fieldId}-share`} className="text-sm">
+            <UiField.Label htmlFor={`${fieldId}-share`} className="text-sm">
               {t('settings.agentRoles.form.share')}
-            </Label>
+            </UiField.Label>
             <p className="mt-0.5 text-[11px] leading-snug text-muted-foreground">
               {t('settings.agentRoles.form.shareHint')}
             </p>
@@ -313,10 +326,16 @@ export function AgentRoleForm({
       </div>
 
       <footer className="flex shrink-0 items-center justify-end gap-2 border-t border-border/60 px-5 py-3">
-        <Button type="button" variant="outline" size="sm" disabled={submitting} onClick={onCancel}>
+        <Button
+          type="button"
+          variant="secondary"
+          size="small"
+          disabled={submitting}
+          onClick={onCancel}
+        >
           {t('common.cancel')}
         </Button>
-        <Button type="submit" size="sm" disabled={submitting || errors.length > 0}>
+        <Button type="submit" size="small" disabled={submitting || errors.length > 0}>
           {submitting ? <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" /> : null}
           {isEditing ? t('common.save') : t('settings.agentRoles.form.create')}
         </Button>
@@ -390,8 +409,8 @@ function AgentRoleEmojiField({
             <Button
               type="button"
               variant="ghost"
-              size="sm"
-              className="h-7 w-full justify-start text-xs text-muted-foreground"
+              size="small"
+              className="w-full justify-start"
               onClick={() => {
                 onChange('');
                 setOpen(false);
@@ -453,18 +472,24 @@ function ValueSelect({
   onChange: (value: string) => void;
 }) {
   return (
-    <Select value={value ?? ''} onValueChange={onChange}>
-      <SelectTrigger className="h-9 text-xs" aria-label={label}>
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent>
+    <Select.Root
+      items={options}
+      value={value}
+      onValueChange={(next) => {
+        if (next != null) onChange(next);
+      }}
+    >
+      <Select.Trigger aria-label={label}>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
         {options.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
+          <Select.Item key={option.value} value={option.value}>
             {option.label}
-          </SelectItem>
+          </Select.Item>
         ))}
-      </SelectContent>
-    </Select>
+      </Select.Content>
+    </Select.Root>
   );
 }
 
@@ -482,9 +507,9 @@ function ConfigOptionField({
     return (
       <div className="flex items-center justify-between gap-4">
         <div className="min-w-0">
-          <Label htmlFor={fieldId} className="text-xs font-medium">
+          <UiField.Label htmlFor={fieldId} className="text-xs font-medium">
             {selector.label}
-          </Label>
+          </UiField.Label>
           {selector.description ? (
             <p className="mt-0.5 text-[11px] leading-snug text-muted-foreground">
               {selector.description}
diff --git a/packages/components/src/components/settings/agent-roles-setting.tsx b/packages/components/src/components/settings/agent-roles-setting.tsx
index 55a38edeb..21d81e9b5 100644
--- a/packages/components/src/components/settings/agent-roles-setting.tsx
+++ b/packages/components/src/components/settings/agent-roles-setting.tsx
@@ -33,8 +33,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/ui/alert-dialog';
-import { Badge } from '@/ui/badge';
-import { Button } from '@/ui/button';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { settingContainerClass } from '.';
 import {
@@ -126,13 +126,7 @@ export function AgentRolesSetting() {
           </div>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
-                aria-label={addLabel}
-                onClick={openAdd}
-              >
+              <Button variant="ghost" aria-label={addLabel} size="small" icon onClick={openAdd}>
                 <Plus className="h-3.5 w-3.5" />
               </Button>
             </TooltipTrigger>
@@ -144,7 +138,7 @@ export function AgentRolesSetting() {
           <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border/60 bg-card/30 px-6 py-8 text-center text-sm">
             <UserRoundCog className="h-6 w-6 text-muted-foreground/70" aria-hidden="true" />
             <p className="mt-2 text-muted-foreground">{t('settings.agentRoles.empty')}</p>
-            <Button size="sm" className="mt-3" onClick={openAdd}>
+            <Button size="small" className="mt-3" onClick={openAdd}>
               <Plus className="mr-1.5 h-3.5 w-3.5" />
               {addLabel}
             </Button>
@@ -203,8 +197,7 @@ export function AgentRolesSetting() {
           <AlertDialogFooter>
             <AlertDialogCancel disabled={removing}>{t('common.cancel')}</AlertDialogCancel>
             <AlertDialogAction
-              disabled={removing}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={removing} variant="destructive"
               onClick={(event) => {
                 event.preventDefault();
                 void confirmRemoval();
@@ -266,15 +259,13 @@ export function AgentRoleRow({
               <span className="min-w-0 truncate text-sm font-medium leading-tight">
                 {role.name}
               </span>
-              <Badge variant="secondary" className="shrink-0 px-1.5 py-0 text-[10px]">
+              <Badge>
                 {role.visibility === 'workspace'
                   ? t('settings.agentRoles.visibility.workspace')
                   : t('settings.agentRoles.visibility.private')}
               </Badge>
               {role.promptPrefix ? (
-                <Badge variant="outline" className="shrink-0 px-1.5 py-0 text-[10px]">
-                  {t('settings.agentRoles.hasPrompt')}
-                </Badge>
+                <Badge>{t('settings.agentRoles.hasPrompt')}</Badge>
               ) : null}
             </span>
             <span className="mt-0.5 flex min-w-0 items-center gap-1.5 text-[11px] leading-tight text-muted-foreground">
@@ -300,10 +291,11 @@ export function AgentRoleRow({
           {canManage ? (
             <Button
               type="button"
-              size="icon"
               variant="ghost"
-              className="h-7 w-7 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
               aria-label={t('common.remove')}
+              size="small"
+              icon
+              tone="destructive"
               onClick={onRemove}
             >
               <Trash2 className="h-3.5 w-3.5" />
diff --git a/packages/components/src/components/settings/appearance-setting.tsx b/packages/components/src/components/settings/appearance-setting.tsx
index 92becba46..a61914589 100644
--- a/packages/components/src/components/settings/appearance-setting.tsx
+++ b/packages/components/src/components/settings/appearance-setting.tsx
@@ -21,7 +21,7 @@ import { OptionSelector, type OptionSelectorOption } from '@/components/shared/o
 import { buildTerminalFontPreviewFamily } from '@/components/terminal/terminal-theme';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { listSystemFontFamilies } from '@/lib/local-fonts';
-import { Input } from '@/ui/input';
+import { Input } from '@lody/ui/input';
 import { LanguageSelector } from '../../i18n';
 import { useTheme, type Theme } from '../../theme-provider';
 import { settingContainerClass } from '.';
diff --git a/packages/components/src/components/settings/auto-archive-setting.tsx b/packages/components/src/components/settings/auto-archive-setting.tsx
index d55d01c22..dd699b764 100644
--- a/packages/components/src/components/settings/auto-archive-setting.tsx
+++ b/packages/components/src/components/settings/auto-archive-setting.tsx
@@ -1,7 +1,7 @@
 import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { autoArchiveOnPrClosedAtom, autoArchiveOnPrMergedAtom } from '@/atoms';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { CompactRow, CompactSection } from './compact-layout';
 
 export function AutoArchiveSection() {
diff --git a/packages/components/src/components/settings/avatar-editor.tsx b/packages/components/src/components/settings/avatar-editor.tsx
index 7775f4fd1..281adb52a 100644
--- a/packages/components/src/components/settings/avatar-editor.tsx
+++ b/packages/components/src/components/settings/avatar-editor.tsx
@@ -62,12 +62,11 @@ export function AvatarEditor({
     }
   };
 
-  const avatarClassName = 'h-8 w-8 text-xs';
   const avatar =
     kind === 'user' ? (
-      <UserAvatar user={{ name, image, email }} className={avatarClassName} />
+      <UserAvatar user={{ name, image, email }} size="large" />
     ) : (
-      <WorkspaceAvatar workspace={{ name, logo: image }} className={avatarClassName} />
+      <WorkspaceAvatar workspace={{ name, logo: image }} size="large" />
     );
 
   if (!editable) {
diff --git a/packages/components/src/components/settings/beta-features-setting.tsx b/packages/components/src/components/settings/beta-features-setting.tsx
index aad902a85..9ce5ed907 100644
--- a/packages/components/src/components/settings/beta-features-setting.tsx
+++ b/packages/components/src/components/settings/beta-features-setting.tsx
@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   developerModeEnabledAtom,
   inboxBetaEnabledAtom,
diff --git a/packages/components/src/components/settings/billing-setting-pure.tsx b/packages/components/src/components/settings/billing-setting-pure.tsx
index 6a8f1c95e..0d7c2d05a 100644
--- a/packages/components/src/components/settings/billing-setting-pure.tsx
+++ b/packages/components/src/components/settings/billing-setting-pure.tsx
@@ -2,9 +2,11 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FREE_SESSION_LIMIT_PER_WORKSPACE, FREE_WORKSPACE_MEMBER_LIMIT } from '@lody/shared';
 import { ArrowLeftRight, Check, Loader2 } from 'lucide-react';
-import { Badge, Button, Card, Input } from '@/ui';
-import { Progress } from '@/ui/progress';
-import { Skeleton } from '@/ui/skeleton';
+import { Button, Card } from '@/ui';
+import { Badge } from '@lody/ui/badge';
+import { Input } from '@lody/ui/input';
+import { Progress } from '@lody/ui/progress';
+import { Skeleton } from '@lody/ui/skeleton';
 import { cn } from '@/lib/utils';
 import { PricingPageLink } from '../shared/pricing-page-link';
 import { FounderCallLink } from '../shared/founder-call-link';
@@ -299,7 +301,7 @@ export function BillingSettingsView({
             </p>
           </div>
           {onCancelExternalCheckout ? (
-            <Button size="sm" variant="ghost" onClick={onCancelExternalCheckout}>
+            <Button variant="ghost" size="small" onClick={onCancelExternalCheckout}>
               {t('billing.externalCheckoutDismiss')}
             </Button>
           ) : null}
@@ -332,16 +334,16 @@ export function BillingSettingsView({
           {/* A gift always ends at its schedule boundary; its status line says
               so already, and a cancel badge would read as an error state. */}
           {overview.cancelAtPeriodEnd && !isPromotional ? (
-            <Badge variant="outline">{t('billing.cancelAtPeriodEnd')}</Badge>
+            <Badge>{t('billing.cancelAtPeriodEnd')}</Badge>
           ) : null}
           {checkoutInProgress ? (
-            <Badge variant="secondary">{t('billing.checkoutPending')}</Badge>
+            <Badge tone="running">{t('billing.checkoutPending')}</Badge>
           ) : null}
           {hasGiftTimeline && overview.autoRenewAfterGift ? (
-            <Badge variant="secondary">{t('billing.postGiftBillingScheduled')}</Badge>
+            <Badge>{t('billing.postGiftBillingScheduled')}</Badge>
           ) : null}
           {overview.yearlyEarlyBirdEligible ? (
-            <Badge variant="secondary">{t('billing.yearlyPromoPrice')}</Badge>
+            <Badge>{t('billing.yearlyPromoPrice')}</Badge>
           ) : null}
         </div>
         <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs">
@@ -387,7 +389,7 @@ export function BillingSettingsView({
               {sessionLimit === null ? (
                 t('billing.unlimited')
               ) : sessionCount === null ? (
-                <Skeleton className="h-4 w-14" />
+                <Skeleton width={56} height={16} />
               ) : (
                 <>
                   <span
@@ -405,12 +407,13 @@ export function BillingSettingsView({
             </div>
           </div>
           {sessionLimit !== null && sessionCount === null ? (
-            <Skeleton className="mt-3 h-2 w-full" />
+            <Skeleton width="100%" height={8} className="mt-3" />
           ) : sessionLimit !== null && sessionCount !== null ? (
             <Progress
               value={sessionCount}
               max={sessionLimit}
-              className={cn('mt-3', nearLimit && '[&>div]:bg-destructive')}
+              tone={nearLimit ? 'danger' : 'running'}
+              className="mt-3"
             />
           ) : null}
           {sessionLimit !== null ? (
@@ -463,10 +466,10 @@ export function BillingSettingsView({
                 </span>
                 <Button
                   variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
                   aria-label={t('billing.switchBillingInterval')}
                   title={t('billing.switchBillingInterval')}
+                  size="small"
+                  icon
                   onClick={() => onIntervalChange(interval === 'year' ? 'month' : 'year')}
                 >
                   <ArrowLeftRight className="h-3.5 w-3.5" />
@@ -500,9 +503,7 @@ export function BillingSettingsView({
                 {t('billing.perSeatMonth')}
               </span>
               {selectedOfferLabel ? (
-                <Badge variant="secondary" className="mb-1">
-                  {selectedOfferLabel}
-                </Badge>
+                <Badge className="mb-1">{selectedOfferLabel}</Badge>
               ) : null}
             </div>
 
@@ -612,8 +613,8 @@ export function BillingSettingsView({
               spellCheck={false}
             />
             <Button
-              size="sm"
-              variant="outline"
+              variant="secondary"
+              size="small"
               disabled={redeemPending || checkoutInProgress || !code.trim()}
               onClick={() => onRedeemCode(code.trim())}
             >
@@ -714,7 +715,7 @@ export function BillingSettingsView({
             {invoicesError ? (
               <div className="flex flex-wrap items-center gap-3">
                 <p className="text-sm text-muted-foreground">{t('billing.historyError')}</p>
-                <Button size="sm" variant="outline" onClick={onRetryInvoices}>
+                <Button variant="secondary" size="small" onClick={onRetryInvoices}>
                   {t('billing.historyRetry')}
                 </Button>
               </div>
@@ -756,7 +757,7 @@ export function BillingSettingsView({
                         {formatMoney(invoice.amountPaid, invoice.currency)}
                       </span>
                       <Badge
-                        variant={invoice.status === 'paid' ? 'secondary' : 'outline'}
+                        tone={invoice.status === 'paid' ? 'success' : 'neutral'}
                         className="capitalize"
                       >
                         {invoice.status}
@@ -792,8 +793,8 @@ export function BillingSettingsView({
             </p>
           </div>
           <Button
-            variant="outline"
-            size="sm"
+            variant="secondary"
+            size="small"
             onClick={onPaymentMethod}
             disabled={
               pendingAction !== null ||
diff --git a/packages/components/src/components/settings/billing-setting.tsx b/packages/components/src/components/settings/billing-setting.tsx
index c4842c904..b2d9d93ac 100644
--- a/packages/components/src/components/settings/billing-setting.tsx
+++ b/packages/components/src/components/settings/billing-setting.tsx
@@ -681,8 +681,7 @@ function CloudBillingSettings() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('billing.cancelDialogKeep')}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            <AlertDialogAction variant="destructive"
               onClick={() => void handleSetCancelAtPeriodEnd(true)}
             >
               {t('billing.cancelDialogConfirm')}
diff --git a/packages/components/src/components/settings/change-password-button.tsx b/packages/components/src/components/settings/change-password-button.tsx
index 4b45115c9..2a66eb18c 100644
--- a/packages/components/src/components/settings/change-password-button.tsx
+++ b/packages/components/src/components/settings/change-password-button.tsx
@@ -4,8 +4,8 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { ArrowLeft, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { validateNewPassword } from '@lody/shared';
-import { Button } from '@/ui/button';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Field as UiField } from '@lody/ui/field';
 import { PasswordInput } from '@/ui/password-input';
 import {
   Dialog,
@@ -154,13 +154,7 @@ export function ChangePasswordButton({
 
   return (
     <>
-      <Button
-        variant="ghost"
-        size="sm"
-        className="bg-foreground/[0.06] hover:bg-foreground/[0.1]"
-        disabled={disabled}
-        onClick={() => setOpen(true)}
-      >
+      <Button variant="ghost" size="small" disabled={disabled} onClick={() => setOpen(true)}>
         {hasPassword
           ? t('settings.profile.password.changeButton')
           : t('settings.profile.password.setupButton')}
@@ -191,9 +185,9 @@ export function ChangePasswordButton({
                       transition={{ duration: 0.2, ease: 'easeInOut' }}
                       className="space-y-1.5"
                     >
-                      <Label htmlFor="current-password">
+                      <UiField.Label htmlFor="current-password">
                         {t('settings.profile.password.currentLabel')}
-                      </Label>
+                      </UiField.Label>
                       <PasswordInput
                         id="current-password"
                         autoComplete="current-password"
@@ -225,9 +219,9 @@ export function ChangePasswordButton({
                       className="space-y-3"
                     >
                       <div className="space-y-1.5">
-                        <Label htmlFor="new-password">
+                        <UiField.Label htmlFor="new-password">
                           {t('settings.profile.password.newLabel')}
-                        </Label>
+                        </UiField.Label>
                         <PasswordInput
                           id="new-password"
                           autoComplete="new-password"
@@ -237,9 +231,9 @@ export function ChangePasswordButton({
                         />
                       </div>
                       <div className="space-y-1.5">
-                        <Label htmlFor="confirm-password">
+                        <UiField.Label htmlFor="confirm-password">
                           {t('settings.profile.password.confirmLabel')}
-                        </Label>
+                        </UiField.Label>
                         <PasswordInput
                           id="confirm-password"
                           autoComplete="new-password"
@@ -266,40 +260,45 @@ export function ChangePasswordButton({
                 {step === 0 ? (
                   <>
                     <Button
-                      variant="outline"
-                      size="sm"
+                      variant="secondary"
+                      size="small"
                       onClick={() => handleOpenChange(false)}
                       disabled={isVerifying}
                     >
                       {t('common.cancel')}
                     </Button>
                     <Button
-                      size="sm"
+                      size="small"
                       onClick={() => {
                         void goToNewStep();
                       }}
                       disabled={!currentPassword || isVerifying}
                     >
-                      {isVerifying ? (
-                        <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-                      ) : null}
+                      {isVerifying ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
                       {t('settings.profile.password.continueButton')}
                     </Button>
                   </>
                 ) : (
                   <>
-                    <Button variant="outline" size="sm" onClick={goBack} disabled={isSubmitting}>
+                    <Button
+                      variant="secondary"
+                      size="small"
+                      onClick={goBack}
+                      disabled={isSubmitting}
+                    >
                       <ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
                       {t('common.back')}
                     </Button>
                     <Button
-                      size="sm"
+                      size="small"
                       onClick={() => {
                         void handleSubmit();
                       }}
                       disabled={isSubmitting || !newPassword || !confirmPassword}
                     >
-                      {isSubmitting ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
+                      {isSubmitting ? (
+                        <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                      ) : null}
                       {t('settings.profile.password.submitButton')}
                     </Button>
                   </>
@@ -316,15 +315,15 @@ export function ChangePasswordButton({
               </DialogHeader>
               <DialogFooter>
                 <Button
-                  variant="outline"
-                  size="sm"
+                  variant="secondary"
+                  size="small"
                   onClick={() => handleOpenChange(false)}
                   disabled={isSubmitting}
                 >
                   {t('common.cancel')}
                 </Button>
                 <Button
-                  size="sm"
+                  size="small"
                   onClick={() => {
                     void handleSetup();
                   }}
diff --git a/packages/components/src/components/settings/clear-cache.tsx b/packages/components/src/components/settings/clear-cache.tsx
index d3807d68f..b35acb46d 100644
--- a/packages/components/src/components/settings/clear-cache.tsx
+++ b/packages/components/src/components/settings/clear-cache.tsx
@@ -78,7 +78,7 @@ export function ClearCacheConfirmDialog({
               onConfirm();
             }}
             disabled={isClearing}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            variant="destructive"
           >
             {isClearing ? (
               <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
diff --git a/packages/components/src/components/settings/cli-daemon-setting.tsx b/packages/components/src/components/settings/cli-daemon-setting.tsx
index a6285d820..492c72c77 100644
--- a/packages/components/src/components/settings/cli-daemon-setting.tsx
+++ b/packages/components/src/components/settings/cli-daemon-setting.tsx
@@ -2,7 +2,7 @@ import { Loader2, Play, RotateCcw, Square } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import type { ElectronCliState } from '@lody/shared';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { useElectronCliDaemon } from '@/hooks/use-electron-cli-daemon';
 import { CompactRow } from './compact-layout';
 
@@ -58,9 +58,8 @@ export function CliDaemonSetting() {
           </span>
           <Button
             type="button"
-            variant="outline"
-            size="sm"
-            className="h-7 gap-1.5 px-2 text-xs"
+            variant="secondary"
+            size="small"
             disabled={busy || !localAgentEnabled}
             onClick={() => void restart()}
           >
@@ -75,9 +74,9 @@ export function CliDaemonSetting() {
           </Button>
           <Button
             type="button"
-            variant="outline"
-            size="sm"
-            className="h-7 gap-1.5 border-status-danger/30 px-2 text-xs text-status-danger hover:bg-status-danger/10 hover:text-status-danger disabled:text-muted-foreground/60"
+            variant="secondary"
+            size="small"
+            tone="destructive"
             disabled={busy || isStopped}
             onClick={() => void terminate()}
           >
diff --git a/packages/components/src/components/settings/device-resource-monitor.tsx b/packages/components/src/components/settings/device-resource-monitor.tsx
index afb9b2cee..9270427cb 100644
--- a/packages/components/src/components/settings/device-resource-monitor.tsx
+++ b/packages/components/src/components/settings/device-resource-monitor.tsx
@@ -18,7 +18,7 @@ import {
   Loader2,
   TerminalSquare,
 } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Card } from '@/ui/card';
 import {
   AlertDialog,
@@ -434,8 +434,7 @@ function SessionTable({
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('common.cancel', 'Cancel')}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            <AlertDialogAction variant="destructive"
               disabled={!confirmSession}
               onClick={() => {
                 const session = confirmSession;
@@ -470,12 +469,9 @@ function SessionActionButton({
       <TooltipTrigger asChild>
         <Button
           type="button"
-          size="icon"
           variant="ghost"
-          className={cn(
-            'h-8 w-8 md:h-7 md:w-7',
-            destructive && 'text-destructive hover:text-destructive'
-          )}
+          icon
+          tone={destructive ? 'destructive' : 'neutral'}
           disabled={disabled}
           onClick={onClick}
           aria-label={label}
diff --git a/packages/components/src/components/settings/env-vars-textarea.tsx b/packages/components/src/components/settings/env-vars-textarea.tsx
index 4fce45098..f9d74fd29 100644
--- a/packages/components/src/components/settings/env-vars-textarea.tsx
+++ b/packages/components/src/components/settings/env-vars-textarea.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Textarea } from '@/ui/textarea';
-import { Label } from '@/ui/label';
+import { Textarea } from '@lody/ui/textarea';
+import { Field as UiField } from '@lody/ui/field';
 import { cn } from '@/lib/utils';
 
 /**
@@ -201,7 +201,7 @@ export function EnvVarsTextarea({
 
   return (
     <div className={cn('space-y-2', className)}>
-      {showLabel && <Label>{displayLabel}</Label>}
+      {showLabel && <UiField.Label>{displayLabel}</UiField.Label>}
       <Textarea
         value={text}
         onChange={handleChange}
diff --git a/packages/components/src/components/settings/experimental-features-setting.tsx b/packages/components/src/components/settings/experimental-features-setting.tsx
index 395241ae3..5dc6cde89 100644
--- a/packages/components/src/components/settings/experimental-features-setting.tsx
+++ b/packages/components/src/components/settings/experimental-features-setting.tsx
@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   experimentalFeaturesEnabledAtom,
   reviewAgentExperimentEnabledAtom,
diff --git a/packages/components/src/components/settings/form-primitives.tsx b/packages/components/src/components/settings/form-primitives.tsx
index 5805f70bb..4efaadc14 100644
--- a/packages/components/src/components/settings/form-primitives.tsx
+++ b/packages/components/src/components/settings/form-primitives.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Label } from '@/ui/label';
+import { Field as UiField } from '@lody/ui/field';
 
 /**
  * The shared grammar of the settings editors.
@@ -50,9 +50,9 @@ export function Field({
     <div className="space-y-1.5">
       <div className="flex items-center gap-1.5">
         {icon ? <span className="text-muted-foreground">{icon}</span> : null}
-        <Label htmlFor={htmlFor} className="text-xs font-medium">
+        <UiField.Label htmlFor={htmlFor} className="text-xs font-medium">
           {label}
-        </Label>
+        </UiField.Label>
       </div>
       {children}
       {hint ? <p className="text-[11px] leading-snug text-muted-foreground">{hint}</p> : null}
diff --git a/packages/components/src/components/settings/general-setting.tsx b/packages/components/src/components/settings/general-setting.tsx
index 9eba69aeb..8639239a3 100644
--- a/packages/components/src/components/settings/general-setting.tsx
+++ b/packages/components/src/components/settings/general-setting.tsx
@@ -5,10 +5,10 @@ import type {
   OpenSystemNotificationSettingsResult,
 } from '@lody/shared';
 import { Trash2 } from 'lucide-react';
-import { Loading } from '@/ui';
-import { Button } from '@/ui/button';
-import { Switch } from '@/ui/switch';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
+import { Spinner } from '@lody/ui/spinner';
+import { Button } from '@lody/ui/button';
+import { Switch } from '@lody/ui/switch';
+import { Select } from '@lody/ui/select';
 import { toast } from 'sonner';
 import {
   electronSessionCompletionNotificationsEnabledAtom,
@@ -128,6 +128,15 @@ export function GeneralSettingsComponent() {
   const selectedMobileKeyboardAction = isMobileKeyboardAction(mobileKeyboardAction)
     ? mobileKeyboardAction
     : 'send';
+  // `Select.Value` reads the label of the current value from `items`, not from
+  // the rows, so the list is stated once and drives both.
+  const mobileKeyboardActionOptions = useMemo(
+    () => [
+      { value: 'send', label: t('settings.input.mobileKeyboardAction.send') },
+      { value: 'newline', label: t('settings.input.mobileKeyboardAction.newline') },
+    ],
+    [t]
+  );
   const electronPlatform = useMemo(() => {
     if (!isElectron || typeof window === 'undefined') {
       return 'unknown';
@@ -617,7 +626,8 @@ export function GeneralSettingsComponent() {
               label={t('settings.input.mobileKeyboardAction.label')}
               helper={t('settings.input.mobileKeyboardAction.helper')}
             >
-              <Select
+              <Select.Root
+                items={mobileKeyboardActionOptions}
                 value={selectedMobileKeyboardAction}
                 onValueChange={(value) => {
                   if (isMobileKeyboardAction(value)) {
@@ -625,18 +635,17 @@ export function GeneralSettingsComponent() {
                   }
                 }}
               >
-                <SelectTrigger className="w-full sm:w-[220px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="send">
-                    {t('settings.input.mobileKeyboardAction.send')}
-                  </SelectItem>
-                  <SelectItem value="newline">
-                    {t('settings.input.mobileKeyboardAction.newline')}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+                <Select.Trigger className="sm:w-[220px]">
+                  <Select.Value />
+                </Select.Trigger>
+                <Select.Content>
+                  {mobileKeyboardActionOptions.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
             </CompactRow>
           </CompactSection>
         ) : null}
@@ -697,7 +706,9 @@ export function GeneralSettingsComponent() {
             alignTop
           >
             {isProcessing ? (
-              <Loading size="sm" className="h-5 w-9" />
+              <span className="flex h-5 w-9 items-center justify-center">
+                  <Spinner size="small" label={t('common.loading', 'Loading...')} />
+                </span>
             ) : (
               <Switch
                 id="notification-toggle"
@@ -721,7 +732,9 @@ export function GeneralSettingsComponent() {
               )}
             >
               {autoLaunch.enabledLoading ? (
-                <Loading size="sm" className="h-5 w-9" />
+                <span className="flex h-5 w-9 items-center justify-center">
+                  <Spinner size="small" label={t('common.loading', 'Loading...')} />
+                </span>
               ) : (
                 <Switch
                   id="auto-launch-toggle"
@@ -741,7 +754,9 @@ export function GeneralSettingsComponent() {
               )}
             >
               {autoLaunch.hideWindowLoading ? (
-                <Loading size="sm" className="h-5 w-9" />
+                <span className="flex h-5 w-9 items-center justify-center">
+                  <Spinner size="small" label={t('common.loading', 'Loading...')} />
+                </span>
               ) : (
                 <Switch
                   id="auto-launch-hide-window-toggle"
@@ -763,7 +778,9 @@ export function GeneralSettingsComponent() {
                 alignTop
               >
                 {cliAutoStartLoading ? (
-                  <Loading size="sm" className="h-5 w-9" />
+                  <span className="flex h-5 w-9 items-center justify-center">
+                  <Spinner size="small" label={t('common.loading', 'Loading...')} />
+                </span>
                 ) : (
                   <Switch
                     id="cli-auto-start-toggle"
@@ -811,7 +828,7 @@ export function GeneralSettingsComponent() {
             label={t('settings.cache.clearCache.label')}
             helper={t('settings.cache.clearCache.description')}
           >
-            <Button variant="outline" size="sm" onClick={() => clearCache.setDialogOpen(true)}>
+            <Button variant="secondary" size="small" onClick={() => clearCache.setDialogOpen(true)}>
               <Trash2 className="mr-1.5 h-3.5 w-3.5" />
               {t('settings.cache.clearCache.button')}
             </Button>
diff --git a/packages/components/src/components/settings/integrations-setting.tsx b/packages/components/src/components/settings/integrations-setting.tsx
index 3cbc197e1..e7c22aceb 100644
--- a/packages/components/src/components/settings/integrations-setting.tsx
+++ b/packages/components/src/components/settings/integrations-setting.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   AlertCircle,
   Book,
@@ -18,8 +18,8 @@ import { cloudOperations } from '@/lib/cloud-api-operations';
 import { cn } from '@/lib/utils';
 import { useAppCapability } from '@/lib/app-platform';
 import { ScrollArea } from '@/ui/scroll-area';
-import { Switch } from '@/ui/switch';
-import { Input } from '@/ui/input';
+import { Switch } from '@lody/ui/switch';
+import { Input } from '@lody/ui/input';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { useSettingsDataCache, type SettingsWorkspaceRepoWithStatus } from './settings-data-cache';
@@ -144,9 +144,9 @@ export function GitHubPersonalIdentitySettingsCard({
         </div>
         {!authorizationReady && canAuthorize && (
           <Button
-            size="sm"
             variant="ghost"
-            className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap bg-foreground/[0.06] self-start hover:bg-foreground/[0.1] sm:self-auto"
+            size="small"
+            className="shrink-0 self-start sm:self-auto"
             onClick={onAuthorize}
             disabled={!workspaceReady || authorizing}
           >
@@ -240,9 +240,9 @@ export function GitHubPersonalIdentitySettingsCard({
           </div>
           {!authorizationReady && canAuthorize && (
             <Button
-              size="sm"
               variant="ghost"
-              className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap bg-foreground/[0.06] hover:bg-foreground/[0.1]"
+              size="small"
+              className="shrink-0"
               onClick={onAuthorize}
               disabled={!workspaceReady || authorizing}
             >
@@ -309,7 +309,9 @@ function CloudIntegrationsSettings() {
   const setPersonalOperationPreference = useCloudMutation(
     cloudOperations.github.setPersonalOperationPreference
   );
-  const refreshPersonalGitHubProfile = useCloudAction(cloudOperations.github.refreshPersonalGitHubProfile);
+  const refreshPersonalGitHubProfile = useCloudAction(
+    cloudOperations.github.refreshPersonalGitHubProfile
+  );
   const [connectingToGitHub, setConnectingToGitHub] = useState(false);
   const [updatingPersonalPreference, setUpdatingPersonalPreference] = useState(false);
   const [authorizingPersonalGitHub, setAuthorizingPersonalGitHub] = useState(false);
@@ -563,9 +565,8 @@ function CloudIntegrationsSettings() {
             <div className="flex shrink-0 items-center gap-2">
               {canManage && (
                 <Button
-                  size="sm"
-                  className="inline-flex items-center gap-1 whitespace-nowrap bg-foreground/[0.05] text-foreground hover:bg-foreground/[0.08]"
                   variant="ghost"
+                  size="small"
                   onClick={() => {
                     void handleConnectGitHub();
                   }}
diff --git a/packages/components/src/components/settings/invite-member-dialog.tsx b/packages/components/src/components/settings/invite-member-dialog.tsx
index 95ce87604..279b6c381 100644
--- a/packages/components/src/components/settings/invite-member-dialog.tsx
+++ b/packages/components/src/components/settings/invite-member-dialog.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState, type KeyboardEvent } from 'react';
+import { useEffect, useMemo, useState, type KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreditCard, Loader2, Shield, User } from 'lucide-react';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
+import { Select } from '@lody/ui/select';
 import {
   Dialog,
   DialogContent,
@@ -77,6 +77,32 @@ export function InviteMemberDialog({
   const [email, setEmail] = useState('');
   const [role, setRole] = useState<InviteMemberRole>('member');
 
+  // `Select.Value` reads the label of the current value from `items`, not from
+  // the rows, so the list is stated once and drives both.
+  const roleOptions = useMemo(
+    () => [
+      {
+        value: 'member' as const,
+        label: (
+          <span className="flex items-center gap-2">
+            <User className="h-3.5 w-3.5 text-muted-foreground" />
+            <span>{t('organization.role.member')}</span>
+          </span>
+        ),
+      },
+      {
+        value: 'admin' as const,
+        label: (
+          <span className="flex items-center gap-2">
+            <Shield className="h-3.5 w-3.5 text-muted-foreground" />
+            <span>{t('organization.role.admin')}</span>
+          </span>
+        ),
+      },
+    ],
+    [t]
+  );
+
   // Reopening the dialog must not resurrect the previous draft.
   useEffect(() => {
     if (!open) return;
@@ -128,9 +154,9 @@ export function InviteMemberDialog({
         ) : (
           <div className="space-y-4 px-5 pb-5">
             <div className="space-y-1.5">
-              <Label htmlFor="invite-email" className="text-xs text-muted-foreground">
+              <UiField.Label htmlFor="invite-email" className="text-xs text-muted-foreground">
                 {t('workspace.invite.email')}
-              </Label>
+              </UiField.Label>
               <Input
                 id="invite-email"
                 value={email}
@@ -146,28 +172,25 @@ export function InviteMemberDialog({
             </div>
 
             <div className="space-y-1.5">
-              <Label htmlFor="invite-role" className="text-xs text-muted-foreground">
+              <UiField.Label htmlFor="invite-role" className="text-xs text-muted-foreground">
                 {t('workspace.invite.role')}
-              </Label>
-              <Select value={role} onValueChange={(value) => setRole(value as InviteMemberRole)}>
-                <SelectTrigger id="invite-role" className="h-9 w-full">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="member">
-                    <div className="flex items-center gap-2">
-                      <User className="h-3.5 w-3.5 text-muted-foreground" />
-                      <span>{t('organization.role.member')}</span>
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="admin">
-                    <div className="flex items-center gap-2">
-                      <Shield className="h-3.5 w-3.5 text-muted-foreground" />
-                      <span>{t('organization.role.admin')}</span>
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+              </UiField.Label>
+              <Select.Root
+                items={roleOptions}
+                value={role}
+                onValueChange={(value) => setRole(value as InviteMemberRole)}
+              >
+                <Select.Trigger id="invite-role">
+                  <Select.Value />
+                </Select.Trigger>
+                <Select.Content>
+                  {roleOptions.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
               <p className="text-xs leading-relaxed text-muted-foreground">
                 {role === 'admin'
                   ? t('workspace.invite.roleHintAdmin')
@@ -181,8 +204,8 @@ export function InviteMemberDialog({
 
         <DialogFooter className="gap-2 border-t border-border/60 bg-muted/20 px-5 py-3.5">
           <Button
-            variant="outline"
-            size="sm"
+            variant="secondary"
+            size="small"
             onClick={() => onOpenChange(false)}
             disabled={inviting}
           >
@@ -193,7 +216,7 @@ export function InviteMemberDialog({
             billingUiAvailable &&
             onOpenBilling && (
               <Button
-                size="sm"
+                size="small"
                 onClick={() => {
                   onOpenChange(false);
                   onOpenBilling();
@@ -204,7 +227,7 @@ export function InviteMemberDialog({
               </Button>
             )
           ) : (
-            <Button size="sm" onClick={submit} disabled={!email.trim() || inviting}>
+            <Button size="small" onClick={submit} disabled={!email.trim() || inviting}>
               {inviting && <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />}
               {inviting ? t('common.inviting') : t('common.invite')}
             </Button>
diff --git a/packages/components/src/components/settings/join-community-dialog.tsx b/packages/components/src/components/settings/join-community-dialog.tsx
index 41efa3bcf..5f16ae101 100644
--- a/packages/components/src/components/settings/join-community-dialog.tsx
+++ b/packages/components/src/components/settings/join-community-dialog.tsx
@@ -100,7 +100,7 @@ export function JoinCommunityButton() {
 
   return (
     <>
-      <Button size="sm" className="h-7 px-2.5" onClick={() => setOpen(true)}>
+      <Button size="small" onClick={() => setOpen(true)}>
         <Users className="mr-1 h-3.5 w-3.5" />
         {t('settings.about.joinCommunity', 'Join community')}
       </Button>
diff --git a/packages/components/src/components/settings/keyboard-shortcuts-setting.tsx b/packages/components/src/components/settings/keyboard-shortcuts-setting.tsx
index 09d178a9a..a1e7e8eac 100644
--- a/packages/components/src/components/settings/keyboard-shortcuts-setting.tsx
+++ b/packages/components/src/components/settings/keyboard-shortcuts-setting.tsx
@@ -6,7 +6,7 @@ import {
   type GlobalShortcutId,
   type GlobalShortcutSetError,
 } from '@lody/shared';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 import {
   canonicalizeBinding,
@@ -93,13 +93,7 @@ export function KeyboardShortcutsSetting() {
         <p className="text-xs text-muted-foreground">
           {t('settings.keyboardShortcuts.description')}
         </p>
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={!anyOverridden}
-          onClick={handleResetAll}
-          className="h-7"
-        >
+        <Button variant="secondary" size="small" disabled={!anyOverridden} onClick={handleResetAll}>
           {t('settings.keyboardShortcuts.resetAll')}
         </Button>
       </div>
@@ -227,15 +221,16 @@ function GlobalShortcutRow({
           {!recording && binding && (
             <Button
               variant="ghost"
-              size="icon"
-              className="h-7 w-7 text-muted-foreground hover:text-destructive [&_svg]:size-3.5"
+              size="small"
+              icon
+              tone="destructive"
               onClick={() => {
                 setError(null);
                 void onSet(id, null);
               }}
               title={t('settings.keyboardShortcuts.unbindTooltip')}
             >
-              <Trash2 />
+              <Trash2 className="size-4" />
             </Button>
           )}
         </div>
@@ -355,12 +350,13 @@ function ShortcutRow({
           {!recording && primary && (
             <Button
               variant="ghost"
-              size="icon"
-              className="h-7 w-7 text-muted-foreground hover:text-destructive [&_svg]:size-3.5"
+              size="small"
+              icon
+              tone="destructive"
               onClick={handleUnbind}
               title={t('settings.keyboardShortcuts.unbindTooltip')}
             >
-              <Trash2 />
+              <Trash2 className="size-4" />
             </Button>
           )}
         </div>
diff --git a/packages/components/src/components/settings/linked-accounts-list.tsx b/packages/components/src/components/settings/linked-accounts-list.tsx
index c90041d87..d8366fd7f 100644
--- a/packages/components/src/components/settings/linked-accounts-list.tsx
+++ b/packages/components/src/components/settings/linked-accounts-list.tsx
@@ -6,7 +6,7 @@ import type { IconType } from 'react-icons';
 import { SiApple, SiDiscord, SiGithub } from 'react-icons/si';
 import { FcGoogle } from 'react-icons/fc';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -49,10 +49,25 @@ const PROVIDERS: {
    * Kept as literal strings so Tailwind's JIT emits them. */
   hoverClassName?: string;
 }[] = [
-  { id: 'github', Icon: SiGithub, boundClassName: 'text-foreground', hoverClassName: 'group-hover:text-foreground' },
+  {
+    id: 'github',
+    Icon: SiGithub,
+    boundClassName: 'text-foreground',
+    hoverClassName: 'group-hover:text-foreground',
+  },
   { id: 'google', Icon: FcGoogle, flat: true },
-  { id: 'apple', Icon: SiApple, boundClassName: 'text-foreground', hoverClassName: 'group-hover:text-foreground' },
-  { id: 'discord', Icon: SiDiscord, boundClassName: 'text-[#5865F2]', hoverClassName: 'group-hover:text-[#5865F2]' },
+  {
+    id: 'apple',
+    Icon: SiApple,
+    boundClassName: 'text-foreground',
+    hoverClassName: 'group-hover:text-foreground',
+  },
+  {
+    id: 'discord',
+    Icon: SiDiscord,
+    boundClassName: 'text-[#5865F2]',
+    hoverClassName: 'group-hover:text-[#5865F2]',
+  },
 ];
 
 export function LinkedAccountsList({
@@ -67,7 +82,10 @@ export function LinkedAccountsList({
   const boundProviders = new Set(accounts.map((account) => account.providerId));
 
   const providerLabel = (providerId: string): string =>
-    t(`settings.profile.providers.${providerId}`, providerId.charAt(0).toUpperCase() + providerId.slice(1));
+    t(
+      `settings.profile.providers.${providerId}`,
+      providerId.charAt(0).toUpperCase() + providerId.slice(1)
+    );
 
   const iconClassName = (
     bound: boolean,
@@ -185,15 +203,15 @@ export function LinkedAccountsList({
           </DialogHeader>
           <DialogFooter>
             <Button
-              variant="outline"
-              size="sm"
+              variant="secondary"
+              size="small"
               onClick={() => setPendingProviderId(null)}
               disabled={isConnecting}
             >
               {t('common.cancel')}
             </Button>
             <Button
-              size="sm"
+              size="small"
               onClick={() => {
                 void handleConfirmConnect();
               }}
diff --git a/packages/components/src/components/settings/machine-agent-settings.tsx b/packages/components/src/components/settings/machine-agent-settings.tsx
index df1885bc9..8c4083521 100644
--- a/packages/components/src/components/settings/machine-agent-settings.tsx
+++ b/packages/components/src/components/settings/machine-agent-settings.tsx
@@ -59,8 +59,8 @@ import { formatSessionTabSearch } from '@/lib/session-tab-url';
 import { useMachineMonitor } from '@/hooks/use-machine-monitor';
 import { useMachineLifecycleCapability } from '@/hooks/use-machine-lifecycle-capability';
 import { useOpenSettings } from '@/hooks/use-open-settings';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
 import { MobileSettingsRow, MobileSettingsSection } from '@/components/mobile/mobile-settings-row';
 import {
@@ -1451,8 +1451,7 @@ export function MachineAgentSettings({
                 <div className="mt-2">
                   <Button
                     variant="link"
-                    size="sm"
-                    className="h-auto px-0 text-xs"
+                    size="small"
                     onClick={() => setFilter({ onlineOnly: false, mineOnly: false })}
                   >
                     {t('settings.agent.machineTabs.filter.reset', 'Clear filter')}
@@ -1569,8 +1568,8 @@ function OwnPrivateMachines({
             <Button
               key={item.machine.id}
               variant="ghost"
-              size="sm"
-              className="h-8 w-full justify-between px-2 text-xs font-normal"
+              size="small"
+              className="w-full justify-between"
               onClick={() => onOpen(item.machine.id)}
             >
               <span className="truncate">{item.machine.name || item.machine.id}</span>
diff --git a/packages/components/src/components/settings/machine-detail-pane.tsx b/packages/components/src/components/settings/machine-detail-pane.tsx
index 2835b8436..42ed29ee4 100644
--- a/packages/components/src/components/settings/machine-detail-pane.tsx
+++ b/packages/components/src/components/settings/machine-detail-pane.tsx
@@ -25,10 +25,10 @@ import {
   UserRound,
   Users,
 } from 'lucide-react';
-import { Badge } from '@/ui/badge';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Switch } from '@/ui/switch';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Switch } from '@lody/ui/switch';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -99,8 +99,8 @@ export function MachineProvidersSection({
       <TooltipTrigger asChild>
         <Button
           variant="ghost"
-          size="icon"
-          className="h-7 w-7 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+          size="small"
+          icon
           onClick={onAddConfig}
           aria-label={t('settings.agent.provider.addProvider', 'Add provider')}
         >
@@ -123,7 +123,7 @@ export function MachineProvidersSection({
             <p className="mt-2 text-muted-foreground">
               {t('settings.agent.provider.empty', 'No providers on this machine yet.')}
             </p>
-            <Button size="sm" className="mt-3" onClick={onAddConfig}>
+            <Button size="small" className="mt-3" onClick={onAddConfig}>
               <Plus className="mr-1.5 h-3.5 w-3.5" />
               {t('settings.agent.provider.addProvider', 'Add provider')}
             </Button>
@@ -357,15 +357,10 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
   const metaBadges = (
     <>
       {isLocal && (
-        <Badge variant="secondary" className="px-1.5 py-0 text-[10px]">
-          {t('workspace.machines.thisDevice', 'This device')}
-        </Badge>
+        <Badge>{t('workspace.machines.thisDevice', 'This device')}</Badge>
       )}
       {ownerName && !isOwn && (
-        <Badge variant="secondary" className="gap-1 px-1.5 py-0 text-[10px]">
-          <UserRound className="h-2.5 w-2.5" />
-          {ownerName}
-        </Badge>
+        <Badge icon={<UserRound className="h-3 w-3" />}>{ownerName}</Badge>
       )}
       {isMobile && (
         <span
@@ -378,13 +373,8 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
           )}
         />
       )}
-      <Badge variant="secondary" className="gap-1 px-1.5 py-0 text-[10px]">
-        <Laptop className="h-2.5 w-2.5" />
-        {machine.os || '-'}
-      </Badge>
-      <Badge variant="secondary" className="px-1.5 py-0 font-mono text-[10px]">
-        {machine.cliVersion ? `v${machine.cliVersion}` : t('machines.never', 'Never')}
-      </Badge>
+      <Badge icon={<Laptop className="h-3 w-3" />}>{machine.os || '-'}</Badge>
+      <Badge>{machine.cliVersion ? `v${machine.cliVersion}` : t('machines.never', 'Never')}</Badge>
     </>
   );
 
@@ -447,12 +437,7 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                   />
                 ) : externalAccordionHeader ? (
                   manageableOwnMachine ? (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 gap-1.5 px-2 text-muted-foreground hover:text-foreground"
-                      onClick={() => setRenaming(true)}
-                    >
+                    <Button variant="ghost" size="small" onClick={() => setRenaming(true)}>
                       <Pencil className="h-3 w-3" />
                       {t('workspace.machines.editName', 'Edit machine name')}
                     </Button>
@@ -471,8 +456,9 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                     {!isMobile && manageableOwnMachine && (
                       <Button
                         variant="ghost"
-                        size="icon"
-                        className="h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground"
+                        size="mini"
+                        icon
+                        className="shrink-0"
                         aria-label={t('workspace.machines.editName', 'Edit machine name')}
                         onClick={() => setRenaming(true)}
                       >
@@ -491,8 +477,7 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                 >
                   <Button
                     variant="ghost"
-                    size="sm"
-                    className="h-7 bg-muted/40 px-2 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                    size="small"
                     disabled={pinging}
                     onClick={() => void handlePing()}
                   >
@@ -536,8 +521,9 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                   <TooltipTrigger asChild>
                     <Button
                       variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground"
+                      size="small"
+                      icon
+                      className="shrink-0"
                       aria-label={t(
                         'settings.agent.machineLifecycle.restartButton',
                         'Restart daemon'
@@ -565,8 +551,10 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                   <TooltipTrigger asChild>
                     <Button
                       variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 shrink-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                      size="small"
+                      icon
+                      tone="destructive"
+                      className="shrink-0"
                       aria-label={t(
                         'settings.devices.credentials.disconnect',
                         'Revoke machine access'
@@ -587,8 +575,9 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                     <span className="inline-flex shrink-0">
                       <Button
                         variant="ghost"
-                        size="sm"
-                        className="h-7 gap-1.5 px-2 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed"
+                        size="small"
+                        tone="destructive"
+                        className="disabled:cursor-not-allowed"
                         aria-label={t(
                           'workspace.machines.removeFromWorkspace',
                           'Remove from workspace'
@@ -616,8 +605,9 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                   <DropdownMenuTrigger asChild>
                     <Button
                       variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 shrink-0"
+                      size="small"
+                      icon
+                      className="shrink-0"
                       aria-label={t('workspace.machines.moreActions', 'Machine options')}
                     >
                       {sharing ? (
@@ -767,8 +757,9 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                 <Button
                   type="button"
                   variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground"
+                  size="small"
+                  icon
+                  className="shrink-0"
                   aria-label={t('settings.machines.collapseMachine', {
                     machine: machine.name || machine.id,
                     defaultValue: 'Collapse {{machine}}',
@@ -818,8 +809,7 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
               </div>
               <div className="shrink-0">
                 <Button
-                  size="sm"
-                  className="h-8 px-3"
+                  size="small"
                   disabled={restartingDaemon || upgradingDaemon}
                   onClick={() => void handleUpgradeDaemon()}
                 >
@@ -896,7 +886,7 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                 event.preventDefault();
                 void handleDelete();
               }}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              variant="destructive"
             >
               {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
               {t('workspace.machines.removeAction', 'Remove')}
@@ -936,7 +926,7 @@ export function MachineDetailPane(props: MachineDetailPaneProps) {
                   })
                   .finally(() => setRevoking(false));
               }}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              variant="destructive"
             >
               {revoking ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
               {t('settings.devices.credentials.disconnect', 'Revoke machine access')}
@@ -961,7 +951,7 @@ function EmptyProviders({ onAdd, flush = false }: { onAdd: () => void; flush?: b
       <p className="mt-2 text-muted-foreground">
         {t('settings.agent.provider.empty', 'No providers on this machine yet.')}
       </p>
-      <Button size="sm" className="mt-3" onClick={onAdd}>
+      <Button size="small" className="mt-3" onClick={onAdd}>
         <Plus className="mr-1.5 h-3.5 w-3.5" />
         {t('settings.agent.provider.addProvider', 'Add provider')}
       </Button>
diff --git a/packages/components/src/components/settings/machine-quota-compact.tsx b/packages/components/src/components/settings/machine-quota-compact.tsx
index 780573e6c..9ce3898bc 100644
--- a/packages/components/src/components/settings/machine-quota-compact.tsx
+++ b/packages/components/src/components/settings/machine-quota-compact.tsx
@@ -10,7 +10,7 @@ import { formatDistanceToNow, type Locale } from 'date-fns';
 import { enUS, zhCN } from 'date-fns/locale';
 import { AnthropicIcon } from '@/components/icons/anthropic-icon';
 import { OpenAIIcon } from '@/components/icons/openai-icon';
-import { Badge } from '@/ui/badge';
+import { Badge } from '@lody/ui/badge';
 import { cn } from '@/lib/utils';
 import {
   FIVE_HOUR_WINDOW_SECONDS,
@@ -95,11 +95,7 @@ export function MachineQuotaCompact({ raceLimits, filterCliType }: MachineQuotaC
           ) : null;
 
         const tierBadge = tierLabel ? (
-          <Badge
-            variant="secondary"
-            className="max-w-[180px] truncate px-1.5 py-0 text-[10px]"
-            title={tierLabel}
-          >
+          <Badge className="max-w-[180px]" title={tierLabel}>
             {tierLabel}
           </Badge>
         ) : null;
diff --git a/packages/components/src/components/settings/machine-tab-list.tsx b/packages/components/src/components/settings/machine-tab-list.tsx
index b5d4041d8..3c7cfc21f 100644
--- a/packages/components/src/components/settings/machine-tab-list.tsx
+++ b/packages/components/src/components/settings/machine-tab-list.tsx
@@ -4,7 +4,7 @@ import { ChevronRight, ListFilter, LockKeyhole, Users } from 'lucide-react';
 import { type MachineId, type MachineViewMeta } from '@lody/shared';
 import type { MachineSettingsFilter } from '@/atoms/settings-machine-tab';
 import type { MachineVisibilityAccess } from '@/hooks/use-visible-machine-metas';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -120,8 +120,7 @@ export function MachineTabList({
                 <div className="mt-2">
                   <Button
                     variant="link"
-                    size="sm"
-                    className="h-auto px-0 text-xs"
+                    size="small"
                     onClick={() => onFilterChange({ onlineOnly: false, mineOnly: false })}
                   >
                     {t('settings.agent.machineTabs.filter.reset', 'Clear filter')}
@@ -150,12 +149,10 @@ export function MachineListFilterButton({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          variant="ghost"
-          size="icon"
-          className={cn(
-            'h-7 w-7 shrink-0 border-0 shadow-none',
-            isFilterActive && 'bg-hover text-foreground'
-          )}
+          variant={isFilterActive ? 'secondary' : 'ghost'}
+          size="small"
+          icon
+          className="shrink-0"
           aria-label={t('settings.agent.machineTabs.filter.label', 'Filter machines')}
         >
           <ListFilter className="h-3.5 w-3.5" />
@@ -344,8 +341,7 @@ function MachineOwnerAvatar({
         >
           <UserAvatar
             user={owner ?? (ownerUserId ? { id: ownerUserId, name: ownerName } : null)}
-            className="h-5 w-5 text-[9px]"
-            fallbackClassName="bg-muted text-muted-foreground"
+            size="small"
             showIcon={!ownerUserId}
           />
         </span>
diff --git a/packages/components/src/components/settings/mcp-connection-form.tsx b/packages/components/src/components/settings/mcp-connection-form.tsx
index c6da3f28e..bed3a7a2d 100644
--- a/packages/components/src/components/settings/mcp-connection-form.tsx
+++ b/packages/components/src/components/settings/mcp-connection-form.tsx
@@ -8,11 +8,11 @@ import {
   McpTransportIcon,
 } from '@/components/shared/mcp-transport';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
-import { Switch } from '@/ui/switch';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
+import { Switch } from '@lody/ui/switch';
+import { Textarea } from '@lody/ui/textarea';
 import { Field, Section } from './form-primitives';
 
 type KeyValueDraft = { key: string; value: string };
@@ -49,9 +49,7 @@ const emptyConnectionFields = (transport: McpTransport) => ({
   headers: [] as KeyValueDraft[],
 });
 
-const createMcpConnectionFormDraft = (
-  entry?: WorkspaceMcpServerMeta
-): McpConnectionFormDraft => {
+const createMcpConnectionFormDraft = (entry?: WorkspaceMcpServerMeta): McpConnectionFormDraft => {
   const transport = entry?.transport ?? 'stdio';
   const connection = entry?.connection;
   return {
@@ -301,9 +299,9 @@ export function McpConnectionForm({
 
         <div className="flex items-center justify-between gap-4 rounded-lg border border-border/70 bg-card/60 px-3 py-2.5">
           <div className="min-w-0">
-            <Label htmlFor={`${fieldId}-default`} className="text-sm">
+            <UiField.Label htmlFor={`${fieldId}-default`} className="text-sm">
               {t('settings.mcp.form.defaultEnabled')}
-            </Label>
+            </UiField.Label>
             <p className="mt-0.5 text-[11px] leading-snug text-muted-foreground">
               {t('settings.mcp.form.defaultEnabledHint')}
             </p>
@@ -328,10 +326,16 @@ export function McpConnectionForm({
       </div>
 
       <footer className="flex shrink-0 items-center justify-end gap-2 border-t border-border/60 px-5 py-3">
-        <Button type="button" variant="outline" size="sm" disabled={submitting} onClick={onCancel}>
+        <Button
+          type="button"
+          variant="secondary"
+          size="small"
+          disabled={submitting}
+          onClick={onCancel}
+        >
           {t('common.cancel')}
         </Button>
-        <Button type="submit" size="sm" disabled={submitting || draft.name.trim().length === 0}>
+        <Button type="submit" size="small" disabled={submitting || draft.name.trim().length === 0}>
           {submitting ? <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" /> : null}
           {submitting ? t('settings.mcp.form.saving') : t('common.save')}
         </Button>
@@ -401,13 +405,7 @@ function ListEditor({
     <Field label={label} hint={hint}>
       <div className="space-y-1.5">
         {children}
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="h-7 gap-1 px-2 text-xs font-normal text-muted-foreground hover:text-foreground"
-          onClick={onAdd}
-        >
+        <Button type="button" variant="ghost" size="small" onClick={onAdd}>
           <Plus className="h-3.5 w-3.5" aria-hidden="true" />
           {addLabel}
         </Button>
@@ -421,9 +419,10 @@ function RemoveRowButton({ onClick }: { onClick: () => void }) {
   return (
     <Button
       type="button"
-      size="icon"
       variant="ghost"
-      className="h-8 w-8 shrink-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+      icon
+      tone="destructive"
+      className="shrink-0"
       aria-label={t('common.remove')}
       onClick={onClick}
     >
diff --git a/packages/components/src/components/settings/mcp-setting.tsx b/packages/components/src/components/settings/mcp-setting.tsx
index 6eb162c43..56fba25b7 100644
--- a/packages/components/src/components/settings/mcp-setting.tsx
+++ b/packages/components/src/components/settings/mcp-setting.tsx
@@ -28,10 +28,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/ui/alert-dialog';
-import { Badge } from '@/ui/badge';
-import { Button } from '@/ui/button';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ui/dialog';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { settingContainerClass } from '.';
 import { McpConnectionForm, type McpConnectionFormValue } from './mcp-connection-form';
@@ -151,9 +151,9 @@ export function McpSetting() {
             <TooltipTrigger asChild>
               <Button
                 variant="ghost"
-                size="icon"
-                className="h-7 w-7 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
                 aria-label={addLabel}
+                size="small"
+                icon
                 onClick={() => openEditor({ mode: 'add' })}
               >
                 <Plus className="h-3.5 w-3.5" />
@@ -167,7 +167,7 @@ export function McpSetting() {
           <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border/60 bg-card/30 px-6 py-8 text-center text-sm">
             <Plug className="h-6 w-6 text-muted-foreground/70" aria-hidden="true" />
             <p className="mt-2 text-muted-foreground">{t('settings.mcp.empty')}</p>
-            <Button size="sm" className="mt-3" onClick={() => openEditor({ mode: 'add' })}>
+            <Button size="small" className="mt-3" onClick={() => openEditor({ mode: 'add' })}>
               <Plus className="mr-1.5 h-3.5 w-3.5" />
               {addLabel}
             </Button>
@@ -247,8 +247,7 @@ export function McpSetting() {
           <AlertDialogFooter>
             <AlertDialogCancel disabled={removing}>{t('common.cancel')}</AlertDialogCancel>
             <AlertDialogAction
-              disabled={removing}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={removing} variant="destructive"
               onClick={(event) => {
                 event.preventDefault();
                 void confirmRemoval();
@@ -296,9 +295,7 @@ export function McpServerRow({
               <span className="min-w-0 truncate text-sm font-medium leading-tight">
                 {server.name}
               </span>
-              <Badge variant="secondary" className="shrink-0 px-1.5 py-0 text-[10px]">
-                {MCP_TRANSPORT_LABELS[server.transport]}
-              </Badge>
+              <Badge>{MCP_TRANSPORT_LABELS[server.transport]}</Badge>
             </span>
             <span className="mt-0.5 block truncate font-mono text-[11px] leading-tight text-muted-foreground">
               {describeMcpConnection(server.connection) ?? '—'}
@@ -311,7 +308,7 @@ export function McpServerRow({
           </span>
         </button>
         <div className="flex shrink-0 items-center gap-2 py-2 pl-2 pr-2">
-          {/* The switch keeps its own Radix `data-state`, so the label sits
+          {/* The switch carries its own state attributes, so the label sits
               beside it rather than wrapping it in a tooltip trigger. */}
           <label
             className="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted-foreground"
@@ -326,10 +323,11 @@ export function McpServerRow({
           </label>
           <Button
             type="button"
-            size="icon"
             variant="ghost"
-            className="h-7 w-7 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
             aria-label={t('common.remove')}
+            size="small"
+            icon
+            tone="destructive"
             onClick={onRemove}
           >
             <Trash2 className="h-3.5 w-3.5" />
diff --git a/packages/components/src/components/settings/my-machine-connected-resources.tsx b/packages/components/src/components/settings/my-machine-connected-resources.tsx
index 730685ca0..87f96d5f8 100644
--- a/packages/components/src/components/settings/my-machine-connected-resources.tsx
+++ b/packages/components/src/components/settings/my-machine-connected-resources.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { Bot, Folder } from 'lucide-react';
 import type { AgentConfigMeta, MachineId } from '@lody/shared';
 import { useLocalProjectsAdmin } from '@/hooks/use-local-projects-admin';
-import { Button } from '@/ui/button';
-import { Switch } from '@/ui/switch';
+import { Button } from '@lody/ui/button';
+import { Switch } from '@lody/ui/switch';
 import type { ProjectSettingsRow } from './project-settings';
 
 export type MachineConnectedProject = {
@@ -166,7 +166,7 @@ function MachineConnectedResourcesContent({
             </h3>
           </div>
           {!readOnly ? (
-            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={onManageAgents}>
+            <Button variant="secondary" size="small" onClick={onManageAgents}>
               {t('settings.machines.manageAgents', 'Manage in Agents')}
             </Button>
           ) : null}
diff --git a/packages/components/src/components/settings/open-source-attributions-dialog.tsx b/packages/components/src/components/settings/open-source-attributions-dialog.tsx
index bc9324213..d540d747e 100644
--- a/packages/components/src/components/settings/open-source-attributions-dialog.tsx
+++ b/packages/components/src/components/settings/open-source-attributions-dialog.tsx
@@ -4,11 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { OPEN_SOURCE_ATTRIBUTION_BUNDLE } from '@/lib/open-source-attributions.generated';
 import type { OpenSourceAttributionEntry } from '@/lib/open-source-attributions';
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Badge,
   Button,
   Dialog,
   DialogContent,
@@ -17,12 +12,10 @@ import {
   DialogTitle,
   DialogTrigger,
   ScrollArea,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
 } from '@/ui';
+import { Accordion } from '@lody/ui/accordion';
+import { Badge } from '@lody/ui/badge';
+import { Select } from '@lody/ui/select';
 
 const allEntries = OPEN_SOURCE_ATTRIBUTION_BUNDLE.entries;
 const bundledEntries = allEntries.filter((entry) => entry.kind === 'vendored');
@@ -38,6 +31,12 @@ const dependencyLicenseOptions = Object.entries(dependencyEntriesByLicense)
       left.license.localeCompare(right.license, undefined, { sensitivity: 'base' })
   );
 const defaultDependencyLicense = dependencyLicenseOptions[0]?.license ?? '';
+// `Select.Value` reads the label of the current value from `items`, not from
+// the rows, so the list is stated once and drives both.
+const dependencyLicenseItems = dependencyLicenseOptions.map((option) => ({
+  value: option.license,
+  label: `${option.license} (${option.count})`,
+}));
 
 function formatGeneratedAt(value: string): string {
   try {
@@ -74,18 +73,12 @@ function AttributionItem({ entry }: { entry: OpenSourceAttributionEntry }) {
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-2">
             <p className="font-medium text-foreground">{entry.name}</p>
-            <Badge variant="secondary" className="rounded-md">
-              {entry.license}
-            </Badge>
+            <Badge>{entry.license}</Badge>
             {entry.scope === 'bundled-theme' ? (
-              <Badge variant="outline" className="rounded-md">
-                Theme
-              </Badge>
+              <Badge>Theme</Badge>
             ) : null}
             {entry.scope === 'vendored-icon-set' ? (
-              <Badge variant="outline" className="rounded-md">
-                Icons
-              </Badge>
+              <Badge>Icons</Badge>
             ) : null}
           </div>
           {entry.versions?.length ? (
@@ -167,9 +160,8 @@ export function OpenSourceAttributionsDialog({
     >
       <DialogTrigger asChild>
         <Button
-          variant="outline"
-          size="sm"
-          className="h-7 px-2.5"
+          variant="secondary"
+          size="small"
           onClick={(event) => {
             event.preventDefault();
             clearOpenTimer();
@@ -218,37 +210,33 @@ export function OpenSourceAttributionsDialog({
 
         <ScrollArea className="max-h-[70vh]">
           <div className="px-4 py-4 sm:px-6">
-            <Accordion type="multiple" defaultValue={['bundled-assets']} className="w-full">
-              <AccordionItem value="bundled-assets">
-                <AccordionTrigger className="py-3 text-sm">
+            <Accordion.Root multiple defaultValue={['bundled-assets']}>
+              <Accordion.Item value="bundled-assets">
+                <Accordion.Trigger>
                   <span className="flex items-center gap-2">
                     <Palette className="h-4 w-4 text-muted-foreground" />
                     {t('settings.about.bundledAssets', 'Bundled assets')}
-                    <Badge variant="secondary" className="rounded-md">
-                      {bundledEntries.length}
-                    </Badge>
+                    <Badge>{bundledEntries.length}</Badge>
                   </span>
-                </AccordionTrigger>
-                <AccordionContent>
+                </Accordion.Trigger>
+                <Accordion.Panel>
                   <div className="space-y-3">
                     {bundledEntries.map((entry) => (
                       <AttributionItem key={entry.id} entry={entry} />
                     ))}
                   </div>
-                </AccordionContent>
-              </AccordionItem>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-              <AccordionItem value="dependencies">
-                <AccordionTrigger className="py-3 text-sm">
+              <Accordion.Item value="dependencies">
+                <Accordion.Trigger>
                   <span className="flex items-center gap-2">
                     <FileCode2 className="h-4 w-4 text-muted-foreground" />
                     {t('settings.about.dependencies', 'Dependencies')}
-                    <Badge variant="secondary" className="rounded-md">
-                      {dependencyEntries.length}
-                    </Badge>
+                    <Badge>{dependencyEntries.length}</Badge>
                   </span>
-                </AccordionTrigger>
-                <AccordionContent>
+                </Accordion.Trigger>
+                <Accordion.Panel>
                   <div className="space-y-3">
                     <div className="flex flex-col gap-2 rounded-md border border-border/70 bg-card/60 p-3 sm:flex-row sm:items-center sm:justify-between">
                       <div className="min-w-0">
@@ -262,29 +250,32 @@ export function OpenSourceAttributionsDialog({
                           )}
                         </p>
                       </div>
-                      <Select
+                      <Select.Root
+                        items={dependencyLicenseItems}
                         value={selectedDependencyLicense}
-                        onValueChange={setSelectedDependencyLicense}
+                        onValueChange={(value) => {
+                          if (value != null) setSelectedDependencyLicense(value);
+                        }}
                       >
-                        <SelectTrigger className="w-full sm:w-[320px]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {dependencyLicenseOptions.map((option) => (
-                            <SelectItem key={option.license} value={option.license}>
-                              {option.license} ({option.count})
-                            </SelectItem>
+                        <Select.Trigger className="sm:w-[320px]">
+                          <Select.Value />
+                        </Select.Trigger>
+                        <Select.Content>
+                          {dependencyLicenseItems.map((option) => (
+                            <Select.Item key={option.value} value={option.value}>
+                              {option.label}
+                            </Select.Item>
                           ))}
-                        </SelectContent>
-                      </Select>
+                        </Select.Content>
+                      </Select.Root>
                     </div>
                     {selectedDependencyEntries.map((entry) => (
                       <AttributionItem key={entry.id} entry={entry} />
                     ))}
                   </div>
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion.Root>
           </div>
         </ScrollArea>
       </DialogContent>
diff --git a/packages/components/src/components/settings/path-launchers-setting.tsx b/packages/components/src/components/settings/path-launchers-setting.tsx
index bd0037bd1..635d0d5fe 100644
--- a/packages/components/src/components/settings/path-launchers-setting.tsx
+++ b/packages/components/src/components/settings/path-launchers-setting.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 import { usePostHog } from '@posthog/react';
 import { Check, Pencil, Plus, Trash2 } from 'lucide-react';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import {
   Dialog,
   DialogContent,
@@ -14,26 +14,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/ui/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from '@/ui/select';
+import { Select } from '@lody/ui/select';
 import { getPathLauncherIcon } from '@/components/icons/path-launcher-icon';
 import { capturePostHogEvent } from '@/lib/posthog-analytics';
 import { cn } from '@/lib/utils';
 import { useIsMobile } from '@/hooks/use-mobile';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/ui/sheet';
+import { Drawer } from '@lody/ui/drawer';
 import {
   createCustomPathLauncherId,
   DEFAULT_PATH_LAUNCHER_PREFERENCE,
@@ -191,70 +177,75 @@ export function PathLaunchersSettings({
             'Pick the app the Open button uses in session headers.'
           )}
         >
-          <Select
+          <Select.Root
             open={selectOpen}
             onOpenChange={setSelectOpen}
             value={selectedLauncherId}
-            onValueChange={handleSelectDefault}
+            onValueChange={(value) => {
+              if (value != null) handleSelectDefault(value);
+            }}
           >
-            <SelectTrigger
+            <Select.Trigger
               aria-label={t('settings.pathLaunchers.default.label', 'Default launcher')}
-              className="w-full sm:w-[220px]"
+              className="sm:w-[220px]"
             >
-              <SelectValue>
+              <Select.Value>
                 <LauncherOptionContent launcher={selectedLauncher} />
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
+              </Select.Value>
+            </Select.Trigger>
+            <Select.Content>
               {pathLauncherOptions.map((launcher) => {
                 const launcherId = getPathLauncherId(launcher);
                 const customLauncherId = launcher.kind === 'custom' ? launcher.id : null;
                 return (
-                  <SelectItem
+                  <Select.Item
                     key={launcherId}
                     value={launcherId}
-                    className={cn(customLauncherId && 'group/path-launcher pr-14')}
+                    className={cn(customLauncherId && 'group/path-launcher')}
+                    endContent={
+                      customLauncherId ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          tabIndex={-1}
+                          size="mini"
+                          icon
+                          className="pointer-events-none shrink-0 opacity-0 group-hover/path-launcher:pointer-events-auto group-hover/path-launcher:opacity-100 group-focus/path-launcher:pointer-events-auto group-focus/path-launcher:opacity-100"
+                          aria-label={t('settings.pathLaunchers.editAction', 'Edit')}
+                          title={t('settings.pathLaunchers.editAction', 'Edit')}
+                          onPointerDown={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                          }}
+                          onPointerUp={(event) => event.stopPropagation()}
+                          onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            handleEditCustomLauncher(customLauncherId);
+                          }}
+                        >
+                          <Pencil className="size-3.5" />
+                        </Button>
+                      ) : null
+                    }
                   >
                     <LauncherOptionContent launcher={launcher} />
-                    {customLauncherId ? (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        tabIndex={-1}
-                        className="pointer-events-none absolute right-7 top-1/2 size-6 -translate-y-1/2 opacity-0 transition-opacity group-hover/path-launcher:pointer-events-auto group-hover/path-launcher:opacity-100 group-focus/path-launcher:pointer-events-auto group-focus/path-launcher:opacity-100"
-                        aria-label={t('settings.pathLaunchers.editAction', 'Edit')}
-                        title={t('settings.pathLaunchers.editAction', 'Edit')}
-                        onPointerDown={(event) => {
-                          event.preventDefault();
-                          event.stopPropagation();
-                        }}
-                        onPointerUp={(event) => event.stopPropagation()}
-                        onClick={(event) => {
-                          event.preventDefault();
-                          event.stopPropagation();
-                          handleEditCustomLauncher(customLauncherId);
-                        }}
-                      >
-                        <Pencil className="size-3.5" />
-                      </Button>
-                    ) : null}
-                  </SelectItem>
+                  </Select.Item>
                 );
               })}
               {isElectron ? (
                 <>
-                  <SelectSeparator />
-                  <SelectItem value={ADD_CUSTOM_LAUNCHER_VALUE}>
+                  <Select.Separator />
+                  <Select.Item value={ADD_CUSTOM_LAUNCHER_VALUE}>
                     <span className="flex items-center gap-2 text-muted-foreground">
                       <Plus className="size-4 shrink-0" />
                       <span>{t('settings.pathLaunchers.addCustom', 'Custom launcher')}</span>
                     </span>
-                  </SelectItem>
+                  </Select.Item>
                 </>
               ) : null}
-            </SelectContent>
-          </Select>
+            </Select.Content>
+          </Select.Root>
         </CompactRow>
       </CompactSection>
 
@@ -308,10 +299,10 @@ function LauncherFormDialog({
     ? command.replaceAll(PATH_LAUNCHER_PATH_PLACEHOLDER, PREVIEW_SAMPLE_PATH)
     : '';
   const showPreview = validation.ok === true && previewCommand.length > 0;
-  const FormHeader = isMobile ? SheetHeader : DialogHeader;
-  const FormTitle = isMobile ? SheetTitle : DialogTitle;
-  const FormDescription = isMobile ? SheetDescription : DialogDescription;
-  const FormFooter = isMobile ? SheetFooter : DialogFooter;
+  const FormHeader = isMobile ? Drawer.Header : DialogHeader;
+  const FormTitle = isMobile ? Drawer.Title : DialogTitle;
+  const FormDescription = isMobile ? Drawer.Description : DialogDescription;
+  const FormFooter = isMobile ? Drawer.Footer : DialogFooter;
 
   const handleOpenChange = (open: boolean) => {
     if (!open) onClose();
@@ -340,7 +331,9 @@ function LauncherFormDialog({
       </FormHeader>
 
       <div className="flex flex-col gap-1.5">
-        <Label htmlFor="path-launcher-name">{t('settings.pathLaunchers.nameLabel', 'Name')}</Label>
+        <UiField.Label htmlFor="path-launcher-name">
+          {t('settings.pathLaunchers.nameLabel', 'Name')}
+        </UiField.Label>
         <Input
           id="path-launcher-name"
           value={draft.label}
@@ -351,9 +344,9 @@ function LauncherFormDialog({
       </div>
 
       <div className="flex flex-col gap-1.5">
-        <Label htmlFor="path-launcher-command">
+        <UiField.Label htmlFor="path-launcher-command">
           {t('settings.pathLaunchers.commandLabel', 'Command')}
-        </Label>
+        </UiField.Label>
         <Input
           id="path-launcher-command"
           className="font-mono text-sm"
@@ -386,8 +379,9 @@ function LauncherFormDialog({
           <Button
             type="button"
             variant="destructive"
-            size="icon"
-            className="size-9 shrink-0"
+            size="large"
+            icon
+            className="shrink-0"
             aria-label={t('common.delete')}
             title={t('common.delete')}
             onClick={onDelete}
@@ -410,14 +404,14 @@ function LauncherFormDialog({
 
   if (isMobile) {
     return (
-      <Sheet open={draft !== null} onOpenChange={handleOpenChange}>
-        <SheetContent
+      <Drawer.Root side="bottom" open={draft !== null} onOpenChange={handleOpenChange}>
+        <Drawer.Content
           side="bottom"
           className="max-h-[calc(100dvh-1rem)] overflow-y-auto rounded-t-2xl pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))]"
         >
           {form}
-        </SheetContent>
-      </Sheet>
+        </Drawer.Content>
+      </Drawer.Root>
     );
   }
 
diff --git a/packages/components/src/components/settings/project-settings.tsx b/packages/components/src/components/settings/project-settings.tsx
index 940bbb138..86bd0f354 100644
--- a/packages/components/src/components/settings/project-settings.tsx
+++ b/packages/components/src/components/settings/project-settings.tsx
@@ -45,19 +45,19 @@ import {
 import { useIsMobile } from '@/hooks/use-mobile';
 import { useLocalProjectsAdmin } from '@/hooks/use-local-projects-admin';
 import { useOnlineMachineIds } from '@/hooks/use-machine-online-status';
-import { Button, type ButtonProps } from '@/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Button, type ButtonProps } from '@lody/ui/button';
+import { Checkbox } from '@lody/ui/checkbox';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { CachedAvatarImg } from '@/components/cached-avatar-img';
 import { getGitHubOwnerAvatarUrl } from '@/lib/github-avatar';
-import { Textarea } from '@/ui/textarea';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/ui/tabs';
+import { Textarea } from '@lody/ui/textarea';
+import { Tabs } from '@lody/ui/tabs';
 import { MachinePills, type MachinePillItem } from './machine-pills';
 import {
   AlertDialog,
@@ -637,9 +637,9 @@ function ProjectSettingsDesktop({
                 <Button
                   type="button"
                   variant="ghost"
-                  size="sm"
                   title={addFolderToMachineTitle}
-                  className="h-6 gap-1 rounded-full border border-border/60 px-2 text-xs font-normal text-muted-foreground hover:text-foreground"
+                  size="small"
+                  shape="pill"
                   onClick={addToSelectedMachine}
                 >
                   <FolderPlus className="h-3.5 w-3.5" />
@@ -674,10 +674,9 @@ function ProjectSettingsDesktop({
                   {addToSelectedMachine ? (
                     <Button
                       type="button"
-                      variant="outline"
-                      size="sm"
+                      variant="secondary"
                       title={addFolderToMachineTitle}
-                      className="h-7 gap-1 px-2 text-xs"
+                      size="small"
                       onClick={addToSelectedMachine}
                     >
                       <FolderPlus className="h-3.5 w-3.5" />
@@ -794,7 +793,8 @@ function ProjectAddMenu({
         <Button
           type="button"
           variant={variant ?? 'ghost'}
-          size={size ?? 'icon'}
+          size={size}
+          icon
           className={className}
           aria-label={t('workspace.projects.addProjectMenu', 'Add project')}
           title={t('workspace.projects.addProjectMenu', 'Add project')}
@@ -906,25 +906,25 @@ function LocalProjectDetail({
           toggle sits at the end of the tab bar; each tab body scrolls on its
           own with scrollbar-pro so long lists never push the layout. */}
       <div className="flex h-full min-h-0 flex-col p-4 pt-3">
-        <Tabs defaultValue="sync" className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <Tabs.Root defaultValue="sync" className="flex min-h-0 min-w-0 flex-1 flex-col">
           <div className="flex items-center justify-between gap-2">
-            <TabsList className="h-8">
-              <TabsTrigger value="sync" className="gap-1.5 px-2.5 text-xs">
+            <Tabs.List>
+              <Tabs.Tab value="sync">
                 <MessagesSquare className="h-3.5 w-3.5" />
                 {t('workspace.projects.historySyncSection', 'Conversation sync')}
-              </TabsTrigger>
-              <TabsTrigger value="worktree" className="gap-1.5 px-2.5 text-xs">
+              </Tabs.Tab>
+              <Tabs.Tab value="worktree">
                 <TerminalSquare className="h-3.5 w-3.5" />
                 {t('workspace.projects.worktreeSetupTab', 'Worktree setup')}
-              </TabsTrigger>
-              <TabsTrigger value="skills" className="gap-1.5 px-2.5 text-xs">
+              </Tabs.Tab>
+              <Tabs.Tab value="skills">
                 <Boxes className="h-3.5 w-3.5" />
                 {t('workspace.projects.skills.tabLabel', 'Skills')}
-              </TabsTrigger>
-            </TabsList>
+              </Tabs.Tab>
+            </Tabs.List>
             <ProjectShareControl row={row} onSharedWithTeamChange={onSharedWithTeamChange} />
           </div>
-          <TabsContent value="sync" className="mt-3 flex min-h-0 flex-1 flex-col">
+          <Tabs.Panel value="sync" className="flex min-h-0 flex-1 flex-col">
             <LocalHistorySection
               row={row}
               onSyncHistory={onSyncHistory}
@@ -932,10 +932,10 @@ function LocalProjectDetail({
               onResolveHistoryConflict={onResolveHistoryConflict}
               onHistorySelectionChange={onHistorySelectionChange}
             />
-          </TabsContent>
-          <TabsContent
+          </Tabs.Panel>
+          <Tabs.Panel
             value="worktree"
-            className="scrollbar-pro mt-3 min-h-0 flex-1 overflow-y-auto pr-1"
+            className="scrollbar-pro min-h-0 flex-1 overflow-y-auto pr-1"
           >
             <div className="flex flex-col gap-5">
               <WorktreeSetupEditor
@@ -957,14 +957,14 @@ function LocalProjectDetail({
                 onSave={(config) => onWorktreeCleanupChange?.(row, config)}
               />
             </div>
-          </TabsContent>
-          <TabsContent
+          </Tabs.Panel>
+          <Tabs.Panel
             value="skills"
-            className="scrollbar-pro mt-3 min-h-0 flex-1 overflow-y-auto pr-1"
+            className="scrollbar-pro min-h-0 flex-1 overflow-y-auto pr-1"
           >
             <ProjectSkillsTab source={skillsSource} />
-          </TabsContent>
-        </Tabs>
+          </Tabs.Panel>
+        </Tabs.Root>
       </div>
     </TooltipProvider>
   );
@@ -1176,25 +1176,25 @@ function GithubProjectDetail({
     : null;
   return (
     <div className="flex h-full min-h-0 flex-col p-4 pt-3">
-      <Tabs defaultValue="worktree" className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <Tabs.Root defaultValue="worktree" className="flex min-h-0 min-w-0 flex-1 flex-col">
         <div className="flex items-center justify-between gap-2">
-          <TabsList className="h-8">
-            <TabsTrigger value="worktree" className="gap-1.5 px-2.5 text-xs">
+          <Tabs.List>
+            <Tabs.Tab value="worktree">
               <TerminalSquare className="h-3.5 w-3.5" />
               {t('workspace.projects.worktreeSetupTab', 'Worktree setup')}
-            </TabsTrigger>
-            <TabsTrigger value="skills" className="gap-1.5 px-2.5 text-xs">
+            </Tabs.Tab>
+            <Tabs.Tab value="skills">
               <Boxes className="h-3.5 w-3.5" />
               {t('workspace.projects.skills.tabLabel', 'Skills')}
-            </TabsTrigger>
-          </TabsList>
+            </Tabs.Tab>
+          </Tabs.List>
           <span className="rounded-sm bg-foreground/[0.06] px-2 py-0.5 text-[11px] text-muted-foreground">
             {row.private ? t('workspace.projects.privateRepo', 'Private') : 'Public'}
           </span>
         </div>
-        <TabsContent
+        <Tabs.Panel
           value="worktree"
-          className="scrollbar-pro mt-3 min-h-0 flex-1 overflow-y-auto pr-1"
+          className="scrollbar-pro min-h-0 flex-1 overflow-y-auto pr-1"
         >
           <div className="flex flex-col gap-5">
             <WorktreeSetupEditor
@@ -1212,14 +1212,14 @@ function GithubProjectDetail({
               onSave={(config) => onWorktreeCleanupChange?.(row, config)}
             />
           </div>
-        </TabsContent>
-        <TabsContent
+        </Tabs.Panel>
+        <Tabs.Panel
           value="skills"
-          className="scrollbar-pro mt-3 min-h-0 flex-1 overflow-y-auto pr-1"
+          className="scrollbar-pro min-h-0 flex-1 overflow-y-auto pr-1"
         >
           <ProjectSkillsTab source={skillsSource} />
-        </TabsContent>
-      </Tabs>
+        </Tabs.Panel>
+      </Tabs.Root>
     </div>
   );
 }
@@ -1438,24 +1438,20 @@ export function WorktreeSetupEditor({
           {renderShellTextarea(shell)}
         </div>
       ) : (
-        <Tabs defaultValue="bash" className="flex flex-col gap-2">
-          <TabsList className="h-8 self-start">
-            <TabsTrigger value="bash" className="gap-1.5 px-2.5 text-xs">
+        <Tabs.Root defaultValue="bash">
+          <Tabs.List className="self-start">
+            <Tabs.Tab value="bash">
               <TerminalSquare className="h-3.5 w-3.5" />
               Bash
-            </TabsTrigger>
-            <TabsTrigger value="powershell" className="gap-1.5 px-2.5 text-xs">
+            </Tabs.Tab>
+            <Tabs.Tab value="powershell">
               <TerminalSquare className="h-3.5 w-3.5" />
               PowerShell
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="bash" className="mt-0">
-            {renderShellTextarea('bash')}
-          </TabsContent>
-          <TabsContent value="powershell" className="mt-0">
-            {renderShellTextarea('powershell')}
-          </TabsContent>
-        </Tabs>
+            </Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel value="bash">{renderShellTextarea('bash')}</Tabs.Panel>
+          <Tabs.Panel value="powershell">{renderShellTextarea('powershell')}</Tabs.Panel>
+        </Tabs.Root>
       )}
 
       {isSaving ? (
@@ -1528,11 +1524,7 @@ export function ProjectHistoryImportPanel({
   const someSelectableSelected = selectableSessions.some((session) =>
     selectedSet.has(session.acpSessionId)
   );
-  const selectAllChecked = allSelectableSelected
-    ? true
-    : someSelectableSelected
-      ? 'indeterminate'
-      : false;
+  const someButNotAllSelected = someSelectableSelected && !allSelectableSelected;
   const lastListedAtDate =
     typeof state.catalog?.lastListedAt === 'number' ? new Date(state.catalog.lastListedAt) : null;
   const statusLabel = lastListedAtDate
@@ -1589,7 +1581,7 @@ export function ProjectHistoryImportPanel({
                     <Button
                       type="button"
                       variant="ghost"
-                      size="sm"
+                      size="small"
                       className={historyActionButtonClass}
                       disabled={state.isSyncing || state.isImporting}
                       onClick={() => {
@@ -1615,7 +1607,7 @@ export function ProjectHistoryImportPanel({
               <Button
                 type="button"
                 variant="ghost"
-                size="sm"
+                size="small"
                 className={historyActionButtonClass}
                 disabled={
                   state.selectedSessionIds.length === 0 || !canManageCatalog || !onImportHistory
@@ -1685,7 +1677,8 @@ export function ProjectHistoryImportPanel({
               }}
             >
               <Checkbox
-                checked={selectAllChecked}
+                checked={allSelectableSelected}
+                indeterminate={someButNotAllSelected}
                 disabled={selectableSessions.length === 0 || !canManageCatalog}
                 onCheckedChange={toggleSelectAll}
                 onClick={(event) => event.stopPropagation()}
@@ -1733,7 +1726,7 @@ export function ProjectHistoryImportPanel({
             {state.canSync ? (
               <Button
                 type="button"
-                size="sm"
+                size="small"
                 className="mt-4"
                 disabled={state.isSyncing || state.isImporting || !onSyncHistory}
                 onClick={() => {
@@ -1829,7 +1822,7 @@ export function ProjectHistoryImportPanel({
                       <Button
                         type="button"
                         variant="ghost"
-                        size="sm"
+                        size="small"
                         className={historyActionButtonClass}
                         disabled={!canResolveConflict}
                         onClick={(event) => {
@@ -1876,10 +1869,7 @@ export function ProjectHistoryImportPanel({
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('common.cancel', 'Cancel')}</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmConflictReplace}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
+            <AlertDialogAction onClick={confirmConflictReplace} variant="destructive">
               {t('workspace.projects.resolveHistoryConflict', 'Re-import')}
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/packages/components/src/components/settings/project-skills-tab.tsx b/packages/components/src/components/settings/project-skills-tab.tsx
index bfca58d15..f4e8a632b 100644
--- a/packages/components/src/components/settings/project-skills-tab.tsx
+++ b/packages/components/src/components/settings/project-skills-tab.tsx
@@ -21,8 +21,8 @@ import {
   type ProjectSkillsSource,
   type ProjectSkillsStatus,
 } from '@/hooks/use-project-skills';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
 import { cn } from '@/lib/utils';
 
 /**
@@ -109,7 +109,13 @@ export function ProjectSkillsView({
           title={t('workspace.projects.skills.errorTitle', "Couldn't load skills")}
           body={error}
           action={
-            <Button type="button" variant="outline" size="sm" className="mt-1" onClick={onRefresh}>
+            <Button
+              type="button"
+              variant="secondary"
+              size="small"
+              className="mt-1"
+              onClick={onRefresh}
+            >
               <RefreshCw className="h-3.5 w-3.5" />
               {t('workspace.projects.skills.retry', 'Retry')}
             </Button>
@@ -170,8 +176,8 @@ export function ProjectSkillsView({
         <Button
           type="button"
           variant="ghost"
-          size="sm"
-          className="h-7 shrink-0 gap-1.5 px-2 text-xs"
+          size="small"
+          className="shrink-0"
           disabled={isRefreshing}
           onClick={onRefresh}
         >
diff --git a/packages/components/src/components/settings/provider-progress-button.tsx b/packages/components/src/components/settings/provider-progress-button.tsx
index a533e4dc6..bf54a0134 100644
--- a/packages/components/src/components/settings/provider-progress-button.tsx
+++ b/packages/components/src/components/settings/provider-progress-button.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 
 export function ProviderProgressButton({
@@ -31,16 +31,13 @@ export function ProviderProgressButton({
   return (
     <Button
       type="button"
-      variant="outline"
-      size="sm"
+      variant="secondary"
+      size="small"
       disabled={!onClick}
       aria-label={ariaLabel}
       title={title}
       onClick={onClick}
-      className={cn(
-        'relative min-w-[4.5rem] gap-1 overflow-hidden px-2 disabled:opacity-100',
-        className
-      )}
+      className={cn('relative min-w-[4.5rem] overflow-hidden disabled:opacity-100', className)}
     >
       {boundedPercent !== null ? (
         <span
diff --git a/packages/components/src/components/settings/provider-row.tsx b/packages/components/src/components/settings/provider-row.tsx
index 8c91c3057..c9e9af2cb 100644
--- a/packages/components/src/components/settings/provider-row.tsx
+++ b/packages/components/src/components/settings/provider-row.tsx
@@ -11,8 +11,8 @@ import {
   parseRateLimitEntryKey,
 } from '@lody/shared';
 import { toast } from 'sonner';
-import { Badge } from '@/ui/badge';
-import { Button } from '@/ui/button';
+import { Badge } from '@lody/ui/badge';
+import { Button } from '@lody/ui/button';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -167,7 +167,7 @@ export function ProviderRow({
             <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
               <span className="min-w-0 truncate text-sm font-medium">{config.name}</span>
               {typeBadge ? (
-                <Badge variant="secondary" className="text-[10px] capitalize">
+                <Badge className="capitalize">
                   {typeBadge}
                 </Badge>
               ) : null}
@@ -207,8 +207,8 @@ export function ProviderRow({
           {onRefresh && (
             <Button
               variant="ghost"
-              size="icon"
-              className="h-7 w-7 text-muted-foreground hover:text-foreground"
+              size="small"
+              icon
               disabled={refreshing}
               aria-label={t(
                 'agents.acpCapabilities.refreshModelsAndModes',
@@ -229,9 +229,10 @@ export function ProviderRow({
           {onDelete && (
             <Button
               variant="ghost"
-              size="icon"
-              className="h-7 w-7 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
               aria-label={t('common.delete', 'Delete')}
+              size="small"
+              icon
+              tone="destructive"
               onClick={(event) => {
                 event.stopPropagation();
                 setDeleteOpen(true);
@@ -277,7 +278,7 @@ export function ProviderRow({
                 event.preventDefault();
                 void handleDelete();
               }}
-              className={cn('bg-destructive text-destructive-foreground hover:bg-destructive/90')}
+              variant="destructive"
             >
               {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
               {t('common.delete', 'Delete')}
diff --git a/packages/components/src/components/settings/provider-setup-row.tsx b/packages/components/src/components/settings/provider-setup-row.tsx
index 5d583a68a..ff0e6112e 100644
--- a/packages/components/src/components/settings/provider-setup-row.tsx
+++ b/packages/components/src/components/settings/provider-setup-row.tsx
@@ -10,7 +10,7 @@ import {
 import { Loader2, RotateCcw, Trash2, XCircle } from 'lucide-react';
 
 import { AgentReadinessMark, type AgentReadiness } from '@/components/shared/agent-readiness-mark';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 import { activeWorkspaceRuntimeAtom } from '@/atoms/runtime';
 import { useMachineAcpBinaryProgress } from '@/hooks/use-machine-acp-binary-progress';
@@ -181,9 +181,9 @@ export function ProviderSetupRow({
             ) : setup.status === 'failed' ? (
               <Button
                 type="button"
-                variant="outline"
-                size="sm"
-                className="w-full gap-1 px-0"
+                variant="secondary"
+                size="small"
+                className="w-full"
                 disabled={actionPending !== null}
                 onClick={() => void runAction('retry', onRetry)}
               >
@@ -199,8 +199,10 @@ export function ProviderSetupRow({
           <Button
             type="button"
             variant="ghost"
-            size="icon"
-            className="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive"
+            size="small"
+            icon
+            tone="destructive"
+            className="shrink-0"
             disabled={actionPending !== null}
             aria-label={t('common.delete', 'Delete')}
             onClick={() => void runAction('delete', onDelete)}
diff --git a/packages/components/src/components/settings/review-policy-setting.tsx b/packages/components/src/components/settings/review-policy-setting.tsx
index 50ccb21a9..0a3996ab0 100644
--- a/packages/components/src/components/settings/review-policy-setting.tsx
+++ b/packages/components/src/components/settings/review-policy-setting.tsx
@@ -40,10 +40,11 @@ import {
   DesktopRunConfigMenu,
 } from '@/components/sessions/desktop-run-config-menu';
 import { MobileSettingsRow, MobileSettingsSection } from '@/components/mobile/mobile-settings-row';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Switch } from '@/ui/switch';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Switch } from '@lody/ui/switch';
+import { Table, type TableColumn } from '@lody/ui/table';
+import { Textarea } from '@lody/ui/textarea';
 import { cn } from '@/lib/utils';
 import { CompactRow, CompactSection } from './compact-layout';
 
@@ -75,23 +76,22 @@ type ReviewerMachineConfigTableProps = {
   onOpenAgentSettings: () => void;
 };
 
-type ReviewerMachineRowProps = Omit<
+type ReviewerAgentCellProps = Omit<
   ReviewerMachineConfigTableProps,
-  'machines' | 'reviewerConfigs' | 'loading' | 'standalone'
+  'machines' | 'reviewerConfigs' | 'loading' | 'standalone' | 'onlineMachineIds'
 > & {
   machine: MachineViewMeta;
   reviewerConfig: MachineReviewerConfig | undefined;
 };
 
-function ReviewerMachineRow({
+function ReviewerAgentCell({
   machine,
   agentConfigs,
   reviewerConfig,
-  onlineMachineIds,
   onChange,
   onDelete,
   onOpenAgentSettings,
-}: ReviewerMachineRowProps) {
+}: ReviewerAgentCellProps) {
   const { t } = useTranslation();
   const machineAgentConfigs = useMemo(
     () =>
@@ -127,7 +127,6 @@ function ReviewerMachineRow({
   const selectedModeId = reviewerConfig?.reviewer.modeId ?? safeDefaultModeId;
   const selectedModelId = reviewerConfig?.reviewer.modelId ?? selectorOptions.defaultModelId;
   const configured = isMachineReviewerConfigUsable(reviewerConfig, machine.id, machineAgentConfigs);
-  const online = onlineMachineIds.has(machine.id);
 
   const commitReviewer = useCallback(
     (reviewer: MachineReviewerConfig['reviewer']) => {
@@ -175,146 +174,147 @@ function ReviewerMachineRow({
     : null;
 
   return (
-    <div
-      role="row"
-      className="flex flex-col gap-2 px-3 py-2.5 sm:grid sm:grid-cols-[minmax(150px,0.75fr)_minmax(0,1.75fr)] sm:items-center sm:gap-4"
-    >
-      <div role="cell" className="flex min-w-0 items-center gap-2.5">
-        <Monitor className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
-        <div className="min-w-0">
-          <p className="truncate font-medium leading-tight text-foreground">{machine.name}</p>
-          <p className="truncate text-[11px] leading-tight text-muted-foreground">
-            {online
-              ? t('settings.review.machineOnline', 'Online')
-              : t('settings.review.machineOffline', 'Offline')}
-            {machine.os ? ` · ${machine.os}` : ''}
-          </p>
-        </div>
-      </div>
-
-      <div role="cell" className="min-w-0 sm:pl-4">
-        {machineAgentConfigs.length === 0 ? (
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <span className="text-xs text-muted-foreground">
-              {t('settings.review.noAgentsOnMachine', 'No agents are configured on this machine.')}
-            </span>
-            <div className="flex items-center gap-1">
-              <Button size="sm" variant="outline" onClick={onOpenAgentSettings}>
-                {t('settings.review.configureAgents', 'Configure agents')}
+    <div className="min-w-0">
+      {machineAgentConfigs.length === 0 ? (
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <span className="text-xs text-muted-foreground">
+            {t('settings.review.noAgentsOnMachine', 'No agents are configured on this machine.')}
+          </span>
+          <div className="flex items-center gap-1">
+            <Button variant="secondary" size="small" onClick={onOpenAgentSettings}>
+              {t('settings.review.configureAgents', 'Configure agents')}
+            </Button>
+            {reviewerConfig ? (
+              <Button
+                type="button"
+                variant="ghost"
+                title={t('settings.review.removeConfiguration', 'Remove reviewer configuration')}
+                aria-label={t(
+                  'settings.review.removeConfiguration',
+                  'Remove reviewer configuration'
+                )}
+                size="small"
+                icon
+                onClick={() => onDelete(machine.id)}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
               </Button>
-              {reviewerConfig ? (
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="ghost"
-                  className="h-7 w-7 text-muted-foreground"
-                  title={t('settings.review.removeConfiguration', 'Remove reviewer configuration')}
-                  aria-label={t(
-                    'settings.review.removeConfiguration',
-                    'Remove reviewer configuration'
-                  )}
-                  onClick={() => onDelete(machine.id)}
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </Button>
-              ) : null}
-            </div>
+            ) : null}
           </div>
-        ) : (
-          <div className="flex min-w-0 flex-wrap items-center gap-1.5">
-            <DesktopRunConfigMenu
-              agentSelection={selection}
-              allowedMachineIds={[machine.id]}
-              availableAgentConfigs={machineAgentConfigs}
-              showAgentNameInTrigger
-              emptyAgentLabel={
-                reviewerConfig
-                  ? t('settings.review.agentUnavailable', 'Choose another reviewer')
-                  : t('settings.review.chooseReviewer', 'Choose reviewer')
-              }
-              onAgentConfigChange={handleAgentChange}
-              modelOptions={selectorOptions.modelOptions}
-              selectedModelId={selectedModelId}
-              onModelChange={
-                reviewerConfig
-                  ? (modelId) => commitReviewer({ ...reviewerConfig.reviewer, modelId })
-                  : undefined
-              }
-              configOptionSelectors={selectorOptions.configOptionSelectors}
-              configOptionValues={reviewerConfig?.reviewer.configOptionValues}
-              onConfigOptionChange={
-                reviewerConfig
-                  ? (configId: string, value: AcpConfigOptionValue) =>
-                      commitReviewer({
-                        ...reviewerConfig.reviewer,
-                        configOptionValues: {
-                          ...reviewerConfig.reviewer.configOptionValues,
-                          [configId]: value,
-                        },
-                      })
-                  : undefined
-              }
-            />
-
-            {selectedAgent ? (
-              <DesktopPermissionModeButton
-                modeOptions={selectorOptions.modeOptions}
-                selectedModeId={selectedModeId}
-                onModeChange={(modeId) => {
-                  if (reviewerConfig) {
-                    commitReviewer({ ...reviewerConfig.reviewer, modeId });
-                  }
-                }}
-                configOptionSelectors={selectorOptions.configOptionSelectors}
-                configOptionValues={reviewerConfig?.reviewer.configOptionValues}
-                onConfigOptionChange={(configId, value) => {
-                  if (reviewerConfig) {
+        </div>
+      ) : (
+        <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+          <DesktopRunConfigMenu
+            agentSelection={selection}
+            allowedMachineIds={[machine.id]}
+            availableAgentConfigs={machineAgentConfigs}
+            showAgentNameInTrigger
+            emptyAgentLabel={
+              reviewerConfig
+                ? t('settings.review.agentUnavailable', 'Choose another reviewer')
+                : t('settings.review.chooseReviewer', 'Choose reviewer')
+            }
+            onAgentConfigChange={handleAgentChange}
+            modelOptions={selectorOptions.modelOptions}
+            selectedModelId={selectedModelId}
+            onModelChange={
+              reviewerConfig
+                ? (modelId) => commitReviewer({ ...reviewerConfig.reviewer, modelId })
+                : undefined
+            }
+            configOptionSelectors={selectorOptions.configOptionSelectors}
+            configOptionValues={reviewerConfig?.reviewer.configOptionValues}
+            onConfigOptionChange={
+              reviewerConfig
+                ? (configId: string, value: AcpConfigOptionValue) =>
                     commitReviewer({
                       ...reviewerConfig.reviewer,
                       configOptionValues: {
                         ...reviewerConfig.reviewer.configOptionValues,
                         [configId]: value,
                       },
-                    });
-                  }
-                }}
-              />
-            ) : null}
+                    })
+                : undefined
+            }
+          />
 
-            <div className="ml-auto flex items-center gap-1">
-              <span
-                className={cn(
-                  'inline-flex items-center gap-1 text-[11px]',
-                  configured ? 'text-muted-foreground' : 'text-status-warning'
+          {selectedAgent ? (
+            <DesktopPermissionModeButton
+              modeOptions={selectorOptions.modeOptions}
+              selectedModeId={selectedModeId}
+              onModeChange={(modeId) => {
+                if (reviewerConfig) {
+                  commitReviewer({ ...reviewerConfig.reviewer, modeId });
+                }
+              }}
+              configOptionSelectors={selectorOptions.configOptionSelectors}
+              configOptionValues={reviewerConfig?.reviewer.configOptionValues}
+              onConfigOptionChange={(configId, value) => {
+                if (reviewerConfig) {
+                  commitReviewer({
+                    ...reviewerConfig.reviewer,
+                    configOptionValues: {
+                      ...reviewerConfig.reviewer.configOptionValues,
+                      [configId]: value,
+                    },
+                  });
+                }
+              }}
+            />
+          ) : null}
+
+          <div className="ml-auto flex items-center gap-1">
+            <span
+              className={cn(
+                'inline-flex items-center gap-1 text-[11px]',
+                configured ? 'text-muted-foreground' : 'text-status-warning'
+              )}
+            >
+              {configured ? <Check className="h-3 w-3" aria-hidden="true" /> : null}
+              {configured
+                ? t('settings.review.configured', 'Configured')
+                : reviewerConfig
+                  ? t('settings.review.agentRemoved', 'Reviewer unavailable')
+                  : t('settings.review.notConfigured', 'Not configured')}
+            </span>
+
+            {reviewerConfig ? (
+              <Button
+                type="button"
+                variant="ghost"
+                title={t('settings.review.removeConfiguration', 'Remove reviewer configuration')}
+                aria-label={t(
+                  'settings.review.removeConfiguration',
+                  'Remove reviewer configuration'
                 )}
+                size="small"
+                icon
+                onClick={() => onDelete(machine.id)}
               >
-                {configured ? <Check className="h-3 w-3" aria-hidden="true" /> : null}
-                {configured
-                  ? t('settings.review.configured', 'Configured')
-                  : reviewerConfig
-                    ? t('settings.review.agentRemoved', 'Reviewer unavailable')
-                    : t('settings.review.notConfigured', 'Not configured')}
-              </span>
-
-              {reviewerConfig ? (
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="ghost"
-                  className="h-7 w-7 text-muted-foreground"
-                  title={t('settings.review.removeConfiguration', 'Remove reviewer configuration')}
-                  aria-label={t(
-                    'settings.review.removeConfiguration',
-                    'Remove reviewer configuration'
-                  )}
-                  onClick={() => onDelete(machine.id)}
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </Button>
-              ) : null}
-            </div>
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            ) : null}
           </div>
-        )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** One machine, and whether it is reachable — the column the records are named by. */
+function ReviewerMachineCell({ machine, online }: { machine: MachineViewMeta; online: boolean }) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex min-w-0 items-center gap-2.5">
+      <Monitor className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+      <div className="min-w-0">
+        <p className="truncate font-medium leading-tight text-foreground">{machine.name}</p>
+        <p className="truncate text-[11px] leading-tight text-muted-foreground">
+          {online
+            ? t('settings.review.machineOnline', 'Online')
+            : t('settings.review.machineOffline', 'Offline')}
+          {machine.os ? ` · ${machine.os}` : ''}
+        </p>
       </div>
     </div>
   );
@@ -334,48 +334,48 @@ export function ReviewerMachineConfigTable({
 }: ReviewerMachineConfigTableProps) {
   const { t } = useTranslation();
 
+  const columns: TableColumn<MachineViewMeta>[] = [
+    {
+      key: 'machine',
+      header: t('settings.review.machineColumn', 'Machine'),
+      width: '32%',
+      wrap: true,
+      cell: (machine) => (
+        <ReviewerMachineCell machine={machine} online={onlineMachineIds.has(machine.id)} />
+      ),
+    },
+    {
+      key: 'reviewer',
+      header: t('settings.review.reviewerColumn', 'Reviewer agent'),
+      wrap: true,
+      cell: (machine) => (
+        <ReviewerAgentCell
+          machine={machine}
+          agentConfigs={agentConfigs}
+          reviewerConfig={reviewerConfigs.get(machine.id)}
+          onChange={onChange}
+          onDelete={onDelete}
+          onOpenAgentSettings={onOpenAgentSettings}
+        />
+      ),
+    },
+  ];
+
   return (
-    <div
-      role="table"
+    <Table
       aria-label={t('settings.review.machineTableLabel', 'Reviewer configuration by machine')}
-      className={cn(
-        'divide-y divide-border/60 overflow-hidden',
-        standalone && 'mx-3 rounded-2xl border border-border/40 bg-card'
+      columns={columns}
+      rows={loading ? [] : machines}
+      rowKey={(machine) => machine.id}
+      containerClassName={cn(
+        standalone && 'mx-3 rounded-2xl border border-border/40 bg-card overflow-hidden'
       )}
-    >
-      <div
-        role="row"
-        className="hidden grid-cols-[minmax(150px,0.75fr)_minmax(0,1.75fr)] gap-4 bg-muted/25 px-3 py-1.5 text-[11px] font-medium text-muted-foreground sm:grid"
-      >
-        <div role="columnheader">{t('settings.review.machineColumn', 'Machine')}</div>
-        <div role="columnheader" className="pl-4">
-          {t('settings.review.reviewerColumn', 'Reviewer agent')}
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="px-3 py-4 text-center text-xs text-muted-foreground">
-          {t('settings.review.loadingMachines', 'Loading reviewer configurations…')}
-        </div>
-      ) : machines.length === 0 ? (
-        <div className="px-3 py-4 text-center text-xs text-muted-foreground">
-          {t('settings.review.noMachines', 'No machines are available in this workspace.')}
-        </div>
-      ) : (
-        machines.map((machine) => (
-          <ReviewerMachineRow
-            key={machine.id}
-            machine={machine}
-            agentConfigs={agentConfigs}
-            reviewerConfig={reviewerConfigs.get(machine.id)}
-            onlineMachineIds={onlineMachineIds}
-            onChange={onChange}
-            onDelete={onDelete}
-            onOpenAgentSettings={onOpenAgentSettings}
-          />
-        ))
-      )}
-    </div>
+      empty={
+        loading
+          ? t('settings.review.loadingMachines', 'Loading reviewer configurations…')
+          : t('settings.review.noMachines', 'No machines are available in this workspace.')
+      }
+    />
   );
 }
 
diff --git a/packages/components/src/components/settings/settings-account-entry.tsx b/packages/components/src/components/settings/settings-account-entry.tsx
index 7d37995b5..5234e538b 100644
--- a/packages/components/src/components/settings/settings-account-entry.tsx
+++ b/packages/components/src/components/settings/settings-account-entry.tsx
@@ -38,13 +38,7 @@ export function SettingsAccountEntry({
         !mobile && active && 'bg-secondary text-secondary-foreground'
       )}
     >
-      <UserAvatar
-        user={user}
-        className={cn(
-          'shrink-0 text-xs',
-          mobile ? 'h-9 w-9' : 'h-6 w-6 text-[10px]'
-        )}
-      />
+      <UserAvatar user={user} size={mobile ? 'large' : 'medium'} className="shrink-0" />
       <span className="min-w-0 flex-1">
         <span className="block truncate text-sm font-medium text-foreground">
           {user.name || user.email || t('settings.tabs.account')}
diff --git a/packages/components/src/components/settings/settings-category-list.tsx b/packages/components/src/components/settings/settings-category-list.tsx
index 90d266394..e303c22ed 100644
--- a/packages/components/src/components/settings/settings-category-list.tsx
+++ b/packages/components/src/components/settings/settings-category-list.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Bug, ChevronRight } from 'lucide-react';
-import { Card, CardContent } from '@/ui/card';
+import { Card } from '@lody/ui/card';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useNavigate } from '@tanstack/react-router';
 import { bugReportDialogOpenAtom, currentWorkspaceSlugAtom, userAtom } from '@/atoms';
@@ -259,20 +259,15 @@ export function SettingsCategoryGrid() {
               onClick={() => openCategory(category)}
               className="block text-left"
             >
-              <Card className="h-full hover:bg-hover transition-colors cursor-pointer">
-                <CardContent className="p-6">
-                  <div className="flex flex-col gap-3">
-                    <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
-                      <category.icon className="h-6 w-6 text-primary" />
-                    </div>
-
-                    <div>
-                      <h3 className="font-semibold text-lg mb-1">{category.label}</h3>
-                      <p className="text-sm text-muted-foreground">{category.description}</p>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
+              <Card.Root interactive className="h-full">
+                <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <category.icon className="h-6 w-6 text-primary" />
+                </div>
+                <Card.Header>
+                  <Card.Title>{category.label}</Card.Title>
+                  <Card.Description>{category.description}</Card.Description>
+                </Card.Header>
+              </Card.Root>
             </button>
           ))}
       </div>
diff --git a/packages/components/src/components/settings/settings-header.tsx b/packages/components/src/components/settings/settings-header.tsx
index cc17e7df2..02f7d5d67 100644
--- a/packages/components/src/components/settings/settings-header.tsx
+++ b/packages/components/src/components/settings/settings-header.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { ArrowLeft } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { useRouter } from '@tanstack/react-router';
 import { cn } from '@/lib/utils';
 import { useAtomValue } from 'jotai';
@@ -43,7 +43,7 @@ export function SettingsHeader({ title, onBack, actions, className }: SettingsHe
     >
       <div className="flex h-14 items-center px-4">
         {/* 返回按钮 */}
-        <Button variant="ghost" size="icon" className="mr-2" onClick={handleBack}>
+        <Button variant="ghost" icon className="mr-2" onClick={handleBack}>
           <ArrowLeft className="h-5 w-5" />
         </Button>
 
diff --git a/packages/components/src/components/settings/usage-calendar-visualization.tsx b/packages/components/src/components/settings/usage-calendar-visualization.tsx
index 6bc3ac7b4..ae7c940d3 100644
--- a/packages/components/src/components/settings/usage-calendar-visualization.tsx
+++ b/packages/components/src/components/settings/usage-calendar-visualization.tsx
@@ -27,8 +27,8 @@ import {
 import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import { Avatar, AvatarFallback, AvatarImage } from '@/ui/avatar';
-import { Button } from '@/ui/button';
+import { Avatar } from '@lody/ui/avatar';
+import { Button } from '@lody/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { formatCompactNumber, formatUsdAmount } from '@/lib/format-compact-number';
@@ -1655,10 +1655,11 @@ function UsageDayDetailPanel({
         className="relative rounded-lg bg-muted/40 p-4"
       >
         <Button
-          size="icon"
           variant="ghost"
           aria-label={t('common.close')}
-          className="absolute right-2 top-2 h-6 w-6 text-muted-foreground"
+          size="mini"
+          icon
+          className="absolute right-2 top-2"
           onClick={onClose}
         >
           <X className="h-3.5 w-3.5" />
@@ -1774,12 +1775,10 @@ function UsageDayDetailPanel({
                       label,
                       tokens: row.tokens,
                       icon: (
-                        <Avatar className="size-4 shrink-0">
-                          {user?.image ? <AvatarImage src={user.image} alt="" /> : null}
-                          <AvatarFallback className="bg-foreground/15 text-[8px] font-medium uppercase text-foreground/80">
-                            {label.slice(0, 2)}
-                          </AvatarFallback>
-                        </Avatar>
+                        <Avatar.Root size="mini">
+                          {user?.image ? <Avatar.Image src={user.image} alt="" /> : null}
+                          <Avatar.Fallback>{label.slice(0, 2).toUpperCase()}</Avatar.Fallback>
+                        </Avatar.Root>
                       ),
                     };
                   })}
@@ -2300,11 +2299,11 @@ export function UsageCalendarVisualization({
                 <TooltipTrigger asChild>
                   <PopoverTrigger asChild>
                     <Button
-                      size="icon"
                       variant="ghost"
                       aria-label={t('workspace.usage.skyline.shareCard')}
+                      icon
                     >
-                      <Share2 />
+                      <Share2 className="size-4" />
                     </Button>
                   </PopoverTrigger>
                 </TooltipTrigger>
@@ -2340,8 +2339,8 @@ export function UsageCalendarVisualization({
                   </div>
                   <div className="mt-3 flex justify-end">
                     <Button
-                      size="sm"
-                      variant="outline"
+                      variant="secondary"
+                      size="small"
                       disabled={isSharePreviewLoading}
                       onClick={() => void shareCard()}
                     >
@@ -2488,21 +2487,21 @@ export function UsageCalendarVisualization({
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
-                      size="icon"
                       variant="ghost"
+                      icon
                       onClick={() => void copyAscii()}
                       aria-label={t('workspace.usage.skyline.copyAscii')}
                     >
-                      <Copy />
+                      <Copy className="size-4" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>{t('workspace.usage.skyline.copyAscii')}</TooltipContent>
                 </Tooltip>
-                <Button size="sm" variant="outline" onClick={exportAscii}>
+                <Button variant="secondary" size="small" onClick={exportAscii}>
                   <Download className="h-4 w-4" />
                   {t('workspace.usage.skyline.downloadAscii')}
                 </Button>
-                <Button size="sm" onClick={exportStl}>
+                <Button size="small" onClick={exportStl}>
                   <Box className="h-4 w-4" />
                   {t('workspace.usage.skyline.downloadBinaryStl')}
                 </Button>
diff --git a/packages/components/src/components/settings/workspace-join-requests-settings.tsx b/packages/components/src/components/settings/workspace-join-requests-settings.tsx
index f2c537af7..2f08b54cc 100644
--- a/packages/components/src/components/settings/workspace-join-requests-settings.tsx
+++ b/packages/components/src/components/settings/workspace-join-requests-settings.tsx
@@ -1,12 +1,12 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Check, Copy, Link2, Loader2, RotateCw, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { useCloudMutation, useCloudQuery } from '@lody/platform/react';
 import { cloudOperations } from '@/lib/cloud-api-operations';
 import { getAppShareUrl } from '@/lib/app-location';
-import { Button } from '@/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
+import { Button } from '@lody/ui/button';
+import { Select } from '@lody/ui/select';
 
 export function WorkspaceJoinRequestsSettings({ workspaceId }: { workspaceId: string }) {
   const { t } = useTranslation();
@@ -18,6 +18,16 @@ export function WorkspaceJoinRequestsSettings({ workspaceId }: { workspaceId: st
   const reviewRequest = useCloudMutation(cloudOperations.workspaceJoinRequests.reviewRequest);
   const [busyAction, setBusyAction] = useState<string | null>(null);
   const [expiresInDays, setExpiresInDays] = useState('30');
+  // `Select.Value` reads the label of the current value from `items`, not from
+  // the rows, so the list is stated once and drives both.
+  const expirationOptions = useMemo(
+    () =>
+      [7, 30, 90].map((days) => ({
+        value: String(days),
+        label: t('joinRequest.admin.days', '{{count}} days', { count: days }),
+      })),
+    [t]
+  );
   const activeLink = state?.activeLink ?? null;
   const joinUrl = activeLink ? getAppShareUrl(`/join/${activeLink.token}`) : null;
   const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
@@ -50,24 +60,31 @@ export function WorkspaceJoinRequestsSettings({ workspaceId }: { workspaceId: st
           </p>
         </div>
         <div className="flex shrink-0 items-center gap-2">
-          <Select value={expiresInDays} onValueChange={setExpiresInDays}>
-            <SelectTrigger
-              className="h-8 w-[5.5rem] text-xs"
+          <Select.Root
+            items={expirationOptions}
+            value={expiresInDays}
+            onValueChange={(value) => {
+              if (value != null) setExpiresInDays(value);
+            }}
+          >
+            <Select.Trigger
+              size="small"
+              className="w-[5.5rem]"
               aria-label={t('joinRequest.admin.expiration', 'Link expiration')}
             >
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {[7, 30, 90].map((days) => (
-                <SelectItem key={days} value={String(days)}>
-                  {t('joinRequest.admin.days', '{{count}} days', { count: days })}
-                </SelectItem>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              {expirationOptions.map((option) => (
+                <Select.Item key={option.value} value={option.value}>
+                  {option.label}
+                </Select.Item>
               ))}
-            </SelectContent>
-          </Select>
+            </Select.Content>
+          </Select.Root>
           <Button
-            size="sm"
-            variant={activeLink ? 'ghost' : 'default'}
+            variant={activeLink ? 'ghost' : 'primary'}
+            size="small"
             disabled={busyAction !== null}
             onClick={() =>
               void run('rotate', () =>
@@ -100,10 +117,10 @@ export function WorkspaceJoinRequestsSettings({ workspaceId }: { workspaceId: st
             })}
           </span>
           <Button
-            size="icon"
             variant="ghost"
-            className="h-7 w-7"
             aria-label={t('joinRequest.admin.copy', 'Copy link')}
+            size="small"
+            icon
             onClick={() => {
               void navigator.clipboard
                 .writeText(joinUrl)
@@ -113,9 +130,9 @@ export function WorkspaceJoinRequestsSettings({ workspaceId }: { workspaceId: st
             <Copy className="h-3.5 w-3.5" />
           </Button>
           <Button
-            size="sm"
             variant="ghost"
-            className="h-7 text-xs text-destructive hover:text-destructive"
+            size="small"
+            tone="destructive"
             disabled={busyAction !== null}
             onClick={() =>
               void run('revoke', () => revokeLink({ workspaceId, linkId: activeLink.id }))
@@ -154,10 +171,10 @@ export function WorkspaceJoinRequestsSettings({ workspaceId }: { workspaceId: st
                 </div>
                 <div className="flex shrink-0 gap-1">
                   <Button
-                    size="icon"
                     variant="ghost"
-                    className="h-8 w-8 text-destructive hover:text-destructive"
                     aria-label={t('joinRequest.admin.reject', 'Reject')}
+                    icon
+                    tone="destructive"
                     disabled={busyAction !== null}
                     onClick={() =>
                       void run(`reject:${request.id}`, () =>
@@ -172,9 +189,8 @@ export function WorkspaceJoinRequestsSettings({ workspaceId }: { workspaceId: st
                     )}
                   </Button>
                   <Button
-                    size="icon"
-                    className="h-8 w-8"
                     aria-label={t('joinRequest.admin.approve', 'Approve')}
+                    icon
                     disabled={busyAction !== null}
                     onClick={() =>
                       void run(`approve:${request.id}`, () =>
diff --git a/packages/components/src/components/settings/workspace-machine-accordion.tsx b/packages/components/src/components/settings/workspace-machine-accordion.tsx
index 226afbe8b..abb51f93a 100644
--- a/packages/components/src/components/settings/workspace-machine-accordion.tsx
+++ b/packages/components/src/components/settings/workspace-machine-accordion.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { MachineViewMeta } from '@lody/shared';
 import { Bot, ChevronDown, Folder, Laptop, LockKeyhole } from 'lucide-react';
-import { Badge } from '@/ui/badge';
+import { Badge } from '@lody/ui/badge';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { UserAvatar } from '@/components/user-avatar';
 import { cn } from '@/lib/utils';
@@ -38,23 +38,17 @@ export function WorkspaceMachineAccordionSummary({
       )}
     >
       {isLocal ? (
-        <Badge variant="secondary" className="px-1.5 py-0 text-[10px]">
-          {t('workspace.machines.thisDevice', 'This device')}
-        </Badge>
+        <Badge>{t('workspace.machines.thisDevice', 'This device')}</Badge>
       ) : null}
       {isPrivate ? (
-        <Badge variant="secondary" className="gap-1 px-1.5 py-0 text-[10px]">
-          <LockKeyhole className="h-2.5 w-2.5" aria-hidden />
+        <Badge icon={<LockKeyhole className="h-3 w-3" aria-hidden />}>
           {t('workspace.machines.private', 'Private')}
         </Badge>
       ) : null}
-      <Badge variant="secondary" className="gap-1 px-1.5 py-0 text-[10px]">
-        <Laptop className="h-2.5 w-2.5" aria-hidden />
-        <span className="max-w-24 truncate">{machine.os || '-'}</span>
-      </Badge>
-      <Badge variant="secondary" className="px-1.5 py-0 font-mono text-[10px]">
-        {machine.cliVersion ? `v${machine.cliVersion}` : t('machines.never', 'Never')}
+      <Badge icon={<Laptop className="h-3 w-3" aria-hidden />} className="max-w-32">
+        {machine.os || '-'}
       </Badge>
+      <Badge>{machine.cliVersion ? `v${machine.cliVersion}` : t('machines.never', 'Never')}</Badge>
       <span className="inline-flex shrink-0 items-center gap-1 px-1">
         <Folder className="h-3 w-3" aria-hidden />
         {t('settings.machines.directoryCountSummary', {
@@ -85,11 +79,7 @@ export function WorkspaceMachineOwnerAvatar({ owner }: { owner: MachineTabOwner
           className="inline-flex shrink-0 cursor-default rounded-full"
           aria-label={t('workspace.machines.ownerTooltip', { owner: owner.name })}
         >
-          <UserAvatar
-            user={owner}
-            className="h-5 w-5 text-[9px]"
-            fallbackClassName="bg-muted text-muted-foreground"
-          />
+          <UserAvatar user={owner} size="small" />
         </span>
       </TooltipTrigger>
       <TooltipContent>{t('workspace.machines.ownerTooltip', { owner: owner.name })}</TooltipContent>
diff --git a/packages/components/src/components/settings/workspace-ownership-transfer.tsx b/packages/components/src/components/settings/workspace-ownership-transfer.tsx
index d5cedb5ce..581e7c391 100644
--- a/packages/components/src/components/settings/workspace-ownership-transfer.tsx
+++ b/packages/components/src/components/settings/workspace-ownership-transfer.tsx
@@ -1,9 +1,9 @@
-import { useId, useRef, useState } from 'react';
+import { useId, useMemo, useRef, useState } from 'react';
 import { ConvexError } from 'convex/values';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Label } from '@/ui/label';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Field as UiField } from '@lody/ui/field';
 import {
   Dialog,
   DialogContent,
@@ -12,7 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/ui/dialog';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
+import { Select } from '@lody/ui/select';
 import type { AccountMember } from './account-setting-pure';
 
 const errorKeys: Record<string, string> = {
@@ -49,6 +49,18 @@ export function WorkspaceOwnershipTransfer({
       member.userId !== currentUserId && ['member', 'admin'].includes(member.role) && member.user
   );
   const target = candidates.find((member) => member.id === targetId);
+  // `Select.Value` reads the label of the current value from `items`, not from
+  // the rows, so the list is stated once and drives both.
+  const memberOptions = useMemo(
+    () =>
+      candidates.map((member) => ({
+        value: member.id,
+        label:
+          `${member.user?.name || member.user?.email}` +
+          (member.user?.name && member.user?.email ? ` (${member.user.email})` : ''),
+      })),
+    [candidates]
+  );
   const canConfirm = Boolean(target) && confirmation === workspaceName && !busy;
   const changeOpen = (value: boolean) => {
     if (inFlight.current) return;
@@ -89,8 +101,8 @@ export function WorkspaceOwnershipTransfer({
         </p>
       </div>
       <Button
-        variant="outline"
-        size="sm"
+        variant="secondary"
+        size="small"
         disabled={!candidates.length}
         onClick={() => changeOpen(true)}
       >
@@ -104,32 +116,35 @@ export function WorkspaceOwnershipTransfer({
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label htmlFor={`${id}-member`}>{t('workspace.transfer.newOwner')}</Label>
-              <Select
+              <UiField.Label htmlFor={`${id}-member`}>
+                {t('workspace.transfer.newOwner')}
+              </UiField.Label>
+              <Select.Root
+                items={memberOptions}
                 value={targetId}
                 onValueChange={(value) => {
+                  if (value == null) return;
                   setTargetId(value);
                   setError(null);
                 }}
                 disabled={busy}
               >
-                <SelectTrigger id={`${id}-member`}>
-                  <SelectValue placeholder={t('workspace.transfer.selectMember')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {candidates.map((member) => (
-                    <SelectItem key={member.id} value={member.id}>
-                      {member.user?.name || member.user?.email}
-                      {member.user?.name && member.user?.email ? ` (${member.user.email})` : ''}
-                    </SelectItem>
+                <Select.Trigger id={`${id}-member`}>
+                  <Select.Value placeholder={t('workspace.transfer.selectMember')} />
+                </Select.Trigger>
+                <Select.Content>
+                  {memberOptions.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
                   ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </div>
             <div className="space-y-2">
-              <Label htmlFor={`${id}-confirm`}>
+              <UiField.Label htmlFor={`${id}-confirm`}>
                 {t('workspace.transfer.confirmLabel', { workspace: workspaceName })}
-              </Label>
+              </UiField.Label>
               <Input
                 id={`${id}-confirm`}
                 value={confirmation}
@@ -145,7 +160,7 @@ export function WorkspaceOwnershipTransfer({
             ) : null}
           </div>
           <DialogFooter className="gap-2">
-            <Button variant="outline" disabled={busy} onClick={() => changeOpen(false)}>
+            <Button variant="secondary" disabled={busy} onClick={() => changeOpen(false)}>
               {t('common.cancel')}
             </Button>
             <Button variant="destructive" disabled={!canConfirm} onClick={() => void submit()}>
diff --git a/packages/components/src/components/shared/acp-session-select.tsx b/packages/components/src/components/shared/acp-session-select.tsx
index 04ff24594..00cef3c77 100644
--- a/packages/components/src/components/shared/acp-session-select.tsx
+++ b/packages/components/src/components/shared/acp-session-select.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { Check, ChevronDown } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui';
 import {
   DropdownMenu,
@@ -73,14 +73,11 @@ export function AcpSessionSelect({
     <Button
       type="button"
       variant="ghost"
-      size={iconOnly ? 'icon' : 'sm'}
+      size="mini"
+      icon={iconOnly}
       className={cn(
-        'min-w-0 select-none gap-1 text-foreground/70 hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0',
+        'min-w-0 select-none focus-visible:ring-0 focus-visible:ring-offset-0',
         variant === 'compact' && compactClassName(isDark, iconOnly),
-        variant !== 'compact' && iconOnly && 'h-6 w-6 rounded-[4px]',
-        variant !== 'compact' && !iconOnly && 'h-8 px-2',
-        variant === 'default' && !iconOnly && 'rounded-full hover:bg-foreground/10',
-        variant === 'text' && !iconOnly && 'rounded-md bg-transparent px-1 hover:bg-transparent',
         className
       )}
       aria-label={ariaLabel}
diff --git a/packages/components/src/components/shared/github-repos-selector.tsx b/packages/components/src/components/shared/github-repos-selector.tsx
index 500058b14..70fe60bfe 100644
--- a/packages/components/src/components/shared/github-repos-selector.tsx
+++ b/packages/components/src/components/shared/github-repos-selector.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ArrowUpRight, Github } from 'lucide-react';
-import { Badge } from '@/ui/badge';
+import { Badge } from '@lody/ui/badge';
 import { cn } from '@/lib/utils';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
@@ -178,10 +178,7 @@ export function GitHubRepoBadge({ repo, className }: { repo?: string; className?
 
   return (
     <div className={cn('flex flex-wrap gap-1', className)}>
-      <Badge variant="secondary" className="gap-1 text-xs">
-        <Github className="h-3 w-3" />
-        {repo}
-      </Badge>
+      <Badge icon={<Github className="h-3 w-3" />}>{repo}</Badge>
     </div>
   );
 }
diff --git a/packages/components/src/components/shared/option-selector.tsx b/packages/components/src/components/shared/option-selector.tsx
index 1f6b802db..66dde35f5 100644
--- a/packages/components/src/components/shared/option-selector.tsx
+++ b/packages/components/src/components/shared/option-selector.tsx
@@ -10,7 +10,7 @@ import {
 import type { LucideIcon } from 'lucide-react';
 import { ChevronDown, Check } from 'lucide-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';
 import {
   Command,
@@ -311,7 +311,7 @@ export function OptionSelector<TValue extends string | number = string>({
           type="button"
           variant="ghost"
           className={cn(
-            'w-auto select-none justify-between gap-2 rounded-1 border border-transparent px-3 font-medium text-foreground hover:foreground/70',
+            'w-auto select-none justify-between rounded-1 hover:foreground/70',
             sizeClassMap[size],
             disabled && 'opacity-50 pointer-events-none',
             className
diff --git a/packages/components/src/components/shared/session-relation-card.tsx b/packages/components/src/components/shared/session-relation-card.tsx
index cb911f759..e68273c79 100644
--- a/packages/components/src/components/shared/session-relation-card.tsx
+++ b/packages/components/src/components/shared/session-relation-card.tsx
@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from 'react';
 import { ArrowUpRight, GitBranchPlus } from 'lucide-react';
 
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 
 export function SessionRelationCard({
@@ -45,9 +45,9 @@ export function SessionRelationCard({
       {status}
       <Button
         type="button"
-        variant="outline"
-        size="sm"
-        className="h-7 shrink-0 self-end gap-1.5 px-2.5 text-xs sm:self-auto"
+        variant="secondary"
+        size="small"
+        className="shrink-0 self-end sm:self-auto"
         disabled={!onAction}
         onClick={onAction}
       >
diff --git a/packages/components/src/components/shared/workdir-mode-selector.tsx b/packages/components/src/components/shared/workdir-mode-selector.tsx
index 3c0c02206..1a46555c9 100644
--- a/packages/components/src/components/shared/workdir-mode-selector.tsx
+++ b/packages/components/src/components/shared/workdir-mode-selector.tsx
@@ -2,7 +2,7 @@ import { Check, ChevronDown, Folder, GitBranch } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 
 export type WorkdirMode = 'local' | 'worktree';
 
@@ -54,15 +54,9 @@ export function WorktreeCheckboxPill({
     >
       <Checkbox
         checked={checked}
-        onCheckedChange={(next) => onCheckedChange?.(next === true)}
+        onCheckedChange={(next) => onCheckedChange?.(next)}
         disabled={disabled}
         aria-label={t('chat.workdir.worktreeToggle', 'Use worktree')}
-        className={cn(
-          'size-3 rounded-[3px] border-transparent bg-muted-foreground/15 shadow-none [&_svg]:size-3',
-          'data-[state=checked]:border-transparent data-[state=checked]:bg-muted-foreground/25 data-[state=checked]:text-foreground/80',
-          'dark:bg-muted-foreground/15 dark:data-[state=checked]:bg-muted-foreground/25',
-          'disabled:cursor-not-allowed disabled:opacity-100'
-        )}
       />
       <span>{t('chat.workdir.worktreePill', 'worktree')}</span>
     </label>
@@ -88,7 +82,6 @@ const modeIcon = {
 } as const;
 
 export function WorkdirModeSelector({
-  tone,
   mode,
   onModeChange,
   worktreeAvailable,
@@ -99,7 +92,6 @@ export function WorkdirModeSelector({
   const readOnly = !onModeChange;
   const selectedMode = mode === 'worktree' && worktreeAvailable ? 'worktree' : 'local';
   const SelectedIcon = modeIcon[selectedMode];
-  const isDark = tone === 'dark';
   const options: Array<{
     value: WorkdirMode;
     label: string;
@@ -126,14 +118,13 @@ export function WorkdirModeSelector({
     <Button
       type="button"
       variant="ghost"
-      size="sm"
+      size="small"
       disabled={readOnly}
       aria-label={t('chat.workdir.selectorLabel', 'Working directory mode')}
       className={cn(
-        'h-6 min-w-0 shrink select-none gap-1 rounded-[4px] px-2 text-muted-foreground',
-        'hover:bg-muted/60 hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0',
-        isDark && 'text-foreground/70',
-        readOnly && 'cursor-default opacity-80 hover:bg-transparent hover:text-muted-foreground'
+        'min-w-0 shrink select-none',
+        'focus-visible:ring-0 focus-visible:ring-offset-0',
+        readOnly && 'cursor-default opacity-80'
       )}
     >
       <SelectedIcon className="h-3.5 w-3.5 shrink-0" />
diff --git a/packages/components/src/components/sidebar-filter-popover.tsx b/packages/components/src/components/sidebar-filter-popover.tsx
index 6c786a496..ab4ddf88d 100644
--- a/packages/components/src/components/sidebar-filter-popover.tsx
+++ b/packages/components/src/components/sidebar-filter-popover.tsx
@@ -5,7 +5,7 @@ import type { LucideIcon } from 'lucide-react';
 import { CarbonSettingsAdjust } from '@/components/icons/carbon-settings-adjust';
 import { cn } from '@/lib/utils';
 import { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import type { SidebarOrganizeMode } from '@/atoms/sidebar-state';
 import type { SidebarChatScope } from '@/atoms/sidebar-state';
 
@@ -123,13 +123,14 @@ export function SidebarFilterPopover({
           <Button
             type="button"
             variant="ghost"
-            size="icon"
             aria-label={merged.triggerAriaLabel}
             data-state-open={open || undefined}
+            size="small"
+            icon
             className={cn(
               // Match section-header muted chrome (Pinned / Chats); full
               // contrast on hover/open so the control still feels interactive.
-              'h-7 w-7 rounded-md text-sidebar-foreground-muted',
+              'text-sidebar-foreground-muted',
               'hover:bg-sidebar-hover hover:text-sidebar-hover-foreground',
               'focus-visible:ring-1 focus-visible:ring-sidebar-ring/40',
               'data-[state=open]:bg-sidebar-hover data-[state=open]:text-sidebar-hover-foreground',
diff --git a/packages/components/src/components/sidebar-row-shared.tsx b/packages/components/src/components/sidebar-row-shared.tsx
index 7f60fde7c..770f1b86d 100644
--- a/packages/components/src/components/sidebar-row-shared.tsx
+++ b/packages/components/src/components/sidebar-row-shared.tsx
@@ -17,7 +17,7 @@ import type { PrStatus, SessionPullRequestCiState } from '@lody/shared';
 import { cn } from '@/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { ContextMenuItem, ContextMenuSeparator } from '@/ui/context-menu';
-import { Skeleton } from '@/ui/skeleton';
+import { Skeleton } from '@lody/ui/skeleton';
 import { PR_STATUS_META } from '@/components/sessions/pull-request-badge';
 import { SidebarConfirmArchiveButton } from '@/components/sidebar-confirm-archive-button';
 import { CachedAvatarImg } from '@/components/cached-avatar-img';
@@ -270,11 +270,7 @@ export function SessionRowAuthorAvatar({
 }) {
   if (!author) return null;
   return (
-    <UserAvatar
-      user={author}
-      className="h-[18px] w-[18px] shrink-0"
-      fallbackClassName="text-[9px] font-medium"
-    />
+    <UserAvatar user={author} size="small" className="shrink-0" />
   );
 }
 
@@ -834,10 +830,10 @@ export function SidebarListSkeleton({
           <div className="relative flex h-7 min-w-0 flex-1 items-center gap-1 rounded-md px-2">
             {showHeaderIcon ? (
               <span className="flex h-5 w-5 shrink-0 items-center">
-                <Skeleton className="h-3.5 w-3.5 rounded-sm" />
+                <Skeleton width={14} height={14} />
               </span>
             ) : null}
-            <Skeleton className="h-3 w-24" />
+            <Skeleton width={96} height={12} />
           </div>
         </div>
         <div className="flex flex-col gap-px">
@@ -846,9 +842,9 @@ export function SidebarListSkeleton({
               key={index}
               className="flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2"
             >
-              <Skeleton className="h-3.5 w-3.5 shrink-0 rounded-full" />
-              <Skeleton className={cn('h-3 min-w-0', width)} />
-              <Skeleton className="ml-auto h-3 w-8 shrink-0" />
+              <Skeleton shape="circle" width={14} height={14} className="shrink-0" />
+              <Skeleton height={12} className={cn('min-w-0', width)} />
+              <Skeleton width={32} height={12} className="ml-auto shrink-0" />
             </div>
           ))}
         </div>
diff --git a/packages/components/src/components/sidebar-update-banner.tsx b/packages/components/src/components/sidebar-update-banner.tsx
index 9e5d9d248..4510770b5 100644
--- a/packages/components/src/components/sidebar-update-banner.tsx
+++ b/packages/components/src/components/sidebar-update-banner.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Loader2 } from 'lucide-react';
-import { Button } from '@/ui/button';
-import { Progress } from '@/ui/progress';
+import { Button } from '@lody/ui/button';
+import { Progress } from '@lody/ui/progress';
 import { cn } from '@/lib/utils';
 import type { UpdateBannerState } from '@/lib/electron-update-banner';
 
@@ -50,7 +50,7 @@ export function SidebarUpdateBanner({
       </div>
       {isDownloading && percent != null ? (
         <div className="mt-2 flex items-center gap-2">
-          <Progress value={percent} className="h-1 flex-1" />
+          <Progress value={percent} className="flex-1" />
           <span className="text-[11px] tabular-nums text-muted-foreground">
             {t('sidebar.updateDownloading.percent', '{{percent}}%', { percent })}
           </span>
@@ -64,11 +64,11 @@ export function SidebarUpdateBanner({
         {t('sidebar.updateReady.changelog', 'View changelog')}
       </button>
       <div className="mt-2 flex items-center justify-end gap-2">
-        <Button type="button" variant="ghost" size="sm" className="h-7 px-2.5" onClick={onLater}>
+        <Button type="button" variant="ghost" size="small" onClick={onLater}>
           {t('sidebar.updateReady.later', 'Later')}
         </Button>
         {isDownloading ? null : (
-          <Button type="button" size="sm" className="h-7 px-2.5" onClick={onRestart}>
+          <Button type="button" size="small" onClick={onRestart}>
             {isRestarting ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
             {t('sidebar.updateReady.restart', 'Update & Restart')}
           </Button>
diff --git a/packages/components/src/components/stuck-connection-banner.tsx b/packages/components/src/components/stuck-connection-banner.tsx
index 8c1062eae..795ef9ee8 100644
--- a/packages/components/src/components/stuck-connection-banner.tsx
+++ b/packages/components/src/components/stuck-connection-banner.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { usePlatform } from '@lody/platform/react';
 import { motion } from 'framer-motion';
 import { Loader2, X } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { useStuckConnectionHint } from '@/hooks/use-stuck-connection';
 import { ClearCacheConfirmDialog, useClearCache } from './settings/clear-cache';
 
@@ -61,8 +61,9 @@ export function StuckConnectionBanner({
           <p className="min-w-0 flex-1 truncate text-sm font-medium">{labels.title}</p>
           <Button
             variant="ghost"
-            size="icon"
-            className="-mr-1 h-6 w-6 shrink-0 text-muted-foreground"
+            size="mini"
+            icon
+            className="-mr-1 shrink-0"
             onClick={onDismiss}
             aria-label={labels.dismissAriaLabel}
           >
@@ -76,11 +77,7 @@ export function StuckConnectionBanner({
           <p className="min-w-0 flex-1 text-xs leading-snug text-muted-foreground">
             {labels.description}
           </p>
-          <Button
-            size="sm"
-            className="h-7 shrink-0 rounded-full px-3 text-xs"
-            onClick={onClearCache}
-          >
+          <Button size="small" shape="pill" className="shrink-0" onClick={onClearCache}>
             {labels.clearCache}
           </Button>
         </div>
diff --git a/packages/components/src/components/tasks/task-agent-run-config-menu.tsx b/packages/components/src/components/tasks/task-agent-run-config-menu.tsx
index 80758eb40..e057bbb4c 100644
--- a/packages/components/src/components/tasks/task-agent-run-config-menu.tsx
+++ b/packages/components/src/components/tasks/task-agent-run-config-menu.tsx
@@ -34,7 +34,7 @@ import { cn } from '@/lib/utils';
 import { useAcpSelectorOptions } from '@/hooks/use-acp-selector-options';
 import { useOnlineMachineIds } from '@/hooks/use-machine-online-status';
 import { useVisibleMachineMetas } from '@/hooks/use-visible-machine-metas';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/packages/components/src/components/tasks/task-attach-session-dialog.tsx b/packages/components/src/components/tasks/task-attach-session-dialog.tsx
index e55a29b85..bf81b641e 100644
--- a/packages/components/src/components/tasks/task-attach-session-dialog.tsx
+++ b/packages/components/src/components/tasks/task-attach-session-dialog.tsx
@@ -2,15 +2,9 @@ import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MessagesSquare, Search } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/ui/dialog';
-import { Input } from '@/ui/input';
+import { Button } from '@lody/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/ui/dialog';
+import { Input } from '@lody/ui/input';
 import { ScrollArea } from '@/ui/scroll-area';
 import { TASKS_SURFACE_CLASS } from './tasks-surface';
 
@@ -135,7 +129,7 @@ export function TaskAttachSessionDialog({
         </ScrollArea>
 
         <div className="flex justify-end">
-          <Button variant="outline" onClick={onClose}>
+          <Button variant="secondary" onClick={onClose}>
             {t('common.cancel', 'Cancel')}
           </Button>
         </div>
diff --git a/packages/components/src/components/tasks/task-body-editor-fallback.tsx b/packages/components/src/components/tasks/task-body-editor-fallback.tsx
index 79d64fea4..20cb1b2ed 100644
--- a/packages/components/src/components/tasks/task-body-editor-fallback.tsx
+++ b/packages/components/src/components/tasks/task-body-editor-fallback.tsx
@@ -2,8 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Eye, Pencil, Quote } from 'lucide-react';
 import { toast } from 'sonner';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 import { MarkdownRenderer } from '@/components/ai-gui/markdown-renderer';
 import type { TaskBodyEditorProps } from './task-body-editor';
 
@@ -185,14 +185,14 @@ export default function TaskBodyEditorFallback({
     <div className="flex flex-col gap-2">
       <div className="flex items-center justify-end gap-1">
         {mode === 'edit' && onQuoteSelection ? (
-          <Button size="sm" variant="ghost" onClick={handleQuote}>
+          <Button variant="ghost" size="small" onClick={handleQuote}>
             <Quote className="h-3.5 w-3.5" />
             {t('tasks.body.quote', 'Quote selection')}
           </Button>
         ) : null}
         <Button
-          size="sm"
           variant="ghost"
+          size="small"
           onClick={() => setMode(mode === 'edit' ? 'preview' : 'edit')}
         >
           {mode === 'edit' ? (
diff --git a/packages/components/src/components/tasks/task-body-editor-surface.tsx b/packages/components/src/components/tasks/task-body-editor-surface.tsx
index c05ab1a04..7a4213799 100644
--- a/packages/components/src/components/tasks/task-body-editor-surface.tsx
+++ b/packages/components/src/components/tasks/task-body-editor-surface.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Quote } from 'lucide-react';
 import { MeowdownEditor, type EditorHandle } from '@meowdown/react';
 import { toast } from 'sonner';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 import { useKeyScope } from '@/lib/commands';
 import { shouldAdoptRemoteBody, type TaskBodyEditorProps } from './task-body-editor';
@@ -406,7 +406,7 @@ export default function TaskBodyEditorSurface({
          menu also exposes Quote when the host provides it. */}
       <div className="absolute right-0 top-0 z-[1] flex items-center gap-0.5">
         {onQuoteSelection && hasSelection ? (
-          <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={handleQuote}>
+          <Button variant="ghost" size="small" onClick={handleQuote}>
             <Quote className="h-3.5 w-3.5" />
             {t('tasks.body.quote', 'Quote selection')}
           </Button>
diff --git a/packages/components/src/components/tasks/task-body-selection-toolbar.tsx b/packages/components/src/components/tasks/task-body-selection-toolbar.tsx
index ae36ad983..5eca11fd7 100644
--- a/packages/components/src/components/tasks/task-body-selection-toolbar.tsx
+++ b/packages/components/src/components/tasks/task-body-selection-toolbar.tsx
@@ -19,7 +19,10 @@ import {
   InlinePopoverPositioner,
   InlinePopoverRoot,
 } from '@prosekit/react/inline-popover';
-import { cn } from '@/lib/utils';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Toggle } from '@lody/ui/toggle';
+import { Toolbar } from '@lody/ui/toolbar';
 
 /**
  * Floating format toolbar over a text selection.
@@ -65,7 +68,15 @@ export type TaskBodySelectionToolbarProps = {
   onQuote?: () => void;
 };
 
-function ToolbarButton({
+/**
+ * A mark that stays on while the selection carries it.
+ *
+ * `Toolbar.Button` is what puts a control into the bar's roving focus, and
+ * `render` is how a control is composed into a Base UI part here — so the whole
+ * bar is one tab stop and the arrow keys walk it, rather than eight stops on
+ * the way past a text selection.
+ */
+function FormatToggle({
   icon: Icon,
   label,
   active = false,
@@ -77,24 +88,56 @@ function ToolbarButton({
   onTrigger: () => void;
 }) {
   return (
-    <button
-      type="button"
-      // The whole reason the toolbar can act on a selection: pointerdown would
-      // otherwise move focus out of the editor and collapse it before click.
-      onPointerDown={(event) => event.preventDefault()}
-      onClick={onTrigger}
-      aria-label={label}
-      aria-pressed={active}
-      title={label}
-      className={cn(
-        'flex h-7 w-7 items-center justify-center rounded transition-colors',
-        active
-          ? 'bg-muted-foreground/20 text-foreground'
-          : 'text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground'
-      )}
+    <Toolbar.Button
+      render={
+        <Toggle
+          size="small"
+          icon
+          pressed={active}
+          onPressedChange={onTrigger}
+          // The whole reason the toolbar can act on a selection: pointerdown
+          // would otherwise move focus out of the editor and collapse it
+          // before click.
+          onPointerDown={(event) => event.preventDefault()}
+          aria-label={label}
+          title={label}
+        />
+      }
     >
-      <Icon className="h-3.5 w-3.5" />
-    </button>
+      <Icon className="size-full" aria-hidden="true" />
+    </Toolbar.Button>
+  );
+}
+
+/**
+ * A command in the same bar: it acts and leaves nothing pressed behind, so it
+ * is a ghost Button rather than a Toggle.
+ */
+function FormatAction({
+  icon: Icon,
+  label,
+  onTrigger,
+}: {
+  icon: LucideIcon;
+  label: string;
+  onTrigger: () => void;
+}) {
+  return (
+    <Toolbar.Button
+      render={
+        <Button
+          variant="ghost"
+          size="small"
+          icon
+          onClick={onTrigger}
+          onPointerDown={(event) => event.preventDefault()}
+          aria-label={label}
+          title={label}
+        />
+      }
+    >
+      <Icon className="size-full" aria-hidden="true" />
+    </Toolbar.Button>
   );
 }
 
@@ -160,19 +203,22 @@ export function TaskBodySelectionToolbar({ onQuote }: TaskBodySelectionToolbarPr
         hoist
       >
         <InlinePopoverPopup>
-          <div
-            role="toolbar"
+          <Toolbar.Root
             aria-label={t('tasks.body.formatToolbar', 'Format selection')}
-            className="flex items-center gap-0.5 rounded-lg border border-border bg-popover p-1 shadow-md"
+            // The bar itself draws nothing, so the surface under it is this
+            // popover's and stays here until the popover is a primitive too.
+            className="rounded-lg border border-border bg-popover p-1 shadow-md"
             onPointerDown={(event) => event.preventDefault()}
           >
             {linkOpen ? (
               // Link is a sub-state of the same popover, not a second surface:
               // it replaces the row in place so the bar does not jump.
-              <div className="flex items-center gap-1 px-1">
-                <LinkIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                <input
+              <Toolbar.Group className="px-1">
+                <LinkIcon className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+                <Input
                   ref={linkInputRef}
+                  size="small"
+                  className="w-56"
                   value={href}
                   onChange={(event) => setHref(event.target.value)}
                   onKeyDown={(event) => {
@@ -185,9 +231,8 @@ export function TaskBodySelectionToolbar({ onQuote }: TaskBodySelectionToolbarPr
                     }
                   }}
                   placeholder={t('tasks.body.linkPlaceholder', 'Paste or type a link')}
-                  className="h-6 w-56 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground"
                 />
-                <ToolbarButton
+                <FormatAction
                   icon={Unlink}
                   label={t('tasks.body.format.removeLink', 'Remove link')}
                   onTrigger={() => {
@@ -195,63 +240,66 @@ export function TaskBodySelectionToolbar({ onQuote }: TaskBodySelectionToolbarPr
                     closeLink();
                   }}
                 />
-              </div>
+              </Toolbar.Group>
             ) : (
               <>
-                <ToolbarButton
-                  icon={Bold}
-                  label={t('tasks.body.format.bold', 'Bold')}
-                  active={isMarkActive('strong')}
-                  onTrigger={() => commands?.toggleStrong?.()}
-                />
-                <ToolbarButton
-                  icon={Italic}
-                  label={t('tasks.body.format.italic', 'Italic')}
-                  active={isMarkActive('em')}
-                  onTrigger={() => commands?.toggleEm?.()}
-                />
-                <ToolbarButton
-                  icon={Strikethrough}
-                  label={t('tasks.body.format.strike', 'Strikethrough')}
-                  active={isMarkActive('del')}
-                  onTrigger={() => commands?.toggleDel?.()}
-                />
-                <ToolbarButton
-                  icon={Code}
-                  label={t('tasks.body.format.code', 'Code')}
-                  active={isMarkActive('code')}
-                  onTrigger={() => commands?.toggleCode?.()}
-                />
-                <ToolbarButton
-                  icon={Highlighter}
-                  label={t('tasks.body.format.highlight', 'Highlight')}
-                  active={isMarkActive('highlight')}
-                  onTrigger={() => commands?.toggleHighlight?.()}
-                />
+                <Toolbar.Group aria-label={t('tasks.body.format.marks', 'Marks')}>
+                  <FormatToggle
+                    icon={Bold}
+                    label={t('tasks.body.format.bold', 'Bold')}
+                    active={isMarkActive('strong')}
+                    onTrigger={() => commands?.toggleStrong?.()}
+                  />
+                  <FormatToggle
+                    icon={Italic}
+                    label={t('tasks.body.format.italic', 'Italic')}
+                    active={isMarkActive('em')}
+                    onTrigger={() => commands?.toggleEm?.()}
+                  />
+                  <FormatToggle
+                    icon={Strikethrough}
+                    label={t('tasks.body.format.strike', 'Strikethrough')}
+                    active={isMarkActive('del')}
+                    onTrigger={() => commands?.toggleDel?.()}
+                  />
+                  <FormatToggle
+                    icon={Code}
+                    label={t('tasks.body.format.code', 'Code')}
+                    active={isMarkActive('code')}
+                    onTrigger={() => commands?.toggleCode?.()}
+                  />
+                  <FormatToggle
+                    icon={Highlighter}
+                    label={t('tasks.body.format.highlight', 'Highlight')}
+                    active={isMarkActive('highlight')}
+                    onTrigger={() => commands?.toggleHighlight?.()}
+                  />
+                </Toolbar.Group>
 
-                <span aria-hidden className="mx-0.5 h-4 w-px bg-border" />
+                <Toolbar.Separator />
 
-                <ToolbarButton
-                  icon={LinkIcon}
-                  label={t('tasks.body.format.link', 'Link')}
-                  onTrigger={() => setLinkOpen(true)}
-                />
-                <ToolbarButton
-                  icon={SquareCheck}
-                  label={t('tasks.body.format.task', 'Turn into task item')}
-                  onTrigger={() => commands?.wrapInSquareTask?.()}
-                />
-
-                <ToolbarButton
-                  icon={RemoveFormatting}
-                  label={t('tasks.body.format.clear', 'Clear formatting')}
-                  onTrigger={() => commands?.setParagraph?.()}
-                />
+                <Toolbar.Group aria-label={t('tasks.body.format.blocks', 'Blocks')}>
+                  <FormatAction
+                    icon={LinkIcon}
+                    label={t('tasks.body.format.link', 'Link')}
+                    onTrigger={() => setLinkOpen(true)}
+                  />
+                  <FormatAction
+                    icon={SquareCheck}
+                    label={t('tasks.body.format.task', 'Turn into task item')}
+                    onTrigger={() => commands?.wrapInSquareTask?.()}
+                  />
+                  <FormatAction
+                    icon={RemoveFormatting}
+                    label={t('tasks.body.format.clear', 'Clear formatting')}
+                    onTrigger={() => commands?.setParagraph?.()}
+                  />
+                </Toolbar.Group>
 
                 {onQuote ? (
                   <>
-                    <span aria-hidden className="mx-0.5 h-4 w-px bg-border" />
-                    <ToolbarButton
+                    <Toolbar.Separator />
+                    <FormatAction
                       icon={Quote}
                       label={t('tasks.body.quote', 'Quote selection')}
                       onTrigger={onQuote}
@@ -260,7 +308,7 @@ export function TaskBodySelectionToolbar({ onQuote }: TaskBodySelectionToolbarPr
                 ) : null}
               </>
             )}
-          </div>
+          </Toolbar.Root>
         </InlinePopoverPopup>
       </InlinePopoverPositioner>
     </InlinePopoverRoot>
diff --git a/packages/components/src/components/tasks/task-detail-actions-menu.tsx b/packages/components/src/components/tasks/task-detail-actions-menu.tsx
index 54c1716ab..50f8dac97 100644
--- a/packages/components/src/components/tasks/task-detail-actions-menu.tsx
+++ b/packages/components/src/components/tasks/task-detail-actions-menu.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Check, Copy, Link2, MoreHorizontal } from 'lucide-react';
 import type { TaskId } from '@lody/shared';
 import { useTaskDoc } from '@/hooks/use-task-doc';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -66,12 +66,7 @@ export function TaskDetailActionsMenu({
       <Tooltip>
         <TooltipTrigger asChild>
           <DropdownMenuTrigger asChild>
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-8 w-8 text-muted-foreground hover:text-foreground"
-              aria-label={t('tasks.actions.more', 'More actions')}
-            >
+            <Button variant="ghost" aria-label={t('tasks.actions.more', 'More actions')} icon>
               <MoreHorizontal className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
diff --git a/packages/components/src/components/tasks/task-detail-view.tsx b/packages/components/src/components/tasks/task-detail-view.tsx
index 331abfd39..1ed168412 100644
--- a/packages/components/src/components/tasks/task-detail-view.tsx
+++ b/packages/components/src/components/tasks/task-detail-view.tsx
@@ -51,7 +51,7 @@ import { useOpenSettings } from '@/hooks/use-open-settings';
 import { cloudOperations } from '@/lib/cloud-api-operations';
 import type { UnifiedLocalProjectOption } from '@/components/chat/unified-project-selector';
 import { getChatLandingProjectRecency } from '@/components/chat/chat-landing-derived';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { ScrollArea } from '@/ui/scroll-area';
 import { TooltipProvider } from '@/ui/tooltip';
 import {
@@ -711,7 +711,7 @@ export function TaskDetailView({ embedded = false }: TaskDetailViewProps) {
   const mobileStatusMenu = (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button size="sm" variant="outline">
+        <Button variant="secondary" size="small">
           <presentation.Icon className={`h-3.5 w-3.5 ${presentation.className}`} />
           {t(presentation.labelKey, presentation.labelFallback)}
         </Button>
@@ -753,9 +753,9 @@ export function TaskDetailView({ embedded = false }: TaskDetailViewProps) {
             leading={
               isMobile ? null : (
                 <Button
-                  size="icon"
                   variant="ghost"
                   aria-label={t('common.back', 'Back')}
+                  icon
                   onClick={() => {
                     if (workspaceSlug) {
                       void router.navigate({
diff --git a/packages/components/src/components/tasks/task-launch-controls.tsx b/packages/components/src/components/tasks/task-launch-controls.tsx
index 9c00491f7..9dadaf4ad 100644
--- a/packages/components/src/components/tasks/task-launch-controls.tsx
+++ b/packages/components/src/components/tasks/task-launch-controls.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { AlertTriangle, Bot, ChevronRight, FolderGit2, Play } from 'lucide-react';
 import type { MachineOnlineStatus } from '@/atoms/presence';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -89,9 +89,7 @@ function SlotChip({
         >
           <Icon className="h-3.5 w-3.5 shrink-0" />
           <span className="truncate">{label}</span>
-          {secondary ? (
-            <span className="truncate text-muted-foreground">· {secondary}</span>
-          ) : null}
+          {secondary ? <span className="truncate text-muted-foreground">· {secondary}</span> : null}
         </button>
       </DropdownMenuTrigger>
       {children}
@@ -129,11 +127,11 @@ export function TaskLaunchControls({
   return (
     <div className="flex flex-wrap items-center gap-2">
       <Button
-        size="sm"
-        variant={hasActiveSession ? 'outline' : 'default'}
+        variant={hasActiveSession ? 'secondary' : 'primary'}
         // Without `canRun` the dispatch would reject on missing fields and the
         // click would look like nothing happened. The hint below says what is
         // missing; the button must not invite a no-op press.
+        size="small"
         disabled={running || !canRun}
         onClick={onRun}
       >
@@ -164,7 +162,10 @@ export function TaskLaunchControls({
                 onClick={() => onSelectAgent(option.agentConfigId)}
               >
                 <span
-                  className={cn('h-1.5 w-1.5 shrink-0 rounded-full', presenceDotClass(option.presence))}
+                  className={cn(
+                    'h-1.5 w-1.5 shrink-0 rounded-full',
+                    presenceDotClass(option.presence)
+                  )}
                 />
                 <span className="truncate">{option.name}</span>
                 <span className="ml-auto truncate text-xs text-muted-foreground">
diff --git a/packages/components/src/components/tasks/task-properties-panel.tsx b/packages/components/src/components/tasks/task-properties-panel.tsx
index fcdce2ea0..34534b3b2 100644
--- a/packages/components/src/components/tasks/task-properties-panel.tsx
+++ b/packages/components/src/components/tasks/task-properties-panel.tsx
@@ -11,7 +11,7 @@ import {
 import type { MachineOnlineStatus } from '@/atoms/presence';
 import type { UnifiedLocalProjectOption } from '@/components/chat/unified-project-selector';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,10 +20,7 @@ import {
 } from '@/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { CachedAvatarImg } from '@/components/cached-avatar-img';
-import {
-  getTaskStatusPresentation,
-  TASK_STATUS_PRESENTATION,
-} from './task-status-presentation';
+import { getTaskStatusPresentation, TASK_STATUS_PRESENTATION } from './task-status-presentation';
 import {
   getTaskPriorityPresentation,
   TASK_PRIORITY_PRESENTATION,
@@ -149,10 +146,7 @@ function PropertyButton({
         <button
           type="button"
           disabled={disabled}
-          className={cn(
-            propertyRowClass,
-            hasValue ? 'text-foreground' : 'text-muted-foreground'
-          )}
+          className={cn(propertyRowClass, hasValue ? 'text-foreground' : 'text-muted-foreground')}
         >
           {leading ?? <Icon className={cn('h-3.5 w-3.5 shrink-0 opacity-70', iconClassName)} />}
           {valueContent != null ? (
@@ -288,10 +282,7 @@ export function TaskPropertiesPanel({
               style={tasksMenuSurfaceStyle}
             >
               {TASK_STATUS_PRESENTATION.map((option) => (
-                <DropdownMenuItem
-                  key={option.status}
-                  onClick={() => onStatusChange(option.status)}
-                >
+                <DropdownMenuItem key={option.status} onClick={() => onStatusChange(option.status)}>
                   <option.Icon className={cn('h-3.5 w-3.5', option.className)} />
                   {t(option.labelKey, option.labelFallback)}
                 </DropdownMenuItem>
@@ -304,11 +295,7 @@ export function TaskPropertiesPanel({
             value={ownerName}
             placeholder={t('tasks.properties.owner', 'Owner')}
             disabled={disabled}
-            leading={
-              owner ? (
-                <TaskOwnerAvatar owner={owner} />
-              ) : undefined
-            }
+            leading={owner ? <TaskOwnerAvatar owner={owner} /> : undefined}
           >
             <DropdownMenuContent
               align="start"
@@ -343,9 +330,7 @@ export function TaskPropertiesPanel({
             icon={priorityPresentation.Icon}
             iconClassName={priorityPresentation.className}
             value={
-              priority
-                ? t(priorityPresentation.labelKey, priorityPresentation.labelFallback)
-                : null
+              priority ? t(priorityPresentation.labelKey, priorityPresentation.labelFallback) : null
             }
             placeholder={t('tasks.properties.priority', 'Priority')}
             disabled={disabled}
@@ -449,11 +434,11 @@ export function TaskPropertiesPanel({
                 <TooltipTrigger asChild>
                   <span>
                     <Button
-                      size="icon"
                       // Only a ready, manual task gets the solid primary: a
                       // green Run that cannot fire reads as broken.
-                      variant={canRun && !hasActiveSession && !delegatedTo ? 'default' : 'ghost'}
-                      className="h-8 w-8 shrink-0"
+                      variant={canRun && !hasActiveSession && !delegatedTo ? 'primary' : 'ghost'}
+                      icon
+                      className="shrink-0"
                       // Delegated tasks are started by the scheduler, so the
                       // button becomes a state readout rather than an action.
                       disabled={disabled || running || !canRun || Boolean(delegatedTo)}
@@ -489,9 +474,9 @@ export function TaskPropertiesPanel({
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      size="icon"
                       variant="ghost"
-                      className="h-8 w-5 shrink-0 px-0 text-muted-foreground"
+                      icon
+                      className="shrink-0"
                       disabled={disabled || (!agent && !delegatedTo)}
                       aria-label={t('tasks.properties.autoRun', 'Execution')}
                     >
diff --git a/packages/components/src/components/tasks/task-proposal-notice.tsx b/packages/components/src/components/tasks/task-proposal-notice.tsx
index 635123775..ba8f8c77d 100644
--- a/packages/components/src/components/tasks/task-proposal-notice.tsx
+++ b/packages/components/src/components/tasks/task-proposal-notice.tsx
@@ -7,7 +7,7 @@ import { ListTodo } from 'lucide-react';
 import type { SessionId, TaskProposalMeta } from '@lody/shared';
 import { currentWorkspaceSlugAtom } from '@/atoms';
 import { useTaskActions } from '@/hooks/use-task-actions';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { MarkdownRenderer } from '@/components/ai-gui/markdown-renderer';
 
 export type TaskProposalNoticeProps = {
@@ -100,7 +100,7 @@ export function TaskProposalNotice({
         <span>{t('tasks.proposal.created', 'Task created')}</span>
         <span className="min-w-0 flex-1 truncate text-foreground">{meta.title}</span>
         {meta.taskId ? (
-          <Button size="sm" variant="ghost" onClick={() => openTask(meta.taskId as string)}>
+          <Button variant="ghost" size="small" onClick={() => openTask(meta.taskId as string)}>
             {t('tasks.proposal.openTask', 'Open task')}
           </Button>
         ) : null}
@@ -136,10 +136,10 @@ export function TaskProposalNotice({
         </div>
       ) : null}
       <div className="flex items-center justify-end gap-2">
-        <Button size="sm" variant="ghost" disabled={busy} onClick={handleDismiss}>
+        <Button variant="ghost" size="small" disabled={busy} onClick={handleDismiss}>
           {t('tasks.proposal.dismiss', 'Ignore')}
         </Button>
-        <Button size="sm" disabled={busy} onClick={handleCreate}>
+        <Button size="small" disabled={busy} onClick={handleCreate}>
           {t('tasks.proposal.create', 'Create task')}
         </Button>
       </div>
diff --git a/packages/components/src/components/tasks/task-quick-add-dialog.tsx b/packages/components/src/components/tasks/task-quick-add-dialog.tsx
index 0ba7b1d5f..dfc444d0d 100644
--- a/packages/components/src/components/tasks/task-quick-add-dialog.tsx
+++ b/packages/components/src/components/tasks/task-quick-add-dialog.tsx
@@ -15,8 +15,8 @@ import {
 import { taskLabelPillStyle } from './task-label-presentation';
 import type { UnifiedLocalProjectOption } from '@/components/chat/unified-project-selector';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Button } from '@lody/ui/button';
+import { Checkbox } from '@lody/ui/checkbox';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ui/dialog';
 import {
   DropdownMenu,
@@ -25,9 +25,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
-import { Input } from '@/ui/input';
-import { Textarea } from '@/ui/textarea';
-import { Kbd } from '@/ui/kbd';
+import { Input } from '@lody/ui/input';
+import { Textarea } from '@lody/ui/textarea';
+import { Kbd } from '@lody/ui/kbd';
 import { getTaskStatusPresentation, TASK_STATUS_PRESENTATION } from './task-status-presentation';
 import { TaskProjectSelector } from './task-project-selector';
 import { projectRefKey } from './task-project-key';
@@ -284,7 +284,9 @@ export function TaskQuickAddDialog({
                 >
                   <presentation.Icon className={cn('h-3.5 w-3.5', presentation.className)} />
                   {t(presentation.labelKey, presentation.labelFallback)}
-                  {presentation.status === status ? <Check className="ml-auto h-3.5 w-3.5" /> : null}
+                  {presentation.status === status ? (
+                    <Check className="ml-auto h-3.5 w-3.5" />
+                  ) : null}
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>
@@ -310,7 +312,10 @@ export function TaskQuickAddDialog({
               style={tasksMenuSurfaceStyle}
             >
               {TASK_PRIORITY_PRESENTATION.map((option) => (
-                <DropdownMenuItem key={option.priority} onSelect={() => setPriority(option.priority)}>
+                <DropdownMenuItem
+                  key={option.priority}
+                  onSelect={() => setPriority(option.priority)}
+                >
                   <option.Icon className={cn('h-3.5 w-3.5', option.className)} />
                   {t(option.labelKey, option.labelFallback)}
                   {option.priority === priority ? <Check className="ml-auto h-3.5 w-3.5" /> : null}
@@ -326,9 +331,7 @@ export function TaskQuickAddDialog({
                 disabled={submitting}
                 icon={<Tag className="h-3.5 w-3.5" />}
               >
-                {labels.length > 0
-                  ? labels.join(', ')
-                  : t('tasks.properties.labels', 'Labels')}
+                {labels.length > 0 ? labels.join(', ') : t('tasks.properties.labels', 'Labels')}
               </ChipButton>
             </DropdownMenuTrigger>
             <DropdownMenuContent
@@ -441,15 +444,15 @@ export function TaskQuickAddDialog({
             <Checkbox
               checked={createMore}
               disabled={submitting}
-              onCheckedChange={(checked) => onCreateMoreChange(checked === true)}
+              onCheckedChange={(checked) => onCreateMoreChange(checked)}
             />
             {t('tasks.quickAdd.createMore', 'Create more')}
           </label>
           <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={onClose} disabled={submitting}>
+            <Button variant="secondary" size="small" onClick={onClose} disabled={submitting}>
               {t('common.cancel', 'Cancel')}
             </Button>
-            <Button size="sm" onClick={handleSubmit} disabled={submitting}>
+            <Button size="small" onClick={handleSubmit} disabled={submitting}>
               {t('tasks.quickAdd.create', 'Create')}
               <Kbd className="ml-1.5 hidden sm:inline-flex">⌘↵</Kbd>
             </Button>
diff --git a/packages/components/src/components/tasks/task-thread.tsx b/packages/components/src/components/tasks/task-thread.tsx
index c05cbe1e9..ee0093229 100644
--- a/packages/components/src/components/tasks/task-thread.tsx
+++ b/packages/components/src/components/tasks/task-thread.tsx
@@ -18,8 +18,8 @@ import {
 } from '@lody/shared';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 import { MarkdownRenderer } from '@/components/ai-gui/markdown-renderer';
 import {
   TASK_SESSION_ACTIVITY_PRESENTATION,
@@ -414,9 +414,10 @@ export function TaskThread({
           ) : null}
           <div className="flex items-center justify-between gap-2 px-2 pb-2">
             <Button
-              size="icon"
               variant="ghost"
-              className="h-7 w-7 shrink-0"
+              size="small"
+              icon
+              className="shrink-0"
               disabled={disabled || uploadingImages || !onImagePaste}
               onClick={() => imageInputRef.current?.click()}
               aria-label={t('tasks.thread.addImage', 'Add image')}
@@ -428,9 +429,10 @@ export function TaskThread({
               )}
             </Button>
             <Button
-              size="icon"
-              variant={draft.trim() ? 'default' : 'ghost'}
-              className="h-7 w-7 shrink-0"
+              variant={draft.trim() ? 'primary' : 'ghost'}
+              size="small"
+              icon
+              className="shrink-0"
               disabled={disabled || uploadingImages || !draft.trim()}
               onClick={handleSubmit}
               aria-label={t('tasks.thread.send', 'Comment')}
diff --git a/packages/components/src/components/tasks/tasks-workspace.tsx b/packages/components/src/components/tasks/tasks-workspace.tsx
index 12edf82fb..188095710 100644
--- a/packages/components/src/components/tasks/tasks-workspace.tsx
+++ b/packages/components/src/components/tasks/tasks-workspace.tsx
@@ -30,7 +30,9 @@ import { useIsMobile } from '@/hooks/use-mobile';
 import { useOrganization } from '@/hooks/useOrganization';
 import { useTaskActions } from '@/hooks/use-task-actions';
 import { useTaskSessionRollups } from '@/hooks/use-task-session-rollup';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
+import { Toggle } from '@lody/ui/toggle';
+import { ToggleGroup } from '@lody/ui/toggle-group';
 import { ScrollArea } from '@/ui/scroll-area';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ui/tooltip';
 import {
@@ -120,15 +122,11 @@ function DesktopTasksWorkspace({ activeTaskId }: { activeTaskId: TaskId | null }
   const layout = useAtomValue(tasksLayoutAtom);
   const [visibleByView, setVisibleByView] = useAtom(taskVisiblePropertiesAtom);
   const visibleProperties = visibleByView[layout] ?? [];
-  const toggleProperty = useCallback(
-    (property: TaskCardProperty) => {
-      setVisibleByView((previous: TaskVisibleProperties) => {
-        const current = previous[layout] ?? [];
-        const next = current.includes(property)
-          ? current.filter((item: TaskCardProperty) => item !== property)
-          : [...current, property];
-        return { ...previous, [layout]: next };
-      });
+  // The set reports every pressed member rather than the one that changed, so
+  // this stores the list it was handed instead of adding and removing from it.
+  const setVisibleProperties = useCallback(
+    (next: TaskCardProperty[]) => {
+      setVisibleByView((previous: TaskVisibleProperties) => ({ ...previous, [layout]: next }));
     },
     [layout, setVisibleByView]
   );
@@ -196,12 +194,7 @@ function DesktopTasksWorkspace({ activeTaskId }: { activeTaskId: TaskId | null }
           <Tooltip>
             <TooltipTrigger asChild>
               <DropdownMenuTrigger asChild>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 text-muted-foreground hover:text-foreground"
-                  aria-label={t('tasks.filter.label', 'Filter')}
-                >
+                <Button variant="ghost" aria-label={t('tasks.filter.label', 'Filter')} icon>
                   <ListFilter className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
@@ -235,30 +228,23 @@ function DesktopTasksWorkspace({ activeTaskId }: { activeTaskId: TaskId | null }
               <p className="mb-1.5 text-[11px] font-medium text-muted-foreground">
                 {t('tasks.show.title', 'Show')}
               </p>
-              <div className="flex flex-wrap gap-1">
-                {TASK_CARD_PROPERTIES.map((property) => {
-                  const active = visibleProperties.includes(property);
-                  return (
-                    <button
-                      key={property}
-                      type="button"
-                      aria-pressed={active}
-                      onClick={() => toggleProperty(property)}
-                      className={cn(
-                        'rounded-md border px-2 py-1 text-[11px] transition-colors',
-                        active
-                          ? 'border-transparent bg-muted-foreground/20 text-foreground'
-                          : 'border-border/70 text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground'
-                      )}
-                    >
-                      {t(
-                        TASK_CARD_PROPERTY_LABELS[property].key,
-                        TASK_CARD_PROPERTY_LABELS[property].fallback
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
+              <ToggleGroup
+                multiple
+                wrap
+                size="mini"
+                aria-label={t('tasks.show.title', 'Show')}
+                value={visibleProperties}
+                onValueChange={setVisibleProperties}
+              >
+                {TASK_CARD_PROPERTIES.map((property) => (
+                  <Toggle key={property} value={property}>
+                    {t(
+                      TASK_CARD_PROPERTY_LABELS[property].key,
+                      TASK_CARD_PROPERTY_LABELS[property].fallback
+                    )}
+                  </Toggle>
+                ))}
+              </ToggleGroup>
             </div>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -516,13 +502,13 @@ export function TasksListBody({
   const mobileActions = (
     <div className="flex items-center gap-1">
       <Button
-        size="sm"
-        variant={needsYouOnly ? 'default' : 'outline'}
+        variant={needsYouOnly ? 'primary' : 'secondary'}
+        size="small"
         onClick={() => setNeedsYouOnly(!needsYouOnly)}
       >
         {t('tasks.needsYou', 'Needs you')}
       </Button>
-      <Button size="sm" onClick={() => handleQuickAdd()}>
+      <Button size="small" onClick={() => handleQuickAdd()}>
         <Plus className="h-4 w-4" />
         {t('tasks.newTask', 'New task')}
       </Button>
diff --git a/packages/components/src/components/update-changelog-dialog.tsx b/packages/components/src/components/update-changelog-dialog.tsx
index f987deaab..0f6d23468 100644
--- a/packages/components/src/components/update-changelog-dialog.tsx
+++ b/packages/components/src/components/update-changelog-dialog.tsx
@@ -80,12 +80,12 @@ export function UpdateChangelogDialog({
         )}
         <DialogFooter>
           {!notes ? (
-            <Button variant="outline" size="sm" onClick={onOpenChangelogSite}>
+            <Button variant="secondary" size="small" onClick={onOpenChangelogSite}>
               <ExternalLink className="mr-1 h-3.5 w-3.5" />
               {t('updates.changelog.openWebsite', 'Open changelog website')}
             </Button>
           ) : null}
-          <Button size="sm" onClick={() => onOpenChange(false)}>
+          <Button size="small" onClick={() => onOpenChange(false)}>
             {t('common.close', 'Close')}
           </Button>
         </DialogFooter>
diff --git a/packages/components/src/components/user-avatar.tsx b/packages/components/src/components/user-avatar.tsx
index 822a9f5d1..2d22c9274 100644
--- a/packages/components/src/components/user-avatar.tsx
+++ b/packages/components/src/components/user-avatar.tsx
@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/ui/avatar';
+import { Avatar, type AvatarSize } from '@lody/ui/avatar';
 import { UserIcon } from 'lucide-react';
 import { useStableAvatarSrc } from '@/hooks/use-stable-avatar-src';
 
@@ -13,13 +13,16 @@ interface UserAvatarProps {
     email?: string | null;
   } | null;
   /**
-   * 头像大小样式类
+   * Which rung of `@lody/ui`'s avatar ladder this face sits on. The rung picks
+   * the letters inside it too, so a surface no longer states a box and a type
+   * size that can disagree.
    */
-  className?: string;
+  size?: AvatarSize;
   /**
-   * Fallback 样式类
+   * Layout only — where the avatar sits in the row around it. The box, the
+   * corner, the fill and the letters all belong to the primitive.
    */
-  fallbackClassName?: string;
+  className?: string;
   /**
    * 是否显示默认图标而不是首字母
    */
@@ -30,12 +33,7 @@ interface UserAvatarProps {
  * 用户头像组件
  * 统一处理用户头像的显示，支持图片和首字母fallback
  */
-export function UserAvatar({
-  user,
-  className,
-  fallbackClassName,
-  showIcon = false,
-}: UserAvatarProps) {
+export function UserAvatar({ user, size = 'medium', className, showIcon = false }: UserAvatarProps) {
   const avatarImage = useStableAvatarSrc(user?.image);
 
   // TODO: 为 Lody CLI 添加一个特殊的 fallback
@@ -53,11 +51,19 @@ export function UserAvatar({
   const initials = getInitials();
 
   return (
-    <Avatar className={className}>
-      <AvatarImage src={avatarImage} alt={user?.name || 'User'} />
-      <AvatarFallback className={fallbackClassName}>
-        {showIcon || !initials ? <UserIcon className="h-4 w-4" /> : initials}
-      </AvatarFallback>
-    </Avatar>
+    <Avatar.Root size={size} className={className}>
+      {avatarImage ? <Avatar.Image src={avatarImage} alt={user?.name || 'User'} /> : null}
+      <Avatar.Fallback>
+        {showIcon || !initials ? (
+          // The glyph box is the primitive's and follows the rung; the icon
+          // states 100% of it, the way every caller's icon does in that package.
+          <Avatar.Glyph>
+            <UserIcon className="size-full" />
+          </Avatar.Glyph>
+        ) : (
+          initials
+        )}
+      </Avatar.Fallback>
+    </Avatar.Root>
   );
 }
diff --git a/packages/components/src/components/workspace-avatar.tsx b/packages/components/src/components/workspace-avatar.tsx
index 8966ffcba..ebb715481 100644
--- a/packages/components/src/components/workspace-avatar.tsx
+++ b/packages/components/src/components/workspace-avatar.tsx
@@ -1,7 +1,6 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/ui/avatar';
+import { Avatar, type AvatarSize } from '@lody/ui/avatar';
 import { Building2 } from 'lucide-react';
 import { useStableAvatarSrc } from '@/hooks/use-stable-avatar-src';
-import { cn } from '@/lib/utils';
 
 interface WorkspaceAvatarProps {
   workspace?: {
@@ -9,8 +8,10 @@ interface WorkspaceAvatarProps {
     /** BetterAuth stores the workspace avatar in `organization.logo`. */
     logo?: string | null;
   } | null;
+  /** Which rung of `@lody/ui`'s avatar ladder the tile sits on. */
+  size?: AvatarSize;
+  /** Layout only; the tile itself belongs to the primitive. */
   className?: string;
-  fallbackClassName?: string;
 }
 
 /* Deterministic 0–359 hue from a string — same recipe as
@@ -35,35 +36,37 @@ function firstGraphemeUpper(name: string): string | null {
  * Workspace (organization) avatar. Shares the stable blob-cache strategy with
  * {@link UserAvatar} via `useStableAvatarSrc`.
  *
- * Default (no logo): first letter / character of the workspace name on a
- * hashed solid color — matches the mobile home header fallback.
+ * It is a **tile** rather than a circle, which is the shape `@lody/ui` gives a
+ * thing as opposed to a person: a circle around a logo is a crop, and the mark
+ * inside one was drawn square. The corner follows the rung.
+ *
+ * Default (no logo): first letter / character of the workspace name on a hashed
+ * hue. Which hue belongs to which name is a product fact rather than a token,
+ * so it is passed as a style; the gray the primitive would otherwise draw is
+ * what a workspace with no name falls back to.
  */
-export function WorkspaceAvatar({
-  workspace,
-  className,
-  fallbackClassName,
-}: WorkspaceAvatarProps) {
+export function WorkspaceAvatar({ workspace, size = 'medium', className }: WorkspaceAvatarProps) {
   const avatarImage = useStableAvatarSrc(workspace?.logo);
   const name = workspace?.name ?? '';
   const initial = firstGraphemeUpper(name);
   const hue = stringToHue(name || 'workspace');
 
   return (
-    <Avatar className={className}>
-      <AvatarImage src={avatarImage} alt={workspace?.name || 'Workspace'} />
-      <AvatarFallback
-        className={cn(
-          fallbackClassName,
-          initial ? 'font-semibold text-white' : 'bg-muted text-muted-foreground'
-        )}
+    <Avatar.Root size={size} shape="tile" className={className}>
+      {avatarImage ? <Avatar.Image src={avatarImage} alt={workspace?.name || 'Workspace'} /> : null}
+      <Avatar.Fallback
         style={
           initial
-            ? { backgroundColor: `hsl(${hue} 62% 52%)` }
+            ? { backgroundColor: `hsl(${hue} 62% 52%)`, color: 'hsl(0 0% 100%)', fontWeight: 600 }
             : undefined
         }
       >
-        {initial ?? <Building2 className="h-4 w-4" />}
-      </AvatarFallback>
-    </Avatar>
+        {initial ?? (
+          <Avatar.Glyph>
+            <Building2 className="size-full" />
+          </Avatar.Glyph>
+        )}
+      </Avatar.Fallback>
+    </Avatar.Root>
   );
 }
diff --git a/packages/components/src/i18n/index.tsx b/packages/components/src/i18n/index.tsx
index c54bf4128..7f207bed9 100644
--- a/packages/components/src/i18n/index.tsx
+++ b/packages/components/src/i18n/index.tsx
@@ -1,7 +1,7 @@
 import i18next from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import React, { useEffect } from 'react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
+import { Select } from '@lody/ui/select';
 import { useTranslation } from 'react-i18next';
 import { useAtom } from 'jotai';
 import { languageAtom } from '../atoms/settings';
@@ -156,14 +156,23 @@ export const languageCodeToName = Object.fromEntries(
 
 void initI18n(readStoredLanguagePreference() ?? detectBrowserLanguage() ?? fallbackLanguage);
 
+// `Select.Value` reads the label of the current value from `items`, not from the
+// rows, so the list is stated once and drives both.
+const languageOptions = currentSupportedLanguages.map((lang) => ({
+  value: lang,
+  label: languageCodeToName[lang],
+}));
+
 export const LanguageSelector = ({ triggerClassName }: { triggerClassName?: string }) => {
   const { i18n } = useTranslation();
   const [language, setLanguage] = useAtom(languageAtom);
   return (
-    <Select
+    <Select.Root
+      items={languageOptions}
       defaultValue={language}
       value={language}
-      onValueChange={(value: SupportedLanguage) => {
+      onValueChange={(value) => {
+        if (value == null) return;
         setLanguage(value);
         void i18n.changeLanguage(value);
         if (typeof window === 'undefined' || window.__LODY_ELECTRON__ === true) {
@@ -176,17 +185,17 @@ export const LanguageSelector = ({ triggerClassName }: { triggerClassName?: stri
         });
       }}
     >
-      <SelectTrigger className={triggerClassName}>
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent>
-        {currentSupportedLanguages.map((lang) => (
-          <SelectItem key={lang} value={lang}>
-            {languageCodeToName[lang]}
-          </SelectItem>
+      <Select.Trigger className={triggerClassName}>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
+        {languageOptions.map((option) => (
+          <Select.Item key={option.value} value={option.value}>
+            {option.label}
+          </Select.Item>
         ))}
-      </SelectContent>
-    </Select>
+      </Select.Content>
+    </Select.Root>
   );
 };
 
diff --git a/packages/components/src/lib/open-source-attributions.generated.ts b/packages/components/src/lib/open-source-attributions.generated.ts
index dc396a579..d94ac494b 100644
--- a/packages/components/src/lib/open-source-attributions.generated.ts
+++ b/packages/components/src/lib/open-source-attributions.generated.ts
@@ -2273,17 +2273,6 @@ export const OPEN_SOURCE_ATTRIBUTION_BUNDLE: OpenSourceAttributionBundle = {
         "1.1.7"
       ]
     },
-    {
-      "id": "pkg-radix-ui-react-checkbox-mit",
-      "kind": "package",
-      "scope": "production-dependency",
-      "name": "@radix-ui/react-checkbox",
-      "license": "MIT",
-      "homepage": "https://radix-ui.com/primitives",
-      "versions": [
-        "1.3.3"
-      ]
-    },
     {
       "id": "pkg-radix-ui-react-collapsible-mit",
       "kind": "package",
@@ -2422,17 +2411,6 @@ export const OPEN_SOURCE_ATTRIBUTION_BUNDLE: OpenSourceAttributionBundle = {
         "1.1.2"
       ]
     },
-    {
-      "id": "pkg-radix-ui-react-label-mit",
-      "kind": "package",
-      "scope": "production-dependency",
-      "name": "@radix-ui/react-label",
-      "license": "MIT",
-      "homepage": "https://radix-ui.com/primitives",
-      "versions": [
-        "2.1.8"
-      ]
-    },
     {
       "id": "pkg-radix-ui-react-menu-mit",
       "kind": "package",
@@ -2444,17 +2422,6 @@ export const OPEN_SOURCE_ATTRIBUTION_BUNDLE: OpenSourceAttributionBundle = {
         "2.1.16"
       ]
     },
-    {
-      "id": "pkg-radix-ui-react-menubar-mit",
-      "kind": "package",
-      "scope": "production-dependency",
-      "name": "@radix-ui/react-menubar",
-      "license": "MIT",
-      "homepage": "https://radix-ui.com/primitives",
-      "versions": [
-        "1.1.16"
-      ]
-    },
     {
       "id": "pkg-radix-ui-react-popover-mit",
       "kind": "package",
@@ -2512,17 +2479,6 @@ export const OPEN_SOURCE_ATTRIBUTION_BUNDLE: OpenSourceAttributionBundle = {
         "2.1.6"
       ]
     },
-    {
-      "id": "pkg-radix-ui-react-radio-group-mit",
-      "kind": "package",
-      "scope": "production-dependency",
-      "name": "@radix-ui/react-radio-group",
-      "license": "MIT",
-      "homepage": "https://radix-ui.com/primitives",
-      "versions": [
-        "1.3.8"
-      ]
-    },
     {
       "id": "pkg-radix-ui-react-roving-focus-mit",
       "kind": "package",
@@ -2581,17 +2537,6 @@ export const OPEN_SOURCE_ATTRIBUTION_BUNDLE: OpenSourceAttributionBundle = {
         "1.3.0"
       ]
     },
-    {
-      "id": "pkg-radix-ui-react-switch-mit",
-      "kind": "package",
-      "scope": "production-dependency",
-      "name": "@radix-ui/react-switch",
-      "license": "MIT",
-      "homepage": "https://radix-ui.com/primitives",
-      "versions": [
-        "1.2.6"
-      ]
-    },
     {
       "id": "pkg-radix-ui-react-tabs-mit",
       "kind": "package",
diff --git a/packages/components/src/stories/AddLocalProjectDialog.stories.tsx b/packages/components/src/stories/AddLocalProjectDialog.stories.tsx
index 6b5a0e9fb..560fab119 100644
--- a/packages/components/src/stories/AddLocalProjectDialog.stories.tsx
+++ b/packages/components/src/stories/AddLocalProjectDialog.stories.tsx
@@ -7,7 +7,7 @@ import {
   type RemoteDirectoryOps,
   type RemoteDirectoryPickerMachine,
 } from '@/components/local-projects/add-local-project-dialog';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 type FakeEntry = {
   name: string;
diff --git a/packages/components/src/stories/AssistantTurnAlignment.stories.tsx b/packages/components/src/stories/AssistantTurnAlignment.stories.tsx
index 042b75b39..b7eee19b3 100644
--- a/packages/components/src/stories/AssistantTurnAlignment.stories.tsx
+++ b/packages/components/src/stories/AssistantTurnAlignment.stories.tsx
@@ -358,11 +358,8 @@ const planModeTurn: SessionHistoryParsed = {
       isLatest: true,
       markdown: [
         '## Goal',
-        '',
         'Keep every top-level row of a plan-mode turn on one left rail.',
-        '',
         '## Steps',
-        '',
         '1. No per-shell horizontal pad on the `switch_mode` card.',
         '2. The resolved permission card sits on the rail, not on its own `ml-4`.',
       ].join('\n'),
@@ -488,11 +485,8 @@ const planAwaitingDecisionTurn: SessionHistoryParsed = {
       isLatest: true,
       markdown: [
         '## Goal',
-        '',
         'Keep every top-level row of a plan-mode turn on one left rail.',
-        '',
         '## Steps',
-        '',
         '1. No per-shell horizontal pad on the `switch_mode` card.',
         '2. The resolved permission card sits on the rail.',
         '3. Attachments sort below the plan.',
@@ -530,11 +524,8 @@ const planAwaitingDecisionTurn: SessionHistoryParsed = {
  */
 const PARITY_PLAN = [
   '## Goal',
-  '',
   'Render the same plan panel whichever adapter produced it.',
-  '',
   '## Steps',
-  '',
   '1. Resolve the carrier in `plan-surface.ts`.',
   '2. Feed every carrier into one `PlanPanel`.',
 ].join('\n');
diff --git a/packages/components/src/stories/BaseHeader.stories.tsx b/packages/components/src/stories/BaseHeader.stories.tsx
index b0591056b..af3ea12b8 100644
--- a/packages/components/src/stories/BaseHeader.stories.tsx
+++ b/packages/components/src/stories/BaseHeader.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { BaseHeader } from '@/components/page-headers/base-header';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Plus, Filter, Search } from 'lucide-react';
-import { Input } from '@/ui/input';
+import { Input } from '@lody/ui/input';
 
 /**
  * BaseHeader 组件是所有页面 header 的基础组件
@@ -42,11 +42,11 @@ export const Default: Story = {
     title: 'Page Title',
     actions: (
       <div className="flex items-center gap-2">
-        <Button variant="outline" size="sm">
+        <Button variant="secondary" size="small">
           <Filter className="mr-2 h-4 w-4" />
           Filter
         </Button>
-        <Button size="sm">
+        <Button size="small">
           <Plus className="mr-2 h-4 w-4" />
           New Item
         </Button>
@@ -64,10 +64,10 @@ export const Mobile: Story = {
     title: 'A Very Long Page Title That Should Be Truncated',
     actions: (
       <div className="flex items-center gap-2">
-        <Button size="sm" variant="ghost">
+        <Button variant="ghost" size="small">
           <Filter className="h-4 w-4" />
         </Button>
-        <Button size="sm">
+        <Button size="small">
           <Plus className="h-4 w-4" />
         </Button>
       </div>
@@ -93,11 +93,11 @@ export const WithSearch: Story = {
           <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input placeholder="Search..." className="w-64 pl-9" />
         </div>
-        <Button variant="outline" size="sm">
+        <Button variant="secondary" size="small">
           <Filter className="mr-2 h-4 w-4" />
           <span className="hidden sm:inline">Filter</span>
         </Button>
-        <Button size="sm">
+        <Button size="small">
           <Plus className="mr-2 h-4 w-4" />
           <span className="hidden sm:inline">New Session</span>
           <span className="sm:hidden">New</span>
@@ -126,11 +126,11 @@ export const Tablet: Story = {
     title: 'Projects',
     actions: (
       <div className="flex items-center gap-2">
-        <Button variant="outline" size="sm">
+        <Button variant="secondary" size="small">
           <Filter className="mr-2 h-4 w-4" />
           <span className="hidden sm:inline">Filter</span>
         </Button>
-        <Button size="sm">
+        <Button size="small">
           <Plus className="mr-2 h-4 w-4" />
           <span className="hidden sm:inline">New Project</span>
           <span className="sm:hidden">New</span>
@@ -153,11 +153,11 @@ export const DarkMode: Story = {
     title: 'Dark Mode Header',
     actions: (
       <div className="flex items-center gap-2">
-        <Button variant="outline" size="sm">
+        <Button variant="secondary" size="small">
           <Filter className="mr-2 h-4 w-4" />
           Filter
         </Button>
-        <Button size="sm">
+        <Button size="small">
           <Plus className="mr-2 h-4 w-4" />
           New Item
         </Button>
diff --git a/packages/components/src/stories/ChatComposer.stories.tsx b/packages/components/src/stories/ChatComposer.stories.tsx
index e3c4642a9..1a13b75ab 100644
--- a/packages/components/src/stories/ChatComposer.stories.tsx
+++ b/packages/components/src/stories/ChatComposer.stories.tsx
@@ -10,7 +10,7 @@ import {
 import type { OptionSelectorOption } from '@/components/shared/option-selector';
 import { OptionSelector } from '@/components/shared/option-selector';
 import { Card, CardContent } from '@/ui/card';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 import { getPastedTextCharacterCount, type PastedTextDraft } from '@/lib/pasted-text-draft';
 import { registerBuiltInCommands } from '@/lib/commands';
@@ -78,10 +78,8 @@ const repoOptions: OptionSelectorOption<string>[] = [
 
 const samplePastedText = [
   'Design brief:',
-  '',
   'Users often paste full logs or PR descriptions into the composer before asking a focused question.',
   'We should keep that context available without letting the textarea grow so tall that the actual prompt disappears.',
-  '',
   'Requirements:',
   '- Show a compact summary block with the pasted character count.',
   '- Let users inspect the full content on hover or tap.',
@@ -194,17 +192,11 @@ function DemoComposer({
       : []
   );
 
-  const primaryActionClassName = cn(
-    variant === 'dialog'
-      ? 'border font-semibold transition-all focus-visible:ring-2 focus-visible:ring-offset-2 h-10 rounded-lg px-5 text-sm'
-      : 'h-8 w-8 rounded-md border shadow-xs transition-all',
+  const dialogPrimaryActionClassName = cn(
+    'border font-semibold transition-all focus-visible:ring-2 focus-visible:ring-offset-2 h-10 rounded-lg px-5 text-sm',
     tone === 'dark'
-      ? variant !== 'dialog'
-        ? 'border-sky-200/20 bg-sky-300/15 text-white hover:bg-sky-300/25 active:translate-y-[1px] focus-visible:ring-white/40 focus-visible:ring-offset-[#050b1d]'
-        : 'border-white/25 bg-white/10 text-white hover:bg-white/15 active:translate-y-[1px] focus-visible:ring-white/30 focus-visible:ring-offset-[#050b1d]'
-      : variant !== 'dialog'
-        ? 'border-input-border/70 bg-input/70 text-input-foreground hover:bg-muted/60 active:translate-y-[1px] focus-visible:ring-ring'
-        : 'border-input-border/70 bg-input/60 text-input-foreground hover:bg-muted/60 active:translate-y-[1px] focus-visible:ring-ring'
+      ? 'border-white/25 bg-white/10 text-white hover:bg-white/15 active:translate-y-[1px] focus-visible:ring-white/30 focus-visible:ring-offset-[#050b1d]'
+      : 'border-input-border/70 bg-input/60 text-input-foreground hover:bg-muted/60 active:translate-y-[1px] focus-visible:ring-ring'
   );
 
   const selectorNode =
@@ -262,17 +254,11 @@ function DemoComposer({
 
   const primaryActionNode =
     variant !== 'dialog' ? (
-      <Button
-        type="button"
-        size="icon"
-        variant="ghost"
-        aria-label="Send"
-        className={cn(primaryActionClassName, 'h-6 w-6')}
-      >
+      <Button type="button" variant="primary" aria-label="Send" size="medium" shape="pill" icon>
         <ArrowUp className="h-4 w-4" />
       </Button>
     ) : (
-      <Button type="button" className={primaryActionClassName}>
+      <Button type="button" className={dialogPrimaryActionClassName}>
         Send
       </Button>
     );
diff --git a/packages/components/src/stories/ChatFailedDetailDialog.stories.tsx b/packages/components/src/stories/ChatFailedDetailDialog.stories.tsx
index 4677565d2..d9aed6528 100644
--- a/packages/components/src/stories/ChatFailedDetailDialog.stories.tsx
+++ b/packages/components/src/stories/ChatFailedDetailDialog.stories.tsx
@@ -44,7 +44,6 @@ export const LongRawPayload: Story = {
     summary: 'Unhandled exception while starting the agent',
     message: [
       'Internal error: Unhandled exception while starting the agent',
-      '',
       ...Array.from(
         { length: 40 },
         (_, index) =>
diff --git a/packages/components/src/stories/ChatLandingAttachments.stories.tsx b/packages/components/src/stories/ChatLandingAttachments.stories.tsx
index 7fcbeb59e..7782aef00 100644
--- a/packages/components/src/stories/ChatLandingAttachments.stories.tsx
+++ b/packages/components/src/stories/ChatLandingAttachments.stories.tsx
@@ -16,8 +16,7 @@ import {
   MobileInlinePickerCoordinator,
   MobileInlinePickerRowSlot,
 } from '@/components/mobile/mobile-inline-picker';
-import { Button } from '@/ui/button';
-import { cn } from '@/lib/utils';
+import { Button } from '@lody/ui/button';
 import { registerBuiltInCommands } from '@/lib/commands';
 
 // So the composer's ⌘L focus hint has a command binding to read.
@@ -182,16 +181,7 @@ function MobileNewChatDemo() {
           <span className="text-xs text-muted-foreground">claude-opus-4-8 · Thinking</span>
         }
         primaryAction={
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            aria-label="Send"
-            className={cn(
-              'h-8 w-8 rounded-full shadow-xs transition-all',
-              'bg-foreground text-background hover:bg-foreground/90 hover:text-background'
-            )}
-          >
+          <Button type="button" variant="primary" aria-label="Send" icon shape="pill">
             <ArrowUp className="h-5 w-5" />
           </Button>
         }
diff --git a/packages/components/src/stories/ChatLandingView.stories.tsx b/packages/components/src/stories/ChatLandingView.stories.tsx
index 10acb4d0f..aa8481796 100644
--- a/packages/components/src/stories/ChatLandingView.stories.tsx
+++ b/packages/components/src/stories/ChatLandingView.stories.tsx
@@ -199,19 +199,16 @@ const zhCnPastedText = [
   '[错误摘要]',
   '在切换到中文后，用户把一整段日志直接粘贴进输入框。',
   '之前的行为是整段文本全部撑开输入区域，真正的问题描述会被顶到折叠线以下。',
-  '',
   '[期望]',
   '1. 输入框里只保留一段内联提示。',
   '2. 用户仍然知道自己已经粘贴了大量上下文。',
   '3. 点击这段提示后，可以看到完整内容并继续发送。',
-  '',
   '[原始日志片段]',
   'RangeError: Invalid language tag: zh_CN',
   '    at new NumberFormat (<anonymous>)',
   '    at ChatLanding (chat-landing.tsx:219:27)',
   '    at renderWithHooks (react-dom-client.development.js:5529:22)',
   '    at updateFunctionComponent (react-dom-client.development.js:8897:19)',
-  '',
   '补充说明：',
   '这类日志在实际使用里通常会更长，里面还会包含堆栈、请求参数、环境信息和用户自己的描述。',
 ].join('\n');
diff --git a/packages/components/src/stories/ChatMessageSelection.stories.tsx b/packages/components/src/stories/ChatMessageSelection.stories.tsx
index 7c5d8ee77..ab331eeba 100644
--- a/packages/components/src/stories/ChatMessageSelection.stories.tsx
+++ b/packages/components/src/stories/ChatMessageSelection.stories.tsx
@@ -25,7 +25,7 @@ import {
   SessionConversationPageHeader,
 } from '@/components/sessions/session-conversation-page';
 import { ChatShareImageDialog } from '@/components/sessions/chat-share-image-dialog';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 const sessionId = 'share-selection-story' as SessionId;
 const session = {
@@ -126,7 +126,11 @@ function SelectionHarness({ long = false }: { long?: boolean }) {
         <SessionConversationPageHeader
           titleSlot={session.title}
           endSlot={
-            <Button variant="ghost" size="sm" onClick={() => selection.start(candidates, confirm)}>
+            <Button
+              variant="ghost"
+              size="small"
+              onClick={() => selection.start(candidates, confirm)}
+            >
               <ImageIcon className="size-4" />
               {t('sessions.shareImage.dialogTitle', 'Share as image')}
             </Button>
diff --git a/packages/components/src/stories/CodeCollabMarkdownPreview.stories.tsx b/packages/components/src/stories/CodeCollabMarkdownPreview.stories.tsx
index 1ed3d1c36..fae9ee048 100644
--- a/packages/components/src/stories/CodeCollabMarkdownPreview.stories.tsx
+++ b/packages/components/src/stories/CodeCollabMarkdownPreview.stories.tsx
@@ -18,41 +18,29 @@ const MARKDOWN_FILE: SessionFileProviderEntry = {
 
 const MARKDOWN_SOURCE = [
   '# Loro Code Collab',
-  '',
   'Host-backed file browsing and digest-checked editing for your repository.',
-  '',
   '> Markdown files open as rendered documents, with the source editor one toggle away.',
-  '',
   '## Highlights',
-  '',
   '- Host RPC open/refresh/save with digest conflict checks',
   '- Path-keyed file tree and current All Changes state',
   '- Rendered previews for `.svg` and `.md` files',
-  '',
   '## Quick start',
-  '',
   '```ts',
   'const file = await provider.openFile("README.md");',
   'await provider.saveFile("README.md", file.digest, nextText);',
   '```',
-  '',
   '## Supported file states',
-  '',
   '| State              | Editable | Notes                          |',
   '| ------------------ | :------: | ------------------------------ |',
   '| live-collaborative |    ✅    | Host RPC read/write            |',
   '| live-readonly      |    ❌    | Host RPC read-only             |',
   '| historical-turn    |    ❌    | Unavailable in v2              |',
-  '',
   '### Checklist',
-  '',
   '1. Open a workspace',
   '2. Pick a file from the tree',
   '3. Toggle **Code** to edit the Markdown source',
-  '',
   '- [x] Code/Rendered toggle',
   '- [ ] Side-by-side preview',
-  '',
   'See the [docs](https://example.com) for more.',
 ].join('\n');
 
diff --git a/packages/components/src/stories/CodeCollabMonacoEditor.stories.tsx b/packages/components/src/stories/CodeCollabMonacoEditor.stories.tsx
index fd10b4c08..e79f1140a 100644
--- a/packages/components/src/stories/CodeCollabMonacoEditor.stories.tsx
+++ b/packages/components/src/stories/CodeCollabMonacoEditor.stories.tsx
@@ -38,14 +38,12 @@ const sampleText = [
   '    path: file.path.replace(/\\\\/g, "/"),',
   '    sizeBytes: file.sizeBytes ?? 0,',
   '  }));',
-  '',
   '  return {',
   '    meta,',
   '    files,',
   '    builtAt: Date.now(),',
   '  };',
   '}',
-  '',
 ].join('\n');
 
 const FILE_ID = 'monaco-story-file-1';
diff --git a/packages/components/src/stories/ConversationOutlineArrivalIntentLab.stories.tsx b/packages/components/src/stories/ConversationOutlineArrivalIntentLab.stories.tsx
index 719cf9bf2..c8e65b114 100644
--- a/packages/components/src/stories/ConversationOutlineArrivalIntentLab.stories.tsx
+++ b/packages/components/src/stories/ConversationOutlineArrivalIntentLab.stories.tsx
@@ -8,7 +8,7 @@ import {
 } from '@/components/ai-gui/conversation-outline-rail';
 import { DEFAULT_ARRIVAL_INTENT_CONFIG } from '@/components/ai-gui/conversation-outline-arrival-intent';
 import type { ConversationOutlineEntry } from '@/lib/conversation-outline';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 const meta = {
   title: 'Sessions/ConversationOutlineRail/ArrivalIntentLab',
@@ -304,49 +304,49 @@ function ArrivalIntentLab() {
 
         <div className="flex flex-wrap gap-2 border-b border-border py-4">
           {recording ? (
-            <Button size="sm" variant="outline" onClick={stopCapture}>
-              <Square /> Stop
+            <Button variant="secondary" size="small" onClick={stopCapture}>
+              <Square className="size-4" /> Stop
             </Button>
           ) : (
-            <Button size="sm" onClick={startCapture}>
-              <Circle /> Record
+            <Button size="small" onClick={startCapture}>
+              <Circle className="size-4" /> Record
             </Button>
           )}
           <Button
-            size="sm"
-            variant="outline"
+            variant="secondary"
+            size="small"
             disabled={!latestTrial}
             onClick={() => labelLatestTrial('intended')}
           >
-            <Check /> Intended
+            <Check className="size-4" /> Intended
           </Button>
           <Button
-            size="sm"
-            variant="outline"
+            variant="secondary"
+            size="small"
             disabled={!latestTrial}
             onClick={() => labelLatestTrial('accidental')}
           >
-            <X /> Accidental
+            <X className="size-4" /> Accidental
           </Button>
           <Button
-            size="icon"
             variant="ghost"
+            icon
             disabled={eventCount === 0}
             aria-label="Export capture"
             title="Export capture"
             onClick={exportCapture}
           >
-            <Download />
+            <Download className="size-4" />
           </Button>
           <Button
-            size="icon"
             variant="ghost"
+            icon
             disabled={eventCount === 0}
             aria-label="Clear capture"
             title="Clear capture"
             onClick={clearCapture}
           >
-            <Trash2 />
+            <Trash2 className="size-4" />
           </Button>
         </div>
 
diff --git a/packages/components/src/stories/DesktopSessionDetailLayout.stories.tsx b/packages/components/src/stories/DesktopSessionDetailLayout.stories.tsx
index be6e836ae..d1af7ca39 100644
--- a/packages/components/src/stories/DesktopSessionDetailLayout.stories.tsx
+++ b/packages/components/src/stories/DesktopSessionDetailLayout.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { DesktopSessionDetailLayout } from '@/components/sessions/desktop-session-detail-layout';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 /* The layout persists panel sizes under this key (autoSaveId); clear it so
    every story starts from its declared defaultSizes, not a previous drag. */
@@ -70,10 +70,10 @@ function LayoutHarness({
   return (
     <div className="flex h-screen flex-col gap-2 bg-muted/30 p-4">
       <div className="flex items-center gap-2">
-        <Button size="sm" onClick={openPrTab}>
+        <Button size="small" onClick={openPrTab}>
           Open PR tab
         </Button>
-        <Button size="sm" variant="outline" onClick={() => setSidebarOpen(false)}>
+        <Button variant="secondary" size="small" onClick={() => setSidebarOpen(false)}>
           Close sidebar
         </Button>
         <span className="text-xs text-muted-foreground">container: {containerWidthPx}px</span>
diff --git a/packages/components/src/stories/ErrorBoundaryFallback.stories.tsx b/packages/components/src/stories/ErrorBoundaryFallback.stories.tsx
index a61ed79e8..67e2eafc9 100644
--- a/packages/components/src/stories/ErrorBoundaryFallback.stories.tsx
+++ b/packages/components/src/stories/ErrorBoundaryFallback.stories.tsx
@@ -13,7 +13,6 @@ function crashError(): Error {
 }
 
 const COMPONENT_STACK = [
-  '',
   '    at SessionChatHeader (session-chat-interface.tsx:5192:21)',
   '    at ErrorBoundary (error-boundary.tsx:116:1)',
   '    at RootOutlet',
diff --git a/packages/components/src/stories/FileTreeStates.stories.tsx b/packages/components/src/stories/FileTreeStates.stories.tsx
index 2795b946f..26d25beec 100644
--- a/packages/components/src/stories/FileTreeStates.stories.tsx
+++ b/packages/components/src/stories/FileTreeStates.stories.tsx
@@ -4,7 +4,7 @@ import {
   FileTreeSkeleton,
   FileTreeStatePanel,
 } from '@/components/sessions/components/file-tree-states';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 const meta = {
   title: 'Sessions/FileTreeStates',
@@ -66,7 +66,7 @@ export const ErrorWithRetry: Story = {
       title="Couldn't load files"
       description="Permission denied while reading the project directory."
       action={
-        <Button variant="outline" size="sm" className="gap-1.5">
+        <Button variant="secondary" size="small">
           <RefreshCw className="h-3.5 w-3.5" />
           Try again
         </Button>
diff --git a/packages/components/src/stories/JoinCommunityDialog.stories.tsx b/packages/components/src/stories/JoinCommunityDialog.stories.tsx
index 26cd712bd..502500aba 100644
--- a/packages/components/src/stories/JoinCommunityDialog.stories.tsx
+++ b/packages/components/src/stories/JoinCommunityDialog.stories.tsx
@@ -47,13 +47,13 @@ export const SettingsAboutRow: StoryObj = {
           <JoinCommunityButton />
         </CompactRow>
         <CompactRow label="Download apps">
-          <Button variant="outline" size="sm" className="h-7 px-2.5">
+          <Button variant="secondary" size="small">
             <ExternalLink className="mr-1 h-3.5 w-3.5" />
             Open download page
           </Button>
         </CompactRow>
         <CompactRow label="Website">
-          <Button variant="outline" size="sm" className="h-7 px-2.5">
+          <Button variant="secondary" size="small">
             <ExternalLink className="mr-1 h-3.5 w-3.5" />
             Visit website
           </Button>
diff --git a/packages/components/src/stories/LocalProjectRemovalUX.stories.tsx b/packages/components/src/stories/LocalProjectRemovalUX.stories.tsx
index 0c789c704..7c1cea1b7 100644
--- a/packages/components/src/stories/LocalProjectRemovalUX.stories.tsx
+++ b/packages/components/src/stories/LocalProjectRemovalUX.stories.tsx
@@ -19,8 +19,8 @@ import { LoroSidebar, type LoroSidebarNavKey } from '@/components/loro-sidebar';
 import { MobileHomeScreen } from '@/components/mobile/mobile-home-screen';
 import { MobileRemoveLocalProjectSheet } from '@/components/mobile/mobile-remove-local-project-sheet';
 import { SidebarSectionHeader } from '@/components/sidebar-row-shared';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
 import { Toaster } from '@/ui/sonner';
 
 const now = Date.now();
@@ -198,11 +198,11 @@ function ProjectConversationPane() {
           <div className="rounded-2xl border border-border bg-card p-3 shadow-sm">
             <p className="min-h-12 text-sm text-muted-foreground">继续讨论这个项目…</p>
             <div className="mt-2 flex items-center justify-between">
-              <Button variant="ghost" size="sm" className="text-muted-foreground">
+              <Button variant="ghost" size="small">
                 <FolderPlus className="h-4 w-4" />
                 Lody Desktop
               </Button>
-              <Button size="sm">发送</Button>
+              <Button size="small">发送</Button>
             </div>
           </div>
         </div>
@@ -409,7 +409,7 @@ function RemovedProjectArchive() {
                 <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                 <Input className="pl-9" placeholder="搜索归档对话" />
               </div>
-              <Button variant="outline" size="icon" aria-label="筛选归档对话">
+              <Button variant="secondary" aria-label="筛选归档对话" icon>
                 <SlidersHorizontal className="h-4 w-4" />
               </Button>
             </div>
diff --git a/packages/components/src/stories/MarkdownRenderer.stories.tsx b/packages/components/src/stories/MarkdownRenderer.stories.tsx
index e1f9b6e33..c2e4bd4b7 100644
--- a/packages/components/src/stories/MarkdownRenderer.stories.tsx
+++ b/packages/components/src/stories/MarkdownRenderer.stories.tsx
@@ -37,9 +37,7 @@ export const Paragraphs: Story = {
     size: 'default',
     text: [
       'This is the first paragraph with some **bold** and _italic_ text.',
-      '',
       'This is the second paragraph. It should have comfortable vertical spacing.',
-      '',
       'A third paragraph to check last-child spacing.',
     ].join('\n'),
   },
@@ -51,14 +49,11 @@ export const ListsAndBlockquote: Story = {
     size: 'default',
     text: [
       'A list:',
-      '',
       '- First item',
       '- Second item with a nested list:',
       '  - Nested item A',
       '  - Nested item B',
-      '',
       'A blockquote:',
-      '',
       '> This is a blockquote.',
       '> It should have a left border and spacing.',
     ].join('\n'),
@@ -71,21 +66,13 @@ export const LooseListWithMultiParagraphItems: Story = {
     size: 'default',
     text: [
       'Quint 会让你更轻松的任务',
-      '',
       '1. **描述状态机/协议行为**',
-      '',
       '   例如账户转账、共识投票、两阶段提交、缓存一致性、权限流转。你写 `init`、`step`、`action`、`nondet`，不用手工展开 `s0, s1, ..., sk` 和转移约束。',
-      '',
       '2. **检查 safety invariant**',
-      '',
       '   比如"余额不会为负""不会两个 leader 同时被提交""锁不会被两个进程同时持有"。Quint 的主路径就是写模型、写 invariant，然后 `quint run` 或 `quint verify`。',
-      '',
       '3. **寻找可复现反例 trace**',
-      '',
       '   直接用 Z3 通常给你一个 model；Quint 会把结果还原成状态序列，更像"重现步骤"。这对调试协议设计很有价值。',
-      '',
       '4. **表达 nondeterminism 和 interleaving**',
-      '',
       '   网络延迟、消息丢失、随机选一个节点、任意执行某个 actor，这些在 Quint 中比较自然；直接 Z3 要自己编码选择变量、路径和约束。',
     ].join('\n'),
   },
@@ -105,15 +92,11 @@ export const CodeBlocks: Story = {
     size: 'default',
     text: [
       'Inline code: `pnpm --filter @lody/components storybook`',
-      '',
       'Fenced code with language:',
-      '',
       '```ts',
       'export const hello = (name: string) => `Hello, ${name}`;',
       '```',
-      '',
       'Fenced code without language:',
-      '',
       '```',
       'echo "hello"',
       '```',
@@ -173,31 +156,23 @@ export const CodeBlockPaddingSymmetry: Story = {
     text: [
       'Single-line code blocks stay compact and vertically centered, with the',
       'language label floating in the top-right corner.',
-      '',
       '```ts',
       'const answer = 42;',
       '```',
-      '',
       '```bash',
       'pnpm --filter @lody/components storybook',
       '```',
-      '',
       'A short multi-line block keeps the same compact frame:',
-      '',
       '```tsx',
       'export const Hello = ({ name }: { name: string }) => (',
       '  <span>Hello, {name}</span>',
       ');',
       '```',
-      '',
       'A block without a language fence has no label and keeps the same compact body:',
-      '',
       '```',
       'echo "no language"',
       '```',
-      '',
       'A long first line scrolls the full width and slides beneath the floating label:',
-      '',
       '```ts',
       "const command = 'pnpm --filter @lody/components exec vitest run tests/markdown-streaming-reparse.test.ts --reporter=verbose';",
       '```',
@@ -216,29 +191,17 @@ export const CodeBlockPaddingSymmetry: Story = {
 
 const allMarkdownFormatsText = [
   '# Markdown coverage',
-  '',
   'A dense fixture for checking typography, spacing, GFM, code highlighting, math, Mermaid, links, and long content in one pass.',
-  '',
   '## Inline formatting',
-  '',
   'Plain text with **bold**, _italic_, ***bold italic***, ~~strikethrough~~, `inline code`, [named links](https://example.com/docs), autolinks https://example.com/a/b?x=1, email test@example.com, and trailing punctuation https://example.com/path).',
-  '',
   'Escaped markdown characters: \\*not italic\\*, \\`not code\\`, and \\[not a link\\].',
-  '',
   '## Headings',
-  '',
   '### Heading level 3',
-  '',
   '#### Heading level 4',
-  '',
   '##### Heading level 5',
-  '',
   '###### Heading level 6',
-  '',
   '---',
-  '',
   '## Lists',
-  '',
   '- Unordered item one',
   '- Unordered item two with nested content:',
   '  - Nested bullet A',
@@ -248,49 +211,36 @@ const allMarkdownFormatsText = [
   '- Task list states:',
   '  - [x] Finished task',
   '  - [ ] Pending task',
-  '',
   '1. Ordered item one',
   '2. Ordered item two',
   '3. Ordered item three',
-  '',
   '## Blockquotes',
-  '',
   '> A blockquote with **formatting** and a link https://example.com.',
   '>',
   '> - Quoted list item',
   '> - Another quoted list item',
-  '',
   '## Code',
-  '',
   'Inline code should stay compact: `pnpm --filter @lody/components storybook`.',
-  '',
   'TypeScript fenced code should preserve line breaks and syntax highlighting:',
-  '',
   '```tsx',
   'type Message = {',
   '  id: string;',
   '  text: string;',
   '  metadata?: Record<string, unknown>;',
   '};',
-  '',
   'export function renderMessage(message: Message) {',
   '  if (!message.text.trim()) {',
   '    return null;',
   '  }',
-  '',
   '  return <article data-message-id={message.id}>{message.text}</article>;',
   '}',
   '```',
-  '',
   'Shell fenced code:',
-  '',
   '```bash',
   'pnpm --filter @lody/components typecheck',
   'pnpm --filter @lody/components exec vitest run tests/markdown-streaming-reparse.test.ts',
   '```',
-  '',
   'JSON fenced code:',
-  '',
   '```json',
   '{',
   '  "name": "lody",',
@@ -298,46 +248,33 @@ const allMarkdownFormatsText = [
   '  "enabled": true',
   '}',
   '```',
-  '',
   'A long code line should scroll instead of destroying layout:',
-  '',
   '```ts',
   'const veryLongLine = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";',
   '```',
-  '',
   'Fenced code without language:',
-  '',
   '```',
   'first line',
   'second line',
   'third line',
   '```',
-  '',
   '## Tables',
-  '',
   '| Feature | Status | Notes |',
   '| --- | --- | --- |',
   '| GFM table | Supported | Should have borders and readable spacing |',
   '| Inline code | `ok` | Code inside cells should remain inline |',
   '| Links | [docs](https://example.com) | Links remain clickable |',
-  '',
   'A wide table should be horizontally scrollable:',
-  '',
   '| ID | File | Description | Long value | Status | Owner |',
   '| --- | --- | --- | --- | --- | --- |',
   '| 1 | packages/components/src/components/ai-gui/markdown-renderer.tsx | Markdown renderer fixture | abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz | Active | UI |',
   '| 2 | packages/components/src/stories/MarkdownRenderer.stories.tsx | Storybook coverage | 1234567890-1234567890-1234567890-1234567890-1234567890 | Review | Components |',
-  '',
   '## Math',
-  '',
   'Inline math: $E = mc^2$ and $a^2 + b^2 = c^2$.',
-  '',
   '$$',
   '\\frac{\\partial L}{\\partial q} - \\frac{d}{dt}\\frac{\\partial L}{\\partial \\dot q} = 0',
   '$$',
-  '',
   '## Mermaid',
-  '',
   '```mermaid',
   'sequenceDiagram',
   '  participant U as User',
@@ -347,13 +284,9 @@ const allMarkdownFormatsText = [
   '  M->>S: stable blocks',
   '  S-->>U: formatted output',
   '```',
-  '',
   '## Raw HTML',
-  '',
   '<strong>Raw HTML should stay escaped unless allowHtml is enabled.</strong>',
-  '',
   '## Images',
-  '',
   '![Tiny placeholder](https://placehold.co/320x120?text=Markdown+Image)',
 ].join('\n');
 
@@ -383,17 +316,13 @@ export const AllMarkdownFormats: Story = {
 const streamdownDemoChunks = [
   [
     '### Streamdown native rendering',
-    '',
     'This story exercises Mermaid, LaTeX, and word-level streaming animation in one Markdown response.',
-    '',
   ].join('\n'),
   [
     'Inline math is rendered by KaTeX: $E = mc^2$, and display math works too:',
-    '',
     '$$',
     '\\int_0^\\infty e^{-x^2}\\,dx = \\frac{\\sqrt{\\pi}}{2}',
     '$$',
-    '',
   ].join('\n'),
   [
     '```mermaid',
@@ -405,7 +334,6 @@ const streamdownDemoChunks = [
     '  E --> F[SVG with zoom / copy / download controls]',
     '  D --> G[Animated new text settles]',
     '```',
-    '',
   ].join('\n'),
   [
     '| Feature | Expected behavior |',
@@ -477,7 +405,6 @@ const mermaidStyleReviewText = [
   '  Theme --> Svg["Readable SVG"]',
   '  Svg --> Layout["Single frame + natural height"]',
   '```',
-  '',
   '```mermaid',
   'sequenceDiagram',
   '  participant U as User',
@@ -519,24 +446,16 @@ export const TablesAndHeadings: Story = {
     size: 'default',
     text: [
       '# Heading 1',
-      '',
       'Some text under heading 1.',
-      '',
       '## Heading 2',
-      '',
       '| Column A | Column B |',
       '| --- | --- |',
       '| 1 | 2 |',
       '| 3 | 4 |',
-      '',
       '### Heading 3',
-      '',
       'A markdown link: [example](https://example.com)',
-      '',
       'An autolink: https://example.com',
-      '',
       'A www link: www.example.com',
-      '',
       'An autolink with punctuation: https://example.com).',
     ].join('\n'),
   },
@@ -548,7 +467,6 @@ export const ConfigurationTable: Story = {
     size: 'default',
     text: [
       '`jh` 当前配置如下：',
-      '',
       '| 项目 | 配置 |',
       '|---|---|',
       '| 状态 | `RUNNING` |',
@@ -569,15 +487,12 @@ export const ConfigurationTable: Story = {
       '| Secure Boot | 未开启 |',
       '| vTPM / 完整性监控 | 已开启 |',
       '| 标签 | 无 |',
-      '',
       '远程访问方面：',
-      '',
       '- SSH `22` 对 `0.0.0.0/0` 开放',
       '- RDP `3389` 对 `0.0.0.0/0` 开放',
       '- 两个端口均实测可连接',
       '- 使用默认 Compute Engine 服务账号',
       '- 当前本地 SSH key 无法通过认证',
-      '',
       '实例是今天约 `19:47`（北京时间）启动的。',
     ].join('\n'),
   },
@@ -597,7 +512,6 @@ export const WideTableScrollable: Story = {
     size: 'default',
     text: [
       'A wide table that overflows on narrow screens:',
-      '',
       '| ID | Name | Email | Department | Role | Location | Start Date | Salary | Status | Notes |',
       '| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |',
       '| 1 | Alice Johnson | alice.johnson@example.com | Engineering | Senior Engineer | San Francisco, CA | 2020-01-15 | $150,000 | Active | Team lead for infrastructure |',
@@ -617,19 +531,12 @@ export const GitHubLinks: Story = {
     size: 'default',
     text: [
       'GitHub links should be auto-linked:',
-      '',
       'A PR link: https://github.com/loro-dev/lody/pull/602',
-      '',
       'An issue link: https://github.com/loro-dev/lody/issues/123',
-      '',
       'A repo link: https://github.com/loro-dev/lody',
-      '',
       'Multiple links in one line: Check https://github.com/loro-dev/lody/pull/602 and https://github.com/loro-dev/lody/pull/603',
-      '',
       'Link with trailing punctuation: See https://github.com/loro-dev/lody/pull/602.',
-      '',
       'Inline code link: `https://github.com/loro-dev/lody/pull/602`',
-      '',
       'Mixed inline code: Check `https://github.com/loro-dev/lody/pull/602` for details.',
     ].join('\n'),
   },
@@ -641,16 +548,13 @@ export const InlineCodeDensity: Story = {
     size: 'default',
     text: [
       'When consecutive lines have inline code, the borders should not overlap:',
-      '',
       'Use `useState` for local state management.',
       'Use `useEffect` for side effects and subscriptions.',
       'Use `useMemo` for expensive computations.',
       'Use `useCallback` for stable function references.',
       'Use `useRef` for mutable values that persist across renders.',
-      '',
       'Mixed density paragraph with `inline code` on the first line',
       'and `more code` on the second line and `even more` on the third.',
-      '',
       'A paragraph with multiple inline codes: `pnpm install`, then `pnpm build`, and finally `pnpm check` to verify.',
     ].join('\n'),
   },
@@ -662,15 +566,10 @@ export const AgentFileLinks: Story = {
     size: 'default',
     text: [
       'Agent filesystem links should not navigate inside the web app:',
-      '',
       'A labeled worktree file: [markdown-renderer.tsx](/home/agent/.lody/repos/github---example---project/worktrees/5110aa94-b18b-43cf-afa7-369905c2515a/packages/components/src/components/ai-gui/markdown-renderer.tsx)',
-      '',
       'A repo-relative GitHub line anchor: [README.md#L100](README.md#L100)',
-      '',
       'A repo-relative line reference: [README.md:100](README.md:100)',
-      '',
       'A raw path label: [/tmp/lody-output.log](/tmp/lody-output.log)',
-      '',
       'A protocol-relative web URL stays a normal link: [CDN script](//cdn.example.com/app.js)',
     ].join('\n'),
   },
diff --git a/packages/components/src/stories/MobileChatLandingScreen.stories.tsx b/packages/components/src/stories/MobileChatLandingScreen.stories.tsx
index 20201e88f..b259ee20f 100644
--- a/packages/components/src/stories/MobileChatLandingScreen.stories.tsx
+++ b/packages/components/src/stories/MobileChatLandingScreen.stories.tsx
@@ -3,7 +3,7 @@ import { fn } from 'storybook/test';
 import { ArrowUp } from 'lucide-react';
 
 import { MobileChatLandingScreen } from '@/components/mobile/mobile-chat-landing-screen';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 function MockComposer() {
   return (
@@ -17,10 +17,11 @@ function MockComposer() {
         <span className="text-xs text-muted-foreground">claude-3.5-sonnet · zx-macbook</span>
         <Button
           type="button"
-          size="icon"
-          variant="ghost"
+          variant="primary"
           aria-label="Send"
-          className="ml-auto h-8 w-8 rounded-full bg-foreground text-background shadow-xs hover:bg-foreground/90 hover:text-background"
+          icon
+          shape="pill"
+          className="ml-auto"
         >
           <ArrowUp className="h-4 w-4" />
         </Button>
diff --git a/packages/components/src/stories/MobileInlinePicker.stories.tsx b/packages/components/src/stories/MobileInlinePicker.stories.tsx
index 6f5019af9..2ec644e8e 100644
--- a/packages/components/src/stories/MobileInlinePicker.stories.tsx
+++ b/packages/components/src/stories/MobileInlinePicker.stories.tsx
@@ -9,12 +9,18 @@ import {
   MobileInlineMenu,
   type MobileInlinePickerOption,
 } from '@/components/mobile/mobile-inline-picker';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 const machineOptions: MobileInlinePickerOption[] = [
   { value: 'zx-macbook', label: 'zx-macbook', icon: <Monitor className="h-3.5 w-3.5" /> },
   { value: 'lab-m2', label: 'lab-m2', icon: <Monitor className="h-3.5 w-3.5" /> },
-  { value: 'mini-offline', label: 'mini-offline', icon: <Monitor className="h-3.5 w-3.5" />, disabled: true, disabledReason: 'Offline' },
+  {
+    value: 'mini-offline',
+    label: 'mini-offline',
+    icon: <Monitor className="h-3.5 w-3.5" />,
+    disabled: true,
+    disabledReason: 'Offline',
+  },
 ];
 
 const repoOptions: MobileInlinePickerOption[] = Array.from({ length: 12 }).map((_, i) => ({
@@ -26,7 +32,11 @@ const repoOptions: MobileInlinePickerOption[] = Array.from({ length: 12 }).map((
 
 const branchOptions: MobileInlinePickerOption[] = [
   { value: 'main', label: 'main', icon: <GitBranch className="h-3.5 w-3.5" /> },
-  { value: 'feat/x', label: 'feat/audit-mobile-coupling', icon: <GitBranch className="h-3.5 w-3.5" /> },
+  {
+    value: 'feat/x',
+    label: 'feat/audit-mobile-coupling',
+    icon: <GitBranch className="h-3.5 w-3.5" />,
+  },
 ];
 
 function StandaloneShell() {
@@ -128,7 +138,9 @@ function CoordinatorRowShell({ searchable = false }: { searchable?: boolean }) {
                   triggerContent={
                     <>
                       <Github className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                      <span className="truncate">{repoOptions.find((o) => o.value === repo)?.label}</span>
+                      <span className="truncate">
+                        {repoOptions.find((o) => o.value === repo)?.label}
+                      </span>
                     </>
                   }
                 />
diff --git a/packages/components/src/stories/MobileNewChatSheet.stories.tsx b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
index b28dc8900..75bd07d01 100644
--- a/packages/components/src/stories/MobileNewChatSheet.stories.tsx
+++ b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
@@ -22,7 +22,7 @@ import {
   MobileModelPickerLabel,
   mobileModelPickerTriggerClassName,
 } from '@/components/mobile/mobile-session-composer-footer';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 import type { AcpConfigOptionValue } from '@/components/shared/acp-selector-options';
 import { Tabs, TabsList, TabsTrigger } from '@/ui/tabs';
@@ -228,10 +228,11 @@ function MockComposer({
           </div>
           <Button
             type="button"
-            size="icon"
-            variant="ghost"
+            variant="primary"
             aria-label="Send"
-            className="ml-2 h-8 w-8 shrink-0 rounded-full bg-foreground text-background shadow-xs transition-all hover:bg-foreground/90 hover:text-background"
+            icon
+            shape="pill"
+            className="ml-2 shrink-0"
           >
             <ArrowUp className="h-5 w-5" />
           </Button>
diff --git a/packages/components/src/stories/MobileProjectSkills.stories.tsx b/packages/components/src/stories/MobileProjectSkills.stories.tsx
index 660b9167b..c243a532d 100644
--- a/packages/components/src/stories/MobileProjectSkills.stories.tsx
+++ b/packages/components/src/stories/MobileProjectSkills.stories.tsx
@@ -31,9 +31,7 @@ const LOADED_GROUPS: ProjectSkillResolvedGroup[] = [
         isSymlink: false,
         content: [
           '## When to use',
-          '',
           'Run this before opening a PR.',
-          '',
           '1. Diff the branch against `main`.',
           '2. Flag **correctness** issues first.',
         ].join('\n'),
diff --git a/packages/components/src/stories/MobileSidebarDrawer.stories.tsx b/packages/components/src/stories/MobileSidebarDrawer.stories.tsx
index 5fe1839f4..3b0ba7657 100644
--- a/packages/components/src/stories/MobileSidebarDrawer.stories.tsx
+++ b/packages/components/src/stories/MobileSidebarDrawer.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { fn } from 'storybook/test';
 
 import { MobileSidebarDrawer } from '@/components/mobile/mobile-sidebar-drawer';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 function StoryShell({
   open,
diff --git a/packages/components/src/stories/MobileWorkspaceLayout.stories.tsx b/packages/components/src/stories/MobileWorkspaceLayout.stories.tsx
index e04617679..1065c924c 100644
--- a/packages/components/src/stories/MobileWorkspaceLayout.stories.tsx
+++ b/packages/components/src/stories/MobileWorkspaceLayout.stories.tsx
@@ -6,7 +6,7 @@ import {
   getMobileMainLayoutContentClassName,
   getMobileMainLayoutRootClassName,
 } from '@/components/workspace-layout-utils';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 /* MobileWorkspaceLayout in production wires `<LoroAppSidebar>` directly,
    which depends on workspace / user / connection atoms not available in
@@ -35,7 +35,7 @@ function StoryShell({ initialOpen = false }: { initialOpen?: boolean }) {
           <div className={getMobileMainLayoutContentClassName()}>
             <div className="min-h-0 flex-1 overflow-hidden">
               <header className="flex h-14 items-center gap-2 border-b px-4">
-                <Button size="sm" variant="ghost" onClick={() => setDrawerOpen(true)}>
+                <Button variant="ghost" size="small" onClick={() => setDrawerOpen(true)}>
                   打开抽屉
                 </Button>
                 <div className="text-sm font-medium">MobileWorkspaceLayout shell</div>
@@ -43,9 +43,9 @@ function StoryShell({ initialOpen = false }: { initialOpen?: boolean }) {
               <div className="space-y-3 p-4 text-sm text-muted-foreground">
                 <p>
                   这是 <code>MobileWorkspaceLayout</code> 的视觉外壳:左侧抽屉
-                  <code>MobileSidebarDrawer</code> + 右侧内容区。在生产代码里
-                  抽屉装载的是 <code>LoroAppSidebar</code>(依赖整套 workspace /
-                  connection / sessions atoms),Storybook 里用 mock 占位。
+                  <code>MobileSidebarDrawer</code> + 右侧内容区。在生产代码里 抽屉装载的是{' '}
+                  <code>LoroAppSidebar</code>(依赖整套 workspace / connection / sessions
+                  atoms),Storybook 里用 mock 占位。
                 </p>
                 <div className="rounded-xl border border-border/40 bg-card p-3">
                   路由会把页面内容塞进这里的 ErrorBoundary。
diff --git a/packages/components/src/stories/MobileWorkspaceSwitcherSheet.stories.tsx b/packages/components/src/stories/MobileWorkspaceSwitcherSheet.stories.tsx
index 632f9474d..25e4e2363 100644
--- a/packages/components/src/stories/MobileWorkspaceSwitcherSheet.stories.tsx
+++ b/packages/components/src/stories/MobileWorkspaceSwitcherSheet.stories.tsx
@@ -6,7 +6,7 @@ import {
   MobileWorkspaceSwitcherSheet,
   type MobileWorkspaceSwitcherWorkspace,
 } from '@/components/mobile/mobile-workspace-switcher-sheet';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 const workspaces: MobileWorkspaceSwitcherWorkspace[] = [
   { id: 'lody', name: 'Lody', isActive: true },
diff --git a/packages/components/src/stories/OnboardingShell.stories.tsx b/packages/components/src/stories/OnboardingShell.stories.tsx
index 6cdc82dad..d240db92b 100644
--- a/packages/components/src/stories/OnboardingShell.stories.tsx
+++ b/packages/components/src/stories/OnboardingShell.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { OnboardingBackdrop, OnboardingShell } from '@/components/onboarding';
 
 /**
@@ -41,7 +41,7 @@ export const NarrowSingleAction: Story = {
     stepKey: 'language',
     title: 'Choose your language',
     description: 'You can switch this anytime from settings.',
-    primaryAction: <Button size="lg">Next</Button>,
+    primaryAction: <Button size="large">Next</Button>,
     children: (
       <div className="rounded-md border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
         Body slot
@@ -57,11 +57,11 @@ export const WideWithBackAndNext: Story = {
     title: 'Connect a coding agent',
     description: 'Test at least one provider so we know your credentials work.',
     secondaryAction: (
-      <Button variant="ghost" size="lg">
+      <Button variant="ghost" size="large">
         Back
       </Button>
     ),
-    primaryAction: <Button size="lg">Next</Button>,
+    primaryAction: <Button size="large">Next</Button>,
     children: (
       <div className="rounded-md border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
         Body slot — wide
@@ -77,11 +77,11 @@ export const ProjectsStep: Story = {
     title: 'Pick a project to start with',
     description: 'Add at least one project so Lody knows where to work.',
     secondaryAction: (
-      <Button variant="ghost" size="lg">
+      <Button variant="ghost" size="large">
         Back
       </Button>
     ),
-    primaryAction: <Button size="lg">Finish</Button>,
+    primaryAction: <Button size="large">Finish</Button>,
     children: (
       <div className="rounded-md border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
         Body slot
diff --git a/packages/components/src/stories/PrTabView.stories.tsx b/packages/components/src/stories/PrTabView.stories.tsx
index 7d2001df2..58597db50 100644
--- a/packages/components/src/stories/PrTabView.stories.tsx
+++ b/packages/components/src/stories/PrTabView.stories.tsx
@@ -376,20 +376,15 @@ export const LongBody: Story = {
         ...basePr,
         body: [
           '## Summary',
-          '',
           'Wire the PR badge into a new in-app **PR tab** so reviewers never leave the app.',
-          '',
           '### Fetches',
-          '',
           '- Title / body / branches',
           '- Review threads (reuse existing component)',
           '- Issue comments',
           '- `check-runs` summary',
-          '',
           '```ts',
           "const result = await githubFetchPullRequestDetails(token, 'loro-dev/lody', 42);",
           '```',
-          '',
           '> Reviewers can click a review thread to open the corresponding line in the diff viewer.',
         ].join('\n'),
       },
diff --git a/packages/components/src/stories/ProjectSkillsTab.stories.tsx b/packages/components/src/stories/ProjectSkillsTab.stories.tsx
index 65620e708..5add7b764 100644
--- a/packages/components/src/stories/ProjectSkillsTab.stories.tsx
+++ b/packages/components/src/stories/ProjectSkillsTab.stories.tsx
@@ -28,15 +28,11 @@ const LOADED_GROUPS: ProjectSkillResolvedGroup[] = [
         isSymlink: false,
         content: [
           '## When to use',
-          '',
           'Run this before opening a PR to catch correctness bugs and tidy up.',
-          '',
           '### Steps',
-          '',
           '1. Diff the branch against `main`.',
           '2. Flag **correctness** issues first, then reuse/simplification.',
           '3. Suggest concrete fixes with `code` snippets.',
-          '',
           '> Tip: keep findings high-signal — no nitpicks.',
         ].join('\n'),
       },
diff --git a/packages/components/src/stories/ReviewAgentSetupDialog.stories.tsx b/packages/components/src/stories/ReviewAgentSetupDialog.stories.tsx
index 13b186af4..8ad342997 100644
--- a/packages/components/src/stories/ReviewAgentSetupDialog.stories.tsx
+++ b/packages/components/src/stories/ReviewAgentSetupDialog.stories.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ReviewAgentSetupDialog } from '@/components/sessions/auto-review-info';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 function Harness() {
   const [open, setOpen] = useState(true);
diff --git a/packages/components/src/stories/SessionChatSearch.stories.tsx b/packages/components/src/stories/SessionChatSearch.stories.tsx
index 35575ef2a..241190ca6 100644
--- a/packages/components/src/stories/SessionChatSearch.stories.tsx
+++ b/packages/components/src/stories/SessionChatSearch.stories.tsx
@@ -79,7 +79,6 @@ const searchMessages: SessionHistoryParsed[] = [
         type: 'text',
         text: [
           'I indexed the session history and highlighted every visible `rg` match.',
-          '',
           '- Search results are occurrence-based.',
           '- Only conversation text is indexed; the tool call below is not searchable.',
         ].join('\n'),
diff --git a/packages/components/src/stories/SessionConversationPage.stories.tsx b/packages/components/src/stories/SessionConversationPage.stories.tsx
index 8c29f7579..2a0800941 100644
--- a/packages/components/src/stories/SessionConversationPage.stories.tsx
+++ b/packages/components/src/stories/SessionConversationPage.stories.tsx
@@ -156,14 +156,11 @@ const STREAM_CHUNKS = Array.from({ length: STREAM_CHUNK_TOTAL }, (_, index) => {
   const item = index + 1;
   if (item % 12 === 0) {
     return [
-      '',
       `### Render checkpoint ${item / 12}`,
-      '',
       '| Surface | Observation |',
       '| --- | --- |',
       `| Message stream | chunk ${item} appended |`,
       '| Working status | indicator remains active |',
-      '',
     ].join('\n');
   }
   if (item % 5 === 0) {
@@ -400,11 +397,9 @@ const baseMessages = (): SessionHistoryParsed[] => [
         type: 'text',
         text: [
           'I found the production page pieces:',
-          '',
           '- `SessionTabBar` owns the thread tabs.',
           '- `SessionChatStreamView` renders the conversation.',
           '- `SessionChatInputArea` owns the composer and mode/model controls.',
-          '',
           'I will keep the story wired to those components instead of making a separate mock page.',
         ].join('\n'),
       },
@@ -546,7 +541,6 @@ const buildWorkingHistory = (streamChunkCount: number): SessionHistoryParsed[] =
             type: 'text',
             text: [
               `Synthetic completed turn ${turn}.`,
-              '',
               '- Read the current message projection.',
               '- Compared the virtual rows and sticky-scroll state.',
               '- Kept this fixture synthetic so it is safe to commit.',
@@ -585,7 +579,6 @@ const buildWorkingHistory = (streamChunkCount: number): SessionHistoryParsed[] =
           type: 'text',
           text: [
             'I am reproducing the streaming render workload in the complete conversation page.',
-            '',
             'The Story keeps the real message list, composer, info bar, tab bar, and working indicator mounted.',
             ...STREAM_CHUNKS.slice(0, streamChunkCount),
           ].join('\n'),
@@ -683,19 +676,14 @@ const questionToolCall = (): MessageContent => ({
 
 const PLAN_MARKDOWN = [
   '## Goal',
-  '',
   'Give every framed block in a turn the same panel, and put every row on one left rail.',
-  '',
   '## Steps',
-  '',
   '1. Move the frame / header / body tokens into `conversation-panel.ts` so the',
   '   header always carries the raised fill and the body never does.',
   '2. Drop the per-shell horizontal pads (`ToolCallCard`, attachments, the',
   '   permission card) so top-level rows share the column edge.',
   '3. Collapse a settled permission to one line; keep the pending card actionable.',
-  '',
   '## Risk',
-  '',
   'The terminal paints its own VS Code surface, so its header has to step off',
   '**that** colour rather than the frame.',
 ].join('\n');
@@ -834,7 +822,6 @@ const buildPlanHistory = (): SessionHistoryParsed[] => [
         type: 'text',
         text: [
           'Every framed block now uses one panel: the header carries the raised fill and the body sits on the frame.',
-          '',
           'Measured against the column edge, all top-level rows start at 0 and the header step is +12 in dark / -13 in light.',
         ].join('\n'),
       },
diff --git a/packages/components/src/stories/SessionForkDestinationPopover.stories.tsx b/packages/components/src/stories/SessionForkDestinationPopover.stories.tsx
index 5640eb1d6..32704ff54 100644
--- a/packages/components/src/stories/SessionForkDestinationPopover.stories.tsx
+++ b/packages/components/src/stories/SessionForkDestinationPopover.stories.tsx
@@ -6,7 +6,7 @@ import {
   SessionForkDestinationPopover,
   type SessionForkWorktreeAvailability,
 } from '@/components/sessions/session-fork-destination-menu';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 function ForkTrigger({
   worktreeAvailability,
@@ -24,13 +24,7 @@ function ForkTrigger({
         worktreeAvailability={worktreeAvailability}
         onSelect={(destination) => setLastChoice(destination)}
       >
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7 text-muted-foreground hover:bg-hover hover:text-foreground"
-          aria-label="Fork session"
-        >
+        <Button type="button" variant="ghost" aria-label="Fork session" size="small" icon>
           <GitFork className="h-3.5 w-3.5" />
         </Button>
       </SessionForkDestinationPopover>
diff --git a/packages/components/src/stories/SessionSidePanelTabBar.stories.tsx b/packages/components/src/stories/SessionSidePanelTabBar.stories.tsx
index cc6138e6f..bbae9c80f 100644
--- a/packages/components/src/stories/SessionSidePanelTabBar.stories.tsx
+++ b/packages/components/src/stories/SessionSidePanelTabBar.stories.tsx
@@ -8,7 +8,7 @@ import {
   type SessionSidePanelOption,
   type SessionSidePanelTabItem,
 } from '@/components/sessions/session-side-panel-tab-bar';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 const ALL_PANELS: SessionSidePanelOption[] = [
   { id: 'side-session', label: 'Side Chat', kind: 'session' },
@@ -92,7 +92,7 @@ function SidePanelTabBarStory() {
           addPanelLabel="Add panel"
           closeTabLabel={(label) => `Close ${label}`}
           endSlot={
-            <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
+            <Button variant="ghost" size="small" icon>
               <PanelRight className="h-4 w-4" />
             </Button>
           }
@@ -143,7 +143,7 @@ export const EmptyState: Story = {
           addPanelLabel="Add panel"
           closeTabLabel={(label) => `Close ${label}`}
           endSlot={
-            <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
+            <Button variant="ghost" size="small" icon>
               <PanelRight className="h-4 w-4" />
             </Button>
           }
diff --git a/packages/components/src/stories/SettingsHeader.stories.tsx b/packages/components/src/stories/SettingsHeader.stories.tsx
index 1e2b39176..4d12ea37f 100644
--- a/packages/components/src/stories/SettingsHeader.stories.tsx
+++ b/packages/components/src/stories/SettingsHeader.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { SettingsHeader } from '@/components/settings/settings-header';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { Save } from 'lucide-react';
 
 /**
@@ -49,7 +49,7 @@ export const WithActions: Story = {
   args: {
     title: 'Profile Settings',
     actions: (
-      <Button size="sm" variant="ghost">
+      <Button variant="ghost" size="small">
         <Save className="h-4 w-4" />
       </Button>
     ),
@@ -109,7 +109,7 @@ export const DarkMode: Story = {
   args: {
     title: 'General Settings',
     actions: (
-      <Button size="sm" variant="ghost">
+      <Button variant="ghost" size="small">
         <Save className="h-4 w-4" />
       </Button>
     ),
diff --git a/packages/components/src/stories/SkillMarkdownFallback.stories.tsx b/packages/components/src/stories/SkillMarkdownFallback.stories.tsx
index fa69039a5..ce85fb734 100644
--- a/packages/components/src/stories/SkillMarkdownFallback.stories.tsx
+++ b/packages/components/src/stories/SkillMarkdownFallback.stories.tsx
@@ -3,31 +3,21 @@ import { SkillMarkdownFallback } from '@/components/settings/skill-markdown';
 
 const CONTENT = [
   '# Konsta UI Design Guide',
-  '',
   'Build **pixel-perfect** iOS and Material Design apps with `Konsta UI`.',
-  '',
   '## When to Use This Skill',
-  '',
   '- User wants native-looking UI without Ionic',
   '- User asks about *Konsta UI*',
   '- User is using React/Vue/Svelte',
-  '',
   '### Steps',
-  '',
   '1. Install the package',
   '2. Wrap the app in `KonstaProvider`',
   '3. Use the components',
-  '',
   '> Tip: see the [docs](https://konstaui.com) for the full component list.',
-  '',
   '```tsx',
   'import { App, Page } from "konsta/react";',
-  '',
   'export default () => <App theme="ios"><Page>Hello</Page></App>;',
   '```',
-  '',
   '---',
-  '',
   'That is the whole guide.',
 ].join('\n');
 
diff --git a/packages/components/src/stories/Switch.stories.tsx b/packages/components/src/stories/Switch.stories.tsx
index 79e51fa0a..59b12a794 100644
--- a/packages/components/src/stories/Switch.stories.tsx
+++ b/packages/components/src/stories/Switch.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect } from 'react';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { useTheme } from '@/theme-provider';
-import { Label } from '@/ui/label';
+import { Field as UiField } from '@lody/ui/field';
 
 const meta = {
   title: 'UI/Switch',
@@ -27,19 +27,19 @@ function SwitchShowcase({ mode }: { mode: 'dark' | 'light' }) {
       <h2 className="text-sm font-semibold">Lody {mode}</h2>
       <div className="space-y-4">
         <div className="flex items-center justify-between">
-          <Label className="text-sm">Disabled toggle (off)</Label>
+          <UiField.Label className="text-sm">Disabled toggle (off)</UiField.Label>
           <Switch />
         </div>
         <div className="flex items-center justify-between">
-          <Label className="text-sm">Enabled toggle (on)</Label>
+          <UiField.Label className="text-sm">Enabled toggle (on)</UiField.Label>
           <Switch defaultChecked />
         </div>
         <div className="flex items-center justify-between">
-          <Label className="text-sm text-muted-foreground">Disabled state</Label>
+          <UiField.Label className="text-sm text-muted-foreground">Disabled state</UiField.Label>
           <Switch disabled />
         </div>
         <div className="flex items-center justify-between">
-          <Label className="text-sm text-muted-foreground">Disabled checked</Label>
+          <UiField.Label className="text-sm text-muted-foreground">Disabled checked</UiField.Label>
           <Switch disabled defaultChecked />
         </div>
       </div>
diff --git a/packages/components/src/stories/TaskTabBar.stories.tsx b/packages/components/src/stories/TaskTabBar.stories.tsx
index d7ec807f3..62b84dc48 100644
--- a/packages/components/src/stories/TaskTabBar.stories.tsx
+++ b/packages/components/src/stories/TaskTabBar.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { Plus } from 'lucide-react';
 import { TaskTabBar, type TaskTabItem } from '@/components/tasks/task-tab-bar';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 const meta = {
   title: 'Tasks/TaskTabBar',
@@ -50,7 +50,7 @@ function InteractiveBar({
       }}
       rightSlot={
         activeTaskId === null ? (
-          <Button size="sm">
+          <Button size="small">
             <Plus className="h-4 w-4" />
             New task
           </Button>
diff --git a/packages/components/src/stories/TerminalComponent.stories.tsx b/packages/components/src/stories/TerminalComponent.stories.tsx
index 7226ef81f..471801559 100644
--- a/packages/components/src/stories/TerminalComponent.stories.tsx
+++ b/packages/components/src/stories/TerminalComponent.stories.tsx
@@ -49,7 +49,6 @@ export const WithAnsi: Story = {
       '\u001b[90m[info]\u001b[0m Starting Storybook...',
       '\u001b[32m[success]\u001b[0m Local: http://localhost:6006',
       '\u001b[33m[warn]\u001b[0m Some warnings may be expected in dev.',
-      '',
       '\u001b[31m[error]\u001b[0m Example error output for color rendering.',
     ].join('\n'),
   },
diff --git a/packages/components/src/stories/Toaster.stories.tsx b/packages/components/src/stories/Toaster.stories.tsx
index 7adbca3c1..de19734fc 100644
--- a/packages/components/src/stories/Toaster.stories.tsx
+++ b/packages/components/src/stories/Toaster.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { toast } from 'sonner';
 import { Toaster } from '@/ui/sonner';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 /**
  * The global toast surface. Toasts render neutral (no accent color) with a
@@ -19,27 +19,19 @@ const meta: Meta<typeof Toaster> = {
     <div className="flex min-h-[60vh] flex-col items-start gap-3 p-8">
       <Toaster {...args} />
       <Button
-        variant="outline"
-        onClick={() =>
-          toast.success('Base branch name copied to clipboard')
-        }
+        variant="secondary"
+        onClick={() => toast.success('Base branch name copied to clipboard')}
       >
         Show success toast
       </Button>
-      <Button
-        variant="outline"
-        onClick={() => toast.info('Issue URL copied to clipboard')}
-      >
+      <Button variant="secondary" onClick={() => toast.info('Issue URL copied to clipboard')}>
         Show info toast
       </Button>
-      <Button
-        variant="outline"
-        onClick={() => toast.error('Unable to copy link')}
-      >
+      <Button variant="secondary" onClick={() => toast.error('Unable to copy link')}>
         Show error toast
       </Button>
       <Button
-        variant="outline"
+        variant="secondary"
         onClick={() =>
           toast('Session updated', {
             description: 'Your changes were saved to the workspace.',
@@ -49,7 +41,7 @@ const meta: Meta<typeof Toaster> = {
         Show toast with description
       </Button>
       <Button
-        variant="outline"
+        variant="secondary"
         onClick={() =>
           toast.success('cursor connected successfully.', {
             description:
diff --git a/packages/components/src/stories/UiGallery.stories.tsx b/packages/components/src/stories/UiGallery.stories.tsx
new file mode 100644
index 000000000..b9abbd76b
--- /dev/null
+++ b/packages/components/src/stories/UiGallery.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { UiGallery } from '@lody/ui/gallery';
+
+const meta = {
+  title: 'Design System/UI Gallery',
+  component: UiGallery,
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof UiGallery>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The token board: every `@lody/ui` token and Button state, rendered twice so
+ * Lody Light and Vesper sit side by side regardless of the Storybook theme.
+ */
+export const TokenBoard: Story = {
+  args: { palettes: 'both' },
+};
+
+/** One palette at full width, for reading a surface the way the app renders it. */
+export const LodyLight: Story = {
+  args: { palettes: 'light' },
+};
+
+export const Vesper: Story = {
+  args: { palettes: 'dark' },
+};
+
+/**
+ * No forced theme: the board follows the Storybook theme toolbar, which is how
+ * a product surface sees the tokens.
+ */
+export const Ambient: Story = {
+  args: { palettes: 'ambient' },
+};
diff --git a/packages/components/src/stories/UpdateChangelogDialog.stories.tsx b/packages/components/src/stories/UpdateChangelogDialog.stories.tsx
index 2931297fc..60fa9023c 100644
--- a/packages/components/src/stories/UpdateChangelogDialog.stories.tsx
+++ b/packages/components/src/stories/UpdateChangelogDialog.stories.tsx
@@ -4,12 +4,9 @@ import { UpdateChangelogDialog } from '@/components/update-changelog-dialog';
 
 const RELEASE_NOTES = [
   '## Highlights',
-  '',
   '- Sessions reconnect faster after the machine sleeps',
   '- The file tree keeps its scroll position when a session updates',
-  '',
   '### Fixes',
-  '',
   '- Fixed a crash when opening a diff for a deleted file',
   '- Fixed duplicated notifications on Windows',
 ].join('\n');
diff --git a/packages/components/src/stories/VSCodeThemeProbe.stories.tsx b/packages/components/src/stories/VSCodeThemeProbe.stories.tsx
index 473f284a3..8408b8f79 100644
--- a/packages/components/src/stories/VSCodeThemeProbe.stories.tsx
+++ b/packages/components/src/stories/VSCodeThemeProbe.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MarkdownRenderer } from '@/components/ai-gui/markdown-renderer';
 import { TerminalComponent } from '@/components/ai-gui/terminal-component';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
+import { Select } from '@lody/ui/select';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
 import { DiffViewer } from '@/ui/diff-viewer/diff-viewer';
 import { File as FileViewer, type FileProps } from '@pierre/diffs/react';
 import {
@@ -25,7 +25,6 @@ type Story = StoryObj<typeof meta>;
 
 const markdownSample = [
   'Markdown code path:',
-  '',
   '```ts',
   'const greet = (name: string) => {',
   '  return `Hello, ${name}`;',
@@ -68,12 +67,17 @@ const fileViewerFile: FileProps<undefined>['file'] = {
     '  if (status === "error") {',
     '    return { label: "Needs attention", tone: "danger" };',
     '  }',
-    '',
     '  return { label: "Ready", tone: "success" };',
     '}',
   ].join('\n'),
 };
 
+const SHELL_THEMES = [
+  { value: 'light', label: 'Light shell' },
+  { value: 'dark', label: 'Dark shell' },
+  { value: 'system', label: 'System shell' },
+];
+
 function VSCodeThemeProbe() {
   const { theme, setTheme } = useTheme();
   const resolvedTheme = useResolvedTheme();
@@ -91,16 +95,22 @@ function VSCodeThemeProbe() {
             </p>
           </div>
           <div>
-            <Select value={theme} onValueChange={(value) => setTheme(value as typeof theme)}>
-              <SelectTrigger className="w-[150px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="light">Light shell</SelectItem>
-                <SelectItem value="dark">Dark shell</SelectItem>
-                <SelectItem value="system">System shell</SelectItem>
-              </SelectContent>
-            </Select>
+            <Select.Root
+              items={SHELL_THEMES}
+              value={theme}
+              onValueChange={(value) => setTheme(value as typeof theme)}
+            >
+              <Select.Trigger className="w-[150px]">
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Content>
+                {SHELL_THEMES.map((option) => (
+                  <Select.Item key={option.value} value={option.value}>
+                    {option.label}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Root>
           </div>
         </div>
       </header>
@@ -117,7 +127,7 @@ function VSCodeThemeProbe() {
           <section className="space-y-3 border border-border bg-background p-4">
             <div className="flex flex-wrap items-center gap-2">
               <Button>Primary action</Button>
-              <Button variant="outline">Outline action</Button>
+              <Button variant="secondary">Outline action</Button>
               <Button variant="secondary">Secondary action</Button>
             </div>
             <Input placeholder="Focus border / input background" />
diff --git a/packages/components/src/stories/VisualAnnotationCommentsOverlay.stories.tsx b/packages/components/src/stories/VisualAnnotationCommentsOverlay.stories.tsx
index 75d159946..6e6bfd73c 100644
--- a/packages/components/src/stories/VisualAnnotationCommentsOverlay.stories.tsx
+++ b/packages/components/src/stories/VisualAnnotationCommentsOverlay.stories.tsx
@@ -8,7 +8,7 @@ import {
   type PreviewVisualComment,
 } from '@lody/shared/preview-comment-types';
 import { VisualAnnotationCommentsOverlay } from '@/components/preview/visual-annotation-comments-overlay';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 const overlayDevices = [
   { id: 'desktop', label: 'Desktop', width: 960, height: 620 },
@@ -254,15 +254,15 @@ function VisualAnnotationCommentsOverlayStory() {
             </div>
             <Button
               type="button"
-              size="sm"
-              variant="outline"
+              variant="secondary"
+              size="small"
               disabled={stagedCommentIds.length === 0}
               onClick={submitStagedComments}
             >
               <SendHorizontal className="h-3.5 w-3.5" />
               Submit staged
             </Button>
-            <Button type="button" size="sm" variant="outline" onClick={reset}>
+            <Button type="button" variant="secondary" size="small" onClick={reset}>
               <RefreshCw className="h-3.5 w-3.5" />
               Reset
             </Button>
diff --git a/packages/components/src/stories/VisualAnnotationInspector.stories.tsx b/packages/components/src/stories/VisualAnnotationInspector.stories.tsx
index da294fb28..ac0e0f1db 100644
--- a/packages/components/src/stories/VisualAnnotationInspector.stories.tsx
+++ b/packages/components/src/stories/VisualAnnotationInspector.stories.tsx
@@ -25,8 +25,8 @@ import type {
 } from '@lody/shared/visual-annotation-inspector';
 import { VisualAnnotationCommentsOverlay } from '@/components/preview/visual-annotation-comments-overlay';
 import { VisualAnnotationReferenceCard } from '@/components/ai-gui/visual-annotation-reference-card';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 
 const storySessionId = 'session-storybook-visual-annotation' as SessionId;
 const storyTurnId = 'turn-storybook-visual-annotation';
@@ -693,8 +693,8 @@ function VisualAnnotationInspectorHarness() {
             </div>
             <Button
               type="button"
-              size="sm"
-              variant={annotationMode ? 'default' : 'outline'}
+              variant={annotationMode ? 'primary' : 'secondary'}
+              size="small"
               onClick={() => {
                 const next = !annotationMode;
                 setAnnotationMode(next);
@@ -707,10 +707,20 @@ function VisualAnnotationInspectorHarness() {
           </div>
 
           <div className="grid grid-cols-2 gap-2">
-            <Button type="button" size="sm" variant="outline" onClick={() => scrollPreviewTo(0)}>
+            <Button
+              type="button"
+              variant="secondary"
+              size="small"
+              onClick={() => scrollPreviewTo(0)}
+            >
               Scroll top
             </Button>
-            <Button type="button" size="sm" variant="outline" onClick={() => scrollPreviewTo(760)}>
+            <Button
+              type="button"
+              variant="secondary"
+              size="small"
+              onClick={() => scrollPreviewTo(760)}
+            >
               Below fold
             </Button>
           </div>
@@ -742,7 +752,7 @@ function VisualAnnotationInspectorHarness() {
                   placeholder="Write a comment for this selected target..."
                   className="min-h-20 bg-white text-sm"
                 />
-                <Button type="button" size="sm" className="w-full" onClick={completeComment}>
+                <Button type="button" size="small" className="w-full" onClick={completeComment}>
                   <Check className="h-3.5 w-3.5" />
                   Add comment
                 </Button>
@@ -813,15 +823,15 @@ function VisualAnnotationInspectorHarness() {
             <div className="mt-2 grid grid-cols-2 gap-2">
               <Button
                 type="button"
-                size="sm"
-                variant="outline"
+                variant="secondary"
+                size="small"
                 disabled={pendingCount === 0}
                 onClick={stagePending}
               >
                 <SendHorizontal className="h-3.5 w-3.5" />
                 Stage all
               </Button>
-              <Button type="button" size="sm" variant="outline" onClick={resetHarness}>
+              <Button type="button" variant="secondary" size="small" onClick={resetHarness}>
                 {comments.length > 0 || selectedPayload ? (
                   <Trash2 className="h-3.5 w-3.5" />
                 ) : (
@@ -854,9 +864,8 @@ function VisualAnnotationInspectorHarness() {
                       />
                       <Button
                         type="button"
-                        size="icon"
                         variant="ghost"
-                        className="h-8 w-8"
+                        icon
                         onClick={() => removeStagedReference(reference.commentId)}
                       >
                         <X className="h-3.5 w-3.5" />
@@ -865,14 +874,14 @@ function VisualAnnotationInspectorHarness() {
                   ))}
                 </div>
                 <div className="grid grid-cols-2 gap-2">
-                  <Button type="button" size="sm" onClick={sendStagedReferences}>
+                  <Button type="button" size="small" onClick={sendStagedReferences}>
                     <SendHorizontal className="h-3.5 w-3.5" />
                     Send
                   </Button>
                   <Button
                     type="button"
-                    size="sm"
-                    variant="outline"
+                    variant="secondary"
+                    size="small"
                     onClick={() => setStagedReferences([])}
                   >
                     Clear
diff --git a/packages/components/src/stories/ZoomableImageViewer.stories.tsx b/packages/components/src/stories/ZoomableImageViewer.stories.tsx
index 351d8e095..f7058b7dc 100644
--- a/packages/components/src/stories/ZoomableImageViewer.stories.tsx
+++ b/packages/components/src/stories/ZoomableImageViewer.stories.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ZoomableImageViewer } from '@/components/shared/zoomable-image-viewer';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 
 /**
  * The one full-screen image viewer in the app. Chat image blocks
diff --git a/packages/components/src/tailwind/index.css b/packages/components/src/tailwind/index.css
index 6ff55678d..f00f34482 100644
--- a/packages/components/src/tailwind/index.css
+++ b/packages/components/src/tailwind/index.css
@@ -1,3 +1,4 @@
+@layer theme, base, stylex, components, utilities;
 @import './fonts.css';
 @import 'katex/dist/katex.min.css';
 @import 'tw-animate-css';
diff --git a/packages/components/src/theme-provider.tsx b/packages/components/src/theme-provider.tsx
index de1804f5b..08826c930 100644
--- a/packages/components/src/theme-provider.tsx
+++ b/packages/components/src/theme-provider.tsx
@@ -22,7 +22,11 @@ import {
   type LodyResolvedVSCodeTheme,
 } from '@/lib/vscode-theme';
 
+import { forcedThemeClassNames } from '@lody/ui/theme';
+
 export type Theme = 'dark' | 'light' | 'system';
+
+const FORCED_STYLEX_CLASSES = [...forcedThemeClassNames('light'), ...forcedThemeClassNames('dark')];
 export type ResolvedTheme = 'light' | 'dark';
 
 export const THEME_CYCLE_ORDER: readonly Theme[] = ['light', 'dark', 'system'];
@@ -144,8 +148,9 @@ function LodyThemeProvider({
   useIsomorphicLayoutEffect(() => {
     const root = window.document.documentElement;
 
-    root.classList.remove('light', 'dark');
+    root.classList.remove('light', 'dark', ...FORCED_STYLEX_CLASSES);
     root.classList.add(resolvedTheme);
+    if (theme !== 'system') root.classList.add(...forcedThemeClassNames(resolvedTheme));
     root.style.colorScheme = theme === 'system' ? 'light dark' : resolvedTheme;
   }, [resolvedTheme, theme]);
 
diff --git a/packages/components/src/ui/accordion.tsx b/packages/components/src/ui/accordion.tsx
deleted file mode 100644
index f0fa43b6b..000000000
--- a/packages/components/src/ui/accordion.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-));
-AccordionItem.displayName = 'AccordionItem';
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-100" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/components/src/ui/alert-dialog.tsx b/packages/components/src/ui/alert-dialog.tsx
index 3dc3c40c8..6b5e19838 100644
--- a/packages/components/src/ui/alert-dialog.tsx
+++ b/packages/components/src/ui/alert-dialog.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
 import { cn } from '@/lib/utils';
-import { buttonVariants } from './button';
+import { Button, type ButtonVariant } from '@lody/ui/button';
 import { WindowDragStrip } from '@/ui/window-drag-region';
 
 function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
@@ -108,20 +108,30 @@ function AlertDialogDescription({
 
 function AlertDialogAction({
   className,
+  children,
+  variant,
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & { variant?: ButtonVariant }) {
+  return (
+    <AlertDialogPrimitive.Action asChild {...props}>
+      <Button variant={variant} className={className}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Action>
+  );
 }
 
 function AlertDialogCancel({
   className,
+  children,
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: 'outline' }), className)}
-      {...props}
-    />
+    <AlertDialogPrimitive.Cancel asChild {...props}>
+      <Button variant="secondary" className={className}>
+        {children}
+      </Button>
+    </AlertDialogPrimitive.Cancel>
   );
 }
 
diff --git a/packages/components/src/ui/alert.tsx b/packages/components/src/ui/alert.tsx
deleted file mode 100644
index 94bb68ac2..000000000
--- a/packages/components/src/ui/alert.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
-      },
-    },
-    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('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Alert, AlertTitle, AlertDescription };
diff --git a/packages/components/src/ui/avatar.tsx b/packages/components/src/ui/avatar.tsx
deleted file mode 100644
index 4403d172f..000000000
--- a/packages/components/src/ui/avatar.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-
-import { cn } from '@/lib/utils';
-
-function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn('aspect-square size-full', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarFallback, AvatarImage };
diff --git a/packages/components/src/ui/badge.tsx b/packages/components/src/ui/badge.tsx
deleted file mode 100644
index c3868618a..000000000
--- a/packages/components/src/ui/badge.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80',
-        outline: 'text-foreground',
-        success:
-          'border-status-success/20 bg-status-success/12 text-status-success shadow-sm hover:bg-status-success/18',
-        warning:
-          'border-status-warning/20 bg-status-warning/12 text-status-warning shadow-sm hover:bg-status-warning/18',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };
diff --git a/packages/components/src/ui/button.tsx b/packages/components/src/ui/button.tsx
deleted file mode 100644
index 780ea971b..000000000
--- a/packages/components/src/ui/button.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-']):not([class*='h-']):not([class*='w-'])]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow-sm hover:bg-[hsl(var(--button-hover))]',
-        destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
-        outline:
-          'border border-input-border bg-background shadow-xs hover:bg-hover hover:text-hover-foreground',
-        secondary:
-          'bg-[hsl(var(--button-secondary))] text-[hsl(var(--button-secondary-foreground))] shadow-xs hover:bg-[hsl(var(--button-secondary-hover))]',
-        ghost: 'hover:bg-hover hover:text-hover-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
diff --git a/packages/components/src/ui/calendar.tsx b/packages/components/src/ui/calendar.tsx
index 9381d52d8..be269f773 100644
--- a/packages/components/src/ui/calendar.tsx
+++ b/packages/components/src/ui/calendar.tsx
@@ -3,7 +3,7 @@ import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react
 import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 
 import { cn } from '@/lib/utils';
-import { Button, buttonVariants } from './button';
+import { Button } from '@lody/ui/button';
 
 function Calendar({
   className,
@@ -18,6 +18,10 @@ function Calendar({
   buttonVariant?: React.ComponentProps<typeof Button>['variant'];
 }) {
   const defaultClassNames = getDefaultClassNames();
+  const navButtonClassName = cn(
+    'inline-flex items-center justify-center rounded-md transition-colors hover:bg-hover',
+    buttonVariant === 'secondary' && 'border border-input-border bg-background shadow-xs'
+  );
 
   return (
     <DayPicker
@@ -42,12 +46,12 @@ function Calendar({
           defaultClassNames.nav
         ),
         button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
+          navButtonClassName,
           'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
           defaultClassNames.button_previous
         ),
         button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
+          navButtonClassName,
           'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
           defaultClassNames.button_next
         ),
@@ -155,7 +159,6 @@ function CalendarDayButton({
     <Button
       ref={ref}
       variant="ghost"
-      size="icon"
       data-day={day.date.toLocaleDateString()}
       data-selected-single={
         modifiers.selected &&
@@ -166,8 +169,9 @@ function CalendarDayButton({
       data-range-start={modifiers.range_start}
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
+      icon
       className={cn(
-        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-selection data-[range-middle=true]:text-selection-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-hover-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-selection data-[range-middle=true]:text-selection-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-hover-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
         defaultClassNames.day,
         className
       )}
diff --git a/packages/components/src/ui/checkbox.tsx b/packages/components/src/ui/checkbox.tsx
deleted file mode 100644
index 26a584959..000000000
--- a/packages/components/src/ui/checkbox.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon, MinusIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-function Checkbox({
-  className,
-  checked,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      checked={checked}
-      className={cn(
-        'peer border-input-border dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        {checked === 'indeterminate' ? (
-          <MinusIcon className="size-3.5" />
-        ) : (
-          <CheckIcon className="size-3.5" />
-        )}
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };
diff --git a/packages/components/src/ui/collapsible-card.tsx b/packages/components/src/ui/collapsible-card.tsx
index 26a453c18..499f20bbc 100644
--- a/packages/components/src/ui/collapsible-card.tsx
+++ b/packages/components/src/ui/collapsible-card.tsx
@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 
 import { ChevronDown } from 'lucide-react';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { CopyButton } from './copy-button';
 import { clamp } from '@/lib/clamp';
 
@@ -67,12 +67,7 @@ const CollapsibleCardHeader: React.FC<CollapsibleCardHeaderProps> = ({
           className
         )}
       >
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-6 w-6 hover:bg-transparent"
-          aria-label="Toggle section"
-        >
+        <Button variant="ghost" aria-label="Toggle section" size="mini" icon>
           <ChevronDown
             className="h-4 w-4 transition-transform duration-200 [[data-state=closed]_&]:-rotate-90"
             aria-hidden="true"
diff --git a/packages/components/src/ui/collapsible.tsx b/packages/components/src/ui/collapsible.tsx
deleted file mode 100644
index 9605c4e41..000000000
--- a/packages/components/src/ui/collapsible.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-
-const Collapsible = CollapsiblePrimitive.Root;
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/packages/components/src/ui/copy-button.tsx b/packages/components/src/ui/copy-button.tsx
index 405c8c65c..deb715f34 100644
--- a/packages/components/src/ui/copy-button.tsx
+++ b/packages/components/src/ui/copy-button.tsx
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 
 import { Check, Copy } from 'lucide-react';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 
 export const CopyButton = ({
@@ -29,10 +29,10 @@ export const CopyButton = ({
   return (
     <Button
       variant="ghost"
-      size="sm"
       data-state={copied ? 'copied' : 'not-copied'}
+      size="small"
       {...props}
-      className={cn('transition-opacity relative shrink-0', className)}
+      className={cn('relative shrink-0', className)}
       onClick={handleCopy}
     >
       <span className="sr-only">Copy</span>
diff --git a/packages/components/src/ui/dialog.tsx b/packages/components/src/ui/dialog.tsx
index 616dd7294..e4b8ac49d 100644
--- a/packages/components/src/ui/dialog.tsx
+++ b/packages/components/src/ui/dialog.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
+import { PopupContainerProvider } from '@lody/ui/popup-container';
 
 import { isImeComposingNativeKeyboardEvent } from '@/lib/ime';
 import { cn } from '@/lib/utils';
@@ -56,6 +57,28 @@ const dialogBaseClasses =
 const dialogAnimationClasses =
   'duration-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
 
+/**
+ * Mounts the `@lody/ui` popups inside a dialog rather than on the body.
+ *
+ * Radix's dialog traps focus in its content subtree and locks scrolling outside
+ * it, and it does that by DOM position: a Select or Combobox list portalled to
+ * the body is "outside" the dialog, so focus is dragged back to the panel the
+ * moment the list opens and the wheel never reaches the list. Naming the panel
+ * as the container puts the list back inside the subtree the dialog is guarding.
+ */
+function useDialogPopupContainer<T extends HTMLElement>(forwarded: React.Ref<T>) {
+  const contentRef = React.useRef<T | null>(null);
+  const ref = React.useCallback(
+    (node: T | null) => {
+      contentRef.current = node;
+      if (typeof forwarded === 'function') forwarded(node);
+      else if (forwarded) (forwarded as React.MutableRefObject<T | null>).current = node;
+    },
+    [forwarded]
+  );
+  return { ref, container: contentRef };
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
@@ -65,30 +88,33 @@ const DialogContent = React.forwardRef<
     /** Skip the enter/exit animation so the dialog appears instantly. */
     noAnimation?: boolean;
   }
->(({ className, overlayClassName, noAnimation, children, onEscapeKeyDown, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay className={overlayClassName} noAnimation={noAnimation} />
-    <DialogPrimitive.Content
-      ref={ref}
-      data-lody-dialog-content=""
-      className={cn(dialogBaseClasses, !noAnimation && dialogAnimationClasses, className)}
-      onEscapeKeyDown={(event) => {
-        if (isImeComposingNativeKeyboardEvent(event)) {
-          event.preventDefault();
-          return;
-        }
-        onEscapeKeyDown?.(event);
-      }}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-hover data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+>(({ className, overlayClassName, noAnimation, children, onEscapeKeyDown, ...props }, ref) => {
+  const { ref: contentRef, container } = useDialogPopupContainer(ref);
+  return (
+    <DialogPortal>
+      <DialogOverlay className={overlayClassName} noAnimation={noAnimation} />
+      <DialogPrimitive.Content
+        ref={contentRef}
+        data-lody-dialog-content=""
+        className={cn(dialogBaseClasses, !noAnimation && dialogAnimationClasses, className)}
+        onEscapeKeyDown={(event) => {
+          if (isImeComposingNativeKeyboardEvent(event)) {
+            event.preventDefault();
+            return;
+          }
+          onEscapeKeyDown?.(event);
+        }}
+        {...props}
+      >
+        <PopupContainerProvider container={container}>{children}</PopupContainerProvider>
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-hover data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogContentWithoutClose = React.forwardRef<
@@ -99,26 +125,29 @@ const DialogContentWithoutClose = React.forwardRef<
     /** Skip the enter/exit animation so the dialog appears instantly. */
     noAnimation?: boolean;
   }
->(({ className, overlayClassName, noAnimation, children, onEscapeKeyDown, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay className={overlayClassName} noAnimation={noAnimation} />
-    <DialogPrimitive.Content
-      ref={ref}
-      data-lody-dialog-content=""
-      className={cn(dialogBaseClasses, !noAnimation && dialogAnimationClasses, className)}
-      onEscapeKeyDown={(event) => {
-        if (isImeComposingNativeKeyboardEvent(event)) {
-          event.preventDefault();
-          return;
-        }
-        onEscapeKeyDown?.(event);
-      }}
-      {...props}
-    >
-      {children}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+>(({ className, overlayClassName, noAnimation, children, onEscapeKeyDown, ...props }, ref) => {
+  const { ref: contentRef, container } = useDialogPopupContainer(ref);
+  return (
+    <DialogPortal>
+      <DialogOverlay className={overlayClassName} noAnimation={noAnimation} />
+      <DialogPrimitive.Content
+        ref={contentRef}
+        data-lody-dialog-content=""
+        className={cn(dialogBaseClasses, !noAnimation && dialogAnimationClasses, className)}
+        onEscapeKeyDown={(event) => {
+          if (isImeComposingNativeKeyboardEvent(event)) {
+            event.preventDefault();
+            return;
+          }
+          onEscapeKeyDown?.(event);
+        }}
+        {...props}
+      >
+        <PopupContainerProvider container={container}>{children}</PopupContainerProvider>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContentWithoutClose.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
diff --git a/packages/components/src/ui/diff-viewer/diff-viewer.tsx b/packages/components/src/ui/diff-viewer/diff-viewer.tsx
index 1174a2948..5c9bf59d3 100644
--- a/packages/components/src/ui/diff-viewer/diff-viewer.tsx
+++ b/packages/components/src/ui/diff-viewer/diff-viewer.tsx
@@ -20,7 +20,7 @@ import {
   CollapsibleCardHeader,
   CollapsibleCardContent,
 } from '@/ui/collapsible-card';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { FileIcon } from '@/components/icons/file-icons';
 
 import { getSessionDiffErrorMessage } from '@/lib/session-diff-diagnostics';
@@ -370,11 +370,7 @@ function sampleTextForDiffParseKey(text: string): string {
 function CollapseToggle({ className }: { className?: string }) {
   return (
     <Collapsible.Trigger asChild>
-      <Button
-        variant="ghost"
-        size="icon"
-        className={cn('h-6 w-6 shrink-0 hover:bg-transparent', className)}
-      >
+      <Button variant="ghost" size="mini" icon className={cn('shrink-0', className)}>
         <ChevronDown className="h-4 w-4 transition-transform duration-200 [[data-state=closed]_&]:-rotate-90" />
       </Button>
     </Collapsible.Trigger>
diff --git a/packages/components/src/ui/diff-viewer/github-comment-thread.tsx b/packages/components/src/ui/diff-viewer/github-comment-thread.tsx
index 4a1b636e5..73741be97 100644
--- a/packages/components/src/ui/diff-viewer/github-comment-thread.tsx
+++ b/packages/components/src/ui/diff-viewer/github-comment-thread.tsx
@@ -12,10 +12,10 @@ import {
 import type { CommentReferencePayload } from '@lody/shared';
 import { useTranslation } from 'react-i18next';
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/ui/avatar';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
-import { Badge } from '@/ui/badge';
+import { Avatar } from '@lody/ui/avatar';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
+import { Badge } from '@lody/ui/badge';
 import { cn } from '@/lib/utils';
 import type { GitHubReviewThread, GitHubReviewComment } from './session-comment-types';
 import { SessionCommentMarkdown } from './session-comment-markdown';
@@ -48,10 +48,10 @@ export function GitHubCommentItem({ comment, className }: GitHubCommentItemProps
 
   return (
     <div className={cn('group/gh-comment flex gap-2 px-3 py-2', className)}>
-      <Avatar className="h-6 w-6 shrink-0 mt-0.5">
-        {avatarUrl && <AvatarImage src={avatarUrl} alt={login} />}
-        <AvatarFallback className="text-[10px]">{login.slice(0, 2).toUpperCase()}</AvatarFallback>
-      </Avatar>
+      <Avatar.Root size="medium" className="mt-0.5">
+        {avatarUrl && <Avatar.Image src={avatarUrl} alt={login} />}
+        <Avatar.Fallback>{login.slice(0, 2).toUpperCase()}</Avatar.Fallback>
+      </Avatar.Root>
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-1.5">
           <span className="truncate text-sm font-medium leading-none text-foreground">{login}</span>
@@ -176,8 +176,7 @@ export function GitHubCommentThread({
         {onSendToChat && (
           <Button
             variant="ghost"
-            size="sm"
-            className="h-5 w-5 p-0 text-muted-foreground hover:text-foreground hover:bg-muted"
+            size="small"
             onClick={(e) => {
               e.stopPropagation();
               handleSendToChat();
@@ -198,9 +197,7 @@ export function GitHubCommentThread({
           {commentCount} {commentCount === 1 ? 'comment' : 'comments'}
         </span>
         {thread.outdated && (
-          <Badge variant="outline" className="ml-1 h-4 text-[9px] px-1">
-            {t('comments.outdated', 'Outdated')}
-          </Badge>
+          <Badge className="ml-1">{t('comments.outdated', 'Outdated')}</Badge>
         )}
         {isCollapsed && (
           <span className="truncate text-xs text-muted-foreground ml-1">
@@ -246,9 +243,8 @@ export function GitHubCommentThread({
                     </span>
                     <div className="ml-auto flex items-center gap-1.5">
                       <Button
-                        size="sm"
                         variant="ghost"
-                        className="h-6 text-xs px-2"
+                        size="small"
                         disabled={isSubmittingReply}
                         onClick={() => {
                           setIsReplying(false);
@@ -258,8 +254,7 @@ export function GitHubCommentThread({
                         {t('comments.cancel', 'Cancel')}
                       </Button>
                       <Button
-                        size="sm"
-                        className="h-6 gap-1 text-xs px-2"
+                        size="small"
                         disabled={!replyBody.trim() || isSubmittingReply}
                         onClick={() => void handleSubmitReply()}
                       >
diff --git a/packages/components/src/ui/diff-viewer/session-comment-draft.tsx b/packages/components/src/ui/diff-viewer/session-comment-draft.tsx
index 951a8bc02..3f7e43f11 100644
--- a/packages/components/src/ui/diff-viewer/session-comment-draft.tsx
+++ b/packages/components/src/ui/diff-viewer/session-comment-draft.tsx
@@ -5,8 +5,8 @@ import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 import { UserAvatar } from '@/components/user-avatar';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 import { cn } from '@/lib/utils';
 import type { CommentAnchor, CommentUser } from './session-comment-types';
 
@@ -81,7 +81,8 @@ export function SessionCommentDraft({
               name: currentUser.name,
               image: currentUser.image,
             }}
-            className="h-5 w-5 shrink-0"
+            size="small"
+            className="shrink-0"
           />
         )}
         <span className="text-xs font-medium text-foreground truncate">
@@ -89,8 +90,9 @@ export function SessionCommentDraft({
         </span>
         <Button
           variant="ghost"
-          size="icon"
-          className="ml-auto h-5 w-5 shrink-0"
+          size="mini"
+          icon
+          className="ml-auto shrink-0"
           disabled={isSubmitting}
           onClick={onCancel}
         >
@@ -116,8 +118,7 @@ export function SessionCommentDraft({
         <div className="flex-1" />
         <span className="text-[10px] text-muted-foreground hidden sm:block">Ctrl+Enter</span>
         <Button
-          size="sm"
-          className="h-6 text-xs px-3"
+          size="small"
           disabled={!body.trim() || isSubmitting || !prLinked || !onSubmitToGitHub}
           onClick={() => void handleSubmit()}
         >
diff --git a/packages/components/src/ui/form.tsx b/packages/components/src/ui/form.tsx
index 3464fc21d..b80f878ad 100644
--- a/packages/components/src/ui/form.tsx
+++ b/packages/components/src/ui/form.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,
@@ -12,7 +11,7 @@ import {
 } from 'react-hook-form';
 
 import { cn } from '@/lib/utils';
-import { Label } from '@/ui/label';
+import { Field as UiField } from '@lody/ui/field';
 
 const Form = FormProvider;
 
@@ -77,11 +76,11 @@ function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
-function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function FormLabel({ className, ...props }: React.ComponentProps<typeof UiField.Label>) {
   const { error, formItemId } = useFormField();
 
   return (
-    <Label
+    <UiField.Label
       data-slot="form-label"
       data-error={!!error}
       className={cn('data-[error=true]:text-destructive', className)}
diff --git a/packages/components/src/ui/index.ts b/packages/components/src/ui/index.ts
index e8742f972..9639b6dcd 100644
--- a/packages/components/src/ui/index.ts
+++ b/packages/components/src/ui/index.ts
@@ -1,29 +1,17 @@
 // Export all UI components
-export * from './accordion';
-export * from './badge';
-export * from './button';
+export { Button } from '@lody/ui/button';
+export type { ButtonProps } from '@lody/ui/button';
 export * from './calendar';
 export * from './card';
-export * from './checkbox';
-export * from './collapsible';
 export * from './command';
 export * from './dialog';
 export * from './dropdown-menu';
-export * from './input';
-export * from './kbd';
-export * from './label';
-export * from './loading';
-export * from './menubar';
+export { Kbd, KbdGroup } from '@lody/ui/kbd';
+export type { KbdProps } from '@lody/ui/kbd';
 export * from './popover';
 export * from './scroll-area';
-export * from './select';
-export * from './separator';
-export * from './sheet';
 // export * from './sidebar-resizer' // Has external dependencies - needs to be refactored
 // export * from './sidebar' // Has external dependencies - needs to be refactored
-export * from './skeleton';
-export * from './switch';
 export * from './tabs';
-export * from './textarea';
 export * from './tooltip';
 export * from './workspace-list';
diff --git a/packages/components/src/ui/input.tsx b/packages/components/src/ui/input.tsx
deleted file mode 100644
index 0a7955670..000000000
--- a/packages/components/src/ui/input.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-9 w-full rounded-md border border-input-border bg-input-field px-3 py-1 text-base text-input-foreground shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-input-placeholder focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 md:text-sm outline-hidden',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = 'Input';
-
-export { Input };
diff --git a/packages/components/src/ui/kbd.tsx b/packages/components/src/ui/kbd.tsx
deleted file mode 100644
index e0cfd415b..000000000
--- a/packages/components/src/ui/kbd.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        'pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none',
-        "[&_svg:not([class*='size-'])]:size-3",
-        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn('inline-flex items-center gap-1', className)}
-      {...props}
-    />
-  );
-}
-
-export { Kbd, KbdGroup };
diff --git a/packages/components/src/ui/label.tsx b/packages/components/src/ui/label.tsx
deleted file mode 100644
index 86b32b702..000000000
--- a/packages/components/src/ui/label.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
diff --git a/packages/components/src/ui/loading.tsx b/packages/components/src/ui/loading.tsx
deleted file mode 100644
index 0eabd4a28..000000000
--- a/packages/components/src/ui/loading.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Loader2 } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-interface LoadingProps {
-  className?: string;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-/**
- * Loading component with animated spinner
- */
-export function Loading({ className, size = 'md' }: LoadingProps) {
-  const sizeClasses = {
-    sm: 'h-4 w-4',
-    md: 'h-6 w-6',
-    lg: 'h-8 w-8',
-  };
-
-  return (
-    <div className={cn('flex items-center justify-center', className)}>
-      <Loader2 className={cn('animate-spin text-muted-foreground', sizeClasses[size])} />
-    </div>
-  );
-}
diff --git a/packages/components/src/ui/menubar.tsx b/packages/components/src/ui/menubar.tsx
deleted file mode 100644
index a1fbb38c3..000000000
--- a/packages/components/src/ui/menubar.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import * as React from 'react';
-import * as MenubarPrimitive from '@radix-ui/react-menubar';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn(
-        'bg-background flex h-9 items-center gap-1 rounded-md border border-border p-1 shadow-xs',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
-}
-
-function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
-}
-
-function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
-}
-
-function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />;
-}
-
-function MenubarTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        'focus:bg-hover focus:text-hover-foreground data-[state=open]:bg-hover data-[state=open]:text-hover-foreground flex items-center rounded-xs px-2 py-1 text-sm font-medium outline-hidden select-none',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarContent({
-  className,
-  align = 'start',
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-border p-1 shadow-md',
-          className
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  );
-}
-
-function MenubarItem({
-  className,
-  inset,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
-}) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-hover focus:text-hover-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-hover focus:text-hover-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none 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 left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  );
-}
-
-function MenubarRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-hover focus:text-hover-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none 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 left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  );
-}
-
-function MenubarLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
-      {...props}
-    />
-  );
-}
-
-function MenubarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
-      {...props}
-    />
-  );
-}
-
-function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-      {...props}
-    />
-  );
-}
-
-function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
-}
-
-function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        'focus:bg-hover focus:text-hover-foreground data-[state=open]:bg-hover data-[state=open]:text-hover-foreground flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  );
-}
-
-function MenubarSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-sub-content"
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-border p-1 shadow-lg',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Menubar,
-  MenubarPortal,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarGroup,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarItem,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-};
diff --git a/packages/components/src/ui/pagination.tsx b/packages/components/src/ui/pagination.tsx
deleted file mode 100644
index e197acb1a..000000000
--- a/packages/components/src/ui/pagination.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button, buttonVariants } from '@/ui/button';
-
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn('flex flex-row items-center gap-1', className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="pagination-item" {...props} />;
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<'a'>;
-
-function PaginationLink({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? 'page' : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
-          size,
-        }),
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
-      {...props}
-    >
-      <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
-    </PaginationLink>
-  );
-}
-
-function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
-      {...props}
-    >
-      <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon />
-    </PaginationLink>
-  );
-}
-
-function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn('flex size-9 items-center justify-center', className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  );
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-};
diff --git a/packages/components/src/ui/password-input.tsx b/packages/components/src/ui/password-input.tsx
index 03793d39a..e4b711a37 100644
--- a/packages/components/src/ui/password-input.tsx
+++ b/packages/components/src/ui/password-input.tsx
@@ -2,9 +2,11 @@ import * as React from 'react';
 import { Eye, EyeOff } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
-import { Input } from './input';
+import { Input, type InputProps } from '@lody/ui/input';
 
-export interface PasswordInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {
+// Props follow the wrapped primitive, not a raw `<input>`: `size` on `Input` is
+// the token step, so taking the HTML attribute here would shadow it.
+export interface PasswordInputProps extends Omit<InputProps, 'type'> {
   showPasswordLabel?: string;
   hidePasswordLabel?: string;
   containerClassName?: string;
diff --git a/packages/components/src/ui/progress.tsx b/packages/components/src/ui/progress.tsx
deleted file mode 100644
index b573adb26..000000000
--- a/packages/components/src/ui/progress.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
-  value?: number;
-  max?: number;
-}
-
-const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
-  ({ className, value = 0, max = 100, ...props }, ref) => {
-    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
-
-    return (
-      <div
-        ref={ref}
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={max}
-        className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
-        {...props}
-      >
-        <div
-          className="h-full bg-primary transition-all duration-200"
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-    );
-  }
-);
-Progress.displayName = 'Progress';
-
-export { Progress };
diff --git a/packages/components/src/ui/radio-group.tsx b/packages/components/src/ui/radio-group.tsx
deleted file mode 100644
index 9fb138db7..000000000
--- a/packages/components/src/ui/radio-group.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { CircleIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn('grid gap-3', className)}
-      {...props}
-    />
-  );
-}
-
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        'border-input-border text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-}
-
-export { RadioGroup, RadioGroupItem };
diff --git a/packages/components/src/ui/select.tsx b/packages/components/src/ui/select.tsx
deleted file mode 100644
index 9cb85cc42..000000000
--- a/packages/components/src/ui/select.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input-border bg-input-field px-3 py-2 text-sm text-input-foreground shadow-xs ring-offset-background data-[placeholder]:text-input-placeholder focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 [&>span]:line-clamp-1',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'scroll-pro scrollbar-pro [scrollbar-gutter:auto] relative z-[var(--z-popover)] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-(--radix-select-content-transform-origin)',
-        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}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-hover focus:text-hover-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
diff --git a/packages/components/src/ui/separator.tsx b/packages/components/src/ui/separator.tsx
deleted file mode 100644
index 466b40520..000000000
--- a/packages/components/src/ui/separator.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-
-import { cn } from '@/lib/utils';
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      'shrink-0 bg-border',
-      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-      className
-    )}
-    {...props}
-  />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
diff --git a/packages/components/src/ui/sheet.tsx b/packages/components/src/ui/sheet.tsx
deleted file mode 100644
index 939212f36..000000000
--- a/packages/components/src/ui/sheet.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
-  {
-    variants: {
-      side: {
-        top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        bottom:
-          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-        right:
-          'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  }
-);
-
-interface SheetContentProps
-  extends
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Content>
-  </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />
-);
-SheetHeader.displayName = 'SheetHeader';
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)}
-    {...props}
-  />
-);
-SheetFooter.displayName = 'SheetFooter';
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-};
diff --git a/packages/components/src/ui/sidebar.tsx b/packages/components/src/ui/sidebar.tsx
index e851279cb..e07902638 100644
--- a/packages/components/src/ui/sidebar.tsx
+++ b/packages/components/src/ui/sidebar.tsx
@@ -5,11 +5,11 @@ import { PanelLeftIcon } from 'lucide-react';
 
 import { useIsMobile } from '@/hooks/use-mobile';
 import { cn } from '@/lib/utils';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { Separator } from '@/ui/separator';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/ui/sheet';
-import { Skeleton } from '@/ui/skeleton';
+import { Button } from '@lody/ui/button';
+import { Input } from '@lody/ui/input';
+import { Separator } from '@lody/ui/separator';
+import { Drawer } from '@lody/ui/drawer';
+import { Skeleton } from '@lody/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ui/tooltip';
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -159,26 +159,35 @@ function Sidebar({
 
   if (isMobile) {
     return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
+      <Drawer.Root
+        side={side === 'left' ? 'start' : 'end'}
+        open={openMobile}
+        onOpenChange={setOpenMobile}
+        {...props}
+      >
+        <Drawer.Content
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          // The sidebar is its own surface with its own fill and its own
+          // scrolling column, so it takes the panel without the panel's padding
+          // and without the cross: the way out is the overlay or the trigger.
+          closeButton={false}
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0"
           style={
             {
               '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
-          side={side}
+          side={side === 'left' ? 'start' : 'end'}
         >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
+          <Drawer.Header className="sr-only">
+            <Drawer.Title>Sidebar</Drawer.Title>
+            <Drawer.Description>Displays the mobile sidebar.</Drawer.Description>
+          </Drawer.Header>
           <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
+        </Drawer.Content>
+      </Drawer.Root>
     );
   }
 
@@ -238,15 +247,16 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       variant="ghost"
-      size="icon"
-      className={cn('size-7', className)}
+      size="small"
+      icon
+      className={cn(className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <PanelLeftIcon className="size-4" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
@@ -329,7 +339,7 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      className={cn('mx-2 w-auto', className)}
       {...props}
     />
   );
@@ -579,9 +589,10 @@ function SidebarMenuSkeleton({
       className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
       {...props}
     >
-      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      {showIcon && <Skeleton width={16} height={16} data-sidebar="menu-skeleton-icon" />}
       <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
+        height={16}
+        className="max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
         style={
           {
diff --git a/packages/components/src/ui/skeleton.tsx b/packages/components/src/ui/skeleton.tsx
deleted file mode 100644
index ec526eaa8..000000000
--- a/packages/components/src/ui/skeleton.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { cn } from '@/lib/utils';
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('animate-pulse rounded-md bg-primary/10', className)} {...props} />;
-}
-
-export { Skeleton };
diff --git a/packages/components/src/ui/switch.tsx b/packages/components/src/ui/switch.tsx
deleted file mode 100644
index 006557d97..000000000
--- a/packages/components/src/ui/switch.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-
-import { cn } from '@/lib/utils';
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-track',
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
diff --git a/packages/components/src/ui/table.tsx b/packages/components/src/ui/table.tsx
deleted file mode 100644
index def3f2311..000000000
--- a/packages/components/src/ui/table.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-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('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
-      {...props}
-    />
-  );
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        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 [&>[role=checkbox]]:translate-y-[2px]',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn('text-muted-foreground mt-4 text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/components/src/ui/textarea.tsx b/packages/components/src/ui/textarea.tsx
deleted file mode 100644
index 5ff431181..000000000
--- a/packages/components/src/ui/textarea.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex w-full rounded-md border border-input-border bg-input-field px-3 py-2 text-sm text-input-foreground ring-offset-background placeholder:text-input-placeholder focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea };
diff --git a/packages/components/src/ui/toggle.tsx b/packages/components/src/ui/toggle.tsx
deleted file mode 100644
index e9659be29..000000000
--- a/packages/components/src/ui/toggle.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-selection data-[state=on]:text-selection-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-hidden transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-input-border bg-transparent shadow-xs hover:bg-hover hover:text-hover-foreground',
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Toggle, toggleVariants };
diff --git a/packages/components/src/ui/workspace-list.tsx b/packages/components/src/ui/workspace-list.tsx
index 618ebf09b..b94b3ecbb 100644
--- a/packages/components/src/ui/workspace-list.tsx
+++ b/packages/components/src/ui/workspace-list.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Cloud, LogIn, CloudOff, Upload, MoreHorizontal, Plus, Settings } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { Button } from './button';
-import { Separator } from './separator';
+import { Button } from '@lody/ui/button';
+import { Separator } from '@lody/ui/separator';
 import { useTranslation } from 'react-i18next';
 import {
   DropdownMenu,
@@ -67,7 +67,7 @@ interface ActionButtonProps {
   icon: React.ReactNode;
   label: string;
   onClick?: () => void;
-  variant?: 'outline' | 'ghost';
+  variant?: 'secondary' | 'ghost';
   className?: string;
   title?: string;
 }
@@ -76,17 +76,14 @@ const ActionButton: React.FC<ActionButtonProps> = ({
   icon,
   label,
   onClick,
-  variant = 'outline',
+  variant = 'secondary',
   className,
   title,
 }) => {
   return (
     <Button
       variant={variant}
-      className={cn(
-        'flex-1 h-8 flex items-center justify-center text-muted-foreground hover:text-foreground text-sm',
-        className
-      )}
+      className={cn('flex-1 flex', className)}
       onClick={onClick}
       title={title}
     >
@@ -131,7 +128,7 @@ const WorkspaceItemRow: React.FC<WorkspaceItemRowProps> = ({
         <div className="absolute right-2 opacity-0 group-hover:opacity-100 transition-opacity">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-6 w-6 p-0">
+              <Button variant="ghost" size="mini" icon>
                 <MoreHorizontal className="h-4 w-4" />
                 <span className="sr-only">More options</span>
               </Button>
diff --git a/packages/components/tests/agent-config-dialog.test.tsx b/packages/components/tests/agent-config-dialog.test.tsx
index bda72b81f..67196919e 100644
--- a/packages/components/tests/agent-config-dialog.test.tsx
+++ b/packages/components/tests/agent-config-dialog.test.tsx
@@ -264,10 +264,15 @@ describe('AgentConfigDialog', () => {
   };
 
   const selectTab = async (name: string): Promise<void> => {
+    // A whole press, not just its first half: the strip is Base UI's now and a
+    // tab is taken on the click, while Radix took it on the mousedown.
     await act(async () => {
-      getTabByName(name).dispatchEvent(
-        new MouseEvent('mousedown', { bubbles: true, cancelable: true, button: 0 })
-      );
+      const tab = getTabByName(name);
+      const press = { bubbles: true, cancelable: true, button: 0 };
+      tab.dispatchEvent(new MouseEvent('mousedown', press));
+      tab.focus();
+      tab.dispatchEvent(new MouseEvent('mouseup', press));
+      tab.click();
     });
   };
 
diff --git a/packages/components/tests/message-selection.test.tsx b/packages/components/tests/message-selection.test.tsx
index 12d5c7d84..1d6e0b295 100644
--- a/packages/components/tests/message-selection.test.tsx
+++ b/packages/components/tests/message-selection.test.tsx
@@ -86,7 +86,7 @@ describe('chat message selection', () => {
     await click('Question');
     await click('Preview image');
     expect(container.querySelector('output')?.textContent).toBe('user,assistant');
-    expect(container.querySelectorAll('[role="checkbox"][data-state="checked"]')).toHaveLength(2);
+    expect(container.querySelectorAll('[role="checkbox"][data-checked]')).toHaveLength(2);
     await click('Answer');
     await click('Preview image');
     expect(container.querySelector('output')?.textContent).toBe('user');
@@ -98,7 +98,7 @@ describe('chat message selection', () => {
     await click('Preview image');
     expect(container.querySelector('output')?.textContent).toBe('user,assistant,followup');
     await click('Clear selection');
-    expect(container.querySelectorAll('[data-state="checked"]')).toHaveLength(0);
+    expect(container.querySelectorAll('[role="checkbox"][data-checked]')).toHaveLength(0);
     await click('Cancel');
     expect(container.querySelector('[role="checkbox"]')).toBeNull();
     await click('Start');
@@ -121,7 +121,7 @@ describe('chat message selection', () => {
     };
     const selectedIds = () =>
       [...container.querySelectorAll('[data-message-selection-id]')]
-        .filter((element) => element.querySelector('[role="checkbox"][data-state="checked"]'))
+        .filter((element) => element.querySelector('[role="checkbox"][data-checked]'))
         .map((element) => element.getAttribute('data-message-selection-id'));
 
     await pointer('user', 'pointerdown');
@@ -198,11 +198,23 @@ describe('chat message selection', () => {
         });
       }
       expect(container.scrollTop).toBeGreaterThan(0);
-      expect(container.querySelectorAll('[role="checkbox"][data-state="checked"]')).toHaveLength(3);
+      expect(container.querySelectorAll('[role="checkbox"][data-checked]')).toHaveLength(3);
       await act(async () => {
         window.dispatchEvent(new MouseEvent('pointerup'));
       });
-      expect(frames.size).toBe(0);
+      // Releasing stops the loop, which shows as scrolling that no longer
+      // advances however many frames are drained. An outstanding-frame count
+      // cannot show it: Base UI's scheduler deliberately leaves its last frame
+      // queued and turns it into a no-op, so any checkbox in the tree keeps one.
+      const settled = container.scrollTop;
+      for (const time of [32, 48]) {
+        await act(async () => {
+          const pending = [...frames.values()];
+          frames.clear();
+          pending.forEach((callback) => callback(time));
+        });
+      }
+      expect(container.scrollTop).toBe(settled);
       expect(overlay.hidden).toBe(true);
     } finally {
       if (original) Object.defineProperty(document, 'elementFromPoint', original);
diff --git a/packages/components/tests/mobile-about-developer-mode.test.tsx b/packages/components/tests/mobile-about-developer-mode.test.tsx
index 5ca593c63..b87c34020 100644
--- a/packages/components/tests/mobile-about-developer-mode.test.tsx
+++ b/packages/components/tests/mobile-about-developer-mode.test.tsx
@@ -18,6 +18,15 @@ import { initI18n } from '../src/i18n';
   globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
 ).IS_REACT_ACT_ENVIRONMENT = true;
 
+class TestPointerEvent extends MouseEvent {
+  readonly pointerType: string;
+
+  constructor(type: string, init: MouseEventInit & { pointerType?: string } = {}) {
+    super(type, init);
+    this.pointerType = init.pointerType ?? '';
+  }
+}
+
 let container: HTMLDivElement;
 let root: Root;
 
@@ -49,6 +58,10 @@ function switchLabelled(label: string): HTMLButtonElement | null {
 }
 
 beforeEach(async () => {
+  Object.defineProperty(globalThis, 'PointerEvent', {
+    configurable: true,
+    value: TestPointerEvent,
+  });
   localStorage.clear();
   await initI18n();
   container = document.createElement('div');
diff --git a/packages/components/tests/path-launchers-setting.test.tsx b/packages/components/tests/path-launchers-setting.test.tsx
index 4654e35ff..667329e52 100644
--- a/packages/components/tests/path-launchers-setting.test.tsx
+++ b/packages/components/tests/path-launchers-setting.test.tsx
@@ -85,7 +85,9 @@ describe('PathLaunchersSettings', () => {
     const editButton = getButton('Edit');
     await act(async () => editButton.click());
 
-    expect(document.querySelector('[role="listbox"]')).toBeNull();
+    // A Select keeps its list mounted once opened and hides the closed one, so
+    // "shut" is the trigger's own state rather than the row count.
+    expect(getSelectTrigger().getAttribute('aria-expanded')).toBe('false');
     expect(document.querySelector('[role="dialog"]')?.textContent).toContain('Edit launcher');
     expect(getInput('path-launcher-name').value).toBe('PhpStorm');
     expect(getInput('path-launcher-command').value).toBe('open -a "PhpStorm" {path}');
@@ -133,8 +135,12 @@ describe('PathLaunchersSettings', () => {
 
     const sheet = document.querySelector<HTMLElement>('[role="dialog"]');
     expect(sheet).not.toBeNull();
-    expect(sheet?.className).toContain('bottom-0');
-    expect(sheet?.className).toContain('slide-in-from-bottom');
+    // The edge a sheet came in on is what it states for itself; `@lody/ui`'s
+    // Sheet renders it as `data-side` and derives the pinning, the radius and
+    // the direction it slides from there. The classes this used to assert were
+    // the deleted Tailwind `cva`'s, which is the component rather than what a
+    // person sees.
+    expect(sheet?.getAttribute('data-side')).toBe('bottom');
     expect(sheet?.textContent).toContain('Edit launcher');
   });
 
@@ -144,16 +150,39 @@ describe('PathLaunchersSettings', () => {
     });
   }
 
-  async function openSelect(): Promise<void> {
+  /**
+   * Base UI defers part of opening a popup to an animation frame, and `act`
+   * flushes React's work but not the frame queue. Without draining it here the
+   * next interaction lands between the list being asked to open and its
+   * opening, and the deferred frame then undoes what that interaction did.
+   */
+  async function settle(): Promise<void> {
+    await act(async () => {
+      for (let index = 0; index < 2; index += 1) {
+        await new Promise<void>((resolve) => {
+          requestAnimationFrame(() => resolve());
+        });
+      }
+    });
+  }
+
+  /** The pointer arriving and pressing, which is what opens the list. */
+  async function pointerClick(element: HTMLElement): Promise<void> {
+    const init = { bubbles: true, cancelable: true, button: 0, pointerType: 'mouse', detail: 1 };
     await act(async () => {
-      getSelectTrigger().dispatchEvent(
-        new TestPointerEvent('pointerdown', {
-          bubbles: true,
-          button: 0,
-          pointerType: 'mouse',
-        })
-      );
+      element.dispatchEvent(new TestPointerEvent('pointermove', init));
+      element.dispatchEvent(new TestPointerEvent('pointerdown', init));
+      element.dispatchEvent(new MouseEvent('mousedown', init));
+      element.focus();
+      element.dispatchEvent(new TestPointerEvent('pointerup', init));
+      element.dispatchEvent(new MouseEvent('mouseup', init));
+      element.click();
     });
+    await settle();
+  }
+
+  async function openSelect(): Promise<void> {
+    await pointerClick(getSelectTrigger());
   }
 
   async function chooseOption(name: string): Promise<void> {
@@ -161,10 +190,7 @@ describe('PathLaunchersSettings', () => {
       (item) => item.textContent?.includes(name)
     );
     if (!option) throw new Error(`Could not find option: ${name}`);
-    await act(async () => {
-      option.focus();
-      option.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Enter' }));
-    });
+    await pointerClick(option);
   }
 
   function seedCustomLauncher(): void {
diff --git a/packages/components/tests/tasks-beta-gate.test.tsx b/packages/components/tests/tasks-beta-gate.test.tsx
index 635f3f77a..97e025985 100644
--- a/packages/components/tests/tasks-beta-gate.test.tsx
+++ b/packages/components/tests/tasks-beta-gate.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { act } from 'react';
+import React, { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { createStore, Provider, useAtomValue } from 'jotai';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
@@ -17,10 +17,23 @@ import { initI18n } from '../src/i18n';
   globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
 ).IS_REACT_ACT_ENVIRONMENT = true;
 
+class TestPointerEvent extends MouseEvent {
+  readonly pointerType: string;
+
+  constructor(type: string, init: MouseEventInit & { pointerType?: string } = {}) {
+    super(type, init);
+    this.pointerType = init.pointerType ?? '';
+  }
+}
+
 let container: HTMLDivElement;
 let root: Root;
 
 beforeEach(async () => {
+  Object.defineProperty(globalThis, 'PointerEvent', {
+    configurable: true,
+    value: TestPointerEvent,
+  });
   // Both atoms are localStorage-backed, so a fresh jotai store is not a fresh
   // gate — it rehydrates whatever the previous test persisted.
   localStorage.clear();
diff --git a/packages/components/vitest.config.ts b/packages/components/vitest.config.ts
index a2f538322..8eb4142a4 100644
--- a/packages/components/vitest.config.ts
+++ b/packages/components/vitest.config.ts
@@ -1,14 +1,22 @@
+import stylex from '@stylexjs/unplugin';
 import { defineConfig } from 'vitest/config';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import topLevelAwait from 'vite-plugin-top-level-await';
 import wasm from 'vite-plugin-wasm';
 import { loroCrdtWasmUrlWorkaround, VITEST_INLINE_WASM_DEPS } from './vite-wasm-workarounds';
+import { stylexOptions } from '../ui/stylex-options';
 
 export default defineConfig({
   define: {
     'import.meta.env.VITE_PREVIEW_PUBLIC_BASE_DOMAIN': JSON.stringify('mylody.app'),
   },
-  plugins: [loroCrdtWasmUrlWorkaround(), tsconfigPaths(), wasm(), topLevelAwait()],
+  plugins: [
+    loroCrdtWasmUrlWorkaround(),
+    tsconfigPaths(),
+    wasm(),
+    topLevelAwait(),
+    stylex.rollup({ ...stylexOptions, dev: false }),
+  ],
   test: {
     // `src/**` is included so a test written next to its module runs instead of
     // silently never running. Two such files had accumulated under `src/lib`,
diff --git a/packages/icons/README.md b/packages/icons/README.md
new file mode 100644
index 000000000..169c8392d
--- /dev/null
+++ b/packages/icons/README.md
@@ -0,0 +1,9 @@
+# `@lody/icons`
+
+Lody's independent icon system. It owns the icon registry, SVG renderer, four
+visual treatments, and stateful icons. Icons fill the box supplied by their
+caller, inherit `currentColor`, and do not depend on `@lody/ui` or product
+components.
+
+The package is source-consumed in the workspace. Import the public surface from
+`@lody/icons`; the subpath exports are intended for package tests and tooling.
diff --git a/packages/icons/package.json b/packages/icons/package.json
new file mode 100644
index 000000000..bae73d547
--- /dev/null
+++ b/packages/icons/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@lody/icons",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./icon": "./src/icon.tsx",
+    "./registry": "./src/registry.ts",
+    "./stateful": "./src/stateful.tsx"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "dependencies": {
+    "@stylexjs/stylex": "0.19.0"
+  },
+  "devDependencies": {
+    "@stylexjs/unplugin": "0.19.0",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "jsdom": "^26.1.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "^3.2.4"
+  }
+}
diff --git a/packages/icons/src/AGENTS.md b/packages/icons/src/AGENTS.md
new file mode 100644
index 000000000..70a4de81d
--- /dev/null
+++ b/packages/icons/src/AGENTS.md
@@ -0,0 +1,75 @@
+# `@lody/icons`
+
+`CLAUDE.md` is a symlink to this file. Edit `AGENTS.md` only.
+
+The set is drawn here and never taken from another icon package: `@lody/icons`
+depends on React and StyleX, and never on `@lody/ui` or product packages.
+`registry.ts` is the drawing,
+`icon.tsx` decides which layers a variant draws, `stateful.tsx` holds the icons
+with two states, and `index.ts` names each one as a component.
+
+## The grid
+
+- 24 canvas, 20 live area (2 to 22), a 1.5 stroke with round caps and joins,
+  2px corners on containers and 2px nodes for the git family. Strokes sit on .5
+  coordinates so 1.5px is crisp at 1x. Nothing crosses the live area, including
+  what a state swings out to.
+- A family shares one skeleton: the chat family one bubble, the file family one
+  folded sheet, the git family the same two node columns, and `sidebar`,
+  `terminal`, `monitor` and `image` the same 2px container. A new member takes
+  its family's skeleton before it takes a better idea.
+- An icon states no size and no colour. It fills the box it is given and
+  inherits `currentColor`, so the part holding it owns both — the same contract
+  the package's glyphs have.
+- Two names may be one drawing (`send` and `arrow-up`, `pin` and `pin-off`).
+  State the path once as a module const; a name is a meaning, not a picture.
+
+## Variants
+
+A variant is a layer treatment of one drawing, never a second drawing. `marks`
+is the outline; `layers` is what the fills are built from — `mass` (closed, the
+back), `mid`, `front`, `detail` inside the mass, `outer` outside it, `dots`.
+
+- Outline draws the marks. Duotone adds `mass` at 18%. Glyph fills everything
+  and cuts `front` and `detail` **through a mask**, so the cut is a hole and the
+  icon sits on any surface; a painted cut is correct on one background only.
+  Bulk is `mass` at 35%, `mid` at 55% and `front` at 100%, with no outline.
+- **A drawing a fill would cost its meaning takes no layers.** `folder-plus`
+  and `users` have none: a cross drawn on a 100% front panel is currentColor on
+  currentColor and what is left is `folder`, and half a person as a stroke
+  beside a filled one is two fragments off a silhouette. `folder-open` and
+  `user` were already outline-only for the same reason.
+- **What a stroke's join rounds, a mass rounds itself.** A fill has no join, so
+  a spike the outline hides comes back in glyph and bulk: the bell's flange met
+  its mouth at 39 degrees and grew horns until the side was made to arrive
+  vertically and turn through a 0.7 corner.
+- `outer` is an appendage the silhouette needs — an antenna, a bell's nub, a
+  monitor's foot — not a second subject. It is drawn in every variant and never
+  cut, which is why `dots` drawn the same way disappear on a glyph.
+
+## Two states
+
+A stateful icon is one `<svg>` whose parts are functions of one registered
+number, `--lody-icon-t`, which CSS transitions.
+
+- Only transform, opacity and dash offset move, and no path morphs, so **both
+  ends are the static drawing** and a host without property transitions snaps.
+  `prefers-reduced-motion` sets the duration to zero.
+- Where a state moves the whole drawing, read the path from `ICONS` rather than
+  restating it; `test/icons.test.tsx` holds `BellRingIcon` to that. Two of this
+  set's drawing bugs were a stateful icon and a static one drifting apart.
+- **Never `scaleX` a stroke.** A horizontal scale leaves the thickness alone and
+  squashes the round caps, so the state lands on a different drawing. Retract a
+  stroke with its dash instead: a dash at zero length is a round cap and nothing
+  else, which is a dot. A uniform scale grows a stroke without changing it.
+- A state that swings the drawing has to keep it on the canvas. The bell pivots
+  on its nub 16 units from its mouth, so its angle is 12 degrees and not 14.
+
+## Adding one
+
+Draw it, add the name to its family in `ICON_FAMILIES`, export it from
+`index.ts`, and **open the playground** — `pnpm --filter @lody/ui playground`.
+The tests pin the grid, the accessibility contract and the four treatments;
+they cannot see that a drawing reads. Check it at 16 and 20, on the accent rung
+where a glyph's mask shows, and in bulk where a 100% layer hides what is under
+it. The board in `src/gallery` gets no entry: an icon adds no token.
diff --git a/packages/icons/src/CLAUDE.md b/packages/icons/src/CLAUDE.md
new file mode 120000
index 000000000..47dc3e3d8
--- /dev/null
+++ b/packages/icons/src/CLAUDE.md
@@ -0,0 +1 @@
+AGENTS.md
\ No newline at end of file
diff --git a/packages/icons/src/class-name.ts b/packages/icons/src/class-name.ts
new file mode 100644
index 000000000..e9c123aeb
--- /dev/null
+++ b/packages/icons/src/class-name.ts
@@ -0,0 +1,11 @@
+/**
+ * Keep caller classes after the icon's compiled classes, matching the normal
+ * StyleX primitive contract without depending on @lody/ui internals.
+ */
+export function appendClassName(
+  compiled: string | undefined,
+  caller: string | undefined
+): string | undefined {
+  if (!caller) return compiled;
+  return compiled ? `${compiled} ${caller}` : caller;
+}
diff --git a/packages/icons/src/icon.tsx b/packages/icons/src/icon.tsx
new file mode 100644
index 000000000..c3f7a5525
--- /dev/null
+++ b/packages/icons/src/icon.tsx
@@ -0,0 +1,210 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, useId, type ComponentProps } from 'react';
+import { appendClassName } from './class-name';
+import { ICONS, type IconLayers, type IconMark, type IconName } from './registry';
+
+/**
+ * The four treatments of one drawing.
+ *
+ * `outline` is the stroke. `duotone` is the stroke over the back layer at 18%.
+ * `glyph` is everything filled, with the inner marks cut out — through a mask,
+ * so the cut is transparent and the icon can sit on any surface. `bulk` is no
+ * stroke at all: the back layer at 35%, the front at 100%, and the depth is the
+ * difference between them. Every variant reads the same paths; an icon that has
+ * no layers is outline in every variant rather than a different drawing.
+ */
+export type IconVariant = 'outline' | 'duotone' | 'glyph' | 'bulk';
+
+export interface IconProps extends Omit<ComponentProps<'svg'>, 'className' | 'children'> {
+  name: IconName;
+  variant?: IconVariant;
+  /**
+   * What the icon says, for a screen reader. Without one the icon is decoration
+   * and hidden from assistive technology; the text beside it carries the meaning.
+   */
+  title?: string;
+  className?: string;
+}
+
+/** The set's stroke, in user units of the 24 grid. */
+export const ICON_STROKE = 1.5;
+
+const DUOTONE_BACK = 0.18;
+const BULK_BACK = 0.35;
+const BULK_MID = 0.55;
+/** A cut mark is heavier than the stroke, so it reads at 16px through a fill. */
+const CUT = 1.75;
+const DOT = 2.5;
+
+const styles = stylex.create({
+  /**
+   * An icon fills the box it is given and inherits `currentColor`: the part
+   * holding it owns both its size and its colour, the same contract as the
+   * package's own glyphs.
+   */
+  icon: { display: 'block', width: '100%', height: '100%', flexShrink: 0 },
+});
+
+const STROKE_PROPS = {
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: ICON_STROKE,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const;
+
+function Mark({ mark }: { mark: IconMark }) {
+  if ('path' in mark) {
+    return <path d={mark.path} strokeWidth={mark.weight} />;
+  }
+  if ('circle' in mark) {
+    const [cx, cy, r] = mark.circle;
+    return <circle cx={cx} cy={cy} r={r} />;
+  }
+  const [x, y, width, height, rx] = mark.rect;
+  return <rect x={x} y={y} width={width} height={height} rx={rx} />;
+}
+
+function Outline({ marks }: { marks: readonly IconMark[] }) {
+  return (
+    <g {...STROKE_PROPS}>
+      {marks.map((mark, index) => (
+        <Mark key={index} mark={mark} />
+      ))}
+    </g>
+  );
+}
+
+/** The strokes outside the mass, drawn the same in every variant. */
+function Outer({ layers }: { layers: IconLayers }) {
+  if (!layers.outer && !layers.dots) return null;
+  return (
+    <g {...STROKE_PROPS}>
+      {layers.outer ? <path d={layers.outer} /> : null}
+      {layers.dots ? <path d={layers.dots} strokeWidth={DOT} /> : null}
+    </g>
+  );
+}
+
+function Duotone({ marks, layers }: { marks: readonly IconMark[]; layers: IconLayers }) {
+  return (
+    <>
+      <path d={layers.mass} fill="currentColor" fillOpacity={DUOTONE_BACK} />
+      <Outline marks={marks} />
+    </>
+  );
+}
+
+function Glyph({ layers, maskId }: { layers: IconLayers; maskId: string }) {
+  // A glyph with nothing to cut — a play triangle — is a fill and needs no mask.
+  const cuts = Boolean(layers.front || layers.detail);
+  return (
+    <>
+      {cuts ? (
+        <mask id={maskId} maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+          <rect width="24" height="24" fill="white" />
+          <g fill="none" stroke="black" strokeLinecap="round" strokeLinejoin="round">
+            {layers.front ? <path d={layers.front} strokeWidth={ICON_STROKE} /> : null}
+            {layers.detail ? <path d={layers.detail} strokeWidth={CUT} /> : null}
+          </g>
+        </mask>
+      ) : null}
+      <g fill="currentColor" mask={cuts ? `url(#${maskId})` : undefined}>
+        <path d={layers.mass} />
+        {layers.mid ? <path d={layers.mid} /> : null}
+        {layers.front ? <path d={layers.front} /> : null}
+      </g>
+      {layers.outer ? (
+        <g {...STROKE_PROPS}>
+          <path d={layers.outer} />
+        </g>
+      ) : null}
+      {layers.dots ? (
+        <g {...STROKE_PROPS}>
+          <path d={layers.dots} strokeWidth={DOT} stroke="currentColor" />
+        </g>
+      ) : null}
+    </>
+  );
+}
+
+function Bulk({ layers }: { layers: IconLayers }) {
+  const detail = layers.bulkDetail ?? layers.detail;
+  return (
+    <>
+      <path d={layers.mass} fill="currentColor" fillOpacity={BULK_BACK} />
+      {layers.mid ? <path d={layers.mid} fill="currentColor" fillOpacity={BULK_MID} /> : null}
+      {layers.front ? <path d={layers.front} fill="currentColor" /> : null}
+      {detail ? (
+        <g {...STROKE_PROPS}>
+          <path d={detail} />
+        </g>
+      ) : null}
+      <Outer layers={layers} />
+    </>
+  );
+}
+
+/**
+ * One icon of the set, in one of its four treatments.
+ *
+ * The drawing comes from `registry.ts`; this component only decides which
+ * layers to draw and how. It is an `<svg>` and nothing else — no box, no
+ * colour, no size of its own — because the rules give those to whatever holds
+ * the glyph, and an icon that stated a size would have to be overridden by
+ * every button, row and badge that already states one.
+ */
+export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
+  { name, variant = 'outline', title, className, ...rest },
+  ref
+) {
+  const definition = ICONS[name];
+  const { layers } = definition;
+  // `useId` is unique within one React tree, and the name is in the id too, so
+  // that where two trees on one page do collide — an island beside an island —
+  // the mask a glyph resolves is at worst an identical one. React's punctuation
+  // is stripped so the id survives `url(#…)`.
+  const maskId = `lody-icon-${name}-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const sx = stylex.props(styles.icon);
+  const labelled = title != null && title !== '';
+
+  let body;
+  if (!layers || variant === 'outline') {
+    body = <Outline marks={definition.marks} />;
+  } else if (variant === 'duotone') {
+    body = <Duotone marks={definition.marks} layers={layers} />;
+  } else if (variant === 'glyph') {
+    body = <Glyph layers={layers} maskId={maskId} />;
+  } else {
+    body = <Bulk layers={layers} />;
+  }
+
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 24 24"
+      role={labelled ? 'img' : undefined}
+      aria-label={labelled ? title : undefined}
+      aria-hidden={labelled ? undefined : true}
+      data-icon={name}
+      data-variant={layers ? variant : 'outline'}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    >
+      {labelled ? <title>{title}</title> : null}
+      {body}
+    </svg>
+  );
+});
+
+export type NamedIconProps = Omit<IconProps, 'name'>;
+
+/** A component for one name, so a caller imports `SidebarIcon` rather than a string. */
+export function createIcon(name: IconName, displayName: string) {
+  const Named = forwardRef<SVGSVGElement, NamedIconProps>(function NamedIcon(props, ref) {
+    return <Icon ref={ref} name={name} {...props} />;
+  });
+  Named.displayName = displayName;
+  return Named;
+}
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
new file mode 100644
index 000000000..124b4402f
--- /dev/null
+++ b/packages/icons/src/index.ts
@@ -0,0 +1,110 @@
+export { Icon, createIcon, ICON_STROKE } from './icon';
+export type { IconProps, IconVariant, NamedIconProps } from './icon';
+export { ICONS, ICON_FAMILIES, ICON_NAMES } from './registry';
+export type { IconDefinition, IconFamily, IconLayers, IconMark, IconName } from './registry';
+export {
+  BellRingIcon,
+  CheckDrawIcon,
+  ChevronToggleIcon,
+  EyeToggleIcon,
+  FolderToggleIcon,
+  IconFrame,
+  PlayPauseIcon,
+  RefreshTurnIcon,
+  SidebarToggleIcon,
+  StarToggleIcon,
+} from './stateful';
+export type { StatefulIconProps } from './stateful';
+
+import { createIcon } from './icon';
+
+export const ChevronUpIcon = createIcon('chevron-up', 'ChevronUpIcon');
+export const ChevronDownIcon = createIcon('chevron-down', 'ChevronDownIcon');
+export const ChevronLeftIcon = createIcon('chevron-left', 'ChevronLeftIcon');
+export const ChevronRightIcon = createIcon('chevron-right', 'ChevronRightIcon');
+export const ArrowLeftIcon = createIcon('arrow-left', 'ArrowLeftIcon');
+export const ArrowRightIcon = createIcon('arrow-right', 'ArrowRightIcon');
+export const ArrowDownIcon = createIcon('arrow-down', 'ArrowDownIcon');
+export const ArrowUpIcon = createIcon('arrow-up', 'ArrowUpIcon');
+export const SendIcon = createIcon('send', 'SendIcon');
+export const ExternalLinkIcon = createIcon('external-link', 'ExternalLinkIcon');
+export const MaximizeIcon = createIcon('maximize', 'MaximizeIcon');
+export const SidebarIcon = createIcon('sidebar', 'SidebarIcon');
+export const SidebarCollapsedIcon = createIcon('sidebar-collapsed', 'SidebarCollapsedIcon');
+export const SearchIcon = createIcon('search', 'SearchIcon');
+export const PlusIcon = createIcon('plus', 'PlusIcon');
+export const MinusIcon = createIcon('minus', 'MinusIcon');
+export const CheckIcon = createIcon('check', 'CheckIcon');
+export const CloseIcon = createIcon('close', 'CloseIcon');
+export const MoreIcon = createIcon('more', 'MoreIcon');
+export const PlayIcon = createIcon('play', 'PlayIcon');
+export const PauseIcon = createIcon('pause', 'PauseIcon');
+export const StopIcon = createIcon('stop', 'StopIcon');
+export const RefreshIcon = createIcon('refresh', 'RefreshIcon');
+export const EditIcon = createIcon('edit', 'EditIcon');
+export const TrashIcon = createIcon('trash', 'TrashIcon');
+export const CopyIcon = createIcon('copy', 'CopyIcon');
+export const DownloadIcon = createIcon('download', 'DownloadIcon');
+export const UploadIcon = createIcon('upload', 'UploadIcon');
+export const FilterIcon = createIcon('filter', 'FilterIcon');
+export const PinIcon = createIcon('pin', 'PinIcon');
+export const AttachIcon = createIcon('attach', 'AttachIcon');
+export const LinkIcon = createIcon('link', 'LinkIcon');
+export const UndoIcon = createIcon('undo', 'UndoIcon');
+export const SaveIcon = createIcon('save', 'SaveIcon');
+export const QuoteIcon = createIcon('quote', 'QuoteIcon');
+export const PinOffIcon = createIcon('pin-off', 'PinOffIcon');
+export const FileIcon = createIcon('file', 'FileIcon');
+export const FileTextIcon = createIcon('file-text', 'FileTextIcon');
+export const FileCodeIcon = createIcon('file-code', 'FileCodeIcon');
+export const FolderIcon = createIcon('folder', 'FolderIcon');
+export const FolderOpenIcon = createIcon('folder-open', 'FolderOpenIcon');
+export const WorktreeIcon = createIcon('worktree', 'WorktreeIcon');
+export const ArchiveIcon = createIcon('archive', 'ArchiveIcon');
+export const InboxIcon = createIcon('inbox', 'InboxIcon');
+export const LayersIcon = createIcon('layers', 'LayersIcon');
+export const FolderPlusIcon = createIcon('folder-plus', 'FolderPlusIcon');
+export const ImageIcon = createIcon('image', 'ImageIcon');
+export const BranchIcon = createIcon('branch', 'BranchIcon');
+export const CommitIcon = createIcon('commit', 'CommitIcon');
+export const MergeIcon = createIcon('merge', 'MergeIcon');
+export const PullRequestIcon = createIcon('pull-request', 'PullRequestIcon');
+export const DiffIcon = createIcon('diff', 'DiffIcon');
+export const IssueIcon = createIcon('issue', 'IssueIcon');
+export const CodeIcon = createIcon('code', 'CodeIcon');
+export const TagIcon = createIcon('tag', 'TagIcon');
+export const ReviewIcon = createIcon('review', 'ReviewIcon');
+export const ChecklistIcon = createIcon('checklist', 'ChecklistIcon');
+export const ForkIcon = createIcon('fork', 'ForkIcon');
+export const CheckCircleIcon = createIcon('check-circle', 'CheckCircleIcon');
+export const XCircleIcon = createIcon('x-circle', 'XCircleIcon');
+export const WarningIcon = createIcon('warning', 'WarningIcon');
+export const InfoCircleIcon = createIcon('info-circle', 'InfoCircleIcon');
+export const HelpCircleIcon = createIcon('help-circle', 'HelpCircleIcon');
+export const ClockIcon = createIcon('clock', 'ClockIcon');
+export const HistoryIcon = createIcon('history', 'HistoryIcon');
+export const StarIcon = createIcon('star', 'StarIcon');
+export const ShieldCheckIcon = createIcon('shield-check', 'ShieldCheckIcon');
+export const LockIcon = createIcon('lock', 'LockIcon');
+export const EyeIcon = createIcon('eye', 'EyeIcon');
+export const EyeOffIcon = createIcon('eye-off', 'EyeOffIcon');
+export const AlertCircleIcon = createIcon('alert-circle', 'AlertCircleIcon');
+export const CircleIcon = createIcon('circle', 'CircleIcon');
+export const ShieldAlertIcon = createIcon('shield-alert', 'ShieldAlertIcon');
+export const SessionIcon = createIcon('session', 'SessionIcon');
+export const SparkleIcon = createIcon('sparkle', 'SparkleIcon');
+export const AgentIcon = createIcon('agent', 'AgentIcon');
+export const ModelIcon = createIcon('model', 'ModelIcon');
+export const CpuIcon = createIcon('cpu', 'CpuIcon');
+export const TerminalIcon = createIcon('terminal', 'TerminalIcon');
+export const ZapIcon = createIcon('zap', 'ZapIcon');
+export const GlobeIcon = createIcon('globe', 'GlobeIcon');
+export const UserIcon = createIcon('user', 'UserIcon');
+export const BellIcon = createIcon('bell', 'BellIcon');
+export const SettingsIcon = createIcon('settings', 'SettingsIcon');
+export const SunIcon = createIcon('sun', 'SunIcon');
+export const MoonIcon = createIcon('moon', 'MoonIcon');
+export const MonitorIcon = createIcon('monitor', 'MonitorIcon');
+export const UsersIcon = createIcon('users', 'UsersIcon');
+export const MailIcon = createIcon('mail', 'MailIcon');
+export const WrenchIcon = createIcon('wrench', 'WrenchIcon');
diff --git a/packages/icons/src/registry.ts b/packages/icons/src/registry.ts
new file mode 100644
index 000000000..7ddb9e461
--- /dev/null
+++ b/packages/icons/src/registry.ts
@@ -0,0 +1,790 @@
+/**
+ * The drawing of every icon in the set, on one grid.
+ *
+ * Every icon is drawn on a 24 × 24 canvas with a 20 × 20 live area, a 1.5
+ * stroke with round caps and joins, 2px corners on containers and 2px nodes for
+ * the git family; strokes sit on .5 coordinates so 1.5px is crisp at 1×. A family
+ * shares one skeleton — the chat family one bubble, the file family one folded
+ * sheet, the git family the same two node columns — so its members line up in a
+ * list. The set is original; it follows Nucleo's drawing conventions, not its
+ * paths.
+ *
+ * `marks` is the outline. `layers`, where an icon has them, is what the filled
+ * variants are built from: `mass` is the back layer, `front` the layer in front
+ * of it, `mid` an optional one between, `detail` the marks inside the mass,
+ * `outer` the strokes outside it (an antenna, a pin, a bell's nub) that no
+ * variant may cut, and `dots` the eyes. An icon without layers is outline in
+ * every variant.
+ */
+
+export interface IconLayers {
+  /** The back layer: the container, the body, the sheet. A closed path. */
+  mass: string;
+  /** An optional layer between the mass and the front, at 55% in bulk. */
+  mid?: string;
+  /** The layer in front of the mass: a folder's front panel, a cube's top face. */
+  front?: string;
+  /** Whether `front` is also drawn as a stroke in the outline variants. */
+  strokeFront?: boolean;
+  /** Marks inside the mass: a terminal's prompt, a warning's exclamation. */
+  detail?: string;
+  /** What replaces `detail` in bulk, where the fills already carry the depth. */
+  bulkDetail?: string;
+  /** Strokes outside the mass, drawn in every variant and never cut. */
+  outer?: string;
+  /** Eyes: a dot stroke at weight 2.5. */
+  dots?: string;
+}
+
+export type IconMark =
+  | { path: string; weight?: number }
+  | { circle: readonly [cx: number, cy: number, r: number] }
+  | { rect: readonly [x: number, y: number, width: number, height: number, rx: number] };
+
+export interface IconDefinition {
+  /** The outline, drawn at 1.5 unless a mark states its own weight. */
+  marks: readonly IconMark[];
+  layers?: IconLayers;
+}
+
+export const ICON_FAMILIES = {
+  navigation: [
+    'chevron-up',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'arrow-down',
+    'send',
+    'external-link',
+    'maximize',
+    'sidebar',
+    'sidebar-collapsed',
+    'search',
+  ],
+  actions: [
+    'plus',
+    'minus',
+    'check',
+    'close',
+    'more',
+    'play',
+    'pause',
+    'stop',
+    'refresh',
+    'undo',
+    'edit',
+    'trash',
+    'copy',
+    'download',
+    'upload',
+    'save',
+    'filter',
+    'pin',
+    'pin-off',
+    'attach',
+    'link',
+    'quote',
+  ],
+  files: [
+    'file',
+    'file-text',
+    'file-code',
+    'folder',
+    'folder-open',
+    'folder-plus',
+    'worktree',
+    'archive',
+    'inbox',
+    'layers',
+    'image',
+  ],
+  git: [
+    'branch',
+    'fork',
+    'commit',
+    'merge',
+    'pull-request',
+    'diff',
+    'issue',
+    'code',
+    'tag',
+    'review',
+    'checklist',
+  ],
+  status: [
+    'check-circle',
+    'x-circle',
+    'alert-circle',
+    'warning',
+    'info-circle',
+    'help-circle',
+    'circle',
+    'clock',
+    'history',
+    'star',
+    'shield-check',
+    'shield-alert',
+    'lock',
+    'eye',
+    'eye-off',
+  ],
+  product: [
+    'session',
+    'sparkle',
+    'agent',
+    'model',
+    'cpu',
+    'terminal',
+    'monitor',
+    'zap',
+    'globe',
+    'user',
+    'users',
+    'mail',
+    'bell',
+    'settings',
+    'wrench',
+    'sun',
+    'moon',
+  ],
+} as const;
+
+export type IconFamily = keyof typeof ICON_FAMILIES;
+export type IconName = (typeof ICON_FAMILIES)[IconFamily][number];
+
+/**
+ * The arrow the composer sends with. `send` and `arrow-up` are one drawing and
+ * two meanings — a caller states what it means, not what it looks like — so the
+ * path is stated once rather than maintained twice.
+ */
+const ARROW_UP = 'M12 19.5v-15M5.5 11 12 4.5 18.5 11';
+
+/** The pin, and the pin with a line through it: one body, stated once. */
+const PIN = 'M9 4.5h6V7l-1 1v3.5l2.5 2.5V15h-9v-1l2.5-2.5V8l-1-1zM12 15v5.5';
+
+export const ICONS: Record<IconName, IconDefinition> = {
+  'chevron-up': {
+    marks: [{ path: 'M7 14l5-5 5 5' }],
+  },
+  'chevron-down': {
+    marks: [{ path: 'M7 10l5 5 5-5' }],
+  },
+  'chevron-left': {
+    marks: [{ path: 'M14 7l-5 5 5 5' }],
+  },
+  'chevron-right': {
+    marks: [{ path: 'M10 7l5 5-5 5' }],
+  },
+  'arrow-left': {
+    marks: [{ path: 'M19.5 12h-15M11 5.5 4.5 12 11 18.5' }],
+  },
+  'arrow-right': {
+    marks: [{ path: 'M4.5 12h15M13 5.5 19.5 12 13 18.5' }],
+  },
+  'arrow-down': {
+    marks: [{ path: 'M12 4.5v15M5.5 13l6.5 6.5 6.5-6.5' }],
+  },
+  send: {
+    marks: [{ path: ARROW_UP }],
+  },
+  'arrow-up': {
+    marks: [{ path: ARROW_UP }],
+  },
+  'external-link': {
+    marks: [
+      {
+        path: 'M10 5.5H6.5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V14M14 4.5h5.5V10M19.5 4.5L11 13',
+      },
+    ],
+  },
+  maximize: {
+    marks: [
+      {
+        path: 'M9 4.5H6.5a2 2 0 0 0-2 2V9M15 4.5h2.5a2 2 0 0 1 2 2V9M9 19.5H6.5a2 2 0 0 1-2-2V15M15 19.5h2.5a2 2 0 0 0 2-2V15',
+      },
+    ],
+  },
+  sidebar: {
+    marks: [
+      { path: 'M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z' },
+      { path: 'M10 4.5v15M5.5 8h2.5M5.5 10.5h2.5M5.5 13h2.5' },
+    ],
+  },
+  'sidebar-collapsed': {
+    // The rail is 3.5 units of air between two strokes, so it holds one mark of
+    // 2 with 0.75 either side, and two of them down its length. A narrower rail
+    // — the 3 units this was first drawn at — leaves 1.5, and a 2-wide mark in
+    // it merges into the frame on one side and the divider on the other.
+    marks: [
+      { path: 'M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z' },
+      { path: 'M8.5 4.5v15' },
+      { path: 'M6 9.5h.01M6 14.5h.01', weight: 2 },
+    ],
+  },
+  search: {
+    marks: [{ circle: [11, 11, 7] }, { path: 'M16 16l4.5 4.5' }],
+  },
+  plus: {
+    marks: [{ path: 'M12 5.5v13M5.5 12h13' }],
+  },
+  minus: {
+    marks: [{ path: 'M5.5 12h13' }],
+  },
+  check: {
+    marks: [{ path: 'M5 12.5l4.5 4.5 9.5-10' }],
+  },
+  close: {
+    marks: [{ path: 'M6.5 6.5l11 11M17.5 6.5l-11 11' }],
+  },
+  more: {
+    marks: [{ path: 'M6 12h.01M12 12h.01M18 12h.01', weight: 2.5 }],
+  },
+  play: {
+    marks: [
+      { path: 'M8 6.4c0-.8.9-1.3 1.6-.9l8.9 5.6c.7.4.7 1.4 0 1.8l-8.9 5.6c-.7.4-1.6-.1-1.6-.9z' },
+    ],
+    layers: {
+      mass: 'M8 6.4c0-.8.9-1.3 1.6-.9l8.9 5.6c.7.4.7 1.4 0 1.8l-8.9 5.6c-.7.4-1.6-.1-1.6-.9z',
+    },
+  },
+  pause: {
+    marks: [{ rect: [7, 5.5, 3.5, 13, 1] }, { rect: [13.5, 5.5, 3.5, 13, 1] }],
+  },
+  stop: {
+    marks: [{ rect: [5.5, 5.5, 13, 13, 2.5] }],
+  },
+  refresh: {
+    marks: [
+      {
+        path: 'M19.5 12a7.5 7.5 0 0 1-13 5.1L4.5 15M4.5 12a7.5 7.5 0 0 1 13-5.1L19.5 9M19.5 4.5V9H15M4.5 19.5V15H9',
+      },
+    ],
+  },
+  edit: {
+    marks: [{ path: 'M5 15.5l9.5-9.5 4 4L9 19.5H5zM12.5 8l4 4' }],
+  },
+  trash: {
+    marks: [
+      {
+        path: 'M4.5 6.5h15M9.5 6.5V4.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2M6.5 6.5l.8 12.1a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12.1M10 10.5v6M14 10.5v6',
+      },
+    ],
+  },
+  copy: {
+    marks: [
+      { rect: [8.5, 8.5, 12, 12, 2] },
+      { path: 'M15.5 5.5a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2' },
+    ],
+    layers: {
+      mass: 'M5.5 3.5h8a2 2 0 0 1 2 2v3h-5a2 2 0 0 0-2 2v5h-3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z',
+      front: 'M10.5 8.5h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z',
+      strokeFront: true,
+      detail: 'M15.5 8.5v-3a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3',
+      bulkDetail: '',
+    },
+  },
+  download: {
+    marks: [
+      { path: 'M12 4.5v11M7.5 11l4.5 4.5 4.5-4.5M4.5 16.5v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-1' },
+    ],
+  },
+  upload: {
+    marks: [
+      { path: 'M12 15.5v-11M7.5 9 12 4.5 16.5 9M4.5 16.5v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-1' },
+    ],
+  },
+  filter: {
+    marks: [{ path: 'M4.5 5.5h15l-5.5 6.5v5.5l-4 2v-7.5z' }],
+  },
+  pin: {
+    marks: [{ path: PIN }],
+  },
+  attach: {
+    marks: [
+      {
+        path: 'M15.5 8l-6.5 6.5a1.75 1.75 0 0 0 2.5 2.5l7-7a3.5 3.5 0 0 0-5-5l-7 7a5.25 5.25 0 0 0 7.4 7.4L20 13.3',
+      },
+    ],
+  },
+  link: {
+    marks: [
+      {
+        path: 'M10 14a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 0 0-5-5l-1 1M14 10a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 0 0 5 5l1-1',
+      },
+    ],
+  },
+  undo: {
+    // The turn `history` makes, gone the other way and ending in a head rather
+    // than a hand: back to where this was, not back through where it has been.
+    marks: [{ path: 'M8.5 5.5 4.5 9.5l4 4M4.5 9.5h9.5a5.5 5.5 0 0 1 0 11H9' }],
+  },
+  save: {
+    // The file family's folded sheet is a document; this is the disk it is
+    // written to, so it takes the same 2px container with the corner cut off
+    // the other way — the shutter at the top, the label at the foot. 15 by 15:
+    // a disk is square, and drawn 17 by 15 it reads as a letterbox.
+    marks: [
+      { path: 'M6.5 4.5h9l4 4v9a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z' },
+      { path: 'M9 4.5v4h6v-4M8 19.5v-4.5h8v4.5' },
+    ],
+    layers: {
+      mass: 'M6.5 4.5h9l4 4v9a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z',
+      front: 'M8 15h8v4.5h-8z',
+      detail: 'M9 4.5v4h6v-4M8 19.5v-4.5h8v4.5',
+      bulkDetail: 'M9 4.5v4h6v-4',
+    },
+  },
+  quote: {
+    // A quote mark is a ball with a tail, so it is drawn as one: two of them,
+    // on the set's own stroke. The first draft notched the tail out of a block
+    // and read as a pair of counters by 20px; the second swept the tail so far
+    // round the ball that it read as a lowercase e.
+    marks: [
+      {
+        path: 'M7.25 13.5a2.75 2.75 0 1 1 2.75-2.75c0 2.3-1 4-3 5.25M16.75 13.5a2.75 2.75 0 1 1 2.75-2.75c0 2.3-1 4-3 5.25',
+      },
+    ],
+  },
+  'pin-off': {
+    // `eye-off` breaks its drawing because a line across an eye lands on the
+    // pupil and reads as part of it. A pin has no such centre, and broken into
+    // fragments it stops being a pin at all — so this one stays whole and takes
+    // the line across it.
+    marks: [{ path: PIN }, { path: 'M4.5 4.5l15 15' }],
+  },
+  file: {
+    marks: [
+      { path: 'M7 3.5h6.5l5 5V19a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2z' },
+      { path: 'M13.5 3.5v5h5' },
+    ],
+  },
+  'file-text': {
+    marks: [
+      { path: 'M7 3.5h6.5l5 5V19a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2z' },
+      { path: 'M13.5 3.5v5h5M9 12.5h6M9 16h4' },
+    ],
+  },
+  'file-code': {
+    marks: [
+      { path: 'M7 3.5h6.5l5 5V19a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2z' },
+      { path: 'M13.5 3.5v5h5M10 12.5l-2 2 2 2M14 12.5l2 2-2 2' },
+    ],
+  },
+  folder: {
+    marks: [
+      { path: 'M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z' },
+      { path: 'M3.5 10.5h17' },
+    ],
+    layers: {
+      mass: 'M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z',
+      front: 'M3.5 10.5h17v6a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z',
+      detail: 'M3.5 10.5h17',
+      bulkDetail: '',
+    },
+  },
+  'folder-open': {
+    marks: [
+      { path: 'M3.5 17.5v-10a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v1.6' },
+      {
+        path: 'M3.5 17.5l2.6-6a1.5 1.5 0 0 1 1.4-.9h12.6a1 1 0 0 1 .9 1.4l-2.4 5.6a1.5 1.5 0 0 1-1.4.9H5.5a2 2 0 0 1-2-2z',
+      },
+    ],
+  },
+  worktree: {
+    marks: [
+      { path: 'M12.5 18.5h-7a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v3' },
+      { circle: [18.5, 18, 2] },
+      { path: 'M18.5 16v-2.5' },
+    ],
+  },
+  archive: {
+    marks: [
+      { rect: [3.5, 4.5, 17, 4, 1] },
+      { path: 'M5 8.5v9.5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5M10 12.5h4' },
+    ],
+  },
+  inbox: {
+    marks: [
+      {
+        path: 'M4.5 13h4l1.5 2.5h4L15.5 13h4M4.5 13v3.5a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V13M4.5 13l2.3-6.4a1.5 1.5 0 0 1 1.4-1h7.6a1.5 1.5 0 0 1 1.4 1L19.5 13',
+      },
+    ],
+  },
+  layers: {
+    marks: [
+      { path: 'M12 4.5l8.5 4-8.5 4-8.5-4z' },
+      { path: 'M3.5 12.5l8.5 4 8.5-4M3.5 16.5l8.5 4 8.5-4' },
+    ],
+  },
+  'folder-plus': {
+    // The folder's skeleton with a cross in it, and no front-panel line: the
+    // line splits the face the cross has to sit in, and two marks in a folder
+    // that small is one too many. The cross centres on the face, not the box.
+    //
+    // No layer model, like `folder-open`. `folder` fills its front panel at
+    // 100% over a 35% body, and a cross drawn on top of that panel is
+    // currentColor on currentColor — it disappears, and what is left is
+    // `folder`. A variant is a treatment of one drawing; where the treatment
+    // costs the drawing its meaning, the icon does not have one.
+    marks: [
+      { path: 'M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z' },
+      { path: 'M12 10v6M9 13h6' },
+    ],
+  },
+  image: {
+    // The 17x15 container `sidebar`, `terminal` and `monitor` share, holding a
+    // horizon instead of a screen: one sun and two ridges, the near one cutting
+    // in front of the far one so the depth survives the fill.
+    marks: [
+      { path: 'M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z' },
+      { circle: [8.5, 9, 1.5] },
+      { path: 'M3.5 16.5l4-4 4.5 4.5M11 15l3-3 6.5 6.5' },
+    ],
+    layers: {
+      mass: 'M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z',
+      detail: 'M7 9a1.5 1.5 0 1 1 3 0 1.5 1.5 0 1 1-3 0M3.5 16.5l4-4 4.5 4.5M11 15l3-3 6.5 6.5',
+    },
+  },
+  branch: {
+    marks: [
+      { circle: [7, 5, 2] },
+      { circle: [7, 19, 2] },
+      { circle: [17, 7, 2] },
+      { path: 'M7 7v10M17 9c0 3.5-10 2.5-10 8' },
+    ],
+  },
+  commit: {
+    marks: [{ circle: [12, 12, 3.5] }, { path: 'M3.5 12h5M15.5 12h5' }],
+  },
+  merge: {
+    marks: [
+      { circle: [7, 5, 2] },
+      { circle: [7, 19, 2] },
+      { circle: [17, 12, 2] },
+      { path: 'M7 7v10M15 12h-2.5A5.5 5.5 0 0 1 7 6.5V7' },
+    ],
+  },
+  'pull-request': {
+    marks: [
+      { circle: [7, 5, 2] },
+      { circle: [7, 19, 2] },
+      { circle: [17, 19, 2] },
+      { path: 'M7 7v10M17 17v-7a2.5 2.5 0 0 0-2.5-2.5H11M13.5 5L11 7.5 13.5 10' },
+    ],
+  },
+  diff: {
+    marks: [
+      { path: 'M6.5 4.5h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z' },
+      { path: 'M12 4.5v15M8.5 10.5v3M7 12h3M14 12h3' },
+    ],
+  },
+  issue: {
+    marks: [{ circle: [12, 12, 8.5] }, { circle: [12, 12, 1.5] }],
+  },
+  code: {
+    // The chevrons reach the live area and the slash leans across it: drawn
+    // with 4.5 of travel each and a slash 4 wide, the mass bunched in the
+    // middle and the icon read narrow next to everything else on its row.
+    marks: [{ path: 'M8.5 7.5 3 12l5.5 4.5M15.5 7.5 21 12l-5.5 4.5M14.5 5l-5 14' }],
+  },
+  tag: {
+    marks: [
+      {
+        path: 'M4.5 5.5v6.2c0 .5.2 1 .6 1.4l7.3 7.3a1.5 1.5 0 0 0 2.1 0l5.4-5.4a1.5 1.5 0 0 0 0-2.1l-7.3-7.3a2 2 0 0 0-1.4-.6H5.5a1 1 0 0 0-1 1z',
+      },
+      { path: 'M8.5 8.5h.01', weight: 2 },
+    ],
+  },
+  review: {
+    marks: [
+      {
+        path: 'M6.5 4.5h11a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H10l-3.5 3v-3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z',
+      },
+      { path: 'M9 11l2 2 4-4.5' },
+    ],
+  },
+  checklist: {
+    marks: [
+      {
+        path: 'M4.5 6.5L6 8l3-3M4.5 12.5L6 14l3-3M4.5 18.5L6 20l3-3M12 6.5h7.5M12 12h7.5M12 17.5h7.5',
+      },
+    ],
+  },
+  fork: {
+    // The git family's two node columns, opened: one line down from each head
+    // into a shoulder, and a single trunk from the shoulder to the foot. The
+    // heads sit on 7 and 17 like `branch`, `merge` and `pull-request`, so the
+    // family still lines up when it is read down a list.
+    marks: [
+      { circle: [7, 5, 2] },
+      { circle: [17, 5, 2] },
+      { circle: [12, 19, 2] },
+      { path: 'M17 7v1.5a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V7M12 10.5v6.5' },
+    ],
+  },
+  'check-circle': {
+    marks: [{ circle: [12, 12, 8.5] }, { path: 'M8.5 12.2l2.4 2.4 4.8-5' }],
+  },
+  'x-circle': {
+    marks: [{ circle: [12, 12, 8.5] }, { path: 'M9.5 9.5l5 5M14.5 9.5l-5 5' }],
+  },
+  warning: {
+    marks: [
+      { path: 'M10.7 5.3c.6-1 2-1 2.6 0l7.4 12.7c.6 1-.1 2.3-1.3 2.3H4.6c-1.2 0-1.9-1.3-1.3-2.3z' },
+      { path: 'M12 9.5v4M12 16.5h.01' },
+    ],
+    layers: {
+      mass: 'M10.7 5.3c.6-1 2-1 2.6 0l7.4 12.7c.6 1-.1 2.3-1.3 2.3H4.6c-1.2 0-1.9-1.3-1.3-2.3z',
+      detail: 'M12 9.5v4M12 16.5h.01',
+    },
+  },
+  'info-circle': {
+    marks: [{ circle: [12, 12, 8.5] }, { path: 'M12 11v5' }, { path: 'M12 8h.01', weight: 2 }],
+  },
+  'help-circle': {
+    marks: [
+      { circle: [12, 12, 8.5] },
+      { path: 'M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .9-1 1.7v.5' },
+      { path: 'M12 17h.01', weight: 2 },
+    ],
+  },
+  clock: {
+    marks: [{ circle: [12, 12, 8.5] }, { path: 'M12 7.5V12l3 2' }],
+  },
+  history: {
+    marks: [
+      { path: 'M4.5 12a7.5 7.5 0 1 0 7.5-7.5 7.8 7.8 0 0 0-5.6 2.4L4.5 8.8' },
+      { path: 'M4.5 4.5v4.3h4.3M12 8.5V12l2.5 1.8' },
+    ],
+  },
+  star: {
+    marks: [{ path: 'M12 4l2.5 5.2 5.7.8-4.1 4 1 5.7L12 17l-5.1 2.7 1-5.7-4.1-4 5.7-.8z' }],
+  },
+  'shield-check': {
+    marks: [
+      { path: 'M12 3.5l7.5 2.8v5.7c0 4.2-3 7.3-7.5 8.5-4.5-1.2-7.5-4.3-7.5-8.5V6.3z' },
+      { path: 'M8.75 12l2.25 2.25 4.25-4.5' },
+    ],
+  },
+  lock: {
+    marks: [
+      { rect: [5.5, 10.5, 13, 10, 2] },
+      { path: 'M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3' },
+      { path: 'M12 15.5h.01', weight: 2 },
+    ],
+  },
+  eye: {
+    marks: [
+      { path: 'M3.5 12c2-4.5 5-6.5 8.5-6.5s6.5 2 8.5 6.5c-2 4.5-5 6.5-8.5 6.5S5.5 16.5 3.5 12z' },
+      { circle: [12, 12, 2.75] },
+    ],
+  },
+  'eye-off': {
+    marks: [
+      {
+        path: 'M4.5 4.5l15 15M9.9 9.9a3 3 0 0 0 4.2 4.2M6.8 6.9C5.4 8 4.3 9.7 3.5 12c2 4.5 5 6.5 8.5 6.5 1.6 0 3-.4 4.3-1.1M10.3 5.7c.5-.1 1.1-.2 1.7-.2 3.5 0 6.5 2 8.5 6.5-.5 1.1-1 2-1.6 2.8',
+      },
+    ],
+  },
+  'alert-circle': {
+    // The circle family's ring, and `info-circle` turned over: a bar under the
+    // dot says what this is, a bar over it says what to do about it.
+    marks: [{ circle: [12, 12, 8.5] }, { path: 'M12 8v5' }, { path: 'M12 16h.01', weight: 2 }],
+  },
+  circle: {
+    // The ring with nothing in it: a state that has not happened yet. `issue`
+    // is this ring with its dot, and a ring that is filled is a `check-circle`.
+    marks: [{ circle: [12, 12, 8.5] }],
+  },
+  'shield-alert': {
+    marks: [
+      { path: 'M12 3.5l7.5 2.8v5.7c0 4.2-3 7.3-7.5 8.5-4.5-1.2-7.5-4.3-7.5-8.5V6.3z' },
+      { path: 'M12 8.5v4' },
+      { path: 'M12 15.5h.01', weight: 2 },
+    ],
+  },
+  session: {
+    marks: [
+      {
+        path: 'M6.5 4.5h11a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H10l-3.5 3v-3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z',
+      },
+      { path: 'M8.5 9.5h7M8.5 12.5h4' },
+    ],
+    layers: {
+      mass: 'M6.5 4.5h11a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H10l-3.5 3v-3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z',
+      detail: 'M8.5 9.5h7M8.5 12.5h4',
+    },
+  },
+  sparkle: {
+    marks: [
+      {
+        path: 'M10.5 6C11.1 10.2 13.8 12.9 18 13.5 13.8 14.1 11.1 16.8 10.5 21 9.9 16.8 7.2 14.1 3 13.5 7.2 12.9 9.9 10.2 10.5 6zM18 3.5c.2 1.4 1.1 2.3 2.5 2.5-1.4.2-2.3 1.1-2.5 2.5-.2-1.4-1.1-2.3-2.5-2.5 1.4-.2 2.3-1.1 2.5-2.5z',
+      },
+    ],
+    layers: {
+      mass: 'M10.5 6C11.1 10.2 13.8 12.9 18 13.5 13.8 14.1 11.1 16.8 10.5 21 9.9 16.8 7.2 14.1 3 13.5 7.2 12.9 9.9 10.2 10.5 6z',
+      front:
+        'M18 3.5c.2 1.4 1.1 2.3 2.5 2.5-1.4.2-2.3 1.1-2.5 2.5-.2-1.4-1.1-2.3-2.5-2.5 1.4-.2 2.3-1.1 2.5-2.5z',
+      strokeFront: true,
+    },
+  },
+  agent: {
+    marks: [
+      { rect: [5.5, 7.5, 13, 11, 3] },
+      { path: 'M12 7.5V4M5.5 13H3.5M18.5 13h2M9.5 16h5' },
+      { path: 'M9.5 12h.01M14.5 12h.01', weight: 2.5 },
+    ],
+    layers: {
+      mass: 'M8.5 7.5h7a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3h-7a3 3 0 0 1-3-3v-5a3 3 0 0 1 3-3z',
+      detail: 'M9.5 16h5',
+      outer: 'M12 7.5V4M5.5 13H3.5M18.5 13h2',
+      dots: 'M9.5 12h.01M14.5 12h.01',
+    },
+  },
+  model: {
+    marks: [
+      { path: 'M12 3.5l7.5 4.25v8.5L12 20.5l-7.5-4.25v-8.5z' },
+      { path: 'M4.5 7.75 12 12l7.5-4.25M12 12v8.5' },
+    ],
+    layers: {
+      mass: 'M12 3.5l7.5 4.25v8.5L12 20.5l-7.5-4.25v-8.5z',
+      mid: 'M12 12l7.5-4.25v8.5L12 20.5z',
+      front: 'M12 3.5l7.5 4.25L12 12 4.5 7.75z',
+      detail: 'M4.5 7.75 12 12l7.5-4.25M12 12v8.5',
+      bulkDetail: '',
+    },
+  },
+  cpu: {
+    marks: [
+      { rect: [6.5, 6.5, 11, 11, 2] },
+      { rect: [10, 10, 4, 4, 0.75] },
+      {
+        path: 'M9.5 4v2.5M14.5 4v2.5M9.5 17.5V20M14.5 17.5V20M4 9.5h2.5M4 14.5h2.5M17.5 9.5H20M17.5 14.5H20',
+      },
+    ],
+  },
+  terminal: {
+    marks: [
+      { path: 'M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z' },
+      { path: 'M7.5 9.5l3 2.5-3 2.5M12.5 15h4' },
+    ],
+    layers: {
+      mass: 'M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z',
+      detail: 'M7.5 9.5l3 2.5-3 2.5M12.5 15h4',
+    },
+  },
+  zap: {
+    marks: [{ path: 'M13 3.5 5.5 13.5h6L11 20.5l7.5-10h-6z' }],
+  },
+  globe: {
+    marks: [
+      { circle: [12, 12, 8.5] },
+      {
+        path: 'M3.5 12h17M12 3.5c2.5 2.5 3.5 5.5 3.5 8.5s-1 6-3.5 8.5c-2.5-2.5-3.5-5.5-3.5-8.5s1-6 3.5-8.5z',
+      },
+    ],
+  },
+  user: {
+    marks: [{ circle: [12, 8, 3.5] }, { path: 'M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6' }],
+  },
+  bell: {
+    // A bell is wider than it is tall. Drawn with an 11-wide dome over 6 units
+    // of straight side it was neither: a tube with a cap on it, 14 across and 13
+    // down. The dome is 12 now and the side sweeps out to a mouth 16.4 across a
+    // 12.7-tall body.
+    //
+    // The sweep is a curve rather than a flange, and the mouth has thickness,
+    // because a flange is a spike: the flare met the mouth line at 39 degrees,
+    // which `stroke-linejoin: round` hides in the outline and a fill cannot —
+    // glyph and bulk grew horns. Rounding the spike is not the answer either,
+    // since a 0.8 radius at that angle eats 2.28 units of a 3.2-unit flare. So
+    // the side arrives at the mouth vertically, turns through a 0.7 corner, and
+    // the mouth is a line under it. The clapper's arc is a segment and not a
+    // half-circle, so it hangs a unit clear and stops at the live area rather
+    // than 1.25 past it; `front` is that same silhouette filled, for bulk.
+    marks: [
+      {
+        path: 'M12 3.5v1.5M12 5.5a6 6 0 0 1 6 6c0 2.6 2.2 4.8 2.2 6a.7 .7 0 0 1-.7 .7H4.5a.7 .7 0 0 1-.7-.7c0-1.2 2.2-3.4 2.2-6a6 6 0 0 1 6-6zM10 20.5a3 3 0 0 0 4 0',
+      },
+    ],
+    layers: {
+      mass: 'M12 5.5a6 6 0 0 1 6 6c0 2.6 2.2 4.8 2.2 6a.7 .7 0 0 1-.7 .7H4.5a.7 .7 0 0 1-.7-.7c0-1.2 2.2-3.4 2.2-6a6 6 0 0 1 6-6z',
+      front: 'M9.75 19.75h4.5a2.25 2.25 0 0 1-4.5 0z',
+      outer: 'M12 3.5v1.5M10 20.5a3 3 0 0 0 4 0',
+    },
+  },
+  settings: {
+    marks: [
+      {
+        path: 'M18.79 10.31L20.91 10.75L20.91 13.25L18.79 13.69L18.00 15.61L19.19 17.42L17.42 19.19L15.61 18.00L13.69 18.79L13.25 20.91L10.75 20.91L10.31 18.79L8.39 18.00L6.58 19.19L4.81 17.42L6.00 15.61L5.21 13.69L3.09 13.25L3.09 10.75L5.21 10.31L6.00 8.39L4.81 6.58L6.58 4.81L8.39 6.00L10.31 5.21L10.75 3.09L13.25 3.09L13.69 5.21L15.61 6.00L17.42 4.81L19.19 6.58L18.00 8.39z',
+      },
+      { circle: [12, 12, 2.5] },
+    ],
+  },
+  sun: {
+    marks: [
+      { circle: [12, 12, 3.5] },
+      {
+        path: 'M12 3.5v2M12 18.5v2M3.5 12h2M18.5 12h2M6 6l1.4 1.4M16.6 16.6 18 18M6 18l1.4-1.4M16.6 7.4 18 6',
+      },
+    ],
+  },
+  moon: {
+    marks: [{ path: 'M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z' }],
+  },
+  monitor: {
+    // The machine this product is mostly about. The same 2px container as
+    // `sidebar` and `terminal`, three units shorter, standing on a foot: the
+    // foot is `outer`, so a glyph keeps the silhouette a screen alone loses.
+    marks: [
+      { path: 'M5.5 4.5h13a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z' },
+      { path: 'M12 16.5v3M8.5 19.5h7' },
+    ],
+    layers: {
+      mass: 'M5.5 4.5h13a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z',
+      outer: 'M12 16.5v3M8.5 19.5h7',
+    },
+  },
+  users: {
+    // `user` twice on one skeleton: the same head and the same shoulders, the
+    // second set cut off by the frame so the two read as a group and not as a
+    // pair. The one in front is whole; the one behind gives its far half.
+    //
+    // No layer model, like `user`. The one behind is half a person, and half
+    // a person as a stroke beside a filled one is not a person behind it —
+    // it is two fragments floating off the shoulder of a silhouette.
+    marks: [
+      { circle: [9.5, 8.5, 3.25] },
+      { path: 'M3 20c0-3.4 2.9-5.5 6.5-5.5s6.5 2.1 6.5 5.5' },
+      { path: 'M15.5 5.6a3.25 3.25 0 0 1 0 5.8M16.8 14.7c2.5.6 4.2 2.5 4.2 5.3' },
+    ],
+  },
+  mail: {
+    // A 2px container again, and the flap folded into it. The flap is `detail`
+    // rather than a second panel: it is a crease on the face, not a layer over
+    // it, so a glyph cuts it and bulk leaves the face flat.
+    marks: [
+      { path: 'M5.5 5.5h13a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2z' },
+      { path: 'M3.5 8l8.5 5.5L20.5 8' },
+    ],
+    layers: {
+      mass: 'M5.5 5.5h13a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2z',
+      detail: 'M3.5 8l8.5 5.5L20.5 8',
+    },
+  },
+  wrench: {
+    marks: [
+      {
+        path: 'M14.8 4.6a5 5 0 0 0-6.4 6.4l-4.3 4.3a2 2 0 0 0 2.8 2.8l4.3-4.3a5 5 0 0 0 6.4-6.4l-2.9 2.9-2.8-.7-.7-2.8z',
+      },
+    ],
+    layers: {
+      mass: 'M14.8 4.6a5 5 0 0 0-6.4 6.4l-4.3 4.3a2 2 0 0 0 2.8 2.8l4.3-4.3a5 5 0 0 0 6.4-6.4l-2.9 2.9-2.8-.7-.7-2.8z',
+    },
+  },
+};
+
+export const ICON_NAMES = Object.keys(ICONS) as IconName[];
diff --git a/packages/icons/src/stateful.tsx b/packages/icons/src/stateful.tsx
new file mode 100644
index 000000000..b4fc0d7e4
--- /dev/null
+++ b/packages/icons/src/stateful.tsx
@@ -0,0 +1,340 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type CSSProperties, type ReactNode, type SVGProps } from 'react';
+import { appendClassName } from './class-name';
+import { ICON_STROKE } from './icon';
+import { ICONS, type IconName } from './registry';
+
+/**
+ * The icons that have two states, and the way between them.
+ *
+ * Each one is a single `<svg>` whose parts are functions of one number, `--t`,
+ * from 0 to 1. The component sets `--t` from its prop and lets CSS transition
+ * it, so the parts — a divider's position, a chevron's angle, a check's drawn
+ * length — interpolate without a script driving them. Only transform, opacity
+ * and dash offset move; no path morphs. So at rest the drawing is the same path
+ * the static set uses, and where the custom-property transition is not
+ * supported the icon still snaps to the right state.
+ */
+const T = '--lody-icon-t';
+
+let registered = false;
+function registerT() {
+  if (registered || typeof CSS === 'undefined' || !('registerProperty' in CSS)) return;
+  registered = true;
+  try {
+    CSS.registerProperty({ name: T, syntax: '<number>', inherits: true, initialValue: '0' });
+  } catch {
+    // Registered already by another copy of this module: the property is there.
+  }
+}
+
+const t = `var(${T})`;
+const NO_MOTION = '@media (prefers-reduced-motion: reduce)';
+
+/** The one path an icon of the static set is drawn with, for a state that moves all of it. */
+function onePath(name: IconName): string {
+  const mark = ICONS[name].marks[0];
+  if (!('path' in mark)) throw new Error(`${name} is not drawn as a single path`);
+  return mark.path;
+}
+
+const styles = stylex.create({
+  icon: {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    flexShrink: 0,
+    transitionProperty: T,
+    transitionDuration: { default: '320ms', [NO_MOTION]: '0ms' },
+    transitionTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',
+  },
+  centred: { transformBox: 'view-box', transformOrigin: '12px 12px' },
+  /*
+   * sidebar: the divider slides from 10 to 8.5 and the rows retract into the
+   * rail as marks, so the collapsed state is still a sidebar — a narrow one
+   * showing only marks — rather than a frame with a symbol pasted on it.
+   *
+   * The rail those marks live in is 5 units wide and its two strokes take 1.5
+   * of them, which leaves 3.5: one mark of 2, with 0.75 of air on either side.
+   * A third mark does not fit that rhythm, so the middle row fades and the
+   * outer two become the marks.
+   *
+   * A row retracts by its dash and not by `scaleX`. A horizontal scale leaves
+   * a stroke's thickness alone but squashes its round caps, so a row scaled to
+   * nothing is a 0.8-wide sliver rather than the 2-wide mark
+   * `sidebar-collapsed` draws — the two states would be two different
+   * drawings. A dash retracted to zero length is a round cap and nothing else,
+   * which is a dot; the uniform scale that carries it from 1.5 to 2 grows the
+   * stroke without touching its shape.
+   */
+  sidebarDivider: { transformBox: 'view-box', transform: `translateX(calc(${t} * -1.5px))` },
+  // The gap is longer than the path, so the repeat lands past the end and the
+  // retracted row is one dot at its start rather than one at either end.
+  sidebarRow: { strokeDasharray: `calc(1 - ${t}) 2` },
+  sidebarRowTop: {
+    transformBox: 'view-box',
+    transformOrigin: '5.5px 8px',
+    transform: `translate(calc(${t} * 0.5px), calc(${t} * 1.5px)) scale(calc(1 + ${t} / 3))`,
+  },
+  sidebarRowMiddle: {
+    transformBox: 'view-box',
+    transformOrigin: '5.5px 10.5px',
+    transform: `translate(calc(${t} * 0.5px), calc(${t} * 1.5px)) scale(calc(1 + ${t} / 3))`,
+    opacity: `calc(1 - ${t})`,
+  },
+  sidebarRowBottom: {
+    transformBox: 'view-box',
+    transformOrigin: '5.5px 13px',
+    transform: `translate(calc(${t} * 0.5px), calc(${t} * 1.5px)) scale(calc(1 + ${t} / 3))`,
+  },
+  chevron: {
+    transformBox: 'view-box',
+    transformOrigin: '12px 12px',
+    transform: `rotate(calc(${t} * 180deg))`,
+  },
+  drawn: { strokeDasharray: 1, strokeDashoffset: `calc(1 - ${t})` },
+  pupil: {
+    transformBox: 'view-box',
+    transformOrigin: '12px 12px',
+    transform: `scale(calc(1 - ${t} * 0.6))`,
+  },
+  playOut: {
+    transformBox: 'view-box',
+    transformOrigin: '12px 12px',
+    opacity: `calc(1 - ${t})`,
+    transform: `scale(calc(1 - ${t} * 0.4))`,
+  },
+  pauseIn: {
+    transformBox: 'view-box',
+    transformOrigin: '12px 12px',
+    opacity: t,
+    transform: `scale(calc(0.6 + ${t} * 0.4))`,
+  },
+  star: {
+    transformBox: 'view-box',
+    transformOrigin: '12px 12px',
+    fill: 'currentColor',
+    fillOpacity: t,
+    transform: `scale(calc(1 + sin(${t} * 3.1416) * 0.15))`,
+  },
+  // The bell swings about its nub, so the mouth is 16 units from the pivot and
+  // the corner furthest from it decides the angle: at 14 degrees the stroke's
+  // edge lands 0.03 from the canvas, which is inside but is not a margin. 12
+  // leaves 0.42 and reads the same.
+  bell: {
+    transformBox: 'view-box',
+    transformOrigin: '12px 4px',
+    transform: `rotate(calc(sin(${t} * 6.2832) * 12deg))`,
+  },
+  spin: {
+    transformBox: 'view-box',
+    transformOrigin: '12px 12px',
+    transform: `rotate(calc(${t} * 360deg))`,
+  },
+  fadeOut: { opacity: `calc(1 - ${t})` },
+  fadeIn: { opacity: t },
+});
+
+export interface StatefulIconProps extends Omit<SVGProps<SVGSVGElement>, 'className' | 'children'> {
+  /** What the icon says, for a screen reader; without one it is decoration. */
+  title?: string;
+  className?: string;
+}
+
+interface FrameProps extends StatefulIconProps {
+  /** Where between the two states the icon is: 0 or 1 from a prop, anything between from a test. */
+  t: number;
+  children: ReactNode;
+}
+
+const Frame = forwardRef<SVGSVGElement, FrameProps>(function Frame(
+  { t: value, title, className, children, ...rest },
+  ref
+) {
+  registerT();
+  const sx = stylex.props(styles.icon);
+  const labelled = title != null && title !== '';
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={ICON_STROKE}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role={labelled ? 'img' : undefined}
+      aria-label={labelled ? title : undefined}
+      aria-hidden={labelled ? undefined : true}
+      data-t={value}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={{ ...sx.style, [T]: value } as CSSProperties}
+    >
+      {labelled ? <title>{title}</title> : null}
+      {children}
+    </svg>
+  );
+});
+
+const PANEL = 'M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z';
+
+/**
+ * The bell swings as one piece, so it is the static drawing and not a copy of
+ * it: a stateful icon that restates a path drifts from the set the first time
+ * the set is redrawn, which is how the collapsed sidebar came to be two
+ * different pictures. `test/icons.test.tsx` holds this to the registry.
+ */
+const BELL = onePath('bell');
+
+/**
+ * The sidebar, and whether it is open: the same frame, its divider moved and
+ * its rows retracted to the marks of a rail. Nothing is added in either state,
+ * and t = 1 is `sidebar-collapsed` exactly — the marks land on (6, 9.5) and
+ * (6, 14.5) at a weight of 2, which is what the registry draws there.
+ */
+export const SidebarToggleIcon = forwardRef<
+  SVGSVGElement,
+  StatefulIconProps & { collapsed: boolean }
+>(function SidebarToggleIcon({ collapsed, ...rest }, ref) {
+  return (
+    <Frame ref={ref} t={collapsed ? 1 : 0} {...rest}>
+      <path d={PANEL} />
+      <path d="M10 4.5v15" {...stylex.props(styles.sidebarDivider)} />
+      <path
+        d="M5.5 8h2.5"
+        pathLength={1}
+        {...stylex.props(styles.sidebarRow, styles.sidebarRowTop)}
+      />
+      <path
+        d="M5.5 10.5h2.5"
+        pathLength={1}
+        {...stylex.props(styles.sidebarRow, styles.sidebarRowMiddle)}
+      />
+      <path
+        d="M5.5 13h2.5"
+        pathLength={1}
+        {...stylex.props(styles.sidebarRow, styles.sidebarRowBottom)}
+      />
+    </Frame>
+  );
+});
+
+/** A disclosure's chevron: down when closed, turned to up when open. */
+export const ChevronToggleIcon = forwardRef<SVGSVGElement, StatefulIconProps & { open: boolean }>(
+  function ChevronToggleIcon({ open, ...rest }, ref) {
+    return (
+      <Frame ref={ref} t={open ? 1 : 0} {...rest}>
+        <path d="M7 10l5 5 5-5" {...stylex.props(styles.chevron)} />
+      </Frame>
+    );
+  }
+);
+
+/** A check that draws itself: nothing, then the tick, stroke by stroke. */
+export const CheckDrawIcon = forwardRef<SVGSVGElement, StatefulIconProps & { checked: boolean }>(
+  function CheckDrawIcon({ checked, ...rest }, ref) {
+    return (
+      <Frame ref={ref} t={checked ? 1 : 0} {...rest}>
+        <path d="M5 12.5l4.5 4.5 9.5-10" pathLength={1} {...stylex.props(styles.drawn)} />
+      </Frame>
+    );
+  }
+);
+
+/** An eye, and the slash across it: the pupil shrinks as the line is drawn. */
+export const EyeToggleIcon = forwardRef<SVGSVGElement, StatefulIconProps & { hidden: boolean }>(
+  function EyeToggleIcon({ hidden, ...rest }, ref) {
+    return (
+      <Frame ref={ref} t={hidden ? 1 : 0} {...rest}>
+        <path d="M3.5 12c2-4.5 5-6.5 8.5-6.5s6.5 2 8.5 6.5c-2 4.5-5 6.5-8.5 6.5S5.5 16.5 3.5 12z" />
+        <circle cx="12" cy="12" r="2.75" {...stylex.props(styles.pupil)} />
+        <path d="M4.5 4.5l15 15" pathLength={1} {...stylex.props(styles.drawn)} />
+      </Frame>
+    );
+  }
+);
+
+/** Play and pause, one handing over to the other through the centre. */
+export const PlayPauseIcon = forwardRef<SVGSVGElement, StatefulIconProps & { playing: boolean }>(
+  function PlayPauseIcon({ playing, ...rest }, ref) {
+    return (
+      <Frame ref={ref} t={playing ? 1 : 0} {...rest}>
+        <path
+          d="M8 6.4c0-.8.9-1.3 1.6-.9l8.9 5.6c.7.4.7 1.4 0 1.8l-8.9 5.6c-.7.4-1.6-.1-1.6-.9z"
+          {...stylex.props(styles.playOut)}
+        />
+        <g {...stylex.props(styles.pauseIn)}>
+          <rect x="7" y="5.5" width="3.5" height="13" rx="1" />
+          <rect x="13.5" y="5.5" width="3.5" height="13" rx="1" />
+        </g>
+      </Frame>
+    );
+  }
+);
+
+/** A star that fills when it is chosen, with a pop that settles back to size. */
+export const StarToggleIcon = forwardRef<SVGSVGElement, StatefulIconProps & { starred: boolean }>(
+  function StarToggleIcon({ starred, ...rest }, ref) {
+    return (
+      <Frame ref={ref} t={starred ? 1 : 0} {...rest}>
+        <path
+          d="M12 4l2.5 5.2 5.7.8-4.1 4 1 5.7L12 17l-5.1 2.7 1-5.7-4.1-4 5.7-.8z"
+          {...stylex.props(styles.star)}
+        />
+      </Frame>
+    );
+  }
+);
+
+/**
+ * A bell that rings once each time `ringing` changes: it swings about its nub
+ * and comes back to rest, so both ends of the transition are the same drawing.
+ */
+export const BellRingIcon = forwardRef<SVGSVGElement, StatefulIconProps & { ringing: boolean }>(
+  function BellRingIcon({ ringing, ...rest }, ref) {
+    return (
+      <Frame ref={ref} t={ringing ? 1 : 0} {...rest}>
+        <g {...stylex.props(styles.bell)}>
+          <path d={BELL} />
+        </g>
+      </Frame>
+    );
+  }
+);
+
+/** A refresh that turns once each time `turned` changes. A spinner that keeps going is `Spinner`. */
+export const RefreshTurnIcon = forwardRef<SVGSVGElement, StatefulIconProps & { turned: boolean }>(
+  function RefreshTurnIcon({ turned, ...rest }, ref) {
+    return (
+      <Frame ref={ref} t={turned ? 1 : 0} {...rest}>
+        <path
+          d="M19.5 12a7.5 7.5 0 0 1-13 5.1L4.5 15M4.5 12a7.5 7.5 0 0 1 13-5.1L19.5 9M19.5 4.5V9H15M4.5 19.5V15H9"
+          {...stylex.props(styles.spin)}
+        />
+      </Frame>
+    );
+  }
+);
+
+/** A folder and its open state: the back panel stays, the front flap is exchanged. */
+export const FolderToggleIcon = forwardRef<SVGSVGElement, StatefulIconProps & { open: boolean }>(
+  function FolderToggleIcon({ open, ...rest }, ref) {
+    return (
+      <Frame ref={ref} t={open ? 1 : 0} {...rest}>
+        <path d="M3.5 17.5v-10a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v1.6" />
+        <path
+          d="M20.5 10.6v5.9a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2M3.5 10.5h17"
+          {...stylex.props(styles.fadeOut)}
+        />
+        <path
+          d="M3.5 17.5l2.6-6a1.5 1.5 0 0 1 1.4-.9h12.6a1 1 0 0 1 .9 1.4l-2.4 5.6a1.5 1.5 0 0 1-1.4.9H5.5a2 2 0 0 1-2-2z"
+          {...stylex.props(styles.fadeIn)}
+        />
+      </Frame>
+    );
+  }
+);
+
+/** The frame itself, for a board or a test that wants to pin `--t` between the states. */
+export const IconFrame = Frame;
diff --git a/packages/icons/stylex-options.ts b/packages/icons/stylex-options.ts
new file mode 100644
index 000000000..7ac6b00b7
--- /dev/null
+++ b/packages/icons/stylex-options.ts
@@ -0,0 +1,10 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
+
+export const stylexOptions = {
+  unstable_moduleResolution: { type: 'commonJS' as const, rootDir: repoRoot },
+  useCSSLayers: { prefix: 'stylex', before: ['theme', 'base'], after: ['components', 'utilities'] },
+  cssInjectionTarget: (fileName: string) => /(^|\/)index-[^/]+\.css$/.test(fileName),
+};
diff --git a/packages/icons/test/icons.test.tsx b/packages/icons/test/icons.test.tsx
new file mode 100644
index 000000000..dd91ea6dc
--- /dev/null
+++ b/packages/icons/test/icons.test.tsx
@@ -0,0 +1,221 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import {
+  BellRingIcon,
+  ChevronToggleIcon,
+  createIcon,
+  Icon,
+  IconFrame,
+  ICONS,
+  ICON_FAMILIES,
+  ICON_NAMES,
+  SidebarToggleIcon,
+  SidebarIcon,
+  type IconName,
+  type IconVariant,
+} from '../src/index';
+
+const VARIANTS: IconVariant[] = ['outline', 'duotone', 'glyph', 'bulk'];
+
+/** The icons that carry a layer model, and so have four treatments. */
+const layered = ICON_NAMES.filter((name) => ICONS[name].layers != null);
+
+describe('the registry', () => {
+  test('every family member is drawn, once, under a kebab-case name', () => {
+    const listed = Object.values(ICON_FAMILIES).flat();
+    expect(new Set(listed).size).toBe(listed.length);
+    expect([...listed].sort()).toEqual([...ICON_NAMES].sort());
+    for (const name of ICON_NAMES) {
+      expect(name).toMatch(/^[a-z][a-z0-9]*(-[a-z0-9]+)*$/);
+      expect(ICONS[name].marks.length, `${name} draws nothing`).toBeGreaterThan(0);
+    }
+  });
+
+  test('a layered icon closes its mass, and its dots are dots', () => {
+    // The filled variants fill `mass`; an open path would fill along its chord
+    // and the glyph would be a different shape from the outline.
+    for (const name of layered) {
+      const { mass, dots } = ICONS[name].layers!;
+      expect(mass.trim().endsWith('z'), `${name}.mass is not closed`).toBe(true);
+      if (dots) expect(dots).toMatch(/h\.01/);
+    }
+  });
+
+  test('the drawing stays on the 24 grid', () => {
+    // Absolute commands and every circle and rect state coordinates directly;
+    // a value past the canvas is an icon that will be clipped by its own box.
+    for (const name of ICON_NAMES) {
+      for (const mark of ICONS[name].marks) {
+        if ('path' in mark) {
+          for (const m of mark.path.matchAll(/[MLHV]([^a-zA-Z]*)/g)) {
+            for (const value of m[1].match(/-?\d*\.?\d+/g) ?? []) {
+              const n = Number(value);
+              expect(n, `${name}: ${value} in ${mark.path}`).toBeGreaterThanOrEqual(0);
+              expect(n, `${name}: ${value} in ${mark.path}`).toBeLessThanOrEqual(24);
+            }
+          }
+        } else if ('circle' in mark) {
+          const [cx, cy, r] = mark.circle;
+          expect(cx - r).toBeGreaterThanOrEqual(0);
+          expect(cx + r).toBeLessThanOrEqual(24);
+          expect(cy - r).toBeGreaterThanOrEqual(0);
+          expect(cy + r).toBeLessThanOrEqual(24);
+        } else {
+          const [x, y, width, height] = mark.rect;
+          expect(x).toBeGreaterThanOrEqual(0);
+          expect(y).toBeGreaterThanOrEqual(0);
+          expect(x + width).toBeLessThanOrEqual(24);
+          expect(y + height).toBeLessThanOrEqual(24);
+        }
+      }
+    }
+  });
+});
+
+describe('Icon', () => {
+  test('is decoration unless it is given something to say', () => {
+    const silent = renderToStaticMarkup(<Icon name="sidebar" />);
+    expect(silent).toContain('aria-hidden="true"');
+    expect(silent).not.toContain('role=');
+    const named = renderToStaticMarkup(<Icon name="sidebar" title="Toggle sidebar" />);
+    expect(named).toContain('role="img"');
+    expect(named).toContain('aria-label="Toggle sidebar"');
+    expect(named).toContain('<title>Toggle sidebar</title>');
+    expect(named).not.toContain('aria-hidden');
+  });
+
+  test('draws the outline at the set stroke and inherits its colour', () => {
+    const html = renderToStaticMarkup(<Icon name="branch" />);
+    expect(html).toContain('viewBox="0 0 24 24"');
+    expect(html).toContain('stroke="currentColor"');
+    expect(html).toContain('stroke-width="1.5"');
+    expect(html).toContain('stroke-linecap="round"');
+    expect(html).not.toContain('fill="currentColor"');
+    // A mark may state its own weight: the eyes and the dots of an ellipsis.
+    expect(renderToStaticMarkup(<Icon name="more" />)).toContain('stroke-width="2.5"');
+  });
+
+  test('an icon without layers is outline in every variant', () => {
+    const outline = renderToStaticMarkup(<Icon name="branch" />);
+    for (const variant of VARIANTS) {
+      const html = renderToStaticMarkup(<Icon name="branch" variant={variant} />);
+      expect(html).toContain('data-variant="outline"');
+      expect(html).toBe(outline);
+    }
+  });
+
+  test('duotone is the outline over the back layer at 18%', () => {
+    const html = renderToStaticMarkup(<Icon name="folder" variant="duotone" />);
+    expect(html).toContain('fill-opacity="0.18"');
+    expect(html).toContain('stroke-width="1.5"');
+  });
+
+  test('glyph cuts its marks through a mask, so the cut is transparent', () => {
+    // The board's first draft painted the cuts in the panel colour, which made a
+    // glyph correct on exactly one background. A mask is a hole.
+    const html = renderToStaticMarkup(<Icon name="terminal" variant="glyph" />);
+    expect(html).toMatch(/<mask id="lody-icon-[a-zA-Z0-9_-]+"/);
+    expect(html).toMatch(/mask="url\(#lody-icon-[a-zA-Z0-9_-]+\)"/);
+    expect(html).toContain('stroke="black"');
+    expect(html).toContain('fill="currentColor"');
+    expect(html).not.toContain('fill-opacity');
+  });
+
+  test('a glyph with nothing to cut is a plain fill', () => {
+    const html = renderToStaticMarkup(<Icon name="play" variant="glyph" />);
+    expect(html).not.toContain('<mask');
+    expect(html).toContain('fill="currentColor"');
+  });
+
+  test('two glyphs on one page do not share a mask, and the name is in the id', () => {
+    const html = renderToStaticMarkup(
+      <>
+        <Icon name="terminal" variant="glyph" />
+        <Icon name="folder" variant="glyph" />
+      </>
+    );
+    const ids = [...html.matchAll(/<mask id="([^"]+)"/g)].map((m) => m[1]);
+    expect(ids).toHaveLength(2);
+    expect(ids[0]).not.toBe(ids[1]);
+    // Two React trees on one page restart `useId`; with the name in the id the
+    // mask one glyph then resolves is, at worst, an identical one.
+    expect(ids[0]).toMatch(/^lody-icon-terminal-/);
+    expect(ids[1]).toMatch(/^lody-icon-folder-/);
+  });
+
+  test('a glyph keeps the strokes outside its mass', () => {
+    // The agent's antenna and ears, the bell's nub: cutting them would change
+    // the silhouette, and the silhouette is what a glyph is for.
+    const html = renderToStaticMarkup(<Icon name="agent" variant="glyph" />);
+    expect(html).toContain(`d="${ICONS.agent.layers!.outer}"`);
+    expect(html).toContain('stroke-width="2.5"');
+  });
+
+  test('bulk is two fills and no outline', () => {
+    const html = renderToStaticMarkup(<Icon name="model" variant="bulk" />);
+    expect(html).toContain('fill-opacity="0.35"');
+    expect(html).toContain('fill-opacity="0.55"');
+    expect(html).toContain(`d="${ICONS.model.layers!.front}" fill="currentColor"`);
+    expect(html).not.toContain(`d="${ICONS.model.layers!.mass}" stroke`);
+    // The cube's own edge line is not drawn in bulk: the faces' opacities are
+    // the edge, and a 100% stroke over a 35% face was the stick that stuck out.
+    expect(html).not.toContain(ICONS.model.layers!.detail!);
+  });
+
+  test('a named icon is the same element with its name fixed', () => {
+    const Made = createIcon('branch', 'BranchIcon');
+    expect(Made.displayName).toBe('BranchIcon');
+    expect(renderToStaticMarkup(<SidebarIcon variant="bulk" />)).toBe(
+      renderToStaticMarkup(<Icon name="sidebar" variant="bulk" />)
+    );
+  });
+
+  test('every icon renders in every variant', () => {
+    for (const name of ICON_NAMES as IconName[]) {
+      for (const variant of VARIANTS) {
+        expect(renderToStaticMarkup(<Icon name={name} variant={variant} />)).toContain('<svg');
+      }
+    }
+  });
+});
+
+describe('a stateful icon', () => {
+  test('states where it is as one number the transition can follow', () => {
+    const open = renderToStaticMarkup(<SidebarToggleIcon collapsed={false} />);
+    const closed = renderToStaticMarkup(<SidebarToggleIcon collapsed />);
+    expect(open).toContain('--lody-icon-t:0');
+    expect(closed).toContain('--lody-icon-t:1');
+    expect(open).toContain('data-t="0"');
+    // Both states are the same markup: nothing is added or removed, so the way
+    // between them is interpolation and not a swap.
+    expect(open.replace('--lody-icon-t:0', '').replace('data-t="0"', '')).toBe(
+      closed.replace('--lody-icon-t:1', '').replace('data-t="1"', '')
+    );
+  });
+
+  test('is decoration unless titled, like the static set', () => {
+    expect(renderToStaticMarkup(<ChevronToggleIcon open />)).toContain('aria-hidden="true"');
+    expect(renderToStaticMarkup(<ChevronToggleIcon open title="Collapse" />)).toContain(
+      'role="img"'
+    );
+  });
+
+  test('the bell that rings is the bell the set draws', () => {
+    // A stateful icon that restates a path drifts from the static one the first
+    // time the set is redrawn — which is how the collapsed sidebar became two
+    // different pictures. Where a state moves the whole drawing, it reads it.
+    const mark = ICONS.bell.marks[0];
+    expect('path' in mark).toBe(true);
+    const outline = (mark as { path: string }).path;
+    expect(renderToStaticMarkup(<BellRingIcon ringing={false} />)).toContain(`d="${outline}"`);
+  });
+
+  test('a frame can be pinned between the states', () => {
+    const html = renderToStaticMarkup(
+      <IconFrame t={0.5}>
+        <path d="M7 10l5 5 5-5" />
+      </IconFrame>
+    );
+    expect(html).toContain('--lody-icon-t:0.5');
+  });
+});
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
new file mode 100644
index 000000000..2dcdb6889
--- /dev/null
+++ b/packages/icons/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../configs/tsconfig.extend.json",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "include": ["src/**/*", "test/**/*", "stylex-options.ts", "vitest.config.ts"]
+}
diff --git a/packages/icons/vitest.config.ts b/packages/icons/vitest.config.ts
new file mode 100644
index 000000000..0d5078252
--- /dev/null
+++ b/packages/icons/vitest.config.ts
@@ -0,0 +1,12 @@
+import stylex from '@stylexjs/unplugin';
+import { defineConfig } from 'vitest/config';
+import { stylexOptions } from './stylex-options';
+
+export default defineConfig({
+  plugins: [stylex.rollup({ ...stylexOptions, dev: false })],
+  test: {
+    include: ['test/**/*.test.ts', 'test/**/*.test.tsx'],
+    environment: 'jsdom',
+    env: { NODE_ENV: 'development' },
+  },
+});
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
new file mode 100644
index 000000000..56b95fc3f
--- /dev/null
+++ b/packages/ui/AGENTS.md
@@ -0,0 +1,116 @@
+# `@lody/ui`
+
+`CLAUDE.md` is a symlink to this file. Edit `AGENTS.md` only.
+
+Base UI + StyleX component library that `packages/components/src/ui` migrates
+into one component at a time. Source-consumed: consumers compile it through
+`@stylexjs/unplugin` with this package's `stylex-options.ts`.
+
+- Package styles use StyleX: no Tailwind, `cn`, `cva`, `tailwind-merge` or
+  `@source` scanning here. Component props own visual variants, sizes, tones and
+  shapes. A caller's `className` may carry layout or interaction constraints
+  during migration, never the deleted component's visual design.
+- Depends on React, `@base-ui/react`, `@stylexjs/stylex` and `@lody/icons`;
+  never on `@lody/components`, `@lody/platform` or a cloud package.
+- No border token exists. Edges are wells, raised shadows, elevation shadows
+  and the focus ring. Read `src/tokens/RULES.md` before adding a token or style.
+- A focus or invalid ring is a 2px `box-shadow` composed with the control's own
+  shadow, never an `outline`: the shell resets every outline with `!important`,
+  which no layer order overrides. A control whose edge changes with its state
+  restates the ring with it; CSS cannot append to a box-shadow.
+- Checkbox, Radio and Switch render a real `<button>` through Base UI's
+  `nativeButton`, so `:disabled`, `:focus-visible` and a `<label>` reach them.
+- Controls in the field family read validity and disabled from `Field.Root`
+  through Base UI's state callback on `className`, never a prop of their own. The
+  invalid ring follows `aria-invalid`, so it and what a screen reader announces
+  are one fact; `src/field/invalid.ts` owns that reading, since StyleX cannot
+  express an attribute selector.
+- A trigger reads `field` and the list it opens reads `popup`: different rungs,
+  and the list shares its vocabulary with a menu, not an input.
+  `src/popup/surface.ts` holds what floating parts share, as `src/field/well.ts`
+  does for controls and `src/dialog/surface.ts` for modals.
+- `Select.Value` resolves its text from `Select.Root items`, never the rows: a
+  caller whose row text differs from its value states the list on the root too,
+  or the trigger names the raw value (`test/select.test.tsx`).
+- Every floating part's `Content` assembles Base UI's portal, positioner and
+  popup and takes the positioning props outside. They mount into the nearest
+  `PopupContainerProvider` on the absolute strategy: a container centred with
+  `translate` is the containing block for `fixed` descendants.
+- `Menu` is the dropdown; `ContextMenu` and `Menubar` restate only the way in
+  and re-export its rows. A menu reads `popup` and replaces one declaration,
+  `--anchor-width`; surface and rows come from `src/popup/surface.ts`.
+- Whatever holds a glyph gives it a box, because this package's glyphs and
+  icons state 100% and StyleX has no descendant selector: a menu row's leading
+  box, a badge's, an avatar fallback's, an icon-only `Button`'s. A caller's icon
+  states 100% too; a checkbox row's box holds its mark only.
+- Every trigger here is Base UI's, unstyled: a surface opens a menu, popover or
+  modal with what it had there, `render={<Button …/>}`. Post-close focus is the
+  product's, as `finalFocus`.
+- `Popover` reads `popup` too and replaces five of a list's declarations (anchor
+  width, row inset, the three making type prose); `test/popover.test.tsx` pins it.
+- Dialog, AlertDialog and Drawer are one family on the modal rung sharing
+  `dialog/surface.ts`; only the way in and what dismisses them differ. An outside
+  press does not answer an alert dialog; Escape does. `Content` names its panel
+  to `PopupContainerProvider` in **state, not a ref**: React attaches a child's
+  refs first, so a popup mounting in the same commit lands on the body.
+- There is no `Sheet`: a panel arriving from an edge is Base UI's `Drawer`, whose
+  viewport lays it out so the panel's `transform` carries the drag. `side` is
+  the writing direction's edge, `inset` the second axis.
+- `Tooltip` is the one floating part not reading `popup`: the ladder inverts
+  it, `label` under `shadow.medium`. Base UI makes it visual-only — no role, no
+  `aria-describedby` — so every trigger states its `aria-label`.
+- Tabs, Accordion and Collapsible are one `disclosure` family sharing
+  `disclosure/surface.ts`. `Tabs.List` draws its own indicator and states the
+  size once for every tab; a revealed panel's padding rides on a child: Base UI
+  animates a `scrollHeight`, which counts it.
+- Alert, Toast, Progress, Skeleton and Spinner are one `feedback` family. A tone
+  is a tint and a mark, never a fill; the mark is the part's (`feedback/tone.ts`)
+  and `feedback/surface.ts` mixes the tint from its rung's background.
+  `disabled` from Base UI state, not `:disabled`.
+- `Table` and `Pagination` are one `table` family; Base UI ships neither.
+  **A column is stated once**: `Table` takes `columns` and owns width, ordering
+  (one column, on the root), selection (a `Checkbox`, never `aria-selected`),
+  the empty row's span, the sticky head and the narrow stack. `table/parts.tsx`
+  is the element layer. A table draws no surface: `border-collapse: separate`
+  lets its line, head and row ring be box-shadows.
+- Card, Badge and Separator answer "what is an edge?": a card's is its shadow
+  (the card rung with a Dialog's parts, no nesting; `interactive` only marks it
+  pressable), a badge is on **no rung** so its tone is a film and its word that
+  tone pulled halfway to ink, and a `Separator` _is_ the one allowed line: no
+  token group, announced, no margin.
+- Avatar and Kbd stand for something outside the interface, so both take a
+  gray. **An avatar's rung picks its letters**; its box is a ceiling too, or a
+  flex minimum widens a 16px circle. Circle is a person, tile a thing; identity
+  colour is a `style`. A `Kbd` is never a menu row's shortcut;
+  `Tooltip.Content`'s `kbdOnInvertedTheme` inverts a cap on a chip.
+- Icons come from `@lody/icons`; `src/icons` is only the compatibility export
+  for older callers. The package's playground is its surface rather than the
+  board. The grid, the four treatments and the one number a state moves by are
+  documented in [the icon rules](../icons/src/AGENTS.md).
+- A forced palette travels to a portalled popup: `ThemeRoot` publishes its mode
+  and `Content` re-declares it on the positioner, since a popup mounts outside
+  the subtree declaring it — a light panel would otherwise open a dark list.
+- A part the shell may ring states no edge (`box-shadow: none`,
+  `outline: none`): the shell rings any focused `[tabindex]`. `Combobox.Empty`
+  stays mounted for its live region, collapsing through `:empty`.
+- Files calling `defineVars`, `createTheme` or `defineConsts` end in
+  `.stylex.ts`. Their arguments are object literals; the compiler cannot
+  evaluate helpers. Vars are imported by a specifier ending in `.stylex`
+  (`@lody/ui/tokens/colors.stylex`), never via a barrel.
+- Component tokens live beside the component as
+  `<name>/<name>.tokens.stylex.ts` and reference semantic tokens or literal px.
+  One pointing at a semantic colour also belongs in that file's `createTheme`
+  palette theme, listed in `componentPaletteThemes` in `src/theme/theme.tsx`: a
+  custom property declared only at the root keeps the root palette in a themed
+  subtree. A family shares one group (`field` the label, every control and
+  their messages; `popup` the lists they open), not one per component.
+- `src/gallery` is the token board: a new token, variant, size, tone or shape
+  lands with its entry in the same change, read off the rendered node, not
+  repeated. `test/gallery.test.tsx` fails when a token has no entry. **A
+  sample that is a rung needs a different rung under it**: the panel is the
+  card rung, and in dark region and card are one value. No test sees this.
+- `corner.shape` goes wherever a radius goes, except `radius.full`: a pill or a
+  circle takes `corner.round`, since a squircle there is a superellipse; round
+  corners are the fallback outside Chromium.
+- A Radix file in `packages/components/src/ui` is deleted when its in-repo
+  callers reach zero; private consumers sync on typecheck.
diff --git a/packages/ui/CLAUDE.md b/packages/ui/CLAUDE.md
new file mode 120000
index 000000000..47dc3e3d8
--- /dev/null
+++ b/packages/ui/CLAUDE.md
@@ -0,0 +1 @@
+AGENTS.md
\ No newline at end of file
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 000000000..cf5b5aa04
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1,662 @@
+# `@lody/ui`
+
+`@lody/ui` contains Lody's low-level visual primitives and semantic StyleX
+tokens. Product surfaces compose these primitives through
+`@lody/components`; the package does not contain product workflows or platform
+behavior.
+
+| Area                | Responsibility                                                      |
+| ------------------- | ------------------------------------------------------------------- |
+| `src/tokens`        | Semantic color, type, spacing, motion, radius, and elevation tokens |
+| `src/theme`         | Applies light or dark StyleX themes to a subtree                    |
+| `src/button`        | Base UI Button behavior and Lody variants, sizes, tones, and shapes |
+| `src/field`         | Base UI Field composition: label, Input, Textarea, Checkbox, Radio, Switch, Select, Combobox, help, and error |
+| `src/popup`         | The floating surface a list, a menu or a popover opens on, and its tokens |
+| `src/menu`          | Menu, ContextMenu and Menubar: commands on that surface             |
+| `src/popover`       | The same surface holding content rather than rows                   |
+| `src/dialog`        | Dialog and AlertDialog: the modal rung, and its tokens               |
+| `src/drawer`        | The same rung, arriving from an edge and draggable back out          |
+| `src/tooltip`       | The inverted chip that names what is under the pointer               |
+| `src/disclosure`    | Tabs, Accordion and Collapsible: a trigger, and the thing it shows   |
+| `src/feedback`      | Alert, Toast, Progress, Skeleton and Spinner: what the system says back |
+| `src/card`          | The card rung as a component: a block of a page, and its tokens      |
+| `src/badge`         | A standing fact about the thing beside it, on no rung at all         |
+| `src/separator`     | The one line the rules allow: between the rows of a list or a table  |
+| `@lody/icons`       | The independent icon set: one 24 grid, four treatments of each drawing, and the icons that move between two states |
+| `playground`        | The icon playground: a standalone Vite page for searching, scaling, recolouring and copying the set |
+| `src/gallery`       | The token board: every token and primitive state, in both palettes  |
+| `stylex-options.ts` | Shared compiler configuration for source-consuming hosts            |
+
+Consumers compile this package's source with `@stylexjs/unplugin` and its exported
+StyleX options. Visual choices use component props. `className` is available for
+layout and interaction constraints in product surfaces; it must not duplicate a
+primitive's visual rules.
+
+A field is a composition rather than one component: `Field.Root` owns the name,
+the disabled flag and validity, and `Field.Label`, `Input`, `Textarea`,
+`Checkbox`, `Radio`, `Switch`, `Field.Description` and `Field.Error` read that
+state from it.
+
+```tsx
+<Field.Root name="title" invalid={!title}>
+  <Field.Label>Session title</Field.Label>
+  <Input placeholder="Describe the task" />
+  <Field.Description>Shown in the sidebar.</Field.Description>
+  <Field.Error match>Enter a title.</Field.Error>
+</Field.Root>
+```
+
+`Checkbox`, `Radio` and `Switch` are the same well as a box: off is the well
+rung, on is ink. Each renders a real `<button>` with Base UI's hidden input
+beside it, so a `<label>` points at it and the family's `:disabled` and
+`:focus-visible` rules reach it without a second mechanism.
+
+```tsx
+<Field.Label>
+  <Checkbox name="notify" defaultChecked />
+  Notify me when the session finishes
+</Field.Label>
+```
+
+A `Select` is a well-rung trigger plus a floating list. `Select.Content`
+assembles Base UI's portal, positioner, popup, list and scroll arrows, so a
+caller writes rows. `Select.Value` resolves the text it shows from `items` on
+the root rather than from the rows, so a list whose row text differs from its
+value is stated there too:
+
+```tsx
+const themes = [
+  { value: 'system', label: 'Follow the system' },
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+];
+
+<Field.Root name="theme">
+  <Field.Label>Theme</Field.Label>
+  <Select.Root items={themes} value={theme} onValueChange={(next) => next && setTheme(next)}>
+    <Select.Trigger>
+      <Select.Value placeholder="Pick a theme" />
+    </Select.Trigger>
+    <Select.Content>
+      {themes.map((item) => (
+        <Select.Item key={item.value} value={item.value}>
+          {item.label}
+        </Select.Item>
+      ))}
+    </Select.Content>
+  </Select.Root>
+</Field.Root>
+```
+
+`Combobox` is the same list with a query in front of it. On its own the input is
+the whole control; inside a `Combobox.InputGroup` the group is the well and the
+input is bare, so a chevron beside it lands inside one control rather than beside
+a second one.
+
+A `Menu` is that same floating surface with commands on it. It is also the
+dropdown menu: Base UI has no separate part for one, so a second name would be a
+second thing to keep in step. A menu is opened by whatever the surface already
+had there, through Base UI's `render`:
+
+```tsx
+<Menu.Root>
+  <Menu.Trigger render={<Button variant="ghost" icon aria-label="Session actions" />}>
+    <MoreIcon />
+  </Menu.Trigger>
+  <Menu.Content>
+    <Menu.Item shortcut="⌘R" onClick={rename}>Rename</Menu.Item>
+    <Menu.Submenu>
+      <Menu.SubmenuTrigger inset>Export</Menu.SubmenuTrigger>
+      <Menu.Content>
+        <Menu.Item onClick={exportPdf}>PDF</Menu.Item>
+      </Menu.Content>
+    </Menu.Submenu>
+    <Menu.Separator />
+    <Menu.Item tone="destructive" onClick={remove}>Delete</Menu.Item>
+  </Menu.Content>
+</Menu.Root>
+```
+
+`ContextMenu` and `Menubar` restate only the way in — a right click or a long
+press, and a bar of names — and re-export `Menu`'s rows rather than rebuilding
+them, so a command looks and behaves the same wherever a person meets it. A row
+answers `onClick`; a row that should leave the menu up says `closeOnClick={false}`
+rather than cancelling the event. Where focus goes after a menu closes is the
+product's policy, passed as `finalFocus`.
+
+A row's leading box holds a caller's icon, a tick or a dot, and sizes what is in
+it: a glyph placed there states its own dimensions as 100% rather than arriving
+at its icon library's default, because this package has no descendant selector to
+reach it with. A row with no icon takes no box, so an icon-less menu is not
+indented for nothing; a row in a mixed list asks for one with `inset`.
+
+A `Popover` is that same floating surface holding content instead of rows. It
+reads the popup group too, and replaces five of a list's declarations: the width
+a list takes from the control that shows its value, the 4px inset that lets a row
+bleed to the surface's edge, and the three that make the type a control's rather
+than prose.
+
+```tsx
+<Popover.Root>
+  <Popover.Trigger render={<Button variant="secondary" />}>Filter</Popover.Trigger>
+  <Popover.Content>
+    <Popover.Header>
+      <Popover.Title>Filter sessions</Popover.Title>
+      <Popover.Description>Applies to the list under it.</Popover.Description>
+    </Popover.Header>
+    <Field.Root>
+      <Field.Label>Name contains</Field.Label>
+      <Input size="small" />
+    </Field.Root>
+    <Popover.Close render={<Button size="small" />}>Apply</Popover.Close>
+  </Popover.Content>
+</Popover.Root>
+```
+
+`Dialog`, `AlertDialog` and `Drawer` are one family on the modal rung — the
+elevated background under the large shadow, over an overlay. They share one token
+group and one surface, and differ only in how they arrive and in what may dismiss
+them. A dialog carries a cross and says so; an alert dialog is answered rather
+than dismissed, so a press beside it is not an answer, though Escape still is.
+
+```tsx
+<Dialog.Root>
+  <Dialog.Trigger render={<Button variant="secondary" />}>Rename</Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Rename session</Dialog.Title>
+      <Dialog.Description>The name shows in the sidebar.</Dialog.Description>
+    </Dialog.Header>
+    <Input placeholder="Describe the task" />
+    <Dialog.Footer>
+      <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
+      <Dialog.Close render={<Button onClick={save} />}>Save</Dialog.Close>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+```
+
+An alert dialog's answers are Buttons rather than parts of the component: which
+variant an answer takes is the surface's decision, so a footer writes them with
+`AlertDialog.Close render={<Button variant="destructive" />}`.
+
+A `Drawer` is that same panel arriving from an edge — and there is deliberately no
+`Sheet`. A panel that slides in from an edge promises that it can be sent back,
+and on a touch screen a person will try; a dialog pinned to an edge cannot answer
+that gesture. Base UI's Drawer lays the panel out inside a viewport instead of
+positioning it, which is what leaves the panel's own `transform` free to follow a
+finger.
+
+```tsx
+<Drawer.Root side="bottom">
+  <Drawer.Trigger render={<Button variant="secondary" />}>Filters</Drawer.Trigger>
+  <Drawer.Content side="bottom">
+    <Drawer.Header>
+      <Drawer.Title>Filters</Drawer.Title>
+      <Drawer.Description>They apply to the session list.</Drawer.Description>
+    </Drawer.Header>
+    <Field.Label>
+      <Checkbox name="running" defaultChecked />
+      Running only
+    </Field.Label>
+  </Drawer.Content>
+</Drawer.Root>
+```
+
+`side` is the writing direction's edge — `top`, `bottom`, `start`, `end` — and the
+root derives the physical swipe from it, so a drawer on the start edge is swiped
+away leftwards in a left-to-right document and rightwards in a right-to-left one.
+The edge is stated on both parts because the root needs it for the gesture and the
+content for the layout. `inset` is the second axis: a flush drawer meets the
+window and squares the two corners that touch it, while an inset one floats at
+`dialog.drawerInset` and keeps all four.
+
+A shell that wants the page to recede behind an open drawer wraps its own UI in
+`Drawer.Indent` and styles `data-active` itself; that is a decision about a
+product's shell rather than about a drawer, so the primitive exposes it and does
+not choose.
+
+A popup mounts on the document by default, and a modal panel is the exception. A
+surface that owns a focus scope and a scroll lock states its panel once with
+`PopupContainerProvider`, and every Select, Combobox, Menu and Popover under it
+mounts inside the panel instead of being treated as outside it. `Dialog.Content`,
+`AlertDialog.Content` and `Sheet.Content` do this for their own panel, so a
+product surface never has to.
+
+A `Tooltip` is the one floating part that does not read the popup group. The
+elevation ladder puts a menu, a popover and a list on the raised background under
+the popover shadow, and names the tooltip apart: `label` with `shadow.medium`, an
+inversion, because a tooltip is not a place to act but a label over one.
+
+```tsx
+<Tooltip.Provider>
+  <Tooltip.Root>
+    <Tooltip.Trigger render={<Button variant="ghost" icon aria-label="Rerun" />}>
+      <RerunIcon />
+    </Tooltip.Trigger>
+    <Tooltip.Content>Rerun this turn</Tooltip.Content>
+  </Tooltip.Root>
+</Tooltip.Provider>
+```
+
+A tooltip is visual only. Base UI gives the chip no role and wires no
+`aria-describedby`, because a tooltip is reachable by neither touch nor a screen
+reader, so **the trigger states its own `aria-label`** — a control whose only name
+was its tooltip has no name at all. `Tooltip.Provider` groups them, so once one
+has opened the next opens without its delay.
+
+`Tabs`, `Accordion` and `Collapsible` are one family too, and what they share is
+the question rather than the shape: a trigger, and the thing it shows. A tab
+strip lays the choices side by side and swaps the panel under them; an accordion
+stacks them and opens one in place; a collapsible is a single one of those rows
+with no list around it.
+
+A strip is the elevation ladder read twice over — a well-rung track with one
+thing raised out of it, the same pair a `Switch` takes. The pill under the
+selected tab is one element that slides rather than a fill on each tab, because
+the strip is one control, and `Tabs.List` draws it rather than the caller, the
+way a submenu's chevron is drawn by its row.
+
+```tsx
+<Tabs.Root defaultValue="sync">
+  <Tabs.List>
+    <Tabs.Tab value="sync">Conversation sync</Tabs.Tab>
+    <Tabs.Tab value="worktree">Worktree setup</Tabs.Tab>
+  </Tabs.List>
+  <Tabs.Panel value="sync">…</Tabs.Panel>
+  <Tabs.Panel value="worktree">…</Tabs.Panel>
+</Tabs.Root>
+```
+
+The size is stated once, on the strip: a tab's height, its corner and its share
+of the width all follow from the track's. A strip that should take the width on
+offer says `stretch`, which stretches the track *and* splits it between the tabs
+— stating only the first would leave a full-width groove with the choices
+huddled at its start. Arrow keys move between tabs without taking one, because a
+tab swaps a panel that may be expensive to build; a surface whose panels are
+cheap says `activateOnFocus`.
+
+An accordion is that same family stacked. A row has no fill in any state — it is
+a line of a list rather than a control on a surface — so the mark between rows is
+the separator the rules give a list, and what moves when a row opens is the
+chevron the part draws. One row is open at a time unless the root says
+`multiple`.
+
+```tsx
+<Accordion.Root multiple defaultValue={['bundled']}>
+  <Accordion.Item value="bundled">
+    <Accordion.Trigger>Bundled assets</Accordion.Trigger>
+    <Accordion.Panel>…</Accordion.Panel>
+  </Accordion.Item>
+</Accordion.Root>
+```
+
+A `Collapsible` is one of those rows with no list around it, so it takes neither
+the line nor the row: its trigger is Base UI's, unstyled, because a lone
+disclosure is opened by whatever the surface already had there — a card header, a
+row of a table, a button that also says how many things are under it.
+
+```tsx
+<Collapsible.Root>
+  <Collapsible.Trigger render={<Button variant="secondary" size="small" />}>
+    3 files changed
+  </Collapsible.Trigger>
+  <Collapsible.Panel>…</Collapsible.Panel>
+</Collapsible.Root>
+```
+
+**A revealed panel's padding goes on a child of it.** Base UI animates the
+panel's height from a size it measures with `scrollHeight`, which counts
+padding, so a padded panel is cropped by exactly its own padding under
+`border-box` and overshoots by it under `content-box`. `Accordion.Panel` already
+holds its prose in such a child; a caller migrating a panel that carried its own
+padding moves it inwards.
+
+`Alert`, `Toast`, `Progress`, `Skeleton` and `Spinner` are one family as well,
+and what they share is a sentence with two halves: what happened, and that it is
+not finished.
+
+An `Alert` and a `Toast` are **one message on two rungs**. An alert stays on the
+page it is about, so it takes the card rung; a toast arrives over that page, so
+it takes the floating one. Neither is on the modal rung: a message does not have
+to be answered.
+
+```tsx
+<Alert.Root tone="danger">
+  <Alert.Title>Sync failed</Alert.Title>
+  <Alert.Description>The machine did not answer in time.</Alert.Description>
+  <Alert.Actions>
+    <Button size="small" onClick={retry}>Retry</Button>
+  </Alert.Actions>
+</Alert.Root>
+```
+
+A tone — `neutral`, `success`, `warning`, `danger` — is a tint and a mark, never
+a fill, and **the mark is the tone's rather than the caller's**: the point of a
+tone is that a person knows what kind of message this is before reading it, and
+a glyph a caller chose can put a tick on a failure. The tone also decides how
+urgently a screen reader is told: a failure interrupts, a confirmation waits.
+
+A toast is that same message, reported from anywhere:
+
+```tsx
+export const toasts = Toast.createManager();
+
+<Toast.Provider manager={toasts} label={t('toast.region', 'Notifications')}>
+  <App />
+</Toast.Provider>;
+
+toasts.add({ title: 'Sync failed', description: 'No answer.', type: 'danger' });
+```
+
+`Toast.Provider` renders the viewport itself, so a surface wraps its app once
+rather than keeping a provider, a portal, a viewport and a list in step. The
+viewport takes no pointer, so the page under a toast stays usable; each toast
+takes it back for its own close button.
+
+The other half is the wait. A `Progress` is a well-rung track with `accent`
+running in it, because the rules give that colour to live state and name the
+running indicator by name; a bar with **no value** is not a bar at zero but the
+same track with a band crossing it. A bar that reports an outcome takes that
+tone, and one that measures rather than progresses takes `neutral`:
+
+```tsx
+<Progress value={used} max={limit} tone={nearLimit ? 'danger' : 'running'} />
+<Progress value={null} label="Indexing the worktree" />
+```
+
+A `Skeleton` takes a gray, which is what the rules reserve them for — a thing
+with no role yet — and it takes its room as props rather than classes, because a
+size passed as a class lands in a specificity fight with the shape's own height.
+A `Spinner` is drawn in `currentColor`, so the one inside a ghost button takes
+the button's ink; it is called a spinner rather than a loading, because it is the
+mark and not the state, and where it goes is the surface's decision.
+
+```tsx
+<Skeleton shape="circle" width={32} height={32} />
+<Skeleton width="60%" />
+<Button variant="secondary" size="small">
+  <Spinner size="small" label={null} />
+  Saving
+</Button>
+```
+
+`Table` and `Pagination` are one family too, and what they share is a list that
+did not fit: the rows, and the way to the rows that are not on screen.
+
+A table is **the one part of this package with no surface of its own** — no
+background, no shadow, no radius. It is rows on whatever the surface around it
+already was, so a card holding one keeps owning its edges, and the one thing it
+draws is the edge the rules give a list: `separator`, between one row and the
+next. The head takes that line too, because the row after it is the first
+record; the last record draws none.
+
+**A column is stated once.** That is the whole design:
+
+```tsx
+const columns: TableColumn<Session>[] = [
+  { key: 'name', header: t('sessions.name'), cell: (s) => s.name, width: 220 },
+  { key: 'agent', header: t('sessions.agent'), cell: (s) => s.agent },
+  { key: 'turns', header: t('sessions.turns'), cell: (s) => s.turns, numeric: true, sortable: true },
+];
+
+<Table
+  columns={columns}
+  rows={sessions}
+  rowKey={(session) => session.id}
+  sort={sort}
+  onSortChange={setSort}
+  selected={selected}
+  onSelectedChange={setSelected}
+  onRowPress={(session) => open(session.id)}
+  maxHeight={320}
+  empty={t('sessions.none')}
+/>
+```
+
+How wide a column is, which way it aligns, whether it holds figures, whether the
+table can be ordered by it, what a totals row holds under it — all facts about a
+*column*, and a column written twice (a name in the head, a cell in every row) is
+a fact that can drift. Both surfaces in this repository that drew a table before
+this wrote their column template as a literal `grid-cols-[…]` string in the
+header and again in the row, by hand.
+
+Everything else follows from having them in one place:
+
+- **Ordering** is one column at a time, on the root rather than per column, so
+  two columns wearing the arrow is a state that cannot be expressed. The arrow
+  and `aria-sort` are the part's; the **rows are never reordered** — a server
+  sorts, a comparator breaks ties, a page is one slice of many.
+- **Selection** is a tick first. `aria-selected` belongs to a row in a grid, so
+  the table puts a `Checkbox` in the row — what a person presses and what a
+  screen reader is told — and derives the box over that column: none, some
+  (`mixed`), or all. A selection reaching past the rows on screen survives a
+  select-all.
+- **`maxHeight` and a head that stays are one decision**, because a head that
+  scrolls out of its own box is not something a surface would ask for. A head
+  that stays is no longer a row but a band over them, so it takes the region
+  rung; a transparent one has the records painted through the column names.
+- **The pointer is answered only where `onRowPress` says something happens.**
+  The Radix table this replaces lit every row, and its one caller had to turn
+  that off with a class. A pressable row takes the keyboard with it: Enter and
+  Space press it, and it rings where the keyboard is.
+- **`empty` crosses every column**, including the one the boxes are in — a count
+  only the table knows.
+
+**A table too narrow for its columns becomes a list of records**, each a stack of
+label-and-value lines, with the label being the head's own words. It asks about
+*its own* width rather than the window's — a table in a 360px side panel on a
+27-inch screen is narrow — so it is a container query, and a table whose columns
+must stay a grid says `stack={false}`.
+
+The parts are exported for a table that is **not** a list of records — a
+two-column list of facts, or markup produced from a Markdown document:
+
+```tsx
+<Table.Root size="large">
+  <Table.Body>
+    <Table.Row>
+      <Table.ColumnHeader scope="row">{t('summary.agent')}</Table.ColumnHeader>
+      <Table.Cell>{agentName}</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>
+```
+
+`Pagination` is one control rather than a kit of parts, because the part a caller
+would otherwise assemble is the one that is easy to get wrong — which pages to
+list out of nine thousand, and where to admit the rest are missing:
+
+```tsx
+<Pagination page={page} pages={pages} onPageChange={setPage} />
+<Pagination layout="compact" jump page={page} pages={9214} onPageChange={setPage} />
+```
+
+The window is one width from the first page to the last, so the buttons do not
+move out from under the pointer, and a gap is drawn only where it stands for more
+than one page. Where the pages are too many to list, `compact` says where you are
+instead — and `jump` lets a person type it, committing on Enter or on leaving the
+field rather than on every keystroke, since typing 4-5 through a pager that
+navigates as you type visits page 4 on the way to page 45. Every word it says is
+one `labels` prop, so a surface translates all of them or none.
+
+A `Card` is the elevation ladder's card step made a component, and its parts are
+a Dialog's: what separates a panel that owns the window from a block that owns a
+region of a page is the rung and the heading step, not what either is made of.
+It takes the same `headline` a dialog's title does, because the rules reserve
+`title` for a page that is a page.
+
+```tsx
+<Card.Root>
+  <Card.Header>
+    <Card.Title as="h2">Worktree setup</Card.Title>
+    <Card.Description>Commands that run once, before the agent starts.</Card.Description>
+  </Card.Header>
+  <Input placeholder="pnpm install" />
+  <Card.Footer>
+    <Button variant="ghost" size="small">Reset</Button>
+    <Button size="small" onClick={save}>Save</Button>
+  </Card.Footer>
+</Card.Root>
+```
+
+A card **does not nest**: two of them one inside the other are the same fill
+twice in the light palette, where the card rung and the page are one white. A
+block inside a card is the region rung, which a surface lays out. And a card
+renders no control of its own — `interactive` marks it as the pressable thing
+and answers the pointer with `card.hover`, while the button or the link stays
+the caller's, because what a press does is a product decision.
+
+A `Badge` is a standing fact about the thing beside it, and the one part of this
+system on **no rung**: it sits on a page, a card, a menu row or a modal panel,
+so it takes no background from the ladder. Its tone is a *film* of that tone
+over whatever is underneath — 12% of `label` for neutral, 22% of its own colour
+for the rest — **and its word carries that tone as well**, as the tone pulled
+halfway to `label`.
+
+The raw tone cannot carry it: `warning` is 2.8:1 on a near-white surface, a
+colour for a 16px mark rather than for 11px text. Half the distance to the ink
+keeps the hue and gains the contrast — 5.2:1 at the worst, on every rung in both
+palettes — and the word is the mark a person actually looks at on a 20px chip.
+The four words land 0.097 apart in oklab at the closest in the light palette and
+0.048 in the dark, against 0.030 and 0.035 for the films under them. In the dark
+palette that is the whole difference: `accent` is a pale peach there and
+`warning` an amber, so their films are two brown washes and their words are a
+peach and a gold.
+
+A neutral badge has no tone to carry, so its word is `label` — which is also the
+ink the other four are pulled toward, and not `secondaryLabel`: the word sits on
+the film rather than on the page, where `secondaryLabel` measured 3.4:1.
+
+```tsx
+<Badge>Plus</Badge>
+<Badge tone="running">Opening Lody Desktop…</Badge>
+<Badge tone="danger">Failed</Badge>
+<Badge icon={<Laptop className="h-3 w-3" />}>macOS</Badge>
+```
+
+The tones are the four a message reports plus `running`, which `Progress` adds
+for the same reason: something being reached is live state, which is what
+`accent` is for. There is no hover, no focus ring and no filled variant — a chip
+a person can press is a `Button`. The leading box is the caller's glyph, the way
+a menu row's is, and a badge neither grows nor shrinks: a surface that must cap a
+long one caps the badge itself, since a chip that shrank would be clipped by a
+tight row rather than by a decision.
+
+A `Separator` is the one line the rules allow: between the rows of a list or a
+table, never around a surface — that is a shadow — and never under a header,
+which is a gap. It is announced rather than hidden, because a line here is never
+decoration, and it carries no margin of its own: where it sits in a stack is the
+surface's layout.
+
+```tsx
+<Separator />
+<Separator orientation="vertical" />
+```
+
+An `Avatar` is who this is: a picture, or the letters standing in for one. It
+is the second part here on no rung and the one that is not a film — what it
+stands in for is opaque, so the fallback takes a **gray**, which is what the
+rules reserve the gray ramp for: a thing with no role.
+
+```tsx
+<Avatar.Root size="small">
+  <Avatar.Image src={user.image} alt={user.name} />
+  <Avatar.Fallback>ZX</Avatar.Fallback>
+</Avatar.Root>
+
+<Avatar.Root size="large" shape="tile">
+  <Avatar.Fallback style={{ backgroundColor: hueFor(workspace.name) }}>L</Avatar.Fallback>
+</Avatar.Root>
+```
+
+Five rungs — 16, 20, 24, 32 and 64 — and **the rung picks the letters**. That is
+the whole reason the size is a prop: the deleted implementation had one size,
+and each of its twenty call sites stated the box and the type step separately
+(`h-5 w-5 text-[9px]`, `h-7 w-7 text-[11px]`, `h-16 w-16 text-xl`), which is two
+facts a surface had to keep in step and eight different answers about what two
+letters in a circle means. Two initials want `small` or larger: at `mini` a
+circle is a face where an icon would otherwise be, and a picture or a mark is
+the better answer — two capitals fit it only just. Which of the image and the fallback is on
+screen is Base UI's, read from the image's own loading status, so a surface
+writes both and never writes the condition.
+
+A person is a `circle`, a thing is a `tile`: a circle around a logo is a crop,
+and the mark inside one was drawn square. The tile's corner follows the rung
+from the radius-by-size table rather than a token of its own. A surface with an
+identity colour for the thing — a hue derived from a workspace name, so the same
+workspace is the same colour everywhere — passes it as a `style`, because which
+hue belongs to which name is a product fact and not a token.
+
+A `Kbd` is a key on the keyboard, and a `KbdGroup` is the chord it is pressed
+in.
+
+```tsx
+<Kbd>esc</Kbd>
+<KbdGroup>
+  <Kbd>⌘</Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```
+
+It is a gray for the same reason: a cap stands for a piece of hardware rather
+than for anything on the screen. It is never a control — no hover, no focus
+ring, no pressed state — and it is not a menu row's shortcut, which the rules
+give plain trailing metadata instead, because a column of chips down a menu's
+right edge turns a quiet list into a keyboard diagram. A cap is for the surfaces
+where the keys are the subject: a command palette, a shortcuts sheet, a tooltip
+that teaches one.
+
+A cap standing on a `Tooltip` inverts with it. `Tooltip.Content` declares
+`kbdOnInvertedTheme` on its popup, and every cap under it inherits — a component
+token group is how a surface tells what is inside it what it is standing on, and
+unlike the descendant selector the deleted implementation used it also reaches a
+cap a caller wrapped in something of their own.
+
+The state mapping every control in this family shares — rest, placeholder,
+focus, invalid, disabled, checked, selected — is in
+[token rules](src/tokens/RULES.md#fields).
+
+The intended behavior is specified in [Shared UI primitives](../../specs/ui-primitives.md).
+The integration decision is recorded in the
+[UI Button migration takeover note](../../.agents/notes/implemented/architecture/2026-09-08-ui-button-migration-takeover.md);
+the field family and the Tailwind field concepts it replaces are recorded in the
+[UI field primitives note](../../.agents/notes/implemented/feature/2026-09-09-ui-field-primitives.md);
+the menu family and the migration still owed to it are recorded in the
+[UI menu primitives note](../../.agents/notes/implemented/feature/2026-09-11-ui-menu-primitives.md);
+the popover, the modal rung, the tooltip and the migration still owed to them are
+recorded in the
+[UI overlay primitives note](../../.agents/notes/implemented/feature/2026-09-12-ui-overlay-primitives.md);
+the table with no surface, the pager that shares its group, and the two Radix
+files they replace are recorded in the
+[UI table and pagination note](../../.agents/notes/implemented/feature/2026-09-12-ui-table-pagination.md);
+the card rung as a component, the badge that is on no rung, and the one line the
+rules allow are recorded in the
+[UI card, badge and separator note](../../.agents/notes/implemented/feature/2026-09-12-ui-card-badge-separator.md);
+the avatar ladder that picks its own letters, the key cap, and the token group
+that carries an inversion across a surface are recorded in the
+[UI avatar and kbd note](../../.agents/notes/implemented/feature/2026-09-13-ui-avatar-kbd.md).
+
+Open the gallery with `pnpm storybook` and pick _Design System / UI Gallery_.
+It renders each sample once per palette and reads its values back off the
+rendered nodes, so a token that changes shows its new value there without the
+board being edited. A new token or primitive state lands with its board entry;
+`test/gallery.test.tsx` fails when a token has no entry.
+
+The icon set has a page of its own instead, because the board answers the wrong
+question about it: a token has one value to show, and an icon has 90 drawings
+you need to search, size, recolour and take away. Run
+`pnpm --filter @lody/ui playground` and open the printed URL. It is a Vite
+server over `packages/ui/playground` with no Storybook under it: search the set,
+scale it from 12 to 64, switch the four treatments, recolour it through the
+semantic tones, and stand it on the page, raised, well and accent rungs — the
+accent rung is where you see that a glyph cuts a hole through a mask rather than
+painting its marks the panel's colour. Press an icon for its panel: the drawing
+enlarged on the 24 grid, every size at once, the import line, and `copy svg` for
+the markup a caller would paste. The stateful icons are at the bottom; press one
+to flip it, and turn on _slow motion_ to watch `--lody-icon-t` interpolate
+rather than infer it from the two ends. `playground:build` writes the same page
+to `playground/dist` when it has to be looked at somewhere else.
+
+Run `pnpm --filter @lody/ui typecheck` and `pnpm --filter @lody/ui test` after
+changing a primitive or token.
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 000000000..6b3be2915
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,80 @@
+{
+  "name": "@lody/ui",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./accordion": "./src/disclosure/accordion.tsx",
+    "./alert": "./src/feedback/alert.tsx",
+    "./alert-dialog": "./src/dialog/alert-dialog.tsx",
+    "./avatar": "./src/avatar/avatar.tsx",
+    "./badge": "./src/badge/badge.tsx",
+    "./button": "./src/button/button.tsx",
+    "./card": "./src/card/card.tsx",
+    "./checkbox": "./src/field/checkbox.tsx",
+    "./collapsible": "./src/disclosure/collapsible.tsx",
+    "./combobox": "./src/field/combobox.tsx",
+    "./context-menu": "./src/menu/context-menu.tsx",
+    "./dialog": "./src/dialog/dialog.tsx",
+    "./drawer": "./src/drawer/drawer.tsx",
+    "./field": "./src/field/field.tsx",
+    "./gallery": "./src/gallery/gallery.tsx",
+    "./icons": "./src/icons/index.ts",
+    "./input": "./src/field/input.tsx",
+    "./kbd": "./src/kbd/kbd.tsx",
+    "./menu": "./src/menu/menu.tsx",
+    "./menubar": "./src/menu/menubar.tsx",
+    "./popover": "./src/popover/popover.tsx",
+    "./popup-container": "./src/popup/portal-container.tsx",
+    "./progress": "./src/feedback/progress.tsx",
+    "./radio": "./src/field/radio.tsx",
+    "./select": "./src/field/select.tsx",
+    "./separator": "./src/separator/separator.tsx",
+    "./skeleton": "./src/feedback/skeleton.tsx",
+    "./spinner": "./src/feedback/spinner.tsx",
+    "./pagination": "./src/table/pagination.tsx",
+    "./switch": "./src/field/switch.tsx",
+    "./table": "./src/table/table.tsx",
+    "./tabs": "./src/disclosure/tabs.tsx",
+    "./textarea": "./src/field/textarea.tsx",
+    "./theme": "./src/theme/theme.tsx",
+    "./toast": "./src/feedback/toast.tsx",
+    "./toggle": "./src/toggle/toggle.tsx",
+    "./toggle-group": "./src/toggle/toggle-group.tsx",
+    "./tokens/colors.stylex": "./src/tokens/colors.stylex.ts",
+    "./tokens/scales.stylex": "./src/tokens/scales.stylex.ts",
+    "./toolbar": "./src/toggle/toolbar.tsx",
+    "./tooltip": "./src/tooltip/tooltip.tsx"
+  },
+  "scripts": {
+    "playground": "vite --config playground/vite.config.ts",
+    "playground:build": "vite build --config playground/vite.config.ts",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.7.0",
+    "@lody/icons": "workspace:*",
+    "@stylexjs/stylex": "0.19.0"
+  },
+  "devDependencies": {
+    "@stylexjs/unplugin": "0.19.0",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "jsdom": "^26.1.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vitest": "^3.2.4"
+  }
+}
diff --git a/packages/ui/playground/icon-playground.tsx b/packages/ui/playground/icon-playground.tsx
new file mode 100644
index 000000000..bcc1e0439
--- /dev/null
+++ b/packages/ui/playground/icon-playground.tsx
@@ -0,0 +1,868 @@
+import * as stylex from '@stylexjs/stylex';
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import {
+  BellRingIcon,
+  CheckDrawIcon,
+  ChevronToggleIcon,
+  Icon,
+  ICONS,
+  ICON_FAMILIES,
+  EyeToggleIcon,
+  FolderToggleIcon,
+  PlayPauseIcon,
+  RefreshTurnIcon,
+  SidebarToggleIcon,
+  StarToggleIcon,
+  type IconFamily,
+  type IconName,
+  type IconVariant,
+} from '@lody/icons';
+import { ThemeRoot, type ThemeMode } from '../src/theme/theme';
+import { colors, shadow } from '../src/tokens/colors.stylex';
+import { radius, space, text } from '../src/tokens/scales.stylex';
+
+/**
+ * The icon playground.
+ *
+ * The board in `src/gallery` answers "what is this token's value" — one sample
+ * each, read back off the rendered node. An icon set asks a different question,
+ * and it asks it 75 times: find the drawing, put it at the size the surface
+ * uses, in the colour that surface gives it, on the rung it will sit on, and
+ * take it away as markup. That is a page with controls rather than a row on a
+ * board, so it is here, on its own server, with no Storybook under it.
+ *
+ * Nothing here is exported from the package and nothing here is a component of
+ * it. The playground is a *holder* of icons: every size, colour and surface it
+ * applies, it applies from the outside, which is exactly the contract an icon
+ * states by having neither.
+ */
+
+const VARIANTS: IconVariant[] = ['outline', 'duotone', 'glyph', 'bulk'];
+
+const FAMILY_LABELS: Record<IconFamily, string> = {
+  navigation: 'navigation',
+  actions: 'actions',
+  files: 'files',
+  git: 'git & code',
+  status: 'status',
+  product: 'agent & product',
+};
+
+const FAMILIES = Object.keys(ICON_FAMILIES) as IconFamily[];
+
+/** The registry's families as plain arrays, so a lookup is not a union of tuples. */
+const MEMBERS = Object.fromEntries(
+  FAMILIES.map((family) => [family, [...ICON_FAMILIES[family]] as IconName[]])
+) as Record<IconFamily, IconName[]>;
+
+/** Which family a drawing belongs to, for the search and the detail panel. */
+const FAMILY_OF = new Map<IconName, IconFamily>(
+  FAMILIES.flatMap((family) => MEMBERS[family].map((name) => [name, family] as const))
+);
+
+const TONES = ['label', 'secondary', 'tertiary', 'accent', 'destructive', 'success'] as const;
+type Tone = (typeof TONES)[number];
+
+/**
+ * The rung the icons sit on. `accent` is here for one reason: a glyph cuts its
+ * marks through a mask rather than painting them the panel's colour, and the
+ * only way to see the difference is to put a glyph on something that is not
+ * the panel.
+ */
+const SURFACES = ['page', 'raised', 'well', 'accent'] as const;
+type Surface = (typeof SURFACES)[number];
+
+const SIZES = [12, 16, 20, 24, 32, 48];
+
+const MODES = ['light', 'dark', 'split', 'system'] as const;
+type Mode = (typeof MODES)[number];
+
+const RING = `0 0 0 2px ${colors.accent}`;
+
+const styles = stylex.create({
+  page: {
+    minHeight: '100vh',
+    backgroundColor: colors.background,
+    color: colors.label,
+    fontSize: text.bodySize,
+    lineHeight: text.bodyLeading,
+  },
+  barWrap: { padding: space[4], paddingBottom: 0 },
+  split: { display: 'flex', alignItems: 'stretch' },
+  splitPane: { flex: '1 1 0', minWidth: 0 },
+  shell: { display: 'flex', alignItems: 'flex-start', gap: space[6], padding: space[4] },
+  main: { flex: '1 1 0', minWidth: 0, display: 'flex', flexDirection: 'column', gap: space[6] },
+
+  bar: {
+    position: 'sticky',
+    top: space[2],
+    zIndex: 2,
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: space[3],
+    padding: space[3],
+    borderRadius: radius.large,
+    backgroundColor: colors.elevatedBackground,
+    boxShadow: shadow.card,
+  },
+  barTitle: {
+    marginRight: 'auto',
+    fontSize: text.subheadlineSize,
+    lineHeight: text.subheadlineLeading,
+    fontWeight: 600,
+    letterSpacing: text.controlTracking,
+  },
+  count: { color: colors.tertiaryLabel, fontVariantNumeric: 'tabular-nums' },
+
+  search: {
+    width: '200px',
+    height: '30px',
+    paddingInline: space[3],
+    borderStyle: 'none',
+    outline: 'none',
+    borderRadius: radius.medium,
+    backgroundColor: colors.wellBackground,
+    color: colors.label,
+    fontFamily: 'inherit',
+    fontSize: text.bodySize,
+    boxShadow: { default: shadow.inset, ':focus': `${shadow.inset}, ${RING}` },
+  },
+
+  group: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '2px',
+    padding: '2px',
+    borderRadius: radius.medium,
+    backgroundColor: colors.wellBackground,
+  },
+  groupLabel: {
+    paddingInline: space[1.5],
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    color: colors.tertiaryLabel,
+    fontVariantNumeric: 'tabular-nums',
+  },
+  chip: {
+    appearance: 'none',
+    borderStyle: 'none',
+    cursor: 'pointer',
+    height: '26px',
+    paddingInline: space[2],
+    borderRadius: radius.mini,
+    fontFamily: 'inherit',
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    letterSpacing: text.controlTracking,
+    backgroundColor: { default: 'transparent', ':hover': colors.hoverFill },
+    color: colors.secondaryLabel,
+    outline: 'none',
+    boxShadow: { default: 'none', ':focus-visible': RING },
+  },
+  chipOn: {
+    backgroundColor: colors.elevatedBackground,
+    color: colors.label,
+    boxShadow: { default: shadow.raised, ':focus-visible': `${shadow.raised}, ${RING}` },
+  },
+  slider: { width: '110px', accentColor: colors.accent },
+
+  section: { display: 'flex', flexDirection: 'column', gap: space[2] },
+  sectionHead: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: space[2],
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    color: colors.tertiaryLabel,
+    textTransform: 'uppercase',
+    letterSpacing: '0.06em',
+  },
+  note: {
+    maxWidth: '68ch',
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    color: colors.tertiaryLabel,
+  },
+
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(92px, 1fr))',
+    gap: space[1],
+    padding: space[3],
+    borderRadius: radius.large,
+  },
+  surfacePage: { backgroundColor: colors.secondaryBackground, color: colors.label },
+  surfaceRaised: {
+    backgroundColor: colors.raisedBackground,
+    color: colors.label,
+    boxShadow: shadow.raised,
+  },
+  surfaceWell: {
+    backgroundColor: colors.wellBackground,
+    color: colors.label,
+    boxShadow: shadow.inset,
+  },
+  surfaceAccent: { backgroundColor: colors.accent, color: colors.onAccent },
+
+  tile: {
+    appearance: 'none',
+    borderStyle: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: space[1.5],
+    padding: space[2],
+    borderRadius: radius.medium,
+    backgroundColor: { default: 'transparent', ':hover': colors.hoverFill },
+    color: 'inherit',
+    fontFamily: 'inherit',
+    outline: 'none',
+    boxShadow: { default: 'none', ':focus-visible': '0 0 0 2px currentColor' },
+  },
+  tileOn: { backgroundColor: colors.selectedFill },
+  tileBox: { display: 'grid', placeItems: 'center', minHeight: '48px' },
+  tileName: {
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    opacity: 0.6,
+    textAlign: 'center',
+    wordBreak: 'break-word',
+  },
+
+  toneLabel: { color: colors.label },
+  toneSecondary: { color: colors.secondaryLabel },
+  toneTertiary: { color: colors.tertiaryLabel },
+  toneAccent: { color: colors.accent },
+  toneDestructive: { color: colors.destructive },
+  toneSuccess: { color: colors.success },
+  toneInherit: { color: 'inherit' },
+
+  panel: {
+    position: 'sticky',
+    top: space[4],
+    flex: '0 0 296px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: space[4],
+    padding: space[4],
+    borderRadius: radius.large,
+    backgroundColor: colors.elevatedBackground,
+    boxShadow: shadow.card,
+  },
+  panelName: {
+    fontSize: text.titleSize,
+    lineHeight: text.titleLeading,
+    fontWeight: 600,
+    letterSpacing: text.controlTracking,
+  },
+  panelMeta: {
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    color: colors.tertiaryLabel,
+  },
+  panelRow: { display: 'flex', alignItems: 'flex-end', gap: space[2], flexWrap: 'wrap' },
+  panelCell: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: space[1],
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    color: colors.tertiaryLabel,
+  },
+
+  stage: {
+    position: 'relative',
+    alignSelf: 'center',
+    width: '168px',
+    height: '168px',
+    borderRadius: radius.medium,
+    backgroundColor: colors.secondaryBackground,
+  },
+  stageGrid: {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    color: colors.accent,
+  },
+  stageIcon: { position: 'absolute', inset: 0, display: 'block' },
+
+  code: {
+    margin: 0,
+    padding: space[2],
+    borderRadius: radius.small,
+    backgroundColor: colors.wellBackground,
+    color: colors.secondaryLabel,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-all',
+  },
+  actions: { display: 'flex', gap: space[1.5], flexWrap: 'wrap' },
+  beside: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: space[2],
+    fontSize: text.bodySize,
+    lineHeight: text.bodyLeading,
+    color: colors.label,
+  },
+
+  stateGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(116px, 1fr))',
+    gap: space[2],
+  },
+  stateTile: {
+    appearance: 'none',
+    borderStyle: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: space[2],
+    padding: space[3],
+    borderRadius: radius.medium,
+    backgroundColor: { default: colors.secondaryBackground, ':hover': colors.hoverFill },
+    color: colors.label,
+    fontFamily: 'inherit',
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    outline: 'none',
+    boxShadow: { default: 'none', ':focus-visible': RING },
+  },
+  stateName: { color: colors.tertiaryLabel },
+  stateValue: { color: colors.accent, fontVariantNumeric: 'tabular-nums' },
+});
+
+const TONE_STYLES = {
+  label: styles.toneLabel,
+  secondary: styles.toneSecondary,
+  tertiary: styles.toneTertiary,
+  accent: styles.toneAccent,
+  destructive: styles.toneDestructive,
+  success: styles.toneSuccess,
+} satisfies Record<Tone, unknown>;
+
+const SURFACE_STYLES = {
+  page: styles.surfacePage,
+  raised: styles.surfaceRaised,
+  well: styles.surfaceWell,
+  accent: styles.surfaceAccent,
+} satisfies Record<Surface, unknown>;
+
+/**
+ * The box an icon is given.
+ *
+ * The size comes off a slider, so it is an inline declaration rather than a
+ * StyleX one: StyleX compiles a style sheet ahead of time and a continuous
+ * control value has no class waiting for it. Which is the point being shown —
+ * the holder states the size, and the icon fills whatever it is given.
+ */
+function IconBox({ size, children }: { size: number; children: ReactNode }) {
+  return (
+    <span style={{ display: 'block', width: size, height: size, flexShrink: 0 }}>{children}</span>
+  );
+}
+
+function Chip({
+  on,
+  onClick,
+  children,
+  title,
+}: {
+  on: boolean;
+  onClick: () => void;
+  children: ReactNode;
+  title?: string;
+}) {
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-pressed={on}
+      onClick={onClick}
+      {...stylex.props(styles.chip, on && styles.chipOn)}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Group({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <span role="group" aria-label={label} {...stylex.props(styles.group)}>
+      {children}
+    </span>
+  );
+}
+
+/** The 24 canvas and the 20 live area, behind an enlarged drawing. */
+function GridOverlay() {
+  const lines = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22];
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden {...stylex.props(styles.stageGrid)}>
+      <g stroke="currentColor" strokeWidth={0.05} opacity={0.35}>
+        {lines.map((line) => (
+          <path key={line} d={`M${line} 0v24M0 ${line}h24`} />
+        ))}
+      </g>
+      <rect
+        x={2}
+        y={2}
+        width={20}
+        height={20}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={0.1}
+        opacity={0.75}
+      />
+    </svg>
+  );
+}
+
+/**
+ * The markup a caller would paste. The class and the data attributes are the
+ * component's bookkeeping rather than the drawing, so they come off;
+ * `currentColor` stays, because inheriting it is the contract.
+ */
+function svgMarkup(node: SVGSVGElement, size: number): string {
+  const clone = node.cloneNode(true) as SVGSVGElement;
+  for (const attribute of ['class', 'style', 'data-icon', 'data-variant', 'aria-hidden']) {
+    clone.removeAttribute(attribute);
+  }
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  clone.setAttribute('width', String(size));
+  clone.setAttribute('height', String(size));
+  return clone.outerHTML;
+}
+
+function useCopy(): [string | null, (key: string, value: string) => void] {
+  const [copied, setCopied] = useState<string | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const copy = useCallback((key: string, value: string) => {
+    const clipboard = navigator.clipboard;
+    if (!clipboard) return;
+    void clipboard.writeText(value).then(() => {
+      setCopied(key);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(null), 1200);
+    });
+  }, []);
+  return [copied, copy];
+}
+
+/** `file-text` is exported as `FileTextIcon`; the snippet says so. */
+function pascal(name: string): string {
+  return name.replace(/(^|-)([a-z0-9])/g, (_match, _dash, character: string) =>
+    character.toUpperCase()
+  );
+}
+
+function Detail({
+  name,
+  variant,
+  onVariant,
+  onClose,
+}: {
+  name: IconName;
+  variant: IconVariant;
+  onVariant: (variant: IconVariant) => void;
+  onClose: () => void;
+}) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [copied, copy] = useCopy();
+  const definition = ICONS[name];
+  const layers = definition.layers;
+  const jsx = `<Icon name="${name}"${variant === 'outline' ? '' : ` variant="${variant}"`} />`;
+
+  return (
+    <aside {...stylex.props(styles.panel)}>
+      <div>
+        <div {...stylex.props(styles.panelName)}>{name}</div>
+        <div {...stylex.props(styles.panelMeta)}>
+          {FAMILY_LABELS[FAMILY_OF.get(name) ?? 'navigation']} · layers:{' '}
+          {layers ? Object.keys(layers).join(', ') : 'none'}
+        </div>
+      </div>
+
+      <div {...stylex.props(styles.stage)}>
+        <GridOverlay />
+        <span {...stylex.props(styles.stageIcon)}>
+          <Icon ref={svgRef} name={name} variant={variant} />
+        </span>
+      </div>
+
+      <div {...stylex.props(styles.panelRow)}>
+        {VARIANTS.map((candidate) => (
+          <button
+            key={candidate}
+            type="button"
+            onClick={() => onVariant(candidate)}
+            {...stylex.props(styles.tile, candidate === variant && styles.tileOn)}
+          >
+            <IconBox size={32}>
+              <Icon name={name} variant={candidate} />
+            </IconBox>
+            <span {...stylex.props(styles.tileName)}>{candidate}</span>
+          </button>
+        ))}
+      </div>
+      {layers ? null : (
+        <div {...stylex.props(styles.panelMeta)}>
+          No layer model, so all four treatments are the outline: the drawing has no mass to fill.
+        </div>
+      )}
+
+      <div {...stylex.props(styles.panelRow)}>
+        {SIZES.map((size) => (
+          <span key={size} {...stylex.props(styles.panelCell)}>
+            <IconBox size={size}>
+              <Icon name={name} variant={variant} />
+            </IconBox>
+            {size}
+          </span>
+        ))}
+      </div>
+
+      <div {...stylex.props(styles.beside)}>
+        <IconBox size={16}>
+          <Icon name={name} variant={variant} />
+        </IconBox>
+        beside 14px text
+      </div>
+
+      <pre {...stylex.props(styles.code)}>
+        {`import { ${pascal(name)}Icon } from '@lody/icons';\n${jsx}`}
+      </pre>
+
+      <div {...stylex.props(styles.actions)}>
+        <Chip on={copied === 'jsx'} onClick={() => copy('jsx', jsx)}>
+          {copied === 'jsx' ? 'copied' : 'copy jsx'}
+        </Chip>
+        <Chip
+          on={copied === 'svg'}
+          onClick={() => {
+            const node = svgRef.current;
+            if (node) copy('svg', svgMarkup(node, 24));
+          }}
+        >
+          {copied === 'svg' ? 'copied' : 'copy svg'}
+        </Chip>
+        <Chip on={copied === 'name'} onClick={() => copy('name', name)}>
+          {copied === 'name' ? 'copied' : 'copy name'}
+        </Chip>
+        <Chip on={false} onClick={onClose} title="escape">
+          close
+        </Chip>
+      </div>
+    </aside>
+  );
+}
+
+const STATEFUL: { key: string; render: (on: boolean) => ReactNode }[] = [
+  { key: 'sidebar', render: (on) => <SidebarToggleIcon collapsed={on} /> },
+  { key: 'chevron', render: (on) => <ChevronToggleIcon open={on} /> },
+  { key: 'check', render: (on) => <CheckDrawIcon checked={on} /> },
+  { key: 'eye', render: (on) => <EyeToggleIcon hidden={on} /> },
+  { key: 'play / pause', render: (on) => <PlayPauseIcon playing={on} /> },
+  { key: 'star', render: (on) => <StarToggleIcon starred={on} /> },
+  { key: 'bell', render: (on) => <BellRingIcon ringing={on} /> },
+  { key: 'refresh', render: (on) => <RefreshTurnIcon turned={on} /> },
+  { key: 'folder', render: (on) => <FolderToggleIcon open={on} /> },
+];
+
+/** The icons with two states, each flipped by pressing it. */
+function StateBoard({ size }: { size: number }) {
+  const [on, setOn] = useState<Record<string, boolean>>({});
+  return (
+    <div {...stylex.props(styles.section)}>
+      <div {...stylex.props(styles.sectionHead)}>
+        two states
+        <span {...stylex.props(styles.count)}>{STATEFUL.length}</span>
+        <Chip
+          on={false}
+          onClick={() =>
+            setOn((current) => Object.fromEntries(STATEFUL.map(({ key }) => [key, !current[key]])))
+          }
+        >
+          flip all
+        </Chip>
+      </div>
+      <div {...stylex.props(styles.note)}>
+        Press one. Each is a single svg whose parts are functions of one number, the registered
+        custom property <code>--lody-icon-t</code>, which CSS transitions: nothing is added for a
+        state and no path morphs, so both ends are the static drawing. Turn on slow motion to watch
+        the number move rather than infer it from the two ends. Under{' '}
+        <code>prefers-reduced-motion</code> the duration is zero and a press snaps.
+      </div>
+      <div {...stylex.props(styles.stateGrid)}>
+        {STATEFUL.map(({ key, render }) => (
+          <button
+            key={key}
+            type="button"
+            onClick={() => setOn((current) => ({ ...current, [key]: !current[key] }))}
+            {...stylex.props(styles.stateTile)}
+          >
+            <IconBox size={Math.max(size, 24)}>{render(Boolean(on[key]))}</IconBox>
+            <span {...stylex.props(styles.stateName)}>{key}</span>
+            <span {...stylex.props(styles.stateValue)}>t = {on[key] ? 1 : 0}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface BoardProps {
+  matches: IconName[];
+  variant: IconVariant;
+  size: number;
+  tone: Tone;
+  surface: Surface;
+  selected: IconName | null;
+  onSelect: (name: IconName | null) => void;
+  onVariant: (variant: IconVariant) => void;
+}
+
+function Board({
+  matches,
+  variant,
+  size,
+  tone,
+  surface,
+  selected,
+  onSelect,
+  onVariant,
+}: BoardProps) {
+  const found = new Set(matches);
+  // On the accent rung the icons take the colour the rung gives them, which is
+  // the whole reason to stand them there; a tone would paint over it.
+  const toneStyle = surface === 'accent' ? styles.toneInherit : TONE_STYLES[tone];
+  return (
+    <div {...stylex.props(styles.shell)}>
+      <div {...stylex.props(styles.main)}>
+        {FAMILIES.map((family) => {
+          const members = MEMBERS[family].filter((name) => found.has(name));
+          if (members.length === 0) return null;
+          return (
+            <div key={family} {...stylex.props(styles.section)}>
+              <div {...stylex.props(styles.sectionHead)}>
+                {FAMILY_LABELS[family]}
+                <span {...stylex.props(styles.count)}>{members.length}</span>
+              </div>
+              <div {...stylex.props(styles.grid, SURFACE_STYLES[surface])}>
+                {members.map((name) => (
+                  <button
+                    key={name}
+                    type="button"
+                    onClick={() => onSelect(name === selected ? null : name)}
+                    {...stylex.props(styles.tile, name === selected && styles.tileOn)}
+                  >
+                    <span {...stylex.props(styles.tileBox, toneStyle)}>
+                      <IconBox size={size}>
+                        <Icon name={name} variant={variant} />
+                      </IconBox>
+                    </span>
+                    <span {...stylex.props(styles.tileName)}>{name}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+        {matches.length === 0 ? (
+          <div {...stylex.props(styles.note)}>Nothing is drawn under that name.</div>
+        ) : null}
+        <StateBoard size={size} />
+      </div>
+      {selected ? (
+        <Detail
+          name={selected}
+          variant={variant}
+          onVariant={onVariant}
+          onClose={() => onSelect(null)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function IconPlayground() {
+  const [query, setQuery] = useState('');
+  const [variant, setVariant] = useState<IconVariant>('outline');
+  const [size, setSize] = useState(24);
+  const [tone, setTone] = useState<Tone>('label');
+  const [surface, setSurface] = useState<Surface>('page');
+  const [mode, setMode] = useState<Mode>('light');
+  const [layeredOnly, setLayeredOnly] = useState(false);
+  const [slowMotion, setSlowMotion] = useState(false);
+  const [selected, setSelected] = useState<IconName | null>(null);
+  const search = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    document.documentElement.dataset.slowMotion = slowMotion ? 'on' : 'off';
+  }, [slowMotion]);
+
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      if (event.key === 'Escape') setSelected(null);
+      if (event.key === '/' && document.activeElement !== search.current) {
+        event.preventDefault();
+        search.current?.focus();
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  const matches = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    return FAMILIES.flatMap((family) =>
+      MEMBERS[family].filter((name) => {
+        if (layeredOnly && ICONS[name].layers == null) return false;
+        if (needle === '') return true;
+        return name.includes(needle) || FAMILY_LABELS[family].includes(needle);
+      })
+    );
+  }, [query, layeredOnly]);
+
+  const board = (
+    <Board
+      matches={matches}
+      variant={variant}
+      size={size}
+      tone={tone}
+      surface={surface}
+      selected={selected}
+      onSelect={setSelected}
+      onVariant={setVariant}
+    />
+  );
+
+  const bar = (
+    <div {...stylex.props(styles.barWrap)}>
+      <div {...stylex.props(styles.bar)}>
+        <span {...stylex.props(styles.barTitle)}>
+          @lody/icons <span {...stylex.props(styles.count)}>{matches.length}</span>
+        </span>
+
+        <input
+          ref={search}
+          type="search"
+          value={query}
+          placeholder="search  ( / )"
+          aria-label="search icons"
+          onChange={(event) => setQuery(event.target.value)}
+          {...stylex.props(styles.search)}
+        />
+
+        <Group label="variant">
+          {VARIANTS.map((candidate) => (
+            <Chip key={candidate} on={candidate === variant} onClick={() => setVariant(candidate)}>
+              {candidate}
+            </Chip>
+          ))}
+        </Group>
+
+        <Group label="size">
+          <span {...stylex.props(styles.groupLabel)}>{size}px</span>
+          <input
+            type="range"
+            min={12}
+            max={64}
+            step={1}
+            value={size}
+            aria-label="size"
+            onChange={(event) => setSize(Number(event.target.value))}
+            {...stylex.props(styles.slider)}
+          />
+        </Group>
+
+        <Group label="tone">
+          {TONES.map((candidate) => (
+            <Chip key={candidate} on={candidate === tone} onClick={() => setTone(candidate)}>
+              {candidate}
+            </Chip>
+          ))}
+        </Group>
+
+        <Group label="surface">
+          {SURFACES.map((candidate) => (
+            <Chip
+              key={candidate}
+              on={candidate === surface}
+              onClick={() => setSurface(candidate)}
+              title={
+                candidate === 'accent'
+                  ? 'a glyph cuts a hole, so whatever is under it shows through'
+                  : undefined
+              }
+            >
+              {candidate}
+            </Chip>
+          ))}
+        </Group>
+
+        <Group label="palette">
+          {MODES.map((candidate) => (
+            <Chip key={candidate} on={candidate === mode} onClick={() => setMode(candidate)}>
+              {candidate}
+            </Chip>
+          ))}
+        </Group>
+
+        <Group label="options">
+          <Chip
+            on={layeredOnly}
+            onClick={() => setLayeredOnly((current) => !current)}
+            title="only the icons that carry a layer model, and so have four treatments"
+          >
+            layered only
+          </Chip>
+          <Chip on={slowMotion} onClick={() => setSlowMotion((current) => !current)}>
+            slow motion
+          </Chip>
+        </Group>
+      </div>
+    </div>
+  );
+
+  if (mode === 'split') {
+    return (
+      <ThemeRoot mode="light">
+        <div {...stylex.props(styles.page)}>
+          {bar}
+          <div {...stylex.props(styles.split)}>
+            {(['light', 'dark'] as ThemeMode[]).map((pane) => (
+              <div key={pane} {...stylex.props(styles.splitPane)}>
+                <ThemeRoot mode={pane}>
+                  <div {...stylex.props(styles.page)}>{board}</div>
+                </ThemeRoot>
+              </div>
+            ))}
+          </div>
+        </div>
+      </ThemeRoot>
+    );
+  }
+
+  return (
+    <ThemeRoot mode={mode}>
+      <div {...stylex.props(styles.page)}>
+        {bar}
+        {board}
+      </div>
+    </ThemeRoot>
+  );
+}
diff --git a/packages/ui/playground/index.html b/packages/ui/playground/index.html
new file mode 100644
index 000000000..ca6110dc8
--- /dev/null
+++ b/packages/ui/playground/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>@lody/icons — playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/ui/playground/main.tsx b/packages/ui/playground/main.tsx
new file mode 100644
index 000000000..029427cbb
--- /dev/null
+++ b/packages/ui/playground/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './playground.css';
+import { IconPlayground } from './icon-playground';
+
+const host = document.getElementById('root');
+if (!host) throw new Error('the playground has no #root to mount on');
+
+createRoot(host).render(
+  <StrictMode>
+    <IconPlayground />
+  </StrictMode>
+);
diff --git a/packages/ui/playground/playground.css b/packages/ui/playground/playground.css
new file mode 100644
index 000000000..a4718f985
--- /dev/null
+++ b/packages/ui/playground/playground.css
@@ -0,0 +1,36 @@
+/*
+ * The page under the playground, and the one thing StyleX cannot state.
+ *
+ * This file also exists so that the build emits a stylesheet at all: the
+ * package's `stylexOptions` injects the compiled StyleX into the chunk named
+ * `index-<hash>.css`, and with no CSS of its own the bundle would have no such
+ * chunk and the page would come out unstyled.
+ */
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family:
+    ui-sans-serif,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    system-ui,
+    sans-serif;
+}
+
+/*
+ * Slow motion, for watching `--lody-icon-t` interpolate rather than inferring
+ * it from the two ends. The duration is a token inside the package and not a
+ * prop, and a stateful icon states its own `style` after its rest props, so a
+ * holder cannot pass one in: the host overrides it, which is a host's business.
+ */
+[data-slow-motion='on'] svg {
+  transition-duration: 2.4s !important;
+}
diff --git a/packages/ui/playground/vite.config.ts b/packages/ui/playground/vite.config.ts
new file mode 100644
index 000000000..ba3611a7b
--- /dev/null
+++ b/packages/ui/playground/vite.config.ts
@@ -0,0 +1,31 @@
+import stylex from '@stylexjs/unplugin';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+import { stylexOptions } from '../stylex-options';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+/**
+ * StyleX resolves its variables against the repository root, and the playground
+ * imports the package's source from outside its own root, so the dev server has
+ * to be allowed to read up there.
+ */
+const repoRoot = path.resolve(here, '../../..');
+
+/**
+ * The icon playground: the `@lody/icons` package's consumer page, with no
+ * Storybook under it.
+ *
+ * The board in `src/gallery` is the visual reference — one sample per token,
+ * read back off the rendered node. An icon set is the other thing: 75 drawings
+ * you want to search, scale, recolour, drop on a different rung and copy out.
+ * That is a page with controls, not a row on a board, so it lives here and
+ * runs on its own Vite server.
+ */
+export default defineConfig({
+  root: here,
+  plugins: [react(), stylex.vite(stylexOptions)],
+  server: { port: 5178, fs: { allow: [repoRoot] } },
+  build: { outDir: path.join(here, 'dist'), emptyOutDir: true },
+});
diff --git a/packages/ui/src/avatar/avatar.tokens.stylex.ts b/packages/ui/src/avatar/avatar.tokens.stylex.ts
new file mode 100644
index 000000000..a06498f97
--- /dev/null
+++ b/packages/ui/src/avatar/avatar.tokens.stylex.ts
@@ -0,0 +1,90 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors } from '../tokens/colors.stylex';
+import { radius, text } from '../tokens/scales.stylex';
+
+/**
+ * Who this is: a picture of a person, or the letters standing in for one.
+ *
+ * An avatar is the second part of this system on **no rung**, and for the same
+ * reason a Badge is: it sits in a sidebar row, on a card, in a menu, on a modal
+ * panel. Unlike a badge it is not a film, though, because what it stands in for
+ * is opaque — a photograph — and a translucent stand-in would show the row's
+ * hover through a face that never moves. So the fallback takes a **gray**,
+ * which is exactly what the rules reserve the gray ramp for: a thing with no
+ * role. `Skeleton` already took `gray5` for the same reason, and an avatar
+ * waiting on an image and a block waiting on content are the same waiting.
+ *
+ * Five rungs, and each one carries its own step. The step is the point: the
+ * deleted implementation had one size, `size-8`, and every one of its twenty
+ * call sites re-stated both the box and the letters inside it — `h-5 w-5
+ * text-[9px]`, `h-7 w-7 text-[11px]`, `h-9 w-9 text-[0.82rem]`, `h-16 w-16
+ * text-xl` — which is two facts a surface had to keep in step and eight
+ * different answers about what "two letters in a circle" means. Here the box
+ * picks the letters, and a caller names the rung.
+ */
+export const avatar = stylex.defineVars({
+  // 16 is the glyph box every other holder in this package draws, so a mini
+  // avatar is a face where an icon would otherwise be: in a line of text, in a
+  // menu row, beside a filename.
+  sizeMini: '16px',
+  sizeSmall: '20px',
+  sizeMedium: '24px',
+  sizeLarge: '32px',
+  // Nothing sits between 32 and 64. An avatar is either a mark in a row or the
+  // subject of the screen, and the sizes the product had reached for in between
+  // — 28, 36 — were a row avatar that had drifted rather than a third kind.
+  sizeXlarge: '64px',
+  // The letters. Below 24 there is no step on the type scale that fits two
+  // characters inside a circle this small, so those two are literals; from 24
+  // up the scale carries it. A portrait is the one place this package sets type
+  // larger than `title`, because at 64px the scale has run out and the letters
+  // are the picture.
+  //
+  // 7 rather than 8 at `mini`, and the board is why: `WW` at 8px measures 16px
+  // against a 16px circle, so the widest pair of capitals was flush with the
+  // crop and lost its outer strokes. Two letters barely belong in a circle this
+  // small — it is a face where an icon would otherwise be, and a picture or a
+  // mark is the better answer there — but small is better than cut.
+  initialsMini: '7px',
+  initialsSmall: '10px',
+  initialsMedium: text.captionSize,
+  initialsLarge: text.subheadlineSize,
+  initialsXlarge: '24px',
+  // What a caller's glyph is given. A fallback holds either letters or a mark,
+  // and this package's glyphs state 100% of whatever holds them, so the box is
+  // drawn here rather than left to the icon library's default.
+  glyphMini: '10px',
+  glyphSmall: '12px',
+  glyphMedium: '14px',
+  glyphLarge: '16px',
+  glyphXlarge: '28px',
+  // A tile's corner, by the rules' own radius-by-size table. A circle does not
+  // read these: it is `radius.full` at `corner.round`, which the rules name for
+  // a pill or a circle because a squircle at that radius is a superellipse.
+  tileRadiusMini: radius.mini,
+  tileRadiusSmall: radius.mini,
+  tileRadiusMedium: radius.small,
+  tileRadiusLarge: radius.medium,
+  tileRadiusXlarge: radius.large,
+  fallbackBackground: colors.gray5,
+  /**
+   * The letters take `label`, not `secondaryLabel`, and the board is what
+   * settled it. A badge's word is `secondaryLabel` because a badge is *about*
+   * the thing beside it; initials are not about a person, they **are** the
+   * person — the whole of what is left when the photograph is missing. And
+   * measured on this gray the secondary label is 3.5:1 in the light palette,
+   * which is under the 4.5:1 these letters need at 8 to 11 pixels. `label`
+   * clears it in both palettes.
+   */
+  fallbackLabel: colors.label,
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced
+ * palette; see `button.tokens.stylex.ts` for why a group declared only at the
+ * document root keeps the root palette inside a themed subtree.
+ */
+export const avatarPaletteTheme = stylex.createTheme(avatar, {
+  fallbackBackground: colors.gray5,
+  fallbackLabel: colors.label,
+});
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
new file mode 100644
index 000000000..3fc95ca37
--- /dev/null
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -0,0 +1,299 @@
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import * as stylex from '@stylexjs/stylex';
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { appendClassName } from '../internal/class-name';
+import { corner, radius } from '../tokens/scales.stylex';
+import { avatar } from './avatar.tokens.stylex';
+
+/**
+ * How much room the face takes. The letters and the glyph inside it follow from
+ * this, so a caller states one fact rather than three that can disagree.
+ */
+export type AvatarSize = 'mini' | 'small' | 'medium' | 'large' | 'xlarge';
+
+/**
+ * What is being stood in for. A **person** is a circle, which is what a circle
+ * has meant in every interface a person has used; a **thing** — a workspace, an
+ * organisation, a repository — is a tile, because a circle around a logo is a
+ * crop rather than a shape and the mark inside it was drawn square.
+ */
+export type AvatarShape = 'circle' | 'tile';
+
+type RootBaseProps = ComponentProps<typeof BaseAvatar.Root>;
+type ImageBaseProps = ComponentProps<typeof BaseAvatar.Image>;
+type FallbackBaseProps = ComponentProps<typeof BaseAvatar.Fallback>;
+
+export interface AvatarRootProps extends Omit<RootBaseProps, 'className'> {
+  /** Defaults to `medium`. */
+  size?: AvatarSize;
+  /** Defaults to `circle`. */
+  shape?: AvatarShape;
+  className?: string;
+}
+
+export interface AvatarImageProps extends Omit<ImageBaseProps, 'className'> {
+  className?: string;
+}
+
+export interface AvatarFallbackProps extends Omit<FallbackBaseProps, 'className' | 'style'> {
+  children?: ReactNode;
+  className?: string;
+  /**
+   * The identity colour of the thing this stands in for, where the surface has
+   * one — a hue derived from a workspace name, so the same workspace is the
+   * same colour on every screen. It is a plain object rather than Base UI's
+   * state callback, because it is merged with the compiled style rather than
+   * replacing it, and because which hue belongs to which name is a product fact
+   * that no state of this component reports.
+   */
+  style?: CSSProperties;
+}
+
+/**
+ * The rung the root chose, for the parts under it. A fallback's type step and
+ * its glyph box are facts about the box around them, and Base UI's own state
+ * carries the image's loading status rather than the size, so the size travels
+ * here instead of being restated on every part.
+ */
+const AvatarSizeContext = createContext<AvatarSize>('medium');
+
+const styles = stylex.create({
+  /**
+   * The box. It crops whatever is inside it — a photograph that is not square,
+   * a letter that overhangs — which is the whole of what the root does beyond
+   * choosing the shape.
+   */
+  root: {
+    boxSizing: 'border-box',
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // An avatar states how much room it takes; it never gives any of it back to
+    // a row that ran out. Every one of the deleted implementation's call sites
+    // had reached for `shrink-0` to say so.
+    flexShrink: 0,
+    // …and it never takes more, either. A flex item's automatic minimum size is
+    // its content's, so a 16px circle holding two initials is laid out 20px
+    // wide and stops being a circle — which is what the board showed, and what
+    // no unit test could: jsdom applies none of this CSS. The width is the
+    // fact, and anything wider than it is cropped.
+    minWidth: 0,
+    overflow: 'hidden',
+    cornerShape: corner.shape,
+    userSelect: 'none',
+  },
+  /**
+   * A person. `radius.full` takes `corner.round` by the rules: a squircle at
+   * that radius is a superellipse, which turns a face into a rounded square.
+   */
+  circle: { borderRadius: radius.full, cornerShape: corner.round },
+  mini: { width: avatar.sizeMini, height: avatar.sizeMini },
+  small: { width: avatar.sizeSmall, height: avatar.sizeSmall },
+  medium: { width: avatar.sizeMedium, height: avatar.sizeMedium },
+  large: { width: avatar.sizeLarge, height: avatar.sizeLarge },
+  xlarge: { width: avatar.sizeXlarge, height: avatar.sizeXlarge },
+  tileMini: { borderRadius: avatar.tileRadiusMini },
+  tileSmall: { borderRadius: avatar.tileRadiusSmall },
+  tileMedium: { borderRadius: avatar.tileRadiusMedium },
+  tileLarge: { borderRadius: avatar.tileRadiusLarge },
+  tileXlarge: { borderRadius: avatar.tileRadiusXlarge },
+  /**
+   * The picture. It fills the box and is cropped to it rather than squashed
+   * into it: an avatar arrives at whatever aspect its owner uploaded, and a
+   * stretched face is worse than a cropped one.
+   */
+  image: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    // The root already clips, but a rounded image inside a rounded box leaves
+    // the corners of the crop showing during the load of the next one.
+    borderRadius: 'inherit',
+    display: 'block',
+  },
+  /** The letters, or the mark. */
+  fallback: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    // The same automatic minimum, one level in: the fallback is a flex item of
+    // the root, and without this the letters push it past the box they are in.
+    minWidth: 0,
+    borderRadius: 'inherit',
+    backgroundColor: avatar.fallbackBackground,
+    color: avatar.fallbackLabel,
+    fontWeight: 500,
+    // Two initials are two capitals, and a name in a script with no capitals is
+    // one grapheme; neither should ever be hyphenated or wrapped.
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+  },
+  initialsMini: { fontSize: avatar.initialsMini },
+  initialsSmall: { fontSize: avatar.initialsSmall },
+  initialsMedium: { fontSize: avatar.initialsMedium },
+  initialsLarge: { fontSize: avatar.initialsLarge },
+  initialsXlarge: { fontSize: avatar.initialsXlarge },
+  /** The box a caller's glyph is given, and fills. */
+  glyph: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  glyphMini: { width: avatar.glyphMini, height: avatar.glyphMini },
+  glyphSmall: { width: avatar.glyphSmall, height: avatar.glyphSmall },
+  glyphMedium: { width: avatar.glyphMedium, height: avatar.glyphMedium },
+  glyphLarge: { width: avatar.glyphLarge, height: avatar.glyphLarge },
+  glyphXlarge: { width: avatar.glyphXlarge, height: avatar.glyphXlarge },
+});
+
+const BOXES = {
+  mini: styles.mini,
+  small: styles.small,
+  medium: styles.medium,
+  large: styles.large,
+  xlarge: styles.xlarge,
+} as const;
+
+const TILES = {
+  mini: styles.tileMini,
+  small: styles.tileSmall,
+  medium: styles.tileMedium,
+  large: styles.tileLarge,
+  xlarge: styles.tileXlarge,
+} as const;
+
+const INITIALS = {
+  mini: styles.initialsMini,
+  small: styles.initialsSmall,
+  medium: styles.initialsMedium,
+  large: styles.initialsLarge,
+  xlarge: styles.initialsXlarge,
+} as const;
+
+const GLYPHS = {
+  mini: styles.glyphMini,
+  small: styles.glyphSmall,
+  medium: styles.glyphMedium,
+  large: styles.glyphLarge,
+  xlarge: styles.glyphXlarge,
+} as const;
+
+/**
+ * The box a face goes in.
+ *
+ * It holds an `Avatar.Image` and an `Avatar.Fallback`, and Base UI decides
+ * which of the two is on screen from the image's own loading status — so a
+ * surface writes both and never writes the condition. That is the part the
+ * deleted Radix wrapper also got right; what it did not have was a size, so the
+ * box and the letters inside it were two classes at every call site.
+ */
+export const AvatarRoot = forwardRef<HTMLSpanElement, AvatarRootProps>(function AvatarRoot(
+  { size = 'medium', shape = 'circle', className, ...rest },
+  ref
+) {
+  const sx = stylex.props(
+    styles.root,
+    BOXES[size],
+    shape === 'circle' ? styles.circle : TILES[size]
+  );
+  return (
+    <AvatarSizeContext.Provider value={size}>
+      <BaseAvatar.Root
+        ref={ref}
+        data-size={size}
+        data-shape={shape}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    </AvatarSizeContext.Provider>
+  );
+});
+
+/**
+ * The picture. It is mounted only once it has loaded, which is Base UI's doing:
+ * a broken URL leaves the letters standing rather than flashing a torn image
+ * icon over them.
+ */
+export const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(function AvatarImage(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(styles.image);
+  return (
+    <BaseAvatar.Image
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/**
+ * What stands in for the picture: initials, or a mark.
+ *
+ * The fill is a gray rather than a semantic colour, because a stand-in for a
+ * face has no role in this interface — the same reading that gives `Skeleton`
+ * its gray. A surface that has an identity colour of its own for the thing —
+ * a hue derived from a workspace name, so the same workspace is the same colour
+ * on every screen — states it as a `style`, since which colour belongs to which
+ * name is a product fact and not a token.
+ */
+export const AvatarFallback = forwardRef<HTMLSpanElement, AvatarFallbackProps>(
+  function AvatarFallback({ className, style, ...rest }, ref) {
+    const size = useContext(AvatarSizeContext);
+    const sx = stylex.props(styles.fallback, INITIALS[size]);
+    return (
+      <BaseAvatar.Fallback
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        // The one part of this package that merges a caller's `style` rather
+        // than replacing it. Everywhere else `style` carries nothing a caller
+        // has business setting, but the identity colour this fallback is
+        // documented to take arrives that way — which hue belongs to which
+        // workspace is a product fact, not a token — so dropping it would be
+        // dropping the thing the prop is for.
+        style={sx.style ? { ...sx.style, ...style } : style}
+      />
+    );
+  }
+);
+
+/**
+ * The box a mark inside a fallback is given, and fills.
+ *
+ * Every glyph in this package states 100% of whatever holds it, and StyleX has
+ * no descendant selector to reach one with, so whatever holds a glyph draws its
+ * box — a menu row's leading slot, a badge's, an icon-only Button's. A fallback
+ * holding a person-shaped mark instead of letters is the same case, and the box
+ * follows the rung rather than the icon library's default.
+ */
+export function AvatarGlyph({ children }: { children: ReactNode }) {
+  const size = useContext(AvatarSizeContext);
+  const sx = stylex.props(styles.glyph, GLYPHS[size]);
+  return (
+    <span aria-hidden="true" className={sx.className} style={sx.style}>
+      {children}
+    </span>
+  );
+}
+
+export const Avatar = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+  Glyph: AvatarGlyph,
+};
diff --git a/packages/ui/src/badge/badge.tokens.stylex.ts b/packages/ui/src/badge/badge.tokens.stylex.ts
new file mode 100644
index 000000000..185ff5be2
--- /dev/null
+++ b/packages/ui/src/badge/badge.tokens.stylex.ts
@@ -0,0 +1,129 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors } from '../tokens/colors.stylex';
+import { radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * A standing fact about the thing beside it: a plan tier, a machine's OS, a
+ * status a row holds while nothing is happening.
+ *
+ * A Badge is the one part of this system that is on **no rung**. It sits on
+ * whatever holds it — a page, a card, a menu row, a dialog panel — so it cannot
+ * take a background from the ladder the way every other surface does: the
+ * rules' own note about `hoverFill` and `selectedFill` collapsing on the
+ * floating rung is what a badge would hit on three rungs out of six. Its fill
+ * is therefore a film rather than a colour: the tone at a few percent over
+ * *whatever is underneath*, which is the form `Button`'s destructive ghost
+ * hover already takes. One declaration then reads correctly on every rung and
+ * in both palettes.
+ *
+ * The words stay ink in every tone, and that is measured rather than preferred.
+ * `warning` is `hsl(32 90% 48%)` in the light palette, which is 2.8:1 on a
+ * near-white surface — a colour tuned for a 16px mark and a tint, where 3:1 is
+ * the bar, used as 11px text where the bar is 4.5:1. A badge is never wordless,
+ * so unlike an Alert's mark it does not need colour to say which kind it is:
+ * the tint carries the tone and the word carries the fact.
+ *
+ * Which neutral ink carries it is a second measurement, and it went the other
+ * way: see `label` below.
+ */
+export const badge = stylex.defineVars({
+  // A 20px chip on the 16px corner: the rules put `radius.mini` on the small
+  // things, and the control ladder starts four pixels above this.
+  height: '20px',
+  radius: radius.mini,
+  paddingX: space[1.5],
+  gap: space[1],
+  // What a caller's glyph is given, because this package's glyphs state 100% of
+  // whatever holds them and StyleX has no descendant selector to reach one
+  // with. It is the menu row's leading box at a badge's scale.
+  glyphSize: '12px',
+  /**
+   * The neutral word, and the ink every tone's word is pulled toward.
+   *
+   * `label`, not `secondaryLabel`. Metadata is *about* the thing it sits beside,
+   * which is the reading that first gave this `secondaryLabel` — but a badge's
+   * word sits on the badge's own film rather than on the page, and measured
+   * there `secondaryLabel` was 3.9:1 on a danger chip and 3.4:1 on one inside a
+   * popup, under the 4.5:1 that 11px text needs. It was under it before the
+   * films were strengthened; the tint only made a failing number worse.
+   *
+   * A badge stays quieter than the thing it is attached to by taking the
+   * caption step, which is a size — not by taking a colour that cannot carry
+   * its own words.
+   */
+  label: colors.label,
+  labelSize: text.captionSize,
+  labelLeading: text.captionLeading,
+  /**
+   * The word carries the tone, and that is the part of this chip a person
+   * actually reads.
+   *
+   * The rules say not to colour a badge's words with its tone, and the
+   * measurement behind that rule stands: the **raw** `warning` is 2.8:1 on a
+   * near-white surface, a colour tuned for a 16px mark where the bar is 3:1,
+   * used as 11px text where it is 4.5:1. What the rule left out is that the raw
+   * tone is not the only way to carry a hue. Pulled **halfway to `label`**, a
+   * tone keeps its hue and gains the ink's contrast: measured on its own chip,
+   * on every rung and in both palettes, the worst of the four is 5.2:1.
+   *
+   * This is what the film alone could not do. A 20px chip's tint is a wash a
+   * few percent off its surface; its word is the mark a person looks at. In the
+   * light palette the four words land 0.097 apart in oklab at the closest, and
+   * in the dark palette 0.048 — against 0.030 and 0.035 for the films they sit
+   * on. The dark palette is where this earns its place: there `accent` is a
+   * pale peach and `warning` an amber, twenty-six degrees apart, so their films
+   * are two brown washes and no percentage separates them. Their words are a
+   * peach and a gold, at four times the chroma.
+   *
+   * Half is not a round number chosen for tidiness. At 60% of the tone the
+   * worst word is 4.2:1 — under the bar on the floating rung, where the chip is
+   * already a step darker — and at 40% the hues start washing out. Half clears
+   * the bar with room on every rung and keeps the chroma that makes the point.
+   *
+   * `label` itself is the fifth: a neutral badge has no tone to carry.
+   */
+  runningLabel: `color-mix(in oklab, ${colors.accent} 50%, ${colors.label})`,
+  successLabel: `color-mix(in oklab, ${colors.success} 50%, ${colors.label})`,
+  warningLabel: `color-mix(in oklab, ${colors.warning} 50%, ${colors.label})`,
+  dangerLabel: `color-mix(in oklab, ${colors.destructive} 50%, ${colors.label})`,
+  /**
+   * The films. `label` is far stronger against either palette's background than
+   * any of the tones, so the neutral one stays thinner than the rest.
+   *
+   * 12 and 22 rather than the 8 and 14 these started at. At the first strength
+   * the five tones were not far enough apart to be told apart: measured off the
+   * rendered board, the closest pair was 0.019 in oklab in the light palette
+   * (neutral against success) and 0.026 in the dark one (running against
+   * warning). At 12/22 those are 0.030 and 0.035. It is still a film — the word
+   * is what says which tone this is, and the tint only has to make that
+   * believable at a glance — but a film nobody can separate is a film doing
+   * nothing.
+   */
+  neutralFill: `color-mix(in oklab, ${colors.label} 12%, transparent)`,
+  // The one tone the message family does not have, and `Progress` does: a badge
+  // marking something that is happening now takes the colour the rules give
+  // live state by name. It is the film, not the words — the accent is never a
+  // fill a person presses, and a badge is nothing a person presses.
+  runningFill: `color-mix(in oklab, ${colors.accent} 22%, transparent)`,
+  successFill: `color-mix(in oklab, ${colors.success} 22%, transparent)`,
+  warningFill: `color-mix(in oklab, ${colors.warning} 22%, transparent)`,
+  dangerFill: `color-mix(in oklab, ${colors.destructive} 22%, transparent)`,
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced
+ * palette; see `button.tokens.stylex.ts` for why a group declared only at the
+ * document root keeps the root palette inside a themed subtree.
+ */
+export const badgePaletteTheme = stylex.createTheme(badge, {
+  label: colors.label,
+  runningLabel: `color-mix(in oklab, ${colors.accent} 50%, ${colors.label})`,
+  successLabel: `color-mix(in oklab, ${colors.success} 50%, ${colors.label})`,
+  warningLabel: `color-mix(in oklab, ${colors.warning} 50%, ${colors.label})`,
+  dangerLabel: `color-mix(in oklab, ${colors.destructive} 50%, ${colors.label})`,
+  neutralFill: `color-mix(in oklab, ${colors.label} 12%, transparent)`,
+  runningFill: `color-mix(in oklab, ${colors.accent} 22%, transparent)`,
+  successFill: `color-mix(in oklab, ${colors.success} 22%, transparent)`,
+  warningFill: `color-mix(in oklab, ${colors.warning} 22%, transparent)`,
+  dangerFill: `color-mix(in oklab, ${colors.destructive} 22%, transparent)`,
+});
diff --git a/packages/ui/src/badge/badge.tsx b/packages/ui/src/badge/badge.tsx
new file mode 100644
index 000000000..d9492204e
--- /dev/null
+++ b/packages/ui/src/badge/badge.tsx
@@ -0,0 +1,133 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import type { FeedbackTone } from '../feedback/tone';
+import { appendClassName } from '../internal/class-name';
+import { corner } from '../tokens/scales.stylex';
+import { badge } from './badge.tokens.stylex';
+
+/**
+ * What a badge states: the four a message reports, and the one a bar does.
+ *
+ * The four outcomes are a message's own, because a badge is the standing form
+ * of what an Alert says once, and one vocabulary cannot drift into two. The
+ * fifth is `running`, which `Progress` adds for the same reason: a badge on a
+ * machine that is being reached, or a screen that is being opened, is live
+ * state, and the rules give that colour to live state by name.
+ */
+export type BadgeTone = 'running' | FeedbackTone;
+
+export interface BadgeProps extends Omit<ComponentProps<'span'>, 'className'> {
+  /** What the badge states. Defaults to neutral. */
+  tone?: BadgeTone;
+  /**
+   * The glyph that identifies the thing — a lock beside "Private", a laptop
+   * beside an OS. The badge draws the box, so a glyph placed here states its
+   * own size as 100% rather than arriving at its icon library's default.
+   *
+   * It is not the tone's mark. An Alert draws its own because a tone is the
+   * whole point of a message and a caller's glyph can put a tick on a failure;
+   * a badge always carries its word, so the tone needs no glyph and the box is
+   * free to hold what the caller came with — the same box a menu row's leading
+   * slot is.
+   */
+  icon?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+const styles = stylex.create({
+  /**
+   * A chip of metadata. It neither grows nor shrinks, for the reason a menu
+   * row's shortcut does not: what is beside it is the thing, and the badge is
+   * the note about it. A long one ends in an ellipsis rather than wrapping to a
+   * second line, because a two-line badge is no longer a badge; how much room
+   * it may take is the surface's, stated as a max width on the caller's side.
+   */
+  root: {
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    gap: badge.gap,
+    height: badge.height,
+    paddingInline: badge.paddingX,
+    borderRadius: badge.radius,
+    cornerShape: corner.shape,
+    color: badge.label,
+    fontSize: badge.labelSize,
+    lineHeight: badge.labelLeading,
+    fontWeight: 500,
+    // A badge is where a version, a count or a quota lands, and those line up
+    // between rows only if the figures are one width.
+    fontVariantNumeric: 'tabular-nums',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    // A badge is a fact, not a control: nothing here answers a pointer, takes
+    // focus or reports a state. A caller who needs one of those needs a Button.
+    userSelect: 'none',
+  },
+  /**
+   * A tone is two declarations: the film under the word, and the word. The
+   * second is the one that does the work — a 20px chip's tint is a wash a few
+   * percent off its surface, and its word is the mark a person looks at. See
+   * `badge.tokens.stylex.ts` for why a tone's word is that tone pulled halfway
+   * to the ink rather than the tone itself.
+   */
+  neutral: { backgroundColor: badge.neutralFill },
+  running: { backgroundColor: badge.runningFill, color: badge.runningLabel },
+  success: { backgroundColor: badge.successFill, color: badge.successLabel },
+  warning: { backgroundColor: badge.warningFill, color: badge.warningLabel },
+  danger: { backgroundColor: badge.dangerFill, color: badge.dangerLabel },
+  /** The box the caller's glyph is given, and fills. */
+  glyph: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: badge.glyphSize,
+    height: badge.glyphSize,
+  },
+});
+
+const TONES = {
+  neutral: styles.neutral,
+  running: styles.running,
+  success: styles.success,
+  warning: styles.warning,
+  danger: styles.danger,
+} as const;
+
+/**
+ * A standing fact about the thing beside it.
+ *
+ * It is on no rung of the elevation ladder, because it sits on whatever holds
+ * it: a page, a card, a menu row, a dialog panel. So its tone is a **film of
+ * the tone over what is underneath** rather than a background of its own — one
+ * declaration that reads on every rung and in both palettes — and its words
+ * stay ink, because a badge always carries its word and the palette's `warning`
+ * is a colour for a 16px mark rather than for 11px text.
+ *
+ * The old implementation's `default` variant filled the chip with the primary
+ * colour, which this system's rules give to a stored value: a badge that looked
+ * like a primary Button invited a press it does not answer. There is no such
+ * variant here, and no hover, focus ring or transition either.
+ */
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  { tone = 'neutral', icon, className, children, ...rest },
+  ref
+) {
+  const sx = stylex.props(styles.root, TONES[tone]);
+  const glyph = stylex.props(styles.glyph);
+  return (
+    <span ref={ref} {...rest} className={appendClassName(sx.className, className)} style={sx.style}>
+      {icon ? (
+        <span aria-hidden="true" className={glyph.className} style={glyph.style}>
+          {icon}
+        </span>
+      ) : null}
+      {children}
+    </span>
+  );
+});
diff --git a/packages/ui/src/button/button.tokens.stylex.ts b/packages/ui/src/button/button.tokens.stylex.ts
new file mode 100644
index 000000000..6b340bcfa
--- /dev/null
+++ b/packages/ui/src/button/button.tokens.stylex.ts
@@ -0,0 +1,56 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { control, radius, text } from '../tokens/scales.stylex';
+
+export const button = stylex.defineVars({
+  heightMini: '24px',
+  heightSmall: control.small,
+  heightMedium: control.medium,
+  heightLarge: control.large,
+  paddingXMini: '8px',
+  paddingXSmall: '10px',
+  paddingXMedium: '12px',
+  paddingXLarge: '14px',
+  radiusMini: '6px',
+  radiusSmall: radius.small,
+  radiusMedium: radius.medium,
+  // The 28 / 32 / 36 ladder is one control step, so one token carries it: a
+  // per-size token whose values happen to match is an invitation to drift.
+  // `mini` is not on that ladder, so it keeps its own.
+  textMini: text.footnoteSize,
+  text: text.subheadlineSize,
+  gap: '6px',
+  // What an icon-only button holds. The button is square at the size's height
+  // and the glyph inside it is not: 16 is the size every other holder in this
+  // package gives a glyph — a menu row's leading box, a Select's chevron, a
+  // message's mark — so an icon button is the same mark in a pressable box.
+  iconSize: '16px',
+  primaryBackground: colors.label,
+  primaryLabel: colors.background,
+  primaryEdge: shadow.inkEdge,
+  secondaryBackground: colors.raisedBackground,
+  secondaryShadow: shadow.raised,
+  ghostLabel: colors.secondaryLabel,
+  ghostHover: colors.hoverFill,
+  ring: colors.accent,
+  ringWidth: '2px',
+});
+
+/**
+ * The colour-valued tokens above are declared once at the document root, so a
+ * custom property that points at a semantic token resolves against the palette
+ * in force there and inherits that resolved value. A theme applied to a subtree
+ * would leave a button carrying the root palette. This theme re-declares those
+ * tokens on the element that carries the palette, where they resolve again.
+ * `ThemeRoot` applies it with every forced palette.
+ */
+export const buttonPaletteTheme = stylex.createTheme(button, {
+  primaryBackground: colors.label,
+  primaryLabel: colors.background,
+  primaryEdge: shadow.inkEdge,
+  secondaryBackground: colors.raisedBackground,
+  secondaryShadow: shadow.raised,
+  ghostLabel: colors.secondaryLabel,
+  ghostHover: colors.hoverFill,
+  ring: colors.accent,
+});
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
new file mode 100644
index 000000000..2acfe1df5
--- /dev/null
+++ b/packages/ui/src/button/button.tsx
@@ -0,0 +1,221 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { colors } from '../tokens/colors.stylex';
+import { corner, duration, ease, radius, text } from '../tokens/scales.stylex';
+import { button } from './button.tokens.stylex';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'link';
+export type ButtonSize = 'mini' | 'small' | 'medium' | 'large';
+export type ButtonTone = 'neutral' | 'destructive';
+export type ButtonShape = 'default' | 'pill';
+
+type BaseProps = ComponentProps<typeof BaseButton>;
+
+export interface ButtonProps extends Omit<BaseProps, 'className'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  tone?: ButtonTone;
+  shape?: ButtonShape;
+  icon?: boolean;
+  className?: string;
+}
+
+const PRESS = { transform: 'translateY(1px)' };
+const RING = `0 0 0 ${button.ringWidth} ${button.ring}`;
+
+const styles = stylex.create({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: button.gap,
+    flexShrink: 0,
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    lineHeight: 1,
+    color: 'inherit',
+    cursor: { default: 'pointer', ':disabled': 'default' },
+    userSelect: 'none',
+    textDecoration: 'none',
+    cornerShape: corner.shape,
+    // Not an `outline`: the product shell resets every outline with
+    // `!important`, which no layer order overrides, so the ring rides in the
+    // same box-shadow as the variant's own edge. Each variant composes it,
+    // because a box-shadow list cannot be added to from a second class.
+    outlineStyle: 'none',
+    opacity: { default: 1, ':disabled': 0.45 },
+    pointerEvents: { default: 'auto', ':disabled': 'none' },
+    transitionProperty: 'background-color, color, box-shadow, transform, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  mini: {
+    height: button.heightMini,
+    paddingInline: button.paddingXMini,
+    borderRadius: button.radiusMini,
+    fontSize: button.textMini,
+  },
+  small: {
+    height: button.heightSmall,
+    paddingInline: button.paddingXSmall,
+    borderRadius: button.radiusSmall,
+    fontSize: button.text,
+  },
+  medium: {
+    height: button.heightMedium,
+    paddingInline: button.paddingXMedium,
+    borderRadius: button.radiusMedium,
+    fontSize: button.text,
+  },
+  large: {
+    height: button.heightLarge,
+    paddingInline: button.paddingXLarge,
+    borderRadius: button.radiusMedium,
+    fontSize: button.text,
+  },
+  /**
+   * The box an icon-only button gives what is in it. It is drawn by the button
+   * for the reason a menu row draws its leading box: this package's glyphs
+   * state their size as 100% of whatever holds them, and StyleX has no
+   * descendant selector with which a button could reach one. Without it a
+   * 16px cross fills a 28px button edge to edge.
+   */
+  glyph: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: button.iconSize,
+    height: button.iconSize,
+  },
+  iconMini: { width: button.heightMini, paddingInline: 0 },
+  iconSmall: { width: button.heightSmall, paddingInline: 0 },
+  iconMedium: { width: button.heightMedium, paddingInline: 0 },
+  iconLarge: { width: button.heightLarge, paddingInline: 0 },
+  // A pill drops the base squircle: at `radius.full` a squircle is a rounded
+  // rectangle, not the stadium shape the shape name promises.
+  pill: { borderRadius: radius.full, cornerShape: corner.round },
+  primary: {
+    backgroundColor: {
+      default: button.primaryBackground,
+      ':hover': `color-mix(in oklab, ${button.primaryBackground}, ${button.primaryLabel} 12%)`,
+    },
+    color: button.primaryLabel,
+    boxShadow: {
+      default: button.primaryEdge,
+      ':focus-visible': `${button.primaryEdge}, ${RING}`,
+      ':active': 'none',
+    },
+    transform: { default: 'none', ':active': PRESS.transform },
+  },
+  secondary: {
+    backgroundColor: {
+      default: button.secondaryBackground,
+      ':hover': `color-mix(in oklab, ${button.secondaryBackground}, ${colors.label} 4%)`,
+    },
+    color: colors.label,
+    boxShadow: {
+      default: button.secondaryShadow,
+      ':focus-visible': `${button.secondaryShadow}, ${RING}`,
+      ':active': 'none',
+    },
+    transform: { default: 'none', ':active': PRESS.transform },
+  },
+  ghost: {
+    backgroundColor: { default: 'transparent', ':hover': button.ghostHover },
+    color: { default: button.ghostLabel, ':hover': colors.label },
+    boxShadow: { default: 'none', ':focus-visible': RING },
+  },
+  destructive: {
+    backgroundColor: {
+      default: colors.destructive,
+      ':hover': `color-mix(in oklab, ${colors.destructive}, ${colors.label} 10%)`,
+    },
+    color: colors.onDestructive,
+    boxShadow: {
+      default: 'inset 0 1px 0 hsl(0 0% 100% / 0.2)',
+      ':focus-visible': `inset 0 1px 0 hsl(0 0% 100% / 0.2), ${RING}`,
+      ':active': 'none',
+    },
+    transform: { default: 'none', ':active': PRESS.transform },
+  },
+  link: {
+    height: 'auto',
+    paddingInline: 0,
+    color: colors.accent,
+    boxShadow: { default: 'none', ':focus-visible': RING },
+    textDecoration: { default: 'none', ':hover': 'underline' },
+    textUnderlineOffset: '4px',
+  },
+  destructiveTone: {
+    color: { default: colors.destructive, ':hover': colors.destructive },
+    backgroundColor: { ':hover': `color-mix(in oklab, ${colors.destructive} 10%, transparent)` },
+  },
+});
+
+const sizeStyles = {
+  mini: styles.mini,
+  small: styles.small,
+  medium: styles.medium,
+  large: styles.large,
+};
+
+const iconStyles = {
+  mini: styles.iconMini,
+  small: styles.iconSmall,
+  medium: styles.iconMedium,
+  large: styles.iconLarge,
+};
+
+export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(
+  {
+    variant = 'primary',
+    size = 'medium',
+    tone = 'neutral',
+    shape = 'default',
+    icon = false,
+    className,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const sx = stylex.props(
+    styles.base,
+    sizeStyles[size],
+    icon && iconStyles[size],
+    shape === 'pill' && styles.pill,
+    styles[variant],
+    tone === 'destructive' &&
+      variant !== 'primary' &&
+      variant !== 'destructive' &&
+      styles.destructiveTone
+  );
+  const glyph = stylex.props(styles.glyph);
+  return (
+    <BaseButton
+      ref={ref}
+      data-variant={variant}
+      data-size={size}
+      {...rest}
+      className={className ? `${sx.className} ${className}` : sx.className}
+      style={sx.style}
+    >
+      {icon ? (
+        <span className={glyph.className} style={glyph.style}>
+          {children}
+        </span>
+      ) : (
+        children
+      )}
+    </BaseButton>
+  );
+});
diff --git a/packages/ui/src/card/card.tokens.stylex.ts b/packages/ui/src/card/card.tokens.stylex.ts
new file mode 100644
index 000000000..dcad65611
--- /dev/null
+++ b/packages/ui/src/card/card.tokens.stylex.ts
@@ -0,0 +1,69 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * The card rung, made a component: `elevatedBackground` under `shadow.card` at
+ * the large radius, with no border, because no border token exists.
+ *
+ * A Card is the same block a Dialog's panel is, one rung down the ladder — a
+ * heading, a sentence about it, what a person came for, and the answers — so
+ * the parts and the gaps read the same. It does not *share* `dialog`, though,
+ * and that is the point the rules make about a menu reaching for
+ * `field.background`: a card and a modal panel are on two rungs, and a group
+ * named for one of them would be the wrong name for the right value the day
+ * either rung moves.
+ *
+ * The type is where the two genuinely differ. A dialog owns the window while it
+ * is open, so it takes `headline`; a card owns a region of a page it shares with
+ * other cards, and the rules reserve `title` for a page that is a page. A card
+ * therefore takes the same `headline` a dialog does — it is the largest step
+ * this system gives to a panel — and nothing here reaches past it.
+ */
+export const card = stylex.defineVars({
+  background: colors.elevatedBackground,
+  shadow: shadow.card,
+  // A surface takes the large radius. Nested radius is outer minus inset, which
+  // is why nothing inside a card reaches for this one.
+  radius: radius.large,
+  padding: space[4],
+  // Between the header, the body a caller writes and the footer.
+  gap: space[4],
+  // Inside the header: a title and the sentence under it are one block.
+  headerGap: space[1.5],
+  footerGap: space[2],
+  title: colors.label,
+  titleSize: text.headlineSize,
+  titleLeading: text.headlineLeading,
+  // The sentence under the title is about the title, so it is the secondary
+  // label at prose size rather than a second heading.
+  description: colors.secondaryLabel,
+  descriptionSize: text.bodySize,
+  descriptionLeading: text.bodyLeading,
+  /**
+   * A card a person can press, under the pointer.
+   *
+   * The ladder names the region rung — `secondaryBackground` — for "hover on a
+   * card", and measured in the dark palette that is the card rung's own value:
+   * `elevatedBackground` and `secondaryBackground` are both `hsl(0 0% 8.6%)`,
+   * so the hover would be invisible in exactly one of the two palettes. Mixing
+   * the rung toward `label` steps away from the surface in both directions at
+   * once, which is the derivation `popup.highlight` already uses for a row and
+   * a secondary Button for its own hover — at that Button's 4%, because a card
+   * is a large area and a row's 6% over one reads as a fill.
+   */
+  hover: `color-mix(in oklab, ${colors.elevatedBackground}, ${colors.label} 4%)`,
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced
+ * palette; see `button.tokens.stylex.ts` for why a group declared only at the
+ * document root keeps the root palette inside a themed subtree.
+ */
+export const cardPaletteTheme = stylex.createTheme(card, {
+  background: colors.elevatedBackground,
+  shadow: shadow.card,
+  title: colors.label,
+  description: colors.secondaryLabel,
+  hover: `color-mix(in oklab, ${colors.elevatedBackground}, ${colors.label} 4%)`,
+});
diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx
new file mode 100644
index 000000000..2f8859892
--- /dev/null
+++ b/packages/ui/src/card/card.tsx
@@ -0,0 +1,200 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { corner, duration, ease, text } from '../tokens/scales.stylex';
+import { card } from './card.tokens.stylex';
+
+/** Which heading a card's title is on the page that holds it. */
+export type CardTitleLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface CardProps extends Omit<ComponentProps<'div'>, 'className'> {
+  /**
+   * The whole card is the pressable thing, so it answers the pointer.
+   *
+   * It marks the card rather than making it a control: the button or the link
+   * stays the caller's, because what a press *does* — navigate, select, open —
+   * is a product decision and a card that rendered its own `<button>` would
+   * have made it. A caller wraps the card in one, or renders one over it.
+   */
+  interactive?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface CardSectionProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface CardTitleProps extends Omit<ComponentProps<'h3'>, 'className'> {
+  /**
+   * The heading element. The step and the weight are the card's; which level
+   * the heading is belongs to the page, because only the page knows what is
+   * above it. Defaults to `h3`.
+   */
+  as?: CardTitleLevel;
+  className?: string;
+}
+
+export interface CardDescriptionProps extends Omit<ComponentProps<'p'>, 'className'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  /**
+   * The card rung: the elevated background under the card shadow. There is no
+   * border — depth without lines — and no ring, because a card is not a control
+   * and nothing here takes focus but what a caller puts inside it.
+   */
+  root: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: card.gap,
+    padding: card.padding,
+    backgroundColor: card.background,
+    boxShadow: card.shadow,
+    borderRadius: card.radius,
+    cornerShape: corner.shape,
+    color: card.title,
+  },
+  /**
+   * The pointer's answer. Only the fill changes: the shadow is the rung and a
+   * card that lifted on hover would be claiming a rung it is not on.
+   */
+  interactive: {
+    backgroundColor: { default: card.background, ':hover': card.hover },
+    cursor: 'pointer',
+    transitionProperty: 'background-color',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  /**
+   * The heading block. A title and the one sentence about it are one block with
+   * one gap, so the card's own `gap` separates the pair from the body rather
+   * than the title from the sentence it belongs to.
+   */
+  header: { display: 'flex', flexDirection: 'column', gap: card.headerGap },
+  title: {
+    margin: 0,
+    fontSize: card.titleSize,
+    lineHeight: card.titleLeading,
+    fontWeight: 600,
+    letterSpacing: text.controlTracking,
+    color: card.title,
+  },
+  description: {
+    margin: 0,
+    fontSize: card.descriptionSize,
+    lineHeight: card.descriptionLeading,
+    fontWeight: 400,
+    color: card.description,
+  },
+  /**
+   * The answers, at the end of the card — the same row a dialog's footer is,
+   * stacking in reverse on a narrow window so the affirmative answer is the
+   * last one read and the nearest to the thumb in both shapes.
+   */
+  footer: {
+    display: 'flex',
+    flexDirection: { default: 'row', '@media (max-width: 480px)': 'column-reverse' },
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: card.footerGap,
+  },
+});
+
+/**
+ * A block of a page, on the card rung.
+ *
+ * It is the elevation ladder's card step made a component: the elevated
+ * background under the card shadow at the large radius, and no border, because
+ * this system has no border token and a card's edge is its shadow. The parts
+ * are a Dialog's — a header, the body a caller writes, and the answers — for
+ * the reason the three modal surfaces share theirs: what differs between a
+ * panel that owns the window and a block that owns a region of a page is the
+ * rung and the heading step, not what either is made of.
+ *
+ * A card does not nest. Two cards one inside the other are the same fill twice
+ * in the light palette, where the card rung and the page are one white; a block
+ * inside a card is the region rung, which is a surface a caller lays out rather
+ * than a primitive.
+ */
+export const CardRoot = forwardRef<HTMLDivElement, CardProps>(function CardRoot(
+  { interactive = false, className, children, ...rest },
+  ref
+) {
+  const sx = stylex.props(styles.root, interactive && styles.interactive);
+  return (
+    <div ref={ref} {...rest} className={appendClassName(sx.className, className)} style={sx.style}>
+      {children}
+    </div>
+  );
+});
+
+/** The title and the sentence about it: one block. */
+export function CardHeader({ children, className }: CardSectionProps) {
+  const sx = stylex.props(styles.header);
+  return (
+    <div className={appendClassName(sx.className, className)} style={sx.style}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * What the card is about.
+ *
+ * It is a real heading, unlike an Alert's title, because a card owns a region
+ * of the page and a person walking the headings should land on it. Which level
+ * that heading is cannot be known here — a card on an onboarding page is the
+ * page's only heading, and the same card in a settings list is the fourth of
+ * nine — so the level is the caller's and the step is not.
+ */
+export const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(
+  { as: Heading = 'h3', className, ...rest },
+  ref
+) {
+  const sx = stylex.props(styles.title);
+  return (
+    <Heading
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/** The sentence under it: prose, in the secondary label. */
+export const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(
+  function CardDescription({ className, ...rest }, ref) {
+    const sx = stylex.props(styles.description);
+    return (
+      <p
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+/** What answers the card. The buttons are the surface's choice, as everywhere. */
+export function CardFooter({ children, className }: CardSectionProps) {
+  const sx = stylex.props(styles.footer);
+  return (
+    <div className={appendClassName(sx.className, className)} style={sx.style}>
+      {children}
+    </div>
+  );
+}
+
+export const Card = {
+  Root: CardRoot,
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Footer: CardFooter,
+};
diff --git a/packages/ui/src/dialog/alert-dialog.tsx b/packages/ui/src/dialog/alert-dialog.tsx
new file mode 100644
index 000000000..c2f9c28dd
--- /dev/null
+++ b/packages/ui/src/dialog/alert-dialog.tsx
@@ -0,0 +1,144 @@
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { PopupContainerProvider } from '../popup/portal-container';
+import { useForcedThemeClassNames } from '../theme/theme';
+import type { ModalContentProps } from './dialog';
+import { DialogFooter, DialogHeader, usePanelContainer } from './parts';
+import { isHidden, modal } from './surface';
+
+type TitleBaseProps = ComponentProps<typeof BaseAlertDialog.Title>;
+type DescriptionBaseProps = ComponentProps<typeof BaseAlertDialog.Description>;
+
+/**
+ * An alert dialog's panel takes everything a dialog's does except the cross:
+ * the point of one is that it is answered rather than dismissed, so there is no
+ * affordance to leave it by and a press beside it is not an answer.
+ */
+export type AlertDialogContentProps = ModalContentProps;
+
+export interface AlertDialogTitleProps extends Omit<TitleBaseProps, 'className'> {
+  className?: string;
+}
+export interface AlertDialogDescriptionProps extends Omit<DescriptionBaseProps, 'className'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  /** The portal carries the forced palette for the backdrop and the panel both. */
+  portal: { display: 'contents' },
+});
+
+/**
+ * The alert dialog, assembled: the same portal, backdrop and panel a
+ * `Dialog.Content` writes, reading the same token group, and naming itself as
+ * the container every popup inside it mounts into.
+ */
+export const AlertDialogContent = forwardRef<HTMLDivElement, AlertDialogContentProps>(
+  function AlertDialogContent(
+    { className, children, container, backdropContent, backdropClassName, ...rest },
+    ref
+  ) {
+    const { ref: panelRef, container: panel } = usePanelContainer<HTMLDivElement>(ref);
+    const palette = useForcedThemeClassNames();
+    return (
+      <BaseAlertDialog.Portal
+        container={container}
+        className={[stylex.props(styles.portal).className, ...palette].filter(Boolean).join(' ')}
+      >
+        <BaseAlertDialog.Backdrop
+          className={(state) =>
+            appendClassName(
+              stylex.props(modal.backdrop, isHidden(state.transitionStatus) && modal.backdropHidden)
+                .className,
+              backdropClassName
+            )
+          }
+        >
+          {backdropContent}
+        </BaseAlertDialog.Backdrop>
+        <BaseAlertDialog.Popup
+          ref={panelRef}
+          {...rest}
+          className={(state) =>
+            appendClassName(
+              stylex.props(modal.popup, isHidden(state.transitionStatus) && modal.popupHidden)
+                .className,
+              className
+            )
+          }
+        >
+          <PopupContainerProvider container={panel}>{children}</PopupContainerProvider>
+        </BaseAlertDialog.Popup>
+      </BaseAlertDialog.Portal>
+    );
+  }
+);
+
+/** The question. Base UI wires it to the panel's accessible name. */
+export const AlertDialogTitle = forwardRef<HTMLHeadingElement, AlertDialogTitleProps>(
+  function AlertDialogTitle({ className, ...rest }, ref) {
+    const sx = stylex.props(modal.title);
+    return (
+      <BaseAlertDialog.Title
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+/** What is at stake in the question; the accessible description. */
+export const AlertDialogDescription = forwardRef<HTMLParagraphElement, AlertDialogDescriptionProps>(
+  function AlertDialogDescription({ className, ...rest }, ref) {
+    const sx = stylex.props(modal.description);
+    return (
+      <BaseAlertDialog.Description
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+/**
+ * An alert dialog: the dialog's panel for a question that has to be answered.
+ *
+ * It is the same rung, the same padding and the same title step as `Dialog` —
+ * they are one family reading one token group — and it differs in exactly what
+ * the name says: there is no cross, and a press beside it is not an answer, so
+ * a stray click cannot take it away. Escape still closes it, because Escape is
+ * the platform's cancel: removing it would leave a keyboard user holding a
+ * panel they had no way to put down. `test/dialog.test.tsx` pins both halves.
+ *
+ * The answers in its footer are Buttons, not parts of this component. Which variant and
+ * which tone an answer takes is the surface's decision — "Delete" is
+ * destructive in one place and ordinary in another — so a footer writes them
+ * the way a menu writes its trigger:
+ *
+ * ```tsx
+ * <AlertDialog.Footer>
+ *   <AlertDialog.Close render={<Button variant="secondary" />}>Keep</AlertDialog.Close>
+ *   <AlertDialog.Close render={<Button variant="destructive" onClick={remove} />}>
+ *     Delete
+ *   </AlertDialog.Close>
+ * </AlertDialog.Footer>
+ * ```
+ */
+export const AlertDialog = {
+  Root: BaseAlertDialog.Root,
+  /** Unstyled, like `Menu.Trigger`: whatever the surface already had there. */
+  Trigger: BaseAlertDialog.Trigger,
+  Content: AlertDialogContent,
+  Header: DialogHeader,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Footer: DialogFooter,
+  /** An answer: it runs its own `onClick` and then closes the panel. */
+  Close: BaseAlertDialog.Close,
+};
diff --git a/packages/ui/src/dialog/dialog.tokens.stylex.ts b/packages/ui/src/dialog/dialog.tokens.stylex.ts
new file mode 100644
index 000000000..5a2eba319
--- /dev/null
+++ b/packages/ui/src/dialog/dialog.tokens.stylex.ts
@@ -0,0 +1,74 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * One token group for every surface on the modal rung — the Dialog, the
+ * AlertDialog that asks a question before it will go away, and the Drawer that
+ * arrives from an edge of the window. They are one family for the reason
+ * `field` is one: the three differ in how they arrive and in what may dismiss
+ * them, not in what they are made of, so a padding or a title colour has one
+ * place to change rather than three.
+ *
+ * The modal rung is the elevated background under the large shadow, over the
+ * overlay — the one rung in the ladder that states all three together, because
+ * a panel that owns the whole window has to separate from a page it is still
+ * showing.
+ */
+export const dialog = stylex.defineVars({
+  background: colors.elevatedBackground,
+  shadow: shadow.large,
+  overlay: colors.overlay,
+  // A surface takes the large radius; nested radius is outer minus inset, which
+  // is why nothing inside a panel reaches for this one.
+  radius: radius.large,
+  padding: space[4],
+  // Between the header, the body a caller writes and the footer.
+  gap: space[4],
+  // Inside the header: a title and the sentence under it are one block.
+  headerGap: space[1.5],
+  footerGap: space[2],
+  // The panel's own width, and the room left around it. A dialog is a column of
+  // prose and controls rather than a page, so it stops growing; the inset is
+  // what the window keeps on both sides when the viewport is narrower than that.
+  width: '512px',
+  // A drawer's short edge. Anchored start or end this is its width; anchored
+  // top or bottom the panel takes the width of the window and this is unused,
+  // so one token states "how far the drawer comes in".
+  drawerSize: '380px',
+  // The gap an inset drawer keeps from every edge. A flush drawer meets the
+  // window and squares the two corners that touch it; an inset one floats at
+  // this distance and keeps all four. It is the viewport's padding rather than
+  // the panel's margin, because the viewport is what Base UI lays the panel out
+  // in and a margin would fight the swipe transform.
+  drawerInset: space[2],
+  inset: space[8],
+  title: colors.label,
+  // The rules put a dialog title at `headline` and reserve `title` for a full
+  // page. A drawer is a panel rather than a page, so it takes the same heading
+  // as the dialog it is.
+  titleSize: text.headlineSize,
+  titleLeading: text.headlineLeading,
+  // The sentence under the title is about the title, so it is the secondary
+  // label at prose size rather than a second heading.
+  description: colors.secondaryLabel,
+  descriptionSize: text.bodySize,
+  descriptionLeading: text.bodyLeading,
+  // The motion rule's rise, restated for a panel that is centred rather than
+  // anchored: it arrives from this far below its resting position. A drawer
+  // does not use it: it arrives from off the edge it belongs to.
+  rise: '4px',
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced
+ * palette; see `button.tokens.stylex.ts` for why a group declared only at the
+ * document root keeps the root palette inside a themed subtree.
+ */
+export const dialogPaletteTheme = stylex.createTheme(dialog, {
+  background: colors.elevatedBackground,
+  shadow: shadow.large,
+  overlay: colors.overlay,
+  title: colors.label,
+  description: colors.secondaryLabel,
+});
diff --git a/packages/ui/src/dialog/dialog.tsx b/packages/ui/src/dialog/dialog.tsx
new file mode 100644
index 000000000..9755f5cc0
--- /dev/null
+++ b/packages/ui/src/dialog/dialog.tsx
@@ -0,0 +1,217 @@
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { Button } from '../button/button';
+import { appendClassName } from '../internal/class-name';
+import { CrossGlyph } from '../internal/glyphs';
+import { PopupContainerProvider, type PopupContainer } from '../popup/portal-container';
+import { useForcedThemeClassNames } from '../theme/theme';
+import { DialogFooter, DialogHeader, usePanelContainer } from './parts';
+import { isHidden, modal } from './surface';
+
+type PopupBaseProps = ComponentProps<typeof BaseDialog.Popup>;
+type BackdropBaseProps = ComponentProps<typeof BaseDialog.Backdrop>;
+type TitleBaseProps = ComponentProps<typeof BaseDialog.Title>;
+type DescriptionBaseProps = ComponentProps<typeof BaseDialog.Description>;
+
+/**
+ * What every panel on the modal rung takes, whichever part opens it.
+ *
+ * Everything Base UI's popup takes comes through — `initialFocus`, `finalFocus`,
+ * a `style`, an `id`, the `data-*` a host hangs its own selectors off — because
+ * a panel is where a product surface puts its own layout, and a props list that
+ * enumerated only what this package thought of would send the next caller back
+ * to Radix for a `style` attribute.
+ */
+export interface ModalContentProps extends Omit<PopupBaseProps, 'className' | 'render'> {
+  /** Where the dialog mounts. Defaults to the document body. */
+  container?: PopupContainer;
+  /**
+   * Content laid over the backdrop rather than in the panel. The backdrop is
+   * the one element that spans the whole window above the page, so a desktop
+   * shell that needs a drag strip there names it here; a dialog has no other
+   * opinion about what a host puts on its overlay.
+   */
+  backdropContent?: ReactNode;
+  /** Classes for the backdrop, for a host that has to restack it. */
+  backdropClassName?: string;
+  className?: string;
+}
+
+export interface DialogContentProps extends ModalContentProps {
+  /**
+   * The cross in the panel's corner. It is on by default because a dialog is
+   * dismissable and a person has to be able to see that without trying; a panel
+   * whose only way out is its own footer says so with `closeButton={false}`.
+   */
+  closeButton?: boolean;
+  /** What a screen reader calls that cross. */
+  closeLabel?: string;
+}
+
+export interface DialogTitleProps extends Omit<TitleBaseProps, 'className'> {
+  className?: string;
+}
+export interface DialogDescriptionProps extends Omit<DescriptionBaseProps, 'className'> {
+  className?: string;
+}
+export interface DialogBackdropProps extends Omit<BackdropBaseProps, 'className'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  /**
+   * The portal wraps both the backdrop and the panel, and a forced palette has
+   * to reach both. It carries no appearance of its own, so it is the one place
+   * the palette classes can land without a second element being invented for
+   * them.
+   */
+  portal: { display: 'contents' },
+});
+
+/** The overlay under the panel, and whatever the host put on it. */
+export const DialogBackdrop = forwardRef<HTMLDivElement, DialogBackdropProps>(
+  function DialogBackdrop({ className, children, ...rest }, ref) {
+    return (
+      <BaseDialog.Backdrop
+        ref={ref}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            stylex.props(modal.backdrop, isHidden(state.transitionStatus) && modal.backdropHidden)
+              .className,
+            className
+          )
+        }
+      >
+        {children}
+      </BaseDialog.Backdrop>
+    );
+  }
+);
+
+/**
+ * The dialog, assembled. Base UI splits it into a portal, a backdrop and the
+ * popup; every caller writes the same three, so this part writes them once.
+ *
+ * It also states the panel as the container for every popup under it. A modal
+ * holds focus and the scroll inside its own subtree by DOM position, so a
+ * Select, a Combobox or a Menu portalled to the body would be outside the
+ * dialog to the dialog — focus pulled back the moment the list opened and the
+ * wheel swallowed before it could scroll. The panel names itself once here, so
+ * a product surface never has to.
+ */
+export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(function DialogContent(
+  {
+    className,
+    children,
+    container,
+    backdropContent,
+    backdropClassName,
+    closeButton = true,
+    closeLabel = 'Close',
+    ...rest
+  },
+  ref
+) {
+  const { ref: panelRef, container: panel } = usePanelContainer<HTMLDivElement>(ref);
+  // A portalled panel leaves the subtree whose palette it should be using, so
+  // the classes that declare that palette travel with it and land on the
+  // portal, where they cascade into the backdrop and the panel alike.
+  const palette = useForcedThemeClassNames();
+  return (
+    <BaseDialog.Portal
+      container={container}
+      className={[stylex.props(styles.portal).className, ...palette].filter(Boolean).join(' ')}
+    >
+      <DialogBackdrop className={backdropClassName}>{backdropContent}</DialogBackdrop>
+      <BaseDialog.Popup
+        ref={panelRef}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            stylex.props(modal.popup, isHidden(state.transitionStatus) && modal.popupHidden)
+              .className,
+            className
+          )
+        }
+      >
+        <PopupContainerProvider container={panel}>{children}</PopupContainerProvider>
+        {closeButton ? (
+          <BaseDialog.Close
+            render={
+              <Button
+                variant="ghost"
+                size="small"
+                icon
+                aria-label={closeLabel}
+                {...stylex.props(modal.close)}
+              />
+            }
+          >
+            <CrossGlyph />
+          </BaseDialog.Close>
+        ) : null}
+      </BaseDialog.Popup>
+    </BaseDialog.Portal>
+  );
+});
+
+/** The heading. Base UI wires it to the panel's accessible name. */
+export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(function DialogTitle(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(modal.title);
+  return (
+    <BaseDialog.Title
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/** What the heading is about; Base UI wires it to the accessible description. */
+export const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
+  function DialogDescription({ className, ...rest }, ref) {
+    const sx = stylex.props(modal.description);
+    return (
+      <BaseDialog.Description
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+/**
+ * A dialog: a panel on the modal rung, over an overlay, holding the page still
+ * until it is answered or dismissed.
+ *
+ * `Dialog.Content` assembles the portal, the backdrop and the panel, renders
+ * the cross that dismisses it, carries a forced palette across the portal, and
+ * names itself as the container every popup inside it mounts into. A caller
+ * writes a header, a body and a footer.
+ *
+ * `AlertDialog` is the same panel for a question that has to be answered, and
+ * `Drawer` is the same panel arriving from an edge of the window and draggable
+ * back out of it; all three read one token group, so a padding or a title step
+ * has one place to change.
+ */
+export const Dialog = {
+  Root: BaseDialog.Root,
+  /** Unstyled, like `Menu.Trigger`: whatever the surface already had there. */
+  Trigger: BaseDialog.Trigger,
+  Content: DialogContent,
+  Backdrop: DialogBackdrop,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  /** A button that closes the dialog; unstyled, so a footer answers with it. */
+  Close: BaseDialog.Close,
+};
diff --git a/packages/ui/src/dialog/parts.tsx b/packages/ui/src/dialog/parts.tsx
new file mode 100644
index 000000000..7066e5088
--- /dev/null
+++ b/packages/ui/src/dialog/parts.tsx
@@ -0,0 +1,69 @@
+import * as stylex from '@stylexjs/stylex';
+import { useCallback, useState, type ReactNode, type Ref } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { modal } from './surface';
+
+export interface DialogSectionProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The heading block. A Dialog, an AlertDialog and a Drawer all open with a title
+ * and, usually, one sentence about it; the pair is one block with one gap, so
+ * the panel's own `gap` separates it from the body rather than from the
+ * sentence it belongs to.
+ */
+export function DialogHeader({ children, className }: DialogSectionProps) {
+  const sx = stylex.props(modal.header);
+  return (
+    <div className={appendClassName(sx.className, className)} style={sx.style}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The answers. They run from the end of a wide panel and stack in reverse on a
+ * narrow one, so the affirmative answer is the last one read and the nearest to
+ * the thumb in both shapes.
+ */
+export function DialogFooter({ children, className }: DialogSectionProps) {
+  const sx = stylex.props(modal.footer);
+  return (
+    <div className={appendClassName(sx.className, className)} style={sx.style}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Tracks the panel element while still handing it to the caller's ref.
+ *
+ * The panel is what every popup inside the dialog has to mount into. A modal
+ * traps focus in its own subtree and locks the scroll outside it by DOM
+ * position, so a Select or a Menu portalled to the body is "outside" the dialog:
+ * focus is dragged back the moment the list opens and the wheel never reaches
+ * it. `Content` names the panel to `PopupContainerProvider` so the lists under
+ * it mount inside the subtree the dialog is guarding.
+ *
+ * It is state rather than a ref on purpose. React attaches a child's refs
+ * before its parent's, so a popup that mounts in the same commit as the panel —
+ * a Select rendered open inside a dialog rendered open — reads the ref while it
+ * is still null and portals itself to the body, which is the one case this
+ * whole mechanism exists to prevent. Holding the element in state re-renders
+ * the subtree once the panel exists, so the provider hands down an element
+ * rather than a box that may not have been filled yet.
+ */
+export function usePanelContainer<T extends HTMLElement>(forwarded: Ref<T>) {
+  const [container, setContainer] = useState<T | null>(null);
+  const ref = useCallback(
+    (node: T | null) => {
+      setContainer(node);
+      if (typeof forwarded === 'function') forwarded(node);
+      else if (forwarded) (forwarded as { current: T | null }).current = node;
+    },
+    [forwarded]
+  );
+  return { ref, container };
+}
diff --git a/packages/ui/src/dialog/surface.ts b/packages/ui/src/dialog/surface.ts
new file mode 100644
index 000000000..0e23493d6
--- /dev/null
+++ b/packages/ui/src/dialog/surface.ts
@@ -0,0 +1,402 @@
+import * as stylex from '@stylexjs/stylex';
+import { control, corner, duration, ease, space, z } from '../tokens/scales.stylex';
+import { dialog } from './dialog.tokens.stylex';
+
+/**
+ * The appearance every surface on the modal rung shares: the overlay under it,
+ * the panel itself, and the header, body and footer a caller lays out on it. It
+ * lives here rather than on one component so Dialog, AlertDialog and Drawer
+ * cannot each grow their own padding, radius and title step, the way
+ * `popup/surface.ts` keeps the floating surfaces together and `field/well.ts`
+ * keeps the controls on the well rung together.
+ *
+ * The modal rung is the one rung that states three things at once: the elevated
+ * background, the large shadow, and an overlay over the page. A dialog covers
+ * what a person was doing and still shows it, so the page has to recede rather
+ * than merely sit behind something.
+ */
+export const modal = stylex.create({
+  /**
+   * The overlay. It is `position: fixed` with `min-height: 100dvh` because on
+   * iOS the visual viewport and the layout viewport disagree while the URL bar
+   * is retracting, and a backdrop sized to the layout viewport leaves a band of
+   * page showing under it.
+   */
+  backdrop: {
+    position: 'fixed',
+    inset: 0,
+    minHeight: '100dvh',
+    backgroundColor: dialog.overlay,
+    opacity: 1,
+    transitionProperty: 'opacity',
+    transitionDuration: duration.regular,
+    transitionTimingFunction: ease.standard,
+    zIndex: z.dialogBackdrop,
+  },
+  /** Both ends of the backdrop's fade. */
+  backdropHidden: { opacity: 0 },
+  /**
+   * A drawer's backdrop lifts as the panel is dragged away.
+   *
+   * Base UI publishes the gesture's progress and the host decides what it
+   * means. Here it means the page comes back as the drawer leaves, so a
+   * half-dismissed drawer shows a half-lit page and the gesture reads as
+   * reversible rather than as a switch that has not flipped yet.
+   */
+  backdropSwipe: {
+    opacity: 'calc(1 - var(--drawer-swipe-progress, 0))',
+    transitionDuration: duration.slow,
+  },
+  /**
+   * The panel: centred, capped, and inset from the window by `dialog.inset` on
+   * every side so it never reaches an edge. The safe-area insets are added to
+   * the vertical cap and shift the centre, so on a device with a notch and a
+   * home indicator the panel sits between them rather than under either; on a
+   * desktop browser every `env()` here resolves to 0 and the panel is centred.
+   */
+  popup: {
+    boxSizing: 'border-box',
+    position: 'fixed',
+    // Every inset in this file is a logical longhand, and deliberately so.
+    // StyleX keeps one class per property *key*, and it has no idea that `top`,
+    // `inset-block-start` and `inset-block` are three names for one thing — so a
+    // drawer resetting `top: auto` over a `inset-block: 0` produced two
+    // declarations and the cascade, not the author, picked the winner. It picked
+    // `top`, and the panel collapsed to the height of its own content at the
+    // bottom of the window. One vocabulary, longhands only, is what makes "the
+    // last style wins" true here.
+    insetInlineStart: '50%',
+    insetInlineEnd: 'auto',
+    insetBlockStart: `calc(50% + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2)`,
+    insetBlockEnd: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: dialog.gap,
+    width: dialog.width,
+    maxWidth: `calc(100vw - ${dialog.inset})`,
+    maxHeight: `calc(100dvh - ${dialog.inset} - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))`,
+    padding: dialog.padding,
+    backgroundColor: dialog.background,
+    boxShadow: dialog.shadow,
+    borderRadius: dialog.radius,
+    cornerShape: corner.shape,
+    color: dialog.title,
+    // A panel that owns the window declares its own edge, which is no edge: the
+    // product shell rings any focused element through a zero-specificity
+    // `:where()` rule, and Base UI moves focus into the popup when it opens.
+    // The shadow and the overlay are how this system separates a modal from the
+    // page; a ring around the whole panel would say the panel is a control.
+    outlineStyle: 'none',
+    transform: 'translate(-50%, -50%)',
+    opacity: 1,
+    transitionProperty: 'opacity, transform',
+    transitionDuration: duration.regular,
+    transitionTimingFunction: ease.standard,
+    zIndex: z.dialog,
+  },
+  /**
+   * Where the rise starts and ends.
+   *
+   * The motion rule puts a popup 4px below its resting position at opacity 0.
+   * A dialog is centred rather than anchored, so the same 4px is composed into
+   * the centring transform: CSS has one `transform` property, and a second
+   * class setting only `translateY` would replace the centring rather than add
+   * to it — the panel would leap to the window's bottom-right as it faded.
+   */
+  popupHidden: {
+    opacity: 0,
+    transform: `translate(-50%, calc(-50% + ${dialog.rise}))`,
+  },
+  /**
+   * The drawer's viewport: a fixed box over the whole window whose alignment
+   * decides which edge the panel sits on.
+   *
+   * A drawer is not a dialog pinned to an edge. Base UI lays the panel out
+   * inside this container rather than positioning it, which is what lets the
+   * panel be dragged: the popup's `transform` belongs to the gesture, so it
+   * cannot also be carrying a `translate(-50%, -50%)` that puts it where it
+   * lives. The viewport holds the position; the popup holds the movement.
+   */
+  drawerViewport: {
+    position: 'fixed',
+    inset: 0,
+    display: 'flex',
+    padding: 0,
+    // The stacking belongs here, not on the panel. A `position: fixed` element
+    // creates a stacking context, so a `z-index` on the panel inside it only
+    // orders the panel against its own siblings — against the page it counts as
+    // whatever the viewport counts as, which with no `z-index` is `auto`. The
+    // backdrop, at `z.dialogBackdrop`, then paints over the drawer: the panel
+    // renders greyed under its own overlay. The viewport is the element that
+    // stacks against the product shell, so it is the one that says so.
+    zIndex: z.dialog,
+  },
+  /**
+   * An inset drawer floats off every edge instead of meeting one.
+   *
+   * It is the viewport's padding rather than a margin on the panel, for the
+   * same reason the position is: a margin would be one more thing competing
+   * with the swipe transform. The safe area is added here too, because a panel
+   * that is already held off the edge should clear the notch by the same
+   * mechanism rather than by padding its own text.
+   */
+  drawerViewportInset: {
+    paddingBlockStart: `calc(${dialog.drawerInset} + env(safe-area-inset-top, 0px))`,
+    paddingBlockEnd: `calc(${dialog.drawerInset} + env(safe-area-inset-bottom, 0px))`,
+    paddingInlineStart: `calc(${dialog.drawerInset} + env(safe-area-inset-left, 0px))`,
+    paddingInlineEnd: `calc(${dialog.drawerInset} + env(safe-area-inset-right, 0px))`,
+  },
+  /** Which edge the panel is laid out against. */
+  viewportTop: { alignItems: 'flex-start', justifyContent: 'center' },
+  viewportBottom: { alignItems: 'flex-end', justifyContent: 'center' },
+  viewportStart: { alignItems: 'stretch', justifyContent: 'flex-start' },
+  viewportEnd: { alignItems: 'stretch', justifyContent: 'flex-end' },
+  /**
+   * The panel itself: the modal rung again, laid out by its viewport and moved
+   * by the gesture.
+   *
+   * Base UI publishes the drag as two custom properties and lets the host
+   * compose them, so the panel follows the finger; on release it publishes a
+   * strength scalar that scales the transition, so a hard throw closes faster
+   * than a gentle one. A drawer crosses the window rather than rising 4px, so
+   * it takes the slow step of the motion scale.
+   */
+  drawerPopup: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: dialog.gap,
+    padding: dialog.padding,
+    backgroundColor: dialog.background,
+    boxShadow: dialog.shadow,
+    borderRadius: dialog.radius,
+    cornerShape: corner.shape,
+    color: dialog.title,
+    // Same reasoning as the dialog panel: the shadow and the overlay separate a
+    // modal from the page, and a ring around the whole panel would say it is a
+    // control.
+    outlineStyle: 'none',
+    overflowY: 'auto',
+    // A drawer that has been scrolled to its end must not hand the wheel to the
+    // page it is covering.
+    overscrollBehavior: 'contain',
+    transform:
+      'translate(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px))',
+    willChange: 'transform',
+    transitionProperty: 'transform',
+    transitionDuration: duration.slow,
+    transitionTimingFunction: ease.standard,
+    // No `z-index` here on purpose: the viewport above already carries the
+    // rung's, and a second one on a panel inside that stacking context would
+    // look like it did something.
+  },
+  /**
+   * How big the panel is on the edge it came in on. Top and bottom take the
+   * width of the window and cap their height; start and end take the height and
+   * cap their width at `drawerSize`.
+   */
+  drawerTop: { width: '100%', maxHeight: `calc(100dvh - ${dialog.inset})` },
+  drawerBottom: { width: '100%', maxHeight: `calc(100dvh - ${dialog.inset})` },
+  drawerStart: {
+    height: '100%',
+    width: dialog.drawerSize,
+    maxWidth: `calc(100vw - ${dialog.inset})`,
+  },
+  drawerEnd: {
+    height: '100%',
+    width: dialog.drawerSize,
+    maxWidth: `calc(100vw - ${dialog.inset})`,
+  },
+  /**
+   * A flush drawer meets the window, so the two corners that touch it are
+   * square and the safe area is padding inside the panel rather than a gap
+   * outside it — the panel reaches the physical edge and keeps its text off the
+   * notch. An inset drawer states none of this: it keeps all four corners and
+   * its viewport already holds it clear.
+   */
+  flushTop: {
+    paddingBlockStart: `calc(${dialog.padding} + env(safe-area-inset-top, 0px))`,
+    borderStartStartRadius: 0,
+    borderStartEndRadius: 0,
+  },
+  flushBottom: {
+    paddingBlockEnd: `calc(${dialog.padding} + env(safe-area-inset-bottom, 0px))`,
+    borderEndStartRadius: 0,
+    borderEndEndRadius: 0,
+  },
+  flushStart: {
+    paddingInlineStart: `calc(${dialog.padding} + env(safe-area-inset-left, 0px))`,
+    borderStartStartRadius: 0,
+    borderEndStartRadius: 0,
+  },
+  flushEnd: {
+    paddingInlineEnd: `calc(${dialog.padding} + env(safe-area-inset-right, 0px))`,
+    borderStartEndRadius: 0,
+    borderEndEndRadius: 0,
+  },
+  /**
+   * Both ends of a drawer's travel: fully off the edge it belongs to.
+   *
+   * This replaces the whole transform rather than composing the swipe
+   * variables, which is right — while the panel is arriving or leaving there is
+   * no gesture to follow, and Base UI reports that state as the transition
+   * status the way it does everywhere else in this package.
+   */
+  drawerHiddenTop: { transform: 'translateY(-100%)' },
+  drawerHiddenBottom: { transform: 'translateY(100%)' },
+  drawerHiddenStart: { transform: 'translateX(-100%)' },
+  drawerHiddenEnd: { transform: 'translateX(100%)' },
+  /**
+   * The same, for a panel its viewport is holding off the edge: 100% of the
+   * panel only reaches the gap, so the gap and the safe area go with it or the
+   * drawer parks with a strip of itself still showing.
+   */
+  drawerInsetHiddenTop: {
+    transform: `translateY(calc(-100% - ${dialog.drawerInset} - env(safe-area-inset-top, 0px)))`,
+  },
+  drawerInsetHiddenBottom: {
+    transform: `translateY(calc(100% + ${dialog.drawerInset} + env(safe-area-inset-bottom, 0px)))`,
+  },
+  drawerInsetHiddenStart: {
+    transform: `translateX(calc(-100% - ${dialog.drawerInset} - env(safe-area-inset-left, 0px)))`,
+  },
+  drawerInsetHiddenEnd: {
+    transform: `translateX(calc(100% + ${dialog.drawerInset} + env(safe-area-inset-right, 0px)))`,
+  },
+  /** The title and the sentence under it: one block, so one gap. */
+  header: { display: 'flex', flexDirection: 'column', gap: dialog.headerGap },
+  title: {
+    margin: 0,
+    // The cross sits in the panel's corner, out of the header's flow, and the
+    // title is the one line at its height — so the title is what keeps the room
+    // for it. A description is already below the button's 28px and clears it.
+    // The room is kept whether or not a panel shows a cross: a title is a short
+    // line that rarely reaches the end of a 512px panel, and the alternative is
+    // a layout fact travelling from `Content` down to a part it does not
+    // render, for a gap nobody can see.
+    paddingInlineEnd: `calc(${control.small} + ${space[2]})`,
+    fontSize: dialog.titleSize,
+    lineHeight: dialog.titleLeading,
+    fontWeight: 600,
+    letterSpacing: 'normal',
+    color: dialog.title,
+  },
+  description: {
+    margin: 0,
+    fontSize: dialog.descriptionSize,
+    lineHeight: dialog.descriptionLeading,
+    fontWeight: 400,
+    color: dialog.description,
+  },
+  /**
+   * The answers, at the end of the panel.
+   *
+   * They run in a row from the end on a wide window and stack in reverse on a
+   * narrow one, so the affirmative answer is the one nearest the thumb in both
+   * — the same order, read the way each shape is read.
+   */
+  footer: {
+    display: 'flex',
+    flexDirection: { default: 'row', '@media (max-width: 480px)': 'column-reverse' },
+    justifyContent: 'flex-end',
+    gap: dialog.footerGap,
+  },
+  /**
+   * The close affordance, pinned to the panel's own padding box so it sits in
+   * the corner rather than in the header's flow — a header with no description
+   * would otherwise put it on the title's baseline and a wrapped title would
+   * move it.
+   */
+  close: {
+    position: 'absolute',
+    insetBlockStart: dialog.padding,
+    insetInlineEnd: dialog.padding,
+  },
+});
+
+/** Both ends of a fade or a rise, as Base UI reports the transition. */
+export function isHidden(status: string | undefined): boolean {
+  return status === 'starting' || status === 'ending';
+}
+
+/** Which edge a Drawer comes in on, in writing-direction terms. */
+export type DrawerSide = 'top' | 'bottom' | 'start' | 'end';
+
+/**
+ * The swipe that dismisses a drawer, for the edge it came in on.
+ *
+ * Base UI names the gesture in physical directions because a finger moves in
+ * physical space: a drawer on the inline-start edge is swiped `left` away in a
+ * left-to-right document and `right` away in a right-to-left one. The mapping
+ * is resolved here rather than by a caller, and the right-to-left case is
+ * resolved at render time from the document's direction.
+ */
+export type DrawerSwipe = 'up' | 'down' | 'left' | 'right';
+
+const VIEWPORTS = {
+  top: modal.viewportTop,
+  bottom: modal.viewportBottom,
+  start: modal.viewportStart,
+  end: modal.viewportEnd,
+} as const;
+
+const SIZES = {
+  top: modal.drawerTop,
+  bottom: modal.drawerBottom,
+  start: modal.drawerStart,
+  end: modal.drawerEnd,
+} as const;
+
+const FLUSH = {
+  top: modal.flushTop,
+  bottom: modal.flushBottom,
+  start: modal.flushStart,
+  end: modal.flushEnd,
+} as const;
+
+const HIDDEN = {
+  top: modal.drawerHiddenTop,
+  bottom: modal.drawerHiddenBottom,
+  start: modal.drawerHiddenStart,
+  end: modal.drawerHiddenEnd,
+} as const;
+
+const INSET_HIDDEN = {
+  top: modal.drawerInsetHiddenTop,
+  bottom: modal.drawerInsetHiddenBottom,
+  start: modal.drawerInsetHiddenStart,
+  end: modal.drawerInsetHiddenEnd,
+} as const;
+
+/** How the viewport lays the panel out for the edge it belongs to. */
+export function drawerViewportStyle(side: DrawerSide) {
+  return VIEWPORTS[side];
+}
+
+/** How big the panel is on that edge. */
+export function drawerSizeStyle(side: DrawerSide) {
+  return SIZES[side];
+}
+
+/** The two square corners and the safe-area padding a flush drawer takes. */
+export function drawerFlushStyle(side: DrawerSide) {
+  return FLUSH[side];
+}
+
+/** Where the panel starts and ends: off that edge, plus the gap if it is inset. */
+export function drawerHiddenStyle(side: DrawerSide, inset: boolean) {
+  return inset ? INSET_HIDDEN[side] : HIDDEN[side];
+}
+
+/**
+ * The physical swipe that takes a drawer away from its edge.
+ *
+ * `rtl` flips only the inline pair, because the block axis does not reverse
+ * with writing direction in any script this ships to.
+ */
+export function drawerSwipeDirection(side: DrawerSide, rtl: boolean): DrawerSwipe {
+  if (side === 'top') return 'up';
+  if (side === 'bottom') return 'down';
+  if (side === 'start') return rtl ? 'right' : 'left';
+  return rtl ? 'left' : 'right';
+}
diff --git a/packages/ui/src/disclosure/accordion.tsx b/packages/ui/src/disclosure/accordion.tsx
new file mode 100644
index 000000000..2a377c54f
--- /dev/null
+++ b/packages/ui/src/disclosure/accordion.tsx
@@ -0,0 +1,150 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { ChevronDownGlyph } from '../internal/glyphs';
+import { appendClassName } from '../internal/class-name';
+import { disclosureSurface as surface, isCollapsed } from './surface';
+
+type RootBaseProps = ComponentProps<typeof BaseAccordion.Root>;
+type ItemBaseProps = ComponentProps<typeof BaseAccordion.Item>;
+type TriggerBaseProps = ComponentProps<typeof BaseAccordion.Trigger>;
+type PanelBaseProps = ComponentProps<typeof BaseAccordion.Panel>;
+
+export interface AccordionRootProps extends Omit<RootBaseProps, 'className'> {
+  className?: string;
+}
+export interface AccordionItemProps extends Omit<ItemBaseProps, 'className'> {
+  className?: string;
+}
+export interface AccordionTriggerProps extends Omit<TriggerBaseProps, 'className' | 'children'> {
+  children?: ReactNode;
+  className?: string;
+}
+export interface AccordionPanelProps extends Omit<PanelBaseProps, 'className' | 'children'> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export const AccordionRoot = forwardRef<HTMLDivElement, AccordionRootProps>(function AccordionRoot(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.stack);
+  return (
+    <BaseAccordion.Root
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/** One row and the panel it owns, with the line to the row after it. */
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.item);
+  return (
+    <BaseAccordion.Item
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/**
+ * The row that opens the panel, inside the heading that names it.
+ *
+ * The two are one part rather than two: Base UI's `Header` is what puts the row
+ * in the document's outline, and a caller assembling the pair themselves can
+ * leave it out and produce an accordion a screen reader reads as a run of
+ * buttons. The chevron is drawn here for the same reason a submenu's is —
+ * it is how a closed row says there is something under it.
+ */
+export const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
+  function AccordionTrigger({ className, children, ...rest }, ref) {
+    const header = stylex.props(surface.header);
+    const label = stylex.props(surface.rowLabel);
+    return (
+      <BaseAccordion.Header className={header.className} style={header.style}>
+        <BaseAccordion.Trigger
+          ref={ref}
+          {...rest}
+          className={(state) =>
+            appendClassName(
+              stylex.props(surface.ring, surface.row, state.disabled && surface.disabled).className,
+              className
+            )
+          }
+          // The chevron has to know whether the panel is open, and Base UI
+          // reports that as state to `render` and to `className` rather than to
+          // `children`. The row is therefore assembled here, which is also what
+          // keeps the heading around it from being a caller's responsibility.
+          render={(props, state) => (
+            <button type="button" {...props}>
+              <span className={label.className} style={label.style}>
+                {children}
+              </span>
+              <span
+                {...stylex.props(surface.chevron, state.open && surface.chevronOpen)}
+                aria-hidden="true"
+              >
+                <ChevronDownGlyph />
+              </span>
+            </button>
+          )}
+        />
+      </BaseAccordion.Header>
+    );
+  }
+);
+
+/**
+ * What the row opens. The reveal is the Collapsible's, and the prose step and
+ * the room under it are this family's: a panel's own padding cannot ride on the
+ * element whose height is being animated, so it rides on a child of it.
+ */
+export const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(
+  function AccordionPanel({ className, children, ...rest }, ref) {
+    const body = stylex.props(surface.body);
+    return (
+      <BaseAccordion.Panel
+        ref={ref}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            stylex.props(
+              surface.accordionPanel,
+              isCollapsed(state.transitionStatus) && surface.collapsed
+            ).className,
+            className
+          )
+        }
+      >
+        <div className={body.className} style={body.style}>
+          {children}
+        </div>
+      </BaseAccordion.Panel>
+    );
+  }
+);
+
+/**
+ * A stack of disclosures: rows a person walks down, each opening what is under
+ * it in place rather than swapping a panel beside it.
+ *
+ * One row is open at a time unless the root says `multiple`, because an
+ * accordion's point is that a long page stays short. The rows are separated by
+ * the line the rules give a list rather than by a gap or a card each, so the
+ * stack reads as one block of a page and not as a column of panels.
+ */
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Panel: AccordionPanel,
+};
diff --git a/packages/ui/src/disclosure/collapsible.tsx b/packages/ui/src/disclosure/collapsible.tsx
new file mode 100644
index 000000000..772ee4196
--- /dev/null
+++ b/packages/ui/src/disclosure/collapsible.tsx
@@ -0,0 +1,53 @@
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { disclosureSurface as surface, isCollapsed } from './surface';
+
+type PanelBaseProps = ComponentProps<typeof BaseCollapsible.Panel>;
+
+export interface CollapsiblePanelProps extends Omit<PanelBaseProps, 'className'> {
+  className?: string;
+}
+
+/**
+ * The panel, and the reveal it owns. Everything a caller has to get right about
+ * a collapsible is here: the height Base UI measures, the transition between
+ * that height and nothing, and the overflow that hides what is on its way in.
+ */
+export const CollapsiblePanel = forwardRef<HTMLDivElement, CollapsiblePanelProps>(
+  function CollapsiblePanel({ className, ...rest }, ref) {
+    return (
+      <BaseCollapsible.Panel
+        ref={ref}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            stylex.props(
+              surface.collapsiblePanel,
+              isCollapsed(state.transitionStatus) && surface.collapsed
+            ).className,
+            className
+          )
+        }
+      />
+    );
+  }
+);
+
+/**
+ * One thing that can be shown or hidden, with no list around it: an accordion
+ * of one item, and the primitive the Accordion is built out of.
+ *
+ * Its trigger is Base UI's, unstyled, for the reason `Menu.Trigger` is: a lone
+ * collapsible is opened by whatever the surface already had there — a card's
+ * header, a row of a table, a button that also says how many things are under
+ * it — and handing it a second styled control would be a second thing to keep
+ * in step with `Button`. What the primitive owns is the panel; an `Accordion`
+ * is what this becomes when the rows are a list and each needs the same row.
+ */
+export const Collapsible = {
+  Root: BaseCollapsible.Root,
+  Trigger: BaseCollapsible.Trigger,
+  Panel: CollapsiblePanel,
+};
diff --git a/packages/ui/src/disclosure/disclosure.tokens.stylex.ts b/packages/ui/src/disclosure/disclosure.tokens.stylex.ts
new file mode 100644
index 000000000..02807687b
--- /dev/null
+++ b/packages/ui/src/disclosure/disclosure.tokens.stylex.ts
@@ -0,0 +1,87 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * One token group for the three ways a surface shows one thing out of several:
+ * the Tabs strip, the Accordion and the Collapsible.
+ *
+ * They are one family for the reason `dialog` covers three modals: what differs
+ * is how the choices are laid out and how the thing arrives, not what either is
+ * made of. A tab strip lays the choices side by side and swaps the panel under
+ * them; an accordion stacks them and opens one in place; a collapsible is a
+ * single one of those rows with no list around it. All three are a trigger and
+ * the thing it shows, so the colour a closed row's label takes and the colour a
+ * tab you are not on takes cannot drift apart into two decisions.
+ *
+ * It is deliberately not part of `field`: none of these three holds a value.
+ * A Tab picks what is shown, not what is stored, so it takes no name, answers to
+ * no `Field.Root` and has no invalid state — it only borrows the well the field
+ * family also sits in, which is the elevation ladder's doing rather than a
+ * shared component vocabulary.
+ */
+export const disclosure = stylex.defineVars({
+  // A tab strip is a track with one thing raised out of it, which is the ladder
+  // read twice over: the track is the well rung, and the indicator under the
+  // selected tab is the same raised pair a secondary Button takes — because the
+  // selected tab is the one that reads as a thing you can press.
+  trackBackground: colors.wellBackground,
+  trackWell: shadow.inset,
+  // The inset the popup surface also takes, and for the same reason: the row
+  // inside is the track less this on both sides, and its radius is the track's
+  // less this. Nested radius is outer minus inset.
+  trackInset: space[1],
+  trackRadiusSmall: radius.small,
+  trackRadiusMedium: radius.medium,
+  indicator: colors.raisedBackground,
+  indicatorShadow: shadow.raised,
+  tabPaddingX: space[3],
+  // A glyph and its label inside one tab; the gap a Button already uses.
+  tabGap: '6px',
+  tabText: text.subheadlineSize,
+  // A tab you are not on is about the thing; the one you are on is the thing.
+  // Hovering an unselected tab moves it to the second, because the fill in this
+  // strip is the indicator's and nothing else may claim it.
+  tabLabel: colors.secondaryLabel,
+  tabActiveLabel: colors.label,
+  // A disclosure row: the label, the chevron that says there is more under it,
+  // and the line to the next row. A row has no fill of its own — it is a row in
+  // a list, and `separator` is what the rules give one.
+  rowPaddingY: space[3],
+  rowGap: space[3],
+  rowText: text.subheadlineSize,
+  label: colors.label,
+  chevron: colors.tertiaryLabel,
+  chevronSize: '16px',
+  separator: colors.separator,
+  // What an opened panel holds is prose, so it takes the prose step rather than
+  // the control step its own trigger takes, the way a popover's body does.
+  panelText: text.bodySize,
+  panelLeading: text.bodyLeading,
+  panelPaddingBottom: space[3],
+  // Between a tab strip and the panel it swaps: the panel is a second block
+  // rather than part of the strip.
+  panelGap: space[2],
+  ring: colors.accent,
+  ringWidth: '2px',
+  // The family's one disabled value; the rules give the whole control 45%.
+  disabledOpacity: '0.45',
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced palette;
+ * see `button.tokens.stylex.ts` for why a group declared only at the document
+ * root keeps the root palette inside a themed subtree.
+ */
+export const disclosurePaletteTheme = stylex.createTheme(disclosure, {
+  trackBackground: colors.wellBackground,
+  trackWell: shadow.inset,
+  indicator: colors.raisedBackground,
+  indicatorShadow: shadow.raised,
+  tabLabel: colors.secondaryLabel,
+  tabActiveLabel: colors.label,
+  label: colors.label,
+  chevron: colors.tertiaryLabel,
+  separator: colors.separator,
+  ring: colors.accent,
+});
diff --git a/packages/ui/src/disclosure/surface.ts b/packages/ui/src/disclosure/surface.ts
new file mode 100644
index 000000000..4b958cacf
--- /dev/null
+++ b/packages/ui/src/disclosure/surface.ts
@@ -0,0 +1,276 @@
+import * as stylex from '@stylexjs/stylex';
+import { control, corner, duration, ease, radius, text } from '../tokens/scales.stylex';
+import { disclosure } from './disclosure.tokens.stylex';
+
+/**
+ * The ring this family draws, in the shape the field family's takes: 2px, tight
+ * to the control, no offset, no glow, and a `box-shadow` rather than an
+ * `outline` because the product shell resets every outline with `!important`.
+ * Nothing here has an edge of its own to compose it with, so it stands alone.
+ */
+const RING = `0 0 0 ${disclosure.ringWidth} ${disclosure.ring}`;
+
+/**
+ * What the three disclosures are made of: the tab strip, the accordion's rows
+ * and the panel both it and the Collapsible reveal. It lives here rather than
+ * beside each component for the reason `popup/surface.ts` holds the floating
+ * rung's appearance — three parts of one family cannot each grow their own
+ * label colour, their own ring and their own idea of how a panel opens.
+ *
+ * The reveal is the part with a rule behind it. A panel's height is animated
+ * from a variable Base UI measures with `scrollHeight` and publishes on the
+ * panel itself, and a height that is being animated cannot also carry padding:
+ * `scrollHeight` counts the padding, so a padded panel is cropped by exactly
+ * its own padding under `border-box` and overshoots by it under `content-box`.
+ * The padding therefore belongs to a child — `body` below — and the panel keeps
+ * nothing but the motion and the overflow that hides what is on its way in.
+ */
+export const disclosureSurface = stylex.create({
+  /**
+   * A part a person cannot use. It is applied from Base UI's state rather than
+   * through `:disabled`, because neither a tab nor an accordion row carries the
+   * native attribute: both stay focusable so a keyboard reaches them and hears
+   * why, and say so with `aria-disabled`. `:disabled` therefore never matches
+   * here — the control the field family dims is a different kind of control.
+   */
+  disabled: { opacity: disclosure.disabledOpacity, cursor: 'default' },
+  /**
+   * Where the keyboard is, on a part whose edge is otherwise nothing. It is a
+   * style rather than a constant because the StyleX compiler evaluates a
+   * `create` call's arguments at build time and cannot follow a value imported
+   * from a file that is not a `.stylex` one — so the family's one ring is
+   * composed onto a part rather than interpolated into it.
+   */
+  ring: {
+    boxShadow: { default: 'none', ':focus-visible': RING },
+    outlineStyle: 'none',
+  },
+
+  // ── The strip ────────────────────────────────────────────────────────────
+  /** The strip and the panel under it: two blocks, one gap. */
+  tabs: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: disclosure.panelGap,
+    minWidth: 0,
+  },
+  /** The track: the well rung, holding the one thing raised out of it. */
+  track: {
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'stretch',
+    boxSizing: 'border-box',
+    padding: disclosure.trackInset,
+    backgroundColor: disclosure.trackBackground,
+    boxShadow: disclosure.trackWell,
+    cornerShape: corner.shape,
+  },
+  /**
+   * A strip that takes the width it is given, with the choices sharing it
+   * equally. It is a named product choice rather than a caller's `w-full`
+   * because it is two facts that have to agree — the track stretching and the
+   * tabs inside it splitting the room — and a surface that stated only the
+   * first would get a full-width track with three tabs huddled at its start.
+   */
+  trackStretch: { display: 'flex', width: '100%' },
+  trackSmall: { height: control.small, borderRadius: disclosure.trackRadiusSmall },
+  trackMedium: { height: control.medium, borderRadius: disclosure.trackRadiusMedium },
+  trackLarge: { height: control.large, borderRadius: disclosure.trackRadiusMedium },
+  /**
+   * The pill under the selected tab. Base UI measures that tab and publishes
+   * its box on this element as physical pixels from the list's own top-left
+   * corner, so the pill is anchored physically and moved with `translate`:
+   * reading those offsets from the inline edge would put it on the wrong tab in
+   * a right-to-left document. That it moves rather than lighting up is also why
+   * it is one element and not a fill on each tab — the strip is one control,
+   * and the pill sliding across it says so.
+   */
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: 'var(--active-tab-width)',
+    height: 'var(--active-tab-height)',
+    translate: 'var(--active-tab-left) var(--active-tab-top)',
+    backgroundColor: disclosure.indicator,
+    boxShadow: disclosure.indicatorShadow,
+    cornerShape: corner.shape,
+    transitionProperty: 'translate, width',
+    transitionDuration: duration.regular,
+    transitionTimingFunction: ease.standard,
+  },
+  // Nested radius is outer minus inset, so a 28px track at 8 holds a 4 and a 32
+  // or 36px one at 10 holds a 6. Neither is a token of its own.
+  indicatorSmall: {
+    borderRadius: `calc(${disclosure.trackRadiusSmall} - ${disclosure.trackInset})`,
+  },
+  indicatorMedium: {
+    borderRadius: `calc(${disclosure.trackRadiusMedium} - ${disclosure.trackInset})`,
+  },
+  /** One choice on the strip. The fill is the indicator's; this takes none. */
+  tab: {
+    // A tab is in flow and the indicator is not, so this is what keeps the
+    // label over the pill rather than under it.
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: disclosure.tabGap,
+    boxSizing: 'border-box',
+    margin: 0,
+    paddingBlock: 0,
+    paddingInline: disclosure.tabPaddingX,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    cornerShape: corner.shape,
+    color: {
+      default: disclosure.tabLabel,
+      ':hover': disclosure.tabActiveLabel,
+      ':disabled': disclosure.tabLabel,
+    },
+    fontFamily: 'inherit',
+    fontSize: disclosure.tabText,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    whiteSpace: 'nowrap',
+    cursor: 'pointer',
+    transitionProperty: 'color, box-shadow, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  tabStretch: { flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0 },
+  tabSmall: { borderRadius: `calc(${disclosure.trackRadiusSmall} - ${disclosure.trackInset})` },
+  tabMedium: { borderRadius: `calc(${disclosure.trackRadiusMedium} - ${disclosure.trackInset})` },
+  /**
+   * The tab you are on. It replaces the resting colour and nothing else: the
+   * pill under it is what says "here", so a second mark on the label would be
+   * the same fact stated twice.
+   */
+  tabActive: { color: disclosure.tabActiveLabel },
+  /** A tab that cannot be taken does not light up under the pointer either. */
+  tabDisabled: { color: { default: disclosure.tabLabel, ':hover': disclosure.tabLabel } },
+  /** What the strip swaps. Base UI makes it focusable, so it takes the ring. */
+  tabPanel: {
+    minWidth: 0,
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+  },
+
+  // ── The stack ────────────────────────────────────────────────────────────
+  /** The accordion: rows, and nothing around them. */
+  stack: { display: 'flex', flexDirection: 'column', minWidth: 0 },
+  /**
+   * One item in that stack. The line is the row divider the rules give a list,
+   * drawn as an inset shadow rather than as an element between rows: an
+   * accordion's rows are its own children, so there is nowhere for a caller to
+   * put a separator part and nothing to stop them forgetting it. The last row
+   * has no next row, so it draws no line.
+   */
+  item: {
+    boxShadow: {
+      default: `inset 0 -1px 0 ${disclosure.separator}`,
+      ':last-child': 'none',
+    },
+  },
+  /** The heading Base UI wraps the trigger in; it carries no appearance. */
+  header: { display: 'flex', margin: 0 },
+  /**
+   * The row itself: the label takes the width and the chevron trails it, the
+   * way a menu row's shortcut does. It has no fill in any state — a row here is
+   * a line of a list rather than a control on a surface — so what moves when it
+   * opens is the chevron.
+   */
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: disclosure.rowGap,
+    boxSizing: 'border-box',
+    width: '100%',
+    margin: 0,
+    paddingInline: 0,
+    paddingBlock: disclosure.rowPaddingY,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    borderRadius: radius.small,
+    cornerShape: corner.shape,
+    color: disclosure.label,
+    fontFamily: 'inherit',
+    fontSize: disclosure.rowText,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    textAlign: 'start',
+    cursor: 'pointer',
+    transitionProperty: 'box-shadow, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  /** The row's text, which takes the width so a long label truncates. */
+  rowLabel: {
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  /**
+   * The chevron the part draws rather than the caller: it is how a closed row
+   * says there is something under it, so a caller cannot forget it. It points
+   * down while closed and has turned over once the panel is open.
+   */
+  chevron: {
+    display: 'block',
+    flexShrink: 0,
+    width: disclosure.chevronSize,
+    height: disclosure.chevronSize,
+    color: disclosure.chevron,
+    transform: 'rotate(0deg)',
+    transitionProperty: 'transform',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  chevronOpen: { transform: 'rotate(180deg)' },
+
+  // ── The reveal ───────────────────────────────────────────────────────────
+  /**
+   * The panel, mid-reveal. Base UI names the height it measured per component,
+   * so the two read different variables: one style shared between them would
+   * leave whichever it was not written for with nothing to move between.
+   * Which end of the transition a panel is at is read off Base UI's transition
+   * status in JS, because StyleX cannot express `[data-starting-style]`.
+   */
+  collapsiblePanel: {
+    overflow: 'hidden',
+    height: 'var(--collapsible-panel-height)',
+    transitionProperty: 'height',
+    transitionDuration: duration.regular,
+    transitionTimingFunction: ease.standard,
+  },
+  accordionPanel: {
+    overflow: 'hidden',
+    height: 'var(--accordion-panel-height)',
+    transitionProperty: 'height',
+    transitionDuration: duration.regular,
+    transitionTimingFunction: ease.standard,
+  },
+  collapsed: { height: 0 },
+  /** What the panel holds: prose, and the room a row's padding does not give. */
+  body: {
+    paddingBlockEnd: disclosure.panelPaddingBottom,
+    fontSize: disclosure.panelText,
+    lineHeight: disclosure.panelLeading,
+    fontWeight: 400,
+    letterSpacing: 'normal',
+  },
+});
+
+/**
+ * Whether a panel is at one of the two ends of its reveal. Base UI reports the
+ * ends as `data-starting-style` and `data-ending-style`, which StyleX has no way
+ * to select, so both the Accordion's panel and the Collapsible's read the same
+ * status here rather than each deciding what "closed" means.
+ */
+export function isCollapsed(transitionStatus: string | undefined): boolean {
+  return transitionStatus === 'starting' || transitionStatus === 'ending';
+}
diff --git a/packages/ui/src/disclosure/tabs.tsx b/packages/ui/src/disclosure/tabs.tsx
new file mode 100644
index 000000000..4e2120f9d
--- /dev/null
+++ b/packages/ui/src/disclosure/tabs.tsx
@@ -0,0 +1,181 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import * as stylex from '@stylexjs/stylex';
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { appendClassName } from '../internal/class-name';
+import { disclosureSurface as surface } from './surface';
+
+type RootBaseProps = ComponentProps<typeof BaseTabs.Root>;
+type ListBaseProps = ComponentProps<typeof BaseTabs.List>;
+type TabBaseProps = ComponentProps<typeof BaseTabs.Tab>;
+type PanelBaseProps = ComponentProps<typeof BaseTabs.Panel>;
+
+/** The control ladder, which a tab strip is on: 28, 32 and 36. */
+export type TabsSize = 'small' | 'medium' | 'large';
+
+export interface TabsRootProps extends Omit<RootBaseProps, 'className'> {
+  className?: string;
+}
+export interface TabsListProps extends Omit<ListBaseProps, 'className' | 'children'> {
+  children?: ReactNode;
+  /** The height of the track, and of every tab in it. Defaults to medium. */
+  size?: TabsSize;
+  /** Take the width on offer and split it between the tabs equally. */
+  stretch?: boolean;
+  className?: string;
+}
+export interface TabsTabProps extends Omit<TabBaseProps, 'className'> {
+  className?: string;
+}
+export interface TabsPanelProps extends Omit<PanelBaseProps, 'className'> {
+  className?: string;
+}
+
+/**
+ * What the strip was told, for the parts inside it. A tab's height, corner and
+ * share of the width all follow from the track's, so both are stated once on
+ * the list rather than repeated on every tab, where two of them could disagree.
+ */
+const TabsStripContext = createContext<{ size: TabsSize; stretch: boolean }>({
+  size: 'medium',
+  stretch: false,
+});
+
+const LIST_SIZES = {
+  small: surface.trackSmall,
+  medium: surface.trackMedium,
+  large: surface.trackLarge,
+} as const;
+
+const INDICATOR_SIZES = {
+  small: surface.indicatorSmall,
+  medium: surface.indicatorMedium,
+  large: surface.indicatorMedium,
+} as const;
+
+const TAB_SIZES = {
+  small: surface.tabSmall,
+  medium: surface.tabMedium,
+  large: surface.tabMedium,
+} as const;
+
+/** The strip and the panels it swaps, stacked with the gap between them. */
+export const TabsRoot = forwardRef<HTMLDivElement, TabsRootProps>(function TabsRoot(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.tabs);
+  return (
+    <BaseTabs.Root
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/**
+ * The track, with the indicator already in it.
+ *
+ * The indicator is rendered here rather than by the caller for the reason a
+ * submenu's chevron is drawn by its row: it is not decoration a surface may
+ * choose, it is how the strip says which tab you are on, and a list assembled
+ * without one is a segmented control with nothing segmented. It is also the
+ * part that has to come first in the DOM, which is a fact about painting order
+ * rather than about the design.
+ */
+export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(function TabsList(
+  { className, children, size = 'medium', stretch = false, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.track, LIST_SIZES[size], stretch && surface.trackStretch);
+  const strip = useMemo(() => ({ size, stretch }), [size, stretch]);
+  return (
+    <TabsStripContext.Provider value={strip}>
+      <BaseTabs.List
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      >
+        <BaseTabs.Indicator
+          className={stylex.props(surface.indicator, INDICATOR_SIZES[size]).className}
+        />
+        {children}
+      </BaseTabs.List>
+    </TabsStripContext.Provider>
+  );
+});
+
+/** One choice on the strip. It takes no fill of its own; the indicator has it. */
+export const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(function TabsTab(
+  { className, ...rest },
+  ref
+) {
+  const { size, stretch } = useContext(TabsStripContext);
+  return (
+    <BaseTabs.Tab
+      ref={ref}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            surface.ring,
+            surface.tab,
+            TAB_SIZES[size],
+            stretch && surface.tabStretch,
+            state.active && surface.tabActive,
+            state.disabled && surface.disabled,
+            state.disabled && surface.tabDisabled
+          ).className,
+          className
+        )
+      }
+    />
+  );
+});
+
+/**
+ * What the strip swaps. It holds a surface's own content rather than prose, so
+ * it states no type of its own — only that it has no edge until the keyboard
+ * reaches it, which it can: Base UI makes an active panel focusable so a person
+ * arriving from the strip lands in what they just chose.
+ */
+export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(function TabsPanel(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.ring, surface.tabPanel);
+  return (
+    <BaseTabs.Panel
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/**
+ * Tabs: the choices laid side by side, and the one panel under them that
+ * changes.
+ *
+ * The strip is the elevation ladder read twice over — a well-rung track with
+ * one thing raised out of it — which is the same pair a Switch takes, and says
+ * the same thing: the track is where something sits, and the thing sitting in
+ * it is the one you can press. The strip is horizontal; a vertical arrangement
+ * is a different layout question and this package has not answered it yet.
+ */
+export const Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Tab: TabsTab,
+  Panel: TabsPanel,
+};
diff --git a/packages/ui/src/drawer/drawer.tsx b/packages/ui/src/drawer/drawer.tsx
new file mode 100644
index 000000000..53e306e49
--- /dev/null
+++ b/packages/ui/src/drawer/drawer.tsx
@@ -0,0 +1,292 @@
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, useSyncExternalStore, type ComponentProps, type ReactNode } from 'react';
+import { Button } from '../button/button';
+import { DialogFooter, DialogHeader, usePanelContainer } from '../dialog/parts';
+import {
+  drawerFlushStyle,
+  drawerHiddenStyle,
+  drawerSizeStyle,
+  drawerSwipeDirection,
+  drawerViewportStyle,
+  isHidden,
+  modal,
+  type DrawerSide,
+} from '../dialog/surface';
+import { appendClassName } from '../internal/class-name';
+import { CrossGlyph } from '../internal/glyphs';
+import { PopupContainerProvider, type PopupContainer } from '../popup/portal-container';
+import { useForcedThemeClassNames } from '../theme/theme';
+
+export type { DrawerSide };
+
+type PopupBaseProps = ComponentProps<typeof BaseDrawer.Popup>;
+
+/**
+ * Everything Base UI's drawer popup takes comes through, the way it does on the
+ * dialog's `Content`. It is stated against the drawer's own popup rather than
+ * reusing `ModalContentProps`: the two popups report different state — a dialog
+ * knows about nested dialogs, a drawer about snap points and swipes — so a
+ * `style` or `className` callback typed for one cannot be handed to the other.
+ */
+export interface DrawerContentProps extends Omit<PopupBaseProps, 'className' | 'render'> {
+  /** Where the drawer mounts. Defaults to the document body. */
+  container?: PopupContainer;
+  /**
+   * Content laid over the backdrop rather than in the panel — a desktop shell's
+   * window drag strip, for instance.
+   */
+  backdropContent?: ReactNode;
+  /** Classes for the backdrop, for a host that has to restack it. */
+  backdropClassName?: string;
+  className?: string;
+  /**
+   * Which edge the drawer comes in on. `start` and `end` are the writing
+   * direction's edges rather than left and right, so a drawer that opens from
+   * the trailing side of the window does so in every locale — and is swiped
+   * away in the direction that actually means "away" there.
+   */
+  side?: DrawerSide;
+  /**
+   * Hold the panel off every edge instead of meeting one.
+   *
+   * A flush drawer is part of the window: it reaches the physical edge and
+   * squares the two corners that touch it. An inset drawer is an object resting
+   * over the page: it floats at `dialog.drawerInset`, keeps all four corners,
+   * and travels that extra distance on its way out.
+   */
+  inset?: boolean;
+  /** The cross in the panel's corner. */
+  closeButton?: boolean;
+  /** What a screen reader calls that cross. */
+  closeLabel?: string;
+}
+
+const styles = stylex.create({
+  portal: { display: 'contents' },
+});
+
+/**
+ * Whether the document reads right to left.
+ *
+ * Base UI names a swipe in physical directions because a finger moves in
+ * physical space, while this package names an edge in writing-direction terms.
+ * Resolving between them needs the direction actually in force, which is a
+ * property of the document rather than of a prop, so it is subscribed to rather
+ * than passed in. It is read through `useSyncExternalStore` with a server
+ * snapshot of `false`, so a server render and the first client render agree.
+ */
+function useRtl(): boolean {
+  return useSyncExternalStore(
+    subscribeToDirection,
+    () => document.documentElement.dir === 'rtl',
+    () => false
+  );
+}
+
+function subscribeToDirection(onChange: () => void): () => void {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+  return () => observer.disconnect();
+}
+
+/**
+ * The drawer, assembled: the portal, the backdrop, the viewport that decides
+ * which edge the panel is on, and the panel itself.
+ *
+ * The viewport is the part a dialog does not have, and it is what makes this a
+ * drawer rather than a dialog pinned to an edge: Base UI lays the panel out
+ * inside it instead of positioning the panel, which leaves the panel's own
+ * `transform` free to carry the drag. A `Dialog` centred with
+ * `translate(-50%, -50%)` has no room for a gesture in that property.
+ *
+ * `Drawer.Content` — Base UI's, not this package's `Content` — wraps the
+ * children so a mouse can select text inside the panel without the selection
+ * being read as a swipe.
+ */
+export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(function DrawerContent(
+  {
+    className,
+    children,
+    container,
+    backdropContent,
+    backdropClassName,
+    closeButton = true,
+    closeLabel = 'Close',
+    side = 'end',
+    inset = false,
+    ...rest
+  },
+  ref
+) {
+  const { ref: panelRef, container: panel } = usePanelContainer<HTMLDivElement>(ref);
+  const palette = useForcedThemeClassNames();
+  return (
+    <BaseDrawer.Portal
+      container={container}
+      className={[stylex.props(styles.portal).className, ...palette].filter(Boolean).join(' ')}
+    >
+      <BaseDrawer.Backdrop
+        className={(state) =>
+          appendClassName(
+            stylex.props(
+              modal.backdrop,
+              modal.backdropSwipe,
+              isHidden(state.transitionStatus) && modal.backdropHidden
+            ).className,
+            backdropClassName
+          )
+        }
+      >
+        {backdropContent}
+      </BaseDrawer.Backdrop>
+      <BaseDrawer.Viewport
+        className={
+          stylex.props(
+            modal.drawerViewport,
+            drawerViewportStyle(side),
+            inset && modal.drawerViewportInset
+          ).className
+        }
+      >
+        <BaseDrawer.Popup
+          ref={panelRef}
+          data-side={side}
+          {...rest}
+          className={(state) =>
+            appendClassName(
+              stylex.props(
+                modal.drawerPopup,
+                drawerSizeStyle(side),
+                !inset && drawerFlushStyle(side),
+                isHidden(state.transitionStatus) && drawerHiddenStyle(side, inset)
+              ).className,
+              className
+            )
+          }
+        >
+          <BaseDrawer.Content>
+            <PopupContainerProvider container={panel}>{children}</PopupContainerProvider>
+          </BaseDrawer.Content>
+          {closeButton ? (
+            <BaseDrawer.Close
+              render={
+                <Button
+                  variant="ghost"
+                  size="small"
+                  icon
+                  aria-label={closeLabel}
+                  {...stylex.props(modal.close)}
+                />
+              }
+            >
+              <CrossGlyph />
+            </BaseDrawer.Close>
+          ) : null}
+        </BaseDrawer.Popup>
+      </BaseDrawer.Viewport>
+    </BaseDrawer.Portal>
+  );
+});
+
+type TitleBaseProps = ComponentProps<typeof BaseDrawer.Title>;
+type DescriptionBaseProps = ComponentProps<typeof BaseDrawer.Description>;
+
+export interface DrawerTitleProps extends Omit<TitleBaseProps, 'className'> {
+  className?: string;
+}
+export interface DrawerDescriptionProps extends Omit<DescriptionBaseProps, 'className'> {
+  className?: string;
+}
+
+/**
+ * The heading. It is Base UI's drawer title rather than the dialog's: the two
+ * look identical and read different contexts, and a dialog's inside a drawer
+ * would label nothing.
+ */
+export const DrawerTitle = forwardRef<HTMLHeadingElement, DrawerTitleProps>(function DrawerTitle(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(modal.title);
+  return (
+    <BaseDrawer.Title
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/** What the heading is about; Base UI wires it to the accessible description. */
+export const DrawerDescription = forwardRef<HTMLParagraphElement, DrawerDescriptionProps>(
+  function DrawerDescription({ className, ...rest }, ref) {
+    const sx = stylex.props(modal.description);
+    return (
+      <BaseDrawer.Description
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+export interface DrawerRootProps extends Omit<
+  ComponentProps<typeof BaseDrawer.Root>,
+  'swipeDirection'
+> {
+  /**
+   * Which edge the drawer belongs to. The swipe that dismisses it is derived
+   * from this, so a caller states the edge once rather than keeping an edge and
+   * a gesture in step — and the derivation flips the inline pair in a
+   * right-to-left document, because "away" is the other way there.
+   */
+  side?: DrawerSide;
+}
+
+/**
+ * The root. It owns the open state and, through `side`, the gesture.
+ *
+ * A caller states the edge on both the root and the content, because the root
+ * needs it for the swipe and the content needs it for the layout, and Base UI
+ * keeps the two parts apart. That is one repeated prop rather than a context
+ * this package would have to invent and keep in step with Base UI's own.
+ */
+export function DrawerRoot({ side = 'end', ...rest }: DrawerRootProps) {
+  const rtl = useRtl();
+  return <BaseDrawer.Root swipeDirection={drawerSwipeDirection(side, rtl)} {...rest} />;
+}
+
+/**
+ * A drawer: a panel that slides in from an edge of the window, and that a
+ * person can drag back out of it.
+ *
+ * It is the modal rung — the same `dialog` token group and the same
+ * `dialog/surface.ts` as `Dialog` and `AlertDialog` — so a padding or a title
+ * step has one place to change. What makes it a drawer rather than a dialog
+ * pinned to an edge is the gesture: a panel that arrives from an edge promises
+ * that it can be sent back, and on touch a person will try. Building one on
+ * `Dialog` cannot answer that, which is why this package has no `Sheet`.
+ *
+ * `Drawer.Indent` is Base UI's, unstyled: a surface that wants the page behind
+ * the drawer to recede wraps its own UI in it and styles `data-active` itself.
+ * That is a decision about a product's shell rather than about a drawer, so the
+ * primitive exposes it and does not choose.
+ */
+export const Drawer = {
+  Root: DrawerRoot,
+  /** Unstyled, like `Menu.Trigger`: whatever the surface already had there. */
+  Trigger: BaseDrawer.Trigger,
+  Content: DrawerContent,
+  Header: DialogHeader,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Footer: DialogFooter,
+  Close: BaseDrawer.Close,
+  /** The app's own UI, for a shell that wants it to recede behind the drawer. */
+  Provider: BaseDrawer.Provider,
+  Indent: BaseDrawer.Indent,
+};
diff --git a/packages/ui/src/feedback/alert.tsx b/packages/ui/src/feedback/alert.tsx
new file mode 100644
index 000000000..9bfbc2542
--- /dev/null
+++ b/packages/ui/src/feedback/alert.tsx
@@ -0,0 +1,107 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { feedbackSurface as surface } from './surface';
+import { NOTICE_TONES, TONE_GLYPHS, TONE_MARKS, roleForTone, type FeedbackTone } from './tone';
+
+export interface AlertProps extends Omit<ComponentProps<'div'>, 'className' | 'title'> {
+  /** What the message reports. Defaults to neutral. */
+  tone?: FeedbackTone;
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface AlertTitleProps extends Omit<ComponentProps<'p'>, 'className'> {
+  className?: string;
+}
+export interface AlertDescriptionProps extends Omit<ComponentProps<'p'>, 'className'> {
+  className?: string;
+}
+export interface AlertActionsProps extends Omit<ComponentProps<'div'>, 'className'> {
+  className?: string;
+}
+
+/**
+ * A message kept on the page it is about: the card rung, tinted by its tone,
+ * with the tone's mark beside it.
+ *
+ * The mark is drawn here rather than taken from the caller, the way an
+ * accordion's chevron is: the point of a tone is that a person knows what kind
+ * of message this is before reading it, and a glyph a caller chose can put a
+ * tick on a failure. How urgently it is announced follows from the tone as
+ * well — a failure interrupts, a confirmation waits.
+ */
+export const AlertRoot = forwardRef<HTMLDivElement, AlertProps>(function AlertRoot(
+  { tone = 'neutral', className, children, ...rest },
+  ref
+) {
+  const Mark = TONE_GLYPHS[tone];
+  const sx = stylex.props(surface.message, surface.notice, NOTICE_TONES[tone]);
+  const body = stylex.props(surface.body);
+  const mark = stylex.props(surface.mark, TONE_MARKS[tone]);
+  return (
+    <div
+      ref={ref}
+      role={roleForTone(tone)}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    >
+      <span className={mark.className} style={mark.style}>
+        <Mark />
+      </span>
+      <div className={body.className} style={body.style}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+/** What the message is. It is a line, not a heading: an alert owns no section. */
+export const AlertTitle = forwardRef<HTMLParagraphElement, AlertTitleProps>(function AlertTitle(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.title);
+  return (
+    <p ref={ref} {...rest} className={appendClassName(sx.className, className)} style={sx.style} />
+  );
+});
+
+/** The sentence under it. */
+export const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptionProps>(
+  function AlertDescription({ className, ...rest }, ref) {
+    const sx = stylex.props(surface.description);
+    return (
+      <p
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+/** What answers it. The buttons are the surface's choice, as everywhere else. */
+export const AlertActions = forwardRef<HTMLDivElement, AlertActionsProps>(function AlertActions(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.actions);
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+export const Alert = {
+  Root: AlertRoot,
+  Title: AlertTitle,
+  Description: AlertDescription,
+  Actions: AlertActions,
+};
diff --git a/packages/ui/src/feedback/feedback.tokens.stylex.ts b/packages/ui/src/feedback/feedback.tokens.stylex.ts
new file mode 100644
index 000000000..1fdf3c03f
--- /dev/null
+++ b/packages/ui/src/feedback/feedback.tokens.stylex.ts
@@ -0,0 +1,100 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * One token group for everything the system says back to a person: what
+ * happened, and that it is still working.
+ *
+ * An Alert and a Toast are the same message on two rungs — one kept on the page
+ * it is about, one arriving over it — so the tone that marks a message, the
+ * title and the sentence under it are stated once here rather than twice. The
+ * Progress, the Skeleton and the Spinner are the other half of the same
+ * sentence: not "here is what happened" but "this is not finished". They share
+ * the group for the reason `field` covers a checkbox and a select trigger —
+ * what changes between them is what they are made of, not what they are for.
+ *
+ * A tone here is a tint and a mark, never a fill. The elevation ladder gives a
+ * message its background, and a coloured panel would both leave the ladder and
+ * claim the attention a modal is for; `popup.destructiveHighlight` already
+ * settles how this system says "this one is dangerous" on a surface, and this
+ * is that derivation applied to four outcomes.
+ */
+export const feedback = stylex.defineVars({
+  // A message kept on the page it is about: the card rung.
+  noticeBackground: colors.elevatedBackground,
+  noticeShadow: shadow.card,
+  noticeRadius: radius.large,
+  // A message arriving over the page: the floating rung, the same pair a menu
+  // and a popover take. It is not the modal rung — a toast does not have to be
+  // answered, and nothing behind it recedes.
+  toastBackground: colors.raisedBackground,
+  toastShadow: shadow.popover,
+  // Wide enough for two lines of a sentence, narrow enough to stay a message
+  // rather than becoming a panel.
+  toastWidth: '360px',
+  toastGap: space[2],
+  viewportInset: space[4],
+  padding: space[3],
+  // The mark, the text beside it, and the room between them.
+  gap: space[3],
+  markSize: '16px',
+  title: colors.label,
+  titleSize: text.subheadlineSize,
+  titleLeading: text.subheadlineLeading,
+  description: colors.secondaryLabel,
+  descriptionSize: text.footnoteSize,
+  descriptionLeading: text.footnoteLeading,
+  // The four outcomes a message can report. Each is the colour of its mark, and
+  // the surface under the message takes 8% of that colour — the mix
+  // `popup.destructiveHighlight` already uses to say "this one is dangerous"
+  // about a row, at the strength that survives both palettes. The tint is not a
+  // token of its own because it is a mix *of a surface*, and the two surfaces
+  // here are on different rungs: `feedback/surface.ts` states it once per rung
+  // from the rung's own background, rather than freezing one base into six
+  // tokens that could then disagree with the ladder.
+  mark: colors.secondaryLabel,
+  success: colors.success,
+  warning: colors.warning,
+  danger: colors.destructive,
+  // Still working. A bar is a track on the well rung with the accent running in
+  // it: the rules give `accent` to live state and name the running indicator by
+  // name, which is the one thing a progress bar is.
+  trackBackground: colors.wellBackground,
+  trackWell: shadow.inset,
+  trackHeight: '6px',
+  indicator: colors.accent,
+  // Content that has not arrived has no role, which is what the rules reserve
+  // the grays for: a scrollbar, a track, a kbd, a skeleton.
+  skeleton: colors.gray5,
+  // The spinner is drawn in `currentColor` so it takes the ink of whatever
+  // holds it — a ghost button's label, a page's secondary text — and only its
+  // measurements are tokens. The ring behind the arc is that same colour at a
+  // fraction, so one declaration serves every context.
+  spinnerSmall: '16px',
+  spinnerMedium: '20px',
+  spinnerLarge: '24px',
+  spinnerWidth: '2px',
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced palette;
+ * see `button.tokens.stylex.ts` for why a group declared only at the document
+ * root keeps the root palette inside a themed subtree.
+ */
+export const feedbackPaletteTheme = stylex.createTheme(feedback, {
+  noticeBackground: colors.elevatedBackground,
+  noticeShadow: shadow.card,
+  toastBackground: colors.raisedBackground,
+  toastShadow: shadow.popover,
+  title: colors.label,
+  description: colors.secondaryLabel,
+  mark: colors.secondaryLabel,
+  success: colors.success,
+  warning: colors.warning,
+  danger: colors.destructive,
+  trackBackground: colors.wellBackground,
+  trackWell: shadow.inset,
+  indicator: colors.accent,
+  skeleton: colors.gray5,
+});
diff --git a/packages/ui/src/feedback/progress.tsx b/packages/ui/src/feedback/progress.tsx
new file mode 100644
index 000000000..b60d8ded8
--- /dev/null
+++ b/packages/ui/src/feedback/progress.tsx
@@ -0,0 +1,91 @@
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { feedbackSurface as surface } from './surface';
+import type { FeedbackTone } from './tone';
+
+type RootBaseProps = ComponentProps<typeof BaseProgress.Root>;
+
+/**
+ * What the bar is about. `running` is the default and the only live one; the
+ * four others are the family's tones, for a bar that reports an outcome — a
+ * quota nearly spent — or that measures something rather than progressing
+ * through it, which is not live state and gives the accent back.
+ */
+export type ProgressTone = 'running' | FeedbackTone;
+
+const TONES = {
+  running: undefined,
+  neutral: surface.indicatorNeutral,
+  success: surface.indicatorSuccess,
+  warning: surface.indicatorWarning,
+  danger: surface.indicatorDanger,
+} as const;
+
+export interface ProgressProps extends Omit<RootBaseProps, 'className' | 'children'> {
+  /** The name of what is happening, shown over the bar. */
+  label?: ReactNode;
+  /** Whether the share done is shown beside the label. Defaults to false. */
+  showValue?: boolean;
+  /** What the bar is about. Defaults to `running`, the one live state. */
+  tone?: ProgressTone;
+  className?: string;
+}
+
+/**
+ * How far something has got: a well-rung track with the one live thing in this
+ * system running in it.
+ *
+ * The bar is `accent` because the rules give that colour to live state and name
+ * the running indicator by name; ink would say "this value is stored", which is
+ * the opposite of what a bar in motion means. A progress with no value is not a
+ * bar at zero — it is the same track with a band crossing it, because "I do not
+ * know how far" and "nothing has happened" are different things to report.
+ *
+ * Base UI owns the accessible half: the root carries the role and the value,
+ * and the label and the value text are wired to it, so a caller writes what the
+ * task is called rather than a set of ARIA attributes.
+ */
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(
+  { className, label, showValue = false, tone = 'running', ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.progress);
+  const header = stylex.props(surface.progressHeader);
+  const labelSx = stylex.props(surface.progressLabel);
+  const valueSx = stylex.props(surface.progressValue);
+  const track = stylex.props(surface.track);
+  return (
+    <BaseProgress.Root
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    >
+      {label != null || showValue ? (
+        <div className={header.className} style={header.style}>
+          {label != null ? (
+            <BaseProgress.Label className={labelSx.className} style={labelSx.style}>
+              {label}
+            </BaseProgress.Label>
+          ) : null}
+          {showValue ? (
+            <BaseProgress.Value className={valueSx.className} style={valueSx.style} />
+          ) : null}
+        </div>
+      ) : null}
+      <BaseProgress.Track className={track.className} style={track.style}>
+        <BaseProgress.Indicator
+          className={(state) =>
+            stylex.props(
+              surface.indicator,
+              TONES[tone],
+              state.status === 'indeterminate' && surface.indicatorIndeterminate
+            ).className
+          }
+        />
+      </BaseProgress.Track>
+    </BaseProgress.Root>
+  );
+});
diff --git a/packages/ui/src/feedback/skeleton.tsx b/packages/ui/src/feedback/skeleton.tsx
new file mode 100644
index 000000000..b8e362f1b
--- /dev/null
+++ b/packages/ui/src/feedback/skeleton.tsx
@@ -0,0 +1,71 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { feedbackSurface as surface } from './surface';
+
+/** What has not arrived: a line of text, a block of something, or a face. */
+export type SkeletonShape = 'line' | 'block' | 'circle';
+
+export interface SkeletonProps extends Omit<
+  ComponentProps<'div'>,
+  'className' | 'width' | 'height'
+> {
+  shape?: SkeletonShape;
+  /** How much room it holds. A number is pixels; a string is a CSS length. */
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+}
+
+const SHAPES = {
+  line: surface.skeletonLine,
+  block: surface.skeletonBlock,
+  circle: surface.skeletonCircle,
+} as const;
+
+/**
+ * The room it holds. It is a prop rather than a class because that is the whole
+ * of what a caller has to say about a skeleton, and a size passed as a class
+ * would land in the same specificity fight as the shape's own height — a
+ * dynamic style resolves to an inline value, which nothing has to win against.
+ */
+const dyn = stylex.create({
+  size: (width: string | number | undefined, height: string | number | undefined) => ({
+    width,
+    height,
+  }),
+});
+
+/**
+ * A stand-in for content that is on its way.
+ *
+ * It takes a gray rather than a semantic colour, which is what the rules
+ * reserve the grays for: a thing with no role. How much room it holds is the
+ * caller's, because the shape of what is coming is a fact about that surface
+ * and not about this package — what the primitive owns is the fill, the corner
+ * of each shape, and the breathing.
+ *
+ * It breathes rather than sweeping, because a page of sweeping blocks is a page
+ * of movement; and it stops where a person has asked for less of it, since a
+ * skeleton reports nothing that its own shape does not already say. It is
+ * hidden from a screen reader for the same reason.
+ */
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
+  { shape = 'line', width, height, className, ...rest },
+  ref
+) {
+  const sx = stylex.props(
+    surface.skeleton,
+    SHAPES[shape],
+    (width != null || height != null) && dyn.size(width, height)
+  );
+  return (
+    <div
+      ref={ref}
+      aria-hidden="true"
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
diff --git a/packages/ui/src/feedback/spinner.tsx b/packages/ui/src/feedback/spinner.tsx
new file mode 100644
index 000000000..e710c818d
--- /dev/null
+++ b/packages/ui/src/feedback/spinner.tsx
@@ -0,0 +1,59 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { feedbackSurface as surface } from './surface';
+
+export type SpinnerSize = 'small' | 'medium' | 'large';
+
+export interface SpinnerProps extends Omit<ComponentProps<'svg'>, 'className'> {
+  size?: SpinnerSize;
+  /**
+   * What a screen reader is told while it turns. A spinner beside a label that
+   * already says "Saving…" states nothing, and passing `null` says so.
+   */
+  label?: string | null;
+  className?: string;
+}
+
+const SIZES = {
+  small: surface.spinnerSmall,
+  medium: surface.spinnerMedium,
+  large: surface.spinnerLarge,
+} as const;
+
+/**
+ * The mark that says work is under way with no idea how long it will take.
+ *
+ * It is called a Spinner rather than a Loading, because it is the mark and not
+ * the state: where it goes, whether the surface around it is dimmed and what it
+ * is waiting for are the surface's decisions, and a component called `Loading`
+ * that centres itself in a box has already made two of them.
+ *
+ * It is drawn in `currentColor`, so a ghost button's label and a page's
+ * secondary text each get a mark that belongs to them, and the ring behind the
+ * arc is that same ink kept back — one declaration rather than a token per
+ * context. It keeps turning under reduced motion: it is the only thing saying
+ * the work has not stopped, and a still spinner says it has.
+ */
+export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(function Spinner(
+  { size = 'medium', label = 'Loading', className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.spinner, SIZES[size]);
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 16 16"
+      fill="none"
+      role={label == null ? 'presentation' : 'status'}
+      aria-label={label ?? undefined}
+      aria-hidden={label == null ? 'true' : undefined}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    >
+      <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeOpacity="0.25" />
+      <path d="M14.5 8A6.5 6.5 0 0 0 8 1.5" stroke="currentColor" strokeLinecap="round" />
+    </svg>
+  );
+});
diff --git a/packages/ui/src/feedback/surface.ts b/packages/ui/src/feedback/surface.ts
new file mode 100644
index 000000000..b7c553114
--- /dev/null
+++ b/packages/ui/src/feedback/surface.ts
@@ -0,0 +1,316 @@
+import * as stylex from '@stylexjs/stylex';
+import { corner, duration, ease, radius, space, text, z } from '../tokens/scales.stylex';
+import { feedback } from './feedback.tokens.stylex';
+
+/**
+ * What a message is made of, and what a wait looks like.
+ *
+ * An Alert and a Toast are the same block — a mark, a title, a sentence under
+ * it, and whatever answers it — on two rungs of the ladder. The block lives
+ * here so the two cannot drift into two messages, the way `popup/surface.ts`
+ * keeps every floating surface one surface.
+ *
+ * A tone is a tint and a mark, never a fill. The tint is mixed here rather than
+ * frozen into a token, because it is a mix *of a surface* and the two surfaces
+ * are on different rungs: an Alert sits on the card rung and a Toast on the
+ * floating one, so the same 8% of the same tone has to be taken from two
+ * different backgrounds or one of them stops looking like its own rung.
+ */
+const TINT = '8%';
+
+/** Content that has not arrived yet, breathing so it reads as pending. */
+const pulse = stylex.keyframes({
+  '0%, 100%': { opacity: 1 },
+  '50%': { opacity: 0.55 },
+});
+
+/**
+ * A bar with no end in sight: a band that crosses the track and returns. The
+ * far end is 250% of the band's own width, which is where a 40% band's leading
+ * edge reaches the end of the track — past that it is off the track and the
+ * bar reads as stopped for the rest of the cycle.
+ */
+const sweep = stylex.keyframes({
+  from: { transform: 'translateX(-100%)' },
+  to: { transform: 'translateX(250%)' },
+});
+
+const spin = stylex.keyframes({
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' },
+});
+
+export const feedbackSurface = stylex.create({
+  // ── The message ──────────────────────────────────────────────────────────
+  /** The block: the mark, and the words beside it. */
+  message: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: feedback.gap,
+    boxSizing: 'border-box',
+    padding: feedback.padding,
+    borderRadius: feedback.noticeRadius,
+    cornerShape: corner.shape,
+  },
+  /** An Alert: kept on the page it is about, on the card rung. */
+  notice: {
+    width: '100%',
+    backgroundColor: feedback.noticeBackground,
+    boxShadow: feedback.noticeShadow,
+  },
+  /**
+   * A message with nothing to report in colour still has to read as a block of
+   * its own, and an Alert is the one part of this family that shares its rung
+   * with what it sits on: a card inside a card is the same fill twice, and in
+   * the light palette the card rung and the page are the same white. So the
+   * neutral tone takes a tint too, toward `label` — the derivation a popup's
+   * highlight already uses when a named fill collapses into its surface. A
+   * Toast needs none: nothing else is ever on the floating rung beside it.
+   */
+  noticeNeutral: {
+    backgroundColor: `color-mix(in oklab, ${feedback.noticeBackground}, ${feedback.title} 4%)`,
+  },
+  noticeSuccess: {
+    backgroundColor: `color-mix(in oklab, ${feedback.noticeBackground}, ${feedback.success} ${TINT})`,
+  },
+  noticeWarning: {
+    backgroundColor: `color-mix(in oklab, ${feedback.noticeBackground}, ${feedback.warning} ${TINT})`,
+  },
+  noticeDanger: {
+    backgroundColor: `color-mix(in oklab, ${feedback.noticeBackground}, ${feedback.danger} ${TINT})`,
+  },
+  /** A Toast: the same message arriving over the page, on the floating rung. */
+  toast: {
+    width: feedback.toastWidth,
+    maxWidth: '100%',
+    backgroundColor: feedback.toastBackground,
+    boxShadow: feedback.toastShadow,
+    // The list is laid out by the viewport; a toast that is being dragged
+    // carries the distance Base UI measured.
+    translate: 'var(--toast-swipe-movement-x, 0) var(--toast-swipe-movement-y, 0)',
+    opacity: 1,
+    pointerEvents: 'auto',
+    transitionProperty: 'opacity, translate',
+    transitionDuration: duration.regular,
+    transitionTimingFunction: ease.standard,
+  },
+  toastSuccess: {
+    backgroundColor: `color-mix(in oklab, ${feedback.toastBackground}, ${feedback.success} ${TINT})`,
+  },
+  toastWarning: {
+    backgroundColor: `color-mix(in oklab, ${feedback.toastBackground}, ${feedback.warning} ${TINT})`,
+  },
+  toastDanger: {
+    backgroundColor: `color-mix(in oklab, ${feedback.toastBackground}, ${feedback.danger} ${TINT})`,
+  },
+  /**
+   * The two ends of a toast's arrival, which is the rise rule applied from the
+   * edge the toast appears at: 4px above, at opacity 0. It arrives from above
+   * rather than from below because a thing sliding up out of the window's top
+   * edge reads as leaving. StyleX cannot express `[data-starting-style]`, so
+   * which end a toast is at is read off Base UI's transition status in JS, the
+   * way a popover's rise and an accordion's reveal already are.
+   */
+  toastHidden: { opacity: 0, translate: '0 -4px' },
+  /**
+   * A toast dismissed by a finger leaves along the finger, so only the opacity
+   * is taken here — replacing the translate would snap it back to the top edge
+   * halfway through the gesture that is removing it.
+   */
+  toastFading: { opacity: 0 },
+  /** While a finger is on it, the toast is where the finger is, with no lag. */
+  toastSwiping: { transitionProperty: 'none' },
+  /**
+   * The mark. It is the tone's, not the caller's: the point of a tone is that a
+   * person knows what kind of message this is before reading it, and a glyph a
+   * caller chose can put a tick on a failure.
+   */
+  mark: {
+    display: 'block',
+    flexShrink: 0,
+    width: feedback.markSize,
+    height: feedback.markSize,
+    // The title sits on an 18px line and the mark is 16, so it rides one pixel
+    // down to sit on the same optical line rather than on the box's top.
+    marginBlockStart: '1px',
+    color: feedback.mark,
+  },
+  markSuccess: { color: feedback.success },
+  markWarning: { color: feedback.warning },
+  markDanger: { color: feedback.danger },
+  /** The words: a title, the sentence under it, and what answers them. */
+  body: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: space[1],
+    minWidth: 0,
+    flexGrow: 1,
+  },
+  title: {
+    margin: 0,
+    color: feedback.title,
+    fontSize: feedback.titleSize,
+    lineHeight: feedback.titleLeading,
+    fontWeight: 600,
+    letterSpacing: text.controlTracking,
+  },
+  description: {
+    margin: 0,
+    color: feedback.description,
+    fontSize: feedback.descriptionSize,
+    lineHeight: feedback.descriptionLeading,
+    fontWeight: 400,
+  },
+  actions: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: space[2],
+    marginBlockStart: space[1],
+  },
+  /**
+   * The viewport a toast list is laid out in. It takes no pointer, so the page
+   * under it stays usable while a message is showing; each toast takes its own
+   * back. The safe area is read with `env()` for the reason the dialog's is:
+   * a shared package cannot depend on a host publishing a variable.
+   */
+  viewport: {
+    position: 'fixed',
+    insetBlockStart: `calc(${feedback.viewportInset} + env(safe-area-inset-top, 0px))`,
+    insetInlineStart: '50%',
+    translate: '-50% 0',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: feedback.toastGap,
+    width: feedback.toastWidth,
+    maxWidth: `calc(100vw - 2 * ${feedback.viewportInset})`,
+    zIndex: z.toast,
+    pointerEvents: 'none',
+    outlineStyle: 'none',
+  },
+
+  // ── The wait ─────────────────────────────────────────────────────────────
+  progress: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: space[1],
+    minWidth: 0,
+  },
+  progressHeader: {
+    display: 'flex',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: space[2],
+    fontSize: feedback.descriptionSize,
+    lineHeight: feedback.descriptionLeading,
+  },
+  progressLabel: { color: feedback.title, fontWeight: 500 },
+  progressValue: { color: feedback.description, fontVariantNumeric: 'tabular-nums' },
+  /** The track is the well rung, and the bar in it is the one live thing. */
+  track: {
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+    height: feedback.trackHeight,
+    backgroundColor: feedback.trackBackground,
+    boxShadow: feedback.trackWell,
+    borderRadius: radius.full,
+    // A pill takes the round corner: a squircle at this radius is a
+    // superellipse rather than a stadium.
+    cornerShape: corner.round,
+  },
+  indicator: {
+    position: 'absolute',
+    insetBlockStart: 0,
+    insetBlockEnd: 0,
+    backgroundColor: feedback.indicator,
+    borderRadius: radius.full,
+    cornerShape: corner.round,
+    transitionProperty: 'width',
+    transitionDuration: duration.regular,
+    transitionTimingFunction: ease.standard,
+  },
+  /**
+   * A bar that is not reporting live progress but an outcome, or a measure. The
+   * colour is the family's tone rather than a second palette: a quota nearly
+   * spent is the same warning an Alert would carry, and a bar of a thing that
+   * is merely counted — storage used, sessions left — is not live at all, so it
+   * gives `accent` back.
+   */
+  indicatorNeutral: { backgroundColor: feedback.mark },
+  indicatorSuccess: { backgroundColor: feedback.success },
+  indicatorWarning: { backgroundColor: feedback.warning },
+  indicatorDanger: { backgroundColor: feedback.danger },
+  /**
+   * No value to show, so the bar says "still working" instead of "this far".
+   * Base UI leaves the inline width unset when the value is null, which is what
+   * leaves this style free to set one.
+   */
+  indicatorIndeterminate: {
+    width: '40%',
+    transitionProperty: 'none',
+    animationName: sweep,
+    animationDuration: '1400ms',
+    animationTimingFunction: ease.standard,
+    animationIterationCount: 'infinite',
+  },
+
+  /**
+   * Content that has not arrived. It breathes rather than sweeping, because a
+   * page of sweeping blocks is a page of movement; and it stops breathing where
+   * a person asked for less of it, since nothing here is being reported that
+   * the shape itself does not already say.
+   */
+  skeleton: {
+    display: 'block',
+    flexShrink: 0,
+    backgroundColor: feedback.skeleton,
+    animationName: {
+      default: pulse,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
+    animationDuration: '1600ms',
+    animationTimingFunction: ease.standard,
+    animationIterationCount: 'infinite',
+  },
+  skeletonLine: {
+    // A line of text that has not arrived is as tall as the line it will be.
+    height: text.bodyLeading,
+    borderRadius: radius.mini,
+    cornerShape: corner.shape,
+  },
+  skeletonBlock: { borderRadius: radius.medium, cornerShape: corner.shape },
+  skeletonCircle: { borderRadius: radius.full, cornerShape: corner.round },
+
+  /**
+   * The spinner, in `currentColor`: it takes the ink of whatever holds it, so a
+   * ghost button's label and a page's secondary text each get a mark that
+   * belongs to them. The ring behind the arc is the same colour at a quarter,
+   * which is one declaration rather than a token per context.
+   */
+  spinner: {
+    display: 'block',
+    flexShrink: 0,
+    color: 'inherit',
+    // A presentation attribute cannot hold a `var()`, so the one measurement
+    // both the ring and the arc take is declared here instead.
+    strokeWidth: feedback.spinnerWidth,
+    animationName: spin,
+    animationDuration: '900ms',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+  },
+  spinnerSmall: { width: feedback.spinnerSmall, height: feedback.spinnerSmall },
+  spinnerMedium: { width: feedback.spinnerMedium, height: feedback.spinnerMedium },
+  spinnerLarge: { width: feedback.spinnerLarge, height: feedback.spinnerLarge },
+});
+
+/**
+ * Whether a toast is at one of the two ends of its arrival. Base UI reports the
+ * ends as `data-starting-style` and `data-ending-style`, which StyleX has no way
+ * to select, so the status is read here instead — the same reading the
+ * disclosure family's panel makes.
+ */
+export function isHidden(transitionStatus: string | undefined): boolean {
+  return transitionStatus === 'starting' || transitionStatus === 'ending';
+}
diff --git a/packages/ui/src/feedback/toast.tsx b/packages/ui/src/feedback/toast.tsx
new file mode 100644
index 000000000..1f5f5b67e
--- /dev/null
+++ b/packages/ui/src/feedback/toast.tsx
@@ -0,0 +1,174 @@
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import * as stylex from '@stylexjs/stylex';
+import type { ReactNode } from 'react';
+import { Button } from '../button/button';
+import { appendClassName } from '../internal/class-name';
+import { CrossGlyph } from '../internal/glyphs';
+import { useForcedThemeClassNames } from '../theme/theme';
+import { feedbackSurface as surface, isHidden } from './surface';
+import { TOAST_TONES, TONE_GLYPHS, TONE_MARKS, type FeedbackTone } from './tone';
+
+export interface ToastProviderProps {
+  children?: ReactNode;
+  /**
+   * The manager a surface outside React adds toasts through; make one with
+   * `Toast.createManager()` and keep it beside the code that reports.
+   */
+  manager?: ReturnType<typeof BaseToast.createToastManager>;
+  /** How long a toast stays. `0` keeps it until it is answered or closed. */
+  timeout?: number;
+  /** How many are shown at once before the oldest are held back. */
+  limit?: number;
+  /** What the close button is called; the product's word, in its language. */
+  closeLabel?: string;
+  /**
+   * What the region holding the toasts is called to a screen reader. Base UI's
+   * default is the English "Notifications", which a translated product has to
+   * replace.
+   */
+  label?: string;
+}
+
+export interface ToastViewportProps {
+  className?: string;
+  closeLabel?: string;
+  label?: string;
+}
+
+/** A tone a toast was added with, read off the `type` the manager carries. */
+function toneOf(type: string | undefined): FeedbackTone {
+  return type === 'success' || type === 'warning' || type === 'danger' ? type : 'neutral';
+}
+
+/**
+ * The list itself. Base UI keeps the toasts, and this turns each one into the
+ * same block an Alert is: the tone's mark, a title, the sentence under it, and
+ * whatever answers it.
+ */
+function ToastList({ closeLabel = 'Close' }: { closeLabel?: string }) {
+  const { toasts } = BaseToast.useToastManager();
+  return (
+    <>
+      {toasts.map((toast) => {
+        const tone = toneOf(toast.type);
+        const Mark = TONE_GLYPHS[tone];
+        const mark = stylex.props(surface.mark, TONE_MARKS[tone]);
+        const body = stylex.props(surface.body);
+        const title = stylex.props(surface.title);
+        const description = stylex.props(surface.description);
+        const actions = stylex.props(surface.actions);
+        return (
+          <BaseToast.Root
+            key={toast.id}
+            toast={toast}
+            className={(state) =>
+              stylex.props(
+                surface.message,
+                surface.toast,
+                TOAST_TONES[tone],
+                // StyleX cannot express `[data-starting-style]`, so which end of
+                // the arrival a toast is at is read off Base UI's status here,
+                // the way a popover's rise and an accordion's reveal are.
+                state.swiping && surface.toastSwiping,
+                isHidden(state.transitionStatus) &&
+                  (state.swipeDirection == null ? surface.toastHidden : surface.toastFading)
+              ).className
+            }
+          >
+            <span className={mark.className} style={mark.style}>
+              <Mark />
+            </span>
+            <div className={body.className} style={body.style}>
+              {toast.title != null ? (
+                <BaseToast.Title className={title.className} style={title.style} />
+              ) : null}
+              {toast.description != null ? (
+                <BaseToast.Description
+                  className={description.className}
+                  style={description.style}
+                />
+              ) : null}
+              {toast.actionProps ? (
+                <div className={actions.className} style={actions.style}>
+                  <BaseToast.Action render={<Button variant="secondary" size="small" />} />
+                </div>
+              ) : null}
+            </div>
+            <BaseToast.Close
+              render={
+                <Button variant="ghost" size="small" icon aria-label={closeLabel}>
+                  <CrossGlyph />
+                </Button>
+              }
+            />
+          </BaseToast.Root>
+        );
+      })}
+    </>
+  );
+}
+
+/**
+ * Where the toasts land: one column at the top of the window, clear of the safe
+ * area, above every popup. It takes no pointer, so the page under it stays
+ * usable while a message is showing, and each toast takes its own back.
+ */
+export function ToastViewport({ className, closeLabel, label }: ToastViewportProps) {
+  // A portalled viewport leaves the subtree whose palette it should be using,
+  // so the classes that declare that palette travel with it.
+  const palette = useForcedThemeClassNames();
+  const sx = stylex.props(surface.viewport);
+  return (
+    <BaseToast.Portal>
+      <BaseToast.Viewport
+        aria-label={label}
+        className={[appendClassName(sx.className, className), ...palette].filter(Boolean).join(' ')}
+        style={sx.style}
+      >
+        <ToastList closeLabel={closeLabel} />
+      </BaseToast.Viewport>
+    </BaseToast.Portal>
+  );
+}
+
+/**
+ * The provider, with the viewport already in it: a surface wraps its app once
+ * and reports from anywhere, rather than assembling a provider, a portal, a
+ * viewport and a list that must agree with each other.
+ */
+export function ToastProvider({
+  children,
+  manager,
+  timeout,
+  limit,
+  closeLabel,
+  label,
+}: ToastProviderProps) {
+  return (
+    <BaseToast.Provider toastManager={manager} timeout={timeout} limit={limit}>
+      {children}
+      <ToastViewport closeLabel={closeLabel} label={label} />
+    </BaseToast.Provider>
+  );
+}
+
+/**
+ * A message that arrives over the page rather than staying on it.
+ *
+ * It is the same block an `Alert` is — a tone's mark, a title, a sentence, an
+ * answer — on the floating rung instead of the card one. It is deliberately not
+ * on the modal rung: a toast does not have to be answered, so nothing behind it
+ * recedes and nothing about it holds the keyboard.
+ *
+ * The tone travels as the manager's `type`, because that is the field Base UI
+ * already carries from the call that reported to the toast that shows it:
+ * `toast.add({ title: 'Sync failed', type: 'danger' })`.
+ */
+export const Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  /** A handle for code that reports from outside React. */
+  createManager: BaseToast.createToastManager,
+  /** The same handle inside it, plus the list a surface may read. */
+  useToast: BaseToast.useToastManager,
+};
diff --git a/packages/ui/src/feedback/tone.ts b/packages/ui/src/feedback/tone.ts
new file mode 100644
index 000000000..bc0e9b418
--- /dev/null
+++ b/packages/ui/src/feedback/tone.ts
@@ -0,0 +1,51 @@
+import { DangerGlyph, InfoGlyph, SuccessGlyph, WarningGlyph } from '../internal/glyphs';
+import { feedbackSurface as surface } from './surface';
+
+/**
+ * What a message reports. Four outcomes and no more: the palette has a colour
+ * for three of them, and the fourth — something worth knowing, where nothing
+ * has gone wrong — is deliberately not one. `accent` is the obvious candidate
+ * and the rules reserve it for live state, so a neutral message takes the
+ * secondary label and lets the words do the work.
+ */
+export type FeedbackTone = 'neutral' | 'success' | 'warning' | 'danger';
+
+/** The mark each tone wears, drawn by the part rather than passed to it. */
+export const TONE_GLYPHS = {
+  neutral: InfoGlyph,
+  success: SuccessGlyph,
+  warning: WarningGlyph,
+  danger: DangerGlyph,
+} as const;
+
+export const TONE_MARKS = {
+  neutral: undefined,
+  success: surface.markSuccess,
+  warning: surface.markWarning,
+  danger: surface.markDanger,
+} as const;
+
+export const NOTICE_TONES = {
+  neutral: surface.noticeNeutral,
+  success: surface.noticeSuccess,
+  warning: surface.noticeWarning,
+  danger: surface.noticeDanger,
+} as const;
+
+export const TOAST_TONES = {
+  neutral: undefined,
+  success: surface.toastSuccess,
+  warning: surface.toastWarning,
+  danger: surface.toastDanger,
+} as const;
+
+/**
+ * How urgently a screen reader is told. A failure or a warning interrupts what
+ * is being read; a confirmation waits its turn. The two are different roles
+ * rather than a prop, because a surface that had to choose would choose wrong
+ * once — and `alert` on every message is the version that trains people to
+ * ignore it.
+ */
+export function roleForTone(tone: FeedbackTone): 'alert' | 'status' {
+  return tone === 'danger' || tone === 'warning' ? 'alert' : 'status';
+}
diff --git a/packages/ui/src/field/checkbox.tsx b/packages/ui/src/field/checkbox.tsx
new file mode 100644
index 000000000..9b67dae07
--- /dev/null
+++ b/packages/ui/src/field/checkbox.tsx
@@ -0,0 +1,101 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+type BaseProps = ComponentProps<typeof BaseCheckbox.Root>;
+
+export interface CheckboxProps extends Omit<
+  BaseProps,
+  'className' | 'render' | 'nativeButton' | 'style'
+> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  box: {
+    width: field.boxSize,
+    height: field.boxSize,
+    borderRadius: field.boxRadius,
+  },
+  indicator: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'inherit',
+  },
+  mark: {
+    display: 'block',
+    width: field.markSize,
+    height: field.markSize,
+  },
+});
+
+/**
+ * The tick and the mixed-state dash. Drawn here rather than taken from an icon
+ * package because this package depends on React, Base UI and StyleX only.
+ */
+function CheckMark() {
+  return (
+    <svg {...stylex.props(styles.mark)} viewBox="0 0 10 10" fill="none" aria-hidden="true">
+      <path
+        d="M1.6 5.2 3.9 7.5 8.4 2.7"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MixedMark() {
+  return (
+    <svg {...stylex.props(styles.mark)} viewBox="0 0 10 10" fill="none" aria-hidden="true">
+      <path d="M2.2 5h5.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+/**
+ * A checkbox in the field family: the well as a 16px box, ink once it holds a
+ * value. It renders a real `<button>` so the family's `:disabled` and
+ * `:focus-visible` rules reach it and a `<label>` can point at it, with Base
+ * UI's hidden input beside it carrying the value into a form.
+ */
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(
+  { className, ...rest },
+  ref
+) {
+  const ariaInvalid = rest['aria-invalid'];
+  return (
+    <BaseCheckbox.Root
+      ref={ref}
+      nativeButton
+      render={<button type="button" />}
+      {...rest}
+      className={(state) => {
+        const on = state.checked || state.indeterminate;
+        return appendClassName(
+          stylex.props(
+            well.box,
+            styles.box,
+            on && well.checked,
+            isInvalid(state.valid, ariaInvalid) && (on ? well.checkedInvalid : well.invalid)
+          ).className,
+          className
+        );
+      }}
+    >
+      <BaseCheckbox.Indicator
+        className={stylex.props(styles.indicator).className}
+        render={(props, state) => (
+          <span {...props}>{state.indeterminate ? <MixedMark /> : <CheckMark />}</span>
+        )}
+      />
+    </BaseCheckbox.Root>
+  );
+});
diff --git a/packages/ui/src/field/combobox.tsx b/packages/ui/src/field/combobox.tsx
new file mode 100644
index 000000000..140b605f5
--- /dev/null
+++ b/packages/ui/src/field/combobox.tsx
@@ -0,0 +1,405 @@
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+import * as stylex from '@stylexjs/stylex';
+import { createContext, forwardRef, useContext, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { ChevronDownGlyph, TickGlyph } from '../internal/glyphs';
+import { usePopupContainer, type PopupContainer } from '../popup/portal-container';
+import { useForcedThemeClassNames } from '../theme/theme';
+import { surface } from '../popup/surface';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+/** The gap between a control and the list it opens; the rules' rise distance. */
+const POPUP_GAP = 4;
+
+/** The control sits on the same 28 / 32 / 36 ladder as `Input`. */
+export type ComboboxSize = 'small' | 'medium' | 'large';
+
+type InputBaseProps = ComponentProps<typeof BaseCombobox.Input>;
+type InputGroupBaseProps = ComponentProps<typeof BaseCombobox.InputGroup>;
+type TriggerBaseProps = ComponentProps<typeof BaseCombobox.Trigger>;
+type ClearBaseProps = ComponentProps<typeof BaseCombobox.Clear>;
+type PositionerBaseProps = ComponentProps<typeof BaseCombobox.Positioner>;
+type ItemBaseProps = ComponentProps<typeof BaseCombobox.Item>;
+type ListBaseProps = ComponentProps<typeof BaseCombobox.List>;
+type EmptyBaseProps = ComponentProps<typeof BaseCombobox.Empty>;
+type GroupBaseProps = ComponentProps<typeof BaseCombobox.Group>;
+type GroupLabelBaseProps = ComponentProps<typeof BaseCombobox.GroupLabel>;
+type SeparatorBaseProps = ComponentProps<typeof BaseCombobox.Separator>;
+
+export interface ComboboxInputProps extends Omit<InputBaseProps, 'className' | 'size'> {
+  /** Control height and density. `size` is the token step, not the HTML attribute. */
+  size?: ComboboxSize;
+  className?: string;
+}
+
+export interface ComboboxInputGroupProps extends Omit<InputGroupBaseProps, 'className'> {
+  size?: ComboboxSize;
+  className?: string;
+}
+
+export interface ComboboxTriggerProps extends Omit<TriggerBaseProps, 'className' | 'children'> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface ComboboxClearProps extends Omit<ClearBaseProps, 'className' | 'children'> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface ComboboxContentProps extends Omit<
+  PositionerBaseProps,
+  'className' | 'children' | 'render'
+> {
+  children?: ListBaseProps['children'];
+  /**
+   * What the popup says when nothing matches. It is rendered beside the list
+   * rather than inside it, and stays mounted, because Base UI announces it.
+   */
+  empty?: ReactNode;
+  /** Where the popup mounts. Defaults to the nearest `PopupContainerProvider`. */
+  container?: PopupContainer;
+  className?: string;
+}
+
+export interface ComboboxItemProps extends Omit<ItemBaseProps, 'className' | 'children'> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface ComboboxEmptyProps extends Omit<EmptyBaseProps, 'className'> {
+  className?: string;
+}
+export interface ComboboxGroupProps extends Omit<GroupBaseProps, 'className'> {
+  className?: string;
+}
+export interface ComboboxGroupLabelProps extends Omit<GroupLabelBaseProps, 'className'> {
+  className?: string;
+}
+export interface ComboboxSeparatorProps extends Omit<SeparatorBaseProps, 'className'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  input: { display: 'block' },
+  small: {
+    height: field.heightSmall,
+    paddingInline: field.paddingXSmall,
+    borderRadius: field.radiusSmall,
+    fontSize: field.text,
+  },
+  medium: {
+    height: field.heightMedium,
+    paddingInline: field.paddingXMedium,
+    borderRadius: field.radiusMedium,
+    fontSize: field.text,
+  },
+  large: {
+    height: field.heightLarge,
+    paddingInline: field.paddingXLarge,
+    borderRadius: field.radiusMedium,
+    fontSize: field.text,
+  },
+  /** The controls beside the input keep the shell's end padding off them. */
+  shell: { gap: field.triggerGap },
+  /** A chevron or a cross beside the input: a glyph, not a filled button. */
+  adornment: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    boxSizing: 'border-box',
+    width: field.iconSize,
+    height: field.iconSize,
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    color: { default: field.icon, ':hover': field.value },
+    cursor: { default: 'default', ':disabled': 'default' },
+    outlineStyle: 'none',
+  },
+  positioner: { outlineStyle: 'none' },
+});
+
+const sizeStyles = {
+  small: styles.small,
+  medium: styles.medium,
+  large: styles.large,
+};
+
+/**
+ * Whether a `Combobox.InputGroup` is above the input. The group is the well
+ * when there is one, so the input inside it drops its own; without a group the
+ * input is the whole control. Read here rather than made a prop so the two
+ * cannot disagree and draw two wells.
+ */
+const InsideInputGroup = createContext(false);
+
+/**
+ * The shell holding the input and whatever sits beside it. It is the well, and
+ * the ring follows focus inside it, so a chevron next to the input lands inside
+ * one control rather than beside a second one.
+ */
+export const ComboboxInputGroup = forwardRef<HTMLDivElement, ComboboxInputGroupProps>(
+  function ComboboxInputGroup({ size = 'medium', className, ...rest }, ref) {
+    const ariaInvalid = rest['aria-invalid'];
+    return (
+      <InsideInputGroup.Provider value={true}>
+        <BaseCombobox.InputGroup
+          ref={ref}
+          data-size={size}
+          {...rest}
+          className={(state) =>
+            appendClassName(
+              stylex.props(
+                well.shell,
+                styles.shell,
+                sizeStyles[size],
+                isInvalid(state.valid, ariaInvalid) && well.shellInvalid,
+                // `:disabled` cannot reach a `<div>`, so the family's one
+                // disabled value is applied from Base UI's state instead.
+                state.disabled && well.dimmed
+              ).className,
+              className
+            )
+          }
+        />
+      </InsideInputGroup.Provider>
+    );
+  }
+);
+
+/**
+ * The text input a person filters with. On its own it is the whole control, a
+ * well on the size ladder; inside a `Combobox.InputGroup` the group is the well
+ * and this is bare.
+ */
+export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
+  function ComboboxInput({ size = 'medium', className, ...rest }, ref) {
+    const insideGroup = useContext(InsideInputGroup);
+    const ariaInvalid = rest['aria-invalid'];
+    return (
+      <BaseCombobox.Input
+        ref={ref}
+        data-size={insideGroup ? undefined : size}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            insideGroup
+              ? stylex.props(well.bare).className
+              : stylex.props(
+                  well.base,
+                  styles.input,
+                  sizeStyles[size],
+                  isInvalid(state.valid, ariaInvalid) && well.invalid
+                ).className,
+            className
+          )
+        }
+      />
+    );
+  }
+);
+
+/** The chevron beside the input: it opens the list without clearing the query. */
+export const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(
+  function ComboboxTrigger({ className, children, ...rest }, ref) {
+    const sx = stylex.props(styles.adornment);
+    return (
+      <BaseCombobox.Trigger
+        ref={ref}
+        nativeButton
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      >
+        {children ?? <ChevronDownGlyph />}
+      </BaseCombobox.Trigger>
+    );
+  }
+);
+
+/** Drops the value. Base UI unmounts it while there is nothing to drop. */
+export const ComboboxClear = forwardRef<HTMLButtonElement, ComboboxClearProps>(
+  function ComboboxClear({ className, children, ...rest }, ref) {
+    const sx = stylex.props(styles.adornment);
+    return (
+      <BaseCombobox.Clear
+        ref={ref}
+        nativeButton
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      >
+        {children}
+      </BaseCombobox.Clear>
+    );
+  }
+);
+
+/** A row in the list: its label, and the tick when it holds the value. */
+export const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(function ComboboxItem(
+  { className, children, ...rest },
+  ref
+) {
+  return (
+    <BaseCombobox.Item
+      ref={ref}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            surface.item,
+            state.selected && surface.itemSelected,
+            state.highlighted && surface.itemHighlighted,
+            state.disabled && surface.itemDisabled
+          ).className,
+          className
+        )
+      }
+    >
+      <span {...stylex.props(surface.itemText)}>{children}</span>
+      <span {...stylex.props(surface.indicator)}>
+        <BaseCombobox.ItemIndicator
+          className={stylex.props(surface.indicatorGlyph).className}
+          render={<span />}
+        >
+          <TickGlyph />
+        </BaseCombobox.ItemIndicator>
+      </span>
+    </BaseCombobox.Item>
+  );
+});
+
+export const ComboboxEmpty = forwardRef<HTMLDivElement, ComboboxEmptyProps>(function ComboboxEmpty(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.empty);
+  return (
+    <BaseCombobox.Empty
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+export const ComboboxGroup = forwardRef<HTMLDivElement, ComboboxGroupProps>(function ComboboxGroup(
+  { className, ...rest },
+  ref
+) {
+  return <BaseCombobox.Group ref={ref} {...rest} className={className} />;
+});
+
+export const ComboboxGroupLabel = forwardRef<HTMLDivElement, ComboboxGroupLabelProps>(
+  function ComboboxGroupLabel({ className, ...rest }, ref) {
+    const sx = stylex.props(surface.groupLabel);
+    return (
+      <BaseCombobox.GroupLabel
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+export const ComboboxSeparator = forwardRef<HTMLDivElement, ComboboxSeparatorProps>(
+  function ComboboxSeparator({ className, ...rest }, ref) {
+    const sx = stylex.props(surface.separator);
+    return (
+      <BaseCombobox.Separator
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+/**
+ * The list, assembled — the same floating surface a `Select` opens, so the two
+ * cannot drift. `empty` is rendered beside the list rather than inside it,
+ * because Base UI keeps that region mounted to announce the change.
+ */
+export const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>(
+  function ComboboxContent(
+    { className, children, empty, container, sideOffset = POPUP_GAP, ...rest },
+    ref
+  ) {
+    const inheritedContainer = usePopupContainer();
+    // A portalled popup leaves the subtree whose palette it should be using, so
+    // the classes that declare that palette travel with it and land on the
+    // positioner, where they cascade into the popup and its rows.
+    const palette = useForcedThemeClassNames();
+    const mountPoint = container ?? inheritedContainer;
+    // A popup mounted into a named container is inside a subtree the host owns,
+    // and a modal panel typically centres itself with `translate`, which makes
+    // it the containing block for every `position: fixed` descendant. Floating
+    // UI's fixed strategy then resolves the coordinates it computed against the
+    // viewport relative to that panel instead, and the list lands as far off as
+    // the panel is from the viewport corner. The absolute strategy resolves
+    // against the offset parent, which is the panel, so the two agree again.
+    const strategy = rest.positionMethod ?? (mountPoint != null ? 'absolute' : undefined);
+    return (
+      <BaseCombobox.Portal container={mountPoint}>
+        <BaseCombobox.Positioner
+          ref={ref}
+          {...rest}
+          sideOffset={sideOffset}
+          positionMethod={strategy}
+          className={[stylex.props(styles.positioner).className, ...palette]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <BaseCombobox.Popup
+            className={(state) => {
+              // StyleX cannot express `[data-starting-style]`, so the two ends
+              // of the rise are read off Base UI's transition status here.
+              const hidden =
+                state.transitionStatus === 'starting' || state.transitionStatus === 'ending';
+              return appendClassName(
+                stylex.props(surface.popup, hidden && surface.popupHidden).className,
+                className
+              );
+            }}
+          >
+            {empty}
+            <BaseCombobox.List className={stylex.props(surface.list).className}>
+              {children}
+            </BaseCombobox.List>
+          </BaseCombobox.Popup>
+        </BaseCombobox.Positioner>
+      </BaseCombobox.Portal>
+    );
+  }
+);
+
+/**
+ * A combobox in the field family: a well-rung text input that filters the same
+ * floating list a `Select` opens. `Combobox.Root` owns the value, the query and
+ * the open state; the input reads validity and disabled from `Field.Root` the
+ * way an `Input` does.
+ */
+export const Combobox = {
+  Root: BaseCombobox.Root,
+  InputGroup: ComboboxInputGroup,
+  Input: ComboboxInput,
+  Trigger: ComboboxTrigger,
+  Clear: ComboboxClear,
+  Content: ComboboxContent,
+  Item: ComboboxItem,
+  Empty: ComboboxEmpty,
+  Group: ComboboxGroup,
+  GroupLabel: ComboboxGroupLabel,
+  Separator: ComboboxSeparator,
+  Value: BaseCombobox.Value,
+};
diff --git a/packages/ui/src/field/field.tokens.stylex.ts b/packages/ui/src/field/field.tokens.stylex.ts
new file mode 100644
index 000000000..a78df1f44
--- /dev/null
+++ b/packages/ui/src/field/field.tokens.stylex.ts
@@ -0,0 +1,93 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { control, radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * One token group for the whole field family — label, control, help and error.
+ * Input, Textarea and every control that migrates next read these, so a state
+ * has one colour in one place instead of one per component.
+ */
+export const field = stylex.defineVars({
+  heightSmall: control.small,
+  heightMedium: control.medium,
+  heightLarge: control.large,
+  paddingXSmall: space[2],
+  // 10px sits between space.2 and space.3; the 32px control needs the half step.
+  paddingXMedium: '10px',
+  paddingXLarge: space[3],
+  paddingBlock: space[2],
+  radiusSmall: radius.small,
+  radiusMedium: radius.medium,
+  // One step for the whole 28 / 32 / 36 ladder. 12 belongs to the label and the
+  // help text; a control's own content is never sized like the text about it.
+  text: text.subheadlineSize,
+  labelSize: text.footnoteSize,
+  labelLeading: text.footnoteLeading,
+  gap: space[1.5],
+  ringWidth: '2px',
+  textareaMinHeight: '72px',
+  // A checkbox and a radio are the rules' "16px things", so they take the mini
+  // radius; a radio overrides it with a full round because it is a circle.
+  boxSize: '16px',
+  boxRadius: radius.mini,
+  // The tick and the dot inside that box, and the switch the same height as it
+  // so a settings row holding both lines up.
+  markSize: '10px',
+  dotSize: '6px',
+  switchWidth: '28px',
+  switchHeight: '16px',
+  switchThumbSize: '12px',
+  switchInset: '2px',
+  // A Select or Combobox trigger holds a glyph beside its value. The rules put
+  // a chevron in the hint colour, and the gap keeps the value off it.
+  iconSize: '16px',
+  triggerGap: space[2],
+  // The rules put disabled at 45% opacity on the control. It is one value for
+  // the whole family, so the control and its label cannot drift apart.
+  disabledOpacity: '0.45',
+  background: colors.wellBackground,
+  well: shadow.inset,
+  value: colors.label,
+  label: colors.label,
+  placeholder: colors.tertiaryLabel,
+  hint: colors.tertiaryLabel,
+  // The chevron on a trigger and any icon at rest: a hint, not a label.
+  icon: colors.tertiaryLabel,
+  error: colors.destructive,
+  ring: colors.accent,
+  invalidRing: colors.destructive,
+  // Stored state is ink: the rules give a checked box and a switch that is on
+  // the `label` fill with `background` on top of it, the same pair the primary
+  // button uses, and the same ink edge as its top highlight. `accent` stays on
+  // live state and is not a fill.
+  checkedFill: colors.label,
+  checkedMark: colors.background,
+  checkedEdge: shadow.inkEdge,
+  // The switch thumb is raised on both tracks: it reads against the well when
+  // the switch is off and against the ink when it is on.
+  thumb: colors.raisedBackground,
+  thumbShadow: shadow.raised,
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element that carries a forced
+ * palette; see the note in `button.tokens.stylex.ts` for why a group declared
+ * only at the document root keeps the root palette inside a themed subtree.
+ */
+export const fieldPaletteTheme = stylex.createTheme(field, {
+  background: colors.wellBackground,
+  well: shadow.inset,
+  value: colors.label,
+  label: colors.label,
+  placeholder: colors.tertiaryLabel,
+  hint: colors.tertiaryLabel,
+  icon: colors.tertiaryLabel,
+  error: colors.destructive,
+  ring: colors.accent,
+  invalidRing: colors.destructive,
+  checkedFill: colors.label,
+  checkedMark: colors.background,
+  checkedEdge: shadow.inkEdge,
+  thumb: colors.raisedBackground,
+  thumbShadow: shadow.raised,
+});
diff --git a/packages/ui/src/field/field.tsx b/packages/ui/src/field/field.tsx
new file mode 100644
index 000000000..379d3de7a
--- /dev/null
+++ b/packages/ui/src/field/field.tsx
@@ -0,0 +1,223 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import { useRender } from '@base-ui/react/use-render';
+import * as stylex from '@stylexjs/stylex';
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type ComponentProps,
+  type ReactElement,
+  type Ref,
+} from 'react';
+import { appendClassName } from '../internal/class-name';
+import { text } from '../tokens/scales.stylex';
+import { field } from './field.tokens.stylex';
+
+type RootBaseProps = ComponentProps<typeof BaseField.Root>;
+type LabelBaseProps = ComponentProps<typeof BaseField.Label>;
+type DescriptionBaseProps = ComponentProps<typeof BaseField.Description>;
+type ErrorBaseProps = ComponentProps<typeof BaseField.Error>;
+
+/** State every Field part receives from `Field.Root`. */
+export type FieldState = BaseField.Root.State;
+
+export interface FieldRootProps extends Omit<RootBaseProps, 'className'> {
+  className?: string;
+}
+export interface FieldLabelProps extends Omit<LabelBaseProps, 'className'> {
+  className?: string;
+}
+export interface FieldDescriptionProps extends Omit<DescriptionBaseProps, 'className'> {
+  className?: string;
+}
+export interface FieldErrorProps extends Omit<ErrorBaseProps, 'className'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: field.gap,
+    minWidth: 0,
+  },
+  label: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: field.gap,
+    color: field.label,
+    fontSize: field.labelSize,
+    lineHeight: field.labelLeading,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    userSelect: 'none',
+  },
+  note: {
+    margin: 0,
+    fontSize: field.labelSize,
+    lineHeight: field.labelLeading,
+    fontWeight: 400,
+  },
+  hint: { color: field.hint },
+  error: { color: field.error },
+  // Disabled is one opacity for the family; the control dims through its own
+  // `:disabled`, so nothing here stacks a second layer on top of it.
+  dimmed: { opacity: field.disabledOpacity },
+});
+
+/**
+ * Whether a `Field.Root` is above this part. Base UI's Label, Description and
+ * Error throw without one, while its Control does not, so the parts below fall
+ * back to the plain element instead of taking the surface down with them. A
+ * label with `htmlFor`, or a line of help text, is meaningful on its own; the
+ * only thing lost outside a field is the field state, and there is none.
+ */
+const InsideField = createContext(false);
+
+/** A part rendered outside a field, with `render` still honoured. */
+function PlainPart({
+  tag,
+  sx,
+  caller,
+  elementRef,
+  render,
+  props,
+}: {
+  tag: 'label' | 'p' | 'div';
+  sx: ReturnType<typeof stylex.props>;
+  caller: string | undefined;
+  elementRef: Ref<HTMLElement>;
+  render: ReactElement | undefined;
+  props: Record<string, unknown>;
+}) {
+  return useRender({
+    render,
+    ref: elementRef,
+    defaultTagName: tag,
+    props: { ...props, className: appendClassName(sx.className, caller), style: sx.style },
+  });
+}
+
+export const FieldRoot = forwardRef<HTMLDivElement, FieldRootProps>(function FieldRoot(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(styles.root);
+  return (
+    <InsideField.Provider value={true}>
+      <BaseField.Root
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    </InsideField.Provider>
+  );
+});
+
+export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(
+  { className, render, ...rest },
+  ref
+) {
+  const insideField = useContext(InsideField);
+  if (!insideField) {
+    return (
+      <PlainPart
+        tag="label"
+        sx={stylex.props(styles.label)}
+        caller={className}
+        elementRef={ref as Ref<HTMLElement>}
+        render={render as ReactElement | undefined}
+        props={rest}
+      />
+    );
+  }
+  return (
+    <BaseField.Label
+      ref={ref}
+      render={render}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(styles.label, state.disabled && styles.dimmed).className,
+          className
+        )
+      }
+    />
+  );
+});
+
+export const FieldDescription = forwardRef<HTMLParagraphElement, FieldDescriptionProps>(
+  function FieldDescription({ className, render, ...rest }, ref) {
+    const insideField = useContext(InsideField);
+    if (!insideField) {
+      return (
+        <PlainPart
+          tag="p"
+          sx={stylex.props(styles.note, styles.hint)}
+          caller={className}
+          elementRef={ref as Ref<HTMLElement>}
+          render={render as ReactElement | undefined}
+          props={rest}
+        />
+      );
+    }
+    return (
+      <BaseField.Description
+        ref={ref}
+        render={render}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            stylex.props(styles.note, styles.hint, state.disabled && styles.dimmed).className,
+            className
+          )
+        }
+      />
+    );
+  }
+);
+
+export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(function FieldError(
+  { className, render, match, ...rest },
+  ref
+) {
+  const insideField = useContext(InsideField);
+  const sx = stylex.props(styles.note, styles.error);
+  // Outside a field there is no validity to match against, so the caller owns
+  // whether the message is on screen: rendering it is what they asked for.
+  if (!insideField) {
+    return (
+      <PlainPart
+        tag="div"
+        sx={sx}
+        caller={className}
+        elementRef={ref as Ref<HTMLElement>}
+        render={render as ReactElement | undefined}
+        props={rest}
+      />
+    );
+  }
+  return (
+    <BaseField.Error
+      ref={ref}
+      render={render}
+      match={match}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/**
+ * The field composition. `Field.Root` owns name, disabled and validity; the
+ * parts read that state instead of taking their own copies of it.
+ */
+export const Field = {
+  Root: FieldRoot,
+  Label: FieldLabel,
+  Description: FieldDescription,
+  Error: FieldError,
+  Validity: BaseField.Validity,
+};
diff --git a/packages/ui/src/field/input.tsx b/packages/ui/src/field/input.tsx
new file mode 100644
index 000000000..412850da1
--- /dev/null
+++ b/packages/ui/src/field/input.tsx
@@ -0,0 +1,70 @@
+import { Input as BaseInput } from '@base-ui/react/input';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+export type InputSize = 'small' | 'medium' | 'large';
+
+type BaseProps = ComponentProps<typeof BaseInput>;
+
+export interface InputProps extends Omit<BaseProps, 'className' | 'size'> {
+  /** Control height and density. `size` is the token step, not the HTML attribute. */
+  size?: InputSize;
+  className?: string;
+}
+
+const styles = stylex.create({
+  input: { display: 'block' },
+  small: {
+    height: field.heightSmall,
+    paddingInline: field.paddingXSmall,
+    borderRadius: field.radiusSmall,
+    fontSize: field.text,
+  },
+  medium: {
+    height: field.heightMedium,
+    paddingInline: field.paddingXMedium,
+    borderRadius: field.radiusMedium,
+    fontSize: field.text,
+  },
+  large: {
+    height: field.heightLarge,
+    paddingInline: field.paddingXLarge,
+    borderRadius: field.radiusMedium,
+    fontSize: field.text,
+  },
+});
+
+const sizeStyles = {
+  small: styles.small,
+  medium: styles.medium,
+  large: styles.large,
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { size = 'medium', className, ...rest },
+  ref
+) {
+  const ariaInvalid = rest['aria-invalid'];
+  return (
+    <BaseInput
+      ref={ref}
+      data-size={size}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            well.base,
+            styles.input,
+            sizeStyles[size],
+            isInvalid(state.valid, ariaInvalid) && well.invalid
+          ).className,
+          className
+        )
+      }
+    />
+  );
+});
diff --git a/packages/ui/src/field/invalid.ts b/packages/ui/src/field/invalid.ts
new file mode 100644
index 000000000..dbd77dd5a
--- /dev/null
+++ b/packages/ui/src/field/invalid.ts
@@ -0,0 +1,21 @@
+import type { AriaAttributes } from 'react';
+
+/**
+ * Whether a control wears the invalid ring.
+ *
+ * `Field.Root invalid` renders `aria-invalid` onto its control, so the
+ * attribute is not a second source of truth: it is the rendered form of the
+ * field's validity. Reading it here keeps what a screen reader announces and
+ * what a sighted person sees from disagreeing, and lets a surface that owns its
+ * own validation mark one control without a field around it.
+ *
+ * ARIA treats every value except `false` as an invalid state, `grammar` and
+ * `spelling` included.
+ */
+export function isInvalid(
+  fieldValid: boolean | null | undefined,
+  ariaInvalid: AriaAttributes['aria-invalid']
+): boolean {
+  if (fieldValid === false) return true;
+  return ariaInvalid != null && ariaInvalid !== false && ariaInvalid !== 'false';
+}
diff --git a/packages/ui/src/field/radio.tsx b/packages/ui/src/field/radio.tsx
new file mode 100644
index 000000000..17036c210
--- /dev/null
+++ b/packages/ui/src/field/radio.tsx
@@ -0,0 +1,90 @@
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import * as stylex from '@stylexjs/stylex';
+import { appendClassName } from '../internal/class-name';
+import { corner, radius, space } from '../tokens/scales.stylex';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+export interface RadioProps extends Omit<
+  BaseRadio.Root.Props,
+  'className' | 'render' | 'nativeButton' | 'style'
+> {
+  className?: string;
+}
+
+export interface RadioGroupProps extends Omit<BaseRadioGroup.Props, 'className' | 'style'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  group: {
+    display: 'flex',
+    flexDirection: 'column',
+    // Options are rows of their own, not the lines of one field, so they sit a
+    // step further apart than `field.gap` stacks a label over its control.
+    gap: space[2],
+    minWidth: 0,
+  },
+  box: {
+    width: field.boxSize,
+    height: field.boxSize,
+    borderRadius: radius.full,
+    // The well's squircle would make this a squircle rather than a circle, which
+    // is the one shape that tells a radio apart from a checkbox.
+    cornerShape: corner.round,
+  },
+  dot: {
+    display: 'block',
+    width: field.dotSize,
+    height: field.dotSize,
+    borderRadius: radius.full,
+    backgroundColor: 'currentColor',
+  },
+});
+
+/**
+ * A radio in the field family: the same well and ink as a Checkbox, round, with
+ * one option of a group selected at a time. It renders a real `<button>` for the
+ * same reasons a Checkbox does.
+ */
+export function Radio({ className, ...rest }: RadioProps) {
+  const ariaInvalid = rest['aria-invalid'];
+  return (
+    <BaseRadio.Root
+      nativeButton
+      render={<button type="button" />}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            well.box,
+            styles.box,
+            state.checked && well.checked,
+            isInvalid(state.valid, ariaInvalid) &&
+              (state.checked ? well.checkedInvalid : well.invalid)
+          ).className,
+          className
+        )
+      }
+    >
+      <BaseRadio.Indicator className={stylex.props(styles.dot).className} />
+    </BaseRadio.Root>
+  );
+}
+
+/**
+ * Holds the group's name, value and disabled flag, so a `Radio` inside it takes
+ * only the value it stands for.
+ */
+export function RadioGroup({ className, ...rest }: RadioGroupProps) {
+  const sx = stylex.props(styles.group);
+  return (
+    <BaseRadioGroup
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+}
diff --git a/packages/ui/src/field/select.tsx b/packages/ui/src/field/select.tsx
new file mode 100644
index 000000000..9f80919da
--- /dev/null
+++ b/packages/ui/src/field/select.tsx
@@ -0,0 +1,359 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { ChevronDownGlyph, ChevronUpGlyph, TickGlyph } from '../internal/glyphs';
+import { appendClassName } from '../internal/class-name';
+import { usePopupContainer, type PopupContainer } from '../popup/portal-container';
+import { useForcedThemeClassNames } from '../theme/theme';
+import { surface } from '../popup/surface';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+/** The gap between a control and the list it opens; the rules' rise distance. */
+const POPUP_GAP = 4;
+
+/** The trigger sits on the same 28 / 32 / 36 ladder as `Input`. */
+export type SelectSize = 'small' | 'medium' | 'large';
+
+type TriggerBaseProps = ComponentProps<typeof BaseSelect.Trigger>;
+type ValueBaseProps = ComponentProps<typeof BaseSelect.Value>;
+type PositionerBaseProps = ComponentProps<typeof BaseSelect.Positioner>;
+type ItemBaseProps = ComponentProps<typeof BaseSelect.Item>;
+type GroupBaseProps = ComponentProps<typeof BaseSelect.Group>;
+type GroupLabelBaseProps = ComponentProps<typeof BaseSelect.GroupLabel>;
+type SeparatorBaseProps = ComponentProps<typeof BaseSelect.Separator>;
+
+export interface SelectTriggerProps extends Omit<TriggerBaseProps, 'className' | 'children'> {
+  /** Control height and density, the same step `Input` takes. */
+  size?: SelectSize;
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface SelectValueProps extends Omit<ValueBaseProps, 'className'> {
+  className?: string;
+}
+
+export interface SelectContentProps extends Omit<
+  PositionerBaseProps,
+  'className' | 'children' | 'render'
+> {
+  children?: ReactNode;
+  /** Where the popup mounts. Defaults to the nearest `PopupContainerProvider`. */
+  container?: PopupContainer;
+  className?: string;
+}
+
+export interface SelectItemProps extends Omit<ItemBaseProps, 'className' | 'children'> {
+  children?: ReactNode;
+  /**
+   * An affordance at the end of the row, before the tick — an edit button on
+   * the row it belongs to. It sits outside the row's label, so what the trigger
+   * shows for the selected row stays the label alone.
+   */
+  endContent?: ReactNode;
+  className?: string;
+}
+
+export interface SelectGroupProps extends Omit<GroupBaseProps, 'className'> {
+  className?: string;
+}
+export interface SelectGroupLabelProps extends Omit<GroupLabelBaseProps, 'className'> {
+  className?: string;
+}
+export interface SelectSeparatorProps extends Omit<SeparatorBaseProps, 'className'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  trigger: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: field.triggerGap,
+    textAlign: 'start',
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+    userSelect: 'none',
+    // A trigger opens a list; it is not a button that acts, so it keeps the
+    // arrow the way a native select does rather than taking the hand.
+    cursor: { default: 'default', ':disabled': 'default' },
+  },
+  small: {
+    height: field.heightSmall,
+    paddingInline: field.paddingXSmall,
+    borderRadius: field.radiusSmall,
+    fontSize: field.text,
+  },
+  medium: {
+    height: field.heightMedium,
+    paddingInline: field.paddingXMedium,
+    borderRadius: field.radiusMedium,
+    fontSize: field.text,
+  },
+  large: {
+    height: field.heightLarge,
+    paddingInline: field.paddingXLarge,
+    borderRadius: field.radiusMedium,
+    fontSize: field.text,
+  },
+  /** The value takes the width the chevron leaves, so a long one truncates. */
+  value: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  /** An empty trigger reads as a prompt, in the same hint colour as a placeholder. */
+  placeholder: { color: field.placeholder },
+  icon: {
+    display: 'flex',
+    flexShrink: 0,
+    width: field.iconSize,
+    height: field.iconSize,
+    color: field.icon,
+  },
+  /** The positioner carries no appearance; the popup inside it does. */
+  positioner: { outlineStyle: 'none' },
+});
+
+const sizeStyles = {
+  small: styles.small,
+  medium: styles.medium,
+  large: styles.large,
+};
+
+/**
+ * The trigger: a control on the well rung that happens to open a list. It reads
+ * validity and disabled from `Field.Root` the way every control in this family
+ * does, and renders the chevron itself so a caller never draws one.
+ */
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  function SelectTrigger({ size = 'medium', className, children, ...rest }, ref) {
+    const ariaInvalid = rest['aria-invalid'];
+    return (
+      <BaseSelect.Trigger
+        ref={ref}
+        nativeButton
+        data-size={size}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            stylex.props(
+              well.base,
+              styles.trigger,
+              sizeStyles[size],
+              isInvalid(state.valid, ariaInvalid) && well.invalid
+            ).className,
+            className
+          )
+        }
+      >
+        {children}
+        <BaseSelect.Icon className={stylex.props(styles.icon).className}>
+          <ChevronDownGlyph />
+        </BaseSelect.Icon>
+      </BaseSelect.Trigger>
+    );
+  }
+);
+
+/** What the trigger shows: the selected label, or the placeholder prompt. */
+export const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(
+  { className, ...rest },
+  ref
+) {
+  return (
+    <BaseSelect.Value
+      ref={ref}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(styles.value, state.placeholder && styles.placeholder).className,
+          className
+        )
+      }
+    />
+  );
+});
+
+/** A row in the list: its label, and the tick when it holds the value. */
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(function SelectItem(
+  { className, children, endContent, ...rest },
+  ref
+) {
+  return (
+    <BaseSelect.Item
+      ref={ref}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            surface.item,
+            state.selected && surface.itemSelected,
+            // The highlight is where the keyboard or the pointer is, so it
+            // wins the fill over the selected row; the tick still says which
+            // row is current.
+            state.highlighted && surface.itemHighlighted,
+            state.disabled && surface.itemDisabled
+          ).className,
+          className
+        )
+      }
+    >
+      <BaseSelect.ItemText className={stylex.props(surface.itemText).className}>
+        {children}
+      </BaseSelect.ItemText>
+      {endContent}
+      <span {...stylex.props(surface.indicator)}>
+        <BaseSelect.ItemIndicator
+          className={stylex.props(surface.indicatorGlyph).className}
+          render={<span />}
+        >
+          <TickGlyph />
+        </BaseSelect.ItemIndicator>
+      </span>
+    </BaseSelect.Item>
+  );
+});
+
+export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(
+  { className, ...rest },
+  ref
+) {
+  return <BaseSelect.Group ref={ref} {...rest} className={className} />;
+});
+
+export const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(
+  function SelectGroupLabel({ className, ...rest }, ref) {
+    const sx = stylex.props(surface.groupLabel);
+    return (
+      <BaseSelect.GroupLabel
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+export const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(
+  function SelectSeparator({ className, ...rest }, ref) {
+    const sx = stylex.props(surface.separator);
+    return (
+      <BaseSelect.Separator
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+/**
+ * The list, assembled. Base UI splits a popup into a portal, a positioner, the
+ * popup, the scrolling list and two scroll arrows; every caller writes the same
+ * five, so this part writes them once and takes the positioning props on the
+ * outside. The caller supplies rows and nothing else.
+ */
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(function SelectContent(
+  {
+    className,
+    children,
+    container,
+    // Base UI's default overlaps the popup with its trigger so the selected
+    // row's text lands on the value, the way a macOS pop-up button does. This
+    // package's motion rule says a popup rises from 4px below the control
+    // instead, so the list is anchored under the trigger by default. That also
+    // keeps the popup on the anchored positioning path: the overlapping mode
+    // computes viewport coordinates and pins `position: fixed` itself, which a
+    // container that centres itself with `translate` then reinterprets as its
+    // own origin. A caller that wants the overlap can still ask for it.
+    alignItemWithTrigger = false,
+    sideOffset = POPUP_GAP,
+    ...rest
+  },
+  ref
+) {
+  const inheritedContainer = usePopupContainer();
+  // A portalled popup leaves the subtree whose palette it should be using, so
+  // the classes that declare that palette travel with it and land on the
+  // positioner, where they cascade into the popup and its rows.
+  const palette = useForcedThemeClassNames();
+  const mountPoint = container ?? inheritedContainer;
+  // A popup mounted into a named container is inside a subtree the host owns,
+  // and a modal panel typically centres itself with `translate`, which makes it
+  // the containing block for every `position: fixed` descendant. Floating UI's
+  // fixed strategy then resolves the coordinates it computed against the
+  // viewport relative to that panel instead, and the list lands as far off as
+  // the panel is from the viewport corner. The absolute strategy resolves
+  // against the offset parent, which is the panel, so the two agree again.
+  const strategy = rest.positionMethod ?? (mountPoint != null ? 'absolute' : undefined);
+  return (
+    <BaseSelect.Portal container={mountPoint}>
+      <BaseSelect.Positioner
+        ref={ref}
+        {...rest}
+        alignItemWithTrigger={alignItemWithTrigger}
+        sideOffset={sideOffset}
+        positionMethod={strategy}
+        className={[stylex.props(styles.positioner).className, ...palette]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <BaseSelect.Popup
+          className={(state) => {
+            // StyleX cannot express `[data-starting-style]`, so the two ends
+            // of the rise are read off Base UI's transition status here.
+            const hidden =
+              state.transitionStatus === 'starting' || state.transitionStatus === 'ending';
+            return appendClassName(
+              stylex.props(
+                surface.popup,
+                hidden &&
+                  // `side="none"` means the popup is overlapping its trigger
+                  // to line the selected row up with the value; sliding it
+                  // would pull that alignment out from under the pointer.
+                  (state.side === 'none' ? surface.popupHiddenInPlace : surface.popupHidden)
+              ).className,
+              className
+            );
+          }}
+        >
+          <BaseSelect.ScrollUpArrow className={stylex.props(surface.scrollArrow).className}>
+            <ChevronUpGlyph />
+          </BaseSelect.ScrollUpArrow>
+          <BaseSelect.List className={stylex.props(surface.list).className}>
+            {children}
+          </BaseSelect.List>
+          <BaseSelect.ScrollDownArrow className={stylex.props(surface.scrollArrow).className}>
+            <ChevronDownGlyph />
+          </BaseSelect.ScrollDownArrow>
+        </BaseSelect.Popup>
+      </BaseSelect.Positioner>
+    </BaseSelect.Portal>
+  );
+});
+
+/**
+ * A select in the field family: a well-rung trigger and a floating list.
+ * `Select.Root` owns the value and the open state; the trigger reads validity
+ * and disabled from `Field.Root` the way an `Input` does, and `Select.Content`
+ * assembles the portal, positioner, popup, list and scroll arrows so a caller
+ * writes rows rather than plumbing.
+ */
+export const Select = {
+  Root: BaseSelect.Root,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Content: SelectContent,
+  Item: SelectItem,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel,
+  Separator: SelectSeparator,
+};
diff --git a/packages/ui/src/field/switch.tsx b/packages/ui/src/field/switch.tsx
new file mode 100644
index 000000000..3b115def7
--- /dev/null
+++ b/packages/ui/src/field/switch.tsx
@@ -0,0 +1,83 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { corner, duration, ease, radius } from '../tokens/scales.stylex';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+type BaseProps = ComponentProps<typeof BaseSwitch.Root>;
+
+export interface SwitchProps extends Omit<
+  BaseProps,
+  'className' | 'render' | 'nativeButton' | 'style'
+> {
+  className?: string;
+}
+
+/** The distance the thumb travels: the track less the thumb and both insets. */
+const TRAVEL = `calc(${field.switchWidth} - ${field.switchThumbSize} - 2 * ${field.switchInset})`;
+
+const styles = stylex.create({
+  track: {
+    width: field.switchWidth,
+    height: field.switchHeight,
+    borderRadius: radius.full,
+    // The well's squircle would make this a rounded rectangle; a track is a pill.
+    cornerShape: corner.round,
+    justifyContent: 'flex-start',
+    padding: field.switchInset,
+  },
+  thumb: {
+    display: 'block',
+    width: field.switchThumbSize,
+    height: field.switchThumbSize,
+    borderRadius: radius.full,
+    backgroundColor: field.thumb,
+    boxShadow: field.thumbShadow,
+    transform: 'translateX(0)',
+    transitionProperty: 'transform',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  thumbChecked: { transform: `translateX(${TRAVEL})` },
+});
+
+/**
+ * A switch in the field family: the well as a track, ink once it is on, with a
+ * raised thumb that reads against both. It renders a real `<button>` for the
+ * same reasons a Checkbox does.
+ */
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
+  { className, ...rest },
+  ref
+) {
+  const ariaInvalid = rest['aria-invalid'];
+  return (
+    <BaseSwitch.Root
+      ref={ref}
+      nativeButton
+      render={<button type="button" />}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            well.box,
+            styles.track,
+            state.checked && well.checked,
+            isInvalid(state.valid, ariaInvalid) &&
+              (state.checked ? well.checkedInvalid : well.invalid)
+          ).className,
+          className
+        )
+      }
+    >
+      <BaseSwitch.Thumb
+        className={(state) =>
+          stylex.props(styles.thumb, state.checked && styles.thumbChecked).className
+        }
+      />
+    </BaseSwitch.Root>
+  );
+});
diff --git a/packages/ui/src/field/textarea.tsx b/packages/ui/src/field/textarea.tsx
new file mode 100644
index 000000000..f6089a2c2
--- /dev/null
+++ b/packages/ui/src/field/textarea.tsx
@@ -0,0 +1,73 @@
+import { Input as BaseInput } from '@base-ui/react/input';
+import * as stylex from '@stylexjs/stylex';
+import {
+  forwardRef,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactElement,
+  type Ref,
+} from 'react';
+import { appendClassName } from '../internal/class-name';
+import { text } from '../tokens/scales.stylex';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+export type TextareaResize = 'vertical' | 'none';
+
+type BaseProps = ComponentProps<typeof BaseInput>;
+
+export interface TextareaProps extends Omit<
+  ComponentProps<'textarea'>,
+  'className' | 'style' | 'color' | 'ref'
+> {
+  /** Whether the person can drag the control taller. */
+  resize?: TextareaResize;
+  render?: ReactElement;
+  className?: string;
+  /** Layout a caller owns, such as a surface's own font size. Not visual identity. */
+  style?: CSSProperties;
+}
+
+const styles = stylex.create({
+  textarea: {
+    display: 'block',
+    paddingBlock: field.paddingBlock,
+    paddingInline: field.paddingXMedium,
+    borderRadius: field.radiusMedium,
+    fontSize: field.text,
+    lineHeight: text.subheadlineLeading,
+    minHeight: field.textareaMinHeight,
+  },
+  resizeVertical: { resize: 'vertical' },
+  resizeNone: { resize: 'none' },
+});
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { resize = 'vertical', className, render, ...rest },
+  ref
+) {
+  // Base UI has no textarea part; `Input` is `Field.Control`, which renders
+  // whatever `render` gives it and keeps the field wiring. The cast carries the
+  // textarea element props Base UI types as input props but forwards untouched.
+  const ariaInvalid = rest['aria-invalid'];
+  const props = rest as unknown as Omit<BaseProps, 'className' | 'render' | 'ref'>;
+  return (
+    <BaseInput
+      ref={ref as Ref<HTMLElement>}
+      render={render ?? <textarea />}
+      {...props}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            well.base,
+            styles.textarea,
+            resize === 'none' ? styles.resizeNone : styles.resizeVertical,
+            isInvalid(state.valid, ariaInvalid) && well.invalid
+          ).className,
+          className
+        )
+      }
+    />
+  );
+});
diff --git a/packages/ui/src/field/well.ts b/packages/ui/src/field/well.ts
new file mode 100644
index 000000000..5ff045939
--- /dev/null
+++ b/packages/ui/src/field/well.ts
@@ -0,0 +1,151 @@
+import * as stylex from '@stylexjs/stylex';
+import { corner, duration, ease, text } from '../tokens/scales.stylex';
+import { field } from './field.tokens.stylex';
+
+/**
+ * The resting and ringed appearance every control in the field family shares.
+ * It lives here rather than on one control so Input, Textarea, Checkbox, Radio,
+ * Switch and the controls that migrate next cannot each grow their own focus,
+ * invalid and disabled treatment.
+ *
+ * The ring rides in the same box-shadow as the control's own edge: 2px, tight
+ * to the control, no offset, no glow. It is not an `outline` because the app
+ * shell resets every outline with `!important`, which no layer order can beat.
+ * CSS cannot append to a box-shadow list, so a control that changes its edge —
+ * a checked box swaps the well for the ink highlight — restates the ring with
+ * it, the way each Button variant does.
+ */
+const RING = `0 0 0 ${field.ringWidth} ${field.ring}`;
+const INVALID_RING = `0 0 0 ${field.ringWidth} ${field.invalidRing}`;
+
+export const well = stylex.create({
+  base: {
+    boxSizing: 'border-box',
+    width: '100%',
+    minWidth: 0,
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: field.background,
+    // A text control is always focus-visible, so this covers pointer focus too.
+    boxShadow: { default: field.well, ':focus-visible': `${field.well}, ${RING}` },
+    color: field.value,
+    fontFamily: 'inherit',
+    // Controls are 13 at weight 500 with controlTracking; the size step sets
+    // the size, this sets the weight and tracking for every control here.
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    cornerShape: corner.shape,
+    outlineStyle: 'none',
+    opacity: { default: 1, ':disabled': field.disabledOpacity },
+    cursor: { default: 'auto', ':disabled': 'default' },
+    transitionProperty: 'box-shadow, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+    '::placeholder': { color: field.placeholder, opacity: 1 },
+  },
+  // StyleX keys a conditional value per condition, so the focused case is
+  // restated here; otherwise an invalid control would flip back to the accent
+  // ring the moment it takes focus.
+  invalid: {
+    boxShadow: {
+      default: `${field.well}, ${INVALID_RING}`,
+      ':focus-visible': `${field.well}, ${INVALID_RING}`,
+    },
+  },
+  /**
+   * A well that wraps its own control rather than being one: the Combobox shell
+   * holding an input beside a chevron. The ring follows `:focus-within`, since
+   * the element that takes focus is the input inside it, not the shell; a text
+   * control is always focus-visible, so this covers pointer focus too. Disabled
+   * cannot be `:disabled` on a `<div>`, so it is read from Base UI's state and
+   * `dimmed` is applied instead.
+   */
+  shell: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    width: '100%',
+    minWidth: 0,
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: field.background,
+    boxShadow: { default: field.well, ':focus-within': `${field.well}, ${RING}` },
+    color: field.value,
+    cornerShape: corner.shape,
+    outlineStyle: 'none',
+    cursor: 'text',
+    transitionProperty: 'box-shadow, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  shellInvalid: {
+    boxShadow: {
+      default: `${field.well}, ${INVALID_RING}`,
+      ':focus-within': `${field.well}, ${INVALID_RING}`,
+    },
+  },
+  /** The control inside a shell: the shell already is the well. */
+  bare: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    outlineStyle: 'none',
+    cursor: { default: 'auto', ':disabled': 'default' },
+    '::placeholder': { color: field.placeholder, opacity: 1 },
+  },
+  /** The family's one disabled value, for a part `:disabled` cannot reach. */
+  dimmed: { opacity: field.disabledOpacity },
+  /**
+   * The same well as a box rather than a line of text: the tick box of a
+   * Checkbox and a Radio, and the track of a Switch. It takes no width, no font
+   * and no placeholder, and it carries the mark colour so an indicator inside
+   * it needs no colour of its own. These controls render a real `<button>`, so
+   * `:disabled` and `:focus-visible` reach them the way they reach an `<input>`.
+   */
+  box: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: field.background,
+    boxShadow: { default: field.well, ':focus-visible': `${field.well}, ${RING}` },
+    color: field.checkedMark,
+    cornerShape: corner.shape,
+    outlineStyle: 'none',
+    opacity: { default: 1, ':disabled': field.disabledOpacity },
+    cursor: { default: 'pointer', ':disabled': 'default' },
+    transitionProperty: 'background-color, box-shadow, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  /** Stored state: the ink fill and its top highlight in place of the well. */
+  checked: {
+    backgroundColor: field.checkedFill,
+    boxShadow: { default: field.checkedEdge, ':focus-visible': `${field.checkedEdge}, ${RING}` },
+  },
+  /** The invalid ring on that ink edge, at rest and while focused. */
+  checkedInvalid: {
+    boxShadow: {
+      default: `${field.checkedEdge}, ${INVALID_RING}`,
+      ':focus-visible': `${field.checkedEdge}, ${INVALID_RING}`,
+    },
+  },
+});
diff --git a/packages/ui/src/gallery/gallery.tsx b/packages/ui/src/gallery/gallery.tsx
new file mode 100644
index 000000000..f6579e0c3
--- /dev/null
+++ b/packages/ui/src/gallery/gallery.tsx
@@ -0,0 +1,4521 @@
+import * as stylex from '@stylexjs/stylex';
+import {
+  Fragment,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+} from 'react';
+import { Avatar, type AvatarSize } from '../avatar/avatar';
+import { avatar as avatarTokens } from '../avatar/avatar.tokens.stylex';
+import { Badge, type BadgeTone } from '../badge/badge';
+import { badge as badgeTokens } from '../badge/badge.tokens.stylex';
+import { Button } from '../button/button';
+import { button } from '../button/button.tokens.stylex';
+import { Card } from '../card/card';
+import { card as cardTokens } from '../card/card.tokens.stylex';
+import { Accordion } from '../disclosure/accordion';
+import { Alert } from '../feedback/alert';
+import { feedback as feedbackTokens } from '../feedback/feedback.tokens.stylex';
+import { Progress } from '../feedback/progress';
+import { Skeleton } from '../feedback/skeleton';
+import { Spinner } from '../feedback/spinner';
+import { feedbackSurface } from '../feedback/surface';
+import { Toast } from '../feedback/toast';
+import { TONE_GLYPHS, TONE_MARKS, TOAST_TONES, type FeedbackTone } from '../feedback/tone';
+import { Collapsible } from '../disclosure/collapsible';
+import { disclosure as disclosureTokens } from '../disclosure/disclosure.tokens.stylex';
+import { Tabs, type TabsSize } from '../disclosure/tabs';
+import { Checkbox } from '../field/checkbox';
+import { AlertDialog } from '../dialog/alert-dialog';
+import { Dialog } from '../dialog/dialog';
+import { dialog as dialogTokens } from '../dialog/dialog.tokens.stylex';
+import { Drawer, type DrawerSide } from '../drawer/drawer';
+import { modal } from '../dialog/surface';
+import { Combobox } from '../field/combobox';
+import { Field } from '../field/field';
+import { field } from '../field/field.tokens.stylex';
+import {
+  ChevronDownGlyph,
+  ChevronRightGlyph,
+  CrossGlyph as CloseGlyph,
+  DotGlyph,
+  TickGlyph,
+} from '../internal/glyphs';
+import { Kbd, KbdGroup } from '../kbd/kbd';
+import { kbd as kbdTokens, kbdOnInvertedTheme } from '../kbd/kbd.tokens.stylex';
+import { ContextMenu } from '../menu/context-menu';
+import { Menu } from '../menu/menu';
+import { Menubar } from '../menu/menubar';
+import { Input } from '../field/input';
+import { Radio, RadioGroup } from '../field/radio';
+import { Select } from '../field/select';
+import { Separator } from '../separator/separator';
+import { Switch } from '../field/switch';
+import { Textarea } from '../field/textarea';
+import { Toggle, type ToggleSize } from '../toggle/toggle';
+import { ToggleGroup } from '../toggle/toggle-group';
+import { toggle as toggleTokens } from '../toggle/toggle.tokens.stylex';
+import { Toolbar } from '../toggle/toolbar';
+import { Pagination } from '../table/pagination';
+import { Popover } from '../popover/popover';
+import { popup } from '../popup/popup.tokens.stylex';
+import { surface } from '../popup/surface';
+import { Table, type TableColumn, type TableSize, type TableSorting } from '../table/table';
+import { table as tableTokens } from '../table/table.tokens.stylex';
+import { chip } from '../tooltip/chip';
+import { Tooltip } from '../tooltip/tooltip';
+import { tooltip as tooltipTokens } from '../tooltip/tooltip.tokens.stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { control, corner, duration, ease, radius, space, text, z } from '../tokens/scales.stylex';
+import {
+  Board,
+  BoardHeader,
+  Cluster,
+  Grid,
+  LegendKey,
+  Note,
+  PaletteSplit,
+  Row,
+  Rows,
+  Sample,
+  Section,
+  Swatch,
+  dyn,
+  useMeasured,
+  type GalleryPalettes,
+} from './parts';
+
+export type { GalleryPalettes };
+
+export interface UiGalleryProps {
+  /** Which palettes every sample is rendered in. Defaults to both. */
+  palettes?: GalleryPalettes;
+}
+
+const styles = stylex.create({
+  /**
+   * The ground the ladder stands on, and it has to be the page.
+   *
+   * It was the region rung, and a rung can only be shown against a different
+   * one: in the dark palette `secondaryBackground` and `elevatedBackground` are
+   * both `rgb(22,22,22)`, so the `card` and `modal` chips were the same fill as
+   * the stage under them and a ladder could not show its own card step. On the
+   * page rung exactly one chip matches its ground — `page` — and that one is
+   * supposed to: the page rung *is* the page. A card that cannot be told from
+   * what it sits on is a lie; a page that cannot be is the truth.
+   */
+  stage: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'flex-end',
+    gap: space[3],
+    boxSizing: 'border-box',
+    padding: space[4],
+    backgroundColor: colors.background,
+    borderRadius: radius.large,
+    cornerShape: corner.shape,
+  },
+  rung: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: space[1],
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    minWidth: '148px',
+    padding: space[3],
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+  },
+  rungName: {
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    fontWeight: 500,
+  },
+  rungUse: {
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    color: colors.secondaryLabel,
+  },
+  well: { backgroundColor: colors.wellBackground, boxShadow: shadow.inset },
+  page: { backgroundColor: colors.background },
+  region: { backgroundColor: colors.secondaryBackground },
+  card: { backgroundColor: colors.elevatedBackground, boxShadow: shadow.card },
+  floating: { backgroundColor: colors.raisedBackground, boxShadow: shadow.popover },
+  modal: { backgroundColor: colors.elevatedBackground, boxShadow: shadow.large },
+  textSample: { display: 'flex', flexDirection: 'column', gap: space[1] },
+  separatorRow: { display: 'flex', flexDirection: 'column', gap: 0 },
+  separatorText: {
+    paddingBlock: space[2],
+    fontSize: text.subheadlineSize,
+    lineHeight: text.subheadlineLeading,
+  },
+  hoverRow: {
+    paddingBlock: space[2],
+    paddingInline: space[3],
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    fontSize: text.subheadlineSize,
+    lineHeight: text.subheadlineLeading,
+  },
+  hoverFill: { backgroundColor: colors.hoverFill },
+  selectedFill: { backgroundColor: colors.selectedFill },
+  overlaySample: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '72px',
+    backgroundColor: colors.overlay,
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    // The scrim is dark in both palettes, so its own label is not a token.
+    color: 'hsl(0 0% 100% / 0.92)',
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+  },
+  ring: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: control.medium,
+    paddingInline: space[3],
+    backgroundColor: colors.wellBackground,
+    boxShadow: shadow.inset,
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    outlineStyle: 'solid',
+    outlineWidth: '2px',
+    outlineOffset: 0,
+    fontSize: text.subheadlineSize,
+    lineHeight: 1,
+  },
+  ringAccent: { outlineColor: colors.accent },
+  ringDestructive: { outlineColor: colors.destructive },
+  shadowChip: {
+    height: '64px',
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+  },
+  radiusChip: {
+    height: '64px',
+    backgroundColor: colors.wellBackground,
+    boxShadow: shadow.inset,
+  },
+  controlBar: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    minWidth: '96px',
+    paddingInline: space[3],
+    backgroundColor: colors.wellBackground,
+    boxShadow: shadow.inset,
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    fontSize: text.footnoteSize,
+    color: colors.secondaryLabel,
+  },
+  spaceBar: {
+    height: '24px',
+    backgroundColor: colors.gray4,
+    borderRadius: radius.mini,
+    cornerShape: corner.shape,
+  },
+  typeSample: {
+    margin: 0,
+    letterSpacing: text.controlTracking,
+  },
+  motionChip: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '56px',
+    backgroundColor: colors.raisedBackground,
+    boxShadow: shadow.raised,
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    fontSize: text.captionSize,
+    color: colors.secondaryLabel,
+    transitionProperty: 'transform, background-color',
+    transitionTimingFunction: ease.standard,
+    transform: { default: 'none', ':hover': 'translateY(-4px)' },
+  },
+  constList: {
+    display: 'grid',
+    gap: space[2],
+    gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+    margin: 0,
+  },
+  constRow: { display: 'flex', gap: space[2], alignItems: 'baseline' },
+  constName: {
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    fontWeight: 500,
+  },
+  constValue: {
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    color: colors.tertiaryLabel,
+  },
+  matrix: {
+    display: 'grid',
+    gap: space[3],
+    gridTemplateColumns: 'auto 1fr',
+    alignItems: 'center',
+  },
+  fieldSlot: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: '200px',
+    maxWidth: '340px',
+  },
+  readout: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    color: colors.tertiaryLabel,
+    overflowWrap: 'anywhere',
+  },
+  // A board cannot show an open popup without covering the samples under it, so
+  // the list is drawn once on a non-interactive stand-in. It composes the very
+  // rules Select and Combobox apply — `popup/surface.ts` — rather than copying
+  // them, so the board cannot report a list this package no longer draws.
+  popupReplica: {
+    position: 'static',
+    width: '260px',
+    maxHeight: 'none',
+    minWidth: 0,
+    zIndex: 'auto',
+  },
+  popupList: { overflowY: 'visible' },
+  // The menu stand-in keeps `popup.menuWidth` rather than neutralising it the
+  // way the list stand-in does: the width floor is the one declaration a menu
+  // states for itself, so the board has to be able to read it back.
+  menuReplica: { position: 'static', maxHeight: 'none', zIndex: 'auto' },
+  // The far end of the rise is invisible by definition, so it is a probe rather
+  // than a sample: it carries the real class and reports its transform into the
+  // metrics list instead of leaving a blank gap on the board.
+  riseProbe: { position: 'absolute', width: '1px', height: '1px', minWidth: 0, padding: 0 },
+  replicaCaption: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: space[2],
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: '220px',
+  },
+  scrollArrowGlyph: { display: 'block', width: popup.indicatorSize, height: popup.indicatorSize },
+  /** Something to right-click: a context menu attaches to what is already there. */
+  contextArea: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    minWidth: '220px',
+    height: control.large,
+    paddingInline: space[3],
+    backgroundColor: colors.secondaryBackground,
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    color: colors.secondaryLabel,
+    fontSize: text.footnoteSize,
+    userSelect: 'none',
+  },
+  // A row is picked, not pressed, so the board shows the two fills side by side
+  // rather than asking the reader to hover one.
+  replicaRow: { cursor: 'default' },
+  // A popover stand-in, for the same reason the list has one: the real popover
+  // above it covers whatever the reader was comparing it against. It keeps every
+  // declaration the popover states for itself — the panel padding and gap are
+  // the two it replaces on the shared surface — and only stops floating.
+  popoverReplica: { position: 'static', width: '260px', maxHeight: 'none', zIndex: 'auto' },
+  // The dialog stand-in drops what makes the panel own the window — the fixed
+  // position, the centring transform and the 512px width, which would overflow
+  // this board — and keeps the padding, the radius, the gap and the type, which
+  // are what a reader is here to see. `dialog.width`, `dialog.drawerSize` and
+  // `dialog.inset` are reported by probes instead, because a panel scaled to fit
+  // a board can no longer report its own width.
+  /**
+   * What a modal panel is shown standing on: the page, with the overlay over
+   * it. The rung states three things at once — the elevated background, the
+   * large shadow, and the overlay — and the stand-in was painting two of them,
+   * on the board's own panel, which is the card rung. In the dark palette that
+   * surface is the panel's own `rgb(22,22,22)`, so the third was not merely
+   * missing: the stand-in had no background step either.
+   *
+   * One element paints both, because `dialogReplica` needs this box to stay the
+   * containing block for the cross and a second positioned layer would take it:
+   * `background-image` puts the overlay over the page colour in place.
+   */
+  modalStage: {
+    boxSizing: 'border-box',
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: '260px',
+    padding: space[4],
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    backgroundColor: colors.background,
+    backgroundImage: `linear-gradient(${colors.overlay}, ${colors.overlay})`,
+  },
+  dialogReplica: {
+    // `relative` rather than `static`: the cross is pinned to the panel's own
+    // padding box, so the stand-in has to stay the containing block for it.
+    // A positioned box also starts honouring the panel's own insets, and the
+    // panel centres itself with `inset-inline-start: 50%`, so all four are
+    // cleared here or the stand-in sits half a column to the right of itself.
+    position: 'relative',
+    insetInlineStart: 'auto',
+    insetInlineEnd: 'auto',
+    insetBlockStart: 'auto',
+    insetBlockEnd: 'auto',
+    // Not `width: 100%`: the stand-in is a flex item beside a legend and a
+    // caption, and a percentage width resolves against the whole row rather
+    // than the room left in it, so the panel ran off the end of the board. A
+    // `100%` flex-basis in a wrapping row means "a line of your own", which is
+    // what a 512px panel needs in a 340px column.
+    width: 'auto',
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '100%',
+    minWidth: 0,
+    maxWidth: 'none',
+    maxHeight: 'none',
+    transform: 'none',
+    zIndex: 'auto',
+  },
+  // The overlay, at its real colour, over something to see it against.
+  overlaySwatch: {
+    position: 'relative',
+    boxSizing: 'border-box',
+    height: '46px',
+    borderRadius: radius.small,
+    cornerShape: corner.shape,
+    backgroundColor: colors.background,
+    overflow: 'hidden',
+  },
+  overlayFill: { position: 'absolute', inset: 0, backgroundColor: dialogTokens.overlay },
+  // A dimension a stand-in cannot state — the panel is 512px and this board's
+  // columns are 340 — is reported by a probe carrying the token, the way the
+  // rise is. It is out of flow and hidden: a probe laid out inside the metrics
+  // row is a flex item, so it reports the width the row let it have rather than
+  // the width the token declares. Measured in flow, `dialog.width` read back as
+  // 167.5px.
+  /** A disclosure takes the width of what it is in; the board gives it one. */
+  disclosureBlock: { flexGrow: 1, flexShrink: 1, minWidth: '260px' },
+  /** The toast stand-in is out of its viewport, so it takes no fixed width. */
+  toastReplica: { position: 'static', maxWidth: '100%' },
+  narrowTable: { width: '320px', maxWidth: '100%' },
+  skeletonBlock: { display: 'flex', alignItems: 'center', gap: space[3], flexGrow: 1 },
+  /**
+   * The button an interactive card is inside. A Card marks itself pressable and
+   * does not render the control, so the board states the composition it expects
+   * rather than a picture of it: the button is the caller's, stripped to
+   * nothing, and the card is what a person sees.
+   */
+  cardButton: {
+    display: 'block',
+    width: '100%',
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    font: 'inherit',
+    color: 'inherit',
+    textAlign: 'start',
+    cursor: 'pointer',
+  },
+  /**
+   * The page rung, for a sample that *is* a rung.
+   *
+   * The board's own palette panel is the card rung — `elevatedBackground` under
+   * `shadow.card` — so a Card dropped straight into it is the same fill twice
+   * under two shadows, which is the nesting the rules forbid by name. In the
+   * dark palette that reads as a card with no background at all: both surfaces
+   * are `rgb(22,22,22)` and the only thing left to separate them is a shadow
+   * already spent on the panel. A rung can only be shown on a different one, so
+   * these samples sit on the page.
+   */
+  pageRung: {
+    boxSizing: 'border-box',
+    padding: space[4],
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    backgroundColor: colors.background,
+  },
+  /** A badge is on no rung, so the board puts the same four on three of them. */
+  badgeRung: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: space[2],
+    flexWrap: 'wrap',
+    boxSizing: 'border-box',
+    padding: space[2],
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+  },
+  /**
+   * How little room a badge may be given, so the ellipsis is on the board.
+   *
+   * The clamp goes on the badge itself and not on a box around it: a badge
+   * neither grows nor shrinks, so inside a flex row it keeps its content's
+   * width and overflows a narrow parent rather than ellipsing inside it. A
+   * surface that has to cap one caps the badge.
+   */
+  badgeClamp: { maxWidth: '96px' },
+  /** A row of controls with a line down it: the separator's other orientation. */
+  separatorToolbar: { display: 'flex', alignItems: 'center', gap: space[2] },
+  skeletonLines: { display: 'flex', flexDirection: 'column', gap: space[2], flexGrow: 1 },
+  collapsibleBody: {
+    margin: 0,
+    paddingBlockStart: space[2],
+    fontSize: text.bodySize,
+    lineHeight: text.bodyLeading,
+    color: colors.secondaryLabel,
+  },
+  widthProbe: {
+    position: 'absolute',
+    visibility: 'hidden',
+    height: '1px',
+    pointerEvents: 'none',
+  },
+  // The tooltip stand-in: the chip alone, with nothing to hover.
+  tooltipReplica: { position: 'static', zIndex: 'auto', pointerEvents: 'auto' },
+  /** A chip with something beside the words: the row that shows a cap on one. */
+  tooltipReplicaRow: { display: 'inline-flex', alignItems: 'center', gap: space[1.5] },
+  /** A caller's glyph states 100% of the box the fallback gave it. */
+  avatarGlyph: { display: 'block', width: '100%', height: '100%' },
+  // Something to point at, so the real tooltips above have an anchor that is not
+  // a control with opinions of its own.
+  tooltipAnchor: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: control.small,
+    paddingInline: space[2],
+    backgroundColor: colors.secondaryBackground,
+    borderRadius: radius.small,
+    cornerShape: corner.shape,
+    color: colors.secondaryLabel,
+    fontSize: text.footnoteSize,
+    userSelect: 'none',
+  },
+  // A dialog's body, so the stand-in shows what the panel's gap separates.
+  dialogBody: {
+    margin: 0,
+    color: colors.secondaryLabel,
+    fontSize: text.bodySize,
+    lineHeight: text.bodyLeading,
+  },
+  // The cross, as the real panel draws it: a ghost icon button in the corner.
+  replicaCloseGlyph: { display: 'block', width: '16px', height: '16px' },
+  // A board cannot hold focus while it is read, so each focus ring is drawn once
+  // on a non-interactive stand-in built from the same tokens the control uses.
+  buttonFocusReplica: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    height: control.medium,
+    paddingInline: '12px',
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+    backgroundColor: button.secondaryBackground,
+    boxShadow: `${button.secondaryShadow}, 0 0 0 ${button.ringWidth} ${button.ring}`,
+    color: colors.label,
+    fontSize: text.subheadlineSize,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+  },
+  focusReplica: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: field.heightMedium,
+    paddingInline: field.paddingXMedium,
+    backgroundColor: field.background,
+    boxShadow: `${field.well}, 0 0 0 ${field.ringWidth} ${field.ring}`,
+    borderRadius: field.radiusMedium,
+    cornerShape: corner.shape,
+    color: field.value,
+    fontSize: field.text,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+  },
+});
+
+const SURFACES = [
+  { name: 'background', value: colors.background, note: 'app ground' },
+  { name: 'elevatedBackground', value: colors.elevatedBackground, note: 'card, panel, dialog' },
+  { name: 'raisedBackground', value: colors.raisedBackground, note: 'secondary button, menu' },
+  { name: 'secondaryBackground', value: colors.secondaryBackground, note: 'sidebar, footer band' },
+  { name: 'wellBackground', value: colors.wellBackground, note: 'input, track, switch off' },
+];
+
+const CONTENT_COLORS = [
+  { name: 'label', value: colors.label, note: 'the thing' },
+  { name: 'secondaryLabel', value: colors.secondaryLabel, note: 'about the thing' },
+  { name: 'tertiaryLabel', value: colors.tertiaryLabel, note: 'placeholder, hint, icon at rest' },
+];
+
+const FILLS = [
+  { name: 'hoverFill', value: colors.hoverFill, note: 'pointer over a row' },
+  { name: 'selectedFill', value: colors.selectedFill, note: 'current row' },
+  { name: 'separator', value: colors.separator, note: 'between rows only' },
+  { name: 'overlay', value: colors.overlay, note: 'dialog and drawer backdrop' },
+];
+
+const ROLE_COLORS = [
+  { name: 'accent', value: colors.accent, note: 'focus, link, live state' },
+  { name: 'onAccent', value: colors.onAccent, note: 'content on accent' },
+  { name: 'destructive', value: colors.destructive, note: 'destructive fill, invalid ring' },
+  { name: 'onDestructive', value: colors.onDestructive, note: 'content on destructive' },
+  { name: 'success', value: colors.success, note: 'an outcome that worked' },
+  { name: 'warning', value: colors.warning, note: 'one that still may not' },
+];
+
+const GRAYS = [
+  { name: 'gray', value: colors.gray },
+  { name: 'gray2', value: colors.gray2 },
+  { name: 'gray3', value: colors.gray3 },
+  { name: 'gray4', value: colors.gray4 },
+  { name: 'gray5', value: colors.gray5 },
+  { name: 'gray6', value: colors.gray6 },
+];
+
+const RUNGS = [
+  { name: 'well', style: styles.well, use: 'input, track, selected item' },
+  { name: 'page', style: styles.page, use: 'app ground' },
+  { name: 'region', style: styles.region, use: 'sidebar, footer band' },
+  { name: 'card', style: styles.card, use: 'card, panel, composer' },
+  { name: 'floating', style: styles.floating, use: 'menu, popover, select list' },
+  { name: 'modal', style: styles.modal, use: 'dialog, alert dialog, drawer' },
+];
+
+const SHADOWS = [
+  {
+    name: 'shadow.inset',
+    box: shadow.inset,
+    fill: colors.wellBackground,
+    ink: false,
+    note: 'wells',
+  },
+  {
+    name: 'shadow.raised',
+    box: shadow.raised,
+    fill: colors.raisedBackground,
+    ink: false,
+    note: 'pressable',
+  },
+  {
+    name: 'shadow.inkEdge',
+    box: shadow.inkEdge,
+    fill: colors.label,
+    ink: true,
+    note: 'top highlight on ink fills',
+  },
+  {
+    name: 'shadow.card',
+    box: shadow.card,
+    fill: colors.elevatedBackground,
+    ink: false,
+    note: 'cards',
+  },
+  {
+    name: 'shadow.medium',
+    box: shadow.medium,
+    fill: colors.elevatedBackground,
+    ink: false,
+    note: 'tooltip',
+  },
+  {
+    name: 'shadow.popover',
+    box: shadow.popover,
+    fill: colors.raisedBackground,
+    ink: false,
+    note: 'menus and popovers',
+  },
+  {
+    name: 'shadow.large',
+    box: shadow.large,
+    fill: colors.elevatedBackground,
+    ink: false,
+    note: 'dialogs and drawers',
+  },
+];
+
+const RADII = [
+  { name: 'radius.mini', value: radius.mini, shape: corner.shape, note: '16px things' },
+  {
+    name: 'radius.small',
+    value: radius.small,
+    shape: corner.shape,
+    note: '28px controls, tooltips',
+  },
+  {
+    name: 'radius.medium',
+    value: radius.medium,
+    shape: corner.shape,
+    note: '32 and 36px controls',
+  },
+  { name: 'radius.large', value: radius.large, shape: corner.shape, note: 'surfaces' },
+  // A squircle at this radius is a rounded rectangle, so a pill takes the round
+  // shape and the board shows the two side by side rather than claiming one.
+  {
+    name: 'radius.full',
+    value: radius.full,
+    shape: corner.round,
+    note: 'pills; the one round shape',
+  },
+];
+
+const CONTROL_SIZES = [
+  { name: 'control.small', value: control.small, size: 'small' as const },
+  { name: 'control.medium', value: control.medium, size: 'medium' as const },
+  { name: 'control.large', value: control.large, size: 'large' as const },
+];
+
+const TYPE_SCALE = [
+  { name: 'caption', size: text.captionSize, leading: text.captionLeading, note: 'measured value' },
+  { name: 'footnote', size: text.footnoteSize, leading: text.footnoteLeading, note: 'field label' },
+  {
+    name: 'subheadline',
+    size: text.subheadlineSize,
+    leading: text.subheadlineLeading,
+    note: 'controls, weight 500',
+  },
+  { name: 'body', size: text.bodySize, leading: text.bodyLeading, note: 'prose' },
+  {
+    name: 'headline',
+    size: text.headlineSize,
+    leading: text.headlineLeading,
+    note: 'dialog title',
+  },
+  { name: 'title', size: text.titleSize, leading: text.titleLeading, note: 'a full page' },
+];
+
+const SPACES = [
+  { name: 'space.1', value: space[1] },
+  { name: 'space.1.5', value: space[1.5] },
+  { name: 'space.2', value: space[2] },
+  { name: 'space.3', value: space[3] },
+  { name: 'space.4', value: space[4] },
+  { name: 'space.6', value: space[6] },
+  { name: 'space.8', value: space[8] },
+];
+
+const CONSTS = [
+  { name: 'corner.shape', value: corner.shape },
+  { name: 'ease.standard', value: ease.standard },
+  { name: 'z.dialogBackdrop', value: z.dialogBackdrop },
+  { name: 'z.dialog', value: z.dialog },
+  { name: 'z.popover', value: z.popover },
+  { name: 'z.tooltip', value: z.tooltip },
+  { name: 'z.toast', value: z.toast },
+];
+
+const FIELD_COLORS = [
+  { name: 'field.background', value: field.background, note: 'the control is a well' },
+  { name: 'field.value', value: field.value, note: 'what the person typed' },
+  { name: 'field.label', value: field.label, note: 'the field label' },
+  { name: 'field.placeholder', value: field.placeholder, note: 'the empty prompt' },
+  { name: 'field.hint', value: field.hint, note: 'help under the control' },
+  { name: 'field.icon', value: field.icon, note: 'the chevron on a trigger' },
+  { name: 'field.error', value: field.error, note: 'the error message' },
+  { name: 'field.ring', value: field.ring, note: 'focus' },
+  { name: 'field.invalidRing', value: field.invalidRing, note: 'invalid' },
+];
+
+const POPUP_COLORS = [
+  { name: 'popup.background', value: popup.background, note: 'the floating rung' },
+  { name: 'popup.label', value: popup.label, note: 'a row' },
+  { name: 'popup.indicator', value: popup.indicator, note: 'the tick on the current row' },
+  { name: 'popup.highlight', value: popup.highlight, note: 'where the keyboard or pointer is' },
+  { name: 'popup.selected', value: popup.selected, note: 'the row that holds the value' },
+  { name: 'popup.groupLabel', value: popup.groupLabel, note: 'a group heading' },
+  { name: 'popup.separator', value: popup.separator, note: 'between groups' },
+  { name: 'popup.hint', value: popup.hint, note: 'no matches, scroll arrows, a row icon' },
+  { name: 'popup.destructive', value: popup.destructive, note: 'a command that destroys' },
+  {
+    name: 'popup.destructiveHighlight',
+    value: popup.destructiveHighlight,
+    note: 'the keyboard on one',
+  },
+];
+
+const DIALOG_COLORS = [
+  { name: 'dialog.background', value: dialogTokens.background, note: 'the modal rung' },
+  { name: 'dialog.title', value: dialogTokens.title, note: 'the heading, and the panel text' },
+  { name: 'dialog.description', value: dialogTokens.description, note: 'the sentence under it' },
+];
+
+const TOOLTIP_COLORS = [
+  { name: 'tooltip.background', value: tooltipTokens.background, note: 'inverted: the label ink' },
+  { name: 'tooltip.label', value: tooltipTokens.label, note: 'the page background, as ink' },
+];
+
+const DRAWER_SIDES: DrawerSide[] = ['top', 'end', 'bottom', 'start'];
+
+const STRIP_COLORS = [
+  {
+    name: 'disclosure.trackBackground',
+    value: disclosureTokens.trackBackground,
+    note: 'the well the strip sits in',
+  },
+  {
+    name: 'disclosure.indicator',
+    value: disclosureTokens.indicator,
+    note: 'the one tab raised out of it',
+  },
+  { name: 'disclosure.tabLabel', value: disclosureTokens.tabLabel, note: 'a tab you are not on' },
+  {
+    name: 'disclosure.tabActiveLabel',
+    value: disclosureTokens.tabActiveLabel,
+    note: 'the one you are, and every hover',
+  },
+  { name: 'disclosure.ring', value: disclosureTokens.ring, note: 'where the keyboard is' },
+];
+
+const STACK_COLORS = [
+  { name: 'disclosure.label', value: disclosureTokens.label, note: "a row's own text" },
+  {
+    name: 'disclosure.chevron',
+    value: disclosureTokens.chevron,
+    note: 'the hint that there is more under it',
+  },
+  {
+    name: 'disclosure.separator',
+    value: disclosureTokens.separator,
+    note: 'the line to the next row, and nothing else',
+  },
+];
+
+const FEEDBACK_TONES: FeedbackTone[] = ['neutral', 'success', 'warning', 'danger'];
+
+const MESSAGE_COLORS = [
+  {
+    name: 'feedback.noticeBackground',
+    value: feedbackTokens.noticeBackground,
+    note: 'an Alert: the card rung',
+  },
+  {
+    name: 'feedback.toastBackground',
+    value: feedbackTokens.toastBackground,
+    note: 'a Toast: the floating rung',
+  },
+  { name: 'feedback.title', value: feedbackTokens.title, note: 'what the message is' },
+  {
+    name: 'feedback.description',
+    value: feedbackTokens.description,
+    note: 'the sentence under it',
+  },
+  { name: 'feedback.mark', value: feedbackTokens.mark, note: 'a neutral mark' },
+  { name: 'feedback.success', value: feedbackTokens.success, note: 'it worked' },
+  { name: 'feedback.warning', value: feedbackTokens.warning, note: 'it still may not' },
+  { name: 'feedback.danger', value: feedbackTokens.danger, note: 'it did not' },
+];
+
+const WAIT_COLORS = [
+  {
+    name: 'feedback.trackBackground',
+    value: feedbackTokens.trackBackground,
+    note: 'the well a bar runs in',
+  },
+  {
+    name: 'feedback.indicator',
+    value: feedbackTokens.indicator,
+    note: 'accent: the one live thing',
+  },
+  {
+    name: 'feedback.skeleton',
+    value: feedbackTokens.skeleton,
+    note: 'a gray, because it has no role yet',
+  },
+];
+
+const CARD_COLORS = [
+  {
+    name: 'card.background',
+    value: cardTokens.background,
+    note: 'the card rung, and no border',
+  },
+  {
+    name: 'card.hover',
+    value: cardTokens.hover,
+    note: 'a card a person can press, under the pointer',
+  },
+  { name: 'card.title', value: cardTokens.title, note: 'what the card is about' },
+  {
+    name: 'card.description',
+    value: cardTokens.description,
+    note: 'the sentence under it',
+  },
+];
+
+const BADGE_TONES: BadgeTone[] = ['neutral', 'running', 'success', 'warning', 'danger'];
+
+const BADGE_COLORS = [
+  { name: 'badge.label', value: badgeTokens.label, note: 'the neutral word, and the ink' },
+  {
+    name: 'badge.runningLabel',
+    value: badgeTokens.runningLabel,
+    note: 'the tone, halfway to the ink',
+  },
+  {
+    name: 'badge.successLabel',
+    value: badgeTokens.successLabel,
+    note: 'it worked, in its own hue',
+  },
+  {
+    name: 'badge.warningLabel',
+    value: badgeTokens.warningLabel,
+    note: 'the one the rules warn of',
+  },
+  { name: 'badge.dangerLabel', value: badgeTokens.dangerLabel, note: 'it did not, in its own hue' },
+  {
+    name: 'badge.neutralFill',
+    value: badgeTokens.neutralFill,
+    note: 'a film of label, not a rung',
+  },
+  { name: 'badge.runningFill', value: badgeTokens.runningFill, note: 'it is happening now' },
+  { name: 'badge.successFill', value: badgeTokens.successFill, note: 'it worked' },
+  { name: 'badge.warningFill', value: badgeTokens.warningFill, note: 'it still may not' },
+  { name: 'badge.dangerFill', value: badgeTokens.dangerFill, note: 'it did not' },
+];
+
+/**
+ * Where the board puts the same four badges. A badge is on no rung of the
+ * ladder — it sits on whatever holds it — so its fill is a film of the tone
+ * rather than a colour, and this is the row where that either holds on three
+ * different surfaces or does not.
+ */
+const BADGE_RUNGS = [
+  { name: 'on a page', style: styles.page, use: 'a row of a list, a settings line' },
+  { name: 'on a card', style: styles.card, use: 'the rung a Card is on' },
+  { name: 'on a menu', style: styles.floating, use: 'inside a popup, where named fills collapse' },
+];
+
+/**
+ * The rungs an avatar comes in, and what each one is for. The step inside the
+ * box follows from the box, which is the whole point of the ladder: the deleted
+ * implementation had one size and every call site restated both.
+ */
+const AVATAR_SIZES: { name: string; size: AvatarSize; use: string }[] = [
+  {
+    name: 'mini \u00b7 16',
+    size: 'mini',
+    use: 'in a line of text, where an icon would be: a picture or a mark first',
+  },
+  { name: 'small \u00b7 20', size: 'small', use: 'a sidebar row, a compact list' },
+  { name: 'medium \u00b7 24', size: 'medium', use: 'a list of people; the default' },
+  { name: 'large \u00b7 32', size: 'large', use: 'an account row, the avatar editor' },
+  { name: 'xlarge \u00b7 64', size: 'xlarge', use: 'the screen is about this person' },
+];
+
+const AVATAR_COLORS = [
+  {
+    name: 'avatar.fallbackBackground',
+    value: avatarTokens.fallbackBackground,
+    note: 'a gray: a stand-in for a face has no role',
+  },
+  {
+    name: 'avatar.fallbackLabel',
+    value: avatarTokens.fallbackLabel,
+    note: 'label: the letters are the person',
+  },
+];
+
+const KBD_COLORS = [
+  { name: 'kbd.background', value: kbdTokens.background, note: 'a gray: it is hardware' },
+  { name: 'kbd.label', value: kbdTokens.label, note: 'metadata about the command' },
+];
+
+/**
+ * A face the board can actually load. A remote avatar would leave the image row
+ * showing its fallback on a machine with no network, which is the one thing
+ * this row exists to tell apart.
+ */
+const SAMPLE_FACE =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">' +
+      '<rect width="64" height="64" fill="hsl(220 82% 65%)"/>' +
+      '<circle cx="32" cy="25" r="11" fill="hsl(0 0% 100%)"/>' +
+      '<path d="M8 64c0-14 11-22 24-22s24 8 24 22z" fill="hsl(0 0% 100%)"/>' +
+      '</svg>'
+  );
+
+const STRIP_SIZES: { name: string; size: TabsSize }[] = [
+  { name: 'small · 28', size: 'small' },
+  { name: 'medium · 32', size: 'medium' },
+  { name: 'large · 36', size: 'large' },
+];
+
+const SELECT_SIZES = [
+  { name: 'small · 28', size: 'small' as const },
+  { name: 'medium · 32', size: 'medium' as const },
+  { name: 'large · 36', size: 'large' as const },
+];
+
+const FRUIT = [
+  { value: 'gala', label: 'Gala' },
+  { value: 'fuji', label: 'Fuji' },
+  { value: 'pink', label: 'Pink Lady' },
+];
+
+const LANGUAGES = ['TypeScript', 'Rust', 'Python', 'Ruby'];
+
+const TABLE_SIZES: { name: string; size: TableSize }[] = [
+  { name: 'small · 28', size: 'small' },
+  { name: 'medium · 32', size: 'medium' },
+  { name: 'large · 36', size: 'large' },
+];
+
+const TABLE_COLORS = [
+  { name: 'table.value', value: tableTokens.value, note: 'what is in a cell' },
+  { name: 'table.head', value: tableTokens.head, note: "a column's name: about the column" },
+  {
+    name: 'table.headActive',
+    value: tableTokens.headActive,
+    note: 'the one column it is sorted by',
+  },
+  {
+    name: 'table.line',
+    value: tableTokens.line,
+    note: 'separator: the one edge a list is given',
+  },
+  { name: 'table.hover', value: tableTokens.hover, note: 'where the pointer is, if it matters' },
+  { name: 'table.selected', value: tableTokens.selected, note: 'the row that holds the value' },
+  { name: 'table.caption', value: tableTokens.caption, note: 'what the table is, under it' },
+  { name: 'table.ring', value: tableTokens.ring, note: 'the keyboard, on a row or a name' },
+  {
+    name: 'table.headStickyBackground',
+    value: tableTokens.headStickyBackground,
+    note: 'a head that stays: the region rung',
+  },
+  { name: 'table.empty', value: tableTokens.empty, note: 'the row that says there is nothing' },
+];
+
+const PAGER_COLORS = [
+  {
+    name: 'table.pagerHint',
+    value: tableTokens.pagerHint,
+    note: 'the gap, and the count you are out of',
+  },
+];
+
+const CHOICE_COLORS = [
+  { name: 'field.checkedFill', value: field.checkedFill, note: 'a control that holds a value' },
+  { name: 'field.checkedMark', value: field.checkedMark, note: 'the tick and the dot on it' },
+  { name: 'field.thumb', value: field.thumb, note: 'the switch thumb, on both tracks' },
+];
+
+const FIELD_SIZES = [
+  { name: 'small · 28', size: 'small' as const },
+  { name: 'medium · 32', size: 'medium' as const },
+  { name: 'large · 36', size: 'large' as const },
+];
+
+const BUTTON_VARIANTS = ['primary', 'secondary', 'ghost', 'destructive', 'link'] as const;
+const BUTTON_SIZES = ['mini', 'small', 'medium', 'large'] as const;
+
+/** A stand-in for a caller's glyph on a row that removes something. */
+function CrossGlyph() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M4.5 4.5l7 7M11.5 4.5l-7 7" />
+    </svg>
+  );
+}
+
+/** The board's own mark, sized by the box the icon button gives it. */
+function PlusGlyph() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M8 3.5v9M3.5 8h9" />
+    </svg>
+  );
+}
+
+function ShadowChip({
+  name,
+  box,
+  fill,
+  ink,
+  note,
+}: {
+  name: string;
+  box: string;
+  fill: string;
+  ink: boolean;
+  note: string;
+}) {
+  const { ref, value } = useMeasured<HTMLDivElement>('box-shadow');
+  return (
+    <Sample name={name} note={note} measured={value}>
+      <div
+        ref={ref}
+        {...stylex.props(
+          styles.shadowChip,
+          dyn.raised(fill, box),
+          ink && dyn.ink(fill, colors.background)
+        )}
+      />
+    </Sample>
+  );
+}
+
+function RadiusChip({
+  name,
+  value,
+  shape,
+  note,
+}: {
+  name: string;
+  value: string;
+  shape: string;
+  note: string;
+}) {
+  const { ref, value: measured } = useMeasured<HTMLDivElement>('border-radius');
+  return (
+    <Sample name={name} note={note} measured={measured}>
+      <div ref={ref} {...stylex.props(styles.radiusChip, dyn.radius(value, shape))} />
+    </Sample>
+  );
+}
+
+function ControlRow({
+  name,
+  value,
+  size,
+}: {
+  name: string;
+  value: string;
+  size: 'small' | 'medium' | 'large';
+}) {
+  const { ref, value: measured } = useMeasured<HTMLDivElement>('height');
+  return (
+    <Row>
+      <LegendKey>{name}</LegendKey>
+      <div ref={ref} {...stylex.props(styles.controlBar, dyn.height(value))}>
+        {measured}
+      </div>
+      <Button size={size} variant="secondary">
+        Secondary
+      </Button>
+      <Button size={size} icon aria-label={`Add at ${size}`}>
+        <PlusGlyph />
+      </Button>
+    </Row>
+  );
+}
+
+function TypeRow({
+  name,
+  size,
+  leading,
+  note,
+}: {
+  name: string;
+  size: string;
+  leading: string;
+  note: string;
+}) {
+  const { ref, value } = useMeasured<HTMLParagraphElement>('font-size');
+  return (
+    <Row>
+      <LegendKey>
+        {name} · {note}
+      </LegendKey>
+      <p ref={ref} {...stylex.props(styles.typeSample, dyn.type(size, leading))}>
+        Ship the visual system {value ? `· ${value}` : ''}
+      </p>
+    </Row>
+  );
+}
+
+function SpaceRow({ name, value }: { name: string; value: string }) {
+  const { ref, value: measured } = useMeasured<HTMLDivElement>('width');
+  return (
+    <Row>
+      <LegendKey>{name}</LegendKey>
+      <div ref={ref} {...stylex.props(styles.spaceBar, dyn.width(value))} />
+      <span {...stylex.props(styles.rungUse)}>{measured}</span>
+    </Row>
+  );
+}
+
+function FieldRow({
+  legend,
+  readout,
+  children,
+}: {
+  legend: string;
+  readout?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Row>
+      <LegendKey>{legend}</LegendKey>
+      <div {...stylex.props(styles.fieldSlot)}>
+        {children}
+        {readout ? <span {...stylex.props(styles.readout)}>{readout}</span> : null}
+      </div>
+    </Row>
+  );
+}
+
+function FieldSizeRow({ name, size }: { name: string; size: 'small' | 'medium' | 'large' }) {
+  const { ref, value } = useMeasured<HTMLInputElement>('height');
+  return (
+    <FieldRow legend={name} readout={value}>
+      <Field.Root>
+        <Field.Label>Session title</Field.Label>
+        <Input ref={ref} size={size} placeholder="Describe the task" />
+      </Field.Root>
+    </FieldRow>
+  );
+}
+
+function InvalidFieldRow() {
+  const { ref, value } = useMeasured<HTMLInputElement>('box-shadow');
+  return (
+    <FieldRow legend="invalid" readout={value}>
+      <Field.Root invalid>
+        <Field.Label>Session title</Field.Label>
+        <Input ref={ref} placeholder="Describe the task" />
+        <Field.Error match>Enter a title before starting the session.</Field.Error>
+      </Field.Root>
+    </FieldRow>
+  );
+}
+
+/** A choice control with the label it belongs to, the way a surface writes it. */
+function ChoiceRow({
+  legend,
+  readout,
+  children,
+}: {
+  legend: string;
+  readout?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Row>
+      <LegendKey>{legend}</LegendKey>
+      <Cluster>{children}</Cluster>
+      {readout ? <span {...stylex.props(styles.readout)}>{readout}</span> : null}
+    </Row>
+  );
+}
+
+function CheckedInkRow() {
+  const { ref, value } = useMeasured<HTMLButtonElement>('box-shadow');
+  return (
+    <ChoiceRow legend={'checked \u00b7 ink edge'} readout={value}>
+      <Field.Label>
+        <Checkbox ref={ref} defaultChecked />
+        Include diffs
+      </Field.Label>
+    </ChoiceRow>
+  );
+}
+
+function SwitchTrackRow() {
+  const { ref, value } = useMeasured<HTMLButtonElement>('width');
+  return (
+    <ChoiceRow legend="switch" readout={value}>
+      <Field.Label>
+        <Switch ref={ref} />
+        Auto review
+      </Field.Label>
+      <Field.Label>
+        <Switch defaultChecked />
+        Auto review
+      </Field.Label>
+    </ChoiceRow>
+  );
+}
+
+/**
+ * A Select, the way a surface writes one. Every state below is the real
+ * control; only the open list is a stand-in, because a board cannot show a
+ * popup without covering what is under it.
+ */
+function FruitSelect({
+  size = 'medium',
+  triggerRef,
+  ...rest
+}: {
+  size?: 'small' | 'medium' | 'large';
+  triggerRef?: Ref<HTMLButtonElement>;
+} & ComponentProps<typeof Select.Root<string>>) {
+  return (
+    <Select.Root items={FRUIT} {...rest}>
+      <Select.Trigger ref={triggerRef} size={size}>
+        <Select.Value placeholder="Pick a fruit" />
+      </Select.Trigger>
+      <Select.Content>
+        {FRUIT.map((item) => (
+          <Select.Item key={item.value} value={item.value}>
+            {item.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}
+
+function SelectSizeRow({ name, size }: { name: string; size: 'small' | 'medium' | 'large' }) {
+  const { ref, value } = useMeasured<HTMLButtonElement>('height');
+  return (
+    <FieldRow legend={name} readout={value}>
+      <Field.Root>
+        <Field.Label>Fruit</Field.Label>
+        <FruitSelect triggerRef={ref} size={size} />
+      </Field.Root>
+    </FieldRow>
+  );
+}
+
+/** One row of the stand-in list, in whichever state the board is showing. */
+function ReplicaRow({
+  label,
+  selected,
+  highlighted,
+  disabled,
+  ticked,
+  rowRef,
+  tickRef,
+}: {
+  label: string;
+  selected?: boolean;
+  highlighted?: boolean;
+  disabled?: boolean;
+  ticked?: boolean;
+  rowRef?: Ref<HTMLDivElement>;
+  tickRef?: RefObject<HTMLSpanElement | null>;
+}) {
+  return (
+    <div
+      ref={rowRef}
+      {...stylex.props(
+        surface.item,
+        styles.replicaRow,
+        selected && surface.itemSelected,
+        highlighted && surface.itemHighlighted,
+        disabled && surface.itemDisabled
+      )}
+    >
+      <span {...stylex.props(surface.itemText)}>{label}</span>
+      <span ref={tickRef} {...stylex.props(surface.indicator)}>
+        {ticked ? (
+          <span {...stylex.props(surface.indicatorGlyph)}>
+            <TickGlyph />
+          </span>
+        ) : null}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * The list every Select and Combobox opens, drawn from `popup/surface.ts` on a
+ * stand-in so all four row states can be read at once, with the metrics that
+ * shape it taken off the rendered parts rather than written down beside them.
+ */
+function PopupReplica() {
+  const surfaceShadow = useMeasured<HTMLDivElement>('box-shadow');
+  const surfaceRadius = useMeasured<HTMLDivElement>('border-radius');
+  const surfaceInset = useMeasured<HTMLDivElement>('padding-top');
+  const surfaceText = useMeasured<HTMLDivElement>('font-size');
+  const rowHeight = useMeasured<HTMLDivElement>('min-height');
+  const rowRadius = useMeasured<HTMLDivElement>('border-radius');
+  const rowPadding = useMeasured<HTMLDivElement>('padding-left');
+  const rowGap = useMeasured<HTMLDivElement>('column-gap');
+  const tickSize = useMeasured<HTMLSpanElement>('width');
+  const headingSize = useMeasured<HTMLDivElement>('font-size');
+  const headingLeading = useMeasured<HTMLDivElement>('line-height');
+  const arrowHeight = useMeasured<HTMLDivElement>('height');
+  const rise = useMeasured<HTMLDivElement>('transform');
+
+  const metrics = [
+    { name: 'popup.shadow', value: surfaceShadow.value },
+    { name: 'popup.radius', value: surfaceRadius.value },
+    { name: 'popup.inset', value: surfaceInset.value },
+    { name: 'popup.text', value: surfaceText.value },
+    { name: 'popup.itemHeight', value: rowHeight.value },
+    { name: 'popup.itemRadius', value: rowRadius.value },
+    { name: 'popup.itemPaddingX', value: rowPadding.value },
+    { name: 'popup.itemGap', value: rowGap.value },
+    { name: 'popup.indicatorSize', value: tickSize.value },
+    { name: 'popup.groupLabelSize', value: headingSize.value },
+    { name: 'popup.groupLabelLeading', value: headingLeading.value },
+    { name: 'popup.scrollArrowHeight', value: arrowHeight.value },
+    { name: 'popup.rise', value: rise.value },
+  ];
+
+  return (
+    <Row>
+      <LegendKey>{'list \u00b7 stand-in'}</LegendKey>
+      <div
+        ref={(node) => {
+          surfaceShadow.ref.current = node;
+          surfaceRadius.ref.current = node;
+          surfaceInset.ref.current = node;
+          surfaceText.ref.current = node;
+        }}
+        {...stylex.props(surface.popup, styles.popupReplica)}
+      >
+        <div
+          ref={(node) => {
+            headingSize.ref.current = node;
+            headingLeading.ref.current = node;
+          }}
+          {...stylex.props(surface.groupLabel)}
+        >
+          Apples
+        </div>
+        <div {...stylex.props(surface.list, styles.popupList)}>
+          <ReplicaRow
+            label="Gala"
+            selected
+            ticked
+            rowRef={(node) => {
+              rowHeight.ref.current = node;
+              rowRadius.ref.current = node;
+              rowPadding.ref.current = node;
+              rowGap.ref.current = node;
+            }}
+            tickRef={tickSize.ref}
+          />
+          <ReplicaRow label="Fuji" highlighted />
+          <ReplicaRow label="Pink Lady" />
+          <ReplicaRow label="Sold out" disabled />
+        </div>
+        <div {...stylex.props(surface.separator)} />
+        <div {...stylex.props(surface.empty)}>No fruit matches.</div>
+        <div ref={arrowHeight.ref} {...stylex.props(surface.scrollArrow)}>
+          <span {...stylex.props(styles.scrollArrowGlyph)}>
+            <ChevronDownGlyph />
+          </span>
+        </div>
+      </div>
+      {/*
+        A popup starts and ends 4px below at opacity 0. StyleX cannot express
+        `[data-starting-style]`, so the primitives read Base UI's transition
+        status in JS and apply this class; the board applies the same class here
+        and reports what it resolves to as `popup.rise`.
+      */}
+      <div
+        ref={rise.ref}
+        aria-hidden="true"
+        {...stylex.props(surface.popup, styles.popupReplica, styles.riseProbe, surface.popupHidden)}
+      />
+      <div {...stylex.props(styles.replicaCaption)}>
+        <span {...stylex.props(styles.rungUse)}>
+          Every row state at once, from the rules the real list applies. Open a trigger above and
+          the list that appears is this one, in this palette.
+        </span>
+        <dl {...stylex.props(styles.constList)}>
+          {metrics.map((entry) => (
+            <div key={entry.name} {...stylex.props(styles.constRow)}>
+              <dt {...stylex.props(styles.constName)}>{entry.name}</dt>
+              <dd {...stylex.props(styles.constValue)}>{entry.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** A Combobox with the chevron beside its input, the shape a picker takes. */
+function LanguageCombobox({ children, ...rest }: ComponentProps<typeof Combobox.Root<string>>) {
+  return (
+    <Combobox.Root items={LANGUAGES} {...rest}>
+      {children}
+      <Combobox.Content empty={<Combobox.Empty>No language matches.</Combobox.Empty>}>
+        {(item: string) => (
+          <Combobox.Item key={item} value={item}>
+            {item}
+          </Combobox.Item>
+        )}
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+}
+
+/** One row of the stand-in menu, in whichever state the board is showing. */
+function MenuReplicaRow({
+  label,
+  icon,
+  inset,
+  shortcut,
+  leading,
+  trailing,
+  tone,
+  highlighted,
+  open,
+  disabled,
+  rowRef,
+}: {
+  label: string;
+  icon?: ReactNode;
+  inset?: boolean;
+  shortcut?: string;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  tone?: 'destructive';
+  highlighted?: boolean;
+  open?: boolean;
+  disabled?: boolean;
+  rowRef?: Ref<HTMLDivElement>;
+}) {
+  const destructive = tone === 'destructive';
+  return (
+    <div
+      ref={rowRef}
+      {...stylex.props(
+        surface.item,
+        destructive && surface.itemDestructive,
+        open && surface.itemOpen,
+        highlighted && surface.itemHighlighted,
+        highlighted && destructive && surface.itemDestructiveHighlighted,
+        disabled && surface.itemDisabled
+      )}
+    >
+      {leading}
+      {icon ? (
+        <span {...stylex.props(surface.itemIcon, destructive && surface.itemIconInherit)}>
+          {icon}
+        </span>
+      ) : null}
+      {inset ? <span aria-hidden="true" {...stylex.props(surface.itemIcon)} /> : null}
+      <span {...stylex.props(surface.itemText)}>{label}</span>
+      {shortcut ? <span {...stylex.props(surface.itemShortcut)}>{shortcut}</span> : null}
+      {trailing}
+    </div>
+  );
+}
+
+/**
+ * The menu surface, drawn from `popup/surface.ts` on a stand-in so every row
+ * state can be read at once, with the metrics that shape it taken off the
+ * rendered parts rather than written down beside them. The real menus above it
+ * open over whatever is under them, which a board cannot hold still.
+ */
+function MenuReplica() {
+  const menuWidth = useMeasured<HTMLDivElement>('min-width');
+  const shortcutSize = useMeasured<HTMLSpanElement>('font-size');
+  const iconBox = useMeasured<HTMLSpanElement>('width');
+
+  const metrics = [
+    { name: 'popup.menuWidth', value: menuWidth.value },
+    { name: 'the row icon box', value: iconBox.value },
+    { name: 'a shortcut', value: shortcutSize.value },
+  ];
+
+  return (
+    <Row>
+      <LegendKey>{'menu \u00b7 stand-in'}</LegendKey>
+      <div
+        ref={menuWidth.ref}
+        {...stylex.props(surface.popup, surface.popupMenu, styles.menuReplica)}
+      >
+        <div {...stylex.props(surface.groupLabel)}>Session</div>
+        <MenuReplicaRow label="New task" icon={<PlusGlyph />} shortcut={'\u2318N'} />
+        <MenuReplicaRow
+          label="Rename"
+          inset
+          trailing={
+            <span ref={shortcutSize.ref} {...stylex.props(surface.itemShortcut)}>
+              {'\u2318\u21a9'}
+            </span>
+          }
+          highlighted
+        />
+        <MenuReplicaRow
+          label="Copy link"
+          leading={
+            <span ref={iconBox.ref} {...stylex.props(surface.indicator)}>
+              <span {...stylex.props(surface.indicatorGlyph)}>
+                <TickGlyph />
+              </span>
+            </span>
+          }
+        />
+        <MenuReplicaRow
+          label="Sort by name"
+          leading={
+            <span {...stylex.props(surface.indicator)}>
+              <span {...stylex.props(surface.indicatorGlyph)}>
+                <DotGlyph />
+              </span>
+            </span>
+          }
+        />
+        <MenuReplicaRow
+          label="Export"
+          inset
+          open
+          trailing={
+            <span {...stylex.props(surface.itemIcon, surface.itemSubmenuGlyph)}>
+              <ChevronRightGlyph />
+            </span>
+          }
+        />
+        <div {...stylex.props(surface.separator)} />
+        <MenuReplicaRow label="Delete" icon={<CrossGlyph />} tone="destructive" />
+        <MenuReplicaRow label="Delete" icon={<CrossGlyph />} tone="destructive" highlighted />
+        <MenuReplicaRow label="Archive" inset disabled />
+      </div>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <span {...stylex.props(styles.rungUse)}>
+          Every row state at once: an icon row, the highlight, a tick, a dot, the row holding an
+          open submenu, a destructive command at rest and under the keyboard, and a disabled one.
+        </span>
+        <dl {...stylex.props(styles.constList)}>
+          {metrics.map((entry) => (
+            <div key={entry.name} {...stylex.props(styles.constRow)}>
+              <dt {...stylex.props(styles.constName)}>{entry.name}</dt>
+              <dd {...stylex.props(styles.constValue)}>{entry.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** A menu a reader can actually open, written the way a surface writes one. */
+function SessionMenu() {
+  return (
+    <Menu.Root>
+      <Menu.Trigger render={<Button variant="secondary" />}>Session</Menu.Trigger>
+      <Menu.Content>
+        <Menu.Group>
+          <Menu.GroupLabel>Session</Menu.GroupLabel>
+          <Menu.Item icon={<PlusGlyph />} shortcut={'\u2318N'}>
+            New task
+          </Menu.Item>
+          <Menu.Item inset>Rename</Menu.Item>
+        </Menu.Group>
+        <Menu.CheckboxItem defaultChecked>Notify me when it finishes</Menu.CheckboxItem>
+        <Menu.RadioGroup defaultValue="recent">
+          <Menu.GroupLabel>Sort by</Menu.GroupLabel>
+          <Menu.RadioItem value="recent">Recent</Menu.RadioItem>
+          <Menu.RadioItem value="name">Name</Menu.RadioItem>
+        </Menu.RadioGroup>
+        <Menu.Submenu>
+          <Menu.SubmenuTrigger inset>Export</Menu.SubmenuTrigger>
+          <Menu.Content>
+            <Menu.Item>PDF</Menu.Item>
+            <Menu.Item>PNG</Menu.Item>
+          </Menu.Content>
+        </Menu.Submenu>
+        <Menu.Separator />
+        <Menu.Item inset disabled>
+          Archive
+        </Menu.Item>
+        <Menu.Item icon={<CrossGlyph />} tone="destructive">
+          Delete
+        </Menu.Item>
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+/**
+ * The popover surface, drawn from `popup/surface.ts` on a stand-in. The real
+ * popover above it opens over whatever is under it, which a board cannot hold
+ * still, so the two declarations a popover replaces on the shared surface —
+ * its padding and its gap — are read back off this one.
+ */
+function PopoverReplica() {
+  const padding = useMeasured<HTMLDivElement>('padding-top');
+  const gap = useMeasured<HTMLDivElement>('row-gap');
+  const titleSize = useMeasured<HTMLHeadingElement>('font-size');
+  const descriptionSize = useMeasured<HTMLParagraphElement>('font-size');
+
+  const metrics = [
+    { name: 'popup.panelPadding', value: padding.value },
+    { name: 'popup.panelGap', value: gap.value },
+    { name: 'the panel title', value: titleSize.value },
+    { name: 'popup.description', value: descriptionSize.value },
+  ];
+
+  return (
+    <Row>
+      <LegendKey>{'popover · stand-in'}</LegendKey>
+      <div
+        ref={(node) => {
+          padding.ref.current = node;
+          gap.ref.current = node;
+        }}
+        {...stylex.props(surface.popup, surface.popupPanel, styles.popoverReplica)}
+      >
+        <div {...stylex.props(surface.panelHeader)}>
+          <h3 ref={titleSize.ref} {...stylex.props(surface.panelTitle)}>
+            Filter sessions
+          </h3>
+          <p ref={descriptionSize.ref} {...stylex.props(surface.panelDescription)}>
+            Applies to the list under it.
+          </p>
+        </div>
+        <Field.Root>
+          <Field.Label>Name contains</Field.Label>
+          <Input size="small" placeholder="Search" />
+        </Field.Root>
+        <Cluster>
+          <Button size="small" variant="ghost">
+            Reset
+          </Button>
+          <Button size="small">Apply</Button>
+        </Cluster>
+      </div>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <span {...stylex.props(styles.rungUse)}>
+          The same surface a Select list and a Menu open, holding content instead of rows. It
+          replaces five of a list&apos;s declarations: the width it takes from its control, the 4px
+          inset that lets a row reach the surface&apos;s edge, and the three that make its type a
+          control&apos;s rather than prose.
+        </span>
+        <dl {...stylex.props(styles.constList)}>
+          {metrics.map((entry) => (
+            <div key={entry.name} {...stylex.props(styles.constRow)}>
+              <dt {...stylex.props(styles.constName)}>{entry.name}</dt>
+              <dd {...stylex.props(styles.constValue)}>{entry.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** A popover a reader can actually open, written the way a surface writes one. */
+function FilterPopover() {
+  return (
+    <Popover.Root>
+      <Popover.Trigger render={<Button variant="secondary" />}>Filter</Popover.Trigger>
+      <Popover.Content>
+        <Popover.Header>
+          <Popover.Title>Filter sessions</Popover.Title>
+          <Popover.Description>Applies to the list under it.</Popover.Description>
+        </Popover.Header>
+        <Field.Root>
+          <Field.Label>Name contains</Field.Label>
+          <Input size="small" placeholder="Search" />
+        </Field.Root>
+        <Cluster>
+          <Popover.Close render={<Button size="small" variant="ghost" />}>Reset</Popover.Close>
+          <Popover.Close render={<Button size="small" />}>Apply</Popover.Close>
+        </Cluster>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}
+
+/**
+ * The modal panel, drawn from `dialog/surface.ts` on a stand-in: a dialog is
+ * portalled and unmounted while it is closed, and opening one would cover the
+ * board it is meant to be compared against.
+ *
+ * The stand-in keeps the padding, the radius, the gap and the type — what a
+ * reader is here to see — and drops what makes the panel own a window: the
+ * fixed position, the centring transform and the 512px width. Those are
+ * reported by probes below instead, by a bar as wide as the token, because a
+ * panel shrunk to fit a board can no longer state its own width.
+ */
+function DialogReplica() {
+  const padding = useMeasured<HTMLDivElement>('padding-top');
+  const gap = useMeasured<HTMLDivElement>('row-gap');
+  const panelRadius = useMeasured<HTMLDivElement>('border-radius');
+  const panelShadow = useMeasured<HTMLDivElement>('box-shadow');
+  const headerGap = useMeasured<HTMLDivElement>('row-gap');
+  const titleSize = useMeasured<HTMLHeadingElement>('font-size');
+  const titleLeading = useMeasured<HTMLHeadingElement>('line-height');
+  const descriptionSize = useMeasured<HTMLParagraphElement>('font-size');
+  const descriptionLeading = useMeasured<HTMLParagraphElement>('line-height');
+  const footerGap = useMeasured<HTMLDivElement>('column-gap');
+
+  const metrics = [
+    { name: 'dialog.shadow', value: panelShadow.value },
+    { name: 'dialog.radius', value: panelRadius.value },
+    { name: 'dialog.padding', value: padding.value },
+    { name: 'dialog.gap', value: gap.value },
+    { name: 'dialog.headerGap', value: headerGap.value },
+    { name: 'dialog.footerGap', value: footerGap.value },
+    { name: 'dialog.titleSize', value: titleSize.value },
+    { name: 'dialog.titleLeading', value: titleLeading.value },
+    { name: 'dialog.descriptionSize', value: descriptionSize.value },
+    { name: 'dialog.descriptionLeading', value: descriptionLeading.value },
+  ];
+
+  return (
+    <Row>
+      <LegendKey>{'dialog · stand-in'}</LegendKey>
+      <div {...stylex.props(styles.modalStage)}>
+        <div
+          ref={(node) => {
+            padding.ref.current = node;
+            gap.ref.current = node;
+            panelRadius.ref.current = node;
+            panelShadow.ref.current = node;
+          }}
+          {...stylex.props(modal.popup, styles.dialogReplica)}
+        >
+          <div ref={headerGap.ref} {...stylex.props(modal.header)}>
+            <h3
+              ref={(node) => {
+                titleSize.ref.current = node;
+                titleLeading.ref.current = node;
+              }}
+              {...stylex.props(modal.title)}
+            >
+              Delete this session?
+            </h3>
+            <p
+              ref={(node) => {
+                descriptionSize.ref.current = node;
+                descriptionLeading.ref.current = node;
+              }}
+              {...stylex.props(modal.description)}
+            >
+              Its transcript and every file it wrote go with it.
+            </p>
+          </div>
+          <p {...stylex.props(styles.dialogBody)}>
+            The body is whatever the surface writes; the panel states only the room around it.
+          </p>
+          <div ref={footerGap.ref} {...stylex.props(modal.footer)}>
+            <Button variant="secondary" size="small">
+              Keep
+            </Button>
+            <Button variant="destructive" size="small">
+              Delete
+            </Button>
+          </div>
+          <Button
+            variant="ghost"
+            size="small"
+            icon
+            aria-label="Close"
+            {...stylex.props(modal.close)}
+          >
+            <span {...stylex.props(styles.replicaCloseGlyph)}>
+              <CloseGlyph />
+            </span>
+          </Button>
+        </div>
+      </div>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <span {...stylex.props(styles.rungUse)}>
+          The modal rung states three things at once: the elevated background, the large shadow, and
+          an overlay over the page. A Dialog, an AlertDialog and a Drawer are this one panel — they
+          differ in how they arrive and in what may dismiss them, not in what they are made of.
+        </span>
+        <dl {...stylex.props(styles.constList)}>
+          {metrics.map((entry) => (
+            <div key={entry.name} {...stylex.props(styles.constRow)}>
+              <dt {...stylex.props(styles.constName)}>{entry.name}</dt>
+              <dd {...stylex.props(styles.constValue)}>{entry.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** A dimension has no appearance, so a bar as wide as it reports what it is. */
+function WidthProbeRow({ name, value }: { name: string; value: string }) {
+  const { ref, value: measured } = useMeasured<HTMLDivElement>('width');
+  return (
+    <div {...stylex.props(styles.constRow)}>
+      <dt {...stylex.props(styles.constName)}>{name}</dt>
+      <dd {...stylex.props(styles.constValue)}>{measured}</dd>
+      <div ref={ref} aria-hidden="true" {...stylex.props(styles.widthProbe, dyn.width(value))} />
+    </div>
+  );
+}
+
+/** The dimensions a stand-in cannot state, because stating them hides the board. */
+function ModalDimensions() {
+  const dimensions = [
+    { name: 'dialog.width', value: dialogTokens.width },
+    { name: 'dialog.drawerSize', value: dialogTokens.drawerSize },
+    { name: 'dialog.drawerInset', value: dialogTokens.drawerInset },
+    { name: 'dialog.inset', value: dialogTokens.inset },
+    { name: 'dialog.rise', value: dialogTokens.rise },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/**
+ * A drawer on one edge, flush or inset.
+ *
+ * A drawer arrives from somewhere, so the edge it came in on is one axis and
+ * all four belong on the board: each is laid out against a different side and
+ * swiped away in a different direction. Whether it meets that edge or floats
+ * off it is the second axis, and it changes the corners as well as the gap.
+ */
+function FilterDrawer({ side, inset }: { side: DrawerSide; inset?: boolean }) {
+  return (
+    <Drawer.Root side={side}>
+      <Drawer.Trigger render={<Button variant="secondary" size="small" />}>
+        {inset ? `${side} · inset` : side}
+      </Drawer.Trigger>
+      <Drawer.Content side={side} inset={inset}>
+        <Drawer.Header>
+          <Drawer.Title>Filters</Drawer.Title>
+          <Drawer.Description>They apply to the session list.</Drawer.Description>
+        </Drawer.Header>
+        <Field.Label>
+          <Checkbox name="running" defaultChecked />
+          Running only
+        </Field.Label>
+        <Drawer.Footer>
+          <Drawer.Close render={<Button variant="secondary" size="small" />}>Reset</Drawer.Close>
+          <Drawer.Close render={<Button size="small" />}>Apply</Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}
+
+/** The three ways onto the modal rung, each one a reader can actually open. */
+function ModalTriggers() {
+  return (
+    <Rows>
+      <Row>
+        <LegendKey>dialog</LegendKey>
+        <Cluster>
+          <Dialog.Root>
+            <Dialog.Trigger render={<Button variant="secondary" />}>Rename session</Dialog.Trigger>
+            <Dialog.Content>
+              <Dialog.Header>
+                <Dialog.Title>Rename session</Dialog.Title>
+                <Dialog.Description>The name shows in the sidebar.</Dialog.Description>
+              </Dialog.Header>
+              <Field.Root>
+                <Field.Label>Name</Field.Label>
+                <Input placeholder="Describe the task" />
+              </Field.Root>
+              <Dialog.Footer>
+                <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
+                <Dialog.Close render={<Button />}>Save</Dialog.Close>
+              </Dialog.Footer>
+            </Dialog.Content>
+          </Dialog.Root>
+        </Cluster>
+      </Row>
+      <Row>
+        <LegendKey>alert dialog</LegendKey>
+        <Cluster>
+          <AlertDialog.Root>
+            <AlertDialog.Trigger render={<Button variant="secondary" tone="destructive" />}>
+              Delete session
+            </AlertDialog.Trigger>
+            <AlertDialog.Content>
+              <AlertDialog.Header>
+                <AlertDialog.Title>Delete this session?</AlertDialog.Title>
+                <AlertDialog.Description>
+                  Its transcript and every file it wrote go with it.
+                </AlertDialog.Description>
+              </AlertDialog.Header>
+              <AlertDialog.Footer>
+                <AlertDialog.Close render={<Button variant="secondary" />}>Keep</AlertDialog.Close>
+                <AlertDialog.Close render={<Button variant="destructive" />}>
+                  Delete
+                </AlertDialog.Close>
+              </AlertDialog.Footer>
+            </AlertDialog.Content>
+          </AlertDialog.Root>
+        </Cluster>
+      </Row>
+      <Row>
+        <LegendKey>drawer · flush</LegendKey>
+        <Cluster>
+          {DRAWER_SIDES.map((side) => (
+            <FilterDrawer key={side} side={side} />
+          ))}
+        </Cluster>
+      </Row>
+      <Row>
+        <LegendKey>drawer · inset</LegendKey>
+        <Cluster>
+          {DRAWER_SIDES.map((side) => (
+            <FilterDrawer key={side} side={side} inset />
+          ))}
+        </Cluster>
+      </Row>
+    </Rows>
+  );
+}
+
+/**
+ * The tooltip chip, drawn on a stand-in. A tooltip is portalled, unmounted
+ * while it is closed and opens on a delay, so the board shows the chip itself
+ * beside triggers a reader can point at.
+ */
+function TooltipReplica() {
+  const chipRadius = useMeasured<HTMLDivElement>('border-radius');
+  const chipPaddingX = useMeasured<HTMLDivElement>('padding-left');
+  const chipPaddingY = useMeasured<HTMLDivElement>('padding-top');
+  const chipText = useMeasured<HTMLDivElement>('font-size');
+  const chipLeading = useMeasured<HTMLDivElement>('line-height');
+  const chipShadow = useMeasured<HTMLDivElement>('box-shadow');
+
+  const metrics = [
+    { name: 'tooltip.shadow', value: chipShadow.value },
+    { name: 'tooltip.radius', value: chipRadius.value },
+    { name: 'tooltip.paddingX', value: chipPaddingX.value },
+    { name: 'tooltip.paddingY', value: chipPaddingY.value },
+    { name: 'tooltip.text', value: chipText.value },
+    { name: 'tooltip.leading', value: chipLeading.value },
+  ];
+
+  const dimensions = [
+    { name: 'tooltip.maxWidth', value: tooltipTokens.maxWidth },
+    { name: 'tooltip.rise', value: tooltipTokens.rise },
+  ];
+
+  return (
+    <Row>
+      <LegendKey>{'tooltip · stand-in'}</LegendKey>
+      <Cluster>
+        <div
+          ref={(node) => {
+            chipRadius.ref.current = node;
+            chipPaddingX.ref.current = node;
+            chipPaddingY.ref.current = node;
+            chipText.ref.current = node;
+            chipLeading.ref.current = node;
+            chipShadow.ref.current = node;
+          }}
+          {...stylex.props(chip.popup, styles.tooltipReplica)}
+        >
+          Rerun this turn
+        </div>
+      </Cluster>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <span {...stylex.props(styles.rungUse)}>
+          The one floating thing that inverts rather than rising off the page: the ladder puts a
+          menu, a popover and a list on the raised background under the popover shadow, and names
+          the tooltip apart as label with shadow.medium. It is a label over a control rather than a
+          place to act, so it never takes the pointer.
+        </span>
+        <dl {...stylex.props(styles.constList)}>
+          {metrics.map((entry) => (
+            <div key={entry.name} {...stylex.props(styles.constRow)}>
+              <dt {...stylex.props(styles.constName)}>{entry.name}</dt>
+              <dd {...stylex.props(styles.constValue)}>{entry.value}</dd>
+            </div>
+          ))}
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** Tooltips a reader can point at; one provider, so the second opens instantly. */
+function TooltipRow() {
+  return (
+    <Row>
+      <LegendKey>tooltips</LegendKey>
+      <Tooltip.Provider>
+        <Cluster>
+          <Tooltip.Root>
+            <Tooltip.Trigger render={<Button variant="ghost" icon aria-label="Rerun" />}>
+              <ChevronRightGlyph />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Rerun this turn</Tooltip.Content>
+          </Tooltip.Root>
+          <Tooltip.Root>
+            <Tooltip.Trigger render={<span {...stylex.props(styles.tooltipAnchor)} />}>
+              Point at this
+            </Tooltip.Trigger>
+            <Tooltip.Content side="right">
+              A tooltip names what is under the pointer, and wraps at its own width rather than
+              trailing off into an ellipsis nobody can open.
+            </Tooltip.Content>
+          </Tooltip.Root>
+        </Cluster>
+      </Tooltip.Provider>
+    </Row>
+  );
+}
+
+function StripRow({ name, size }: { name: string; size: TabsSize }) {
+  const { ref, value } = useMeasured<HTMLDivElement>('height');
+  return (
+    <Row>
+      <LegendKey>{name}</LegendKey>
+      <Cluster>
+        <Tabs.Root defaultValue="rendered">
+          <Tabs.List ref={ref} size={size}>
+            <Tabs.Tab value="rendered">Rendered</Tabs.Tab>
+            <Tabs.Tab value="raw">Raw</Tabs.Tab>
+            <Tabs.Tab value="diff">Diff</Tabs.Tab>
+          </Tabs.List>
+        </Tabs.Root>
+      </Cluster>
+      <span {...stylex.props(styles.readout)}>{value}</span>
+    </Row>
+  );
+}
+
+/** A tab nobody can take, reporting the one opacity the family dims with. */
+function StripDisabledRow() {
+  const { ref, value } = useMeasured<HTMLButtonElement>('opacity');
+  return (
+    <Row>
+      <LegendKey>disabled</LegendKey>
+      <Cluster>
+        <Tabs.Root defaultValue="rendered">
+          <Tabs.List>
+            <Tabs.Tab value="rendered">Rendered</Tabs.Tab>
+            <Tabs.Tab ref={ref} value="raw" disabled>
+              Raw
+            </Tabs.Tab>
+          </Tabs.List>
+        </Tabs.Root>
+      </Cluster>
+      <span {...stylex.props(styles.readout)}>disclosure.disabledOpacity {value}</span>
+    </Row>
+  );
+}
+
+/** The strip taking the width it is given, with the tabs splitting it. */
+function StripStretchRow() {
+  return (
+    <Row>
+      <LegendKey>stretch</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Tabs.Root defaultValue="local">
+          <Tabs.List stretch>
+            <Tabs.Tab value="local">Local</Tabs.Tab>
+            <Tabs.Tab value="github">GitHub</Tabs.Tab>
+            <Tabs.Tab value="chat">Chat</Tabs.Tab>
+          </Tabs.List>
+        </Tabs.Root>
+      </div>
+    </Row>
+  );
+}
+
+/** The strip with what it swaps, so the gap between the two is on the board. */
+function StripPanelRow() {
+  return (
+    <Row>
+      <LegendKey>panel</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Tabs.Root defaultValue="sync">
+          <Tabs.List size="small">
+            <Tabs.Tab value="sync">Conversation sync</Tabs.Tab>
+            <Tabs.Tab value="worktree">Worktree setup</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel value="sync">Sessions on this project sync their history.</Tabs.Panel>
+          <Tabs.Panel value="worktree">Each session gets a worktree of its own.</Tabs.Panel>
+        </Tabs.Root>
+      </div>
+    </Row>
+  );
+}
+
+function StripDimensions() {
+  const dimensions = [
+    { name: 'disclosure.trackInset', value: disclosureTokens.trackInset },
+    { name: 'disclosure.trackRadiusSmall', value: disclosureTokens.trackRadiusSmall },
+    { name: 'disclosure.trackRadiusMedium', value: disclosureTokens.trackRadiusMedium },
+    { name: 'disclosure.tabPaddingX', value: disclosureTokens.tabPaddingX },
+    { name: 'disclosure.tabGap', value: disclosureTokens.tabGap },
+    { name: 'disclosure.tabText', value: disclosureTokens.tabText },
+    { name: 'disclosure.panelGap', value: disclosureTokens.panelGap },
+    { name: 'disclosure.ringWidth', value: disclosureTokens.ringWidth },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** The stack, with its first row already open so both states are on the board. */
+function StackRow() {
+  return (
+    <Row>
+      <LegendKey>accordion</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Accordion.Root defaultValue={['session']}>
+          <Accordion.Item value="session">
+            <Accordion.Trigger>What a session is</Accordion.Trigger>
+            <Accordion.Panel>One agent, one worktree, and every turn between them.</Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="machine">
+            <Accordion.Trigger>What a machine is</Accordion.Trigger>
+            <Accordion.Panel>The computer a session runs its work on.</Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="project">
+            <Accordion.Trigger>What a project is</Accordion.Trigger>
+            <Accordion.Panel>A repository, and the sessions opened against it.</Accordion.Panel>
+          </Accordion.Item>
+        </Accordion.Root>
+      </div>
+    </Row>
+  );
+}
+
+/** A lone disclosure, opened by a control the surface already had. */
+function CollapsibleRow() {
+  return (
+    <Row>
+      <LegendKey>collapsible</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Collapsible.Root defaultOpen>
+          <Collapsible.Trigger render={<Button variant="secondary" size="small" />}>
+            3 files changed
+          </Collapsible.Trigger>
+          <Collapsible.Panel>
+            <p {...stylex.props(styles.collapsibleBody)}>
+              The panel is all this primitive owns: the height Base UI measured, the transition
+              between that and nothing, and the overflow that hides what is arriving.
+            </p>
+          </Collapsible.Panel>
+        </Collapsible.Root>
+      </div>
+    </Row>
+  );
+}
+
+function StackDimensions() {
+  const dimensions = [
+    { name: 'disclosure.rowPaddingY', value: disclosureTokens.rowPaddingY },
+    { name: 'disclosure.rowGap', value: disclosureTokens.rowGap },
+    { name: 'disclosure.rowText', value: disclosureTokens.rowText },
+    { name: 'disclosure.chevronSize', value: disclosureTokens.chevronSize },
+    { name: 'disclosure.panelText', value: disclosureTokens.panelText },
+    { name: 'disclosure.panelLeading', value: disclosureTokens.panelLeading },
+    { name: 'disclosure.panelPaddingBottom', value: disclosureTokens.panelPaddingBottom },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** One message on the card rung, in each of the four things it can report. */
+function AlertRow({ tone }: { tone: FeedbackTone }) {
+  return (
+    <Row>
+      <LegendKey>{tone}</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock, styles.pageRung)}>
+        <Alert.Root tone={tone}>
+          <Alert.Title>Worktree setup finished</Alert.Title>
+          <Alert.Description>
+            Two commands ran before the agent started; the second one printed nothing.
+          </Alert.Description>
+        </Alert.Root>
+      </div>
+    </Row>
+  );
+}
+
+/** A message that answers back, so the row of buttons is on the board too. */
+function AlertActionsRow() {
+  return (
+    <Row>
+      <LegendKey>answers</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock, styles.pageRung)}>
+        <Alert.Root tone="danger">
+          <Alert.Title>Sync failed</Alert.Title>
+          <Alert.Description>The machine did not answer in time.</Alert.Description>
+          <Alert.Actions>
+            <Button size="small">Retry</Button>
+            <Button variant="ghost" size="small">
+              Dismiss
+            </Button>
+          </Alert.Actions>
+        </Alert.Root>
+      </div>
+    </Row>
+  );
+}
+
+/**
+ * The toast, standing still. A real one is portalled to the document and gone
+ * again in five seconds, so the board holds a stand-in built from the same
+ * styles — and the button beside it reports a real one.
+ */
+function ToastReplica({ tone }: { tone: FeedbackTone }) {
+  const Mark = TONE_GLYPHS[tone];
+  return (
+    <Row>
+      <LegendKey>{tone}</LegendKey>
+      <Cluster>
+        <div
+          {...stylex.props(
+            feedbackSurface.message,
+            feedbackSurface.toast,
+            TOAST_TONES[tone],
+            styles.toastReplica
+          )}
+        >
+          <span {...stylex.props(feedbackSurface.mark, TONE_MARKS[tone])}>
+            <Mark />
+          </span>
+          <div {...stylex.props(feedbackSurface.body)}>
+            <p {...stylex.props(feedbackSurface.title)}>Session archived</p>
+            <p {...stylex.props(feedbackSurface.description)}>It can be restored from Archive.</p>
+          </div>
+        </div>
+      </Cluster>
+    </Row>
+  );
+}
+
+/** A real toast, reported the way a surface reports one: through the manager. */
+const galleryToasts = Toast.createManager();
+
+function ToastTriggerRow() {
+  return (
+    <Row>
+      <LegendKey>reported</LegendKey>
+      <Cluster>
+        <Toast.Provider manager={galleryToasts} limit={3}>
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={() =>
+              galleryToasts.add({
+                title: 'Sync failed',
+                description: 'The machine did not answer in time.',
+                type: 'danger',
+              })
+            }
+          >
+            Report one
+          </Button>
+        </Toast.Provider>
+      </Cluster>
+      <span {...stylex.props(styles.rungUse)}>
+        A real toast, through the manager a surface outside React would use. It lands in the
+        viewport at the top of the window, above every popup.
+      </span>
+    </Row>
+  );
+}
+
+function ProgressRow({ name, value }: { name: string; value: number | null }) {
+  return (
+    <Row>
+      <LegendKey>{name}</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Progress value={value} />
+      </div>
+    </Row>
+  );
+}
+
+function SkeletonRow() {
+  return (
+    <Row>
+      <LegendKey>skeleton</LegendKey>
+      <div {...stylex.props(styles.skeletonBlock)}>
+        <Skeleton shape="circle" width={32} height={32} />
+        <div {...stylex.props(styles.skeletonLines)}>
+          <Skeleton width="100%" />
+          <Skeleton width="60%" />
+        </div>
+      </div>
+    </Row>
+  );
+}
+
+function SpinnerRow() {
+  return (
+    <Row>
+      <LegendKey>spinner</LegendKey>
+      <Cluster>
+        <Spinner size="small" />
+        <Spinner size="medium" />
+        <Spinner size="large" />
+        <Button variant="secondary" size="small">
+          <Spinner size="small" label={null} />
+          Saving
+        </Button>
+      </Cluster>
+      <span {...stylex.props(styles.rungUse)}>
+        Drawn in currentColor, so the one inside a button takes the button's ink. The label is the
+        surface's: a spinner beside the word "Saving" states nothing, and says so with label=null.
+      </span>
+    </Row>
+  );
+}
+
+function MessageDimensions() {
+  const dimensions = [
+    { name: 'feedback.noticeRadius', value: feedbackTokens.noticeRadius },
+    { name: 'feedback.padding', value: feedbackTokens.padding },
+    { name: 'feedback.gap', value: feedbackTokens.gap },
+    { name: 'feedback.markSize', value: feedbackTokens.markSize },
+    { name: 'feedback.titleSize', value: feedbackTokens.titleSize },
+    { name: 'feedback.titleLeading', value: feedbackTokens.titleLeading },
+    { name: 'feedback.descriptionSize', value: feedbackTokens.descriptionSize },
+    { name: 'feedback.descriptionLeading', value: feedbackTokens.descriptionLeading },
+    { name: 'feedback.toastWidth', value: feedbackTokens.toastWidth },
+    { name: 'feedback.toastGap', value: feedbackTokens.toastGap },
+    { name: 'feedback.viewportInset', value: feedbackTokens.viewportInset },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+function WaitDimensions() {
+  const dimensions = [
+    { name: 'feedback.trackHeight', value: feedbackTokens.trackHeight },
+    { name: 'feedback.spinnerSmall', value: feedbackTokens.spinnerSmall },
+    { name: 'feedback.spinnerMedium', value: feedbackTokens.spinnerMedium },
+    { name: 'feedback.spinnerLarge', value: feedbackTokens.spinnerLarge },
+    { name: 'feedback.spinnerWidth', value: feedbackTokens.spinnerWidth },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** The records a board can show: short enough to read, long enough to be a table. */
+interface BoardSession {
+  id: string;
+  name: string;
+  agent: string;
+  turns: number;
+}
+
+const SESSIONS: BoardSession[] = [
+  { id: 'a', name: 'Worktree setup', agent: 'Claude', turns: 12 },
+  { id: 'b', name: 'Review the diff', agent: 'Codex', turns: 4 },
+  { id: 'c', name: 'Rename the package', agent: 'Claude', turns: 31 },
+];
+
+const BOARD_COLUMNS: TableColumn<BoardSession>[] = [
+  { key: 'name', header: 'Session', cell: (row) => row.name, width: 180 },
+  { key: 'agent', header: 'Agent', cell: (row) => row.agent, width: 100 },
+  { key: 'turns', header: 'Turns', cell: (row) => row.turns, numeric: true },
+];
+
+const sessionKey = (row: BoardSession) => row.id;
+
+/**
+ * A real table. Nothing here is a stand-in: a table draws no surface, has no
+ * open state and is not portalled, so the board holds the thing itself.
+ */
+function TableSizeRow({ name, size }: { name: string; size: TableSize }) {
+  return (
+    <Row>
+      <LegendKey>{name}</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Table columns={BOARD_COLUMNS} rows={SESSIONS} rowKey={sessionKey} size={size} />
+      </div>
+    </Row>
+  );
+}
+
+/** Pressing a row does something, so the rows answer the pointer and the keyboard. */
+function TablePressRow() {
+  const [opened, setOpened] = useState<string | null>(null);
+  return (
+    <Row>
+      <LegendKey>pressable</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Table
+          columns={BOARD_COLUMNS}
+          rows={SESSIONS}
+          rowKey={sessionKey}
+          onRowPress={(row) => setOpened(row.name)}
+        />
+      </div>
+      <Note>
+        The pointer is answered only where pressing a row does something, and a row that can be
+        pressed is reachable by the keyboard and rings where the keyboard is.{' '}
+        {opened ? `Opened ${opened}.` : 'Nothing opened yet.'}
+      </Note>
+    </Row>
+  );
+}
+
+/** The rows a bulk action would act on, and the box that takes them all. */
+function TableSelectRow() {
+  const [selected, setSelected] = useState<string[]>(['b']);
+  return (
+    <Row>
+      <LegendKey>selectable</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Table
+          columns={BOARD_COLUMNS}
+          rows={SESSIONS}
+          rowKey={sessionKey}
+          selected={selected}
+          onSelectedChange={setSelected}
+          rowLabel={(row) => `Select ${row.name}`}
+        />
+      </div>
+      <Note>
+        The box in the head is derived, never passed: none, some — which is mixed — or all. The tick
+        is what says a row is taken; the fill is so a person can find them again.
+      </Note>
+    </Row>
+  );
+}
+
+/** One column at a time, with the arrow and `aria-sort` drawn by the part. */
+function TableSortRow() {
+  const [sort, setSort] = useState<TableSorting>({ column: 'turns', direction: 'descending' });
+  const ordered = [...SESSIONS].sort((left, right) => {
+    const way = sort.direction === 'ascending' ? 1 : -1;
+    return sort.column === 'turns'
+      ? (left.turns - right.turns) * way
+      : left.name.localeCompare(right.name) * way;
+  });
+  return (
+    <Row>
+      <LegendKey>sorted · totalled</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Table
+          caption="Sessions this week"
+          columns={[
+            { ...BOARD_COLUMNS[0], sortable: true },
+            BOARD_COLUMNS[1],
+            { ...BOARD_COLUMNS[2], sortable: true, footer: 47 },
+          ]}
+          rows={ordered}
+          rowKey={sessionKey}
+          sort={sort}
+          onSortChange={setSort}
+        />
+      </div>
+      <Note>
+        One column wears the arrow, because two is a state a table cannot be in. The table never
+        reorders the rows — the order is the surface's, and here the board sorts its own.
+      </Note>
+    </Row>
+  );
+}
+
+/** A head that stays, which is a band over the rows rather than a row. */
+function TableStickyRow() {
+  const many = Array.from({ length: 12 }, (_, index) => ({
+    id: `s${index}`,
+    name: `Session ${index + 1}`,
+    agent: index % 2 ? 'Codex' : 'Claude',
+    turns: (index * 7) % 40,
+  }));
+  return (
+    <Row>
+      <LegendKey>a head that stays</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Table columns={BOARD_COLUMNS} rows={many} rowKey={sessionKey} maxHeight={168} />
+      </div>
+      <Note>
+        A table told how tall it may be owns a scroll box, and its head stays in it. A head that
+        stays is no longer a row: it takes the region rung, because a transparent one is not a
+        quieter design — the records are painted through the column names.
+      </Note>
+    </Row>
+  );
+}
+
+/** Nothing to show, said across every column with the names still standing. */
+function TableEmptyRow() {
+  return (
+    <Row>
+      <LegendKey>nothing to show</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Table
+          columns={BOARD_COLUMNS}
+          rows={[]}
+          rowKey={sessionKey}
+          selected={[]}
+          onSelectedChange={() => {}}
+          empty="No sessions on this machine"
+        />
+      </div>
+    </Row>
+  );
+}
+
+/** A value is one line; a column of sentences says so and wraps. */
+function TableWrapRow() {
+  return (
+    <Row>
+      <LegendKey>one line · wrapped</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Table
+          layout="fixed"
+          columns={[
+            { key: 'name', header: 'Session', cell: (row) => row.name, width: 120 },
+            {
+              key: 'clipped',
+              header: 'One line',
+              width: 140,
+              cell: () => 'A value long enough to need the ellipsis it gets',
+            },
+            {
+              key: 'wrapped',
+              header: 'Sentences',
+              wrap: true,
+              cell: () => 'A column of sentences says wrap, and takes the room it needs.',
+            },
+          ]}
+          rows={SESSIONS.slice(0, 2)}
+          rowKey={sessionKey}
+        />
+      </div>
+    </Row>
+  );
+}
+
+/**
+ * The same table, in a box too narrow for its columns. Nothing here is a
+ * second copy: it is the markup above, asked about its own width.
+ */
+function TableStackRow() {
+  return (
+    <Row>
+      <LegendKey>too narrow for columns</LegendKey>
+      <div {...stylex.props(styles.narrowTable)}>
+        <Table columns={BOARD_COLUMNS} rows={SESSIONS.slice(0, 2)} rowKey={sessionKey} />
+      </div>
+      <Note>
+        A table narrower than its columns need is not a table with a scrollbar: it is a list of
+        records, each a stack of label-and-value lines. It asks about its own box rather than the
+        window, so a table in a narrow side panel stacks on a wide screen — and the labels are the
+        head's own words, which only a table that was told its columns can reach.
+      </Note>
+    </Row>
+  );
+}
+
+/** The elements, for a table that is not a list of records. */
+function TablePartsRow() {
+  return (
+    <Row>
+      <LegendKey>the parts</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <Table.Root size="large">
+          <Table.Body>
+            <Table.Row>
+              <Table.ColumnHeader scope="row">Agent</Table.ColumnHeader>
+              <Table.Cell>Claude</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.ColumnHeader scope="row">Project</Table.ColumnHeader>
+              <Table.Cell>Lody</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>
+      </div>
+      <Note>
+        A two-column list of facts is not a list of records, so it reads its labels as row headers
+        and assembles the elements itself.
+      </Note>
+    </Row>
+  );
+}
+
+function TableDimensions() {
+  const dimensions = [
+    { name: 'table.rowHeightSmall', value: tableTokens.rowHeightSmall },
+    { name: 'table.rowHeightMedium', value: tableTokens.rowHeightMedium },
+    { name: 'table.rowHeightLarge', value: tableTokens.rowHeightLarge },
+    { name: 'table.cellPaddingXSmall', value: tableTokens.cellPaddingXSmall },
+    { name: 'table.cellPaddingXMedium', value: tableTokens.cellPaddingXMedium },
+    { name: 'table.cellPaddingXLarge', value: tableTokens.cellPaddingXLarge },
+    { name: 'table.cellPaddingY', value: tableTokens.cellPaddingY },
+    { name: 'table.selectWidth', value: tableTokens.selectWidth },
+    { name: 'table.emptyHeight', value: tableTokens.emptyHeight },
+    { name: 'table.text', value: tableTokens.text },
+    { name: 'table.leading', value: tableTokens.leading },
+    { name: 'table.headText', value: tableTokens.headText },
+    { name: 'table.headLeading', value: tableTokens.headLeading },
+    { name: 'table.sortMarkSize', value: tableTokens.sortMarkSize },
+    { name: 'table.sortGap', value: tableTokens.sortGap },
+    { name: 'table.captionText', value: tableTokens.captionText },
+    { name: 'table.captionLeading', value: tableTokens.captionLeading },
+    { name: 'table.captionGap', value: tableTokens.captionGap },
+    { name: 'table.ringWidth', value: tableTokens.ringWidth },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+function PagerRow({
+  name,
+  pages,
+  start,
+  note,
+}: {
+  name: string;
+  pages: number;
+  start: number;
+  note?: string;
+}) {
+  const [page, setPage] = useState(start);
+  return (
+    <Row>
+      <LegendKey>{name}</LegendKey>
+      <Cluster>
+        <Pagination page={page} pages={pages} onPageChange={setPage} />
+      </Cluster>
+      {note ? <span {...stylex.props(styles.rungUse)}>{note}</span> : null}
+    </Row>
+  );
+}
+
+function CompactPagerRow({ jump }: { jump?: boolean }) {
+  const [page, setPage] = useState(4212);
+  return (
+    <Row>
+      <LegendKey>{jump ? 'compact · jump' : 'compact'}</LegendKey>
+      <Cluster>
+        <Pagination layout="compact" jump={jump} page={page} pages={9214} onPageChange={setPage} />
+      </Cluster>
+      <span {...stylex.props(styles.rungUse)}>
+        {jump
+          ? 'What it commits on is Enter or leaving the field, not every keystroke: typing 4-5 through a pager that navigates as you type visits page 4 on the way to page 45.'
+          : 'Nine thousand pages are not a list. The position is said to a screen reader as a sentence, because "4212 / 9214" is read as a slash.'}
+      </span>
+    </Row>
+  );
+}
+
+function PagerSizeRow() {
+  const [page, setPage] = useState(2);
+  return (
+    <Row>
+      <LegendKey>small · 28</LegendKey>
+      <Cluster>
+        <Pagination size="small" page={page} pages={6} onPageChange={setPage} />
+      </Cluster>
+    </Row>
+  );
+}
+
+function PagerDimensions() {
+  const dimensions = [
+    { name: 'table.pagerGap', value: tableTokens.pagerGap },
+    { name: 'table.pagerPositionGap', value: tableTokens.pagerPositionGap },
+    { name: 'table.pagerJumpWidth', value: tableTokens.pagerJumpWidth },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** The block itself: a heading, the body a caller writes, and the answers. */
+function CardRow() {
+  return (
+    <Row>
+      <LegendKey>card</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock, styles.pageRung)}>
+        <Card.Root>
+          <Card.Header>
+            <Card.Title as="h4">Worktree setup</Card.Title>
+            <Card.Description>
+              Commands that run once, before the agent takes the session.
+            </Card.Description>
+          </Card.Header>
+          <Field.Root name="setup">
+            <Field.Label>Setup command</Field.Label>
+            <Input size="small" placeholder="pnpm install" />
+          </Field.Root>
+          <Card.Footer>
+            <Button variant="ghost" size="small">
+              Reset
+            </Button>
+            <Button size="small">Save</Button>
+          </Card.Footer>
+        </Card.Root>
+      </div>
+    </Row>
+  );
+}
+
+/**
+ * A card that is the pressable thing. The button is the board's, because the
+ * primitive marks the card and leaves what a press does to the surface.
+ */
+function InteractiveCardRow() {
+  return (
+    <Row>
+      <LegendKey>interactive</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock, styles.pageRung)}>
+        <button type="button" {...stylex.props(styles.cardButton)}>
+          <Card.Root interactive>
+            <Card.Header>
+              <Card.Title as="h4">Agents</Card.Title>
+              <Card.Description>Which agent answers, and with what tools.</Card.Description>
+            </Card.Header>
+          </Card.Root>
+        </button>
+      </div>
+      <Note>
+        Only the fill answers the pointer. The ladder names the region rung for this, and in the
+        dark palette that is the card rung's own value — so the hover is mixed toward label instead,
+        the way a row's highlight is.
+      </Note>
+    </Row>
+  );
+}
+
+function CardDimensions() {
+  const dimensions = [
+    { name: 'card.radius', value: cardTokens.radius },
+    { name: 'card.padding', value: cardTokens.padding },
+    { name: 'card.gap', value: cardTokens.gap },
+    { name: 'card.headerGap', value: cardTokens.headerGap },
+    { name: 'card.footerGap', value: cardTokens.footerGap },
+    { name: 'card.titleSize', value: cardTokens.titleSize },
+    { name: 'card.titleLeading', value: cardTokens.titleLeading },
+    { name: 'card.descriptionSize', value: cardTokens.descriptionSize },
+    { name: 'card.descriptionLeading', value: cardTokens.descriptionLeading },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** The four things a badge can state, and what a caller's glyph does to one. */
+function BadgeToneRow() {
+  return (
+    <Row>
+      <LegendKey>tones</LegendKey>
+      <Cluster>
+        {BADGE_TONES.map((tone) => (
+          <Badge key={tone} tone={tone}>
+            {tone}
+          </Badge>
+        ))}
+        <Badge icon={<TickGlyph />}>Verified</Badge>
+        <Badge>v1.42.0</Badge>
+        <Badge className={stylex.props(styles.badgeClamp).className}>
+          A plan name nobody shortened
+        </Badge>
+      </Cluster>
+    </Row>
+  );
+}
+
+/** A line between rows, and the same line down a row of controls. */
+function SeparatorRow() {
+  return (
+    <Row>
+      <LegendKey>separator</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <div {...stylex.props(styles.separatorRow)}>
+          <span {...stylex.props(styles.separatorText)}>lody-mac-studio</span>
+          <Separator />
+          <span {...stylex.props(styles.separatorText)}>lody-thinkpad</span>
+          <Separator />
+          <span {...stylex.props(styles.separatorText)}>lody-ci-runner</span>
+        </div>
+      </div>
+      <div {...stylex.props(styles.separatorToolbar)}>
+        <Button variant="ghost" size="small">
+          Previous
+        </Button>
+        <Separator orientation="vertical" />
+        <Button variant="ghost" size="small">
+          Next
+        </Button>
+      </div>
+    </Row>
+  );
+}
+
+function BadgeDimensions() {
+  const dimensions = [
+    { name: 'badge.height', value: badgeTokens.height },
+    { name: 'badge.radius', value: badgeTokens.radius },
+    { name: 'badge.paddingX', value: badgeTokens.paddingX },
+    { name: 'badge.gap', value: badgeTokens.gap },
+    { name: 'badge.glyphSize', value: badgeTokens.glyphSize },
+    { name: 'badge.labelSize', value: badgeTokens.labelSize },
+    { name: 'badge.labelLeading', value: badgeTokens.labelLeading },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/**
+ * A caller's mark inside a fallback, drawn here rather than in
+ * `internal/glyphs` because it is exactly that: a caller's. The package draws
+ * the marks that belong to a part — an accordion's chevron, a message's tone —
+ * and a face-shaped stand-in belongs to the surface that knows it has no name
+ * to make letters out of.
+ */
+function PersonGlyph() {
+  return (
+    <svg {...stylex.props(styles.avatarGlyph)} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d="M8 8.5a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5ZM2.75 14c0-2.6 2.35-4 5.25-4s5.25 1.4 5.25 4"
+        stroke="currentColor"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** The ladder, and the letters each rung picks for itself. */
+function AvatarSizeRow({ name, size, use }: { name: string; size: AvatarSize; use: string }) {
+  const { ref, value } = useMeasured<HTMLSpanElement>('width');
+  return (
+    <Row>
+      <LegendKey>{name}</LegendKey>
+      <Cluster>
+        <Avatar.Root ref={ref} size={size}>
+          <Avatar.Fallback>WW</Avatar.Fallback>
+        </Avatar.Root>
+        <Avatar.Root size={size}>
+          <Avatar.Image src={SAMPLE_FACE} alt="" />
+          <Avatar.Fallback>WW</Avatar.Fallback>
+        </Avatar.Root>
+        <Avatar.Root size={size} shape="tile">
+          <Avatar.Fallback>L</Avatar.Fallback>
+        </Avatar.Root>
+      </Cluster>
+      <span {...stylex.props(styles.readout)}>{value}</span>
+      <span {...stylex.props(styles.rungUse)}>{use}</span>
+    </Row>
+  );
+}
+
+/**
+ * The two shapes, side by side at one rung. A circle is a person and a tile is
+ * a thing, and the tile's corner comes from the radius-by-size table rather
+ * than from a token of its own.
+ */
+function AvatarShapeRow() {
+  return (
+    <Row>
+      <LegendKey>shape</LegendKey>
+      <Cluster>
+        <Avatar.Root size="large">
+          <Avatar.Fallback>ZX</Avatar.Fallback>
+        </Avatar.Root>
+        <Avatar.Root size="large" shape="tile">
+          <Avatar.Fallback>LY</Avatar.Fallback>
+        </Avatar.Root>
+      </Cluster>
+      <span {...stylex.props(styles.rungUse)}>
+        circle · a person, at radius.full on corner.round — a squircle there is a superellipse,
+        which turns a face into a rounded square. tile · a thing, whose mark was drawn square.
+      </span>
+    </Row>
+  );
+}
+
+/**
+ * What is standing in, and what it is standing in for. Base UI picks between
+ * the two from the image's own loading status, so a surface writes both and
+ * never writes the condition — a broken URL leaves the letters up rather than
+ * flashing a torn image over them.
+ */
+function AvatarFallbackRow() {
+  return (
+    <Row>
+      <LegendKey>fallback</LegendKey>
+      <Cluster>
+        <Avatar.Root size="large">
+          <Avatar.Image src={SAMPLE_FACE} alt="" />
+          <Avatar.Fallback>ZX</Avatar.Fallback>
+        </Avatar.Root>
+        <Avatar.Root size="large">
+          <Avatar.Image src="https://lody.invalid/gone.png" alt="" />
+          <Avatar.Fallback>ZX</Avatar.Fallback>
+        </Avatar.Root>
+        <Avatar.Root size="large">
+          <Avatar.Fallback>
+            <Avatar.Glyph>
+              <PersonGlyph />
+            </Avatar.Glyph>
+          </Avatar.Fallback>
+        </Avatar.Root>
+        <Avatar.Root size="large" shape="tile">
+          <Avatar.Fallback style={{ backgroundColor: 'hsl(268 62% 52%)', color: 'hsl(0 0% 100%)' }}>
+            L
+          </Avatar.Fallback>
+        </Avatar.Root>
+      </Cluster>
+      <span {...stylex.props(styles.rungUse)}>
+        a picture · letters, when the URL is gone · a mark, when there is no name to make letters
+        out of · an identity colour, which is the surface&apos;s: which hue belongs to which
+        workspace is a product fact and not a token.
+      </span>
+    </Row>
+  );
+}
+
+function AvatarDimensions() {
+  const dimensions = [
+    { name: 'avatar.sizeMini', value: avatarTokens.sizeMini },
+    { name: 'avatar.sizeSmall', value: avatarTokens.sizeSmall },
+    { name: 'avatar.sizeMedium', value: avatarTokens.sizeMedium },
+    { name: 'avatar.sizeLarge', value: avatarTokens.sizeLarge },
+    { name: 'avatar.sizeXlarge', value: avatarTokens.sizeXlarge },
+    { name: 'avatar.initialsMini', value: avatarTokens.initialsMini },
+    { name: 'avatar.initialsSmall', value: avatarTokens.initialsSmall },
+    { name: 'avatar.initialsMedium', value: avatarTokens.initialsMedium },
+    { name: 'avatar.initialsLarge', value: avatarTokens.initialsLarge },
+    { name: 'avatar.initialsXlarge', value: avatarTokens.initialsXlarge },
+    { name: 'avatar.glyphMini', value: avatarTokens.glyphMini },
+    { name: 'avatar.glyphSmall', value: avatarTokens.glyphSmall },
+    { name: 'avatar.glyphMedium', value: avatarTokens.glyphMedium },
+    { name: 'avatar.glyphLarge', value: avatarTokens.glyphLarge },
+    { name: 'avatar.glyphXlarge', value: avatarTokens.glyphXlarge },
+    { name: 'avatar.tileRadiusMini', value: avatarTokens.tileRadiusMini },
+    { name: 'avatar.tileRadiusSmall', value: avatarTokens.tileRadiusSmall },
+    { name: 'avatar.tileRadiusMedium', value: avatarTokens.tileRadiusMedium },
+    { name: 'avatar.tileRadiusLarge', value: avatarTokens.tileRadiusLarge },
+    { name: 'avatar.tileRadiusXlarge', value: avatarTokens.tileRadiusXlarge },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+/** Single keys, and the chords they are pressed in. */
+function KbdRow() {
+  return (
+    <Row>
+      <LegendKey>keys</LegendKey>
+      <Cluster>
+        <Kbd>&#8593;</Kbd>
+        <Kbd>&#8595;</Kbd>
+        <Kbd>&#8629;</Kbd>
+        <Kbd>esc</Kbd>
+        <Kbd>Shift</Kbd>
+        <KbdGroup>
+          <Kbd>&#8984;</Kbd>
+          <Kbd>K</Kbd>
+        </KbdGroup>
+        <KbdGroup>
+          <Kbd>&#8984;</Kbd>
+          <Kbd>&#8679;</Kbd>
+          <Kbd>P</Kbd>
+        </KbdGroup>
+      </Cluster>
+      <span {...stylex.props(styles.rungUse)}>
+        one cap is at least as wide as it is tall, so a chord of `K` and `Shift` does not jump
+        between eight pixels and forty. A group is a kbd around kbds, which is what HTML gives this
+        shape.
+      </span>
+    </Row>
+  );
+}
+
+/**
+ * The same caps standing on the one surface that inverts.
+ *
+ * This is the row that would catch the regression: a cap carrying the page's
+ * own gray onto a tooltip is a light chip on a dark one with the letters gone.
+ * `Tooltip.Content` declares `kbdOnInvertedTheme` on its popup, and the board
+ * composes the very same two styles rather than describing them, so a chip this
+ * package no longer draws cannot be reported here.
+ */
+function KbdOnChipRow() {
+  return (
+    <Row>
+      <LegendKey>on a tooltip</LegendKey>
+      <Cluster>
+        <div
+          {...stylex.props(
+            chip.popup,
+            kbdOnInvertedTheme,
+            styles.tooltipReplica,
+            styles.tooltipReplicaRow
+          )}
+        >
+          <span>Open the command palette</span>
+          <KbdGroup>
+            <Kbd>&#8984;</Kbd>
+            <Kbd>K</Kbd>
+          </KbdGroup>
+        </div>
+      </Cluster>
+      <span {...stylex.props(styles.rungUse)}>
+        A component token group is how a surface tells what is inside it what it is standing on.
+        StyleX has no descendant selector, and unlike the one the deleted implementation used it
+        also reaches a cap a caller wrapped in something of their own.
+      </span>
+    </Row>
+  );
+}
+
+function KbdDimensions() {
+  const dimensions = [
+    { name: 'kbd.height', value: kbdTokens.height },
+    { name: 'kbd.minWidth', value: kbdTokens.minWidth },
+    { name: 'kbd.paddingX', value: kbdTokens.paddingX },
+    { name: 'kbd.gap', value: kbdTokens.gap },
+    { name: 'kbd.radius', value: kbdTokens.radius },
+    { name: 'kbd.labelSize', value: kbdTokens.labelSize },
+    { name: 'kbd.labelLeading', value: kbdTokens.labelLeading },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+const TOGGLE_SIZES: { name: string; size: ToggleSize }[] = [
+  { name: 'mini · 24', size: 'mini' },
+  { name: 'small · 28', size: 'small' },
+  { name: 'medium · 32', size: 'medium' },
+  { name: 'large · 36', size: 'large' },
+];
+
+const TOGGLE_COLORS = [
+  {
+    name: 'toggle.label',
+    value: toggleTokens.label,
+    note: 'off: about the thing it acts on',
+  },
+  { name: 'toggle.hover', value: toggleTokens.hover, note: 'the pointer, on an off toggle' },
+  { name: 'toggle.activeLabel', value: toggleTokens.activeLabel, note: 'on: it is the thing' },
+  {
+    name: 'toggle.pressedBackground',
+    value: toggleTokens.pressedBackground,
+    note: 'on: the well, not ink',
+  },
+  { name: 'toggle.ring', value: toggleTokens.ring, note: 'where the keyboard is' },
+];
+
+/** A mark for the board's toggles, sized by the box the control gives it. */
+function BoldGlyph() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 3h4a2.5 2.5 0 0 1 0 5H5zM5 8h4.6a2.5 2.5 0 0 1 0 5H5z" />
+    </svg>
+  );
+}
+
+function WrapGlyph() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2.5 4h11M2.5 12h4M2.5 8h8.5a2.25 2.25 0 0 1 0 4.5H9.5M11 11l-1.5 1.5L11 14" />
+    </svg>
+  );
+}
+
+/**
+ * The two states, side by side, and the edge the pressed one carries.
+ *
+ * This is the one row that has to be read rather than described: off is a ghost
+ * Button and on is the well rung, which is the decision the whole family rests
+ * on. Ink would have been the other answer — the rules give a stored state ink
+ * — and ink is what a control that already sits in a well becomes when it is
+ * on. A toggle rests on nothing, so the well is still free.
+ */
+function ToggleStateRow() {
+  const { ref, value } = useMeasured<HTMLButtonElement>('box-shadow');
+  return (
+    <Row>
+      <LegendKey>off and on</LegendKey>
+      <Cluster>
+        <Toggle size="small">Wrap lines</Toggle>
+        <Toggle ref={ref} size="small" defaultPressed>
+          Wrap lines
+        </Toggle>
+        <Toggle size="small" icon aria-label="Bold">
+          <BoldGlyph />
+        </Toggle>
+        <Toggle size="small" icon defaultPressed aria-label="Wrap lines">
+          <WrapGlyph />
+        </Toggle>
+      </Cluster>
+      <span {...stylex.props(styles.readout)}>toggle.pressedWell {value}</span>
+    </Row>
+  );
+}
+
+/** One rung of the ladder, pressed so the row reads as a row. */
+function ToggleSizeRow({ name, size }: { name: string; size: ToggleSize }) {
+  const { ref, value } = useMeasured<HTMLButtonElement>('height');
+  return (
+    <Row>
+      <LegendKey>{name}</LegendKey>
+      <Cluster>
+        <Toggle ref={ref} size={size} defaultPressed>
+          Running
+        </Toggle>
+        <Toggle size={size}>Archived</Toggle>
+        <Toggle size={size} icon aria-label="Bold">
+          <BoldGlyph />
+        </Toggle>
+      </Cluster>
+      <span {...stylex.props(styles.readout)}>{value}</span>
+    </Row>
+  );
+}
+
+/** The second shape: a filter a person scans a row of rather than a control. */
+function TogglePillRow() {
+  return (
+    <Row>
+      <LegendKey>pill</LegendKey>
+      <Cluster>
+        <Toggle size="small" shape="pill" defaultPressed>
+          Running
+        </Toggle>
+        <Toggle size="small" shape="pill">
+          Needs review
+        </Toggle>
+        <Toggle size="small" shape="pill">
+          Archived
+        </Toggle>
+      </Cluster>
+      <Note>
+        A pill takes `corner.round`, because a squircle at `radius.full` is a superellipse rather
+        than the stadium the shape is named for.
+      </Note>
+    </Row>
+  );
+}
+
+/** A toggle nobody can press, reporting the one opacity the family dims with. */
+function ToggleDisabledRow() {
+  const { ref, value } = useMeasured<HTMLButtonElement>('opacity');
+  return (
+    <Row>
+      <LegendKey>disabled</LegendKey>
+      <Cluster>
+        <Toggle size="small" disabled>
+          Wrap lines
+        </Toggle>
+        <Toggle ref={ref} size="small" defaultPressed disabled>
+          Wrap lines
+        </Toggle>
+      </Cluster>
+      <span {...stylex.props(styles.readout)}>toggle.disabledOpacity {value}</span>
+    </Row>
+  );
+}
+
+/**
+ * The same three choices as a strip and as a set, which is the comparison this
+ * section exists to make.
+ *
+ * A `Tabs` strip picks what a person *sees*: one control, so a sunken track
+ * with one thing raised out of it and a pill that slides. A `ToggleGroup`
+ * stores what is *on*: no track, and each member sinking on its own — because
+ * two of them can be pressed at once, and a sliding pill cannot say that.
+ */
+function ToggleSetRow() {
+  return (
+    <Row>
+      <LegendKey>set, and a strip</LegendKey>
+      <Cluster>
+        <ToggleGroup size="small" defaultValue={['board']}>
+          <Toggle value="board">Board</Toggle>
+          <Toggle value="list">List</Toggle>
+          <Toggle value="timeline">Timeline</Toggle>
+        </ToggleGroup>
+        <Tabs.Root defaultValue="board">
+          <Tabs.List size="small">
+            <Tabs.Tab value="board">Board</Tabs.Tab>
+            <Tabs.Tab value="list">List</Tabs.Tab>
+            <Tabs.Tab value="timeline">Timeline</Tabs.Tab>
+          </Tabs.List>
+        </Tabs.Root>
+      </Cluster>
+      <Note>
+        The set on the left and the strip on the right hold the same three words and are not the
+        same part. Only the strip is one control, so only the strip has a track.
+      </Note>
+    </Row>
+  );
+}
+
+/** Several at once, wrapping — the state no strip can describe. */
+function ToggleMultipleRow() {
+  return (
+    <Row>
+      <LegendKey>several at once</LegendKey>
+      <div {...stylex.props(styles.disclosureBlock)}>
+        <ToggleGroup multiple wrap size="mini" defaultValue={['status', 'assignee']}>
+          <Toggle value="status">Status</Toggle>
+          <Toggle value="assignee">Assignee</Toggle>
+          <Toggle value="labels">Labels</Toggle>
+          <Toggle value="due">Due date</Toggle>
+          <Toggle value="project">Project</Toggle>
+        </ToggleGroup>
+      </div>
+    </Row>
+  );
+}
+
+/**
+ * The bar, with two clusters and the one line between them.
+ *
+ * It draws nothing: what is under it here is the board's own panel. The gap
+ * between the clusters is wider than the gap inside one, which is the only
+ * thing the bar says about what belongs with what — beyond the line, and beyond
+ * making the whole row a single tab stop.
+ */
+function ToolbarRow() {
+  return (
+    <Row>
+      <LegendKey>bar</LegendKey>
+      <Cluster>
+        <Toolbar.Root aria-label="Format selection">
+          <Toolbar.Group aria-label="Marks">
+            <Toolbar.Button render={<Toggle size="small" icon aria-label="Bold" />}>
+              <BoldGlyph />
+            </Toolbar.Button>
+            <Toolbar.Button
+              render={<Toggle size="small" icon defaultPressed aria-label="Wrap lines" />}
+            >
+              <WrapGlyph />
+            </Toolbar.Button>
+          </Toolbar.Group>
+          <Toolbar.Separator />
+          <Toolbar.Group aria-label="Actions">
+            <Toolbar.Button
+              render={<Button variant="ghost" size="small" icon aria-label="Add a link" />}
+            >
+              <PlusGlyph />
+            </Toolbar.Button>
+            <Toolbar.Button render={<Button variant="ghost" size="small" />}>Quote</Toolbar.Button>
+          </Toolbar.Group>
+        </Toolbar.Root>
+      </Cluster>
+      <Note>
+        A bar is one tab stop and the arrow keys walk it, which is why it is a part rather than a
+        row with a gap: eight icon buttons are otherwise eight stops on the way past them.
+      </Note>
+    </Row>
+  );
+}
+
+function ToggleDimensions() {
+  const dimensions = [
+    { name: 'toggle.heightMini', value: toggleTokens.heightMini },
+    { name: 'toggle.heightSmall', value: toggleTokens.heightSmall },
+    { name: 'toggle.heightMedium', value: toggleTokens.heightMedium },
+    { name: 'toggle.heightLarge', value: toggleTokens.heightLarge },
+    { name: 'toggle.paddingXMini', value: toggleTokens.paddingXMini },
+    { name: 'toggle.paddingXSmall', value: toggleTokens.paddingXSmall },
+    { name: 'toggle.paddingXMedium', value: toggleTokens.paddingXMedium },
+    { name: 'toggle.paddingXLarge', value: toggleTokens.paddingXLarge },
+    { name: 'toggle.radiusMini', value: toggleTokens.radiusMini },
+    { name: 'toggle.radiusSmall', value: toggleTokens.radiusSmall },
+    { name: 'toggle.radiusMedium', value: toggleTokens.radiusMedium },
+    { name: 'toggle.textMini', value: toggleTokens.textMini },
+    { name: 'toggle.text', value: toggleTokens.text },
+    { name: 'toggle.gap', value: toggleTokens.gap },
+    { name: 'toggle.iconSize', value: toggleTokens.iconSize },
+    { name: 'toggle.groupGap', value: toggleTokens.groupGap },
+    { name: 'toggle.barGap', value: toggleTokens.barGap },
+    { name: 'toggle.ringWidth', value: toggleTokens.ringWidth },
+  ];
+  return (
+    <Row>
+      <LegendKey>dimensions</LegendKey>
+      <div {...stylex.props(styles.replicaCaption)}>
+        <dl {...stylex.props(styles.constList)}>
+          {dimensions.map((entry) => (
+            <WidthProbeRow key={entry.name} {...entry} />
+          ))}
+        </dl>
+      </div>
+    </Row>
+  );
+}
+
+function ButtonFocusRow() {
+  const { ref, value } = useMeasured<HTMLDivElement>('box-shadow');
+  return (
+    <Row>
+      <LegendKey>focus</LegendKey>
+      <Cluster>
+        <div ref={ref} {...stylex.props(styles.buttonFocusReplica)}>
+          Keyboard focus
+        </div>
+      </Cluster>
+      <span {...stylex.props(styles.readout)}>{value}</span>
+    </Row>
+  );
+}
+
+function FocusRingRow() {
+  const { ref, value } = useMeasured<HTMLDivElement>('box-shadow');
+  return (
+    <FieldRow legend="focus" readout={value}>
+      <div ref={ref} {...stylex.props(styles.focusReplica)}>
+        Describe the task
+      </div>
+    </FieldRow>
+  );
+}
+
+/**
+ * The `@lody/ui` token board: every semantic token and every Button state,
+ * rendered from the tokens themselves so the board cannot drift from them.
+ */
+export function UiGallery({ palettes = 'both' }: UiGalleryProps) {
+  return (
+    <Board>
+      <BoardHeader
+        title="Lody UI"
+        lead="Token board and primitive gallery for @lody/ui. Every colour, elevation rung, shadow, radius, control size, type step and Button state, rendered from the tokens in both palettes. Values under each sample are read back from the rendered node, so this board reports what the tokens produce rather than a copy of them."
+      />
+
+      <Section
+        title="Surfaces"
+        rule="Depth without lines. No border token exists: surfaces separate by luminance step and shadow."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Grid>
+            {SURFACES.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Elevation ladder"
+        rule="One rung per component. The rung fixes background and shadow together."
+      >
+        <PaletteSplit palettes={palettes}>
+          <div {...stylex.props(styles.stage)}>
+            {RUNGS.map((rung) => (
+              <div key={rung.name} {...stylex.props(styles.rung, rung.style)}>
+                <span {...stylex.props(styles.rungName)}>{rung.name}</span>
+                <span {...stylex.props(styles.rungUse)}>{rung.use}</span>
+              </div>
+            ))}
+          </div>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Content"
+        rule="label is the thing, secondaryLabel is about the thing, tertiaryLabel is a hint."
+      >
+        <PaletteSplit palettes={palettes}>
+          <div {...stylex.props(styles.textSample)}>
+            <span {...stylex.props(dyn.text(colors.label))}>label — Session started</span>
+            <span {...stylex.props(dyn.text(colors.secondaryLabel))}>
+              secondaryLabel — 4 files changed
+            </span>
+            <span {...stylex.props(dyn.text(colors.tertiaryLabel))}>
+              tertiaryLabel — Describe the task
+            </span>
+          </div>
+          <Grid>
+            {CONTENT_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Fills and edges"
+        rule="separator divides list and table rows only, never around a surface. The ring is 2px, tight to the control, no glow."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <div {...stylex.props(styles.hoverRow, styles.hoverFill)}>hoverFill</div>
+            <div {...stylex.props(styles.hoverRow, styles.selectedFill)}>selectedFill</div>
+            <div {...stylex.props(styles.separatorRow)}>
+              <span {...stylex.props(styles.separatorText)}>separator — first row</span>
+              <Separator />
+              <span {...stylex.props(styles.separatorText)}>separator — next row</span>
+            </div>
+            <div {...stylex.props(styles.overlaySample)}>overlay</div>
+            <Cluster>
+              <div {...stylex.props(styles.ring, styles.ringAccent)}>focus ring · accent</div>
+              <div {...stylex.props(styles.ring, styles.ringDestructive)}>
+                invalid · destructive
+              </div>
+            </Cluster>
+          </Rows>
+          <Grid>
+            {FILLS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Roles"
+        rule="accent marks live state only — focus, link, running — and is never a button fill. Ink carries stored state instead."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Grid>
+            {ROLE_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Gray ramp"
+        rule="Semantic first, gray second. These are for things with no role: scrollbar, track, kbd, skeleton."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Grid>
+            {GRAYS.map((token) => (
+              <Swatch key={token.name} {...token} note="no role" />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section title="Shadows" rule="Strength by rung. Dark palettes add an inset top highlight.">
+        <PaletteSplit palettes={palettes}>
+          <Grid>
+            {SHADOWS.map((token) => (
+              <ShadowChip key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Corners"
+        rule="corner.shape (squircle) rides along with every radius except radius.full, which is a pill or a circle and takes corner.round: a squircle at that radius is a superellipse, not a stadium, so it would turn a switch track into a rounded rectangle and a radio into a squircle. Round corners outside Chromium are the accepted fallback. Nested radius is outer minus inset."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Grid>
+            {RADII.map((token) => (
+              <RadiusChip key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Control sizes"
+        rule="28 / 32 / 36. Default 32; 36 only for empty states and onboarding. Icon-only buttons are square at the size's height."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            {CONTROL_SIZES.map((token) => (
+              <ControlRow key={token.name} {...token} />
+            ))}
+          </Rows>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Type"
+        rule="Controls at 13 with weight 500 and controlTracking. Prose at 14. Field labels and help at 12."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            {TYPE_SCALE.map((token) => (
+              <TypeRow key={token.name} {...token} />
+            ))}
+          </Rows>
+        </PaletteSplit>
+      </Section>
+
+      <Section title="Space" rule="The spacing step used for gaps, padding and stack rhythm.">
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            {SPACES.map((token) => (
+              <SpaceRow key={token.name} {...token} />
+            ))}
+          </Rows>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Motion"
+        rule="The distance a thing travels picks its step. Press translates 1px and drops the ink edge at duration.fast. A popup rises 4px at duration.regular. A drawer crosses the window at duration.slow, because 180ms over 600px reads as a snap rather than a slide. One easing throughout. Hover a chip to see its duration."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Cluster>
+            <div {...stylex.props(styles.motionChip, dyn.transition(duration.fast))}>
+              duration.fast · press, cross-fade
+            </div>
+            <div {...stylex.props(styles.motionChip, dyn.transition(duration.regular))}>
+              duration.regular · rise
+            </div>
+            <div {...stylex.props(styles.motionChip, dyn.transition(duration.slow))}>
+              duration.slow · a drawer crossing the window
+            </div>
+          </Cluster>
+        </PaletteSplit>
+      </Section>
+
+      <Section title="Constants" rule="Compile-time values; they are the same in both palettes.">
+        <PaletteSplit palettes={palettes}>
+          <dl {...stylex.props(styles.constList)}>
+            {CONSTS.map((entry) => (
+              <div key={entry.name} {...stylex.props(styles.constRow)}>
+                <dt {...stylex.props(styles.constName)}>{entry.name}</dt>
+                <dd {...stylex.props(styles.constValue)}>{entry.value}</dd>
+              </div>
+            ))}
+          </dl>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Button · variants and sizes"
+        rule="Variant carries the role, size carries the density. Visual choices are props; callers never restyle a button."
+      >
+        <PaletteSplit palettes={palettes}>
+          <div {...stylex.props(styles.matrix)}>
+            {BUTTON_VARIANTS.map((variant) => (
+              <Fragment key={variant}>
+                <LegendKey>{variant}</LegendKey>
+                <Cluster>
+                  {BUTTON_SIZES.map((size) => (
+                    <Button key={size} variant={variant} size={size}>
+                      {size}
+                    </Button>
+                  ))}
+                </Cluster>
+              </Fragment>
+            ))}
+          </div>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Button · states, tone, shape, icons"
+        rule="Disabled is 45% opacity on the whole control, not a colour. Destructive tone tints a quiet variant; the destructive variant fills. The focus ring is a box-shadow composed with the variant's own edge, never an outline."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <Row>
+              <LegendKey>disabled</LegendKey>
+              <Cluster>
+                <Button disabled>Primary</Button>
+                <Button variant="secondary" disabled>
+                  Secondary
+                </Button>
+                <Button variant="ghost" disabled>
+                  Ghost
+                </Button>
+                <Button variant="destructive" disabled>
+                  Delete
+                </Button>
+              </Cluster>
+            </Row>
+            <Row>
+              <LegendKey>tone=&quot;destructive&quot;</LegendKey>
+              <Cluster>
+                <Button variant="secondary" tone="destructive">
+                  Remove
+                </Button>
+                <Button variant="ghost" tone="destructive">
+                  Remove
+                </Button>
+                <Button variant="link" tone="destructive">
+                  Remove
+                </Button>
+                <Button variant="destructive">Delete session</Button>
+              </Cluster>
+            </Row>
+            <Row>
+              <LegendKey>shape=&quot;pill&quot;</LegendKey>
+              <Cluster>
+                <Button shape="pill">Send</Button>
+                <Button variant="secondary" shape="pill">
+                  Draft
+                </Button>
+                <Button shape="pill" icon aria-label="Add attachment">
+                  <PlusGlyph />
+                </Button>
+              </Cluster>
+            </Row>
+            <Row>
+              <LegendKey>icon</LegendKey>
+              <Cluster>
+                {BUTTON_SIZES.map((size) => (
+                  <Button
+                    key={size}
+                    size={size}
+                    variant="secondary"
+                    icon
+                    aria-label={`Add ${size}`}
+                  >
+                    <PlusGlyph />
+                  </Button>
+                ))}
+                <Button>
+                  <PlusGlyph />
+                  With label
+                </Button>
+              </Cluster>
+            </Row>
+            <ButtonFocusRow />
+            <Row>
+              <LegendKey>render</LegendKey>
+              <Cluster>
+                <Button variant="link" render={<a href="#gallery" />}>
+                  Anchor as a button
+                </Button>
+              </Cluster>
+            </Row>
+          </Rows>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Field · label, control, help, error"
+        rule="One token group serves the whole family, so a state has one colour in one place. Field.Root owns name, disabled and validity; the label, control, help and error read that state instead of taking their own copies. Field.Root renders its validity as aria-invalid, and the ring follows that attribute, so a surface holding its own validation reaches the same state on a bare control."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <FieldRow legend="anatomy">
+              <Field.Root name="title">
+                <Field.Label>Session title</Field.Label>
+                <Input placeholder="Describe the task" />
+                <Field.Description>Shown in the sidebar and on the session card.</Field.Description>
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="filled">
+              <Field.Root name="title">
+                <Field.Label>Session title</Field.Label>
+                <Input defaultValue="Rebuild the composer" />
+              </Field.Root>
+            </FieldRow>
+            <InvalidFieldRow />
+            <FieldRow legend={'invalid \u00b7 aria-invalid'}>
+              <Field.Label htmlFor="gallery-aria-invalid">Session title</Field.Label>
+              <Input id="gallery-aria-invalid" aria-invalid placeholder="Describe the task" />
+            </FieldRow>
+            <FieldRow legend="disabled">
+              <Field.Root name="title" disabled>
+                <Field.Label>Session title</Field.Label>
+                <Input defaultValue="Rebuild the composer" />
+                <Field.Description>Locked while the session runs.</Field.Description>
+              </Field.Root>
+            </FieldRow>
+            <FocusRingRow />
+          </Rows>
+          <Grid>
+            {FIELD_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="field.well"
+              box={field.well}
+              fill={field.background}
+              ink={false}
+              note="the control is sunken, not outlined"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Field · sizes and Textarea"
+        rule="28 / 32 / 36, the same ladder as Button, with radius small at 28 and medium at 32 and 36. Textarea is the same well at the medium radius and grows downward."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            {FIELD_SIZES.map((entry) => (
+              <FieldSizeRow key={entry.size} {...entry} />
+            ))}
+            <FieldRow legend="textarea">
+              <Field.Root name="summary">
+                <Field.Label>What should the agent do?</Field.Label>
+                <Textarea placeholder="Describe the task" rows={3} />
+                <Field.Description>Enter sends; Shift+Enter adds a line.</Field.Description>
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="textarea · invalid">
+              <Field.Root name="summary" invalid>
+                <Field.Label>What should the agent do?</Field.Label>
+                <Textarea defaultValue="" placeholder="Describe the task" rows={3} />
+                <Field.Error match>Describe the task before starting.</Field.Error>
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="textarea · disabled">
+              <Field.Root name="summary" disabled>
+                <Field.Label>What should the agent do?</Field.Label>
+                <Textarea defaultValue="Rebuild the composer" resize="none" rows={3} />
+              </Field.Root>
+            </FieldRow>
+          </Rows>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Field · Checkbox, Radio, Switch"
+        rule="The same well, ring and disabled treatment as the text controls, drawn as a 16px box and a 28px track. Stored state is ink: the label fill with the background mark and the primary button's own top highlight, because accent stays on live state and is never a fill. A mixed box announces mixed and draws the dash rather than falling back to a tick it does not hold."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <ChoiceRow legend="checkbox">
+              <Field.Label>
+                <Checkbox />
+                Include diffs
+              </Field.Label>
+              <Field.Label>
+                <Checkbox indeterminate />
+                Some files
+              </Field.Label>
+            </ChoiceRow>
+            <CheckedInkRow />
+            <ChoiceRow legend={'checkbox \u00b7 invalid'}>
+              <Field.Root invalid>
+                <Field.Label>
+                  <Checkbox />
+                  Accept the terms
+                </Field.Label>
+                <Field.Error match>Tick this to continue.</Field.Error>
+              </Field.Root>
+            </ChoiceRow>
+            <ChoiceRow legend={'checkbox \u00b7 disabled'}>
+              <Field.Root disabled>
+                <Field.Label>
+                  <Checkbox defaultChecked />
+                  Include diffs
+                </Field.Label>
+              </Field.Root>
+            </ChoiceRow>
+            <ChoiceRow legend="radio">
+              <RadioGroup name="gallery-review" defaultValue="ask">
+                <Field.Label>
+                  <Radio value="ask" />
+                  Ask before reviewing
+                </Field.Label>
+                <Field.Label>
+                  <Radio value="auto" />
+                  Review every push
+                </Field.Label>
+              </RadioGroup>
+            </ChoiceRow>
+            <SwitchTrackRow />
+            <ChoiceRow legend={'switch \u00b7 disabled'}>
+              <Field.Root disabled>
+                <Field.Label>
+                  <Switch defaultChecked />
+                  Auto review
+                </Field.Label>
+              </Field.Root>
+            </ChoiceRow>
+          </Rows>
+          <Grid>
+            {CHOICE_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="field.checkedEdge"
+              box={field.checkedEdge}
+              fill={field.checkedFill}
+              ink
+              note="the ink highlight a checked control carries"
+            />
+            <ShadowChip
+              name="field.thumbShadow"
+              box={field.thumbShadow}
+              fill={field.thumb}
+              ink={false}
+              note="the thumb is raised on both tracks"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+      <Section
+        title="Select · trigger and list"
+        rule="A trigger is a control on the well rung, so it takes the field family's size ladder, ring, invalid ring and disabled opacity; the list it opens is on the floating rung and reads the popup group instead. A row states two facts: selected is the row that holds the value, highlighted is where the keyboard or the pointer is, and the highlight wins the fill because it is the one that moves. The open list below is a stand-in built from the same rules the popup applies, because a board cannot show a popup without covering what is under it."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            {SELECT_SIZES.map((entry) => (
+              <SelectSizeRow key={entry.size} {...entry} />
+            ))}
+            <FieldRow legend="filled">
+              <Field.Root>
+                <Field.Label>Fruit</Field.Label>
+                <FruitSelect defaultValue="fuji" />
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="invalid">
+              <Field.Root invalid>
+                <Field.Label>Fruit</Field.Label>
+                <FruitSelect />
+                <Field.Error match>Pick a fruit before continuing.</Field.Error>
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="disabled">
+              <Field.Root disabled>
+                <Field.Label>Fruit</Field.Label>
+                <FruitSelect defaultValue="gala" />
+              </Field.Root>
+            </FieldRow>
+            <PopupReplica />
+          </Rows>
+          <Grid>
+            {POPUP_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="popup.shadow"
+              box={popup.shadow}
+              fill={popup.background}
+              ink={false}
+              note="the floating rung, above the page"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Combobox · filter and list"
+        rule="The same well and the same list, with a query in front of them. On its own the input is the whole control; inside an input group the group is the well and the input is bare, so a chevron beside it lands inside one control rather than beside a second one. The ring follows focus inside the group, and disabled dims it from state because :disabled cannot reach a div."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <FieldRow legend="input">
+              <Field.Root>
+                <Field.Label>Language</Field.Label>
+                <LanguageCombobox>
+                  <Combobox.Input placeholder="Search a language" />
+                </LanguageCombobox>
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="input group">
+              <Field.Root>
+                <Field.Label>Language</Field.Label>
+                <LanguageCombobox>
+                  <Combobox.InputGroup>
+                    <Combobox.Input placeholder="Search a language" />
+                    <Combobox.Trigger aria-label="Open the language list" />
+                  </Combobox.InputGroup>
+                </LanguageCombobox>
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="filled">
+              <Field.Root>
+                <Field.Label>Language</Field.Label>
+                <LanguageCombobox defaultValue="Rust">
+                  <Combobox.InputGroup>
+                    <Combobox.Input />
+                    <Combobox.Trigger aria-label="Open the language list" />
+                  </Combobox.InputGroup>
+                </LanguageCombobox>
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="invalid">
+              <Field.Root invalid>
+                <Field.Label>Language</Field.Label>
+                <LanguageCombobox>
+                  <Combobox.InputGroup>
+                    <Combobox.Input placeholder="Search a language" />
+                    <Combobox.Trigger aria-label="Open the language list" />
+                  </Combobox.InputGroup>
+                </LanguageCombobox>
+                <Field.Error match>Pick a language before continuing.</Field.Error>
+              </Field.Root>
+            </FieldRow>
+            <FieldRow legend="disabled">
+              <Field.Root disabled>
+                <Field.Label>Language</Field.Label>
+                <LanguageCombobox defaultValue="Rust">
+                  <Combobox.InputGroup>
+                    <Combobox.Input />
+                    <Combobox.Trigger aria-label="Open the language list" />
+                  </Combobox.InputGroup>
+                </LanguageCombobox>
+              </Field.Root>
+            </FieldRow>
+          </Rows>
+        </PaletteSplit>
+      </Section>
+      <Section
+        title="Menu · dropdown, context menu and menubar"
+        rule="A menu is the same floating surface a Select opens, so it reads the popup group and its rows are the rows of a list. One declaration differs: a list takes the width of the control it belongs to, and a menu — opened by whatever the surface already had there — states its own. A command that destroys something is the one row that is not the label colour, and its highlight is mixed toward destructive so the fill cannot say 'an ordinary command'. ContextMenu and Menubar re-use these rows rather than restating them: only the way in differs."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <Row>
+              <LegendKey>dropdown</LegendKey>
+              <Cluster>
+                <SessionMenu />
+              </Cluster>
+            </Row>
+            <Row>
+              <LegendKey>context menu</LegendKey>
+              <Cluster>
+                <ContextMenu.Root>
+                  <ContextMenu.Trigger>
+                    <div {...stylex.props(styles.contextArea)}>Right-click this area</div>
+                  </ContextMenu.Trigger>
+                  <ContextMenu.Content>
+                    <ContextMenu.Item inset>Rename</ContextMenu.Item>
+                    <ContextMenu.Item inset>Duplicate</ContextMenu.Item>
+                    <ContextMenu.Separator />
+                    <ContextMenu.Item inset tone="destructive">
+                      Delete
+                    </ContextMenu.Item>
+                  </ContextMenu.Content>
+                </ContextMenu.Root>
+              </Cluster>
+            </Row>
+            <Row>
+              <LegendKey>menubar</LegendKey>
+              <Cluster>
+                <Menubar.Root>
+                  <Menubar.Menu>
+                    <Menubar.Trigger>File</Menubar.Trigger>
+                    <Menubar.Content>
+                      <Menubar.Item shortcut={'\u2318N'}>New task</Menubar.Item>
+                      <Menubar.Item shortcut={'\u2318S'}>Save</Menubar.Item>
+                    </Menubar.Content>
+                  </Menubar.Menu>
+                  <Menubar.Menu>
+                    <Menubar.Trigger>Edit</Menubar.Trigger>
+                    <Menubar.Content>
+                      <Menubar.Item shortcut={'\u2318Z'}>Undo</Menubar.Item>
+                      <Menubar.Item tone="destructive">Delete</Menubar.Item>
+                    </Menubar.Content>
+                  </Menubar.Menu>
+                </Menubar.Root>
+              </Cluster>
+            </Row>
+            <MenuReplica />
+          </Rows>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Popover · a surface with content on it"
+        rule="A popover is the floating rung a Select list and a Menu already open, holding content instead of rows. It replaces five of a list's declarations: the width a list takes from the control that shows its value, the 4px inset that lets a row bleed to the surface's edge, and the three that make the type a control's — size, weight and tracking — because what is in a popover is sentences at 14 and weight 400. A control placed in one brings its own step. It is opened by whatever the surface already had there, through render, the way a menu is."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <Row>
+              <LegendKey>popover</LegendKey>
+              <Cluster>
+                <FilterPopover />
+              </Cluster>
+            </Row>
+            <PopoverReplica />
+          </Rows>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Dialog · AlertDialog and Drawer"
+        rule="The modal rung is the one that states three things at once: the elevated background, the large shadow, and an overlay over the page — a panel that covers what a person was doing while still showing it. The three are one family reading one token group. A Dialog is dismissable and says so with a cross; an AlertDialog is answered rather than dismissed, so it has no cross and a press beside it is not an answer — Escape still is, because it is the platform's cancel; a Drawer is that panel arriving from an edge, and unlike the other two it can be dragged back out of it — which is why this system has no Sheet. Each one names its own panel as the container every Select, Combobox and Menu inside it mounts into, so a list opened in a modal is inside the focus scope holding it."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <ModalTriggers />
+            <DialogReplica />
+            <ModalDimensions />
+            <Row>
+              <LegendKey>dialog.overlay</LegendKey>
+              <Cluster>
+                <div {...stylex.props(styles.overlaySwatch)}>
+                  <div {...stylex.props(styles.overlayFill)} />
+                </div>
+              </Cluster>
+              <span {...stylex.props(styles.rungUse)}>
+                The page, receding under the panel. It is the rung's third declaration rather than a
+                colour a surface picks.
+              </span>
+            </Row>
+          </Rows>
+          <Grid>
+            {DIALOG_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="dialog.shadow"
+              box={dialogTokens.shadow}
+              fill={dialogTokens.background}
+              ink={false}
+              note="the modal rung, over everything"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Tooltip · the name of the thing under the pointer"
+        rule="The one floating part that does not read the popup group. The ladder puts a menu, a popover and a list on the raised background under the popover shadow, and then names the tooltip apart: label with shadow.medium. That is a deliberate inversion — a popup is a place to act, a tooltip only names one — so a tooltip carries the page's text colour as its fill and the page's background as its ink, the same pair a primary button and a checked box take. It never takes the pointer, and one that names a control inside a popup still sits above it."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <TooltipRow />
+            <TooltipReplica />
+          </Rows>
+          <Grid>
+            {TOOLTIP_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="tooltip.shadow"
+              box={tooltipTokens.shadow}
+              fill={tooltipTokens.background}
+              ink={false}
+              note="tight, because it sits on what it names"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+      <Section
+        title="Tabs · the choices side by side"
+        rule="A tab strip is the elevation ladder read twice over: a well-rung track with one thing raised out of it, which is the same pair a Switch takes and says the same thing — the track is where something sits, and the thing sitting in it is the one you can press. The pill is one element that slides rather than a fill on each tab, because the strip is one control. A tab carries no fill in any state; what changes when you take one is its colour, and the pill arriving under it. The size is stated once on the strip: the tabs take the track less its inset, and their corner is the track's less the same inset. Arrow keys move without taking, because a tab swaps a panel that may be expensive to build."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            {STRIP_SIZES.map((entry) => (
+              <StripRow key={entry.name} {...entry} />
+            ))}
+            <StripDisabledRow />
+            <StripStretchRow />
+            <StripPanelRow />
+            <StripDimensions />
+          </Rows>
+          <Grid>
+            {STRIP_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="disclosure.trackWell"
+              box={disclosureTokens.trackWell}
+              fill={disclosureTokens.trackBackground}
+              ink={false}
+              note="the track, sunken"
+            />
+            <ShadowChip
+              name="disclosure.indicatorShadow"
+              box={disclosureTokens.indicatorShadow}
+              fill={disclosureTokens.indicator}
+              ink={false}
+              note="the selected tab, raised"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Accordion and Collapsible · the choices stacked"
+        rule="The same family laid out down the page instead of across it: a row, and what opens under it in place. A row has no fill in any state — it is a line of a list rather than a control on a surface — so the line to the next row is the separator the rules give a list, and what moves when it opens is the chevron the part draws. One row is open at a time unless the stack says otherwise, because an accordion's point is that a long page stays short. A Collapsible is one of those rows with no list around it, so it takes no line and no row: its trigger is whatever the surface already had there, and the panel is all the primitive owns. What a panel holds is prose, and its padding rides on a child of it — the panel's own height is what the reveal animates, and Base UI measures that height with scrollHeight, which counts padding."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <StackRow />
+            <CollapsibleRow />
+            <StackDimensions />
+          </Rows>
+          <Grid>
+            {STACK_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+      <Section
+        title="Alert and Toast · what the system says back"
+        rule="One message on two rungs. An Alert stays on the page it is about, so it takes the card rung; a Toast arrives over that page, so it takes the floating one — not the modal rung, because a toast does not have to be answered and nothing behind it recedes. Both are the same block: the tone's mark, what happened, the sentence under it, and whatever answers it. A tone is a tint and a mark, never a fill: the tint is 8% of the tone mixed into the rung's own background, which is the mix a destructive menu row already uses, and the mark is drawn by the part rather than passed to it — a caller free to choose a glyph can put a tick on a failure. Neutral is the one tone with no colour of its own: accent is the obvious candidate and the rules reserve it for live state. How urgently a message is announced follows from its tone as well, because a surface that had to choose would choose alert every time."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            {FEEDBACK_TONES.map((tone) => (
+              <AlertRow key={tone} tone={tone} />
+            ))}
+            <AlertActionsRow />
+            <ToastReplica tone="neutral" />
+            <ToastReplica tone="danger" />
+            <ToastTriggerRow />
+            <MessageDimensions />
+          </Rows>
+          <Grid>
+            {MESSAGE_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="feedback.noticeShadow"
+              box={feedbackTokens.noticeShadow}
+              fill={feedbackTokens.noticeBackground}
+              ink={false}
+              note="an Alert, on the card rung"
+            />
+            <ShadowChip
+              name="feedback.toastShadow"
+              box={feedbackTokens.toastShadow}
+              fill={feedbackTokens.toastBackground}
+              ink={false}
+              note="a Toast, over the page"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Progress, Skeleton and Spinner · still working"
+        rule="The other half of the same sentence: not what happened, but that it has not finished. A bar is a well-rung track with the accent running in it, because the rules give accent to live state and name the running indicator by name — ink there would say the value is stored. A bar with no value is not a bar at zero: it is the same track with a band crossing it, since 'I do not know how far' and 'nothing has happened' are different reports. A skeleton takes a gray, which is what the rules reserve them for — a thing with no role yet — and it breathes rather than sweeping, stopping where a person has asked for less movement. A spinner is drawn in currentColor so it belongs to whatever holds it, and it keeps turning under reduced motion: it is the only thing saying the work has not stopped."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <Row>
+              <LegendKey>labelled</LegendKey>
+              <div {...stylex.props(styles.disclosureBlock)}>
+                <Progress value={62} label="Uploading the worktree" showValue />
+              </div>
+            </Row>
+            <ProgressRow name="0" value={0} />
+            <ProgressRow name="62" value={62} />
+            <ProgressRow name="100" value={100} />
+            <ProgressRow name="indeterminate" value={null} />
+            <SkeletonRow />
+            <SpinnerRow />
+            <WaitDimensions />
+          </Rows>
+          <Grid>
+            {WAIT_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="feedback.trackWell"
+              box={feedbackTokens.trackWell}
+              fill={feedbackTokens.trackBackground}
+              ink={false}
+              note="the track, sunken"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+      <Section
+        title="Table · rows on the page"
+        rule="The one part of this package with no surface of its own: no background, no shadow, no radius. A table is rows on whatever the surface around it already was, so the card holding one keeps owning its edges — and what it draws is the single edge the rules give a list, separator, between one row and the next. The head takes that line too: it is the row before the first record, and the rule against a line under a header is about a heading over a surface. The last record draws none, because there is no next row there. The two fills are the palette's own hoverFill and selectedFill rather than a mix of the surface — the rules name those two for a row on the page and card rungs, and this is that row; a popup derives its own only because on the floating rung they collapse into it. The pointer is answered only where pressing a row does something: a table of facts is read, not operated. A row is on the control ladder, and the size is stated once on the table, because a row's height and a cell's padding are one decision."
+      >
+        <PaletteSplit palettes={palettes} wide>
+          <Rows>
+            {TABLE_SIZES.map((entry) => (
+              <TableSizeRow key={entry.name} {...entry} />
+            ))}
+            <TableSortRow />
+            <TableSelectRow />
+            <TablePressRow />
+            <TableStickyRow />
+            <TableStackRow />
+            <TableWrapRow />
+            <TableEmptyRow />
+            <TablePartsRow />
+            <TableDimensions />
+          </Rows>
+          <Grid>
+            {TABLE_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Pagination · the way to the rows that did not fit"
+        rule="A pager belongs to the table for the reason a Drawer belongs to the Dialog: it exists because a table did not fit, it sits on the same rung, and it states the same size — though nothing here needs a table above it, and the first caller in this repository is a file too large to open at once. It is one control rather than a kit of parts, because the part a caller would otherwise assemble is the one that is easy to get wrong: which pages to list out of nine thousand, and where to admit the rest are missing. The window is one width from the first page to the last, so the buttons do not move out from under the pointer, and a gap is only drawn where it hides more than one page — a gap hiding a single page is wider than the page it hides. The page you are on says so twice, as a fill and as aria-current, because the fill reaches only the people who can see it. The steps are disabled at the ends rather than removed. Where the pages are too many to list, the pager says where you are instead — and lets a person type it."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <PagerRow
+              name="all of them"
+              pages={5}
+              start={2}
+              note="Seven pages or fewer are listed in full: a gap that saves no room costs a press."
+            />
+            <PagerRow name="at the start" pages={40} start={1} />
+            <PagerRow name="in the middle" pages={40} start={20} />
+            <PagerRow name="at the end" pages={40} start={40} />
+            <PagerSizeRow />
+            <CompactPagerRow />
+            <CompactPagerRow jump />
+            <PagerDimensions />
+          </Rows>
+          <Grid>
+            {PAGER_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+      <Section
+        title="Card · a block of a page"
+        rule="The elevation ladder's card step, made a component: the elevated background under the card shadow at the large radius, and no border, because a card's edge is its shadow. The parts are a Dialog's — a heading, the body a caller writes, and the answers — because what differs between a panel that owns the window and a block that owns a region of a page is the rung and the heading step, not what either is made of. It takes the same headline a dialog does: the rules reserve title for a page that is a page. A card does not nest — two of them one inside the other are the same fill twice in the light palette, where the card rung and the page are one white — and it renders no control of its own: interactive marks the card, and the button stays the caller's, because what a press does is a product decision."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <CardRow />
+            <InteractiveCardRow />
+            <CardDimensions />
+          </Rows>
+          <Grid>
+            {CARD_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="card.shadow"
+              box={cardTokens.shadow}
+              fill={cardTokens.background}
+              ink={false}
+              note="the card rung, above the page"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Badge and Separator · a fact, and a line"
+        rule="A badge is the one part of this system on no rung: it sits on a page, a card, a menu row or a modal panel, so it cannot take a background from the ladder — its fill is a film of the tone over whatever is underneath, which is the form a destructive ghost button's hover already takes. The words stay ink in every tone, and that is measured rather than preferred: warning is 2.8:1 on a near-white surface, a colour tuned for a 16px mark where 3:1 is the bar, and a badge is never wordless, so the tint carries the tone and the word carries the fact. It answers no pointer and takes no focus — a chip that did would be a Button. A Separator is the other half of the sentence and the only line this system allows: between the rows of a list or a table, never around a surface and never under a header, and it says so to a screen reader rather than hiding behind a decorative flag."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <BadgeToneRow />
+            {BADGE_RUNGS.map((rung) => (
+              <Row key={rung.name}>
+                <LegendKey>{rung.name}</LegendKey>
+                <div {...stylex.props(styles.badgeRung, rung.style)}>
+                  {BADGE_TONES.map((tone) => (
+                    <Badge key={tone} tone={tone}>
+                      {tone}
+                    </Badge>
+                  ))}
+                </div>
+                <span {...stylex.props(styles.rungUse)}>{rung.use}</span>
+              </Row>
+            ))}
+            <SeparatorRow />
+            <BadgeDimensions />
+          </Rows>
+          <Grid>
+            {BADGE_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Avatar · who this is"
+        rule="The second part of this system on no rung, and the one that is not a film: what an avatar stands in for is opaque — a photograph — and a translucent stand-in would show a row's hover through a face. So the fallback takes a gray, which is what the rules reserve the gray ramp for: a thing with no role, the same reading that gave Skeleton its own. The ladder is the point. The deleted implementation had one size, and of its twenty-seven call sites twenty-one named a box and fifteen also named a type step for the letters — h-5 w-5 text-[9px], h-7 w-7 text-[11px], h-16 w-16 text-xl — which is two facts a surface had to keep in step and eight different answers about what two letters in a circle means. Here the box picks the letters. A person is a circle at radius.full on corner.round; a thing is a tile, because a circle around a logo is a crop and the mark inside it was drawn square."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            {AVATAR_SIZES.map((entry) => (
+              <AvatarSizeRow key={entry.name} {...entry} />
+            ))}
+            <AvatarShapeRow />
+            <AvatarFallbackRow />
+            <AvatarDimensions />
+          </Rows>
+          <Grid>
+            {AVATAR_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Kbd · a key on the keyboard"
+        rule="A gray, because the rules name a kbd among the things with no role: a cap stands for a piece of hardware rather than for anything on this screen, so accent would claim it is live, ink would claim it is stored and a tone would claim it reported something. It is never a control — no hover, no focus ring, no pressed state — and it is not a menu row's shortcut either: the rules give that slot plain trailing metadata, because a column of chips down a menu's right edge turns a quiet list into a keyboard diagram. A cap is for the surfaces where the keys are the subject. The word inside it is the caller's, since which key a person presses depends on their platform and this package carries no dictionary."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <KbdRow />
+            <KbdOnChipRow />
+            <KbdDimensions />
+          </Rows>
+          <Grid>
+            {KBD_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+
+      <Section
+        title="Toggle, ToggleGroup and Toolbar · a control that stays pressed"
+        rule="A Toggle is not a Switch, and the difference is what each is for. A Switch stores a value in a form: it takes a name, answers to a Field.Root, can be invalid, and is read as a setting. A Toggle says an option is on right now — bold, wrapped lines, this filter — so it has no name, no validity and no message under it. Off it is a ghost Button, because that is what it is; on it sinks into the well. The rules give a stored state ink, and this is where that rule is read carefully rather than literally: ink is what a control that already sits in a well becomes when it is on — a Switch's off state occupies the well, so on has to leave it — and a toggle rests on nothing at all, so the well is still free and sinking is the plainest thing this system can say about a button that went down and stayed. It also keeps a bar of eight from reading as eight primary buttons. A set of them is not a Tabs strip: a strip picks what you see, so it can be one control with one pill sliding across it, while a set stores what is on and two of its members can be pressed at once. And a bar draws nothing at all — no fill, no shadow, no radius, not even the line a table draws — because what it is for is the keyboard: it makes a row of eight controls one tab stop and gives the arrow keys the walking."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <ToggleStateRow />
+            {TOGGLE_SIZES.map((entry) => (
+              <ToggleSizeRow key={entry.name} {...entry} />
+            ))}
+            <TogglePillRow />
+            <ToggleDisabledRow />
+            <ToggleSetRow />
+            <ToggleMultipleRow />
+            <ToolbarRow />
+            <ToggleDimensions />
+          </Rows>
+          <Grid>
+            {TOGGLE_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+          </Grid>
+        </PaletteSplit>
+      </Section>
+    </Board>
+  );
+}
diff --git a/packages/ui/src/gallery/parts.tsx b/packages/ui/src/gallery/parts.tsx
new file mode 100644
index 000000000..972b7d2cb
--- /dev/null
+++ b/packages/ui/src/gallery/parts.tsx
@@ -0,0 +1,325 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { corner, radius, space, text } from '../tokens/scales.stylex';
+import { ThemeRoot, type ThemeMode } from '../theme/theme';
+
+/** Which palettes a board renders each sample in. */
+export type GalleryPalettes = 'both' | 'light' | 'dark' | 'ambient';
+
+const PALETTE_NAMES: Record<Exclude<ThemeMode, 'system'> | 'system', string> = {
+  light: 'Lody Light',
+  dark: 'Vesper',
+  system: 'Ambient',
+};
+
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';
+
+/**
+ * Reads a resolved value off a rendered node so the board reports what the
+ * token actually produces in this palette instead of a copied literal. The
+ * read happens once per mount; every sample is mounted under a fixed theme.
+ */
+export function useMeasured<T extends HTMLElement>(property: string) {
+  const ref = useRef<T>(null);
+  const [value, setValue] = useState('');
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    setValue(window.getComputedStyle(node).getPropertyValue(property).trim());
+  }, [property]);
+  return { ref, value };
+}
+
+const styles = stylex.create({
+  board: {
+    boxSizing: 'border-box',
+    maxHeight: '100%',
+    overflowY: 'auto',
+    backgroundColor: colors.background,
+    color: colors.label,
+    fontSize: text.bodySize,
+    lineHeight: text.bodyLeading,
+    paddingBlock: space[8],
+    paddingInline: space[6],
+  },
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: space[8],
+    marginInline: 'auto',
+    maxWidth: '1120px',
+  },
+  header: { display: 'flex', flexDirection: 'column', gap: space[2] },
+  headerTitle: {
+    margin: 0,
+    fontSize: text.titleSize,
+    lineHeight: text.titleLeading,
+    fontWeight: 600,
+    letterSpacing: text.controlTracking,
+  },
+  headerLead: {
+    margin: 0,
+    maxWidth: '68ch',
+    color: colors.secondaryLabel,
+  },
+  section: { display: 'flex', flexDirection: 'column', gap: space[3] },
+  sectionHead: { display: 'flex', flexDirection: 'column', gap: space[1] },
+  sectionTitle: {
+    margin: 0,
+    fontSize: text.headlineSize,
+    lineHeight: text.headlineLeading,
+    fontWeight: 600,
+    letterSpacing: text.controlTracking,
+  },
+  sectionRule: {
+    margin: 0,
+    maxWidth: '72ch',
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    color: colors.secondaryLabel,
+  },
+  split: {
+    display: 'grid',
+    gap: space[3],
+    gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))',
+  },
+  /**
+   * One palette per row rather than two side by side, for a sample that needs
+   * the page's width to be itself. A `Table` is the case that forced this: it
+   * asks about its own container, and two panels beside each other leave it
+   * 342px — under the width at which the rules say a table stops being columns
+   * — so the board rendered every table as the stacked list, including the one
+   * sample whose whole point is that it is the exception.
+   */
+  splitWide: { gridTemplateColumns: '1fr' },
+  panel: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: space[3],
+    boxSizing: 'border-box',
+    padding: space[4],
+    backgroundColor: colors.elevatedBackground,
+    color: colors.label,
+    borderRadius: radius.large,
+    cornerShape: corner.shape,
+    boxShadow: shadow.card,
+    fontSize: text.bodySize,
+    lineHeight: text.bodyLeading,
+  },
+  panelName: {
+    margin: 0,
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    fontWeight: 500,
+    letterSpacing: '0.06em',
+    textTransform: 'uppercase',
+    color: colors.tertiaryLabel,
+  },
+  grid: {
+    display: 'grid',
+    gap: space[3],
+    gridTemplateColumns: 'repeat(auto-fill, minmax(148px, 1fr))',
+  },
+  rows: { display: 'flex', flexDirection: 'column', gap: space[3] },
+  row: { display: 'flex', alignItems: 'center', gap: space[3], flexWrap: 'wrap' },
+  cluster: { display: 'flex', alignItems: 'center', gap: space[2], flexWrap: 'wrap' },
+  sample: { display: 'flex', flexDirection: 'column', gap: space[1.5], minWidth: 0 },
+  sampleName: {
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    overflowWrap: 'anywhere',
+  },
+  sampleNote: {
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    color: colors.secondaryLabel,
+  },
+  measured: {
+    fontFamily: MONO,
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    color: colors.tertiaryLabel,
+    overflowWrap: 'anywhere',
+  },
+  /**
+   * A sentence about the sample above it. In a wrapping row it always takes its
+   * own line: a note sharing the row competes with the sample for width, and
+   * the sample is the thing the board is for — which is how two tables of the
+   * same size came to be laid out 260px and 342px wide on one board.
+   */
+  note: {
+    // `flex-basis: 100%` and no `max-width`. A max width would be the wrong
+    // kind of correct here: the flex base size is clamped by it *before* the
+    // line is broken, so a 72ch note fits beside a sample after all and the
+    // sample is squeezed to its minimum — which is the bug this part exists to
+    // fix, wearing a reading measure.
+    flexBasis: '100%',
+    margin: 0,
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    color: colors.secondaryLabel,
+  },
+  legendKey: {
+    flexBasis: '168px',
+    flexGrow: 0,
+    flexShrink: 0,
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    fontWeight: 500,
+    color: colors.secondaryLabel,
+  },
+  swatchChip: {
+    height: '46px',
+    borderRadius: radius.small,
+    cornerShape: corner.shape,
+    boxShadow: shadow.raised,
+  },
+});
+
+export function Board({ children }: { children: ReactNode }) {
+  return (
+    <div {...stylex.props(styles.board)}>
+      <div {...stylex.props(styles.page)}>{children}</div>
+    </div>
+  );
+}
+
+export function BoardHeader({ title, lead }: { title: string; lead: string }) {
+  return (
+    <header {...stylex.props(styles.header)}>
+      <h1 {...stylex.props(styles.headerTitle)}>{title}</h1>
+      <p {...stylex.props(styles.headerLead)}>{lead}</p>
+    </header>
+  );
+}
+
+export function Section({
+  title,
+  rule,
+  children,
+}: {
+  title: string;
+  rule: string;
+  children: ReactNode;
+}) {
+  return (
+    <section {...stylex.props(styles.section)}>
+      <div {...stylex.props(styles.sectionHead)}>
+        <h2 {...stylex.props(styles.sectionTitle)}>{title}</h2>
+        <p {...stylex.props(styles.sectionRule)}>{rule}</p>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function modesFor(palettes: GalleryPalettes): ThemeMode[] {
+  if (palettes === 'both') return ['light', 'dark'];
+  if (palettes === 'ambient') return ['system'];
+  return [palettes];
+}
+
+/**
+ * Renders the same sample once per selected palette, each under its own forced
+ * theme, so a token's two values sit next to each other.
+ */
+export function PaletteSplit({
+  palettes,
+  wide = false,
+  children,
+}: {
+  palettes: GalleryPalettes;
+  /** One palette per row, for a sample that needs the width to be itself. */
+  wide?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <div {...stylex.props(styles.split, wide && styles.splitWide)}>
+      {modesFor(palettes).map((mode) => (
+        <ThemeRoot key={mode} mode={mode}>
+          <div {...stylex.props(styles.panel)}>
+            <p {...stylex.props(styles.panelName)}>{PALETTE_NAMES[mode]}</p>
+            {children}
+          </div>
+        </ThemeRoot>
+      ))}
+    </div>
+  );
+}
+
+export function Grid({ children }: { children: ReactNode }) {
+  return <div {...stylex.props(styles.grid)}>{children}</div>;
+}
+
+export function Rows({ children }: { children: ReactNode }) {
+  return <div {...stylex.props(styles.rows)}>{children}</div>;
+}
+
+export function Row({ children }: { children: ReactNode }) {
+  return <div {...stylex.props(styles.row)}>{children}</div>;
+}
+
+export function Cluster({ children }: { children: ReactNode }) {
+  return <div {...stylex.props(styles.cluster)}>{children}</div>;
+}
+
+/** A sentence about the sample, on its own line under it. */
+export function Note({ children }: { children: ReactNode }) {
+  return <p {...stylex.props(styles.note)}>{children}</p>;
+}
+
+export function LegendKey({ children }: { children: ReactNode }) {
+  return <span {...stylex.props(styles.legendKey)}>{children}</span>;
+}
+
+export function Sample({
+  name,
+  note,
+  measured,
+  children,
+}: {
+  name: string;
+  note?: string;
+  measured?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div {...stylex.props(styles.sample)}>
+      {children}
+      <span {...stylex.props(styles.sampleName)}>{name}</span>
+      {measured ? <span {...stylex.props(styles.measured)}>{measured}</span> : null}
+      {note ? <span {...stylex.props(styles.sampleNote)}>{note}</span> : null}
+    </div>
+  );
+}
+
+export const dyn = stylex.create({
+  fill: (value: string) => ({ backgroundColor: value }),
+  ink: (background: string, foreground: string) => ({
+    backgroundColor: background,
+    color: foreground,
+  }),
+  raised: (background: string, box: string) => ({
+    backgroundColor: background,
+    boxShadow: box,
+  }),
+  text: (value: string) => ({ color: value }),
+  radius: (value: string, shape: string) => ({ borderRadius: value, cornerShape: shape }),
+  height: (value: string) => ({ height: value }),
+  width: (value: string) => ({ width: value }),
+  type: (size: string, leading: string) => ({ fontSize: size, lineHeight: leading }),
+  transition: (value: string) => ({ transitionDuration: value }),
+});
+
+/** A colour chip that reports the value the palette resolved it to. */
+export function Swatch({ name, value, note }: { name: string; value: string; note: string }) {
+  const { ref, value: measured } = useMeasured<HTMLDivElement>('background-color');
+  return (
+    <Sample name={name} note={note} measured={measured}>
+      <div ref={ref} {...stylex.props(styles.swatchChip, dyn.fill(value))} />
+    </Sample>
+  );
+}
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
new file mode 100644
index 000000000..c0b148b1c
--- /dev/null
+++ b/packages/ui/src/icons/index.ts
@@ -0,0 +1,5 @@
+/**
+ * Compatibility entry point. New consumers should import @lody/icons
+ * directly; keeping this path avoids a flag day for existing callers.
+ */
+export * from '@lody/icons';
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 000000000..771420b4a
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,191 @@
+export { Button } from './button/button';
+export type {
+  ButtonProps,
+  ButtonShape,
+  ButtonSize,
+  ButtonTone,
+  ButtonVariant,
+} from './button/button';
+export { Accordion } from './disclosure/accordion';
+export type {
+  AccordionItemProps,
+  AccordionPanelProps,
+  AccordionRootProps,
+  AccordionTriggerProps,
+} from './disclosure/accordion';
+export { Alert } from './feedback/alert';
+export type {
+  AlertActionsProps,
+  AlertDescriptionProps,
+  AlertProps,
+  AlertTitleProps,
+} from './feedback/alert';
+export { Avatar } from './avatar/avatar';
+export type {
+  AvatarFallbackProps,
+  AvatarImageProps,
+  AvatarRootProps,
+  AvatarShape,
+  AvatarSize,
+} from './avatar/avatar';
+export { AlertDialog } from './dialog/alert-dialog';
+export type {
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogTitleProps,
+} from './dialog/alert-dialog';
+export { Badge } from './badge/badge';
+export type { BadgeProps, BadgeTone } from './badge/badge';
+export { Card } from './card/card';
+export type {
+  CardDescriptionProps,
+  CardProps,
+  CardSectionProps,
+  CardTitleLevel,
+  CardTitleProps,
+} from './card/card';
+export { Checkbox } from './field/checkbox';
+export type { CheckboxProps } from './field/checkbox';
+export { Collapsible } from './disclosure/collapsible';
+export type { CollapsiblePanelProps } from './disclosure/collapsible';
+export { Combobox } from './field/combobox';
+export type {
+  ComboboxClearProps,
+  ComboboxContentProps,
+  ComboboxEmptyProps,
+  ComboboxGroupLabelProps,
+  ComboboxGroupProps,
+  ComboboxInputGroupProps,
+  ComboboxInputProps,
+  ComboboxItemProps,
+  ComboboxSeparatorProps,
+  ComboboxSize,
+  ComboboxTriggerProps,
+} from './field/combobox';
+export { ContextMenu } from './menu/context-menu';
+export type { ContextMenuContentProps, ContextMenuTriggerProps } from './menu/context-menu';
+export { Dialog } from './dialog/dialog';
+export type {
+  DialogBackdropProps,
+  DialogContentProps,
+  DialogDescriptionProps,
+  DialogTitleProps,
+  ModalContentProps,
+} from './dialog/dialog';
+export type { DialogSectionProps } from './dialog/parts';
+export { Drawer } from './drawer/drawer';
+export type {
+  DrawerContentProps,
+  DrawerDescriptionProps,
+  DrawerRootProps,
+  DrawerSide,
+  DrawerTitleProps,
+} from './drawer/drawer';
+export { Field } from './field/field';
+export type {
+  FieldDescriptionProps,
+  FieldErrorProps,
+  FieldLabelProps,
+  FieldRootProps,
+  FieldState,
+} from './field/field';
+export { Input } from './field/input';
+export type { InputProps, InputSize } from './field/input';
+export { Kbd, KbdGroup } from './kbd/kbd';
+export type { KbdGroupProps, KbdProps } from './kbd/kbd';
+export { Menu } from './menu/menu';
+export type {
+  MenuCheckboxItemProps,
+  MenuContentProps,
+  MenuGroupLabelProps,
+  MenuGroupProps,
+  MenuItemProps,
+  MenuItemTone,
+  MenuLinkItemProps,
+  MenuRadioGroupProps,
+  MenuRadioItemProps,
+  MenuSeparatorProps,
+  MenuSubmenuTriggerProps,
+  MenuTriggerProps,
+} from './menu/menu';
+export { Menubar } from './menu/menubar';
+export type { MenubarRootProps, MenubarTriggerProps } from './menu/menubar';
+export { Progress } from './feedback/progress';
+export type { ProgressProps, ProgressTone } from './feedback/progress';
+export { Pagination } from './table/pagination';
+export type {
+  PaginationLabels,
+  PaginationLayout,
+  PaginationProps,
+  PaginationSize,
+} from './table/pagination';
+export { Popover } from './popover/popover';
+export type {
+  PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverHeaderProps,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+} from './popover/popover';
+export { PopupContainerProvider, usePopupContainer } from './popup/portal-container';
+export type { PopupContainer } from './popup/portal-container';
+export { Radio, RadioGroup } from './field/radio';
+export type { RadioGroupProps, RadioProps } from './field/radio';
+export { Select } from './field/select';
+export type {
+  SelectContentProps,
+  SelectGroupLabelProps,
+  SelectGroupProps,
+  SelectItemProps,
+  SelectSeparatorProps,
+  SelectSize,
+  SelectTriggerProps,
+  SelectValueProps,
+} from './field/select';
+export { Separator } from './separator/separator';
+export type { SeparatorProps } from './separator/separator';
+export { Skeleton } from './feedback/skeleton';
+export type { SkeletonProps, SkeletonShape } from './feedback/skeleton';
+export { Spinner } from './feedback/spinner';
+export type { SpinnerProps, SpinnerSize } from './feedback/spinner';
+export { Switch } from './field/switch';
+export type { SwitchProps } from './field/switch';
+export { Table } from './table/table';
+export type {
+  TableAlign,
+  TableCaptionProps,
+  TableCellProps,
+  TableColumn,
+  TableColumnHeaderProps,
+  TableLabels,
+  TableProps,
+  TableRootProps,
+  TableRowProps,
+  TableSectionProps,
+  TableSize,
+  TableSort,
+  TableSorting,
+} from './table/table';
+export { Tabs } from './disclosure/tabs';
+export type {
+  TabsListProps,
+  TabsPanelProps,
+  TabsRootProps,
+  TabsSize,
+  TabsTabProps,
+} from './disclosure/tabs';
+export { Textarea } from './field/textarea';
+export type { TextareaProps, TextareaResize } from './field/textarea';
+export { Toast } from './feedback/toast';
+export type { ToastProviderProps, ToastViewportProps } from './feedback/toast';
+export type { FeedbackTone } from './feedback/tone';
+export { Toggle } from './toggle/toggle';
+export type { ToggleProps, ToggleShape, ToggleSize } from './toggle/toggle';
+export { ToggleGroup } from './toggle/toggle-group';
+export type { ToggleGroupProps } from './toggle/toggle-group';
+export { Toolbar } from './toggle/toolbar';
+export type { ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from './toggle/toolbar';
+export { ThemeRoot, forcedThemeClassNames } from './theme/theme';
+export type { ThemeMode } from './theme/theme';
+export { Tooltip } from './tooltip/tooltip';
+export type { TooltipContentProps, TooltipTriggerProps } from './tooltip/tooltip';
diff --git a/packages/ui/src/internal/class-name.ts b/packages/ui/src/internal/class-name.ts
new file mode 100644
index 000000000..5a2126b49
--- /dev/null
+++ b/packages/ui/src/internal/class-name.ts
@@ -0,0 +1,12 @@
+/**
+ * A Lody primitive computes its StyleX classes and appends whatever the caller
+ * passed, so a caller class always lands after the compiled ones, the way it
+ * does on `Button`.
+ */
+export function appendClassName(
+  compiled: string | undefined,
+  caller: string | undefined
+): string | undefined {
+  if (!caller) return compiled;
+  return compiled ? `${compiled} ${caller}` : caller;
+}
diff --git a/packages/ui/src/internal/glyphs.tsx b/packages/ui/src/internal/glyphs.tsx
new file mode 100644
index 000000000..6e7b2ec40
--- /dev/null
+++ b/packages/ui/src/internal/glyphs.tsx
@@ -0,0 +1,143 @@
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * The glyphs a trigger and a list row need, drawn as paths rather than taken
+ * from an icon package: this package depends on React, Base UI and StyleX only.
+ * Each fills the box it is given and inherits `currentColor`, so the part that
+ * holds one owns both its size and its colour.
+ */
+const styles = stylex.create({
+  glyph: { display: 'block', width: '100%', height: '100%' },
+});
+
+function Glyph({ d }: { d: string }) {
+  return (
+    <svg {...stylex.props(styles.glyph)} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d={d}
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** The chevron on a Select or Combobox trigger: this opens a list. */
+export function ChevronDownGlyph() {
+  return <Glyph d="M4 6.5 8 10.5 12 6.5" />;
+}
+
+/** The strip that says the list continues above the visible rows. */
+export function ChevronUpGlyph() {
+  return <Glyph d="M4 9.5 8 5.5 12 9.5" />;
+}
+
+/** The tick on the row that holds the value. */
+export function TickGlyph() {
+  return <Glyph d="M3.2 8.4 6.4 11.6 12.8 4.4" />;
+}
+
+/** The cross on a dialog's own close button: this goes away. */
+export function CrossGlyph() {
+  return <Glyph d="M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5" />;
+}
+
+/** The chevron on a menu row that opens a submenu: there is more this way. */
+export function ChevronRightGlyph() {
+  return <Glyph d="M6.5 4 10.5 8 6.5 12" />;
+}
+
+/** Its mirror: the way back through a pager. */
+export function ChevronLeftGlyph() {
+  return <Glyph d="M9.5 4 5.5 8 9.5 12" />;
+}
+
+/**
+ * The pages a pager is not listing. It is three dots rather than a character,
+ * so the gap between the first pages and the last is the same mark at the same
+ * weight as the glyphs beside it in every font a host may be set to.
+ */
+export function EllipsisGlyph() {
+  return (
+    <svg {...stylex.props(styles.glyph)} viewBox="0 0 16 16" aria-hidden="true">
+      <circle cx="3.5" cy="8" r="1.15" fill="currentColor" />
+      <circle cx="8" cy="8" r="1.15" fill="currentColor" />
+      <circle cx="12.5" cy="8" r="1.15" fill="currentColor" />
+    </svg>
+  );
+}
+
+/**
+ * The dot on the chosen row of a radio group. It is filled rather than stroked,
+ * because a radio mark is a disc: at 16px a stroked ring reads as a tick that
+ * has not finished drawing.
+ */
+export function DotGlyph() {
+  return (
+    <svg {...stylex.props(styles.glyph)} viewBox="0 0 16 16" aria-hidden="true">
+      <circle cx="8" cy="8" r="3" fill="currentColor" />
+    </svg>
+  );
+}
+
+/**
+ * The marks a message wears. A tone draws its own rather than taking one from a
+ * caller, the way a menu row draws its submenu chevron: the whole point of a
+ * tone is that a person recognises what kind of message this is before reading
+ * it, and a caller free to pass any glyph can put a tick on a failure.
+ */
+function Ringed({ d }: { d: string }) {
+  return (
+    <svg {...stylex.props(styles.glyph)} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <circle cx="8" cy="8" r="6.2" stroke="currentColor" strokeWidth="1.6" />
+      <path
+        d={d}
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Neutral: something worth knowing, and nothing has gone wrong. */
+export function InfoGlyph() {
+  return <Ringed d="M8 7.2v4M8 4.8h.01" />;
+}
+
+/** It worked. */
+export function SuccessGlyph() {
+  return <Ringed d="M5.2 8.2 7.2 10.2 10.8 6" />;
+}
+
+/** It did not. */
+export function DangerGlyph() {
+  return <Ringed d="M8 4.8v4M8 11.2h.01" />;
+}
+
+/**
+ * It still may. The triangle is what separates a warning from an error at a
+ * glance, which two circles of different colours cannot do for a person who
+ * does not see the difference between them.
+ */
+export function WarningGlyph() {
+  return (
+    <svg {...stylex.props(styles.glyph)} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d="M8 1.8 15 13.8H1L8 1.8Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 6.4v3.2M8 11.8h.01"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/kbd/kbd.tokens.stylex.ts b/packages/ui/src/kbd/kbd.tokens.stylex.ts
new file mode 100644
index 000000000..0d678dede
--- /dev/null
+++ b/packages/ui/src/kbd/kbd.tokens.stylex.ts
@@ -0,0 +1,81 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors } from '../tokens/colors.stylex';
+import { radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * A key on the keyboard, drawn where the interface has to name one.
+ *
+ * The rules name it by name: `gray…gray6` is for things with no role, "a
+ * scrollbar, a kbd, a skeleton". A key cap is the clearest case of that — it
+ * stands for a physical object rather than for anything this interface holds,
+ * so none of the semantic colours is about it. `accent` would claim it is live,
+ * ink would claim it is stored, and a tone would claim it reported something.
+ *
+ * It is not a control and never becomes one: no hover, no focus ring, no
+ * pressed state. A caption that says which keys to press is metadata about the
+ * command beside it, which is why the words take `secondaryLabel` and the
+ * caption step — the same reading a Badge takes, one rung of meaning below the
+ * thing it is attached to.
+ *
+ * A menu row's shortcut is deliberately **not** this. The rules give that slot
+ * plain trailing metadata in `popup.hint`, because a menu is already a list of
+ * rows with a leading box and a label and a chevron, and a row of chips down
+ * its right edge turns a quiet list into a keyboard diagram. A key cap is for
+ * where the keys are the subject: a command palette, a shortcuts sheet, a
+ * tooltip that teaches one.
+ */
+export const kbd = stylex.defineVars({
+  // A badge's height, because the two are the same kind of thing — a small
+  // standing fact beside a line of text — and a row carrying one of each would
+  // otherwise have two baselines.
+  height: '20px',
+  // A single key is square-ish rather than a sliver: `Shift` is wide, `K` is
+  // one character, and a chord whose caps jump between 8 and 40 pixels wide
+  // reads as noise. The floor is the height.
+  minWidth: '20px',
+  paddingX: space[1],
+  // Between the caps of one chord. They are one gesture, so they sit closer
+  // than two separate chords would.
+  gap: space[1],
+  radius: radius.mini,
+  background: colors.gray5,
+  label: colors.secondaryLabel,
+  labelSize: text.captionSize,
+  labelLeading: text.captionLeading,
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced
+ * palette; see `button.tokens.stylex.ts` for why a group declared only at the
+ * document root keeps the root palette inside a themed subtree.
+ */
+export const kbdPaletteTheme = stylex.createTheme(kbd, {
+  background: colors.gray5,
+  label: colors.secondaryLabel,
+});
+
+/**
+ * What a key cap is made of when it is standing on a tooltip.
+ *
+ * The tooltip is the one surface in this system that inverts — `tooltip.background`
+ * is `label` and `tooltip.label` is `background` — so a cap carrying the page's
+ * own gray lands as a light chip on a dark one, or the reverse, and the letters
+ * on it disappear. The cap has to be told what it is sitting on.
+ *
+ * The deleted implementation said this with a descendant selector
+ * (`[[data-slot=tooltip-content]_&]:bg-background/20`), which StyleX has no way
+ * to express. It does not need one: a component token group **is** the channel
+ * a surface uses to tell what is inside it what it is standing on. `Tooltip`
+ * declares this theme on its own popup and every cap under it inherits, which
+ * is the same mechanism `ThemeRoot` already uses to carry a forced palette into
+ * a portalled subtree — and unlike the selector it also reaches a cap a caller
+ * wrapped in something of their own.
+ *
+ * The film is of `background` rather than a gray, for the reason a badge's fill
+ * is a film: what it has to read against is the inverted chip, and mixing the
+ * chip's own ink colour steps away from it in both palettes at once.
+ */
+export const kbdOnInvertedTheme = stylex.createTheme(kbd, {
+  background: `color-mix(in oklab, ${colors.background} 20%, transparent)`,
+  label: colors.background,
+});
diff --git a/packages/ui/src/kbd/kbd.tsx b/packages/ui/src/kbd/kbd.tsx
new file mode 100644
index 000000000..54140e589
--- /dev/null
+++ b/packages/ui/src/kbd/kbd.tsx
@@ -0,0 +1,111 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { corner, text } from '../tokens/scales.stylex';
+import { kbd } from './kbd.tokens.stylex';
+
+export interface KbdProps extends Omit<ComponentProps<'kbd'>, 'className'> {
+  className?: string;
+}
+
+export type KbdGroupProps = KbdProps;
+
+const styles = stylex.create({
+  /**
+   * One key. It is a gray, because the rules name a kbd among the things with
+   * no role in this interface: it stands for a piece of hardware rather than
+   * for anything on the screen, so none of the semantic colours is about it.
+   */
+  cap: {
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    height: kbd.height,
+    minWidth: kbd.minWidth,
+    paddingInline: kbd.paddingX,
+    borderRadius: kbd.radius,
+    cornerShape: corner.shape,
+    backgroundColor: kbd.background,
+    color: kbd.label,
+    fontSize: kbd.labelSize,
+    lineHeight: kbd.labelLeading,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    // A cap is drawn, not typeset: the browser's default for `<kbd>` is a
+    // monospace face, and `⌘` and `⇧` are drawn by the UI font here, so a cap
+    // that fell back to the mono stack would render a different glyph beside an
+    // identical one in the label next to it.
+    fontFamily: 'inherit',
+    whiteSpace: 'nowrap',
+    // A key cap is a picture of a key, not a control and not a target: nothing
+    // here answers a pointer, takes focus or can be selected with the text
+    // around it. A surface that wants a pressable key wants a Button.
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+  /**
+   * A chord: the keys that are pressed together. It is a `<kbd>` around
+   * `<kbd>`s, which is what HTML gives this exact shape, so a screen reader is
+   * told it is one gesture rather than three keys in a row.
+   */
+  group: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: kbd.gap,
+    // The wrapper carries no appearance of its own; the caps do.
+    backgroundColor: 'transparent',
+    padding: 0,
+    fontFamily: 'inherit',
+    verticalAlign: 'middle',
+  },
+});
+
+/**
+ * A key on the keyboard.
+ *
+ * The word inside it is the caller's, because which key a person presses
+ * depends on their platform and their layout, and this package carries no
+ * dictionary — the same reason `Pagination` takes its words from the surface.
+ *
+ * It is not a menu row's shortcut. The rules give that slot plain trailing
+ * metadata in `popup.hint`: a menu is already a list of rows carrying a leading
+ * box, a label and a chevron, and a column of chips down its right edge turns a
+ * quiet list into a keyboard diagram. A cap is for the surfaces where the keys
+ * themselves are the subject.
+ */
+export const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd({ className, ...rest }, ref) {
+  const sx = stylex.props(styles.cap);
+  return (
+    <kbd
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/**
+ * The keys of one chord, pressed together.
+ *
+ * They sit at `kbd.gap` with nothing between them: a `+` is how a chord is
+ * written in prose, and this is not prose — the caps are already side by side,
+ * and a separator between them is a fourth thing to read in a row that is
+ * usually eleven pixels tall.
+ */
+export const KbdGroup = forwardRef<HTMLElement, KbdGroupProps>(function KbdGroup(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(styles.group);
+  return (
+    <kbd
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
diff --git a/packages/ui/src/menu/context-menu.tsx b/packages/ui/src/menu/context-menu.tsx
new file mode 100644
index 000000000..03b4b1a72
--- /dev/null
+++ b/packages/ui/src/menu/context-menu.tsx
@@ -0,0 +1,138 @@
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { usePopupContainer, type PopupContainer } from '../popup/portal-container';
+import { hiddenSurfaceForSide, surface } from '../popup/surface';
+import { useForcedThemeClassNames } from '../theme/theme';
+import {
+  MenuContent,
+  MenuCheckboxItem,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuLinkItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuSubmenuTrigger,
+} from './menu';
+
+type PositionerBaseProps = ComponentProps<typeof BaseContextMenu.Positioner>;
+type PopupBaseProps = ComponentProps<typeof BaseContextMenu.Popup>;
+type TriggerBaseProps = ComponentProps<typeof BaseContextMenu.Trigger>;
+
+export interface ContextMenuTriggerProps extends Omit<TriggerBaseProps, 'className'> {
+  className?: string;
+}
+
+export interface ContextMenuContentProps extends Omit<
+  PositionerBaseProps,
+  'className' | 'children' | 'render'
+> {
+  children?: ReactNode;
+  /** Where the menu mounts. Defaults to the nearest `PopupContainerProvider`. */
+  container?: PopupContainer;
+  /** Where focus goes when the menu closes; Base UI's popup prop. */
+  finalFocus?: PopupBaseProps['finalFocus'];
+  className?: string;
+}
+
+const styles = stylex.create({
+  positioner: { outlineStyle: 'none' },
+  /** The area that answers a right click; it is the caller's own layout. */
+  trigger: { display: 'contents' },
+});
+
+/**
+ * The region a right click or a long press opens the menu over.
+ *
+ * It renders no box of its own — `display: contents` — because a context menu
+ * is attached to something the surface already laid out, and a wrapper with a
+ * layout of its own would change that layout just by being asked for a menu.
+ */
+export const ContextMenuTrigger = forwardRef<HTMLDivElement, ContextMenuTriggerProps>(
+  function ContextMenuTrigger({ className, ...rest }, ref) {
+    return (
+      <BaseContextMenu.Trigger
+        ref={ref}
+        {...rest}
+        className={appendClassName(stylex.props(styles.trigger).className, className)}
+      />
+    );
+  }
+);
+
+/**
+ * The same surface `Menu.Content` renders, anchored to the pointer.
+ *
+ * It states no `sideOffset` or `alignOffset`, unlike `Menu.Content`: a context
+ * menu has no control to leave a gap beside, and Base UI's own offsets place
+ * its corner under the pointer. Passing the menu gap here would push the menu
+ * away from the click that asked for it.
+ */
+export const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  function ContextMenuContent({ className, children, container, finalFocus, ...rest }, ref) {
+    const inheritedContainer = usePopupContainer();
+    const palette = useForcedThemeClassNames();
+    const mountPoint = container ?? inheritedContainer;
+    return (
+      <BaseContextMenu.Portal container={mountPoint}>
+        <BaseContextMenu.Positioner
+          ref={ref}
+          {...rest}
+          className={[stylex.props(styles.positioner).className, ...palette]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <BaseContextMenu.Popup
+            finalFocus={finalFocus}
+            className={(state) => {
+              const hidden =
+                state.transitionStatus === 'starting' || state.transitionStatus === 'ending';
+              return appendClassName(
+                stylex.props(
+                  surface.popup,
+                  surface.popupMenu,
+                  hidden && hiddenSurfaceForSide(state.side)
+                ).className,
+                className
+              );
+            }}
+          >
+            {children}
+          </BaseContextMenu.Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    );
+  }
+);
+
+/**
+ * A menu reached by right click or long press instead of by a button.
+ *
+ * Only the way in differs, so only the way in is restated here: the rows, the
+ * groups, the separators and the submenu trigger are `Menu`'s, re-exported
+ * rather than rebuilt, which is what keeps a command from looking like one
+ * thing in a dropdown and another under a right click.
+ */
+export const ContextMenu = {
+  Root: BaseContextMenu.Root,
+  Trigger: ContextMenuTrigger,
+  Content: ContextMenuContent,
+  Item: MenuItem,
+  LinkItem: MenuLinkItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  Group: MenuGroup,
+  GroupLabel: MenuGroupLabel,
+  Separator: MenuSeparator,
+  Submenu: BaseContextMenu.SubmenuRoot,
+  SubmenuTrigger: MenuSubmenuTrigger,
+  /**
+   * A submenu of a context menu is anchored to the row that opened it, not to
+   * the pointer, so it is `Menu.Content` — the gap beside the row applies again.
+   */
+  SubmenuContent: MenuContent,
+};
diff --git a/packages/ui/src/menu/menu.tsx b/packages/ui/src/menu/menu.tsx
new file mode 100644
index 000000000..8d38f86f3
--- /dev/null
+++ b/packages/ui/src/menu/menu.tsx
@@ -0,0 +1,465 @@
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { ChevronRightGlyph, DotGlyph, TickGlyph } from '../internal/glyphs';
+import { usePopupContainer, type PopupContainer } from '../popup/portal-container';
+import { hiddenSurfaceForSide, surface } from '../popup/surface';
+import { useForcedThemeClassNames } from '../theme/theme';
+
+/** The gap between a menu and whatever opened it; the rules' rise distance. */
+const POPUP_GAP = 4;
+
+/**
+ * What a row is about. `neutral` is a command; `destructive` is one that
+ * destroys something and says so, the way a Button's tone does.
+ */
+export type MenuItemTone = 'neutral' | 'destructive';
+
+type PositionerBaseProps = ComponentProps<typeof BaseMenu.Positioner>;
+type PopupBaseProps = ComponentProps<typeof BaseMenu.Popup>;
+type TriggerBaseProps = ComponentProps<typeof BaseMenu.Trigger>;
+type ItemBaseProps = ComponentProps<typeof BaseMenu.Item>;
+type LinkItemBaseProps = ComponentProps<typeof BaseMenu.LinkItem>;
+type CheckboxItemBaseProps = ComponentProps<typeof BaseMenu.CheckboxItem>;
+type RadioItemBaseProps = ComponentProps<typeof BaseMenu.RadioItem>;
+type RadioGroupBaseProps = ComponentProps<typeof BaseMenu.RadioGroup>;
+type SubmenuTriggerBaseProps = ComponentProps<typeof BaseMenu.SubmenuTrigger>;
+type GroupBaseProps = ComponentProps<typeof BaseMenu.Group>;
+type GroupLabelBaseProps = ComponentProps<typeof BaseMenu.GroupLabel>;
+type SeparatorBaseProps = ComponentProps<typeof BaseMenu.Separator>;
+
+/** What every row in this family takes beyond the part's own props. */
+interface MenuRowProps {
+  children?: ReactNode;
+  /**
+   * A glyph in the fixed box at the start of the row. The box owns its size and
+   * its colour; a glyph placed in it fills it, so an icon that carries its own
+   * dimensions states them as 100% rather than arriving at its library default.
+   */
+  icon?: ReactNode;
+  /** Trailing metadata: a keyboard shortcut, a count, a hint. */
+  shortcut?: ReactNode;
+  /** Anything else at the end of the row, after the shortcut. */
+  endContent?: ReactNode;
+  className?: string;
+}
+
+export interface MenuContentProps extends Omit<
+  PositionerBaseProps,
+  'className' | 'children' | 'render'
+> {
+  children?: ReactNode;
+  /** Where the menu mounts. Defaults to the nearest `PopupContainerProvider`. */
+  container?: PopupContainer;
+  /** Where focus goes when the menu closes; Base UI's `Menu.Popup` prop. */
+  finalFocus?: PopupBaseProps['finalFocus'];
+  className?: string;
+}
+
+/**
+ * What opens the menu. It is Base UI's trigger unchanged, because a menu is
+ * opened by whatever the surface already had there: a caller passes the control
+ * it wants through `render` — `render={<Button variant="ghost" icon />}` —
+ * rather than being given a second button to keep in step with `Button`.
+ */
+export type MenuTriggerProps = TriggerBaseProps;
+
+export interface MenuItemProps extends Omit<ItemBaseProps, 'className' | 'children'>, MenuRowProps {
+  /** A command, or one that destroys something. */
+  tone?: MenuItemTone;
+  /**
+   * Reserve the leading box on a row that has no icon, so its label lines up
+   * with the labels of the rows around it that do.
+   */
+  inset?: boolean;
+}
+
+export interface MenuLinkItemProps
+  extends Omit<LinkItemBaseProps, 'className' | 'children'>, MenuRowProps {
+  tone?: MenuItemTone;
+  inset?: boolean;
+}
+
+export interface MenuCheckboxItemProps
+  extends Omit<CheckboxItemBaseProps, 'className' | 'children'>, Omit<MenuRowProps, 'icon'> {}
+
+export interface MenuRadioItemProps
+  extends Omit<RadioItemBaseProps, 'className' | 'children'>, Omit<MenuRowProps, 'icon'> {}
+
+export interface MenuSubmenuTriggerProps
+  extends Omit<SubmenuTriggerBaseProps, 'className' | 'children'>, MenuRowProps {
+  inset?: boolean;
+}
+
+export interface MenuRadioGroupProps extends Omit<RadioGroupBaseProps, 'className'> {
+  className?: string;
+}
+export interface MenuGroupProps extends Omit<GroupBaseProps, 'className'> {
+  className?: string;
+}
+export interface MenuGroupLabelProps extends Omit<GroupLabelBaseProps, 'className'> {
+  className?: string;
+}
+export interface MenuSeparatorProps extends Omit<SeparatorBaseProps, 'className'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  /** The positioner carries no appearance; the popup inside it does. */
+  positioner: { outlineStyle: 'none' },
+});
+
+/**
+ * The row every part in this family renders: the leading box, the label that
+ * takes the remaining width, the trailing metadata, and whatever the caller
+ * appended. It is written once here so a command, a checkbox row, a radio row
+ * and a submenu trigger cannot line their contents up differently.
+ */
+function Row({
+  leading,
+  children,
+  shortcut,
+  endContent,
+}: {
+  leading?: ReactNode;
+  children?: ReactNode;
+  shortcut?: ReactNode;
+  endContent?: ReactNode;
+}) {
+  return (
+    <>
+      {leading}
+      <span {...stylex.props(surface.itemText)}>{children}</span>
+      {shortcut == null ? null : <span {...stylex.props(surface.itemShortcut)}>{shortcut}</span>}
+      {endContent}
+    </>
+  );
+}
+
+/** The caller's glyph, in the box the rules give it. */
+function ItemIcon({ icon, tone }: { icon: ReactNode; tone?: MenuItemTone }) {
+  return (
+    <span
+      {...stylex.props(
+        surface.itemIcon,
+        // A destructive row's icon is part of what the row says rather than a
+        // hint beside it, so it takes the row's colour instead of its own.
+        tone === 'destructive' && surface.itemIconInherit
+      )}
+    >
+      {icon}
+    </span>
+  );
+}
+
+/** The reserved but empty leading box that lines an `inset` row up. */
+function ItemSpacer() {
+  return <span aria-hidden="true" {...stylex.props(surface.itemIcon)} />;
+}
+
+function leadingFor(icon: ReactNode, inset: boolean | undefined, tone?: MenuItemTone) {
+  if (icon != null) return <ItemIcon icon={icon} tone={tone} />;
+  return inset ? <ItemSpacer /> : null;
+}
+
+/**
+ * A row's classes, from the state Base UI reports on it.
+ *
+ * `highlighted` is where the keyboard or the pointer is; a submenu trigger also
+ * reports `open` and keeps the fill while the submenu it opened is up, so the
+ * row the pointer left does not go dark as it crosses into that submenu.
+ */
+function rowClassName(
+  state: { disabled?: boolean; highlighted?: boolean; checked?: boolean; open?: boolean },
+  tone: MenuItemTone,
+  className: string | undefined
+): string | undefined {
+  const destructive = tone === 'destructive';
+  return appendClassName(
+    stylex.props(
+      surface.item,
+      destructive && surface.itemDestructive,
+      state.open && surface.itemOpen,
+      state.highlighted && surface.itemHighlighted,
+      state.highlighted && destructive && surface.itemDestructiveHighlighted,
+      state.disabled && surface.itemDisabled
+    ).className,
+    className
+  );
+}
+
+/**
+ * The menu, assembled. Base UI splits a popup into a portal, a positioner and
+ * the popup; every caller writes the same three, so this part writes them once
+ * and takes the positioning props on the outside.
+ *
+ * It is the same part for a dropdown, a submenu, a context menu and a menubar
+ * menu. Base UI resolves the side from where the menu sits — `inline-end` under
+ * a submenu trigger, `bottom` under a menubar trigger — so only the top-level
+ * gap is stated here, and `ContextMenu.Content` drops even that because a
+ * context menu is anchored to the pointer rather than to a control.
+ */
+export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(
+  { className, children, container, finalFocus, sideOffset = POPUP_GAP, ...rest },
+  ref
+) {
+  const inheritedContainer = usePopupContainer();
+  // A portalled popup leaves the subtree whose palette it should be using, so
+  // the classes that declare that palette travel with it and land on the
+  // positioner, where they cascade into the popup and its rows.
+  const palette = useForcedThemeClassNames();
+  const mountPoint = container ?? inheritedContainer;
+  // A popup mounted into a named container is inside a subtree the host owns,
+  // and a modal panel typically centres itself with `translate`, which makes it
+  // the containing block for every `position: fixed` descendant. Floating UI's
+  // fixed strategy then resolves the coordinates it computed against the
+  // viewport relative to that panel instead. The absolute strategy resolves
+  // against the offset parent, which is the panel, so the two agree again.
+  const strategy = rest.positionMethod ?? (mountPoint != null ? 'absolute' : undefined);
+  return (
+    <BaseMenu.Portal container={mountPoint}>
+      <BaseMenu.Positioner
+        ref={ref}
+        {...rest}
+        sideOffset={sideOffset}
+        positionMethod={strategy}
+        className={[stylex.props(styles.positioner).className, ...palette]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <BaseMenu.Popup
+          finalFocus={finalFocus}
+          className={(state) => {
+            // StyleX cannot express `[data-starting-style]`, so the two ends of
+            // the rise are read off Base UI's transition status here, and the
+            // direction from the side the menu actually landed on.
+            const hidden =
+              state.transitionStatus === 'starting' || state.transitionStatus === 'ending';
+            return appendClassName(
+              stylex.props(
+                surface.popup,
+                surface.popupMenu,
+                hidden && hiddenSurfaceForSide(state.side)
+              ).className,
+              className
+            );
+          }}
+        >
+          {children}
+        </BaseMenu.Popup>
+      </BaseMenu.Positioner>
+    </BaseMenu.Portal>
+  );
+});
+
+/** A command. */
+export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(
+  { className, children, icon, shortcut, endContent, inset, tone = 'neutral', ...rest },
+  ref
+) {
+  return (
+    <BaseMenu.Item
+      ref={ref}
+      data-tone={tone}
+      {...rest}
+      className={(state) => rowClassName(state, tone, className)}
+    >
+      <Row leading={leadingFor(icon, inset, tone)} shortcut={shortcut} endContent={endContent}>
+        {children}
+      </Row>
+    </BaseMenu.Item>
+  );
+});
+
+/** A command that is a link: the same row, rendered as an `<a>`. */
+export const MenuLinkItem = forwardRef<HTMLAnchorElement, MenuLinkItemProps>(function MenuLinkItem(
+  { className, children, icon, shortcut, endContent, inset, tone = 'neutral', ...rest },
+  ref
+) {
+  return (
+    <BaseMenu.LinkItem
+      ref={ref}
+      data-tone={tone}
+      {...rest}
+      className={(state) => rowClassName(state, tone, className)}
+    >
+      <Row leading={leadingFor(icon, inset, tone)} shortcut={shortcut} endContent={endContent}>
+        {children}
+      </Row>
+    </BaseMenu.LinkItem>
+  );
+});
+
+/**
+ * A row that toggles a setting.
+ *
+ * Its leading box is the same box a plain row gives an icon, so a list holding
+ * both lines up, and it holds the row's state rather than a caller's glyph:
+ * Base UI unmounts the tick while the row is unticked, so an icon sharing that
+ * box would slide sideways every time the row was toggled. A row that needs a
+ * glyph as well puts it in `endContent`. The box itself is always reserved, so
+ * the list does not reflow as the tick appears.
+ */
+export const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(
+  function MenuCheckboxItem({ className, children, shortcut, endContent, ...rest }, ref) {
+    return (
+      <BaseMenu.CheckboxItem
+        ref={ref}
+        {...rest}
+        className={(state) => rowClassName(state, 'neutral', className)}
+      >
+        <Row
+          leading={
+            <span {...stylex.props(surface.indicator)}>
+              <BaseMenu.CheckboxItemIndicator
+                className={stylex.props(surface.indicatorGlyph).className}
+                render={<span />}
+              >
+                <TickGlyph />
+              </BaseMenu.CheckboxItemIndicator>
+            </span>
+          }
+          shortcut={shortcut}
+          endContent={endContent}
+        >
+          {children}
+        </Row>
+      </BaseMenu.CheckboxItem>
+    );
+  }
+);
+
+/** A row that picks one of a `Menu.RadioGroup`'s values; the same box, a dot. */
+export const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(
+  { className, children, shortcut, endContent, ...rest },
+  ref
+) {
+  return (
+    <BaseMenu.RadioItem
+      ref={ref}
+      {...rest}
+      className={(state) => rowClassName(state, 'neutral', className)}
+    >
+      <Row
+        leading={
+          <span {...stylex.props(surface.indicator)}>
+            <BaseMenu.RadioItemIndicator
+              className={stylex.props(surface.indicatorGlyph).className}
+              render={<span />}
+            >
+              <DotGlyph />
+            </BaseMenu.RadioItemIndicator>
+          </span>
+        }
+        shortcut={shortcut}
+        endContent={endContent}
+      >
+        {children}
+      </Row>
+    </BaseMenu.RadioItem>
+  );
+});
+
+/** A row that opens a submenu: the same row, plus the chevron that says so. */
+export const MenuSubmenuTrigger = forwardRef<HTMLDivElement, MenuSubmenuTriggerProps>(
+  function MenuSubmenuTrigger(
+    { className, children, icon, shortcut, endContent, inset, ...rest },
+    ref
+  ) {
+    return (
+      <BaseMenu.SubmenuTrigger
+        ref={ref}
+        {...rest}
+        className={(state) => rowClassName(state, 'neutral', className)}
+      >
+        <Row
+          leading={leadingFor(icon, inset)}
+          shortcut={shortcut}
+          endContent={
+            <>
+              {endContent}
+              <span {...stylex.props(surface.itemIcon, surface.itemSubmenuGlyph)}>
+                <ChevronRightGlyph />
+              </span>
+            </>
+          }
+        >
+          {children}
+        </Row>
+      </BaseMenu.SubmenuTrigger>
+    );
+  }
+);
+
+export const MenuRadioGroup = forwardRef<HTMLDivElement, MenuRadioGroupProps>(
+  function MenuRadioGroup({ className, ...rest }, ref) {
+    return <BaseMenu.RadioGroup ref={ref} {...rest} className={className} />;
+  }
+);
+
+export const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(
+  { className, ...rest },
+  ref
+) {
+  return <BaseMenu.Group ref={ref} {...rest} className={className} />;
+});
+
+export const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(
+  function MenuGroupLabel({ className, ...rest }, ref) {
+    const sx = stylex.props(surface.groupLabel);
+    return (
+      <BaseMenu.GroupLabel
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+export const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.separator);
+  return (
+    <BaseMenu.Separator
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/**
+ * A menu: a trigger and the floating surface it opens.
+ *
+ * This is also the dropdown menu — Base UI has no separate part for one, and a
+ * second name for the same component would be a second thing to keep in step.
+ * `ContextMenu` and `Menubar` are the two that reach this surface a different
+ * way; they re-export these rows rather than restating them, so a command looks
+ * and behaves the same wherever a person meets it.
+ *
+ * `Menu.Content` assembles the portal, positioner and popup, mounts into the
+ * nearest `PopupContainerProvider`, and carries a forced palette across the
+ * portal, the way `Select.Content` does.
+ */
+export const Menu = {
+  Root: BaseMenu.Root,
+  Trigger: BaseMenu.Trigger,
+  Content: MenuContent,
+  Item: MenuItem,
+  LinkItem: MenuLinkItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  Group: MenuGroup,
+  GroupLabel: MenuGroupLabel,
+  Separator: MenuSeparator,
+  /** A submenu is a menu inside a row; its content is `Menu.Content` again. */
+  Submenu: BaseMenu.SubmenuRoot,
+  SubmenuTrigger: MenuSubmenuTrigger,
+};
diff --git a/packages/ui/src/menu/menubar.tsx b/packages/ui/src/menu/menubar.tsx
new file mode 100644
index 000000000..195225e19
--- /dev/null
+++ b/packages/ui/src/menu/menubar.tsx
@@ -0,0 +1,101 @@
+import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { surface } from '../popup/surface';
+import {
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuLinkItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuSubmenuTrigger,
+} from './menu';
+
+type RootBaseProps = ComponentProps<typeof BaseMenubar>;
+type TriggerBaseProps = ComponentProps<typeof Menu.Trigger>;
+
+export interface MenubarRootProps extends Omit<RootBaseProps, 'className'> {
+  className?: string;
+}
+
+export interface MenubarTriggerProps extends Omit<TriggerBaseProps, 'className' | 'children'> {
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The bar itself: a row of triggers and nothing more.
+ *
+ * It states no background and no edge, because a menubar is not a surface — it
+ * sits on whatever rung the shell put it on, most often the region rung of a
+ * title bar, and giving it a fill of its own would put a second surface inside
+ * the one that already holds it.
+ */
+export const MenubarRoot = forwardRef<HTMLDivElement, MenubarRootProps>(function MenubarRoot(
+  { className, ...rest },
+  ref
+) {
+  return (
+    <BaseMenubar
+      ref={ref}
+      {...rest}
+      className={appendClassName(stylex.props(surface.bar).className, className)}
+    />
+  );
+});
+
+/**
+ * A name on the bar that opens a menu.
+ *
+ * It is a menu row laid along the bar rather than down a list: the same height,
+ * radius, type and highlight a row takes, so a bar and the menus it opens
+ * cannot drift into two vocabularies. While its menu is up it keeps the
+ * highlight, which is what says which name the open menu belongs to.
+ */
+export const MenubarTrigger = forwardRef<HTMLButtonElement, MenubarTriggerProps>(
+  function MenubarTrigger({ className, ...rest }, ref) {
+    return (
+      <Menu.Trigger
+        ref={ref}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            stylex.props(surface.barItem, state.open && surface.barItemOpen).className,
+            className
+          )
+        }
+      />
+    );
+  }
+);
+
+/**
+ * A bar of menus, the way a desktop window titles them.
+ *
+ * `Menubar.Menu` is `Menu.Root` and `Menubar.Content` is `Menu.Content`: Base UI
+ * reads the bar from the tree and gives a menu inside one the side and the
+ * keyboard handoff a bar needs — Left and Right walk between the menus while
+ * one is open. Only the bar and its trigger are new here; every row is `Menu`'s.
+ */
+export const Menubar = {
+  Root: MenubarRoot,
+  Menu: Menu.Root,
+  Trigger: MenubarTrigger,
+  Content: MenuContent,
+  Item: MenuItem,
+  LinkItem: MenuLinkItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  Group: MenuGroup,
+  GroupLabel: MenuGroupLabel,
+  Separator: MenuSeparator,
+  Submenu: Menu.Submenu,
+  SubmenuTrigger: MenuSubmenuTrigger,
+};
diff --git a/packages/ui/src/popover/popover.tsx b/packages/ui/src/popover/popover.tsx
new file mode 100644
index 000000000..4f86e1d4f
--- /dev/null
+++ b/packages/ui/src/popover/popover.tsx
@@ -0,0 +1,185 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { usePopupContainer, type PopupContainer } from '../popup/portal-container';
+import { hiddenSurfaceForSide, surface } from '../popup/surface';
+import { useForcedThemeClassNames } from '../theme/theme';
+
+/** The gap between a popover and whatever opened it; the rules' rise distance. */
+const POPUP_GAP = 4;
+
+type PositionerBaseProps = ComponentProps<typeof BasePopover.Positioner>;
+type PopupBaseProps = ComponentProps<typeof BasePopover.Popup>;
+type TriggerBaseProps = ComponentProps<typeof BasePopover.Trigger>;
+type TitleBaseProps = ComponentProps<typeof BasePopover.Title>;
+type DescriptionBaseProps = ComponentProps<typeof BasePopover.Description>;
+
+export interface PopoverContentProps extends Omit<
+  PositionerBaseProps,
+  'className' | 'children' | 'render'
+> {
+  children?: ReactNode;
+  /** Where the popover mounts. Defaults to the nearest `PopupContainerProvider`. */
+  container?: PopupContainer;
+  /** What takes focus when the popover opens; Base UI's `Popover.Popup` prop. */
+  initialFocus?: PopupBaseProps['initialFocus'];
+  /** Where focus goes when it closes; the product's policy, not this package's. */
+  finalFocus?: PopupBaseProps['finalFocus'];
+  className?: string;
+}
+
+/**
+ * What opens the popover. It is Base UI's trigger unchanged, for the reason
+ * `Menu.Trigger` is: a popover is opened by whatever the surface already had
+ * there, so a caller passes the control it wants through
+ * `render={<Button …/>}` rather than being handed a second button to keep in
+ * step with `Button`.
+ */
+export type PopoverTriggerProps = TriggerBaseProps;
+
+export interface PopoverTitleProps extends Omit<TitleBaseProps, 'className'> {
+  className?: string;
+}
+export interface PopoverDescriptionProps extends Omit<DescriptionBaseProps, 'className'> {
+  className?: string;
+}
+export interface PopoverHeaderProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+const styles = stylex.create({
+  /** The positioner carries no appearance; the popup inside it does. */
+  positioner: { outlineStyle: 'none' },
+});
+
+/**
+ * The popover, assembled. Base UI splits it into a portal, a positioner and the
+ * popup; every caller writes the same three, so this part writes them once and
+ * takes the positioning props on the outside — the same shape `Select.Content`
+ * and `Menu.Content` already have.
+ */
+export const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
+  function PopoverContent(
+    { className, children, container, initialFocus, finalFocus, sideOffset = POPUP_GAP, ...rest },
+    ref
+  ) {
+    const inheritedContainer = usePopupContainer();
+    // A portalled popup leaves the subtree whose palette it should be using, so
+    // the classes that declare that palette travel with it and land on the
+    // positioner, where they cascade into the popup and its contents.
+    const palette = useForcedThemeClassNames();
+    const mountPoint = container ?? inheritedContainer;
+    // A popup mounted into a named container is inside a subtree the host owns,
+    // and a modal panel typically centres itself with `translate`, which makes
+    // it the containing block for every `position: fixed` descendant. Floating
+    // UI's fixed strategy then resolves the coordinates it computed against the
+    // viewport relative to that panel instead. The absolute strategy resolves
+    // against the offset parent, which is the panel, so the two agree again.
+    const strategy = rest.positionMethod ?? (mountPoint != null ? 'absolute' : undefined);
+    return (
+      <BasePopover.Portal container={mountPoint}>
+        <BasePopover.Positioner
+          ref={ref}
+          {...rest}
+          sideOffset={sideOffset}
+          positionMethod={strategy}
+          className={[stylex.props(styles.positioner).className, ...palette]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <BasePopover.Popup
+            initialFocus={initialFocus}
+            finalFocus={finalFocus}
+            className={(state) => {
+              // StyleX cannot express `[data-starting-style]`, so the two ends
+              // of the rise are read off Base UI's transition status here, and
+              // the direction from the side the popover actually landed on.
+              const hidden =
+                state.transitionStatus === 'starting' || state.transitionStatus === 'ending';
+              return appendClassName(
+                stylex.props(
+                  surface.popup,
+                  surface.popupPanel,
+                  hidden && hiddenSurfaceForSide(state.side)
+                ).className,
+                className
+              );
+            }}
+          >
+            {children}
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    );
+  }
+);
+
+/** A popover's heading, and the sentence under it: one block rather than two. */
+export function PopoverHeader({ children, className }: PopoverHeaderProps) {
+  const sx = stylex.props(surface.panelHeader);
+  return (
+    <div className={appendClassName(sx.className, className)} style={sx.style}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The heading. Base UI wires it to the popup's accessible name, so a popover
+ * that has one announces it rather than reading its whole body out.
+ */
+export const PopoverTitle = forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle(
+  { className, ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.panelTitle);
+  return (
+    <BasePopover.Title
+      ref={ref}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/** What the heading is about; Base UI wires it to the accessible description. */
+export const PopoverDescription = forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(
+  function PopoverDescription({ className, ...rest }, ref) {
+    const sx = stylex.props(surface.panelDescription);
+    return (
+      <BasePopover.Description
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
+
+/**
+ * A popover: a trigger and the floating surface it opens, with content on that
+ * surface instead of rows.
+ *
+ * It is the same surface a Select list and a Menu open, and it replaces five of
+ * a list's declarations: the `--anchor-width` a list takes because its control
+ * shows the value it holds, the 4px inset that lets a row bleed to the
+ * surface's edge, and the three that make the type a control's rather than
+ * prose. A controlled popover whose anchor owns its own click
+ * semantics names that element with `Popover.Content anchor={…}` instead of
+ * rendering a trigger, which is Base UI's replacement for a separate anchor
+ * part.
+ */
+export const Popover = {
+  Root: BasePopover.Root,
+  Trigger: BasePopover.Trigger,
+  Content: PopoverContent,
+  Header: PopoverHeader,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+  /** A button that closes the popover; unstyled, like `Menu.Trigger`. */
+  Close: BasePopover.Close,
+};
diff --git a/packages/ui/src/popup/popup.tokens.stylex.ts b/packages/ui/src/popup/popup.tokens.stylex.ts
new file mode 100644
index 000000000..5adda0cfd
--- /dev/null
+++ b/packages/ui/src/popup/popup.tokens.stylex.ts
@@ -0,0 +1,104 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { control, radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * One token group for everything that floats over the page — the Select popup,
+ * the Combobox popup, the menus, and the Popover that holds content instead of
+ * rows. It is deliberately not part of the `field` group: a trigger is a
+ * control on the well rung and reads `field`, while the list it opens is on the
+ * floating rung and shares its vocabulary with a menu rather than with an input.
+ * A menu that reached for `field.background` would be naming the wrong thing to
+ * get the right colour.
+ *
+ * A Popover is the same surface with prose on it rather than commands, so it
+ * reads this group too. Giving it one of its own would mean two floating
+ * surfaces that can drift apart — a popover and the menu beside it opening at
+ * two radii over two shadows — which is exactly what `menu-styles.ts` was.
+ */
+export const popup = stylex.defineVars({
+  // The floating rung: raised background plus the popover shadow, together.
+  background: colors.raisedBackground,
+  shadow: shadow.popover,
+  // Nested radius is outer minus inset: a 14px surface with a 4px inset holds
+  // 10px rows. The row radius is derived from that pair rather than picked.
+  radius: radius.large,
+  inset: space[1],
+  itemRadius: radius.medium,
+  // A row is a 28px control that happens to live in a list, so it takes the
+  // small step of the control ladder and the control type rule with it.
+  itemHeight: control.small,
+  itemPaddingX: space[2],
+  itemGap: space[2],
+  indicatorSize: '16px',
+  text: text.subheadlineSize,
+  groupLabelSize: text.captionSize,
+  groupLabelLeading: text.captionLeading,
+  // The rules put popups at 4px below at opacity 0, rising over duration.regular.
+  rise: '4px',
+  scrollArrowHeight: '20px',
+  // A list takes the width of the control it belongs to, because that control
+  // shows the value it holds. A menu has no such pair: what opens it is often a
+  // 28px icon button, and matching that would produce a column of clipped
+  // commands. A menu surface therefore states a width of its own and grows past
+  // it for the longest row.
+  menuWidth: '200px',
+  // A Popover's content is not rows, so the 4px inset that lets a row reach the
+  // surface's edge is the wrong padding for it: prose needs room. This pair is
+  // what a popover replaces on the shared surface, the way `menuWidth` is what
+  // a menu replaces — it also steps the type from the control rule to the prose
+  // rule, which is a fact about type rather than a token of its own.
+  panelPadding: space[3],
+  panelGap: space[2],
+  label: colors.label,
+  hint: colors.tertiaryLabel,
+  groupLabel: colors.secondaryLabel,
+  // The sentence under a popover's title. `groupLabel` resolves to the same
+  // colour today and means something else — a heading over rows — so the two
+  // are named apart rather than shared for the value they happen to agree on.
+  description: colors.secondaryLabel,
+  separator: colors.separator,
+  // Two different facts about a row: `highlighted` is where the keyboard or the
+  // pointer is right now, `selected` is the row that holds the value, and the
+  // tick keeps saying which is current when the highlight moves onto it.
+  //
+  // Both are derived from the rung they sit on rather than taken from
+  // `hoverFill` and `selectedFill`, which the rules name for a row but which
+  // were tuned against the page and card rungs at 100% lightness. On the
+  // floating rung they collapse: measured in Chromium, `hoverFill` lands 2/255
+  // from `raisedBackground` in Lody Light and `selectedFill` resolves to
+  // exactly `raisedBackground` in Vesper, so one state is invisible in each
+  // palette. Mixing toward `label` steps away from the surface in both
+  // directions at once — darker in a light palette, lighter in a dark one —
+  // which is the same derivation `Button` uses for a secondary button's hover.
+  highlight: `color-mix(in oklab, ${colors.raisedBackground}, ${colors.label} 6%)`,
+  selected: `color-mix(in oklab, ${colors.raisedBackground}, ${colors.label} 3%)`,
+  indicator: colors.label,
+  // The one row that is not `label`: a command that destroys something. Its
+  // highlight is mixed toward `destructive` for the same reason `highlight` is
+  // mixed toward `label` — on this rung the named fills collapse into the
+  // surface — so the row about to delete something stays legible while the
+  // keyboard is on it, in both palettes.
+  destructive: colors.destructive,
+  destructiveHighlight: `color-mix(in oklab, ${colors.raisedBackground}, ${colors.destructive} 12%)`,
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced palette;
+ * see `button.tokens.stylex.ts` for why a group declared only at the document
+ * root keeps the root palette inside a themed subtree.
+ */
+export const popupPaletteTheme = stylex.createTheme(popup, {
+  background: colors.raisedBackground,
+  shadow: shadow.popover,
+  label: colors.label,
+  hint: colors.tertiaryLabel,
+  groupLabel: colors.secondaryLabel,
+  description: colors.secondaryLabel,
+  separator: colors.separator,
+  highlight: `color-mix(in oklab, ${colors.raisedBackground}, ${colors.label} 6%)`,
+  selected: `color-mix(in oklab, ${colors.raisedBackground}, ${colors.label} 3%)`,
+  indicator: colors.label,
+  destructive: colors.destructive,
+  destructiveHighlight: `color-mix(in oklab, ${colors.raisedBackground}, ${colors.destructive} 12%)`,
+});
diff --git a/packages/ui/src/popup/portal-container.tsx b/packages/ui/src/popup/portal-container.tsx
new file mode 100644
index 000000000..b2a8dee8c
--- /dev/null
+++ b/packages/ui/src/popup/portal-container.tsx
@@ -0,0 +1,36 @@
+import { createContext, useContext, type ReactNode, type RefObject } from 'react';
+
+/** What Base UI's Portal accepts as its mount point. */
+export type PopupContainer = HTMLElement | RefObject<HTMLElement | null> | null | undefined;
+
+const PopupContainerContext = createContext<PopupContainer>(undefined);
+
+/**
+ * Where the popups below this point mount.
+ *
+ * A floating list defaults to `document.body`, which is right on a page and
+ * wrong inside a modal that owns its own focus scope and scroll lock: a popup
+ * mounted outside that subtree is "outside" to the modal, so focus is pulled
+ * back to it and the wheel is swallowed before the list can scroll. The surface
+ * that owns such a modal states its container once here, and every Select and
+ * Combobox under it mounts inside the modal instead.
+ *
+ * It is a container rather than a flag so this package needs no knowledge of
+ * which modal implementation a host uses; the host names the element.
+ */
+export function PopupContainerProvider({
+  container,
+  children,
+}: {
+  container: PopupContainer;
+  children: ReactNode;
+}) {
+  return (
+    <PopupContainerContext.Provider value={container}>{children}</PopupContainerContext.Provider>
+  );
+}
+
+/** The container a popup mounts into, or `undefined` for the document body. */
+export function usePopupContainer(): PopupContainer {
+  return useContext(PopupContainerContext);
+}
diff --git a/packages/ui/src/popup/surface.ts b/packages/ui/src/popup/surface.ts
new file mode 100644
index 000000000..07d4c2d01
--- /dev/null
+++ b/packages/ui/src/popup/surface.ts
@@ -0,0 +1,372 @@
+import * as stylex from '@stylexjs/stylex';
+import { corner, duration, ease, space, text, z } from '../tokens/scales.stylex';
+import { popup } from './popup.tokens.stylex';
+
+/**
+ * The appearance every floating list in this package shares: the popup itself,
+ * the rows in it, the group labels, the separators and the scroll arrows. It
+ * lives here rather than on one component so Select, Combobox and the menus
+ * that follow cannot each grow their own surface, highlight and selected
+ * treatment, the way `field/well.ts` keeps the controls on the well rung
+ * together.
+ *
+ * A row states two different facts at once. `highlighted` is where the keyboard
+ * or the pointer is right now and takes `popup.highlight`; `selected` is the row
+ * that holds the value and takes `popup.selected`. When the highlight lands on
+ * the selected row the highlight wins the fill, because that is the one that
+ * moves — the tick keeps saying which row is current.
+ */
+export const surface = stylex.create({
+  /** The floating rung: raised background and the popover shadow, together. */
+  popup: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 'var(--anchor-width)',
+    maxHeight: 'var(--available-height)',
+    maxWidth: 'var(--available-width)',
+    padding: popup.inset,
+    backgroundColor: popup.background,
+    boxShadow: popup.shadow,
+    borderRadius: popup.radius,
+    cornerShape: corner.shape,
+    color: popup.label,
+    fontFamily: 'inherit',
+    fontSize: popup.text,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    outlineStyle: 'none',
+    // The rules put a popup at 4px below at opacity 0, rising over
+    // duration.regular. StyleX cannot express `[data-starting-style]`, so the
+    // transition status is read from Base UI's state in JS and the hidden end
+    // of the transition is a class of its own.
+    opacity: 1,
+    transform: 'translateY(0)',
+    transitionProperty: 'opacity, transform',
+    transitionDuration: duration.regular,
+    transitionTimingFunction: ease.standard,
+    // The product shell stacks its own surfaces; a popup belongs above them.
+    zIndex: z.popover,
+  },
+  /**
+   * A menu surface is not the width of what opened it.
+   *
+   * A list belongs to a control that shows the value it holds, so it takes
+   * `--anchor-width` and the two read as one control. A menu is opened by
+   * whatever happens to be there — often a 28px icon button — so it states its
+   * own width and grows past it for the longest row.
+   */
+  popupMenu: {
+    minWidth: popup.menuWidth,
+    // A list keeps its scroll in `list`, between the two scroll arrows. A menu
+    // has no such part — its rows are the popup's own children — so the popup
+    // is the scrolling box, bounded by the `--available-height` it already has.
+    overflowY: 'auto',
+    overflowX: 'hidden',
+  },
+  /**
+   * A popover surface: the same rung with content on it instead of rows.
+   *
+   * It replaces five declarations, the way `popupMenu` replaces one, and
+   * `test/popover.test.tsx` pins that as a count so a sixth cannot appear
+   * quietly. Two are layout: a list is the width of the control it belongs to
+   * and insets by 4px so a row can reach its edge, while a popover is opened by
+   * whatever the surface already had there and holds prose, which needs room
+   * rather than a row's bleed. The other three are the type — size, weight and
+   * tracking — stepping from the control rule to the prose rule, 14 at weight
+   * 400, because what is in a popover is sentences rather than the labels of
+   * commands. A control placed inside one brings its own step with it.
+   */
+  popupPanel: {
+    minWidth: 'auto',
+    gap: popup.panelGap,
+    padding: popup.panelPadding,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    fontSize: text.bodySize,
+    lineHeight: text.bodyLeading,
+    fontWeight: 400,
+    letterSpacing: 'normal',
+  },
+  /** A popover's title and the sentence under it: one block, not two. */
+  panelHeader: { display: 'flex', flexDirection: 'column', gap: space[1] },
+  /**
+   * The popover's heading. It is not a dialog title — the rules reserve
+   * `headline` for a panel that owns the window — so it takes the control step
+   * the surface around it already speaks in, at the weight that makes it a
+   * heading.
+   */
+  panelTitle: {
+    margin: 0,
+    fontSize: popup.text,
+    lineHeight: text.subheadlineLeading,
+    fontWeight: 600,
+    letterSpacing: text.controlTracking,
+    color: popup.label,
+  },
+  /** What the heading is about, so the secondary label at the footnote step. */
+  panelDescription: {
+    margin: 0,
+    fontSize: text.footnoteSize,
+    lineHeight: text.footnoteLeading,
+    fontWeight: 400,
+    color: popup.description,
+  },
+  /** Where the rise starts and ends: 4px below the resting position. */
+  popupHidden: { opacity: 0, transform: `translateY(${popup.rise})` },
+  /**
+   * The same 4px, on the other three sides.
+   *
+   * A Select list always opens below its trigger, so the rules could name one
+   * direction. A menu flips to stay on screen and a submenu opens beside its
+   * row, so the distance is stated against the anchor instead of against the
+   * page: the popup starts one step further from what opened it and closes that
+   * step as it arrives, whichever side it landed on.
+   */
+  popupHiddenAbove: { opacity: 0, transform: `translateY(calc(-1 * ${popup.rise}))` },
+  popupHiddenAfter: { opacity: 0, transform: `translateX(${popup.rise})` },
+  popupHiddenBefore: { opacity: 0, transform: `translateX(calc(-1 * ${popup.rise}))` },
+  /**
+   * A Select popup that overlaps its trigger so the selected row's text sits
+   * on the trigger's value reports `side="none"`. Moving it would slide that
+   * alignment out from under the pointer, so this end of the transition only
+   * fades.
+   */
+  popupHiddenInPlace: { opacity: 0, transform: 'translateY(0)' },
+  /** The scrolling region inside the popup. */
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    // A row scrolled to the edge stays clear of the scroll arrows above it.
+    scrollPaddingBlock: popup.scrollArrowHeight,
+    outlineStyle: 'none',
+  },
+  /** A row: a 28px control that happens to live in a list. */
+  item: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    gap: popup.itemGap,
+    minHeight: popup.itemHeight,
+    paddingBlock: 0,
+    paddingInline: popup.itemPaddingX,
+    borderRadius: popup.itemRadius,
+    cornerShape: corner.shape,
+    backgroundColor: 'transparent',
+    color: popup.label,
+    // A list row is not a button: the pointer picks it, it does not press it.
+    cursor: 'default',
+    userSelect: 'none',
+    outlineStyle: 'none',
+    // A row owns its edge, which is no edge. Base UI moves DOM focus onto the
+    // highlighted row, and the product shell puts an inset accent ring on any
+    // focused `[tabindex]` through a zero-specificity `:where()` rule — it
+    // already exempts `[role="menuitem"]` for this exact reason, and an option
+    // is the same case. Stating `none` here means the row cannot pick up a ring
+    // from any host: the fill is how this system says where the keyboard is.
+    boxShadow: 'none',
+    scrollMarginBlock: popup.inset,
+    transitionProperty: 'background-color, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  /** The row that holds the value. */
+  itemSelected: { backgroundColor: popup.selected },
+  /** Where the keyboard or the pointer is; it wins over the selected fill. */
+  itemHighlighted: { backgroundColor: popup.highlight },
+  /** The same 45% the whole library uses, and no pointer. */
+  itemDisabled: { opacity: 0.45, pointerEvents: 'none' },
+  /**
+   * The row that owns an open surface: a submenu trigger while its submenu is
+   * up. It keeps the highlight it was given when the pointer moved onto it, so
+   * the row the submenu belongs to does not go dark the moment the pointer
+   * crosses into the submenu it opened.
+   */
+  itemOpen: { backgroundColor: popup.highlight },
+  /**
+   * A command that destroys something. It is the only row whose label is not
+   * `popup.label`, and its highlight is mixed toward `destructive` so what the
+   * keyboard is on stays the thing the row is about.
+   */
+  itemDestructive: { color: popup.destructive },
+  itemDestructiveHighlighted: { backgroundColor: popup.destructiveHighlight },
+  /**
+   * The label of a row. It takes the remaining width so a long one truncates
+   * instead of pushing the tick out of the popup.
+   */
+  itemText: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  /**
+   * The tick. Its box is reserved on every row, selected or not, so a list does
+   * not reflow as the selection moves down it.
+   */
+  indicator: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: popup.indicatorSize,
+    height: popup.indicatorSize,
+    color: popup.indicator,
+  },
+  indicatorGlyph: { display: 'block', width: popup.indicatorSize, height: popup.indicatorSize },
+  /**
+   * The same box at the start of a menu row, holding whatever the caller gave
+   * rather than a tick. It is the hint colour, because the rules put an icon at
+   * rest with the chevron and the placeholder; the glyph inside it is sized by
+   * this box, never by whatever an icon package decided its default was.
+   */
+  itemIcon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: popup.indicatorSize,
+    height: popup.indicatorSize,
+    color: popup.hint,
+    pointerEvents: 'none',
+  },
+  /** On a destructive row the icon is part of what the row says, not a hint. */
+  itemIconInherit: { color: 'inherit' },
+  /**
+   * Trailing metadata: a keyboard shortcut, a count, a hint. It sits after the
+   * label, which already takes the width, and never grows or shrinks with it.
+   */
+  itemShortcut: {
+    flexShrink: 0,
+    paddingInlineStart: space[3],
+    color: popup.hint,
+    fontSize: text.captionSize,
+    lineHeight: text.captionLeading,
+    fontWeight: 500,
+    // A shortcut is a set of keys rather than a word: the glyphs line up in a
+    // column when several rows carry one.
+    fontVariantNumeric: 'tabular-nums',
+    whiteSpace: 'nowrap',
+  },
+  /** The chevron that says a row opens a submenu. */
+  itemSubmenuGlyph: { marginInlineEnd: `calc(-1 * ${popup.itemGap} / 2)` },
+  /**
+   * A menubar trigger: a menu row laid out along a bar instead of down a list.
+   * It reads the same tokens as a row, so a bar and the menus it opens cannot
+   * drift into two vocabularies.
+   */
+  barItem: {
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: popup.itemGap,
+    height: popup.itemHeight,
+    paddingInline: popup.itemPaddingX,
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    borderRadius: popup.itemRadius,
+    cornerShape: corner.shape,
+    backgroundColor: 'transparent',
+    color: popup.label,
+    fontFamily: 'inherit',
+    fontSize: popup.text,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    lineHeight: 1,
+    cursor: 'default',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+    outlineStyle: 'none',
+    boxShadow: 'none',
+    opacity: { default: 1, ':disabled': 0.45 },
+    transitionProperty: 'background-color, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  /** Hovered, or holding the menu that is currently up: the same one fill. */
+  barItemOpen: { backgroundColor: popup.highlight },
+  /** The bar itself: a row of triggers, on whatever rung the surface is. */
+  bar: { display: 'flex', alignItems: 'center', gap: space[1] },
+  /** A group heading: about the rows under it, so the secondary label colour. */
+  groupLabel: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: popup.itemHeight,
+    paddingInline: popup.itemPaddingX,
+    color: popup.groupLabel,
+    fontSize: popup.groupLabelSize,
+    lineHeight: popup.groupLabelLeading,
+    fontWeight: 500,
+    letterSpacing: '0.06em',
+    textTransform: 'uppercase',
+    userSelect: 'none',
+  },
+  /** The one place a line is allowed: between rows. */
+  separator: {
+    height: '1px',
+    flexShrink: 0,
+    marginBlock: popup.inset,
+    marginInline: `calc(-1 * ${popup.inset})`,
+    backgroundColor: popup.separator,
+  },
+  /**
+   * "No matches": a hint rather than a row, because it cannot be picked.
+   *
+   * Base UI keeps this element mounted whether or not the list is empty, so a
+   * screen reader has a live region to announce the change into, and swaps its
+   * children instead. It therefore has to take no room while it holds nothing,
+   * or every popup opens with a blank row above its first item. `:empty` is the
+   * right lever: the element stays rendered and in the accessibility tree, it
+   * just has no height. Hiding it with `display: none`, `hidden` or
+   * `aria-hidden` would take the live region out of the tree, which is what
+   * Base UI warns against.
+   */
+  empty: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: { default: popup.itemHeight, ':empty': 0 },
+    paddingInline: { default: popup.itemPaddingX, ':empty': 0 },
+    color: popup.hint,
+    fontWeight: 400,
+    userSelect: 'none',
+  },
+  /** The strips that appear when a list is taller than the space it has. */
+  scrollArrow: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    height: popup.scrollArrowHeight,
+    backgroundColor: popup.background,
+    color: popup.hint,
+    cursor: 'default',
+    userSelect: 'none',
+  },
+});
+
+/** Which side of its anchor a popup landed on, as Base UI reports it. */
+export type PopupSide = 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';
+
+/**
+ * The hidden end of the rise for the side a popup actually landed on.
+ *
+ * StyleX cannot express `[data-starting-style]`, so both ends of the transition
+ * are read off Base UI's transition status in JS and the hidden one is a class
+ * of its own. A list only ever opens below its trigger, so `popupHidden` alone
+ * covers it; a menu flips to stay on screen and a submenu opens beside its row,
+ * so the direction is chosen from the side rather than assumed.
+ */
+export function hiddenSurfaceForSide(side: PopupSide | 'none' | undefined) {
+  if (side === 'top') return surface.popupHiddenAbove;
+  if (side === 'right' || side === 'inline-end') return surface.popupHiddenAfter;
+  if (side === 'left' || side === 'inline-start') return surface.popupHiddenBefore;
+  return surface.popupHidden;
+}
diff --git a/packages/ui/src/separator/separator.tsx b/packages/ui/src/separator/separator.tsx
new file mode 100644
index 000000000..93278425a
--- /dev/null
+++ b/packages/ui/src/separator/separator.tsx
@@ -0,0 +1,80 @@
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { colors } from '../tokens/colors.stylex';
+
+type BaseProps = ComponentProps<typeof BaseSeparator>;
+
+export interface SeparatorProps extends Omit<BaseProps, 'className'> {
+  className?: string;
+}
+
+/**
+ * The line itself, exported because `Toolbar.Separator` draws the same one: a
+ * second `stylex.create` for a hairline is a second place for the one edge this
+ * system allows to drift.
+ */
+export const separatorStyles = stylex.create({
+  /**
+   * The one line this system allows, and it has no token group of its own.
+   *
+   * Every other component here derives its edge — a well's inset shadow, a
+   * raised button's, a card's elevation — from tokens that say which rung it is
+   * on. A separator *is* the edge: `separator` is already the semantic name for
+   * "the next row starts here", and a `separator.color` pointing at it would be
+   * a second name for one fact, which is the drift the rules warn about. The
+   * hairline is the same 1px the popup's own row divider takes.
+   */
+  base: {
+    flexShrink: 0,
+    backgroundColor: colors.separator,
+    // No margin. Where a line sits in a stack is the surface's layout, and the
+    // popup's divider carries its own only because it has to bleed through an
+    // inset the caller cannot see.
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+  },
+  horizontal: { width: '100%', height: '1px' },
+  /**
+   * A line down a row of controls. It stretches to the row rather than taking
+   * `height: 100%`, because the row is a flex container and a percentage height
+   * there resolves against a height the row has not got.
+   */
+  vertical: { width: '1px', alignSelf: 'stretch' },
+});
+
+/**
+ * A line between rows.
+ *
+ * The rules give this one edge exactly one job: dividers between the rows of a
+ * list or a table. Never around a surface, which is a shadow, and never under a
+ * header, which is a gap — so a caller reaching for it to close a panel or to
+ * underline a title is the sign that the panel wanted a rung and the title
+ * wanted room.
+ *
+ * It says what it is to a screen reader. Base UI renders `role="separator"`
+ * with the orientation, and there is no `decorative` escape hatch: the old
+ * Radix wrapper defaulted to `decorative`, which is `role="none"`, because it
+ * was used for decoration — and in this system a line is never decoration. The
+ * one place it is allowed is structural by definition.
+ */
+export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function Separator(
+  { orientation = 'horizontal', className, ...rest },
+  ref
+) {
+  const sx = stylex.props(
+    separatorStyles.base,
+    orientation === 'vertical' ? separatorStyles.vertical : separatorStyles.horizontal
+  );
+  return (
+    <BaseSeparator
+      ref={ref}
+      orientation={orientation}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
diff --git a/packages/ui/src/table/pagination.tsx b/packages/ui/src/table/pagination.tsx
new file mode 100644
index 000000000..29beb92ee
--- /dev/null
+++ b/packages/ui/src/table/pagination.tsx
@@ -0,0 +1,377 @@
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, useState, type ComponentProps } from 'react';
+import { Button } from '../button/button';
+import { Input } from '../field/input';
+import { appendClassName } from '../internal/class-name';
+import { ChevronLeftGlyph, ChevronRightGlyph, EllipsisGlyph } from '../internal/glyphs';
+import { tableSurface as surface } from './surface';
+
+/**
+ * How the pages are offered. `numbered` lists them, which is what a person
+ * wants when there are few enough to see; `compact` says where you are out of
+ * how many, which is what is left when there are thousands.
+ */
+export type PaginationLayout = 'numbered' | 'compact';
+
+/** The two rungs of the control ladder a pager sits on: 28 and 32. */
+export type PaginationSize = 'small' | 'medium';
+
+/**
+ * Every word the pager says. They are one prop rather than five, because a
+ * surface that translates one of them translates all of them; the defaults are
+ * English so a board and a test can render one without a dictionary.
+ */
+export interface PaginationLabels {
+  /** Names the navigation landmark, so a page with two pagers has two names. */
+  root: string;
+  previous: string;
+  next: string;
+  /** The name of a numbered button, which is a number on screen. */
+  page: (page: number) => string;
+  /** What the compact layout's position is read as, in place of "4 slash 120". */
+  position: (page: number, pages: number) => string;
+  /** The name of the field a person types a page into. */
+  jump: string;
+}
+
+export interface PaginationProps extends Omit<
+  ComponentProps<'nav'>,
+  'className' | 'onChange' | 'children'
+> {
+  /** The page a person is on, counted from 1. */
+  page: number;
+  /** How many there are. Below 1 is treated as 1: there is always a page. */
+  pages: number;
+  onPageChange: (page: number) => void;
+  layout?: PaginationLayout;
+  size?: PaginationSize;
+  /** How many pages are listed either side of the one you are on. */
+  siblings?: number;
+  /** How many are listed at each end, so the first and last stay reachable. */
+  boundaries?: number;
+  /**
+   * The compact layout's position is a field rather than a readout, so a person
+   * can go to page 4,000 of 9,000 without pressing next four thousand times.
+   */
+  jump?: boolean;
+  labels?: Partial<PaginationLabels>;
+  className?: string;
+}
+
+const DEFAULT_LABELS: PaginationLabels = {
+  root: 'Pagination',
+  previous: 'Previous page',
+  next: 'Next page',
+  page: (page) => `Page ${page}`,
+  position: (page, pages) => `Page ${page} of ${pages}`,
+  jump: 'Page',
+};
+
+/** Stands for the pages between two listed ones. */
+const GAP = 'gap';
+
+const ELLIPSIS_SIZES = {
+  small: surface.ellipsisSmall,
+  medium: surface.ellipsisMedium,
+} as const;
+
+const PAGE_SIZES = {
+  small: surface.pagerPageSmall,
+  medium: surface.pagerPageMedium,
+} as const;
+
+function range(from: number, to: number): number[] {
+  return Array.from({ length: Math.max(0, to - from + 1) }, (_, index) => from + index);
+}
+
+function clampPage(page: number, pages: number): number {
+  const total = Math.max(1, Math.floor(pages) || 1);
+  if (!Number.isFinite(page)) return 1;
+  return Math.min(Math.max(Math.round(page), 1), total);
+}
+
+/**
+ * Which pages the numbered layout lists, and where it admits it is not listing
+ * them all.
+ *
+ * The window is a fixed width so the pager does not change size as a person
+ * walks through it: the two ends, the siblings either side of the page you are
+ * on, that page itself, and the two gaps. A gap is only drawn where it stands
+ * for more than one page — a gap hiding a single page is wider than the page it
+ * hides, and costs a person the press it would have taken.
+ */
+export function pageWindow(
+  page: number,
+  pages: number,
+  siblings: number,
+  boundaries: number
+): (number | typeof GAP)[] {
+  const total = Math.max(1, Math.floor(pages) || 1);
+  const current = clampPage(page, total);
+  const listed = boundaries * 2 + siblings * 2 + 3;
+  if (listed >= total) return range(1, total);
+
+  const firstSibling = Math.max(current - siblings, boundaries + 1);
+  const lastSibling = Math.min(current + siblings, total - boundaries);
+  const gapBefore = firstSibling > boundaries + 2;
+  const gapAfter = lastSibling < total - boundaries - 1;
+
+  // Against either end the window has no gap on that side, so the pages the gap
+  // would have cost are spent listing more of them instead — which is what
+  // keeps the pager one width from the first page to the last.
+  if (!gapBefore && gapAfter) {
+    return [
+      ...range(1, boundaries + siblings * 2 + 2),
+      GAP,
+      ...range(total - boundaries + 1, total),
+    ];
+  }
+  if (gapBefore && !gapAfter) {
+    return [...range(1, boundaries), GAP, ...range(total - (boundaries + siblings * 2 + 1), total)];
+  }
+  return [
+    ...range(1, boundaries),
+    GAP,
+    ...range(firstSibling, lastSibling),
+    GAP,
+    ...range(total - boundaries + 1, total),
+  ];
+}
+
+/**
+ * The way to the rows a list is not showing.
+ *
+ * It is one control rather than a kit of parts, because the part a caller would
+ * otherwise assemble is the one that is easy to get wrong: which pages to list
+ * when there are nine thousand of them, and where to admit that the rest are
+ * missing. A surface states where it is and how many there are, and the pager
+ * works out the window, draws the gaps, and disables the ends.
+ *
+ * It lives with the table because a pager exists when a table did not fit —
+ * though nothing here needs a table above it, and the first caller in this
+ * repository is a file too large to open at once.
+ */
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(
+  {
+    page,
+    pages,
+    onPageChange,
+    layout = 'numbered',
+    size = 'medium',
+    siblings = 1,
+    boundaries = 1,
+    jump = false,
+    labels,
+    className,
+    ...rest
+  },
+  ref
+) {
+  const words = { ...DEFAULT_LABELS, ...labels };
+  const total = Math.max(1, Math.floor(pages) || 1);
+  const current = clampPage(page, total);
+  const sx = stylex.props(surface.pager);
+  const go = (next: number) => {
+    const target = clampPage(next, total);
+    if (target !== current) onPageChange(target);
+  };
+  return (
+    <nav
+      ref={ref}
+      aria-label={words.root}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    >
+      <Step
+        direction="previous"
+        label={words.previous}
+        size={size}
+        disabled={current <= 1}
+        onClick={() => go(current - 1)}
+      />
+      {layout === 'numbered' ? (
+        <Pages
+          current={current}
+          total={total}
+          siblings={siblings}
+          boundaries={boundaries}
+          size={size}
+          words={words}
+          onGo={go}
+        />
+      ) : (
+        <Position current={current} total={total} jump={jump} size={size} words={words} onGo={go} />
+      )}
+      <Step
+        direction="next"
+        label={words.next}
+        size={size}
+        disabled={current >= total}
+        onClick={() => go(current + 1)}
+      />
+    </nav>
+  );
+});
+
+/**
+ * One step either way. It is disabled at the end rather than removed: a pager
+ * whose buttons come and go moves the ones beside them under the pointer.
+ */
+function Step({
+  direction,
+  label,
+  size,
+  disabled,
+  onClick,
+}: {
+  direction: 'previous' | 'next';
+  label: string;
+  size: PaginationSize;
+  disabled: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size={size}
+      icon
+      aria-label={label}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {direction === 'previous' ? <ChevronLeftGlyph /> : <ChevronRightGlyph />}
+    </Button>
+  );
+}
+
+/**
+ * The pages, as a list: a screen reader is told how many things are on offer
+ * before it reads the first of them. The page a person is on is the one raised
+ * out of the row — a secondary Button among ghosts — and it says so twice, once
+ * as a fill and once as `aria-current`, because the fill reaches only the people
+ * who can see it.
+ */
+function Pages({
+  current,
+  total,
+  siblings,
+  boundaries,
+  size,
+  words,
+  onGo,
+}: {
+  current: number;
+  total: number;
+  siblings: number;
+  boundaries: number;
+  size: PaginationSize;
+  words: PaginationLabels;
+  onGo: (page: number) => void;
+}) {
+  const list = stylex.props(surface.pagerList);
+  const item = stylex.props(surface.pagerItem);
+  const gap = stylex.props(surface.ellipsis, ELLIPSIS_SIZES[size]);
+  const glyph = stylex.props(surface.ellipsisGlyph);
+  const pageButton = stylex.props(PAGE_SIZES[size]);
+  const listed = pageWindow(current, total, siblings, boundaries);
+  return (
+    <ul className={list.className} style={list.style}>
+      {listed.map((entry, index) =>
+        entry === GAP ? (
+          <li key={`gap-${index}`} className={item.className} style={item.style} aria-hidden="true">
+            <span className={gap.className} style={gap.style}>
+              <span className={glyph.className} style={glyph.style}>
+                <EllipsisGlyph />
+              </span>
+            </span>
+          </li>
+        ) : (
+          <li key={entry} className={item.className} style={item.style}>
+            <Button
+              variant={entry === current ? 'secondary' : 'ghost'}
+              size={size}
+              aria-label={words.page(entry)}
+              aria-current={entry === current ? 'page' : undefined}
+              className={pageButton.className}
+              onClick={() => onGo(entry)}
+            >
+              {entry}
+            </Button>
+          </li>
+        )
+      )}
+    </ul>
+  );
+}
+
+/**
+ * Where you are, when there are too many pages to list.
+ *
+ * The numbers on screen are read as "4 slash 120", so the sentence a screen
+ * reader gets is said separately and the figures are hidden from it. When the
+ * position is a field, what it commits on is Enter or leaving it, rather than
+ * every keystroke: typing 4-5 through a pager that navigates as you type visits
+ * page 4 on the way to page 45, and on a pager over a large file that is a page
+ * fetched and thrown away.
+ */
+function Position({
+  current,
+  total,
+  jump,
+  size,
+  words,
+  onGo,
+}: {
+  current: number;
+  total: number;
+  jump: boolean;
+  size: PaginationSize;
+  words: PaginationLabels;
+  onGo: (page: number) => void;
+}) {
+  const sx = stylex.props(surface.position);
+  const totalSx = stylex.props(surface.positionTotal);
+  const hidden = stylex.props(surface.srOnly);
+  const [draft, setDraft] = useState<string | null>(null);
+  const commit = () => {
+    if (draft === null) return;
+    const typed = Number(draft);
+    setDraft(null);
+    if (draft.trim() !== '' && Number.isFinite(typed)) onGo(typed);
+  };
+  return (
+    <div className={sx.className} style={sx.style}>
+      <span className={hidden.className} style={hidden.style}>
+        {words.position(current, total)}
+      </span>
+      {jump ? (
+        <Input
+          size={size}
+          type="number"
+          inputMode="numeric"
+          min={1}
+          max={total}
+          aria-label={words.jump}
+          value={draft ?? String(current)}
+          className={stylex.props(surface.jump).className}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={commit}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              commit();
+            }
+          }}
+        />
+      ) : (
+        <span aria-hidden="true">{current}</span>
+      )}
+      <span
+        aria-hidden="true"
+        className={totalSx.className}
+        style={totalSx.style}
+      >{`/ ${total}`}</span>
+    </div>
+  );
+}
diff --git a/packages/ui/src/table/parts.tsx b/packages/ui/src/table/parts.tsx
new file mode 100644
index 000000000..c9f3aa062
--- /dev/null
+++ b/packages/ui/src/table/parts.tsx
@@ -0,0 +1,402 @@
+import * as stylex from '@stylexjs/stylex';
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ComponentProps,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { appendClassName } from '../internal/class-name';
+import { ChevronDownGlyph, ChevronUpGlyph } from '../internal/glyphs';
+import { scrollerHeight, tableSurface as surface } from './surface';
+
+/** The control ladder a row is on: 28, 32 and 36. */
+export type TableSize = 'small' | 'medium' | 'large';
+
+/** Which way a sorted column is sorted. */
+export type TableSort = 'ascending' | 'descending';
+
+/** Where a cell's content sits in its column. */
+export type TableAlign = 'start' | 'center' | 'end';
+
+export interface TableRootProps extends Omit<ComponentProps<'table'>, 'className'> {
+  /** The height of every row in it, and the padding in every cell. Medium by default. */
+  size?: TableSize;
+  /** Columns share the width they are given instead of following their contents. */
+  layout?: 'auto' | 'fixed';
+  /**
+   * How tall the table may be. It scrolls in a box that tall and **its head
+   * stays**: the two are one decision, because a head that scrolls out of its
+   * own box is not a thing a surface would ask for.
+   */
+  maxHeight?: string | number;
+  /** Carried by the scroller around the table rather than by the table. */
+  containerClassName?: string;
+  className?: string;
+}
+
+export interface TableSectionProps extends Omit<ComponentProps<'tbody'>, 'className'> {
+  /** Where the rows stack, the head is no longer over them, so it goes. */
+  stacked?: boolean;
+  className?: string;
+}
+
+export interface TableRowProps extends Omit<ComponentProps<'tr'>, 'className'> {
+  /**
+   * This row is one a bulk action would act on. It is a fill, and the tick in
+   * the row is what says so to everyone else: `aria-selected` belongs to a row
+   * in a grid, so a table that lets a person pick rows puts a `Checkbox` in one
+   * — which is both what they press and what announces it.
+   */
+  selected?: boolean;
+  /**
+   * Pressing this row does something, so it answers the pointer, takes the
+   * keyboard, and rings where the keyboard is. Enter and Space press it, so a
+   * caller wires `onClick` and gets all three.
+   */
+  pressable?: boolean;
+  /**
+   * This is the last row, and draws no line to a next one there is none of. A
+   * row assembled by a caller reads that from `:last-child`; a table that
+   * renders its own rows says it, because a pseudo-class cannot compose with
+   * the focus ring a pressable row also carries.
+   */
+  last?: boolean;
+  /** Where this row is too narrow for columns, it becomes a stack of lines. */
+  stacked?: boolean;
+  className?: string;
+}
+
+export interface TableCellProps extends Omit<ComponentProps<'td'>, 'className' | 'align'> {
+  /** Where the content sits. The token step, not the deprecated HTML attribute. */
+  align?: TableAlign;
+  /** Figures read down the column: tabular digits, and aligned to the end unless said otherwise. */
+  numeric?: boolean;
+  /** This column holds sentences, so they wrap instead of ending in an ellipsis. */
+  wrap?: boolean;
+  /**
+   * The column's name, for where the row is stacked and the head is no longer
+   * over it. It is the head's own words rather than a second copy of them.
+   */
+  label?: ReactNode;
+  className?: string;
+}
+
+export interface TableColumnHeaderProps extends Omit<ComponentProps<'th'>, 'className' | 'align'> {
+  align?: TableAlign;
+  numeric?: boolean;
+  wrap?: boolean;
+  /**
+   * Which way this column is sorted, or `null` when the table is sorted by
+   * another one. Passing `onSortChange` is what makes the name a control; the
+   * direction on its own only says which column the table is ordered by.
+   */
+  sort?: TableSort | null;
+  /** Take this column. The part works out which way round, and draws the arrow. */
+  onSortChange?: (sort: TableSort) => void;
+  className?: string;
+}
+
+export interface TableCaptionProps extends Omit<ComponentProps<'caption'>, 'className'> {
+  className?: string;
+}
+
+/**
+ * What the table was told, for the parts inside it. A row's height and a cell's
+ * padding both follow from the size, and whether the head stays is a fact about
+ * the table rather than about the head, so both are stated once on the root —
+ * where two of them cannot disagree.
+ */
+const TableContext = createContext<{ size: TableSize; sticky: boolean }>({
+  size: 'medium',
+  sticky: false,
+});
+
+/** Which section a row is in, which is what decides where its line goes. */
+const TableSection = createContext<'head' | 'body' | 'foot'>('body');
+
+const CELL_SIZES = {
+  small: surface.cellSmall,
+  medium: surface.cellMedium,
+  large: surface.cellLarge,
+} as const;
+
+const ALIGNMENTS = {
+  start: surface.alignStart,
+  center: surface.alignCenter,
+  end: surface.alignEnd,
+} as const;
+
+/**
+ * Rows of records, and no surface of their own.
+ *
+ * A table is the one part of this package that draws no background, no shadow
+ * and no radius: it is rows on whatever the surface around it already was, so a
+ * card holding one keeps owning its own edges. What it draws is the single edge
+ * the rules give a list — `separator`, between one row and the next.
+ *
+ * The scroller around it is the primitive's, because a table is as wide as its
+ * columns need and the column holding it rarely is; without one a wide table
+ * pushes the whole page sideways.
+ */
+export const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(function TableRoot(
+  { size = 'medium', layout = 'auto', maxHeight, containerClassName, className, ...rest },
+  ref
+) {
+  const scroller = stylex.props(
+    surface.scroller,
+    maxHeight != null && surface.scrollerBounded,
+    maxHeight != null && scrollerHeight.maxHeight(maxHeight)
+  );
+  const sx = stylex.props(surface.root, layout === 'fixed' && surface.fixed);
+  const value = useMemo(() => ({ size, sticky: maxHeight != null }), [size, maxHeight]);
+  return (
+    <div className={appendClassName(scroller.className, containerClassName)} style={scroller.style}>
+      <TableContext.Provider value={value}>
+        <table
+          ref={ref}
+          data-size={size}
+          {...rest}
+          className={appendClassName(sx.className, className)}
+          style={sx.style}
+        />
+      </TableContext.Provider>
+    </div>
+  );
+});
+
+/**
+ * The row of column names — and, where the table owns a scroll box, the band
+ * that stays over the rows moving under it. A head that stays is no longer a
+ * row, so it takes the rung the ladder gives a band over the page; one with no
+ * fill is not a quieter design, it is rows painted through the column names.
+ */
+export const TableHead = forwardRef<HTMLTableSectionElement, TableSectionProps>(function TableHead(
+  { stacked = false, className, ...rest },
+  ref
+) {
+  const { sticky } = useContext(TableContext);
+  const sx = stylex.props(sticky && surface.headSticky, stacked && surface.stackedHead);
+  return (
+    <TableSection.Provider value="head">
+      <thead
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    </TableSection.Provider>
+  );
+});
+
+/** The records. */
+export const TableBody = forwardRef<HTMLTableSectionElement, TableSectionProps>(function TableBody(
+  { stacked: _stacked, className, ...rest },
+  ref
+) {
+  return (
+    <TableSection.Provider value="body">
+      <tbody ref={ref} {...rest} className={className} />
+    </TableSection.Provider>
+  );
+});
+
+/** What the records add up to, under a line of its own. */
+export const TableFoot = forwardRef<HTMLTableSectionElement, TableSectionProps>(function TableFoot(
+  { stacked: _stacked, className, ...rest },
+  ref
+) {
+  return (
+    <TableSection.Provider value="foot">
+      <tfoot ref={ref} {...rest} className={className} />
+    </TableSection.Provider>
+  );
+});
+
+/** Enter and Space press a row, the way they press the button it stands for. */
+function pressOnKey(event: KeyboardEvent<HTMLTableRowElement>) {
+  if (event.key !== 'Enter' && event.key !== ' ') return;
+  if (event.target !== event.currentTarget) return;
+  event.preventDefault();
+  event.currentTarget.click();
+}
+
+/**
+ * One record, and the line to the next one.
+ *
+ * The last row in the body draws no line, because there is no next row there —
+ * the same reading a disclosure row makes of its own position. A head row keeps
+ * its line: the row after it is the first record.
+ */
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
+  { selected = false, pressable = false, last, stacked = false, className, onKeyDown, ...rest },
+  ref
+) {
+  const { sticky } = useContext(TableContext);
+  const section = useContext(TableSection);
+  const body = section === 'body';
+  const sx = stylex.props(
+    surface.row,
+    section === 'head' && surface.headRow,
+    section === 'head' && sticky && surface.headStickyRow,
+    section === 'foot' && surface.footRow,
+    body && (last === undefined ? surface.bodyRow : last ? undefined : surface.bodyRowLined),
+    body && pressable && surface.pressableRow,
+    body && pressable && last === true && surface.pressableRowLast,
+    body && !pressable && last === true && surface.bodyRowLast,
+    body && pressable && surface.hoverRow,
+    selected && surface.selectedRow,
+    stacked && section !== 'head' && surface.stackedRow
+  );
+  return (
+    <tr
+      ref={ref}
+      data-selected={selected ? '' : undefined}
+      tabIndex={pressable ? 0 : undefined}
+      onKeyDown={pressable ? (onKeyDown ?? pressOnKey) : onKeyDown}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/** One value. */
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(
+  { align, numeric = false, wrap = false, label, className, children, ...rest },
+  ref
+) {
+  const { size } = useContext(TableContext);
+  const sx = stylex.props(
+    surface.cell,
+    CELL_SIZES[size],
+    wrap && surface.cellWrap,
+    ALIGNMENTS[align ?? (numeric ? 'end' : 'start')],
+    numeric && surface.numeric,
+    label !== undefined && surface.stackedCell
+  );
+  const name = stylex.props(surface.cellLabel);
+  return (
+    <td ref={ref} {...rest} className={appendClassName(sx.className, className)} style={sx.style}>
+      {label !== undefined ? (
+        <span className={name.className} style={name.style}>
+          {label}
+        </span>
+      ) : null}
+      {children}
+    </td>
+  );
+});
+
+/**
+ * A column's name, and — when the table can be ordered by it — the control that
+ * takes it.
+ *
+ * The arrow is drawn by the part rather than passed to it, the way a submenu's
+ * chevron is drawn by its row: a sortable header assembled without one is a
+ * column whose order a person cannot see. `aria-sort` is the same fact on the
+ * cell, so what a screen reader is told and what the arrow shows cannot
+ * disagree, and the direction is the caller's state rather than the part's —
+ * only the caller knows what the rows are actually sorted by.
+ */
+export const TableColumnHeader = forwardRef<HTMLTableCellElement, TableColumnHeaderProps>(
+  function TableColumnHeader(
+    {
+      align,
+      numeric = false,
+      wrap = false,
+      sort = null,
+      onSortChange,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) {
+    const { size } = useContext(TableContext);
+    const resolved = align ?? (numeric ? 'end' : 'start');
+    const sx = stylex.props(
+      surface.cell,
+      CELL_SIZES[size],
+      surface.headCell,
+      wrap && surface.cellWrap,
+      ALIGNMENTS[resolved],
+      numeric && surface.numeric,
+      sort != null && surface.headCellSorted
+    );
+    return (
+      <th
+        ref={ref}
+        scope="col"
+        aria-sort={onSortChange ? (sort ?? 'none') : undefined}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      >
+        {onSortChange ? (
+          <SortButton sort={sort} align={resolved} onSortChange={onSortChange}>
+            {children}
+          </SortButton>
+        ) : (
+          children
+        )}
+      </th>
+    );
+  }
+);
+
+/**
+ * The name as a control. Taking a column that is already taken turns it over,
+ * and taking a new one starts ascending: a person asking to sort by a name
+ * means A first, and the part not the caller is where that is decided so two
+ * tables cannot answer the same press differently.
+ */
+function SortButton({
+  sort,
+  align,
+  onSortChange,
+  children,
+}: {
+  sort: TableSort | null;
+  align: TableAlign;
+  onSortChange: (sort: TableSort) => void;
+  children: ReactNode;
+}) {
+  const sx = stylex.props(surface.sortButton, align === 'end' && surface.sortButtonEnd);
+  const label = stylex.props(surface.sortLabel);
+  const mark = stylex.props(surface.sortMark);
+  return (
+    <button
+      type="button"
+      className={sx.className}
+      style={sx.style}
+      onClick={() => onSortChange(sort === 'ascending' ? 'descending' : 'ascending')}
+    >
+      <span className={label.className} style={label.style}>
+        {children}
+      </span>
+      {sort ? (
+        <span className={mark.className} style={mark.style}>
+          {sort === 'ascending' ? <ChevronUpGlyph /> : <ChevronDownGlyph />}
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+/** What the table is, under it. */
+export const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
+  function TableCaption({ className, ...rest }, ref) {
+    const sx = stylex.props(surface.caption);
+    return (
+      <caption
+        ref={ref}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    );
+  }
+);
diff --git a/packages/ui/src/table/surface.ts b/packages/ui/src/table/surface.ts
new file mode 100644
index 000000000..394532132
--- /dev/null
+++ b/packages/ui/src/table/surface.ts
@@ -0,0 +1,392 @@
+import * as stylex from '@stylexjs/stylex';
+import { button } from '../button/button.tokens.stylex';
+import { corner, duration, ease, radius, space, text, z } from '../tokens/scales.stylex';
+import { table } from './table.tokens.stylex';
+
+/**
+ * What a table is made of, and what the pager under it is made of.
+ *
+ * A table has no surface: no background, no shadow, no radius. It is rows on
+ * whatever the surface around it already was, which is why the one thing it
+ * draws is the line between one row and the next — the single edge the rules
+ * give a list. The head is a row like any other and takes that same line; the
+ * rule against a line under a header is about a heading over a surface, not
+ * about a row of column names, and a head separated from its rows by nothing
+ * reads as the first record.
+ *
+ * That line is the `inset 0 -1px 0` every other row in this package draws, and
+ * the table is laid out with `border-collapse: separate` so it can be. Under
+ * `collapse` a row's own box-shadow is not painted, a sticky head's border does
+ * not travel with it, and a row could not carry a focus ring; under `separate`
+ * all three work, and the row keeps one `box-shadow` in which its line and its
+ * ring compose — which is the rule the rest of the package already follows.
+ */
+const RING = `0 0 0 ${table.ringWidth} ${table.ring}`;
+const LINE = `inset 0 -1px 0 ${table.line}`;
+
+export const tableSurface = stylex.create({
+  /**
+   * A table is as wide as its columns need, and the surface holding it rarely
+   * is. The scroller is the primitive's rather than the caller's so a table
+   * that outgrows its column scrolls instead of pushing the page sideways.
+   */
+  scroller: {
+    position: 'relative',
+    width: '100%',
+    overflowX: 'auto',
+    /**
+     * The table asks about *its own* width, not the window's. A settings table
+     * in a 360px side panel on a 27" screen is narrow, and a media query calls
+     * it wide; the panel is the thing that got small, so the panel's width is
+     * what the question is about. This is what makes the stacked layout below
+     * a container query rather than a breakpoint.
+     */
+    containerType: 'inline-size',
+  },
+  /**
+   * A table told how tall it may be owns a scroll box, which is the only thing
+   * a sticky head can stick to. The two are one decision rather than two props:
+   * a head that scrolls out of its own box is not a choice a surface would make.
+   */
+  scrollerBounded: { overflowY: 'auto' },
+  root: {
+    width: '100%',
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    margin: 0,
+    color: table.value,
+    fontSize: table.text,
+    lineHeight: table.leading,
+    fontWeight: 400,
+    textAlign: 'start',
+  },
+  /** Columns share the width they are given instead of following their contents. */
+  fixed: { tableLayout: 'fixed' },
+  /**
+   * What the table is, for someone who cannot see it is a table. It sits under
+   * the rows rather than over them, because a caption over a table is a heading
+   * and a heading belongs to the surface.
+   */
+  caption: {
+    captionSide: 'bottom',
+    marginBlockStart: table.captionGap,
+    color: table.caption,
+    fontSize: table.captionText,
+    lineHeight: table.captionLeading,
+    textAlign: 'start',
+  },
+  /**
+   * The head stops being a row when it stays: it becomes a band over the rows
+   * moving under it, so it takes the rung the ladder gives a band. Without a
+   * fill the rows are painted through it — that is not a subtlety, it is
+   * legible in a screenshot.
+   */
+  headSticky: {
+    position: 'sticky',
+    insetBlockStart: 0,
+    zIndex: 1,
+  },
+  headStickyRow: { backgroundColor: table.headStickyBackground },
+  row: {
+    backgroundColor: 'transparent',
+    transitionProperty: 'background-color, box-shadow',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  headRow: { boxShadow: LINE },
+  /**
+   * The last record is the end of the table, so it draws no line to a next row
+   * there is none of — the same reading a disclosure row makes of its own
+   * position. `:last-child` is how a row assembled by a caller reads it; a table
+   * that renders its own rows knows which one is last and says so, because a
+   * pseudo-class cannot be composed with the focus ring below.
+   */
+  bodyRow: { boxShadow: { default: LINE, ':last-child': 'none' } },
+  bodyRowLined: { boxShadow: LINE },
+  bodyRowLast: { boxShadow: { default: 'none', ':focus-visible': RING } },
+  /**
+   * A totals row is under the records rather than among them, so the line it
+   * carries is the one above it.
+   */
+  footRow: { boxShadow: `inset 0 1px 0 ${table.line}`, fontWeight: 500 },
+  /**
+   * The pointer is answered only where pressing a row does something. The
+   * package's first table lit every row on hover and its one caller had to turn
+   * that off again with a class, which is the shape of a default that was
+   * wrong: a table of facts is read, not operated.
+   */
+  hoverRow: { backgroundColor: { default: 'transparent', ':hover': table.hover } },
+  /**
+   * A row that can be pressed is reachable by the keyboard and says where the
+   * keyboard is, in the ring the whole package uses — restated with the line,
+   * because CSS cannot add to a box-shadow list. It is not an `outline`: the
+   * product shell resets every outline with `!important`.
+   */
+  pressableRow: {
+    cursor: 'pointer',
+    outlineStyle: 'none',
+    boxShadow: { default: LINE, ':focus-visible': `${LINE}, ${RING}` },
+  },
+  pressableRowLast: {
+    boxShadow: { default: 'none', ':focus-visible': RING },
+  },
+  /**
+   * The rows a bulk action would act on. The tick in the first column is what
+   * says so — a fill alone reaches only the people who can see it — and this is
+   * the quiet fill that lets a person find them again down the page.
+   */
+  selectedRow: { backgroundColor: { default: table.selected, ':hover': table.selected } },
+  cell: {
+    paddingBlock: table.cellPaddingY,
+    textAlign: 'start',
+    verticalAlign: 'middle',
+    fontWeight: 'inherit',
+    /**
+     * A value is one line. A table is read down its columns, and a cell that
+     * wraps to three lines takes the row with it and stops the column being
+     * scannable; a column of sentences says `wrap` and takes the other rule.
+     * Where the layout is `fixed` this ellipsizes, and where it is `auto` the
+     * column grows and the scroller carries it.
+     */
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  cellWrap: { whiteSpace: 'normal', overflow: 'visible', textOverflow: 'clip' },
+  cellSmall: { height: table.rowHeightSmall, paddingInline: table.cellPaddingXSmall },
+  cellMedium: { height: table.rowHeightMedium, paddingInline: table.cellPaddingXMedium },
+  cellLarge: { height: table.rowHeightLarge, paddingInline: table.cellPaddingXLarge },
+  /**
+   * A column's name is about the column rather than in it, so it takes the
+   * footnote step and the secondary colour the rules give a label.
+   */
+  headCell: {
+    color: table.head,
+    fontSize: table.headText,
+    lineHeight: table.headLeading,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+  },
+  /** The one column the table is sorted by, which is the thing rather than about it. */
+  headCellSorted: { color: table.headActive },
+  alignStart: { textAlign: 'start' },
+  alignCenter: { textAlign: 'center' },
+  alignEnd: { textAlign: 'end' },
+  /**
+   * Figures that are read down a column rather than across a line, so the
+   * digits have to be one width: a proportional 1 puts every number in the
+   * column at a different place.
+   */
+  numeric: { fontVariantNumeric: 'tabular-nums' },
+  /**
+   * A sortable column's name is a control, so it is a real button — and the one
+   * control a table's head holds. The button pads itself by the ring's own width
+   * and takes that width back as a margin, so the ring has room without the name
+   * moving away from the column under it.
+   */
+  sortButton: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: table.sortGap,
+    maxWidth: '100%',
+    margin: 0,
+    marginInline: `calc(-1 * ${table.ringWidth})`,
+    padding: 0,
+    paddingInline: table.ringWidth,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    color: { default: 'inherit', ':hover': table.headActive },
+    font: 'inherit',
+    letterSpacing: 'inherit',
+    cursor: 'pointer',
+    outlineStyle: 'none',
+    borderRadius: radius.mini,
+    cornerShape: corner.shape,
+    boxShadow: { default: 'none', ':focus-visible': RING },
+    transitionProperty: 'color, box-shadow',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  /** A column aligned to its end puts the arrow before the name, not after it. */
+  sortButtonEnd: { flexDirection: 'row-reverse' },
+  sortLabel: { overflow: 'hidden', textOverflow: 'ellipsis' },
+  /**
+   * The box the arrow gets. Whatever holds a glyph here gives it one, because
+   * this package's glyphs state 100% of their holder.
+   */
+  sortMark: {
+    display: 'block',
+    flexShrink: 0,
+    width: table.sortMarkSize,
+    height: table.sortMarkSize,
+  },
+  /** The column that holds nothing but the box that picks a row. */
+  selectCell: {
+    width: table.selectWidth,
+    paddingInline: 0,
+    textAlign: 'center',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+  },
+  selectBox: { display: 'inline-flex', verticalAlign: 'middle' },
+  /**
+   * Nothing to show. It is a row of the table rather than a panel over it, so
+   * the head stays where it is and a person can still read what the columns
+   * were going to be.
+   */
+  empty: {
+    height: table.emptyHeight,
+    textAlign: 'center',
+    color: table.empty,
+    fontSize: table.text,
+    lineHeight: table.leading,
+  },
+
+  /**
+   * A table narrower than its columns need is not a table with a scrollbar: it
+   * is a list of records, each one a stack of label-and-value lines. Every
+   * surface in this repository that draws a table already does this by hand —
+   * one of them by rendering every cell a second time — and it is only possible
+   * here because the columns are stated: a cell can carry its own column's name
+   * when the head is no longer over it.
+   *
+   * The width is the design system's rather than a caller's, because a caller
+   * choosing it is a caller deciding how wide a record is allowed to be, and
+   * StyleX wants a static key besides.
+   */
+  stackedRow: {
+    '@container (max-width: 480px)': {
+      display: 'block',
+      paddingBlock: table.cellPaddingY,
+    },
+  },
+  stackedCell: {
+    '@container (max-width: 480px)': {
+      display: 'flex',
+      alignItems: 'baseline',
+      justifyContent: 'space-between',
+      gap: space[3],
+      height: 'auto',
+      whiteSpace: 'normal',
+      overflow: 'visible',
+      textAlign: 'start',
+    },
+  },
+  /**
+   * The column's name, beside the value it belongs to. It is the head's own
+   * words rather than a second copy, and it is only shown where the head is
+   * not: a screen reader is given the pair rather than losing the name with
+   * the row of them.
+   */
+  stackedHead: { '@container (max-width: 480px)': { display: 'none' } },
+  cellLabel: {
+    display: 'none',
+    '@container (max-width: 480px)': {
+      display: 'block',
+      flexShrink: 0,
+      color: table.head,
+      fontSize: table.headText,
+      lineHeight: table.headLeading,
+      fontWeight: 500,
+      letterSpacing: text.controlTracking,
+    },
+  },
+
+  // ── The pager ────────────────────────────────────────────────────────────
+  pager: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: table.pagerGap,
+  },
+  pagerList: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: table.pagerGap,
+    listStyleType: 'none',
+    margin: 0,
+    padding: 0,
+  },
+  pagerItem: { display: 'flex' },
+  /**
+   * A numbered button is square while its number is one digit and grows with
+   * the number, which is why it is not the icon-only Button a step takes: a
+   * glyph box holds 16px and page 120 is wider than that. Only the minimum is
+   * stated here — the padding stays the Button's own, because two classes
+   * claiming one property from two `stylex.create` calls have no settled order.
+   */
+  pagerPageSmall: { minWidth: button.heightSmall },
+  pagerPageMedium: { minWidth: button.heightMedium },
+  /**
+   * The pages that are not listed. It is a square the size of the buttons
+   * beside it — it reads the button's own height for that, because "as tall as
+   * what it stands between" is the fact, not a measurement of its own — and it
+   * is hidden from a screen reader: it names no page a person can go to, and a
+   * list that reads "3, 4, more pages, 98" says nothing "3, 4, 98" does not.
+   */
+  ellipsis: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    color: table.pagerHint,
+  },
+  ellipsisSmall: { width: button.heightSmall, height: button.heightSmall },
+  ellipsisMedium: { width: button.heightMedium, height: button.heightMedium },
+  ellipsisGlyph: {
+    display: 'block',
+    width: button.iconSize,
+    height: button.iconSize,
+  },
+  /**
+   * Where you are, when there are too many pages to list. The number you are on
+   * is the value and takes the label colour; the count it is out of is about it
+   * and takes the hint. The digits are tabular so the row does not twitch as
+   * the pages tick over.
+   */
+  position: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: table.pagerPositionGap,
+    marginInline: table.pagerGap,
+    color: table.value,
+    fontSize: table.text,
+    lineHeight: table.leading,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    fontVariantNumeric: 'tabular-nums',
+  },
+  positionTotal: { color: table.pagerHint, fontWeight: 400 },
+  jump: {
+    width: table.pagerJumpWidth,
+    textAlign: 'center',
+    fontVariantNumeric: 'tabular-nums',
+  },
+  /**
+   * Said to a screen reader and to nobody else. The pager's position is three
+   * numbers and a slash on screen, which is read as "4 slash 120"; this is the
+   * sentence that replaces it.
+   */
+  srOnly: {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    margin: '-1px',
+    padding: 0,
+    overflow: 'hidden',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap',
+    borderWidth: 0,
+    zIndex: z.dialogBackdrop,
+  },
+});
+
+/** How much room a column takes, stated on a `<col>` so both its cells follow. */
+export const columnWidth = stylex.create({
+  width: (value: string | number | undefined) => ({ width: value }),
+});
+
+/** A table told how tall it may be, which is what its head sticks to. */
+export const scrollerHeight = stylex.create({
+  maxHeight: (value: string | number | undefined) => ({ maxHeight: value }),
+});
diff --git a/packages/ui/src/table/table.tokens.stylex.ts b/packages/ui/src/table/table.tokens.stylex.ts
new file mode 100644
index 000000000..c63d04276
--- /dev/null
+++ b/packages/ui/src/table/table.tokens.stylex.ts
@@ -0,0 +1,114 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors } from '../tokens/colors.stylex';
+import { control, space, text } from '../tokens/scales.stylex';
+
+/**
+ * One token group for a table and the pager under it.
+ *
+ * They are one family for the reason `dialog` covers three modals and `field`
+ * covers a checkbox and a select trigger: a pager exists because a table did
+ * not fit, the two sit on the same rung of the page and state the same size,
+ * and a row's line and the gap between two page buttons are the same decision
+ * about how dense a list of records is. A pager that took a group of its own
+ * would let a table go quiet while its pager stayed loud.
+ *
+ * A table has no surface of its own. It has no background, no shadow and no
+ * radius: it is rows on whatever the surface around it already was — a page, a
+ * card, a dialog — so the card that holds it keeps owning its own edges. What
+ * the rules give a table is the one edge a list is allowed, `separator`
+ * between one row and the next.
+ *
+ * The one exception is a head that stays while its rows scroll under it, which
+ * is no longer a row: it is a band over them, and the ladder already has a rung
+ * for a band over the page. Anything else on it would show through.
+ *
+ * The two fills are the palette's own `hoverFill` and `selectedFill` rather
+ * than a mix of the surface, which is the opposite of what a popup row does.
+ * The rules say why: those two were tuned against the page and card rungs, and
+ * a table row is exactly the row they were named for. A popup derives its own
+ * only because on the floating rung they collapse into the surface.
+ */
+export const table = stylex.defineVars({
+  // A row is a control-height row that happens to hold values, so it takes the
+  // control ladder the rest of the package takes: 28, 32 and 36. The height is
+  // a minimum rather than a cap — a cell whose column wraps grows the row.
+  rowHeightSmall: control.small,
+  rowHeightMedium: control.medium,
+  rowHeightLarge: control.large,
+  cellPaddingXSmall: space[2],
+  // 10px sits between space.2 and space.3; the 32px row needs the half step,
+  // the same one the 32px control takes.
+  cellPaddingXMedium: '10px',
+  cellPaddingXLarge: space[3],
+  cellPaddingY: space[1],
+  // One step for the whole ladder, and it is the control step rather than the
+  // prose one: a cell holds a value, not a sentence.
+  text: text.subheadlineSize,
+  leading: text.subheadlineLeading,
+  // The head is about the columns rather than in them, so it takes the footnote
+  // step the rules give a label — and the colour they give one.
+  headText: text.footnoteSize,
+  headLeading: text.footnoteLeading,
+  // A head that stays while the rows scroll under it. It is the region rung,
+  // because a head that stops being a row becomes a band over the page — and
+  // because a transparent one is not a design choice but a bug: the rows show
+  // through it.
+  headStickyBackground: colors.secondaryBackground,
+  // The arrow on the column a table is sorted by, and the room between it and
+  // the column's name.
+  sortMarkSize: '12px',
+  sortGap: space[1],
+  // The column that holds nothing but a checkbox: a 16px box with a cell's
+  // padding either side of it, stated once so every table's first column lines
+  // up with every other's.
+  selectWidth: '44px',
+  // Nothing to show. It is a row of the table rather than a panel over it, so
+  // it takes a few rows' worth of height and the colour of a sentence about
+  // the table rather than one in it.
+  emptyHeight: '96px',
+  empty: colors.secondaryLabel,
+  captionText: text.footnoteSize,
+  captionLeading: text.footnoteLeading,
+  captionGap: space[2],
+  value: colors.label,
+  head: colors.secondaryLabel,
+  // The one column the table is sorted by is the thing rather than about it, so
+  // it takes the label colour its own values take. It is the only mark the head
+  // carries: a fill there would be a second surface across the top of a part
+  // that has no surface.
+  headActive: colors.label,
+  caption: colors.secondaryLabel,
+  line: colors.separator,
+  hover: colors.hoverFill,
+  selected: colors.selectedFill,
+  ring: colors.accent,
+  ringWidth: '2px',
+  // The pager. The buttons in it are `Button`s and bring their own tokens; what
+  // is left is the room between them and the parts that are not controls — the
+  // gap the pages are missing, and the count beside the page you are on.
+  pagerGap: space[1],
+  pagerHint: colors.tertiaryLabel,
+  pagerPositionGap: space[1.5],
+  // Wide enough for five digits, so a pager over a file of tens of thousands of
+  // pages does not crop the number it is showing.
+  pagerJumpWidth: '72px',
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced palette;
+ * see `button.tokens.stylex.ts` for why a group declared only at the document
+ * root keeps the root palette inside a themed subtree.
+ */
+export const tablePaletteTheme = stylex.createTheme(table, {
+  headStickyBackground: colors.secondaryBackground,
+  empty: colors.secondaryLabel,
+  value: colors.label,
+  head: colors.secondaryLabel,
+  headActive: colors.label,
+  caption: colors.secondaryLabel,
+  line: colors.separator,
+  hover: colors.hoverFill,
+  selected: colors.selectedFill,
+  ring: colors.accent,
+  pagerHint: colors.tertiaryLabel,
+});
diff --git a/packages/ui/src/table/table.tsx b/packages/ui/src/table/table.tsx
new file mode 100644
index 000000000..ea01308d8
--- /dev/null
+++ b/packages/ui/src/table/table.tsx
@@ -0,0 +1,358 @@
+import * as stylex from '@stylexjs/stylex';
+import { useMemo, type ComponentProps, type ReactNode } from 'react';
+import { Checkbox } from '../field/checkbox';
+import { columnWidth, tableSurface as surface } from './surface';
+import {
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumnHeader,
+  TableFoot,
+  TableHead,
+  TableRoot,
+  TableRow,
+  type TableAlign,
+  type TableCaptionProps,
+  type TableCellProps,
+  type TableColumnHeaderProps,
+  type TableRootProps,
+  type TableRowProps,
+  type TableSectionProps,
+  type TableSize,
+  type TableSort,
+} from './parts';
+
+export type {
+  TableAlign,
+  TableCaptionProps,
+  TableCellProps,
+  TableColumnHeaderProps,
+  TableRootProps,
+  TableRowProps,
+  TableSectionProps,
+  TableSize,
+  TableSort,
+};
+
+/**
+ * One column, stated once.
+ *
+ * This is the whole of the design. A table's hard parts — how wide a column is,
+ * which way its values align, whether they are figures, whether the table can
+ * be ordered by it, what a totals row holds under it — are facts about a
+ * *column*, and a column that exists twice (a name in the head, a cell in every
+ * row) is a fact the caller has to keep in two places. Both surfaces in this
+ * repository that draw a table today write their column template as a literal
+ * `grid-cols-[…]` string in the header and again in the row, by hand; one of
+ * them writes every cell a second time for a narrow window. Stated here, the
+ * two cannot drift — and the table can answer for the rest: the width, the
+ * ordering, the selection, the row that says there is nothing.
+ */
+export interface TableColumn<Row> {
+  /** Identity. It is what a sort reports, not something a person reads. */
+  key: string;
+  /** The column's name, in the head. */
+  header: ReactNode;
+  /** What this column holds for one record. */
+  cell: (row: Row) => ReactNode;
+  align?: TableAlign;
+  /** Figures: tabular digits, and the end of the column unless told otherwise. */
+  numeric?: boolean;
+  /** How much room it takes. A number is pixels; a string is a CSS length. */
+  width?: string | number;
+  /** The table can be ordered by this column. */
+  sortable?: boolean;
+  /** Its values are sentences, so they wrap rather than ending in an ellipsis. */
+  wrap?: boolean;
+  /** What a totals row holds under it. A table with none draws no totals row. */
+  footer?: ReactNode;
+}
+
+/** Which column the records are ordered by, and which way. One at a time. */
+export interface TableSorting {
+  column: string;
+  direction: TableSort;
+}
+
+/** The two things a table says that are words rather than values. */
+export interface TableLabels {
+  /** The name of the box that takes every row at once. */
+  selectAll: string;
+  /** The name of a row's own box, where the table cannot name the record. */
+  select: string;
+}
+
+const DEFAULT_LABELS: TableLabels = { selectAll: 'Select all', select: 'Select row' };
+
+export interface TableProps<Row> extends Omit<
+  ComponentProps<'table'>,
+  'className' | 'children' | 'onSelect'
+> {
+  columns: readonly TableColumn<Row>[];
+  rows: readonly Row[];
+  /** What makes a record itself, for React and for the selection. */
+  rowKey: (row: Row) => string;
+  size?: TableSize;
+  layout?: 'auto' | 'fixed';
+  /** How tall the table may be. It scrolls in a box that tall, and its head stays. */
+  maxHeight?: string | number;
+  /** What the table is, under it. */
+  caption?: ReactNode;
+  /**
+   * Which column the records are ordered by. One column at a time, because two
+   * columns wearing the arrow is a state a table cannot be in — and it is
+   * stated on the table rather than on each column so a caller cannot put it in
+   * one and forget to take it out of the other.
+   */
+  sort?: TableSorting | null;
+  onSortChange?: (sort: TableSorting) => void;
+  /**
+   * The records a bulk action would act on. Passing it draws the column of
+   * boxes and the one in the head, whose mixed state the table derives.
+   */
+  selected?: readonly string[];
+  onSelectedChange?: (selected: string[]) => void;
+  /** What to call a record, for the box that picks it. */
+  rowLabel?: (row: Row) => string;
+  /** Pressing a record does something. The row takes the keyboard with it. */
+  onRowPress?: (row: Row) => void;
+  /**
+   * Where the table's own box is too narrow for its columns, each record
+   * becomes a stack of label-and-value lines instead. It is on by default and
+   * asks about the table's width rather than the window's, so a table in a
+   * narrow side panel stacks on a wide screen — which is the case every surface
+   * in this repository hand-rolls today. A table whose columns must stay a grid
+   * says `stack={false}` and keeps the scrollbar.
+   */
+  stack?: boolean;
+  /** What the table says while it is holding nothing. */
+  empty?: ReactNode;
+  labels?: Partial<TableLabels>;
+  className?: string;
+  containerClassName?: string;
+}
+
+/**
+ * A list of records, and everything that follows from stating its columns.
+ *
+ * The parts hanging off it are the elements a table is made of, and they are
+ * there for a table that is not a list of records — a two-column list of facts,
+ * or markup produced from a Markdown document. Reach for this one otherwise:
+ * what it owns is what a caller assembling those parts has to get right every
+ * time, and what neither a head nor a row can work out alone.
+ *
+ * It does **not reorder the rows**. Which records are shown and in what order
+ * is the surface's — a server sorts, a comparator breaks ties, a page is one
+ * slice of many — so the table owns the control, the arrow, `aria-sort` and the
+ * shape of the state, and the caller owns the data. A table that quietly sorted
+ * what it was handed would be wrong exactly once: on the surface that had
+ * already sorted it.
+ */
+function TableView<Row>({
+  columns,
+  rows,
+  rowKey,
+  size = 'medium',
+  layout = 'auto',
+  maxHeight,
+  caption,
+  sort = null,
+  onSortChange,
+  selected,
+  onSelectedChange,
+  rowLabel,
+  onRowPress,
+  stack = true,
+  empty,
+  labels,
+  className,
+  containerClassName,
+  ...rest
+}: TableProps<Row>) {
+  const words = { ...DEFAULT_LABELS, ...labels };
+  const selectable = selected != null && onSelectedChange != null;
+  const picked = useMemo(() => new Set(selected ?? []), [selected]);
+  const keys = rows.map((row) => rowKey(row));
+  const held = keys.filter((key) => picked.has(key)).length;
+  const all = held > 0 && held === keys.length;
+  const some = held > 0 && !all;
+  const totals = columns.some((column) => column.footer !== undefined);
+  const span = columns.length + (selectable ? 1 : 0);
+
+  const toggleAll = () => {
+    if (!onSelectedChange) return;
+    // The box in the head answers for the rows on screen. A table showing one
+    // page of a long selection therefore never drops the pages a person
+    // already took, and never reports a key it is not showing.
+    const shown = new Set(keys);
+    const elsewhere = (selected ?? []).filter((key) => !shown.has(key));
+    onSelectedChange(all ? elsewhere : [...elsewhere, ...keys]);
+  };
+  const toggleRow = (key: string) => {
+    if (!onSelectedChange) return;
+    const without = (selected ?? []).filter((current) => current !== key);
+    onSelectedChange(picked.has(key) ? without : [...without, key]);
+  };
+
+  return (
+    <TableRoot
+      size={size}
+      layout={layout}
+      maxHeight={maxHeight}
+      className={className}
+      containerClassName={containerClassName}
+      {...rest}
+    >
+      {caption ? <TableCaption>{caption}</TableCaption> : null}
+      {/*
+        A column's width is stated on a `<col>`, so the name and every cell
+        under it take it from one place. It is also the only way to give a width
+        to cells the caller never writes.
+      */}
+      <colgroup>
+        {selectable ? <col {...stylex.props(columnWidth.width(undefined))} /> : null}
+        {columns.map((column) => (
+          <col key={column.key} {...stylex.props(columnWidth.width(column.width))} />
+        ))}
+      </colgroup>
+      <TableHead stacked={stack}>
+        <TableRow>
+          {selectable ? (
+            <SelectCell>
+              <Checkbox
+                aria-label={words.selectAll}
+                checked={all}
+                indeterminate={some}
+                onCheckedChange={toggleAll}
+              />
+            </SelectCell>
+          ) : null}
+          {columns.map((column) => (
+            <TableColumnHeader
+              key={column.key}
+              align={column.align}
+              numeric={column.numeric}
+              wrap={column.wrap}
+              sort={sort?.column === column.key ? sort.direction : null}
+              onSortChange={
+                column.sortable && onSortChange
+                  ? (direction) => onSortChange({ column: column.key, direction })
+                  : undefined
+              }
+            >
+              {column.header}
+            </TableColumnHeader>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {rows.length === 0 && empty !== undefined ? (
+          <TableRow last>
+            <EmptyCell span={span}>{empty}</EmptyCell>
+          </TableRow>
+        ) : (
+          rows.map((row, index) => {
+            const key = keys[index];
+            return (
+              <TableRow
+                key={key}
+                last={index === rows.length - 1}
+                stacked={stack}
+                selected={picked.has(key)}
+                pressable={onRowPress != null}
+                onClick={onRowPress ? () => onRowPress(row) : undefined}
+              >
+                {selectable ? (
+                  <SelectCell stacked={stack}>
+                    <Checkbox
+                      aria-label={rowLabel ? rowLabel(row) : words.select}
+                      checked={picked.has(key)}
+                      onCheckedChange={() => toggleRow(key)}
+                      // Opening a record and picking it are two actions in one
+                      // row, so the box keeps the press that lands on it.
+                      onClick={(event) => event.stopPropagation()}
+                    />
+                  </SelectCell>
+                ) : null}
+                {columns.map((column) => (
+                  <TableCell
+                    key={column.key}
+                    align={column.align}
+                    numeric={column.numeric}
+                    wrap={column.wrap}
+                    label={stack ? column.header : undefined}
+                  >
+                    {column.cell(row)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            );
+          })
+        )}
+      </TableBody>
+      {totals ? (
+        <TableFoot>
+          <TableRow stacked={stack}>
+            {selectable ? <SelectCell stacked={stack} /> : null}
+            {columns.map((column) => (
+              <TableCell
+                key={column.key}
+                align={column.align}
+                numeric={column.numeric}
+                // Only a column that holds a total is named in a stacked record:
+                // the others would be a column's name with nothing after it.
+                label={stack && column.footer !== undefined ? column.header : undefined}
+              >
+                {column.footer}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableFoot>
+      ) : null}
+    </TableRoot>
+  );
+}
+
+/** The column that holds nothing but the box that picks a row. */
+function SelectCell({ children, stacked = false }: { children?: ReactNode; stacked?: boolean }) {
+  // A stacked record is a run of block lines, and a cell left as a table cell
+  // among them is wrapped in an anonymous table by the browser and lands on a
+  // line of its own. The box takes the same line the values take.
+  const sx = stylex.props(surface.cell, surface.selectCell, stacked && surface.stackedCell);
+  const box = stylex.props(surface.selectBox);
+  return (
+    <td className={sx.className} style={sx.style}>
+      {children ? (
+        <span className={box.className} style={box.style}>
+          {children}
+        </span>
+      ) : null}
+    </td>
+  );
+}
+
+/**
+ * Nothing to show. It is a row of the table rather than a panel over it, so the
+ * column names stay where they are and a person can still read what was going
+ * to be here. Only the table knows how many columns to cross, which is one more
+ * thing a caller assembling the parts would have to work out.
+ */
+function EmptyCell({ span, children }: { span: number; children: ReactNode }) {
+  const sx = stylex.props(surface.empty);
+  return (
+    <td colSpan={span} className={sx.className} style={sx.style}>
+      {children}
+    </td>
+  );
+}
+
+export const Table = Object.assign(TableView, {
+  Root: TableRoot,
+  Head: TableHead,
+  Body: TableBody,
+  Foot: TableFoot,
+  Row: TableRow,
+  ColumnHeader: TableColumnHeader,
+  Cell: TableCell,
+  Caption: TableCaption,
+});
diff --git a/packages/ui/src/theme/theme.tsx b/packages/ui/src/theme/theme.tsx
new file mode 100644
index 000000000..a575f448b
--- /dev/null
+++ b/packages/ui/src/theme/theme.tsx
@@ -0,0 +1,103 @@
+import * as stylex from '@stylexjs/stylex';
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { avatarPaletteTheme } from '../avatar/avatar.tokens.stylex';
+import { badgePaletteTheme } from '../badge/badge.tokens.stylex';
+import { buttonPaletteTheme } from '../button/button.tokens.stylex';
+import { cardPaletteTheme } from '../card/card.tokens.stylex';
+import { dialogPaletteTheme } from '../dialog/dialog.tokens.stylex';
+import { disclosurePaletteTheme } from '../disclosure/disclosure.tokens.stylex';
+import { feedbackPaletteTheme } from '../feedback/feedback.tokens.stylex';
+import { fieldPaletteTheme } from '../field/field.tokens.stylex';
+import { kbdPaletteTheme } from '../kbd/kbd.tokens.stylex';
+import { popupPaletteTheme } from '../popup/popup.tokens.stylex';
+import { tablePaletteTheme } from '../table/table.tokens.stylex';
+import { togglePaletteTheme } from '../toggle/toggle.tokens.stylex';
+import { tooltipPaletteTheme } from '../tooltip/tooltip.tokens.stylex';
+import { darkShadowTheme, darkTheme, lightShadowTheme, lightTheme } from '../tokens/colors.stylex';
+
+export type ThemeMode = 'system' | 'light' | 'dark';
+
+/**
+ * Every component token group that points at a semantic colour. These are
+ * re-declared on the element carrying a forced palette so they resolve against
+ * it; a group declared only at the document root keeps the root palette.
+ */
+const componentPaletteThemes = [
+  avatarPaletteTheme,
+  badgePaletteTheme,
+  buttonPaletteTheme,
+  cardPaletteTheme,
+  dialogPaletteTheme,
+  disclosurePaletteTheme,
+  feedbackPaletteTheme,
+  fieldPaletteTheme,
+  kbdPaletteTheme,
+  popupPaletteTheme,
+  tablePaletteTheme,
+  togglePaletteTheme,
+  tooltipPaletteTheme,
+];
+
+const styles = stylex.create({
+  system: { colorScheme: 'light dark' },
+  light: { colorScheme: 'light' },
+  dark: { colorScheme: 'dark' },
+});
+
+export function forcedThemeClassNames(mode: ThemeMode): string[] {
+  if (mode === 'system') return [];
+  const palette = mode === 'dark' ? [darkTheme, darkShadowTheme] : [lightTheme, lightShadowTheme];
+  return (stylex.props(...palette, ...componentPaletteThemes).className ?? '')
+    .split(' ')
+    .filter(Boolean);
+}
+
+/**
+ * The palette in force here, for content that will not be rendered here.
+ *
+ * A forced theme works by cascade: `ThemeRoot` declares the palette on its own
+ * element and everything under it inherits. A popup breaks that, because it is
+ * portalled out to the document and inherits the root palette instead — so a
+ * light panel on a dark page opens a dark list. The subtree publishes which
+ * palette it is under, and the parts that portal re-declare it on the element
+ * they mount, which is the same fix the component token groups already make for
+ * a custom property declared only at the root.
+ */
+const ForcedTheme = createContext<ThemeMode>('system');
+
+/**
+ * The classes that reproduce the palette in force at this point in the tree,
+ * for an element mounted outside it. Empty when nothing is forced, because then
+ * the document already carries the palette the popup should use.
+ */
+export function useForcedThemeClassNames(): string[] {
+  const mode = useContext(ForcedTheme);
+  return useMemo(
+    () => (mode === 'system' ? [] : [...forcedThemeClassNames(mode), colorSchemeClassName(mode)]),
+    [mode]
+  );
+}
+
+/** The `color-scheme` class `ThemeRoot` carries, so a portalled subtree matches. */
+function colorSchemeClassName(mode: ThemeMode): string {
+  return stylex.props(styles[mode]).className ?? '';
+}
+
+export function ThemeRoot({ mode, children }: { mode: ThemeMode; children: ReactNode }) {
+  return (
+    <ForcedTheme.Provider value={mode}>
+      <div
+        {...stylex.props(
+          mode === 'dark' && darkTheme,
+          mode === 'dark' && darkShadowTheme,
+          mode === 'light' && lightTheme,
+          mode === 'light' && lightShadowTheme,
+          mode !== 'system' && componentPaletteThemes,
+          styles[mode]
+        )}
+      >
+        {children}
+      </div>
+    </ForcedTheme.Provider>
+  );
+}
diff --git a/packages/ui/src/toggle/set.ts b/packages/ui/src/toggle/set.ts
new file mode 100644
index 000000000..4e799603a
--- /dev/null
+++ b/packages/ui/src/toggle/set.ts
@@ -0,0 +1,32 @@
+import { createContext, useContext } from 'react';
+
+/** The control ladder a Button is on, plus the 24px step below it. */
+export type ToggleSize = 'mini' | 'small' | 'medium' | 'large';
+export type ToggleShape = 'default' | 'pill';
+
+export interface ToggleSet {
+  size: ToggleSize;
+  shape: ToggleShape;
+}
+
+/**
+ * What the set was told, for the members inside it.
+ *
+ * A member's height and shape follow from the set's, so both are stated once on
+ * the group rather than repeated on every Toggle, where two of them could
+ * disagree — the same reason `Tabs.List` states the strip's size for its tabs.
+ *
+ * It lives in its own file rather than beside either part because both need it:
+ * the group publishes it and the Toggle reads it, and a module that imported
+ * the other to reach it would close a cycle between them.
+ */
+export const ToggleSetContext = createContext<ToggleSet | null>(null);
+
+/**
+ * What a `Toggle` inherits from the set around it, or `null` when it stands
+ * alone. A Toggle reads this itself rather than taking it as a prop, the way a
+ * control in the field family reads validity from its `Field.Root`.
+ */
+export function useToggleSet(): ToggleSet | null {
+  return useContext(ToggleSetContext);
+}
diff --git a/packages/ui/src/toggle/surface.ts b/packages/ui/src/toggle/surface.ts
new file mode 100644
index 000000000..e4663edf9
--- /dev/null
+++ b/packages/ui/src/toggle/surface.ts
@@ -0,0 +1,182 @@
+import * as stylex from '@stylexjs/stylex';
+import { corner, duration, ease, radius, text } from '../tokens/scales.stylex';
+import { toggle } from './toggle.tokens.stylex';
+
+/**
+ * The ring this family draws, in the shape every other ring here takes: 2px,
+ * tight to the control, no offset, no glow, and a `box-shadow` rather than an
+ * `outline` because the product shell resets every outline with `!important`.
+ * A pressed toggle has an edge of its own, so it composes the ring onto it —
+ * CSS cannot append to a box-shadow list, so the pressed style restates both.
+ */
+const RING = `0 0 0 ${toggle.ringWidth} ${toggle.ring}`;
+
+/**
+ * What a toggle, a set of them and the bar holding them are made of.
+ *
+ * It lives here rather than beside each part for the reason
+ * `disclosure/surface.ts` holds the three disclosures' appearance: three parts
+ * of one family cannot each grow their own idea of how far apart two controls
+ * stand or what "pressed" looks like.
+ */
+export const toggleSurface = stylex.create({
+  /**
+   * The control itself, at rest. This is a ghost Button's reset, and
+   * deliberately so: a toggle that is off is a ghost Button that happens to
+   * remember, so the two cannot look different while they sit in one bar.
+   */
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: toggle.gap,
+    flexShrink: 0,
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    lineHeight: 1,
+    cornerShape: corner.shape,
+    // Not an `outline`; see RING above.
+    outlineStyle: 'none',
+    cursor: { default: 'pointer', ':disabled': 'default' },
+    userSelect: 'none',
+    opacity: { default: 1, ':disabled': toggle.disabledOpacity },
+    pointerEvents: { default: 'auto', ':disabled': 'none' },
+    /**
+     * A toggle does not bob. The motion rules give a press
+     * `translateY(1px)` and a dropped highlight, and that is the report of a
+     * raised thing going down and coming back; this one goes down and stays, so
+     * what moves is the surface under it rather than the control itself.
+     */
+    transitionProperty: 'background-color, color, box-shadow, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  mini: {
+    height: toggle.heightMini,
+    paddingInline: toggle.paddingXMini,
+    borderRadius: toggle.radiusMini,
+    fontSize: toggle.textMini,
+  },
+  small: {
+    height: toggle.heightSmall,
+    paddingInline: toggle.paddingXSmall,
+    borderRadius: toggle.radiusSmall,
+    fontSize: toggle.text,
+  },
+  medium: {
+    height: toggle.heightMedium,
+    paddingInline: toggle.paddingXMedium,
+    borderRadius: toggle.radiusMedium,
+    fontSize: toggle.text,
+  },
+  large: {
+    height: toggle.heightLarge,
+    paddingInline: toggle.paddingXLarge,
+    borderRadius: toggle.radiusMedium,
+    fontSize: toggle.text,
+  },
+  iconMini: { width: toggle.heightMini, paddingInline: 0 },
+  iconSmall: { width: toggle.heightSmall, paddingInline: 0 },
+  iconMedium: { width: toggle.heightMedium, paddingInline: 0 },
+  iconLarge: { width: toggle.heightLarge, paddingInline: 0 },
+  /**
+   * The box an icon-only toggle gives what is in it, for the reason an
+   * icon-only Button draws one: this package's glyphs and icons state their
+   * size as 100% of whatever holds them, and StyleX has no descendant selector
+   * with which the control could reach one.
+   */
+  glyph: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: toggle.iconSize,
+    height: toggle.iconSize,
+  },
+  // A pill drops the base squircle: at `radius.full` a squircle is a
+  // superellipse rather than the stadium shape the name promises.
+  pill: { borderRadius: radius.full, cornerShape: corner.round },
+  /** Off: no fill of its own, and about the thing rather than the thing. */
+  rest: {
+    backgroundColor: { default: 'transparent', ':hover': toggle.hover },
+    color: { default: toggle.label, ':hover': toggle.activeLabel },
+    boxShadow: { default: 'none', ':focus-visible': RING },
+  },
+  /**
+   * On: the well rung, and the label colour of something that is the thing
+   * rather than about it. The hover steps away from the surface by the mix a
+   * secondary Button's hover and a popup's highlight already use, because the
+   * ladder's own named fills were tuned against a row on the page rather than
+   * against a control that has sunk into it.
+   */
+  pressed: {
+    backgroundColor: {
+      default: toggle.pressedBackground,
+      ':hover': `color-mix(in oklab, ${toggle.pressedBackground}, ${toggle.activeLabel} 4%)`,
+    },
+    color: toggle.activeLabel,
+    boxShadow: {
+      default: toggle.pressedWell,
+      ':focus-visible': `${toggle.pressedWell}, ${RING}`,
+    },
+  },
+
+  // ── The set ──────────────────────────────────────────────────────────────
+  /**
+   * A set of toggles answering to one value.
+   *
+   * It is a row with a gap and nothing else — no track, no indicator — and that
+   * is the whole difference between it and a `Tabs` strip. A strip picks what
+   * you *see*, so it can be one control with one pill sliding between the
+   * choices; a set stores what is *on*, and two of these can be on at once,
+   * which a sliding pill cannot say. Each member sinks on its own.
+   */
+  group: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: toggle.groupGap,
+    minWidth: 0,
+  },
+  groupVertical: { flexDirection: 'column', alignItems: 'stretch' },
+  /**
+   * A set too wide for its row runs onto a second one rather than overflowing.
+   * The members keep their width there — a toggle neither grows nor shrinks,
+   * the way a badge does not — and the row gap is already the one `gap` states,
+   * so wrapping costs a single declaration.
+   */
+  groupWrap: { flexWrap: 'wrap' },
+
+  // ── The bar ──────────────────────────────────────────────────────────────
+  /**
+   * The bar itself, which draws nothing at all: no fill, no shadow, no radius,
+   * and not even the line a table draws. It is a row of controls on whatever
+   * surface the product already had there, so a bar inside a popover is not a
+   * second surface inside one.
+   *
+   * What it is for is the keyboard. A row of eight icon buttons is eight tab
+   * stops unless something says otherwise, and a person tabbing through a page
+   * should pass a bar rather than walk it; Base UI makes the bar one stop and
+   * gives the arrow keys the walking.
+   */
+  bar: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: toggle.barGap,
+    minWidth: 0,
+  },
+  barVertical: { flexDirection: 'column', alignItems: 'stretch' },
+  /** A cluster inside a bar: related controls, at the set's tighter gap. */
+  barGroup: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: toggle.groupGap,
+    minWidth: 0,
+  },
+  barGroupVertical: { flexDirection: 'column', alignItems: 'stretch' },
+});
diff --git a/packages/ui/src/toggle/toggle-group.tsx b/packages/ui/src/toggle/toggle-group.tsx
new file mode 100644
index 000000000..c8197c242
--- /dev/null
+++ b/packages/ui/src/toggle/toggle-group.tsx
@@ -0,0 +1,75 @@
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import * as stylex from '@stylexjs/stylex';
+import { useMemo, type ReactNode, type Ref } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { ToggleSetContext, type ToggleShape, type ToggleSize } from './set';
+import { toggleSurface as surface } from './surface';
+
+type BaseProps<Value extends string> = BaseToggleGroup.Props<Value>;
+
+export interface ToggleGroupProps<Value extends string> extends Omit<
+  BaseProps<Value>,
+  'className' | 'children'
+> {
+  children?: ReactNode;
+  /** The height every member takes. Stated once here. Defaults to medium. */
+  size?: ToggleSize;
+  /** The shape every member takes. Stated once here. */
+  shape?: ToggleShape;
+  /** Let a set too wide for its row run onto a second one. */
+  wrap?: boolean;
+  /**
+   * The ref arrives as a prop rather than through `forwardRef`, unlike the rest
+   * of this package. `forwardRef` types a component by its props alone, so a
+   * generic one keeps its type parameter only behind a cast — and this one is
+   * generic so that a caller's own union reaches `value` and `onValueChange`
+   * instead of widening to `string[]`. React 19 puts every ref in props anyway.
+   */
+  ref?: Ref<HTMLDivElement>;
+  className?: string;
+}
+
+/**
+ * A set of toggles answering to one value.
+ *
+ * It is **not** a `Tabs` strip, and the two cannot be folded together. A strip
+ * picks what a person *sees*: it is a single control, so it is a sunken track
+ * with one thing raised out of it and one pill sliding between the choices. A
+ * set stores what is *on*: two members can be pressed at once, which no sliding
+ * pill can say, so there is no track and each member sinks on its own. Asked
+ * for one choice out of several — `multiple` left off — it still draws no
+ * track, because the same set with `multiple` on has to look like itself.
+ *
+ * The value is the list of the pressed members' `value`s, so every member in a
+ * set states one; Base UI says so in development when one does not.
+ *
+ * Base UI makes the set one tab stop and gives the arrow keys the walking, so a
+ * person tabbing through a page passes a set of eight rather than walking it.
+ */
+export function ToggleGroup<Value extends string>({
+  size = 'medium',
+  shape = 'default',
+  wrap = false,
+  orientation = 'horizontal',
+  className,
+  ref,
+  ...rest
+}: ToggleGroupProps<Value>) {
+  const sx = stylex.props(
+    surface.group,
+    orientation === 'vertical' && surface.groupVertical,
+    wrap && surface.groupWrap
+  );
+  const set = useMemo(() => ({ size, shape }), [size, shape]);
+  return (
+    <ToggleSetContext.Provider value={set}>
+      <BaseToggleGroup
+        ref={ref}
+        orientation={orientation}
+        {...rest}
+        className={appendClassName(sx.className, className)}
+        style={sx.style}
+      />
+    </ToggleSetContext.Provider>
+  );
+}
diff --git a/packages/ui/src/toggle/toggle.tokens.stylex.ts b/packages/ui/src/toggle/toggle.tokens.stylex.ts
new file mode 100644
index 000000000..44d99adf5
--- /dev/null
+++ b/packages/ui/src/toggle/toggle.tokens.stylex.ts
@@ -0,0 +1,86 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { control, radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * One token group for a control that stays pressed, a set of them, and the bar
+ * that holds them.
+ *
+ * They are one family for the reason `disclosure` covers three layouts of one
+ * idea: a `ToggleGroup` is a row of `Toggle`s that answer to one value and a
+ * `Toolbar` is the row itself, so what a pressed control looks like and how far
+ * apart two of them stand cannot become three decisions in three files.
+ *
+ * It is deliberately not the `field` group. A Switch stores a value in a form —
+ * it takes a name, answers to a `Field.Root` and can be invalid — while a
+ * Toggle states that an option is on right now: bold, wrapped lines, this
+ * filter. Nothing here has a name, a validity or a message under it.
+ *
+ * The size ladder is `control`'s rather than `Button`'s, though a Button and a
+ * Toggle standing in one bar have to line up. They line up because both read
+ * the same scale, not because one reads the other's group: a component group is
+ * not another component's to name, which is the rule that keeps a menu from
+ * reaching for `field.background`. `mini` is off that ladder, so it is stated
+ * here the way `Button` states its own.
+ */
+export const toggle = stylex.defineVars({
+  heightMini: '24px',
+  heightSmall: control.small,
+  heightMedium: control.medium,
+  heightLarge: control.large,
+  paddingXMini: '8px',
+  paddingXSmall: '10px',
+  paddingXMedium: '12px',
+  paddingXLarge: '14px',
+  radiusMini: '6px',
+  radiusSmall: radius.small,
+  radiusMedium: radius.medium,
+  textMini: text.footnoteSize,
+  text: text.subheadlineSize,
+  gap: '6px',
+  // What a toggle holds: the 16 every other holder in this package gives a
+  // glyph, because this package's icons state 100% of whatever holds them.
+  iconSize: '16px',
+  // At rest a toggle is a ghost Button — it is about the thing it acts on — and
+  // under the pointer it becomes the thing.
+  label: colors.secondaryLabel,
+  hover: colors.hoverFill,
+  activeLabel: colors.label,
+  /**
+   * Pressed is the well rung: `wellBackground` under `shadow.inset`, which is
+   * the pair the ladder gives every sunken thing here.
+   *
+   * The rules say ink is for a stored state, and a toggle does store one — but
+   * ink is what a control that **already sits in a well** becomes when it is on.
+   * A Switch's off state occupies the well, so on has to leave it; a Checkbox's
+   * empty box is the same. A toggle rests on nothing at all, so the well is
+   * still free, and sinking into it is the plainest thing this system can say
+   * about a button that has been pressed and stayed down. It also keeps a bar
+   * of eight toggles from reading as eight primary buttons.
+   */
+  pressedBackground: colors.wellBackground,
+  pressedWell: shadow.inset,
+  // Between the members of one set: they answer to one value, so they stand
+  // closer than the clusters of a bar do.
+  groupGap: space[1],
+  // Between the clusters of a bar, and either side of the line between two.
+  barGap: space[2],
+  ring: colors.accent,
+  ringWidth: '2px',
+  // The family's one disabled value; the rules give the whole control 45%.
+  disabledOpacity: '0.45',
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced
+ * palette; see `button.tokens.stylex.ts` for why a group declared only at the
+ * document root keeps the root palette inside a themed subtree.
+ */
+export const togglePaletteTheme = stylex.createTheme(toggle, {
+  label: colors.secondaryLabel,
+  hover: colors.hoverFill,
+  activeLabel: colors.label,
+  pressedBackground: colors.wellBackground,
+  pressedWell: shadow.inset,
+  ring: colors.accent,
+});
diff --git a/packages/ui/src/toggle/toggle.tsx b/packages/ui/src/toggle/toggle.tsx
new file mode 100644
index 000000000..dc0895478
--- /dev/null
+++ b/packages/ui/src/toggle/toggle.tsx
@@ -0,0 +1,93 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { useToggleSet, type ToggleShape, type ToggleSize } from './set';
+import { toggleSurface as surface } from './surface';
+
+export type { ToggleShape, ToggleSize } from './set';
+
+type BaseProps = BaseToggle.Props;
+
+export interface ToggleProps extends Omit<BaseProps, 'className'> {
+  /**
+   * How tall it is, and what it lines up with. Defaults to medium, or to
+   * whatever the set around it was told.
+   */
+  size?: ToggleSize;
+  /** A pill is for a filter a person scans a row of; the default is a control. */
+  shape?: ToggleShape;
+  /** Square at the size's height, holding one 16px glyph. */
+  icon?: boolean;
+  className?: string;
+}
+
+const SIZES = {
+  mini: surface.mini,
+  small: surface.small,
+  medium: surface.medium,
+  large: surface.large,
+} as const;
+
+const ICON_SIZES = {
+  mini: surface.iconMini,
+  small: surface.iconSmall,
+  medium: surface.iconMedium,
+  large: surface.iconLarge,
+} as const;
+
+/**
+ * A control that stays pressed.
+ *
+ * It is not a Switch, and what separates them is what each is for rather than
+ * how each looks. A Switch stores a value in a form: it takes a name, answers
+ * to a `Field.Root`, can be invalid, and is read as a setting. A Toggle says
+ * that an option is on **right now** — bold, wrapped lines, this filter — so it
+ * has no name, no validity and no message under it, and what it changes has
+ * usually already happened by the time a person looks away from it.
+ *
+ * Off it is a ghost Button, because that is what it is: a control with no fill,
+ * about the thing it acts on rather than the thing. On it sinks into the well,
+ * which is this ladder's way of saying something has gone down and stayed —
+ * and the reason it is not ink: ink is what a control that *already* sits in a
+ * well becomes when it is on, and this one rests on nothing at all.
+ *
+ * It renders a real `<button>` carrying `aria-pressed`, so the keyboard reaches
+ * it and a screen reader is told both what it is and whether it is on.
+ */
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(
+  { size, shape, icon = false, className, children, ...rest },
+  ref
+) {
+  const set = useToggleSet();
+  const resolvedSize = size ?? set?.size ?? 'medium';
+  const resolvedShape = shape ?? set?.shape ?? 'default';
+  const glyph = stylex.props(surface.glyph);
+  return (
+    <BaseToggle
+      ref={ref}
+      data-size={resolvedSize}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            surface.base,
+            SIZES[resolvedSize],
+            icon && ICON_SIZES[resolvedSize],
+            resolvedShape === 'pill' && surface.pill,
+            state.pressed ? surface.pressed : surface.rest
+          ).className,
+          className
+        )
+      }
+    >
+      {icon ? (
+        <span className={glyph.className} style={glyph.style}>
+          {children}
+        </span>
+      ) : (
+        children
+      )}
+    </BaseToggle>
+  );
+});
diff --git a/packages/ui/src/toggle/toolbar.tsx b/packages/ui/src/toggle/toolbar.tsx
new file mode 100644
index 000000000..601dccb7d
--- /dev/null
+++ b/packages/ui/src/toggle/toolbar.tsx
@@ -0,0 +1,130 @@
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { separatorStyles } from '../separator/separator';
+import { toggleSurface as surface } from './surface';
+
+type RootBaseProps = ComponentProps<typeof BaseToolbar.Root>;
+type GroupBaseProps = ComponentProps<typeof BaseToolbar.Group>;
+type SeparatorBaseProps = ComponentProps<typeof BaseToolbar.Separator>;
+
+export interface ToolbarRootProps extends Omit<RootBaseProps, 'className'> {
+  className?: string;
+}
+export interface ToolbarGroupProps extends Omit<GroupBaseProps, 'className'> {
+  className?: string;
+}
+export interface ToolbarSeparatorProps extends Omit<SeparatorBaseProps, 'className'> {
+  className?: string;
+}
+
+/**
+ * A bar of controls.
+ *
+ * It draws nothing at all: no fill, no shadow, no radius, and not even the line
+ * a table draws. A bar is a row of controls on whatever surface the product
+ * already had there — a page, a card, the popup over a text selection — so a
+ * bar inside a panel is not a second panel inside one, and a surface that wants
+ * the bar to look like something gives it that itself.
+ *
+ * What it is for is the keyboard. A row of eight icon buttons is eight tab
+ * stops unless something says otherwise, and a person tabbing through a page
+ * should pass a bar rather than walk it. Base UI makes the bar one stop, gives
+ * the arrow keys the walking, and skips the controls that are disabled — which
+ * is the whole reason this part exists rather than a `div` with a gap.
+ */
+export const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(function ToolbarRoot(
+  { className, orientation = 'horizontal', ...rest },
+  ref
+) {
+  const sx = stylex.props(surface.bar, orientation === 'vertical' && surface.barVertical);
+  return (
+    <BaseToolbar.Root
+      ref={ref}
+      orientation={orientation}
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+});
+
+/**
+ * A cluster inside a bar: controls that belong together, at the gap a set of
+ * toggles takes rather than the wider one between clusters. It says `group` to
+ * a screen reader, so a person hears where one cluster ends.
+ */
+export const ToolbarGroup = forwardRef<HTMLDivElement, ToolbarGroupProps>(function ToolbarGroup(
+  { className, ...rest },
+  ref
+) {
+  return (
+    <BaseToolbar.Group
+      ref={ref}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            surface.barGroup,
+            state.orientation === 'vertical' && surface.barGroupVertical
+          ).className,
+          className
+        )
+      }
+    />
+  );
+});
+
+/**
+ * The line between two clusters of a bar — the same line `Separator` draws,
+ * because this system allows exactly one. It is the toolbar's own part rather
+ * than a `Separator` placed by hand for one reason: the orientation is the
+ * bar's turned ninety degrees, and a caller stating it twice is a caller who
+ * can get it wrong. It stretches to the row for the reason a vertical line
+ * always does here — a percentage would resolve against a height a flex row has
+ * not got.
+ */
+export const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorProps>(
+  function ToolbarSeparator({ className, ...rest }, ref) {
+    return (
+      <BaseToolbar.Separator
+        ref={ref}
+        {...rest}
+        className={(state) =>
+          appendClassName(
+            stylex.props(
+              separatorStyles.base,
+              state.orientation === 'vertical'
+                ? separatorStyles.vertical
+                : separatorStyles.horizontal
+            ).className,
+            className
+          )
+        }
+      />
+    );
+  }
+);
+
+/**
+ * Toolbar: the bar, its clusters, the line between them, and the way a control
+ * joins the walk.
+ *
+ * `Toolbar.Button` is Base UI's, unstyled, the way every trigger in this
+ * package is: a bar holds whatever the surface already had there — a ghost
+ * `Button`, a `Toggle`, the trigger of a `Menu` — and registering it in the
+ * roving focus is all this part does. `render={<Button variant="ghost" icon/>}`
+ * is how one arrives.
+ *
+ * There is no `Toolbar.Input` or `Toolbar.Link` here. Base UI ships both, and
+ * neither has an appearance of this system's to add: an `Input` in a bar is
+ * this package's `Input`, and a link is a `Button variant="link"`. They can be
+ * added the day a surface needs one in the walk.
+ */
+export const Toolbar = {
+  Root: ToolbarRoot,
+  Button: BaseToolbar.Button,
+  Group: ToolbarGroup,
+  Separator: ToolbarSeparator,
+};
diff --git a/packages/ui/src/tokens/RULES.md b/packages/ui/src/tokens/RULES.md
new file mode 100644
index 000000000..c5853ea7c
--- /dev/null
+++ b/packages/ui/src/tokens/RULES.md
@@ -0,0 +1,759 @@
+# Token usage rules
+
+Construction: depth without lines. No border token exists. Surfaces separate by
+luminance step and shadow; controls are wells (sunken) or raised.
+
+## Elevation ladder
+
+One rung per component. The rung fixes background and shadow together.
+
+| rung     | background            | shadow                     | examples                                                                          |
+| -------- | --------------------- | -------------------------- | --------------------------------------------------------------------------------- |
+| well     | `wellBackground`      | `shadow.inset`             | input, select, textarea, switch off, checkbox off, segmented track, selected item |
+| page     | `background`          | none                       | app ground                                                                        |
+| region   | `secondaryBackground` | none                       | sidebar, footer band, a block inside a card                                       |
+| card     | `elevatedBackground`  | `shadow.card`              | card, panel, composer, alert                                                      |
+| floating | `raisedBackground`    | `shadow.popover`           | menu, popover, select list, toast; tooltip is `label` with `shadow.medium`        |
+| modal    | `elevatedBackground`  | `shadow.large` + `overlay` | dialog, alert dialog, drawer                                                      |
+
+## Edges
+
+- `separator`: next row. Dividers between list and table rows only. Never
+  around a surface, never under a header.
+- well: you can put something here. `wellBackground` + `shadow.inset`.
+- raised: you can press this. `raisedBackground` + `shadow.raised`. Primary and
+  destructive buttons are raised with `shadow.inkEdge` as their top highlight.
+- shadow: above the page. Strength by rung.
+- ring: attention here. A 2px `box-shadow` composed with the control's own
+  shadow, tight to it, no offset, no glow. `accent` on focus, `destructive` on
+  invalid. Not an `outline`: the product shell resets outlines with `!important`.
+
+## Color
+
+- `label` is the thing, `secondaryLabel` is about the thing, `tertiaryLabel`
+  is a hint: placeholder, help text, chevron, icon at rest.
+- Ink for stored state: primary button, checked, on. `label` fill,
+  `background` text.
+- `accent` for live state only: focus ring, link, live switch, running
+  indicator. Never a button fill.
+- `success` and `warning` report an outcome rather than an action, so they mark
+  and tint a message and never fill a control a person presses. `destructive`
+  is the third: an action that destroys, and an outcome that failed.
+- Disabled is 45% opacity on the whole control, not a color.
+- Semantic first, gray second. `gray…gray6` only for things with no role:
+  scrollbar, tracks, kbd, skeleton, an avatar's stand-in.
+
+## Fields
+
+A control is the well rung: `wellBackground` plus `shadow.inset`, never a
+border. One component token group, `field`, serves the whole family — input,
+textarea, checkbox, radio, switch and the Select and Combobox triggers — so a
+state has one colour in one place instead of one per component. The lists those
+triggers open are on the floating rung and read `popup` instead; see below.
+
+| state       | what it is                                                                     |
+| ----------- | ------------------------------------------------------------------------------ |
+| rest        | `field.background` and `field.well`; the value in `field.value`                |
+| placeholder | `field.placeholder`, the hint colour; it is a prompt, not a label              |
+| focus       | 2px `field.ring` (accent), tight to the control, no offset                     |
+| invalid     | 2px `field.invalidRing` (destructive), at rest and while focused               |
+| disabled    | 45% opacity on the control; the label and help dim with it                     |
+| checked, on | ink: `field.checkedFill` under `field.checkedMark`, `field.checkedEdge` on top |
+| mixed       | the checked appearance with the dash, and it announces `mixed`                 |
+| selected    | the tick, and a quiet fill on the row that is current, not on the control      |
+
+A checkbox and a radio are the "16px things" the corner rule names: a
+`field.boxSize` box at `radius.mini`, round for a radio. A switch is a
+`field.switchWidth` by `field.switchHeight` track at `radius.full` holding a
+`field.thumb` thumb raised with `field.thumbShadow`, the same height as the box
+so a settings row carrying both lines up. Off is the well; on is the ink, which
+is where the well's shadow gives way to `field.checkedEdge`. Because CSS cannot
+append to a box-shadow list, a control that changes its edge restates the ring
+with it, the way each Button variant does.
+
+These three render a real `<button>` with Base UI's hidden input beside it, so
+`:disabled` and `:focus-visible` reach them the way they reach an `<input>` and
+a `<label>` can point at them.
+
+The control's own text follows the control rule at every size on the ladder: 13
+at weight 500 with `text.controlTracking`. Label at 12 weight 500 in
+`field.label`, help at 12 weight 400 in `field.hint`, error at 12 weight 400 in
+`field.error`, stacked at `field.gap`. Disabled reads `field.disabledOpacity`
+rather than a literal, so the control and its label cannot drift apart.
+
+`Field.Root` owns the name, the disabled flag and validity. A control reads that
+state and picks its own classes from it; it does not take a second `invalid` or
+`disabled` prop for the caller to keep in sync.
+
+The invalid ring follows `aria-invalid`, which `Field.Root` renders onto its
+control, so the attribute is the state rather than a copy of it. What a screen
+reader announces and what a sighted person sees cannot disagree, and a surface
+that owns its own validation marks one control without a field around it. Every
+ARIA value except `false` is invalid, `grammar` and `spelling` included.
+
+### Popups and lists
+
+A control on the well rung opens a list on the floating rung, and the two do not
+share a token group. `field` covers the trigger — the size ladder, the ring, the
+invalid ring, the disabled opacity — and `popup` covers the list, because that
+list has more in common with a menu than with an input. A menu reaching for
+`field.background` would be naming the wrong thing to get the right colour.
+
+A popup is `popup.background` with `popup.shadow` at `popup.radius`, inset by
+`popup.inset`, so its rows take `popup.itemRadius` — outer minus inset, 14 less
+4, rather than a token of their own. A row is a `popup.itemHeight` control that
+happens to live in a list, so it follows the control type rule.
+
+A row states two facts at once. `highlighted` is where the keyboard or the
+pointer is right now; `selected` is the row that holds the value, and carries
+the tick. The highlight wins the fill, because it is the one that moves; the
+tick keeps saying which row is current when it lands there.
+
+Both fills are derived from the rung rather than taken from `hoverFill` and
+`selectedFill`, which this table names for a row but which were tuned against
+the page and card rungs at 100% lightness. Measured on the floating rung,
+`hoverFill` lands 2/255 from `raisedBackground` in the light palette and
+`selectedFill` resolves to exactly `raisedBackground` in the dark one, so one
+state is invisible in each. Mixing `raisedBackground` toward `label` steps away
+from the surface in both directions at once, which is the derivation `Button`
+already uses for a secondary button's hover.
+
+A popup opens anchored 4px under its control and rises into place, rather than
+overlapping it to line the current row up with the value. That is the motion
+rule applied: a popup rises from 4px below at `duration.regular`.
+
+A row has no edge of its own, and says so. A popup moves keyboard focus onto the
+highlighted row, and a host that rings any focused element would draw a border
+around it; the fill is how this system marks where the keyboard is, so the row
+declares `box-shadow: none` rather than leaving the property unclaimed. The
+"nothing matches" line collapses to nothing while it holds nothing, because it
+stays mounted for a screen reader to announce into and would otherwise open
+every popup with a blank row.
+
+### Menus
+
+A menu is that same surface with commands on it, so it reads `popup` too and its
+rows are the rows above: one height, one radius, one highlight. Exactly one
+declaration differs. A list takes `--anchor-width`, because the control it
+belongs to shows the value it holds and the two read as one control; a menu is
+opened by whatever the surface already had there — often a 28px icon button — so
+it takes `popup.menuWidth` and grows past it for its longest row. A menu scrolls
+in its own box rather than between scroll arrows, because its rows are the
+popup's own children.
+
+| part            | what it is                                                                  |
+| --------------- | --------------------------------------------------------------------------- |
+| leading box     | `popup.indicatorSize`, at `popup.hint`: a caller's icon, a tick, or a dot   |
+| label           | the row's text; it takes the width, so a long one truncates                 |
+| shortcut        | trailing metadata at `caption`, in `popup.hint`, never growing or shrinking |
+| submenu chevron | drawn by the part, so a caller cannot forget it                             |
+| destructive     | `popup.destructive` label, `popup.destructiveHighlight` under the keyboard  |
+| open            | the row owning an open submenu keeps the highlight fill                     |
+
+A row that holds no icon holds no box, so an icon-less menu is not indented for
+nothing; a row in a mixed list asks for the box with `inset` and lines up with
+its neighbours. A checkbox or radio row's leading box is its state and nothing
+else: the mark is unmounted while the row is unticked, so a caller's glyph
+sharing that box would slide sideways every time the row was toggled.
+
+Destructive is a tone of the row rather than a component: one class changes the
+label colour and one changes the fill under the keyboard, and everything else
+about the row is what every other command takes. The fill is mixed toward
+`destructive` for the reason `highlight` is mixed toward `label` — on this rung
+the named fills collapse into the surface.
+
+The rise applies to a menu too, but a menu flips to stay on screen and a submenu
+opens beside its row, so the 4px is measured against the anchor rather than the
+page: the popup starts one step further from what opened it, on whichever side
+it landed, and closes that step as it arrives. A context menu is anchored to the
+pointer instead of to a control, so it takes no gap at all.
+
+### Popovers
+
+A popover is that surface with content on it instead of rows, so it reads `popup`
+as well. It replaces five of a list's declarations and no more: the
+`--anchor-width` a list takes because its control shows the value it holds, the
+`popup.inset` that lets a row bleed to the surface's edge — prose needs room, so
+it takes `popup.panelPadding` and stacks at `popup.panelGap` — and the three that
+make the type a control's. What is in a popover is sentences, so it follows the
+prose rule, 14 at weight 400; a control placed inside one brings its own step.
+Its heading is the control step at weight 600 rather than a dialog's `headline`,
+because a popover does not own the window, and the sentence under it is
+`popup.description` at 12.
+
+## Modals
+
+The modal rung is the one rung that states three things at once:
+`dialog.background` under `dialog.shadow`, over `dialog.overlay`. A panel here
+covers what a person was doing and still shows it, so the page has to recede
+rather than merely sit behind something.
+
+One group, `dialog`, serves the whole family — the Dialog, the AlertDialog and
+the Drawer — for the reason `field` serves the whole control family: the three
+differ in how they arrive and in what may dismiss them, not in what they are made
+of. A padding or a heading has one place to change rather than three.
+
+| part        | what it is                                                                                                    |
+| ----------- | ------------------------------------------------------------------------------------------------------------- |
+| panel       | `dialog.width` wide, `dialog.padding` in, at `radius.large`, `dialog.inset` clear of the window on every side |
+| header      | the title and one sentence about it, at `dialog.headerGap`: one block                                         |
+| title       | `headline`, weight 600, in `dialog.title`; `title` stays for a full page                                      |
+| description | prose at `dialog.descriptionSize` in `dialog.description`                                                     |
+| footer      | the answers, from the end, at `dialog.footerGap`; stacked in reverse when narrow                              |
+| cross       | a ghost icon button in the corner, on a panel a person may dismiss                                            |
+| drawer      | the same panel arriving from an edge, `dialog.drawerSize` across                                              |
+
+The safe-area insets are read with `env()` rather than through a host variable,
+so the package stays platform-neutral: on a desktop browser every one resolves to
+0 and the panel is centred, and on a device with a notch and a home indicator it
+sits between them.
+
+The rise applies to a panel too, but a dialog is centred rather than anchored, so
+the 4px is composed into the centring transform — CSS has one `transform`, and a
+second class setting only `translateY` would replace the centring rather than add
+to it.
+
+### Drawers
+
+A drawer is that panel arriving from an edge, and it is not a dialog pinned to
+one. A panel that slides in from an edge promises that it can be sent back, and
+on a touch screen a person will try; a dialog cannot answer that gesture, so the
+system has no "sheet". The panel is laid out by a viewport rather than positioned
+by itself, which is exactly what leaves its `transform` free to carry the drag —
+a centred dialog has already spent that property.
+
+Two axes. **Which edge**: `top`, `bottom`, `start` and `end`, stated in writing
+direction, with the physical swipe derived from it so a drawer on the start edge
+is swiped away leftwards in a left-to-right document and rightwards in a
+right-to-left one. **Flush or inset**: flush meets the window, squares the two
+corners that touch it, and pads its own content clear of the safe area; inset
+floats at `dialog.drawerInset`, keeps all four corners, and takes the safe area
+as viewport padding instead. A flush drawer is part of the window; an inset one
+is an object resting over the page.
+
+A drawer crosses the window rather than rising 4px, so it takes `duration.slow`.
+The backdrop lifts with the gesture rather than only at the end: the page comes
+back as the drawer leaves, so a half-dismissed drawer reads as reversible.
+
+## Tooltips
+
+The one floating thing that is not the popup surface: `tooltip.background` is
+`label` and `tooltip.label` is `background`, under `shadow.medium` at
+`radius.small`. That inversion is deliberate. A popup is a place to act; a
+tooltip only names what is already under the pointer, and it has to read at a
+glance over whatever it covers without becoming another surface competing for
+attention. A tooltip reaching for `popup.background` would be naming the wrong
+thing to get the wrong colour.
+
+It is a hint about something else, so it takes the footnote step the rules give
+help text rather than the control step its trigger takes, and it wraps at
+`tooltip.maxWidth` rather than trailing off into an ellipsis a person cannot
+open. It never takes the pointer: one that landed under the cursor and accepted
+it would take the pointer off its own trigger and flicker itself closed and open
+again. It sits above every popup, because what it names may be inside one.
+
+A tooltip is visual only — it reaches neither touch nor a screen reader — so it
+is never a control's name. Every trigger states its own.
+
+## Disclosure
+
+Three layouts of one idea: a trigger, and the thing it shows. `Tabs` lays the
+choices side by side and swaps the panel under them; `Accordion` stacks them and
+opens one in place; `Collapsible` is a single one of those with no list around
+it. One group, `disclosure`, serves all three for the reason `field` serves the
+control family — what differs is the arrangement, not what either is made of, so
+the colour a closed row's label takes and the colour a tab you are not on takes
+cannot become two decisions.
+
+None of the three holds a value. A tab picks what is shown rather than what is
+stored, so it takes no name, answers to no `Field.Root` and has no invalid
+state; it borrows the well the controls sit in because the ladder puts it there,
+not because it is one of them.
+
+### The strip
+
+| part      | what it is                                                                       |
+| --------- | -------------------------------------------------------------------------------- |
+| track     | `disclosure.trackBackground` under `disclosure.trackWell`, inset by `trackInset` |
+| indicator | the one thing raised out of it: `disclosure.indicator` under `indicatorShadow`   |
+| tab       | the track's height less the inset on both sides, at the control type rule        |
+| panel     | what the strip swaps, `disclosure.panelGap` under it                             |
+
+The strip is the ladder read twice over — a well with one raised thing in it,
+the same pair a Switch takes — and it says the same thing: the track is where
+something sits, and the thing sitting in it is the one you can press. Nested
+radius applies: a 28px track at `radius.small` holds a 4px tab, a 32 or 36px one
+at `radius.medium` holds a 6px tab, and neither is a token of its own.
+
+The indicator is one element that moves rather than a fill on each tab, because
+the strip is one control and a pill sliding across it says so. It is drawn by
+`Tabs.List` rather than by a caller, the way a submenu's chevron is drawn by its
+row: a strip assembled without one is a segmented control with nothing
+segmented. A tab therefore carries no fill in any state — what changes when you
+take one is its colour, from `tabLabel` to `tabActiveLabel`, which is also where
+a hover lands.
+
+The size is stated once, on the strip. A tab's height, corner and share of the
+width all follow from the track's, so a strip that takes the width on offer says
+`stretch` and both facts move together — a track that stretched while its tabs
+did not would be a full-width groove with the choices huddled at its start.
+
+Arrow keys move without taking. A tab swaps a panel that may be expensive to
+build, and arrowing to the fourth tab should not build the second and third on
+the way; a surface whose panels are cheap says `activateOnFocus`.
+
+### The stack, and the reveal
+
+A row has no fill in any state: it is a line of a list rather than a control on
+a surface, so what marks it is the `separator` the rules give a list, and what
+moves when it opens is the chevron the part draws. One row is open at a time
+unless the stack says `multiple`, because an accordion exists to keep a long
+page short. A Collapsible has no list around it, so it takes neither the line
+nor the row: its trigger is whatever the surface already had there, and the
+panel is all the primitive owns.
+
+What a panel holds is prose, so it takes the prose step rather than the control
+step its trigger takes, and its padding rides on a **child** of the panel. That
+is not a preference: Base UI animates the panel's height from a size it measures
+with `scrollHeight`, which counts padding, so a padded panel is cropped by
+exactly its own padding under `border-box` and overshoots by it under
+`content-box`. A caller migrating a panel that carried its own padding moves it
+inwards.
+
+## Pressed
+
+A control that stays pressed, a set of them, and the bar that holds them. One
+group, `toggle`, covers all three for the reason `disclosure` covers three
+layouts of one idea: what a pressed control looks like and how far apart two of
+them stand cannot become three decisions in three files.
+
+It is **not** the `field` group, and a Toggle is not a Switch. A Switch stores a
+value in a form: it takes a name, answers to a `Field.Root`, can be invalid, and
+is read as a setting. A Toggle says an option is on _right now_ — bold, wrapped
+lines, this filter — so it has no name, no validity and no message under it.
+
+| state    | what it is                                                                 |
+| -------- | -------------------------------------------------------------------------- |
+| off      | a ghost Button: no fill, `toggle.label`, `toggle.hover` under the pointer  |
+| on       | the well rung: `toggle.pressedBackground` under `toggle.pressedWell`       |
+| on hover | the rung mixed 4% toward the ink, the mix a secondary Button already uses  |
+| focus    | 2px `toggle.ring`, composed onto the pressed edge rather than replacing it |
+| disabled | `toggle.disabledOpacity` on the whole control, and the native attribute    |
+
+**On is the well, not ink**, and that is this family's one real decision. The
+rules give a stored state ink, and a toggle does store one — but ink is what a
+control that _already sits in a well_ becomes when it is on. A Switch's off
+state occupies the well, so on has to leave it; a Checkbox's empty box is the
+same. A toggle rests on nothing at all, so the well is still free, and sinking
+into it is the plainest thing this system can say about a button that went down
+and stayed there. It also keeps a bar of eight from reading as eight primary
+buttons, which is what ink would have made of it.
+
+A toggle does not bob either. The motion rules give a press `translateY(1px)`
+and a dropped highlight, and that is a raised thing going down and coming back;
+this one goes down and stays, so what moves is the surface under it.
+
+The ladder is `control`'s — 28, 32, 36, plus the 24 a file viewer's strip of
+actions needs — rather than `Button`'s. A Button and a Toggle in one bar line up
+because both read the same scale, not because one reads the other's group.
+
+### The set, and the strip
+
+A `ToggleGroup` is **not** a `Tabs` strip, and the two cannot be folded
+together. A strip picks what a person _sees_: it is one control, so it is a
+sunken track with one thing raised out of it and one pill sliding between the
+choices. A set stores what is _on_: two of its members can be pressed at once,
+which no sliding pill can say, so it has no track and each member sinks on its
+own. Asked for one choice out of several it still draws no track, because the
+same set with `multiple` on has to look like itself.
+
+The size and the shape are stated once, on the set, the way a tab strip states
+them for its tabs. A set too wide for its row wraps; its members keep their
+width there, because a toggle neither grows nor shrinks.
+
+### The bar
+
+A `Toolbar` draws **nothing at all**: no fill, no shadow, no radius, and not
+even the line a table draws. It is a row of controls on whatever surface the
+product already had there, so a bar inside a panel is not a second panel.
+
+What it is for is the keyboard. A row of eight icon buttons is eight tab stops
+unless something says otherwise, and a person tabbing through a page should pass
+a bar rather than walk it: the bar is one stop, the arrow keys do the walking,
+and a control that cannot be used is stepped over rather than stopped on. That
+is the whole reason it is a part rather than a `div` with a gap.
+
+Two gaps say what belongs with what. `toggle.groupGap` is between the members of
+one set or cluster; `toggle.barGap` is between the clusters, and either side of
+the line between two. The line is `Separator`'s, turned ninety degrees from the
+bar, and the bar states that rather than the caller — a horizontal bar cannot
+then end up with a horizontal line across it.
+
+## Feedback
+
+What the system says back: what happened, and that it is still working. One
+group, `feedback`, covers both halves for the reason `field` covers a checkbox
+and a select trigger — what changes between them is what they are made of, not
+what they are for.
+
+### Messages
+
+An Alert and a Toast are one message on two rungs. An Alert stays on the page it
+is about, so it takes the card rung; a Toast arrives over that page, so it takes
+the floating one. Neither is on the modal rung: a message does not have to be
+answered, and nothing behind it recedes.
+
+| part        | what it is                                                             |
+| ----------- | ---------------------------------------------------------------------- |
+| mark        | `feedback.markSize`, in the tone's colour, drawn by the part           |
+| title       | what happened, at the control step, weight 600, in `feedback.title`    |
+| description | the sentence under it, at the footnote step, in `feedback.description` |
+| actions     | what answers it: Buttons, whose variants are the surface's choice      |
+| viewport    | a toast lands at the top, clear of the safe area, above every popup    |
+
+A tone is a **tint and a mark, never a fill**. There are four — neutral,
+success, warning and danger — and the tint is 8% of the tone mixed into the
+rung's own background, which is the mix a destructive menu row already uses. It
+is mixed in `feedback/surface.ts` rather than frozen into a token, because it is
+a mix _of a surface_ and the two surfaces are on different rungs.
+
+Neutral is the one tone with no colour of its own: `accent` is the obvious
+candidate and the rules reserve it for live state, so a neutral message takes
+`secondaryLabel` for its mark and lets the words do the work. It still takes a
+tint, toward `label`, because an Alert is the one part of this family that
+shares its rung with what it sits on — a card inside a card is the same fill
+twice, and in the light palette the card rung and the page are one white.
+
+The mark belongs to the tone rather than to the caller, the way an accordion's
+chevron does: the point of a tone is that a person knows what kind of message
+this is before reading it, and a glyph a caller chose can put a tick on a
+failure. The warning is the one that is not a circle, because a triangle is what
+separates it from an error for a person who does not see the two colours apart.
+
+How urgently a message is announced follows from its tone as well: `alert` for a
+failure or a warning, which interrupts, and `status` for the rest, which waits
+its turn. A surface that had to choose would choose `alert` every time, which is
+the version that teaches people to ignore it.
+
+### Waiting
+
+| part     | what it is                                                                    |
+| -------- | ----------------------------------------------------------------------------- |
+| track    | `feedback.trackBackground` under `feedback.trackWell`, `trackHeight` tall     |
+| bar      | `feedback.indicator` — `accent`, because the rules name the running indicator |
+| no value | the same track with a band crossing it, not a bar at zero                     |
+| skeleton | `feedback.skeleton`, a gray, because it has no role yet                       |
+| spinner  | `currentColor`, so it belongs to whatever holds it                            |
+
+A bar that reports an outcome rather than progress takes that outcome's tone,
+and one that measures something rather than progressing through it — a quota, a
+share of storage — takes `neutral` and gives the accent back. Ink is never the
+answer here: ink is for a value that is stored, and a bar in motion is the
+opposite.
+
+A skeleton breathes rather than sweeping, because a page of sweeping blocks is a
+page of movement, and it stops where a person has asked for less of it — it
+reports nothing its own shape does not already say, which is also why it is
+hidden from a screen reader. A spinner keeps turning there, because it is the
+only thing saying the work has not stopped.
+
+## Tables
+
+Rows of records, and the way to the rows that did not fit. One group, `table`,
+covers both for the reason `dialog` covers three modals: a pager exists because
+a table did not fit, the two sit on the same rung and state the same size, and
+how dense a list of records is has one place to change rather than two.
+
+A table is the one part of this system with **no surface of its own**: no
+background, no shadow, no radius. It is rows on whatever the surface around it
+already was — a page, a card, a dialog — so the card that holds one keeps owning
+its edges, and a table inside a card is not a card inside a card. What it draws
+is the one edge the rules give a list: `separator`, between one row and the next.
+
+**A column is stated once.** How wide it is, which way it aligns, whether it
+holds figures, whether the table can be ordered by it, what a totals row holds
+under it — these are facts about a column, and a column written twice (a name in
+the head, a cell in every row) is a fact that can drift. Everything below
+follows from stating them in one place; a table that is not a list of records —
+a two-column list of facts, a Markdown document's markup — assembles the
+elements instead and gets none of it.
+
+| part     | what it is                                                                    |
+| -------- | ----------------------------------------------------------------------------- |
+| row      | a `table.rowHeight*` row on the control ladder; the height is a floor         |
+| line     | `table.line` under a row, and none under the last one                         |
+| head     | a column's name, at the footnote step in `table.head`: about the column       |
+| cell     | the value, at the control step in `table.value`, on one line                  |
+| numeric  | tabular digits, aligned to the end of the column                              |
+| sorted   | the one column at `table.headActive`, with the arrow the part draws           |
+| hover    | `table.hover`, and only where pressing a row does something                   |
+| selected | `table.selected`, under the tick that is what actually says so                |
+| stayed   | a head over its own scroll box: `table.headStickyBackground`, the region rung |
+| stacked  | too narrow for columns: label and value per line, `table.head` on the label   |
+| nothing  | `table.emptyHeight` of `table.empty`, across every column, head still up      |
+| caption  | what the table is, under it, at the footnote step in `table.caption`          |
+
+The head takes the line too. The rule against a line under a header is about a
+heading over a surface; a row of column names is the row before the first
+record, and the line under it is the divider to the next row that `separator` is
+for. The last record draws none, because there is no next row there.
+
+The line is the `inset 0 -1px 0` every other row in this system draws, and the
+table is laid out with `border-collapse: separate` so that it can be. Under
+`collapse` a row's box-shadow is not painted, a sticky head's border does not
+travel with it, and a row could not carry a focus ring; under `separate` all
+three work and a row keeps **one** box-shadow in which its line and its ring
+compose, which is the rule every other control here already follows.
+
+The two fills are the palette's own `hoverFill` and `selectedFill` rather than a
+mix of the surface, which is the opposite of what a popup row does. Those two
+were tuned against the page and card rungs, and a table row is exactly the row
+this table names them for; a popup derives its own only because on the floating
+rung they collapse into the surface.
+
+The pointer is answered **only where pressing a row does something**. A table of
+facts is read, not operated, and a row that lights up and does nothing when
+pressed is a promise the table cannot keep. A row that can be pressed takes the
+keyboard with it — Enter and Space press it, and the ring says where the
+keyboard is. Selection is a **tick** first: `aria-selected` belongs to a row in
+a grid, so a table that lets a person pick rows puts a checkbox in one, which is
+both what they press and what announces it, and the fill is how they find those
+rows again down the page. The box over that column is derived, never passed:
+none, some — which is `mixed` — or all.
+
+A column's name is a control only where the table can be ordered by it, and then
+it is a real button with the ring every control here takes. Which way it is
+sorted is on the cell as `aria-sort`, so what a screen reader is told and what
+the arrow shows are one fact, and **one column wears the arrow at a time**. The
+table does not reorder the records: a server sorts, a comparator breaks ties, a
+page is one slice of many, so the control is the primitive's and the data is the
+surface's.
+
+A head stays only where the table owns a box to stay in — a height and a sticky
+head are one decision, because a head that scrolls out of its own box is not
+something a surface would ask for. A head that stays is no longer a row: it is a
+band over the rows moving under it, so it takes the rung the ladder gives a band
+over the page. That is not decoration; a transparent one has the records painted
+through the column names.
+
+### Too narrow for columns
+
+A table narrower than its columns need is not a table with a scrollbar: it is a
+list of records, each one a stack of label-and-value lines, with the label
+taking the head's colour and step. It is the head's own words rather than a
+second copy of them — which is reachable only because the columns were stated.
+
+The question is about **the table's own width**, not the window's. A settings
+table in a 360px side panel on a 27-inch screen is narrow, and a breakpoint
+calls it wide; the panel is the thing that got small. So it is a container
+query, and the width at which it stacks belongs to the system rather than to a
+caller: a caller choosing it is a caller deciding how wide a record may be.
+
+### The pager
+
+The window is one width from the first page to the last, so the buttons do not
+move out from under the pointer, and a gap is drawn only where it stands for
+more than one page — a gap hiding a single page is wider than the page it hides
+and costs the press that page would have taken. Against either end the gap that
+is not needed is spent listing more pages instead.
+
+The page a person is on says so twice: a secondary Button among ghosts, and
+`aria-current`, because the fill reaches only the people who can see it. The
+steps either way are disabled at the ends rather than removed, since a pager
+whose buttons come and go moves the ones beside them. Nine thousand pages are
+not a list, so a pager that long says where you are instead — `table.pagerHint`
+for the count, the label colour for the number — and lets a person type it.
+
+## Cards, badges and lines
+
+Three answers to "what is an edge?". A card's is a shadow, a badge has none and
+is a film of ink instead, and a separator _is_ the one line this system allows.
+
+### Card
+
+The card rung made a component: `card.background` under `card.shadow` at
+`radius.large`, and no border. Its parts are a Dialog's — a header, the body a
+caller writes, and the answers — because what separates a panel that owns the
+window from a block that owns a region of a page is the rung and the heading
+step, not what either is made of. It keeps its own group rather than reading
+`dialog`, for the reason a menu does not read `field`: two rungs, two names.
+
+| part        | what it is                                                                     |
+| ----------- | ------------------------------------------------------------------------------ |
+| card        | `card.padding` in, children at `card.gap`, and no edge but the shadow          |
+| header      | the title and one sentence about it, at `card.headerGap`: one block            |
+| title       | `headline`, weight 600 — a card does not own the window, and `title` is a page |
+| description | prose at `card.descriptionSize` in `card.description`                          |
+| footer      | the answers, from the end at `card.footerGap`; reversed when narrow            |
+| interactive | the pointer's answer, `card.hover`, and nothing else                           |
+
+A card does not nest. Two of them one inside the other are the same fill twice
+in the light palette, where the card rung and the page are one white; a block
+inside a card is the region rung, which a surface lays out rather than asks for.
+It renders no control either: `interactive` marks the card and the caller brings
+the button, because what a press does is a product decision.
+
+The ladder names the region rung for "hover on a card", and measured in the dark
+palette that is the card rung's own value — `elevatedBackground` and
+`secondaryBackground` are both `hsl(0 0% 8.6%)`. So `card.hover` mixes the rung
+toward `label` at 4%, the derivation `popup.highlight` and a secondary Button's
+hover already use, which steps away from the surface in both palettes at once.
+
+### Badge
+
+A standing fact about the thing beside it, and the one part of this system on
+**no rung**: it sits on a page, a card, a menu row or a modal panel, so it can
+take no background from the ladder. Its fill is a _film_ — the tone at 12% of
+`label` or 22% of a tone over whatever is underneath, the form a destructive
+ghost Button's hover already takes — so one declaration reads on every rung and
+in both palettes. Those two started at 8 and 14, which was a film too thin to
+tell apart: the closest pair of tones measured 0.019 apart in oklab in the light
+palette and 0.026 in the dark one, and is now 0.030 and 0.035.
+
+**The word carries the tone, and it is the tone pulled halfway to `label`.**
+The raw tone cannot: `warning` is 2.8:1 on a near-white surface, a colour tuned
+for a 16px mark where the bar is 3:1, used as 11px text where it is 4.5:1. But
+the raw tone is not the only way to carry a hue. At half the distance to the
+ink, a tone keeps its hue and gains the ink's contrast — the worst of the four
+measures 5.2:1 on its own chip, on every rung, in both palettes.
+
+The film alone could not do this. A 20px chip's tint is a wash a few percent off
+its surface; its word is the mark a person looks at. The four words land 0.097
+apart in oklab at the closest in the light palette and 0.048 in the dark one,
+against 0.030 and 0.035 for the films under them. The dark palette is where it
+earns its place: there `accent` is a pale peach and `warning` an amber, twenty-six
+degrees apart, so their films are two brown washes that no percentage separates,
+and their words are a peach and a gold at four times the chroma.
+
+Half is not a round number chosen for tidiness. At 60% of the tone the worst word
+is 4.2:1 — under the bar on the floating rung, where the chip is already a step
+darker — and at 40% the hues wash out.
+
+`badge.label` is the neutral word and the ink the rest are pulled toward: `label`,
+not `secondaryLabel`. A badge's word sits on the badge's own film rather than on
+the page, and there `secondaryLabel` was 3.9:1 on a danger chip and 3.4:1 inside
+a popup — under the bar before the films were strengthened, not because of it.
+
+It is metadata, so it takes the caption step the rules give a row's trailing
+metadata — which is how it stays quieter than the thing it is attached to, by
+size rather than by a colour that cannot carry its own words — at `radius.mini`
+and `badge.height`, with figures at one width. It neither grows nor shrinks: a
+surface that must cap a long one caps the badge, because a chip that shrank
+would be clipped by a tight row rather than by a decision.
+
+Five tones: the four a message reports, and `running`, which `Progress` adds for
+the same reason — a machine being reached is live state, which is what `accent`
+is for. There is no hover, no focus ring and no pressed state. A chip that
+answered a pointer would be a Button, and the deleted implementation's filled
+`default` variant — ink, which the rules give a stored value — invited exactly
+that press.
+
+### Separator
+
+`separator`, 1px, between the rows of a list or a table. It has no token group:
+every other component derives its edge from tokens that say which rung it is on,
+and this one _is_ the edge, so a `separator.color` pointing at the semantic
+token would be a second name for one fact.
+
+It is announced. Base UI renders `role="separator"` with the orientation, and
+there is no `decorative` escape hatch: a line here is never decoration, because
+the one place it is allowed is structural. Where it sits in a stack is the
+surface's layout, so it carries no margin of its own — a popup's divider has one
+only because it bleeds through an inset the caller cannot see. A vertical line
+stretches to its row rather than taking a percentage of a height the row has
+not got.
+
+## Faces and keys
+
+Two parts that stand for something outside the interface — a person, and a key
+on the keyboard — and neither is a control. They take the gray ramp, which is
+what the rules reserve it for: a thing with no role.
+
+### Avatar
+
+The second part on no rung, and the one that is **not a film**. A badge can be a
+tint over whatever holds it because a word reads through one; what an avatar
+stands in for is a photograph, and a translucent face would show a row's hover
+through it. So the fallback is `avatar.fallbackBackground`, a gray, the same
+reading `Skeleton` already takes.
+
+| part    | what it is                                                             |
+| ------- | ---------------------------------------------------------------------- |
+| box     | one of five rungs — 16, 20, 24, 32, 64 — a width, a height, and a crop |
+| picture | fills the box and is cropped to it; mounted only once it has loaded    |
+| letters | the rung's own step, in `avatar.fallbackLabel`                         |
+| mark    | an `avatar.glyph*` box, for a name there are no letters to make        |
+| circle  | a person: `radius.full` on `corner.round`                              |
+| tile    | a thing: `avatar.tileRadius*`, the radius-by-size table read per rung  |
+
+**The rung picks the letters.** A box and a type step stated separately are two
+facts that can disagree, and they did: the deleted implementation had one size
+and twenty call sites restating both. Two initials want 20px or more; 16 is a
+face where an icon would otherwise be.
+
+A circle is a person and a tile is a thing. A circle around a logo is a crop,
+and the mark inside one was drawn square. The letters take `label` rather than
+`secondaryLabel` — unlike a badge's word, which is _about_ the thing beside it,
+initials **are** the person, and measured on this gray the secondary label is
+3.5:1 in the light palette, under the 4.5:1 letters this small need.
+
+An avatar is a ceiling as well as a floor. A flex item's automatic minimum size
+is its content's, so a 16px circle holding two initials lays out 20px wide and
+stops being a circle; the box and the fallback both give that up, and the
+letters are clipped to the width instead.
+
+An identity colour — a hue derived from a name, so one workspace is one colour
+on every screen — is the surface's and arrives as a `style`. Which hue belongs
+to which name is a product fact, not a token.
+
+### Kbd
+
+`kbd.background`, a gray, at a badge's height and corner: a cap stands for a
+piece of hardware, so `accent` would claim it is live, ink would claim it is
+stored and a tone would claim it reported something. It is never a control —
+no hover, no focus ring, no pressed state, and it takes neither the pointer nor
+a selection. A chord is a `<kbd>` around `<kbd>`s at `kbd.gap`, with nothing
+between them: a `+` is how a chord is written in prose, and this is not prose.
+One cap is at least as wide as it is tall, so `K` and `Shift` do not read as
+noise side by side. The face is the UI font, because `<kbd>` defaults to
+monospace and `⌘` there is a different glyph from the identical character in the
+label beside it.
+
+A menu row's shortcut is **not** this: the rules give that slot plain trailing
+metadata in `popup.hint`, because a column of chips down a menu's right edge
+turns a quiet list into a keyboard diagram. A cap is for where the keys are the
+subject.
+
+A cap on a tooltip inverts with it. `kbdOnInvertedTheme` re-declares the two
+things a cap is made of — the film and the letters — and `Tooltip.Content`
+declares it on its own popup, so every cap under it inherits. A component token
+group is how a surface tells what is inside it what it is standing on; StyleX
+has no descendant selector, and unlike one this also reaches a cap a caller
+wrapped in something of their own.
+
+## Corners
+
+- `corner.shape` (squircle) on every radius except `radius.full`. Round fallback
+  outside Chromium.
+- `radius.full` is a pill or a circle, and takes `corner.round`. A squircle at
+  that radius is a superellipse, not a stadium: it turns a switch track into a
+  rounded rectangle and a radio into a squircle.
+- Radius by size: `mini` 5 for 16px things, `small` 8 for 28px controls and
+  tooltips, `medium` 10 for 32 and 36px controls, `large` 14 for surfaces.
+- Nested radius is outer minus inset. A 14px popup with 4px inset holds 10px
+  items. Never the child's own token.
+- Icon-only buttons are square at the size's height, and hold a 16px glyph:
+  the button draws that box, because a glyph here fills whatever holds it.
+
+## Type
+
+- Controls at 13 (`subheadline`), weight 500, `text.controlTracking`.
+- Prose at 14 (`body`), weight 400. Field labels and help at 12 (`footnote`).
+- Dialog title is `headline`; `title` is for a full page.
+- Sizes: 28 / 32 / 36. Default 32. 36 only for empty states and onboarding.
+
+## Motion
+
+- Press: `translateY(1px)` and drop `shadow.inkEdge`, `duration.fast`.
+- Rise: popups from 4px below at opacity 0, `duration.regular`.
+- Colors and fills cross-fade at `duration.fast`. One easing: `ease.standard`.
diff --git a/packages/ui/src/tokens/colors.stylex.ts b/packages/ui/src/tokens/colors.stylex.ts
new file mode 100644
index 000000000..22aacf8a0
--- /dev/null
+++ b/packages/ui/src/tokens/colors.stylex.ts
@@ -0,0 +1,139 @@
+import * as stylex from '@stylexjs/stylex';
+
+const DARK = '@media (prefers-color-scheme: dark)';
+
+export const colors = stylex.defineVars({
+  background: { default: 'hsl(0 0% 100%)', [DARK]: 'hsl(0 0% 6.3%)' },
+  elevatedBackground: { default: 'hsl(0 0% 100%)', [DARK]: 'hsl(0 0% 8.6%)' },
+  raisedBackground: { default: 'hsl(216 17% 94.3%)', [DARK]: 'hsl(0 0% 13.7%)' },
+  secondaryBackground: { default: 'hsl(220 23% 97.5%)', [DARK]: 'hsl(0 0% 8.6%)' },
+  wellBackground: { default: 'hsl(216 12% 92%)', [DARK]: 'hsl(0 0% 11%)' },
+  label: { default: 'hsl(225 7% 11%)', [DARK]: 'hsl(0 0% 100%)' },
+  secondaryLabel: { default: 'hsl(220 9% 46%)', [DARK]: 'hsl(0 0% 62.7%)' },
+  tertiaryLabel: { default: 'hsl(220 8% 62%)', [DARK]: 'hsl(0 0% 45%)' },
+  separator: { default: 'hsl(223 16% 91.6%)', [DARK]: 'hsl(0 0% 15.7%)' },
+  hoverFill: { default: 'hsl(225 15% 94.9%)', [DARK]: 'hsl(0 0% 15.7%)' },
+  selectedFill: { default: 'hsl(223 18% 92.4%)', [DARK]: 'hsl(0 0% 13.7%)' },
+  accent: { default: 'hsl(220 82% 65%)', [DARK]: 'hsl(27 100% 80%)' },
+  onAccent: { default: 'hsl(0 0% 100%)', [DARK]: 'hsl(0 0% 0%)' },
+  destructive: { default: 'hsl(356 72% 47%)', [DARK]: 'hsl(0 100% 75%)' },
+  onDestructive: { default: 'hsl(0 0% 100%)', [DARK]: 'hsl(0 0% 0%)' },
+  // The two states a message can report that `label` and `destructive` cannot.
+  // They name an outcome rather than an action — a finished sync, a quota about
+  // to run out — so they are never a fill a person presses, only a mark beside
+  // what it is about and the tint under it.
+  success: { default: 'hsl(151 55% 36%)', [DARK]: 'hsl(151 60% 52%)' },
+  warning: { default: 'hsl(32 90% 48%)', [DARK]: 'hsl(43 96% 56%)' },
+  overlay: { default: 'hsl(225 7% 11% / 0.5)', [DARK]: 'hsl(0 0% 0% / 0.6)' },
+  gray: { default: 'hsl(220 8% 62%)', [DARK]: 'hsl(0 0% 42%)' },
+  gray2: { default: 'hsl(220 9% 70%)', [DARK]: 'hsl(0 0% 34%)' },
+  gray3: { default: 'hsl(220 11% 78%)', [DARK]: 'hsl(0 0% 27%)' },
+  gray4: { default: 'hsl(222 13% 85%)', [DARK]: 'hsl(0 0% 22%)' },
+  gray5: { default: 'hsl(223 16% 91.6%)', [DARK]: 'hsl(0 0% 18%)' },
+  gray6: { default: 'hsl(220 23% 97.5%)', [DARK]: 'hsl(0 0% 13.7%)' },
+});
+
+export const shadow = stylex.defineVars({
+  inset: {
+    default: 'inset 0 1px 2px hsl(225 10% 11% / 0.07)',
+    [DARK]: 'inset 0 1px 2px hsl(0 0% 0% / 0.7)',
+  },
+  raised: {
+    default: '0 1px 2px hsl(225 10% 11% / 0.12), 0 0 0 0.5px hsl(225 10% 11% / 0.05)',
+    [DARK]: 'inset 0 1px 0 hsl(0 0% 100% / 0.07), 0 1px 2px hsl(0 0% 0% / 0.5)',
+  },
+  inkEdge: {
+    default: 'inset 0 1px 0 hsl(0 0% 100% / 0.16)',
+    [DARK]: 'inset 0 1px 0 hsl(0 0% 100% / 0.55)',
+  },
+  card: {
+    default: '0 1px 2px hsl(225 10% 11% / 0.05), 0 10px 30px hsl(225 10% 11% / 0.06)',
+    [DARK]: 'inset 0 1px 0 hsl(0 0% 100% / 0.04), 0 10px 30px hsl(0 0% 0% / 0.45)',
+  },
+  medium: {
+    default: '0 2px 6px hsl(225 10% 11% / 0.2)',
+    [DARK]: '0 2px 6px hsl(0 0% 0% / 0.5)',
+  },
+  popover: {
+    default: '0 2px 6px hsl(225 10% 11% / 0.06), 0 18px 50px hsl(225 10% 11% / 0.14)',
+    [DARK]: 'inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 18px 50px hsl(0 0% 0% / 0.7)',
+  },
+  large: {
+    default: '0 24px 64px hsl(225 10% 11% / 0.24)',
+    [DARK]: 'inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 24px 64px hsl(0 0% 0% / 0.8)',
+  },
+});
+
+export const darkTheme = stylex.createTheme(colors, {
+  background: 'hsl(0 0% 6.3%)',
+  elevatedBackground: 'hsl(0 0% 8.6%)',
+  raisedBackground: 'hsl(0 0% 13.7%)',
+  secondaryBackground: 'hsl(0 0% 8.6%)',
+  wellBackground: 'hsl(0 0% 11%)',
+  label: 'hsl(0 0% 100%)',
+  secondaryLabel: 'hsl(0 0% 62.7%)',
+  tertiaryLabel: 'hsl(0 0% 45%)',
+  separator: 'hsl(0 0% 15.7%)',
+  hoverFill: 'hsl(0 0% 15.7%)',
+  selectedFill: 'hsl(0 0% 13.7%)',
+  accent: 'hsl(27 100% 80%)',
+  onAccent: 'hsl(0 0% 0%)',
+  destructive: 'hsl(0 100% 75%)',
+  onDestructive: 'hsl(0 0% 0%)',
+  success: 'hsl(151 60% 52%)',
+  warning: 'hsl(43 96% 56%)',
+  overlay: 'hsl(0 0% 0% / 0.6)',
+  gray: 'hsl(0 0% 42%)',
+  gray2: 'hsl(0 0% 34%)',
+  gray3: 'hsl(0 0% 27%)',
+  gray4: 'hsl(0 0% 22%)',
+  gray5: 'hsl(0 0% 18%)',
+  gray6: 'hsl(0 0% 13.7%)',
+});
+
+export const lightTheme = stylex.createTheme(colors, {
+  background: 'hsl(0 0% 100%)',
+  elevatedBackground: 'hsl(0 0% 100%)',
+  raisedBackground: 'hsl(216 17% 94.3%)',
+  secondaryBackground: 'hsl(220 23% 97.5%)',
+  wellBackground: 'hsl(216 12% 92%)',
+  label: 'hsl(225 7% 11%)',
+  secondaryLabel: 'hsl(220 9% 46%)',
+  tertiaryLabel: 'hsl(220 8% 62%)',
+  separator: 'hsl(223 16% 91.6%)',
+  hoverFill: 'hsl(225 15% 94.9%)',
+  selectedFill: 'hsl(223 18% 92.4%)',
+  accent: 'hsl(220 82% 65%)',
+  onAccent: 'hsl(0 0% 100%)',
+  destructive: 'hsl(356 72% 47%)',
+  onDestructive: 'hsl(0 0% 100%)',
+  success: 'hsl(151 55% 36%)',
+  warning: 'hsl(32 90% 48%)',
+  overlay: 'hsl(225 7% 11% / 0.5)',
+  gray: 'hsl(220 8% 62%)',
+  gray2: 'hsl(220 9% 70%)',
+  gray3: 'hsl(220 11% 78%)',
+  gray4: 'hsl(222 13% 85%)',
+  gray5: 'hsl(223 16% 91.6%)',
+  gray6: 'hsl(220 23% 97.5%)',
+});
+
+export const darkShadowTheme = stylex.createTheme(shadow, {
+  inset: 'inset 0 1px 2px hsl(0 0% 0% / 0.7)',
+  raised: 'inset 0 1px 0 hsl(0 0% 100% / 0.07), 0 1px 2px hsl(0 0% 0% / 0.5)',
+  inkEdge: 'inset 0 1px 0 hsl(0 0% 100% / 0.55)',
+  card: 'inset 0 1px 0 hsl(0 0% 100% / 0.04), 0 10px 30px hsl(0 0% 0% / 0.45)',
+  medium: '0 2px 6px hsl(0 0% 0% / 0.5)',
+  popover: 'inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 18px 50px hsl(0 0% 0% / 0.7)',
+  large: 'inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 24px 64px hsl(0 0% 0% / 0.8)',
+});
+
+export const lightShadowTheme = stylex.createTheme(shadow, {
+  inset: 'inset 0 1px 2px hsl(225 10% 11% / 0.07)',
+  raised: '0 1px 2px hsl(225 10% 11% / 0.12), 0 0 0 0.5px hsl(225 10% 11% / 0.05)',
+  inkEdge: 'inset 0 1px 0 hsl(0 0% 100% / 0.16)',
+  card: '0 1px 2px hsl(225 10% 11% / 0.05), 0 10px 30px hsl(225 10% 11% / 0.06)',
+  medium: '0 2px 6px hsl(225 10% 11% / 0.2)',
+  popover: '0 2px 6px hsl(225 10% 11% / 0.06), 0 18px 50px hsl(225 10% 11% / 0.14)',
+  large: '0 24px 64px hsl(225 10% 11% / 0.24)',
+});
diff --git a/packages/ui/src/tokens/scales.stylex.ts b/packages/ui/src/tokens/scales.stylex.ts
new file mode 100644
index 000000000..8c028115a
--- /dev/null
+++ b/packages/ui/src/tokens/scales.stylex.ts
@@ -0,0 +1,70 @@
+import * as stylex from '@stylexjs/stylex';
+
+export const space = stylex.defineVars({
+  1: '4px',
+  1.5: '6px',
+  2: '8px',
+  3: '12px',
+  4: '16px',
+  6: '24px',
+  8: '32px',
+});
+
+export const radius = stylex.defineVars({
+  mini: '5px',
+  small: '8px',
+  medium: '10px',
+  large: '14px',
+  full: '9999px',
+});
+
+export const corner = stylex.defineConsts({
+  shape: 'squircle',
+  // `radius.full` means a pill or a circle, and a squircle at that radius is a
+  // superellipse instead: a 28x16 track reads as a rounded rectangle and a 16px
+  // box as a squircle rather than a circle. Anything on `radius.full` takes this.
+  round: 'round',
+});
+
+export const control = stylex.defineVars({
+  small: '28px',
+  medium: '32px',
+  large: '36px',
+});
+
+export const text = stylex.defineVars({
+  captionSize: '11px',
+  captionLeading: '16px',
+  footnoteSize: '12px',
+  footnoteLeading: '16px',
+  subheadlineSize: '13px',
+  subheadlineLeading: '18px',
+  bodySize: '14px',
+  bodyLeading: '20px',
+  headlineSize: '16px',
+  headlineLeading: '24px',
+  titleSize: '18px',
+  titleLeading: '24px',
+  controlTracking: '-0.01em',
+});
+
+export const duration = stylex.defineVars({
+  fast: '120ms',
+  regular: '180ms',
+  // A drawer crosses the window; a popup rises 4px. The same duration cannot
+  // serve both — 180ms over 600px reads as a snap rather than a slide — so the
+  // distance a thing travels picks its step.
+  slow: '320ms',
+});
+
+export const ease = stylex.defineConsts({
+  standard: 'cubic-bezier(0.2, 0, 0, 1)',
+});
+
+export const z = stylex.defineConsts({
+  dialogBackdrop: '70',
+  dialog: '80',
+  popover: '80',
+  tooltip: '90',
+  toast: '100',
+});
diff --git a/packages/ui/src/tooltip/chip.ts b/packages/ui/src/tooltip/chip.ts
new file mode 100644
index 000000000..dea304d82
--- /dev/null
+++ b/packages/ui/src/tooltip/chip.ts
@@ -0,0 +1,68 @@
+import * as stylex from '@stylexjs/stylex';
+import { corner, duration, ease, text, z } from '../tokens/scales.stylex';
+import { tooltip } from './tooltip.tokens.stylex';
+
+/**
+ * The tooltip's appearance, in a file of its own for the reason
+ * `popup/surface.ts` is: the board composes the very rules the component
+ * applies rather than copying them, so a stand-in cannot report a chip this
+ * package no longer draws.
+ */
+export const chip = stylex.create({
+  /** The positioner carries no appearance; the chip inside it does. */
+  positioner: { outlineStyle: 'none' },
+  /**
+   * The chip. It is the one floating thing that inverts rather than rising off
+   * the page: the ladder puts a tooltip at `label` with `shadow.medium`, so
+   * what a person reads is the page's own text colour carrying the page's own
+   * background as ink — the same two colours a primary button and a checked box
+   * take, in the same order.
+   */
+  popup: {
+    boxSizing: 'border-box',
+    maxWidth: tooltip.maxWidth,
+    paddingBlock: tooltip.paddingY,
+    paddingInline: tooltip.paddingX,
+    backgroundColor: tooltip.background,
+    color: tooltip.label,
+    boxShadow: tooltip.shadow,
+    borderRadius: tooltip.radius,
+    cornerShape: corner.shape,
+    fontFamily: 'inherit',
+    fontSize: tooltip.text,
+    lineHeight: tooltip.leading,
+    fontWeight: 500,
+    letterSpacing: text.controlTracking,
+    // A tooltip names what is under the pointer; it is never itself the target.
+    // Without this, one that lands under the cursor takes the pointer off its
+    // own trigger and flickers itself closed and open again.
+    pointerEvents: 'none',
+    // A long label wraps at `maxWidth` rather than being cut off at an ellipsis
+    // a person has no way to open: a tooltip is already the expansion.
+    overflowWrap: 'break-word',
+    opacity: 1,
+    transform: 'translateY(0)',
+    transitionProperty: 'opacity, transform',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+    // Above every popup: a tooltip can name a control that is itself inside one.
+    zIndex: z.tooltip,
+  },
+  /**
+   * Both ends of the rise, measured against the anchor rather than the page,
+   * for the reason a menu's are: a tooltip flips to stay on screen, so it
+   * starts one step further from what it names on whichever side it landed.
+   */
+  hiddenBelow: { opacity: 0, transform: `translateY(${tooltip.rise})` },
+  hiddenAbove: { opacity: 0, transform: `translateY(calc(-1 * ${tooltip.rise}))` },
+  hiddenAfter: { opacity: 0, transform: `translateX(${tooltip.rise})` },
+  hiddenBefore: { opacity: 0, transform: `translateX(calc(-1 * ${tooltip.rise}))` },
+});
+
+/** The hidden end of the rise for the side a tooltip actually landed on. */
+export function hiddenChipForSide(side: string | undefined) {
+  if (side === 'top') return chip.hiddenAbove;
+  if (side === 'right' || side === 'inline-end') return chip.hiddenAfter;
+  if (side === 'left' || side === 'inline-start') return chip.hiddenBefore;
+  return chip.hiddenBelow;
+}
diff --git a/packages/ui/src/tooltip/tooltip.tokens.stylex.ts b/packages/ui/src/tooltip/tooltip.tokens.stylex.ts
new file mode 100644
index 000000000..05643c69b
--- /dev/null
+++ b/packages/ui/src/tooltip/tooltip.tokens.stylex.ts
@@ -0,0 +1,48 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, shadow } from '../tokens/colors.stylex';
+import { radius, space, text } from '../tokens/scales.stylex';
+
+/**
+ * The one floating thing that is not the popup surface.
+ *
+ * The elevation ladder puts a menu, a popover and a list on the floating rung —
+ * the raised background under the popover shadow — and then names the tooltip
+ * separately: `label` with `shadow.medium`. That is a deliberate inversion. A
+ * popup is a place you act; a tooltip only names what is already under the
+ * pointer, and it has to read at a glance over whatever it covers without
+ * becoming another surface competing for attention. Inverting it says "this is
+ * not part of the page" in one step, in both palettes, which is why it reads
+ * `tooltip` rather than `popup`: a tooltip reaching for `popup.background`
+ * would be naming the wrong thing to get the wrong colour.
+ */
+export const tooltip = stylex.defineVars({
+  background: colors.label,
+  // The ink on that fill: the page background, the same pair a primary button
+  // and a checked box take. A stored-state fill and an inverted chip are the
+  // same two colours in the same order.
+  label: colors.background,
+  shadow: shadow.medium,
+  // The corner rule gives 8 to 28px controls and to tooltips by name.
+  radius: radius.small,
+  paddingX: space[2],
+  paddingY: space[1],
+  // A tooltip is a hint about something else, so it takes the footnote step the
+  // rules give help text rather than the control step its trigger takes.
+  text: text.footnoteSize,
+  leading: text.footnoteLeading,
+  // Past this it stops being a label and starts being prose, which belongs in
+  // the surface rather than over it.
+  maxWidth: '260px',
+  rise: '4px',
+});
+
+/**
+ * Re-declares the colour-valued tokens on the element carrying a forced
+ * palette; see `button.tokens.stylex.ts` for why a group declared only at the
+ * document root keeps the root palette inside a themed subtree.
+ */
+export const tooltipPaletteTheme = stylex.createTheme(tooltip, {
+  background: colors.label,
+  label: colors.background,
+  shadow: shadow.medium,
+});
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
new file mode 100644
index 000000000..d69fc6c1f
--- /dev/null
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -0,0 +1,115 @@
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { kbdOnInvertedTheme } from '../kbd/kbd.tokens.stylex';
+import { usePopupContainer, type PopupContainer } from '../popup/portal-container';
+import { useForcedThemeClassNames } from '../theme/theme';
+import { chip, hiddenChipForSide } from './chip';
+
+/** The gap between a tooltip and what it names; the rules' rise distance. */
+const POPUP_GAP = 4;
+
+type PositionerBaseProps = ComponentProps<typeof BaseTooltip.Positioner>;
+type TriggerBaseProps = ComponentProps<typeof BaseTooltip.Trigger>;
+
+export interface TooltipContentProps extends Omit<
+  PositionerBaseProps,
+  'className' | 'children' | 'render'
+> {
+  children?: ReactNode;
+  /** Where the tooltip mounts. Defaults to the nearest `PopupContainerProvider`. */
+  container?: PopupContainer;
+  className?: string;
+}
+
+/**
+ * What the tooltip names. It is Base UI's trigger unchanged: a tooltip is about
+ * something the surface already had there, so a caller wraps it with
+ * `render={<Button …/>}` rather than being handed a second control.
+ */
+export type TooltipTriggerProps = TriggerBaseProps;
+
+/**
+ * The tooltip, assembled. Base UI splits it into a portal, a positioner and the
+ * popup; every caller writes the same three, so this part writes them once and
+ * takes the positioning props on the outside, the way every other floating part
+ * in this package does.
+ */
+export const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
+  function TooltipContent(
+    { className, children, container, sideOffset = POPUP_GAP, ...rest },
+    ref
+  ) {
+    const inheritedContainer = usePopupContainer();
+    // A portalled popup leaves the subtree whose palette it should be using, so
+    // the classes that declare that palette travel with it and land on the
+    // positioner. A tooltip inverts, so getting this wrong is the one case that
+    // is unreadable rather than merely wrong: light ink on a light chip.
+    const palette = useForcedThemeClassNames();
+    const mountPoint = container ?? inheritedContainer;
+    // See `Select.Content`: a container that centres itself with `translate` is
+    // the containing block for its `position: fixed` descendants, so a popup
+    // mounted into one switches to the absolute strategy to agree with it.
+    const strategy = rest.positionMethod ?? (mountPoint != null ? 'absolute' : undefined);
+    return (
+      <BaseTooltip.Portal container={mountPoint}>
+        <BaseTooltip.Positioner
+          ref={ref}
+          {...rest}
+          sideOffset={sideOffset}
+          positionMethod={strategy}
+          className={[stylex.props(chip.positioner).className, ...palette]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <BaseTooltip.Popup
+            className={(state) => {
+              // StyleX cannot express `[data-starting-style]`, so both ends of
+              // the rise are read off Base UI's transition status here.
+              const hidden =
+                state.transitionStatus === 'starting' || state.transitionStatus === 'ending';
+              return appendClassName(
+                stylex.props(
+                  chip.popup,
+                  // A tooltip inverts, so anything with a surface of its own
+                  // that lands on it has to be told what it is standing on. A
+                  // key cap is the one such part, and the theme is how it is
+                  // told: StyleX has no descendant selector, and a component
+                  // token group re-declared here reaches a cap however deeply a
+                  // caller wrapped it.
+                  kbdOnInvertedTheme,
+                  hidden && hiddenChipForSide(state.side)
+                ).className,
+                className
+              );
+            }}
+          >
+            {children}
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    );
+  }
+);
+
+/**
+ * A tooltip: the name of the thing under the pointer.
+ *
+ * It is the one floating part that does not read `popup`. The elevation ladder
+ * puts a menu, a popover and a list on the raised background under the popover
+ * shadow and then names the tooltip apart — `label` with `shadow.medium` — an
+ * inversion, because a tooltip is not a place to act but a label over one, and
+ * it has to read at a glance without becoming another surface.
+ *
+ * `Tooltip.Provider` groups them: once one tooltip has opened, the next opens
+ * without its delay, so a row of icon buttons reads like one strip rather than
+ * making a person wait at each. A surface that has such a row states the
+ * provider around it; without one every tooltip waits on its own.
+ */
+export const Tooltip = {
+  Provider: BaseTooltip.Provider,
+  Root: BaseTooltip.Root,
+  Trigger: BaseTooltip.Trigger,
+  Content: TooltipContent,
+};
diff --git a/packages/ui/stylex-options.ts b/packages/ui/stylex-options.ts
new file mode 100644
index 000000000..7ac6b00b7
--- /dev/null
+++ b/packages/ui/stylex-options.ts
@@ -0,0 +1,10 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
+
+export const stylexOptions = {
+  unstable_moduleResolution: { type: 'commonJS' as const, rootDir: repoRoot },
+  useCSSLayers: { prefix: 'stylex', before: ['theme', 'base'], after: ['components', 'utilities'] },
+  cssInjectionTarget: (fileName: string) => /(^|\/)index-[^/]+\.css$/.test(fileName),
+};
diff --git a/packages/ui/test/avatar.test.tsx b/packages/ui/test/avatar.test.tsx
new file mode 100644
index 000000000..ddce00bcf
--- /dev/null
+++ b/packages/ui/test/avatar.test.tsx
@@ -0,0 +1,148 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Avatar, type AvatarSize } from '../src/avatar/avatar';
+import { avatar, avatarPaletteTheme } from '../src/avatar/avatar.tokens.stylex';
+import * as stylex from '@stylexjs/stylex';
+import { forcedThemeClassNames } from '../src/theme/theme';
+
+const SIZES: AvatarSize[] = ['mini', 'small', 'medium', 'large', 'xlarge'];
+
+function classesAt(html: string, index = 0): string[] {
+  const matches = [...html.matchAll(/class="([^"]*)"/g)];
+  return (matches[index]?.[1] ?? '').split(' ').filter(Boolean);
+}
+
+/** A face with letters standing in for it, at the rung asked for. */
+function face(size?: AvatarSize, shape?: 'circle' | 'tile') {
+  return renderToStaticMarkup(
+    <Avatar.Root size={size} shape={shape}>
+      <Avatar.Fallback>ZX</Avatar.Fallback>
+    </Avatar.Root>
+  );
+}
+
+describe('Avatar', () => {
+  test('the box picks the letters, so a caller states one fact', () => {
+    // This is the whole reason the size is a prop. The deleted implementation
+    // had a single `size-8`, and every call site restated the box and the type
+    // step separately — `h-5 w-5 text-[9px]`, `h-7 w-7 text-[11px]`, `h-16 w-16
+    // text-xl` — two facts a surface had to keep in step. Here one prop moves
+    // both, so no rung can end up with somebody else's letters in it.
+    const boxes = SIZES.map((size) => classesAt(face(size), 0).join(' '));
+    const letters = SIZES.map((size) => classesAt(face(size), 1).join(' '));
+    expect(new Set(boxes).size).toBe(SIZES.length);
+    expect(new Set(letters).size).toBe(SIZES.length);
+  });
+
+  test('a rung is one width and one height, and nothing else moves with it', () => {
+    // A rung is exactly two declarations, a width and a height. Everything
+    // else a box is made of is one decision for all five: the crop, the shape,
+    // the fact that it never gives room back to a row that ran out.
+    const perSize = SIZES.map((size) => classesAt(face(size), 0));
+    const shared = perSize.reduce<string[]>(
+      (kept, names) => kept.filter((name) => names.includes(name)),
+      perSize[0] ?? []
+    );
+    for (const names of perSize) expect(names.length).toBe(shared.length + 2);
+  });
+
+  test('a person is a circle and a thing is a tile, at the rung it is on', () => {
+    // The rules put `radius.full` on `corner.round`: a squircle at that radius
+    // is a superellipse, which turns a face into a rounded square. A tile takes
+    // the radius-by-size table instead, so its corner changes with its box and
+    // a circle's does not.
+    const circles = SIZES.map((size) => classesAt(face(size, 'circle'), 0));
+    const tiles = SIZES.map((size) => classesAt(face(size, 'tile'), 0));
+    const circleCorners = circles.map((names) => names.filter((n) => !tiles[0]?.includes(n)));
+    expect(new Set(circleCorners.map((n) => n.join(' '))).size).toBeGreaterThan(0);
+    // Five boxes, five corners: a 16px tile and a 64px tile are not the same
+    // shape, and nothing here is a token of the tile's own.
+    const tileCorner = tiles.map((names, index) =>
+      names.filter((name) => !(circles[index] ?? []).includes(name)).join(' ')
+    );
+    expect(new Set(tileCorner).size).toBe(SIZES.length);
+  });
+
+  test('shape and size are reported on the element, so a board can read them', () => {
+    expect(face('large', 'tile')).toContain('data-size="large"');
+    expect(face('large', 'tile')).toContain('data-shape="tile"');
+    // The default is the rung a list of people sits on, and a person.
+    expect(face()).toContain('data-size="medium"');
+    expect(face()).toContain('data-shape="circle"');
+  });
+
+  test('a mark inside a fallback is given a box that follows the rung', () => {
+    // Every glyph in this package states 100% of whatever holds it, and StyleX
+    // has no descendant selector to reach one with, so the fallback draws the
+    // box. It is not one box for every avatar: a mark in a 16px circle and a
+    // mark in a 64px one are the same fraction of two different faces.
+    const marked = (size: AvatarSize) =>
+      classesAt(
+        renderToStaticMarkup(
+          <Avatar.Root size={size}>
+            <Avatar.Fallback>
+              <Avatar.Glyph>
+                <svg />
+              </Avatar.Glyph>
+            </Avatar.Fallback>
+          </Avatar.Root>
+        ),
+        2
+      ).join(' ');
+    expect(new Set(SIZES.map(marked)).size).toBe(SIZES.length);
+    // And a fallback carrying letters draws no box at all, so two initials are
+    // not squeezed into a glyph's share of the circle.
+    expect(classesAt(face('large'), 2)).toEqual([]);
+  });
+
+  test('a fallback keeps an identity colour the surface passed', () => {
+    // Which hue belongs to which workspace is a product fact rather than a
+    // token: the gray is what the package owns, and a surface that has its own
+    // answer states it as a style, which lands after every compiled class.
+    const html = renderToStaticMarkup(
+      <Avatar.Root size="large" shape="tile">
+        <Avatar.Fallback style={{ backgroundColor: 'hsl(268 62% 52%)' }}>L</Avatar.Fallback>
+      </Avatar.Root>
+    );
+    expect(html).toContain('background-color:hsl(268 62% 52%)');
+  });
+
+  test('a rung is a ceiling as well as a floor', () => {
+    // The board caught this and no unit test could have: jsdom applies none of
+    // StyleX's CSS, so a 16px circle holding two initials laid out 20px wide
+    // and stopped being a circle. A flex item's automatic minimum size is its
+    // content's, and an avatar is always in a row of something. Both the box
+    // and the fallback inside it have to give that up for the width to be the
+    // fact it is documented to be.
+    const floor = stylex.create({ probe: { minWidth: 0 } });
+    const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+    const expected = (props(floor.probe).className ?? '').split(' ').filter(Boolean);
+    expect(expected.length).toBe(1);
+    expect(classesAt(face('mini'), 0)).toContain(expected[0]);
+    expect(classesAt(face('mini'), 1)).toContain(expected[0]);
+  });
+
+  test('a caller className lands after the compiled classes', () => {
+    const html = renderToStaticMarkup(
+      <Avatar.Root className="mt-0.5">
+        <Avatar.Fallback>ZX</Avatar.Fallback>
+      </Avatar.Root>
+    );
+    expect(classesAt(html, 0).at(-1) ?? '').toBe('mt-0.5');
+  });
+
+  test('the colour tokens are re-declared under a forced palette', () => {
+    // A custom property declared only at the document root keeps the root
+    // palette inside a themed subtree, so a light card on a dark page would
+    // otherwise hold a dark avatar.
+    const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+    const theme = (props(avatarPaletteTheme).className ?? '').split(' ').filter(Boolean);
+    expect(theme.length).toBeGreaterThan(0);
+    for (const name of theme) {
+      expect(forcedThemeClassNames('dark')).toContain(name);
+    }
+    // And the group names both of the colours it points at.
+    expect(Object.keys(avatar)).toContain('fallbackBackground');
+    expect(Object.keys(avatar)).toContain('fallbackLabel');
+  });
+});
diff --git a/packages/ui/test/badge.test.tsx b/packages/ui/test/badge.test.tsx
new file mode 100644
index 000000000..16d101c95
--- /dev/null
+++ b/packages/ui/test/badge.test.tsx
@@ -0,0 +1,119 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Badge, type BadgeTone } from '../src/badge/badge';
+import { badge, badgePaletteTheme } from '../src/badge/badge.tokens.stylex';
+import { forcedThemeClassNames } from '../src/theme/theme';
+
+const TONES: BadgeTone[] = ['neutral', 'running', 'success', 'warning', 'danger'];
+
+function classesAt(html: string, index = 0): string[] {
+  const matches = [...html.matchAll(/class="([^"]*)"/g)];
+  return (matches[index]?.[1] ?? '').split(' ').filter(Boolean);
+}
+
+describe('Badge', () => {
+  test('a badge is inline metadata, not a control', () => {
+    // The old implementation's default variant filled the chip with the colour
+    // the rules give a stored value, which invited a press it does not answer.
+    // Nothing here takes focus, answers a pointer or reports a state.
+    const html = renderToStaticMarkup(<Badge>Plus</Badge>);
+    expect(html).toMatch(/^<span/);
+    expect(html).not.toContain('role=');
+    expect(html).not.toContain('tabindex');
+    expect(html).not.toContain('<button');
+  });
+
+  test('a tone is a film and a word, and nothing else moves with it', () => {
+    const chips = TONES.map((tone) =>
+      classesAt(renderToStaticMarkup(<Badge tone={tone}>{tone}</Badge>))
+    );
+    // Five different chips…
+    expect(new Set(chips.map((names) => names.join(' '))).size).toBe(TONES.length);
+    // …made of one chip: everything a tone does not own is shared, so a tone
+    // cannot grow its own height, corner or type step.
+    const shared = chips.reduce<string[]>(
+      (kept, names) => kept.filter((name) => names.includes(name)),
+      chips[0] ?? []
+    );
+    // A tone owns exactly two declarations: the film, and the word. The neutral
+    // one owns two as well — StyleX drops the root's `color` class from a chip
+    // whose tone declares its own, so the base ink is a class only the neutral
+    // chip carries and is therefore not in the shared set either.
+    for (const [index, names] of chips.entries()) {
+      expect(names.length, `the ${TONES[index]} badge owns the wrong number of declarations`).toBe(
+        shared.length + 2
+      );
+    }
+  });
+
+  test('a tone’s word is that tone pulled halfway to the ink', () => {
+    // The rule this replaces said the words stay ink in every tone, and the
+    // measurement behind it stands: the *raw* `warning` is 2.8:1 on a near-white
+    // surface, a colour tuned for a 16px mark where the bar is 3:1, used as 11px
+    // text where it is 4.5:1. What it left out is that the raw tone is not the
+    // only way to carry a hue — halfway to `label`, a tone keeps its hue and
+    // gains the ink's contrast, and the worst of the four then measures 5.2:1 on
+    // its own chip. That is the mark a person actually reads on a 20px chip,
+    // and in the dark palette it is the only thing that separates `running`
+    // from `warning` at all.
+    // Written out one by one because StyleX compiles `create` from a literal:
+    // a token read through a loop variable is not something it can evaluate.
+    const ink = stylex.create({
+      running: { color: badge.runningLabel },
+      success: { color: badge.successLabel },
+      warning: { color: badge.warningLabel },
+      danger: { color: badge.dangerLabel },
+      neutral: { color: badge.label },
+    });
+    const classFor = (style: (typeof ink)[keyof typeof ink]) => {
+      const names = (stylex.props(style).className ?? '').split(' ').filter(Boolean);
+      // One property, one value, one class — so what follows compares the chip
+      // against the declaration itself rather than against a copy of it.
+      expect(names.length).toBe(1);
+      return names[0];
+    };
+    for (const tone of ['running', 'success', 'warning', 'danger'] as const) {
+      const names = classesAt(renderToStaticMarkup(<Badge tone={tone}>a</Badge>));
+      expect(names, `the ${tone} badge does not carry its own word colour`).toContain(
+        classFor(ink[tone])
+      );
+    }
+    // And the neutral one has no tone to carry, so it keeps the base ink.
+    expect(classesAt(renderToStaticMarkup(<Badge>a</Badge>))).toContain(classFor(ink.neutral));
+    // The four are four: a tone whose word matched another's would be the bug
+    // this replaces, wearing a different colour.
+    const distinct = new Set(
+      (['running', 'success', 'warning', 'danger'] as const).map((tone) => classFor(ink[tone]))
+    );
+    expect(distinct.size).toBe(4);
+  });
+
+  test('a caller’s glyph is given a box, and a badge without one has none', () => {
+    // This package's glyphs state their size as 100% of whatever holds them,
+    // and StyleX has no descendant selector with which the chip could reach
+    // one — the same box a menu row's leading slot is, at a badge's scale.
+    const withIcon = renderToStaticMarkup(<Badge icon={<svg />}>macOS</Badge>);
+    expect(withIcon).toMatch(
+      /<span[^>]*><span aria-hidden="true" class="[^"]*"><svg><\/svg><\/span>macOS<\/span>/
+    );
+    // The box is the glyph's alone: a badge that is only words holds no empty
+    // one, so an icon-less badge is not indented for nothing.
+    expect(renderToStaticMarkup(<Badge>macOS</Badge>)).toMatch(/<span[^>]*>macOS<\/span>/);
+  });
+
+  test('a caller className lands after the compiled classes', () => {
+    const html = renderToStaticMarkup(<Badge className="max-w-24">long</Badge>);
+    const cls = /class="([^"]*)"/.exec(html)?.[1] ?? '';
+    expect(cls.endsWith(' max-w-24')).toBe(true);
+  });
+
+  test('the films travel into a forced palette', () => {
+    const theme = (stylex.props(badgePaletteTheme).className ?? '').split(' ').filter(Boolean);
+    expect(theme.length).toBeGreaterThan(0);
+    for (const name of theme) {
+      expect(forcedThemeClassNames('dark'), `${name} is not applied by ThemeRoot`).toContain(name);
+      expect(forcedThemeClassNames('light'), `${name} is not applied by ThemeRoot`).toContain(name);
+    }
+  });
+});
diff --git a/packages/ui/test/button.test.tsx b/packages/ui/test/button.test.tsx
new file mode 100644
index 000000000..58d810eb5
--- /dev/null
+++ b/packages/ui/test/button.test.tsx
@@ -0,0 +1,53 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Button } from '../src/button/button';
+import { forcedThemeClassNames } from '../src/theme/theme';
+
+describe('Button', () => {
+  test('renders a native button with variant and size data attributes', () => {
+    const html = renderToStaticMarkup(<Button>Save</Button>);
+    expect(html).toMatch(/^<button/);
+    expect(html).toContain('data-variant="primary"');
+    expect(html).toContain('data-size="medium"');
+    expect(html).toContain('type="button"');
+  });
+
+  test('appends a caller className after the compiled classes', () => {
+    const html = renderToStaticMarkup(
+      <Button variant="ghost" size="small" className="w-full">
+        Go
+      </Button>
+    );
+    const cls = /class="([^"]*)"/.exec(html)?.[1] ?? '';
+    expect(cls.endsWith(' w-full')).toBe(true);
+    expect(cls.split(' ').length).toBeGreaterThan(5);
+  });
+
+  test('an icon-only button gives what it holds a box, and a text one does not', () => {
+    // This package's glyphs state their size as 100% of whatever holds them,
+    // and StyleX has no descendant selector with which a button could reach
+    // one — so without the box a 16px cross fills a 28px button edge to edge.
+    const icon = renderToStaticMarkup(
+      <Button variant="ghost" size="small" icon aria-label="Close">
+        <svg />
+      </Button>
+    );
+    expect(icon).toMatch(/<button[^>]*><span class="[^"]*"><svg><\/svg><\/span><\/button>/);
+    // A label flows on its own; wrapping it would put the words in a 16px box.
+    const text = renderToStaticMarkup(<Button>Save</Button>);
+    expect(text).toMatch(/<button[^>]*>Save<\/button>/);
+  });
+
+  test('render swaps the element', () => {
+    const html = renderToStaticMarkup(<Button render={<a href="/x" />}>Link</Button>);
+    expect(html).toMatch(/^<a /);
+    expect(html).toContain('href="/x"');
+  });
+
+  test('forced theme class names exist for light and dark, none for system', () => {
+    expect(forcedThemeClassNames('dark').length).toBeGreaterThan(0);
+    expect(forcedThemeClassNames('light').length).toBeGreaterThan(0);
+    expect(forcedThemeClassNames('dark')).not.toEqual(forcedThemeClassNames('light'));
+    expect(forcedThemeClassNames('system')).toEqual([]);
+  });
+});
diff --git a/packages/ui/test/card.test.tsx b/packages/ui/test/card.test.tsx
new file mode 100644
index 000000000..82a3747aa
--- /dev/null
+++ b/packages/ui/test/card.test.tsx
@@ -0,0 +1,74 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Card } from '../src/card/card';
+import { cardPaletteTheme } from '../src/card/card.tokens.stylex';
+import { forcedThemeClassNames } from '../src/theme/theme';
+
+/** The class list of an element, read off static markup. */
+function classesAt(html: string, index = 0): string[] {
+  const matches = [...html.matchAll(/class="([^"]*)"/g)];
+  return (matches[index]?.[1] ?? '').split(' ').filter(Boolean);
+}
+
+describe('Card', () => {
+  test('the block is a div with no role, because a card is not a control', () => {
+    // A card holds controls; it is not one. Nothing here takes focus, answers a
+    // pointer or reports a state, so the rung is the whole of what it says.
+    const html = renderToStaticMarkup(<Card.Root>Sessions</Card.Root>);
+    expect(html).toMatch(/^<div/);
+    expect(html).not.toContain('role=');
+    expect(html).not.toContain('tabindex');
+  });
+
+  test('interactive adds the pointer’s answer and nothing else', () => {
+    const rest = classesAt(renderToStaticMarkup(<Card.Root>a</Card.Root>));
+    const pressable = classesAt(renderToStaticMarkup(<Card.Root interactive>a</Card.Root>));
+    // The rung is unchanged: a card that lifted on hover would be claiming a
+    // rung it is not on, so only the fill and the cursor are added.
+    for (const name of rest) expect(pressable).toContain(name);
+    expect(pressable.length).toBeGreaterThan(rest.length);
+  });
+
+  test('the title is a real heading, and which level it is belongs to the page', () => {
+    // An Alert's title is a line, because an alert owns no section; a card owns
+    // a region of the page, so a person walking the headings lands on it. The
+    // step is the card's and the level is not.
+    expect(renderToStaticMarkup(<Card.Title>Agents</Card.Title>)).toMatch(/^<h3/);
+    const page = renderToStaticMarkup(<Card.Title as="h1">Sign in</Card.Title>);
+    expect(page).toMatch(/^<h1/);
+    // The step does not move with the level.
+    expect(classesAt(page)).toEqual(classesAt(renderToStaticMarkup(<Card.Title>x</Card.Title>)));
+  });
+
+  test('the parts are four different blocks', () => {
+    const of = (html: string) => classesAt(html).join(' ');
+    const parts = [
+      of(renderToStaticMarkup(<Card.Header>a</Card.Header>)),
+      of(renderToStaticMarkup(<Card.Title>a</Card.Title>)),
+      of(renderToStaticMarkup(<Card.Description>a</Card.Description>)),
+      of(renderToStaticMarkup(<Card.Footer>a</Card.Footer>)),
+    ];
+    expect(new Set(parts).size).toBe(4);
+    expect(renderToStaticMarkup(<Card.Description>a</Card.Description>)).toMatch(/^<p/);
+  });
+
+  test('a caller className lands after the compiled classes', () => {
+    const html = renderToStaticMarkup(<Card.Root className="max-w-md">a</Card.Root>);
+    const cls = /class="([^"]*)"/.exec(html)?.[1] ?? '';
+    expect(cls.endsWith(' max-w-md')).toBe(true);
+    expect(cls.split(' ').length).toBeGreaterThan(3);
+  });
+
+  test('the card’s colours travel into a forced palette', () => {
+    // A component token group declared only at the document root keeps the root
+    // palette inside a themed subtree, so a light card on a dark page would
+    // read the dark one. `ThemeRoot` has to carry this group with the palette.
+    const theme = (stylex.props(cardPaletteTheme).className ?? '').split(' ').filter(Boolean);
+    expect(theme.length).toBeGreaterThan(0);
+    for (const name of theme) {
+      expect(forcedThemeClassNames('dark'), `${name} is not applied by ThemeRoot`).toContain(name);
+      expect(forcedThemeClassNames('light'), `${name} is not applied by ThemeRoot`).toContain(name);
+    }
+  });
+});
diff --git a/packages/ui/test/combobox.test.tsx b/packages/ui/test/combobox.test.tsx
new file mode 100644
index 000000000..0f18c0275
--- /dev/null
+++ b/packages/ui/test/combobox.test.tsx
@@ -0,0 +1,297 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, expect, test } from 'vitest';
+import { Combobox } from '../src/field/combobox';
+import { Field } from '../src/field/field';
+import { Input } from '../src/field/input';
+import { Select } from '../src/field/select';
+import { all, classesOf, click, mount, one, press, typeInto, type Mounted } from './dom';
+
+const LANGUAGES = ['TypeScript', 'Rust', 'Python', 'Ruby'];
+
+function Languages({
+  grouped = false,
+  ...rest
+}: { grouped?: boolean } & Partial<React.ComponentProps<typeof Combobox.Root<string>>>) {
+  return (
+    <Combobox.Root items={LANGUAGES} {...rest}>
+      {grouped ? (
+        <Combobox.InputGroup>
+          <Combobox.Input placeholder="Search a language" />
+          <Combobox.Trigger aria-label="Open the list" />
+        </Combobox.InputGroup>
+      ) : (
+        <Combobox.Input placeholder="Search a language" />
+      )}
+      <Combobox.Content empty={<Combobox.Empty>No language matches.</Combobox.Empty>}>
+        {(item: string) => (
+          <Combobox.Item key={item} value={item}>
+            {item}
+          </Combobox.Item>
+        )}
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+/** What the invalid ring adds to a text control, derived rather than written down. */
+const RING_CLASSES = (() => {
+  const strip = (html: string) =>
+    (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ').filter(Boolean);
+  const valid = strip(renderToStaticMarkup(<Input />));
+  const invalid = strip(renderToStaticMarkup(<Input aria-invalid="true" />));
+  return invalid.filter((name) => !valid.includes(name));
+})();
+
+const input = () => one('input[role="combobox"]') as HTMLInputElement;
+/** The control inside one mounted tree, when two are on the page at once. */
+const comboboxIn = (root: HTMLElement) =>
+  root.querySelector('input[role="combobox"]') as HTMLInputElement;
+const isOpen = () => input().getAttribute('aria-expanded') === 'true';
+const options = () => all('[role="listbox"] [role="option"]');
+const labels = () => options().map((row) => row.textContent);
+
+describe('Combobox input', () => {
+  test('is a text control that announces the list it filters', async () => {
+    mounted = await mount(<Languages />);
+    expect(input().tagName).toBe('INPUT');
+    expect(input().getAttribute('aria-autocomplete')).toBe('list');
+    expect(isOpen()).toBe(false);
+  });
+
+  test('typing narrows the list to what matches', async () => {
+    mounted = await mount(<Languages />);
+    await click(input());
+    expect(labels()).toEqual(LANGUAGES);
+
+    await typeInto(input(), 'ru');
+    // The filter is Base UI's, not ours; what this pins is that the primitive
+    // hands it the query rather than swallowing it.
+    expect(labels()).toEqual(['Rust', 'Ruby']);
+  });
+
+  test('a query that matches nothing says so instead of showing an empty box', async () => {
+    mounted = await mount(<Languages />);
+    await click(input());
+    await typeInto(input(), 'zzz');
+    expect(options()).toHaveLength(0);
+    expect(one('[role="listbox"]').parentElement?.textContent).toContain('No language matches.');
+  });
+
+  test('the announcement region takes no room while it announces nothing', async () => {
+    mounted = await mount(<Languages />);
+    await click(input());
+    // Base UI keeps this element mounted so a screen reader has a live region
+    // to announce into, and swaps its children rather than the element. It must
+    // therefore collapse while it is empty, or every popup opens with a blank
+    // row above its first item.
+    const region = one('[role="listbox"]').parentElement?.firstElementChild as HTMLElement;
+    expect(region.textContent).toBe('');
+    const collapsed = classesOf(region);
+
+    await typeInto(input(), 'zzz');
+    expect(region.textContent).toContain('No language matches.');
+
+    // The same element, and the same classes: the height it takes is a `:empty`
+    // rule inside them, so the collapse cannot be a second element or a second
+    // mechanism. It is not hidden either, which would take the live region out
+    // of the accessibility tree — the height in each state is read off the
+    // board in a browser, since jsdom applies no stylesheet.
+    expect(one('[role="listbox"]').parentElement?.firstElementChild).toBe(region);
+    expect(classesOf(region)).toEqual(collapsed);
+    expect(region.hasAttribute('hidden')).toBe(false);
+    expect(region.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  test('the arrow keys walk the filtered list and Enter takes the highlighted row', async () => {
+    mounted = await mount(<Languages />);
+    await click(input());
+    await typeInto(input(), 'ru');
+    await press('ArrowDown');
+    expect(options()[0].hasAttribute('data-highlighted')).toBe(true);
+    await press('ArrowDown');
+    expect(options()[1].hasAttribute('data-highlighted')).toBe(true);
+
+    await press('Enter');
+    expect(isOpen()).toBe(false);
+    expect(input().value).toBe('Ruby');
+  });
+
+  test('Escape closes the list and leaves the value alone', async () => {
+    mounted = await mount(<Languages defaultValue="Rust" />);
+    await click(input());
+    expect(isOpen()).toBe(true);
+    await press('Escape');
+    expect(isOpen()).toBe(false);
+    expect(input().value).toBe('Rust');
+  });
+
+  test('the row that holds the value is the one marked selected and ticked', async () => {
+    mounted = await mount(<Languages defaultValue="Python" />);
+    await click(input());
+    const rows = options();
+    expect(rows.map((row) => row.getAttribute('aria-selected'))).toEqual([
+      'false',
+      'false',
+      'true',
+      'false',
+    ]);
+    expect(rows.filter((row) => row.querySelector('svg'))).toHaveLength(1);
+  });
+
+  test('wears the same invalid ring a text control does', async () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    mounted = await mount(
+      <Field.Root invalid>
+        <Languages />
+      </Field.Root>
+    );
+    expect(input().getAttribute('aria-invalid')).toBe('true');
+    expect(RING_CLASSES.every((name) => classesOf(input()).includes(name))).toBe(true);
+  });
+
+  test('a disabled field reaches the control and the list stays shut', async () => {
+    mounted = await mount(
+      <Field.Root disabled>
+        <Languages />
+      </Field.Root>
+    );
+    expect(input().disabled).toBe(true);
+    await click(input());
+    expect(isOpen()).toBe(false);
+  });
+
+  test('a caller className lands after the compiled classes', async () => {
+    mounted = await mount(
+      <Combobox.Root items={LANGUAGES}>
+        <Combobox.Input className="w-64" />
+        <Combobox.Content>
+          {(item: string) => (
+            <Combobox.Item key={item} value={item}>
+              {item}
+            </Combobox.Item>
+          )}
+        </Combobox.Content>
+      </Combobox.Root>
+    );
+    const classes = classesOf(input());
+    expect(classes[classes.length - 1]).toBe('w-64');
+    expect(classes.length).toBeGreaterThan(5);
+  });
+});
+
+describe('Combobox input group', () => {
+  const group = () => one('input[role="combobox"]').parentElement as HTMLElement;
+
+  test('the group is the well and the input inside it is bare', async () => {
+    const solo = await mount(<Languages />);
+    const alone = classesOf(comboboxIn(solo.container));
+    await solo.unmount();
+
+    mounted = await mount(<Languages grouped />);
+    const bare = classesOf(input());
+    // A control that kept its own well inside the group would draw two: the
+    // bare input drops the background, the shadow, the radius and the height,
+    // and the group carries them instead.
+    expect(bare.length).toBeLessThan(alone.length);
+    expect(classesOf(group()).length).toBeGreaterThan(bare.length);
+  });
+
+  test('the ring goes around the group when the input inside it takes focus', async () => {
+    mounted = await mount(<Languages grouped />);
+    const resting = classesOf(group());
+    // `:focus-within` is a compiled condition, not a state read in JS, so what
+    // the group carries at rest already contains the focused declaration; this
+    // pins that the ring is declared on the group rather than on the input.
+    expect(resting.length).toBeGreaterThan(10);
+    expect(classesOf(input())).not.toEqual(expect.arrayContaining(RING_CLASSES));
+  });
+
+  test('an invalid group rings the whole control, not the bare input', async () => {
+    mounted = await mount(
+      <Field.Root invalid>
+        <Languages grouped />
+      </Field.Root>
+    );
+    const invalidGroup = classesOf(comboboxIn(mounted.container).parentElement as HTMLElement);
+    const valid = await mount(<Languages grouped />);
+    const validGroup = classesOf(comboboxIn(valid.container).parentElement as HTMLElement);
+    await valid.unmount();
+    expect(invalidGroup.filter((name) => !validGroup.includes(name)).length).toBeGreaterThan(0);
+    expect(classesOf(comboboxIn(mounted.container))).not.toEqual(
+      expect.arrayContaining(RING_CLASSES)
+    );
+  });
+
+  test('the chevron beside the input opens the same list', async () => {
+    mounted = await mount(<Languages grouped />);
+    const chevron = one('button[aria-label="Open the list"]');
+    expect(chevron.tagName).toBe('BUTTON');
+    await click(chevron);
+    expect(isOpen()).toBe(true);
+    expect(labels()).toEqual(LANGUAGES);
+  });
+
+  test('a disabled field dims the group, which `:disabled` cannot reach', async () => {
+    const enabled = await mount(<Languages grouped />);
+    const enabledGroup = classesOf(comboboxIn(enabled.container).parentElement as HTMLElement);
+    await enabled.unmount();
+
+    mounted = await mount(
+      <Field.Root disabled>
+        <Languages grouped />
+      </Field.Root>
+    );
+    const disabledGroup = classesOf(group());
+    // One class more than the enabled group: the family's one disabled opacity.
+    expect(disabledGroup.filter((name) => !enabledGroup.includes(name))).toHaveLength(1);
+  });
+});
+
+describe('the surface Select and Combobox share', () => {
+  test('a row declares its own edge, so a host cannot put a ring on it', async () => {
+    mounted = await mount(<Languages />);
+    await click(input());
+    // StyleX hashes a class per property and value, so re-declaring the rule
+    // here yields the class a row carries; derived from the compiler rather
+    // than written down. Base UI moves DOM focus onto the highlighted row, and
+    // a host that rings any focused `[tabindex]` would draw a stray border
+    // around it — the fill is how this system says where the keyboard is.
+    const none = stylex.props(stylex.create({ flat: { boxShadow: 'none' } }).flat).className;
+    expect(none).toBeTruthy();
+    expect(classesOf(options()[0])).toContain(none);
+  });
+
+  test('a row in either list is the same row', async () => {
+    const combobox = await mount(<Languages />);
+    await click(one('input[role="combobox"]'));
+    const comboRow = classesOf(all('[role="listbox"] [role="option"]')[1]);
+    await combobox.unmount();
+
+    mounted = await mount(
+      <Select.Root items={LANGUAGES.map((label) => ({ value: label, label }))}>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          {LANGUAGES.map((item) => (
+            <Select.Item key={item} value={item}>
+              {item}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+    );
+    await click(one('button[role="combobox"]'));
+    const selectRow = classesOf(all('[role="listbox"] [role="option"]')[1]);
+    // Neither component styles a row of its own: both take `popup/surface.ts`,
+    // so a change to the list appearance cannot land on one and miss the other.
+    expect(selectRow).toEqual(comboRow);
+  });
+});
diff --git a/packages/ui/test/dialog.test.tsx b/packages/ui/test/dialog.test.tsx
new file mode 100644
index 000000000..1ee6d7d95
--- /dev/null
+++ b/packages/ui/test/dialog.test.tsx
@@ -0,0 +1,197 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { Button } from '../src/button/button';
+import { AlertDialog } from '../src/dialog/alert-dialog';
+import { Dialog } from '../src/dialog/dialog';
+import { Select } from '../src/field/select';
+import { ThemeRoot, forcedThemeClassNames } from '../src/theme/theme';
+import { all, classesOf, click, mount, one, press, type Mounted } from './dom';
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+const panels = () => all('[role="dialog"]');
+const panel = () => panels()[0];
+const alerts = () => all('[role="alertdialog"]');
+const buttonNamed = (label: string) => {
+  const node = all('button').find((element) => element.textContent?.trim() === label);
+  if (!node) throw new Error(`no button named ${label}`);
+  return node;
+};
+
+describe('Dialog', () => {
+  test('a trigger opens the panel, and the panel names itself', async () => {
+    mounted = await mount(
+      <Dialog.Root>
+        <Dialog.Trigger>Rename</Dialog.Trigger>
+        <Dialog.Content>
+          <Dialog.Header>
+            <Dialog.Title>Rename session</Dialog.Title>
+            <Dialog.Description>The name shows in the sidebar.</Dialog.Description>
+          </Dialog.Header>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
+    expect(panels()).toHaveLength(0);
+
+    await click(one('button'));
+
+    const labelledBy = panel().getAttribute('aria-labelledby');
+    const describedBy = panel().getAttribute('aria-describedby');
+    expect(document.getElementById(labelledBy ?? '')?.textContent).toBe('Rename session');
+    expect(document.getElementById(describedBy ?? '')?.textContent).toBe(
+      'The name shows in the sidebar.'
+    );
+  });
+
+  test('renders the cross by default, and drops it when a panel says so', async () => {
+    mounted = await mount(
+      <Dialog.Root defaultOpen>
+        <Dialog.Content>
+          <Dialog.Title>Rename session</Dialog.Title>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
+    expect(all('[role="dialog"] button[aria-label="Close"]')).toHaveLength(1);
+    await mounted.unmount();
+
+    mounted = await mount(
+      <Dialog.Root defaultOpen>
+        <Dialog.Content closeButton={false}>
+          <Dialog.Title>Rename session</Dialog.Title>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
+    expect(all('[role="dialog"] button[aria-label="Close"]')).toHaveLength(0);
+  });
+
+  test('the cross closes it, and so does Escape', async () => {
+    mounted = await mount(
+      <Dialog.Root defaultOpen>
+        <Dialog.Content>
+          <Dialog.Title>Rename session</Dialog.Title>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
+    await click(one('[role="dialog"] button[aria-label="Close"]'));
+    expect(panels()).toHaveLength(0);
+
+    await mounted.unmount();
+    mounted = await mount(
+      <Dialog.Root defaultOpen>
+        <Dialog.Content>
+          <Dialog.Title>Rename session</Dialog.Title>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
+    await press('Escape');
+    expect(panels()).toHaveLength(0);
+  });
+
+  test('a footer answer runs its handler and takes the panel down with it', async () => {
+    const save = vi.fn();
+    mounted = await mount(
+      <Dialog.Root defaultOpen>
+        <Dialog.Content>
+          <Dialog.Title>Rename session</Dialog.Title>
+          <Dialog.Footer>
+            <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
+            <Dialog.Close render={<Button />} onClick={save}>
+              Save
+            </Dialog.Close>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
+    await click(buttonNamed('Save'));
+
+    expect(save).toHaveBeenCalledTimes(1);
+    expect(panels()).toHaveLength(0);
+  });
+
+  test('every popup inside it mounts into the panel rather than on the body', async () => {
+    // The whole reason `PopupContainerProvider` exists. A modal traps focus and
+    // locks the scroll by DOM position, so a list portalled to the body is
+    // outside the dialog to the dialog: focus is dragged back the moment it
+    // opens and the wheel never reaches it. The panel names itself, so a
+    // product surface never has to.
+    mounted = await mount(
+      <Dialog.Root defaultOpen>
+        <Dialog.Content>
+          <Dialog.Title>Pick a fruit</Dialog.Title>
+          <Select.Root defaultOpen items={[{ value: 'gala', label: 'Gala' }]}>
+            <Select.Trigger>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Item value="gala">Gala</Select.Item>
+            </Select.Content>
+          </Select.Root>
+        </Dialog.Content>
+      </Dialog.Root>
+    );
+    const list = one('[role="listbox"]');
+    expect(list.closest('[role="dialog"]')).toBe(panel());
+  });
+
+  test('carries a forced palette across the portal, onto the backdrop too', async () => {
+    mounted = await mount(
+      <ThemeRoot mode="dark">
+        <Dialog.Root defaultOpen>
+          <Dialog.Content>
+            <Dialog.Title>Rename session</Dialog.Title>
+          </Dialog.Content>
+        </Dialog.Root>
+      </ThemeRoot>
+    );
+    // The portal wraps the backdrop and the panel both, so it is where the
+    // classes declaring the palette land: a panel that inherited the document's
+    // palette would open light on a dark page.
+    const portal = panel().parentElement;
+    expect(portal).not.toBeNull();
+    for (const className of forcedThemeClassNames('dark')) {
+      expect(classesOf(portal as Element)).toContain(className);
+    }
+  });
+});
+
+describe('AlertDialog', () => {
+  test('announces itself as one, and has no cross to leave by', async () => {
+    mounted = await mount(
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Content>
+          <AlertDialog.Header>
+            <AlertDialog.Title>Delete this session?</AlertDialog.Title>
+            <AlertDialog.Description>Its transcript goes with it.</AlertDialog.Description>
+          </AlertDialog.Header>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
+    );
+    expect(alerts()).toHaveLength(1);
+    expect(all('button[aria-label="Close"]')).toHaveLength(0);
+  });
+
+  test('an outside press does not answer it, but Escape does', async () => {
+    mounted = await mount(
+      <AlertDialog.Root defaultOpen>
+        <AlertDialog.Content>
+          <AlertDialog.Title>Delete this session?</AlertDialog.Title>
+          <AlertDialog.Footer>
+            <AlertDialog.Close render={<Button variant="secondary" />}>Keep</AlertDialog.Close>
+          </AlertDialog.Footer>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
+    );
+    // The point of an alert dialog: a stray click beside it is not an answer,
+    // so the press that dismisses every other popup leaves this one standing.
+    await click(document.body);
+    expect(alerts()).toHaveLength(1);
+
+    // Escape still is one. It is the platform's cancel, and taking it away
+    // leaves a keyboard user holding a panel they cannot put down.
+    await press('Escape');
+    expect(alerts()).toHaveLength(0);
+  });
+});
diff --git a/packages/ui/test/disclosure.test.tsx b/packages/ui/test/disclosure.test.tsx
new file mode 100644
index 000000000..5cf2e3202
--- /dev/null
+++ b/packages/ui/test/disclosure.test.tsx
@@ -0,0 +1,304 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, expect, test } from 'vitest';
+import { Accordion } from '../src/disclosure/accordion';
+import { Collapsible } from '../src/disclosure/collapsible';
+import { disclosureSurface as surface, isCollapsed } from '../src/disclosure/surface';
+import { Tabs } from '../src/disclosure/tabs';
+import { all, classesOf, click, mount, one, press, type Mounted } from './dom';
+
+/** See `menu.test.tsx`: the same loosened call the primitives make. */
+function classesFor(...styles: readonly unknown[]): string[] {
+  const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+  return (props(...styles).className ?? '').split(' ').filter(Boolean);
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+const tabs = () => all('[role="tab"]');
+const panel = () => one('[role="tabpanel"]');
+const rows = () => all('h3 > button');
+
+function strip(size?: 'small' | 'medium' | 'large') {
+  return (
+    <Tabs.Root defaultValue="rendered">
+      <Tabs.List size={size}>
+        <Tabs.Tab value="rendered">Rendered</Tabs.Tab>
+        <Tabs.Tab value="raw">Raw</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="rendered">The rendered file</Tabs.Panel>
+      <Tabs.Panel value="raw">The raw file</Tabs.Panel>
+    </Tabs.Root>
+  );
+}
+
+describe('Tabs', () => {
+  test('is a strip of tabs over the one panel they name', async () => {
+    mounted = await mount(strip());
+    expect(tabs()).toHaveLength(2);
+    expect(tabs()[0].getAttribute('aria-selected')).toBe('true');
+    // The pair a screen reader walks: the tab names the panel, the panel is
+    // named by the tab, and only the chosen panel is in the document.
+    expect(panel().getAttribute('aria-labelledby')).toBe(tabs()[0].id);
+    expect(tabs()[0].getAttribute('aria-controls')).toBe(panel().id);
+    expect(panel().textContent).toBe('The rendered file');
+  });
+
+  test('the list holds the indicator without a caller adding one, and holds it first', async () => {
+    mounted = await mount(strip());
+    const list = one('[role="tablist"]');
+    // Painting order, not decoration: the indicator is out of flow and the tabs
+    // are in it, so a pill rendered after them would cover their labels.
+    expect(list.firstElementChild?.getAttribute('role')).toBe('presentation');
+    // Not through `all`: the indicator is `hidden` until Base UI has measured a
+    // tab, and jsdom lays nothing out, so it is never measured here.
+    expect(list.querySelectorAll('[role="presentation"]')).toHaveLength(1);
+  });
+
+  test('taking a tab moves the selection and swaps the panel under it', async () => {
+    mounted = await mount(strip());
+    await click(tabs()[1]);
+    expect(tabs()[0].getAttribute('aria-selected')).toBe('false');
+    expect(tabs()[1].getAttribute('aria-selected')).toBe('true');
+    expect(panel().textContent).toBe('The raw file');
+  });
+
+  test('the keyboard walks the strip, and taking a tab is a second act', async () => {
+    mounted = await mount(strip());
+    tabs()[0].focus();
+    await press('ArrowRight');
+    // Focus moved; the panel did not. A tab swaps a panel that may be expensive
+    // to build, and arrowing to the fourth tab should not build the second and
+    // third on the way. A surface whose panels are cheap says `activateOnFocus`.
+    expect(document.activeElement).toBe(tabs()[1]);
+    expect(tabs()[0].getAttribute('aria-selected')).toBe('true');
+    expect(panel().textContent).toBe('The rendered file');
+    // Taking it is Enter or Space, which is the platform's own activation of a
+    // real `<button>` rather than anything Base UI or this package handles —
+    // jsdom does not synthesise it, so the browser pass is what covers it.
+  });
+
+  test('a strip that asks for it selects what the keyboard lands on', async () => {
+    mounted = await mount(
+      <Tabs.Root defaultValue="rendered">
+        <Tabs.List activateOnFocus>
+          <Tabs.Tab value="rendered">Rendered</Tabs.Tab>
+          <Tabs.Tab value="raw">Raw</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="rendered">The rendered file</Tabs.Panel>
+        <Tabs.Panel value="raw">The raw file</Tabs.Panel>
+      </Tabs.Root>
+    );
+    tabs()[0].focus();
+    await press('ArrowRight');
+    expect(tabs()[1].getAttribute('aria-selected')).toBe('true');
+  });
+
+  test('the tab you are on is the other one with its colour replaced', async () => {
+    mounted = await mount(strip());
+    // Exactly the resting tab plus `tabActive`, and exactly the resting tab
+    // without it: no fill, no shadow, no weight change between the two states,
+    // because the pill under the tab is what says which one you are on.
+    expect(classesOf(tabs()[0]).sort()).toEqual(
+      classesFor(surface.ring, surface.tab, surface.tabMedium, surface.tabActive).sort()
+    );
+    expect(classesOf(tabs()[1]).sort()).toEqual(
+      classesFor(surface.ring, surface.tab, surface.tabMedium).sort()
+    );
+  });
+
+  test('a stretched strip splits its width, which is two facts stated once', async () => {
+    mounted = await mount(
+      <Tabs.Root defaultValue="local">
+        <Tabs.List stretch>
+          <Tabs.Tab value="local">Local</Tabs.Tab>
+          <Tabs.Tab value="github">GitHub</Tabs.Tab>
+        </Tabs.List>
+      </Tabs.Root>
+    );
+    // The track stretching and the tabs sharing it are one prop, because a
+    // strip that did only the first would be a full-width track with two tabs
+    // huddled at its start.
+    expect(classesOf(one('[role="tablist"]'))).toEqual(
+      expect.arrayContaining(classesFor(surface.trackStretch))
+    );
+    for (const tab of tabs()) {
+      expect(classesOf(tab)).toEqual(expect.arrayContaining(classesFor(surface.tabStretch)));
+    }
+  });
+
+  test('a disabled tab is not one a person can land on', async () => {
+    mounted = await mount(
+      <Tabs.Root defaultValue="rendered">
+        <Tabs.List>
+          <Tabs.Tab value="rendered">Rendered</Tabs.Tab>
+          <Tabs.Tab value="raw" disabled>
+            Raw
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="rendered">The rendered file</Tabs.Panel>
+      </Tabs.Root>
+    );
+    await click(tabs()[1]);
+    expect(tabs()[0].getAttribute('aria-selected')).toBe('true');
+    expect(tabs()[1].getAttribute('aria-disabled')).toBe('true');
+    // And it is dimmed from that state rather than through `:disabled`: Base UI
+    // keeps a disabled tab focusable so a keyboard reaches it and hears why, so
+    // the native attribute is never set and the pseudo-class never matches.
+    expect(tabs()[1].hasAttribute('disabled')).toBe(false);
+    expect(classesOf(tabs()[1])).toEqual(
+      expect.arrayContaining(classesFor(surface.disabled, surface.tabDisabled))
+    );
+    expect(classesOf(tabs()[0])).not.toEqual(expect.arrayContaining(classesFor(surface.disabled)));
+  });
+
+  test('the size is stated once on the strip, and the corner rule follows it', async () => {
+    const classesForSize = (size: 'small' | 'medium' | 'large') => {
+      const html = renderToStaticMarkup(strip(size));
+      const open = html.match(/<button\b[^>]*>/)?.[0] ?? '';
+      return (/class="([^"]*)"/.exec(open)?.[1] ?? '').split(' ').filter(Boolean);
+    };
+    const small = classesForSize('small');
+    const medium = classesForSize('medium');
+    const large = classesForSize('large');
+    // A 28px control takes radius 8 and a 32 or 36px one takes 10, so the top
+    // of the ladder shares its corner with the middle and only the small step
+    // differs — the same pair `Button` states.
+    expect(large).toEqual(medium);
+    expect(small).not.toEqual(medium);
+  });
+});
+
+describe('Accordion', () => {
+  function stack(props: { multiple?: boolean } = {}) {
+    return (
+      <Accordion.Root {...props}>
+        <Accordion.Item value="first">
+          <Accordion.Trigger>What it does</Accordion.Trigger>
+          <Accordion.Panel>It shows one thing at a time.</Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item value="second">
+          <Accordion.Trigger>What it costs</Accordion.Trigger>
+          <Accordion.Panel>Nothing at all.</Accordion.Panel>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  }
+
+  test('a row is a button inside the heading that names its panel', async () => {
+    mounted = await mount(stack());
+    expect(rows()).toHaveLength(2);
+    expect(rows()[0].getAttribute('aria-expanded')).toBe('false');
+    await click(rows()[0]);
+    const region = one('[role="region"]');
+    expect(rows()[0].getAttribute('aria-expanded')).toBe('true');
+    expect(region.getAttribute('aria-labelledby')).toBe(rows()[0].id);
+  });
+
+  test('the chevron is drawn by the part, and turns over when the row opens', async () => {
+    mounted = await mount(stack());
+    const chevron = () => one('button[aria-expanded] span[aria-hidden="true"]');
+    expect(chevron().querySelector('svg')).not.toBeNull();
+    const closed = classesOf(chevron());
+    await click(rows()[0]);
+    const open = classesOf(chevron());
+    expect(open.filter((name) => !closed.includes(name))).toEqual(classesFor(surface.chevronOpen));
+  });
+
+  test('a row that cannot be used is dimmed from state, for the same reason', async () => {
+    mounted = await mount(
+      <Accordion.Root>
+        <Accordion.Item value="first" disabled>
+          <Accordion.Trigger>What it does</Accordion.Trigger>
+          <Accordion.Panel>It shows one thing at a time.</Accordion.Panel>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+    expect(rows()[0].hasAttribute('disabled')).toBe(false);
+    expect(rows()[0].getAttribute('aria-disabled')).toBe('true');
+    expect(classesOf(rows()[0])).toEqual(expect.arrayContaining(classesFor(surface.disabled)));
+  });
+
+  test('one row is open at a time unless the stack says otherwise', async () => {
+    mounted = await mount(stack());
+    await click(rows()[0]);
+    await click(rows()[1]);
+    expect(rows()[0].getAttribute('aria-expanded')).toBe('false');
+    expect(rows()[1].getAttribute('aria-expanded')).toBe('true');
+
+    await mounted.unmount();
+    mounted = await mount(stack({ multiple: true }));
+    await click(rows()[0]);
+    await click(rows()[1]);
+    expect(rows()[0].getAttribute('aria-expanded')).toBe('true');
+    expect(rows()[1].getAttribute('aria-expanded')).toBe('true');
+  });
+
+  test("the panel's padding rides on a child, because the panel's height is what moves", async () => {
+    mounted = await mount(stack());
+    await click(rows()[0]);
+    const region = one('[role="region"]');
+    const body = classesFor(surface.body);
+    // Base UI measures the panel with `scrollHeight`, which counts padding, so
+    // a padded panel animates to the wrong height in either box model. The
+    // padding is therefore on the child and the panel carries the motion.
+    expect(classesOf(region)).toEqual(expect.arrayContaining(classesFor(surface.accordionPanel)));
+    expect(body.some((name) => classesOf(region).includes(name))).toBe(false);
+    expect(classesOf(region.firstElementChild as HTMLElement)).toEqual(
+      expect.arrayContaining(body)
+    );
+  });
+});
+
+describe('Collapsible', () => {
+  test('the trigger is whatever the surface already had there', () => {
+    const html = renderToStaticMarkup(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Details</Collapsible.Trigger>
+        <Collapsible.Panel>Body</Collapsible.Panel>
+      </Collapsible.Root>
+    );
+    // Nothing of this package's is on it: a lone disclosure is opened by a card
+    // header or a row, and a styled control here would be a second Button.
+    expect(/<button[^>]*class=/.test(html)).toBe(false);
+  });
+
+  test('the panel is the part the primitive owns, and it opens and closes', async () => {
+    mounted = await mount(
+      <Collapsible.Root>
+        <Collapsible.Trigger>Details</Collapsible.Trigger>
+        <Collapsible.Panel>What happened</Collapsible.Panel>
+      </Collapsible.Root>
+    );
+    const trigger = () => one('button');
+    expect(all('[data-open]').filter((node) => node.tagName === 'DIV')).toHaveLength(0);
+    await click(trigger());
+    expect(trigger().getAttribute('aria-expanded')).toBe('true');
+    const opened = document.getElementById(trigger().getAttribute('aria-controls') ?? '');
+    if (!opened) throw new Error('the trigger names no panel');
+    expect(opened.textContent).toBe('What happened');
+    expect(classesOf(opened)).toEqual(expect.arrayContaining(classesFor(surface.collapsiblePanel)));
+    await click(trigger());
+    expect(trigger().getAttribute('aria-expanded')).toBe('false');
+  });
+
+  test('the two panels animate from the variable their own component publishes', () => {
+    // Base UI names the height it measured per component, so one shared style
+    // would leave whichever of the two it was not written for with no height to
+    // move between.
+    expect(classesFor(surface.accordionPanel)).not.toEqual(classesFor(surface.collapsiblePanel));
+  });
+
+  test('the ends of a reveal are the two Base UI reports, and nothing else', () => {
+    // StyleX cannot select `[data-starting-style]`, so this reading is what
+    // stands in for it; `idle` is the panel at rest, open or closed.
+    expect(isCollapsed('starting')).toBe(true);
+    expect(isCollapsed('ending')).toBe(true);
+    expect(isCollapsed('idle')).toBe(false);
+    expect(isCollapsed(undefined)).toBe(false);
+  });
+});
diff --git a/packages/ui/test/dom.tsx b/packages/ui/test/dom.tsx
new file mode 100644
index 000000000..2e122542a
--- /dev/null
+++ b/packages/ui/test/dom.tsx
@@ -0,0 +1,188 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import type { ReactNode } from 'react';
+
+(
+  globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+/**
+ * jsdom implements neither `PointerEvent` nor `Element.scrollIntoView`, and
+ * Base UI's popups reach for both while opening. Installed once per module so
+ * every suite here drives a control the way a browser would rather than around
+ * the parts jsdom is missing.
+ */
+class TestPointerEvent extends MouseEvent {
+  readonly pointerType: string;
+  readonly pointerId: number;
+
+  constructor(type: string, init: MouseEventInit & { pointerType?: string } = {}) {
+    super(type, init);
+    // The spec's default is the empty string, and Base UI reads exactly that to
+    // tell a keyboard-generated click from a mouse one: a stand-in that defaults
+    // to `mouse` makes every synthesized Enter look like a stray pointer click
+    // and the item refuses to commit.
+    this.pointerType = init.pointerType ?? '';
+    this.pointerId = 1;
+  }
+}
+
+if (!('PointerEvent' in globalThis)) {
+  (globalThis as unknown as { PointerEvent: unknown }).PointerEvent = TestPointerEvent;
+}
+if (!Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = () => {};
+}
+if (!Element.prototype.hasPointerCapture) {
+  Element.prototype.hasPointerCapture = () => false;
+  Element.prototype.setPointerCapture = () => {};
+  Element.prototype.releasePointerCapture = () => {};
+}
+
+export interface Mounted {
+  container: HTMLElement;
+  root: Root;
+  unmount: () => Promise<void>;
+}
+
+/** Renders a tree into a live document and hands back the node it went into. */
+export async function mount(ui: ReactNode): Promise<Mounted> {
+  const container = document.createElement('div');
+  document.body.append(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(ui);
+  });
+  return {
+    container,
+    root,
+    unmount: async () => {
+      await act(async () => {
+        root.unmount();
+      });
+      container.remove();
+    },
+  };
+}
+
+/**
+ * Waits for animation frames to run. Base UI defers part of opening a popup to
+ * one, and `act` flushes React's own work but not the frame queue, so without
+ * this an interaction that follows lands between a popup being asked to open
+ * and its opening — and the deferred frame then undoes what the second
+ * interaction did.
+ */
+async function frames(count = 2): Promise<void> {
+  for (let index = 0; index < count; index += 1) {
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve());
+    });
+  }
+}
+
+/** Runs an interaction and lets every effect and frame it schedules settle. */
+export async function step(run: () => void | Promise<void>): Promise<void> {
+  await act(async () => {
+    await run();
+    await frames();
+  });
+}
+
+/**
+ * Waits for a condition instead of for a number of frames.
+ *
+ * `step` settles two animation frames, which is enough on an idle machine and
+ * is otherwise scheduler luck — the thing this repository's testing rule names
+ * by name. Base UI schedules part of a popup's state on its own animation
+ * frame, so how many frames a given interaction needs is a property of the
+ * machine that ran it: at one frame a different test in this suite fails than
+ * at two, and on a loaded CI runner the attribute can land a frame after the
+ * assertion that reads it. A test with a precondition, or one reading a state
+ * the library defers, states what it is waiting for here.
+ *
+ * It is bounded rather than open-ended, and the bound throws with what it was
+ * waiting for, so a real regression still fails the run and says why.
+ */
+export async function until(ready: () => boolean, what: string): Promise<void> {
+  for (let attempt = 0; attempt < 30; attempt += 1) {
+    if (ready()) return;
+    await step(() => {});
+  }
+  throw new Error(`timed out waiting for ${what}`);
+}
+
+/** The pointer moving onto something, which is what highlights a list row. */
+export async function hover(element: Element): Promise<void> {
+  await step(() => {
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true, pointerType: 'mouse' }));
+    element.dispatchEvent(new MouseEvent('mousemove', { bubbles: true }));
+  });
+}
+
+/**
+ * The pointer arriving and pressing, in full. Every part of the sequence is
+ * load-bearing here: a list row is picked where the pointer moved, a Select
+ * opens on the click and a Combobox on the mousedown, so a shortcut that fires
+ * only one of them silently tests half the family.
+ */
+export async function click(element: Element): Promise<void> {
+  await hover(element);
+  await step(() => {
+    const pointer = { bubbles: true, cancelable: true, pointerType: 'mouse', button: 0, detail: 1 };
+    element.dispatchEvent(new PointerEvent('pointerdown', pointer));
+    element.dispatchEvent(new MouseEvent('mousedown', pointer));
+    if (element instanceof HTMLElement) element.focus();
+    element.dispatchEvent(new PointerEvent('pointerup', pointer));
+    element.dispatchEvent(new MouseEvent('mouseup', pointer));
+    (element as HTMLElement).click();
+  });
+}
+
+/**
+ * A key press on whatever holds focus. The two halves are aimed separately,
+ * because a key that closes a popup moves focus between them and a keyup fired
+ * at the element that has gone is not what the browser would deliver.
+ */
+export async function press(key: string): Promise<void> {
+  const at = () => document.activeElement ?? document.body;
+  await step(() => {
+    at().dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+  });
+  await step(() => {
+    at().dispatchEvent(new KeyboardEvent('keyup', { key, bubbles: true, cancelable: true }));
+  });
+}
+
+/** Types into a text control the way a person does, one value change at a time. */
+export async function typeInto(input: HTMLInputElement, value: string): Promise<void> {
+  await step(() => {
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+    setter?.call(input, value);
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+  });
+}
+
+/**
+ * Every element matching a selector that is actually on screen.
+ *
+ * A Select keeps its list mounted once it has been opened and marks the closed
+ * positioner `hidden`, which takes the rows out of the accessibility tree and
+ * off the screen without removing them from the document. Counting raw matches
+ * would therefore count a list nobody can see.
+ */
+export function all(selector: string): HTMLElement[] {
+  return [...document.querySelectorAll<HTMLElement>(selector)].filter(
+    (node) => node.closest('[hidden]') == null
+  );
+}
+
+/** The first element matching a selector, or a failure the caller can read. */
+export function one(selector: string): HTMLElement {
+  const node = document.querySelector<HTMLElement>(selector);
+  if (!node) throw new Error(`no element matched ${selector}`);
+  return node;
+}
+
+export function classesOf(element: Element): string[] {
+  return [...element.classList];
+}
diff --git a/packages/ui/test/drawer.test.tsx b/packages/ui/test/drawer.test.tsx
new file mode 100644
index 000000000..9fcf3e15f
--- /dev/null
+++ b/packages/ui/test/drawer.test.tsx
@@ -0,0 +1,207 @@
+import * as stylex from '@stylexjs/stylex';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { Button } from '../src/button/button';
+import { modal, drawerSwipeDirection } from '../src/dialog/surface';
+import { z } from '../src/tokens/scales.stylex';
+import { Drawer } from '../src/drawer/drawer';
+import { Select } from '../src/field/select';
+import { ThemeRoot, forcedThemeClassNames } from '../src/theme/theme';
+import { all, classesOf, click, mount, one, press, type Mounted } from './dom';
+
+/** See `menu.test.tsx`: the same loosened call the primitives make. */
+function classesFor(...styles: readonly unknown[]): string[] {
+  const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+  return (props(...styles).className ?? '').split(' ').filter(Boolean);
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+const panels = () => all('[role="dialog"]');
+const panel = () => panels()[0];
+const buttonNamed = (label: string) => {
+  const node = all('button').find((element) => element.textContent?.trim() === label);
+  if (!node) throw new Error(`no button named ${label}`);
+  return node;
+};
+
+function Filters({
+  side = 'end',
+  inset,
+  ...rest
+}: {
+  side?: 'top' | 'bottom' | 'start' | 'end';
+  inset?: boolean;
+  defaultOpen?: boolean;
+}) {
+  return (
+    <Drawer.Root side={side} {...rest}>
+      <Drawer.Trigger>Open filters</Drawer.Trigger>
+      <Drawer.Content side={side} inset={inset}>
+        <Drawer.Header>
+          <Drawer.Title>Filters</Drawer.Title>
+          <Drawer.Description>They apply to the session list.</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Footer>
+          <Drawer.Close render={<Button variant="secondary" />}>Reset</Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}
+
+describe('Drawer', () => {
+  test('a trigger opens the panel, and the panel names itself', async () => {
+    mounted = await mount(<Filters />);
+    expect(panels()).toHaveLength(0);
+
+    await click(one('button'));
+
+    const labelledBy = panel().getAttribute('aria-labelledby');
+    const describedBy = panel().getAttribute('aria-describedby');
+    expect(document.getElementById(labelledBy ?? '')?.textContent).toBe('Filters');
+    expect(document.getElementById(describedBy ?? '')?.textContent).toBe(
+      'They apply to the session list.'
+    );
+  });
+
+  test('states the edge it came in on, and the cross closes it', async () => {
+    mounted = await mount(<Filters side="bottom" defaultOpen />);
+    expect(panel().getAttribute('data-side')).toBe('bottom');
+
+    await click(one('[role="dialog"] button[aria-label="Close"]'));
+    expect(panels()).toHaveLength(0);
+  });
+
+  test('Escape closes it, and a footer answer runs before it does', async () => {
+    const reset = vi.fn();
+    mounted = await mount(
+      <Drawer.Root defaultOpen>
+        <Drawer.Content>
+          <Drawer.Title>Filters</Drawer.Title>
+          <Drawer.Close render={<Button />} onClick={reset}>
+            Reset
+          </Drawer.Close>
+        </Drawer.Content>
+      </Drawer.Root>
+    );
+    await click(buttonNamed('Reset'));
+    expect(reset).toHaveBeenCalledTimes(1);
+    expect(panels()).toHaveLength(0);
+
+    await mounted.unmount();
+    mounted = await mount(<Filters defaultOpen />);
+    await press('Escape');
+    expect(panels()).toHaveLength(0);
+  });
+
+  test('the edge picks the swipe, and the inline pair flips right to left', () => {
+    // The one derivation this package does on Base UI's behalf. Base UI names a
+    // swipe in physical directions because a finger moves in physical space;
+    // this package names an edge in writing-direction terms, so "away from the
+    // start edge" is left in one document and right in another.
+    expect(drawerSwipeDirection('top', false)).toBe('up');
+    expect(drawerSwipeDirection('bottom', false)).toBe('down');
+    expect(drawerSwipeDirection('start', false)).toBe('left');
+    expect(drawerSwipeDirection('end', false)).toBe('right');
+
+    expect(drawerSwipeDirection('start', true)).toBe('right');
+    expect(drawerSwipeDirection('end', true)).toBe('left');
+    // The block axis does not reverse with writing direction.
+    expect(drawerSwipeDirection('top', true)).toBe('up');
+    expect(drawerSwipeDirection('bottom', true)).toBe('down');
+  });
+
+  test('the panel keeps its transform for the gesture, unlike a dialog', () => {
+    // The reason a drawer is not a dialog pinned to an edge. A dialog centres
+    // itself with `translate(-50%, -50%)`, which spends the one property CSS
+    // has for movement; a drawer is laid out by its viewport and leaves that
+    // property to Base UI's swipe variables. If the drawer panel ever picked up
+    // the dialog's centring class, the drag would fight the position.
+    const centring = stylex.create({ probe: { transform: 'translate(-50%, -50%)' } });
+    const centringClasses = classesFor(centring.probe);
+    expect(centringClasses.length).toBeGreaterThan(0);
+    for (const className of centringClasses) {
+      expect(classesFor(modal.popup)).toContain(className);
+      expect(classesFor(modal.drawerPopup)).not.toContain(className);
+    }
+  });
+
+  test("the viewport carries the rung's stacking, so the backdrop stays under it", () => {
+    // A `position: fixed` element creates a stacking context, so a `z-index` on
+    // the panel inside the viewport orders it only against its own siblings —
+    // against the page it counts as whatever the viewport counts as. With the
+    // viewport at `auto` the backdrop painted over the drawer and the panel
+    // rendered greyed under its own overlay. The stacking therefore belongs to
+    // the viewport, and the panel states none.
+    const rung = classesFor(stylex.create({ probe: { zIndex: z.dialog } }).probe);
+    const under = classesFor(stylex.create({ probe: { zIndex: z.dialogBackdrop } }).probe);
+    expect(rung.length).toBeGreaterThan(0);
+    expect(rung).not.toEqual(under);
+
+    for (const className of rung) {
+      expect(classesFor(modal.drawerViewport)).toContain(className);
+      // The dialog panel is the other member of the rung and stacks the same,
+      // which is what makes this the rung's z-index rather than the drawer's.
+      expect(classesFor(modal.popup)).toContain(className);
+      // The panel inside the viewport claims nothing it could not honour.
+      expect(classesFor(modal.drawerPopup)).not.toContain(className);
+    }
+    for (const className of under) {
+      expect(classesFor(modal.backdrop)).toContain(className);
+      expect(classesFor(modal.drawerViewport)).not.toContain(className);
+    }
+  });
+
+  test('a flush drawer squares the corners it meets; an inset one keeps all four', () => {
+    // The two are one axis of the same component, so the difference is checked
+    // as a difference rather than each being described on its own.
+    for (const side of ['top', 'bottom', 'start', 'end'] as const) {
+      const flush = classesFor(modal.drawerPopup, modal[`flush${cap(side)}`]);
+      const insetPanel = classesFor(modal.drawerPopup);
+      expect(flush.length).toBeGreaterThan(insetPanel.length);
+    }
+  });
+
+  test('every popup inside it mounts into the panel rather than on the body', async () => {
+    mounted = await mount(
+      <Drawer.Root defaultOpen>
+        <Drawer.Content>
+          <Drawer.Title>Pick a fruit</Drawer.Title>
+          <Select.Root defaultOpen items={[{ value: 'gala', label: 'Gala' }]}>
+            <Select.Trigger>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Item value="gala">Gala</Select.Item>
+            </Select.Content>
+          </Select.Root>
+        </Drawer.Content>
+      </Drawer.Root>
+    );
+    const list = one('[role="listbox"]');
+    expect(list.closest('[role="dialog"]')).toBe(panel());
+  });
+
+  test('carries a forced palette across the portal', async () => {
+    mounted = await mount(
+      <ThemeRoot mode="dark">
+        <Filters defaultOpen />
+      </ThemeRoot>
+    );
+    // The portal wraps the backdrop, the viewport and the panel, so it is where
+    // the classes declaring the palette land.
+    const portal = panel().closest('[data-base-ui-portal]') ?? panel().parentElement;
+    expect(portal).not.toBeNull();
+    for (const className of forcedThemeClassNames('dark')) {
+      expect(classesOf(portal as Element)).toContain(className);
+    }
+  });
+});
+
+function cap<T extends string>(value: T): Capitalize<T> {
+  return (value.charAt(0).toUpperCase() + value.slice(1)) as Capitalize<T>;
+}
diff --git a/packages/ui/test/feedback.test.tsx b/packages/ui/test/feedback.test.tsx
new file mode 100644
index 000000000..38814d998
--- /dev/null
+++ b/packages/ui/test/feedback.test.tsx
@@ -0,0 +1,207 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, expect, test } from 'vitest';
+import { Alert } from '../src/feedback/alert';
+import { Progress } from '../src/feedback/progress';
+import { Skeleton } from '../src/feedback/skeleton';
+import { Spinner } from '../src/feedback/spinner';
+import { feedbackSurface as surface } from '../src/feedback/surface';
+import { Toast } from '../src/feedback/toast';
+import { roleForTone } from '../src/feedback/tone';
+import { all, classesOf, click, mount, one, step, type Mounted } from './dom';
+
+/** See `menu.test.tsx`: the same loosened call the primitives make. */
+function classesFor(...styles: readonly unknown[]): string[] {
+  const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+  return (props(...styles).className ?? '').split(' ').filter(Boolean);
+}
+
+function attrOf(html: string, tag: string, attribute: string): string | undefined {
+  const open = new RegExp(`<${tag}\\b[^>]*>`).exec(html)?.[0] ?? '';
+  return new RegExp(`${attribute}="([^"]*)"`).exec(open)?.[1];
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+describe('Alert', () => {
+  test('how urgently it is announced follows from what it reports', () => {
+    // A failure interrupts what a screen reader is saying; a confirmation waits
+    // its turn. `alert` on every message is the version that trains people to
+    // ignore it, so the role is the tone's rather than a prop.
+    expect(roleForTone('danger')).toBe('alert');
+    expect(roleForTone('warning')).toBe('alert');
+    expect(roleForTone('success')).toBe('status');
+    expect(roleForTone('neutral')).toBe('status');
+    expect(attrOf(renderToStaticMarkup(<Alert.Root tone="danger" />), 'div', 'role')).toBe('alert');
+    expect(attrOf(renderToStaticMarkup(<Alert.Root />), 'div', 'role')).toBe('status');
+  });
+
+  test('the mark is the tone’s, and the part draws it', () => {
+    // A caller free to pass a glyph can put a tick on a failure, so there is no
+    // way to pass one: each tone brings the mark that names it.
+    const danger = renderToStaticMarkup(<Alert.Root tone="danger" />);
+    const success = renderToStaticMarkup(<Alert.Root tone="success" />);
+    const warning = renderToStaticMarkup(<Alert.Root tone="warning" />);
+    expect(danger).toContain('<svg');
+    expect(
+      new Set([danger, success, warning].map((html) => /d="([^"]*)"/.exec(html)?.[1])).size
+    ).toBe(3);
+    // The warning is the one that is not a circle: a triangle is what tells it
+    // from an error for a person who does not see the two colours apart.
+    expect(warning).not.toContain('<circle');
+    expect(danger).toContain('<circle');
+  });
+
+  test('a tone tints the surface it is on, and the two rungs are two surfaces', () => {
+    // The tint is 8% of the tone mixed into the rung's own background, so an
+    // Alert on the card rung and a Toast on the floating one cannot share one
+    // token without one of them ceasing to look like its rung.
+    expect(classesFor(surface.noticeDanger)).not.toEqual(classesFor(surface.toastDanger));
+    const html = renderToStaticMarkup(<Alert.Root tone="danger" />);
+    for (const name of classesFor(surface.message, surface.notice, surface.noticeDanger)) {
+      expect(html, `the danger alert is missing ${name}`).toContain(name);
+    }
+  });
+});
+
+describe('Progress', () => {
+  test('the bar reports the value, and Base UI owns what it announces', () => {
+    const html = renderToStaticMarkup(<Progress value={40} label="Uploading" showValue />);
+    expect(attrOf(html, 'div', 'role')).toBe('progressbar');
+    expect(attrOf(html, 'div', 'aria-valuenow')).toBe('40');
+    expect(html).toContain('Uploading');
+    expect(html).toContain('40%');
+    // The indicator's width is the value, which Base UI writes inline.
+    expect(html).toContain('width:40%');
+  });
+
+  test('no value is a different report from no progress', () => {
+    const html = renderToStaticMarkup(<Progress value={null} />);
+    expect(html).not.toContain('aria-valuenow');
+    // No inline share: Base UI writes one only when there is a value, which is
+    // what leaves the indeterminate style free to set a width of its own.
+    expect(html).not.toMatch(/style="[^"]*width:\s*\d+%/);
+    // The band that crosses the track instead: the indeterminate style, which
+    // also drops the width transition that would otherwise fight the animation.
+    for (const name of classesFor(surface.indicatorIndeterminate)) {
+      expect(html, `an indeterminate bar is missing ${name}`).toContain(name);
+    }
+  });
+});
+
+describe('Skeleton', () => {
+  test('it says nothing to a screen reader, because its shape says it all', () => {
+    expect(attrOf(renderToStaticMarkup(<Skeleton />), 'div', 'aria-hidden')).toBe('true');
+  });
+
+  test('the room it holds is a prop, so nothing has to win a specificity fight', () => {
+    // A size passed as a class would land in the same fight as the shape's own
+    // height; a dynamic style resolves to an inline value instead.
+    const html = renderToStaticMarkup(<Skeleton width="60%" height={12} />);
+    expect(/style="[^"]*width:\s*60%/.test(html)).toBe(true);
+    expect(/style="[^"]*height:\s*12px/.test(html)).toBe(true);
+  });
+
+  test('each shape takes its own corner, and nothing else', () => {
+    const line = classesFor(surface.skeleton, surface.skeletonLine);
+    const circle = classesFor(surface.skeleton, surface.skeletonCircle);
+    expect(line).not.toEqual(circle);
+    const html = renderToStaticMarkup(<Skeleton shape="circle" />);
+    for (const name of circle) {
+      expect(html, `a circle skeleton is missing ${name}`).toContain(name);
+    }
+  });
+});
+
+describe('Spinner', () => {
+  test('it is drawn in the ink of whatever holds it', () => {
+    const html = renderToStaticMarkup(<Spinner />);
+    // Two strokes, one colour: the arc and the ring it turns inside, which is
+    // that same colour kept back rather than a token of its own.
+    expect(html.match(/stroke="currentColor"/g)).toHaveLength(2);
+    expect(html).toContain('stroke-opacity="0.25"');
+  });
+
+  test('it names itself, unless the surface has already named the wait', () => {
+    expect(attrOf(renderToStaticMarkup(<Spinner />), 'svg', 'aria-label')).toBe('Loading');
+    const silent = renderToStaticMarkup(<Spinner label={null} />);
+    expect(attrOf(silent, 'svg', 'aria-hidden')).toBe('true');
+    expect(silent).not.toContain('aria-label');
+  });
+});
+
+describe('Toast', () => {
+  const report = async (
+    manager: ReturnType<typeof Toast.createManager>,
+    options: Parameters<ReturnType<typeof Toast.createManager>['add']>[0]
+  ) => {
+    await step(() => {
+      manager.add(options);
+    });
+  };
+
+  test('a message reported from outside React arrives, with its tone', async () => {
+    const manager = Toast.createManager();
+    mounted = await mount(
+      <Toast.Provider manager={manager}>
+        <p>the app</p>
+      </Toast.Provider>
+    );
+    expect(all('[role="region"]')).toHaveLength(1);
+
+    await report(manager, { title: 'Sync failed', description: 'No answer', type: 'danger' });
+
+    const toast = all('[data-type="danger"]')[0];
+    expect(toast.textContent).toContain('Sync failed');
+    expect(toast.textContent).toContain('No answer');
+    // The same block an Alert is, on the other rung: one message, two surfaces.
+    expect(classesOf(toast)).toEqual(
+      expect.arrayContaining(classesFor(surface.message, surface.toast, surface.toastDanger))
+    );
+  });
+
+  test('the title and the sentence under it are the Alert’s, not a second pair', async () => {
+    const manager = Toast.createManager();
+    mounted = await mount(<Toast.Provider manager={manager} />);
+    await report(manager, { title: 'Session archived', description: 'It can be restored.' });
+    expect(classesOf(one('h2'))).toEqual(classesFor(surface.title));
+    expect(classesOf(one('[data-base-ui-portal] p'))).toEqual(classesFor(surface.description));
+  });
+
+  test('the page under a toast stays usable, and the toast itself does not', async () => {
+    const manager = Toast.createManager();
+    mounted = await mount(<Toast.Provider manager={manager} />);
+    await report(manager, { title: 'Saved' });
+    // The viewport covers a strip of the window, so it must not take the
+    // pointer; each toast takes it back for its own close button.
+    expect(classesOf(one('[role="region"]'))).toEqual(
+      expect.arrayContaining(classesFor(surface.viewport))
+    );
+    expect(classesOf(all('[role="dialog"]')[0])).toEqual(
+      expect.arrayContaining(classesFor(surface.toast))
+    );
+  });
+
+  test('closing one takes it away', async () => {
+    const manager = Toast.createManager();
+    mounted = await mount(<Toast.Provider manager={manager} />);
+    await report(manager, { title: 'Saved' });
+    expect(all('[role="dialog"]')).toHaveLength(1);
+
+    await click(one('button[aria-label="Close"]'));
+
+    expect(all('[role="dialog"]')).toHaveLength(0);
+  });
+
+  test('the region can be named in the product’s own language', async () => {
+    const manager = Toast.createManager();
+    mounted = await mount(<Toast.Provider manager={manager} label="通知" />);
+    // Base UI's default is the English "Notifications", which a translated
+    // product has to be able to replace.
+    expect(one('[role="region"]').getAttribute('aria-label')).toBe('通知');
+  });
+});
diff --git a/packages/ui/test/field.test.tsx b/packages/ui/test/field.test.tsx
new file mode 100644
index 000000000..c3def124c
--- /dev/null
+++ b/packages/ui/test/field.test.tsx
@@ -0,0 +1,205 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Field } from '../src/field/field';
+import { field, fieldPaletteTheme } from '../src/field/field.tokens.stylex';
+import { Input } from '../src/field/input';
+import { Textarea } from '../src/field/textarea';
+import { forcedThemeClassNames } from '../src/theme/theme';
+
+function classesOf(html: string, tag: string): string[] {
+  const open = new RegExp(`<${tag}\\b[^>]*>`).exec(html)?.[0] ?? '';
+  return (/class="([^"]*)"/.exec(open)?.[1] ?? '').split(' ').filter(Boolean);
+}
+
+function attrOf(html: string, tag: string, attribute: string): string | undefined {
+  const open = new RegExp(`<${tag}\\b[^>]*>`).exec(html)?.[0] ?? '';
+  return new RegExp(`${attribute}="([^"]*)"`).exec(open)?.[1];
+}
+
+/**
+ * The classes `aria-invalid` adds on its own. Derived rather than written down,
+ * and asserted non-empty here so a regression that stops applying the ring
+ * cannot leave the tests below quietly passing against an empty set.
+ */
+const RING_CLASSES = (() => {
+  const valid = classesOf(renderToStaticMarkup(<Input />), 'input');
+  const invalid = classesOf(renderToStaticMarkup(<Input aria-invalid="true" />), 'input');
+  return invalid.filter((name) => !valid.includes(name));
+})();
+
+const named = (
+  <Field.Root name="title">
+    <Field.Label>Session title</Field.Label>
+    <Input placeholder="Describe the task" />
+    <Field.Description>Shown in the sidebar.</Field.Description>
+    <Field.Error match="valueMissing">Enter a title.</Field.Error>
+  </Field.Root>
+);
+
+describe('Field', () => {
+  test('the parts render outside a field instead of throwing', () => {
+    // Base UI's Label, Description and Error require a Field.Root; a surface
+    // that only wants a label for its own control must not crash.
+    const html = renderToStaticMarkup(
+      <div>
+        <Field.Label htmlFor="standalone">Session title</Field.Label>
+        <input id="standalone" />
+        <Field.Description>Shown in the sidebar.</Field.Description>
+        <Field.Error>Enter a title.</Field.Error>
+      </div>
+    );
+    expect(attrOf(html, 'label', 'for')).toBe('standalone');
+    expect(html).toContain('Session title');
+    expect(html).toContain('<p');
+    expect(html).toContain('Shown in the sidebar.');
+    expect(html).toContain('Enter a title.');
+    expect(classesOf(html, 'label').length).toBeGreaterThan(0);
+  });
+
+  test('a standalone label is styled the same as one inside a field', () => {
+    const alone = classesOf(
+      renderToStaticMarkup(<Field.Label htmlFor="x">Title</Field.Label>),
+      'label'
+    );
+    const rooted = classesOf(renderToStaticMarkup(named), 'label');
+    expect(alone).toEqual(rooted);
+  });
+
+  test('the label is associated with the control the field renders', () => {
+    const html = renderToStaticMarkup(named);
+    const control = attrOf(html, 'input', 'id');
+    expect(control).toBeTruthy();
+    expect(attrOf(html, 'label', 'for')).toBe(control);
+  });
+
+  test('a field that reports no error keeps it out of the markup', () => {
+    const html = renderToStaticMarkup(named);
+    expect(html).toContain('Shown in the sidebar.');
+    expect(html).not.toContain('Enter a title.');
+    expect(html).not.toContain('aria-invalid');
+    expect(html).not.toContain('data-invalid');
+  });
+
+  test('invalid marks the control, shows the error, and adds a ring class', () => {
+    const valid = renderToStaticMarkup(named);
+    const invalid = renderToStaticMarkup(
+      <Field.Root name="title" invalid>
+        <Field.Label>Session title</Field.Label>
+        <Input placeholder="Describe the task" />
+        <Field.Error match>Enter a title.</Field.Error>
+      </Field.Root>
+    );
+    expect(invalid).toContain('aria-invalid="true"');
+    expect(invalid).toContain('Enter a title.');
+    const added = classesOf(invalid, 'input').filter(
+      (name) => !classesOf(valid, 'input').includes(name)
+    );
+    expect(added.length).toBeGreaterThan(0);
+  });
+
+  test('disabled on the root disables the control and dims the label', () => {
+    const enabled = renderToStaticMarkup(named);
+    const html = renderToStaticMarkup(
+      <Field.Root name="title" disabled>
+        <Field.Label>Session title</Field.Label>
+        <Input />
+      </Field.Root>
+    );
+    expect(html).toContain('disabled=""');
+    const added = classesOf(html, 'label').filter(
+      (name) => !classesOf(enabled, 'label').includes(name)
+    );
+    expect(added.length).toBeGreaterThan(0);
+  });
+});
+
+describe('Input and Textarea', () => {
+  test('Input renders a native input carrying its size step', () => {
+    const html = renderToStaticMarkup(<Input size="small" placeholder="Search" />);
+    expect(html).toMatch(/^<input/);
+    expect(html).toContain('data-size="small"');
+    expect(html).toContain('placeholder="Search"');
+  });
+
+  test('Textarea renders a native textarea and keeps textarea attributes', () => {
+    const html = renderToStaticMarkup(<Textarea rows={4} placeholder="Describe the task" />);
+    expect(html).toMatch(/^<textarea/);
+    expect(html).toContain('rows="4"');
+    expect(html).toContain('placeholder="Describe the task"');
+  });
+
+  test('Input and Textarea share the well styles rather than each defining one', () => {
+    const input = classesOf(renderToStaticMarkup(<Input />), 'input');
+    const textarea = classesOf(renderToStaticMarkup(<Textarea />), 'textarea');
+    const shared = input.filter((name) => textarea.includes(name));
+    expect(shared.length).toBeGreaterThan(5);
+  });
+
+  test('aria-invalid on the control alone shows the ring', () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    const area = classesOf(renderToStaticMarkup(<Textarea />), 'textarea');
+    const areaInvalid = classesOf(
+      renderToStaticMarkup(<Textarea aria-invalid="true" />),
+      'textarea'
+    );
+    expect(areaInvalid.filter((name) => !area.includes(name))).toEqual(RING_CLASSES);
+  });
+
+  test('the ring follows what ARIA calls invalid, not just the literal true', () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    for (const value of [true, 'true', 'grammar', 'spelling'] as const) {
+      const cls = classesOf(renderToStaticMarkup(<Input aria-invalid={value} />), 'input');
+      expect(
+        RING_CLASSES.every((name) => cls.includes(name)),
+        `${String(value)} rings`
+      ).toBe(true);
+    }
+    for (const value of [false, 'false', undefined] as const) {
+      const cls = classesOf(renderToStaticMarkup(<Input aria-invalid={value} />), 'input');
+      expect(
+        RING_CLASSES.some((name) => cls.includes(name)),
+        `${String(value)} does not ring`
+      ).toBe(false);
+    }
+  });
+
+  test('a field marked invalid rings its control without the caller repeating it', () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    const html = renderToStaticMarkup(
+      <Field.Root invalid>
+        <Input />
+      </Field.Root>
+    );
+    // Base UI renders the field's validity as aria-invalid, so the attribute and
+    // the ring are the same fact reaching the control by two routes.
+    expect(html).toContain('aria-invalid="true"');
+    expect(RING_CLASSES.every((name) => classesOf(html, 'input').includes(name))).toBe(true);
+  });
+
+  test('a caller className lands after the compiled classes', () => {
+    const html = renderToStaticMarkup(<Input className="w-64" />);
+    const cls = /class="([^"]*)"/.exec(html)?.[1] ?? '';
+    expect(cls.endsWith(' w-64')).toBe(true);
+    expect(cls.split(' ').length).toBeGreaterThan(5);
+  });
+});
+
+describe('field tokens', () => {
+  test('compile to custom property references', () => {
+    expect(field.background).toMatch(/^var\(--/);
+    expect(field.ring).toMatch(/^var\(--/);
+    expect(field.invalidRing).toMatch(/^var\(--/);
+  });
+
+  test('the palette theme rides along with every forced palette', () => {
+    const themeClasses = (stylex.props(fieldPaletteTheme).className ?? '')
+      .split(' ')
+      .filter(Boolean);
+    expect(themeClasses.length).toBeGreaterThan(0);
+    for (const name of themeClasses) {
+      expect(forcedThemeClassNames('light')).toContain(name);
+      expect(forcedThemeClassNames('dark')).toContain(name);
+    }
+  });
+});
diff --git a/packages/ui/test/gallery.test.tsx b/packages/ui/test/gallery.test.tsx
new file mode 100644
index 000000000..54083fb23
--- /dev/null
+++ b/packages/ui/test/gallery.test.tsx
@@ -0,0 +1,364 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { avatar } from '../src/avatar/avatar.tokens.stylex';
+import { badge } from '../src/badge/badge.tokens.stylex';
+import { card } from '../src/card/card.tokens.stylex';
+import { dialog } from '../src/dialog/dialog.tokens.stylex';
+import { disclosure } from '../src/disclosure/disclosure.tokens.stylex';
+import { feedback } from '../src/feedback/feedback.tokens.stylex';
+import { kbd } from '../src/kbd/kbd.tokens.stylex';
+import { UiGallery } from '../src/gallery/gallery';
+import { popup } from '../src/popup/popup.tokens.stylex';
+import { table } from '../src/table/table.tokens.stylex';
+import { toggle } from '../src/toggle/toggle.tokens.stylex';
+import { tooltip } from '../src/tooltip/tooltip.tokens.stylex';
+import { surface } from '../src/popup/surface';
+import { forcedThemeClassNames } from '../src/theme/theme';
+import { colors, shadow } from '../src/tokens/colors.stylex';
+import { control, duration, radius, space, text, z } from '../src/tokens/scales.stylex';
+
+/** StyleX adds bookkeeping keys to the runtime token objects. */
+function tokenNames(tokens: object): string[] {
+  return Object.keys(tokens).filter((key) => !key.startsWith('__'));
+}
+
+const board = renderToStaticMarkup(<UiGallery />);
+
+describe('UiGallery', () => {
+  test('names every colour and shadow token', () => {
+    for (const name of tokenNames(colors)) {
+      expect(board, `colour token ${name} is missing from the board`).toContain(`>${name}<`);
+    }
+    for (const name of tokenNames(shadow)) {
+      expect(board, `shadow token ${name} is missing from the board`).toContain(`>shadow.${name}<`);
+    }
+  });
+
+  test('names every scale token', () => {
+    const scales: [string, object][] = [
+      ['radius', radius],
+      ['control', control],
+      ['space', space],
+      ['duration', duration],
+      ['z', z],
+    ];
+    for (const [group, tokens] of scales) {
+      for (const name of tokenNames(tokens)) {
+        expect(board, `${group}.${name} is missing from the board`).toContain(`${group}.${name}`);
+      }
+    }
+    const typeSteps = new Set(tokenNames(text).map((name) => name.replace(/(Size|Leading)$/, '')));
+    for (const step of typeSteps) {
+      expect(board, `type step ${step} is missing from the board`).toContain(step);
+    }
+  });
+
+  test('renders each sample under both forced palettes', () => {
+    for (const className of [...forcedThemeClassNames('light'), ...forcedThemeClassNames('dark')]) {
+      expect(board).toContain(className);
+    }
+    expect(board).toContain('Lody Light');
+    expect(board).toContain('Vesper');
+  });
+
+  test('shows every Button variant and size', () => {
+    for (const variant of ['primary', 'secondary', 'ghost', 'destructive', 'link']) {
+      expect(board).toContain(`data-variant="${variant}"`);
+    }
+    for (const size of ['mini', 'small', 'medium', 'large']) {
+      expect(board).toContain(`data-size="${size}"`);
+    }
+    expect(board).toContain('disabled=""');
+  });
+
+  test('shows the field family: both controls, every size, and each state', () => {
+    expect(board).toContain('<textarea');
+    expect(board).toContain('placeholder="Describe the task"');
+    for (const legend of ['small · 28', 'medium · 32', 'large · 36']) {
+      expect(board, `field size ${legend} is missing from the board`).toContain(legend);
+    }
+    // Base UI marks these on the rendered parts, so their presence is the state
+    // reaching the control rather than the board describing it.
+    expect(board).toContain('aria-invalid="true"');
+    expect(board).toContain('data-disabled=""');
+    for (const name of [
+      'field.background',
+      'field.value',
+      'field.label',
+      'field.placeholder',
+      'field.hint',
+      'field.error',
+      'field.ring',
+      'field.invalidRing',
+      'field.well',
+    ]) {
+      expect(board, `${name} is missing from the board`).toContain(name);
+    }
+  });
+
+  test('shows the choice controls: every state of each, and their own tokens', () => {
+    expect(board).toContain('role="checkbox"');
+    expect(board).toContain('role="radiogroup"');
+    expect(board).toContain('role="switch"');
+    // Base UI marks these on the rendered control, so their presence is the
+    // state reaching it rather than the board describing it.
+    expect(board).toContain('aria-checked="mixed"');
+    expect(board).toContain('data-checked=""');
+    expect(board).toContain('data-unchecked=""');
+    for (const name of [
+      'field.checkedFill',
+      'field.checkedMark',
+      'field.checkedEdge',
+      'field.thumb',
+      'field.thumbShadow',
+    ]) {
+      expect(board, `${name} is missing from the board`).toContain(name);
+    }
+  });
+
+  test('shows the trigger every state and names the popup tokens', () => {
+    // A trigger is a button that announces a listbox; a Combobox is an input
+    // that announces one. Their presence is the board holding the real
+    // controls rather than a picture of them.
+    expect(board).toContain('aria-haspopup="listbox"');
+    expect(board).toContain('data-placeholder=""');
+    expect(board).toContain('aria-autocomplete="list"');
+    for (const legend of ['small · 28', 'medium · 32', 'large · 36']) {
+      expect(board, `select size ${legend} is missing from the board`).toContain(legend);
+    }
+    for (const name of tokenNames(popup)) {
+      expect(board, `popup.${name} is missing from the board`).toContain(`popup.${name}`);
+    }
+    expect(board, 'field.icon is missing from the board').toContain('field.icon');
+  });
+
+  test('shows the three ways into a menu, and every row state a menu holds', () => {
+    // The ways in are the real controls: a dropdown trigger, a bar of them, and
+    // an area that answers a right click.
+    expect(board).toContain('aria-haspopup="menu"');
+    expect(board).toContain('role="menubar"');
+    expect(board).toContain('Right-click this area');
+    // The rows are a stand-in, because a menu is portalled and unmounted while
+    // it is closed — the board would otherwise show three triggers and nothing
+    // a reader could compare.
+    for (const row of ['New task', 'Copy link', 'Sort by name', 'Export', 'Archive']) {
+      expect(board, `the ${row} row is missing from the board`).toContain(row);
+    }
+    // A destructive command is a state of the one row rather than a component
+    // of its own, and it has two: at rest, and under the keyboard.
+    for (const state of [surface.itemDestructive, surface.itemDestructiveHighlighted]) {
+      for (const name of (stylex.props(state).className ?? '').split(' ').filter(Boolean)) {
+        expect(board, `a destructive row state is missing from the board`).toContain(name);
+      }
+    }
+  });
+
+  test('shows a popover, and names the two declarations it replaces', () => {
+    // The real popover is a trigger; its surface is a stand-in, because a popup
+    // is portalled and unmounted while it is closed.
+    expect(board).toContain('aria-haspopup="dialog"');
+    for (const name of ['popup.panelPadding', 'popup.panelGap', 'popup.description']) {
+      expect(board, `${name} is missing from the board`).toContain(name);
+    }
+  });
+
+  test('shows the modal rung: all three ways onto it, and every dialog token', () => {
+    // Base UI marks the panel, so its presence is the real component on the
+    // board rather than a picture of one. A dialog is unmounted while closed,
+    // so what a reader compares against is the stand-in beside the triggers.
+    expect(board).toContain('Rename session');
+    expect(board).toContain('Delete session');
+    // A drawer has two axes and both belong on the board: the edge it arrives
+    // from — each laid out against a different side and swiped a different way
+    // — and whether it meets that edge or floats off it.
+    for (const side of ['top', 'end', 'bottom', 'start']) {
+      expect(board, `the ${side} drawer is missing from the board`).toContain(`>${side}<`);
+      expect(board, `the inset ${side} drawer is missing from the board`).toContain(
+        `${side} · inset`
+      );
+    }
+    for (const name of tokenNames(dialog)) {
+      expect(board, `dialog.${name} is missing from the board`).toContain(`dialog.${name}`);
+    }
+  });
+
+  test('shows the three disclosures, and names every token they share', () => {
+    // None of the three is portalled, so what the board renders is the real
+    // thing in both states rather than a stand-in: a strip with its pill, a
+    // stack with one row open and two closed, and a lone collapsible.
+    expect(board).toContain('role="tablist"');
+    expect(board).toContain('role="tabpanel"');
+    // The pill is the list's own doing rather than a caller's, and the board
+    // does not add one: its presence here is the part assembling it.
+    expect(board).toContain('role="presentation"');
+    for (const legend of ['small \u00b7 28', 'medium \u00b7 32', 'large \u00b7 36']) {
+      expect(board, `strip size ${legend} is missing from the board`).toContain(legend);
+    }
+    // A stack states both states at once: one row open, the rest closed.
+    expect(board).toContain('aria-expanded="true"');
+    expect(board).toContain('aria-expanded="false"');
+    expect(board).toContain('What a session is');
+    for (const name of tokenNames(disclosure)) {
+      expect(board, `disclosure.${name} is missing from the board`).toContain(`disclosure.${name}`);
+    }
+  });
+
+  test('shows the tooltip, and names every token it inverts', () => {
+    expect(board).toContain('Rerun this turn');
+    for (const name of tokenNames(tooltip)) {
+      expect(board, `tooltip.${name} is missing from the board`).toContain(`tooltip.${name}`);
+    }
+  });
+
+  test('shows both halves of the feedback family, and every token they share', () => {
+    // An Alert renders in place, so the board holds the real thing in each of
+    // the four tones; a Toast is portalled and gone again, so what a reader
+    // compares against is the stand-in beside the button that reports one.
+    expect(board).toContain('role="alert"');
+    expect(board).toContain('role="status"');
+    expect(board).toContain('Session archived');
+    expect(board).toContain('role="progressbar"');
+    // A bar with no value is a different report from a bar at zero, and both
+    // are on the board.
+    expect(board).toContain('aria-valuenow="0"');
+    expect(board).toContain('indeterminate');
+    for (const name of tokenNames(feedback)) {
+      expect(board, `feedback.${name} is missing from the board`).toContain(`feedback.${name}`);
+    }
+  });
+
+  test('shows the table and the pager, and every token the two share', () => {
+    // Nothing here is a stand-in: a table draws no surface and a pager is not
+    // portalled, so the board holds both of them for real.
+    expect(board).toContain('<table');
+    expect(board).toContain('<caption');
+    expect(board).toContain('<tfoot');
+    for (const legend of ['small \u00b7 28', 'medium \u00b7 32', 'large \u00b7 36']) {
+      expect(board, `table size ${legend} is missing from the board`).toContain(legend);
+    }
+    // A row that is taken, a row that can be pressed, and a head that stays.
+    expect(board).toContain('data-selected=""');
+    expect(board).toContain('tabindex="0"');
+    // The box in the head is derived rather than passed: some of the rows are
+    // taken, so it is mixed.
+    expect(board).toContain('aria-checked="mixed"');
+    expect(board).toContain('aria-label="Select all"');
+    // Nothing to show is a row of the table rather than a panel over it, so the
+    // column names are still standing beside it. What it crosses is pinned in
+    // `table.test.tsx`, against a real DOM rather than this markup.
+    expect(board).toContain('No sessions on this machine');
+    // A sortable column states its direction where a screen reader reads it,
+    // and a column with no way to take it says nothing about sorting at all.
+    expect(board).toContain('aria-sort="descending"');
+    expect(board).toContain('aria-sort="none"');
+    // The pager: the page you are on says so twice, and the gaps name no page.
+    expect(board).toContain('aria-current="page"');
+    expect(board).toContain('aria-label="Page 20"');
+    expect(board).toContain('Page 4212 of 9214');
+    for (const name of tokenNames(table)) {
+      expect(board, `table.${name} is missing from the board`).toContain(`table.${name}`);
+    }
+  });
+
+  test('shows the card rung as a component, and names every token it takes', () => {
+    // A card is not portalled, so what the board holds is the real thing in
+    // both of its states: a block with a heading, a body and the answers, and
+    // the same block marked as the pressable thing inside the caller's button.
+    expect(board).toContain('Worktree setup');
+    expect(board).toContain('<h4');
+    expect(board).toContain('<button type="button"');
+    for (const name of tokenNames(card)) {
+      expect(board, `card.${name} is missing from the board`).toContain(`card.${name}`);
+    }
+  });
+
+  test('shows a badge on three rungs, a line in both axes, and their tokens', () => {
+    // A badge is on no rung, and the board is where that either holds or does
+    // not: the same four tones sit on the page, on a card and on the floating
+    // rung where the ladder's own named fills collapse.
+    for (const rung of ['on a page', 'on a card', 'on a menu']) {
+      expect(board, `the badge row ${rung} is missing from the board`).toContain(rung);
+    }
+    // The line is the primitive rather than a hand-drawn div, in both axes.
+    expect(board).toContain('role="separator"');
+    expect(board).toContain('aria-orientation="vertical"');
+    for (const name of tokenNames(badge)) {
+      expect(board, `badge.${name} is missing from the board`).toContain(`badge.${name}`);
+    }
+  });
+
+  test('shows every avatar rung, both shapes, and each stand-in', () => {
+    // The board is where the ladder either holds or does not: the point of the
+    // size prop is that the box picks the letters, so all five rungs are on it
+    // rather than one with a note about the rest.
+    for (const legend of [
+      'mini \u00b7 16',
+      'small \u00b7 20',
+      'medium \u00b7 24',
+      'large \u00b7 32',
+      'xlarge \u00b7 64',
+    ]) {
+      expect(board, `avatar rung ${legend} is missing from the board`).toContain(legend);
+    }
+    expect(board).toContain('data-shape="tile"');
+    expect(board).toContain('data-shape="circle"');
+    // The letters where a picture has not arrived, and the identity colour a
+    // surface brought itself. There is no `<img>` in this markup and that is
+    // the component working: Base UI mounts the picture only once it has
+    // loaded, so a static render is every avatar showing its stand-in.
+    expect(board).not.toContain('<img');
+    expect(board).toContain('background-color:hsl(268 62% 52%)');
+    for (const name of tokenNames(avatar)) {
+      expect(board, `avatar.${name} is missing from the board`).toContain(`avatar.${name}`);
+    }
+  });
+
+  test('shows a key cap, a chord, and the same cap on the surface that inverts', () => {
+    // Nothing here is a stand-in for the cap; the chip is, because a tooltip is
+    // portalled and opens on a pointer the board has not got. It is composed
+    // from the very styles `Tooltip.Content` applies, so a chip this package no
+    // longer draws cannot be reported here.
+    expect(board).toContain('<kbd');
+    // A chord is a kbd around kbds, which is the shape HTML gives one gesture.
+    expect(board).toMatch(/<kbd[^>]*>\s*<kbd/);
+    for (const name of tokenNames(kbd)) {
+      expect(board, `kbd.${name} is missing from the board`).toContain(`kbd.${name}`);
+    }
+  });
+
+  test('shows a control that stays pressed, a set of them, and the bar holding them', () => {
+    // Nothing here is a stand-in. None of the three is portalled, so the board
+    // holds a real toggle in both of its states, a set in each of its two
+    // kinds, and a bar with the one line between its clusters.
+    expect(board).toContain('aria-pressed="true"');
+    expect(board).toContain('aria-pressed="false"');
+    expect(board).toContain('role="toolbar"');
+    // The 24px rung is this family's own: the ladder a Button is on starts at
+    // 28, and a toggle in a file viewer's strip of actions is smaller than that.
+    expect(board, "the toggle's 24px rung is missing from the board").toContain('mini \u00b7 24');
+    // The comparison the section exists to make, on one row: the same three
+    // choices as a set and as a Tabs strip, so a reader can see that only the
+    // strip — which is one control — has a track under it.
+    expect(board).toContain('Timeline');
+    expect(board).toContain('role="tablist"');
+    for (const name of tokenNames(toggle)) {
+      expect(board, `toggle.${name} is missing from the board`).toContain(`toggle.${name}`);
+    }
+  });
+
+  test('renders one palette when asked for one', () => {
+    const light = renderToStaticMarkup(<UiGallery palettes="light" />);
+    expect(light).toContain('Lody Light');
+    expect(light).not.toContain('Vesper');
+    // createTheme also emits a marker class shared by both themes of a variable
+    // group; only the palette-specific classes tell the two renders apart.
+    const darkOnly = forcedThemeClassNames('dark').filter(
+      (className) => !forcedThemeClassNames('light').includes(className)
+    );
+    expect(darkOnly.length).toBeGreaterThan(0);
+    for (const className of darkOnly) {
+      expect(light).not.toContain(className);
+    }
+  });
+});
diff --git a/packages/ui/test/kbd.test.tsx b/packages/ui/test/kbd.test.tsx
new file mode 100644
index 000000000..26d0a7047
--- /dev/null
+++ b/packages/ui/test/kbd.test.tsx
@@ -0,0 +1,132 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, expect, test } from 'vitest';
+import { Button } from '../src/button/button';
+import { Kbd, KbdGroup } from '../src/kbd/kbd';
+import { kbd, kbdOnInvertedTheme, kbdPaletteTheme } from '../src/kbd/kbd.tokens.stylex';
+import { forcedThemeClassNames } from '../src/theme/theme';
+import { Tooltip } from '../src/tooltip/tooltip';
+import { all, classesOf, mount, one, type Mounted } from './dom';
+
+/** See `menu.test.tsx`: the same loosened call the primitives make. */
+function classesFor(...styles: readonly unknown[]): string[] {
+  const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+  return (props(...styles).className ?? '').split(' ').filter(Boolean);
+}
+
+/** The compiled classes of a bare cap, read off the primitive rather than restated. */
+function capClasses(): string[] {
+  const html = renderToStaticMarkup(<Kbd>K</Kbd>);
+  return (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ').filter(Boolean);
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+describe('Kbd', () => {
+  test('a cap is a picture of a key, not a control', () => {
+    // It reports no role, takes no focus and answers no pointer. A surface that
+    // wants a pressable key wants a Button; the deleted implementation said the
+    // same thing with `pointer-events-none`, and this is where that survives
+    // the move off Tailwind.
+    const html = renderToStaticMarkup(<Kbd>K</Kbd>);
+    expect(html).toMatch(/^<kbd/);
+    expect(html).not.toContain('role=');
+    expect(html).not.toContain('tabindex');
+    const none = stylex.create({ probe: { pointerEvents: 'none', userSelect: 'none' } });
+    for (const className of classesFor(none.probe)) {
+      expect(capClasses()).toContain(className);
+    }
+  });
+
+  test('a chord is a kbd around kbds, and carries no appearance of its own', () => {
+    // HTML gives this exact shape a meaning, so a screen reader is told the
+    // three caps are one gesture rather than three keys in a row.
+    const html = renderToStaticMarkup(
+      <KbdGroup>
+        <Kbd>&#8984;</Kbd>
+        <Kbd>K</Kbd>
+      </KbdGroup>
+    );
+    expect(html.startsWith('<kbd')).toBe(true);
+    expect([...html.matchAll(/<kbd/g)]).toHaveLength(3);
+    // The wrapper draws nothing: the fill and the corner belong to the caps, so
+    // a chord is not a second chip with two chips inside it.
+    const transparent = stylex.create({ probe: { backgroundColor: 'transparent' } });
+    const groupClasses = (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ');
+    for (const className of classesFor(transparent.probe)) {
+      expect(groupClasses).toContain(className);
+    }
+  });
+
+  test('the cap is drawn in the UI font rather than the browser’s mono default', () => {
+    // `<kbd>` defaults to a monospace face. The glyphs on these caps — ⌘, ⇧, ↵ —
+    // are drawn by the UI font here, so a cap that fell back to the mono stack
+    // would render a different glyph from the identical character in the label
+    // beside it.
+    const inherit = stylex.create({ probe: { fontFamily: 'inherit' } });
+    for (const className of classesFor(inherit.probe)) {
+      expect(capClasses()).toContain(className);
+    }
+  });
+
+  test('a cap standing on a tooltip is told what it is standing on', async () => {
+    // The tooltip is the one surface in this system that inverts, so a cap
+    // carrying the page's own gray lands as a light chip on a dark one with its
+    // letters gone. StyleX has no descendant selector — the shape the deleted
+    // implementation used — and it does not need one: a component token group
+    // re-declared on the popup reaches every cap under it, however deeply a
+    // caller wrapped one.
+    mounted = await mount(
+      <Tooltip.Root defaultOpen>
+        <Tooltip.Trigger delay={0} render={<Button aria-label="Palette" />}>
+          P
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <span>Open the palette</span>
+          <KbdGroup>
+            <Kbd>&#8984;</Kbd>
+            <Kbd>K</Kbd>
+          </KbdGroup>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    );
+    const chip = all('[data-base-ui-portal] [data-side] > *')[0];
+    expect(chip).toBeDefined();
+    for (const className of classesFor(kbdOnInvertedTheme)) {
+      expect(classesOf(chip)).toContain(className);
+    }
+    // And the cap under it is the same cap: only what it is made of changed,
+    // not which classes it carries.
+    const cap = one('kbd kbd');
+    expect(classesOf(cap)).toEqual(capClasses());
+  });
+
+  test('the inversion replaces exactly what a cap is made of', () => {
+    // Two declarations and no more: the film and the letters. A theme that also
+    // moved the height or the corner would be a second cap rather than the same
+    // one on another surface.
+    expect(Object.keys(kbd).filter((name) => !name.startsWith('__'))).toContain('background');
+    const inverted = classesFor(kbdOnInvertedTheme);
+    const palette = classesFor(kbdPaletteTheme);
+    // `createTheme` emits one class naming the group and one carrying the
+    // values, so two themes of one group share the first and differ in the
+    // second.
+    expect(inverted.filter((name) => palette.includes(name))).toHaveLength(1);
+  });
+
+  test('the colour tokens are re-declared under a forced palette', () => {
+    for (const className of classesFor(kbdPaletteTheme)) {
+      expect(forcedThemeClassNames('light')).toContain(className);
+    }
+  });
+
+  test('a caller className lands after the compiled classes', () => {
+    const html = renderToStaticMarkup(<Kbd className="ml-1.5">K</Kbd>);
+    const cls = /class="([^"]*)"/.exec(html)?.[1] ?? '';
+    expect(cls.endsWith(' ml-1.5')).toBe(true);
+  });
+});
diff --git a/packages/ui/test/menu.test.tsx b/packages/ui/test/menu.test.tsx
new file mode 100644
index 000000000..de2a867c7
--- /dev/null
+++ b/packages/ui/test/menu.test.tsx
@@ -0,0 +1,633 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState, type ComponentProps, type ReactNode } from 'react';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { ContextMenu } from '../src/menu/context-menu';
+import { Menu } from '../src/menu/menu';
+import { Menubar } from '../src/menu/menubar';
+import { PopupContainerProvider } from '../src/popup/portal-container';
+import { surface } from '../src/popup/surface';
+import { ThemeRoot, forcedThemeClassNames } from '../src/theme/theme';
+import { all, classesOf, click, hover, mount, one, press, step, type Mounted } from './dom';
+
+/**
+ * The classes StyleX compiled a style into, which is what lands on the node.
+ *
+ * `stylex.props` types its arguments against the style objects the compiler
+ * produced, and a variadic forward of them widens to `never`; the call is the
+ * same one the primitives make, so the signature is loosened here rather than
+ * every assertion repeating it.
+ */
+function classesFor(...styles: readonly unknown[]): string[] {
+  const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+  return (props(...styles).className ?? '').split(' ').filter(Boolean);
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+const trigger = () => one('button[aria-haspopup="menu"]');
+/** Base UI's Popup is the element carrying the menu role. */
+const popups = () => all('[role="menu"]');
+const popup = () => popups()[0];
+/**
+ * The rows of an open menu. Scoped to the popup on purpose: a menubar trigger
+ * is a `menuitem` of the bar, so an unscoped query would count the names on the
+ * bar among the commands in the menu one of them opened.
+ */
+const items = () => all('[role="menu"] [role="menuitem"]');
+const rows = (role: string) => all(`[role="menu"] [role="${role}"]`);
+const rowNamed = (label: string) => {
+  const row = all(
+    '[role="menu"] [role="menuitem"],[role="menu"] [role="menuitemcheckbox"],[role="menu"] [role="menuitemradio"]'
+  ).find((node) => node.textContent?.includes(label));
+  if (!row) throw new Error(`no row named ${label}`);
+  return row;
+};
+
+function Actions({
+  children,
+  ...rest
+}: { children?: ReactNode } & ComponentProps<typeof Menu.Root>) {
+  return (
+    <Menu.Root {...rest}>
+      <Menu.Trigger>Actions</Menu.Trigger>
+      <Menu.Content>{children}</Menu.Content>
+    </Menu.Root>
+  );
+}
+
+describe('Menu', () => {
+  test('is a button that announces the menu it opens, and opens it', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item>Rename</Menu.Item>
+        <Menu.Item>Duplicate</Menu.Item>
+      </Actions>
+    );
+    expect(trigger().tagName).toBe('BUTTON');
+    expect(trigger().getAttribute('aria-expanded')).toBe('false');
+    expect(popups()).toHaveLength(0);
+
+    await click(trigger());
+
+    expect(trigger().getAttribute('aria-expanded')).toBe('true');
+    expect(items().map((node) => node.textContent)).toEqual(['Rename', 'Duplicate']);
+  });
+
+  test('runs the row that is clicked and closes behind it', async () => {
+    const rename = vi.fn();
+    mounted = await mount(
+      <Actions>
+        <Menu.Item onClick={rename}>Rename</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+    await click(rowNamed('Rename'));
+
+    expect(rename).toHaveBeenCalledTimes(1);
+    expect(trigger().getAttribute('aria-expanded')).toBe('false');
+  });
+
+  test('opens onto its first row and walks down from there', async () => {
+    const duplicate = vi.fn();
+    mounted = await mount(
+      <Actions>
+        <Menu.Item>Rename</Menu.Item>
+        <Menu.Item onClick={duplicate}>Duplicate</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+    // The first row is already where the keyboard is, so one step reaches the
+    // second; a menu that opened onto nothing would need two.
+    expect(document.activeElement?.textContent).toBe('Rename');
+
+    await press('ArrowDown');
+    await press('Enter');
+
+    expect(duplicate).toHaveBeenCalledTimes(1);
+  });
+
+  test('a disabled row is neither reached by the keyboard nor run by a click', async () => {
+    const archive = vi.fn();
+    mounted = await mount(
+      <Actions>
+        <Menu.Item disabled onClick={archive}>
+          Archive
+        </Menu.Item>
+        <Menu.Item>Rename</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+
+    // The menu opens onto the first row the keyboard can reach, which is the
+    // one below the disabled one.
+    expect(document.activeElement?.textContent).toBe('Rename');
+
+    await click(rowNamed('Archive'));
+
+    expect(archive).not.toHaveBeenCalled();
+    expect(rowNamed('Archive').getAttribute('data-disabled')).toBe('');
+    expect(trigger().getAttribute('aria-expanded')).toBe('true');
+  });
+
+  test('the row the pointer is on is the row the keyboard is on', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item>Rename</Menu.Item>
+        <Menu.Item>Duplicate</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+    await hover(rowNamed('Duplicate'));
+
+    // Base UI moves DOM focus onto the highlighted row, which is the one fact
+    // the fill draws; there is no second hover state to disagree with it.
+    expect(rowNamed('Duplicate').getAttribute('data-highlighted')).toBe('');
+    expect(rowNamed('Rename').hasAttribute('data-highlighted')).toBe(false);
+    expect(document.activeElement).toBe(rowNamed('Duplicate'));
+  });
+
+  test('the highlight is a class the row gains, so the fill can follow it', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item>Rename</Menu.Item>
+        <Menu.Item>Duplicate</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+    const resting = classesOf(rowNamed('Duplicate'));
+    await hover(rowNamed('Duplicate'));
+
+    expect(classesOf(rowNamed('Duplicate')).filter((name) => !resting.includes(name))).toHaveLength(
+      1
+    );
+  });
+});
+
+describe('Menu row', () => {
+  test('a destructive row says so in its own colour, not only in its words', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item>Rename</Menu.Item>
+        <Menu.Item>Duplicate</Menu.Item>
+        <Menu.Item tone="destructive">Delete</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+    // Against the second row rather than the first: a menu opens onto its first
+    // row, so that one already carries the highlight.
+    const neutral = classesOf(rowNamed('Duplicate'));
+    const destructive = classesOf(rowNamed('Delete'));
+
+    expect(rowNamed('Delete').getAttribute('data-tone')).toBe('destructive');
+    // One class differs: the label colour. Everything else about the row — its
+    // height, its radius, its type — is the row every other command takes.
+    expect(destructive.filter((name) => !neutral.includes(name))).toHaveLength(1);
+  });
+
+  test('a destructive row takes a fill of its own where the keyboard is', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item tone="destructive">Delete</Menu.Item>
+        <Menu.Item>Rename</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+    await hover(rowNamed('Delete'));
+    const underDestructive = classesOf(rowNamed('Delete')).filter(
+      (name) => !classesFor(surface.item, surface.itemDestructive).includes(name)
+    );
+    await hover(rowNamed('Rename'));
+    const underNeutral = classesOf(rowNamed('Rename')).filter(
+      (name) => !classesFor(surface.item).includes(name)
+    );
+
+    // Both rows gain exactly one fill — StyleX keeps one class per property, so
+    // the destructive fill replaces the neutral one rather than stacking on it
+    // — and the two fills are different, so the highlight cannot say "an
+    // ordinary command" under a row that deletes something.
+    expect(underDestructive).toHaveLength(1);
+    expect(underNeutral).toHaveLength(1);
+    expect(underDestructive).not.toEqual(underNeutral);
+  });
+
+  test('the leading box is reserved on an inset row so a mixed list lines up', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item icon={<svg />}>Rename</Menu.Item>
+        <Menu.Item inset>Duplicate</Menu.Item>
+        <Menu.Item>Archive</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+
+    // A row with an icon opens with the box holding it; an inset row opens with
+    // the same box, empty and out of the accessibility tree; a plain row starts
+    // at its label.
+    expect(rowNamed('Rename').firstElementChild?.firstElementChild?.tagName).toBe('svg');
+    expect(rowNamed('Duplicate').firstElementChild?.getAttribute('aria-hidden')).toBe('true');
+    expect(rowNamed('Duplicate').firstElementChild?.childElementCount).toBe(0);
+    expect(rowNamed('Archive').firstElementChild?.textContent).toBe('Archive');
+  });
+
+  test('a shortcut sits after the label rather than inside it', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item shortcut="⌘R">Rename</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+    const row = rowNamed('Rename');
+
+    expect(row.firstElementChild?.textContent).toBe('Rename');
+    expect(row.lastElementChild?.textContent).toBe('⌘R');
+  });
+});
+
+describe('Menu checkbox and radio rows', () => {
+  test('a checkbox row announces its state and toggles without closing the menu', async () => {
+    function Toggles() {
+      const [notify, setNotify] = useState(false);
+      return (
+        <Actions>
+          <Menu.CheckboxItem checked={notify} onCheckedChange={setNotify}>
+            Notify me
+          </Menu.CheckboxItem>
+        </Actions>
+      );
+    }
+    mounted = await mount(<Toggles />);
+    await click(trigger());
+    const row = () => rows('menuitemcheckbox')[0];
+    expect(row().getAttribute('aria-checked')).toBe('false');
+
+    await click(row());
+
+    expect(row().getAttribute('aria-checked')).toBe('true');
+    // A setting is toggled, not chosen: the menu stays up so a second one can
+    // be toggled without reopening it.
+    expect(trigger().getAttribute('aria-expanded')).toBe('true');
+  });
+
+  test('a radio group holds one value and marks the row that has it', async () => {
+    function Sort() {
+      const [order, setOrder] = useState('recent');
+      return (
+        <Actions>
+          <Menu.RadioGroup value={order} onValueChange={setOrder}>
+            <Menu.GroupLabel>Sort by</Menu.GroupLabel>
+            <Menu.RadioItem value="recent">Recent</Menu.RadioItem>
+            <Menu.RadioItem value="name">Name</Menu.RadioItem>
+          </Menu.RadioGroup>
+        </Actions>
+      );
+    }
+    mounted = await mount(<Sort />);
+    await click(trigger());
+    const ticked = () => rows('menuitemradio').map((node) => node.getAttribute('aria-checked'));
+    expect(ticked()).toEqual(['true', 'false']);
+
+    await click(rowNamed('Name'));
+
+    expect(ticked()).toEqual(['false', 'true']);
+  });
+
+  test('the mark is the leading box, so the label cannot slide as the row toggles', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.CheckboxItem checked>Notify me</Menu.CheckboxItem>
+        <Menu.CheckboxItem>Mute</Menu.CheckboxItem>
+      </Actions>
+    );
+    await click(trigger());
+
+    // Base UI unmounts the tick while a row is unticked, so what has to stay is
+    // the box around it: both rows open with the same box, ticked or not, and
+    // both boxes carry the same classes.
+    const ticked = rowNamed('Notify me').firstElementChild as HTMLElement;
+    const unticked = rowNamed('Mute').firstElementChild as HTMLElement;
+    expect(classesOf(ticked)).toEqual(classesOf(unticked));
+    expect(ticked.childElementCount).toBe(1);
+    expect(unticked.childElementCount).toBe(0);
+  });
+});
+
+describe('Menu group', () => {
+  test('a heading names the group it is inside, and needs one to exist', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Group>
+          <Menu.GroupLabel>Session</Menu.GroupLabel>
+          <Menu.Item>Rename</Menu.Item>
+        </Menu.Group>
+      </Actions>
+    );
+    await click(trigger());
+    const group = one('[role="menu"] [role="group"]');
+
+    // The heading is the group's accessible name rather than a line of text
+    // above it, which is what makes it worth being a part at all.
+    expect(document.getElementById(group.getAttribute('aria-labelledby') ?? '')?.textContent).toBe(
+      'Session'
+    );
+  });
+
+  test('a heading outside a group is an error, not a silently plain label', async () => {
+    // Pinned because it is the migration trap: Radix's menu label rendered
+    // anywhere, so a caller that moves one across without wrapping it in a
+    // group gets this at runtime rather than a heading that labels nothing.
+    const quiet = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      await expect(
+        mount(
+          <Actions defaultOpen>
+            <Menu.GroupLabel>Session</Menu.GroupLabel>
+          </Actions>
+        )
+      ).rejects.toThrow();
+    } finally {
+      quiet.mockRestore();
+    }
+  });
+});
+
+describe('Menu submenu', () => {
+  test('a submenu trigger opens a second menu from the row it is on', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item>Rename</Menu.Item>
+        <Menu.Submenu>
+          <Menu.SubmenuTrigger>Export</Menu.SubmenuTrigger>
+          <Menu.Content>
+            <Menu.Item>PDF</Menu.Item>
+            <Menu.Item>PNG</Menu.Item>
+          </Menu.Content>
+        </Menu.Submenu>
+      </Actions>
+    );
+    await click(trigger());
+    expect(popups()).toHaveLength(1);
+
+    await press('ArrowDown');
+    await press('ArrowRight');
+
+    expect(popups()).toHaveLength(2);
+    expect(items().map((node) => node.textContent)).toContain('PDF');
+  });
+
+  test('the row that owns an open submenu keeps its fill', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Submenu>
+          <Menu.SubmenuTrigger>Export</Menu.SubmenuTrigger>
+          <Menu.Content>
+            <Menu.Item>PDF</Menu.Item>
+          </Menu.Content>
+        </Menu.Submenu>
+        <Menu.Submenu>
+          <Menu.SubmenuTrigger>Share</Menu.SubmenuTrigger>
+          <Menu.Content>
+            <Menu.Item>Link</Menu.Item>
+          </Menu.Content>
+        </Menu.Submenu>
+      </Actions>
+    );
+    await click(trigger());
+    await press('ArrowRight');
+
+    expect(rowNamed('Export').getAttribute('data-popup-open')).toBe('');
+    // The fill follows the open submenu rather than only the highlight, so the
+    // pointer crossing into that submenu does not leave the row it came from
+    // dark. It is stated separately from the highlight for that reason, even
+    // though the two resolve to the same fill.
+    expect(classesOf(rowNamed('Export'))).toEqual(
+      expect.arrayContaining(classesFor(surface.itemOpen))
+    );
+    // The row below it owns nothing and holds nothing: no fill.
+    expect(rowNamed('Share').hasAttribute('data-popup-open')).toBe(false);
+    expect(classesOf(rowNamed('Share'))).not.toEqual(
+      expect.arrayContaining(classesFor(surface.itemOpen))
+    );
+  });
+
+  test('a submenu trigger says there is more this way, and that it is closed', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Submenu>
+          <Menu.SubmenuTrigger>Export</Menu.SubmenuTrigger>
+          <Menu.Content>
+            <Menu.Item>PDF</Menu.Item>
+          </Menu.Content>
+        </Menu.Submenu>
+      </Actions>
+    );
+    await click(trigger());
+    const submenuTrigger = rowNamed('Export');
+
+    expect(submenuTrigger.getAttribute('aria-haspopup')).toBe('menu');
+    expect(submenuTrigger.getAttribute('aria-expanded')).toBe('false');
+    // The chevron is drawn by the part, so a caller never has to remember it,
+    // and it is hidden from a screen reader that has already been told.
+    expect(submenuTrigger.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true');
+  });
+});
+
+describe('Menu surface', () => {
+  test('a forced palette travels to the portalled menu', async () => {
+    mounted = await mount(
+      <ThemeRoot mode="dark">
+        <Actions>
+          <Menu.Item>Rename</Menu.Item>
+        </Actions>
+      </ThemeRoot>
+    );
+    await click(trigger());
+    // A menu is mounted outside the subtree that declares the palette, so the
+    // classes that declare it travel with it and land on the positioner, where
+    // they cascade into the popup and its rows.
+    const positioner = popup().parentElement as HTMLElement;
+    for (const className of forcedThemeClassNames('dark')) {
+      expect(classesOf(positioner)).toContain(className);
+    }
+  });
+
+  test('it mounts into the container a modal named, rather than the document', async () => {
+    function InPanel() {
+      const panel = useRef<HTMLDivElement>(null);
+      return (
+        <div ref={panel} data-panel>
+          <PopupContainerProvider container={panel}>
+            <Actions>
+              <Menu.Item>Rename</Menu.Item>
+            </Actions>
+          </PopupContainerProvider>
+        </div>
+      );
+    }
+    mounted = await mount(<InPanel />);
+    await click(trigger());
+
+    expect(popup().closest('[data-panel]')).not.toBeNull();
+    // A panel that centres itself with `translate` is the containing block for
+    // its `position: fixed` descendants, so the popup switches strategies with
+    // the container rather than landing at the panel's own offset.
+    expect((popup().parentElement as HTMLElement).style.position).toBe('absolute');
+  });
+
+  test('the menu and the list a Select opens are one surface, sized differently', async () => {
+    mounted = await mount(
+      <Actions>
+        <Menu.Item>Rename</Menu.Item>
+      </Actions>
+    );
+    await click(trigger());
+    const onSurface = classesOf(popup());
+    const asList = classesFor(surface.popup);
+
+    // Everything a list brings — the rung, the shadow, the radius, the inset,
+    // the type — reaches a menu too, and exactly one of a list's declarations
+    // is replaced: the `--anchor-width` it takes from the control it belongs
+    // to, which a menu has no equivalent of.
+    expect(asList.filter((name) => !onSurface.includes(name))).toHaveLength(1);
+    expect(onSurface).toEqual(expect.arrayContaining(classesFor(surface.popupMenu)));
+  });
+});
+
+describe('ContextMenu', () => {
+  test('opens on a right click over the area it was given', async () => {
+    mounted = await mount(
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <p>Session</p>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+          <ContextMenu.Item tone="destructive">Delete</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>
+    );
+    expect(popups()).toHaveLength(0);
+
+    await step(() => {
+      one('p').dispatchEvent(
+        new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 40, clientY: 20 })
+      );
+    });
+
+    expect(items().map((node) => node.textContent)).toEqual(['Rename', 'Delete']);
+  });
+
+  test('its rows are the rows of a dropdown, not a second set of them', async () => {
+    mounted = await mount(
+      <>
+        <ContextMenu.Root>
+          <ContextMenu.Trigger>
+            <p>Session</p>
+          </ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.Item>Duplicate</ContextMenu.Item>
+            <ContextMenu.Item>Rename</ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Root>
+        <Actions>
+          <Menu.Item>Duplicate</Menu.Item>
+          <Menu.Item>Rename</Menu.Item>
+        </Actions>
+      </>
+    );
+    await step(() => {
+      one('p').dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }));
+    });
+    // The second row in each, because a menu opens onto its first one and a
+    // highlighted row is answering a different question.
+    const fromRightClick = classesOf(rowNamed('Rename'));
+    await press('Escape');
+    await click(trigger());
+    const fromButton = classesOf(rowNamed('Rename'));
+
+    // Both are the one row this package defines, so neither can drift into a
+    // second appearance for the same command.
+    expect(fromRightClick).toEqual(fromButton);
+    expect(fromButton).toEqual(expect.arrayContaining(classesFor(surface.item)));
+  });
+
+  test('the area it watches adds no box to the layout it was dropped into', async () => {
+    mounted = await mount(
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <p>Session</p>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item>Rename</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>
+    );
+    const wrapper = one('p').parentElement as HTMLElement;
+
+    // A context menu attaches to what the surface already laid out, so its
+    // wrapper takes no box: a wrapper with a layout of its own would change
+    // that layout just by being asked for a menu. StyleX compiles a declaration
+    // to one class per property and value, so the class a `display: contents`
+    // written here compiles to is the class the wrapper must be carrying.
+    expect(classesOf(wrapper)).toEqual(expect.arrayContaining(classesFor(reference.contents)));
+  });
+});
+
+/** Written out so a test asserts the declaration rather than the primitive's own constant. */
+const reference = stylex.create({ contents: { display: 'contents' } });
+
+describe('Menubar', () => {
+  function Bar() {
+    return (
+      <Menubar.Root>
+        <Menubar.Menu>
+          <Menubar.Trigger>File</Menubar.Trigger>
+          <Menubar.Content>
+            <Menubar.Item>New</Menubar.Item>
+          </Menubar.Content>
+        </Menubar.Menu>
+        <Menubar.Menu>
+          <Menubar.Trigger>Edit</Menubar.Trigger>
+          <Menubar.Content>
+            <Menubar.Item>Undo</Menubar.Item>
+          </Menubar.Content>
+        </Menubar.Menu>
+      </Menubar.Root>
+    );
+  }
+
+  const names = () => all('[role="menubar"] button[aria-haspopup="menu"]');
+
+  test('is a bar of names, each opening its own menu', async () => {
+    mounted = await mount(<Bar />);
+    expect(names().map((node) => node.textContent)).toEqual(['File', 'Edit']);
+
+    await click(names()[1]);
+
+    expect(items().map((node) => node.textContent)).toEqual(['Undo']);
+  });
+
+  test('the name holding the open menu keeps the fill a row takes', async () => {
+    mounted = await mount(<Bar />);
+    const file = names()[0];
+    const closed = classesOf(file);
+
+    await click(file);
+
+    expect(file.getAttribute('aria-expanded')).toBe('true');
+    expect(classesOf(file).filter((name) => !closed.includes(name))).toHaveLength(1);
+  });
+
+  test('with a menu open the arrows walk the bar rather than the rows', async () => {
+    mounted = await mount(<Bar />);
+    await click(names()[0]);
+    expect(items().map((node) => node.textContent)).toEqual(['New']);
+
+    await press('ArrowRight');
+
+    expect(items().map((node) => node.textContent)).toEqual(['Undo']);
+  });
+});
diff --git a/packages/ui/test/popover.test.tsx b/packages/ui/test/popover.test.tsx
new file mode 100644
index 000000000..2ad298b91
--- /dev/null
+++ b/packages/ui/test/popover.test.tsx
@@ -0,0 +1,165 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { Button } from '../src/button/button';
+import { Popover } from '../src/popover/popover';
+import { PopupContainerProvider } from '../src/popup/portal-container';
+import { surface } from '../src/popup/surface';
+import { ThemeRoot, forcedThemeClassNames } from '../src/theme/theme';
+import { all, classesOf, click, mount, one, press, type Mounted } from './dom';
+
+/** See `menu.test.tsx`: the same loosened call the primitives make. */
+function classesFor(...styles: readonly unknown[]): string[] {
+  const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+  return (props(...styles).className ?? '').split(' ').filter(Boolean);
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+const trigger = () => one('button[aria-haspopup="dialog"]');
+const panels = () => all('[role="dialog"]');
+const panel = () => panels()[0];
+
+describe('Popover', () => {
+  test('is a button that announces the surface it opens, and opens it', async () => {
+    mounted = await mount(
+      <Popover.Root>
+        <Popover.Trigger>Filter</Popover.Trigger>
+        <Popover.Content>
+          <Popover.Title>Filter sessions</Popover.Title>
+        </Popover.Content>
+      </Popover.Root>
+    );
+    expect(trigger().tagName).toBe('BUTTON');
+    expect(trigger().getAttribute('aria-expanded')).toBe('false');
+    expect(panels()).toHaveLength(0);
+
+    await click(trigger());
+
+    expect(trigger().getAttribute('aria-expanded')).toBe('true');
+    expect(panel().textContent).toContain('Filter sessions');
+  });
+
+  test('a title names the surface rather than being read out as its contents', async () => {
+    mounted = await mount(
+      <Popover.Root defaultOpen>
+        <Popover.Trigger>Filter</Popover.Trigger>
+        <Popover.Content>
+          <Popover.Header>
+            <Popover.Title>Filter sessions</Popover.Title>
+            <Popover.Description>Applies to the list under it.</Popover.Description>
+          </Popover.Header>
+        </Popover.Content>
+      </Popover.Root>
+    );
+    const labelledBy = panel().getAttribute('aria-labelledby');
+    const describedBy = panel().getAttribute('aria-describedby');
+    expect(labelledBy).toBeTruthy();
+    expect(describedBy).toBeTruthy();
+    expect(document.getElementById(labelledBy ?? '')?.textContent).toBe('Filter sessions');
+    expect(document.getElementById(describedBy ?? '')?.textContent).toBe(
+      'Applies to the list under it.'
+    );
+  });
+
+  test('Escape closes it and the trigger says so again', async () => {
+    mounted = await mount(
+      <Popover.Root>
+        <Popover.Trigger>Filter</Popover.Trigger>
+        <Popover.Content>
+          <Popover.Title>Filter sessions</Popover.Title>
+        </Popover.Content>
+      </Popover.Root>
+    );
+    await click(trigger());
+    expect(trigger().getAttribute('aria-expanded')).toBe('true');
+
+    await press('Escape');
+
+    expect(trigger().getAttribute('aria-expanded')).toBe('false');
+  });
+
+  test('Close runs its own handler and takes the surface down with it', async () => {
+    const apply = vi.fn();
+    mounted = await mount(
+      <Popover.Root>
+        <Popover.Trigger>Filter</Popover.Trigger>
+        <Popover.Content>
+          <Popover.Close render={<Button />} onClick={apply}>
+            Apply
+          </Popover.Close>
+        </Popover.Content>
+      </Popover.Root>
+    );
+    await click(trigger());
+    const apply_ = all('[role="dialog"] button').find((node) =>
+      node.textContent?.includes('Apply')
+    );
+    await click(apply_ as HTMLElement);
+
+    expect(apply).toHaveBeenCalledTimes(1);
+    expect(trigger().getAttribute('aria-expanded')).toBe('false');
+  });
+
+  test('is the list surface with five declarations replaced, and no more', () => {
+    // The claim the token rules make about a popover, pinned as a count. Of the
+    // classes a list's surface compiles to, exactly five are gone from a
+    // popover's: the width it takes from the control that shows its value, the
+    // 4px inset that lets a row bleed to the surface's edge, and the three that
+    // make the type a control's — size, weight and tracking — because what a
+    // popover holds is prose rather than the labels of commands. A sixth would
+    // mean a second floating surface had started to grow beside the one every
+    // other popup in this package shares.
+    const list = classesFor(surface.popup);
+    const popover = classesFor(surface.popup, surface.popupPanel);
+    const replaced = list.filter((className) => !popover.includes(className));
+    expect(replaced).toHaveLength(5);
+  });
+
+  test('mounts into the container a modal named, not on the body', async () => {
+    function Host() {
+      const [host, setHost] = useState<HTMLDivElement | null>(null);
+      return (
+        <div ref={setHost} data-host="">
+          <PopupContainerProvider container={host}>
+            <Popover.Root defaultOpen>
+              <Popover.Trigger>Filter</Popover.Trigger>
+              <Popover.Content>
+                <Popover.Title>Filter sessions</Popover.Title>
+              </Popover.Content>
+            </Popover.Root>
+          </PopupContainerProvider>
+        </div>
+      );
+    }
+    mounted = await mount(<Host />);
+    // A modal traps focus and locks the scroll by DOM position, so a popover
+    // portalled to the body is outside the panel that opened it. Naming the
+    // panel puts it back inside the subtree the modal is guarding.
+    expect(panel().closest('[data-host]')).not.toBeNull();
+  });
+
+  test('carries a forced palette across the portal', async () => {
+    mounted = await mount(
+      <ThemeRoot mode="dark">
+        <Popover.Root defaultOpen>
+          <Popover.Trigger>Filter</Popover.Trigger>
+          <Popover.Content>
+            <Popover.Title>Filter sessions</Popover.Title>
+          </Popover.Content>
+        </Popover.Root>
+      </ThemeRoot>
+    );
+    // The panel is portalled out of the subtree declaring the palette, so the
+    // classes that declare it travel with it and land on the positioner above.
+    const positioner = panel().parentElement;
+    expect(positioner).not.toBeNull();
+    for (const className of forcedThemeClassNames('dark')) {
+      expect(classesOf(positioner as Element)).toContain(className);
+    }
+  });
+});
diff --git a/packages/ui/test/select.test.tsx b/packages/ui/test/select.test.tsx
new file mode 100644
index 000000000..753990d94
--- /dev/null
+++ b/packages/ui/test/select.test.tsx
@@ -0,0 +1,404 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { useRef, useState } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, expect, test } from 'vitest';
+import { Field } from '../src/field/field';
+import { Input } from '../src/field/input';
+import { Select } from '../src/field/select';
+import { PopupContainerProvider } from '../src/popup/portal-container';
+import { ThemeRoot, forcedThemeClassNames } from '../src/theme/theme';
+import { all, classesOf, click, mount, one, press, until, type Mounted } from './dom';
+
+const FRUIT = [
+  { value: 'gala', label: 'Gala' },
+  { value: 'fuji', label: 'Fuji' },
+  { value: 'pink', label: 'Pink Lady' },
+];
+
+function Fruit({
+  children,
+  ...rest
+}: { children?: ReactNode } & ComponentProps<typeof Select.Root<string>>) {
+  return (
+    <Select.Root items={FRUIT} {...rest}>
+      <Select.Trigger>
+        <Select.Value placeholder="Pick a fruit" />
+      </Select.Trigger>
+      <Select.Content>
+        {FRUIT.map((item) => (
+          <Select.Item key={item.value} value={item.value}>
+            {item.label}
+          </Select.Item>
+        ))}
+        {children}
+      </Select.Content>
+    </Select.Root>
+  );
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+/** What the invalid ring adds to a text control, derived rather than written down. */
+const RING_CLASSES = (() => {
+  const strip = (html: string) =>
+    (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ').filter(Boolean);
+  const valid = strip(renderToStaticMarkup(<Input />));
+  const invalid = strip(renderToStaticMarkup(<Input aria-invalid="true" />));
+  return invalid.filter((name) => !valid.includes(name));
+})();
+
+const trigger = () => one('button[role="combobox"]');
+/**
+ * Whether the list is open. A Select keeps its list mounted once it has been
+ * opened and hides the closed one, so this reads what the trigger announces —
+ * which is also what a screen reader is told.
+ */
+const isOpen = () => trigger().getAttribute('aria-expanded') === 'true';
+const options = () => all('[role="listbox"] [role="option"]');
+/** Base UI's Popup is the box the listbox sits in. */
+const popup = () => one('[role="listbox"]').parentElement as HTMLElement;
+
+describe('Select trigger', () => {
+  test('is a real button that announces the list it opens', async () => {
+    mounted = await mount(<Fruit name="fruit" />);
+    expect(trigger().tagName).toBe('BUTTON');
+    expect(trigger().getAttribute('aria-haspopup')).toBe('listbox');
+    expect(isOpen()).toBe(false);
+    // The value goes into a form under the name the caller gave, so a select is
+    // submittable without the surface tracking it separately.
+    expect(mounted.container.querySelector('input[name="fruit"]')).not.toBeNull();
+  });
+
+  test('shows the placeholder until the select holds a value, and the value after', async () => {
+    mounted = await mount(<Fruit name="fruit" />);
+    expect(trigger().hasAttribute('data-placeholder')).toBe(true);
+    expect(trigger().textContent).toContain('Pick a fruit');
+
+    await click(trigger());
+    await click(options()[1]);
+
+    expect(trigger().hasAttribute('data-placeholder')).toBe(false);
+    expect(trigger().textContent).toContain('Fuji');
+    expect(one('input[name="fruit"]').getAttribute('value')).toBe('fuji');
+  });
+
+  test('the empty prompt is drawn in the placeholder colour, not the value colour', async () => {
+    mounted = await mount(<Fruit />);
+    const empty = classesOf(one('button[role="combobox"] > span'));
+    await click(trigger());
+    await click(options()[0]);
+    const filled = classesOf(one('button[role="combobox"] > span'));
+    // Exactly one class swaps in and none out: the hint colour, and nothing
+    // else about the value changes with it.
+    expect(empty.filter((name) => !filled.includes(name))).toHaveLength(1);
+    expect(filled.filter((name) => !empty.includes(name))).toHaveLength(0);
+  });
+
+  test('shows the label of the row it holds, which it reads from the root items', async () => {
+    mounted = await mount(<Fruit defaultValue="pink" />);
+    // The rows carry the labels a person reads, but the trigger resolves its
+    // own text from `Select.Root items` — so a caller whose row text differs
+    // from its value must state the list there as well.
+    expect(trigger().textContent).toContain('Pink Lady');
+  });
+
+  test('without items it can only show the raw value', async () => {
+    mounted = await mount(
+      <Select.Root defaultValue="pink">
+        <Select.Trigger>
+          <Select.Value placeholder="Pick a fruit" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="pink">Pink Lady</Select.Item>
+        </Select.Content>
+      </Select.Root>
+    );
+    // Pinned because it is the trap: this is what a migrated caller gets if it
+    // drops `items`, and it is quiet — the control still works, it just names
+    // the value instead of the row.
+    expect(trigger().textContent).toContain('pink');
+    expect(trigger().textContent).not.toContain('Pink Lady');
+  });
+
+  test('wears the same invalid ring a text control does', async () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    mounted = await mount(
+      <Field.Root invalid>
+        <Fruit />
+      </Field.Root>
+    );
+    expect(trigger().getAttribute('aria-invalid')).toBe('true');
+    expect(RING_CLASSES.every((name) => classesOf(trigger()).includes(name))).toBe(true);
+  });
+
+  test('a disabled field reaches the trigger and the list stays shut', async () => {
+    mounted = await mount(
+      <Field.Root disabled>
+        <Fruit />
+      </Field.Root>
+    );
+    // A native button takes the disabled attribute, so the same `:disabled`
+    // rule that dims an Input dims this without a second mechanism.
+    expect((trigger() as HTMLButtonElement).disabled).toBe(true);
+    await click(trigger());
+    expect(isOpen()).toBe(false);
+  });
+
+  test('the label points at the trigger without the caller naming an id', async () => {
+    mounted = await mount(
+      <Field.Root name="fruit">
+        <Field.Label>Fruit</Field.Label>
+        <Fruit />
+      </Field.Root>
+    );
+    expect(one('label').getAttribute('for')).toBe(trigger().getAttribute('id'));
+  });
+
+  test('a caller className lands after the compiled classes', async () => {
+    mounted = await mount(
+      <Select.Root>
+        <Select.Trigger className="w-full">
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content />
+      </Select.Root>
+    );
+    const classes = classesOf(trigger());
+    expect(classes[classes.length - 1]).toBe('w-full');
+    expect(classes.length).toBeGreaterThan(5);
+  });
+});
+
+describe('Select list', () => {
+  test('opens on click and closes on Escape without changing the value', async () => {
+    mounted = await mount(<Fruit defaultValue="gala" />);
+    await click(trigger());
+    expect(isOpen()).toBe(true);
+    expect(options()).toHaveLength(3);
+
+    await press('Escape');
+    expect(isOpen()).toBe(false);
+    // The rows go with it: the closed list is hidden, so nothing in it is on
+    // screen or in the accessibility tree.
+    expect(options()).toHaveLength(0);
+    expect(trigger().textContent).toContain('Gala');
+    // Escape hands focus back, so the keyboard is not stranded on a gone popup.
+    expect(document.activeElement).toBe(trigger());
+  });
+
+  test('the row that holds the value is the one marked selected and ticked', async () => {
+    mounted = await mount(<Fruit defaultValue="fuji" />);
+    await click(trigger());
+    const rows = options();
+    expect(rows.map((row) => row.getAttribute('aria-selected'))).toEqual([
+      'false',
+      'true',
+      'false',
+    ]);
+    // The tick box is reserved on every row so the list cannot reflow as the
+    // selection moves; only the selected row draws the glyph in it.
+    expect(rows.filter((row) => row.querySelector('svg'))).toHaveLength(1);
+    expect(rows[1].querySelector('svg')).not.toBeNull();
+  });
+
+  test('the arrow keys walk the list and Enter takes the highlighted row', async () => {
+    mounted = await mount(<Fruit defaultValue="gala" />);
+    await click(trigger());
+    expect(options().map((row) => row.hasAttribute('data-highlighted'))).toEqual([
+      true,
+      false,
+      false,
+    ]);
+
+    await press('ArrowDown');
+    expect(options().map((row) => row.hasAttribute('data-highlighted'))).toEqual([
+      false,
+      true,
+      false,
+    ]);
+
+    await press('Enter');
+    expect(isOpen()).toBe(false);
+    expect(trigger().textContent).toContain('Fuji');
+  });
+
+  test('End walks to the last row and Home back to the first', async () => {
+    mounted = await mount(<Fruit defaultValue="gala" />);
+    await click(trigger());
+    // The keys are only meaningful once the list has taken the keyboard, and
+    // the highlight is what says it has: moving focus off a row clears every
+    // mark, which is exactly what a key arriving a beat early would find.
+    const highlighted = () => options().findIndex((row) => row.hasAttribute('data-highlighted'));
+    await until(() => highlighted() === 0, 'the list to take the keyboard on its first row');
+
+    await press('End');
+    await until(() => highlighted() === 2, 'End to walk to the last row');
+    expect(options()[2].hasAttribute('data-highlighted')).toBe(true);
+
+    await press('Home');
+    await until(() => highlighted() === 0, 'Home to walk back to the first row');
+    expect(options()[0].hasAttribute('data-highlighted')).toBe(true);
+  });
+
+  test('a disabled row is dimmed and cannot be picked', async () => {
+    mounted = await mount(
+      <Fruit>
+        <Select.Item value="sold-out" disabled>
+          Sold out
+        </Select.Item>
+      </Fruit>
+    );
+    await click(trigger());
+    const row = options()[3];
+    expect(row.hasAttribute('data-disabled')).toBe(true);
+    // `:disabled` cannot reach a row, so the family's one disabled value is
+    // applied from Base UI's state: the opacity and the dropped pointer, and
+    // nothing else, against a row that is neither selected nor highlighted.
+    const enabled = classesOf(options()[1]);
+    expect(classesOf(row).filter((name) => !enabled.includes(name))).toHaveLength(2);
+
+    await click(row);
+    expect(trigger().textContent).toContain('Pick a fruit');
+  });
+
+  test('the highlight wins the fill from the selected row rather than stacking on it', async () => {
+    mounted = await mount(<Fruit defaultValue="gala" />);
+    await click(trigger());
+    // On open row 0 is both selected and highlighted; after one step down, row 0
+    // is selected only and row 1 highlighted only.
+    const both = classesOf(options()[0]);
+    await press('ArrowDown');
+    const selectedOnly = classesOf(options()[0]);
+    const highlightedOnly = classesOf(options()[1]);
+    const selectedFill = selectedOnly.filter((name) => !highlightedOnly.includes(name));
+    const highlightFill = highlightedOnly.filter((name) => !selectedOnly.includes(name));
+    expect(selectedFill).toHaveLength(1);
+    expect(highlightFill).toHaveLength(1);
+    // Both fills are the same CSS property, so StyleX resolves them to one
+    // class: a row that is both wears the highlight and not the selected fill.
+    expect(both).toContain(highlightFill[0]);
+    expect(both).not.toContain(selectedFill[0]);
+  });
+
+  test('a caller className lands on the popup after the compiled classes', async () => {
+    mounted = await mount(
+      <Select.Root>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content className="max-h-40">
+          <Select.Item value="a">Alpha</Select.Item>
+        </Select.Content>
+      </Select.Root>
+    );
+    await click(trigger());
+    const classes = classesOf(popup());
+    expect(classes[classes.length - 1]).toBe('max-h-40');
+    expect(classes.length).toBeGreaterThan(5);
+  });
+
+  test('a group names the rows under it and a separator divides them', async () => {
+    mounted = await mount(
+      <Select.Root>
+        <Select.Trigger>
+          <Select.Value placeholder="Pick" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Group>
+            <Select.GroupLabel>Apples</Select.GroupLabel>
+            <Select.Item value="gala">Gala</Select.Item>
+          </Select.Group>
+          <Select.Separator />
+          <Select.Group>
+            <Select.GroupLabel>Pears</Select.GroupLabel>
+            <Select.Item value="bosc">Bosc</Select.Item>
+          </Select.Group>
+        </Select.Content>
+      </Select.Root>
+    );
+    await click(trigger());
+    const groups = all('[role="group"]');
+    expect(groups).toHaveLength(2);
+    // The heading is the group's accessible name rather than a row above it.
+    expect(groups[0].getAttribute('aria-labelledby')).toBe(
+      groups[0].querySelector('[id]')?.getAttribute('id')
+    );
+    // A separator inside a listbox is decorative, so Base UI gives it
+    // `role="presentation"` rather than announcing it as a landmark.
+    expect(all('[role="listbox"] > [role="presentation"]')).toHaveLength(1);
+  });
+});
+
+describe('the palette a portalled popup uses', () => {
+  const positioner = () => one('[role="listbox"]').parentElement?.parentElement as HTMLElement;
+
+  test('follows the forced palette of the subtree the trigger is in', async () => {
+    mounted = await mount(
+      <ThemeRoot mode="dark">
+        <Fruit />
+      </ThemeRoot>
+    );
+    await click(trigger());
+    // A forced theme works by cascade and a popup is portalled out of the
+    // subtree that declares it, so without this a dark panel on a light page
+    // opens a light list. The classes travel to the element it mounts on.
+    const dark = forcedThemeClassNames('dark');
+    expect(dark.length).toBeGreaterThan(0);
+    expect(classesOf(positioner())).toEqual(expect.arrayContaining(dark));
+
+    const lightOnly = forcedThemeClassNames('light').filter((name) => !dark.includes(name));
+    expect(lightOnly.length).toBeGreaterThan(0);
+    for (const name of lightOnly) {
+      expect(classesOf(positioner())).not.toContain(name);
+    }
+  });
+
+  test('carries nothing when nothing is forced, so the document palette wins', async () => {
+    mounted = await mount(<Fruit />);
+    await click(trigger());
+    const forced = [...forcedThemeClassNames('light'), ...forcedThemeClassNames('dark')];
+    for (const name of forced) {
+      expect(classesOf(positioner())).not.toContain(name);
+    }
+  });
+});
+
+describe('where the popup mounts', () => {
+  function Hosted() {
+    const [host, setHost] = useState<HTMLDivElement | null>(null);
+    const ref = useRef<HTMLDivElement>(null);
+    return (
+      <div>
+        <div data-host="" ref={ref} />
+        <PopupContainerProvider container={host}>
+          <Fruit />
+        </PopupContainerProvider>
+        <button
+          type="button"
+          data-adopt=""
+          onClick={() => {
+            setHost(ref.current);
+          }}
+        />
+      </div>
+    );
+  }
+
+  test('defaults to the document and follows the nearest container when one is stated', async () => {
+    mounted = await mount(<Hosted />);
+    await click(trigger());
+    expect(one('[data-host=""]').querySelector('[role="option"]')).toBeNull();
+    await press('Escape');
+
+    await click(one('[data-adopt=""]'));
+    await click(trigger());
+    // A modal that owns its own focus scope and scroll lock treats a popup
+    // mounted outside its subtree as outside; naming the container puts the
+    // list back inside it.
+    expect(one('[data-host=""]').querySelector('[role="option"]')).not.toBeNull();
+  });
+});
diff --git a/packages/ui/test/separator.test.tsx b/packages/ui/test/separator.test.tsx
new file mode 100644
index 000000000..d95a6975a
--- /dev/null
+++ b/packages/ui/test/separator.test.tsx
@@ -0,0 +1,39 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Separator } from '../src/separator/separator';
+
+function classesAt(html: string): string[] {
+  return (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ').filter(Boolean);
+}
+
+describe('Separator', () => {
+  test('it says what it is, in the orientation it is in', () => {
+    // The old Radix wrapper defaulted to `decorative`, which is `role="none"`,
+    // because it was used for decoration. In this system a line is never
+    // decoration: the one place it is allowed — between the rows of a list or a
+    // table — is structural, so it is announced rather than hidden.
+    const html = renderToStaticMarkup(<Separator />);
+    expect(html).toContain('role="separator"');
+    expect(html).toContain('aria-orientation="horizontal"');
+    expect(renderToStaticMarkup(<Separator orientation="vertical" />)).toContain(
+      'aria-orientation="vertical"'
+    );
+  });
+
+  test('the two orientations are two lines, sharing everything but the axis', () => {
+    const horizontal = classesAt(renderToStaticMarkup(<Separator />));
+    const vertical = classesAt(renderToStaticMarkup(<Separator orientation="vertical" />));
+    expect(horizontal).not.toEqual(vertical);
+    const shared = horizontal.filter((name) => vertical.includes(name));
+    // The colour and the hairline are one decision; only the width and the
+    // height differ, and a vertical line stretches to its row rather than
+    // taking a percentage of a height the row has not got.
+    expect(shared.length).toBe(horizontal.length - 2);
+  });
+
+  test('a caller className lands after the compiled classes', () => {
+    const html = renderToStaticMarkup(<Separator className="my-2" />);
+    const cls = /class="([^"]*)"/.exec(html)?.[1] ?? '';
+    expect(cls.endsWith(' my-2')).toBe(true);
+  });
+});
diff --git a/packages/ui/test/table.test.tsx b/packages/ui/test/table.test.tsx
new file mode 100644
index 000000000..b71d00fa8
--- /dev/null
+++ b/packages/ui/test/table.test.tsx
@@ -0,0 +1,471 @@
+import * as stylex from '@stylexjs/stylex';
+import { afterEach, describe, expect, test } from 'vitest';
+import { Pagination, pageWindow } from '../src/table/pagination';
+import { tableSurface as surface } from '../src/table/surface';
+import { Table, type TableColumn, type TableSorting } from '../src/table/table';
+import { all, classesOf, click, mount, one, press, step, typeInto, type Mounted } from './dom';
+
+/** See `menu.test.tsx`: the same loosened call the primitives make. */
+function classesFor(...styles: readonly unknown[]): string[] {
+  const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+  return (props(...styles).className ?? '').split(' ').filter(Boolean);
+}
+
+function carries(element: Element, ...styles: readonly unknown[]): boolean {
+  const classes = classesOf(element);
+  return classesFor(...styles).every((name) => classes.includes(name));
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+interface Session {
+  id: string;
+  name: string;
+  agent: string;
+  turns: number;
+}
+
+const SESSIONS: Session[] = [
+  { id: 'a', name: 'Worktree setup', agent: 'Claude', turns: 12 },
+  { id: 'b', name: 'Review the diff', agent: 'Codex', turns: 4 },
+  { id: 'c', name: 'Rename the package', agent: 'Claude', turns: 31 },
+];
+
+const COLUMNS: TableColumn<Session>[] = [
+  { key: 'name', header: 'Session', cell: (row) => row.name, width: 220 },
+  { key: 'agent', header: 'Agent', cell: (row) => row.agent },
+  { key: 'turns', header: 'Turns', cell: (row) => row.turns, numeric: true, sortable: true },
+];
+
+const key = (row: Session) => row.id;
+
+describe('Table', () => {
+  test('states each column once, so a head and a row cannot drift', async () => {
+    // The whole of the design: a column is one object, and the name in the head
+    // and the cell under it are two readings of it. The two surfaces in this
+    // repository that draw a table today write their column template twice, by
+    // hand, and one of them writes every cell a second time.
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} />);
+    const headers = all('th').map((cell) => cell.textContent);
+    expect(headers).toEqual(['Session', 'Agent', 'Turns']);
+    for (const row of all('tbody tr')) {
+      expect(row.querySelectorAll('td')).toHaveLength(COLUMNS.length);
+    }
+    // A width is stated on a `<col>`, so the name and every cell under it take
+    // it from one place — the cells being ones the caller never writes.
+    expect(all('col')).toHaveLength(COLUMNS.length);
+    expect(one('col').getAttribute('style')).toContain('220px');
+  });
+
+  test('is ordered by one column at a time, and never reorders the rows itself', async () => {
+    const taken: TableSorting[] = [];
+    const sort: TableSorting = { column: 'turns', direction: 'ascending' };
+    mounted = await mount(
+      <Table
+        columns={[...COLUMNS, { key: 'age', header: 'Age', cell: () => '2d', sortable: true }]}
+        rows={SESSIONS}
+        rowKey={key}
+        sort={sort}
+        onSortChange={(next) => taken.push(next)}
+        // Stacking is what puts a column's name inside its own cells; this test
+        // is about the order of the rows, so it reads them as plain columns.
+        stack={false}
+      />
+    );
+    const [name, agent, turns, age] = all('th');
+    // A column with no way to take it says nothing about sorting at all; a
+    // sortable one states the direction where a screen reader reads it, and
+    // only one column can be the one wearing the arrow.
+    expect(name.hasAttribute('aria-sort')).toBe(false);
+    expect(agent.hasAttribute('aria-sort')).toBe(false);
+    expect(turns.getAttribute('aria-sort')).toBe('ascending');
+    expect(age.getAttribute('aria-sort')).toBe('none');
+    expect(turns.querySelector('svg')).not.toBeNull();
+    expect(age.querySelector('svg')).toBeNull();
+
+    // Taking the column that is already taken turns it over; taking a new one
+    // starts ascending, because a person sorting by a name means A first.
+    await click(turns.querySelector('button')!);
+    await click(age.querySelector('button')!);
+    expect(taken).toEqual([
+      { column: 'turns', direction: 'descending' },
+      { column: 'age', direction: 'ascending' },
+    ]);
+
+    // The rows are the surface's: a server sorts, a comparator breaks ties, a
+    // page is one slice of many. The table owns the control, not the data.
+    expect(all('tbody tr').map((row) => row.querySelector('td')?.textContent)).toEqual([
+      'Worktree setup',
+      'Review the diff',
+      'Rename the package',
+    ]);
+  });
+
+  test('derives the box that takes every row, mixed state and all', async () => {
+    const taken: string[][] = [];
+    const render = (selected: string[]) => (
+      <Table
+        columns={COLUMNS}
+        rows={SESSIONS}
+        rowKey={key}
+        selected={selected}
+        onSelectedChange={(next) => taken.push(next)}
+        rowLabel={(row) => `Select ${row.name}`}
+      />
+    );
+
+    mounted = await mount(render([]));
+    const head = () => one('thead [role="checkbox"]');
+    expect(head().getAttribute('aria-checked')).toBe('false');
+    // A table that lets a person pick rows puts a box in one, because that is
+    // both what they press and what a screen reader is told about.
+    expect(all('tbody [role="checkbox"]')).toHaveLength(3);
+    expect(all('tbody [role="checkbox"]')[0].getAttribute('aria-label')).toBe(
+      'Select Worktree setup'
+    );
+    await click(head());
+    expect(taken).toEqual([['a', 'b', 'c']]);
+    await mounted.unmount();
+
+    mounted = await mount(render(['b']));
+    // Some, not all: the head says mixed rather than picking a side.
+    expect(head().getAttribute('aria-checked')).toBe('mixed');
+    expect(carries(all('tbody tr')[1], surface.selectedRow)).toBe(true);
+    expect(carries(all('tbody tr')[0], surface.selectedRow)).toBe(false);
+    await mounted.unmount();
+
+    mounted = await mount(render(['a', 'b', 'c']));
+    expect(head().getAttribute('aria-checked')).toBe('true');
+    await click(head());
+    // All of them held, so pressing it clears them.
+    expect(taken.at(-1)).toEqual([]);
+  });
+
+  test('a selection reaching past the rows on screen survives a select-all', async () => {
+    // The box in the head answers for the rows it is showing. A table holding
+    // one page of a long selection must not drop the pages already taken.
+    const taken: string[][] = [];
+    mounted = await mount(
+      <Table
+        columns={COLUMNS}
+        rows={SESSIONS.slice(0, 2)}
+        rowKey={key}
+        selected={['z']}
+        onSelectedChange={(next) => taken.push(next)}
+      />
+    );
+    await click(one('thead [role="checkbox"]'));
+    expect(taken).toEqual([['z', 'a', 'b']]);
+  });
+
+  test('says there is nothing across every column, and keeps the names', async () => {
+    mounted = await mount(
+      <Table
+        columns={COLUMNS}
+        rows={[]}
+        rowKey={key}
+        selected={[]}
+        onSelectedChange={() => {}}
+        empty="No sessions yet"
+      />
+    );
+    // Only the table knows how many columns to cross, and the selection column
+    // is one of them. The head stays, so a person can read what was coming.
+    expect(one('tbody td').getAttribute('colspan')).toBe('4');
+    expect(one('tbody td').textContent).toBe('No sessions yet');
+    expect(all('th')).toHaveLength(3);
+  });
+
+  test('a head stays only where the table owns a box to stay in', async () => {
+    // A head that scrolls out of its own box is not a thing a surface asks for,
+    // so the height and the sticky head are one decision rather than two props.
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} />);
+    expect(carries(one('thead'), surface.headSticky)).toBe(false);
+    await mounted.unmount();
+
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} maxHeight={240} />);
+    expect(carries(one('thead'), surface.headSticky)).toBe(true);
+    // A head that stays is a band over the rows, so it takes a rung: without a
+    // fill the records are painted through the column names.
+    expect(carries(one('thead tr'), surface.headStickyRow)).toBe(true);
+    expect(one('table').parentElement?.getAttribute('style')).toContain('240px');
+  });
+
+  test('a row that can be pressed takes the keyboard, and the box in it keeps its own press', async () => {
+    const opened: string[] = [];
+    const picked: string[][] = [];
+    mounted = await mount(
+      <Table
+        columns={COLUMNS}
+        rows={SESSIONS}
+        rowKey={key}
+        selected={[]}
+        onSelectedChange={(next) => picked.push(next)}
+        onRowPress={(row) => opened.push(row.id)}
+      />
+    );
+    const rows = all('tbody tr');
+    expect(rows[0].getAttribute('tabindex')).toBe('0');
+    await click(rows[0]);
+    expect(opened).toEqual(['a']);
+
+    // Enter and Space press the row the way they press the button it stands for.
+    await step(() => rows[1].focus());
+    await press('Enter');
+    await step(() => rows[2].focus());
+    await press(' ');
+    expect(opened).toEqual(['a', 'b', 'c']);
+
+    // Opening a record and picking it are two actions in one row.
+    await click(all('tbody [role="checkbox"]')[0]);
+    expect(picked).toEqual([['a']]);
+    expect(opened).toEqual(['a', 'b', 'c']);
+  });
+
+  test('a table of facts takes no pointer and no tab stop', async () => {
+    // The package's first table lit every row on hover, and its one caller had
+    // to turn that off again with a class. A table is read, not operated,
+    // unless pressing a row does something.
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} />);
+    const row = one('tbody tr');
+    expect(row.hasAttribute('tabindex')).toBe(false);
+    expect(carries(row, surface.hoverRow)).toBe(false);
+    expect(carries(row, surface.pressableRow)).toBe(false);
+  });
+
+  test('the last record draws no line to a next row there is none of', async () => {
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} />);
+    const rows = all('tbody tr');
+    expect(carries(rows.at(-1)!, surface.bodyRowLast)).toBe(true);
+    // And every row before it draws one. A table that renders its own rows says
+    // which is last instead of reading `:last-child`, so the line it draws has
+    // to be stated too — the board caught this one as three rows with no line.
+    expect(carries(rows[0], surface.bodyRowLined)).toBe(true);
+    expect(carries(rows.at(-1)!, surface.bodyRowLined)).toBe(false);
+    // The head keeps its line: the row after it is the first record.
+    expect(carries(one('thead tr'), surface.headRow)).toBe(true);
+  });
+
+  test('draws a totals row only where a column says what goes in it', async () => {
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} />);
+    expect(document.querySelector('tfoot')).toBeNull();
+    await mounted.unmount();
+
+    mounted = await mount(
+      <Table
+        columns={COLUMNS.map((column) =>
+          column.key === 'turns' ? { ...column, footer: 47 } : column
+        )}
+        rows={SESSIONS}
+        rowKey={key}
+      />
+    );
+    expect(one('tfoot').textContent).toContain('47');
+  });
+
+  test('a table too narrow for its columns becomes a stack of records', async () => {
+    // Every surface in this repository that draws a table today collapses on a
+    // narrow window by hand, and one of them renders every cell a second time
+    // to do it. The labels here are the head's own words, which is only
+    // reachable because the columns were stated — and the question is about the
+    // table's own box rather than the window, so a table in a narrow panel
+    // stacks on a wide screen.
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} />);
+    expect(carries(one('thead'), surface.stackedHead)).toBe(true);
+    expect(carries(one('tbody tr'), surface.stackedRow)).toBe(true);
+    const labelled = one('tbody td');
+    expect(carries(labelled, surface.stackedCell)).toBe(true);
+    expect(labelled.textContent).toBe('SessionWorktree setup');
+    await mounted.unmount();
+
+    // A table whose columns must stay a grid says so, and keeps the scrollbar.
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} stack={false} />);
+    expect(carries(one('thead'), surface.stackedHead)).toBe(false);
+    expect(carries(one('tbody tr'), surface.stackedRow)).toBe(false);
+    expect(one('tbody td').textContent).toBe('Worktree setup');
+  });
+
+  test('the parts are there for a table that is not a list of records', async () => {
+    // A two-column list of facts is not a list of records, and the elements are
+    // exported for exactly that: the onboarding summary reads its labels as row
+    // headers rather than as a column with a name of its own.
+    mounted = await mount(
+      <Table.Root size="large">
+        <Table.Body>
+          <Table.Row>
+            <Table.ColumnHeader scope="row">Agent</Table.ColumnHeader>
+            <Table.Cell>Claude</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    );
+    expect(one('th').getAttribute('scope')).toBe('row');
+    expect(carries(one('td'), surface.cellLarge)).toBe(true);
+    // A row a caller assembled reads its own position, because it has no table
+    // above it counting the rows.
+    expect(carries(one('tbody tr'), surface.bodyRow)).toBe(true);
+  });
+
+  test('figures are aligned to the end of their column without being told twice', async () => {
+    mounted = await mount(<Table columns={COLUMNS} rows={SESSIONS} rowKey={key} />);
+    const cells = all('tbody tr')[0].querySelectorAll('td');
+    expect(carries(cells[2], surface.numeric, surface.alignEnd)).toBe(true);
+    expect(carries(cells[0], surface.alignStart)).toBe(true);
+    // And the name of a numeric column goes with them, which is the thing a
+    // caller writing the head and the body separately forgets.
+    expect(carries(all('th')[2], surface.numeric, surface.alignEnd)).toBe(true);
+  });
+
+  test('a value is one line unless the column holds sentences', async () => {
+    mounted = await mount(
+      <Table
+        columns={[
+          COLUMNS[0],
+          { key: 'note', header: 'Note', cell: () => 'a sentence', wrap: true },
+        ]}
+        rows={SESSIONS}
+        rowKey={key}
+      />
+    );
+    const cells = all('tbody tr')[0].querySelectorAll('td');
+    expect(carries(cells[0], surface.cellWrap)).toBe(false);
+    expect(carries(cells[1], surface.cellWrap)).toBe(true);
+  });
+});
+
+describe('pageWindow', () => {
+  const width = (page: number, pages: number) => pageWindow(page, pages, 1, 1).length;
+
+  test('lists every page while they all fit', () => {
+    expect(pageWindow(1, 7, 1, 1)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+    expect(pageWindow(4, 1, 1, 1)).toEqual([1]);
+  });
+
+  test('stays one width from the first page to the last', () => {
+    // A pager that grew and shrank as a person walked through it would move the
+    // buttons out from under the pointer.
+    const widths = new Set(Array.from({ length: 40 }, (_, index) => width(index + 1, 40)));
+    expect([...widths]).toEqual([7]);
+  });
+
+  test('always offers the page you are on, the first and the last', () => {
+    for (let page = 1; page <= 40; page += 1) {
+      const listed = pageWindow(page, 40, 1, 1);
+      expect(listed, `page ${page}`).toContain(page);
+      expect(listed).toContain(1);
+      expect(listed).toContain(40);
+    }
+  });
+
+  test('never hides a single page behind a gap', () => {
+    // A gap is wider than the page it would hide, and costs the press that page
+    // would have taken.
+    for (let page = 1; page <= 40; page += 1) {
+      const listed = pageWindow(page, 40, 1, 1);
+      listed.forEach((entry, index) => {
+        if (entry !== 'gap') return;
+        const before = listed[index - 1];
+        const after = listed[index + 1];
+        expect(typeof before === 'number' && typeof after === 'number').toBe(true);
+        expect((after as number) - (before as number), `page ${page}`).toBeGreaterThan(2);
+      });
+    }
+  });
+
+  test('spends the gap it does not need on more pages', () => {
+    expect(pageWindow(1, 40, 1, 1)).toEqual([1, 2, 3, 4, 5, 'gap', 40]);
+    expect(pageWindow(40, 40, 1, 1)).toEqual([1, 'gap', 36, 37, 38, 39, 40]);
+    expect(pageWindow(20, 40, 1, 1)).toEqual([1, 'gap', 19, 20, 21, 'gap', 40]);
+  });
+
+  test('widens with the siblings and the boundaries it is given', () => {
+    expect(pageWindow(20, 40, 2, 2)).toEqual([1, 2, 'gap', 18, 19, 20, 21, 22, 'gap', 39, 40]);
+  });
+});
+
+describe('Pagination', () => {
+  test('the page you are on says so twice, and the ends stop', async () => {
+    const taken: number[] = [];
+    mounted = await mount(
+      <Pagination page={1} pages={5} onPageChange={(page) => taken.push(page)} />
+    );
+    // Once as a fill, and once as `aria-current` — the fill reaches only the
+    // people who can see it.
+    const current = one('[aria-current="page"]');
+    expect(current.textContent).toBe('1');
+    expect(current.getAttribute('data-variant')).toBe('secondary');
+    expect(one('[aria-label="Previous page"]').hasAttribute('disabled')).toBe(true);
+    expect(one('[aria-label="Next page"]').hasAttribute('disabled')).toBe(false);
+
+    await click(one('[aria-label="Page 3"]'));
+    await click(one('[aria-label="Next page"]'));
+    expect(taken).toEqual([3, 2]);
+  });
+
+  test('the gaps name no page a person can go to', async () => {
+    // A list that reads "3, 4, more pages, 98" says nothing "3, 4, 98" does
+    // not, so the gap is hidden rather than given a sentence of its own.
+    mounted = await mount(<Pagination page={20} pages={40} onPageChange={() => {}} />);
+    const gaps = all('li[aria-hidden="true"]');
+    expect(gaps).toHaveLength(2);
+    expect(all('nav li button')).toHaveLength(5);
+    expect(one('nav').getAttribute('aria-label')).toBe('Pagination');
+  });
+
+  test('a page outside the range is brought back into it', async () => {
+    const taken: number[] = [];
+    mounted = await mount(
+      <Pagination page={99} pages={5} onPageChange={(page) => taken.push(page)} />
+    );
+    expect(one('[aria-current="page"]').textContent).toBe('5');
+    // It is the last page, so there is no next one to offer.
+    expect(one('[aria-label="Next page"]').hasAttribute('disabled')).toBe(true);
+    await click(one('[aria-label="Previous page"]'));
+    expect(taken).toEqual([4]);
+  });
+
+  test('the compact layout says where you are in a sentence, not in slashes', async () => {
+    mounted = await mount(
+      <Pagination layout="compact" page={4} pages={120} onPageChange={() => {}} />
+    );
+    // What is on screen is "4 / 120", which is read as "4 slash 120"; the
+    // sentence beside it is what a screen reader is given instead.
+    expect(one('nav').textContent).toContain('Page 4 of 120');
+    expect(all('nav li button')).toHaveLength(0);
+    expect(one('nav').textContent).toContain('/ 120');
+  });
+
+  test('a typed page is taken when it is finished, not while it is typed', async () => {
+    // Typing 4-5 through a pager that navigates as you type visits page 4 on
+    // the way to page 45 — and over a large file that is a page fetched and
+    // thrown away.
+    const taken: number[] = [];
+    mounted = await mount(
+      <Pagination
+        layout="compact"
+        jump
+        page={1}
+        pages={120}
+        onPageChange={(page) => taken.push(page)}
+      />
+    );
+    const field = one('input') as HTMLInputElement;
+    expect(field.getAttribute('aria-label')).toBe('Page');
+    await step(() => field.focus());
+    await typeInto(field, '4');
+    await typeInto(field, '45');
+    expect(taken).toEqual([]);
+    await press('Enter');
+    expect(taken).toEqual([45]);
+
+    // Leaving the field commits it too, and a page past the end lands on it.
+    await step(() => field.focus());
+    await typeInto(field, '900');
+    await step(() => field.blur());
+    expect(taken).toEqual([45, 120]);
+  });
+});
diff --git a/packages/ui/test/toggle.test.tsx b/packages/ui/test/toggle.test.tsx
new file mode 100644
index 000000000..3a5bcefba
--- /dev/null
+++ b/packages/ui/test/toggle.test.tsx
@@ -0,0 +1,251 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Button } from '../src/button/button';
+import { Separator } from '../src/separator/separator';
+import { Toggle } from '../src/toggle/toggle';
+import { ToggleGroup } from '../src/toggle/toggle-group';
+import { toggleSurface } from '../src/toggle/surface';
+import { Toolbar } from '../src/toggle/toolbar';
+import { all, classesOf, click, mount, one, press, step, until } from './dom';
+
+/** The classes one of the family's styles compiles to, for a state check. */
+function classesFor(style: (typeof toggleSurface)[keyof typeof toggleSurface]): string[] {
+  return (stylex.props(style).className ?? '').split(' ').filter(Boolean);
+}
+
+function toggles(): HTMLButtonElement[] {
+  return all('button[aria-pressed]') as HTMLButtonElement[];
+}
+
+describe('Toggle', () => {
+  test('it is a button that says whether it is on', async () => {
+    // A toggle is a real `<button>` carrying `aria-pressed`, so the keyboard
+    // reaches it and a screen reader is told both what it is and its state —
+    // which is the whole difference between this and a div a surface colours.
+    const mounted = await mount(<Toggle>Bold</Toggle>);
+    const button = one('button');
+    expect(button.tagName).toBe('BUTTON');
+    expect(button.getAttribute('aria-pressed')).toBe('false');
+    await click(button);
+    expect(button.getAttribute('aria-pressed')).toBe('true');
+    await mounted.unmount();
+  });
+
+  test('a controlled toggle reports the press and leaves the state to its caller', async () => {
+    const seen: boolean[] = [];
+    const mounted = await mount(
+      <Toggle pressed={false} onPressedChange={(next) => seen.push(next)}>
+        Bold
+      </Toggle>
+    );
+    const button = one('button');
+    await click(button);
+    expect(seen).toEqual([true]);
+    // The caller never changed `pressed`, so the control did not change either.
+    expect(button.getAttribute('aria-pressed')).toBe('false');
+    await mounted.unmount();
+  });
+
+  test('off is a ghost control and on is the well, which is the state pair', async () => {
+    // The two states are the whole design decision this part makes: off has no
+    // fill at all, and on sinks into the well rather than filling with ink,
+    // because ink is what a control that already sits in a well becomes.
+    const mounted = await mount(<Toggle>Wrap lines</Toggle>);
+    const button = one('button');
+    for (const name of classesFor(toggleSurface.rest)) {
+      expect(classesOf(button), `an off toggle is missing ${name}`).toContain(name);
+    }
+    await click(button);
+    for (const name of classesFor(toggleSurface.pressed)) {
+      expect(classesOf(button), `an on toggle is missing ${name}`).toContain(name);
+    }
+    for (const name of classesFor(toggleSurface.rest)) {
+      expect(classesOf(button), `an on toggle still carries ${name}`).not.toContain(name);
+    }
+    await mounted.unmount();
+  });
+
+  test('an icon-only toggle draws the box its glyph fills', () => {
+    // This package's icons state their size as 100% of whatever holds them and
+    // StyleX has no descendant selector, so the control draws the 16px box —
+    // the same contract an icon-only Button has.
+    const html = renderToStaticMarkup(
+      <Toggle icon aria-label="Bold">
+        <svg />
+      </Toggle>
+    );
+    for (const name of classesFor(toggleSurface.glyph)) {
+      expect(html, `the glyph box is missing ${name}`).toContain(name);
+    }
+  });
+
+  test('a disabled toggle is disabled to the platform, not just dimmed', () => {
+    const html = renderToStaticMarkup(<Toggle disabled>Bold</Toggle>);
+    expect(html).toContain('disabled=""');
+  });
+});
+
+describe('ToggleGroup', () => {
+  test('the set states the size once, and a member may still state its own', () => {
+    // A member's height follows from the set's, so a surface states one fact
+    // rather than one per member — and two of them cannot disagree by accident.
+    const html = renderToStaticMarkup(
+      <ToggleGroup size="mini">
+        <Toggle value="a">A</Toggle>
+        <Toggle value="b" size="large">
+          B
+        </Toggle>
+      </ToggleGroup>
+    );
+    expect(html).toContain('data-size="mini"');
+    expect(html).toContain('data-size="large"');
+  });
+
+  test('one out of several: taking a second releases the first', async () => {
+    const taken: string[][] = [];
+    const mounted = await mount(
+      <ToggleGroup defaultValue={['list']} onValueChange={(next) => taken.push(next)}>
+        <Toggle value="list">List</Toggle>
+        <Toggle value="board">Board</Toggle>
+      </ToggleGroup>
+    );
+    const [list, board] = toggles();
+    expect(list.getAttribute('aria-pressed')).toBe('true');
+    await click(board);
+    expect(board.getAttribute('aria-pressed')).toBe('true');
+    expect(list.getAttribute('aria-pressed')).toBe('false');
+    expect(taken.at(-1)).toEqual(['board']);
+    await mounted.unmount();
+  });
+
+  test('several at once: the set holds every pressed member', async () => {
+    // This is the state a Tabs strip cannot describe, and the reason this is a
+    // different part rather than a strip without its track: two members are on
+    // at the same time, and no single sliding pill can stand for both.
+    const mounted = await mount(
+      <ToggleGroup multiple defaultValue={['status']}>
+        <Toggle value="status">Status</Toggle>
+        <Toggle value="assignee">Assignee</Toggle>
+      </ToggleGroup>
+    );
+    const [status, assignee] = toggles();
+    await click(assignee);
+    expect(status.getAttribute('aria-pressed')).toBe('true');
+    expect(assignee.getAttribute('aria-pressed')).toBe('true');
+    await mounted.unmount();
+  });
+
+  test('the set is one tab stop, and the arrow keys walk it', async () => {
+    const mounted = await mount(
+      <ToggleGroup multiple>
+        <Toggle value="a">A</Toggle>
+        <Toggle value="b">B</Toggle>
+        <Toggle value="c">C</Toggle>
+      </ToggleGroup>
+    );
+    const members = toggles();
+    // One stop: a person tabbing through a page passes the set rather than
+    // walking it, which is what makes a set of eight bearable.
+    expect(members.filter((member) => member.tabIndex === 0)).toHaveLength(1);
+    await step(() => members[0].focus());
+    await press('ArrowRight');
+    await until(() => document.activeElement === members[1], 'the arrow key to move the focus');
+    await mounted.unmount();
+  });
+});
+
+describe('Toolbar', () => {
+  test('it says what it is, and draws nothing of its own', async () => {
+    const mounted = await mount(
+      <Toolbar.Root aria-label="Format">
+        <Toolbar.Button render={<Toggle icon aria-label="Bold" />}>
+          <svg />
+        </Toolbar.Button>
+      </Toolbar.Root>
+    );
+    const bar = one('[role="toolbar"]');
+    expect(bar.getAttribute('aria-orientation')).toBe('horizontal');
+    // The bar carries the row and the gap, and no fill, shadow or radius: what
+    // it stands on is the surface the product already had there.
+    expect(classesOf(bar)).toEqual(classesFor(toggleSurface.bar));
+    // A control joins the walk through `render`, and what it was given to hold
+    // arrives inside the box the control draws — the composition every caller
+    // writes, and the one place the two halves could fail to meet.
+    const glyph = one('[role="toolbar"] button > span');
+    for (const name of classesFor(toggleSurface.glyph)) {
+      expect(classesOf(glyph), `a composed toggle's glyph box is missing ${name}`).toContain(name);
+    }
+    expect(glyph.querySelector('svg')).not.toBeNull();
+    await mounted.unmount();
+  });
+
+  test('a toggle in a bar is still a toggle, and the bar is still one stop', async () => {
+    const mounted = await mount(
+      <Toolbar.Root aria-label="Format">
+        <Toolbar.Button render={<Toggle icon aria-label="Bold" />}>
+          <svg />
+        </Toolbar.Button>
+        <Toolbar.Button render={<Toggle icon aria-label="Italic" />}>
+          <svg />
+        </Toolbar.Button>
+        <Toolbar.Separator />
+        <Toolbar.Button render={<Button variant="ghost" icon aria-label="Quote" />}>
+          <svg />
+        </Toolbar.Button>
+      </Toolbar.Root>
+    );
+    const items = all('[role="toolbar"] button');
+    expect(items).toHaveLength(3);
+    expect(items.filter((item) => item.tabIndex === 0)).toHaveLength(1);
+    const bold = items[0];
+    expect(bold.getAttribute('aria-pressed')).toBe('false');
+    await click(bold);
+    expect(bold.getAttribute('aria-pressed')).toBe('true');
+    await step(() => bold.focus());
+    await press('ArrowRight');
+    await until(() => document.activeElement === items[1], 'the arrow key to walk the bar');
+    await mounted.unmount();
+  });
+
+  test('a control the bar cannot use is stepped over rather than stopped on', async () => {
+    const mounted = await mount(
+      <Toolbar.Root aria-label="Format">
+        <Toolbar.Button render={<Toggle icon aria-label="Bold" />}>
+          <svg />
+        </Toolbar.Button>
+        <Toolbar.Button disabled focusableWhenDisabled={false} render={<Button icon />}>
+          <svg />
+        </Toolbar.Button>
+        <Toolbar.Button render={<Toggle icon aria-label="Code" />}>
+          <svg />
+        </Toolbar.Button>
+      </Toolbar.Root>
+    );
+    const items = all('[role="toolbar"] button');
+    await step(() => items[0].focus());
+    await press('ArrowRight');
+    await until(
+      () => document.activeElement === items[2],
+      'the disabled control to be stepped over'
+    );
+    await mounted.unmount();
+  });
+
+  test("the bar's line is the one line this system allows, turned ninety degrees", () => {
+    // The orientation is the bar's turned, and it is the part's rather than a
+    // caller's so that a horizontal bar cannot end up with a horizontal line
+    // across it. What it draws is the very same hairline `Separator` draws.
+    const html = renderToStaticMarkup(
+      <Toolbar.Root>
+        <Toolbar.Separator />
+      </Toolbar.Root>
+    );
+    expect(html).toContain('role="separator"');
+    expect(html).toContain('aria-orientation="vertical"');
+    const line = renderToStaticMarkup(<Separator orientation="vertical" />);
+    for (const name of (/class="([^"]*)"/.exec(line)?.[1] ?? '').split(' ').filter(Boolean)) {
+      expect(html, `the bar's line is missing ${name}`).toContain(name);
+    }
+  });
+});
diff --git a/packages/ui/test/toggles.test.tsx b/packages/ui/test/toggles.test.tsx
new file mode 100644
index 000000000..8ec65953e
--- /dev/null
+++ b/packages/ui/test/toggles.test.tsx
@@ -0,0 +1,238 @@
+import * as stylex from '@stylexjs/stylex';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Checkbox } from '../src/field/checkbox';
+import { Field } from '../src/field/field';
+import { Input } from '../src/field/input';
+import { Radio, RadioGroup } from '../src/field/radio';
+import { Switch } from '../src/field/switch';
+import { corner } from '../src/tokens/scales.stylex';
+
+function classesOf(html: string, tag: string, occurrence = 0): string[] {
+  const open = html.match(new RegExp(`<${tag}\\b[^>]*>`, 'g'))?.[occurrence] ?? '';
+  return (/class="([^"]*)"/.exec(open)?.[1] ?? '').split(' ').filter(Boolean);
+}
+
+function attrOf(html: string, tag: string, attribute: string): string | undefined {
+  const open = new RegExp(`<${tag}\\b[^>]*>`).exec(html)?.[0] ?? '';
+  return new RegExp(`${attribute}="([^"]*)"`).exec(open)?.[1];
+}
+
+/** What the invalid ring adds to a text control, derived rather than written down. */
+const RING_CLASSES = (() => {
+  const valid = classesOf(renderToStaticMarkup(<Input />), 'input');
+  const invalid = classesOf(renderToStaticMarkup(<Input aria-invalid="true" />), 'input');
+  return invalid.filter((name) => !valid.includes(name));
+})();
+
+describe('Checkbox', () => {
+  test('renders a real button carrying the checkbox role, with a hidden input beside it', () => {
+    const html = renderToStaticMarkup(<Checkbox name="notify" />);
+    expect(html).toMatch(/^<button type="button"/);
+    expect(html).toContain('role="checkbox"');
+    expect(html).toContain('aria-checked="false"');
+    expect(html).toContain('<input');
+    expect(html).toContain('type="checkbox"');
+  });
+
+  test('the tick appears only once the box holds a value', () => {
+    expect(renderToStaticMarkup(<Checkbox />)).not.toContain('<svg');
+    expect(renderToStaticMarkup(<Checkbox defaultChecked />)).toContain('<svg');
+  });
+
+  test('a mixed box announces mixed and draws the dash instead of the tick', () => {
+    const mixed = renderToStaticMarkup(<Checkbox indeterminate />);
+    expect(mixed).toContain('aria-checked="mixed"');
+    // The tick is a polyline and the dash a single horizontal run; the mixed box
+    // must not fall back to the tick, which would state a value it does not hold.
+    expect(mixed).toContain('d="M2.2 5h5.6"');
+    expect(mixed).not.toContain('d="M1.6 5.2 3.9 7.5 8.4 2.7"');
+  });
+
+  test('a mixed box wears the same ink as a checked one', () => {
+    const checked = classesOf(renderToStaticMarkup(<Checkbox defaultChecked />), 'button');
+    const mixed = classesOf(renderToStaticMarkup(<Checkbox indeterminate />), 'button');
+    expect(mixed).toEqual(checked);
+  });
+
+  test('checked swaps the well for the ink fill rather than adding to it', () => {
+    const off = classesOf(renderToStaticMarkup(<Checkbox />), 'button');
+    const on = classesOf(renderToStaticMarkup(<Checkbox defaultChecked />), 'button');
+    expect(on.filter((name) => !off.includes(name)).length).toBeGreaterThan(0);
+    expect(off.filter((name) => !on.includes(name)).length).toBeGreaterThan(0);
+  });
+});
+
+describe('Switch', () => {
+  test('renders a real button carrying the switch role', () => {
+    const html = renderToStaticMarkup(<Switch name="beta" />);
+    expect(html).toMatch(/^<button type="button"/);
+    expect(html).toContain('role="switch"');
+    expect(html).toContain('aria-checked="false"');
+  });
+
+  test('the thumb differs between the two tracks by its travel alone', () => {
+    const off = classesOf(renderToStaticMarkup(<Switch />), 'span');
+    const on = classesOf(renderToStaticMarkup(<Switch defaultChecked />), 'span');
+    // One class swaps for one class: the resting transform for the travelled
+    // one. Anything more would be the thumb restyling itself per state.
+    expect(on.filter((name) => !off.includes(name))).toHaveLength(1);
+    expect(off.filter((name) => !on.includes(name))).toHaveLength(1);
+  });
+});
+
+describe('RadioGroup', () => {
+  const group = (
+    <RadioGroup name="mode" defaultValue="ask">
+      <Radio value="ask" />
+      <Radio value="auto" />
+    </RadioGroup>
+  );
+
+  test('the group and its options carry the roles a screen reader needs', () => {
+    const html = renderToStaticMarkup(group);
+    expect(html).toContain('role="radiogroup"');
+    expect(html.match(/role="radio"/g)).toHaveLength(2);
+    expect(html).toContain('aria-checked="true"');
+    expect(html).toContain('aria-checked="false"');
+  });
+
+  test('only the selected option shows its dot', () => {
+    const html = renderToStaticMarkup(group);
+    expect(html.match(/<span/g)).toHaveLength(1);
+  });
+
+  test('the group submits one name for every option', () => {
+    const html = renderToStaticMarkup(group);
+    expect(html.match(/name="mode"/g)).toHaveLength(2);
+    expect(html.match(/value="ask"|value="auto"/g)).toHaveLength(2);
+  });
+});
+
+/**
+ * StyleX hashes a class per property, value and condition, so re-declaring the
+ * two corner shapes here yields the same classes the primitives carry. Derived
+ * rather than written down, so this cannot drift from the compiler.
+ */
+const CORNERS = stylex.create({
+  squircle: { cornerShape: corner.shape },
+  round: { cornerShape: corner.round },
+});
+const SQUIRCLE = stylex.props(CORNERS.squircle).className ?? '';
+const ROUND = stylex.props(CORNERS.round).className ?? '';
+
+describe('pills are round, not squircles', () => {
+  test('the two corner shapes really are different classes', () => {
+    expect(SQUIRCLE).not.toBe('');
+    expect(ROUND).not.toBe('');
+    expect(SQUIRCLE).not.toBe(ROUND);
+  });
+
+  test('a switch track and a radio drop the well squircle', () => {
+    // A squircle at radius.full is a superellipse: it would make the track a
+    // rounded rectangle and the radio a squircle rather than a circle.
+    for (const [control, name] of [
+      [<Switch key="s" />, 'switch'],
+      [
+        <RadioGroup key="g" name="mode">
+          <Radio value="ask" />
+        </RadioGroup>,
+        'radio',
+      ],
+    ] as const) {
+      const cls = classesOf(renderToStaticMarkup(control), 'button');
+      expect(cls, `${name} is round`).toContain(ROUND);
+      expect(cls, `${name} is not a squircle`).not.toContain(SQUIRCLE);
+    }
+  });
+
+  test('a checkbox keeps the squircle, which is what its radius is for', () => {
+    const cls = classesOf(renderToStaticMarkup(<Checkbox />), 'button');
+    expect(cls).toContain(SQUIRCLE);
+    expect(cls).not.toContain(ROUND);
+  });
+});
+
+describe('the family the three join', () => {
+  test('they share the box styles rather than each defining their own', () => {
+    const checkbox = classesOf(renderToStaticMarkup(<Checkbox />), 'button');
+    const radio = classesOf(
+      renderToStaticMarkup(
+        <RadioGroup name="mode">
+          <Radio value="ask" />
+        </RadioGroup>
+      ),
+      'button'
+    );
+    const toggle = classesOf(renderToStaticMarkup(<Switch />), 'button');
+    const shared = checkbox.filter((name) => radio.includes(name) && toggle.includes(name));
+    expect(shared.length).toBeGreaterThan(10);
+  });
+
+  test('an unchecked control wears the same invalid ring as a text control', () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    for (const control of [
+      <Checkbox key="c" aria-invalid="true" />,
+      <Switch key="s" aria-invalid="true" />,
+    ]) {
+      const cls = classesOf(renderToStaticMarkup(control), 'button');
+      expect(RING_CLASSES.every((name) => cls.includes(name))).toBe(true);
+    }
+  });
+
+  test('a checked control keeps the invalid ring on its own ink edge', () => {
+    const checked = classesOf(renderToStaticMarkup(<Checkbox defaultChecked />), 'button');
+    const invalid = classesOf(
+      renderToStaticMarkup(<Checkbox defaultChecked aria-invalid="true" />),
+      'button'
+    );
+    const added = invalid.filter((name) => !checked.includes(name));
+    expect(added.length).toBeGreaterThan(0);
+    // The ring is composed with the ink edge, so it cannot be the class a
+    // welled control uses; a checked box that reused it would lose its edge.
+    expect(added.some((name) => RING_CLASSES.includes(name))).toBe(false);
+  });
+
+  test('the field owns disabled, validity and the label association', () => {
+    const html = renderToStaticMarkup(
+      <Field.Root name="notify" disabled>
+        <Field.Label>
+          Notify me
+          <Checkbox />
+        </Field.Label>
+      </Field.Root>
+    );
+    // A native button takes the disabled attribute, so the same `:disabled`
+    // rule that dims an Input dims these without a second mechanism.
+    expect(html).toContain('disabled=""');
+    expect(attrOf(html, 'label', 'for')).toBe(attrOf(html, 'button', 'id'));
+  });
+
+  test('a field marked invalid rings the control without the caller repeating it', () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    const html = renderToStaticMarkup(
+      <Field.Root name="notify" invalid>
+        <Checkbox />
+      </Field.Root>
+    );
+    expect(html).toContain('aria-invalid="true"');
+    expect(RING_CLASSES.every((name) => classesOf(html, 'button').includes(name))).toBe(true);
+  });
+
+  test('a caller className lands after the compiled classes', () => {
+    for (const [control, tag] of [
+      [<Checkbox key="c" className="mt-1" />, 'button'],
+      [<Switch key="s" className="mt-1" />, 'button'],
+      [
+        <RadioGroup key="g" name="mode">
+          <Radio value="ask" className="mt-1" />
+        </RadioGroup>,
+        'button',
+      ],
+    ] as const) {
+      const cls = classesOf(renderToStaticMarkup(control), tag);
+      expect(cls[cls.length - 1]).toBe('mt-1');
+      expect(cls.length).toBeGreaterThan(5);
+    }
+  });
+});
diff --git a/packages/ui/test/tokens.test.tsx b/packages/ui/test/tokens.test.tsx
new file mode 100644
index 000000000..7a3c36fb3
--- /dev/null
+++ b/packages/ui/test/tokens.test.tsx
@@ -0,0 +1,36 @@
+import * as stylex from '@stylexjs/stylex';
+import { describe, expect, test } from 'vitest';
+import { colors, shadow } from '../src/tokens/colors.stylex';
+import { corner, radius } from '../src/tokens/scales.stylex';
+import { ThemeRoot } from '../src/theme/theme';
+
+const styles = stylex.create({
+  well: {
+    backgroundColor: colors.wellBackground,
+    boxShadow: shadow.inset,
+    borderRadius: radius.medium,
+    cornerShape: corner.shape,
+  },
+});
+
+describe('tokens', () => {
+  test('semantic tokens compile to CSS custom property references', () => {
+    expect(colors.label).toMatch(/^var\(--/);
+    expect(shadow.card).toMatch(/^var\(--/);
+    expect(radius.large).toMatch(/^var\(--/);
+  });
+
+  test('consts inline their value', () => {
+    expect(corner.shape).toBe('squircle');
+  });
+
+  test('a style built from tokens yields a class list', () => {
+    const { className } = stylex.props(styles.well);
+    expect(className).toBeTruthy();
+    expect(className?.split(' ').length).toBeGreaterThanOrEqual(4);
+  });
+
+  test('theme root is a component', () => {
+    expect(typeof ThemeRoot).toBe('function');
+  });
+});
diff --git a/packages/ui/test/tooltip.test.tsx b/packages/ui/test/tooltip.test.tsx
new file mode 100644
index 000000000..b22728518
--- /dev/null
+++ b/packages/ui/test/tooltip.test.tsx
@@ -0,0 +1,125 @@
+import * as stylex from '@stylexjs/stylex';
+import { afterEach, describe, expect, test } from 'vitest';
+import { Button } from '../src/button/button';
+import { chip } from '../src/tooltip/chip';
+import { Tooltip } from '../src/tooltip/tooltip';
+import { ThemeRoot, forcedThemeClassNames } from '../src/theme/theme';
+import { all, classesOf, mount, one, press, step, type Mounted } from './dom';
+
+/** See `menu.test.tsx`: the same loosened call the primitives make. */
+function classesFor(...styles: readonly unknown[]): string[] {
+  const props = stylex.props as (...args: readonly unknown[]) => { className?: string };
+  return (props(...styles).className ?? '').split(' ').filter(Boolean);
+}
+
+let mounted: Mounted | undefined;
+afterEach(async () => {
+  await mounted?.unmount();
+  mounted = undefined;
+});
+
+const trigger = () => one('button');
+
+/**
+ * The chips on screen.
+ *
+ * A tooltip has no role to select it by, and that is the component's design
+ * rather than an omission: Base UI makes one visual-only, because a tooltip is
+ * not reachable by touch or by a screen reader and `role="tooltip"` would
+ * promise otherwise. The chip is therefore found where it is — the element
+ * inside a positioner, which reports the side it landed on.
+ */
+const chips = () =>
+  all('[data-base-ui-portal] [data-side]').flatMap((positioner) =>
+    [...positioner.children].filter((node): node is HTMLElement => node instanceof HTMLElement)
+  );
+
+/**
+ * The pointer arriving over the trigger.
+ *
+ * `dom.tsx`'s `hover` moves the pointer, which is what highlights a list row; a
+ * tooltip listens for the pointer entering its trigger instead, and jsdom
+ * synthesises no enter event from a move. The two are different facts, so this
+ * one is stated here rather than widening the shared helper.
+ */
+async function point(element: Element): Promise<void> {
+  await step(() => {
+    for (const type of ['pointerover', 'pointerenter', 'mouseover', 'mouseenter']) {
+      element.dispatchEvent(
+        new PointerEvent(type, { bubbles: type.endsWith('over'), pointerType: 'mouse' })
+      );
+    }
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true, pointerType: 'mouse' }));
+  });
+}
+
+function Rerun({ ...rest }: { defaultOpen?: boolean }) {
+  return (
+    <Tooltip.Root {...rest}>
+      <Tooltip.Trigger delay={0} render={<Button icon aria-label="Rerun" />}>
+        R
+      </Tooltip.Trigger>
+      <Tooltip.Content>Rerun this turn</Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
+
+describe('Tooltip', () => {
+  test('opens when the pointer arrives, and says what it names', async () => {
+    mounted = await mount(<Rerun />);
+    expect(chips()).toHaveLength(0);
+
+    await point(trigger());
+
+    expect(chips()).toHaveLength(1);
+    expect(chips()[0].textContent).toBe('Rerun this turn');
+    expect(trigger().getAttribute('data-popup-open')).toBe('');
+  });
+
+  test('is visual only, so the trigger still carries its own name', async () => {
+    mounted = await mount(<Rerun defaultOpen />);
+    // The contract every migrated caller has to meet. A tooltip is not a label:
+    // it is not reachable by touch or by a screen reader, so Base UI gives the
+    // chip no role and wires no `aria-describedby`, and a control whose only
+    // name was its tooltip would have no name at all. The trigger names itself.
+    expect(chips()[0].getAttribute('role')).toBeNull();
+    expect(trigger().getAttribute('aria-describedby')).toBeNull();
+    expect(trigger().getAttribute('aria-label')).toBe('Rerun');
+  });
+
+  test('Escape takes it down', async () => {
+    mounted = await mount(<Rerun defaultOpen />);
+    expect(chips()).toHaveLength(1);
+
+    await press('Escape');
+
+    expect(chips()).toHaveLength(0);
+  });
+
+  test('never takes the pointer off what it names', () => {
+    // A chip that landed under the cursor and accepted the pointer would take
+    // it off its own trigger, closing itself and reopening in a loop. It is the
+    // one declaration on the chip that is about behaviour rather than
+    // appearance, so it is pinned rather than left reading like a nicety.
+    const none = stylex.create({ probe: { pointerEvents: 'none' } });
+    for (const className of classesFor(none.probe)) {
+      expect(classesFor(chip.popup)).toContain(className);
+    }
+  });
+
+  test('carries a forced palette across the portal', async () => {
+    mounted = await mount(
+      <ThemeRoot mode="dark">
+        <Rerun defaultOpen />
+      </ThemeRoot>
+    );
+    // A tooltip inverts, so a chip that inherited the document's palette is the
+    // one case that is unreadable rather than merely wrong: light ink on a
+    // light fill.
+    const positioner = chips()[0].parentElement;
+    expect(positioner).not.toBeNull();
+    for (const className of forcedThemeClassNames('dark')) {
+      expect(classesOf(positioner as Element)).toContain(className);
+    }
+  });
+});
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 000000000..9ad94cb2e
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../configs/tsconfig.extend.json",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "include": ["src/**/*", "test/**/*", "playground/**/*", "stylex-options.ts", "vitest.config.ts"]
+}
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
new file mode 100644
index 000000000..b221088a2
--- /dev/null
+++ b/packages/ui/vitest.config.ts
@@ -0,0 +1,17 @@
+import stylex from '@stylexjs/unplugin';
+import { defineConfig } from 'vitest/config';
+import { stylexOptions } from './stylex-options';
+
+export default defineConfig({
+  plugins: [stylex.rollup({ ...stylexOptions, dev: false })],
+  test: {
+    include: ['test/**/*.test.ts', 'test/**/*.test.tsx'],
+    environment: 'jsdom',
+    // React 19 ships `act` only in its development build, and its entry picks
+    // the build from `process.env.NODE_ENV`, which is `production` here because
+    // the StyleX plugin compiles with `dev: false`. Without this every test that
+    // drives a control — opening a popup, walking it with the keyboard — fails
+    // with `act is not a function` rather than reporting what it asserts.
+    env: { NODE_ENV: 'development' },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3616fdd4d..c8239abf8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -421,10 +421,10 @@ importers:
     dependencies:
       '@better-auth/electron':
         specifier: 'catalog:'
-        version: 1.5.5(patch_hash=c0bab8bf6f42816473109d61f757f961d4f3bcc1b1cd07c4fe7c2f012fd291ac)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(817ae14f18a6fb615413e202a25d2574))(better-call@1.3.2(zod@4.3.6))(conf@15.1.0)(electron@39.5.1)
+        version: 1.5.5(patch_hash=c0bab8bf6f42816473109d61f757f961d4f3bcc1b1cd07c4fe7c2f012fd291ac)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(3a09029b520b24afb85d8f6cade5c8d8))(better-call@1.3.2(zod@4.3.6))(conf@15.1.0)(electron@39.5.1)
       '@convex-dev/better-auth':
         specifier: 'catalog:'
-        version: 0.11.2(@standard-schema/spec@1.1.0)(better-auth@1.5.5(817ae14f18a6fb615413e202a25d2574))(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)
+        version: 0.11.2(@standard-schema/spec@1.1.0)(better-auth@1.5.5(3a09029b520b24afb85d8f6cade5c8d8))(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)
       '@electron-toolkit/preload':
         specifier: ^3.0.2
         version: 3.0.2(electron@39.5.1)
@@ -445,7 +445,7 @@ importers:
         version: 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       better-auth:
         specifier: 'catalog:'
-        version: 1.5.5(817ae14f18a6fb615413e202a25d2574)
+        version: 1.5.5(3a09029b520b24afb85d8f6cade5c8d8)
       conf:
         specifier: ^15.1.0
         version: 15.1.0
@@ -495,6 +495,12 @@ importers:
       '@lody/configs':
         specifier: workspace:*
         version: link:../../packages/configs
+      '@lody/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      '@stylexjs/unplugin':
+        specifier: 0.19.0
+        version: 0.19.0(unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@4.3.0)
@@ -869,7 +875,7 @@ importers:
         version: 0.10.9(@assistant-ui/react@0.10.50(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@better-auth/electron':
         specifier: 'catalog:'
-        version: 1.5.5(patch_hash=c0bab8bf6f42816473109d61f757f961d4f3bcc1b1cd07c4fe7c2f012fd291ac)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd))(better-call@1.3.2(zod@4.3.6))(conf@15.1.0)(electron@39.5.1)
+        version: 1.5.5(patch_hash=c0bab8bf6f42816473109d61f757f961d4f3bcc1b1cd07c4fe7c2f012fd291ac)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(532ad3d3c7da62ce07897da849d81e18))(better-call@1.3.2(zod@4.3.6))(conf@15.1.0)(electron@39.5.1)
       '@capacitor/browser':
         specifier: ^8.0.0
         version: 8.0.3(@capacitor/core@8.5.0)
@@ -881,7 +887,7 @@ importers:
         version: 8.0.1(@capacitor/core@8.5.0)
       '@convex-dev/better-auth':
         specifier: 'catalog:'
-        version: 0.11.2(@standard-schema/spec@1.1.0)(better-auth@1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd))(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)
+        version: 0.11.2(@standard-schema/spec@1.1.0)(better-auth@1.5.5(532ad3d3c7da62ce07897da849d81e18))(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)
       '@diceui/shared':
         specifier: 0.12.0
         version: 0.12.0(@floating-ui/react@0.27.17(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -921,6 +927,9 @@ importers:
       '@lody/shared':
         specifier: workspace:*
         version: link:../shared
+      '@lody/ui':
+        specifier: workspace:*
+        version: link:../ui
       '@loro-dev/flock-wasm':
         specifier: 'catalog:'
         version: 0.4.3
@@ -954,9 +963,6 @@ importers:
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.14
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-checkbox':
-        specifier: ^1.3.2
-        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-collapsible':
         specifier: ^1.1.12
         version: 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -969,39 +975,18 @@ importers:
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
         version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-label':
-        specifier: ^2.1.7
-        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-menubar':
-        specifier: ^1.1.15
-        version: 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-popover':
         specifier: ^1.0.7
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.3.7
-        version: 1.3.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-scroll-area':
         specifier: ^1.2.9
         version: 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-select':
-        specifier: ^2.0.0
-        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.7
-        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-slot':
         specifier: ^1.2.4
         version: 1.2.4(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.0.3
-        version: 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-tabs':
         specifier: ^1.0.4
         version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle':
-        specifier: ^1.1.9
-        version: 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-tooltip':
         specifier: ^1.2.9
         version: 1.2.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -1049,10 +1034,10 @@ importers:
         version: 1.1.3
       better-auth:
         specifier: 'catalog:'
-        version: 1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd)
+        version: 1.5.5(532ad3d3c7da62ce07897da849d81e18)
       better-auth-capacitor:
         specifier: 'catalog:'
-        version: 0.3.6(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@capacitor/app@8.1.0(@capacitor/core@8.5.0))(@capacitor/core@8.5.0)(@capacitor/preferences@8.0.1(@capacitor/core@8.5.0))(better-auth@1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd))
+        version: 0.3.6(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@capacitor/app@8.1.0(@capacitor/core@8.5.0))(@capacitor/core@8.5.0)(@capacitor/preferences@8.0.1(@capacitor/core@8.5.0))(better-auth@1.5.5(532ad3d3c7da62ce07897da849d81e18))
       broadcast-channel:
         specifier: ^7.0.0
         version: 7.3.0
@@ -1152,6 +1137,9 @@ importers:
       prosemirror-flat-list:
         specifier: ^0.7.1
         version: 0.7.1
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
       react:
         specifier: 'catalog:'
         version: 19.2.0
@@ -1230,9 +1218,6 @@ importers:
       zod:
         specifier: 4.3.6
         version: 4.3.6
-      qrcode:
-        specifier: ^1.5.4
-        version: 1.5.4
     devDependencies:
       '@lody/configs':
         specifier: workspace:*
@@ -1249,6 +1234,9 @@ importers:
       '@storybook/react-vite':
         specifier: ^9.0.16
         version: 9.1.17(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.57.1)(storybook@9.1.17(@testing-library/dom@10.4.1)(prettier@3.9.6)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))(typescript@5.9.3)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@stylexjs/unplugin':
+        specifier: 0.19.0
+        version: 0.19.0(unplugin@3.3.0(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@4.3.0)
@@ -1263,7 +1251,7 @@ importers:
         version: 1.159.4
       '@tanstack/router-plugin':
         specifier: 'catalog:'
-        version: 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+        version: 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@types/debug':
         specifier: ^4.1.12
         version: 4.1.12
@@ -1273,6 +1261,9 @@ importers:
       '@types/node':
         specifier: 'catalog:'
         version: 24.10.12
+      '@types/qrcode':
+        specifier: ^1.5.6
+        version: 1.5.6
       '@types/react':
         specifier: 'catalog:'
         version: 19.2.17
@@ -1327,9 +1318,6 @@ importers:
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/debug@4.1.12)(@types/node@24.10.12)(jiti@2.7.0)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
-      '@types/qrcode':
-        specifier: ^1.5.6
-        version: 1.5.6
 
   packages/configs:
     dependencies:
@@ -1340,6 +1328,40 @@ importers:
         specifier: '>=4'
         version: 4.3.0
 
+  packages/icons:
+    dependencies:
+      '@stylexjs/stylex':
+        specifier: 0.19.0
+        version: 0.19.0
+    devDependencies:
+      '@stylexjs/unplugin':
+        specifier: 0.19.0
+        version: 0.19.0(unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.10.12
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.2.3(@types/react@19.2.17)
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
+      react:
+        specifier: 'catalog:'
+        version: 19.2.0
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.0(react@19.2.0)
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.10.12)(jiti@2.7.0)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+
   packages/ignore:
     dependencies:
       effect:
@@ -1483,6 +1505,52 @@ importers:
         specifier: ^3.2.4
         version: 3.2.4(@types/debug@4.1.12)(@types/node@24.10.12)(jiti@2.7.0)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2)
 
+  packages/ui:
+    dependencies:
+      '@base-ui/react':
+        specifier: 1.7.0
+        version: 1.7.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@lody/icons':
+        specifier: workspace:*
+        version: link:../icons
+      '@stylexjs/stylex':
+        specifier: 0.19.0
+        version: 0.19.0
+    devDependencies:
+      '@stylexjs/unplugin':
+        specifier: 0.19.0
+        version: 0.19.0(unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.10.12
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.2.3(@types/react@19.2.17)
+      '@vitejs/plugin-react':
+        specifier: 'catalog:'
+        version: 4.7.0(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
+      react:
+        specifier: 'catalog:'
+        version: 19.2.0
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.0(react@19.2.0)
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      vite:
+        specifier: 'catalog:'
+        version: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@24.10.12)(jiti@2.7.0)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+
   site-docs:
     dependencies:
       '@lody/components':
@@ -1491,6 +1559,9 @@ importers:
       '@lody/shared':
         specifier: workspace:*
         version: link:../packages/shared
+      '@lody/ui':
+        specifier: workspace:*
+        version: link:../packages/ui
       '@number-flow/react':
         specifier: ^0.6.2
         version: 0.6.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -1549,6 +1620,9 @@ importers:
         specifier: 4.3.6
         version: 4.3.6
     devDependencies:
+      '@stylexjs/unplugin':
+        specifier: 0.19.0
+        version: 0.19.0(unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))
       '@tailwindcss/vite':
         specifier: ^4.3.2
         version: 4.3.3(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
@@ -1588,9 +1662,6 @@ importers:
 
 packages:
 
-  '@zumer/snapdom@2.24.15':
-    resolution: {integrity: sha512-4YE+3ekbBFEAxMyHr++wxOSGt/k+n721eeNT9N9Map27A+ra5sBut3qkYyheYlRj9dJ3HtZaUN1/yrh/aCiuKw==}
-
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
@@ -1749,6 +1820,10 @@ packages:
     resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -1770,6 +1845,24 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/plugin-syntax-flow@7.29.7':
+    resolution: {integrity: sha512-ajMX6QPcyomotqwpzhkYGxcK2i/us0rs1Qo9QvUpa+Fca0FTmqrzKrctoIYLMxcOhGZldGT/BAVkRGTWBiR8gQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-jsx@7.29.7':
+    resolution: {integrity: sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.29.7':
+    resolution: {integrity: sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-arrow-functions@7.27.1':
     resolution: {integrity: sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==}
     engines: {node: '>=6.9.0'}
@@ -1828,6 +1921,23 @@ packages:
       date-fns:
         optional: true
 
+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
   '@base-ui/utils@0.3.1':
     resolution: {integrity: sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==}
     peerDependencies:
@@ -1838,6 +1948,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@bcoe/v8-coverage@1.0.2':
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
@@ -2239,6 +2359,9 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
+  '@dual-bundle/import-meta-resolve@4.2.1':
+    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
+
   '@electric-sql/pglite-socket@0.0.20':
     resolution: {integrity: sha512-J5nLGsicnD9wJHnno9r+DGxfcZWh+YJMCe0q/aCgtG6XOm9Z7fKeite8IZSNXgZeGltSigM9U/vAWZQWdgcSFg==}
     hasBin: true
@@ -4127,19 +4250,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-checkbox@1.3.3':
-    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-collapsible@1.1.12':
     resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
     peerDependencies:
@@ -4347,19 +4457,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-label@2.1.8':
-    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-menu@2.1.16':
     resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
     peerDependencies:
@@ -4373,19 +4470,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menubar@1.1.16':
-    resolution: {integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-popover@1.1.15':
     resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
     peerDependencies:
@@ -4529,19 +4613,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-radio-group@1.3.8':
-    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-roving-focus@1.1.11':
     resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
@@ -4581,19 +4652,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-select@2.2.6':
-    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-separator@1.1.8':
     resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
     peerDependencies:
@@ -4643,19 +4701,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-switch@1.2.6':
-    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-tabs@1.1.13':
     resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
     peerDependencies:
@@ -4682,19 +4727,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toggle@1.1.10':
-    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-toggle@1.1.12':
     resolution: {integrity: sha512-AsAVsYNZIlRBsci7BhE+QyQeKd1h6TffJYt+lF0QQkd5OpQ3klfIByPsCb4G0h/Fq6PJwh1FYNluzBFYzhk4+w==}
     peerDependencies:
@@ -4833,15 +4865,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-previous@1.1.1':
-    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
@@ -5357,6 +5380,20 @@ packages:
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
 
+  '@stylexjs/babel-plugin@0.19.0':
+    resolution: {integrity: sha512-2SnVZIl047TtqKW0nRTn7Irz0kmoot1bxdGDE/HwfwfF7dJYHqwkIFg92s87v3hj7zxJobrHWwDx1p3qvQXW4g==}
+
+  '@stylexjs/shared@0.19.0':
+    resolution: {integrity: sha512-7Yym70cQH5sPzJHgzJX3FkL9ZCptbC3IbiRijN9YLYU/5OywB/3c519Xv1DOzvxqjv8urSxh98/9HxLaPG7sDg==}
+
+  '@stylexjs/stylex@0.19.0':
+    resolution: {integrity: sha512-CnUFp7YMaDLDeemsWOfJgoC/gKM5P/yBNMcpJaE6ChJmXr7s0DJwSeGTTlHJcqqwN9OW1qGtmARWLFhGZN1pTA==}
+
+  '@stylexjs/unplugin@0.19.0':
+    resolution: {integrity: sha512-2QwNYovSwarC/M8DLD78857F6MEi4eQ3UYzgdmyg/K7562M/rV1KWptiATxcKgujlUT6ToNy778SOXf4bGK+Bw==}
+    peerDependencies:
+      unplugin: ^2.3.11
+
   '@swc/core-darwin-arm64@1.15.11':
     resolution: {integrity: sha512-QoIupRWVH8AF1TgxYyeA5nS18dtqMuxNwchjBIwJo3RdwLEFiJq6onOx9JAxHtuPwUkIVuU2Xbp+jCJ7Vzmgtg==}
     engines: {node: '>=10'}
@@ -6110,6 +6147,9 @@ packages:
   '@types/proxy-from-env@1.0.4':
     resolution: {integrity: sha512-TPR9/bCZAr3V1eHN4G3LD3OLicdJjqX1QRXWuNcCYgE66f/K8jO2ZRtHxI2D9MbnuUP6+qiKSS8eUHp6TFHGCw==}
 
+  '@types/qrcode@1.5.6':
+    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
+
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
@@ -6690,6 +6730,9 @@ packages:
   '@zag-js/utils@1.42.0':
     resolution: {integrity: sha512-Km0r9hY+f6/oCJXrO4nqCIuo+4gTqbloD0V0q7B8Jq8qeWte7HN+YJSagVlk8tfADqFMRgEW4Rug0bYHzrGbVA==}
 
+  '@zumer/snapdom@2.24.15':
+    resolution: {integrity: sha512-4YE+3ekbBFEAxMyHr++wxOSGt/k+n721eeNT9N9Map27A+ra5sBut3qkYyheYlRj9dJ3HtZaUN1/yrh/aCiuKw==}
+
   abbrev@4.0.0:
     resolution: {integrity: sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -7178,6 +7221,10 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
   caniuse-lite@1.0.30001769:
     resolution: {integrity: sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==}
 
@@ -7280,6 +7327,9 @@ packages:
     resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
     engines: {node: '>= 12'}
 
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -7495,6 +7545,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-mediaquery@0.1.2:
+    resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -7710,6 +7763,10 @@ packages:
       supports-color:
         optional: true
 
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
@@ -7828,6 +7885,9 @@ packages:
     resolution: {integrity: sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==}
     engines: {node: '>=0.3.1'}
 
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
   dir-compare@4.2.0:
     resolution: {integrity: sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==}
 
@@ -8495,6 +8555,10 @@ packages:
     resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
     engines: {node: '>=18'}
 
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -9137,6 +9201,9 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
+  invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+
   ip-address@10.1.0:
     resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
     engines: {node: '>= 12'}
@@ -9625,6 +9692,10 @@ packages:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
 
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -10473,6 +10544,10 @@ packages:
     resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
     engines: {node: '>=4'}
 
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -10481,6 +10556,10 @@ packages:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -10497,6 +10576,10 @@ packages:
     resolution: {integrity: sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==}
     engines: {node: '>=8'}
 
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
@@ -10635,6 +10718,10 @@ packages:
     resolution: {integrity: sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==}
     engines: {node: '>=10.4.0'}
 
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
   points-on-curve@0.2.0:
     resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
 
@@ -10645,6 +10732,9 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
   postcss@8.5.15:
     resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -10918,6 +11008,11 @@ packages:
     resolution: {integrity: sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA==}
     engines: {node: '>=16.0.0'}
 
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   qs@6.15.1:
     resolution: {integrity: sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==}
     engines: {node: '>=0.6'}
@@ -11287,6 +11382,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
   resedit@1.7.2:
     resolution: {integrity: sha512-vHjcY2MlAITJhC0eRD/Vv8Vlgmu9Sd3LX9zZvtGzU5ZImdTN3+d6e/4mnTyV8vEbyf1sgNIrWxhWlrys52OkEA==}
     engines: {node: '>=12', npm: '>=6'}
@@ -11511,6 +11609,9 @@ packages:
   server-dom-shim@1.1.0:
     resolution: {integrity: sha512-oyKhBZtkr/SGB9YE2r0VtQxQCxaVx/Ix1fMz0XMd6K4T1/TMfDs9K2GR9QjpUtD+siyeLXr+3CzzGSvhTI1sEw==}
 
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
   set-cookie-parser@2.7.2:
     resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
 
@@ -11810,6 +11911,9 @@ packages:
   style-to-object@1.0.14:
     resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
+  styleq@0.2.1:
+    resolution: {integrity: sha512-L0TR0NQb+X4/ktDEKmjWyp27gla+LUYi/by5k5SjKXf6/pvZP7wbwEB5J+tqxdFVPgzbsuz+d4RTScO/QZquBw==}
+
   stylis@4.4.0:
     resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
 
@@ -12781,6 +12885,9 @@ packages:
     resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
     engines: {node: '>= 0.4'}
 
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
   which-typed-array@1.1.20:
     resolution: {integrity: sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==}
     engines: {node: '>= 0.4'}
@@ -12890,6 +12997,9 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -12909,10 +13019,18 @@ packages:
     engines: {node: '>= 14.6'}
     hasBin: true
 
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
 
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
   yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
@@ -12981,76 +13099,8 @@ packages:
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
-  qrcode@1.5.4:
-    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
-  dijkstrajs@1.0.3:
-    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
-
-  pngjs@5.0.0:
-    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
-    engines: {node: '>=10.13.0'}
-
-  yargs@15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
-    engines: {node: '>=8'}
-
-  cliui@6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
-
-  decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
-
-  find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
-    engines: {node: '>=8'}
-
-  locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
-
-  p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
-    engines: {node: '>=8'}
-
-  p-limit@2.3.0:
-    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
-    engines: {node: '>=6'}
-
-  p-try@2.2.0:
-    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
-    engines: {node: '>=6'}
-
-  require-main-filename@2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-
-  set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-
-  which-module@2.0.1:
-    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
-
-  y18n@4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-
-  yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
-
-  camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
-
-  '@types/qrcode@1.5.6':
-    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
-
 snapshots:
 
-  '@zumer/snapdom@2.24.15': {}
-
   '@adobe/css-tools@4.4.4': {}
 
   '@agentclientprotocol/sdk@1.3.0(zod@4.3.6)':
@@ -13260,6 +13310,8 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.28.6': {}
 
+  '@babel/helper-plugin-utils@7.29.7': {}
+
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.28.5': {}
@@ -13275,6 +13327,21 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
+  '@babel/plugin-syntax-flow@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.29.7
+
   '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -13283,12 +13350,12 @@ snapshots:
   '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-plugin-utils': 7.29.7
 
   '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-plugin-utils': 7.29.7
 
   '@babel/runtime@7.28.6': {}
 
@@ -13333,6 +13400,20 @@ snapshots:
       '@types/react': 19.2.17
       date-fns: 4.1.0
 
+  '@base-ui/react@1.7.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@base-ui/utils': 0.3.2(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      use-sync-external-store: 1.6.0(react@19.2.0)
+    optionalDependencies:
+      '@date-fns/tz': 1.4.1
+      '@types/react': 19.2.17
+      date-fns: 4.1.0
+
   '@base-ui/utils@0.3.1(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -13344,6 +13425,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@base-ui/utils@0.3.2(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      reselect: 5.2.0
+      use-sync-external-store: 1.6.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   '@bcoe/v8-coverage@1.0.2': {}
 
   '@better-auth/api-key@1.5.5(patch_hash=ba3020ffdebafda4df4a616ccbcdb40c0101374c9fe08e0a8f87c5c96102f054)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(better-auth@1.5.5(f00b050de135afaee0bf8a26fdaa86ac))':
@@ -13380,24 +13472,24 @@ snapshots:
     optionalDependencies:
       drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260317.1)(@electric-sql/pglite@0.3.15)(@opentelemetry/api@1.9.0)(@prisma/client@7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@13.0.3)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3))(@types/better-sqlite3@7.6.13)(@types/pg@8.15.6)(better-sqlite3@13.0.3)(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@13.0.3)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))
 
-  '@better-auth/electron@1.5.5(patch_hash=c0bab8bf6f42816473109d61f757f961d4f3bcc1b1cd07c4fe7c2f012fd291ac)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(817ae14f18a6fb615413e202a25d2574))(better-call@1.3.2(zod@4.3.6))(conf@15.1.0)(electron@39.5.1)':
+  '@better-auth/electron@1.5.5(patch_hash=c0bab8bf6f42816473109d61f757f961d4f3bcc1b1cd07c4fe7c2f012fd291ac)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(3a09029b520b24afb85d8f6cade5c8d8))(better-call@1.3.2(zod@4.3.6))(conf@15.1.0)(electron@39.5.1)':
     dependencies:
       '@better-auth/core': 1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0)
       '@better-auth/utils': 0.3.1
       '@better-fetch/fetch': 1.1.21
-      better-auth: 1.5.5(817ae14f18a6fb615413e202a25d2574)
+      better-auth: 1.5.5(3a09029b520b24afb85d8f6cade5c8d8)
       better-call: 1.3.2(zod@4.3.6)
       zod: 4.3.6
     optionalDependencies:
       conf: 15.1.0
       electron: 39.5.1
 
-  '@better-auth/electron@1.5.5(patch_hash=c0bab8bf6f42816473109d61f757f961d4f3bcc1b1cd07c4fe7c2f012fd291ac)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd))(better-call@1.3.2(zod@4.3.6))(conf@15.1.0)(electron@39.5.1)':
+  '@better-auth/electron@1.5.5(patch_hash=c0bab8bf6f42816473109d61f757f961d4f3bcc1b1cd07c4fe7c2f012fd291ac)(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(better-auth@1.5.5(532ad3d3c7da62ce07897da849d81e18))(better-call@1.3.2(zod@4.3.6))(conf@15.1.0)(electron@39.5.1)':
     dependencies:
       '@better-auth/core': 1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0)
       '@better-auth/utils': 0.3.1
       '@better-fetch/fetch': 1.1.21
-      better-auth: 1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd)
+      better-auth: 1.5.5(532ad3d3c7da62ce07897da849d81e18)
       better-call: 1.3.2(zod@4.3.6)
       zod: 4.3.6
     optionalDependencies:
@@ -13757,10 +13849,10 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
-  '@convex-dev/better-auth@0.11.2(@standard-schema/spec@1.1.0)(better-auth@1.5.5(817ae14f18a6fb615413e202a25d2574))(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)':
+  '@convex-dev/better-auth@0.11.2(@standard-schema/spec@1.1.0)(better-auth@1.5.5(3a09029b520b24afb85d8f6cade5c8d8))(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)':
     dependencies:
       '@better-fetch/fetch': 1.1.21
-      better-auth: 1.5.5(817ae14f18a6fb615413e202a25d2574)
+      better-auth: 1.5.5(3a09029b520b24afb85d8f6cade5c8d8)
       common-tags: 1.8.2
       convex: 1.33.1(react@19.2.0)
       convex-helpers: 0.1.111(@standard-schema/spec@1.1.0)(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)(zod@4.3.6)
@@ -13775,10 +13867,10 @@ snapshots:
       - hono
       - typescript
 
-  '@convex-dev/better-auth@0.11.2(@standard-schema/spec@1.1.0)(better-auth@1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd))(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)':
+  '@convex-dev/better-auth@0.11.2(@standard-schema/spec@1.1.0)(better-auth@1.5.5(532ad3d3c7da62ce07897da849d81e18))(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)':
     dependencies:
       '@better-fetch/fetch': 1.1.21
-      better-auth: 1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd)
+      better-auth: 1.5.5(532ad3d3c7da62ce07897da849d81e18)
       common-tags: 1.8.2
       convex: 1.33.1(react@19.2.0)
       convex-helpers: 0.1.111(@standard-schema/spec@1.1.0)(convex@1.33.1(react@19.2.0))(hono@4.12.14)(react@19.2.0)(typescript@5.9.3)(zod@4.3.6)
@@ -13985,6 +14077,8 @@ snapshots:
       react: 19.2.0
       tslib: 2.8.1
 
+  '@dual-bundle/import-meta-resolve@4.2.1': {}
+
   '@electric-sql/pglite-socket@0.0.20(@electric-sql/pglite@0.3.15)':
     dependencies:
       '@electric-sql/pglite': 0.3.15
@@ -14662,7 +14756,7 @@ snapshots:
 
   '@fumadocs/base-ui@16.8.12(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@tailwindcss/oxide@4.3.3)(@types/mdx@2.0.14)(@types/react@19.2.17)(date-fns@4.1.0)(fumadocs-core@16.8.12(@mdx-js/mdx@3.1.1)(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.17)(lucide-react@0.523.0(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react-router@7.13.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(zod@4.3.6))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(tailwindcss@4.3.3)':
     dependencies:
-      '@base-ui/react': 1.6.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@fumadocs/tailwind': 0.0.5(@tailwindcss/oxide@4.3.3)(tailwindcss@4.3.3)
       class-variance-authority: 0.7.1
       fumadocs-core: 16.8.12(@mdx-js/mdx@3.1.1)(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.17)(lucide-react@0.523.0(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react-router@7.13.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(zod@4.3.6)
@@ -15810,22 +15904,6 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16016,15 +16094,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
-  '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16051,24 +16120,6 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-menubar@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16203,24 +16254,6 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16272,35 +16305,6 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -16338,21 +16342,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
-  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16384,17 +16373,6 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-toggle@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.4
@@ -16521,12 +16499,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.17)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.17
-
   '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.17)(react@19.2.0)':
     dependencies:
       '@radix-ui/rect': 1.1.1
@@ -17016,6 +16988,79 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@stylexjs/babel-plugin@0.19.0':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@dual-bundle/import-meta-resolve': 4.2.1
+      '@stylexjs/shared': 0.19.0
+      '@stylexjs/stylex': 0.19.0
+      postcss-value-parser: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@stylexjs/shared@0.19.0': {}
+
+  '@stylexjs/stylex@0.19.0':
+    dependencies:
+      css-mediaquery: 0.1.2
+      invariant: 2.2.4
+      styleq: 0.2.1
+
+  '@stylexjs/unplugin@0.19.0(unplugin@3.3.0(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-syntax-flow': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.0)
+      '@stylexjs/babel-plugin': 0.19.0
+      browserslist: 4.28.1
+      lightningcss: 1.32.0
+      unplugin: 3.3.0(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@stylexjs/unplugin@0.19.0(unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-syntax-flow': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.0)
+      '@stylexjs/babel-plugin': 0.19.0
+      browserslist: 4.28.1
+      lightningcss: 1.32.0
+      unplugin: 3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@stylexjs/unplugin@0.19.0(unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-syntax-flow': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.0)
+      '@stylexjs/babel-plugin': 0.19.0
+      browserslist: 4.28.1
+      lightningcss: 1.32.0
+      unplugin: 3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@stylexjs/unplugin@0.19.0(unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-syntax-flow': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.0)
+      '@stylexjs/babel-plugin': 0.19.0
+      browserslist: 4.28.1
+      lightningcss: 1.32.0
+      unplugin: 3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+    transitivePeerDependencies:
+      - supports-color
+
   '@swc/core-darwin-arm64@1.15.11':
     optional: true
 
@@ -17268,14 +17313,14 @@ snapshots:
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
 
-  '@tanstack/react-start-rsc@0.1.32(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))':
+  '@tanstack/react-start-rsc@0.1.32(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
       '@tanstack/start-fn-stubs': 1.162.0
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       '@tanstack/start-storage-context': 1.167.17
       pathe: 2.0.3
@@ -17296,14 +17341,14 @@ snapshots:
       - webpack
     optional: true
 
-  '@tanstack/react-start-rsc@0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/react-start-rsc@0.1.32(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
       '@tanstack/start-fn-stubs': 1.162.0
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       '@tanstack/start-storage-context': 1.167.17
       pathe: 2.0.3
@@ -17324,14 +17369,14 @@ snapshots:
       - webpack
     optional: true
 
-  '@tanstack/react-start-rsc@0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/react-start-rsc@0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
       '@tanstack/start-fn-stubs': 1.162.0
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       '@tanstack/start-storage-context': 1.167.17
       pathe: 2.0.3
@@ -17350,15 +17395,16 @@ snapshots:
       - vite
       - vite-plugin-solid
       - webpack
+    optional: true
 
-  '@tanstack/react-start-rsc@0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/react-start-rsc@0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
       '@tanstack/start-fn-stubs': 1.162.0
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       '@tanstack/start-storage-context': 1.167.17
       pathe: 2.0.3
@@ -17377,16 +17423,15 @@ snapshots:
       - vite
       - vite-plugin-solid
       - webpack
-    optional: true
 
-  '@tanstack/react-start-rsc@0.1.32(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/react-start-rsc@0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
       '@tanstack/start-fn-stubs': 1.162.0
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       '@tanstack/start-storage-context': 1.167.17
       pathe: 2.0.3
@@ -17417,21 +17462,21 @@ snapshots:
     transitivePeerDependencies:
       - crossws
 
-  '@tanstack/react-start@1.168.33(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))':
+  '@tanstack/react-start@1.168.33(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/react-start-client': 1.168.16(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
+      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/react-start-server': 1.167.22(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       pathe: 2.0.3
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
-      vite: 6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17447,21 +17492,21 @@ snapshots:
       - webpack
     optional: true
 
-  '@tanstack/react-start@1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/react-start@1.168.33(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/react-start-client': 1.168.16(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
       '@tanstack/react-start-server': 1.167.22(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       pathe: 2.0.3
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
-      vite: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17477,21 +17522,21 @@ snapshots:
       - webpack
     optional: true
 
-  '@tanstack/react-start@1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/react-start@1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/react-start-client': 1.168.16(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/react-start-server': 1.167.22(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       pathe: 2.0.3
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
-      vite: 8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17505,16 +17550,17 @@ snapshots:
       - unloader
       - vite-plugin-solid
       - webpack
+    optional: true
 
-  '@tanstack/react-start@1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/react-start@1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/react-start-client': 1.168.16(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/react-start-server': 1.167.22(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       pathe: 2.0.3
       react: 19.2.0
@@ -17534,23 +17580,22 @@ snapshots:
       - unloader
       - vite-plugin-solid
       - webpack
-    optional: true
 
-  '@tanstack/react-start@1.168.33(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/react-start@1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/react-start-client': 1.168.16(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/react-start-rsc': 0.1.32(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/react-start-rsc': 0.1.32(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/react-start-server': 1.167.22(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-client-core': 1.170.14
-      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/start-plugin-core': 1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/start-server-core': 1.169.17
       pathe: 2.0.3
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
     optionalDependencies:
-      vite: 7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17660,7 +17705,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))':
+  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/template': 7.28.6
@@ -17669,11 +17714,11 @@ snapshots:
       '@tanstack/router-generator': 1.167.21
       '@tanstack/router-utils': 1.162.2
       chokidar: 5.0.0
-      unplugin: 3.3.0(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
+      unplugin: 3.3.0(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       zod: 4.3.6
     optionalDependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      vite: 6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17683,9 +17728,8 @@ snapshots:
       - rollup
       - supports-color
       - unloader
-    optional: true
 
-  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/template': 7.28.6
@@ -17694,11 +17738,11 @@ snapshots:
       '@tanstack/router-generator': 1.167.21
       '@tanstack/router-utils': 1.162.2
       chokidar: 5.0.0
-      unplugin: 3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      unplugin: 3.3.0(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
       zod: 4.3.6
     optionalDependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      vite: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17708,8 +17752,9 @@ snapshots:
       - rollup
       - supports-color
       - unloader
+    optional: true
 
-  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/template': 7.28.6
@@ -17718,11 +17763,11 @@ snapshots:
       '@tanstack/router-generator': 1.167.21
       '@tanstack/router-utils': 1.162.2
       chokidar: 5.0.0
-      unplugin: 3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      unplugin: 3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       zod: 4.3.6
     optionalDependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      vite: 8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17732,8 +17777,9 @@ snapshots:
       - rollup
       - supports-color
       - unloader
+    optional: true
 
-  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/template': 7.28.6
@@ -17756,9 +17802,8 @@ snapshots:
       - rollup
       - supports-color
       - unloader
-    optional: true
 
-  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/router-plugin@1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/template': 7.28.6
@@ -17767,11 +17812,11 @@ snapshots:
       '@tanstack/router-generator': 1.167.21
       '@tanstack/router-utils': 1.162.2
       chokidar: 5.0.0
-      unplugin: 3.3.0(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      unplugin: 3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       zod: 4.3.6
     optionalDependencies:
       '@tanstack/react-router': 1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      vite: 7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17819,14 +17864,14 @@ snapshots:
 
   '@tanstack/start-fn-stubs@1.162.0': {}
 
-  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))':
+  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.29.0
       '@babel/types': 7.29.0
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-generator': 1.167.21
-      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
+      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-server-core': 1.169.17
       exsolve: 1.0.8
@@ -17838,11 +17883,11 @@ snapshots:
       srvx: 0.11.22
       tinyglobby: 0.2.17
       ufo: 1.6.3
-      vitefu: 1.1.3(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
+      vitefu: 1.1.3(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       xmlbuilder2: 4.0.3
       zod: 4.3.6
     optionalDependencies:
-      vite: 6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17858,14 +17903,14 @@ snapshots:
       - webpack
     optional: true
 
-  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.29.0
       '@babel/types': 7.29.0
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-generator': 1.167.21
-      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-server-core': 1.169.17
       exsolve: 1.0.8
@@ -17877,11 +17922,11 @@ snapshots:
       srvx: 0.11.22
       tinyglobby: 0.2.17
       ufo: 1.6.3
-      vitefu: 1.1.3(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      vitefu: 1.1.3(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2))
       xmlbuilder2: 4.0.3
       zod: 4.3.6
     optionalDependencies:
-      vite: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17897,14 +17942,14 @@ snapshots:
       - webpack
     optional: true
 
-  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.29.0
       '@babel/types': 7.29.0
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-generator': 1.167.21
-      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-server-core': 1.169.17
       exsolve: 1.0.8
@@ -17916,11 +17961,11 @@ snapshots:
       srvx: 0.11.22
       tinyglobby: 0.2.17
       ufo: 1.6.3
-      vitefu: 1.1.3(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      vitefu: 1.1.3(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       xmlbuilder2: 4.0.3
       zod: 4.3.6
     optionalDependencies:
-      vite: 8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -17934,15 +17979,16 @@ snapshots:
       - unloader
       - vite-plugin-solid
       - webpack
+    optional: true
 
-  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.29.0
       '@babel/types': 7.29.0
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-generator': 1.167.21
-      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-server-core': 1.169.17
       exsolve: 1.0.8
@@ -17972,16 +18018,15 @@ snapshots:
       - unloader
       - vite-plugin-solid
       - webpack
-    optional: true
 
-  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
+  '@tanstack/start-plugin-core@1.171.24(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.29.0
       '@babel/types': 7.29.0
       '@tanstack/router-core': 1.171.15
       '@tanstack/router-generator': 1.167.21
-      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/router-plugin': 1.168.23(@tanstack/react-router@1.170.18(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(esbuild@0.28.2)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       '@tanstack/router-utils': 1.162.2
       '@tanstack/start-server-core': 1.169.17
       exsolve: 1.0.8
@@ -17993,11 +18038,11 @@ snapshots:
       srvx: 0.11.22
       tinyglobby: 0.2.17
       ufo: 1.6.3
-      vitefu: 1.1.3(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      vitefu: 1.1.3(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       xmlbuilder2: 4.0.3
       zod: 4.3.6
     optionalDependencies:
-      vite: 7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -18357,6 +18402,10 @@ snapshots:
     dependencies:
       '@types/node': 26.2.0
 
+  '@types/qrcode@1.5.6':
+    dependencies:
+      '@types/node': 26.2.0
+
   '@types/react-dom@19.2.3(@types/react@19.2.17)':
     dependencies:
       '@types/react': 19.2.17
@@ -19079,6 +19128,8 @@ snapshots:
 
   '@zag-js/utils@1.42.0': {}
 
+  '@zumer/snapdom@2.24.15': {}
+
   abbrev@4.0.0: {}
 
   abbrev@5.0.0: {}
@@ -19421,17 +19472,17 @@ snapshots:
       elkjs: 0.11.1
       entities: 7.0.1
 
-  better-auth-capacitor@0.3.6(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@capacitor/app@8.1.0(@capacitor/core@8.5.0))(@capacitor/core@8.5.0)(@capacitor/preferences@8.0.1(@capacitor/core@8.5.0))(better-auth@1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd)):
+  better-auth-capacitor@0.3.6(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@capacitor/app@8.1.0(@capacitor/core@8.5.0))(@capacitor/core@8.5.0)(@capacitor/preferences@8.0.1(@capacitor/core@8.5.0))(better-auth@1.5.5(532ad3d3c7da62ce07897da849d81e18)):
     dependencies:
       '@better-auth/core': 1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0)
       '@capacitor/core': 8.5.0
       '@capacitor/preferences': 8.0.1(@capacitor/core@8.5.0)
-      better-auth: 1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd)
+      better-auth: 1.5.5(532ad3d3c7da62ce07897da849d81e18)
       zod: 4.3.6
     optionalDependencies:
       '@capacitor/app': 8.1.0(@capacitor/core@8.5.0)
 
-  better-auth@1.5.5(817ae14f18a6fb615413e202a25d2574):
+  better-auth@1.5.5(3a09029b520b24afb85d8f6cade5c8d8):
     dependencies:
       '@better-auth/core': 1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0)
       '@better-auth/drizzle-adapter': 1.5.5(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260317.1)(@electric-sql/pglite@0.3.15)(@opentelemetry/api@1.9.0)(@prisma/client@7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3))(@types/better-sqlite3@7.6.13)(@types/pg@8.15.6)(better-sqlite3@12.10.0)(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3)))
@@ -19452,7 +19503,7 @@ snapshots:
       zod: 4.3.6
     optionalDependencies:
       '@prisma/client': 7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3)
-      '@tanstack/react-start': 1.168.33(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/react-start': 1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       better-sqlite3: 12.10.0
       drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260317.1)(@electric-sql/pglite@0.3.15)(@opentelemetry/api@1.9.0)(@prisma/client@7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3))(@types/better-sqlite3@7.6.13)(@types/pg@8.15.6)(better-sqlite3@12.10.0)(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))
       mongodb: 7.1.0(socks@2.8.7)
@@ -19465,7 +19516,7 @@ snapshots:
     transitivePeerDependencies:
       - '@cloudflare/workers-types'
 
-  better-auth@1.5.5(9278b3e7a79d4cef76e921e6c2a42420):
+  better-auth@1.5.5(532ad3d3c7da62ce07897da849d81e18):
     dependencies:
       '@better-auth/core': 1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0)
       '@better-auth/drizzle-adapter': 1.5.5(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260317.1)(@electric-sql/pglite@0.3.15)(@opentelemetry/api@1.9.0)(@prisma/client@7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3))(@types/better-sqlite3@7.6.13)(@types/pg@8.15.6)(better-sqlite3@12.10.0)(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3)))
@@ -19486,7 +19537,7 @@ snapshots:
       zod: 4.3.6
     optionalDependencies:
       '@prisma/client': 7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3)
-      '@tanstack/react-start': 1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/react-start': 1.168.33(esbuild@0.24.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       better-sqlite3: 12.10.0
       drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260317.1)(@electric-sql/pglite@0.3.15)(@opentelemetry/api@1.9.0)(@prisma/client@7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3))(@types/better-sqlite3@7.6.13)(@types/pg@8.15.6)(better-sqlite3@12.10.0)(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))
       mongodb: 7.1.0(socks@2.8.7)
@@ -19499,7 +19550,7 @@ snapshots:
     transitivePeerDependencies:
       - '@cloudflare/workers-types'
 
-  better-auth@1.5.5(dcb2c8ba3b09f267bb48cd58cd0877bd):
+  better-auth@1.5.5(9278b3e7a79d4cef76e921e6c2a42420):
     dependencies:
       '@better-auth/core': 1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0)
       '@better-auth/drizzle-adapter': 1.5.5(@better-auth/core@1.5.5(@better-auth/utils@0.3.1)(@better-fetch/fetch@1.1.21)(@cloudflare/workers-types@4.20260317.1)(better-call@1.3.2(zod@4.3.6))(jose@6.2.2)(kysely@0.28.11)(nanostores@1.2.0))(@better-auth/utils@0.3.1)(drizzle-orm@0.45.1(@cloudflare/workers-types@4.20260317.1)(@electric-sql/pglite@0.3.15)(@opentelemetry/api@1.9.0)(@prisma/client@7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3))(@types/better-sqlite3@7.6.13)(@types/pg@8.15.6)(better-sqlite3@12.10.0)(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3)))
@@ -19520,7 +19571,7 @@ snapshots:
       zod: 4.3.6
     optionalDependencies:
       '@prisma/client': 7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3)
-      '@tanstack/react-start': 1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
+      '@tanstack/react-start': 1.168.33(esbuild@0.28.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2))
       better-sqlite3: 12.10.0
       drizzle-orm: 0.45.1(@cloudflare/workers-types@4.20260317.1)(@electric-sql/pglite@0.3.15)(@opentelemetry/api@1.9.0)(@prisma/client@7.4.0(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))(typescript@5.9.3))(@types/better-sqlite3@7.6.13)(@types/pg@8.15.6)(better-sqlite3@12.10.0)(kysely@0.28.11)(mysql2@3.15.3)(postgres@3.4.7)(prisma@7.4.0(@types/react@19.2.17)(better-sqlite3@12.10.0)(magicast@0.3.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.3))
       mongodb: 7.1.0(socks@2.8.7)
@@ -19780,6 +19831,8 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  camelcase@5.3.1: {}
+
   caniuse-lite@1.0.30001769: {}
 
   ccount@2.0.1: {}
@@ -19882,6 +19935,12 @@ snapshots:
 
   cli-width@4.1.0: {}
 
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -20059,6 +20118,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-mediaquery@0.1.2: {}
+
   css.escape@1.5.1: {}
 
   cssstyle@4.6.0:
@@ -20297,6 +20358,8 @@ snapshots:
     optionalDependencies:
       supports-color: 11.0.0
 
+  decamelize@1.2.0: {}
+
   decimal.js-light@2.5.1: {}
 
   decimal.js@10.6.0: {}
@@ -20384,6 +20447,8 @@ snapshots:
 
   diff@9.0.0: {}
 
+  dijkstrajs@1.0.3: {}
+
   dir-compare@4.2.0:
     dependencies:
       minimatch: 3.1.2
@@ -21381,6 +21446,11 @@ snapshots:
 
   find-up-simple@1.0.1: {}
 
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -22118,6 +22188,10 @@ snapshots:
 
   internmap@2.0.3: {}
 
+  invariant@2.2.4:
+    dependencies:
+      loose-envify: 1.4.0
+
   ip-address@10.1.0: {}
 
   ipaddr.js@1.9.1: {}
@@ -22552,6 +22626,10 @@ snapshots:
       pkg-types: 2.3.0
       quansync: 0.2.11
 
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -23680,6 +23758,10 @@ snapshots:
 
   p-finally@1.0.0: {}
 
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -23688,6 +23770,10 @@ snapshots:
     dependencies:
       yocto-queue: 1.2.2
 
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
@@ -23705,6 +23791,8 @@ snapshots:
     dependencies:
       p-finally: 1.0.0
 
+  p-try@2.2.0: {}
+
   package-json-from-dist@1.0.1: {}
 
   package-manager-detector@1.6.0: {}
@@ -23838,6 +23926,8 @@ snapshots:
       base64-js: 1.5.1
       xmlbuilder: 15.1.1
 
+  pngjs@5.0.0: {}
+
   points-on-curve@0.2.0: {}
 
   points-on-path@0.2.1:
@@ -23847,6 +23937,8 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
+  postcss-value-parser@4.2.0: {}
+
   postcss@8.5.15:
     dependencies:
       nanoid: 3.3.12
@@ -24178,6 +24270,12 @@ snapshots:
 
   pvutils@1.1.5: {}
 
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
   qs@6.15.1:
     dependencies:
       side-channel: 1.1.0
@@ -24669,6 +24767,8 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  require-main-filename@2.0.0: {}
+
   resedit@1.7.2:
     dependencies:
       pe-library: 0.4.1
@@ -24956,6 +25056,8 @@ snapshots:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.6.0
 
+  set-blocking@2.0.0: {}
+
   set-cookie-parser@2.7.2: {}
 
   set-cookie-parser@3.0.1: {}
@@ -25361,6 +25463,8 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
+  styleq@0.2.1: {}
+
   stylis@4.4.0: {}
 
   sumchecker@3.0.1:
@@ -25800,6 +25904,17 @@ snapshots:
       acorn: 8.16.0
       webpack-virtual-modules: 0.6.2
 
+  unplugin@3.3.0(esbuild@0.24.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)):
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      picomatch: 4.0.5
+      webpack-virtual-modules: 0.6.2
+    optionalDependencies:
+      esbuild: 0.24.2
+      rolldown: 1.1.5
+      rollup: 4.57.1
+      vite: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+
   unplugin@3.3.0(esbuild@0.24.2)(rollup@4.57.1)(vite@6.4.1(@types/node@24.10.12)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.7)(yaml@2.8.2)):
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -25822,7 +25937,7 @@ snapshots:
       rollup: 4.57.1
       vite: 6.4.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
 
-  unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)):
+  unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)):
     dependencies:
       '@jridgewell/remapping': 2.3.5
       picomatch: 4.0.5
@@ -25831,16 +25946,18 @@ snapshots:
       esbuild: 0.28.2
       rolldown: 1.1.5
       rollup: 4.57.1
-      vite: 8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
 
-  unplugin@3.3.0(vite@7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)):
+  unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.1.5)(rollup@4.57.1)(vite@8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)):
     dependencies:
       '@jridgewell/remapping': 2.3.5
       picomatch: 4.0.5
       webpack-virtual-modules: 0.6.2
     optionalDependencies:
-      vite: 7.3.1(@types/node@24.10.12)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
-    optional: true
+      esbuild: 0.28.2
+      rolldown: 1.1.5
+      rollup: 4.57.1
+      vite: 8.1.5(@types/node@24.10.12)(esbuild@0.28.2)(jiti@2.7.0)(terser@5.46.0)(tsx@4.23.13)(yaml@2.8.2)
 
   unzipper@0.12.3:
     dependencies:
@@ -26661,6 +26778,8 @@ snapshots:
       is-weakmap: 2.0.2
       is-weakset: 2.0.4
 
+  which-module@2.0.1: {}
+
   which-typed-array@1.1.20:
     dependencies:
       available-typed-arrays: 1.0.7
@@ -26767,6 +26886,8 @@ snapshots:
   xtend@4.0.2:
     optional: true
 
+  y18n@4.0.3: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
@@ -26777,8 +26898,27 @@ snapshots:
 
   yaml@2.8.2: {}
 
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
   yargs-parser@21.1.1: {}
 
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
@@ -26835,73 +26975,3 @@ snapshots:
       use-sync-external-store: 1.6.0(react@19.2.0)
 
   zwitch@2.0.4: {}
-
-  qrcode@1.5.4:
-    dependencies:
-      dijkstrajs: 1.0.3
-      pngjs: 5.0.0
-      yargs: 15.4.1
-
-  dijkstrajs@1.0.3: {}
-
-  pngjs@5.0.0: {}
-
-  yargs@15.4.1:
-    dependencies:
-      cliui: 6.0.0
-      decamelize: 1.2.0
-      find-up: 4.1.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 4.2.3
-      which-module: 2.0.1
-      y18n: 4.0.3
-      yargs-parser: 18.1.3
-
-  cliui@6.0.0:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-
-  decamelize@1.2.0: {}
-
-  find-up@4.1.0:
-    dependencies:
-      locate-path: 5.0.0
-      path-exists: 4.0.0
-
-  locate-path@5.0.0:
-    dependencies:
-      p-locate: 4.1.0
-
-  p-locate@4.1.0:
-    dependencies:
-      p-limit: 2.3.0
-
-  p-limit@2.3.0:
-    dependencies:
-      p-try: 2.2.0
-
-  p-try@2.2.0: {}
-
-  require-main-filename@2.0.0: {}
-
-  set-blocking@2.0.0: {}
-
-  which-module@2.0.1: {}
-
-  y18n@4.0.3: {}
-
-  yargs-parser@18.1.3:
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
-
-  camelcase@5.3.1: {}
-
-  '@types/qrcode@1.5.6':
-    dependencies:
-      '@types/node': 26.2.0
diff --git a/site-docs/app/global.css b/site-docs/app/global.css
index de0096ef6..610111423 100644
--- a/site-docs/app/global.css
+++ b/site-docs/app/global.css
@@ -1,3 +1,4 @@
+@layer theme, base, stylex, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @import 'fumadocs-ui/css/ocean.css';
diff --git a/site-docs/components/landing-app-preview.tsx b/site-docs/components/landing-app-preview.tsx
index cae26520c..bfa40ef63 100644
--- a/site-docs/components/landing-app-preview.tsx
+++ b/site-docs/components/landing-app-preview.tsx
@@ -103,7 +103,7 @@ import {
   type SessionListRepoState,
   type SessionListRow,
 } from '@/components/session-list';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { TooltipProvider } from '@/ui/tooltip';
 import {
   CODEX_COLLABORATION_MODE_CONFIG_ID,
@@ -486,12 +486,10 @@ function buildLodyPrHistory(locale: LandingLocale): SessionHistoryParsed[] {
           text: isZh
             ? [
                 '确认根因：选中态的 `outline` 画在盒子外侧，但横向留白在 `ScrollArea` root 上，内部 Radix viewport 是真正的裁剪边界，所以左右 1px 被削掉。',
-                '',
                 '修法是把横向 gutter 移到 viewport：列表行仍保持相同位置，滚动条位置不变，但 outline 有空间完整绘制。',
               ].join('\n')
             : [
                 'Root cause confirmed: the selected-state `outline` is painted outside the row box, while the horizontal gutter lived on the `ScrollArea` root. The inner Radix viewport is the actual clipping boundary, so the left and right 1px outline was shaved off.',
-                '',
                 'The fix is to move the horizontal gutter to the viewport: rows keep the same visual position, the scrollbar position is unchanged, and the outline has room to render fully.',
               ].join('\n'),
         },
@@ -554,14 +552,12 @@ function buildLodyPrHistory(locale: LandingLocale): SessionHistoryParsed[] {
           text: isZh
             ? [
                 'PR 已创建：**https://github.com/loro-dev/lody/pull/2564**',
-                '',
                 '- 分支：`feat/selection-highlight-clipping` -> `main`',
                 '- 提交：`fix: stop sidebar selection outline being clipped on the sides`',
                 '- 改动：只修改 `loro-sidebar.tsx`，把横向 gutter 移到 viewport，避免选中高亮左右被裁剪。',
               ].join('\n')
             : [
                 'PR created: **https://github.com/loro-dev/lody/pull/2564**',
-                '',
                 '- Branch: `feat/selection-highlight-clipping` -> `main`',
                 '- Commit: `fix: stop sidebar selection outline being clipped on the sides`',
                 '- Change: only `loro-sidebar.tsx`, moving the horizontal gutter to the viewport so selected highlights are not clipped on the sides.',
@@ -578,16 +574,12 @@ function buildLodyPrHistory(locale: LandingLocale): SessionHistoryParsed[] {
           text: isZh
             ? [
                 '远端状态也确认好了。提交 `119f8827` 已在 `origin/feat/selection-highlight-clipping` 上，PR #2564 就是基于这个提交创建的。',
-                '',
                 '之前看起来像没 push，是因为本地分支还在跟踪 `origin/main`。我已经把 upstream 设置到正确的远端分支，`git status` 现在显示本地和远端一致。',
-                '',
                 '没有剩余内容需要 push。',
               ].join('\n')
             : [
                 'Remote state is confirmed. Commit `119f8827` is on `origin/feat/selection-highlight-clipping`, and PR #2564 was created from that commit.',
-                '',
                 'It only looked unpushed because the local branch was still tracking `origin/main`. I set the upstream to the correct remote branch, and `git status` now shows the branch is even with the remote.',
-                '',
                 'Nothing left to push.',
               ].join('\n'),
         },
@@ -667,20 +659,16 @@ function buildFontSizePlanHistory(locale: LandingLocale): SessionHistoryParsed[]
           text: isZh
             ? [
                 '计划已经收敛到 3 个落点：',
-                '',
                 '- 偏好状态：在 `packages/components/src/atoms/settings.ts` 增加 `chatFontSize` 档位，建议用 Small / Default / Large / Extra Large 这类离散值。',
                 '- 设置入口：桌面 `general-setting.tsx` 和移动 `mobile-general-settings.tsx` 都接入同一组 i18n 文案和选项。',
                 '- 渲染入口：从会话流把字号传到 Markdown、普通用户文本和工具内容；字号变化时触发虚拟列表重新测量。',
-                '',
                 '还需要你确认一个产品选择：字号配置应该只影响消息正文，还是同时影响工具输出、terminal 和 thinking block？',
               ].join('\n')
             : [
                 'The plan narrows to 3 implementation points:',
-                '',
                 '- Preference state: add a `chatFontSize` setting in `packages/components/src/atoms/settings.ts`, preferably as discrete Small / Default / Large / Extra Large values.',
                 '- Settings entry points: wire the same i18n labels and options into desktop `general-setting.tsx` and mobile `mobile-general-settings.tsx`.',
                 '- Rendering entry point: pass the size from the session stream into Markdown, plain user text, and tool content; trigger virtual-list remeasurement when it changes.',
-                '',
                 'One product choice still needs confirmation: should the font-size setting affect only message body text, or should it also affect tool output, terminal output, and thinking blocks?',
               ].join('\n'),
         },
@@ -763,18 +751,14 @@ function buildLodyFeedbackHistory(locale: LandingLocale): SessionHistoryParsed[]
           text: isZh
             ? [
                 '已修复第一版：',
-                '',
                 '- `src/server/services/admin.ts`：重排只改 `sortOrder`；只有跨状态列移动时才刷新 `updatedAt`。',
                 '- `src/features/admin/api.ts`：乐观更新同步改为只在状态变化时更新本地 `updatedAt`。',
-                '',
                 '验证已通过：`pnpm lint`、`pnpm exec tsc --noEmit`、`pnpm build`。',
               ].join('\n')
             : [
                 'First fix completed:',
-                '',
                 '- `src/server/services/admin.ts`: reorder now only changes `sortOrder`; `updatedAt` changes only when an item moves across status columns.',
                 '- `src/features/admin/api.ts`: the optimistic update now mirrors that behavior and only changes local `updatedAt` on status changes.',
-                '',
                 'Checks passed: `pnpm lint`, `pnpm exec tsc --noEmit`, and `pnpm build`.',
               ].join('\n'),
         },
@@ -821,14 +805,12 @@ function buildLodyFeedbackHistory(locale: LandingLocale): SessionHistoryParsed[]
           text: isZh
             ? [
                 '已创建 draft PR：**https://github.com/loro-dev/lody-feedback/pull/64**',
-                '',
                 '- 分支：`codex/fix-roadmap-updated-at`',
                 '- 提交：`7a830ad fix roadmap updated timestamps`',
                 '- 验证：`pnpm lint`、`pnpm exec tsc --noEmit`、`pnpm build` 都已通过。',
               ].join('\n')
             : [
                 'Draft PR created: **https://github.com/loro-dev/lody-feedback/pull/64**',
-                '',
                 '- Branch: `codex/fix-roadmap-updated-at`',
                 '- Commit: `7a830ad fix roadmap updated timestamps`',
                 '- Verification: `pnpm lint`, `pnpm exec tsc --noEmit`, and `pnpm build` all passed.',
@@ -889,16 +871,12 @@ function buildLodyFeedbackHistory(locale: LandingLocale): SessionHistoryParsed[]
           text: isZh
             ? [
                 '已按这个语义修正并推送到同一个 PR：**https://github.com/loro-dev/lody-feedback/pull/64**',
-                '',
                 '现在 roadmap 卡片的 `updatedAt` 来自关联 issue/post 的 `feedback_posts.updated_at`，不是 `roadmap_items.updated_at`。跨列移动会更新 issue 自身的 `updatedAt`；纯排序不会更新。',
-                '',
                 '追加提交：`3650547 use issue updated time for roadmap`。验证仍然通过：`pnpm lint`、`pnpm exec tsc --noEmit`、`pnpm build`。',
               ].join('\n')
             : [
                 'Adjusted the semantics and pushed to the same PR: **https://github.com/loro-dev/lody-feedback/pull/64**',
-                '',
                 'Roadmap card `updatedAt` now comes from the linked issue/post `feedback_posts.updated_at`, not `roadmap_items.updated_at`. Moving across columns updates the issue itself; pure sorting does not.',
-                '',
                 'Follow-up commit: `3650547 use issue updated time for roadmap`. Checks still pass: `pnpm lint`, `pnpm exec tsc --noEmit`, and `pnpm build`.',
               ].join('\n'),
         },
@@ -1007,12 +985,10 @@ function buildMobileAcpKeyboardHistory(locale: LandingLocale): SessionHistoryPar
           text: isZh
             ? [
                 'Storybook 几何验证通过：dialog 底部停在键盘上方，footer 不重叠键盘，env textarea 完整落在滚动容器可见区域内。',
-                '',
                 '我还加了 `transition-none`，避免键盘高度变化时 dialog 高度过渡导致滚动测量拿到旧布局。',
               ].join('\n')
             : [
                 'Storybook geometry verification passed: the dialog bottom stops above the keyboard, the footer does not overlap it, and the env textarea stays fully visible inside the scroller.',
-                '',
                 'I also added `transition-none` so keyboard-height changes do not animate the dialog height and break scroll measurement.',
               ].join('\n'),
         },
@@ -1038,24 +1014,20 @@ function buildMobileAcpKeyboardHistory(locale: LandingLocale): SessionHistoryPar
           text: isZh
             ? [
                 '完成，PR 已创建：**https://github.com/loro-dev/lody/pull/2520**',
-                '',
                 '改动要点：',
                 '- 移动端 `AgentConfigDialog` 按 `--native-keyboard-height` 缩短高度，底部停在键盘上方。',
                 '- 自定义 prompt / env 表单滚动区接入 keyboard-aware scroll。',
                 '- 修正共享 hook：直接滚动传入的容器，避免 textarea 被固定 footer 裁掉。',
                 '- 把 ACP provider 配置入口补到 `packages/components/AGENTS.md`，后续定位更快。',
-                '',
                 '验证已跑：`corepack pnpm install`、`corepack pnpm check`、`corepack pnpm --filter @lody/components typecheck`，以及 Storybook `MobileEdit` + Playwright 模拟 320px 键盘高度。',
               ].join('\n')
             : [
                 'Done, PR created: **https://github.com/loro-dev/lody/pull/2520**',
-                '',
                 'Changes:',
                 '- Mobile `AgentConfigDialog` shrinks by `--native-keyboard-height` so its bottom stops above the keyboard.',
                 '- Custom prompt / env form scrollers use keyboard-aware scroll.',
                 '- The shared hook now scrolls the provided container directly, avoiding textarea clipping behind the fixed footer.',
                 '- Added the ACP provider config entry to `packages/components/AGENTS.md` for faster future discovery.',
-                '',
                 'Verification: `corepack pnpm install`, `corepack pnpm check`, `corepack pnpm --filter @lody/components typecheck`, plus Storybook `MobileEdit` with Playwright simulating a 320px keyboard.',
               ].join('\n'),
         },
@@ -2218,8 +2190,9 @@ function DesktopSessionPreview({
     <Button
       type="button"
       variant="ghost"
-      size="icon"
       data-demo="toggle-panel"
+      size="small"
+      icon
       onClick={diffDemo ? diffDemo.onToggleSecondary : onToggleSecondary}
       aria-label={
         secondaryOpen
@@ -2230,7 +2203,7 @@ function DesktopSessionPreview({
             ? '显示侧边栏'
             : 'Show sidebar'
       }
-      className={cn('h-7 w-7 shrink-0 text-muted-foreground', !secondaryOpen && 'mr-[9px]')}
+      className={cn('shrink-0', !secondaryOpen && 'mr-[9px]')}
     >
       <PanelRight className="h-4 w-4" />
     </Button>
@@ -2245,8 +2218,9 @@ function DesktopSessionPreview({
       <Button
         type="button"
         variant="ghost"
-        size="icon"
-        className="h-7 w-7 shrink-0 text-muted-foreground"
+        size="small"
+        icon
+        className="shrink-0"
         aria-label={isZh ? '在编辑器中打开' : 'Open in editor'}
         onClick={() => undefined}
       >
@@ -2255,8 +2229,9 @@ function DesktopSessionPreview({
       <Button
         type="button"
         variant="ghost"
-        size="icon"
-        className="h-7 w-7 shrink-0 text-muted-foreground"
+        size="small"
+        icon
+        className="shrink-0"
         aria-label={isZh ? '更多操作' : 'More actions'}
         onClick={() => undefined}
       >
@@ -2816,11 +2791,9 @@ const DEMO_COPY: Record<LandingLocale, { promptText: string; reply: string; bran
       branchLabel: 'Branch',
       reply: [
         'Lody is a local-first workspace for running coding agents:',
-        '',
         '- **Parallel agents** — every task gets its own isolated git worktree, so multiple agents build side by side without stepping on each other.',
         '- **Live everywhere** — conversations, diffs, and terminal output sync in real time to desktop, browser, and phone.',
         '- **One control plane** — start, review, and merge agent work from any device.',
-        '',
         'This session is running in a fresh worktree created from `main`, so nothing I do here touches your working directory.',
       ].join('\n'),
     },
@@ -2829,11 +2802,9 @@ const DEMO_COPY: Record<LandingLocale, { promptText: string; reply: string; bran
       branchLabel: '分支',
       reply: [
         'Lody 是一个本地优先的 AI 编程协作工作台：',
-        '',
         '- **并行 Agent** — 每个任务都在独立的 git worktree 里进行，多个 Agent 同时开发互不干扰。',
         '- **实时同步** — 对话、diff、终端输出实时同步到桌面、浏览器和手机。',
         '- **统一控制面** — 在任何设备上启动、审查、合并 Agent 的工作。',
-        '',
         '当前会话就运行在从 `main` 创建的全新 worktree 里，我在这里做的任何改动都不会影响你的工作目录。',
       ].join('\n'),
     },
@@ -2895,10 +2866,8 @@ const DESIGN_DEMO_COPY: Record<
       "I'll start the landing page dev server and report it as this session's preview candidate.",
     turn2Text: [
       'The dev server is up:',
-      '',
       '- Local: **http://127.0.0.1:3002/**',
       "- Reported as this session's preview candidate via `lody_report_preview_candidate`.",
-      '',
       'Click the Browser action above the composer to open it in Lody.',
     ].join('\n'),
     comment: 'Remove "desktop, browser, or phone"',
@@ -2911,10 +2880,8 @@ const DESIGN_DEMO_COPY: Record<
     turn2Intro: '我来启动 landing page 的开发服务器，并把它上报为当前会话的预览候选。',
     turn2Text: [
       '开发服务器已经启动：',
-      '',
       '- 本地地址：**http://127.0.0.1:3002/**',
       '- 已通过 `lody_report_preview_candidate` 上报为当前会话的预览候选。',
-      '',
       '点击输入框上方信息栏的浏览器按钮，即可在 Lody 中打开。',
     ].join('\n'),
     comment: '删除 desktop, browser, or phone',
@@ -4150,12 +4117,12 @@ export function LandingAppPreview({
   const sessionPrimaryAction = (
     <Button
       type="button"
-      size="icon"
       variant="ghost"
+      size="small"
+      icon
       className={cn(
         // Desktop session send chip; mobile overrides below.
-        'h-7 w-7 rounded-md border shadow-xs transition-all',
-        'border-primary/[0.28] bg-primary/[0.14] text-foreground hover:bg-primary/[0.22] hover:text-foreground active:translate-y-[1px]'
+        'border-primary/[0.28] bg-primary/[0.14] hover:bg-primary/[0.22] active:translate-y-[1px]'
       )}
       disabled={reply.trim().length === 0 && designAnnotationItems.length === 0}
       aria-label="Send"
@@ -4168,12 +4135,9 @@ export function LandingAppPreview({
   const mobileSessionPrimaryAction = (
     <Button
       type="button"
-      size="icon"
       variant="ghost"
-      className={cn(
-        'h-8 w-8 rounded-full shadow-xs transition-all',
-        'bg-foreground text-background hover:bg-foreground/90 hover:text-background active:translate-y-[1px]'
-      )}
+      icon
+      className={cn('bg-foreground active:translate-y-[1px]')}
       disabled={reply.trim().length === 0}
       aria-label="Send"
     >
diff --git a/site-docs/components/landing-mobile-preview.tsx b/site-docs/components/landing-mobile-preview.tsx
index 73b691117..063b9c349 100644
--- a/site-docs/components/landing-mobile-preview.tsx
+++ b/site-docs/components/landing-mobile-preview.tsx
@@ -31,7 +31,7 @@ import {
 } from '@/components/mobile/mobile-inline-picker';
 import { MobileNewChatSheetContent } from '@/components/mobile/mobile-new-chat-sheet';
 import { ForceMobileLayoutProvider } from '@/hooks/use-mobile';
-import { Button } from '@/ui/button';
+import { Button } from '@lody/ui/button';
 import { cn } from '@/lib/utils';
 import type { LandingLocale } from './landing';
 
@@ -118,11 +118,10 @@ export function LandingMobilePreview({
              beside it — see chat-landing.tsx's sheet `primaryAction`. */
           <Button
             type="button"
-            size="icon"
             variant="ghost"
+            icon
             className={cn(
-              'h-8 w-8 rounded-md border shadow-xs transition-all',
-              'border-primary/[0.25] bg-primary/[0.15] text-foreground hover:bg-primary/[0.25] hover:text-foreground active:translate-y-[1px]'
+              'border-primary/[0.25] bg-primary/[0.15] hover:bg-primary/[0.25] active:translate-y-[1px]'
             )}
             disabled={promptValue.trim().length === 0}
             aria-label="Send"
@@ -143,156 +142,156 @@ export function LandingMobilePreview({
     // Force mobile layout hooks (composer rows, message chrome, no ⌘L) even
     // though the outer browser viewport is still desktop-wide.
     <ForceMobileLayoutProvider force>
-    {/* Phone design size matches the desktop stage height (760). Compact
+      {/* Phone design size matches the desktop stage height (760). Compact
         viewports fit the stage into the reveal slot via container units
         (see `.landing-phone-stage` in global.css / underwater.css). */}
-    <div
-      className="landing-phone-stage landing-phone-stage--narrowed mx-auto overflow-hidden bg-transparent"
-      // `narrowed` is kept for call-site compatibility; the stage is always the
-      // design phone size so enter/exit never paints a full-width dark plate.
-      data-narrowed={narrowed ? 'true' : 'false'}
-      style={
-        {
-          ['--lp-phone-w' as string]: `${PHONE_W}px`,
-          ['--lp-phone-h' as string]: `${PHONE_H}px`,
-          ['--lp-phone-ar' as string]: String(PHONE_AR),
-        } as CSSProperties
-      }
-    >
       <div
-        className="landing-phone-stage__device relative bg-transparent"
-        style={{ width: PHONE_W, height: PHONE_H }}
+        className="landing-phone-stage landing-phone-stage--narrowed mx-auto overflow-hidden bg-transparent"
+        // `narrowed` is kept for call-site compatibility; the stage is always the
+        // design phone size so enter/exit never paints a full-width dark plate.
+        data-narrowed={narrowed ? 'true' : 'false'}
+        style={
+          {
+            ['--lp-phone-w' as string]: `${PHONE_W}px`,
+            ['--lp-phone-h' as string]: `${PHONE_H}px`,
+            ['--lp-phone-ar' as string]: String(PHONE_AR),
+          } as CSSProperties
+        }
       >
-        {/* Screen content sits UNDER the device PNG; the opaque bezel masks its
+        <div
+          className="landing-phone-stage__device relative bg-transparent"
+          style={{ width: PHONE_W, height: PHONE_H }}
+        >
+          {/* Screen content sits UNDER the device PNG; the opaque bezel masks its
             edges/corners, exactly like a real screenshot inside the frame.
             `isolate` + translateZ(0) create a containing block so the home
             dock's `position: fixed` resolves to the screen — not the full-width
             scaled reveal frame (which left the FAB hanging outside the phone). */}
-        <div
-          className="absolute isolate overflow-hidden bg-background text-foreground"
-          data-landing-phone-frame
-          style={{
-            left: SCREEN.left,
-            top: SCREEN.top,
-            width: SCREEN.width,
-            height: SCREEN.height,
-            transform: 'translateZ(0)',
-            // Island inset is applied as real padding below; home-indicator
-            // inset flows into the dock via --k-safe-area-bottom.
-            ['--landing-phone-safe-bottom' as string]: `${SAFE_AREA_BOTTOM}px`,
-            ['--safe-area-bottom' as string]: `${SAFE_AREA_BOTTOM}px`,
-            ['--safe-area-top' as string]: '0px',
-            ['--k-safe-area-bottom' as string]: `${SAFE_AREA_BOTTOM}px`,
-            ['--k-safe-area-top' as string]: '0px',
-            ['--k-safe-area-left' as string]: '0px',
-            ['--k-safe-area-right' as string]: '0px',
-          }}
-        >
-          {/* Home: the all-conversations Chat tab. Stays mounted under the
+          <div
+            className="absolute isolate overflow-hidden bg-background text-foreground"
+            data-landing-phone-frame
+            style={{
+              left: SCREEN.left,
+              top: SCREEN.top,
+              width: SCREEN.width,
+              height: SCREEN.height,
+              transform: 'translateZ(0)',
+              // Island inset is applied as real padding below; home-indicator
+              // inset flows into the dock via --k-safe-area-bottom.
+              ['--landing-phone-safe-bottom' as string]: `${SAFE_AREA_BOTTOM}px`,
+              ['--safe-area-bottom' as string]: `${SAFE_AREA_BOTTOM}px`,
+              ['--safe-area-top' as string]: '0px',
+              ['--k-safe-area-bottom' as string]: `${SAFE_AREA_BOTTOM}px`,
+              ['--k-safe-area-top' as string]: '0px',
+              ['--k-safe-area-left' as string]: '0px',
+              ['--k-safe-area-right' as string]: '0px',
+            }}
+          >
+            {/* Home: the all-conversations Chat tab. Stays mounted under the
               other screens like the real always-mounted mobile home. */}
-          <div className="flex h-full flex-col" style={{ paddingTop: SAFE_AREA_TOP }}>
-            <MobileHomeScreen
-              theme="ios"
-              workspace={{
-                id: 'workspace-lody',
-                name: 'Lody',
-                avatarUrl: '/landing/icon-transparent.png',
-              }}
-              machines={machines}
-              connectionUiState="online"
-              selectedTab="chat"
-              localProjects={localProjects}
-              githubRepositories={githubRepositories}
-              chats={chats}
-              chatFilterPills={chatFilterPills}
-              chatGroupBy="none"
-              labels={labels}
-              onTabSelect={() => undefined}
-              onChatSelect={() => undefined}
-              onNewChat={() => undefined}
-            />
-          </div>
+            <div className="flex h-full flex-col" style={{ paddingTop: SAFE_AREA_TOP }}>
+              <MobileHomeScreen
+                theme="ios"
+                workspace={{
+                  id: 'workspace-lody',
+                  name: 'Lody',
+                  avatarUrl: '/landing/icon-transparent.png',
+                }}
+                machines={machines}
+                connectionUiState="online"
+                selectedTab="chat"
+                localProjects={localProjects}
+                githubRepositories={githubRepositories}
+                chats={chats}
+                chatFilterPills={chatFilterPills}
+                chatGroupBy="none"
+                labels={labels}
+                onTabSelect={() => undefined}
+                onChatSelect={() => undefined}
+                onNewChat={() => undefined}
+              />
+            </div>
 
-          {/* Dim behind the new-chat sheet. */}
-          <div
-            aria-hidden="true"
-            className={cn(
-              'absolute inset-0 z-30 bg-black/40 transition-opacity duration-300',
-              screen === 'compose' ? 'opacity-100' : 'pointer-events-none opacity-0'
-            )}
-          />
+            {/* Dim behind the new-chat sheet. */}
+            <div
+              aria-hidden="true"
+              className={cn(
+                'absolute inset-0 z-30 bg-black/40 transition-opacity duration-300',
+                screen === 'compose' ? 'opacity-100' : 'pointer-events-none opacity-0'
+              )}
+            />
 
-          {/* New-chat bottom sheet: the REAL sheet content in a local slide-up
+            {/* New-chat bottom sheet: the REAL sheet content in a local slide-up
               (Vaul's Drawer portals to <body>, which would escape the phone). */}
-          <div
-            className={cn(
-              'absolute inset-x-0 bottom-0 z-40 rounded-t-2xl border-t border-border bg-background shadow-2xl transition-transform duration-300 ease-out',
-              screen === 'compose' ? 'translate-y-0' : 'translate-y-full'
-            )}
-          >
-            <MobileNewChatSheetContent
-              labels={SHEET_LABELS[locale]}
-              coordinator={MobileInlinePickerCoordinator}
-              machineNode={
-                <MobileInlinePicker
-                  id="landing-mobile-machine"
-                  value="mac-studio"
-                  onChange={() => undefined}
-                  options={[{ value: 'mac-studio', label: machineName }]}
-                  ariaLabel={isZh ? '机器' : 'Machine'}
-                  triggerContent={
-                    <span className="flex items-center gap-1.5">
-                      <Monitor className="h-3.5 w-3.5" />
-                      {machineName}
-                    </span>
-                  }
-                />
-              }
-              contextTypeNode={
-                <MobileInlinePicker
-                  id="landing-mobile-context"
-                  value="chat"
-                  onChange={() => undefined}
-                  options={[{ value: 'chat', label: isZh ? '对话' : 'Chat' }]}
-                  ariaLabel={isZh ? '类型' : 'Type'}
-                  triggerContent={
-                    <span className="flex items-center gap-1.5">
-                      <MessageCircle className="h-3.5 w-3.5" />
-                      {isZh ? '对话' : 'Chat'}
-                    </span>
-                  }
-                />
-              }
-              perTypeNode={null}
-              branchNode={null}
-              secondaryPerTypeNode={null}
-              composer={composer}
-              belowComposerNode={sheetBelowComposerNode}
-              showCloseButton={false}
-            />
-          </div>
+            <div
+              className={cn(
+                'absolute inset-x-0 bottom-0 z-40 rounded-t-2xl border-t border-border bg-background shadow-2xl transition-transform duration-300 ease-out',
+                screen === 'compose' ? 'translate-y-0' : 'translate-y-full'
+              )}
+            >
+              <MobileNewChatSheetContent
+                labels={SHEET_LABELS[locale]}
+                coordinator={MobileInlinePickerCoordinator}
+                machineNode={
+                  <MobileInlinePicker
+                    id="landing-mobile-machine"
+                    value="mac-studio"
+                    onChange={() => undefined}
+                    options={[{ value: 'mac-studio', label: machineName }]}
+                    ariaLabel={isZh ? '机器' : 'Machine'}
+                    triggerContent={
+                      <span className="flex items-center gap-1.5">
+                        <Monitor className="h-3.5 w-3.5" />
+                        {machineName}
+                      </span>
+                    }
+                  />
+                }
+                contextTypeNode={
+                  <MobileInlinePicker
+                    id="landing-mobile-context"
+                    value="chat"
+                    onChange={() => undefined}
+                    options={[{ value: 'chat', label: isZh ? '对话' : 'Chat' }]}
+                    ariaLabel={isZh ? '类型' : 'Type'}
+                    triggerContent={
+                      <span className="flex items-center gap-1.5">
+                        <MessageCircle className="h-3.5 w-3.5" />
+                        {isZh ? '对话' : 'Chat'}
+                      </span>
+                    }
+                  />
+                }
+                perTypeNode={null}
+                branchNode={null}
+                secondaryPerTypeNode={null}
+                composer={composer}
+                belowComposerNode={sheetBelowComposerNode}
+                showCloseButton={false}
+              />
+            </div>
 
-          {/* Session: slides over the home like the real push navigation. */}
-          <div
-            className={cn(
-              'absolute inset-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-out',
-              screen === 'session' ? 'translate-x-0' : 'translate-x-full'
-            )}
-            style={{ paddingTop: SAFE_AREA_TOP }}
-          >
-            <div className="min-h-0 flex-1">{sessionNode}</div>
+            {/* Session: slides over the home like the real push navigation. */}
+            <div
+              className={cn(
+                'absolute inset-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-out',
+                screen === 'session' ? 'translate-x-0' : 'translate-x-full'
+              )}
+              style={{ paddingTop: SAFE_AREA_TOP }}
+            >
+              <div className="min-h-0 flex-1">{sessionNode}</div>
+            </div>
           </div>
-        </div>
 
-        <img
-          src={PHONE_IMG}
-          alt=""
-          aria-hidden="true"
-          draggable={false}
-          className="pointer-events-none absolute inset-0 h-full w-full select-none"
-        />
+          <img
+            src={PHONE_IMG}
+            alt=""
+            aria-hidden="true"
+            draggable={false}
+            className="pointer-events-none absolute inset-0 h-full w-full select-none"
+          />
+        </div>
       </div>
-    </div>
     </ForceMobileLayoutProvider>
   );
 }
diff --git a/site-docs/components/landing-preview-panel.tsx b/site-docs/components/landing-preview-panel.tsx
index 269a3964d..1723bdeb6 100644
--- a/site-docs/components/landing-preview-panel.tsx
+++ b/site-docs/components/landing-preview-panel.tsx
@@ -16,8 +16,8 @@
 
 import { type ReactNode } from 'react';
 import { Check, Send, SendHorizontal, X } from 'lucide-react';
-import { Button } from '@/ui/button';
-import { Textarea } from '@/ui/textarea';
+import { Button } from '@lody/ui/button';
+import { Textarea } from '@lody/ui/textarea';
 import { SessionBrowserToolbar } from '@/components/sessions/session-browser-toolbar';
 import { cn } from '@/lib/utils';
 
@@ -117,11 +117,7 @@ function MockPreviewLoading() {
 // ---- The previewed page: a mock Lody landing hero -----------------------------
 
 function MockLandingSite({ state }: { state: LandingPreviewDemoState }) {
-  const lines = [
-    PAGE_LINES[0],
-    PAGE_LINES[1],
-    state.edited ? PAGE_LINE_2_EDITED : PAGE_LINES[2],
-  ];
+  const lines = [PAGE_LINES[0], PAGE_LINES[1], state.edited ? PAGE_LINE_2_EDITED : PAGE_LINES[2]];
   return (
     <div className="flex h-full w-full flex-col overflow-hidden bg-[linear-gradient(180deg,#071a2c_0%,#03090f_78%,#02060b_100%)] text-slate-100">
       {/* Mock site nav */}
@@ -183,7 +179,11 @@ function CopyLine({
     <div className="relative w-fit max-w-full" data-demo={`pv-line-${index}`}>
       {children}
       {hovered || draft ? (
-        <span aria-hidden className="pointer-events-none absolute inset-0" style={HOVER_BOX_STYLE} />
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-0"
+          style={HOVER_BOX_STYLE}
+        />
       ) : null}
       {saved ? (
         // Anchor pin — visual-annotation-comments-overlay.tsx pin dot.
@@ -227,10 +227,10 @@ function DraftCommentCard({ text }: { text: string }) {
         className="min-h-20 resize-none bg-background text-xs"
       />
       <div className="mt-2 flex justify-end gap-1.5">
-        <Button type="button" size="sm" variant="ghost">
+        <Button type="button" variant="ghost" size="small">
           Cancel
         </Button>
-        <Button type="button" size="sm" data-demo="pv-draft-send" disabled={text.length === 0}>
+        <Button type="button" data-demo="pv-draft-send" size="small" disabled={text.length === 0}>
           <Send className="h-3.5 w-3.5" />
           Add comment
         </Button>
@@ -282,7 +282,11 @@ function SavedCommentCard({ text, staged }: { text: string; staged: boolean }) {
               : 'text-muted-foreground hover:bg-hover hover:text-hover-foreground'
           )}
         >
-          {staged ? <Check className="h-3 w-3" /> : <SendHorizontal className="h-3 w-3 -scale-x-100" />}
+          {staged ? (
+            <Check className="h-3 w-3" />
+          ) : (
+            <SendHorizontal className="h-3 w-3 -scale-x-100" />
+          )}
           {staged ? 'Added' : 'Send'}
         </button>
         <button
diff --git a/site-docs/package.json b/site-docs/package.json
index 1d2cd8b00..1c324d428 100644
--- a/site-docs/package.json
+++ b/site-docs/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@lody/components": "workspace:*",
+    "@lody/ui": "workspace:*",
     "@lody/shared": "workspace:*",
     "@number-flow/react": "^0.6.2",
     "@pierre/diffs": "^1.0.5",
@@ -40,6 +41,7 @@
     "zod": "catalog:"
   },
   "devDependencies": {
+    "@stylexjs/unplugin": "0.19.0",
     "@tailwindcss/vite": "^4.3.2",
     "@tanstack/router-cli": "^1.167.18",
     "@tanstack/router-plugin": "^1.168.19",
diff --git a/site-docs/src/routes/__root.tsx b/site-docs/src/routes/__root.tsx
index 136811432..92d3cdafc 100644
--- a/site-docs/src/routes/__root.tsx
+++ b/site-docs/src/routes/__root.tsx
@@ -32,6 +32,7 @@ export const Route = createRootRoute({
         media: '(prefers-color-scheme: dark)',
       },
       { rel: 'apple-touch-icon', href: '/_docs-assets/logo-180.png' },
+      ...(import.meta.env.DEV ? [{ rel: 'stylesheet', href: '/virtual:stylex.css' }] : []),
     ],
     scripts: [
       {
diff --git a/site-docs/types/lody-app-components.d.ts b/site-docs/types/lody-app-components.d.ts
index 6293bee64..ac1ecdd6d 100644
--- a/site-docs/types/lody-app-components.d.ts
+++ b/site-docs/types/lody-app-components.d.ts
@@ -837,41 +837,6 @@ declare module '@/ui/tooltip' {
   export function TooltipProvider(props: TooltipProviderProps): ReactElement | null;
 }
 
-declare module '@/ui/button' {
-  import type { ButtonHTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
-
-  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    asChild?: boolean;
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg' | 'icon';
-  }
-
-  export const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
-  export function buttonVariants(options?: {
-    variant?: ButtonProps['variant'];
-    size?: ButtonProps['size'];
-    className?: string;
-  }): string;
-}
-
-declare module '@/ui/badge' {
-  import type { HTMLAttributes, ReactElement } from 'react';
-
-  export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: 'default' | 'secondary' | 'destructive' | 'outline';
-  }
-
-  export function Badge(props: BadgeProps): ReactElement;
-}
-
-declare module '@/ui/textarea' {
-  import type { ForwardRefExoticComponent, RefAttributes, TextareaHTMLAttributes } from 'react';
-
-  export const Textarea: ForwardRefExoticComponent<
-    TextareaHTMLAttributes<HTMLTextAreaElement> & RefAttributes<HTMLTextAreaElement>
-  >;
-}
-
 declare module '@/atoms' {
   import type { PrimitiveAtom } from 'jotai';
   import type { WorkspaceId } from '@lody/shared';
diff --git a/site-docs/vite.config.ts b/site-docs/vite.config.ts
index 15757d7b7..ad802eb2b 100644
--- a/site-docs/vite.config.ts
+++ b/site-docs/vite.config.ts
@@ -1,5 +1,7 @@
 import { tanstackStart } from '@tanstack/react-start/plugin/vite';
 import tailwindcss from '@tailwindcss/vite';
+import stylex from '@stylexjs/unplugin';
+import { stylexOptions } from '../packages/ui/stylex-options';
 import react from '@vitejs/plugin-react';
 import mdx from 'fumadocs-mdx/vite';
 import path from 'node:path';
@@ -217,6 +219,7 @@ export default defineConfig({
     installStartDevServerMiddleware(),
     mdx(),
     tailwindcss(),
+    stylex.vite(stylexOptions),
     react(),
   ],
   ssr: {
diff --git a/specs/ui-primitives.md b/specs/ui-primitives.md
new file mode 100644
index 000000000..5af64022f
--- /dev/null
+++ b/specs/ui-primitives.md
@@ -0,0 +1,426 @@
+# Shared UI primitives
+
+Status: draft
+Translation: pending
+
+## Scenario
+
+A person should encounter the same control language across Lody's desktop and
+web surfaces. Buttons with the same role should share appearance, state feedback,
+and theme behavior even when they are composed by different product features.
+
+## Responsibilities
+
+`@lody/ui` owns reusable visual primitives and semantic design tokens. A primitive
+exposes named product choices instead of asking each caller to assemble its
+colors, dimensions, radius, shadow, and interaction states.
+
+The Button supports primary, secondary, ghost, destructive, and link variants;
+mini, small, medium, and large sizes; icon-only controls; destructive tone; and
+default or pill shapes. These choices define the redesigned interface. Migrated
+callers must not reproduce the appearance of the deleted Button implementation.
+
+A field is a composition rather than a single control. A field root owns the
+control's name, whether it is disabled, and whether it is valid; the label, the
+control, the help text, and the error message read that state from the root
+instead of receiving their own copies of it. A caller therefore states a field is
+invalid in one place, and cannot leave a control and its message disagreeing.
+The composition provides a text input in small, medium, and large sizes, a
+multi-line control, a checkbox, a group of radio options, and a switch, and
+associates the label with the control without the caller naming an identifier.
+
+The composition also provides a control that picks one value from a list the
+person opens, and one that filters that list as they type. These are two parts:
+the control a person sees at rest sits with the rest of the family and answers to
+the field root the same way, and the list it opens is a floating surface with its
+own appearance. A person reaches the list with the keyboard, walks it with the
+arrow keys, and takes a row with Enter; the row that holds the value is marked so
+they can see which one it is, and the row they are on is marked separately,
+because those are two different facts. A list that is open reports what it is to
+a screen reader, and a control tells one which list it opens.
+
+A surface that owns a modal states where the popups inside it belong. A modal
+holds the keyboard and the scroll inside its panel, so a list that opens outside
+that panel is unreachable in it; the surface names the panel once and the lists
+under it follow. Product surfaces do not otherwise place these lists.
+
+The same floating surface also carries commands. A person reaches a menu three
+ways — a control that opens one, a right click or long press over a region, and
+a bar of names along the top of a window — and meets the same commands whichever
+way they came: one row, one height, one mark for where the keyboard is. A menu
+holds commands, commands that toggle a setting, commands that pick one of a set,
+headings over groups of them, and commands that open a further menu; a command
+may carry a glyph, a keyboard shortcut, and the fact that it destroys something,
+which it states in its own colour rather than only in its words. A command that
+toggles a setting leaves the menu open so a second can be toggled; a command that
+acts closes it. A person walks a menu with the arrow keys, opens a further menu
+from the row that owns it, and leaves with Escape; the row the pointer is on and
+the row the keyboard is on are one row, and a row that cannot be used is neither
+reached nor run.
+
+The list a control opens is as wide as that control, because the control shows
+the value the list holds. A menu is opened by whatever the surface already had
+there, so it states a width of its own. Where keyboard focus goes after a menu
+closes is a product decision — a surface may want the composer rather than the
+control that opened the menu — so the surface states it and the primitive does
+not choose for it.
+
+That same floating surface also carries content rather than rows or commands: a
+small panel a control opens, with a heading, a sentence about it, and whatever
+the surface puts under them. It is one surface with three things on it rather
+than three surfaces, so a panel and the menu beside it cannot open at two radii
+over two shadows. What it holds is prose, so its text follows the prose rule
+rather than the rule a row's label follows.
+
+A surface that must be answered before a person carries on is a panel over the
+whole window, with the page receding behind it. There are three, and they are
+one thing arriving three ways: one a person may dismiss, and which shows that it
+can be; one that must be answered, where a press beside it is not an answer,
+although the key that cancels still is; and one that arrives from an edge of the
+window rather than its middle. All three share one appearance, so a padding or a
+heading has one place to change. Each states its own panel as the place the
+lists and menus inside it belong, so a surface that opens one never has to.
+Which answer in such a panel is the affirmative one, and what it is about, is
+the surface's decision rather than the panel's.
+
+The one that arrives from an edge can also be sent back to it. A panel sliding in
+from an edge promises that gesture, and a person using a touch screen will make
+it, so that panel is a different thing from the one in the middle rather than the
+same thing repositioned: it is laid out against the edge it belongs to instead of
+placing itself, which is what leaves it free to follow a finger. It names that
+edge in reading order rather than as left or right, and the direction that sends
+it away follows from the edge, so a panel on the leading side departs the way
+"away" means in the reader's language. It either meets the window — reaching the
+physical edge, squaring the corners that touch it, and keeping its own contents
+clear of whatever the device intrudes — or floats clear of every edge as an
+object resting over the page. As it is dragged away the page behind it returns in
+proportion, so a gesture half-made reads as one that can be abandoned. A shell
+that wants the page itself to recede while such a panel is open says so around
+its own interface; the panel does not reach out and do it.
+
+A person may also be told what a control is without acting on it. That label is
+not a surface a person visits: it is a mark over the thing it names, so it reads
+inverted rather than raised, it never takes the pointer, and it sits above every
+other floating thing because what it names may itself be on one. It is offered
+to sighted people using a pointer or a keyboard and reaches neither touch nor a
+screen reader, so it never carries a control's name — every control it describes
+states its own name, and a surface that groups several of them lets the second
+appear without the wait the first had.
+
+A surface may also show one thing out of several, and there are three ways it
+does so: the choices side by side with the thing under them, the choices stacked
+with the thing opening in place beneath the one chosen, and a single such thing
+on its own. These are one family rather than three components, because each is a
+control that says what is shown and a region that shows it; only the arrangement
+differs. None of them holds a value — what they pick is what a person sees, not
+what is stored — so none takes a name, a validity or a field around it.
+
+The strip of choices is a sunken track with the chosen one raised out of it, and
+that mark is one thing that moves between the choices rather than a light that
+turns on under each, because the strip is a single control. It is provided by
+the strip itself rather than assembled by a surface. The choices are stated
+once at a size, and a strip told to take the width it is offered divides that
+width between them. Moving along the strip with the keyboard does not take a
+choice, because what a choice reveals may be expensive to produce; a surface
+whose regions are cheap may ask for the opposite.
+
+A stacked choice is a row with no fill of its own, separated from the next by
+the line the system gives a list, and it says what it hides with a mark that
+turns over as it opens. One is open at a time unless the surface says otherwise.
+A lone one has no list around it, so it has neither that line nor that row: it
+is opened by whatever the surface already had there. What opens is animated from
+its own measured height, so what it holds keeps its spacing on something inside
+it rather than on the part being measured.
+
+A person may also leave a control pressed. That is not the control that stores a
+value in a form — the one with a name, a place in a field and the ability to be
+wrong — but a statement that an option is on at this moment: the words in front
+of them are bold, the long lines are wrapped, this filter is being applied. It
+is a button in every other way, so the keyboard reaches it and a person who
+cannot see it is told both what kind of control it is and whether it is on.
+
+What it looks like when it is on follows from where it rests. The system fills a
+control with ink when what it holds is stored, and that is right for the ones
+whose resting appearance already occupies the sunken place this system gives to
+anything you may put something into: on has to be somewhere else, so it is ink.
+A control that rests on nothing has that place free, so it goes down into it and
+stays there — which is also what keeps a row of eight of them from reading as
+eight of the most important thing on the screen. It goes down and stays rather
+than dipping and coming back, which is what this system's raised controls do
+when they are pressed.
+
+Several of them may answer to one value, and that is a different thing from the
+strip of choices above, not an arrangement of it. The strip picks what a person
+sees, so it can be a single control with one mark moving across it; a set of
+these stores what is on, and two of its members can be on at once, which no
+single moving mark can say. So the set has no track under it and each member
+goes down on its own — including when the surface asks for one choice out of
+several, because the same set with several allowed has to look like itself. How
+tall the members are and what shape they take is stated once, on the set.
+
+A row of controls is itself something the system names, and what it is for is
+the keyboard rather than the eye: it draws nothing at all — not even the line a
+table is allowed — because it is a row of controls on whatever the surface
+already was. A row of eight things a person can press is eight stops on the way
+past it unless something says otherwise, so the row is one stop and the arrow
+keys walk it, stepping over what cannot be used rather than stopping there. Two
+distances say what belongs with what: one between the controls of a cluster, a
+wider one between clusters and either side of the line that divides them. That
+line is the one line this system allows, turned across the row, and the row
+states that rather than the surface — a row laid out one way cannot then be
+divided the other.
+
+The system also speaks back. What it says is either what happened or that it is
+still working, and those are one family rather than five components. A message
+is the same block wherever it appears — a mark that names what kind of message
+it is, what happened, a sentence about it, and whatever answers it — and it
+appears in two places: kept on the page it is about, or arriving over that page
+and leaving on its own. Neither takes the whole window, because a message does
+not have to be answered before a person carries on.
+
+A message reports one of four things: something worth knowing, something that
+worked, something that may still go wrong, and something that failed. The
+palette names three of them; the fourth is deliberately unnamed, because the
+colour that would suggest itself is reserved for live state. What it reports
+colours its mark and tints the surface under it, and never fills it. The mark
+belongs to what is being reported rather than to the surface that reports it, so
+a failure cannot be shown with a tick. How urgently a person using a screen
+reader is told follows from the same fact: a failure interrupts, a confirmation
+waits its turn.
+
+The other half is the wait. A bar shows how far something has got, in the one
+colour this system gives to live state; a bar with no value to show is not a bar
+at zero but the same bar saying it does not know, which is a different report. A
+bar that measures something rather than progressing through it gives that colour
+back. A stand-in for content that has not arrived says nothing to a screen
+reader, because its shape already says it, and it stops moving where a person
+has asked for less movement — while the mark that says work is under way keeps
+turning there, since it is the only thing saying the work has not stopped.
+
+Not everything on a surface reports or acts. Three things say what a page is
+made of while nothing is happening: a block that groups what belongs together, a
+word that states a fact about the thing beside it, and a line between the rows
+of a list. Each answers the question this system asks of every part — what its
+edge is — differently. The block's edge is the shadow that lifts it off the page.
+The word has no edge and no place on the ladder at all: it appears on a page, on
+a block, on a row of a list a person has opened and on a panel over the window,
+so what it is filled with is a film of its own colour over whatever it happens
+to sit on. The line is the edge, and it is the only one the system allows: it
+divides rows, never encloses a surface and never underlines a heading, and it
+says what it is to a screen reader rather than pretending to be decoration.
+
+A block is a panel one step nearer the page than the one that must be answered,
+and it is made of the same parts: a heading, a sentence about it, what a person
+came for, and the answers. It does not contain another of itself, and it is not a
+control — a surface may say that pressing the block does something, and then the
+surface provides what is pressed, because what a press does is the product's
+decision and not the block's.
+
+A word that states a fact says what kind of fact twice: by the tint behind it,
+and by the colour of the word itself. The colours this system gives to outcomes
+are tuned for a mark the size of a glyph rather than for text this small, so a
+word does not take one of them as it is — it takes that colour carried half the
+way to the colour text is normally written in, which keeps what kind it is while
+staying as legible as any other word on the surface. The tint alone is not
+enough: a chip this small is a wash a few percent away from whatever it sits on,
+and there is a palette in which two of the five outcomes are near enough in
+colour that no strength of wash tells them apart, while their words do. A fact
+with no kind to state takes the ordinary text colour. It reports the same four
+outcomes a message does, and one more — that something is happening now —
+because that is live state and the system has a colour for it. It is never a
+control: nothing about it answers a pointer or takes focus, and a surface that
+needs those needs a button.
+
+Every control in this family shares one set of state appearances: a sunken
+resting surface with no border, a placeholder in the hint colour, an accent ring
+on focus, a destructive ring while invalid that persists when the control is
+focused, and reduced opacity on the whole control when disabled. The states are
+defined once for the family, so a control added later inherits them rather than
+choosing its own.
+
+A control that stores a value — a ticked checkbox, the selected radio option, a
+switch that is on — shows that as ink, because the accent colour marks live
+state rather than a stored one. A checkbox can also stand for a partial
+selection, which it announces as mixed rather than as ticked. Each of these
+controls is a button to the platform: the keyboard reaches it, a screen reader
+is told which kind of control it is and whether it holds a value, and a form
+receives that value under the name the field root gave it.
+
+A surface may also show records rather than one thing at a time. That is rows
+and columns, and it is the one part of this system with no surface of its own:
+no fill, no shadow, no rounded edge, because it is rows on whatever the surface
+around it already was, and a panel holding one keeps its own edges. The one edge
+it draws is the line a list is allowed, between one row and the next; the row of
+column names takes it too, because the row after it is the first record, and the
+last record draws none.
+
+A column is stated once. What a column is — its name, what it holds for one
+record, how much room it takes, whether its values are figures, whether the
+records can be ordered by it, what a total under it would say — is one
+description, and the row of names and the cells beneath it are two readings of
+it rather than two things a surface keeps in step. That is what lets the
+composition answer for the rest of a table: it can give a column a width the
+surface never writes a cell for, admit across every column at once that there is
+nothing to show, and say which column the records are ordered by in one place,
+so two columns claiming that at once is not a state that can be described. It
+does not reorder the records themselves — a surface that had already ordered
+them, on a server or across pages, would be overruled — so what it owns is the
+control, the mark of which way round it is, and the one place that fact is
+stated for a person who cannot see the mark.
+
+The rows answer the pointer only where pressing one does something, so a table
+of facts is read rather than operated; a row that can be pressed is reachable
+and usable from the keyboard as well, and says where the keyboard is. Records a
+surface would act on together are picked with a control inside the row, which is
+both what a person presses and what tells a screen reader what happened, with
+the row marked so they can be found again; the control over that column reports
+none, some, or all of them without being told which, and picking them all keeps
+the records a person took on pages that are not on screen.
+
+A table may be told how tall it is allowed to be, and then the row of column
+names stays while the records move under it. That row is no longer a row but a
+band over them, so it takes the surface a band over the page takes: without one,
+the records are drawn through the names. And a table narrower than its columns
+need is not a table with a bar to drag: it is a list of records, each one a
+stack of names and values, with each value carrying the name from the row that
+is no longer above it. Narrow means the table's own width rather than the
+window's, because the same table is narrow in a side panel on a wide screen.
+
+What a list that did not fit offers next belongs with it: a way to the records
+that are not on screen. It is one control rather than parts a surface
+assembles, because the decision that is easy to get wrong is which pages to
+offer out of thousands and where to admit the rest are missing — and it is made
+once here. What is offered stays one width from the first page to the last, so
+the choices do not move as a person walks through them, and the missing pages
+are admitted only where more than one is missing. The page a person is on is
+marked twice, once for the people who can see it and once for the people who
+cannot. Where there are too many pages to offer at all, it says where they are
+instead, and lets them type where they want to be — taking that when they have
+finished saying it rather than while they are still typing, since every
+half-typed number would otherwise be somewhere the surface had to go. Every
+word it says is the surface's, because this package carries no dictionary.
+
+The composition also names two things that are not part of this interface at
+all: a person, and a key on their keyboard. A face is shown at one of a fixed
+set of sizes, and how large it is decides how large the letters standing in for
+it are, so a surface states one fact rather than two that can disagree; a face
+is round and a thing that is not a person is not, because a round frame around a
+mark that was drawn square is a crop. Whether the picture or the stand-in is on
+screen follows from whether the picture arrived, so a surface says what both are
+and never says which. A surface that gives the thing a colour of its own — a
+colour derived from its name, so the same thing is the same colour wherever it
+appears — supplies that colour, because which colour belongs to which name is
+the product's decision and not this package's. A face states how much room it
+takes and keeps exactly that much, neither growing to fit what is inside it nor
+giving room back to a row that ran out.
+
+A key is drawn as the key it is, and the keys of one chord are drawn together
+and announced as one gesture. What the key is called is the surface's word,
+because which key a person presses depends on their platform and their layout.
+It is never a control: nothing about it answers a pointer, takes focus or can be
+selected. Where such a key is drawn on a surface whose colours are reversed, it
+reverses with it, and the surface tells it so rather than the key guessing.
+Neither of these two carries a role in the interface, so neither takes a colour
+that names one.
+
+Product surfaces own workflows, placement, responsive layout, and accessibility
+requirements. They may add layout or interaction classes when a local constraint
+cannot be expressed by the primitive, such as a 44 px touch target in the Mermaid
+viewer. Those classes must leave the primitive's visual identity under its props.
+
+## Icons
+
+`@lody/icons` owns Lody's icon set independently of `@lody/ui`. `@lody/ui`
+consumes that package rather than owning its drawings. Every icon is on a 24 × 24
+grid with a 20 × 20 live area and a 1.5 stroke with round caps and joins; a
+family shares one skeleton so its members line up in a list.
+An icon states no size and no colour: it fills the box it is given and inherits
+`currentColor`, so the part holding it owns both.
+
+An icon is decoration unless the caller gives it a title, in which case it is
+announced as an image with that name. Where an icon carries a layer model, the
+same drawing has four treatments — outline, duotone, glyph and bulk — and a
+glyph's cut-outs are transparent, so it is correct on any surface. An icon
+without a layer model is outline in every treatment.
+
+A stateful icon is one element with two states and a transition between them.
+Its parts move only by transform, opacity and dash offset, so at rest each state
+is the static drawing, and a host without the transition shows the right state
+at once. Motion respects the reduced-motion preference.
+
+## Theme behavior
+
+Semantic StyleX tokens provide light and dark values. A theme applies to a subtree
+so a primitive responds without product code selecting raw palette values. Token
+names describe meaning and interaction role; component tokens derive from those
+semantic values or documented fixed dimensions.
+
+A forced theme applies to the subtree it is placed on, including the primitives
+inside it. A component token that derives from a semantic colour resolves against
+the palette in force on that subtree, not the palette of the document root, so two
+palettes can be shown at once on one page.
+
+## Gallery
+
+`@lody/ui` carries a gallery of its own tokens and primitives. It presents each
+semantic token, each elevation rung, and each state a primitive exposes through
+its props, rendered in both palettes from the tokens themselves rather than from
+copied values. The gallery is the reference a person reads when choosing a token
+or a prop, and the place a new token or primitive state becomes visible; a token
+that no sample presents is a gap the package reports.
+
+## Migration
+
+Primitives move from `@lody/components` one at a time. A legacy primitive is
+removed once all in-repository callers use the new package and type checks show no
+remaining dependency. The migration does not expose an adapter for old Button
+variants or sizes. A primitive arrives with the state appearances its family
+already defines; it does not introduce a second colour or state vocabulary for a
+state the family has decided.
+
+## Evidence
+
+Intended behavior: Issue [#304](https://github.com/LodyAI/Lody/issues/304) and PR
+[#305](https://github.com/LodyAI/Lody/pull/305).
+
+Inspected implementation: `packages/ui/src`, package compiler configuration, and
+migrated Button consumers in `packages/components`, Electron, and site docs.
+
+Executed validation is recorded in the linked PR and its
+[Agent Note](../.agents/notes/implemented/architecture/2026-09-08-ui-button-migration-takeover.md).
+
+The gallery and the subtree palette behavior are recorded in the
+[UI token gallery note](../.agents/notes/implemented/feature/2026-09-09-ui-token-gallery.md).
+The field composition, the state mapping it settles, and the outstanding focus
+ring suppression in the desktop shell are recorded in the
+[UI field primitives note](../.agents/notes/implemented/feature/2026-09-09-ui-field-primitives.md).
+The checkbox, radio and switch that join that family, and the ink they use for a
+stored value, are recorded in the
+[UI choice controls note](../.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md).
+The select and the combobox, the separate token group their lists take, and the
+container a modal names for them are recorded in the
+[UI select and combobox note](../.agents/notes/implemented/feature/2026-09-10-ui-select-combobox.md).
+The menu family that shares that surface, the one declaration it replaces, and
+the migration of the Radix menus still owed to it are recorded in the
+[UI menu primitives note](../.agents/notes/implemented/feature/2026-09-11-ui-menu-primitives.md).
+The popover on that same surface, the modal rung the dialog family shares, the
+inverted tooltip, and the migration still owed to them are recorded in the
+[UI overlay primitives note](../.agents/notes/implemented/feature/2026-09-12-ui-overlay-primitives.md).
+The three disclosures and the five parts that report are recorded in the
+[UI disclosure primitives note](../.agents/notes/implemented/feature/2026-09-12-ui-disclosure-primitives.md)
+and the
+[UI feedback primitives note](../.agents/notes/implemented/feature/2026-09-12-ui-feedback-primitives.md).
+The table with no surface of its own, the pager that shares its token group, and
+the two Radix files they replace are recorded in the
+[UI table and pagination note](../.agents/notes/implemented/feature/2026-09-12-ui-table-pagination.md).
+The card rung as a component, the badge that is on no rung, the one line the
+rules allow, and the Card callers still owed a flush surface are recorded in the
+[UI card, badge and separator note](../.agents/notes/implemented/feature/2026-09-12-ui-card-badge-separator.md).
+The avatar whose rung picks its own letters, the key cap, and the component
+token group that carries a surface's inversion into what is standing on it are
+recorded in the
+[UI avatar and kbd note](../.agents/notes/implemented/feature/2026-09-13-ui-avatar-kbd.md).
+The sunken place a pressed control goes into rather than filling with ink, the
+set of them that is not the strip of choices, and the row that draws nothing and
+exists for the keyboard are recorded in the
+[UI toggle and toolbar note](../.agents/notes/implemented/feature/2026-09-15-ui-toggle-toolbar.md).