@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/shell/README.md

@@ -1,22 +1,54 @@
 # Shell chrome — component family
 
-The persistent dashboard frame (top bar, and — as the decomposition proceeds — side nav, session
-rail, drawers, pinned strip). Components live flat on disk; the tiering below is a documentation
-contract, not a directory layout, so promoting/composing is pure import churn.
+The persistent dashboard frame (top bar, side nav, and — as the decomposition proceeds — session
+rail, drawers, pinned strip). The tiering below is a documentation contract, not a directory
+layout, so promoting/composing is pure import churn.
 
 This README is the **index**: it maps each component's dependencies (**composes ↓**) and its consumers
 (**used-by ↑**) so you can navigate the tree in both directions and spot where a hand-rolled element
 should be reaching for an existing primitive instead. Storybook mirrors this tree under `Shell/TopBar/…`,
 and every component's autodocs page repeats its "Composes" links.
 
+## The generic/app split (AW-132)
+
+`shell/` is **generic**. It knows about a band, a rail, a brand lockup and a content region, and
+nothing about any one product. `shell/workout/` is the **workout app's** chrome, and it composes
+the generic family. The dependency arrow points one way only: nothing in `shell/` may import from
+`shell/workout/`, and a second app (audiobook, active-work, agent dashboards, brain) gets its own
+sibling directory rather than a new prop on `AppShell`.
+
+**The composition mechanism is the library's existing slot idiom** — named `ReactNode` props with a
+built-in default, the same shape as `Pill`'s `leading`/`trailing` and `SectionHeader`'s `trailing`.
+No second mechanism was introduced.
+
+| Slot                     | On          | Default                          | An app uses it to…                       |
+| ------------------------ | ----------- | -------------------------------- | ---------------------------------------- |
+| `TopBar.trailing`        | `TopBar`    | just the clock                   | put its own chrome in the right cluster  |
+| `TopBar.leading`         | `TopBar`    | `<BrandLockup brand=…>`          | replace the brand region outright        |
+| `AppShell.topBarTrailing` | `AppShell`  | —                                | pass chrome through to the default bar   |
+| `AppShell.topBar`        | `AppShell`  | `<TopBar brand=…>`               | swap the whole band                      |
+| `AppShell.nav`           | `AppShell`  | `<SideNav items=…>`              | swap the whole rail                      |
+| `AppShell.children`      | `AppShell`  | a placeholder                    | mount its page                           |
+
+`TopBar.trailing` takes an array as well as a node. **The bar interleaves its own vertical dividers
+between the items**, so an app supplies the controls and the shell keeps the divider rhythm from the
+S1 lock — the app never hand-places a `Divider`, and can't drift from it.
+
+Two things stopped being generic defaults and became the workout app's data:
+
+- `SideNav.items` is **required**. The four Live · Review · Plan · Body categories are
+  `workoutNavItems` in `shell/workout/`.
+- `BrandLockup` is generic over `brand` (five presets in `brands.tsx`), rather than hard-coding
+  the Voltras mark and wordmark.
+
 ## Specimen: `SideNav` (the second shell unit, S2)
 
 ```
 SideNav ...................... organism — the 60px left rail (Shell/SideNav)
-├─ NavItem ................... molecule × 4 (Live · Review · Plan · Body)
-│  ├─ icon ................... icons (shared primitive) — Activity/History/Layers/PersonStanding
+├─ NavItem ................... molecule × `items` (the app's own categories)
+│  ├─ icon ................... icons (shared primitive) — supplied per item
 │  └─ Typography ............. titan · button variant (uppercase micro-label)
-└─ (accent bar) .............. bg-brand-primary edge bar on the active item
+└─ (accent bar) .............. edge bar on the active item, in the app's brand accent
 ```
 
 Decisions locked 2026-07-08 (specimen `sources/design/shell/S2-sidenav/`): lucide glyphs
@@ -24,41 +56,58 @@ Decisions locked 2026-07-08 (specimen `sources/design/shell/S2-sidenav/`): lucid
 bar** (short, centered on the icon+label) · **60px** icon+micro-label · live cue = **muted-green label**
 (`status-live-muted`) on the Live item while a set runs off-Live · four items, no footer, no top-nav. Fixed
 60px at every width (labels sit under the glyph). `SideNav` is presentational — `activeKey` / `onNavigate` /
-`liveKey`; the app owns routing + which key is live.
+`liveKey`; the app owns routing + which key is live. Those four categories are now
+`workoutNavItems` in `shell/workout/` (AW-132); the rail itself has no built-in set.
 
 ## Specimen: `TopBar` (the first shell unit, S1)
 
 ```
 TopBar ....................... organism — the chrome band (Shell/TopBar)
-├─ BrandLockup ............... molecule
-│  ├─ VoltrasMark ............ icons (shared primitive)
+├─ BrandLockup ............... molecule — default `leading`
+│  ├─ brand mark ............. icons (shared primitive) — per `brands.tsx` preset
 │  └─ Typography ............. titan · button variant
-├─ SessionStatePill .......... molecule  (= the reusable StatusPill)
-│  ├─ Indicator .............. titan · ping pulse + vivid color
-│  └─ Typography ............. titan · monoLabel
-├─ Divider ................... titan · bg-border-prominent
-├─ DeviceMenu ................ organism
-│  ├─ Popover ................ titan
-│  ├─ DeviceIndicator ........ molecule → BluetoothIcon (icons primitive)
-│  ├─ DeviceRow .............. molecule → Indicator + Typography (body2 / mono)
-│  └─ Typography ............. titan · monoLabel (header)
-├─ DateTime .................. titan · mono variant, live 24h clock
+├─ trailing[] ................ SLOT — app chrome, divider-interleaved by the bar
+├─ Divider ................... titan · bg-border-prominent (one per slot gap)
+├─ DateTime .................. titan · mono variant, live 24h clock (edge-pinned)
 └─ surfaceGradient.chrome .... theme · gradient primitive
 ```
 
-## Dependency map
+## Specimen: `WorkoutTopBar` (the same band, filled by the workout app)
+
+```
+WorkoutTopBar ................ organism — Shell/Workout/WorkoutTopBar
+└─ TopBar .................... generic band, brand="voltras"
+   └─ trailing[] ............. supplied by the workout app:
+      ├─ SessionStatePill .... molecule → Indicator + Typography (monoLabel)
+      └─ DeviceMenu .......... organism
+         ├─ Popover .......... titan
+         ├─ DeviceIndicator .. molecule → BluetoothIcon (icons primitive)
+         ├─ DeviceRow ........ molecule → Indicator + Typography (body2 / mono)
+         └─ Typography ....... titan · monoLabel (header)
+```
+
+## Dependency map — generic (`shell/`)
 
 | Component | Tier | Composes ↓ | Used-by ↑ |
 |---|---|---|---|
-| `SideNav` | organism | NavItem ×4, `components/icons` (Activity/History/Layers/PersonStanding) | dashboard app root *(planned)* |
+| `AppShell` | page shell | TopBar, SideNav, Surface | WorkoutShell, any app root |
+| `SideNav` | organism | NavItem × `items` | AppShell |
 | `NavItem` | molecule | icon, Typography | SideNav |
-| `TopBar` | organism | BrandLockup, SessionStatePill, Divider, DeviceMenu, DateTime, `surfaceGradient.chrome` | dashboard app root *(planned)* |
-| `BrandLockup` | molecule | VoltrasMark, Typography | TopBar |
-| `SessionStatePill` | molecule | Indicator, Typography | TopBar, **Live-view header** *(planned reuse)* |
-| `DeviceMenu` | organism | Popover, DeviceIndicator, DeviceRow, Typography | TopBar |
+| `TopBar` | organism | BrandLockup, Divider, DateTime, `surfaceGradient.chrome` | AppShell, WorkoutTopBar |
+| `BrandLockup` | molecule | a brand mark icon, Typography | TopBar |
+| `brands.tsx` | data | VoltrasMark / Headphones / Kanban / Bot / Brain icons | BrandLockup, TopBar, AppShell |
+
+## Dependency map — workout app (`shell/workout/`)
+
+| Component | Tier | Composes ↓ | Used-by ↑ |
+|---|---|---|---|
+| `WorkoutShell` | page shell | AppShell, WorkoutTopBar, workoutNavItems | dashboard app root |
+| `WorkoutTopBar` | organism | TopBar, SessionStatePill, DeviceMenu | WorkoutShell |
+| `SessionStatePill` | molecule | Indicator, Typography | WorkoutTopBar, **Live-view header** *(planned reuse)* |
+| `DeviceMenu` | organism | Popover, DeviceIndicator, DeviceRow, Typography | WorkoutTopBar |
 | `DeviceIndicator` | molecule | BluetoothIcon | DeviceMenu |
 | `DeviceRow` | molecule | Indicator, Typography | DeviceMenu |
-| `VoltrasMark` / `BluetoothIcon` | **`components/icons`** primitive | `SvgIcon` base | BrandLockup / DeviceIndicator (+ any consumer) |
+| `workoutNavItems` | data | Activity/History/Layers/PersonStanding icons | WorkoutShell |
 
 ## Shared substrates introduced here (reusable beyond the shell)
 
@@ -98,6 +147,20 @@ Every leaf now composes a primitive rather than hand-rolling it:
 - **Lint guardrails** — components may not inline `linear-gradient` (use `surfaceGradient`); shell + icons may
   not use raw hex (use tokens).
 
+**AW-132 shared substrate:** four brand marks added to `components/icons` (`HeadphonesIcon`,
+`KanbanIcon`, `BotIcon`, `BrainIcon`), so `brands.tsx` can carry a preset for every app expected to
+mount this shell. Brand accents come from `data-*` rather than `status-*`: `data-*` is the library's
+set of distinct, CVD-checked hues with no semantic load, which is what a per-app identity accent
+needs. Voltras keeps the real `brand-primary` token.
+
+**The nav accent is brand-level, not shell-level** (operator, Gate 2 2026-09-11). `SideNav`'s active
+item and its edge bar take the mounting app's accent, so a Brain shell reads yellow throughout
+rather than showing a Voltras-orange active item under a yellow lockup. `AppShell` threads it down
+from `brand`; a bare `SideNav` takes `accentClassName` / `accentBarClassName`. Each preset declares
+both as literals (`text-data-3` + `bg-data-3`) because Tailwind only emits classes it can see in the
+source — a name built at runtime is never generated — and a test asserts the pair always matches.
+Workout is unaffected: its accent *is* `brand-primary`.
+
 **S2 shared substrate:** four nav glyphs added to `components/icons` (`ActivityIcon`, `HistoryIcon`,
 `LayersIcon`, `PersonStandingIcon` — lucide-mirrored, like Dumbbell/Star), available system-wide.
 

package/src/components/shell/SideNav.stories.tsx

@@ -3,15 +3,20 @@ import { useArgs } from 'storybook/preview-api'
 import { View } from 'react-native'
 import { SideNav } from './SideNav'
 import { Typography } from '../custom/Typography'
+import { Surface } from '../ui/surface'
+import { BotIcon, BrainIcon, LayersIcon } from '../icons'
+import { workoutNavItems } from './workout'
+import { brandPresets } from './brands'
 
 const meta: Meta<typeof SideNav> = {
   title: 'Shell/SideNav',
   component: SideNav,
-  tags: ['autodocs'],
-  args: { activeKey: 'live', liveKey: null },
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: { items: workoutNavItems, activeKey: 'live', liveKey: null },
   argTypes: {
     activeKey: { control: 'select', options: ['live', 'review', 'program', 'body'] },
     liveKey: { control: 'select', options: [null, 'live', 'review', 'program', 'body'] },
+    items: { control: false },
     onNavigate: { action: 'navigate' },
   },
   // Interactive AND Controls-synced: clicking a category writes `activeKey` back to the
@@ -35,14 +40,14 @@ const meta: Meta<typeof SideNav> = {
   // stretches with the viewport (resize the canvas height to see it hold).
   decorators: [
     (Story) => (
-      <View className="min-h-screen flex-row bg-background-default">
+      <Surface level="base" className="min-h-screen flex-row">
         <Story />
         <View className="flex-1 items-center justify-center">
           <Typography variant="body2" color="tertiary">
             main viewport
           </Typography>
         </View>
-      </View>
+      </Surface>
     ),
   ],
   parameters: {
@@ -50,9 +55,11 @@ const meta: Meta<typeof SideNav> = {
     docs: {
       description: {
         component:
-          '**Organism** (shell region). The persistent 60px left rail switching Live · Review · Plan · ' +
-          'Body. Composes [NavItem](?path=/docs/shell-navitem--docs) × the four categories + the ' +
-          'shared [icon set](?path=/docs/foundations-icons--docs). Presentational — drive it with `activeKey` / ' +
+          '**Organism** (shell region). The persistent 60px left rail that switches the main viewport ' +
+          "between an app's categories. Composes [NavItem](?path=/docs/shell-navitem--docs) × `items` + the " +
+          'shared [icon set](?path=/docs/foundations-icons--docs). It has no built-in categories: `items` is ' +
+          'required, and each app supplies its own (the workout set is `workoutNavItems`). ' +
+          'Presentational — drive it with `activeKey` / ' +
           '`onNavigate` / `liveKey`. Active = left accent bar; `liveKey` (when not active) tints that ' +
           'label a muted green.\n\n' +
           '**Try it:** stories render in a full-height shell frame — the rail pins to the left edge and ' +
@@ -79,3 +86,27 @@ export const LiveElsewhere: Story = {
     },
   },
 }
+
+/** A different app's categories and accent in the same rail (AW-132). */
+export const AnotherApp: Story = {
+  args: {
+    items: [
+      { key: 'notes', label: 'Notes', icon: <LayersIcon size={20} color="currentColor" /> },
+      { key: 'graph', label: 'Graph', icon: <BrainIcon size={20} color="currentColor" /> },
+      { key: 'agents', label: 'Agents', icon: <BotIcon size={20} color="currentColor" /> },
+    ],
+    activeKey: 'graph',
+    accentClassName: brandPresets.brain.accentClassName,
+    accentBarClassName: brandPresets.brain.accentBarClassName,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The brain app's three categories in its own accent. Same rail, same states, different " +
+          '`items` and accent. `AppShell` passes the accent down from its `brand`; drive the bare ' +
+          'rail with `accentClassName` / `accentBarClassName`.',
+      },
+    },
+  },
+}

package/src/components/shell/SideNav.test.tsx

@@ -1,11 +1,19 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent, within } from '@testing-library/react'
 import { axe } from 'jest-axe'
-import { SideNav } from './SideNav'
+import { SideNav, type SideNavItem } from './SideNav'
+
+// A generic four-category set — the rail has no built-in categories any more.
+const items: SideNavItem[] = [
+  { key: 'live', label: 'Live', icon: null },
+  { key: 'review', label: 'Review', icon: null },
+  { key: 'program', label: 'Plan', icon: null },
+  { key: 'body', label: 'Body', icon: null },
+]
 
 describe('SideNav', () => {
-  it('renders the four default categories as tabs in a tablist', () => {
-    render(<SideNav activeKey="live" />)
+  it('renders the supplied categories as tabs in a tablist', () => {
+    render(<SideNav items={items} activeKey="live" />)
     expect(screen.getByRole('tablist')).toBeInTheDocument()
     ;['Live', 'Review', 'Plan', 'Body'].forEach((name) => {
       expect(screen.getByRole('tab', { name })).toBeInTheDocument()
@@ -13,7 +21,7 @@ describe('SideNav', () => {
   })
 
   it('shows the accent bar only on the active category', () => {
-    render(<SideNav activeKey="program" />)
+    render(<SideNav items={items} activeKey="program" />)
     expect(screen.getAllByTestId('nav-item-accent')).toHaveLength(1)
     expect(
       within(screen.getByRole('tab', { name: 'Plan' })).getByTestId('nav-item-accent')
@@ -25,13 +33,13 @@ describe('SideNav', () => {
 
   it('reports the tapped key via onNavigate', () => {
     const onNavigate = vi.fn()
-    render(<SideNav activeKey="live" onNavigate={onNavigate} />)
+    render(<SideNav items={items} activeKey="live" onNavigate={onNavigate} />)
     fireEvent.click(screen.getByRole('tab', { name: 'Body' }))
     expect(onNavigate).toHaveBeenCalledWith('body')
   })
 
   it('keeps the active item as active even when it is also the liveKey (no double-state)', () => {
-    render(<SideNav activeKey="live" liveKey="live" />)
+    render(<SideNav items={items} activeKey="live" liveKey="live" />)
     // active wins: exactly one accent bar, on Live (the live cue never applies to the active view)
     expect(screen.getAllByTestId('nav-item-accent')).toHaveLength(1)
     expect(
@@ -39,13 +47,13 @@ describe('SideNav', () => {
     ).toBeInTheDocument()
   })
 
-  it('accepts custom items', () => {
+  it('accepts an app-specific item set', () => {
     render(<SideNav activeKey="a" items={[{ key: 'a', label: 'Alpha', icon: null }]} />)
     expect(screen.getByRole('tab', { name: 'Alpha' })).toBeInTheDocument()
   })
 
   it('has no accessibility violations', async () => {
-    const { container } = render(<SideNav activeKey="live" />)
+    const { container } = render(<SideNav items={items} activeKey="live" />)
     expect(await axe(container)).toHaveNoViolations()
   })
 })

package/src/components/shell/SideNav.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react'
 import { View } from 'react-native'
 import { cn } from '../../utils/cn'
-import { ActivityIcon, HistoryIcon, LayersIcon, PersonStandingIcon } from '../icons'
 import { NavItem } from './NavItem'
 
 export interface SideNavItem {
@@ -14,8 +13,8 @@ export interface SideNavItem {
 }
 
 export interface SideNavProps {
-  /** Category items, top → bottom. Defaults to the four dashboard categories. */
-  items?: SideNavItem[]
+  /** Category items, top → bottom. The app owns its own categories. */
+  items: SideNavItem[]
   /** Key of the active category. */
   activeKey: string
   /** Called with the tapped item's key. */
@@ -25,30 +24,29 @@ export interface SideNavProps {
    * running off its view) → a quiet green cue on that item's label.
    */
   liveKey?: string | null
+  /** Semantic `text-*` token for the active item. Defaults to the Voltras brand. */
+  accentClassName?: string
+  /** Semantic `bg-*` token for the active bar. Pair it with `accentClassName`. */
+  accentBarClassName?: string
   className?: string
 }
 
-/** The four dashboard categories with their locked S2 glyphs (activity · history · layers · figure). */
-export const defaultNavItems: SideNavItem[] = [
-  { key: 'live', label: 'Live', icon: <ActivityIcon size={20} color="currentColor" /> },
-  { key: 'review', label: 'Review', icon: <HistoryIcon size={20} color="currentColor" /> },
-  { key: 'program', label: 'Plan', icon: <LayersIcon size={20} color="currentColor" /> },
-  { key: 'body', label: 'Body', icon: <PersonStandingIcon size={20} color="currentColor" /> },
-]
-
 /**
  * Shell S2 · SideNav — the persistent 60px left rail that switches the main
- * viewport between categories (Live · Review · Program · Body). Presentational:
- * it renders `items` and reports taps via `onNavigate`; the app owns routing and
- * which key is `live`. Active item shows a left accent bar; `liveKey` (when not
- * the active view) tints that item's label a muted green. Fixed 60px at every
- * width — labels sit under the glyph, so they never change the rail width.
+ * viewport between an app's categories. Presentational: it renders `items` and
+ * reports taps via `onNavigate`; the app owns its categories, routing, and which
+ * key is `live`. Active item shows a left accent bar in the app's brand accent;
+ * `liveKey` (when not the active view) tints that item's label a muted green.
+ * Fixed 60px at every width — labels sit under the glyph, so they never change
+ * the rail width.
  */
 export function SideNav({
-  items = defaultNavItems,
+  items,
   activeKey,
   onNavigate,
   liveKey = null,
+  accentClassName,
+  accentBarClassName,
   className,
 }: SideNavProps) {
   return (
@@ -66,6 +64,8 @@ export function SideNav({
           label={item.label}
           active={item.key === activeKey}
           live={item.key === liveKey && item.key !== activeKey}
+          accentClassName={accentClassName}
+          accentBarClassName={accentBarClassName}
           onPress={() => onNavigate?.(item.key)}
         />
       ))}

package/src/components/shell/TopBar.stories.tsx

@@ -1,44 +1,41 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Pill } from '../ui/pill'
 import { TopBar } from './TopBar'
-import { type Device } from './DeviceRow'
-
-const DEVICES: Device[] = [
-  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
-  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
-  { id: 'Voltra-77E0', nickname: 'Spare', slot: null, state: 'available' },
-]
+import { brandKeys } from './brands'
 
 const meta: Meta<typeof TopBar> = {
   title: 'Shell/TopBar',
   component: TopBar,
-  tags: ['autodocs'],
-  args: { state: 'live', devices: DEVICES },
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: { brand: 'voltras' },
   argTypes: {
-    state: { control: 'select', options: ['live', 'rest', 'idle'] },
-    devices: { control: 'object' },
+    brand: { control: 'select', options: brandKeys },
     subtitle: { control: 'text' },
     showSubtitle: { control: 'boolean' },
     showClock: { control: 'boolean' },
     time: { control: false },
-    onSelectDevice: { control: false },
+    leading: { control: false },
+    trailing: { control: false },
   },
   parameters: {
     layout: 'fullscreen',
     docs: {
       description: {
         component:
-          '**Organism** — the persistent shell chrome band, and the root of the top-bar family ' +
+          '**Organism** — the persistent shell chrome band, generic over the app ' +
           '(see `shell/README.md` for the full dependency map). Composes ' +
           '[BrandLockup](?path=/docs/shell-brandlockup--docs) + ' +
-          '[SessionStatePill](?path=/docs/shell-sessionstatepill--docs) + ' +
           '[Divider](?path=/docs/components-atoms-divider--docs) (`bg-border-prominent`) + ' +
-          '[DeviceMenu](?path=/docs/shell-devicemenu--docs) + ' +
           '[DateTime](?path=/docs/components-molecules-datetime--docs) (`variant="mono"` live clock). ' +
           'Background = the shared `surfaceGradient.chrome` primitive.\n\n' +
-          '**Try it:** use the **Controls** to change `state`, edit `devices` (set one to `lost` to see the ' +
-          'fault), or toggle `showSubtitle` / `showClock`. **Resize the canvas** to watch the ' +
-          'container-responsive collapse (SIZE-D01) — subtitle drops < 1024px, clock < 720px. ' +
-          'Click the device glyph to open the menu.',
+          '**Composition (AW-132).** The bar owns the band, the brand region, the divider ' +
+          'rhythm and the edge-pinned clock. An app supplies its own chrome through ' +
+          '`trailing` — pass an array and the bar puts its dividers between the items. ' +
+          "`leading` replaces the brand region outright. The workout app's cluster lives in " +
+          '[WorkoutTopBar](?path=/docs/shell-workout-workouttopbar--docs).\n\n' +
+          '**Try it:** switch `brand` in the **Controls**, or toggle `showSubtitle` / ' +
+          '`showClock`. **Resize the canvas** to watch the container-responsive collapse ' +
+          '(SIZE-D01) — subtitle drops < 1024px, clock < 720px.',
       },
     },
   },
@@ -46,4 +43,32 @@ const meta: Meta<typeof TopBar> = {
 export default meta
 type Story = StoryObj<typeof TopBar>
 
+/** Brand + clock only. No app has supplied any chrome. */
 export const Default: Story = {}
+
+/** Two app-supplied items in `trailing` — the bar adds the dividers and the clock. */
+export const WithAppChrome: Story = {
+  args: {
+    brand: 'brain',
+    trailing: [
+      <Pill key="index" tone="success" leading="dot" size="xs">
+        indexed
+      </Pill>,
+      <Pill key="scope" tone="neutral" size="xs">
+        4 vaults
+      </Pill>,
+    ],
+  },
+}
+
+/** One item, no array — a single node is a valid `trailing` too. */
+export const SingleTrailingItem: Story = {
+  args: {
+    brand: 'audiobook',
+    trailing: (
+      <Pill tone="brand-secondary" size="xs">
+        3 downloading
+      </Pill>
+    ),
+  },
+}

package/src/components/shell/TopBar.test.tsx

@@ -1,36 +1,58 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
+import { Text } from 'react-native'
 import { axe } from 'jest-axe'
 import { TopBar } from './TopBar'
-import { type Device } from './DeviceRow'
-
-const devices: Device[] = [
-  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
-  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
-]
 
 const AT_1612 = new Date(2024, 0, 1, 16, 12) // local 16:12
 
 describe('TopBar', () => {
-  it('renders brand, state and a 24h clock', () => {
-    render(<TopBar state="live" devices={devices} time={AT_1612} showClock />)
+  it('renders the brand and a 24h clock', () => {
+    render(<TopBar time={AT_1612} showClock />)
     expect(screen.getByText('VOLTRAS')).toBeInTheDocument()
-    expect(screen.getByText('LIVE')).toBeInTheDocument()
     expect(screen.getByText('16:12')).toBeInTheDocument()
   })
 
+  it('renders another app brand without knowing anything about it', () => {
+    render(<TopBar brand="brain" showClock={false} />)
+    expect(screen.getByText('BRAIN')).toBeInTheDocument()
+    expect(screen.getByText('/ knowledge')).toBeInTheDocument()
+  })
+
+  it('mounts app chrome from the trailing slot', () => {
+    render(
+      <TopBar
+        showClock={false}
+        trailing={[<Text key="a">alpha</Text>, <Text key="b">beta</Text>]}
+      />
+    )
+    expect(screen.getByText('alpha')).toBeInTheDocument()
+    expect(screen.getByText('beta')).toBeInTheDocument()
+  })
+
+  it('accepts a single trailing node as well as an array', () => {
+    render(<TopBar showClock={false} trailing={<Text>solo</Text>} />)
+    expect(screen.getByText('solo')).toBeInTheDocument()
+  })
+
+  it('replaces the brand region when a leading node is given', () => {
+    render(<TopBar leading={<Text>my own lockup</Text>} showClock={false} />)
+    expect(screen.getByText('my own lockup')).toBeInTheDocument()
+    expect(screen.queryByText('VOLTRAS')).not.toBeInTheDocument()
+  })
+
   it('hides the clock when showClock is false', () => {
-    render(<TopBar state="live" devices={devices} time={AT_1612} showClock={false} />)
+    render(<TopBar time={AT_1612} showClock={false} />)
     expect(screen.queryByText('16:12')).not.toBeInTheDocument()
   })
 
   it('hides the subtitle when showSubtitle is false', () => {
-    render(<TopBar state="rest" devices={devices} showSubtitle={false} />)
+    render(<TopBar showSubtitle={false} />)
     expect(screen.queryByText('/ wall dashboard')).not.toBeInTheDocument()
   })
 
   it('has no accessibility violations', async () => {
-    const { container } = render(<TopBar state="live" devices={devices} time={AT_1612} showClock />)
+    const { container } = render(<TopBar time={AT_1612} showClock trailing={<Text>chrome</Text>} />)
     expect(await axe(container)).toHaveNoViolations()
   })
 })