@titan-design/react-ui 0.9.3 → 0.11.0

package/src/theme/tokens/semantic.ts

@@ -17,7 +17,13 @@
  * - interactive-* : Hover/focus/active/disabled states
  */
 
-import { primitiveColors as p, primitiveRamps as ramp, discreteRainbow } from './primitives'
+import {
+  primitiveColors as p,
+  primitiveRamps as ramp,
+  discreteRainbow,
+  surfaceRampDark as surf,
+  backgroundFrameDark,
+} from './primitives'
 
 // Light mode semantic colors (default)
 export const semanticColorsLight = {
@@ -120,11 +126,20 @@ export const semanticColorsLight = {
   'surface-raised': p.neutral[100],           // light gray for raised cards
   'surface-overlay': p.white,
   'surface-input': p.neutral[50],             // Input field background (filled variant)
+  // Deepest pressed pit (TD-surface-tokens, S-3) — light-mode counterpart of
+  // the dark ramp's `inset` plane; a placeholder pairing, not part of the
+  // dark-ramp investigation (surface.contract.test.ts is dark-mode only).
+  'surface-inset': p.neutral[300],
 
   // Background colors (background-*)
   'background-base': '#EBEBEB',
   'background-default': p.white,
   'background-subtle': p.neutral[50],
+  // Frame/bezel chrome (TD-surface-tokens, S-3) — top bar + side nav shell,
+  // one step below `background-base` (darker still than `surface-inset`
+  // above, mirroring the dark-mode ordering). Placeholder pairing for light
+  // mode (see dark-mode note on `surface-inset` above).
+  'background-frame': p.neutral[400],
 
   // Border colors (border-*)
   'border-default': '#E8E9EB',
@@ -137,6 +152,12 @@ export const semanticColorsLight = {
   'border-input-focus': p.blue[600],          // Input field border on focus
   'border-input-error': p.red[600],           // Input field border on error
 
+  // Alpha hairline separators (surface-independent — composite toward black on
+  // light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
+  'hairline-subtle': 'rgba(0, 0, 0, 0.06)',
+  'hairline-default': 'rgba(0, 0, 0, 0.09)',
+  'hairline-strong': 'rgba(0, 0, 0, 0.14)',
+
   // Interactive states (interactive-*)
   'interactive-hover': 'rgba(55, 65, 81, 0.04)',
   'interactive-focus': 'rgba(55, 65, 81, 0.12)',
@@ -247,19 +268,38 @@ export const semanticColorsDark = {
   'text-link': '#828DF8',
   'text-link-hover': p.blue[400],
 
-  // Surface colors - dark backgrounds
-  'surface-base': p.charcoal[700],         // main surface
-  'surface-elevated': p.charcoal[600],     // elevated surface
-  'surface-raised': p.charcoal[500],       // raised surface
-  'surface-overlay': p.charcoal[600],      // overlay surface
-  'surface-input': p.charcoal[600],        // input surface
-
-  // Background colors
-  'background-base': p.charcoal[900],      // darkest charcoal
-  'background-default': p.charcoal[700],    // main background
-  'background-subtle': p.charcoal[500],     // subtle background
-
-  // Border colors
+  // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
+  // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
+  // `surfaceRampDark` in primitives.ts for the full derivation note. `surface-overlay`
+  // and `surface-elevated` are distinct (were both #191919 pre-S-1); `surface-input`
+  // tracks one plane above `surface-base`, same relative position as before the remap.
+  // `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
+  // so it takes the ramp's `background` (shell/frame) role, NOT `inset`. The ramp's
+  // deepest `inset` plane is now promoted to `surface-inset` below (S-3) — still no
+  // `SurfaceLevel` member for it (follow-up, alongside the elevation.ts -1/-2 pressed
+  // levels — parallel workstream, not this branch).
+  'surface-base': surf.base,               // main surface        (#252321, L*13.5)
+  'surface-elevated': surf.elevated,       // elevated surface     (#2C2A28, L*17   — nav/rail)
+  'surface-raised': surf.raised,           // raised surface       (#31302F, L*20   — cards)
+  'surface-overlay': surf.overlay,         // overlay surface      (#373635, L*22.5 — hero/popover)
+  'surface-input': surf.elevated,          // input surface        (#2C2A28 — one plane above base)
+  'surface-inset': surf.inset,             // deepest pressed pit  (#13100D, L*4.5  — sub-shell well)
+
+  // Background colors — same ramp, the frame/shell end of it.
+  'background-base': surf.background,      // shell / frame        (#1C1916, L*9 — Surface level="background")
+  'background-default': surf.base,         // main background      (#252321, L*13.5 — matches surface-base)
+  'background-subtle': surf.elevated,      // subtle background    (#2C2A28, L*17 — matches surface-elevated)
+  // Frame/bezel chrome (S-3) — the top bar + side nav shell; one step BELOW
+  // `background-base`, darker even than `surface-inset` — it exits the content
+  // ramp entirely rather than sitting in it. See `backgroundFrameDark` in
+  // primitives.ts.
+  'background-frame': backgroundFrameDark, // frame / bezel        (#100D0A, L*3.79)
+
+  // Border colors — `border-subtle` (#1C1C1C) previously collided with
+  // `surface-raised` (also #1C1C1C, an invisible border on raised cards). The
+  // re-spaced ramp above moved `surface-raised` to #2D2C2B, so this value is now
+  // distinct from every surface hex without needing to change it — see
+  // `surface.contract.test.ts` R2/R4.
   'border-default': p.charcoal[400],       // default border
   'border-subtle': p.charcoal[500],        // subtle border
   'border-strong': p.charcoal[300],        // strong border
@@ -270,6 +310,15 @@ export const semanticColorsDark = {
   'border-input-focus': '#828DF8',
   'border-input-error': p.red[500],
 
+  // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
+  // normalizing: composites toward white by ~the same amount on ANY plane, so
+  // one family works at every elevation instead of per-surface border tokens.
+  // Shadows are demoted to floating-overlay use only (not shipped as a fill
+  // separator here — see elevation.ts, follow-up S-4).
+  'hairline-subtle': 'rgba(255, 255, 255, 0.06)',
+  'hairline-default': 'rgba(255, 255, 255, 0.09)',
+  'hairline-strong': 'rgba(255, 255, 255, 0.14)',
+
   // Interactive states
   'interactive-hover': 'rgba(255, 255, 255, 0.04)',
   'interactive-focus': 'rgba(255, 255, 255, 0.12)',

package/tailwind.config.js

@@ -119,12 +119,14 @@ module.exports = {
           raised: 'var(--color-surface-raised)',
           overlay: 'var(--color-surface-overlay)',
           input: 'var(--color-surface-input)',
+          inset: 'var(--color-surface-inset)',
         },
         // Background colors
         background: {
           base: 'var(--color-background-base)',
           DEFAULT: 'var(--color-background-default)',
           subtle: 'var(--color-background-subtle)',
+          frame: 'var(--color-background-frame)',
         },
         // Text colors
         text: {
@@ -163,6 +165,12 @@ module.exports = {
             text: 'var(--color-interactive-disabled-text)',
           },
         },
+        // Alpha hairline separators (surface-independent — §4/S-2)
+        hairline: {
+          subtle: 'var(--color-hairline-subtle)',
+          DEFAULT: 'var(--color-hairline-default)',
+          strong: 'var(--color-hairline-strong)',
+        },
         // Divider
         divider: 'var(--color-divider)',
         // Avatar

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

@@ -1,254 +0,0 @@
-/**
- * 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

@@ -1,145 +0,0 @@
-/**
- * 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>
-  ),
-}