@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,151 +0,0 @@
-/**
- * SHEET · Unified exercise card (page 2) — the LOCKED rail-expansion, hardened onto the
- * REAL {@link ExerciseCard}. The collapsed rail item and the expanded card are ONE object: the
- * persistent header is the real {@link ExerciseCardHeading}, and expanding reveals the body on the
- * SAME surface — PREV dropped, done + upcoming sets share ONE muted treatment, the ACTIVE set
- * stands out by brightness. Every per-row strip is the REAL {@link VelocityStrip} via its `set`
- * descriptor: `mini` (flat 3px) for done/upcoming, and the `compact` velocity-height variant as
- * the active-set SPOTLIGHT (option B, locked). No hand-built prototype strip remains.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
-import { ExerciseCard } from './ExerciseCard'
-import { ExerciseCardHeading } from './ExerciseCardHeading'
-import { VelocityStrip } from './VelocityStrip'
-import { type SetRowProps } from './SetRow'
-import { type SetStripSet } from './SetStrip'
-import { INSET, BORDER_SUBTLE, T_PRIMARY, T_SECONDARY, Page, monoTag } from './setHeadingKit'
-
-const INTER = 'Inter, sans-serif'
-
-/** Per-rep mean velocity that DECAYS across a set (fast → slow). */
-const decay = (n: number, start: number, span = 0.5) =>
-  Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
-
-// The exercise: a flat straight set (Cable Chest Press, 3 × 10 @ 90 lb).
-const DONE = decay(10, 1.05)
-const ACTIVE = decay(5, 0.95, 0.3)
-
-// One data source drives both representations. Set 1 done · set 2 LIVE · set 3 upcoming.
-const SETS: SetRowProps[] = [
-  { state: 'done', setNumber: 1, unit: 'lbs', reps: 10, weight: 90, rpe: 7.5, velocities: DONE },
-  {
-    state: 'live',
-    setNumber: 2,
-    unit: 'lbs',
-    target: { reps: 10, weight: 90 },
-    reps: 5,
-    weight: 90,
-    velocities: ACTIVE,
-  },
-  { state: 'todo', setNumber: 3, unit: 'lbs', target: { reps: 10, weight: 90 } },
-]
-
-// The header's per-set strip: the same lifecycle the card derives internally, built here
-// so the collapsed rail item (ExerciseCardHeading) reads from the same source as the body.
-const HEADER_STATES: SetStripSet[] = [
-  { status: 'done', velocities: DONE },
-  { status: 'active', velocities: ACTIVE, planned: 10 },
-  { status: 'todo', planned: 10 },
-]
-
-const CARD_PROPS = {
-  name: 'Cable Chest Press',
-  summary: { sets: 3, reps: 10, weight: 90, unit: 'lbs' as const },
-  tempo: [2, 1, 2, 0] as [number, number, number, number],
-  indicator: 'info' as const,
-  sets: SETS,
-}
-
-function Surface({ children, width = 260 }: { children: React.ReactNode; width?: number }) {
-  return (
-    <View style={{ width, backgroundColor: INSET, borderRadius: 8, overflow: 'hidden' }}>
-      {children}
-    </View>
-  )
-}
-
-const meta: Meta = {
-  title: 'Lab/Explorations/Unified Exercise Card',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-type Story = StoryObj
-
-export const Unified: Story = {
-  name: 'One object · rail header → expanded body (real ExerciseCard)',
-  render: () => (
-    <Page
-      title="Unified exercise card — the rail heading IS the header"
-      note="The LOCKED rail-expansion, hardened onto the real ExerciseCard. Collapsed, it's the rail item (the real ExerciseCardHeading); expanded, the SAME surface reveals the table body — PREV dropped, done + upcoming sets share ONE muted treatment, the ACTIVE set stands out by brightness. Every per-row strip is the real VelocityStrip: `mini` for done/upcoming, the `compact` velocity-height variant as the active-set spotlight (B, locked). No hand-built prototype strip remains."
-    >
-      <View style={{ flexDirection: 'row', gap: 40, alignItems: 'flex-start', flexWrap: 'wrap' }}>
-        <View style={{ gap: 8 }}>
-          <Text style={{ ...monoTag, color: T_SECONDARY }}>
-            collapsed · rail item (ExerciseCardHeading)
-          </Text>
-          <Surface>
-            <ExerciseCardHeading
-              name={CARD_PROPS.name}
-              sets={3}
-              reps={10}
-              load={90}
-              unit="lbs"
-              tempo={CARD_PROPS.tempo}
-              indicator={CARD_PROPS.indicator}
-              setStates={HEADER_STATES}
-            />
-          </Surface>
-        </View>
-
-        <View style={{ gap: 8 }}>
-          <Text style={{ ...monoTag, color: T_SECONDARY }}>
-            expanded · same header + revealed body
-          </Text>
-          <Surface>
-            <ExerciseCard {...CARD_PROPS} defaultExpanded />
-          </Surface>
-        </View>
-      </View>
-
-      <View style={{ height: 1, backgroundColor: BORDER_SUBTLE, marginVertical: 8 }} />
-
-      <View style={{ gap: 10, maxWidth: 320 }}>
-        <Text style={{ ...monoTag, color: T_SECONDARY }}>
-          the locked active-set spotlight · VelocityStrip variant=&quot;expanded&quot; (bare)
-        </Text>
-        <View style={{ backgroundColor: INSET, borderRadius: 8, padding: 12 }}>
-          <VelocityStrip
-            variant="expanded"
-            showNumbers={false}
-            showInfo={false}
-            height={24}
-            scale="fixed"
-            set={{ type: 'straight', velocities: ACTIVE, planned: 10 }}
-          />
-        </View>
-        <Text style={{ fontFamily: INTER, fontSize: 12.5, color: T_SECONDARY, lineHeight: 19 }}>
-          A small fixed-height (~24px) velocity-HEIGHT strip: bar height ∝ velocity against a fixed
-          1.15 m/s ceiling, planned reps as grey stubs, set-type aware — none of the full
-          variant&apos;s labels, info row, or mount animation. It reads as the same object as the
-          flat `mini` strips above it, just taller and brighter to mark the live set.
-        </Text>
-      </View>
-
-      <Text
-        style={{
-          fontFamily: INTER,
-          fontSize: 12.5,
-          color: T_PRIMARY,
-          lineHeight: 19,
-          maxWidth: 780,
-          marginTop: 6,
-        }}
-      >
-        The header is the same molecule collapsed and expanded — the card reads as one object, the
-        body flowing out of the rail row rather than a separate panel. The expanded card is the real
-        ExerciseCard; its header per-set strip is derived from the same rows the body renders.
-      </Text>
-    </Page>
-  ),
-}

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

@@ -1,408 +0,0 @@
-/**
- * Row Inventory — a READ-ONLY survey of every existing way the Workout library renders
- * "an exercise / set / workout / week / mesocycle" as a row / list-entry / card.
- *
- * Built from the 2026-07-08 duplication audit (S3 SessionRail reuse question). This pane only
- * NAMES and DISPLAYS what exists — no extraction, no changes to the components. It's here so we
- * can eyeball the overlapping row representations together before deciding a reuse strategy.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Component, type ReactNode } from 'react'
-import { View, Text } from 'react-native'
-import { ExerciseCard } from './ExerciseCard'
-import { SetRow } from './SetRow'
-import { WorkoutCard } from './WorkoutCard'
-import { WorkoutPill } from './WorkoutPill'
-import { WeekRow } from './WeekRow'
-import { MesoCard } from './MesoCard'
-import { MesoProgressBar } from './MesoProgressBar'
-import { MuscleGroupChip } from './MuscleGroupChip'
-import { StatusDot } from './StatusDot'
-import { WeightBadge } from './WeightBadge'
-import { PrBadge } from './PrBadge'
-import { PlaceholderStrip } from './PlaceholderStrip'
-import { SupersetWrapper } from './SupersetWrapper'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const t = getSemanticColors('dark')
-
-// ----------------------------------------------------------------------------- gallery scaffold
-class Boundary extends Component<{ children: ReactNode }, { err: string | null }> {
-  state = { err: null as string | null }
-  static getDerivedStateFromError(e: Error) {
-    return { err: e.message }
-  }
-  render() {
-    if (this.state.err)
-      return (
-        <div style={{ color: '#ff6b6b', fontFamily: 'monospace', fontSize: 11, padding: 8 }}>
-          render error: {this.state.err}
-        </div>
-      )
-    return this.props.children
-  }
-}
-
-function Cell({
-  name,
-  entity,
-  expand,
-  width = 340,
-  children,
-}: {
-  name: string
-  entity: string
-  expand: string
-  width?: number
-  children: ReactNode
-}) {
-  return (
-    <div
-      style={{
-        width,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 8,
-        padding: 14,
-        borderRadius: 12,
-        border: '1px solid #24262d',
-        background: '#131418',
-      }}
-    >
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-        <span style={{ fontSize: 13, fontWeight: 800, color: '#E8EAED' }}>{name}</span>
-        <span
-          style={{ fontFamily: 'monospace', fontSize: 10, color: '#5b616d', letterSpacing: 0.3 }}
-        >
-          {entity} · {expand}
-        </span>
-      </div>
-      <div style={{ marginTop: 2 }}>
-        <Boundary>{children}</Boundary>
-      </div>
-    </div>
-  )
-}
-
-function Section({ title, note, children }: { title: string; note?: string; children: ReactNode }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
-        <span
-          style={{
-            fontSize: 11,
-            fontWeight: 800,
-            letterSpacing: 1.2,
-            textTransform: 'uppercase',
-            color: '#FF7900',
-          }}
-        >
-          {title}
-        </span>
-        {note && <span style={{ fontSize: 11, color: '#8D95A3' }}>{note}</span>}
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'flex-start' }}>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-// ----------------------------------------------------------------------------- sample data
-const setVel = [
-  [0.6, 0.58, 0.55, 0.52],
-  [0.58, 0.55, 0.53, 0.5],
-  [0.55, 0.52, 0.5, 0.47],
-]
-const exSets = [1, 2, 3, 4].map((n) => ({
-  state: 'done' as const,
-  setNumber: n,
-  reps: 8,
-  weight: 145,
-  rpe: 6.5 + n * 0.5,
-  unit: 'lbs' as const,
-  velocities: setVel[(n - 1) % 3],
-}))
-const weeks = [
-  {
-    weekNumber: 1,
-    workouts: [
-      { name: 'Upper', status: 'completed' as const },
-      { name: 'Lower', status: 'completed' as const },
-    ],
-  },
-  {
-    weekNumber: 2,
-    workouts: [
-      { name: 'Upper', status: 'current' as const },
-      { name: 'Lower', status: 'upcoming' as const },
-    ],
-  },
-  {
-    weekNumber: 3,
-    workouts: [
-      { name: 'Upper', status: 'upcoming' as const },
-      { name: 'Lower', status: 'upcoming' as const },
-    ],
-  },
-]
-const mesos = [
-  { id: 'm1', name: 'Accumulation', weekCount: 4, status: 'completed' as const },
-  { id: 'm2', name: 'Intensification', weekCount: 3, status: 'current' as const, currentWeek: 2 },
-  { id: 'm3', name: 'Peak', weekCount: 2, status: 'upcoming' as const },
-]
-
-// ----------------------------------------------------------------------------- the pane
-const meta: Meta = {
-  title: 'Lab/Audits/Row Inventory',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-type Story = StoryObj
-
-export const AllRows: Story = {
-  name: 'All row representations',
-  render: () => (
-    <div
-      style={{
-        minHeight: '100vh',
-        background: '#0c0d0f',
-        padding: 28,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 34,
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      }}
-    >
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-        <span style={{ fontSize: 20, fontWeight: 800, color: '#E8EAED' }}>
-          Workout library · row representations
-        </span>
-        <span style={{ fontSize: 12, color: '#8D95A3', maxWidth: 720 }}>
-          Every existing component that draws an exercise / set / workout / week / meso as a list
-          entry. Read-only survey for the S3 reuse decision — names + entity + expand behavior, no
-          code changes.
-        </span>
-      </div>
-
-      <Section
-        title="Exercise"
-        note="3 representations of the one ExerciseCard: collapsed glance, expanded body, upcoming"
-      >
-        <Cell name="ExerciseCard" entity="exercise" expand="collapsed · expandable">
-          <ExerciseCard
-            name="Seated Cable Row"
-            summary={{ sets: 4, reps: 8, weight: 145, unit: 'lbs' }}
-            isPR
-            totalPlannedSets={5}
-            setVelocities={setVel}
-          />
-        </Cell>
-        <Cell name="ExerciseCard" entity="exercise" expand="expanded → reveals SetRows">
-          <ExerciseCard
-            name="Seated Cable Row"
-            defaultExpanded
-            summary={{ sets: 4, reps: 8, weight: 145, unit: 'lbs' }}
-            tempo={[3, 1, 2, 0]}
-            sets={exSets}
-          />
-        </Cell>
-        <Cell name="ExerciseCard" entity="exercise" expand="upcoming (static)">
-          <ExerciseCard
-            name="Face Pull"
-            upcoming
-            prescription="3 × 12-15 @ RPE 7"
-            previousBest="15 × 35 lb"
-          />
-        </Cell>
-      </Section>
-
-      <Section
-        title="Set"
-        note="SetRow is the primitive — one row per set lifecycle state (done / live / todo)"
-      >
-        <Cell name="SetRow" entity="set · done" expand="no · flat mini strip" width={360}>
-          <SetRow
-            state="done"
-            setNumber={1}
-            reps={8}
-            weight={145}
-            rpe={8}
-            unit="lbs"
-            velocities={[0.6, 0.58, 0.55, 0.52]}
-          />
-        </Cell>
-        <Cell name="SetRow" entity="set · live" expand="no · compact spotlight" width={360}>
-          <SetRow
-            state="live"
-            setNumber={2}
-            unit="lbs"
-            target={{ reps: 8, weight: 145 }}
-            reps={8}
-            weight={145}
-            velocities={[0.58, 0.55, 0.53, 0.5]}
-          />
-        </Cell>
-        <Cell name="SetRow" entity="set · todo" expand="no · grey stub strip" width={360}>
-          <SetRow state="todo" setNumber={4} unit="lbs" target={{ reps: 8, weight: 145 }} />
-        </Cell>
-      </Section>
-
-      <Section
-        title="Workout"
-        note="WorkoutCard (full) and WorkoutPill (chip) = two legit densities; ExerciseDetailPage overloads ExerciseCard as a 3rd"
-      >
-        <Cell
-          name="WorkoutCard"
-          entity="workout"
-          expand="expandable · expanded+onToggle → ExerciseCards"
-          width={380}
-        >
-          <WorkoutCard
-            name="Push Day A"
-            date="Mon · Jul 6"
-            duration="52 min"
-            status="today"
-            muscleGroups={[
-              { group: 'chest', label: 'Chest', volumeStatus: 'productive' },
-              { group: 'delts', label: 'Delts', volumeStatus: 'maintenance' },
-              { group: 'triceps', label: 'Triceps', volumeStatus: 'under' },
-            ]}
-            totalSets={18}
-            totalVolume={7340}
-            unit="lbs"
-            onToggle={() => {}}
-          />
-        </Cell>
-        <Cell name="WorkoutPill" entity="workout · chip" expand="no">
-          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-            <WorkoutPill name="Push" status="completed" />
-            <WorkoutPill name="Pull" status="current" />
-            <WorkoutPill name="Legs" status="upcoming" />
-            <WorkoutPill name="Deload" status="deload" />
-          </View>
-        </Cell>
-      </Section>
-
-      <Section
-        title="Week"
-        note="WeekRow is the primitive; ExerciseDetailPage overloads ExerciseCard as a competing week row"
-      >
-        <Cell
-          name="WeekRow"
-          entity="week"
-          expand="no · row of WorkoutPills + intensity bar"
-          width={380}
-        >
-          <WeekRow
-            weekNumber={3}
-            totalWeeks={4}
-            isCurrent
-            intensityLevel={0.55}
-            intensityThreshold={0.8}
-            workouts={weeks[1].workouts}
-          />
-        </Cell>
-      </Section>
-
-      <Section
-        title="Mesocycle"
-        note="3 views for different jobs (list card / timeline / detail) — each with its own status enum"
-      >
-        <Cell
-          name="MesoCard"
-          entity="meso"
-          expand="expandable · expanded+onToggle → WeekRows"
-          width={380}
-        >
-          <MesoCard
-            name="Accumulation"
-            goal="Hypertrophy"
-            split="Upper/Lower"
-            weekRange="Weeks 1-4"
-            currentWeek={2}
-            totalWeeks={4}
-            weeks={weeks}
-            volumeHeatmap={[
-              { group: 'chest', percentage: 80 },
-              { group: 'back', percentage: 70 },
-              { group: 'legs', percentage: 90 },
-            ]}
-          />
-        </Cell>
-        <Cell name="MesoProgressBar" entity="meso · timeline" expand="no · segments" width={380}>
-          <MesoProgressBar mesos={mesos} />
-        </Cell>
-      </Section>
-
-      <Section
-        title="Shared sub-parts"
-        note="appear inside the rows above — not entity rows themselves"
-      >
-        <Cell name="MuscleGroupChip" entity="muscle-group" expand="no">
-          <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-            <MuscleGroupChip name="Chest" volumeStatus="ontrack" />
-            <MuscleGroupChip name="Quads" volumeStatus="behind" />
-            <MuscleGroupChip name="Lats" volumeStatus="over" />
-          </View>
-        </Cell>
-        <Cell name="StatusDot" entity="status glyph" expand="no">
-          <StatusDot variant="success" label="On track" />
-        </Cell>
-        <Cell name="WeightBadge" entity="badge" expand="no">
-          <View style={{ flexDirection: 'row', gap: 8 }}>
-            <WeightBadge value={205} unit="lbs" />
-            <WeightBadge value={217} unit="lbs" isPr />
-          </View>
-        </Cell>
-        <Cell name="PrBadge" entity="badge" expand="no">
-          <PrBadge type="e1rm" animate={false} />
-        </Cell>
-        <Cell name="PlaceholderStrip" entity="pending-set strip" expand="no">
-          <View style={{ flexDirection: 'row', gap: 4 }}>
-            <PlaceholderStrip />
-            <PlaceholderStrip />
-            <PlaceholderStrip />
-          </View>
-        </Cell>
-        <Cell name="SupersetWrapper" entity="grouping bracket" expand="no">
-          <SupersetWrapper label="SS1" color="#FF7900">
-            <View style={{ padding: 10, backgroundColor: t['surface-raised'], borderRadius: 8 }}>
-              <Text style={{ color: '#F3F4F6' }}>Exercise A</Text>
-            </View>
-            <View style={{ padding: 10, backgroundColor: t['surface-raised'], borderRadius: 8 }}>
-              <Text style={{ color: '#F3F4F6' }}>Exercise B</Text>
-            </View>
-          </SupersetWrapper>
-        </Cell>
-      </Section>
-
-      <Section
-        title="Page-level organisms"
-        note="composition roots (390px+), not rows — listed for reference, see their own stories"
-      >
-        {[
-          ['ActiveWorkoutPage', 'renders ExerciseCards + SupersetWrapper + InputBar/RestTimer'],
-          ['ProgramPlanningPage', 'MesoProgressBar + MesoCard → WeekRow → WorkoutCard drill-down'],
-          ['ExerciseDetailPage', 'EntryList overloads ExerciseCard as week AND session rows'],
-          ['MesoStatusCard', 'per-exercise meso detail card (StatusDot + metric grid + gauges)'],
-          ['ReadinessCheck', 'pre-workout factor rows + score gauge'],
-        ].map(([n, d]) => (
-          <div
-            key={n}
-            style={{
-              width: 340,
-              padding: 14,
-              borderRadius: 12,
-              border: '1px dashed #31343d',
-              background: '#0f1012',
-            }}
-          >
-            <div style={{ fontSize: 13, fontWeight: 800, color: '#E8EAED' }}>{n}</div>
-            <div style={{ fontSize: 11, color: '#8D95A3', marginTop: 4 }}>{d}</div>
-          </div>
-        ))}
-      </Section>
-    </div>
-  ),
-}

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

@@ -1,46 +0,0 @@
-/**
- * SHEET · Finalization — the full session rail next to the left nav (neumorphic).
- * Open item: depth tuning · 4-vs-8px strip height · indicator taxonomy. See DECISIONS-ExerciseRow doc.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { NavStub, Rail, Page, T_TERTIARY } from './setHeadingKit'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const t = getSemanticColors('dark')
-
-type Args = { stripHeight: number }
-const meta: Meta<Args> = {
-  title: 'Lab/Explorations/Full Rail',
-  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 NextToNav: Story = {
-  name: 'Full look · next to left nav',
-  render: (args) => (
-    <Page
-      title="Session rail — full look next to left nav"
-      note="Neumorphic: flat raised nav + heading plane (#1F1F1F); sunk inset exercise list (#131313), depth from the list's inset shadows only. Per-set segmented strip · active pulse · tempo language · no e1RM. Drag stripHeight. OPEN: 4 vs 8px · depth tuning · left-inset strength · indicator taxonomy."
-    >
-      <div style={{ display: 'flex', alignItems: 'stretch', width: 'fit-content' }}>
-        <NavStub />
-        <Rail stripH={args.stripHeight} />
-        <div
-          style={{
-            width: 140,
-            background: t['background-base'],
-            alignSelf: 'stretch',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <span style={{ fontSize: 10, color: T_TERTIARY, fontFamily: 'monospace' }}>stage</span>
-        </div>
-      </div>
-    </Page>
-  ),
-}