@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -4,6 +4,8 @@ import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-n
 import { cn } from '../../../utils/cn'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
 
 const sem = getSemanticColors('dark')
 
@@ -14,11 +16,11 @@ const PROJECTION_LINE_COLOR = resolveColor('text-tertiary')
 const STATUS_SUCCESS = sem['status-success']
 const STATUS_ERROR = sem['status-error']
 const STATUS_WARNING = sem['status-warning']
-const GRID_LINE = 'rgba(255,255,255,0.06)'
-const SUCCESS_PILL_BG = 'rgba(46,213,115,0.10)'
-const SUCCESS_PILL_BORDER = 'rgba(46,213,115,0.20)'
-const ERROR_PILL_BG = 'rgba(209,67,67,0.10)'
-const ERROR_PILL_BORDER = 'rgba(209,67,67,0.20)'
+const GRID_LINE = alpha(primitiveColors.white, 0.06)
+const SUCCESS_PILL_BG = alpha(STATUS_SUCCESS, 0.1)
+const SUCCESS_PILL_BORDER = alpha(STATUS_SUCCESS, 0.2)
+const ERROR_PILL_BG = alpha(STATUS_ERROR, 0.1)
+const ERROR_PILL_BORDER = alpha(STATUS_ERROR, 0.2)
 
 /** Left gutter reserved for y-axis value labels. */
 const PLOT_LEFT = 26
@@ -94,7 +96,7 @@ function buildGeometry(
   projection: StrengthTrendDataPoint[],
   boundaries: StrengthTrendChartMesoBoundary[],
   width: number,
-  height: number,
+  height: number
 ): Geometry {
   const values = [...data, ...projection].map((p) => p.e1rm)
   // Empty state keys off actual data only: a projection with no measured
@@ -128,10 +130,8 @@ function buildGeometry(
   const domainMax = yMax + padV
 
   const innerW = Math.max(1, width - PLOT_LEFT)
-  const toX = (time: number) =>
-    PLOT_LEFT + ((time - tMin) / (tMax - tMin)) * innerW
-  const toY = (value: number) =>
-    height - ((value - domainMin) / (domainMax - domainMin)) * height
+  const toX = (time: number) => PLOT_LEFT + ((time - tMin) / (tMax - tMin)) * innerW
+  const toY = (value: number) => height - ((value - domainMin) / (domainMax - domainMin)) * height
 
   const project = (points: StrengthTrendDataPoint[]): Coord[] =>
     points.map((point, index) => ({
@@ -141,9 +141,7 @@ function buildGeometry(
       index,
     }))
 
-  const tickValues = Array.from(
-    new Set([yMax, (yMin + yMax) / 2, yMin].map((v) => Math.round(v))),
-  )
+  const tickValues = Array.from(new Set([yMax, (yMin + yMax) / 2, yMin].map((v) => Math.round(v))))
   const gridLines = tickValues.map((v) => ({ y: toY(v), label: formatValue(v) }))
 
   return {
@@ -162,7 +160,7 @@ function buildGeometry(
 
 function computeTrend(
   data: StrengthTrendDataPoint[],
-  boundaries: StrengthTrendChartMesoBoundary[],
+  boundaries: StrengthTrendChartMesoBoundary[]
 ): { percent: number; positive: boolean } {
   if (data.length < 2) return { percent: 0, positive: true }
   let series = data
@@ -267,12 +265,9 @@ export function StrengthTrendChart({
 }: StrengthTrendChartProps) {
   const geometry = useMemo(
     () => buildGeometry(data, projection, mesoBoundaries, width, height),
-    [data, projection, mesoBoundaries, width, height],
-  )
-  const trend = useMemo(
-    () => computeTrend(data, mesoBoundaries),
-    [data, mesoBoundaries],
+    [data, projection, mesoBoundaries, width, height]
   )
+  const trend = useMemo(() => computeTrend(data, mesoBoundaries), [data, mesoBoundaries])
 
   const [reveal] = useState(() => new Animated.Value(animateOnMount ? 0 : 1))
   const [selected, setSelected] = useState<number | null>(null)
@@ -314,7 +309,10 @@ export function StrengthTrendChart({
             justifyContent: 'center',
           }}
         >
-          <Text className="text-text-tertiary" style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}>
+          <Text
+            className="text-text-tertiary"
+            style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}
+          >
             No strength data yet
           </Text>
         </View>
@@ -327,16 +325,10 @@ export function StrengthTrendChart({
     outputRange: [0, width],
   })
 
-  const selectedCoord =
-    selected != null ? geometry.actual[selected] : undefined
+  const selectedCoord = selected != null ? geometry.actual[selected] : undefined
 
   return (
-    <View
-      style={{ width }}
-      className={cn(className)}
-      testID="strength-trend-chart"
-      {...props}
-    >
+    <View style={{ width }} className={cn(className)} testID="strength-trend-chart" {...props}>
       <View style={{ width, height, position: 'relative' }}>
         {/* Labelled, non-interactive chart canvas (grid + lines + markers). */}
         <View
@@ -389,7 +381,7 @@ export function StrengthTrendChart({
                 height,
                 borderLeftWidth: 1,
                 borderStyle: 'dashed',
-                borderLeftColor: 'rgba(255,255,255,0.10)',
+                borderLeftColor: alpha(primitiveColors.white, 0.1),
               }}
             />
           ))}
@@ -438,7 +430,7 @@ export function StrengthTrendChart({
               >
                 ★
               </Text>
-            ) : null,
+            ) : null
           )}
         </View>
 
@@ -482,7 +474,7 @@ export function StrengthTrendChart({
               position: 'absolute',
               left: Math.max(
                 0,
-                Math.min(width - TOOLTIP_WIDTH, selectedCoord.x - TOOLTIP_WIDTH / 2),
+                Math.min(width - TOOLTIP_WIDTH, selectedCoord.x - TOOLTIP_WIDTH / 2)
               ),
               top: Math.max(0, selectedCoord.y - 52),
               maxWidth: TOOLTIP_WIDTH,
@@ -529,7 +521,7 @@ export function StrengthTrendChart({
                     ? '+'
                     : '-'
                 }${Math.abs(
-                  selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm,
+                  selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm
                 ).toFixed(1)} ${unit}`}
               </Text>
             )}
@@ -598,8 +590,13 @@ export function StrengthTrendChart({
         testID="strength-trend-chart-legend"
       >
         <View className="flex-row items-center" style={{ gap: 5 }}>
-          <View style={{ width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY }} />
-          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
+          <View
+            style={{ width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY }}
+          />
+          <Text
+            className="text-text-secondary"
+            style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}
+          >
             Actual
           </Text>
         </View>
@@ -613,13 +610,19 @@ export function StrengthTrendChart({
               borderTopColor: PROJECTION_LINE_COLOR,
             }}
           />
-          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
+          <Text
+            className="text-text-secondary"
+            style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}
+          >
             Projected
           </Text>
         </View>
         <View className="flex-row items-center" style={{ gap: 5 }}>
           <Text style={{ fontSize: 12, color: STATUS_WARNING }}>★</Text>
-          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
+          <Text
+            className="text-text-secondary"
+            style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}
+          >
             PR
           </Text>
         </View>

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

@@ -1,20 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
 import { SupersetWrapper } from './SupersetWrapper'
 import { ExerciseCard } from './ExerciseCard'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const t = getSemanticColors('dark')
+import { Card } from '../../ui/card'
+import { Typography } from '../Typography'
+import { Surface } from '../../ui/surface'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const meta: Meta<typeof SupersetWrapper> = {
-  title: 'Workout/SupersetWrapper',
+  title: 'Custom/Workout/SupersetWrapper',
   component: SupersetWrapper,
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <View style={{ maxWidth: 400, padding: 16, backgroundColor: t['background-base'] }}>
+      <Surface level="background" style={{ maxWidth: 400, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }
@@ -22,28 +22,21 @@ const meta: Meta<typeof SupersetWrapper> = {
 export default meta
 type Story = StoryObj<typeof SupersetWrapper>
 
+/** Stand-in for a real exercise row: a filled Card on the wrapper's own plane. */
+function DemoExercise({ name }: { name: string }) {
+  return (
+    <Card variant="filled" elevation={1} className="p-3">
+      <Typography variant="body2">{name}</Typography>
+    </Card>
+  )
+}
+
 export const Default: Story = {
   args: {
     children: (
       <>
-        <View
-          style={{
-            padding: 12,
-            backgroundColor: t['surface-raised'],
-            borderRadius: 8,
-          }}
-        >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A</Text>
-        </View>
-        <View
-          style={{
-            padding: 12,
-            backgroundColor: t['surface-raised'],
-            borderRadius: 8,
-          }}
-        >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise B</Text>
-        </View>
+        <DemoExercise name="Exercise A" />
+        <DemoExercise name="Exercise B" />
       </>
     ),
   },
@@ -54,24 +47,8 @@ export const CustomLabel: Story = {
     label: 'A1/A2',
     children: (
       <>
-        <View
-          style={{
-            padding: 12,
-            backgroundColor: t['surface-raised'],
-            borderRadius: 8,
-          }}
-        >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A1</Text>
-        </View>
-        <View
-          style={{
-            padding: 12,
-            backgroundColor: t['surface-raised'],
-            borderRadius: 8,
-          }}
-        >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A2</Text>
-        </View>
+        <DemoExercise name="Exercise A1" />
+        <DemoExercise name="Exercise A2" />
       </>
     ),
   },
@@ -79,39 +56,25 @@ export const CustomLabel: Story = {
 
 export const CustomColor: Story = {
   args: {
-    color: '#22C55E',
+    color: resolveColor('status-success'),
     children: (
       <>
-        <View
-          style={{
-            padding: 12,
-            backgroundColor: t['surface-raised'],
-            borderRadius: 8,
-          }}
-        >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A</Text>
-        </View>
-        <View
-          style={{
-            padding: 12,
-            backgroundColor: t['surface-raised'],
-            borderRadius: 8,
-          }}
-        >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise B</Text>
-        </View>
+        <DemoExercise name="Exercise A" />
+        <DemoExercise name="Exercise B" />
       </>
     ),
   },
 }
 
+const supersetColor = resolveColor('brand-primary')
+
 const exerciseA = {
   name: 'Bench Press',
   state: 'collapsed' as const,
   onToggle: () => {},
   summary: { sets: 3, reps: 8, weight: 185, unit: 'lbs' as const },
   supersetPosition: 'first' as const,
-  supersetColor: '#FF7900',
+  supersetColor,
 }
 
 const exerciseB = {
@@ -120,7 +83,7 @@ const exerciseB = {
   onToggle: () => {},
   summary: { sets: 3, reps: 8, weight: 155, unit: 'lbs' as const },
   supersetPosition: 'last' as const,
-  supersetColor: '#FF7900',
+  supersetColor,
 }
 
 export const WithExerciseCards: Story = {

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

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { View, Text } from 'react-native'
 import { SupersetWrapper } from './SupersetWrapper'
+import { resolveColor } from '../../../theme/resolve-color'
 
 describe('SupersetWrapper', () => {
   describe('label', () => {
@@ -10,7 +11,7 @@ describe('SupersetWrapper', () => {
       render(
         <SupersetWrapper>
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       expect(screen.getByTestId('superset-label')).toHaveTextContent('SS')
     })
@@ -19,31 +20,32 @@ describe('SupersetWrapper', () => {
       render(
         <SupersetWrapper label="A1/A2">
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       expect(screen.getByTestId('superset-label')).toHaveTextContent('A1/A2')
     })
   })
 
   describe('color', () => {
-    it('applies default color #FF7900 to border and label background', () => {
+    it('defaults border and label background to the brand-primary token', () => {
       render(
         <SupersetWrapper>
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
+      const brand = resolveColor('brand-primary')
       const wrapper = screen.getByTestId('superset-wrapper')
-      expect(wrapper).toHaveStyle({ borderLeftColor: '#FF7900' })
+      expect(wrapper).toHaveStyle({ borderLeftColor: brand })
 
       const label = screen.getByTestId('superset-label')
-      expect(label).toHaveStyle({ backgroundColor: '#FF7900' })
+      expect(label).toHaveStyle({ backgroundColor: brand })
     })
 
     it('applies custom color to border and label background', () => {
       render(
         <SupersetWrapper color="#22C55E">
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       const wrapper = screen.getByTestId('superset-wrapper')
       expect(wrapper).toHaveStyle({ borderLeftColor: '#22C55E' })
@@ -59,7 +61,7 @@ describe('SupersetWrapper', () => {
         <SupersetWrapper>
           <Text testID="child-1">Exercise A</Text>
           <Text testID="child-2">Exercise B</Text>
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       expect(screen.getByTestId('child-1')).toHaveTextContent('Exercise A')
       expect(screen.getByTestId('child-2')).toHaveTextContent('Exercise B')
@@ -71,7 +73,7 @@ describe('SupersetWrapper', () => {
       render(
         <SupersetWrapper>
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       expect(screen.getByRole('group')).toBeInTheDocument()
     })
@@ -80,7 +82,7 @@ describe('SupersetWrapper', () => {
       render(
         <SupersetWrapper>
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       expect(screen.getByLabelText('Superset: SS')).toBeInTheDocument()
     })
@@ -89,7 +91,7 @@ describe('SupersetWrapper', () => {
       render(
         <SupersetWrapper label="A1/A2">
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       expect(screen.getByLabelText('Superset: A1/A2')).toBeInTheDocument()
     })
@@ -99,7 +101,7 @@ describe('SupersetWrapper', () => {
         <SupersetWrapper>
           <Text>Exercise A</Text>
           <Text>Exercise B</Text>
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -111,7 +113,7 @@ describe('SupersetWrapper', () => {
       render(
         <SupersetWrapper>
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       const label = screen.getByTestId('superset-label')
       expect(label).toHaveStyle({ position: 'absolute' })
@@ -121,7 +123,7 @@ describe('SupersetWrapper', () => {
       render(
         <SupersetWrapper>
           <View />
-        </SupersetWrapper>,
+        </SupersetWrapper>
       )
       const label = screen.getByTestId('superset-label')
       expect(label).toHaveStyle({ top: '-1px', left: '-3px' })

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

@@ -1,31 +1,27 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import React from 'react'
-import { View, Text } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { View } from 'react-native'
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export interface SupersetWrapperProps {
   label?: string
+  /** Rail and label-chip colour. Defaults to the `brand-primary` token. */
   color?: string
   children: React.ReactNode
 }
 
-const DEFAULTS = {
-  label: 'SS',
-  color: getSemanticColors('dark')['brand-primary'],
-  bgBase: getSemanticColors('dark')['background-base'],
-} as const
+const DEFAULT_LABEL = 'SS'
+
+export function SupersetWrapper({ label = DEFAULT_LABEL, color, children }: SupersetWrapperProps) {
+  const rail = color ?? resolveColor('brand-primary')
 
-export function SupersetWrapper({
-  label = DEFAULTS.label,
-  color = DEFAULTS.color,
-  children,
-}: SupersetWrapperProps) {
   return (
     <View
       style={{
         position: 'relative',
         borderLeftWidth: 3,
-        borderLeftColor: color,
+        borderLeftColor: rail,
         paddingLeft: 8,
         marginHorizontal: 12,
         marginBottom: 8,
@@ -35,26 +31,26 @@ export function SupersetWrapper({
       accessibilityLabel={`Superset: ${label}`}
       testID="superset-wrapper"
     >
-      <Text
+      {/* `microLabel` is the 10px uppercase micro-label form and carries its own
+          face, weight and tracking. The chip was 9px/700 with a hand-set 0.5px
+          tracking; 9px is off the type scale (TOKENS.md §4), so it rounds up. */}
+      <Typography
+        variant="microLabel"
+        color="inverse"
         style={{
           position: 'absolute',
           top: -1,
           left: -3,
-          fontSize: 9,
-          fontFamily: 'Inter, sans-serif',
-          fontWeight: '700',
-          backgroundColor: color,
-          color: DEFAULTS.bgBase,
+          backgroundColor: rail,
           paddingVertical: 2,
           paddingHorizontal: 6,
           borderBottomRightRadius: 4,
-          letterSpacing: 0.5,
           zIndex: 2,
         }}
         testID="superset-label"
       >
         {label}
-      </Text>
+      </Typography>
       <View style={{ gap: 2 }} testID="superset-children">
         {children}
       </View>

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

@@ -3,10 +3,11 @@ import type { ComponentProps } from 'react'
 import { useEffect, useState } from 'react'
 import { View, Text } from 'react-native'
 import { TempoDisplay, type TempoLivePhase, type TempoLiveState } from './TempoDisplay'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 // tempo = [eccentric, pauseBottom, concentric, pauseTop]
 const meta: Meta<typeof TempoDisplay> = {
-  title: 'Workout/TempoDisplay',
+  title: 'Custom/Workout/TempoDisplay',
   component: TempoDisplay,
   tags: ['autodocs'],
   parameters: {
@@ -14,9 +15,9 @@ const meta: Meta<typeof TempoDisplay> = {
       description: {
         component:
           '**Molecule.** The eccentric/pause/concentric/pause tempo display. Composes ' +
-          '[MetricCell](?path=/docs/workout-metriccell--docs) ' +
+          '[MetricCell](?path=/docs/custom-workout-metriccell--docs) ' +
           '(shared value/separator cell). Used-by ↑ ' +
-          '[ExerciseHeading](?path=/docs/workout-exerciseheading--docs) (`showLabel={false}`).',
+          '[ExerciseHeading](?path=/docs/custom-workout-exerciseheading--docs) (`showLabel={false}`).',
       },
     },
   },
@@ -26,7 +27,10 @@ const meta: Meta<typeof TempoDisplay> = {
       description: 'Tempo values [eccentric, pauseBottom, concentric, pauseTop] in seconds',
     },
     size: { control: 'select', options: ['sm', 'md'], description: 'Size variant' },
-    fontSize: { control: { type: 'range', min: 9, max: 48, step: 1 }, description: 'Digit size (overrides `size`)' },
+    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: {
@@ -163,7 +167,7 @@ function Condition({
 }: { caption: string } & ComponentProps<typeof TempoDisplay>) {
   return (
     <View style={{ gap: 5 }}>
-      <Text style={{ color: '#9CA3AF', fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
+      <Text style={{ color: greyRamp[400], fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
         {caption}
       </Text>
       <TempoDisplay showLabel={false} showInfo={false} fontSize={26} {...props} />
@@ -176,7 +180,7 @@ function Section({ title, children }: { title: string; children: React.ReactNode
     <View style={{ gap: 12 }}>
       <Text
         style={{
-          color: '#E5E7EB',
+          color: greyRamp[100],
           fontFamily: 'Inter, sans-serif',
           fontSize: 12,
           fontWeight: '700',
@@ -273,21 +277,33 @@ export const ActiveTempoConditions: Story = {
           caption="Compact (14) · label off"
           tempo={TEMPO}
           fontSize={14}
-          live={{ activePhase: 'concentric', phaseElapsedMs: 900, completed: { eccentric: 3000, pauseBottom: 1000 } }}
+          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 } }}
+          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 } }}
+          live={{
+            activePhase: 'concentric',
+            phaseElapsedMs: 900,
+            completed: { eccentric: 3000, pauseBottom: 1000 },
+          }}
         />
       </Section>
 
@@ -298,7 +314,7 @@ export const ActiveTempoConditions: Story = {
           live={{ activePhase: null, phaseElapsedMs: 0 }}
         />
         <View style={{ gap: 5 }}>
-          <Text style={{ color: '#9CA3AF', fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
+          <Text style={{ color: greyRamp[400], fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
             Animated · Ecc → Pause → Con → 2s rest, banking each phase
           </Text>
           <LiveTempoDemo />

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

@@ -120,12 +120,18 @@ describe('TempoDisplay', () => {
     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 }} />
+        <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 }} />
+        <TempoDisplay
+          tempo={[3, 1, 2, 1]}
+          live={{ activePhase: 'eccentric', phaseElapsedMs: 200 }}
+        />
       )
       expect(mid.queryByTestId('tempo-live-done')).not.toBeInTheDocument()
     })
@@ -133,13 +139,21 @@ describe('TempoDisplay', () => {
     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 }} />)
+      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 }} />
+        <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()