Component gallery

How UI Lab relates to Workshop and when to fix library vs wiring.

Every public @hq/ui export and fixture coverage contract.

Type ramp, display/body/mono roles, density-aware sizes.

data-theme matrix — light, dark, and brand variants.

DensityProvider modes for power-user vs comfortable layouts.

Shared control chrome — borders, surfaces, focus rings.

PageLayout, ToolbarRow, ListPageFooter — Workshop page grammar.

Button, Badge, StatusDot — accent discipline and loading states.

Input, Select, Textarea, FormField, SubmitButton patterns.

Checkbox, Switch, RadioGroup for boolean and single-choice fields.

Table, Card, Tabs — structured content without domain opinion.

Alert, Skeleton, EmptyState, ErrorState, Toast, TopProgress.

Dialog, Sheet, Popover — layered surfaces and focus traps.

Command palette primitives — ⌘K dialog shell and keyboard nav.

Destructive confirms — irreversible actions only.

ScrollArea, Avatar, Breadcrumb, Calendar — shell-adjacent primitives.

ContextMenu, HoverCard, Accordion, ToggleGroup, Kbd, Progress.

AppShell contract — scroll model, gutters, full-bleed, safe areas.

Three-zone collapsible workspace for chat and inspectors.

Sidebar and agent-rail link density.

ListSurface, ObjectList, ProjectList — browse patterns with states.

DetailSurface, RecordHero, PropertyGrid — record pages.

Inbox thread list — triage, unread, and selection states.

Agent UX compounds map — transcript through inspector.

Streaming messages, tool steps, turn separators.

ComposerBar, attachments, context chips.

Expandable reasoning steps and search results.

Tool approval requests — accept/reject chrome.

Generated output panels with actions.

Unified row for agent rail and sidebar threads.

Timeline, artifacts, and approvals tabs.

Copy, retry, branch — per-message action bar.

Attachment strip and composer expansion.

Agent registry list rows and status pills.

Workflow runs, graphs, and run status.

Approval queue rows and decision cards.

Ops tiles, log tables, metric readouts.

Settings sections and admin forms.

Home tiles, proof lines, operational overview.

Full-bleed agent workspace with WorkspaceShell.

Object explorer and detail record layout.