@titan-design/react-ui 0.4.0 → 0.5.0

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,
@@ -176,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
@@ -198,23 +379,7 @@ export function VelocityStrip({
                   </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>
           )
 
@@ -256,7 +421,7 @@ export function VelocityStrip({
               fontFamily: 'Inter, sans-serif',
             }}
           >
-            {meanZone} {'\u00B7'} {formatVelocity(meanVelocity)} m/s
+            {meanZone} {'·'} {formatVelocity(meanVelocity)} m/s
           </Text>
           <Text
             className="text-text-secondary"

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/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/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>
+  )
+}

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

@@ -8,7 +8,12 @@ export { WeightBadge, type WeightBadgeProps, type WeightBadgeSize } from './Weig
 export { PrBadge, type PrBadgeProps, type PRType } from './PrBadge'
 export { StatusDot, type StatusDotVariant, type StatusDotProps } from './StatusDot'
 export { PlaceholderStrip, type PlaceholderStripProps } from './PlaceholderStrip'
-export { TempoDisplay, type TempoDisplayProps } from './TempoDisplay'
+export {
+  TempoDisplay,
+  type TempoDisplayProps,
+  type TempoLivePhase,
+  type TempoLiveState,
+} from './TempoDisplay'
 export {
   TempoBar,
   type TempoBarProps,
@@ -24,6 +29,7 @@ export { WorkoutPill, type WorkoutPillProps, type WorkoutPillStatus } from './Wo
 export {
   VelocityStrip,
   type VelocityStripProps,
+  type VelocityZoneBandProp,
   getVelocityZoneColor,
   getVelocityZoneName,
   calculateVelocityLoss,
@@ -103,37 +109,29 @@ export type {
   TrainingStatusMuscle,
   TrainingStatusSummary,
 } from './TrainingStatusPage'
-export {
-  ProgramPlanningPage,
-  deriveNavLevel,
-  toProgressBarMesos,
-  findMeso,
-  findWeek,
-  findWorkout,
-  buildBreadcrumbs,
-  type ProgramPlanningPageProps,
-  type PlanMeso,
-  type PlanWeek,
-  type PlanWorkout,
-  type ProgramNavLevel,
-  type ProgramSelection,
-  type ProgramBreadcrumb,
+// ActiveWorkoutPage / ExerciseDetailPage / ProgramPlanningPage are page-level
+// organisms demoted to the `@titan-design/react-ui/pages` subpath (titan 0.5.0).
+// Their VALUE exports (components + derivation helpers) live there; only
+// type-only re-exports stay on this barrel (erased at build, no runtime pull).
+export type {
+  ProgramPlanningPageProps,
+  PlanMeso,
+  PlanWeek,
+  PlanWorkout,
+  ProgramNavLevel,
+  ProgramSelection,
+  ProgramBreadcrumb,
 } from './ProgramPlanningPage'
-export {
-  ExerciseDetailPage,
-  deriveExerciseStats,
-  toExerciseCardProps,
-  summarizeVbt,
-  EXERCISE_DETAIL_TABS,
-  type ExerciseDetailPageProps,
-  type ExerciseDetailTab,
-  type ExerciseDetailHeader,
-  type ExerciseDetailEntry,
-  type ExerciseTrend,
-  type ExerciseVbtSet,
-  type ExerciseVbt,
-  type ExerciseDetailStats,
-  type VbtSummary,
+export type {
+  ExerciseDetailPageProps,
+  ExerciseDetailTab,
+  ExerciseDetailHeader,
+  ExerciseDetailEntry,
+  ExerciseTrend,
+  ExerciseVbtSet,
+  ExerciseVbt,
+  ExerciseDetailStats,
+  VbtSummary,
 } from './ExerciseDetailPage'
 // muscleTaxonomy imports `react-native-body-highlighter` at runtime. Its value
 // exports (incl. the MuscleGroup / SimpleMuscleGroup enums) live behind the
@@ -144,20 +142,13 @@ export type {
   MovementCategory,
   VolumeLandmarks,
 } from './muscleTaxonomy'
-export {
-  ActiveWorkoutPage,
-  countCompletedSets,
-  deriveWorkoutProgress,
-  findActiveExercise,
-  statusToCardState,
-  toActiveCardProps,
-  groupExercises,
-  type ActiveWorkoutPageProps,
-  type ActiveWorkoutExercise,
-  type ActiveWorkoutSuperset,
-  type ActiveWorkoutInput,
-  type ActiveWorkoutRest,
-  type ActiveExerciseStatus,
-  type WorkoutProgress,
-  type WorkoutGroup,
+export type {
+  ActiveWorkoutPageProps,
+  ActiveWorkoutExercise,
+  ActiveWorkoutSuperset,
+  ActiveWorkoutInput,
+  ActiveWorkoutRest,
+  ActiveExerciseStatus,
+  WorkoutProgress,
+  WorkoutGroup,
 } from './ActiveWorkoutPage'

package/src/index.ts

@@ -3,8 +3,9 @@
 // Components
 export * from './components'
 
-// Theme
-export * from './theme'
+// Theme (nativewind-free surface; ThemeProvider value lives on the /theme
+// subpath so the root barrel does not pull the nativewind import chain)
+export * from './theme/barrel'
 
 // Utilities
 export * from './utils'

package/src/pages.ts

@@ -0,0 +1,61 @@
+// Subpath entry: @titan-design/react-ui/pages
+//
+// Page-level organisms — phone-shaped reference screens (ActiveWorkoutPage,
+// ExerciseDetailPage, ProgramPlanningPage). Demoted out of the root barrel for
+// titan 0.5.0: they are full app screens, orphaned by both consumers, and their
+// successors are the form-factor-responsive level views (plan B2). Their VALUE
+// exports (components + derivation helpers) live HERE; type-only re-exports
+// stay on the root barrel so consumers can still type props without importing
+// the screens. Mirrors the `/bodymap` isolation pattern.
+//
+// TrainingStatusPage is NOT here — it depends on react-native-body-highlighter
+// and lives under `@titan-design/react-ui/bodymap`.
+export {
+  ActiveWorkoutPage,
+  countCompletedSets,
+  deriveWorkoutProgress,
+  findActiveExercise,
+  statusToCardState,
+  toActiveCardProps,
+  groupExercises,
+  type ActiveWorkoutPageProps,
+  type ActiveWorkoutExercise,
+  type ActiveWorkoutSuperset,
+  type ActiveWorkoutInput,
+  type ActiveWorkoutRest,
+  type ActiveExerciseStatus,
+  type WorkoutProgress,
+  type WorkoutGroup,
+} from './components/custom/Workout/ActiveWorkoutPage'
+export {
+  ExerciseDetailPage,
+  deriveExerciseStats,
+  toExerciseCardProps,
+  summarizeVbt,
+  EXERCISE_DETAIL_TABS,
+  type ExerciseDetailPageProps,
+  type ExerciseDetailTab,
+  type ExerciseDetailHeader,
+  type ExerciseDetailEntry,
+  type ExerciseTrend,
+  type ExerciseVbtSet,
+  type ExerciseVbt,
+  type ExerciseDetailStats,
+  type VbtSummary,
+} from './components/custom/Workout/ExerciseDetailPage'
+export {
+  ProgramPlanningPage,
+  deriveNavLevel,
+  toProgressBarMesos,
+  findMeso,
+  findWeek,
+  findWorkout,
+  buildBreadcrumbs,
+  type ProgramPlanningPageProps,
+  type PlanMeso,
+  type PlanWeek,
+  type PlanWorkout,
+  type ProgramNavLevel,
+  type ProgramSelection,
+  type ProgramBreadcrumb,
+} from './components/custom/Workout/ProgramPlanningPage'