@titan-design/react-ui 0.7.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,95 +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)' },
-  },
-  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>
-  ),
-}

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

@@ -1,103 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import {
-  TempoBar,
-  getTempoPacingState,
-  getTempoFillPct,
-  TEMPO_PACING,
-} from './TempoBar'
-
-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()
-  })
-})

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

@@ -1,215 +0,0 @@
-// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { alpha } from '../../../utils/colors'
-
-const t = getSemanticColors('dark')
-
-/**
- * Titan-local phase key. Consumers map their own movement-phase enum onto this
- * presentational key at the call site — TempoBar owns rendering only.
- */
-export type TempoPhaseKey = 'concentric' | 'hold' | 'eccentric'
-
-/** Pacing tuning shared with the fill/pacing helpers below. */
-export const TEMPO_PACING = {
-  behindThresholdPct: 0.15,
-  minPhaseDurationMs: 500,
-} as const
-
-export type TempoPacingState = 'none' | 'on-pace' | 'behind'
-
-/**
- * Classify how a phase's elapsed time tracks against its target duration.
- * `none` when there is no meaningful target; `behind` once elapsed exceeds the
- * target by more than the behind threshold; `on-pace` otherwise.
- */
-export function getTempoPacingState(
-  elapsedMs: number,
-  targetMs: number | null,
-): TempoPacingState {
-  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return 'none'
-  const ratio = elapsedMs / targetMs
-  if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return 'behind'
-  return 'on-pace'
-}
-
-/** Fill percentage (0–100) for the active phase; full when no target is set. */
-export function getTempoFillPct(elapsedMs: number, targetMs: number | null): number {
-  if (!targetMs) return 100
-  return Math.min(100, (elapsedMs / targetMs) * 100)
-}
-
-interface PhaseConfig {
-  label: string
-  color: string
-  flex: number
-}
-
-const PHASE_ORDER: TempoPhaseKey[] = ['concentric', 'hold', 'eccentric']
-
-const PHASE_CONFIG: Record<TempoPhaseKey, PhaseConfig> = {
-  concentric: { label: 'Con', color: t['status-success'], flex: 2 },
-  hold: { label: 'Hold', color: t['brand-primary'], flex: 1 },
-  eccentric: { label: 'Ecc', color: t['status-warning'], flex: 3 },
-}
-
-export interface TempoBarProps extends ViewProps {
-  /** Phase currently in progress, or null when idle/at rest. */
-  activePhase: TempoPhaseKey | null
-  /** Elapsed time (ms) within the active phase. */
-  phaseElapsedMs: number
-  /** Completed phase durations (ms) for the current rep, keyed by phase. */
-  completed?: Partial<Record<TempoPhaseKey, number>>
-  /** Optional per-phase target durations (seconds) for pacing feedback. */
-  target?: Partial<Record<TempoPhaseKey, number>>
-  className?: string
-}
-
-/**
- * TempoBar — live rep phase progression indicator.
- *
- * Renders a segmented bar (Con → Hold → Ecc) where the active phase fills in
- * real time and completed phases show their duration with a ✓/✗ pacing mark.
- * Presentational only: the consumer derives which phase is active, its elapsed
- * time, and completed durations, then feeds them in.
- */
-export function TempoBar({
-  activePhase,
-  phaseElapsedMs,
-  completed,
-  target,
-  className,
-  ...props
-}: TempoBarProps) {
-  return (
-    <View className={className} testID="tempo-bar" {...props}>
-      {/* Phase labels */}
-      <View style={{ flexDirection: 'row', marginBottom: 4 }}>
-        {PHASE_ORDER.map((phase) => {
-          const config = PHASE_CONFIG[phase]
-          return (
-            <View key={phase} style={{ flex: config.flex, alignItems: 'center' }}>
-              <Text style={{ fontSize: 10, color: t['text-disabled'] }}>{config.label}</Text>
-            </View>
-          )
-        })}
-      </View>
-
-      {/* Segmented bar */}
-      <View style={{ flexDirection: 'row', gap: 2, height: 20 }}>
-        {PHASE_ORDER.map((phase) => {
-          const config = PHASE_CONFIG[phase]
-          const isActive = activePhase === phase
-          const completedMs = completed?.[phase]
-          const targetSec = target?.[phase]
-          const targetMs = targetSec != null ? targetSec * 1000 : null
-
-          return (
-            <View
-              key={phase}
-              style={{
-                flex: config.flex,
-                backgroundColor: alpha('#ffffff', 0.06),
-                borderRadius: 4,
-                overflow: 'hidden',
-              }}
-            >
-              {isActive ? (
-                <ActiveSegment
-                  config={config}
-                  phaseElapsedMs={phaseElapsedMs}
-                  targetMs={targetMs}
-                />
-              ) : completedMs != null ? (
-                <CompletedSegment config={config} completedMs={completedMs} targetMs={targetMs} />
-              ) : null}
-            </View>
-          )
-        })}
-      </View>
-    </View>
-  )
-}
-
-function ActiveSegment({
-  config,
-  phaseElapsedMs,
-  targetMs,
-}: {
-  config: PhaseConfig
-  phaseElapsedMs: number
-  targetMs: number | null
-}) {
-  const pacing = getTempoPacingState(phaseElapsedMs, targetMs)
-  const barColor = pacing === 'behind' ? t['status-error'] : config.color
-  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs)
-
-  const label = targetMs
-    ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}`
-    : formatDuration(phaseElapsedMs)
-
-  return (
-    <View style={{ height: '100%', position: 'relative' }} testID={`tempo-segment-active-${config.label}`}>
-      <View
-        style={{
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${fillPct}%`,
-          backgroundColor: alpha(barColor, 0.3),
-          borderRadius: 4,
-        }}
-      />
-      <View
-        style={{
-          height: '100%',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Text style={{ fontSize: 12, fontWeight: '700', color: barColor }}>{label}</Text>
-      </View>
-    </View>
-  )
-}
-
-function CompletedSegment({
-  config,
-  completedMs,
-  targetMs,
-}: {
-  config: PhaseConfig
-  completedMs: number
-  targetMs: number | null
-}) {
-  const pacing = getTempoPacingState(completedMs, targetMs)
-  const hitTarget = pacing !== 'behind'
-  const indicator =
-    targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? (hitTarget ? ' ✓' : ' ✗') : ''
-
-  return (
-    <View
-      style={{
-        height: '100%',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: alpha(config.color, 0.15),
-      }}
-      testID={`tempo-segment-completed-${config.label}`}
-    >
-      <Text style={{ fontSize: 12, fontWeight: '500', color: alpha(config.color, 0.7) }}>
-        {formatDuration(completedMs)}
-        {indicator}
-      </Text>
-    </View>
-  )
-}
-
-function formatDuration(ms: number): string {
-  const s = ms / 1000
-  return s < 10 ? s.toFixed(1) : Math.round(s).toString()
-}