@titan-design/react-ui 0.10.0 → 0.11.0

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

@@ -0,0 +1,226 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * `Workout/Fatigue/Silver-Red Palette` — the single documented source for the fatigue
+ * family's line/quality colour language. SILVER when the rep is right, SHADES OF RED when
+ * something's wrong — no greens, no ambers (those belong to the verdict tones + velocity-
+ * loss bands, not here). Every swatch reads its value straight from `fatigue-tokens`, so
+ * this story can't drift from what the components actually render.
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import {
+  SILVER,
+  DRIFT_GREY,
+  RED_LIGHT,
+  RED_MID,
+  RED_DEEP,
+  PHASE_AXIS_COLOR,
+  FONT_HEAD,
+  FONT_UI,
+  FONT_MONO,
+} from './fatigue-tokens'
+
+const PAGE_BG = primitiveColors.charcoal[900]
+const PANEL_BG = primitiveColors.charcoal[800]
+const t = getSemanticColors('dark')
+
+const meta: Meta = {
+  title: 'Foundations/Color/Silver-Red Scheme',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The locked silver→red colour language for the live-fatigue family. SILVER = the ' +
+          'rep is controlled (dimming toward DRIFT_GREY with tempo drift); SHADES OF RED = a ' +
+          'collapse, by severity. Plus the phase-axis tones (eccentric magenta / concentric ' +
+          'cyan / idle grey) that colour the ghost band. Used by RomProgressionChart, ' +
+          'GhostSpark, and the dual ghost-line. All values sourced from `fatigue-tokens`.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj
+
+interface SwatchDef {
+  name: string
+  token: string
+  value: string
+  note?: string
+}
+
+function Swatch({ def }: { def: SwatchDef }) {
+  return (
+    <View style={{ width: 132, gap: 6 }}>
+      <View
+        style={{
+          height: 72,
+          borderRadius: 10,
+          backgroundColor: def.value,
+          borderWidth: 1,
+          borderColor: alpha(primitiveColors.white, 0.08),
+        }}
+      />
+      <View style={{ gap: 2 }}>
+        <Text
+          style={{
+            fontSize: 12,
+            fontWeight: '800',
+            fontFamily: FONT_HEAD,
+            color: t['text-primary'],
+          }}
+        >
+          {def.name}
+        </Text>
+        <Text style={{ fontSize: 10, fontFamily: FONT_MONO, color: t['text-tertiary'] }}>
+          {def.token}
+        </Text>
+        <Text style={{ fontSize: 11, fontFamily: FONT_MONO, color: t['text-secondary'] }}>
+          {def.value.toUpperCase()}
+        </Text>
+        {def.note && (
+          <Text
+            style={{ fontSize: 10, fontFamily: FONT_UI, color: t['text-tertiary'], lineHeight: 13 }}
+          >
+            {def.note}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}
+
+function SwatchGroup({ label, defs }: { label: string; defs: SwatchDef[] }) {
+  return (
+    <View style={{ gap: 12 }}>
+      <Text
+        style={{
+          fontSize: 9,
+          letterSpacing: 1.4,
+          fontFamily: FONT_MONO,
+          color: t['text-tertiary'],
+        }}
+      >
+        {label}
+      </Text>
+      <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+        {defs.map((d) => (
+          <Swatch key={d.token} def={d} />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const CONTROL: SwatchDef[] = [
+  {
+    // eslint-disable-next-line titan/no-raw-color -- 'Silver' is the token's display name, not a CSS colour
+    name: 'Silver',
+    token: 'SILVER · neutral[300]',
+    value: SILVER,
+    note: 'On-track / at-or-above working.',
+  },
+  {
+    name: 'Drift grey',
+    token: 'DRIFT_GREY · neutral[600]',
+    value: DRIFT_GREY,
+    note: 'The dim-silver grey the controlled line dims toward as tempo drifts — same neutral family as SILVER, never a colour.',
+  },
+]
+
+const COLLAPSE: SwatchDef[] = [
+  {
+    name: 'Red light',
+    token: 'RED_LIGHT · red[400]',
+    value: RED_LIGHT,
+    note: 'First flag — collapse just crossed the grind threshold.',
+  },
+  { name: 'Red mid', token: 'RED_MID · red[600]', value: RED_MID, note: 'Sustained collapse.' },
+  {
+    name: 'Red deep',
+    token: 'RED_DEEP · red[800]',
+    value: RED_DEEP,
+    note: 'Full collapse — form breaking down.',
+  },
+]
+
+const PHASE_AXIS: SwatchDef[] = [
+  {
+    name: 'Eccentric',
+    token: 'PHASE_AXIS_COLOR.eccentric · magenta[800]',
+    value: PHASE_AXIS_COLOR.eccentric,
+  },
+  {
+    name: 'Concentric',
+    token: 'PHASE_AXIS_COLOR.concentric · cyan[800]',
+    value: PHASE_AXIS_COLOR.concentric,
+  },
+  {
+    name: 'Idle',
+    token: 'PHASE_AXIS_COLOR.idle · charcoal[300]',
+    value: PHASE_AXIS_COLOR.idle,
+    note: 'Pauses / holds on the phase band.',
+  },
+]
+
+export const Palette: Story = {
+  name: 'Silver-Red Palette',
+  render: () => (
+    <View style={{ padding: 32, backgroundColor: PAGE_BG, minHeight: '100%', gap: 28 }}>
+      <View style={{ gap: 8, maxWidth: 720 }}>
+        <Text
+          style={{
+            fontSize: 9,
+            letterSpacing: 1.4,
+            fontFamily: FONT_MONO,
+            color: t['text-tertiary'],
+          }}
+        >
+          LIVE-FATIGUE · QUALITY COLOUR LANGUAGE
+        </Text>
+        <Text
+          style={{
+            fontSize: 24,
+            fontWeight: '900',
+            fontFamily: FONT_HEAD,
+            color: t['text-primary'],
+          }}
+        >
+          Silver → Red
+        </Text>
+        <Text
+          style={{ fontSize: 13, fontFamily: FONT_UI, color: t['text-secondary'], lineHeight: 19 }}
+        >
+          One language for every quality readout in the family: SILVER when the rep is right
+          (dimming toward DRIFT_GREY with tempo drift), SHADES OF RED when something&apos;s wrong —
+          by severity. No greens, no ambers; those belong to the verdict tones and velocity-loss
+          bands, not here. The phase-axis tones below colour the ghost band (they carry movement
+          phase, not quality).
+        </Text>
+      </View>
+
+      <View style={[{ borderRadius: 14, padding: 24, gap: 24, backgroundColor: PANEL_BG }]}>
+        <SwatchGroup label="CONTROLLED — SILVER" defs={CONTROL} />
+        <SwatchGroup label="COLLAPSE — SHADES OF RED (light → deep by severity)" defs={COLLAPSE} />
+        <SwatchGroup label="PHASE AXIS — ghost band tones" defs={PHASE_AXIS} />
+      </View>
+
+      <Text
+        style={{
+          fontSize: 11,
+          fontFamily: FONT_UI,
+          color: t['text-tertiary'],
+          fontStyle: 'italic',
+        }}
+      >
+        Used by: RomProgressionChart, GhostSpark, DualGhostLine (dual ghost-line). Source of truth:
+        `fatigue-tokens.ts` (SILVER, DRIFT_GREY, RED_LIGHT/MID/DEEP, PHASE_AXIS_COLOR,
+        `ghostLineColor`).
+      </Text>
+    </View>
+  ),
+}

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { VelocityHero } from './VelocityHero'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { MOCK_MEAN_VELOCITIES } from './fatigue-mock'
+
+const PAGE_BG = primitiveColors.charcoal[900]
+const PANEL_BG = primitiveColors.charcoal[800]
+const t = getSemanticColors('dark')
+
+const meta: Meta<typeof VelocityHero> = {
+  title: 'Workout/DataViz/VelocityHero',
+  component: VelocityHero,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The shipped `VelocityStrip` hero with LOSS-RELATIVE VL20/VL30 decision bands layered behind ' +
+          'the bars (on the hero’s own peak scale). The velocity-loss language lives here so the ' +
+          'fatigue card carries no separate VL chart. (Deferred: recolouring the bar FILL loss-relative ' +
+          'needs a new VelocityStrip prop — this component owns the band overlay only.)',
+      },
+    },
+  },
+  argTypes: {
+    targetReps: { control: { type: 'number', min: 1, max: 12 } },
+    height: { control: { type: 'number', min: 160, max: 360, step: 4 } },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VelocityHero>
+
+export const Default: Story = {
+  args: { velocities: MOCK_MEAN_VELOCITIES, targetReps: 8, width: 800, height: 320 },
+  render: (args) => (
+    <View style={{ backgroundColor: PAGE_BG, padding: 28 }}>
+      <View style={{ backgroundColor: PANEL_BG, borderRadius: 12, padding: 16, gap: 10 }}>
+        <Text
+          style={{
+            fontSize: 9,
+            letterSpacing: 1,
+            fontFamily: 'monospace',
+            color: t['text-tertiary'],
+          }}
+        >
+          8-REP SET · bars = per-rep mean concentric velocity · bands = VL decision zones
+        </Text>
+        <VelocityHero {...args} />
+      </View>
+    </View>
+  ),
+}
+
+/** Mid-set — only the reps landed so far, with dashed placeholders for the reps to come. */
+export const MidSet: Story = {
+  render: () => (
+    <View style={{ backgroundColor: PAGE_BG, padding: 28 }}>
+      <View style={{ backgroundColor: PANEL_BG, borderRadius: 12, padding: 16 }}>
+        <VelocityHero
+          velocities={MOCK_MEAN_VELOCITIES.slice(0, 4)}
+          targetReps={8}
+          width={800}
+          height={320}
+        />
+      </View>
+    </View>
+  ),
+}

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

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { VelocityHero } from './VelocityHero'
+import { MOCK_MEAN_VELOCITIES } from './fatigue-mock'
+
+describe('VelocityHero', () => {
+  it('renders the hero container', () => {
+    render(
+      <VelocityHero velocities={MOCK_MEAN_VELOCITIES} targetReps={8} width={800} height={300} />
+    )
+    expect(screen.getByTestId('velocity-hero')).toBeInTheDocument()
+  })
+
+  it('draws the VL20 / VL30 loss bands when there is data', () => {
+    render(
+      <VelocityHero velocities={MOCK_MEAN_VELOCITIES} targetReps={8} width={800} height={300} />
+    )
+    expect(screen.getByText('VL 20%')).toBeInTheDocument()
+    expect(screen.getByText('VL 30%')).toBeInTheDocument()
+  })
+
+  it('draws no bands when there is no data', () => {
+    render(<VelocityHero velocities={[]} width={800} height={300} />)
+    expect(screen.queryByText('VL 20%')).not.toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,46 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * VelocityHero — the primary live read beside the fatigue card: the shipped
+ * {@link VelocityStrip} hero in its loss-relative mode. Both halves of the
+ * loss-relative language now live in VelocityStrip itself — the LOSS bar fill
+ * (`barColor="loss"`, the default) AND the VL20 / VL30 decision bands behind the
+ * bars (`showLossBands`, the {@link VelocityLossBands} primitive). This component
+ * is a thin semantic alias (panel default height + live-rep default) so the
+ * fatigue card can drop in "the velocity hero" without re-specifying the mode.
+ */
+import { View } from 'react-native'
+import { VelocityStrip } from '../Workout/VelocityStrip'
+
+export interface VelocityHeroProps {
+  /** Per-rep MEAN concentric velocity (m/s), ordered by rep. */
+  velocities: number[]
+  /** The set's planned rep count — draws dashed placeholder stubs for reps still to come. */
+  targetReps?: number
+  /** Index of the most-recently-completed rep (the live-rep grow). Defaults to the last performed rep. */
+  liveRepIndex?: number
+  /** Fixed width (standalone). Omit to flex-fill the column (in the panel). */
+  width?: number
+  /** Hero plot height in px. Default 300. */
+  height?: number
+}
+
+export function VelocityHero({
+  velocities,
+  targetReps,
+  liveRepIndex,
+  width,
+  height = 300,
+}: VelocityHeroProps) {
+  return (
+    <View testID="velocity-hero" style={width != null ? { width, height } : { flex: 1, height }}>
+      <VelocityStrip
+        variant="hero"
+        velocities={velocities}
+        liveRepIndex={liveRepIndex ?? velocities.length - 1}
+        targetReps={targetReps}
+        height={height}
+        scale="peak"
+      />
+    </View>
+  )
+}

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { VerdictHero } from './VerdictHero'
+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 VerdictHero> = {
+  title: 'Workout/Fatigue/Verdict Hero',
+  component: VerdictHero,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The card focal read: a big tone-flooded RPE number + the verdict word. RPE-led — no ' +
+          'reps-in-reserve line. `verdict === null` renders a neutral "Warming up".',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VerdictHero>
+
+export const AcrossStates: Story = {
+  render: () => (
+    <View
+      style={{
+        backgroundColor: PAGE_BG,
+        padding: 28,
+        flexDirection: 'row',
+        gap: 40,
+        flexWrap: 'wrap',
+      }}
+    >
+      {[
+        ...FATIGUE_STATES.map((s) => ({ name: s.name, model: s.model })),
+        { name: 'WARMING UP', model: WARMING_UP_MODEL },
+      ].map((s) => (
+        <View key={s.name} style={{ gap: 8, width: 240 }}>
+          <Text
+            style={{
+              fontSize: 9,
+              letterSpacing: 1,
+              fontFamily: 'monospace',
+              color: t['text-tertiary'],
+            }}
+          >
+            {s.name}
+          </Text>
+          <VerdictHero rpe={s.model.rpe} verdict={s.model.verdict} />
+        </View>
+      ))}
+    </View>
+  ),
+}

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

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { VerdictHero } from './VerdictHero'
+import type { FatigueVerdict } from './fatigue-model'
+
+const goodVerdict: FatigueVerdict = {
+  state: 'good',
+  tone: 'ok',
+  dimensions: { velocityLoss: 'ok', rom: 'ok', tempo: 'ok' },
+}
+const breakdown: FatigueVerdict = {
+  state: 'form-breakdown',
+  tone: 'alarm',
+  dimensions: { velocityLoss: 'alarm', rom: 'alarm', tempo: 'alarm' },
+}
+
+describe('VerdictHero', () => {
+  it('rounds the RPE to the conventional 0.5 step', () => {
+    render(<VerdictHero rpe={7.4} verdict={goodVerdict} />)
+    expect(screen.getByText('7.5')).toBeInTheDocument()
+  })
+
+  it('renders the verdict word for the state', () => {
+    render(<VerdictHero rpe={10} verdict={breakdown} />)
+    expect(screen.getByText('Form breaking down')).toBeInTheDocument()
+  })
+
+  it('shows an em-dash and "Warming up" when the verdict is null', () => {
+    render(<VerdictHero rpe={null} verdict={null} />)
+    expect(screen.getByText('—')).toBeInTheDocument()
+    expect(screen.getByText('Warming up')).toBeInTheDocument()
+  })
+
+  it('does not render a reps-in-reserve line (RPE-led only)', () => {
+    render(<VerdictHero rpe={8} verdict={goodVerdict} />)
+    expect(screen.queryByText(/in reserve/i)).not.toBeInTheDocument()
+  })
+
+  it('labels the RPE number for assistive tech', () => {
+    render(<VerdictHero rpe={9} verdict={goodVerdict} />)
+    expect(screen.getByLabelText('RPE 9.0')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<VerdictHero rpe={8} verdict={goodVerdict} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -0,0 +1,79 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+/**
+ * VerdictHero — the fatigue card's single focal read: a big tone-flooded RPE number
+ * beside the aggregated verdict word (Good / Slowing / Grinding / Form breaking
+ * down). Integrated straight into the card (no nested box), in the StopSetDecision
+ * idiom. RPE-LED by design — there is deliberately NO reps-in-reserve line (the card
+ * covers exertion state with the number + word alone).
+ *
+ * Warming up (a cold-start set, `verdict === null`) renders a neutral "Warming up"
+ * with an em-dash RPE.
+ */
+import { View, Text } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { FONT_HEAD, FONT_MONO, TONE_COLOR, STATE_LABEL } from './fatigue-tokens'
+import type { FatigueVerdict } from './fatigue-model'
+
+const t = getSemanticColors('dark')
+
+export interface VerdictHeroProps {
+  /** Exact (unrounded) RPE estimate; rounded to the conventional 0.5 for display. `null` = warming up. */
+  rpe: number | null
+  /** The aggregated verdict + tone. `null` = warming up (renders neutral). */
+  verdict: FatigueVerdict | null
+}
+
+/** Round an exact RPE to the conventional 0.5 step; em-dash when absent. */
+function formatRpe(rpe: number | null): string {
+  if (rpe == null) return '—'
+  return (Math.round(rpe * 2) / 2).toFixed(1)
+}
+
+export function VerdictHero({ rpe, verdict }: VerdictHeroProps) {
+  const tone = verdict ? TONE_COLOR[verdict.tone] : t['text-tertiary']
+  const word = verdict ? STATE_LABEL[verdict.state] : 'Warming up'
+  return (
+    <View style={{ gap: 6 }} testID="verdict-hero">
+      <Text
+        style={{
+          fontSize: 9,
+          letterSpacing: 1.5,
+          fontFamily: FONT_MONO,
+          color: t['text-tertiary'],
+        }}
+      >
+        FATIGUE
+      </Text>
+      <View style={{ gap: 2 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 7 }}>
+          <Text
+            style={{
+              fontSize: 62,
+              fontWeight: '900',
+              fontFamily: FONT_HEAD,
+              color: tone,
+              lineHeight: 60,
+            }}
+            accessibilityLabel={`RPE ${formatRpe(rpe)}`}
+          >
+            {formatRpe(rpe)}
+          </Text>
+          <Text
+            style={{
+              fontSize: 18,
+              fontWeight: '800',
+              color: tone,
+              marginBottom: 9,
+              fontFamily: FONT_HEAD,
+            }}
+          >
+            RPE
+          </Text>
+        </View>
+        <Text style={{ fontSize: 17, fontWeight: '800', fontFamily: FONT_HEAD, color: tone }}>
+          {word}
+        </Text>
+      </View>
+    </View>
+  )
+}

package/src/components/custom/Fatigue/fatigue-mock.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import {
+  buildMockModel,
+  buildMockPanelState,
+  MOCK_PLANNED_REPS,
+  MOCK_MEAN_VELOCITIES,
+  FATIGUE_STATES,
+} from './fatigue-mock'
+
+/**
+ * The panel puts the ROM chart and the velocity strip side by side, and each draws its own
+ * upcoming-rep remainder from a SEPARATE prop. These lock the two to one number — the drift
+ * they prevent is visible on screen as two different rep counts on one panel.
+ */
+describe('buildMockPanelState', () => {
+  it('gives the ROM chart and the velocity strip the SAME planned rep count', () => {
+    const { model, velocity } = buildMockPanelState(2)
+    expect(model.plannedReps).toBe(velocity.targetReps)
+  })
+
+  it('truncates the model and the velocities at the same point', () => {
+    for (const current of [0, 2, 5, 7]) {
+      const { model, velocity } = buildMockPanelState(current)
+      expect(model.romProgression).toHaveLength(current + 1)
+      expect(model.velocityCurves).toHaveLength(current + 1)
+      expect(velocity.velocities).toHaveLength(current + 1)
+      expect(velocity.liveRepIndex).toBe(current)
+    }
+  })
+
+  it('never plans fewer reps than it has performed', () => {
+    for (const s of FATIGUE_STATES) {
+      const { model, velocity } = buildMockPanelState(s.current)
+      expect(model.plannedReps!).toBeGreaterThanOrEqual(model.romProgression.length)
+      expect(velocity.targetReps).toBeGreaterThanOrEqual(velocity.velocities.length)
+    }
+  })
+
+  it('counts the header rep out of the same planned total', () => {
+    const { header } = buildMockPanelState(3)
+    expect(header.meta).toBe(`SET 3 · REP 4 / ${MOCK_PLANNED_REPS}`)
+  })
+
+  it('derives the planned count from the rep data, not a literal', () => {
+    expect(MOCK_PLANNED_REPS).toBe(MOCK_MEAN_VELOCITIES.length)
+  })
+})
+
+describe('buildMockModel plannedReps', () => {
+  it('attaches the mock plan by default', () => {
+    expect(buildMockModel(2).plannedReps).toBe(MOCK_PLANNED_REPS)
+  })
+
+  it('honours an EXPLICIT undefined as "no plan attached"', () => {
+    const model = buildMockModel(2, { plannedReps: undefined })
+    expect(model.plannedReps).toBeUndefined()
+    expect('plannedReps' in model).toBe(true)
+  })
+})