@titan-design/react-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,215 @@
+// 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()
+}

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/TrainingStatusPage.tsx

@@ -16,13 +16,6 @@ import {
   type VolumeStatus,
 } from './muscleTaxonomy'
 
-const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
-const PAGE_BG = 'var(--color-background-base)'
-
 /** Volume statuses in display order for the legend and summary cards. */
 const STATUS_ORDER: VolumeStatus[] = ['under', 'maintenance', 'productive', 'over']
 
@@ -121,28 +114,28 @@ function SummaryCards({ summary }: { summary: TrainingStatusSummary }) {
         return (
           <View
             key={key}
+            className="bg-surface-elevated border-border"
             style={{
               flexGrow: 1,
               flexBasis: '46%',
               padding: 12,
               borderRadius: 10,
-              backgroundColor: SURFACE_ELEVATED,
               borderWidth: 1,
-              borderColor: BORDER_DEFAULT,
             }}
             testID={`training-status-page-summary-${key}`}
           >
             <Text
+              className="text-text-primary"
               style={{
                 fontSize: 22,
                 fontFamily: '"Space Grotesk", sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
             >
               {value}
             </Text>
             <Text
+              className="text-text-tertiary"
               style={{
                 marginTop: 2,
                 fontSize: 11,
@@ -150,7 +143,6 @@ function SummaryCards({ summary }: { summary: TrainingStatusSummary }) {
                 fontWeight: '600',
                 letterSpacing: 0.4,
                 textTransform: 'uppercase',
-                color: TEXT_TERTIARY,
               }}
             >
               {label}
@@ -186,10 +178,10 @@ function StatusLegend() {
             accessibilityElementsHidden
           />
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
-              color: TEXT_SECONDARY,
               textTransform: 'capitalize',
             }}
           >
@@ -247,8 +239,8 @@ export function TrainingStatusPage({
 
   return (
     <View
-      className={className}
-      style={{ position: 'relative', width: 390, backgroundColor: PAGE_BG }}
+      className={['bg-background-base', className].filter(Boolean).join(' ')}
+      style={{ position: 'relative', width: 390 }}
       accessibilityRole={'main' as ViewProps['accessibilityRole']}
       aria-label={title}
       testID="training-status-page"
@@ -257,11 +249,11 @@ export function TrainingStatusPage({
       <View style={{ padding: 16, gap: 16 }} testID="training-status-page-content">
         <Text
           accessibilityRole="header"
+          className="text-text-primary"
           style={{
             fontSize: 20,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: TEXT_PRIMARY,
           }}
           testID="training-status-page-title"
         >
@@ -273,10 +265,9 @@ export function TrainingStatusPage({
         <SummaryCards summary={summary} />
 
         <View
+          className="bg-surface-elevated border-border"
           style={{
-            backgroundColor: SURFACE_ELEVATED,
             borderWidth: 1,
-            borderColor: BORDER_DEFAULT,
             borderRadius: 12,
             padding: 12,
             gap: 12,