Component Catalog
Every reusable SwiftUI component shipped in the WolfWave macOS app. Status chips, cards, action grids, banners. Each entry has API, tokens, accessibility notes, and a do/don't list.
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 | Two-column jump-nav rail with scroll sync for long 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/DSRadiustokens. 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.
- Run
make lint-sync; it blocks missing source/catalog pairs and incomplete templates.
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 usage and clear space, Apple Music / Twitch / Discord / OBS partner colors, and the ADHD-friendly voice that runs through the product.