@titan-design/react-ui 0.2.6 → 0.3.0

package/dist/bodymap.mjs

@@ -0,0 +1,1101 @@
+import { WORKOUT_TOKENS, jsxs, jsx, cn, Badge, Sparkline, MesoStatusCard } from './chunk-TOD2WQBG.mjs';
+import './chunk-P7TSQUN6.mjs';
+import './chunk-7XPB4NAO.mjs';
+import { useMemo, useState, useEffect } from 'react';
+import { Animated, Easing, View, Text, Pressable, ScrollView } from 'react-native';
+import BodyHighlighter from 'react-native-body-highlighter';
+
+// 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 */
+};
+
+// src/components/custom/Workout/BodyMap.tsx
+var Body = BodyHighlighter.default ?? BodyHighlighter;
+var OUTLINE_FILL = "rgba(255,255,255,0.08)";
+var OUTLINE_BORDER = "rgba(255,255,255,0.12)";
+var BODY_SCALE = 0.8;
+var TEXT_PRIMARY = "var(--color-text-primary)";
+var TEXT_SECONDARY = "var(--color-text-secondary)";
+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 = useMemo(() => buildSlugParts(data), [data]);
+  const legend = useMemo(
+    () => mode === "simple" ? buildSimpleLegend(data) : buildDetailedLegend(data),
+    [data, mode]
+  );
+  const [highlight] = useState(() => new Animated.Value(highlightedMuscle ? 1 : 0));
+  useEffect(() => {
+    const animation = Animated.timing(highlight, {
+      toValue: highlightedMuscle ? 1 : 0,
+      duration: 250,
+      easing: Easing.out(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(View, { className: cn(className), testID: "body-map", ...props, children: [
+    /* @__PURE__ */ jsx(ViewToggle, { view, onViewChange }),
+    /* @__PURE__ */ jsx(
+      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(
+      Text,
+      {
+        style: {
+          marginTop: 8,
+          fontSize: 12,
+          color: TEXT_SECONDARY,
+          textAlign: "center",
+          fontFamily: "Inter, sans-serif"
+        },
+        testID: "body-map-empty",
+        children: "No training data"
+      }
+    ) : /* @__PURE__ */ jsx(
+      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(
+    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(
+          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" : "var(--color-border-strong)"
+            },
+            testID: `body-map-toggle-${side}`,
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  fontSize: 12,
+                  fontFamily: "Inter, sans-serif",
+                  fontWeight: active ? "700" : "500",
+                  color: active ? "#FF7900" : 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(
+    Pressable,
+    {
+      onPress: () => onMusclePress?.(entry.muscle),
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      "aria-pressed": highlighted,
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 5,
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        borderRadius: 9999,
+        borderWidth: 1,
+        borderColor: highlighted ? "#FF7900" : "var(--color-border-default)",
+        backgroundColor: "var(--color-surface-raised)"
+      },
+      testID: `body-map-muscle-${entry.key}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: { width: 7, height: 7, borderRadius: 9999, backgroundColor: dotColor },
+            accessibilityElementsHidden: true,
+            testID: `body-map-muscle-dot-${entry.key}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 11,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "500",
+              color: TEXT_PRIMARY
+            },
+            accessibilityElementsHidden: true,
+            children: entry.name
+          }
+        )
+      ]
+    }
+  );
+}
+var SURFACE_ELEVATED = "var(--color-surface-elevated)";
+var SURFACE_RAISED = "var(--color-surface-raised)";
+var BORDER_STRONG = "var(--color-border-strong)";
+var BORDER_DEFAULT = "var(--color-border-default)";
+var BRAND_PRIMARY = "#FF7900";
+var TEXT_PRIMARY2 = "var(--color-text-primary)";
+var TEXT_SECONDARY2 = "var(--color-text-secondary)";
+var TEXT_TERTIARY = "var(--color-text-tertiary)";
+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] = useState(() => new Animated.Value(SLIDE_OFFSET));
+  const [backdrop] = useState(() => new Animated.Value(0));
+  useEffect(() => {
+    if (!open) return;
+    const animation = Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 400,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: false
+      }),
+      Animated.timing(backdrop, {
+        toValue: BACKDROP_OPACITY,
+        duration: 300,
+        easing: Easing.out(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(
+    View,
+    {
+      style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "flex-end" },
+      testID: "body-map-detail-panel-root",
+      children: [
+        /* @__PURE__ */ jsx(
+          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(
+              Pressable,
+              {
+                onPress: onClose,
+                accessibilityRole: "button",
+                accessibilityLabel: `Close ${displayName} details`,
+                style: { flex: 1 },
+                testID: "body-map-detail-panel-backdrop"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            accessibilityRole: "dialog",
+            accessibilityLabel: dialogLabel,
+            "aria-label": dialogLabel,
+            style: {
+              backgroundColor: SURFACE_ELEVATED,
+              borderTopLeftRadius: 16,
+              borderTopRightRadius: 16,
+              maxHeight: "88%",
+              transform: [{ translateY }]
+            },
+            testID: "body-map-detail-panel",
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(
+                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(
+                    View,
+                    {
+                      style: { width: 40, height: 4, borderRadius: 2, backgroundColor: BORDER_STRONG },
+                      accessibilityElementsHidden: true
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                ScrollView,
+                {
+                  style: { paddingHorizontal: 16 },
+                  contentContainerStyle: { paddingBottom: 20 },
+                  testID: "body-map-detail-panel-scroll",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      View,
+                      {
+                        className: "flex-row items-center justify-between",
+                        style: { gap: 8, paddingTop: 4, paddingBottom: 4 },
+                        testID: "body-map-detail-panel-header",
+                        children: [
+                          /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 8, flexShrink: 1 }, children: [
+                            /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                accessibilityRole: "header",
+                                style: {
+                                  fontSize: 16,
+                                  fontFamily: '"Space Grotesk", sans-serif',
+                                  fontWeight: "700",
+                                  color: TEXT_PRIMARY2
+                                },
+                                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(
+                            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(Text, { style: { fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY2 }, children: "\xD7" })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    lastTrained != null && /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                        testID: "body-map-detail-panel-last-trained",
+                        children: `Last trained ${lastTrained}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(View, { style: { marginTop: 16 }, testID: "body-map-detail-panel-volume", children: [
+                      /* @__PURE__ */ jsxs(
+                        View,
+                        {
+                          className: "flex-row items-center justify-between",
+                          style: { marginBottom: 6 },
+                          accessibilityElementsHidden: true,
+                          children: [
+                            /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY }, children: `MEV ${landmarks.mev}` }),
+                            /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY }, children: `MRV ${landmarks.mrv}` })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        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(
+                              View,
+                              {
+                                style: { height: 8, borderRadius: 4, backgroundImage: VOLUME_GRADIENT },
+                                accessibilityElementsHidden: true
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              View,
+                              {
+                                style: {
+                                  position: "absolute",
+                                  left: `${markerLeft}%`,
+                                  marginLeft: -7,
+                                  width: 14,
+                                  height: 14,
+                                  borderRadius: 7,
+                                  borderWidth: 2,
+                                  borderColor: TEXT_PRIMARY2,
+                                  backgroundColor: SURFACE_ELEVATED,
+                                  boxShadow: "0 0 4px rgba(0,0,0,0.5)"
+                                },
+                                accessibilityElementsHidden: true,
+                                testID: "body-map-detail-panel-volume-marker"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(View, { className: "flex-row items-baseline", style: { marginTop: 14, gap: 4 }, children: [
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          style: {
+                            fontSize: 24,
+                            fontFamily: '"Space Grotesk", sans-serif',
+                            fontWeight: "700",
+                            color: TEXT_PRIMARY2
+                          },
+                          testID: "body-map-detail-panel-set-count",
+                          children: weeklySets
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                          testID: "body-map-detail-panel-mrv-suffix",
+                          children: `/ ${landmarks.mrv} MRV`
+                        }
+                      )
+                    ] }),
+                    weeklyHistory != null && weeklyHistory.length > 0 && /* @__PURE__ */ jsxs(View, { style: { marginTop: 14 }, testID: "body-map-detail-panel-sparkline", children: [
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          style: {
+                            fontSize: 10,
+                            fontFamily: "Inter, sans-serif",
+                            fontWeight: "600",
+                            color: TEXT_TERTIARY,
+                            marginBottom: 6
+                          },
+                          accessibilityElementsHidden: true,
+                          children: "VOLUME TREND"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Sparkline, { data: weeklyHistory, width: 80, height: 30, highlightLast: true })
+                    ] }),
+                    hasContributing && /* @__PURE__ */ jsxs(View, { style: { marginTop: 16 }, testID: "body-map-detail-panel-contributing", children: [
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          style: {
+                            fontSize: 10,
+                            fontFamily: "Inter, sans-serif",
+                            fontWeight: "600",
+                            color: TEXT_TERTIARY,
+                            marginBottom: 8
+                          },
+                          children: "CONTRIBUTING EXERCISES"
+                        }
+                      ),
+                      contributingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
+                        View,
+                        {
+                          className: "flex-row items-center justify-between",
+                          style: {
+                            gap: 10,
+                            paddingVertical: 8,
+                            paddingHorizontal: 12,
+                            marginBottom: 6,
+                            borderRadius: 8,
+                            backgroundColor: SURFACE_RAISED,
+                            borderWidth: 1,
+                            borderColor: BORDER_DEFAULT
+                          },
+                          testID: `body-map-detail-panel-contributing-${index}`,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY2 },
+                                testID: `body-map-detail-panel-contributing-${index}-name`,
+                                children: exercise.name
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                                testID: `body-map-detail-panel-contributing-${index}-detail`,
+                                children: `${exercise.sets} sets \xB7 ${Math.round(exercise.contributionWeight * 100)}%`
+                              }
+                            )
+                          ]
+                        },
+                        `${exercise.name}-${index}`
+                      ))
+                    ] }),
+                    hasUpcoming && /* @__PURE__ */ jsxs(View, { style: { marginTop: 16 }, testID: "body-map-detail-panel-upcoming", children: [
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          style: {
+                            fontSize: 10,
+                            fontFamily: "Inter, sans-serif",
+                            fontWeight: "600",
+                            color: TEXT_TERTIARY,
+                            marginBottom: 8
+                          },
+                          children: "UPCOMING"
+                        }
+                      ),
+                      upcomingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
+                        View,
+                        {
+                          className: "flex-row items-center justify-between",
+                          style: { gap: 10, paddingVertical: 6 },
+                          testID: `body-map-detail-panel-upcoming-${index}`,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY2 },
+                                testID: `body-map-detail-panel-upcoming-${index}-name`,
+                                children: exercise.name
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY },
+                                testID: `body-map-detail-panel-upcoming-${index}-detail`,
+                                children: `${exercise.workoutName} \xB7 ${exercise.sets} sets`
+                              }
+                            )
+                          ]
+                        },
+                        `${exercise.name}-${index}`
+                      ))
+                    ] }),
+                    onViewExercises != null && /* @__PURE__ */ jsx(
+                      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(Text, { style: { fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "700", color: BRAND_PRIMARY }, children: "View exercises" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var SURFACE_ELEVATED2 = "var(--color-surface-elevated)";
+var BORDER_DEFAULT2 = "var(--color-border-default)";
+var TEXT_PRIMARY3 = "var(--color-text-primary)";
+var TEXT_SECONDARY3 = "var(--color-text-secondary)";
+var TEXT_TERTIARY2 = "var(--color-text-tertiary)";
+var PAGE_BG = "var(--color-background-base)";
+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(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(
+      View,
+      {
+        style: {
+          flexGrow: 1,
+          flexBasis: "46%",
+          padding: 12,
+          borderRadius: 10,
+          backgroundColor: SURFACE_ELEVATED2,
+          borderWidth: 1,
+          borderColor: BORDER_DEFAULT2
+        },
+        testID: `training-status-page-summary-${key}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                fontSize: 22,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: "700",
+                color: TEXT_PRIMARY3
+              },
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                marginTop: 2,
+                fontSize: 11,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "600",
+                letterSpacing: 0.4,
+                textTransform: "uppercase",
+                color: TEXT_TERTIARY2
+              },
+              children: label
+            }
+          )
+        ]
+      },
+      key
+    );
+  }) });
+}
+function StatusLegend() {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: "flex-row flex-wrap",
+      style: { gap: 10, justifyContent: "center" },
+      testID: "training-status-page-legend",
+      children: STATUS_ORDER.map((status) => /* @__PURE__ */ jsxs(
+        View,
+        {
+          className: "flex-row items-center",
+          style: { gap: 5 },
+          testID: `training-status-page-legend-${status}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: 9999,
+                  backgroundColor: getHeatmapColor(status, 0.6)
+                },
+                accessibilityElementsHidden: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  fontSize: 11,
+                  fontFamily: "Inter, sans-serif",
+                  color: TEXT_SECONDARY3,
+                  textTransform: "capitalize"
+                },
+                children: VOLUME_STATUS_LABELS[status]
+              }
+            )
+          ]
+        },
+        status
+      ))
+    }
+  );
+}
+function BodyMapColumn({ side, muscles, selected, onSelect }) {
+  const data = useMemo(() => toBodyMapData(muscles, side), [muscles, side]);
+  return /* @__PURE__ */ jsx(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] = useState(null);
+  const summary = useMemo(() => deriveTrainingSummary(muscles), [muscles]);
+  const active = selected != null ? muscles.find((m) => m.muscleGroup === selected) ?? null : null;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className,
+      style: { position: "relative", width: 390, backgroundColor: PAGE_BG },
+      accessibilityRole: "main",
+      "aria-label": title,
+      testID: "training-status-page",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: { padding: 16, gap: 16 }, testID: "training-status-page-content", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              accessibilityRole: "header",
+              style: {
+                fontSize: 20,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: "700",
+                color: TEXT_PRIMARY3
+              },
+              testID: "training-status-page-title",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(MesoStatusCard, { ...meso }),
+          /* @__PURE__ */ jsx(SummaryCards, { summary }),
+          /* @__PURE__ */ jsxs(
+            View,
+            {
+              style: {
+                backgroundColor: SURFACE_ELEVATED2,
+                borderWidth: 1,
+                borderColor: BORDER_DEFAULT2,
+                borderRadius: 12,
+                padding: 12,
+                gap: 12
+              },
+              testID: "training-status-page-bodymaps",
+              children: [
+                /* @__PURE__ */ jsxs(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)
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { BodyMap, BodyMapDetailPanel, DEFAULT_VOLUME_LANDMARKS, DETAILED_TO_SIMPLE, MUSCLE_DISPLAY_NAMES, MUSCLE_TO_CATEGORY, MUSCLE_TO_SVG_SLUGS, MuscleGroup, SIMPLE_DISPLAY_NAMES, SIMPLE_TO_DETAILED, SimpleMuscleGroup, TrainingStatusPage, VOLUME_STATUS_LABELS, deriveTrainingSummary, getHeatmapColor, toBodyMapData };
+//# sourceMappingURL=bodymap.mjs.map
+//# sourceMappingURL=bodymap.mjs.map