@titan-design/react-ui 0.10.0 → 0.11.0

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

@@ -7,6 +7,7 @@ import {
   getVelocityZoneName,
   calculateVelocityLoss,
   calculateMeanVelocity,
+  getVelocityLossColor,
 } from './VelocityStrip'
 
 const sampleVelocities = [1.1, 0.95, 0.82, 0.68, 0.45]
@@ -29,7 +30,7 @@ describe('VelocityStrip expanded (framed chart)', () => {
     ).toBeInTheDocument()
   })
 
-  it('renders the 3px collapsed strip when expanded is false', () => {
+  it('collapses to the flat state (tap-to-expand, no info row) when expanded is false', () => {
     render(<VelocityStrip velocities={sampleVelocities} expanded={false} />)
     expect(
       screen.getByLabelText('Velocity chart for set, 5 reps, tap to expand')
@@ -78,17 +79,28 @@ describe('VelocityStrip expanded (framed chart)', () => {
   })
 
   describe('scale', () => {
-    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: '94%' })
+    // Folded onto SetBarChart: bars are px value-height (not %); the bare spotlight has static
+    // heights (no expand animation), so we assert the taller-rep-reads-taller scaling relationship.
+    const barPx = (id: string) => parseFloat(getComputedStyle(screen.getByTestId(id)).height)
+    const bareScale = {
+      variant: 'expanded' as const,
+      showNumbers: false,
+      showInfo: false,
+      height: 60,
+    }
+
+    it('peak (default) scales the tallest rep taller than a smaller one', () => {
+      render(<VelocityStrip {...bareScale} velocities={[1.0, 0.5]} />)
+      expect(barPx('velocity-bar-0')).toBeGreaterThan(barPx('velocity-bar-1'))
+      // peak: 1.0 fills nearly the whole 60px plot.
+      expect(barPx('velocity-bar-0')).toBeGreaterThan(52)
     })
 
-    it('fixed scales against the 1.15 ceiling regardless of the set max', () => {
-      // fixed denom 1.15 -> 1.0/1.15 = 87%, 0.5/1.15 = 43%.
-      render(<VelocityStrip velocities={[1.0, 0.5]} scale="fixed" showInfo={false} />)
-      expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '87%' })
-      expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ height: '43%' })
+    it('fixed scales against a ceiling above the set max (bars shorter than peak)', () => {
+      render(<VelocityStrip {...bareScale} scale="fixed" velocities={[1.0, 0.5]} />)
+      // fixed ceiling 1.15 > 1.0, so the tallest bar no longer fills the plot; 0.5 is ~half of 1.0.
+      expect(barPx('velocity-bar-0')).toBeLessThan(56)
+      expect(barPx('velocity-bar-1')).toBeLessThan(barPx('velocity-bar-0'))
     })
   })
 
@@ -116,31 +128,31 @@ describe('VelocityStrip expanded (framed chart)', () => {
   })
 })
 
-describe('VelocityStrip mini variant', () => {
-  it('renders the flat mini strip', () => {
-    render(<VelocityStrip velocities={sampleVelocities} variant="mini" />)
-    expect(screen.getByTestId('velocity-strip-mini')).toBeInTheDocument()
+describe('VelocityStrip compact variant (flat resting strip)', () => {
+  it('renders the flat compact strip', () => {
+    render(<VelocityStrip velocities={sampleVelocities} variant="compact" />)
+    expect(screen.getByTestId('velocity-strip-compact')).toBeInTheDocument()
   })
 
   it('does not respond to press', () => {
-    render(<VelocityStrip velocities={sampleVelocities} variant="mini" onToggle={() => {}} />)
+    render(<VelocityStrip velocities={sampleVelocities} variant="compact" onToggle={() => {}} />)
     expect(screen.queryByTestId('velocity-strip-pressable')).not.toBeInTheDocument()
   })
 
   it('renders one bar per rep', () => {
-    render(<VelocityStrip velocities={sampleVelocities} variant="mini" />)
+    render(<VelocityStrip velocities={sampleVelocities} variant="compact" />)
     for (let i = 0; i < sampleVelocities.length; i++) {
       expect(screen.getByTestId(`velocity-bar-${i}`)).toBeInTheDocument()
     }
   })
 
   it('has no accessibility violations', async () => {
-    const { container } = render(<VelocityStrip velocities={sampleVelocities} variant="mini" />)
+    const { container } = render(<VelocityStrip velocities={sampleVelocities} variant="compact" />)
     expect(await axe(container)).toHaveNoViolations()
   })
 
-  it('does not apply live marking', () => {
-    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} variant="mini" />)
+  it('does not apply live marking (compact is the resting form)', () => {
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} variant="compact" />)
     expect(screen.queryByLabelText(/latest rep/)).not.toBeInTheDocument()
   })
 })
@@ -216,6 +228,94 @@ describe('calculateMeanVelocity', () => {
   })
 })
 
+// Literal hex for the four VL-band tones (green-300 / amber-300 / orange-400 / red-600),
+// the SAME stops FatigueMeter's VL10/VL20/VL30 default thresholds use.
+const VL_GREEN = '#2ED573'
+const VL_YELLOW = '#F9B415'
+const VL_ORANGE = '#FF7900'
+const VL_RED = '#D14343'
+
+describe('getVelocityLossColor', () => {
+  it('reads green below the VL10 threshold', () => {
+    expect(getVelocityLossColor(0)).toBe(VL_GREEN)
+    expect(getVelocityLossColor(9.9)).toBe(VL_GREEN)
+  })
+
+  it('reads gold/amber from VL10 up to (not including) VL20', () => {
+    expect(getVelocityLossColor(10)).toBe(VL_YELLOW)
+    expect(getVelocityLossColor(19.9)).toBe(VL_YELLOW)
+  })
+
+  it('reads orange from VL20 up to (not including) VL30', () => {
+    expect(getVelocityLossColor(20)).toBe(VL_ORANGE)
+    expect(getVelocityLossColor(29.9)).toBe(VL_ORANGE)
+  })
+
+  it('reads red at and past VL30', () => {
+    expect(getVelocityLossColor(30)).toBe(VL_RED)
+    expect(getVelocityLossColor(100)).toBe(VL_RED)
+  })
+})
+
+describe('VelocityStrip barColor prop', () => {
+  // Best rep is 1.0 m/s, so per-rep loss lands exactly on the VL10/20/30 boundaries:
+  // 0%, 10%, 20%, 30% loss — one rep in each band.
+  const decliningSet = [1.0, 0.9, 0.8, 0.7]
+
+  it('defaults to loss coloring (the landed default is barColor="loss")', () => {
+    render(<VelocityStrip velocities={decliningSet} variant="compact" />)
+    // Loss from the set's own best (1.0): 0% / 10% / 20% / 30% -> green / yellow / orange / red.
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: VL_GREEN })
+    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: VL_YELLOW })
+    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ backgroundColor: VL_ORANGE })
+    expect(screen.getByTestId('velocity-bar-3')).toHaveStyle({ backgroundColor: VL_RED })
+  })
+
+  it('explicit barColor="zone" matches the default', () => {
+    render(<VelocityStrip velocities={decliningSet} variant="compact" barColor="zone" />)
+    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: VL_YELLOW })
+  })
+
+  it('barColor="loss" colors each bar green→red by loss from the set\'s own best', () => {
+    render(<VelocityStrip velocities={decliningSet} variant="compact" barColor="loss" />)
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: VL_GREEN })
+    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: VL_YELLOW })
+    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ backgroundColor: VL_ORANGE })
+    expect(screen.getByTestId('velocity-bar-3')).toHaveStyle({ backgroundColor: VL_RED })
+  })
+
+  it('barColor="loss" reads a slow-but-still-best rep as green (loss-relative, not absolute)', () => {
+    // 0.3 m/s would be "vel-red" under the absolute zone scale, but as the set's
+    // (single) best rep its loss is 0 — loss-relative coloring reads it green.
+    render(<VelocityStrip velocities={[0.3]} variant="compact" barColor="loss" />)
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: VL_GREEN })
+  })
+
+  it('barColor="loss" ignores a supplied zones prop (it is a separate scale)', () => {
+    render(
+      <VelocityStrip
+        velocities={decliningSet}
+        variant="compact"
+        barColor="loss"
+        zones={compoundBands}
+      />
+    )
+    expect(screen.getByTestId('velocity-bar-3')).toHaveStyle({ backgroundColor: VL_RED })
+  })
+
+  it('barColor="loss" guards all-zero velocities to green (no NaN/best<=0)', () => {
+    render(<VelocityStrip velocities={[0, 0, 0]} variant="compact" barColor="loss" />)
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: VL_GREEN })
+    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ backgroundColor: VL_GREEN })
+  })
+
+  it('renders no bars (and does not crash) for an empty velocities array', () => {
+    render(<VelocityStrip velocities={[]} variant="compact" barColor="loss" />)
+    expect(screen.getByTestId('velocity-strip-compact')).toBeInTheDocument()
+    expect(screen.queryAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(0)
+  })
+})
+
 // WA-shaped 5-band zone set (compound movement-class defaults, mean m/s).
 const compoundBands = [
   { id: 'grinding', label: 'Grinding', min: 0, max: 0.35 },
@@ -226,14 +326,29 @@ const compoundBands = [
 ] as const
 
 describe('VelocityStrip zones prop', () => {
+  // The band mapping is the `zone` scale; the landed default is `loss`, so these pass `barColor="zone"`.
   it('colors bars from the supplied bands (mini)', () => {
-    render(<VelocityStrip velocities={[1.1, 0.45]} zones={compoundBands} variant="mini" />)
+    render(
+      <VelocityStrip
+        velocities={[1.1, 0.45]}
+        zones={compoundBands}
+        variant="compact"
+        barColor="zone"
+      />
+    )
     expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ED573' })
     expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: '#D14343' })
   })
 
   it('gives grinding and maximalStrength DISTINCT reds (5-band, no collapse)', () => {
-    render(<VelocityStrip velocities={[0.45, 0.2]} zones={compoundBands} variant="mini" />)
+    render(
+      <VelocityStrip
+        velocities={[0.45, 0.2]}
+        zones={compoundBands}
+        variant="compact"
+        barColor="zone"
+      />
+    )
     expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#D14343' })
     expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: '#A4221C' })
   })
@@ -244,7 +359,7 @@ describe('VelocityStrip zones prop', () => {
   })
 
   it('falls back to the default scale when zones is absent', () => {
-    render(<VelocityStrip velocities={[1.1]} variant="mini" />)
+    render(<VelocityStrip velocities={[1.1]} variant="compact" />)
     expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ED573' })
   })
 })
@@ -257,16 +372,17 @@ describe('VelocityStrip live mode', () => {
     else delete (window as { matchMedia?: unknown }).matchMedia
   })
 
-  it('marks the latest rep bar in its accessibility label', () => {
-    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={3} />)
-    expect(screen.getByLabelText(/Rep 4: 0\.68 meters per second, latest rep$/)).toBeInTheDocument()
+  // The bars are now SetBarChart's (a11y-hidden; live-grow is the visual marking via `liveRepIndex`).
+  const spotlight = { variant: 'expanded' as const, showNumbers: false, showInfo: false }
+
+  it('renders the newest rep in the live spotlight', () => {
+    render(<VelocityStrip {...spotlight} velocities={sampleVelocities} liveRepIndex={3} />)
+    expect(screen.getByTestId('velocity-bar-3')).toBeInTheDocument()
   })
 
-  it('flags a new set peak on the latest bar', () => {
-    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} />)
-    expect(
-      screen.getByLabelText(/Rep 1: 1\.10 meters per second, latest rep, new set peak$/)
-    ).toBeInTheDocument()
+  it('renders a new-set-peak live rep without crashing', () => {
+    render(<VelocityStrip {...spotlight} velocities={sampleVelocities} liveRepIndex={0} />)
+    expect(screen.getByTestId('velocity-bar-0')).toBeInTheDocument()
   })
 
   it('renders without animation when prefers-reduced-motion is set', () => {
@@ -275,48 +391,56 @@ describe('VelocityStrip live mode', () => {
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
     }) as unknown as typeof window.matchMedia
-    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} />)
+    render(<VelocityStrip {...spotlight} velocities={sampleVelocities} liveRepIndex={0} />)
     expect(screen.getByTestId('velocity-bar-0')).toBeInTheDocument()
   })
 })
 
 describe('VelocityStrip all-zero velocities (NaN guard)', () => {
-  it('emits a valid 0% bar height (not NaN) when every velocity is zero', () => {
-    render(<VelocityStrip velocities={[0, 0, 0]} showInfo={false} />)
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '0%' })
-    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ height: '0%' })
+  it('emits a valid (non-NaN) bar height when every velocity is zero', () => {
+    render(
+      <VelocityStrip
+        velocities={[0, 0, 0]}
+        variant="expanded"
+        showNumbers={false}
+        showInfo={false}
+      />
+    )
+    const h = getComputedStyle(screen.getByTestId('velocity-bar-0')).height
+    expect(h).not.toContain('NaN')
+    expect(parseFloat(h)).toBeGreaterThanOrEqual(0)
   })
 })
 
 // Literal-hex slot colors (must match the component's tokens exactly).
-const TODO_GREY = '#2C2C2C'
+// TODO_SOLID = the LANDED surface-relative solid to-do tone (base/dark plane blended toward the
+// on-surface neutral) — replaced the old fixed charcoal #2C2C2C. Solid fill, not a dashed outline.
+const TODO_SOLID = '#4C4E55'
 const VARIABLE_CYAN = '#0B3149'
 const CONTINUE_OUTLINE = '#22465F'
-const CONTAINER_GAP_PX = '2px'
-const REP_SLOT_ML = '0px'
-const WIDE_SLOT_ML = '6px'
-
-describe('VelocityStrip set-type modes (mini)', () => {
-  it('straight: done reps colored + grey todo remainder to the planned count', () => {
+describe('VelocityStrip set-type modes (compact)', () => {
+  // compact composes SetBarChart, so the per-slot geometry (WIDE chunk-notch px, container gap) is
+  // covered in SetBarChart.test; here we verify VelocityStrip maps each set type to the right slots.
+  it('straight: done reps colored + solid todo remainder to the planned count', () => {
     render(
       <VelocityStrip
         set={{ type: 'straight', velocities: [1.1, 0.9, 0.8], planned: 5 }}
-        variant="mini"
+        variant="compact"
       />
     )
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(3)
     expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(2)
     expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ED573' })
     expect(screen.getAllByTestId('velocity-slot-todo')[0]).toHaveStyle({
-      backgroundColor: TODO_GREY,
+      backgroundColor: TODO_SOLID,
     })
   })
 
-  it('range: committed grey todo + a cyan variable window floor..max', () => {
+  it('range: committed reps + solid floor todo + a cyan variable window floor..max', () => {
     render(
       <VelocityStrip
         set={{ type: 'range', velocities: [1.1, 1.0, 0.9, 0.85, 0.8, 0.7], floor: 8, max: 12 }}
-        variant="mini"
+        variant="compact"
       />
     )
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(6)
@@ -327,15 +451,15 @@ describe('VelocityStrip set-type modes (mini)', () => {
     })
   })
 
-  it('amrap: done reps + one trailing outlined cyan continue slot', () => {
-    render(<VelocityStrip set={{ type: 'amrap', velocities: [1.1, 1.0, 0.9] }} variant="mini" />)
+  it('amrap: done reps + one trailing cyan-outline continue slot', () => {
+    render(<VelocityStrip set={{ type: 'amrap', velocities: [1.1, 1.0, 0.9] }} variant="compact" />)
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(3)
-    const cont = screen.getByTestId('velocity-slot-continue')
-    expect(cont).toHaveStyle({ backgroundColor: VARIABLE_CYAN })
-    expect(cont).toHaveStyle({ borderTopColor: CONTINUE_OUTLINE })
+    expect(screen.getByTestId('velocity-slot-continue')).toHaveStyle({
+      borderTopColor: CONTINUE_OUTLINE,
+    })
   })
 
-  it('drop: sub-loads split by a WIDE gap before each load after the first', () => {
+  it('drop: one bar per rep across the sub-loads', () => {
     render(
       <VelocityStrip
         set={{
@@ -346,17 +470,13 @@ describe('VelocityStrip set-type modes (mini)', () => {
             [0.6, 0.5],
           ],
         }}
-        variant="mini"
+        variant="compact"
       />
     )
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(6)
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ marginLeft: '0px' })
-    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ marginLeft: REP_SLOT_ML })
-    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ marginLeft: WIDE_SLOT_ML })
-    expect(screen.getByTestId('velocity-bar-4')).toHaveStyle({ marginLeft: WIDE_SLOT_ML })
   })
 
-  it('myo: activation + clusters split by WIDE gaps, open adds a cyan continue', () => {
+  it('myo: activation + clusters as reps, open adds a cyan continue', () => {
     render(
       <VelocityStrip
         set={{
@@ -368,16 +488,14 @@ describe('VelocityStrip set-type modes (mini)', () => {
           ],
           open: true,
         }}
-        variant="mini"
+        variant="compact"
       />
     )
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(7)
-    expect(screen.getByTestId('velocity-bar-3')).toHaveStyle({ marginLeft: WIDE_SLOT_ML })
-    expect(screen.getByTestId('velocity-bar-5')).toHaveStyle({ marginLeft: WIDE_SLOT_ML })
     expect(screen.getByTestId('velocity-slot-continue')).toBeInTheDocument()
   })
 
-  it('cluster: fixed count grouped by WIDE intra-rest gaps, grey planned remainder', () => {
+  it('cluster: fixed count + solid planned remainder', () => {
     render(
       <VelocityStrip
         set={{
@@ -386,22 +504,19 @@ describe('VelocityStrip set-type modes (mini)', () => {
           groupSize: 2,
           planned: 8,
         }}
-        variant="mini"
+        variant="compact"
       />
     )
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(5)
     expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(3)
-    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ marginLeft: WIDE_SLOT_ML })
-    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ marginLeft: REP_SLOT_ML })
   })
 
-  it('back-compat: a velocities-only mini strip is unchanged (rep colors, rep gaps only)', () => {
-    render(<VelocityStrip velocities={sampleVelocities} variant="mini" />)
+  it('back-compat: a velocities-only compact strip renders rep bars, no todo', () => {
+    render(<VelocityStrip velocities={sampleVelocities} variant="compact" />)
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(sampleVelocities.length)
     expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ marginLeft: '0px' })
     expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ED573' })
-    expect(screen.getByTestId('velocity-strip-mini')).toHaveStyle({ gap: CONTAINER_GAP_PX })
+    expect(screen.getByTestId('velocity-strip-compact')).toBeInTheDocument()
   })
 
   it('derives the summary from a set descriptor (mean / loss info row)', () => {
@@ -410,14 +525,14 @@ describe('VelocityStrip set-type modes (mini)', () => {
   })
 
   it('labels the strip per set type', () => {
-    render(<VelocityStrip set={{ type: 'amrap', velocities: [1.0, 0.9] }} variant="mini" />)
+    render(<VelocityStrip set={{ type: 'amrap', velocities: [1.0, 0.9] }} variant="compact" />)
     expect(
       screen.getByLabelText('Velocity strip, AMRAP set, 2 reps and counting')
     ).toBeInTheDocument()
   })
 
   it('renders nothing when neither velocities nor set is provided', () => {
-    const { container } = render(<VelocityStrip variant="mini" />)
+    const { container } = render(<VelocityStrip variant="compact" />)
     expect(container.firstChild).toBeNull()
   })
 })
@@ -428,7 +543,7 @@ describe('VelocityStrip set-type modes (expanded framed)', () => {
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(2)
     expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(2)
     expect(screen.getAllByTestId('velocity-slot-todo')[0]).toHaveStyle({
-      backgroundColor: TODO_GREY,
+      backgroundColor: TODO_SOLID,
     })
   })
 
@@ -459,8 +574,8 @@ describe('VelocityStrip expanded bare strip (spotlight: numbers + info off)', ()
         set={{ type: 'straight', velocities: [1.0, 0.8], planned: 2 }}
       />
     )
-    expect(screen.getByTestId('velocity-strip-compact')).toBeInTheDocument()
-    expect(screen.queryByTestId('velocity-strip-mini')).not.toBeInTheDocument()
+    expect(screen.getByTestId('velocity-strip-spotlight')).toBeInTheDocument()
+    expect(screen.queryByTestId('velocity-strip-compact')).not.toBeInTheDocument()
     expect(screen.queryByTestId('velocity-strip')).not.toBeInTheDocument()
   })
 
@@ -500,7 +615,8 @@ describe('VelocityStrip expanded bare strip (spotlight: numbers + info off)', ()
     expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(1)
     const stubs = screen.getAllByTestId('velocity-slot-todo')
     expect(stubs).toHaveLength(2)
-    expect(stubs[0]).toHaveStyle({ height: '3px', backgroundColor: TODO_GREY })
+    // Folded onto SetBarChart: the solid to-do stub is the shared 9px height + surface-relative tone.
+    expect(stubs[0]).toHaveStyle({ height: '9px', backgroundColor: TODO_SOLID })
   })
 
   it('colors performed reps from the default effort scale', () => {
@@ -514,7 +630,7 @@ describe('VelocityStrip expanded bare strip (spotlight: numbers + info off)', ()
     expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: '#D14343' })
   })
 
-  it('carries the set-type WIDE-gap chunk encoding (drop sub-loads)', () => {
+  it('carries the set-type chunk encoding (drop sub-loads) as one bar per rep', () => {
     render(
       <VelocityStrip
         {...bareProps}
@@ -527,8 +643,9 @@ describe('VelocityStrip expanded bare strip (spotlight: numbers + info off)', ()
         }}
       />
     )
-    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ marginLeft: REP_SLOT_ML })
-    expect(screen.getByTestId('velocity-bar-2')).toHaveStyle({ marginLeft: WIDE_SLOT_ML })
+    // Folded onto SetBarChart: 4 rep bars; the WIDE chunk-notch (now a proportional column margin)
+    // is covered in SetBarChart.test.
+    expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(4)
   })
 
   it('has no chrome: no per-bar labels, no info row, no pressable', () => {
@@ -576,7 +693,7 @@ describe('VelocityStrip hero variant', () => {
     expect(screen.getByTestId('velocity-label-0')).toHaveTextContent('0.90')
   })
 
-  it('draws a dashed placeholder for each rep still to come (target − done)', () => {
+  it('draws a to-do 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)
   })