@titan-design/react-ui 0.13.0 → 0.14.0

package/dist/index.js

@@ -186,33 +186,41 @@ var statusColors = {
     subtle: "bg-status-success-subtle",
     outline: "border-2 border-status-success bg-transparent",
     solid: "bg-status-success",
+    onSolid: "text-on-status-success",
     border: "border-status-success",
     icon: "text-status-success",
-    text: "text-status-success"
+    text: "text-status-success",
+    subtleText: "text-on-status-success-subtle"
   },
   info: {
     subtle: "bg-status-info-subtle",
     outline: "border-2 border-status-info bg-transparent",
     solid: "bg-status-info",
+    onSolid: "text-on-status-info",
     border: "border-status-info",
     icon: "text-status-info",
-    text: "text-status-info"
+    text: "text-status-info",
+    subtleText: "text-on-status-info-subtle"
   },
   warning: {
     subtle: "bg-status-warning-subtle",
     outline: "border-2 border-status-warning bg-transparent",
     solid: "bg-status-warning",
+    onSolid: "text-on-status-warning",
     border: "border-status-warning",
     icon: "text-status-warning",
-    text: "text-status-warning"
+    text: "text-status-warning",
+    subtleText: "text-on-status-warning-subtle"
   },
   error: {
     subtle: "bg-status-error-subtle",
     outline: "border-2 border-status-error bg-transparent",
     solid: "bg-status-error",
+    onSolid: "text-on-status-error",
     border: "border-status-error",
     icon: "text-status-error",
-    text: "text-status-error"
+    text: "text-status-error",
+    subtleText: "text-on-status-error-subtle"
   }
 };
 var defaultIcons = {
@@ -256,7 +264,7 @@ function Alert({
             className: cn(
               "font-bold",
               isCompact ? "text-base" : "text-lg",
-              isSolid ? "text-white" : colors.icon
+              isSolid ? colors.onSolid : variant === "subtle" ? colors.subtleText : colors.icon
             ),
             children: defaultIcons[status]
           }
@@ -265,7 +273,10 @@ function Alert({
           message != null && /* @__PURE__ */ jsx(
             reactNative.Text,
             {
-              className: cn("text-sm font-semibold", isSolid ? "text-white" : colors.text),
+              className: cn(
+                "text-sm font-semibold",
+                isSolid ? colors.onSolid : variant === "subtle" ? colors.subtleText : colors.text
+              ),
               testID: "alert-message",
               children: message
             }
@@ -279,7 +290,16 @@ function Alert({
             accessibilityRole: "button",
             accessibilityLabel: "Close alert",
             className: "ml-2 p-1 rounded web:hover:bg-black/10 active:bg-black/20",
-            children: /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-lg", isSolid ? "text-white/70" : "text-text-secondary"), children: "\xD7" })
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: cn(
+                  "text-lg",
+                  isSolid ? cn(colors.onSolid, "opacity-70") : "text-text-secondary"
+                ),
+                children: "\xD7"
+              }
+            )
           }
         )
       ]
@@ -300,6 +320,26 @@ var primitiveColors = {
   transparent: "transparent"
 };
 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
@@ -732,6 +772,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],
@@ -767,21 +813,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],
@@ -813,8 +864,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,
@@ -830,7 +881,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
@@ -861,7 +912,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
@@ -879,7 +930,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],
@@ -887,6 +938,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],
@@ -900,7 +959,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,
@@ -918,7 +980,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
@@ -926,14 +988,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
@@ -964,7 +1034,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
@@ -1014,10 +1084,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
@@ -1173,12 +1243,12 @@ function getSemanticColors(mode) {
 // src/components/ui/button/Button.tsx
 var textColorMap = {
   solid: {
-    primary: "#FFFFFF",
-    secondary: "#FFFFFF",
-    success: "#FFFFFF",
-    error: "#FFFFFF",
-    warning: "#FFFFFF",
-    info: "#FFFFFF"
+    primary: semanticColorsDark["on-brand-primary"],
+    secondary: semanticColorsDark["on-brand-secondary"],
+    success: semanticColorsDark["on-status-success"],
+    error: semanticColorsDark["on-status-error"],
+    warning: semanticColorsDark["on-status-warning"],
+    info: semanticColorsDark["on-status-info"]
   },
   outline: {
     primary: semanticColorsDark["brand-primary"],
@@ -1249,12 +1319,12 @@ var variantStyles = {
 };
 var textStyles = {
   solid: {
-    primary: "text-white",
-    secondary: "text-white",
-    success: "text-white",
-    error: "text-white",
-    warning: "text-white",
-    info: "text-white"
+    primary: "text-on-brand-primary",
+    secondary: "text-on-brand-secondary",
+    success: "text-on-status-success",
+    error: "text-on-status-error",
+    warning: "text-on-status-warning",
+    info: "text-on-status-info"
   },
   outline: {
     primary: "text-brand-primary",
@@ -2202,13 +2272,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",
@@ -2377,7 +2450,8 @@ var sizeMap = {
 var colorMap = {
   primary: SPINNER_PRIMARY,
   secondary: SPINNER_SECONDARY,
-  white: "#FFFFFF",
+  white: primitiveColors.white,
+  // VW-82: Tailwind gray-500; no titan grey matches. Left raw, proposed in the PR.
   default: "#6B7280"
 };
 var containerSizes = {
@@ -2578,8 +2652,8 @@ var Checkbox = React26.forwardRef(function Checkbox2({
               !isDisabled && "web:hover:border-brand-primary"
             ),
             children: [
-              isChecked && !isIndeterminate && /* @__PURE__ */ jsx(reactNative.View, { className: cn("bg-white rounded-sm", styles2.icon), children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-brand-primary font-bold text-center leading-none", children: "\u2713" }) }),
-              isIndeterminate && /* @__PURE__ */ jsx(reactNative.View, { className: cn("bg-white h-0.5 w-2/3 rounded") })
+              isChecked && !isIndeterminate && /* @__PURE__ */ jsx(reactNative.View, { className: cn("bg-on-brand-primary rounded-sm", styles2.icon), children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-brand-primary font-bold text-center leading-none", children: "\u2713" }) }),
+              isIndeterminate && /* @__PURE__ */ jsx(reactNative.View, { className: cn("bg-on-brand-primary h-0.5 w-2/3 rounded") })
             ]
           }
         ),
@@ -2636,7 +2710,7 @@ var Switch = React26.forwardRef(function Switch2({
         reactNative.View,
         {
           className: cn(
-            "rounded-full bg-white transition-transform",
+            "rounded-full bg-on-brand-primary transition-transform",
             styles2.thumb,
             isChecked && styles2.translate
           ),
@@ -2696,6 +2770,8 @@ function Modal({
       onPress: handleBackdropPress,
       className: cn(
         "flex-1 items-center justify-center",
+        // VW-82: scrims stay raw — Tailwind v3 drops the `/n` modifier on a
+        // `var()` colour, so a translucent role has to be its own token (proposed).
         backdropBlur ? "bg-black/30 web:backdrop-blur-sm" : "bg-black/50",
         backdropClassName
       ),
@@ -2991,7 +3067,7 @@ function Tab({ index = 0, isDisabled = false, className, children }) {
     ),
     "soft-rounded": cn(
       "px-4 py-2 rounded-full",
-      isActive ? "bg-brand-primary text-white" : "text-text-secondary web:hover:text-text-primary"
+      isActive ? "bg-brand-primary text-on-brand-primary" : "text-text-secondary web:hover:text-text-primary"
     )
   };
   return /* @__PURE__ */ jsx(
@@ -3012,7 +3088,7 @@ function Tab({ index = 0, isDisabled = false, className, children }) {
         {
           className: cn(
             "font-medium",
-            isActive ? variant === "soft-rounded" ? "text-white" : "text-text-primary" : "text-text-secondary"
+            isActive ? variant === "soft-rounded" ? "text-on-brand-primary" : "text-text-primary" : "text-text-secondary"
           ),
           children
         }
@@ -3879,6 +3955,7 @@ function Select({
         accessibilityState: { expanded: isOpen, disabled: isDisabled },
         className: cn(
           "flex-row items-center justify-between px-4 py-2.5 rounded-md border",
+          // VW-82: scrim-style fill, left raw (see Modal.tsx).
           variant === "filled" ? "bg-black/30" : "bg-surface-base",
           isInvalid ? "border-border-input-error" : variant === "filled" ? "border-hairline-subtle" : "border-border-input",
           !isDisabled && !isInvalid && "web:hover:border-border-input-hover",
@@ -3952,7 +4029,7 @@ function SelectOption({ option }) {
               "w-4 h-4 mr-3 rounded border",
               selected ? "bg-brand-primary border-brand-primary" : "border-hairline-strong"
             ),
-            children: selected && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-white text-xs text-center", children: "\u2713" })
+            children: selected && /* @__PURE__ */ jsx(reactNative.Text, { className: "text-on-brand-primary text-xs text-center", children: "\u2713" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4009,6 +4086,8 @@ var lightThemeCSSVars = {
   "--color-brand-secondary-strong": semanticColorsLight["brand-secondary-strong"],
   "--color-on-brand-primary": semanticColorsLight["on-brand-primary"],
   "--color-on-brand-secondary": semanticColorsLight["on-brand-secondary"],
+  "--color-on-brand-primary-subtle": semanticColorsLight["on-brand-primary-subtle"],
+  "--color-on-brand-secondary-subtle": semanticColorsLight["on-brand-secondary-subtle"],
   "--color-status-success": semanticColorsLight["status-success"],
   "--color-status-success-subtle": semanticColorsLight["status-success-subtle"],
   "--color-status-success-muted": semanticColorsLight["status-success-muted"],
@@ -4070,6 +4149,10 @@ var lightThemeCSSVars = {
   "--color-on-status-error": semanticColorsLight["on-status-error"],
   "--color-on-status-warning": semanticColorsLight["on-status-warning"],
   "--color-on-status-info": semanticColorsLight["on-status-info"],
+  "--color-on-status-success-subtle": semanticColorsLight["on-status-success-subtle"],
+  "--color-on-status-error-subtle": semanticColorsLight["on-status-error-subtle"],
+  "--color-on-status-warning-subtle": semanticColorsLight["on-status-warning-subtle"],
+  "--color-on-status-info-subtle": semanticColorsLight["on-status-info-subtle"],
   "--color-result-improve": semanticColorsLight["result-improve"],
   "--color-result-improve-light": semanticColorsLight["result-improve-light"],
   "--color-result-improve-dark": semanticColorsLight["result-improve-dark"],
@@ -4122,6 +4205,8 @@ var darkThemeCSSVars = {
   "--color-brand-secondary-strong": semanticColorsDark["brand-secondary-strong"],
   "--color-on-brand-primary": semanticColorsDark["on-brand-primary"],
   "--color-on-brand-secondary": semanticColorsDark["on-brand-secondary"],
+  "--color-on-brand-primary-subtle": semanticColorsDark["on-brand-primary-subtle"],
+  "--color-on-brand-secondary-subtle": semanticColorsDark["on-brand-secondary-subtle"],
   "--color-status-success": semanticColorsDark["status-success"],
   "--color-status-success-subtle": semanticColorsDark["status-success-subtle"],
   "--color-status-success-muted": semanticColorsDark["status-success-muted"],
@@ -4183,6 +4268,10 @@ var darkThemeCSSVars = {
   "--color-on-status-error": semanticColorsDark["on-status-error"],
   "--color-on-status-warning": semanticColorsDark["on-status-warning"],
   "--color-on-status-info": semanticColorsDark["on-status-info"],
+  "--color-on-status-success-subtle": semanticColorsDark["on-status-success-subtle"],
+  "--color-on-status-error-subtle": semanticColorsDark["on-status-error-subtle"],
+  "--color-on-status-warning-subtle": semanticColorsDark["on-status-warning-subtle"],
+  "--color-on-status-info-subtle": semanticColorsDark["on-status-info-subtle"],
   "--color-result-improve": semanticColorsDark["result-improve"],
   "--color-result-improve-light": semanticColorsDark["result-improve-light"],
   "--color-result-improve-dark": semanticColorsDark["result-improve-dark"],
@@ -4530,7 +4619,67 @@ var audiobookPreset = {
   rootClasses: ["atmosphere-warm", "grain"]
 };
 
+// src/utils/colors.ts
+function getStatusColor(status) {
+  return `var(--color-status-${status})`;
+}
+function getResultColor(result) {
+  return `var(--color-result-${result})`;
+}
+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;
+}
+function getLuminance(color) {
+  if (!color.startsWith("#")) return "dark";
+  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 "dark";
+  }
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "light" : "dark";
+}
+function getContrastText(backgroundColor) {
+  return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
+}
+
 // src/components/ui/toolbar-button/ToolbarButton.tsx
+var ICON_IDLE = "#D1D1D1";
 var ToolbarButtonContext = React26.createContext({
   isOpen: false,
   setIsOpen: () => {
@@ -4580,7 +4729,7 @@ function ToolbarButton({
   const showActive = isActive !== false;
   const getIconColor = () => {
     if (isActive === true) return resolveColor("brand-primary");
-    return showActive ? "#FFFFFF" : "#D1D1D1";
+    return showActive ? primitiveColors.white : ICON_IDLE;
   };
   const getRaisedStyle = () => {
     if (isDisabled) return styles.disabledBg;
@@ -4669,7 +4818,7 @@ function ToolbarButton({
 var styles = reactNative.StyleSheet.create({
   // Disabled - flat gray background, no shadows
   disabledBg: {
-    backgroundColor: "rgba(255, 255, 255, 0.12)",
+    backgroundColor: alpha(primitiveColors.white, 0.12),
     ...reactNative.Platform.select({
       web: { boxShadow: "none" },
       default: { shadowOpacity: 0, elevation: 0 }
@@ -4820,7 +4969,7 @@ function Radio({
               isChecked ? checked : unchecked,
               !isDisabled && !isChecked && "web:hover:border-brand-primary"
             ),
-            children: isChecked && /* @__PURE__ */ jsx(reactNative.View, { className: cn("rounded-full bg-white", inner) })
+            children: isChecked && /* @__PURE__ */ jsx(reactNative.View, { className: cn("rounded-full bg-on-brand-primary", inner) })
           }
         ),
         children && /* @__PURE__ */ jsx(reactNative.Text, { className: cn("ml-2 text-text-primary", text), children })
@@ -4883,7 +5032,13 @@ function Drawer({
     }
   };
   return /* @__PURE__ */ jsx(reactNative.Modal, { visible: isOpen, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-1", children: [
-    /* @__PURE__ */ jsx(reactNative.Pressable, { onPress: handleOverlayPress, className: "absolute inset-0 bg-black/50" }),
+    /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress: handleOverlayPress,
+        className: "absolute inset-0 bg-black/50"
+      }
+    ),
     /* @__PURE__ */ jsxs(
       Surface,
       {
@@ -4961,12 +5116,12 @@ var colorStyles4 = {
   info: "bg-status-info"
 };
 var trackColorStyles = {
-  primary: "bg-brand-primary/20",
-  secondary: "bg-brand-secondary/20",
-  success: "bg-status-success/20",
-  error: "bg-status-error/20",
-  warning: "bg-status-warning/20",
-  info: "bg-status-info/20"
+  primary: "bg-brand-primary-muted",
+  secondary: "bg-brand-secondary-muted",
+  success: "bg-status-success-muted",
+  error: "bg-status-error-muted",
+  warning: "bg-status-warning-muted",
+  info: "bg-status-info-muted"
 };
 function Progress({
   value = 0,
@@ -5203,7 +5358,7 @@ function ToastProvider({
     [defaultDuration, maxToasts]
   );
   const removeToast = React26.useCallback((id) => {
-    setToasts((prev) => prev.filter((t18) => t18.id !== id));
+    setToasts((prev) => prev.filter((t19) => t19.id !== id));
   }, []);
   const removeAllToasts = React26.useCallback(() => {
     setToasts([]);
@@ -5239,22 +5394,22 @@ function useToast() {
 }
 var statusStyles = {
   success: {
-    bg: "bg-status-success/10",
+    bg: "bg-status-success-subtle",
     border: "border-status-success",
     icon: "\u2713"
   },
   error: {
-    bg: "bg-status-error/10",
+    bg: "bg-status-error-subtle",
     border: "border-status-error",
     icon: "\u2715"
   },
   warning: {
-    bg: "bg-status-warning/10",
+    bg: "bg-status-warning-subtle",
     border: "border-status-warning",
     icon: "\u26A0"
   },
   info: {
-    bg: "bg-status-info/10",
+    bg: "bg-status-info-subtle",
     border: "border-status-info",
     icon: "\u2139"
   }
@@ -5864,12 +6019,12 @@ function DataRow({
   ] });
 }
 var colorClasses = {
-  primary: { bg: "bg-brand-primary/10", icon: "text-brand-primary" },
-  secondary: { bg: "bg-brand-secondary/10", icon: "text-brand-secondary" },
-  success: { bg: "bg-status-success/10", icon: "text-status-success" },
-  error: { bg: "bg-status-error/10", icon: "text-status-error" },
-  warning: { bg: "bg-status-warning/10", icon: "text-status-warning" },
-  info: { bg: "bg-status-info/10", icon: "text-status-info" },
+  primary: { bg: "bg-brand-primary-subtle", icon: "text-brand-primary" },
+  secondary: { bg: "bg-brand-secondary-subtle", icon: "text-brand-secondary" },
+  success: { bg: "bg-status-success-subtle", icon: "text-status-success" },
+  error: { bg: "bg-status-error-subtle", icon: "text-status-error" },
+  warning: { bg: "bg-status-warning-subtle", icon: "text-status-warning" },
+  info: { bg: "bg-status-info-subtle", icon: "text-status-info" },
   neutral: { bg: "bg-surface-elevated", icon: "text-text-secondary" }
 };
 var sizeClasses = {
@@ -6643,6 +6798,12 @@ function StepIndicator({
     upcoming: "bg-surface-base border-hairline-strong",
     error: "bg-status-error border-status-error"
   };
+  const glyphStyles = {
+    completed: "text-on-brand-primary",
+    active: "text-on-brand-primary",
+    upcoming: "text-text-secondary",
+    error: "text-on-status-error"
+  };
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
@@ -6651,16 +6812,7 @@ function StepIndicator({
         statusStyles2[status],
         className
       ),
-      children: icon || /* @__PURE__ */ jsx(
-        reactNative.Text,
-        {
-          className: cn(
-            "text-sm font-semibold",
-            status === "upcoming" ? "text-text-secondary" : "text-white"
-          ),
-          children: status === "completed" ? "\u2713" : index + 1
-        }
-      )
+      children: icon || /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-sm font-semibold", glyphStyles[status]), children: status === "completed" ? "\u2713" : index + 1 })
     }
   );
 }
@@ -7030,8 +7182,8 @@ var baseBadgeSizeConfig = {
 var variantColors = {
   plain: { backgroundColor: t2["surface-raised"], borderColor: t2["hairline-default"] },
   pr: {
-    backgroundColor: "rgba(255, 121, 0, 0.12)",
-    borderColor: "rgba(255, 121, 0, 0.3)"
+    backgroundColor: alpha(t2["brand-primary"], 0.12),
+    borderColor: alpha(t2["brand-primary"], 0.3)
   }
 };
 function BaseBadge({
@@ -7261,67 +7413,6 @@ function PrBadge({
   }
   return badge;
 }
-
-// src/utils/colors.ts
-function getStatusColor(status) {
-  return `var(--color-status-${status})`;
-}
-function getResultColor(result) {
-  return `var(--color-result-${result})`;
-}
-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;
-}
-function getLuminance(color) {
-  if (!color.startsWith("#")) return "dark";
-  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 "dark";
-  }
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? "light" : "dark";
-}
-function getContrastText(backgroundColor) {
-  return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
-}
-
-// src/components/custom/Workout/StatusDot.tsx
 var solidFillToken = {
   success: "status-success",
   warning: "status-warning",
@@ -7617,7 +7708,7 @@ function formatPrescription(p) {
   return full.length > 0 ? full : null;
 }
 var METRIC_FONT = "Inter, sans-serif";
-function MetricCell({ children, color, fontSize = 11 }) {
+function MetricCell({ children, color, fontSize = 11, weight = 600 }) {
   return /* @__PURE__ */ jsx(
     reactNative.Text,
     {
@@ -7625,7 +7716,7 @@ function MetricCell({ children, color, fontSize = 11 }) {
         fontFamily: METRIC_FONT,
         fontSize,
         color,
-        fontWeight: "600",
+        fontWeight: String(weight),
         letterSpacing: 1
       },
       children
@@ -7972,7 +8063,10 @@ function DeviationBar({ deviation, width, className, ...props }) {
               width: resolvedWidth,
               borderRadius: 3,
               // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
-              backgroundImage: "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)"
+              // rgba(107,114,128,0.15) at 50% has no exact token match (nearest:
+              // semanticPins.textSecondaryLight #65748B, ΔRGB ~12.7) — left as a
+              // raw literal (VW-78).
+              backgroundImage: `linear-gradient(90deg, ${alpha(t4["status-success"], 0.25)} 0%, rgba(107,114,128,0.15) 50%, ${alpha(t4["status-warning"], 0.25)} 100%)`
             }
           }
         ),
@@ -8003,7 +8097,7 @@ function DeviationBar({ deviation, width, className, ...props }) {
 var t5 = 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(t5["status-info"], 0.5);
 var AT_TARGET_GLOW = getGlowShadow(t5["status-info"], "subtle");
 var ZONE = {
   building: t5["status-success"],
@@ -8397,15 +8491,31 @@ function useLiveRepGrowth(active, liveRepIndex, liveVelocity, isNewPeak) {
   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
+};
+
 // src/components/custom/charts/SetBarChart.tsx
-function mixHex(a, b, t18) {
+function mixHex(a, b, t19) {
   const parse = (h) => {
     const s = h.replace("#", "");
     return [parseInt(s.slice(0, 2), 16), parseInt(s.slice(2, 4), 16), parseInt(s.slice(4, 6), 16)];
   };
   const [ar, ag, ab] = parse(a);
   const [br, bg, bb] = parse(b);
-  const ch = (x, y) => Math.round(x + (y - x) * t18).toString(16).padStart(2, "0");
+  const ch = (x, y) => Math.round(x + (y - x) * t19).toString(16).padStart(2, "0");
   return `#${ch(ar, br)}${ch(ag, bg)}${ch(ab, bb)}`;
 }
 var VARIABLE_FILL = primitiveRamps.cyan[900];
@@ -8413,7 +8523,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)));
@@ -8429,12 +8539,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;
@@ -9257,7 +9367,8 @@ function DualVelocityStrip({
   className,
   ...props
 }) {
-  const resolvedHeight = height ?? (variant === "hero" ? DUAL_HERO_HEIGHT : variant === "compact" ? DUAL_COMPACT_HEIGHT : DUAL_RAIL_HEIGHT);
+  const resolvedVariant = variant === "rail" ? "dual-expanded" : variant;
+  const resolvedHeight = height ?? (resolvedVariant === "hero" ? DUAL_HERO_HEIGHT : resolvedVariant === "compact" ? DUAL_COMPACT_HEIGHT : DUAL_RAIL_HEIGHT);
   const leftDone = streamDone(left);
   const rightDone = streamDone(right);
   const label = `Dual velocity chart, left ${leftDone.length} of ${Math.max(leftDone.length, targetReps ?? leftDone.length)} reps, right ${rightDone.length} of ${Math.max(rightDone.length, targetReps ?? rightDone.length)} reps`;
@@ -9277,8 +9388,9 @@ function DualVelocityStrip({
     label,
     viewProps: props
   };
-  if (variant === "rail") return /* @__PURE__ */ jsx(DualVelocityRail, { ...shared, liveRepIndex });
-  if (variant === "compact") return /* @__PURE__ */ jsx(DualVelocityCompactStrip, { ...shared });
+  if (resolvedVariant === "dual-expanded")
+    return /* @__PURE__ */ jsx(DualVelocityRail, { ...shared, liveRepIndex });
+  if (resolvedVariant === "compact") return /* @__PURE__ */ jsx(DualVelocityCompactStrip, { ...shared });
   return /* @__PURE__ */ jsx(DualVelocityHero, { ...shared, liveRepIndex });
 }
 function VelocityStrip({
@@ -9891,7 +10003,9 @@ function SetRow(set) {
     }
   );
 }
-var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
+var t6 = getSemanticColors("dark");
+var BRAND_PRIMARY = t6["brand-primary"];
+var ON_BRAND_PRIMARY = t6["on-brand-primary"];
 var INPUT_CLASSNAME = "bg-surface-raised border-hairline-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
@@ -10036,7 +10150,7 @@ function InputBar({
                   fontSize: 13,
                   fontWeight: "700",
                   fontFamily: "Inter, sans-serif",
-                  color: "#FFFFFF"
+                  color: ON_BRAND_PRIMARY
                 },
                 children: "Record"
               }
@@ -10056,7 +10170,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
@@ -10079,7 +10193,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
@@ -10291,11 +10405,17 @@ function SetsRepsLoad({
   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(
     reactNative.View,
     {
@@ -10305,19 +10425,19 @@ 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 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 usePulse2(active) {
   const [value] = React26.useState(() => new reactNative.Animated.Value(0));
   React26.useEffect(() => {
@@ -10345,9 +10465,9 @@ function usePulse2(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,
@@ -10708,41 +10828,102 @@ function ExerciseIndicator({ kind, onPress, className, ...props }) {
   }
   return chip;
 }
-function headingLabel(name, sets, reps, load, unit) {
-  const loadLabel = typeof load === "number" ? roundWeight(load) : load;
-  return `${name}, ${sets}\xD7${reps} @ ${loadLabel} ${unit}`;
+
+// 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
+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(reactNative.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(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxs(
       reactNative.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(reactNative.View, { className: "flex-1" }),
           indicator && /* @__PURE__ */ jsx(ExerciseIndicator, { kind: indicator })
         ]
@@ -10755,7 +10936,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(reactNative.View, { className: "flex-1" }),
           tempo && /* @__PURE__ */ jsx(TempoDisplay, { tempo, size: "sm", showLabel: false, showInfo: false })
         ]
@@ -10763,20 +10944,148 @@ function ExerciseHeading({
     )
   ] });
 }
-function ExerciseCardHeading({
-  setStates,
-  stripHeight = 8,
-  dimmed,
-  testID = "exercise-card",
-  ...heading
-}) {
+function InlineHeading({ heading, nameStyle }) {
+  const { unit = "lbs", indicator, previousBest } = heading;
+  const Row = heading.pressTarget === "ancestor" ? reactNative.View : reactNative.Pressable;
   return /* @__PURE__ */ jsxs(
-    reactNative.View,
+    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(reactNative.View, { className: "shrink flex-row items-center", testID: "exercise-card-summary", children: prescriptionNode(heading, unit) }),
+        /* @__PURE__ */ jsx(reactNative.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(reactNative.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 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] = React26.useState(false);
+  const [pressed, setPressed] = React26.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 ? reactNative.Pressable : reactNative.View;
+  const rootPress = rowIsButton ? {
+    ...headingHandlers,
+    onPress: props.onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: exerciseHeadingLabel(props)
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    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(reactNative.View, { style: { marginTop: 7 }, testID: "exercise-card-strip", children: /* @__PURE__ */ jsx(SetStrip, { sets: setStates, height: stripHeight }) })
       ]
     }
@@ -10870,103 +11179,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] = React26.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(
-    reactNative.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(
-        reactNative.View,
-        {
-          className: pressed ? "bg-surface-raised" : void 0,
-          style: {
-            padding: 12,
-            paddingHorizontal: 14,
-            cursor: "pointer",
-            ...borderRadius,
-            ...supersetMargin
-          },
-          children: [
-            /* @__PURE__ */ jsxs(reactNative.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(reactNative.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(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
-            ] }),
-            (completedSets > 0 || remaining > 0) && /* @__PURE__ */ jsxs(reactNative.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) => {
@@ -10991,10 +11255,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);
@@ -11002,11 +11265,7 @@ function ExpandedCard({
     reactNative.View,
     {
       className: "bg-surface-elevated border-hairline",
-      style: {
-        borderWidth: 1,
-        ...borderRadius,
-        ...supersetMargin
-      },
+      style: { borderWidth: 1, ...supersetChrome(supersetPosition) },
       testID: "exercise-card",
       children: [
         /* @__PURE__ */ jsx(
@@ -11021,6 +11280,7 @@ function ExpandedCard({
             indicator: headerIndicator,
             setStates: headerStates,
             stripHeight,
+            isLive,
             onPress: onToggle,
             testID: "exercise-card-heading"
           }
@@ -11048,62 +11308,21 @@ function UpcomingCard({
   name,
   prescription,
   previousBest,
+  indicator,
   supersetPosition,
+  isSelected,
   onToggle
 }) {
-  const borderRadius = getSupersetBorderRadius(supersetPosition);
-  const supersetMargin = getSupersetMargin(supersetPosition);
-  return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress: onToggle, accessibilityRole: "button", children: /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      style: {
-        opacity: 0.6,
-        padding: 12,
-        paddingHorizontal: 14,
-        ...borderRadius,
-        ...supersetMargin
-      },
-      accessibilityLabel: formatAccessibilityLabel(name, void 0, prescription),
-      testID: "exercise-card",
-      children: /* @__PURE__ */ jsxs(reactNative.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(reactNative.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,
@@ -11711,7 +11930,7 @@ var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY3, BRAND_PRIMARY_LIGHT];
 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_PRIMARY3, opacity);
 }
 function MesoCard({
   name,
@@ -12054,12 +12273,13 @@ function PrHistoryModal({
     }
   );
 }
-var t6 = getSemanticColors("dark");
-var BRAND_PRIMARY5 = t6["brand-primary"];
-var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
-var STATUS_SUCCESS2 = t6["status-success"];
-var STATUS_WARNING2 = t6["status-warning"];
-var STATUS_ERROR2 = t6["status-error"];
+var t7 = getSemanticColors("dark");
+var BRAND_PRIMARY5 = t7["brand-primary"];
+var ON_BRAND_PRIMARY2 = t7["on-brand-primary"];
+var BRAND_PRIMARY_SUBTLE = alpha(BRAND_PRIMARY5, 0.12);
+var STATUS_SUCCESS2 = t7["status-success"];
+var STATUS_WARNING2 = t7["status-warning"];
+var STATUS_ERROR2 = t7["status-error"];
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -12256,7 +12476,7 @@ function ReadinessCheck({
               fontSize: 13,
               fontWeight: "700",
               fontFamily: "Inter, sans-serif",
-              color: "#FFFFFF"
+              color: ON_BRAND_PRIMARY2
             },
             children: "Start Workout"
           }
@@ -12265,20 +12485,20 @@ function ReadinessCheck({
     )
   ] }) });
 }
-var t7 = getSemanticColors("dark");
-var BRAND_PRIMARY6 = t7["brand-primary"];
+var t8 = getSemanticColors("dark");
+var BRAND_PRIMARY6 = t8["brand-primary"];
 var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t7["status-success"];
-var WARNING = t7["status-warning"];
-var ERROR = t7["status-error"];
+var SUCCESS = t8["status-success"];
+var WARNING = t8["status-warning"];
+var ERROR = t8["status-error"];
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY6, BRAND_PRIMARY_LIGHT2];
 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;
@@ -12431,7 +12651,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"
                 }
@@ -12540,9 +12760,9 @@ function MesoStatusCard({
             reactNative.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
@@ -12568,9 +12788,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
@@ -12605,16 +12825,16 @@ var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
 var STATUS_SUCCESS3 = sem["status-success"];
 var STATUS_ERROR3 = sem["status-error"];
 var STATUS_WARNING3 = 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_SUCCESS3, 0.1);
+var SUCCESS_PILL_BORDER = alpha(STATUS_SUCCESS3, 0.2);
+var ERROR_PILL_BG = alpha(STATUS_ERROR3, 0.1);
+var ERROR_PILL_BORDER = alpha(STATUS_ERROR3, 0.2);
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t18 = Date.parse(dateStr);
-  return Number.isNaN(t18) ? 0 : t18;
+  const t19 = Date.parse(dateStr);
+  return Number.isNaN(t19) ? 0 : t19;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -12854,7 +13074,7 @@ function StrengthTrendChart({
                   height,
                   borderLeftWidth: 1,
                   borderStyle: "dashed",
-                  borderLeftColor: "rgba(255,255,255,0.10)"
+                  borderLeftColor: alpha(primitiveColors.white, 0.1)
                 }
               },
               `boundary-${i}`
@@ -13122,14 +13342,14 @@ function StrengthTrendChart({
     )
   ] });
 }
-var t8 = getSemanticColors("dark");
-var STATUS_SUCCESS4 = t8["status-success"];
-var STATUS_WARNING4 = t8["status-warning"];
-var STATUS_INFO = t8["status-info"];
+var t9 = getSemanticColors("dark");
+var STATUS_SUCCESS4 = t9["status-success"];
+var STATUS_WARNING4 = t9["status-warning"];
+var STATUS_INFO = t9["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_SUCCESS4, 0.1);
+var BAND_EDGE = alpha(STATUS_SUCCESS4, 0.45);
+var PROJECTION_FILL = alpha(STATUS_SUCCESS4, 0.05);
 var PADDING_LEFT = 28;
 var PADDING_RIGHT = 10;
 var PADDING_TOP = 8;
@@ -13168,8 +13388,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t18 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t18 * (b[key] - a[key]);
+      const t19 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t19 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -13534,10 +13754,10 @@ function CapacityBandChart({
     }
   );
 }
-var t9 = getSemanticColors("dark");
+var t10 = getSemanticColors("dark");
 var DEFAULT_TRACK_COLOR = greyRamp[800];
 var DEFAULT_MARKER_COLOR2 = primitiveColors.white;
-var TICK_COLOR = t9["text-tertiary"];
+var TICK_COLOR = t10["text-tertiary"];
 var ZONE_SIZES = {
   default: {
     trackHeight: 14,
@@ -13720,7 +13940,7 @@ function ZoneTrack({
           ),
           ticks?.map((tick, i) => {
             const emphasized = tick.emphasized === true;
-            const lineColor = tick.color ?? (emphasized ? t9["brand-primary"] : TICK_COLOR);
+            const lineColor = tick.color ?? (emphasized ? t10["brand-primary"] : TICK_COLOR);
             const lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal;
             return /* @__PURE__ */ jsx(
               reactNative.View,
@@ -13751,7 +13971,7 @@ function ZoneTrack({
               if (tick.label == null) return null;
               const emphasized = tick.emphasized === true;
               if (!showTickLabel(i, emphasized)) return null;
-              const labelColor = tick.color ?? (emphasized ? t9["brand-primary"] : TICK_COLOR);
+              const labelColor = tick.color ?? (emphasized ? t10["brand-primary"] : TICK_COLOR);
               const labelNode = /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
@@ -13983,7 +14203,7 @@ function StatusPill2({ status, label, className, ...props }) {
     }
   );
 }
-var t10 = getSemanticColors("dark");
+var t11 = getSemanticColors("dark");
 var categoryToken = {
   productive: null,
   threshold: "status-warning",
@@ -13996,7 +14216,7 @@ var floodOpacity = {
 };
 function liveAuraColor(category) {
   const token = categoryToken[category];
-  return token ? t10[token] : null;
+  return token ? t11[token] : null;
 }
 function LiveAuraFrame({
   category,
@@ -14025,9 +14245,9 @@ function LiveAuraFrame({
           position: "relative",
           overflow: "hidden",
           borderRadius: 10,
-          backgroundColor: t10["background-base"],
+          backgroundColor: t11["background-base"],
           borderWidth: 1,
-          borderColor: t10["hairline-default"]
+          borderColor: t11["hairline-default"]
         },
         style
       ],
@@ -14134,14 +14354,14 @@ function panelBodySplit(bodyHeight, layout) {
 }
 
 // src/components/custom/Fatigue/fatigue-tokens.ts
-var t11 = getSemanticColors("dark");
+var t12 = getSemanticColors("dark");
 var FONT_HEAD = '"Space Grotesk", sans-serif';
 var FONT_UI = '"Nunito Sans", sans-serif';
 var FONT_MONO = "monospace";
 var TONE_COLOR = {
-  ok: t11["status-success"],
-  warn: t11["status-warning"],
-  alarm: t11["status-error"]
+  ok: t12["status-success"],
+  warn: t12["status-warning"],
+  alarm: t12["status-error"]
 };
 var STATE_LABEL = {
   good: "Good",
@@ -14200,13 +14420,13 @@ function auraForVerdict(state) {
 }
 
 // src/components/custom/Fatigue/VerdictHero.tsx
-var t12 = getSemanticColors("dark");
+var t13 = getSemanticColors("dark");
 function formatRpe(rpe) {
   if (rpe == null) return "\u2014";
   return (Math.round(rpe * 2) / 2).toFixed(1);
 }
 function VerdictHero({ rpe, verdict }) {
-  const tone = verdict ? TONE_COLOR[verdict.tone] : t12["text-tertiary"];
+  const tone = verdict ? TONE_COLOR[verdict.tone] : t13["text-tertiary"];
   const word = verdict ? STATE_LABEL[verdict.state] : "Warming up";
   return /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 6 }, testID: "verdict-hero", children: [
     /* @__PURE__ */ jsx(
@@ -14216,7 +14436,7 @@ function VerdictHero({ rpe, verdict }) {
           fontSize: 9,
           letterSpacing: 1.5,
           fontFamily: FONT_MONO,
-          color: t12["text-tertiary"]
+          color: t13["text-tertiary"]
         },
         children: "FATIGUE"
       }
@@ -14255,7 +14475,7 @@ function VerdictHero({ rpe, verdict }) {
     ] })
   ] });
 }
-var t13 = getSemanticColors("dark");
+var t14 = getSemanticColors("dark");
 var TONE_VARIANT = {
   ok: "success",
   warn: "warning",
@@ -14283,7 +14503,7 @@ function Light({
               fontSize: 9,
               letterSpacing: 0.6,
               fontFamily: FONT_MONO,
-              color: t13["text-secondary"]
+              color: t14["text-secondary"]
             },
             children: label
           }
@@ -14392,14 +14612,14 @@ function RomProgressionChart({
 }
 
 // src/components/custom/Fatigue/tempo-pacing.ts
-var t14 = getSemanticColors("dark");
+var t15 = getSemanticColors("dark");
 var ON_TARGET_MS2 = 100;
 function phaseFillFraction(elapsedMs, targetMs) {
   if (targetMs == null || targetMs <= 0) return 1;
   return Math.min(1, Math.max(0, elapsedMs / targetMs));
 }
 function pacingTone(elapsedMs, targetMs) {
-  if (targetMs == null || targetMs <= 0) return t14["text-primary"];
+  if (targetMs == null || targetMs <= 0) return t15["text-primary"];
   const remainingMs = targetMs - elapsedMs;
   if (remainingMs > ON_TARGET_MS2) return PACING_TONE.ahead;
   if (remainingMs >= -ON_TARGET_MS2) return PACING_TONE.onPace;
@@ -14415,11 +14635,11 @@ function prescribedSegments(tempo) {
     ["hold", pauseTop]
   ];
   const out = [];
-  let t18 = 0;
+  let t19 = 0;
   for (const [phase, seconds] of order) {
     const ms = seconds * 1e3;
-    if (ms > 0) out.push({ phase, startMs: t18, endMs: t18 + ms });
-    t18 += ms;
+    if (ms > 0) out.push({ phase, startMs: t19, endMs: t19 + ms });
+    t19 += ms;
   }
   return out;
 }
@@ -14443,7 +14663,7 @@ function phaseTargetsMs(phases, tempo) {
 }
 
 // src/components/custom/Fatigue/GhostBand.tsx
-var t15 = getSemanticColors("dark");
+var t16 = getSemanticColors("dark");
 var BAND_H = 16;
 var BAND_GAP = 4;
 var PHASE_LABEL = {
@@ -14463,7 +14683,7 @@ function GhostBand({
   top,
   height = BAND_H,
   showLabels = false,
-  labelColor = t15["text-primary"],
+  labelColor = t16["text-primary"],
   targetTempoSeconds = null,
   prescribed = false
 }) {
@@ -14578,8 +14798,8 @@ function GhostBand({
     ] })
   ] });
 }
-var t16 = getSemanticColors("dark");
-var PARCH = t16["text-primary"];
+var t17 = getSemanticColors("dark");
+var PARCH = t17["text-primary"];
 function smoothPath(pts) {
   if (pts.length < 2) return pts.length ? `M ${pts[0][0]} ${pts[0][1]}` : "";
   let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
@@ -14725,7 +14945,7 @@ function GhostSpark({
 var PAD = 18;
 var GHOST_GUTTER = 4;
 function LiveFatigueCard({ model, width = 318, height }) {
-  const t18 = getSemanticColors(useSurfaceMode());
+  const t19 = getSemanticColors(useSurfaceMode());
   const chartW = width - PAD * 2 - GHOST_GUTTER * 2;
   const chartH = cardChartHeight(height);
   return /* @__PURE__ */ jsxs(
@@ -14739,8 +14959,8 @@ function LiveFatigueCard({ model, width = 318, height }) {
         borderRadius: 14,
         padding: PAD,
         borderWidth: 1,
-        borderColor: t18["hairline-default"],
-        ...barPaper(t18["surface-base"])
+        borderColor: t19["hairline-default"],
+        ...barPaper(t19["surface-base"])
       },
       children: [
         /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 12 }, children: [
@@ -14843,7 +15063,7 @@ function LiveFatiguePanel({
     }
   );
 }
-var t17 = getSemanticColors("dark");
+var t18 = getSemanticColors("dark");
 function phaseAt(segments, ms) {
   const hit = segments.find((s) => ms >= s.startMs && ms < s.endMs);
   return hit ? hit.phase : null;
@@ -14908,7 +15128,7 @@ function DualGhostSpark({
       cur,
       current: cur ? toPts(cur) : [],
       ghosts: curves.slice(0, -1).map(toPts),
-      tint: cur ? ghostLineColor(cur.tempoDeviation, cur.grindSignature) : t17["text-tertiary"]
+      tint: cur ? ghostLineColor(cur.tempoDeviation, cur.grindSignature) : t18["text-tertiary"]
     };
   };
   const up = wing(left);
@@ -14942,7 +15162,7 @@ function DualGhostSpark({
         x,
         top: bandTop,
         showLabels: true,
-        labelColor: alpha(t17["text-primary"], 0.92),
+        labelColor: alpha(t18["text-primary"], 0.92),
         targetTempoSeconds
       }
     ),
@@ -14956,7 +15176,7 @@ function DualGhostSpark({
           fontWeight: 800,
           letterSpacing: 1,
           fontFamily: FONT_UI,
-          fill: t17["text-tertiary"],
+          fill: t18["text-tertiary"],
           children: leftLabel
         }
       ),
@@ -14969,7 +15189,7 @@ function DualGhostSpark({
           fontWeight: 800,
           letterSpacing: 1,
           fontFamily: FONT_UI,
-          fill: t17["text-tertiary"],
+          fill: t18["text-tertiary"],
           children: rightLabel
         }
       )
@@ -15060,6 +15280,7 @@ function Treemap({
       {
         id: "__more__",
         value: restValue,
+        // VW-82: no token at this value (nearest surface-overlay #373635); proposed, not swapped.
         color: "#3a3a3a",
         label: `+${clean.length - (maxTiles - 1)} more`
       }
@@ -15087,20 +15308,21 @@ function Treemap({
           borderRadius: 3,
           opacity: selected ? 1 : 0.9,
           borderWidth: selected ? 2 : 0,
-          borderColor: "#ffffff",
+          borderColor: primitiveColors.white,
           padding: 4,
           overflow: "hidden"
         },
-        children: labelFits2 && /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 2, className: "text-[10px] font-semibold text-[#0b0b0b]", children: r.datum.label ?? r.datum.id })
+        children: labelFits2 && // VW-82: label on a data-coloured tile; no on-data token exists yet.
+        /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 2, className: "text-[10px] font-semibold text-[#0b0b0b]", children: r.datum.label ?? r.datum.id })
       },
       r.datum.id
     );
   }) });
 }
 var PALETTE2 = DATAVIZ_CATEGORICAL_PALETTE;
-var GRID_LINE2 = "rgba(255,255,255,0.07)";
-var AXIS_LINE = "rgba(255,255,255,0.18)";
-var DIAGONAL_LINE = "rgba(255,255,255,0.28)";
+var GRID_LINE2 = alpha(primitiveColors.white, 0.07);
+var AXIS_LINE = alpha(primitiveColors.white, 0.18);
+var DIAGONAL_LINE = alpha(primitiveColors.white, 0.28);
 var DEFAULT_R = 6;
 var PLOT_LEFT2 = 40;
 var PLOT_RIGHT = 12;
@@ -15195,8 +15417,8 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t18, i) => {
-            const y = toY(t18);
+          ticksOf(yd, TICK_COUNT).map((t19, i) => {
+            const y = toY(t19);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
@@ -15221,15 +15443,15 @@ function Scatter({
                       width: PLOT_LEFT2 - 6,
                       textAlign: "right"
                     },
-                    children: formatTick(t18)
+                    children: formatTick(t19)
                   }
                 )
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t18, i) => {
-            const x = toX(t18);
+          ticksOf(xd, TICK_COUNT).map((t19, i) => {
+            const x = toX(t19);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
@@ -15254,7 +15476,7 @@ function Scatter({
                       width: 32,
                       textAlign: "center"
                     },
-                    children: formatTick(t18)
+                    children: formatTick(t19)
                   }
                 )
               },
@@ -15360,7 +15582,7 @@ function Scatter({
                 backgroundColor: p.color,
                 opacity: selected ? 1 : 0.82,
                 borderWidth: selected ? 2 : 0,
-                borderColor: "#ffffff"
+                borderColor: primitiveColors.white
               },
               children: showLabel && /* @__PURE__ */ jsx(
                 reactNative.Text,
@@ -15388,7 +15610,7 @@ var sem2 = getSemanticColors("dark");
 var STATUS_SUCCESS5 = sem2["status-success"];
 var STATUS_WARNING5 = sem2["status-warning"];
 var STATUS_ERROR4 = sem2["status-error"];
-var TRACK = "rgba(255,255,255,0.08)";
+var TRACK = alpha(primitiveColors.white, 0.08);
 var DEFAULT_THRESHOLDS2 = [
   { value: 0, color: STATUS_ERROR4 },
   { value: 60, color: STATUS_WARNING5 },
@@ -15459,23 +15681,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t18) => /* @__PURE__ */ jsx(
+        ticks.map((t19) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t18.left - tickThickness / 2,
-              top: t18.top - tickLength / 2,
+              left: t19.left - tickThickness / 2,
+              top: t19.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t18.color,
-              transform: [{ rotate: t18.rotate }]
+              backgroundColor: t19.color,
+              transform: [{ rotate: t19.rotate }]
             }
           },
-          t18.key
+          t19.key
         )),
         /* @__PURE__ */ jsxs(
           reactNative.View,
@@ -16124,7 +16346,7 @@ var TASK_COMPARATORS = {
 function SeverityLegend({ tasks }) {
   const counts = React26.useMemo(() => {
     const c2 = { critical: 0, high: 0, medium: 0, low: 0 };
-    for (const t18 of tasks) if (t18.severity) c2[t18.severity]++;
+    for (const t19 of tasks) if (t19.severity) c2[t19.severity]++;
     return c2;
   }, [tasks]);
   return /* @__PURE__ */ jsx(reactNative.View, { className: "flex-row items-center gap-3", children: SEVERITY_ORDER.map((severity) => /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center gap-1.5", children: [
@@ -16546,7 +16768,7 @@ function SessionDetail({
 }) {
   const refs = React26.useMemo(() => extractTaskRefs(session.body), [session.body]);
   const touched = React26.useMemo(
-    () => refs.map((id) => tasks.find((t18) => t18.id === id)).filter((t18) => !!t18),
+    () => refs.map((id) => tasks.find((t19) => t19.id === id)).filter((t19) => !!t19),
     [refs, tasks]
   );
   const body = React26.useMemo(() => stripLeadingHeading(session.body), [session.body]);
@@ -16630,7 +16852,7 @@ function StepButton({
         Typography,
         {
           variant: "body2",
-          className: cn("leading-none", disabled ? "text-text-tertiary/40" : "text-text-secondary"),
+          className: cn("leading-none", disabled ? "text-text-disabled" : "text-text-secondary"),
           children: glyph
         }
       )
@@ -17600,6 +17822,9 @@ exports.defaultPreset = defaultPreset;
 exports.discreteRainbow = discreteRainbow;
 exports.divergingScale = divergingScale;
 exports.elevationPlane = elevationPlane;
+exports.exerciseHeadingLabel = exerciseHeadingLabel;
+exports.exerciseLiveColor = exerciseLiveColor;
+exports.exerciseRowStateColor = exerciseRowStateColor;
 exports.extractTaskRefs = extractTaskRefs;
 exports.fitColumns = fitColumns;
 exports.formatCompact = formatCompact;
@@ -17672,6 +17897,7 @@ exports.raisedLevel = raisedLevel;
 exports.resolveColor = resolveColor;
 exports.resolveIndicator = resolveIndicator;
 exports.resolveSurfaceDepth = resolveSurfaceDepth;
+exports.resultPaletteColors = resultPaletteColors;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsv = rgbToHsv;
 exports.roundRpe = roundRpe;
@@ -17680,6 +17906,7 @@ exports.roundWeight = roundWeight;
 exports.rpeColor = rpeColor;
 exports.semanticColorsDark = semanticColorsDark;
 exports.semanticColorsLight = semanticColorsLight;
+exports.semanticPins = semanticPins;
 exports.semanticTypography = semanticTypography;
 exports.sequentialEffort = sequentialEffort;
 exports.sessionLinkers = sessionLinkers;