@titan-design/react-ui 0.10.0 → 0.11.0

package/src/components/custom/Fatigue/LiveFatigueCard.tsx

@@ -0,0 +1,86 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * LiveFatigueCard — the vertical live fatigue card. One focal read (the RPE/verdict
+ * hero + three why-lights, grouped at top) → the ROM progression → the ghost-spark
+ * (tempo embedded), the last two spread through the leftover height. Consumes ONE
+ * {@link LiveFatigueModel}.
+ *
+ * SURFACE (TD-07.08). The card grounds on the `base` plane — ONE step above the
+ * `background` shell the live stage paints, per the surface north-star's pairing matrix
+ * (a card is parent+1; `raised`/`overlay` skip levels and read hot against the near-black
+ * frame). Separation is carried by the alpha `hairline-default` edge, not by lightness —
+ * the north-star's primary cue, self-normalising on any plane.
+ *
+ * PAPER. The live card is one of the designated hero surfaces, so it takes the paper
+ * accent DELIBERATELY: the shared {@link barPaper} treatment (brightness-scaled matte
+ * grain + crisp top rim-light + soft contact shadow) — the same material the ROM /
+ * velocity bars are made of, now carrying the sheet they sit on. Token-sourced fill, no
+ * hardcoded surface hex.
+ */
+import { View } from 'react-native'
+import { Surface } from '../../ui/surface/Surface'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { barPaper } from '../../../theme/bar-paper'
+import { VerdictHero } from './VerdictHero'
+import { FatigueLights } from './FatigueLights'
+import { RomProgressionChart } from './RomProgressionChart'
+import { GhostSpark } from './GhostSpark'
+import type { LiveFatigueModel } from './fatigue-model'
+
+const t = getSemanticColors('dark')
+
+export interface LiveFatigueCardProps {
+  /** The live fatigue read-model for the current set. */
+  model: LiveFatigueModel
+  /** Card width in px. Default 318. */
+  width?: number
+  /** Card height in px — when set, the sections spread through the leftover height. */
+  height?: number
+}
+
+const PAD = 18
+const GHOST_GUTTER = 4 // GhostSpark carries this L/R padding internally
+
+export function LiveFatigueCard({ model, width = 318, height }: LiveFatigueCardProps) {
+  const chartW = width - PAD * 2 - GHOST_GUTTER * 2
+  const chartH = height != null ? Math.round(Math.min(240, Math.max(168, height * 0.4))) : 172
+  return (
+    <Surface
+      level="base"
+      testID="live-fatigue-card"
+      style={{
+        width,
+        height,
+        borderRadius: 14,
+        padding: PAD,
+        borderWidth: 1,
+        borderColor: t['hairline-default'],
+        ...barPaper(t['surface-base']),
+      }}
+    >
+      {/* top group — verdict hero + the three why-lights, tight together. */}
+      <View style={{ gap: 12 }}>
+        <VerdictHero rpe={model.rpe} verdict={model.verdict} />
+        <FatigueLights dimensions={model.verdict?.dimensions ?? null} />
+      </View>
+
+      <View style={{ flex: 1, minHeight: 16 }} />
+
+      <RomProgressionChart
+        points={model.romProgression}
+        workingStandardM={model.romWorkingStandardM}
+        shortThresholdM={model.romShortThresholdM}
+        plannedReps={model.plannedReps}
+      />
+
+      <View style={{ flex: 1, minHeight: 16 }} />
+
+      <GhostSpark
+        curves={model.velocityCurves}
+        width={chartW}
+        height={chartH}
+        targetTempoSeconds={model.targetTempoSeconds}
+      />
+    </Surface>
+  )
+}

package/src/components/custom/Fatigue/LiveFatiguePanel.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { LiveFatiguePanel } from './LiveFatiguePanel'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { FATIGUE_STATES, buildMockPanelState } from './fatigue-mock'
+
+const PAGE_BG = primitiveColors.charcoal[900]
+const t = getSemanticColors('dark')
+
+const meta: Meta<typeof LiveFatiguePanel> = {
+  title: 'Workout/Fatigue/Live Fatigue Panel',
+  component: LiveFatiguePanel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The aligned **Live panel v2** — the primary loss-relative `VelocityHero` beside the vertical ' +
+          '`LiveFatigueCard`, flooded by a `LiveAuraFrame` whose category tracks the verdict state. ' +
+          'Composes `VelocityHero` (VelocityStrip + VL bands) · `LiveFatigueCard` (VerdictHero · ' +
+          'FatigueLights · RomProgressionChart · GhostSpark) · `LiveAuraFrame`. The velocity hero data ' +
+          'is passed separately (`velocity`) — it is not on the fatigue model.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof LiveFatiguePanel>
+
+/** THE aligned direction — a breaking-down rep 8, ghost-spark revealed. */
+export const LivePanelV2: Story = {
+  name: 'Live panel v2 (composition)',
+  render: () => {
+    const { model, velocity, header } = buildMockPanelState(FATIGUE_STATES[3].current, {
+      rpe: 10,
+      verdict: FATIGUE_STATES[3].model.verdict,
+    })
+    return (
+      <View style={{ backgroundColor: PAGE_BG, padding: 24 }}>
+        <LiveFatiguePanel model={model} velocity={velocity} header={header} />
+      </View>
+    )
+  },
+}
+
+/** The whole system across the verdict spectrum — GOOD → SLOWING → GRINDING → FORM BREAKING DOWN. */
+export const LiveStates: Story = {
+  name: 'Live states (Good → Breaking down)',
+  render: () => (
+    <View style={{ backgroundColor: PAGE_BG }}>
+      <View style={{ padding: 28, paddingBottom: 8, gap: 4 }}>
+        <Text
+          style={{
+            fontSize: 16,
+            fontWeight: '800',
+            fontFamily: '"Space Grotesk", sans-serif',
+            color: t['text-primary'],
+          }}
+        >
+          Live-view states — the system across the fatigue spectrum
+        </Text>
+        <Text style={{ fontSize: 12, color: t['text-secondary'], maxWidth: 860, lineHeight: 18 }}>
+          The live panel rendered per verdict state, each driven by a full plausible model — RPE,
+          the three status dots, the control-aware ghost line, and the ROM progression all respond
+          together. The aura flood tracks the state. Every panel is built from ONE truncation point,
+          so the ROM chart&apos;s upcoming reps and the velocity strip&apos;s beside it always agree
+          on the rep count.
+        </Text>
+      </View>
+      {FATIGUE_STATES.map((s) => {
+        const { model, velocity, header } = buildMockPanelState(s.current, {
+          rpe: s.model.rpe,
+          verdict: s.model.verdict,
+        })
+        return (
+          <View key={s.name} style={{ gap: 6, paddingHorizontal: 28, paddingBottom: 22 }}>
+            <Text
+              style={{
+                fontSize: 9,
+                letterSpacing: 1,
+                fontFamily: 'monospace',
+                color: t['text-tertiary'],
+              }}
+            >
+              {s.name}
+            </Text>
+            <LiveFatiguePanel model={model} velocity={velocity} header={header} />
+          </View>
+        )
+      })}
+    </View>
+  ),
+}

package/src/components/custom/Fatigue/LiveFatiguePanel.tsx

@@ -0,0 +1,151 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * LiveFatiguePanel — the aligned "Live panel v2": the loss-relative {@link VelocityHero}
+ * (primary) beside the vertical {@link LiveFatigueCard} (secondary), flooded by a
+ * coaching {@link LiveAuraFrame} whose category tracks the verdict state. The optional
+ * lite exercise header sits above.
+ *
+ * The velocity hero's per-rep velocities are NOT on the fatigue model (they come from
+ * the live-view velocity path), so they're passed as their own `velocity` prop.
+ */
+import { View, Text } from 'react-native'
+import { LiveAuraFrame, type LiveAuraCategory } from '../Workout/LiveAuraFrame'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+import { VelocityHero } from './VelocityHero'
+import { LiveFatigueCard } from './LiveFatigueCard'
+import { FONT_HEAD, FONT_UI, FONT_MONO, auraForVerdict } from './fatigue-tokens'
+import type { LiveFatigueModel } from './fatigue-model'
+
+const t = getSemanticColors('dark')
+
+export interface LiveFatiguePanelHeader {
+  /** Exercise name — the large title. */
+  title: string
+  /** Prescription / block line under the title. */
+  subtitle?: string
+  /** Right-aligned progress meta, e.g. "SET 3 · REP 7 / 8". */
+  meta?: string
+}
+
+export interface LiveFatiguePanelVelocity {
+  /** Per-rep MEAN concentric velocity (m/s), ordered by rep. */
+  velocities: number[]
+  targetReps?: number
+  liveRepIndex?: number
+}
+
+export interface LiveFatiguePanelProps {
+  /** The live fatigue read-model for the current set. */
+  model: LiveFatigueModel
+  /** The velocity-hero data (its own source — not on the fatigue model). */
+  velocity: LiveFatiguePanelVelocity
+  /** Optional lite exercise header. Omitted → no header row. */
+  header?: LiveFatiguePanelHeader
+  /** Aura-flood category. Defaults to the verdict-derived category. */
+  aura?: LiveAuraCategory
+  /** Panel body height in px. Default 508. */
+  bodyHeight?: number
+  /** Fixed fatigue-card column width. Default 318. */
+  cardWidth?: number
+}
+
+function ExerciseHeaderLite({ header }: { header: LiveFatiguePanelHeader }) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'space-between',
+        paddingHorizontal: 24,
+        paddingTop: 18,
+        paddingBottom: 14,
+        borderBottomWidth: 1,
+        borderColor: alpha(t['text-primary'], 0.08),
+      }}
+    >
+      <View style={{ gap: 2 }}>
+        <Text
+          style={{
+            fontSize: 28,
+            fontWeight: '700',
+            fontFamily: FONT_HEAD,
+            color: t['text-primary'],
+          }}
+        >
+          {header.title}
+        </Text>
+        {header.subtitle && (
+          <Text
+            style={{
+              fontSize: 13,
+              fontWeight: '600',
+              fontFamily: FONT_UI,
+              color: t['text-secondary'],
+            }}
+          >
+            {header.subtitle}
+          </Text>
+        )}
+      </View>
+      {header.meta && (
+        <Text
+          style={{
+            fontSize: 13,
+            fontWeight: '800',
+            fontFamily: FONT_MONO,
+            color: t['text-tertiary'],
+          }}
+        >
+          {header.meta}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export function LiveFatiguePanel({
+  model,
+  velocity,
+  header,
+  aura,
+  bodyHeight = 508,
+  cardWidth = 318,
+}: LiveFatiguePanelProps) {
+  const category = aura ?? auraForVerdict(model.verdict?.state ?? null)
+  const heroH = bodyHeight - 26 // leaves room for the hero's own eyebrow above it
+  return (
+    <LiveAuraFrame
+      category={category}
+      style={{ borderRadius: 0, borderWidth: 0 }}
+      testID="live-fatigue-panel"
+    >
+      <View style={{ flex: 1 }}>
+        {header && <ExerciseHeaderLite header={header} />}
+        <View style={{ padding: 24, flexDirection: 'row', gap: 18, alignItems: 'stretch' }}>
+          {/* PRIMARY — the velocity hero with VL bands; flexes to fill the width the card leaves. */}
+          <View style={{ flex: 1, gap: 8 }}>
+            <Text
+              style={{
+                fontSize: 9,
+                letterSpacing: 1.2,
+                fontFamily: FONT_MONO,
+                color: t['text-tertiary'],
+              }}
+            >
+              VELOCITY · this set
+            </Text>
+            <VelocityHero
+              velocities={velocity.velocities}
+              targetReps={velocity.targetReps}
+              liveRepIndex={velocity.liveRepIndex}
+              height={heroH}
+            />
+          </View>
+          {/* SECONDARY — the vertical fatigue card. */}
+          <LiveFatigueCard model={model} width={cardWidth} height={bodyHeight} />
+        </View>
+      </View>
+    </LiveAuraFrame>
+  )
+}

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

@@ -0,0 +1,93 @@
+# Fatigue component family
+
+The aligned **"Live panel v2"** hardened into titan components: the live velocity
+hero beside the always-on fatigue card. Everything consumes one read-model
+(`LiveFatigueModel`) — a titan-local mirror of voltras-mcp's
+`src/dashboard/spa/live-page/fatigue-model.ts`, sourced from real WA analytics
+(`getSetFatigueVerdict` / `getSetWorkingROM` / per-sample telemetry). Files live flat;
+the tier map below is a documentation contract, not a directory layout.
+
+## Composition tree (composes-↓ / used-by-↑)
+
+```
+LiveFatiguePanel              ← the composition (Live panel v2)
+├─ LiveAuraFrame              (Workout/ — coaching flood, category tracks the verdict)
+├─ VelocityHero               ← primary read
+│  └─ VelocityStrip           (Workout/ — reused as-is; VL bands overlaid on its peak scale)
+└─ LiveFatigueCard            ← secondary read (consumes LiveFatigueModel)
+   ├─ VerdictHero             (RPE number + verdict word, tone-flooded)
+   ├─ FatigueLights           (VEL/ROM/TEMPO "why" dots)
+   │  ├─ StatusDot            (Workout/ — the dot primitive, glow)
+   │  └─ Tooltip              (ui/tooltip — hover detail)
+   ├─ RomProgressionChart     (per-rep silver/red depth bars + reference lines)
+   ├─ GhostSpark              (per-rep velocity-time sparkline; tempo EMBEDDED)
+   │  ├─ GhostBand            (the phase-coloured axis band — ECC/CON labelled inside)
+   │  └─ GhostBloom           (the ghost fan + silver→red current line; orientation up/down)
+   ├─ DualGhostSpark          (dual-Voltra: ONE GhostBand + TWO mirrored GhostBlooms)
+   │  ├─ GhostBand            (the SAME band, centred, shared by both devices)
+   │  └─ GhostBloom ×2        (left up / right down — a one-prop flip, one shared scale)
+   └─ Surface                 (ui/surface — the base-plane, paper-accented card ground)
+```
+
+## Tier map
+
+**Atoms** — `VerdictHero` · `FatigueLights` · `RomProgressionChart` · `GhostBand` · `GhostBloom`
+**Molecules** — `VelocityHero` (VelocityStrip + VL bands) · `GhostSpark` (band + one bloom) ·
+`DualGhostSpark` (one band + two mirrored blooms)
+**Organisms** — `LiveFatigueCard` (the card, one data contract) · `LiveFatiguePanel` (hero + card + aura)
+
+## Reuse audit — composed, not hand-rolled
+
+- **`StatusDot`** (Workout/) — the fatigue lights are `StatusDot` (glow) + a mono label
+  inside a `Tooltip`; no re-implemented dot.
+- **`Tooltip`** (ui/tooltip/) — the per-dimension hover detail.
+- **`VelocityStrip`** (Workout/) — the hero reuses it verbatim; `VelocityHero` only adds
+  the loss-relative VL20/VL30 band overlay on the strip's own peak scale.
+- **`LiveAuraFrame`** (Workout/) — the coaching flood.
+- **`Surface`** (ui/surface/) — the card ground (`level="base"`, one step above the
+  `background` shell), separated by the alpha `hairline-default` edge and finished with
+  the shared `barPaper` accent; no hardcoded surface hex.
+- **`GhostBand` / `GhostBloom`** — the single `GhostSpark` and the dual `DualGhostSpark`
+  compose the SAME band + bloom; the dual is the bloom with `orientation="down"`, not a
+  second renderer. No forked path / band / tint code, so a bloom improvement reaches both.
+- **Tokens** — colours come from `getSemanticColors` / `primitiveRamps`; formatting from
+  `roundTempo`. No literal surface/status hex constants.
+
+**No new top-level primitives promoted.** Every genuinely-new leaf here (verdict hero,
+lights, ROM chart, ghost-spark) is fatigue-specific with a single consumer (the card),
+so per the ≥2-consumer rule they stay in the family rather than becoming shared atoms.
+The reusable pure helpers (`ghostLineColor`, `auraForVerdict`, `mixHex`) live in
+`fatigue-tokens.ts`.
+
+## Locked design calls (applied)
+
+- **Velocity hero = loss-relative** — VL20/VL30 decision bands (not absolute velocity
+  zones). See _deferred_ below for the bar-fill recolour.
+- **ROM chart + ghost line = ONE silver/red scheme** — silver when right, only SHADES OF
+  RED when there's an issue (no greens, no ambers). Shared constants `SILVER` /
+  `RED_LIGHT|MID|DEEP` live in `fatigue-tokens.ts`; both consumers import them. The ghost
+  line (`ghostLineColor`): controlled rep stays silver, dimming toward grey with
+  `tempoDeviation` (a drift cue, never a colour); a collapsing rep (`grindSignature ≥ 0.35`)
+  runs light→mid→deep red by severity. ROM bars: silver at/above working, light red below
+  working, deep red below the short threshold. (The verdict tones and the velocity-loss
+  VL20/VL30 bands are a SEPARATE language — unchanged.)
+- **RPE only** — no reps-in-reserve line; the number + verdict word carry exertion state.
+- **No separate top alert** — the card covers exertion state.
+- **Tempo carried by the ghost-spark phase BAND** (`PHASE_AXIS_COLOR`) — no mini-tempo
+  digits, and no standalone hero-tempo component.
+
+## Data plan / follow-ups
+
+- **Store wiring:** `LiveFatigueCard` consumes `LiveFatigueModel` from voltras-mcp's
+  `mapStoreToFatigueModel` (`panels/fatigue-view.ts`), replacing the provisional
+  hand-rolled `live-page/FatigueCard.tsx` spike. The velocity hero's per-rep velocities
+  are NOT on the model (they come from the live-view velocity path) — passed as the
+  panel's separate `velocity` prop.
+- **Deferred — VelocityStrip loss-relative bar fill:** the locked call also wants the
+  hero's BAR FILL recoloured gold→orange→red by velocity loss (not absolute zone).
+  VelocityStrip has no loss-relative colour mode; `VelocityHero` owns the band overlay
+  only. Recolouring needs a new `VelocityStrip` prop (a follow-up — not done here to keep
+  VelocityStrip reused as-is).
+- **Deferred — velocity bar "grow up from bottom" animation:** the locked call wants the
+  live bar to grow from the baseline (tracking the rep) rather than the current
+  drop-in/pop. That is VelocityStrip-internal animation; a follow-up on VelocityStrip.

package/src/components/custom/Fatigue/RomProgressionChart.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { RomProgressionChart } from './RomProgressionChart'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { FATIGUE_STATES, WARMING_UP_MODEL } from './fatigue-mock'
+
+const PAGE_BG = primitiveColors.charcoal[900]
+const t = getSemanticColors('dark')
+
+const meta: Meta<typeof RomProgressionChart> = {
+  title: 'Workout/Fatigue/ROM Progression',
+  component: RomProgressionChart,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Per-rep depth bars (silver at/above working → light red below working range → deep red below the short threshold), ' +
+          'with dashed working-standard + short-threshold reference lines and a faint red short-zone. ' +
+          'Data-driven from absolute metres; the bars carry the read alone (no caption strip). ' +
+          'Composes the shared **SetBarChart** — same adaptive bar spacing as the velocity hero, and an optional ' +
+          '`plannedReps` draws the remaining reps as dashed to-do placeholders (the "N of M done" read).',
+      },
+    },
+  },
+  argTypes: { barHeight: { control: { type: 'number', min: 24, max: 120, step: 2 } } },
+}
+export default meta
+type Story = StoryObj<typeof RomProgressionChart>
+
+/**
+ * Mid-set with `plannedReps` — 4 of 10 done, the remaining 6 reps drawn as dashed to-do placeholders
+ * (the velocity hero's "N of M" read, now on the ROM chart). The working-standard + short-threshold
+ * lines still sit on-chart. Bars carry the shared SetBarChart adaptive spacing.
+ */
+export const PlannedToDo: Story = {
+  render: () => (
+    <View style={{ backgroundColor: PAGE_BG, padding: 28, gap: 22 }}>
+      {[
+        { name: 'MID-SET · 4 OF 10', done: 4 },
+        { name: 'FIRST REP · 1 OF 10', done: 1 },
+        { name: 'PLANNED · 0 OF 10', done: 0 },
+      ].map((s) => (
+        <View key={s.name} style={{ gap: 6, width: 320 }}>
+          <Text
+            style={{
+              fontSize: 9,
+              letterSpacing: 1,
+              fontFamily: 'monospace',
+              color: t['text-tertiary'],
+            }}
+          >
+            {s.name}
+          </Text>
+          <RomProgressionChart
+            points={[0.92, 0.9, 0.86, 0.81, 0.77, 0.72]
+              .slice(0, s.done)
+              .map((romM, i) => ({ repNumber: i + 1, romM }))}
+            workingStandardM={0.88}
+            shortThresholdM={0.66}
+            plannedReps={10}
+          />
+        </View>
+      ))}
+    </View>
+  ),
+}
+
+export const AcrossStates: Story = {
+  render: () => (
+    <View style={{ backgroundColor: PAGE_BG, padding: 28, gap: 22 }}>
+      {[...FATIGUE_STATES, { name: 'WARMING UP', current: 0, model: WARMING_UP_MODEL }].map((s) => (
+        <View key={s.name} style={{ gap: 6, width: 300 }}>
+          <Text
+            style={{
+              fontSize: 9,
+              letterSpacing: 1,
+              fontFamily: 'monospace',
+              color: t['text-tertiary'],
+            }}
+          >
+            {s.name}
+          </Text>
+          <RomProgressionChart
+            points={s.model.romProgression}
+            workingStandardM={s.model.romWorkingStandardM}
+            shortThresholdM={s.model.romShortThresholdM}
+          />
+        </View>
+      ))}
+    </View>
+  ),
+}

package/src/components/custom/Fatigue/RomProgressionChart.test.tsx

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { RomProgressionChart } from './RomProgressionChart'
+import type { RepRomPoint } from './fatigue-model'
+
+const points: RepRomPoint[] = [
+  { repNumber: 1, romM: 0.9 },
+  { repNumber: 2, romM: 0.88 },
+  { repNumber: 3, romM: 0.72 },
+]
+
+describe('RomProgressionChart', () => {
+  it('renders no caption strip — the bars carry the read alone', () => {
+    render(<RomProgressionChart points={points} workingStandardM={0.88} shortThresholdM={0.66} />)
+    expect(screen.queryByText(/depth vs working range/)).not.toBeInTheDocument()
+    expect(screen.queryByText(/^now /)).not.toBeInTheDocument()
+  })
+
+  it('renders the chart container', () => {
+    render(<RomProgressionChart points={points} workingStandardM={0.88} shortThresholdM={0.66} />)
+    expect(screen.getByTestId('rom-progression')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <RomProgressionChart points={points} workingStandardM={0.88} shortThresholdM={0.66} />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/custom/Fatigue/RomProgressionChart.tsx

@@ -0,0 +1,132 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * RomProgressionChart — the per-rep depth progression on the shared silver/red scheme:
+ * silver bars at-or-above the working range, light red below it, deep red below the
+ * short threshold — with dashed working-standard (silver) + short-threshold (red)
+ * reference lines and a faint red short-zone. Every rep reads at full colour.
+ * The bars carry the whole read — no caption strip (the card's own hierarchy names it).
+ *
+ * Composes the shared {@link SetBarChart}: SetBarChart owns the geometry (value→height
+ * scaling, the plot-width-driven adaptive bar width / gap — the same rhythm as the velocity
+ * hero) and paints the reference overlay this chart hands it. When `plannedReps` exceeds the
+ * performed count the remaining reps draw as SetBarChart's default solid to-do sections — the
+ * same upcoming-rep treatment the velocity strip uses, so "3 of 8 done" reads identically in
+ * both charts. Bars scale to the tallest of {bars, working standard, short threshold} so the
+ * reference lines always sit on-chart; when no working standard is established yet (< 3 reps)
+ * the lines drop and every bar reads silver — the bars alone carry the shape.
+ */
+import { View } from 'react-native'
+import { alpha } from '../../../utils/colors'
+import { SetBarChart, type SetSlot, type SetBarGeometry } from '../charts/SetBarChart'
+import { SILVER, RED_LIGHT, RED_DEEP } from './fatigue-tokens'
+import type { RepRomPoint } from './fatigue-model'
+
+export interface RomProgressionChartProps {
+  /** Per-rep ROM points (metres), ordered by rep. */
+  points: RepRomPoint[]
+  /** Working-range standard (metres) — the silver dashed line. `null` = not yet established. */
+  workingStandardM: number | null
+  /** Short threshold (metres) — the red dashed line + short-zone. `null` = not yet established. */
+  shortThresholdM: number | null
+  /** Height of the bar plot in px. Default 44. */
+  barHeight?: number
+  /** Keep the chart to a legible recent tail. Default 12. */
+  maxReps?: number
+  /**
+   * Planned rep count. Reps beyond the performed count draw as solid to-do sections — the
+   * velocity strip's "3 of 8 done" read. Ignored when absent or ≤ the performed-rep count.
+   */
+  plannedReps?: number
+}
+
+/** A per-rep bar's colour (silver/red): deep red below short, light red below working, else silver. */
+function barColor(romM: number, working: number | null, short: number | null): string {
+  if (short != null && romM < short) return RED_DEEP
+  if (working != null && romM < working) return RED_LIGHT
+  return SILVER
+}
+
+/** The dashed working-standard + short-threshold lines and the faint short-zone fill, painted from chart geometry. */
+function romReferenceOverlay(
+  g: SetBarGeometry,
+  workingStandardM: number | null,
+  shortThresholdM: number | null
+) {
+  return (
+    <>
+      {shortThresholdM != null && (
+        <View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: g.yOf(shortThresholdM),
+            backgroundColor: alpha(RED_DEEP, 0.06),
+          }}
+        />
+      )}
+      {workingStandardM != null && (
+        <View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: g.yOf(workingStandardM),
+            borderTopWidth: 1,
+            borderStyle: 'dashed',
+            borderColor: alpha(SILVER, 0.4),
+          }}
+        />
+      )}
+      {shortThresholdM != null && (
+        <View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: g.yOf(shortThresholdM),
+            borderTopWidth: 1,
+            borderStyle: 'dashed',
+            borderColor: alpha(RED_DEEP, 0.4),
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export function RomProgressionChart({
+  points,
+  workingStandardM,
+  shortThresholdM,
+  barHeight = 44,
+  maxReps = 12,
+  plannedReps,
+}: RomProgressionChartProps) {
+  const shown = points.slice(-maxReps)
+  const slots: SetSlot[] = shown.map((p) => ({ kind: 'rep', value: p.romM }))
+  // Scale to the tallest of {bars, working, short} so the reference lines always sit on-chart
+  // (SetBarChart's own peak scale reads only the bar values). `0` → let SetBarChart use peak.
+  const scaleMax =
+    Math.max(...shown.map((p) => p.romM), workingStandardM ?? 0, shortThresholdM ?? 0) || undefined
+
+  return (
+    <View testID="rom-progression">
+      <SetBarChart
+        slots={slots}
+        colorFor={(romM) => barColor(romM, workingStandardM, shortThresholdM)}
+        height={barHeight}
+        scaleMax={scaleMax}
+        barRadius={2}
+        hideBaseline
+        targetReps={plannedReps}
+        renderReference={(g) => romReferenceOverlay(g, workingStandardM, shortThresholdM)}
+        testIDPrefix="rom"
+      />
+    </View>
+  )
+}