@titan-design/react-ui 0.5.0 → 0.7.0

package/src/components/custom/Workout/VelocityStrip.modalities.stories.tsx

@@ -0,0 +1,254 @@
+/**
+ * Set modalities — every per-rep strength set-type rendered by the REAL
+ * {@link VelocityStrip}. One strip model for every set type: it defaults to the
+ * target rep count as grey slots, overshoot grows the strip, and open-ended sets
+ * (AMRAP · the myo tail) carry a persistent cyan "continue" slot. Each card
+ * carries a `Collapse` accordion showing how to configure the `set` prop for that
+ * view. Promoted from the Lab/Explorations "Set Modalities" specimen once the
+ * vocabulary hardened into VelocityStrip's `set` descriptor.
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { VelocityStrip, type VelocitySet } from './VelocityStrip'
+import { Collapse, CollapseButton, CollapseContent } from '../../ui/collapse/Collapse'
+import { SET_STRIP_VARIABLE_COLOR as CYAN } from './SetStrip'
+import {
+  GREY,
+  velColor,
+  T_PRIMARY,
+  T_SECONDARY,
+  T_TERTIARY,
+  INSET,
+  BORDER_SUBTLE,
+  Page,
+} from './setHeadingKit'
+
+const INTER = 'Inter, sans-serif'
+const VAR_EDGE = '#22465F' // cyan-800 — the continue-slot outline
+const CYAN_TEXT = '#22D3EE'
+
+/** Pretty-print a value as a compact TS literal (single-line arrays). */
+function formatValue(value: unknown): string {
+  if (Array.isArray(value)) {
+    if (value.length > 0 && Array.isArray(value[0])) {
+      return `[${value.map((v) => formatValue(v)).join(', ')}]`
+    }
+    return `[${(value as number[]).join(', ')}]`
+  }
+  return typeof value === 'string' ? `'${value}'` : String(value)
+}
+
+/** The exact `set` prop, pretty-printed as a TS object for the accordion. */
+function formatSet(set: VelocitySet): string {
+  const body = Object.entries(set)
+    .map(([key, value]) => `  ${key}: ${formatValue(value)},`)
+    .join('\n')
+  return `set={{\n${body}\n}}`
+}
+
+type Modality = {
+  name: string
+  alias: string
+  tags: string[]
+  def: string
+  useWhen: string
+  set: VelocitySet
+}
+
+// Representative velocities per colour bucket, matching the exploration's VEL map
+// (g/a/o/r → the real velColor() ramp: fastest green → slowest red).
+const G = 1.1
+const A = 0.85
+const O = 0.6
+const R = 0.4
+
+const MODS: Modality[] = [
+  {
+    name: 'Straight set',
+    alias: '3 × 10',
+    tags: ['fixed reps'],
+    def: 'A fixed number of reps at a fixed load — the baseline every other type varies from. Done reps colour; the remainder to the planned count sits grey.',
+    useWhen: 'A prescribed rep count at a fixed load — the default set.',
+    set: { type: 'straight', velocities: [G, A, A, O, O, R], planned: 10 },
+  },
+  {
+    name: 'Rep-range',
+    alias: '8–12',
+    tags: ['bounded reps'],
+    def: 'A floor and a ceiling — committed reps to the floor (grey todo), then a variable window (cyan) to the ceiling. A done variable rep is a real rep and colours normally.',
+    useWhen: 'A hypertrophy set prescribed as a range (e.g. 8–12) rather than a fixed count.',
+    set: { type: 'range', velocities: [G, A, A, O, O, O, R, R, A], floor: 8, max: 12 },
+  },
+  {
+    name: 'AMRAP',
+    alias: 'as many reps as possible',
+    tags: ['open-ended'],
+    def: 'One set, no cap — the target is a floor to beat. Velocity decay is the story; the trailing cyan slot never closes.',
+    useWhen: 'A final "leave nothing" set, or a rep-out test where the count is the outcome.',
+    set: { type: 'amrap', velocities: [G, G, A, A, O, O, O, R, R, R], target: 8 },
+  },
+  {
+    name: 'Drop set',
+    alias: 'strip / dropset',
+    tags: ['load drops', 'open-ended'],
+    def: 'Reps to failure at a load, then DROP the load (no rest) and continue — 1–3 drops. Sub-loads split by a WIDE notch gap.',
+    useWhen: 'Extending a set past failure by shedding load — the notch marks each weight drop.',
+    set: { type: 'drop', subloads: [[G, A, O, O, R], [A, O, R], [O, R]] },
+  },
+  {
+    name: 'Myo-reps',
+    alias: 'rest-pause',
+    tags: ['clusters', 'open-ended'],
+    def: 'Activation set to near-failure, then rest-pause mini-clusters at the SAME load until a cluster fails. Open tail → cyan continue.',
+    useWhen: 'High-density hypertrophy: one activation set milked for extra clusters.',
+    set: { type: 'myo', activation: [G, A, A, O, O, R], clusters: [[A, O, R], [O, R]], open: true },
+  },
+  {
+    name: 'Cluster set',
+    alias: 'intra-set rest',
+    tags: ['fixed reps', 'intra-rest'],
+    def: 'A fixed rep count at a HIGH load, broken by short intra-set rests so every rep stays fast — power, not failure. Fixed count → no cyan tail.',
+    useWhen: 'Strength/power work where each rep must stay fast; rests are planned, count is fixed.',
+    set: { type: 'cluster', velocities: [G, G, G, A, G, G, A, G], groupSize: 2, planned: 10 },
+  },
+]
+
+function tagStyle(open: boolean) {
+  return {
+    fontFamily: INTER,
+    fontSize: 10,
+    fontWeight: '600' as const,
+    letterSpacing: 0.5,
+    textTransform: 'uppercase' as const,
+    color: open ? CYAN_TEXT : T_TERTIARY,
+    borderWidth: 1,
+    borderColor: open ? VAR_EDGE : '#2A2A2E',
+    borderRadius: 999,
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    overflow: 'hidden' as const,
+  }
+}
+
+function ConfigAccordion({ set, useWhen }: { set: VelocitySet; useWhen: string }) {
+  return (
+    <Collapse>
+      <CollapseButton className="px-0 py-2 rounded-none">
+        <Text style={{ fontFamily: INTER, fontSize: 11, fontWeight: '700', letterSpacing: 0.4, color: CYAN_TEXT }}>
+          How to configure this view
+        </Text>
+      </CollapseButton>
+      <CollapseContent className="px-0">
+        <View style={{ backgroundColor: '#0A0A0A', borderWidth: 1, borderColor: '#2A2A2E', borderRadius: 8, padding: 12, gap: 8 }}>
+          <Text style={{ fontFamily: 'monospace', fontSize: 11, lineHeight: 17, color: T_SECONDARY }}>
+            {`<VelocityStrip\n  variant="mini"\n  ${formatSet(set).replace(/\n/g, '\n  ')}\n/>`}
+          </Text>
+          <Text style={{ fontFamily: INTER, fontSize: 12, color: T_TERTIARY, lineHeight: 17 }}>
+            Use when: {useWhen}
+          </Text>
+        </View>
+      </CollapseContent>
+    </Collapse>
+  )
+}
+
+function Card({ m }: { m: Modality }) {
+  return (
+    <View style={{ backgroundColor: INSET, borderWidth: 1, borderColor: '#2A2A2E', borderRadius: 12, padding: 18, gap: 12, width: 460 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
+        <Text style={{ fontFamily: INTER, fontSize: 16, fontWeight: '700', color: T_PRIMARY }}>
+          {m.name} <Text style={{ fontSize: 12, fontWeight: '500', color: T_TERTIARY }}>{m.alias}</Text>
+        </Text>
+        <View style={{ flexDirection: 'row', gap: 6 }}>
+          {m.tags.map((t) => {
+            const open = /open-ended/.test(t)
+            return (
+              <Text key={t} style={tagStyle(open)}>
+                {t}
+              </Text>
+            )
+          })}
+        </View>
+      </View>
+      <Text style={{ fontFamily: INTER, fontSize: 13, color: T_SECONDARY, lineHeight: 19 }}>{m.def}</Text>
+      <View style={{ paddingVertical: 6 }}>
+        <VelocityStrip variant="mini" set={m.set} />
+      </View>
+      <View style={{ height: 1, backgroundColor: BORDER_SUBTLE }} />
+      <ConfigAccordion set={m.set} useWhen={m.useWhen} />
+    </View>
+  )
+}
+
+function Principle({ k, title, body }: { k: string; title: string; body: string }) {
+  return (
+    <View style={{ flex: 1, backgroundColor: INSET, borderWidth: 1, borderColor: '#2A2A2E', borderRadius: 10, padding: 16, gap: 7, minWidth: 220 }}>
+      <Text style={{ fontFamily: INTER, fontSize: 10, fontWeight: '600', letterSpacing: 1.2, textTransform: 'uppercase', color: CYAN_TEXT }}>{k}</Text>
+      <Text style={{ fontFamily: INTER, fontSize: 14, fontWeight: '600', color: T_PRIMARY }}>{title}</Text>
+      <Text style={{ fontFamily: INTER, fontSize: 12.5, color: T_SECONDARY, lineHeight: 18 }}>{body}</Text>
+    </View>
+  )
+}
+
+function Swatch({ color, label, outlined }: { color: string; label: string; outlined?: boolean }) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 7 }}>
+      <View style={{ width: 22, height: 10, borderRadius: 2, backgroundColor: color, ...(outlined ? { borderWidth: 1, borderColor: VAR_EDGE } : {}) }} />
+      <Text style={{ fontFamily: INTER, fontSize: 12, color: T_SECONDARY }}>{label}</Text>
+    </View>
+  )
+}
+
+const meta: Meta = {
+  title: 'Workout/DataViz/VelocityStrip/Set Modalities',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+type Story = StoryObj
+
+export const StripVocabulary: Story = {
+  name: 'One strip vocabulary · every set type',
+  render: () => (
+    <Page
+      title="Set modalities — the VelocityStrip set-type vocabulary"
+      note="Every per-rep strength set-type, rendered by the real VelocityStrip via its `set` prop. One strip model: defaults to the target rep count (grey slots) · overshoot grows the strip · open-ended sets (AMRAP · the myo tail) carry a persistent cyan 'continue' slot. Real velocity colours + the cyan variable token. Open each card's accordion for the exact `set` configuration and a 'use when' note."
+    >
+      <View style={{ flexDirection: 'row', gap: 14, flexWrap: 'wrap', maxWidth: 940 }}>
+        <Principle k="default" title="Target reps as slots" body="A set opens as N grey placeholder slots — the prescribed count. Each done rep fills its slot with its velocity colour." />
+        <Principle k="overshoot" title="Extra reps grow it" body="Beat the prescription and the strip keeps adding slots. The plan is a floor to draw against, not a cap." />
+        <Principle k="open-ended" title="A cyan continue tail" body="AMRAP and the myo tail carry a persistent cyan slot; new reps insert before it — it argues 'there's more'." />
+      </View>
+
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 14, alignItems: 'center', marginTop: 4 }}>
+        <Swatch color={velColor(G)} label="fastest" />
+        <Swatch color={velColor(A)} label="fast" />
+        <Swatch color={velColor(O)} label="moderate" />
+        <Swatch color={velColor(R)} label="slow" />
+        <Swatch color={GREY} label="planned / to-do" />
+        <Swatch color={CYAN} label="variable · continue" outlined />
+      </View>
+
+      <View style={{ height: 1, backgroundColor: BORDER_SUBTLE, marginVertical: 4 }} />
+
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+        {MODS.map((m) => (
+          <Card key={m.name} m={m} />
+        ))}
+      </View>
+    </Page>
+  ),
+}
+
+export const ActiveSetExpanded: Story = {
+  name: 'Straight set · expanded spotlight',
+  render: () => (
+    <Page
+      title="Straight set — the expanded active-set spotlight"
+      note="The expanded VelocityStrip for a live straight set: done reps as velocity-height bars, the planned remainder as short grey stubs, and the mean · loss summary derived from the done reps."
+    >
+      <View style={{ width: 520, gap: 10 }}>
+        <VelocityStrip set={{ type: 'straight', velocities: [1.12, 1.05, 0.98, 0.9, 0.82, 0.7], planned: 10 }} expanded />
+      </View>
+    </Page>
+  ),
+}

package/src/components/custom/Workout/VelocityStrip.responsive.stories.tsx

@@ -0,0 +1,145 @@
+/**
+ * Notch across widths — the between-group notch (drop sub-loads / myo clusters /
+ * cluster intra-rests) is a fixed 8px gap, held constant at every strip width. This
+ * page renders the real {@link VelocityStrip} across a ladder of widths (session-rail
+ * → wall dashboard) and across rep / rep-grouping counts, so the notch can be judged
+ * at the size it will actually ship at. Same set, stacked and left-aligned across
+ * widths: the notch stays put while the bars grow, so it reads as a group break at
+ * rail scale without ballooning at wall scale.
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { VelocityStrip, type VelocitySet } from './VelocityStrip'
+import { T_PRIMARY, T_SECONDARY, T_TERTIARY, INSET, BORDER_SUBTLE, Page } from './setHeadingKit'
+
+const INTER = 'Inter, sans-serif'
+const MONO = 'monospace'
+
+// The width ladder: a session-rail row, two mid app widths, a modality card, a wall
+// dashboard. These bracket everywhere the strip renders.
+const WIDTHS = [130, 200, 300, 440, 620] as const
+
+// Preview height — the production mini strip is 3px tall; shown a touch taller here so
+// the horizontal notch is legible on screen. Width (the axis under test) is untouched.
+const PREVIEW_HEIGHT = 8
+
+// Velocity colour buckets (match the modalities exploration: fastest green → slowest red).
+const G = 1.1
+const A = 0.85
+const O = 0.6
+const R = 0.4
+
+/** A descending velocity ramp of length n (1.15 → 0.40), for realistic fatigue. */
+function ramp(n: number): number[] {
+  if (n <= 1) return [G]
+  return Array.from({ length: n }, (_, i) => {
+    const t = i / (n - 1)
+    return Math.round((1.15 - t * 0.75) * 100) / 100
+  })
+}
+
+type Config = { name: string; detail: string; set: VelocitySet }
+
+const CONFIGS: Config[] = [
+  {
+    name: 'Straight · 5',
+    detail: '5 reps · one group · no notch',
+    set: { type: 'straight', velocities: [G, A, A, O, R], planned: 5 },
+  },
+  {
+    name: 'Straight · 12',
+    detail: '12 reps · one group · no notch',
+    set: { type: 'straight', velocities: ramp(12), planned: 12 },
+  },
+  {
+    name: 'Drop · 3 loads',
+    detail: '3 groups (5 / 3 / 2) · 2 notches',
+    set: { type: 'drop', subloads: [[G, A, O, O, R], [A, O, R], [O, R]] },
+  },
+  {
+    name: 'Cluster · groups of 2',
+    detail: '10 reps · 5 groups · 4 notches',
+    set: { type: 'cluster', velocities: ramp(10), groupSize: 2, planned: 10 },
+  },
+  {
+    name: 'Cluster · groups of 3',
+    detail: '15 reps · 5 groups · 4 notches (dense)',
+    set: { type: 'cluster', velocities: ramp(15), groupSize: 3, planned: 15 },
+  },
+  {
+    name: 'Myo · open',
+    detail: 'activation + 2 clusters · 2 notches + cyan tail',
+    set: { type: 'myo', activation: [G, A, A, O, O, R], clusters: [[A, O, R], [O, R]], open: true },
+  },
+]
+
+function WidthRow({ set, width }: { set: VelocitySet; width: number }) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+      <Text style={{ fontFamily: MONO, fontSize: 10, color: T_TERTIARY, width: 44, textAlign: 'right' }}>
+        {width}px
+      </Text>
+      <View style={{ width }}>
+        <VelocityStrip variant="mini" set={set} style={{ height: PREVIEW_HEIGHT }} />
+      </View>
+    </View>
+  )
+}
+
+function ConfigPanel({ c }: { c: Config }) {
+  return (
+    <View
+      style={{
+        backgroundColor: INSET,
+        borderWidth: 1,
+        borderColor: '#2A2A2E',
+        borderRadius: 12,
+        padding: 18,
+        gap: 14,
+        width: 620 + 44 + 12 + 36, // widest strip + label col + gap + panel padding
+      }}
+    >
+      <View style={{ gap: 3 }}>
+        <Text style={{ fontFamily: INTER, fontSize: 15, fontWeight: '700', color: T_PRIMARY }}>{c.name}</Text>
+        <Text style={{ fontFamily: INTER, fontSize: 12, color: T_TERTIARY }}>{c.detail}</Text>
+      </View>
+      <View style={{ height: 1, backgroundColor: BORDER_SUBTLE }} />
+      <View style={{ gap: 12 }}>
+        {WIDTHS.map((w) => (
+          <WidthRow key={w} set={c.set} width={w} />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const meta: Meta = {
+  title: 'Workout/DataViz/VelocityStrip/Responsive Width',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+type Story = StoryObj
+
+export const NotchAcrossWidths: Story = {
+  name: 'Between-group notch · across widths',
+  render: () => (
+    <Page
+      title="Notch across widths — a fixed 8px group break"
+      note="The notch that separates drop sub-loads, myo clusters and cluster intra-rests is a fixed 8px gap, held constant at every strip width — so it reads as a group break at session-rail scale AND at wall-dashboard scale without ballooning as the strip grows. Each panel is one set type, stacked and left-aligned across the width ladder (130px rail → 620px wall); both the 2px rep gap and the 8px notch hold fixed while only the bars grow. Straight sets carry no notch (baseline). Preview strips are shown at 8px tall for legibility; the production mini strip is 3px."
+    >
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 18 }}>
+        {CONFIGS.map((c) => (
+          <ConfigPanel key={c.name} c={c} />
+        ))}
+      </View>
+
+      <Text style={{ fontFamily: INTER, fontSize: 12.5, color: T_SECONDARY, lineHeight: 19, maxWidth: 760, marginTop: 4 }}>
+        Reading the ladder: the notch holds at 8px everywhere, so at rail scale it is a clear group break
+        (4× the rep gap) and at wall scale it stays a tidy break rather than a canyon. Watch the dense
+        cluster (groups of 3, 15 reps): even where the bars are thin, the 8px notch separates groups without
+        a proportional gap swallowing the strip at large sizes. The single knob is WIDE_GAP in
+        VelocityStrip.tsx.
+      </Text>
+    </Page>
+  ),
+}

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

@@ -1,26 +1,61 @@
 import { useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
+import { View, Text } from 'react-native'
 import { VelocityStrip } from './VelocityStrip'
 
 const meta: Meta<typeof VelocityStrip> = {
-  title: 'Custom/Workout/VelocityStrip',
+  title: 'Workout/DataViz/VelocityStrip',
   component: VelocityStrip,
   tags: ['autodocs'],
-  argTypes: {
-    expanded: {
-      control: 'boolean',
-      description: 'Whether the strip is expanded into a bar chart',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Per-rep velocity strip. Two variants: `mini` (a flat 3px static strip) and `expanded` ' +
+          '(the velocity-HEIGHT bar chart, rounded tops). The `expanded` chrome is prop-driven — ' +
+          'with `showNumbers`/`showInfo` on it is the framed chart (raised surface, per-bar m/s ' +
+          'labels, mean/loss info row, interactive tap-to-expand); with both off it is a bare strip, ' +
+          'the active-set spotlight. `height` sets the plot height; `scale` is `peak` (to the set max) ' +
+          'or `fixed` (a fixed ceiling, cross-set-comparable). Feed either `velocities` or a `set` ' +
+          'descriptor (set-type aware — see the ' +
+          '[modalities](?path=/docs/workout-dataviz-velocitystrip-modalities--docs) sheet).',
+      },
     },
+  },
+  argTypes: {
     variant: {
       control: 'select',
-      options: ['full', 'mini'],
+      options: ['mini', 'expanded'],
       description: 'Display variant',
     },
+    expanded: {
+      control: 'boolean',
+      description: 'expanded (framed): whether the chart is open (toggle for tap-to-expand)',
+    },
+    showNumbers: {
+      control: 'boolean',
+      description: 'expanded framed chart: per-bar m/s labels (default true)',
+    },
     showInfo: {
       control: 'boolean',
-      description: 'Whether to show the info row (zone name + loss %) in expanded mode',
+      description: 'expanded framed chart: the mean/loss info row (default true)',
+    },
+    height: {
+      control: { type: 'number', min: 12, max: 96, step: 2 },
+      description: 'expanded plot height in px (bars scale to this). Default 60.',
+    },
+    scale: {
+      control: 'inline-radio',
+      options: ['peak', 'fixed'],
+      description: 'expanded bar scaling: peak (set max) or fixed (cross-set ceiling)',
     },
+    liveRepIndex: {
+      control: 'number',
+      description:
+        'expanded framed chart: index of the newest rep to animate (pop / new-peak bounce)',
+    },
+    set: { control: false, description: 'Structured set descriptor (supersedes `velocities`)' },
+    zones: { control: false, description: 'Velocity-zone bands (WA); default scale when absent' },
   },
 }
 
@@ -32,94 +67,122 @@ const slowSet = [0.65, 0.58, 0.52, 0.48, 0.42]
 const mixedSet = [1.1, 0.95, 0.82, 0.68, 0.55, 0.45]
 const moderateSet = [0.88, 0.85, 0.82, 0.78, 0.76]
 
-export const DefaultCollapsed: Story = {
-  args: {
-    velocities: moderateSet,
-    onToggle: () => {},
-  },
-}
-
-export const Expanded: Story = {
+/** Controls-driven: flip `variant` / `showNumbers` / `showInfo` / `height` / `scale` in the panel. */
+export const Playground: Story = {
   args: {
     velocities: moderateSet,
+    variant: 'expanded',
     expanded: true,
+    showNumbers: true,
+    showInfo: true,
+    height: 60,
+    scale: 'peak',
     onToggle: () => {},
   },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 300, padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
 }
 
-export const ExpandedNoInfo: Story = {
-  args: {
-    velocities: moderateSet,
-    expanded: true,
-    showInfo: false,
-    onToggle: () => {},
-  },
-}
-
-export const FastEasySet: Story = {
-  args: {
-    velocities: fastSet,
-    expanded: true,
-    onToggle: () => {},
-  },
+/** The flat 3px static strip — the collapsed glance used in cards and rails. */
+export const Mini: Story = {
+  args: { velocities: mixedSet, variant: 'mini' },
 }
 
-export const SlowGrindingSet: Story = {
-  args: {
-    velocities: slowSet,
-    expanded: true,
-    onToggle: () => {},
-  },
+/** Framed chart with per-bar m/s labels + info row (numbers ON) — the rich readout. */
+export const ExpandedWithNumbers: Story = {
+  args: { velocities: mixedSet, variant: 'expanded', expanded: true },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 300, padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
 }
 
-export const MixedVelocities: Story = {
+/** Bare velocity-height strip (numbers OFF, info OFF, fixed 24px) — the active-set spotlight. */
+export const ExpandedBareSpotlight: Story = {
   args: {
-    velocities: mixedSet,
-    expanded: true,
-    onToggle: () => {},
+    variant: 'expanded',
+    showNumbers: false,
+    showInfo: false,
+    height: 24,
+    scale: 'fixed',
+    set: { type: 'straight', velocities: [0.95, 0.9, 0.86, 0.8, 0.72], planned: 10 },
   },
 }
 
-export const Mini: Story = {
+/** A structured set descriptor (a drop set): the mini variant carries the set-type gap/color encoding. */
+export const SetTypeMini: Story = {
   args: {
-    velocities: mixedSet,
     variant: 'mini',
+    set: {
+      type: 'drop',
+      subloads: [
+        [1.0, 0.92],
+        [0.85, 0.78],
+        [0.7, 0.62],
+      ],
+    },
   },
 }
 
 function InteractiveVelocityStrip() {
-  const [expanded, setExpanded] = useState(false)
+  const [open, setOpen] = useState(false)
+  // Tap-to-expand: `onToggle` + the controlled `expanded` boolean. Tapping the strip
+  // toggles both ways (collapsed 3px ↔ chart). No `onRepPress` here — per-bar rep
+  // presses would intercept bar taps and block collapse; that's a separate mode.
   return (
     <View style={{ width: 300, padding: 16 }}>
-      <VelocityStrip
-        velocities={moderateSet}
-        expanded={expanded}
-        onToggle={() => setExpanded(!expanded)}
-        onRepPress={(index, velocity) =>
-          console.log(`Rep ${index + 1}: ${velocity}`)
-        }
-      />
+      <VelocityStrip velocities={moderateSet} expanded={open} onToggle={() => setOpen((v) => !v)} />
     </View>
   )
 }
 
+/** Tap to expand; tap again to collapse (3px ↔ chart, animated). */
 export const Interactive: Story = {
   render: () => <InteractiveVelocityStrip />,
 }
 
-export const AllProfiles: Story = {
-  render: () => (
-    <View style={{ gap: 24, padding: 16 }}>
-      <View style={{ gap: 8 }}>
-        <VelocityStrip velocities={fastSet} expanded onToggle={() => {}} />
-        <VelocityStrip
-          velocities={moderateSet}
-          expanded
-          onToggle={() => {}}
-        />
-        <VelocityStrip velocities={slowSet} expanded onToggle={() => {}} />
-        <VelocityStrip velocities={mixedSet} expanded onToggle={() => {}} />
+/** The four zone profiles across the treatments, so the color scale reads at a glance. */
+export const Profiles: Story = {
+  render: () => {
+    const rows: [string, number[]][] = [
+      ['Speed', fastSet],
+      ['Power', moderateSet],
+      ['Strength', slowSet],
+      ['Mixed', mixedSet],
+    ]
+    return (
+      <View style={{ gap: 20, padding: 16, width: 320 }}>
+        {rows.map(([label, velocities]) => (
+          <View key={label} style={{ gap: 6 }}>
+            <Text style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: '#9CA3AF' }}>
+              {label}
+            </Text>
+            <VelocityStrip
+              velocities={velocities}
+              variant="expanded"
+              showInfo={false}
+              onToggle={() => {}}
+            />
+            <VelocityStrip
+              variant="expanded"
+              showNumbers={false}
+              showInfo={false}
+              height={24}
+              scale="fixed"
+              set={{ type: 'straight', velocities, planned: velocities.length }}
+            />
+            <VelocityStrip velocities={velocities} variant="mini" />
+          </View>
+        ))}
       </View>
-    </View>
-  ),
+    )
+  },
 }