@titan-design/react-ui 0.13.0 → 0.14.0

package/dist/pages.mjs

@@ -4,12 +4,37 @@ import { Fragment as Fragment$1, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
-// src/components/custom/Workout/ActiveWorkoutPage.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
   white: "#FFFFFF"};
 var alertRedVivid = "#FF4757";
+var resultPaletteColors = {
+  improve: "#4caf50",
+  improveDark: "#248a24",
+  degrade: "#ef5350",
+  degradeDark: "#b30000",
+  inconclusive: "#9E9A97"
+};
+var semanticPins = {
+  // Cool navy-black; darker and more blue-shifted than any warm greyRamp step.
+  textPrimaryLight: "#121828",
+  // Cool blue-grey; outside greyRamp's warm (R>=G>=B) scale.
+  textSecondaryLight: "#65748B",
+  // Pure neutral grey (R=G=B); no warm greyRamp step lands on it exactly.
+  backgroundBaseLight: "#EBEBEB",
+  // Near-neutral grey, kept one step off backgroundBaseLight by design.
+  dividerLight: "#E8E9EB",
+  // Periwinkle/indigo; more purple than any primitiveRamps.blue step. Shared by
+  // dark-mode text-link, border-focus and border-input-focus.
+  focusIndigoDark: "#828DF8"
+};
 var greyRamp = {
   50: "#F9F6F3",
   //  L*97.0  W6
@@ -43,6 +68,7 @@ var greyRamp = {
 var primitiveRamps = {
   red: {
     50: "#FFF4F4",
+    400: "#F77175",
     500: "#E05254",
     600: "#D14343",
     // pin
@@ -184,6 +210,12 @@ var semanticColorsLight = {
   // Text on brand backgrounds (on-*)
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.white,
+  // Text ON a `-subtle` fill. Light mode keeps today's pairing (the base token) so
+  // nothing moves here: light has the same disease mirrored — a light rung on a
+  // near-white ramp[50] fill — but correcting it belongs with the light-mode pass
+  // in AW-121, not this one.
+  "on-brand-primary-subtle": primitiveRamps.orange[400],
+  "on-brand-secondary-subtle": primitiveRamps.cyan[600],
   // Status colors (status-*)
   "status-success": primitiveRamps.green[300],
   "status-success-light": primitiveRamps.green[200],
@@ -219,21 +251,26 @@ var semanticColorsLight = {
   "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 a `-subtle` fill — see the on-brand-*-subtle note above.
+  "on-status-success-subtle": primitiveRamps.green[300],
+  "on-status-error-subtle": primitiveRamps.red[600],
+  "on-status-warning-subtle": primitiveRamps.amber[300],
+  "on-status-info-subtle": primitiveRamps.blue[500],
   // Text on status backgrounds (on-status-*)
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
   "on-status-warning": primitiveColors.white,
   "on-status-info": primitiveColors.white,
   // Result/outcome indicators (result-*)
-  "result-improve": "#4caf50",
+  "result-improve": resultPaletteColors.improve,
   // Green - positive outcome
   "result-improve-light": "rgba(76, 175, 80, 0.12)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
+  "result-improve-dark": resultPaletteColors.improveDark,
+  "result-degrade": resultPaletteColors.degrade,
   // Red - negative outcome
   "result-degrade-light": "rgba(239, 83, 80, 0.12)",
-  "result-degrade-dark": "#b30000",
-  "result-inconclusive": "#9E9A97",
+  "result-degrade-dark": resultPaletteColors.degradeDark,
+  "result-inconclusive": resultPaletteColors.inconclusive,
   // Gray - no clear result
   "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
   "result-neutral": greyRamp[600],
@@ -265,8 +302,8 @@ var semanticColorsLight = {
   "data-10": discreteRainbow[22],
   // Dark Orange
   // Text colors (text-*)
-  "text-primary": "#121828",
-  "text-secondary": "#65748B",
+  "text-primary": semanticPins.textPrimaryLight,
+  "text-secondary": semanticPins.textSecondaryLight,
   "text-tertiary": greyRamp[400],
   "text-disabled": "rgba(55, 65, 81, 0.48)",
   "text-inverse": primitiveColors.white,
@@ -282,7 +319,7 @@ var semanticColorsLight = {
   "surface-input": greyRamp[50],
   // Input field background (filled variant)
   // Background colors (background-*)
-  "background-base": "#EBEBEB",
+  "background-base": semanticPins.backgroundBaseLight,
   "background-default": primitiveColors.white,
   "background-subtle": greyRamp[50],
   // Frame/bezel chrome — top bar + side nav shell, one step below
@@ -313,7 +350,7 @@ var semanticColorsLight = {
   "interactive-disabled": "rgba(55, 65, 81, 0.12)",
   "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
   // Divider
-  divider: "#E8E9EB",
+  divider: semanticPins.dividerLight,
   // Avatar default
   "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
@@ -331,7 +368,7 @@ var semanticColorsDark = {
   "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-subtle": "rgba(34, 211, 238, 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],
@@ -339,6 +376,14 @@ var semanticColorsDark = {
   // Text on brand backgrounds
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.white,
+  // Text ON a `-subtle` fill. Its own role: `brand-primary` and friends are tuned to
+  // carry a white label as a solid fill, which makes the two deepest of them
+  // (cyan[600], red[600]) too dark to read as text on a dark plane. Levelling the
+  // family at rung 300 puts every tone within OKLCH L 0.769-0.813 instead of
+  // 0.550-0.813. Brand is deliberately left at its own orange[400] (operator, AW-133)
+  // so the Voltras tone never drifts; it is the one tone under AA on a raised card.
+  "on-brand-primary-subtle": primitiveRamps.orange[400],
+  "on-brand-secondary-subtle": primitiveRamps.cyan[300],
   // Status colors
   "status-success": primitiveRamps.green[300],
   "status-success-light": primitiveRamps.green[200],
@@ -352,7 +397,10 @@ var semanticColorsDark = {
   "status-error": primitiveRamps.red[600],
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
-  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  // Alpha 0.08, not the family's 0.12: error's label is red[400], a rung darker than
+  // its siblings so it reads RED rather than pink (rung 300 has only 0.121 chroma).
+  // Thinning the fill buys back the contrast that extra darkness costs. See AW-133.
+  "status-error-subtle": "rgba(247, 113, 117, 0.08)",
   "status-error-muted": "rgba(209, 67, 67, 0.30)",
   "status-error-strong": "rgba(209, 67, 67, 0.50)",
   "status-error-vivid": alertRedVivid,
@@ -370,7 +418,7 @@ var semanticColorsDark = {
   "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-subtle": "rgba(120, 194, 255, 0.12)",
   "status-info-muted": "rgba(33, 150, 243, 0.30)",
   "status-info-strong": "rgba(33, 150, 243, 0.50)",
   // Text on status backgrounds
@@ -378,14 +426,22 @@ var semanticColorsDark = {
   "on-status-error": primitiveColors.white,
   "on-status-warning": primitiveColors.white,
   "on-status-info": primitiveColors.white,
+  // Text ON a `-subtle` fill — see the on-brand-*-subtle note above. Error is the
+  // second deliberate exception to the rung-300 rule (operator, AW-133): red[300]
+  // levelled perfectly but read PINK, because a red that light can only hold 0.121
+  // chroma. red[400] carries 0.165 and reads red; its fill is thinned to compensate.
+  "on-status-success-subtle": primitiveRamps.green[300],
+  "on-status-error-subtle": primitiveRamps.red[400],
+  "on-status-warning-subtle": primitiveRamps.amber[300],
+  "on-status-info-subtle": primitiveRamps.blue[300],
   // Result/outcome indicators (result-*)
-  "result-improve": "#4caf50",
+  "result-improve": resultPaletteColors.improve,
   "result-improve-light": "rgba(76, 175, 80, 0.16)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
+  "result-improve-dark": resultPaletteColors.improveDark,
+  "result-degrade": resultPaletteColors.degrade,
   "result-degrade-light": "rgba(239, 83, 80, 0.16)",
-  "result-degrade-dark": "#b30000",
-  "result-inconclusive": "#9E9A97",
+  "result-degrade-dark": resultPaletteColors.degradeDark,
+  "result-inconclusive": resultPaletteColors.inconclusive,
   "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
   "result-neutral": greyRamp[400],
   // Text on result backgrounds
@@ -416,7 +472,7 @@ var semanticColorsDark = {
   "text-tertiary": greyRamp[500],
   "text-disabled": "rgba(255, 255, 255, 0.38)",
   "text-inverse": greyRamp[950],
-  "text-link": "#828DF8",
+  "text-link": semanticPins.focusIndigoDark,
   "text-link-hover": primitiveRamps.blue[400],
   // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
   // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
@@ -466,10 +522,10 @@ var semanticColorsDark = {
   // plane, so it keeps its job without collision.
   "border-prominent": greyRamp[800],
   // high-visibility divider
-  "border-focus": "#828DF8",
+  "border-focus": semanticPins.focusIndigoDark,
   "border-input": greyRamp[700],
   "border-input-hover": greyRamp[600],
-  "border-input-focus": "#828DF8",
+  "border-input-focus": semanticPins.focusIndigoDark,
   "border-input-error": primitiveRamps.red[500],
   // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
   // normalizing: composites toward white by ~the same amount on ANY plane, so
@@ -734,6 +790,22 @@ function useLiveRepGrowth(active, liveRepIndex, liveVelocity, isNewPeak) {
   }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveGrowth]);
   return liveGrowth;
 }
+
+// src/components/custom/charts/flatBarGeometry.ts
+var SET_LEVEL_FLAT_BAR = {
+  /** Track height (px). */
+  height: 8,
+  /** Gap between segment slots (px) — also SetStrip's between-set gap, see `SEGMENTED_BAR_GAP`. */
+  gap: 5,
+  /** Corner radius (px). */
+  radius: 2
+};
+var REP_LEVEL_FLAT_BAR = {
+  /** Inter-bar gap is proportional (`gapRatio · barWidth`), floored at this many px. */
+  gapFloor: 2,
+  /** Corner radius (px) default. */
+  radius: 5
+};
 function wrapJsx(fn) {
   return function(type, props, ...rest) {
     if (props && typeof props.className === "string" && props.className) {
@@ -768,7 +840,7 @@ var CONTINUE_OUTLINE = primitiveRamps.cyan[800];
 var FIXED_MAX_VALUE = 1.15;
 var PEAK_HEADROOM = 1.03;
 function scaleDenominator(scale, maxValue) {
-  return scale === "fixed" ? FIXED_MAX_VALUE : maxValue * PEAK_HEADROOM;
+  return (scale === "fixed" ? FIXED_MAX_VALUE : maxValue) * PEAK_HEADROOM;
 }
 function valueLabelFontSize(height) {
   return Math.round(Math.max(8, Math.min(12, height * 0.11)));
@@ -784,12 +856,12 @@ var SET_BAR_DEFAULT_HEIGHT = 220;
 var LABEL_ROW_HEIGHT = 16;
 var LABEL_GAP = 3;
 var GAP_RATIO = 0.08;
-var MIN_BAR_GAP = 2;
+var MIN_BAR_GAP = REP_LEVEL_FLAT_BAR.gapFloor;
 var CHUNK_NOTCH_RATIO = 0.25;
 var CHUNK_NOTCH_MIN_PX = 10;
 var BAR_MAX_WIDTH = 120;
 var LABEL_MIN_BAR_WIDTH = 30;
-var DEFAULT_BAR_RADIUS = 5;
+var DEFAULT_BAR_RADIUS = REP_LEVEL_FLAT_BAR.radius;
 var MIN_BAR_HEIGHT = 4;
 var FLAT_BAR_FRACTION = 0.5;
 var STUB_HEIGHT = 9;
@@ -1665,232 +1737,8 @@ function VelocityStrip({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function resolveColor(token, mode = "dark") {
-  return Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
-}
-
-// src/components/custom/Workout/PlaceholderStrip.tsx
-var RAIL_TOKEN = "border-prominent";
-function SingleStrip({
-  width,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      className,
-      style: [
-        {
-          height: 3,
-          backgroundColor: resolveColor(RAIL_TOKEN),
-          borderRadius: 2,
-          opacity: 0.5
-        },
-        width != null ? { width } : { flex: 1 }
-      ],
-      accessibilityRole: "image",
-      accessibilityLabel: "Planned set, not yet completed",
-      testID: "placeholder-strip",
-      ...props
-    }
-  );
-}
-function SegmentedStrip({
-  segments = 3,
-  width,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      className: cn("flex-row", className),
-      style: [
-        { height: 3, gap: 2, opacity: 0.5 },
-        width != null ? { width } : { flex: 1 }
-      ],
-      accessibilityRole: "image",
-      accessibilityLabel: "Planned set, not yet completed",
-      testID: "placeholder-strip",
-      ...props,
-      children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
-        View,
-        {
-          style: {
-            flex: 1,
-            height: 3,
-            backgroundColor: resolveColor(RAIL_TOKEN),
-            borderRadius: 1,
-            minWidth: 4
-          },
-          accessibilityElementsHidden: true,
-          testID: "placeholder-segment"
-        },
-        i
-      ))
-    }
-  );
-}
-function PlaceholderStrip({ mode = "single", segments, ...props }) {
-  if (mode === "segmented") {
-    return /* @__PURE__ */ jsx(SegmentedStrip, { segments, ...props });
-  }
-  return /* @__PURE__ */ jsx(SingleStrip, { ...props });
-}
-
-// src/components/icons/SvgIcon.tsx
-function SvgIcon({
-  size = 24,
-  color = "currentColor",
-  strokeWidth = 2,
-  fill = "none",
-  title,
-  children
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
-      children: [
-        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
-        children
-      ]
-    }
-  );
-}
 
-// src/components/icons/icons.tsx
-function StarIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }) });
-}
-function ScaleIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
-    /* @__PURE__ */ jsx("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 21h10" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 3v18" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
-  ] });
-}
-function AlertTriangleIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
-  ] });
-}
-function TrendingDownIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M16 17h6v-6" }),
-    /* @__PURE__ */ jsx("path", { d: "m22 17-8.5-8.5-5 5L2 7" })
-  ] });
-}
-function CircleSlashIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx("path", { d: "m9 15 6-6" })
-  ] });
-}
-function AwardIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "6" })
-  ] });
-}
-function InfoIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
-  ] });
-}
-var t = getSemanticColors("dark");
-var baseBadgeSizeConfig = {
-  sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
-  md: { fontSize: 10, paddingH: 8, paddingV: 2, iconSize: 12 },
-  lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 }
-};
-var variantColors = {
-  plain: { backgroundColor: t["surface-raised"], borderColor: t["hairline-default"] },
-  pr: {
-    backgroundColor: "rgba(255, 121, 0, 0.12)",
-    borderColor: "rgba(255, 121, 0, 0.3)"
-  }
-};
-function BaseBadge({
-  variant = "plain",
-  size = "md",
-  icon,
-  onPress,
-  className,
-  children,
-  ...props
-}) {
-  const [scaleAnim] = useState(() => new Animated.Value(1));
-  const config = baseBadgeSizeConfig[size];
-  const colors = variantColors[variant];
-  const handlePressIn = () => {
-    Animated.timing(scaleAnim, {
-      toValue: 0.97,
-      duration: 150,
-      useNativeDriver: true
-    }).start();
-  };
-  const handlePressOut = () => {
-    Animated.timing(scaleAnim, {
-      toValue: 1,
-      duration: 150,
-      useNativeDriver: true
-    }).start();
-  };
-  const badge = /* @__PURE__ */ jsxs(
-    View,
-    {
-      className,
-      style: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 3,
-        // borderRadius 2 is intentional per workout-tokens.ts (squared-off pill)
-        borderRadius: 2,
-        borderWidth: 1,
-        borderColor: colors.borderColor,
-        backgroundColor: colors.backgroundColor,
-        paddingHorizontal: config.paddingH,
-        paddingVertical: config.paddingV
-      },
-      ...props,
-      children: [
-        icon != null && /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, testID: "base-badge-icon", children: icon }),
-        children
-      ]
-    }
-  );
-  if (onPress) {
-    return /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ scale: scaleAnim }] }, children: /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        onPress,
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
-        accessibilityRole: "button",
-        accessibilityLabel: props.accessibilityLabel,
-        testID: "base-badge-pressable",
-        children: badge
-      }
-    ) });
-  }
-  return badge;
-}
+// src/components/custom/Typography/Typography.tsx
 var variantStyles = {
   h1: "font-heading text-5xl font-bold leading-tight",
   h2: "font-heading text-4xl font-bold leading-tight",
@@ -1981,81 +1829,11 @@ function Typography({
     }
   );
 }
-
-// src/components/custom/Workout/PrBadge.tsx
-var typeLabels = {
-  e1rm: "PR e1RM",
-  weight: "PR Weight",
-  reps: "PR Reps",
-  volume: "PR Volume",
-  velocity: "PR Velocity"
-};
-function PrBadge({
-  type = "e1rm",
-  label: labelProp,
-  compact = false,
-  animate = true,
-  className,
-  ...props
-}) {
-  const resolvedLabel = labelProp ?? typeLabels[type];
-  const brandPrimary = resolveColor("brand-primary");
-  const [scale] = useState(() => new Animated.Value(animate ? 0.8 : 1));
-  const [opacity] = useState(() => new Animated.Value(animate ? 0 : 1));
-  useEffect(() => {
-    if (!animate) return;
-    Animated.parallel([
-      Animated.timing(scale, {
-        toValue: 1,
-        duration: 400,
-        easing: Easing.bezier(0.34, 1.56, 0.64, 1),
-        useNativeDriver: true
-      }),
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 400,
-        easing: Easing.bezier(0.34, 1.56, 0.64, 1),
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [animate, scale, opacity]);
-  const badge = compact ? /* @__PURE__ */ jsx(
-    View,
-    {
-      className,
-      accessibilityRole: "image",
-      accessibilityLabel: `Personal record: ${resolvedLabel}`,
-      testID: "pr-badge-star",
-      ...props,
-      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: brandPrimary, fill: brandPrimary, strokeWidth: 2 })
-    }
-  ) : /* @__PURE__ */ jsx(
-    BaseBadge,
-    {
-      variant: "pr",
-      className,
-      accessibilityLabel: `Personal record: ${resolvedLabel}`,
-      ...props,
-      children: /* @__PURE__ */ jsxs(
-        Typography,
-        {
-          variant: "boldLabel",
-          color: "inherit",
-          className: "leading-[normal] text-brand-primary",
-          children: [
-            "\u2605",
-            " ",
-            resolvedLabel
-          ]
-        }
-      )
-    }
-  );
-  if (animate) {
-    return /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ scale }], opacity }, testID: "pr-badge-animated", children: badge });
-  }
-  return badge;
+function resolveColor(token, mode = "dark") {
+  return Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
 }
+
+// src/components/custom/Workout/SetRow.tsx
 var TEXT_ACTIVE = "text-primary";
 var TEXT_MUTED = "text-secondary";
 var COL = { set: 36, reps: 44, load: 56, rpe: 36 };
@@ -2240,37 +2018,180 @@ function SetTableHeader({
     }
   );
 }
-var METRIC_FONT = "Inter, sans-serif";
-function MetricCell({ children, color, fontSize = 11 }) {
-  return /* @__PURE__ */ jsx(
-    Text,
-    {
-      style: {
-        fontFamily: METRIC_FONT,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children
-    }
+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)})`
   );
 }
-
-// src/components/custom/Workout/SetsRepsLoad.tsx
-var TIMES = "\xD7";
-var AT = "@";
-function SetsRepsLoad({
-  sets,
-  reps,
-  load,
-  unit = "lb",
+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 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/elevation.ts
+var FLOATING_ELEVATION_MIN = FLOATING_LIFT_MIN;
+function getPressedRecessShadow(fillColor, _mode = "dark") {
+  const { boxShadow } = insetWell(fillColor);
+  return 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 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
+    }
+  });
+}
+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 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 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 useResolvedSurface(props) {
+  const inherited = useSurface();
+  const { level, raise, elevation, pressed, lift, liftOptions, theme } = props;
+  return useMemo(
+    () => resolveSurfaceDepth(inherited, {
+      level,
+      raise,
+      elevation,
+      pressed,
+      lift,
+      liftOptions,
+      theme
+    }),
+    [inherited, level, raise, elevation, pressed, lift, liftOptions, theme]
+  );
+}
+
+// src/components/ui/tooltip/Tooltip.tsx
+var createPortal;
+if (Platform.OS === "web") {
+  try {
+    createPortal = __require("react-dom").createPortal;
+  } catch {
+  }
+}
+function useHoverState() {
+  const [hovered, setHovered] = useState(false);
+  const onPointerEnter = useCallback(() => setHovered(true), []);
+  const onPointerLeave = useCallback(() => setHovered(false), []);
+  return { hovered, hoverProps: { onPointerEnter, onPointerLeave } };
+}
+var METRIC_FONT = "Inter, sans-serif";
+function MetricCell({ children, color, fontSize = 11, weight = 600 }) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      style: {
+        fontFamily: METRIC_FONT,
+        fontSize,
+        color,
+        fontWeight: String(weight),
+        letterSpacing: 1
+      },
+      children
+    }
+  );
+}
+
+// src/components/custom/Workout/SetsRepsLoad.tsx
+var TIMES = "\xD7";
+var AT = "@";
+function SetsRepsLoad({
+  sets,
+  reps,
+  load,
+  unit = "lb",
   fontSize,
+  muted = false,
   className,
   ...props
 }) {
-  const value = useOnSurfaceColor("primary");
-  const sep = useOnSurfaceColor("tertiary");
+  const primary = useOnSurfaceColor("primary");
+  const tertiary = useOnSurfaceColor("tertiary");
+  const secondary = useOnSurfaceColor("secondary");
+  const value = muted ? secondary : primary;
+  const sep = muted ? secondary : tertiary;
+  const weight = muted ? 400 : 600;
+  const times = muted ? TIMES : ` ${TIMES} `;
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -2280,29 +2201,29 @@ function SetsRepsLoad({
       testID: "sets-reps-load",
       ...props,
       children: [
-        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: sets }),
-        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${TIMES} ` }),
-        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: reps }),
-        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${AT} ` }),
-        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: load }),
-        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${unit}` })
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, weight, children: sets }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, weight, children: times }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, weight, children: reps }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, weight, children: ` ${AT} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, weight, children: load }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, weight, children: ` ${unit}` })
       ]
     }
   );
 }
-var t2 = getSemanticColors("dark");
+var t = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = t2["status-error"];
-var STATUS_SUCCESS = t2["status-success"];
-var STATUS_WARNING = t2["status-warning"];
+var STATUS_ERROR = t["status-error"];
+var STATUS_SUCCESS = t["status-success"];
+var STATUS_WARNING = t["status-warning"];
 var ON_TARGET_MS = 100;
 function getTempoFillPct(elapsedMs, targetMs) {
   if (!targetMs) return 100;
   return Math.min(100, elapsedMs / targetMs * 100);
 }
 function activeNumberTone(elapsedMs, targetMs) {
-  if (targetMs == null) return t2["text-primary"];
+  if (targetMs == null) return t["text-primary"];
   const remainingMs = targetMs - elapsedMs;
   if (remainingMs > ON_TARGET_MS) return STATUS_WARNING;
   if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS;
@@ -2454,7 +2375,7 @@ function TempoDisplay({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: t2["surface-raised"],
+        backgroundColor: t["surface-raised"],
         paddingHorizontal: chromePadX,
         paddingVertical: chromePadY,
         borderRadius: chromeRadius
@@ -2469,7 +2390,7 @@ function TempoDisplay({
               fontSize: labelFont,
               fontWeight: "500",
               // Live-muted green while a rep is running, tertiary at rest.
-              color: live ? t2["status-live-muted"] : TEXT_TERTIARY,
+              color: live ? t["status-live-muted"] : TEXT_TERTIARY,
               letterSpacing: 0.5,
               textTransform: "uppercase",
               marginRight: Math.round(fontSize * 0.5)
@@ -2527,7 +2448,7 @@ function TempoDisplay({
                 View,
                 {
                   style: {
-                    backgroundColor: t2["surface-overlay"],
+                    backgroundColor: t["surface-overlay"],
                     borderRadius: 6,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
@@ -2580,6 +2501,80 @@ function TempoDisplay({
     }
   );
 }
+
+// src/components/icons/SvgIcon.tsx
+function SvgIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  fill = "none",
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/components/icons/icons.tsx
+function ScaleIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 21h10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
+  ] });
+}
+function AlertTriangleIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+  ] });
+}
+function TrendingDownIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 17h6v-6" }),
+    /* @__PURE__ */ jsx("path", { d: "m22 17-8.5-8.5-5 5L2 7" })
+  ] });
+}
+function CircleSlashIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 15 6-6" })
+  ] });
+}
+function AwardIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "6" })
+  ] });
+}
+function InfoIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+  ] });
+}
+
+// src/components/custom/Workout/ExerciseIndicator.tsx
 var INDICATOR_CONFIG = {
   imbalance: { Icon: ScaleIcon, token: "status-error", label: "Left/right imbalance" },
   overshoot: { Icon: AlertTriangleIcon, token: "status-error", label: "Load overshoot" },
@@ -2617,42 +2612,101 @@ function ExerciseIndicator({ kind, onPress, className, ...props }) {
   return chip;
 }
 
+// src/components/custom/Workout/exerciseRowState.ts
+var ROW_STATE_TOKEN = {
+  hovered: "interactive-hover",
+  selected: "interactive-selected",
+  pressed: "interactive-active"
+};
+function exerciseRowStateColor(state, mode = "dark") {
+  return getSemanticColors(mode)[ROW_STATE_TOKEN[state]];
+}
+function exerciseLiveColor(mode = "dark") {
+  return getSemanticColors(mode)["status-live"];
+}
+
 // src/components/custom/Workout/ExerciseHeading.tsx
-function headingLabel(name, sets, reps, load, unit) {
-  const loadLabel = typeof load === "number" ? roundWeight(load) : load;
-  return `${name}, ${sets}\xD7${reps} @ ${loadLabel} ${unit}`;
+var DIMMED_OPACITY = 0.55;
+function prescriptionText(p, unit) {
+  if (p.prescription !== void 0) return p.prescription;
+  if (p.sets === void 0) return void 0;
+  const loadLabel = typeof p.load === "number" ? roundWeight(p.load) : p.load;
+  return `${p.sets}\xD7${p.reps} @ ${loadLabel} ${unit}`;
+}
+function exerciseHeadingLabel(p, unit = p.unit ?? "lbs") {
+  const prescription = prescriptionText(p, unit);
+  return prescription ? `${p.name}, ${prescription}` : p.name;
+}
+function pressProps(p, unit) {
+  return {
+    onPress: p.onPress,
+    onPressIn: p.onPressIn,
+    onPressOut: p.onPressOut,
+    onHoverIn: p.onHoverIn,
+    onHoverOut: p.onHoverOut,
+    accessibilityRole: "button",
+    accessibilityLabel: exerciseHeadingLabel(p, unit)
+  };
 }
-function ExerciseHeading({
+function HeadingName({
   name,
-  sets,
-  reps,
-  load,
-  unit = "lbs",
-  tempo,
-  indicator,
-  dimmed,
-  onPress
+  nameStyle,
+  className
 }) {
-  return /* @__PURE__ */ jsxs(View, { style: { opacity: dimmed ? 0.55 : 1 }, testID: "exercise-heading", children: [
+  return (
+    // The row is a button label, not a heading, so `boldLabel` carries the weight and
+    // no header role has to be undone. Size and the Space Grotesk face are pinned.
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "boldLabel",
+        color: nameStyle ? "inherit" : "primary",
+        style: nameStyle,
+        className: cn("font-heading text-sm leading-[normal]", className),
+        testID: "exercise-card-name",
+        children: name
+      }
+    )
+  );
+}
+function prescriptionNode(p, unit) {
+  if (p.prescription !== void 0) {
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        color: "secondary",
+        maxLines: 1,
+        className: "font-sans shrink leading-[normal]",
+        testID: "exercise-card-prescription",
+        children: p.prescription
+      }
+    );
+  }
+  if (p.sets === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    SetsRepsLoad,
+    {
+      sets: p.sets,
+      reps: p.reps,
+      load: p.load,
+      unit,
+      muted: p.mutedPrescription
+    }
+  );
+}
+function StackedHeading({ heading, nameStyle }) {
+  const { unit = "lbs", tempo, indicator } = heading;
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
-        onPress,
-        accessibilityRole: "button",
-        accessibilityLabel: headingLabel(name, sets, reps, load, unit),
+        ...pressProps(heading, unit),
         className: "flex-row items-center",
         style: { gap: 8 },
         testID: "exercise-card-header",
         children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "boldLabel",
-              className: "font-heading text-sm leading-[normal]",
-              testID: "exercise-card-name",
-              children: name
-            }
-          ),
+          /* @__PURE__ */ jsx(HeadingName, { name: heading.name, nameStyle }),
           /* @__PURE__ */ jsx(View, { className: "flex-1" }),
           indicator && /* @__PURE__ */ jsx(ExerciseIndicator, { kind: indicator })
         ]
@@ -2665,7 +2719,7 @@ function ExerciseHeading({
         style: { gap: 8, marginTop: 1 },
         testID: "exercise-card-summary",
         children: [
-          /* @__PURE__ */ jsx(SetsRepsLoad, { sets, reps, load, unit }),
+          prescriptionNode(heading, unit),
           /* @__PURE__ */ jsx(View, { className: "flex-1" }),
           tempo && /* @__PURE__ */ jsx(TempoDisplay, { tempo, size: "sm", showLabel: false, showInfo: false })
         ]
@@ -2673,9 +2727,44 @@ function ExerciseHeading({
     )
   ] });
 }
+function InlineHeading({ heading, nameStyle }) {
+  const { unit = "lbs", indicator, previousBest } = heading;
+  const Row = heading.pressTarget === "ancestor" ? View : Pressable;
+  return /* @__PURE__ */ jsxs(
+    Row,
+    {
+      ...heading.pressTarget === "ancestor" ? {} : pressProps(heading, unit),
+      className: "flex-row items-center",
+      style: { gap: 8 },
+      testID: "exercise-card-header",
+      children: [
+        /* @__PURE__ */ jsx(HeadingName, { name: heading.name, nameStyle, className: "shrink-0" }),
+        /* @__PURE__ */ jsx(View, { className: "shrink flex-row items-center", testID: "exercise-card-summary", children: prescriptionNode(heading, unit) }),
+        /* @__PURE__ */ jsx(View, { className: "flex-1", style: { minWidth: 8 } }),
+        indicator && /* @__PURE__ */ jsx(ExerciseIndicator, { kind: indicator }),
+        previousBest && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "caption",
+            color: "tertiary",
+            maxLines: 1,
+            className: "font-sans shrink text-2xs leading-[normal]",
+            testID: "exercise-card-previous-best",
+            children: previousBest
+          }
+        )
+      ]
+    }
+  );
+}
+function ExerciseHeading(props) {
+  const mode = useSurfaceMode();
+  const nameStyle = props.isLive ? { color: exerciseLiveColor(mode) } : void 0;
+  return /* @__PURE__ */ jsx(View, { style: { opacity: props.dimmed ? DIMMED_OPACITY : 1 }, testID: "exercise-heading", children: props.layout === "inline" ? /* @__PURE__ */ jsx(InlineHeading, { heading: props, nameStyle }) : /* @__PURE__ */ jsx(StackedHeading, { heading: props, nameStyle }) });
+}
 var PULSE_HALF_MS = 950;
 var PULSE_MIN_OPACITY = 0.45;
-var SEGMENTED_BAR_GAP = 5;
+var SEGMENTED_BAR_GAP = SET_LEVEL_FLAT_BAR.gap;
 function usePulse(active) {
   const [value] = useState(() => new Animated.Value(0));
   useEffect(() => {
@@ -2703,9 +2792,9 @@ function usePulse(active) {
 }
 function SegmentedBar({
   segments,
-  height = 8,
+  height = SET_LEVEL_FLAT_BAR.height,
   gap = SEGMENTED_BAR_GAP,
-  radius = 2,
+  radius = SET_LEVEL_FLAT_BAR.radius,
   marker = null,
   segmentTestID,
   style,
@@ -2931,20 +3020,113 @@ function SetStrip({ sets, height = 8, className, ...props }) {
 }
 
 // src/components/custom/Workout/ExerciseCardHeading.tsx
-function ExerciseCardHeading({
-  setStates,
-  stripHeight = 8,
-  dimmed,
-  testID = "exercise-card",
-  ...heading
-}) {
+var DENSITY = {
+  rail: {
+    paddingVertical: 9,
+    paddingHorizontal: 12,
+    layout: "stacked",
+    dimOpacity: 0.55,
+    dimByDefault: false,
+    mutedPrescription: false
+  },
+  compact: {
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    layout: "inline",
+    dimOpacity: 0.55,
+    dimByDefault: false,
+    mutedPrescription: true
+  },
+  upcoming: {
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    layout: "inline",
+    dimOpacity: 0.6,
+    dimByDefault: true,
+    mutedPrescription: true
+  }
+};
+function useRowInteraction() {
+  const { hovered: rowHovered, hoverProps } = useHoverState();
+  const [headingHovered, setHeadingHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  return {
+    hoverProps,
+    pressed,
+    hovered: rowHovered || headingHovered,
+    headingHandlers: {
+      onHoverIn: () => setHeadingHovered(true),
+      onHoverOut: () => setHeadingHovered(false),
+      onPressIn: () => setPressed(true),
+      onPressOut: () => setPressed(false)
+    }
+  };
+}
+function rowWash(mode, state) {
+  if (state.pressed) return exerciseRowStateColor("pressed", mode);
+  if (state.isSelected) return exerciseRowStateColor("selected", mode);
+  if (state.hovered) return exerciseRowStateColor("hovered", mode);
+  return void 0;
+}
+function prescriptionProps(p) {
+  const base = { name: p.name };
+  if (p.prescription !== void 0) return { ...base, prescription: p.prescription };
+  if (p.sets === void 0) return base;
+  return { ...base, sets: p.sets, reps: p.reps, load: p.load };
+}
+function ExerciseCardHeading(props) {
+  const {
+    density = "rail",
+    setStates = [],
+    stripHeight = 8,
+    dimmed,
+    isSelected = false,
+    isLive = false,
+    testID = "exercise-card",
+    style
+  } = props;
+  const spec = DENSITY[density];
+  const { hoverProps, pressed, hovered, headingHandlers } = useRowInteraction();
+  const wash = rowWash(useSurfaceMode(), { pressed, isSelected, hovered });
+  const rowIsButton = spec.layout === "inline";
+  const Root = rowIsButton ? Pressable : View;
+  const rootPress = rowIsButton ? {
+    ...headingHandlers,
+    onPress: props.onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: exerciseHeadingLabel(props)
+  } : {};
   return /* @__PURE__ */ jsxs(
-    View,
+    Root,
     {
-      style: { paddingVertical: 9, paddingHorizontal: 12, opacity: dimmed ? 0.55 : 1 },
+      ...hoverProps,
+      ...rootPress,
+      style: [
+        {
+          paddingVertical: spec.paddingVertical,
+          paddingHorizontal: spec.paddingHorizontal,
+          opacity: dimmed ?? spec.dimByDefault ? spec.dimOpacity : 1
+        },
+        wash ? { backgroundColor: wash } : null,
+        style
+      ],
       testID,
       children: [
-        /* @__PURE__ */ jsx(ExerciseHeading, { ...heading }),
+        /* @__PURE__ */ jsx(
+          ExerciseHeading,
+          {
+            ...prescriptionProps(props),
+            ...rowIsButton ? { pressTarget: "ancestor" } : headingHandlers,
+            unit: props.unit,
+            tempo: props.tempo,
+            indicator: props.indicator,
+            previousBest: props.previousBest,
+            onPress: rowIsButton ? void 0 : props.onPress,
+            layout: spec.layout,
+            mutedPrescription: spec.mutedPrescription,
+            isLive
+          }
+        ),
         setStates.length > 0 && /* @__PURE__ */ jsx(View, { style: { marginTop: 7 }, testID: "exercise-card-strip", children: /* @__PURE__ */ jsx(SetStrip, { sets: setStates, height: stripHeight }) })
       ]
     }
@@ -2990,103 +3172,58 @@ function getSupersetMargin(position) {
   }
   return {};
 }
-function formatSummary(summary) {
-  if (!summary) return "";
-  return `${summary.sets}\xD7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`;
+function supersetChrome(position) {
+  return { ...getSupersetBorderRadius(position), ...getSupersetMargin(position) };
 }
-function formatAccessibilityLabel(name, summary, prescription) {
-  if (summary) return `${name}, ${formatSummary(summary)}`;
-  if (prescription) return `${name}, ${prescription}`;
-  return name;
+function deriveCollapsedSetStates(setVelocities, totalPlannedSets, plannedReps2) {
+  const done = (setVelocities ?? []).map(
+    (velocities) => ({ status: "done", velocities })
+  );
+  const remaining = Math.max(0, (totalPlannedSets ?? 0) - done.length);
+  return [
+    ...done,
+    ...Array.from(
+      { length: remaining },
+      () => ({ status: "todo", planned: plannedReps2 })
+    )
+  ];
 }
 function CollapsedCard({
   name,
   onToggle,
   summary,
   isPR,
+  indicator,
   setVelocities,
-  velocityZones,
+  setStates,
   totalPlannedSets,
-  supersetPosition
+  stripHeight,
+  supersetPosition,
+  isSelected,
+  isLive
 }) {
-  const [pressed, setPressed] = useState(false);
-  const completedSets = setVelocities?.length ?? 0;
-  const remaining = Math.max(0, (totalPlannedSets ?? 0) - completedSets);
-  const borderRadius = getSupersetBorderRadius(supersetPosition);
-  const supersetMargin = getSupersetMargin(supersetPosition);
-  return /* @__PURE__ */ jsx(
-    Pressable,
+  const plannedReps2 = typeof summary?.reps === "number" ? summary.reps : 0;
+  const row = {
+    density: "compact",
+    name,
+    indicator: indicator ?? (isPR ? "pr" : void 0),
+    setStates: setStates ?? deriveCollapsedSetStates(setVelocities, totalPlannedSets, plannedReps2),
+    stripHeight,
+    isSelected,
+    isLive,
+    onPress: onToggle,
+    style: supersetChrome(supersetPosition)
+  };
+  return summary ? /* @__PURE__ */ jsx(
+    ExerciseCardHeading,
     {
-      onPress: onToggle,
-      onPressIn: () => setPressed(true),
-      onPressOut: () => setPressed(false),
-      accessibilityRole: "button",
-      accessibilityLabel: formatAccessibilityLabel(name, summary, void 0),
-      testID: "exercise-card",
-      children: /* @__PURE__ */ jsxs(
-        View,
-        {
-          className: pressed ? "bg-surface-raised" : void 0,
-          style: {
-            padding: 12,
-            paddingHorizontal: 14,
-            cursor: "pointer",
-            ...borderRadius,
-            ...supersetMargin
-          },
-          children: [
-            /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", testID: "exercise-card-header", children: [
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "h6",
-                  color: "primary",
-                  className: "text-sm font-bold leading-[normal]",
-                  testID: "exercise-card-name",
-                  children: name
-                }
-              ),
-              /* @__PURE__ */ jsx(View, { className: "flex-1" }),
-              summary && /* The demo's "body" face is Inter, which is the library's `font-sans`
-                 (the mapping B1 established for PrBadge), not Typography's `font-body`. */
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "caption",
-                  color: "secondary",
-                  className: "font-sans mr-2 leading-[normal]",
-                  testID: "exercise-card-summary",
-                  children: formatSummary(summary)
-                }
-              ),
-              isPR && /* @__PURE__ */ jsx(View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
-            ] }),
-            (completedSets > 0 || remaining > 0) && /* @__PURE__ */ jsxs(View, { className: "flex-row", style: { marginTop: 6, gap: 4 }, testID: "exercise-card-strips", children: [
-              setVelocities?.map((velocities, i) => /* @__PURE__ */ jsx(
-                VelocityStrip,
-                {
-                  velocities,
-                  zones: velocityZones,
-                  variant: "compact",
-                  height: 8,
-                  hideBaseline: true,
-                  testID: `exercise-card-velocity-strip-${i}`
-                },
-                i
-              )),
-              Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx(
-                PlaceholderStrip,
-                {
-                  testID: `exercise-card-placeholder-${i}`
-                },
-                `placeholder-${i}`
-              ))
-            ] })
-          ]
-        }
-      )
+      ...row,
+      sets: summary.sets,
+      reps: summary.reps,
+      load: summary.weight,
+      unit: summary.unit
     }
-  );
+  ) : /* @__PURE__ */ jsx(ExerciseCardHeading, { ...row });
 }
 function deriveHeaderSetStates(sets) {
   return sets.map((set) => {
@@ -3111,10 +3248,9 @@ function ExpandedCard({
   setStates,
   stripHeight = 8,
   velocityZones,
-  supersetPosition
+  supersetPosition,
+  isLive
 }) {
-  const borderRadius = getSupersetBorderRadius(supersetPosition);
-  const supersetMargin = getSupersetMargin(supersetPosition);
   const unit = summary?.unit ?? sets?.[0]?.unit ?? "lbs";
   const headerStates = setStates ?? (sets ? deriveHeaderSetStates(sets) : []);
   const headerIndicator = indicator ?? (isPR ? "pr" : void 0);
@@ -3122,11 +3258,7 @@ function ExpandedCard({
     View,
     {
       className: "bg-surface-elevated border-hairline",
-      style: {
-        borderWidth: 1,
-        ...borderRadius,
-        ...supersetMargin
-      },
+      style: { borderWidth: 1, ...supersetChrome(supersetPosition) },
       testID: "exercise-card",
       children: [
         /* @__PURE__ */ jsx(
@@ -3141,6 +3273,7 @@ function ExpandedCard({
             indicator: headerIndicator,
             setStates: headerStates,
             stripHeight,
+            isLive,
             onPress: onToggle,
             testID: "exercise-card-heading"
           }
@@ -3168,62 +3301,21 @@ function UpcomingCard({
   name,
   prescription,
   previousBest,
+  indicator,
   supersetPosition,
+  isSelected,
   onToggle
 }) {
-  const borderRadius = getSupersetBorderRadius(supersetPosition);
-  const supersetMargin = getSupersetMargin(supersetPosition);
-  return /* @__PURE__ */ jsx(Pressable, { onPress: onToggle, accessibilityRole: "button", children: /* @__PURE__ */ jsx(
-    View,
-    {
-      style: {
-        opacity: 0.6,
-        padding: 12,
-        paddingHorizontal: 14,
-        ...borderRadius,
-        ...supersetMargin
-      },
-      accessibilityLabel: formatAccessibilityLabel(name, void 0, prescription),
-      testID: "exercise-card",
-      children: /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "h6",
-            color: "primary",
-            className: "shrink-0 text-sm font-bold leading-[normal]",
-            testID: "exercise-card-name",
-            children: name
-          }
-        ),
-        prescription && /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "caption",
-            color: "secondary",
-            maxLines: 1,
-            className: "font-sans shrink ml-2 leading-[normal]",
-            testID: "exercise-card-prescription",
-            children: prescription
-          }
-        ),
-        /* @__PURE__ */ jsx(View, { className: "flex-1", style: { minWidth: 8 } }),
-        previousBest && /* 11px is off the type scale; `2xs` (10px) is the step below, as B2's
-           WorkoutCard date took for the same size. */
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "caption",
-            color: "tertiary",
-            maxLines: 1,
-            className: "font-sans shrink text-2xs leading-[normal]",
-            testID: "exercise-card-previous-best",
-            children: previousBest
-          }
-        )
-      ] })
-    }
-  ) });
+  const row = {
+    density: "upcoming",
+    name,
+    previousBest,
+    indicator,
+    isSelected,
+    onPress: onToggle,
+    style: supersetChrome(supersetPosition)
+  };
+  return prescription !== void 0 ? /* @__PURE__ */ jsx(ExerciseCardHeading, { ...row, prescription }) : /* @__PURE__ */ jsx(ExerciseCardHeading, { ...row });
 }
 function ExerciseCard({
   upcoming,
@@ -3243,7 +3335,9 @@ function ExerciseCard({
   if (upcoming) return /* @__PURE__ */ jsx(UpcomingCard, { ...rest, onToggle });
   return isExpanded ? /* @__PURE__ */ jsx(ExpandedCard, { ...rest, onToggle }) : /* @__PURE__ */ jsx(CollapsedCard, { ...rest, onToggle });
 }
-var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
+var t2 = getSemanticColors("dark");
+var BRAND_PRIMARY = t2["brand-primary"];
+var ON_BRAND_PRIMARY = t2["on-brand-primary"];
 var INPUT_CLASSNAME = "bg-surface-raised border-hairline-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
@@ -3388,7 +3482,7 @@ function InputBar({
                   fontSize: 13,
                   fontWeight: "700",
                   fontFamily: "Inter, sans-serif",
-                  color: "#FFFFFF"
+                  color: ON_BRAND_PRIMARY
                 },
                 children: "Record"
               }
@@ -3615,7 +3709,7 @@ function RestActions({ onAddTime, onSkip }) {
       {
         onPress: onAddTime,
         style: {
-          backgroundColor: "rgba(255,255,255,0.06)",
+          backgroundColor: alpha(primitiveColors.white, 0.06),
           paddingVertical: 8,
           paddingHorizontal: 20,
           borderRadius: 8
@@ -3638,7 +3732,7 @@ function RestActions({ onAddTime, onSkip }) {
       {
         onPress: onSkip,
         style: {
-          backgroundColor: "rgba(255,121,0,0.12)",
+          backgroundColor: alpha(BRAND_PRIMARY2, 0.12),
           paddingVertical: 8,
           paddingHorizontal: 20,
           borderRadius: 8
@@ -4169,128 +4263,6 @@ function ActiveWorkoutPage({
     }
   );
 }
-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 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
-    }
-  });
-}
-var FLOATING_ELEVATION_MIN = FLOATING_LIFT_MIN;
-function getPressedRecessShadow(fillColor, _mode = "dark") {
-  const { boxShadow } = insetWell(fillColor);
-  return 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 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
-    }
-  });
-}
-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 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 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 useResolvedSurface(props) {
-  const inherited = useSurface();
-  const { level, raise, elevation, pressed, lift, liftOptions, theme } = props;
-  return useMemo(
-    () => resolveSurfaceDepth(inherited, {
-      level,
-      raise,
-      elevation,
-      pressed,
-      lift,
-      liftOptions,
-      theme
-    }),
-    [inherited, level, raise, elevation, pressed, lift, liftOptions, theme]
-  );
-}
-
-// src/components/ui/card/Card.tsx
 var EDGE_CLASS = {
   elevated: "",
   accent: "",
@@ -4570,11 +4542,11 @@ var WARNING = t3["status-warning"];
 var ERROR = t3["status-error"];
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY4, 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 GAUGE_GRADIENT = `linear-gradient(90deg, ${alpha(SUCCESS, 0.25)} 0%, ${alpha(WARNING, 0.25)} 50%, ${alpha(ERROR, 0.25)} 100%)`;
 var STATUS_VARIANTS = {
-  success: { bg: "rgba(46,213,115,0.15)", border: "rgba(46,213,115,0.3)", text: SUCCESS },
-  warning: { bg: "rgba(249,180,21,0.15)", border: "rgba(249,180,21,0.3)", text: WARNING },
-  error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
+  success: { bg: alpha(SUCCESS, 0.15), border: alpha(SUCCESS, 0.3), text: SUCCESS },
+  warning: { bg: alpha(WARNING, 0.15), border: alpha(WARNING, 0.3), text: WARNING },
+  error: { bg: alpha(ERROR, 0.15), border: alpha(ERROR, 0.25), text: ERROR }
 };
 function clamp01(value) {
   if (!Number.isFinite(value)) return 0;
@@ -4727,7 +4699,7 @@ function Gauge({ gauge }) {
                     bottom: 0,
                     width: 1,
                     marginLeft: -0.5,
-                    backgroundColor: "rgba(255,255,255,0.3)"
+                    backgroundColor: alpha(primitiveColors.white, 0.3)
                   },
                   testID: "meso-status-card-gauge-center"
                 }
@@ -4836,9 +4808,9 @@ function MesoStatusCard({
             View,
             {
               style: {
-                backgroundColor: "rgba(249,180,21,0.06)",
+                backgroundColor: alpha(WARNING, 0.06),
                 borderWidth: 1,
-                borderColor: "rgba(249,180,21,0.15)",
+                borderColor: alpha(WARNING, 0.15),
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -4864,9 +4836,9 @@ function MesoStatusCard({
               className: "flex-row items-center",
               style: {
                 gap: 8,
-                backgroundColor: "rgba(46,213,115,0.06)",
+                backgroundColor: alpha(SUCCESS, 0.06),
                 borderWidth: 1,
-                borderColor: "rgba(46,213,115,0.2)",
+                borderColor: alpha(SUCCESS, 0.2),
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -4901,11 +4873,11 @@ var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
 var STATUS_SUCCESS2 = sem["status-success"];
 var STATUS_ERROR2 = sem["status-error"];
 var STATUS_WARNING2 = sem["status-warning"];
-var GRID_LINE = "rgba(255,255,255,0.06)";
-var SUCCESS_PILL_BG = "rgba(46,213,115,0.10)";
-var SUCCESS_PILL_BORDER = "rgba(46,213,115,0.20)";
-var ERROR_PILL_BG = "rgba(209,67,67,0.10)";
-var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
+var GRID_LINE = alpha(primitiveColors.white, 0.06);
+var SUCCESS_PILL_BG = alpha(STATUS_SUCCESS2, 0.1);
+var SUCCESS_PILL_BORDER = alpha(STATUS_SUCCESS2, 0.2);
+var ERROR_PILL_BG = alpha(STATUS_ERROR2, 0.1);
+var ERROR_PILL_BORDER = alpha(STATUS_ERROR2, 0.2);
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
@@ -5150,7 +5122,7 @@ function StrengthTrendChart({
                   height,
                   borderLeftWidth: 1,
                   borderStyle: "dashed",
-                  borderLeftColor: "rgba(255,255,255,0.10)"
+                  borderLeftColor: alpha(primitiveColors.white, 0.1)
                 }
               },
               `boundary-${i}`
@@ -5423,9 +5395,9 @@ var STATUS_SUCCESS3 = t4["status-success"];
 var STATUS_WARNING3 = t4["status-warning"];
 var STATUS_INFO = t4["status-info"];
 var DOT_BORDER = "#F3F4F6";
-var BAND_FILL = "rgba(46,213,115,0.1)";
-var BAND_EDGE = "rgba(46,213,115,0.45)";
-var PROJECTION_FILL = "rgba(46,213,115,0.05)";
+var BAND_FILL = alpha(STATUS_SUCCESS3, 0.1);
+var BAND_EDGE = alpha(STATUS_SUCCESS3, 0.45);
+var PROJECTION_FILL = alpha(STATUS_SUCCESS3, 0.05);
 var PADDING_LEFT = 28;
 var PADDING_RIGHT = 10;
 var PADDING_TOP = 8;
@@ -6199,9 +6171,9 @@ function ExerciseDetailPage({
                     paddingVertical: 4,
                     paddingHorizontal: 10,
                     borderRadius: 6,
-                    backgroundColor: "rgba(255,121,0,0.10)",
+                    backgroundColor: alpha(BRAND_PRIMARY6, 0.1),
                     borderWidth: 1,
-                    borderColor: "rgba(255,121,0,0.25)"
+                    borderColor: alpha(BRAND_PRIMARY6, 0.25)
                   },
                   testID: "exercise-detail-page-e1rm",
                   children: [
@@ -6504,13 +6476,16 @@ var toneStyles = {
     // 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.
+    // Label comes from `on-*-subtle`, not the base tone token: the base is tuned to
+    // carry a white label as a solid fill, which left error and accent unreadable
+    // here (AW-133). The on-subtle tokens level the family at one weight.
     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"
+    brand: "bg-brand-primary-subtle border-transparent text-on-brand-primary-subtle",
+    "brand-secondary": "bg-brand-secondary-subtle border-transparent text-on-brand-secondary-subtle",
+    success: "bg-status-success-subtle border-transparent text-on-status-success-subtle",
+    warning: "bg-status-warning-subtle border-transparent text-on-status-warning-subtle",
+    error: "bg-status-error-subtle border-transparent text-on-status-error-subtle",
+    info: "bg-status-info-subtle border-transparent text-on-status-info-subtle"
   },
   outline: {
     neutral: "border-hairline text-text-secondary",
@@ -6824,7 +6799,7 @@ function WorkoutPill({
 var t6 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
-var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
+var TARGET_LINE_COLOR = alpha(t6["status-info"], 0.5);
 var AT_TARGET_GLOW = getGlowShadow(t6["status-info"], "subtle");
 var ZONE = {
   building: t6["status-success"],
@@ -7106,7 +7081,7 @@ var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY7, BRAND_PRIMARY_LIGHT2];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
   const opacity = 0.12 + clamped / 100 * 0.78;
-  return `rgba(255,121,0,${opacity.toFixed(3)})`;
+  return alpha(BRAND_PRIMARY7, opacity);
 }
 function MesoCard({
   name,