@titan-design/react-ui 0.12.1 → 0.13.0

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export { cn } from './cn'
+export { formatCompact, formatSignedCompact } from './number-format'
 export {
   getStatusColor,
   getResultColor,
@@ -20,13 +21,7 @@ export {
   validationRules,
   composeValidators,
 } from './form'
-export type {
-  FieldState,
-  FieldWrapperProps,
-  FormValues,
-  FormErrors,
-  FormTouched,
-} from './form'
+export type { FieldState, FieldWrapperProps, FormValues, FormErrors, FormTouched } from './form'
 export {
   roundRpe,
   rpeColor,

package/src/utils/number-format.ts

@@ -0,0 +1,17 @@
+/**
+ * Compact integer formatting for dense readouts (stat tiles, sparkline
+ * captions) where a full-precision number would blow the column width.
+ */
+
+/** 1234 → "1.2k", 1048576 → "1.0M", 42 → "42". Sign is preserved. */
+export function formatCompact(n: number): string {
+  const abs = Math.abs(n)
+  if (abs >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+  if (abs >= 1_000) return (n / 1_000).toFixed(1) + 'k'
+  return String(n)
+}
+
+/** Like {@link formatCompact} but always signed: 514689 → "+514.7k", -20 → "-20". */
+export function formatSignedCompact(n: number): string {
+  return (n >= 0 ? '+' : '') + formatCompact(n)
+}

package/src/utils/workout-format.ts

@@ -52,6 +52,20 @@ export function formatSignedPct(ratio: number): string {
   return `${pct > 0 ? '+' : ''}${pct}%`
 }
 
+/**
+ * Rep-range label, e.g. `"8–10"`. `"8"` when the bounds are equal or only one is
+ * given; `null` when neither is set. Shared by {@link formatPrescription} and the
+ * set strip's per-set prescribed-range label so the two never drift apart.
+ */
+export function formatRepsRange(repsLow?: number, repsHigh?: number): string | null {
+  if (repsLow != null && repsHigh != null) {
+    return repsLow === repsHigh ? `${repsLow}` : `${repsLow}–${repsHigh}`
+  }
+  if (repsLow != null) return `${repsLow}`
+  if (repsHigh != null) return `${repsHigh}`
+  return null
+}
+
 /** Structured prescription for the active exercise (from the plan). */
 export interface PrescriptionInput {
   repsLow?: number
@@ -67,12 +81,7 @@ export interface PrescriptionInput {
  */
 export function formatPrescription(p: PrescriptionInput | null | undefined): string | null {
   if (p == null) return null
-  let reps: string | null = null
-  if (p.repsLow != null && p.repsHigh != null) {
-    reps = p.repsLow === p.repsHigh ? `${p.repsLow}` : `${p.repsLow}–${p.repsHigh}`
-  } else if (p.repsLow != null) {
-    reps = `${p.repsLow}`
-  }
+  const reps = formatRepsRange(p.repsLow, p.repsHigh)
   const weight = p.weightLbs != null ? `${p.weightLbs} lb` : null
   const head = [reps, weight].filter((s): s is string => s != null).join(' @ ')
   const rpe = p.rpe != null ? `RPE ${p.rpe}` : null

package/src/web-jsx/jsx-runtime.ts

@@ -10,11 +10,7 @@
  * native Metro). It is only inlined into the dist by tsup via
  * an esbuild onResolve plugin.
  */
-import {
-  jsx as reactJsx,
-  jsxs as reactJsxs,
-  Fragment,
-} from 'react/jsx-runtime'
+import { jsx as reactJsx, jsxs as reactJsxs, Fragment } from 'react/jsx-runtime'
 import type { StyleProp } from 'react-native'
 
 type JsxFn = typeof reactJsx

package/tailwind.config.js

@@ -183,6 +183,11 @@ module.exports = {
         mono: ['var(--font-family-mono)', 'monospace'],
       },
       fontSize: {
+        // Micro steps. `2xs` carries a paired line-height like the rest of the
+        // scale (Typography's microLabel needs it); `3xs` is bare because a pill
+        // capsule takes its height from padding, not from the label's leading.
+        '3xs': '0.5625rem',
+        '2xs': ['0.625rem', { lineHeight: '0.875rem' }],
         xs: ['0.75rem', { lineHeight: '1rem' }],
         sm: ['0.875rem', { lineHeight: '1.25rem' }],
         base: ['1rem', { lineHeight: '1.5rem' }],

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