@titan-design/react-ui 0.12.0 → 0.13.0

package/dist/bodymap.js

@@ -19,6 +19,7 @@ function cn(...inputs) {
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
   white: "#FFFFFF"};
+var alertRedVivid = "#FF4757";
 var greyRamp = {
   50: "#F9F6F3",
   //  L*97.0  W6
@@ -141,12 +142,16 @@ var semanticColorsLight = {
   "brand-primary-light": primitiveRamps.orange[300],
   "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-muted": "rgba(255, 121, 0, 0.30)",
+  "brand-primary-strong": "rgba(255, 121, 0, 0.50)",
   "brand-primary-hover": primitiveRamps.orange[500],
   "brand-primary-active": primitiveRamps.orange[600],
   "brand-secondary": primitiveRamps.cyan[600],
   "brand-secondary-light": primitiveRamps.cyan[500],
   "brand-secondary-dark": primitiveRamps.cyan[700],
   "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-muted": "rgba(48, 123, 155, 0.30)",
+  "brand-secondary-strong": "rgba(48, 123, 155, 0.50)",
   "brand-secondary-hover": primitiveRamps.cyan[700],
   "brand-secondary-active": primitiveRamps.cyan[800],
   // Text on brand backgrounds (on-*)
@@ -157,6 +162,8 @@ var semanticColorsLight = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": primitiveRamps.green[50],
+  "status-success-muted": "rgba(46, 213, 115, 0.30)",
+  "status-success-strong": "rgba(46, 213, 115, 0.50)",
   // Live-session accent — its OWN role, decoupled from success so the two can diverge
   "status-live": primitiveRamps.green[300],
   "status-live-muted": primitiveRamps.green[500],
@@ -164,19 +171,27 @@ var semanticColorsLight = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": primitiveRamps.red[50],
-  "status-error-vivid": primitiveRamps.red[600],
-  // vivid alert red
+  "status-error-muted": "rgba(209, 67, 67, 0.30)",
+  "status-error-strong": "rgba(209, 67, 67, 0.50)",
+  "status-error-vivid": alertRedVivid,
+  // NOT red[600], that is status-error
   "status-error-vivid-light": primitiveRamps.red[500],
   "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-error-vivid-muted": "rgba(255, 71, 87, 0.30)",
+  "status-error-vivid-strong": "rgba(255, 71, 87, 0.50)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
   "status-warning-dark": primitiveRamps.amber[500],
   "status-warning-subtle": primitiveRamps.amber[50],
+  "status-warning-muted": "rgba(249, 180, 21, 0.30)",
+  "status-warning-strong": "rgba(249, 180, 21, 0.50)",
   "status-info": primitiveRamps.blue[500],
   "status-info-light": primitiveRamps.blue[300],
   "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": primitiveRamps.blue[50],
+  "status-info-muted": "rgba(33, 150, 243, 0.30)",
+  "status-info-strong": "rgba(33, 150, 243, 0.50)",
   // Text on status backgrounds (on-status-*)
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -271,7 +286,7 @@ var semanticColorsLight = {
   "interactive-disabled": "rgba(55, 65, 81, 0.12)",
   "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
   // Divider
-  "divider": "#E8E9EB",
+  divider: "#E8E9EB",
   // Avatar default
   "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
@@ -282,12 +297,16 @@ var semanticColorsDark = {
   "brand-primary-light": primitiveRamps.orange[300],
   "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-muted": "rgba(255, 121, 0, 0.30)",
+  "brand-primary-strong": "rgba(255, 121, 0, 0.50)",
   "brand-primary-hover": primitiveRamps.orange[300],
   "brand-primary-active": primitiveRamps.orange[200],
   "brand-secondary": primitiveRamps.cyan[600],
   "brand-secondary-light": primitiveRamps.cyan[500],
   "brand-secondary-dark": primitiveRamps.cyan[700],
   "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-muted": "rgba(48, 123, 155, 0.30)",
+  "brand-secondary-strong": "rgba(48, 123, 155, 0.50)",
   "brand-secondary-hover": primitiveRamps.cyan[500],
   "brand-secondary-active": primitiveRamps.cyan[400],
   // Text on brand backgrounds
@@ -298,6 +317,8 @@ var semanticColorsDark = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  "status-success-muted": "rgba(46, 213, 115, 0.30)",
+  "status-success-strong": "rgba(46, 213, 115, 0.50)",
   // Live-session accent — its OWN role, decoupled from success so the two can diverge
   "status-live": primitiveRamps.green[300],
   "status-live-muted": primitiveRamps.green[500],
@@ -305,18 +326,26 @@ var semanticColorsDark = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": "rgba(209, 67, 67, 0.12)",
-  "status-error-vivid": primitiveRamps.red[600],
+  "status-error-muted": "rgba(209, 67, 67, 0.30)",
+  "status-error-strong": "rgba(209, 67, 67, 0.50)",
+  "status-error-vivid": alertRedVivid,
   "status-error-vivid-light": primitiveRamps.red[500],
   "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-error-vivid-muted": "rgba(255, 71, 87, 0.30)",
+  "status-error-vivid-strong": "rgba(255, 71, 87, 0.50)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
   "status-warning-dark": primitiveRamps.amber[500],
   "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-warning-muted": "rgba(249, 180, 21, 0.30)",
+  "status-warning-strong": "rgba(249, 180, 21, 0.50)",
   "status-info": primitiveRamps.blue[500],
   "status-info-light": primitiveRamps.blue[300],
   "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  "status-info-muted": "rgba(33, 150, 243, 0.30)",
+  "status-info-strong": "rgba(33, 150, 243, 0.50)",
   // Text on status backgrounds
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -456,7 +485,7 @@ var semanticColorsDark = {
   "interactive-disabled": "rgba(255, 255, 255, 0.12)",
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
-  "divider": "rgba(255, 255, 255, 0.09)",
+  divider: "rgba(255, 255, 255, 0.09)",
   // Avatar default
   "avatar-background": greyRamp[700],
   "avatar-text": primitiveColors.white
@@ -470,6 +499,150 @@ function resolveColor(token, mode = "dark") {
   return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
 }
 
+// src/theme/color-utils.ts
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  let r, g, b;
+  if (cleaned.length === 3) {
+    r = parseInt(cleaned[0] + cleaned[0], 16);
+    g = parseInt(cleaned[1] + cleaned[1], 16);
+    b = parseInt(cleaned[2] + cleaned[2], 16);
+  } else if (cleaned.length === 6) {
+    r = parseInt(cleaned.slice(0, 2), 16);
+    g = parseInt(cleaned.slice(2, 4), 16);
+    b = parseInt(cleaned.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+  return { r, g, b };
+}
+
+// src/theme/materials.ts
+var c = getSemanticColors("dark");
+function insetWell(tone = c["surface-input"]) {
+  return {
+    backgroundColor: tone,
+    boxShadow: "inset 0 2px 6px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.12)"
+  };
+}
+var FLOATING_LIFT_MIN = 4;
+var LIFT_RIM_ALPHA = { dark: 0.12, light: 0.9 };
+var AMBIENT = {
+  1: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 2, blur: 6, alpha: 0.3 }
+  ],
+  2: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 4, blur: 12, alpha: 0.32 }
+  ],
+  3: [
+    { y: 2, blur: 4, alpha: 0.35 },
+    { y: 8, blur: 22, alpha: 0.35 }
+  ],
+  4: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 10, blur: 24, alpha: 0.3 },
+    { y: 24, blur: 48, alpha: 0.2 }
+  ],
+  5: [
+    { y: 2, blur: 4, alpha: 0.4 },
+    { y: 16, blur: 32, alpha: 0.35 },
+    { y: 32, blur: 64, alpha: 0.25 }
+  ]
+};
+var AMBIENT_ALPHA_SCALE = { dark: 1, light: 0.4 };
+function ambientLayers(step, mode) {
+  const scale = AMBIENT_ALPHA_SCALE[mode];
+  return AMBIENT[step].map(
+    ({ y, blur, alpha: alpha2 }) => `0 ${y}px ${blur}px rgba(0,0,0,${(alpha2 * scale).toFixed(2)})`
+  );
+}
+function liftShadow(step, mode = "dark", opts = {}) {
+  const rim = opts.rim ?? LIFT_RIM_ALPHA[mode];
+  const layers = ambientLayers(step, mode);
+  if (rim > 0) layers.unshift(`inset 0 1px 0 rgba(255,255,255,${rim.toFixed(2)})`);
+  return layers.join(", ");
+}
+function liftStyle(step, mode = "dark", opts = {}) {
+  const deepest = AMBIENT[step][AMBIENT[step].length - 1];
+  return reactNative.Platform.select({
+    web: { boxShadow: liftShadow(step, mode, opts) },
+    default: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: Math.round(deepest.y / 2) },
+      shadowOpacity: deepest.alpha * AMBIENT_ALPHA_SCALE[mode],
+      shadowRadius: deepest.blur / 2,
+      elevation: step
+    }
+  });
+}
+
+// src/theme/surface-planes.ts
+var SURFACE_LEVEL_TOKEN = {
+  frame: "background-frame",
+  background: "background-base",
+  base: "surface-base",
+  elevated: "surface-elevated",
+  raised: "surface-raised",
+  overlay: "surface-overlay"
+};
+var PLANE_ORDER = [
+  "frame",
+  "background",
+  "base",
+  "elevated",
+  "raised",
+  "overlay"
+];
+function surfaceBackground(level, mode) {
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
+}
+function stepPlane(from, delta) {
+  const index = PLANE_ORDER.indexOf(from);
+  const clamped = Math.min(PLANE_ORDER.length - 1, Math.max(0, index + delta));
+  return PLANE_ORDER[clamped];
+}
+function pressedLevel(parent) {
+  return stepPlane(parent, -1);
+}
+function raisedLevel(parent, steps) {
+  return stepPlane(parent, Math.max(0, steps));
+}
+
+// src/theme/elevation.ts
+var FLOATING_ELEVATION_MIN = FLOATING_LIFT_MIN;
+function getPressedRecessShadow(fillColor, _mode = "dark") {
+  const { boxShadow } = insetWell(fillColor);
+  return reactNative.Platform.select({
+    web: { boxShadow },
+    default: {}
+  });
+}
+var glowConfig = {
+  tight: { blur: 4, spread: 0, opacity: 0.4 },
+  subtle: { blur: 12, spread: 0, opacity: 0.25 },
+  medium: { blur: 20, spread: 2, opacity: 0.4 },
+  strong: { blur: 30, spread: 4, opacity: 0.55 }
+};
+function getGlowShadow(color, intensity = "medium") {
+  const config = glowConfig[intensity];
+  const rgb = hexToRgb(color);
+  if (!rgb) return {};
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `0 0 ${config.blur}px ${config.spread}px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${config.opacity})`
+    },
+    default: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: config.opacity,
+      shadowRadius: config.blur / 2,
+      elevation: 0
+    }
+  });
+}
+
 // src/theme/workout-tokens.ts
 var WORKOUT_TOKENS = {
   // BodyMap volume heatmap — the canonical `divergingScale` (under → optimal →
@@ -797,7 +970,8 @@ function BodyMap({
             alignSelf: "center",
             transform: [{ scale }]
           },
-          glowColor ? { boxShadow: `0 0 14px 2px ${glowColor}` } : void 0
+          // The highlight halo is emphasis, not depth.
+          glowColor ? getGlowShadow(glowColor, "medium") : void 0
         ],
         "aria-hidden": true,
         accessibilityElementsHidden: true,
@@ -959,6 +1133,17 @@ var colorStyles = {
   info: "bg-status-info",
   "error-vivid": "bg-status-error-vivid"
 };
+var t = getSemanticColors("dark");
+var glowColors = {
+  default: greyRamp[500],
+  primary: t["brand-primary"],
+  success: t["status-success"],
+  live: t["status-live"],
+  error: t["status-error"],
+  warning: t["status-warning"],
+  info: t["status-info"],
+  "error-vivid": t["status-error-vivid"]
+};
 function Indicator({
   size = "sm",
   color = "default",
@@ -996,11 +1181,7 @@ function Indicator({
       )
     ] });
   }
-  const dynamicStyle = {
-    ...typeof style === "object" ? style : {},
-    ...colorStyle ?? {},
-    ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
-  };
+  const glowStyle = glow ? getGlowShadow(customColor ?? glowColors[color], "subtle") : null;
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
@@ -1010,54 +1191,165 @@ function Indicator({
         colorClass,
         pulseMode === "opacity" && "animate-pulse",
         ring && "border-2 border-background-base",
-        glow && !customColor && (color === "success" || color === "live") && "shadow-[0_0_6px_rgba(46,213,115,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)]",
-        glow && !customColor && color === "error-vivid" && "shadow-[0_0_6px_rgba(255,71,87,0.6)]",
         className
       ),
-      style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
+      style: [style, colorStyle, glowStyle],
       ...props
     }
   );
 }
-
-// src/components/ui/badge/Badge.tsx
-var variantColorStyles = {
+var colorToTone = {
+  default: "neutral",
+  primary: "brand",
+  secondary: "brand-secondary",
+  success: "success",
+  error: "error",
+  warning: "warning",
+  info: "info"
+};
+var toneStyles = {
   solid: {
-    default: "bg-hairline-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"
+    neutral: "bg-hairline-strong border-transparent text-text-inverse",
+    brand: "bg-brand-primary border-transparent text-text-inverse",
+    "brand-secondary": "bg-brand-secondary border-transparent text-text-inverse",
+    success: "bg-status-success border-transparent text-text-inverse",
+    warning: "bg-status-warning border-transparent text-text-inverse",
+    error: "bg-status-error border-transparent text-text-inverse",
+    info: "bg-status-info border-transparent 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"
+    // Alpha-white rather than a ramp step: a pill sits on whatever plane its
+    // host is, and an alpha fill composites by the same amount on all of them.
+    // A `surface-*` fill would vanish on the plane it names. Borderless like the
+    // six coloured tones — the fill carries the capsule, not a ring.
+    neutral: "bg-hairline-subtle border-transparent text-text-secondary",
+    brand: "bg-brand-primary-subtle border-transparent text-brand-primary",
+    "brand-secondary": "bg-brand-secondary-subtle border-transparent text-brand-secondary",
+    success: "bg-status-success-subtle border-transparent text-status-success",
+    warning: "bg-status-warning-subtle border-transparent text-status-warning",
+    error: "bg-status-error-subtle border-transparent text-status-error",
+    info: "bg-status-info-subtle border-transparent text-status-info"
   },
   outline: {
-    default: "border border-hairline-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"
+    neutral: "border-hairline text-text-secondary",
+    brand: "border-brand-primary text-brand-primary",
+    "brand-secondary": "border-brand-secondary text-brand-secondary",
+    success: "border-status-success text-status-success",
+    warning: "border-status-warning text-status-warning",
+    error: "border-status-error text-status-error",
+    info: "border-status-info text-status-info"
   }
 };
+var dotToneStyles = {
+  neutral: "bg-text-tertiary",
+  brand: "bg-brand-primary",
+  "brand-secondary": "bg-brand-secondary",
+  success: "bg-status-success",
+  warning: "bg-status-warning",
+  error: "bg-status-error",
+  info: "bg-status-info"
+};
 var sizeStyles2 = {
-  sm: "px-1.5 py-0.5 text-xs",
-  md: "px-2 py-0.5 text-xs",
-  lg: "px-2.5 py-1 text-sm"
+  xs: { container: "px-1 py-px", text: "text-3xs" },
+  sm: { container: "px-2 py-0.5", text: "text-2xs" },
+  md: { container: "px-2.5 py-1", text: "text-xs" },
+  lg: { container: "px-3 py-1.5", text: "text-sm" },
+  xl: { container: "px-4 py-2", text: "text-base" }
+};
+function PillDot({ tone, testID }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className: cn("w-1.5 h-1.5 rounded-full shrink-0", dotToneStyles[tone]),
+      accessibilityElementsHidden: true,
+      testID: testID ? `${testID}-dot` : "pill-dot"
+    }
+  );
+}
+function containerClasses(p, tone) {
+  return cn(
+    "flex-row items-center gap-1 border self-start shrink-0",
+    p.rounded === false ? "rounded" : "rounded-full",
+    toneStyles[p.variant ?? "subtle"][tone],
+    sizeStyles2[p.size ?? "sm"].container,
+    p.isDisabled && "opacity-50",
+    p.className
+  );
+}
+function PillContent({ tone, ...p }) {
+  const textClasses = cn(
+    "font-heading font-semibold text-inherit",
+    sizeStyles2[p.size ?? "sm"].text,
+    p.textClassName
+  );
+  const slot = p.leading ?? p.leftElement;
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    slot === "dot" ? /* @__PURE__ */ jsx(PillDot, { tone: p.dotTone ?? tone, testID: p.testID }) : slot,
+    typeof p.children === "string" ? /* @__PURE__ */ jsx(reactNative.Text, { className: textClasses, children: p.children }) : p.children,
+    p.trailing
+  ] });
+}
+function Pill(props) {
+  const {
+    variant,
+    tone,
+    color,
+    size,
+    rounded,
+    leading,
+    dotTone,
+    leftElement,
+    trailing,
+    onPress,
+    isDisabled,
+    className,
+    textClassName,
+    children,
+    ...viewProps
+  } = props;
+  const resolvedTone = tone ?? (color ? colorToTone[color] : "neutral");
+  const classes = containerClasses(props, resolvedTone);
+  const content = /* @__PURE__ */ jsx(PillContent, { ...props, tone: resolvedTone });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress,
+        disabled: isDisabled,
+        accessibilityRole: "button",
+        className: classes,
+        ...viewProps,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(reactNative.View, { className: classes, ...viewProps, children: content });
+}
+
+// src/components/ui/badge/Badge.tsx
+var colorToTone2 = {
+  default: "neutral",
+  primary: "brand",
+  secondary: "brand-secondary",
+  success: "success",
+  error: "error",
+  warning: "warning",
+  info: "info"
+};
+var sizeStyles3 = {
+  sm: "px-1.5 py-0.5",
+  md: "px-2 py-0.5",
+  lg: "px-2.5 py-1"
 };
+var textSizeStyles = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm"
+};
+function dotIndicatorColor(color, dotColor) {
+  if (dotColor) return dotColor;
+  return color === "default" || color === "secondary" ? "default" : color;
+}
 function Badge({
   variant = "subtle",
   color = "default",
@@ -1068,31 +1360,116 @@ function Badge({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
-    reactNative.View,
+  return /* @__PURE__ */ jsx(
+    Pill,
     {
+      variant,
+      tone: colorToTone2[color],
+      leading: dot ? /* @__PURE__ */ jsx(Indicator, { size: "xs", color: dotIndicatorColor(color, dotColor), className: "mr-0.5" }) : void 0,
       className: cn(
-        "inline-flex items-center justify-center rounded-full font-medium",
-        variantColorStyles[variant][color],
-        sizeStyles2[size],
+        "justify-center self-auto gap-0",
+        variant === "outline" ? "border" : "border-0",
+        sizeStyles3[size],
         className
       ),
+      textClassName: cn("font-sans font-medium", textSizeStyles[size]),
       ...props,
-      children: [
-        dot && /* @__PURE__ */ jsx(
-          Indicator,
-          {
-            size: "xs",
-            color: dotColor ?? (color === "default" || color === "secondary" ? "default" : color),
-            className: "mr-0.5"
-          }
-        ),
-        typeof children === "string" ? /* @__PURE__ */ jsx(reactNative.Text, { className: "text-inherit font-medium", children }) : children
-      ]
+      children
+    }
+  );
+}
+var variantStyles = {
+  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",
+  h4: "font-heading text-2xl font-bold leading-tight",
+  h5: "font-heading text-xl font-semibold leading-tight",
+  h6: "font-heading text-lg font-semibold leading-tight",
+  body1: "font-body text-base font-normal leading-normal",
+  body2: "font-body text-sm font-normal leading-normal",
+  subtitle1: "font-body text-base font-medium leading-relaxed",
+  subtitle2: "font-body text-sm font-medium leading-normal",
+  caption: "font-body text-xs font-normal leading-loose",
+  overline: "font-body text-xs font-semibold uppercase tracking-widest leading-relaxed",
+  button: "font-sans text-sm font-semibold leading-relaxed",
+  // Monospace technical readouts (clocks, ids, metrics) and their all-caps label form.
+  mono: "font-mono text-xs font-normal leading-normal",
+  monoLabel: "font-mono text-xs font-bold uppercase tracking-wide leading-normal",
+  // The sans (Inter) label pair: 10px for dense table/column headers, 12px bold for
+  // badge and row labels. `overline` is the 12px font-body form of the same idea.
+  microLabel: "font-sans text-2xs font-semibold uppercase tracking-widest leading-normal",
+  boldLabel: "font-sans text-xs font-bold leading-normal"
+};
+var colorStyles2 = {
+  primary: "text-text-primary",
+  secondary: "text-text-secondary",
+  tertiary: "text-text-tertiary",
+  disabled: "text-text-disabled",
+  inverse: "text-text-inverse",
+  success: "text-status-success",
+  error: "text-status-error",
+  warning: "text-status-warning",
+  info: "text-status-info",
+  inherit: ""
+  // No color class, inherit from parent
+};
+var alignStyles = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify"
+};
+var headingVariants = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var marginBottomStyles = {
+  none: "",
+  sm: "mb-1",
+  md: "mb-2",
+  lg: "mb-4"
+};
+function Typography({
+  variant = "body1",
+  color = "primary",
+  align,
+  truncate = false,
+  noWrap = false,
+  // deprecated, kept for backward compatibility
+  marginBottom,
+  gutterBottom = false,
+  // deprecated, kept for backward compatibility
+  maxLines,
+  className,
+  children,
+  ...props
+}) {
+  const isHeading = headingVariants.includes(variant);
+  const shouldTruncate = truncate || noWrap;
+  const mb = marginBottom || (gutterBottom ? "md" : "none");
+  let numLines;
+  if (maxLines) {
+    numLines = maxLines;
+  } else if (shouldTruncate) {
+    numLines = 1;
+  }
+  return /* @__PURE__ */ jsx(
+    reactNative.Text,
+    {
+      accessibilityRole: isHeading ? "header" : "text",
+      numberOfLines: numLines,
+      className: cn(
+        variantStyles[variant],
+        color !== "inherit" && colorStyles2[color],
+        align && alignStyles[align],
+        shouldTruncate && "truncate",
+        marginBottomStyles[mb],
+        className
+      ),
+      ...props,
+      children
     }
   );
 }
-var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
+
+// src/components/custom/Workout/Sparkline.tsx
 function normalizeData(data, height) {
   if (data.length === 0) return [];
   const min = Math.min(...data);
@@ -1129,7 +1506,7 @@ function Sparkline({
       }
     );
   }
-  const resolvedColor = color ?? BRAND_PRIMARY2;
+  const resolvedColor = color ?? resolveColor("brand-primary");
   const normalized = normalizeData(data, height);
   const stepX = data.length > 1 ? width / (data.length - 1) : 0;
   const dotSize = 3;
@@ -1169,14 +1546,19 @@ function Sparkline({
               ],
               accessibilityElementsHidden: true,
               testID: `sparkline-reference-${i}`,
-              children: line.label && /* @__PURE__ */ jsx(
-                reactNative.Text,
+              children: line.label && // `3xs` (9px) is the scale floor; the label was 7px, which is off it
+              // entirely (TOKENS.md §4). The line box stays unpinned, as the raw
+              // <Text> this replaced was, so the absolute offset still lands.
+              /* @__PURE__ */ jsx(
+                Typography,
                 {
+                  variant: "caption",
+                  color: "inherit",
+                  className: "text-3xs leading-[normal]",
                   style: {
                     position: "absolute",
                     right: 0,
                     top: -10,
-                    fontSize: 7,
                     color: line.color,
                     opacity: 1
                   },
@@ -1245,9 +1627,9 @@ function Sparkline({
 }
 
 // src/components/custom/Workout/BodyMapDetailPanel.tsx
-var t = getSemanticColors("dark");
-var BRAND_PRIMARY3 = t["brand-primary"];
-var VOLUME_GRADIENT = `linear-gradient(90deg, ${t["status-info"]} 0%, ${t["status-success"]} 50%, ${t["status-error"]} 100%)`;
+var t2 = getSemanticColors("dark");
+var BRAND_PRIMARY2 = t2["brand-primary"];
+var VOLUME_GRADIENT = `linear-gradient(90deg, ${t2["status-info"]} 0%, ${t2["status-success"]} 50%, ${t2["status-error"]} 100%)`;
 var SLIDE_OFFSET = 400;
 var BACKDROP_OPACITY = 0.4;
 var STATUS_BADGE_COLOR = {
@@ -1312,7 +1694,14 @@ function BodyMapDetailPanel({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
-      style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "flex-end" },
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: "flex-end"
+      },
       testID: "body-map-detail-panel-root",
       children: [
         /* @__PURE__ */ jsx(
@@ -1447,8 +1836,22 @@ function BodyMapDetailPanel({
                           style: { marginBottom: 6 },
                           accessibilityElementsHidden: true,
                           children: [
-                            /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MEV ${landmarks.mev}` }),
-                            /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MRV ${landmarks.mrv}` })
+                            /* @__PURE__ */ jsx(
+                              reactNative.Text,
+                              {
+                                className: "text-text-tertiary",
+                                style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+                                children: `MEV ${landmarks.mev}`
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              reactNative.Text,
+                              {
+                                className: "text-text-tertiary",
+                                style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+                                children: `MRV ${landmarks.mrv}`
+                              }
+                            )
                           ]
                         }
                       ),
@@ -1483,7 +1886,8 @@ function BodyMapDetailPanel({
                                   height: 14,
                                   borderRadius: 7,
                                   borderWidth: 2,
-                                  boxShadow: "0 0 4px rgba(0,0,0,0.5)"
+                                  // A knob resting on the volume bar: lift, with the ring as its edge.
+                                  ...liftStyle(1, "dark", { rim: 0 })
                                 },
                                 accessibilityElementsHidden: true,
                                 testID: "body-map-detail-panel-volume-marker"
@@ -1566,7 +1970,12 @@ function BodyMapDetailPanel({
                               reactNative.Text,
                               {
                                 className: "text-text-primary",
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+                                style: {
+                                  flex: 1,
+                                  fontSize: 13,
+                                  fontFamily: "Inter, sans-serif",
+                                  fontWeight: "600"
+                                },
                                 testID: `body-map-detail-panel-contributing-${index}-name`,
                                 children: exercise.name
                               }
@@ -1610,7 +2019,12 @@ function BodyMapDetailPanel({
                               reactNative.Text,
                               {
                                 className: "text-text-primary",
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+                                style: {
+                                  flex: 1,
+                                  fontSize: 13,
+                                  fontFamily: "Inter, sans-serif",
+                                  fontWeight: "600"
+                                },
                                 testID: `body-map-detail-panel-upcoming-${index}-name`,
                                 children: exercise.name
                               }
@@ -1645,7 +2059,18 @@ function BodyMapDetailPanel({
                           borderColor: "rgba(255,121,0,0.3)"
                         },
                         testID: "body-map-detail-panel-view-exercises",
-                        children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "700", color: BRAND_PRIMARY3 }, children: "View exercises" })
+                        children: /* @__PURE__ */ jsx(
+                          reactNative.Text,
+                          {
+                            style: {
+                              fontSize: 13,
+                              fontFamily: "Inter, sans-serif",
+                              fontWeight: "700",
+                              color: BRAND_PRIMARY2
+                            },
+                            children: "View exercises"
+                          }
+                        )
                       }
                     )
                   ]
@@ -1658,439 +2083,81 @@ function BodyMapDetailPanel({
     }
   );
 }
-
-// src/theme/color-utils.ts
-function hexToRgb(hex) {
-  const cleaned = hex.replace("#", "");
-  let r, g, b;
-  if (cleaned.length === 3) {
-    r = parseInt(cleaned[0] + cleaned[0], 16);
-    g = parseInt(cleaned[1] + cleaned[1], 16);
-    b = parseInt(cleaned[2] + cleaned[2], 16);
-  } else if (cleaned.length === 6) {
-    r = parseInt(cleaned.slice(0, 2), 16);
-    g = parseInt(cleaned.slice(2, 4), 16);
-    b = parseInt(cleaned.slice(4, 6), 16);
-  } else {
-    return null;
-  }
-  return { r, g, b };
-}
-function rgbToHsv(r, g, b) {
-  const rNorm = r / 255;
-  const gNorm = g / 255;
-  const bNorm = b / 255;
-  const max = Math.max(rNorm, gNorm, bNorm);
-  const min = Math.min(rNorm, gNorm, bNorm);
-  const delta = max - min;
-  const v = max;
-  const s = max === 0 ? 0 : delta / max;
-  let h = 0;
-  if (delta !== 0) {
-    if (max === rNorm) {
-      h = 60 * ((gNorm - bNorm) / delta % 6);
-    } else if (max === gNorm) {
-      h = 60 * ((bNorm - rNorm) / delta + 2);
-    } else {
-      h = 60 * ((rNorm - gNorm) / delta + 4);
-    }
-  }
-  if (h < 0) h += 360;
-  return { h, s, v };
-}
-function hsvToRgb(h, s, v) {
-  const c = v * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = v - c;
-  let rPrime, gPrime, bPrime;
-  if (h >= 0 && h < 60) {
-    rPrime = c;
-    gPrime = x;
-    bPrime = 0;
-  } else if (h >= 60 && h < 120) {
-    rPrime = x;
-    gPrime = c;
-    bPrime = 0;
-  } else if (h >= 120 && h < 180) {
-    rPrime = 0;
-    gPrime = c;
-    bPrime = x;
-  } else if (h >= 180 && h < 240) {
-    rPrime = 0;
-    gPrime = x;
-    bPrime = c;
-  } else if (h >= 240 && h < 300) {
-    rPrime = x;
-    gPrime = 0;
-    bPrime = c;
-  } else {
-    rPrime = c;
-    gPrime = 0;
-    bPrime = x;
-  }
-  return {
-    r: Math.round((rPrime + m) * 255),
-    g: Math.round((gPrime + m) * 255),
-    b: Math.round((bPrime + m) * 255)
-  };
+var DEFAULT_CONTEXT = { mode: "dark", level: "base" };
+var SurfaceContext = react.createContext(DEFAULT_CONTEXT);
+function useSurface() {
+  return react.useContext(SurfaceContext);
 }
-function rgbToHex(r, g, b) {
-  const toHex = (n) => {
-    const clamped = Math.max(0, Math.min(255, Math.round(n)));
-    return clamped.toString(16).padStart(2, "0");
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function lighten(hex, amount = 0.1) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const newV = Math.min(1, hsv.v + amount);
-  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
-  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
-}
-var elevationSystem = {
-  // Deep inset (recessed input fields, deeply pressed buttons)
-  [-2]: {
-    name: "deep-inset",
-    colorAdjustment: 0,
-    shadowIntensity: "strong",
-    shadowStyle: "pressed",
-    description: "Deeply recessed elements (e.g., input fields, deeply pressed buttons)"
-  },
-  // Shallow inset (pressed buttons, sunken panels)
-  [-1]: {
-    name: "inset",
-    colorAdjustment: 0,
-    shadowIntensity: "medium",
-    shadowStyle: "pressed",
-    description: "Shallow inset elements (e.g., pressed buttons, sunken panels within cards)"
-  },
-  // Base level (page background, default surface)
-  [0]: {
-    name: "base",
-    colorAdjustment: 0,
-    shadowIntensity: "subtle",
-    shadowStyle: "raised",
-    description: "Base surface level (page background, default containers)"
-  },
-  // Level 1: Subtle elevation (outline cards, subtle containers)
-  [1]: {
-    name: "subtle",
-    // The whole ladder was re-spaced in TD-07.16. It used to run
-    // 0.01/0.02/0.04/0.06/0.08, where the first step was ~2 RGB values — under
-    // the perceptual floor, so level 1 existed in the type system and nowhere on
-    // screen. With drop-shadow now gated off below FLOATING_ELEVATION_MIN, TONE
-    // is the only thing separating 0-3, so every step has to actually land.
-    // Even 0.025 spacing, verified in elevation.test.ts as ΔL* > 1 per step.
-    colorAdjustment: 0.025,
-    shadowIntensity: "subtle",
-    shadowStyle: "raised",
-    description: "Subtle elevation (outline cards, subtle containers)"
-  },
-  // Level 2: Standard elevation (default cards, buttons)
-  [2]: {
-    name: "standard",
-    colorAdjustment: 0.05,
-    shadowIntensity: "medium",
-    shadowStyle: "raised",
-    description: "Standard elevation (default cards, raised buttons)"
-  },
-  // Level 3: Prominent elevation (important cards, modals)
-  [3]: {
-    name: "prominent",
-    colorAdjustment: 0.075,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "Prominent elevation (important cards, modals, dropdowns)"
-  },
-  // Level 4: High elevation (overlays, popovers)
-  [4]: {
-    name: "high",
-    colorAdjustment: 0.1,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "High elevation (overlays, popovers, tooltips)"
-  },
-  // Level 5: Floating (toasts, floating action buttons)
-  [5]: {
-    name: "floating",
-    colorAdjustment: 0.13,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "Floating elevation (toasts, floating action buttons, highest z-index)"
-  }
-};
-function calculateRimLightColor(baseColor, level) {
-  const rgb = hexToRgb(baseColor);
-  if (!rgb) {
-    return "rgba(255, 255, 255, 0.5)";
-  }
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const isLight = hsv.v > 0.6;
-  const isSaturated = hsv.s > 0.3;
-  const absLevel = Math.abs(level);
-  const opacityBoost = Math.max(0, (absLevel - 1) * 0.05);
-  if (isSaturated) {
-    const rimLightValue = 0.95;
-    const rimLightRgb = hsvToRgb(hsv.h, hsv.s * 0.3, rimLightValue);
-    const baseOpacity = isLight ? 0.9 : 0.5;
-    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
-    return `rgba(${rimLightRgb.r}, ${rimLightRgb.g}, ${rimLightRgb.b}, ${finalOpacity.toFixed(2)})`;
-  } else {
-    const baseOpacity = isLight ? 0.9 : 0.12;
-    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
-    return `rgba(255, 255, 255, ${finalOpacity.toFixed(2)})`;
-  }
+function recessDepth(inherited, planesDown, mode) {
+  let plane = inherited.level;
+  for (let i = 0; i < planesDown; i++) plane = pressedLevel(plane);
+  const backgroundColor = surfaceBackground(plane, mode);
+  return { plane, backgroundColor, depthStyle: getPressedRecessShadow(backgroundColor, mode) };
 }
-function calculateDarkShadowColors(surfaceColor) {
-  const rgb = hexToRgb(surfaceColor);
-  if (!rgb) {
-    return {
-      dark: "rgba(0, 0, 0, 0.3)",
-      darker: "rgba(0, 0, 0, 0.4)"
-    };
+function resolveSurfaceDepth(inherited, props) {
+  const mode = props.theme ?? inherited.mode;
+  const elevation = props.elevation ?? 0;
+  if (props.pressed || elevation < 0) {
+    const down = props.pressed ? 1 : -elevation;
+    return { mode, step: 0, lifted: false, ...recessDepth(inherited, down, mode) };
   }
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const isLight = hsv.v > 0.6;
-  const isSaturated = hsv.s > 0.3;
-  if (isSaturated) {
-    const darkShadowValue = 0.15;
-    const darkShadowRgb = hsvToRgb(hsv.h, hsv.s, darkShadowValue);
-    if (isLight) {
-      return {
-        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.3)`,
-        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.4)`
-      };
-    } else {
-      return {
-        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.5)`,
-        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.6)`
-      };
-    }
-  } else {
-    if (isLight) {
-      return {
-        dark: "rgba(0, 0, 0, 0.2)",
-        darker: "rgba(0, 0, 0, 0.3)"
-      };
-    } else {
-      return {
-        dark: "rgba(0, 0, 0, 0.5)",
-        darker: "rgba(0, 0, 0, 0.6)"
-      };
-    }
-  }
-}
-function getRimLightConfig() {
-  return {
-    offset: 1,
-    // Fixed 1px for crisp rim
-    blur: 1
-    // Tight blur for crisp edge
-  };
-}
-var elevationSurfaceCache = /* @__PURE__ */ new Map();
-var MAX_CACHE_SIZE = 100;
-function getCacheKey(baseColor, level, theme) {
-  return `${baseColor}-${level}-${theme}`;
+  const step = props.level != null ? 0 : props.raise ?? elevation;
+  const floating = step >= FLOATING_ELEVATION_MIN;
+  const plane = props.level ?? (floating ? "overlay" : raisedLevel(inherited.level, step));
+  const lifted = props.lift ?? step > 0;
+  const liftStep = Math.max(1, Math.min(5, step));
+  const depthStyle = lifted ? liftStyle(liftStep, mode, props.liftOptions) : {};
+  return { mode, plane, backgroundColor: surfaceBackground(plane, mode), depthStyle, step, lifted };
 }
-function calculateElevationSurface(baseColor, level, theme) {
-  const config = elevationSystem[level];
-  if (config.colorAdjustment === 0) {
-    return baseColor;
-  }
-  if (level < 0) {
-    return baseColor;
-  }
-  return lighten(baseColor, config.colorAdjustment);
-}
-function getElevationSurface(baseColor, level, theme) {
-  const cacheKey = getCacheKey(baseColor, level, theme);
-  if (elevationSurfaceCache.has(cacheKey)) {
-    return elevationSurfaceCache.get(cacheKey);
-  }
-  const result = calculateElevationSurface(baseColor, level);
-  if (elevationSurfaceCache.size >= MAX_CACHE_SIZE) {
-    const firstKey = elevationSurfaceCache.keys().next().value;
-    elevationSurfaceCache.delete(firstKey);
-  }
-  elevationSurfaceCache.set(cacheKey, result);
-  return result;
-}
-var elevationShadowCache = /* @__PURE__ */ new Map();
-var MAX_SHADOW_CACHE_SIZE = 50;
-function getShadowCacheKey(baseColor, level, theme, isHovered) {
-  return `${baseColor}-${level}-${theme}-${isHovered}`;
-}
-function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
-  const config = elevationSystem[level];
-  if (level === 0) {
-    return {};
-  }
-  const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
-  const rimLightColor = calculateRimLightColor(baseColor, level);
-  const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
-  const intensityConfig = {
-    subtle: { offset: 1, blur: 2 },
-    medium: { offset: 2, blur: 4 },
-    strong: { offset: 2, blur: 5 }
-  };
-  const { offset, blur } = intensityConfig[config.shadowIntensity];
-  const rimConfig = getRimLightConfig();
-  if (config.shadowStyle === "pressed") {
-    if (isHovered) {
-      const hoverOffset = Math.max(1, Math.round(offset / 2));
-      const hoverBlur = Math.max(1, Math.round(blur / 2));
-      return reactNative.Platform.select({
-        web: {
-          boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-        },
-        default: {
-          shadowOpacity: 0,
-          elevation: 0
-        }
-      });
-    }
-    return reactNative.Platform.select({
-      web: {
-        boxShadow: `inset ${offset}px ${offset}px ${blur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-      },
-      default: {
-        shadowOpacity: 0,
-        elevation: 0
-      }
-    });
-  } else {
-    if (isHovered) {
-      const hoverOffset = Math.max(1, Math.round(offset / 2));
-      const hoverBlur = Math.max(1, Math.round(blur / 2));
-      return reactNative.Platform.select({
-        web: {
-          boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-        },
-        default: {
-          shadowColor: "#000",
-          shadowOffset: { width: hoverOffset, height: hoverOffset },
-          shadowOpacity: 0.2,
-          shadowRadius: hoverBlur / 2,
-          elevation: hoverOffset
-        }
-      });
-    }
-    return reactNative.Platform.select({
-      web: {
-        boxShadow: `${offset}px ${offset}px ${blur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-      },
-      default: {
-        shadowColor: "#000",
-        shadowOffset: { width: offset, height: offset },
-        shadowOpacity: 0.3,
-        shadowRadius: blur / 2,
-        elevation: offset
-      }
-    });
-  }
-}
-var FLOATING_ELEVATION_MIN = 4;
-function getElevationShadow(baseColor, level, theme, isHovered = false) {
-  const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
-  if (elevationShadowCache.has(cacheKey)) {
-    return elevationShadowCache.get(cacheKey);
-  }
-  const result = level > 0 && level < FLOATING_ELEVATION_MIN ? {} : calculateElevationShadow(baseColor, level, theme, isHovered);
-  if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
-    const firstKey = elevationShadowCache.keys().next().value;
-    elevationShadowCache.delete(firstKey);
-  }
-  elevationShadowCache.set(cacheKey, result);
-  return result;
-}
-function getBaseSurfaceColor(theme) {
-  return theme === "light" ? semanticColorsLight["surface-raised"] : semanticColorsDark["surface-elevated"];
-}
-var componentElevationRanges = {
-  button: {
-    allowed: [2],
-    default: 2,
-    hover: 3
-  },
-  card: {
-    allowed: [1, 2, 3],
-    default: 2,
-    hover: 3
-  },
-  input: {
-    allowed: [-2, -1, 0],
-    default: -1
-  },
-  overlay: {
-    allowed: [4, 5],
-    default: 4
-  }
-};
-function getValidatedElevation(component, requested) {
-  const range = componentElevationRanges[component];
-  if (range.allowed.includes(requested)) {
-    return requested;
-  }
-  const sorted = [...range.allowed].sort((a, b) => a - b);
-  if (requested < sorted[0]) return sorted[0];
-  if (requested > sorted[sorted.length - 1]) return sorted[sorted.length - 1];
-  return sorted.reduce(
-    (prev, curr) => Math.abs(curr - requested) < Math.abs(prev - requested) ? curr : prev
+function useResolvedSurface(props) {
+  const inherited = useSurface();
+  const { level, raise, elevation, pressed, lift, liftOptions, theme } = props;
+  return react.useMemo(
+    () => resolveSurfaceDepth(inherited, {
+      level,
+      raise,
+      elevation,
+      pressed,
+      lift,
+      liftOptions,
+      theme
+    }),
+    [inherited, level, raise, elevation, pressed, lift, liftOptions, theme]
   );
 }
-function getTheme() {
-  if (typeof document === "undefined") return "dark";
-  return document.documentElement.classList.contains("light") ? "light" : "dark";
-}
-var listeners = [];
-function subscribe(listener) {
-  listeners = [...listeners, listener];
-  if (typeof document !== "undefined" && listeners.length === 1) {
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === "attributes" && mutation.attributeName === "class") {
-          listeners.forEach((l) => l());
-        }
-      }
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"]
-    });
-    subscribe._observer = observer;
-  }
-  return () => {
-    listeners = listeners.filter((l) => l !== listener);
-    if (listeners.length === 0 && subscribe._observer) {
-      subscribe._observer.disconnect();
-      subscribe._observer = null;
-    }
-  };
-}
-function getSnapshot() {
-  return getTheme();
-}
-function getServerSnapshot() {
-  return "dark";
-}
-function useTheme() {
-  return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
 
 // src/components/ui/card/Card.tsx
-var variantStyles = {
+var EDGE_CLASS = {
   elevated: "",
-  // Will be set dynamically via elevation system
-  outline: "border-2 border-hairline-strong",
-  // Thicker border with stronger contrast
+  accent: "",
   filled: "",
-  // Will be set dynamically via elevation system
-  accent: "border border-hairline",
+  outline: "border border-hairline-strong",
   subtle: "border border-hairline-subtle"
 };
+var LIFTED = {
+  elevated: true,
+  accent: true,
+  filled: false,
+  outline: false,
+  subtle: false
+};
+var STAYS_ON_HOST = {
+  elevated: false,
+  accent: false,
+  filled: false,
+  outline: true,
+  subtle: true
+};
+function useCardDepth(variant, elevation, hovered) {
+  const raise = STAYS_ON_HOST[variant] ? void 0 : elevation;
+  const resolved = useResolvedSurface({ raise, lift: LIFTED[variant] });
+  const depthStyle = react.useMemo(() => {
+    if (!hovered || !LIFTED[variant]) return resolved.depthStyle;
+    const hoverStep = Math.min(3, resolved.step + 1);
+    return liftStyle(hoverStep, resolved.mode);
+  }, [hovered, variant, resolved]);
+  return { ...resolved, depthStyle };
+}
 function Card({
   variant = "elevated",
   elevation = 2,
@@ -2111,89 +2178,54 @@ function Card({
 }) {
   const isClickable = isInteractive || !!onPress;
   const [isHovered, setIsHovered] = react.useState(false);
-  const theme = useTheme();
-  const elevationLevel = react.useMemo(() => {
-    const validated = getValidatedElevation("card", elevation);
-    if (variant === "outline" || variant === "accent" || variant === "subtle") {
-      return 1;
-    }
-    return validated;
-  }, [variant, elevation]);
-  const baseColor = react.useMemo(() => getBaseSurfaceColor(theme), [theme]);
-  const surfaceColor = react.useMemo(() => {
-    if ((variant === "outline" || variant === "accent") && theme === "light") {
-      return "#FAFAFA";
-    }
-    if (variant === "subtle") {
-      return getElevationSurface(baseColor, 0, theme);
-    }
-    return getElevationSurface(baseColor, elevationLevel, theme);
-  }, [baseColor, elevationLevel, theme, variant]);
-  const shadowStyle = react.useMemo(() => {
-    const shouldHover = isHovered && isClickable;
-    return getElevationShadow(baseColor, elevationLevel, theme, shouldHover);
-  }, [baseColor, elevationLevel, theme, isHovered, isClickable]);
-  const cardContent = isLoading ? /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
-    skeletonHasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(reactNative.View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
-      /* @__PURE__ */ jsx(reactNative.View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: skeletonContentLines }).map((_, i) => /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        className: cn(
-          "h-4 bg-interactive-disabled rounded",
-          i < skeletonContentLines - 1 ? "mb-2 w-full" : "w-4/5"
-        )
-      },
-      i
-    )) }),
-    skeletonHasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(reactNative.View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
-  ] }) : children;
+  const depth = useCardDepth(variant, elevation, isHovered && isClickable);
   const baseClassName = cn(
     "rounded-lg overflow-hidden relative",
-    // Apply variant styles, but only use default border color if no custom borderColor
-    variant === "outline" ? borderColor ? "border-2" : variantStyles[variant] : variantStyles[variant],
-    // Remove Tailwind shadow classes - we're using elevation shadows via style prop
+    borderColor ? "border" : EDGE_CLASS[variant],
     isClickable && "web:cursor-pointer web:transition-all web:duration-150",
     isClickable && "web:hover:-translate-y-0.5 active:scale-[0.99]",
     isLoading && "pointer-events-none animate-pulse",
     className
   );
-  const accentStyle = react.useMemo(() => variant === "accent" ? {
-    borderLeftWidth: accentWidth ?? 3,
-    borderLeftColor: accentColor ?? "var(--color-brand-primary)"
-  } : {}, [variant, accentWidth, accentColor]);
   const mergedStyle = react.useMemo(() => {
-    const elevationStyle = {
-      backgroundColor: bgColor || surfaceColor,
+    const own = {
+      backgroundColor: bgColor || depth.backgroundColor,
       borderRadius: 8,
       overflow: "hidden",
-      ...shadowStyle,
-      ...accentStyle
+      ...depth.depthStyle
     };
-    if (borderColor) {
-      elevationStyle.borderColor = borderColor;
+    if (variant === "accent") {
+      own.borderLeftWidth = accentWidth ?? 3;
+      own.borderLeftColor = accentColor ?? "var(--color-brand-primary)";
     }
-    if (!style) return elevationStyle;
-    return [elevationStyle, style];
-  }, [style, surfaceColor, shadowStyle, borderColor, bgColor, accentStyle]);
-  if (isClickable) {
-    return /* @__PURE__ */ jsx(
-      reactNative.Pressable,
-      {
-        onPress,
-        onHoverIn: () => setIsHovered(true),
-        onHoverOut: () => setIsHovered(false),
-        accessibilityRole: "button",
-        className: baseClassName,
-        style: mergedStyle,
-        ...props,
-        children: cardContent
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(reactNative.View, { className: baseClassName, style: mergedStyle, ...props, children: cardContent });
+    if (borderColor) own.borderColor = borderColor;
+    return style ? [own, style] : own;
+  }, [style, depth, bgColor, borderColor, variant, accentWidth, accentColor]);
+  const context = react.useMemo(
+    () => ({ mode: depth.mode, level: depth.plane }),
+    [depth.mode, depth.plane]
+  );
+  const content = isLoading ? /* @__PURE__ */ jsx(
+    SkeletonBody,
+    {
+      hasHeader: skeletonHasHeader,
+      hasFooter: skeletonHasFooter,
+      contentLines: skeletonContentLines
+    }
+  ) : children;
+  return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: context, children: isClickable ? /* @__PURE__ */ jsx(
+    reactNative.Pressable,
+    {
+      onPress,
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false),
+      accessibilityRole: "button",
+      className: baseClassName,
+      style: mergedStyle,
+      ...props,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(reactNative.View, { className: baseClassName, style: mergedStyle, ...props, children: content }) });
 }
 function CardHeader({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-6", className), children });
@@ -2204,60 +2236,122 @@ function CardContent({ children, className }) {
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
 }
-var t2 = getSemanticColors("dark");
-var solidVariantColors = {
-  success: t2["status-success"],
-  warning: t2["status-warning"],
-  error: t2["status-error"],
-  neutral: greyRamp[500]
-};
-var ringVariantStyles = {
-  "on-track": {
-    backgroundColor: "rgba(46,213,115,0.15)",
-    borderWidth: 1,
-    borderColor: "rgba(46,213,115,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)"
+function SkeletonBody({ hasHeader, hasFooter, contentLines }) {
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    hasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(reactNative.View, { className: "h-5 w-1/3 bg-interactive-disabled rounded" }),
+      /* @__PURE__ */ jsx(reactNative.View, { className: "mt-2 h-4 w-2/3 bg-interactive-disabled rounded" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: Array.from({ length: contentLines }).map((_, i) => /* @__PURE__ */ jsx(
+      reactNative.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(reactNative.View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
+  ] });
+}
+
+// src/utils/colors.ts
+function alpha(color, opacity) {
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    let r, g, b;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else {
+      return color;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
   }
+  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  return color;
+}
+
+// src/components/custom/Workout/StatusDot.tsx
+var solidFillToken = {
+  success: "status-success",
+  warning: "status-warning",
+  error: "status-error",
+  neutral: "text-tertiary"
 };
-var glowStyles = {
-  success: { boxShadow: "0 0 4px rgba(46,213,115,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(46,213,115,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 ringWashToken = {
+  "on-track": { fill: "status-success-subtle", border: "status-success-muted" },
+  deviation: { fill: "status-warning-subtle", border: "status-warning-muted" }
 };
+var FUTURE_FILL = alpha(greyRamp[500], 0.1);
+var FUTURE_BORDER = alpha(greyRamp[500], 0.2);
+var glyphToken = {
+  success: "text-inverse",
+  warning: "text-inverse",
+  error: "text-inverse",
+  neutral: "text-inverse",
+  "on-track": "status-success",
+  deviation: "status-warning",
+  future: "text-tertiary"
+};
+var glowColors2 = {
+  success: semanticColorsDark["status-success"],
+  warning: semanticColorsDark["status-warning"],
+  error: semanticColorsDark["status-error"],
+  neutral: greyRamp[500],
+  "on-track": semanticColorsDark["status-success"],
+  deviation: semanticColorsDark["status-warning"],
+  future: greyRamp[500]
+};
+var glowStyles = Object.fromEntries(
+  Object.entries(glowColors2).map(([variant, color]) => [variant, getGlowShadow(color, "subtle")])
+);
 var iconChars = {
   check: "\u2713",
   exclamation: "!",
   dash: "\u2014"
 };
-var iconColors = {
-  success: "#0A5C52",
-  warning: "#6B4000",
-  error: "#5C1A1A",
-  neutral: greyRamp[200],
-  "on-track": t2["status-success"],
-  deviation: t2["status-warning"],
-  future: greyRamp[500]
-};
 var sizeDimensions = {
   sm: { size: 8, showIcon: false },
   md: { size: 18, showIcon: true }
 };
 function isSolidVariant(variant) {
-  return variant in solidVariantColors;
+  return variant in solidFillToken;
+}
+function ringStyle(variant) {
+  if (variant === "future") {
+    return {
+      backgroundColor: FUTURE_FILL,
+      borderWidth: 1,
+      borderStyle: "dashed",
+      borderColor: FUTURE_BORDER
+    };
+  }
+  if (variant === "on-track" || variant === "deviation") {
+    const tokens = ringWashToken[variant];
+    return {
+      backgroundColor: resolveColor(tokens.fill),
+      borderWidth: 1,
+      borderColor: resolveColor(tokens.border)
+    };
+  }
+  return void 0;
 }
 function StatusDot({
   variant,
@@ -2270,7 +2364,7 @@ function StatusDot({
 }) {
   const config = sizeDimensions[size];
   const solid = isSolidVariant(variant);
-  const ring = ringVariantStyles[variant];
+  const ring = ringStyle(variant);
   const glowStyle = glow ? glowStyles[variant] : null;
   const dot = /* @__PURE__ */ jsx(
     reactNative.View,
@@ -2284,22 +2378,22 @@ function StatusDot({
           justifyContent: "center",
           flexShrink: 0
         },
-        solid ? { backgroundColor: solidVariantColors[variant] } : void 0,
-        ring ? ring : void 0,
+        solid ? { backgroundColor: resolveColor(solidFillToken[variant]) } : void 0,
+        ring,
         glowStyle ? glowStyle : void 0
       ],
       accessibilityRole: "image",
       accessibilityLabel: `${variant} status`,
       testID: "status-dot",
-      children: config.showIcon && icon && /* @__PURE__ */ jsx(
-        reactNative.Text,
+      children: config.showIcon && icon && // The glyph was 11px/900, off the type scale (TOKENS.md §4); `boldLabel` is
+      // the 12px sans label step and `font-black` keeps the original weight.
+      /* @__PURE__ */ jsx(
+        Typography,
         {
-          style: {
-            fontSize: 11,
-            lineHeight: 11,
-            fontWeight: "900",
-            color: iconColors[variant]
-          },
+          variant: "boldLabel",
+          color: "inherit",
+          className: "font-black leading-none",
+          style: { color: resolveColor(glyphToken[variant]) },
           accessibilityElementsHidden: true,
           children: iconChars[icon]
         }
@@ -2317,9 +2411,11 @@ function StatusDot({
         children: [
           /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, children: dot }),
           /* @__PURE__ */ jsx(
-            reactNative.Text,
+            Typography,
             {
-              style: { fontSize: 12, lineHeight: 16, color: greyRamp[400] },
+              variant: "caption",
+              color: "secondary",
+              className: "leading-4",
               accessibilityElementsHidden: true,
               children: label
             }
@@ -2335,13 +2431,13 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 
 // src/components/custom/Workout/MesoStatusCard.tsx
 var t3 = getSemanticColors("dark");
-var BRAND_PRIMARY4 = t3["brand-primary"];
+var BRAND_PRIMARY3 = t3["brand-primary"];
 var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
 var SUCCESS = t3["status-success"];
 var WARNING = t3["status-warning"];
 var ERROR = t3["status-error"];
-var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY4, BRAND_PRIMARY_LIGHT];
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY3, BRAND_PRIMARY_LIGHT];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
 var STATUS_VARIANTS = {
@@ -2366,15 +2462,7 @@ function renderCoachingText(text, highlights) {
   if (escaped.length === 0) return text;
   const regex = new RegExp(`(${escaped.join("|")})`, "g");
   return text.split(regex).map(
-    (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(
-      reactNative.Text,
-      {
-        className: "text-text-primary",
-        style: { fontWeight: "700" },
-        children: part
-      },
-      `${part}-${index}`
-    ) : /* @__PURE__ */ jsx(react.Fragment, { children: part }, `t-${index}`)
+    (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-primary", style: { fontWeight: "700" }, children: part }, `${part}-${index}`) : /* @__PURE__ */ jsx(react.Fragment, { children: part }, `t-${index}`)
   );
 }
 function StatusPill({ badge }) {
@@ -2459,41 +2547,34 @@ function Gauge({ gauge }) {
       "aria-valuemax": 100,
       testID: "meso-status-card-gauge",
       children: [
-        /* @__PURE__ */ jsxs(
-          reactNative.View,
-          {
-            className: "flex-row items-center justify-between",
-            accessibilityElementsHidden: true,
-            children: [
-              /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "500",
-                    letterSpacing: 0.5,
-                    textTransform: "uppercase"
-                  },
-                  children: gauge.label
-                }
-              ),
-              gauge.sublabel != null && /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  className: "text-text-tertiary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "500"
-                  },
-                  children: gauge.sublabel
-                }
-              )
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center justify-between", accessibilityElementsHidden: true, children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-secondary",
+              style: {
+                fontSize: 10,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "500",
+                letterSpacing: 0.5,
+                textTransform: "uppercase"
+              },
+              children: gauge.label
+            }
+          ),
+          gauge.sublabel != null && /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-tertiary",
+              style: {
+                fontSize: 10,
+                fontFamily: "Inter, sans-serif",
+                fontWeight: "500"
+              },
+              children: gauge.sublabel
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs(
           reactNative.View,
           {
@@ -2534,7 +2615,8 @@ function Gauge({ gauge }) {
                     borderRadius: 9999,
                     borderWidth: 2,
                     backgroundColor: markerColor,
-                    boxShadow: "0 0 4px rgba(0,0,0,0.5)"
+                    // A knob resting on the gauge: lift, with the ring as its edge.
+                    ...liftStyle(1, "dark", { rim: 0 })
                   },
                   testID: "meso-status-card-gauge-marker"
                 }
@@ -2586,30 +2668,23 @@ function MesoStatusCard({
         ),
         /* @__PURE__ */ jsxs(reactNative.View, { style: { padding: 14, gap: 14 }, testID: "meso-status-card-body", children: [
           /* @__PURE__ */ jsxs(reactNative.View, { testID: "meso-status-card-header", children: [
-            /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row items-center justify-between",
-                style: { gap: 8 },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        flexShrink: 1,
-                        fontSize: 15,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "meso-status-card-name",
-                      children: mesoName
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(StatusPill, { badge: statusBadge })
-                ]
-              }
-            ),
+            /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center justify-between", style: { gap: 8 }, children: [
+              /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-primary",
+                  style: {
+                    flexShrink: 1,
+                    fontSize: 15,
+                    fontFamily: '"Space Grotesk", sans-serif',
+                    fontWeight: "700"
+                  },
+                  testID: "meso-status-card-name",
+                  children: mesoName
+                }
+              ),
+              /* @__PURE__ */ jsx(StatusPill, { badge: statusBadge })
+            ] }),
             /* @__PURE__ */ jsx(
               reactNative.Text,
               {
@@ -2624,15 +2699,7 @@ function MesoStatusCard({
               }
             )
           ] }),
-          metrics.length > 0 && /* @__PURE__ */ jsx(
-            reactNative.View,
-            {
-              className: "flex-row flex-wrap",
-              style: { gap: 8 },
-              testID: "meso-status-card-metrics",
-              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell, { metric }, `${metric.label}-${index}`))
-            }
-          ),
+          metrics.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row flex-wrap", style: { gap: 8 }, testID: "meso-status-card-metrics", children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell, { metric }, `${metric.label}-${index}`)) }),
           gauges.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 12 }, testID: "meso-status-card-gauges", children: gauges.map((gauge, index) => /* @__PURE__ */ jsx(Gauge, { gauge }, `${gauge.label}-${index}`)) }),
           coaching != null && /* @__PURE__ */ jsx(
             reactNative.View,