@titan-design/react-ui 0.6.0 → 0.8.0

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

@@ -0,0 +1,43 @@
+// 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 { SetStrip, type SetStripSet } from './SetStrip'
+
+export interface ExerciseCardHeadingProps extends ExerciseHeadingProps {
+  /** Per-set performance data driving the strip; an empty list renders no strip. */
+  setStates: SetStripSet[]
+  /** Strip height in px. Default 8. */
+  stripHeight?: number
+  /** 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).
+ * 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) {
+  return (
+    <View
+      style={{ paddingVertical: 9, paddingHorizontal: 12, opacity: dimmed ? 0.55 : 1 }}
+      testID={testID}
+    >
+      <ExerciseHeading {...heading} />
+
+      {setStates.length > 0 && (
+        <View style={{ marginTop: 7 }} testID="exercise-card-strip">
+          <SetStrip sets={setStates} height={stripHeight} />
+        </View>
+      )}
+    </View>
+  )
+}

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

@@ -0,0 +1,151 @@
+/**
+ * SHEET · Unified exercise card (page 2) — the LOCKED rail-expansion, hardened onto the
+ * REAL {@link ExerciseCard}. The collapsed rail item and the expanded card are ONE object: the
+ * persistent header is the real {@link ExerciseCardHeading}, and expanding reveals the body on the
+ * SAME surface — PREV dropped, done + upcoming sets share ONE muted treatment, the ACTIVE set
+ * stands out by brightness. Every per-row strip is the REAL {@link VelocityStrip} via its `set`
+ * descriptor: `mini` (flat 3px) for done/upcoming, and the `compact` velocity-height variant as
+ * the active-set SPOTLIGHT (option B, locked). No hand-built prototype strip remains.
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { ExerciseCard } from './ExerciseCard'
+import { ExerciseCardHeading } from './ExerciseCardHeading'
+import { VelocityStrip } from './VelocityStrip'
+import { type SetRowProps } from './SetRow'
+import { type SetStripSet } from './SetStrip'
+import { INSET, BORDER_SUBTLE, T_PRIMARY, T_SECONDARY, Page, monoTag } from './setHeadingKit'
+
+const INTER = 'Inter, sans-serif'
+
+/** Per-rep mean velocity that DECAYS across a set (fast → slow). */
+const decay = (n: number, start: number, span = 0.5) =>
+  Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
+
+// The exercise: a flat straight set (Cable Chest Press, 3 × 10 @ 90 lb).
+const DONE = decay(10, 1.05)
+const ACTIVE = decay(5, 0.95, 0.3)
+
+// One data source drives both representations. Set 1 done · set 2 LIVE · set 3 upcoming.
+const SETS: SetRowProps[] = [
+  { state: 'done', setNumber: 1, unit: 'lbs', reps: 10, weight: 90, rpe: 7.5, velocities: DONE },
+  {
+    state: 'live',
+    setNumber: 2,
+    unit: 'lbs',
+    target: { reps: 10, weight: 90 },
+    reps: 5,
+    weight: 90,
+    velocities: ACTIVE,
+  },
+  { state: 'todo', setNumber: 3, unit: 'lbs', target: { reps: 10, weight: 90 } },
+]
+
+// The header's per-set strip: the same lifecycle the card derives internally, built here
+// so the collapsed rail item (ExerciseCardHeading) reads from the same source as the body.
+const HEADER_STATES: SetStripSet[] = [
+  { status: 'done', velocities: DONE },
+  { status: 'active', velocities: ACTIVE, planned: 10 },
+  { status: 'todo', planned: 10 },
+]
+
+const CARD_PROPS = {
+  name: 'Cable Chest Press',
+  summary: { sets: 3, reps: 10, weight: 90, unit: 'lbs' as const },
+  tempo: [2, 1, 2, 0] as [number, number, number, number],
+  indicator: 'info' as const,
+  sets: SETS,
+}
+
+function Surface({ children, width = 260 }: { children: React.ReactNode; width?: number }) {
+  return (
+    <View style={{ width, backgroundColor: INSET, borderRadius: 8, overflow: 'hidden' }}>
+      {children}
+    </View>
+  )
+}
+
+const meta: Meta = {
+  title: 'Lab/Explorations/Unified Exercise Card',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+type Story = StoryObj
+
+export const Unified: Story = {
+  name: 'One object · rail header → expanded body (real ExerciseCard)',
+  render: () => (
+    <Page
+      title="Unified exercise card — the rail heading IS the header"
+      note="The LOCKED rail-expansion, hardened onto the real ExerciseCard. Collapsed, it's the rail item (the real ExerciseCardHeading); expanded, the SAME surface reveals the table body — PREV dropped, done + upcoming sets share ONE muted treatment, the ACTIVE set stands out by brightness. Every per-row strip is the real VelocityStrip: `mini` for done/upcoming, the `compact` velocity-height variant as the active-set spotlight (B, locked). No hand-built prototype strip remains."
+    >
+      <View style={{ flexDirection: 'row', gap: 40, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+        <View style={{ gap: 8 }}>
+          <Text style={{ ...monoTag, color: T_SECONDARY }}>
+            collapsed · rail item (ExerciseCardHeading)
+          </Text>
+          <Surface>
+            <ExerciseCardHeading
+              name={CARD_PROPS.name}
+              sets={3}
+              reps={10}
+              load={90}
+              unit="lbs"
+              tempo={CARD_PROPS.tempo}
+              indicator={CARD_PROPS.indicator}
+              setStates={HEADER_STATES}
+            />
+          </Surface>
+        </View>
+
+        <View style={{ gap: 8 }}>
+          <Text style={{ ...monoTag, color: T_SECONDARY }}>
+            expanded · same header + revealed body
+          </Text>
+          <Surface>
+            <ExerciseCard {...CARD_PROPS} defaultExpanded />
+          </Surface>
+        </View>
+      </View>
+
+      <View style={{ height: 1, backgroundColor: BORDER_SUBTLE, marginVertical: 8 }} />
+
+      <View style={{ gap: 10, maxWidth: 320 }}>
+        <Text style={{ ...monoTag, color: T_SECONDARY }}>
+          the locked active-set spotlight · VelocityStrip variant=&quot;expanded&quot; (bare)
+        </Text>
+        <View style={{ backgroundColor: INSET, borderRadius: 8, padding: 12 }}>
+          <VelocityStrip
+            variant="expanded"
+            showNumbers={false}
+            showInfo={false}
+            height={24}
+            scale="fixed"
+            set={{ type: 'straight', velocities: ACTIVE, planned: 10 }}
+          />
+        </View>
+        <Text style={{ fontFamily: INTER, fontSize: 12.5, color: T_SECONDARY, lineHeight: 19 }}>
+          A small fixed-height (~24px) velocity-HEIGHT strip: bar height ∝ velocity against a fixed
+          1.15 m/s ceiling, planned reps as grey stubs, set-type aware — none of the full
+          variant&apos;s labels, info row, or mount animation. It reads as the same object as the
+          flat `mini` strips above it, just taller and brighter to mark the live set.
+        </Text>
+      </View>
+
+      <Text
+        style={{
+          fontFamily: INTER,
+          fontSize: 12.5,
+          color: T_PRIMARY,
+          lineHeight: 19,
+          maxWidth: 780,
+          marginTop: 6,
+        }}
+      >
+        The header is the same molecule collapsed and expanded — the card reads as one object, the
+        body flowing out of the rail row rather than a separate panel. The expanded card is the real
+        ExerciseCard; its header per-set strip is derived from the same rows the body renders.
+      </Text>
+    </Page>
+  ),
+}

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

@@ -31,13 +31,15 @@ const meso: MesoStatusCardProps = {
 
 function historySets(weight: number, topRpe: number): SetRowProps[] {
   return [1, 2, 3, 4].map((setNumber) => ({
-    mode: 'history' as const,
+    state: 'done' as const,
     setNumber,
-    previous: { reps: 8, weight: weight - 5 },
     reps: 8,
     weight,
     rpe: topRpe - (4 - setNumber) * 0.5,
     unit: 'lbs' as const,
+    velocities: Array.from({ length: 8 }, (_, i) =>
+      Number((0.72 - (setNumber - 1) * 0.04 - i * 0.03).toFixed(2))
+    ),
   }))
 }
 
@@ -188,7 +190,7 @@ const vbt: ExerciseVbt = {
 }
 
 const meta: Meta<typeof ExerciseDetailPage> = {
-  title: 'Custom/Workout/ExerciseDetailPage',
+  title: 'Pages/Exercise Detail',
   component: ExerciseDetailPage,
   parameters: { layout: 'fullscreen' },
   tags: ['autodocs'],

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

@@ -16,8 +16,8 @@ const entry = (id: string, weight: number, e1rm: number, isPR = false): Exercise
   e1rm: { value: e1rm, unit: 'lbs' },
   isPR,
   sets: [
-    { mode: 'history', setNumber: 1, reps: 8, weight, rpe: 8, unit: 'lbs' },
-    { mode: 'history', setNumber: 2, reps: 8, weight, rpe: 8.5, unit: 'lbs' },
+    { state: 'done', setNumber: 1, unit: 'lbs', reps: 8, weight, rpe: 8, velocities: [] },
+    { state: 'done', setNumber: 2, unit: 'lbs', reps: 8, weight, rpe: 8.5, velocities: [] },
   ],
 })
 
@@ -67,11 +67,11 @@ describe('deriveExerciseStats', () => {
 describe('toExerciseCardProps', () => {
   it('collapses without sets and expands with them', () => {
     const collapsed = toExerciseCardProps(history[0], false, () => {})
-    expect(collapsed.state).toBe('collapsed')
+    expect(collapsed.expanded).toBe(false)
     expect(collapsed.sets).toBeUndefined()
 
     const expanded = toExerciseCardProps(history[0], true, () => {})
-    expect(expanded.state).toBe('expanded')
+    expect(expanded.expanded).toBe(true)
     expect(expanded.sets).toHaveLength(2)
     expect(expanded.name).toBe('Session a')
   })

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

@@ -65,8 +65,8 @@ export interface ExerciseDetailEntry {
   title: string
   /** Collapsed summary (sets × reps @ weight). */
   summary?: ExerciseCardProps['summary']
-  /** Estimated one-rep max badge. */
-  e1rm?: ExerciseCardProps['e1rm']
+  /** Estimated one-rep max, feeding the page's best-e1RM stat. */
+  e1rm?: { value: number; unit: 'lbs' | 'kg' }
   /** Flags a personal-record entry. */
   isPR?: boolean
   /** Prescribed tempo, revealed when expanded. */
@@ -162,10 +162,9 @@ export function toExerciseCardProps(
 ): ExerciseCardProps {
   return {
     name: entry.title,
-    state: expanded ? 'expanded' : 'collapsed',
-    onToggle,
+    expanded,
+    onExpandedChange: onToggle,
     summary: entry.summary,
-    e1rm: entry.e1rm,
     isPR: entry.isPR,
     tempo: entry.tempo,
     sets: expanded ? entry.sets : undefined,

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { ExerciseHeading } from './ExerciseHeading'
+
+/**
+ * `ExerciseHeading` — the exercise-heading info block (no strip): the name +
+ * `ExerciseIndicator` title row over a tight `SetsRepsLoad` prescription line beside
+ * the real `TempoDisplay` (`showLabel={false}`). The name row is the sole press
+ * target; TempoDisplay is a sibling (it is itself a Pressable).
+ */
+const meta: Meta<typeof ExerciseHeading> = {
+  title: 'Workout/ExerciseHeading',
+  component: ExerciseHeading,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      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).',
+      },
+    },
+  },
+  argTypes: {
+    unit: { control: 'select', options: ['lbs', 'kg'] },
+    indicator: {
+      control: 'select',
+      options: [undefined, 'imbalance', 'overshoot', 'velocity-loss', 'missed-reps', 'pr', 'info'],
+    },
+    dimmed: { control: 'boolean' },
+    onPress: { action: 'press' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 246, padding: 16, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ExerciseHeading>
+
+export const Default: Story = {
+  args: {
+    name: 'Seated Cable Row',
+    sets: 5,
+    reps: 8,
+    load: 145,
+    unit: 'lbs',
+    tempo: [3, 1, 2, 0],
+    indicator: 'pr',
+  },
+}
+
+export const NoTempoNoIndicator: Story = {
+  args: { name: 'Incline DB Press', sets: 3, reps: 8, load: 70, unit: 'lbs' },
+}
+
+export const RepRange: Story = {
+  args: {
+    name: 'Face Pull',
+    sets: 3,
+    reps: '15-20',
+    load: 40,
+    unit: 'lbs',
+    tempo: [2, 1, 2, 0],
+    indicator: 'info',
+  },
+}
+
+export const Dimmed: Story = {
+  args: { ...Default.args, dimmed: true },
+  parameters: {
+    docs: { description: { story: 'Dimmed as a not-yet-reached exercise (standalone use).' } },
+  },
+}

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

@@ -0,0 +1,77 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { ExerciseHeading } from './ExerciseHeading'
+
+const baseProps = {
+  name: 'Seated Cable Row',
+  sets: 5,
+  reps: 8,
+  load: 145,
+  unit: 'lbs' as const,
+  tempo: [3, 1, 2, 0] as [number, number, number, number],
+  indicator: 'pr' as const,
+}
+
+describe('ExerciseHeading', () => {
+  it('renders the exercise name', () => {
+    render(<ExerciseHeading {...baseProps} />)
+    expect(screen.getByTestId('exercise-card-name')).toHaveTextContent('Seated Cable Row')
+  })
+
+  it('renders the sets/reps/load line with separators', () => {
+    render(<ExerciseHeading {...baseProps} />)
+    const summary = screen.getByTestId('exercise-card-summary')
+    expect(summary).toHaveTextContent('5')
+    expect(summary).toHaveTextContent('8')
+    expect(summary).toHaveTextContent('145')
+    expect(summary).toHaveTextContent('×')
+    expect(summary).toHaveTextContent('@')
+  })
+
+  it('renders the indicator chip when provided', () => {
+    render(<ExerciseHeading {...baseProps} />)
+    expect(screen.getByLabelText('Personal record')).toBeInTheDocument()
+  })
+
+  it('omits the indicator chip when absent', () => {
+    render(<ExerciseHeading {...baseProps} indicator={undefined} />)
+    expect(screen.queryByTestId('exercise-indicator')).not.toBeInTheDocument()
+  })
+
+  it('renders the TempoDisplay without its TEMPO caption when tempo is given', () => {
+    render(<ExerciseHeading {...baseProps} />)
+    expect(screen.getByTestId('tempo-display')).toBeInTheDocument()
+    expect(screen.queryByText('TEMPO')).not.toBeInTheDocument()
+  })
+
+  it('omits the TempoDisplay when no tempo', () => {
+    render(<ExerciseHeading {...baseProps} tempo={undefined} />)
+    expect(screen.queryByTestId('tempo-display')).not.toBeInTheDocument()
+  })
+
+  it('fires onPress when the name row is pressed', () => {
+    const onPress = vi.fn()
+    render(<ExerciseHeading {...baseProps} onPress={onPress} />)
+    fireEvent.click(screen.getByTestId('exercise-card-header'))
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('dims the block when marked dimmed', () => {
+    render(<ExerciseHeading {...baseProps} dimmed />)
+    expect(screen.getByTestId('exercise-heading')).toHaveStyle({ opacity: 0.55 })
+  })
+
+  it('is full opacity by default', () => {
+    render(<ExerciseHeading {...baseProps} />)
+    expect(screen.getByTestId('exercise-heading')).toHaveStyle({ opacity: 1 })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<ExerciseHeading {...baseProps} onPress={vi.fn()} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,85 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, Pressable } from 'react-native'
+import { roundWeight } from '../../../utils/workout-format'
+import { SetsRepsLoad } from './SetsRepsLoad'
+import { TempoDisplay } from './TempoDisplay'
+import { ExerciseIndicator, type ExerciseIndicatorKind } from './ExerciseIndicator'
+
+export interface ExerciseHeadingProps {
+  name: string
+  /** Prescription line values (sets × reps @ load). */
+  sets: number
+  reps: number | string
+  load: number
+  unit?: 'lbs' | 'kg'
+  /** Tempo tuple [eccentric, pauseBottom, concentric, pauseTop]; hidden when absent. */
+  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
+  /** Press target for the name row (expand / select). */
+  onPress?: () => void
+}
+
+function headingLabel(
+  name: string,
+  sets: number,
+  reps: number | string,
+  load: number,
+  unit: string
+) {
+  return `${name}, ${sets}×${reps} @ ${roundWeight(load)} ${unit}`
+}
+
+/**
+ * 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).
+ */
+export function ExerciseHeading({
+  name,
+  sets,
+  reps,
+  load,
+  unit = 'lbs',
+  tempo,
+  indicator,
+  dimmed,
+  onPress,
+}: ExerciseHeadingProps) {
+  return (
+    <View style={{ opacity: dimmed ? 0.55 : 1 }} testID="exercise-heading">
+      <Pressable
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityLabel={headingLabel(name, sets, reps, load, unit)}
+        className="flex-row items-center"
+        style={{ gap: 8 }}
+        testID="exercise-card-header"
+      >
+        <Text
+          className="text-text-primary"
+          style={{ fontSize: 14, fontFamily: '"Space Grotesk", sans-serif', fontWeight: '700' }}
+          testID="exercise-card-name"
+        >
+          {name}
+        </Text>
+        <View className="flex-1" />
+        {indicator && <ExerciseIndicator kind={indicator} />}
+      </Pressable>
+
+      <View
+        className="flex-row items-center"
+        style={{ gap: 8, marginTop: 1 }}
+        testID="exercise-card-summary"
+      >
+        <SetsRepsLoad sets={sets} reps={reps} load={load} unit={unit} />
+        <View className="flex-1" />
+        {tempo && <TempoDisplay tempo={tempo} size="sm" showLabel={false} showInfo={false} />}
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import {
+  ExerciseIndicator,
+  resolveIndicator,
+  INDICATOR_PRECEDENCE,
+  type ExerciseIndicatorKind,
+} from './ExerciseIndicator'
+
+/**
+ * `ExerciseIndicator` — a small circular OUTLINED chip in an exercise heading's
+ * title line. The LOCKED taxonomy is 6 precedence-ranked kinds across four tier
+ * colors (danger/warning/success/info): glyph = the specific signal, color = the
+ * severity tier. Only one chip is ever shown per exercise — {@link resolveIndicator}
+ * picks the highest-precedence active signal.
+ */
+const meta: Meta<typeof ExerciseIndicator> = {
+  title: 'Workout/ExerciseIndicator',
+  component: ExerciseIndicator,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Atom.** A small circular outlined chip in an exercise heading title line. Six ' +
+          'precedence-ranked kinds (imbalance › overshoot › velocity-loss › missed-reps › pr › ' +
+          'info) over four status-token tier colors; glyph = signal, color = severity tier. ' +
+          '`resolveIndicator()` selects the single chip to show. Used-by ↑ ' +
+          '[ExerciseHeading](?path=/docs/workout-exerciseheading--docs).',
+      },
+    },
+  },
+  argTypes: {
+    kind: { control: 'select', options: [...INDICATOR_PRECEDENCE] },
+    onPress: { action: 'press' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ExerciseIndicator>
+
+export const Imbalance: Story = { args: { kind: 'imbalance' } }
+export const Overshoot: Story = { args: { kind: 'overshoot' } }
+export const VelocityLoss: Story = { args: { kind: 'velocity-loss' } }
+export const MissedReps: Story = { args: { kind: 'missed-reps' } }
+export const PersonalRecord: Story = { args: { kind: 'pr' } }
+export const Info: Story = { args: { kind: 'info' } }
+
+const KIND_LABELS: Record<ExerciseIndicatorKind, string> = {
+  imbalance: 'imbalance · danger',
+  overshoot: 'overshoot · danger',
+  'velocity-loss': 'velocity-loss · warning',
+  'missed-reps': 'missed-reps · warning',
+  pr: 'pr · success',
+  info: 'info · info',
+}
+
+/** All six kinds in precedence order (1=highest → 6=lowest). */
+export const AllKinds: Story = {
+  render: () => (
+    <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>
+          <ExerciseIndicator kind={kind} />
+          <Text style={{ color: '#CFCFCF', fontSize: 12 }}>{KIND_LABELS[kind]}</Text>
+        </View>
+      ))}
+    </View>
+  ),
+}
+
+/**
+ * `resolveIndicator` demo — each row is a set of active signals; the resolver
+ * collapses them to the single highest-precedence chip actually shown.
+ */
+export const ResolvePrecedence: Story = {
+  render: () => {
+    const scenarios: ExerciseIndicatorKind[][] = [
+      ['info', 'pr'],
+      ['pr', 'missed-reps'],
+      ['velocity-loss', 'overshoot', 'info'],
+      ['missed-reps', 'imbalance', 'pr'],
+    ]
+    return (
+      <View style={{ gap: 12 }}>
+        {scenarios.map((candidates, i) => {
+          const winner = resolveIndicator(candidates)
+          return (
+            <View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+              <Text style={{ color: '#8A8A8A', fontSize: 12, width: 200 }}>
+                {candidates.join(', ')}
+              </Text>
+              <Text style={{ color: '#8A8A8A', fontSize: 12 }}>→</Text>
+              {winner ? <ExerciseIndicator kind={winner} /> : null}
+              <Text style={{ color: '#CFCFCF', fontSize: 12 }}>{winner}</Text>
+            </View>
+          )
+        })}
+      </View>
+    )
+  },
+}