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.