@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -17,8 +17,9 @@ const liveEntranceCalls = vi.hoisted(
 )
 
 vi.mock('../charts/live-rep-growth', async () => {
-  const actual =
-    await vi.importActual<typeof import('../charts/live-rep-growth')>('../charts/live-rep-growth')
+  const actual = await vi.importActual<typeof import('../charts/live-rep-growth')>(
+    '../charts/live-rep-growth'
+  )
   return {
     ...actual,
     useLiveRepGrowth: (
@@ -181,16 +182,16 @@ describe('DualVelocityStrip side labels', () => {
     expect(screen.queryByTestId('dual-velocity-side-label-L')).not.toBeInTheDocument()
   })
 
-  it('drops the gutter/slot labels AND the centre axis at rail scale (the lean dual-expanded)', () => {
+  it('drops the gutter/slot labels AND the centre axis at dual-expanded scale', () => {
     render(
       <DualVelocityStrip
         left={{ velocities: [0.9], label: 'Left Arm' }}
         right={{ velocities: [0.8], label: 'Right Arm' }}
-        variant="rail"
+        variant="dual-expanded"
       />
     )
-    // Rail = the lean dual-expanded: no gutter/vertical-axis + no slot labels (the two wings read as
-    // separate rows via the vertical gap), and no centre axis — only the bolder hero keeps those.
+    // dual-expanded = the lean renderer: no gutter/vertical-axis + no slot labels (the two wings
+    // read as separate rows via the vertical gap), and no centre axis — only the bolder hero keeps those.
     expect(screen.queryByTestId('dual-velocity-side-label-L')).not.toBeInTheDocument()
     expect(screen.queryByTestId('dual-velocity-side-label-R')).not.toBeInTheDocument()
     expect(screen.queryByTestId('dual-velocity-axis')).not.toBeInTheDocument()
@@ -224,12 +225,12 @@ describe('DualVelocityStrip reference lines', () => {
     expect(wingDown().getByTestId('velocity-hero-reference')).toBeInTheDocument()
   })
 
-  it('omits reference lines at rail scale', () => {
+  it('omits reference lines at dual-expanded scale', () => {
     render(
       <DualVelocityStrip
         left={{ velocities: [0.9, 0.85] }}
         right={{ velocities: [0.82, 0.74] }}
-        variant="rail"
+        variant="dual-expanded"
       />
     )
     expect(screen.queryByTestId('velocity-hero-reference')).not.toBeInTheDocument()
@@ -477,12 +478,12 @@ describe('DualVelocityStrip live mode', () => {
     ])
   })
 
-  it('arms both wings at rail scale too — its wings are composed strips as well', () => {
+  it('arms both wings at dual-expanded scale too — its wings are composed strips as well', () => {
     render(
       <DualVelocityStrip
         left={{ velocities: [0.9, 0.85, 0.8] }}
         right={{ velocities: [0.82, 0.78, 0.7] }}
-        variant="rail"
+        variant="dual-expanded"
         liveRepIndex={2}
       />
     )
@@ -590,16 +591,16 @@ describe('DualVelocityStrip compact variant (folded)', () => {
   })
 })
 
-describe('DualVelocityStrip rail variant', () => {
+describe('DualVelocityStrip dual-expanded variant', () => {
   it('renders compact bars but no value labels or reference lines', () => {
     render(
       <DualVelocityStrip
         left={{ velocities: [0.9, 0.85] }}
         right={{ velocities: [0.82, 0.74] }}
-        variant="rail"
+        variant="dual-expanded"
       />
     )
-    // The rail is now COMPOSED from two bare `expanded` strips, so each wing emits the shared
+    // dual-expanded is COMPOSED from two bare `expanded` strips, so each wing emits the shared
     // SetBarChart testIDs rather than the old bespoke `dual-velocity-bar-*` ones. Query per wing.
     const up = within(screen.getByTestId('dual-velocity-wing-up'))
     const down = within(screen.getByTestId('dual-velocity-wing-down'))
@@ -615,7 +616,7 @@ describe('DualVelocityStrip rail variant', () => {
       <DualVelocityStrip
         left={{ velocities: [0.9] }}
         right={{ velocities: [0.8] }}
-        variant="rail"
+        variant="dual-expanded"
         targetReps={2}
       />
     )
@@ -632,7 +633,7 @@ describe('DualVelocityStrip rail variant', () => {
       <DualVelocityStrip
         left={{ velocities: [0.9, 0.86, 0.82] }}
         right={{ velocities: [0.85, 0.8] }}
-        variant="rail"
+        variant="dual-expanded"
       />
     )
     const up = within(screen.getByTestId('dual-velocity-wing-up'))
@@ -649,7 +650,7 @@ describe('DualVelocityStrip rail variant', () => {
       <DualVelocityStrip
         left={{ set: { type: 'range', velocities: [0.9, 0.86], floor: 3, max: 4 } }}
         right={{ set: { type: 'range', velocities: [0.85, 0.8], floor: 3, max: 4 } }}
-        variant="rail"
+        variant="dual-expanded"
       />
     )
     const up = within(screen.getByTestId('dual-velocity-wing-up'))
@@ -657,6 +658,19 @@ describe('DualVelocityStrip rail variant', () => {
     expect(up.queryAllByTestId('velocity-slot-variable').length).toBeGreaterThan(0)
     expect(down.queryAllByTestId('velocity-slot-variable').length).toBeGreaterThan(0)
   })
+
+  it('accepts the deprecated `rail` alias, rendering identically to `dual-expanded`', () => {
+    const props = {
+      left: { velocities: [0.9, 0.86, 0.82] },
+      right: { velocities: [0.85, 0.8] },
+      targetReps: 4,
+    }
+    const viaAlias = render(<DualVelocityStrip {...props} variant="rail" />)
+    const aliasHtml = viaAlias.container.innerHTML
+    viaAlias.unmount()
+    const viaCanonical = render(<DualVelocityStrip {...props} variant="dual-expanded" />)
+    expect(viaCanonical.container.innerHTML).toBe(aliasHtml)
+  })
 })
 
 describe('DualVelocityStrip accessibility', () => {
@@ -672,12 +686,12 @@ describe('DualVelocityStrip accessibility', () => {
     expect(await axe(container)).toHaveNoViolations()
   })
 
-  it('has no violations at rail scale', async () => {
+  it('has no violations at dual-expanded scale', async () => {
     const { container } = render(
       <DualVelocityStrip
         left={{ velocities: [0.9] }}
         right={{ velocities: [0.8] }}
-        variant="rail"
+        variant="dual-expanded"
       />
     )
     expect(await axe(container)).toHaveNoViolations()

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

@@ -1,23 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { ExerciseCard } from './ExerciseCard'
 import type { SetRowProps } from './SetRow'
+import { Surface } from '../../ui/surface'
 
 const meta: Meta<typeof ExerciseCard> = {
-  title: 'Workout/ExerciseCard',
+  title: 'Custom/Workout/ExerciseCard',
   component: ExerciseCard,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '**Organism** (data-contract card). Three representations: `upcoming` (a dimmed, ' +
-          'not-yet-reached row), collapsed (name + summary + per-set velocity strips), and expanded ' +
-          '— the unified card whose persistent header is the real ' +
-          '[ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs) over a SET · REPS · ' +
-          'LBS · RPE body of [SetRow](?path=/docs/workout-setrow--docs)s (compact spotlight on the ' +
-          'live set). Expand is controlled (`expanded` + `onExpandedChange`) or uncontrolled ' +
-          '(`defaultExpanded`); `upcoming` overrides expand.',
+          '**Organism** (data-contract card). Three representations, all ONE ' +
+          '[ExerciseCardHeading](?path=/docs/custom-workout-exercisecardheading--docs) selected by its ' +
+          '`density`: `upcoming` (a dimmed, not-yet-reached row), collapsed (name + prescription + the ' +
+          'per-set strip) and expanded — the `rail` heading over a SET · REPS · LBS · RPE body of ' +
+          '[SetRow](?path=/docs/custom-workout-setrow--docs)s (compact spotlight on the live set). ' +
+          'Expand is controlled (`expanded` + `onExpandedChange`) or uncontrolled (`defaultExpanded`); ' +
+          '`upcoming` overrides expand.' +
+          ' Composes **ExerciseCardHeading** · **SetRow** · **SetTableHeader**.',
       },
     },
   },
@@ -33,9 +34,9 @@ const meta: Meta<typeof ExerciseCard> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ maxWidth: 400, padding: 16, backgroundColor: '#121212' }}>
+      <Surface level="base" style={{ maxWidth: 400, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -3,7 +3,8 @@ 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'
+import { exerciseRowStateColor } from './exerciseRowState'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const baseCollapsedProps = {
   name: 'Bench Press',
@@ -40,17 +41,21 @@ describe('ExerciseCard', () => {
       expect(screen.getByTestId('exercise-card-name')).toHaveTextContent('Bench Press')
     })
 
-    it('renders summary text', () => {
+    it('renders the prescription through the shared SetsRepsLoad line', () => {
       render(<ExerciseCard {...baseCollapsedProps} />)
-      expect(screen.getByTestId('exercise-card-summary')).toHaveTextContent('3×6 @ 175 lbs')
+      const summary = screen.getByTestId('exercise-card-summary')
+      expect(summary).toHaveTextContent('3')
+      expect(summary).toHaveTextContent('6')
+      expect(summary).toHaveTextContent('175')
+      expect(summary).toHaveTextContent('lbs')
     })
 
-    it('renders PrBadge when isPR is true', () => {
+    it('surfaces a PR through the indicator chip, as the expanded card already did', () => {
       render(<ExerciseCard {...baseCollapsedProps} isPR />)
-      expect(screen.getByTestId('pr-badge-star')).toBeInTheDocument()
+      expect(screen.getByLabelText('Personal record')).toBeInTheDocument()
     })
 
-    it('renders compact velocity strips for logged sets', () => {
+    it('renders logged and remaining sets as one SetStrip', () => {
       render(
         <ExerciseCard
           {...baseCollapsedProps}
@@ -61,21 +66,22 @@ describe('ExerciseCard', () => {
           totalPlannedSets={4}
         />
       )
-      expect(screen.getByTestId('exercise-card-velocity-strip-0')).toBeInTheDocument()
-      expect(screen.getByTestId('exercise-card-velocity-strip-1')).toBeInTheDocument()
-    })
-
-    it('renders placeholder strips for remaining planned sets', () => {
-      render(
-        <ExerciseCard {...baseCollapsedProps} setVelocities={[[1.1, 0.95]]} totalPlannedSets={3} />
+      expect(screen.getByTestId('exercise-card-strip')).toBeInTheDocument()
+      expect(screen.getByTestId('set-strip')).toHaveAccessibleName(
+        'Set progress: 2 done, 0 in progress, 2 upcoming'
       )
-      expect(screen.getByTestId('exercise-card-placeholder-0')).toBeInTheDocument()
-      expect(screen.getByTestId('exercise-card-placeholder-1')).toBeInTheDocument()
     })
 
-    it('does not render strips container when no velocities and no planned sets', () => {
+    it('does not render the strip when there are no velocities and no planned sets', () => {
       render(<ExerciseCard {...baseCollapsedProps} />)
-      expect(screen.queryByTestId('exercise-card-strips')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('exercise-card-strip')).not.toBeInTheDocument()
+    })
+
+    it('washes the row when selected', () => {
+      render(<ExerciseCard {...baseCollapsedProps} isSelected />)
+      expect(screen.getByTestId('exercise-card')).toHaveStyle({
+        backgroundColor: exerciseRowStateColor('selected'),
+      })
     })
   })
 
@@ -87,8 +93,10 @@ describe('ExerciseCard', () => {
       sets: unifiedSets,
     }
 
-    // Read from the tokens, not pinned (see SetRow.test.tsx).
-    const { 'text-primary': T_ACTIVE, 'text-secondary': T_MUTED } = getSemanticColors('dark')
+    // Read from the tokens, not pinned, and through resolveColor as SetRow now
+    // renders them (see SetRow.test.tsx).
+    const T_ACTIVE = resolveColor('text-primary')
+    const T_MUTED = resolveColor('text-secondary')
 
     it('renders exercise name via the real ExerciseCardHeading header', () => {
       render(<ExerciseCard {...expandedProps} />)
@@ -102,6 +110,14 @@ describe('ExerciseCard', () => {
       expect(screen.getByTestId('exercise-card-body')).toBeInTheDocument()
     })
 
+    // No baseline covers the expanded card, so the seam's token is asserted here.
+    it('draws the header/body seam from the hairline-subtle token', () => {
+      render(<ExerciseCard {...expandedProps} />)
+      expect(screen.getByTestId('exercise-card-body')).toHaveStyle({
+        borderTopColor: resolveColor('hairline-subtle'),
+      })
+    })
+
     it('renders the header per-set strip derived from the set rows', () => {
       render(<ExerciseCard {...expandedProps} />)
       expect(screen.getByTestId('exercise-card-strip')).toBeInTheDocument()
@@ -173,6 +189,18 @@ describe('ExerciseCard', () => {
       render(<ExerciseCard {...expandedProps} />)
       expect(screen.queryByTestId('tempo-display')).not.toBeInTheDocument()
     })
+
+    // VW-97 item 3: ExerciseCardHeading takes `indicator`, but ExerciseCard didn't forward one —
+    // so the expanded rail row lost its indicator badge. Already fixed on main; this pins it.
+    it('forwards `indicator` to the header, so the expanded rail row keeps its badge', () => {
+      render(<ExerciseCard {...expandedProps} indicator="info" />)
+      expect(screen.getByTestId('exercise-indicator')).toBeInTheDocument()
+    })
+
+    it('falls back to the `pr` indicator from `isPR` when no explicit indicator is given', () => {
+      render(<ExerciseCard {...expandedProps} isPR />)
+      expect(screen.getByTestId('exercise-indicator')).toBeInTheDocument()
+    })
   })
 
   describe('upcoming', () => {
@@ -257,10 +285,12 @@ describe('ExerciseCard', () => {
     })
   })
 
+  // The row IS the card now, so the superset chrome lands on the row root rather
+  // than on a Pressable's inner View.
   describe('superset position border radius', () => {
     it('applies first position border radius', () => {
       render(<ExerciseCard {...baseCollapsedProps} supersetPosition="first" />)
-      const container = screen.getByTestId('exercise-card').firstChild as HTMLElement
+      const container = screen.getByTestId('exercise-card')
       expect(container).toHaveStyle({
         borderTopLeftRadius: '12px',
         borderTopRightRadius: '12px',
@@ -271,7 +301,7 @@ describe('ExerciseCard', () => {
 
     it('applies last position border radius', () => {
       render(<ExerciseCard {...baseCollapsedProps} supersetPosition="last" />)
-      const container = screen.getByTestId('exercise-card').firstChild as HTMLElement
+      const container = screen.getByTestId('exercise-card')
       expect(container).toHaveStyle({
         borderTopLeftRadius: '8px',
         borderTopRightRadius: '8px',
@@ -282,7 +312,7 @@ describe('ExerciseCard', () => {
 
     it('applies middle position border radius', () => {
       render(<ExerciseCard {...baseCollapsedProps} supersetPosition="middle" />)
-      const container = screen.getByTestId('exercise-card').firstChild as HTMLElement
+      const container = screen.getByTestId('exercise-card')
       expect(container).toHaveStyle({
         borderTopLeftRadius: '8px',
         borderTopRightRadius: '8px',