@titan-design/react-ui 0.2.7 → 0.4.0

package/dist/index.js

@@ -5,13 +5,12 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var React24 = require('react');
+var nativewind = require('nativewind');
 var lucideReact = require('lucide-react');
-var BodyHighlighter = require('react-native-body-highlighter');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React24__default = /*#__PURE__*/_interopDefault(React24);
-var BodyHighlighter__default = /*#__PURE__*/_interopDefault(BodyHighlighter);
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -1211,6 +1210,28 @@ var PasswordInput = React24.forwardRef(function PasswordInput2({ showIcon, hideI
 });
 
 // src/theme/config.ts
+var themeIndependentCSSVars = {
+  // RGB decomposed values for glow shadows
+  "--color-brand-primary-rgb": "255, 121, 0",
+  "--color-brand-secondary-rgb": "64, 109, 135",
+  "--color-status-success-rgb": "20, 184, 166",
+  "--color-status-error-rgb": "209, 67, 67",
+  "--color-status-warning-rgb": "255, 176, 32",
+  "--color-status-info-rgb": "33, 150, 243",
+  "--color-background-base-rgb": "16, 16, 16",
+  // Font families
+  "--font-family-sans": "'Inter'",
+  "--font-family-body": "'Nunito Sans'",
+  "--font-family-heading": "'Space Grotesk'",
+  "--font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+  // Animation tokens
+  "--ease-out": "cubic-bezier(0.22, 1, 0.36, 1)",
+  "--ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+  "--ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  "--duration-fast": "150ms",
+  "--duration-normal": "250ms",
+  "--duration-slow": "400ms"
+};
 var lightThemeCSSVars = {
   "--color-brand-primary": semanticColorsLight["brand-primary"],
   "--color-brand-primary-light": semanticColorsLight["brand-primary-light"],
@@ -1251,7 +1272,56 @@ var lightThemeCSSVars = {
   "--color-interactive-active": semanticColorsLight["interactive-active"],
   "--color-interactive-selected": semanticColorsLight["interactive-selected"],
   "--color-interactive-disabled": semanticColorsLight["interactive-disabled"],
-  "--color-divider": semanticColorsLight["divider"]
+  "--color-divider": semanticColorsLight["divider"],
+  "--color-brand-primary-hover": semanticColorsLight["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsLight["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsLight["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsLight["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsLight["status-success-light"],
+  "--color-status-success-dark": semanticColorsLight["status-success-dark"],
+  "--color-status-error-light": semanticColorsLight["status-error-light"],
+  "--color-status-error-dark": semanticColorsLight["status-error-dark"],
+  "--color-status-warning-light": semanticColorsLight["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsLight["status-warning-dark"],
+  "--color-status-info-light": semanticColorsLight["status-info-light"],
+  "--color-status-info-dark": semanticColorsLight["status-info-dark"],
+  "--color-on-status-success": semanticColorsLight["on-status-success"],
+  "--color-on-status-error": semanticColorsLight["on-status-error"],
+  "--color-on-status-warning": semanticColorsLight["on-status-warning"],
+  "--color-on-status-info": semanticColorsLight["on-status-info"],
+  "--color-result-improve": semanticColorsLight["result-improve"],
+  "--color-result-improve-light": semanticColorsLight["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsLight["result-improve-dark"],
+  "--color-result-degrade": semanticColorsLight["result-degrade"],
+  "--color-result-degrade-light": semanticColorsLight["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsLight["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsLight["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsLight["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsLight["result-neutral"],
+  "--color-on-result-improve": semanticColorsLight["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsLight["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsLight["on-result-inconclusive"],
+  "--color-data-1": semanticColorsLight["data-1"],
+  "--color-data-2": semanticColorsLight["data-2"],
+  "--color-data-3": semanticColorsLight["data-3"],
+  "--color-data-4": semanticColorsLight["data-4"],
+  "--color-data-5": semanticColorsLight["data-5"],
+  "--color-data-6": semanticColorsLight["data-6"],
+  "--color-data-7": semanticColorsLight["data-7"],
+  "--color-data-8": semanticColorsLight["data-8"],
+  "--color-data-9": semanticColorsLight["data-9"],
+  "--color-data-10": semanticColorsLight["data-10"],
+  "--color-text-link-hover": semanticColorsLight["text-link-hover"],
+  "--color-surface-overlay": semanticColorsLight["surface-overlay"],
+  "--color-surface-input": semanticColorsLight["surface-input"],
+  "--color-border-input": semanticColorsLight["border-input"],
+  "--color-border-input-hover": semanticColorsLight["border-input-hover"],
+  "--color-border-input-focus": semanticColorsLight["border-input-focus"],
+  "--color-border-input-error": semanticColorsLight["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsLight["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsLight["avatar-background"],
+  "--color-avatar-text": semanticColorsLight["avatar-text"],
+  ...themeIndependentCSSVars
 };
 var darkThemeCSSVars = {
   "--color-brand-primary": semanticColorsDark["brand-primary"],
@@ -1293,7 +1363,56 @@ var darkThemeCSSVars = {
   "--color-interactive-active": semanticColorsDark["interactive-active"],
   "--color-interactive-selected": semanticColorsDark["interactive-selected"],
   "--color-interactive-disabled": semanticColorsDark["interactive-disabled"],
-  "--color-divider": semanticColorsDark["divider"]
+  "--color-divider": semanticColorsDark["divider"],
+  "--color-brand-primary-hover": semanticColorsDark["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsDark["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsDark["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsDark["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsDark["status-success-light"],
+  "--color-status-success-dark": semanticColorsDark["status-success-dark"],
+  "--color-status-error-light": semanticColorsDark["status-error-light"],
+  "--color-status-error-dark": semanticColorsDark["status-error-dark"],
+  "--color-status-warning-light": semanticColorsDark["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsDark["status-warning-dark"],
+  "--color-status-info-light": semanticColorsDark["status-info-light"],
+  "--color-status-info-dark": semanticColorsDark["status-info-dark"],
+  "--color-on-status-success": semanticColorsDark["on-status-success"],
+  "--color-on-status-error": semanticColorsDark["on-status-error"],
+  "--color-on-status-warning": semanticColorsDark["on-status-warning"],
+  "--color-on-status-info": semanticColorsDark["on-status-info"],
+  "--color-result-improve": semanticColorsDark["result-improve"],
+  "--color-result-improve-light": semanticColorsDark["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsDark["result-improve-dark"],
+  "--color-result-degrade": semanticColorsDark["result-degrade"],
+  "--color-result-degrade-light": semanticColorsDark["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsDark["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsDark["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsDark["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsDark["result-neutral"],
+  "--color-on-result-improve": semanticColorsDark["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsDark["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsDark["on-result-inconclusive"],
+  "--color-data-1": semanticColorsDark["data-1"],
+  "--color-data-2": semanticColorsDark["data-2"],
+  "--color-data-3": semanticColorsDark["data-3"],
+  "--color-data-4": semanticColorsDark["data-4"],
+  "--color-data-5": semanticColorsDark["data-5"],
+  "--color-data-6": semanticColorsDark["data-6"],
+  "--color-data-7": semanticColorsDark["data-7"],
+  "--color-data-8": semanticColorsDark["data-8"],
+  "--color-data-9": semanticColorsDark["data-9"],
+  "--color-data-10": semanticColorsDark["data-10"],
+  "--color-text-link-hover": semanticColorsDark["text-link-hover"],
+  "--color-surface-overlay": semanticColorsDark["surface-overlay"],
+  "--color-surface-input": semanticColorsDark["surface-input"],
+  "--color-border-input": semanticColorsDark["border-input"],
+  "--color-border-input-hover": semanticColorsDark["border-input-hover"],
+  "--color-border-input-focus": semanticColorsDark["border-input-focus"],
+  "--color-border-input-error": semanticColorsDark["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsDark["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsDark["avatar-background"],
+  "--color-avatar-text": semanticColorsDark["avatar-text"],
+  ...themeIndependentCSSVars
 };
 function getThemeCSSVars(mode) {
   return mode === "dark" ? darkThemeCSSVars : lightThemeCSSVars;
@@ -2042,6 +2161,21 @@ function validateCssPropertyManifest(candidate) {
 function isCssPropertyManifest(candidate) {
   return validateCssPropertyManifest(candidate).valid;
 }
+var MODE_VARS = {
+  dark: nativewind.vars(darkThemeCSSVars),
+  light: nativewind.vars(lightThemeCSSVars)
+};
+function ThemeProvider({
+  mode = "dark",
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(reactNative.View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
+}
+function resolveColor(token, mode = "dark") {
+  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
 
 // src/theme/presets/apply.ts
 function colorKeyToVar(key) {
@@ -4867,7 +5001,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([]);
@@ -5982,7 +6116,7 @@ function Table({
         selectable,
         allRowIds: rowIds
       },
-      children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx(reactNative.View, { className: "w-full min-w-full", children: isLoading ? /* @__PURE__ */ jsx(TableLoadingSkeleton, { rowCount: loadingRowCount }) : children }) }) })
+      children: /* @__PURE__ */ jsx(reactNative.View, { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(reactNative.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx(reactNative.View, { role: "table", className: "w-full min-w-full", children: isLoading ? /* @__PURE__ */ jsx(TableLoadingSkeleton, { rowCount: loadingRowCount }) : children }) }) })
     }
   );
 }
@@ -5990,14 +6124,14 @@ function TableHeader({ children, className }) {
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
-      accessibilityRole: "none",
+      role: "rowgroup",
       className: cn("bg-background-subtle rounded-t-lg", className),
       children
     }
   );
 }
 function TableBody({ children, className }) {
-  return /* @__PURE__ */ jsx(reactNative.View, { accessibilityRole: "none", className, children });
+  return /* @__PURE__ */ jsx(reactNative.View, { role: "rowgroup", className, children });
 }
 function TableRow({
   isSelected = false,
@@ -6009,7 +6143,7 @@ function TableRow({
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
-      accessibilityRole: "none",
+      role: "row",
       className: cn(
         "flex-row border-b border-divider",
         isHoverable && "web:hover:bg-interactive-hover",
@@ -6033,6 +6167,7 @@ function TableHeaderCell({
   const { sortColumn, sortDirection, onSort } = React24.useContext(TableContext);
   const isSorted = sortKey && sortColumn === sortKey;
   const isSortable = !!sortKey && !!onSort;
+  const ariaSort = isSorted ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : "none";
   const handlePress = (e) => {
     if (isSortable && sortKey) {
       onSort(sortKey);
@@ -6059,26 +6194,34 @@ function TableHeaderCell({
   ] });
   if (isSortable) {
     return /* @__PURE__ */ jsx(
-      reactNative.Pressable,
+      reactNative.View,
       {
-        accessibilityRole: "button",
-        accessibilityLabel: `Sort by ${children}`,
-        onPress: handlePress,
+        role: "columnheader",
+        "aria-sort": ariaSort,
         style: width ? { width } : { flex: 1 },
-        className: cn(
-          "flex-row items-center px-4 py-3",
-          alignStyles3[align],
-          "web:hover:bg-interactive-hover active:bg-interactive-active",
-          className
-        ),
-        ...props,
-        children: content
+        children: /* @__PURE__ */ jsx(
+          reactNative.Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `Sort by ${children}`,
+            onPress: handlePress,
+            className: cn(
+              "flex-row items-center px-4 py-3",
+              alignStyles3[align],
+              "web:hover:bg-interactive-hover active:bg-interactive-active",
+              className
+            ),
+            ...props,
+            children: content
+          }
+        )
       }
     );
   }
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
+      role: "columnheader",
       style: width ? { width } : { flex: 1 },
       className: cn(
         "flex-row items-center px-4 py-3",
@@ -6104,6 +6247,7 @@ function TableCell({
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
+      role: "cell",
       style: width ? { width } : { flex: 1 },
       className: cn(
         "justify-center px-4 py-3.5",
@@ -6985,36 +7129,6 @@ function StatusDot({
   }
   return /* @__PURE__ */ jsx(reactNative.View, { className, ...props, children: dot });
 }
-
-// src/theme/workout-tokens.ts
-var WORKOUT_TOKENS = {
-  // BodyMap volume heatmap scale (drive dynamic SVG fills, so inline values).
-  // Maps weekly-volume status against MEV/MAV/MRV landmarks to a fill color.
-  heatmap: {
-    none: "#E0E0E0",
-    // gray — no training data
-    under: "#4A90D9",
-    // cool blue — below MEV
-    maintenance: "#F5C842",
-    // warm yellow — MEV to MAV
-    productive: "#4CAF50",
-    // green — MAV to MRV
-    approaching: "#FFA502",
-    // orange — near MRV
-    over: "#FF6B35"
-    // red-orange — over MRV
-  },
-  // Border colors (use inline to avoid 'border' class pitfall)
-  border: {
-    default: "#1F1F1F",
-    strong: "#2C2C2C"},
-  // Surface colors for inline use
-  surface: {
-    raised: "#1C1C1C",
-    elevated: "#191919"
-  }};
-
-// src/components/custom/Workout/PlaceholderStrip.tsx
 function SingleStrip({
   width,
   className,
@@ -7023,14 +7137,13 @@ function SingleStrip({
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
-      className: cn(className),
+      className: cn("border-border-strong", className),
       style: [
         {
           height: 3,
           backgroundColor: "transparent",
           borderWidth: 1,
           borderStyle: "dashed",
-          borderColor: WORKOUT_TOKENS.border.strong,
           borderRadius: 1,
           opacity: 0.5
         },
@@ -7064,13 +7177,13 @@ function SegmentedStrip({
       children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
         reactNative.View,
         {
+          className: "border-border-strong",
           style: {
             flex: 1,
             height: 3,
             backgroundColor: "transparent",
             borderWidth: 1,
             borderStyle: "dashed",
-            borderColor: WORKOUT_TOKENS.border.strong,
             borderRadius: 1,
             minWidth: 4
           },
@@ -7092,6 +7205,63 @@ 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;
+}
+function rpeColor(rpe) {
+  if (rpe >= 9.5) return WORKOUT_TOKENS.scale.red;
+  if (rpe >= 8.5) return WORKOUT_TOKENS.scale.orange;
+  if (rpe >= 7) return WORKOUT_TOKENS.scale.yellow;
+  return WORKOUT_TOKENS.scale.green;
+}
+function roundWeight(weight) {
+  return Math.round(weight);
+}
+function formatVelocity(velocity) {
+  return velocity.toFixed(2);
+}
+function roundTempo(tempo) {
+  return tempo.map((v) => Math.round(v * 10) / 10);
+}
+function formatSignedPct(ratio) {
+  const pct = Math.round(ratio * 100);
+  return `${pct > 0 ? "+" : ""}${pct}%`;
+}
+function formatPrescription(p) {
+  if (p == null) return null;
+  let reps = null;
+  if (p.repsLow != null && p.repsHigh != null) {
+    reps = p.repsLow === p.repsHigh ? `${p.repsLow}` : `${p.repsLow}\u2013${p.repsHigh}`;
+  } else if (p.repsLow != null) {
+    reps = `${p.repsLow}`;
+  }
+  const weight = p.weightLbs != null ? `${p.weightLbs} lb` : null;
+  const head = [reps, weight].filter((s) => s != null).join(" @ ");
+  const rpe = p.rpe != null ? `RPE ${p.rpe}` : null;
+  const full = [head.length > 0 ? head : null, rpe].filter((s) => s != null).join(" \xB7 ");
+  return full.length > 0 ? full : null;
+}
+
+// src/components/custom/Workout/TempoDisplay.tsx
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
 var phaseColors = {
@@ -7147,7 +7317,7 @@ function TempoDisplay({
   ...props
 }) {
   const [showTooltip, setShowTooltip] = React24.useState(false);
-  const [eccentric, pauseBottom, concentric, pauseTop] = tempo;
+  const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo);
   const isSm = size === "sm";
   const fontSize = isSm ? 9 : 11;
   const monoColor = TEXT_TERTIARY;
@@ -7300,6 +7470,198 @@ function TempoDisplay({
     }
   );
 }
+
+// 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/components/custom/Workout/TempoBar.tsx
+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();
+}
 function getDotColor(deviation) {
   const abs = Math.abs(deviation);
   if (deviation < -0.3) return "#14B8A6";
@@ -7655,12 +8017,7 @@ function WorkoutPill({
   }
   return pill;
 }
-var VEL_COLORS = {
-  green: "#2ed573",
-  yellow: "#ffd43b",
-  orange: "#ffa502",
-  red: "#ff4757"
-};
+var VEL_COLORS = WORKOUT_TOKENS.scale;
 function getVelocityZoneColor(velocity) {
   if (velocity >= 1) return "vel-green";
   if (velocity >= 0.75) return "vel-yellow";
@@ -7787,7 +8144,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,
@@ -7798,7 +8155,6 @@ function VelocityStrip({
           paddingBottom: expanded ? 24 : 0,
           paddingHorizontal: expanded ? 6 : 0,
           paddingVertical: expanded ? void 0 : 8,
-          backgroundColor: expanded ? "#1C1C1C" : "transparent",
           overflow: expanded ? "visible" : "hidden"
         }
       ],
@@ -7813,7 +8169,7 @@ function VelocityStrip({
             style: { flexDirection: "row", flex: 1, gap: 2, alignItems: "flex-end" },
             children: velocities.map((v, i) => {
               const zone = getVelocityZoneColor(v);
-              const barHeightPct = Math.round(v / (maxVelocity * 1.15) * 100);
+              const barHeightPct = maxVelocity > 0 ? Math.round(v / (maxVelocity * 1.15) * 100) : 0;
               const bar = /* @__PURE__ */ jsxs(
                 reactNative.View,
                 {
@@ -7822,9 +8178,10 @@ 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: "#9CA3AF" },
+                        className: "text-text-secondary",
+                        style: { fontSize: 8, fontWeight: "600" },
                         testID: `velocity-label-${i}`,
-                        children: v.toFixed(2)
+                        children: formatVelocity(v)
                       }
                     ) }),
                     /* @__PURE__ */ jsx(
@@ -7840,7 +8197,7 @@ function VelocityStrip({
                         },
                         testID: `velocity-bar-${i}`,
                         accessibilityRole: "image",
-                        accessibilityLabel: `Rep ${i + 1}: ${v.toFixed(2)} meters per second`
+                        accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
                       }
                     )
                   ]
@@ -7854,7 +8211,7 @@ function VelocityStrip({
                     style: { flex: 1, height: "100%" },
                     onPress: () => onRepPress(i, v),
                     accessibilityRole: "button",
-                    accessibilityLabel: `Rep ${i + 1}: ${v.toFixed(2)} meters per second, tap for details`,
+                    accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`,
                     testID: `velocity-bar-pressable-${i}`,
                     children: bar
                   },
@@ -7882,9 +8239,9 @@ function VelocityStrip({
               /* @__PURE__ */ jsxs(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
-                    color: "#9CA3AF",
                     fontFamily: "Inter, sans-serif"
                   },
                   children: [
@@ -7892,7 +8249,7 @@ function VelocityStrip({
                     " ",
                     "\xB7",
                     " ",
-                    meanVelocity.toFixed(2),
+                    formatVelocity(meanVelocity),
                     " m/s"
                   ]
                 }
@@ -7900,9 +8257,9 @@ function VelocityStrip({
               /* @__PURE__ */ jsxs(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
-                    color: "#9CA3AF",
                     fontFamily: "Inter, sans-serif",
                     ...getLossStyle(loss)
                   },
@@ -7952,16 +8309,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",
@@ -7985,11 +8340,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
@@ -8163,15 +8518,9 @@ function Sparkline({
     }
   );
 }
-function getRPEColor(rpe) {
-  if (rpe >= 9.5) return "#ff4757";
-  if (rpe >= 8.5) return "#ffa502";
-  if (rpe >= 7) return "#ffd43b";
-  return "#2ed573";
-}
 function formatAccessibilityLabel(setNumber, reps, weight, unit) {
   const repsText = reps != null ? `${reps} reps` : "no reps";
-  const weightText = weight != null ? `at ${weight} ${unit}` : "";
+  const weightText = weight != null ? `at ${roundWeight(weight)} ${unit}` : "";
   return `Set ${setNumber}: ${repsText}${weightText ? ` ${weightText}` : ""}`;
 }
 function SetRow({
@@ -8245,11 +8594,11 @@ function SetRow({
             ) : /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   fontSize: 13,
                   fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  color: "#9CA3AF"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: setNumber
               }
@@ -8264,12 +8613,12 @@ function SetRow({
             children: /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   fontSize: 12,
-                  fontFamily: "Inter, sans-serif",
-                  color: "#9CA3AF"
+                  fontFamily: "Inter, sans-serif"
                 },
-                children: previous ? `${previous.reps} x ${previous.weight}` : "\u2014"
+                children: previous ? `${previous.reps} x ${roundWeight(previous.weight)}` : "\u2014"
               }
             )
           }
@@ -8282,11 +8631,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: "#6B7280"
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "set-row-target-reps",
                 children: targets.reps
@@ -8294,11 +8643,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 ? "#F3F4F6" : "#6B7280"
+                  fontFamily: "Inter, sans-serif"
                 },
                 children: reps != null ? reps : "\u2014"
               }
@@ -8313,25 +8662,25 @@ 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: "#6B7280"
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "set-row-target-weight",
-                children: targets.weight
+                children: roundWeight(targets.weight)
               }
             ) : /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: weight != null ? "text-text-primary" : "text-text-tertiary",
                 style: {
                   fontSize: 14,
                   fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  color: weight != null ? "#F3F4F6" : "#6B7280"
+                  fontFamily: "Inter, sans-serif"
                 },
-                children: weight != null ? weight : "\u2014"
+                children: weight != null ? roundWeight(weight) : "\u2014"
               }
             )
           }
@@ -8344,13 +8693,16 @@ 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 ? getRPEColor(rpe) : "#6B7280"
+                  // 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 ? rpe : "\u2014"
+                children: rpe != null ? roundRpe(rpe) : "\u2014"
               }
             )
           }
@@ -8394,18 +8746,14 @@ function SetRow({
   );
 }
 var BRAND_PRIMARY2 = "#FF7900";
-var TEXT_PRIMARY = "#F3F4F6";
-var TEXT_TERTIARY2 = "#6B7280";
+var INPUT_CLASSNAME = "bg-surface-raised border-border-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
   fontWeight: "600",
   fontFamily: "Inter, sans-serif",
-  backgroundColor: WORKOUT_TOKENS.surface.raised,
   borderWidth: 1,
-  borderColor: WORKOUT_TOKENS.border.strong,
   borderRadius: 6,
   textAlign: "center",
-  color: TEXT_PRIMARY,
   paddingVertical: 5,
   paddingHorizontal: 2
 };
@@ -8427,11 +8775,11 @@ function InputBar({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-elevated",
       style: {
         width: "100%",
-        backgroundColor: WORKOUT_TOKENS.surface.elevated,
         borderTopWidth: 1,
-        borderTopColor: WORKOUT_TOKENS.border.default,
+        borderTopColor: resolveColor("border-default"),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -8446,11 +8794,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,
@@ -8460,10 +8808,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
@@ -8476,6 +8824,7 @@ function InputBar({
             {
               value: reps,
               onChangeText: onRepsChange,
+              className: INPUT_CLASSNAME,
               style: { ...inputStyle, width: 36 },
               accessibilityLabel: "Reps",
               testID: "input-bar-reps",
@@ -8485,10 +8834,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"
             }
@@ -8498,6 +8847,7 @@ function InputBar({
             {
               value: weight,
               onChangeText: onWeightChange,
+              className: INPUT_CLASSNAME,
               style: { ...inputStyle, width: 52 },
               accessibilityLabel: `Weight in ${unit}`,
               testID: "input-bar-weight",
@@ -8507,11 +8857,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
@@ -8566,15 +8916,16 @@ function RestTimer({
   const minutes = Math.floor(remainingSec / 60);
   const seconds = remainingSec % 60;
   const timeDisplay = `${minutes}:${String(seconds).padStart(2, "0")}`;
-  const progressPct = Math.min(100, elapsedMs / (totalSeconds * 1e3) * 100);
+  const totalMs = totalSeconds * 1e3;
+  const progressPct = totalMs > 0 ? Math.min(100, elapsedMs / totalMs * 100) : 100;
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-raised",
       style: {
         width: "100%",
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
         borderTopWidth: 1,
-        borderTopColor: WORKOUT_TOKENS.border.default,
+        borderTopColor: resolveColor("border-default"),
         paddingVertical: 12,
         paddingHorizontal: 16
       },
@@ -8596,13 +8947,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: "#9CA3AF"
+                      letterSpacing: 1
                     },
                     testID: "rest-timer-label",
                     children: "REST"
@@ -8611,10 +8962,10 @@ function RestTimer({
                 nextSetInfo != null && /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       fontSize: 11,
                       fontFamily: "Inter, sans-serif",
-                      color: "#6B7280",
                       marginTop: 2
                     },
                     testID: "rest-timer-next-set",
@@ -8625,11 +8976,11 @@ function RestTimer({
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-primary",
                   style: {
                     fontSize: 28,
                     fontFamily: '"Space Grotesk", sans-serif',
                     fontWeight: "700",
-                    color: "#F3F4F6",
                     fontVariant: ["tabular-nums"],
                     letterSpacing: -0.5
                   },
@@ -8643,9 +8994,9 @@ function RestTimer({
         /* @__PURE__ */ jsx(
           reactNative.View,
           {
+            className: "bg-border",
             style: {
               height: 3,
-              backgroundColor: WORKOUT_TOKENS.border.default,
               borderRadius: 2,
               marginBottom: 12
             },
@@ -8681,11 +9032,11 @@ function RestTimer({
               children: /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
-                    fontWeight: "600",
-                    color: "#9CA3AF"
+                    fontWeight: "600"
                   },
                   children: "+30s"
                 }
@@ -8724,11 +9075,9 @@ function RestTimer({
     }
   );
 }
-var COLORS = {
-  textPrimary: "#F3F4F6",
-  textSecondary: "#9CA3AF",
-  textTertiary: "#6B7280"};
-var COLUMN_HEADERS = ["SET", "PREV", "REPS", "LBS", "RPE"];
+function buildColumnHeaders(unit) {
+  return ["SET", "PREV", "REPS", unit.toUpperCase(), "RPE"];
+}
 function getSupersetBorderRadius(position) {
   switch (position) {
     case "first":
@@ -8769,7 +9118,7 @@ function getSupersetMargin(position) {
 }
 function formatSummary(summary) {
   if (!summary) return "";
-  return `${summary.sets}\xD7${summary.reps} @ ${summary.weight} ${summary.unit}`;
+  return `${summary.sets}\xD7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`;
 }
 function formatAccessibilityLabel2(name, summary, prescription) {
   if (summary) return `${name}, ${formatSummary(summary)}`;
@@ -8803,11 +9152,11 @@ function CollapsedCard({
       children: /* @__PURE__ */ jsxs(
         reactNative.View,
         {
+          className: pressed ? "bg-surface-raised" : void 0,
           style: {
             padding: 12,
             paddingHorizontal: 14,
             cursor: "pointer",
-            backgroundColor: pressed ? WORKOUT_TOKENS.surface.raised : "transparent",
             ...borderRadius,
             ...supersetMargin
           },
@@ -8821,11 +9170,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
@@ -8835,10 +9184,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",
@@ -8848,7 +9197,7 @@ function CollapsedCard({
                   e1rm && /* @__PURE__ */ jsx(
                     WeightBadge,
                     {
-                      value: e1rm.value,
+                      value: roundWeight(e1rm.value),
                       unit: e1rm.unit,
                       size: "sm",
                       showIcon: false,
@@ -8903,13 +9252,14 @@ function ExpandedCard({
 }) {
   const borderRadius = getSupersetBorderRadius(supersetPosition);
   const supersetMargin = getSupersetMargin(supersetPosition);
+  const unit = summary?.unit ?? sets?.[0]?.unit ?? "lbs";
+  const columnHeaders = buildColumnHeaders(unit);
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
+      className: "bg-surface-elevated border-border",
       style: {
-        backgroundColor: WORKOUT_TOKENS.surface.elevated,
         borderWidth: 1,
-        borderColor: WORKOUT_TOKENS.border.default,
         ...borderRadius,
         ...supersetMargin
       },
@@ -8932,17 +9282,17 @@ function ExpandedCard({
                   paddingHorizontal: 14,
                   paddingBottom: 10,
                   borderBottomWidth: 1,
-                  borderBottomColor: WORKOUT_TOKENS.border.default
+                  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
@@ -8952,10 +9302,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",
@@ -8965,7 +9315,7 @@ function ExpandedCard({
                   e1rm && /* @__PURE__ */ jsx(
                     WeightBadge,
                     {
-                      value: e1rm.value,
+                      value: roundWeight(e1rm.value),
                       unit: e1rm.unit,
                       size: "sm",
                       showIcon: false,
@@ -8989,7 +9339,7 @@ function ExpandedCard({
               paddingBottom: 4
             },
             testID: "exercise-card-column-headers",
-            children: COLUMN_HEADERS.map((header, i) => {
+            children: columnHeaders.map((header, i) => {
               const widths = [36, void 0, 44, 56, 36];
               const width = widths[i];
               const isFlex = width === void 0;
@@ -9006,13 +9356,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
                     }
@@ -9052,11 +9402,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
@@ -9065,10 +9415,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",
@@ -9079,10 +9429,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
@@ -9183,10 +9533,11 @@ function MesoSegment({ meso, isActive, onPress }) {
     }).start();
   };
   const progress = meso.status === "current" ? clampProgress(meso.currentWeek, meso.weekCount) : 0;
+  const segmentFlex = Math.max(1, meso.weekCount);
   return /* @__PURE__ */ jsx(
     reactNative.Pressable,
     {
-      style: { flex: meso.weekCount },
+      style: { flex: segmentFlex },
       onPress: () => onPress(meso.id),
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
@@ -9319,11 +9670,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 : "#F3F4F6"
+                    color: isCurrent ? BRAND_PRIMARY5 : void 0
                   },
                   accessibilityElementsHidden: true,
                   children: `W${weekNumber}`
@@ -9362,19 +9714,16 @@ function WeekRow({
     }
   );
 }
-var COLORS2 = {
-  textPrimary: "#F3F4F6",
-  textSecondary: "#9CA3AF",
-  textTertiary: "#6B7280",
+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",
@@ -9411,11 +9760,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
@@ -9425,10 +9774,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
@@ -9438,11 +9787,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)
@@ -9473,7 +9822,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",
@@ -9513,8 +9862,6 @@ var BRAND_PRIMARY6 = "#FF7900";
 var BRAND_PRIMARY_DARK = "#C45E00";
 var BRAND_PRIMARY_LIGHT = "#FFB066";
 var BORDER_DEFAULT = "#1F1F1F";
-var TEXT_PRIMARY2 = "#F3F4F6";
-var TEXT_SECONDARY = "#9CA3AF";
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY6, BRAND_PRIMARY_LIGHT];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
@@ -9557,11 +9904,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
@@ -9572,11 +9919,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}`
@@ -9670,11 +10017,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 = "#1C1C1C";
-var BORDER_DEFAULT2 = "#1F1F1F";
-var TEXT_PRIMARY3 = "#F3F4F6";
-var TEXT_SECONDARY2 = "#9CA3AF";
-var TEXT_TERTIARY3 = "#6B7280";
+var BORDER_DEFAULT2 = resolveColor("border-default");
 var TYPE_LABELS = {
   e1rm: "e1RM",
   weight: "Weight",
@@ -9700,14 +10043,13 @@ 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 } : {}
@@ -9718,12 +10060,12 @@ function PrRecordRow({ record, index }) {
         /* @__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
@@ -9732,11 +10074,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
@@ -9745,12 +10087,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
@@ -9788,13 +10130,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"
           }
@@ -9810,11 +10152,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
@@ -9829,7 +10171,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" })
                 }
               )
             ]
@@ -9838,11 +10180,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"
           }
@@ -9863,8 +10205,6 @@ 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 = "#F3F4F6";
-var TEXT_SECONDARY3 = "#9CA3AF";
 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}"],
@@ -9896,7 +10236,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
       }
@@ -9920,14 +10261,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 : WORKOUT_TOKENS.border.default,
-                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : WORKOUT_TOKENS.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 }]
               }),
@@ -9948,13 +10290,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: WORKOUT_TOKENS.surface.raised,
         alignItems: "center",
         justifyContent: "center"
       },
@@ -9974,13 +10316,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: WORKOUT_TOKENS.border.default,
-        backgroundColor: WORKOUT_TOKENS.surface.raised
+        borderWidth: 1
       },
       testID: "readiness-check-warmup",
       children: [
@@ -9988,7 +10329,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)
             }
@@ -9998,7 +10340,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
           }
@@ -10020,7 +10363,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?"
         }
@@ -10053,14 +10397,11 @@ function ReadinessCheck({
 var BRAND_PRIMARY9 = "#FF7900";
 var BRAND_PRIMARY_DARK2 = "#C45E00";
 var BRAND_PRIMARY_LIGHT2 = "#FFB066";
-var TEXT_PRIMARY5 = "#F3F4F6";
-var TEXT_SECONDARY4 = "#9CA3AF";
-var TEXT_TERTIARY4 = "#6B7280";
 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, #191919 0%, rgba(25,25,25,0.95) 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 },
@@ -10087,7 +10428,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}`
@@ -10134,13 +10476,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
       }
@@ -10148,12 +10490,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
       }
@@ -10185,13 +10527,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
                 }
@@ -10199,11 +10541,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
                 }
@@ -10240,6 +10582,7 @@ function Gauge({ gauge }) {
               /* @__PURE__ */ jsx(
                 reactNative.View,
                 {
+                  className: "border-text-primary",
                   style: {
                     position: "absolute",
                     left: `${percentage}%`,
@@ -10249,7 +10592,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)"
                   },
@@ -10312,12 +10654,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
@@ -10330,11 +10672,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
@@ -10366,11 +10708,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)
                 }
@@ -10415,15 +10757,11 @@ function MesoStatusCard({
   );
 }
 var BRAND_PRIMARY10 = "#FF7900";
-var TEXT_PRIMARY6 = "#F3F4F6";
-var TEXT_SECONDARY5 = "#9CA3AF";
-var TEXT_TERTIARY5 = "#6B7280";
-var BORDER_STRONG = "#2C2C2C";
+var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
 var STATUS_SUCCESS2 = "#14B8A6";
 var STATUS_ERROR2 = "#D14343";
 var STATUS_WARNING2 = "#FFB020";
 var GRID_LINE = "rgba(255,255,255,0.06)";
-var TOOLTIP_BG = "rgba(28,28,28,0.95)";
 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)";
@@ -10431,8 +10769,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)}`;
@@ -10604,7 +10942,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" })
           }
         )
       }
@@ -10648,6 +10986,7 @@ function StrengthTrendChart({
                     children: /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
+                        className: "text-text-tertiary",
                         style: {
                           position: "absolute",
                           left: -PLOT_LEFT,
@@ -10655,8 +10994,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
                       }
@@ -10699,7 +11037,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.projection,
-                          color: TEXT_TERTIARY5,
+                          color: PROJECTION_LINE_COLOR,
                           strokeWidth: 2,
                           dashed: true,
                           testID: "strength-trend-chart-projection-segment"
@@ -10775,6 +11113,7 @@ function StrengthTrendChart({
             {
               testID: "strength-trend-chart-tooltip",
               accessibilityElementsHidden: true,
+              className: "bg-surface-elevated border-border-strong",
               style: {
                 position: "absolute",
                 left: Math.max(
@@ -10783,9 +11122,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
@@ -10794,10 +11131,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
                   }
@@ -10805,12 +11142,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}`
                   }
@@ -10843,14 +11180,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
               },
@@ -10894,7 +11231,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(
@@ -10905,15 +11242,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" })
               ] })
             ]
           }
@@ -10926,7 +11263,6 @@ var STATUS_SUCCESS3 = "#14B8A6";
 var STATUS_WARNING3 = "#FFB020";
 var STATUS_INFO = "#2196F3";
 var DOT_BORDER = "#F3F4F6";
-var TEXT_TERTIARY6 = "#6B7280";
 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)";
@@ -10968,8 +11304,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];
@@ -11207,6 +11543,7 @@ function CapacityBandChart({
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-tertiary",
                   style: {
                     position: "absolute",
                     left: PADDING_LEFT / 2 - 14,
@@ -11215,7 +11552,6 @@ function CapacityBandChart({
                     textAlign: "center",
                     fontSize: 9,
                     fontFamily: "Inter, sans-serif",
-                    color: TEXT_TERTIARY6,
                     transform: [{ rotate: "-90deg" }]
                   },
                   accessibilityElementsHidden: true,
@@ -11229,6 +11565,7 @@ function CapacityBandChart({
                 return /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
+                    className: "text-text-tertiary",
                     style: {
                       position: "absolute",
                       left: toX(point.date) - 14,
@@ -11236,8 +11573,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",
@@ -11299,854 +11635,1002 @@ function CapacityBandChart({
     }
   );
 }
-
-// src/components/custom/Workout/muscleTaxonomy.ts
-var MuscleGroup = /* @__PURE__ */ ((MuscleGroup4) => {
-  MuscleGroup4["CHEST"] = "chest";
-  MuscleGroup4["FRONT_DELTS"] = "front_delts";
-  MuscleGroup4["SIDE_DELTS"] = "side_delts";
-  MuscleGroup4["TRICEPS"] = "triceps";
-  MuscleGroup4["LATS"] = "lats";
-  MuscleGroup4["UPPER_BACK"] = "upper_back";
-  MuscleGroup4["REAR_DELTS"] = "rear_delts";
-  MuscleGroup4["BICEPS"] = "biceps";
-  MuscleGroup4["FOREARMS"] = "forearms";
-  MuscleGroup4["QUADS"] = "quads";
-  MuscleGroup4["HAMSTRINGS"] = "hamstrings";
-  MuscleGroup4["GLUTES"] = "glutes";
-  MuscleGroup4["CALVES"] = "calves";
-  MuscleGroup4["ABS"] = "abs";
-  MuscleGroup4["OBLIQUES"] = "obliques";
-  return MuscleGroup4;
-})(MuscleGroup || {});
-var SimpleMuscleGroup = /* @__PURE__ */ ((SimpleMuscleGroup3) => {
-  SimpleMuscleGroup3["CHEST"] = "chest";
-  SimpleMuscleGroup3["BACK"] = "back";
-  SimpleMuscleGroup3["SHOULDERS"] = "shoulders";
-  SimpleMuscleGroup3["BICEPS"] = "biceps";
-  SimpleMuscleGroup3["TRICEPS"] = "triceps";
-  SimpleMuscleGroup3["LEGS"] = "legs";
-  SimpleMuscleGroup3["CORE"] = "core";
-  SimpleMuscleGroup3["FOREARMS"] = "forearms";
-  return SimpleMuscleGroup3;
-})(SimpleMuscleGroup || {});
-var SIMPLE_TO_DETAILED = {
-  ["chest" /* CHEST */]: ["chest" /* CHEST */],
-  ["back" /* BACK */]: ["lats" /* LATS */, "upper_back" /* UPPER_BACK */],
-  ["shoulders" /* SHOULDERS */]: [
-    "front_delts" /* FRONT_DELTS */,
-    "side_delts" /* SIDE_DELTS */,
-    "rear_delts" /* REAR_DELTS */
-  ],
-  ["biceps" /* BICEPS */]: ["biceps" /* BICEPS */],
-  ["triceps" /* TRICEPS */]: ["triceps" /* TRICEPS */],
-  ["legs" /* LEGS */]: [
-    "quads" /* QUADS */,
-    "hamstrings" /* HAMSTRINGS */,
-    "glutes" /* GLUTES */,
-    "calves" /* CALVES */
-  ],
-  ["core" /* CORE */]: ["abs" /* ABS */, "obliques" /* OBLIQUES */],
-  ["forearms" /* FOREARMS */]: ["forearms" /* FOREARMS */]
-};
-var DETAILED_TO_SIMPLE = Object.entries(
-  SIMPLE_TO_DETAILED
-).reduce(
-  (acc, [simple, groups]) => {
-    for (const group of groups) {
-      acc[group] = simple;
-    }
-    return acc;
-  },
-  {}
-);
-var MUSCLE_TO_CATEGORY = {
-  ["chest" /* CHEST */]: "push",
-  ["front_delts" /* FRONT_DELTS */]: "push",
-  ["side_delts" /* SIDE_DELTS */]: "push",
-  ["triceps" /* TRICEPS */]: "push",
-  ["lats" /* LATS */]: "pull",
-  ["upper_back" /* UPPER_BACK */]: "pull",
-  ["rear_delts" /* REAR_DELTS */]: "pull",
-  ["biceps" /* BICEPS */]: "pull",
-  ["forearms" /* FOREARMS */]: "pull",
-  ["quads" /* QUADS */]: "legs",
-  ["hamstrings" /* HAMSTRINGS */]: "legs",
-  ["glutes" /* GLUTES */]: "legs",
-  ["calves" /* CALVES */]: "legs",
-  ["abs" /* ABS */]: "core",
-  ["obliques" /* OBLIQUES */]: "core"
-};
-var MUSCLE_TO_SVG_SLUGS = {
-  ["chest" /* CHEST */]: ["chest"],
-  ["front_delts" /* FRONT_DELTS */]: ["deltoids"],
-  ["side_delts" /* SIDE_DELTS */]: ["deltoids"],
-  ["rear_delts" /* REAR_DELTS */]: ["deltoids"],
-  ["triceps" /* TRICEPS */]: ["triceps"],
-  ["lats" /* LATS */]: ["upper-back"],
-  ["upper_back" /* UPPER_BACK */]: ["upper-back", "trapezius"],
-  ["biceps" /* BICEPS */]: ["biceps"],
-  ["forearms" /* FOREARMS */]: ["forearm"],
-  ["quads" /* QUADS */]: ["quadriceps"],
-  ["hamstrings" /* HAMSTRINGS */]: ["hamstring"],
-  ["glutes" /* GLUTES */]: ["gluteal"],
-  ["calves" /* CALVES */]: ["calves"],
-  ["abs" /* ABS */]: ["abs"],
-  ["obliques" /* OBLIQUES */]: ["obliques"]
-};
-var MUSCLE_DISPLAY_NAMES = {
-  ["chest" /* CHEST */]: "Chest",
-  ["front_delts" /* FRONT_DELTS */]: "Front Delts",
-  ["side_delts" /* SIDE_DELTS */]: "Side Delts",
-  ["rear_delts" /* REAR_DELTS */]: "Rear Delts",
-  ["triceps" /* TRICEPS */]: "Triceps",
-  ["lats" /* LATS */]: "Lats",
-  ["upper_back" /* UPPER_BACK */]: "Upper Back",
-  ["biceps" /* BICEPS */]: "Biceps",
-  ["forearms" /* FOREARMS */]: "Forearms",
-  ["quads" /* QUADS */]: "Quads",
-  ["hamstrings" /* HAMSTRINGS */]: "Hamstrings",
-  ["glutes" /* GLUTES */]: "Glutes",
-  ["calves" /* CALVES */]: "Calves",
-  ["abs" /* ABS */]: "Abs",
-  ["obliques" /* OBLIQUES */]: "Obliques"
-};
-var SIMPLE_DISPLAY_NAMES = {
-  ["chest" /* CHEST */]: "Chest",
-  ["back" /* BACK */]: "Back",
-  ["shoulders" /* SHOULDERS */]: "Shoulders",
-  ["biceps" /* BICEPS */]: "Biceps",
-  ["triceps" /* TRICEPS */]: "Triceps",
-  ["legs" /* LEGS */]: "Legs",
-  ["core" /* CORE */]: "Core",
-  ["forearms" /* FOREARMS */]: "Forearms"
-};
-var DEFAULT_VOLUME_LANDMARKS = {
-  ["chest" /* CHEST */]: { mev: 8, mav: 14, mrv: 20 },
-  ["lats" /* LATS */]: { mev: 8, mav: 14, mrv: 20 },
-  ["upper_back" /* UPPER_BACK */]: { mev: 6, mav: 12, mrv: 18 },
-  ["front_delts" /* FRONT_DELTS */]: { mev: 2, mav: 6, mrv: 10 },
-  ["side_delts" /* SIDE_DELTS */]: { mev: 6, mav: 14, mrv: 22 },
-  ["rear_delts" /* REAR_DELTS */]: { mev: 6, mav: 12, mrv: 18 },
-  ["biceps" /* BICEPS */]: { mev: 4, mav: 10, mrv: 18 },
-  ["triceps" /* TRICEPS */]: { mev: 4, mav: 8, mrv: 14 },
-  ["forearms" /* FOREARMS */]: { mev: 2, mav: 6, mrv: 12 },
-  ["quads" /* QUADS */]: { mev: 6, mav: 12, mrv: 18 },
-  ["hamstrings" /* HAMSTRINGS */]: { mev: 4, mav: 10, mrv: 16 },
-  ["glutes" /* GLUTES */]: { mev: 4, mav: 10, mrv: 16 },
-  ["calves" /* CALVES */]: { mev: 6, mav: 10, mrv: 16 },
-  ["abs" /* ABS */]: { mev: 0, mav: 8, mrv: 16 },
-  ["obliques" /* OBLIQUES */]: { mev: 0, mav: 6, mrv: 12 }
-};
-var VOLUME_STATUS_LABELS = {
-  under: "under-trained",
-  maintenance: "maintenance",
-  productive: "productive",
-  over: "over-reaching"
-};
-var STATUS_SEVERITY = {
-  under: 1,
-  maintenance: 2,
-  productive: 3,
-  over: 4
-};
-function getHeatmapColor(status, intensity = 0) {
-  const heatmap = WORKOUT_TOKENS.heatmap;
-  switch (status) {
-    case "under":
-      return heatmap.under;
-    case "maintenance":
-      return heatmap.maintenance;
-    case "productive":
-      return intensity >= 0.85 ? heatmap.approaching : heatmap.productive;
-    case "over":
-      return heatmap.over;
-    default:
-      return heatmap.none;
-  }
-}
-function isMoreSevere(a, b) {
-  return STATUS_SEVERITY[a] >= STATUS_SEVERITY[b];
-}
-var SLUG_TO_PRIMARY_MUSCLE = {
-  chest: "chest" /* CHEST */,
-  deltoids: "side_delts" /* SIDE_DELTS */,
-  triceps: "triceps" /* TRICEPS */,
-  "upper-back": "lats" /* LATS */,
-  trapezius: "upper_back" /* UPPER_BACK */,
-  biceps: "biceps" /* BICEPS */,
-  forearm: "forearms" /* FOREARMS */,
-  quadriceps: "quads" /* QUADS */,
-  hamstring: "hamstrings" /* HAMSTRINGS */,
-  gluteal: "glutes" /* GLUTES */,
-  calves: "calves" /* CALVES */,
-  abs: "abs" /* ABS */,
-  obliques: "obliques" /* OBLIQUES */
-};
-
-// src/components/custom/Workout/BodyMap.tsx
-var Body = BodyHighlighter__default.default.default ?? BodyHighlighter__default.default;
-var OUTLINE_FILL = "rgba(255,255,255,0.08)";
-var OUTLINE_BORDER = "rgba(255,255,255,0.12)";
-var BODY_SCALE = 0.8;
-var TEXT_PRIMARY7 = "#F3F4F6";
-var TEXT_SECONDARY6 = "#9CA3AF";
-function buildSlugParts(data) {
-  const bySlug = /* @__PURE__ */ new Map();
-  for (const d of data) {
-    for (const slug of MUSCLE_TO_SVG_SLUGS[d.muscleGroup] ?? []) {
-      const existing = bySlug.get(slug);
-      if (!existing || isMoreSevere(d.volumeStatus, existing.status)) {
-        bySlug.set(slug, { status: d.volumeStatus, intensity: d.intensity });
-      }
-    }
-  }
-  return Array.from(bySlug.entries()).map(([slug, v]) => ({
-    slug,
-    color: getHeatmapColor(v.status, v.intensity)
+var BRAND_PRIMARY11 = "#FF7900";
+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 buildSimpleLegend(data) {
-  const bySimple = /* @__PURE__ */ new Map();
-  for (const d of data) {
-    const simple = DETAILED_TO_SIMPLE[d.muscleGroup];
-    const existing = bySimple.get(simple);
-    if (!existing) {
-      bySimple.set(simple, {
-        key: simple,
-        name: SIMPLE_DISPLAY_NAMES[simple],
-        status: d.volumeStatus,
-        intensity: d.intensity,
-        sets: d.weeklySets,
-        muscle: d.muscleGroup
-      });
-      continue;
-    }
-    existing.sets += d.weeklySets;
-    existing.intensity = Math.max(existing.intensity, d.intensity);
-    if (isMoreSevere(d.volumeStatus, existing.status)) {
-      existing.status = d.volumeStatus;
-      existing.muscle = d.muscleGroup;
-    }
+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;
+}
+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" });
   }
-  return Array.from(bySimple.values());
+  if (workout != null) {
+    crumbs.push({ key: "workout", label: workout.name, level: "workout" });
+  }
+  return crumbs;
+}
+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, { className: "text-text-tertiary", style: { fontSize: 12 }, 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,
+                {
+                  className: isLast ? "text-text-primary" : void 0,
+                  style: {
+                    fontSize: 12,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: isLast ? "700" : "500",
+                    color: isLast ? void 0 : BRAND_PRIMARY11
+                  },
+                  children: crumb.label
+                }
+              )
+            }
+          )
+        ] }, crumb.key);
+      })
+    }
+  );
 }
-function buildDetailedLegend(data) {
-  return data.map((d) => ({
-    key: d.muscleGroup,
-    name: MUSCLE_DISPLAY_NAMES[d.muscleGroup],
-    status: d.volumeStatus,
-    intensity: d.intensity,
-    sets: d.weeklySets,
-    muscle: d.muscleGroup
+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
+  };
 }
-function BodyMap({
-  data,
-  view,
-  onViewChange,
-  onMusclePress,
-  highlightedMuscle,
-  mode = "detailed",
-  className,
-  ...props
-}) {
-  const slugParts = React24.useMemo(() => buildSlugParts(data), [data]);
-  const legend = React24.useMemo(
-    () => mode === "simple" ? buildSimpleLegend(data) : buildDetailedLegend(data),
-    [data, mode]
-  );
-  const [highlight] = React24.useState(() => new reactNative.Animated.Value(highlightedMuscle ? 1 : 0));
-  React24.useEffect(() => {
-    const animation = reactNative.Animated.timing(highlight, {
-      toValue: highlightedMuscle ? 1 : 0,
-      duration: 250,
-      easing: reactNative.Easing.out(reactNative.Easing.ease),
-      useNativeDriver: false
-    });
-    animation.start();
-    return () => animation.stop();
-  }, [highlightedMuscle, highlight]);
-  const scale = highlight.interpolate({ inputRange: [0, 1], outputRange: [1, 1.02] });
-  const glowColor = highlightedMuscle ? getHeatmapColor(
-    data.find((d) => d.muscleGroup === highlightedMuscle)?.volumeStatus,
-    data.find((d) => d.muscleGroup === highlightedMuscle)?.intensity ?? 0
-  ) : null;
-  const handleBodyPress = (part) => {
-    if (!onMusclePress || !part.slug) return;
-    const fromData = data.find(
-      (d) => (MUSCLE_TO_SVG_SLUGS[d.muscleGroup] ?? []).includes(part.slug)
+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;
+    return /* @__PURE__ */ jsx(
+      MesoCard,
+      {
+        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
+      },
+      meso.id
     );
-    const muscle = fromData?.muscleGroup ?? SLUG_TO_PRIMARY_MUSCLE[part.slug];
-    if (muscle) onMusclePress(muscle);
+  }) });
+}
+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
+  )) });
+}
+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 ProgramPlanningPage({
+  title = "Program Plan",
+  mesos,
+  className,
+  ...props
+}) {
+  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);
   };
-  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn(className), testID: "body-map", ...props, children: [
-    /* @__PURE__ */ jsx(ViewToggle, { view, onViewChange }),
-    /* @__PURE__ */ jsx(
-      reactNative.Animated.View,
-      {
-        style: [
+  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: cn(className, "bg-background-base"),
+      style: { width: 390 },
+      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,
           {
-            width: 200 * BODY_SCALE,
-            alignSelf: "center",
-            transform: [{ scale }]
-          },
-          glowColor ? { boxShadow: `0 0 14px 2px ${glowColor}` } : void 0
-        ],
-        "aria-hidden": true,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no-hide-descendants",
-        testID: "body-map-svg",
-        children: /* @__PURE__ */ jsx(
-          Body,
+            accessibilityRole: "header",
+            className: "text-text-primary",
+            style: {
+              fontSize: 20,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: "700"
+            },
+            testID: "program-planning-page-title",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(reactNative.View, { style: { marginHorizontal: -16 }, children: /* @__PURE__ */ jsx(
+          MesoProgressBar,
           {
-            side: view,
-            data: slugParts,
-            scale: BODY_SCALE,
-            gender: "male",
-            defaultFill: OUTLINE_FILL,
-            border: OUTLINE_BORDER,
-            onBodyPartPress: handleBodyPress
+            mesos: progressMesos,
+            activeMesoId,
+            onMesoPress: selectMeso
           }
-        )
-      }
-    ),
-    legend.length === 0 ? /* @__PURE__ */ jsx(
-      reactNative.Text,
-      {
-        style: {
-          marginTop: 8,
-          fontSize: 12,
-          color: TEXT_SECONDARY6,
-          textAlign: "center",
-          fontFamily: "Inter, sans-serif"
-        },
-        testID: "body-map-empty",
-        children: "No training data"
-      }
-    ) : /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        className: "flex-row flex-wrap",
-        style: { marginTop: 10, gap: 6, justifyContent: "center" },
-        testID: "body-map-legend",
-        children: legend.map((entry) => /* @__PURE__ */ jsx(
-          MuscleButton,
+        ) }),
+        activeMeso != null && /* @__PURE__ */ jsx(
+          Breadcrumbs2,
           {
-            entry,
-            highlighted: highlightedMuscle === entry.muscle,
-            onMusclePress
-          },
-          entry.key
-        ))
-      }
-    )
-  ] });
+            crumbs: buildBreadcrumbs(activeMeso, selectedWeek, activeWorkout),
+            onNavigate: navigateTo
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          reactNative.View,
+          {
+            className: "bg-surface-elevated border-border",
+            style: {
+              borderWidth: 1,
+              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
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
 }
-function ViewToggle({ view, onViewChange }) {
+var BRAND_PRIMARY12 = "#FF7900";
+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 self-center",
-      style: { gap: 4, marginBottom: 8 },
-      testID: "body-map-view-toggle",
-      children: ["front", "back"].map((side) => {
-        const active = view === side;
+      className: "flex-row",
+      style: {
+        borderBottomWidth: 1,
+        borderBottomColor: resolveColor("border-default")
+      },
+      accessibilityRole: "tablist",
+      testID: "exercise-detail-page-tabs",
+      children: EXERCISE_DETAIL_TABS.map(({ key, label }) => {
+        const isActive = key === active;
         return /* @__PURE__ */ jsx(
           reactNative.Pressable,
           {
-            onPress: () => onViewChange?.(side),
-            accessibilityRole: "button",
-            accessibilityLabel: `Show ${side} view`,
-            "aria-pressed": active,
-            disabled: !onViewChange,
+            onPress: () => onSelect(key),
+            accessibilityRole: "tab",
+            accessibilityState: { selected: isActive },
             style: {
-              paddingHorizontal: 12,
-              paddingVertical: 4,
-              borderRadius: 9999,
-              backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
-              borderWidth: 1,
-              borderColor: active ? "#FF7900" : WORKOUT_TOKENS.border.strong
+              flex: 1,
+              alignItems: "center",
+              paddingVertical: 10,
+              borderBottomWidth: 2,
+              borderBottomColor: isActive ? BRAND_PRIMARY12 : "transparent"
             },
-            testID: `body-map-toggle-${side}`,
+            testID: `exercise-detail-page-tab-${key}`,
             children: /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: isActive ? "text-text-primary" : "text-text-tertiary",
                 style: {
-                  fontSize: 12,
+                  fontSize: 13,
                   fontFamily: "Inter, sans-serif",
-                  fontWeight: active ? "700" : "500",
-                  color: active ? "#FF7900" : TEXT_SECONDARY6,
-                  textTransform: "capitalize"
+                  fontWeight: isActive ? "700" : "500"
                 },
-                children: side
+                children: label
               }
             )
           },
-          side
+          key
         );
       })
     }
   );
 }
-function MuscleButton({ entry, highlighted, onMusclePress }) {
-  const dotColor = getHeatmapColor(entry.status, entry.intensity);
-  const label = `${entry.name}, ${VOLUME_STATUS_LABELS[entry.status]}, ${entry.sets} sets this week`;
+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,
+      {
+        className: "bg-surface-elevated border-border",
+        style: {
+          flex: 1,
+          padding: 12,
+          borderRadius: 10,
+          borderWidth: 1
+        },
+        testID: `exercise-detail-page-stat-${key}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-primary",
+              style: {
+                fontSize: 18,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: "700"
+              },
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-tertiary",
+              style: {
+                marginTop: 2,
+                fontSize: 10,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "600",
+                letterSpacing: 0.4,
+                textTransform: "uppercase"
+              },
+              children: label
+            }
+          )
+        ]
+      },
+      key
+    );
+  }) });
+}
+function SectionCard({
+  title,
+  children,
+  testID
+}) {
   return /* @__PURE__ */ jsxs(
-    reactNative.Pressable,
+    reactNative.View,
     {
-      onPress: () => onMusclePress?.(entry.muscle),
-      accessibilityRole: "button",
-      accessibilityLabel: label,
-      "aria-pressed": highlighted,
+      className: "bg-surface-elevated border-border",
       style: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 5,
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? "#FF7900" : WORKOUT_TOKENS.border.default,
-        backgroundColor: WORKOUT_TOKENS.surface.raised
+        borderRadius: 12,
+        padding: 12,
+        gap: 10
       },
-      testID: `body-map-muscle-${entry.key}`,
+      testID,
       children: [
         /* @__PURE__ */ jsx(
-          reactNative.View,
+          reactNative.Text,
+          {
+            className: "text-text-tertiary",
+            style: {
+              fontSize: 11,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              letterSpacing: 0.6,
+              textTransform: "uppercase"
+            },
+            children: title
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function EntryList({ entries, expandedId, onToggle, emptyLabel, testID }) {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        className: "text-text-tertiary",
+        style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
+        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,
+            {
+              className: "text-text-secondary",
+              style: {
+                width: 44,
+                fontSize: 11,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "600"
+              },
+              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,
+            {
+              className: "text-text-tertiary",
+              style: {
+                fontSize: 11,
+                fontFamily: "Inter, sans-serif",
+                fontVariant: ["tabular-nums"]
+              },
+              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,
+    {
+      className: "bg-surface-elevated border-border",
+      style: {
+        flex: 1,
+        padding: 12,
+        borderRadius: 10,
+        borderWidth: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-text-primary",
+            style: {
+              fontSize: 16,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: "700"
+            },
+            children: cell.value
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-text-tertiary",
+            style: {
+              marginTop: 2,
+              fontSize: 10,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              letterSpacing: 0.4,
+              textTransform: "uppercase"
+            },
+            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: cn("bg-background-base", className),
+      style: { width: 390 },
+      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",
+                    className: "text-text-primary",
+                    style: {
+                      fontSize: 20,
+                      fontFamily: '"Space Grotesk", sans-serif',
+                      fontWeight: "700"
+                    },
+                    testID: "exercise-detail-page-title",
+                    children: exercise.name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  reactNative.Text,
+                  {
+                    className: "text-text-secondary",
+                    style: {
+                      marginTop: 2,
+                      fontSize: 12,
+                      fontFamily: "Inter, sans-serif"
+                    },
+                    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,
+                      {
+                        className: "text-text-tertiary",
+                        style: {
+                          fontSize: 9,
+                          fontFamily: "Inter, sans-serif",
+                          fontWeight: "600",
+                          letterSpacing: 0.4,
+                          textTransform: "uppercase"
+                        },
+                        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 BRAND_PRIMARY13 = "#FF7900";
+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",
+            className: "text-text-primary",
+            style: {
+              fontSize: 20,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: "700"
+            },
+            testID: "active-workout-page-title",
+            children: title
+          }
+        ),
+        subtitle != null && /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-text-secondary",
+            style: {
+              marginTop: 2,
+              fontSize: 12,
+              fontFamily: "Inter, sans-serif"
+            },
+            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: { width: 7, height: 7, borderRadius: 9999, backgroundColor: dotColor },
-            accessibilityElementsHidden: true,
-            testID: `body-map-muscle-dot-${entry.key}`
+            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,
           {
+            className: "text-text-tertiary",
             style: {
-              fontSize: 11,
+              fontSize: 10,
               fontFamily: "Inter, sans-serif",
-              fontWeight: "500",
-              color: TEXT_PRIMARY7
+              fontWeight: "600",
+              letterSpacing: 0.4,
+              textTransform: "uppercase"
             },
-            accessibilityElementsHidden: true,
-            children: entry.name
+            children: `${progress.completedSets}/${progress.totalSets} sets`
           }
         )
-      ]
-    }
-  );
-}
-var SURFACE_ELEVATED = WORKOUT_TOKENS.surface.elevated;
-var SURFACE_RAISED2 = WORKOUT_TOKENS.surface.raised;
-var BORDER_STRONG2 = WORKOUT_TOKENS.border.strong;
-var BORDER_DEFAULT3 = WORKOUT_TOKENS.border.default;
-var BRAND_PRIMARY11 = "#FF7900";
-var TEXT_PRIMARY8 = "#F3F4F6";
-var TEXT_SECONDARY7 = "#9CA3AF";
-var TEXT_TERTIARY7 = "#6B7280";
-var VOLUME_GRADIENT = "linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)";
-var SLIDE_OFFSET = 400;
-var BACKDROP_OPACITY = 0.4;
-var STATUS_BADGE_COLOR = {
-  under: "info",
-  maintenance: "warning",
-  productive: "success",
-  over: "error"
-};
-function clamp013(value) {
-  if (value < 0) return 0;
-  if (value > 1) return 1;
-  return value;
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        className: "bg-border",
+        style: { height: 4, 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 markerFraction(weeklySets, { mev, mrv }) {
-  const span = mrv - mev;
-  if (span <= 0) return weeklySets >= mrv ? 1 : 0;
-  return clamp013((weeklySets - mev) / span);
+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,
+        {
+          className: "bg-surface-elevated border-border",
+          style: {
+            borderWidth: 1,
+            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 BodyMapDetailPanel({
-  muscleGroup,
-  displayName,
-  weeklySets,
-  landmarks,
-  volumeStatus,
-  lastTrained,
-  weeklyHistory,
-  contributingExercises,
-  upcomingExercises,
-  isOpen,
-  visible,
-  onClose,
-  onViewExercises,
+function ActiveWorkoutPage({
+  title = "Active Workout",
+  subtitle,
+  exercises,
+  supersets = [],
+  input,
+  rest,
+  initialResting = false,
+  className,
   ...props
 }) {
-  const open = isOpen ?? visible ?? false;
-  const [translateY] = React24.useState(() => new reactNative.Animated.Value(SLIDE_OFFSET));
-  const [backdrop] = React24.useState(() => new reactNative.Animated.Value(0));
-  React24.useEffect(() => {
-    if (!open) return;
-    const animation = reactNative.Animated.parallel([
-      reactNative.Animated.timing(translateY, {
-        toValue: 0,
-        duration: 400,
-        easing: reactNative.Easing.out(reactNative.Easing.ease),
-        useNativeDriver: false
-      }),
-      reactNative.Animated.timing(backdrop, {
-        toValue: BACKDROP_OPACITY,
-        duration: 300,
-        easing: reactNative.Easing.out(reactNative.Easing.ease),
-        useNativeDriver: false
-      })
-    ]);
-    animation.start();
-    return () => animation.stop();
-  }, [open, translateY, backdrop]);
-  if (!open) return null;
-  const dialogLabel = `${displayName} volume details`;
-  const markerLeft = markerFraction(weeklySets, landmarks) * 100;
-  const hasContributing = (contributingExercises?.length ?? 0) > 0;
-  const hasUpcoming = (upcomingExercises?.length ?? 0) > 0;
+  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,
     {
-      style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "flex-end" },
-      testID: "body-map-detail-panel-root",
+      className: ["bg-background-base", className].filter(Boolean).join(" "),
+      style: { position: "relative", width: 390 },
+      accessibilityRole: "main",
+      "aria-label": title,
+      testID: "active-workout-page",
+      ...props,
       children: [
-        /* @__PURE__ */ jsx(
-          reactNative.Animated.View,
+        /* @__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: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              backgroundColor: "#000000",
-              opacity: backdrop
-            },
-            testID: "body-map-detail-panel-backdrop-anim",
-            children: /* @__PURE__ */ jsx(
-              reactNative.Pressable,
+            style: { borderTopWidth: 1, borderTopColor: resolveColor("border-default") },
+            testID: "active-workout-page-bottom-bar",
+            children: showRest && rest != null ? /* @__PURE__ */ jsx(
+              RestTimer,
               {
-                onPress: onClose,
-                accessibilityRole: "button",
-                accessibilityLabel: `Close ${displayName} details`,
-                style: { flex: 1 },
-                testID: "body-map-detail-panel-backdrop"
+                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
               }
             )
           }
-        ),
-        /* @__PURE__ */ jsxs(
-          reactNative.Animated.View,
-          {
-            accessibilityRole: "dialog",
-            accessibilityLabel: dialogLabel,
-            "aria-label": dialogLabel,
-            style: {
-              backgroundColor: SURFACE_ELEVATED,
-              borderTopLeftRadius: 16,
-              borderTopRightRadius: 16,
-              maxHeight: "88%",
-              transform: [{ translateY }]
-            },
-            testID: "body-map-detail-panel",
-            ...props,
-            children: [
-              /* @__PURE__ */ jsx(
-                reactNative.Pressable,
-                {
-                  onPress: onClose,
-                  accessibilityRole: "button",
-                  accessibilityLabel: `Close ${displayName} details`,
-                  hitSlop: 12,
-                  style: { alignSelf: "center", paddingVertical: 8 },
-                  testID: "body-map-detail-panel-handle",
-                  children: /* @__PURE__ */ jsx(
-                    reactNative.View,
-                    {
-                      style: { width: 40, height: 4, borderRadius: 2, backgroundColor: BORDER_STRONG2 },
-                      accessibilityElementsHidden: true
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                reactNative.ScrollView,
-                {
-                  style: { paddingHorizontal: 16 },
-                  contentContainerStyle: { paddingBottom: 20 },
-                  testID: "body-map-detail-panel-scroll",
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      reactNative.View,
-                      {
-                        className: "flex-row items-center justify-between",
-                        style: { gap: 8, paddingTop: 4, paddingBottom: 4 },
-                        testID: "body-map-detail-panel-header",
-                        children: [
-                          /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 8, flexShrink: 1 }, children: [
-                            /* @__PURE__ */ jsx(
-                              reactNative.Text,
-                              {
-                                accessibilityRole: "header",
-                                style: {
-                                  fontSize: 16,
-                                  fontFamily: '"Space Grotesk", sans-serif',
-                                  fontWeight: "700",
-                                  color: TEXT_PRIMARY8
-                                },
-                                testID: "body-map-detail-panel-title",
-                                children: displayName
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              Badge,
-                              {
-                                variant: "subtle",
-                                color: STATUS_BADGE_COLOR[volumeStatus],
-                                size: "sm",
-                                testID: "body-map-detail-panel-status-badge",
-                                children: VOLUME_STATUS_LABELS[volumeStatus]
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            reactNative.Pressable,
-                            {
-                              onPress: onClose,
-                              accessibilityRole: "button",
-                              accessibilityLabel: `Close ${displayName} details`,
-                              hitSlop: 8,
-                              style: { padding: 4, margin: -4 },
-                              testID: "body-map-detail-panel-close",
-                              children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY7 }, children: "\xD7" })
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    lastTrained != null && /* @__PURE__ */ jsx(
-                      reactNative.Text,
-                      {
-                        style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY7 },
-                        testID: "body-map-detail-panel-last-trained",
-                        children: `Last trained ${lastTrained}`
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(reactNative.View, { style: { marginTop: 16 }, testID: "body-map-detail-panel-volume", children: [
-                      /* @__PURE__ */ jsxs(
-                        reactNative.View,
-                        {
-                          className: "flex-row items-center justify-between",
-                          style: { marginBottom: 6 },
-                          accessibilityElementsHidden: true,
-                          children: [
-                            /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY7 }, children: `MEV ${landmarks.mev}` }),
-                            /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY7 }, children: `MRV ${landmarks.mrv}` })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs(
-                        reactNative.View,
-                        {
-                          style: { height: 14, justifyContent: "center" },
-                          accessibilityRole: "progressbar",
-                          accessibilityValue: { min: landmarks.mev, max: landmarks.mrv, now: weeklySets },
-                          accessibilityLabel: `${weeklySets} weekly sets, between MEV ${landmarks.mev} and MRV ${landmarks.mrv}`,
-                          "aria-valuenow": weeklySets,
-                          "aria-valuemin": landmarks.mev,
-                          "aria-valuemax": landmarks.mrv,
-                          testID: "body-map-detail-panel-volume-bar",
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              reactNative.View,
-                              {
-                                style: { height: 8, borderRadius: 4, backgroundImage: VOLUME_GRADIENT },
-                                accessibilityElementsHidden: true
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              reactNative.View,
-                              {
-                                style: {
-                                  position: "absolute",
-                                  left: `${markerLeft}%`,
-                                  marginLeft: -7,
-                                  width: 14,
-                                  height: 14,
-                                  borderRadius: 7,
-                                  borderWidth: 2,
-                                  borderColor: TEXT_PRIMARY8,
-                                  backgroundColor: SURFACE_ELEVATED,
-                                  boxShadow: "0 0 4px rgba(0,0,0,0.5)"
-                                },
-                                accessibilityElementsHidden: true,
-                                testID: "body-map-detail-panel-volume-marker"
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-baseline", style: { marginTop: 14, gap: 4 }, children: [
-                      /* @__PURE__ */ jsx(
-                        reactNative.Text,
-                        {
-                          style: {
-                            fontSize: 24,
-                            fontFamily: '"Space Grotesk", sans-serif',
-                            fontWeight: "700",
-                            color: TEXT_PRIMARY8
-                          },
-                          testID: "body-map-detail-panel-set-count",
-                          children: weeklySets
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        reactNative.Text,
-                        {
-                          style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY7 },
-                          testID: "body-map-detail-panel-mrv-suffix",
-                          children: `/ ${landmarks.mrv} MRV`
-                        }
-                      )
-                    ] }),
-                    weeklyHistory != null && weeklyHistory.length > 0 && /* @__PURE__ */ jsxs(reactNative.View, { style: { marginTop: 14 }, testID: "body-map-detail-panel-sparkline", children: [
-                      /* @__PURE__ */ jsx(
-                        reactNative.Text,
-                        {
-                          style: {
-                            fontSize: 10,
-                            fontFamily: "Inter, sans-serif",
-                            fontWeight: "600",
-                            color: TEXT_TERTIARY7,
-                            marginBottom: 6
-                          },
-                          accessibilityElementsHidden: true,
-                          children: "VOLUME TREND"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(Sparkline, { data: weeklyHistory, width: 80, height: 30, highlightLast: true })
-                    ] }),
-                    hasContributing && /* @__PURE__ */ jsxs(reactNative.View, { style: { marginTop: 16 }, testID: "body-map-detail-panel-contributing", children: [
-                      /* @__PURE__ */ jsx(
-                        reactNative.Text,
-                        {
-                          style: {
-                            fontSize: 10,
-                            fontFamily: "Inter, sans-serif",
-                            fontWeight: "600",
-                            color: TEXT_TERTIARY7,
-                            marginBottom: 8
-                          },
-                          children: "CONTRIBUTING EXERCISES"
-                        }
-                      ),
-                      contributingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
-                        reactNative.View,
-                        {
-                          className: "flex-row items-center justify-between",
-                          style: {
-                            gap: 10,
-                            paddingVertical: 8,
-                            paddingHorizontal: 12,
-                            marginBottom: 6,
-                            borderRadius: 8,
-                            backgroundColor: SURFACE_RAISED2,
-                            borderWidth: 1,
-                            borderColor: BORDER_DEFAULT3
-                          },
-                          testID: `body-map-detail-panel-contributing-${index}`,
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              reactNative.Text,
-                              {
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY8 },
-                                testID: `body-map-detail-panel-contributing-${index}-name`,
-                                children: exercise.name
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              reactNative.Text,
-                              {
-                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY7 },
-                                testID: `body-map-detail-panel-contributing-${index}-detail`,
-                                children: `${exercise.sets} sets \xB7 ${Math.round(exercise.contributionWeight * 100)}%`
-                              }
-                            )
-                          ]
-                        },
-                        `${exercise.name}-${index}`
-                      ))
-                    ] }),
-                    hasUpcoming && /* @__PURE__ */ jsxs(reactNative.View, { style: { marginTop: 16 }, testID: "body-map-detail-panel-upcoming", children: [
-                      /* @__PURE__ */ jsx(
-                        reactNative.Text,
-                        {
-                          style: {
-                            fontSize: 10,
-                            fontFamily: "Inter, sans-serif",
-                            fontWeight: "600",
-                            color: TEXT_TERTIARY7,
-                            marginBottom: 8
-                          },
-                          children: "UPCOMING"
-                        }
-                      ),
-                      upcomingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
-                        reactNative.View,
-                        {
-                          className: "flex-row items-center justify-between",
-                          style: { gap: 10, paddingVertical: 6 },
-                          testID: `body-map-detail-panel-upcoming-${index}`,
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              reactNative.Text,
-                              {
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY8 },
-                                testID: `body-map-detail-panel-upcoming-${index}-name`,
-                                children: exercise.name
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              reactNative.Text,
-                              {
-                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY7 },
-                                testID: `body-map-detail-panel-upcoming-${index}-detail`,
-                                children: `${exercise.workoutName} \xB7 ${exercise.sets} sets`
-                              }
-                            )
-                          ]
-                        },
-                        `${exercise.name}-${index}`
-                      ))
-                    ] }),
-                    onViewExercises != null && /* @__PURE__ */ jsx(
-                      reactNative.Pressable,
-                      {
-                        onPress: onViewExercises,
-                        accessibilityRole: "button",
-                        accessibilityLabel: `View ${displayName} exercises`,
-                        style: {
-                          marginTop: 16,
-                          paddingVertical: 10,
-                          borderRadius: 8,
-                          alignItems: "center",
-                          backgroundColor: "rgba(255,121,0,0.12)",
-                          borderWidth: 1,
-                          borderColor: "rgba(255,121,0,0.3)"
-                        },
-                        testID: "body-map-detail-panel-view-exercises",
-                        children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "700", color: BRAND_PRIMARY11 }, children: "View exercises" })
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
         )
       ]
     }
@@ -12376,28 +12860,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}`
             );
@@ -12469,7 +12953,7 @@ var DEFAULT_THRESHOLDS = [
 var ARC_START = 135;
 var ARC_SWEEP = 270;
 var SEGMENTS = 40;
-function clamp014(n) {
+function clamp013(n) {
   if (Number.isNaN(n)) return 0;
   return Math.max(0, Math.min(1, n));
 }
@@ -12514,7 +12998,7 @@ function Gauge2({
   ...props
 }) {
   const span = max - min || 1;
-  const fill = clamp014((value - min) / span);
+  const fill = clamp013((value - min) / span);
   const activeColor = (f) => color ?? bandColor(f, thresholds, min, max);
   const ticks = buildTicks(fill, size, activeColor);
   const displayColor = color ?? bandColor(fill, thresholds, min, max);
@@ -12531,23 +13015,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: [
@@ -12561,65 +13045,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 {
@@ -12712,6 +13137,7 @@ exports.Accordion = Accordion;
 exports.AccordionButton = AccordionButton;
 exports.AccordionItem = AccordionItem;
 exports.AccordionPanel = AccordionPanel;
+exports.ActiveWorkoutPage = ActiveWorkoutPage;
 exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
@@ -12722,8 +13148,6 @@ exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.BadgeText = BadgeText;
 exports.BaseBadge = BaseBadge;
-exports.BodyMap = BodyMap;
-exports.BodyMapDetailPanel = BodyMapDetailPanel;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
@@ -12746,8 +13170,6 @@ exports.CircularProgress = CircularProgress;
 exports.Collapse = Collapse;
 exports.CollapseButton = CollapseButton;
 exports.CollapseContent = CollapseContent;
-exports.DEFAULT_VOLUME_LANDMARKS = DEFAULT_VOLUME_LANDMARKS;
-exports.DETAILED_TO_SIMPLE = DETAILED_TO_SIMPLE;
 exports.DataRow = DataRow;
 exports.DateTime = DateTime;
 exports.DeviationBar = DeviationBar;
@@ -12756,8 +13178,10 @@ 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;
@@ -12780,9 +13204,6 @@ exports.ListItemContent = ListItemContent;
 exports.ListItemDivider = ListItemDivider;
 exports.ListItemIcon = ListItemIcon;
 exports.ListItemTrailing = ListItemTrailing;
-exports.MUSCLE_DISPLAY_NAMES = MUSCLE_DISPLAY_NAMES;
-exports.MUSCLE_TO_CATEGORY = MUSCLE_TO_CATEGORY;
-exports.MUSCLE_TO_SVG_SLUGS = MUSCLE_TO_SVG_SLUGS;
 exports.Menu = Menu;
 exports.MenuDivider = MenuDivider;
 exports.MenuGroup = MenuGroup;
@@ -12801,7 +13222,6 @@ exports.ModalContent = ModalContent;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.ModalTitle = ModalTitle;
-exports.MuscleGroup = MuscleGroup;
 exports.MuscleGroupChip = MuscleGroupChip;
 exports.Overline = Overline;
 exports.Paragraph = Paragraph;
@@ -12814,14 +13234,13 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.PrBadge = PrBadge;
 exports.PrHistoryModal = PrHistoryModal;
+exports.ProgramPlanningPage = ProgramPlanningPage;
 exports.Progress = Progress;
 exports.ProgressSteps = ProgressSteps;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.ReadinessCheck = ReadinessCheck;
 exports.RestTimer = RestTimer;
-exports.SIMPLE_DISPLAY_NAMES = SIMPLE_DISPLAY_NAMES;
-exports.SIMPLE_TO_DETAILED = SIMPLE_TO_DETAILED;
 exports.Scatter = Scatter;
 exports.Section = Section;
 exports.SectionContent = SectionContent;
@@ -12835,7 +13254,6 @@ exports.SidebarFooter = SidebarFooter;
 exports.SidebarHeader = SidebarHeader;
 exports.SidebarItem = SidebarItem;
 exports.SidebarSection = SidebarSection;
-exports.SimpleMuscleGroup = SimpleMuscleGroup;
 exports.Skeleton = Skeleton;
 exports.SkeletonCard = SkeletonCard;
 exports.SkeletonCircle = SkeletonCircle;
@@ -12854,6 +13272,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;
@@ -12866,7 +13285,9 @@ exports.TableHeaderCell = TableHeaderCell;
 exports.TablePagination = TablePagination;
 exports.TableRow = TableRow;
 exports.Tabs = Tabs;
+exports.TempoBar = TempoBar;
 exports.TempoDisplay = TempoDisplay;
+exports.ThemeProvider = ThemeProvider;
 exports.Toast = Toast;
 exports.ToastProvider = ToastProvider;
 exports.ToolbarButton = ToolbarButton;
@@ -12874,7 +13295,6 @@ exports.ToolbarButtonGroup = ToolbarButtonGroup;
 exports.Tooltip = Tooltip;
 exports.Treemap = Treemap;
 exports.Typography = Typography;
-exports.VOLUME_STATUS_LABELS = VOLUME_STATUS_LABELS;
 exports.VStack = VStack;
 exports.VelocityStrip = VelocityStrip;
 exports.WeekRow = WeekRow;
@@ -12884,12 +13304,14 @@ 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;
@@ -12899,9 +13321,19 @@ 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;
+exports.formatVelocity = formatVelocity;
 exports.getBaseSurfaceColor = getBaseSurfaceColor;
 exports.getContrastText = getContrastText;
 exports.getDiscreteRainbowColor = getDiscreteRainbowColor;
@@ -12911,17 +13343,19 @@ exports.getElevationSurface = getElevationSurface;
 exports.getFieldAriaProps = getFieldAriaProps;
 exports.getFieldValidationProps = getFieldValidationProps;
 exports.getGlowShadow = getGlowShadow;
-exports.getHeatmapColor = getHeatmapColor;
 exports.getHoverColors = getHoverColors;
 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;
@@ -12940,12 +13374,22 @@ exports.primitiveShadows = primitiveShadows;
 exports.primitiveSpacing = primitiveSpacing;
 exports.primitiveTypography = primitiveTypography;
 exports.primitiveZIndex = primitiveZIndex;
+exports.resolveColor = resolveColor;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsv = rgbToHsv;
+exports.roundRpe = roundRpe;
+exports.roundTempo = roundTempo;
+exports.roundWeight = roundWeight;
+exports.rpeColor = rpeColor;
 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;