@titan-design/react-ui 0.10.0 → 0.12.0

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

@@ -3,6 +3,7 @@ import { render, screen, fireEvent, within } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { ExerciseCard } from './ExerciseCard'
 import type { SetRowProps } from './SetRow'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 const baseCollapsedProps = {
   name: 'Bench Press',
@@ -49,7 +50,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}
@@ -86,9 +87,8 @@ describe('ExerciseCard', () => {
       sets: unifiedSets,
     }
 
-    // Literal-hex text treatments (dark theme neutral 100 / 400).
-    const T_ACTIVE = '#F3F4F6'
-    const T_MUTED = '#9CA3AF'
+    // Read from the tokens, not pinned (see SetRow.test.tsx).
+    const { 'text-primary': T_ACTIVE, 'text-secondary': T_MUTED } = getSemanticColors('dark')
 
     it('renders exercise name via the real ExerciseCardHeading header', () => {
       render(<ExerciseCard {...expandedProps} />)
@@ -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}`}
               />
             ))}
@@ -218,7 +220,7 @@ function CollapsedCard({
 
 const DARK = getSemanticColors('dark')
 /** The header↔body seam. */
-const BODY_DIVIDER = DARK['border-subtle']
+const BODY_DIVIDER = DARK['hairline-subtle']
 
 /** Project the set rows onto the heading strip's per-set state (done / active / todo). */
 function deriveHeaderSetStates(sets: SetRowProps[]): SetStripSet[] {
@@ -260,7 +262,7 @@ function ExpandedCard({
 
   return (
     <View
-      className="bg-surface-elevated border-border"
+      className="bg-surface-elevated border-hairline"
       style={{
         borderWidth: 1,
         ...borderRadius,

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

@@ -193,7 +193,7 @@ function TabBar({ active, onSelect }: TabBarProps) {
       className="flex-row"
       style={{
         borderBottomWidth: 1,
-        borderBottomColor: resolveColor('border-default'),
+        borderBottomColor: resolveColor('hairline-default'),
       }}
       accessibilityRole={'tablist' as ViewProps['accessibilityRole']}
       testID="exercise-detail-page-tabs"
@@ -247,7 +247,7 @@ function StatStrip({ stats, unit }: { stats: ExerciseDetailStats; unit: 'lbs' |
         return (
           <View
             key={key}
-            className="bg-surface-elevated border-border"
+            className="bg-surface-elevated border-hairline"
             style={{
               flex: 1,
               padding: 12,
@@ -297,7 +297,7 @@ function SectionCard({
 }) {
   return (
     <View
-      className="bg-surface-elevated border-border"
+      className="bg-surface-elevated border-hairline"
       style={{
         borderWidth: 1,
         borderRadius: 12,
@@ -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"
@@ -415,7 +421,7 @@ function VbtSummaryRow({ summary }: { summary: VbtSummary }) {
       {cells.map((cell) => (
         <View
           key={cell.label}
-          className="bg-surface-elevated border-border"
+          className="bg-surface-elevated border-hairline"
           style={{
             flex: 1,
             padding: 12,

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

@@ -19,7 +19,7 @@ export interface InputBarProps {
 }
 
 const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
-const INPUT_CLASSNAME = 'bg-surface-raised border-border-strong text-text-primary'
+const INPUT_CLASSNAME = 'bg-surface-raised border-hairline-strong text-text-primary'
 
 const inputStyle = {
   fontSize: 14,
@@ -55,7 +55,7 @@ export function InputBar({
       style={{
         width: '100%',
         borderTopWidth: 1,
-        borderTopColor: resolveColor('border-default'),
+        borderTopColor: resolveColor('hairline-default'),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,

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

@@ -82,7 +82,7 @@ const meta: Meta<typeof LiveAuraFrame> = {
     docs: {
       description: {
         component:
-          'Full-surface color-flood frame tied to a coaching category. Wraps content on a charcoal ' +
+          'Full-surface color-flood frame tied to a coaching category. Wraps content on a grey ' +
           'base and layers a radial wash — amber at threshold (VL20), red at stop (VL28+, pulsing) — ' +
           'derived from the semantic warning / error tokens via `alpha()`. Children pass through. ' +
           'Rendered here at live-screen size so the flood reads (it is meant to tint a whole panel, ' +

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

@@ -19,7 +19,7 @@ describe('LiveAuraFrame', () => {
     expect(screen.getByText('Cable Row')).toBeInTheDocument()
   })
 
-  it('sits on the charcoal base surface', () => {
+  it('sits on the grey base surface', () => {
     render(<LiveAuraFrame category="productive" />)
     expect(screen.getByTestId('live-aura-frame')).toHaveStyle({
       backgroundColor: t['background-base'],

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

@@ -45,7 +45,7 @@ export function liveAuraColor(category: LiveAuraCategory): string | null {
 
 /**
  * Full-surface color-flood frame tied to a coaching category. Wraps `children`
- * on a charcoal base and layers a radial wash (amber at threshold, red at stop)
+ * on a grey base and layers a radial wash (amber at threshold, red at stop)
  * as a decorative, pointer-transparent overlay. The wash uses a solid
  * `backgroundColor` fallback (native) plus a web-only `backgroundImage` radial
  * gradient; both derive from the same semantic token via `alpha()`.
@@ -62,7 +62,7 @@ export function LiveAuraFrame({
   const tint = color ? alpha(color, floodOpacity[category]) : 'transparent'
 
   // Match R2's canonical aura: a top-down radial wash that FADES TO TRANSPARENT
-  // by ~62%, so the charcoal base shows through the lower panel — NOT a flat
+  // by ~62%, so the grey base shows through the lower panel — NOT a flat
   // full-surface tint. On web (the target: MCP dashboard + Storybook) render the
   // gradient only; native has no gradient support, so fall back to a solid tint.
   const floodStyle = {
@@ -84,7 +84,7 @@ export function LiveAuraFrame({
           borderRadius: 10,
           backgroundColor: t['background-base'],
           borderWidth: 1,
-          borderColor: t['border-default'],
+          borderColor: t['hairline-default'],
         },
         style,
       ]}

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

@@ -10,10 +10,12 @@ import {
   MESO_ACCENT_GRADIENT_LIGHT,
 } from '../../../theme/extracted-colors-dataviz'
 
+const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
+
 const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 const BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK
 const BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT
-const BORDER_DEFAULT = '#1F1F1F'
+const BORDER_DEFAULT = HAIRLINE_DEFAULT
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light. */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const t = getSemanticColors('dark')
 
@@ -15,7 +16,7 @@ export interface MuscleGroupChipProps extends ViewProps {
 }
 
 const dotColorMap: Record<VolumeStatus, string> = {
-  untrained: '#2C2C2C',
+  untrained: greyRamp[900],
   behind: t['brand-secondary'],
   ontrack: t['status-success'],
   target: t['brand-primary'],
@@ -31,13 +32,13 @@ export function MuscleGroupChip({
 }: MuscleGroupChipProps) {
   const dotColor = volumeStatus
     ? dotColorMap[volumeStatus]
-    : '#2C2C2C'
+    : greyRamp[900]
 
   const statusLabel = volumeStatus ?? 'no status'
 
   const content = (
     <View
-      className={['bg-surface-raised border-border', className].filter(Boolean).join(' ')}
+      className={['bg-surface-raised border-hairline', className].filter(Boolean).join(' ')}
       style={{
         flexDirection: 'row',
         alignItems: 'center',

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

@@ -10,7 +10,7 @@ const RECENT_BORDER = 'rgba(249,180,21,0.3)'
 const RECENT_GLOW = '0 0 12px rgba(249,180,21,0.06)'
 // Native-safe fallback for the conditional row border (recent uses a computed
 // rgba, so className can't express both branches).
-const BORDER_DEFAULT = resolveColor('border-default')
+const BORDER_DEFAULT = resolveColor('hairline-default')
 
 export type PrRecordType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
 
@@ -172,7 +172,7 @@ export function PrHistoryModal({
     >
       <View
         accessibilityElementsHidden
-        className="bg-border"
+        className="bg-hairline"
         style={{
           alignSelf: 'center',
           width: 40,

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

@@ -388,7 +388,7 @@ export function ProgramPlanningPage({
         )}
 
         <View
-          className="bg-surface-elevated border-border"
+          className="bg-surface-elevated border-hairline"
           style={{
             borderWidth: 1,
             borderRadius: 12,

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/ReadinessCheck.tsx

@@ -116,7 +116,7 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
               accessibilityLabel={`${factor.label} level ${level} of 5`}
               aria-checked={selected}
               testID="readiness-check-emoji"
-              className={selected ? undefined : 'border-border bg-surface-raised'}
+              className={selected ? undefined : 'border-hairline bg-surface-raised'}
               style={({ pressed }) => ({
                 flex: 1,
                 alignItems: 'center',
@@ -172,7 +172,7 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
   const badge = WARMUP_BADGE[validation.status]
   return (
     <View
-      className="border-border bg-surface-raised"
+      className="border-hairline bg-surface-raised"
       style={{
         marginTop: 16,
         padding: 12,

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

@@ -188,7 +188,7 @@ export function RestTimer({
       style={{
         width: '100%',
         borderTopWidth: 1,
-        borderTopColor: resolveColor('border-default'),
+        borderTopColor: resolveColor('hairline-default'),
         paddingVertical: 12,
         paddingHorizontal: 16,
       }}
@@ -253,7 +253,7 @@ export function RestTimer({
 
       {/* Progress bar */}
       <View
-        className="bg-border"
+        className="bg-hairline"
         style={{
           height: 3,
           borderRadius: 2,

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

@@ -9,11 +9,11 @@
  */
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Fragment } from 'react'
-import { primitiveColors, primitiveRamps as ramp } from '../../../theme/tokens/primitives'
+import { primitiveRamps as ramp, greyRamp } from '../../../theme/tokens/primitives'
 import { GREY, RAIL_W, SET_GAP, T_PRIMARY, T_SECONDARY, T_TERTIARY, INSET, velColor, reps, Page, sectionTitle } from './setHeadingKit'
 
 // ---- variable-zone (floor→max) upcoming color — real ramp candidates (no invented hex)
-const VAR_GREY = primitiveColors.charcoal[200] // #3C3C3C — lighter charcoal (the paler-grey reference)
+const VAR_GREY = greyRamp[800] // #3C3C3C — lighter grey (the paler-grey reference)
 const VAR_BLUE_800 = ramp.blue[800] // #14407E — clearly blue, a touch brighter
 const VAR_BLUE_900 = ramp.blue[900] // #112C5A — dark muted navy, recessive
 const VAR_CYAN_900 = ramp.cyan[900] // #0B3149 — teal alt, sidesteps info-blue adjacency
@@ -115,7 +115,7 @@ function Sheet() {
         {/* 1. variable rep-range — real ramp candidates for the variable zone */}
         <Col label="1 · variable rep-range — LOCKED: cyan 900">
           {([
-            ['grey · charcoal 200', VAR_GREY],
+            ['grey · grey 200', VAR_GREY],
             ['blue 800 · #14407E', VAR_BLUE_800],
             ['blue 900 · #112C5A', VAR_BLUE_900],
             ['cyan 900 · #0B3149', VAR_CYAN_900],

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.stories.tsx

@@ -9,7 +9,7 @@ import { SessionHeader, type SessionHeaderPlanEntry } from './SessionHeader'
  * bar (fill ∝ sets done, coloured against the elapsed-vs-budget pace with a live marker),
  * a mono `n/total sets` label and a ⏱ elapsed readout. Upcoming, the tiles become
  * Date/Time/Until, the bar is the empty plan shape, and the readout shows the planned
- * duration. Rendered on the raised charcoal plane.
+ * duration. Rendered on the raised grey plane.
  */
 const meta: Meta<typeof SessionHeader> = {
   title: 'Shell/SessionRail/SessionHeader',
@@ -20,7 +20,7 @@ const meta: Meta<typeof SessionHeader> = {
       description: {
         component:
           '**Molecule** (shell S3). The session-rail heading — title, stat tiles, chunked ' +
-          'pace bar, sets label + ⏱ readout, on the raised charcoal plane. Composes ' +
+          'pace bar, sets label + ⏱ readout, on the raised grey plane. Composes ' +
           '[MetricTiles](?path=/docs/workout-metrictiles--docs) / ' +
           '[ScheduleTiles](?path=/docs/workout-scheduletiles--docs) + ' +
           '[SegmentedProgressBar](?path=/docs/workout-segmentedprogressbar--docs) + ' +

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

@@ -51,7 +51,7 @@ export interface SessionHeaderProps extends ViewProps {
  * done, coloured green/amber against the elapsed-vs-budget pace, with a live marker),
  * a mono `n/total sets` label and a ⏱ elapsed readout. Upcoming (`next` set), the tiles
  * become Date/Time/Until, the bar is the empty plan shape, and the readout shows the
- * planned duration. Rendered on the raised charcoal plane; presentational. Composes
+ * planned duration. Rendered on the raised grey plane; presentational. Composes
  * {@link MetricTiles} / {@link ScheduleTiles} + {@link SegmentedProgressBar} +
  * {@link TimerReadout}.
  */

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

@@ -10,7 +10,7 @@ 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
  * of ExerciseCard rail headings. The header plan (chunk widths ∝ sets) is derived from
- * `exercises`. Surfaces bind to the charcoal ramp; the list depth is a subtle neumorphic
+ * `exercises`. Surfaces bind to the grey ramp; the list depth is a subtle neumorphic
  * inset. Driven entirely by props.
  */
 const meta: Meta<typeof SessionRail> = {
@@ -37,7 +37,7 @@ const meta: Meta<typeof SessionRail> = {
       description: {
         component:
           '**Organism** (shell S3). The live-workout exercise list: raised header glance over ' +
-          'a sunk inset list, subtle neumorphic depth (charcoal ramp + `neumorphicShadows`). ' +
+          'a sunk inset list, subtle neumorphic depth (grey ramp + `neumorphicShadows`). ' +
           'Composes ' +
           '[SessionHeader](?path=/docs/shell-sessionrail-sessionheader--docs) + ' +
           '[ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs) × N. ' +

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} />)