@titan-design/react-ui 0.9.3 → 0.11.0

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

@@ -49,7 +49,7 @@ describe('ExerciseCard', () => {
       expect(screen.getByTestId('pr-badge-star')).toBeInTheDocument()
     })
 
-    it('renders mini velocity strips for logged sets', () => {
+    it('renders compact velocity strips for logged sets', () => {
       render(
         <ExerciseCard
           {...baseCollapsedProps}
@@ -158,10 +158,10 @@ describe('ExerciseCard', () => {
       expect(within(rows[2]).getByText('3')).toHaveStyle({ color: T_MUTED })
     })
 
-    it('uses the compact velocity-height spotlight for the live set and mini elsewhere', () => {
+    it('uses the velocity-height spotlight for the live set and the flat compact strip elsewhere', () => {
       render(<ExerciseCard {...expandedProps} />)
-      expect(screen.getAllByTestId('velocity-strip-compact')).toHaveLength(1)
-      expect(screen.getAllByTestId('velocity-strip-mini')).toHaveLength(2)
+      expect(screen.getAllByTestId('velocity-strip-spotlight')).toHaveLength(1)
+      expect(screen.getAllByTestId('velocity-strip-compact')).toHaveLength(2)
     })
 
     it('renders the TempoDisplay in the header when tempo provided', () => {

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

@@ -194,7 +194,9 @@ function CollapsedCard({
                 key={i}
                 velocities={velocities}
                 zones={velocityZones}
-                variant="mini"
+                variant="compact"
+                height={8}
+                hideBaseline
                 testID={`exercise-card-velocity-strip-${i}`}
               />
             ))}

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

@@ -386,7 +386,13 @@ function VbtBreakdown({
               {set.label}
             </Text>
             <View className="flex-1" style={{ height: 8, justifyContent: 'center' }}>
-              <VelocityStrip velocities={set.velocities} zones={zones} variant="mini" />
+              <VelocityStrip
+                velocities={set.velocities}
+                zones={zones}
+                variant="compact"
+                height={8}
+                hideBaseline
+              />
             </View>
             <Text
               className="text-text-tertiary"

package/src/components/custom/Workout/README.md

@@ -13,8 +13,8 @@ DeviationBar · IntensityBar · WorkoutPill · MuscleGroupChip · Sparkline ·
 SupersetWrapper · InputBar · MetricCell · SetsRepsLoad · ExerciseIndicator · SetBar
 
 **Molecules** — compose atoms, own a little local state:
-VelocityStrip · SetRow · TempoDisplay · RestTimer · MesoProgressBar · WeekRow ·
-WorkoutCard · SetStrip · ExerciseHeading · ExerciseCardHeading
+VelocityStrip · DualVelocityStrip · SetRow · TempoDisplay · RestTimer · MesoProgressBar ·
+WeekRow · WorkoutCard · SetStrip · ExerciseHeading · ExerciseCardHeading
 
 **Organisms** — full features, often with their own data contract:
 ExerciseCard · SessionRail · MesoCard · MesoStatusCard · PrHistoryModal ·
@@ -66,11 +66,12 @@ type props without pulling the dependency.
      needs the same yellow/green/red "time-to-target" tone (a coach card, a rep-tempo
      summary). It is pure logic, trivially portable.
   3. **`LiveTempoRow` → a `TempoLiveRow` molecule** — only if a consumer wants the running
-     row *without* the chip chrome (label/background/padding). Until then the chrome and the
+     row _without_ the chip chrome (label/background/padding). Until then the chrome and the
      row belong together as one component with a `live` prop, not two.
 
   Not worth splitting today (speculative extraction the workflow warns against); this note
   is the trigger list for when it stops being speculative.
+
 - **S3 session-rail family** — `SessionRail` (organism) composes the standalone
   `ExerciseCardHeading` molecule per exercise, which composes an `ExerciseHeading`
   info block + a `SetStrip`:
@@ -96,7 +97,7 @@ type props without pulling the dependency.
   vs. variable-todo cyan), `drop` (one set, sub-loads split by 2px notches), `myo`
   (done rest-pause — activation + clusters split by 3px cluster gaps), and
   `myo-upcoming` (planned myo, length unknown — grey activation + a fading, right-open
-  cyan "clusters-to-failure" trail). The chunk-size *pattern* carries set-type identity:
+  cyan "clusters-to-failure" trail). The chunk-size _pattern_ carries set-type identity:
   **butted reps (0) < notch (2px) < cluster gap (3px) < set gap (5px)**. `cyan-900`
   (`SET_STRIP_VARIABLE_COLOR`) is the shared "variable / unknown / opportunity" pin.
   `SegmentedBar` carries these via additive `leadingGap` (per-segment left margin) and
@@ -113,6 +114,14 @@ type props without pulling the dependency.
   **Composes** link down the tree — matching the S1/S2 shell families. (The component
   files stay flat on disk in `custom/Workout/`; only the story `title`s build the tree.)
 
+- **Dual at the RAIL level — rejected, removed** — `DualSessionRail` (two
+  `SessionRail` columns side by side) was explored and rejected: bilateral
+  asymmetry is a property of how a SET was performed, not of the session's
+  structure, so the rail stays single and consistent and the dual distinction is
+  surfaced per-set/per-rep instead (`DualVelocityStrip`). Deleted 2026-07-26 —
+  see `packages/ui/REJECTED.md` for the full reasoning. Do not reintroduce a
+  rail-level split without reading it first.
+
 - **VelocityStrip set-type modes (`set` prop)** — beyond the flat `velocities`
   array (unchanged, still the source of truth for `SetRow` / `ExerciseCard`), the
   strip accepts an optional structured `VelocitySet` descriptor and renders the
@@ -133,7 +142,7 @@ type props without pulling the dependency.
   active-set spotlight (velocity-height done reps + short grey stubs) and renders
   the advanced types as a short mini-style encoding. Every modality is documented
   with a copy-paste `set` config in **`Workout/DataViz/VelocityStrip/Set
-  Modalities`** (each card carries a `Collapse` accordion; promoted from the
+Modalities`** (each card carries a `Collapse` accordion; promoted from the
   now-deleted `S3SetModalities` Lab specimen).
 - **VelocityStrip `hero` variant** — the across-the-room, single-set **wall**
   treatment (the north-star live page's velocity hero). Tall bars (default 220px
@@ -147,12 +156,49 @@ type props without pulling the dependency.
   left-packed) with a caller-set fixed height; the eyebrow/section title is
   organism chrome, not part of the primitive. **Live-update model:** the plan's
   slots are pre-allocated (`max(done, target)` columns), so a landing rep converts
-  placeholder→bar in the *same* slot with a pop — no reflow within the plan; pair
+  placeholder→bar in the _same_ slot with a pop — no reflow within the plan; pair
   with `scale="fixed"` so heights never rescale either. The one reflow case is
   set-expansion **beyond** `targetReps` (AMRAP overflow adds a column and flex-
   narrows the rest — currently snaps; smooth overflow reflow is a deferred
   follow-up). Documented by the `HeroPlayground` / `Hero*` stories on the wall
   background.
+- **DualVelocityStrip** (molecule) — the two-device (LEFT + RIGHT voltra) **diverging**
+  wall/rail chart. `composes ↓` the `VelocityStrip` machinery in the same file
+  (`buildSlots`/`VelocitySlot` slot model, the `makeBarColorFor` zone scale, the hero
+  geometry constants, the shared `useLiveRepPop` entrance, and the extracted
+  `DashedReferenceLine`) rather than restating it. `used-by ↑` the north-star dual-voltra
+  live page (organism chrome). ONE diverging chart shares a horizontal centre axis: LEFT
+  reps grow **up**, RIGHT reps grow **down**, one mirrored pair per rep index, so the L/R
+  asymmetry reads pre-attentively as the silhouette. **Side is POSITION only, never hue** —
+  both wings colour reps by velocity zone through the same resolver as the single strip.
+  Each side takes a `DualVelocityStream` (`velocities` OR a structured `set` — the same
+  shapes `VelocityStrip` accepts — plus an optional `label`). The **vertical edge label is
+  data**: each side renders its `DualVelocityStream.label` (a slot name, e.g. "Left Arm"),
+  NOT a hardcoded LEFT/RIGHT — a side with no `label` (or an empty one) renders no tag, and
+  when neither side carries one the gutter is omitted entirely. The label keeps the prior
+  vertical (rotated) orientation so it never overlaps the bars. Two scales: `hero` (tall
+  wings, per-rep m/s velocity labels, a dashed running-best reference line per side) and
+  `rail` (compact — no velocity labels / reference lines, slot names in a narrow gutter).
+  **Rep-index alignment is the invariant:** column *i* is rep *i* on
+  both sides, so the set-type slot *kinds* carry through (rep / todo / variable / continue,
+  coloured as in the single strip) but the wide-notch chunk **gaps** (drop / myo / cluster
+  boundaries) are intentionally NOT rendered — per-side horizontal gaps would break the
+  mirrored L↔R column alignment. Single-voltra sets keep using `VelocityStrip`
+  `variant="hero"`. Documented by the `Playground` / `Hero*` / `Rail` stories on the wall
+  background (`Workout/DataViz/DualVelocityStrip`).
+
+  **Reuse audit — `DashedReferenceLine` (in-file today, top-level follow-up).** The dashed
+  running-best line was hand-rolled three times inside `VelocityStrip.tsx` (the single
+  `hero`, plus the dual's L and R wings); it is now one in-file `DashedReferenceLine`
+  (`anchor: 'top' | 'bottom'`, pixel `offset`, `testID`) those three sites share. A FOURTH
+  consumer exists across files — `Sparkline`'s `referenceLines` prop renders the same dashed
+  overlay (with an added opacity, an optional label, and a data-domain→Y projection), and two
+  Lab specimens duplicate it again. Promoting `DashedReferenceLine` to a **top-level
+  `ReferenceLine` overlay primitive** and migrating `Sparkline` (keeping its label/opacity
+  options as props) is the ≥2-consumer extraction the DoD favours — deliberately deferred to
+  a follow-up so the hero PR stays focused (the cross-file migration touches `Sparkline`'s
+  test surface and the Lab specimens, which are out of this branch's scope). Proposed API:
+  `<ReferenceLine anchor offset color dashed opacity? label? testID />`.
 - **RestTimer `ring` variant** — the across-the-room **wall** rest treatment (the
   north-star rest page). Built as a **three-tier decomposition** (not a one-off):
   `CircularProgress` (atom, gained a **`children`** center slot + a **`fill`**
@@ -174,7 +220,7 @@ type props without pulling the dependency.
   dashboard scale, added as the idiomatic titan `size` union (a JS number-map per
   component; **`default` values are byte-identical** to before, so existing consumers are
   untouched). **ZoneTrack** (the shared gauge primitive) gained `size` that scales track,
-  needle, tick lines and tick labels together; its *other* consumers (TrainingLoadGauge,
+  needle, tick lines and tick labels together; its _other_ consumers (TrainingLoadGauge,
   RpeCalibration) default to `default` and are unaffected. **FatigueMeter** passes `size`
   through and lets `trackHeight` flow from it. `Wall*` / `WallDensity` stories on the wall
   background. (**TempoBar** was retired here — the standalone active-tempo bar is superseded
@@ -187,17 +233,17 @@ type props without pulling the dependency.
   per exercise, six distinct kinds over four tier colors (bound to titan status
   tokens, read as literal hex via `getSemanticColors('dark')`, not `resolveColor`,
   so tests can assert them). Glyph = the specific signal; color = the severity tier. Chips are
-  outlined (border + glyph, no fill) so they never collide with the *filled*
+  outlined (border + glyph, no fill) so they never collide with the _filled_
   velocity strip, and static (no pulse — they are chrome). Precedence, high → low:
 
-  | # | kind | tier | glyph (mirrors lucide) |
-  |---|------|------|------------------------|
-  | 1 | `imbalance` | danger (`status-error`) | `Scale` |
-  | 2 | `overshoot` | danger (`status-error`) | `AlertTriangle` |
-  | 3 | `velocity-loss` | warning (`status-warning`) | `TrendingDown` |
-  | 4 | `missed-reps` | warning (`status-warning`) | `CircleSlash` |
-  | 5 | `pr` | success (`status-success`) | `Award` |
-  | 6 | `info` | info (`status-info`) | `Info` |
+  | #   | kind            | tier                       | glyph (mirrors lucide) |
+  | --- | --------------- | -------------------------- | ---------------------- |
+  | 1   | `imbalance`     | danger (`status-error`)    | `Scale`                |
+  | 2   | `overshoot`     | danger (`status-error`)    | `AlertTriangle`        |
+  | 3   | `velocity-loss` | warning (`status-warning`) | `TrendingDown`         |
+  | 4   | `missed-reps`   | warning (`status-warning`) | `CircleSlash`          |
+  | 5   | `pr`            | success (`status-success`) | `Award`                |
+  | 6   | `info`          | info (`status-info`)       | `Info`                 |
 
   `resolveIndicator(candidates)` collapses the active signals to the single
   highest-precedence kind to show (`undefined` when none). Alerts outrank `pr`. The

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

@@ -22,6 +22,9 @@ import { WeightBadge } from './WeightBadge'
 import { PrBadge } from './PrBadge'
 import { PlaceholderStrip } from './PlaceholderStrip'
 import { SupersetWrapper } from './SupersetWrapper'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 // ----------------------------------------------------------------------------- gallery scaffold
 class Boundary extends Component<{ children: ReactNode }, { err: string | null }> {
@@ -364,10 +367,10 @@ export const AllRows: Story = {
         </Cell>
         <Cell name="SupersetWrapper" entity="grouping bracket" expand="no">
           <SupersetWrapper label="SS1" color="#FF7900">
-            <View style={{ padding: 10, backgroundColor: '#1C1C1C', borderRadius: 8 }}>
+            <View style={{ padding: 10, backgroundColor: t['surface-raised'], borderRadius: 8 }}>
               <Text style={{ color: '#F3F4F6' }}>Exercise A</Text>
             </View>
-            <View style={{ padding: 10, backgroundColor: '#1C1C1C', borderRadius: 8 }}>
+            <View style={{ padding: 10, backgroundColor: t['surface-raised'], borderRadius: 8 }}>
               <Text style={{ color: '#F3F4F6' }}>Exercise B</Text>
             </View>
           </SupersetWrapper>

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

@@ -4,6 +4,9 @@
  */
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { NavStub, Rail, Page, T_TERTIARY } from './setHeadingKit'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 type Args = { stripHeight: number }
 const meta: Meta<Args> = {
@@ -25,7 +28,16 @@ export const NextToNav: Story = {
       <div style={{ display: 'flex', alignItems: 'stretch', width: 'fit-content' }}>
         <NavStub />
         <Rail stripH={args.stripHeight} />
-        <div style={{ width: 140, background: '#161616', alignSelf: 'stretch', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div
+          style={{
+            width: 140,
+            background: t['background-base'],
+            alignSelf: 'stretch',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
           <span style={{ fontSize: 10, color: T_TERTIARY, fontFamily: 'monospace' }}>stage</span>
         </div>
       </div>

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

@@ -56,7 +56,7 @@ export const Weighted: Story = {
   args: {
     height: 12,
     gap: 4,
-    radius: 6,
+    radius: 2,
     segments: [
       { color: '#2ED573', weight: 3 },
       { color: '#F9B415', weight: 2 },
@@ -72,7 +72,7 @@ export const PartialFills: Story = {
   args: {
     height: 12,
     gap: 4,
-    radius: 6,
+    radius: 2,
     segments: [
       { color: '#2ED573', fill: 1 },
       { color: '#F9B415', fill: 0.6 },
@@ -89,7 +89,7 @@ export const PartialFills: Story = {
 export const WithMarker: Story = {
   args: {
     height: 10,
-    radius: 5,
+    radius: 2,
     segments: [{ color: '#01B5D1', fill: 0.7 }],
     marker: { position: 0.5, color: '#FFFFFF' },
   },

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

@@ -8,8 +8,8 @@ import { MetricTiles, type MetricTileData } from './MetricTiles'
 import { ScheduleTiles } from './ScheduleTiles'
 import { paceTone, paceToneColor } from './paceTone'
 
-// The header shares the SideNav's `background-base` (charcoal 900, #101010) so the nav and
-// the rail header read as ONE continuous dark plane on the left — the sunk exercise list
+// The header shares the SideNav's `background-base` (warm-tapered ramp shell, #1C1916) so the
+// nav and the rail header read as ONE continuous dark plane on the left — the sunk exercise list
 // sits raised off it. A `<Surface level="background">` owns that plane so the header no
 // longer hand-sets it, and its title/label text resolve on-surface colours from context.
 

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

@@ -1,8 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { SessionRail, type SessionRailExercise } from './SessionRail'
 
+const t = getSemanticColors('dark')
+
 /**
  * `SessionRail` (shell organism) — the live-workout exercise list: a flat raised
  * `SessionHeader` glance (title, stat tiles, chunked pace bar) over a sunk, inset list
@@ -20,7 +23,7 @@ const meta: Meta<typeof SessionRail> = {
   },
   decorators: [
     (Story) => (
-      <View className="min-h-screen flex-row" style={{ backgroundColor: '#101010' }}>
+      <View className="min-h-screen flex-row" style={{ backgroundColor: t['background-base'] }}>
         <Story />
         <View className="flex-1 items-center justify-center">
           <Text style={{ color: '#6B7280', fontSize: 12 }}>main viewport</Text>

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

@@ -76,6 +76,49 @@ describe('SessionRail', () => {
     expect(onExercisePress).toHaveBeenCalledWith(exercises[1], 1)
   })
 
+  describe('expandedIndex', () => {
+    const withSets: SessionRailExercise[] = exercises.map((ex, i) =>
+      i === 1
+        ? {
+            ...ex,
+            sets: [
+              {
+                state: 'done' as const,
+                setNumber: 1,
+                unit: 'lbs' as const,
+                reps: 10,
+                weight: 90,
+                velocities: [0.72, 0.66],
+              },
+            ],
+          }
+        : ex
+    )
+
+    it('renders the named exercise expanded in place, leaving the others collapsed', () => {
+      render(<SessionRail {...baseProps} exercises={withSets} expandedIndex={1} />)
+      // The expanded row reveals the set table; the collapsed ones do not.
+      expect(screen.getByText('SET')).toBeInTheDocument()
+      expect(screen.getByText('RPE')).toBeInTheDocument()
+      // Every exercise still has a row.
+      expect(screen.getByText('Seated Cable Row')).toBeInTheDocument()
+      expect(screen.getByText('Cable Chest Press')).toBeInTheDocument()
+      expect(screen.getByText('Face Pull')).toBeInTheDocument()
+    })
+
+    it('stays collapsed when the named exercise has no sets', () => {
+      // Guards the real case: an exercise whose sets have not loaded yet must not
+      // expand into an empty table.
+      render(<SessionRail {...baseProps} expandedIndex={1} />)
+      expect(screen.queryByText('SET')).not.toBeInTheDocument()
+    })
+
+    it('leaves every row collapsed when expandedIndex is omitted', () => {
+      render(<SessionRail {...baseProps} exercises={withSets} />)
+      expect(screen.queryByText('SET')).not.toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(<SessionRail {...baseProps} />)

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

@@ -4,18 +4,20 @@ import { primitiveColors } from '../../../theme/tokens/primitives'
 import { neumorphicShadows } from '../../../theme/shadows'
 import { Surface } from '../../ui/surface'
 import { ExerciseCardHeading } from './ExerciseCardHeading'
+import { ExerciseCard } from './ExerciseCard'
+import type { SetRowProps } from './SetRow'
 import { SessionHeader } from './SessionHeader'
 import type { MetricTileData } from './MetricTiles'
 import type { SetStripSet } from './SetStrip'
 import type { ExerciseIndicatorKind } from './ExerciseIndicator'
 
-// Charcoal-ramp surfaces (the locked S3 shell shades): the nav + the heading plane read as
-// ONE dark plane (charcoal 900, #101010, owned by SessionHeader's `<Surface level="background">`).
-// The exercise list is a LIGHTER inset panel — `<Surface level="elevated">` (charcoal 600,
-// #191919) — recessed via its inner shadow yet paler than the header, so the transparent
+// Warm-tapered ramp surfaces (the locked S3 shell shades): the nav + the heading plane read as
+// ONE dark plane (background shell, #1C1916, owned by SessionHeader's `<Surface level="background">`).
+// The exercise list is a LIGHTER inset panel — `<Surface level="elevated">` (#2A2827) —
+// recessed via its inner shadow yet paler than the header, so the transparent
 // exercise headings on it never blend into the header plane. Surface owns both backgrounds,
 // so the rail no longer hand-sets them.
-const DIVIDER = primitiveColors.charcoal[300] // #2C2C2C — row divider (raised to read on #191919)
+const DIVIDER = primitiveColors.charcoal[300] // #2C2C2C — row divider (raised to read on surface-elevated #2A2827)
 
 const DEFAULT_WIDTH = 246
 
@@ -38,6 +40,12 @@ export interface SessionRailExercise {
   setStates: SetStripSet[]
   /** Dim the row as a not-yet-reached exercise. */
   upcoming?: boolean
+  /**
+   * Per-set rows for the expanded body. Only read when this row is the one named
+   * by `expandedIndex` — a rail row without them can never expand, which is the
+   * correct behaviour for an exercise whose sets aren't loaded.
+   */
+  sets?: SetRowProps[]
 }
 
 export interface SessionRailProps extends ViewProps {
@@ -60,6 +68,16 @@ export interface SessionRailProps extends ViewProps {
   stripHeight?: number
   /** Rail width in px. Default 246. */
   width?: number
+  /**
+   * Index of the exercise to render EXPANDED in place — its set table opens
+   * inside the rail rather than in a separate pane. The row still draws the same
+   * `ExerciseCardHeading` (an `ExerciseCard` composes one), so an expanded row
+   * differs from a collapsed one only by the revealed body.
+   *
+   * Ignored when the named exercise has no `sets`. Omit for an all-collapsed
+   * rail, which is the prior behaviour.
+   */
+  expandedIndex?: number
   onExercisePress?: (exercise: SessionRailExercise, index: number) => void
   className?: string
 }
@@ -81,6 +99,7 @@ export function SessionRail({
   next,
   stripHeight = 8,
   width = DEFAULT_WIDTH,
+  expandedIndex,
   onExercisePress,
   className,
   style,
@@ -118,19 +137,37 @@ export function SessionRail({
               borderBottomColor: DIVIDER,
             }}
           >
-            <ExerciseCardHeading
-              name={ex.name}
-              sets={ex.summary.sets}
-              reps={ex.summary.reps}
-              load={ex.summary.weight}
-              unit={ex.summary.unit}
-              tempo={ex.tempo}
-              indicator={ex.indicator}
-              setStates={ex.setStates}
-              stripHeight={stripHeight}
-              dimmed={ex.upcoming}
-              onPress={() => onExercisePress?.(ex, i)}
-            />
+            {i === expandedIndex && ex.sets ? (
+              <ExerciseCard
+                name={ex.name}
+                expanded
+                summary={{
+                  sets: ex.summary.sets,
+                  reps: ex.summary.reps,
+                  // ExerciseCard's summary takes a numeric load; a string load is
+                  // an unset/discovery weight, which has no expanded form yet.
+                  weight: typeof ex.summary.weight === 'number' ? ex.summary.weight : 0,
+                  unit: ex.summary.unit,
+                }}
+                tempo={ex.tempo}
+                sets={ex.sets}
+                onExpandedChange={() => onExercisePress?.(ex, i)}
+              />
+            ) : (
+              <ExerciseCardHeading
+                name={ex.name}
+                sets={ex.summary.sets}
+                reps={ex.summary.reps}
+                load={ex.summary.weight}
+                unit={ex.summary.unit}
+                tempo={ex.tempo}
+                indicator={ex.indicator}
+                setStates={ex.setStates}
+                stripHeight={stripHeight}
+                dimmed={ex.upcoming}
+                onPress={() => onExercisePress?.(ex, i)}
+              />
+            )}
           </View>
         ))}
       </Surface>

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

@@ -55,9 +55,9 @@ describe('SetRow', () => {
       expect(screen.getByText('8')).toHaveStyle({ color: T_MUTED })
     })
 
-    it('renders a flat mini strip (done reps, no todo stubs)', () => {
+    it('renders the flat compact strip (done reps, no todo stubs)', () => {
       render(<SetRow {...doneRow} />)
-      expect(screen.getByTestId('velocity-strip-mini')).toBeInTheDocument()
+      expect(screen.getByTestId('velocity-strip-compact')).toBeInTheDocument()
       expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(3)
       expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
     })
@@ -76,9 +76,9 @@ describe('SetRow', () => {
       expect(screen.getByText('2')).toHaveStyle({ color: T_ACTIVE })
     })
 
-    it('renders the compact velocity-height spotlight strip', () => {
+    it('renders the velocity-height spotlight strip', () => {
       render(<SetRow {...liveRow} />)
-      expect(screen.getByTestId('velocity-strip-compact')).toBeInTheDocument()
+      expect(screen.getByTestId('velocity-strip-spotlight')).toBeInTheDocument()
       // 2 performed reps + grey stubs to the target (10).
       expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(2)
       expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(8)
@@ -93,10 +93,10 @@ describe('SetRow', () => {
       expect(screen.getByTestId('set-row-rpe')).toHaveTextContent('—')
     })
 
-    it('is muted and renders an all-grey mini stub strip', () => {
+    it('is muted and renders an all-grey compact stub strip', () => {
       render(<SetRow {...todoRow} />)
       expect(screen.getByText('3')).toHaveStyle({ color: T_MUTED })
-      expect(screen.getByTestId('velocity-strip-mini')).toBeInTheDocument()
+      expect(screen.getByTestId('velocity-strip-compact')).toBeInTheDocument()
       expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(10)
       expect(screen.queryByTestId(/^velocity-bar-\d+$/)).not.toBeInTheDocument()
     })

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

@@ -120,7 +120,7 @@ function Cell({
   )
 }
 
-/** The per-row velocity strip: compact spotlight for the live set, flat mini otherwise. */
+/** The per-row velocity strip: the velocity-height `expanded` spotlight for the live set, the flat `compact` strip otherwise. */
 function RowStrip({ set }: { set: SetRowProps }) {
   const zones = set.velocityZones
   if (set.state === 'live') {
@@ -133,15 +133,22 @@ function RowStrip({ set }: { set: SetRowProps }) {
         showInfo={false}
         height={24}
         scale="fixed"
+        // Grow the newest rep from the baseline as it lands (the live-set spotlight).
+        liveRepIndex={set.velocities.length - 1}
         set={{ type: 'straight', velocities: set.velocities, planned: set.target.reps }}
         zones={zones}
       />
     )
   }
   const velocities = set.state === 'done' ? set.velocities : []
+  // Resting (done / todo) → the flat `compact` strip at the 8px SegmentedBar flat-bar language (the
+  // static compact bar fills its plot), so the resting per-rep strip matches the set-level segmented
+  // bars used elsewhere; the live spotlight above stays taller (24px).
   return (
     <VelocityStrip
-      variant="mini"
+      variant="compact"
+      height={8}
+      hideBaseline
       set={{ type: 'straight', velocities, planned: plannedReps(set) }}
       zones={zones}
     />

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

@@ -2,6 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { SupersetWrapper } from './SupersetWrapper'
 import { ExerciseCard } from './ExerciseCard'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof SupersetWrapper> = {
   title: 'Workout/SupersetWrapper',
@@ -9,7 +12,7 @@ const meta: Meta<typeof SupersetWrapper> = {
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <View style={{ maxWidth: 400, padding: 16, backgroundColor: '#121212' }}>
+      <View style={{ maxWidth: 400, padding: 16, backgroundColor: t['background-base'] }}>
         <Story />
       </View>
     ),
@@ -26,24 +29,20 @@ export const Default: Story = {
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise A
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A</Text>
         </View>
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise B
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise B</Text>
         </View>
       </>
     ),
@@ -58,24 +57,20 @@ export const CustomLabel: Story = {
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise A1
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A1</Text>
         </View>
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise A2
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A2</Text>
         </View>
       </>
     ),
@@ -90,24 +85,20 @@ export const CustomColor: Story = {
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise A
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A</Text>
         </View>
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise B
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise B</Text>
         </View>
       </>
     ),