@titan-design/react-ui 0.2.7 → 0.3.0

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

@@ -0,0 +1,422 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo, useState } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { MesoProgressBar, type Meso, type MesoStatus } from './MesoProgressBar'
+import { MesoCard, type MesoVolumeHeatmapEntry } from './MesoCard'
+import { type WeekRowProps, type WeekRowWorkout } from './WeekRow'
+import { WorkoutCard, type WorkoutStatus, type WorkoutMuscleGroup } from './WorkoutCard'
+import { type WorkoutPillStatus } from './WorkoutPill'
+import { type ExerciseCardProps } from './ExerciseCard'
+
+const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
+const BORDER_DEFAULT = 'var(--color-border-default)'
+const BRAND_PRIMARY = '#FF7900'
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+const PAGE_BG = 'var(--color-background-base)'
+
+/** A single workout within a planned week, plus its exercise breakdown. */
+export interface PlanWorkout {
+  /** Stable identifier used for drill-down selection. */
+  id: string
+  name: string
+  date: string
+  duration?: string
+  status: WorkoutStatus
+  muscleGroups: WorkoutMuscleGroup[]
+  totalSets: number
+  totalVolume?: number
+  unit: 'lbs' | 'kg'
+  /** Exercises revealed when the workout is opened. */
+  exercises: ExerciseCardProps[]
+}
+
+/** A training week inside a mesocycle. */
+export interface PlanWeek {
+  /** 1-based week index within the mesocycle. */
+  weekNumber: number
+  /** Planned intensity for the week, 0-1. */
+  intensityLevel: number
+  /** Optional MRV/overexertion threshold, 0-1. */
+  intensityThreshold?: number
+  isDeload?: boolean
+  isCurrent?: boolean
+  workouts: PlanWorkout[]
+}
+
+/** A mesocycle: the top level of the drill-down. */
+export interface PlanMeso {
+  id: string
+  name: string
+  goal: string
+  split: string
+  weekRange: string
+  weekCount: number
+  currentWeek?: number
+  status: MesoStatus
+  volumeHeatmap?: MesoVolumeHeatmapEntry[]
+  weeks: PlanWeek[]
+}
+
+/** Current depth of the meso -> week -> workout drill-down. */
+export type ProgramNavLevel = 'meso' | 'week' | 'workout'
+
+/** The navigation cursor within the active mesocycle. */
+export interface ProgramSelection {
+  weekNumber: number | null
+  workoutId: string | null
+}
+
+/** One tappable step in the breadcrumb trail. */
+export interface ProgramBreadcrumb {
+  key: string
+  label: string
+  level: ProgramNavLevel
+}
+
+export interface ProgramPlanningPageProps extends ViewProps {
+  /** Page heading. */
+  title?: string
+  /** Mesocycles that make up the program. */
+  mesos: PlanMeso[]
+  className?: string
+}
+
+/** Map a workout's lifecycle status onto a WorkoutPill status. */
+const WORKOUT_PILL_STATUS: Record<WorkoutStatus, WorkoutPillStatus> = {
+  completed: 'completed',
+  today: 'current',
+  upcoming: 'upcoming',
+}
+
+/** Derive the current drill-down level from the selection cursor (pure). */
+export function deriveNavLevel(selection: ProgramSelection): ProgramNavLevel {
+  if (selection.workoutId != null) return 'workout'
+  if (selection.weekNumber != null) return 'week'
+  return 'meso'
+}
+
+/** Project the mesocycles onto MesoProgressBar segment data (pure). */
+export function toProgressBarMesos(mesos: PlanMeso[]): Meso[] {
+  return mesos.map(({ id, name, weekCount, status, currentWeek }) => ({
+    id,
+    name,
+    weekCount,
+    status,
+    currentWeek,
+  }))
+}
+
+/** Look up a meso by id, or null. */
+export function findMeso(mesos: PlanMeso[], id: string | null): PlanMeso | null {
+  if (id == null) return null
+  return mesos.find((meso) => meso.id === id) ?? null
+}
+
+/** Look up a week within a meso, or null. */
+export function findWeek(meso: PlanMeso | null, weekNumber: number | null): PlanWeek | null {
+  if (meso == null || weekNumber == null) return null
+  return meso.weeks.find((week) => week.weekNumber === weekNumber) ?? null
+}
+
+/** Look up a workout within a week, or null. */
+export function findWorkout(week: PlanWeek | null, workoutId: string | null): PlanWorkout | null {
+  if (week == null || workoutId == null) return null
+  return week.workouts.find((workout) => workout.id === workoutId) ?? null
+}
+
+/** Build the breadcrumb trail for the active drill path (pure). */
+export function buildBreadcrumbs(
+  meso: PlanMeso,
+  weekNumber: number | null,
+  workout: PlanWorkout | null
+): ProgramBreadcrumb[] {
+  const crumbs: ProgramBreadcrumb[] = [{ key: 'meso', label: meso.name, level: 'meso' }]
+  if (weekNumber != null) {
+    crumbs.push({ key: 'week', label: `Week ${weekNumber}`, level: 'week' })
+  }
+  if (workout != null) {
+    crumbs.push({ key: 'workout', label: workout.name, level: 'workout' })
+  }
+  return crumbs
+}
+
+interface BreadcrumbsProps {
+  crumbs: ProgramBreadcrumb[]
+  onNavigate: (level: ProgramNavLevel) => void
+}
+
+function Breadcrumbs({ crumbs, onNavigate }: BreadcrumbsProps) {
+  return (
+    <View
+      className="flex-row items-center flex-wrap"
+      style={{ gap: 4 }}
+      testID="program-planning-page-breadcrumbs"
+    >
+      {crumbs.map((crumb, index) => {
+        const isLast = index === crumbs.length - 1
+        return (
+          <View key={crumb.key} className="flex-row items-center" style={{ gap: 4 }}>
+            {index > 0 && <Text style={{ fontSize: 12, color: TEXT_TERTIARY }}>{'›'}</Text>}
+            <Pressable
+              onPress={() => onNavigate(crumb.level)}
+              disabled={isLast}
+              accessibilityRole="button"
+              testID={`program-planning-page-crumb-${crumb.key}`}
+            >
+              <Text
+                style={{
+                  fontSize: 12,
+                  fontFamily: 'Inter, sans-serif',
+                  fontWeight: isLast ? '700' : '500',
+                  color: isLast ? TEXT_PRIMARY : BRAND_PRIMARY,
+                }}
+              >
+                {crumb.label}
+              </Text>
+            </Pressable>
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+/** Project a plan week onto WeekRow props, wiring pill taps to week selection. */
+function toWeekRow(
+  week: PlanWeek,
+  meso: PlanMeso,
+  onSelectWeek: (weekNumber: number) => void
+): WeekRowProps {
+  const workouts: WeekRowWorkout[] = week.workouts.map((workout) => ({
+    name: workout.name,
+    status: WORKOUT_PILL_STATUS[workout.status],
+    onPress: () => onSelectWeek(week.weekNumber),
+  }))
+  return {
+    weekNumber: week.weekNumber,
+    totalWeeks: meso.weekCount,
+    workouts,
+    intensityLevel: week.intensityLevel,
+    intensityThreshold: week.intensityThreshold,
+    isCurrent: week.isCurrent ?? week.weekNumber === meso.currentWeek,
+    isDeload: week.isDeload,
+  }
+}
+
+interface MesoLevelProps {
+  mesos: PlanMeso[]
+  activeMesoId: string | null
+  onSelectMeso: (id: string) => void
+  onSelectWeek: (weekNumber: number) => void
+}
+
+function MesoLevel({ mesos, activeMesoId, onSelectMeso, onSelectWeek }: MesoLevelProps) {
+  return (
+    <View style={{ gap: 12 }} testID="program-planning-page-meso-level">
+      {mesos.map((meso) => {
+        const expanded = meso.id === activeMesoId
+        return (
+          <MesoCard
+            key={meso.id}
+            name={meso.name}
+            goal={meso.goal}
+            split={meso.split}
+            weekRange={meso.weekRange}
+            currentWeek={meso.currentWeek}
+            totalWeeks={meso.weekCount}
+            weeks={expanded ? meso.weeks.map((week) => toWeekRow(week, meso, onSelectWeek)) : []}
+            volumeHeatmap={meso.volumeHeatmap}
+            expanded={expanded}
+            onToggle={() => onSelectMeso(meso.id)}
+            highlighted={expanded}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+interface WeekLevelProps {
+  week: PlanWeek
+  onSelectWorkout: (id: string) => void
+}
+
+function WeekLevel({ week, onSelectWorkout }: WeekLevelProps) {
+  return (
+    <View style={{ gap: 10 }} testID="program-planning-page-week-level">
+      {week.workouts.map((workout) => (
+        <WorkoutCard
+          key={workout.id}
+          name={workout.name}
+          date={workout.date}
+          duration={workout.duration}
+          status={workout.status}
+          muscleGroups={workout.muscleGroups}
+          totalSets={workout.totalSets}
+          totalVolume={workout.totalVolume}
+          unit={workout.unit}
+          exercises={workout.exercises}
+          expanded={false}
+          onToggle={() => onSelectWorkout(workout.id)}
+        />
+      ))}
+    </View>
+  )
+}
+
+interface WorkoutLevelProps {
+  workout: PlanWorkout
+  expandedExercise: number | null
+  onToggleExercise: (index: number) => void
+}
+
+function WorkoutLevel({ workout, expandedExercise, onToggleExercise }: WorkoutLevelProps) {
+  const exercises = workout.exercises.map((exercise, index) => ({
+    ...exercise,
+    state:
+      exercise.state === 'upcoming'
+        ? exercise.state
+        : ((index === expandedExercise ? 'expanded' : 'collapsed') as ExerciseCardProps['state']),
+    onToggle: () => onToggleExercise(index),
+  }))
+  return (
+    <View testID="program-planning-page-workout-level">
+      <WorkoutCard
+        name={workout.name}
+        date={workout.date}
+        duration={workout.duration}
+        status={workout.status}
+        muscleGroups={workout.muscleGroups}
+        totalSets={workout.totalSets}
+        totalVolume={workout.totalVolume}
+        unit={workout.unit}
+        exercises={exercises}
+        expanded
+        onToggle={() => undefined}
+      />
+    </View>
+  )
+}
+
+/**
+ * ProgramPlanningPage — a meso -> week -> workout drill-down over an entire
+ * training program. A `MesoProgressBar` pins the mesocycle timeline to the top;
+ * the body swaps between three levels: expandable `MesoCard`s (with inline
+ * `WeekRow`s), a week's `WorkoutCard` list, and a single opened `WorkoutCard`
+ * with inline `ExerciseCard` expansion. A breadcrumb trail tracks and rewinds
+ * the drill path. Selection is page-level state; children keep their own styles.
+ *
+ * @example
+ * <ProgramPlanningPage mesos={mesos} />
+ */
+export function ProgramPlanningPage({
+  title = 'Program Plan',
+  mesos,
+  className,
+  ...props
+}: ProgramPlanningPageProps) {
+  const [activeMesoId, setActiveMesoId] = useState<string | null>(mesos[0]?.id ?? null)
+  const [selectedWeek, setSelectedWeek] = useState<number | null>(null)
+  const [selectedWorkoutId, setSelectedWorkoutId] = useState<string | null>(null)
+  const [expandedExercise, setExpandedExercise] = useState<number | null>(null)
+
+  const progressMesos = useMemo(() => toProgressBarMesos(mesos), [mesos])
+  const activeMeso = findMeso(mesos, activeMesoId)
+  const level = deriveNavLevel({ weekNumber: selectedWeek, workoutId: selectedWorkoutId })
+  const activeWeek = findWeek(activeMeso, selectedWeek)
+  const activeWorkout = findWorkout(activeWeek, selectedWorkoutId)
+
+  const selectMeso = (id: string) => {
+    setActiveMesoId(id)
+    setSelectedWeek(null)
+    setSelectedWorkoutId(null)
+  }
+  const selectWeek = (weekNumber: number) => {
+    setSelectedWeek(weekNumber)
+    setSelectedWorkoutId(null)
+    setExpandedExercise(null)
+  }
+  const selectWorkout = (id: string) => {
+    setSelectedWorkoutId(id)
+    setExpandedExercise(null)
+  }
+  const toggleExercise = (index: number) =>
+    setExpandedExercise((current) => (current === index ? null : index))
+
+  const navigateTo = (target: ProgramNavLevel) => {
+    if (target === 'meso') selectMeso(activeMesoId ?? mesos[0]?.id)
+    else if (target === 'week' && selectedWeek != null) selectWeek(selectedWeek)
+  }
+
+  return (
+    <View
+      className={className}
+      style={{ width: 390, backgroundColor: PAGE_BG }}
+      accessibilityRole={'main' as ViewProps['accessibilityRole']}
+      aria-label={title}
+      testID="program-planning-page"
+      {...props}
+    >
+      <View style={{ padding: 16, gap: 14 }} testID="program-planning-page-content">
+        <Text
+          accessibilityRole="header"
+          style={{
+            fontSize: 20,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: TEXT_PRIMARY,
+          }}
+          testID="program-planning-page-title"
+        >
+          {title}
+        </Text>
+
+        <View style={{ marginHorizontal: -16 }}>
+          <MesoProgressBar
+            mesos={progressMesos}
+            activeMesoId={activeMesoId}
+            onMesoPress={selectMeso}
+          />
+        </View>
+
+        {activeMeso != null && (
+          <Breadcrumbs
+            crumbs={buildBreadcrumbs(activeMeso, selectedWeek, activeWorkout)}
+            onNavigate={navigateTo}
+          />
+        )}
+
+        <View
+          style={{
+            backgroundColor: SURFACE_ELEVATED,
+            borderWidth: 1,
+            borderColor: BORDER_DEFAULT,
+            borderRadius: 12,
+            padding: 12,
+          }}
+          testID="program-planning-page-body"
+        >
+          {level === 'meso' && (
+            <MesoLevel
+              mesos={mesos}
+              activeMesoId={activeMesoId}
+              onSelectMeso={selectMeso}
+              onSelectWeek={selectWeek}
+            />
+          )}
+          {level === 'week' && activeWeek != null && (
+            <WeekLevel week={activeWeek} onSelectWorkout={selectWorkout} />
+          )}
+          {level === 'workout' && activeWorkout != null && (
+            <WorkoutLevel
+              workout={activeWorkout}
+              expandedExercise={expandedExercise}
+              onToggleExercise={toggleExercise}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  )
+}

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

@@ -2,15 +2,14 @@
 import { View, Text, Pressable } from 'react-native'
 import { Card } from '../../ui/card'
 import { Badge, type BadgeColor } from '../../ui/badge'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 const BRAND_PRIMARY = '#FF7900'
 const BRAND_PRIMARY_SUBTLE = 'rgba(255,121,0,0.12)'
 const STATUS_SUCCESS = '#14B8A6'
 const STATUS_WARNING = '#FFB020'
 const STATUS_ERROR = '#D14343'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
 
 /** Emoji option sets per known factor, keyed by lowercase id/label. */
 const EMOJI_SETS: Record<string, readonly string[]> = {
@@ -121,8 +120,8 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
                 paddingVertical: 8,
                 borderRadius: 8,
                 borderWidth: 1,
-                borderColor: selected ? BRAND_PRIMARY : WORKOUT_TOKENS.border.default,
-                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : WORKOUT_TOKENS.surface.raised,
+                borderColor: selected ? BRAND_PRIMARY : 'var(--color-border-default)',
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : 'var(--color-surface-raised)',
                 opacity: selected ? 1 : pressed ? 0.8 : 0.55,
                 transform: [{ scale: selected ? 1.06 : 1 }],
               })}
@@ -150,7 +149,7 @@ function ScoreGauge({ score }: { score: number }) {
         borderRadius: 30,
         borderWidth: 4,
         borderColor: color,
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
+        backgroundColor: 'var(--color-surface-raised)',
         alignItems: 'center',
         justifyContent: 'center',
       }}
@@ -175,8 +174,8 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
         padding: 12,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: WORKOUT_TOKENS.border.default,
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
+        borderColor: 'var(--color-border-default)',
+        backgroundColor: 'var(--color-surface-raised)',
       }}
       testID="readiness-check-warmup"
     >

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

@@ -143,3 +143,13 @@ describe('RestTimer', () => {
     })
   })
 })
+
+describe('RestTimer zero-duration timer (NaN guard)', () => {
+  it('emits a valid 100% width (not NaN) when totalSeconds is 0', () => {
+    const { container } = render(
+      <RestTimer {...defaultProps} totalSeconds={0} elapsedMs={0} />,
+    )
+    expect(screen.getByTestId('rest-timer-progress-fill')).toHaveStyle({ width: '100%' })
+    expect(container.innerHTML).not.toContain('NaN')
+  })
+})

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

@@ -1,6 +1,5 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable } from 'react-native'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 const BRAND_PRIMARY = '#FF7900'
 
@@ -28,15 +27,18 @@ export function RestTimer({
   const minutes = Math.floor(remainingSec / 60)
   const seconds = remainingSec % 60
   const timeDisplay = `${minutes}:${String(seconds).padStart(2, '0')}`
-  const progressPct = Math.min(100, (elapsedMs / (totalSeconds * 1000)) * 100)
+  // A zero-duration timer is already complete; guard the 0 / 0 === NaN case
+  // that would otherwise emit width:'NaN%'.
+  const totalMs = totalSeconds * 1000
+  const progressPct = totalMs > 0 ? Math.min(100, (elapsedMs / totalMs) * 100) : 100
 
   return (
     <View
       style={{
         width: '100%',
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
+        backgroundColor: 'var(--color-surface-raised)',
         borderTopWidth: 1,
-        borderTopColor: WORKOUT_TOKENS.border.default,
+        borderTopColor: 'var(--color-border-default)',
         paddingVertical: 12,
         paddingHorizontal: 16,
       }}
@@ -62,7 +64,7 @@ export function RestTimer({
               fontWeight: '600',
               textTransform: 'uppercase',
               letterSpacing: 1,
-              color: '#9CA3AF',
+              color: 'var(--color-text-secondary)',
             }}
             testID="rest-timer-label"
           >
@@ -73,7 +75,7 @@ export function RestTimer({
               style={{
                 fontSize: 11,
                 fontFamily: 'Inter, sans-serif',
-                color: '#6B7280',
+                color: 'var(--color-text-tertiary)',
                 marginTop: 2,
               }}
               testID="rest-timer-next-set"
@@ -89,7 +91,7 @@ export function RestTimer({
             fontSize: 28,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: '#F3F4F6',
+            color: 'var(--color-text-primary)',
             fontVariant: ['tabular-nums'],
             letterSpacing: -0.5,
           }}
@@ -103,7 +105,7 @@ export function RestTimer({
       <View
         style={{
           height: 3,
-          backgroundColor: WORKOUT_TOKENS.border.default,
+          backgroundColor: 'var(--color-border-default)',
           borderRadius: 2,
           marginBottom: 12,
         }}
@@ -139,7 +141,7 @@ export function RestTimer({
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
-              color: '#9CA3AF',
+              color: 'var(--color-text-secondary)',
             }}
           >
             +30s

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

@@ -2,6 +2,7 @@
 import { View, Text } from 'react-native'
 import { VelocityStrip } from './VelocityStrip'
 import { PrBadge, type PRType } from './PrBadge'
+import { roundRpe, rpeColor, roundWeight } from '../../../utils/workout-format'
 
 export type SetRowMode = 'active' | 'completed' | 'history'
 
@@ -22,13 +23,6 @@ export interface SetRowProps {
   targets?: { reps: number; weight: number }
 }
 
-function getRPEColor(rpe: number): string {
-  if (rpe >= 9.5) return '#ff4757'
-  if (rpe >= 8.5) return '#ffa502'
-  if (rpe >= 7) return '#ffd43b'
-  return '#2ed573'
-}
-
 function formatAccessibilityLabel(
   setNumber: number,
   reps: number | null,
@@ -36,7 +30,7 @@ function formatAccessibilityLabel(
   unit: string,
 ): string {
   const repsText = reps != null ? `${reps} reps` : 'no reps'
-  const weightText = weight != null ? `at ${weight} ${unit}` : ''
+  const weightText = weight != null ? `at ${roundWeight(weight)} ${unit}` : ''
   return `Set ${setNumber}: ${repsText}${weightText ? ` ${weightText}` : ''}`
 }
 
@@ -116,7 +110,7 @@ export function SetRow({
               fontSize: 13,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: '#9CA3AF',
+              color: 'var(--color-text-secondary)',
             }}
           >
             {setNumber}
@@ -132,11 +126,11 @@ export function SetRow({
           style={{
             fontSize: 12,
             fontFamily: 'Inter, sans-serif',
-            color: '#9CA3AF',
+            color: 'var(--color-text-secondary)',
           }}
         >
           {previous
-            ? `${previous.reps} x ${previous.weight}`
+            ? `${previous.reps} x ${roundWeight(previous.weight)}`
             : '\u2014'}
         </Text>
       </View>
@@ -151,7 +145,7 @@ export function SetRow({
               fontSize: 13,
               fontStyle: 'italic',
               fontFamily: 'Inter, sans-serif',
-              color: '#6B7280',
+              color: 'var(--color-text-tertiary)',
             }}
             testID="set-row-target-reps"
           >
@@ -163,7 +157,7 @@ export function SetRow({
               fontSize: 14,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: reps != null ? '#F3F4F6' : '#6B7280',
+              color: reps != null ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
             }}
           >
             {reps != null ? reps : '\u2014'}
@@ -181,11 +175,11 @@ export function SetRow({
               fontSize: 13,
               fontStyle: 'italic',
               fontFamily: 'Inter, sans-serif',
-              color: '#6B7280',
+              color: 'var(--color-text-tertiary)',
             }}
             testID="set-row-target-weight"
           >
-            {targets.weight}
+            {roundWeight(targets.weight)}
           </Text>
         ) : (
           <Text
@@ -193,10 +187,10 @@ export function SetRow({
               fontSize: 14,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: weight != null ? '#F3F4F6' : '#6B7280',
+              color: weight != null ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
             }}
           >
-            {weight != null ? weight : '\u2014'}
+            {weight != null ? roundWeight(weight) : '\u2014'}
           </Text>
         )}
       </View>
@@ -210,10 +204,10 @@ export function SetRow({
             fontSize: 13,
             fontWeight: '600',
             fontFamily: 'Inter, sans-serif',
-            color: rpe != null ? getRPEColor(rpe) : '#6B7280',
+            color: rpe != null ? rpeColor(rpe) : 'var(--color-text-tertiary)',
           }}
         >
-          {rpe != null ? rpe : '\u2014'}
+          {rpe != null ? roundRpe(rpe) : '\u2014'}
         </Text>
       </View>
 

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

@@ -12,6 +12,7 @@ export type StatusDotVariant =
 
 export interface StatusDotProps extends ViewProps {
   variant: StatusDotVariant
+  /** Center glyph. Only rendered at size="md"; the 8px "sm" dot is too small to fit one. */
   icon?: 'check' | 'exclamation' | 'dash'
   size?: 'sm' | 'md'
   /** Adds a subtle glow effect in the variant color */