@uniflowed/ui 0.0.0-alpha.9 → 0.2.0

package/index.js

@@ -32,6 +32,105 @@
 // A library written in TypeScript can document those constraints; it cannot
 // state them.
 //
+// # The copy step copies the look, never the behaviour
+//
+// shadcn's product is not a component. It is `npx shadcn add dialog`, which
+// writes the source into your repository so that you own it and change it —
+// and around that sit `init`, `view`, `search`, `build`, `migrate`, `eject`, an
+// MCP server, a `components.json` and a registry format anybody can publish to.
+// The roadmap first answered that with "typed imports, preset styles, and
+// **no copy step**", and ubugeeei-prod/uf#303 is where the answer was argued.
+// ubugeeei-prod/uf#947 kept half of it and reversed the other half, and the
+// half it kept is this package.
+//
+// **Why this package is still never copied.** A copy is a fork with no
+// upstream, and four things follow. A focus trap fixed here reaches everyone
+// who upgrades and reaches nobody who copied. The composition constraints above
+// are checked *across the boundary*: `Tabs.List` declaring `renders* Tabs.Tab`
+// means something while the library is imported and means nothing once the
+// source has been pasted into an application, because then it is the
+// application's own component and Flow has nothing left to hold it to.
+// `sideEffects: false` and one module per primitive already give a bundler
+// everything a copy would. And the accessibility work stays in one place with
+// one suite over it, rather than in every consumer's repository at the version
+// they took it at.
+//
+// **What `uf ui add` copies instead.** The styled layer. `uf ui add dialog`
+// writes `app/components/ui/dialog.js`, which imports its parts from
+// `@uniflowed/ui` and owns the scrim, the spacing and the tone of the
+// trigger — what a person means when they say "our dialog". None of the four
+// arguments above is reopened by it, because none of them is about the look:
+// the focus trap still arrives by upgrade, and the copied `TabsList` still takes
+// `renders* TabsTab` over a `TabsTab` that renders this package's tab, so the
+// constraint holds in the application's own file. `crates/uf_ui`'s header is
+// the decision in full.
+//
+// **What a caller gets without copying anything.** The reason people copy
+// is to change the markup, so that has to be answered or this is a worse
+// library for the same use. The answer is `render`, which every part that
+// renders an element of its own is growing:
+//
+//     <Menu.Item render={(props) => <a href="/settings" {...props} />}>
+//       Settings
+//     </Menu.Item>
+//
+// The part computes every attribute, every id, every composed handler and every
+// ref exactly as it would have, and hands them to the caller to put on their
+// own element; `children` is among them, so a caller who spreads and
+// self-closes still gets what was written between the tags. What it does *not*
+// hand over is anything true of the element rather than of the part —
+// `type="button"` stays on the `<button>` branch.
+//
+// It is deliberately not Radix's `asChild`. Cloning a child hides which props
+// arrived and in what order; a function is handed the object, so a caller can
+// read it, order it themselves, and drop one on purpose. And the part is still
+// the part: `Menu.Body`'s `renders*` still rejects a `<div>` where a
+// `Menu.Item` belongs, because a `Menu.Item` rendered as an `<a>` is a
+// `Menu.Item`. That is the half a copied source cannot keep, and it is what
+// makes leaving this package uncopied a trade rather than a loss.
+//
+// **Where it is, today.** Every fixed-element part has it in `Accordion`,
+// `Alert`, `AlertDialog`, `Avatar`, `Breadcrumb`, `Collapsible`, `Dialog`,
+// `Drawer`, `Menu`, `ContextMenu`, `Menubar`, `Pagination`, `Popover`, `Sheet`,
+// `Skeleton`, `Slider`, `Table`, `Tabs` and `ToggleGroup`; so do the
+// single-part `Checkbox`, `Progress`, `Separator`, `Switch` and `Toggle`.
+// `Field.Root`, `Field.Label`, `Field.Control`, `Field.Description`,
+// `Field.Status` and `Field.Error` take it too, as do `RadioGroup`,
+// `InputOtp.Separator`, `Tooltip.Trigger`, `Tooltip.Body`,
+// `HoverCard.Trigger`, `HoverCard.Body` and `Sidebar.Item`. A documented
+// escape hatch that is not there is worse than an undocumented one that is, so
+// the state of every part is a table in `packages/ui/ui.test.js` rather than a
+// claim in this paragraph: it names each part as implemented, no-element, or
+// fixed remainder, and the suite holds the lists to the exported files. A part
+// added to this barrel is in none of them and the suite says so.
+//
+// **Are the `internal/` modules ever public?** No, and the consequence is
+// worth stating rather than leaving as an omission. `merge-props.js`,
+// `roving-focus.js`, `controlled-state.js` and the rest each explain in their
+// own header why exporting them would publish a weaker promise than the
+// components make — a consumer who could reach `merge-props.js` could build a
+// part that spreads `rest` last, which is the failure it exists to prevent. So
+// there is no third-party primitive that participates the way these do, and no
+// registry of them: the uf-shaped equivalent of publishing a component is a
+// pull request against this package, where its keyboard map gets the same suite
+// as everything else. That is a real cost of the decision and the right side of
+// it for a library whose value is that the hard parts are correct. What a third
+// party *can* build on is the escape hatch itself, which is the whole public
+// surface it needs: a component of theirs given to `render` receives the props
+// this package would have used, and their own composition sits inside a part
+// that is still checked.
+//
+// **What the CLI adds.** `uf ui add`, `uf ui list` and `uf ui diff`, over a
+// registry of styled components in `registry/ui/` that is embedded into the
+// binary — each one built on parts exported here, and none of them a copy of
+// one. There is still no registry of *primitives*, for the reason the previous
+// paragraph gives, and there is no `components.json`: `uf.config.js` is the one
+// configuration surface by design, so a UI option belongs there rather than in
+// a second file. The affordance `shadcn view` has — "tell me what this
+// component is made of" — is still `uf inspect --json` for the parts, out of
+// `crates/uf_lib/src/ui.rs`, which `cargo test -p uf_lib` holds to this barrel
+// in both directions.
+//
 // # Styling is a default, not a dependency
 //
 // Nothing here imports StyleX, and nothing here has a StyleX-shaped type. A
@@ -39,6 +138,71 @@
 // the same components with exactly the same behaviour; the design-system layer
 // that adds uf's default styles is built *on* these, not into them.
 //
+// # What is not here, and where it went instead
+//
+// About twenty of the catalogue this package is measured against have no
+// behaviour at all. Badge, Card, Button, Input, Textarea, Label and Aspect
+// Ratio are, between them, a class list and a `<div>`. For a library whose
+// product *is* the styles that is coherent — you copy them in and you own
+// them. It is not coherent here: a `Badge` with no styles is a `<span>`, a
+// `Card` with no styles is a `<div>`, and shipping them from a package that
+// ships no styles would make this a library of empty elements. Shipping them
+// from `@uniflowed/stylex` would make *that* a component library, which its
+// own header forbids. So for a long time the answer on record was both and
+// neither, which is ubugeeei-prod/uf#298.
+//
+// The line that holds is not "styled versus headless". It is **whether the
+// thing has a decision in it**:
+//
+// - An ARIA decision, a state machine or a keyboard requirement makes it a
+//   component here, even when it renders a single element. `Progress` is one
+//   `<div>`, and it belongs, because the conditional that omits
+//   `aria-valuenow` when the amount is unknown — rather than sending
+//   `aria-valuenow={0}`, which says "nothing has happened" — is the whole
+//   component. `Toggle` and `Checkbox` are the same shape for the same reason.
+// - Anything that is only a class list belongs in `@uniflowed/stylex/preset`,
+//   which already has the right form: `buttonStyles({ tone, size })`,
+//   `cardStyles()`, `textStyles({ size, tone })` and `fieldStyles()` return
+//   `{ className }` for a caller to spread onto their own element. That is a
+//   better answer than a `<Badge>`, not a lesser one — a component wrapping a
+//   `<button>` takes away `type="submit"`, `formAction`, the ref and every
+//   attribute nobody thought to forward, and gives back a class name the
+//   caller could have written.
+//
+// This is stated rather than left as an omission, because an omission reads as
+// an oversight and the next contributor closes it with a `<Badge>`.
+// `crates/uf_lib/src/ui.rs` carries the same decision as data: those entries
+// are `Declined` with the preset functions that replace them named on each,
+// and `cargo test -p uf_lib` fails if a name there stops existing.
+//
+// Five of that twenty are on the other side of the line and now ship — Alert,
+// Avatar, Breadcrumb, Separator and Skeleton — each for one specific reason,
+// and each of them one or two elements:
+//
+// - **Alert** is the one whose usual shape is arguably wrong to copy.
+//   `role="alert"` is a live region, an element already in the document when
+//   the page loads announces on insertion or not at all, and a permanently
+//   rendered "your trial ends soon" box carrying that role is either an
+//   interruption on every page load or silence. So the role is behind `live`,
+//   and a static callout does not get one. `field.js` already makes that call
+//   correctly for `Field.Error`.
+// - **Avatar** is a three-state machine — loading, loaded, failed — with the
+//   fallback held back so a cached image does not flash somebody's initials,
+//   and with `alt=""` by default, because an avatar beside a name that puts
+//   the name in `alt` makes every screen reader say it twice.
+// - **Breadcrumb** is `Pagination`'s shape one door along: a named `<nav>`, one
+//   `aria-current="page"`, and separators hidden so the trail is not read as
+//   "Home slash Settings slash Billing".
+// - **Separator** is two lines with one decision in them, and it is the
+//   decision `Progress` is: `role="separator"` with an `aria-orientation` for a
+//   boundary a reader should be told about, `aria-hidden` for a rule that is
+//   only a rule.
+// - **Skeleton** is the one that silently makes a page worse. A screen of
+//   skeletons is a screen of empty boxes, so the boxes are `aria-hidden`, the
+//   region they stand in is `aria-busy`, and a live region that was empty for
+//   one commit says "Loading" — which is #289's rule met at the moment it bites
+//   hardest, because a skeleton screen is busy on its very first render.
+//
 // # What these components promise React
 //
 // Nothing here mutates during a render, reads a ref during a render, or depends
@@ -57,20 +221,9 @@
 //
 // One component does use it, and it is the case the API is actually for.
 // `toast("Saved")` is called from an event handler or a `catch`, so the queue
-// of notifications lives outside React — a store at module scope in
-// `toast.js`, read through `useSyncExternalStore` with the cached immutable
-// snapshots and the consistent server snapshot that requires. A queue is a
-// store; the DOM is not.
-//
-// That store should be an atom in `@uniflowed/state`, and was one. It is
-// written out by hand in `toast.js` because `@uniflowed/ui` is published to
-// npm and `@uniflowed/state` is not: its name has never been bound, and
-// binding it takes a person with an `npm login` session and a 2FA prompt —
-// ubugeeei-prod/uf#210. A published package whose dependency is missing
-// installs as nothing, `ETARGET` on the first thing a user types, so this
-// package cannot declare that dependency until the name exists. The queue
-// moves back to `@uniflowed/state` when #210 binds it. The local store is the
-// shippable design, not the better one.
+// of notifications lives outside React — an atom in `@uniflowed/state`, read
+// through `useSyncExternalStore` with the cached immutable snapshots and the
+// consistent server snapshot that requires. A queue is a store; the DOM is not.
 //
 // # Server and client
 //
@@ -85,10 +238,29 @@
 // One root module per primitive, each with its own `exports` subpath, each
 // named after the thing it implements:
 //
-// - `dialog.js` — the focus trap, focus restore, scroll lock and inert page.
-// - `menu.js` — the arrow keys, typeahead, submenus and `Escape` stacking.
-// - `combobox.js` — `aria-activedescendant` over a filtered list, and the
-//   count a screen reader is told.
+// - `dialog.js` — the focus trap, focus restore, scroll lock and inert page,
+//   and the three props the four components below it differ from it by.
+// - `alert-dialog.js`, `sheet.js`, `drawer.js` and `sidebar.js` — the four
+//   built on that one. An alert dialog is modal and cannot be dismissed by
+//   pressing beside it; a sheet is a dialog with an edge; a drawer is a sheet
+//   with a gesture, and therefore with WCAG 2.5.7's keyboard equivalent of it;
+//   a sidebar is most often neither modal nor a dialog, and becomes both on a
+//   narrow viewport.
+// - `carousel.js`, `scroll-area.js` and `input-otp.js` — the three that replace
+//   something the browser already does, and so the three that have to be better
+//   than what they replaced. Each module's header says what it gives that the
+//   plain element does not; if it ever stops being true, the component should
+//   be deleted rather than fixed.
+// - `menu.js`, `context-menu.js` and `menubar.js` — the arrow keys, typeahead,
+//   submenus and `Escape` stacking, and the two components that are that
+//   behaviour opened differently. A context menu is opened by the right button,
+//   by `Shift+F10` and by a long press, and opens at a *point*; a menubar is a
+//   row of them with one tab stop and arrows that walk between the open menus.
+//   shadcn's fourth menu, Dropdown Menu, is `menu.js` under another name and is
+//   deliberately not a second export.
+// - `combobox.js` — `aria-activedescendant` over a filtered list, the count a
+//   screen reader is told, and the option groups that make a command palette a
+//   composition rather than a seventh module.
 // - `select.js` — the other half of the combobox pattern: the select-only one,
 //   with typeahead, option groups and a value a form can submit.
 // - `tabs.js` — the roving `tabindex`, and automatic versus manual activation.
@@ -119,13 +291,25 @@
 //   a dialog that is not modal, a tooltip describes its trigger and may never
 //   take focus, a hover card is neither and holds links — and because a flag
 //   selecting between them would be one flag every behaviour had to read.
+// - `alert.js`, `avatar.js`, `breadcrumb.js`, `separator.js` and `skeleton.js`
+//   — the five above that look like a class list and are not. One or two
+//   elements each, and one conditional each: whether a callout announces
+//   itself, which of three states an image is in, whether the last crumb is a
+//   link, whether a rule is in the accessibility tree, and whether anybody is
+//   told the page is loading.
+// - `interactions.js` — the press, the hover, the focus ring, the long press,
+//   the drag and the key, and the one module here that exports hooks rather
+//   than parts. A press that is released outside does not press, a hover is
+//   never a finger's, a ring is drawn for the keyboard and not for the pointer,
+//   and a screen reader's click is a press; its header says what each rule
+//   prevents and where it differs from React Aria's.
 //
-// Every name below is exported from one of those, so a consumer may import
-// `@uniflowed/ui` or `@uniflowed/ui/dialog` and get the same thing. The split
-// is by primitive because that is the unit a reader looks for, the unit a
-// bundler drops, and the unit the WAI-ARIA practices are written in.
+// Every name below is exported from one of those, and this file is the only way
+// to import any of them: `package.json` exports it alone. The split is by
+// primitive because that is the unit a reader looks for, the unit a bundler
+// drops, and the unit the WAI-ARIA practices are written in.
 //
-// `internal/` holds nine modules and nothing else, each a rule the primitives
+// `internal/` holds ten modules and nothing else, each a rule the primitives
 // must apply identically and a consumer must not be able to apply differently:
 // `merge-props.js` (the caller's props go on first, the component's semantics
 // last), `controlled-state.js` (what "controlled" means here),
@@ -138,8 +322,10 @@
 // fit where it was asked to go), `focus.js` (which elements a reader can reach,
 // which a focus trap and a popover want opposite things from), and
 // `hover-intent.js` (what WCAG requires of content shown on hover or focus,
-// which is three clauses and one mechanism). Each says in its own header why it
-// is unreachable rather than exported. There is no `internal/props.js`-shaped
+// which is three clauses and one mechanism), and `menu-tree.js` (the chain of
+// open menus the three menu components share, and what `Escape` and choosing an
+// item are defined in terms of). Each says in its own header why it is
+// unreachable rather than exported. There is no `internal/props.js`-shaped
 // bag of helpers: a module that cannot say what it is about does not belong in
 // this package.
 
@@ -150,10 +336,50 @@ import {
   AccordionRoot,
   AccordionTrigger,
 } from "./accordion.js";
+import { AlertDescription, AlertRoot, AlertTitle } from "./alert.js";
+import {
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog.js";
+import { AvatarFallback, AvatarImage, AvatarRoot } from "./avatar.js";
+import {
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbRoot,
+  BreadcrumbSeparator,
+} from "./breadcrumb.js";
+import {
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPause,
+  CarouselPrevious,
+  CarouselRoot,
+} from "./carousel.js";
+import {
+  CalendarDay,
+  CalendarMonth,
+  CalendarNext,
+  CalendarPrevious,
+  CalendarRoot,
+} from "./calendar.js";
 import { Checkbox } from "./checkbox.js";
+import { ContextMenuRoot, ContextMenuTrigger } from "./context-menu.js";
 import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "./collapsible.js";
 import {
   ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
   ComboboxInput,
   ComboboxLabel,
   ComboboxList,
@@ -161,6 +387,12 @@ import {
   ComboboxRoot,
   ComboboxStatus,
 } from "./combobox.js";
+import {
+  DatePickerCalendar,
+  DatePickerInput,
+  DatePickerRoot,
+  DatePickerTrigger,
+} from "./date-picker.js";
 import {
   DialogBody,
   DialogClose,
@@ -172,19 +404,43 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./dialog.js";
-import { FieldControl, FieldDescription, FieldError, FieldLabel, FieldRoot } from "./field.js";
+import {
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHandle,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerRoot,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer.js";
+import {
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  FieldRoot,
+  FieldStatus,
+} from "./field.js";
 import { HoverCardBody, HoverCardRoot, HoverCardTrigger } from "./hover-card.js";
+import { InputOtpGroup, InputOtpRoot, InputOtpSeparator, InputOtpSlot } from "./input-otp.js";
 import {
   MenuBody,
+  MenuCheckboxItem,
   MenuGroup,
   MenuItem,
   MenuLabel,
+  MenuRadioGroup,
+  MenuRadioItem,
   MenuRoot,
   MenuSeparator,
   MenuSub,
   MenuSubTrigger,
   MenuTrigger,
 } from "./menu.js";
+import { MenubarMenu, MenubarRoot, MenubarTrigger } from "./menubar.js";
 import {
   NavigationMenuBody,
   NavigationMenuItem,
@@ -204,6 +460,7 @@ import { PopoverBody, PopoverRoot, PopoverTrigger } from "./popover.js";
 import { Progress } from "./progress.js";
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "./radio-group.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizable.js";
+import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaViewport } from "./scroll-area.js";
 import {
   SelectGroup,
   SelectGroupLabel,
@@ -215,6 +472,27 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./select.js";
+import { Separator } from "./separator.js";
+import {
+  SheetBody,
+  SheetClose,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetRoot,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet.js";
+import {
+  SidebarBody,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarItem,
+  SidebarRoot,
+  SidebarTrigger,
+} from "./sidebar.js";
+import { SkeletonBox, SkeletonRoot } from "./skeleton.js";
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "./slider.js";
 import { Switch } from "./switch.js";
 import {
@@ -247,16 +525,240 @@ import { ToggleGroupItem, ToggleGroupRoot } from "./toggle-group.js";
 import { TooltipBody, TooltipProvider, TooltipRoot, TooltipTrigger } from "./tooltip.js";
 
 export type { AccordionType } from "./accordion.js";
+export type { AvatarStatus } from "./avatar.js";
+// A date, however a caller had one to hand: a `PlainDate` from
+// `@uniflowed/temporal`, or the ISO 8601 string a form field or a URL carries.
+export type { DateValue } from "./calendar.js";
 export type { ActivationMode } from "./tabs.js";
+// What a modal announces itself as, for a caller who holds one in a variable.
+// Two members, not a string: see `dialog.js`.
+export type { DialogRole } from "./dialog.js";
+// Which edge of the viewport a sheet or a drawer is attached to. `Sidebar` has
+// its own two-member union, because a sidebar is never on the top or bottom.
+export type { Edge } from "./sheet.js";
+export type { FieldSource } from "./field.js";
+export type { InputOtpKind } from "./input-otp.js";
+export type { MenuSelect } from "./menu.js";
+// Which way a carousel, a scroll area or a separator runs.
+export type { Orientation } from "./separator.js";
+export type { SidebarSide } from "./sidebar.js";
 // Where an anchored overlay opens, for a caller who holds one in a variable or
 // a prop of their own. Unions rather than strings, so `side="botom"` is a type
 // error at the call rather than an overlay that quietly opens somewhere else.
-export type { Align, Side } from "./popover.js";
+// `LogicalSide` is the same four plus `inline-start` and `inline-end`, which
+// are the ones that mean "the way the reader reads" - what a submenu opens
+// onto, and the left of the page in Arabic.
+export type { Align, LogicalSide, Side } from "./popover.js";
 export type { Sort } from "./table.js";
 export type { Notification, ToastChanges, ToastOptions, Urgency } from "./toast.js";
 export type { ToggleGroupType } from "./toggle-group.js";
 
-export { Checkbox, Progress, Switch, Toggle };
+/**
+ * Every part, under the name its module gives it.
+ *
+ * This file is the only entry point the package has — `package.json` exports
+ * `.` and nothing else — so a name a module exports and this list leaves out is
+ * a name nobody can import. The namespaces below are the same parts spelled for
+ * composing a page (`Dialog.Root`); these are for the wrapper, the preset and
+ * the test that want one part (`import { DialogRoot } from "@uniflowed/ui"`).
+ * `sideEffects: false` lets a bundler keep the module a name comes from and drop
+ * the rest, and `uf_rsc` names that module, not the package, as the client
+ * boundary of a Server Component that imports the name.
+ */
+export {
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  AlertDescription,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertRoot,
+  AlertTitle,
+  AvatarFallback,
+  AvatarImage,
+  AvatarRoot,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbRoot,
+  BreadcrumbSeparator,
+  CalendarDay,
+  CalendarMonth,
+  CalendarNext,
+  CalendarPrevious,
+  CalendarRoot,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPause,
+  CarouselPrevious,
+  CarouselRoot,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxOption,
+  ComboboxRoot,
+  ComboboxStatus,
+  ContextMenuRoot,
+  ContextMenuTrigger,
+  DatePickerCalendar,
+  DatePickerInput,
+  DatePickerRoot,
+  DatePickerTrigger,
+  DialogBody,
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  DrawerBody,
+  DrawerClose,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHandle,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerRoot,
+  DrawerTitle,
+  DrawerTrigger,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  FieldRoot,
+  FieldStatus,
+  HoverCardBody,
+  HoverCardRoot,
+  HoverCardTrigger,
+  InputOtpGroup,
+  InputOtpRoot,
+  InputOtpSeparator,
+  InputOtpSlot,
+  MenuBody,
+  MenuCheckboxItem,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuRoot,
+  MenuSeparator,
+  MenuSub,
+  MenuSubTrigger,
+  MenuTrigger,
+  MenubarMenu,
+  MenubarRoot,
+  MenubarTrigger,
+  NavigationMenuBody,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationRoot,
+  PopoverBody,
+  PopoverRoot,
+  PopoverTrigger,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupRoot,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaViewport,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectLabel,
+  SelectList,
+  SelectOption,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SheetBody,
+  SheetClose,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetRoot,
+  SheetTitle,
+  SheetTrigger,
+  SidebarBody,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarItem,
+  SidebarRoot,
+  SidebarTrigger,
+  SkeletonBox,
+  SkeletonRoot,
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRow,
+  TableRowHeader,
+  TableRowSelect,
+  TableSelectAll,
+  TabsList,
+  TabsPanel,
+  TabsRoot,
+  TabsTab,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastRegion,
+  ToastRoot,
+  ToastTitle,
+  ToggleGroupItem,
+  ToggleGroupRoot,
+  TooltipBody,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+};
+
+/**
+ * The five that are one component rather than a namespace of parts.
+ *
+ * Each takes `render`, so the control or line a design system already has — a
+ * `<div>` with a knob drawn in it, somebody's `<Pressable>`, a presentational
+ * meter shell — keeps the role, state, keys and attributes while being their
+ * element. See the module headers and the table in `packages/ui/ui.test.js`.
+ */
+export { Checkbox, Progress, Separator, Switch, Toggle };
 
 /**
  * Queueing a notification, from anywhere.
@@ -271,6 +773,75 @@ export { Checkbox, Progress, Switch, Toggle };
  */
 export { dismissAllToasts, dismissToast, toast, updateToast };
 
+/**
+ * The interactions every part here is made of, for a control of the caller's own.
+ *
+ * `usePress` is a press from a pointer, a key or assistive technology, with one
+ * set of events; `useHover` is a mouse's and a pen's and never a finger's;
+ * `useFocusRing` draws a ring for keyboard focus and not for pointer focus;
+ * `useLongPress`, `useMove` and `useKeyboard` are the rest; `mergeProps` puts
+ * several of them on one element. `interactions.js` says what each one gets
+ * right, and where it differs from React Aria's, at length.
+ *
+ *     const { isPressed, pressProps } = usePress({ onPress: save });
+ *     const { focusProps, isFocusVisible } = useFocusRing();
+ *     <div {...mergeProps(pressProps, focusProps)} role="button" tabIndex={0} />
+ *
+ * Hooks rather than parts, and the one module here that exports them: its rules
+ * are about input devices rather than about markup this package builds, so a
+ * control written with them is the same control a part is rather than a weaker
+ * copy of one.
+ */
+export {
+  getInteractionModality,
+  mergeProps,
+  useFocusRing,
+  useFocusVisible,
+  useHover,
+  useInteractionModality,
+  useInteractOutside,
+  useKeyboard,
+  useLongPress,
+  useMove,
+  usePress,
+} from "./interactions.js";
+export type {
+  FocusRingOptions,
+  FocusRingProps,
+  FocusRingResult,
+  FocusVisibleResult,
+  HoverEvent,
+  HoverOptions,
+  HoverProps,
+  HoverResult,
+  InteractionEvent,
+  InteractionProps,
+  InteractOutsideOptions,
+  InteractOutsideRef,
+  KeyboardInteraction,
+  KeyboardOptions,
+  KeyboardProps,
+  KeyboardResult,
+  LongPressEvent,
+  LongPressOptions,
+  LongPressProps,
+  LongPressResult,
+  Modality,
+  MoveEndEvent,
+  MoveMoveEvent,
+  MoveOptions,
+  MovePointerType,
+  MoveProps,
+  MoveResult,
+  MoveStartEvent,
+  PhysicalPointer,
+  PointerType,
+  PressEvent,
+  PressOptions,
+  PressProps,
+  PressResult,
+} from "./interactions.js";
+
 /**
  * An accessible form field.
  *
@@ -278,14 +849,31 @@ export { dismissAllToasts, dismissToast, toast, updateToast };
  *     <Field.Label>Email</Field.Label>
  *     <Field.Control render={(props) => <input type="email" {...props} />} />
  *     <Field.Description>We will not share it.</Field.Description>
+ *     <Field.Status>{saving ? "Saving…" : ""}</Field.Status>
  *     <Field.Error>{error}</Field.Error>
  *   </Field.Root>
+ *
+ * Inside a form, `field` replaces the hand-written `invalid`: the form says
+ * whether the field is wrong and what the message is, and the field composes
+ * every `aria-*` from that in one place. It also marks the control busy during
+ * submit, validation, or async default loading. `@uniflowed/form`'s
+ * `useFieldSource` is what produces one, and `field.js`'s header says why the
+ * hook lives there rather than here.
+ *
+ *   const email = useFieldSource(form, "email", { required: "We need one" });
+ *   <Field.Root field={email}>…<Field.Error /></Field.Root>
+ *
+ * `group` is for a set with no single control to point a `<label for>` at — a
+ * radio group, a checkbox group, three selects making a date. The root becomes
+ * `role="group"` named by the label, and the description and the error describe
+ * the set.
  */
 export const Field = {
   Root: FieldRoot,
   Label: FieldLabel,
   Control: FieldControl,
   Description: FieldDescription,
+  Status: FieldStatus,
   Error: FieldError,
 };
 
@@ -303,6 +891,11 @@ export const Field = {
  *     <Tabs.Panel value="one">…</Tabs.Panel>
  *     <Tabs.Panel value="two">…</Tabs.Panel>
  *   </Tabs.Root>
+ *
+ * Every part takes `render`, so a tab that is also a route — `<Tabs.Tab
+ * render={(props) => <a href="#billing" {...props} />}>` — is still a tab, with
+ * the roving tab stop and the `aria-controls` a tab has. `Tabs.List`'s
+ * `renders* Tabs.Tab` is unaffected, because it is the *part* it constrains.
  */
 export const Tabs = {
   Root: TabsRoot,
@@ -435,6 +1028,12 @@ export const ToggleGroup = {
  *       </Dialog.Footer>
  *     </Dialog.Body>
  *   </Dialog.Root>
+ *
+ * Every part takes `render`. `Dialog.Title` is an `<h2>` by default and the
+ * level is a fact about the page around it rather than about the dialog, so
+ * `render={(props) => <h3 {...props} />}` is how a caller says which — without
+ * losing the id `aria-labelledby` points at. `AlertDialog`, `Sheet` and
+ * `Drawer` are made of these parts and pass `render` straight through.
  */
 export const Dialog = {
   Root: DialogRoot,
@@ -448,6 +1047,199 @@ export const Dialog = {
   Close: DialogClose,
 };
 
+/**
+ * The confirmation: modal, announced as an alert, and not dismissible by a
+ * press beside it.
+ *
+ * Focus lands on `Cancel` rather than on the first thing in the dialog, and the
+ * description is required — `role="alertdialog"` exists to announce one, so an
+ * alert dialog without it interrupts the reader to say nothing.
+ *
+ *   <AlertDialog.Root>
+ *     <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
+ *     <AlertDialog.Overlay />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>Delete this project?</AlertDialog.Title>
+ *         <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action onClick={remove}>Delete</AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Root>
+ */
+export const AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Overlay: AlertDialogOverlay,
+  Body: AlertDialogBody,
+  Header: AlertDialogHeader,
+  Footer: AlertDialogFooter,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel,
+};
+
+/**
+ * A modal dialog attached to an edge of the viewport.
+ *
+ * `side` is a union rather than a class name, and every part reports it as
+ * `data-side` — the same attribute `Popover.Body` writes, so one stylesheet
+ * rule covers every overlay in this package.
+ *
+ *   <Sheet.Root side="left">
+ *     <Sheet.Trigger>Filters</Sheet.Trigger>
+ *     <Sheet.Overlay />
+ *     <Sheet.Body>
+ *       <Sheet.Title>Filters</Sheet.Title>
+ *       <Sheet.Close>Done</Sheet.Close>
+ *     </Sheet.Body>
+ *   </Sheet.Root>
+ */
+export const Sheet = {
+  Root: SheetRoot,
+  Trigger: SheetTrigger,
+  Overlay: SheetOverlay,
+  Body: SheetBody,
+  Header: SheetHeader,
+  Footer: SheetFooter,
+  Title: SheetTitle,
+  Description: SheetDescription,
+  Close: SheetClose,
+};
+
+/**
+ * The sheet you can drag away, with the keyboard that can do everything the
+ * drag can.
+ *
+ * `Drawer.Handle` is a `role="slider"` over the snap points: the arrow keys
+ * move between them, `Home` and `End` go to the ends, and the closing key at
+ * the smallest snap point closes it. WCAG 2.5.7 also wants a single-pointer
+ * alternative, so a drawer with a handle and no `Drawer.Close` raises.
+ *
+ *   <Drawer.Root side="bottom" snapPoints={[0.4, 1]}>
+ *     <Drawer.Trigger>Details</Drawer.Trigger>
+ *     <Drawer.Overlay />
+ *     <Drawer.Body>
+ *       <Drawer.Handle label="Resize the details" />
+ *       <Drawer.Title>Details</Drawer.Title>
+ *       <Drawer.Close>Close</Drawer.Close>
+ *     </Drawer.Body>
+ *   </Drawer.Root>
+ */
+export const Drawer = {
+  Root: DrawerRoot,
+  Trigger: DrawerTrigger,
+  Overlay: DrawerOverlay,
+  Body: DrawerBody,
+  Handle: DrawerHandle,
+  Header: DrawerHeader,
+  Footer: DrawerFooter,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Close: DrawerClose,
+};
+
+/**
+ * Navigation beside the page, which becomes a modal sheet on a narrow one.
+ *
+ * `Sidebar.Item` takes a `label` and keeps it as the button's accessible name
+ * the moment the sidebar collapses to icons — which is the whole reason a
+ * collapsing sidebar is a component rather than a class.
+ *
+ *   <Sidebar.Root defaultOpen={fromCookie}>
+ *     <Sidebar.Trigger>Menu</Sidebar.Trigger>
+ *     <Sidebar.Body label="Main">
+ *       <Sidebar.Item label="Settings">
+ *         <Gear /> Settings
+ *       </Sidebar.Item>
+ *     </Sidebar.Body>
+ *   </Sidebar.Root>
+ */
+export const Sidebar = {
+  Root: SidebarRoot,
+  Trigger: SidebarTrigger,
+  Header: SidebarHeader,
+  Body: SidebarBody,
+  Footer: SidebarFooter,
+  Item: SidebarItem,
+};
+
+/**
+ * Slides, one at a time, that a reader can stop and cannot fall into.
+ *
+ * `Carousel.Pause` is WCAG 2.2.2's mechanism and must be the first focusable
+ * thing inside the carousel; the slides that are not showing are `inert`, so
+ * `Tab` cannot reach a link nobody can see.
+ *
+ *   <Carousel.Root autoplay={5000} count={3} label="Featured">
+ *     <Carousel.Pause />
+ *     <Carousel.Content>
+ *       <Carousel.Item index={0}>…</Carousel.Item>
+ *       <Carousel.Item index={1}>…</Carousel.Item>
+ *       <Carousel.Item index={2}>…</Carousel.Item>
+ *     </Carousel.Content>
+ *     <Carousel.Previous />
+ *     <Carousel.Next />
+ *   </Carousel.Root>
+ */
+export const Carousel = {
+  Root: CarouselRoot,
+  Content: CarouselContent,
+  Item: CarouselItem,
+  Pause: CarouselPause,
+  Previous: CarouselPrevious,
+  Next: CarouselNext,
+};
+
+/**
+ * An overflow container a keyboard can actually scroll.
+ *
+ * `role="region"`, a name and `tabindex="0"`, because a scroll container is not
+ * focusable in every browser and one that is not is one a keyboard reader can
+ * see the top of and nothing else.
+ *
+ *   <ScrollArea.Root label="Release notes">
+ *     <ScrollArea.Viewport>…</ScrollArea.Viewport>
+ *     <ScrollArea.Scrollbar orientation="vertical" />
+ *   </ScrollArea.Root>
+ */
+export const ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport,
+  Scrollbar: ScrollAreaScrollbar,
+};
+
+/**
+ * A one-time code: six boxes drawn over one real `<input>`.
+ *
+ * One input, so `autocomplete="one-time-code"` works, a paste fills every box,
+ * and a form submits one value under one name.
+ *
+ *   <InputOtp.Root label="One-time code" length={6} name="code">
+ *     <InputOtp.Group>
+ *       <InputOtp.Slot index={0} />
+ *       <InputOtp.Slot index={1} />
+ *       <InputOtp.Slot index={2} />
+ *     </InputOtp.Group>
+ *     <InputOtp.Separator>-</InputOtp.Separator>
+ *     <InputOtp.Group>
+ *       <InputOtp.Slot index={3} />
+ *       <InputOtp.Slot index={4} />
+ *       <InputOtp.Slot index={5} />
+ *     </InputOtp.Group>
+ *   </InputOtp.Root>
+ */
+export const InputOtp = {
+  Root: InputOtpRoot,
+  Group: InputOtpGroup,
+  Slot: InputOtpSlot,
+  Separator: InputOtpSeparator,
+};
+
 /**
  * A menu, with the keyboard map every native menu has had for thirty years.
  *
@@ -467,12 +1259,94 @@ export const Dialog = {
  *       </Menu.Sub>
  *     </Menu.Body>
  *   </Menu.Root>
+ *
+ * Every part takes `render`, which is what makes a menu of links possible — and
+ * a menu of links is the most ordinary menu there is:
+ *
+ *   <Menu.Item render={(props) => <a href="/settings" {...props} />}>
+ *     Settings
+ *   </Menu.Item>
+ *
+ * The `<a>` keeps the middle click, the context menu and the status bar; the
+ * item keeps the role, the id, the roving tab stop and the press that closes
+ * the tree. See the module header for why that is the answer to "no copy step".
  */
 export const Menu = {
   Root: MenuRoot,
   Trigger: MenuTrigger,
   Body: MenuBody,
   Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  Separator: MenuSeparator,
+  Group: MenuGroup,
+  Label: MenuLabel,
+  Sub: MenuSub,
+  SubTrigger: MenuSubTrigger,
+};
+
+/**
+ * The same menu, opened by the right button — and by the keyboard.
+ *
+ * `Shift+F10`, the `ContextMenu` key and a long press all open it, because a
+ * command reachable only by right-click is reachable only by a pointer, which
+ * is a WCAG 2.1.1 failure. `context-menu.js` says why the trigger is in the tab
+ * order and when to take it out again.
+ *
+ * The body needs an `aria-label`: its trigger is a table row or a canvas rather
+ * than a short name, so unlike `Menu.Body` it cannot name itself after one.
+ *
+ *   <ContextMenu.Root>
+ *     <ContextMenu.Trigger>{row}</ContextMenu.Trigger>
+ *     <ContextMenu.Body aria-label="Row actions">
+ *       <ContextMenu.Item onSelect={rename}>Rename…</ContextMenu.Item>
+ *       <ContextMenu.CheckboxItem defaultChecked>Show hidden</ContextMenu.CheckboxItem>
+ *     </ContextMenu.Body>
+ *   </ContextMenu.Root>
+ */
+export const ContextMenu = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Body: MenuBody,
+  Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  Separator: MenuSeparator,
+  Group: MenuGroup,
+  Label: MenuLabel,
+  Sub: MenuSub,
+  SubTrigger: MenuSubTrigger,
+};
+
+/**
+ * A row of menus that behaves as one control: File, Edit, View.
+ *
+ * One tab stop for the whole bar, arrows between the menus, and — the part that
+ * is always missing — arrows *while a menu is open* that close it and open the
+ * next one, so a reader walks File → Edit → View without pressing Escape.
+ *
+ *   <Menubar.Root aria-label="Main">
+ *     <Menubar.Menu value="file">
+ *       <Menubar.Trigger>File</Menubar.Trigger>
+ *       <Menubar.Body>
+ *         <Menubar.Item onSelect={open}>Open…</Menubar.Item>
+ *       </Menubar.Body>
+ *     </Menubar.Menu>
+ *   </Menubar.Root>
+ */
+export const Menubar = {
+  Root: MenubarRoot,
+  Menu: MenubarMenu,
+  Trigger: MenubarTrigger,
+  // `Menu.Body` itself: a bar's menu is a root menu, and `menubar.js`'s header
+  // says why a wrapper with the same defaults would be a second place to drift.
+  Body: MenuBody,
+  Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
   Separator: MenuSeparator,
   Group: MenuGroup,
   Label: MenuLabel,
@@ -489,13 +1363,19 @@ export const Menu = {
  *     <Combobox.Label>Country</Combobox.Label>
  *     <Combobox.Input />
  *     <Combobox.List>
- *       {matches.map((each) => (
- *         <Combobox.Option key={each} value={each}>{each}</Combobox.Option>
- *       ))}
+ *       <Combobox.Group>
+ *         <Combobox.GroupLabel>Europe</Combobox.GroupLabel>
+ *         {european.map((each) => (
+ *           <Combobox.Option key={each} value={each}>{each}</Combobox.Option>
+ *         ))}
+ *       </Combobox.Group>
  *     </Combobox.List>
  *     <Combobox.Empty>No matches.</Combobox.Empty>
  *     <Combobox.Status />
  *   </Combobox.Root>
+ *
+ * `Combobox.Label` names the field and `Combobox.GroupLabel` names a group of
+ * options, which is why there are two of them.
  */
 export const Combobox = {
   Root: ComboboxRoot,
@@ -503,6 +1383,8 @@ export const Combobox = {
   Input: ComboboxInput,
   List: ComboboxList,
   Option: ComboboxOption,
+  Group: ComboboxGroup,
+  GroupLabel: ComboboxGroupLabel,
   Empty: ComboboxEmpty,
   Status: ComboboxStatus,
 };
@@ -571,6 +1453,64 @@ export const Popover = {
   Body: PopoverBody,
 };
 
+/**
+ * A month of dates, as one stop in the page's tab order.
+ *
+ * The grid is `role="grid"`, the arrow keys move by a day and by a week, and
+ * `PageUp` and `PageDown` change the month - with `Shift`, the year. Running off
+ * the end of a month shows the next one and lands on its first day, and the
+ * month is announced in a live region when it changes.
+ *
+ *   <Calendar.Root defaultValue="2026-10-14" onValueChange={setWhen}>
+ *     <Calendar.Previous>Previous month</Calendar.Previous>
+ *     <Calendar.Next>Next month</Calendar.Next>
+ *     <Calendar.Month />
+ *   </Calendar.Root>
+ *
+ * `Calendar.Month` takes a function child when a day needs more than its number
+ * in it - a dot for an appointment, a price for a night - and it is handed the
+ * date and returns a `Calendar.Day`.
+ *
+ * Dates are `@uniflowed/temporal`'s `PlainDate`, or the ISO strings it reads.
+ * `isDateDisabled` marks a day unavailable *without* making it unreachable: it
+ * is `aria-disabled` and the arrow keys still land on it, which is the opposite
+ * of what a disabled menu item does and the only way a reader can find out which
+ * days are unavailable.
+ */
+export const Calendar = {
+  Root: CalendarRoot,
+  Previous: CalendarPrevious,
+  Next: CalendarNext,
+  Month: CalendarMonth,
+  Day: CalendarDay,
+};
+
+/**
+ * A field somebody types a date into, and a calendar for the times they would
+ * rather point at one.
+ *
+ *   <DatePicker.Root onValueChange={setWhen} value={when}>
+ *     <DatePicker.Input aria-label="Arrive on" />
+ *     <DatePicker.Trigger>Choose a date</DatePicker.Trigger>
+ *     <DatePicker.Calendar>
+ *       <Calendar.Previous>Previous month</Calendar.Previous>
+ *       <Calendar.Next>Next month</Calendar.Next>
+ *       <Calendar.Month />
+ *     </DatePicker.Calendar>
+ *   </DatePicker.Root>
+ *
+ * The field is the control and the grid is the second way in: `Escape` and a
+ * chosen date both put focus back on the field. `format` and `parse` are ISO
+ * 8601 both ways unless a caller passes their own - `date-picker.js` says why a
+ * locale format is not this package's to guess.
+ */
+export const DatePicker = {
+  Root: DatePickerRoot,
+  Input: DatePickerInput,
+  Trigger: DatePickerTrigger,
+  Calendar: DatePickerCalendar,
+};
+
 /**
  * A phrase about a control, on hover and on focus, that WCAG would accept.
  *
@@ -744,3 +1684,209 @@ export const Pagination = {
   Previous: PaginationPrevious,
   Next: PaginationNext,
 };
+
+/**
+ * The trail above the page, read as places rather than as punctuation.
+ *
+ *   <Breadcrumb.Root>
+ *     <Breadcrumb.List>
+ *       <Breadcrumb.Item>
+ *         <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ *       </Breadcrumb.Item>
+ *       <Breadcrumb.Separator>/</Breadcrumb.Separator>
+ *       <Breadcrumb.Item>
+ *         <Breadcrumb.Page>Billing</Breadcrumb.Page>
+ *       </Breadcrumb.Item>
+ *     </Breadcrumb.List>
+ *   </Breadcrumb.Root>
+ *
+ * `Pagination`'s shape one door along: a `<nav>` with a name, one
+ * `aria-current="page"`, and the separators out of the accessibility tree so
+ * the trail is not announced as "Home slash Settings slash Billing". The last
+ * crumb is a `Breadcrumb.Page` and not a link, because it is where the reader
+ * already is.
+ */
+export const Breadcrumb = {
+  Root: BreadcrumbRoot,
+  List: BreadcrumbList,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Page: BreadcrumbPage,
+  Separator: BreadcrumbSeparator,
+};
+
+/**
+ * A callout, and the `live` that decides whether anybody is interrupted by it.
+ *
+ *   <Alert.Root>
+ *     <Alert.Title>Your trial ends on Friday</Alert.Title>
+ *     <Alert.Description>Add a card to keep your projects.</Alert.Description>
+ *   </Alert.Root>
+ *
+ *   {error != null && (
+ *     <Alert.Root live>
+ *       <Alert.Title>Could not save</Alert.Title>
+ *       <Alert.Description>{error}</Alert.Description>
+ *     </Alert.Root>
+ *   )}
+ *
+ * The first has no role at all: it was there when the page loaded, so a live
+ * region would announce it on every load or never, and neither is what anybody
+ * wanted. The second appeared because something happened, which is what
+ * `role="alert"` is for. `alert.js`'s header says why there is no polite
+ * version of this and why `Toast` is that instead.
+ */
+export const Alert = {
+  Root: AlertRoot,
+  Title: AlertTitle,
+  Description: AlertDescription,
+};
+
+/**
+ * A picture of a person, and the two states it is not in yet.
+ *
+ *   <Avatar.Root>
+ *     <Avatar.Image src={person.photo} />
+ *     <Avatar.Fallback>{initials(person.name)}</Avatar.Fallback>
+ *   </Avatar.Root>
+ *
+ * The fallback is absent while the image is loading and present once it has
+ * failed, held back long enough that a cached image never flashes initials.
+ * `alt` defaults to `""`, because an avatar beside the name it belongs to is
+ * decorative and a component that helpfully puts the name there makes every
+ * screen reader say it twice; pass `alt` where the picture is the only thing
+ * identifying the person.
+ */
+export const Avatar = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+};
+
+/**
+ * The grey boxes, and the sentence that stops them being an empty page.
+ *
+ *   <Skeleton.Root busy={pending}>
+ *     {pending ? <Skeleton.Box /> : <Invoices rows={invoices} />}
+ *   </Skeleton.Root>
+ *
+ * The boxes are `aria-hidden`, the region is `aria-busy`, and a live region
+ * that was mounted empty for a commit says "Loading" — a skeleton screen is
+ * busy on its first render, so a region rendered with its message already in it
+ * announces nothing at all. Keep the root mounted across the load and toggle
+ * `busy`; unmounting it takes the region away before it can say the wait is
+ * over.
+ */
+export const Skeleton = {
+  Root: SkeletonRoot,
+  Box: SkeletonBox,
+};
+
+export { I18nProvider, useLocale, useCollator, useFilter } from "./i18n-provider.js";
+import {
+  NumberFieldRoot,
+  NumberFieldInput,
+  NumberFieldIncrement,
+  NumberFieldDecrement,
+} from "./number-field.js";
+export const NumberField = {
+  Root: NumberFieldRoot,
+  Input: NumberFieldInput,
+  Increment: NumberFieldIncrement,
+  Decrement: NumberFieldDecrement,
+};
+
+export { ListBox } from "./list-box.js";
+export { GridList } from "./grid-list.js";
+export { Tree } from "./tree.js";
+export { TagGroup } from "./tag-group.js";
+export type { CollectionItem, CollectionItemState, CollectionProps } from "./list-box.js";
+
+export type { Drop, DragAndDrop } from "./drag-drop.js";
+export { useDragAndDrop } from "./drag-drop.js";
+import {
+  ColorPickerRoot,
+  ColorPickerInput,
+  ColorPickerField,
+  ColorPickerChannel,
+  ColorPickerSwatch,
+} from "./color-picker.js";
+export const ColorPicker = {
+  Root: ColorPickerRoot,
+  Input: ColorPickerInput,
+  Field: ColorPickerField,
+  Channel: ColorPickerChannel,
+  Swatch: ColorPickerSwatch,
+};
+
+export { DateField } from "./date-field.js";
+export { TimeField } from "./time-field.js";
+export type { DateFieldProps } from "./date-field.js";
+import { RangeCalendarRoot } from "./range-calendar.js";
+import {
+  DateRangePickerRoot,
+  DateRangePickerStartField,
+  DateRangePickerEndField,
+  DateRangePickerTrigger,
+  DateRangePickerCalendar,
+} from "./date-range-picker.js";
+export type { DateRange } from "./range-calendar.js";
+export const RangeCalendar = {
+  Root: RangeCalendarRoot,
+  Month: CalendarMonth,
+  Day: CalendarDay,
+  Previous: CalendarPrevious,
+  Next: CalendarNext,
+};
+export const DateRangePicker = {
+  Root: DateRangePickerRoot,
+  StartField: DateRangePickerStartField,
+  EndField: DateRangePickerEndField,
+  Trigger: DateRangePickerTrigger,
+  Calendar: DateRangePickerCalendar,
+};
+
+export {
+  NumberFieldRoot,
+  NumberFieldInput,
+  NumberFieldIncrement,
+  NumberFieldDecrement,
+  parseNumber,
+} from "./number-field.js";
+export type { NumberFormatOptions } from "./number-field.js";
+export {
+  ColorPickerRoot,
+  ColorPickerInput,
+  ColorPickerField,
+  ColorPickerChannel,
+  ColorPickerSwatch,
+  parseColor,
+} from "./color-picker.js";
+export { RangeCalendarRoot } from "./range-calendar.js";
+export {
+  DateRangePickerRoot,
+  DateRangePickerStartField,
+  DateRangePickerEndField,
+  DateRangePickerTrigger,
+  DateRangePickerCalendar,
+} from "./date-range-picker.js";
+export type { Locale } from "./i18n-provider.js";
+export { startsWithLocale } from "./i18n-provider.js";
+
+/**
+ * For a screen reader and nobody else.
+ *
+ * `VisuallyHidden` is text that stays in the accessibility tree and off the
+ * screen — an icon button's name, a skip link (`focusable`) that appears when a
+ * keyboard reaches it. `announce` says something through one pair of live
+ * regions shared by the whole document, from an event handler, an effect or a
+ * `catch`, without the caller rendering a region of their own:
+ *
+ *     announce(`${results.length} results`);
+ *     announce("Could not save", { politeness: "assertive" });
+ *
+ * `visually-hidden.js` says why a region rendered with its message is silent,
+ * and why these regions stay readable while a dialog hides the rest of the page.
+ */
+export { VisuallyHidden, announce, clearAnnouncements } from "./visually-hidden.js";
+export type { AnnounceOptions, Politeness } from "./visually-hidden.js";