@titan-design/react-ui 0.5.0 → 0.7.0

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

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { LiveAuraFrame } from './LiveAuraFrame'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
+
+/** A representative live-workout hero so the full-surface flood reads against real content. */
+function LiveHero({ caption }: { caption: string }) {
+  return (
+    <View style={{ flex: 1, padding: 24, justifyContent: 'space-between' }}>
+      <View>
+        <Text
+          style={{
+            fontSize: 11,
+            fontWeight: '800',
+            letterSpacing: 1.2,
+            textTransform: 'uppercase',
+            color: t['text-tertiary'],
+          }}
+        >
+          Cable Row · Set 4 / 5
+        </Text>
+      </View>
+
+      <View style={{ alignItems: 'center' }}>
+        <Text
+          style={{ fontSize: 96, fontWeight: '800', lineHeight: 100, color: t['text-primary'] }}
+        >
+          8
+        </Text>
+        <Text
+          style={{
+            fontSize: 12,
+            letterSpacing: 2,
+            textTransform: 'uppercase',
+            color: t['text-tertiary'],
+          }}
+        >
+          reps
+        </Text>
+      </View>
+
+      <View>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 12 }}>
+          {[
+            ['0.42', 'm/s'],
+            ['8.5', 'RPE'],
+            ['−18%', 'vel loss'],
+          ].map(([v, l]) => (
+            <View key={l} style={{ alignItems: 'center' }}>
+              <Text style={{ fontSize: 20, fontWeight: '700', color: t['text-primary'] }}>{v}</Text>
+              <Text
+                style={{
+                  fontSize: 9,
+                  letterSpacing: 1,
+                  textTransform: 'uppercase',
+                  color: t['text-tertiary'],
+                }}
+              >
+                {l}
+              </Text>
+            </View>
+          ))}
+        </View>
+        <Text style={{ fontSize: 12, color: t['text-secondary'], textAlign: 'center' }}>
+          {caption}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+const PANEL = { width: 360, height: 620, borderRadius: 24, overflow: 'hidden' as const }
+
+const meta: Meta<typeof LiveAuraFrame> = {
+  title: 'Workout/LiveAuraFrame',
+  component: LiveAuraFrame,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Full-surface color-flood frame tied to a coaching category. Wraps content on a charcoal ' +
+          'base and layers a radial wash — amber at threshold (VL20), red at stop (VL28+, pulsing) — ' +
+          'derived from the semantic warning / error tokens via `alpha()`. Children pass through. ' +
+          'Rendered here at live-screen size so the flood reads (it is meant to tint a whole panel, ' +
+          'not a card).',
+      },
+    },
+  },
+  argTypes: {
+    category: {
+      control: 'select',
+      options: ['productive', 'threshold', 'stop'],
+      description: 'Coaching-category flood level',
+    },
+    pulse: { control: 'boolean', description: 'Pulse the flood on stop' },
+  },
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          minHeight: 700,
+          backgroundColor: '#070707',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 32,
+        }}
+      >
+        <Story />
+      </View>
+    ),
+  ],
+  render: (args) => (
+    <LiveAuraFrame {...args} style={PANEL}>
+      <LiveHero
+        caption={
+          args.category === 'stop'
+            ? 'red flood — VL28+, stop the set'
+            : args.category === 'threshold'
+              ? 'amber flood — VL20 threshold reached'
+              : 'no flood — productive, quiet background'
+        }
+      />
+    </LiveAuraFrame>
+  ),
+}
+
+export default meta
+type Story = StoryObj<typeof LiveAuraFrame>
+
+export const Productive: Story = { args: { category: 'productive' } }
+export const Threshold: Story = { args: { category: 'threshold' } }
+export const Stop: Story = { args: { category: 'stop' } }
+
+/** All three flood levels side by side at live-screen size. */
+export const AllStates: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 20, flexWrap: 'wrap', justifyContent: 'center' }}>
+      <LiveAuraFrame category="productive" style={PANEL}>
+        <LiveHero caption="no flood — productive" />
+      </LiveAuraFrame>
+      <LiveAuraFrame category="threshold" style={PANEL}>
+        <LiveHero caption="amber flood — VL20 threshold" />
+      </LiveAuraFrame>
+      <LiveAuraFrame category="stop" pulse={false} style={PANEL}>
+        <LiveHero caption="red flood — VL28+, stop" />
+      </LiveAuraFrame>
+    </View>
+  ),
+}

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

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Text } from 'react-native'
+import { LiveAuraFrame, liveAuraColor, type LiveAuraCategory } from './LiveAuraFrame'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
+
+describe('LiveAuraFrame', () => {
+  it('renders the frame and passes children through', () => {
+    render(
+      <LiveAuraFrame category="productive">
+        <Text>Cable Row</Text>
+      </LiveAuraFrame>
+    )
+    expect(screen.getByTestId('live-aura-frame')).toBeInTheDocument()
+    expect(screen.getByText('Cable Row')).toBeInTheDocument()
+  })
+
+  it('sits on the charcoal base surface', () => {
+    render(<LiveAuraFrame category="productive" />)
+    expect(screen.getByTestId('live-aura-frame')).toHaveStyle({
+      backgroundColor: t['background-base'],
+    })
+  })
+
+  it('renders no flood overlay for the productive (quiet) category', () => {
+    render(<LiveAuraFrame category="productive" />)
+    expect(screen.queryByTestId('live-aura-flood')).not.toBeInTheDocument()
+  })
+
+  const floods: Array<{
+    category: LiveAuraCategory
+    token: 'status-warning' | 'status-error'
+    opacity: number
+  }> = [
+    { category: 'threshold', token: 'status-warning', opacity: 0.12 },
+    { category: 'stop', token: 'status-error', opacity: 0.18 },
+  ]
+
+  floods.forEach(({ category, token, opacity }) => {
+    it(`floods ${category} with a ${token}-tinted radial wash that fades to transparent`, () => {
+      render(<LiveAuraFrame category={category} />)
+      // Web (the target): a top-down radial gradient tinted with the token color,
+      // fading to transparent — matches R2's .aura-* CSS, NOT a flat surface fill.
+      const flood = screen.getByTestId('live-aura-flood') as HTMLElement
+      expect(flood.style.backgroundImage).toContain(alpha(t[token], opacity))
+      expect(flood.style.backgroundImage).toContain('transparent')
+      expect(flood.style.backgroundColor).toBe('')
+    })
+  })
+
+  it('exposes the resolved flood color via liveAuraColor', () => {
+    expect(liveAuraColor('productive')).toBeNull()
+    expect(liveAuraColor('threshold')).toBe(t['status-warning'])
+    expect(liveAuraColor('stop')).toBe(t['status-error'])
+  })
+
+  it('renders the flood for stop when pulse is disabled', () => {
+    render(<LiveAuraFrame category="stop" pulse={false} />)
+    expect(screen.getByTestId('live-aura-flood')).toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(
+      <LiveAuraFrame category="stop">
+        <Text>Set 4/5</Text>
+      </LiveAuraFrame>
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -0,0 +1,105 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, StyleSheet, Platform, type ViewProps, type ViewStyle } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
+
+/**
+ * Coaching-category flood level for the live surface. Mirrors {@link StatusPill}:
+ * - `productive` — quiet, no flood
+ * - `threshold`  — amber wash at VL20
+ * - `stop`       — red wash at VL28+ (optionally pulsing)
+ */
+export type LiveAuraCategory = 'productive' | 'threshold' | 'stop'
+
+export interface LiveAuraFrameProps extends ViewProps {
+  category: LiveAuraCategory
+  /**
+   * Pulse the flood on `stop`. Uses the nativewind `animate-pulse` utility so
+   * it stays static-friendly under test (className→style, no live clock).
+   * Defaults to true.
+   */
+  pulse?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+const categoryToken: Record<LiveAuraCategory, 'status-warning' | 'status-error' | null> = {
+  productive: null,
+  threshold: 'status-warning',
+  stop: 'status-error',
+}
+
+const floodOpacity: Record<LiveAuraCategory, number> = {
+  productive: 0,
+  threshold: 0.12,
+  stop: 0.18,
+}
+
+/** Resolved flood color for a category, or `null` when there is no flood. */
+export function liveAuraColor(category: LiveAuraCategory): string | null {
+  const token = categoryToken[category]
+  return token ? t[token] : null
+}
+
+/**
+ * Full-surface color-flood frame tied to a coaching category. Wraps `children`
+ * on a charcoal base and layers a radial wash (amber at threshold, red at stop)
+ * as a decorative, pointer-transparent overlay. The wash uses a solid
+ * `backgroundColor` fallback (native) plus a web-only `backgroundImage` radial
+ * gradient; both derive from the same semantic token via `alpha()`.
+ */
+export function LiveAuraFrame({
+  category,
+  pulse = true,
+  className,
+  children,
+  style,
+  ...props
+}: LiveAuraFrameProps) {
+  const color = liveAuraColor(category)
+  const tint = color ? alpha(color, floodOpacity[category]) : 'transparent'
+
+  // Match R2's canonical aura: a top-down radial wash that FADES TO TRANSPARENT
+  // by ~62%, so the charcoal base shows through the lower panel — NOT a flat
+  // full-surface tint. On web (the target: MCP dashboard + Storybook) render the
+  // gradient only; native has no gradient support, so fall back to a solid tint.
+  const floodStyle = {
+    ...StyleSheet.absoluteFillObject,
+    ...(Platform.OS === 'web'
+      ? // backgroundImage is a runtime RNW style, not in RN ViewStyle types.
+        { backgroundImage: `radial-gradient(130% 95% at 50% 0%, ${tint}, transparent 62%)` }
+      : { backgroundColor: tint }),
+  } as ViewStyle
+
+  return (
+    <View
+      testID="live-aura-frame"
+      className={className}
+      style={[
+        {
+          position: 'relative',
+          overflow: 'hidden',
+          borderRadius: 10,
+          backgroundColor: t['background-base'],
+          borderWidth: 1,
+          borderColor: t['border-default'],
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {color && (
+        <View
+          testID="live-aura-flood"
+          accessibilityElementsHidden
+          pointerEvents="none"
+          className={category === 'stop' && pulse ? 'animate-pulse' : undefined}
+          style={floodStyle}
+        />
+      )}
+      {children}
+    </View>
+  )
+}

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

@@ -48,7 +48,7 @@ const weeks: WeekRowProps[] = [
 ]
 
 const meta: Meta<typeof MesoCard> = {
-  title: 'Custom/Workout/MesoCard',
+  title: 'Workout/MesoCard',
   component: MesoCard,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,10 +4,15 @@ import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-n
 import { Card } from '../../ui/card'
 import { Badge } from '../../ui/badge'
 import { WeekRow, type WeekRowProps } from './WeekRow'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import {
+  MESO_ACCENT_GRADIENT_DARK,
+  MESO_ACCENT_GRADIENT_LIGHT,
+} from '../../../theme/extracted-colors-dataviz'
 
-const BRAND_PRIMARY = '#FF7900'
-const BRAND_PRIMARY_DARK = '#C45E00'
-const BRAND_PRIMARY_LIGHT = '#FFB066'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+const BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK
+const BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT
 const BORDER_DEFAULT = '#1F1F1F'
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light. */

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

@@ -4,7 +4,7 @@ import { View } from 'react-native'
 import { MesoProgressBar, type Meso } from './MesoProgressBar'
 
 const meta: Meta<typeof MesoProgressBar> = {
-  title: 'Custom/Workout/MesoProgressBar',
+  title: 'Workout/MesoProgressBar',
   component: MesoProgressBar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -40,7 +40,7 @@ describe('MesoProgressBar', () => {
     it('applies completed color at 0.3 alpha', () => {
       render(<MesoProgressBar mesos={mesos} activeMesoId={null} onMesoPress={vi.fn()} />)
       expect(screen.getByTestId('meso-segment-inner-m1')).toHaveStyle({
-        backgroundColor: 'rgba(20,184,166,0.3)',
+        backgroundColor: 'rgba(46,213,115,0.3)',
       })
     })
 

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

@@ -1,8 +1,9 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
 import { View, Pressable, Animated, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 export type MesoStatus = 'completed' | 'current' | 'upcoming'
 
@@ -26,7 +27,7 @@ export interface MesoProgressBarProps extends ViewProps {
 }
 
 const segmentBgColors: Record<MesoStatus, string> = {
-  completed: 'rgba(20,184,166,0.3)',
+  completed: 'rgba(46,213,115,0.3)',
   current: 'rgba(255,121,0,0.5)',
   upcoming: 'rgba(255,255,255,0.06)',
 }

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { MesoStatusCard } from './MesoStatusCard'
 
 const meta: Meta<typeof MesoStatusCard> = {
-  title: 'Custom/Workout/MesoStatusCard',
+  title: 'Workout/MesoStatusCard',
   component: MesoStatusCard,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,14 +4,21 @@ import { View, Text, type ViewProps, type ViewStyle } from 'react-native'
 import { Card } from '../../ui/card'
 import { StatusDot } from './StatusDot'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import {
+  MESO_ACCENT_GRADIENT_DARK,
+  MESO_ACCENT_GRADIENT_LIGHT,
+} from '../../../theme/extracted-colors-dataviz'
 
-const BRAND_PRIMARY = '#FF7900'
-const BRAND_PRIMARY_DARK = '#C45E00'
-const BRAND_PRIMARY_LIGHT = '#FFB066'
+const t = getSemanticColors('dark')
 
-const SUCCESS = '#14B8A6'
-const WARNING = '#FFB020'
-const ERROR = '#D14343'
+const BRAND_PRIMARY = t['brand-primary']
+const BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK
+const BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT
+
+const SUCCESS = t['status-success']
+const WARNING = t['status-warning']
+const ERROR = t['status-error']
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light (matches MesoCard). */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
@@ -25,7 +32,7 @@ const CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor('surface-elevated'
 
 /** Gauge track gradient (teal -> amber -> red) at 0.25 alpha. */
 const GAUGE_GRADIENT =
-  'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)'
+  'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)'
 
 export type MesoStatusBadgeVariant = 'success' | 'warning' | 'error'
 
@@ -33,8 +40,8 @@ const STATUS_VARIANTS: Record<
   MesoStatusBadgeVariant,
   { bg: string; border: string; text: string }
 > = {
-  success: { bg: 'rgba(20,184,166,0.15)', border: 'rgba(20,184,166,0.3)', text: SUCCESS },
-  warning: { bg: 'rgba(255,176,32,0.15)', border: 'rgba(255,176,32,0.3)', text: WARNING },
+  success: { bg: 'rgba(46,213,115,0.15)', border: 'rgba(46,213,115,0.3)', text: SUCCESS },
+  warning: { bg: 'rgba(249,180,21,0.15)', border: 'rgba(249,180,21,0.3)', text: WARNING },
   error: { bg: 'rgba(209,67,67,0.15)', border: 'rgba(209,67,67,0.25)', text: ERROR },
 }
 
@@ -400,9 +407,9 @@ export function MesoStatusCard({
         {coaching != null && (
           <View
             style={{
-              backgroundColor: 'rgba(255,176,32,0.06)',
+              backgroundColor: 'rgba(249,180,21,0.06)',
               borderWidth: 1,
-              borderColor: 'rgba(255,176,32,0.15)',
+              borderColor: 'rgba(249,180,21,0.15)',
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 12,
@@ -427,9 +434,9 @@ export function MesoStatusCard({
             className="flex-row items-center"
             style={{
               gap: 8,
-              backgroundColor: 'rgba(20,184,166,0.06)',
+              backgroundColor: 'rgba(46,213,115,0.06)',
               borderWidth: 1,
-              borderColor: 'rgba(20,184,166,0.2)',
+              borderColor: 'rgba(46,213,115,0.2)',
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 12,

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { MetricTiles } from './MetricTiles'
+import { getSemanticColors } from '../../../theme'
+
+const AMBER = getSemanticColors('dark')['status-warning']
+
+const meta: Meta<typeof MetricTiles> = {
+  title: 'Workout/MetricTiles',
+  component: MetricTiles,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs). Used-by ↑ SessionHeader.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 246 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof MetricTiles>
+
+export const SessionStats: Story = {
+  args: {
+    metrics: [
+      { label: 'Volume', value: '76%' },
+      { label: 'Load', value: '7.3k' },
+      { label: 'Fatigue', value: 'MOD', valueColor: AMBER },
+    ],
+  },
+}
+
+export const TwoTiles: Story = {
+  args: {
+    metrics: [
+      { label: 'Time', value: '6:30 PM' },
+      { label: 'Until', value: '5h', valueColor: AMBER },
+    ],
+  },
+}
+
+export const FourTiles: Story = {
+  args: {
+    metrics: [
+      { label: 'Sets', value: '7/12' },
+      { label: 'Volume', value: '76%' },
+      { label: 'Load', value: '7.3k' },
+      { label: 'Fatigue', value: 'MOD', valueColor: AMBER },
+    ],
+  },
+}

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

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { MetricTiles } from './MetricTiles'
+
+const STATS = [
+  { label: 'Volume', value: '76%' },
+  { label: 'Load', value: '7.3k' },
+  { label: 'Fatigue', value: 'MOD', valueColor: '#F5A623' },
+]
+
+describe('MetricTiles', () => {
+  it('renders a tile per metric', () => {
+    render(<MetricTiles metrics={STATS} />)
+    expect(screen.getByText('Volume')).toBeInTheDocument()
+    expect(screen.getByText('76%')).toBeInTheDocument()
+    expect(screen.getByText('Load')).toBeInTheDocument()
+    expect(screen.getByText('7.3k')).toBeInTheDocument()
+    expect(screen.getByText('Fatigue')).toBeInTheDocument()
+    expect(screen.getByText('MOD')).toBeInTheDocument()
+  })
+
+  it('passes valueColor through to the tile value', () => {
+    render(<MetricTiles metrics={STATS} />)
+    expect(screen.getByText('MOD')).toHaveStyle({ color: '#F5A623' })
+  })
+
+  it('does not tint values without a valueColor', () => {
+    render(<MetricTiles metrics={STATS} />)
+    expect(screen.getByText('76%').style.color).toBe('')
+  })
+
+  it('reflows an arbitrary count of metrics', () => {
+    render(
+      <MetricTiles
+        metrics={[
+          { label: 'Time', value: '6:30 PM' },
+          { label: 'Until', value: '5h' },
+        ]}
+      />
+    )
+    expect(screen.getByText('6:30 PM')).toBeInTheDocument()
+    expect(screen.getByText('5h')).toBeInTheDocument()
+  })
+
+  it('passes additional props through', () => {
+    render(<MetricTiles metrics={STATS} testID="metric-tiles" />)
+    expect(screen.getByText('Volume')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<MetricTiles metrics={STATS} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,48 @@
+import { type ViewProps } from 'react-native'
+import { HStack } from '../../ui/stack'
+import { Tile } from '../../ui/tile'
+
+export interface MetricTileData {
+  /** Uppercase micro-label shown above the value */
+  label: string
+  /** Primary value */
+  value: string
+  /** Tints the value (status/accent hex); defaults to primary text */
+  valueColor?: string
+}
+
+export interface MetricTilesProps extends ViewProps {
+  /** Stat cells rendered left-to-right; typically three */
+  metrics: MetricTileData[]
+  /** Space between tiles (Stack gap scale, default 1 ≈ 4px) */
+  gap?: 0 | 1 | 2 | 3 | 4
+}
+
+/**
+ * MetricTiles — a row of equal-width stat tiles.
+ *
+ * A thin, presentational HStack of {@link Tile}. Each tile flexes to fill its
+ * share so the row reflows gracefully in a responsive rail. Used by SessionHeader
+ * for Volume / Load / Fatigue (and Date / Time / Until when upcoming).
+ *
+ * @example
+ * <MetricTiles metrics={[
+ *   { label: 'Volume', value: '76%' },
+ *   { label: 'Load', value: '7.3k' },
+ *   { label: 'Fatigue', value: 'MOD', valueColor: amber },
+ * ]} />
+ */
+export function MetricTiles({ metrics, gap = 1, ...props }: MetricTilesProps) {
+  return (
+    <HStack gap={gap} align="stretch" {...props}>
+      {metrics.map((metric) => (
+        <Tile
+          key={metric.label}
+          label={metric.label}
+          value={metric.value}
+          valueColor={metric.valueColor}
+        />
+      ))}
+    </HStack>
+  )
+}

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { MuscleGroupChip, type VolumeStatus } from './MuscleGroupChip'
 
 const meta: Meta<typeof MuscleGroupChip> = {
-  title: 'Custom/Workout/MuscleGroupChip',
+  title: 'Components/Atoms/MuscleGroupChip',
   component: MuscleGroupChip,
   tags: ['autodocs'],
   argTypes: {