@titan-design/react-ui 0.6.0 → 0.8.0

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

@@ -0,0 +1,88 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+import { StatusDot, type StatusDotVariant } from './StatusDot'
+
+const t = getSemanticColors('dark')
+
+/**
+ * Auto-regulation verdict — the human-readable read-once summary of a set's
+ * velocity-loss state.
+ * - `productive` — in the band, keep going (success)
+ * - `threshold`  — VL20 reached, approaching fatigue (warning)
+ * - `stop`       — VL28+, terminate the set (error)
+ */
+export type StatusPillStatus = 'productive' | 'threshold' | 'stop'
+
+export interface StatusPillProps extends ViewProps {
+  status: StatusPillStatus
+  /** Overrides the default verdict text for the status. */
+  label?: string
+  className?: string
+}
+
+const statusToken: Record<StatusPillStatus, 'status-success' | 'status-warning' | 'status-error'> =
+  {
+    productive: 'status-success',
+    threshold: 'status-warning',
+    stop: 'status-error',
+  }
+
+const statusDotVariant: Record<StatusPillStatus, StatusDotVariant> = {
+  productive: 'success',
+  threshold: 'warning',
+  stop: 'error',
+}
+
+const defaultLabel: Record<StatusPillStatus, string> = {
+  productive: 'Productive',
+  threshold: 'Threshold',
+  stop: 'Stop',
+}
+
+/** Resolved semantic color for a verdict status. */
+export function statusPillColor(status: StatusPillStatus): string {
+  return t[statusToken[status]]
+}
+
+/**
+ * Verdict pill: a glowing status dot + colored verdict text, in a tinted,
+ * bordered capsule. Composes {@link StatusDot} for the dot so the glow/color
+ * stays consistent with the atom. Tint and border are derived from the same
+ * semantic token via `alpha()` — no per-status raw hex.
+ */
+export function StatusPill({ status, label, className, style, ...props }: StatusPillProps) {
+  const color = statusPillColor(status)
+  const text = label ?? defaultLabel[status]
+
+  return (
+    <View
+      testID="status-pill"
+      className={className}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 7,
+          alignSelf: 'flex-start',
+          paddingVertical: 7,
+          paddingHorizontal: 13,
+          borderRadius: 9,
+          backgroundColor: alpha(color, 0.14),
+          borderWidth: 1,
+          borderColor: alpha(color, 0.4),
+        },
+        style,
+      ]}
+      {...props}
+    >
+      <View accessibilityElementsHidden>
+        <StatusDot variant={statusDotVariant[status]} glow />
+      </View>
+      <Text testID="status-pill-label" style={{ fontSize: 13, fontWeight: '800', color }}>
+        {text}
+      </Text>
+    </View>
+  )
+}

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

@@ -32,7 +32,7 @@ const decline: StrengthTrendDataPoint[] = [
 ]
 
 const meta: Meta<typeof StrengthTrendChart> = {
-  title: 'Custom/Workout/StrengthTrendChart',
+  title: 'Workout/DataViz/StrengthTrendChart',
   component: StrengthTrendChart,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,7 +4,7 @@ import { SupersetWrapper } from './SupersetWrapper'
 import { ExerciseCard } from './ExerciseCard'
 
 const meta: Meta<typeof SupersetWrapper> = {
-  title: 'Custom/Workout/SupersetWrapper',
+  title: 'Workout/SupersetWrapper',
   component: SupersetWrapper,
   tags: ['autodocs'],
   decorators: [

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { TempoBar } from './TempoBar'
 
 const meta: Meta<typeof TempoBar> = {
-  title: 'Custom/Workout/TempoBar',
+  title: 'Workout/TempoBar',
   component: TempoBar,
   tags: ['autodocs'],
   argTypes: {
@@ -15,6 +15,16 @@ const meta: Meta<typeof TempoBar> = {
     phaseElapsedMs: { control: 'number', description: 'Elapsed ms in the active phase' },
     completed: { control: 'object', description: 'Completed phase durations (ms)' },
     target: { control: 'object', description: 'Per-phase target durations (seconds)' },
+    size: {
+      control: 'inline-radio',
+      options: ['default', 'wall'],
+      description: 'Density: default (compact) or wall (across-the-room dashboard scale)',
+    },
+    activeDisplay: {
+      control: 'inline-radio',
+      options: ['time', 'delta'],
+      description: 'Active readout: time (elapsed/target) or delta (countdown). Tap to toggle.',
+    },
   },
   decorators: [
     (Story) => (
@@ -93,3 +103,62 @@ export const AllStates: Story = {
     </View>
   ),
 }
+
+/**
+ * The across-the-room wall scale — bigger bar, full phase words, and colour-coded
+ * pacing (a missed target reads red). Here the eccentric ran long → red.
+ */
+export const Wall: Story = {
+  args: {
+    activePhase: null,
+    phaseElapsedMs: 0,
+    completed: { concentric: 950, hold: 1000, eccentric: 4200 },
+    target: TARGET,
+    size: 'wall',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+/** Wall, mid-rep — the eccentric is active, showing the delta countdown (1.5s to target). Tap to switch to elapsed/target. */
+export const WallActiveDelta: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 1500,
+    completed: { concentric: 950, hold: 1000 },
+    target: TARGET,
+    size: 'wall',
+    activeDisplay: 'delta',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+/** Wall, over target — the eccentric ran 1.2s past its target, so the delta is negative and red. */
+export const WallActiveOver: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 4200,
+    completed: { concentric: 950, hold: 1000 },
+    target: TARGET,
+    size: 'wall',
+    activeDisplay: 'delta',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}

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

@@ -1,13 +1,16 @@
 import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import {
   TempoBar,
   getTempoPacingState,
   getTempoFillPct,
+  formatTempoDelta,
   TEMPO_PACING,
 } from './TempoBar'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
+const t = getSemanticColors('dark')
 const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
 
 describe('getTempoPacingState', () => {
@@ -70,7 +73,7 @@ describe('TempoBar', () => {
         phaseElapsedMs={100}
         completed={{ concentric: 950 }}
         target={TARGET}
-      />,
+      />
     )
     expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
     expect(screen.getByText('0.9 ✓')).toBeInTheDocument()
@@ -83,7 +86,7 @@ describe('TempoBar', () => {
         phaseElapsedMs={100}
         completed={{ eccentric: 4000 }}
         target={TARGET}
-      />,
+      />
     )
     // eccentric target 3s, 4s elapsed => behind => cross
     expect(screen.getByText('4.0 ✗')).toBeInTheDocument()
@@ -96,8 +99,120 @@ describe('TempoBar', () => {
         phaseElapsedMs={1500}
         completed={{ concentric: 900, hold: 1000 }}
         target={TARGET}
-      />,
+      />
     )
     expect(await axe(container)).toHaveNoViolations()
   })
 })
+
+describe('TempoBar size="wall"', () => {
+  const TARGET_W = { concentric: 1, hold: 1, eccentric: 3 }
+
+  it('scales the active label up at wall density', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET_W} size="wall" />)
+    expect(screen.getByText('0.6 / 1.0')).toHaveStyle({ fontSize: 22 })
+  })
+
+  it('keeps the compact label size by default', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET_W} />)
+    expect(screen.getByText('0.6 / 1.0')).toHaveStyle({ fontSize: 12 })
+  })
+
+  it('preserves the segment testIDs at wall density', () => {
+    render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1500}
+        completed={{ concentric: 900 }}
+        target={TARGET_W}
+        size="wall"
+      />
+    )
+    expect(screen.getByTestId('tempo-segment-active-Ecc')).toBeInTheDocument()
+    expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
+  })
+
+  it('spells out the full phase words at wall density', () => {
+    render(<TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET_W} size="wall" />)
+    expect(screen.getByText('Concentric')).toBeInTheDocument()
+    expect(screen.getByText('Eccentric')).toBeInTheDocument()
+    expect(screen.queryByText('Con')).not.toBeInTheDocument()
+  })
+})
+
+describe('formatTempoDelta', () => {
+  it('shows remaining time to target as a positive value', () => {
+    expect(formatTempoDelta(1500)).toBe('1.5')
+  })
+
+  it('shows over-target time as negative', () => {
+    expect(formatTempoDelta(-1200)).toBe('-1.2')
+  })
+
+  it('shows 0.0 at the target (no -0.0)', () => {
+    expect(formatTempoDelta(0)).toBe('0.0')
+    expect(formatTempoDelta(-10)).toBe('0.0')
+  })
+})
+
+describe('TempoBar activeDisplay (delta countdown + toggle)', () => {
+  it('counts the remaining time down to the target in delta mode', () => {
+    render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1800}
+        target={TARGET}
+        activeDisplay="delta"
+      />
+    )
+    // eccentric target 3.0s, elapsed 1.8s → 1.2s remaining
+    expect(screen.getByText('1.2')).toBeInTheDocument()
+  })
+
+  it('goes negative once the phase runs past its target', () => {
+    render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={4200}
+        target={TARGET}
+        activeDisplay="delta"
+      />
+    )
+    expect(screen.getByText('-1.2')).toBeInTheDocument()
+  })
+
+  it('tapping the active segment toggles time ↔ delta', () => {
+    render(
+      <TempoBar
+        activePhase="concentric"
+        phaseElapsedMs={600}
+        target={TARGET}
+        activeDisplay="time"
+      />
+    )
+    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
+    fireEvent.click(screen.getByTestId('tempo-segment-active-Con'))
+    // concentric target 1.0s, elapsed 0.6s → 0.4s remaining
+    expect(screen.getByText('0.4')).toBeInTheDocument()
+    expect(screen.queryByText('0.6 / 1.0')).not.toBeInTheDocument()
+  })
+
+  it('defaults to the time readout', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />)
+    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
+  })
+})
+
+describe('TempoBar completed pacing colour', () => {
+  it('colours a missed completed phase red', () => {
+    render(
+      <TempoBar
+        activePhase="hold"
+        phaseElapsedMs={100}
+        completed={{ eccentric: 4000 }}
+        target={TARGET}
+      />
+    )
+    expect(screen.getByText('4.0 ✗')).toHaveStyle({ color: t['status-error'] })
+  })
+})

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

@@ -1,5 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps } from 'react-native'
+import { useState } from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { alpha } from '../../../utils/colors'
 
@@ -19,15 +20,23 @@ export const TEMPO_PACING = {
 
 export type TempoPacingState = 'none' | 'on-pace' | 'behind'
 
+/** Active-phase readout mode: elapsed/target `time`, or a `delta` countdown to the target. */
+export type TempoActiveDisplay = 'time' | 'delta'
+
+/** Signed seconds to one decimal — the delta countdown (`+` remaining, `-` over target). */
+export function formatTempoDelta(remainingMs: number): string {
+  const s = remainingMs / 1000
+  // Guard `-0.0`; show a leading minus only once past target.
+  const rounded = Math.abs(s) < 0.05 ? 0 : s
+  return rounded.toFixed(1)
+}
+
 /**
  * Classify how a phase's elapsed time tracks against its target duration.
  * `none` when there is no meaningful target; `behind` once elapsed exceeds the
  * target by more than the behind threshold; `on-pace` otherwise.
  */
-export function getTempoPacingState(
-  elapsedMs: number,
-  targetMs: number | null,
-): TempoPacingState {
+export function getTempoPacingState(elapsedMs: number, targetMs: number | null): TempoPacingState {
   if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return 'none'
   const ratio = elapsedMs / targetMs
   if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return 'behind'
@@ -41,7 +50,10 @@ export function getTempoFillPct(elapsedMs: number, targetMs: number | null): num
 }
 
 interface PhaseConfig {
+  /** Compact label + the stable testID suffix. */
   label: string
+  /** Full phase word, spelled out at `wall` density where there's room to read it. */
+  wallLabel: string
   color: string
   flex: number
 }
@@ -49,9 +61,27 @@ interface PhaseConfig {
 const PHASE_ORDER: TempoPhaseKey[] = ['concentric', 'hold', 'eccentric']
 
 const PHASE_CONFIG: Record<TempoPhaseKey, PhaseConfig> = {
-  concentric: { label: 'Con', color: t['status-success'], flex: 2 },
-  hold: { label: 'Hold', color: t['brand-primary'], flex: 1 },
-  eccentric: { label: 'Ecc', color: t['status-warning'], flex: 3 },
+  concentric: { label: 'Con', wallLabel: 'Concentric', color: t['status-success'], flex: 2 },
+  hold: { label: 'Hold', wallLabel: 'Hold', color: t['brand-primary'], flex: 1 },
+  eccentric: { label: 'Ecc', wallLabel: 'Eccentric', color: t['status-warning'], flex: 3 },
+}
+
+/** Density. `default` — the compact card/rail treatment. `wall` — the across-the-room dashboard scale. */
+export type TempoBarSize = 'default' | 'wall'
+
+interface TempoBarSizing {
+  labelMargin: number
+  labelFont: number
+  barGap: number
+  barHeight: number
+  radius: number
+  segFont: number
+}
+
+/** Per-density magnitudes. `default` reproduces the original compact values exactly. */
+const TEMPO_SIZES: Record<TempoBarSize, TempoBarSizing> = {
+  default: { labelMargin: 4, labelFont: 10, barGap: 2, barHeight: 20, radius: 4, segFont: 12 },
+  wall: { labelMargin: 8, labelFont: 15, barGap: 4, barHeight: 40, radius: 6, segFont: 22 },
 }
 
 export interface TempoBarProps extends ViewProps {
@@ -63,6 +93,14 @@ export interface TempoBarProps extends ViewProps {
   completed?: Partial<Record<TempoPhaseKey, number>>
   /** Optional per-phase target durations (seconds) for pacing feedback. */
   target?: Partial<Record<TempoPhaseKey, number>>
+  /** Density: `default` (compact) or `wall` (the across-the-room dashboard scale). */
+  size?: TempoBarSize
+  /**
+   * Active-phase readout. `time` (default) — `elapsed / target`. `delta` — a countdown
+   * of the remaining time to target (`1.5` → `0.0` → `-1.2` once over), colour-coded like
+   * the bar. Tapping the active segment toggles between the two at runtime.
+   */
+  activeDisplay?: TempoActiveDisplay
   className?: string
 }
 
@@ -79,25 +117,33 @@ export function TempoBar({
   phaseElapsedMs,
   completed,
   target,
+  size = 'default',
+  activeDisplay = 'time',
   className,
   ...props
 }: TempoBarProps) {
+  const s = TEMPO_SIZES[size]
+  // Runtime toggle of the active readout, seeded from `activeDisplay`.
+  const [display, setDisplay] = useState<TempoActiveDisplay>(activeDisplay)
+  const toggleDisplay = () => setDisplay((d) => (d === 'time' ? 'delta' : 'time'))
   return (
     <View className={className} testID="tempo-bar" {...props}>
       {/* Phase labels */}
-      <View style={{ flexDirection: 'row', marginBottom: 4 }}>
+      <View style={{ flexDirection: 'row', marginBottom: s.labelMargin }}>
         {PHASE_ORDER.map((phase) => {
           const config = PHASE_CONFIG[phase]
           return (
             <View key={phase} style={{ flex: config.flex, alignItems: 'center' }}>
-              <Text style={{ fontSize: 10, color: t['text-disabled'] }}>{config.label}</Text>
+              <Text numberOfLines={1} style={{ fontSize: s.labelFont, color: t['text-disabled'] }}>
+                {size === 'wall' ? config.wallLabel : config.label}
+              </Text>
             </View>
           )
         })}
       </View>
 
       {/* Segmented bar */}
-      <View style={{ flexDirection: 'row', gap: 2, height: 20 }}>
+      <View style={{ flexDirection: 'row', gap: s.barGap, height: s.barHeight }}>
         {PHASE_ORDER.map((phase) => {
           const config = PHASE_CONFIG[phase]
           const isActive = activePhase === phase
@@ -111,7 +157,7 @@ export function TempoBar({
               style={{
                 flex: config.flex,
                 backgroundColor: alpha('#ffffff', 0.06),
-                borderRadius: 4,
+                borderRadius: s.radius,
                 overflow: 'hidden',
               }}
             >
@@ -120,9 +166,18 @@ export function TempoBar({
                   config={config}
                   phaseElapsedMs={phaseElapsedMs}
                   targetMs={targetMs}
+                  radius={s.radius}
+                  font={s.segFont}
+                  display={display}
+                  onToggleDisplay={toggleDisplay}
                 />
               ) : completedMs != null ? (
-                <CompletedSegment config={config} completedMs={completedMs} targetMs={targetMs} />
+                <CompletedSegment
+                  config={config}
+                  completedMs={completedMs}
+                  targetMs={targetMs}
+                  font={s.segFont}
+                />
               ) : null}
             </View>
           )
@@ -136,21 +191,40 @@ function ActiveSegment({
   config,
   phaseElapsedMs,
   targetMs,
+  radius,
+  font,
+  display,
+  onToggleDisplay,
 }: {
   config: PhaseConfig
   phaseElapsedMs: number
   targetMs: number | null
+  radius: number
+  font: number
+  display: TempoActiveDisplay
+  onToggleDisplay: () => void
 }) {
   const pacing = getTempoPacingState(phaseElapsedMs, targetMs)
   const barColor = pacing === 'behind' ? t['status-error'] : config.color
   const fillPct = getTempoFillPct(phaseElapsedMs, targetMs)
 
-  const label = targetMs
-    ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}`
-    : formatDuration(phaseElapsedMs)
+  // `delta`: count the remaining time to target down to 0.0, then negative once over.
+  // Falls back to elapsed when there's no target. `time`: the elapsed / target readout.
+  const label =
+    display === 'delta' && targetMs != null
+      ? formatTempoDelta(targetMs - phaseElapsedMs)
+      : targetMs != null
+        ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}`
+        : formatDuration(phaseElapsedMs)
 
   return (
-    <View style={{ height: '100%', position: 'relative' }} testID={`tempo-segment-active-${config.label}`}>
+    <Pressable
+      onPress={onToggleDisplay}
+      style={{ height: '100%', position: 'relative' }}
+      accessibilityRole="button"
+      accessibilityLabel={`Tempo readout: ${display === 'delta' ? 'delta' : 'time'} — tap to switch`}
+      testID={`tempo-segment-active-${config.label}`}
+    >
       <View
         style={{
           position: 'absolute',
@@ -159,7 +233,7 @@ function ActiveSegment({
           bottom: 0,
           width: `${fillPct}%`,
           backgroundColor: alpha(barColor, 0.3),
-          borderRadius: 4,
+          borderRadius: radius,
         }}
       />
       <View
@@ -170,9 +244,9 @@ function ActiveSegment({
           justifyContent: 'center',
         }}
       >
-        <Text style={{ fontSize: 12, fontWeight: '700', color: barColor }}>{label}</Text>
+        <Text style={{ fontSize: font, fontWeight: '700', color: barColor }}>{label}</Text>
       </View>
-    </View>
+    </Pressable>
   )
 }
 
@@ -180,15 +254,20 @@ function CompletedSegment({
   config,
   completedMs,
   targetMs,
+  font,
 }: {
   config: PhaseConfig
   completedMs: number
   targetMs: number | null
+  font: number
 }) {
   const pacing = getTempoPacingState(completedMs, targetMs)
   const hitTarget = pacing !== 'behind'
   const indicator =
     targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? (hitTarget ? ' ✓' : ' ✗') : ''
+  // A missed target reads by COLOUR first (red fill + red duration), the ✓/✗ second —
+  // glanceable across a room; a hit keeps the phase's own colour.
+  const cueColor = hitTarget ? config.color : t['status-error']
 
   return (
     <View
@@ -197,11 +276,17 @@ function CompletedSegment({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: alpha(config.color, 0.15),
+        backgroundColor: alpha(cueColor, 0.15),
       }}
       testID={`tempo-segment-completed-${config.label}`}
     >
-      <Text style={{ fontSize: 12, fontWeight: '500', color: alpha(config.color, 0.7) }}>
+      <Text
+        style={{
+          fontSize: font,
+          fontWeight: '500',
+          color: hitTarget ? alpha(config.color, 0.7) : cueColor,
+        }}
+      >
         {formatDuration(completedMs)}
         {indicator}
       </Text>

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

@@ -5,9 +5,20 @@ import { TempoDisplay, type TempoLivePhase, type TempoLiveState } from './TempoD
 
 // tempo = [eccentric, pauseBottom, concentric, pauseTop]
 const meta: Meta<typeof TempoDisplay> = {
-  title: 'Custom/Workout/TempoDisplay',
+  title: 'Workout/TempoDisplay',
   component: TempoDisplay,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule.** The eccentric/pause/concentric/pause tempo display. Composes ' +
+          '[MetricCell](?path=/docs/workout-metriccell--docs) ' +
+          '(shared value/separator cell). Used-by ↑ ' +
+          '[ExerciseHeading](?path=/docs/workout-exerciseheading--docs) (`showLabel={false}`).',
+      },
+    },
+  },
   argTypes: {
     tempo: {
       control: 'object',