@titan-design/react-ui 0.4.0 → 0.5.0

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

@@ -1,13 +1,20 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
-import { View, Text, Animated, type ViewProps, type ViewStyle } from 'react-native'
+import {
+  View,
+  Text,
+  Animated,
+  type ViewProps,
+  type ViewStyle,
+  type DimensionValue,
+} from 'react-native'
 
 export type IntensityBarOrientation = 'vertical' | 'horizontal'
 
 export interface IntensityBarProps extends ViewProps {
-  /** Current intensity level 0-1 */
+  /** Current intensity level; 1 == 100% of target. Values >1 render as over-target. */
   level: number
-  /** MRV/overexertion threshold position 0-1 */
+  /** Target position 0-1. When the level sits at this target the fill gains an at-target glow. */
   threshold?: number
   /** Orientation */
   orientation?: IntensityBarOrientation
@@ -15,28 +22,57 @@ export interface IntensityBarProps extends ViewProps {
   size?: number
   /** Width for vertical (default 6px) or height for horizontal */
   thickness?: number
-  /** Show threshold label ("MRV") */
+  /** Show the "MRV" threshold label under the bar */
   showThresholdLabel?: boolean
   className?: string
 }
 
-const TRACK_BG = 'rgba(255,255,255,0.06)'
-const THRESHOLD_COLOR = '#FFFFFF'
+const TRACK_BG = '#333333'
 const LABEL_COLOR = '#6B7280'
+const TARGET_LINE_COLOR = 'rgba(33, 150, 243, 0.5)'
+const AT_TARGET_GLOW = '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)'
 
-/** Fill color by intensity zone: teal 0-0.4, amber 0.4-0.7, red 0.7-1.0. */
-function getZoneColor(level: number): string {
-  if (level >= 0.7) return '#D14343'
-  if (level >= 0.4) return '#FFB020'
-  return '#14B8A6'
+// Zone colors graded by TRUE percentage (level * 100).
+const ZONE = {
+  building: '#14B8A6', // teal   — below target ramp-up
+  approaching: '#FFB020', // amber  — nearing target
+  target: '#FF7900', // brand  — exactly at target
+  over1: '#D14343', // red    — mild over-target
+  over2: '#A62626', // deep red — moderate over-target
+  over3: '#7A1C1C', // darkest red — severe over-target
+} as const
+
+type OverTier = 0 | 1 | 2 | 3
+
+interface Zone {
+  color: string
+  over: OverTier
+}
+
+const BULGE_SIZE: Record<Exclude<OverTier, 0>, number> = { 1: 8, 2: 10, 3: 11 }
+
+/** Map a true percentage to its fill color and over-target tier. */
+function zoneForPct(pct: number): Zone {
+  if (pct >= 125) return { color: ZONE.over3, over: 3 }
+  if (pct >= 115) return { color: ZONE.over2, over: 2 }
+  if (pct > 100) return { color: ZONE.over1, over: 1 }
+  if (pct === 100) return { color: ZONE.target, over: 0 }
+  if (pct >= 75) return { color: ZONE.approaching, over: 0 }
+  return { color: ZONE.building, over: 0 }
 }
 
-function clamp01(value: number): number {
+function clampFill(value: number): number {
   if (value < 0) return 0
   if (value > 1) return 1
   return value
 }
 
+/** True when the level rests on the supplied target (within 5%). */
+function isAtTarget(pct: number, threshold?: number): boolean {
+  if (threshold == null) return false
+  return Math.abs(pct - Math.round(threshold * 100)) <= 5
+}
+
 export function IntensityBar({
   level,
   threshold,
@@ -48,21 +84,22 @@ export function IntensityBar({
   ...props
 }: IntensityBarProps) {
   const isVertical = orientation === 'vertical'
-  const clampedLevel = clamp01(level)
-  const percentage = Math.round(clampedLevel * 100)
-  const zoneColor = getZoneColor(clampedLevel)
+  const fillLevel = clampFill(level)
+  const pct = Math.round(Math.max(0, level) * 100)
+  const zone = zoneForPct(pct)
+  const atTarget = isAtTarget(pct, threshold)
 
-  const [fillAnim] = useState(() => new Animated.Value(clampedLevel))
+  const [fillAnim] = useState(() => new Animated.Value(fillLevel))
 
   useEffect(() => {
     const animation = Animated.timing(fillAnim, {
-      toValue: clampedLevel,
+      toValue: fillLevel,
       duration: 250,
       useNativeDriver: false,
     })
     animation.start()
     return () => animation.stop()
-  }, [clampedLevel, fillAnim])
+  }, [fillLevel, fillAnim])
 
   const fillSizePercent = fillAnim.interpolate({
     inputRange: [0, 1],
@@ -74,51 +111,50 @@ export function IntensityBar({
     : { width: size, height: thickness }
 
   const fillStyle = isVertical
+    ? { position: 'absolute' as const, bottom: 0, left: 0, right: 0, height: fillSizePercent }
+    : { position: 'absolute' as const, top: 0, bottom: 0, left: 0, width: fillSizePercent }
+
+  const bulgeSize = zone.over === 0 ? 0 : BULGE_SIZE[zone.over]
+  const bulgeStyle: ViewStyle = {
+    position: 'absolute',
+    width: bulgeSize,
+    height: bulgeSize,
+    borderRadius: bulgeSize / 2,
+    backgroundColor: zone.color,
+    zIndex: 1,
+    ...(isVertical
+      ? { top: 0, left: '50%', transform: [{ translateX: -bulgeSize / 2 }] }
+      : { right: 0, top: '50%', transform: [{ translateY: -bulgeSize / 2 }] }),
+  }
+
+  const targetPct: DimensionValue = `${clampFill(threshold ?? 0) * 100}%`
+  const targetLineStyle: ViewStyle = isVertical
     ? {
-        position: 'absolute' as const,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: fillSizePercent,
+        position: 'absolute',
+        bottom: targetPct,
+        left: -3,
+        right: -3,
+        height: 1.5,
+        backgroundColor: TARGET_LINE_COLOR,
+        zIndex: 4,
       }
     : {
-        position: 'absolute' as const,
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: fillSizePercent,
+        position: 'absolute',
+        left: targetPct,
+        top: -3,
+        bottom: -3,
+        width: 1.5,
+        backgroundColor: TARGET_LINE_COLOR,
+        zIndex: 4,
       }
 
-  const thresholdLineStyle: ViewStyle | undefined =
-    threshold != null
-      ? isVertical
-        ? {
-            position: 'absolute' as const,
-            bottom: `${clamp01(threshold) * 100}%`,
-            left: -2,
-            right: -2,
-            height: 1,
-            backgroundColor: THRESHOLD_COLOR,
-            zIndex: 4,
-          }
-        : {
-            position: 'absolute' as const,
-            left: `${clamp01(threshold) * 100}%`,
-            top: -2,
-            bottom: -2,
-            width: 1,
-            backgroundColor: THRESHOLD_COLOR,
-            zIndex: 4,
-          }
-      : undefined
-
   return (
     <View
       className={className}
       style={{ alignItems: 'center' }}
       accessibilityRole="progressbar"
-      accessibilityValue={{ min: 0, max: 100, now: percentage }}
-      accessibilityLabel={`Intensity level: ${percentage}%`}
+      accessibilityValue={{ min: 0, max: 100, now: pct }}
+      accessibilityLabel={`Intensity level: ${pct}%`}
       testID="intensity-bar"
       {...props}
     >
@@ -136,16 +172,31 @@ export function IntensityBar({
           style={{
             ...fillStyle,
             borderRadius: 3,
-            backgroundColor: zoneColor,
+            backgroundColor: zone.color,
             zIndex: 2,
+            ...(atTarget ? { boxShadow: AT_TARGET_GLOW } : null),
           }}
           testID="intensity-fill"
         />
 
-        {threshold != null && (
-          <View style={thresholdLineStyle} testID="intensity-threshold" />
-        )}
+        {zone.over !== 0 && <View style={bulgeStyle} testID="intensity-bulge" />}
+
+        {threshold != null && <View style={targetLineStyle} testID="intensity-target" />}
       </View>
+
+      <Text
+        style={{
+          fontSize: 8,
+          color: LABEL_COLOR,
+          fontFamily: '"Nunito Sans", sans-serif',
+          marginTop: 6,
+        }}
+        accessibilityElementsHidden
+        testID="intensity-label"
+      >
+        {pct}%
+      </Text>
+
       {showThresholdLabel && threshold != null && (
         <Text
           style={{
@@ -153,7 +204,7 @@ export function IntensityBar({
             fontWeight: '500',
             color: LABEL_COLOR,
             fontFamily: 'Inter, sans-serif',
-            marginTop: 6,
+            marginTop: 2,
           }}
           accessibilityElementsHidden
           testID="intensity-threshold-label"

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 export interface PlaceholderStripProps extends ViewProps {
   width?: number | string
@@ -18,14 +19,12 @@ function SingleStrip({
 }: Omit<PlaceholderStripProps, 'mode' | 'segments'>) {
   return (
     <View
-      className={cn('border-border-strong', className)}
+      className={className}
       style={[
         {
           height: 3,
-          backgroundColor: 'transparent',
-          borderWidth: 1,
-          borderStyle: 'dashed',
-          borderRadius: 1,
+          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+          borderRadius: 2,
           opacity: 0.5,
         },
         width != null ? { width: width as number } : { flex: 1 },
@@ -59,13 +58,10 @@ function SegmentedStrip({
       {Array.from({ length: segments }, (_, i) => (
         <View
           key={i}
-          className="border-border-strong"
           style={{
             flex: 1,
             height: 3,
-            backgroundColor: 'transparent',
-            borderWidth: 1,
-            borderStyle: 'dashed',
+            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
             borderRadius: 1,
             minWidth: 4,
           }}

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

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
 import { View, Text, Animated, Easing, type ViewProps } from 'react-native'
-import { Star } from 'lucide-react'
+import { StarIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
 
 export type PRType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
@@ -66,7 +66,7 @@ export function PrBadge({
       testID="pr-badge-star"
       {...props}
     >
-      <Star size={14} color="#FF7900" fill="#FF7900" strokeWidth={2} />
+      <StarIcon size={14} color="#FF7900" fill="#FF7900" strokeWidth={2} />
     </View>
   ) : (
     <BaseBadge
@@ -77,7 +77,7 @@ export function PrBadge({
     >
       <Text
         style={{
-          fontSize: 10,
+          fontSize: 12,
           color: '#FF7900',
           fontWeight: '700',
           fontFamily: 'Inter, sans-serif',

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

@@ -1,6 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable, type ViewProps } from 'react-native'
-import { Star } from 'lucide-react'
+import { StarIcon } from './icons'
 import { Drawer, DrawerBody } from '../../ui/drawer'
 import { resolveColor } from '../../../theme/resolve-color'
 
@@ -84,7 +84,7 @@ function PrRecordRow({ record, index }: { record: PrRecord; index: number }) {
       }}
       testID={`pr-history-modal-record-${index}`}
     >
-      <Star size={16} color={BRAND_PRIMARY} fill={BRAND_PRIMARY} strokeWidth={2} />
+      <StarIcon size={16} color={BRAND_PRIMARY} fill={BRAND_PRIMARY} strokeWidth={2} />
       <Text
         className="text-text-secondary"
         style={{

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

@@ -0,0 +1,50 @@
+# Workout component family
+
+Training-specific components (badges, bars, timers, cards, charts, and page-level
+screens) built on titan's atoms. They live flat on disk — the tiering below is a
+documentation contract, not a directory layout, so promoting or composing a
+component is pure import churn with no file moves.
+
+## Tier map
+
+**Atoms** — single-purpose, no cross-component state:
+BaseBadge · WeightBadge · PrBadge · StatusDot · PlaceholderStrip · TempoBar ·
+DeviationBar · IntensityBar · WorkoutPill · MuscleGroupChip · Sparkline ·
+SupersetWrapper · InputBar
+
+**Molecules** — compose atoms, own a little local state:
+VelocityStrip · SetRow · TempoDisplay · RestTimer · MesoProgressBar · WeekRow ·
+WorkoutCard
+
+**Organisms** — full features, often with their own data contract:
+ExerciseCard · MesoCard · MesoStatusCard · PrHistoryModal · ReadinessCheck ·
+StrengthTrendChart · CapacityBandChart · BodyMap · BodyMapDetailPanel
+
+**Pages** — phone-shaped reference screens (whole-screen compositions):
+ActiveWorkoutPage · ExerciseDetailPage · ProgramPlanningPage · TrainingStatusPage
+
+## Subpaths
+
+Two families are kept off the root barrel so `@titan-design/react-ui` stays free
+of their heavy runtime dependencies. In both cases the value exports move to the
+subpath while type-only re-exports remain on the root, so consumers can still
+type props without pulling the dependency.
+
+- **`@titan-design/react-ui/bodymap`** — isolates
+  `react-native-body-highlighter` (a native SVG dep). BodyMap, BodyMapDetailPanel,
+  TrainingStatusPage, and the muscle taxonomy live here.
+- **`@titan-design/react-ui/pages`** — isolates the page-level organisms
+  (ActiveWorkoutPage, ExerciseDetailPage, ProgramPlanningPage). They are full app
+  screens orphaned by both consumers, kept as reference implementations while their
+  successors (the responsive level views) are built. TrainingStatusPage is the
+  exception — it stays under `/bodymap` because of the body-highlighter dep.
+
+## Notes
+
+- **BaseBadge is an internal composition primitive** — the shared shell that
+  WeightBadge and PrBadge build on. It is exempt from orphan accounting; it is not
+  meant to be consumed directly even though it is exported for composition.
+- Badge icons (WeightBadge's dumbbell, PrBadge / PrHistoryModal's star) are inline
+  SVGs (`./icons.tsx`), not `lucide-react` — that dependency was dropped in 0.5.0
+  to keep the root barrel light. The SVG paths mirror lucide's glyphs so rendering
+  is unchanged.

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

@@ -75,16 +75,51 @@ describe('RestTimer', () => {
     })
   })
 
-  describe('next set info', () => {
-    it('displays nextSetInfo when provided', () => {
+  describe('display-only mode', () => {
+    it('renders the Skip and +30s actions by default', () => {
+      render(<RestTimer {...defaultProps} />)
+      expect(screen.getByTestId('rest-timer-skip')).toBeInTheDocument()
+      expect(screen.getByTestId('rest-timer-add-time')).toBeInTheDocument()
+    })
+
+    it('hides the Skip and +30s actions when displayOnly', () => {
+      render(<RestTimer {...defaultProps} displayOnly />)
+      expect(screen.queryByTestId('rest-timer-skip')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('rest-timer-add-time')).not.toBeInTheDocument()
+    })
+
+    it('keeps the countdown, progress bar, and next-set line when displayOnly', () => {
       render(
         <RestTimer
           {...defaultProps}
+          elapsedMs={30000}
+          displayOnly
           nextSetInfo="Bench Press — Set 3 of 4"
-        />,
+        />
+      )
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('2:00')
+      expect(screen.getByTestId('rest-timer-progress-fill')).toBeInTheDocument()
+      expect(screen.getByTestId('rest-timer-next-set')).toHaveTextContent(
+        'Bench Press — Set 3 of 4'
       )
+    })
+
+    it('does not fire callbacks in display-only mode (controls absent)', () => {
+      const onSkip = vi.fn()
+      const onAddTime = vi.fn()
+      render(<RestTimer {...defaultProps} onSkip={onSkip} onAddTime={onAddTime} displayOnly />)
+      expect(screen.queryByLabelText('Skip rest')).not.toBeInTheDocument()
+      expect(screen.queryByLabelText('Add 30 seconds')).not.toBeInTheDocument()
+      expect(onSkip).not.toHaveBeenCalled()
+      expect(onAddTime).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('next set info', () => {
+    it('displays nextSetInfo when provided', () => {
+      render(<RestTimer {...defaultProps} nextSetInfo="Bench Press — Set 3 of 4" />)
       expect(screen.getByTestId('rest-timer-next-set')).toHaveTextContent(
-        'Bench Press — Set 3 of 4',
+        'Bench Press — Set 3 of 4'
       )
     })
 
@@ -127,9 +162,7 @@ describe('RestTimer', () => {
 
     it('has timer role with remaining seconds in label', () => {
       render(<RestTimer {...defaultProps} totalSeconds={90} elapsedMs={30000} />)
-      expect(
-        screen.getByLabelText('Rest timer, 60 seconds remaining'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Rest timer, 60 seconds remaining')).toBeInTheDocument()
     })
 
     it('skip button has accessible label', () => {
@@ -146,9 +179,7 @@ describe('RestTimer', () => {
 
 describe('RestTimer zero-duration timer (NaN guard)', () => {
   it('emits a valid 100% width (not NaN) when totalSeconds is 0', () => {
-    const { container } = render(
-      <RestTimer {...defaultProps} totalSeconds={0} elapsedMs={0} />,
-    )
+    const { container } = render(<RestTimer {...defaultProps} totalSeconds={0} elapsedMs={0} />)
     expect(screen.getByTestId('rest-timer-progress-fill')).toHaveStyle({ width: '100%' })
     expect(container.innerHTML).not.toContain('NaN')
   })

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

@@ -11,6 +11,8 @@ export interface RestTimerProps {
   onAddTime: () => void
   nextSetInfo?: string
   visible: boolean
+  /** Passive/poll-only mode: hides the Skip and +30s controls, keeps the countdown, progress bar, and next-set line. */
+  displayOnly?: boolean
 }
 
 export function RestTimer({
@@ -20,6 +22,7 @@ export function RestTimer({
   onAddTime,
   nextSetInfo,
   visible,
+  displayOnly = false,
 }: RestTimerProps) {
   if (!visible) return null
 
@@ -123,55 +126,57 @@ export function RestTimer({
         />
       </View>
 
-      {/* Actions row */}
-      <View style={{ flexDirection: 'row', gap: 8 }}>
-        <Pressable
-          onPress={onAddTime}
-          style={{
-            backgroundColor: 'rgba(255,255,255,0.06)',
-            paddingVertical: 8,
-            paddingHorizontal: 20,
-            borderRadius: 8,
-          }}
-          accessibilityRole="button"
-          accessibilityLabel="Add 30 seconds"
-          testID="rest-timer-add-time"
-        >
-          <Text
-            className="text-text-secondary"
+      {/* Actions row — hidden in display-only (poll-only) mode */}
+      {!displayOnly && (
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <Pressable
+            onPress={onAddTime}
             style={{
-              fontSize: 11,
-              fontFamily: 'Inter, sans-serif',
-              fontWeight: '600',
+              backgroundColor: 'rgba(255,255,255,0.06)',
+              paddingVertical: 8,
+              paddingHorizontal: 20,
+              borderRadius: 8,
             }}
+            accessibilityRole="button"
+            accessibilityLabel="Add 30 seconds"
+            testID="rest-timer-add-time"
           >
-            +30s
-          </Text>
-        </Pressable>
-        <Pressable
-          onPress={onSkip}
-          style={{
-            backgroundColor: 'rgba(255,121,0,0.12)',
-            paddingVertical: 8,
-            paddingHorizontal: 20,
-            borderRadius: 8,
-          }}
-          accessibilityRole="button"
-          accessibilityLabel="Skip rest"
-          testID="rest-timer-skip"
-        >
-          <Text
+            <Text
+              className="text-text-secondary"
+              style={{
+                fontSize: 11,
+                fontFamily: 'Inter, sans-serif',
+                fontWeight: '600',
+              }}
+            >
+              +30s
+            </Text>
+          </Pressable>
+          <Pressable
+            onPress={onSkip}
             style={{
-              fontSize: 11,
-              fontFamily: 'Inter, sans-serif',
-              fontWeight: '600',
-              color: BRAND_PRIMARY,
+              backgroundColor: 'rgba(255,121,0,0.12)',
+              paddingVertical: 8,
+              paddingHorizontal: 20,
+              borderRadius: 8,
             }}
+            accessibilityRole="button"
+            accessibilityLabel="Skip rest"
+            testID="rest-timer-skip"
           >
-            Skip
-          </Text>
-        </Pressable>
-      </View>
+            <Text
+              style={{
+                fontSize: 11,
+                fontFamily: 'Inter, sans-serif',
+                fontWeight: '600',
+                color: BRAND_PRIMARY,
+              }}
+            >
+              Skip
+            </Text>
+          </Pressable>
+        </View>
+      )}
     </View>
   )
 }

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

@@ -1,6 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text } from 'react-native'
-import { VelocityStrip } from './VelocityStrip'
+import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
 import { PrBadge, type PRType } from './PrBadge'
 import { roundRpe, rpeColor, roundWeight } from '../../../utils/workout-format'
 
@@ -14,7 +14,12 @@ export interface SetRowProps {
   weight: number | null
   rpe?: number | null
   unit: 'lbs' | 'kg'
+  /** Per-rep MEAN concentric velocities (m/s). */
   velocities?: number[]
+  /** Optional velocity-zone bands (WA `VelocityZones.bands`); default scale when absent. */
+  velocityZones?: readonly VelocityZoneBandProp[]
+  /** Live mode: index of the newest rep bar to animate (pop / new-peak bounce). */
+  velocityLiveRepIndex?: number
   velocityExpanded?: boolean
   onVelocityToggle?: () => void
   setType?: string
@@ -43,6 +48,8 @@ export function SetRow({
   rpe,
   unit,
   velocities,
+  velocityZones,
+  velocityLiveRepIndex,
   velocityExpanded,
   onVelocityToggle,
   setType,
@@ -239,6 +246,8 @@ export function SetRow({
         >
           <VelocityStrip
             velocities={velocities}
+            zones={velocityZones}
+            liveRepIndex={velocityLiveRepIndex}
             expanded={velocityExpanded}
             onToggle={onVelocityToggle}
             variant={onVelocityToggle ? 'full' : 'mini'}