@titan-design/react-ui 0.7.0 → 0.8.0

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/VelocityStrip.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { VelocityStrip } from './VelocityStrip'
 
@@ -11,12 +11,15 @@ const meta: Meta<typeof VelocityStrip> = {
     docs: {
       description: {
         component:
-          'Per-rep velocity strip. Two variants: `mini` (a flat 3px static strip) and `expanded` ' +
-          '(the velocity-HEIGHT bar chart, rounded tops). The `expanded` chrome is prop-driven — ' +
-          'with `showNumbers`/`showInfo` on it is the framed chart (raised surface, per-bar m/s ' +
-          'labels, mean/loss info row, interactive tap-to-expand); with both off it is a bare strip, ' +
+          'Per-rep velocity strip. Three variants: `mini` (a flat 3px static strip), `expanded` ' +
+          '(the velocity-HEIGHT bar chart, rounded tops), and `hero` (the across-the-room, single-set ' +
+          'wall treatment — tall bars, per-bar value labels, a dashed running-best reference line, and ' +
+          'dashed placeholders for the reps still to come via `targetReps`). The `expanded` chrome is ' +
+          'prop-driven — with `showNumbers`/`showInfo` on it is the framed chart (raised surface, per-bar ' +
+          'm/s labels, mean/loss info row, interactive tap-to-expand); with both off it is a bare strip, ' +
           'the active-set spotlight. `height` sets the plot height; `scale` is `peak` (to the set max) ' +
-          'or `fixed` (a fixed ceiling, cross-set-comparable). Feed either `velocities` or a `set` ' +
+          'or `fixed` (a fixed ceiling, cross-set-comparable — recommended for the live `hero` so bar ' +
+          'heights never reflow as reps land). Feed either `velocities` or a `set` ' +
           'descriptor (set-type aware — see the ' +
           '[modalities](?path=/docs/workout-dataviz-velocitystrip-modalities--docs) sheet).',
       },
@@ -25,9 +28,13 @@ const meta: Meta<typeof VelocityStrip> = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['mini', 'expanded'],
+      options: ['mini', 'expanded', 'hero'],
       description: 'Display variant',
     },
+    targetReps: {
+      control: 'number',
+      description: 'hero: planned rep count — reps beyond `velocities` draw as dashed placeholders',
+    },
     expanded: {
       control: 'boolean',
       description: 'expanded (framed): whether the chart is open (toggle for tap-to-expand)',
@@ -41,8 +48,8 @@ const meta: Meta<typeof VelocityStrip> = {
       description: 'expanded framed chart: the mean/loss info row (default true)',
     },
     height: {
-      control: { type: 'number', min: 12, max: 96, step: 2 },
-      description: 'expanded plot height in px (bars scale to this). Default 60.',
+      control: { type: 'number', min: 12, max: 260, step: 2 },
+      description: 'expanded/hero plot height in px (bars scale to this). Default 60 / 220 (hero).',
     },
     scale: {
       control: 'inline-radio',
@@ -117,6 +124,142 @@ export const ExpandedBareSpotlight: Story = {
   },
 }
 
+// --- Hero variant ------------------------------------------------------------
+// The across-the-room, single-set wall treatment. Rendered on the north-star wall
+// background so the dashed reference line + placeholders read the way they will live.
+
+/**
+ * Wall-background frame for the hero stories. The eyebrow label is ORGANISM chrome
+ * (the north-star live page renders it), NOT part of the primitive — it sits here only
+ * to show the component in the context it will live in. The `VelocityStrip` hero variant
+ * itself renders no title.
+ */
+const heroDecorator: Decorator = (Story) => (
+  <View style={{ width: 560, padding: 28, backgroundColor: '#0E0E0E' }}>
+    <Text
+      style={{
+        color: '#5A5A5A',
+        fontSize: 10,
+        fontWeight: '700',
+        letterSpacing: 1,
+        marginBottom: 12,
+      }}
+    >
+      CONCENTRIC VELOCITY · THIS SET · (organism chrome — not the component)
+    </Text>
+    <Story />
+  </View>
+)
+
+const heroMidSet = [0.82, 0.79, 0.81, 0.76]
+const heroNearComplete = [0.82, 0.79, 0.81, 0.76, 0.74, 0.71, 0.68]
+const heroFatigue = [0.96, 0.91, 0.83, 0.72, 0.61, 0.5]
+
+/** Controls-driven hero: flip `velocities` / `targetReps` / `liveRepIndex` / `scale` / `height`. */
+export const HeroPlayground: Story = {
+  args: {
+    velocities: heroMidSet,
+    variant: 'hero',
+    targetReps: 8,
+    liveRepIndex: 3,
+    scale: 'fixed',
+    height: 220,
+  },
+  decorators: [heroDecorator],
+}
+
+/** Mid-set: 4 of 8 reps done, the newest bar popping, 4 dashed reps still to come. */
+export const HeroMidSet: Story = {
+  args: { velocities: heroMidSet, variant: 'hero', targetReps: 8, liveRepIndex: 3, scale: 'fixed' },
+  decorators: [heroDecorator],
+}
+
+/** Near complete: 7 of 8, one placeholder left; the running-best line sits at rep 3. */
+export const HeroNearComplete: Story = {
+  args: {
+    velocities: heroNearComplete,
+    variant: 'hero',
+    targetReps: 8,
+    liveRepIndex: 6,
+    scale: 'fixed',
+  },
+  decorators: [heroDecorator],
+}
+
+/** Fatigue decline: velocity falling rep over rep — the shape you read across the room. */
+export const HeroFatigueDecline: Story = {
+  args: {
+    velocities: heroFatigue,
+    variant: 'hero',
+    targetReps: 8,
+    liveRepIndex: 5,
+    scale: 'fixed',
+  },
+  decorators: [heroDecorator],
+}
+
+/** Ends on the best rep: the running-best line lands on the last (live) bar's top. */
+export const HeroEndsOnBest: Story = {
+  args: {
+    velocities: [0.7, 0.76, 0.83, 0.9],
+    variant: 'hero',
+    targetReps: 4,
+    liveRepIndex: 3,
+    scale: 'peak',
+  },
+  decorators: [heroDecorator],
+}
+
+/**
+ * Set expansion — reps performed BEYOND `targetReps` (11 done vs 8 planned). Placeholders
+ * are gone (target met) and the extra reps just render as more bars; `flex` bars narrow to
+ * fit, so the chart absorbs the overflow with no clipping. The AMRAP "keep going" case.
+ */
+export const HeroExceedsTarget: Story = {
+  args: {
+    velocities: [0.9, 0.87, 0.84, 0.8, 0.77, 0.74, 0.71, 0.68, 0.64, 0.6, 0.55],
+    variant: 'hero',
+    targetReps: 8,
+    liveRepIndex: 10,
+    scale: 'fixed',
+  },
+  decorators: [heroDecorator],
+}
+
+/** Set complete: 8 of 8, no placeholders. */
+export const HeroComplete: Story = {
+  args: {
+    velocities: [0.96, 0.91, 0.83, 0.79, 0.76, 0.72, 0.68, 0.61],
+    variant: 'hero',
+    targetReps: 8,
+    scale: 'fixed',
+  },
+  decorators: [heroDecorator],
+}
+
+/** The same set at three container widths — the hero is width-fluid (flex bars, capped width, fixed height). */
+export const HeroResponsive: Story = {
+  render: () => (
+    <View style={{ gap: 24, padding: 24, backgroundColor: '#0E0E0E' }}>
+      {[360, 560, 900].map((w) => (
+        <View key={w} style={{ width: w }}>
+          <Text style={{ color: '#5A5A5A', fontSize: 10, fontWeight: '700', marginBottom: 8 }}>
+            {w}px
+          </Text>
+          <VelocityStrip
+            velocities={heroFatigue}
+            variant="hero"
+            targetReps={8}
+            liveRepIndex={5}
+            scale="fixed"
+            height={180}
+          />
+        </View>
+      ))}
+    </View>
+  ),
+}
+
 /** A structured set descriptor (a drop set): the mini variant carries the set-type gap/color encoding. */
 export const SetTypeMini: Story = {
   args: {

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

@@ -564,3 +564,67 @@ describe('VelocityStrip expanded bare strip (spotlight: numbers + info off)', ()
     expect(await axe(container)).toHaveNoViolations()
   })
 })
+
+describe('VelocityStrip hero variant', () => {
+  const heroSet = [0.9, 0.86, 0.82, 0.78]
+
+  it('renders one bar per performed rep, each with a value label', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={8} />)
+    expect(screen.getByTestId('velocity-strip-hero')).toBeInTheDocument()
+    expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(heroSet.length)
+    expect(screen.getAllByTestId(/^velocity-label-\d+$/)).toHaveLength(heroSet.length)
+    expect(screen.getByTestId('velocity-label-0')).toHaveTextContent('0.90')
+  })
+
+  it('draws a dashed placeholder for each rep still to come (target − done)', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={8} />)
+    expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(4)
+  })
+
+  it('draws no placeholders when the target is met exactly', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={heroSet.length} />)
+    expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
+  })
+
+  it('set expansion: reps beyond target render as bars with no negative placeholders', () => {
+    const overflow = [0.9, 0.86, 0.82, 0.78, 0.74, 0.7, 0.66, 0.62, 0.58]
+    render(<VelocityStrip velocities={overflow} variant="hero" targetReps={8} />)
+    expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(overflow.length)
+    expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
+  })
+
+  it('draws no placeholders when targetReps is omitted', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" />)
+    expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(heroSet.length)
+    expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
+  })
+
+  it('renders the running-best reference line when there is a positive best', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={8} />)
+    expect(screen.getByTestId('velocity-hero-reference')).toBeInTheDocument()
+  })
+
+  it('omits the reference line when every velocity is zero (NaN / no-best guard)', () => {
+    render(<VelocityStrip velocities={[0, 0, 0]} variant="hero" targetReps={4} />)
+    expect(screen.queryByTestId('velocity-hero-reference')).not.toBeInTheDocument()
+  })
+
+  it('summarizes reps done, target and best in the accessibility label', () => {
+    render(<VelocityStrip velocities={heroSet} variant="hero" targetReps={8} />)
+    expect(
+      screen.getByLabelText('Velocity chart, 4 of 8 reps, best 0.90 meters per second')
+    ).toBeInTheDocument()
+  })
+
+  it('renders nothing when neither velocities nor set is provided', () => {
+    render(<VelocityStrip variant="hero" targetReps={8} />)
+    expect(screen.queryByTestId('velocity-strip-hero')).not.toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <VelocityStrip velocities={heroSet} variant="hero" targetReps={8} liveRepIndex={3} />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})