Export catalog
Every public @hq/ui export and fixture coverage contract.
Start · fixture-only
Fixture coverage gate
Every export in PRIMITIVE_EXPORTS and COMPOUND_EXPORTS must appear in a gallery fixture — contract test enforces this.
Fixture data only — behaviour matches production chrome
Navigate by taxonomy
Gallery sections grid links to sidebar routes — component taxonomy, not Workshop product IA.
Fixture data only — behaviour matches production chrome
Gallery sections
Every sidebar route — jump to the fixture page for each component family.
Start
Overview
How UI Lab relates to Workshop and when to fix library vs wiring.
Start
Export catalog
Every public @hq/ui export and fixture coverage contract.
Foundations
Typography
Type ramp, display/body/mono roles, density-aware sizes.
Foundations
Themes
data-theme matrix — light, dark, and brand variants.
Foundations
Density
DensityProvider modes for power-user vs comfortable layouts.
Foundations
Form tokens
Shared control chrome — borders, surfaces, focus rings.
Foundations
Layout contract
PageLayout, ToolbarRow, ListPageFooter — Workshop page grammar.
Primitives
Actions
Button, Badge, StatusDot — accent discipline and loading states.
Primitives
Forms
Input, Select, Textarea, FormField, SubmitButton patterns.
Primitives
Form controls
Checkbox, Switch, RadioGroup for boolean and single-choice fields.
Primitives
Data display
Table, Card, Tabs — structured content without domain opinion.
Primitives
Feedback
Alert, Skeleton, EmptyState, ErrorState, Toast, TopProgress.
Primitives
Overlays
Dialog, Sheet, Popover — layered surfaces and focus traps.
Primitives
Command
Command palette primitives — ⌘K dialog shell and keyboard nav.
Primitives
Alert dialog
Destructive confirms — irreversible actions only.
Primitives
Chrome
ScrollArea, Avatar, Breadcrumb, Calendar — shell-adjacent primitives.
Primitives
Power density
ContextMenu, HoverCard, Accordion, ToggleGroup, Kbd, Progress.
Layout & shell
Shell overview
AppShell contract — scroll model, gutters, full-bleed, safe areas.
Layout & shell
WorkspaceShell
Three-zone collapsible workspace for chat and inspectors.
Layout & shell
NavRail
Sidebar and agent-rail link density.
Data surfaces
Lists
ListSurface, ObjectList, ProjectList — browse patterns with states.
Data surfaces
Detail
DetailSurface, RecordHero, PropertyGrid — record pages.
Data surfaces
Inbox
Inbox thread list — triage, unread, and selection states.
Agent & chat
Overview
Agent UX compounds map — transcript through inspector.
Agent & chat
Transcript
Streaming messages, tool steps, turn separators.
Agent & chat
Composer
ComposerBar, attachments, context chips.
Agent & chat
Chain of thought
Expandable reasoning steps and search results.
Agent & chat
Confirmations
Tool approval requests — accept/reject chrome.
Agent & chat
Artifacts
Generated output panels with actions.
Agent & chat
Thread list row
Unified row for agent rail and sidebar threads.
Agent & chat
Inspector
Timeline, artifacts, and approvals tabs.
Agent & chat
Message actions
Copy, retry, branch — per-message action bar.
Agent & chat
Composer depth
Attachment strip and composer expansion.
Platform fixtures
Agents
Agent registry list rows and status pills.
Platform fixtures
Workflows
Workflow runs, graphs, and run status.
Platform fixtures
Approvals
Approval queue rows and decision cards.
Platform fixtures
Observability
Ops tiles, log tables, metric readouts.
Platform fixtures
Settings
Settings sections and admin forms.
Workshop patterns
Dashboard
Home tiles, proof lines, operational overview.
Workshop patterns
Chat workspace
Full-bleed agent workspace with WorkspaceShell.
Workshop patterns
Objects
Object explorer and detail record layout.
Primitives
102 public primitives — each has a fixture under Primitives in the sidebar.
Primitives
— Browse Primitives in the sidebar
Alert@hq/uiCollapsibleSection@hq/uiBadge@hq/uiButton@hq/uiCard@hq/uiDialog@hq/uiField@hq/uiFormField@hq/uiInput@hq/uiLabel@hq/uiModal@hq/uiSelect@hq/uiSearchableSelect@hq/uiSeparator@hq/uiSubmitButton@hq/uiTable@hq/uiTextarea@hq/uiTabs@hq/uiToast@hq/uiSkeleton@hq/uiEmptyState@hq/uiErrorState@hq/uiTopProgress@hq/uiPagination@hq/uiCheckbox@hq/uiSwitch@hq/uiRadioGroup@hq/uiRadioGroupItem@hq/uiAlertDialog@hq/uiAlertDialogAction@hq/uiAlertDialogCancel@hq/uiAlertDialogContent@hq/uiAlertDialogDescription@hq/uiAlertDialogFooter@hq/uiAlertDialogHeader@hq/uiAlertDialogTitle@hq/uiAlertDialogTrigger@hq/uiPopover@hq/uiPopoverTrigger@hq/uiPopoverContent@hq/uiPopoverAnchor@hq/uiSheet@hq/uiSheetPortal@hq/uiSheetOverlay@hq/uiSheetTrigger@hq/uiSheetClose@hq/uiSheetContent@hq/uiSheetHeader@hq/uiSheetFooter@hq/uiSheetTitle@hq/uiSheetDescription@hq/uiCommand@hq/uiCommandDialog@hq/uiCommandInput@hq/uiCommandList@hq/uiCommandEmpty@hq/uiCommandGroup@hq/uiCommandItem@hq/uiCommandShortcut@hq/uiCommandSeparator@hq/uiCollapsible@hq/uiCollapsibleTrigger@hq/uiCollapsibleContent@hq/uiDropdownMenu@hq/uiDropdownMenuTrigger@hq/uiDropdownMenuContent@hq/uiDropdownMenuItem@hq/uiTooltip@hq/uiTooltipTrigger@hq/uiTooltipContent@hq/uiTooltipProvider@hq/uiContextMenu@hq/uiContextMenuTrigger@hq/uiContextMenuContent@hq/uiContextMenuItem@hq/uiHoverCard@hq/uiHoverCardTrigger@hq/uiHoverCardContent@hq/uiAccordion@hq/uiAccordionItem@hq/uiAccordionTrigger@hq/uiAccordionContent@hq/uiToggle@hq/uiToggleGroup@hq/uiToggleGroupItem@hq/uiKbd@hq/uiKbdGroup@hq/uiProgress@hq/uiScrollArea@hq/uiScrollBar@hq/uiAvatar@hq/uiAvatarImage@hq/uiAvatarFallback@hq/uiBreadcrumb@hq/uiBreadcrumbList@hq/uiBreadcrumbItem@hq/uiBreadcrumbLink@hq/uiBreadcrumbPage@hq/uiBreadcrumbSeparator@hq/uiBreadcrumbEllipsis@hq/uiCalendar@hq/uiCalendarDayButton@hq/uiCompounds & surfaces
85 compounds — foundations, shell, data surfaces, agent, platform, and patterns.
Compounds & surfaces
— Foundations, Layout, Data surfaces, Agent, Platform, Patterns
SectionLabel@hq/uiFilterChip@hq/uiListRowDensity@hq/uiMetaCaption@hq/uiRecordHero@hq/uitypeRamp@hq/uiformatDurationMs@hq/uiformControlChrome@hq/uiformControlBorder@hq/uiformControlSurface@hq/uiSoftCardSurface@hq/uiPropertyRow@hq/uiPropertyGrid@hq/uiPropertySection@hq/uiDurationLabel@hq/uiChangePill@hq/uiProofLine@hq/uiListSurface@hq/uiObjectList@hq/uiObjectRow@hq/uiObjectTile@hq/uiProjectList@hq/uiProjectRow@hq/uiFileList@hq/uiFolderRow@hq/uiFileRow@hq/uiInbox@hq/uiInboxThreadRow@hq/uiDetailSurface@hq/uiDetailSection@hq/uiWorkspaceShell@hq/uiFullBleedWorkspace@hq/uiNavRail@hq/uiNavRailItem@hq/uiDensityProvider@hq/uiuseDensity@hq/uiStreamingMessage@hq/uiToolStepRow@hq/uiToolGroup@hq/uiComposerBar@hq/uiContextChipStrip@hq/uiChainOfThought@hq/uiChainOfThoughtHeader@hq/uiChainOfThoughtStep@hq/uiChainOfThoughtContent@hq/uiChainOfThoughtSearchResults@hq/uiChainOfThoughtSearchResult@hq/uiChainOfThoughtImage@hq/uiConfirmation@hq/uiConfirmationTitle@hq/uiConfirmationRequest@hq/uiConfirmationAccepted@hq/uiConfirmationRejected@hq/uiConfirmationActions@hq/uiConfirmationAction@hq/uiArtifact@hq/uiArtifactHeader@hq/uiArtifactClose@hq/uiArtifactTitle@hq/uiArtifactDescription@hq/uiArtifactActions@hq/uiArtifactAction@hq/uiArtifactContent@hq/uiThreadListRow@hq/uiApprovalCard@hq/uiArtifactPanel@hq/uiAgentInspectorPanel@hq/uiAgentInspectorTimelinePanel@hq/uiAgentInspectorArtifactsPanel@hq/uiAgentInspectorApprovalsPanel@hq/uiMessageActionBar@hq/uiMessageActionButton@hq/uiTurnSeparator@hq/uiUserMessageBubble@hq/uiAssistantMessageBubble@hq/uiComposerAttachmentStrip@hq/uiModelAgentPicker@hq/uiStopGenerationButton@hq/uiAgentListRow@hq/uiApprovalQueueRow@hq/uiWorkflowListRow@hq/uiRunStatusPill@hq/uiOpsMetricTile@hq/uiLogTableRow@hq/uiSettingsSection@hq/ui