@titan-design/react-ui 0.5.0 → 0.6.0

package/src/components/shell/DeviceRow.tsx

@@ -0,0 +1,58 @@
+import { View, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../utils/cn'
+import { Indicator, type IndicatorColor } from '../ui/indicator'
+import { Typography } from '../custom/Typography'
+
+export type DeviceRowState = 'connected' | 'available' | 'degraded' | 'lost'
+
+export interface Device {
+  /** Stable device id (e.g. "Voltra-A3F2"). */
+  id: string
+  /** User-assigned slot/device name (e.g. "Left Cable"). */
+  nickname: string
+  /** Bound slot, or null when unbound/available (used for the menu's bound/available tally). */
+  slot?: 'L' | 'R' | null
+  /** Connection/availability state → the status dot color. */
+  state: DeviceRowState
+}
+
+export interface DeviceRowProps extends ViewProps {
+  device: Device
+  onPress?: () => void
+  className?: string
+}
+
+const stateColor: Record<DeviceRowState, IndicatorColor> = {
+  connected: 'success',
+  available: 'info',
+  degraded: 'warning',
+  lost: 'error-vivid',
+}
+
+/**
+ * One device in the DeviceMenu: status dot · name · Bluetooth id. The dot color
+ * carries the connection state (no redundant status text); the name is the one
+ * slot label (no duplicate slot badge). S1 · DeviceRow.
+ */
+export function DeviceRow({ device, onPress, className, ...props }: DeviceRowProps) {
+  const Wrapper = onPress ? Pressable : View
+  return (
+    <Wrapper
+      {...(onPress ? { onPress, accessibilityRole: 'button' } : {})}
+      className={cn('flex-row items-center gap-[10px] px-2 py-[9px] rounded-[7px]', className)}
+      {...props}
+    >
+      <Indicator size="md" color={stateColor[device.state]} />
+      <Typography
+        variant="body2"
+        color={device.slot ? 'primary' : 'secondary'}
+        className="flex-1 font-bold text-[12px]"
+      >
+        {device.nickname}
+      </Typography>
+      <Typography variant="mono" color="tertiary" className="text-[10px]">
+        {device.id}
+      </Typography>
+    </Wrapper>
+  )
+}

package/src/components/shell/README.md

@@ -0,0 +1,86 @@
+# 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.
+
+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.
+
+## Specimen: `TopBar` (the first shell unit, S1)
+
+```
+TopBar ....................... organism — the chrome band (Shell/TopBar)
+├─ BrandLockup ............... molecule
+│  ├─ VoltrasMark ............ icons (shared primitive)
+│  └─ 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
+└─ surfaceGradient.chrome .... theme · gradient primitive
+```
+
+## Dependency map
+
+| Component | Tier | Composes ↓ | Used-by ↑ |
+|---|---|---|---|
+| `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 |
+| `DeviceIndicator` | molecule | BluetoothIcon | DeviceMenu |
+| `DeviceRow` | molecule | Indicator, Typography | DeviceMenu |
+| `VoltrasMark` / `BluetoothIcon` | **`components/icons`** primitive | `SvgIcon` base | BrandLockup / DeviceIndicator (+ any consumer) |
+
+## Shared substrates introduced here (reusable beyond the shell)
+
+Building S1 grew the design system — these are now available to every component:
+
+- **`components/icons`** — a shared icon primitive: an `SvgIcon` base (24×24, a11y contract, `currentColor`)
+  + `IconProps`. VoltrasMark / BluetoothIcon live here, and the previously-orphaned Workout icons
+  (Dumbbell / Star) were folded in (re-exported from `Workout/icons` for back-compat).
+- **`theme/gradients.ts`** — `linearGradient(from, to, angle)` + named `surfaceGradient.*`, built on
+  `resolveColor` (themeable web CSS vars + native hex fallback).
+- **`Indicator`** (titan atom) — `pulse: 'ping'` (expanding ring) + `success` / `error-vivid` colors.
+- **`DateTime`** (titan) — `hour12`, `seconds`, self-ticking `live`, and Typography routing via `variant`.
+- **`Typography`** — `mono` (technical readouts) + `monoLabel` (all-caps mono) variants.
+- **Tokens** — a full **vivid** green/red palette + **`border-prominent`** divider token.
+
+## Reuse audit (the "are we failing to use existing components?" check)
+
+Every leaf now composes a primitive rather than hand-rolling it:
+
+| Concern | Uses | Not |
+|---|---|---|
+| status dots | `Indicator` | raw CSS/`View` dots |
+| dividers | `Divider` (`border-prominent`) | hairline `View`s |
+| mono / all-caps text | `Typography` `mono`/`monoLabel` | ad-hoc `font-mono` classes |
+| glyphs | icon atoms (`VoltrasMark`, `BluetoothIcon`) | unicode chars / inline `<svg>` |
+| chrome gradient | `surfaceGradient.chrome` | inline `linear-gradient` strings |
+| colors | semantic tokens (vivid palette) | magic hex |
+
+## Testing
+
+- **Unit** — every component + primitive has a `*.test.tsx` (render, behavior, a11y); shell branch coverage ≈96%.
+- **Visual** — `tests/visual/stories.spec.ts` screenshots the `Shell/*` + `Icons` stories via Playwright
+  (`toHaveScreenshot`), clock-frozen + animations-disabled so the live-clock/animated stories are
+  deterministic. Widen `SCOPE` to cover more of the library. **Baselines must be generated in the pinned
+  container** (`mcr.microsoft.com/playwright:v1.58.2-noble`) — the `visual.yml` "Layer 2" step seeds them as
+  an artifact; commit the `*-chromium-linux.png` and flip the step to the `test:visual:stories` gate.
+- **Lint guardrails** — components may not inline `linear-gradient` (use `surfaceGradient`); shell + icons may
+  not use raw hex (use tokens).
+
+**Watch-list (known gaps to close as we go):**
+- **Dot primitive overlap** — titan has both `StatusDot` (Workout, semantic) and `Indicator` (ui, generic).
+  The shell standardizes on `Indicator`; a future pass could consolidate.
+- **Other hand-rolled gradients** — `MesoCard`, `DeviationBar`, `MesoStatusCard`, `BodyMapDetailPanel` still
+  inline `linear-gradient` strings; they should adopt `surfaceGradient` / `linearGradient`.

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { SessionStatePill } from './SessionStatePill'
+
+const meta: Meta<typeof SessionStatePill> = {
+  title: 'Shell/TopBar/SessionStatePill',
+  component: SessionStatePill,
+  tags: ['autodocs'],
+  args: { state: 'live' },
+  argTypes: {
+    state: { control: 'select', options: ['live', 'rest', 'idle'] },
+    label: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule** (= the ledger’s reusable StatusPill — also used by the Live-view header). Composes ' +
+          '[Indicator](?path=/docs/components-indicator--docs) (pulse `ping` + vivid color for live) + ' +
+          '[Typography](?path=/docs/custom-typography--docs) (`monoLabel`). Use the `state` control to switch.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof SessionStatePill>
+
+export const Default: Story = {}

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SessionStatePill } from './SessionStatePill'
+
+describe('SessionStatePill', () => {
+  it('labels each state', () => {
+    const { rerender } = render(<SessionStatePill state="live" />)
+    expect(screen.getByText('LIVE')).toBeInTheDocument()
+    rerender(<SessionStatePill state="rest" />)
+    expect(screen.getByText('REST')).toBeInTheDocument()
+    rerender(<SessionStatePill state="idle" />)
+    expect(screen.getByText('IDLE')).toBeInTheDocument()
+  })
+
+  it('supports a custom label', () => {
+    render(<SessionStatePill state="live" label="SET LIVE" />)
+    expect(screen.getByText('SET LIVE')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<SessionStatePill state="live" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/shell/SessionStatePill.tsx

@@ -0,0 +1,46 @@
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../utils/cn'
+import { Indicator, type IndicatorColor, type IndicatorPulse } from '../ui/indicator'
+import { Typography, type TypographyColor } from '../custom/Typography'
+
+export type SessionState = 'live' | 'rest' | 'idle'
+
+export interface SessionStatePillProps extends ViewProps {
+  /** Session state → dot color + pulse + label. */
+  state: SessionState
+  /** Override the default label (LIVE / REST / IDLE). */
+  label?: string
+  className?: string
+}
+
+const stateConfig: Record<
+  SessionState,
+  {
+    label: string
+    color: IndicatorColor
+    pulse: boolean | IndicatorPulse
+    textColor: TypographyColor
+  }
+> = {
+  // live = vivid green with an expanding ring; rest = solid amber (no pulse — operator); idle is dim.
+  live: { label: 'LIVE', color: 'success', pulse: 'ping', textColor: 'primary' },
+  rest: { label: 'REST', color: 'warning', pulse: false, textColor: 'primary' },
+  idle: { label: 'IDLE', color: 'default', pulse: false, textColor: 'secondary' },
+}
+
+/**
+ * The global session-state readout (dot + label). Shared: the top bar's status
+ * and the Live-view header both use it (this is the ledger's "StatusPill",
+ * Family C — built once). S1 · SessionStatePill.
+ */
+export function SessionStatePill({ state, label, className, ...props }: SessionStatePillProps) {
+  const cfg = stateConfig[state]
+  return (
+    <View className={cn('flex-row items-center gap-2', className)} {...props}>
+      <Indicator size="md" color={cfg.color} pulse={cfg.pulse} />
+      <Typography variant="monoLabel" color={cfg.textColor} className="text-[11px]">
+        {label ?? cfg.label}
+      </Typography>
+    </View>
+  )
+}

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+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' },
+]
+
+const meta: Meta<typeof TopBar> = {
+  title: 'Shell/TopBar',
+  component: TopBar,
+  tags: ['autodocs'],
+  args: { state: 'live', devices: DEVICES },
+  argTypes: {
+    state: { control: 'select', options: ['live', 'rest', 'idle'] },
+    devices: { control: 'object' },
+    subtitle: { control: 'text' },
+    showSubtitle: { control: 'boolean' },
+    showClock: { control: 'boolean' },
+    time: { control: false },
+    onSelectDevice: { control: false },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Organism** — the persistent shell chrome band, and the root of the top-bar family ' +
+          '(see `shell/README.md` for the full dependency map). Composes ' +
+          '[BrandLockup](?path=/docs/shell-topbar-brandlockup--docs) + ' +
+          '[SessionStatePill](?path=/docs/shell-topbar-sessionstatepill--docs) + ' +
+          '[Divider](?path=/docs/components-divider--docs) (`bg-border-prominent`) + ' +
+          '[DeviceMenu](?path=/docs/shell-topbar-devicemenu--docs) + ' +
+          '[DateTime](?path=/docs/custom-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.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof TopBar>
+
+export const Default: Story = {}

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

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+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 />)
+    expect(screen.getByText('VOLTRAS')).toBeInTheDocument()
+    expect(screen.getByText('LIVE')).toBeInTheDocument()
+    expect(screen.getByText('16:12')).toBeInTheDocument()
+  })
+
+  it('hides the clock when showClock is false', () => {
+    render(<TopBar state="live" devices={devices} 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} />)
+    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 />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/shell/TopBar.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { View, type LayoutChangeEvent } from 'react-native'
+import { cn } from '../../utils/cn'
+import { surfaceGradient } from '../../theme/gradients'
+import { Divider } from '../ui/divider'
+import { DateTime } from '../custom/DateTime'
+import { BrandLockup } from './BrandLockup'
+import { SessionStatePill, type SessionState } from './SessionStatePill'
+import { DeviceMenu } from './DeviceMenu'
+import { type Device } from './DeviceRow'
+
+export interface TopBarProps {
+  /** Global session state → the status pill. */
+  state: SessionState
+  /** Devices for the connection glyph + dropdown. */
+  devices: Device[]
+  /** The moment to display in the clock (Date/timestamp). Omit for a live ticking clock. */
+  time?: number | Date
+  /** Brand subtitle. Default "wall dashboard". */
+  subtitle?: string
+  /** Force the subtitle on/off; defaults to container-responsive (hidden below ~1024px). */
+  showSubtitle?: boolean
+  /** Force the clock on/off; defaults to container-responsive (hidden below ~720px). */
+  showClock?: boolean
+  onSelectDevice?: (device: Device) => void
+  className?: string
+}
+
+// SIZE-D01: responsiveness is container-driven (measured width), not a fixed size prop.
+const SUBTITLE_MIN = 1024
+const CLOCK_MIN = 720
+
+/**
+ * S1 · TopBar — the persistent shell chrome band. Brand (left) + a right cluster
+ * of session state · device glyph · clock (clock edge-pinned so spacing stays
+ * stable as the state text changes). Collapses subtitle then clock as its
+ * container narrows.
+ */
+export function TopBar({
+  state,
+  devices,
+  time,
+  subtitle = 'wall dashboard',
+  showSubtitle,
+  showClock,
+  onSelectDevice,
+  className,
+}: TopBarProps) {
+  const [width, setWidth] = useState(SUBTITLE_MIN)
+  const onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width)
+
+  const subtitleVisible = showSubtitle ?? width >= SUBTITLE_MIN
+  const clockVisible = showClock ?? width >= CLOCK_MIN
+
+  return (
+    <View
+      onLayout={onLayout}
+      // shared chrome gradient (web); solid bg-surface-elevated is the native fallback
+      style={surfaceGradient.chrome() as object}
+      className={cn(
+        'h-[46px] flex-row items-center gap-[14px] px-4 bg-surface-elevated border-b border-border',
+        className
+      )}
+    >
+      <BrandLockup subtitle={subtitle} showSubtitle={subtitleVisible} />
+
+      {/* right cluster — order: state · device · time (time pinned to the edge) */}
+      <View className="ml-auto flex-row items-center gap-[12px]">
+        <SessionStatePill state={state} />
+        <Divider orientation="vertical" className="h-4 bg-border-prominent" />
+        <DeviceMenu devices={devices} onSelectDevice={onSelectDevice} />
+        {clockVisible ? (
+          <>
+            <Divider orientation="vertical" className="h-4 bg-border-prominent" />
+            <DateTime
+              value={time}
+              live={time == null}
+              format="time"
+              hour12={false}
+              variant="mono"
+              color="secondary"
+              className="text-[11px] min-w-[38px] text-right"
+            />
+          </>
+        ) : null}
+      </View>
+    </View>
+  )
+}

package/src/components/shell/index.ts

@@ -0,0 +1,8 @@
+// Shell chrome — persistent dashboard frame (nav / top bar / rail / drawers / strip).
+// S1 · Top bar family. (Icons live in the shared `components/icons` primitive.)
+export * from './BrandLockup'
+export * from './SessionStatePill'
+export * from './DeviceIndicator'
+export * from './DeviceRow'
+export * from './DeviceMenu'
+export * from './TopBar'

package/src/components/ui/indicator/Indicator.stories.tsx

@@ -8,7 +8,10 @@ const meta: Meta<typeof Indicator> = {
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
-    color: { control: 'select', options: ['default', 'primary', 'success', 'error', 'warning', 'info'] },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'success', 'error', 'warning', 'info'],
+    },
     glow: { control: 'boolean' },
     ring: { control: 'boolean' },
   },
@@ -72,3 +75,36 @@ export const CustomColor: Story = {
     </View>
   ),
 }
+
+export const Pulse: Story = {
+  render: () => (
+    <View className="flex-row gap-6 items-center">
+      <Indicator size="md" color="success" pulse />
+      <Indicator size="md" color="success" pulse="ping" />
+      <Indicator size="md" color="warning" />
+      <Indicator size="md" color="default" />
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Opacity pulse (default), expanding-ring pulse (`pulse="ping"`, green for live), solid, dim.',
+      },
+    },
+  },
+}
+
+export const Vivid: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" color="success" />
+      <Indicator size="md" color="success" />
+      <Indicator size="md" color="error" />
+      <Indicator size="md" color="error-vivid" />
+    </View>
+  ),
+  parameters: {
+    docs: { description: { story: 'Standard status vs the vivid palette (success/error).' } },
+  },
+}

package/src/components/ui/indicator/Indicator.test.tsx

@@ -18,7 +18,15 @@ describe('Indicator', () => {
   })
 
   it('renders with all color options', () => {
-    const colors = ['default', 'primary', 'success', 'error', 'warning', 'info'] as const
+    const colors = [
+      'default',
+      'primary',
+      'success',
+      'error',
+      'warning',
+      'info',
+      'error-vivid',
+    ] as const
     colors.forEach((color) => {
       const { unmount } = render(<Indicator color={color} />)
       unmount()
@@ -45,6 +53,16 @@ describe('Indicator', () => {
     expect(container.firstChild).toBeInTheDocument()
   })
 
+  it('supports pulse prop (opacity)', () => {
+    const { container } = render(<Indicator pulse color="success" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('supports the ping pulse variant', () => {
+    const { container } = render(<Indicator pulse="ping" color="success" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(<Indicator color="success" />)

package/src/components/ui/indicator/Indicator.tsx

@@ -1,9 +1,18 @@
-import React from 'react'
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 
 export type IndicatorSize = 'xs' | 'sm' | 'md' | 'lg'
-export type IndicatorColor = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'
+export type IndicatorColor =
+  | 'default'
+  | 'primary'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'error-vivid'
+
+/** How a pulsing indicator animates: a subtle opacity fade, or an expanding ring. */
+export type IndicatorPulse = 'opacity' | 'ping'
 
 export interface IndicatorProps extends ViewProps {
   /** Dot size */
@@ -16,6 +25,8 @@ export interface IndicatorProps extends ViewProps {
   glow?: boolean
   /** Add a ring border */
   ring?: boolean
+  /** Animate for live/active status. `true` = opacity fade; `'ping'` = expanding ring. */
+  pulse?: boolean | IndicatorPulse
   /** Additional className */
   className?: string
 }
@@ -34,6 +45,7 @@ const colorStyles: Record<IndicatorColor, string> = {
   error: 'bg-status-error',
   warning: 'bg-status-warning',
   info: 'bg-status-info',
+  'error-vivid': 'bg-status-error-vivid',
 }
 
 export function Indicator({
@@ -42,14 +54,39 @@ export function Indicator({
   customColor,
   glow = false,
   ring = false,
+  pulse = false,
   className,
   style,
   ...props
 }: IndicatorProps) {
+  const pulseMode: IndicatorPulse | false = pulse === true ? 'opacity' : pulse || false
+  const colorClass = !customColor ? colorStyles[color] : undefined
+  const colorStyle = customColor ? { backgroundColor: customColor } : undefined
+
+  // Expanding-ring pulse: a ping layer behind the solid dot (for live/active status).
+  if (pulseMode === 'ping') {
+    return (
+      <View className={cn('relative', sizeStyles[size], className)} style={style} {...props}>
+        <View
+          className={cn('absolute inset-0 rounded-full animate-ping', colorClass)}
+          style={colorStyle}
+        />
+        <View
+          className={cn(
+            'relative rounded-full',
+            sizeStyles[size],
+            colorClass,
+            ring && 'border-2 border-background-base'
+          )}
+          style={colorStyle}
+        />
+      </View>
+    )
+  }
+
   const dynamicStyle = {
     ...(typeof style === 'object' ? style : {}),
-    ...(customColor ? { backgroundColor: customColor } : {}),
-    ...(glow && !customColor ? {} : {}),
+    ...(colorStyle ?? {}),
     ...(glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}),
   }
 
@@ -58,12 +95,14 @@ export function Indicator({
       className={cn(
         'rounded-full shrink-0',
         sizeStyles[size],
-        !customColor && colorStyles[color],
+        colorClass,
+        pulseMode === 'opacity' && 'animate-pulse',
         ring && 'border-2 border-background-base',
-        glow && !customColor && color === 'success' && 'shadow-[0_0_6px_rgba(20,184,166,0.6)]',
+        glow && !customColor && color === 'success' && 'shadow-[0_0_6px_rgba(46,213,115,0.6)]',
         glow && !customColor && color === 'error' && 'shadow-[0_0_6px_rgba(239,68,68,0.6)]',
         glow && !customColor && color === 'warning' && 'shadow-[0_0_6px_rgba(245,158,11,0.6)]',
         glow && !customColor && color === 'primary' && 'shadow-[0_0_6px_rgba(255,121,0,0.6)]',
+        glow && !customColor && color === 'error-vivid' && 'shadow-[0_0_6px_rgba(255,71,87,0.6)]',
         className
       )}
       style={Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style}

package/src/components/ui/indicator/index.ts

@@ -1,2 +1,2 @@
 export { Indicator } from './Indicator'
-export type { IndicatorProps, IndicatorSize, IndicatorColor } from './Indicator'
+export type { IndicatorProps, IndicatorSize, IndicatorColor, IndicatorPulse } from './Indicator'

package/src/components/ui/spinner/Spinner.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { ActivityIndicator, View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { SPINNER_PRIMARY, SPINNER_SECONDARY } from '../../../theme/extracted-colors-ui'
 
 export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
 export type SpinnerColor = 'primary' | 'secondary' | 'white' | 'default'
@@ -24,8 +25,8 @@ const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
 }
 
 const colorMap: Record<SpinnerColor, string> = {
-  primary: '#5048E5',
-  secondary: '#10B981',
+  primary: SPINNER_PRIMARY,
+  secondary: SPINNER_SECONDARY,
   white: '#FFFFFF',
   default: '#6B7280',
 }

package/src/components/ui/toolbar-button/ToolbarButton.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback, createContext, useContext } from 'react'
 import { View, Text, Pressable, type ViewProps, StyleSheet, Platform } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { neumorphicShadows, getHoverColors } from '../../../theme'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type ToolbarButtonVariant = 'default' | 'neumorphic'
 export type ToolbarButtonSize = 'sm' | 'md' | 'lg'
@@ -129,7 +130,7 @@ export function ToolbarButton({
 
   // Determine icon color based on state
   const getIconColor = () => {
-    if (isActive === true) return '#FF7900' // brand-primary
+    if (isActive === true) return resolveColor('brand-primary')
     return showActive ? '#FFFFFF' : '#D1D1D1'
   }