@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,95 +0,0 @@
-/**
- * SHEET · Session Pace — the rail-footer pace tile (NAV-D05: VMCP-primary, plan-aware trim/add).
- * PRESENTATIONAL only; the derivation (session time-model + trim/add heuristic) is a separate VMCP/WA
- * ticket (no WA support today). OPEN: which metrics earn the row · behind/ahead visual · idle treatment ·
- * whether it restores a CapacityBandChart. See DECISIONS-ExerciseRow doc.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import type { ReactNode } from 'react'
-import { AMBER, GREEN, INSET, RAISED, T_PRIMARY, T_SECONDARY, T_TERTIARY, ORANGE, Page, monoTag } from './setHeadingKit'
-
-type PaceState = 'behind' | 'ahead' | 'idle'
-
-function Metric({ k, v, color }: { k: string; v: string; color?: string }) {
-  return (
-    <div style={{ flex: 1, textAlign: 'center', background: RAISED, borderRadius: 7, padding: '6px 3px' }}>
-      <div style={{ fontSize: 8, textTransform: 'uppercase', letterSpacing: 0.4, color: T_TERTIARY, fontWeight: 800 }}>{k}</div>
-      <div style={{ fontFamily: 'monospace', fontSize: 13, fontWeight: 800, marginTop: 2, color: color ?? T_PRIMARY }}>{v}</div>
-    </div>
-  )
-}
-function Suggest({ tone, children }: { tone: 'behind' | 'ahead'; children: ReactNode }) {
-  const color = tone === 'behind' ? AMBER : GREEN
-  return (
-    <div style={{ fontSize: 10.5, lineHeight: 1.4, borderRadius: 8, padding: '8px 9px', display: 'flex', gap: 7, alignItems: 'flex-start', color, background: tone === 'behind' ? 'rgba(249,180,21,0.10)' : 'rgba(46,213,115,0.10)', border: `1px solid ${tone === 'behind' ? 'rgba(249,180,21,0.30)' : 'rgba(46,213,115,0.28)'}` }}>
-      <span style={{ flex: '0 0 auto', fontSize: 12 }}>{tone === 'behind' ? '▲' : '＋'}</span>
-      <div>{children}</div>
-    </div>
-  )
-}
-const b = (t: string) => <b style={{ color: T_PRIMARY }}>{t}</b>
-
-// The pace tile — lives pinned in the rail footer (inset surface).
-function SessionPaceTile({ state }: { state: PaceState }) {
-  if (state === 'idle') {
-    return (
-      <div style={{ width: 246, background: INSET, borderTop: `1px solid #1C1C1C`, padding: '11px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: ORANGE }}>Next session budget</div>
-        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, fontFamily: 'monospace' }}>
-          <span style={{ fontSize: 20, fontWeight: 800, color: T_PRIMARY }}>~52:00</span>
-          <span style={{ fontSize: 11, color: T_SECONDARY }}>planned · Lower B</span>
-        </div>
-        <Suggest tone="ahead">6 exercises · ~20 sets. Wall wakes to Live when the first set streams.</Suggest>
-      </div>
-    )
-  }
-  const behind = state === 'behind'
-  return (
-    <div style={{ width: 246, background: INSET, borderTop: `1px solid #1C1C1C`, padding: '11px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: ORANGE }}>Session Pace</span>
-        <span style={{ fontSize: 8, fontFamily: 'monospace', color: T_TERTIARY, border: `1px solid #2C2C2C`, borderRadius: 5, padding: '2px 5px' }}>{behind ? 'show ahead ▸' : 'show behind ▸'}</span>
-      </div>
-      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, fontFamily: 'monospace' }}>
-        <span style={{ fontSize: 20, fontWeight: 800, color: T_PRIMARY }}>42:18</span>
-        <span style={{ fontSize: 11, color: T_SECONDARY }}>of 60:00 budget</span>
-      </div>
-      <div style={{ height: 6, borderRadius: 3, background: '#22252c', position: 'relative', overflow: 'hidden' }}>
-        <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '70%', borderRadius: 3, background: behind ? AMBER : GREEN }} />
-      </div>
-      <div style={{ display: 'flex', gap: 4 }}>
-        <Metric k="Volume" v="76%" />
-        <Metric k="Load" v="7.3k" />
-        <Metric k="Fatigue" v="MOD" color={AMBER} />
-      </div>
-      {behind ? (
-        <Suggest tone="behind">{b('Behind pace')} — ~9 min over budget at this rate. Drop {b('Face Pull')} to 2 sets to finish on time.</Suggest>
-      ) : (
-        <Suggest tone="ahead">{b('Ahead of pace')} — ~7 min of headroom. Room to add a {b('Cable Fly')} drop-set or a back-off set on Row.</Suggest>
-      )}
-    </div>
-  )
-}
-
-const meta: Meta = { title: 'Lab/Explorations/Session Pace', parameters: { layout: 'fullscreen' } }
-export default meta
-type Story = StoryObj
-
-export const States: Story = {
-  name: 'Pace tile · behind / ahead / idle',
-  render: () => (
-    <Page
-      title="Session Pace — rail footer tile"
-      note="VMCP-primary (NAV-D05): behind → what to trim · ahead → what to add · idle → next-session budget. Presentational; derivation is a separate VMCP/WA ticket (no WA session time-model today). Surfaces on real tokens."
-    >
-      <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
-        {(['behind', 'ahead', 'idle'] as PaceState[]).map((s) => (
-          <div key={s} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            <span style={monoTag}>{s}</span>
-            <SessionPaceTile state={s} />
-          </div>
-        ))}
-      </div>
-    </Page>
-  ),
-}

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

@@ -1,61 +0,0 @@
-/**
- * SHEET · Session Rail Heading — the always-shown exercise heading unit, in isolation.
- * Locked: name row + indicator · tight sets/reps/load (tempo language) + tempo · per-set segmented strip
- * (completed colored · active pulse + grey remainder · upcoming grey). OPEN: strip height · indicator taxonomy
- * · rep-range treatment · set-types (drop/myo). See DECISIONS-ExerciseRow doc.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Heading, INSET, INSET_SHADOW, Page, monoTag, reps, type Exercise } from './setHeadingKit'
-
-const DONE: Exercise = { name: 'Seated Cable Row', sets: 5, reps: 8, load: 145, tempo: [3, 1, 2, 0], indicator: 'pr', setStates: [1.0, 0.9, 0.8, 0.7, 0.6].map((s) => ({ status: 'done', reps: reps(8, s) })) }
-const ACTIVE: Exercise = { name: 'Cable Chest Press', sets: 3, reps: 10, load: 90, tempo: [2, 1, 2, 0], indicator: 'info', setStates: [{ status: 'done', reps: reps(10, 0.72) }, { status: 'active', reps: reps(5, 0.62), planned: 10 }, { status: 'todo', planned: 10 }] }
-const UPCOMING: Exercise = { name: 'Standing Calf Raise', sets: 5, reps: 20, load: 25, tempo: [2, 1, 2, 0], upcoming: true, setStates: [1, 2, 3, 4, 5].map(() => ({ status: 'todo', planned: 20 })) }
-const RANGE: Exercise = { name: 'Face Pull', sets: 3, reps: '15-20', load: 40, tempo: [2, 1, 2, 0], setStates: [1, 2, 3].map(() => ({ status: 'todo', planned: 18 })) }
-
-// a heading on the sunk inset surface, at the real rail width
-function Row({ ex, h }: { ex: Exercise; h: number }) {
-  return (
-    <div style={{ width: 246, background: INSET, boxShadow: INSET_SHADOW }}>
-      <Heading ex={ex} stripH={h} />
-    </div>
-  )
-}
-
-type Args = { stripHeight: number }
-const meta: Meta<Args> = {
-  title: 'Lab/Explorations/Session Rail Heading',
-  parameters: { layout: 'fullscreen' },
-  argTypes: { stripHeight: { control: { type: 'range', min: 3, max: 14, step: 1 } } },
-  args: { stripHeight: 8 },
-}
-export default meta
-type Story = StoryObj<Args>
-
-export const States: Story = {
-  name: 'Heading · states + heights',
-  render: (args) => (
-    <Page
-      title="Session rail heading — the exercise unit"
-      note="The always-shown heading: name + indicator · tight sets/reps/load (tempo language) + tempo · per-set strip. Left column = the three states at the current height; right = the completed heading across 4 / 6 / 8 / 10px."
-    >
-      <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-          {([['completed', DONE], ['active (pulsing)', ACTIVE], ['upcoming', UPCOMING], ['rep range', RANGE]] as [string, Exercise][]).map(([lbl, ex]) => (
-            <div key={lbl} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              <span style={monoTag}>{lbl}</span>
-              <Row ex={ex} h={args.stripHeight} />
-            </div>
-          ))}
-        </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-          {[4, 6, 8, 10].map((h) => (
-            <div key={h} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              <span style={monoTag}>strip {h}px</span>
-              <Row ex={DONE} h={h} />
-            </div>
-          ))}
-        </div>
-      </div>
-    </Page>
-  ),
-}

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

@@ -1,176 +0,0 @@
-/**
- * SHEET · Session Rail — set-type encodings (R&D). Throwaway specimen at real rail width, on real tokens.
- * Explores the cases the flat `sets × reps @ load` strip doesn't model:
- *   1. Variable rep-range — range-max segments; the variable zone (floor→max) upcoming part gets its OWN color.
- *   2. Drop set — ONE bar, sub-loads separated by thin NOTCHES (< the between-set gap); reps velocity-colored.
- *   3. Myo-rep / rest-pause — activation chunk + mini-clusters separated by small cluster gaps.
- * Gap hierarchy: butted reps (0) < notch (2, drop sub-load) < cluster gap (3, myo rest-pause) < SET_GAP (5, sets).
- * Hardens into a SetStrip model extension (SetState variants: range/drop/myo) — a post-harden follow-up.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Fragment } from 'react'
-import { primitiveRamps as ramp, greyRamp } from '../../../theme/tokens/primitives'
-import { GREY, RAIL_W, SET_GAP, T_PRIMARY, T_SECONDARY, T_TERTIARY, INSET, velColor, reps, Page, sectionTitle } from './setHeadingKit'
-
-// ---- variable-zone (floor→max) upcoming color — real ramp candidates (no invented hex)
-const VAR_GREY = greyRamp[800] // #3C3C3C — lighter grey (the paler-grey reference)
-const VAR_BLUE_800 = ramp.blue[800] // #14407E — clearly blue, a touch brighter
-const VAR_BLUE_900 = ramp.blue[900] // #112C5A — dark muted navy, recessive
-const VAR_CYAN_900 = ramp.cyan[900] // #0B3149 — teal alt, sidesteps info-blue adjacency
-const NOTCH = 2 // drop sub-load divider
-const CLUSTER_GAP = 3 // myo rest-pause divider
-
-type Chunk = { colors: string[]; gapAfter?: number }
-function Bar({ chunks, h }: { chunks: Chunk[]; h: number }) {
-  return (
-    <div style={{ display: 'flex', width: '100%', height: h, borderRadius: 2, overflow: 'hidden' }}>
-      {chunks.map((ch, ci) => (
-        <Fragment key={ci}>
-          {ch.colors.map((c, i) => (
-            <div key={i} style={{ flex: 1, minWidth: 0, height: '100%', background: c }} />
-          ))}
-          {ci < chunks.length - 1 && <div style={{ flex: `0 0 ${ch.gapAfter ?? NOTCH}px`, height: '100%', background: INSET }} />}
-        </Fragment>
-      ))}
-    </div>
-  )
-}
-
-// ---- 1. variable rep-range: `max` segments; committed 0..floor, variable floor..max; variable-todo gets VAR color
-function rangeColors(floor: number, max: number, doneVels: number[], varColor: string): string[] {
-  return Array.from({ length: max }, (_, i) => {
-    if (i < doneVels.length) return velColor(doneVels[i])
-    return i < floor ? GREY : varColor
-  })
-}
-function RangeBar({ floor, max, done, varColor, h }: { floor: number; max: number; done: number[]; varColor: string; h: number }) {
-  return <Bar chunks={[{ colors: rangeColors(floor, max, done, varColor) }]} h={h} />
-}
-
-// ---- 2. drop set: one bar, sub-loads butted internally, separated by thin notches
-function DropBar({ subloads, h }: { subloads: number[][]; h: number }) {
-  const chunks: Chunk[] = subloads.map((vels, i) => ({ colors: vels.map(velColor), gapAfter: NOTCH, ...(i === subloads.length - 1 ? { gapAfter: undefined } : {}) }))
-  return <Bar chunks={chunks} h={h} />
-}
-
-// ---- 3. myo-rep: activation chunk + mini-clusters, separated by cluster gaps
-function MyoBar({ activation, clusters, h }: { activation: number[]; clusters: number[][]; h: number }) {
-  const chunks: Chunk[] = [{ colors: activation.map(velColor), gapAfter: CLUSTER_GAP }, ...clusters.map((c) => ({ colors: c.map(velColor), gapAfter: CLUSTER_GAP }))]
-  return <Bar chunks={chunks} h={h} />
-}
-
-// ---- 3b. UPCOMING myo, unknown length: grey activation (expected) + a blue "clusters-to-failure" trail
-// that fades and leaves the right edge open — signalling "N more clusters, count unknown".
-function MyoUpcomingBar({ activationLen, blue, h }: { activationLen: number; blue: string; h: number }) {
-  const fades = [1, 0.6, 0.32] // decreasing opacity per expected cluster → "and maybe more"
-  return (
-    <div style={{ display: 'flex', width: '100%', height: h, gap: 0 }}>
-      <div style={{ display: 'flex', flex: activationLen, height: '100%', borderRadius: '2px 0 0 2px', overflow: 'hidden' }}>
-        {Array.from({ length: activationLen }, (_, i) => (
-          <div key={i} style={{ flex: 1, height: '100%', background: GREY }} />
-        ))}
-      </div>
-      {fades.map((op, ci) => (
-        <Fragment key={ci}>
-          <div style={{ flex: `0 0 ${CLUSTER_GAP}px`, height: '100%', background: INSET }} />
-          <div style={{ display: 'flex', flex: 5, height: '100%', overflow: 'hidden', opacity: op }}>
-            {Array.from({ length: 5 }, (_, i) => (
-              <div key={i} style={{ flex: 1, height: '100%', background: blue }} />
-            ))}
-          </div>
-        </Fragment>
-      ))}
-    </div>
-  )
-}
-
-// ---- row scaffold at real rail width, on the sunk inset surface
-function Row({ name, meta, children }: { name: string; meta: string; children: React.ReactNode }) {
-  return (
-    <div style={{ width: RAIL_W, background: INSET, padding: '9px 12px', borderRadius: 4 }}>
-      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
-        <span style={{ fontSize: 14, fontWeight: 800, color: T_PRIMARY }}>{name}</span>
-        <div style={{ flex: 1 }} />
-        <span style={{ fontSize: 10, fontFamily: 'monospace', color: T_TERTIARY }}>{meta}</span>
-      </div>
-      {children}
-    </div>
-  )
-}
-function Col({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-      <span style={{ ...sectionTitle, color: T_SECONDARY }}>{label}</span>
-      {children}
-    </div>
-  )
-}
-
-const H = 8
-
-function Sheet() {
-  return (
-    <Page title="Session Rail — set-type encodings" note="R&D for prescriptions the flat sets×reps strip doesn't model. Rail width, real velocity ramp pins. Rep-range: range-max segments, the variable zone (floor→max) upcoming part gets its own color. Drop: one bar, sub-loads split by thin notches. Myo: activation + mini-clusters split by cluster gaps.">
-      <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap', alignItems: 'flex-start' }}>
-        {/* 1. variable rep-range — real ramp candidates for the variable zone */}
-        <Col label="1 · variable rep-range — LOCKED: cyan 900">
-          {([
-            ['grey · grey 200', VAR_GREY],
-            ['blue 800 · #14407E', VAR_BLUE_800],
-            ['blue 900 · #112C5A', VAR_BLUE_900],
-            ['cyan 900 · #0B3149', VAR_CYAN_900],
-          ] as const).map(([label, c]) => (
-            <Row key={label} name="Face Pull" meta="3 × 15–20 @ 40">
-              <span style={{ fontSize: 9, color: T_TERTIARY, display: 'block', marginBottom: 5 }}>{label}</span>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: SET_GAP }}>
-                <RangeBar floor={15} max={20} done={[]} varColor={c} h={H} />
-                <RangeBar floor={15} max={20} done={reps(12, 0.9)} varColor={c} h={H} />
-                <RangeBar floor={15} max={20} done={reps(17, 0.8)} varColor={c} h={H} />
-              </div>
-            </Row>
-          ))}
-          <span style={{ fontSize: 10, color: T_TERTIARY, maxWidth: RAIL_W }}>Each block: todo · 12 done (committed) · 17 done (into the variable zone). Variable-todo = the swatch; committed-todo = grey.</span>
-        </Col>
-
-        {/* 2. drop set */}
-        <Col label="2 · drop set">
-          <Row name="Lat Pulldown" meta="1 drop · 10→8→6 @ 120→80">
-            <DropBar subloads={[reps(10, 0.85), reps(8, 0.7), reps(6, 0.6)]} h={H} />
-          </Row>
-          <Row name="Leg Extension" meta="1 drop · 12→10→8→6 @ 90→45">
-            <DropBar subloads={[reps(12, 0.8), reps(10, 0.7), reps(8, 0.62), reps(6, 0.55)]} h={H} />
-          </Row>
-          <span style={{ fontSize: 10, color: T_TERTIARY, maxWidth: RAIL_W }}>One set, no rest; notches mark each load drop. Notch (2px) &lt; set gap (5px) so drops read as sub-structure of a single set.</span>
-        </Col>
-
-        {/* 3. myo-rep */}
-        <Col label="3 · myo-rep / rest-pause">
-          <Row name="Cable Curl" meta="myo · done · 15 + 5 + 5 + 5">
-            <MyoBar activation={reps(15, 0.75)} clusters={[reps(5, 0.6), reps(5, 0.55), reps(5, 0.5)]} h={H} />
-          </Row>
-          <Row name="Triceps Pushdown" meta="myo · done · 12 + 4 + 4">
-            <MyoBar activation={reps(12, 0.7)} clusters={[reps(4, 0.55), reps(4, 0.5)]} h={H} />
-          </Row>
-          <span style={{ fontSize: 10, color: T_TERTIARY, maxWidth: RAIL_W }}>Done: activation to near-failure, then rest-pause clusters. Cluster gap (3px) between notch and set gap.</span>
-          <span style={{ ...sectionTitle, color: T_SECONDARY, marginTop: 6 }}>upcoming · length unknown</span>
-          <Row name="Cable Curl" meta="myo · ~15 + clusters to failure">
-            <MyoUpcomingBar activationLen={15} blue={VAR_CYAN_900} h={H} />
-          </Row>
-          <Row name="Triceps Pushdown" meta="myo · ~12 + clusters to failure">
-            <MyoUpcomingBar activationLen={12} blue={VAR_CYAN_900} h={H} />
-          </Row>
-          <span style={{ fontSize: 10, color: T_TERTIARY, maxWidth: RAIL_W }}>{'Grey activation (expected) + blue "clusters-to-failure" trail that fades and leaves the right edge open — reuses the variable/opportunity blue, signalling "more coming, count unknown."'}</span>
-        </Col>
-      </div>
-    </Page>
-  )
-}
-
-const meta: Meta = {
-  title: 'Lab/Explorations/Set Types',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-type Story = StoryObj
-
-export const Encodings: Story = { render: () => <Sheet /> }

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

@@ -1,240 +0,0 @@
-/**
- * SHEET · Workout Expansion (page 2) — what a rail item reveals when expanded.
- * Anchored on the REAL unexpanded rail row (`ExerciseCardHeading`) as the persistent header, then the
- * revealed body in two REAL-component directions so the fork is concrete:
- *   A — Table   (real `SetTableHeader` + real `SetRow`s — the current expanded body).
- *   C — Embed   (real `VelocityStrip` full/expanded per set + a compact caption — the bar IS the set).
- * B (drop PREV) is a trivial prop on the table, noted but not forked here. Same data across both: set 1 done
- * · set 2 LIVE 5/10 · set 3 upcoming, with velocities that DECAY within a set so the "shape" reading is real.
- * OPEN: A-vs-C · live-set treatment in the body · read-only density (drop TEMPO row? per-row strips?). DECISIONS doc.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
-import { ExerciseCardHeading } from './ExerciseCardHeading'
-import { SetTableHeader } from './SetTableHeader'
-import { SetRow, type SetRowProps } from './SetRow'
-import { VelocityStrip } from './VelocityStrip'
-import { type SetStripSet } from './SetStrip'
-import {
-  INSET,
-  INSET_SHADOW,
-  RAISED,
-  BORDER_SUBTLE,
-  GREEN,
-  T_PRIMARY,
-  T_SECONDARY,
-  T_TERTIARY,
-  Page,
-  sectionTitle,
-  monoTag,
-} from './setHeadingKit'
-
-// Per-rep mean velocity that DECAYS across a set (fast → slow) so bar height/color carries shape.
-const decay = (n: number, start: number, span = 0.5) =>
-  Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
-
-// ---- shared data (real prop shapes) ------------------------------------------------
-// Heading strip (SetStripSet[]): set1 done · set2 active 5/10 · set3 todo.
-const HEADING_STATES: SetStripSet[] = [
-  { status: 'done', velocities: decay(10, 1.05) },
-  { status: 'active', velocities: decay(5, 0.95, 0.3), planned: 10 },
-  { status: 'todo', planned: 10 },
-]
-// Expanded-body per-set rows (real SetRowProps): set 1 done · set 2 LIVE · set 3 todo.
-const BODY_SETS: SetRowProps[] = [
-  {
-    state: 'done',
-    setNumber: 1,
-    reps: 10,
-    weight: 90,
-    rpe: 7.5,
-    unit: 'lbs',
-    velocities: decay(10, 1.05),
-  },
-  {
-    state: 'live',
-    setNumber: 2,
-    unit: 'lbs',
-    target: { reps: 10, weight: 90 },
-    reps: 10,
-    weight: 90,
-    velocities: decay(5, 0.95, 0.3),
-  },
-  { state: 'todo', setNumber: 3, unit: 'lbs', target: { reps: 10, weight: 90 } },
-]
-
-// ---- the real unexpanded rail row, used as the persistent expansion header ---------
-function RailHeader() {
-  return (
-    <View style={{ position: 'relative', zIndex: 2, backgroundColor: RAISED }}>
-      <ExerciseCardHeading
-        name="Cable Chest Press"
-        sets={3}
-        reps={10}
-        load={90}
-        unit="lbs"
-        tempo={[2, 1, 2, 0]}
-        indicator="info"
-        setStates={HEADING_STATES}
-      />
-    </View>
-  )
-}
-
-// ---- A · table body: real SetTableHeader + real SetRow (LOCKED: drop PREV, keep strips)
-function TableBody() {
-  return (
-    <View>
-      <SetTableHeader unit="lbs" showPrevious={false} />
-      {BODY_SETS.map((s, i) => (
-        <SetRow key={i} {...s} />
-      ))}
-    </View>
-  )
-}
-
-// ---- C · embed body: real VelocityStrip (full/expanded) per set + compact caption ---
-const capText = {
-  fontFamily: 'Inter, sans-serif',
-  fontSize: 11,
-  fontWeight: '600' as const,
-  color: T_PRIMARY,
-}
-const dimText = { ...capText, color: T_SECONDARY, fontWeight: '500' as const }
-function EmbedSetRow({ s }: { s: SetRowProps }) {
-  const live = s.state === 'live'
-  const todo = s.state === 'todo'
-  const vels = s.state === 'done' || s.state === 'live' ? s.velocities : []
-  const rpe = s.state === 'todo' ? null : s.rpe
-  return (
-    <View
-      style={{
-        paddingVertical: 7,
-        paddingHorizontal: 10,
-        marginHorizontal: 2,
-        marginBottom: 4,
-        borderRadius: 8,
-        opacity: todo ? 0.55 : 1,
-        ...(live
-          ? {
-              backgroundColor: 'rgba(46,213,115,0.06)',
-              borderWidth: 1,
-              borderColor: 'rgba(46,213,115,0.30)',
-            }
-          : {}),
-      }}
-    >
-      <View style={{ flexDirection: 'row', alignItems: 'baseline', marginBottom: 6 }}>
-        <Text style={{ ...dimText, width: 22, color: T_TERTIARY }}>{s.setNumber}</Text>
-        {s.state === 'live' ? (
-          <Text style={{ ...capText, color: GREEN, fontWeight: '700' }}>
-            {vels.length}/{s.target.reps} × {s.target.weight}
-          </Text>
-        ) : s.state === 'done' ? (
-          <Text style={capText}>
-            {s.reps} × {s.weight}
-          </Text>
-        ) : (
-          <Text style={dimText}>
-            {s.target.reps} × {s.target.weight}
-          </Text>
-        )}
-        <View style={{ flex: 1 }} />
-        {rpe != null && <Text style={dimText}>RPE {rpe}</Text>}
-        {live && <Text style={{ ...capText, color: GREEN, fontWeight: '700' }}>live</Text>}
-      </View>
-      {vels.length > 0 ? (
-        <VelocityStrip velocities={vels} variant="expanded" showInfo={false} />
-      ) : (
-        <View style={{ height: 24, flexDirection: 'row', gap: 2 }}>
-          {Array.from({ length: s.state === 'todo' ? s.target.reps : 10 }).map((_, i) => (
-            <View
-              key={i}
-              style={{
-                flex: 1,
-                height: 6,
-                alignSelf: 'flex-end',
-                backgroundColor: '#2C2C2C',
-                borderRadius: 1,
-                opacity: 0.5,
-              }}
-            />
-          ))}
-        </View>
-      )}
-    </View>
-  )
-}
-function EmbedBody() {
-  return (
-    <View style={{ paddingTop: 6 }}>
-      {BODY_SETS.map((s, i) => (
-        <EmbedSetRow key={i} s={s} />
-      ))}
-    </View>
-  )
-}
-
-// ---- expanded item = real rail header + revealed body ------------------------------
-function ExpandedItem({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <View style={{ gap: 8 }}>
-      <Text style={{ ...monoTag, color: T_SECONDARY }}>{label}</Text>
-      <View
-        style={
-          {
-            width: 260,
-            backgroundColor: INSET,
-            boxShadow: INSET_SHADOW,
-            borderRadius: 4,
-            overflow: 'hidden',
-          } as object
-        }
-      >
-        <RailHeader />
-        <View
-          style={{
-            backgroundColor: INSET,
-            paddingBottom: 8,
-            borderTopWidth: 1,
-            borderTopColor: BORDER_SUBTLE,
-          }}
-        >
-          {children}
-        </View>
-      </View>
-    </View>
-  )
-}
-
-const meta: Meta = {
-  title: 'Lab/Explorations/Workout Expansion',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-type Story = StoryObj
-
-export const DirectionStudy: Story = {
-  name: 'Expanded item · A table / C embed-in-bar (real components)',
-  render: () => (
-    <Page
-      title="Workout expansion — direction study (page 2)"
-      note="LOCKED (2026-07-10): body = direction A, the SetTableHeader+SetRow table, with PREV dropped (real showPrevious={false}) and the per-row velocity strips kept. C (per-rep VelocityStrip becomes the set row) shown for the record — rejected as too novel; the table already carries velocity shape via the per-row strip. Anchored on the REAL unexpanded rail row (ExerciseCardHeading) as the persistent header; data: set 1 done · set 2 live 5/10 · set 3 upcoming, velocities decaying within a set."
-    >
-      <View style={{ flexDirection: 'row', gap: 44, alignItems: 'flex-start', flexWrap: 'wrap' }}>
-        <View style={{ gap: 12 }}>
-          <Text style={sectionTitle}>A · Table (current body)</Text>
-          <ExpandedItem label="real SetTableHeader + SetRow">
-            <TableBody />
-          </ExpandedItem>
-        </View>
-        <View style={{ gap: 12 }}>
-          <Text style={sectionTitle}>C · Embed in the bar</Text>
-          <ExpandedItem label="real VelocityStrip (full) + caption">
-            <EmbedBody />
-          </ExpandedItem>
-        </View>
-      </View>
-    </Page>
-  ),
-}

package/src/components/shell/DashboardShell.stories.tsx

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
-import { DashboardShell } from './DashboardShell'
-
-/**
- * `Pages/DashboardShell` — the wall-dashboard chrome as one registered surface.
- * Composes the shell-nav island (SideNav + TopBar and everything they pull in) over a
- * `children` content slot, so the dashboard app mounts a single component.
- */
-const meta: Meta<typeof DashboardShell> = {
-  title: 'Pages/DashboardShell',
-  component: DashboardShell,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          '**Page shell.** The wall-dashboard chrome. Composes ' +
-          '[SideNav](?path=/docs/shell-sidenav--docs) + ' +
-          '[TopBar](?path=/docs/shell-topbar--docs) — which pulls in DeviceMenu, DeviceRow, ' +
-          'DeviceIndicator, SessionStatePill, BrandLockup, DateTime and Divider — over a ' +
-          '`children` content slot. Mount this instead of re-assembling the chrome per view.',
-      },
-    },
-  },
-  argTypes: {
-    state: { control: 'select', options: ['live', 'rest', 'idle'] },
-    activeKey: { control: 'select', options: ['live', 'review', 'program', 'body'] },
-    liveKey: { control: 'select', options: [null, 'live', 'review', 'program', 'body'] },
-    onNavigate: { control: false },
-    onSelectDevice: { control: false },
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ height: '100vh' as unknown as number, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof DashboardShell>
-
-export const Default: Story = {
-  args: { activeKey: 'live', state: 'live' },
-}
-
-export const WithContent: Story = {
-  args: { activeKey: 'review', state: 'rest', liveKey: 'live' },
-  render: (args) => (
-    <DashboardShell {...args}>
-      <View style={{ flex: 1, padding: 28 }}>
-        <Text style={{ color: '#E5E5E5', fontSize: 22, fontWeight: '700' }}>Review</Text>
-        <Text style={{ color: '#8A8A8A', fontSize: 13, marginTop: 6 }}>
-          A page mounts its content here; the shell keeps the nav + top-bar chrome persistent.
-        </Text>
-      </View>
-    </DashboardShell>
-  ),
-  parameters: {
-    docs: { description: { story: 'The shell with a page mounted in its content slot.' } },
-  },
-}