@titan-design/react-ui 0.7.0 → 0.9.0

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

@@ -4,7 +4,7 @@ import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { roundTempo } from '../../../utils/workout-format'
 import { alpha } from '../../../utils/colors'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { getTempoFillPct, getTempoPacingState } from './TempoBar'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
 import { MetricCell } from './metricText'
 
 const t = getSemanticColors('dark')
@@ -22,14 +22,20 @@ export interface TempoLiveState {
   activePhase: TempoLivePhase | null
   /** Elapsed time (ms) within the active phase. */
   phaseElapsedMs: number
+  /**
+   * Actual completed durations (ms) for phases finished earlier THIS rep. A done cell
+   * freezes at its final readout (not the target) until the next rep resets the row.
+   * Omit a phase to fall back to its target (assume it completed on pace).
+   */
+  completed?: Partial<Record<TempoLivePhase, number>>
 }
 
 export interface TempoDisplayProps extends ViewProps {
   /** Tempo values: [eccentric, pauseBottom, concentric, pauseTop] in seconds */
   tempo: [number, number, number, number]
   size?: 'sm' | 'md'
-  /** Colored phases or mono (all gray) */
-  colored?: boolean
+  /** Override the digit font size (px). Defaults from `size` (9 sm / 11 md); raise for a wall read-out. */
+  fontSize?: number
   /** Show the "TEMPO" caption before the values. Default true. */
   showLabel?: boolean
   /** Show info tooltip on press */
@@ -40,19 +46,60 @@ export interface TempoDisplayProps extends ViewProps {
    * prescription string (default, backward compatible).
    */
   live?: TempoLiveState
+  /** Active-phase readout when `live`: `countdown` remaining to 0.0 (default), or `countup` elapsed. */
+  liveReadout?: TempoLiveReadout
   onPress?: () => void
   className?: string
 }
 
 const INTER = 'Inter, sans-serif'
 const TEXT_TERTIARY = '#6B7280'
-const STATUS_ERROR = t['status-error'] // shown when a phase runs behind pace
+const STATUS_ERROR = t['status-error'] // slow — over the target time
+const STATUS_SUCCESS = t['status-success'] // on target (within the band of 0.0)
+const STATUS_WARNING = t['status-warning'] // ahead — still time left to the target
+
+/** Live active-phase readout: `countdown` remaining to 0.0, or `countup` elapsed to target. */
+export type TempoLiveReadout = 'countdown' | 'countup'
+
+/** ± this window (ms) around the target still counts as on target (0.0 ± 0.1s). */
+const ON_TARGET_MS = 100
+
+/** Phase-progress fill percent (0–100): how far the active phase has run toward its target. */
+function getTempoFillPct(elapsedMs: number, targetMs: number | null): number {
+  if (!targetMs) return 100
+  return Math.min(100, (elapsedMs / targetMs) * 100)
+}
+
+/**
+ * Semantic pacing tone for the active/completed phase's NUMBER (the fill bar carries phase
+ * identity, so the number is free to carry pacing). Keyed on time remaining to target:
+ * ahead of target (still counting) → warning; within ±0.1s of 0.0 → success; over → error.
+ */
+function activeNumberTone(elapsedMs: number, targetMs: number | null): string {
+  if (targetMs == null) return t['text-primary']
+  const remainingMs = targetMs - elapsedMs
+  if (remainingMs > ON_TARGET_MS) return STATUS_WARNING
+  if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS
+  return STATUS_ERROR
+}
 
-// Phase colors: [eccentric, pauseBottom, concentric, pauseTop]
+/** The active number: `countup` elapsed (→ target) or `countdown` remaining (→ 0.0, then −). */
+function liveReadoutText(
+  elapsedMs: number,
+  targetMs: number,
+  readout: TempoLiveReadout,
+): string {
+  const seconds = readout === 'countup' ? elapsedMs / 1000 : (targetMs - elapsedMs) / 1000
+  return seconds.toFixed(1)
+}
+
+// Phase IDENTITY colours — deliberately NON-semantic (magenta ecc / cyan con) so the
+// phase hue never collides with the semantic pacing tones (success/error) the active
+// number carries. Pauses stay neutral grey. [eccentric, pauseBottom, concentric, pauseTop]
 const phaseColors = {
-  eccentric: t['status-warning'],
+  eccentric: primitiveRamps.magenta[400],
   pauseBottom: TEXT_TERTIARY,
-  concentric: t['status-success'],
+  concentric: primitiveRamps.cyan[300],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY,
 }
@@ -89,39 +136,95 @@ const LIVE_PHASES: { key: TempoLivePhase; color: string }[] = [
   { key: 'pauseTop', color: phaseColors.pauseTop },
 ]
 
+/** A phase's place in the current rep: already done (locked full), filling now, or still to come. */
+type LiveCellStatus = 'done' | 'active' | 'upcoming'
+
+/** A bottom-anchored vertical fill behind the number (the phase-progress bar). */
+function CellFill({ color, pct }: { color: string; pct: number }) {
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        left: 2,
+        right: 2,
+        bottom: 0,
+        height: `${pct}%`,
+        backgroundColor: alpha(color, 0.28),
+        borderRadius: 3,
+      }}
+    />
+  )
+}
+
+/** Monospace stack for the live readout so digit widths never shift. */
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
+/** Widest readout the cell must hold: sign · two whole digits · point · tenths, e.g. "-12.3". */
+const READOUT_MAX_CHARS = 5
+
 function LiveTempoCell({
   value,
   color,
-  isActive,
+  status,
   phaseElapsedMs,
+  completedMs,
   fontSize,
+  readout,
 }: {
   value: number
   color: string
-  isActive: boolean
+  status: LiveCellStatus
   phaseElapsedMs: number
+  completedMs: number | undefined
   fontSize: number
+  readout: TempoLiveReadout
 }) {
-  if (!isActive) {
-    return <TempoValue value={value} color={alpha(color, 0.35)} fontSize={fontSize} />
-  }
   const targetMs = value > 0 ? value * 1000 : null
-  const barColor = getTempoPacingState(phaseElapsedMs, targetMs) === 'behind' ? STATUS_ERROR : color
+  // Fixed, monospace-width cell sized to the widest readout — a phase activating or its
+  // number changing never shifts the layout (the fill bar stays put too).
+  const cellW = Math.ceil(fontSize * 0.62 * READOUT_MAX_CHARS)
+  const wrap = {
+    position: 'relative' as const,
+    width: cellW,
+    minHeight: Math.round(fontSize * 1.25),
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  }
+  const num = (c: string, text: string) => (
+    <Text style={{ fontFamily: MONO, fontSize, color: c, fontWeight: '700' }}>{text}</Text>
+  )
+
+  // Upcoming / idle: the phase's prescribed time in the FULL phase colour, no fill — so a
+  // not-yet-started (or fully idle) row just reads as the base tempo lockup, not a dim mode.
+  if (status === 'upcoming') {
+    const targetText = targetMs != null ? (targetMs / 1000).toFixed(1) : String(value)
+    return <View style={wrap}>{num(color, targetText)}</View>
+  }
+
+  // Done: FROZEN at the phase's final readout (its actual completed time, not the target),
+  // fill locked full in the phase colour. The number keeps its SEMANTIC pacing tone (it is
+  // showing the final time, not the target) — banked progress until the next rep resets.
+  if (status === 'done') {
+    const finalMs = completedMs ?? targetMs ?? 0
+    const finalText = targetMs != null ? liveReadoutText(finalMs, targetMs, readout) : String(value)
+    const finalTone = targetMs != null ? activeNumberTone(finalMs, targetMs) : color
+    return (
+      <View style={wrap} testID="tempo-live-done">
+        <CellFill color={color} pct={100} />
+        {num(finalTone, finalText)}
+      </View>
+    )
+  }
+
+  // Active: the phase-hued fill grows with the phase; the number reads the live time
+  // (countdown/countup) to 0.1s, coloured SEMANTICALLY by pacing (neutral/on-target/behind).
+  const numberTone = activeNumberTone(phaseElapsedMs, targetMs)
   const fillPct = getTempoFillPct(phaseElapsedMs, targetMs)
+  const activeText =
+    targetMs != null ? liveReadoutText(phaseElapsedMs, targetMs, readout) : String(value)
   return (
-    <View style={{ position: 'relative' }} testID="tempo-live-active">
-      <View
-        style={{
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${fillPct}%`,
-          backgroundColor: alpha(barColor, 0.3),
-          borderRadius: 2,
-        }}
-      />
-      <TempoValue value={value} color={barColor} fontSize={fontSize} />
+    <View style={wrap} testID="tempo-live-active">
+      <CellFill color={color} pct={fillPct} />
+      {num(numberTone, activeText)}
     </View>
   )
 }
@@ -130,25 +233,38 @@ function LiveTempoRow({
   values,
   live,
   fontSize,
+  readout,
 }: {
   values: [number, number, number, number]
   live: TempoLiveState
   fontSize: number
+  readout: TempoLiveReadout
 }) {
+  // Phases run in a fixed order within a rep, so the active phase's position tells us which
+  // phases are already done (locked). When it wraps back to the first phase, the row resets.
+  const activeIndex = live.activePhase
+    ? LIVE_PHASES.findIndex((p) => p.key === live.activePhase)
+    : -1
   return (
     <>
-      {LIVE_PHASES.map((phase, i) => (
-        <View key={phase.key} style={{ flexDirection: 'row' }}>
-          {i > 0 && <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />}
-          <LiveTempoCell
-            value={values[i]}
-            color={phase.color}
-            isActive={live.activePhase === phase.key}
-            phaseElapsedMs={live.phaseElapsedMs}
-            fontSize={fontSize}
-          />
-        </View>
-      ))}
+      {LIVE_PHASES.map((phase, i) => {
+        const status: LiveCellStatus =
+          activeIndex < 0 || i > activeIndex ? 'upcoming' : i < activeIndex ? 'done' : 'active'
+        return (
+          <View key={phase.key} style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {i > 0 && <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />}
+            <LiveTempoCell
+              value={values[i]}
+              color={phase.color}
+              status={status}
+              phaseElapsedMs={live.phaseElapsedMs}
+              completedMs={live.completed?.[phase.key]}
+              fontSize={fontSize}
+              readout={readout}
+            />
+          </View>
+        )
+      })}
     </>
   )
 }
@@ -156,10 +272,11 @@ function LiveTempoRow({
 export function TempoDisplay({
   tempo,
   size = 'md',
-  colored = true,
+  fontSize: fontSizeProp,
   showLabel = true,
   showInfo = true,
   live,
+  liveReadout = 'countdown',
   onPress,
   className,
   ...props
@@ -168,8 +285,13 @@ export function TempoDisplay({
   // Round exact (unrounded) tempo seconds to the 1-dp display granularity.
   const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo)
   const isSm = size === 'sm'
-  const fontSize = isSm ? 9 : 11
-  const monoColor = TEXT_TERTIARY
+  const fontSize = fontSizeProp ?? (isSm ? 9 : 11)
+  // The chrome (padding, radius, label) scales with the digit size so the whole view stays
+  // proportional at any form factor — a compact rail chip up to a wall read-out.
+  const chromePadX = Math.round(fontSize * 0.6)
+  const chromePadY = Math.round(fontSize * 0.3)
+  const chromeRadius = Math.round(fontSize * 0.4)
+  const labelFont = Math.max(9, Math.round(fontSize * 0.5))
 
   const handlePress = useCallback(() => {
     if (onPress) {
@@ -187,9 +309,9 @@ export function TempoDisplay({
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: '#1C1C1C',
-        paddingHorizontal: isSm ? 6 : 8,
-        paddingVertical: 3,
-        borderRadius: 4,
+        paddingHorizontal: chromePadX,
+        paddingVertical: chromePadY,
+        borderRadius: chromeRadius,
       }}
       {...props}
     >
@@ -197,12 +319,13 @@ export function TempoDisplay({
         <Text
           style={{
             fontFamily: INTER,
-            fontSize: 9,
+            fontSize: labelFont,
             fontWeight: '500',
-            color: TEXT_TERTIARY,
+            // Live-muted green while a rep is running, tertiary at rest.
+            color: live ? t['status-live-muted'] : TEXT_TERTIARY,
             letterSpacing: 0.5,
             textTransform: 'uppercase',
-            marginRight: 6,
+            marginRight: Math.round(fontSize * 0.5),
           }}
         >
           TEMPO
@@ -214,8 +337,10 @@ export function TempoDisplay({
             values={[eccentric, pauseBottom, concentric, pauseTop]}
             live={live}
             fontSize={fontSize}
+            readout={liveReadout}
           />
-        ) : colored ? (
+        ) : (
+          // Static prescription: the phase-coloured lockup (the same colours the live row rests at).
           <>
             <TempoValue value={eccentric} color={phaseColors.eccentric} fontSize={fontSize} />
             <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
@@ -225,18 +350,6 @@ export function TempoDisplay({
             <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
             <TempoValue value={pauseTop} color={phaseColors.pauseTop} fontSize={fontSize} />
           </>
-        ) : (
-          <Text
-            style={{
-              fontFamily: INTER,
-              fontSize,
-              color: monoColor,
-              fontWeight: '600',
-              letterSpacing: 1,
-            }}
-          >
-            {eccentric}-{pauseBottom}-{concentric}-{pauseTop}
-          </Text>
         )}
       </View>
     </View>

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { VelocityStrip } from './VelocityStrip'
 
@@ -11,12 +11,15 @@ const meta: Meta<typeof VelocityStrip> = {
     docs: {
       description: {
         component:
-          'Per-rep velocity strip. Two variants: `mini` (a flat 3px static strip) and `expanded` ' +
-          '(the velocity-HEIGHT bar chart, rounded tops). The `expanded` chrome is prop-driven — ' +
-          'with `showNumbers`/`showInfo` on it is the framed chart (raised surface, per-bar m/s ' +
-          'labels, mean/loss info row, interactive tap-to-expand); with both off it is a bare strip, ' +
+          'Per-rep velocity strip. Three variants: `mini` (a flat 3px static strip), `expanded` ' +
+          '(the velocity-HEIGHT bar chart, rounded tops), and `hero` (the across-the-room, single-set ' +
+          'wall treatment — tall bars, per-bar value labels, a dashed running-best reference line, and ' +
+          'dashed placeholders for the reps still to come via `targetReps`). The `expanded` chrome is ' +
+          'prop-driven — with `showNumbers`/`showInfo` on it is the framed chart (raised surface, per-bar ' +
+          'm/s labels, mean/loss info row, interactive tap-to-expand); with both off it is a bare strip, ' +
           'the active-set spotlight. `height` sets the plot height; `scale` is `peak` (to the set max) ' +
-          'or `fixed` (a fixed ceiling, cross-set-comparable). Feed either `velocities` or a `set` ' +
+          'or `fixed` (a fixed ceiling, cross-set-comparable — recommended for the live `hero` so bar ' +
+          'heights never reflow as reps land). Feed either `velocities` or a `set` ' +
           'descriptor (set-type aware — see the ' +
           '[modalities](?path=/docs/workout-dataviz-velocitystrip-modalities--docs) sheet).',
       },
@@ -25,9 +28,13 @@ const meta: Meta<typeof VelocityStrip> = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['mini', 'expanded'],
+      options: ['mini', 'expanded', 'hero'],
       description: 'Display variant',
     },
+    targetReps: {
+      control: 'number',
+      description: 'hero: planned rep count — reps beyond `velocities` draw as dashed placeholders',
+    },
     expanded: {
       control: 'boolean',
       description: 'expanded (framed): whether the chart is open (toggle for tap-to-expand)',
@@ -41,8 +48,8 @@ const meta: Meta<typeof VelocityStrip> = {
       description: 'expanded framed chart: the mean/loss info row (default true)',
     },
     height: {
-      control: { type: 'number', min: 12, max: 96, step: 2 },
-      description: 'expanded plot height in px (bars scale to this). Default 60.',
+      control: { type: 'number', min: 12, max: 260, step: 2 },
+      description: 'expanded/hero plot height in px (bars scale to this). Default 60 / 220 (hero).',
     },
     scale: {
       control: 'inline-radio',
@@ -117,6 +124,142 @@ export const ExpandedBareSpotlight: Story = {
   },
 }
 
+// --- Hero variant ------------------------------------------------------------
+// The across-the-room, single-set wall treatment. Rendered on the north-star wall
+// background so the dashed reference line + placeholders read the way they will live.
+
+/**
+ * Wall-background frame for the hero stories. The eyebrow label is ORGANISM chrome
+ * (the north-star live page renders it), NOT part of the primitive — it sits here only
+ * to show the component in the context it will live in. The `VelocityStrip` hero variant
+ * itself renders no title.
+ */
+const heroDecorator: Decorator = (Story) => (
+  <View style={{ width: 560, padding: 28, backgroundColor: '#0E0E0E' }}>
+    <Text
+      style={{
+        color: '#5A5A5A',
+        fontSize: 10,
+        fontWeight: '700',
+        letterSpacing: 1,
+        marginBottom: 12,
+      }}
+    >
+      CONCENTRIC VELOCITY · THIS SET · (organism chrome — not the component)
+    </Text>
+    <Story />
+  </View>
+)
+
+const heroMidSet = [0.82, 0.79, 0.81, 0.76]
+const heroNearComplete = [0.82, 0.79, 0.81, 0.76, 0.74, 0.71, 0.68]
+const heroFatigue = [0.96, 0.91, 0.83, 0.72, 0.61, 0.5]
+
+/** Controls-driven hero: flip `velocities` / `targetReps` / `liveRepIndex` / `scale` / `height`. */
+export const HeroPlayground: Story = {
+  args: {
+    velocities: heroMidSet,
+    variant: 'hero',
+    targetReps: 8,
+    liveRepIndex: 3,
+    scale: 'fixed',
+    height: 220,
+  },
+  decorators: [heroDecorator],
+}
+
+/** Mid-set: 4 of 8 reps done, the newest bar popping, 4 dashed reps still to come. */
+export const HeroMidSet: Story = {
+  args: { velocities: heroMidSet, variant: 'hero', targetReps: 8, liveRepIndex: 3, scale: 'fixed' },
+  decorators: [heroDecorator],
+}
+
+/** Near complete: 7 of 8, one placeholder left; the running-best line sits at rep 3. */
+export const HeroNearComplete: Story = {
+  args: {
+    velocities: heroNearComplete,
+    variant: 'hero',
+    targetReps: 8,
+    liveRepIndex: 6,
+    scale: 'fixed',
+  },
+  decorators: [heroDecorator],
+}
+
+/** Fatigue decline: velocity falling rep over rep — the shape you read across the room. */
+export const HeroFatigueDecline: Story = {
+  args: {
+    velocities: heroFatigue,
+    variant: 'hero',
+    targetReps: 8,
+    liveRepIndex: 5,
+    scale: 'fixed',
+  },
+  decorators: [heroDecorator],
+}
+
+/** Ends on the best rep: the running-best line lands on the last (live) bar's top. */
+export const HeroEndsOnBest: Story = {
+  args: {
+    velocities: [0.7, 0.76, 0.83, 0.9],
+    variant: 'hero',
+    targetReps: 4,
+    liveRepIndex: 3,
+    scale: 'peak',
+  },
+  decorators: [heroDecorator],
+}
+
+/**
+ * Set expansion — reps performed BEYOND `targetReps` (11 done vs 8 planned). Placeholders
+ * are gone (target met) and the extra reps just render as more bars; `flex` bars narrow to
+ * fit, so the chart absorbs the overflow with no clipping. The AMRAP "keep going" case.
+ */
+export const HeroExceedsTarget: Story = {
+  args: {
+    velocities: [0.9, 0.87, 0.84, 0.8, 0.77, 0.74, 0.71, 0.68, 0.64, 0.6, 0.55],
+    variant: 'hero',
+    targetReps: 8,
+    liveRepIndex: 10,
+    scale: 'fixed',
+  },
+  decorators: [heroDecorator],
+}
+
+/** Set complete: 8 of 8, no placeholders. */
+export const HeroComplete: Story = {
+  args: {
+    velocities: [0.96, 0.91, 0.83, 0.79, 0.76, 0.72, 0.68, 0.61],
+    variant: 'hero',
+    targetReps: 8,
+    scale: 'fixed',
+  },
+  decorators: [heroDecorator],
+}
+
+/** The same set at three container widths — the hero is width-fluid (flex bars, capped width, fixed height). */
+export const HeroResponsive: Story = {
+  render: () => (
+    <View style={{ gap: 24, padding: 24, backgroundColor: '#0E0E0E' }}>
+      {[360, 560, 900].map((w) => (
+        <View key={w} style={{ width: w }}>
+          <Text style={{ color: '#5A5A5A', fontSize: 10, fontWeight: '700', marginBottom: 8 }}>
+            {w}px
+          </Text>
+          <VelocityStrip
+            velocities={heroFatigue}
+            variant="hero"
+            targetReps={8}
+            liveRepIndex={5}
+            scale="fixed"
+            height={180}
+          />
+        </View>
+      ))}
+    </View>
+  ),
+}
+
 /** A structured set descriptor (a drop set): the mini variant carries the set-type gap/color encoding. */
 export const SetTypeMini: Story = {
   args: {

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

@@ -78,10 +78,10 @@ describe('VelocityStrip expanded (framed chart)', () => {
   })
 
   describe('scale', () => {
-    it('peak (default) scales the tallest rep to full height', () => {
-      // maxV=1.0 -> denom 1.15 -> 1.0/1.15 = 87%.
+    it('peak (default) scales the tallest rep to nearly full height', () => {
+      // maxV=1.0 -> denom 1.06 (peak headroom) -> 1.0/1.06 = 94%.
       render(<VelocityStrip velocities={[1.0, 0.5]} showInfo={false} />)
-      expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '87%' })
+      expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '94%' })
     })
 
     it('fixed scales against the 1.15 ceiling regardless of the set max', () => {
@@ -564,3 +564,67 @@ describe('VelocityStrip expanded bare strip (spotlight: numbers + info off)', ()
     expect(await axe(container)).toHaveNoViolations()
   })
 })
+
+describe('VelocityStrip hero variant', () => {
+  const heroSet = [0.9, 0.86, 0.82, 0.78]
+
+  it('renders one bar per performed rep, each with a value label', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={8} />)
+    expect(screen.getByTestId('velocity-strip-hero')).toBeInTheDocument()
+    expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(heroSet.length)
+    expect(screen.getAllByTestId(/^velocity-label-\d+$/)).toHaveLength(heroSet.length)
+    expect(screen.getByTestId('velocity-label-0')).toHaveTextContent('0.90')
+  })
+
+  it('draws a dashed placeholder for each rep still to come (target − done)', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={8} />)
+    expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(4)
+  })
+
+  it('draws no placeholders when the target is met exactly', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={heroSet.length} />)
+    expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
+  })
+
+  it('set expansion: reps beyond target render as bars with no negative placeholders', () => {
+    const overflow = [0.9, 0.86, 0.82, 0.78, 0.74, 0.7, 0.66, 0.62, 0.58]
+    render(<VelocityStrip velocities={overflow} variant="hero" targetReps={8} />)
+    expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(overflow.length)
+    expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
+  })
+
+  it('draws no placeholders when targetReps is omitted', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" />)
+    expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(heroSet.length)
+    expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
+  })
+
+  it('renders the running-best reference line when there is a positive best', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={8} />)
+    expect(screen.getByTestId('velocity-hero-reference')).toBeInTheDocument()
+  })
+
+  it('omits the reference line when every velocity is zero (NaN / no-best guard)', () => {
+    render(<VelocityStrip velocities={[0, 0, 0]} variant="hero" targetReps={4} />)
+    expect(screen.queryByTestId('velocity-hero-reference')).not.toBeInTheDocument()
+  })
+
+  it('summarizes reps done, target and best in the accessibility label', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={8} />)
+    expect(
+      screen.getByLabelText('Velocity chart, 4 of 8 reps, best 0.90 meters per second')
+    ).toBeInTheDocument()
+  })
+
+  it('renders nothing when neither velocities nor set is provided', () => {
+    render(<VelocityStrip variant="hero" targetReps={8} />)
+    expect(screen.queryByTestId('velocity-strip-hero')).not.toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <VelocityStrip velocities={heroSet} variant="hero" targetReps={8} liveRepIndex={3} />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})