@titan-design/react-ui 0.8.0 → 0.9.0

package/dist/pages.mjs

@@ -76,6 +76,7 @@ var primitiveRamps = {
     500: "#22A444",
     600: "#298732"},
   cyan: {
+    300: "#22D3EE",
     // pin
     400: "#01B5D1",
     500: "#2697B7",
@@ -90,6 +91,7 @@ var primitiveRamps = {
     // pin
     600: "#1072CB"},
   magenta: {
+    400: "#ED69C3",
     600: "#BA2996"}
 };
 var sequentialEffort = [
@@ -609,13 +611,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_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;
@@ -692,10 +696,21 @@ function HeroVelocityChart({
 }) {
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak);
+  const [plotW, setPlotW] = 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`;
@@ -712,11 +727,12 @@ function HeroVelocityChart({
       children: /* @__PURE__ */ jsxs(
         View,
         {
+          onLayout: onPlotLayout,
           style: {
             flex: 1,
             flexDirection: "row",
             alignItems: "flex-end",
-            gap: HERO_BAR_GAP,
+            gap: heroGap,
             position: "relative",
             borderBottomWidth: 2,
             borderBottomColor: HERO_PENDING_COLOR
@@ -753,7 +769,7 @@ function HeroVelocityChart({
                     justifyContent: "flex-end"
                   },
                   children: [
-                    /* @__PURE__ */ jsx(
+                    showBarLabel(i) && /* @__PURE__ */ jsx(
                       Text,
                       {
                         className: "text-text-primary",
@@ -1952,6 +1968,7 @@ function SetsRepsLoad({
   reps,
   load,
   unit = "lb",
+  fontSize,
   className,
   ...props
 }) {
@@ -1966,12 +1983,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}` })
       ]
     }
   );
@@ -2285,36 +2302,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
 };
@@ -2334,63 +2349,98 @@ var LIVE_PHASES = [
   { key: "concentric", color: phaseColors.concentric },
   { key: "pauseTop", color: phaseColors.pauseTop }
 ];
+function CellFill({ color, pct }) {
+  return /* @__PURE__ */ jsx(
+    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(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(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(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(View, { style: { position: "relative" }, testID: "tempo-live-active", children: [
-    /* @__PURE__ */ jsx(
-      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(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(Fragment, { children: LIVE_PHASES.map((phase, i) => /* @__PURE__ */ jsxs(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(Fragment, { children: LIVE_PHASES.map((phase, i) => {
+    const status = activeIndex < 0 || i > activeIndex ? "upcoming" : i < activeIndex ? "done" : "active";
+    return /* @__PURE__ */ jsxs(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
@@ -2398,8 +2448,11 @@ function TempoDisplay({
   const [showTooltip, setShowTooltip] = 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 = useCallback(() => {
     if (onPress) {
       onPress();
@@ -2416,9 +2469,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: [
@@ -2427,12 +2480,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"
           }
@@ -2442,36 +2496,20 @@ function TempoDisplay({
           {
             values: [eccentric, pauseBottom, concentric, pauseTop],
             live,
-            fontSize
-          }
-        ) : colored ? /* @__PURE__ */ jsxs(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(
-          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(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 })
+          ] })
         ) })
       ]
     }
@@ -2556,14 +2594,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];
@@ -4360,11 +4398,11 @@ function CardContent({ children, className }) {
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(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 = {
@@ -4404,8 +4442,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 = {
@@ -4491,13 +4529,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%)";
@@ -4857,9 +4895,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)";
@@ -4868,8 +4906,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)}`;
@@ -5165,7 +5203,7 @@ function StrengthTrendChart({
                         left: c.x - 7,
                         top: c.y - 20,
                         fontSize: 12,
-                        color: STATUS_WARNING
+                        color: STATUS_WARNING2
                       },
                       children: "\u2605"
                     },
@@ -5258,7 +5296,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
@@ -5314,7 +5352,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
               }
@@ -5348,7 +5386,7 @@ function StrengthTrendChart({
                 /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Projected" })
               ] }),
               /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, color: STATUS_WARNING }, children: "\u2605" }),
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, color: STATUS_WARNING2 }, children: "\u2605" }),
                 /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "PR" })
               ] })
             ]
@@ -5358,10 +5396,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)";
@@ -5373,8 +5411,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 = {
@@ -5404,8 +5442,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];
@@ -5599,8 +5637,8 @@ function CapacityBandChart({
                     projection && /* @__PURE__ */ jsxs(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(
@@ -5612,7 +5650,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"
@@ -6444,7 +6482,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)",
@@ -6462,9 +6500,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
@@ -6597,19 +6635,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
@@ -7032,13 +7070,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,
@@ -7112,10 +7150,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)"
 };