@titan-design/react-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,225 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  BodyMapDetailPanel,
+  type ContributingExercise,
+  type UpcomingExercise,
+} from './BodyMapDetailPanel'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const contributing: ContributingExercise[] = [
+  { name: 'Barbell Bench Press', sets: 4, contributionWeight: 1 },
+  { name: 'Cable Fly', sets: 3, contributionWeight: 0.75 },
+]
+
+const upcoming: UpcomingExercise[] = [
+  { name: 'Dips', workoutName: 'Push B', sets: 3 },
+]
+
+const baseProps = {
+  muscleGroup: MuscleGroup.CHEST,
+  displayName: 'Chest',
+  weeklySets: 14,
+  landmarks: { mev: 8, mav: 14, mrv: 20 },
+  volumeStatus: 'productive' as const,
+  lastTrained: '2 days ago',
+  weeklyHistory: [8, 10, 12, 14],
+  contributingExercises: contributing,
+  upcomingExercises: upcoming,
+  isOpen: true,
+  onClose: vi.fn(),
+}
+
+describe('BodyMapDetailPanel', () => {
+  describe('rendering', () => {
+    it('renders the panel with the muscle title when open', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      expect(screen.getByTestId('body-map-detail-panel')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-detail-panel-title')).toHaveTextContent('Chest')
+    })
+
+    it('does not render when closed', () => {
+      render(<BodyMapDetailPanel {...baseProps} isOpen={false} />)
+      expect(screen.queryByTestId('body-map-detail-panel')).not.toBeInTheDocument()
+    })
+
+    it('supports the `visible` alias for visibility', () => {
+      const { isOpen: _isOpen, ...rest } = baseProps
+      render(<BodyMapDetailPanel {...rest} visible />)
+      expect(screen.getByTestId('body-map-detail-panel')).toBeInTheDocument()
+    })
+
+    it('renders the drag handle, status badge, and last-trained line', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      expect(screen.getByTestId('body-map-detail-panel-handle')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-detail-panel-status-badge')).toHaveTextContent(
+        'productive',
+      )
+      expect(screen.getByTestId('body-map-detail-panel-last-trained')).toHaveTextContent(
+        'Last trained 2 days ago',
+      )
+    })
+
+    it('shows the weekly set count and MRV suffix', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      expect(screen.getByTestId('body-map-detail-panel-set-count')).toHaveTextContent('14')
+      expect(screen.getByTestId('body-map-detail-panel-mrv-suffix')).toHaveTextContent('/ 20 MRV')
+    })
+  })
+
+  describe('volume bar', () => {
+    it('positions the marker at the midpoint when sets sit between MEV and MRV', () => {
+      // mev 8, mrv 20, sets 14 -> (14-8)/(20-8) = 0.5
+      render(<BodyMapDetailPanel {...baseProps} />)
+      const marker = screen.getByTestId('body-map-detail-panel-volume-marker')
+      expect(marker.getAttribute('style') ?? '').toContain('left: 50%')
+    })
+
+    it('clamps the marker to the left edge below MEV', () => {
+      render(<BodyMapDetailPanel {...baseProps} weeklySets={2} />)
+      const marker = screen.getByTestId('body-map-detail-panel-volume-marker')
+      expect(marker.getAttribute('style') ?? '').toContain('left: 0%')
+    })
+
+    it('clamps the marker to the right edge at or above MRV', () => {
+      render(<BodyMapDetailPanel {...baseProps} weeklySets={24} />)
+      const marker = screen.getByTestId('body-map-detail-panel-volume-marker')
+      expect(marker.getAttribute('style') ?? '').toContain('left: 100%')
+    })
+
+    it('exposes the volume bar as a progressbar reflecting sets and landmarks', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      const bar = screen.getByTestId('body-map-detail-panel-volume-bar')
+      expect(bar).toHaveAttribute('aria-valuenow', '14')
+      expect(bar).toHaveAttribute('aria-valuemin', '8')
+      expect(bar).toHaveAttribute('aria-valuemax', '20')
+    })
+  })
+
+  describe('lists', () => {
+    it('renders contributing exercises with sets and contribution', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      expect(screen.getByTestId('body-map-detail-panel-contributing-0-name')).toHaveTextContent(
+        'Barbell Bench Press',
+      )
+      expect(screen.getByTestId('body-map-detail-panel-contributing-0-detail')).toHaveTextContent(
+        '4 sets · 100%',
+      )
+      expect(screen.getByTestId('body-map-detail-panel-contributing-1-detail')).toHaveTextContent(
+        '3 sets · 75%',
+      )
+    })
+
+    it('renders upcoming exercises with workout name and sets', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      expect(screen.getByTestId('body-map-detail-panel-upcoming-0-name')).toHaveTextContent('Dips')
+      expect(screen.getByTestId('body-map-detail-panel-upcoming-0-detail')).toHaveTextContent(
+        'Push B · 3 sets',
+      )
+    })
+
+    it('renders the volume sparkline when history is supplied', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      expect(screen.getByTestId('body-map-detail-panel-sparkline')).toBeInTheDocument()
+    })
+
+    it('does not crash and omits sections for empty optional arrays', () => {
+      render(
+        <BodyMapDetailPanel
+          {...baseProps}
+          contributingExercises={[]}
+          upcomingExercises={[]}
+          weeklyHistory={[]}
+        />,
+      )
+      expect(screen.getByTestId('body-map-detail-panel')).toBeInTheDocument()
+      expect(screen.queryByTestId('body-map-detail-panel-contributing')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('body-map-detail-panel-upcoming')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('body-map-detail-panel-sparkline')).not.toBeInTheDocument()
+    })
+
+    it('omits the last-trained line and view-exercises button when not provided', () => {
+      const { lastTrained: _lt, ...rest } = baseProps
+      render(<BodyMapDetailPanel {...rest} />)
+      expect(screen.queryByTestId('body-map-detail-panel-last-trained')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('body-map-detail-panel-view-exercises')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('interaction', () => {
+    it('calls onClose when the backdrop is pressed', () => {
+      const onClose = vi.fn()
+      render(<BodyMapDetailPanel {...baseProps} onClose={onClose} />)
+      fireEvent.click(screen.getByTestId('body-map-detail-panel-backdrop'))
+      expect(onClose).toHaveBeenCalledOnce()
+    })
+
+    it('calls onClose when the handle is pressed', () => {
+      const onClose = vi.fn()
+      render(<BodyMapDetailPanel {...baseProps} onClose={onClose} />)
+      fireEvent.click(screen.getByTestId('body-map-detail-panel-handle'))
+      expect(onClose).toHaveBeenCalledOnce()
+    })
+
+    it('calls onClose when the close button is pressed', () => {
+      const onClose = vi.fn()
+      render(<BodyMapDetailPanel {...baseProps} onClose={onClose} />)
+      fireEvent.click(screen.getByTestId('body-map-detail-panel-close'))
+      expect(onClose).toHaveBeenCalledOnce()
+    })
+
+    it('calls onViewExercises when the view button is pressed', () => {
+      const onViewExercises = vi.fn()
+      render(<BodyMapDetailPanel {...baseProps} onViewExercises={onViewExercises} />)
+      fireEvent.click(screen.getByTestId('body-map-detail-panel-view-exercises'))
+      expect(onViewExercises).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('exposes a dialog role labelled with the muscle', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toHaveAttribute('aria-label', 'Chest volume details')
+    })
+
+    it('labels the close affordances', () => {
+      render(<BodyMapDetailPanel {...baseProps} />)
+      expect(screen.getAllByLabelText('Close Chest details').length).toBeGreaterThan(0)
+    })
+
+    it('has no accessibility violations with full content', async () => {
+      const { container } = render(
+        <BodyMapDetailPanel {...baseProps} onViewExercises={vi.fn()} />,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for each volume status', async () => {
+      const statuses = ['under', 'maintenance', 'productive', 'over'] as const
+      for (const volumeStatus of statuses) {
+        const { container, unmount } = render(
+          <BodyMapDetailPanel {...baseProps} volumeStatus={volumeStatus} />,
+        )
+        expect(await axe(container)).toHaveNoViolations()
+        unmount()
+      }
+    })
+
+    it('has no accessibility violations with only required props', async () => {
+      const { container } = render(
+        <BodyMapDetailPanel
+          muscleGroup={MuscleGroup.CALVES}
+          displayName="Calves"
+          weeklySets={10}
+          landmarks={{ mev: 6, mav: 10, mrv: 16 }}
+          volumeStatus="maintenance"
+          isOpen
+          onClose={vi.fn()}
+        />,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,478 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useEffect, useState } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  Animated,
+  Easing,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native'
+import { Badge, type BadgeColor } from '../../ui/badge'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { Sparkline } from './Sparkline'
+import {
+  MuscleGroup,
+  VOLUME_STATUS_LABELS,
+  type VolumeLandmarks,
+  type VolumeStatus,
+} from './muscleTaxonomy'
+
+const SURFACE_ELEVATED = WORKOUT_TOKENS.surface.elevated
+const SURFACE_RAISED = WORKOUT_TOKENS.surface.raised
+const BORDER_STRONG = WORKOUT_TOKENS.border.strong
+const BORDER_DEFAULT = WORKOUT_TOKENS.border.default
+const BRAND_PRIMARY = '#FF7900'
+const TEXT_PRIMARY = '#F3F4F6'
+const TEXT_SECONDARY = '#9CA3AF'
+const TEXT_TERTIARY = '#6B7280'
+
+/** Volume track gradient: status-info (blue) -> result-improve (teal) -> status-error (red). */
+const VOLUME_GRADIENT = 'linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)'
+
+/** Sheet slides up from this offset (px) and the backdrop fades to this opacity. */
+const SLIDE_OFFSET = 400
+const BACKDROP_OPACITY = 0.4
+
+/** Volume status -> Badge color scheme. */
+const STATUS_BADGE_COLOR: Record<VolumeStatus, BadgeColor> = {
+  under: 'info',
+  maintenance: 'warning',
+  productive: 'success',
+  over: 'error',
+}
+
+export interface ContributingExercise {
+  /** Exercise name. */
+  name: string
+  /** Working sets contributed this week. */
+  sets: number
+  /** Effective-set multiplier toward this muscle (0-1). */
+  contributionWeight: number
+}
+
+export interface UpcomingExercise {
+  /** Exercise name. */
+  name: string
+  /** Workout the exercise belongs to. */
+  workoutName: string
+  /** Planned sets. */
+  sets: number
+}
+
+export interface BodyMapDetailPanelProps extends ViewProps {
+  /** Muscle group whose volume detail is shown. */
+  muscleGroup: MuscleGroup
+  /** Human-readable muscle name for the title and a11y label. */
+  displayName: string
+  /** Weekly effective sets logged for this muscle. */
+  weeklySets: number
+  /** Volume landmarks (weekly working sets). */
+  landmarks: VolumeLandmarks
+  /** Weekly-volume status relative to the landmarks. */
+  volumeStatus: VolumeStatus
+  /** Last trained label, e.g. "2 days ago". */
+  lastTrained?: string
+  /** Volume sparkline data (last 4-8 weeks). */
+  weeklyHistory?: number[]
+  /** Exercises contributing to this muscle's volume. */
+  contributingExercises?: ContributingExercise[]
+  /** Upcoming exercises targeting this muscle. */
+  upcomingExercises?: UpcomingExercise[]
+  /** Whether the bottom sheet is visible. */
+  isOpen?: boolean
+  /** Alias for `isOpen` (spec wording: "isOpen/visible"). `isOpen` wins when both are set. */
+  visible?: boolean
+  /** Dismiss the panel (backdrop, handle, or close button). */
+  onClose: () => void
+  /** Navigate to a filtered exercise list. */
+  onViewExercises?: () => void
+}
+
+function clamp01(value: number): number {
+  if (value < 0) return 0
+  if (value > 1) return 1
+  return value
+}
+
+/** Marker position (0-1) of current sets between MEV (left) and MRV (right). */
+function markerFraction(weeklySets: number, { mev, mrv }: VolumeLandmarks): number {
+  const span = mrv - mev
+  if (span <= 0) return weeklySets >= mrv ? 1 : 0
+  return clamp01((weeklySets - mev) / span)
+}
+
+/**
+ * Slide-up bottom-sheet panel with detailed weekly-volume info for a tapped
+ * muscle group: a MEV|current|MRV gradient progress bar, the big weekly set
+ * count against MRV, an optional volume sparkline, and the contributing /
+ * upcoming exercise lists. Composes the titan `Badge` and Workout `Sparkline`.
+ *
+ * Controlled via `isOpen` (or the `visible` alias); renders nothing when closed
+ * and animates in on open — sheet translateY 400->0 (400ms ease-out) and a
+ * backdrop fade 0->0.4 (RN Animated, useNativeDriver:false). Backdrop, handle,
+ * and the header close button all call `onClose`.
+ *
+ * @example
+ * <BodyMapDetailPanel
+ *   muscleGroup={MuscleGroup.CHEST}
+ *   displayName="Chest"
+ *   weeklySets={14}
+ *   landmarks={{ mev: 8, mav: 14, mrv: 20 }}
+ *   volumeStatus="productive"
+ *   lastTrained="2 days ago"
+ *   weeklyHistory={[8, 10, 12, 14]}
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ * />
+ */
+export function BodyMapDetailPanel({
+  muscleGroup,
+  displayName,
+  weeklySets,
+  landmarks,
+  volumeStatus,
+  lastTrained,
+  weeklyHistory,
+  contributingExercises,
+  upcomingExercises,
+  isOpen,
+  visible,
+  onClose,
+  onViewExercises,
+  ...props
+}: BodyMapDetailPanelProps) {
+  const open = isOpen ?? visible ?? false
+
+  const [translateY] = useState(() => new Animated.Value(SLIDE_OFFSET))
+  const [backdrop] = useState(() => new Animated.Value(0))
+
+  useEffect(() => {
+    if (!open) return
+    const animation = Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 400,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: false,
+      }),
+      Animated.timing(backdrop, {
+        toValue: BACKDROP_OPACITY,
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: false,
+      }),
+    ])
+    animation.start()
+    return () => animation.stop()
+  }, [open, translateY, backdrop])
+
+  if (!open) return null
+
+  const dialogLabel = `${displayName} volume details`
+  const markerLeft = markerFraction(weeklySets, landmarks) * 100
+  const hasContributing = (contributingExercises?.length ?? 0) > 0
+  const hasUpcoming = (upcomingExercises?.length ?? 0) > 0
+
+  return (
+    <View
+      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'flex-end' }}
+      testID="body-map-detail-panel-root"
+    >
+      <Animated.View
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: '#000000',
+          opacity: backdrop,
+        }}
+        testID="body-map-detail-panel-backdrop-anim"
+      >
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel={`Close ${displayName} details`}
+          style={{ flex: 1 }}
+          testID="body-map-detail-panel-backdrop"
+        />
+      </Animated.View>
+
+      <Animated.View
+        accessibilityRole={'dialog' as ViewProps['accessibilityRole']}
+        accessibilityLabel={dialogLabel}
+        aria-label={dialogLabel}
+        style={{
+          backgroundColor: SURFACE_ELEVATED,
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+          maxHeight: '88%',
+          transform: [{ translateY }],
+        }}
+        testID="body-map-detail-panel"
+        {...props}
+      >
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel={`Close ${displayName} details`}
+          hitSlop={12}
+          style={{ alignSelf: 'center', paddingVertical: 8 }}
+          testID="body-map-detail-panel-handle"
+        >
+          <View
+            style={{ width: 40, height: 4, borderRadius: 2, backgroundColor: BORDER_STRONG }}
+            accessibilityElementsHidden
+          />
+        </Pressable>
+
+        <ScrollView
+          style={{ paddingHorizontal: 16 }}
+          contentContainerStyle={{ paddingBottom: 20 }}
+          testID="body-map-detail-panel-scroll"
+        >
+          <View
+            className="flex-row items-center justify-between"
+            style={{ gap: 8, paddingTop: 4, paddingBottom: 4 }}
+            testID="body-map-detail-panel-header"
+          >
+            <View className="flex-row items-center" style={{ gap: 8, flexShrink: 1 }}>
+              <Text
+                accessibilityRole="header"
+                style={{
+                  fontSize: 16,
+                  fontFamily: '"Space Grotesk", sans-serif',
+                  fontWeight: '700',
+                  color: TEXT_PRIMARY,
+                }}
+                testID="body-map-detail-panel-title"
+              >
+                {displayName}
+              </Text>
+              <Badge
+                variant="subtle"
+                color={STATUS_BADGE_COLOR[volumeStatus]}
+                size="sm"
+                testID="body-map-detail-panel-status-badge"
+              >
+                {VOLUME_STATUS_LABELS[volumeStatus]}
+              </Badge>
+            </View>
+            <Pressable
+              onPress={onClose}
+              accessibilityRole="button"
+              accessibilityLabel={`Close ${displayName} details`}
+              hitSlop={8}
+              style={{ padding: 4, margin: -4 }}
+              testID="body-map-detail-panel-close"
+            >
+              <Text style={{ fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY }}>{'×'}</Text>
+            </Pressable>
+          </View>
+
+          {lastTrained != null && (
+            <Text
+              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+              testID="body-map-detail-panel-last-trained"
+            >
+              {`Last trained ${lastTrained}`}
+            </Text>
+          )}
+
+          <View style={{ marginTop: 16 }} testID="body-map-detail-panel-volume">
+            <View
+              className="flex-row items-center justify-between"
+              style={{ marginBottom: 6 }}
+              accessibilityElementsHidden
+            >
+              <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_TERTIARY }}>
+                {`MEV ${landmarks.mev}`}
+              </Text>
+              <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_TERTIARY }}>
+                {`MRV ${landmarks.mrv}`}
+              </Text>
+            </View>
+            <View
+              style={{ height: 14, justifyContent: 'center' }}
+              accessibilityRole="progressbar"
+              accessibilityValue={{ min: landmarks.mev, max: landmarks.mrv, now: weeklySets }}
+              accessibilityLabel={`${weeklySets} weekly sets, between MEV ${landmarks.mev} and MRV ${landmarks.mrv}`}
+              aria-valuenow={weeklySets}
+              aria-valuemin={landmarks.mev}
+              aria-valuemax={landmarks.mrv}
+              testID="body-map-detail-panel-volume-bar"
+            >
+              <View
+                style={{ height: 8, borderRadius: 4, backgroundImage: VOLUME_GRADIENT } as ViewStyle}
+                accessibilityElementsHidden
+              />
+              <View
+                style={{
+                  position: 'absolute',
+                  left: `${markerLeft}%`,
+                  marginLeft: -7,
+                  width: 14,
+                  height: 14,
+                  borderRadius: 7,
+                  borderWidth: 2,
+                  borderColor: TEXT_PRIMARY,
+                  backgroundColor: SURFACE_ELEVATED,
+                  boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+                }}
+                accessibilityElementsHidden
+                testID="body-map-detail-panel-volume-marker"
+              />
+            </View>
+          </View>
+
+          <View className="flex-row items-baseline" style={{ marginTop: 14, gap: 4 }}>
+            <Text
+              style={{
+                fontSize: 24,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: '700',
+                color: TEXT_PRIMARY,
+              }}
+              testID="body-map-detail-panel-set-count"
+            >
+              {weeklySets}
+            </Text>
+            <Text
+              style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+              testID="body-map-detail-panel-mrv-suffix"
+            >
+              {`/ ${landmarks.mrv} MRV`}
+            </Text>
+          </View>
+
+          {weeklyHistory != null && weeklyHistory.length > 0 && (
+            <View style={{ marginTop: 14 }} testID="body-map-detail-panel-sparkline">
+              <Text
+                style={{
+                  fontSize: 10,
+                  fontFamily: 'Inter, sans-serif',
+                  fontWeight: '600',
+                  color: TEXT_TERTIARY,
+                  marginBottom: 6,
+                }}
+                accessibilityElementsHidden
+              >
+                {'VOLUME TREND'}
+              </Text>
+              <Sparkline data={weeklyHistory} width={80} height={30} highlightLast />
+            </View>
+          )}
+
+          {hasContributing && (
+            <View style={{ marginTop: 16 }} testID="body-map-detail-panel-contributing">
+              <Text
+                style={{
+                  fontSize: 10,
+                  fontFamily: 'Inter, sans-serif',
+                  fontWeight: '600',
+                  color: TEXT_TERTIARY,
+                  marginBottom: 8,
+                }}
+              >
+                {'CONTRIBUTING EXERCISES'}
+              </Text>
+              {contributingExercises!.map((exercise, index) => (
+                <View
+                  key={`${exercise.name}-${index}`}
+                  className="flex-row items-center justify-between"
+                  style={{
+                    gap: 10,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    marginBottom: 6,
+                    borderRadius: 8,
+                    backgroundColor: SURFACE_RAISED,
+                    borderWidth: 1,
+                    borderColor: BORDER_DEFAULT,
+                  }}
+                  testID={`body-map-detail-panel-contributing-${index}`}
+                >
+                  <Text
+                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_PRIMARY }}
+                    testID={`body-map-detail-panel-contributing-${index}-name`}
+                  >
+                    {exercise.name}
+                  </Text>
+                  <Text
+                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+                    testID={`body-map-detail-panel-contributing-${index}-detail`}
+                  >
+                    {`${exercise.sets} sets · ${Math.round(exercise.contributionWeight * 100)}%`}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          )}
+
+          {hasUpcoming && (
+            <View style={{ marginTop: 16 }} testID="body-map-detail-panel-upcoming">
+              <Text
+                style={{
+                  fontSize: 10,
+                  fontFamily: 'Inter, sans-serif',
+                  fontWeight: '600',
+                  color: TEXT_TERTIARY,
+                  marginBottom: 8,
+                }}
+              >
+                {'UPCOMING'}
+              </Text>
+              {upcomingExercises!.map((exercise, index) => (
+                <View
+                  key={`${exercise.name}-${index}`}
+                  className="flex-row items-center justify-between"
+                  style={{ gap: 10, paddingVertical: 6 }}
+                  testID={`body-map-detail-panel-upcoming-${index}`}
+                >
+                  <Text
+                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600', color: TEXT_PRIMARY }}
+                    testID={`body-map-detail-panel-upcoming-${index}-name`}
+                  >
+                    {exercise.name}
+                  </Text>
+                  <Text
+                    style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_TERTIARY }}
+                    testID={`body-map-detail-panel-upcoming-${index}-detail`}
+                  >
+                    {`${exercise.workoutName} · ${exercise.sets} sets`}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          )}
+
+          {onViewExercises != null && (
+            <Pressable
+              onPress={onViewExercises}
+              accessibilityRole="button"
+              accessibilityLabel={`View ${displayName} exercises`}
+              style={{
+                marginTop: 16,
+                paddingVertical: 10,
+                borderRadius: 8,
+                alignItems: 'center',
+                backgroundColor: 'rgba(255,121,0,0.12)',
+                borderWidth: 1,
+                borderColor: 'rgba(255,121,0,0.3)',
+              }}
+              testID="body-map-detail-panel-view-exercises"
+            >
+              <Text style={{ fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '700', color: BRAND_PRIMARY }}>
+                {'View exercises'}
+              </Text>
+            </Pressable>
+          )}
+        </ScrollView>
+      </Animated.View>
+    </View>
+  )
+}