@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/custom/Workout/README.md

@@ -86,11 +86,50 @@ type props without pulling the dependency.
      └─ SetStrip
         └─ SetBar × N               (one set's per-rep colour bar)
 
-  ExerciseCard state="rail"  ──delegates to──▶  ExerciseCardHeading
+  ExerciseCard (all three representations)  ──delegates to──▶  ExerciseCardHeading
   ```
 
-  `ExerciseCard`'s `rail` state is now a thin adapter that delegates to
-  `ExerciseCardHeading` (so the heading is reusable without the card). `SetBar`
+  **TD-03.55 / TD-03.56 — one row, three densities, and interaction states.**
+  `ExerciseCardHeading` IS the exercise row. Its `density` prop carries the only
+  axis that ever separated the three call sites:
+
+  | `density`  | shape                                                   | was                          |
+  | ---------- | ------------------------------------------------------- | ---------------------------- |
+  | `rail`     | two lines: name, then prescription beside the tempo      | `ExerciseCardHeading`        |
+  | `compact`  | one line: name + prescription, strip below               | `ExerciseCard`'s CollapsedCard |
+  | `upcoming` | `compact`, dimmed, previous best pinned right            | `ExerciseCard`'s UpcomingCard  |
+
+  `CollapsedCard` and `UpcomingCard` are deleted; `ExerciseCard` maps its props onto
+  the row, so **its own prop shape is unchanged** and no consumer migrates. Three
+  things converged in the process, each a consistency gain rather than a new idea:
+  the collapsed row's freeform `3×6 @ 175 lbs` caption became the shared
+  `SetsRepsLoad` line; its hand-rolled `VelocityStrip` + `PlaceholderStrip` row
+  became one `SetStrip` (so `velocityZones` no longer tints the collapsed glance —
+  the expanded header already ignored it); and `isPR` surfaces through the
+  `ExerciseIndicator` chip, which is what the expanded header already did.
+
+  The prescription is a **discriminated union**: either the structured
+  `sets`/`reps`/`load` triple, or a free-text `prescription` string for an exercise
+  whose numbers aren't loaded, or neither. Mixing them is a type error rather than a
+  half-rendered line.
+
+  Interaction states are `interactive-*` token washes on the row —
+  **press > selection > hover** — plus an `isLive` name tone (`status-live`). Every
+  one is static: this row renders on the wall during a set, where titan's "the grain
+  never animates" rule applies. Hover is web-only; RN Pressable's `onHoverIn` never
+  fires on a touch surface, so a touch consumer simply gets no hover state and
+  `isSelected` carries the same "this one" meaning. Selection has **no ARIA**:
+  `aria-selected` is not allowed on `role="button"`, so the wash is the whole signal
+  and list semantics stay the rail's job.
+
+  Two follow-ups are deliberately NOT taken here. The dim depths still differ by
+  density (rail 0.55, card 0.60) because they came from two specimens and converging
+  them needs an **opacity token the set does not have** — a foundations decision.
+  And `exerciseRowState.ts` (the `interactive-*` → literal-hex map, written in the
+  shape of `onSurfaceColors`) should be **promoted into the surface module** the
+  moment a second family needs row washes.
+
+  `SetBar`
   owns the per-set colour/pulse logic; `SetStrip` lays several side by side.
   Beyond the flat `done`/`active`/`todo` sets, `SetStripSet` models set-type
   prescriptions: `range` (variable rep-range — range-max segments, committed-todo grey
@@ -102,9 +141,13 @@ type props without pulling the dependency.
   (`SET_STRIP_VARIABLE_COLOR`) is the shared "variable / unknown / opportunity" pin.
   `SegmentedBar` carries these via additive `leadingGap` (per-segment left margin) and
   static `opacity` props — the flat sets stay byte-identical.
+  `active`/`todo` sets optionally carry the plan's prescribed rep RANGE (`repsLow`/
+  `repsHigh`, VMCP-03.04), rendered as a small label above the bar (`8–12`, or `8` when
+  equal/only one is given) via the shared `formatRepsRange` helper — independent of
+  `range`'s `floor`/`max` value range.
   `SetStrip`/`SetBar` colors are the real titan ramp pins (`primitiveRamps` red-600 /
-  orange-400 / amber-300 / green-300); the rail surfaces bind to the charcoal ramp +
-  a subtle neumorphic inset (`neumorphicShadows.charcoal.pressed.subtle`). The heading
+  orange-400 / amber-300 / green-300); the rail surfaces bind to the grey ramp and the
+  list is a well cut with the shared `insetWell` material. The heading
   design is locked in `sources/design/shell/S3-sessionrail/DECISIONS-ExerciseRow.md`; the
   exploration specimens live under `Custom/Workout/Explorations/*` (do not repoint yet).
   In Storybook the family nests by composition under **`Shell/SessionRail/…`**
@@ -126,7 +169,7 @@ type props without pulling the dependency.
   array (unchanged, still the source of truth for `SetRow` / `ExerciseCard`), the
   strip accepts an optional structured `VelocitySet` descriptor and renders the
   strength set-type vocabulary as a typed slot list. Slots are
-  `rep` (velocity-coloured) · `todo` (charcoal-300 grey) · `variable` /
+  `rep` (velocity-coloured) · `todo` (`border-prominent` grey) · `variable` /
   `continue` (`SET_STRIP_VARIABLE_COLOR` cyan-900; `continue` adds a cyan-800
   outline to read as "keep going"). Types: `straight` (done + grey todo to
   `planned`), `range` (committed grey + a cyan variable window `floor..max`),
@@ -178,14 +221,22 @@ Modalities`** (each card carries a `Collapse` accordion; promoted from the
   when neither side carries one the gutter is omitted entirely. The label keeps the prior
   vertical (rotated) orientation so it never overlaps the bars. Two scales: `hero` (tall
   wings, per-rep m/s velocity labels, a dashed running-best reference line per side) and
-  `rail` (compact — no velocity labels / reference lines, slot names in a narrow gutter).
-  **Rep-index alignment is the invariant:** column *i* is rep *i* on
-  both sides, so the set-type slot *kinds* carry through (rep / todo / variable / continue,
+  `dual-expanded` (compact — no velocity labels / reference lines, slot names in a narrow
+  gutter).
+  **Rep-index alignment is the invariant:** column _i_ is rep _i_ on
+  both sides, so the set-type slot _kinds_ carry through (rep / todo / variable / continue,
   coloured as in the single strip) but the wide-notch chunk **gaps** (drop / myo / cluster
   boundaries) are intentionally NOT rendered — per-side horizontal gaps would break the
   mirrored L↔R column alignment. Single-voltra sets keep using `VelocityStrip`
-  `variant="hero"`. Documented by the `Playground` / `Hero*` / `Rail` stories on the wall
-  background (`Workout/DataViz/DualVelocityStrip`).
+  `variant="hero"`. Documented by the `Playground` / `Hero*` / `DualExpanded` stories on the
+  wall background (`Custom/Workout/DataViz/DualVelocityStrip`).
+
+  **`variant="rail"` → `variant="dual-expanded"` (VW-97).** `rail` was a verified misnomer —
+  this variant is the value-height strip a session-rail row _expands into_, not the rail
+  itself (the rail stays 246px and never changes width; expansion lives in a separate detail
+  pane, per the VW-97 rail-width decision). `rail` is kept as a **deprecated alias** for one
+  release (same renderer, same output) so existing call sites keep working; migrate to
+  `dual-expanded` and expect `rail` to be removed in a future release.
 
   **Reuse audit — `DashedReferenceLine` (in-file today, top-level follow-up).** The dashed
   running-best line was hand-rolled three times inside `VelocityStrip.tsx` (the single
@@ -199,6 +250,7 @@ Modalities`** (each card carries a `Collapse` accordion; promoted from the
   a follow-up so the hero PR stays focused (the cross-file migration touches `Sparkline`'s
   test surface and the Lab specimens, which are out of this branch's scope). Proposed API:
   `<ReferenceLine anchor offset color dashed opacity? label? testID />`.
+
 - **RestTimer `ring` variant** — the across-the-room **wall** rest treatment (the
   north-star rest page). Built as a **three-tier decomposition** (not a one-off):
   `CircularProgress` (atom, gained a **`children`** center slot + a **`fill`**
@@ -215,7 +267,7 @@ Modalities`** (each card carries a `Collapse` accordion; promoted from the
   hides the shared `RestActions` (+30s/Skip, extracted, used by both variants);
   `size` (default 180) sets the diameter; the eyebrow/section title is organism
   chrome. Web/RNW-only (like `CircularProgress`) — the wall variant; mobile keeps
-  `bar`. `Ring*` (RestTimer) + `Custom/CircularTimer` stories on the wall background.
+  `bar`. `Ring*` (RestTimer) + `Components/Molecules/CircularTimer` stories on the wall background.
 - **`size="wall"` density (FatigueMeter · ZoneTrack)** — the across-the-room
   dashboard scale, added as the idiomatic titan `size` union (a JS number-map per
   component; **`default` values are byte-identical** to before, so existing consumers are
@@ -298,8 +350,7 @@ responsive level views land (removal is out of scope for this scaffold ticket):
   (Workout Expansion), `S3SetTypes` (Set Types), `S3SessionPace` (Session Pace).
   Each is superseded by a real Shell/SessionRail component + its Storybook stories;
   `S3SessionPace` in particular is superseded by the `SessionHeader` pace glance.
-- **`ExerciseCard`'s `collapsed` / `upcoming` state representations** — the rail now
-  owns the live-list heading (`rail` state → `ExerciseCardHeading`) and the expanded
-  view is moving to `ExpandedDrawer`. Once the responsive unification (TD-03.56)
-  lands a single responsive card, the `collapsed`/`upcoming` branches of
-  `ExerciseCard` are the superseded representations to retire.
+- **`ExerciseCard`'s `collapsed` / `upcoming` state representations** — DONE
+  (TD-03.56). Both hand-rolled sub-cards are deleted; `ExerciseCard` now delegates
+  all three representations to `ExerciseCardHeading` and its `density` prop. What
+  remains to retire is the expanded view, which is moving to `ExpandedDrawer`.

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

@@ -16,8 +16,9 @@ const staticFactors: ReadinessFactor[] = FACTOR_SEED.map((f) => ({
 }))
 
 const meta: Meta<typeof ReadinessCheck> = {
-  title: 'Workout/ReadinessCheck',
+  title: 'Custom/Workout/ReadinessCheck',
   component: ReadinessCheck,
+  parameters: { docs: { description: { component: 'Composes **Card** · **Badge**.' } } },
   tags: ['autodocs'],
   argTypes: {
     score: {
@@ -89,7 +90,7 @@ export const WithWarmUpCaution: Story = {
 
 function InteractiveReadinessCheck() {
   const [values, setValues] = useState<Record<string, number>>(
-    Object.fromEntries(FACTOR_SEED.map((f) => [f.id, f.value])),
+    Object.fromEntries(FACTOR_SEED.map((f) => [f.id, f.value]))
   )
 
   const factors: ReadinessFactor[] = FACTOR_SEED.map((f) => ({

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

@@ -22,9 +22,7 @@ describe('ReadinessCheck', () => {
   describe('rendering', () => {
     it('renders the title and one row per factor', () => {
       render(<ReadinessCheck {...baseProps} factors={makeFactors()} />)
-      expect(screen.getByTestId('readiness-check-title')).toHaveTextContent(
-        'How are you feeling?',
-      )
+      expect(screen.getByTestId('readiness-check-title')).toHaveTextContent('How are you feeling?')
       expect(screen.getByTestId('readiness-check-factor-sleep')).toBeInTheDocument()
       expect(screen.getByTestId('readiness-check-factor-stress')).toBeInTheDocument()
     })
@@ -78,7 +76,7 @@ describe('ReadinessCheck', () => {
           {...baseProps}
           factors={makeFactors()}
           warmUpValidation={{ velocityDeficit: 5, recommendation: 'OK', status: 'good' }}
-        />,
+        />
       )
       expect(screen.queryByTestId('readiness-check-warmup')).not.toBeInTheDocument()
     })
@@ -94,13 +92,13 @@ describe('ReadinessCheck', () => {
             recommendation: 'Reduce load today.',
             status: 'caution',
           }}
-        />,
+        />
       )
       expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
-        '18% below 14-day average',
+        '18% below 14-day average'
       )
       expect(screen.getByTestId('readiness-check-warmup-recommendation')).toHaveTextContent(
-        'Reduce load today.',
+        'Reduce load today.'
       )
       expect(screen.getByTestId('readiness-check-warmup-badge')).toHaveTextContent('Caution')
     })
@@ -112,10 +110,10 @@ describe('ReadinessCheck', () => {
           factors={makeFactors()}
           warmUpCompleted
           warmUpValidation={{ velocityDeficit: 0, recommendation: 'Proceed.', status: 'good' }}
-        />,
+        />
       )
       expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
-        'Velocity on 14-day average',
+        'Velocity on 14-day average'
       )
     })
 
@@ -126,10 +124,10 @@ describe('ReadinessCheck', () => {
           factors={makeFactors()}
           warmUpCompleted
           warmUpValidation={{ velocityDeficit: -6, recommendation: 'Proceed.', status: 'good' }}
-        />,
+        />
       )
       expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
-        'Velocity 6% above 14-day average',
+        'Velocity 6% above 14-day average'
       )
     })
   })
@@ -149,15 +147,11 @@ describe('ReadinessCheck', () => {
 
     it('exposes the readiness score on the gauge', () => {
       render(<ReadinessCheck {...baseProps} factors={makeFactors()} score={78} />)
-      expect(
-        screen.getByLabelText('Readiness score: 78 out of 100'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Readiness score: 78 out of 100')).toBeInTheDocument()
     })
 
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <ReadinessCheck {...baseProps} factors={makeFactors()} />,
-      )
+      const { container } = render(<ReadinessCheck {...baseProps} factors={makeFactors()} />)
       expect(await axe(container)).toHaveNoViolations()
     })
 
@@ -173,7 +167,7 @@ describe('ReadinessCheck', () => {
             status: 'moderate',
           }}
           onConfirm={vi.fn()}
-        />,
+        />
       )
       expect(await axe(container)).toHaveNoViolations()
     })

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

@@ -3,11 +3,13 @@ import { View, Text, Pressable } from 'react-native'
 import { Card } from '../../ui/card'
 import { Badge, type BadgeColor } from '../../ui/badge'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
 const BRAND_PRIMARY = t['brand-primary']
-const BRAND_PRIMARY_SUBTLE = 'rgba(255,121,0,0.12)'
+const ON_BRAND_PRIMARY = t['on-brand-primary']
+const BRAND_PRIMARY_SUBTLE = alpha(BRAND_PRIMARY, 0.12)
 const STATUS_SUCCESS = t['status-success']
 const STATUS_WARNING = t['status-warning']
 const STATUS_ERROR = t['status-error']
@@ -71,7 +73,11 @@ const WARMUP_BADGE: Record<WarmUpStatus, { color: BadgeColor; label: string }> =
 }
 
 function emojiSet(factor: ReadinessFactor): readonly string[] {
-  return EMOJI_SETS[factor.id.toLowerCase()] ?? EMOJI_SETS[factor.label.toLowerCase()] ?? DEFAULT_EMOJI_SET
+  return (
+    EMOJI_SETS[factor.id.toLowerCase()] ??
+    EMOJI_SETS[factor.label.toLowerCase()] ??
+    DEFAULT_EMOJI_SET
+  )
 }
 
 /** Warm-up velocity phrasing. Deficit is % below the 14-day average, so a
@@ -158,7 +164,12 @@ function ScoreGauge({ score }: { score: number }) {
       }}
     >
       <Text
-        style={{ fontSize: 20, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif', color }}
+        style={{
+          fontSize: 20,
+          fontWeight: '700',
+          fontFamily: '"Space Grotesk", sans-serif',
+          color,
+        }}
         testID="readiness-check-score-value"
       >
         {score}
@@ -260,7 +271,14 @@ export function ReadinessCheck({
             opacity: pressed ? 0.8 : 1,
           })}
         >
-          <Text style={{ fontSize: 13, fontWeight: '700', fontFamily: 'Inter, sans-serif', color: '#FFFFFF' }}>
+          <Text
+            style={{
+              fontSize: 13,
+              fontWeight: '700',
+              fontFamily: 'Inter, sans-serif',
+              color: ON_BRAND_PRIMARY,
+            }}
+          >
             Start Workout
           </Text>
         </Pressable>

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

@@ -1,9 +1,13 @@
 import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { RestTimer } from './RestTimer'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof RestTimer> = {
-  title: 'Workout/RestTimer',
+  title: 'Custom/Workout/RestTimer',
   component: RestTimer,
   tags: ['autodocs'],
   parameters: {
@@ -16,7 +20,8 @@ const meta: Meta<typeof RestTimer> = {
           'across-the-room wall treatment: a draining countdown ring (composes `CircularProgress`) ' +
           'with the mm:ss countdown in its center, flipping to a full `success` ring reading "GO" ' +
           'when rest is up. `displayOnly` hides the +30s/Skip controls in either variant; `size` ' +
-          'sets the ring diameter.',
+          'sets the ring diameter.' +
+          ' Composes **CircularTimer**.',
       },
     },
   },
@@ -99,10 +104,17 @@ export const JustStarted: Story = {
 
 /** Wall-background frame for the ring stories (mirrors the north-star rest page). */
 const ringDecorator: Decorator = (Story) => (
-  <View style={{ width: 420, padding: 32, alignItems: 'center', backgroundColor: '#0E0E0E' }}>
+  <View
+    style={{
+      width: 420,
+      padding: 32,
+      alignItems: 'center',
+      backgroundColor: t['background-frame'],
+    }}
+  >
     <Text
       style={{
-        color: '#5A5A5A',
+        color: greyRamp[700],
         fontSize: 10,
         fontWeight: '700',
         letterSpacing: 1,

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

@@ -2,6 +2,8 @@
 import { View, Text, Pressable } from 'react-native'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
 import { useTimer } from '../../../hooks/useTimer'
 import { CircularTimer } from '../CircularTimer/CircularTimer'
 
@@ -37,7 +39,7 @@ function RestActions({ onAddTime, onSkip }: { onAddTime: () => void; onSkip: ()
       <Pressable
         onPress={onAddTime}
         style={{
-          backgroundColor: 'rgba(255,255,255,0.06)',
+          backgroundColor: alpha(primitiveColors.white, 0.06),
           paddingVertical: 8,
           paddingHorizontal: 20,
           borderRadius: 8,
@@ -56,7 +58,7 @@ function RestActions({ onAddTime, onSkip }: { onAddTime: () => void; onSkip: ()
       <Pressable
         onPress={onSkip}
         style={{
-          backgroundColor: 'rgba(255,121,0,0.12)',
+          backgroundColor: alpha(BRAND_PRIMARY, 0.12),
           paddingVertical: 8,
           paddingHorizontal: 20,
           borderRadius: 8,

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

@@ -9,14 +9,15 @@ const DAY = 24 * HOUR
 const NOW = Date.now()
 
 const meta: Meta<typeof ScheduleTiles> = {
-  title: 'Workout/ScheduleTiles',
+  title: 'Custom/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.',
+          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs); Until reuses [DateTime](?path=/docs/custom-datetime--docs) relative. Used-by ↑ SessionHeader.' +
+          ' Composes **HStack** · **Tile**.',
       },
     },
   },

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

@@ -1,11 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { ScheduleTiles, compactUntil } from './ScheduleTiles'
-import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { resolveColor } from '../../../theme/resolve-color'
 
 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()
@@ -25,10 +24,10 @@ describe('ScheduleTiles', () => {
     expect(value.style.color).toBe('')
   })
 
-  it('accents the Until value orange when less than a day away', () => {
+  it('accents the Until value with the brand token 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 })
+    expect(value).toHaveStyle({ color: resolveColor('brand-primary') })
   })
 })

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

@@ -1,15 +1,12 @@
 import { useState } from 'react'
 import { type ViewProps } from 'react-native'
-import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { resolveColor } from '../../../theme/resolve-color'
 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'
@@ -37,8 +34,8 @@ export interface ScheduleTilesProps extends ViewProps {
  * 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.
+ * Until value reuses {@link formatDateTime} relative formatting and takes the
+ * `brand-primary` accent only when the session is less than a day away.
  *
  * @example
  * <ScheduleTiles when={Date.now() + 5 * 60 * 60 * 1000} />
@@ -63,7 +60,7 @@ export function ScheduleTiles({ when, now, gap = 1, ...props }: ScheduleTilesPro
       <Tile
         label="Until"
         value={compactUntil(whenMs - reference)}
-        valueColor={soon ? SOON_ACCENT : undefined}
+        valueColor={soon ? resolveColor('brand-primary') : undefined}
       />
     </HStack>
   )

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

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { SegmentedBar } from './SegmentedBar'
+import { Surface } from '../../ui/surface'
+import { primitiveColors, primitiveRamps } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 /**
  * `SegmentedBar` — a horizontal track split into weighted, individually-fillable
@@ -9,7 +13,7 @@ import { SegmentedBar } from './SegmentedBar'
  * vertical line at a fraction of the width. Colours are passed-in literal hex.
  */
 const meta: Meta<typeof SegmentedBar> = {
-  title: 'Workout/SegmentedBar',
+  title: 'Custom/Workout/SegmentedBar',
   component: SegmentedBar,
   tags: ['autodocs'],
   parameters: {
@@ -19,7 +23,7 @@ const meta: Meta<typeof SegmentedBar> = {
           '**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).',
+          'Used-by ↑ [SetStrip](?path=/docs/custom-workout-setstrip--docs).',
       },
     },
   },
@@ -30,9 +34,9 @@ const meta: Meta<typeof SegmentedBar> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 240, padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 240, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }
@@ -44,10 +48,10 @@ export const EqualSegments: Story = {
   args: {
     height: 8,
     segments: [
-      { color: '#D14343' },
-      { color: '#FF7900' },
-      { color: '#F9B415' },
-      { color: '#2ED573' },
+      { color: primitiveRamps.red[600] },
+      { color: t['brand-primary'] },
+      { color: t['status-warning'] },
+      { color: t['status-success'] },
     ],
   },
 }
@@ -58,9 +62,9 @@ export const Weighted: Story = {
     gap: 4,
     radius: 2,
     segments: [
-      { color: '#2ED573', weight: 3 },
-      { color: '#F9B415', weight: 2 },
-      { color: '#D14343', weight: 1 },
+      { color: t['status-success'], weight: 3 },
+      { color: t['status-warning'], weight: 2 },
+      { color: primitiveRamps.red[600], weight: 1 },
     ],
   },
   parameters: {
@@ -74,9 +78,9 @@ export const PartialFills: Story = {
     gap: 4,
     radius: 2,
     segments: [
-      { color: '#2ED573', fill: 1 },
-      { color: '#F9B415', fill: 0.6 },
-      { color: '#01B5D1', fill: 0.3, pulse: true },
+      { color: t['status-success'], fill: 1 },
+      { color: t['status-warning'], fill: 0.6 },
+      { color: primitiveRamps.cyan[400], fill: 0.3, pulse: true },
     ],
   },
   parameters: {
@@ -90,8 +94,8 @@ export const WithMarker: Story = {
   args: {
     height: 10,
     radius: 2,
-    segments: [{ color: '#01B5D1', fill: 0.7 }],
-    marker: { position: 0.5, color: '#FFFFFF' },
+    segments: [{ color: primitiveRamps.cyan[400], fill: 0.7 }],
+    marker: { position: 0.5, color: primitiveColors.white },
   },
   parameters: {
     docs: { description: { story: 'A single fill with a target marker at the halfway point.' } },

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
 import { View, Animated, Easing, type ViewProps, type DimensionValue } from 'react-native'
+import { SET_LEVEL_FLAT_BAR } from '../charts/flatBarGeometry'
 
 /** ~1.9s full cycle: a pulsing segment eases up then back down (2 × half). */
 const PULSE_HALF_MS = 950
@@ -9,20 +10,23 @@ const PULSE_HALF_MS = 950
 const PULSE_MIN_OPACITY = 0.45
 
 /** Default between-segment gap — matches SetStrip's between-set gap so strips read the same. */
-const SEGMENTED_BAR_GAP = 5
+const SEGMENTED_BAR_GAP = SET_LEVEL_FLAT_BAR.gap
 
 export interface SegmentedBarSegment {
   /** Flex weight of this segment's slot. Default 1 (all segments equal width). */
   weight?: number
   /** Fraction 0..1 of the slot the coloured fill covers, left-aligned. Default 1 (full). */
   fill?: number
-  /** Fill colour — a literal hex (RNW-safe), never a `var()` token ref. */
+  /** Fill colour. Pass `resolveColor(token)` — a plain fill takes a `var()` ref fine. */
   color: string
   /** When true the fill animates on the shared active-pulse loop. */
   pulse?: boolean
   /**
    * When pulsing, interpolate the fill's `backgroundColor` from→to over the loop
    * (full opacity). Omit to fall back to the default opacity breathe.
+   *
+   * Literal hex only: `Animated.interpolate` parses these two endpoints itself
+   * and cannot read a `var()` ref, so `resolveColor(token)` does not work here.
    */
   pulseColor?: [from: string, to: string]
   /**
@@ -90,13 +94,14 @@ function usePulse(active: boolean): Animated.Value {
  * presentational atom the per-set strips are built from. Each segment is a flex
  * slot (flex = `weight`) holding a left-aligned fill (`fill` fraction, `color`);
  * `pulse` segments breathe on a shared active-pulse loop, and `marker` drops a
- * vertical line at a fraction of the total width. Colours are passed-in literal hex.
+ * vertical line at a fraction of the total width. Every colour is injected by the
+ * composer, so this atom holds no palette of its own.
  */
 export function SegmentedBar({
   segments,
-  height = 8,
+  height = SET_LEVEL_FLAT_BAR.height,
   gap = SEGMENTED_BAR_GAP,
-  radius = 2,
+  radius = SET_LEVEL_FLAT_BAR.radius,
   marker = null,
   segmentTestID,
   style,

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

@@ -1,27 +1,27 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { SegmentedProgressBar } from './SegmentedProgressBar'
+import { Surface } from '../../ui/surface'
 
 const PLAN = [{ weight: 3 }, { weight: 3 }, { weight: 2 }, { weight: 2 }, { weight: 2 }]
 
 const meta: Meta<typeof SegmentedProgressBar> = {
-  title: 'Workout/SegmentedProgressBar',
+  title: 'Custom/Workout/SegmentedProgressBar',
   component: SegmentedProgressBar,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '**Atom.** Composes [SegmentedBar](?path=/docs/workout-segmentedbar--docs) + paceTone. Used-by ↑ SessionHeader.',
+          '**Atom.** Composes [SegmentedBar](?path=/docs/custom-workout-segmentedbar--docs) + paceTone. Used-by ↑ SessionHeader.',
       },
     },
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 246, padding: 16, backgroundColor: '#242424' }}>
+      <Surface level="base" style={{ width: 246, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }