@titan-design/react-ui 0.3.0 → 0.5.0

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

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, afterEach } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import {
@@ -210,10 +210,26 @@ describe('getVelocityZoneName', () => {
 })
 
 describe('calculateVelocityLoss', () => {
-  it('calculates percentage loss from first to last rep', () => {
+  it('calculates percentage loss from running-best to last rep', () => {
+    // Best is the first rep here, so best->last matches the legacy result.
     expect(calculateVelocityLoss([1.0, 0.8])).toBe(20)
   })
 
+  it('uses the best rep (not the first) as the reference for non-monotonic sets', () => {
+    // best = 1.0 (rep 2), last = 0.6 -> (1.0 - 0.6) / 1.0 = 40%.
+    // Legacy first->last would have been (0.8 - 0.6) / 0.8 = 25%.
+    expect(calculateVelocityLoss([0.8, 1.0, 0.6])).toBe(40)
+  })
+
+  it('clamps to 0 when the set ends on its best rep', () => {
+    expect(calculateVelocityLoss([0.6, 0.8, 1.0])).toBe(0)
+  })
+
+  it('clamps to 0 when a later rep exceeds the first rep', () => {
+    // best = 1.2 (last), so loss is negative pre-clamp -> 0.
+    expect(calculateVelocityLoss([1.0, 0.9, 1.2])).toBe(0)
+  })
+
   it('returns 0 for single rep', () => {
     expect(calculateVelocityLoss([1.0])).toBe(0)
   })
@@ -221,6 +237,10 @@ describe('calculateVelocityLoss', () => {
   it('returns 0 for empty array', () => {
     expect(calculateVelocityLoss([])).toBe(0)
   })
+
+  it('returns 0 when the best rep is non-positive', () => {
+    expect(calculateVelocityLoss([0, 0])).toBe(0)
+  })
 })
 
 describe('calculateMeanVelocity', () => {
@@ -233,6 +253,73 @@ describe('calculateMeanVelocity', () => {
   })
 })
 
+// WA-shaped 5-band zone set (compound movement-class defaults, mean m/s).
+const compoundBands = [
+  { id: 'grinding', label: 'Grinding', min: 0, max: 0.35 },
+  { id: 'maximalStrength', label: 'Max Strength', min: 0.35, max: 0.5 },
+  { id: 'strengthSpeed', label: 'Strength-Speed', min: 0.5, max: 0.75 },
+  { id: 'power', label: 'Power', min: 0.75, max: 1.0 },
+  { id: 'speed', label: 'Speed', min: 1.0, max: null },
+] as const
+
+describe('VelocityStrip zones prop', () => {
+  it('colors bars from the supplied bands (mini)', () => {
+    render(<VelocityStrip velocities={[1.1, 0.45]} zones={compoundBands} variant="mini" />)
+    // 1.1 -> speed -> green; 0.45 -> maximalStrength -> red (shared with grinding).
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ed573' })
+    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ backgroundColor: '#ff4757' })
+  })
+
+  it('labels the summary row with the band containing the mean velocity', () => {
+    // mean of the sample = 0.80 -> power band.
+    render(<VelocityStrip velocities={sampleVelocities} zones={compoundBands} expanded />)
+    expect(screen.getByTestId('velocity-info-row')).toHaveTextContent('Power')
+  })
+
+  it('falls back to the default scale when zones is absent', () => {
+    render(<VelocityStrip velocities={[1.1]} variant="mini" />)
+    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ backgroundColor: '#2ed573' })
+  })
+})
+
+describe('VelocityStrip live mode', () => {
+  const originalMatchMedia = window.matchMedia
+
+  afterEach(() => {
+    if (originalMatchMedia) window.matchMedia = originalMatchMedia
+    else delete (window as { matchMedia?: unknown }).matchMedia
+  })
+
+  it('marks the latest rep bar in its accessibility label', () => {
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={3} expanded />)
+    expect(
+      screen.getByLabelText(/Rep 4: 0\.68 meters per second, latest rep$/),
+    ).toBeInTheDocument()
+  })
+
+  it('flags a new set peak on the latest bar', () => {
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} expanded />)
+    expect(
+      screen.getByLabelText(/Rep 1: 1\.10 meters per second, latest rep, new set peak$/),
+    ).toBeInTheDocument()
+  })
+
+  it('renders without animation when prefers-reduced-motion is set', () => {
+    window.matchMedia = vi.fn().mockReturnValue({
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }) as unknown as typeof window.matchMedia
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} expanded />)
+    expect(screen.getByTestId('velocity-bar-0')).toBeInTheDocument()
+  })
+
+  it('does not apply live marking in the mini variant', () => {
+    render(<VelocityStrip velocities={sampleVelocities} liveRepIndex={0} variant="mini" />)
+    expect(screen.queryByLabelText(/latest rep/)).not.toBeInTheDocument()
+  })
+})
+
 describe('VelocityStrip all-zero velocities (NaN guard)', () => {
   it('emits a valid 0% bar height (not NaN) when every velocity is zero (expanded)', () => {
     render(<VelocityStrip velocities={[0, 0, 0]} expanded />)

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

@@ -1,11 +1,54 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
-import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+import { View, Text, Pressable, Animated, Easing, type ViewProps, type ViewStyle } from 'react-native'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 import { formatVelocity } from '../../../utils/workout-format'
 
+/**
+ * Structural velocity-zone band accepted from an upstream analytics source
+ * (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
+ * 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
+ * here via {@link zoneIdToScaleToken}.
+ */
+export interface VelocityZoneBandProp {
+  /** Stable zone identity (e.g. WA's `VelocityZoneId`). Drives color mapping. */
+  id: string
+  /** Human-readable label shown in the summary row. */
+  label: string
+  /** Inclusive lower bound (m/s mean concentric velocity). */
+  min: number
+  /** Exclusive upper bound (m/s); `null` marks the open top band. */
+  max: number | null
+}
+
 export interface VelocityStripProps extends ViewProps {
+  /**
+   * Per-rep MEAN concentric velocity (m/s), one entry per rep (brain WA-D02).
+   * Drives both bar height and — in the default path — zone color. Callers must
+   * feed mean (not peak) concentric velocity so bar color, height, and the
+   * summary label all describe one metric.
+   */
   velocities: number[]
+  /**
+   * Optional velocity-zone bands (shape-compatible with WA's
+   * `VelocityZones.bands`). When provided, bar color and the summary zone label
+   * come from these bands via {@link zoneIdToScaleToken}. When omitted, the
+   * built-in default scale (≥1.0 / ≥0.75 / ≥0.5) is used — identical to prior
+   * releases. Colors NEVER come from the bands themselves.
+   */
+  zones?: readonly VelocityZoneBandProp[]
+  /**
+   * Live mode: index of the most-recently-completed rep. That bar animates in
+   * with a "pop"; if it is also the current set peak (a new best), it "bounces"
+   * instead. Only the latest bar animates. Honors `prefers-reduced-motion`.
+   * Full variant only.
+   */
+  liveRepIndex?: number
   expanded?: boolean
   onToggle?: () => void
   onRepPress?: (index: number, velocity: number) => void
@@ -14,9 +57,36 @@ export interface VelocityStripProps extends ViewProps {
   className?: string
 }
 
-// Canonical scale shared with SetRow's RPE color (see theme/workout-tokens.ts).
+// Canonical 4-color performance scale shared with SetRow's RPE color
+// (see theme/workout-tokens.ts). green = fastest, red = slowest/grinding.
 const VEL_COLORS = WORKOUT_TOKENS.scale
 
+/**
+ * Map a velocity-zone id (WA's 5-band taxonomy) onto the canonical 4-color
+ * scale. The scale has 4 hues but the taxonomy has 5 bands, so the two slowest
+ * bands — `maximalStrength` and `grinding` — intentionally share `red`: both
+ * read as "heavy / effortful" and there is no distinct 5th data-viz hue. The
+ * top three bands align 1:1 with the legacy default scale so an exercise moving
+ * from default to profile-derived zones never shifts its fast-end colors.
+ *
+ * Legacy default parity: speed=green, power=yellow, strengthSpeed=orange, and
+ * the old sub-0.5 "Strength" band (now split into maximalStrength + grinding)
+ * stays red.
+ *
+ * Unknown ids fall back to `green` (matching the historical default-path
+ * fallback), so a forward-compatible band id never renders an empty bar.
+ */
+const zoneIdToScaleToken: Record<string, keyof typeof VEL_COLORS> = {
+  speed: 'green',
+  power: 'yellow',
+  strengthSpeed: 'orange',
+  maximalStrength: 'red',
+  grinding: 'red',
+}
+
+// --- Default (no-zones) scale ------------------------------------------------
+// Retained as named exports for back-compat; they define the default path.
+
 export function getVelocityZoneColor(velocity: number): string {
   if (velocity >= 1.0) return 'vel-green'
   if (velocity >= 0.75) return 'vel-yellow'
@@ -31,35 +101,47 @@ export function getVelocityZoneName(velocity: number): string {
   return 'Strength'
 }
 
+const zoneHexMap: Record<string, string> = {
+  'vel-green': VEL_COLORS.green,
+  'vel-yellow': VEL_COLORS.yellow,
+  'vel-orange': VEL_COLORS.orange,
+  'vel-red': VEL_COLORS.red,
+}
+
+/**
+ * Velocity loss for a set, as a whole percentage. Uses the running-best rep as
+ * the reference (matching WA-02.05 / brain WA-D01): `(vBest − vLast) / vBest`,
+ * clamped to ≥ 0 so a set that ends on its best rep reports 0 loss.
+ */
 export function calculateVelocityLoss(velocities: number[]): number {
   if (velocities.length < 2) return 0
-  const first = velocities[0]
+  const best = Math.max(...velocities)
+  if (best <= 0) return 0
   const last = velocities[velocities.length - 1]
-  if (first === 0) return 0
-  return Math.round(((first - last) / first) * 100)
+  return Math.max(0, Math.round(((best - last) / best) * 100))
 }
 
+/** Arithmetic mean of the per-rep mean-concentric velocities. */
 export function calculateMeanVelocity(velocities: number[]): number {
   if (velocities.length === 0) return 0
   const sum = velocities.reduce((acc, v) => acc + v, 0)
   return sum / velocities.length
 }
 
-function getBarColor(zone: string): string {
-  switch (zone) {
-    case 'vel-green': return VEL_COLORS.green
-    case 'vel-yellow': return VEL_COLORS.yellow
-    case 'vel-orange': return VEL_COLORS.orange
-    case 'vel-red': return VEL_COLORS.red
-    default: return VEL_COLORS.green
+/** Classify a velocity into its band (slow → fast, min inclusive / max exclusive). */
+function classifyBand(
+  velocity: number,
+  bands: readonly VelocityZoneBandProp[],
+): VelocityZoneBandProp | undefined {
+  for (const band of bands) {
+    if (band.max === null || velocity < band.max) return band
   }
+  return bands[bands.length - 1]
 }
 
-const zoneHexMap: Record<string, string> = {
-  'vel-green': VEL_COLORS.green,
-  'vel-yellow': VEL_COLORS.yellow,
-  'vel-orange': VEL_COLORS.orange,
-  'vel-red': VEL_COLORS.red,
+function bandColor(band: VelocityZoneBandProp): string {
+  const token = zoneIdToScaleToken[band.id]
+  return token ? VEL_COLORS[token] : VEL_COLORS.green
 }
 
 function getLossStyle(loss: number): Record<string, string> | null {
@@ -68,11 +150,33 @@ function getLossStyle(loss: number): Record<string, string> | null {
   return null
 }
 
+function getReducedMotionPreference(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+/** Track the OS "reduce motion" preference; falls back to `false` (jsdom/SSR). */
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(getReducedMotionPreference)
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const handler = () => setReduced(mq.matches)
+    handler()
+    mq.addEventListener?.('change', handler)
+    return () => mq.removeEventListener?.('change', handler)
+  }, [])
+  return reduced
+}
+
 const ANIMATION_DURATION = 400
 const ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1)
+const POP_EASING = Easing.bezier(0.34, 1.56, 0.64, 1)
 
 export function VelocityStrip({
   velocities,
+  zones,
+  liveRepIndex,
   expanded = false,
   onToggle,
   onRepPress,
@@ -84,11 +188,55 @@ export function VelocityStrip({
   const maxVelocity = Math.max(...velocities, 0)
   const meanVelocity = calculateMeanVelocity(velocities)
   const loss = calculateVelocityLoss(velocities)
-  const meanZone = getVelocityZoneName(meanVelocity)
 
+  const hasZones = zones != null && zones.length > 0
+  const barColorFor = (v: number): string =>
+    hasZones ? bandColor(classifyBand(v, zones)!) : zoneHexMap[getVelocityZoneColor(v)]
+  const meanZone = hasZones
+    ? (classifyBand(meanVelocity, zones)?.label ?? '')
+    : getVelocityZoneName(meanVelocity)
+
+  const prefersReducedMotion = usePrefersReducedMotion()
   const [heightAnim] = useState(() => new Animated.Value(expanded ? 60 : 3))
   const [labelOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0))
   const [infoOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0))
+  const [liveScale] = useState(() => new Animated.Value(1))
+
+  // Newest-rep animation: pop for a normal rep, bounce when it sets a new peak.
+  const liveVelocity = liveRepIndex != null ? velocities[liveRepIndex] : undefined
+  const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity
+  useEffect(() => {
+    if (variant === 'mini' || liveRepIndex == null || liveVelocity == null) return
+    if (prefersReducedMotion) {
+      liveScale.setValue(1)
+      return
+    }
+    if (isNewPeak) {
+      liveScale.setValue(1)
+      Animated.sequence([
+        Animated.timing(liveScale, {
+          toValue: 1.25,
+          duration: 150,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.spring(liveScale, {
+          toValue: 1,
+          friction: 3,
+          tension: 140,
+          useNativeDriver: true,
+        }),
+      ]).start()
+    } else {
+      liveScale.setValue(0.8)
+      Animated.timing(liveScale, {
+        toValue: 1,
+        duration: 300,
+        easing: POP_EASING,
+        useNativeDriver: true,
+      }).start()
+    }
+  }, [variant, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale])
 
   useEffect(() => {
     if (variant === 'mini') return
@@ -131,7 +279,7 @@ export function VelocityStrip({
             key={i}
             style={{
               flex: 1,
-              backgroundColor: getBarColor(getVelocityZoneColor(v)),
+              backgroundColor: barColorFor(v),
               borderRadius: 1,
               minWidth: 4,
               height: '100%' as unknown as number,
@@ -151,7 +299,9 @@ export function VelocityStrip({
 
   const stripContent = (
     <Animated.View
-      className={className}
+      className={[className, expanded ? 'bg-surface-raised' : 'bg-transparent']
+        .filter(Boolean)
+        .join(' ')}
       style={[
         {
           height: heightAnim,
@@ -162,7 +312,6 @@ export function VelocityStrip({
           paddingBottom: expanded ? 24 : 0,
           paddingHorizontal: expanded ? 6 : 0,
           paddingVertical: expanded ? undefined : 8,
-          backgroundColor: expanded ? 'var(--color-surface-raised)' : 'transparent',
           overflow: expanded ? 'visible' : 'hidden',
         },
       ]}
@@ -175,11 +324,44 @@ export function VelocityStrip({
         style={{ flexDirection: 'row', flex: 1, gap: 2, alignItems: 'flex-end' }}
       >
         {velocities.map((v, i) => {
-          const zone = getVelocityZoneColor(v)
+          const barBackground = barColorFor(v)
           // Guard all-zero velocities (idle / pre-rep): maxVelocity === 0 makes
           // this 0 / 0 === NaN and emits height:'NaN%'. Flatten the bars instead.
           const barHeightPct =
             maxVelocity > 0 ? Math.round((v / (maxVelocity * 1.15)) * 100) : 0
+          const isLive = liveRepIndex === i
+          const liveLabelSuffix = isLive
+            ? isNewPeak
+              ? ', latest rep, new set peak'
+              : ', latest rep'
+            : ''
+
+          const barStyle: ViewStyle = expanded
+            ? { height: `${barHeightPct}%`, minHeight: 2, borderTopLeftRadius: 2, borderTopRightRadius: 2, backgroundColor: barBackground }
+            : {
+                minHeight: '100%' as unknown as number,
+                borderTopLeftRadius: 2,
+                borderTopRightRadius: 2,
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                backgroundColor: barBackground,
+              }
+
+          const barInner = isLive ? (
+            <Animated.View
+              style={[barStyle, { transform: [{ scale: liveScale }] }]}
+              testID={`velocity-bar-${i}`}
+              accessibilityRole="image"
+              accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second${liveLabelSuffix}`}
+            />
+          ) : (
+            <View
+              style={barStyle}
+              testID={`velocity-bar-${i}`}
+              accessibilityRole="image"
+              accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second`}
+            />
+          )
 
           const bar = (
             <View
@@ -189,30 +371,15 @@ export function VelocityStrip({
               {expanded && (
                 <Animated.View style={{ opacity: labelOpacity, alignItems: 'center', position: 'absolute', top: -13, left: 0, right: 0 }} accessibilityElementsHidden>
                   <Text
-                    style={{ fontSize: 8, fontWeight: '600', color: 'var(--color-text-secondary)' }}
+                    className="text-text-secondary"
+                    style={{ fontSize: 8, fontWeight: '600' }}
                     testID={`velocity-label-${i}`}
                   >
                     {formatVelocity(v)}
                   </Text>
                 </Animated.View>
               )}
-              <View
-                style={
-                  expanded
-                    ? { height: `${barHeightPct}%`, minHeight: 2, borderTopLeftRadius: 2, borderTopRightRadius: 2, backgroundColor: zoneHexMap[zone] }
-                    : {
-                        minHeight: '100%' as unknown as number,
-                        borderTopLeftRadius: 2,
-                        borderTopRightRadius: 2,
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: 0,
-                        backgroundColor: zoneHexMap[zone],
-                      }
-                }
-                testID={`velocity-bar-${i}`}
-                accessibilityRole="image"
-                accessibilityLabel={`Rep ${i + 1}: ${formatVelocity(v)} meters per second`}
-              />
+              {barInner}
             </View>
           )
 
@@ -248,18 +415,18 @@ export function VelocityStrip({
           testID="velocity-info-row"
         >
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 10,
-              color: 'var(--color-text-secondary)',
               fontFamily: 'Inter, sans-serif',
             }}
           >
-            {meanZone} {'\u00B7'} {formatVelocity(meanVelocity)} m/s
+            {meanZone} {'·'} {formatVelocity(meanVelocity)} m/s
           </Text>
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 10,
-              color: 'var(--color-text-secondary)',
               fontFamily: 'Inter, sans-serif',
               ...getLossStyle(loss),
             }}

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

@@ -37,12 +37,12 @@ describe('WeekRow', () => {
 
     it('passes the threshold through to the intensity bar', () => {
       render(<WeekRow {...baseProps} intensityThreshold={0.8} />)
-      expect(screen.getByTestId('intensity-threshold')).toBeInTheDocument()
+      expect(screen.getByTestId('intensity-target')).toBeInTheDocument()
     })
 
     it('omits the threshold line when not provided', () => {
       render(<WeekRow {...baseProps} />)
-      expect(screen.queryByTestId('intensity-threshold')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('intensity-target')).not.toBeInTheDocument()
     })
   })
 

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

@@ -100,11 +100,12 @@ export function WeekRow({
           />
         )}
         <Text
+          className={isCurrent ? undefined : 'text-text-primary'}
           style={{
             fontSize: 13,
             fontWeight: '700',
             fontFamily: 'Inter, sans-serif',
-            color: isCurrent ? BRAND_PRIMARY : 'var(--color-text-primary)',
+            color: isCurrent ? BRAND_PRIMARY : undefined,
           }}
           accessibilityElementsHidden
         >

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

@@ -75,10 +75,10 @@ describe('WeightBadge', () => {
       })
     })
 
-    it('uses brand-primary-subtle border color on PR state', () => {
+    it('uses a brand-primary border ring on PR state', () => {
       render(<WeightBadge value={315} isPr />)
       expect(screen.getByTestId('weight-badge')).toHaveStyle({
-        borderTopColor: 'rgba(255, 121, 0, 0.12)',
+        borderTopColor: 'rgba(255, 121, 0, 0.3)',
       })
     })
   })

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

@@ -1,6 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { Text } from 'react-native'
-import { Dumbbell } from 'lucide-react'
+import { DumbbellIcon } from './icons'
 import {
   BaseBadge,
   baseBadgeSizeConfig,
@@ -61,7 +61,7 @@ export function WeightBadge({
       className={className}
       icon={
         showIcon ? (
-          <Dumbbell size={config.iconSize} color={iconColor} strokeWidth={2} />
+          <DumbbellIcon size={config.iconSize} color={iconColor} strokeWidth={2} />
         ) : undefined
       }
       accessibilityLabel={fullLabel}

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

@@ -43,11 +43,6 @@ export interface WorkoutCardProps extends ViewProps {
 }
 
 const COLORS = {
-  // Theme-aware foregrounds: resolve to a readable color in both light and dark
-  // (react-native-web passes the CSS var through to the inline style).
-  textPrimary: 'var(--color-text-primary)',
-  textSecondary: 'var(--color-text-secondary)',
-  textTertiary: 'var(--color-text-tertiary)',
   statusSuccess: '#14B8A6',
   brandPrimary: '#FF7900',
   borderDefault: '#1F1F1F',
@@ -124,11 +119,11 @@ export function WorkoutCard({
     <View style={{ padding: 14 }} testID="workout-card-body">
       <View className="flex-row items-center" testID="workout-card-header">
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: COLORS.textPrimary,
           }}
           testID="workout-card-name"
         >
@@ -136,10 +131,10 @@ export function WorkoutCard({
         </Text>
         <View className="flex-1" />
         <Text
+          className="text-text-tertiary"
           style={{
             fontSize: 11,
             fontFamily: 'Inter, sans-serif',
-            color: COLORS.textTertiary,
           }}
           testID="workout-card-date"
         >
@@ -148,11 +143,11 @@ export function WorkoutCard({
       </View>
 
       <Text
+        className="text-text-secondary"
         style={{
           marginTop: 4,
           fontSize: 12,
           fontFamily: 'Inter, sans-serif',
-          color: COLORS.textSecondary,
         }}
         testID="workout-card-stats"
       >

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

@@ -0,0 +1,68 @@
+// Inline SVG icons for the Workout badges — replaces the `lucide-react`
+// dependency (dep hygiene, titan 0.5.0). The paths mirror lucide-react's
+// `Dumbbell` and `Star` glyphs verbatim so rendering is pixel-identical to the
+// previous `<Dumbbell>` / `<Star>` output (same viewBox, stroke, fill, and
+// round line caps). Rendered as raw `<svg>` DOM elements — the same web-SVG
+// mechanism `Progress.tsx` uses, and the same surface `lucide-react` produced
+// (both are web-only SVG; native icon rendering was never wired here).
+
+export interface WorkoutIconProps {
+  /** Rendered width/height in px (viewBox is fixed 24×24). */
+  size?: number
+  /** Stroke color. */
+  color?: string
+  /** Fill color; defaults to `none` (outline only). */
+  fill?: string
+  /** Stroke width. */
+  strokeWidth?: number
+}
+
+/** Dumbbell glyph (mirrors lucide-react `Dumbbell`). Outline-only by default. */
+export function DumbbellIcon({
+  size = 24,
+  color = 'currentColor',
+  fill = 'none',
+  strokeWidth = 2,
+}: WorkoutIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={fill}
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M14.4 14.4 9.6 9.6" />
+      <path d="M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z" />
+      <path d="m21.5 21.5-1.4-1.4" />
+      <path d="M3.9 3.9 2.5 2.5" />
+      <path d="M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z" />
+    </svg>
+  )
+}
+
+/** Star glyph (mirrors lucide-react `Star`). Pass `fill` for a solid star. */
+export function StarIcon({
+  size = 24,
+  color = 'currentColor',
+  fill = 'none',
+  strokeWidth = 2,
+}: WorkoutIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={fill}
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
+    </svg>
+  )
+}