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 small library of SwiftUI components under apps/native/WolfWave/Views/Shared/ and Views/Onboarding/Components/. Each entry below links to its source plus a markdown catalog entry with API, tokens, accessibility notes, and a do/don't list.
Shared
| Component | What it does | Catalog |
|---|---|---|
StatusChip | Capsule indicator (dot + label) for connection state. | docs |
InfoRow | Label + selectable read-only value. | docs |
ToggleSettingRow | Toggle + title + caption row. | stub |
SuccessFeedbackRow | Inline success/error feedback line. | stub |
SectionHeaderWithStatus | Section heading with trailing status chip. | stub |
NowPlayingHeroCard | Large now-playing card (art + track + artist). | stub |
AlbumArtView | Square album art with placeholder fallback. | stub |
IntegrationDashboardView | Compact panel showing integration statuses. | stub |
ConfigRequiredBanner | Inline banner shown when API keys are missing. | stub |
CopyButton | Icon button that copies a value to pasteboard. | stub |
UpdateBannerView | Sparkle update available banner. | stub |
WhatsNewView | What's new sheet content. | stub |
TwitchGlitchShape | Twitch glitch logo Shape. | stub |
ViewModifiers | cardStyle, interactiveRow, pointerCursor, … | docs |
Onboarding
| Component | What it does | Catalog |
|---|---|---|
PillButton | Capsule CTA with glow + gradient. | stub |
BrandTile | 56×56 brand icon tile with glow. | stub |
How to add a component
- Build the SwiftUI view under
Views/Shared/orViews/Onboarding/Components/. - Reference
DSColor/DSFont/DSSpace/DSRadiustokens. No hardcoded numbers. - Add a markdown entry in
design-system/components/<name>.mdfollowing the template. - Add a row to the table above.
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.