@titan-design/react-ui 0.10.0 → 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/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/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,6 +4,8 @@ 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'
@@ -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/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>
+  ),
+}