@titan-design/react-ui 0.6.0 → 0.8.0

package/dist/pages.js

@@ -10,21 +10,18 @@ var tailwindMerge = require('tailwind-merge');
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  // Blue scale (primary brand)
+  // Blue scale
   blue: {
     400: "#60A5FA",
     600: "#5048E5",
-    // Primary main
     700: "#3832A0"},
-  // Red scale (error)
+  // Red scale
   red: {
-    // Error light
     500: "#EF4444",
     600: "#D14343"},
-  // Vivid red scale (alert)
+  // Vivid red scale
   redVivid: {
     400: "#FF6070",
-    // Error vivid light
     500: "#FF4757",
     700: "#C42539"},
   // Neutral/Gray scale
@@ -38,6 +35,8 @@ var primitiveColors = {
     900: "#111827"},
   // Charcoal scale (dark backgrounds)
   charcoal: {
+    0: "#6E6E6E",
+    100: "#4C4C4C",
     200: "#3C3C3C",
     300: "#2C2C2C",
     400: "#1F1F1F",
@@ -67,11 +66,16 @@ var primitiveRamps = {
     50: "#FFF7DD",
     200: "#FFD352",
     300: "#F9B415",
+    // pin
+    400: "#E08C00",
     500: "#C27400"},
   green: {
     50: "#E3FFEE",
     200: "#58F69E",
     300: "#2ED573",
+    // pin
+    400: "#21C05D",
+    500: "#22A444",
     600: "#298732"},
   cyan: {
     // pin
@@ -79,7 +83,8 @@ var primitiveRamps = {
     500: "#2697B7",
     600: "#307B9B",
     700: "#2A617F",
-    800: "#22465F"},
+    800: "#22465F",
+    900: "#0B3149"},
   blue: {
     50: "#EFF8FF",
     300: "#78C2FF",
@@ -134,15 +139,22 @@ var WORKOUT_TOKENS = {
   // Canonical 4-band performance scale — the single source for BOTH the
   // VelocityStrip zone bars and the SetRow RPE color (TD-03.43). The direction
   // is intentionally inverted between the two consumers: for velocity, green =
-  // fastest/best; for RPE, green = easiest. This is the [0,1,2,4] subsample of
-  // the canonical `sequentialEffort` primitive. The `orange` key is the band
-  // label. Consumed inline (RN).
+  // fastest/best; for RPE, green = easiest. This is the [0,2,3,4] subsample of
+  // the canonical `sequentialEffort` primitive: an EVEN hue walk across the ramp
+  // (green → gold → orange → red). The earlier [0,1,2,4] spent two of its four
+  // bands on adjacent yellows (amber-200 + amber-300) and skipped orange, reading
+  // yellow-heavy with an abrupt jump to red; sampling amber-300 + orange-400
+  // instead gives four cleanly separable bands that hold at 3px strip scale.
+  // Consumed inline (RN).
   scale: {
     green: sequentialEffort[0],
-    yellow: sequentialEffort[1],
-    orange: sequentialEffort[2],
-    // gold band
+    // green-300
+    yellow: sequentialEffort[2],
+    // amber-300 (gold)
+    orange: sequentialEffort[3],
+    // orange-400 (true orange)
     red: sequentialEffort[4]
+    // red-600
   },
   // Surface and border colors were removed here: those flip with the theme, so
   // components use the CSS custom properties (var(--color-surface-*/border-*))
@@ -161,12 +173,6 @@ var WORKOUT_TOKENS = {
 function roundRpe(rpe) {
   return Math.round(rpe * 2) / 2;
 }
-function rpeColor(rpe) {
-  if (rpe >= 9.5) return WORKOUT_TOKENS.scale.red;
-  if (rpe >= 8.5) return WORKOUT_TOKENS.scale.orange;
-  if (rpe >= 7) return WORKOUT_TOKENS.scale.yellow;
-  return WORKOUT_TOKENS.scale.green;
-}
 function roundWeight(weight) {
   return Math.round(weight);
 }
@@ -194,14 +200,258 @@ function wrapJsx(fn) {
 var jsx = wrapJsx(jsxRuntime.jsx);
 var jsxs = wrapJsx(jsxRuntime.jsxs);
 
+// src/components/custom/Workout/SegmentedBar.tsx
+var PULSE_HALF_MS = 950;
+var PULSE_MIN_OPACITY = 0.45;
+var SEGMENTED_BAR_GAP = 5;
+function usePulse(active) {
+  const [value] = react.useState(() => new reactNative.Animated.Value(0));
+  react.useEffect(() => {
+    if (!active) return;
+    const loop = reactNative.Animated.loop(
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(value, {
+          toValue: 1,
+          duration: PULSE_HALF_MS,
+          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+          useNativeDriver: false
+        }),
+        reactNative.Animated.timing(value, {
+          toValue: 0,
+          duration: PULSE_HALF_MS,
+          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+          useNativeDriver: false
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, value]);
+  return value;
+}
+function SegmentedBar({
+  segments,
+  height = 8,
+  gap = SEGMENTED_BAR_GAP,
+  radius = 2,
+  marker = null,
+  segmentTestID,
+  style,
+  ...props
+}) {
+  const pulse = usePulse(segments.some((s) => s.pulse));
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: [{ flexDirection: "row", height, gap, position: "relative" }, style], ...props, children: [
+    segments.map((seg, i) => {
+      const fillStyle = {
+        width: `${(seg.fill ?? 1) * 100}%`,
+        height: "100%",
+        backgroundColor: seg.color,
+        opacity: seg.opacity
+      };
+      const testID = segmentTestID?.(seg, i) ?? "segmented-bar-segment";
+      return /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            flex: seg.weight ?? 1,
+            minWidth: 0,
+            height: "100%",
+            marginLeft: seg.leadingGap,
+            borderRadius: radius,
+            overflow: "hidden"
+          },
+          children: seg.pulse ? /* @__PURE__ */ jsx(
+            reactNative.Animated.View,
+            {
+              style: {
+                ...fillStyle,
+                ...seg.pulseColor ? {
+                  backgroundColor: pulse.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: seg.pulseColor
+                  })
+                } : {
+                  opacity: pulse.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [PULSE_MIN_OPACITY, 1]
+                  })
+                }
+              },
+              accessibilityElementsHidden: true,
+              testID
+            }
+          ) : /* @__PURE__ */ jsx(reactNative.View, { style: fillStyle, accessibilityElementsHidden: true, testID })
+        },
+        i
+      );
+    }),
+    marker ? /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          left: `${marker.position * 100}%`,
+          top: 0,
+          bottom: 0,
+          width: 2,
+          backgroundColor: marker.color
+        },
+        accessibilityElementsHidden: true,
+        testID: "segmented-bar-marker"
+      }
+    ) : null
+  ] });
+}
+
+// src/components/custom/Workout/SetBar.tsx
+var SET_STRIP_ZONES = {
+  slow: primitiveRamps.red[600],
+  moderate: primitiveRamps.orange[400],
+  fast: primitiveRamps.amber[300],
+  fastest: primitiveRamps.green[300]
+};
+var TODO_COLOR = primitiveColors.charcoal[300];
+var SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900];
+var NOTCH_GAP = 2;
+var CLUSTER_GAP = 3;
+var MYO_UPCOMING_CLUSTERS = 3;
+var MYO_UPCOMING_CLUSTER_LEN = 5;
+var MYO_UPCOMING_FADE = 0.6;
+var PULSE_RANGE = {
+  [SET_STRIP_ZONES.slow]: [primitiveRamps.red[500], primitiveRamps.red[700]],
+  [SET_STRIP_ZONES.moderate]: [primitiveRamps.orange[300], primitiveRamps.orange[500]],
+  [SET_STRIP_ZONES.fast]: [primitiveRamps.amber[200], primitiveRamps.amber[400]],
+  [SET_STRIP_ZONES.fastest]: [primitiveRamps.green[200], primitiveRamps.green[400]]
+};
+function velocityZoneColor(v) {
+  if (v < 0.5) return SET_STRIP_ZONES.slow;
+  if (v < 0.75) return SET_STRIP_ZONES.moderate;
+  if (v < 1) return SET_STRIP_ZONES.fast;
+  return SET_STRIP_ZONES.fastest;
+}
+function chunkedSegments(chunks, gap) {
+  return chunks.flatMap(
+    (vels, ci) => vels.map((v, ri) => ({
+      color: velocityZoneColor(v),
+      ...ci > 0 && ri === 0 ? { leadingGap: gap } : {}
+    }))
+  );
+}
+function rangeSegments(floor, max, doneVels) {
+  return Array.from({ length: max }, (_, i) => {
+    if (i < doneVels.length) return { color: velocityZoneColor(doneVels[i]) };
+    return { color: i < floor ? TODO_COLOR : SET_STRIP_VARIABLE_COLOR };
+  });
+}
+function myoUpcomingSegments(activationLen, clusterCount) {
+  const activation = Array.from({ length: activationLen }, () => ({ color: TODO_COLOR }));
+  const trail = Array.from(
+    { length: clusterCount },
+    (_, ci) => Array.from({ length: MYO_UPCOMING_CLUSTER_LEN }, (_2, ri) => ({
+      color: SET_STRIP_VARIABLE_COLOR,
+      opacity: MYO_UPCOMING_FADE ** ci,
+      ...ri === 0 ? { leadingGap: CLUSTER_GAP } : {}
+    }))
+  ).flat();
+  return [...activation, ...trail];
+}
+function setSegments(set) {
+  if (set.status === "todo") {
+    return [{ color: TODO_COLOR }];
+  }
+  if (set.status === "done") {
+    return set.velocities.map((v) => ({ color: velocityZoneColor(v) }));
+  }
+  if (set.status === "range") {
+    return rangeSegments(set.floor, set.max, set.doneVels);
+  }
+  if (set.status === "drop") {
+    return chunkedSegments(set.subloads, NOTCH_GAP);
+  }
+  if (set.status === "myo") {
+    return chunkedSegments([set.activation, ...set.clusters], CLUSTER_GAP);
+  }
+  if (set.status === "myo-upcoming") {
+    return myoUpcomingSegments(set.activationLen, set.clusterCount ?? MYO_UPCOMING_CLUSTERS);
+  }
+  const performed = set.velocities.map((v) => {
+    const color = velocityZoneColor(v);
+    return { color, pulse: true, pulseColor: PULSE_RANGE[color] };
+  });
+  const remaining = Math.max(0, set.planned - set.velocities.length);
+  return [...performed, ...Array.from({ length: remaining }, () => ({ color: TODO_COLOR }))];
+}
+function setBarSegmentTestID(seg) {
+  if (seg.pulse) return "set-strip-pulse";
+  if (seg.color === SET_STRIP_VARIABLE_COLOR) return "set-strip-variable";
+  return seg.color === TODO_COLOR ? "set-strip-empty" : "set-strip-fill";
+}
+function SetBar({ set, height = 8 }) {
+  return /* @__PURE__ */ jsx(
+    SegmentedBar,
+    {
+      segments: setSegments(set),
+      height,
+      gap: 0,
+      radius: 0,
+      segmentTestID: setBarSegmentTestID,
+      style: { flex: 1, minWidth: 0, borderRadius: 2, overflow: "hidden" },
+      testID: "set-strip-set"
+    }
+  );
+}
+
+// src/components/custom/Workout/SetStrip.tsx
+var SET_STRIP_GAP = 5;
+function setCategory(set) {
+  switch (set.status) {
+    case "done":
+    case "drop":
+    case "myo":
+      return "done";
+    case "active":
+      return "active";
+    case "range":
+      return set.doneVels.length > 0 ? "active" : "upcoming";
+    case "todo":
+    case "myo-upcoming":
+      return "upcoming";
+  }
+}
+function describeSets(sets) {
+  const done = sets.filter((s) => setCategory(s) === "done").length;
+  const active = sets.filter((s) => setCategory(s) === "active").length;
+  const upcoming = sets.filter((s) => setCategory(s) === "upcoming").length;
+  return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`;
+}
+function SetStrip({ sets, height = 8, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: { flexDirection: "row", width: "100%", height, gap: SET_STRIP_GAP },
+      accessibilityRole: "image",
+      accessibilityLabel: describeSets(sets),
+      testID: "set-strip",
+      ...props,
+      children: sets.map((set, i) => /* @__PURE__ */ jsx(SetBar, { set, height }, i))
+    }
+  );
+}
+
 // src/components/custom/Workout/VelocityStrip.tsx
 var VEL_COLORS = WORKOUT_TOKENS.scale;
-var zoneIdToScaleToken = {
-  speed: "green",
-  power: "yellow",
-  strengthSpeed: "orange",
-  maximalStrength: "red",
-  grinding: "red"
+var bandIdToEffortColor = {
+  speed: sequentialEffort[0],
+  // green-300
+  power: sequentialEffort[2],
+  // amber-300 (gold)
+  strengthSpeed: sequentialEffort[3],
+  // orange-400
+  maximalStrength: sequentialEffort[4],
+  // red-600
+  grinding: sequentialEffort[5]
+  // red-700 — the distinct 5th band
 };
 function getVelocityZoneColor(velocity) {
   if (velocity >= 1) return "vel-green";
@@ -240,14 +490,140 @@ function classifyBand(velocity, bands) {
   return bands[bands.length - 1];
 }
 function bandColor(band) {
-  const token = zoneIdToScaleToken[band.id];
-  return token ? VEL_COLORS[token] : VEL_COLORS.green;
+  return bandIdToEffortColor[band.id] ?? VEL_COLORS.green;
 }
 function getLossStyle(loss) {
   if (loss > 25) return { color: VEL_COLORS.red };
   if (loss > 20) return { color: VEL_COLORS.orange };
   return null;
 }
+var REP_GAP = 2;
+var WIDE_GAP = 8;
+var TODO_COLOR2 = primitiveColors.charcoal[300];
+var CONTINUE_OUTLINE = primitiveRamps.cyan[800];
+function deriveDoneVelocities(set) {
+  switch (set.type) {
+    case "drop":
+      return set.subloads.flat();
+    case "myo":
+      return [...set.activation, ...set.clusters.flat()];
+    default:
+      return set.velocities;
+  }
+}
+function chunkedRepSlots(chunks) {
+  const slots = [];
+  chunks.forEach((chunk) => {
+    chunk.forEach((velocity, ri) => {
+      const first = slots.length === 0;
+      slots.push({ kind: "rep", velocity, leadingGap: first ? 0 : ri === 0 ? WIDE_GAP : REP_GAP });
+    });
+  });
+  return slots;
+}
+function buildSlots(set) {
+  switch (set.type) {
+    case "straight": {
+      const total = Math.max(set.velocities.length, set.planned ?? set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const done = i < set.velocities.length;
+        return {
+          kind: done ? "rep" : "todo",
+          velocity: done ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : REP_GAP
+        };
+      });
+    }
+    case "range": {
+      const total = Math.max(set.max, set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const kind = i < set.velocities.length ? "rep" : i < set.floor ? "todo" : "variable";
+        return {
+          kind,
+          velocity: kind === "rep" ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : REP_GAP
+        };
+      });
+    }
+    case "amrap": {
+      const reps = set.velocities.map((velocity, i) => ({
+        kind: "rep",
+        velocity,
+        leadingGap: i === 0 ? 0 : REP_GAP
+      }));
+      reps.push({ kind: "continue", leadingGap: reps.length === 0 ? 0 : REP_GAP });
+      return reps;
+    }
+    case "drop":
+      return chunkedRepSlots(set.subloads);
+    case "myo": {
+      const slots = chunkedRepSlots([set.activation, ...set.clusters]);
+      if (set.open) slots.push({ kind: "continue", leadingGap: slots.length === 0 ? 0 : REP_GAP });
+      return slots;
+    }
+    case "cluster": {
+      const total = Math.max(set.velocities.length, set.planned ?? set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const done = i < set.velocities.length;
+        const boundary = i > 0 && i % set.groupSize === 0;
+        return {
+          kind: done ? "rep" : "todo",
+          velocity: done ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : boundary ? WIDE_GAP : REP_GAP
+        };
+      });
+    }
+  }
+}
+function setAccessibilityLabel(set, repCount) {
+  switch (set.type) {
+    case "straight":
+      return `Velocity strip, straight set, ${repCount} reps`;
+    case "range":
+      return `Velocity strip, rep-range set, floor ${set.floor} to ${set.max}, ${repCount} reps done`;
+    case "amrap":
+      return `Velocity strip, AMRAP set, ${repCount} reps and counting`;
+    case "drop":
+      return `Velocity strip, drop set, ${set.subloads.length} loads, ${repCount} reps`;
+    case "myo":
+      return `Velocity strip, myo-reps set, ${set.clusters.length} clusters${set.open ? ", open" : ""}, ${repCount} reps`;
+    case "cluster":
+      return `Velocity strip, cluster set, groups of ${set.groupSize}, ${repCount} reps`;
+  }
+}
+function slotAccessibilityLabel(slot, index) {
+  switch (slot.kind) {
+    case "rep":
+      return `Rep ${index + 1}: ${formatVelocity(slot.velocity ?? 0)} meters per second`;
+    case "todo":
+      return `Rep ${index + 1}: planned`;
+    case "variable":
+      return `Rep ${index + 1}: variable`;
+    case "continue":
+      return "Keep going";
+  }
+}
+var EXPANDED_TODO_STUB_PCT = 16;
+var EXPANDED_ENCODED_PCT = 45;
+var EXPANDED_HEIGHT = 60;
+var FIXED_MAX_VELOCITY = 1.15;
+var BARE_STUB_HEIGHT = 3;
+var HERO_HEIGHT = 220;
+var HERO_LABEL_HEADROOM = 20;
+var HERO_BAR_GAP = 8;
+var HERO_BAR_MAX_WIDTH = 52;
+var HERO_BAR_RADIUS = 5;
+var HERO_MIN_BAR_HEIGHT = 4;
+var HERO_PENDING_COLOR = primitiveColors.charcoal[100];
+var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
+function scaleDenominator(scale, maxVelocity) {
+  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * 1.15;
+}
+function bareSlotHeight(slot, height, denom) {
+  if (slot.kind !== "rep" || denom <= 0) return BARE_STUB_HEIGHT;
+  const ratio = Math.min(1, (slot.velocity ?? 0) / denom);
+  return Math.max(BARE_STUB_HEIGHT, ratio * height);
+}
 function getReducedMotionPreference() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -267,33 +643,11 @@ function usePrefersReducedMotion() {
 var ANIMATION_DURATION = 400;
 var ANIMATION_EASING = reactNative.Easing.bezier(0.22, 1, 0.36, 1);
 var POP_EASING = reactNative.Easing.bezier(0.34, 1.56, 0.64, 1);
-function VelocityStrip({
-  velocities,
-  zones,
-  liveRepIndex,
-  expanded = false,
-  onToggle,
-  onRepPress,
-  variant = "full",
-  showInfo = true,
-  className,
-  ...props
-}) {
-  const maxVelocity = Math.max(...velocities, 0);
-  const meanVelocity = calculateMeanVelocity(velocities);
-  const loss = calculateVelocityLoss(velocities);
-  const hasZones = zones != null && zones.length > 0;
-  const barColorFor = (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
-  const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
+function useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
   const prefersReducedMotion = usePrefersReducedMotion();
-  const [heightAnim] = react.useState(() => new reactNative.Animated.Value(expanded ? 60 : 3));
-  const [labelOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
-  const [infoOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
   const [liveScale] = react.useState(() => new reactNative.Animated.Value(1));
-  const liveVelocity = liveRepIndex != null ? velocities[liveRepIndex] : void 0;
-  const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
   react.useEffect(() => {
-    if (variant === "mini" || liveRepIndex == null || liveVelocity == null) return;
+    if (!active || liveRepIndex == null || liveVelocity == null) return;
     if (prefersReducedMotion) {
       liveScale.setValue(1);
       return;
@@ -323,12 +677,201 @@ function VelocityStrip({
         useNativeDriver: true
       }).start();
     }
-  }, [variant, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  return liveScale;
+}
+function HeroVelocityChart({
+  doneVelocities,
+  barColorFor,
+  scaleDenom,
+  referenceVelocity,
+  liveRepIndex,
+  isNewPeak,
+  targetReps,
+  height,
+  className,
+  viewProps
+}) {
+  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
+  const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak);
+  const plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM);
+  const barHeight = (velocity) => scaleDenom > 0 ? Math.max(HERO_MIN_BAR_HEIGHT, Math.min(1, velocity / scaleDenom) * plotHeight) : HERO_MIN_BAR_HEIGHT;
+  const pendingCount = Math.max(0, (targetReps ?? 0) - doneVelocities.length);
+  const referencePx = referenceVelocity > 0 && scaleDenom > 0 ? Math.min(plotHeight, referenceVelocity / scaleDenom * plotHeight) : 0;
+  const repCount = doneVelocities.length;
+  const total = Math.max(repCount, targetReps ?? repCount);
+  const label = referenceVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(referenceVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
+  const { style: externalStyle, ...restProps } = viewProps;
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: [{ height }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "velocity-strip-hero",
+      ...restProps,
+      children: /* @__PURE__ */ jsxs(
+        reactNative.View,
+        {
+          style: {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "flex-end",
+            gap: HERO_BAR_GAP,
+            position: "relative",
+            borderBottomWidth: 2,
+            borderBottomColor: HERO_PENDING_COLOR
+          },
+          children: [
+            referencePx > 0 && /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  bottom: referencePx,
+                  borderTopWidth: 1,
+                  borderStyle: "dashed",
+                  borderColor: HERO_REFERENCE_COLOR,
+                  pointerEvents: "none"
+                },
+                testID: "velocity-hero-reference"
+              }
+            ),
+            doneVelocities.map((velocity, i) => {
+              const isLive = liveRepIndex === i;
+              return /* @__PURE__ */ jsxs(
+                reactNative.View,
+                {
+                  accessibilityElementsHidden: true,
+                  style: {
+                    flex: 1,
+                    maxWidth: HERO_BAR_MAX_WIDTH,
+                    height: "100%",
+                    alignItems: "center",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      reactNative.Text,
+                      {
+                        className: "text-text-primary",
+                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
+                        testID: `velocity-label-${i}`,
+                        children: formatVelocity(velocity)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      reactNative.Animated.View,
+                      {
+                        style: [
+                          {
+                            width: "100%",
+                            height: barHeight(velocity),
+                            borderTopLeftRadius: HERO_BAR_RADIUS,
+                            borderTopRightRadius: HERO_BAR_RADIUS,
+                            backgroundColor: barColorFor(velocity)
+                          },
+                          isLive ? { transform: [{ scale: liveScale }] } : null
+                        ],
+                        testID: `velocity-bar-${i}`
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            }),
+            Array.from({ length: pendingCount }, (_, i) => /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  flex: 1,
+                  maxWidth: HERO_BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    style: {
+                      width: "100%",
+                      height: HERO_MIN_BAR_HEIGHT * 3,
+                      borderWidth: 1,
+                      borderStyle: "dashed",
+                      borderColor: HERO_PENDING_COLOR,
+                      borderTopLeftRadius: HERO_BAR_RADIUS,
+                      borderTopRightRadius: HERO_BAR_RADIUS
+                    },
+                    testID: "velocity-slot-todo"
+                  }
+                )
+              },
+              `pending-${i}`
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+function VelocityStrip({
+  velocities,
+  set,
+  zones,
+  liveRepIndex,
+  expanded = true,
+  onToggle,
+  onRepPress,
+  variant = "expanded",
+  height = EXPANDED_HEIGHT,
+  targetReps,
+  scale = "peak",
+  showNumbers = true,
+  showInfo = true,
+  className,
+  ...props
+}) {
+  const doneVelocities = set ? deriveDoneVelocities(set) : velocities ?? [];
+  const slots = set ? buildSlots(set) : doneVelocities.map((v, i) => ({
+    kind: "rep",
+    velocity: v,
+    leadingGap: i === 0 ? 0 : REP_GAP
+  }));
+  const maxVelocity = Math.max(...doneVelocities, 0);
+  const meanVelocity = calculateMeanVelocity(doneVelocities);
+  const loss = calculateVelocityLoss(doneVelocities);
+  const framed = showNumbers || showInfo;
+  const scaleDenom = scaleDenominator(scale, maxVelocity);
+  const hasZones = zones != null && zones.length > 0;
+  const barColorFor = (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
+  const slotColor = (slot) => {
+    if (slot.kind === "rep") return barColorFor(slot.velocity ?? 0);
+    if (slot.kind === "todo") return TODO_COLOR2;
+    return SET_STRIP_VARIABLE_COLOR;
+  };
+  const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
+  const [heightAnim] = react.useState(() => new reactNative.Animated.Value(expanded ? height : 3));
+  const [labelOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const [infoOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
+  const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
+  const liveScale = useLiveRepPop(
+    variant === "expanded" && framed,
+    liveRepIndex,
+    liveVelocity,
+    isNewPeak
+  );
   react.useEffect(() => {
-    if (variant === "mini") return;
+    if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
       reactNative.Animated.timing(heightAnim, {
-        toValue: expanded ? 60 : 3,
+        toValue: expanded ? height : 3,
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
         useNativeDriver: false
@@ -346,39 +889,136 @@ function VelocityStrip({
         useNativeDriver: false
       })
     ]).start();
-  }, [expanded, variant, heightAnim, labelOpacity, infoOpacity]);
+  }, [expanded, variant, framed, height, heightAnim, labelOpacity, infoOpacity]);
+  if (set == null && velocities == null) return null;
+  const repCount = doneVelocities.length;
+  const miniLabel = set ? setAccessibilityLabel(set, repCount) : `Velocity strip, ${repCount} reps`;
+  if (variant === "hero") {
+    const heroHeight = height === EXPANDED_HEIGHT ? HERO_HEIGHT : height;
+    return /* @__PURE__ */ jsx(
+      HeroVelocityChart,
+      {
+        doneVelocities,
+        barColorFor,
+        scaleDenom,
+        referenceVelocity: maxVelocity,
+        liveRepIndex,
+        isNewPeak,
+        targetReps,
+        height: heroHeight,
+        className,
+        viewProps: props
+      }
+    );
+  }
   if (variant === "mini") {
     const { style: externalStyle, ...restProps } = props;
     return /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className,
-        style: [{ flexDirection: "row", height: 3, gap: 2, borderRadius: 2, overflow: "hidden" }, externalStyle],
+        style: [
+          { flexDirection: "row", height: 3, gap: REP_GAP, borderRadius: 2, overflow: "hidden" },
+          externalStyle
+        ],
         accessibilityRole: "image",
-        accessibilityLabel: `Velocity strip, ${velocities.length} reps`,
+        accessibilityLabel: miniLabel,
         testID: "velocity-strip-mini",
         ...restProps,
-        children: velocities.map((v, i) => /* @__PURE__ */ jsx(
+        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             style: {
               flex: 1,
-              backgroundColor: barColorFor(v),
+              backgroundColor: slotColor(slot),
               borderRadius: 1,
               minWidth: 4,
-              height: "100%"
+              height: "100%",
+              // The container's uniform 2px gap covers rep spacing; a wide slot adds
+              // only the EXTRA (WIDE_GAP − REP_GAP) so the notch totals WIDE_GAP.
+              marginLeft: Math.max(0, slot.leadingGap - REP_GAP),
+              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
             },
             accessibilityElementsHidden: true,
-            testID: `velocity-bar-${i}`
+            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
           },
           i
         ))
       }
     );
   }
-  const stripLabel = `Velocity chart for set, ${velocities.length} reps, tap to ${expanded ? "collapse" : "expand"}`;
+  if (!framed) {
+    const { style: externalStyle, ...restProps } = props;
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        className,
+        style: [
+          { flexDirection: "row", height, gap: REP_GAP, alignItems: "flex-end" },
+          externalStyle
+        ],
+        accessibilityRole: "image",
+        accessibilityLabel: miniLabel,
+        testID: "velocity-strip-compact",
+        ...restProps,
+        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              flex: 1,
+              minWidth: 4,
+              height: bareSlotHeight(slot, height, scaleDenom),
+              // Top-rounded to match the framed chart's bars (the "rounded tops from
+              // the numbers one"); square bottoms since bars sit on the baseline.
+              borderTopLeftRadius: 2,
+              borderTopRightRadius: 2,
+              backgroundColor: slotColor(slot),
+              marginLeft: Math.max(0, slot.leadingGap - REP_GAP),
+              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
+            },
+            accessibilityElementsHidden: true,
+            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
+          },
+          i
+        ))
+      }
+    );
+  }
+  const stripLabel = set ? `${setAccessibilityLabel(set, repCount)}, tap to ${expanded ? "collapse" : "expand"}` : `Velocity chart for set, ${repCount} reps, tap to ${expanded ? "collapse" : "expand"}`;
   const hasInteractiveContainer = onToggle != null;
   const hasInteractiveReps = onRepPress != null && expanded;
+  const setBars = set != null && slots.map((slot, i) => {
+    const isStraightRep = set.type === "straight" && slot.kind === "rep";
+    const heightPct = isStraightRep ? scaleDenom > 0 ? Math.round((slot.velocity ?? 0) / scaleDenom * 100) : 0 : set.type === "straight" ? EXPANDED_TODO_STUB_PCT : EXPANDED_ENCODED_PCT;
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          flex: 1,
+          height: "100%",
+          justifyContent: "flex-end",
+          marginLeft: slot.leadingGap
+        },
+        children: /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              height: `${heightPct}%`,
+              minHeight: 2,
+              borderTopLeftRadius: 2,
+              borderTopRightRadius: 2,
+              backgroundColor: slotColor(slot),
+              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
+            },
+            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`,
+            accessibilityRole: "image",
+            accessibilityLabel: slotAccessibilityLabel(slot, i)
+          }
+        )
+      },
+      i
+    );
+  });
   const stripContent = /* @__PURE__ */ jsxs(
     reactNative.Animated.View,
     {
@@ -391,7 +1031,9 @@ function VelocityStrip({
           borderRadius: expanded ? 6 : 2,
           paddingTop: expanded ? 16 : 0,
           paddingBottom: expanded ? 24 : 0,
-          paddingHorizontal: expanded ? 6 : 0,
+          // No horizontal inset — the framed chart's bars span full width, matching
+          // the bare spotlight and mini. Numbers/info sit in the vertical padding.
+          paddingHorizontal: 0,
           paddingVertical: expanded ? void 0 : 8,
           overflow: expanded ? "visible" : "hidden"
         }
@@ -401,46 +1043,65 @@ function VelocityStrip({
       testID: "velocity-strip",
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { flexDirection: "row", flex: 1, gap: 2, alignItems: "flex-end" },
-            children: velocities.map((v, i) => {
-              const barBackground = barColorFor(v);
-              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 = expanded ? { height: `${barHeightPct}%`, minHeight: 2, borderTopLeftRadius: 2, borderTopRightRadius: 2, backgroundColor: barBackground } : {
-                minHeight: "100%",
-                borderTopLeftRadius: 2,
-                borderTopRightRadius: 2,
-                borderBottomLeftRadius: 0,
-                borderBottomRightRadius: 0,
-                backgroundColor: barBackground
-              };
-              const barInner = isLive ? /* @__PURE__ */ jsx(
-                reactNative.Animated.View,
-                {
-                  style: [barStyle, { transform: [{ scale: liveScale }] }],
-                  testID: `velocity-bar-${i}`,
-                  accessibilityRole: "image",
-                  accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second${liveLabelSuffix}`
-                }
-              ) : /* @__PURE__ */ jsx(
-                reactNative.View,
-                {
-                  style: barStyle,
-                  testID: `velocity-bar-${i}`,
-                  accessibilityRole: "image",
-                  accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
-                }
-              );
-              const bar = /* @__PURE__ */ jsxs(
-                reactNative.View,
-                {
-                  style: { flex: 1, height: "100%", justifyContent: "flex-end", position: "relative" },
-                  children: [
-                    expanded && /* @__PURE__ */ jsx(reactNative.Animated.View, { style: { opacity: labelOpacity, alignItems: "center", position: "absolute", top: -13, left: 0, right: 0 }, accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", flex: 1, gap: set ? 0 : 2, alignItems: "flex-end" }, children: set ? setBars : doneVelocities.map((v, i) => {
+          const barBackground = barColorFor(v);
+          const barHeightPct = scaleDenom > 0 ? Math.round(v / scaleDenom * 100) : 0;
+          const isLive = liveRepIndex === i;
+          const liveLabelSuffix = isLive ? isNewPeak ? ", latest rep, new set peak" : ", latest rep" : "";
+          const barStyle = expanded ? {
+            height: `${barHeightPct}%`,
+            minHeight: 2,
+            borderTopLeftRadius: 2,
+            borderTopRightRadius: 2,
+            backgroundColor: barBackground
+          } : {
+            minHeight: "100%",
+            borderTopLeftRadius: 2,
+            borderTopRightRadius: 2,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            backgroundColor: barBackground
+          };
+          const barInner = isLive ? /* @__PURE__ */ jsx(
+            reactNative.Animated.View,
+            {
+              style: [barStyle, { transform: [{ scale: liveScale }] }],
+              testID: `velocity-bar-${i}`,
+              accessibilityRole: "image",
+              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second${liveLabelSuffix}`
+            }
+          ) : /* @__PURE__ */ jsx(
+            reactNative.View,
+            {
+              style: barStyle,
+              testID: `velocity-bar-${i}`,
+              accessibilityRole: "image",
+              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
+            }
+          );
+          const bar = /* @__PURE__ */ jsxs(
+            reactNative.View,
+            {
+              style: {
+                flex: 1,
+                height: "100%",
+                justifyContent: "flex-end",
+                position: "relative"
+              },
+              children: [
+                expanded && showNumbers && /* @__PURE__ */ jsx(
+                  reactNative.Animated.View,
+                  {
+                    style: {
+                      opacity: labelOpacity,
+                      alignItems: "center",
+                      position: "absolute",
+                      top: -13,
+                      left: 0,
+                      right: 0
+                    },
+                    accessibilityElementsHidden: true,
+                    children: /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
                         className: "text-text-secondary",
@@ -448,30 +1109,30 @@ function VelocityStrip({
                         testID: `velocity-label-${i}`,
                         children: formatVelocity(v)
                       }
-                    ) }),
-                    barInner
-                  ]
-                },
-                i
-              );
-              if (onRepPress && expanded) {
-                return /* @__PURE__ */ jsx(
-                  reactNative.Pressable,
-                  {
-                    style: { flex: 1, height: "100%" },
-                    onPress: () => onRepPress(i, v),
-                    accessibilityRole: "button",
-                    accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`,
-                    testID: `velocity-bar-pressable-${i}`,
-                    children: bar
-                  },
-                  i
-                );
-              }
-              return bar;
-            })
+                    )
+                  }
+                ),
+                barInner
+              ]
+            },
+            i
+          );
+          if (onRepPress && expanded) {
+            return /* @__PURE__ */ jsx(
+              reactNative.Pressable,
+              {
+                style: { flex: 1, height: "100%" },
+                onPress: () => onRepPress(i, v),
+                accessibilityRole: "button",
+                accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`,
+                testID: `velocity-bar-pressable-${i}`,
+                children: bar
+              },
+              i
+            );
           }
-        ),
+          return bar;
+        }) }),
         expanded && showInfo && /* @__PURE__ */ jsxs(
           reactNative.Animated.View,
           {
@@ -647,17 +1308,49 @@ function SvgIcon({
 }
 
 // src/components/icons/icons.tsx
-function DumbbellIcon(props) {
+function StarIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("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" }) });
+}
+function ScaleIcon(props) {
   return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M14.4 14.4 9.6 9.6" }),
-    /* @__PURE__ */ jsx("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" }),
-    /* @__PURE__ */ jsx("path", { d: "m21.5 21.5-1.4-1.4" }),
-    /* @__PURE__ */ jsx("path", { d: "M3.9 3.9 2.5 2.5" }),
-    /* @__PURE__ */ jsx("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" })
+    /* @__PURE__ */ jsx("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 21h10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
   ] });
 }
-function StarIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("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" }) });
+function AlertTriangleIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+  ] });
+}
+function TrendingDownIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 17h6v-6" }),
+    /* @__PURE__ */ jsx("path", { d: "m22 17-8.5-8.5-5 5L2 7" })
+  ] });
+}
+function CircleSlashIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 15 6-6" })
+  ] });
+}
+function AwardIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "6" })
+  ] });
+}
+function InfoIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+  ] });
 }
 var baseBadgeSizeConfig = {
   sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
@@ -760,6 +1453,9 @@ var semanticColorsLight = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": primitiveRamps.green[50],
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
   "status-error": primitiveRamps.red[600],
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
@@ -893,6 +1589,9 @@ var semanticColorsDark = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
   "status-error": primitiveRamps.red[600],
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
@@ -997,93 +1696,7 @@ function getSemanticColors(mode) {
   return mode === "dark" ? semanticColorsDark : semanticColorsLight;
 }
 
-// src/components/custom/Workout/WeightBadge.tsx
-function WeightBadge({
-  value,
-  unit = "lbs",
-  reps,
-  delta,
-  isPr,
-  showIcon = true,
-  size = "md",
-  onPress,
-  className,
-  ...props
-}) {
-  const config = baseBadgeSizeConfig[size];
-  const textColor = isPr ? getSemanticColors("dark")["brand-primary"] : "#9CA3AF";
-  const iconColor = textColor;
-  const repMaxClause = reps != null ? `${reps} rep max` : "Estimated one rep max";
-  const deltaLabel = delta != null ? `, ${delta >= 0 ? "+" : ""}${delta}% change` : "";
-  const fullLabel = `${repMaxClause}: ${value} ${unit}${deltaLabel}`;
-  return /* @__PURE__ */ jsxs(
-    BaseBadge,
-    {
-      variant: isPr ? "pr" : "plain",
-      size,
-      onPress,
-      className,
-      icon: showIcon ? /* @__PURE__ */ jsx(DumbbellIcon, { size: config.iconSize, color: iconColor, strokeWidth: 2 }) : void 0,
-      accessibilityLabel: fullLabel,
-      testID: "weight-badge",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(
-          reactNative.Text,
-          {
-            style: {
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "600",
-              fontSize: config.fontSize,
-              color: textColor
-            },
-            children: [
-              isPr ? "\u2733 " : "",
-              value,
-              " ",
-              unit
-            ]
-          }
-        ),
-        reps != null && /* @__PURE__ */ jsxs(
-          reactNative.Text,
-          {
-            style: {
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "600",
-              fontSize: config.fontSize,
-              marginLeft: 2,
-              color: textColor,
-              opacity: 0.7
-            },
-            testID: "weight-badge-repmax",
-            children: [
-              reps,
-              "RM"
-            ]
-          }
-        ),
-        delta != null && /* @__PURE__ */ jsxs(
-          reactNative.Text,
-          {
-            style: {
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontSize: config.fontSize,
-              marginLeft: 4,
-              color: delta >= 0 ? getSemanticColors("dark")["result-improve"] : getSemanticColors("dark")["result-degrade"]
-            },
-            testID: "weight-badge-delta",
-            children: [
-              delta >= 0 ? "+" : "",
-              delta,
-              "%"
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
+// src/components/custom/Workout/PrBadge.tsx
 var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
 var typeLabels = {
   e1rm: "PR e1RM",
@@ -1167,6 +1780,204 @@ function PrBadge({
   }
   return badge;
 }
+var DARK = getSemanticColors("dark");
+var TEXT_ACTIVE = DARK["text-primary"];
+var TEXT_MUTED = DARK["text-secondary"];
+var COL = { set: 36, reps: 44, load: 56, rpe: 36 };
+var cellText = { fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: "600" };
+var typeBadge = {
+  fontSize: 10,
+  fontWeight: "700",
+  fontFamily: "Inter, sans-serif",
+  color: WORKOUT_TOKENS.scale.orange,
+  backgroundColor: "rgba(255,165,2,0.12)",
+  paddingVertical: 1,
+  paddingHorizontal: 5,
+  borderRadius: 3,
+  overflow: "hidden"
+};
+function displayReps(set) {
+  return set.state === "done" ? set.reps : set.target.reps;
+}
+function displayWeight(set) {
+  return set.state === "done" ? set.weight : set.target.weight;
+}
+function plannedReps(set) {
+  if (set.state === "done") return set.velocities.length;
+  if (set.state === "live") return set.target.reps;
+  return set.planned ?? set.target.reps;
+}
+function accessibilityLabel(set) {
+  const base = `Set ${set.setNumber}: ${displayReps(set)} reps at ${roundWeight(displayWeight(set))} ${set.unit}`;
+  if (set.state === "live") return `${base}, in progress`;
+  if (set.state === "todo") return `${base}, upcoming`;
+  return base;
+}
+function Cell({
+  width,
+  children,
+  testID
+}) {
+  return /* @__PURE__ */ jsx(reactNative.View, { style: { width, alignItems: "center", justifyContent: "center" }, testID, children });
+}
+function RowStrip({ set }) {
+  const zones = set.velocityZones;
+  if (set.state === "live") {
+    return /* @__PURE__ */ jsx(
+      VelocityStrip,
+      {
+        variant: "expanded",
+        showNumbers: false,
+        showInfo: false,
+        height: 24,
+        scale: "fixed",
+        set: { type: "straight", velocities: set.velocities, planned: set.target.reps },
+        zones
+      }
+    );
+  }
+  const velocities = set.state === "done" ? set.velocities : [];
+  return /* @__PURE__ */ jsx(
+    VelocityStrip,
+    {
+      variant: "mini",
+      set: { type: "straight", velocities, planned: plannedReps(set) },
+      zones
+    }
+  );
+}
+function SetRow(set) {
+  const live = set.state === "live";
+  const valueColor = live ? TEXT_ACTIVE : TEXT_MUTED;
+  const rpe = set.state === "todo" ? null : set.rpe;
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { paddingVertical: 6, paddingHorizontal: 8 },
+      accessibilityLabel: accessibilityLabel(set),
+      testID: "set-row",
+      children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsx(Cell, { width: COL.set, testID: "set-row-set-number", children: set.setType ? /* @__PURE__ */ jsx(reactNative.Text, { style: typeBadge, testID: "set-row-type-badge", children: set.setType }) : /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor, fontWeight: live ? "700" : "600" }, children: set.setNumber }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.reps, testID: "set-row-reps", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: displayReps(set) }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.load, testID: "set-row-weight", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: roundWeight(displayWeight(set)) }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.rpe, testID: "set-row-rpe", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: TEXT_MUTED }, children: rpe != null ? roundRpe(rpe) : "\u2014" }) })
+        ] }),
+        /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: live ? 6 : 4 }, testID: "set-row-strip", children: /* @__PURE__ */ jsx(RowStrip, { set }) })
+      ]
+    }
+  );
+}
+var PREV_COLUMN = { label: "PREV", width: void 0 };
+function buildColumns(unit, showPrevious) {
+  return [
+    { label: "SET", width: 36 },
+    ...showPrevious ? [PREV_COLUMN] : [],
+    { label: "REPS", width: 44 },
+    { label: unit.toUpperCase(), width: 56 },
+    { label: "RPE", width: 36 }
+  ];
+}
+function SetTableHeader({
+  unit = "lbs",
+  showPrevious = true,
+  testID = "table-header"
+}) {
+  const columns = buildColumns(unit, showPrevious);
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className: "flex-row",
+      style: {
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        paddingBottom: 4,
+        ...showPrevious ? {} : { justifyContent: "space-between" }
+      },
+      testID,
+      children: columns.map(({ label, width }) => {
+        const isFlex = width === void 0;
+        return /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              ...isFlex ? { minWidth: 44 } : { width, flexShrink: 1 },
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8
+            },
+            ...isFlex ? { className: "flex-1" } : {},
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: "text-text-tertiary",
+                style: {
+                  fontSize: 10,
+                  fontWeight: "600",
+                  fontFamily: "Inter, sans-serif",
+                  textTransform: "uppercase",
+                  letterSpacing: 0.8
+                },
+                children: label
+              }
+            )
+          },
+          label
+        );
+      })
+    }
+  );
+}
+var METRIC_FONT = "Inter, sans-serif";
+function MetricCell({ children, color, fontSize = 11 }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.Text,
+    {
+      style: {
+        fontFamily: METRIC_FONT,
+        fontSize,
+        color,
+        fontWeight: "600",
+        letterSpacing: 1
+      },
+      children
+    }
+  );
+}
+
+// src/components/custom/Workout/SetsRepsLoad.tsx
+var t = getSemanticColors("dark");
+var TIMES = "\xD7";
+var AT = "@";
+function SetsRepsLoad({
+  sets,
+  reps,
+  load,
+  unit = "lb",
+  className,
+  ...props
+}) {
+  const value = t["text-primary"];
+  const sep = t["text-tertiary"];
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: { flexDirection: "row", alignItems: "baseline" },
+      accessibilityLabel: `${sets} sets of ${reps} reps at ${load} ${unit}`,
+      testID: "sets-reps-load",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MetricCell, { color: value, children: sets }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${TIMES} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, children: reps }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${AT} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, children: load }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${unit}` })
+      ]
+    }
+  );
+}
 function hexToRgb(hex) {
   const cleaned = hex.replace("#", "");
   let r, g, b;
@@ -1476,7 +2287,7 @@ function alpha(color, opacity) {
   }
   return color;
 }
-var t = getSemanticColors("dark");
+var t2 = getSemanticColors("dark");
 var TEMPO_PACING = {
   behindThresholdPct: 0.15,
   minPhaseDurationMs: 500
@@ -1492,20 +2303,20 @@ function getTempoFillPct(elapsedMs, targetMs) {
   return Math.min(100, elapsedMs / targetMs * 100);
 }
 ({
-  concentric: { color: t["status-success"]},
-  hold: { color: t["brand-primary"]},
-  eccentric: { color: t["status-warning"]}
+  concentric: { color: t2["status-success"]},
+  hold: { color: t2["brand-primary"]},
+  eccentric: { color: t2["status-warning"]}
 });
 
 // src/components/custom/Workout/TempoDisplay.tsx
-var t2 = getSemanticColors("dark");
+var t3 = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = t2["status-error"];
+var STATUS_ERROR = t3["status-error"];
 var phaseColors = {
-  eccentric: t2["status-warning"],
+  eccentric: t3["status-warning"],
   pauseBottom: TEXT_TERTIARY,
-  concentric: t2["status-success"],
+  concentric: t3["status-success"],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY
 };
@@ -1514,34 +2325,10 @@ function TempoValue({
   color,
   fontSize
 }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.Text,
-    {
-      style: {
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children: value
-    }
-  );
+  return /* @__PURE__ */ jsx(MetricCell, { color, fontSize, children: value });
 }
 function TempoSeparator({ color, fontSize }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.Text,
-    {
-      style: {
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children: "-"
-    }
-  );
+  return /* @__PURE__ */ jsx(MetricCell, { color, fontSize, children: "-" });
 }
 var LIVE_PHASES = [
   { key: "eccentric", color: phaseColors.eccentric },
@@ -1603,6 +2390,7 @@ function TempoDisplay({
   tempo,
   size = "md",
   colored = true,
+  showLabel = true,
   showInfo = true,
   live,
   onPress,
@@ -1636,7 +2424,7 @@ function TempoDisplay({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
+        showLabel && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             style: {
@@ -1770,245 +2558,121 @@ function TempoDisplay({
     }
   );
 }
-function formatAccessibilityLabel(setNumber, reps, weight, unit) {
-  const repsText = reps != null ? `${reps} reps` : "no reps";
-  const weightText = weight != null ? `at ${roundWeight(weight)} ${unit}` : "";
-  return `Set ${setNumber}: ${repsText}${weightText ? ` ${weightText}` : ""}`;
+var t4 = getSemanticColors("dark");
+var INDICATOR_CONFIG = {
+  imbalance: { Icon: ScaleIcon, color: t4["status-error"], label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, color: t4["status-error"], label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, color: t4["status-warning"], label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, color: t4["status-warning"], label: "Missed reps" },
+  pr: { Icon: AwardIcon, color: t4["status-success"], label: "Personal record" },
+  info: { Icon: InfoIcon, color: t4["status-info"], label: "More info" }
+};
+function ExerciseIndicator({ kind, onPress, className, ...props }) {
+  const { Icon, color, label } = INDICATOR_CONFIG[kind];
+  const chip = /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: color,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "exercise-indicator",
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { size: 11, color })
+    }
+  );
+  if (onPress) {
+    return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress, accessibilityRole: "button", accessibilityLabel: label, children: chip });
+  }
+  return chip;
 }
-function SetRow({
-  mode,
-  setNumber,
-  previous,
+
+// src/components/custom/Workout/ExerciseHeading.tsx
+function headingLabel(name, sets, reps, load, unit) {
+  return `${name}, ${sets}\xD7${reps} @ ${roundWeight(load)} ${unit}`;
+}
+function ExerciseHeading({
+  name,
+  sets,
   reps,
-  weight,
-  rpe,
-  unit,
-  velocities,
-  velocityZones,
-  velocityLiveRepIndex,
-  velocityExpanded,
-  onVelocityToggle,
-  setType,
-  prBadges,
-  isNextSet,
-  targets
+  load,
+  unit = "lbs",
+  tempo,
+  indicator,
+  dimmed,
+  onPress
+}) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { opacity: dimmed ? 0.55 : 1 }, testID: "exercise-heading", children: [
+    /* @__PURE__ */ jsxs(
+      reactNative.Pressable,
+      {
+        onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: headingLabel(name, sets, reps, load, unit),
+        className: "flex-row items-center",
+        style: { gap: 8 },
+        testID: "exercise-card-header",
+        children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-primary",
+              style: { fontSize: 14, fontFamily: '"Space Grotesk", sans-serif', fontWeight: "700" },
+              testID: "exercise-card-name",
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+          indicator && /* @__PURE__ */ jsx(ExerciseIndicator, { kind: indicator })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      reactNative.View,
+      {
+        className: "flex-row items-center",
+        style: { gap: 8, marginTop: 1 },
+        testID: "exercise-card-summary",
+        children: [
+          /* @__PURE__ */ jsx(SetsRepsLoad, { sets, reps, load, unit }),
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+          tempo && /* @__PURE__ */ jsx(TempoDisplay, { tempo, size: "sm", showLabel: false, showInfo: false })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/custom/Workout/ExerciseCardHeading.tsx
+function ExerciseCardHeading({
+  setStates,
+  stripHeight = 8,
+  dimmed,
+  testID = "exercise-card",
+  ...heading
 }) {
-  const isActive = mode === "active";
-  const isCompleted = mode === "completed";
-  const rowStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 7,
-    paddingHorizontal: 8,
-    gap: 8,
-    borderRadius: 8
-  };
-  if (isActive && isNextSet) {
-    rowStyle.backgroundColor = "rgba(255,121,0,0.06)";
-    rowStyle.borderWidth = 1;
-    rowStyle.borderColor = "rgba(255,121,0,0.15)";
-  }
-  if (isCompleted && !isNextSet) {
-    rowStyle.opacity = 0.55;
-  }
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
-      style: rowStyle,
-      accessibilityLabel: formatAccessibilityLabel(
-        setNumber,
-        reps,
-        weight,
-        unit
-      ),
-      testID: "set-row",
+      style: { paddingVertical: 9, paddingHorizontal: 12, opacity: dimmed ? 0.55 : 1 },
+      testID,
       children: [
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 36, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-set-number",
-            children: setType ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                style: {
-                  fontSize: 10,
-                  fontWeight: "700",
-                  fontFamily: "Inter, sans-serif",
-                  color: WORKOUT_TOKENS.scale.orange,
-                  backgroundColor: "rgba(255,165,2,0.12)",
-                  paddingVertical: 1,
-                  paddingHorizontal: 5,
-                  borderRadius: 3,
-                  overflow: "hidden"
-                },
-                testID: "set-row-type-badge",
-                children: setType
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-secondary",
-                style: {
-                  fontSize: 13,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: setNumber
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            className: "flex-1",
-            testID: "set-row-previous",
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-secondary",
-                style: {
-                  fontSize: 12,
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: previous ? `${previous.reps} x ${roundWeight(previous.weight)}` : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 44, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-reps",
-            children: isActive && reps == null && targets ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif"
-                },
-                testID: "set-row-target-reps",
-                children: targets.reps
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: reps != null ? "text-text-primary" : "text-text-tertiary",
-                style: {
-                  fontSize: 14,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: reps != null ? reps : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 56, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-weight",
-            children: isActive && weight == null && targets ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif"
-                },
-                testID: "set-row-target-weight",
-                children: roundWeight(targets.weight)
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: weight != null ? "text-text-primary" : "text-text-tertiary",
-                style: {
-                  fontSize: 14,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: weight != null ? roundWeight(weight) : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 36, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-rpe",
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: rpe != null ? void 0 : "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  // rpeColor returns a concrete hex (native-safe); only the tertiary
-                  // fallback needs the className token.
-                  color: rpe != null ? rpeColor(rpe) : void 0
-                },
-                children: rpe != null ? roundRpe(rpe) : "\u2014"
-              }
-            )
-          }
-        ),
-        prBadges && prBadges.length > 0 && /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            className: "flex-row items-center",
-            style: { gap: 4 },
-            testID: "set-row-pr-badges",
-            children: prBadges.map((badge, i) => /* @__PURE__ */ jsx(
-              PrBadge,
-              {
-                type: badge.type,
-                label: badge.label,
-                animate: false,
-                compact: true
-              },
-              i
-            ))
-          }
-        ),
-        velocities && velocities.length > 0 && /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { position: "absolute", bottom: 0, left: 8, right: 8 },
-            testID: "set-row-velocity-strip",
-            children: /* @__PURE__ */ jsx(
-              VelocityStrip,
-              {
-                velocities,
-                zones: velocityZones,
-                liveRepIndex: velocityLiveRepIndex,
-                expanded: velocityExpanded,
-                onToggle: onVelocityToggle,
-                variant: onVelocityToggle ? "full" : "mini"
-              }
-            )
-          }
-        )
+        /* @__PURE__ */ jsx(ExerciseHeading, { ...heading }),
+        setStates.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: 7 }, testID: "exercise-card-strip", children: /* @__PURE__ */ jsx(SetStrip, { sets: setStates, height: stripHeight }) })
       ]
     }
   );
 }
-function resolveColor(token, mode = "dark") {
-  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
-}
 
 // src/components/custom/Workout/ExerciseCard.tsx
-function buildColumnHeaders(unit) {
-  return ["SET", "PREV", "REPS", unit.toUpperCase(), "RPE"];
-}
 function getSupersetBorderRadius(position) {
   switch (position) {
     case "first":
@@ -2051,7 +2715,7 @@ function formatSummary(summary) {
   if (!summary) return "";
   return `${summary.sets}\xD7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`;
 }
-function formatAccessibilityLabel2(name, summary, prescription) {
+function formatAccessibilityLabel(name, summary, prescription) {
   if (summary) return `${name}, ${formatSummary(summary)}`;
   if (prescription) return `${name}, ${prescription}`;
   return name;
@@ -2060,7 +2724,6 @@ function CollapsedCard({
   name,
   onToggle,
   summary,
-  e1rm,
   isPR,
   setVelocities,
   velocityZones,
@@ -2079,7 +2742,7 @@ function CollapsedCard({
       onPressIn: () => setPressed(true),
       onPressOut: () => setPressed(false),
       accessibilityRole: "button",
-      accessibilityLabel: formatAccessibilityLabel2(name, summary, void 0),
+      accessibilityLabel: formatAccessibilityLabel(name, summary, void 0),
       testID: "exercise-card",
       children: /* @__PURE__ */ jsxs(
         reactNative.View,
@@ -2093,100 +2756,93 @@ function CollapsedCard({
             ...supersetMargin
           },
           children: [
-            /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row items-center",
-                testID: "exercise-card-header",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        fontSize: 14,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "exercise-card-name",
-                      children: name
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
-                  summary && /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-secondary",
-                      style: {
-                        fontSize: 12,
-                        fontFamily: "Inter, sans-serif",
-                        marginRight: 8
-                      },
-                      testID: "exercise-card-summary",
-                      children: formatSummary(summary)
-                    }
-                  ),
-                  e1rm && /* @__PURE__ */ jsx(
-                    WeightBadge,
-                    {
-                      value: roundWeight(e1rm.value),
-                      unit: e1rm.unit,
-                      size: "sm",
-                      showIcon: false,
-                      testID: "exercise-card-e1rm"
-                    }
-                  ),
-                  isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
-                ]
-              }
-            ),
-            (completedSets > 0 || remaining > 0) && /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row",
-                style: { marginTop: 6, gap: 4 },
-                testID: "exercise-card-strips",
-                children: [
-                  setVelocities?.map((velocities, i) => /* @__PURE__ */ jsx(
-                    VelocityStrip,
-                    {
-                      velocities,
-                      zones: velocityZones,
-                      variant: "mini",
-                      testID: `exercise-card-velocity-strip-${i}`
-                    },
-                    i
-                  )),
-                  Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx(
-                    PlaceholderStrip,
-                    {
-                      testID: `exercise-card-placeholder-${i}`
-                    },
-                    `placeholder-${i}`
-                  ))
-                ]
-              }
-            )
+            /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", testID: "exercise-card-header", children: [
+              /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-primary",
+                  style: {
+                    fontSize: 14,
+                    fontFamily: '"Space Grotesk", sans-serif',
+                    fontWeight: "700"
+                  },
+                  testID: "exercise-card-name",
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+              summary && /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-secondary",
+                  style: {
+                    fontSize: 12,
+                    fontFamily: "Inter, sans-serif",
+                    marginRight: 8
+                  },
+                  testID: "exercise-card-summary",
+                  children: formatSummary(summary)
+                }
+              ),
+              isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
+            ] }),
+            (completedSets > 0 || remaining > 0) && /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row", style: { marginTop: 6, gap: 4 }, testID: "exercise-card-strips", children: [
+              setVelocities?.map((velocities, i) => /* @__PURE__ */ jsx(
+                VelocityStrip,
+                {
+                  velocities,
+                  zones: velocityZones,
+                  variant: "mini",
+                  testID: `exercise-card-velocity-strip-${i}`
+                },
+                i
+              )),
+              Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx(
+                PlaceholderStrip,
+                {
+                  testID: `exercise-card-placeholder-${i}`
+                },
+                `placeholder-${i}`
+              ))
+            ] })
           ]
         }
       )
     }
   );
 }
+var DARK2 = getSemanticColors("dark");
+var BODY_DIVIDER = DARK2["border-subtle"];
+function deriveHeaderSetStates(sets) {
+  return sets.map((set) => {
+    switch (set.state) {
+      case "live":
+        return { status: "active", velocities: set.velocities, planned: set.target.reps };
+      case "done":
+        return { status: "done", velocities: set.velocities };
+      case "todo":
+        return { status: "todo", planned: set.planned ?? set.target.reps };
+    }
+  });
+}
 function ExpandedCard({
   name,
   onToggle,
   summary,
-  e1rm,
   isPR,
   sets,
   tempo,
+  indicator,
+  setStates,
+  stripHeight = 8,
+  velocityZones,
   supersetPosition
 }) {
   const borderRadius = getSupersetBorderRadius(supersetPosition);
   const supersetMargin = getSupersetMargin(supersetPosition);
   const unit = summary?.unit ?? sets?.[0]?.unit ?? "lbs";
-  const columnHeaders = buildColumnHeaders(unit);
+  const headerStates = setStates ?? (sets ? deriveHeaderSetStates(sets) : []);
+  const headerIndicator = indicator ?? (isPR ? "pr" : void 0);
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
@@ -2199,114 +2855,32 @@ function ExpandedCard({
       testID: "exercise-card",
       children: [
         /* @__PURE__ */ jsx(
-          reactNative.Pressable,
+          ExerciseCardHeading,
           {
+            name,
+            sets: summary?.sets ?? sets?.length ?? 0,
+            reps: summary?.reps ?? 0,
+            load: summary?.weight ?? 0,
+            unit,
+            tempo,
+            indicator: headerIndicator,
+            setStates: headerStates,
+            stripHeight,
             onPress: onToggle,
-            accessibilityRole: "button",
-            accessibilityLabel: formatAccessibilityLabel2(name, summary, void 0),
-            "aria-expanded": true,
-            testID: "exercise-card-header",
-            children: /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row items-center",
-                style: {
-                  padding: 12,
-                  paddingHorizontal: 14,
-                  paddingBottom: 10,
-                  borderBottomWidth: 1,
-                  borderBottomColor: resolveColor("border-default")
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        fontSize: 14,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "exercise-card-name",
-                      children: name
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
-                  summary && /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-secondary",
-                      style: {
-                        fontSize: 12,
-                        fontFamily: "Inter, sans-serif",
-                        marginRight: 8
-                      },
-                      testID: "exercise-card-summary",
-                      children: formatSummary(summary)
-                    }
-                  ),
-                  e1rm && /* @__PURE__ */ jsx(
-                    WeightBadge,
-                    {
-                      value: roundWeight(e1rm.value),
-                      unit: e1rm.unit,
-                      size: "sm",
-                      showIcon: false,
-                      testID: "exercise-card-e1rm"
-                    }
-                  ),
-                  isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
-                ]
-              }
-            )
+            testID: "exercise-card-heading"
           }
         ),
-        tempo && /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: 8, paddingHorizontal: 14 }, testID: "exercise-card-tempo", children: /* @__PURE__ */ jsx(TempoDisplay, { tempo, size: "sm" }) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           reactNative.View,
           {
-            className: "flex-row",
-            style: {
-              paddingVertical: 8,
-              paddingHorizontal: 8,
-              paddingBottom: 4
-            },
-            testID: "exercise-card-column-headers",
-            children: columnHeaders.map((header, i) => {
-              const widths = [36, void 0, 44, 56, 36];
-              const width = widths[i];
-              const isFlex = width === void 0;
-              return /* @__PURE__ */ jsx(
-                reactNative.View,
-                {
-                  style: {
-                    ...isFlex ? {} : { width },
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: 8
-                  },
-                  ...isFlex ? { className: "flex-1" } : {},
-                  children: /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-tertiary",
-                      style: {
-                        fontSize: 10,
-                        fontWeight: "600",
-                        fontFamily: "Inter, sans-serif",
-                        textTransform: "uppercase",
-                        letterSpacing: 0.8
-                      },
-                      children: header
-                    }
-                  )
-                },
-                header
-              );
-            })
+            style: { borderTopWidth: 1, borderTopColor: BODY_DIVIDER, paddingBottom: 6 },
+            testID: "exercise-card-body",
+            children: [
+              /* @__PURE__ */ jsx(SetTableHeader, { unit, showPrevious: false, testID: "exercise-card-column-headers" }),
+              sets && /* @__PURE__ */ jsx(reactNative.View, { testID: "exercise-card-sets", children: sets.map((set, i) => /* @__PURE__ */ jsx(SetRow, { ...set, velocityZones: set.velocityZones ?? velocityZones }, i)) })
+            ]
           }
-        ),
-        sets && /* @__PURE__ */ jsx(reactNative.View, { testID: "exercise-card-sets", children: sets.map((setProps, i) => /* @__PURE__ */ jsx(SetRow, { ...setProps }, i)) })
+        )
       ]
     }
   );
@@ -2315,11 +2889,12 @@ function UpcomingCard({
   name,
   prescription,
   previousBest,
-  supersetPosition
+  supersetPosition,
+  onToggle
 }) {
   const borderRadius = getSupersetBorderRadius(supersetPosition);
   const supersetMargin = getSupersetMargin(supersetPosition);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress: onToggle, accessibilityRole: "button", children: /* @__PURE__ */ jsx(
     reactNative.View,
     {
       style: {
@@ -2329,7 +2904,7 @@ function UpcomingCard({
         ...borderRadius,
         ...supersetMargin
       },
-      accessibilityLabel: formatAccessibilityLabel2(name, void 0, prescription),
+      accessibilityLabel: formatAccessibilityLabel(name, void 0, prescription),
       testID: "exercise-card",
       children: /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", children: [
         /* @__PURE__ */ jsx(
@@ -2337,6 +2912,7 @@ function UpcomingCard({
           {
             className: "text-text-primary",
             style: {
+              flexShrink: 0,
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: "700"
@@ -2349,7 +2925,9 @@ function UpcomingCard({
           reactNative.Text,
           {
             className: "text-text-secondary",
+            numberOfLines: 1,
             style: {
+              flexShrink: 1,
               fontSize: 12,
               fontFamily: "Inter, sans-serif",
               marginLeft: 8
@@ -2358,12 +2936,14 @@ function UpcomingCard({
             children: prescription
           }
         ),
-        /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+        /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", style: { minWidth: 8 } }),
         previousBest && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             className: "text-text-tertiary",
+            numberOfLines: 1,
             style: {
+              flexShrink: 1,
               fontSize: 11,
               fontFamily: "Inter, sans-serif"
             },
@@ -2373,18 +2953,31 @@ function UpcomingCard({
         )
       ] })
     }
-  );
+  ) });
 }
-function ExerciseCard(props) {
-  switch (props.state) {
-    case "collapsed":
-      return /* @__PURE__ */ jsx(CollapsedCard, { ...props });
-    case "expanded":
-      return /* @__PURE__ */ jsx(ExpandedCard, { ...props });
-    case "upcoming":
-      return /* @__PURE__ */ jsx(UpcomingCard, { ...props });
-  }
+function ExerciseCard({
+  upcoming,
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  ...rest
+}) {
+  const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded ?? false);
+  const isControlled = expanded !== void 0;
+  const isExpanded = isControlled ? expanded : internalExpanded;
+  const onToggle = () => {
+    const next = !isExpanded;
+    onExpandedChange?.(next);
+    if (!isControlled) setInternalExpanded(next);
+  };
+  if (upcoming) return /* @__PURE__ */ jsx(UpcomingCard, { ...rest, onToggle });
+  return isExpanded ? /* @__PURE__ */ jsx(ExpandedCard, { ...rest, onToggle }) : /* @__PURE__ */ jsx(CollapsedCard, { ...rest, onToggle });
+}
+function resolveColor(token, mode = "dark") {
+  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
 }
+
+// src/components/custom/Workout/InputBar.tsx
 var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
 var INPUT_CLASSNAME = "bg-surface-raised border-border-strong text-text-primary";
 var inputStyle = {
@@ -2541,7 +3134,307 @@ function InputBar({
     }
   );
 }
+function formatDuration(ms) {
+  const totalSeconds = Math.max(0, Math.ceil(ms / 1e3));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function useTimer(options = {}) {
+  const {
+    mode = "up",
+    durationMs,
+    elapsedMs: controlledElapsedMs,
+    running = false,
+    autoTick = false,
+    tickMs = 1e3
+  } = options;
+  const isControlled = controlledElapsedMs != null;
+  const [internalElapsedMs, setInternalElapsedMs] = react.useState(0);
+  react.useEffect(() => {
+    if (isControlled || !autoTick || !running) return;
+    const id = setInterval(() => {
+      setInternalElapsedMs((prev) => prev + tickMs);
+    }, tickMs);
+    return () => clearInterval(id);
+  }, [isControlled, autoTick, running, tickMs]);
+  const elapsedMs = isControlled ? controlledElapsedMs : internalElapsedMs;
+  const hasDuration = durationMs != null && durationMs > 0;
+  const remainingMs = durationMs != null ? Math.max(0, durationMs - elapsedMs) : 0;
+  let progress;
+  if (hasDuration) {
+    progress = Math.min(1, Math.max(0, elapsedMs / durationMs));
+  } else {
+    progress = mode === "down" ? 1 : 0;
+  }
+  const label = formatDuration(mode === "down" ? remainingMs : elapsedMs);
+  const done = durationMs != null && elapsedMs >= durationMs;
+  return { elapsedMs, remainingMs, progress, label, done };
+}
+var colorVarMap = {
+  primary: "var(--color-brand-primary)",
+  secondary: "var(--color-brand-secondary)",
+  success: "var(--color-status-success)",
+  error: "var(--color-status-error)",
+  warning: "var(--color-status-warning)",
+  info: "var(--color-status-info)"
+};
+function CircularProgress({
+  value = 0,
+  max = 100,
+  isIndeterminate = false,
+  size = 48,
+  strokeWidth = 4,
+  color = "primary",
+  showValue = false,
+  formatValue: formatValue2 = (v, m) => `${Math.round(v / m * 100)}%`,
+  children,
+  fill = false,
+  className,
+  ...props
+}) {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - percentage / 100 * circumference;
+  const center = size / 2;
+  const boxStyle = fill ? { width: "100%", aspectRatio: 1 } : { width: size, height: size };
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className: cn("items-center justify-center", className),
+      style: boxStyle,
+      accessibilityRole: "progressbar",
+      accessibilityValue: {
+        min: 0,
+        max,
+        now: isIndeterminate ? void 0 : value
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { className: cn(isIndeterminate && "animate-spin"), style: boxStyle, children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${size} ${size}`,
+            style: { position: "absolute" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: "var(--color-border-default)",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: colorVarMap[color],
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: isIndeterminate ? circumference * 0.75 : strokeDashoffset,
+                  transform: `rotate(-90 ${center} ${center})`,
+                  style: { transition: "stroke-dashoffset 300ms cubic-bezier(0.22, 1, 0.36, 1)" }
+                }
+              )
+            ]
+          }
+        ) }),
+        children != null ? /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              position: "absolute",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none"
+            },
+            children
+          }
+        ) : showValue && !isIndeterminate && /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-xs font-semibold text-text-primary absolute",
+            style: { fontSize: Math.max(size * 0.22, 10) },
+            children: formatValue2(value, max)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/custom/CircularTimer/CircularTimer.tsx
+function CircularTimer({
+  durationMs,
+  elapsedMs,
+  mode = "down",
+  size = 160,
+  strokeWidth = 8,
+  fill = false,
+  color = "primary",
+  doneLabel,
+  doneColor = "success",
+  controls,
+  accessibilityLabel: accessibilityLabel2,
+  testID
+}) {
+  const { remainingMs, progress, label, done } = useTimer({ mode, durationMs, elapsedMs });
+  const isDone = done && mode === "down";
+  const showDone = isDone && doneLabel != null;
+  const remainingFrac = durationMs > 0 ? Math.max(0, Math.min(1, remainingMs / durationMs)) : 0;
+  const arc = mode === "down" ? showDone ? 1 : remainingFrac : progress;
+  const ringColor = showDone ? doneColor : color;
+  const remainingSec = Math.ceil(Math.max(0, remainingMs) / 1e3);
+  const a11y = accessibilityLabel2 ?? (isDone ? "Timer complete" : `${remainingSec} seconds remaining`);
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { alignItems: "center", gap: 16 },
+      accessibilityRole: "timer",
+      accessibilityLabel: a11y,
+      testID: testID ?? "circular-timer",
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            value: arc,
+            max: 1,
+            size,
+            strokeWidth,
+            fill,
+            color: ringColor,
+            accessibilityLabel: "Timer ring",
+            testID: "circular-timer-ring",
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: showDone ? void 0 : "text-text-primary",
+                style: {
+                  fontSize: Math.round(size * (showDone ? 0.28 : 0.24)),
+                  fontFamily: '"Space Grotesk", sans-serif',
+                  fontWeight: "800",
+                  fontVariant: ["tabular-nums"],
+                  letterSpacing: showDone ? 1 : -1,
+                  ...showDone ? { color: colorVarMap[doneColor] } : null
+                },
+                testID: "circular-timer-label",
+                children: showDone ? doneLabel : label
+              }
+            )
+          }
+        ),
+        controls
+      ]
+    }
+  );
+}
+
+// src/components/custom/Workout/RestTimer.tsx
 var BRAND_PRIMARY3 = getSemanticColors("dark")["brand-primary"];
+var RING_DEFAULT_SIZE = 180;
+function RestActions({ onAddTime, onSkip }) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(
+      reactNative.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",
+        children: /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-text-secondary",
+            style: { fontSize: 11, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+            children: "+30s"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      reactNative.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",
+        children: /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 11,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              color: BRAND_PRIMARY3
+            },
+            children: "Skip"
+          }
+        )
+      }
+    )
+  ] });
+}
+function RestTimerRing({
+  totalSeconds,
+  elapsedMs,
+  remainingSec,
+  done,
+  size,
+  nextSetInfo,
+  displayOnly,
+  onSkip,
+  onAddTime
+}) {
+  const a11yLabel = done ? "Rest complete, next set ready" : `Rest timer, ${Math.max(0, remainingSec)} seconds remaining`;
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { alignItems: "center", gap: 16 }, testID: "rest-timer", children: [
+    /* @__PURE__ */ jsx(
+      CircularTimer,
+      {
+        durationMs: totalSeconds * 1e3,
+        elapsedMs,
+        mode: "down",
+        size,
+        doneLabel: "GO",
+        doneColor: "success",
+        accessibilityLabel: a11yLabel,
+        controls: !displayOnly ? /* @__PURE__ */ jsx(RestActions, { onAddTime, onSkip }) : void 0,
+        testID: "rest-timer-ring"
+      }
+    ),
+    nextSetInfo != null && /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        className: "text-text-tertiary",
+        style: { fontSize: 13, fontFamily: "Inter, sans-serif" },
+        testID: "rest-timer-next-set",
+        children: nextSetInfo
+      }
+    )
+  ] });
+}
 function RestTimer({
   totalSeconds,
   elapsedMs,
@@ -2549,16 +3442,39 @@ function RestTimer({
   onAddTime,
   nextSetInfo,
   visible,
-  displayOnly = false
+  displayOnly = false,
+  variant = "bar",
+  size = RING_DEFAULT_SIZE
 }) {
-  if (!visible) return null;
-  const remainingMs = Math.max(0, totalSeconds * 1e3 - elapsedMs);
+  const {
+    remainingMs,
+    progress,
+    label: timeDisplay,
+    done
+  } = useTimer({
+    mode: "down",
+    durationMs: totalSeconds * 1e3,
+    elapsedMs
+  });
   const remainingSec = Math.ceil(remainingMs / 1e3);
-  const minutes = Math.floor(remainingSec / 60);
-  const seconds = remainingSec % 60;
-  const timeDisplay = `${minutes}:${String(seconds).padStart(2, "0")}`;
-  const totalMs = totalSeconds * 1e3;
-  const progressPct = totalMs > 0 ? Math.min(100, elapsedMs / totalMs * 100) : 100;
+  const progressPct = progress * 100;
+  if (!visible) return null;
+  if (variant === "ring") {
+    return /* @__PURE__ */ jsx(
+      RestTimerRing,
+      {
+        totalSeconds,
+        elapsedMs,
+        remainingSec,
+        done,
+        size,
+        nextSetInfo,
+        displayOnly,
+        onSkip,
+        onAddTime
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
@@ -2656,62 +3572,7 @@ function RestTimer({
             )
           }
         ),
-        !displayOnly && /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", gap: 8 }, children: [
-          /* @__PURE__ */ jsx(
-            reactNative.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",
-              children: /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 11,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "600"
-                  },
-                  children: "+30s"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            reactNative.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",
-              children: /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  style: {
-                    fontSize: 11,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "600",
-                    color: BRAND_PRIMARY3
-                  },
-                  children: "Skip"
-                }
-              )
-            }
-          )
-        ] })
+        !displayOnly && /* @__PURE__ */ jsx(RestActions, { onAddTime, onSkip })
       ]
     }
   );
@@ -2797,23 +3658,22 @@ function deriveWorkoutProgress(exercises) {
 function findActiveExercise(exercises) {
   return exercises.find((exercise) => exercise.status === "active") ?? null;
 }
-function statusToCardState(status, focused) {
-  if (status === "upcoming") return "upcoming";
-  return focused ? "expanded" : "collapsed";
+function isUpcomingExercise(status) {
+  return status === "upcoming";
 }
 function toActiveCardProps(exercise, focused, onToggle, supersetPosition = null, supersetColor) {
-  const state = statusToCardState(exercise.status, focused);
+  const upcoming = isUpcomingExercise(exercise.status);
   return {
     name: exercise.name,
-    state,
-    onToggle,
+    upcoming,
+    expanded: focused,
+    onExpandedChange: onToggle,
     summary: exercise.summary,
-    e1rm: exercise.e1rm,
     isPR: exercise.isPR,
     tempo: exercise.tempo,
     setVelocities: exercise.setVelocities,
     totalPlannedSets: exercise.totalPlannedSets,
-    sets: state === "expanded" ? exercise.sets : void 0,
+    sets: focused ? exercise.sets : void 0,
     prescription: exercise.prescription,
     previousBest: exercise.previousBest,
     supersetPosition,
@@ -3502,11 +4362,11 @@ function CardContent({ children, className }) {
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
 }
-var t3 = getSemanticColors("dark");
+var t5 = getSemanticColors("dark");
 var solidVariantColors = {
-  success: t3["status-success"],
-  warning: t3["status-warning"],
-  error: t3["status-error"],
+  success: t5["status-success"],
+  warning: t5["status-warning"],
+  error: t5["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
@@ -3546,8 +4406,8 @@ var iconColors = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": t3["status-success"],
-  deviation: t3["status-warning"],
+  "on-track": t5["status-success"],
+  deviation: t5["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -3633,13 +4493,13 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/MesoStatusCard.tsx
-var t4 = getSemanticColors("dark");
-var BRAND_PRIMARY5 = t4["brand-primary"];
+var t6 = getSemanticColors("dark");
+var BRAND_PRIMARY5 = t6["brand-primary"];
 var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t4["status-success"];
-var WARNING = t4["status-warning"];
-var ERROR = t4["status-error"];
+var SUCCESS = t6["status-success"];
+var WARNING = t6["status-warning"];
+var ERROR = t6["status-error"];
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY5, BRAND_PRIMARY_LIGHT];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
@@ -3711,7 +4571,7 @@ function StatusPill({ badge }) {
     }
   );
 }
-function MetricCell({ metric }) {
+function MetricCell2({ metric }) {
   return /* @__PURE__ */ jsxs(reactNative.View, { style: { width: "48%" }, testID: "meso-status-card-metric", children: [
     /* @__PURE__ */ jsx(
       reactNative.Text,
@@ -3929,7 +4789,7 @@ function MesoStatusCard({
               className: "flex-row flex-wrap",
               style: { gap: 8 },
               testID: "meso-status-card-metrics",
-              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell, { metric }, `${metric.label}-${index}`))
+              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell2, { metric }, `${metric.label}-${index}`))
             }
           ),
           gauges.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 12 }, testID: "meso-status-card-gauges", children: gauges.map((gauge, index) => /* @__PURE__ */ jsx(Gauge, { gauge }, `${gauge.label}-${index}`)) }),
@@ -4010,8 +4870,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t10 = Date.parse(dateStr);
-  return Number.isNaN(t10) ? 0 : t10;
+  const t12 = Date.parse(dateStr);
+  return Number.isNaN(t12) ? 0 : t12;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -4500,10 +5360,10 @@ function StrengthTrendChart({
     }
   );
 }
-var t5 = getSemanticColors("dark");
-var STATUS_SUCCESS2 = t5["status-success"];
-var STATUS_WARNING2 = t5["status-warning"];
-var STATUS_INFO = t5["status-info"];
+var t7 = getSemanticColors("dark");
+var STATUS_SUCCESS2 = t7["status-success"];
+var STATUS_WARNING2 = t7["status-warning"];
+var STATUS_INFO = t7["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -4546,13 +5406,13 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t10 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t10 * (b[key] - a[key]);
+      const t12 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t12 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
 }
-function buildColumns(pixels, step) {
+function buildColumns2(pixels, step) {
   if (pixels.length < 2) return [];
   const start = pixels[0].x;
   const end = pixels[pixels.length - 1].x;
@@ -4664,7 +5524,7 @@ function CapacityBandChart({
   }
   const { toX, toY } = scale;
   const bandPixels = toPixels(band, toX, toY);
-  const columns = buildColumns(bandPixels, COLUMN_STEP);
+  const columns = buildColumns2(bandPixels, COLUMN_STEP);
   const topEdge = buildEdges(bandPixels, "yHigh");
   const bottomEdge = buildEdges(bandPixels, "yLow");
   const lastBandPoint = band[band.length - 1];
@@ -4739,8 +5599,8 @@ function CapacityBandChart({
                   testID: "capacity-band-chart-reveal",
                   children: /* @__PURE__ */ jsxs(reactNative.View, { style: { width, height, position: "relative" }, children: [
                     projection && /* @__PURE__ */ jsxs(reactNative.View, { testID: "capacity-band-chart-projection", children: [
-                      renderColumns(buildColumns(trainingPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
-                      renderColumns(buildColumns(restPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
+                      renderColumns(buildColumns2(trainingPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
+                      renderColumns(buildColumns2(restPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
                       renderEdges(buildEdges(trainingPixels, "yHigh"), STATUS_SUCCESS2, true, "capacity-band-chart-projection-training"),
                       renderEdges(buildEdges(trainingPixels, "yLow"), STATUS_SUCCESS2, true, "capacity-band-chart-projection-training"),
                       renderEdges(buildEdges(restPixels, "yHigh"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
@@ -4901,10 +5761,9 @@ function deriveExerciseStats(entries) {
 function toExerciseCardProps(entry, expanded, onToggle) {
   return {
     name: entry.title,
-    state: expanded ? "expanded" : "collapsed",
-    onToggle,
+    expanded,
+    onExpandedChange: onToggle,
     summary: entry.summary,
-    e1rm: entry.e1rm,
     isPR: entry.isPR,
     tempo: entry.tempo,
     sets: expanded ? entry.sets : void 0
@@ -5448,6 +6307,7 @@ var colorStyles = {
   default: "bg-text-tertiary",
   primary: "bg-brand-primary",
   success: "bg-status-success",
+  live: "bg-status-live",
   error: "bg-status-error",
   warning: "bg-status-warning",
   info: "bg-status-info",
@@ -5504,7 +6364,7 @@ function Indicator({
         colorClass,
         pulseMode === "opacity" && "animate-pulse",
         ring && "border-2 border-background-base",
-        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
+        glow && !customColor && (color === "success" || color === "live") && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
         glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
         glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
         glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
@@ -5586,7 +6446,7 @@ function Badge({
     }
   );
 }
-var t6 = getSemanticColors("dark");
+var t8 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
@@ -5604,14 +6464,14 @@ var statusBorderStyles = {
   deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: t6["status-success"],
-  current: t6["brand-primary"],
-  next: t6["brand-primary"],
+  completed: t8["status-success"],
+  current: t8["brand-primary"],
+  next: t8["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
 };
-function usePulse(enabled) {
+function usePulse2(enabled) {
   const [opacity] = react.useState(() => new reactNative.Animated.Value(1));
   react.useEffect(() => {
     if (!enabled) {
@@ -5649,7 +6509,7 @@ function WorkoutPill({
   ...props
 }) {
   const shouldPulse = pulse ?? status === "current";
-  const pulseOpacity = usePulse(shouldPulse);
+  const pulseOpacity = usePulse2(shouldPulse);
   const isCompleted = status === "completed";
   const isMissed = status === "missed";
   const pill = /* @__PURE__ */ jsx(
@@ -5739,19 +6599,19 @@ function WorkoutPill({
   }
   return pill;
 }
-var t7 = getSemanticColors("dark");
+var t9 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
 var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
 var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
 var ZONE = {
-  building: t7["status-success"],
+  building: t9["status-success"],
   // below target ramp-up
-  approaching: t7["status-warning"],
+  approaching: t9["status-warning"],
   // nearing target
-  target: t7["brand-primary"],
+  target: t9["brand-primary"],
   // exactly at target
-  over1: t7["status-error"],
+  over1: t9["status-error"],
   // mild over-target
   over2: WORKOUT_TOKENS.intensity.over2,
   // moderate over-target
@@ -6174,13 +7034,13 @@ function MesoCard({
     }
   ) });
 }
-var t8 = getSemanticColors("dark");
+var t10 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: t8["brand-secondary"],
-  ontrack: t8["status-success"],
-  target: t8["brand-primary"],
-  over: t8["status-error"]
+  behind: t10["brand-secondary"],
+  ontrack: t10["status-success"],
+  target: t10["brand-primary"],
+  over: t10["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -6254,10 +7114,10 @@ function MuscleGroupChip({
 }
 
 // src/components/custom/Workout/WorkoutCard.tsx
-var t9 = getSemanticColors("dark");
+var t11 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: t9["status-success"],
-  brandPrimary: t9["brand-primary"],
+  statusSuccess: t11["status-success"],
+  brandPrimary: t11["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -6541,8 +7401,8 @@ function WeekLevel({ week, onSelectWorkout }) {
 function WorkoutLevel({ workout, expandedExercise, onToggleExercise }) {
   const exercises = workout.exercises.map((exercise, index) => ({
     ...exercise,
-    state: exercise.state === "upcoming" ? exercise.state : index === expandedExercise ? "expanded" : "collapsed",
-    onToggle: () => onToggleExercise(index)
+    expanded: index === expandedExercise,
+    onExpandedChange: () => onToggleExercise(index)
   }));
   return /* @__PURE__ */ jsx(reactNative.View, { testID: "program-planning-page-workout-level", children: /* @__PURE__ */ jsx(
     WorkoutCard,
@@ -6685,7 +7545,7 @@ exports.findMeso = findMeso;
 exports.findWeek = findWeek;
 exports.findWorkout = findWorkout;
 exports.groupExercises = groupExercises;
-exports.statusToCardState = statusToCardState;
+exports.isUpcomingExercise = isUpcomingExercise;
 exports.summarizeVbt = summarizeVbt;
 exports.toActiveCardProps = toActiveCardProps;
 exports.toExerciseCardProps = toExerciseCardProps;