@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,113 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useState, type ReactNode } from 'react'
+import { View, Pressable, Animated, type ViewProps } from 'react-native'
+
+export type BaseBadgeVariant = 'plain' | 'pr'
+export type BaseBadgeSize = 'sm' | 'md' | 'lg'
+
+export interface BaseBadgeProps extends ViewProps {
+  /** Visual variant — plain (neutral) or pr (brand-primary-subtle) */
+  variant?: BaseBadgeVariant
+  /** Size variant */
+  size?: BaseBadgeSize
+  /** Optional icon rendered left of children; hidden from a11y tree */
+  icon?: ReactNode
+  onPress?: () => void
+  className?: string
+  children?: ReactNode
+}
+
+export const baseBadgeSizeConfig: Record<
+  BaseBadgeSize,
+  { fontSize: number; paddingH: number; paddingV: number; iconSize: number }
+> = {
+  sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
+  md: { fontSize: 10, paddingH: 8, paddingV: 2, iconSize: 12 },
+  lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 },
+}
+
+const variantColors: Record<
+  BaseBadgeVariant,
+  { backgroundColor: string; borderColor: string }
+> = {
+  plain: { backgroundColor: '#1C1C1C', borderColor: '#1F1F1F' },
+  pr: {
+    backgroundColor: 'rgba(255, 121, 0, 0.12)',
+    borderColor: 'rgba(255, 121, 0, 0.12)',
+  },
+}
+
+export function BaseBadge({
+  variant = 'plain',
+  size = 'md',
+  icon,
+  onPress,
+  className,
+  children,
+  ...props
+}: BaseBadgeProps) {
+  const [scaleAnim] = useState(() => new Animated.Value(1))
+  const config = baseBadgeSizeConfig[size]
+  const colors = variantColors[variant]
+
+  const handlePressIn = () => {
+    Animated.timing(scaleAnim, {
+      toValue: 0.97,
+      duration: 150,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.timing(scaleAnim, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const badge = (
+    <View
+      className={className}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        // borderRadius 2 is intentional per workout-tokens.ts (squared-off pill)
+        borderRadius: 2,
+        borderWidth: 1,
+        borderColor: colors.borderColor,
+        backgroundColor: colors.backgroundColor,
+        paddingHorizontal: config.paddingH,
+        paddingVertical: config.paddingV,
+      }}
+      {...props}
+    >
+      {icon != null && (
+        <View accessibilityElementsHidden testID="base-badge-icon">
+          {icon}
+        </View>
+      )}
+      {children}
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+        <Pressable
+          onPress={onPress}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          accessibilityRole="button"
+          accessibilityLabel={props.accessibilityLabel}
+          testID="base-badge-pressable"
+        >
+          {badge}
+        </Pressable>
+      </Animated.View>
+    )
+  }
+
+  return badge
+}

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View } from 'react-native'
+import { BodyMap, type BodyMapData } from './BodyMap'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const sampleData: BodyMapData[] = [
+  { muscleGroup: MuscleGroup.CHEST, intensity: 0.7, volumeStatus: 'productive', weeklySets: 12 },
+  {
+    muscleGroup: MuscleGroup.FRONT_DELTS,
+    intensity: 0.5,
+    volumeStatus: 'maintenance',
+    weeklySets: 5,
+  },
+  {
+    muscleGroup: MuscleGroup.SIDE_DELTS,
+    intensity: 0.6,
+    volumeStatus: 'productive',
+    weeklySets: 10,
+  },
+  { muscleGroup: MuscleGroup.BICEPS, intensity: 0.3, volumeStatus: 'under', weeklySets: 3 },
+  { muscleGroup: MuscleGroup.TRICEPS, intensity: 0.65, volumeStatus: 'productive', weeklySets: 8 },
+  { muscleGroup: MuscleGroup.ABS, intensity: 0.4, volumeStatus: 'maintenance', weeklySets: 6 },
+  {
+    muscleGroup: MuscleGroup.OBLIQUES,
+    intensity: 0.35,
+    volumeStatus: 'maintenance',
+    weeklySets: 4,
+  },
+  { muscleGroup: MuscleGroup.QUADS, intensity: 0.95, volumeStatus: 'over', weeklySets: 20 },
+]
+
+const backData: BodyMapData[] = [
+  { muscleGroup: MuscleGroup.LATS, intensity: 0.6, volumeStatus: 'productive', weeklySets: 11 },
+  {
+    muscleGroup: MuscleGroup.UPPER_BACK,
+    intensity: 0.5,
+    volumeStatus: 'maintenance',
+    weeklySets: 8,
+  },
+  { muscleGroup: MuscleGroup.REAR_DELTS, intensity: 0.3, volumeStatus: 'under', weeklySets: 4 },
+  { muscleGroup: MuscleGroup.TRICEPS, intensity: 0.65, volumeStatus: 'productive', weeklySets: 8 },
+  { muscleGroup: MuscleGroup.GLUTES, intensity: 0.7, volumeStatus: 'productive', weeklySets: 10 },
+  {
+    muscleGroup: MuscleGroup.HAMSTRINGS,
+    intensity: 0.55,
+    volumeStatus: 'productive',
+    weeklySets: 9,
+  },
+  { muscleGroup: MuscleGroup.CALVES, intensity: 0.2, volumeStatus: 'under', weeklySets: 3 },
+]
+
+const meta: Meta<typeof BodyMap> = {
+  title: 'Custom/Workout/BodyMap',
+  component: BodyMap,
+  tags: ['autodocs'],
+  argTypes: {
+    view: { control: 'inline-radio', options: ['front', 'back'] },
+    mode: { control: 'inline-radio', options: ['simple', 'detailed'] },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16, maxWidth: 320 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof BodyMap>
+
+export const Front: Story = {
+  args: { data: sampleData, view: 'front', mode: 'detailed' },
+}
+
+export const Back: Story = {
+  args: { data: backData, view: 'back', mode: 'detailed' },
+}
+
+export const Simple: Story = {
+  args: { data: sampleData, view: 'front', mode: 'simple' },
+}
+
+export const Detailed: Story = {
+  args: { data: sampleData, view: 'front', mode: 'detailed' },
+}
+
+export const Highlighted: Story = {
+  args: {
+    data: sampleData,
+    view: 'front',
+    mode: 'detailed',
+    highlightedMuscle: MuscleGroup.QUADS,
+  },
+}
+
+export const Empty: Story = {
+  args: { data: [], view: 'front' },
+}
+
+function InteractiveBodyMap() {
+  const [view, setView] = useState<'front' | 'back'>('front')
+  const [selected, setSelected] = useState<MuscleGroup | null>(null)
+  return (
+    <View style={{ maxWidth: 320 }}>
+      <BodyMap
+        data={view === 'front' ? sampleData : backData}
+        view={view}
+        onViewChange={setView}
+        onMusclePress={(m) => setSelected((cur) => (cur === m ? null : m))}
+        highlightedMuscle={selected}
+        mode="detailed"
+      />
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveBodyMap />,
+}

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

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { BodyMap, type BodyMapData } from './BodyMap'
+import { MuscleGroup } from './muscleTaxonomy'
+
+const data: BodyMapData[] = [
+  { muscleGroup: MuscleGroup.CHEST, intensity: 0.7, volumeStatus: 'productive', weeklySets: 12 },
+  { muscleGroup: MuscleGroup.LATS, intensity: 0.4, volumeStatus: 'under', weeklySets: 6 },
+  { muscleGroup: MuscleGroup.QUADS, intensity: 0.9, volumeStatus: 'over', weeklySets: 20 },
+]
+
+describe('BodyMap', () => {
+  describe('rendering', () => {
+    it('renders the container, SVG, and view toggle', () => {
+      render(<BodyMap data={data} view="front" />)
+      expect(screen.getByTestId('body-map')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-svg')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-view-toggle')).toBeInTheDocument()
+    })
+
+    it('renders the SVG body for both front and back views', () => {
+      const { rerender, container } = render(<BodyMap data={data} view="front" />)
+      expect(container.querySelector('svg')).toBeInTheDocument()
+      rerender(<BodyMap data={data} view="back" />)
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('renders one legend button per muscle in detailed mode', () => {
+      render(<BodyMap data={data} view="front" mode="detailed" />)
+      expect(screen.getByTestId('body-map-muscle-chest')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-muscle-lats')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-muscle-quads')).toBeInTheDocument()
+    })
+
+    it('aggregates muscles into simple groups in simple mode', () => {
+      render(<BodyMap data={data} view="front" mode="simple" />)
+      // chest -> chest, lats -> back, quads -> legs
+      expect(screen.getByTestId('body-map-muscle-chest')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-muscle-back')).toBeInTheDocument()
+      expect(screen.getByTestId('body-map-muscle-legs')).toBeInTheDocument()
+      expect(screen.queryByTestId('body-map-muscle-lats')).not.toBeInTheDocument()
+    })
+
+    it('renders an empty hint when there is no data', () => {
+      render(<BodyMap data={[]} view="front" />)
+      expect(screen.getByTestId('body-map-empty')).toBeInTheDocument()
+      expect(screen.queryByTestId('body-map-legend')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('interaction', () => {
+    it('calls onMusclePress with the tapped muscle group', () => {
+      const onMusclePress = vi.fn()
+      render(<BodyMap data={data} view="front" onMusclePress={onMusclePress} />)
+      fireEvent.click(screen.getByTestId('body-map-muscle-chest'))
+      expect(onMusclePress).toHaveBeenCalledWith(MuscleGroup.CHEST)
+    })
+
+    it('reports a representative detailed muscle from a simple group tap', () => {
+      const onMusclePress = vi.fn()
+      render(<BodyMap data={data} view="front" mode="simple" onMusclePress={onMusclePress} />)
+      fireEvent.click(screen.getByTestId('body-map-muscle-back'))
+      expect(onMusclePress).toHaveBeenCalledWith(MuscleGroup.LATS)
+    })
+
+    it('calls onViewChange from the front/back toggle', () => {
+      const onViewChange = vi.fn()
+      render(<BodyMap data={data} view="front" onViewChange={onViewChange} />)
+      fireEvent.click(screen.getByTestId('body-map-toggle-back'))
+      expect(onViewChange).toHaveBeenCalledWith('back')
+      fireEvent.click(screen.getByTestId('body-map-toggle-front'))
+      expect(onViewChange).toHaveBeenCalledWith('front')
+    })
+  })
+
+  describe('highlighted muscle', () => {
+    it('marks the highlighted muscle button as pressed', () => {
+      render(<BodyMap data={data} view="front" highlightedMuscle={MuscleGroup.CHEST} />)
+      expect(screen.getByTestId('body-map-muscle-chest')).toHaveAttribute('aria-pressed', 'true')
+      expect(screen.getByTestId('body-map-muscle-lats')).toHaveAttribute('aria-pressed', 'false')
+    })
+
+    it('applies an edge glow when a muscle is highlighted', () => {
+      render(<BodyMap data={data} view="front" highlightedMuscle={MuscleGroup.QUADS} />)
+      const svg = screen.getByTestId('body-map-svg')
+      expect(svg.getAttribute('style') ?? '').toContain('box-shadow')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('labels each muscle button with name, status, and weekly sets', () => {
+      render(<BodyMap data={data} view="front" />)
+      expect(screen.getByLabelText('Chest, productive, 12 sets this week')).toBeInTheDocument()
+      expect(screen.getByLabelText('Lats, under-trained, 6 sets this week')).toBeInTheDocument()
+    })
+
+    it('labels the view toggle buttons', () => {
+      render(<BodyMap data={data} view="front" onViewChange={vi.fn()} />)
+      expect(screen.getByLabelText('Show front view')).toBeInTheDocument()
+      expect(screen.getByLabelText('Show back view')).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations with data', async () => {
+      const { container } = render(
+        <BodyMap
+          data={data}
+          view="front"
+          onViewChange={vi.fn()}
+          onMusclePress={vi.fn()}
+          highlightedMuscle={MuscleGroup.CHEST}
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when empty', async () => {
+      const { container } = render(<BodyMap data={[]} view="back" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,347 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useEffect, useMemo, useState } from 'react'
+import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+import BodyHighlighter, { type ExtendedBodyPart, type Slug } from 'react-native-body-highlighter'
+import { cn } from '../../../utils/cn'
+import {
+  MuscleGroup,
+  SimpleMuscleGroup,
+  MUSCLE_TO_SVG_SLUGS,
+  MUSCLE_DISPLAY_NAMES,
+  SIMPLE_DISPLAY_NAMES,
+  DETAILED_TO_SIMPLE,
+  SLUG_TO_PRIMARY_MUSCLE,
+  VOLUME_STATUS_LABELS,
+  getHeatmapColor,
+  isMoreSevere,
+  type VolumeStatus,
+} from './muscleTaxonomy'
+
+/**
+ * react-native-body-highlighter is published as a CommonJS default export; the
+ * interop keeps it working whether the bundler unwraps the default or not.
+ */
+const Body = ((BodyHighlighter as unknown as { default?: typeof BodyHighlighter }).default ??
+  BodyHighlighter) as typeof BodyHighlighter
+
+const OUTLINE_FILL = 'rgba(255,255,255,0.08)'
+const OUTLINE_BORDER = 'rgba(255,255,255,0.12)'
+const BODY_SCALE = 0.8 // 200x400 intrinsic -> ~160x320 px
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
+
+export interface BodyMapData {
+  muscleGroup: MuscleGroup
+  /** Intensity 0-1 for heatmap color. */
+  intensity: number
+  /** Volume status for tooltip / heatmap token. */
+  volumeStatus: VolumeStatus
+  /** Weekly effective sets. */
+  weeklySets: number
+}
+
+export interface BodyMapProps extends ViewProps {
+  /** Muscle group intensity data. */
+  data: BodyMapData[]
+  /** Which view to show. */
+  view: 'front' | 'back'
+  /** Toggle between front/back. */
+  onViewChange?: (view: 'front' | 'back') => void
+  /** Called when a muscle group is tapped. */
+  onMusclePress?: (muscleGroup: MuscleGroup) => void
+  /** Currently highlighted muscle (from external selection). */
+  highlightedMuscle?: MuscleGroup | null
+  /** Show simplified (8 groups) or detailed (15 groups). */
+  mode?: 'simple' | 'detailed'
+  className?: string
+}
+
+interface LegendEntry {
+  key: string
+  name: string
+  status: VolumeStatus
+  intensity: number
+  sets: number
+  /** Detailed group reported to onMusclePress. */
+  muscle: MuscleGroup
+}
+
+/** Build the per-slug heatmap fill list, combining groups that share a slug. */
+function buildSlugParts(data: BodyMapData[]): ExtendedBodyPart[] {
+  const bySlug = new Map<string, { status: VolumeStatus; intensity: number }>()
+  for (const d of data) {
+    for (const slug of MUSCLE_TO_SVG_SLUGS[d.muscleGroup] ?? []) {
+      const existing = bySlug.get(slug)
+      if (!existing || isMoreSevere(d.volumeStatus, existing.status)) {
+        bySlug.set(slug, { status: d.volumeStatus, intensity: d.intensity })
+      }
+    }
+  }
+  return Array.from(bySlug.entries()).map(([slug, v]) => ({
+    slug: slug as Slug,
+    color: getHeatmapColor(v.status, v.intensity),
+  }))
+}
+
+/** Collapse data into per-simple-group legend entries (summed sets). */
+function buildSimpleLegend(data: BodyMapData[]): LegendEntry[] {
+  const bySimple = new Map<SimpleMuscleGroup, LegendEntry>()
+  for (const d of data) {
+    const simple = DETAILED_TO_SIMPLE[d.muscleGroup]
+    const existing = bySimple.get(simple)
+    if (!existing) {
+      bySimple.set(simple, {
+        key: simple,
+        name: SIMPLE_DISPLAY_NAMES[simple],
+        status: d.volumeStatus,
+        intensity: d.intensity,
+        sets: d.weeklySets,
+        muscle: d.muscleGroup,
+      })
+      continue
+    }
+    existing.sets += d.weeklySets
+    existing.intensity = Math.max(existing.intensity, d.intensity)
+    if (isMoreSevere(d.volumeStatus, existing.status)) {
+      existing.status = d.volumeStatus
+      existing.muscle = d.muscleGroup
+    }
+  }
+  return Array.from(bySimple.values())
+}
+
+/** One legend entry per data row, named by detailed group. */
+function buildDetailedLegend(data: BodyMapData[]): LegendEntry[] {
+  return data.map((d) => ({
+    key: d.muscleGroup,
+    name: MUSCLE_DISPLAY_NAMES[d.muscleGroup],
+    status: d.volumeStatus,
+    intensity: d.intensity,
+    sets: d.weeklySets,
+    muscle: d.muscleGroup,
+  }))
+}
+
+/**
+ * Interactive SVG body map with tappable muscle groups and a volume heatmap.
+ * Renders the front or back view (toggle via onViewChange), colors each muscle
+ * by its weekly-volume status, and exposes an accessible muscle legend wired to
+ * onMusclePress. Phase 1 uses react-native-body-highlighter's combined slugs
+ * (deltoids as one path, lats/upper-back shared); swipe between views and the
+ * delt/lat SVG split are follow-ups.
+ *
+ * @example
+ * <BodyMap
+ *   data={[{ muscleGroup: MuscleGroup.CHEST, intensity: 0.7, volumeStatus: 'productive', weeklySets: 12 }]}
+ *   view="front"
+ *   onViewChange={setView}
+ *   onMusclePress={setSelected}
+ *   highlightedMuscle={selected}
+ * />
+ */
+export function BodyMap({
+  data,
+  view,
+  onViewChange,
+  onMusclePress,
+  highlightedMuscle,
+  mode = 'detailed',
+  className,
+  ...props
+}: BodyMapProps) {
+  const slugParts = useMemo(() => buildSlugParts(data), [data])
+  const legend = useMemo(
+    () => (mode === 'simple' ? buildSimpleLegend(data) : buildDetailedLegend(data)),
+    [data, mode]
+  )
+
+  const [highlight] = useState(() => new Animated.Value(highlightedMuscle ? 1 : 0))
+  useEffect(() => {
+    const animation = Animated.timing(highlight, {
+      toValue: highlightedMuscle ? 1 : 0,
+      duration: 250,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    })
+    animation.start()
+    return () => animation.stop()
+  }, [highlightedMuscle, highlight])
+
+  const scale = highlight.interpolate({ inputRange: [0, 1], outputRange: [1, 1.02] })
+  const glowColor = highlightedMuscle
+    ? getHeatmapColor(
+        data.find((d) => d.muscleGroup === highlightedMuscle)?.volumeStatus,
+        data.find((d) => d.muscleGroup === highlightedMuscle)?.intensity ?? 0
+      )
+    : null
+
+  const handleBodyPress = (part: ExtendedBodyPart) => {
+    if (!onMusclePress || !part.slug) return
+    const fromData = data.find((d) =>
+      (MUSCLE_TO_SVG_SLUGS[d.muscleGroup] ?? []).includes(part.slug as string)
+    )
+    const muscle = fromData?.muscleGroup ?? SLUG_TO_PRIMARY_MUSCLE[part.slug]
+    if (muscle) onMusclePress(muscle)
+  }
+
+  return (
+    <View className={cn(className)} testID="body-map" {...props}>
+      <ViewToggle view={view} onViewChange={onViewChange} />
+
+      <Animated.View
+        style={[
+          {
+            width: 200 * BODY_SCALE,
+            alignSelf: 'center',
+            transform: [{ scale }],
+          },
+          glowColor ? { boxShadow: `0 0 14px 2px ${glowColor}` } : undefined,
+        ]}
+        // The SVG is decorative; the accessible muscle legend below is the
+        // screen-reader / keyboard interface.
+        aria-hidden
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        testID="body-map-svg"
+      >
+        <Body
+          side={view}
+          data={slugParts}
+          scale={BODY_SCALE}
+          gender="male"
+          defaultFill={OUTLINE_FILL}
+          border={OUTLINE_BORDER}
+          onBodyPartPress={handleBodyPress}
+        />
+      </Animated.View>
+
+      {legend.length === 0 ? (
+        <Text
+          style={{
+            marginTop: 8,
+            fontSize: 12,
+            color: TEXT_SECONDARY,
+            textAlign: 'center',
+            fontFamily: 'Inter, sans-serif',
+          }}
+          testID="body-map-empty"
+        >
+          No training data
+        </Text>
+      ) : (
+        <View
+          className="flex-row flex-wrap"
+          style={{ marginTop: 10, gap: 6, justifyContent: 'center' }}
+          testID="body-map-legend"
+        >
+          {legend.map((entry) => (
+            <MuscleButton
+              key={entry.key}
+              entry={entry}
+              highlighted={highlightedMuscle === entry.muscle}
+              onMusclePress={onMusclePress}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}
+
+interface ViewToggleProps {
+  view: 'front' | 'back'
+  onViewChange?: (view: 'front' | 'back') => void
+}
+
+function ViewToggle({ view, onViewChange }: ViewToggleProps) {
+  return (
+    <View
+      className="flex-row self-center"
+      style={{ gap: 4, marginBottom: 8 }}
+      testID="body-map-view-toggle"
+    >
+      {(['front', 'back'] as const).map((side) => {
+        const active = view === side
+        return (
+          <Pressable
+            key={side}
+            onPress={() => onViewChange?.(side)}
+            accessibilityRole="button"
+            accessibilityLabel={`Show ${side} view`}
+            aria-pressed={active}
+            disabled={!onViewChange}
+            style={{
+              paddingHorizontal: 12,
+              paddingVertical: 4,
+              borderRadius: 9999,
+              backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
+              borderWidth: 1,
+              borderColor: active ? '#FF7900' : 'var(--color-border-strong)',
+            }}
+            testID={`body-map-toggle-${side}`}
+          >
+            <Text
+              style={{
+                fontSize: 12,
+                fontFamily: 'Inter, sans-serif',
+                fontWeight: active ? '700' : '500',
+                color: active ? '#FF7900' : TEXT_SECONDARY,
+                textTransform: 'capitalize',
+              }}
+            >
+              {side}
+            </Text>
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
+
+interface MuscleButtonProps {
+  entry: LegendEntry
+  highlighted: boolean
+  onMusclePress?: (muscleGroup: MuscleGroup) => void
+}
+
+function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps) {
+  const dotColor = getHeatmapColor(entry.status, entry.intensity)
+  const label = `${entry.name}, ${VOLUME_STATUS_LABELS[entry.status]}, ${entry.sets} sets this week`
+  return (
+    <Pressable
+      onPress={() => onMusclePress?.(entry.muscle)}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      aria-pressed={highlighted}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        borderRadius: 9999,
+        borderWidth: 1,
+        borderColor: highlighted ? '#FF7900' : 'var(--color-border-default)',
+        backgroundColor: 'var(--color-surface-raised)',
+      }}
+      testID={`body-map-muscle-${entry.key}`}
+    >
+      <View
+        style={{ width: 7, height: 7, borderRadius: 9999, backgroundColor: dotColor }}
+        accessibilityElementsHidden
+        testID={`body-map-muscle-dot-${entry.key}`}
+      />
+      <Text
+        style={{
+          fontSize: 11,
+          fontFamily: 'Inter, sans-serif',
+          fontWeight: '500',
+          color: TEXT_PRIMARY,
+        }}
+        accessibilityElementsHidden
+      >
+        {entry.name}
+      </Text>
+    </Pressable>
+  )
+}