@titan-design/react-ui 0.13.0 → 0.14.0

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

@@ -1,6 +1,10 @@
 import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { RestTimer } from './RestTimer'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof RestTimer> = {
   title: 'Custom/Workout/RestTimer',
@@ -100,10 +104,17 @@ export const JustStarted: Story = {
 
 /** Wall-background frame for the ring stories (mirrors the north-star rest page). */
 const ringDecorator: Decorator = (Story) => (
-  <View style={{ width: 420, padding: 32, alignItems: 'center', backgroundColor: '#0E0E0E' }}>
+  <View
+    style={{
+      width: 420,
+      padding: 32,
+      alignItems: 'center',
+      backgroundColor: t['background-frame'],
+    }}
+  >
     <Text
       style={{
-        color: '#5A5A5A',
+        color: greyRamp[700],
         fontSize: 10,
         fontWeight: '700',
         letterSpacing: 1,

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

@@ -2,6 +2,8 @@
 import { View, Text, Pressable } from 'react-native'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
 import { useTimer } from '../../../hooks/useTimer'
 import { CircularTimer } from '../CircularTimer/CircularTimer'
 
@@ -37,7 +39,7 @@ function RestActions({ onAddTime, onSkip }: { onAddTime: () => void; onSkip: ()
       <Pressable
         onPress={onAddTime}
         style={{
-          backgroundColor: 'rgba(255,255,255,0.06)',
+          backgroundColor: alpha(primitiveColors.white, 0.06),
           paddingVertical: 8,
           paddingHorizontal: 20,
           borderRadius: 8,
@@ -56,7 +58,7 @@ function RestActions({ onAddTime, onSkip }: { onAddTime: () => void; onSkip: ()
       <Pressable
         onPress={onSkip}
         style={{
-          backgroundColor: 'rgba(255,121,0,0.12)',
+          backgroundColor: alpha(BRAND_PRIMARY, 0.12),
           paddingVertical: 8,
           paddingHorizontal: 20,
           borderRadius: 8,

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

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { SegmentedBar } from './SegmentedBar'
 import { Surface } from '../../ui/surface'
+import { primitiveColors, primitiveRamps } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 /**
  * `SegmentedBar` — a horizontal track split into weighted, individually-fillable
@@ -44,10 +48,10 @@ export const EqualSegments: Story = {
   args: {
     height: 8,
     segments: [
-      { color: '#D14343' },
-      { color: '#FF7900' },
-      { color: '#F9B415' },
-      { color: '#2ED573' },
+      { color: primitiveRamps.red[600] },
+      { color: t['brand-primary'] },
+      { color: t['status-warning'] },
+      { color: t['status-success'] },
     ],
   },
 }
@@ -58,9 +62,9 @@ export const Weighted: Story = {
     gap: 4,
     radius: 2,
     segments: [
-      { color: '#2ED573', weight: 3 },
-      { color: '#F9B415', weight: 2 },
-      { color: '#D14343', weight: 1 },
+      { color: t['status-success'], weight: 3 },
+      { color: t['status-warning'], weight: 2 },
+      { color: primitiveRamps.red[600], weight: 1 },
     ],
   },
   parameters: {
@@ -74,9 +78,9 @@ export const PartialFills: Story = {
     gap: 4,
     radius: 2,
     segments: [
-      { color: '#2ED573', fill: 1 },
-      { color: '#F9B415', fill: 0.6 },
-      { color: '#01B5D1', fill: 0.3, pulse: true },
+      { color: t['status-success'], fill: 1 },
+      { color: t['status-warning'], fill: 0.6 },
+      { color: primitiveRamps.cyan[400], fill: 0.3, pulse: true },
     ],
   },
   parameters: {
@@ -90,8 +94,8 @@ export const WithMarker: Story = {
   args: {
     height: 10,
     radius: 2,
-    segments: [{ color: '#01B5D1', fill: 0.7 }],
-    marker: { position: 0.5, color: '#FFFFFF' },
+    segments: [{ color: primitiveRamps.cyan[400], fill: 0.7 }],
+    marker: { position: 0.5, color: primitiveColors.white },
   },
   parameters: {
     docs: { description: { story: 'A single fill with a target marker at the halfway point.' } },

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

@@ -1,6 +1,7 @@
 // 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'
+import { SET_LEVEL_FLAT_BAR } from '../charts/flatBarGeometry'
 
 /** ~1.9s full cycle: a pulsing segment eases up then back down (2 × half). */
 const PULSE_HALF_MS = 950
@@ -9,7 +10,7 @@ const PULSE_HALF_MS = 950
 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
+const SEGMENTED_BAR_GAP = SET_LEVEL_FLAT_BAR.gap
 
 export interface SegmentedBarSegment {
   /** Flex weight of this segment's slot. Default 1 (all segments equal width). */
@@ -98,9 +99,9 @@ function usePulse(active: boolean): Animated.Value {
  */
 export function SegmentedBar({
   segments,
-  height = 8,
+  height = SET_LEVEL_FLAT_BAR.height,
   gap = SEGMENTED_BAR_GAP,
-  radius = 2,
+  radius = SET_LEVEL_FLAT_BAR.radius,
   marker = null,
   segmentTestID,
   style,

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { SetStrip, type SetStripSet } from './SetStrip'
 import { Surface } from '../../ui/surface'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 /**
  * `SetStrip` — the per-set segmented performance strip. One continuous bar per
@@ -138,8 +139,8 @@ function SheetRow({ label, meta, sets }: { label: string; meta: string; sets: Se
   return (
     <View style={{ gap: 6 }}>
       <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 8 }}>
-        <Text style={{ color: '#F3F4F6', fontSize: 13, fontWeight: '800' }}>{label}</Text>
-        <Text style={{ color: '#6B7280', fontSize: 10, fontFamily: 'monospace' }}>{meta}</Text>
+        <Text style={{ color: greyRamp[50], fontSize: 13, fontWeight: '800' }}>{label}</Text>
+        <Text style={{ color: greyRamp[600], fontSize: 10, fontFamily: 'monospace' }}>{meta}</Text>
       </View>
       <SetStrip sets={sets} />
     </View>

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

@@ -15,12 +15,18 @@ export interface SetsRepsLoadProps extends ViewProps {
   unit?: string
   /** Cell font size (px). Default 11 — the compact rail/card scale. Raise for a wall read-out. */
   fontSize?: number
+  /**
+   * Flatten the whole run to one dimmer, regular-weight tone (the collapsed/upcoming
+   * card row) instead of the bright bold value / muted separator split (the rail).
+   * Also drops the `×` separator's padding spaces — "3×6", not "3 × 6".
+   */
+  muted?: boolean
   className?: string
 }
 
 /**
  * The `sets × reps @ load` prescription line, in the TempoDisplay visual language
- * (Inter · 600 · letter-spacing 1 · value cells with muted `×` / `@` separators).
+ * (Inter · letter-spacing 1 · value cells with muted `×` / `@` separators).
  * Shares the {@link MetricCell} primitive with TempoDisplay so the two stay in step.
  */
 export function SetsRepsLoad({
@@ -29,11 +35,17 @@ export function SetsRepsLoad({
   load,
   unit = 'lb',
   fontSize,
+  muted = false,
   className,
   ...props
 }: SetsRepsLoadProps) {
-  const value = useOnSurfaceColor('primary')
-  const sep = useOnSurfaceColor('tertiary')
+  const primary = useOnSurfaceColor('primary')
+  const tertiary = useOnSurfaceColor('tertiary')
+  const secondary = useOnSurfaceColor('secondary')
+  const value = muted ? secondary : primary
+  const sep = muted ? secondary : tertiary
+  const weight = muted ? 400 : 600
+  const times = muted ? TIMES : ` ${TIMES} `
 
   return (
     <View
@@ -43,18 +55,20 @@ export function SetsRepsLoad({
       testID="sets-reps-load"
       {...props}
     >
-      <MetricCell color={value} fontSize={fontSize}>
+      <MetricCell color={value} fontSize={fontSize} weight={weight}>
         {sets}
       </MetricCell>
-      <MetricCell color={sep} fontSize={fontSize}>{` ${TIMES} `}</MetricCell>
-      <MetricCell color={value} fontSize={fontSize}>
+      <MetricCell color={sep} fontSize={fontSize} weight={weight}>
+        {times}
+      </MetricCell>
+      <MetricCell color={value} fontSize={fontSize} weight={weight}>
         {reps}
       </MetricCell>
-      <MetricCell color={sep} fontSize={fontSize}>{` ${AT} `}</MetricCell>
-      <MetricCell color={value} fontSize={fontSize}>
+      <MetricCell color={sep} fontSize={fontSize} weight={weight}>{` ${AT} `}</MetricCell>
+      <MetricCell color={value} fontSize={fontSize} weight={weight}>
         {load}
       </MetricCell>
-      <MetricCell color={sep} fontSize={fontSize}>{` ${unit}`}</MetricCell>
+      <MetricCell color={sep} fontSize={fontSize} weight={weight}>{` ${unit}`}</MetricCell>
     </View>
   )
 }

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

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { Sparkline } from './Sparkline'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof Sparkline> = {
   title: 'Custom/Workout/DataViz/Sparkline',
@@ -56,7 +59,7 @@ export const Descending: Story = {
   args: {
     data: descending,
     showDots: true,
-    color: '#ff4757',
+    color: t['status-error-vivid'],
   },
 }
 
@@ -64,7 +67,7 @@ export const UCurve: Story = {
   args: {
     data: uCurve,
     showDots: true,
-    color: '#2ed573',
+    color: t['status-success'],
   },
 }
 
@@ -72,7 +75,7 @@ export const Flat: Story = {
   args: {
     data: flat,
     showDots: true,
-    color: '#ffd43b',
+    color: t['status-warning-light'],
   },
 }
 
@@ -81,8 +84,8 @@ export const WithReferenceLines: Story = {
     data: ascending,
     showDots: true,
     referenceLines: [
-      { value: 30, color: '#ff4757', dashed: true },
-      { value: 45, color: '#2ed573', dashed: false },
+      { value: 30, color: t['status-error-vivid'], dashed: true },
+      { value: 45, color: t['status-success'], dashed: false },
     ],
   },
 }
@@ -99,7 +102,7 @@ export const DotsAndHighlightLast: Story = {
     data: volatile,
     showDots: true,
     highlightLast: true,
-    color: '#ffa502',
+    color: t['status-warning'],
   },
 }
 
@@ -116,10 +119,10 @@ export const AllShapes: Story = {
   render: () => (
     <View style={{ gap: 16, padding: 16 }}>
       <Sparkline data={ascending} showDots highlightLast />
-      <Sparkline data={descending} showDots color="#ff4757" />
-      <Sparkline data={uCurve} showDots color="#2ed573" />
-      <Sparkline data={flat} showDots color="#ffd43b" />
-      <Sparkline data={volatile} showDots color="#ffa502" highlightLast />
+      <Sparkline data={descending} showDots color={t['status-error-vivid']} />
+      <Sparkline data={uCurve} showDots color={t['status-success']} />
+      <Sparkline data={flat} showDots color={t['status-warning-light']} />
+      <Sparkline data={volatile} showDots color={t['status-warning']} highlightLast />
     </View>
   ),
 }

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

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { View, Text } from 'react-native'
 import { StrengthTrendChart } from './StrengthTrendChart'
 import type { StrengthTrendDataPoint } from './StrengthTrendChart'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const actual: StrengthTrendDataPoint[] = [
   { date: '2026-01-06', e1rm: 215, sessionLabel: 'Jan 6' },
@@ -122,7 +123,7 @@ function InteractiveChart() {
         unit="lbs"
         onPointPress={setSelected}
       />
-      <Text style={{ marginTop: 12, fontSize: 12, color: '#9CA3AF' }}>
+      <Text style={{ marginTop: 12, fontSize: 12, color: greyRamp[400] }}>
         {selected
           ? `Tapped ${selected.sessionLabel ?? selected.date}: ${selected.e1rm} lbs`
           : 'Tap a point on the chart.'}

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

@@ -4,6 +4,8 @@ import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-n
 import { cn } from '../../../utils/cn'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
 
 const sem = getSemanticColors('dark')
 
@@ -14,11 +16,11 @@ const PROJECTION_LINE_COLOR = resolveColor('text-tertiary')
 const STATUS_SUCCESS = sem['status-success']
 const STATUS_ERROR = sem['status-error']
 const STATUS_WARNING = sem['status-warning']
-const GRID_LINE = 'rgba(255,255,255,0.06)'
-const SUCCESS_PILL_BG = 'rgba(46,213,115,0.10)'
-const SUCCESS_PILL_BORDER = 'rgba(46,213,115,0.20)'
-const ERROR_PILL_BG = 'rgba(209,67,67,0.10)'
-const ERROR_PILL_BORDER = 'rgba(209,67,67,0.20)'
+const GRID_LINE = alpha(primitiveColors.white, 0.06)
+const SUCCESS_PILL_BG = alpha(STATUS_SUCCESS, 0.1)
+const SUCCESS_PILL_BORDER = alpha(STATUS_SUCCESS, 0.2)
+const ERROR_PILL_BG = alpha(STATUS_ERROR, 0.1)
+const ERROR_PILL_BORDER = alpha(STATUS_ERROR, 0.2)
 
 /** Left gutter reserved for y-axis value labels. */
 const PLOT_LEFT = 26
@@ -379,7 +381,7 @@ export function StrengthTrendChart({
                 height,
                 borderLeftWidth: 1,
                 borderStyle: 'dashed',
-                borderLeftColor: 'rgba(255,255,255,0.10)',
+                borderLeftColor: alpha(primitiveColors.white, 0.1),
               }}
             />
           ))}

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

@@ -3,6 +3,7 @@ import type { ComponentProps } from 'react'
 import { useEffect, useState } from 'react'
 import { View, Text } from 'react-native'
 import { TempoDisplay, type TempoLivePhase, type TempoLiveState } from './TempoDisplay'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 // tempo = [eccentric, pauseBottom, concentric, pauseTop]
 const meta: Meta<typeof TempoDisplay> = {
@@ -166,7 +167,7 @@ function Condition({
 }: { caption: string } & ComponentProps<typeof TempoDisplay>) {
   return (
     <View style={{ gap: 5 }}>
-      <Text style={{ color: '#9CA3AF', fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
+      <Text style={{ color: greyRamp[400], fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
         {caption}
       </Text>
       <TempoDisplay showLabel={false} showInfo={false} fontSize={26} {...props} />
@@ -179,7 +180,7 @@ function Section({ title, children }: { title: string; children: React.ReactNode
     <View style={{ gap: 12 }}>
       <Text
         style={{
-          color: '#E5E7EB',
+          color: greyRamp[100],
           fontFamily: 'Inter, sans-serif',
           fontSize: 12,
           fontWeight: '700',
@@ -313,7 +314,7 @@ export const ActiveTempoConditions: Story = {
           live={{ activePhase: null, phaseElapsedMs: 0 }}
         />
         <View style={{ gap: 5 }}>
-          <Text style={{ color: '#9CA3AF', fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
+          <Text style={{ color: greyRamp[400], fontFamily: 'Inter, sans-serif', fontSize: 11 }}>
             Animated · Ecc → Pause → Con → 2s rest, banking each phase
           </Text>
           <LiveTempoDemo />

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

@@ -53,6 +53,8 @@ export interface TempoDisplayProps extends ViewProps {
 }
 
 const INTER = 'Inter, sans-serif'
+// VW-82: Tailwind gray-500, not titan's text-tertiary (#888684) despite the name.
+// Left raw — re-pointing it at the ramp is a visual change awaiting sign-off.
 const TEXT_TERTIARY = '#6B7280'
 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)

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

@@ -57,9 +57,10 @@ const meta: Meta<typeof DualVelocityStrip> = {
     },
     variant: {
       control: 'inline-radio',
-      options: ['hero', 'compact', 'rail'],
+      options: ['hero', 'compact', 'dual-expanded'],
       description:
-        'hero (wall: labels + reference lines), compact (flat resting fold), or rail (lean, neither)',
+        'hero (wall: labels + reference lines), compact (flat resting fold), or dual-expanded ' +
+        '(lean, neither — `"rail"` is a deprecated alias for the same renderer)',
     },
     scale: {
       control: 'inline-radio',

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

@@ -199,7 +199,7 @@ export const Responsive: Story = {
           <DualVelocityStrip
             left={{ velocities: REP_SET, label: 'Left' }}
             right={{ velocities: REP_SET_LAGGING, label: 'Right' }}
-            variant="rail"
+            variant="dual-expanded"
             height={h}
             scale="fixed"
           />

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { VelocityStrip, DualVelocityStrip } from './VelocityStrip'
+import { FIXED_MAX_VALUE, PEAK_HEADROOM } from '../charts/SetBarChart'
 import {
   Sheet,
   Note,
@@ -216,6 +217,45 @@ export const RepTypes: Story = {
   ),
 }
 
+/**
+ * VW-97: `scale="fixed"` used the bare `FIXED_MAX_VALUE` ceiling with no headroom multiplier, so a
+ * rep AT the ceiling filled the plot to its very top with no room for its own label — unlike an
+ * equally-tall `peak` bar, which always kept `PEAK_HEADROOM`'s margin. `scaleDenominator` now
+ * applies the same headroom to both scales.
+ *
+ * "Before" reproduces the old denominator through the public `scaleMax` prop (`scaleMax *
+ * PEAK_HEADROOM` cancels back down to the bare ceiling) rather than a hand-rolled duplicate, so
+ * this story exercises the real component on both sides.
+ */
+export const FixedScaleHeadroom: Story = {
+  name: 'Fixed Scale Headroom (VW-97)',
+  decorators: [wallDecorator],
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 24 }}>
+      <View style={{ gap: 8, flex: 1 }}>
+        <ViewLabel text="before · ceiling bar touches the plot top" />
+        <VelocityStrip
+          velocities={[FIXED_MAX_VALUE, FIXED_MAX_VALUE * 0.6]}
+          variant="hero"
+          label="Set"
+          height={140}
+          scaleMax={FIXED_MAX_VALUE / PEAK_HEADROOM}
+        />
+      </View>
+      <View style={{ gap: 8, flex: 1 }}>
+        <ViewLabel text="after · fixed reserves the same headroom peak does" />
+        <VelocityStrip
+          velocities={[FIXED_MAX_VALUE, FIXED_MAX_VALUE * 0.6]}
+          variant="hero"
+          label="Set"
+          height={140}
+          scale="fixed"
+        />
+      </View>
+    </View>
+  ),
+}
+
 export const EdgeCases: Story = {
   name: 'Edge Cases',
   decorators: [wallDecorator],

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

@@ -9,6 +9,7 @@ import {
   calculateMeanVelocity,
   getVelocityLossColor,
 } from './VelocityStrip'
+import { FIXED_MAX_VALUE } from '../charts/SetBarChart'
 
 const sampleVelocities = [1.1, 0.95, 0.82, 0.68, 0.45]
 
@@ -583,28 +584,69 @@ describe('VelocityStrip expanded bare strip (spotlight: numbers + info off)', ()
   })
 
   it('scales bar height to velocity against the fixed ceiling at the given height', () => {
+    const barPx = (id: string) => parseFloat(getComputedStyle(screen.getByTestId(id)).height)
     render(
       <VelocityStrip
         {...bareProps}
         scale="fixed"
         height={24}
-        set={{ type: 'straight', velocities: [1.15, 0.575], planned: 2 }}
+        set={{ type: 'straight', velocities: [0.6, 0.3], planned: 2 }}
       />
     )
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '24px' })
-    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ height: '12px' })
+    // Proportional to velocity against the fixed ceiling, not the performed max — a 2:1 velocity
+    // ratio reads as a 2:1 bar-height ratio.
+    expect(barPx('velocity-bar-0')).toBeCloseTo(2 * barPx('velocity-bar-1'), 5)
   })
 
   it('honors height for the scaling', () => {
-    render(
+    const barPx = (id: string) => parseFloat(getComputedStyle(screen.getByTestId(id)).height)
+    const { unmount } = render(
       <VelocityStrip
         {...bareProps}
         scale="fixed"
         height={40}
-        set={{ type: 'straight', velocities: [1.15], planned: 1 }}
+        set={{ type: 'straight', velocities: [0.6], planned: 1 }}
+      />
+    )
+    const at40 = barPx('velocity-bar-0')
+    unmount()
+    render(
+      <VelocityStrip
+        {...bareProps}
+        scale="fixed"
+        height={80}
+        set={{ type: 'straight', velocities: [0.6], planned: 1 }}
+      />
+    )
+    expect(barPx('velocity-bar-0')).toBeCloseTo(2 * at40, 5)
+  })
+
+  it('reserves the same headroom above the fixed ceiling that `peak` reserves above its own max (VW-97)', () => {
+    // A rep AT the fixed ceiling must NOT fill the plot — it needs the identical margin an
+    // equally-tall `peak` bar always keeps for its own value label.
+    const { unmount } = render(
+      <VelocityStrip
+        {...bareProps}
+        scale="fixed"
+        height={100}
+        set={{ type: 'straight', velocities: [FIXED_MAX_VALUE], planned: 1 }}
+      />
+    )
+    const fixedAtCeilingPx = parseFloat(
+      getComputedStyle(screen.getByTestId('velocity-bar-0')).height
+    )
+    unmount()
+    render(
+      <VelocityStrip
+        {...bareProps}
+        scale="peak"
+        height={100}
+        set={{ type: 'straight', velocities: [1], planned: 1 }}
       />
     )
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '40px' })
+    const peakAtMaxPx = parseFloat(getComputedStyle(screen.getByTestId('velocity-bar-0')).height)
+    expect(fixedAtCeilingPx).toBeLessThan(100)
+    expect(fixedAtCeilingPx).toBeCloseTo(peakAtMaxPx, 5)
   })
 
   it('draws planned-but-undone reps as short grey todo stubs (set-type aware)', () => {

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

@@ -702,9 +702,14 @@ export interface DualVelocityStripProps extends ViewProps {
    * `hero` — the across-the-room wall scale: tall wings, per-rep m/s value labels, and a dashed
    * running-best reference line per side. `compact` — the flat resting form: dual-hero but flat +
    * no labels (both wings are the `compact` VelocityStrip variant), same aligned structure + shared
-   * gutter + axis. `rail` — the compact rail-expanded lean renderer, no labels / reference lines.
+   * gutter + axis. `dual-expanded` — the compact rail-expanded lean renderer, no labels / reference
+   * lines (VW-97: `rail` was a verified misnomer — this variant is the value-height strip a session
+   * rail row expands into, not the rail itself).
+   *
+   * `rail` is a **deprecated alias** for `dual-expanded` (same renderer, same output) — kept for one
+   * release so existing call sites keep working; see the Workout README.
    */
-  variant?: 'hero' | 'compact' | 'rail'
+  variant?: 'hero' | 'compact' | 'dual-expanded' | 'rail'
   /**
    * Bar-height scaling, shared across BOTH wings so the L/R asymmetry reads as bar
    * length against one scale. `peak` (default) = the pair's max +headroom; `fixed` =
@@ -926,12 +931,12 @@ function DualVelocityHero({
 }
 
 /**
- * The `rail` diverging chart — a lean, compact dedicated renderer. Composing the hero here would
- * drag in its value labels, reference lines, paper, and label headroom, none of which belong at
- * rail scale; instead it draws mirrored per-side bars at the compact rail metrics. Same shared
- * height scale + per-side loss coloring + mirrored radius + shared axis as the hero, but no labels
- * / reference lines / paper. (Set-type slot windows are a hero-composition concern; rail only ever
- * takes plain velocities.)
+ * The `dual-expanded` diverging chart (formerly `rail`) — a lean, compact dedicated renderer.
+ * Composing the hero here would drag in its value labels, reference lines, paper, and label
+ * headroom, none of which belong at this scale; instead it draws mirrored per-side bars at the
+ * compact metrics. Same shared height scale + per-side loss coloring + mirrored radius + shared
+ * axis as the hero, but no labels / reference lines / paper. (Set-type slot windows are a
+ * hero-composition concern; this renderer only ever takes plain velocities.)
  */
 function DualVelocityRail({
   leftDone,
@@ -1090,11 +1095,14 @@ export function DualVelocityStrip({
   className,
   ...props
 }: DualVelocityStripProps) {
+  // `rail` is the deprecated alias for `dual-expanded` — normalize once so every branch below
+  // reads one canonical value instead of re-checking both spellings.
+  const resolvedVariant = variant === 'rail' ? 'dual-expanded' : variant
   const resolvedHeight =
     height ??
-    (variant === 'hero'
+    (resolvedVariant === 'hero'
       ? DUAL_HERO_HEIGHT
-      : variant === 'compact'
+      : resolvedVariant === 'compact'
         ? DUAL_COMPACT_HEIGHT
         : DUAL_RAIL_HEIGHT)
   // The done arrays drive the shared max + per-side best + the summary counts; the raw streams
@@ -1123,10 +1131,11 @@ export function DualVelocityStrip({
     viewProps: props,
   }
 
-  // `liveRepIndex` reaches the rail too: its wings are composed strips, so the newest rep grows
-  // from the midline on BOTH sides. Compact is flat, so a grow animation has nothing to animate.
-  if (variant === 'rail') return <DualVelocityRail {...shared} liveRepIndex={liveRepIndex} />
-  if (variant === 'compact') return <DualVelocityCompactStrip {...shared} />
+  // `liveRepIndex` reaches dual-expanded too: its wings are composed strips, so the newest rep
+  // grows from the midline on BOTH sides. Compact is flat, so a grow animation has nothing to animate.
+  if (resolvedVariant === 'dual-expanded')
+    return <DualVelocityRail {...shared} liveRepIndex={liveRepIndex} />
+  if (resolvedVariant === 'compact') return <DualVelocityCompactStrip {...shared} />
   return <DualVelocityHero {...shared} liveRepIndex={liveRepIndex} />
 }
 

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

@@ -3,8 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ZoneTrack, type ZoneTrackZone } from './ZoneTrack'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 import { Surface } from '../../ui/surface'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 const { green, yellow, orange, red } = WORKOUT_TOKENS.scale
+const t = getSemanticColors('dark')
 
 const FATIGUE_ZONES: ZoneTrackZone[] = [
   { upTo: 10, color: green },
@@ -86,7 +88,7 @@ export const BandWithMarker: Story = {
     ],
     min: 6,
     max: 10,
-    band: { from: 7.2, to: 8.4, color: 'rgba(255,255,255,0.22)' },
+    band: { from: 7.2, to: 8.4, color: t['hairline-strong'] },
     marker: { type: 'needle', value: 8.1 },
     ticks: [
       { value: 6, label: '6' },