@titan-design/react-ui 0.6.0 → 0.7.0

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

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SegmentedBar, type SegmentedBarSegment } from './SegmentedBar'
+
+const threeSegments: SegmentedBarSegment[] = [
+  { color: '#D14343' },
+  { color: '#FF7900' },
+  { color: '#2ED573' },
+]
+
+describe('SegmentedBar', () => {
+  it('renders one fill per segment', () => {
+    render(<SegmentedBar segments={threeSegments} />)
+    expect(screen.getAllByTestId('segmented-bar-segment')).toHaveLength(3)
+  })
+
+  it('honours the fill fraction as the fill width', () => {
+    render(<SegmentedBar segments={[{ color: '#2ED573', fill: 0.5 }]} />)
+    expect(screen.getByTestId('segmented-bar-segment')).toHaveStyle({ width: '50%' })
+  })
+
+  it('lets a composer override each segment testID', () => {
+    render(<SegmentedBar segments={threeSegments} segmentTestID={(_, i) => `seg-${i}`} />)
+    expect(screen.getByTestId('seg-0')).toBeInTheDocument()
+    expect(screen.getByTestId('seg-2')).toBeInTheDocument()
+  })
+
+  it('defaults to an 8px height and honours the height prop', () => {
+    const { rerender } = render(<SegmentedBar segments={threeSegments} testID="segmented-bar" />)
+    expect(screen.getByTestId('segmented-bar')).toHaveStyle({ height: '8px' })
+    rerender(<SegmentedBar segments={threeSegments} height={4} testID="segmented-bar" />)
+    expect(screen.getByTestId('segmented-bar')).toHaveStyle({ height: '4px' })
+  })
+
+  it('carves a leading gap before a segment as a fixed left margin on its slot', () => {
+    render(
+      <SegmentedBar
+        segments={[{ color: '#D14343' }, { color: '#FF7900', leadingGap: 3 }]}
+        gap={0}
+        segmentTestID={(_, i) => `seg-${i}`}
+      />
+    )
+    const slot = (fill: string) => screen.getByTestId(fill).parentElement as HTMLElement
+    expect(slot('seg-0')).not.toHaveStyle({ marginLeft: '3px' })
+    expect(slot('seg-1')).toHaveStyle({ marginLeft: '3px' })
+  })
+
+  it('applies a static fill opacity to a non-pulsing segment', () => {
+    render(<SegmentedBar segments={[{ color: '#0B3149', opacity: 0.36 }]} />)
+    expect(screen.getByTestId('segmented-bar-segment')).toHaveStyle({ opacity: 0.36 })
+  })
+
+  it('draws a marker line only when a marker is supplied', () => {
+    const { rerender } = render(<SegmentedBar segments={threeSegments} />)
+    expect(screen.queryByTestId('segmented-bar-marker')).not.toBeInTheDocument()
+    rerender(<SegmentedBar segments={threeSegments} marker={{ position: 0.5, color: '#01B5D1' }} />)
+    expect(screen.getByTestId('segmented-bar-marker')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <SegmentedBar
+          segments={[
+            { color: '#2ED573' },
+            { color: '#FF7900', pulse: true },
+            { color: '#3A3A3A', fill: 0.4 },
+          ]}
+          marker={{ position: 0.75, color: '#01B5D1' }}
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,172 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useEffect, useState } from 'react'
+import { View, Animated, Easing, type ViewProps, type DimensionValue } from 'react-native'
+
+/** ~1.9s full cycle: a pulsing segment eases up then back down (2 × half). */
+const PULSE_HALF_MS = 950
+
+/** Pulsing segments breathe their opacity between this floor and full. */
+const PULSE_MIN_OPACITY = 0.45
+
+/** Default between-segment gap — matches SetStrip's between-set gap so strips read the same. */
+const SEGMENTED_BAR_GAP = 5
+
+export interface SegmentedBarSegment {
+  /** Flex weight of this segment's slot. Default 1 (all segments equal width). */
+  weight?: number
+  /** Fraction 0..1 of the slot the coloured fill covers, left-aligned. Default 1 (full). */
+  fill?: number
+  /** Fill colour — a literal hex (RNW-safe), never a `var()` token ref. */
+  color: string
+  /** When true the fill animates on the shared active-pulse loop. */
+  pulse?: boolean
+  /**
+   * When pulsing, interpolate the fill's `backgroundColor` from→to over the loop
+   * (full opacity). Omit to fall back to the default opacity breathe.
+   */
+  pulseColor?: [from: string, to: string]
+  /**
+   * A fixed gap (px) carved in before this segment's slot — lets a composer split
+   * an otherwise-butted bar into sub-structure (drop notch, myo cluster) without a
+   * uniform {@link SegmentedBarProps.gap}. Default 0 (butted against the previous).
+   */
+  leadingGap?: number
+  /**
+   * Static fill opacity 0..1 for a non-pulsing segment (e.g. a fading "count
+   * unknown" trail). Ignored for `pulse` segments, which drive their own opacity.
+   */
+  opacity?: number
+}
+
+export interface SegmentedBarProps extends ViewProps {
+  /** The weighted segments, laid left-to-right. */
+  segments: SegmentedBarSegment[]
+  /** Track height in px. Default 8. */
+  height?: number
+  /** Gap between segment slots in px. Default 5 (SetStrip's between-set gap). */
+  gap?: number
+  /** Corner radius of each segment slot in px. Default 2. */
+  radius?: number
+  /** An absolutely-positioned vertical marker line at `position` (0..1 of total width). */
+  marker?: { position: number; color: string } | null
+  /**
+   * Resolve the testID of a segment's fill element. Lets a composing component
+   * (e.g. SetBar) preserve its own test hooks; defaults to `segmented-bar-segment`.
+   */
+  segmentTestID?: (segment: SegmentedBarSegment, index: number) => string | undefined
+}
+
+/** The shared active-pulse loop: a single 0→1→0 value driving every pulsing segment. */
+function usePulse(active: boolean): Animated.Value {
+  const [value] = useState(() => new Animated.Value(0))
+
+  useEffect(() => {
+    if (!active) return
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(value, {
+          toValue: 1,
+          duration: PULSE_HALF_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: false,
+        }),
+        Animated.timing(value, {
+          toValue: 0,
+          duration: PULSE_HALF_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: false,
+        }),
+      ])
+    )
+    loop.start()
+    return () => loop.stop()
+  }, [active, value])
+
+  return value
+}
+
+/**
+ * A horizontal track split into weighted, individually-fillable segments — the
+ * presentational atom the per-set strips are built from. Each segment is a flex
+ * slot (flex = `weight`) holding a left-aligned fill (`fill` fraction, `color`);
+ * `pulse` segments breathe on a shared active-pulse loop, and `marker` drops a
+ * vertical line at a fraction of the total width. Colours are passed-in literal hex.
+ */
+export function SegmentedBar({
+  segments,
+  height = 8,
+  gap = SEGMENTED_BAR_GAP,
+  radius = 2,
+  marker = null,
+  segmentTestID,
+  style,
+  ...props
+}: SegmentedBarProps) {
+  const pulse = usePulse(segments.some((s) => s.pulse))
+
+  return (
+    <View style={[{ flexDirection: 'row', height, gap, position: 'relative' }, style]} {...props}>
+      {segments.map((seg, i) => {
+        const fillStyle = {
+          width: `${(seg.fill ?? 1) * 100}%` as DimensionValue,
+          height: '100%' as DimensionValue,
+          backgroundColor: seg.color,
+          opacity: seg.opacity,
+        }
+        const testID = segmentTestID?.(seg, i) ?? 'segmented-bar-segment'
+        return (
+          <View
+            key={i}
+            style={{
+              flex: seg.weight ?? 1,
+              minWidth: 0,
+              height: '100%',
+              marginLeft: seg.leadingGap,
+              borderRadius: radius,
+              overflow: 'hidden',
+            }}
+          >
+            {seg.pulse ? (
+              <Animated.View
+                style={{
+                  ...fillStyle,
+                  ...(seg.pulseColor
+                    ? {
+                        backgroundColor: pulse.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: seg.pulseColor,
+                        }),
+                      }
+                    : {
+                        opacity: pulse.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [PULSE_MIN_OPACITY, 1],
+                        }),
+                      }),
+                }}
+                accessibilityElementsHidden
+                testID={testID}
+              />
+            ) : (
+              <View style={fillStyle} accessibilityElementsHidden testID={testID} />
+            )}
+          </View>
+        )
+      })}
+      {marker ? (
+        <View
+          style={{
+            position: 'absolute',
+            left: `${marker.position * 100}%` as DimensionValue,
+            top: 0,
+            bottom: 0,
+            width: 2,
+            backgroundColor: marker.color,
+          }}
+          accessibilityElementsHidden
+          testID="segmented-bar-marker"
+        />
+      ) : null}
+    </View>
+  )
+}

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

@@ -0,0 +1,50 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { SegmentedProgressBar } from './SegmentedProgressBar'
+
+const PLAN = [{ weight: 3 }, { weight: 3 }, { weight: 2 }, { weight: 2 }, { weight: 2 }]
+
+const meta: Meta<typeof SegmentedProgressBar> = {
+  title: 'Workout/SegmentedProgressBar',
+  component: SegmentedProgressBar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Atom.** Composes [SegmentedBar](?path=/docs/workout-segmentedbar--docs) + paceTone. Used-by ↑ SessionHeader.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 246, padding: 16, backgroundColor: '#242424' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof SegmentedProgressBar>
+
+/** Fill (sets done) trails the time marker → amber pace. */
+export const Behind: Story = {
+  args: { segments: PLAN, value: 7.2, target: 0.7 },
+}
+
+/** Fill is at or past the time marker → green pace. */
+export const Ahead: Story = {
+  args: { segments: PLAN, value: 9.5, target: 0.7 },
+}
+
+/** No target → no marker, plain steel progress. */
+export const NoTarget: Story = {
+  args: { segments: PLAN, value: 7 },
+}
+
+/** Nothing performed yet — the empty plan shape. */
+export const Empty: Story = {
+  args: { segments: PLAN, value: 0 },
+}

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

@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SegmentedProgressBar, type SegmentedProgressBarSegment } from './SegmentedProgressBar'
+import { paceTone, paceToneColor } from './paceTone'
+
+const PLAN: SegmentedProgressBarSegment[] = [
+  { weight: 3 },
+  { weight: 3 },
+  { weight: 2 },
+  { weight: 2 },
+  { weight: 2 },
+] // total = 12
+
+describe('SegmentedProgressBar', () => {
+  it('renders one segment fill per weighted slot', () => {
+    render(<SegmentedProgressBar segments={PLAN} value={0} />)
+    expect(screen.getAllByTestId('segmented-bar-segment')).toHaveLength(5)
+  })
+
+  it('fills each chunk by its clamped share of the cumulative value', () => {
+    // value 7 over weights [3,3,2,2,2]: 100%,100%,50%,0%,0%
+    render(<SegmentedProgressBar segments={PLAN} value={7} target={0.7} />)
+    const fills = screen.getAllByTestId('segmented-bar-segment')
+    expect(fills[0]).toHaveStyle({ width: '100%' })
+    expect(fills[1]).toHaveStyle({ width: '100%' })
+    expect(fills[2]).toHaveStyle({ width: '50%' })
+    expect(fills[3]).toHaveStyle({ width: '0%' })
+    expect(fills[4]).toHaveStyle({ width: '0%' })
+  })
+
+  it('uses the behind (warning) pace colour when fill trails the target', () => {
+    render(<SegmentedProgressBar segments={PLAN} value={7.2} target={0.7} />)
+    const behind = paceToneColor(paceTone(7.2 / 12, 0.7))
+    expect(screen.getAllByTestId('segmented-bar-segment')[0]).toHaveStyle({
+      backgroundColor: behind,
+    })
+  })
+
+  it('uses the ahead (success) pace colour when fill is at or past the target', () => {
+    render(<SegmentedProgressBar segments={PLAN} value={9.5} target={0.7} />)
+    const ahead = paceToneColor(paceTone(9.5 / 12, 0.7))
+    expect(screen.getAllByTestId('segmented-bar-segment')[0]).toHaveStyle({
+      backgroundColor: ahead,
+    })
+  })
+
+  it('is neutral (steel) with no marker when no target is given', () => {
+    render(<SegmentedProgressBar segments={PLAN} value={7} />)
+    expect(screen.queryByTestId('segmented-bar-marker')).not.toBeInTheDocument()
+    const neutral = paceToneColor('neutral')
+    expect(screen.getAllByTestId('segmented-bar-segment')[0]).toHaveStyle({
+      backgroundColor: neutral,
+    })
+  })
+
+  it('drops the overlay marker at the target position when target is given', () => {
+    render(<SegmentedProgressBar segments={PLAN} value={7.2} target={0.7} />)
+    const marker = screen.getByTestId('segmented-bar-marker')
+    expect(marker).toBeInTheDocument()
+    expect(marker).toHaveStyle({ left: '70%' })
+  })
+
+  it('lets an explicit colour override the pace tone', () => {
+    render(<SegmentedProgressBar segments={PLAN} value={7.2} target={0.7} color="#123456" />)
+    expect(screen.getAllByTestId('segmented-bar-segment')[0]).toHaveStyle({
+      backgroundColor: '#123456',
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <SegmentedProgressBar segments={PLAN} value={7.2} target={0.7} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,67 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { ViewProps } from 'react-native'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { SegmentedBar } from './SegmentedBar'
+import { paceTone, paceToneColor } from './paceTone'
+
+/** Default overlay-marker colour: status-live-muted — the SideNav "Live" cue / active-timer green. */
+const DEFAULT_MARKER_COLOR = primitiveRamps.green[500]
+
+export interface SegmentedProgressBarSegment {
+  /** Weight of this segment's slot — e.g. an exercise's planned set count. */
+  weight: number
+}
+
+export interface SegmentedProgressBarProps extends ViewProps {
+  /** The weighted segments, laid left-to-right (e.g. one per exercise). */
+  segments: SegmentedProgressBarSegment[]
+  /** Cumulative progress in the SAME units as the summed weights (e.g. sets done). May be fractional. */
+  value: number
+  /** 0..1 position for the overlay pace marker (e.g. elapsed / budget). Omit → no marker, neutral tone. */
+  target?: number
+  /** Overlay-marker colour. Default the live-green (status-live-muted). */
+  markerColor?: string
+  /** Override the single pace fill colour. Default = paceToneColor(paceTone(value / total, target)). */
+  color?: string
+  /** Track height in px. Passed through to SegmentedBar. */
+  height?: number
+  /** Gap between segment slots in px. Passed through to SegmentedBar. */
+  gap?: number
+}
+
+/**
+ * A progress bar segmented by weighted slots (one chunk per exercise, width ∝ its
+ * set count): `value` fills the chunks left-to-right, and a single pace colour spans
+ * them all — green when at/ahead of the `target` pace, amber when behind, steel when
+ * there is no target. An optional overlay marker pins the target position. Composes
+ * {@link SegmentedBar} + {@link paceTone}.
+ */
+export function SegmentedProgressBar({
+  segments,
+  value,
+  target,
+  markerColor = DEFAULT_MARKER_COLOR,
+  color,
+  height,
+  gap,
+  ...props
+}: SegmentedProgressBarProps) {
+  const total = segments.reduce((sum, s) => sum + s.weight, 0)
+  const fillColor = color ?? paceToneColor(paceTone(total > 0 ? value / total : 0, target))
+
+  const barSegments = segments.map((seg, i) => {
+    const cumulativeBefore = segments.slice(0, i).reduce((sum, s) => sum + s.weight, 0)
+    const fill = Math.max(0, Math.min(1, (value - cumulativeBefore) / seg.weight))
+    return { weight: seg.weight, fill, color: fillColor }
+  })
+
+  return (
+    <SegmentedBar
+      segments={barSegments}
+      marker={target != null ? { position: target, color: markerColor } : null}
+      height={height}
+      gap={gap}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { SessionHeader, type SessionHeaderPlanEntry } from './SessionHeader'
+
+/**
+ * `SessionHeader` — the session-rail heading: the session title over a stat row and a
+ * chunked pace bar. Live, it carries Volume/Load/Fatigue tiles, a per-exercise progress
+ * bar (fill ∝ sets done, coloured against the elapsed-vs-budget pace with a live marker),
+ * a mono `n/total sets` label and a ⏱ elapsed readout. Upcoming, the tiles become
+ * Date/Time/Until, the bar is the empty plan shape, and the readout shows the planned
+ * duration. Rendered on the raised charcoal plane.
+ */
+const meta: Meta<typeof SessionHeader> = {
+  title: 'Shell/SessionRail/SessionHeader',
+  component: SessionHeader,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule** (shell S3). The session-rail heading — title, stat tiles, chunked ' +
+          'pace bar, sets label + ⏱ readout, on the raised charcoal plane. Composes ' +
+          '[MetricTiles](?path=/docs/workout-metrictiles--docs) / ' +
+          '[ScheduleTiles](?path=/docs/workout-scheduletiles--docs) + ' +
+          '[SegmentedProgressBar](?path=/docs/workout-segmentedprogressbar--docs) + ' +
+          '[TimerReadout](?path=/docs/components-atoms-timerreadout--docs). ' +
+          'Used-by ↑ [SessionRail](?path=/docs/shell-sessionrail--docs).',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 246 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SessionHeader>
+
+const AMBER = primitiveRamps.amber[300]
+
+const PLAN: SessionHeaderPlanEntry[] = [
+  { name: 'Seated Row', sets: 3 },
+  { name: 'Incline DB', sets: 3 },
+  { name: 'Chest Press', sets: 2 },
+  { name: 'Calf Raise', sets: 2 },
+  { name: 'Face Pull', sets: 2 },
+]
+
+const LIVE_METRICS = [
+  { label: 'Volume', value: '76%' },
+  { label: 'Load', value: '7.3k' },
+  { label: 'Fatigue', value: 'MOD', valueColor: AMBER },
+]
+
+// 42:18 elapsed against a 60:00 budget → ~70% of the way through the time budget while
+// only 7.2/12 sets are done, so the fill trails the marker (amber, behind pace).
+const ELAPSED_MS = (42 * 60 + 18) * 1000
+const BUDGET_MS = 60 * 60 * 1000
+
+export const LiveBehind: Story = {
+  args: {
+    title: 'Pull A · Intensification',
+    plan: PLAN,
+    setsDone: 7.2,
+    elapsedMs: ELAPSED_MS,
+    budgetMs: BUDGET_MS,
+    metrics: LIVE_METRICS,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Live, behind pace — sets fill (7.2/12) trails the elapsed-time marker, so the ' +
+          'bar and sets label read amber. ⏱ elapsed goes live-green with the ` / 60:00` budget.',
+      },
+    },
+  },
+}
+
+export const LiveNoTime: Story = {
+  args: {
+    title: 'Pull A · Intensification',
+    plan: PLAN,
+    setsDone: 7.2,
+    elapsedMs: ELAPSED_MS,
+    metrics: LIVE_METRICS,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Live, no time target — no marker and no ` / budget`, just the ⏱ elapsed. The bar ' +
+          'is plain chunked progress (steel), and the sets label follows.',
+      },
+    },
+  },
+}
+
+export const Upcoming: Story = {
+  args: {
+    title: 'Lower B · Volume',
+    plan: PLAN,
+    budgetMs: 52 * 60 * 1000,
+    next: Date.now() + 2 * 24 * 60 * 60 * 1000,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Upcoming session — the tiles become Date / Time / Until (Until accents only when ' +
+          '< 1 day away), the bar is the empty plan shape, and the ⏱ readout shows the planned ' +
+          'duration. `title` is the next session’s name.',
+      },
+    },
+  },
+}

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

@@ -0,0 +1,122 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SessionHeader, type SessionHeaderPlanEntry } from './SessionHeader'
+
+const PLAN: SessionHeaderPlanEntry[] = [
+  { name: 'Seated Row', sets: 3 },
+  { name: 'Incline DB', sets: 3 },
+  { name: 'Chest Press', sets: 2 },
+  { name: 'Calf Raise', sets: 2 },
+  { name: 'Face Pull', sets: 2 },
+] // total = 12
+
+const liveProps = {
+  title: 'Pull A · Intensification',
+  plan: PLAN,
+  setsDone: 7.2,
+  elapsedMs: (42 * 60 + 18) * 1000,
+  budgetMs: 60 * 60 * 1000,
+  metrics: [
+    { label: 'Volume', value: '76%' },
+    { label: 'Load', value: '7.3k' },
+    { label: 'Fatigue', value: 'MOD' },
+  ],
+}
+
+describe('SessionHeader', () => {
+  it('renders the session title', () => {
+    render(<SessionHeader {...liveProps} />)
+    expect(screen.getByTestId('session-rail-title')).toHaveTextContent('Pull A · Intensification')
+  })
+
+  describe('live · behind pace', () => {
+    it('shows the floored sets-done over the total', () => {
+      render(<SessionHeader {...liveProps} />)
+      expect(screen.getByTestId('session-rail-sets')).toHaveTextContent('7/12 sets')
+    })
+
+    it('renders the live metric tiles', () => {
+      render(<SessionHeader {...liveProps} />)
+      expect(screen.getByText('Volume')).toBeInTheDocument()
+      expect(screen.getByText('Fatigue')).toBeInTheDocument()
+    })
+
+    it('drops the pace marker when a budget and elapsed are given', () => {
+      render(<SessionHeader {...liveProps} />)
+      expect(screen.getByTestId('segmented-bar-marker')).toBeInTheDocument()
+    })
+
+    it('appends the budget to the timer readout', () => {
+      render(<SessionHeader {...liveProps} />)
+      expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('42:18')
+      expect(screen.getByTestId('timer-readout-total')).toHaveTextContent('60:00')
+    })
+  })
+
+  describe('live · no time target', () => {
+    const noTimeProps = { ...liveProps, budgetMs: undefined }
+
+    it('omits the pace marker', () => {
+      render(<SessionHeader {...noTimeProps} />)
+      expect(screen.queryByTestId('segmented-bar-marker')).not.toBeInTheDocument()
+    })
+
+    it('shows the elapsed readout with no budget suffix', () => {
+      render(<SessionHeader {...noTimeProps} />)
+      expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('42:18')
+      expect(screen.queryByTestId('timer-readout-total')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('upcoming', () => {
+    const upcomingProps = {
+      title: 'Lower B · Volume',
+      plan: PLAN,
+      budgetMs: 52 * 60 * 1000,
+      next: new Date('2026-07-11T18:30:00'),
+    }
+
+    it('renders the next session name as the title', () => {
+      render(<SessionHeader {...upcomingProps} />)
+      expect(screen.getByTestId('session-rail-title')).toHaveTextContent('Lower B · Volume')
+    })
+
+    it('shows the schedule tiles instead of metric tiles', () => {
+      render(<SessionHeader {...upcomingProps} />)
+      expect(screen.getByText('Date')).toBeInTheDocument()
+      expect(screen.getByText('Time')).toBeInTheDocument()
+      expect(screen.getByText('Until')).toBeInTheDocument()
+    })
+
+    it('shows only the total sets and no marker', () => {
+      render(<SessionHeader {...upcomingProps} />)
+      expect(screen.getByTestId('session-rail-sets')).toHaveTextContent('12 sets')
+      expect(screen.queryByTestId('segmented-bar-marker')).not.toBeInTheDocument()
+    })
+
+    it('reads the planned duration statically (not live-green)', () => {
+      render(<SessionHeader {...upcomingProps} />)
+      expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('52:00')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no violations when live', async () => {
+      const { container } = render(<SessionHeader {...liveProps} />)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no violations when upcoming', async () => {
+      const { container } = render(
+        <SessionHeader
+          title="Lower B · Volume"
+          plan={PLAN}
+          budgetMs={52 * 60 * 1000}
+          next={new Date('2026-07-11T18:30:00')}
+        />
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})