@titan-design/react-ui 0.6.0 → 0.7.0

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

@@ -0,0 +1,176 @@
+/**
+ * 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 { primitiveColors, primitiveRamps as ramp } 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 = primitiveColors.charcoal[200] // #3C3C3C — lighter charcoal (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 · charcoal 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

@@ -0,0 +1,240 @@
+/**
+ * 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/custom/Workout/ScheduleTiles.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ScheduleTiles } from './ScheduleTiles'
+
+const HOUR = 60 * 60 * 1000
+const DAY = 24 * HOUR
+
+// Deterministic reference: fix `now` and offset `when` from it so the `soon`
+// accent (and the relative Until text) is stable across renders.
+const NOW = Date.now()
+
+const meta: Meta<typeof ScheduleTiles> = {
+  title: 'Workout/ScheduleTiles',
+  component: ScheduleTiles,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs); Until reuses [DateTime](?path=/docs/custom-datetime--docs) relative. Used-by ↑ SessionHeader.',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ScheduleTiles>
+
+export const TwoDaysOut: Story = {
+  args: {
+    now: NOW,
+    when: NOW + 2 * DAY,
+  },
+}
+
+export const SoonUnderADay: Story = {
+  args: {
+    now: NOW,
+    when: NOW + 5 * HOUR,
+  },
+}

package/src/components/custom/Workout/ScheduleTiles.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { ScheduleTiles, compactUntil } from './ScheduleTiles'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+
+const HOUR = 60 * 60 * 1000
+const DAY = 24 * HOUR
+const ORANGE = primitiveRamps.orange[400]
+
+// A fixed reference; the compact Until label is deterministic from (when - now).
+const NOW = Date.now()
+
+describe('ScheduleTiles', () => {
+  it('renders Date, Time, and Until tiles', () => {
+    render(<ScheduleTiles now={NOW} when={NOW + 2 * DAY} />)
+    expect(screen.getByText('Date')).toBeInTheDocument()
+    expect(screen.getByText('Time')).toBeInTheDocument()
+    expect(screen.getByText('Until')).toBeInTheDocument()
+  })
+
+  it('does not accent the Until value when more than a day away', () => {
+    const when = NOW + 2 * DAY
+    render(<ScheduleTiles now={NOW} when={when} />)
+    const value = screen.getByText(compactUntil(when - NOW))
+    expect(value.style.color).toBe('')
+  })
+
+  it('accents the Until value orange when less than a day away', () => {
+    const when = NOW + 5 * HOUR
+    render(<ScheduleTiles now={NOW} when={when} />)
+    const value = screen.getByText(compactUntil(when - NOW))
+    expect(value).toHaveStyle({ color: ORANGE })
+  })
+})

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

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+import { type ViewProps } from 'react-native'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { HStack } from '../../ui/stack'
+import { Tile } from '../../ui/tile/Tile'
+import { formatDateTime } from '../DateTime/DateTime'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+
+/** Accent applied to the Until value when the session is < 1 day away. */
+const SOON_ACCENT = primitiveRamps.orange[400]
+
+/** Compact time-until label: `30m` / `5h` / `2d` / `3w`. Deterministic from the delta. */
+export function compactUntil(ms: number): string {
+  if (ms <= 0) return 'now'
+  const min = Math.round(ms / 60000)
+  if (min < 60) return `${min}m`
+  const hr = Math.round(min / 60)
+  if (hr < 24) return `${hr}h`
+  const d = Math.round(hr / 24)
+  if (d < 7) return `${d}d`
+  return `${Math.round(d / 7)}w`
+}
+
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12
+
+export interface ScheduleTilesProps extends ViewProps {
+  /** The scheduled moment (timestamp in ms or Date object). */
+  when: number | Date
+  /** Reference "now"; injectable so the until/accent calc is deterministic in tests. Defaults to the mount time. */
+  now?: number
+  /** Gap between the tiles (default 1). */
+  gap?: Gap
+}
+
+/**
+ * ScheduleTiles — Date / Time / Until row for an upcoming session.
+ *
+ * An HStack of three {@link Tile}s derived from a single scheduled moment. The
+ * Until value reuses {@link formatDateTime} relative formatting and turns
+ * accent-orange only when the session is less than a day away.
+ *
+ * @example
+ * <ScheduleTiles when={Date.now() + 5 * 60 * 60 * 1000} />
+ */
+export function ScheduleTiles({ when, now, gap = 1, ...props }: ScheduleTilesProps) {
+  // Capture a stable mount-time "now" when the prop is omitted (Date.now() is
+  // impure, so it lives in a hook initializer per the render-purity rule).
+  const [mountNow] = useState(() => Date.now())
+  const reference = now ?? mountNow
+  const whenMs = when instanceof Date ? when.getTime() : when
+  const soon = whenMs - reference < DAY_MS
+  const time = new Date(whenMs).toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  })
+
+  return (
+    <HStack gap={gap} {...props}>
+      <Tile label="Date" value={formatDateTime(when, 'short')} />
+      <Tile label="Time" value={time} />
+      <Tile
+        label="Until"
+        value={compactUntil(whenMs - reference)}
+        valueColor={soon ? SOON_ACCENT : undefined}
+      />
+    </HStack>
+  )
+}

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

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { SegmentedBar } from './SegmentedBar'
+
+/**
+ * `SegmentedBar` — a horizontal track split into weighted, individually-fillable
+ * segments. Each segment is a flex slot holding a left-aligned colour fill; `pulse`
+ * segments breathe on a shared active-pulse loop and an optional `marker` drops a
+ * vertical line at a fraction of the width. Colours are passed-in literal hex.
+ */
+const meta: Meta<typeof SegmentedBar> = {
+  title: 'Workout/SegmentedBar',
+  component: SegmentedBar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Atom.** A horizontal track split into weighted, individually-fillable ' +
+          'segments (weight · fill · colour · pulse) with an optional marker line — the ' +
+          'presentational primitive the per-set strips build on. ' +
+          'Used-by ↑ [SetStrip](?path=/docs/workout-setstrip--docs).',
+      },
+    },
+  },
+  argTypes: {
+    height: { control: { type: 'range', min: 2, max: 24, step: 1 } },
+    gap: { control: { type: 'range', min: 0, max: 12, step: 1 } },
+    radius: { control: { type: 'range', min: 0, max: 12, step: 1 } },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 240, padding: 16, backgroundColor: '#131313' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SegmentedBar>
+
+export const EqualSegments: Story = {
+  args: {
+    height: 8,
+    segments: [
+      { color: '#D14343' },
+      { color: '#FF7900' },
+      { color: '#F9B415' },
+      { color: '#2ED573' },
+    ],
+  },
+}
+
+export const Weighted: Story = {
+  args: {
+    height: 12,
+    gap: 4,
+    radius: 6,
+    segments: [
+      { color: '#2ED573', weight: 3 },
+      { color: '#F9B415', weight: 2 },
+      { color: '#D14343', weight: 1 },
+    ],
+  },
+  parameters: {
+    docs: { description: { story: 'Segments sized by `weight`, with a gap and rounded slots.' } },
+  },
+}
+
+export const PartialFills: Story = {
+  args: {
+    height: 12,
+    gap: 4,
+    radius: 6,
+    segments: [
+      { color: '#2ED573', fill: 1 },
+      { color: '#F9B415', fill: 0.6 },
+      { color: '#01B5D1', fill: 0.3, pulse: true },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Each slot fills a fraction of its width; the last one pulses.' },
+    },
+  },
+}
+
+export const WithMarker: Story = {
+  args: {
+    height: 10,
+    radius: 5,
+    segments: [{ color: '#01B5D1', fill: 0.7 }],
+    marker: { position: 0.5, color: '#FFFFFF' },
+  },
+  parameters: {
+    docs: { description: { story: 'A single fill with a target marker at the halfway point.' } },
+  },
+}