@titan-design/react-ui 0.6.0 → 0.7.0

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

@@ -0,0 +1,88 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+import { StatusDot, type StatusDotVariant } from './StatusDot'
+
+const t = getSemanticColors('dark')
+
+/**
+ * Auto-regulation verdict — the human-readable read-once summary of a set's
+ * velocity-loss state.
+ * - `productive` — in the band, keep going (success)
+ * - `threshold`  — VL20 reached, approaching fatigue (warning)
+ * - `stop`       — VL28+, terminate the set (error)
+ */
+export type StatusPillStatus = 'productive' | 'threshold' | 'stop'
+
+export interface StatusPillProps extends ViewProps {
+  status: StatusPillStatus
+  /** Overrides the default verdict text for the status. */
+  label?: string
+  className?: string
+}
+
+const statusToken: Record<StatusPillStatus, 'status-success' | 'status-warning' | 'status-error'> =
+  {
+    productive: 'status-success',
+    threshold: 'status-warning',
+    stop: 'status-error',
+  }
+
+const statusDotVariant: Record<StatusPillStatus, StatusDotVariant> = {
+  productive: 'success',
+  threshold: 'warning',
+  stop: 'error',
+}
+
+const defaultLabel: Record<StatusPillStatus, string> = {
+  productive: 'Productive',
+  threshold: 'Threshold',
+  stop: 'Stop',
+}
+
+/** Resolved semantic color for a verdict status. */
+export function statusPillColor(status: StatusPillStatus): string {
+  return t[statusToken[status]]
+}
+
+/**
+ * Verdict pill: a glowing status dot + colored verdict text, in a tinted,
+ * bordered capsule. Composes {@link StatusDot} for the dot so the glow/color
+ * stays consistent with the atom. Tint and border are derived from the same
+ * semantic token via `alpha()` — no per-status raw hex.
+ */
+export function StatusPill({ status, label, className, style, ...props }: StatusPillProps) {
+  const color = statusPillColor(status)
+  const text = label ?? defaultLabel[status]
+
+  return (
+    <View
+      testID="status-pill"
+      className={className}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 7,
+          alignSelf: 'flex-start',
+          paddingVertical: 7,
+          paddingHorizontal: 13,
+          borderRadius: 9,
+          backgroundColor: alpha(color, 0.14),
+          borderWidth: 1,
+          borderColor: alpha(color, 0.4),
+        },
+        style,
+      ]}
+      {...props}
+    >
+      <View accessibilityElementsHidden>
+        <StatusDot variant={statusDotVariant[status]} glow />
+      </View>
+      <Text testID="status-pill-label" style={{ fontSize: 13, fontWeight: '800', color }}>
+        {text}
+      </Text>
+    </View>
+  )
+}

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

@@ -32,7 +32,7 @@ const decline: StrengthTrendDataPoint[] = [
 ]
 
 const meta: Meta<typeof StrengthTrendChart> = {
-  title: 'Custom/Workout/StrengthTrendChart',
+  title: 'Workout/DataViz/StrengthTrendChart',
   component: StrengthTrendChart,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,7 +4,7 @@ import { SupersetWrapper } from './SupersetWrapper'
 import { ExerciseCard } from './ExerciseCard'
 
 const meta: Meta<typeof SupersetWrapper> = {
-  title: 'Custom/Workout/SupersetWrapper',
+  title: 'Workout/SupersetWrapper',
   component: SupersetWrapper,
   tags: ['autodocs'],
   decorators: [

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

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

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

@@ -5,9 +5,20 @@ import { TempoDisplay, type TempoLivePhase, type TempoLiveState } from './TempoD
 
 // tempo = [eccentric, pauseBottom, concentric, pauseTop]
 const meta: Meta<typeof TempoDisplay> = {
-  title: 'Custom/Workout/TempoDisplay',
+  title: 'Workout/TempoDisplay',
   component: TempoDisplay,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule.** The eccentric/pause/concentric/pause tempo display. Composes ' +
+          '[MetricCell](?path=/docs/workout-metriccell--docs) ' +
+          '(shared value/separator cell). Used-by ↑ ' +
+          '[ExerciseHeading](?path=/docs/workout-exerciseheading--docs) (`showLabel={false}`).',
+      },
+    },
+  },
   argTypes: {
     tempo: {
       control: 'object',

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

@@ -5,6 +5,7 @@ import { roundTempo } from '../../../utils/workout-format'
 import { alpha } from '../../../utils/colors'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { getTempoFillPct, getTempoPacingState } from './TempoBar'
+import { MetricCell } from './metricText'
 
 const t = getSemanticColors('dark')
 
@@ -29,6 +30,8 @@ export interface TempoDisplayProps extends ViewProps {
   size?: 'sm' | 'md'
   /** Colored phases or mono (all gray) */
   colored?: boolean
+  /** Show the "TEMPO" caption before the values. Default true. */
+  showLabel?: boolean
   /** Show info tooltip on press */
   showInfo?: boolean
   /**
@@ -64,33 +67,17 @@ function TempoValue({
   fontSize: number
 }) {
   return (
-    <Text
-      style={{
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: '600',
-        letterSpacing: 1,
-      }}
-    >
+    <MetricCell color={color} fontSize={fontSize}>
       {value}
-    </Text>
+    </MetricCell>
   )
 }
 
 function TempoSeparator({ color, fontSize }: { color: string; fontSize: number }) {
   return (
-    <Text
-      style={{
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: '600',
-        letterSpacing: 1,
-      }}
-    >
+    <MetricCell color={color} fontSize={fontSize}>
       -
-    </Text>
+    </MetricCell>
   )
 }
 
@@ -170,6 +157,7 @@ export function TempoDisplay({
   tempo,
   size = 'md',
   colored = true,
+  showLabel = true,
   showInfo = true,
   live,
   onPress,
@@ -205,19 +193,21 @@ export function TempoDisplay({
       }}
       {...props}
     >
-      <Text
-        style={{
-          fontFamily: INTER,
-          fontSize: 9,
-          fontWeight: '500',
-          color: TEXT_TERTIARY,
-          letterSpacing: 0.5,
-          textTransform: 'uppercase',
-          marginRight: 6,
-        }}
-      >
-        TEMPO
-      </Text>
+      {showLabel && (
+        <Text
+          style={{
+            fontFamily: INTER,
+            fontSize: 9,
+            fontWeight: '500',
+            color: TEXT_TERTIARY,
+            letterSpacing: 0.5,
+            textTransform: 'uppercase',
+            marginRight: 6,
+          }}
+        >
+          TEMPO
+        </Text>
+      )}
       <View style={{ flexDirection: 'row' }} testID="tempo-value">
         {live ? (
           <LiveTempoRow

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

@@ -181,7 +181,7 @@ const muscles: TrainingStatusMuscle[] = [
 ]
 
 const meta: Meta<typeof TrainingStatusPage> = {
-  title: 'Custom/Workout/TrainingStatusPage',
+  title: 'Pages/Training Status',
   component: TrainingStatusPage,
   parameters: { layout: 'fullscreen' },
   tags: ['autodocs'],

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>
+  ),
+}