@titan-design/react-ui 0.13.0 → 0.14.0

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

@@ -1,77 +1,164 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { ReactNode } from 'react'
 import { View, Pressable } from 'react-native'
 import { Typography } from '../Typography'
+import { cn } from '../../../utils/cn'
 import { roundWeight } from '../../../utils/workout-format'
+import { useSurfaceMode } from '../../ui/surface/SurfaceContext'
 import { SetsRepsLoad } from './SetsRepsLoad'
 import { TempoDisplay } from './TempoDisplay'
 import { ExerciseIndicator, type ExerciseIndicatorKind } from './ExerciseIndicator'
+import { exerciseLiveColor } from './exerciseRowState'
 
-export interface ExerciseHeadingProps {
+/** Dim depth for a not-yet-reached exercise, when the block dims itself. */
+const DIMMED_OPACITY = 0.55
+
+/** `stacked` puts the prescription on its own line under the name; `inline` keeps one row. */
+export type ExerciseHeadingLayout = 'stacked' | 'inline'
+
+interface ExerciseHeadingBaseProps {
   name: string
-  /** Prescription line values (sets × reps @ load). */
-  sets: number
-  reps: number | string
-  /** Load value; a string (e.g. "—") passes through verbatim for an unset/discovery load. */
-  load: number | string
   unit?: 'lbs' | 'kg'
-  /** Tempo tuple [eccentric, pauseBottom, concentric, pauseTop]; hidden when absent. */
+  /** Tempo tuple [eccentric, pauseBottom, concentric, pauseTop]. `stacked` layout only. */
   tempo?: [number, number, number, number]
   /** Small PR / issue / info chip in the title row. */
   indicator?: ExerciseIndicatorKind
   /** Dim the block as a not-yet-reached exercise (standalone use). */
   dimmed?: boolean
+  /** Row shape. Default `stacked`. */
+  layout?: ExerciseHeadingLayout
+  /**
+   * Render the structured `sets × reps @ load` prescription in one dimmer, regular
+   * tone instead of the rail's bright/bold value cells. `stacked` (rail) never sets
+   * this; `inline` (compact, upcoming) always does.
+   */
+  mutedPrescription?: boolean
+  /** Trailing right-edge caption (a previous best). `inline` layout only. */
+  previousBest?: string
+  /** This exercise is being performed right now — the name takes the live tone, never animated. */
+  isLive?: boolean
+  /**
+   * Who owns the press. `self` (default) makes the name row the button. `ancestor`
+   * renders it as a plain row, for a wrapper that presses as a whole — legal only in
+   * `inline` layout, since `stacked`'s TempoDisplay sibling is itself a Pressable.
+   */
+  pressTarget?: 'self' | 'ancestor'
   /** Press target for the name row (expand / select). */
   onPress?: () => void
-}
-
-function headingLabel(
-  name: string,
-  sets: number,
-  reps: number | string,
-  load: number | string,
-  unit: string
-) {
-  const loadLabel = typeof load === 'number' ? roundWeight(load) : load
-  return `${name}, ${sets}×${reps} @ ${loadLabel} ${unit}`
+  onPressIn?: () => void
+  onPressOut?: () => void
+  /** Web-only; on a touch surface these never fire and the row has no hover state. */
+  onHoverIn?: () => void
+  onHoverOut?: () => void
 }
 
 /**
- * The exercise-heading info block (no strip): the name + {@link ExerciseIndicator}
- * title row over a tight {@link SetsRepsLoad} prescription line beside the real
- * {@link TempoDisplay} (`showLabel={false}`). The name row is the sole press
- * target — TempoDisplay is a sibling, never a descendant, since it is itself a
- * Pressable (nesting would be an a11y nested-interactive violation).
+ * The prescription is EITHER the structured `sets × reps @ load` triple, OR a
+ * free-text line for an exercise whose numbers aren't loaded yet, OR absent.
+ * Mixing the two is a type error rather than a silently half-rendered line.
  */
-export function ExerciseHeading({
+type ExerciseHeadingPrescription =
+  | { sets: number; reps: number | string; load: number | string; prescription?: never }
+  | { prescription: string; sets?: never; reps?: never; load?: never }
+  | { sets?: never; reps?: never; load?: never; prescription?: never }
+
+export type ExerciseHeadingProps = ExerciseHeadingBaseProps & ExerciseHeadingPrescription
+
+function prescriptionText(p: ExerciseHeadingProps, unit: string): string | undefined {
+  if (p.prescription !== undefined) return p.prescription
+  if (p.sets === undefined) return undefined
+  const loadLabel = typeof p.load === 'number' ? roundWeight(p.load) : p.load
+  return `${p.sets}×${p.reps} @ ${loadLabel} ${unit}`
+}
+
+/** The row's accessible name. Exported so a wrapper that owns the press can reuse it. */
+export function exerciseHeadingLabel(p: ExerciseHeadingProps, unit: string = p.unit ?? 'lbs') {
+  const prescription = prescriptionText(p, unit)
+  return prescription ? `${p.name}, ${prescription}` : p.name
+}
+
+function pressProps(p: ExerciseHeadingProps, unit: string) {
+  return {
+    onPress: p.onPress,
+    onPressIn: p.onPressIn,
+    onPressOut: p.onPressOut,
+    onHoverIn: p.onHoverIn,
+    onHoverOut: p.onHoverOut,
+    accessibilityRole: 'button' as const,
+    accessibilityLabel: exerciseHeadingLabel(p, unit),
+  }
+}
+
+interface NameStyle {
+  color: string
+}
+
+function HeadingName({
   name,
-  sets,
-  reps,
-  load,
-  unit = 'lbs',
-  tempo,
-  indicator,
-  dimmed,
-  onPress,
-}: ExerciseHeadingProps) {
+  nameStyle,
+  className,
+}: {
+  name: string
+  nameStyle?: NameStyle
+  className?: string
+}) {
+  return (
+    // The row is a button label, not a heading, so `boldLabel` carries the weight and
+    // no header role has to be undone. Size and the Space Grotesk face are pinned.
+    <Typography
+      variant="boldLabel"
+      color={nameStyle ? 'inherit' : 'primary'}
+      style={nameStyle}
+      className={cn('font-heading text-sm leading-[normal]', className)}
+      testID="exercise-card-name"
+    >
+      {name}
+    </Typography>
+  )
+}
+
+function prescriptionNode(p: ExerciseHeadingProps, unit: string): ReactNode {
+  if (p.prescription !== undefined) {
+    return (
+      <Typography
+        variant="caption"
+        color="secondary"
+        maxLines={1}
+        className="font-sans shrink leading-[normal]"
+        testID="exercise-card-prescription"
+      >
+        {p.prescription}
+      </Typography>
+    )
+  }
+  if (p.sets === undefined) return null
+  return (
+    <SetsRepsLoad
+      sets={p.sets}
+      reps={p.reps}
+      load={p.load}
+      unit={unit}
+      muted={p.mutedPrescription}
+    />
+  )
+}
+
+interface LayoutProps {
+  heading: ExerciseHeadingProps
+  nameStyle?: NameStyle
+}
+
+function StackedHeading({ heading, nameStyle }: LayoutProps) {
+  const { unit = 'lbs', tempo, indicator } = heading
   return (
-    <View style={{ opacity: dimmed ? 0.55 : 1 }} testID="exercise-heading">
+    <>
       <Pressable
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={headingLabel(name, sets, reps, load, unit)}
+        {...pressProps(heading, unit)}
         className="flex-row items-center"
         style={{ gap: 8 }}
         testID="exercise-card-header"
       >
-        {/* The row is a button label, not a heading, so `boldLabel` carries the weight and
-            no header role has to be undone. Size and the Space Grotesk face are pinned. */}
-        <Typography
-          variant="boldLabel"
-          className="font-heading text-sm leading-[normal]"
-          testID="exercise-card-name"
-        >
-          {name}
-        </Typography>
+        <HeadingName name={heading.name} nameStyle={nameStyle} />
         <View className="flex-1" />
         {indicator && <ExerciseIndicator kind={indicator} />}
       </Pressable>
@@ -81,10 +168,68 @@ export function ExerciseHeading({
         style={{ gap: 8, marginTop: 1 }}
         testID="exercise-card-summary"
       >
-        <SetsRepsLoad sets={sets} reps={reps} load={load} unit={unit} />
+        {prescriptionNode(heading, unit)}
         <View className="flex-1" />
         {tempo && <TempoDisplay tempo={tempo} size="sm" showLabel={false} showInfo={false} />}
       </View>
+    </>
+  )
+}
+
+function InlineHeading({ heading, nameStyle }: LayoutProps) {
+  const { unit = 'lbs', indicator, previousBest } = heading
+  const Row = heading.pressTarget === 'ancestor' ? View : Pressable
+  return (
+    <Row
+      {...(heading.pressTarget === 'ancestor' ? {} : pressProps(heading, unit))}
+      className="flex-row items-center"
+      style={{ gap: 8 }}
+      testID="exercise-card-header"
+    >
+      {/* Name never truncates (no numberOfLines); prescription + previousBest ellipsize first. */}
+      <HeadingName name={heading.name} nameStyle={nameStyle} className="shrink-0" />
+      <View className="shrink flex-row items-center" testID="exercise-card-summary">
+        {prescriptionNode(heading, unit)}
+      </View>
+      <View className="flex-1" style={{ minWidth: 8 }} />
+      {indicator && <ExerciseIndicator kind={indicator} />}
+      {previousBest && (
+        <Typography
+          variant="caption"
+          color="tertiary"
+          maxLines={1}
+          className="font-sans shrink text-2xs leading-[normal]"
+          testID="exercise-card-previous-best"
+        >
+          {previousBest}
+        </Typography>
+      )}
+    </Row>
+  )
+}
+
+/**
+ * The exercise-heading info block (no strip): the name + {@link ExerciseIndicator}
+ * title row, its prescription line, and — `inline` only — a trailing previous-best
+ * caption. The name row is the sole press target: TempoDisplay and the previous-best
+ * caption are siblings of it, never descendants, since TempoDisplay is itself a
+ * Pressable (nesting would be an a11y nested-interactive violation).
+ *
+ * `layout` is the one axis that separates the session-rail row (`stacked`) from the
+ * collapsed and upcoming card rows (`inline`) — same parts, same vocabulary, one row
+ * instead of two. `inline` drops the tempo: it has no room for a second metric lockup.
+ */
+export function ExerciseHeading(props: ExerciseHeadingProps) {
+  const mode = useSurfaceMode()
+  const nameStyle = props.isLive ? { color: exerciseLiveColor(mode) } : undefined
+
+  return (
+    <View style={{ opacity: props.dimmed ? DIMMED_OPACITY : 1 }} testID="exercise-heading">
+      {props.layout === 'inline' ? (
+        <InlineHeading heading={props} nameStyle={nameStyle} />
+      ) : (
+        <StackedHeading heading={props} nameStyle={nameStyle} />
+      )}
     </View>
   )
 }

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

@@ -7,6 +7,7 @@ import {
   type ExerciseIndicatorKind,
 } from './ExerciseIndicator'
 import { Surface } from '../../ui/surface'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 /**
  * `ExerciseIndicator` — a small circular OUTLINED chip in an exercise heading's
@@ -70,9 +71,9 @@ export const AllKinds: Story = {
     <View style={{ gap: 12 }}>
       {INDICATOR_PRECEDENCE.map((kind, i) => (
         <View key={kind} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-          <Text style={{ color: '#8A8A8A', fontSize: 11, width: 14 }}>{i + 1}</Text>
+          <Text style={{ color: greyRamp[500], fontSize: 11, width: 14 }}>{i + 1}</Text>
           <ExerciseIndicator kind={kind} />
-          <Text style={{ color: '#CFCFCF', fontSize: 12 }}>{KIND_LABELS[kind]}</Text>
+          <Text style={{ color: greyRamp[200], fontSize: 12 }}>{KIND_LABELS[kind]}</Text>
         </View>
       ))}
     </View>
@@ -97,12 +98,12 @@ export const ResolvePrecedence: Story = {
           const winner = resolveIndicator(candidates)
           return (
             <View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-              <Text style={{ color: '#8A8A8A', fontSize: 12, width: 200 }}>
+              <Text style={{ color: greyRamp[500], fontSize: 12, width: 200 }}>
                 {candidates.join(', ')}
               </Text>
-              <Text style={{ color: '#8A8A8A', fontSize: 12 }}>→</Text>
+              <Text style={{ color: greyRamp[500], fontSize: 12 }}>→</Text>
               {winner ? <ExerciseIndicator kind={winner} /> : null}
-              <Text style={{ color: '#CFCFCF', fontSize: 12 }}>{winner}</Text>
+              <Text style={{ color: greyRamp[200], fontSize: 12 }}>{winner}</Text>
             </View>
           )
         })}

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

@@ -18,7 +18,9 @@ export interface InputBarProps {
   visible: boolean
 }
 
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+const t = getSemanticColors('dark')
+const BRAND_PRIMARY = t['brand-primary']
+const ON_BRAND_PRIMARY = t['on-brand-primary']
 const INPUT_CLASSNAME = 'bg-surface-raised border-hairline-strong text-text-primary'
 
 const inputStyle = {
@@ -151,7 +153,7 @@ export function InputBar({
             fontSize: 13,
             fontWeight: '700',
             fontFamily: 'Inter, sans-serif',
-            color: '#FFFFFF',
+            color: ON_BRAND_PRIMARY,
           }}
         >
           Record

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

@@ -11,6 +11,7 @@ import {
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { getGlowShadow } from '../../../theme/elevation'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
@@ -32,9 +33,11 @@ export interface IntensityBarProps extends ViewProps {
   className?: string
 }
 
+// VW-82: neither value is on a ramp (nearest surface-raised #31302F / greyRamp[600]
+// #72716F). Left raw pending the proposed roles — snapping them is a visual change.
 const TRACK_BG = '#333333'
 const LABEL_COLOR = '#6B7280'
-const TARGET_LINE_COLOR = 'rgba(33, 150, 243, 0.5)'
+const TARGET_LINE_COLOR = alpha(t['status-info'], 0.5)
 /** At-target is EMPHASIS, not depth: an info-toned glow through the shared builder. */
 const AT_TARGET_GLOW = getGlowShadow(t['status-info'], 'subtle')
 

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

@@ -10,6 +10,7 @@ import {
   MESO_ACCENT_GRADIENT_LIGHT,
 } from '../../../theme/extracted-colors-dataviz'
 import { getGlowShadow } from '../../../theme/elevation'
+import { alpha } from '../../../utils/colors'
 
 const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
 
@@ -61,7 +62,7 @@ export interface MesoCardProps extends ViewProps {
 function heatmapColor(percentage: number): string {
   const clamped = Math.max(0, Math.min(100, percentage))
   const opacity = 0.12 + (clamped / 100) * 0.78
-  return `rgba(255,121,0,${opacity.toFixed(3)})`
+  return alpha(BRAND_PRIMARY, opacity)
 }
 
 /**

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

@@ -5,11 +5,13 @@ import { Card } from '../../ui/card'
 import { StatusDot } from './StatusDot'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
 import {
   MESO_ACCENT_GRADIENT_DARK,
   MESO_ACCENT_GRADIENT_LIGHT,
 } from '../../../theme/extracted-colors-dataviz'
 import { liftStyle } from '../../../theme/lift'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
@@ -32,8 +34,7 @@ const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
 const CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor('surface-elevated')} 0%, ${resolveColor('surface-raised')} 100%)`
 
 /** Gauge track gradient (teal -> amber -> red) at 0.25 alpha. */
-const GAUGE_GRADIENT =
-  'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)'
+const GAUGE_GRADIENT = `linear-gradient(90deg, ${alpha(SUCCESS, 0.25)} 0%, ${alpha(WARNING, 0.25)} 50%, ${alpha(ERROR, 0.25)} 100%)`
 
 export type MesoStatusBadgeVariant = 'success' | 'warning' | 'error'
 
@@ -41,9 +42,9 @@ const STATUS_VARIANTS: Record<
   MesoStatusBadgeVariant,
   { bg: string; border: string; text: string }
 > = {
-  success: { bg: 'rgba(46,213,115,0.15)', border: 'rgba(46,213,115,0.3)', text: SUCCESS },
-  warning: { bg: 'rgba(249,180,21,0.15)', border: 'rgba(249,180,21,0.3)', text: WARNING },
-  error: { bg: 'rgba(209,67,67,0.15)', border: 'rgba(209,67,67,0.25)', text: ERROR },
+  success: { bg: alpha(SUCCESS, 0.15), border: alpha(SUCCESS, 0.3), text: SUCCESS },
+  warning: { bg: alpha(WARNING, 0.15), border: alpha(WARNING, 0.3), text: WARNING },
+  error: { bg: alpha(ERROR, 0.15), border: alpha(ERROR, 0.25), text: ERROR },
 }
 
 export interface MesoStatusBadge {
@@ -257,7 +258,7 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
             bottom: 0,
             width: 1,
             marginLeft: -0.5,
-            backgroundColor: 'rgba(255,255,255,0.3)',
+            backgroundColor: alpha(primitiveColors.white, 0.3),
           }}
           testID="meso-status-card-gauge-center"
         />
@@ -393,9 +394,9 @@ export function MesoStatusCard({
         {coaching != null && (
           <View
             style={{
-              backgroundColor: 'rgba(249,180,21,0.06)',
+              backgroundColor: alpha(WARNING, 0.06),
               borderWidth: 1,
-              borderColor: 'rgba(249,180,21,0.15)',
+              borderColor: alpha(WARNING, 0.15),
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 12,
@@ -420,9 +421,9 @@ export function MesoStatusCard({
             className="flex-row items-center"
             style={{
               gap: 8,
-              backgroundColor: 'rgba(46,213,115,0.06)',
+              backgroundColor: alpha(SUCCESS, 0.06),
               borderWidth: 1,
-              borderColor: 'rgba(46,213,115,0.2)',
+              borderColor: alpha(SUCCESS, 0.2),
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 12,

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

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { PlaceholderStrip } from './PlaceholderStrip'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof PlaceholderStrip> = {
   title: 'Custom/Workout/PlaceholderStrip',
@@ -74,9 +77,11 @@ export const SegmentedThree: Story = {
 export const MultipleStrips: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 4, width: 300 }}>
-      <View style={{ flex: 1, height: 3, backgroundColor: '#2ed573', borderRadius: 1 }} />
-      <View style={{ flex: 1, height: 3, backgroundColor: '#ffd43b', borderRadius: 1 }} />
-      <View style={{ flex: 1, height: 3, backgroundColor: '#ffa502', borderRadius: 1 }} />
+      <View style={{ flex: 1, height: 3, backgroundColor: t['status-success'], borderRadius: 1 }} />
+      <View
+        style={{ flex: 1, height: 3, backgroundColor: t['status-warning-light'], borderRadius: 1 }}
+      />
+      <View style={{ flex: 1, height: 3, backgroundColor: t['status-warning'], borderRadius: 1 }} />
       <PlaceholderStrip />
       <PlaceholderStrip />
     </View>

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

@@ -2,6 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import { View, Text, Pressable } from 'react-native'
 import { PrHistoryModal, type PrRecord } from './PrHistoryModal'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const records: PrRecord[] = [
   { type: 'e1rm', value: 245, unit: 'lbs', date: 'Mar 14', isRecent: true },
@@ -93,13 +97,19 @@ function InteractivePrHistoryModal() {
         accessibilityRole="button"
         style={{
           alignSelf: 'flex-start',
-          backgroundColor: '#FF7900',
+          backgroundColor: t['brand-primary'],
           paddingVertical: 10,
           paddingHorizontal: 20,
           borderRadius: 8,
         }}
       >
-        <Text style={{ color: '#FFFFFF', fontWeight: '700', fontFamily: 'Inter, sans-serif' }}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontWeight: '700',
+            fontFamily: 'Inter, sans-serif',
+          }}
+        >
           Open PR history
         </Text>
       </Pressable>

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

@@ -86,11 +86,50 @@ type props without pulling the dependency.
      └─ SetStrip
         └─ SetBar × N               (one set's per-rep colour bar)
 
-  ExerciseCard state="rail"  ──delegates to──▶  ExerciseCardHeading
+  ExerciseCard (all three representations)  ──delegates to──▶  ExerciseCardHeading
   ```
 
-  `ExerciseCard`'s `rail` state is now a thin adapter that delegates to
-  `ExerciseCardHeading` (so the heading is reusable without the card). `SetBar`
+  **TD-03.55 / TD-03.56 — one row, three densities, and interaction states.**
+  `ExerciseCardHeading` IS the exercise row. Its `density` prop carries the only
+  axis that ever separated the three call sites:
+
+  | `density`  | shape                                                   | was                          |
+  | ---------- | ------------------------------------------------------- | ---------------------------- |
+  | `rail`     | two lines: name, then prescription beside the tempo      | `ExerciseCardHeading`        |
+  | `compact`  | one line: name + prescription, strip below               | `ExerciseCard`'s CollapsedCard |
+  | `upcoming` | `compact`, dimmed, previous best pinned right            | `ExerciseCard`'s UpcomingCard  |
+
+  `CollapsedCard` and `UpcomingCard` are deleted; `ExerciseCard` maps its props onto
+  the row, so **its own prop shape is unchanged** and no consumer migrates. Three
+  things converged in the process, each a consistency gain rather than a new idea:
+  the collapsed row's freeform `3×6 @ 175 lbs` caption became the shared
+  `SetsRepsLoad` line; its hand-rolled `VelocityStrip` + `PlaceholderStrip` row
+  became one `SetStrip` (so `velocityZones` no longer tints the collapsed glance —
+  the expanded header already ignored it); and `isPR` surfaces through the
+  `ExerciseIndicator` chip, which is what the expanded header already did.
+
+  The prescription is a **discriminated union**: either the structured
+  `sets`/`reps`/`load` triple, or a free-text `prescription` string for an exercise
+  whose numbers aren't loaded, or neither. Mixing them is a type error rather than a
+  half-rendered line.
+
+  Interaction states are `interactive-*` token washes on the row —
+  **press > selection > hover** — plus an `isLive` name tone (`status-live`). Every
+  one is static: this row renders on the wall during a set, where titan's "the grain
+  never animates" rule applies. Hover is web-only; RN Pressable's `onHoverIn` never
+  fires on a touch surface, so a touch consumer simply gets no hover state and
+  `isSelected` carries the same "this one" meaning. Selection has **no ARIA**:
+  `aria-selected` is not allowed on `role="button"`, so the wash is the whole signal
+  and list semantics stay the rail's job.
+
+  Two follow-ups are deliberately NOT taken here. The dim depths still differ by
+  density (rail 0.55, card 0.60) because they came from two specimens and converging
+  them needs an **opacity token the set does not have** — a foundations decision.
+  And `exerciseRowState.ts` (the `interactive-*` → literal-hex map, written in the
+  shape of `onSurfaceColors`) should be **promoted into the surface module** the
+  moment a second family needs row washes.
+
+  `SetBar`
   owns the per-set colour/pulse logic; `SetStrip` lays several side by side.
   Beyond the flat `done`/`active`/`todo` sets, `SetStripSet` models set-type
   prescriptions: `range` (variable rep-range — range-max segments, committed-todo grey
@@ -130,7 +169,7 @@ type props without pulling the dependency.
   array (unchanged, still the source of truth for `SetRow` / `ExerciseCard`), the
   strip accepts an optional structured `VelocitySet` descriptor and renders the
   strength set-type vocabulary as a typed slot list. Slots are
-  `rep` (velocity-coloured) · `todo` (charcoal-300 grey) · `variable` /
+  `rep` (velocity-coloured) · `todo` (`border-prominent` grey) · `variable` /
   `continue` (`SET_STRIP_VARIABLE_COLOR` cyan-900; `continue` adds a cyan-800
   outline to read as "keep going"). Types: `straight` (done + grey todo to
   `planned`), `range` (committed grey + a cyan variable window `floor..max`),
@@ -182,14 +221,22 @@ Modalities`** (each card carries a `Collapse` accordion; promoted from the
   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).
+  `dual-expanded` (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 (`Custom/Workout/DataViz/DualVelocityStrip`).
+  `variant="hero"`. Documented by the `Playground` / `Hero*` / `DualExpanded` stories on the
+  wall background (`Custom/Workout/DataViz/DualVelocityStrip`).
+
+  **`variant="rail"` → `variant="dual-expanded"` (VW-97).** `rail` was a verified misnomer —
+  this variant is the value-height strip a session-rail row _expands into_, not the rail
+  itself (the rail stays 246px and never changes width; expansion lives in a separate detail
+  pane, per the VW-97 rail-width decision). `rail` is kept as a **deprecated alias** for one
+  release (same renderer, same output) so existing call sites keep working; migrate to
+  `dual-expanded` and expect `rail` to be removed in a future release.
 
   **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
@@ -303,8 +350,7 @@ responsive level views land (removal is out of scope for this scaffold ticket):
   (Workout Expansion), `S3SetTypes` (Set Types), `S3SessionPace` (Session Pace).
   Each is superseded by a real Shell/SessionRail component + its Storybook stories;
   `S3SessionPace` in particular is superseded by the `SessionHeader` pace glance.
-- **`ExerciseCard`'s `collapsed` / `upcoming` state representations** — the rail now
-  owns the live-list heading (`rail` state → `ExerciseCardHeading`) and the expanded
-  view is moving to `ExpandedDrawer`. Once the responsive unification (TD-03.56)
-  lands a single responsive card, the `collapsed`/`upcoming` branches of
-  `ExerciseCard` are the superseded representations to retire.
+- **`ExerciseCard`'s `collapsed` / `upcoming` state representations** — DONE
+  (TD-03.56). Both hand-rolled sub-cards are deleted; `ExerciseCard` now delegates
+  all three representations to `ExerciseCardHeading` and its `density` prop. What
+  remains to retire is the expanded view, which is moving to `ExpandedDrawer`.

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

@@ -3,11 +3,13 @@ import { View, Text, Pressable } from 'react-native'
 import { Card } from '../../ui/card'
 import { Badge, type BadgeColor } from '../../ui/badge'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
 const BRAND_PRIMARY = t['brand-primary']
-const BRAND_PRIMARY_SUBTLE = 'rgba(255,121,0,0.12)'
+const ON_BRAND_PRIMARY = t['on-brand-primary']
+const BRAND_PRIMARY_SUBTLE = alpha(BRAND_PRIMARY, 0.12)
 const STATUS_SUCCESS = t['status-success']
 const STATUS_WARNING = t['status-warning']
 const STATUS_ERROR = t['status-error']
@@ -274,7 +276,7 @@ export function ReadinessCheck({
               fontSize: 13,
               fontWeight: '700',
               fontFamily: 'Inter, sans-serif',
-              color: '#FFFFFF',
+              color: ON_BRAND_PRIMARY,
             }}
           >
             Start Workout