@titan-design/react-ui 0.10.0 → 0.12.0

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

@@ -1,9 +1,12 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
-import { primitiveColors } from '../../../theme/tokens/primitives'
-import { neumorphicShadows } from '../../../theme/shadows'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { insetWell } from '../../../theme/materials'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 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'
@@ -15,7 +18,9 @@ import type { ExerciseIndicatorKind } from './ExerciseIndicator'
 // 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 surface-elevated #2A2827)
+const SEMANTIC = getSemanticColors('dark')
+/** Row divider — one step up from the well it sits in so the line reads. */
+const DIVIDER = greyRamp[875]
 
 const DEFAULT_WIDTH = 246
 
@@ -38,6 +43,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 +71,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 +102,7 @@ export function SessionRail({
   next,
   stripHeight = 8,
   width = DEFAULT_WIDTH,
+  expandedIndex,
   onExercisePress,
   className,
   style,
@@ -105,9 +127,14 @@ export function SessionRail({
         next={next}
       />
 
+      {/* The list is a WELL cut into the rail: one plane down from the rail's
+          `elevated`, recessed by the shared inset material rather than by a
+          neumorphic pressed shadow (which had no room to read at this
+          lightness). `level` follows the well's tone so on-surface text
+          resolves against what is actually painted. */}
       <Surface
-        level="elevated"
-        style={[{ flex: 1 }, neumorphicShadows.charcoal.pressed.subtle]}
+        level="base"
+        style={[{ flex: 1 }, insetWell(SEMANTIC['surface-base'])]}
         testID="session-rail-list"
       >
         {exercises.map((ex, i) => (
@@ -118,19 +145,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/SetBar.tsx

@@ -1,5 +1,5 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { primitiveColors, primitiveRamps } from '../../../theme/tokens/primitives'
+import { primitiveRamps, greyRamp } from '../../../theme/tokens/primitives'
 import { SegmentedBar, type SegmentedBarSegment } from './SegmentedBar'
 
 /**
@@ -13,8 +13,8 @@ export const SET_STRIP_ZONES = {
   fastest: primitiveRamps.green[300],
 } as const
 
-/** Grey fill for planned-but-unperformed reps / upcoming sets (charcoal placeholder). */
-const TODO_COLOR = primitiveColors.charcoal[300]
+/** Grey fill for planned-but-unperformed reps / upcoming sets (grey placeholder). */
+const TODO_COLOR = greyRamp[900]
 
 /**
  * The learned "variable / unknown / opportunity" semantic (cyan-900, a real ramp

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

@@ -3,10 +3,13 @@ import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { View } from 'react-native'
 import { SetRow, type SetRowProps } from './SetRow'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-// Literal-hex text treatments (dark theme neutral 100 / 400).
-const T_ACTIVE = '#F3F4F6'
-const T_MUTED = '#9CA3AF'
+// Text treatments, read from the tokens rather than pinned as hexes. These
+// used to be hand-copied literals and silently desynced when the greys moved
+// to the warm ramp (TD-07.14). The assertion still bites — it checks the
+// component reaches for the right ROLE — it just no longer restates the value.
+const { 'text-primary': T_ACTIVE, 'text-secondary': T_MUTED } = getSemanticColors('dark')
 
 const doneRow: SetRowProps = {
   state: 'done',
@@ -55,9 +58,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 +79,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 +96,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/StatusDot.tsx

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, type ViewProps } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const t = getSemanticColors('dark')
 
@@ -28,7 +29,7 @@ const solidVariantColors: Record<string, string> = {
   success: t['status-success'],
   warning: t['status-warning'],
   error: t['status-error'],
-  neutral: '#6B7280',
+  neutral: greyRamp[500],
 }
 
 const ringVariantStyles: Record<string, Record<string, unknown>> = {
@@ -71,10 +72,10 @@ const iconColors: Record<StatusDotVariant, string> = {
   success: '#0A5C52',
   warning: '#6B4000',
   error: '#5C1A1A',
-  neutral: '#D1D5DB',
+  neutral: greyRamp[200],
   'on-track': t['status-success'],
   deviation: t['status-warning'],
-  future: '#6B7280',
+  future: greyRamp[500],
 }
 
 const sizeDimensions = {
@@ -146,7 +147,7 @@ export function StatusDot({
       >
         <View accessibilityElementsHidden>{dot}</View>
         <Text
-          style={{ fontSize: 12, lineHeight: 16, color: '#9CA3AF' }}
+          style={{ fontSize: 12, lineHeight: 16, color: greyRamp[400] }}
           accessibilityElementsHidden
         >
           {label}

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

@@ -477,7 +477,7 @@ export function StrengthTrendChart({
           <View
             testID="strength-trend-chart-tooltip"
             accessibilityElementsHidden
-            className="bg-surface-elevated border-border-strong"
+            className="bg-surface-elevated border-hairline-strong"
             style={{
               position: 'absolute',
               left: Math.max(

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

@@ -114,7 +114,7 @@ function SummaryCards({ summary }: { summary: TrainingStatusSummary }) {
         return (
           <View
             key={key}
-            className="bg-surface-elevated border-border"
+            className="bg-surface-elevated border-hairline"
             style={{
               flexGrow: 1,
               flexBasis: '46%',
@@ -265,7 +265,7 @@ export function TrainingStatusPage({
         <SummaryCards summary={summary} />
 
         <View
-          className="bg-surface-elevated border-border"
+          className="bg-surface-elevated border-hairline"
           style={{
             borderWidth: 1,
             borderRadius: 12,

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

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { VelocityStrip } from './VelocityStrip'
+import {
+  Sheet,
+  Note,
+  ScenarioPair,
+  SetTypeBoard,
+  RepTypeBoard,
+  REP_SET,
+  REP_SET_LAGGING,
+  FATIGUE_SET,
+  FATIGUE_SET_LAGGING,
+} from './velocity-story-kit'
+
+/**
+ * `compact` — the flat resting strip. SetBarChart in flat mode: uniform short
+ * bars, no labels, no axis. The glance used in the SetRow table and on cards,
+ * where the bar is colour-encoded rather than height-encoded.
+ *
+ * The compact dual FOLDS into one footprint rather than stacking to 2x: each
+ * rep column splits at the centre into an L top pill and an R bottom pill.
+ * Because resting bars carry their meaning in colour, the pair costs the same
+ * vertical space as a single — 2x is only forced for the value-height expanded.
+ */
+const meta: Meta<typeof VelocityStrip> = {
+  title: 'Workout/DataViz/VelocityStrip/Compact',
+  component: VelocityStrip,
+  tags: ['autodocs'],
+}
+export default meta
+type Story = StoryObj<typeof VelocityStrip>
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => (
+    <Sheet>
+      <Note>
+        The representative set at rest. Single fills its plot; the dual folds the same reps into
+        rounded L/R pills sharing that footprint.
+      </Note>
+      <ScenarioPair
+        view="compact"
+        title="Default"
+        single={REP_SET}
+        left={REP_SET}
+        right={REP_SET_LAGGING}
+      />
+    </Sheet>
+  ),
+}
+
+export const SetTypes: Story = {
+  name: 'Set Types',
+  render: () => (
+    <Sheet>
+      <Note>
+        The full set-type vocabulary at resting scale. The chunk-notch still separates drop
+        sub-loads even when every bar is the same height.
+      </Note>
+      <SetTypeBoard view="compact" />
+    </Sheet>
+  ),
+}
+
+export const FatigueDecline: Story = {
+  name: 'Fatigue Decline',
+  render: () => (
+    <Sheet>
+      <Note>
+        Loss colouring is the default: each bar is coloured by its drop from the set&apos;s own
+        best, so a fatiguing set reads green-to-red regardless of absolute speed. At compact scale
+        this colour IS the signal — there is no height to read.
+      </Note>
+      <ScenarioPair
+        view="compact"
+        title="Fatigue decline"
+        single={FATIGUE_SET}
+        left={FATIGUE_SET}
+        right={FATIGUE_SET_LAGGING}
+        barColor="loss"
+      />
+    </Sheet>
+  ),
+}
+
+export const EmptyColdBoot: Story = {
+  name: 'Empty / Cold Boot',
+  render: () => (
+    <Sheet>
+      <Note>
+        Before the first rep lands. A planned set draws its upcoming reps, so the strip holds both
+        its footprint AND its column count — nothing reflows when rep one arrives.
+      </Note>
+      <ScenarioPair
+        view="compact"
+        title="Cold boot · 6 planned, none logged"
+        singleSet={{ type: 'straight', velocities: [], planned: 6 }}
+        leftSet={{ type: 'straight', velocities: [], planned: 6 }}
+        rightSet={{ type: 'straight', velocities: [], planned: 6 }}
+      />
+      <ScenarioPair
+        view="compact"
+        title="Truly empty · no plan to draw"
+        note="No planned count either — the only case where there is nothing to hold."
+        single={[]}
+        left={[]}
+        right={[]}
+      />
+    </Sheet>
+  ),
+}
+
+export const DualLaggingSide: Story = {
+  name: 'Dual · Lagging Side',
+  render: () => (
+    <Sheet>
+      <Note>
+        Index-locked: the right slot has logged fewer reps, so its trailing columns render as faint
+        empties directly under the left&apos;s. Columns never shift — the next rep a lagging side
+        performs lands in its own column.
+      </Note>
+      <ScenarioPair
+        view="compact"
+        title="Equal counts · the common case"
+        note="Both slots logged the same reps. This is what most of a session looks like."
+        single={REP_SET}
+        left={REP_SET}
+        right={[0.93, 0.88, 0.84, 0.78, 0.7]}
+      />
+      <ScenarioPair
+        view="compact"
+        title="Missed rep · lower slot"
+        note="Rep 3 missing from the LOWER slot — its column holds as a faint empty."
+        single={REP_SET}
+        left={REP_SET}
+        right={[0.93, 0.88, 0.78, 0.7]}
+      />
+      <ScenarioPair
+        view="compact"
+        title="Missed rep · upper slot"
+        note="The mirror: the UPPER slot is short a rep."
+        single={REP_SET}
+        left={[0.95, 0.9, 0.8, 0.72]}
+        right={[0.93, 0.88, 0.84, 0.78, 0.7]}
+      />
+      <ScenarioPair
+        view="compact"
+        title="One slot well behind"
+        single={REP_SET}
+        left={REP_SET}
+        right={REP_SET_LAGGING.slice(0, 2)}
+      />
+    </Sheet>
+  ),
+}
+
+export const Responsive: Story = {
+  name: 'Responsive',
+  render: () => (
+    <Sheet width={520}>
+      <Note>
+        Compact degrades by WIDTH, not height — the bar layout is shared geometry, so bars and gaps
+        scale together and the chunk-notch stays proportional.
+      </Note>
+      {[440, 300, 180, 110].map((w) => (
+        <ScenarioPair
+          key={w}
+          view="compact"
+          title={`${w}px`}
+          width={w}
+          single={REP_SET}
+          left={REP_SET}
+          right={REP_SET_LAGGING}
+        />
+      ))}
+    </Sheet>
+  ),
+}
+
+export const RepTypes: Story = {
+  name: 'Rep Types',
+  render: () => (
+    <Sheet>
+      <Note>
+        Every state a rep column can be in at resting scale. Colour is the only channel compact has,
+        so a state that needs height to read must find another way here.
+      </Note>
+      <RepTypeBoard view="compact" />
+    </Sheet>
+  ),
+}

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

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { DualVelocityStrip } from './VelocityStrip'
+import {
+  LEFT_SLOT,
+  RIGHT_SLOT,
+  REP_SET,
+  REP_SET_LAGGING,
+  IN_PROGRESS_SET,
+  IN_PROGRESS_LAGGING,
+  dualOf,
+  wallDecorator,
+} from './velocity-story-kit'
+
+/**
+ * `DualVelocityStrip` — the strip when the exercise used TWO Voltras.
+ *
+ * Dual is **not a fourth view**, so its scenario coverage lives in the
+ * per-view groups, where every scenario renders single ABOVE dual on one
+ * dataset:
+ * [Compact](?path=/docs/workout-dataviz-velocitystrip-compact--docs) ·
+ * [Expanded](?path=/docs/workout-dataviz-velocitystrip-expanded--docs) ·
+ * [Hero](?path=/docs/workout-dataviz-velocitystrip-hero--docs).
+ *
+ * This group exists for the two things a pairing cannot carry: the exported
+ * **API** (`DualVelocityStripProps`, in the args table below) and the layout
+ * **extremes** — heights at which the labels have to degrade, and mismatched
+ * rep counts that must stay index-locked.
+ *
+ * The `hero` variant is literally two composed `VelocityStrip` heroes — an
+ * `orientation="up"` hero over a mirrored `orientation="down"` one, sharing ONE
+ * height scale and meeting at one centre axis — so every hero improvement
+ * reaches the dual for free. The up wing grows UP and the down wing grows DOWN,
+ * so asymmetry reads pre-attentively as the silhouette: a stronger side reads
+ * TALLER, while each wing still colours by its OWN best. **Side is POSITION
+ * only, never hue.** Each side takes a `DualVelocityStream` (`velocities` OR a
+ * structured `set`, plus an optional `label`); the vertical edge label is DATA,
+ * not a hardcoded side. Single-slot sets keep using `VelocityStrip`.
+ */
+const meta: Meta<typeof DualVelocityStrip> = {
+  title: 'Workout/DataViz/VelocityStrip/Dual',
+  component: DualVelocityStrip,
+  tags: ['autodocs'],
+  decorators: [wallDecorator],
+  argTypes: {
+    left: {
+      control: 'object',
+      description:
+        'Up-wing stream — `{ velocities | set, label }`. Edit `label` here to change the slot name.',
+    },
+    right: {
+      control: 'object',
+      description:
+        'Down-wing stream — `{ velocities | set, label }`. Edit `label` here to change the slot name.',
+    },
+    variant: {
+      control: 'inline-radio',
+      options: ['hero', 'compact', 'rail'],
+      description:
+        'hero (wall: labels + reference lines), compact (flat resting fold), or rail (lean, neither)',
+    },
+    scale: {
+      control: 'inline-radio',
+      options: ['peak', 'fixed'],
+      description:
+        'bar scaling, shared across both wings: peak (pair max) or fixed (cross-set ceiling)',
+    },
+    barColor: {
+      control: 'inline-radio',
+      options: ['zone', 'loss'],
+      description: 'per-wing loss (default) or the shared absolute zone scale; never encodes side',
+    },
+    targetReps: {
+      control: 'number',
+      description:
+        'planned rep count — reps beyond a side’s done count draw as mirrored dashed stubs',
+    },
+    liveRepIndex: {
+      control: 'number',
+      description: 'index of the newest rep; that mirrored pair animates in (hero only)',
+    },
+    height: {
+      control: { type: 'number', min: 60, max: 260, step: 4 },
+      description: 'total plot height (px), split evenly into the up (L) and down (R) wings',
+    },
+    zones: { control: false, description: 'Velocity-zone bands (WA); default scale when absent' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof DualVelocityStrip>
+
+// ── The API surface ─────────────────────────────────────────────────────────
+
+/** Controls-driven: flip `variant` / `scale` / `barColor` / `targetReps` / `height`, edit each stream's `label` + data. */
+export const Playground: Story = {
+  args: {
+    left: dualOf(REP_SET, LEFT_SLOT),
+    right: dualOf(REP_SET_LAGGING, RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'peak',
+    height: 200,
+  },
+}
+
+// ── The two canonical states ────────────────────────────────────────────────
+// Deliberately minimal — the scenario pairs in the view groups carry breadth.
+
+/** Both sides done, the lagging side one rep short — the everyday finished dual set. */
+export const Default: Story = {
+  args: {
+    left: dualOf(REP_SET, LEFT_SLOT),
+    right: dualOf(REP_SET_LAGGING, RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+    height: 200,
+  },
+}
+
+/**
+ * Mid-set and live: 4 of 8 planned on the up wing, 3 on the down, newest rep
+ * animating in. The remainder draws as mirrored dashed stubs on both wings, so
+ * the columns are reserved and the set never reflows as reps land — which is
+ * also why a live dual should run `scale="fixed"`.
+ */
+export const InProgress: Story = {
+  args: {
+    left: dualOf(IN_PROGRESS_SET, LEFT_SLOT),
+    right: dualOf(IN_PROGRESS_LAGGING, RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+    targetReps: 8,
+    liveRepIndex: 3,
+    height: 200,
+  },
+}
+
+// ── Layout extremes ─────────────────────────────────────────────────────────
+// Recovered from the pre-reorg DualVelocityStrip stories. Unit tests cover the
+// behaviour; these cover the SURFACE — label placement and collision at full
+// width is a class of bug the tests have already missed once (TD-07.10).
+
+/**
+ * Symmetric index-lock — the up wing logs 5 reps, the down wing 3, same
+ * structure. The dual renders 5 aligned columns and the down side's reps 4–5
+ * render as EMPTY cells directly under the up side's (index-locked, never
+ * shifted). The next rep a lagging side performs lands at its own column.
+ */
+export const SymmetricEmpties: Story = {
+  args: {
+    left: dualOf([0.9, 0.88, 0.86, 0.84, 0.82], LEFT_SLOT),
+    right: dualOf([0.85, 0.8, 0.75], RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+  },
+}
+
+/**
+ * Small height (120px) — each wing gets ~59px rather than the full hero
+ * sentinel, and the responsive text DEGRADES: the per-side slot names collapse
+ * to initials ("Left"/"Right" → "L"/"R") and the VL20 / VL30 band labels drop
+ * entirely, while the dashed lines + washes stay.
+ */
+export const SmallHeightLabels: Story = {
+  args: {
+    left: dualOf([0.96, 0.9, 0.83, 0.72], LEFT_SLOT),
+    right: dualOf([0.9, 0.82, 0.71, 0.6], RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+    height: 120,
+  },
+}
+
+/**
+ * Very small height (72px) — the floor of graceful degradation. Below the
+ * thresholds the VL20 / VL30 labels are gone and the slot names are down to
+ * initials (a multi-word name would show its initials, e.g. "L A"). No
+ * shrinking into an illegible smear.
+ */
+export const TinyHeight: Story = {
+  args: {
+    left: dualOf([0.96, 0.9, 0.83, 0.72], LEFT_SLOT),
+    right: dualOf([0.9, 0.82, 0.71, 0.6], RIGHT_SLOT),
+    variant: 'hero',
+    scale: 'fixed',
+    height: 72,
+  },
+}