@titan-design/react-ui 0.8.0 → 0.9.0

package/src/lab/north-star/fixtures.ts

@@ -0,0 +1,224 @@
+/**
+ * Fixtures for the `Lab/North Star/Live Wall Dashboard` specimen.
+ *
+ * Shapes deliberately MIRROR the voltras-mcp dashboard store read-models so a later
+ * provisional wiring is a mechanical field map, not a reshape:
+ *   - {@link LiveModel}    — the live-set telemetry read-model (`velocity`, `force`,
+ *     `phase`, `lastRep`, `velocityLossPct`).
+ *   - {@link SessionModel} — the session read-model (`exerciseName` + completed sets).
+ *   - {@link CompletedSet} — a logged set (`weightLbs`, `mode`, `repCount`, `reps`).
+ *
+ * The presentational titan props each view consumes are DERIVED from these read-models
+ * (see the `derive*` helpers) — the same projection the store→component adapter will do.
+ * Numbers are realistic cable chest-press strength-training values.
+ */
+import type { SessionRailExercise } from '../../components'
+
+// --- Store read-model shapes (mirror voltras-mcp dashboard store) -------------
+
+/** One completed rep's per-rep telemetry (mean-concentric metric family). */
+export interface RepModel {
+  /** Mean CONCENTRIC velocity (m/s) — the canonical metric (brain WA-D02). */
+  vCon: number
+  /** Range of motion (m). */
+  rom: number
+  /** Peak instantaneous velocity (m/s). */
+  peakVelocity: number
+}
+
+/** The live-set telemetry read-model. */
+export interface LiveModel {
+  /** Instantaneous cable velocity (m/s). */
+  velocity: number
+  /** Instantaneous cable force (N). */
+  force: number
+  /** Current movement phase. */
+  phase: 'concentric' | 'hold' | 'eccentric' | 'idle'
+  /** Elapsed time (ms) within the current phase — drives the live tempo fill. */
+  phaseElapsedMs: number
+  /** The most-recently completed rep. */
+  lastRep: RepModel
+  /** Per-rep mean-concentric velocities logged so far this set (m/s). */
+  repVelocities: number[]
+  /** Velocity loss vs the set's best rep (%). Drives verdict + aura + fatigue. */
+  velocityLossPct: number
+  /** Peak concentric force this set (N). */
+  peakForce: number
+}
+
+/** A logged set on the session read-model. */
+export interface CompletedSet {
+  weightLbs: number
+  /** Resistance mode (cascade echo, cmd=0x10). */
+  mode: 'weight' | 'chains' | 'eccentric' | 'isokinetic'
+  repCount: number
+  /** Per-rep mean-concentric velocities (m/s). */
+  reps: number[]
+}
+
+/** The session read-model. */
+export interface SessionModel {
+  exerciseName: string
+  title: string
+  weightLbs: number
+  unit: 'lbs' | 'kg'
+  /**
+   * Prescribed tempo tuple [ecc, pauseBottom, con, pauseTop]. OPTIONAL — a set may carry no
+   * prescribed tempo (coach left it unset and no exercise default); the live view then hides
+   * the tempo readout entirely rather than inventing one.
+   */
+  tempo?: [number, number, number, number]
+  completedSets: CompletedSet[]
+  plannedSets: number
+}
+
+/** The full store snapshot the specimen reads. */
+export interface DashboardModel {
+  live: LiveModel
+  session: SessionModel
+}
+
+// --- The fixture instance -----------------------------------------------------
+
+/**
+ * A mid-set cable chest press: 6 reps in, velocity decaying from 0.52 → 0.405 m/s,
+ * ~22% velocity loss (the VL20–VL30 mid-zone → `threshold` verdict / amber aura).
+ */
+export const dashboardFixture: DashboardModel = {
+  live: {
+    velocity: 0.41,
+    force: 498,
+    phase: 'concentric',
+    phaseElapsedMs: 700,
+    lastRep: { vCon: 0.405, rom: 0.58, peakVelocity: 0.61 },
+    repVelocities: [0.52, 0.5, 0.48, 0.46, 0.44, 0.405],
+    velocityLossPct: 22,
+    peakForce: 542,
+  },
+  session: {
+    exerciseName: 'Cable Chest Press',
+    title: 'Push A · Hypertrophy',
+    weightLbs: 140,
+    unit: 'lbs',
+    tempo: [3, 1, 1, 0],
+    plannedSets: 4,
+    completedSets: [
+      {
+        weightLbs: 140,
+        mode: 'weight',
+        repCount: 8,
+        reps: [0.55, 0.54, 0.52, 0.51, 0.49, 0.47, 0.45, 0.43],
+      },
+      {
+        weightLbs: 140,
+        mode: 'weight',
+        repCount: 8,
+        reps: [0.53, 0.52, 0.5, 0.48, 0.46, 0.44, 0.42, 0.4],
+      },
+    ],
+  },
+}
+
+// --- Derived projections (store read-model → titan presentational props) -------
+
+/** Arithmetic mean of a per-rep velocity array (m/s). */
+export function meanVelocity(reps: number[]): number {
+  if (reps.length === 0) return 0
+  return reps.reduce((a, v) => a + v, 0) / reps.length
+}
+
+/** Verdict status from velocity loss %, matching FatigueMeter's VL20/VL30 bands. */
+export function verdictFromLoss(lossPct: number): 'productive' | 'threshold' | 'stop' {
+  if (lossPct >= 30) return 'stop'
+  if (lossPct >= 20) return 'threshold'
+  return 'productive'
+}
+
+/**
+ * The session rail's exercise list, projected from the model: the current exercise
+ * (active), the completed sets behind it, and an upcoming accessory.
+ */
+export function deriveRailExercises(model: DashboardModel): SessionRailExercise[] {
+  const { session, live } = model
+  return [
+    {
+      id: 'chest-press',
+      name: session.exerciseName,
+      summary: {
+        sets: session.plannedSets,
+        reps: 8,
+        weight: session.weightLbs,
+        unit: session.unit,
+      },
+      tempo: session.tempo,
+      indicator: 'velocity-loss',
+      setStates: [
+        { status: 'done', velocities: session.completedSets[0].reps },
+        { status: 'done', velocities: session.completedSets[1].reps },
+        { status: 'active', velocities: live.repVelocities, planned: 8 },
+        { status: 'todo', planned: 8 },
+      ],
+    },
+    {
+      id: 'incline-db',
+      name: 'Incline DB Press',
+      summary: { sets: 3, reps: 10, weight: 55, unit: 'lbs' },
+      tempo: [2, 0, 1, 0],
+      setStates: [
+        { status: 'todo', planned: 10 },
+        { status: 'todo', planned: 10 },
+        { status: 'todo', planned: 10 },
+      ],
+      upcoming: true,
+    },
+    {
+      id: 'cable-fly',
+      name: 'Cable Fly',
+      summary: { sets: 3, reps: 12, weight: 30, unit: 'lbs' },
+      setStates: [
+        { status: 'todo', planned: 12 },
+        { status: 'todo', planned: 12 },
+        { status: 'todo', planned: 12 },
+      ],
+      upcoming: true,
+    },
+  ]
+}
+
+// --- Dual-mode (bilateral) projection -----------------------------------------
+
+/**
+ * Split a single-cable model into a bilateral (dual-mode) pair — one model per voltra.
+ *
+ * A dual-mode exercise drives two Voltra devices as a left/right pair. For v1 the two
+ * layers are rendered independently (one {@link LiveModel} each); a unified split-bar
+ * treatment is deferred. The fixture gives the RIGHT side a realistic left-dominant
+ * deficit (slightly slower reps, more velocity loss, a touch less force) so the two
+ * layers read as genuinely different streams rather than a mirror.
+ */
+export function deriveDualModel(base: DashboardModel = dashboardFixture): {
+  left: DashboardModel
+  right: DashboardModel
+} {
+  // Left is the dominant side — the base fixture verbatim.
+  const left: DashboardModel = base
+  // Right lags: ~8% slower per-rep concentric velocity, +7 pts velocity loss, ~6% less force.
+  const scale = (v: number) => Number((v * 0.92).toFixed(3))
+  const right: DashboardModel = {
+    session: base.session,
+    live: {
+      ...base.live,
+      velocity: scale(base.live.velocity),
+      force: Math.round(base.live.force * 0.94),
+      peakForce: Math.round(base.live.peakForce * 0.94),
+      velocityLossPct: base.live.velocityLossPct + 7,
+      repVelocities: base.live.repVelocities.map(scale),
+      lastRep: {
+        vCon: scale(base.live.lastRep.vCon),
+        rom: Number((base.live.lastRep.rom * 0.96).toFixed(2)),
+        peakVelocity: scale(base.live.lastRep.peakVelocity),
+      },
+    },
+  }
+  return { left, right }
+}

package/src/components/custom/Workout/TempoBar.stories.tsx

@@ -1,164 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
-import { TempoBar } from './TempoBar'
-
-const meta: Meta<typeof TempoBar> = {
-  title: 'Workout/TempoBar',
-  component: TempoBar,
-  tags: ['autodocs'],
-  argTypes: {
-    activePhase: {
-      control: 'select',
-      options: [null, 'concentric', 'hold', 'eccentric'],
-      description: 'Phase currently in progress (null = idle)',
-    },
-    phaseElapsedMs: { control: 'number', description: 'Elapsed ms in the active phase' },
-    completed: { control: 'object', description: 'Completed phase durations (ms)' },
-    target: { control: 'object', description: 'Per-phase target durations (seconds)' },
-    size: {
-      control: 'inline-radio',
-      options: ['default', 'wall'],
-      description: 'Density: default (compact) or wall (across-the-room dashboard scale)',
-    },
-    activeDisplay: {
-      control: 'inline-radio',
-      options: ['time', 'delta'],
-      description: 'Active readout: time (elapsed/target) or delta (countdown). Tap to toggle.',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ width: 240 }}>
-        <Story />
-      </View>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof TempoBar>
-
-// tempo target: 1s concentric, 1s hold-top, 3s eccentric
-const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
-
-export const Idle: Story = {
-  args: { activePhase: null, phaseElapsedMs: 0, target: TARGET },
-}
-
-export const ConcentricActive: Story = {
-  args: { activePhase: 'concentric', phaseElapsedMs: 600, target: TARGET },
-}
-
-export const EccentricMidRep: Story = {
-  args: {
-    activePhase: 'eccentric',
-    phaseElapsedMs: 1500,
-    completed: { concentric: 900, hold: 1000 },
-    target: TARGET,
-  },
-}
-
-export const BehindPace: Story = {
-  args: {
-    activePhase: 'eccentric',
-    phaseElapsedMs: 4200,
-    completed: { concentric: 1600, hold: 1000 },
-    target: TARGET,
-  },
-}
-
-export const RepComplete: Story = {
-  args: {
-    activePhase: null,
-    phaseElapsedMs: 0,
-    completed: { concentric: 950, hold: 1050, eccentric: 3100 },
-    target: TARGET,
-  },
-}
-
-export const NoTarget: Story = {
-  args: {
-    activePhase: 'concentric',
-    phaseElapsedMs: 800,
-  },
-}
-
-export const AllStates: Story = {
-  render: () => (
-    <View style={{ gap: 20 }}>
-      <TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET} />
-      <TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />
-      <TempoBar
-        activePhase="eccentric"
-        phaseElapsedMs={1500}
-        completed={{ concentric: 900, hold: 1000 }}
-        target={TARGET}
-      />
-      <TempoBar
-        activePhase={null}
-        phaseElapsedMs={0}
-        completed={{ concentric: 950, hold: 1050, eccentric: 3100 }}
-        target={TARGET}
-      />
-    </View>
-  ),
-}
-
-/**
- * The across-the-room wall scale — bigger bar, full phase words, and colour-coded
- * pacing (a missed target reads red). Here the eccentric ran long → red.
- */
-export const Wall: Story = {
-  args: {
-    activePhase: null,
-    phaseElapsedMs: 0,
-    completed: { concentric: 950, hold: 1000, eccentric: 4200 },
-    target: TARGET,
-    size: 'wall',
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}
-
-/** Wall, mid-rep — the eccentric is active, showing the delta countdown (1.5s to target). Tap to switch to elapsed/target. */
-export const WallActiveDelta: Story = {
-  args: {
-    activePhase: 'eccentric',
-    phaseElapsedMs: 1500,
-    completed: { concentric: 950, hold: 1000 },
-    target: TARGET,
-    size: 'wall',
-    activeDisplay: 'delta',
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}
-
-/** Wall, over target — the eccentric ran 1.2s past its target, so the delta is negative and red. */
-export const WallActiveOver: Story = {
-  args: {
-    activePhase: 'eccentric',
-    phaseElapsedMs: 4200,
-    completed: { concentric: 950, hold: 1000 },
-    target: TARGET,
-    size: 'wall',
-    activeDisplay: 'delta',
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}

package/src/components/custom/Workout/TempoBar.test.tsx

@@ -1,218 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import {
-  TempoBar,
-  getTempoPacingState,
-  getTempoFillPct,
-  formatTempoDelta,
-  TEMPO_PACING,
-} from './TempoBar'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const t = getSemanticColors('dark')
-const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
-
-describe('getTempoPacingState', () => {
-  it('returns none when there is no target', () => {
-    expect(getTempoPacingState(1000, null)).toBe('none')
-  })
-
-  it('returns none for a sub-threshold target', () => {
-    expect(getTempoPacingState(1000, TEMPO_PACING.minPhaseDurationMs - 1)).toBe('none')
-  })
-
-  it('returns on-pace when within the behind threshold', () => {
-    expect(getTempoPacingState(1000, 1000)).toBe('on-pace')
-    expect(getTempoPacingState(1100, 1000)).toBe('on-pace') // +10%, under 15%
-  })
-
-  it('returns behind once elapsed exceeds the behind threshold', () => {
-    expect(getTempoPacingState(1200, 1000)).toBe('behind') // +20%, over 15%
-  })
-})
-
-describe('getTempoFillPct', () => {
-  it('fills fully when there is no target', () => {
-    expect(getTempoFillPct(500, null)).toBe(100)
-  })
-
-  it('is proportional to elapsed vs target', () => {
-    expect(getTempoFillPct(500, 1000)).toBe(50)
-  })
-
-  it('clamps at 100 when past target', () => {
-    expect(getTempoFillPct(2000, 1000)).toBe(100)
-  })
-})
-
-describe('TempoBar', () => {
-  it('renders the bar with phase labels', () => {
-    render(<TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET} />)
-    expect(screen.getByTestId('tempo-bar')).toBeInTheDocument()
-    expect(screen.getByText('Con')).toBeInTheDocument()
-    expect(screen.getByText('Hold')).toBeInTheDocument()
-    expect(screen.getByText('Ecc')).toBeInTheDocument()
-  })
-
-  it('renders the active segment with an elapsed/target label', () => {
-    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />)
-    expect(screen.getByTestId('tempo-segment-active-Con')).toBeInTheDocument()
-    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
-  })
-
-  it('shows only elapsed when the active phase has no target', () => {
-    render(<TempoBar activePhase="concentric" phaseElapsedMs={800} />)
-    expect(screen.getByText('0.8')).toBeInTheDocument()
-  })
-
-  it('marks a completed phase that hit its target with a check', () => {
-    render(
-      <TempoBar
-        activePhase="hold"
-        phaseElapsedMs={100}
-        completed={{ concentric: 950 }}
-        target={TARGET}
-      />
-    )
-    expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
-    expect(screen.getByText('0.9 ✓')).toBeInTheDocument()
-  })
-
-  it('marks a completed phase that missed its target with a cross', () => {
-    render(
-      <TempoBar
-        activePhase="hold"
-        phaseElapsedMs={100}
-        completed={{ eccentric: 4000 }}
-        target={TARGET}
-      />
-    )
-    // eccentric target 3s, 4s elapsed => behind => cross
-    expect(screen.getByText('4.0 ✗')).toBeInTheDocument()
-  })
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <TempoBar
-        activePhase="eccentric"
-        phaseElapsedMs={1500}
-        completed={{ concentric: 900, hold: 1000 }}
-        target={TARGET}
-      />
-    )
-    expect(await axe(container)).toHaveNoViolations()
-  })
-})
-
-describe('TempoBar size="wall"', () => {
-  const TARGET_W = { concentric: 1, hold: 1, eccentric: 3 }
-
-  it('scales the active label up at wall density', () => {
-    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET_W} size="wall" />)
-    expect(screen.getByText('0.6 / 1.0')).toHaveStyle({ fontSize: 22 })
-  })
-
-  it('keeps the compact label size by default', () => {
-    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET_W} />)
-    expect(screen.getByText('0.6 / 1.0')).toHaveStyle({ fontSize: 12 })
-  })
-
-  it('preserves the segment testIDs at wall density', () => {
-    render(
-      <TempoBar
-        activePhase="eccentric"
-        phaseElapsedMs={1500}
-        completed={{ concentric: 900 }}
-        target={TARGET_W}
-        size="wall"
-      />
-    )
-    expect(screen.getByTestId('tempo-segment-active-Ecc')).toBeInTheDocument()
-    expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
-  })
-
-  it('spells out the full phase words at wall density', () => {
-    render(<TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET_W} size="wall" />)
-    expect(screen.getByText('Concentric')).toBeInTheDocument()
-    expect(screen.getByText('Eccentric')).toBeInTheDocument()
-    expect(screen.queryByText('Con')).not.toBeInTheDocument()
-  })
-})
-
-describe('formatTempoDelta', () => {
-  it('shows remaining time to target as a positive value', () => {
-    expect(formatTempoDelta(1500)).toBe('1.5')
-  })
-
-  it('shows over-target time as negative', () => {
-    expect(formatTempoDelta(-1200)).toBe('-1.2')
-  })
-
-  it('shows 0.0 at the target (no -0.0)', () => {
-    expect(formatTempoDelta(0)).toBe('0.0')
-    expect(formatTempoDelta(-10)).toBe('0.0')
-  })
-})
-
-describe('TempoBar activeDisplay (delta countdown + toggle)', () => {
-  it('counts the remaining time down to the target in delta mode', () => {
-    render(
-      <TempoBar
-        activePhase="eccentric"
-        phaseElapsedMs={1800}
-        target={TARGET}
-        activeDisplay="delta"
-      />
-    )
-    // eccentric target 3.0s, elapsed 1.8s → 1.2s remaining
-    expect(screen.getByText('1.2')).toBeInTheDocument()
-  })
-
-  it('goes negative once the phase runs past its target', () => {
-    render(
-      <TempoBar
-        activePhase="eccentric"
-        phaseElapsedMs={4200}
-        target={TARGET}
-        activeDisplay="delta"
-      />
-    )
-    expect(screen.getByText('-1.2')).toBeInTheDocument()
-  })
-
-  it('tapping the active segment toggles time ↔ delta', () => {
-    render(
-      <TempoBar
-        activePhase="concentric"
-        phaseElapsedMs={600}
-        target={TARGET}
-        activeDisplay="time"
-      />
-    )
-    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
-    fireEvent.click(screen.getByTestId('tempo-segment-active-Con'))
-    // concentric target 1.0s, elapsed 0.6s → 0.4s remaining
-    expect(screen.getByText('0.4')).toBeInTheDocument()
-    expect(screen.queryByText('0.6 / 1.0')).not.toBeInTheDocument()
-  })
-
-  it('defaults to the time readout', () => {
-    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />)
-    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
-  })
-})
-
-describe('TempoBar completed pacing colour', () => {
-  it('colours a missed completed phase red', () => {
-    render(
-      <TempoBar
-        activePhase="hold"
-        phaseElapsedMs={100}
-        completed={{ eccentric: 4000 }}
-        target={TARGET}
-      />
-    )
-    expect(screen.getByText('4.0 ✗')).toHaveStyle({ color: t['status-error'] })
-  })
-})