@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,7 +1,9 @@
 import { describe, it, expect, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { ExerciseCardHeading } from './ExerciseCardHeading'
+import { exerciseLiveColor, exerciseRowStateColor } from './exerciseRowState'
+import { onSurfaceColors } from '../../ui/surface/SurfaceContext'
 import type { SetStripSet } from './SetStrip'
 
 const setStates: SetStripSet[] = [
@@ -62,11 +64,197 @@ describe('ExerciseCardHeading', () => {
     expect(onPress).toHaveBeenCalledOnce()
   })
 
+  // The three former call sites, each proven to render from the one component.
+  describe('density', () => {
+    it('rail: the prescription sits on its own line beside the tempo', () => {
+      render(<ExerciseCardHeading {...baseProps} />)
+      const header = screen.getByTestId('exercise-card-header')
+      expect(header).not.toContainElement(screen.getByTestId('exercise-card-summary'))
+      expect(screen.getByTestId('tempo-display')).toBeInTheDocument()
+    })
+
+    it('compact: name and prescription share the header row, and the tempo is dropped', () => {
+      render(<ExerciseCardHeading {...baseProps} density="compact" />)
+      const header = screen.getByTestId('exercise-card-header')
+      expect(header).toContainElement(screen.getByTestId('exercise-card-name'))
+      expect(header).toContainElement(screen.getByTestId('exercise-card-summary'))
+      expect(screen.queryByTestId('tempo-display')).not.toBeInTheDocument()
+    })
+
+    it('compact: the prescription reads "3×6 @ 185 lbs" with no spaces around the ×', () => {
+      render(
+        <ExerciseCardHeading
+          name="Bench Press"
+          density="compact"
+          sets={3}
+          reps={6}
+          load={185}
+          unit="lbs"
+        />
+      )
+      expect(screen.getByTestId('sets-reps-load')).toHaveTextContent('3×6 @ 185 lbs')
+    })
+
+    it("compact: the prescription numbers carry the secondary tone and regular weight, not the rail's bright bold", () => {
+      render(
+        <ExerciseCardHeading
+          name="Bench Press"
+          density="compact"
+          sets={3}
+          reps={6}
+          load={185}
+          unit="lbs"
+        />
+      )
+      const secondary = onSurfaceColors('dark').secondary
+      for (const text of ['3', '6', '185']) {
+        const el = screen.getByText(text)
+        expect(el).toHaveStyle({ color: secondary })
+        // jsdom's getComputedStyle doesn't resolve numeric font-weight, so read the
+        // inline style directly rather than through toHaveStyle.
+        expect(el.style.fontWeight).toBe('400')
+      }
+    })
+
+    it('rail: the prescription numbers keep the bright bold rail treatment', () => {
+      render(<ExerciseCardHeading {...baseProps} />)
+      const primary = onSurfaceColors('dark').primary
+      const el = screen.getByText('3')
+      expect(el).toHaveStyle({ color: primary })
+      expect(el.style.fontWeight).toBe('600')
+    })
+
+    it('upcoming: dims itself and carries the free-text prescription + previous best', () => {
+      render(
+        <ExerciseCardHeading
+          name="Deadlift"
+          density="upcoming"
+          prescription="3×8-12 @ RPE 8"
+          previousBest="185 lbs × 10"
+        />
+      )
+      expect(screen.getByTestId('exercise-card')).toHaveStyle({ opacity: 0.6 })
+      expect(screen.getByTestId('exercise-card-prescription')).toHaveTextContent('3×8-12 @ RPE 8')
+      expect(screen.getByTestId('exercise-card-previous-best')).toHaveTextContent('185 lbs × 10')
+    })
+
+    it('upcoming: an explicit dimmed=false overrides the density default', () => {
+      render(<ExerciseCardHeading name="Deadlift" density="upcoming" dimmed={false} />)
+      expect(screen.getByTestId('exercise-card')).toHaveStyle({ opacity: 1 })
+    })
+
+    // The fourth call site: voltras-mcp's SPA recap card, which takes a STRING load for
+    // a weightless mode rather than fabricating a 0 (VMCP-03.05).
+    it('rail: a string load and a testID override still render standalone', () => {
+      render(
+        <ExerciseCardHeading
+          name="Cable Row"
+          sets={3}
+          reps={10}
+          load="—"
+          unit="lbs"
+          indicator="velocity-loss"
+          setStates={[{ status: 'done', velocities: [0.8, 0.7] }]}
+          testID="recap-card-heading"
+        />
+      )
+      expect(screen.getByTestId('recap-card-heading')).toBeInTheDocument()
+      expect(screen.getByTestId('exercise-card-summary')).toHaveTextContent('—')
+    })
+  })
+
+  describe('interaction states', () => {
+    it('has no wash at rest', () => {
+      render(<ExerciseCardHeading {...baseProps} />)
+      expect(screen.getByTestId('exercise-card')).not.toHaveStyle({
+        backgroundColor: exerciseRowStateColor('hovered'),
+      })
+    })
+
+    it('washes on hover of the heading row', () => {
+      render(<ExerciseCardHeading {...baseProps} />)
+      fireEvent.mouseEnter(screen.getByTestId('exercise-card-header'))
+      expect(screen.getByTestId('exercise-card')).toHaveStyle({
+        backgroundColor: exerciseRowStateColor('hovered'),
+      })
+    })
+
+    it('clears the hover wash when the pointer leaves', () => {
+      render(<ExerciseCardHeading {...baseProps} />)
+      const header = screen.getByTestId('exercise-card-header')
+      fireEvent.mouseEnter(header)
+      fireEvent.mouseLeave(header)
+      expect(screen.getByTestId('exercise-card')).not.toHaveStyle({
+        backgroundColor: exerciseRowStateColor('hovered'),
+      })
+    })
+
+    it('washes while selected, and the selection outranks a hover', () => {
+      render(<ExerciseCardHeading {...baseProps} isSelected />)
+      fireEvent.mouseEnter(screen.getByTestId('exercise-card-header'))
+      expect(screen.getByTestId('exercise-card')).toHaveStyle({
+        backgroundColor: exerciseRowStateColor('selected'),
+      })
+    })
+
+    // RNW's Pressability grants the responder before it schedules onPressIn, so the
+    // wash lands a tick after the mousedown.
+    it('a press outranks the selection wash', async () => {
+      render(<ExerciseCardHeading {...baseProps} isSelected onPress={vi.fn()} />)
+      fireEvent.mouseDown(screen.getByTestId('exercise-card-header'), { button: 0, detail: 1 })
+      await waitFor(() =>
+        expect(screen.getByTestId('exercise-card')).toHaveStyle({
+          backgroundColor: exerciseRowStateColor('pressed'),
+        })
+      )
+    })
+
+    it('tints the name with the live tone while the exercise is being performed', () => {
+      render(<ExerciseCardHeading {...baseProps} isLive />)
+      expect(screen.getByTestId('exercise-card-name')).toHaveStyle({
+        color: exerciseLiveColor(),
+      })
+    })
+
+    it('leaves the name on the primary tone when not live', () => {
+      render(<ExerciseCardHeading {...baseProps} />)
+      expect(screen.getByTestId('exercise-card-name')).not.toHaveStyle({
+        color: exerciseLiveColor(),
+      })
+    })
+
+    // The rail renders on the wall during a set; titan's "the grain is static" rule
+    // makes a live state a tone change, never motion.
+    it('the live state adds no animation or transition', () => {
+      const { container } = render(<ExerciseCardHeading {...baseProps} isLive />)
+      expect(container.innerHTML).not.toMatch(/animation|transition/i)
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(<ExerciseCardHeading {...baseProps} onPress={vi.fn()} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
+
+    it('has no accessibility violations in the upcoming density', async () => {
+      const { container } = render(
+        <ExerciseCardHeading
+          name="Deadlift"
+          density="upcoming"
+          prescription="3×8-12 @ RPE 8"
+          previousBest="185 lbs × 10"
+          onPress={vi.fn()}
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('names the row from its prescription, structured or free-text', () => {
+      render(<ExerciseCardHeading {...baseProps} onPress={vi.fn()} />)
+      expect(screen.getByLabelText('Cable Chest Press, 3×10 @ 90 lbs')).toBeInTheDocument()
+    })
   })
 })

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

@@ -1,43 +1,192 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View } from 'react-native'
-import { ExerciseHeading, type ExerciseHeadingProps } from './ExerciseHeading'
+import { useState } from 'react'
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native'
+import type { ThemeMode } from '../../../theme/tokens/semantic'
+import { useSurfaceMode } from '../../ui/surface/SurfaceContext'
+import { useHoverState } from '../../ui/tooltip'
+import { ExerciseHeading, exerciseHeadingLabel, type ExerciseHeadingProps } from './ExerciseHeading'
 import { SetStrip, type SetStripSet } from './SetStrip'
+import { exerciseRowStateColor } from './exerciseRowState'
 
-export interface ExerciseCardHeadingProps extends ExerciseHeadingProps {
+/**
+ * How much room the row gets, and therefore which shape it takes:
+ * - `rail` — the session-rail row: two lines (name, then prescription + tempo).
+ * - `compact` — the collapsed card row: one line, card padding.
+ * - `upcoming` — `compact`, dimmed, with the previous-best caption.
+ */
+export type ExerciseRowDensity = 'rail' | 'compact' | 'upcoming'
+
+interface DensitySpec {
+  paddingVertical: number
+  paddingHorizontal: number
+  layout: 'stacked' | 'inline'
+  dimOpacity: number
+  dimByDefault: boolean
+  /** The structured prescription renders in one dimmer, regular tone, not the rail's bright/bold. */
+  mutedPrescription: boolean
+}
+
+// The two dim depths are inherited from two different specimens (rail 0.55, card 0.60).
+// Converging them needs an opacity token the set does not have — reported, not invented.
+const DENSITY: Record<ExerciseRowDensity, DensitySpec> = {
+  rail: {
+    paddingVertical: 9,
+    paddingHorizontal: 12,
+    layout: 'stacked',
+    dimOpacity: 0.55,
+    dimByDefault: false,
+    mutedPrescription: false,
+  },
+  compact: {
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    layout: 'inline',
+    dimOpacity: 0.55,
+    dimByDefault: false,
+    mutedPrescription: true,
+  },
+  upcoming: {
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    layout: 'inline',
+    dimOpacity: 0.6,
+    dimByDefault: true,
+    mutedPrescription: true,
+  },
+}
+
+export type ExerciseCardHeadingProps = ExerciseHeadingProps & {
+  /** Row shape. Default `rail`. */
+  density?: ExerciseRowDensity
   /** Per-set performance data driving the strip; an empty list renders no strip. */
-  setStates: SetStripSet[]
+  setStates?: SetStripSet[]
   /** Strip height in px. Default 8. */
   stripHeight?: number
+  /** The row the user has chosen — a persistent wash, distinct from transient hover. */
+  isSelected?: boolean
+  /** Root style, for the chrome a card wraps the row in (superset radius, margins). */
+  style?: StyleProp<ViewStyle>
   /** Root testID. Default "exercise-card"; override when nested inside another card. */
   testID?: string
 }
 
 /**
- * The complete, standalone session-rail heading: an {@link ExerciseHeading} info
- * block over its per-set {@link SetStrip}. The unit the rail lists — self-contained
- * and independent of {@link ExerciseCard} (whose `rail` state delegates here).
+ * Hover and press state for the whole row. RNW ends a wrapper's hover the moment a
+ * nested Pressable claims the pointer (see `useHoverState`), so the row listens on
+ * both itself and its heading and takes either.
+ */
+function useRowInteraction() {
+  const { hovered: rowHovered, hoverProps } = useHoverState()
+  const [headingHovered, setHeadingHovered] = useState(false)
+  const [pressed, setPressed] = useState(false)
+
+  return {
+    hoverProps,
+    pressed,
+    hovered: rowHovered || headingHovered,
+    headingHandlers: {
+      onHoverIn: () => setHeadingHovered(true),
+      onHoverOut: () => setHeadingHovered(false),
+      onPressIn: () => setPressed(true),
+      onPressOut: () => setPressed(false),
+    },
+  }
+}
+
+/** Precedence: a press beats a selection, a selection beats a hover. */
+function rowWash(
+  mode: ThemeMode,
+  state: { pressed: boolean; isSelected: boolean; hovered: boolean }
+): string | undefined {
+  if (state.pressed) return exerciseRowStateColor('pressed', mode)
+  if (state.isSelected) return exerciseRowStateColor('selected', mode)
+  if (state.hovered) return exerciseRowStateColor('hovered', mode)
+  return undefined
+}
+
+/** Narrow the prescription union back to the exact member the caller supplied. */
+function prescriptionProps(p: ExerciseCardHeadingProps): ExerciseHeadingProps {
+  const base = { name: p.name }
+  if (p.prescription !== undefined) return { ...base, prescription: p.prescription }
+  if (p.sets === undefined) return base
+  return { ...base, sets: p.sets, reps: p.reps, load: p.load }
+}
+
+/**
+ * The exercise row — one component for all three densities the workout surfaces
+ * list an exercise in: the standalone session-rail heading (`rail`), the collapsed
+ * card row (`compact`) and the not-yet-reached row (`upcoming`). An
+ * {@link ExerciseHeading} info block over its per-set {@link SetStrip}.
+ *
+ * Interaction states are washes from the `interactive-*` tokens (press > selection >
+ * hover) plus a `isLive` name tone. All are static: this row renders on a wall display
+ * during a set, where titan's "the grain never animates" rule applies.
+ *
  * e1RM is intentionally dropped (a planning / live-panel concern). Dimming lives on
  * the outer wrapper so the strip dims with the heading.
  */
-export function ExerciseCardHeading({
-  setStates,
-  stripHeight = 8,
-  dimmed,
-  testID = 'exercise-card',
-  ...heading
-}: ExerciseCardHeadingProps) {
+export function ExerciseCardHeading(props: ExerciseCardHeadingProps) {
+  const {
+    density = 'rail',
+    setStates = [],
+    stripHeight = 8,
+    dimmed,
+    isSelected = false,
+    isLive = false,
+    testID = 'exercise-card',
+    style,
+  } = props
+  const spec = DENSITY[density]
+  const { hoverProps, pressed, hovered, headingHandlers } = useRowInteraction()
+  const wash = rowWash(useSurfaceMode(), { pressed, isSelected, hovered })
+  // The inline densities have no TempoDisplay sibling, so the whole padded row can be
+  // the press target — the touch target the collapsed card has always had. `rail` keeps
+  // the name row as the button because nesting TempoDisplay inside one is illegal.
+  const rowIsButton = spec.layout === 'inline'
+
+  const Root = rowIsButton ? Pressable : View
+  const rootPress = rowIsButton
+    ? {
+        ...headingHandlers,
+        onPress: props.onPress,
+        accessibilityRole: 'button' as const,
+        accessibilityLabel: exerciseHeadingLabel(props),
+      }
+    : {}
+
   return (
-    <View
-      style={{ paddingVertical: 9, paddingHorizontal: 12, opacity: dimmed ? 0.55 : 1 }}
+    <Root
+      {...hoverProps}
+      {...rootPress}
+      style={[
+        {
+          paddingVertical: spec.paddingVertical,
+          paddingHorizontal: spec.paddingHorizontal,
+          opacity: (dimmed ?? spec.dimByDefault) ? spec.dimOpacity : 1,
+        },
+        wash ? { backgroundColor: wash } : null,
+        style,
+      ]}
       testID={testID}
     >
-      <ExerciseHeading {...heading} />
+      <ExerciseHeading
+        {...prescriptionProps(props)}
+        {...(rowIsButton ? { pressTarget: 'ancestor' as const } : headingHandlers)}
+        unit={props.unit}
+        tempo={props.tempo}
+        indicator={props.indicator}
+        previousBest={props.previousBest}
+        onPress={rowIsButton ? undefined : props.onPress}
+        layout={spec.layout}
+        mutedPrescription={spec.mutedPrescription}
+        isLive={isLive}
+      />
 
       {setStates.length > 0 && (
         <View style={{ marginTop: 7 }} testID="exercise-card-strip">
           <SetStrip sets={setStates} height={stripHeight} />
         </View>
       )}
-    </View>
+    </Root>
   )
 }

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

@@ -192,7 +192,15 @@ const vbt: ExerciseVbt = {
 const meta: Meta<typeof ExerciseDetailPage> = {
   title: 'Pages/Exercise Detail',
   component: ExerciseDetailPage,
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **MesoStatusCard** · **StrengthTrendChart** · **CapacityBandChart** · **ExerciseCard** · **VelocityStrip**.',
+      },
+    },
+  },
   tags: ['autodocs'],
   args: {
     exercise: {

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

@@ -24,6 +24,7 @@ import {
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { cn } from '../../../utils/cn'
+import { alpha } from '../../../utils/colors'
 
 const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
@@ -545,9 +546,9 @@ export function ExerciseDetailPage({
                 paddingVertical: 4,
                 paddingHorizontal: 10,
                 borderRadius: 6,
-                backgroundColor: 'rgba(255,121,0,0.10)',
+                backgroundColor: alpha(BRAND_PRIMARY, 0.1),
                 borderWidth: 1,
-                borderColor: 'rgba(255,121,0,0.25)',
+                borderColor: alpha(BRAND_PRIMARY, 0.25),
               }}
               testID="exercise-detail-page-e1rm"
             >

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { ExerciseHeading } from './ExerciseHeading'
+import { Surface } from '../../ui/surface'
 
 /**
  * `ExerciseHeading` — the exercise-heading info block (no strip): the name +
@@ -9,7 +9,7 @@ import { ExerciseHeading } from './ExerciseHeading'
  * target; TempoDisplay is a sibling (it is itself a Pressable).
  */
 const meta: Meta<typeof ExerciseHeading> = {
-  title: 'Workout/ExerciseHeading',
+  title: 'Custom/Workout/ExerciseHeading',
   component: ExerciseHeading,
   tags: ['autodocs'],
   parameters: {
@@ -17,10 +17,10 @@ const meta: Meta<typeof ExerciseHeading> = {
       description: {
         component:
           '**Molecule.** The exercise-heading info block (no strip). Composes ' +
-          '[ExerciseIndicator](?path=/docs/workout-exerciseindicator--docs) + ' +
-          '[SetsRepsLoad](?path=/docs/workout-setsrepsload--docs) + ' +
-          '[TempoDisplay](?path=/docs/workout-tempodisplay--docs). ' +
-          'Used-by ↑ [ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs).',
+          '[ExerciseIndicator](?path=/docs/custom-workout-exerciseindicator--docs) + ' +
+          '[SetsRepsLoad](?path=/docs/custom-workout-setsrepsload--docs) + ' +
+          '[TempoDisplay](?path=/docs/custom-workout-tempodisplay--docs). ' +
+          'Used-by ↑ [ExerciseCardHeading](?path=/docs/custom-workout-exercisecardheading--docs).',
       },
     },
   },
@@ -35,9 +35,9 @@ const meta: Meta<typeof ExerciseHeading> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 246, padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 246, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }