@titan-design/react-ui 0.2.7 → 0.3.0

package/dist/index.mjs

@@ -1,37 +1,13 @@
-import { getHoverColors, getValidatedElevation, getBaseSurfaceColor, getElevationSurface, getElevationShadow, getGlowShadow, neumorphicShadows } from './chunk-3VLOBS6O.mjs';
-export { applyThemePreset, audiobookPreset, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getValidatedElevation, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lighten, neumorphicShadows, rgbToHex, rgbToHsv, shadowColors, validateCssPropertyManifest } from './chunk-3VLOBS6O.mjs';
-import { semanticColorsDark, __require } from './chunk-5SSKGS6E.mjs';
-export { buttonSizes, darkThemeCSSVars, discreteRainbow, getDiscreteRainbowColor, getSemanticColors, getThemeCSSVars, gluestackConfig, lightThemeCSSVars, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography } from './chunk-5SSKGS6E.mjs';
+import { jsxs, jsx, cn, WORKOUT_TOKENS, Fragment, Card, Badge, MesoStatusCard } from './chunk-TOD2WQBG.mjs';
+export { Badge, BadgeText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Indicator, MesoStatusCard, Sparkline, StatusDot, cn } from './chunk-TOD2WQBG.mjs';
+import { getHoverColors, getBaseSurfaceColor, getElevationSurface, getElevationShadow, getGlowShadow, neumorphicShadows } from './chunk-P7TSQUN6.mjs';
+export { applyThemePreset, audiobookPreset, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getValidatedElevation, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lighten, neumorphicShadows, rgbToHex, rgbToHsv, shadowColors, validateCssPropertyManifest } from './chunk-P7TSQUN6.mjs';
+import { semanticColorsDark, __require } from './chunk-7XPB4NAO.mjs';
+export { buttonSizes, darkThemeCSSVars, discreteRainbow, getDiscreteRainbowColor, getSemanticColors, getThemeCSSVars, gluestackConfig, lightThemeCSSVars, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography } from './chunk-7XPB4NAO.mjs';
 import { Pressable, ActivityIndicator, Text, View, TextInput, Platform, StyleSheet, Easing, Image, Modal as Modal$1, ScrollView, Animated } from 'react-native';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from 'react/jsx-runtime';
-import React24, { forwardRef, useState, createContext, useMemo, useContext, useRef, useEffect, useCallback, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import React23, { forwardRef, useState, createContext, useContext, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Dumbbell, Star } from 'lucide-react';
-import BodyHighlighter from 'react-native-body-highlighter';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-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(jsx$1);
-var jsxs = wrapJsx(jsxs$1);
-
-// src/components/ui/alert/Alert.tsx
 var statusColors = {
   success: {
     subtle: "bg-status-success-subtle",
@@ -472,328 +448,6 @@ var PasswordInput = forwardRef(function PasswordInput2({ showIcon, hideIcon, ...
     }
   );
 });
-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 useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-
-// src/components/ui/card/Card.tsx
-var variantStyles3 = {
-  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] = useState(false);
-  const theme = useTheme();
-  const elevationLevel = useMemo(() => {
-    const validated = getValidatedElevation("card", elevation);
-    if (variant === "outline" || variant === "accent" || variant === "subtle") {
-      return 1;
-    }
-    return validated;
-  }, [variant, elevation]);
-  const baseColor = useMemo(() => getBaseSurfaceColor(theme), [theme]);
-  const surfaceColor = 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 = useMemo(() => {
-    const shouldHover = isHovered && isClickable;
-    return getElevationShadow(baseColor, elevationLevel, theme, shouldHover);
-  }, [baseColor, elevationLevel, theme, isHovered, isClickable]);
-  const cardContent = isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    skeletonHasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
-      /* @__PURE__ */ jsx(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(
-      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(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" : variantStyles3[variant] : variantStyles3[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 = useMemo(() => variant === "accent" ? {
-    borderLeftWidth: accentWidth ?? 3,
-    borderLeftColor: accentColor ?? "var(--color-brand-primary)"
-  } : {}, [variant, accentWidth, accentColor]);
-  const mergedStyle = 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(
-      Pressable,
-      {
-        onPress,
-        onHoverIn: () => setIsHovered(true),
-        onHoverOut: () => setIsHovered(false),
-        accessibilityRole: "button",
-        className: baseClassName,
-        style: mergedStyle,
-        ...props,
-        children: cardContent
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(View, { className: baseClassName, style: mergedStyle, ...props, children: cardContent });
-}
-function CardHeader({ children, className }) {
-  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-6", className), children });
-}
-function CardTitle({ children, className }) {
-  return /* @__PURE__ */ jsx(
-    Text,
-    {
-      accessibilityRole: "header",
-      className: cn("text-lg font-semibold text-text-primary font-heading", className),
-      children
-    }
-  );
-}
-function CardDescription({ children, className }) {
-  return /* @__PURE__ */ jsx(Text, { className: cn("mt-1.5 text-sm text-text-secondary", className), children });
-}
-function CardContent({ children, className }) {
-  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4", className), children });
-}
-function CardFooter({ children, className }) {
-  return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
-}
-function CardSkeleton({
-  hasHeader = true,
-  hasFooter = false,
-  contentLines = 3,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", elevation: 2, className: cn("animate-pulse", className), children: [
-    hasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
-      /* @__PURE__ */ jsx(View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: contentLines }).map((_, i) => /* @__PURE__ */ jsx(
-      View,
-      {
-        className: cn(
-          "h-4 bg-interactive-disabled rounded",
-          i < contentLines - 1 ? "mb-2 w-full" : "w-4/5"
-        )
-      },
-      i
-    )) }),
-    hasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
-  ] });
-}
-var sizeStyles3 = {
-  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(
-    View,
-    {
-      className: cn(
-        "rounded-full shrink-0",
-        sizeStyles3[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 sizeStyles4 = {
-  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(
-    View,
-    {
-      className: cn(
-        "inline-flex items-center justify-center rounded-full font-medium",
-        variantColorStyles[variant][color],
-        sizeStyles4[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(Text, { className: "text-inherit font-medium", children }) : children
-      ]
-    }
-  );
-}
-function BadgeText({ children, className }) {
-  return /* @__PURE__ */ jsx(Text, { className: cn("text-inherit font-medium", className), children });
-}
 var sizeMap = {
   sm: "small",
   md: "small",
@@ -862,7 +516,7 @@ function getInitials(name) {
 }
 
 // src/components/ui/avatar/Avatar.tsx
-var sizeStyles5 = {
+var sizeStyles3 = {
   xs: { container: "w-6 h-6", text: "text-xs", image: "w-6 h-6" },
   sm: { container: "w-8 h-8", text: "text-xs", image: "w-8 h-8" },
   md: { container: "w-10 h-10", text: "text-sm", image: "w-10 h-10" },
@@ -879,7 +533,7 @@ function Avatar({
   className,
   ...props
 }) {
-  const styles2 = sizeStyles5[size];
+  const styles2 = sizeStyles3[size];
   const hasImage = source !== void 0;
   const resolvedFallback = fallback ?? (colorFromName ? getInitials(colorFromName) : void 0);
   const nameColor = colorFromName ? avatarColor(colorFromName) : void 0;
@@ -931,7 +585,7 @@ function AvatarGroup({
   size = "md",
   className
 }) {
-  const childArray = React24.Children.toArray(children);
+  const childArray = React23.Children.toArray(children);
   const visibleChildren = max ? childArray.slice(0, max) : childArray;
   const remainingCount = max ? Math.max(0, childArray.length - max) : 0;
   return /* @__PURE__ */ jsxs(View, { className: cn("flex-row", className), children: [
@@ -942,7 +596,7 @@ function AvatarGroup({
           "border-2 border-surface-base rounded-full",
           index > 0 && "-ml-2"
         ),
-        children: React24.isValidElement(child) ? React24.cloneElement(child, { size }) : child
+        children: React23.isValidElement(child) ? React23.cloneElement(child, { size }) : child
       },
       index
     )),
@@ -952,9 +606,9 @@ function AvatarGroup({
         className: cn(
           "border-2 border-surface-base rounded-full -ml-2",
           "items-center justify-center bg-surface-raised",
-          sizeStyles5[size].container
+          sizeStyles3[size].container
         ),
-        children: /* @__PURE__ */ jsxs(Text, { className: cn("font-semibold text-text-secondary", sizeStyles5[size].text), children: [
+        children: /* @__PURE__ */ jsxs(Text, { className: cn("font-semibold text-text-secondary", sizeStyles3[size].text), children: [
           "+",
           remainingCount
         ] })
@@ -980,7 +634,7 @@ function Divider({
     }
   );
 }
-var sizeStyles6 = {
+var sizeStyles4 = {
   sm: { box: "w-4 h-4", icon: "w-2.5 h-2.5", label: "text-sm" },
   md: { box: "w-5 h-5", icon: "w-3 h-3", label: "text-base" },
   lg: { box: "w-6 h-6", icon: "w-3.5 h-3.5", label: "text-lg" }
@@ -998,7 +652,7 @@ var Checkbox = forwardRef(function Checkbox2({
   className,
   ...props
 }, ref) {
-  const styles2 = sizeStyles6[size];
+  const styles2 = sizeStyles4[size];
   const handlePress = () => {
     if (!isDisabled) {
       onCheckedChange?.(!isChecked);
@@ -1066,7 +720,7 @@ function CheckboxGroup({
     )
   ] });
 }
-var sizeStyles7 = {
+var sizeStyles5 = {
   sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
   md: { track: "w-10 h-5", thumb: "w-4 h-4", translate: "translate-x-5" },
   lg: { track: "w-12 h-6", thumb: "w-5 h-5", translate: "translate-x-6" }
@@ -1081,7 +735,7 @@ var Switch = forwardRef(function Switch2({
   className,
   ...props
 }, ref) {
-  const styles2 = sizeStyles7[size];
+  const styles2 = sizeStyles5[size];
   const handlePress = () => {
     if (!isDisabled) {
       onCheckedChange?.(!isChecked);
@@ -1131,7 +785,7 @@ var Switch = forwardRef(function Switch2({
   );
 });
 var ModalContext = createContext({ size: "md", scrollBehavior: "outside" });
-var sizeStyles8 = {
+var sizeStyles6 = {
   xs: "max-w-xs",
   sm: "max-w-sm",
   md: "max-w-md",
@@ -1198,7 +852,7 @@ function ModalContent({ children, className }) {
         {
           className: cn(
             "bg-surface-elevated rounded-lg shadow-xl w-full",
-            sizeStyles8[size],
+            sizeStyles6[size],
             className
           ),
           children
@@ -1264,7 +918,7 @@ function Skeleton({
   style,
   ...props
 }) {
-  const variantStyles5 = {
+  const variantStyles4 = {
     text: "h-4 rounded",
     circle: "rounded-full",
     rect: "",
@@ -1289,7 +943,7 @@ function Skeleton({
       accessibilityLabel: "Loading...",
       className: cn(
         "bg-interactive-disabled",
-        variantStyles5[variant],
+        variantStyles4[variant],
         animationStyles[animation],
         className
       ),
@@ -1412,7 +1066,7 @@ function Tabs({
 }
 function TabList({ children, className }) {
   const { variant, orientation } = useContext(TabsContext);
-  const variantStyles5 = {
+  const variantStyles4 = {
     line: orientation === "horizontal" ? "border-b border-border" : "border-r border-border",
     enclosed: "bg-surface-raised rounded-lg p-1",
     "soft-rounded": "bg-surface-raised rounded-full p-1"
@@ -1422,12 +1076,12 @@ function TabList({ children, className }) {
     {
       className: cn(
         orientation === "horizontal" ? "flex-row" : "flex-col",
-        variantStyles5[variant],
+        variantStyles4[variant],
         className
       ),
-      children: React24.Children.map(children, (child, index) => {
-        if (React24.isValidElement(child)) {
-          return React24.cloneElement(child, { index });
+      children: React23.Children.map(children, (child, index) => {
+        if (React23.isValidElement(child)) {
+          return React23.cloneElement(child, { index });
         }
         return child;
       })
@@ -1455,7 +1109,7 @@ function Tab({
   const { activeIndex, setActiveIndex, variant, orientation } = useContext(TabsContext);
   const isActive = activeIndex === index;
   const baseStyles = "font-medium text-sm transition-colors";
-  const variantStyles5 = {
+  const variantStyles4 = {
     line: cn(
       "px-4 py-2",
       orientation === "horizontal" ? "-mb-px border-b-2" : "-mr-px border-r-2",
@@ -1479,7 +1133,7 @@ function Tab({
       onPress: () => setActiveIndex(index),
       className: cn(
         baseStyles,
-        variantStyles5[variant],
+        variantStyles4[variant],
         isDisabled && "opacity-50 cursor-not-allowed",
         className
       ),
@@ -1498,8 +1152,8 @@ function Tab({
 }
 function TabPanels({ children, className }) {
   const { activeIndex } = useContext(TabsContext);
-  return /* @__PURE__ */ jsx(View, { className: cn("flex-1", className), children: React24.Children.map(children, (child, index) => {
-    if (React24.isValidElement(child) && index === activeIndex) {
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-1", className), children: React23.Children.map(children, (child, index) => {
+    if (React23.isValidElement(child) && index === activeIndex) {
       return child;
     }
     return null;
@@ -1508,7 +1162,7 @@ function TabPanels({ children, className }) {
 function TabPanel({ children, className }) {
   return /* @__PURE__ */ jsx(View, { className: cn("py-4", className), children });
 }
-var colorStyles2 = {
+var colorStyles = {
   default: {
     solid: "bg-neutral-600 text-white",
     subtle: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200",
@@ -1545,7 +1199,7 @@ var colorStyles2 = {
     outline: "border border-status-info text-status-info"
   }
 };
-var sizeStyles9 = {
+var sizeStyles7 = {
   sm: { container: "px-2 py-0.5 rounded", text: "text-xs", deleteButton: "ml-1 -mr-0.5" },
   md: { container: "px-3 py-1 rounded-md", text: "text-sm", deleteButton: "ml-1.5 -mr-1" },
   lg: { container: "px-4 py-1.5 rounded-md", text: "text-base", deleteButton: "ml-2 -mr-1" }
@@ -1562,7 +1216,7 @@ function Chip({
   children,
   ...props
 }) {
-  const sizes = sizeStyles9[size];
+  const sizes = sizeStyles7[size];
   const isClickable = !!onPress;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     leftElement && /* @__PURE__ */ jsx(View, { className: "mr-1.5", children: leftElement }),
@@ -1588,7 +1242,7 @@ function Chip({
   const baseClassName = cn(
     "flex-row items-center",
     sizes.container,
-    colorStyles2[color][variant],
+    colorStyles[color][variant],
     isClickable && "web:cursor-pointer web:hover:opacity-80 active:opacity-70",
     isDisabled && "opacity-50 cursor-not-allowed",
     className
@@ -1608,7 +1262,7 @@ function Chip({
   }
   return /* @__PURE__ */ jsx(View, { className: baseClassName, ...props, children: content });
 }
-var colorStyles3 = {
+var colorStyles2 = {
   default: "text-text-link",
   primary: "text-brand-primary",
   secondary: "text-brand-secondary",
@@ -1646,7 +1300,7 @@ function Link({
         {
           className: cn(
             "font-medium",
-            colorStyles3[color],
+            colorStyles2[color],
             underlineStyles[underline],
             isDisabled && "opacity-50 cursor-not-allowed",
             "web:cursor-pointer active:opacity-70",
@@ -1899,9 +1553,9 @@ function Accordion({
       return newSet;
     });
   };
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(View, { className: cn("w-full divide-y divide-border", className), ...props, children: React24.Children.map(children, (child, index) => {
-    if (React24.isValidElement(child)) {
-      return React24.cloneElement(child, { index });
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openIndices, toggleIndex, allowMultiple }, children: /* @__PURE__ */ jsx(View, { className: cn("w-full divide-y divide-border", className), ...props, children: React23.Children.map(children, (child, index) => {
+    if (React23.isValidElement(child)) {
+      return React23.cloneElement(child, { index });
     }
     return child;
   }) }) });
@@ -1909,9 +1563,9 @@ function Accordion({
 function AccordionItem({ index = 0, children, className }) {
   const { openIndices, toggleIndex } = useContext(AccordionContext);
   const isOpen = openIndices.has(index);
-  return /* @__PURE__ */ jsx(View, { className, children: React24.Children.map(children, (child) => {
-    if (React24.isValidElement(child)) {
-      return React24.cloneElement(child, {
+  return /* @__PURE__ */ jsx(View, { className, children: React23.Children.map(children, (child) => {
+    if (React23.isValidElement(child)) {
+      return React23.cloneElement(child, {
         isOpen,
         onToggle: () => toggleIndex(index)
       });
@@ -1954,7 +1608,7 @@ function Breadcrumbs({
   children,
   ...props
 }) {
-  const items = React24.Children.toArray(children);
+  const items = React23.Children.toArray(children);
   let displayItems = items;
   if (maxItems && items.length > maxItems) {
     const firstItem = items[0];
@@ -2451,7 +2105,7 @@ var ToolbarButtonContext = createContext({
 var BUTTON_BG = "#3C3C3C";
 var MENU_BG = "#2C2C2C";
 var hoverColors = getHoverColors(BUTTON_BG, "medium");
-var sizeStyles10 = {
+var sizeStyles8 = {
   sm: "px-2 py-1 min-h-[26px]",
   md: "px-2.5 py-1 min-h-[30px]",
   lg: "px-3 py-1.5 min-h-[36px]"
@@ -2528,7 +2182,7 @@ function ToolbarButton({
           "flex-row items-center justify-center rounded",
           "web:transition-all web:duration-150 web:cursor-pointer",
           // Size
-          sizeStyles10[size],
+          sizeStyles8[size],
           // Disabled
           isDisabled && "opacity-40 web:cursor-default web:pointer-events-none",
           className
@@ -2540,7 +2194,7 @@ function ToolbarButton({
           }
         ],
         children: [
-          icon && /* @__PURE__ */ jsx(View, { className: "w-5 h-5 items-center justify-center", children: React24.isValidElement(icon) ? React24.cloneElement(icon, {
+          icon && /* @__PURE__ */ jsx(View, { className: "w-5 h-5 items-center justify-center", children: React23.isValidElement(icon) ? React23.cloneElement(icon, {
             size: 20,
             width: 20,
             height: 20,
@@ -2679,7 +2333,7 @@ var sizeConfig = {
   md: { outer: "w-5 h-5", inner: "w-2.5 h-2.5", text: "text-base" },
   lg: { outer: "w-6 h-6", inner: "w-3 h-3", text: "text-lg" }
 };
-var colorStyles4 = {
+var colorStyles3 = {
   primary: { checked: "border-brand-primary bg-brand-primary", unchecked: "border-border-strong" },
   secondary: { checked: "border-brand-secondary bg-brand-secondary", unchecked: "border-border-strong" },
   success: { checked: "border-status-success bg-status-success", unchecked: "border-border-strong" },
@@ -2704,7 +2358,7 @@ function Radio({
   const color = radioColor ?? groupColor ?? "primary";
   const isChecked = selectedValue === value;
   const { outer, inner, text } = sizeConfig[size];
-  const { checked, unchecked } = colorStyles4[color];
+  const { checked, unchecked } = colorStyles3[color];
   const handlePress = () => {
     if (!isDisabled) {
       onChange(value);
@@ -2742,7 +2396,7 @@ function Radio({
     }
   );
 }
-var sizeStyles11 = {
+var sizeStyles9 = {
   left: {
     sm: "w-64",
     md: "w-80",
@@ -2817,7 +2471,7 @@ function Drawer({
             className: cn(
               "absolute bg-surface-elevated shadow-2xl",
               placementStyles[placement],
-              sizeStyles11[placement][size],
+              sizeStyles9[placement][size],
               className
             ),
             accessibilityRole: "dialog",
@@ -2888,12 +2542,12 @@ var colorVarMap = {
   warning: "var(--color-status-warning)",
   info: "var(--color-status-info)"
 };
-var sizeStyles12 = {
+var sizeStyles10 = {
   sm: "h-1",
   md: "h-2",
   lg: "h-3"
 };
-var colorStyles5 = {
+var colorStyles4 = {
   primary: "bg-brand-primary",
   secondary: "bg-brand-secondary",
   success: "bg-status-success",
@@ -2936,7 +2590,7 @@ function Progress({
           "rounded-full overflow-hidden",
           trackWidth ? void 0 : "w-full",
           trackColorStyles[color],
-          sizeStyles12[size]
+          sizeStyles10[size]
         ),
         style: trackWidth ? { width: trackWidth } : void 0,
         accessibilityRole: "progressbar",
@@ -2950,7 +2604,7 @@ function Progress({
           {
             className: cn(
               "h-full rounded-full",
-              !customColor && colorStyles5[color],
+              !customColor && colorStyles4[color],
               isIndeterminate && "animate-pulse w-1/3"
             ),
             style: {
@@ -3066,14 +2720,14 @@ function ProgressSteps({
 }) {
   const { dot, connector } = stepSizeStyles[size];
   return /* @__PURE__ */ jsxs(View, { className: cn("w-full", className), ...props, children: [
-    /* @__PURE__ */ jsx(View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+    /* @__PURE__ */ jsx(View, { className: "flex-row items-center", children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsxs(React23.Fragment, { children: [
       /* @__PURE__ */ jsx(
         View,
         {
           className: cn(
             "rounded-full",
             dot,
-            index <= currentStep ? colorStyles5[color] : "bg-border-strong"
+            index <= currentStep ? colorStyles4[color] : "bg-border-strong"
           )
         }
       ),
@@ -3083,7 +2737,7 @@ function ProgressSteps({
           className: cn(
             "flex-1 mx-1",
             connector,
-            index < currentStep ? colorStyles5[color] : "bg-border-strong"
+            index < currentStep ? colorStyles4[color] : "bg-border-strong"
           )
         }
       )
@@ -3483,12 +3137,12 @@ function Autocomplete({
     )
   ] });
 }
-var sizeStyles13 = {
+var sizeStyles11 = {
   sm: { icon: "w-3.5 h-3.5 text-xs", text: "text-xs" },
   md: { icon: "w-4 h-4 text-sm", text: "text-sm" },
   lg: { icon: "w-5 h-5 text-base", text: "text-base" }
 };
-var colorStyles6 = {
+var colorStyles5 = {
   default: "text-text-tertiary",
   primary: "text-brand-primary",
   secondary: "text-text-secondary",
@@ -3527,7 +3181,7 @@ function HelpTip({
 }) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
   const isOpen = controlledIsOpen ?? internalIsOpen;
-  const { icon: iconSize, text: textSize } = sizeStyles13[size];
+  const { icon: iconSize, text: textSize } = sizeStyles11[size];
   const handlePress = () => {
     if (controlledIsOpen === void 0) {
       setInternalIsOpen((prev) => !prev);
@@ -3556,12 +3210,12 @@ function HelpTip({
         className: cn(
           "items-center justify-center rounded-full",
           "border border-current",
-          colorStyles6[color],
+          colorStyles5[color],
           iconSize,
           "web:hover:opacity-80 web:cursor-help",
           iconClassName
         ),
-        children: /* @__PURE__ */ jsx(Text, { className: cn("font-semibold", iconSize, colorStyles6[color]), children: iconMap[icon] })
+        children: /* @__PURE__ */ jsx(Text, { className: cn("font-semibold", iconSize, colorStyles5[color]), children: iconMap[icon] })
       }
     ),
     isOpen && /* @__PURE__ */ jsxs(
@@ -3631,7 +3285,7 @@ function FormField({
 }) {
   const isInvalid = !!errorMessage;
   const isHorizontal = orientation === "horizontal";
-  const fieldId = React24.useId();
+  const fieldId = React23.useId();
   const helperId = `${fieldId}-helper`;
   const errorId = `${fieldId}-error`;
   return /* @__PURE__ */ jsxs(
@@ -3672,10 +3326,10 @@ function FormField({
           }
         ),
         /* @__PURE__ */ jsxs(View, { className: cn(isHorizontal && "flex-1"), children: [
-          React24.Children.map(children, (child) => {
-            if (React24.isValidElement(child)) {
+          React23.Children.map(children, (child) => {
+            if (React23.isValidElement(child)) {
               const childProps = child.props;
-              return React24.cloneElement(child, {
+              return React23.cloneElement(child, {
                 accessibilityHint: errorMessage || helperText || childProps.accessibilityHint,
                 accessibilityState: {
                   ...childProps.accessibilityState,
@@ -3946,7 +3600,7 @@ function ListItemDivider({ inset = true, className, ...props }) {
     }
   );
 }
-var variantColorStyles2 = {
+var variantColorStyles = {
   subtle: {
     default: "bg-surface-raised border-border-subtle text-text-secondary",
     primary: "bg-brand-primary/10 border-brand-primary/25 text-brand-primary",
@@ -3966,7 +3620,7 @@ var variantColorStyles2 = {
     info: "border-status-info text-status-info"
   }
 };
-var sizeStyles14 = {
+var sizeStyles12 = {
   xs: { container: "px-1 py-px", text: "text-[9px]" },
   sm: { container: "px-2 py-0.5", text: "text-[10px]" },
   md: { container: "px-2 py-1", text: "text-[10px]" }
@@ -3985,13 +3639,13 @@ function Pill({
   const containerClasses = cn(
     "flex-row items-center gap-1 border self-start shrink-0",
     rounded ? "rounded-full" : "rounded",
-    variantColorStyles2[variant][color],
-    sizeStyles14[size].container,
+    variantColorStyles[variant][color],
+    sizeStyles12[size].container,
     className
   );
   const textClasses = cn(
     "font-heading font-semibold",
-    sizeStyles14[size].text,
+    sizeStyles12[size].text,
     "text-inherit"
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4003,7 +3657,7 @@ function Pill({
   }
   return /* @__PURE__ */ jsx(View, { className: containerClasses, ...props, children: content });
 }
-var variantStyles4 = {
+var variantStyles3 = {
   h1: "font-heading text-5xl font-bold leading-tight",
   h2: "font-heading text-4xl font-bold leading-tight",
   h3: "font-heading text-3xl font-bold leading-tight",
@@ -4018,7 +3672,7 @@ var variantStyles4 = {
   overline: "font-body text-xs font-semibold uppercase tracking-widest leading-relaxed",
   button: "font-sans text-sm font-semibold leading-relaxed"
 };
-var colorStyles7 = {
+var colorStyles6 = {
   primary: "text-text-primary",
   secondary: "text-text-secondary",
   tertiary: "text-text-tertiary",
@@ -4074,8 +3728,8 @@ function Typography({
       accessibilityRole: isHeading ? "header" : "text",
       numberOfLines: numLines,
       className: cn(
-        variantStyles4[variant],
-        color !== "inherit" && colorStyles7[color],
+        variantStyles3[variant],
+        color !== "inherit" && colorStyles6[color],
         align && alignStyles2[align],
         shouldTruncate && "truncate",
         marginBottomStyles[mb],
@@ -4249,7 +3903,7 @@ function Table({
         selectable,
         allRowIds: rowIds
       },
-      children: /* @__PURE__ */ jsx(View, { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx(View, { className: "w-full min-w-full", children: isLoading ? /* @__PURE__ */ jsx(TableLoadingSkeleton, { rowCount: loadingRowCount }) : children }) }) })
+      children: /* @__PURE__ */ jsx(View, { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx(View, { role: "table", className: "w-full min-w-full", children: isLoading ? /* @__PURE__ */ jsx(TableLoadingSkeleton, { rowCount: loadingRowCount }) : children }) }) })
     }
   );
 }
@@ -4257,14 +3911,14 @@ function TableHeader({ children, className }) {
   return /* @__PURE__ */ jsx(
     View,
     {
-      accessibilityRole: "none",
+      role: "rowgroup",
       className: cn("bg-background-subtle rounded-t-lg", className),
       children
     }
   );
 }
 function TableBody({ children, className }) {
-  return /* @__PURE__ */ jsx(View, { accessibilityRole: "none", className, children });
+  return /* @__PURE__ */ jsx(View, { role: "rowgroup", className, children });
 }
 function TableRow({
   isSelected = false,
@@ -4276,7 +3930,7 @@ function TableRow({
   return /* @__PURE__ */ jsx(
     View,
     {
-      accessibilityRole: "none",
+      role: "row",
       className: cn(
         "flex-row border-b border-divider",
         isHoverable && "web:hover:bg-interactive-hover",
@@ -4300,6 +3954,7 @@ function TableHeaderCell({
   const { sortColumn, sortDirection, onSort } = useContext(TableContext);
   const isSorted = sortKey && sortColumn === sortKey;
   const isSortable = !!sortKey && !!onSort;
+  const ariaSort = isSorted ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : "none";
   const handlePress = (e) => {
     if (isSortable && sortKey) {
       onSort(sortKey);
@@ -4326,26 +3981,34 @@ function TableHeaderCell({
   ] });
   if (isSortable) {
     return /* @__PURE__ */ jsx(
-      Pressable,
+      View,
       {
-        accessibilityRole: "button",
-        accessibilityLabel: `Sort by ${children}`,
-        onPress: handlePress,
+        role: "columnheader",
+        "aria-sort": ariaSort,
         style: width ? { width } : { flex: 1 },
-        className: cn(
-          "flex-row items-center px-4 py-3",
-          alignStyles3[align],
-          "web:hover:bg-interactive-hover active:bg-interactive-active",
-          className
-        ),
-        ...props,
-        children: content
+        children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `Sort by ${children}`,
+            onPress: handlePress,
+            className: cn(
+              "flex-row items-center px-4 py-3",
+              alignStyles3[align],
+              "web:hover:bg-interactive-hover active:bg-interactive-active",
+              className
+            ),
+            ...props,
+            children: content
+          }
+        )
       }
     );
   }
   return /* @__PURE__ */ jsx(
     View,
     {
+      role: "columnheader",
       style: width ? { width } : { flex: 1 },
       className: cn(
         "flex-row items-center px-4 py-3",
@@ -4371,6 +4034,7 @@ function TableCell({
   return /* @__PURE__ */ jsx(
     View,
     {
+      role: "cell",
       style: width ? { width } : { flex: 1 },
       className: cn(
         "justify-center px-4 py-3.5",
@@ -4579,11 +4243,11 @@ function Stepper({
         className
       ),
       ...props,
-      children: React24.Children.map(children, (child, index) => {
-        if (React24.isValidElement(child)) {
+      children: React23.Children.map(children, (child, index) => {
+        if (React23.isValidElement(child)) {
           return /* @__PURE__ */ jsxs(Fragment, { children: [
-            React24.cloneElement(child, { index }),
-            index < React24.Children.count(children) - 1 && /* @__PURE__ */ jsx(StepConnector, { index })
+            React23.cloneElement(child, { index }),
+            index < React23.Children.count(children) - 1 && /* @__PURE__ */ jsx(StepConnector, { index })
           ] });
         }
         return child;
@@ -4625,9 +4289,9 @@ function Step({ index = 0, status, className, children }) {
         orientation === "horizontal" ? "items-center" : "flex-row items-start",
         className
       ),
-      children: React24.Children.map(children, (child) => {
-        if (React24.isValidElement(child)) {
-          return React24.cloneElement(child, {
+      children: React23.Children.map(children, (child) => {
+        if (React23.isValidElement(child)) {
+          return React23.cloneElement(child, {
             status: derivedStatus,
             index
           });
@@ -4689,7 +4353,7 @@ function StepContent({ status = "upcoming", className, children }) {
   if (status !== "active") return null;
   return /* @__PURE__ */ jsx(View, { className: cn("ml-11 mt-2 pb-4", className), children });
 }
-var colorStyles8 = {
+var colorStyles7 = {
   primary: "text-text-primary",
   secondary: "text-text-secondary",
   tertiary: "text-text-tertiary",
@@ -4820,10 +4484,10 @@ function DateTime({
   ...props
 }) {
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles8[color], className), ...props, children: fallback });
+    return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles7[color], className), ...props, children: fallback });
   }
   const formattedDate = formatDate(value, format, isUTC);
-  return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles8[color], className), ...props, children: formattedDate });
+  return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles7[color], className), ...props, children: formattedDate });
 }
 function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-") {
   if (value === null || value === void 0) {
@@ -4870,8 +4534,8 @@ function MetricGroup({
   children,
   ...props
 }) {
-  const items = React24.Children.toArray(children);
-  return /* @__PURE__ */ jsx(View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React24.Fragment, { children: [
+  const items = React23.Children.toArray(children);
+  return /* @__PURE__ */ jsx(View, { className: cn("flex-row items-center", className), ...props, children: items.map((child, i) => /* @__PURE__ */ jsxs(React23.Fragment, { children: [
     /* @__PURE__ */ jsx(View, { className: "flex-1 items-center", children: child }),
     i < items.length - 1 && /* @__PURE__ */ jsx(
       View,
@@ -5127,161 +4791,6 @@ function PrBadge({
   }
   return badge;
 }
-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 iconColors2 = {
-  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(
-    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(
-        Text,
-        {
-          style: {
-            fontSize: 11,
-            lineHeight: 11,
-            fontWeight: "900",
-            color: iconColors2[variant]
-          },
-          accessibilityElementsHidden: true,
-          children: iconChars[icon]
-        }
-      )
-    }
-  );
-  if (label) {
-    return /* @__PURE__ */ jsxs(
-      View,
-      {
-        className,
-        style: { flexDirection: "row", alignItems: "center", gap: 6 },
-        accessibilityLabel: `${variant} status: ${label}`,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, children: dot }),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              style: { fontSize: 12, lineHeight: 16, color: "#9CA3AF" },
-              accessibilityElementsHidden: true,
-              children: label
-            }
-          )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(View, { className, ...props, children: dot });
-}
-
-// src/theme/workout-tokens.ts
-var WORKOUT_TOKENS = {
-  // BodyMap volume heatmap scale (drive dynamic SVG fills, so inline values).
-  // Maps weekly-volume status against MEV/MAV/MRV landmarks to a fill color.
-  heatmap: {
-    none: "#E0E0E0",
-    // gray — no training data
-    under: "#4A90D9",
-    // cool blue — below MEV
-    maintenance: "#F5C842",
-    // warm yellow — MEV to MAV
-    productive: "#4CAF50",
-    // green — MAV to MRV
-    approaching: "#FFA502",
-    // orange — near MRV
-    over: "#FF6B35"
-    // red-orange — over MRV
-  },
-  // Border colors (use inline to avoid 'border' class pitfall)
-  border: {
-    default: "#1F1F1F",
-    strong: "#2C2C2C"},
-  // Surface colors for inline use
-  surface: {
-    raised: "#1C1C1C",
-    elevated: "#191919"
-  }};
-
-// src/components/custom/Workout/PlaceholderStrip.tsx
 function SingleStrip({
   width,
   className,
@@ -5297,7 +4806,7 @@ function SingleStrip({
           backgroundColor: "transparent",
           borderWidth: 1,
           borderStyle: "dashed",
-          borderColor: WORKOUT_TOKENS.border.strong,
+          borderColor: "var(--color-border-strong)",
           borderRadius: 1,
           opacity: 0.5
         },
@@ -5337,7 +4846,7 @@ function SegmentedStrip({
             backgroundColor: "transparent",
             borderWidth: 1,
             borderStyle: "dashed",
-            borderColor: WORKOUT_TOKENS.border.strong,
+            borderColor: "var(--color-border-strong)",
             borderRadius: 1,
             minWidth: 4
           },
@@ -5359,9 +4868,49 @@ function PlaceholderStrip({
   }
   return /* @__PURE__ */ jsx(SingleStrip, { ...props });
 }
-var INTER = "Inter, sans-serif";
-var TEXT_TERTIARY = "#6B7280";
-var phaseColors = {
+
+// src/utils/workout-format.ts
+function roundRpe(rpe) {
+  return Math.round(rpe * 2) / 2;
+}
+function rpeColor(rpe) {
+  if (rpe >= 9.5) return WORKOUT_TOKENS.scale.red;
+  if (rpe >= 8.5) return WORKOUT_TOKENS.scale.orange;
+  if (rpe >= 7) return WORKOUT_TOKENS.scale.yellow;
+  return WORKOUT_TOKENS.scale.green;
+}
+function roundWeight(weight) {
+  return Math.round(weight);
+}
+function formatVelocity(velocity) {
+  return velocity.toFixed(2);
+}
+function roundTempo(tempo) {
+  return tempo.map((v) => Math.round(v * 10) / 10);
+}
+function formatSignedPct(ratio) {
+  const pct = Math.round(ratio * 100);
+  return `${pct > 0 ? "+" : ""}${pct}%`;
+}
+function formatPrescription(p) {
+  if (p == null) return null;
+  let reps = null;
+  if (p.repsLow != null && p.repsHigh != null) {
+    reps = p.repsLow === p.repsHigh ? `${p.repsLow}` : `${p.repsLow}\u2013${p.repsHigh}`;
+  } else if (p.repsLow != null) {
+    reps = `${p.repsLow}`;
+  }
+  const weight = p.weightLbs != null ? `${p.weightLbs} lb` : null;
+  const head = [reps, weight].filter((s) => s != null).join(" @ ");
+  const rpe = p.rpe != null ? `RPE ${p.rpe}` : null;
+  const full = [head.length > 0 ? head : null, rpe].filter((s) => s != null).join(" \xB7 ");
+  return full.length > 0 ? full : null;
+}
+
+// src/components/custom/Workout/TempoDisplay.tsx
+var INTER = "Inter, sans-serif";
+var TEXT_TERTIARY = "#6B7280";
+var phaseColors = {
   eccentric: "#FFB020",
   // status-warning (amber)
   pauseBottom: TEXT_TERTIARY,
@@ -5414,7 +4963,7 @@ function TempoDisplay({
   ...props
 }) {
   const [showTooltip, setShowTooltip] = useState(false);
-  const [eccentric, pauseBottom, concentric, pauseTop] = tempo;
+  const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo);
   const isSm = size === "sm";
   const fontSize = isSm ? 9 : 11;
   const monoColor = TEXT_TERTIARY;
@@ -5922,12 +5471,7 @@ function WorkoutPill({
   }
   return pill;
 }
-var VEL_COLORS = {
-  green: "#2ed573",
-  yellow: "#ffd43b",
-  orange: "#ffa502",
-  red: "#ff4757"
-};
+var VEL_COLORS = WORKOUT_TOKENS.scale;
 function getVelocityZoneColor(velocity) {
   if (velocity >= 1) return "vel-green";
   if (velocity >= 0.75) return "vel-yellow";
@@ -6065,7 +5609,7 @@ function VelocityStrip({
           paddingBottom: expanded ? 24 : 0,
           paddingHorizontal: expanded ? 6 : 0,
           paddingVertical: expanded ? void 0 : 8,
-          backgroundColor: expanded ? "#1C1C1C" : "transparent",
+          backgroundColor: expanded ? "var(--color-surface-raised)" : "transparent",
           overflow: expanded ? "visible" : "hidden"
         }
       ],
@@ -6080,7 +5624,7 @@ function VelocityStrip({
             style: { flexDirection: "row", flex: 1, gap: 2, alignItems: "flex-end" },
             children: velocities.map((v, i) => {
               const zone = getVelocityZoneColor(v);
-              const barHeightPct = Math.round(v / (maxVelocity * 1.15) * 100);
+              const barHeightPct = maxVelocity > 0 ? Math.round(v / (maxVelocity * 1.15) * 100) : 0;
               const bar = /* @__PURE__ */ jsxs(
                 View,
                 {
@@ -6089,9 +5633,9 @@ function VelocityStrip({
                     expanded && /* @__PURE__ */ jsx(Animated.View, { style: { opacity: labelOpacity, alignItems: "center", position: "absolute", top: -13, left: 0, right: 0 }, accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(
                       Text,
                       {
-                        style: { fontSize: 8, fontWeight: "600", color: "#9CA3AF" },
+                        style: { fontSize: 8, fontWeight: "600", color: "var(--color-text-secondary)" },
                         testID: `velocity-label-${i}`,
-                        children: v.toFixed(2)
+                        children: formatVelocity(v)
                       }
                     ) }),
                     /* @__PURE__ */ jsx(
@@ -6107,7 +5651,7 @@ function VelocityStrip({
                         },
                         testID: `velocity-bar-${i}`,
                         accessibilityRole: "image",
-                        accessibilityLabel: `Rep ${i + 1}: ${v.toFixed(2)} meters per second`
+                        accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
                       }
                     )
                   ]
@@ -6121,7 +5665,7 @@ function VelocityStrip({
                     style: { flex: 1, height: "100%" },
                     onPress: () => onRepPress(i, v),
                     accessibilityRole: "button",
-                    accessibilityLabel: `Rep ${i + 1}: ${v.toFixed(2)} meters per second, tap for details`,
+                    accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`,
                     testID: `velocity-bar-pressable-${i}`,
                     children: bar
                   },
@@ -6151,7 +5695,7 @@ function VelocityStrip({
                 {
                   style: {
                     fontSize: 10,
-                    color: "#9CA3AF",
+                    color: "var(--color-text-secondary)",
                     fontFamily: "Inter, sans-serif"
                   },
                   children: [
@@ -6159,7 +5703,7 @@ function VelocityStrip({
                     " ",
                     "\xB7",
                     " ",
-                    meanVelocity.toFixed(2),
+                    formatVelocity(meanVelocity),
                     " m/s"
                   ]
                 }
@@ -6169,7 +5713,7 @@ function VelocityStrip({
                 {
                   style: {
                     fontSize: 10,
-                    color: "#9CA3AF",
+                    color: "var(--color-text-secondary)",
                     fontFamily: "Inter, sans-serif",
                     ...getLossStyle(loss)
                   },
@@ -6279,166 +5823,9 @@ function MuscleGroupChip({
   }
   return content;
 }
-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(
-      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(
-    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(
-            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(
-                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(
-            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(
-            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}`
-          );
-        })
-      ]
-    }
-  );
-}
-function getRPEColor(rpe) {
-  if (rpe >= 9.5) return "#ff4757";
-  if (rpe >= 8.5) return "#ffa502";
-  if (rpe >= 7) return "#ffd43b";
-  return "#2ed573";
-}
 function formatAccessibilityLabel(setNumber, reps, weight, unit) {
   const repsText = reps != null ? `${reps} reps` : "no reps";
-  const weightText = weight != null ? `at ${weight} ${unit}` : "";
+  const weightText = weight != null ? `at ${roundWeight(weight)} ${unit}` : "";
   return `Set ${setNumber}: ${repsText}${weightText ? ` ${weightText}` : ""}`;
 }
 function SetRow({
@@ -6516,7 +5903,7 @@ function SetRow({
                   fontSize: 13,
                   fontWeight: "600",
                   fontFamily: "Inter, sans-serif",
-                  color: "#9CA3AF"
+                  color: "var(--color-text-secondary)"
                 },
                 children: setNumber
               }
@@ -6534,9 +5921,9 @@ function SetRow({
                 style: {
                   fontSize: 12,
                   fontFamily: "Inter, sans-serif",
-                  color: "#9CA3AF"
+                  color: "var(--color-text-secondary)"
                 },
-                children: previous ? `${previous.reps} x ${previous.weight}` : "\u2014"
+                children: previous ? `${previous.reps} x ${roundWeight(previous.weight)}` : "\u2014"
               }
             )
           }
@@ -6553,7 +5940,7 @@ function SetRow({
                   fontSize: 13,
                   fontStyle: "italic",
                   fontFamily: "Inter, sans-serif",
-                  color: "#6B7280"
+                  color: "var(--color-text-tertiary)"
                 },
                 testID: "set-row-target-reps",
                 children: targets.reps
@@ -6565,7 +5952,7 @@ function SetRow({
                   fontSize: 14,
                   fontWeight: "600",
                   fontFamily: "Inter, sans-serif",
-                  color: reps != null ? "#F3F4F6" : "#6B7280"
+                  color: reps != null ? "var(--color-text-primary)" : "var(--color-text-tertiary)"
                 },
                 children: reps != null ? reps : "\u2014"
               }
@@ -6584,10 +5971,10 @@ function SetRow({
                   fontSize: 13,
                   fontStyle: "italic",
                   fontFamily: "Inter, sans-serif",
-                  color: "#6B7280"
+                  color: "var(--color-text-tertiary)"
                 },
                 testID: "set-row-target-weight",
-                children: targets.weight
+                children: roundWeight(targets.weight)
               }
             ) : /* @__PURE__ */ jsx(
               Text,
@@ -6596,9 +5983,9 @@ function SetRow({
                   fontSize: 14,
                   fontWeight: "600",
                   fontFamily: "Inter, sans-serif",
-                  color: weight != null ? "#F3F4F6" : "#6B7280"
+                  color: weight != null ? "var(--color-text-primary)" : "var(--color-text-tertiary)"
                 },
-                children: weight != null ? weight : "\u2014"
+                children: weight != null ? roundWeight(weight) : "\u2014"
               }
             )
           }
@@ -6615,9 +6002,9 @@ function SetRow({
                   fontSize: 13,
                   fontWeight: "600",
                   fontFamily: "Inter, sans-serif",
-                  color: rpe != null ? getRPEColor(rpe) : "#6B7280"
+                  color: rpe != null ? rpeColor(rpe) : "var(--color-text-tertiary)"
                 },
-                children: rpe != null ? rpe : "\u2014"
+                children: rpe != null ? roundRpe(rpe) : "\u2014"
               }
             )
           }
@@ -6660,16 +6047,16 @@ function SetRow({
     }
   );
 }
-var BRAND_PRIMARY2 = "#FF7900";
-var TEXT_PRIMARY = "#F3F4F6";
-var TEXT_TERTIARY2 = "#6B7280";
+var BRAND_PRIMARY = "#FF7900";
+var TEXT_PRIMARY = "var(--color-text-primary)";
+var TEXT_TERTIARY2 = "var(--color-text-tertiary)";
 var inputStyle = {
   fontSize: 14,
   fontWeight: "600",
   fontFamily: "Inter, sans-serif",
-  backgroundColor: WORKOUT_TOKENS.surface.raised,
+  backgroundColor: "var(--color-surface-raised)",
   borderWidth: 1,
-  borderColor: WORKOUT_TOKENS.border.strong,
+  borderColor: "var(--color-border-strong)",
   borderRadius: 6,
   textAlign: "center",
   color: TEXT_PRIMARY,
@@ -6696,9 +6083,9 @@ function InputBar({
     {
       style: {
         width: "100%",
-        backgroundColor: WORKOUT_TOKENS.surface.elevated,
+        backgroundColor: "var(--color-surface-elevated)",
         borderTopWidth: 1,
-        borderTopColor: WORKOUT_TOKENS.border.default,
+        borderTopColor: "var(--color-border-default)",
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -6791,7 +6178,7 @@ function InputBar({
             onPress: onRecord,
             disabled: !canRecord,
             style: ({ pressed }) => ({
-              backgroundColor: BRAND_PRIMARY2,
+              backgroundColor: BRAND_PRIMARY,
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 16,
@@ -6818,7 +6205,7 @@ function InputBar({
     }
   );
 }
-var BRAND_PRIMARY3 = "#FF7900";
+var BRAND_PRIMARY2 = "#FF7900";
 function RestTimer({
   totalSeconds,
   elapsedMs,
@@ -6833,15 +6220,16 @@ function RestTimer({
   const minutes = Math.floor(remainingSec / 60);
   const seconds = remainingSec % 60;
   const timeDisplay = `${minutes}:${String(seconds).padStart(2, "0")}`;
-  const progressPct = Math.min(100, elapsedMs / (totalSeconds * 1e3) * 100);
+  const totalMs = totalSeconds * 1e3;
+  const progressPct = totalMs > 0 ? Math.min(100, elapsedMs / totalMs * 100) : 100;
   return /* @__PURE__ */ jsxs(
     View,
     {
       style: {
         width: "100%",
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
+        backgroundColor: "var(--color-surface-raised)",
         borderTopWidth: 1,
-        borderTopColor: WORKOUT_TOKENS.border.default,
+        borderTopColor: "var(--color-border-default)",
         paddingVertical: 12,
         paddingHorizontal: 16
       },
@@ -6869,7 +6257,7 @@ function RestTimer({
                       fontWeight: "600",
                       textTransform: "uppercase",
                       letterSpacing: 1,
-                      color: "#9CA3AF"
+                      color: "var(--color-text-secondary)"
                     },
                     testID: "rest-timer-label",
                     children: "REST"
@@ -6881,7 +6269,7 @@ function RestTimer({
                     style: {
                       fontSize: 11,
                       fontFamily: "Inter, sans-serif",
-                      color: "#6B7280",
+                      color: "var(--color-text-tertiary)",
                       marginTop: 2
                     },
                     testID: "rest-timer-next-set",
@@ -6896,7 +6284,7 @@ function RestTimer({
                     fontSize: 28,
                     fontFamily: '"Space Grotesk", sans-serif',
                     fontWeight: "700",
-                    color: "#F3F4F6",
+                    color: "var(--color-text-primary)",
                     fontVariant: ["tabular-nums"],
                     letterSpacing: -0.5
                   },
@@ -6912,7 +6300,7 @@ function RestTimer({
           {
             style: {
               height: 3,
-              backgroundColor: WORKOUT_TOKENS.border.default,
+              backgroundColor: "var(--color-border-default)",
               borderRadius: 2,
               marginBottom: 12
             },
@@ -6922,7 +6310,7 @@ function RestTimer({
               {
                 style: {
                   height: "100%",
-                  backgroundColor: BRAND_PRIMARY3,
+                  backgroundColor: BRAND_PRIMARY2,
                   borderRadius: 2,
                   width: `${progressPct}%`
                 },
@@ -6952,7 +6340,7 @@ function RestTimer({
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "600",
-                    color: "#9CA3AF"
+                    color: "var(--color-text-secondary)"
                   },
                   children: "+30s"
                 }
@@ -6979,7 +6367,7 @@ function RestTimer({
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "600",
-                    color: BRAND_PRIMARY3
+                    color: BRAND_PRIMARY2
                   },
                   children: "Skip"
                 }
@@ -6992,10 +6380,21 @@ function RestTimer({
   );
 }
 var COLORS = {
-  textPrimary: "#F3F4F6",
-  textSecondary: "#9CA3AF",
-  textTertiary: "#6B7280"};
-var COLUMN_HEADERS = ["SET", "PREV", "REPS", "LBS", "RPE"];
+  // Theme-aware tokens: text foregrounds and this card's own surfaces/borders
+  // must flip together so text stays readable in both light and dark. The
+  // expanded/pressed surfaces are self-owned here (not from a themed Card), so
+  // hardcoding dark values would leave dark-on-dark once the text flips.
+  // react-native-web passes the CSS var through to the inline style.
+  textPrimary: "var(--color-text-primary)",
+  textSecondary: "var(--color-text-secondary)",
+  textTertiary: "var(--color-text-tertiary)",
+  surfaceRaised: "var(--color-surface-raised)",
+  surfaceElevated: "var(--color-surface-elevated)",
+  borderDefault: "var(--color-border-default)"
+};
+function buildColumnHeaders(unit) {
+  return ["SET", "PREV", "REPS", unit.toUpperCase(), "RPE"];
+}
 function getSupersetBorderRadius(position) {
   switch (position) {
     case "first":
@@ -7036,7 +6435,7 @@ function getSupersetMargin(position) {
 }
 function formatSummary(summary) {
   if (!summary) return "";
-  return `${summary.sets}\xD7${summary.reps} @ ${summary.weight} ${summary.unit}`;
+  return `${summary.sets}\xD7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`;
 }
 function formatAccessibilityLabel2(name, summary, prescription) {
   if (summary) return `${name}, ${formatSummary(summary)}`;
@@ -7074,7 +6473,7 @@ function CollapsedCard({
             padding: 12,
             paddingHorizontal: 14,
             cursor: "pointer",
-            backgroundColor: pressed ? WORKOUT_TOKENS.surface.raised : "transparent",
+            backgroundColor: pressed ? COLORS.surfaceRaised : "transparent",
             ...borderRadius,
             ...supersetMargin
           },
@@ -7115,7 +6514,7 @@ function CollapsedCard({
                   e1rm && /* @__PURE__ */ jsx(
                     WeightBadge,
                     {
-                      value: e1rm.value,
+                      value: roundWeight(e1rm.value),
                       unit: e1rm.unit,
                       size: "sm",
                       showIcon: false,
@@ -7170,13 +6569,15 @@ function ExpandedCard({
 }) {
   const borderRadius = getSupersetBorderRadius(supersetPosition);
   const supersetMargin = getSupersetMargin(supersetPosition);
+  const unit = summary?.unit ?? sets?.[0]?.unit ?? "lbs";
+  const columnHeaders = buildColumnHeaders(unit);
   return /* @__PURE__ */ jsxs(
     View,
     {
       style: {
-        backgroundColor: WORKOUT_TOKENS.surface.elevated,
+        backgroundColor: COLORS.surfaceElevated,
         borderWidth: 1,
-        borderColor: WORKOUT_TOKENS.border.default,
+        borderColor: COLORS.borderDefault,
         ...borderRadius,
         ...supersetMargin
       },
@@ -7199,7 +6600,7 @@ function ExpandedCard({
                   paddingHorizontal: 14,
                   paddingBottom: 10,
                   borderBottomWidth: 1,
-                  borderBottomColor: WORKOUT_TOKENS.border.default
+                  borderBottomColor: COLORS.borderDefault
                 },
                 children: [
                   /* @__PURE__ */ jsx(
@@ -7232,7 +6633,7 @@ function ExpandedCard({
                   e1rm && /* @__PURE__ */ jsx(
                     WeightBadge,
                     {
-                      value: e1rm.value,
+                      value: roundWeight(e1rm.value),
                       unit: e1rm.unit,
                       size: "sm",
                       showIcon: false,
@@ -7256,7 +6657,7 @@ function ExpandedCard({
               paddingBottom: 4
             },
             testID: "exercise-card-column-headers",
-            children: COLUMN_HEADERS.map((header, i) => {
+            children: columnHeaders.map((header, i) => {
               const widths = [36, void 0, 44, 56, 36];
               const width = widths[i];
               const isFlex = width === void 0;
@@ -7422,7 +6823,7 @@ function SupersetWrapper({
     }
   );
 }
-var BRAND_PRIMARY4 = "#FF7900";
+var BRAND_PRIMARY3 = "#FF7900";
 var segmentBgColors = {
   completed: "rgba(20,184,166,0.3)",
   current: "rgba(255,121,0,0.5)",
@@ -7450,10 +6851,11 @@ function MesoSegment({ meso, isActive, onPress }) {
     }).start();
   };
   const progress = meso.status === "current" ? clampProgress(meso.currentWeek, meso.weekCount) : 0;
+  const segmentFlex = Math.max(1, meso.weekCount);
   return /* @__PURE__ */ jsx(
     Pressable,
     {
-      style: { flex: meso.weekCount },
+      style: { flex: segmentFlex },
       onPress: () => onPress(meso.id),
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
@@ -7473,7 +6875,7 @@ function MesoSegment({ meso, isActive, onPress }) {
             },
             isActive ? {
               borderWidth: 2,
-              borderColor: BRAND_PRIMARY4,
+              borderColor: BRAND_PRIMARY3,
               transform: [{ scale: 1.02 }, { scale: pressScale }]
             } : void 0
           ],
@@ -7487,7 +6889,7 @@ function MesoSegment({ meso, isActive, onPress }) {
                 top: 0,
                 bottom: 0,
                 width: `${progress * 100}%`,
-                backgroundColor: BRAND_PRIMARY4
+                backgroundColor: BRAND_PRIMARY3
               },
               testID: `meso-segment-fill-${meso.id}`
             }
@@ -7528,7 +6930,7 @@ function MesoProgressBar({
     }
   );
 }
-var BRAND_PRIMARY5 = "#FF7900";
+var BRAND_PRIMARY4 = "#FF7900";
 function WeekRow({
   weekNumber,
   totalWeeks,
@@ -7553,7 +6955,7 @@ function WeekRow({
   if (isCurrent) {
     rowStyle.backgroundColor = "rgba(255,121,0,0.04)";
     rowStyle.borderLeftWidth = 2;
-    rowStyle.borderLeftColor = BRAND_PRIMARY5;
+    rowStyle.borderLeftColor = BRAND_PRIMARY4;
   }
   return /* @__PURE__ */ jsxs(
     View,
@@ -7577,7 +6979,7 @@ function WeekRow({
                     width: 6,
                     height: 6,
                     borderRadius: 3,
-                    backgroundColor: BRAND_PRIMARY5
+                    backgroundColor: BRAND_PRIMARY4
                   },
                   accessibilityElementsHidden: true,
                   testID: "week-row-current-dot"
@@ -7590,7 +6992,7 @@ function WeekRow({
                     fontSize: 13,
                     fontWeight: "700",
                     fontFamily: "Inter, sans-serif",
-                    color: isCurrent ? BRAND_PRIMARY5 : "#F3F4F6"
+                    color: isCurrent ? BRAND_PRIMARY4 : "var(--color-text-primary)"
                   },
                   accessibilityElementsHidden: true,
                   children: `W${weekNumber}`
@@ -7630,9 +7032,11 @@ function WeekRow({
   );
 }
 var COLORS2 = {
-  textPrimary: "#F3F4F6",
-  textSecondary: "#9CA3AF",
-  textTertiary: "#6B7280",
+  // Theme-aware foregrounds: resolve to a readable color in both light and dark
+  // (react-native-web passes the CSS var through to the inline style).
+  textPrimary: "var(--color-text-primary)",
+  textSecondary: "var(--color-text-secondary)",
+  textTertiary: "var(--color-text-tertiary)",
   statusSuccess: "#14B8A6",
   brandPrimary: "#FF7900",
   borderDefault: "#1F1F1F",
@@ -7776,13 +7180,13 @@ function WorkoutCard({
     }
   );
 }
-var BRAND_PRIMARY6 = "#FF7900";
+var BRAND_PRIMARY5 = "#FF7900";
 var BRAND_PRIMARY_DARK = "#C45E00";
 var BRAND_PRIMARY_LIGHT = "#FFB066";
 var BORDER_DEFAULT = "#1F1F1F";
-var TEXT_PRIMARY2 = "#F3F4F6";
-var TEXT_SECONDARY = "#9CA3AF";
-var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY6, BRAND_PRIMARY_LIGHT];
+var TEXT_PRIMARY2 = "var(--color-text-primary)";
+var TEXT_SECONDARY = "var(--color-text-secondary)";
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY5, BRAND_PRIMARY_LIGHT];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
   const opacity = 0.12 + clamped / 100 * 0.78;
@@ -7817,7 +7221,7 @@ function MesoCard({
   }, [highlighted, highlight]);
   const borderColor = highlight.interpolate({
     inputRange: [0, 1],
-    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY6]
+    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY5]
   });
   const header = /* @__PURE__ */ jsxs(View, { style: { paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }, testID: "meso-card-body", children: [
     /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 8 }, testID: "meso-card-header", children: [
@@ -7877,7 +7281,7 @@ function MesoCard({
     {
       variant: "outline",
       elevation: 2,
-      borderColor: highlighted ? BRAND_PRIMARY6 : BORDER_DEFAULT,
+      borderColor: highlighted ? BRAND_PRIMARY5 : BORDER_DEFAULT,
       className,
       style: [
         { borderColor },
@@ -7934,14 +7338,14 @@ function MesoCard({
     }
   ) });
 }
-var BRAND_PRIMARY7 = "#FF7900";
+var BRAND_PRIMARY6 = "#FF7900";
 var RECENT_BORDER = "rgba(255,176,32,0.3)";
 var RECENT_GLOW = "0 0 12px rgba(255,176,32,0.06)";
-var SURFACE_RAISED = "#1C1C1C";
-var BORDER_DEFAULT2 = "#1F1F1F";
-var TEXT_PRIMARY3 = "#F3F4F6";
-var TEXT_SECONDARY2 = "#9CA3AF";
-var TEXT_TERTIARY3 = "#6B7280";
+var SURFACE_RAISED = "var(--color-surface-raised)";
+var BORDER_DEFAULT2 = "var(--color-border-default)";
+var TEXT_PRIMARY3 = "var(--color-text-primary)";
+var TEXT_SECONDARY2 = "var(--color-text-secondary)";
+var TEXT_TERTIARY3 = "var(--color-text-tertiary)";
 var TYPE_LABELS = {
   e1rm: "e1RM",
   weight: "Weight",
@@ -7981,7 +7385,7 @@ function PrRecordRow({ record, index }) {
       },
       testID: `pr-history-modal-record-${index}`,
       children: [
-        /* @__PURE__ */ jsx(Star, { size: 16, color: BRAND_PRIMARY7, fill: BRAND_PRIMARY7, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx(Star, { size: 16, color: BRAND_PRIMARY6, fill: BRAND_PRIMARY6, strokeWidth: 2 }),
         /* @__PURE__ */ jsx(
           Text,
           {
@@ -8125,13 +7529,13 @@ function PrHistoryModal({
     }
   );
 }
-var BRAND_PRIMARY8 = "#FF7900";
+var BRAND_PRIMARY7 = "#FF7900";
 var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
 var STATUS_SUCCESS = "#14B8A6";
 var STATUS_WARNING = "#FFB020";
 var STATUS_ERROR = "#D14343";
-var TEXT_PRIMARY4 = "#F3F4F6";
-var TEXT_SECONDARY3 = "#9CA3AF";
+var TEXT_PRIMARY4 = "var(--color-text-primary)";
+var TEXT_SECONDARY3 = "var(--color-text-secondary)";
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -8193,8 +7597,8 @@ function EmojiSlider({ factor }) {
                 paddingVertical: 8,
                 borderRadius: 8,
                 borderWidth: 1,
-                borderColor: selected ? BRAND_PRIMARY8 : WORKOUT_TOKENS.border.default,
-                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : WORKOUT_TOKENS.surface.raised,
+                borderColor: selected ? BRAND_PRIMARY7 : "var(--color-border-default)",
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : "var(--color-surface-raised)",
                 opacity: selected ? 1 : pressed ? 0.8 : 0.55,
                 transform: [{ scale: selected ? 1.06 : 1 }]
               }),
@@ -8221,7 +7625,7 @@ function ScoreGauge({ score }) {
         borderRadius: 30,
         borderWidth: 4,
         borderColor: color,
-        backgroundColor: WORKOUT_TOKENS.surface.raised,
+        backgroundColor: "var(--color-surface-raised)",
         alignItems: "center",
         justifyContent: "center"
       },
@@ -8246,8 +7650,8 @@ function WarmUpCard({ validation }) {
         padding: 12,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: WORKOUT_TOKENS.border.default,
-        backgroundColor: WORKOUT_TOKENS.surface.raised
+        borderColor: "var(--color-border-default)",
+        backgroundColor: "var(--color-surface-raised)"
       },
       testID: "readiness-check-warmup",
       children: [
@@ -8307,7 +7711,7 @@ function ReadinessCheck({
           marginTop: 16,
           width: "100%",
           alignItems: "center",
-          backgroundColor: BRAND_PRIMARY8,
+          backgroundColor: BRAND_PRIMARY7,
           borderRadius: 8,
           paddingVertical: 12,
           opacity: pressed ? 0.8 : 1
@@ -8317,480 +7721,116 @@ function ReadinessCheck({
     )
   ] }) });
 }
-var BRAND_PRIMARY9 = "#FF7900";
-var BRAND_PRIMARY_DARK2 = "#C45E00";
-var BRAND_PRIMARY_LIGHT2 = "#FFB066";
-var TEXT_PRIMARY5 = "#F3F4F6";
-var TEXT_SECONDARY4 = "#9CA3AF";
-var TEXT_TERTIARY4 = "#6B7280";
-var SUCCESS = "#14B8A6";
-var WARNING = "#FFB020";
-var ERROR = "#D14343";
-var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY9, BRAND_PRIMARY_LIGHT2];
-var CARD_GRADIENT = "linear-gradient(135deg, #191919 0%, rgba(25,25,25,0.95) 100%)";
-var 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;
+var BRAND_PRIMARY8 = "#FF7900";
+var TEXT_PRIMARY5 = "var(--color-text-primary)";
+var TEXT_SECONDARY4 = "var(--color-text-secondary)";
+var TEXT_TERTIARY4 = "var(--color-text-tertiary)";
+var BORDER_STRONG = "var(--color-border-strong)";
+var STATUS_SUCCESS2 = "#14B8A6";
+var STATUS_ERROR2 = "#D14343";
+var STATUS_WARNING2 = "#FFB020";
+var GRID_LINE = "rgba(255,255,255,0.06)";
+var TOOLTIP_BG = "var(--color-surface-elevated)";
+var SUCCESS_PILL_BG = "rgba(20,184,166,0.10)";
+var SUCCESS_PILL_BORDER = "rgba(20,184,166,0.20)";
+var ERROR_PILL_BG = "rgba(209,67,67,0.10)";
+var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
+var PLOT_LEFT = 26;
+var TOOLTIP_WIDTH = 124;
+function timeOf(dateStr) {
+  const t = Date.parse(dateStr);
+  return Number.isNaN(t) ? 0 : t;
 }
-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(
-      Text,
-      {
-        style: { fontWeight: "700", color: TEXT_PRIMARY5 },
-        children: part
-      },
-      `${part}-${index}`
-    ) : /* @__PURE__ */ jsx(Fragment$1, { children: part }, `t-${index}`)
-  );
+function formatValue(value) {
+  return `${Math.round(value)}`;
 }
-function StatusPill({ badge }) {
-  const colors = STATUS_VARIANTS[badge.variant];
-  return /* @__PURE__ */ jsxs(
-    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(View, { accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(StatusDot, { variant: badge.variant, size: "sm" }) }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            style: {
-              fontSize: 10,
-              fontFamily: "Inter, sans-serif",
-              fontWeight: "700",
-              letterSpacing: 0.3,
-              color: colors.text
-            },
-            children: badge.label
-          }
-        )
-      ]
-    }
+function buildGeometry(data, projection, boundaries, width, height) {
+  const values = [...data, ...projection].map((p) => p.e1rm);
+  if (data.length === 0) {
+    return {
+      hasData: false,
+      toX: () => 0,
+      toY: () => 0,
+      actual: [],
+      projection: [],
+      gridLines: [],
+      boundaries: []
+    };
+  }
+  const times = [
+    ...data.map((p) => timeOf(p.date)),
+    ...projection.map((p) => timeOf(p.date)),
+    ...boundaries.map((b) => timeOf(b.date))
+  ];
+  const tMin = Math.min(...times);
+  const tMaxRaw = Math.max(...times);
+  const tMax = tMaxRaw === tMin ? tMin + 1 : tMaxRaw;
+  const yMin = Math.min(...values);
+  const yMax = Math.max(...values);
+  const range = yMax - yMin || Math.max(1, yMax * 0.1);
+  const padV = range * 0.15;
+  const domainMin = yMin - padV;
+  const domainMax = yMax + padV;
+  const innerW = Math.max(1, width - PLOT_LEFT);
+  const toX = (time) => PLOT_LEFT + (time - tMin) / (tMax - tMin) * innerW;
+  const toY = (value) => height - (value - domainMin) / (domainMax - domainMin) * height;
+  const project = (points) => points.map((point, index) => ({
+    x: toX(timeOf(point.date)),
+    y: toY(point.e1rm),
+    point,
+    index
+  }));
+  const tickValues = Array.from(
+    new Set([yMax, (yMin + yMax) / 2, yMin].map((v) => Math.round(v)))
   );
+  const gridLines = tickValues.map((v) => ({ y: toY(v), label: formatValue(v) }));
+  return {
+    hasData: true,
+    toX,
+    toY,
+    actual: project(data),
+    projection: project(projection),
+    gridLines,
+    boundaries: boundaries.map((b) => ({
+      x: toX(timeOf(b.date)),
+      label: b.label
+    }))
+  };
 }
-function MetricCell({ metric }) {
-  return /* @__PURE__ */ jsxs(View, { style: { width: "48%" }, testID: "meso-status-card-metric", children: [
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        style: {
-          fontSize: 10,
-          fontFamily: "Inter, sans-serif",
-          fontWeight: "600",
-          letterSpacing: 0.5,
-          textTransform: "uppercase",
-          color: TEXT_TERTIARY4
-        },
-        children: metric.label
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        style: {
-          marginTop: 2,
-          fontSize: 13,
-          fontFamily: "Inter, sans-serif",
-          fontWeight: "600",
-          color: TEXT_PRIMARY5
-        },
-        children: metric.value
-      }
-    )
-  ] });
+function computeTrend(data, boundaries) {
+  if (data.length < 2) return { percent: 0, positive: true };
+  let series = data;
+  if (boundaries.length > 0) {
+    const lastBoundary = Math.max(...boundaries.map((b) => timeOf(b.date)));
+    const filtered = data.filter((p) => timeOf(p.date) >= lastBoundary);
+    if (filtered.length < 2) return { percent: 0, positive: true };
+    series = filtered;
+  }
+  const first = series[0].e1rm;
+  const last = series[series.length - 1].e1rm;
+  const percent = first ? (last - first) / first * 100 : 0;
+  return { percent, positive: percent >= 0 };
 }
-function Gauge({ gauge }) {
-  const level = clamp012(gauge.level);
-  const percentage = Math.round(level * 100);
-  const markerColor = getGaugeZoneColor(level);
-  return /* @__PURE__ */ jsxs(
-    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(
-          View,
-          {
-            className: "flex-row items-center justify-between",
-            accessibilityElementsHidden: true,
-            children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "500",
-                    letterSpacing: 0.5,
-                    textTransform: "uppercase",
-                    color: TEXT_SECONDARY4
-                  },
-                  children: gauge.label
-                }
-              ),
-              gauge.sublabel != null && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "500",
-                    color: TEXT_TERTIARY4
-                  },
-                  children: gauge.sublabel
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          View,
-          {
-            style: {
-              height: 8,
-              borderRadius: 4,
-              position: "relative",
-              backgroundImage: GAUGE_GRADIENT
-            },
-            accessibilityElementsHidden: true,
-            children: [
-              /* @__PURE__ */ jsx(
-                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(
-                View,
-                {
-                  style: {
-                    position: "absolute",
-                    left: `${percentage}%`,
-                    top: -3,
-                    marginLeft: -7,
-                    width: 14,
-                    height: 14,
-                    borderRadius: 9999,
-                    borderWidth: 2,
-                    borderColor: TEXT_PRIMARY5,
-                    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_DARK2,
-      className,
-      style: {
-        borderColor: BRAND_PRIMARY_DARK2,
-        borderWidth: 1,
-        backgroundImage: CARD_GRADIENT
-      },
-      role: "article",
-      "aria-label": `Mesocycle status for ${mesoName}`,
-      testID: "meso-status-card",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          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_STOPS2.map((color) => /* @__PURE__ */ jsx(View, { style: { flex: 1, backgroundColor: color } }, color))
-          }
-        ),
-        /* @__PURE__ */ jsxs(View, { style: { padding: 14, gap: 14 }, testID: "meso-status-card-body", children: [
-          /* @__PURE__ */ jsxs(View, { testID: "meso-status-card-header", children: [
-            /* @__PURE__ */ jsxs(
-              View,
-              {
-                className: "flex-row items-center justify-between",
-                style: { gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      style: {
-                        flexShrink: 1,
-                        fontSize: 15,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700",
-                        color: TEXT_PRIMARY5
-                      },
-                      testID: "meso-status-card-name",
-                      children: mesoName
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(StatusPill, { badge: statusBadge })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                style: {
-                  marginTop: 4,
-                  fontSize: 12,
-                  fontFamily: "Inter, sans-serif",
-                  color: TEXT_SECONDARY4
-                },
-                testID: "meso-status-card-subtitle",
-                children: mesoSubtitle
-              }
-            )
-          ] }),
-          metrics.length > 0 && /* @__PURE__ */ jsx(
-            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(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(
-            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(
-                Text,
-                {
-                  style: {
-                    fontSize: 12,
-                    lineHeight: 17,
-                    fontFamily: "Inter, sans-serif",
-                    color: TEXT_SECONDARY4
-                  },
-                  children: renderCoachingText(coaching.text, coaching.highlights)
-                }
-              )
-            }
-          ),
-          nextTarget != null && /* @__PURE__ */ jsxs(
-            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(Text, { style: { fontSize: 14, color: SUCCESS }, accessibilityElementsHidden: true, children: nextTarget.icon }),
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    style: {
-                      flexShrink: 1,
-                      fontSize: 12,
-                      fontFamily: "Inter, sans-serif",
-                      fontWeight: "600",
-                      color: SUCCESS
-                    },
-                    children: nextTarget.text
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-var BRAND_PRIMARY10 = "#FF7900";
-var TEXT_PRIMARY6 = "#F3F4F6";
-var TEXT_SECONDARY5 = "#9CA3AF";
-var TEXT_TERTIARY5 = "#6B7280";
-var BORDER_STRONG = "#2C2C2C";
-var STATUS_SUCCESS2 = "#14B8A6";
-var STATUS_ERROR2 = "#D14343";
-var STATUS_WARNING2 = "#FFB020";
-var GRID_LINE = "rgba(255,255,255,0.06)";
-var TOOLTIP_BG = "rgba(28,28,28,0.95)";
-var SUCCESS_PILL_BG = "rgba(20,184,166,0.10)";
-var SUCCESS_PILL_BORDER = "rgba(20,184,166,0.20)";
-var ERROR_PILL_BG = "rgba(209,67,67,0.10)";
-var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
-var PLOT_LEFT = 26;
-var TOOLTIP_WIDTH = 124;
-function timeOf(dateStr) {
-  const t = Date.parse(dateStr);
-  return Number.isNaN(t) ? 0 : t;
-}
-function formatValue(value) {
-  return `${Math.round(value)}`;
-}
-function buildGeometry(data, projection, boundaries, width, height) {
-  const values = [...data, ...projection].map((p) => p.e1rm);
-  if (data.length === 0) {
-    return {
-      hasData: false,
-      toX: () => 0,
-      toY: () => 0,
-      actual: [],
-      projection: [],
-      gridLines: [],
-      boundaries: []
-    };
-  }
-  const times = [
-    ...data.map((p) => timeOf(p.date)),
-    ...projection.map((p) => timeOf(p.date)),
-    ...boundaries.map((b) => timeOf(b.date))
-  ];
-  const tMin = Math.min(...times);
-  const tMaxRaw = Math.max(...times);
-  const tMax = tMaxRaw === tMin ? tMin + 1 : tMaxRaw;
-  const yMin = Math.min(...values);
-  const yMax = Math.max(...values);
-  const range = yMax - yMin || Math.max(1, yMax * 0.1);
-  const padV = range * 0.15;
-  const domainMin = yMin - padV;
-  const domainMax = yMax + padV;
-  const innerW = Math.max(1, width - PLOT_LEFT);
-  const toX = (time) => PLOT_LEFT + (time - tMin) / (tMax - tMin) * innerW;
-  const toY = (value) => height - (value - domainMin) / (domainMax - domainMin) * height;
-  const project = (points) => points.map((point, index) => ({
-    x: toX(timeOf(point.date)),
-    y: toY(point.e1rm),
-    point,
-    index
-  }));
-  const tickValues = Array.from(
-    new Set([yMax, (yMin + yMax) / 2, yMin].map((v) => Math.round(v)))
-  );
-  const gridLines = tickValues.map((v) => ({ y: toY(v), label: formatValue(v) }));
-  return {
-    hasData: true,
-    toX,
-    toY,
-    actual: project(data),
-    projection: project(projection),
-    gridLines,
-    boundaries: boundaries.map((b) => ({
-      x: toX(timeOf(b.date)),
-      label: b.label
-    }))
-  };
-}
-function computeTrend(data, boundaries) {
-  if (data.length < 2) return { percent: 0, positive: true };
-  let series = data;
-  if (boundaries.length > 0) {
-    const lastBoundary = Math.max(...boundaries.map((b) => timeOf(b.date)));
-    const filtered = data.filter((p) => timeOf(p.date) >= lastBoundary);
-    if (filtered.length < 2) return { percent: 0, positive: true };
-    series = filtered;
-  }
-  const first = series[0].e1rm;
-  const last = series[series.length - 1].e1rm;
-  const percent = first ? (last - first) / first * 100 : 0;
-  return { percent, positive: percent >= 0 };
-}
-function ChartLine({
-  coords,
-  color,
-  strokeWidth,
-  dashed,
-  testID
-}) {
-  return /* @__PURE__ */ jsx(Fragment, { children: coords.map((c, i) => {
-    if (i === 0) return null;
-    const prev = coords[i - 1];
-    const dx = c.x - prev.x;
-    const dy = c.y - prev.y;
-    const length = Math.sqrt(dx * dx + dy * dy);
-    const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-    return /* @__PURE__ */ jsx(
-      View,
-      {
-        testID,
-        accessibilityElementsHidden: true,
-        style: [
+function ChartLine({
+  coords,
+  color,
+  strokeWidth,
+  dashed,
+  testID
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: coords.map((c, i) => {
+    if (i === 0) return null;
+    const prev = coords[i - 1];
+    const dx = c.x - prev.x;
+    const dy = c.y - prev.y;
+    const length = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        testID,
+        accessibilityElementsHidden: true,
+        style: [
           {
             position: "absolute",
             left: prev.x,
@@ -8871,7 +7911,7 @@ function StrengthTrendChart({
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY5 }, children: "No strength data yet" })
+            children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY4 }, children: "No strength data yet" })
           }
         )
       }
@@ -8923,7 +7963,7 @@ function StrengthTrendChart({
                           textAlign: "right",
                           fontSize: 9,
                           fontFamily: "Inter, sans-serif",
-                          color: TEXT_TERTIARY5
+                          color: TEXT_TERTIARY4
                         },
                         children: line.label
                       }
@@ -8966,7 +8006,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.projection,
-                          color: TEXT_TERTIARY5,
+                          color: TEXT_TERTIARY4,
                           strokeWidth: 2,
                           dashed: true,
                           testID: "strength-trend-chart-projection-segment"
@@ -8976,7 +8016,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.actual,
-                          color: BRAND_PRIMARY10,
+                          color: BRAND_PRIMARY8,
                           strokeWidth: 2.5,
                           testID: "strength-trend-chart-actual-segment"
                         }
@@ -9029,7 +8069,7 @@ function StrengthTrendChart({
                       width: 8,
                       height: 8,
                       borderRadius: 1,
-                      backgroundColor: BRAND_PRIMARY10
+                      backgroundColor: BRAND_PRIMARY8
                     }
                   },
                   `point-${c.index}`
@@ -9064,7 +8104,7 @@ function StrengthTrendChart({
                     style: {
                       fontSize: 10,
                       fontFamily: "Inter, sans-serif",
-                      color: TEXT_TERTIARY5
+                      color: TEXT_TERTIARY4
                     },
                     children: selectedCoord.point.sessionLabel ?? selectedCoord.point.date
                   }
@@ -9077,7 +8117,7 @@ function StrengthTrendChart({
                       fontSize: 13,
                       fontFamily: "Inter, sans-serif",
                       fontWeight: "700",
-                      color: TEXT_PRIMARY6
+                      color: TEXT_PRIMARY5
                     },
                     children: `${formatValue(selectedCoord.point.e1rm)} ${unit}`
                   }
@@ -9117,7 +8157,7 @@ function StrengthTrendChart({
                   textAlign: "center",
                   fontSize: 10,
                   fontFamily: "Inter, sans-serif",
-                  color: TEXT_TERTIARY5
+                  color: TEXT_TERTIARY4
                 },
                 children: boundary.label
               },
@@ -9160,8 +8200,8 @@ function StrengthTrendChart({
             testID: "strength-trend-chart-legend",
             children: [
               /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY10 } }),
-                /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "Actual" })
+                /* @__PURE__ */ jsx(View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY8 } }),
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY4 }, children: "Actual" })
               ] }),
               /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
                 /* @__PURE__ */ jsx(
@@ -9172,15 +8212,15 @@ function StrengthTrendChart({
                       height: 0,
                       borderTopWidth: 2,
                       borderStyle: "dashed",
-                      borderTopColor: TEXT_TERTIARY5
+                      borderTopColor: TEXT_TERTIARY4
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "Projected" })
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY4 }, children: "Projected" })
               ] }),
               /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
                 /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, color: STATUS_WARNING2 }, children: "\u2605" }),
-                /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY5 }, children: "PR" })
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY4 }, children: "PR" })
               ] })
             ]
           }
@@ -9193,7 +8233,7 @@ var STATUS_SUCCESS3 = "#14B8A6";
 var STATUS_WARNING3 = "#FFB020";
 var STATUS_INFO = "#2196F3";
 var DOT_BORDER = "#F3F4F6";
-var TEXT_TERTIARY6 = "#6B7280";
+var TEXT_TERTIARY5 = "var(--color-text-tertiary)";
 var BAND_FILL = "rgba(20,184,166,0.1)";
 var BAND_EDGE = "rgba(20,184,166,0.45)";
 var PROJECTION_FILL = "rgba(20,184,166,0.05)";
@@ -9482,7 +8522,7 @@ function CapacityBandChart({
                     textAlign: "center",
                     fontSize: 9,
                     fontFamily: "Inter, sans-serif",
-                    color: TEXT_TERTIARY6,
+                    color: TEXT_TERTIARY5,
                     transform: [{ rotate: "-90deg" }]
                   },
                   accessibilityElementsHidden: true,
@@ -9504,7 +8544,7 @@ function CapacityBandChart({
                       textAlign: "center",
                       fontSize: 10,
                       fontFamily: "Inter, sans-serif",
-                      color: TEXT_TERTIARY6
+                      color: TEXT_TERTIARY5
                     },
                     accessibilityElementsHidden: true,
                     importantForAccessibility: "no-hide-descendants",
@@ -9566,847 +8606,674 @@ function CapacityBandChart({
     }
   );
 }
-
-// src/components/custom/Workout/muscleTaxonomy.ts
-var MuscleGroup = /* @__PURE__ */ ((MuscleGroup4) => {
-  MuscleGroup4["CHEST"] = "chest";
-  MuscleGroup4["FRONT_DELTS"] = "front_delts";
-  MuscleGroup4["SIDE_DELTS"] = "side_delts";
-  MuscleGroup4["TRICEPS"] = "triceps";
-  MuscleGroup4["LATS"] = "lats";
-  MuscleGroup4["UPPER_BACK"] = "upper_back";
-  MuscleGroup4["REAR_DELTS"] = "rear_delts";
-  MuscleGroup4["BICEPS"] = "biceps";
-  MuscleGroup4["FOREARMS"] = "forearms";
-  MuscleGroup4["QUADS"] = "quads";
-  MuscleGroup4["HAMSTRINGS"] = "hamstrings";
-  MuscleGroup4["GLUTES"] = "glutes";
-  MuscleGroup4["CALVES"] = "calves";
-  MuscleGroup4["ABS"] = "abs";
-  MuscleGroup4["OBLIQUES"] = "obliques";
-  return MuscleGroup4;
-})(MuscleGroup || {});
-var SimpleMuscleGroup = /* @__PURE__ */ ((SimpleMuscleGroup3) => {
-  SimpleMuscleGroup3["CHEST"] = "chest";
-  SimpleMuscleGroup3["BACK"] = "back";
-  SimpleMuscleGroup3["SHOULDERS"] = "shoulders";
-  SimpleMuscleGroup3["BICEPS"] = "biceps";
-  SimpleMuscleGroup3["TRICEPS"] = "triceps";
-  SimpleMuscleGroup3["LEGS"] = "legs";
-  SimpleMuscleGroup3["CORE"] = "core";
-  SimpleMuscleGroup3["FOREARMS"] = "forearms";
-  return SimpleMuscleGroup3;
-})(SimpleMuscleGroup || {});
-var SIMPLE_TO_DETAILED = {
-  ["chest" /* CHEST */]: ["chest" /* CHEST */],
-  ["back" /* BACK */]: ["lats" /* LATS */, "upper_back" /* UPPER_BACK */],
-  ["shoulders" /* SHOULDERS */]: [
-    "front_delts" /* FRONT_DELTS */,
-    "side_delts" /* SIDE_DELTS */,
-    "rear_delts" /* REAR_DELTS */
-  ],
-  ["biceps" /* BICEPS */]: ["biceps" /* BICEPS */],
-  ["triceps" /* TRICEPS */]: ["triceps" /* TRICEPS */],
-  ["legs" /* LEGS */]: [
-    "quads" /* QUADS */,
-    "hamstrings" /* HAMSTRINGS */,
-    "glutes" /* GLUTES */,
-    "calves" /* CALVES */
-  ],
-  ["core" /* CORE */]: ["abs" /* ABS */, "obliques" /* OBLIQUES */],
-  ["forearms" /* FOREARMS */]: ["forearms" /* FOREARMS */]
+var SURFACE_ELEVATED = "var(--color-surface-elevated)";
+var BORDER_DEFAULT3 = "var(--color-border-default)";
+var BRAND_PRIMARY9 = "#FF7900";
+var TEXT_PRIMARY6 = "var(--color-text-primary)";
+var TEXT_TERTIARY6 = "var(--color-text-tertiary)";
+var PAGE_BG = "var(--color-background-base)";
+var WORKOUT_PILL_STATUS = {
+  completed: "completed",
+  today: "current",
+  upcoming: "upcoming"
 };
-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 deriveNavLevel(selection) {
+  if (selection.workoutId != null) return "workout";
+  if (selection.weekNumber != null) return "week";
+  return "meso";
+}
+function toProgressBarMesos(mesos) {
+  return mesos.map(({ id, name, weekCount, status, currentWeek }) => ({
+    id,
+    name,
+    weekCount,
+    status,
+    currentWeek
+  }));
+}
+function findMeso(mesos, id) {
+  if (id == null) return null;
+  return mesos.find((meso) => meso.id === id) ?? null;
+}
+function findWeek(meso, weekNumber) {
+  if (meso == null || weekNumber == null) return null;
+  return meso.weeks.find((week) => week.weekNumber === weekNumber) ?? null;
+}
+function findWorkout(week, workoutId) {
+  if (week == null || workoutId == null) return null;
+  return week.workouts.find((workout) => workout.id === workoutId) ?? null;
+}
+function buildBreadcrumbs(meso, weekNumber, workout) {
+  const crumbs = [{ key: "meso", label: meso.name, level: "meso" }];
+  if (weekNumber != null) {
+    crumbs.push({ key: "week", label: `Week ${weekNumber}`, level: "week" });
+  }
+  if (workout != null) {
+    crumbs.push({ key: "workout", label: workout.name, level: "workout" });
   }
+  return crumbs;
 }
-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_PRIMARY7 = "#F3F4F6";
-var TEXT_SECONDARY6 = "#9CA3AF";
-function buildSlugParts(data) {
-  const bySlug = /* @__PURE__ */ new Map();
-  for (const d of data) {
-    for (const slug of MUSCLE_TO_SVG_SLUGS[d.muscleGroup] ?? []) {
-      const existing = bySlug.get(slug);
-      if (!existing || isMoreSevere(d.volumeStatus, existing.status)) {
-        bySlug.set(slug, { status: d.volumeStatus, intensity: d.intensity });
-      }
+function Breadcrumbs2({ crumbs, onNavigate }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: "flex-row items-center flex-wrap",
+      style: { gap: 4 },
+      testID: "program-planning-page-breadcrumbs",
+      children: crumbs.map((crumb, index) => {
+        const isLast = index === crumbs.length - 1;
+        return /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 4 }, children: [
+          index > 0 && /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, color: TEXT_TERTIARY6 }, children: "\u203A" }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: () => onNavigate(crumb.level),
+              disabled: isLast,
+              accessibilityRole: "button",
+              testID: `program-planning-page-crumb-${crumb.key}`,
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    fontSize: 12,
+                    fontFamily: "Inter, sans-serif",
+                    fontWeight: isLast ? "700" : "500",
+                    color: isLast ? TEXT_PRIMARY6 : BRAND_PRIMARY9
+                  },
+                  children: crumb.label
+                }
+              )
+            }
+          )
+        ] }, crumb.key);
+      })
     }
-  }
-  return Array.from(bySlug.entries()).map(([slug, v]) => ({
-    slug,
-    color: getHeatmapColor(v.status, v.intensity)
+  );
+}
+function toWeekRow(week, meso, onSelectWeek) {
+  const workouts = week.workouts.map((workout) => ({
+    name: workout.name,
+    status: WORKOUT_PILL_STATUS[workout.status],
+    onPress: () => onSelectWeek(week.weekNumber)
   }));
+  return {
+    weekNumber: week.weekNumber,
+    totalWeeks: meso.weekCount,
+    workouts,
+    intensityLevel: week.intensityLevel,
+    intensityThreshold: week.intensityThreshold,
+    isCurrent: week.isCurrent ?? week.weekNumber === meso.currentWeek,
+    isDeload: week.isDeload
+  };
 }
-function 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 MesoLevel({ mesos, activeMesoId, onSelectMeso, onSelectWeek }) {
+  return /* @__PURE__ */ jsx(View, { style: { gap: 12 }, testID: "program-planning-page-meso-level", children: mesos.map((meso) => {
+    const expanded = meso.id === activeMesoId;
+    return /* @__PURE__ */ jsx(
+      MesoCard,
+      {
+        name: meso.name,
+        goal: meso.goal,
+        split: meso.split,
+        weekRange: meso.weekRange,
+        currentWeek: meso.currentWeek,
+        totalWeeks: meso.weekCount,
+        weeks: expanded ? meso.weeks.map((week) => toWeekRow(week, meso, onSelectWeek)) : [],
+        volumeHeatmap: meso.volumeHeatmap,
+        expanded,
+        onToggle: () => onSelectMeso(meso.id),
+        highlighted: expanded
+      },
+      meso.id
+    );
+  }) });
+}
+function WeekLevel({ week, onSelectWorkout }) {
+  return /* @__PURE__ */ jsx(View, { style: { gap: 10 }, testID: "program-planning-page-week-level", children: week.workouts.map((workout) => /* @__PURE__ */ jsx(
+    WorkoutCard,
+    {
+      name: workout.name,
+      date: workout.date,
+      duration: workout.duration,
+      status: workout.status,
+      muscleGroups: workout.muscleGroups,
+      totalSets: workout.totalSets,
+      totalVolume: workout.totalVolume,
+      unit: workout.unit,
+      exercises: workout.exercises,
+      expanded: false,
+      onToggle: () => onSelectWorkout(workout.id)
+    },
+    workout.id
+  )) });
+}
+function WorkoutLevel({ workout, expandedExercise, onToggleExercise }) {
+  const exercises = workout.exercises.map((exercise, index) => ({
+    ...exercise,
+    state: exercise.state === "upcoming" ? exercise.state : index === expandedExercise ? "expanded" : "collapsed",
+    onToggle: () => onToggleExercise(index)
   }));
+  return /* @__PURE__ */ jsx(View, { testID: "program-planning-page-workout-level", children: /* @__PURE__ */ jsx(
+    WorkoutCard,
+    {
+      name: workout.name,
+      date: workout.date,
+      duration: workout.duration,
+      status: workout.status,
+      muscleGroups: workout.muscleGroups,
+      totalSets: workout.totalSets,
+      totalVolume: workout.totalVolume,
+      unit: workout.unit,
+      exercises,
+      expanded: true,
+      onToggle: () => void 0
+    }
+  ) });
 }
-function BodyMap({
-  data,
-  view,
-  onViewChange,
-  onMusclePress,
-  highlightedMuscle,
-  mode = "detailed",
+function ProgramPlanningPage({
+  title = "Program Plan",
+  mesos,
   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);
+  const [activeMesoId, setActiveMesoId] = useState(mesos[0]?.id ?? null);
+  const [selectedWeek, setSelectedWeek] = useState(null);
+  const [selectedWorkoutId, setSelectedWorkoutId] = useState(null);
+  const [expandedExercise, setExpandedExercise] = useState(null);
+  const progressMesos = useMemo(() => toProgressBarMesos(mesos), [mesos]);
+  const activeMeso = findMeso(mesos, activeMesoId);
+  const level = deriveNavLevel({ weekNumber: selectedWeek, workoutId: selectedWorkoutId });
+  const activeWeek = findWeek(activeMeso, selectedWeek);
+  const activeWorkout = findWorkout(activeWeek, selectedWorkoutId);
+  const selectMeso = (id) => {
+    setActiveMesoId(id);
+    setSelectedWeek(null);
+    setSelectedWorkoutId(null);
   };
-  return /* @__PURE__ */ jsxs(View, { className: cn(className), testID: "body-map", ...props, children: [
-    /* @__PURE__ */ jsx(ViewToggle, { view, onViewChange }),
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        style: [
+  const selectWeek = (weekNumber) => {
+    setSelectedWeek(weekNumber);
+    setSelectedWorkoutId(null);
+    setExpandedExercise(null);
+  };
+  const selectWorkout = (id) => {
+    setSelectedWorkoutId(id);
+    setExpandedExercise(null);
+  };
+  const toggleExercise = (index) => setExpandedExercise((current) => current === index ? null : index);
+  const navigateTo = (target) => {
+    if (target === "meso") selectMeso(activeMesoId ?? mesos[0]?.id);
+    else if (target === "week" && selectedWeek != null) selectWeek(selectedWeek);
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className,
+      style: { width: 390, backgroundColor: PAGE_BG },
+      accessibilityRole: "main",
+      "aria-label": title,
+      testID: "program-planning-page",
+      ...props,
+      children: /* @__PURE__ */ jsxs(View, { style: { padding: 16, gap: 14 }, testID: "program-planning-page-content", children: [
+        /* @__PURE__ */ jsx(
+          Text,
           {
-            width: 200 * BODY_SCALE,
-            alignSelf: "center",
-            transform: [{ scale }]
-          },
-          glowColor ? { boxShadow: `0 0 14px 2px ${glowColor}` } : void 0
-        ],
-        "aria-hidden": true,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no-hide-descendants",
-        testID: "body-map-svg",
-        children: /* @__PURE__ */ jsx(
-          Body,
+            accessibilityRole: "header",
+            style: {
+              fontSize: 20,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: "700",
+              color: TEXT_PRIMARY6
+            },
+            testID: "program-planning-page-title",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: { marginHorizontal: -16 }, children: /* @__PURE__ */ jsx(
+          MesoProgressBar,
           {
-            side: view,
-            data: slugParts,
-            scale: BODY_SCALE,
-            gender: "male",
-            defaultFill: OUTLINE_FILL,
-            border: OUTLINE_BORDER,
-            onBodyPartPress: handleBodyPress
+            mesos: progressMesos,
+            activeMesoId,
+            onMesoPress: selectMeso
           }
-        )
-      }
-    ),
-    legend.length === 0 ? /* @__PURE__ */ jsx(
-      Text,
-      {
-        style: {
-          marginTop: 8,
-          fontSize: 12,
-          color: TEXT_SECONDARY6,
-          textAlign: "center",
-          fontFamily: "Inter, sans-serif"
-        },
-        testID: "body-map-empty",
-        children: "No training data"
-      }
-    ) : /* @__PURE__ */ jsx(
-      View,
-      {
-        className: "flex-row flex-wrap",
-        style: { marginTop: 10, gap: 6, justifyContent: "center" },
-        testID: "body-map-legend",
-        children: legend.map((entry) => /* @__PURE__ */ jsx(
-          MuscleButton,
+        ) }),
+        activeMeso != null && /* @__PURE__ */ jsx(
+          Breadcrumbs2,
           {
-            entry,
-            highlighted: highlightedMuscle === entry.muscle,
-            onMusclePress
-          },
-          entry.key
-        ))
-      }
-    )
-  ] });
+            crumbs: buildBreadcrumbs(activeMeso, selectedWeek, activeWorkout),
+            onNavigate: navigateTo
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: {
+              backgroundColor: SURFACE_ELEVATED,
+              borderWidth: 1,
+              borderColor: BORDER_DEFAULT3,
+              borderRadius: 12,
+              padding: 12
+            },
+            testID: "program-planning-page-body",
+            children: [
+              level === "meso" && /* @__PURE__ */ jsx(
+                MesoLevel,
+                {
+                  mesos,
+                  activeMesoId,
+                  onSelectMeso: selectMeso,
+                  onSelectWeek: selectWeek
+                }
+              ),
+              level === "week" && activeWeek != null && /* @__PURE__ */ jsx(WeekLevel, { week: activeWeek, onSelectWorkout: selectWorkout }),
+              level === "workout" && activeWorkout != null && /* @__PURE__ */ jsx(
+                WorkoutLevel,
+                {
+                  workout: activeWorkout,
+                  expandedExercise,
+                  onToggleExercise: toggleExercise
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+var SURFACE_ELEVATED2 = "var(--color-surface-elevated)";
+var BORDER_DEFAULT4 = "var(--color-border-default)";
+var BRAND_PRIMARY10 = "#FF7900";
+var TEXT_PRIMARY7 = "var(--color-text-primary)";
+var TEXT_SECONDARY5 = "var(--color-text-secondary)";
+var TEXT_TERTIARY7 = "var(--color-text-tertiary)";
+var PAGE_BG2 = "var(--color-background-base)";
+var CHART_WIDTH = 326;
+var CHART_HEIGHT = 150;
+var EXERCISE_DETAIL_TABS = [
+  { key: "progress", label: "Progress" },
+  { key: "history", label: "History" },
+  { key: "advanced", label: "Advanced" }
+];
+function deriveExerciseStats(entries) {
+  let bestE1rm = null;
+  let prCount = 0;
+  for (const entry of entries) {
+    if (entry.e1rm != null && (bestE1rm == null || entry.e1rm.value > bestE1rm)) {
+      bestE1rm = entry.e1rm.value;
+    }
+    if (entry.isPR) prCount += 1;
+  }
+  return { sessions: entries.length, bestE1rm, prCount };
+}
+function toExerciseCardProps(entry, expanded, onToggle) {
+  return {
+    name: entry.title,
+    state: expanded ? "expanded" : "collapsed",
+    onToggle,
+    summary: entry.summary,
+    e1rm: entry.e1rm,
+    isPR: entry.isPR,
+    tempo: entry.tempo,
+    sets: expanded ? entry.sets : void 0
+  };
 }
-function ViewToggle({ view, onViewChange }) {
+function summarizeVbt(sets) {
+  const allReps = sets.flatMap((set) => set.velocities);
+  const meanVelocity = calculateMeanVelocity(allReps);
+  let velocityLoss = 0;
+  for (const set of sets) {
+    velocityLoss = Math.max(velocityLoss, calculateVelocityLoss(set.velocities));
+  }
+  return { meanVelocity, velocityLoss };
+}
+function TabBar({ active, onSelect }) {
   return /* @__PURE__ */ jsx(
     View,
     {
-      className: "flex-row self-center",
-      style: { gap: 4, marginBottom: 8 },
-      testID: "body-map-view-toggle",
-      children: ["front", "back"].map((side) => {
-        const active = view === side;
+      className: "flex-row",
+      style: {
+        borderBottomWidth: 1,
+        borderBottomColor: BORDER_DEFAULT4
+      },
+      accessibilityRole: "tablist",
+      testID: "exercise-detail-page-tabs",
+      children: EXERCISE_DETAIL_TABS.map(({ key, label }) => {
+        const isActive = key === active;
         return /* @__PURE__ */ jsx(
           Pressable,
           {
-            onPress: () => onViewChange?.(side),
-            accessibilityRole: "button",
-            accessibilityLabel: `Show ${side} view`,
-            "aria-pressed": active,
-            disabled: !onViewChange,
+            onPress: () => onSelect(key),
+            accessibilityRole: "tab",
+            accessibilityState: { selected: isActive },
             style: {
-              paddingHorizontal: 12,
-              paddingVertical: 4,
-              borderRadius: 9999,
-              backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
-              borderWidth: 1,
-              borderColor: active ? "#FF7900" : WORKOUT_TOKENS.border.strong
+              flex: 1,
+              alignItems: "center",
+              paddingVertical: 10,
+              borderBottomWidth: 2,
+              borderBottomColor: isActive ? BRAND_PRIMARY10 : "transparent"
             },
-            testID: `body-map-toggle-${side}`,
+            testID: `exercise-detail-page-tab-${key}`,
             children: /* @__PURE__ */ jsx(
               Text,
               {
                 style: {
-                  fontSize: 12,
+                  fontSize: 13,
                   fontFamily: "Inter, sans-serif",
-                  fontWeight: active ? "700" : "500",
-                  color: active ? "#FF7900" : TEXT_SECONDARY6,
-                  textTransform: "capitalize"
+                  fontWeight: isActive ? "700" : "500",
+                  color: isActive ? TEXT_PRIMARY7 : TEXT_TERTIARY7
                 },
-                children: side
+                children: label
               }
             )
           },
-          side
+          key
         );
       })
     }
   );
 }
-function MuscleButton({ entry, highlighted, onMusclePress }) {
-  const dotColor = getHeatmapColor(entry.status, entry.intensity);
-  const label = `${entry.name}, ${VOLUME_STATUS_LABELS[entry.status]}, ${entry.sets} sets this week`;
+var STAT_CARDS = [
+  { key: "sessions", label: "Sessions" },
+  { key: "bestE1rm", label: "Best e1RM" },
+  { key: "prCount", label: "PRs" }
+];
+function StatStrip({ stats, unit }) {
+  return /* @__PURE__ */ jsx(View, { className: "flex-row", style: { gap: 8 }, testID: "exercise-detail-page-stats", children: STAT_CARDS.map(({ key, label }) => {
+    const raw = stats[key];
+    const value = key === "bestE1rm" ? raw == null ? "\u2014" : `${raw} ${unit}` : `${raw}`;
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: {
+          flex: 1,
+          padding: 12,
+          borderRadius: 10,
+          backgroundColor: SURFACE_ELEVATED2,
+          borderWidth: 1,
+          borderColor: BORDER_DEFAULT4
+        },
+        testID: `exercise-detail-page-stat-${key}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                fontSize: 18,
+                fontFamily: '"Space Grotesk", sans-serif',
+                fontWeight: "700",
+                color: TEXT_PRIMARY7
+              },
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                marginTop: 2,
+                fontSize: 10,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "600",
+                letterSpacing: 0.4,
+                textTransform: "uppercase",
+                color: TEXT_TERTIARY7
+              },
+              children: label
+            }
+          )
+        ]
+      },
+      key
+    );
+  }) });
+}
+function SectionCard({
+  title,
+  children,
+  testID
+}) {
   return /* @__PURE__ */ jsxs(
-    Pressable,
+    View,
     {
-      onPress: () => onMusclePress?.(entry.muscle),
-      accessibilityRole: "button",
-      accessibilityLabel: label,
-      "aria-pressed": highlighted,
       style: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 5,
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 9999,
+        backgroundColor: SURFACE_ELEVATED2,
         borderWidth: 1,
-        borderColor: highlighted ? "#FF7900" : WORKOUT_TOKENS.border.default,
-        backgroundColor: WORKOUT_TOKENS.surface.raised
+        borderColor: BORDER_DEFAULT4,
+        borderRadius: 12,
+        padding: 12,
+        gap: 10
       },
-      testID: `body-map-muscle-${entry.key}`,
+      testID,
       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_PRIMARY7
+              fontWeight: "600",
+              letterSpacing: 0.6,
+              textTransform: "uppercase",
+              color: TEXT_TERTIARY7
             },
-            accessibilityElementsHidden: true,
-            children: entry.name
+            children: title
           }
-        )
+        ),
+        children
       ]
     }
   );
 }
-var SURFACE_ELEVATED = WORKOUT_TOKENS.surface.elevated;
-var SURFACE_RAISED2 = WORKOUT_TOKENS.surface.raised;
-var BORDER_STRONG2 = WORKOUT_TOKENS.border.strong;
-var BORDER_DEFAULT3 = WORKOUT_TOKENS.border.default;
-var BRAND_PRIMARY11 = "#FF7900";
-var TEXT_PRIMARY8 = "#F3F4F6";
-var TEXT_SECONDARY7 = "#9CA3AF";
-var TEXT_TERTIARY7 = "#6B7280";
-var VOLUME_GRADIENT = "linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)";
-var SLIDE_OFFSET = 400;
-var BACKDROP_OPACITY = 0.4;
-var STATUS_BADGE_COLOR = {
-  under: "info",
-  maintenance: "warning",
-  productive: "success",
-  over: "error"
-};
-function clamp013(value) {
-  if (value < 0) return 0;
-  if (value > 1) return 1;
-  return value;
+function EntryList({ entries, expandedId, onToggle, emptyLabel, testID }) {
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY7 },
+        testID: `${testID}-empty`,
+        children: emptyLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { style: { gap: 8 }, testID, children: entries.map((entry) => /* @__PURE__ */ jsx(
+    ExerciseCard,
+    {
+      ...toExerciseCardProps(entry, entry.id === expandedId, () => onToggle(entry.id))
+    },
+    entry.id
+  )) });
 }
-function markerFraction(weeklySets, { mev, mrv }) {
-  const span = mrv - mev;
-  if (span <= 0) return weeklySets >= mrv ? 1 : 0;
-  return clamp013((weeklySets - mev) / span);
+function VbtBreakdown({ sets }) {
+  return /* @__PURE__ */ jsx(View, { style: { gap: 10 }, testID: "exercise-detail-page-vbt-breakdown", children: sets.map((set) => {
+    const mean = calculateMeanVelocity(set.velocities);
+    const loss = calculateVelocityLoss(set.velocities);
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        className: "flex-row items-center",
+        style: { gap: 10 },
+        testID: "exercise-detail-page-vbt-set",
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                width: 44,
+                fontSize: 11,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "600",
+                color: TEXT_SECONDARY5
+              },
+              children: set.label
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { className: "flex-1", style: { height: 8, justifyContent: "center" }, children: /* @__PURE__ */ jsx(VelocityStrip, { velocities: set.velocities, variant: "mini" }) }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                fontSize: 11,
+                fontFamily: "Inter, sans-serif",
+                fontVariant: ["tabular-nums"],
+                color: TEXT_TERTIARY7
+              },
+              children: `${mean.toFixed(2)} \xB7 -${loss}%`
+            }
+          )
+        ]
+      },
+      set.label
+    );
+  }) });
 }
-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(
+function VbtSummaryRow({ summary }) {
+  const cells = [
+    { label: "Mean Velocity", value: `${summary.meanVelocity.toFixed(2)} m/s` },
+    { label: "Peak Vel. Loss", value: `-${summary.velocityLoss}%` }
+  ];
+  return /* @__PURE__ */ jsx(View, { className: "flex-row", style: { gap: 8 }, testID: "exercise-detail-page-vbt-summary", children: cells.map((cell) => /* @__PURE__ */ jsxs(
     View,
     {
-      style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "flex-end" },
-      testID: "body-map-detail-panel-root",
+      style: {
+        flex: 1,
+        padding: 12,
+        borderRadius: 10,
+        backgroundColor: SURFACE_ELEVATED2,
+        borderWidth: 1,
+        borderColor: BORDER_DEFAULT4
+      },
       children: [
         /* @__PURE__ */ jsx(
-          Animated.View,
+          Text,
           {
             style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              backgroundColor: "#000000",
-              opacity: backdrop
+              fontSize: 16,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: "700",
+              color: TEXT_PRIMARY7
             },
-            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"
-              }
-            )
+            children: cell.value
           }
         ),
-        /* @__PURE__ */ jsxs(
-          Animated.View,
+        /* @__PURE__ */ jsx(
+          Text,
           {
-            accessibilityRole: "dialog",
-            accessibilityLabel: dialogLabel,
-            "aria-label": dialogLabel,
             style: {
-              backgroundColor: SURFACE_ELEVATED,
-              borderTopLeftRadius: 16,
-              borderTopRightRadius: 16,
-              maxHeight: "88%",
-              transform: [{ translateY }]
+              marginTop: 2,
+              fontSize: 10,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              letterSpacing: 0.4,
+              textTransform: "uppercase",
+              color: TEXT_TERTIARY7
             },
-            testID: "body-map-detail-panel",
-            ...props,
+            children: cell.label
+          }
+        )
+      ]
+    },
+    cell.label
+  )) });
+}
+function ExerciseDetailPage({
+  exercise,
+  meso,
+  trend,
+  progression,
+  history,
+  vbt,
+  className,
+  ...props
+}) {
+  const [tab, setTab] = useState("progress");
+  const [expandedProgressId, setExpandedProgressId] = useState(null);
+  const [expandedHistoryId, setExpandedHistoryId] = useState(null);
+  const stats = useMemo(() => deriveExerciseStats(history), [history]);
+  const vbtSummary = useMemo(() => summarizeVbt(vbt.sets), [vbt.sets]);
+  const toggle = (setId) => (id) => setId((current) => current === id ? null : id);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className,
+      style: { width: 390, backgroundColor: PAGE_BG2 },
+      accessibilityRole: "main",
+      "aria-label": exercise.name,
+      testID: "exercise-detail-page",
+      ...props,
+      children: /* @__PURE__ */ jsxs(View, { style: { padding: 16, gap: 14 }, testID: "exercise-detail-page-content", children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            className: "flex-row items-start justify-between",
+            style: { gap: 8 },
+            testID: "exercise-detail-page-header",
             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_STRONG2 },
-                      accessibilityElementsHidden: true
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                ScrollView,
+              /* @__PURE__ */ jsxs(View, { style: { flexShrink: 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    accessibilityRole: "header",
+                    style: {
+                      fontSize: 20,
+                      fontFamily: '"Space Grotesk", sans-serif',
+                      fontWeight: "700",
+                      color: TEXT_PRIMARY7
+                    },
+                    testID: "exercise-detail-page-title",
+                    children: exercise.name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: {
+                      marginTop: 2,
+                      fontSize: 12,
+                      fontFamily: "Inter, sans-serif",
+                      color: TEXT_SECONDARY5
+                    },
+                    testID: "exercise-detail-page-subtitle",
+                    children: exercise.subtitle
+                  }
+                )
+              ] }),
+              exercise.currentE1rm != null && /* @__PURE__ */ jsxs(
+                View,
                 {
-                  style: { paddingHorizontal: 16 },
-                  contentContainerStyle: { paddingBottom: 20 },
-                  testID: "body-map-detail-panel-scroll",
+                  style: {
+                    paddingVertical: 4,
+                    paddingHorizontal: 10,
+                    borderRadius: 6,
+                    backgroundColor: "rgba(255,121,0,0.10)",
+                    borderWidth: 1,
+                    borderColor: "rgba(255,121,0,0.25)"
+                  },
+                  testID: "exercise-detail-page-e1rm",
                   children: [
-                    /* @__PURE__ */ 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_PRIMARY8
-                                },
-                                testID: "body-map-detail-panel-title",
-                                children: displayName
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              Badge,
-                              {
-                                variant: "subtle",
-                                color: STATUS_BADGE_COLOR[volumeStatus],
-                                size: "sm",
-                                testID: "body-map-detail-panel-status-badge",
-                                children: VOLUME_STATUS_LABELS[volumeStatus]
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsx(
-                            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_SECONDARY7 }, children: "\xD7" })
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    lastTrained != null && /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(
                       Text,
                       {
-                        style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY7 },
-                        testID: "body-map-detail-panel-last-trained",
-                        children: `Last trained ${lastTrained}`
+                        style: {
+                          fontSize: 9,
+                          fontFamily: "Inter, sans-serif",
+                          fontWeight: "600",
+                          letterSpacing: 0.4,
+                          textTransform: "uppercase",
+                          color: TEXT_TERTIARY7
+                        },
+                        children: "e1RM"
                       }
                     ),
-                    /* @__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_TERTIARY7 }, children: `MEV ${landmarks.mev}` }),
-                            /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY7 }, 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_PRIMARY8,
-                                  backgroundColor: SURFACE_ELEVATED,
-                                  boxShadow: "0 0 4px rgba(0,0,0,0.5)"
-                                },
-                                accessibilityElementsHidden: true,
-                                testID: "body-map-detail-panel-volume-marker"
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs(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_PRIMARY8
-                          },
-                          testID: "body-map-detail-panel-set-count",
-                          children: weeklySets
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Text,
-                        {
-                          style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY7 },
-                          testID: "body-map-detail-panel-mrv-suffix",
-                          children: `/ ${landmarks.mrv} MRV`
-                        }
-                      )
-                    ] }),
-                    weeklyHistory != null && weeklyHistory.length > 0 && /* @__PURE__ */ jsxs(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_TERTIARY7,
-                            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_TERTIARY7,
-                            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_RAISED2,
-                            borderWidth: 1,
-                            borderColor: BORDER_DEFAULT3
-                          },
-                          testID: `body-map-detail-panel-contributing-${index}`,
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              Text,
-                              {
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY8 },
-                                testID: `body-map-detail-panel-contributing-${index}-name`,
-                                children: exercise.name
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              Text,
-                              {
-                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY7 },
-                                testID: `body-map-detail-panel-contributing-${index}-detail`,
-                                children: `${exercise.sets} sets \xB7 ${Math.round(exercise.contributionWeight * 100)}%`
-                              }
-                            )
-                          ]
-                        },
-                        `${exercise.name}-${index}`
-                      ))
-                    ] }),
-                    hasUpcoming && /* @__PURE__ */ jsxs(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_TERTIARY7,
-                            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_PRIMARY8 },
-                                testID: `body-map-detail-panel-upcoming-${index}-name`,
-                                children: exercise.name
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              Text,
-                              {
-                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY7 },
-                                testID: `body-map-detail-panel-upcoming-${index}-detail`,
-                                children: `${exercise.workoutName} \xB7 ${exercise.sets} sets`
-                              }
-                            )
-                          ]
-                        },
-                        `${exercise.name}-${index}`
-                      ))
-                    ] }),
-                    onViewExercises != null && /* @__PURE__ */ jsx(
-                      Pressable,
+                    /* @__PURE__ */ jsx(
+                      Text,
                       {
-                        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)"
+                          fontSize: 15,
+                          fontFamily: '"Space Grotesk", sans-serif',
+                          fontWeight: "700",
+                          color: BRAND_PRIMARY10
                         },
-                        testID: "body-map-detail-panel-view-exercises",
-                        children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "700", color: BRAND_PRIMARY11 }, children: "View exercises" })
+                        children: `${exercise.currentE1rm} ${exercise.unit}`
                       }
                     )
                   ]
@@ -10414,6 +9281,346 @@ function BodyMapDetailPanel({
               )
             ]
           }
+        ),
+        /* @__PURE__ */ jsx(TabBar, { active: tab, onSelect: setTab }),
+        tab === "progress" && /* @__PURE__ */ jsxs(View, { style: { gap: 14 }, testID: "exercise-detail-page-panel-progress", children: [
+          /* @__PURE__ */ jsx(MesoStatusCard, { ...meso }),
+          /* @__PURE__ */ jsx(StatStrip, { stats, unit: exercise.unit }),
+          /* @__PURE__ */ jsx(SectionCard, { title: "Strength Trend", testID: "exercise-detail-page-trend", children: /* @__PURE__ */ jsx(
+            StrengthTrendChart,
+            {
+              data: trend.data,
+              projection: trend.projection,
+              mesoBoundaries: trend.mesoBoundaries,
+              width: CHART_WIDTH,
+              height: CHART_HEIGHT,
+              unit: exercise.unit,
+              animateOnMount: false
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SectionCard, { title: "Week-by-Week", testID: "exercise-detail-page-progression", children: /* @__PURE__ */ jsx(
+            EntryList,
+            {
+              entries: progression,
+              expandedId: expandedProgressId,
+              onToggle: toggle(setExpandedProgressId),
+              emptyLabel: "No progression logged yet",
+              testID: "exercise-detail-page-progression-list"
+            }
+          ) })
+        ] }),
+        tab === "history" && /* @__PURE__ */ jsx(View, { style: { gap: 14 }, testID: "exercise-detail-page-panel-history", children: /* @__PURE__ */ jsx(SectionCard, { title: "All Sessions", testID: "exercise-detail-page-history", children: /* @__PURE__ */ jsx(
+          EntryList,
+          {
+            entries: history,
+            expandedId: expandedHistoryId,
+            onToggle: toggle(setExpandedHistoryId),
+            emptyLabel: "No sessions logged yet",
+            testID: "exercise-detail-page-history-list"
+          }
+        ) }) }),
+        tab === "advanced" && /* @__PURE__ */ jsxs(View, { style: { gap: 14 }, testID: "exercise-detail-page-panel-advanced", children: [
+          /* @__PURE__ */ jsx(SectionCard, { title: "Capacity Band", testID: "exercise-detail-page-capacity", children: /* @__PURE__ */ jsx(
+            CapacityBandChart,
+            {
+              band: vbt.band,
+              workouts: vbt.workouts,
+              projection: vbt.projection,
+              width: CHART_WIDTH,
+              height: CHART_HEIGHT
+            }
+          ) }),
+          /* @__PURE__ */ jsx(VbtSummaryRow, { summary: vbtSummary }),
+          /* @__PURE__ */ jsx(SectionCard, { title: "Velocity Breakdown", testID: "exercise-detail-page-velocity", children: /* @__PURE__ */ jsx(VbtBreakdown, { sets: vbt.sets }) })
+        ] })
+      ] })
+    }
+  );
+}
+var SURFACE_ELEVATED3 = "var(--color-surface-elevated)";
+var BORDER_DEFAULT5 = "var(--color-border-default)";
+var BRAND_PRIMARY11 = "#FF7900";
+var TEXT_PRIMARY8 = "var(--color-text-primary)";
+var TEXT_SECONDARY6 = "var(--color-text-secondary)";
+var TEXT_TERTIARY8 = "var(--color-text-tertiary)";
+var PAGE_BG3 = "var(--color-background-base)";
+function countCompletedSets(exercise) {
+  if (exercise.setVelocities != null) return exercise.setVelocities.length;
+  if (exercise.status === "completed") return exercise.totalPlannedSets;
+  return 0;
+}
+function deriveWorkoutProgress(exercises) {
+  let completedExercises = 0;
+  let completedSets = 0;
+  let totalSets = 0;
+  for (const exercise of exercises) {
+    if (exercise.status === "completed") completedExercises += 1;
+    completedSets += countCompletedSets(exercise);
+    totalSets += exercise.totalPlannedSets;
+  }
+  return {
+    completedExercises,
+    totalExercises: exercises.length,
+    completedSets,
+    totalSets,
+    fraction: totalSets === 0 ? 0 : completedSets / totalSets
+  };
+}
+function findActiveExercise(exercises) {
+  return exercises.find((exercise) => exercise.status === "active") ?? null;
+}
+function statusToCardState(status, focused) {
+  if (status === "upcoming") return "upcoming";
+  return focused ? "expanded" : "collapsed";
+}
+function toActiveCardProps(exercise, focused, onToggle, supersetPosition = null, supersetColor) {
+  const state = statusToCardState(exercise.status, focused);
+  return {
+    name: exercise.name,
+    state,
+    onToggle,
+    summary: exercise.summary,
+    e1rm: exercise.e1rm,
+    isPR: exercise.isPR,
+    tempo: exercise.tempo,
+    setVelocities: exercise.setVelocities,
+    totalPlannedSets: exercise.totalPlannedSets,
+    sets: state === "expanded" ? exercise.sets : void 0,
+    prescription: exercise.prescription,
+    previousBest: exercise.previousBest,
+    supersetPosition,
+    supersetColor
+  };
+}
+function groupExercises(exercises, supersets) {
+  const byId = new Map(supersets.map((superset) => [superset.id, superset]));
+  const groups = [];
+  for (const exercise of exercises) {
+    const superset = exercise.supersetId != null ? byId.get(exercise.supersetId) : void 0;
+    const last = groups[groups.length - 1];
+    if (superset != null && last?.type === "superset" && last.superset.id === superset.id) {
+      last.exercises.push(exercise);
+    } else if (superset != null) {
+      groups.push({ type: "superset", superset, exercises: [exercise] });
+    } else {
+      groups.push({ type: "single", exercise });
+    }
+  }
+  return groups;
+}
+function supersetPositionAt(index, length) {
+  if (length === 1) return null;
+  if (index === 0) return "first";
+  if (index === length - 1) return "last";
+  return "middle";
+}
+function WorkoutHeader({
+  title,
+  subtitle,
+  progress
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: { gap: 10 }, testID: "active-workout-page-header", children: [
+    /* @__PURE__ */ jsxs(View, { className: "flex-row items-start justify-between", style: { gap: 8 }, children: [
+      /* @__PURE__ */ jsxs(View, { style: { flexShrink: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            style: {
+              fontSize: 20,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: "700",
+              color: TEXT_PRIMARY8
+            },
+            testID: "active-workout-page-title",
+            children: title
+          }
+        ),
+        subtitle != null && /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              marginTop: 2,
+              fontSize: 12,
+              fontFamily: "Inter, sans-serif",
+              color: TEXT_SECONDARY6
+            },
+            testID: "active-workout-page-subtitle",
+            children: subtitle
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: { alignItems: "flex-end" }, testID: "active-workout-page-progress-count", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 15,
+              fontFamily: '"Space Grotesk", sans-serif',
+              fontWeight: "700",
+              color: BRAND_PRIMARY11,
+              fontVariant: ["tabular-nums"]
+            },
+            children: `${progress.completedExercises}/${progress.totalExercises}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 10,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              letterSpacing: 0.4,
+              textTransform: "uppercase",
+              color: TEXT_TERTIARY8
+            },
+            children: `${progress.completedSets}/${progress.totalSets} sets`
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { height: 4, backgroundColor: BORDER_DEFAULT5, borderRadius: 2 },
+        testID: "active-workout-page-progress-track",
+        children: /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              height: "100%",
+              width: `${Math.round(progress.fraction * 100)}%`,
+              backgroundColor: BRAND_PRIMARY11,
+              borderRadius: 2
+            },
+            testID: "active-workout-page-progress-fill"
+          }
+        )
+      }
+    )
+  ] });
+}
+function ExerciseList({ groups, focusedId, onToggle }) {
+  return /* @__PURE__ */ jsx(View, { style: { gap: 10 }, testID: "active-workout-page-exercises", children: groups.map((group) => {
+    if (group.type === "single") {
+      return /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            backgroundColor: SURFACE_ELEVATED3,
+            borderWidth: 1,
+            borderColor: BORDER_DEFAULT5,
+            borderRadius: 12
+          },
+          children: /* @__PURE__ */ jsx(
+            ExerciseCard,
+            {
+              ...toActiveCardProps(
+                group.exercise,
+                group.exercise.id === focusedId,
+                () => onToggle(group.exercise.id)
+              )
+            }
+          )
+        },
+        group.exercise.id
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SupersetWrapper,
+      {
+        label: group.superset.label,
+        color: group.superset.color,
+        children: group.exercises.map((exercise, index) => /* @__PURE__ */ jsx(
+          ExerciseCard,
+          {
+            ...toActiveCardProps(
+              exercise,
+              exercise.id === focusedId,
+              () => onToggle(exercise.id),
+              supersetPositionAt(index, group.exercises.length),
+              group.superset.color
+            )
+          },
+          exercise.id
+        ))
+      },
+      group.superset.id
+    );
+  }) });
+}
+function ActiveWorkoutPage({
+  title = "Active Workout",
+  subtitle,
+  exercises,
+  supersets = [],
+  input,
+  rest,
+  initialResting = false,
+  className,
+  ...props
+}) {
+  const active = findActiveExercise(exercises);
+  const [focusedId, setFocusedId] = useState(active?.id ?? null);
+  const [resting, setResting] = useState(initialResting);
+  const [reps, setReps] = useState(input?.reps ?? "");
+  const [weight, setWeight] = useState(input?.weight ?? "");
+  const progress = useMemo(() => deriveWorkoutProgress(exercises), [exercises]);
+  const groups = useMemo(() => groupExercises(exercises, supersets), [exercises, supersets]);
+  const toggleFocus = (id) => setFocusedId((current) => current === id ? null : id);
+  const nextSetNumber = active != null ? countCompletedSets(active) + 1 : 1;
+  const canRecord = reps.trim() !== "" && weight.trim() !== "";
+  const showRest = resting && rest != null;
+  const showInput = !showRest && active != null;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      className,
+      style: { position: "relative", width: 390, backgroundColor: PAGE_BG3 },
+      accessibilityRole: "main",
+      "aria-label": title,
+      testID: "active-workout-page",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: { padding: 16, gap: 14 }, testID: "active-workout-page-content", children: [
+          /* @__PURE__ */ jsx(WorkoutHeader, { title, subtitle, progress }),
+          /* @__PURE__ */ jsx(ExerciseList, { groups, focusedId, onToggle: toggleFocus })
+        ] }),
+        (showRest || showInput) && /* @__PURE__ */ jsx(
+          View,
+          {
+            style: { borderTopWidth: 1, borderTopColor: BORDER_DEFAULT5 },
+            testID: "active-workout-page-bottom-bar",
+            children: showRest && rest != null ? /* @__PURE__ */ jsx(
+              RestTimer,
+              {
+                totalSeconds: rest.totalSeconds,
+                elapsedMs: rest.elapsedMs,
+                nextSetInfo: rest.nextSetInfo,
+                onSkip: () => setResting(false),
+                onAddTime: () => void 0,
+                visible: true
+              }
+            ) : active != null && /* @__PURE__ */ jsx(
+              InputBar,
+              {
+                exerciseName: active.name,
+                setNumber: nextSetNumber,
+                totalSets: active.totalPlannedSets,
+                reps,
+                weight,
+                unit: active.unit,
+                onRepsChange: setReps,
+                onWeightChange: setWeight,
+                onRecord: () => {
+                  if (rest != null) setResting(true);
+                },
+                canRecord,
+                visible: true
+              }
+            )
+          }
         )
       ]
     }
@@ -10736,7 +9943,7 @@ var DEFAULT_THRESHOLDS = [
 var ARC_START = 135;
 var ARC_SWEEP = 270;
 var SEGMENTS = 40;
-function clamp014(n) {
+function clamp012(n) {
   if (Number.isNaN(n)) return 0;
   return Math.max(0, Math.min(1, n));
 }
@@ -10768,7 +9975,7 @@ function buildTicks(fill, size, activeColor) {
     };
   });
 }
-function Gauge2({
+function Gauge({
   value,
   min = 0,
   max = 100,
@@ -10781,7 +9988,7 @@ function Gauge2({
   ...props
 }) {
   const span = max - min || 1;
-  const fill = clamp014((value - min) / span);
+  const fill = clamp012((value - min) / span);
   const activeColor = (f) => color ?? bandColor(f, thresholds, min, max);
   const ticks = buildTicks(fill, size, activeColor);
   const displayColor = color ?? bandColor(fill, thresholds, min, max);
@@ -10975,6 +10182,6 @@ function composeValidators(...validators) {
   };
 }
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeText, BaseBadge, BodyMap, BodyMapDetailPanel, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DEFAULT_VOLUME_LANDMARKS, DETAILED_TO_SIMPLE, DataRow, DateTime, DeviationBar, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, EmptyState, ExerciseCard, FormActions, FormField, FormRow, FormSection, Gauge2 as Gauge, HStack, Heading, HelpTip, IconBox, Indicator, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, MUSCLE_DISPLAY_NAMES, MUSCLE_TO_CATEGORY, MUSCLE_TO_SVG_SLUGS, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricGroup, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroup, MuscleGroupChip, Overline, Paragraph, PasswordInput, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, SIMPLE_DISPLAY_NAMES, SIMPLE_TO_DETAILED, Scatter, Section, SectionContent, SectionHeader, Select, SetRow, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SimpleMuscleGroup, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StatusDot, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, Treemap, Typography, VOLUME_STATUS_LABELS, VStack, VelocityStrip, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, alpha, calculateMeanVelocity, calculateVelocityLoss, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getHeatmapColor, getLuminance, getResultColor, getStatusColor, getVelocityZoneColor, getVelocityZoneName, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActiveWorkoutPage, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, BaseBadge, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CapacityBandChart, Caption, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DataRow, DateTime, DeviationBar, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, EXERCISE_DETAIL_TABS, EmptyState, ExerciseCard, ExerciseDetailPage, FormActions, FormField, FormRow, FormSection, Gauge, HStack, Heading, HelpTip, IconBox, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, Metric, MetricGroup, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, Overline, Paragraph, PasswordInput, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, ProgramPlanningPage, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, Scatter, Section, SectionContent, SectionHeader, Select, SetRow, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Spinner, Stack, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, Treemap, Typography, VStack, VelocityStrip, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, alpha, buildBreadcrumbs, calculateMeanVelocity, calculateVelocityLoss, composeValidators, countCompletedSets, createFieldId, deriveExerciseStats, deriveNavLevel, deriveWorkoutProgress, findActiveExercise, findMeso, findWeek, findWorkout, formatDateTime, formatPrescription, formatSignedPct, formatVelocity, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, getVelocityZoneColor, getVelocityZoneName, groupExercises, hasMaxLength, hasMinLength, isEmpty, isValidEmail, roundRpe, roundTempo, roundWeight, rpeColor, statusToCardState, summarizeVbt, toActiveCardProps, toExerciseCardProps, toProgressBarMesos, useTable, useToast, useToolbarButton, validationRules };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map