@titan-design/react-ui 0.7.0 → 0.9.0

package/dist/pages.js

@@ -35,6 +35,8 @@ var primitiveColors = {
     900: "#111827"},
   // Charcoal scale (dark backgrounds)
   charcoal: {
+    0: "#6E6E6E",
+    100: "#4C4C4C",
     200: "#3C3C3C",
     300: "#2C2C2C",
     400: "#1F1F1F",
@@ -76,6 +78,7 @@ var primitiveRamps = {
     500: "#22A444",
     600: "#298732"},
   cyan: {
+    300: "#22D3EE",
     // pin
     400: "#01B5D1",
     500: "#2697B7",
@@ -90,6 +93,7 @@ var primitiveRamps = {
     // pin
     600: "#1072CB"},
   magenta: {
+    400: "#ED69C3",
     600: "#BA2996"}
 };
 var sequentialEffort = [
@@ -606,8 +610,18 @@ 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 = 120;
+var HERO_LABEL_MIN_BAR_WIDTH = 30;
+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];
+var PEAK_HEADROOM = 1.06;
 function scaleDenominator(scale, maxVelocity) {
-  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * 1.15;
+  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * PEAK_HEADROOM;
 }
 function bareSlotHeight(slot, height, denom) {
   if (slot.kind !== "rep" || denom <= 0) return BARE_STUB_HEIGHT;
@@ -633,6 +647,195 @@ 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 useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [liveScale] = react.useState(() => new reactNative.Animated.Value(1));
+  react.useEffect(() => {
+    if (!active || liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveScale.setValue(1);
+      return;
+    }
+    if (isNewPeak) {
+      liveScale.setValue(1);
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(liveScale, {
+          toValue: 1.25,
+          duration: 150,
+          easing: reactNative.Easing.out(reactNative.Easing.quad),
+          useNativeDriver: true
+        }),
+        reactNative.Animated.spring(liveScale, {
+          toValue: 1,
+          friction: 3,
+          tension: 140,
+          useNativeDriver: true
+        })
+      ]).start();
+    } else {
+      liveScale.setValue(0.8);
+      reactNative.Animated.timing(liveScale, {
+        toValue: 1,
+        duration: 300,
+        easing: POP_EASING,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [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 [plotW, setPlotW] = react.useState(0);
+  const onPlotLayout = (e) => setPlotW(e.nativeEvent.layout.width);
+  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 totalSlots = doneVelocities.length + pendingCount;
+  const barWidth = plotW > 0 && totalSlots > 0 ? Math.min(HERO_BAR_MAX_WIDTH, (plotW - HERO_BAR_GAP * (totalSlots - 1)) / totalSlots) : HERO_BAR_MAX_WIDTH;
+  const labelsCrowded = plotW > 0 && barWidth < HERO_LABEL_MIN_BAR_WIDTH;
+  const heroGap = plotW === 0 ? HERO_BAR_GAP : barWidth < 16 ? 2 : barWidth < 28 ? 4 : HERO_BAR_GAP;
+  const peakIndex = doneVelocities.reduce(
+    (best, v, i) => v > doneVelocities[best] ? i : best,
+    0
+  );
+  const showBarLabel = (i) => !labelsCrowded || i === peakIndex || i === liveRepIndex;
+  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,
+        {
+          onLayout: onPlotLayout,
+          style: {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "flex-end",
+            gap: heroGap,
+            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: [
+                    showBarLabel(i) && /* @__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,
@@ -643,6 +846,7 @@ function VelocityStrip({
   onRepPress,
   variant = "expanded",
   height = EXPANDED_HEIGHT,
+  targetReps,
   scale = "peak",
   showNumbers = true,
   showInfo = true,
@@ -668,45 +872,17 @@ function VelocityStrip({
     return SET_STRIP_VARIABLE_COLOR;
   };
   const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const prefersReducedMotion = usePrefersReducedMotion();
   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 [liveScale] = react.useState(() => new reactNative.Animated.Value(1));
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
-  react.useEffect(() => {
-    if (variant !== "expanded" || !framed || liveRepIndex == null || liveVelocity == null) return;
-    if (prefersReducedMotion) {
-      liveScale.setValue(1);
-      return;
-    }
-    if (isNewPeak) {
-      liveScale.setValue(1);
-      reactNative.Animated.sequence([
-        reactNative.Animated.timing(liveScale, {
-          toValue: 1.25,
-          duration: 150,
-          easing: reactNative.Easing.out(reactNative.Easing.quad),
-          useNativeDriver: true
-        }),
-        reactNative.Animated.spring(liveScale, {
-          toValue: 1,
-          friction: 3,
-          tension: 140,
-          useNativeDriver: true
-        })
-      ]).start();
-    } else {
-      liveScale.setValue(0.8);
-      reactNative.Animated.timing(liveScale, {
-        toValue: 1,
-        duration: 300,
-        easing: POP_EASING,
-        useNativeDriver: true
-      }).start();
-    }
-  }, [variant, framed, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  const liveScale = useLiveRepPop(
+    variant === "expanded" && framed,
+    liveRepIndex,
+    liveVelocity,
+    isNewPeak
+  );
   react.useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
@@ -733,6 +909,24 @@ function VelocityStrip({
   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(
@@ -1776,6 +1970,7 @@ function SetsRepsLoad({
   reps,
   load,
   unit = "lb",
+  fontSize,
   className,
   ...props
 }) {
@@ -1790,12 +1985,12 @@ function SetsRepsLoad({
       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}` })
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: sets }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${TIMES} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: reps }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${AT} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: load }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${unit}` })
       ]
     }
   );
@@ -2109,36 +2304,34 @@ function alpha(color, opacity) {
   }
   return color;
 }
+
+// src/components/custom/Workout/TempoDisplay.tsx
 var t2 = getSemanticColors("dark");
-var TEMPO_PACING = {
-  behindThresholdPct: 0.15,
-  minPhaseDurationMs: 500
-};
-function getTempoPacingState(elapsedMs, targetMs) {
-  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return "none";
-  const ratio = elapsedMs / targetMs;
-  if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return "behind";
-  return "on-pace";
-}
+var INTER = "Inter, sans-serif";
+var TEXT_TERTIARY = "#6B7280";
+var STATUS_ERROR = t2["status-error"];
+var STATUS_SUCCESS = t2["status-success"];
+var STATUS_WARNING = t2["status-warning"];
+var ON_TARGET_MS = 100;
 function getTempoFillPct(elapsedMs, targetMs) {
   if (!targetMs) return 100;
   return Math.min(100, elapsedMs / targetMs * 100);
 }
-({
-  concentric: { color: t2["status-success"]},
-  hold: { color: t2["brand-primary"]},
-  eccentric: { color: t2["status-warning"]}
-});
-
-// src/components/custom/Workout/TempoDisplay.tsx
-var t3 = getSemanticColors("dark");
-var INTER = "Inter, sans-serif";
-var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = t3["status-error"];
+function activeNumberTone(elapsedMs, targetMs) {
+  if (targetMs == null) return t2["text-primary"];
+  const remainingMs = targetMs - elapsedMs;
+  if (remainingMs > ON_TARGET_MS) return STATUS_WARNING;
+  if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS;
+  return STATUS_ERROR;
+}
+function liveReadoutText(elapsedMs, targetMs, readout) {
+  const seconds = readout === "countup" ? elapsedMs / 1e3 : (targetMs - elapsedMs) / 1e3;
+  return seconds.toFixed(1);
+}
 var phaseColors = {
-  eccentric: t3["status-warning"],
+  eccentric: primitiveRamps.magenta[400],
   pauseBottom: TEXT_TERTIARY,
-  concentric: t3["status-success"],
+  concentric: primitiveRamps.cyan[300],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY
 };
@@ -2158,63 +2351,98 @@ var LIVE_PHASES = [
   { key: "concentric", color: phaseColors.concentric },
   { key: "pauseTop", color: phaseColors.pauseTop }
 ];
+function CellFill({ color, pct }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      style: {
+        position: "absolute",
+        left: 2,
+        right: 2,
+        bottom: 0,
+        height: `${pct}%`,
+        backgroundColor: alpha(color, 0.28),
+        borderRadius: 3
+      }
+    }
+  );
+}
+var MONO = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+var READOUT_MAX_CHARS = 5;
 function LiveTempoCell({
   value,
   color,
-  isActive,
+  status,
   phaseElapsedMs,
-  fontSize
+  completedMs,
+  fontSize,
+  readout
 }) {
-  if (!isActive) {
-    return /* @__PURE__ */ jsx(TempoValue, { value, color: alpha(color, 0.35), fontSize });
-  }
   const targetMs = value > 0 ? value * 1e3 : null;
-  const barColor = getTempoPacingState(phaseElapsedMs, targetMs) === "behind" ? STATUS_ERROR : color;
+  const cellW = Math.ceil(fontSize * 0.62 * READOUT_MAX_CHARS);
+  const wrap = {
+    position: "relative",
+    width: cellW,
+    minHeight: Math.round(fontSize * 1.25),
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const num = (c, text) => /* @__PURE__ */ jsx(reactNative.Text, { style: { fontFamily: MONO, fontSize, color: c, fontWeight: "700" }, children: text });
+  if (status === "upcoming") {
+    const targetText = targetMs != null ? (targetMs / 1e3).toFixed(1) : String(value);
+    return /* @__PURE__ */ jsx(reactNative.View, { style: wrap, children: num(color, targetText) });
+  }
+  if (status === "done") {
+    const finalMs = completedMs ?? targetMs ?? 0;
+    const finalText = targetMs != null ? liveReadoutText(finalMs, targetMs, readout) : String(value);
+    const finalTone = targetMs != null ? activeNumberTone(finalMs, targetMs) : color;
+    return /* @__PURE__ */ jsxs(reactNative.View, { style: wrap, testID: "tempo-live-done", children: [
+      /* @__PURE__ */ jsx(CellFill, { color, pct: 100 }),
+      num(finalTone, finalText)
+    ] });
+  }
+  const numberTone = activeNumberTone(phaseElapsedMs, targetMs);
   const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
-  return /* @__PURE__ */ jsxs(reactNative.View, { style: { position: "relative" }, testID: "tempo-live-active", children: [
-    /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${fillPct}%`,
-          backgroundColor: alpha(barColor, 0.3),
-          borderRadius: 2
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(TempoValue, { value, color: barColor, fontSize })
+  const activeText = targetMs != null ? liveReadoutText(phaseElapsedMs, targetMs, readout) : String(value);
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: wrap, testID: "tempo-live-active", children: [
+    /* @__PURE__ */ jsx(CellFill, { color, pct: fillPct }),
+    num(numberTone, activeText)
   ] });
 }
 function LiveTempoRow({
   values,
   live,
-  fontSize
+  fontSize,
+  readout
 }) {
-  return /* @__PURE__ */ jsx(jsxRuntime.Fragment, { children: LIVE_PHASES.map((phase, i) => /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row" }, children: [
-    i > 0 && /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
-    /* @__PURE__ */ jsx(
-      LiveTempoCell,
-      {
-        value: values[i],
-        color: phase.color,
-        isActive: live.activePhase === phase.key,
-        phaseElapsedMs: live.phaseElapsedMs,
-        fontSize
-      }
-    )
-  ] }, phase.key)) });
+  const activeIndex = live.activePhase ? LIVE_PHASES.findIndex((p) => p.key === live.activePhase) : -1;
+  return /* @__PURE__ */ jsx(jsxRuntime.Fragment, { children: LIVE_PHASES.map((phase, i) => {
+    const status = activeIndex < 0 || i > activeIndex ? "upcoming" : i < activeIndex ? "done" : "active";
+    return /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      i > 0 && /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
+      /* @__PURE__ */ jsx(
+        LiveTempoCell,
+        {
+          value: values[i],
+          color: phase.color,
+          status,
+          phaseElapsedMs: live.phaseElapsedMs,
+          completedMs: live.completed?.[phase.key],
+          fontSize,
+          readout
+        }
+      )
+    ] }, phase.key);
+  }) });
 }
 function TempoDisplay({
   tempo,
   size = "md",
-  colored = true,
+  fontSize: fontSizeProp,
   showLabel = true,
   showInfo = true,
   live,
+  liveReadout = "countdown",
   onPress,
   className,
   ...props
@@ -2222,8 +2450,11 @@ function TempoDisplay({
   const [showTooltip, setShowTooltip] = react.useState(false);
   const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo);
   const isSm = size === "sm";
-  const fontSize = isSm ? 9 : 11;
-  const monoColor = TEXT_TERTIARY;
+  const fontSize = fontSizeProp ?? (isSm ? 9 : 11);
+  const chromePadX = Math.round(fontSize * 0.6);
+  const chromePadY = Math.round(fontSize * 0.3);
+  const chromeRadius = Math.round(fontSize * 0.4);
+  const labelFont = Math.max(9, Math.round(fontSize * 0.5));
   const handlePress = react.useCallback(() => {
     if (onPress) {
       onPress();
@@ -2240,9 +2471,9 @@ function TempoDisplay({
         flexDirection: "row",
         alignItems: "center",
         backgroundColor: "#1C1C1C",
-        paddingHorizontal: isSm ? 6 : 8,
-        paddingVertical: 3,
-        borderRadius: 4
+        paddingHorizontal: chromePadX,
+        paddingVertical: chromePadY,
+        borderRadius: chromeRadius
       },
       ...props,
       children: [
@@ -2251,12 +2482,13 @@ function TempoDisplay({
           {
             style: {
               fontFamily: INTER,
-              fontSize: 9,
+              fontSize: labelFont,
               fontWeight: "500",
-              color: TEXT_TERTIARY,
+              // Live-muted green while a rep is running, tertiary at rest.
+              color: live ? t2["status-live-muted"] : TEXT_TERTIARY,
               letterSpacing: 0.5,
               textTransform: "uppercase",
-              marginRight: 6
+              marginRight: Math.round(fontSize * 0.5)
             },
             children: "TEMPO"
           }
@@ -2266,36 +2498,20 @@ function TempoDisplay({
           {
             values: [eccentric, pauseBottom, concentric, pauseTop],
             live,
-            fontSize
-          }
-        ) : colored ? /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsx(TempoValue, { value: eccentric, color: phaseColors.eccentric, fontSize }),
-          /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
-          /* @__PURE__ */ jsx(TempoValue, { value: pauseBottom, color: phaseColors.pauseBottom, fontSize }),
-          /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
-          /* @__PURE__ */ jsx(TempoValue, { value: concentric, color: phaseColors.concentric, fontSize }),
-          /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
-          /* @__PURE__ */ jsx(TempoValue, { value: pauseTop, color: phaseColors.pauseTop, fontSize })
-        ] }) : /* @__PURE__ */ jsxs(
-          reactNative.Text,
-          {
-            style: {
-              fontFamily: INTER,
-              fontSize,
-              color: monoColor,
-              fontWeight: "600",
-              letterSpacing: 1
-            },
-            children: [
-              eccentric,
-              "-",
-              pauseBottom,
-              "-",
-              concentric,
-              "-",
-              pauseTop
-            ]
+            fontSize,
+            readout: liveReadout
           }
+        ) : (
+          // Static prescription: the phase-coloured lockup (the same colours the live row rests at).
+          /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsx(TempoValue, { value: eccentric, color: phaseColors.eccentric, fontSize }),
+            /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
+            /* @__PURE__ */ jsx(TempoValue, { value: pauseBottom, color: phaseColors.pauseBottom, fontSize }),
+            /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
+            /* @__PURE__ */ jsx(TempoValue, { value: concentric, color: phaseColors.concentric, fontSize }),
+            /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
+            /* @__PURE__ */ jsx(TempoValue, { value: pauseTop, color: phaseColors.pauseTop, fontSize })
+          ] })
         ) })
       ]
     }
@@ -2380,14 +2596,14 @@ function TempoDisplay({
     }
   );
 }
-var t4 = getSemanticColors("dark");
+var t3 = 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" }
+  imbalance: { Icon: ScaleIcon, color: t3["status-error"], label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, color: t3["status-error"], label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, color: t3["status-warning"], label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, color: t3["status-warning"], label: "Missed reps" },
+  pr: { Icon: AwardIcon, color: t3["status-success"], label: "Personal record" },
+  info: { Icon: InfoIcon, color: t3["status-info"], label: "More info" }
 };
 function ExerciseIndicator({ kind, onPress, className, ...props }) {
   const { Icon, color, label } = INDICATOR_CONFIG[kind];
@@ -2993,9 +3209,270 @@ function useTimer(options = {}) {
   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,
@@ -3003,12 +3480,15 @@ function RestTimer({
   onAddTime,
   nextSetInfo,
   visible,
-  displayOnly = false
+  displayOnly = false,
+  variant = "bar",
+  size = RING_DEFAULT_SIZE
 }) {
   const {
     remainingMs,
     progress,
-    label: timeDisplay
+    label: timeDisplay,
+    done
   } = useTimer({
     mode: "down",
     durationMs: totalSeconds * 1e3,
@@ -3017,6 +3497,22 @@ function RestTimer({
   const remainingSec = Math.ceil(remainingMs / 1e3);
   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,
     {
@@ -3114,62 +3610,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 })
       ]
     }
   );
@@ -3959,11 +4400,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 t5 = getSemanticColors("dark");
+var t4 = getSemanticColors("dark");
 var solidVariantColors = {
-  success: t5["status-success"],
-  warning: t5["status-warning"],
-  error: t5["status-error"],
+  success: t4["status-success"],
+  warning: t4["status-warning"],
+  error: t4["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
@@ -4003,8 +4444,8 @@ var iconColors = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": t5["status-success"],
-  deviation: t5["status-warning"],
+  "on-track": t4["status-success"],
+  deviation: t4["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -4090,13 +4531,13 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/MesoStatusCard.tsx
-var t6 = getSemanticColors("dark");
-var BRAND_PRIMARY5 = t6["brand-primary"];
+var t5 = getSemanticColors("dark");
+var BRAND_PRIMARY5 = t5["brand-primary"];
 var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t6["status-success"];
-var WARNING = t6["status-warning"];
-var ERROR = t6["status-error"];
+var SUCCESS = t5["status-success"];
+var WARNING = t5["status-warning"];
+var ERROR = t5["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%)";
@@ -4456,9 +4897,9 @@ function MesoStatusCard({
 var sem = getSemanticColors("dark");
 var BRAND_PRIMARY6 = sem["brand-primary"];
 var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
-var STATUS_SUCCESS = sem["status-success"];
+var STATUS_SUCCESS2 = sem["status-success"];
 var STATUS_ERROR2 = sem["status-error"];
-var STATUS_WARNING = sem["status-warning"];
+var STATUS_WARNING2 = sem["status-warning"];
 var GRID_LINE = "rgba(255,255,255,0.06)";
 var SUCCESS_PILL_BG = "rgba(46,213,115,0.10)";
 var SUCCESS_PILL_BORDER = "rgba(46,213,115,0.20)";
@@ -4467,8 +4908,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t12 = Date.parse(dateStr);
-  return Number.isNaN(t12) ? 0 : t12;
+  const t11 = Date.parse(dateStr);
+  return Number.isNaN(t11) ? 0 : t11;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -4764,7 +5205,7 @@ function StrengthTrendChart({
                         left: c.x - 7,
                         top: c.y - 20,
                         fontSize: 12,
-                        color: STATUS_WARNING
+                        color: STATUS_WARNING2
                       },
                       children: "\u2605"
                     },
@@ -4857,7 +5298,7 @@ function StrengthTrendChart({
                       marginTop: 1,
                       fontSize: 10,
                       fontFamily: "Inter, sans-serif",
-                      color: selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? STATUS_SUCCESS : STATUS_ERROR2
+                      color: selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? STATUS_SUCCESS2 : STATUS_ERROR2
                     },
                     children: `${selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? "+" : "-"}${Math.abs(
                       selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm
@@ -4913,7 +5354,7 @@ function StrengthTrendChart({
                   fontSize: 11,
                   fontFamily: "Inter, sans-serif",
                   fontWeight: "600",
-                  color: trend.positive ? STATUS_SUCCESS : STATUS_ERROR2
+                  color: trend.positive ? STATUS_SUCCESS2 : STATUS_ERROR2
                 },
                 children: trendText
               }
@@ -4947,7 +5388,7 @@ function StrengthTrendChart({
                 /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Projected" })
               ] }),
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, color: STATUS_WARNING }, children: "\u2605" }),
+                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, color: STATUS_WARNING2 }, children: "\u2605" }),
                 /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "PR" })
               ] })
             ]
@@ -4957,10 +5398,10 @@ function StrengthTrendChart({
     }
   );
 }
-var t7 = getSemanticColors("dark");
-var STATUS_SUCCESS2 = t7["status-success"];
-var STATUS_WARNING2 = t7["status-warning"];
-var STATUS_INFO = t7["status-info"];
+var t6 = getSemanticColors("dark");
+var STATUS_SUCCESS3 = t6["status-success"];
+var STATUS_WARNING3 = t6["status-warning"];
+var STATUS_INFO = t6["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -4972,8 +5413,8 @@ var PADDING_BOTTOM = 16;
 var COLUMN_STEP = 4;
 var DOT_SIZE = 8;
 var DOT_COLORS = {
-  within: STATUS_SUCCESS2,
-  above: STATUS_WARNING2,
+  within: STATUS_SUCCESS3,
+  above: STATUS_WARNING3,
   below: STATUS_INFO
 };
 var STATUS_PHRASES = {
@@ -5003,8 +5444,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t12 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t12 * (b[key] - a[key]);
+      const t11 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t11 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -5198,8 +5639,8 @@ function CapacityBandChart({
                     projection && /* @__PURE__ */ jsxs(reactNative.View, { testID: "capacity-band-chart-projection", children: [
                       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(trainingPixels, "yHigh"), STATUS_SUCCESS3, true, "capacity-band-chart-projection-training"),
+                      renderEdges(buildEdges(trainingPixels, "yLow"), STATUS_SUCCESS3, true, "capacity-band-chart-projection-training"),
                       renderEdges(buildEdges(restPixels, "yHigh"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
                       renderEdges(buildEdges(restPixels, "yLow"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
                       /* @__PURE__ */ jsx(
@@ -5211,7 +5652,7 @@ function CapacityBandChart({
                             top: trainingPixels[trainingPixels.length - 1]?.yHigh - 12,
                             fontSize: 9,
                             fontFamily: "Inter, sans-serif",
-                            color: STATUS_SUCCESS2
+                            color: STATUS_SUCCESS3
                           },
                           testID: "capacity-band-chart-projection-training-label",
                           children: "Training"
@@ -6043,7 +6484,7 @@ function Badge({
     }
   );
 }
-var t8 = getSemanticColors("dark");
+var t7 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
@@ -6061,9 +6502,9 @@ var statusBorderStyles = {
   deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: t8["status-success"],
-  current: t8["brand-primary"],
-  next: t8["brand-primary"],
+  completed: t7["status-success"],
+  current: t7["brand-primary"],
+  next: t7["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
@@ -6196,19 +6637,19 @@ function WorkoutPill({
   }
   return pill;
 }
-var t9 = getSemanticColors("dark");
+var t8 = 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: t9["status-success"],
+  building: t8["status-success"],
   // below target ramp-up
-  approaching: t9["status-warning"],
+  approaching: t8["status-warning"],
   // nearing target
-  target: t9["brand-primary"],
+  target: t8["brand-primary"],
   // exactly at target
-  over1: t9["status-error"],
+  over1: t8["status-error"],
   // mild over-target
   over2: WORKOUT_TOKENS.intensity.over2,
   // moderate over-target
@@ -6631,13 +7072,13 @@ function MesoCard({
     }
   ) });
 }
-var t10 = getSemanticColors("dark");
+var t9 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: t10["brand-secondary"],
-  ontrack: t10["status-success"],
-  target: t10["brand-primary"],
-  over: t10["status-error"]
+  behind: t9["brand-secondary"],
+  ontrack: t9["status-success"],
+  target: t9["brand-primary"],
+  over: t9["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -6711,10 +7152,10 @@ function MuscleGroupChip({
 }
 
 // src/components/custom/Workout/WorkoutCard.tsx
-var t11 = getSemanticColors("dark");
+var t10 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: t11["status-success"],
-  brandPrimary: t11["brand-primary"],
+  statusSuccess: t10["status-success"],
+  brandPrimary: t10["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };