@titan-design/react-ui 0.6.0 → 0.7.0

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

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { VolumeLandmarkBar } from './VolumeLandmarkBar'
+
+const meta: Meta<typeof VolumeLandmarkBar> = {
+  title: 'Workout/DataViz/VolumeLandmarkBar',
+  component: VolumeLandmarkBar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Horizontal weekly-volume bar with MEV / MAV / MRV landmark ticks, a HEAT-scale ' +
+          'fill positioned against the MAV target, and a % readout. Reuses the canonical ' +
+          'BodyMap volume heat scale (under → maintenance → productive → approaching → over).',
+      },
+    },
+  },
+  argTypes: {
+    muscle: { control: 'text', description: 'Muscle group label' },
+    currentSets: {
+      control: { type: 'range', min: 0, max: 30, step: 1 },
+      description: 'Current weekly working sets',
+    },
+    width: { control: 'number', description: 'Track width in px' },
+    trackHeight: { control: 'number', description: 'Track height in px' },
+    scaleMax: { control: 'number', description: 'Upper bound of the track scale (sets)' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, paddingBottom: 40, backgroundColor: '#101010' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof VolumeLandmarkBar>
+
+const LANDMARKS = { mev: 8, mav: 16, mrv: 22 }
+
+export const UnderMEV: Story = {
+  args: { muscle: 'Rear Delts', currentSets: 5, landmarks: LANDMARKS },
+}
+
+export const Maintenance: Story = {
+  args: { muscle: 'Calves', currentSets: 12, landmarks: LANDMARKS },
+}
+
+export const Optimal: Story = {
+  args: { muscle: 'Quads', currentSets: 17, landmarks: LANDMARKS },
+}
+
+export const ApproachingMRV: Story = {
+  args: { muscle: 'Back', currentSets: 21, landmarks: LANDMARKS },
+}
+
+export const OverMRV: Story = {
+  args: { muscle: 'Biceps', currentSets: 26, landmarks: LANDMARKS },
+}
+
+export const AllZones: Story = {
+  render: () => (
+    <View style={{ gap: 28 }}>
+      <VolumeLandmarkBar muscle="Rear Delts" currentSets={5} landmarks={LANDMARKS} />
+      <VolumeLandmarkBar muscle="Calves" currentSets={12} landmarks={LANDMARKS} />
+      <VolumeLandmarkBar muscle="Quads" currentSets={17} landmarks={LANDMARKS} />
+      <VolumeLandmarkBar muscle="Back" currentSets={21} landmarks={LANDMARKS} />
+      <VolumeLandmarkBar muscle="Biceps" currentSets={26} landmarks={LANDMARKS} />
+    </View>
+  ),
+}

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

@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { VolumeLandmarkBar, type VolumeLandmarks } from './VolumeLandmarkBar'
+
+// Clean-number geometry: fraction(v) = v / scaleMax.
+const LANDMARKS: VolumeLandmarks = { mev: 5, mav: 15, mrv: 20 }
+const WIDTH = 200
+const SCALE_MAX = 25
+
+// HEAT scale hexes (WORKOUT_TOKENS.heatmap = divergingScale).
+const HEAT = {
+  under: '#2196F3',
+  maintenance: '#22D3EE',
+  productive: '#58F69E',
+  approaching: '#F9B415',
+  over: '#D14343',
+} as const
+
+function renderBar(currentSets: number, muscle = 'Quads') {
+  return render(
+    <VolumeLandmarkBar
+      muscle={muscle}
+      currentSets={currentSets}
+      landmarks={LANDMARKS}
+      width={WIDTH}
+      scaleMax={SCALE_MAX}
+    />
+  )
+}
+
+describe('VolumeLandmarkBar', () => {
+  it('renders the bar, track (ZoneTrack), and fill', () => {
+    renderBar(10)
+    expect(screen.getByTestId('volume-landmark-bar')).toBeInTheDocument()
+    expect(screen.getByTestId('volume-landmark-track')).toBeInTheDocument()
+    expect(screen.getByTestId('zone-track-fill')).toBeInTheDocument()
+  })
+
+  it('shows the muscle title and % value in the header lockup', () => {
+    renderBar(15, 'Hamstrings')
+    expect(screen.getByText('Hamstrings')).toBeInTheDocument()
+    // 15 sets / 15 MAV = 100%
+    expect(screen.getByTestId('volume-landmark-pct')).toHaveTextContent('100%')
+  })
+
+  it('has the progressbar accessibility role', () => {
+    renderBar(10)
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+  })
+
+  describe('percentage readout (relative to MAV target)', () => {
+    it('renders below-target percentages under 100', () => {
+      renderBar(3) // 3 / 15 = 20%
+      expect(screen.getByTestId('volume-landmark-pct')).toHaveTextContent('20%')
+    })
+    it('renders over-target percentages above 100', () => {
+      renderBar(24) // 24 / 15 = 160%
+      expect(screen.getByTestId('volume-landmark-pct')).toHaveTextContent('160%')
+    })
+  })
+
+  it('renders the MEV / MAV / MRV landmark tick labels', () => {
+    renderBar(10)
+    const labels = screen.getAllByTestId('zone-track-tick-label').map((el) => el.textContent)
+    expect(labels).toEqual(['MEV', 'MAV', 'MRV'])
+  })
+
+  describe('HEAT zone fill color by landmark position', () => {
+    const cases: Array<[number, keyof typeof HEAT]> = [
+      [3, 'under'],
+      [10, 'maintenance'],
+      [16, 'productive'],
+      [18, 'approaching'],
+      [25, 'over'],
+    ]
+    cases.forEach(([sets, zone]) => {
+      it(`is ${zone} at ${sets} sets`, () => {
+        renderBar(sets)
+        expect(screen.getByTestId('zone-track-fill')).toHaveStyle({ backgroundColor: HEAT[zone] })
+      })
+    })
+
+    it('mirrors the fill color in the percentage headline', () => {
+      renderBar(3)
+      expect(screen.getByTestId('volume-landmark-pct')).toHaveStyle({ color: HEAT.under })
+    })
+  })
+
+  it('sizes the fill proportionally (delegated to ZoneTrack)', () => {
+    renderBar(10) // 10 / 25 = 40% of the track
+    expect(screen.getByTestId('zone-track-fill')).toHaveStyle({ width: '40%' })
+  })
+
+  describe('productive-zone glow', () => {
+    it('glows the track in the productive zone', () => {
+      renderBar(16)
+      expect((screen.getByTestId('zone-track-track') as HTMLElement).style.boxShadow).not.toBe('')
+    })
+    it('does not glow outside the productive zone', () => {
+      renderBar(3)
+      expect((screen.getByTestId('zone-track-track') as HTMLElement).style.boxShadow).toBe('')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('describes the muscle, sets, and zone in the label', () => {
+      renderBar(3, 'Calves')
+      expect(
+        screen.getByLabelText('Calves weekly volume: 3 sets, 20% of MAV target, below MEV')
+      ).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = renderBar(16)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,154 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { ZoneTrack } from './ZoneTrack'
+import { DataRow } from '../../ui/data-row/DataRow'
+import type { VolumeLandmarks } from './muscleTaxonomy'
+
+// Reuse the canonical BodyMap volume HEAT scale (the `divergingScale` under →
+// optimal → over) rather than reinventing a fill ramp. Same color language as
+// BodyMap / MesoProgressBar so a muscle reads identically across the app.
+const HEAT = WORKOUT_TOKENS.heatmap
+
+// The muted, un-reached track colour — the same charcoal step ZoneTrack defaults
+// to, so the bar sits on the shared gauge-track surface.
+const NEUTRAL_TRACK = primitiveColors.charcoal[200]
+const MONO = 'monospace'
+
+export type VolumeZone = 'under' | 'maintenance' | 'productive' | 'approaching' | 'over'
+
+// The MEV/MAV/MRV shape is the canonical one from muscleTaxonomy — reused, not
+// redefined, so there is a single source of truth. Re-exported for convenience.
+export type { VolumeLandmarks }
+
+export interface VolumeLandmarkBarProps extends ViewProps {
+  /** Muscle group label shown in the header lockup. */
+  muscle: string
+  /** Current weekly working sets for this muscle group. */
+  currentSets: number
+  /** MEV / MAV / MRV landmark set counts. */
+  landmarks: VolumeLandmarks
+  /** Track width in px (default 220). */
+  width?: number
+  /** Track height in px (default 10). */
+  trackHeight?: number
+  /**
+   * Upper bound of the track scale in sets. Defaults to `mrv` plus 20% headroom
+   * so an over-MRV fill visibly extends past the MRV tick.
+   */
+  scaleMax?: number
+  className?: string
+}
+
+const HEAT_BY_ZONE: Record<VolumeZone, string> = {
+  under: HEAT.under,
+  maintenance: HEAT.maintenance,
+  productive: HEAT.productive,
+  approaching: HEAT.approaching,
+  over: HEAT.over,
+}
+
+const ZONE_DESCRIPTION: Record<VolumeZone, string> = {
+  under: 'below MEV',
+  maintenance: 'building toward MAV',
+  productive: 'in the productive zone',
+  approaching: 'approaching MRV',
+  over: 'over MRV',
+}
+
+const LANDMARK_NAME: Record<'MEV' | 'MAV' | 'MRV', string> = {
+  MEV: 'Minimum Effective Volume',
+  MAV: 'Maximum Adaptive Volume',
+  MRV: 'Maximum Recoverable Volume',
+}
+
+/** Map weekly sets against the three landmarks to a diverging HEAT zone. */
+function zoneForSets(sets: number, { mev, mav, mrv }: VolumeLandmarks): VolumeZone {
+  if (sets < mev) return 'under'
+  if (sets < mav) return 'maintenance'
+  if (sets >= mrv) return 'over'
+  // Between MAV and MRV: lower half is the optimal productive band, upper half
+  // approaches the recoverable ceiling.
+  const midpoint = (mav + mrv) / 2
+  return sets < midpoint ? 'productive' : 'approaching'
+}
+
+/**
+ * Horizontal weekly-volume bar with MEV / MAV / MRV landmark ticks and a HEAT-scale
+ * fill positioned against the MAV target. Composes the shared {@link ZoneTrack}
+ * gauge primitive (track + active-zone fill + colored/tooltip landmark ticks; glows
+ * when in the productive zone) and a {@link DataRow} header lockup (muscle title +
+ * current % at matched type height). The tick acronyms expand to their full name +
+ * raw set count on hover/long-press, keeping the footer light. Reuses the canonical
+ * BodyMap volume heat scale so a muscle's status reads the same as in the body map.
+ *
+ * @example
+ * <VolumeLandmarkBar muscle="Quads" currentSets={16} landmarks={{ mev: 8, mav: 16, mrv: 22 }} />
+ */
+export function VolumeLandmarkBar({
+  muscle,
+  currentSets,
+  landmarks,
+  width = 220,
+  trackHeight = 10,
+  scaleMax,
+  className,
+  style,
+  ...props
+}: VolumeLandmarkBarProps) {
+  const { mev, mav, mrv } = landmarks
+  const max = scaleMax ?? mrv * 1.2
+  const zone = zoneForSets(currentSets, landmarks)
+  const fillColor = HEAT_BY_ZONE[zone]
+  const pct = mav > 0 ? Math.round((currentSets / mav) * 100) : 0
+
+  return (
+    <View
+      className={className}
+      style={[{ width, gap: 3 }, style]}
+      testID="volume-landmark-bar"
+      {...props}
+    >
+      <DataRow
+        label={muscle}
+        value={
+          <Text
+            testID="volume-landmark-pct"
+            style={{ fontSize: 14, fontWeight: '700', fontFamily: MONO, color: fillColor }}
+          >
+            {pct}%
+          </Text>
+        }
+        className="py-0"
+        testID="volume-landmark-header"
+      />
+
+      <ZoneTrack
+        zones={[{ upTo: max, color: NEUTRAL_TRACK }]}
+        max={max}
+        marker={{
+          type: 'fill',
+          value: currentSets,
+          color: fillColor,
+          // Glow when in the optimal productive band — the "sweet spot" cue.
+          glow: zone === 'productive',
+        }}
+        trackColor={NEUTRAL_TRACK}
+        trackHeight={trackHeight}
+        ticks={[
+          { value: mev, label: 'MEV', tooltip: `${LANDMARK_NAME.MEV} · ${mev} sets/wk` },
+          {
+            value: mav,
+            label: 'MAV',
+            emphasized: true,
+            tooltip: `${LANDMARK_NAME.MAV} (target) · ${mav} sets/wk`,
+          },
+          { value: mrv, label: 'MRV', tooltip: `${LANDMARK_NAME.MRV} · ${mrv} sets/wk` },
+        ]}
+        accessibilityLabel={`${muscle} weekly volume: ${currentSets} sets, ${pct}% of MAV target, ${ZONE_DESCRIPTION[zone]}`}
+        testID="volume-landmark-track"
+      />
+    </View>
+  )
+}

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { WeekRow } from './WeekRow'
 
 const meta: Meta<typeof WeekRow> = {
-  title: 'Custom/Workout/WeekRow',
+  title: 'Workout/WeekRow',
   component: WeekRow,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { WeightBadge } from './WeightBadge'
 
 const meta: Meta<typeof WeightBadge> = {
-  title: 'Custom/Workout/WeightBadge',
+  title: 'Components/Atoms/WeightBadge',
   component: WeightBadge,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,7 +4,7 @@ import { WorkoutCard } from './WorkoutCard'
 import type { ExerciseCardProps } from './ExerciseCard'
 
 const meta: Meta<typeof WorkoutCard> = {
-  title: 'Custom/Workout/WorkoutCard',
+  title: 'Workout/WorkoutCard',
   component: WorkoutCard,
   tags: ['autodocs'],
   argTypes: {
@@ -38,10 +38,7 @@ type Story = StoryObj<typeof WorkoutCard>
 const sampleExercises: ExerciseCardProps[] = [
   {
     name: 'Bench Press',
-    state: 'collapsed',
-    onToggle: () => {},
     summary: { sets: 3, reps: 8, weight: 175, unit: 'lbs' },
-    e1rm: { value: 225, unit: 'lbs' },
     setVelocities: [
       [1.1, 0.95, 0.82],
       [0.95, 0.88, 0.78],
@@ -50,8 +47,7 @@ const sampleExercises: ExerciseCardProps[] = [
   },
   {
     name: 'Incline DB Press',
-    state: 'upcoming',
-    onToggle: () => {},
+    upcoming: true,
     prescription: '3×10-12 @ RPE 8',
     previousBest: '70 lbs × 11',
   },

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

@@ -19,14 +19,11 @@ const baseProps: WorkoutCardProps = {
 const exercises: ExerciseCardProps[] = [
   {
     name: 'Bench Press',
-    state: 'collapsed',
-    onToggle: () => {},
     summary: { sets: 3, reps: 8, weight: 175, unit: 'lbs' },
   },
   {
     name: 'Row',
-    state: 'upcoming',
-    onToggle: () => {},
+    upcoming: true,
     prescription: '3×10 @ RPE 8',
   },
 ]
@@ -35,40 +32,28 @@ describe('WorkoutCard', () => {
   describe('rendering', () => {
     it('renders name and date', () => {
       render(<WorkoutCard {...baseProps} />)
-      expect(screen.getByTestId('workout-card-name')).toHaveTextContent(
-        'Upper A',
-      )
-      expect(screen.getByTestId('workout-card-date')).toHaveTextContent(
-        'Mon, Jun 23',
-      )
+      expect(screen.getByTestId('workout-card-name')).toHaveTextContent('Upper A')
+      expect(screen.getByTestId('workout-card-date')).toHaveTextContent('Mon, Jun 23')
     })
 
     it('renders the set count in the stats row', () => {
       render(<WorkoutCard {...baseProps} />)
-      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent(
-        '18 sets',
-      )
+      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent('18 sets')
     })
 
     it('includes duration in stats when provided', () => {
       render(<WorkoutCard {...baseProps} duration="45 min" />)
-      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent(
-        '45 min',
-      )
+      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent('45 min')
     })
 
     it('includes total volume with unit when provided', () => {
       render(<WorkoutCard {...baseProps} totalVolume={12450} unit="lbs" />)
-      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent(
-        '12450 lbs',
-      )
+      expect(screen.getByTestId('workout-card-stats')).toHaveTextContent('12450 lbs')
     })
 
     it('omits volume from stats when not provided', () => {
       render(<WorkoutCard {...baseProps} />)
-      expect(screen.getByTestId('workout-card-stats')).not.toHaveTextContent(
-        'lbs',
-      )
+      expect(screen.getByTestId('workout-card-stats')).not.toHaveTextContent('lbs')
     })
   })
 
@@ -87,38 +72,22 @@ describe('WorkoutCard', () => {
 
     it('does not render the muscle group row when empty', () => {
       render(<WorkoutCard {...baseProps} muscleGroups={[]} />)
-      expect(
-        screen.queryByTestId('workout-card-muscle-groups'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('workout-card-muscle-groups')).not.toBeInTheDocument()
     })
   })
 
   describe('expansion', () => {
     it('renders exercises when expanded', () => {
-      render(
-        <WorkoutCard
-          {...baseProps}
-          expanded
-          onToggle={() => {}}
-          exercises={exercises}
-        />,
-      )
+      render(<WorkoutCard {...baseProps} expanded onToggle={() => {}} exercises={exercises} />)
       expect(screen.getByTestId('workout-card-exercises')).toBeInTheDocument()
       expect(screen.getAllByTestId('exercise-card')).toHaveLength(2)
     })
 
     it('does not render exercises when collapsed', () => {
       render(
-        <WorkoutCard
-          {...baseProps}
-          expanded={false}
-          onToggle={() => {}}
-          exercises={exercises}
-        />,
+        <WorkoutCard {...baseProps} expanded={false} onToggle={() => {}} exercises={exercises} />
       )
-      expect(
-        screen.queryByTestId('workout-card-exercises'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('workout-card-exercises')).not.toBeInTheDocument()
     })
 
     it('calls onToggle when pressed', () => {
@@ -145,9 +114,7 @@ describe('WorkoutCard', () => {
 
   describe('accessibility', () => {
     it('exposes button role and expanded state when expandable', () => {
-      render(
-        <WorkoutCard {...baseProps} expanded onToggle={() => {}} />,
-      )
+      render(<WorkoutCard {...baseProps} expanded onToggle={() => {}} />)
       const card = screen.getByRole('button', {
         name: 'Upper A workout, Mon, Jun 23, today',
       })
@@ -163,7 +130,7 @@ describe('WorkoutCard', () => {
           onToggle={() => {}}
           expanded
           exercises={exercises}
-        />,
+        />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { WorkoutPill } from './WorkoutPill'
 
 const meta: Meta<typeof WorkoutPill> = {
-  title: 'Custom/Workout/WorkoutPill',
+  title: 'Workout/WorkoutPill',
   component: WorkoutPill,
   tags: ['autodocs'],
   argTypes: {

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

@@ -0,0 +1,140 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { ZoneTrack, type ZoneTrackZone } from './ZoneTrack'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+
+const { green, yellow, orange, red } = WORKOUT_TOKENS.scale
+
+const FATIGUE_ZONES: ZoneTrackZone[] = [
+  { upTo: 10, color: green },
+  { upTo: 20, color: yellow },
+  { upTo: 30, color: orange },
+  { upTo: 40, color: red },
+]
+
+const FATIGUE_TICKS = [
+  { value: 0, label: 'fresh' },
+  { value: 10, label: 'VL10' },
+  { value: 20, label: 'VL20' },
+  { value: 30, label: 'VL30' },
+  { value: 40, label: 'stop' },
+]
+
+const meta: Meta<typeof ZoneTrack> = {
+  title: 'Workout/DataViz/ZoneTrack',
+  component: ZoneTrack,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Primitive.** The shared linear-gauge base: a pill track with an N-band zone ' +
+          'gradient, optional tick marks + labels, and a single value marker — a `needle` line ' +
+          'or a left-anchored `fill` (clip-reveal gradient, or solid trend colour). Used-by ↓ ' +
+          '[FatigueMeter](?path=/docs/workout-dataviz-fatiguemeter--docs); the target base for ' +
+          'TrainingLoadGauge (ACWR) + RpeCalibration (band + marker). Zone colours are literal ' +
+          'ramp-token hex.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 360, padding: 20, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof ZoneTrack>
+
+/** Needle over the fatigue gradient with the VL scale — the FatigueMeter shape. */
+export const Needle: Story = {
+  args: {
+    zones: FATIGUE_ZONES,
+    max: 40,
+    marker: { type: 'needle', value: 21 },
+    ticks: FATIGUE_TICKS,
+  },
+}
+
+/** Fill marker without a colour clip-reveals the gradient up to the value. */
+export const GradientFill: Story = {
+  args: {
+    zones: FATIGUE_ZONES,
+    max: 40,
+    marker: { type: 'fill', value: 24 },
+    ticks: FATIGUE_TICKS,
+  },
+}
+
+/** Fill marker with a colour paints a solid trend-coloured bar (FatigueGauge lineage). */
+export const SolidTrendFill: Story = {
+  args: { zones: FATIGUE_ZONES, max: 40, marker: { type: 'fill', value: 24, color: orange } },
+}
+
+/** A range highlight + needle — the RpeCalibration "predicted CI band vs actual" idiom. */
+export const BandWithMarker: Story = {
+  args: {
+    zones: [
+      { upTo: 7, color: green },
+      { upTo: 8.5, color: yellow },
+      { upTo: 10, color: red },
+    ],
+    min: 6,
+    max: 10,
+    band: { from: 7.2, to: 8.4, color: 'rgba(255,255,255,0.22)' },
+    marker: { type: 'needle', value: 8.1 },
+    ticks: [
+      { value: 6, label: '6' },
+      { value: 7, label: '7' },
+      { value: 8, label: '8' },
+      { value: 9, label: '9' },
+      { value: 10, label: '10' },
+    ],
+  },
+}
+
+/** Bare gradient track — no marker, no ticks. */
+export const BareTrack: Story = {
+  args: { zones: FATIGUE_ZONES, max: 40 },
+}
+
+/** Chunky wall-glanceable density via a taller track. */
+export const WallDensity: Story = {
+  args: {
+    zones: FATIGUE_ZONES,
+    max: 40,
+    marker: { type: 'needle', value: 15 },
+    ticks: FATIGUE_TICKS,
+    trackHeight: 22,
+    needleOverhang: 9,
+  },
+}
+
+/** `marker.glow` haloes the whole track in the marker colour — a "sweet spot" / attention cue. */
+export const Glow: Story = {
+  args: {
+    zones: FATIGUE_ZONES,
+    max: 40,
+    marker: { type: 'fill', value: 20, color: green, glow: true },
+    trackHeight: 12,
+  },
+}
+
+/** Colored + emphasized ticks with tooltips — hover a label to expand the acronym / show the raw value. */
+export const ColoredTooltipTicks: Story = {
+  args: {
+    zones: FATIGUE_ZONES,
+    max: 40,
+    marker: { type: 'needle', value: 22 },
+    trackHeight: 12,
+    ticks: [
+      { value: 10, label: 'VL10', tooltip: '10% velocity loss' },
+      { value: 20, label: 'VL20', emphasized: true, tooltip: '20% velocity loss — threshold' },
+      { value: 30, label: 'STOP', color: red, tooltip: '30% velocity loss — stop the set' },
+    ],
+  },
+}