Component Catalog
The reusable SwiftUI components in the WolfWave macOS app, like status chips, callouts, and buttons. Each has API, tokens, accessibility notes, and do/don'ts.
TL;DR: before building a new SwiftUI view, check the catalog. A shared component probably exists, and each one documents its API, tokens, and accessibility.
WolfWave's native macOS app ships a library of reusable SwiftUI components under
apps/native/WolfWave/Views/Shared/, Views/Onboarding/Components/, and
Views/HistoryStats/. Every
component has a markdown catalog entry in
design-system/components/
covering its API, the tokens it uses, an anatomy diagram, accessibility notes,
and a do/don't list.
The catalog's README is the live index — it tracks every entry and its status, so it never drifts from the source tree the way a copied table here would.
A few representative entries:
| Component | What it does | Catalog |
|---|---|---|
StatusChip | Capsule indicator (dot + label) for connection state. | entry |
CalloutBanner | Tinted info/success/warning/error callout used across settings. | entry |
NowPlayingHeroCard | Large now-playing card (art + track + artist). | entry |
DSIconButton | Single-glyph bordered button sized to match text-label neighbors. | entry |
SettingsNavRail | Reusable two-column jump-nav rail with scroll sync; not used by current Settings panes. | entry |
AsyncActionButton | One button, one async action: spinner replaces the label, disabled in flight, brief success check, width pinned so nothing resizes. | entry |
How to add a component
- Build the SwiftUI view under
Views/Shared/,Views/Onboarding/Components/, orViews/HistoryStats/. - Reference
DSColor/DSFont/DSSpace/DSRadius/DSMotiontokens. No hardcoded numbers, and no raw system colors as a status tint (DSColor.success/.warning/.error/.info/.neutralonly).bun run ds:lintenforces both. - Add a markdown entry in
design-system/components/<name>.mdfollowing the template. - Add the entry to the catalog README index.
- Add a
#Previewfor each state. AViews/Shared/view also goes in the Debug tab's component gallery (Views/Debug/DesignSystem/). - Run
make lint-sync; it blocks missing source/catalog pairs and incomplete templates.
Changing an existing component? Update its catalog entry in the same PR.
Foundations
WolfWave's core design tokens. Brand color scale, type ramp, spacing, radius, motion, and shadows. Generated from one tokens.json into Swift, CSS, JS, and TS.
Brand
WolfWave's brand guidelines: logo use and clear space, Apple Music, Twitch, Discord, and OBS partner colors, and the plain, ADHD-friendly voice.