@titan-design/react-ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -5,7 +5,6 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var React24 = require('react');
-var lucideReact = require('lucide-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -2160,6 +2159,9 @@ function validateCssPropertyManifest(candidate) {
 function isCssPropertyManifest(candidate) {
   return validateCssPropertyManifest(candidate).valid;
 }
+function resolveColor(token, mode = "dark") {
+  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
 
 // src/theme/presets/apply.ts
 function colorKeyToVar(key) {
@@ -4985,7 +4987,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = React24.useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
+    setToasts((prev) => prev.filter((t2) => t2.id !== id));
   }, []);
   const removeAllToasts = React24.useCallback(() => {
     setToasts([]);
@@ -6752,7 +6754,7 @@ var variantColors = {
   plain: { backgroundColor: "#1C1C1C", borderColor: "#1F1F1F" },
   pr: {
     backgroundColor: "rgba(255, 121, 0, 0.12)",
-    borderColor: "rgba(255, 121, 0, 0.12)"
+    borderColor: "rgba(255, 121, 0, 0.3)"
   }
 };
 function BaseBadge({
@@ -6820,6 +6822,58 @@ function BaseBadge({
   }
   return badge;
 }
+
+// src/components/custom/Workout/icons.tsx
+function DumbbellIcon({
+  size = 24,
+  color = "currentColor",
+  fill = "none",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      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" })
+      ]
+    }
+  );
+}
+function StarIcon({
+  size = 24,
+  color = "currentColor",
+  fill = "none",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      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" })
+    }
+  );
+}
+
+// src/components/custom/Workout/WeightBadge.tsx
 function WeightBadge({
   value,
   unit = "lbs",
@@ -6845,7 +6899,7 @@ function WeightBadge({
       size,
       onPress,
       className,
-      icon: showIcon ? /* @__PURE__ */ jsx(lucideReact.Dumbbell, { size: config.iconSize, color: iconColor, strokeWidth: 2 }) : void 0,
+      icon: showIcon ? /* @__PURE__ */ jsx(DumbbellIcon, { size: config.iconSize, color: iconColor, strokeWidth: 2 }) : void 0,
       accessibilityLabel: fullLabel,
       testID: "weight-badge",
       ...props,
@@ -6949,7 +7003,7 @@ function PrBadge({
       accessibilityLabel: `Personal record: ${resolvedLabel}`,
       testID: "pr-badge-star",
       ...props,
-      children: /* @__PURE__ */ jsx(lucideReact.Star, { size: 14, color: "#FF7900", fill: "#FF7900", strokeWidth: 2 })
+      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: "#FF7900", fill: "#FF7900", strokeWidth: 2 })
     }
   ) : /* @__PURE__ */ jsx(
     BaseBadge,
@@ -6962,7 +7016,7 @@ function PrBadge({
         reactNative.Text,
         {
           style: {
-            fontSize: 10,
+            fontSize: 12,
             color: "#FF7900",
             fontWeight: "700",
             fontFamily: "Inter, sans-serif"
@@ -7113,6 +7167,29 @@ function StatusDot({
   }
   return /* @__PURE__ */ jsx(reactNative.View, { className, ...props, children: dot });
 }
+
+// src/theme/workout-tokens.ts
+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. Each component maps its own
+  // thresholds onto these four colors. Kept as vivid data-viz values (distinct
+  // from the muted status tokens) and theme-independent, so — like the heatmap
+  // scale below — they are consumed inline as a JS import rather than CSS vars.
+  // A JS import also resolves on native RN, unlike var(--…) strings.
+  scale: {
+    green: "#2ed573",
+    yellow: "#ffd43b",
+    orange: "#ffa502",
+    red: "#ff4757"
+  },
+  // Placeholder strip
+  placeholder: {
+    fill: "#3A3A3A"
+  }};
+
+// src/components/custom/Workout/PlaceholderStrip.tsx
 function SingleStrip({
   width,
   className,
@@ -7121,15 +7198,12 @@ function SingleStrip({
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
-      className: cn(className),
+      className,
       style: [
         {
           height: 3,
-          backgroundColor: "transparent",
-          borderWidth: 1,
-          borderStyle: "dashed",
-          borderColor: "var(--color-border-strong)",
-          borderRadius: 1,
+          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+          borderRadius: 2,
           opacity: 0.5
         },
         width != null ? { width } : { flex: 1 }
@@ -7165,10 +7239,7 @@ function SegmentedStrip({
           style: {
             flex: 1,
             height: 3,
-            backgroundColor: "transparent",
-            borderWidth: 1,
-            borderStyle: "dashed",
-            borderColor: "var(--color-border-strong)",
+            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
             borderRadius: 1,
             minWidth: 4
           },
@@ -7191,23 +7262,6 @@ function PlaceholderStrip({
   return /* @__PURE__ */ jsx(SingleStrip, { ...props });
 }
 
-// src/theme/workout-tokens.ts
-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. Each component maps its own
-  // thresholds onto these four colors. Kept as vivid data-viz values (distinct
-  // from the muted status tokens) and theme-independent, so — like the heatmap
-  // scale below — they are consumed inline as a JS import rather than CSS vars.
-  // A JS import also resolves on native RN, unlike var(--…) strings.
-  scale: {
-    green: "#2ed573",
-    yellow: "#ffd43b",
-    orange: "#ffa502",
-    red: "#ff4757"
-  }};
-
 // src/utils/workout-format.ts
 function roundRpe(rpe) {
   return Math.round(rpe * 2) / 2;
@@ -7246,9 +7300,200 @@ function formatPrescription(p) {
   return full.length > 0 ? full : null;
 }
 
+// src/utils/colors.ts
+function getStatusColor(status) {
+  return `var(--color-status-${status})`;
+}
+function getResultColor(result) {
+  return `var(--color-result-${result})`;
+}
+function alpha(color, opacity) {
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    let r, g, b;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else {
+      return color;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  return color;
+}
+function getLuminance(color) {
+  if (!color.startsWith("#")) return "dark";
+  const hex = color.slice(1);
+  let r, g, b;
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+  } else {
+    return "dark";
+  }
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "light" : "dark";
+}
+function getContrastText(backgroundColor) {
+  return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
+}
+var t = 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";
+}
+function getTempoFillPct(elapsedMs, targetMs) {
+  if (!targetMs) return 100;
+  return Math.min(100, elapsedMs / targetMs * 100);
+}
+var PHASE_ORDER = ["concentric", "hold", "eccentric"];
+var PHASE_CONFIG = {
+  concentric: { label: "Con", color: t["status-success"], flex: 2 },
+  hold: { label: "Hold", color: t["brand-primary"], flex: 1 },
+  eccentric: { label: "Ecc", color: t["status-warning"], flex: 3 }
+};
+function TempoBar({
+  activePhase,
+  phaseElapsedMs,
+  completed,
+  target,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { className, testID: "tempo-bar", ...props, children: [
+    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: 4 }, children: PHASE_ORDER.map((phase) => {
+      const config = PHASE_CONFIG[phase];
+      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, color: t["text-disabled"] }, children: config.label }) }, phase);
+    }) }),
+    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", gap: 2, height: 20 }, children: PHASE_ORDER.map((phase) => {
+      const config = PHASE_CONFIG[phase];
+      const isActive = activePhase === phase;
+      const completedMs = completed?.[phase];
+      const targetSec = target?.[phase];
+      const targetMs = targetSec != null ? targetSec * 1e3 : null;
+      return /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            flex: config.flex,
+            backgroundColor: alpha("#ffffff", 0.06),
+            borderRadius: 4,
+            overflow: "hidden"
+          },
+          children: isActive ? /* @__PURE__ */ jsx(
+            ActiveSegment,
+            {
+              config,
+              phaseElapsedMs,
+              targetMs
+            }
+          ) : completedMs != null ? /* @__PURE__ */ jsx(CompletedSegment, { config, completedMs, targetMs }) : null
+        },
+        phase
+      );
+    }) })
+  ] });
+}
+function ActiveSegment({
+  config,
+  phaseElapsedMs,
+  targetMs
+}) {
+  const pacing = getTempoPacingState(phaseElapsedMs, targetMs);
+  const barColor = pacing === "behind" ? t["status-error"] : config.color;
+  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
+  const label = targetMs ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}` : formatDuration(phaseElapsedMs);
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { height: "100%", position: "relative" }, testID: `tempo-segment-active-${config.label}`, children: [
+    /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${fillPct}%`,
+          backgroundColor: alpha(barColor, 0.3),
+          borderRadius: 4
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          height: "100%",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, fontWeight: "700", color: barColor }, children: label })
+      }
+    )
+  ] });
+}
+function CompletedSegment({
+  config,
+  completedMs,
+  targetMs
+}) {
+  const pacing = getTempoPacingState(completedMs, targetMs);
+  const hitTarget = pacing !== "behind";
+  const indicator = targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? hitTarget ? " \u2713" : " \u2717" : "";
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      style: {
+        height: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: alpha(config.color, 0.15)
+      },
+      testID: `tempo-segment-completed-${config.label}`,
+      children: /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 12, fontWeight: "500", color: alpha(config.color, 0.7) }, children: [
+        formatDuration(completedMs),
+        indicator
+      ] })
+    }
+  );
+}
+function formatDuration(ms) {
+  const s = ms / 1e3;
+  return s < 10 ? s.toFixed(1) : Math.round(s).toString();
+}
+
 // src/components/custom/Workout/TempoDisplay.tsx
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
+var STATUS_ERROR = "#D14343";
 var phaseColors = {
   eccentric: "#FFB020",
   // status-warning (amber)
@@ -7292,11 +7537,68 @@ function TempoSeparator({ color, fontSize }) {
     }
   );
 }
+var LIVE_PHASES = [
+  { key: "eccentric", color: phaseColors.eccentric },
+  { key: "pauseBottom", color: phaseColors.pauseBottom },
+  { key: "concentric", color: phaseColors.concentric },
+  { key: "pauseTop", color: phaseColors.pauseTop }
+];
+function LiveTempoCell({
+  value,
+  color,
+  isActive,
+  phaseElapsedMs,
+  fontSize
+}) {
+  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 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 })
+  ] });
+}
+function LiveTempoRow({
+  values,
+  live,
+  fontSize
+}) {
+  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)) });
+}
 function TempoDisplay({
   tempo,
   size = "md",
   colored = true,
   showInfo = true,
+  live,
   onPress,
   className,
   ...props
@@ -7343,7 +7645,14 @@ function TempoDisplay({
             children: "TEMPO"
           }
         ),
-        /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row" }, testID: "tempo-value", children: colored ? /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row" }, testID: "tempo-value", children: live ? /* @__PURE__ */ jsx(
+          LiveTempoRow,
+          {
+            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 }),
@@ -7528,19 +7837,42 @@ function DeviationBar({
     }
   );
 }
-var TRACK_BG = "rgba(255,255,255,0.06)";
-var THRESHOLD_COLOR = "#FFFFFF";
+var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
-function getZoneColor(level) {
-  if (level >= 0.7) return "#D14343";
-  if (level >= 0.4) return "#FFB020";
-  return "#14B8A6";
-}
-function clamp01(value) {
+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: "#14B8A6",
+  // teal   — below target ramp-up
+  approaching: "#FFB020",
+  // amber  — nearing target
+  target: "#FF7900",
+  // brand  — exactly at target
+  over1: "#D14343",
+  // red    — mild over-target
+  over2: "#A62626",
+  // deep red — moderate over-target
+  over3: "#7A1C1C"
+  // darkest red — severe over-target
+};
+var BULGE_SIZE = { 1: 8, 2: 10, 3: 11 };
+function zoneForPct(pct) {
+  if (pct >= 125) return { color: ZONE.over3, over: 3 };
+  if (pct >= 115) return { color: ZONE.over2, over: 2 };
+  if (pct > 100) return { color: ZONE.over1, over: 1 };
+  if (pct === 100) return { color: ZONE.target, over: 0 };
+  if (pct >= 75) return { color: ZONE.approaching, over: 0 };
+  return { color: ZONE.building, over: 0 };
+}
+function clampFill(value) {
   if (value < 0) return 0;
   if (value > 1) return 1;
   return value;
 }
+function isAtTarget(pct, threshold) {
+  if (threshold == null) return false;
+  return Math.abs(pct - Math.round(threshold * 100)) <= 5;
+}
 function IntensityBar({
   level,
   threshold,
@@ -7552,62 +7884,62 @@ function IntensityBar({
   ...props
 }) {
   const isVertical = orientation === "vertical";
-  const clampedLevel = clamp01(level);
-  const percentage = Math.round(clampedLevel * 100);
-  const zoneColor = getZoneColor(clampedLevel);
-  const [fillAnim] = React24.useState(() => new reactNative.Animated.Value(clampedLevel));
+  const fillLevel = clampFill(level);
+  const pct = Math.round(Math.max(0, level) * 100);
+  const zone = zoneForPct(pct);
+  const atTarget = isAtTarget(pct, threshold);
+  const [fillAnim] = React24.useState(() => new reactNative.Animated.Value(fillLevel));
   React24.useEffect(() => {
     const animation = reactNative.Animated.timing(fillAnim, {
-      toValue: clampedLevel,
+      toValue: fillLevel,
       duration: 250,
       useNativeDriver: false
     });
     animation.start();
     return () => animation.stop();
-  }, [clampedLevel, fillAnim]);
+  }, [fillLevel, fillAnim]);
   const fillSizePercent = fillAnim.interpolate({
     inputRange: [0, 1],
     outputRange: ["0%", "100%"]
   });
   const trackStyle = isVertical ? { width: thickness, height: size } : { width: size, height: thickness };
-  const fillStyle = isVertical ? {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: fillSizePercent
-  } : {
+  const fillStyle = isVertical ? { position: "absolute", bottom: 0, left: 0, right: 0, height: fillSizePercent } : { position: "absolute", top: 0, bottom: 0, left: 0, width: fillSizePercent };
+  const bulgeSize = zone.over === 0 ? 0 : BULGE_SIZE[zone.over];
+  const bulgeStyle = {
     position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    width: fillSizePercent
+    width: bulgeSize,
+    height: bulgeSize,
+    borderRadius: bulgeSize / 2,
+    backgroundColor: zone.color,
+    zIndex: 1,
+    ...isVertical ? { top: 0, left: "50%", transform: [{ translateX: -bulgeSize / 2 }] } : { right: 0, top: "50%", transform: [{ translateY: -bulgeSize / 2 }] }
   };
-  const thresholdLineStyle = threshold != null ? isVertical ? {
+  const targetPct = `${clampFill(threshold ?? 0) * 100}%`;
+  const targetLineStyle = isVertical ? {
     position: "absolute",
-    bottom: `${clamp01(threshold) * 100}%`,
-    left: -2,
-    right: -2,
-    height: 1,
-    backgroundColor: THRESHOLD_COLOR,
+    bottom: targetPct,
+    left: -3,
+    right: -3,
+    height: 1.5,
+    backgroundColor: TARGET_LINE_COLOR,
     zIndex: 4
   } : {
     position: "absolute",
-    left: `${clamp01(threshold) * 100}%`,
-    top: -2,
-    bottom: -2,
-    width: 1,
-    backgroundColor: THRESHOLD_COLOR,
+    left: targetPct,
+    top: -3,
+    bottom: -3,
+    width: 1.5,
+    backgroundColor: TARGET_LINE_COLOR,
     zIndex: 4
-  } : void 0;
+  };
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className,
       style: { alignItems: "center" },
       accessibilityRole: "progressbar",
-      accessibilityValue: { min: 0, max: 100, now: percentage },
-      accessibilityLabel: `Intensity level: ${percentage}%`,
+      accessibilityValue: { min: 0, max: 100, now: pct },
+      accessibilityLabel: `Intensity level: ${pct}%`,
       testID: "intensity-bar",
       ...props,
       children: [
@@ -7629,13 +7961,32 @@ function IntensityBar({
                   style: {
                     ...fillStyle,
                     borderRadius: 3,
-                    backgroundColor: zoneColor,
-                    zIndex: 2
+                    backgroundColor: zone.color,
+                    zIndex: 2,
+                    ...atTarget ? { boxShadow: AT_TARGET_GLOW } : null
                   },
                   testID: "intensity-fill"
                 }
               ),
-              threshold != null && /* @__PURE__ */ jsx(reactNative.View, { style: thresholdLineStyle, testID: "intensity-threshold" })
+              zone.over !== 0 && /* @__PURE__ */ jsx(reactNative.View, { style: bulgeStyle, testID: "intensity-bulge" }),
+              threshold != null && /* @__PURE__ */ jsx(reactNative.View, { style: targetLineStyle, testID: "intensity-target" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 8,
+              color: LABEL_COLOR,
+              fontFamily: '"Nunito Sans", sans-serif',
+              marginTop: 6
+            },
+            accessibilityElementsHidden: true,
+            testID: "intensity-label",
+            children: [
+              pct,
+              "%"
             ]
           }
         ),
@@ -7647,7 +7998,7 @@ function IntensityBar({
               fontWeight: "500",
               color: LABEL_COLOR,
               fontFamily: "Inter, sans-serif",
-              marginTop: 6
+              marginTop: 2
             },
             accessibilityElementsHidden: true,
             testID: "intensity-threshold-label",
@@ -7811,6 +8162,13 @@ function WorkoutPill({
   return pill;
 }
 var VEL_COLORS = WORKOUT_TOKENS.scale;
+var zoneIdToScaleToken = {
+  speed: "green",
+  power: "yellow",
+  strengthSpeed: "orange",
+  maximalStrength: "red",
+  grinding: "red"
+};
 function getVelocityZoneColor(velocity) {
   if (velocity >= 1) return "vel-green";
   if (velocity >= 0.75) return "vel-yellow";
@@ -7823,47 +8181,62 @@ function getVelocityZoneName(velocity) {
   if (velocity >= 0.5) return "Strength-Speed";
   return "Strength";
 }
+var zoneHexMap = {
+  "vel-green": VEL_COLORS.green,
+  "vel-yellow": VEL_COLORS.yellow,
+  "vel-orange": VEL_COLORS.orange,
+  "vel-red": VEL_COLORS.red
+};
 function calculateVelocityLoss(velocities) {
   if (velocities.length < 2) return 0;
-  const first = velocities[0];
+  const best = Math.max(...velocities);
+  if (best <= 0) return 0;
   const last = velocities[velocities.length - 1];
-  if (first === 0) return 0;
-  return Math.round((first - last) / first * 100);
+  return Math.max(0, Math.round((best - last) / best * 100));
 }
 function calculateMeanVelocity(velocities) {
   if (velocities.length === 0) return 0;
   const sum = velocities.reduce((acc, v) => acc + v, 0);
   return sum / velocities.length;
 }
-function getBarColor(zone) {
-  switch (zone) {
-    case "vel-green":
-      return VEL_COLORS.green;
-    case "vel-yellow":
-      return VEL_COLORS.yellow;
-    case "vel-orange":
-      return VEL_COLORS.orange;
-    case "vel-red":
-      return VEL_COLORS.red;
-    default:
-      return VEL_COLORS.green;
+function classifyBand(velocity, bands) {
+  for (const band of bands) {
+    if (band.max === null || velocity < band.max) return band;
   }
+  return bands[bands.length - 1];
+}
+function bandColor(band) {
+  const token = zoneIdToScaleToken[band.id];
+  return token ? VEL_COLORS[token] : VEL_COLORS.green;
 }
-var zoneHexMap = {
-  "vel-green": VEL_COLORS.green,
-  "vel-yellow": VEL_COLORS.yellow,
-  "vel-orange": VEL_COLORS.orange,
-  "vel-red": VEL_COLORS.red
-};
 function getLossStyle(loss) {
   if (loss > 25) return { color: VEL_COLORS.red };
   if (loss > 20) return { color: VEL_COLORS.orange };
   return null;
 }
+function getReducedMotionPreference() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React24.useState(getReducedMotionPreference);
+  React24.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = () => setReduced(mq.matches);
+    handler();
+    mq.addEventListener?.("change", handler);
+    return () => mq.removeEventListener?.("change", handler);
+  }, []);
+  return reduced;
+}
 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,
@@ -7875,10 +8248,48 @@ function VelocityStrip({
   const maxVelocity = Math.max(...velocities, 0);
   const meanVelocity = calculateMeanVelocity(velocities);
   const loss = calculateVelocityLoss(velocities);
-  const meanZone = getVelocityZoneName(meanVelocity);
+  const hasZones = zones != null && zones.length > 0;
+  const barColorFor = (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
+  const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
+  const prefersReducedMotion = usePrefersReducedMotion();
   const [heightAnim] = React24.useState(() => new reactNative.Animated.Value(expanded ? 60 : 3));
   const [labelOpacity] = React24.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
   const [infoOpacity] = React24.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const [liveScale] = React24.useState(() => new reactNative.Animated.Value(1));
+  const liveVelocity = liveRepIndex != null ? velocities[liveRepIndex] : void 0;
+  const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
+  React24.useEffect(() => {
+    if (variant === "mini" || 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, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
   React24.useEffect(() => {
     if (variant === "mini") return;
     reactNative.Animated.parallel([
@@ -7918,7 +8329,7 @@ function VelocityStrip({
           {
             style: {
               flex: 1,
-              backgroundColor: getBarColor(getVelocityZoneColor(v)),
+              backgroundColor: barColorFor(v),
               borderRadius: 1,
               minWidth: 4,
               height: "100%"
@@ -7937,7 +8348,7 @@ function VelocityStrip({
   const stripContent = /* @__PURE__ */ jsxs(
     reactNative.Animated.View,
     {
-      className,
+      className: [className, expanded ? "bg-surface-raised" : "bg-transparent"].filter(Boolean).join(" "),
       style: [
         {
           height: heightAnim,
@@ -7948,7 +8359,6 @@ function VelocityStrip({
           paddingBottom: expanded ? 24 : 0,
           paddingHorizontal: expanded ? 6 : 0,
           paddingVertical: expanded ? void 0 : 8,
-          backgroundColor: expanded ? "var(--color-surface-raised)" : "transparent",
           overflow: expanded ? "visible" : "hidden"
         }
       ],
@@ -7962,9 +8372,36 @@ function VelocityStrip({
           {
             style: { flexDirection: "row", flex: 1, gap: 2, alignItems: "flex-end" },
             children: velocities.map((v, i) => {
-              const zone = getVelocityZoneColor(v);
+              const barBackground = barColorFor(v);
               const barHeightPct = maxVelocity > 0 ? Math.round(v / (maxVelocity * 1.15) * 100) : 0;
-              const bar = /* @__PURE__ */ jsxs(
+              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" },
@@ -7972,27 +8409,13 @@ function VelocityStrip({
                     expanded && /* @__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,
                       {
-                        style: { fontSize: 8, fontWeight: "600", color: "var(--color-text-secondary)" },
+                        className: "text-text-secondary",
+                        style: { fontSize: 8, fontWeight: "600" },
                         testID: `velocity-label-${i}`,
                         children: formatVelocity(v)
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(
-                      reactNative.View,
-                      {
-                        style: expanded ? { height: `${barHeightPct}%`, minHeight: 2, borderTopLeftRadius: 2, borderTopRightRadius: 2, backgroundColor: zoneHexMap[zone] } : {
-                          minHeight: "100%",
-                          borderTopLeftRadius: 2,
-                          borderTopRightRadius: 2,
-                          borderBottomLeftRadius: 0,
-                          borderBottomRightRadius: 0,
-                          backgroundColor: zoneHexMap[zone]
-                        },
-                        testID: `velocity-bar-${i}`,
-                        accessibilityRole: "image",
-                        accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
-                      }
-                    )
+                    barInner
                   ]
                 },
                 i
@@ -8032,9 +8455,9 @@ function VelocityStrip({
               /* @__PURE__ */ jsxs(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
-                    color: "var(--color-text-secondary)",
                     fontFamily: "Inter, sans-serif"
                   },
                   children: [
@@ -8050,9 +8473,9 @@ function VelocityStrip({
               /* @__PURE__ */ jsxs(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
-                    color: "var(--color-text-secondary)",
                     fontFamily: "Inter, sans-serif",
                     ...getLossStyle(loss)
                   },
@@ -8102,16 +8525,14 @@ function MuscleGroupChip({
   const content = /* @__PURE__ */ jsxs(
     reactNative.View,
     {
-      className,
+      className: ["bg-surface-raised border-border", className].filter(Boolean).join(" "),
       style: {
         flexDirection: "row",
         alignItems: "center",
         borderRadius: 9999,
         paddingHorizontal: 9,
         paddingVertical: 3,
-        backgroundColor: "var(--color-surface-raised)",
-        borderWidth: 1,
-        borderColor: "var(--color-border-default)"
+        borderWidth: 1
       },
       accessibilityLabel: onPress ? void 0 : `${name}, volume status: ${statusLabel}`,
       testID: "muscle-group-chip",
@@ -8135,11 +8556,11 @@ function MuscleGroupChip({
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-secondary",
             style: {
               fontFamily: "Inter, sans-serif",
               fontWeight: "500",
-              fontSize: 11,
-              color: "var(--color-text-secondary)"
+              fontSize: 11
             },
             accessibilityElementsHidden: true,
             children: name
@@ -8327,6 +8748,8 @@ function SetRow({
   rpe,
   unit,
   velocities,
+  velocityZones,
+  velocityLiveRepIndex,
   velocityExpanded,
   onVelocityToggle,
   setType,
@@ -8389,11 +8812,11 @@ function SetRow({
             ) : /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   fontSize: 13,
                   fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  color: "var(--color-text-secondary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: setNumber
               }
@@ -8408,10 +8831,10 @@ function SetRow({
             children: /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   fontSize: 12,
-                  fontFamily: "Inter, sans-serif",
-                  color: "var(--color-text-secondary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: previous ? `${previous.reps} x ${roundWeight(previous.weight)}` : "\u2014"
               }
@@ -8426,11 +8849,11 @@ function SetRow({
             children: isActive && reps == null && targets ? /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-tertiary",
                 style: {
                   fontSize: 13,
                   fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif",
-                  color: "var(--color-text-tertiary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "set-row-target-reps",
                 children: targets.reps
@@ -8438,11 +8861,11 @@ function SetRow({
             ) : /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: reps != null ? "text-text-primary" : "text-text-tertiary",
                 style: {
                   fontSize: 14,
                   fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  color: reps != null ? "var(--color-text-primary)" : "var(--color-text-tertiary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: reps != null ? reps : "\u2014"
               }
@@ -8457,11 +8880,11 @@ function SetRow({
             children: isActive && weight == null && targets ? /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-tertiary",
                 style: {
                   fontSize: 13,
                   fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif",
-                  color: "var(--color-text-tertiary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "set-row-target-weight",
                 children: roundWeight(targets.weight)
@@ -8469,11 +8892,11 @@ function SetRow({
             ) : /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: weight != null ? "text-text-primary" : "text-text-tertiary",
                 style: {
                   fontSize: 14,
                   fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  color: weight != null ? "var(--color-text-primary)" : "var(--color-text-tertiary)"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: weight != null ? roundWeight(weight) : "\u2014"
               }
@@ -8488,11 +8911,14 @@ function SetRow({
             children: /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: rpe != null ? void 0 : "text-text-tertiary",
                 style: {
                   fontSize: 13,
                   fontWeight: "600",
                   fontFamily: "Inter, sans-serif",
-                  color: rpe != null ? rpeColor(rpe) : "var(--color-text-tertiary)"
+                  // 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"
               }
@@ -8526,6 +8952,8 @@ function SetRow({
               VelocityStrip,
               {
                 velocities,
+                zones: velocityZones,
+                liveRepIndex: velocityLiveRepIndex,
                 expanded: velocityExpanded,
                 onToggle: onVelocityToggle,
                 variant: onVelocityToggle ? "full" : "mini"
@@ -8538,18 +8966,14 @@ function SetRow({
   );
 }
 var BRAND_PRIMARY2 = "#FF7900";
-var TEXT_PRIMARY = "var(--color-text-primary)";
-var TEXT_TERTIARY2 = "var(--color-text-tertiary)";
+var INPUT_CLASSNAME = "bg-surface-raised border-border-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
   fontWeight: "600",
   fontFamily: "Inter, sans-serif",
-  backgroundColor: "var(--color-surface-raised)",
   borderWidth: 1,
-  borderColor: "var(--color-border-strong)",
   borderRadius: 6,
   textAlign: "center",
-  color: TEXT_PRIMARY,
   paddingVertical: 5,
   paddingHorizontal: 2
 };
@@ -8571,11 +8995,11 @@ function InputBar({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-elevated",
       style: {
         width: "100%",
-        backgroundColor: "var(--color-surface-elevated)",
         borderTopWidth: 1,
-        borderTopColor: "var(--color-border-default)",
+        borderTopColor: resolveColor("border-default"),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -8590,11 +9014,11 @@ function InputBar({
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-primary",
               style: {
                 fontSize: 12,
                 fontWeight: "700",
-                fontFamily: '"Space Grotesk", sans-serif',
-                color: TEXT_PRIMARY
+                fontFamily: '"Space Grotesk", sans-serif'
               },
               testID: "input-bar-exercise-name",
               numberOfLines: 1,
@@ -8604,10 +9028,10 @@ function InputBar({
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 fontSize: 10,
-                fontFamily: "Inter, sans-serif",
-                color: TEXT_TERTIARY2
+                fontFamily: "Inter, sans-serif"
               },
               testID: "input-bar-set-info",
               children: setLabel
@@ -8620,6 +9044,7 @@ function InputBar({
             {
               value: reps,
               onChangeText: onRepsChange,
+              className: INPUT_CLASSNAME,
               style: { ...inputStyle, width: 36 },
               accessibilityLabel: "Reps",
               testID: "input-bar-reps",
@@ -8629,10 +9054,10 @@ function InputBar({
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 fontSize: 12,
-                fontFamily: "Inter, sans-serif",
-                color: TEXT_TERTIARY2
+                fontFamily: "Inter, sans-serif"
               },
               children: "\xD7"
             }
@@ -8642,6 +9067,7 @@ function InputBar({
             {
               value: weight,
               onChangeText: onWeightChange,
+              className: INPUT_CLASSNAME,
               style: { ...inputStyle, width: 52 },
               accessibilityLabel: `Weight in ${unit}`,
               testID: "input-bar-weight",
@@ -8651,11 +9077,11 @@ function InputBar({
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 fontSize: 12,
                 fontWeight: "500",
-                fontFamily: "Inter, sans-serif",
-                color: TEXT_TERTIARY2
+                fontFamily: "Inter, sans-serif"
               },
               testID: "input-bar-unit",
               children: unit
@@ -8702,7 +9128,8 @@ function RestTimer({
   onSkip,
   onAddTime,
   nextSetInfo,
-  visible
+  visible,
+  displayOnly = false
 }) {
   if (!visible) return null;
   const remainingMs = Math.max(0, totalSeconds * 1e3 - elapsedMs);
@@ -8715,11 +9142,11 @@ function RestTimer({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-raised",
       style: {
         width: "100%",
-        backgroundColor: "var(--color-surface-raised)",
         borderTopWidth: 1,
-        borderTopColor: "var(--color-border-default)",
+        borderTopColor: resolveColor("border-default"),
         paddingVertical: 12,
         paddingHorizontal: 16
       },
@@ -8741,13 +9168,13 @@ function RestTimer({
                 /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-secondary",
                     style: {
                       fontSize: 11,
                       fontFamily: "Inter, sans-serif",
                       fontWeight: "600",
                       textTransform: "uppercase",
-                      letterSpacing: 1,
-                      color: "var(--color-text-secondary)"
+                      letterSpacing: 1
                     },
                     testID: "rest-timer-label",
                     children: "REST"
@@ -8756,10 +9183,10 @@ function RestTimer({
                 nextSetInfo != null && /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       fontSize: 11,
                       fontFamily: "Inter, sans-serif",
-                      color: "var(--color-text-tertiary)",
                       marginTop: 2
                     },
                     testID: "rest-timer-next-set",
@@ -8770,11 +9197,11 @@ function RestTimer({
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-primary",
                   style: {
                     fontSize: 28,
                     fontFamily: '"Space Grotesk", sans-serif',
                     fontWeight: "700",
-                    color: "var(--color-text-primary)",
                     fontVariant: ["tabular-nums"],
                     letterSpacing: -0.5
                   },
@@ -8788,9 +9215,9 @@ function RestTimer({
         /* @__PURE__ */ jsx(
           reactNative.View,
           {
+            className: "bg-border",
             style: {
               height: 3,
-              backgroundColor: "var(--color-border-default)",
               borderRadius: 2,
               marginBottom: 12
             },
@@ -8809,7 +9236,7 @@ function RestTimer({
             )
           }
         ),
-        /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", gap: 8 }, children: [
+        !displayOnly && /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", gap: 8 }, children: [
           /* @__PURE__ */ jsx(
             reactNative.Pressable,
             {
@@ -8826,11 +9253,11 @@ function RestTimer({
               children: /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
-                    fontWeight: "600",
-                    color: "var(--color-text-secondary)"
+                    fontWeight: "600"
                   },
                   children: "+30s"
                 }
@@ -8869,19 +9296,6 @@ function RestTimer({
     }
   );
 }
-var COLORS = {
-  // Theme-aware tokens: text foregrounds and this card's own surfaces/borders
-  // must flip together so text stays readable in both light and dark. The
-  // expanded/pressed surfaces are self-owned here (not from a themed Card), so
-  // hardcoding dark values would leave dark-on-dark once the text flips.
-  // react-native-web passes the CSS var through to the inline style.
-  textPrimary: "var(--color-text-primary)",
-  textSecondary: "var(--color-text-secondary)",
-  textTertiary: "var(--color-text-tertiary)",
-  surfaceRaised: "var(--color-surface-raised)",
-  surfaceElevated: "var(--color-surface-elevated)",
-  borderDefault: "var(--color-border-default)"
-};
 function buildColumnHeaders(unit) {
   return ["SET", "PREV", "REPS", unit.toUpperCase(), "RPE"];
 }
@@ -8939,6 +9353,7 @@ function CollapsedCard({
   e1rm,
   isPR,
   setVelocities,
+  velocityZones,
   totalPlannedSets,
   supersetPosition
 }) {
@@ -8959,11 +9374,11 @@ function CollapsedCard({
       children: /* @__PURE__ */ jsxs(
         reactNative.View,
         {
+          className: pressed ? "bg-surface-raised" : void 0,
           style: {
             padding: 12,
             paddingHorizontal: 14,
             cursor: "pointer",
-            backgroundColor: pressed ? COLORS.surfaceRaised : "transparent",
             ...borderRadius,
             ...supersetMargin
           },
@@ -8977,11 +9392,11 @@ function CollapsedCard({
                   /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-primary",
                       style: {
                         fontSize: 14,
                         fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700",
-                        color: COLORS.textPrimary
+                        fontWeight: "700"
                       },
                       testID: "exercise-card-name",
                       children: name
@@ -8991,10 +9406,10 @@ function CollapsedCard({
                   summary && /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-secondary",
                       style: {
                         fontSize: 12,
                         fontFamily: "Inter, sans-serif",
-                        color: COLORS.textSecondary,
                         marginRight: 8
                       },
                       testID: "exercise-card-summary",
@@ -9026,6 +9441,7 @@ function CollapsedCard({
                     VelocityStrip,
                     {
                       velocities,
+                      zones: velocityZones,
                       variant: "mini",
                       testID: `exercise-card-velocity-strip-${i}`
                     },
@@ -9064,10 +9480,9 @@ function ExpandedCard({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-elevated border-border",
       style: {
-        backgroundColor: COLORS.surfaceElevated,
         borderWidth: 1,
-        borderColor: COLORS.borderDefault,
         ...borderRadius,
         ...supersetMargin
       },
@@ -9090,17 +9505,17 @@ function ExpandedCard({
                   paddingHorizontal: 14,
                   paddingBottom: 10,
                   borderBottomWidth: 1,
-                  borderBottomColor: COLORS.borderDefault
+                  borderBottomColor: resolveColor("border-default")
                 },
                 children: [
                   /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-primary",
                       style: {
                         fontSize: 14,
                         fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700",
-                        color: COLORS.textPrimary
+                        fontWeight: "700"
                       },
                       testID: "exercise-card-name",
                       children: name
@@ -9110,10 +9525,10 @@ function ExpandedCard({
                   summary && /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-secondary",
                       style: {
                         fontSize: 12,
                         fontFamily: "Inter, sans-serif",
-                        color: COLORS.textSecondary,
                         marginRight: 8
                       },
                       testID: "exercise-card-summary",
@@ -9164,13 +9579,13 @@ function ExpandedCard({
                   children: /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-tertiary",
                       style: {
                         fontSize: 10,
                         fontWeight: "600",
                         fontFamily: "Inter, sans-serif",
                         textTransform: "uppercase",
-                        letterSpacing: 0.8,
-                        color: COLORS.textTertiary
+                        letterSpacing: 0.8
                       },
                       children: header
                     }
@@ -9210,11 +9625,11 @@ function UpcomingCard({
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-primary",
             style: {
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: COLORS.textPrimary
+              fontWeight: "700"
             },
             testID: "exercise-card-name",
             children: name
@@ -9223,10 +9638,10 @@ function UpcomingCard({
         prescription && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-secondary",
             style: {
               fontSize: 12,
               fontFamily: "Inter, sans-serif",
-              color: COLORS.textSecondary,
               marginLeft: 8
             },
             testID: "exercise-card-prescription",
@@ -9237,10 +9652,10 @@ function UpcomingCard({
         previousBest && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               fontSize: 11,
-              fontFamily: "Inter, sans-serif",
-              color: COLORS.textTertiary
+              fontFamily: "Inter, sans-serif"
             },
             testID: "exercise-card-previous-best",
             children: previousBest
@@ -9478,11 +9893,12 @@ function WeekRow({
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: isCurrent ? void 0 : "text-text-primary",
                   style: {
                     fontSize: 13,
                     fontWeight: "700",
                     fontFamily: "Inter, sans-serif",
-                    color: isCurrent ? BRAND_PRIMARY5 : "var(--color-text-primary)"
+                    color: isCurrent ? BRAND_PRIMARY5 : void 0
                   },
                   accessibilityElementsHidden: true,
                   children: `W${weekNumber}`
@@ -9521,21 +9937,16 @@ function WeekRow({
     }
   );
 }
-var COLORS2 = {
-  // Theme-aware foregrounds: resolve to a readable color in both light and dark
-  // (react-native-web passes the CSS var through to the inline style).
-  textPrimary: "var(--color-text-primary)",
-  textSecondary: "var(--color-text-secondary)",
-  textTertiary: "var(--color-text-tertiary)",
+var COLORS = {
   statusSuccess: "#14B8A6",
   brandPrimary: "#FF7900",
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
 var statusBorderColors = {
-  completed: COLORS2.statusSuccess,
-  today: COLORS2.brandPrimary,
-  upcoming: COLORS2.borderDefault
+  completed: COLORS.statusSuccess,
+  today: COLORS.brandPrimary,
+  upcoming: COLORS.borderDefault
 };
 var volumeStatusMap = {
   under: "behind",
@@ -9572,11 +9983,11 @@ function WorkoutCard({
       /* @__PURE__ */ jsx(
         reactNative.Text,
         {
+          className: "text-text-primary",
           style: {
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: "700",
-            color: COLORS2.textPrimary
+            fontWeight: "700"
           },
           testID: "workout-card-name",
           children: name
@@ -9586,10 +9997,10 @@ function WorkoutCard({
       /* @__PURE__ */ jsx(
         reactNative.Text,
         {
+          className: "text-text-tertiary",
           style: {
             fontSize: 11,
-            fontFamily: "Inter, sans-serif",
-            color: COLORS2.textTertiary
+            fontFamily: "Inter, sans-serif"
           },
           testID: "workout-card-date",
           children: date
@@ -9599,11 +10010,11 @@ function WorkoutCard({
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-secondary",
         style: {
           marginTop: 4,
           fontSize: 12,
-          fontFamily: "Inter, sans-serif",
-          color: COLORS2.textSecondary
+          fontFamily: "Inter, sans-serif"
         },
         testID: "workout-card-stats",
         children: formatStats(totalSets, totalVolume, unit, duration)
@@ -9634,7 +10045,7 @@ function WorkoutCard({
       variant: "accent",
       elevation: 1,
       accentColor: statusBorderColors[status],
-      bgColor: isToday ? COLORS2.brandPrimarySubtle : void 0,
+      bgColor: isToday ? COLORS.brandPrimarySubtle : void 0,
       className,
       style: isUpcoming ? { opacity: 0.6 } : void 0,
       testID: "workout-card",
@@ -9674,8 +10085,6 @@ var BRAND_PRIMARY6 = "#FF7900";
 var BRAND_PRIMARY_DARK = "#C45E00";
 var BRAND_PRIMARY_LIGHT = "#FFB066";
 var BORDER_DEFAULT = "#1F1F1F";
-var TEXT_PRIMARY2 = "var(--color-text-primary)";
-var TEXT_SECONDARY = "var(--color-text-secondary)";
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY6, BRAND_PRIMARY_LIGHT];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
@@ -9718,11 +10127,11 @@ function MesoCard({
       /* @__PURE__ */ jsx(
         reactNative.Text,
         {
+          className: "text-text-primary",
           style: {
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: "700",
-            color: TEXT_PRIMARY2
+            fontWeight: "700"
           },
           testID: "meso-card-name",
           children: name
@@ -9733,11 +10142,11 @@ function MesoCard({
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-secondary",
         style: {
           marginTop: 4,
           fontSize: 12,
-          fontFamily: "Inter, sans-serif",
-          color: TEXT_SECONDARY
+          fontFamily: "Inter, sans-serif"
         },
         testID: "meso-card-subheader",
         children: `${split} \xB7 ${weekRange}`
@@ -9831,11 +10240,7 @@ function MesoCard({
 var BRAND_PRIMARY7 = "#FF7900";
 var RECENT_BORDER = "rgba(255,176,32,0.3)";
 var RECENT_GLOW = "0 0 12px rgba(255,176,32,0.06)";
-var SURFACE_RAISED = "var(--color-surface-raised)";
-var BORDER_DEFAULT2 = "var(--color-border-default)";
-var TEXT_PRIMARY3 = "var(--color-text-primary)";
-var TEXT_SECONDARY2 = "var(--color-text-secondary)";
-var TEXT_TERTIARY3 = "var(--color-text-tertiary)";
+var BORDER_DEFAULT2 = resolveColor("border-default");
 var TYPE_LABELS = {
   e1rm: "e1RM",
   weight: "Weight",
@@ -9861,30 +10266,29 @@ function PrRecordRow({ record, index }) {
     {
       accessibilityRole: "text",
       accessibilityLabel: a11yLabel,
-      className: "flex-row items-center",
+      className: "flex-row items-center bg-surface-raised",
       style: {
         gap: 10,
         paddingVertical: 10,
         paddingHorizontal: 12,
         marginBottom: 8,
         borderRadius: 8,
-        backgroundColor: SURFACE_RAISED,
         borderWidth: 1,
         borderColor: record.isRecent ? RECENT_BORDER : BORDER_DEFAULT2,
         ...record.isRecent ? { boxShadow: RECENT_GLOW } : {}
       },
       testID: `pr-history-modal-record-${index}`,
       children: [
-        /* @__PURE__ */ jsx(lucideReact.Star, { size: 16, color: BRAND_PRIMARY7, fill: BRAND_PRIMARY7, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx(StarIcon, { size: 16, color: BRAND_PRIMARY7, fill: BRAND_PRIMARY7, strokeWidth: 2 }),
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-secondary",
             style: {
               flex: 1,
               fontSize: 13,
               fontFamily: "Inter, sans-serif",
-              fontWeight: "600",
-              color: TEXT_SECONDARY2
+              fontWeight: "600"
             },
             testID: `pr-history-modal-record-${index}-type`,
             children: label
@@ -9893,11 +10297,11 @@ function PrRecordRow({ record, index }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-primary",
             style: {
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: TEXT_PRIMARY3
+              fontWeight: "700"
             },
             testID: `pr-history-modal-record-${index}-value`,
             children: valueText
@@ -9906,12 +10310,12 @@ function PrRecordRow({ record, index }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               minWidth: 64,
               textAlign: "right",
               fontSize: 11,
-              fontFamily: "Inter, sans-serif",
-              color: TEXT_TERTIARY3
+              fontFamily: "Inter, sans-serif"
             },
             testID: `pr-history-modal-record-${index}-date`,
             children: record.date
@@ -9949,13 +10353,13 @@ function PrHistoryModal({
           reactNative.View,
           {
             accessibilityElementsHidden: true,
+            className: "bg-border",
             style: {
               alignSelf: "center",
               width: 40,
               height: 4,
               borderRadius: 2,
-              marginTop: 8,
-              backgroundColor: BORDER_DEFAULT2
+              marginTop: 8
             },
             testID: "pr-history-modal-handle"
           }
@@ -9971,11 +10375,11 @@ function PrHistoryModal({
                 reactNative.Text,
                 {
                   accessibilityRole: "header",
+                  className: "text-text-primary",
                   style: {
                     fontSize: 16,
                     fontFamily: '"Space Grotesk", sans-serif',
-                    fontWeight: "700",
-                    color: TEXT_PRIMARY3
+                    fontWeight: "700"
                   },
                   testID: "pr-history-modal-title",
                   children: dialogLabel
@@ -9990,7 +10394,7 @@ function PrHistoryModal({
                   hitSlop: 8,
                   style: { padding: 4, margin: -4 },
                   testID: "pr-history-modal-close",
-                  children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY2 }, children: "\xD7" })
+                  children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 22, lineHeight: 22 }, children: "\xD7" })
                 }
               )
             ]
@@ -9999,11 +10403,11 @@ function PrHistoryModal({
         /* @__PURE__ */ jsx(DrawerBody, { className: "px-4 pt-0 pb-4", children: records.length === 0 ? /* @__PURE__ */ jsx(reactNative.View, { style: { paddingVertical: 24 }, testID: "pr-history-modal-empty", children: /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-tertiary",
             style: {
               textAlign: "center",
               fontSize: 13,
-              fontFamily: "Inter, sans-serif",
-              color: TEXT_TERTIARY3
+              fontFamily: "Inter, sans-serif"
             },
             children: "No personal records yet"
           }
@@ -10023,9 +10427,7 @@ var BRAND_PRIMARY8 = "#FF7900";
 var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
 var STATUS_SUCCESS = "#14B8A6";
 var STATUS_WARNING = "#FFB020";
-var STATUS_ERROR = "#D14343";
-var TEXT_PRIMARY4 = "var(--color-text-primary)";
-var TEXT_SECONDARY3 = "var(--color-text-secondary)";
+var STATUS_ERROR2 = "#D14343";
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -10034,7 +10436,7 @@ var EMOJI_SETS = {
 };
 var DEFAULT_EMOJI_SET = ["\u{1F61E}", "\u{1F615}", "\u{1F610}", "\u{1F642}", "\u{1F604}"];
 function scoreColor(score) {
-  if (score < 40) return STATUS_ERROR;
+  if (score < 40) return STATUS_ERROR2;
   if (score < 70) return STATUS_WARNING;
   return STATUS_SUCCESS;
 }
@@ -10057,7 +10459,8 @@ function EmojiSlider({ factor }) {
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
-        style: { fontSize: 12, fontWeight: "500", fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY3 },
+        className: "text-text-secondary",
+        style: { fontSize: 12, fontWeight: "500", fontFamily: "Inter, sans-serif" },
         testID: "readiness-check-factor-label",
         children: factor.label
       }
@@ -10081,14 +10484,15 @@ function EmojiSlider({ factor }) {
               accessibilityLabel: `${factor.label} level ${level} of 5`,
               "aria-checked": selected,
               testID: "readiness-check-emoji",
+              className: selected ? void 0 : "border-border bg-surface-raised",
               style: ({ pressed }) => ({
                 flex: 1,
                 alignItems: "center",
                 paddingVertical: 8,
                 borderRadius: 8,
                 borderWidth: 1,
-                borderColor: selected ? BRAND_PRIMARY8 : "var(--color-border-default)",
-                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : "var(--color-surface-raised)",
+                borderColor: selected ? BRAND_PRIMARY8 : void 0,
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : void 0,
                 opacity: selected ? 1 : pressed ? 0.8 : 0.55,
                 transform: [{ scale: selected ? 1.06 : 1 }]
               }),
@@ -10109,13 +10513,13 @@ function ScoreGauge({ score }) {
       accessibilityRole: "image",
       accessibilityLabel: `Readiness score: ${score} out of 100`,
       testID: "readiness-check-score",
+      className: "bg-surface-raised",
       style: {
         width: 60,
         height: 60,
         borderRadius: 30,
         borderWidth: 4,
         borderColor: color,
-        backgroundColor: "var(--color-surface-raised)",
         alignItems: "center",
         justifyContent: "center"
       },
@@ -10135,13 +10539,12 @@ function WarmUpCard({ validation }) {
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "border-border bg-surface-raised",
       style: {
         marginTop: 16,
         padding: 12,
         borderRadius: 8,
-        borderWidth: 1,
-        borderColor: "var(--color-border-default)",
-        backgroundColor: "var(--color-surface-raised)"
+        borderWidth: 1
       },
       testID: "readiness-check-warmup",
       children: [
@@ -10149,7 +10552,8 @@ function WarmUpCard({ validation }) {
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
-              style: { fontSize: 12, fontWeight: "600", fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY3 },
+              className: "text-text-secondary",
+              style: { fontSize: 12, fontWeight: "600", fontFamily: "Inter, sans-serif" },
               testID: "readiness-check-warmup-deficit",
               children: velocityDeficitText(validation.velocityDeficit)
             }
@@ -10159,7 +10563,8 @@ function WarmUpCard({ validation }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
-            style: { marginTop: 6, fontSize: 13, fontFamily: "Inter, sans-serif", color: TEXT_PRIMARY4 },
+            className: "text-text-primary",
+            style: { marginTop: 6, fontSize: 13, fontFamily: "Inter, sans-serif" },
             testID: "readiness-check-warmup-recommendation",
             children: validation.recommendation
           }
@@ -10181,7 +10586,8 @@ function ReadinessCheck({
       /* @__PURE__ */ jsx(
         reactNative.Text,
         {
-          style: { fontSize: 18, fontWeight: "700", fontFamily: '"Space Grotesk", sans-serif', color: TEXT_PRIMARY4 },
+          className: "text-text-primary",
+          style: { fontSize: 18, fontWeight: "700", fontFamily: '"Space Grotesk", sans-serif' },
           testID: "readiness-check-title",
           children: "How are you feeling?"
         }
@@ -10214,21 +10620,18 @@ function ReadinessCheck({
 var BRAND_PRIMARY9 = "#FF7900";
 var BRAND_PRIMARY_DARK2 = "#C45E00";
 var BRAND_PRIMARY_LIGHT2 = "#FFB066";
-var TEXT_PRIMARY5 = "var(--color-text-primary)";
-var TEXT_SECONDARY4 = "var(--color-text-secondary)";
-var TEXT_TERTIARY4 = "var(--color-text-tertiary)";
 var SUCCESS = "#14B8A6";
 var WARNING = "#FFB020";
 var ERROR = "#D14343";
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY9, BRAND_PRIMARY_LIGHT2];
-var CARD_GRADIENT = "linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-surface-raised) 100%)";
+var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)";
 var STATUS_VARIANTS = {
   success: { bg: "rgba(20,184,166,0.15)", border: "rgba(20,184,166,0.3)", text: SUCCESS },
   warning: { bg: "rgba(255,176,32,0.15)", border: "rgba(255,176,32,0.3)", text: WARNING },
   error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
 };
-function clamp012(value) {
+function clamp01(value) {
   if (!Number.isFinite(value)) return 0;
   if (value < 0) return 0;
   if (value > 1) return 1;
@@ -10248,7 +10651,8 @@ function renderCoachingText(text, highlights) {
     (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(
       reactNative.Text,
       {
-        style: { fontWeight: "700", color: TEXT_PRIMARY5 },
+        className: "text-text-primary",
+        style: { fontWeight: "700" },
         children: part
       },
       `${part}-${index}`
@@ -10295,13 +10699,13 @@ function MetricCell({ metric }) {
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-tertiary",
         style: {
           fontSize: 10,
           fontFamily: "Inter, sans-serif",
           fontWeight: "600",
           letterSpacing: 0.5,
-          textTransform: "uppercase",
-          color: TEXT_TERTIARY4
+          textTransform: "uppercase"
         },
         children: metric.label
       }
@@ -10309,12 +10713,12 @@ function MetricCell({ metric }) {
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-primary",
         style: {
           marginTop: 2,
           fontSize: 13,
           fontFamily: "Inter, sans-serif",
-          fontWeight: "600",
-          color: TEXT_PRIMARY5
+          fontWeight: "600"
         },
         children: metric.value
       }
@@ -10322,7 +10726,7 @@ function MetricCell({ metric }) {
   ] });
 }
 function Gauge({ gauge }) {
-  const level = clamp012(gauge.level);
+  const level = clamp01(gauge.level);
   const percentage = Math.round(level * 100);
   const markerColor = getGaugeZoneColor(level);
   return /* @__PURE__ */ jsxs(
@@ -10346,13 +10750,13 @@ function Gauge({ gauge }) {
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "500",
                     letterSpacing: 0.5,
-                    textTransform: "uppercase",
-                    color: TEXT_SECONDARY4
+                    textTransform: "uppercase"
                   },
                   children: gauge.label
                 }
@@ -10360,11 +10764,11 @@ function Gauge({ gauge }) {
               gauge.sublabel != null && /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-tertiary",
                   style: {
                     fontSize: 10,
                     fontFamily: "Inter, sans-serif",
-                    fontWeight: "500",
-                    color: TEXT_TERTIARY4
+                    fontWeight: "500"
                   },
                   children: gauge.sublabel
                 }
@@ -10401,6 +10805,7 @@ function Gauge({ gauge }) {
               /* @__PURE__ */ jsx(
                 reactNative.View,
                 {
+                  className: "border-text-primary",
                   style: {
                     position: "absolute",
                     left: `${percentage}%`,
@@ -10410,7 +10815,6 @@ function Gauge({ gauge }) {
                     height: 14,
                     borderRadius: 9999,
                     borderWidth: 2,
-                    borderColor: TEXT_PRIMARY5,
                     backgroundColor: markerColor,
                     boxShadow: "0 0 4px rgba(0,0,0,0.5)"
                   },
@@ -10473,12 +10877,12 @@ function MesoStatusCard({
                   /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-primary",
                       style: {
                         flexShrink: 1,
                         fontSize: 15,
                         fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700",
-                        color: TEXT_PRIMARY5
+                        fontWeight: "700"
                       },
                       testID: "meso-status-card-name",
                       children: mesoName
@@ -10491,11 +10895,11 @@ function MesoStatusCard({
             /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   marginTop: 4,
                   fontSize: 12,
-                  fontFamily: "Inter, sans-serif",
-                  color: TEXT_SECONDARY4
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "meso-status-card-subtitle",
                 children: mesoSubtitle
@@ -10527,11 +10931,11 @@ function MesoStatusCard({
               children: /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 12,
                     lineHeight: 17,
-                    fontFamily: "Inter, sans-serif",
-                    color: TEXT_SECONDARY4
+                    fontFamily: "Inter, sans-serif"
                   },
                   children: renderCoachingText(coaching.text, coaching.highlights)
                 }
@@ -10576,15 +10980,11 @@ function MesoStatusCard({
   );
 }
 var BRAND_PRIMARY10 = "#FF7900";
-var TEXT_PRIMARY6 = "var(--color-text-primary)";
-var TEXT_SECONDARY5 = "var(--color-text-secondary)";
-var TEXT_TERTIARY5 = "var(--color-text-tertiary)";
-var BORDER_STRONG = "var(--color-border-strong)";
+var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
 var STATUS_SUCCESS2 = "#14B8A6";
-var STATUS_ERROR2 = "#D14343";
+var STATUS_ERROR3 = "#D14343";
 var STATUS_WARNING2 = "#FFB020";
 var GRID_LINE = "rgba(255,255,255,0.06)";
-var TOOLTIP_BG = "var(--color-surface-elevated)";
 var SUCCESS_PILL_BG = "rgba(20,184,166,0.10)";
 var SUCCESS_PILL_BORDER = "rgba(20,184,166,0.20)";
 var ERROR_PILL_BG = "rgba(209,67,67,0.10)";
@@ -10592,8 +10992,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t = Date.parse(dateStr);
-  return Number.isNaN(t) ? 0 : t;
+  const t2 = Date.parse(dateStr);
+  return Number.isNaN(t2) ? 0 : t2;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -10765,7 +11165,7 @@ function StrengthTrendChart({
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY5 }, children: "No strength data yet" })
+            children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", style: { fontSize: 12, fontFamily: "Inter, sans-serif" }, children: "No strength data yet" })
           }
         )
       }
@@ -10809,6 +11209,7 @@ function StrengthTrendChart({
                     children: /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
+                        className: "text-text-tertiary",
                         style: {
                           position: "absolute",
                           left: -PLOT_LEFT,
@@ -10816,8 +11217,7 @@ function StrengthTrendChart({
                           width: PLOT_LEFT - 4,
                           textAlign: "right",
                           fontSize: 9,
-                          fontFamily: "Inter, sans-serif",
-                          color: TEXT_TERTIARY5
+                          fontFamily: "Inter, sans-serif"
                         },
                         children: line.label
                       }
@@ -10860,7 +11260,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.projection,
-                          color: TEXT_TERTIARY5,
+                          color: PROJECTION_LINE_COLOR,
                           strokeWidth: 2,
                           dashed: true,
                           testID: "strength-trend-chart-projection-segment"
@@ -10936,6 +11336,7 @@ function StrengthTrendChart({
             {
               testID: "strength-trend-chart-tooltip",
               accessibilityElementsHidden: true,
+              className: "bg-surface-elevated border-border-strong",
               style: {
                 position: "absolute",
                 left: Math.max(
@@ -10944,9 +11345,7 @@ function StrengthTrendChart({
                 ),
                 top: Math.max(0, selectedCoord.y - 52),
                 maxWidth: TOOLTIP_WIDTH,
-                backgroundColor: TOOLTIP_BG,
                 borderWidth: 1,
-                borderColor: BORDER_STRONG,
                 borderRadius: 8,
                 paddingVertical: 8,
                 paddingHorizontal: 10
@@ -10955,10 +11354,10 @@ function StrengthTrendChart({
                 /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       fontSize: 10,
-                      fontFamily: "Inter, sans-serif",
-                      color: TEXT_TERTIARY5
+                      fontFamily: "Inter, sans-serif"
                     },
                     children: selectedCoord.point.sessionLabel ?? selectedCoord.point.date
                   }
@@ -10966,12 +11365,12 @@ function StrengthTrendChart({
                 /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-primary",
                     style: {
                       marginTop: 2,
                       fontSize: 13,
                       fontFamily: "Inter, sans-serif",
-                      fontWeight: "700",
-                      color: TEXT_PRIMARY6
+                      fontWeight: "700"
                     },
                     children: `${formatValue(selectedCoord.point.e1rm)} ${unit}`
                   }
@@ -10983,7 +11382,7 @@ function StrengthTrendChart({
                       marginTop: 1,
                       fontSize: 10,
                       fontFamily: "Inter, sans-serif",
-                      color: selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? STATUS_SUCCESS2 : STATUS_ERROR2
+                      color: selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? STATUS_SUCCESS2 : STATUS_ERROR3
                     },
                     children: `${selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? "+" : "-"}${Math.abs(
                       selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm
@@ -11004,14 +11403,14 @@ function StrengthTrendChart({
               reactNative.Text,
               {
                 testID: "strength-trend-chart-axis-label",
+                className: "text-text-tertiary",
                 style: {
                   position: "absolute",
                   left: boundary.x - 24,
                   width: 48,
                   textAlign: "center",
                   fontSize: 10,
-                  fontFamily: "Inter, sans-serif",
-                  color: TEXT_TERTIARY5
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: boundary.label
               },
@@ -11039,7 +11438,7 @@ function StrengthTrendChart({
                   fontSize: 11,
                   fontFamily: "Inter, sans-serif",
                   fontWeight: "600",
-                  color: trend.positive ? STATUS_SUCCESS2 : STATUS_ERROR2
+                  color: trend.positive ? STATUS_SUCCESS2 : STATUS_ERROR3
                 },
                 children: trendText
               }
@@ -11055,7 +11454,7 @@ function StrengthTrendChart({
             children: [
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
                 /* @__PURE__ */ jsx(reactNative.View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY10 } }),
-                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "Actual" })
+                /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Actual" })
               ] }),
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
                 /* @__PURE__ */ jsx(
@@ -11066,15 +11465,15 @@ function StrengthTrendChart({
                       height: 0,
                       borderTopWidth: 2,
                       borderStyle: "dashed",
-                      borderTopColor: TEXT_TERTIARY5
+                      borderTopColor: PROJECTION_LINE_COLOR
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "Projected" })
+                /* @__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_WARNING2 }, children: "\u2605" }),
-                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "PR" })
+                /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "PR" })
               ] })
             ]
           }
@@ -11087,7 +11486,6 @@ var STATUS_SUCCESS3 = "#14B8A6";
 var STATUS_WARNING3 = "#FFB020";
 var STATUS_INFO = "#2196F3";
 var DOT_BORDER = "#F3F4F6";
-var TEXT_TERTIARY6 = "var(--color-text-tertiary)";
 var BAND_FILL = "rgba(20,184,166,0.1)";
 var BAND_EDGE = "rgba(20,184,166,0.45)";
 var PROJECTION_FILL = "rgba(20,184,166,0.05)";
@@ -11129,8 +11527,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t * (b[key] - a[key]);
+      const t2 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t2 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -11368,6 +11766,7 @@ function CapacityBandChart({
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-tertiary",
                   style: {
                     position: "absolute",
                     left: PADDING_LEFT / 2 - 14,
@@ -11376,7 +11775,6 @@ function CapacityBandChart({
                     textAlign: "center",
                     fontSize: 9,
                     fontFamily: "Inter, sans-serif",
-                    color: TEXT_TERTIARY6,
                     transform: [{ rotate: "-90deg" }]
                   },
                   accessibilityElementsHidden: true,
@@ -11390,6 +11788,7 @@ function CapacityBandChart({
                 return /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       position: "absolute",
                       left: toX(point.date) - 14,
@@ -11397,8 +11796,7 @@ function CapacityBandChart({
                       width: 28,
                       textAlign: "center",
                       fontSize: 10,
-                      fontFamily: "Inter, sans-serif",
-                      color: TEXT_TERTIARY6
+                      fontFamily: "Inter, sans-serif"
                     },
                     accessibilityElementsHidden: true,
                     importantForAccessibility: "no-hide-descendants",
@@ -11460,1196 +11858,176 @@ function CapacityBandChart({
     }
   );
 }
-var SURFACE_ELEVATED = "var(--color-surface-elevated)";
-var BORDER_DEFAULT3 = "var(--color-border-default)";
-var BRAND_PRIMARY11 = "#FF7900";
-var TEXT_PRIMARY7 = "var(--color-text-primary)";
-var TEXT_TERTIARY7 = "var(--color-text-tertiary)";
-var PAGE_BG = "var(--color-background-base)";
-var WORKOUT_PILL_STATUS = {
-  completed: "completed",
-  today: "current",
-  upcoming: "upcoming"
-};
-function deriveNavLevel(selection) {
-  if (selection.workoutId != null) return "workout";
-  if (selection.weekNumber != null) return "week";
-  return "meso";
-}
-function toProgressBarMesos(mesos) {
-  return mesos.map(({ id, name, weekCount, status, currentWeek }) => ({
-    id,
-    name,
-    weekCount,
-    status,
-    currentWeek
-  }));
-}
-function findMeso(mesos, id) {
-  if (id == null) return null;
-  return mesos.find((meso) => meso.id === id) ?? null;
-}
-function findWeek(meso, weekNumber) {
-  if (meso == null || weekNumber == null) return null;
-  return meso.weeks.find((week) => week.weekNumber === weekNumber) ?? null;
-}
-function findWorkout(week, workoutId) {
-  if (week == null || workoutId == null) return null;
-  return week.workouts.find((workout) => workout.id === workoutId) ?? null;
+var PALETTE = [
+  "#5B9BD5",
+  "#14B8A6",
+  "#F4A736",
+  "#F83030",
+  "#823CA0",
+  "#D4A520",
+  "#406D87",
+  "#43C6B7"
+];
+function scaleValue(v, scale) {
+  if (v <= 0) return 0;
+  if (scale === "sqrt") return Math.sqrt(v);
+  if (scale === "log") return Math.log10(v + 1);
+  return v;
 }
-function buildBreadcrumbs(meso, weekNumber, workout) {
-  const crumbs = [{ key: "meso", label: meso.name, level: "meso" }];
-  if (weekNumber != null) {
-    crumbs.push({ key: "week", label: `Week ${weekNumber}`, level: "week" });
-  }
-  if (workout != null) {
-    crumbs.push({ key: "workout", label: workout.name, level: "workout" });
+function worstRatio(row, side) {
+  const sum = row.reduce((s, r) => s + r.area, 0);
+  const thickness = sum / side;
+  let worst = 0;
+  for (const r of row) {
+    const len = r.area / thickness;
+    const ratio = Math.max(thickness / len, len / thickness);
+    if (ratio > worst) worst = ratio;
   }
-  return crumbs;
+  return worst;
 }
-function Breadcrumbs2({ crumbs, onNavigate }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className: "flex-row items-center flex-wrap",
-      style: { gap: 4 },
-      testID: "program-planning-page-breadcrumbs",
-      children: crumbs.map((crumb, index) => {
-        const isLast = index === crumbs.length - 1;
-        return /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 4 }, children: [
-          index > 0 && /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, color: TEXT_TERTIARY7 }, children: "\u203A" }),
-          /* @__PURE__ */ jsx(
-            reactNative.Pressable,
-            {
-              onPress: () => onNavigate(crumb.level),
-              disabled: isLast,
-              accessibilityRole: "button",
-              testID: `program-planning-page-crumb-${crumb.key}`,
-              children: /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  style: {
-                    fontSize: 12,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: isLast ? "700" : "500",
-                    color: isLast ? TEXT_PRIMARY7 : BRAND_PRIMARY11
-                  },
-                  children: crumb.label
-                }
-              )
-            }
-          )
-        ] }, crumb.key);
-      })
+function squarify(data, w, h) {
+  const total = data.reduce((s, d) => s + d.value, 0);
+  if (total <= 0 || w <= 0 || h <= 0) return [];
+  const scaled = data.map((d) => ({ datum: d, area: d.value / total * w * h }));
+  const out = [];
+  let rx = 0;
+  let ry = 0;
+  let rw = w;
+  let rh = h;
+  let i = 0;
+  while (i < scaled.length) {
+    const vertical = rw >= rh;
+    const side = vertical ? rh : rw;
+    let row = [];
+    let bestWorst = Infinity;
+    let j = i;
+    while (j < scaled.length) {
+      const trial = [...row, scaled[j]];
+      const worst = worstRatio(trial, side);
+      if (row.length > 0 && worst > bestWorst) break;
+      row = trial;
+      bestWorst = worst;
+      j++;
     }
-  );
-}
-function toWeekRow(week, meso, onSelectWeek) {
-  const workouts = week.workouts.map((workout) => ({
-    name: workout.name,
-    status: WORKOUT_PILL_STATUS[workout.status],
-    onPress: () => onSelectWeek(week.weekNumber)
-  }));
-  return {
-    weekNumber: week.weekNumber,
-    totalWeeks: meso.weekCount,
-    workouts,
-    intensityLevel: week.intensityLevel,
-    intensityThreshold: week.intensityThreshold,
-    isCurrent: week.isCurrent ?? week.weekNumber === meso.currentWeek,
-    isDeload: week.isDeload
-  };
+    const rowArea = row.reduce((s, r) => s + r.area, 0);
+    const thickness = rowArea / side;
+    let along = vertical ? ry : rx;
+    for (const r of row) {
+      const len = r.area / thickness;
+      out.push(
+        vertical ? { x: rx, y: along, w: thickness, h: len, datum: r.datum } : { x: along, y: ry, w: len, h: thickness, datum: r.datum }
+      );
+      along += len;
+    }
+    if (vertical) {
+      rx += thickness;
+      rw -= thickness;
+    } else {
+      ry += thickness;
+      rh -= thickness;
+    }
+    i = j;
+  }
+  return out;
 }
-function MesoLevel({ mesos, activeMesoId, onSelectMeso, onSelectWeek }) {
-  return /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 12 }, testID: "program-planning-page-meso-level", children: mesos.map((meso) => {
-    const expanded = meso.id === activeMesoId;
+function Treemap({
+  data,
+  width,
+  height,
+  scale = "sqrt",
+  maxTiles = 60,
+  onPress,
+  selectedId,
+  className,
+  ...props
+}) {
+  const clean = data.filter((d) => d.value > 0).sort((a, b) => b.value - a.value).map((d, i) => ({ ...d, color: d.color ?? PALETTE[i % PALETTE.length] }));
+  let tiles = clean;
+  if (clean.length > maxTiles) {
+    const head = clean.slice(0, maxTiles - 1);
+    const restValue = clean.slice(maxTiles - 1).reduce((s, d) => s + d.value, 0);
+    tiles = [
+      ...head,
+      { id: "__more__", value: restValue, color: "#3a3a3a", label: `+${clean.length - (maxTiles - 1)} more` }
+    ];
+  }
+  const weighted = tiles.map((d) => ({ ...d, value: scaleValue(d.value, scale) }));
+  const rects = squarify(weighted, width, height);
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("relative", className), style: { width, height }, ...props, children: rects.map((r) => {
+    const selected = r.datum.id === selectedId;
+    const labelFits = r.w > 54 && r.h > 22;
+    const pressable = r.datum.id !== "__more__";
     return /* @__PURE__ */ jsx(
-      MesoCard,
+      reactNative.Pressable,
       {
-        name: meso.name,
-        goal: meso.goal,
-        split: meso.split,
-        weekRange: meso.weekRange,
-        currentWeek: meso.currentWeek,
-        totalWeeks: meso.weekCount,
-        weeks: expanded ? meso.weeks.map((week) => toWeekRow(week, meso, onSelectWeek)) : [],
-        volumeHeatmap: meso.volumeHeatmap,
-        expanded,
-        onToggle: () => onSelectMeso(meso.id),
-        highlighted: expanded
+        testID: `treemap-tile-${r.datum.id}`,
+        accessibilityLabel: r.datum.label ?? r.datum.id,
+        onPress: pressable ? () => onPress?.(r.datum.id) : void 0,
+        style: {
+          position: "absolute",
+          left: r.x,
+          top: r.y,
+          width: Math.max(0, r.w - 2),
+          height: Math.max(0, r.h - 2),
+          backgroundColor: r.datum.color,
+          borderRadius: 3,
+          opacity: selected ? 1 : 0.9,
+          borderWidth: selected ? 2 : 0,
+          borderColor: "#ffffff",
+          padding: 4,
+          overflow: "hidden"
+        },
+        children: labelFits && /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 2, className: "text-[10px] font-semibold text-[#0b0b0b]", children: r.datum.label ?? r.datum.id })
       },
-      meso.id
+      r.datum.id
     );
   }) });
 }
-function WeekLevel({ week, onSelectWorkout }) {
-  return /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 10 }, testID: "program-planning-page-week-level", children: week.workouts.map((workout) => /* @__PURE__ */ jsx(
-    WorkoutCard,
-    {
-      name: workout.name,
-      date: workout.date,
-      duration: workout.duration,
-      status: workout.status,
-      muscleGroups: workout.muscleGroups,
-      totalSets: workout.totalSets,
-      totalVolume: workout.totalVolume,
-      unit: workout.unit,
-      exercises: workout.exercises,
-      expanded: false,
-      onToggle: () => onSelectWorkout(workout.id)
-    },
-    workout.id
-  )) });
+var PALETTE2 = [
+  "#5B9BD5",
+  "#14B8A6",
+  "#F4A736",
+  "#F83030",
+  "#823CA0",
+  "#D4A520",
+  "#406D87",
+  "#43C6B7"
+];
+var GRID_LINE2 = "rgba(255,255,255,0.07)";
+var AXIS_LINE = "rgba(255,255,255,0.18)";
+var DIAGONAL_LINE = "rgba(255,255,255,0.28)";
+var DEFAULT_R = 6;
+var PLOT_LEFT2 = 40;
+var PLOT_RIGHT = 12;
+var PLOT_TOP = 12;
+var PLOT_BOTTOM = 34;
+var TICK_COUNT = 5;
+function domainOf(values, min, max) {
+  const lo = min ?? (values.length ? Math.min(...values) : 0);
+  const hi = max ?? (values.length ? Math.max(...values) : 1);
+  if (hi > lo) return { min: lo, max: hi };
+  const pad = Math.abs(hi) * 0.1 || 0.5;
+  return { min: lo - pad, max: hi + pad };
 }
-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)
-  }));
-  return /* @__PURE__ */ jsx(reactNative.View, { testID: "program-planning-page-workout-level", children: /* @__PURE__ */ jsx(
-    WorkoutCard,
-    {
-      name: workout.name,
-      date: workout.date,
-      duration: workout.duration,
-      status: workout.status,
-      muscleGroups: workout.muscleGroups,
-      totalSets: workout.totalSets,
-      totalVolume: workout.totalVolume,
-      unit: workout.unit,
-      exercises,
-      expanded: true,
-      onToggle: () => void 0
-    }
-  ) });
+function ticksOf(d, count) {
+  return Array.from({ length: count }, (_, i) => d.min + (d.max - d.min) * i / (count - 1));
 }
-function ProgramPlanningPage({
-  title = "Program Plan",
-  mesos,
-  className,
-  ...props
+function formatTick(v) {
+  if (Number.isInteger(v)) return `${v}`;
+  return v.toFixed(Math.abs(v) < 1 ? 2 : 1);
+}
+function LineSegment({
+  x1,
+  y1,
+  x2,
+  y2,
+  color,
+  testID
 }) {
-  const [activeMesoId, setActiveMesoId] = React24.useState(mesos[0]?.id ?? null);
-  const [selectedWeek, setSelectedWeek] = React24.useState(null);
-  const [selectedWorkoutId, setSelectedWorkoutId] = React24.useState(null);
-  const [expandedExercise, setExpandedExercise] = React24.useState(null);
-  const progressMesos = React24.useMemo(() => toProgressBarMesos(mesos), [mesos]);
-  const activeMeso = findMeso(mesos, activeMesoId);
-  const level = deriveNavLevel({ weekNumber: selectedWeek, workoutId: selectedWorkoutId });
-  const activeWeek = findWeek(activeMeso, selectedWeek);
-  const activeWorkout = findWorkout(activeWeek, selectedWorkoutId);
-  const selectMeso = (id) => {
-    setActiveMesoId(id);
-    setSelectedWeek(null);
-    setSelectedWorkoutId(null);
-  };
-  const selectWeek = (weekNumber) => {
-    setSelectedWeek(weekNumber);
-    setSelectedWorkoutId(null);
-    setExpandedExercise(null);
-  };
-  const selectWorkout = (id) => {
-    setSelectedWorkoutId(id);
-    setExpandedExercise(null);
-  };
-  const toggleExercise = (index) => setExpandedExercise((current) => current === index ? null : index);
-  const navigateTo = (target) => {
-    if (target === "meso") selectMeso(activeMesoId ?? mesos[0]?.id);
-    else if (target === "week" && selectedWeek != null) selectWeek(selectedWeek);
-  };
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className,
-      style: { width: 390, backgroundColor: PAGE_BG },
-      accessibilityRole: "main",
-      "aria-label": title,
-      testID: "program-planning-page",
-      ...props,
-      children: /* @__PURE__ */ jsxs(reactNative.View, { style: { padding: 16, gap: 14 }, testID: "program-planning-page-content", children: [
-        /* @__PURE__ */ jsx(
-          reactNative.Text,
-          {
-            accessibilityRole: "header",
-            style: {
-              fontSize: 20,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: TEXT_PRIMARY7
-            },
-            testID: "program-planning-page-title",
-            children: title
-          }
-        ),
-        /* @__PURE__ */ jsx(reactNative.View, { style: { marginHorizontal: -16 }, children: /* @__PURE__ */ jsx(
-          MesoProgressBar,
-          {
-            mesos: progressMesos,
-            activeMesoId,
-            onMesoPress: selectMeso
-          }
-        ) }),
-        activeMeso != null && /* @__PURE__ */ jsx(
-          Breadcrumbs2,
-          {
-            crumbs: buildBreadcrumbs(activeMeso, selectedWeek, activeWorkout),
-            onNavigate: navigateTo
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          reactNative.View,
-          {
-            style: {
-              backgroundColor: SURFACE_ELEVATED,
-              borderWidth: 1,
-              borderColor: BORDER_DEFAULT3,
-              borderRadius: 12,
-              padding: 12
-            },
-            testID: "program-planning-page-body",
-            children: [
-              level === "meso" && /* @__PURE__ */ jsx(
-                MesoLevel,
-                {
-                  mesos,
-                  activeMesoId,
-                  onSelectMeso: selectMeso,
-                  onSelectWeek: selectWeek
-                }
-              ),
-              level === "week" && activeWeek != null && /* @__PURE__ */ jsx(WeekLevel, { week: activeWeek, onSelectWorkout: selectWorkout }),
-              level === "workout" && activeWorkout != null && /* @__PURE__ */ jsx(
-                WorkoutLevel,
-                {
-                  workout: activeWorkout,
-                  expandedExercise,
-                  onToggleExercise: toggleExercise
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    }
-  );
-}
-var SURFACE_ELEVATED2 = "var(--color-surface-elevated)";
-var BORDER_DEFAULT4 = "var(--color-border-default)";
-var BRAND_PRIMARY12 = "#FF7900";
-var TEXT_PRIMARY8 = "var(--color-text-primary)";
-var TEXT_SECONDARY6 = "var(--color-text-secondary)";
-var TEXT_TERTIARY8 = "var(--color-text-tertiary)";
-var PAGE_BG2 = "var(--color-background-base)";
-var CHART_WIDTH = 326;
-var CHART_HEIGHT = 150;
-var EXERCISE_DETAIL_TABS = [
-  { key: "progress", label: "Progress" },
-  { key: "history", label: "History" },
-  { key: "advanced", label: "Advanced" }
-];
-function deriveExerciseStats(entries) {
-  let bestE1rm = null;
-  let prCount = 0;
-  for (const entry of entries) {
-    if (entry.e1rm != null && (bestE1rm == null || entry.e1rm.value > bestE1rm)) {
-      bestE1rm = entry.e1rm.value;
-    }
-    if (entry.isPR) prCount += 1;
-  }
-  return { sessions: entries.length, bestE1rm, prCount };
-}
-function toExerciseCardProps(entry, expanded, onToggle) {
-  return {
-    name: entry.title,
-    state: expanded ? "expanded" : "collapsed",
-    onToggle,
-    summary: entry.summary,
-    e1rm: entry.e1rm,
-    isPR: entry.isPR,
-    tempo: entry.tempo,
-    sets: expanded ? entry.sets : void 0
-  };
-}
-function summarizeVbt(sets) {
-  const allReps = sets.flatMap((set) => set.velocities);
-  const meanVelocity = calculateMeanVelocity(allReps);
-  let velocityLoss = 0;
-  for (const set of sets) {
-    velocityLoss = Math.max(velocityLoss, calculateVelocityLoss(set.velocities));
-  }
-  return { meanVelocity, velocityLoss };
-}
-function TabBar({ active, onSelect }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className: "flex-row",
-      style: {
-        borderBottomWidth: 1,
-        borderBottomColor: BORDER_DEFAULT4
-      },
-      accessibilityRole: "tablist",
-      testID: "exercise-detail-page-tabs",
-      children: EXERCISE_DETAIL_TABS.map(({ key, label }) => {
-        const isActive = key === active;
-        return /* @__PURE__ */ jsx(
-          reactNative.Pressable,
-          {
-            onPress: () => onSelect(key),
-            accessibilityRole: "tab",
-            accessibilityState: { selected: isActive },
-            style: {
-              flex: 1,
-              alignItems: "center",
-              paddingVertical: 10,
-              borderBottomWidth: 2,
-              borderBottomColor: isActive ? BRAND_PRIMARY12 : "transparent"
-            },
-            testID: `exercise-detail-page-tab-${key}`,
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                style: {
-                  fontSize: 13,
-                  fontFamily: "Inter, sans-serif",
-                  fontWeight: isActive ? "700" : "500",
-                  color: isActive ? TEXT_PRIMARY8 : TEXT_TERTIARY8
-                },
-                children: label
-              }
-            )
-          },
-          key
-        );
-      })
-    }
-  );
-}
-var STAT_CARDS = [
-  { key: "sessions", label: "Sessions" },
-  { key: "bestE1rm", label: "Best e1RM" },
-  { key: "prCount", label: "PRs" }
-];
-function StatStrip({ stats, unit }) {
-  return /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row", style: { gap: 8 }, testID: "exercise-detail-page-stats", children: STAT_CARDS.map(({ key, label }) => {
-    const raw = stats[key];
-    const value = key === "bestE1rm" ? raw == null ? "\u2014" : `${raw} ${unit}` : `${raw}`;
-    return /* @__PURE__ */ jsxs(
-      reactNative.View,
-      {
-        style: {
-          flex: 1,
-          padding: 12,
-          borderRadius: 10,
-          backgroundColor: SURFACE_ELEVATED2,
-          borderWidth: 1,
-          borderColor: BORDER_DEFAULT4
-        },
-        testID: `exercise-detail-page-stat-${key}`,
-        children: [
-          /* @__PURE__ */ jsx(
-            reactNative.Text,
-            {
-              style: {
-                fontSize: 18,
-                fontFamily: '"Space Grotesk", sans-serif',
-                fontWeight: "700",
-                color: TEXT_PRIMARY8
-              },
-              children: value
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            reactNative.Text,
-            {
-              style: {
-                marginTop: 2,
-                fontSize: 10,
-                fontFamily: "Inter, sans-serif",
-                fontWeight: "600",
-                letterSpacing: 0.4,
-                textTransform: "uppercase",
-                color: TEXT_TERTIARY8
-              },
-              children: label
-            }
-          )
-        ]
-      },
-      key
-    );
-  }) });
-}
-function SectionCard({
-  title,
-  children,
-  testID
-}) {
-  return /* @__PURE__ */ jsxs(
-    reactNative.View,
-    {
-      style: {
-        backgroundColor: SURFACE_ELEVATED2,
-        borderWidth: 1,
-        borderColor: BORDER_DEFAULT4,
-        borderRadius: 12,
-        padding: 12,
-        gap: 10
-      },
-      testID,
-      children: [
-        /* @__PURE__ */ jsx(
-          reactNative.Text,
-          {
-            style: {
-              fontSize: 11,
-              fontFamily: "Inter, sans-serif",
-              fontWeight: "600",
-              letterSpacing: 0.6,
-              textTransform: "uppercase",
-              color: TEXT_TERTIARY8
-            },
-            children: title
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function EntryList({ entries, expandedId, onToggle, emptyLabel, testID }) {
-  if (entries.length === 0) {
-    return /* @__PURE__ */ jsx(
-      reactNative.Text,
-      {
-        style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY8 },
-        testID: `${testID}-empty`,
-        children: emptyLabel
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 8 }, testID, children: entries.map((entry) => /* @__PURE__ */ jsx(
-    ExerciseCard,
-    {
-      ...toExerciseCardProps(entry, entry.id === expandedId, () => onToggle(entry.id))
-    },
-    entry.id
-  )) });
-}
-function VbtBreakdown({ sets }) {
-  return /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 10 }, testID: "exercise-detail-page-vbt-breakdown", children: sets.map((set) => {
-    const mean = calculateMeanVelocity(set.velocities);
-    const loss = calculateVelocityLoss(set.velocities);
-    return /* @__PURE__ */ jsxs(
-      reactNative.View,
-      {
-        className: "flex-row items-center",
-        style: { gap: 10 },
-        testID: "exercise-detail-page-vbt-set",
-        children: [
-          /* @__PURE__ */ jsx(
-            reactNative.Text,
-            {
-              style: {
-                width: 44,
-                fontSize: 11,
-                fontFamily: "Inter, sans-serif",
-                fontWeight: "600",
-                color: TEXT_SECONDARY6
-              },
-              children: set.label
-            }
-          ),
-          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", style: { height: 8, justifyContent: "center" }, children: /* @__PURE__ */ jsx(VelocityStrip, { velocities: set.velocities, variant: "mini" }) }),
-          /* @__PURE__ */ jsx(
-            reactNative.Text,
-            {
-              style: {
-                fontSize: 11,
-                fontFamily: "Inter, sans-serif",
-                fontVariant: ["tabular-nums"],
-                color: TEXT_TERTIARY8
-              },
-              children: `${mean.toFixed(2)} \xB7 -${loss}%`
-            }
-          )
-        ]
-      },
-      set.label
-    );
-  }) });
-}
-function VbtSummaryRow({ summary }) {
-  const cells = [
-    { label: "Mean Velocity", value: `${summary.meanVelocity.toFixed(2)} m/s` },
-    { label: "Peak Vel. Loss", value: `-${summary.velocityLoss}%` }
-  ];
-  return /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row", style: { gap: 8 }, testID: "exercise-detail-page-vbt-summary", children: cells.map((cell) => /* @__PURE__ */ jsxs(
-    reactNative.View,
-    {
-      style: {
-        flex: 1,
-        padding: 12,
-        borderRadius: 10,
-        backgroundColor: SURFACE_ELEVATED2,
-        borderWidth: 1,
-        borderColor: BORDER_DEFAULT4
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          reactNative.Text,
-          {
-            style: {
-              fontSize: 16,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: TEXT_PRIMARY8
-            },
-            children: cell.value
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.Text,
-          {
-            style: {
-              marginTop: 2,
-              fontSize: 10,
-              fontFamily: "Inter, sans-serif",
-              fontWeight: "600",
-              letterSpacing: 0.4,
-              textTransform: "uppercase",
-              color: TEXT_TERTIARY8
-            },
-            children: cell.label
-          }
-        )
-      ]
-    },
-    cell.label
-  )) });
-}
-function ExerciseDetailPage({
-  exercise,
-  meso,
-  trend,
-  progression,
-  history,
-  vbt,
-  className,
-  ...props
-}) {
-  const [tab, setTab] = React24.useState("progress");
-  const [expandedProgressId, setExpandedProgressId] = React24.useState(null);
-  const [expandedHistoryId, setExpandedHistoryId] = React24.useState(null);
-  const stats = React24.useMemo(() => deriveExerciseStats(history), [history]);
-  const vbtSummary = React24.useMemo(() => summarizeVbt(vbt.sets), [vbt.sets]);
-  const toggle = (setId) => (id) => setId((current) => current === id ? null : id);
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className,
-      style: { width: 390, backgroundColor: PAGE_BG2 },
-      accessibilityRole: "main",
-      "aria-label": exercise.name,
-      testID: "exercise-detail-page",
-      ...props,
-      children: /* @__PURE__ */ jsxs(reactNative.View, { style: { padding: 16, gap: 14 }, testID: "exercise-detail-page-content", children: [
-        /* @__PURE__ */ jsxs(
-          reactNative.View,
-          {
-            className: "flex-row items-start justify-between",
-            style: { gap: 8 },
-            testID: "exercise-detail-page-header",
-            children: [
-              /* @__PURE__ */ jsxs(reactNative.View, { style: { flexShrink: 1 }, children: [
-                /* @__PURE__ */ jsx(
-                  reactNative.Text,
-                  {
-                    accessibilityRole: "header",
-                    style: {
-                      fontSize: 20,
-                      fontFamily: '"Space Grotesk", sans-serif',
-                      fontWeight: "700",
-                      color: TEXT_PRIMARY8
-                    },
-                    testID: "exercise-detail-page-title",
-                    children: exercise.name
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  reactNative.Text,
-                  {
-                    style: {
-                      marginTop: 2,
-                      fontSize: 12,
-                      fontFamily: "Inter, sans-serif",
-                      color: TEXT_SECONDARY6
-                    },
-                    testID: "exercise-detail-page-subtitle",
-                    children: exercise.subtitle
-                  }
-                )
-              ] }),
-              exercise.currentE1rm != null && /* @__PURE__ */ jsxs(
-                reactNative.View,
-                {
-                  style: {
-                    paddingVertical: 4,
-                    paddingHorizontal: 10,
-                    borderRadius: 6,
-                    backgroundColor: "rgba(255,121,0,0.10)",
-                    borderWidth: 1,
-                    borderColor: "rgba(255,121,0,0.25)"
-                  },
-                  testID: "exercise-detail-page-e1rm",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      reactNative.Text,
-                      {
-                        style: {
-                          fontSize: 9,
-                          fontFamily: "Inter, sans-serif",
-                          fontWeight: "600",
-                          letterSpacing: 0.4,
-                          textTransform: "uppercase",
-                          color: TEXT_TERTIARY8
-                        },
-                        children: "e1RM"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      reactNative.Text,
-                      {
-                        style: {
-                          fontSize: 15,
-                          fontFamily: '"Space Grotesk", sans-serif',
-                          fontWeight: "700",
-                          color: BRAND_PRIMARY12
-                        },
-                        children: `${exercise.currentE1rm} ${exercise.unit}`
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(TabBar, { active: tab, onSelect: setTab }),
-        tab === "progress" && /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 14 }, testID: "exercise-detail-page-panel-progress", children: [
-          /* @__PURE__ */ jsx(MesoStatusCard, { ...meso }),
-          /* @__PURE__ */ jsx(StatStrip, { stats, unit: exercise.unit }),
-          /* @__PURE__ */ jsx(SectionCard, { title: "Strength Trend", testID: "exercise-detail-page-trend", children: /* @__PURE__ */ jsx(
-            StrengthTrendChart,
-            {
-              data: trend.data,
-              projection: trend.projection,
-              mesoBoundaries: trend.mesoBoundaries,
-              width: CHART_WIDTH,
-              height: CHART_HEIGHT,
-              unit: exercise.unit,
-              animateOnMount: false
-            }
-          ) }),
-          /* @__PURE__ */ jsx(SectionCard, { title: "Week-by-Week", testID: "exercise-detail-page-progression", children: /* @__PURE__ */ jsx(
-            EntryList,
-            {
-              entries: progression,
-              expandedId: expandedProgressId,
-              onToggle: toggle(setExpandedProgressId),
-              emptyLabel: "No progression logged yet",
-              testID: "exercise-detail-page-progression-list"
-            }
-          ) })
-        ] }),
-        tab === "history" && /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 14 }, testID: "exercise-detail-page-panel-history", children: /* @__PURE__ */ jsx(SectionCard, { title: "All Sessions", testID: "exercise-detail-page-history", children: /* @__PURE__ */ jsx(
-          EntryList,
-          {
-            entries: history,
-            expandedId: expandedHistoryId,
-            onToggle: toggle(setExpandedHistoryId),
-            emptyLabel: "No sessions logged yet",
-            testID: "exercise-detail-page-history-list"
-          }
-        ) }) }),
-        tab === "advanced" && /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 14 }, testID: "exercise-detail-page-panel-advanced", children: [
-          /* @__PURE__ */ jsx(SectionCard, { title: "Capacity Band", testID: "exercise-detail-page-capacity", children: /* @__PURE__ */ jsx(
-            CapacityBandChart,
-            {
-              band: vbt.band,
-              workouts: vbt.workouts,
-              projection: vbt.projection,
-              width: CHART_WIDTH,
-              height: CHART_HEIGHT
-            }
-          ) }),
-          /* @__PURE__ */ jsx(VbtSummaryRow, { summary: vbtSummary }),
-          /* @__PURE__ */ jsx(SectionCard, { title: "Velocity Breakdown", testID: "exercise-detail-page-velocity", children: /* @__PURE__ */ jsx(VbtBreakdown, { sets: vbt.sets }) })
-        ] })
-      ] })
-    }
-  );
-}
-var SURFACE_ELEVATED3 = "var(--color-surface-elevated)";
-var BORDER_DEFAULT5 = "var(--color-border-default)";
-var BRAND_PRIMARY13 = "#FF7900";
-var TEXT_PRIMARY9 = "var(--color-text-primary)";
-var TEXT_SECONDARY7 = "var(--color-text-secondary)";
-var TEXT_TERTIARY9 = "var(--color-text-tertiary)";
-var PAGE_BG3 = "var(--color-background-base)";
-function countCompletedSets(exercise) {
-  if (exercise.setVelocities != null) return exercise.setVelocities.length;
-  if (exercise.status === "completed") return exercise.totalPlannedSets;
-  return 0;
-}
-function deriveWorkoutProgress(exercises) {
-  let completedExercises = 0;
-  let completedSets = 0;
-  let totalSets = 0;
-  for (const exercise of exercises) {
-    if (exercise.status === "completed") completedExercises += 1;
-    completedSets += countCompletedSets(exercise);
-    totalSets += exercise.totalPlannedSets;
-  }
-  return {
-    completedExercises,
-    totalExercises: exercises.length,
-    completedSets,
-    totalSets,
-    fraction: totalSets === 0 ? 0 : completedSets / totalSets
-  };
-}
-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 toActiveCardProps(exercise, focused, onToggle, supersetPosition = null, supersetColor) {
-  const state = statusToCardState(exercise.status, focused);
-  return {
-    name: exercise.name,
-    state,
-    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,
-    prescription: exercise.prescription,
-    previousBest: exercise.previousBest,
-    supersetPosition,
-    supersetColor
-  };
-}
-function groupExercises(exercises, supersets) {
-  const byId = new Map(supersets.map((superset) => [superset.id, superset]));
-  const groups = [];
-  for (const exercise of exercises) {
-    const superset = exercise.supersetId != null ? byId.get(exercise.supersetId) : void 0;
-    const last = groups[groups.length - 1];
-    if (superset != null && last?.type === "superset" && last.superset.id === superset.id) {
-      last.exercises.push(exercise);
-    } else if (superset != null) {
-      groups.push({ type: "superset", superset, exercises: [exercise] });
-    } else {
-      groups.push({ type: "single", exercise });
-    }
-  }
-  return groups;
-}
-function supersetPositionAt(index, length) {
-  if (length === 1) return null;
-  if (index === 0) return "first";
-  if (index === length - 1) return "last";
-  return "middle";
-}
-function WorkoutHeader({
-  title,
-  subtitle,
-  progress
-}) {
-  return /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 10 }, testID: "active-workout-page-header", children: [
-    /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-start justify-between", style: { gap: 8 }, children: [
-      /* @__PURE__ */ jsxs(reactNative.View, { style: { flexShrink: 1 }, children: [
-        /* @__PURE__ */ jsx(
-          reactNative.Text,
-          {
-            accessibilityRole: "header",
-            style: {
-              fontSize: 20,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: TEXT_PRIMARY9
-            },
-            testID: "active-workout-page-title",
-            children: title
-          }
-        ),
-        subtitle != null && /* @__PURE__ */ jsx(
-          reactNative.Text,
-          {
-            style: {
-              marginTop: 2,
-              fontSize: 12,
-              fontFamily: "Inter, sans-serif",
-              color: TEXT_SECONDARY7
-            },
-            testID: "active-workout-page-subtitle",
-            children: subtitle
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(reactNative.View, { style: { alignItems: "flex-end" }, testID: "active-workout-page-progress-count", children: [
-        /* @__PURE__ */ jsx(
-          reactNative.Text,
-          {
-            style: {
-              fontSize: 15,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "700",
-              color: BRAND_PRIMARY13,
-              fontVariant: ["tabular-nums"]
-            },
-            children: `${progress.completedExercises}/${progress.totalExercises}`
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.Text,
-          {
-            style: {
-              fontSize: 10,
-              fontFamily: "Inter, sans-serif",
-              fontWeight: "600",
-              letterSpacing: 0.4,
-              textTransform: "uppercase",
-              color: TEXT_TERTIARY9
-            },
-            children: `${progress.completedSets}/${progress.totalSets} sets`
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        style: { height: 4, backgroundColor: BORDER_DEFAULT5, borderRadius: 2 },
-        testID: "active-workout-page-progress-track",
-        children: /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              height: "100%",
-              width: `${Math.round(progress.fraction * 100)}%`,
-              backgroundColor: BRAND_PRIMARY13,
-              borderRadius: 2
-            },
-            testID: "active-workout-page-progress-fill"
-          }
-        )
-      }
-    )
-  ] });
-}
-function ExerciseList({ groups, focusedId, onToggle }) {
-  return /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 10 }, testID: "active-workout-page-exercises", children: groups.map((group) => {
-    if (group.type === "single") {
-      return /* @__PURE__ */ jsx(
-        reactNative.View,
-        {
-          style: {
-            backgroundColor: SURFACE_ELEVATED3,
-            borderWidth: 1,
-            borderColor: BORDER_DEFAULT5,
-            borderRadius: 12
-          },
-          children: /* @__PURE__ */ jsx(
-            ExerciseCard,
-            {
-              ...toActiveCardProps(
-                group.exercise,
-                group.exercise.id === focusedId,
-                () => onToggle(group.exercise.id)
-              )
-            }
-          )
-        },
-        group.exercise.id
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      SupersetWrapper,
-      {
-        label: group.superset.label,
-        color: group.superset.color,
-        children: group.exercises.map((exercise, index) => /* @__PURE__ */ jsx(
-          ExerciseCard,
-          {
-            ...toActiveCardProps(
-              exercise,
-              exercise.id === focusedId,
-              () => onToggle(exercise.id),
-              supersetPositionAt(index, group.exercises.length),
-              group.superset.color
-            )
-          },
-          exercise.id
-        ))
-      },
-      group.superset.id
-    );
-  }) });
-}
-function ActiveWorkoutPage({
-  title = "Active Workout",
-  subtitle,
-  exercises,
-  supersets = [],
-  input,
-  rest,
-  initialResting = false,
-  className,
-  ...props
-}) {
-  const active = findActiveExercise(exercises);
-  const [focusedId, setFocusedId] = React24.useState(active?.id ?? null);
-  const [resting, setResting] = React24.useState(initialResting);
-  const [reps, setReps] = React24.useState(input?.reps ?? "");
-  const [weight, setWeight] = React24.useState(input?.weight ?? "");
-  const progress = React24.useMemo(() => deriveWorkoutProgress(exercises), [exercises]);
-  const groups = React24.useMemo(() => groupExercises(exercises, supersets), [exercises, supersets]);
-  const toggleFocus = (id) => setFocusedId((current) => current === id ? null : id);
-  const nextSetNumber = active != null ? countCompletedSets(active) + 1 : 1;
-  const canRecord = reps.trim() !== "" && weight.trim() !== "";
-  const showRest = resting && rest != null;
-  const showInput = !showRest && active != null;
-  return /* @__PURE__ */ jsxs(
-    reactNative.View,
-    {
-      className,
-      style: { position: "relative", width: 390, backgroundColor: PAGE_BG3 },
-      accessibilityRole: "main",
-      "aria-label": title,
-      testID: "active-workout-page",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(reactNative.View, { style: { padding: 16, gap: 14 }, testID: "active-workout-page-content", children: [
-          /* @__PURE__ */ jsx(WorkoutHeader, { title, subtitle, progress }),
-          /* @__PURE__ */ jsx(ExerciseList, { groups, focusedId, onToggle: toggleFocus })
-        ] }),
-        (showRest || showInput) && /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { borderTopWidth: 1, borderTopColor: BORDER_DEFAULT5 },
-            testID: "active-workout-page-bottom-bar",
-            children: showRest && rest != null ? /* @__PURE__ */ jsx(
-              RestTimer,
-              {
-                totalSeconds: rest.totalSeconds,
-                elapsedMs: rest.elapsedMs,
-                nextSetInfo: rest.nextSetInfo,
-                onSkip: () => setResting(false),
-                onAddTime: () => void 0,
-                visible: true
-              }
-            ) : active != null && /* @__PURE__ */ jsx(
-              InputBar,
-              {
-                exerciseName: active.name,
-                setNumber: nextSetNumber,
-                totalSets: active.totalPlannedSets,
-                reps,
-                weight,
-                unit: active.unit,
-                onRepsChange: setReps,
-                onWeightChange: setWeight,
-                onRecord: () => {
-                  if (rest != null) setResting(true);
-                },
-                canRecord,
-                visible: true
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-var PALETTE = [
-  "#5B9BD5",
-  "#14B8A6",
-  "#F4A736",
-  "#F83030",
-  "#823CA0",
-  "#D4A520",
-  "#406D87",
-  "#43C6B7"
-];
-function scaleValue(v, scale) {
-  if (v <= 0) return 0;
-  if (scale === "sqrt") return Math.sqrt(v);
-  if (scale === "log") return Math.log10(v + 1);
-  return v;
-}
-function worstRatio(row, side) {
-  const sum = row.reduce((s, r) => s + r.area, 0);
-  const thickness = sum / side;
-  let worst = 0;
-  for (const r of row) {
-    const len = r.area / thickness;
-    const ratio = Math.max(thickness / len, len / thickness);
-    if (ratio > worst) worst = ratio;
-  }
-  return worst;
-}
-function squarify(data, w, h) {
-  const total = data.reduce((s, d) => s + d.value, 0);
-  if (total <= 0 || w <= 0 || h <= 0) return [];
-  const scaled = data.map((d) => ({ datum: d, area: d.value / total * w * h }));
-  const out = [];
-  let rx = 0;
-  let ry = 0;
-  let rw = w;
-  let rh = h;
-  let i = 0;
-  while (i < scaled.length) {
-    const vertical = rw >= rh;
-    const side = vertical ? rh : rw;
-    let row = [];
-    let bestWorst = Infinity;
-    let j = i;
-    while (j < scaled.length) {
-      const trial = [...row, scaled[j]];
-      const worst = worstRatio(trial, side);
-      if (row.length > 0 && worst > bestWorst) break;
-      row = trial;
-      bestWorst = worst;
-      j++;
-    }
-    const rowArea = row.reduce((s, r) => s + r.area, 0);
-    const thickness = rowArea / side;
-    let along = vertical ? ry : rx;
-    for (const r of row) {
-      const len = r.area / thickness;
-      out.push(
-        vertical ? { x: rx, y: along, w: thickness, h: len, datum: r.datum } : { x: along, y: ry, w: len, h: thickness, datum: r.datum }
-      );
-      along += len;
-    }
-    if (vertical) {
-      rx += thickness;
-      rw -= thickness;
-    } else {
-      ry += thickness;
-      rh -= thickness;
-    }
-    i = j;
-  }
-  return out;
-}
-function Treemap({
-  data,
-  width,
-  height,
-  scale = "sqrt",
-  maxTiles = 60,
-  onPress,
-  selectedId,
-  className,
-  ...props
-}) {
-  const clean = data.filter((d) => d.value > 0).sort((a, b) => b.value - a.value).map((d, i) => ({ ...d, color: d.color ?? PALETTE[i % PALETTE.length] }));
-  let tiles = clean;
-  if (clean.length > maxTiles) {
-    const head = clean.slice(0, maxTiles - 1);
-    const restValue = clean.slice(maxTiles - 1).reduce((s, d) => s + d.value, 0);
-    tiles = [
-      ...head,
-      { id: "__more__", value: restValue, color: "#3a3a3a", label: `+${clean.length - (maxTiles - 1)} more` }
-    ];
-  }
-  const weighted = tiles.map((d) => ({ ...d, value: scaleValue(d.value, scale) }));
-  const rects = squarify(weighted, width, height);
-  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("relative", className), style: { width, height }, ...props, children: rects.map((r) => {
-    const selected = r.datum.id === selectedId;
-    const labelFits = r.w > 54 && r.h > 22;
-    const pressable = r.datum.id !== "__more__";
-    return /* @__PURE__ */ jsx(
-      reactNative.Pressable,
-      {
-        testID: `treemap-tile-${r.datum.id}`,
-        accessibilityLabel: r.datum.label ?? r.datum.id,
-        onPress: pressable ? () => onPress?.(r.datum.id) : void 0,
-        style: {
-          position: "absolute",
-          left: r.x,
-          top: r.y,
-          width: Math.max(0, r.w - 2),
-          height: Math.max(0, r.h - 2),
-          backgroundColor: r.datum.color,
-          borderRadius: 3,
-          opacity: selected ? 1 : 0.9,
-          borderWidth: selected ? 2 : 0,
-          borderColor: "#ffffff",
-          padding: 4,
-          overflow: "hidden"
-        },
-        children: labelFits && /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 2, className: "text-[10px] font-semibold text-[#0b0b0b]", children: r.datum.label ?? r.datum.id })
-      },
-      r.datum.id
-    );
-  }) });
-}
-var PALETTE2 = [
-  "#5B9BD5",
-  "#14B8A6",
-  "#F4A736",
-  "#F83030",
-  "#823CA0",
-  "#D4A520",
-  "#406D87",
-  "#43C6B7"
-];
-var GRID_LINE2 = "rgba(255,255,255,0.07)";
-var AXIS_LINE = "rgba(255,255,255,0.18)";
-var DIAGONAL_LINE = "rgba(255,255,255,0.28)";
-var DEFAULT_R = 6;
-var PLOT_LEFT2 = 40;
-var PLOT_RIGHT = 12;
-var PLOT_TOP = 12;
-var PLOT_BOTTOM = 34;
-var TICK_COUNT = 5;
-function domainOf(values, min, max) {
-  const lo = min ?? (values.length ? Math.min(...values) : 0);
-  const hi = max ?? (values.length ? Math.max(...values) : 1);
-  if (hi > lo) return { min: lo, max: hi };
-  const pad = Math.abs(hi) * 0.1 || 0.5;
-  return { min: lo - pad, max: hi + pad };
-}
-function ticksOf(d, count) {
-  return Array.from({ length: count }, (_, i) => d.min + (d.max - d.min) * i / (count - 1));
-}
-function formatTick(v) {
-  if (Number.isInteger(v)) return `${v}`;
-  return v.toFixed(Math.abs(v) < 1 ? 2 : 1);
-}
-function LineSegment({
-  x1,
-  y1,
-  x2,
-  y2,
-  color,
-  testID
-}) {
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  const length = Math.sqrt(dx * dx + dy * dy);
-  const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const length = Math.sqrt(dx * dx + dy * dy);
+  const angle = Math.atan2(dy, dx) * (180 / Math.PI);
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
@@ -12704,28 +12082,28 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t, i) => {
-            const y = toY(t);
+          ticksOf(yd, TICK_COUNT).map((t2, i) => {
+            const y = toY(t2);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-y",
                 style: { position: "absolute", left: PLOT_LEFT2, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t2) })
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t, i) => {
-            const x = toX(t);
+          ticksOf(xd, TICK_COUNT).map((t2, i) => {
+            const x = toX(t2);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-x",
                 style: { position: "absolute", top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t2) })
               },
               `x-${i}`
             );
@@ -12787,24 +12165,24 @@ function Scatter({
 }
 var STATUS_SUCCESS4 = "#14B8A6";
 var STATUS_WARNING4 = "#FFB020";
-var STATUS_ERROR3 = "#D14343";
+var STATUS_ERROR4 = "#D14343";
 var TRACK = "rgba(255,255,255,0.08)";
 var DEFAULT_THRESHOLDS = [
-  { value: 0, color: STATUS_ERROR3 },
+  { value: 0, color: STATUS_ERROR4 },
   { value: 60, color: STATUS_WARNING4 },
   { value: 80, color: STATUS_SUCCESS4 }
 ];
 var ARC_START = 135;
 var ARC_SWEEP = 270;
 var SEGMENTS = 40;
-function clamp013(n) {
+function clamp012(n) {
   if (Number.isNaN(n)) return 0;
   return Math.max(0, Math.min(1, n));
 }
 function formatValue2(v) {
   return Number.isInteger(v) ? `${v}` : v.toFixed(1);
 }
-function bandColor(fraction, bands, min, max) {
+function bandColor2(fraction, bands, min, max) {
   const value = min + fraction * (max - min);
   const sorted = [...bands].sort((a, b) => a.value - b.value);
   let color = sorted[0]?.color ?? STATUS_SUCCESS4;
@@ -12842,10 +12220,10 @@ function Gauge2({
   ...props
 }) {
   const span = max - min || 1;
-  const fill = clamp013((value - min) / span);
-  const activeColor = (f) => color ?? bandColor(f, thresholds, min, max);
+  const fill = clamp012((value - min) / span);
+  const activeColor = (f) => color ?? bandColor2(f, thresholds, min, max);
   const ticks = buildTicks(fill, size, activeColor);
-  const displayColor = color ?? bandColor(fill, thresholds, min, max);
+  const displayColor = color ?? bandColor2(fill, thresholds, min, max);
   const tickLength = size * 0.11;
   const tickThickness = Math.max(2, size * 0.9 / SEGMENTS);
   const ariaLabel = `${label ? `${label}: ` : ""}${formatValue2(value)}${unit ?? ""} of ${formatValue2(max)}`;
@@ -12859,23 +12237,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t) => /* @__PURE__ */ jsx(
+        ticks.map((t2) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t.left - tickThickness / 2,
-              top: t.top - tickLength / 2,
+              left: t2.left - tickThickness / 2,
+              top: t2.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t.color,
-              transform: [{ rotate: t.rotate }]
+              backgroundColor: t2.color,
+              transform: [{ rotate: t2.rotate }]
             }
           },
-          t.key
+          t2.key
         )),
         /* @__PURE__ */ jsxs(reactNative.View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -12889,65 +12267,6 @@ function Gauge2({
   );
 }
 
-// src/utils/colors.ts
-function getStatusColor(status) {
-  return `var(--color-status-${status})`;
-}
-function getResultColor(result) {
-  return `var(--color-result-${result})`;
-}
-function alpha(color, opacity) {
-  const clampedOpacity = Math.max(0, Math.min(1, opacity));
-  if (color.startsWith("#")) {
-    const hex = color.slice(1);
-    let r, g, b;
-    if (hex.length === 3) {
-      r = parseInt(hex[0] + hex[0], 16);
-      g = parseInt(hex[1] + hex[1], 16);
-      b = parseInt(hex[2] + hex[2], 16);
-    } else if (hex.length === 6) {
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-    } else {
-      return color;
-    }
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
-  if (rgbaMatch) {
-    const [, r, g, b] = rgbaMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  return color;
-}
-function getLuminance(color) {
-  if (!color.startsWith("#")) return "dark";
-  const hex = color.slice(1);
-  let r, g, b;
-  if (hex.length === 3) {
-    r = parseInt(hex[0] + hex[0], 16);
-    g = parseInt(hex[1] + hex[1], 16);
-    b = parseInt(hex[2] + hex[2], 16);
-  } else if (hex.length === 6) {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-  } else {
-    return "dark";
-  }
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? "light" : "dark";
-}
-function getContrastText(backgroundColor) {
-  return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
-}
-
 // src/utils/form.ts
 function getFieldValidationProps(state) {
   return {
@@ -13040,7 +12359,6 @@ exports.Accordion = Accordion;
 exports.AccordionButton = AccordionButton;
 exports.AccordionItem = AccordionItem;
 exports.AccordionPanel = AccordionPanel;
-exports.ActiveWorkoutPage = ActiveWorkoutPage;
 exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
@@ -13081,10 +12399,8 @@ exports.Drawer = Drawer;
 exports.DrawerBody = DrawerBody;
 exports.DrawerFooter = DrawerFooter;
 exports.DrawerHeader = DrawerHeader;
-exports.EXERCISE_DETAIL_TABS = EXERCISE_DETAIL_TABS;
 exports.EmptyState = EmptyState;
 exports.ExerciseCard = ExerciseCard;
-exports.ExerciseDetailPage = ExerciseDetailPage;
 exports.FormActions = FormActions;
 exports.FormField = FormField;
 exports.FormRow = FormRow;
@@ -13137,7 +12453,6 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.PrBadge = PrBadge;
 exports.PrHistoryModal = PrHistoryModal;
-exports.ProgramPlanningPage = ProgramPlanningPage;
 exports.Progress = Progress;
 exports.ProgressSteps = ProgressSteps;
 exports.Radio = Radio;
@@ -13175,6 +12490,7 @@ exports.StrengthTrendChart = StrengthTrendChart;
 exports.SupersetWrapper = SupersetWrapper;
 exports.Surface = Surface;
 exports.Switch = Switch;
+exports.TEMPO_PACING = TEMPO_PACING;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
@@ -13187,6 +12503,7 @@ exports.TableHeaderCell = TableHeaderCell;
 exports.TablePagination = TablePagination;
 exports.TableRow = TableRow;
 exports.Tabs = Tabs;
+exports.TempoBar = TempoBar;
 exports.TempoDisplay = TempoDisplay;
 exports.Toast = Toast;
 exports.ToastProvider = ToastProvider;
@@ -13204,14 +12521,12 @@ exports.WorkoutPill = WorkoutPill;
 exports.alpha = alpha;
 exports.applyThemePreset = applyThemePreset;
 exports.audiobookPreset = audiobookPreset;
-exports.buildBreadcrumbs = buildBreadcrumbs;
 exports.buttonSizes = buttonSizes;
 exports.calculateMeanVelocity = calculateMeanVelocity;
 exports.calculateVelocityLoss = calculateVelocityLoss;
 exports.cn = cn;
 exports.componentElevationRanges = componentElevationRanges;
 exports.composeValidators = composeValidators;
-exports.countCompletedSets = countCompletedSets;
 exports.createFieldId = createFieldId;
 exports.createFlatShadow = createFlatShadow;
 exports.createPressedHoverShadow = createPressedHoverShadow;
@@ -13221,15 +12536,8 @@ exports.createRaisedShadow = createRaisedShadow;
 exports.darkThemeCSSVars = darkThemeCSSVars;
 exports.darken = darken;
 exports.defaultPreset = defaultPreset;
-exports.deriveExerciseStats = deriveExerciseStats;
-exports.deriveNavLevel = deriveNavLevel;
-exports.deriveWorkoutProgress = deriveWorkoutProgress;
 exports.discreteRainbow = discreteRainbow;
 exports.elevationSystem = elevationSystem;
-exports.findActiveExercise = findActiveExercise;
-exports.findMeso = findMeso;
-exports.findWeek = findWeek;
-exports.findWorkout = findWorkout;
 exports.formatDateTime = formatDateTime;
 exports.formatPrescription = formatPrescription;
 exports.formatSignedPct = formatSignedPct;
@@ -13248,12 +12556,13 @@ exports.getLuminance = getLuminance;
 exports.getResultColor = getResultColor;
 exports.getSemanticColors = getSemanticColors;
 exports.getStatusColor = getStatusColor;
+exports.getTempoFillPct = getTempoFillPct;
+exports.getTempoPacingState = getTempoPacingState;
 exports.getThemeCSSVars = getThemeCSSVars;
 exports.getValidatedElevation = getValidatedElevation;
 exports.getVelocityZoneColor = getVelocityZoneColor;
 exports.getVelocityZoneName = getVelocityZoneName;
 exports.gluestackConfig = gluestackConfig;
-exports.groupExercises = groupExercises;
 exports.hasMaxLength = hasMaxLength;
 exports.hasMinLength = hasMinLength;
 exports.hexToRgb = hexToRgb;
@@ -13272,6 +12581,7 @@ exports.primitiveShadows = primitiveShadows;
 exports.primitiveSpacing = primitiveSpacing;
 exports.primitiveTypography = primitiveTypography;
 exports.primitiveZIndex = primitiveZIndex;
+exports.resolveColor = resolveColor;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsv = rgbToHsv;
 exports.roundRpe = roundRpe;
@@ -13282,11 +12592,6 @@ exports.semanticColorsDark = semanticColorsDark;
 exports.semanticColorsLight = semanticColorsLight;
 exports.semanticTypography = semanticTypography;
 exports.shadowColors = shadowColors;
-exports.statusToCardState = statusToCardState;
-exports.summarizeVbt = summarizeVbt;
-exports.toActiveCardProps = toActiveCardProps;
-exports.toExerciseCardProps = toExerciseCardProps;
-exports.toProgressBarMesos = toProgressBarMesos;
 exports.useTable = useTable;
 exports.useToast = useToast;
 exports.useToolbarButton = useToolbarButton;