@titan-design/react-ui 0.10.0 → 0.12.0

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

@@ -0,0 +1,132 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * GhostBloom — the smoothPath velocity "bloom": the faded ghost fan of prior reps and the
+ * control-aware silver→red current-rep line, over a paper-inspired line treatment.
+ * Extracted from GhostSpark so the single sparkline and the mirrored dual compose the SAME
+ * bloom — the dual is just two blooms sharing one axis, one grown UP and one flipped to grow
+ * DOWN (the ghost analogue of the diverging VelocityStrip's orientation flip). Improve the
+ * bloom once and both single + dual inherit it.
+ *
+ * The caller owns the x-scale and passes MAGNITUDES (px height off the axis, ≥ 0); the bloom
+ * owns the `baseline` (axis y) and `orientation` (grow up or down), so a mirrored twin is a
+ * one-prop flip, not a second component.
+ */
+import { useId } from 'react'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
+const PARCH = t['text-primary']
+
+/** A point as `[x_px, magnitude_px]` — magnitude is height off the axis baseline (≥ 0). */
+export type Pt = [number, number]
+
+/** Catmull-Rom → cubic-bezier smoothing over absolute `[x, y]` points. */
+export function smoothPath(pts: Pt[]): string {
+  if (pts.length < 2) return pts.length ? `M ${pts[0][0]} ${pts[0][1]}` : ''
+  let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i]
+    const p1 = pts[i]
+    const p2 = pts[i + 1]
+    const p3 = pts[i + 2] ?? p2
+    const c1x = p1[0] + (p2[0] - p0[0]) / 6
+    const c1y = p1[1] + (p2[1] - p0[1]) / 6
+    const c2x = p2[0] - (p3[0] - p1[0]) / 6
+    const c2y = p2[1] - (p3[1] - p1[1]) / 6
+    d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)}, ${c2x.toFixed(1)} ${c2y.toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`
+  }
+  return d
+}
+
+/**
+ * The line's ground treatment: a soft, blurred, low-opacity dark shadow with no hard edge —
+ * the bar "paper" language adapted to a chart LINE, never a hard black outline.
+ *
+ * `glow` (a halo in the line's own tint) and `rimlight` (a lighter upper edge plus a dropped
+ * contact shadow) were explored alongside it and NOT chosen. They were removed rather than
+ * left as unreachable options: no component ever exposed the choice, so the only thing that
+ * could select them was the exploration story, and dead branches in a render path read as
+ * intent that no longer exists.
+ */
+const BLUR_STD_DEV = 2.6
+
+export interface GhostBloomProps {
+  /** The current rep as `[x_px, magnitude_px]` points (magnitude ≥ 0 off the baseline). */
+  current: Pt[]
+  /** Prior-rep ("ghost") point sets, oldest first, same `[x, magnitude]` shape. */
+  ghosts?: Pt[][]
+  /** The current-line tint — silver→red from {@link ghostLineColor}. */
+  tint: string
+  /** The axis y (px) the bloom grows from. */
+  baseline: number
+  /** Grow UP from the baseline (default) or DOWN — the mirrored-dual flip. */
+  orientation?: 'up' | 'down'
+  /** Per-ghost stroke colour by index; default fades the primary text token. */
+  ghostStroke?: (index: number) => string
+  /** Current-line stroke width, px. Default 3.5. */
+  lineWidth?: number
+}
+
+/** The ghost fan + the paper-treated tinted current line. Render inside an `<svg>`. */
+export function GhostBloom({
+  current,
+  ghosts = [],
+  tint,
+  baseline,
+  orientation = 'up',
+  ghostStroke = (i) => alpha(PARCH, 0.1 + i * 0.015),
+  lineWidth = 3.5,
+}: GhostBloomProps) {
+  const rawId = useId()
+  const blurId = `bloom-blur-${rawId.replace(/[^a-zA-Z0-9]/g, '')}`
+  const toY = (mag: number) => (orientation === 'down' ? baseline + mag : baseline - mag)
+  const toAbs = (pts: Pt[]): Pt[] => pts.map(([px, mag]) => [px, toY(mag)])
+  const curD = smoothPath(toAbs(current))
+  const ghostDs = ghosts.map((g) => smoothPath(toAbs(g)))
+  // Rim-light sits on the side the line grows toward (its "top"); shadow falls the other way.
+
+  return (
+    <>
+      <defs>
+        <filter id={blurId} x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation={BLUR_STD_DEV} />
+        </filter>
+      </defs>
+
+      {/* prior reps — faded ghosts (absolute time → the fan reads as drift). */}
+      {ghostDs.map((d, i) => (
+        <path
+          key={i}
+          d={d}
+          fill="none"
+          stroke={ghostStroke(i)}
+          strokeWidth={1.5}
+          strokeLinejoin="round"
+        />
+      ))}
+
+      {/* ground treatment — a paper-inspired line contact, never a hard black outline. */}
+      <path
+        d={curD}
+        fill="none"
+        stroke={alpha(primitiveColors.black, 0.3)}
+        strokeWidth={lineWidth + 3}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        filter={`url(#${blurId})`}
+      />
+
+      {/* the crisp tinted line. */}
+      <path
+        d={curD}
+        fill="none"
+        stroke={tint}
+        strokeWidth={lineWidth}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { GhostSpark } from './GhostSpark'
+import { GhostBand } from './GhostBand'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { FATIGUE_STATES, TARGET_TEMPO_SECONDS } from './fatigue-mock'
+import type { PhaseSegment } from './fatigue-model'
+
+const PANEL_BG = greyRamp[950]
+const PAGE_BG = greyRamp[975]
+const t = getSemanticColors('dark')
+
+const meta: Meta<typeof GhostSpark> = {
+  title: 'Workout/Fatigue/Ghost Spark',
+  component: GhostSpark,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Per-rep velocity-time sparkline on the band model (coherent with the mirrored dual): a wide ' +
+          'phase-coloured band at the bottom (ecc magenta / con cyan, ECC/CON labelled inside, always ' +
+          'shown) with the velocity blooming UP from it — current rep solid over faded ghosts, a control-' +
+          'aware silver/red line tint (silver when controlled, dimming with tempo drift; shades of red on ' +
+          'collapse), over a soft paper-inspired ground (no hard outline). Given `targetTempoSeconds` ' +
+          'the band also PACES: each run fills across `elapsed / target` of its own width and its label ' +
+          'takes the ahead / on-pace / over tone. Every story here passes the prescription the mock reps ' +
+          'were generated against, so the fill you see is the real relationship, not a decoration.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof GhostSpark>
+
+const box = (child: React.ReactNode) => (
+  <View style={{ width: 400, backgroundColor: PANEL_BG, borderRadius: 12, padding: 16 }}>
+    {child}
+  </View>
+)
+const cur = FATIGUE_STATES[3].model // the full 8-rep set
+
+const label = (s: string) => (
+  <Text
+    style={{ fontSize: 9, letterSpacing: 1, fontFamily: 'monospace', color: t['text-tertiary'] }}
+  >
+    {s}
+  </Text>
+)
+
+/** The default spark — band + bloom, ECC/CON labels always visible. */
+export const Default: Story = {
+  render: () => (
+    <View style={{ backgroundColor: PAGE_BG, padding: 28, gap: 8, alignItems: 'flex-start' }}>
+      {label('GHOST SPARK · paced against the prescribed tempo')}
+      {box(
+        <GhostSpark
+          curves={cur.velocityCurves}
+          width={360}
+          height={190}
+          targetTempoSeconds={TARGET_TEMPO_SECONDS}
+        />
+      )}
+    </View>
+  ),
+}
+
+/** The line tint across the set — early controlled reps stay silver, late reps go through shades of red. */
+export const ControlAwareTint: Story = {
+  render: () => (
+    <View
+      style={{
+        backgroundColor: PAGE_BG,
+        padding: 28,
+        flexDirection: 'row',
+        gap: 24,
+        flexWrap: 'wrap',
+      }}
+    >
+      {FATIGUE_STATES.map((s) => (
+        <View key={s.name} style={{ gap: 8 }}>
+          {label(s.name)}
+          {box(
+            <GhostSpark
+              curves={s.model.velocityCurves}
+              width={360}
+              height={170}
+              targetTempoSeconds={s.model.targetTempoSeconds}
+            />
+          )}
+        </View>
+      ))}
+    </View>
+  ),
+}
+
+/**
+ * A rep with REAL holds (the sample-derived mock collapses its pauses to zero width, so
+ * the hold tone never shows there). Segments are handed in with SEAMS between the runs —
+ * the shape the model actually produces — to prove the band closes them: one contiguous
+ * strip, boundaries on the phase transitions, the hold reading as band material.
+ *
+ * The two prescribed pauses are `hold` (deliberate, under load); the trailing run is
+ * `idle` — undirected dead time after the rep. Both sit in the grey family, separated by
+ * VALUE and by the fact that a hold paces and idle never does.
+ */
+const PAUSED_SEGMENTS: PhaseSegment[] = [
+  { phase: 'eccentric', startMs: 0, endMs: 2100 },
+  { phase: 'hold', startMs: 2190, endMs: 2900 },
+  { phase: 'concentric', startMs: 2990, endMs: 4050 },
+  { phase: 'hold', startMs: 4140, endMs: 4600 },
+  { phase: 'idle', startMs: 4690, endMs: 5200 },
+]
+
+/** Prescribed tempo for the paced variants — [ecc, pauseBottom, con, pauseTop] seconds. */
+const PAUSED_TARGET: [number, number, number, number] = [2.1, 0.7, 1.05, 0.45]
+
+export const PausedRepBand: Story = {
+  render: () => {
+    const w = 360
+    const h = 60
+    const bandTop = 22
+    const x = (ms: number) => 12 + (ms / 5400) * (w - 20)
+    const Band = (props: { targetTempoSeconds?: [number, number, number, number] }) => (
+      <View style={{ width: w, backgroundColor: PANEL_BG, borderRadius: 12, padding: 16 }}>
+        <svg width={w} height={h}>
+          <GhostBand segments={PAUSED_SEGMENTS} x={x} top={bandTop} showLabels {...props} />
+        </svg>
+      </View>
+    )
+    return (
+      <View style={{ backgroundColor: PAGE_BG, padding: 28, gap: 16, alignItems: 'flex-start' }}>
+        {label('FLAT · no tempo prescribed — nothing to pace against')}
+        <Band />
+        {label('PACED · every phase ON TARGET — fills to the brim, labels green')}
+        <Band targetTempoSeconds={PAUSED_TARGET} />
+        {label('PACED · target DOUBLED — every phase now reads early, half-filled, amber')}
+        <Band targetTempoSeconds={[4.2, 1.4, 2.1, 0.9]} />
+        {label('PACED · target HALVED — every phase overruns, capped full, labels red')}
+        <Band targetTempoSeconds={[1.05, 0.35, 0.52, 0.22]} />
+      </View>
+    )
+  },
+}
+
+/**
+ * BEFORE the first rep. With a prescription there is still something true to draw: the shape
+ * of the rep being asked for — its phases at their target durations, unfilled — so the axis
+ * previews the work rather than reading as "no data".
+ *
+ * The right-hand case is the honest fallback: no tempo prescribed, nothing to preview.
+ */
+export const EmptyBeforeFirstRep: Story = {
+  render: () => (
+    <View
+      style={{
+        backgroundColor: PAGE_BG,
+        padding: 28,
+        flexDirection: 'row',
+        gap: 24,
+        alignItems: 'flex-start',
+      }}
+    >
+      <View style={{ gap: 8 }}>
+        {label('EMPTY · tempo prescribed — the rep to come')}
+        {box(<GhostSpark curves={[]} width={360} height={190} targetTempoSeconds={[3, 1, 2, 1]} />)}
+      </View>
+      <View style={{ gap: 8 }}>
+        {label('EMPTY · no prescription — nothing to preview')}
+        {box(<GhostSpark curves={[]} width={360} height={190} />)}
+      </View>
+    </View>
+  ),
+}

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

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { GhostSpark } from './GhostSpark'
+import { FATIGUE_STATES } from './fatigue-mock'
+
+const model = FATIGUE_STATES[3].model // the full 8-rep set
+
+describe('GhostSpark', () => {
+  it('renders without crashing for a populated set', () => {
+    render(<GhostSpark curves={model.velocityCurves} width={360} height={180} />)
+    expect(screen.getByTestId('ghost-spark')).toBeInTheDocument()
+  })
+
+  it('renders an empty box for no curves', () => {
+    render(<GhostSpark curves={[]} width={360} height={180} />)
+    expect(screen.getByTestId('ghost-spark')).toBeInTheDocument()
+  })
+
+  it('does not render a peak annotation (chrome removed)', () => {
+    render(<GhostSpark curves={model.velocityCurves} width={360} height={180} />)
+    expect(screen.queryByText(/peak/)).not.toBeInTheDocument()
+  })
+
+  it('renders one ghost path per prior rep plus the current line + soft ground', () => {
+    const { container } = render(
+      <GhostSpark curves={model.velocityCurves} width={360} height={180} />
+    )
+    // 7 ghosts + 2 current (soft ground + tint line) = 9 paths for an 8-rep set.
+    expect(container.querySelectorAll('path')).toHaveLength(9)
+  })
+
+  it('draws the wide phase band (rects) for the current rep phase runs', () => {
+    const { container } = render(
+      <GhostSpark curves={model.velocityCurves} width={360} height={180} />
+    )
+    // one band rect per phase segment (ecc / pause / con / hold ⇒ ≥ 2).
+    expect(container.querySelectorAll('rect').length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('always shows the ECC / CON band labels (no longer hover-gated)', () => {
+    render(<GhostSpark curves={model.velocityCurves} width={360} height={180} />)
+    expect(screen.getByText('ECC')).toBeInTheDocument()
+    expect(screen.getByText('CON')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,126 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * GhostSpark — the per-rep velocity-time sparkline, on the band model (coherent with
+ * the mirrored dual: single = one bloom + band; dual = two blooms sharing one band).
+ *
+ * A WIDE phase-coloured AXIS BAND ({@link GhostBand}) sits at the BOTTOM, filled per the
+ * current rep's phase runs (eccentric magenta / concentric cyan / hold and idle grey),
+ * each sized to its ACTUAL time extent, with the ECC / HOLD / CON labels shown INSIDE it.
+ * Given `targetTempoSeconds` the runs also PACE — muted base, fill earned against the
+ * prescribed phase duration, label toned ahead/on-pace/over. Velocity is
+ * drawn as MAGNITUDE blooming UP from just above the band ({@link GhostBloom}) — the current
+ * rep SOLID over faded grey GHOSTS of the prior reps. Phase is carried by the band colour
+ * beneath the line (no ecc-below / con-above split), so single and dual read the same.
+ *
+ * The current line's TINT is control-aware silver/red (see {@link ghostLineColor}): a
+ * controlled rep stays silver (dimming slightly with tempo drift), a collapsing rep goes
+ * through shades of red. The line rides a paper-inspired ground treatment (soft contact
+ * shadow), not a hard outline.
+ */
+import { View } from 'react-native'
+import { ghostLineColor, clamp01 } from './fatigue-tokens'
+import { GhostBand, BAND_H, BAND_GAP } from './GhostBand'
+import { GhostBloom, type Pt } from './GhostBloom'
+import { prescribedSegments, type TempoTuple } from './tempo-pacing'
+import type { RepVelocityCurve } from './fatigue-model'
+
+export interface GhostSparkProps {
+  /** Per-rep velocity-time curves, oldest first (last = current rep). */
+  curves: RepVelocityCurve[]
+  width: number
+  /** Plot height in px. Default 172. */
+  height?: number
+  /**
+   * Prescribed tempo `[ecc, pauseBottom, con, pauseTop]` seconds — turns on the band's
+   * phase PACING (muted base + earned fill, pacing-toned labels). Omit when nothing was
+   * prescribed: the band then paints flat, which is the honest read.
+   */
+  targetTempoSeconds?: TempoTuple | null
+}
+
+export function GhostSpark({
+  curves,
+  width,
+  height = 172,
+  targetTempoSeconds = null,
+}: GhostSparkProps) {
+  const w = width
+  const h = height
+  const padL = 12
+  const padR = 8
+  const padTop = 10
+  const padBot = 6
+
+  // Nothing performed yet. With a prescription there is still something true to draw: the
+  // SHAPE of the rep being asked for, laid out at its target durations and unfilled. An
+  // empty axis says "no data"; this says "here is the rep you are about to do".
+  if (curves.length === 0) {
+    const prescribed = prescribedSegments(targetTempoSeconds)
+    if (prescribed.length === 0) {
+      return <View testID="ghost-spark" style={{ width: w, height: h }} />
+    }
+    const totalMs = prescribed[prescribed.length - 1].endMs
+    const bandTopEmpty = h - padBot - BAND_H
+    const xEmpty = (ms: number): number => padL + (ms / (totalMs * 1.04)) * (w - padL - padR)
+    return (
+      <View testID="ghost-spark" style={{ paddingHorizontal: 4 }}>
+        <svg width={w} height={h}>
+          <GhostBand
+            segments={prescribed}
+            x={xEmpty}
+            top={bandTopEmpty}
+            showLabels
+            targetTempoSeconds={targetTempoSeconds}
+            prescribed
+          />
+        </svg>
+      </View>
+    )
+  }
+
+  const cur = curves[curves.length - 1]
+  const allSamples = curves.flatMap((c) => c.samples)
+  const vmax = Math.max(0.01, ...allSamples.map((s) => s.velocityMps)) * 1.06
+  const axisMaxT =
+    Math.max(1, ...curves.map((c) => c.samples[c.samples.length - 1]?.tMs ?? 0)) * 1.04
+
+  // Band pinned to the bottom; the bloom baseline sits a small gap above its top edge,
+  // and magnitude blooms UP toward padTop.
+  const bandBottom = h - padBot
+  const bandTop = bandBottom - BAND_H
+  const baseline = bandTop - BAND_GAP
+  const plotH = Math.max(1, baseline - padTop)
+  const x = (ms: number) => padL + (ms / axisMaxT) * (w - padL - padR)
+  const mag = (v: number) => clamp01(v / vmax) * plotH
+
+  const lineTint = ghostLineColor(cur.tempoDeviation, cur.grindSignature)
+  const curPts: Pt[] = cur.samples.map((s) => [x(s.tMs), mag(s.velocityMps)])
+  const ghostPts: Pt[][] = curves
+    .slice(0, -1)
+    .map((c) => c.samples.map((s): Pt => [x(s.tMs), mag(s.velocityMps)]))
+
+  return (
+    <View testID="ghost-spark" style={{ paddingHorizontal: 4 }}>
+      <svg width={w} height={h}>
+        {/* the ghost fan + paper-treated tinted current line, blooming up from the band. */}
+        <GhostBloom
+          current={curPts}
+          ghosts={ghostPts}
+          tint={lineTint}
+          baseline={baseline}
+          orientation="up"
+        />
+
+        {/* the WIDE phase-colored axis band at the bottom — the sole carrier of phase,
+            filled per the current rep's phase runs, ECC/HOLD/CON labelled INSIDE. */}
+        <GhostBand
+          segments={cur.phaseSegments}
+          x={x}
+          top={bandTop}
+          showLabels
+          targetTempoSeconds={targetTempoSeconds}
+        />
+      </svg>
+    </View>
+  )
+}

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

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { LiveFatigueCard } from './LiveFatigueCard'
+import { Surface } from '../../ui/surface/Surface'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { FATIGUE_STATES, WARMING_UP_MODEL, buildMockModel } from './fatigue-mock'
+
+const t = getSemanticColors('dark')
+
+const meta: Meta<typeof LiveFatigueCard> = {
+  title: 'Workout/Fatigue/Live Fatigue Card',
+  component: LiveFatigueCard,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The vertical live fatigue card — consumes one `LiveFatigueModel`. Composes `VerdictHero` ' +
+          '(RPE + verdict word) · `FatigueLights` (VEL/ROM/TEMPO dots) · `RomProgressionChart` · ' +
+          '`GhostSpark` (tempo embedded). Grounded on the `Surface` **base** plane — one step ' +
+          'above the `background` shell the live stage paints — separated by the alpha ' +
+          '`hairline-default` edge and finished with the shared **paper** accent (matte grain + ' +
+          'top rim-light + contact shadow), the hero-surface treatment from the surface north-star.',
+      },
+    },
+  },
+  argTypes: {
+    width: { control: { type: 'number', min: 260, max: 420, step: 2 } },
+  },
+}
+export default meta
+type Story = StoryObj<typeof LiveFatigueCard>
+
+/** The live stage the card actually sits on — the `background` shell plane, not a raw hex. */
+const Frame = ({ children }: { children: React.ReactNode }) => (
+  <Surface level="background" style={{ padding: 28, alignItems: 'flex-start' }}>
+    {children}
+  </Surface>
+)
+
+/** The default (form breaking down) card. */
+export const Default: Story = {
+  args: { model: FATIGUE_STATES[3].model, width: 318, height: 508 },
+  render: (args) => (
+    <Frame>
+      <LiveFatigueCard {...args} />
+    </Frame>
+  ),
+}
+
+/** The four verdict states side by side — the whole spectrum. */
+export const States: Story = {
+  render: () => (
+    <Surface
+      level="background"
+      style={{
+        padding: 28,
+        flexDirection: 'row',
+        gap: 20,
+        alignItems: 'flex-start',
+      }}
+    >
+      {FATIGUE_STATES.map((s) => (
+        <View key={s.name} style={{ gap: 8 }}>
+          <Text
+            style={{
+              fontSize: 9,
+              letterSpacing: 1,
+              fontFamily: 'monospace',
+              color: t['text-tertiary'],
+            }}
+          >
+            {s.name}
+          </Text>
+          <LiveFatigueCard model={s.model} width={300} height={500} />
+        </View>
+      ))}
+    </Surface>
+  ),
+}
+
+/**
+ * Mid-set WITH a plan attached — the ROM chart draws the remaining reps as solid to-do sections,
+ * the same upcoming-rep treatment the velocity strip uses. `plannedReps` rides the model straight
+ * through to `RomProgressionChart`, and comes from the mock's ONE rep count, so it agrees with
+ * the velocity side when the two sit together in the panel.
+ */
+export const WithPlannedReps: Story = {
+  render: () => (
+    <Frame>
+      <LiveFatigueCard model={FATIGUE_STATES[1].model} width={318} height={508} />
+    </Frame>
+  ),
+}
+
+/**
+ * The SAME mid-set model with NO plan attached — no target exists, so the chart shows the
+ * performed reps only. The gap reads as a gap; nothing is defaulted in.
+ *
+ * `plannedReps` is stripped EXPLICITLY rather than just left off: the mock now supplies it by
+ * default, so "no plan attached" has to be stated to stay true.
+ */
+export const WithoutPlannedReps: Story = {
+  render: () => (
+    <Frame>
+      <LiveFatigueCard
+        model={buildMockModel(FATIGUE_STATES[1].current, {
+          rpe: FATIGUE_STATES[1].model.rpe,
+          verdict: FATIGUE_STATES[1].model.verdict,
+          plannedReps: undefined,
+        })}
+        width={318}
+        height={508}
+      />
+    </Frame>
+  ),
+}
+
+/** Warming up — a cold-start set (< 2 reps): neutral verdict, em-dash RPE, no reference lines. */
+export const WarmingUp: Story = {
+  render: () => (
+    <Frame>
+      <LiveFatigueCard model={WARMING_UP_MODEL} width={318} height={508} />
+    </Frame>
+  ),
+}

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

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { LiveFatigueCard } from './LiveFatigueCard'
+import { FATIGUE_STATES, WARMING_UP_MODEL } from './fatigue-mock'
+
+const model = FATIGUE_STATES[3].model
+
+describe('LiveFatigueCard', () => {
+  it('composes the verdict hero, lights, ROM chart and ghost spark', () => {
+    render(<LiveFatigueCard model={model} width={318} height={508} />)
+    expect(screen.getByTestId('live-fatigue-card')).toBeInTheDocument()
+    expect(screen.getByTestId('verdict-hero')).toBeInTheDocument()
+    expect(screen.getByTestId('fatigue-lights')).toBeInTheDocument()
+    expect(screen.getByTestId('rom-progression')).toBeInTheDocument()
+    expect(screen.getByTestId('ghost-spark')).toBeInTheDocument()
+  })
+
+  it('shows the verdict word from the model', () => {
+    render(<LiveFatigueCard model={model} />)
+    expect(screen.getByText('Form breaking down')).toBeInTheDocument()
+  })
+
+  it('renders a warming-up (cold start) model without a verdict', () => {
+    render(<LiveFatigueCard model={WARMING_UP_MODEL} width={318} height={508} />)
+    expect(screen.getByText('Warming up')).toBeInTheDocument()
+    expect(screen.getByText('—')).toBeInTheDocument()
+  })
+})