@titan-design/react-ui 0.5.0 → 0.7.0

package/src/components/custom/Workout/icons.tsx

@@ -1,68 +1,7 @@
-// Inline SVG icons for the Workout badges — replaces the `lucide-react`
-// dependency (dep hygiene, titan 0.5.0). The paths mirror lucide-react's
-// `Dumbbell` and `Star` glyphs verbatim so rendering is pixel-identical to the
-// previous `<Dumbbell>` / `<Star>` output (same viewBox, stroke, fill, and
-// round line caps). Rendered as raw `<svg>` DOM elements — the same web-SVG
-// mechanism `Progress.tsx` uses, and the same surface `lucide-react` produced
-// (both are web-only SVG; native icon rendering was never wired here).
+// Workout icons were promoted to the shared icon primitive
+// (`components/icons`). This shim re-exports them so existing Workout consumers
+// keep their local `./icons` import unchanged.
+export { DumbbellIcon, StarIcon } from '../../icons'
 
-export interface WorkoutIconProps {
-  /** Rendered width/height in px (viewBox is fixed 24×24). */
-  size?: number
-  /** Stroke color. */
-  color?: string
-  /** Fill color; defaults to `none` (outline only). */
-  fill?: string
-  /** Stroke width. */
-  strokeWidth?: number
-}
-
-/** Dumbbell glyph (mirrors lucide-react `Dumbbell`). Outline-only by default. */
-export function DumbbellIcon({
-  size = 24,
-  color = 'currentColor',
-  fill = 'none',
-  strokeWidth = 2,
-}: WorkoutIconProps) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill={fill}
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M14.4 14.4 9.6 9.6" />
-      <path d="M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z" />
-      <path d="m21.5 21.5-1.4-1.4" />
-      <path d="M3.9 3.9 2.5 2.5" />
-      <path d="M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z" />
-    </svg>
-  )
-}
-
-/** Star glyph (mirrors lucide-react `Star`). Pass `fill` for a solid star. */
-export function StarIcon({
-  size = 24,
-  color = 'currentColor',
-  fill = 'none',
-  strokeWidth = 2,
-}: WorkoutIconProps) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill={fill}
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
-    </svg>
-  )
-}
+/** @deprecated Use `IconProps` from `components/icons`. */
+export type { IconProps as WorkoutIconProps } from '../../icons'

package/src/components/custom/Workout/index.ts

@@ -29,6 +29,7 @@ export { WorkoutPill, type WorkoutPillProps, type WorkoutPillStatus } from './Wo
 export {
   VelocityStrip,
   type VelocityStripProps,
+  type VelocitySet,
   type VelocityZoneBandProp,
   getVelocityZoneColor,
   getVelocityZoneName,
@@ -37,10 +38,46 @@ export {
 } from './VelocityStrip'
 export { MuscleGroupChip, type MuscleGroupChipProps, type VolumeStatus } from './MuscleGroupChip'
 export { Sparkline, type SparklineProps } from './Sparkline'
-export { SetRow, type SetRowProps, type SetRowMode } from './SetRow'
+export { SetRow, type SetRowProps, type SetRowState, type SetRowUnit } from './SetRow'
 export { InputBar, type InputBarProps } from './InputBar'
 export { RestTimer, type RestTimerProps } from './RestTimer'
-export { ExerciseCard, type ExerciseCardProps, type ExerciseCardState } from './ExerciseCard'
+export { MetricCell, type MetricCellProps, METRIC_FONT } from './metricText'
+export { SetsRepsLoad, type SetsRepsLoadProps } from './SetsRepsLoad'
+export { SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment } from './SegmentedBar'
+export { paceTone, paceToneColor, type PaceTone } from './paceTone'
+export {
+  SegmentedProgressBar,
+  type SegmentedProgressBarProps,
+  type SegmentedProgressBarSegment,
+} from './SegmentedProgressBar'
+export { MetricTiles, type MetricTilesProps, type MetricTileData } from './MetricTiles'
+export { ScheduleTiles, type ScheduleTilesProps } from './ScheduleTiles'
+export { SetBar, type SetBarProps } from './SetBar'
+export {
+  SetStrip,
+  type SetStripProps,
+  type SetStripSet,
+  SET_STRIP_ZONES,
+  SET_STRIP_VARIABLE_COLOR,
+  velocityZoneColor,
+} from './SetStrip'
+export {
+  ExerciseIndicator,
+  resolveIndicator,
+  INDICATOR_PRECEDENCE,
+  type ExerciseIndicatorProps,
+  type ExerciseIndicatorKind,
+} from './ExerciseIndicator'
+export { ExerciseHeading, type ExerciseHeadingProps } from './ExerciseHeading'
+export { ExerciseCardHeading, type ExerciseCardHeadingProps } from './ExerciseCardHeading'
+export { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
+export { SetTableHeader, type SetTableHeaderProps } from './SetTableHeader'
+export {
+  SessionHeader,
+  type SessionHeaderProps,
+  type SessionHeaderPlanEntry,
+} from './SessionHeader'
+export { SessionRail, type SessionRailProps, type SessionRailExercise } from './SessionRail'
 export { SupersetWrapper, type SupersetWrapperProps } from './SupersetWrapper'
 export {
   MesoProgressBar,
@@ -152,3 +189,19 @@ export type {
   WorkoutProgress,
   WorkoutGroup,
 } from './ActiveWorkoutPage'
+export { ZoneTrack } from './ZoneTrack'
+export type {
+  ZoneTrackProps,
+  ZoneTrackZone,
+  ZoneTrackTick,
+  ZoneTrackMarker,
+  ZoneTrackBand,
+} from './ZoneTrack'
+export { FatigueMeter } from './FatigueMeter'
+export type { FatigueMeterProps } from './FatigueMeter'
+export { VolumeLandmarkBar } from './VolumeLandmarkBar'
+export type { VolumeLandmarkBarProps, VolumeZone } from './VolumeLandmarkBar'
+export { StatusPill, statusPillColor } from './StatusPill'
+export type { StatusPillProps, StatusPillStatus } from './StatusPill'
+export { LiveAuraFrame, liveAuraColor } from './LiveAuraFrame'
+export type { LiveAuraFrameProps, LiveAuraCategory } from './LiveAuraFrame'

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { MetricCell } from './metricText'
+
+/**
+ * `MetricCell` — the shared "segmented metric" typography primitive (Inter · 600 ·
+ * letter-spacing 1). Value cells take a primary color, separators a muted one. The
+ * single source of the value/separator look shared by SetsRepsLoad and TempoDisplay.
+ */
+const meta: Meta<typeof MetricCell> = {
+  title: 'Workout/MetricCell',
+  component: MetricCell,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Primitive.** The shared Inter·600·letter-spacing-1 value/separator cell. ' +
+          'Extracted so the two prescription readouts read as one visual language instead of ' +
+          'drifting copies. Used-by ↑ ' +
+          '[SetsRepsLoad](?path=/docs/workout-setsrepsload--docs) + ' +
+          '[TempoDisplay](?path=/docs/workout-tempodisplay--docs).',
+      },
+    },
+  },
+  argTypes: {
+    color: { control: 'color' },
+    fontSize: { control: { type: 'range', min: 9, max: 24, step: 1 } },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 20, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof MetricCell>
+
+export const ValueCell: Story = {
+  args: { children: '145', color: '#F3F4F6', fontSize: 11 },
+}
+
+export const Separator: Story = {
+  args: { children: '×', color: '#6B7280', fontSize: 11 },
+  parameters: { docs: { description: { story: 'A muted separator cell (× / @ / -).' } } },
+}
+
+export const InContext: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
+      <MetricCell color="#F3F4F6">5</MetricCell>
+      <MetricCell color="#6B7280">&nbsp;×&nbsp;</MetricCell>
+      <MetricCell color="#F3F4F6">8</MetricCell>
+      <MetricCell color="#6B7280">&nbsp;@&nbsp;</MetricCell>
+      <MetricCell color="#F3F4F6">145</MetricCell>
+      <MetricCell color="#6B7280">&nbsp;lb</MetricCell>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Value + separator cells composed into the sets × reps @ load language.',
+      },
+    },
+  },
+}

package/src/components/custom/Workout/metricText.tsx

@@ -0,0 +1,34 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { ReactNode } from 'react'
+import { Text } from 'react-native'
+
+/**
+ * Shared "segmented metric" typography primitive — the Inter · 600 · letter-spacing 1
+ * value/separator cell used by both {@link TempoDisplay} (tempo digits + dashes) and
+ * {@link SetsRepsLoad} (sets × reps @ load). Extracted so the two read as one visual
+ * language instead of drifting copies.
+ */
+export const METRIC_FONT = 'Inter, sans-serif'
+
+export interface MetricCellProps {
+  children: ReactNode
+  /** Cell text color — value cells take a primary color, separators a muted one. */
+  color: string
+  fontSize?: number
+}
+
+export function MetricCell({ children, color, fontSize = 11 }: MetricCellProps) {
+  return (
+    <Text
+      style={{
+        fontFamily: METRIC_FONT,
+        fontSize,
+        color,
+        fontWeight: '600',
+        letterSpacing: 1,
+      }}
+    >
+      {children}
+    </Text>
+  )
+}

package/src/components/custom/Workout/paceTone.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import { paceTone, paceToneColor } from './paceTone'
+
+describe('paceTone', () => {
+  it('reads as neutral when there is no target', () => {
+    expect(paceTone(0.6)).toBe('neutral')
+    expect(paceTone(0)).toBe('neutral')
+  })
+
+  it('reads as ahead when progress equals the target (inclusive)', () => {
+    expect(paceTone(0.5, 0.5)).toBe('ahead')
+  })
+
+  it('reads as ahead when progress is past the target', () => {
+    expect(paceTone(0.8, 0.5)).toBe('ahead')
+  })
+
+  it('reads as behind when progress trails the target', () => {
+    expect(paceTone(0.3, 0.5)).toBe('behind')
+  })
+
+  describe('paceToneColor', () => {
+    it('maps each tone to its real titan literal hex', () => {
+      expect(paceToneColor('ahead')).toBe('#2ED573') // status-success (green 300)
+      expect(paceToneColor('behind')).toBe('#F9B415') // status-warning (amber 300)
+      expect(paceToneColor('neutral')).toBe('#01B5D1') // cyan 400
+    })
+  })
+})

package/src/components/custom/Workout/paceTone.ts

@@ -0,0 +1,27 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+/** How progress compares to its target pace: `ahead`, `behind`, or `neutral` (no target). */
+export type PaceTone = 'ahead' | 'behind' | 'neutral'
+
+/**
+ * Classify `progress` (0..1) against an optional `target` (0..1). No target reads
+ * as `neutral`; at or past target is `ahead`, otherwise `behind`.
+ */
+export function paceTone(progress: number, target?: number): PaceTone {
+  if (target === undefined) return 'neutral'
+  return progress >= target ? 'ahead' : 'behind'
+}
+
+/** Literal-hex fill for each tone (RNW-safe): success · warning · cyan pin. */
+const PACE_TONE_COLORS: Record<PaceTone, string> = {
+  ahead: getSemanticColors('dark')['status-success'],
+  behind: getSemanticColors('dark')['status-warning'],
+  neutral: primitiveRamps.cyan[400],
+}
+
+/** The literal-hex colour for a tone. */
+export function paceToneColor(tone: PaceTone): string {
+  return PACE_TONE_COLORS[tone]
+}

package/src/components/custom/Workout/setHeadingKit.tsx

@@ -0,0 +1,177 @@
+/**
+ * Shared kit for the S3 Session-Rail explorations (NOT a stories file — imported by the sheets under
+ * `Custom/Workout/Explorations/*`). Throwaway CSS R&D at the real 232px rail width, on real titan tokens.
+ * When these decisions harden they move into the real `ExerciseCard` + a titan `SessionRail` organism.
+ */
+import type { ReactNode } from 'react'
+import { TempoDisplay } from './TempoDisplay'
+
+// ---- geometry
+export const RAIL_W = 232
+export const SET_GAP = 5
+
+// ---- surface + text tokens (dark theme; charcoal + neutral ramps)
+export const GREY = '#2C2C2C' // charcoal 300 — upcoming/placeholder
+export const BORDER_SUBTLE = '#1C1C1C' // charcoal 500 — row dividers
+export const T_PRIMARY = '#F3F4F6' // neutral 100
+export const T_SECONDARY = '#9CA3AF' // neutral 400
+export const T_TERTIARY = '#6B7280' // neutral 500
+export const RAISED = '#1F1F1F' // charcoal 400 — nav + heading raised plane
+export const INSET = '#131313' // charcoal 800 — sunk exercise-list column
+// depth lives on the sunk list: inner shadow from the heading (top) + nav (left). Raised plane is flat.
+export const INSET_SHADOW =
+  'inset 0 9px 12px -6px rgba(0,0,0,0.85), inset 7px 0 10px -6px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.02)'
+
+// ---- zone colors = real titan ramp pins (primitiveRamps)
+export const RED = '#D14343' // red 600
+export const ORANGE = '#FF7900' // orange 400
+export const AMBER = '#F9B415' // amber 300
+export const GREEN = '#2ED573' // green 300
+export const velColor = (v: number): string => (v < 0.5 ? RED : v < 0.75 ? ORANGE : v < 1.0 ? AMBER : GREEN)
+
+// active-set pulse: each segment eases along its own ramp (adjacent lighter/darker steps) through the pin.
+export const PULSE_CSS = `
+@keyframes s3pRed{0%,100%{background:#E05254}50%{background:#A4221C}}
+@keyframes s3pOrange{0%,100%{background:#FFA063}50%{background:#DA5F00}}
+@keyframes s3pAmber{0%,100%{background:#FFD352}50%{background:#E08C00}}
+@keyframes s3pGreen{0%,100%{background:#58F69E}50%{background:#21C05D}}`
+export const pulseAnim = (c: string): string | undefined => {
+  const name = c === RED ? 's3pRed' : c === ORANGE ? 's3pOrange' : c === AMBER ? 's3pAmber' : c === GREEN ? 's3pGreen' : null
+  return name ? `${name} 1.9s ease-in-out infinite` : undefined
+}
+
+// ---- sets/reps/load in the TempoDisplay visual language (Inter · 600 · letter-spacing 1 · gray separators)
+const INTER = 'Inter, sans-serif'
+const SRL_SEP = '#6B7280'
+function SRLCell({ children, color = T_PRIMARY }: { children: ReactNode; color?: string }) {
+  return <span style={{ fontFamily: INTER, fontSize: 11, fontWeight: 600, letterSpacing: 1, color }}>{children}</span>
+}
+export function SetsRepsLoad({ sets, reps, load, unit = 'lb' }: { sets: number; reps: number | string; load: number; unit?: string }) {
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'baseline', whiteSpace: 'nowrap' }}>
+      <SRLCell>{sets}</SRLCell>
+      <SRLCell color={SRL_SEP}>&nbsp;×&nbsp;</SRLCell>
+      <SRLCell>{reps}</SRLCell>
+      <SRLCell color={SRL_SEP}>&nbsp;@&nbsp;</SRLCell>
+      <SRLCell>{load}</SRLCell>
+      <SRLCell color={SRL_SEP}>&nbsp;{unit}</SRLCell>
+    </span>
+  )
+}
+
+// ---- per-set bar: one continuous bar, rep intensities as butted segments (no gaps); active segments pulse
+export type SetState = { status: 'done'; reps: number[] } | { status: 'active'; reps: number[]; planned: number } | { status: 'todo'; planned: number }
+export function setColors(s: SetState): string[] {
+  if (s.status === 'todo') return [GREY]
+  if (s.status === 'done') return s.reps.map(velColor)
+  return [...s.reps.map(velColor), ...Array(Math.max(0, s.planned - s.reps.length)).fill(GREY)]
+}
+function SetBar({ colors, h, pulse }: { colors: string[]; h: number; pulse?: boolean }) {
+  return (
+    <div style={{ display: 'flex', flex: 1, minWidth: 0, height: h, borderRadius: 2, overflow: 'hidden' }}>
+      {colors.map((c, i) => (
+        <div key={i} style={{ flex: 1, height: '100%', background: c, animation: pulse && c !== GREY ? pulseAnim(c) : undefined }} />
+      ))}
+    </div>
+  )
+}
+export function SetStrip({ sets, h }: { sets: SetState[]; h: number }) {
+  return (
+    <div style={{ display: 'flex', width: '100%', height: h, gap: SET_GAP }}>
+      {sets.map((s, i) => (
+        <SetBar key={i} colors={setColors(s)} h={h} pulse={s.status === 'active'} />
+      ))}
+    </div>
+  )
+}
+
+export function Indicator({ kind }: { kind: 'pr' | 'issue' | 'info' }) {
+  const map = { pr: ['★', ORANGE], issue: ['!', RED], info: ['i', '#2196F3'] } as const
+  const [glyph, color] = map[kind]
+  return (
+    <span style={{ width: 16, height: 16, borderRadius: 8, border: `1px solid ${color}`, color, fontSize: 10, fontWeight: 800, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{glyph}</span>
+  )
+}
+
+const labelStyle = { fontSize: 14, fontWeight: 800, color: T_PRIMARY } as const
+
+// ---- the finalized heading unit
+export type Exercise = { name: string; sets: number; reps: number | string; load: number; tempo: [number, number, number, number]; indicator?: 'pr' | 'issue' | 'info'; setStates: SetState[]; upcoming?: boolean }
+export function Heading({ ex, stripH }: { ex: Exercise; stripH: number }) {
+  return (
+    <div style={{ padding: '9px 12px', display: 'flex', flexDirection: 'column', opacity: ex.upcoming ? 0.55 : 1 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span style={labelStyle}>{ex.name}</span>
+        <div style={{ flex: 1 }} />
+        {ex.indicator && <Indicator kind={ex.indicator} />}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 1 }}>
+        <SetsRepsLoad sets={ex.sets} reps={ex.reps} load={ex.load} />
+        <div style={{ flex: 1 }} />
+        <TempoDisplay tempo={ex.tempo} size="sm" showLabel={false} showInfo={false} />
+      </div>
+      <div style={{ marginTop: 7 }}>
+        <SetStrip sets={ex.setStates} h={stripH} />
+      </div>
+    </div>
+  )
+}
+
+// ---- sample session (per-rep mean velocities; sets fatigue across the workout, reps decay in-set)
+export const reps = (n: number, start: number, span = 0.4): number[] => Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
+export const SESSION: 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) })) },
+  { name: 'Incline DB Press', sets: 3, reps: 8, load: 70, tempo: [3, 0, 3, 0], setStates: [0.72, 0.62, 0.54].map((s) => ({ status: 'done', reps: reps(8, s) })) },
+  { 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 }] },
+  { 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 })) },
+  { name: 'Face Pull', sets: 3, reps: '15-20', load: 40, tempo: [2, 1, 2, 0], upcoming: true, setStates: [1, 2, 3].map(() => ({ status: 'todo', planned: 18 })) },
+]
+
+// ---- shell chrome (neumorphic): flat raised nav + heading plane; sunk inset exercise list
+export function NavStub() {
+  return (
+    <div style={{ width: 60, alignSelf: 'stretch', position: 'relative', zIndex: 2, background: RAISED, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 12, gap: 8 }}>
+      {['Live', 'Plan', 'Body'].map((t) => (
+        <span key={t} style={{ fontSize: 8, color: T_TERTIARY, fontWeight: 700 }}>{t}</span>
+      ))}
+    </div>
+  )
+}
+export function Rail({ stripH, footer }: { stripH: number; footer?: ReactNode }) {
+  return (
+    <div style={{ width: 246, background: INSET, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ position: 'relative', zIndex: 2, padding: '11px 12px 10px', background: RAISED }}>
+        <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase', color: T_TERTIARY, display: 'flex', alignItems: 'center', gap: 5 }}>
+          <span style={{ width: 6, height: 6, borderRadius: 3, background: GREEN }} />
+          Live session
+        </div>
+        <div style={{ fontSize: 14, fontWeight: 800, marginTop: 3, color: T_PRIMARY }}>Pull A · Intensification</div>
+        <div style={{ fontSize: 10, color: T_SECONDARY, marginTop: 2, fontFamily: 'monospace' }}>ex 3/5 · set 2 live</div>
+      </div>
+      <div style={{ flex: 1, background: INSET, boxShadow: INSET_SHADOW }}>
+        {SESSION.map((ex, i) => (
+          <div key={i} style={{ borderBottom: i < SESSION.length - 1 ? `1px solid ${BORDER_SUBTLE}` : undefined }}>
+            <Heading ex={ex} stripH={stripH} />
+          </div>
+        ))}
+      </div>
+      {footer}
+    </div>
+  )
+}
+
+// ---- page scaffold shared by the sheets
+export function Page({ title, note, children }: { title: string; note: string; children: ReactNode }) {
+  return (
+    <div style={{ minHeight: '100vh', background: '#0A0A0A', color: T_PRIMARY, padding: 28, display: 'flex', flexDirection: 'column', gap: 22, fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+      <style>{PULSE_CSS}</style>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <span style={{ fontSize: 20, fontWeight: 800 }}>{title}</span>
+        <span style={{ fontSize: 12, color: T_SECONDARY, maxWidth: 820 }}>{note}</span>
+      </div>
+      {children}
+    </div>
+  )
+}
+export const sectionTitle = { fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: ORANGE } as const
+export const monoTag = { fontFamily: 'monospace', fontSize: 11, color: T_SECONDARY } as const

package/src/components/custom/index.ts

@@ -5,6 +5,7 @@ export * from './Table'
 export * from './EmptyState'
 export * from './stepper'
 export * from './DateTime'
+export * from './TimerReadout'
 export * from './Metric'
 export * from './Workout'
 export * from './Treemap'

package/src/components/custom/stepper/Stepper.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Stepper, Step, StepIndicator, StepLabel, StepContent } from './Stepper'
 
 const meta: Meta<typeof Stepper> = {
-  title: 'Custom/Stepper',
+  title: 'Components/Molecules/Stepper',
   component: Stepper,
   tags: ['autodocs'],
   argTypes: {

package/src/components/icons/SvgIcon.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+
+export interface IconProps {
+  /** Rendered width/height in px (viewBox is fixed 24×24). */
+  size?: number
+  /** Stroke color (or fill, for solid icons). Defaults to `currentColor` so a wrapper's text token drives it. */
+  color?: string
+  /** Stroke width for outline icons. */
+  strokeWidth?: number
+  /** Fill color; defaults to `none` (outline). */
+  fill?: string
+  /** Accessible title — sets `role="img"` + `<title>`. Omit for a decorative icon (hidden from AT). */
+  title?: string
+}
+
+export interface SvgIconProps extends IconProps {
+  children: ReactNode
+}
+
+/**
+ * Base SVG wrapper for the titan icon set — a 24×24 web-`<svg>` with the shared
+ * accessibility contract (titled → `role="img"` + `<title>`; untitled →
+ * `aria-hidden`) and `currentColor` inheritance. Icons pass their paths as
+ * children plus their stroke/fill defaults.
+ */
+export function SvgIcon({
+  size = 24,
+  color = 'currentColor',
+  strokeWidth = 2,
+  fill = 'none',
+  title,
+  children,
+}: SvgIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={fill}
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...(title ? { role: 'img', 'aria-label': title } : { 'aria-hidden': true })}
+    >
+      {title ? <title>{title}</title> : null}
+      {children}
+    </svg>
+  )
+}