@titan-design/react-ui 0.8.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titan-design/react-ui",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Cross-platform design system built on Gluestack UI",
   "author": "Henry Jewkes",
   "license": "MIT",
@@ -147,6 +147,7 @@
   "files": [
     "dist",
     "src",
+    "!src/lab",
     "docs",
     "tailwind.config.js"
   ],

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

@@ -12,7 +12,7 @@ import {
   type IconProps,
 } from '../../icons'
 
-// Literal-hex status pins (the TempoBar pattern) — `resolveColor()` yields a
+// Literal-hex status pins (getSemanticColors, not resolveColor) — `resolveColor()` yields a
 // `var(...)` under the RNW vitest alias, which breaks `toHaveStyle` in tests.
 const t = getSemanticColors('dark')
 

package/src/components/custom/Workout/README.md

@@ -8,7 +8,7 @@ component is pure import churn with no file moves.
 ## Tier map
 
 **Atoms** — single-purpose, no cross-component state:
-BaseBadge · WeightBadge · PrBadge · StatusDot · PlaceholderStrip · TempoBar ·
+BaseBadge · WeightBadge · PrBadge · StatusDot · PlaceholderStrip ·
 DeviationBar · IntensityBar · WorkoutPill · MuscleGroupChip · Sparkline ·
 SupersetWrapper · InputBar · MetricCell · SetsRepsLoad · ExerciseIndicator · SetBar
 
@@ -48,6 +48,29 @@ type props without pulling the dependency.
   letter-spacing-1 value/separator cell. `TempoDisplay` (tempo digits) and
   `SetsRepsLoad` (sets × reps @ load) both compose it so the two read as one
   visual language. Exported for composition, not for direct app use.
+- **TempoDisplay is deliberately NOT decomposed further** — it is the single tempo
+  component (the standalone `TempoBar` was retired into it). It renders two modes from
+  one chip: the static phase-coloured **prescription** and, with the `live` prop, the
+  running tempo (per-phase countdown/count-up to 0.1s, a bottom-anchored phase-progress
+  fill, semantic pacing tones, and banked/frozen finals). Its internal parts —
+  `LiveTempoRow`, `LiveTempoCell`, `CellFill` (the fill behind a number), and the
+  `activeNumberTone` pacing helper — are **TempoDisplay-private with no second consumer**,
+  so per the ≥2-consumer rule they stay internal rather than becoming top-level primitives.
+  The only already-shared primitive is `MetricCell`.
+
+  **If reuse emerges, decompose along these seams** (in likely order):
+  1. **`CellFill` → a shared `ProgressCell`/`FillBehind` primitive** — the moment a
+     second component needs "a bottom-anchored progress fill behind centred text" (e.g. a
+     generic timer/meter cell). Cleanest extraction; pure presentation, no tempo semantics.
+  2. **`activeNumberTone` + `ON_TARGET_MS` → a `tempo-pacing` util** — if another surface
+     needs the same yellow/green/red "time-to-target" tone (a coach card, a rep-tempo
+     summary). It is pure logic, trivially portable.
+  3. **`LiveTempoRow` → a `TempoLiveRow` molecule** — only if a consumer wants the running
+     row *without* the chip chrome (label/background/padding). Until then the chrome and the
+     row belong together as one component with a `live` prop, not two.
+
+  Not worth splitting today (speculative extraction the workflow warns against); this note
+  is the trigger list for when it stops being speculative.
 - **S3 session-rail family** — `SessionRail` (organism) composes the standalone
   `ExerciseCardHeading` molecule per exercise, which composes an `ExerciseHeading`
   info block + a `SetStrip`:
@@ -147,26 +170,23 @@ type props without pulling the dependency.
   `size` (default 180) sets the diameter; the eyebrow/section title is organism
   chrome. Web/RNW-only (like `CircularProgress`) — the wall variant; mobile keeps
   `bar`. `Ring*` (RestTimer) + `Custom/CircularTimer` stories on the wall background.
-- **`size="wall"` density (TempoBar · FatigueMeter · ZoneTrack)** — the across-the-room
+- **`size="wall"` density (FatigueMeter · ZoneTrack)** — the across-the-room
   dashboard scale, added as the idiomatic titan `size` union (a JS number-map per
   component; **`default` values are byte-identical** to before, so existing consumers are
-  untouched). **TempoBar** scales its bar/labels/durations and at wall spells out the full
-  phase words (Concentric / Hold / Eccentric); its completed segments are **colour-coded**
-  (a missed target reads red, not just a ✗), and the **active** segment shows a **delta
-  countdown** (`activeDisplay`) — remaining time to target counting to `0.0` then negative
-  (red) once over — **tap to toggle** delta ↔ elapsed/target. **ZoneTrack** (the shared
-  gauge primitive) gained `size` that scales track, needle, tick lines and tick labels
-  together; its *other* consumers (TrainingLoadGauge, RpeCalibration) default to `default`
-  and are unaffected. **FatigueMeter** passes `size` through and lets `trackHeight` flow
-  from it. `Wall*` / `WallDensity` stories on the wall background.
+  untouched). **ZoneTrack** (the shared gauge primitive) gained `size` that scales track,
+  needle, tick lines and tick labels together; its *other* consumers (TrainingLoadGauge,
+  RpeCalibration) default to `default` and are unaffected. **FatigueMeter** passes `size`
+  through and lets `trackHeight` flow from it. `Wall*` / `WallDensity` stories on the wall
+  background. (**TempoBar** was retired here — the standalone active-tempo bar is superseded
+  by `TempoDisplay`'s live mode; see the TempoDisplay note.)
 - Badge icons (WeightBadge's dumbbell, PrBadge / PrHistoryModal's star) are inline
   SVGs (`./icons.tsx`), not `lucide-react` — that dependency was dropped in 0.5.0
   to keep the root barrel light. The SVG paths mirror lucide's glyphs so rendering
   is unchanged.
 - **`ExerciseIndicator` taxonomy (LOCKED, TD-03.51)** — one precedence-ranked slot
   per exercise, six distinct kinds over four tier colors (bound to titan status
-  tokens, read as literal hex via `getSemanticColors('dark')` — the TempoBar
-  pattern). Glyph = the specific signal; color = the severity tier. Chips are
+  tokens, read as literal hex via `getSemanticColors('dark')`, not `resolveColor`,
+  so tests can assert them). Glyph = the specific signal; color = the severity tier. Chips are
   outlined (border + glyph, no fill) so they never collide with the *filled*
   velocity strip, and static (no pulse — they are chrome). Precedence, high → low:
 

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

@@ -34,6 +34,12 @@ describe('SetsRepsLoad', () => {
     expect(screen.getByTestId('sets-reps-load')).toHaveTextContent('15-20')
   })
 
+  it('scales the cell font size via fontSize', () => {
+    render(<SetsRepsLoad sets={4} reps={8} load={140} fontSize={32} />)
+    // The value cells (and separators) render at the supplied size.
+    expect(screen.getByText('4')).toHaveStyle({ fontSize: 32 })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(<SetsRepsLoad sets={5} reps={8} load={145} />)

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

@@ -14,6 +14,8 @@ export interface SetsRepsLoadProps extends ViewProps {
   load: number
   /** Displayed load unit label (e.g. "lb", "kg"). */
   unit?: string
+  /** Cell font size (px). Default 11 — the compact rail/card scale. Raise for a wall read-out. */
+  fontSize?: number
   className?: string
 }
 
@@ -27,6 +29,7 @@ export function SetsRepsLoad({
   reps,
   load,
   unit = 'lb',
+  fontSize,
   className,
   ...props
 }: SetsRepsLoadProps) {
@@ -41,12 +44,18 @@ export function SetsRepsLoad({
       testID="sets-reps-load"
       {...props}
     >
-      <MetricCell color={value}>{sets}</MetricCell>
-      <MetricCell color={sep}>{` ${TIMES} `}</MetricCell>
-      <MetricCell color={value}>{reps}</MetricCell>
-      <MetricCell color={sep}>{` ${AT} `}</MetricCell>
-      <MetricCell color={value}>{load}</MetricCell>
-      <MetricCell color={sep}>{` ${unit}`}</MetricCell>
+      <MetricCell color={value} fontSize={fontSize}>
+        {sets}
+      </MetricCell>
+      <MetricCell color={sep} fontSize={fontSize}>{` ${TIMES} `}</MetricCell>
+      <MetricCell color={value} fontSize={fontSize}>
+        {reps}
+      </MetricCell>
+      <MetricCell color={sep} fontSize={fontSize}>{` ${AT} `}</MetricCell>
+      <MetricCell color={value} fontSize={fontSize}>
+        {load}
+      </MetricCell>
+      <MetricCell color={sep} fontSize={fontSize}>{` ${unit}`}</MetricCell>
     </View>
   )
 }

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { ComponentProps } from 'react'
 import { useEffect, useState } from 'react'
-import { View } from 'react-native'
+import { View, Text } from 'react-native'
 import { TempoDisplay, type TempoLivePhase, type TempoLiveState } from './TempoDisplay'
 
 // tempo = [eccentric, pauseBottom, concentric, pauseTop]
@@ -25,7 +26,8 @@ const meta: Meta<typeof TempoDisplay> = {
       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' },
+    fontSize: { control: { type: 'range', min: 9, max: 48, step: 1 }, description: 'Digit size (overrides `size`)' },
+    showLabel: { control: 'boolean', description: 'Show the TEMPO caption' },
     showInfo: { control: 'boolean', description: 'Show info tooltip on press' },
     live: {
       control: 'object',
@@ -37,98 +39,107 @@ const meta: Meta<typeof TempoDisplay> = {
 export default meta
 type Story = StoryObj<typeof TempoDisplay>
 
-export const ColoredStandard: Story = {
-  args: { tempo: [3, 1, 1, 0], colored: true },
+// The static prescription — the base tempo lockup (phase-coloured), no live readout.
+// Add the `live` prop (see the Live stories below) to turn it into the running tempo.
+export const Prescription: Story = {
+  args: { tempo: [3, 1, 2, 2] },
 }
 
-export const MonoStandard: Story = {
-  args: { tempo: [3, 1, 1, 0], colored: false },
-}
-
-export const ColoredExplosive: Story = {
-  args: { tempo: [1, 0, 1, 0], colored: true },
-}
-
-export const MonoExplosive: Story = {
-  args: { tempo: [1, 0, 1, 0], colored: false },
-}
-
-export const ColoredSlowEccentric: Story = {
-  args: { tempo: [5, 2, 1, 1], colored: true },
-}
-
-export const SmallColored: Story = {
-  args: { tempo: [3, 1, 1, 0], size: 'sm', colored: true },
-}
-
-export const SmallMono: Story = {
-  args: { tempo: [3, 1, 1, 0], size: 'sm', colored: false },
-}
-
-export const AllVariants: Story = {
-  render: () => (
-    <View style={{ gap: 12 }}>
-      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <TempoDisplay tempo={[3, 1, 1, 0]} colored />
-        <TempoDisplay tempo={[3, 1, 1, 0]} colored={false} />
-      </View>
-      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <TempoDisplay tempo={[1, 0, 1, 0]} colored />
-        <TempoDisplay tempo={[1, 0, 1, 0]} colored={false} />
-      </View>
-      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <TempoDisplay tempo={[3, 1, 1, 0]} size="sm" colored />
-        <TempoDisplay tempo={[3, 1, 1, 0]} size="sm" colored={false} />
-      </View>
-    </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 } },
-}
+// --- Live tempo (opt-in via the `live` prop) --------------------------------
 
+// A full rep cycle incl. a 2s rest at the top between reps.
 const LIVE_CYCLE: { phase: TempoLivePhase; ms: number }[] = [
   { phase: 'eccentric', ms: 3000 },
   { phase: 'pauseBottom', ms: 1000 },
-  { phase: 'concentric', ms: 1000 },
+  { phase: 'concentric', ms: 2000 },
+  { phase: 'pauseTop', ms: 2000 },
 ]
 
-function LiveTempoDemo() {
-  const [live, setLive] = useState<TempoLiveState>({ activePhase: 'eccentric', phaseElapsedMs: 0 })
+function LiveTempoDemo({
+  fontSize,
+  showLabel = false,
+  liveReadout,
+}: {
+  fontSize?: number
+  showLabel?: boolean
+  liveReadout?: 'countdown' | 'countup'
+}) {
+  const [live, setLive] = useState<TempoLiveState>({
+    activePhase: 'eccentric',
+    phaseElapsedMs: 0,
+    completed: {},
+  })
   useEffect(() => {
     let idx = 0
     let start = Date.now()
+    let completed: TempoLiveState['completed'] = {}
     const id = setInterval(() => {
       const step = LIVE_CYCLE[idx]
       const elapsed = Date.now() - start
-      if (elapsed >= step.ms + 400) {
+      if (elapsed >= step.ms + 300) {
+        // Bank the phase's actual duration, advance; a new rep (wrap to idx 0) resets the row.
+        completed = { ...completed, [step.phase]: elapsed }
         idx = (idx + 1) % LIVE_CYCLE.length
+        if (idx === 0) completed = {}
         start = Date.now()
       }
       setLive({
         activePhase: LIVE_CYCLE[idx].phase,
-        phaseElapsedMs: Math.min(elapsed, step.ms + 400),
+        phaseElapsedMs: Math.min(elapsed, step.ms + 300),
+        completed,
       })
     }, 50)
     return () => clearInterval(id)
   }, [])
-  return <TempoDisplay tempo={[3, 1, 1, 0]} live={live} />
+  return (
+    <TempoDisplay
+      tempo={[3, 1, 2, 2]}
+      live={live}
+      fontSize={fontSize}
+      showLabel={showLabel}
+      showInfo={false}
+      liveReadout={liveReadout}
+    />
+  )
 }
 
-// Self-driving demo cycling Ecc → Pause → Con to show the fill animating.
+// Self-driving demo cycling Ecc → Pause → Con → 2s rest, banking each phase as it completes.
 export const LiveAnimated: Story = {
   render: () => <LiveTempoDemo />,
 }
 
+// Interactive: drag the size (form factor) and toggle the TEMPO label / readout mode live.
+interface PlaygroundArgs {
+  fontSize: number
+  showLabel: boolean
+  liveReadout: 'countdown' | 'countup'
+}
+export const LivePlayground: StoryObj<PlaygroundArgs> = {
+  args: { fontSize: 26, showLabel: true, liveReadout: 'countdown' },
+  argTypes: {
+    fontSize: { control: { type: 'range', min: 12, max: 52, step: 2 }, description: 'Form factor' },
+    showLabel: { control: 'boolean', description: 'Toggle the TEMPO label' },
+    liveReadout: { control: 'inline-radio', options: ['countdown', 'countup'] },
+  },
+  render: (args) => (
+    <LiveTempoDemo
+      fontSize={args.fontSize}
+      showLabel={args.showLabel}
+      liveReadout={args.liveReadout}
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The live tempo is responsive — the whole chip (height, digits, padding, label) ' +
+          'scales with the size. Drag **fontSize** to see any form factor, toggle **showLabel** ' +
+          '(works at every size), and switch the readout mode.',
+      },
+    },
+  },
+}
+
 // Static and live side by side — the same prescription, two modes.
 export const StaticVsLive: Story = {
   render: () => (
@@ -142,3 +153,167 @@ export const StaticVsLive: Story = {
     </View>
   ),
 }
+
+// --- Active tempo conditions (the countdown/fill readout under different states) ----
+
+/** One captioned live-tempo specimen at a larger scale so the fill + readout read clearly. */
+function Condition({
+  caption,
+  ...props
+}: { caption: string } & ComponentProps<typeof TempoDisplay>) {
+  return (
+    <View style={{ gap: 5 }}>
+      <Text style={{ color: '#9CA3AF', fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
+        {caption}
+      </Text>
+      <TempoDisplay showLabel={false} showInfo={false} fontSize={26} {...props} />
+    </View>
+  )
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <View style={{ gap: 12 }}>
+      <Text
+        style={{
+          color: '#E5E7EB',
+          fontFamily: 'Inter, sans-serif',
+          fontSize: 12,
+          fontWeight: '700',
+          letterSpacing: 1,
+          textTransform: 'uppercase',
+        }}
+      >
+        {title}
+      </Text>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 36, alignItems: 'flex-start' }}>
+        {children}
+      </View>
+    </View>
+  )
+}
+
+// tempo [3,1,2,2] — 3s eccentric, 1s bottom pause, 2s concentric, and a 2s rest at the top.
+const TEMPO = [3, 1, 2, 2] as [number, number, number, number]
+
+/**
+ * The active tempo across the states it moves through: pacing (ahead → on-target →
+ * behind), each phase active, the countdown vs count-up readout, and idle. Static
+ * frames plus the self-driving animation, all in the one hyphenated display.
+ */
+export const ActiveTempoConditions: Story = {
+  render: () => (
+    <View style={{ gap: 28, padding: 8 }}>
+      <Section title="Pacing — the number by time-to-target (yellow ahead → green ±0.1 → red slow)">
+        <Condition
+          caption="Ahead · 1.2s → 1.8 left (yellow)"
+          tempo={TEMPO}
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 1200 }}
+        />
+        <Condition
+          caption="On target · 2.9s → 0.1 left (green)"
+          tempo={TEMPO}
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 2900 }}
+        />
+        <Condition
+          caption="Slow · 3.8s → −0.8 over (red)"
+          tempo={TEMPO}
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 3800 }}
+        />
+      </Section>
+
+      <Section title="Through a rep — earlier phases bank their final time, semantically toned">
+        <Condition
+          caption="Eccentric active · nothing banked yet"
+          tempo={TEMPO}
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 1500 }}
+        />
+        <Condition
+          caption="Pause active · ecc banked slow (−0.5, red)"
+          tempo={TEMPO}
+          live={{ activePhase: 'pauseBottom', phaseElapsedMs: 500, completed: { eccentric: 3500 } }}
+        />
+        <Condition
+          caption="Concentric active · ecc on-target, pause fast (+0.2, yellow)"
+          tempo={TEMPO}
+          live={{
+            activePhase: 'concentric',
+            phaseElapsedMs: 1000,
+            completed: { eccentric: 3000, pauseBottom: 800 },
+          }}
+        />
+        <Condition
+          caption="Rest at top (2s) · whole rep banked (green/yellow/red)"
+          tempo={TEMPO}
+          live={{
+            activePhase: 'pauseTop',
+            phaseElapsedMs: 700,
+            completed: { eccentric: 3000, pauseBottom: 800, concentric: 2200 },
+          }}
+        />
+      </Section>
+
+      <Section title="Readout mode — eccentric, 1.0s into a 3s phase">
+        <Condition
+          caption="Countdown → 0.0 · shows 2.0 left"
+          tempo={TEMPO}
+          liveReadout="countdown"
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 1000 }}
+        />
+        <Condition
+          caption="Count-up → target · shows 1.0 elapsed"
+          tempo={TEMPO}
+          liveReadout="countup"
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 1000 }}
+        />
+      </Section>
+
+      <Section title="Form factors — the view scales; the label toggles at any size">
+        <Condition
+          caption="Compact (14) · label off"
+          tempo={TEMPO}
+          fontSize={14}
+          live={{ activePhase: 'concentric', phaseElapsedMs: 900, completed: { eccentric: 3000, pauseBottom: 1000 } }}
+        />
+        <Condition
+          caption="Default (22) · label on"
+          tempo={TEMPO}
+          fontSize={22}
+          showLabel
+          live={{ activePhase: 'concentric', phaseElapsedMs: 900, completed: { eccentric: 3000, pauseBottom: 1000 } }}
+        />
+        <Condition
+          caption="Wall (34) · label on"
+          tempo={TEMPO}
+          fontSize={34}
+          showLabel
+          live={{ activePhase: 'concentric', phaseElapsedMs: 900, completed: { eccentric: 3000, pauseBottom: 1000 } }}
+        />
+      </Section>
+
+      <Section title="Idle & animated">
+        <Condition
+          caption="Idle · no active phase (static)"
+          tempo={TEMPO}
+          live={{ activePhase: null, phaseElapsedMs: 0 }}
+        />
+        <View style={{ gap: 5 }}>
+          <Text style={{ color: '#9CA3AF', fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
+            Animated · Ecc → Pause → Con → 2s rest, banking each phase
+          </Text>
+          <LiveTempoDemo />
+        </View>
+      </Section>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The active tempo under different conditions — pacing (ahead → on-target → behind), ' +
+          'each phase active, the countdown vs count-up readout, and idle — all in the one ' +
+          'hyphenated display with the vertical phase-progress fill.',
+      },
+    },
+  },
+}

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

@@ -22,14 +22,9 @@ describe('TempoDisplay', () => {
     expect(tempoValue.children.length).toBeGreaterThan(1)
   })
 
-  it('renders mono variant', () => {
-    render(<TempoDisplay tempo={[3, 1, 1, 0]} colored={false} />)
-    expect(screen.getByText('3-1-1-0')).toBeInTheDocument()
-  })
-
   it('renders order: eccentric-pauseBottom-concentric-pauseTop', () => {
-    render(<TempoDisplay tempo={[4, 3, 2, 1]} colored={false} />)
-    expect(screen.getByText('4-3-2-1')).toBeInTheDocument()
+    render(<TempoDisplay tempo={[4, 3, 2, 1]} />)
+    expect(screen.getByTestId('tempo-value')).toHaveTextContent('4-3-2-1')
   })
 
   it('has correct accessibility label', () => {
@@ -78,6 +73,11 @@ describe('TempoDisplay', () => {
       render(<TempoDisplay tempo={[3, 1, 1, 0]} size="md" />)
       expect(screen.getByTestId('tempo-value')).toBeInTheDocument()
     })
+
+    it('overrides the digit font size via fontSize', () => {
+      render(<TempoDisplay tempo={[3, 1, 1, 0]} fontSize={32} showLabel={false} />)
+      expect(screen.getByText('3')).toHaveStyle({ fontSize: 32 })
+    })
   })
 
   describe('live phase-fill', () => {
@@ -86,15 +86,30 @@ describe('TempoDisplay', () => {
       expect(screen.queryByTestId('tempo-live-active')).not.toBeInTheDocument()
     })
 
-    it('renders an active fill overlay for the in-progress phase when live', () => {
+    it('renders the active phase as a live countdown readout with a fill', () => {
       render(
         <TempoDisplay
           tempo={[3, 1, 1, 0]}
-          live={{ activePhase: 'eccentric', phaseElapsedMs: 1500 }}
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 1000 }}
         />
       )
       expect(screen.getByTestId('tempo-live-active')).toBeInTheDocument()
-      expect(screen.getByText('3')).toBeInTheDocument()
+      // eccentric target 3s, 1s in → 2.0s remaining (countdown is the default)
+      expect(screen.getByText('2.0')).toBeInTheDocument()
+      // the static eccentric digit is replaced by the readout
+      expect(screen.queryByText('3')).not.toBeInTheDocument()
+    })
+
+    it('counts elapsed up when liveReadout is countup', () => {
+      render(
+        <TempoDisplay
+          tempo={[4, 1, 2, 3]}
+          liveReadout="countup"
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 1500 }}
+        />
+      )
+      // 1.5s elapsed of the 4s eccentric → 1.5 counting up (unique among the target readouts)
+      expect(screen.getByText('1.5')).toBeInTheDocument()
     })
 
     it('marks no phase active when idle (activePhase null)', () => {
@@ -102,16 +117,46 @@ describe('TempoDisplay', () => {
       expect(screen.queryByTestId('tempo-live-active')).not.toBeInTheDocument()
     })
 
-    it('still renders all four phase digits in live mode', () => {
+    it('locks the phases completed earlier in the rep, and resets on the first phase', () => {
+      // Concentric active (3rd phase) → eccentric + pauseBottom are locked done.
+      const mid = render(
+        <TempoDisplay tempo={[3, 1, 2, 1]} live={{ activePhase: 'concentric', phaseElapsedMs: 800 }} />
+      )
+      expect(mid.getAllByTestId('tempo-live-done')).toHaveLength(2)
+      // Back to the first phase (next rep) → nothing is locked yet.
+      mid.rerender(
+        <TempoDisplay tempo={[3, 1, 2, 1]} live={{ activePhase: 'eccentric', phaseElapsedMs: 200 }} />
+      )
+      expect(mid.queryByTestId('tempo-live-done')).not.toBeInTheDocument()
+    })
+
+    it('colours the TEMPO label live-muted while live', () => {
+      const { getByText, rerender } = render(<TempoDisplay tempo={[3, 1, 1, 0]} />)
+      const restColor = getByText('TEMPO').style.color
+      rerender(<TempoDisplay tempo={[3, 1, 1, 0]} live={{ activePhase: 'eccentric', phaseElapsedMs: 500 }} />)
+      expect(getByText('TEMPO').style.color).not.toBe(restColor)
+    })
+
+    it('shows upcoming phases as their prescribed time and the active as the live readout', () => {
+      render(
+        <TempoDisplay tempo={[5, 3, 2, 1]} live={{ activePhase: 'eccentric', phaseElapsedMs: 1000 }} />
+      )
+      // active eccentric: 5s target, 1s in → 4.0 remaining
+      expect(screen.getByText('4.0')).toBeInTheDocument()
+      // upcoming pauseBottom shows its prescribed 3s as 3.0 (no bare integer digits in live mode)
+      expect(screen.getByText('3.0')).toBeInTheDocument()
+      expect(screen.queryByText('5')).not.toBeInTheDocument()
+    })
+
+    it('freezes a completed phase at its actual final time, not the target', () => {
       render(
         <TempoDisplay
-          tempo={[4, 3, 2, 1]}
-          live={{ activePhase: 'concentric', phaseElapsedMs: 500 }}
+          tempo={[3, 1, 2, 2]}
+          live={{ activePhase: 'concentric', phaseElapsedMs: 500, completed: { eccentric: 3400 } }}
         />
       )
-      for (const digit of ['4', '3', '2', '1']) {
-        expect(screen.getByText(digit)).toBeInTheDocument()
-      }
+      // eccentric ran 3.4s vs its 3s target → countdown froze at 3.0 − 3.4 = −0.4, not the target
+      expect(screen.getByText('-0.4')).toBeInTheDocument()
     })
   })