@titan-design/react-ui 0.10.0 → 0.12.0

package/src/theme/tokens/semantic.ts

@@ -17,13 +17,34 @@
  * - interactive-* : Hover/focus/active/disabled states
  */
 
-import {
-  primitiveColors as p,
-  primitiveRamps as ramp,
-  discreteRainbow,
-  surfaceRampDark as surf,
-  backgroundFrameDark,
-} from './primitives'
+import { primitiveColors as p, primitiveRamps as ramp, greyRamp, discreteRainbow } from './primitives'
+
+/**
+ * GREY MAPPING (TD-07.14) — how the old cool scales resolved onto `greyRamp`.
+ *
+ * Every grey below came off `grey` (pure R=G=B) or `neutral` (cool, R−B
+ * down to −26). They were snapped by NEAREST L*, not by matching step numbers,
+ * because the two old scales were numbered incompatibly: `grey` ran
+ * INVERTED and compressed (0 = #6E6E6E lightest, 900 = #101010 darkest), so
+ * `grey[400]` and `greyRamp[400]` have nothing to do with each other.
+ *
+ *   grey 200→800  300→900  400→925  500→950
+ *   neutral   50→50   100→100  300→200  400→400  500→600  600→700  900→950
+ *
+ * Surfaces move ΔE 1.9–4.8 — at or near imperceptible. The TEXT roles move
+ * further (8.6–12.8), and that is the intended part of the change: they are
+ * picking up the warmth the surfaces already had.
+ *
+ * Light gets its own column because strict L*-nearest collapsed `neutral[50]`
+ * and `[100]` onto one step, flattening surface-elevated into surface-raised.
+ * Light is still deferred as a design question — there is no `surfaceRampLight`.
+ *
+ * `border-default`, `-subtle` and `-strong` are GONE, replaced by `hairline-*`.
+ * Once the planes became ramp steps, every value dark enough to read as a
+ * border was also a plane's fill. Alpha composites instead of colliding.
+ *
+ * `text-tertiary` on dark is the one role that ignores L*-nearest; see it.
+ */
 
 // Light mode semantic colors (default)
 export const semanticColorsLight = {
@@ -61,9 +82,9 @@ export const semanticColorsLight = {
   'status-error-dark': ramp.red[700],
   'status-error-subtle': ramp.red[50],
 
-  'status-error-vivid': p.redVivid[500],     // vivid alert red
-  'status-error-vivid-light': p.redVivid[400],
-  'status-error-vivid-dark': p.redVivid[700],
+  'status-error-vivid': ramp.red[600],     // vivid alert red
+  'status-error-vivid-light': ramp.red[500],
+  'status-error-vivid-dark': ramp.red[700],
   'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
 
   'status-warning': ramp.amber[300],
@@ -91,7 +112,7 @@ export const semanticColorsLight = {
   'result-degrade-dark': '#b30000',
   'result-inconclusive': '#9E9A97',           // Gray - no clear result
   'result-inconclusive-light': 'rgba(158, 154, 151, 0.12)',
-  'result-neutral': p.neutral[500],           // Neutral baseline
+  'result-neutral': greyRamp[600],           // Neutral baseline
 
   // Text on result backgrounds (on-result-*)
   'on-result-improve': p.white,
@@ -114,43 +135,34 @@ export const semanticColorsLight = {
   // Text colors (text-*)
   'text-primary': '#121828',
   'text-secondary': '#65748B',
-  'text-tertiary': p.neutral[400],
+  'text-tertiary': greyRamp[400],
   'text-disabled': 'rgba(55, 65, 81, 0.48)',
   'text-inverse': p.white,
-  'text-link': p.blue[600],
-  'text-link-hover': p.blue[700],
+  'text-link': ramp.blue[600],
+  'text-link-hover': ramp.blue[700],
 
   // Surface colors (surface-*) - for elevated containers
   'surface-base': p.white,
-  'surface-elevated': p.neutral[50],          // slightly off-white for elevated cards
-  'surface-raised': p.neutral[100],           // light gray for raised cards
+  'surface-elevated': greyRamp[50],          // slightly off-white for elevated cards
+  'surface-raised': greyRamp[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],
+  'surface-input': greyRamp[50],             // Input field background (filled variant)
 
   // 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],
+  'background-subtle': greyRamp[50],
+  // Frame/bezel chrome — top bar + side nav shell, one step below
+  // `background-base`. Placeholder pairing for light mode, which is deferred.
+  'background-frame': greyRamp[400],
 
   // Border colors (border-*)
-  'border-default': '#E8E9EB',
-  'border-subtle': p.neutral[100],
-  'border-strong': p.neutral[300],
-  'border-prominent': p.neutral[400],        // high-visibility divider
-  'border-focus': p.blue[600],
-  'border-input': p.neutral[300],             // Input field border
-  'border-input-hover': p.neutral[400],       // Input field border on hover
-  'border-input-focus': p.blue[600],          // Input field border on focus
-  'border-input-error': p.red[600],           // Input field border on error
+  'border-prominent': greyRamp[400],        // high-visibility divider
+  'border-focus': ramp.blue[600],
+  'border-input': greyRamp[200],             // Input field border
+  'border-input-hover': greyRamp[400],       // Input field border on hover
+  'border-input-focus': ramp.blue[600],          // Input field border on focus
+  'border-input-error': ramp.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.
@@ -170,7 +182,7 @@ export const semanticColorsLight = {
   'divider': '#E8E9EB',
 
   // Avatar default
-  'avatar-background': p.neutral[500],
+  'avatar-background': greyRamp[600],
   'avatar-text': p.white,
 } as const
 
@@ -210,9 +222,9 @@ export const semanticColorsDark = {
   'status-error-dark': ramp.red[700],
   'status-error-subtle': 'rgba(209, 67, 67, 0.12)',
 
-  'status-error-vivid': p.redVivid[500],
-  'status-error-vivid-light': p.redVivid[400],
-  'status-error-vivid-dark': p.redVivid[700],
+  'status-error-vivid': ramp.red[600],
+  'status-error-vivid-light': ramp.red[500],
+  'status-error-vivid-dark': ramp.red[700],
   'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
 
   'status-warning': ramp.amber[300],
@@ -240,7 +252,7 @@ export const semanticColorsDark = {
   'result-degrade-dark': '#b30000',
   'result-inconclusive': '#9E9A97',
   'result-inconclusive-light': 'rgba(158, 154, 151, 0.16)',
-  'result-neutral': p.neutral[400],
+  'result-neutral': greyRamp[400],
 
   // Text on result backgrounds
   'on-result-improve': p.white,
@@ -260,13 +272,20 @@ export const semanticColorsDark = {
   'data-10': discreteRainbow[22],
 
   // Text colors - inverted for dark mode
-  'text-primary': p.neutral[100],
-  'text-secondary': p.neutral[400],
-  'text-tertiary': p.neutral[500],
+  'text-primary': greyRamp[50],
+  'text-secondary': greyRamp[400],
+  // Deliberately ONE step lighter than the L*-nearest match (`greyRamp[600]`).
+  // The colour this replaced failed WCAG large-text outright on the three
+  // lightest planes — 2.96 / 2.72 / 2.49 against elevated / raised / overlay —
+  // and `600` carried that failure forward almost exactly (2.93 / 2.70 / 2.47).
+  // `500` clears 3:1 everywhere (3.32–5.34). Contrast beats colour fidelity for
+  // text roles; borders and surfaces still use strict L*-nearest. See
+  // semantic-contrast.test.ts, which fails if this is moved back down.
+  'text-tertiary': greyRamp[500],
   'text-disabled': 'rgba(255, 255, 255, 0.38)',
-  'text-inverse': p.neutral[900],
+  'text-inverse': greyRamp[950],
   'text-link': '#828DF8',
-  'text-link-hover': p.blue[400],
+  'text-link-hover': ramp.blue[400],
 
   // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
   // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
@@ -274,50 +293,79 @@ export const semanticColorsDark = {
   // 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)
+  // so it takes the ramp's shell role. The deepest plane is `background-frame`,
+  // which is also the `SurfaceLevel` floor a pressed surface clamps at.
+  'surface-base': greyRamp[925],           // main surface        (#252321, L*13.9)
+  'surface-elevated': greyRamp[900],       // elevated surface     (#2C2A28, L*17.2 — nav/rail)
+  'surface-raised': greyRamp[875],         // raised surface       (#31302F, L*19.9 — cards)
+  'surface-overlay': greyRamp[850],        // overlay surface      (#373635, L*22.7 — hero/popover)
+  'surface-input': greyRamp[900],          // input surface        (#2C2A28 — one plane above base)
 
   // 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
-  'border-prominent': p.charcoal[200],     // high-visibility divider
+  'background-base': greyRamp[950],        // shell                (#1C1916, L*9   — Surface level="background")
+  'background-default': greyRamp[925],     // main background      (#252321, L*13.9 — matches surface-base)
+  'background-subtle': greyRamp[900],      // subtle background    (#2C2A28, L*17.2 — matches surface-elevated)
+  // Frame/bezel chrome — the top bar + side nav shell, one step BELOW
+  // `background-base`. It used to be described as sitting OUTSIDE the ramp; it
+  // is simply the ramp's last step now, and the floor `<Surface pressed>` clamps at.
+  'background-frame': greyRamp[975],       // frame / bezel        (#100D0A, L*3.8)
+
+  // Border colors — solid dark borders are RETIRED (TD-07.14). Not a preference — a structural
+  // consequence of one ramp. Every step from 850 to 975 is now a surface plane,
+  // so a solid border dark enough to read as a border necessarily equals some
+  // plane's fill, which is exactly the collision `surface.contract.test.ts` R2
+  // forbids. The only non-plane steps left in that band are 800 and 700, and
+  // borders there jump from L*~10-25 to L*~28-38 — a restyle, not a migration.
+  //
+  // So separation moves to the alpha hairlines, which dark mode already called
+  // "the primary separation cue". Being alpha, they composite against whatever
+  // plane they land on and cannot collide with any of them — the problem stops
+  // existing rather than being re-solved per plane. The three solid tokens were
+  // deleted outright; consumers point at the `hairline-*` family below.
+  //
+  // `border-prominent` stays SOLID: it is the one border meant to be seen
+  // outright (4 call sites, high-visibility dividers), and grey-800 is not a
+  // plane, so it keeps its job without collision.
+  'border-prominent': greyRamp[800],     // high-visibility divider
   'border-focus': '#828DF8',
-  'border-input': p.neutral[600],
-  'border-input-hover': p.neutral[500],
+  'border-input': greyRamp[700],
+  'border-input-hover': greyRamp[600],
   'border-input-focus': '#828DF8',
-  'border-input-error': p.red[500],
+  'border-input-error': ramp.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)',
+  //
+  // RETUNED on the wall (VW-99, S-6). The original .06/.09/.14 were set at a
+  // desk. On the panel at ~3 m `subtle` rendered but was indiscernible, and
+  // `default` — the load-bearing one, with no solid-border fallback since
+  // TD-07.14 — went weak on the lightest plane. `strong` read cleanly with room
+  // to spare, which is what made raising the whole family viable.
+  //
+  // Each tier steps up onto the next MEASURED-GOOD rung rather than an
+  // interpolated one: the new `subtle` is the old `default`, and the new
+  // `default` is the old `strong` — a value just confirmed legible on all four
+  // planes. Spacing goes 1 : 1.56 : 2.33, against the original 1 : 1.5 : 2.33.
+  //
+  // RUN 2 (VW-99): all three tiers were seen on all four planes — the retune
+  // worked — but `subtle` was still "a bit hard to read", so the whole family
+  // took a further +.01. That is a comfort margin on a passing row, not a fix
+  // for a failing one, which is why it is a flat offset: the 1 : 1.56 : 2.33
+  // spacing that the run validated is preserved rather than re-derived.
+  //
+  // Keep these to TWO decimals. react-native-web quantises alpha to 8 bits, so
+  // a 3-decimal value silently rounds on the way to the DOM (.135 renders as
+  // .13) — the token would say one thing and paint another.
+  //
+  // DARK ONLY. The light family above composites toward BLACK on light planes,
+  // which this run says nothing about — do not mirror these numbers into it
+  // without its own verification.
+  'hairline-subtle': 'rgba(255, 255, 255, 0.10)',
+  'hairline-default': 'rgba(255, 255, 255, 0.15)',
+  'hairline-strong': 'rgba(255, 255, 255, 0.22)',
 
   // Interactive states
   'interactive-hover': 'rgba(255, 255, 255, 0.04)',
@@ -328,10 +376,10 @@ export const semanticColorsDark = {
   'interactive-disabled-text': 'rgba(255, 255, 255, 0.26)',
 
   // Divider
-  'divider': p.charcoal[400],              // divider color
+  'divider': 'rgba(255, 255, 255, 0.09)',
 
   // Avatar default
-  'avatar-background': p.neutral[600],
+  'avatar-background': greyRamp[700],
   'avatar-text': p.white,
 } as const
 

package/src/utils/colors.ts

@@ -5,7 +5,7 @@
  * color math for more perceptually consistent results across hues.
  */
 
-export { lighten, darken } from '../theme/shadows'
+export { lighten, darken } from '../theme/color-utils'
 
 export type StatusType = 'success' | 'error' | 'warning' | 'info'
 export type ResultType = 'improve' | 'degrade' | 'inconclusive' | 'neutral'

package/tailwind.config.js

@@ -119,7 +119,6 @@ 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: {
@@ -140,11 +139,9 @@ module.exports = {
             hover: 'var(--color-text-link-hover)',
           },
         },
-        // Border colors
+        // Border colors — DEFAULT/subtle/strong are RETIRED (TD-07.14); use the
+        // `hairline` family below for separation.
         border: {
-          DEFAULT: 'var(--color-border-default)',
-          subtle: 'var(--color-border-subtle)',
-          strong: 'var(--color-border-strong)',
           prominent: 'var(--color-border-prominent)',
           focus: 'var(--color-border-focus)',
           input: {

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