@titan-design/react-ui 0.8.0 → 0.9.0

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

@@ -4,7 +4,7 @@ import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { roundTempo } from '../../../utils/workout-format'
 import { alpha } from '../../../utils/colors'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { getTempoFillPct, getTempoPacingState } from './TempoBar'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
 import { MetricCell } from './metricText'
 
 const t = getSemanticColors('dark')
@@ -22,14 +22,20 @@ export interface TempoLiveState {
   activePhase: TempoLivePhase | null
   /** Elapsed time (ms) within the active phase. */
   phaseElapsedMs: number
+  /**
+   * Actual completed durations (ms) for phases finished earlier THIS rep. A done cell
+   * freezes at its final readout (not the target) until the next rep resets the row.
+   * Omit a phase to fall back to its target (assume it completed on pace).
+   */
+  completed?: Partial<Record<TempoLivePhase, number>>
 }
 
 export interface TempoDisplayProps extends ViewProps {
   /** Tempo values: [eccentric, pauseBottom, concentric, pauseTop] in seconds */
   tempo: [number, number, number, number]
   size?: 'sm' | 'md'
-  /** Colored phases or mono (all gray) */
-  colored?: boolean
+  /** Override the digit font size (px). Defaults from `size` (9 sm / 11 md); raise for a wall read-out. */
+  fontSize?: number
   /** Show the "TEMPO" caption before the values. Default true. */
   showLabel?: boolean
   /** Show info tooltip on press */
@@ -40,19 +46,60 @@ export interface TempoDisplayProps extends ViewProps {
    * prescription string (default, backward compatible).
    */
   live?: TempoLiveState
+  /** Active-phase readout when `live`: `countdown` remaining to 0.0 (default), or `countup` elapsed. */
+  liveReadout?: TempoLiveReadout
   onPress?: () => void
   className?: string
 }
 
 const INTER = 'Inter, sans-serif'
 const TEXT_TERTIARY = '#6B7280'
-const STATUS_ERROR = t['status-error'] // shown when a phase runs behind pace
+const STATUS_ERROR = t['status-error'] // slow — over the target time
+const STATUS_SUCCESS = t['status-success'] // on target (within the band of 0.0)
+const STATUS_WARNING = t['status-warning'] // ahead — still time left to the target
+
+/** Live active-phase readout: `countdown` remaining to 0.0, or `countup` elapsed to target. */
+export type TempoLiveReadout = 'countdown' | 'countup'
+
+/** ± this window (ms) around the target still counts as on target (0.0 ± 0.1s). */
+const ON_TARGET_MS = 100
+
+/** Phase-progress fill percent (0–100): how far the active phase has run toward its target. */
+function getTempoFillPct(elapsedMs: number, targetMs: number | null): number {
+  if (!targetMs) return 100
+  return Math.min(100, (elapsedMs / targetMs) * 100)
+}
+
+/**
+ * Semantic pacing tone for the active/completed phase's NUMBER (the fill bar carries phase
+ * identity, so the number is free to carry pacing). Keyed on time remaining to target:
+ * ahead of target (still counting) → warning; within ±0.1s of 0.0 → success; over → error.
+ */
+function activeNumberTone(elapsedMs: number, targetMs: number | null): string {
+  if (targetMs == null) return t['text-primary']
+  const remainingMs = targetMs - elapsedMs
+  if (remainingMs > ON_TARGET_MS) return STATUS_WARNING
+  if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS
+  return STATUS_ERROR
+}
 
-// Phase colors: [eccentric, pauseBottom, concentric, pauseTop]
+/** The active number: `countup` elapsed (→ target) or `countdown` remaining (→ 0.0, then −). */
+function liveReadoutText(
+  elapsedMs: number,
+  targetMs: number,
+  readout: TempoLiveReadout,
+): string {
+  const seconds = readout === 'countup' ? elapsedMs / 1000 : (targetMs - elapsedMs) / 1000
+  return seconds.toFixed(1)
+}
+
+// Phase IDENTITY colours — deliberately NON-semantic (magenta ecc / cyan con) so the
+// phase hue never collides with the semantic pacing tones (success/error) the active
+// number carries. Pauses stay neutral grey. [eccentric, pauseBottom, concentric, pauseTop]
 const phaseColors = {
-  eccentric: t['status-warning'],
+  eccentric: primitiveRamps.magenta[400],
   pauseBottom: TEXT_TERTIARY,
-  concentric: t['status-success'],
+  concentric: primitiveRamps.cyan[300],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY,
 }
@@ -89,39 +136,95 @@ const LIVE_PHASES: { key: TempoLivePhase; color: string }[] = [
   { key: 'pauseTop', color: phaseColors.pauseTop },
 ]
 
+/** A phase's place in the current rep: already done (locked full), filling now, or still to come. */
+type LiveCellStatus = 'done' | 'active' | 'upcoming'
+
+/** A bottom-anchored vertical fill behind the number (the phase-progress bar). */
+function CellFill({ color, pct }: { color: string; pct: number }) {
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        left: 2,
+        right: 2,
+        bottom: 0,
+        height: `${pct}%`,
+        backgroundColor: alpha(color, 0.28),
+        borderRadius: 3,
+      }}
+    />
+  )
+}
+
+/** Monospace stack for the live readout so digit widths never shift. */
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
+/** Widest readout the cell must hold: sign · two whole digits · point · tenths, e.g. "-12.3". */
+const READOUT_MAX_CHARS = 5
+
 function LiveTempoCell({
   value,
   color,
-  isActive,
+  status,
   phaseElapsedMs,
+  completedMs,
   fontSize,
+  readout,
 }: {
   value: number
   color: string
-  isActive: boolean
+  status: LiveCellStatus
   phaseElapsedMs: number
+  completedMs: number | undefined
   fontSize: number
+  readout: TempoLiveReadout
 }) {
-  if (!isActive) {
-    return <TempoValue value={value} color={alpha(color, 0.35)} fontSize={fontSize} />
-  }
   const targetMs = value > 0 ? value * 1000 : null
-  const barColor = getTempoPacingState(phaseElapsedMs, targetMs) === 'behind' ? STATUS_ERROR : color
+  // Fixed, monospace-width cell sized to the widest readout — a phase activating or its
+  // number changing never shifts the layout (the fill bar stays put too).
+  const cellW = Math.ceil(fontSize * 0.62 * READOUT_MAX_CHARS)
+  const wrap = {
+    position: 'relative' as const,
+    width: cellW,
+    minHeight: Math.round(fontSize * 1.25),
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  }
+  const num = (c: string, text: string) => (
+    <Text style={{ fontFamily: MONO, fontSize, color: c, fontWeight: '700' }}>{text}</Text>
+  )
+
+  // Upcoming / idle: the phase's prescribed time in the FULL phase colour, no fill — so a
+  // not-yet-started (or fully idle) row just reads as the base tempo lockup, not a dim mode.
+  if (status === 'upcoming') {
+    const targetText = targetMs != null ? (targetMs / 1000).toFixed(1) : String(value)
+    return <View style={wrap}>{num(color, targetText)}</View>
+  }
+
+  // Done: FROZEN at the phase's final readout (its actual completed time, not the target),
+  // fill locked full in the phase colour. The number keeps its SEMANTIC pacing tone (it is
+  // showing the final time, not the target) — banked progress until the next rep resets.
+  if (status === 'done') {
+    const finalMs = completedMs ?? targetMs ?? 0
+    const finalText = targetMs != null ? liveReadoutText(finalMs, targetMs, readout) : String(value)
+    const finalTone = targetMs != null ? activeNumberTone(finalMs, targetMs) : color
+    return (
+      <View style={wrap} testID="tempo-live-done">
+        <CellFill color={color} pct={100} />
+        {num(finalTone, finalText)}
+      </View>
+    )
+  }
+
+  // Active: the phase-hued fill grows with the phase; the number reads the live time
+  // (countdown/countup) to 0.1s, coloured SEMANTICALLY by pacing (neutral/on-target/behind).
+  const numberTone = activeNumberTone(phaseElapsedMs, targetMs)
   const fillPct = getTempoFillPct(phaseElapsedMs, targetMs)
+  const activeText =
+    targetMs != null ? liveReadoutText(phaseElapsedMs, targetMs, readout) : String(value)
   return (
-    <View style={{ position: 'relative' }} testID="tempo-live-active">
-      <View
-        style={{
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${fillPct}%`,
-          backgroundColor: alpha(barColor, 0.3),
-          borderRadius: 2,
-        }}
-      />
-      <TempoValue value={value} color={barColor} fontSize={fontSize} />
+    <View style={wrap} testID="tempo-live-active">
+      <CellFill color={color} pct={fillPct} />
+      {num(numberTone, activeText)}
     </View>
   )
 }
@@ -130,25 +233,38 @@ function LiveTempoRow({
   values,
   live,
   fontSize,
+  readout,
 }: {
   values: [number, number, number, number]
   live: TempoLiveState
   fontSize: number
+  readout: TempoLiveReadout
 }) {
+  // Phases run in a fixed order within a rep, so the active phase's position tells us which
+  // phases are already done (locked). When it wraps back to the first phase, the row resets.
+  const activeIndex = live.activePhase
+    ? LIVE_PHASES.findIndex((p) => p.key === live.activePhase)
+    : -1
   return (
     <>
-      {LIVE_PHASES.map((phase, i) => (
-        <View key={phase.key} style={{ flexDirection: 'row' }}>
-          {i > 0 && <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />}
-          <LiveTempoCell
-            value={values[i]}
-            color={phase.color}
-            isActive={live.activePhase === phase.key}
-            phaseElapsedMs={live.phaseElapsedMs}
-            fontSize={fontSize}
-          />
-        </View>
-      ))}
+      {LIVE_PHASES.map((phase, i) => {
+        const status: LiveCellStatus =
+          activeIndex < 0 || i > activeIndex ? 'upcoming' : i < activeIndex ? 'done' : 'active'
+        return (
+          <View key={phase.key} style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {i > 0 && <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />}
+            <LiveTempoCell
+              value={values[i]}
+              color={phase.color}
+              status={status}
+              phaseElapsedMs={live.phaseElapsedMs}
+              completedMs={live.completed?.[phase.key]}
+              fontSize={fontSize}
+              readout={readout}
+            />
+          </View>
+        )
+      })}
     </>
   )
 }
@@ -156,10 +272,11 @@ function LiveTempoRow({
 export function TempoDisplay({
   tempo,
   size = 'md',
-  colored = true,
+  fontSize: fontSizeProp,
   showLabel = true,
   showInfo = true,
   live,
+  liveReadout = 'countdown',
   onPress,
   className,
   ...props
@@ -168,8 +285,13 @@ export function TempoDisplay({
   // Round exact (unrounded) tempo seconds to the 1-dp display granularity.
   const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo)
   const isSm = size === 'sm'
-  const fontSize = isSm ? 9 : 11
-  const monoColor = TEXT_TERTIARY
+  const fontSize = fontSizeProp ?? (isSm ? 9 : 11)
+  // The chrome (padding, radius, label) scales with the digit size so the whole view stays
+  // proportional at any form factor — a compact rail chip up to a wall read-out.
+  const chromePadX = Math.round(fontSize * 0.6)
+  const chromePadY = Math.round(fontSize * 0.3)
+  const chromeRadius = Math.round(fontSize * 0.4)
+  const labelFont = Math.max(9, Math.round(fontSize * 0.5))
 
   const handlePress = useCallback(() => {
     if (onPress) {
@@ -187,9 +309,9 @@ export function TempoDisplay({
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: '#1C1C1C',
-        paddingHorizontal: isSm ? 6 : 8,
-        paddingVertical: 3,
-        borderRadius: 4,
+        paddingHorizontal: chromePadX,
+        paddingVertical: chromePadY,
+        borderRadius: chromeRadius,
       }}
       {...props}
     >
@@ -197,12 +319,13 @@ export function TempoDisplay({
         <Text
           style={{
             fontFamily: INTER,
-            fontSize: 9,
+            fontSize: labelFont,
             fontWeight: '500',
-            color: TEXT_TERTIARY,
+            // Live-muted green while a rep is running, tertiary at rest.
+            color: live ? t['status-live-muted'] : TEXT_TERTIARY,
             letterSpacing: 0.5,
             textTransform: 'uppercase',
-            marginRight: 6,
+            marginRight: Math.round(fontSize * 0.5),
           }}
         >
           TEMPO
@@ -214,8 +337,10 @@ export function TempoDisplay({
             values={[eccentric, pauseBottom, concentric, pauseTop]}
             live={live}
             fontSize={fontSize}
+            readout={liveReadout}
           />
-        ) : colored ? (
+        ) : (
+          // Static prescription: the phase-coloured lockup (the same colours the live row rests at).
           <>
             <TempoValue value={eccentric} color={phaseColors.eccentric} fontSize={fontSize} />
             <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
@@ -225,18 +350,6 @@ export function TempoDisplay({
             <TempoSeparator color={phaseColors.dash} fontSize={fontSize} />
             <TempoValue value={pauseTop} color={phaseColors.pauseTop} fontSize={fontSize} />
           </>
-        ) : (
-          <Text
-            style={{
-              fontFamily: INTER,
-              fontSize,
-              color: monoColor,
-              fontWeight: '600',
-              letterSpacing: 1,
-            }}
-          >
-            {eccentric}-{pauseBottom}-{concentric}-{pauseTop}
-          </Text>
         )}
       </View>
     </View>

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

@@ -78,10 +78,10 @@ describe('VelocityStrip expanded (framed chart)', () => {
   })
 
   describe('scale', () => {
-    it('peak (default) scales the tallest rep to full height', () => {
-      // maxV=1.0 -> denom 1.15 -> 1.0/1.15 = 87%.
+    it('peak (default) scales the tallest rep to nearly full height', () => {
+      // maxV=1.0 -> denom 1.06 (peak headroom) -> 1.0/1.06 = 94%.
       render(<VelocityStrip velocities={[1.0, 0.5]} showInfo={false} />)
-      expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '87%' })
+      expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '94%' })
     })
 
     it('fixed scales against the 1.15 ceiling regardless of the set max', () => {

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

@@ -8,6 +8,7 @@ import {
   Easing,
   type ViewProps,
   type ViewStyle,
+  type LayoutChangeEvent,
 } from 'react-native'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 import { primitiveColors, primitiveRamps, sequentialEffort } from '../../../theme/tokens/primitives'
@@ -19,7 +20,7 @@ import { SET_STRIP_VARIABLE_COLOR } from './SetStrip'
  * (e.g. workout-analytics' `VelocityZones.bands`).
  *
  * Deliberately a plain structural shape — titan never imports the analytics
- * package (same policy as TempoBar's presentational phase key). Any object with
+ * package (the same presentational-only policy the Workout family follows). Any object with
  * this shape can be passed, so `zones={waVelocityZones.bands}` works directly.
  * Bands are ordered slow → fast, contiguous, and cover `[0, ∞)` with the top
  * band's `max === null`. Bands carry NO color — color is a UI concern resolved
@@ -393,7 +394,9 @@ const HERO_LABEL_HEADROOM = 20
 /** Gap between hero bars (px) — a group-notch-free even rhythm at wall scale. */
 const HERO_BAR_GAP = 8
 /** Cap on a single hero bar's width so a 2–3 rep set doesn't render slab-wide bars (px). */
-const HERO_BAR_MAX_WIDTH = 52
+const HERO_BAR_MAX_WIDTH = 120
+/** Below this per-bar width the value labels collide, so all but the peak + live rep are dropped. */
+const HERO_LABEL_MIN_BAR_WIDTH = 30
 /** Top-corner radius on hero bars (px). */
 const HERO_BAR_RADIUS = 5
 /** Minimum drawn height of a performed hero bar (px) — a near-zero rep still reads as a rep. */
@@ -403,9 +406,15 @@ const HERO_PENDING_COLOR = primitiveColors.charcoal[100]
 /** The dashed running-best reference line + its label (the lightest charcoal step). */
 const HERO_REFERENCE_COLOR = primitiveColors.charcoal[0]
 
+/**
+ * Headroom above the peak bar: just enough to seat its value label without a big empty
+ * band at the top (was 1.15 — too airy for the wall hero).
+ */
+const PEAK_HEADROOM = 1.06
+
 /** The bar-height scaling denominator for the given `scale` (guarded ≥ 0 by callers). */
 function scaleDenominator(scale: 'peak' | 'fixed', maxVelocity: number): number {
-  return scale === 'fixed' ? FIXED_MAX_VELOCITY : maxVelocity * 1.15
+  return scale === 'fixed' ? FIXED_MAX_VELOCITY : maxVelocity * PEAK_HEADROOM
 }
 
 /** Bare-strip bar height (px): velocity-scaled for a performed rep, a short stub otherwise. */
@@ -525,6 +534,11 @@ function HeroVelocityChart({
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : undefined
   const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak)
 
+  // Measure the plot so per-bar value labels can thin on a narrow chart (they collide once
+  // bars get thin). Width 0 (unmeasured) → show all, so test/server renders are unchanged.
+  const [plotW, setPlotW] = useState(0)
+  const onPlotLayout = (e: LayoutChangeEvent) => setPlotW(e.nativeEvent.layout.width)
+
   // Reserve a band above the tallest bar for its value label so a peak bar never clips.
   const plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM)
   const barHeight = (velocity: number): number =>
@@ -538,6 +552,23 @@ function HeroVelocityChart({
       ? Math.min(plotHeight, (referenceVelocity / scaleDenom) * plotHeight)
       : 0
 
+  // When bars get too thin, keep only the peak + live-rep labels so the rest don't overlap.
+  const totalSlots = doneVelocities.length + pendingCount
+  const barWidth =
+    plotW > 0 && totalSlots > 0
+      ? Math.min(HERO_BAR_MAX_WIDTH, (plotW - HERO_BAR_GAP * (totalSlots - 1)) / totalSlots)
+      : HERO_BAR_MAX_WIDTH
+  const labelsCrowded = plotW > 0 && barWidth < HERO_LABEL_MIN_BAR_WIDTH
+  // Step the inter-bar gap down with the bars so the gaps never dwarf the bars themselves.
+  const heroGap =
+    plotW === 0 ? HERO_BAR_GAP : barWidth < 16 ? 2 : barWidth < 28 ? 4 : HERO_BAR_GAP
+  const peakIndex = doneVelocities.reduce(
+    (best, v, i) => (v > doneVelocities[best] ? i : best),
+    0,
+  )
+  const showBarLabel = (i: number): boolean =>
+    !labelsCrowded || i === peakIndex || i === liveRepIndex
+
   const repCount = doneVelocities.length
   const total = Math.max(repCount, targetReps ?? repCount)
   const label =
@@ -557,11 +588,12 @@ function HeroVelocityChart({
       {...restProps}
     >
       <View
+        onLayout={onPlotLayout}
         style={{
           flex: 1,
           flexDirection: 'row',
           alignItems: 'flex-end',
-          gap: HERO_BAR_GAP,
+          gap: heroGap,
           position: 'relative',
           borderBottomWidth: 2,
           borderBottomColor: HERO_PENDING_COLOR,
@@ -606,13 +638,15 @@ function HeroVelocityChart({
                 justifyContent: 'flex-end',
               }}
             >
-              <Text
-                className="text-text-primary"
-                style={{ fontSize: 12, fontWeight: '800', marginBottom: 4 }}
-                testID={`velocity-label-${i}`}
-              >
-                {formatVelocity(velocity)}
-              </Text>
+              {showBarLabel(i) && (
+                <Text
+                  className="text-text-primary"
+                  style={{ fontSize: 12, fontWeight: '800', marginBottom: 4 }}
+                  testID={`velocity-label-${i}`}
+                >
+                  {formatVelocity(velocity)}
+                </Text>
+              )}
               <Animated.View
                 style={[
                   {

package/src/components/custom/Workout/ZoneTrack.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, type DimensionValue } from 'react-native'
+import { useState } from 'react'
+import { View, Text, type ViewProps, type DimensionValue, type LayoutChangeEvent } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { primitiveColors } from '../../../theme/tokens/primitives'
 import { alpha } from '../../../utils/colors'
@@ -181,6 +182,17 @@ export function ZoneTrack({
   const s = ZONE_SIZES[size]
   const trackHeight = trackHeightProp ?? s.trackHeight
   const needleOverhang = needleOverhangProp ?? s.needleOverhang
+
+  // Thin the tick labels on a narrow track so they never overlap (each occupies a fixed
+  // `tickCellWidth` cell). Width 0 (unmeasured) → show all, so test/server renders match.
+  const [trackW, setTrackW] = useState(0)
+  const onTrackLayout = (e: LayoutChangeEvent) => setTrackW(e.nativeEvent.layout.width)
+  const tickCount = ticks?.length ?? 0
+  const tickSpacing = trackW > 0 && tickCount > 0 ? trackW / tickCount : Infinity
+  const tickStep = tickSpacing < s.tickCellWidth ? Math.ceil(s.tickCellWidth / tickSpacing) : 1
+  // Keep the first, last, evenly-stepped, and any emphasized ticks; drop the rest's labels.
+  const showTickLabel = (i: number, emphasized: boolean): boolean =>
+    tickStep <= 1 || i === 0 || i === tickCount - 1 || i % tickStep === 0 || emphasized
   const isNeedle = marker?.type === 'needle'
   const markerHeight = isNeedle ? trackHeight + needleOverhang * 2 : trackHeight
   const markerFrac = marker != null ? fraction(marker.value, min, max) : 0
@@ -200,6 +212,7 @@ export function ZoneTrack({
       accessibilityValue={marker != null ? { min, max, now: marker.value } : { min, max, now: min }}
       accessibilityLabel={accessibilityLabel ?? `Zone track: ${marker?.value ?? min}`}
       testID="zone-track"
+      onLayout={onTrackLayout}
       {...props}
     >
       <View style={{ position: 'relative', height: markerHeight }}>
@@ -329,6 +342,7 @@ export function ZoneTrack({
           {ticks.map((tick, i) => {
             if (tick.label == null) return null
             const emphasized = tick.emphasized === true
+            if (!showTickLabel(i, emphasized)) return null
             const labelColor = tick.color ?? (emphasized ? t['brand-primary'] : TICK_COLOR)
             const labelNode = (
               <Text

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

@@ -13,16 +13,8 @@ export {
   type TempoDisplayProps,
   type TempoLivePhase,
   type TempoLiveState,
+  type TempoLiveReadout,
 } from './TempoDisplay'
-export {
-  TempoBar,
-  type TempoBarProps,
-  type TempoPhaseKey,
-  type TempoPacingState,
-  TEMPO_PACING,
-  getTempoPacingState,
-  getTempoFillPct,
-} from './TempoBar'
 export { DeviationBar, type DeviationBarProps } from './DeviationBar'
 export { IntensityBar, type IntensityBarProps } from './IntensityBar'
 export { WorkoutPill, type WorkoutPillProps, type WorkoutPillStatus } from './WorkoutPill'

package/src/lab/north-star/LivePage.tsx

@@ -0,0 +1,101 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { ScrollView, View } from 'react-native'
+import { SessionRail } from '../../components'
+import { ExerciseHeader, LiveView } from './LiveView'
+import { RestView } from './RestView'
+import {
+  dashboardFixture,
+  deriveDualModel,
+  deriveRailExercises,
+  type DashboardModel,
+} from './fixtures'
+
+export type LivePageVariant = 'live' | 'live-dual' | 'rest'
+
+/** Floor the live panel around phone width so it stops collapsing on a narrow window. */
+const PANEL_MIN_WIDTH = 390
+
+export interface LivePageProps {
+  /** Which stage to show in the main region. */
+  variant?: LivePageVariant
+  /** The dashboard store snapshot. Defaults to the built-in fixture. */
+  model?: DashboardModel
+}
+
+/**
+ * Lab specimen — the North Star wall-dashboard CONTENT (mounts inside `DashboardShell`'s
+ * children slot): the persistent {@link SessionRail} context beside a swappable stage
+ * ({@link LiveView} mid-set / {@link RestView} between sets).
+ *
+ * `live-dual` renders a dual-mode (bilateral) exercise as TWO stacked {@link LiveView}
+ * layers — one per voltra (left/right) — the v1 treatment for two-device sets. A
+ * unified split-bar view is a later exploration.
+ *
+ * NOT a published component — lab-scoped composition of production primitives only.
+ * The rail footer pace read-out is intentionally OMITTED (NO-DATA — no store field yet).
+ */
+export function LivePage({ variant = 'live', model = dashboardFixture }: LivePageProps) {
+  const exercises = deriveRailExercises(model)
+  const completedSets = model.session.completedSets.length
+  const isLive = variant === 'live' || variant === 'live-dual'
+
+  return (
+    <View className="flex-1 flex-row bg-surface-base">
+      <SessionRail
+        title={model.session.title}
+        exercises={exercises}
+        setsDone={isLive ? completedSets + 0.75 : completedSets}
+        elapsedMs={18 * 60_000}
+        budgetMs={45 * 60_000}
+        running={isLive}
+        width={272}
+        metrics={[
+          { label: 'Volume', value: '76%' },
+          { label: 'Load', value: '7.3k' },
+          { label: 'Fatigue', value: 'MOD' },
+        ]}
+      />
+      {/* footer pace strip — STUB / NO-DATA: intentionally omitted (no store field yet). */}
+
+      {/* Panel floors at ~phone width so the live view stops collapsing; rail-aware
+          breakpoints below this are a later pass. */}
+      <View className="flex-1" style={{ minWidth: PANEL_MIN_WIDTH }}>
+        {/* workout title + targets — page-level, always visible, independent of single/dual. */}
+        <ExerciseHeader session={model.session} />
+        <View className="flex-1">
+          {variant === 'live-dual' ? (
+            <DualLiveStage model={model} />
+          ) : variant === 'live' ? (
+            // `slot` names the active voltra — the shell has two connected, so the live view
+            // flags which one it is reading from (the multi-device single-view case).
+            <LiveView model={model} slot="L" />
+          ) : (
+            <RestView model={model} />
+          )}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+/**
+ * Dual-mode stage: two stacked live layers, one per voltra (left dominant, right lags).
+ *
+ * The stage SCROLLS so two full live read-outs never clip on a height-restricted wall.
+ * Each layer also compresses its height-drivers (shorter hero, tighter gaps — see
+ * {@link LiveView}'s `side`/`dual` handling) so a tall wall fits both with little or no
+ * scroll; a trimmed-per-layer treatment is a later option if scrolling proves awkward.
+ */
+function DualLiveStage({ model }: { model: DashboardModel }) {
+  const { left, right } = deriveDualModel(model)
+  return (
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
+      <View style={{ flex: 1, minHeight: 340 }}>
+        <LiveView model={left} side="left" />
+      </View>
+      <View style={{ flex: 1, minHeight: 340 }}>
+        <LiveView model={right} side="right" />
+      </View>
+    </ScrollView>
+  )
+}