@titan-design/react-ui 0.2.7 → 0.4.0

package/dist/bodymap.js

@@ -0,0 +1,3014 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var BodyHighlighter = require('react-native-body-highlighter');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var BodyHighlighter__default = /*#__PURE__*/_interopDefault(BodyHighlighter);
+
+// src/components/custom/Workout/BodyMap.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+// src/theme/tokens/primitives.ts
+var primitiveColors = {
+  // Blue scale (primary brand)
+  blue: {
+    400: "#60A5FA",
+    600: "#5048E5",
+    // Primary main
+    700: "#3832A0"},
+  // Teal scale (success)
+  teal: {
+    50: "#F0FDFA",
+    400: "#43C6B7",
+    // Success light
+    500: "#14B8A6",
+    700: "#0E8074"},
+  // Red scale (error)
+  red: {
+    50: "#FEF2F2",
+    400: "#DA6868",
+    // Error light
+    500: "#EF4444",
+    600: "#D14343",
+    // Error main
+    700: "#922E2E"},
+  // Amber scale (warning)
+  amber: {
+    50: "#FFFBEB",
+    400: "#FFBF4C",
+    // Warning light
+    500: "#FFB020",
+    // Warning main
+    600: "#B27B16"},
+  // Sky/Blue scale (info)
+  sky: {
+    50: "#F0F9FF",
+    400: "#64B6F7",
+    // Info light
+    500: "#2196F3",
+    700: "#0B79D0"},
+  // Neutral/Gray scale
+  neutral: {
+    50: "#FAFAFA",
+    100: "#F3F4F6",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    900: "#111827"},
+  // Orange scale (accent/brand color)
+  accent: {
+    200: "#FF9630",
+    300: "#FF8500",
+    400: "#FF7900",
+    500: "#F56C00",
+    600: "#E06D10",
+    700: "#D0620C"},
+  // Charcoal scale (dark backgrounds)
+  charcoal: {
+    300: "#2C2C2C",
+    400: "#1F1F1F",
+    500: "#1C1C1C",
+    600: "#191919",
+    700: "#161616",
+    900: "#101010"
+  },
+  // Steel scale (cool accent)
+  steel: {
+    300: "#678498",
+    400: "#557488",
+    500: "#406D87",
+    600: "#39617A",
+    700: "#32556D"},
+  // Pure colors
+  white: "#FFFFFF"};
+var discreteRainbow = [
+  "#E8ECFB",
+  "#D9CCE3",
+  "#D1BBD7",
+  "#CAACCB",
+  "#BA8DB4",
+  "#AE76A3",
+  "#AA6F9E",
+  "#994F88",
+  "#882E72",
+  "#1965B0",
+  "#437DBF",
+  "#5289C7",
+  "#6195CF",
+  "#7BAFDE",
+  "#4EB265",
+  "#90C987",
+  "#CAE0AB",
+  "#F7F056",
+  "#F7CB45",
+  "#F6C141",
+  "#F4A736",
+  "#F1932D",
+  "#EE8026",
+  "#E8601C",
+  "#E65518",
+  "#DC050C",
+  "#A5170E",
+  "#72190E",
+  "#42150A"
+];
+
+// src/theme/tokens/semantic.ts
+var semanticColorsLight = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveColors.accent[400],
+  // #FF7900
+  "brand-primary-light": primitiveColors.accent[200],
+  // #FF9630
+  "brand-primary-dark": primitiveColors.accent[700],
+  // #D0620C
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveColors.accent[500],
+  "brand-primary-active": primitiveColors.accent[600],
+  "brand-secondary": primitiveColors.steel[500],
+  // #406D87
+  "brand-secondary-light": primitiveColors.steel[300],
+  // #678498
+  "brand-secondary-dark": primitiveColors.steel[700],
+  // #32556D
+  "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
+  "brand-secondary-hover": primitiveColors.steel[600],
+  "brand-secondary-active": primitiveColors.steel[700],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveColors.teal[500],
+  // #14B8A6
+  "status-success-light": primitiveColors.teal[400],
+  // #43C6B7
+  "status-success-dark": primitiveColors.teal[700],
+  // #0E8074
+  "status-success-subtle": primitiveColors.teal[50],
+  "status-error": primitiveColors.red[600],
+  // #D14343
+  "status-error-light": primitiveColors.red[400],
+  // #DA6868
+  "status-error-dark": primitiveColors.red[700],
+  // #922E2E
+  "status-error-subtle": primitiveColors.red[50],
+  "status-warning": primitiveColors.amber[500],
+  // #FFB020
+  "status-warning-light": primitiveColors.amber[400],
+  // #FFBF4C
+  "status-warning-dark": primitiveColors.amber[600],
+  // #B27B16
+  "status-warning-subtle": primitiveColors.amber[50],
+  "status-info": primitiveColors.sky[500],
+  // #2196F3
+  "status-info-light": primitiveColors.sky[400],
+  // #64B6F7
+  "status-info-dark": primitiveColors.sky[700],
+  // #0B79D0
+  "status-info-subtle": primitiveColors.sky[50],
+  // Text on status backgrounds (on-status-*)
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  // Green - positive outcome
+  "result-improve-light": "rgba(76, 175, 80, 0.12)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  // Red - negative outcome
+  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  // Gray - no clear result
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
+  "result-neutral": primitiveColors.neutral[500],
+  // Neutral baseline
+  // Text on result backgrounds (on-result-*)
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (data-*)
+  // First 10 colors from discrete rainbow optimized for charts
+  "data-1": discreteRainbow[9],
+  // #1965B0 - Blue
+  "data-2": discreteRainbow[14],
+  // #4EB265 - Green
+  "data-3": discreteRainbow[17],
+  // #F7F056 - Yellow
+  "data-4": discreteRainbow[25],
+  // #DC050C - Red
+  "data-5": discreteRainbow[8],
+  // #882E72 - Purple
+  "data-6": discreteRainbow[20],
+  // #F4A736 - Orange
+  "data-7": discreteRainbow[13],
+  // #7BAFDE - Light Blue
+  "data-8": discreteRainbow[15],
+  // #90C987 - Light Green
+  "data-9": discreteRainbow[3],
+  // #CAACCB - Lavender
+  "data-10": discreteRainbow[22],
+  // #EE8026 - Dark Orange
+  // Text colors (text-*)
+  "text-primary": "#121828",
+  "text-secondary": "#65748B",
+  "text-tertiary": primitiveColors.neutral[400],
+  "text-disabled": "rgba(55, 65, 81, 0.48)",
+  "text-inverse": primitiveColors.white,
+  "text-link": primitiveColors.blue[600],
+  "text-link-hover": primitiveColors.blue[700],
+  // Surface colors (surface-*) - for elevated containers
+  "surface-base": primitiveColors.white,
+  "surface-elevated": primitiveColors.neutral[50],
+  // #FAFAFA - slightly off-white for elevated cards
+  "surface-raised": primitiveColors.neutral[100],
+  // #F3F4F6 - light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": primitiveColors.neutral[50],
+  // Input field background (filled variant)
+  // Background colors (background-*)
+  "background-base": "#EBEBEB",
+  "background-default": primitiveColors.white,
+  "background-subtle": primitiveColors.neutral[50],
+  // Border colors (border-*)
+  "border-default": "#E8E9EB",
+  "border-subtle": primitiveColors.neutral[100],
+  "border-strong": primitiveColors.neutral[300],
+  "border-focus": primitiveColors.blue[600],
+  "border-input": primitiveColors.neutral[300],
+  // Input field border
+  "border-input-hover": primitiveColors.neutral[400],
+  // Input field border on hover
+  "border-input-focus": primitiveColors.blue[600],
+  // Input field border on focus
+  "border-input-error": primitiveColors.red[600],
+  // Input field border on error
+  // Interactive states (interactive-*)
+  "interactive-hover": "rgba(55, 65, 81, 0.04)",
+  "interactive-focus": "rgba(55, 65, 81, 0.12)",
+  "interactive-active": "rgba(55, 65, 81, 0.16)",
+  "interactive-selected": "rgba(55, 65, 81, 0.08)",
+  "interactive-disabled": "rgba(55, 65, 81, 0.12)",
+  "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
+  // Divider
+  "divider": "#E8E9EB",
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[500],
+  "avatar-text": primitiveColors.white
+};
+var semanticColorsDark = {
+  // Brand colors stay the same in dark mode
+  "brand-primary": primitiveColors.accent[400],
+  "brand-primary-light": primitiveColors.accent[200],
+  "brand-primary-dark": primitiveColors.accent[700],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveColors.accent[300],
+  "brand-primary-active": primitiveColors.accent[200],
+  "brand-secondary": primitiveColors.steel[500],
+  "brand-secondary-light": primitiveColors.steel[300],
+  "brand-secondary-dark": primitiveColors.steel[700],
+  "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
+  "brand-secondary-hover": primitiveColors.steel[400],
+  "brand-secondary-active": primitiveColors.steel[300],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveColors.teal[500],
+  "status-success-light": primitiveColors.teal[400],
+  "status-success-dark": primitiveColors.teal[700],
+  "status-success-subtle": "rgba(20, 184, 166, 0.12)",
+  "status-error": primitiveColors.red[600],
+  "status-error-light": primitiveColors.red[400],
+  "status-error-dark": primitiveColors.red[700],
+  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  "status-warning": primitiveColors.amber[500],
+  "status-warning-light": primitiveColors.amber[400],
+  "status-warning-dark": primitiveColors.amber[600],
+  "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
+  "status-info": primitiveColors.sky[500],
+  "status-info-light": primitiveColors.sky[400],
+  "status-info-dark": primitiveColors.sky[700],
+  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  // Text on status backgrounds
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  "result-improve-light": "rgba(76, 175, 80, 0.16)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  "result-degrade-light": "rgba(239, 83, 80, 0.16)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
+  "result-neutral": primitiveColors.neutral[400],
+  // Text on result backgrounds
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (same in dark mode for consistency)
+  "data-1": discreteRainbow[9],
+  "data-2": discreteRainbow[14],
+  "data-3": discreteRainbow[17],
+  "data-4": discreteRainbow[25],
+  "data-5": discreteRainbow[8],
+  "data-6": discreteRainbow[20],
+  "data-7": discreteRainbow[13],
+  "data-8": discreteRainbow[15],
+  "data-9": discreteRainbow[3],
+  "data-10": discreteRainbow[22],
+  // Text colors - inverted for dark mode
+  "text-primary": primitiveColors.neutral[100],
+  "text-secondary": primitiveColors.neutral[400],
+  "text-tertiary": primitiveColors.neutral[500],
+  "text-disabled": "rgba(255, 255, 255, 0.38)",
+  "text-inverse": primitiveColors.neutral[900],
+  "text-link": "#828DF8",
+  "text-link-hover": primitiveColors.blue[400],
+  // Surface colors - dark backgrounds
+  "surface-base": primitiveColors.charcoal[700],
+  // #161616 - main surface
+  "surface-elevated": primitiveColors.charcoal[600],
+  // #191919 - elevated surface
+  "surface-raised": primitiveColors.charcoal[500],
+  // #1C1C1C - raised surface
+  "surface-overlay": primitiveColors.charcoal[600],
+  // #191919 - overlay surface
+  "surface-input": primitiveColors.charcoal[600],
+  // #191919 - input surface
+  // Background colors
+  "background-base": primitiveColors.charcoal[900],
+  // #101010 - darkest charcoal
+  "background-default": primitiveColors.charcoal[700],
+  // #161616 - main background
+  "background-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle background
+  // Border colors
+  "border-default": primitiveColors.charcoal[400],
+  // #1F1F1F - default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle border
+  "border-strong": primitiveColors.charcoal[300],
+  // #2C2C2C - strong border
+  "border-focus": "#828DF8",
+  "border-input": primitiveColors.neutral[600],
+  "border-input-hover": primitiveColors.neutral[500],
+  "border-input-focus": "#828DF8",
+  "border-input-error": primitiveColors.red[500],
+  // Interactive states
+  "interactive-hover": "rgba(255, 255, 255, 0.04)",
+  "interactive-focus": "rgba(255, 255, 255, 0.12)",
+  "interactive-active": "rgba(255, 255, 255, 0.16)",
+  "interactive-selected": "rgba(255, 255, 255, 0.08)",
+  "interactive-disabled": "rgba(255, 255, 255, 0.12)",
+  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
+  // Divider
+  "divider": primitiveColors.charcoal[400],
+  // #1F1F1F - divider color
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[600],
+  "avatar-text": primitiveColors.white
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+}
+
+// src/theme/resolve-color.ts
+function resolveColor(token, mode = "dark") {
+  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
+
+// 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
+  }};
+
+// src/components/custom/Workout/muscleTaxonomy.ts
+var MuscleGroup = /* @__PURE__ */ ((MuscleGroup5) => {
+  MuscleGroup5["CHEST"] = "chest";
+  MuscleGroup5["FRONT_DELTS"] = "front_delts";
+  MuscleGroup5["SIDE_DELTS"] = "side_delts";
+  MuscleGroup5["TRICEPS"] = "triceps";
+  MuscleGroup5["LATS"] = "lats";
+  MuscleGroup5["UPPER_BACK"] = "upper_back";
+  MuscleGroup5["REAR_DELTS"] = "rear_delts";
+  MuscleGroup5["BICEPS"] = "biceps";
+  MuscleGroup5["FOREARMS"] = "forearms";
+  MuscleGroup5["QUADS"] = "quads";
+  MuscleGroup5["HAMSTRINGS"] = "hamstrings";
+  MuscleGroup5["GLUTES"] = "glutes";
+  MuscleGroup5["CALVES"] = "calves";
+  MuscleGroup5["ABS"] = "abs";
+  MuscleGroup5["OBLIQUES"] = "obliques";
+  return MuscleGroup5;
+})(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 */
+};
+function wrapJsx(fn) {
+  return function(type, props, ...rest) {
+    if (props && typeof props.className === "string" && props.className) {
+      const cn2 = props.className;
+      const cssStyle = { $$css: true, [cn2]: cn2 };
+      const existing = props.style;
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle
+      };
+      delete props.className;
+    }
+    return fn(type, props, ...rest);
+  };
+}
+var jsx = wrapJsx(jsxRuntime.jsx);
+var jsxs = wrapJsx(jsxRuntime.jsxs);
+
+// 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;
+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)
+  }));
+}
+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;
+    }
+  }
+  return Array.from(bySimple.values());
+}
+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 BodyMap({
+  data,
+  view,
+  onViewChange,
+  onMusclePress,
+  highlightedMuscle,
+  mode = "detailed",
+  className,
+  ...props
+}) {
+  const slugParts = react.useMemo(() => buildSlugParts(data), [data]);
+  const legend = react.useMemo(
+    () => mode === "simple" ? buildSimpleLegend(data) : buildDetailedLegend(data),
+    [data, mode]
+  );
+  const [highlight] = react.useState(() => new reactNative.Animated.Value(highlightedMuscle ? 1 : 0));
+  react.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)
+    );
+    const muscle = fromData?.muscleGroup ?? SLUG_TO_PRIMARY_MUSCLE[part.slug];
+    if (muscle) onMusclePress(muscle);
+  };
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn(className), testID: "body-map", ...props, children: [
+    /* @__PURE__ */ jsx(ViewToggle, { view, onViewChange }),
+    /* @__PURE__ */ jsx(
+      reactNative.Animated.View,
+      {
+        style: [
+          {
+            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,
+          {
+            side: view,
+            data: slugParts,
+            scale: BODY_SCALE,
+            gender: "male",
+            defaultFill: OUTLINE_FILL,
+            border: OUTLINE_BORDER,
+            onBodyPartPress: handleBodyPress
+          }
+        )
+      }
+    ),
+    legend.length === 0 ? /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        className: "text-text-secondary",
+        style: {
+          marginTop: 8,
+          fontSize: 12,
+          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,
+          {
+            entry,
+            highlighted: highlightedMuscle === entry.muscle,
+            onMusclePress
+          },
+          entry.key
+        ))
+      }
+    )
+  ] });
+}
+function ViewToggle({ view, onViewChange }) {
+  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;
+        return /* @__PURE__ */ jsx(
+          reactNative.Pressable,
+          {
+            onPress: () => onViewChange?.(side),
+            accessibilityRole: "button",
+            accessibilityLabel: `Show ${side} view`,
+            "aria-pressed": active,
+            disabled: !onViewChange,
+            style: {
+              paddingHorizontal: 12,
+              paddingVertical: 4,
+              borderRadius: 9999,
+              backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
+              borderWidth: 1,
+              borderColor: active ? "#FF7900" : resolveColor("border-strong")
+            },
+            testID: `body-map-toggle-${side}`,
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                style: {
+                  fontSize: 12,
+                  fontFamily: "Inter, sans-serif",
+                  fontWeight: active ? "700" : "500",
+                  color: active ? "#FF7900" : resolveColor("text-secondary"),
+                  textTransform: "capitalize"
+                },
+                children: side
+              }
+            )
+          },
+          side
+        );
+      })
+    }
+  );
+}
+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`;
+  return /* @__PURE__ */ jsxs(
+    reactNative.Pressable,
+    {
+      onPress: () => onMusclePress?.(entry.muscle),
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      "aria-pressed": highlighted,
+      className: "bg-surface-raised",
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 5,
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        borderRadius: 9999,
+        borderWidth: 1,
+        borderColor: highlighted ? "#FF7900" : resolveColor("border-default")
+      },
+      testID: `body-map-muscle-${entry.key}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: { width: 7, height: 7, borderRadius: 9999, backgroundColor: dotColor },
+            accessibilityElementsHidden: true,
+            testID: `body-map-muscle-dot-${entry.key}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-text-primary",
+            style: {
+              fontSize: 11,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "500"
+            },
+            accessibilityElementsHidden: true,
+            children: entry.name
+          }
+        )
+      ]
+    }
+  );
+}
+var sizeStyles = {
+  xs: "w-1 h-1",
+  sm: "w-1.5 h-1.5",
+  md: "w-2 h-2",
+  lg: "w-2.5 h-2.5"
+};
+var colorStyles = {
+  default: "bg-text-tertiary",
+  primary: "bg-brand-primary",
+  success: "bg-status-success",
+  error: "bg-status-error",
+  warning: "bg-status-warning",
+  info: "bg-status-info"
+};
+function Indicator({
+  size = "sm",
+  color = "default",
+  customColor,
+  glow = false,
+  ring = false,
+  className,
+  style,
+  ...props
+}) {
+  const dynamicStyle = {
+    ...typeof style === "object" ? style : {},
+    ...customColor ? { backgroundColor: customColor } : {},
+    ...glow && !customColor ? {} : {},
+    ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className: cn(
+        "rounded-full shrink-0",
+        sizeStyles[size],
+        !customColor && colorStyles[color],
+        ring && "border-2 border-background-base",
+        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(20,184,166,0.6)]",
+        glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
+        glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
+        glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
+        className
+      ),
+      style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
+      ...props
+    }
+  );
+}
+
+// src/components/ui/badge/Badge.tsx
+var variantColorStyles = {
+  solid: {
+    default: "bg-border-strong text-text-inverse",
+    primary: "bg-brand-primary text-text-inverse",
+    secondary: "bg-brand-secondary text-text-inverse",
+    success: "bg-status-success text-text-inverse",
+    error: "bg-status-error text-text-inverse",
+    warning: "bg-status-warning text-text-inverse",
+    info: "bg-status-info text-text-inverse"
+  },
+  subtle: {
+    default: "bg-surface-raised text-text-secondary",
+    primary: "bg-brand-primary-subtle text-brand-primary",
+    secondary: "bg-brand-secondary-subtle text-brand-secondary",
+    success: "bg-status-success-subtle text-status-success",
+    error: "bg-status-error-subtle text-status-error",
+    warning: "bg-status-warning-subtle text-status-warning",
+    info: "bg-status-info-subtle text-status-info"
+  },
+  outline: {
+    default: "border border-border-strong text-text-secondary",
+    primary: "border border-brand-primary text-brand-primary",
+    secondary: "border border-brand-secondary text-brand-secondary",
+    success: "border border-status-success text-status-success",
+    error: "border border-status-error text-status-error",
+    warning: "border border-status-warning text-status-warning",
+    info: "border border-status-info text-status-info"
+  }
+};
+var sizeStyles2 = {
+  sm: "px-1.5 py-0.5 text-xs",
+  md: "px-2 py-0.5 text-xs",
+  lg: "px-2.5 py-1 text-sm"
+};
+function Badge({
+  variant = "subtle",
+  color = "default",
+  size = "md",
+  dot,
+  dotColor,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-full font-medium",
+        variantColorStyles[variant][color],
+        sizeStyles2[size],
+        className
+      ),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx(
+          Indicator,
+          {
+            size: "xs",
+            color: dotColor ?? (color === "default" || color === "secondary" ? "default" : color),
+            className: "mr-0.5"
+          }
+        ),
+        typeof children === "string" ? /* @__PURE__ */ jsx(reactNative.Text, { className: "text-inherit font-medium", children }) : children
+      ]
+    }
+  );
+}
+var BRAND_PRIMARY = "#FF7900";
+function normalizeData(data, height) {
+  if (data.length === 0) return [];
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  return data.map((v) => height - (v - min) / range * height);
+}
+function normalizeValue(value, data, height) {
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  return height - (value - min) / range * height;
+}
+function Sparkline({
+  data,
+  width = 80,
+  height = 30,
+  color,
+  showDots = false,
+  referenceLines,
+  highlightLast = false,
+  className,
+  ...props
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: { width, height },
+        className,
+        testID: "sparkline-empty",
+        accessibilityLabel: "Sparkline chart, no data",
+        ...props
+      }
+    );
+  }
+  const resolvedColor = color ?? BRAND_PRIMARY;
+  const normalized = normalizeData(data, height);
+  const stepX = data.length > 1 ? width / (data.length - 1) : 0;
+  const dotSize = 3;
+  const highlightSize = 6;
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { width, height, position: "relative" },
+      className: cn(className),
+      accessibilityRole: "image",
+      accessibilityLabel: `Sparkline chart with ${data.length} data points`,
+      testID: "sparkline",
+      ...props,
+      children: [
+        referenceLines?.map((line, i) => {
+          const y = normalizeValue(line.value, data, height);
+          return /* @__PURE__ */ jsx(
+            reactNative.View,
+            {
+              style: [
+                {
+                  position: "absolute",
+                  top: y,
+                  left: 0,
+                  right: 0,
+                  opacity: 0.6
+                },
+                line.dashed ? {
+                  height: 0,
+                  borderStyle: "dashed",
+                  borderTopWidth: 1,
+                  borderTopColor: line.color
+                } : {
+                  height: 1,
+                  backgroundColor: line.color
+                }
+              ],
+              accessibilityElementsHidden: true,
+              testID: `sparkline-reference-${i}`,
+              children: line.label && /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  style: {
+                    position: "absolute",
+                    right: 0,
+                    top: -10,
+                    fontSize: 7,
+                    color: line.color,
+                    opacity: 1
+                  },
+                  testID: `sparkline-reference-label-${i}`,
+                  children: line.label
+                }
+              )
+            },
+            `ref-${i}`
+          );
+        }),
+        normalized.map((y, i) => {
+          if (i === 0) return null;
+          const prevY = normalized[i - 1];
+          const x1 = (i - 1) * stepX;
+          const x2 = i * stepX;
+          const dx = x2 - x1;
+          const dy = y - prevY;
+          const length = Math.sqrt(dx * dx + dy * dy);
+          const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+          return /* @__PURE__ */ jsx(
+            reactNative.View,
+            {
+              style: {
+                position: "absolute",
+                left: x1,
+                top: prevY,
+                width: length,
+                height: 1.5,
+                backgroundColor: resolvedColor,
+                transformOrigin: "0 0",
+                transform: [{ rotate: `${angle}deg` }]
+              },
+              accessibilityElementsHidden: true,
+              testID: `sparkline-segment-${i}`
+            },
+            `line-${i}`
+          );
+        }),
+        (showDots || highlightLast) && normalized.map((y, i) => {
+          const isLast = i === data.length - 1;
+          const shouldShow = showDots || highlightLast && isLast;
+          if (!shouldShow) return null;
+          const size = highlightLast && isLast ? highlightSize : dotSize;
+          return /* @__PURE__ */ jsx(
+            reactNative.View,
+            {
+              style: {
+                position: "absolute",
+                left: i * stepX - size / 2,
+                top: y - size / 2,
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor: resolvedColor
+              },
+              accessibilityElementsHidden: true,
+              testID: `sparkline-dot-${i}`
+            },
+            `dot-${i}`
+          );
+        })
+      ]
+    }
+  );
+}
+
+// src/components/custom/Workout/BodyMapDetailPanel.tsx
+var BRAND_PRIMARY2 = "#FF7900";
+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 clamp01(value) {
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+function markerFraction(weeklySets, { mev, mrv }) {
+  const span = mrv - mev;
+  if (span <= 0) return weeklySets >= mrv ? 1 : 0;
+  return clamp01((weeklySets - mev) / span);
+}
+function BodyMapDetailPanel({
+  muscleGroup,
+  displayName,
+  weeklySets,
+  landmarks,
+  volumeStatus,
+  lastTrained,
+  weeklyHistory,
+  contributingExercises,
+  upcomingExercises,
+  isOpen,
+  visible,
+  onClose,
+  onViewExercises,
+  ...props
+}) {
+  const open = isOpen ?? visible ?? false;
+  const [translateY] = react.useState(() => new reactNative.Animated.Value(SLIDE_OFFSET));
+  const [backdrop] = react.useState(() => new reactNative.Animated.Value(0));
+  react.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;
+  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",
+      children: [
+        /* @__PURE__ */ jsx(
+          reactNative.Animated.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,
+              {
+                onPress: onClose,
+                accessibilityRole: "button",
+                accessibilityLabel: `Close ${displayName} details`,
+                style: { flex: 1 },
+                testID: "body-map-detail-panel-backdrop"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          reactNative.Animated.View,
+          {
+            accessibilityRole: "dialog",
+            accessibilityLabel: dialogLabel,
+            "aria-label": dialogLabel,
+            className: "bg-surface-elevated",
+            style: {
+              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,
+                    {
+                      className: "bg-border-strong",
+                      style: { width: 40, height: 4, borderRadius: 2 },
+                      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",
+                                className: "text-text-primary",
+                                style: {
+                                  fontSize: 16,
+                                  fontFamily: '"Space Grotesk", sans-serif',
+                                  fontWeight: "700"
+                                },
+                                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, { className: "text-text-secondary", style: { fontSize: 22, lineHeight: 22 }, children: "\xD7" })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    lastTrained != null && /* @__PURE__ */ jsx(
+                      reactNative.Text,
+                      {
+                        className: "text-text-secondary",
+                        style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
+                        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, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MEV ${landmarks.mev}` }),
+                            /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, 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,
+                              {
+                                className: "border-text-primary bg-surface-elevated",
+                                style: {
+                                  position: "absolute",
+                                  left: `${markerLeft}%`,
+                                  marginLeft: -7,
+                                  width: 14,
+                                  height: 14,
+                                  borderRadius: 7,
+                                  borderWidth: 2,
+                                  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,
+                        {
+                          className: "text-text-primary",
+                          style: {
+                            fontSize: 24,
+                            fontFamily: '"Space Grotesk", sans-serif',
+                            fontWeight: "700"
+                          },
+                          testID: "body-map-detail-panel-set-count",
+                          children: weeklySets
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        reactNative.Text,
+                        {
+                          className: "text-text-secondary",
+                          style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
+                          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,
+                        {
+                          className: "text-text-tertiary",
+                          style: {
+                            fontSize: 10,
+                            fontFamily: "Inter, sans-serif",
+                            fontWeight: "600",
+                            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,
+                        {
+                          className: "text-text-tertiary",
+                          style: {
+                            fontSize: 10,
+                            fontFamily: "Inter, sans-serif",
+                            fontWeight: "600",
+                            marginBottom: 8
+                          },
+                          children: "CONTRIBUTING EXERCISES"
+                        }
+                      ),
+                      contributingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
+                        reactNative.View,
+                        {
+                          className: "flex-row items-center justify-between bg-surface-raised border-border",
+                          style: {
+                            gap: 10,
+                            paddingVertical: 8,
+                            paddingHorizontal: 12,
+                            marginBottom: 6,
+                            borderRadius: 8,
+                            borderWidth: 1
+                          },
+                          testID: `body-map-detail-panel-contributing-${index}`,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              reactNative.Text,
+                              {
+                                className: "text-text-primary",
+                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+                                testID: `body-map-detail-panel-contributing-${index}-name`,
+                                children: exercise.name
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              reactNative.Text,
+                              {
+                                className: "text-text-secondary",
+                                style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
+                                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,
+                        {
+                          className: "text-text-tertiary",
+                          style: {
+                            fontSize: 10,
+                            fontFamily: "Inter, sans-serif",
+                            fontWeight: "600",
+                            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,
+                              {
+                                className: "text-text-primary",
+                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+                                testID: `body-map-detail-panel-upcoming-${index}-name`,
+                                children: exercise.name
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              reactNative.Text,
+                              {
+                                className: "text-text-tertiary",
+                                style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
+                                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_PRIMARY2 }, children: "View exercises" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  let r, g, b;
+  if (cleaned.length === 3) {
+    r = parseInt(cleaned[0] + cleaned[0], 16);
+    g = parseInt(cleaned[1] + cleaned[1], 16);
+    b = parseInt(cleaned[2] + cleaned[2], 16);
+  } else if (cleaned.length === 6) {
+    r = parseInt(cleaned.slice(0, 2), 16);
+    g = parseInt(cleaned.slice(2, 4), 16);
+    b = parseInt(cleaned.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+  return { r, g, b };
+}
+function rgbToHsv(r, g, b) {
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  const delta = max - min;
+  const v = max;
+  const s = max === 0 ? 0 : delta / max;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rNorm) {
+      h = 60 * ((gNorm - bNorm) / delta % 6);
+    } else if (max === gNorm) {
+      h = 60 * ((bNorm - rNorm) / delta + 2);
+    } else {
+      h = 60 * ((rNorm - gNorm) / delta + 4);
+    }
+  }
+  if (h < 0) h += 360;
+  return { h, s, v };
+}
+function hsvToRgb(h, s, v) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let rPrime, gPrime, bPrime;
+  if (h >= 0 && h < 60) {
+    rPrime = c;
+    gPrime = x;
+    bPrime = 0;
+  } else if (h >= 60 && h < 120) {
+    rPrime = x;
+    gPrime = c;
+    bPrime = 0;
+  } else if (h >= 120 && h < 180) {
+    rPrime = 0;
+    gPrime = c;
+    bPrime = x;
+  } else if (h >= 180 && h < 240) {
+    rPrime = 0;
+    gPrime = x;
+    bPrime = c;
+  } else if (h >= 240 && h < 300) {
+    rPrime = x;
+    gPrime = 0;
+    bPrime = c;
+  } else {
+    rPrime = c;
+    gPrime = 0;
+    bPrime = x;
+  }
+  return {
+    r: Math.round((rPrime + m) * 255),
+    g: Math.round((gPrime + m) * 255),
+    b: Math.round((bPrime + m) * 255)
+  };
+}
+function rgbToHex(r, g, b) {
+  const toHex = (n) => {
+    const clamped = Math.max(0, Math.min(255, Math.round(n)));
+    return clamped.toString(16).padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lighten(hex, amount = 0.1) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const newV = Math.min(1, hsv.v + amount);
+  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
+  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+}
+var shadowColors = {
+  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
+  charcoal: {
+    dark: "rgba(0, 0, 0, 0.5)",
+    light: "rgba(255, 255, 255, 0.12)",
+    // brighter for crisp rim light
+    darker: "rgba(0, 0, 0, 0.6)"
+  },
+  // For neutral dark surfaces (~#1F2937)
+  neutralDark: {
+    dark: "rgba(0, 0, 0, 0.4)",
+    light: "rgba(255, 255, 255, 0.08)",
+    darker: "rgba(0, 0, 0, 0.5)"
+  },
+  // For light surfaces (white/light gray backgrounds)
+  neutralLight: {
+    dark: "rgba(0, 0, 0, 0.15)",
+    // Visible dark shadow for depth on light backgrounds
+    light: "rgba(255, 255, 255, 1)",
+    // Bright highlight for raised effect (visible on light gray)
+    darker: "rgba(0, 0, 0, 0.2)"
+    // Deeper shadow for pressed states
+  }
+};
+var intensityConfig = {
+  subtle: { offset: 1, blur: 2 },
+  // very light, barely visible
+  medium: { offset: 2, blur: 4 },
+  // noticeable but restrained
+  strong: { offset: 2, blur: 5 }
+  // slightly deeper blur, same offset as medium
+};
+function createRaisedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native shadow approximation (limited compared to web)
+      shadowColor: "#000",
+      shadowOffset: { width: offset, height: offset },
+      shadowOpacity: 0.3,
+      shadowRadius: blur / 2,
+      elevation: offset
+    }
+  });
+}
+function createPressedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimOffset = 1;
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native doesn't support inset shadows, approximate with darker bg
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+function createFlatShadow() {
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: "none"
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      // Keep same offsets as normal state for rim to prevent "shrinking" effect
+      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowColor: "#000",
+      shadowOffset: { width: hoverOffset, height: hoverOffset },
+      shadowOpacity: 0.2,
+      shadowRadius: hoverBlur / 2,
+      elevation: hoverOffset
+    }
+  });
+}
+function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
+      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+({
+  // Charcoal surface shadows (for dark toolbars, cards)
+  charcoal: {
+    raised: {
+      subtle: createRaisedShadow("charcoal", "subtle"),
+      medium: createRaisedShadow("charcoal", "medium"),
+      strong: createRaisedShadow("charcoal", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("charcoal", "subtle"),
+      medium: createRaisedHoverShadow("charcoal", "medium"),
+      strong: createRaisedHoverShadow("charcoal", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("charcoal", "subtle"),
+      medium: createPressedShadow("charcoal", "medium"),
+      strong: createPressedShadow("charcoal", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("charcoal", "subtle"),
+      medium: createPressedHoverShadow("charcoal", "medium"),
+      strong: createPressedHoverShadow("charcoal", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral dark surface shadows
+  neutralDark: {
+    raised: {
+      subtle: createRaisedShadow("neutralDark", "subtle"),
+      medium: createRaisedShadow("neutralDark", "medium"),
+      strong: createRaisedShadow("neutralDark", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
+      medium: createRaisedHoverShadow("neutralDark", "medium"),
+      strong: createRaisedHoverShadow("neutralDark", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralDark", "subtle"),
+      medium: createPressedShadow("neutralDark", "medium"),
+      strong: createPressedShadow("neutralDark", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralDark", "subtle"),
+      medium: createPressedHoverShadow("neutralDark", "medium"),
+      strong: createPressedHoverShadow("neutralDark", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral light surface shadows
+  neutralLight: {
+    raised: {
+      subtle: createRaisedShadow("neutralLight", "subtle"),
+      medium: createRaisedShadow("neutralLight", "medium"),
+      strong: createRaisedShadow("neutralLight", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
+      medium: createRaisedHoverShadow("neutralLight", "medium"),
+      strong: createRaisedHoverShadow("neutralLight", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralLight", "subtle"),
+      medium: createPressedShadow("neutralLight", "medium"),
+      strong: createPressedShadow("neutralLight", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralLight", "subtle"),
+      medium: createPressedHoverShadow("neutralLight", "medium"),
+      strong: createPressedHoverShadow("neutralLight", "strong")
+    },
+    flat: createFlatShadow()
+  }
+});
+var elevationSystem = {
+  // Deep inset (recessed input fields, deeply pressed buttons)
+  [-2]: {
+    name: "deep-inset",
+    colorAdjustment: 0,
+    shadowIntensity: "strong",
+    shadowStyle: "pressed",
+    description: "Deeply recessed elements (e.g., input fields, deeply pressed buttons)"
+  },
+  // Shallow inset (pressed buttons, sunken panels)
+  [-1]: {
+    name: "inset",
+    colorAdjustment: 0,
+    shadowIntensity: "medium",
+    shadowStyle: "pressed",
+    description: "Shallow inset elements (e.g., pressed buttons, sunken panels within cards)"
+  },
+  // Base level (page background, default surface)
+  [0]: {
+    name: "base",
+    colorAdjustment: 0,
+    shadowIntensity: "subtle",
+    shadowStyle: "raised",
+    description: "Base surface level (page background, default containers)"
+  },
+  // Level 1: Subtle elevation (outline cards, subtle containers)
+  [1]: {
+    name: "subtle",
+    colorAdjustment: 0.01,
+    shadowIntensity: "subtle",
+    shadowStyle: "raised",
+    description: "Subtle elevation (outline cards, subtle containers)"
+  },
+  // Level 2: Standard elevation (default cards, buttons)
+  [2]: {
+    name: "standard",
+    colorAdjustment: 0.02,
+    shadowIntensity: "medium",
+    shadowStyle: "raised",
+    description: "Standard elevation (default cards, raised buttons)"
+  },
+  // Level 3: Prominent elevation (important cards, modals)
+  [3]: {
+    name: "prominent",
+    colorAdjustment: 0.04,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "Prominent elevation (important cards, modals, dropdowns)"
+  },
+  // Level 4: High elevation (overlays, popovers)
+  [4]: {
+    name: "high",
+    colorAdjustment: 0.06,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "High elevation (overlays, popovers, tooltips)"
+  },
+  // Level 5: Floating (toasts, floating action buttons)
+  [5]: {
+    name: "floating",
+    colorAdjustment: 0.08,
+    shadowIntensity: "strong",
+    shadowStyle: "raised",
+    description: "Floating elevation (toasts, floating action buttons, highest z-index)"
+  }
+};
+function calculateRimLightColor(baseColor, level) {
+  const rgb = hexToRgb(baseColor);
+  if (!rgb) {
+    return "rgba(255, 255, 255, 0.5)";
+  }
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const isLight = hsv.v > 0.6;
+  const isSaturated = hsv.s > 0.3;
+  const absLevel = Math.abs(level);
+  const opacityBoost = Math.max(0, (absLevel - 1) * 0.05);
+  if (isSaturated) {
+    const rimLightValue = 0.95;
+    const rimLightRgb = hsvToRgb(hsv.h, hsv.s * 0.3, rimLightValue);
+    const baseOpacity = isLight ? 0.9 : 0.5;
+    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
+    return `rgba(${rimLightRgb.r}, ${rimLightRgb.g}, ${rimLightRgb.b}, ${finalOpacity.toFixed(2)})`;
+  } else {
+    const baseOpacity = isLight ? 0.9 : 0.12;
+    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
+    return `rgba(255, 255, 255, ${finalOpacity.toFixed(2)})`;
+  }
+}
+function calculateDarkShadowColors(surfaceColor) {
+  const rgb = hexToRgb(surfaceColor);
+  if (!rgb) {
+    return {
+      dark: "rgba(0, 0, 0, 0.3)",
+      darker: "rgba(0, 0, 0, 0.4)"
+    };
+  }
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const isLight = hsv.v > 0.6;
+  const isSaturated = hsv.s > 0.3;
+  if (isSaturated) {
+    const darkShadowValue = 0.15;
+    const darkShadowRgb = hsvToRgb(hsv.h, hsv.s, darkShadowValue);
+    if (isLight) {
+      return {
+        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.3)`,
+        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.4)`
+      };
+    } else {
+      return {
+        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.5)`,
+        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.6)`
+      };
+    }
+  } else {
+    if (isLight) {
+      return {
+        dark: "rgba(0, 0, 0, 0.2)",
+        darker: "rgba(0, 0, 0, 0.3)"
+      };
+    } else {
+      return {
+        dark: "rgba(0, 0, 0, 0.5)",
+        darker: "rgba(0, 0, 0, 0.6)"
+      };
+    }
+  }
+}
+function getRimLightConfig() {
+  return {
+    offset: 1,
+    // Fixed 1px for crisp rim
+    blur: 1
+    // Tight blur for crisp edge
+  };
+}
+var elevationSurfaceCache = /* @__PURE__ */ new Map();
+var MAX_CACHE_SIZE = 100;
+function getCacheKey(baseColor, level, theme) {
+  return `${baseColor}-${level}-${theme}`;
+}
+function calculateElevationSurface(baseColor, level, theme) {
+  const config = elevationSystem[level];
+  if (config.colorAdjustment === 0) {
+    return baseColor;
+  }
+  if (level < 0) {
+    return baseColor;
+  }
+  return lighten(baseColor, config.colorAdjustment);
+}
+function getElevationSurface(baseColor, level, theme) {
+  const cacheKey = getCacheKey(baseColor, level, theme);
+  if (elevationSurfaceCache.has(cacheKey)) {
+    return elevationSurfaceCache.get(cacheKey);
+  }
+  const result = calculateElevationSurface(baseColor, level);
+  if (elevationSurfaceCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = elevationSurfaceCache.keys().next().value;
+    elevationSurfaceCache.delete(firstKey);
+  }
+  elevationSurfaceCache.set(cacheKey, result);
+  return result;
+}
+var elevationShadowCache = /* @__PURE__ */ new Map();
+var MAX_SHADOW_CACHE_SIZE = 50;
+function getShadowCacheKey(baseColor, level, theme, isHovered) {
+  return `${baseColor}-${level}-${theme}-${isHovered}`;
+}
+function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
+  const config = elevationSystem[level];
+  if (level === 0) {
+    return {};
+  }
+  const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
+  const rimLightColor = calculateRimLightColor(baseColor, level);
+  const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
+  const intensityConfig2 = {
+    subtle: { offset: 1, blur: 2 },
+    medium: { offset: 2, blur: 4 },
+    strong: { offset: 2, blur: 5 }
+  };
+  const { offset, blur } = intensityConfig2[config.shadowIntensity];
+  const rimConfig = getRimLightConfig();
+  if (config.shadowStyle === "pressed") {
+    if (isHovered) {
+      const hoverOffset = Math.max(1, Math.round(offset / 2));
+      const hoverBlur = Math.max(1, Math.round(blur / 2));
+      return reactNative.Platform.select({
+        web: {
+          boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
+        },
+        default: {
+          shadowOpacity: 0,
+          elevation: 0
+        }
+      });
+    }
+    return reactNative.Platform.select({
+      web: {
+        boxShadow: `inset ${offset}px ${offset}px ${blur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
+      },
+      default: {
+        shadowOpacity: 0,
+        elevation: 0
+      }
+    });
+  } else {
+    if (isHovered) {
+      const hoverOffset = Math.max(1, Math.round(offset / 2));
+      const hoverBlur = Math.max(1, Math.round(blur / 2));
+      return reactNative.Platform.select({
+        web: {
+          boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
+        },
+        default: {
+          shadowColor: "#000",
+          shadowOffset: { width: hoverOffset, height: hoverOffset },
+          shadowOpacity: 0.2,
+          shadowRadius: hoverBlur / 2,
+          elevation: hoverOffset
+        }
+      });
+    }
+    return reactNative.Platform.select({
+      web: {
+        boxShadow: `${offset}px ${offset}px ${blur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
+      },
+      default: {
+        shadowColor: "#000",
+        shadowOffset: { width: offset, height: offset },
+        shadowOpacity: 0.3,
+        shadowRadius: blur / 2,
+        elevation: offset
+      }
+    });
+  }
+}
+function getElevationShadow(baseColor, level, theme, isHovered = false) {
+  const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
+  if (elevationShadowCache.has(cacheKey)) {
+    return elevationShadowCache.get(cacheKey);
+  }
+  const result = calculateElevationShadow(baseColor, level, theme, isHovered);
+  if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
+    const firstKey = elevationShadowCache.keys().next().value;
+    elevationShadowCache.delete(firstKey);
+  }
+  elevationShadowCache.set(cacheKey, result);
+  return result;
+}
+function getBaseSurfaceColor(theme) {
+  return theme === "light" ? semanticColorsLight["surface-raised"] : semanticColorsDark["surface-elevated"];
+}
+var componentElevationRanges = {
+  button: {
+    allowed: [2],
+    default: 2,
+    hover: 3
+  },
+  card: {
+    allowed: [1, 2, 3],
+    default: 2,
+    hover: 3
+  },
+  input: {
+    allowed: [-2, -1, 0],
+    default: -1
+  },
+  overlay: {
+    allowed: [4, 5],
+    default: 4
+  }
+};
+function getValidatedElevation(component, requested) {
+  const range = componentElevationRanges[component];
+  if (range.allowed.includes(requested)) {
+    return requested;
+  }
+  const sorted = [...range.allowed].sort((a, b) => a - b);
+  if (requested < sorted[0]) return sorted[0];
+  if (requested > sorted[sorted.length - 1]) return sorted[sorted.length - 1];
+  return sorted.reduce(
+    (prev, curr) => Math.abs(curr - requested) < Math.abs(prev - requested) ? curr : prev
+  );
+}
+function getTheme() {
+  if (typeof document === "undefined") return "dark";
+  return document.documentElement.classList.contains("light") ? "light" : "dark";
+}
+var listeners = [];
+function subscribe(listener) {
+  listeners = [...listeners, listener];
+  if (typeof document !== "undefined" && listeners.length === 1) {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          listeners.forEach((l) => l());
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    subscribe._observer = observer;
+  }
+  return () => {
+    listeners = listeners.filter((l) => l !== listener);
+    if (listeners.length === 0 && subscribe._observer) {
+      subscribe._observer.disconnect();
+      subscribe._observer = null;
+    }
+  };
+}
+function getSnapshot() {
+  return getTheme();
+}
+function getServerSnapshot() {
+  return "dark";
+}
+function useTheme() {
+  return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/components/ui/card/Card.tsx
+var variantStyles = {
+  elevated: "",
+  // Will be set dynamically via elevation system
+  outline: "border-2 border-border-strong",
+  // Thicker border with stronger contrast
+  filled: "",
+  // Will be set dynamically via elevation system
+  accent: "border border-border",
+  subtle: "border border-border-subtle"
+};
+function Card({
+  variant = "elevated",
+  elevation = 2,
+  isInteractive = false,
+  isLoading = false,
+  onPress,
+  borderColor,
+  bgColor,
+  accentColor,
+  accentWidth,
+  className,
+  children,
+  style,
+  skeletonHasHeader = true,
+  skeletonHasFooter = false,
+  skeletonContentLines = 3,
+  ...props
+}) {
+  const isClickable = isInteractive || !!onPress;
+  const [isHovered, setIsHovered] = react.useState(false);
+  const theme = useTheme();
+  const elevationLevel = react.useMemo(() => {
+    const validated = getValidatedElevation("card", elevation);
+    if (variant === "outline" || variant === "accent" || variant === "subtle") {
+      return 1;
+    }
+    return validated;
+  }, [variant, elevation]);
+  const baseColor = react.useMemo(() => getBaseSurfaceColor(theme), [theme]);
+  const surfaceColor = react.useMemo(() => {
+    if ((variant === "outline" || variant === "accent") && theme === "light") {
+      return "#FAFAFA";
+    }
+    if (variant === "subtle") {
+      return getElevationSurface(baseColor, 0, theme);
+    }
+    return getElevationSurface(baseColor, elevationLevel, theme);
+  }, [baseColor, elevationLevel, theme, variant]);
+  const shadowStyle = react.useMemo(() => {
+    const shouldHover = isHovered && isClickable;
+    return getElevationShadow(baseColor, elevationLevel, theme, shouldHover);
+  }, [baseColor, elevationLevel, theme, isHovered, isClickable]);
+  const cardContent = isLoading ? /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    skeletonHasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(reactNative.View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(reactNative.View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: skeletonContentLines }).map((_, i) => /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        className: cn(
+          "h-4 bg-interactive-disabled rounded",
+          i < skeletonContentLines - 1 ? "mb-2 w-full" : "w-4/5"
+        )
+      },
+      i
+    )) }),
+    skeletonHasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(reactNative.View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+  ] }) : children;
+  const baseClassName = cn(
+    "rounded-lg overflow-hidden relative",
+    // Apply variant styles, but only use default border color if no custom borderColor
+    variant === "outline" ? borderColor ? "border-2" : variantStyles[variant] : variantStyles[variant],
+    // Remove Tailwind shadow classes - we're using elevation shadows via style prop
+    isClickable && "web:cursor-pointer web:transition-all web:duration-150",
+    isClickable && "web:hover:-translate-y-0.5 active:scale-[0.99]",
+    isLoading && "pointer-events-none animate-pulse",
+    className
+  );
+  const accentStyle = react.useMemo(() => variant === "accent" ? {
+    borderLeftWidth: accentWidth ?? 3,
+    borderLeftColor: accentColor ?? "var(--color-brand-primary)"
+  } : {}, [variant, accentWidth, accentColor]);
+  const mergedStyle = react.useMemo(() => {
+    const elevationStyle = {
+      backgroundColor: bgColor || surfaceColor,
+      borderRadius: 8,
+      overflow: "hidden",
+      ...shadowStyle,
+      ...accentStyle
+    };
+    if (borderColor) {
+      elevationStyle.borderColor = borderColor;
+    }
+    if (!style) return elevationStyle;
+    return [elevationStyle, style];
+  }, [style, surfaceColor, shadowStyle, borderColor, bgColor, accentStyle]);
+  if (isClickable) {
+    return /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress,
+        onHoverIn: () => setIsHovered(true),
+        onHoverOut: () => setIsHovered(false),
+        accessibilityRole: "button",
+        className: baseClassName,
+        style: mergedStyle,
+        ...props,
+        children: cardContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(reactNative.View, { className: baseClassName, style: mergedStyle, ...props, children: cardContent });
+}
+function CardHeader({ children, className }) {
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-6", className), children });
+}
+function CardContent({ children, className }) {
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4", className), children });
+}
+function CardFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
+}
+var solidVariantColors = {
+  success: "#14B8A6",
+  warning: "#FFB020",
+  error: "#D14343",
+  neutral: "#6B7280"
+};
+var ringVariantStyles = {
+  "on-track": {
+    backgroundColor: "rgba(20,184,166,0.15)",
+    borderWidth: 1,
+    borderColor: "rgba(20,184,166,0.3)"
+  },
+  deviation: {
+    backgroundColor: "rgba(245,158,11,0.15)",
+    borderWidth: 1,
+    borderColor: "rgba(245,158,11,0.25)"
+  },
+  future: {
+    backgroundColor: "rgba(107,114,128,0.1)",
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: "rgba(107,114,128,0.2)"
+  }
+};
+var glowStyles = {
+  success: { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  warning: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
+  error: { boxShadow: "0 0 4px rgba(239,68,68,0.4)" },
+  neutral: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" },
+  "on-track": { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  deviation: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
+  future: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" }
+};
+var iconChars = {
+  check: "\u2713",
+  exclamation: "!",
+  dash: "\u2014"
+};
+var iconColors = {
+  success: "#0A5C52",
+  warning: "#6B4000",
+  error: "#5C1A1A",
+  neutral: "#D1D5DB",
+  "on-track": "#14B8A6",
+  deviation: "#FFB020",
+  future: "#6B7280"
+};
+var sizeDimensions = {
+  sm: { size: 8, showIcon: false },
+  md: { size: 18, showIcon: true }
+};
+function isSolidVariant(variant) {
+  return variant in solidVariantColors;
+}
+function StatusDot({
+  variant,
+  icon,
+  size = "sm",
+  glow,
+  label,
+  className,
+  ...props
+}) {
+  const config = sizeDimensions[size];
+  const solid = isSolidVariant(variant);
+  const ring = ringVariantStyles[variant];
+  const glowStyle = glow ? glowStyles[variant] : null;
+  const dot = /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      style: [
+        {
+          width: config.size,
+          height: config.size,
+          borderRadius: 9999,
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        solid ? { backgroundColor: solidVariantColors[variant] } : void 0,
+        ring ? ring : void 0,
+        glowStyle ? glowStyle : void 0
+      ],
+      accessibilityRole: "image",
+      accessibilityLabel: `${variant} status`,
+      testID: "status-dot",
+      children: config.showIcon && icon && /* @__PURE__ */ jsx(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: 11,
+            lineHeight: 11,
+            fontWeight: "900",
+            color: iconColors[variant]
+          },
+          accessibilityElementsHidden: true,
+          children: iconChars[icon]
+        }
+      )
+    }
+  );
+  if (label) {
+    return /* @__PURE__ */ jsxs(
+      reactNative.View,
+      {
+        className,
+        style: { flexDirection: "row", alignItems: "center", gap: 6 },
+        accessibilityLabel: `${variant} status: ${label}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, children: dot }),
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              style: { fontSize: 12, lineHeight: 16, color: "#9CA3AF" },
+              accessibilityElementsHidden: true,
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(reactNative.View, { className, ...props, children: dot });
+}
+
+// src/components/custom/Workout/MesoStatusCard.tsx
+var BRAND_PRIMARY3 = "#FF7900";
+var BRAND_PRIMARY_DARK = "#C45E00";
+var BRAND_PRIMARY_LIGHT = "#FFB066";
+var SUCCESS = "#14B8A6";
+var WARNING = "#FFB020";
+var ERROR = "#D14343";
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY3, BRAND_PRIMARY_LIGHT];
+var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
+var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)";
+var STATUS_VARIANTS = {
+  success: { bg: "rgba(20,184,166,0.15)", border: "rgba(20,184,166,0.3)", text: SUCCESS },
+  warning: { bg: "rgba(255,176,32,0.15)", border: "rgba(255,176,32,0.3)", text: WARNING },
+  error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
+};
+function clamp012(value) {
+  if (!Number.isFinite(value)) return 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+function getGaugeZoneColor(level) {
+  if (level >= 0.7) return ERROR;
+  if (level >= 0.4) return WARNING;
+  return SUCCESS;
+}
+function renderCoachingText(text, highlights) {
+  if (!highlights || highlights.length === 0) return text;
+  const escaped = highlights.filter(Boolean).map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  if (escaped.length === 0) return text;
+  const regex = new RegExp(`(${escaped.join("|")})`, "g");
+  return text.split(regex).map(
+    (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        className: "text-text-primary",
+        style: { fontWeight: "700" },
+        children: part
+      },
+      `${part}-${index}`
+    ) : /* @__PURE__ */ jsx(react.Fragment, { children: part }, `t-${index}`)
+  );
+}
+function StatusPill({ badge }) {
+  const colors = STATUS_VARIANTS[badge.variant];
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className: "flex-row items-center",
+      style: {
+        gap: 5,
+        paddingVertical: 3,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+        borderWidth: 1,
+        backgroundColor: colors.bg,
+        borderColor: colors.border
+      },
+      testID: "meso-status-card-badge",
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(StatusDot, { variant: badge.variant, size: "sm" }) }),
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 10,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "700",
+              letterSpacing: 0.3,
+              color: colors.text
+            },
+            children: badge.label
+          }
+        )
+      ]
+    }
+  );
+}
+function MetricCell({ metric }) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { width: "48%" }, testID: "meso-status-card-metric", children: [
+    /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        className: "text-text-tertiary",
+        style: {
+          fontSize: 10,
+          fontFamily: "Inter, sans-serif",
+          fontWeight: "600",
+          letterSpacing: 0.5,
+          textTransform: "uppercase"
+        },
+        children: metric.label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        className: "text-text-primary",
+        style: {
+          marginTop: 2,
+          fontSize: 13,
+          fontFamily: "Inter, sans-serif",
+          fontWeight: "600"
+        },
+        children: metric.value
+      }
+    )
+  ] });
+}
+function Gauge({ gauge }) {
+  const level = clamp012(gauge.level);
+  const percentage = Math.round(level * 100);
+  const markerColor = getGaugeZoneColor(level);
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { gap: 6 },
+      accessibilityRole: "progressbar",
+      accessibilityValue: { min: 0, max: 100, now: percentage },
+      accessibilityLabel: `${gauge.label}: ${percentage}%`,
+      "aria-valuenow": percentage,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      testID: "meso-status-card-gauge",
+      children: [
+        /* @__PURE__ */ jsxs(
+          reactNative.View,
+          {
+            className: "flex-row items-center justify-between",
+            accessibilityElementsHidden: true,
+            children: [
+              /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-secondary",
+                  style: {
+                    fontSize: 10,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: "500",
+                    letterSpacing: 0.5,
+                    textTransform: "uppercase"
+                  },
+                  children: gauge.label
+                }
+              ),
+              gauge.sublabel != null && /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-tertiary",
+                  style: {
+                    fontSize: 10,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: "500"
+                  },
+                  children: gauge.sublabel
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          reactNative.View,
+          {
+            style: {
+              height: 8,
+              borderRadius: 4,
+              position: "relative",
+              backgroundImage: GAUGE_GRADIENT
+            },
+            accessibilityElementsHidden: true,
+            children: [
+              /* @__PURE__ */ jsx(
+                reactNative.View,
+                {
+                  style: {
+                    position: "absolute",
+                    left: "50%",
+                    top: 0,
+                    bottom: 0,
+                    width: 1,
+                    marginLeft: -0.5,
+                    backgroundColor: "rgba(255,255,255,0.3)"
+                  },
+                  testID: "meso-status-card-gauge-center"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                reactNative.View,
+                {
+                  className: "border-text-primary",
+                  style: {
+                    position: "absolute",
+                    left: `${percentage}%`,
+                    top: -3,
+                    marginLeft: -7,
+                    width: 14,
+                    height: 14,
+                    borderRadius: 9999,
+                    borderWidth: 2,
+                    backgroundColor: markerColor,
+                    boxShadow: "0 0 4px rgba(0,0,0,0.5)"
+                  },
+                  testID: "meso-status-card-gauge-marker"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MesoStatusCard({
+  mesoName,
+  mesoSubtitle,
+  statusBadge,
+  metrics,
+  gauges,
+  coaching,
+  nextTarget,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outline",
+      elevation: 1,
+      borderColor: BRAND_PRIMARY_DARK,
+      className,
+      style: {
+        borderColor: BRAND_PRIMARY_DARK,
+        borderWidth: 1,
+        backgroundImage: CARD_GRADIENT
+      },
+      role: "article",
+      "aria-label": `Mesocycle status for ${mesoName}`,
+      testID: "meso-status-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            className: "flex-row",
+            style: { position: "absolute", top: 0, left: 0, right: 0, height: 3, zIndex: 1 },
+            accessibilityElementsHidden: true,
+            testID: "meso-status-card-accent",
+            children: ACCENT_STOPS.map((color) => /* @__PURE__ */ jsx(reactNative.View, { style: { flex: 1, backgroundColor: color } }, color))
+          }
+        ),
+        /* @__PURE__ */ jsxs(reactNative.View, { style: { padding: 14, gap: 14 }, testID: "meso-status-card-body", children: [
+          /* @__PURE__ */ jsxs(reactNative.View, { testID: "meso-status-card-header", children: [
+            /* @__PURE__ */ jsxs(
+              reactNative.View,
+              {
+                className: "flex-row items-center justify-between",
+                style: { gap: 8 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    reactNative.Text,
+                    {
+                      className: "text-text-primary",
+                      style: {
+                        flexShrink: 1,
+                        fontSize: 15,
+                        fontFamily: '"Space Grotesk", sans-serif',
+                        fontWeight: "700"
+                      },
+                      testID: "meso-status-card-name",
+                      children: mesoName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(StatusPill, { badge: statusBadge })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: "text-text-secondary",
+                style: {
+                  marginTop: 4,
+                  fontSize: 12,
+                  fontFamily: "Inter, sans-serif"
+                },
+                testID: "meso-status-card-subtitle",
+                children: mesoSubtitle
+              }
+            )
+          ] }),
+          metrics.length > 0 && /* @__PURE__ */ jsx(
+            reactNative.View,
+            {
+              className: "flex-row flex-wrap",
+              style: { gap: 8 },
+              testID: "meso-status-card-metrics",
+              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell, { metric }, `${metric.label}-${index}`))
+            }
+          ),
+          gauges.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 12 }, testID: "meso-status-card-gauges", children: gauges.map((gauge, index) => /* @__PURE__ */ jsx(Gauge, { gauge }, `${gauge.label}-${index}`)) }),
+          coaching != null && /* @__PURE__ */ jsx(
+            reactNative.View,
+            {
+              style: {
+                backgroundColor: "rgba(255,176,32,0.06)",
+                borderWidth: 1,
+                borderColor: "rgba(255,176,32,0.15)",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 12
+              },
+              testID: "meso-status-card-coaching",
+              children: /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-secondary",
+                  style: {
+                    fontSize: 12,
+                    lineHeight: 17,
+                    fontFamily: "Inter, sans-serif"
+                  },
+                  children: renderCoachingText(coaching.text, coaching.highlights)
+                }
+              )
+            }
+          ),
+          nextTarget != null && /* @__PURE__ */ jsxs(
+            reactNative.View,
+            {
+              className: "flex-row items-center",
+              style: {
+                gap: 8,
+                backgroundColor: "rgba(20,184,166,0.06)",
+                borderWidth: 1,
+                borderColor: "rgba(20,184,166,0.2)",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 12
+              },
+              testID: "meso-status-card-next-target",
+              children: [
+                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 14, color: SUCCESS }, accessibilityElementsHidden: true, children: nextTarget.icon }),
+                /* @__PURE__ */ jsx(
+                  reactNative.Text,
+                  {
+                    style: {
+                      flexShrink: 1,
+                      fontSize: 12,
+                      fontFamily: "Inter, sans-serif",
+                      fontWeight: "600",
+                      color: SUCCESS
+                    },
+                    children: nextTarget.text
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/custom/Workout/TrainingStatusPage.tsx
+var STATUS_ORDER = ["under", "maintenance", "productive", "over"];
+function deriveTrainingSummary(muscles) {
+  const statusCounts = {
+    under: 0,
+    maintenance: 0,
+    productive: 0,
+    over: 0
+  };
+  let totalWeeklySets = 0;
+  for (const muscle of muscles) {
+    totalWeeklySets += muscle.weeklySets;
+    statusCounts[muscle.volumeStatus] += 1;
+  }
+  return { totalWeeklySets, trackedMuscles: muscles.length, statusCounts };
+}
+function toBodyMapData(muscles, side) {
+  return muscles.filter((muscle) => muscle.side === side).map(({ muscleGroup, intensity, volumeStatus, weeklySets }) => ({
+    muscleGroup,
+    intensity,
+    volumeStatus,
+    weeklySets
+  }));
+}
+var SUMMARY_CARDS = [
+  { key: "total", label: "Weekly Sets" },
+  { key: "productive", label: "Productive" },
+  { key: "under", label: "Under" },
+  { key: "over", label: "Over" }
+];
+function SummaryCards({ summary }) {
+  return /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row flex-wrap", style: { gap: 8 }, testID: "training-status-page-summary", children: SUMMARY_CARDS.map(({ key, label }) => {
+    const value = key === "total" ? summary.totalWeeklySets : summary.statusCounts[key];
+    return /* @__PURE__ */ jsxs(
+      reactNative.View,
+      {
+        className: "bg-surface-elevated border-border",
+        style: {
+          flexGrow: 1,
+          flexBasis: "46%",
+          padding: 12,
+          borderRadius: 10,
+          borderWidth: 1
+        },
+        testID: `training-status-page-summary-${key}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-primary",
+              style: {
+                fontSize: 22,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: "700"
+              },
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-tertiary",
+              style: {
+                marginTop: 2,
+                fontSize: 11,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "600",
+                letterSpacing: 0.4,
+                textTransform: "uppercase"
+              },
+              children: label
+            }
+          )
+        ]
+      },
+      key
+    );
+  }) });
+}
+function StatusLegend() {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className: "flex-row flex-wrap",
+      style: { gap: 10, justifyContent: "center" },
+      testID: "training-status-page-legend",
+      children: STATUS_ORDER.map((status) => /* @__PURE__ */ jsxs(
+        reactNative.View,
+        {
+          className: "flex-row items-center",
+          style: { gap: 5 },
+          testID: `training-status-page-legend-${status}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: 9999,
+                  backgroundColor: getHeatmapColor(status, 0.6)
+                },
+                accessibilityElementsHidden: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: "text-text-secondary",
+                style: {
+                  fontSize: 11,
+                  fontFamily: "Inter, sans-serif",
+                  textTransform: "capitalize"
+                },
+                children: VOLUME_STATUS_LABELS[status]
+              }
+            )
+          ]
+        },
+        status
+      ))
+    }
+  );
+}
+function BodyMapColumn({ side, muscles, selected, onSelect }) {
+  const data = react.useMemo(() => toBodyMapData(muscles, side), [muscles, side]);
+  return /* @__PURE__ */ jsx(reactNative.View, { style: { flexGrow: 1, flexBasis: "46%" }, testID: `training-status-page-bodymap-${side}`, children: /* @__PURE__ */ jsx(
+    BodyMap,
+    {
+      data,
+      view: side,
+      onMusclePress: onSelect,
+      highlightedMuscle: selected,
+      mode: "detailed"
+    }
+  ) });
+}
+function TrainingStatusPage({
+  title = "Training Status",
+  meso,
+  muscles,
+  className,
+  ...props
+}) {
+  const [selected, setSelected] = react.useState(null);
+  const summary = react.useMemo(() => deriveTrainingSummary(muscles), [muscles]);
+  const active = selected != null ? muscles.find((m) => m.muscleGroup === selected) ?? null : null;
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className: ["bg-background-base", className].filter(Boolean).join(" "),
+      style: { position: "relative", width: 390 },
+      accessibilityRole: "main",
+      "aria-label": title,
+      testID: "training-status-page",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { style: { padding: 16, gap: 16 }, testID: "training-status-page-content", children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              accessibilityRole: "header",
+              className: "text-text-primary",
+              style: {
+                fontSize: 20,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: "700"
+              },
+              testID: "training-status-page-title",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(MesoStatusCard, { ...meso }),
+          /* @__PURE__ */ jsx(SummaryCards, { summary }),
+          /* @__PURE__ */ jsxs(
+            reactNative.View,
+            {
+              className: "bg-surface-elevated border-border",
+              style: {
+                borderWidth: 1,
+                borderRadius: 12,
+                padding: 12,
+                gap: 12
+              },
+              testID: "training-status-page-bodymaps",
+              children: [
+                /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row", style: { gap: 8 }, children: [
+                  /* @__PURE__ */ jsx(
+                    BodyMapColumn,
+                    {
+                      side: "front",
+                      muscles,
+                      selected,
+                      onSelect: setSelected
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    BodyMapColumn,
+                    {
+                      side: "back",
+                      muscles,
+                      selected,
+                      onSelect: setSelected
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(StatusLegend, {})
+              ]
+            }
+          )
+        ] }),
+        active != null && /* @__PURE__ */ jsx(
+          BodyMapDetailPanel,
+          {
+            muscleGroup: active.muscleGroup,
+            displayName: active.displayName,
+            weeklySets: active.weeklySets,
+            landmarks: active.landmarks,
+            volumeStatus: active.volumeStatus,
+            lastTrained: active.lastTrained,
+            weeklyHistory: active.weeklyHistory,
+            contributingExercises: active.contributingExercises,
+            upcomingExercises: active.upcomingExercises,
+            isOpen: true,
+            onClose: () => setSelected(null)
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.BodyMap = BodyMap;
+exports.BodyMapDetailPanel = BodyMapDetailPanel;
+exports.DEFAULT_VOLUME_LANDMARKS = DEFAULT_VOLUME_LANDMARKS;
+exports.DETAILED_TO_SIMPLE = DETAILED_TO_SIMPLE;
+exports.MUSCLE_DISPLAY_NAMES = MUSCLE_DISPLAY_NAMES;
+exports.MUSCLE_TO_CATEGORY = MUSCLE_TO_CATEGORY;
+exports.MUSCLE_TO_SVG_SLUGS = MUSCLE_TO_SVG_SLUGS;
+exports.MuscleGroup = MuscleGroup;
+exports.SIMPLE_DISPLAY_NAMES = SIMPLE_DISPLAY_NAMES;
+exports.SIMPLE_TO_DETAILED = SIMPLE_TO_DETAILED;
+exports.SimpleMuscleGroup = SimpleMuscleGroup;
+exports.TrainingStatusPage = TrainingStatusPage;
+exports.VOLUME_STATUS_LABELS = VOLUME_STATUS_LABELS;
+exports.deriveTrainingSummary = deriveTrainingSummary;
+exports.getHeatmapColor = getHeatmapColor;
+exports.toBodyMapData = toBodyMapData;
+//# sourceMappingURL=bodymap.js.map
+//# sourceMappingURL=bodymap.js.map