@titan-design/react-ui 0.4.0 → 0.5.0

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useEffect, useState } from 'react'
 import { View } from 'react-native'
-import { TempoDisplay } from './TempoDisplay'
+import { TempoDisplay, type TempoLivePhase, type TempoLiveState } from './TempoDisplay'
 
 // tempo = [eccentric, pauseBottom, concentric, pauseTop]
 const meta: Meta<typeof TempoDisplay> = {
@@ -8,10 +9,17 @@ const meta: Meta<typeof TempoDisplay> = {
   component: TempoDisplay,
   tags: ['autodocs'],
   argTypes: {
-    tempo: { control: 'object', description: 'Tempo values [eccentric, pauseBottom, concentric, pauseTop] in seconds' },
+    tempo: {
+      control: 'object',
+      description: 'Tempo values [eccentric, pauseBottom, concentric, pauseTop] in seconds',
+    },
     size: { control: 'select', options: ['sm', 'md'], description: 'Size variant' },
     colored: { control: 'boolean', description: 'Colored vs mono display' },
     showInfo: { control: 'boolean', description: 'Show info tooltip on press' },
+    live: {
+      control: 'object',
+      description: 'Live phase-fill state (opt-in); omit for static prescription',
+    },
   },
 }
 
@@ -64,3 +72,62 @@ export const AllVariants: Story = {
     </View>
   ),
 }
+
+// --- Live phase-fill (opt-in) ----------------------------------------------
+
+// Deterministic mid-rep frames — the active phase digit fills against its target.
+export const LiveEccentricInProgress: Story = {
+  args: { tempo: [3, 1, 1, 0], live: { activePhase: 'eccentric', phaseElapsedMs: 1500 } },
+}
+
+// Concentric target is 1s; 1.6s elapsed is behind pace, so the digit turns red.
+export const LiveBehindPace: Story = {
+  args: { tempo: [3, 1, 1, 0], live: { activePhase: 'concentric', phaseElapsedMs: 1600 } },
+}
+
+const LIVE_CYCLE: { phase: TempoLivePhase; ms: number }[] = [
+  { phase: 'eccentric', ms: 3000 },
+  { phase: 'pauseBottom', ms: 1000 },
+  { phase: 'concentric', ms: 1000 },
+]
+
+function LiveTempoDemo() {
+  const [live, setLive] = useState<TempoLiveState>({ activePhase: 'eccentric', phaseElapsedMs: 0 })
+  useEffect(() => {
+    let idx = 0
+    let start = Date.now()
+    const id = setInterval(() => {
+      const step = LIVE_CYCLE[idx]
+      const elapsed = Date.now() - start
+      if (elapsed >= step.ms + 400) {
+        idx = (idx + 1) % LIVE_CYCLE.length
+        start = Date.now()
+      }
+      setLive({
+        activePhase: LIVE_CYCLE[idx].phase,
+        phaseElapsedMs: Math.min(elapsed, step.ms + 400),
+      })
+    }, 50)
+    return () => clearInterval(id)
+  }, [])
+  return <TempoDisplay tempo={[3, 1, 1, 0]} live={live} />
+}
+
+// Self-driving demo cycling Ecc → Pause → Con to show the fill animating.
+export const LiveAnimated: Story = {
+  render: () => <LiveTempoDemo />,
+}
+
+// Static and live side by side — the same prescription, two modes.
+export const StaticVsLive: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <TempoDisplay tempo={[3, 1, 1, 0]} />
+      <TempoDisplay
+        tempo={[3, 1, 1, 0]}
+        live={{ activePhase: 'eccentric', phaseElapsedMs: 1500 }}
+      />
+      <LiveTempoDemo />
+    </View>
+  ),
+}

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

@@ -80,6 +80,41 @@ describe('TempoDisplay', () => {
     })
   })
 
+  describe('live phase-fill', () => {
+    it('is inert by default (no active fill) for backward-compatible static use', () => {
+      render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+      expect(screen.queryByTestId('tempo-live-active')).not.toBeInTheDocument()
+    })
+
+    it('renders an active fill overlay for the in-progress phase when live', () => {
+      render(
+        <TempoDisplay
+          tempo={[3, 1, 1, 0]}
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 1500 }}
+        />
+      )
+      expect(screen.getByTestId('tempo-live-active')).toBeInTheDocument()
+      expect(screen.getByText('3')).toBeInTheDocument()
+    })
+
+    it('marks no phase active when idle (activePhase null)', () => {
+      render(<TempoDisplay tempo={[3, 1, 1, 0]} live={{ activePhase: null, phaseElapsedMs: 0 }} />)
+      expect(screen.queryByTestId('tempo-live-active')).not.toBeInTheDocument()
+    })
+
+    it('still renders all four phase digits in live mode', () => {
+      render(
+        <TempoDisplay
+          tempo={[4, 3, 2, 1]}
+          live={{ activePhase: 'concentric', phaseElapsedMs: 500 }}
+        />
+      )
+      for (const digit of ['4', '3', '2', '1']) {
+        expect(screen.getByText(digit)).toBeInTheDocument()
+      }
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(<TempoDisplay tempo={[3, 1, 1, 0]} />)

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

@@ -2,6 +2,23 @@
 import { useState, useCallback } from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { roundTempo } from '../../../utils/workout-format'
+import { alpha } from '../../../utils/colors'
+import { getTempoFillPct, getTempoPacingState } from './TempoBar'
+
+/** The four tempo phases, in the order the display renders them. */
+export type TempoLivePhase = 'eccentric' | 'pauseBottom' | 'concentric' | 'pauseTop'
+
+/**
+ * Live rep state driving the phase-fill overlay. Controlled by the consumer
+ * (matching titan's `elapsedMs`-in convention) so the same real timer feeds
+ * both web dashboard and native app — TempoDisplay owns rendering only.
+ */
+export interface TempoLiveState {
+  /** Phase currently in progress, or null when idle/at rest. */
+  activePhase: TempoLivePhase | null
+  /** Elapsed time (ms) within the active phase. */
+  phaseElapsedMs: number
+}
 
 export interface TempoDisplayProps extends ViewProps {
   /** Tempo values: [eccentric, pauseBottom, concentric, pauseTop] in seconds */
@@ -11,12 +28,19 @@ export interface TempoDisplayProps extends ViewProps {
   colored?: boolean
   /** Show info tooltip on press */
   showInfo?: boolean
+  /**
+   * When set, renders a live phase-fill: the active phase digit fills against
+   * its prescribed duration and inactive phases dim. Omit for the static
+   * prescription string (default, backward compatible).
+   */
+  live?: TempoLiveState
   onPress?: () => void
   className?: string
 }
 
 const INTER = 'Inter, sans-serif'
 const TEXT_TERTIARY = '#6B7280'
+const STATUS_ERROR = '#D14343' // status-error (red), shown when a phase runs behind pace
 
 // Phase colors: [eccentric, pauseBottom, concentric, pauseTop]
 const phaseColors = {
@@ -67,11 +91,84 @@ function TempoSeparator({ color, fontSize }: { color: string; fontSize: number }
   )
 }
 
+// Phase order + color matching the tempo tuple, for the live phase-fill row.
+const LIVE_PHASES: { key: TempoLivePhase; color: string }[] = [
+  { key: 'eccentric', color: phaseColors.eccentric },
+  { key: 'pauseBottom', color: phaseColors.pauseBottom },
+  { key: 'concentric', color: phaseColors.concentric },
+  { key: 'pauseTop', color: phaseColors.pauseTop },
+]
+
+function LiveTempoCell({
+  value,
+  color,
+  isActive,
+  phaseElapsedMs,
+  fontSize,
+}: {
+  value: number
+  color: string
+  isActive: boolean
+  phaseElapsedMs: number
+  fontSize: number
+}) {
+  if (!isActive) {
+    return <TempoValue value={value} color={alpha(color, 0.35)} fontSize={fontSize} />
+  }
+  const targetMs = value > 0 ? value * 1000 : null
+  const barColor = getTempoPacingState(phaseElapsedMs, targetMs) === 'behind' ? STATUS_ERROR : color
+  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs)
+  return (
+    <View style={{ position: 'relative' }} testID="tempo-live-active">
+      <View
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${fillPct}%`,
+          backgroundColor: alpha(barColor, 0.3),
+          borderRadius: 2,
+        }}
+      />
+      <TempoValue value={value} color={barColor} fontSize={fontSize} />
+    </View>
+  )
+}
+
+function LiveTempoRow({
+  values,
+  live,
+  fontSize,
+}: {
+  values: [number, number, number, number]
+  live: TempoLiveState
+  fontSize: number
+}) {
+  return (
+    <>
+      {LIVE_PHASES.map((phase, i) => (
+        <View key={phase.key} style={{ flexDirection: 'row' }}>
+          {i > 0 && <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />}
+          <LiveTempoCell
+            value={values[i]}
+            color={phase.color}
+            isActive={live.activePhase === phase.key}
+            phaseElapsedMs={live.phaseElapsedMs}
+            fontSize={fontSize}
+          />
+        </View>
+      ))}
+    </>
+  )
+}
+
 export function TempoDisplay({
   tempo,
   size = 'md',
   colored = true,
   showInfo = true,
+  live,
   onPress,
   className,
   ...props
@@ -119,7 +216,13 @@ export function TempoDisplay({
         TEMPO
       </Text>
       <View style={{ flexDirection: 'row' }} testID="tempo-value">
-        {colored ? (
+        {live ? (
+          <LiveTempoRow
+            values={[eccentric, pauseBottom, concentric, pauseTop]}
+            live={live}
+            fontSize={fontSize}
+          />
+        ) : colored ? (
           <>
             <TempoValue value={eccentric} color={phaseColors.eccentric} fontSize={fontSize} />
             <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />

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

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, afterEach } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import {
@@ -210,10 +210,26 @@ describe('getVelocityZoneName', () => {
 })
 
 describe('calculateVelocityLoss', () => {
-  it('calculates percentage loss from first to last rep', () => {
+  it('calculates percentage loss from running-best to last rep', () => {
+    // Best is the first rep here, so best->last matches the legacy result.
     expect(calculateVelocityLoss([1.0, 0.8])).toBe(20)
   })
 
+  it('uses the best rep (not the first) as the reference for non-monotonic sets', () => {
+    // best = 1.0 (rep 2), last = 0.6 -> (1.0 - 0.6) / 1.0 = 40%.
+    // Legacy first->last would have been (0.8 - 0.6) / 0.8 = 25%.
+    expect(calculateVelocityLoss([0.8, 1.0, 0.6])).toBe(40)
+  })
+
+  it('clamps to 0 when the set ends on its best rep', () => {
+    expect(calculateVelocityLoss([0.6, 0.8, 1.0])).toBe(0)
+  })
+
+  it('clamps to 0 when a later rep exceeds the first rep', () => {
+    // best = 1.2 (last), so loss is negative pre-clamp -> 0.
+    expect(calculateVelocityLoss([1.0, 0.9, 1.2])).toBe(0)
+  })
+
   it('returns 0 for single rep', () => {
     expect(calculateVelocityLoss([1.0])).toBe(0)
   })
@@ -221,6 +237,10 @@ describe('calculateVelocityLoss', () => {
   it('returns 0 for empty array', () => {
     expect(calculateVelocityLoss([])).toBe(0)
   })
+
+  it('returns 0 when the best rep is non-positive', () => {
+    expect(calculateVelocityLoss([0, 0])).toBe(0)
+  })
 })
 
 describe('calculateMeanVelocity', () => {
@@ -233,6 +253,73 @@ describe('calculateMeanVelocity', () => {
   })
 })
 
+// WA-shaped 5-band zone set (compound movement-class defaults, mean m/s).
+const compoundBands = [
+  { id: 'grinding', label: 'Grinding', min: 0, max: 0.35 },
+  { id: 'maximalStrength', label: 'Max Strength', min: 0.35, max: 0.5 },
+  { id: 'strengthSpeed', label: 'Strength-Speed', min: 0.5, max: 0.75 },
+  { id: 'power', label: 'Power', min: 0.75, max: 1.0 },
+  { id: 'speed', label: 'Speed', min: 1.0, max: null },
+] as const
+
+describe('VelocityStrip zones prop', () => {
+  it('colors bars from the supplied bands (mini)', () => {
+    render(<VelocityStrip velocities={[1.1, 0.45]} zones={compoundBands} variant="mini" />)
+    // 1.1 -> speed -> green; 0.45 -> maximalStrength -> red (shared with grinding).
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ed573' })
+    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: '#ff4757' })
+  })
+
+  it('labels the summary row with the band containing the mean velocity', () => {
+    // mean of the sample = 0.80 -> power band.
+    render(<VelocityStrip velocities={sampleVelocities} zones={compoundBands} expanded />)
+    expect(screen.getByTestId('velocity-info-row')).toHaveTextContent('Power')
+  })
+
+  it('falls back to the default scale when zones is absent', () => {
+    render(<VelocityStrip velocities={[1.1]} variant="mini" />)
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ed573' })
+  })
+})
+
+describe('VelocityStrip live mode', () => {
+  const originalMatchMedia = window.matchMedia
+
+  afterEach(() => {
+    if (originalMatchMedia) window.matchMedia = originalMatchMedia
+    else delete (window as { matchMedia?: unknown }).matchMedia
+  })
+
+  it('marks the latest rep bar in its accessibility label', () => {
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={3} expanded />)
+    expect(
+      screen.getByLabelText(/Rep 4: 0\.68 meters per second, latest rep$/),
+    ).toBeInTheDocument()
+  })
+
+  it('flags a new set peak on the latest bar', () => {
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} expanded />)
+    expect(
+      screen.getByLabelText(/Rep 1: 1\.10 meters per second, latest rep, new set peak$/),
+    ).toBeInTheDocument()
+  })
+
+  it('renders without animation when prefers-reduced-motion is set', () => {
+    window.matchMedia = vi.fn().mockReturnValue({
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }) as unknown as typeof window.matchMedia
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} expanded />)
+    expect(screen.getByTestId('velocity-bar-0')).toBeInTheDocument()
+  })
+
+  it('does not apply live marking in the mini variant', () => {
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} variant="mini" />)
+    expect(screen.queryByLabelText(/latest rep/)).not.toBeInTheDocument()
+  })
+})
+
 describe('VelocityStrip all-zero velocities (NaN guard)', () => {
   it('emits a valid 0% bar height (not NaN) when every velocity is zero (expanded)', () => {
     render(<VelocityStrip velocities={[0, 0, 0]} expanded />)