@titan-design/react-ui 0.2.7 → 0.3.0

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

@@ -4,15 +4,15 @@ import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-n
 import { cn } from '../../../utils/cn'
 
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = '#F3F4F6'
-const TEXT_SECONDARY = '#9CA3AF'
-const TEXT_TERTIARY = '#6B7280'
-const BORDER_STRONG = '#2C2C2C'
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
+const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+const BORDER_STRONG = 'var(--color-border-strong)'
 const STATUS_SUCCESS = '#14B8A6'
 const STATUS_ERROR = '#D14343'
 const STATUS_WARNING = '#FFB020'
 const GRID_LINE = 'rgba(255,255,255,0.06)'
-const TOOLTIP_BG = 'rgba(28,28,28,0.95)'
+const TOOLTIP_BG = 'var(--color-surface-elevated)'
 const SUCCESS_PILL_BG = 'rgba(20,184,166,0.10)'
 const SUCCESS_PILL_BORDER = 'rgba(20,184,166,0.20)'
 const ERROR_PILL_BG = 'rgba(209,67,67,0.10)'

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState, useCallback } from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { roundTempo } from '../../../utils/workout-format'
 
 export interface TempoDisplayProps extends ViewProps {
   /** Tempo values: [eccentric, pauseBottom, concentric, pauseTop] in seconds */
@@ -76,7 +77,8 @@ export function TempoDisplay({
   ...props
 }: TempoDisplayProps) {
   const [showTooltip, setShowTooltip] = useState(false)
-  const [eccentric, pauseBottom, concentric, pauseTop] = tempo
+  // Round exact (unrounded) tempo seconds to the 1-dp display granularity.
+  const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo)
   const isSm = size === 'sm'
   const fontSize = isSm ? 9 : 11
   const monoColor = TEXT_TERTIARY

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

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { TrainingStatusPage, type TrainingStatusMuscle } from './TrainingStatusPage'
+import { MesoStatusCardProps } from './MesoStatusCard'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const meso: MesoStatusCardProps = {
+  mesoName: 'Hypertrophy Block',
+  mesoSubtitle: 'Week 6 of 8 · Upper/Lower',
+  statusBadge: { label: 'On Track', variant: 'success' },
+  metrics: [
+    { label: 'Weekly Volume', value: '112 sets' },
+    { label: 'Avg Intensity', value: 'RPE 8.2' },
+    { label: 'Sessions', value: '5 / 5' },
+    { label: 'Deload', value: 'in 2 weeks' },
+  ],
+  gauges: [
+    { label: 'Volume', level: 0.68, sublabel: 'Actual' },
+    { label: 'Fatigue', level: 0.55, sublabel: 'Managed' },
+  ],
+  coaching: {
+    text: 'Push volume on lagging back and rear delts before the deload.',
+    highlights: ['back and rear delts'],
+  },
+  nextTarget: { icon: '🎯', text: 'Add 2 sets to pulling this week' },
+}
+
+const muscles: TrainingStatusMuscle[] = [
+  {
+    muscleGroup: MuscleGroup.CHEST,
+    displayName: 'Chest',
+    side: 'front',
+    intensity: 0.72,
+    volumeStatus: 'productive',
+    weeklySets: 14,
+    landmarks: { mev: 8, mav: 14, mrv: 20 },
+    lastTrained: '2 days ago',
+    weeklyHistory: [8, 10, 12, 11, 13, 14],
+    contributingExercises: [
+      { name: 'Barbell Bench Press', sets: 4, contributionWeight: 1 },
+      { name: 'Incline Dumbbell Press', sets: 3, contributionWeight: 1 },
+      { name: 'Cable Fly', sets: 3, contributionWeight: 0.75 },
+    ],
+    upcomingExercises: [{ name: 'Machine Chest Press', workoutName: 'Push B', sets: 3 }],
+  },
+  {
+    muscleGroup: MuscleGroup.FRONT_DELTS,
+    displayName: 'Front Delts',
+    side: 'front',
+    intensity: 0.45,
+    volumeStatus: 'maintenance',
+    weeklySets: 5,
+    landmarks: { mev: 2, mav: 6, mrv: 10 },
+    lastTrained: '2 days ago',
+    weeklyHistory: [4, 5, 5, 5],
+  },
+  {
+    muscleGroup: MuscleGroup.SIDE_DELTS,
+    displayName: 'Side Delts',
+    side: 'front',
+    intensity: 0.6,
+    volumeStatus: 'productive',
+    weeklySets: 12,
+    landmarks: { mev: 6, mav: 14, mrv: 22 },
+    lastTrained: '1 day ago',
+    weeklyHistory: [8, 9, 10, 11, 12],
+  },
+  {
+    muscleGroup: MuscleGroup.BICEPS,
+    displayName: 'Biceps',
+    side: 'front',
+    intensity: 0.3,
+    volumeStatus: 'under',
+    weeklySets: 3,
+    landmarks: { mev: 4, mav: 10, mrv: 18 },
+    lastTrained: '4 days ago',
+    weeklyHistory: [2, 3, 3, 3],
+  },
+  {
+    muscleGroup: MuscleGroup.ABS,
+    displayName: 'Abs',
+    side: 'front',
+    intensity: 0.4,
+    volumeStatus: 'maintenance',
+    weeklySets: 6,
+    landmarks: { mev: 0, mav: 8, mrv: 16 },
+    lastTrained: '1 day ago',
+  },
+  {
+    muscleGroup: MuscleGroup.QUADS,
+    displayName: 'Quads',
+    side: 'front',
+    intensity: 0.95,
+    volumeStatus: 'over',
+    weeklySets: 20,
+    landmarks: { mev: 6, mav: 12, mrv: 18 },
+    lastTrained: 'today',
+    weeklyHistory: [12, 14, 16, 18, 20],
+    contributingExercises: [
+      { name: 'Back Squat', sets: 5, contributionWeight: 1 },
+      { name: 'Leg Press', sets: 4, contributionWeight: 0.85 },
+    ],
+  },
+  {
+    muscleGroup: MuscleGroup.LATS,
+    displayName: 'Lats',
+    side: 'back',
+    intensity: 0.58,
+    volumeStatus: 'productive',
+    weeklySets: 11,
+    landmarks: { mev: 8, mav: 14, mrv: 20 },
+    lastTrained: '3 days ago',
+    weeklyHistory: [7, 8, 9, 10, 11],
+    contributingExercises: [
+      { name: 'Pull-Up', sets: 4, contributionWeight: 1 },
+      { name: 'Barbell Row', sets: 4, contributionWeight: 0.9 },
+    ],
+  },
+  {
+    muscleGroup: MuscleGroup.UPPER_BACK,
+    displayName: 'Upper Back',
+    side: 'back',
+    intensity: 0.5,
+    volumeStatus: 'maintenance',
+    weeklySets: 8,
+    landmarks: { mev: 6, mav: 12, mrv: 18 },
+    lastTrained: '3 days ago',
+  },
+  {
+    muscleGroup: MuscleGroup.REAR_DELTS,
+    displayName: 'Rear Delts',
+    side: 'back',
+    intensity: 0.28,
+    volumeStatus: 'under',
+    weeklySets: 4,
+    landmarks: { mev: 6, mav: 12, mrv: 18 },
+    lastTrained: '5 days ago',
+    weeklyHistory: [2, 3, 3, 4],
+  },
+  {
+    muscleGroup: MuscleGroup.TRICEPS,
+    displayName: 'Triceps',
+    side: 'back',
+    intensity: 0.65,
+    volumeStatus: 'productive',
+    weeklySets: 9,
+    landmarks: { mev: 4, mav: 8, mrv: 14 },
+    lastTrained: '2 days ago',
+    weeklyHistory: [6, 7, 8, 9],
+  },
+  {
+    muscleGroup: MuscleGroup.GLUTES,
+    displayName: 'Glutes',
+    side: 'back',
+    intensity: 0.7,
+    volumeStatus: 'productive',
+    weeklySets: 10,
+    landmarks: { mev: 4, mav: 10, mrv: 16 },
+    lastTrained: 'today',
+  },
+  {
+    muscleGroup: MuscleGroup.HAMSTRINGS,
+    displayName: 'Hamstrings',
+    side: 'back',
+    intensity: 0.55,
+    volumeStatus: 'productive',
+    weeklySets: 9,
+    landmarks: { mev: 4, mav: 10, mrv: 16 },
+    lastTrained: 'today',
+    weeklyHistory: [6, 7, 8, 9],
+  },
+  {
+    muscleGroup: MuscleGroup.CALVES,
+    displayName: 'Calves',
+    side: 'back',
+    intensity: 0.2,
+    volumeStatus: 'under',
+    weeklySets: 3,
+    landmarks: { mev: 6, mav: 10, mrv: 16 },
+    lastTrained: '6 days ago',
+  },
+]
+
+const meta: Meta<typeof TrainingStatusPage> = {
+  title: 'Custom/Workout/TrainingStatusPage',
+  component: TrainingStatusPage,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: { title: 'Training Status', meso, muscles },
+}
+
+export default meta
+type Story = StoryObj<typeof TrainingStatusPage>
+
+export const Default: Story = {}
+
+export const NeedsAttention: Story = {
+  args: {
+    meso: {
+      ...meso,
+      statusBadge: { label: 'Behind', variant: 'warning' },
+      coaching: {
+        text: 'Volume is trailing target — add a pulling session this week.',
+        highlights: ['add a pulling session'],
+      },
+    },
+    muscles: muscles.map((m) =>
+      m.side === 'back'
+        ? { ...m, volumeStatus: 'under', weeklySets: Math.max(2, m.weeklySets - 4) }
+        : m
+    ),
+  },
+}

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

@@ -0,0 +1,131 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  TrainingStatusPage,
+  deriveTrainingSummary,
+  toBodyMapData,
+  type TrainingStatusMuscle,
+} from './TrainingStatusPage'
+import { type MesoStatusCardProps } from './MesoStatusCard'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const meso: MesoStatusCardProps = {
+  mesoName: 'Hypertrophy Block',
+  mesoSubtitle: 'Week 6 of 8',
+  statusBadge: { label: 'On Track', variant: 'success' },
+  metrics: [{ label: 'Volume', value: '112 sets' }],
+  gauges: [{ label: 'Volume', level: 0.68 }],
+}
+
+const muscles: TrainingStatusMuscle[] = [
+  {
+    muscleGroup: MuscleGroup.CHEST,
+    displayName: 'Chest',
+    side: 'front',
+    intensity: 0.7,
+    volumeStatus: 'productive',
+    weeklySets: 14,
+    landmarks: { mev: 8, mav: 14, mrv: 20 },
+    lastTrained: '2 days ago',
+    weeklyHistory: [10, 12, 14],
+  },
+  {
+    muscleGroup: MuscleGroup.BICEPS,
+    displayName: 'Biceps',
+    side: 'front',
+    intensity: 0.3,
+    volumeStatus: 'under',
+    weeklySets: 3,
+    landmarks: { mev: 4, mav: 10, mrv: 18 },
+  },
+  {
+    muscleGroup: MuscleGroup.LATS,
+    displayName: 'Lats',
+    side: 'back',
+    intensity: 0.6,
+    volumeStatus: 'productive',
+    weeklySets: 11,
+    landmarks: { mev: 8, mav: 14, mrv: 20 },
+  },
+  {
+    muscleGroup: MuscleGroup.QUADS,
+    displayName: 'Quads',
+    side: 'front',
+    intensity: 0.95,
+    volumeStatus: 'over',
+    weeklySets: 20,
+    landmarks: { mev: 6, mav: 12, mrv: 18 },
+  },
+]
+
+describe('deriveTrainingSummary', () => {
+  it('sums weekly sets and counts muscles per volume status', () => {
+    const summary = deriveTrainingSummary(muscles)
+    expect(summary.totalWeeklySets).toBe(48)
+    expect(summary.trackedMuscles).toBe(4)
+    expect(summary.statusCounts).toEqual({
+      under: 1,
+      maintenance: 0,
+      productive: 2,
+      over: 1,
+    })
+  })
+
+  it('returns zeroed counts for an empty muscle list', () => {
+    const summary = deriveTrainingSummary([])
+    expect(summary.totalWeeklySets).toBe(0)
+    expect(summary.trackedMuscles).toBe(0)
+    expect(summary.statusCounts).toEqual({ under: 0, maintenance: 0, productive: 0, over: 0 })
+  })
+})
+
+describe('toBodyMapData', () => {
+  it('keeps only the requested side and projects heatmap fields', () => {
+    const front = toBodyMapData(muscles, 'front')
+    expect(front.map((d) => d.muscleGroup)).toEqual([
+      MuscleGroup.CHEST,
+      MuscleGroup.BICEPS,
+      MuscleGroup.QUADS,
+    ])
+    expect(front[0]).toEqual({
+      muscleGroup: MuscleGroup.CHEST,
+      intensity: 0.7,
+      volumeStatus: 'productive',
+      weeklySets: 14,
+    })
+  })
+
+  it('filters to the back side', () => {
+    const back = toBodyMapData(muscles, 'back')
+    expect(back.map((d) => d.muscleGroup)).toEqual([MuscleGroup.LATS])
+  })
+})
+
+describe('TrainingStatusPage', () => {
+  it('renders the banner, summary cards, and both body maps', () => {
+    render(<TrainingStatusPage meso={meso} muscles={muscles} />)
+    expect(screen.getByTestId('training-status-page')).toBeInTheDocument()
+    expect(screen.getByTestId('meso-status-card')).toBeInTheDocument()
+    expect(screen.getByTestId('training-status-page-summary-total')).toHaveTextContent('48')
+    expect(screen.getByTestId('training-status-page-summary-productive')).toHaveTextContent('2')
+    expect(screen.getByTestId('training-status-page-bodymap-front')).toBeInTheDocument()
+    expect(screen.getByTestId('training-status-page-bodymap-back')).toBeInTheDocument()
+  })
+
+  it('uses a custom title when provided', () => {
+    render(<TrainingStatusPage title="Weekly Volume" meso={meso} muscles={muscles} />)
+    expect(screen.getByTestId('training-status-page-title')).toHaveTextContent('Weekly Volume')
+  })
+
+  it('opens the detail panel for a tapped muscle and closes it again', () => {
+    render(<TrainingStatusPage meso={meso} muscles={muscles} />)
+    expect(screen.queryByTestId('body-map-detail-panel')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('body-map-muscle-chest'))
+    expect(screen.getByTestId('body-map-detail-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('body-map-detail-panel-title')).toHaveTextContent('Chest')
+
+    fireEvent.click(screen.getByTestId('body-map-detail-panel-close'))
+    expect(screen.queryByTestId('body-map-detail-panel')).not.toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,321 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo, useState } from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { BodyMap, type BodyMapData } from './BodyMap'
+import {
+  BodyMapDetailPanel,
+  type ContributingExercise,
+  type UpcomingExercise,
+} from './BodyMapDetailPanel'
+import { MesoStatusCard, type MesoStatusCardProps } from './MesoStatusCard'
+import {
+  MuscleGroup,
+  VOLUME_STATUS_LABELS,
+  getHeatmapColor,
+  type VolumeLandmarks,
+  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']
+
+/** One muscle's full volume picture — feeds the body maps and the detail panel. */
+export interface TrainingStatusMuscle {
+  /** Detailed muscle group (drives the SVG heatmap + panel identity). */
+  muscleGroup: MuscleGroup
+  /** Human-readable name for the legend, summary, and panel title. */
+  displayName: string
+  /** Which body-map view the muscle belongs to. */
+  side: 'front' | 'back'
+  /** Heatmap intensity 0-1. */
+  intensity: number
+  /** Weekly-volume status relative to the landmarks. */
+  volumeStatus: VolumeStatus
+  /** Weekly effective sets logged. */
+  weeklySets: number
+  /** Volume landmarks (weekly working sets). */
+  landmarks: VolumeLandmarks
+  /** Last trained label, e.g. "2 days ago". */
+  lastTrained?: string
+  /** Weekly volume history for the panel sparkline. */
+  weeklyHistory?: number[]
+  /** Exercises contributing to this muscle's volume. */
+  contributingExercises?: ContributingExercise[]
+  /** Upcoming exercises targeting this muscle. */
+  upcomingExercises?: UpcomingExercise[]
+}
+
+/** Derived, page-level roll-up of the tracked muscles. */
+export interface TrainingStatusSummary {
+  /** Total weekly effective sets across all tracked muscles. */
+  totalWeeklySets: number
+  /** Number of muscles being tracked. */
+  trackedMuscles: number
+  /** Count of muscles per volume status. */
+  statusCounts: Record<VolumeStatus, number>
+}
+
+export interface TrainingStatusPageProps extends ViewProps {
+  /** Page heading. */
+  title?: string
+  /** Mesocycle context banner shown at the top. */
+  meso: MesoStatusCardProps
+  /** Muscles tracked this week. */
+  muscles: TrainingStatusMuscle[]
+  className?: string
+}
+
+/** Roll up per-muscle rows into the page summary (pure, testable). */
+export function deriveTrainingSummary(muscles: TrainingStatusMuscle[]): TrainingStatusSummary {
+  const statusCounts: Record<VolumeStatus, number> = {
+    under: 0,
+    maintenance: 0,
+    productive: 0,
+    over: 0,
+  }
+  let totalWeeklySets = 0
+  for (const muscle of muscles) {
+    totalWeeklySets += muscle.weeklySets
+    statusCounts[muscle.volumeStatus] += 1
+  }
+  return { totalWeeklySets, trackedMuscles: muscles.length, statusCounts }
+}
+
+/** Project the muscle rows for one side into `BodyMap` heatmap data. */
+export function toBodyMapData(
+  muscles: TrainingStatusMuscle[],
+  side: 'front' | 'back'
+): BodyMapData[] {
+  return muscles
+    .filter((muscle) => muscle.side === side)
+    .map(({ muscleGroup, intensity, volumeStatus, weeklySets }) => ({
+      muscleGroup,
+      intensity,
+      volumeStatus,
+      weeklySets,
+    }))
+}
+
+const SUMMARY_CARDS: Array<{
+  key: keyof TrainingStatusSummary['statusCounts'] | 'total'
+  label: string
+}> = [
+  { key: 'total', label: 'Weekly Sets' },
+  { key: 'productive', label: 'Productive' },
+  { key: 'under', label: 'Under' },
+  { key: 'over', label: 'Over' },
+]
+
+function SummaryCards({ summary }: { summary: TrainingStatusSummary }) {
+  return (
+    <View className="flex-row flex-wrap" style={{ gap: 8 }} testID="training-status-page-summary">
+      {SUMMARY_CARDS.map(({ key, label }) => {
+        const value = key === 'total' ? summary.totalWeeklySets : summary.statusCounts[key]
+        return (
+          <View
+            key={key}
+            style={{
+              flexGrow: 1,
+              flexBasis: '46%',
+              padding: 12,
+              borderRadius: 10,
+              backgroundColor: SURFACE_ELEVATED,
+              borderWidth: 1,
+              borderColor: BORDER_DEFAULT,
+            }}
+            testID={`training-status-page-summary-${key}`}
+          >
+            <Text
+              style={{
+                fontSize: 22,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: '700',
+                color: TEXT_PRIMARY,
+              }}
+            >
+              {value}
+            </Text>
+            <Text
+              style={{
+                marginTop: 2,
+                fontSize: 11,
+                fontFamily: 'Inter, sans-serif',
+                fontWeight: '600',
+                letterSpacing: 0.4,
+                textTransform: 'uppercase',
+                color: TEXT_TERTIARY,
+              }}
+            >
+              {label}
+            </Text>
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+function StatusLegend() {
+  return (
+    <View
+      className="flex-row flex-wrap"
+      style={{ gap: 10, justifyContent: 'center' }}
+      testID="training-status-page-legend"
+    >
+      {STATUS_ORDER.map((status) => (
+        <View
+          key={status}
+          className="flex-row items-center"
+          style={{ gap: 5 }}
+          testID={`training-status-page-legend-${status}`}
+        >
+          <View
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 9999,
+              backgroundColor: getHeatmapColor(status, 0.6),
+            }}
+            accessibilityElementsHidden
+          />
+          <Text
+            style={{
+              fontSize: 11,
+              fontFamily: 'Inter, sans-serif',
+              color: TEXT_SECONDARY,
+              textTransform: 'capitalize',
+            }}
+          >
+            {VOLUME_STATUS_LABELS[status]}
+          </Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+interface BodyMapColumnProps {
+  side: 'front' | 'back'
+  muscles: TrainingStatusMuscle[]
+  selected: MuscleGroup | null
+  onSelect: (muscle: MuscleGroup) => void
+}
+
+function BodyMapColumn({ side, muscles, selected, onSelect }: BodyMapColumnProps) {
+  const data = useMemo(() => toBodyMapData(muscles, side), [muscles, side])
+  return (
+    <View style={{ flexGrow: 1, flexBasis: '46%' }} testID={`training-status-page-bodymap-${side}`}>
+      <BodyMap
+        data={data}
+        view={side}
+        onMusclePress={onSelect}
+        highlightedMuscle={selected}
+        mode="detailed"
+      />
+    </View>
+  )
+}
+
+/**
+ * TrainingStatusPage — a body-map training dashboard that composes the
+ * mesocycle context banner (`MesoStatusCard`), side-by-side front/back
+ * `BodyMap`s with a shared heatmap legend, per-status summary cards, and a
+ * tap-to-detail `BodyMapDetailPanel`. Tapping any muscle (SVG or legend chip)
+ * opens the slide-up panel for that group; the summary is derived from the
+ * supplied muscle rows.
+ *
+ * @example
+ * <TrainingStatusPage meso={meso} muscles={muscles} />
+ */
+export function TrainingStatusPage({
+  title = 'Training Status',
+  meso,
+  muscles,
+  className,
+  ...props
+}: TrainingStatusPageProps) {
+  const [selected, setSelected] = useState<MuscleGroup | null>(null)
+  const summary = useMemo(() => deriveTrainingSummary(muscles), [muscles])
+  const active = selected != null ? (muscles.find((m) => m.muscleGroup === selected) ?? null) : null
+
+  return (
+    <View
+      className={className}
+      style={{ position: 'relative', width: 390, backgroundColor: PAGE_BG }}
+      accessibilityRole={'main' as ViewProps['accessibilityRole']}
+      aria-label={title}
+      testID="training-status-page"
+      {...props}
+    >
+      <View style={{ padding: 16, gap: 16 }} testID="training-status-page-content">
+        <Text
+          accessibilityRole="header"
+          style={{
+            fontSize: 20,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: TEXT_PRIMARY,
+          }}
+          testID="training-status-page-title"
+        >
+          {title}
+        </Text>
+
+        <MesoStatusCard {...meso} />
+
+        <SummaryCards summary={summary} />
+
+        <View
+          style={{
+            backgroundColor: SURFACE_ELEVATED,
+            borderWidth: 1,
+            borderColor: BORDER_DEFAULT,
+            borderRadius: 12,
+            padding: 12,
+            gap: 12,
+          }}
+          testID="training-status-page-bodymaps"
+        >
+          <View className="flex-row" style={{ gap: 8 }}>
+            <BodyMapColumn
+              side="front"
+              muscles={muscles}
+              selected={selected}
+              onSelect={setSelected}
+            />
+            <BodyMapColumn
+              side="back"
+              muscles={muscles}
+              selected={selected}
+              onSelect={setSelected}
+            />
+          </View>
+          <StatusLegend />
+        </View>
+      </View>
+
+      {active != null && (
+        <BodyMapDetailPanel
+          muscleGroup={active.muscleGroup}
+          displayName={active.displayName}
+          weeklySets={active.weeklySets}
+          landmarks={active.landmarks}
+          volumeStatus={active.volumeStatus}
+          lastTrained={active.lastTrained}
+          weeklyHistory={active.weeklyHistory}
+          contributingExercises={active.contributingExercises}
+          upcomingExercises={active.upcomingExercises}
+          isOpen
+          onClose={() => setSelected(null)}
+        />
+      )}
+    </View>
+  )
+}