Component catalog

60 components across four atomic-design layers, plus the graph peer layer (node editor). Each has its own page with design intent, anatomy, variants/states, API, and usage examples. Layer rules: atoms paint, everything above composes; the graph layer is the sanctioned exception that paints (still via tokens). See guards.

Atoms

23 leaf components — the only layer that paints primitives. Each is a token-driven builder.

Typography & content

• Text — body/label/caption text honoring the full type style
• Heading — display→h-levels titles
• Icon — a Phosphor glyph at a token size
• Kbd — keyboard key cap

Actions

• Button — the worked-example atom; 6 variants, 3 sizes, icons, loading
• Toggle — a pressable on/off button

Form controls

• Input — single-line text field
• Textarea — multi-line text field
• NumericField — numeric input with step
• Checkbox — boolean check
• Radio — single-choice dot
• Switch — on/off slider
• Slider — range selector

Display & feedback

• Badge — status/label pill
• Avatar — user image/initials
• Progress — determinate progress bar
• Spinner — indeterminate loading
• Skeleton — content placeholder
• Tooltip — hover hint

Structural

• Surface — the painting primitive (fill/border/radius/shadow) everything composes
• Divider — horizontal/vertical rule
• ColorSwatch — a painted color chip
• SplitterHandle — drag handle for resizable panels

Cells

8 compound row/item building blocks. Compose atoms; never paint.

• ListItem — selectable list row
• MenuItem — menu row (icon + label + shortcut)
• PropertyRow — inspector row (fixed label column + control)
• ResponsiveRow — inspector row that stacks label↔control when narrow
• TableCell — a single table cell with alignment
• TableRow — a row of table cells
• ToolbarButton — dense toolbar control
• TreeNode — tree row with expand/select

Molecules

14 compositions of atoms (and smaller molecules).

Forms

• Field — label + control wrapper (+ FieldGroup, FieldSet, FieldSeparator)
• InputGroup — input with prefix/suffix slots
• SearchField — input preset for search
• ColorField — color input field
• VectorField — multi-component numeric (x/y/z) field
• RadioGroup — grouped radios
• ToggleGroup — segmented toggle buttons
• CheckboxCard — checkbox as a selectable card
• RadioCard — radio as a selectable card

Containers & navigation

• Card — styled surface container
• Alert — inline banner (default/success/warning/error/info)
• Tabs — tab switcher (default/pill)
• Breadcrumb — navigation trail
• Collapsible — expand/collapse section

Organisms

14 full UI sections composed from cells, molecules, and atoms.

Layout shells

• Splitter — the single layout primitive: screen root + resizable panes (PanelSpec, with fixed(px) non-resizable chrome bands)
• Panel — docked panel chrome: bg + flush edge border + header/footer + padded scroll body (PanelEdge)
• Sidebar — navigation panel
• Toolbar — top/bottom tool bar
• Menubar — application menu bar

Overlays

• Dialog — modal dialog
• Popover — floating anchored surface
• DropdownMenu — menu in a popup
• Toast — transient notification
• Select — select/combo dropdown

Data & views

• Table — column-defined data table (Column, ColWidth)
• TreeView — hierarchical tree (TreeItem)
• TabView — tabbed content view
• Accordion — stacked collapsible sections (AccordionCtx)

Graph

The graph peer layer — a reactflow-style node editor on egui::Scene. The one place outside atoms that paints (still via tokens). Caller owns the data; the library owns view-state and reports intents.

• Graph layer overview — invariant, two tiers, data-model contract, lifecycle
• identity — NodeId/PortId/NodeKindId/PortSide/Port/Connection
• canvas — GraphView, GraphCtx, GraphResponse
• state — GraphViewState + drag structs
• tokens — GraphTokens
• node — NodeFrame/NodeResult/NodeStatus + ctx.node
• edge — EdgeStyle/EdgeResult + ctx.edge
• handle — HandleSpec/HandleVariant (ports)
• search — NodeSearch palette
• viewport — standalone world↔screen transform helper
• extras — grid, resizer, minimap, toolbar, controls

Page template

Every component page follows the same structure: what it is → Design (purpose, anatomy, variants/sizes/states, tokens consumed, a11y) → API (builder methods) → Usage (minimal + realistic examples) → Composition → Notes.