@titan-design/react-ui 0.9.3 → 0.11.0

package/dist/pages.js

@@ -36,17 +36,27 @@ var primitiveColors = {
   // Charcoal scale (dark backgrounds)
   charcoal: {
     0: "#6E6E6E",
-    100: "#4C4C4C",
     200: "#3C3C3C",
     300: "#2C2C2C",
     400: "#1F1F1F",
-    500: "#1C1C1C",
-    600: "#191919",
-    700: "#161616",
-    900: "#101010"
-  },
+    500: "#1C1C1C"},
   // Pure colors
   white: "#FFFFFF"};
+var surfaceRampDark = {
+  inset: "#13100D",
+  // L*4.5  — sub-shell well / pressed
+  background: "#1C1916",
+  // L*9    — shell / frame
+  base: "#252321",
+  // L*13.5 — main content plane
+  elevated: "#2C2A28",
+  // L*17   — nav / rail
+  raised: "#31302F",
+  // L*20   — cards
+  overlay: "#373635"
+  // L*22.5 — hero / popover
+};
+var backgroundFrameDark = "#100D0A";
 var primitiveRamps = {
   red: {
     50: "#FFF4F4",
@@ -171,275 +181,1077 @@ var WORKOUT_TOKENS = {
     fill: "#3A3A3A"
   }};
 
-// src/utils/workout-format.ts
-function roundRpe(rpe) {
-  return Math.round(rpe * 2) / 2;
-}
-function roundWeight(weight) {
-  return Math.round(weight);
-}
-function formatVelocity(velocity) {
-  return velocity.toFixed(2);
+// src/theme/tokens/semantic.ts
+var semanticColorsLight = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveRamps.orange[500],
+  "brand-primary-active": primitiveRamps.orange[600],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-hover": primitiveRamps.cyan[700],
+  "brand-secondary-active": primitiveRamps.cyan[800],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": primitiveRamps.green[50],
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": primitiveRamps.red[50],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  // vivid alert red
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": primitiveRamps.amber[50],
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": primitiveRamps.blue[50],
+  // 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",
+  // Green - positive outcome
+  "result-improve-light": "rgba(76, 175, 80, 0.12)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  // Red - negative outcome
+  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  // Gray - no clear result
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
+  "result-neutral": primitiveColors.neutral[500],
+  // Neutral baseline
+  // Text on result backgrounds (on-result-*)
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (data-*)
+  // First 10 colors from discrete rainbow optimized for charts
+  "data-1": discreteRainbow[9],
+  // Blue
+  "data-2": discreteRainbow[14],
+  // Green
+  "data-3": discreteRainbow[17],
+  // Yellow
+  "data-4": discreteRainbow[25],
+  // Red
+  "data-5": discreteRainbow[8],
+  // Purple
+  "data-6": discreteRainbow[20],
+  // Orange
+  "data-7": discreteRainbow[13],
+  // Light Blue
+  "data-8": discreteRainbow[15],
+  // Light Green
+  "data-9": discreteRainbow[3],
+  // Lavender
+  "data-10": discreteRainbow[22],
+  // Dark Orange
+  // Text colors (text-*)
+  "text-primary": "#121828",
+  "text-secondary": "#65748B",
+  "text-tertiary": primitiveColors.neutral[400],
+  "text-disabled": "rgba(55, 65, 81, 0.48)",
+  "text-inverse": primitiveColors.white,
+  "text-link": primitiveColors.blue[600],
+  "text-link-hover": primitiveColors.blue[700],
+  // Surface colors (surface-*) - for elevated containers
+  "surface-base": primitiveColors.white,
+  "surface-elevated": primitiveColors.neutral[50],
+  // slightly off-white for elevated cards
+  "surface-raised": primitiveColors.neutral[100],
+  // light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": primitiveColors.neutral[50],
+  // Input field background (filled variant)
+  // Deepest pressed pit (TD-surface-tokens, S-3) — light-mode counterpart of
+  // the dark ramp's `inset` plane; a placeholder pairing, not part of the
+  // dark-ramp investigation (surface.contract.test.ts is dark-mode only).
+  "surface-inset": primitiveColors.neutral[300],
+  // Background colors (background-*)
+  "background-base": "#EBEBEB",
+  "background-default": primitiveColors.white,
+  "background-subtle": primitiveColors.neutral[50],
+  // Frame/bezel chrome (TD-surface-tokens, S-3) — top bar + side nav shell,
+  // one step below `background-base` (darker still than `surface-inset`
+  // above, mirroring the dark-mode ordering). Placeholder pairing for light
+  // mode (see dark-mode note on `surface-inset` above).
+  "background-frame": primitiveColors.neutral[400],
+  // Border colors (border-*)
+  "border-default": "#E8E9EB",
+  "border-subtle": primitiveColors.neutral[100],
+  "border-strong": primitiveColors.neutral[300],
+  "border-prominent": primitiveColors.neutral[400],
+  // high-visibility divider
+  "border-focus": primitiveColors.blue[600],
+  "border-input": primitiveColors.neutral[300],
+  // Input field border
+  "border-input-hover": primitiveColors.neutral[400],
+  // Input field border on hover
+  "border-input-focus": primitiveColors.blue[600],
+  // Input field border on focus
+  "border-input-error": primitiveColors.red[600],
+  // Input field border on error
+  // Alpha hairline separators (surface-independent — composite toward black on
+  // light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
+  "hairline-subtle": "rgba(0, 0, 0, 0.06)",
+  "hairline-default": "rgba(0, 0, 0, 0.09)",
+  "hairline-strong": "rgba(0, 0, 0, 0.14)",
+  // Interactive states (interactive-*)
+  "interactive-hover": "rgba(55, 65, 81, 0.04)",
+  "interactive-focus": "rgba(55, 65, 81, 0.12)",
+  "interactive-active": "rgba(55, 65, 81, 0.16)",
+  "interactive-selected": "rgba(55, 65, 81, 0.08)",
+  "interactive-disabled": "rgba(55, 65, 81, 0.12)",
+  "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
+  // Divider
+  "divider": "#E8E9EB",
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[500],
+  "avatar-text": primitiveColors.white
+};
+var semanticColorsDark = {
+  // Brand colors stay the same in dark mode
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveRamps.orange[300],
+  "brand-primary-active": primitiveRamps.orange[200],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-hover": primitiveRamps.cyan[500],
+  "brand-secondary-active": primitiveRamps.cyan[400],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
+  "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)",
+  "status-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-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)",
+  // Text on status backgrounds
+  "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-light": "rgba(76, 175, 80, 0.16)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  "result-degrade-light": "rgba(239, 83, 80, 0.16)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
+  "result-neutral": primitiveColors.neutral[400],
+  // Text on result backgrounds
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (same in dark mode for consistency)
+  "data-1": discreteRainbow[9],
+  "data-2": discreteRainbow[14],
+  "data-3": discreteRainbow[17],
+  "data-4": discreteRainbow[25],
+  "data-5": discreteRainbow[8],
+  "data-6": discreteRainbow[20],
+  "data-7": discreteRainbow[13],
+  "data-8": discreteRainbow[15],
+  "data-9": discreteRainbow[3],
+  "data-10": discreteRainbow[22],
+  // Text colors - inverted for dark mode
+  "text-primary": primitiveColors.neutral[100],
+  "text-secondary": primitiveColors.neutral[400],
+  "text-tertiary": primitiveColors.neutral[500],
+  "text-disabled": "rgba(255, 255, 255, 0.38)",
+  "text-inverse": primitiveColors.neutral[900],
+  "text-link": "#828DF8",
+  "text-link-hover": primitiveColors.blue[400],
+  // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
+  // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
+  // `surfaceRampDark` in primitives.ts for the full derivation note. `surface-overlay`
+  // and `surface-elevated` are distinct (were both #191919 pre-S-1); `surface-input`
+  // tracks one plane above `surface-base`, same relative position as before the remap.
+  // `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
+  // so it takes the ramp's `background` (shell/frame) role, NOT `inset`. The ramp's
+  // deepest `inset` plane is now promoted to `surface-inset` below (S-3) — still no
+  // `SurfaceLevel` member for it (follow-up, alongside the elevation.ts -1/-2 pressed
+  // levels — parallel workstream, not this branch).
+  "surface-base": surfaceRampDark.base,
+  // main surface        (#252321, L*13.5)
+  "surface-elevated": surfaceRampDark.elevated,
+  // elevated surface     (#2C2A28, L*17   — nav/rail)
+  "surface-raised": surfaceRampDark.raised,
+  // raised surface       (#31302F, L*20   — cards)
+  "surface-overlay": surfaceRampDark.overlay,
+  // overlay surface      (#373635, L*22.5 — hero/popover)
+  "surface-input": surfaceRampDark.elevated,
+  // input surface        (#2C2A28 — one plane above base)
+  "surface-inset": surfaceRampDark.inset,
+  // deepest pressed pit  (#13100D, L*4.5  — sub-shell well)
+  // Background colors — same ramp, the frame/shell end of it.
+  "background-base": surfaceRampDark.background,
+  // shell / frame        (#1C1916, L*9 — Surface level="background")
+  "background-default": surfaceRampDark.base,
+  // main background      (#252321, L*13.5 — matches surface-base)
+  "background-subtle": surfaceRampDark.elevated,
+  // subtle background    (#2C2A28, L*17 — matches surface-elevated)
+  // Frame/bezel chrome (S-3) — the top bar + side nav shell; one step BELOW
+  // `background-base`, darker even than `surface-inset` — it exits the content
+  // ramp entirely rather than sitting in it. See `backgroundFrameDark` in
+  // primitives.ts.
+  "background-frame": backgroundFrameDark,
+  // frame / bezel        (#100D0A, L*3.79)
+  // Border colors — `border-subtle` (#1C1C1C) previously collided with
+  // `surface-raised` (also #1C1C1C, an invisible border on raised cards). The
+  // re-spaced ramp above moved `surface-raised` to #2D2C2B, so this value is now
+  // distinct from every surface hex without needing to change it — see
+  // `surface.contract.test.ts` R2/R4.
+  "border-default": primitiveColors.charcoal[400],
+  // default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // subtle border
+  "border-strong": primitiveColors.charcoal[300],
+  // strong border
+  "border-prominent": primitiveColors.charcoal[200],
+  // high-visibility divider
+  "border-focus": "#828DF8",
+  "border-input": primitiveColors.neutral[600],
+  "border-input-hover": primitiveColors.neutral[500],
+  "border-input-focus": "#828DF8",
+  "border-input-error": primitiveColors.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
+  // one family works at every elevation instead of per-surface border tokens.
+  // Shadows are demoted to floating-overlay use only (not shipped as a fill
+  // separator here — see elevation.ts, follow-up S-4).
+  "hairline-subtle": "rgba(255, 255, 255, 0.06)",
+  "hairline-default": "rgba(255, 255, 255, 0.09)",
+  "hairline-strong": "rgba(255, 255, 255, 0.14)",
+  // Interactive states
+  "interactive-hover": "rgba(255, 255, 255, 0.04)",
+  "interactive-focus": "rgba(255, 255, 255, 0.12)",
+  "interactive-active": "rgba(255, 255, 255, 0.16)",
+  "interactive-selected": "rgba(255, 255, 255, 0.08)",
+  "interactive-disabled": "rgba(255, 255, 255, 0.12)",
+  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
+  // Divider
+  "divider": primitiveColors.charcoal[400],
+  // divider color
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[600],
+  "avatar-text": primitiveColors.white
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
 }
-function roundTempo(tempo) {
-  return tempo.map((v) => Math.round(v * 10) / 10);
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  let r, g, b;
+  if (cleaned.length === 3) {
+    r = parseInt(cleaned[0] + cleaned[0], 16);
+    g = parseInt(cleaned[1] + cleaned[1], 16);
+    b = parseInt(cleaned[2] + cleaned[2], 16);
+  } else if (cleaned.length === 6) {
+    r = parseInt(cleaned.slice(0, 2), 16);
+    g = parseInt(cleaned.slice(2, 4), 16);
+    b = parseInt(cleaned.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+  return { r, g, b };
 }
-function wrapJsx(fn) {
-  return function(type, props, ...rest) {
-    if (props && typeof props.className === "string" && props.className) {
-      const cn2 = props.className;
-      const cssStyle = { $$css: true, [cn2]: cn2 };
-      const existing = props.style;
-      props = {
-        ...props,
-        style: existing ? [cssStyle, existing] : cssStyle
-      };
-      delete props.className;
+function rgbToHsv(r, g, b) {
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  const delta = max - min;
+  const v = max;
+  const s = max === 0 ? 0 : delta / max;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rNorm) {
+      h = 60 * ((gNorm - bNorm) / delta % 6);
+    } else if (max === gNorm) {
+      h = 60 * ((bNorm - rNorm) / delta + 2);
+    } else {
+      h = 60 * ((rNorm - gNorm) / delta + 4);
     }
-    return fn(type, props, ...rest);
+  }
+  if (h < 0) h += 360;
+  return { h, s, v };
+}
+function hsvToRgb(h, s, v) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let rPrime, gPrime, bPrime;
+  if (h >= 0 && h < 60) {
+    rPrime = c;
+    gPrime = x;
+    bPrime = 0;
+  } else if (h >= 60 && h < 120) {
+    rPrime = x;
+    gPrime = c;
+    bPrime = 0;
+  } else if (h >= 120 && h < 180) {
+    rPrime = 0;
+    gPrime = c;
+    bPrime = x;
+  } else if (h >= 180 && h < 240) {
+    rPrime = 0;
+    gPrime = x;
+    bPrime = c;
+  } else if (h >= 240 && h < 300) {
+    rPrime = x;
+    gPrime = 0;
+    bPrime = c;
+  } else {
+    rPrime = c;
+    gPrime = 0;
+    bPrime = x;
+  }
+  return {
+    r: Math.round((rPrime + m) * 255),
+    g: Math.round((gPrime + m) * 255),
+    b: Math.round((bPrime + m) * 255)
   };
 }
-var jsx = wrapJsx(jsxRuntime.jsx);
-var jsxs = wrapJsx(jsxRuntime.jsxs);
-
-// src/components/custom/Workout/SegmentedBar.tsx
-var PULSE_HALF_MS = 950;
-var PULSE_MIN_OPACITY = 0.45;
-var SEGMENTED_BAR_GAP = 5;
-function usePulse(active) {
-  const [value] = react.useState(() => new reactNative.Animated.Value(0));
-  react.useEffect(() => {
-    if (!active) return;
-    const loop = reactNative.Animated.loop(
-      reactNative.Animated.sequence([
-        reactNative.Animated.timing(value, {
-          toValue: 1,
-          duration: PULSE_HALF_MS,
-          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
-          useNativeDriver: false
-        }),
-        reactNative.Animated.timing(value, {
-          toValue: 0,
-          duration: PULSE_HALF_MS,
-          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
-          useNativeDriver: false
-        })
-      ])
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [active, value]);
-  return value;
+function rgbToHex(r, g, b) {
+  const toHex = (n) => {
+    const clamped = Math.max(0, Math.min(255, Math.round(n)));
+    return clamped.toString(16).padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
-function SegmentedBar({
-  segments,
-  height = 8,
-  gap = SEGMENTED_BAR_GAP,
-  radius = 2,
-  marker = null,
-  segmentTestID,
-  style,
-  ...props
-}) {
-  const pulse = usePulse(segments.some((s) => s.pulse));
-  return /* @__PURE__ */ jsxs(reactNative.View, { style: [{ flexDirection: "row", height, gap, position: "relative" }, style], ...props, children: [
-    segments.map((seg, i) => {
-      const fillStyle = {
-        width: `${(seg.fill ?? 1) * 100}%`,
-        height: "100%",
-        backgroundColor: seg.color,
-        opacity: seg.opacity
-      };
-      const testID = segmentTestID?.(seg, i) ?? "segmented-bar-segment";
-      return /* @__PURE__ */ jsx(
-        reactNative.View,
-        {
-          style: {
-            flex: seg.weight ?? 1,
-            minWidth: 0,
-            height: "100%",
-            marginLeft: seg.leadingGap,
-            borderRadius: radius,
-            overflow: "hidden"
-          },
-          children: seg.pulse ? /* @__PURE__ */ jsx(
-            reactNative.Animated.View,
-            {
-              style: {
-                ...fillStyle,
-                ...seg.pulseColor ? {
-                  backgroundColor: pulse.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: seg.pulseColor
-                  })
-                } : {
-                  opacity: pulse.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [PULSE_MIN_OPACITY, 1]
-                  })
-                }
-              },
-              accessibilityElementsHidden: true,
-              testID
-            }
-          ) : /* @__PURE__ */ jsx(reactNative.View, { style: fillStyle, accessibilityElementsHidden: true, testID })
-        },
-        i
-      );
-    }),
-    marker ? /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        style: {
-          position: "absolute",
-          left: `${marker.position * 100}%`,
-          top: 0,
-          bottom: 0,
-          width: 2,
-          backgroundColor: marker.color
-        },
-        accessibilityElementsHidden: true,
-        testID: "segmented-bar-marker"
-      }
-    ) : null
-  ] });
+function lighten(hex, amount = 0.1) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const newV = Math.min(1, hsv.v + amount);
+  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
+  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
 }
-
-// src/components/custom/Workout/SetBar.tsx
-var SET_STRIP_ZONES = {
-  slow: primitiveRamps.red[600],
-  moderate: primitiveRamps.orange[400],
-  fast: primitiveRamps.amber[300],
-  fastest: primitiveRamps.green[300]
+var shadowColors = {
+  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
+  charcoal: {
+    dark: "rgba(0, 0, 0, 0.5)",
+    light: "rgba(255, 255, 255, 0.12)",
+    // brighter for crisp rim light
+    darker: "rgba(0, 0, 0, 0.6)"
+  },
+  // For neutral dark surfaces (~#1F2937)
+  neutralDark: {
+    dark: "rgba(0, 0, 0, 0.4)",
+    light: "rgba(255, 255, 255, 0.08)",
+    darker: "rgba(0, 0, 0, 0.5)"
+  },
+  // For light surfaces (white/light gray backgrounds)
+  neutralLight: {
+    dark: "rgba(0, 0, 0, 0.15)",
+    // Visible dark shadow for depth on light backgrounds
+    light: "rgba(255, 255, 255, 1)",
+    // Bright highlight for raised effect (visible on light gray)
+    darker: "rgba(0, 0, 0, 0.2)"
+    // Deeper shadow for pressed states
+  }
 };
-var TODO_COLOR = primitiveColors.charcoal[300];
-var SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900];
-var NOTCH_GAP = 2;
-var CLUSTER_GAP = 3;
-var MYO_UPCOMING_CLUSTERS = 3;
-var MYO_UPCOMING_CLUSTER_LEN = 5;
-var MYO_UPCOMING_FADE = 0.6;
-var PULSE_RANGE = {
-  [SET_STRIP_ZONES.slow]: [primitiveRamps.red[500], primitiveRamps.red[700]],
-  [SET_STRIP_ZONES.moderate]: [primitiveRamps.orange[300], primitiveRamps.orange[500]],
-  [SET_STRIP_ZONES.fast]: [primitiveRamps.amber[200], primitiveRamps.amber[400]],
-  [SET_STRIP_ZONES.fastest]: [primitiveRamps.green[200], primitiveRamps.green[400]]
+var intensityConfig = {
+  subtle: { offset: 1, blur: 2 },
+  // very light, barely visible
+  medium: { offset: 2, blur: 4 },
+  // noticeable but restrained
+  strong: { offset: 2, blur: 5 }
+  // slightly deeper blur, same offset as medium
 };
-function velocityZoneColor(v) {
-  if (v < 0.5) return SET_STRIP_ZONES.slow;
-  if (v < 0.75) return SET_STRIP_ZONES.moderate;
-  if (v < 1) return SET_STRIP_ZONES.fast;
-  return SET_STRIP_ZONES.fastest;
-}
-function chunkedSegments(chunks, gap) {
-  return chunks.flatMap(
-    (vels, ci) => vels.map((v, ri) => ({
-      color: velocityZoneColor(v),
-      ...ci > 0 && ri === 0 ? { leadingGap: gap } : {}
-    }))
-  );
+function createRaisedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native shadow approximation (limited compared to web)
+      shadowColor: "#000",
+      shadowOffset: { width: offset, height: offset },
+      shadowOpacity: 0.3,
+      shadowRadius: blur / 2,
+      elevation: offset
+    }
+  });
 }
-function rangeSegments(floor, max, doneVels) {
-  return Array.from({ length: max }, (_, i) => {
-    if (i < doneVels.length) return { color: velocityZoneColor(doneVels[i]) };
-    return { color: i < floor ? TODO_COLOR : SET_STRIP_VARIABLE_COLOR };
+function createPressedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimOffset = 1;
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native doesn't support inset shadows, approximate with darker bg
+      shadowOpacity: 0,
+      elevation: 0
+    }
   });
 }
-function myoUpcomingSegments(activationLen, clusterCount) {
-  const activation = Array.from({ length: activationLen }, () => ({ color: TODO_COLOR }));
-  const trail = Array.from(
-    { length: clusterCount },
-    (_, ci) => Array.from({ length: MYO_UPCOMING_CLUSTER_LEN }, (_2, ri) => ({
-      color: SET_STRIP_VARIABLE_COLOR,
-      opacity: MYO_UPCOMING_FADE ** ci,
-      ...ri === 0 ? { leadingGap: CLUSTER_GAP } : {}
-    }))
-  ).flat();
-  return [...activation, ...trail];
+function createFlatShadow() {
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: "none"
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
 }
-function setSegments(set) {
-  if (set.status === "todo") {
-    return [{ color: TODO_COLOR }];
-  }
-  if (set.status === "done") {
-    return set.velocities.map((v) => ({ color: velocityZoneColor(v) }));
-  }
-  if (set.status === "range") {
-    return rangeSegments(set.floor, set.max, set.doneVels);
+function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      // Keep same offsets as normal state for rim to prevent "shrinking" effect
+      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowColor: "#000",
+      shadowOffset: { width: hoverOffset, height: hoverOffset },
+      shadowOpacity: 0.2,
+      shadowRadius: hoverBlur / 2,
+      elevation: hoverOffset
+    }
+  });
+}
+function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
+      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+({
+  // Charcoal surface shadows (for dark toolbars, cards)
+  charcoal: {
+    raised: {
+      subtle: createRaisedShadow("charcoal", "subtle"),
+      medium: createRaisedShadow("charcoal", "medium"),
+      strong: createRaisedShadow("charcoal", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("charcoal", "subtle"),
+      medium: createRaisedHoverShadow("charcoal", "medium"),
+      strong: createRaisedHoverShadow("charcoal", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("charcoal", "subtle"),
+      medium: createPressedShadow("charcoal", "medium"),
+      strong: createPressedShadow("charcoal", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("charcoal", "subtle"),
+      medium: createPressedHoverShadow("charcoal", "medium"),
+      strong: createPressedHoverShadow("charcoal", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral dark surface shadows
+  neutralDark: {
+    raised: {
+      subtle: createRaisedShadow("neutralDark", "subtle"),
+      medium: createRaisedShadow("neutralDark", "medium"),
+      strong: createRaisedShadow("neutralDark", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
+      medium: createRaisedHoverShadow("neutralDark", "medium"),
+      strong: createRaisedHoverShadow("neutralDark", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralDark", "subtle"),
+      medium: createPressedShadow("neutralDark", "medium"),
+      strong: createPressedShadow("neutralDark", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralDark", "subtle"),
+      medium: createPressedHoverShadow("neutralDark", "medium"),
+      strong: createPressedHoverShadow("neutralDark", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral light surface shadows
+  neutralLight: {
+    raised: {
+      subtle: createRaisedShadow("neutralLight", "subtle"),
+      medium: createRaisedShadow("neutralLight", "medium"),
+      strong: createRaisedShadow("neutralLight", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
+      medium: createRaisedHoverShadow("neutralLight", "medium"),
+      strong: createRaisedHoverShadow("neutralLight", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralLight", "subtle"),
+      medium: createPressedShadow("neutralLight", "medium"),
+      strong: createPressedShadow("neutralLight", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralLight", "subtle"),
+      medium: createPressedHoverShadow("neutralLight", "medium"),
+      strong: createPressedHoverShadow("neutralLight", "strong")
+    },
+    flat: createFlatShadow()
   }
-  if (set.status === "drop") {
-    return chunkedSegments(set.subloads, NOTCH_GAP);
+});
+
+// src/utils/colors.ts
+function alpha(color, opacity) {
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    let r, g, b;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else {
+      return color;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
   }
-  if (set.status === "myo") {
-    return chunkedSegments([set.activation, ...set.clusters], CLUSTER_GAP);
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
   }
-  if (set.status === "myo-upcoming") {
-    return myoUpcomingSegments(set.activationLen, set.clusterCount ?? MYO_UPCOMING_CLUSTERS);
+  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})`;
   }
-  const performed = set.velocities.map((v) => {
-    const color = velocityZoneColor(v);
-    return { color, pulse: true, pulseColor: PULSE_RANGE[color] };
-  });
-  const remaining = Math.max(0, set.planned - set.velocities.length);
-  return [...performed, ...Array.from({ length: remaining }, () => ({ color: TODO_COLOR }))];
+  return color;
 }
-function setBarSegmentTestID(seg) {
-  if (seg.pulse) return "set-strip-pulse";
-  if (seg.color === SET_STRIP_VARIABLE_COLOR) return "set-strip-variable";
-  return seg.color === TODO_COLOR ? "set-strip-empty" : "set-strip-fill";
+
+// src/utils/workout-format.ts
+function roundRpe(rpe) {
+  return Math.round(rpe * 2) / 2;
 }
-function SetBar({ set, height = 8 }) {
-  return /* @__PURE__ */ jsx(
-    SegmentedBar,
-    {
-      segments: setSegments(set),
-      height,
-      gap: 0,
-      radius: 0,
-      segmentTestID: setBarSegmentTestID,
-      style: { flex: 1, minWidth: 0, borderRadius: 2, overflow: "hidden" },
-      testID: "set-strip-set"
-    }
-  );
+function roundWeight(weight) {
+  return Math.round(weight);
+}
+function formatVelocity(velocity) {
+  return velocity.toFixed(2);
+}
+function roundTempo(tempo) {
+  return tempo.map((v) => Math.round(v * 10) / 10);
 }
 
-// src/components/custom/Workout/SetStrip.tsx
-var SET_STRIP_GAP = 5;
-function setCategory(set) {
-  switch (set.status) {
-    case "done":
-    case "drop":
-    case "myo":
-      return "done";
-    case "active":
-      return "active";
-    case "range":
-      return set.doneVels.length > 0 ? "active" : "upcoming";
-    case "todo":
-    case "myo-upcoming":
-      return "upcoming";
-  }
+// src/theme/bar-paper.ts
+function grainOpacityForColor(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  if ([r, g, b].some(Number.isNaN)) return 0.14;
+  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return Math.min(0.24, Math.max(0.04, 0.02 + 0.31 * lum));
+}
+function barGrain(color) {
+  const op = grainOpacityForColor(color).toFixed(3);
+  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='${op}'/%3E%3C/svg%3E")`;
+}
+function barPaper(color, flip = false) {
+  return {
+    backgroundImage: barGrain(color),
+    boxShadow: flip ? "0 -6px 16px rgba(0,0,0,0.45)" : "inset 0 1.5px 0 rgba(255,255,255,0.22), 0 6px 16px rgba(0,0,0,0.45)"
+  };
 }
-function describeSets(sets) {
-  const done = sets.filter((s) => setCategory(s) === "done").length;
-  const active = sets.filter((s) => setCategory(s) === "active").length;
-  const upcoming = sets.filter((s) => setCategory(s) === "upcoming").length;
-  return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`;
+var SURFACE_LEVEL_TOKEN = {
+  background: "background-base",
+  base: "surface-base",
+  elevated: "surface-elevated",
+  raised: "surface-raised",
+  overlay: "surface-overlay"
+};
+var ON_SURFACE_TOKEN = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  tertiary: "text-tertiary"
+};
+var DEFAULT_CONTEXT = { mode: "dark", level: "base" };
+var SurfaceContext = react.createContext(DEFAULT_CONTEXT);
+function useSurface() {
+  return react.useContext(SurfaceContext);
 }
-function SetStrip({ sets, height = 8, className, ...props }) {
-  return /* @__PURE__ */ jsx(
+function useSurfaceMode() {
+  return react.useContext(SurfaceContext).mode;
+}
+function useOnSurfaceColor(role = "primary") {
+  return getSemanticColors(useSurfaceMode())[ON_SURFACE_TOKEN[role]];
+}
+function insetFloor(mode) {
+  const colors = getSemanticColors(mode);
+  return colors["surface-inset"] ?? surfaceRampDark.inset;
+}
+function surfaceBackground(level, mode) {
+  if (level === "inset") return insetFloor(mode);
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
+}
+var ANIMATION_EASING = reactNative.Easing.bezier(0.22, 1, 0.36, 1);
+var PEAK_OVERSHOOT = 1.12;
+function getReducedMotionPreference() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = react.useState(getReducedMotionPreference);
+  react.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = () => setReduced(mq.matches);
+    handler();
+    mq.addEventListener?.("change", handler);
+    return () => mq.removeEventListener?.("change", handler);
+  }, []);
+  return reduced;
+}
+function useLiveRepGrowth(active, liveRepIndex, liveVelocity, isNewPeak) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [liveGrowth] = react.useState(() => new reactNative.Animated.Value(1));
+  react.useEffect(() => {
+    if (liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveGrowth.setValue(1);
+      return;
+    }
+    liveGrowth.setValue(0);
+    if (isNewPeak) {
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(liveGrowth, {
+          toValue: PEAK_OVERSHOOT,
+          duration: 220,
+          easing: reactNative.Easing.out(reactNative.Easing.quad),
+          useNativeDriver: false
+        }),
+        reactNative.Animated.spring(liveGrowth, {
+          toValue: 1,
+          friction: 5,
+          tension: 140,
+          useNativeDriver: false
+        })
+      ]).start();
+    } else {
+      reactNative.Animated.timing(liveGrowth, {
+        toValue: 1,
+        duration: 300,
+        easing: ANIMATION_EASING,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveGrowth]);
+  return liveGrowth;
+}
+function wrapJsx(fn) {
+  return function(type, props, ...rest) {
+    if (props && typeof props.className === "string" && props.className) {
+      const cn2 = props.className;
+      const cssStyle = { $$css: true, [cn2]: cn2 };
+      const existing = props.style;
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle
+      };
+      delete props.className;
+    }
+    return fn(type, props, ...rest);
+  };
+}
+var jsx = wrapJsx(jsxRuntime.jsx);
+var jsxs = wrapJsx(jsxRuntime.jsxs);
+
+// src/components/custom/charts/SetBarChart.tsx
+function mixHex(a, b, t12) {
+  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) * t12).toString(16).padStart(2, "0");
+  return `#${ch(ar, br)}${ch(ag, bg)}${ch(ab, bb)}`;
+}
+var VARIABLE_FILL = primitiveRamps.cyan[900];
+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;
+}
+function valueLabelFontSize(height) {
+  return Math.round(Math.max(8, Math.min(12, height * 0.11)));
+}
+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 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 MIN_BAR_HEIGHT = 4;
+var FLAT_BAR_FRACTION = 0.5;
+var STUB_HEIGHT = 9;
+var REP_GAP = 2;
+function computeBarLayout(plotWidth, count, gapRatio = GAP_RATIO) {
+  const rawBarWidth = plotWidth > 0 && count > 0 ? plotWidth / (count + (count - 1) * gapRatio) : BAR_MAX_WIDTH;
+  const barWidth = Math.min(BAR_MAX_WIDTH, rawBarWidth);
+  const gap = plotWidth === 0 ? MIN_BAR_GAP : Math.max(MIN_BAR_GAP, gapRatio * barWidth);
+  return { barWidth, gap };
+}
+function isRep(slot) {
+  return slot.kind === "rep";
+}
+function repIndexByCell(cells) {
+  let count = 0;
+  return cells.map((slot) => isRep(slot) ? count++ : -1);
+}
+function SetBarChart({
+  slots,
+  colorFor,
+  height,
+  scale = "peak",
+  scaleMax,
+  orientation = "up",
+  liveRepIndex,
+  isNewPeak = false,
+  targetReps,
+  gapRatio = GAP_RATIO,
+  barRadius = DEFAULT_BAR_RADIUS,
+  cornerStyle = "top",
+  flat = false,
+  showValueLabels: showValueLabelsProp = false,
+  formatValue: formatValue2 = String,
+  todoVariant = "solid",
+  minColumns,
+  renderReference,
+  renderBarOverlay,
+  expandProgress,
+  hideBaseline = false,
+  testID,
+  testIDPrefix = "setbar",
+  accessibilityLabel: accessibilityLabel2,
+  label,
+  className,
+  viewProps = {}
+}) {
+  const targetPadded = Math.max(slots.length, targetReps ?? 0, minColumns ?? 0);
+  const cells = targetPadded > slots.length ? [
+    ...slots,
+    ...Array.from({ length: targetPadded - slots.length }, () => ({ kind: "todo" }))
+  ] : slots;
+  const repValues = cells.filter(isRep).map((s) => s.value ?? 0);
+  const best = repValues.length > 0 ? Math.max(...repValues) : 0;
+  const flip = orientation === "down";
+  const flipStyle = flip ? { transform: [{ scaleY: -1 }] } : null;
+  const placeholderColor = useOnSurfaceColor("tertiary");
+  const surface = useSurface();
+  const surfaceBg = surfaceBackground(surface.level, surface.mode);
+  const solidTodoColor = mixHex(surfaceBg, placeholderColor, 0.55);
+  const emptyColor = mixHex(surfaceBg, placeholderColor, 0.28);
+  const barCorners = cornerStyle === "all" ? { borderRadius: barRadius } : { borderTopLeftRadius: barRadius, borderTopRightRadius: barRadius };
+  const scaleDenom = scaleMax != null && scaleMax > 0 ? scaleMax * PEAK_HEADROOM : scaleDenominator(scale, best);
+  const showValueLabels = showValueLabelsProp && !flat;
+  const plotHeight = Math.max(0, height - (showValueLabels ? LABEL_ROW_HEIGHT + LABEL_GAP : 0));
+  const yOf = (value) => scaleDenom > 0 ? value / scaleDenom * plotHeight : 0;
+  const flatBarHeight = Math.max(MIN_BAR_HEIGHT, FLAT_BAR_FRACTION * plotHeight);
+  const compactBarHeight = Math.max(MIN_BAR_HEIGHT, plotHeight);
+  const valueBarHeight = (value) => scaleDenom > 0 ? Math.max(MIN_BAR_HEIGHT, Math.min(1, value / scaleDenom) * plotHeight) : MIN_BAR_HEIGHT;
+  const barHeight = (value) => flat ? compactBarHeight : valueBarHeight(value);
+  const liveValue = liveRepIndex != null && liveRepIndex < repValues.length ? repValues[liveRepIndex] : void 0;
+  const liveGrowth = useLiveRepGrowth(true, liveRepIndex, liveValue, isNewPeak);
+  const [plotW, setPlotW] = react.useState(0);
+  const onPlotLayout = (e) => setPlotW(e.nativeEvent.layout.width);
+  const totalCells = cells.length;
+  const { barWidth, gap } = computeBarLayout(plotW, totalCells, gapRatio);
+  const labelsCrowded = plotW > 0 && barWidth < LABEL_MIN_BAR_WIDTH;
+  const peakRepIndex = repValues.reduce((b, v, i) => v > repValues[b] ? i : b, 0);
+  const showBarLabel = (repIndex) => !labelsCrowded || repIndex === peakRepIndex || repIndex === liveRepIndex;
+  const geometry = { scaleDenom, plotHeight, yOf, best, flip };
+  const { style: externalStyle, ...restProps } = viewProps;
+  const a11y = accessibilityLabel2 != null ? { accessibilityRole: "image", accessibilityLabel: accessibilityLabel2 } : {};
+  const repIndices = repIndexByCell(cells);
+  return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className,
-      style: { flexDirection: "row", width: "100%", height, gap: SET_STRIP_GAP },
-      accessibilityRole: "image",
-      accessibilityLabel: describeSets(sets),
-      testID: "set-strip",
-      ...props,
-      children: sets.map((set, i) => /* @__PURE__ */ jsx(SetBar, { set, height }, i))
+      style: [{ height, flexDirection: "row" }, externalStyle],
+      testID,
+      ...a11y,
+      ...restProps,
+      children: [
+        label ? /* @__PURE__ */ jsx(
+          ChartSideRail,
+          {
+            sections: [{ label, testID: `${testIDPrefix}-side-label` }],
+            sectionExtent: height
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          reactNative.View,
+          {
+            onLayout: onPlotLayout,
+            style: {
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "flex-end",
+              gap,
+              position: "relative",
+              borderBottomWidth: hideBaseline ? 0 : 2,
+              borderBottomColor: placeholderColor,
+              ...flipStyle
+            },
+            children: [
+              renderReference?.(geometry),
+              cells.map((slot, i) => {
+                const isChunkBoundary = (slot.leadingGap ?? REP_GAP) > REP_GAP;
+                const extraGap = isChunkBoundary ? Math.max(CHUNK_NOTCH_MIN_PX, CHUNK_NOTCH_RATIO * barWidth) : 0;
+                const column = {
+                  flex: 1,
+                  maxWidth: BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  marginLeft: extraGap
+                };
+                if (!isRep(slot)) {
+                  return /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, style: column, children: renderStub(
+                    slot.kind,
+                    barCorners,
+                    // Flat (compact) stubs fill the plot like the compact bars; else the fixed short stub.
+                    flat ? compactBarHeight : STUB_HEIGHT,
+                    placeholderColor,
+                    testIDPrefix,
+                    todoVariant,
+                    solidTodoColor,
+                    emptyColor
+                  ) }, i);
+                }
+                const repIndex = repIndices[i];
+                const value = slot.value ?? 0;
+                const isLive = liveRepIndex === repIndex;
+                const color = colorFor(value);
+                const barHeightStyle = expandProgress ? expandProgress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [flatBarHeight, valueBarHeight(value)]
+                }) : isLive ? liveGrowth.interpolate({ inputRange: [0, 1], outputRange: [0, barHeight(value)] }) : barHeight(value);
+                const ownLabel = showValueLabels && !renderBarOverlay && showBarLabel(repIndex);
+                const labelBottom = (expandProgress ? valueBarHeight(best) : barHeight(best)) + LABEL_GAP;
+                return /* @__PURE__ */ jsxs(reactNative.View, { accessibilityElementsHidden: renderBarOverlay == null, style: column, children: [
+                  ownLabel && // All labels pin to one aligned row JUST ABOVE THE PEAK BAR (not the container top),
+                  // in the muted on-surface-secondary tone — so the row hugs the bars, no floating void.
+                  /* @__PURE__ */ jsx(
+                    reactNative.Animated.View,
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: labelBottom,
+                        left: 0,
+                        right: 0,
+                        alignItems: "center",
+                        ...expandProgress ? { opacity: expandProgress } : null
+                      },
+                      pointerEvents: "none",
+                      children: /* @__PURE__ */ jsx(
+                        reactNative.Text,
+                        {
+                          className: "text-text-secondary",
+                          style: [{ fontSize: valueLabelFontSize(height), fontWeight: "700" }, flipStyle],
+                          testID: `${testIDPrefix}-label-${repIndex}`,
+                          children: formatValue2(value)
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    reactNative.Animated.View,
+                    {
+                      style: [
+                        { width: "100%", height: barHeightStyle, backgroundColor: color },
+                        barCorners,
+                        barPaper(color, flip)
+                      ],
+                      testID: `${testIDPrefix}-bar-${repIndex}`
+                    }
+                  ),
+                  renderBarOverlay?.(repIndex, value)
+                ] }, i);
+              })
+            ]
+          }
+        )
+      ]
     }
   );
 }
+function renderStub(kind, barCorners, stubHeight, placeholderColor, testIDPrefix, todoVariant, solidTodoColor, emptyColor) {
+  const base = {
+    width: "100%",
+    height: stubHeight,
+    ...barCorners
+  };
+  if (kind === "variable") {
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: { ...base, backgroundColor: VARIABLE_FILL },
+        testID: `${testIDPrefix}-slot-variable`
+      }
+    );
+  }
+  if (kind === "continue") {
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: { ...base, borderWidth: 1, borderColor: CONTINUE_OUTLINE },
+        testID: `${testIDPrefix}-slot-continue`
+      }
+    );
+  }
+  if (kind === "empty") {
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: { ...base, backgroundColor: emptyColor },
+        testID: `${testIDPrefix}-slot-empty`
+      }
+    );
+  }
+  const todoStyle = todoVariant === "solid" ? { ...base, backgroundColor: solidTodoColor } : { ...base, borderWidth: 1, borderStyle: "dashed", borderColor: placeholderColor };
+  return /* @__PURE__ */ jsx(reactNative.View, { style: todoStyle, testID: `${testIDPrefix}-slot-todo` });
+}
+function sideLabelFontSize(height) {
+  return Math.round(Math.max(7, Math.min(13, height * 0.06)));
+}
+var SIDE_LABEL_INITIALS_BELOW = 70;
+function sideLabelText(label, extent) {
+  if (extent >= SIDE_LABEL_INITIALS_BELOW) return label;
+  return label.trim().split(/\s+/).map((word) => word.charAt(0)).join(" ").toUpperCase();
+}
+function ChartSideRail({
+  sections,
+  sectionExtent,
+  variant = "hero"
+}) {
+  if (!sections.some((s) => s.label)) return null;
+  const isRail = variant === "rail";
+  const labelLength = Math.max(0, sectionExtent - (isRail ? 0 : 6));
+  const fontSize = isRail ? 7 : sideLabelFontSize(sectionExtent);
+  const textStyle = {
+    maxWidth: "100%",
+    textAlign: "center",
+    fontSize,
+    fontWeight: "700",
+    letterSpacing: isRail || fontSize < 10 ? 0 : 2,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsx(reactNative.View, { style: { width: isRail ? 18 : 34 }, accessibilityElementsHidden: true, children: sections.map((s) => /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      style: { height: sectionExtent, alignItems: "center", justifyContent: "center" },
+      children: s.label ? /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            width: labelLength,
+            alignItems: "center",
+            transform: [{ rotate: "-90deg" }]
+          },
+          children: /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-tertiary",
+              style: textStyle,
+              numberOfLines: 1,
+              testID: s.testID,
+              children: isRail ? s.label : sideLabelText(s.label, sectionExtent)
+            }
+          )
+        }
+      ) : null
+    },
+    s.testID
+  )) });
+}
 
 // src/components/custom/Workout/VelocityStrip.tsx
 var VEL_COLORS = WORKOUT_TOKENS.scale;
@@ -485,6 +1297,18 @@ function calculateMeanVelocity(velocities) {
   const sum = velocities.reduce((acc, v) => acc + v, 0);
   return sum / velocities.length;
 }
+var VL_LOSS_THRESHOLDS = [10, 20, 30];
+function getVelocityLossColor(lossPct) {
+  const [t1, t22, t32] = VL_LOSS_THRESHOLDS;
+  if (lossPct < t1) return VEL_COLORS.green;
+  if (lossPct < t22) return VEL_COLORS.yellow;
+  if (lossPct < t32) return VEL_COLORS.orange;
+  return VEL_COLORS.red;
+}
+function velocityLossForRep(velocity, best) {
+  if (best <= 0) return 0;
+  return Math.max(0, Math.round((best - velocity) / best * 100));
+}
 function classifyBand(velocity, bands) {
   for (const band of bands) {
     if (band.max === null || velocity < band.max) return band;
@@ -494,15 +1318,17 @@ function classifyBand(velocity, bands) {
 function bandColor(band) {
   return bandIdToEffortColor[band.id] ?? VEL_COLORS.green;
 }
+function makeBarColorFor(zones) {
+  const hasZones = zones != null && zones.length > 0;
+  return (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
+}
 function getLossStyle(loss) {
   if (loss > 25) return { color: VEL_COLORS.red };
   if (loss > 20) return { color: VEL_COLORS.orange };
   return null;
 }
-var REP_GAP = 2;
+var REP_GAP2 = 2;
 var WIDE_GAP = 8;
-var TODO_COLOR2 = primitiveColors.charcoal[300];
-var CONTINUE_OUTLINE = primitiveRamps.cyan[800];
 function deriveDoneVelocities(set) {
   switch (set.type) {
     case "drop":
@@ -518,7 +1344,7 @@ function chunkedRepSlots(chunks) {
   chunks.forEach((chunk) => {
     chunk.forEach((velocity, ri) => {
       const first = slots.length === 0;
-      slots.push({ kind: "rep", velocity, leadingGap: first ? 0 : ri === 0 ? WIDE_GAP : REP_GAP });
+      slots.push({ kind: "rep", velocity, leadingGap: first ? 0 : ri === 0 ? WIDE_GAP : REP_GAP2 });
     });
   });
   return slots;
@@ -532,7 +1358,7 @@ function buildSlots(set) {
         return {
           kind: done ? "rep" : "todo",
           velocity: done ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : REP_GAP
+          leadingGap: i === 0 ? 0 : REP_GAP2
         };
       });
     }
@@ -543,7 +1369,7 @@ function buildSlots(set) {
         return {
           kind,
           velocity: kind === "rep" ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : REP_GAP
+          leadingGap: i === 0 ? 0 : REP_GAP2
         };
       });
     }
@@ -551,16 +1377,16 @@ function buildSlots(set) {
       const reps = set.velocities.map((velocity, i) => ({
         kind: "rep",
         velocity,
-        leadingGap: i === 0 ? 0 : REP_GAP
+        leadingGap: i === 0 ? 0 : REP_GAP2
       }));
-      reps.push({ kind: "continue", leadingGap: reps.length === 0 ? 0 : REP_GAP });
+      reps.push({ kind: "continue", leadingGap: reps.length === 0 ? 0 : REP_GAP2 });
       return reps;
     }
     case "drop":
       return chunkedRepSlots(set.subloads);
     case "myo": {
       const slots = chunkedRepSlots([set.activation, ...set.clusters]);
-      if (set.open) slots.push({ kind: "continue", leadingGap: slots.length === 0 ? 0 : REP_GAP });
+      if (set.open) slots.push({ kind: "continue", leadingGap: slots.length === 0 ? 0 : REP_GAP2 });
       return slots;
     }
     case "cluster": {
@@ -571,7 +1397,7 @@ function buildSlots(set) {
         return {
           kind: done ? "rep" : "todo",
           velocity: done ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : boundary ? WIDE_GAP : REP_GAP
+          leadingGap: i === 0 ? 0 : boundary ? WIDE_GAP : REP_GAP2
         };
       });
     }
@@ -593,253 +1419,148 @@ function setAccessibilityLabel(set, repCount) {
       return `Velocity strip, cluster set, groups of ${set.groupSize}, ${repCount} reps`;
   }
 }
-function slotAccessibilityLabel(slot, index) {
-  switch (slot.kind) {
-    case "rep":
-      return `Rep ${index + 1}: ${formatVelocity(slot.velocity ?? 0)} meters per second`;
-    case "todo":
-      return `Rep ${index + 1}: planned`;
-    case "variable":
-      return `Rep ${index + 1}: variable`;
-    case "continue":
-      return "Keep going";
-  }
-}
-var EXPANDED_TODO_STUB_PCT = 16;
-var EXPANDED_ENCODED_PCT = 45;
 var EXPANDED_HEIGHT = 60;
-var FIXED_MAX_VELOCITY = 1.15;
-var BARE_STUB_HEIGHT = 3;
-var HERO_HEIGHT = 220;
-var HERO_LABEL_HEADROOM = 20;
-var HERO_BAR_GAP = 8;
-var HERO_BAR_MAX_WIDTH = 120;
-var HERO_LABEL_MIN_BAR_WIDTH = 30;
-var HERO_BAR_RADIUS = 5;
-var HERO_MIN_BAR_HEIGHT = 4;
-var HERO_PENDING_COLOR = primitiveColors.charcoal[100];
+var COMPACT_HEIGHT = 8;
 var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
-var PEAK_HEADROOM = 1.06;
-function scaleDenominator(scale, maxVelocity) {
-  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * PEAK_HEADROOM;
-}
-function bareSlotHeight(slot, height, denom) {
-  if (slot.kind !== "rep" || denom <= 0) return BARE_STUB_HEIGHT;
-  const ratio = Math.min(1, (slot.velocity ?? 0) / denom);
-  return Math.max(BARE_STUB_HEIGHT, ratio * height);
-}
-function getReducedMotionPreference() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function usePrefersReducedMotion() {
-  const [reduced, setReduced] = react.useState(getReducedMotionPreference);
-  react.useEffect(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const handler = () => setReduced(mq.matches);
-    handler();
-    mq.addEventListener?.("change", handler);
-    return () => mq.removeEventListener?.("change", handler);
-  }, []);
-  return reduced;
-}
-var ANIMATION_DURATION = 400;
-var ANIMATION_EASING = reactNative.Easing.bezier(0.22, 1, 0.36, 1);
-var POP_EASING = reactNative.Easing.bezier(0.34, 1.56, 0.64, 1);
-function useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const [liveScale] = react.useState(() => new reactNative.Animated.Value(1));
-  react.useEffect(() => {
-    if (!active || liveRepIndex == null || liveVelocity == null) return;
-    if (prefersReducedMotion) {
-      liveScale.setValue(1);
-      return;
-    }
-    if (isNewPeak) {
-      liveScale.setValue(1);
-      reactNative.Animated.sequence([
-        reactNative.Animated.timing(liveScale, {
-          toValue: 1.25,
-          duration: 150,
-          easing: reactNative.Easing.out(reactNative.Easing.quad),
-          useNativeDriver: true
-        }),
-        reactNative.Animated.spring(liveScale, {
-          toValue: 1,
-          friction: 3,
-          tension: 140,
-          useNativeDriver: true
-        })
-      ]).start();
-    } else {
-      liveScale.setValue(0.8);
-      reactNative.Animated.timing(liveScale, {
-        toValue: 1,
-        duration: 300,
-        easing: POP_EASING,
-        useNativeDriver: true
-      }).start();
+function DashedReferenceLine({
+  anchor,
+  offset,
+  testID
+}) {
+  const edge = anchor === "top" ? { top: offset } : { bottom: offset };
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      accessibilityElementsHidden: true,
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        borderTopWidth: 1,
+        borderStyle: "dashed",
+        borderColor: HERO_REFERENCE_COLOR,
+        pointerEvents: "none",
+        ...edge
+      },
+      testID
     }
-  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
-  return liveScale;
+  );
 }
-function HeroVelocityChart({
-  doneVelocities,
-  barColorFor,
+var BAND_LABEL_FONT = "monospace";
+var VL_LABEL_MIN_PLOT = 65;
+var VL_SEMANTIC = getSemanticColors("dark");
+function VelocityLossBands({
+  best,
   scaleDenom,
-  referenceVelocity,
-  liveRepIndex,
-  isNewPeak,
-  targetReps,
-  height,
-  className,
-  viewProps
+  plotHeight,
+  flip = false
 }) {
-  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
-  const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak);
-  const [plotW, setPlotW] = react.useState(0);
-  const onPlotLayout = (e) => setPlotW(e.nativeEvent.layout.width);
-  const plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM);
-  const barHeight = (velocity) => scaleDenom > 0 ? Math.max(HERO_MIN_BAR_HEIGHT, Math.min(1, velocity / scaleDenom) * plotHeight) : HERO_MIN_BAR_HEIGHT;
-  const pendingCount = Math.max(0, (targetReps ?? 0) - doneVelocities.length);
-  const referencePx = referenceVelocity > 0 && scaleDenom > 0 ? Math.min(plotHeight, referenceVelocity / scaleDenom * plotHeight) : 0;
-  const totalSlots = doneVelocities.length + pendingCount;
-  const barWidth = plotW > 0 && totalSlots > 0 ? Math.min(HERO_BAR_MAX_WIDTH, (plotW - HERO_BAR_GAP * (totalSlots - 1)) / totalSlots) : HERO_BAR_MAX_WIDTH;
-  const labelsCrowded = plotW > 0 && barWidth < HERO_LABEL_MIN_BAR_WIDTH;
-  const heroGap = plotW === 0 ? HERO_BAR_GAP : barWidth < 16 ? 2 : barWidth < 28 ? 4 : HERO_BAR_GAP;
-  const peakIndex = doneVelocities.reduce(
-    (best, v, i) => v > doneVelocities[best] ? i : best,
-    0
-  );
-  const showBarLabel = (i) => !labelsCrowded || i === peakIndex || i === liveRepIndex;
-  const repCount = doneVelocities.length;
-  const total = Math.max(repCount, targetReps ?? repCount);
-  const label = referenceVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(referenceVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
-  const { style: externalStyle, ...restProps } = viewProps;
-  return /* @__PURE__ */ jsx(
+  if (best <= 0 || scaleDenom <= 0 || plotHeight <= 0) return null;
+  const yOf = (v) => v / scaleDenom * plotHeight;
+  const vl20 = best * 0.8;
+  const vl30 = best * 0.7;
+  const vlFont = Math.round(Math.max(7, Math.min(9, plotHeight * 0.05)));
+  const showLabels = plotHeight >= VL_LABEL_MIN_PLOT;
+  const band = (loV, hiV, color) => /* @__PURE__ */ jsx(
     reactNative.View,
     {
-      className,
-      style: [{ height }, externalStyle],
-      accessibilityRole: "image",
-      accessibilityLabel: label,
-      testID: "velocity-strip-hero",
-      ...restProps,
-      children: /* @__PURE__ */ jsxs(
-        reactNative.View,
-        {
-          onLayout: onPlotLayout,
-          style: {
-            flex: 1,
-            flexDirection: "row",
-            alignItems: "flex-end",
-            gap: heroGap,
-            position: "relative",
-            borderBottomWidth: 2,
-            borderBottomColor: HERO_PENDING_COLOR
-          },
-          children: [
-            referencePx > 0 && /* @__PURE__ */ jsx(
-              reactNative.View,
-              {
-                accessibilityElementsHidden: true,
-                style: {
-                  position: "absolute",
-                  left: 0,
-                  right: 0,
-                  bottom: referencePx,
-                  borderTopWidth: 1,
-                  borderStyle: "dashed",
-                  borderColor: HERO_REFERENCE_COLOR,
-                  pointerEvents: "none"
-                },
-                testID: "velocity-hero-reference"
-              }
-            ),
-            doneVelocities.map((velocity, i) => {
-              const isLive = liveRepIndex === i;
-              return /* @__PURE__ */ jsxs(
-                reactNative.View,
-                {
-                  accessibilityElementsHidden: true,
-                  style: {
-                    flex: 1,
-                    maxWidth: HERO_BAR_MAX_WIDTH,
-                    height: "100%",
-                    alignItems: "center",
-                    justifyContent: "flex-end"
-                  },
-                  children: [
-                    showBarLabel(i) && /* @__PURE__ */ jsx(
-                      reactNative.Text,
-                      {
-                        className: "text-text-primary",
-                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
-                        testID: `velocity-label-${i}`,
-                        children: formatVelocity(velocity)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      reactNative.Animated.View,
-                      {
-                        style: [
-                          {
-                            width: "100%",
-                            height: barHeight(velocity),
-                            borderTopLeftRadius: HERO_BAR_RADIUS,
-                            borderTopRightRadius: HERO_BAR_RADIUS,
-                            backgroundColor: barColorFor(velocity)
-                          },
-                          isLive ? { transform: [{ scale: liveScale }] } : null
-                        ],
-                        testID: `velocity-bar-${i}`
-                      }
-                    )
-                  ]
-                },
-                i
-              );
-            }),
-            Array.from({ length: pendingCount }, (_, i) => /* @__PURE__ */ jsx(
-              reactNative.View,
-              {
-                accessibilityElementsHidden: true,
-                style: {
-                  flex: 1,
-                  maxWidth: HERO_BAR_MAX_WIDTH,
-                  height: "100%",
-                  alignItems: "center",
-                  justifyContent: "flex-end"
-                },
-                children: /* @__PURE__ */ jsx(
-                  reactNative.View,
-                  {
-                    style: {
-                      width: "100%",
-                      height: HERO_MIN_BAR_HEIGHT * 3,
-                      borderWidth: 1,
-                      borderStyle: "dashed",
-                      borderColor: HERO_PENDING_COLOR,
-                      borderTopLeftRadius: HERO_BAR_RADIUS,
-                      borderTopRightRadius: HERO_BAR_RADIUS
-                    },
-                    testID: "velocity-slot-todo"
-                  }
-                )
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: yOf(loV),
+        height: Math.max(0, yOf(hiV) - yOf(loV)),
+        backgroundColor: color
+      }
+    }
+  );
+  const threshold = (v, color, label) => /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: yOf(v),
+        // Collapse to zero height so the dashed border lands EXACTLY on `yOf(v)` — the
+        // band edge — instead of floating up half a text-row (the label then centres on
+        // the line, breaking it). Matches DashedReferenceLine's bare-border anchoring.
+        height: 0,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { style: { flex: 9, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } }),
+        showLabels ? /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              style: {
+                marginHorizontal: 6,
+                fontSize: vlFont,
+                fontWeight: "800",
+                fontFamily: BAND_LABEL_FONT,
+                color,
+                ...flip ? { transform: [{ scaleY: -1 }] } : null
               },
-              `pending-${i}`
-            ))
-          ]
-        }
-      )
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(reactNative.View, { style: { flex: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } })
+        ] }) : null
+      ]
     }
   );
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      accessibilityElementsHidden: true,
+      pointerEvents: "none",
+      style: { position: "absolute", left: 0, right: 0, bottom: 0, top: 0 },
+      testID: "velocity-loss-bands",
+      children: [
+        band(0, vl30, alpha(VL_SEMANTIC["status-error"], 0.09)),
+        band(vl30, vl20, alpha(VL_SEMANTIC["status-warning"], 0.08)),
+        threshold(vl20, alpha(VL_SEMANTIC["status-warning"], 0.75), "VL 20%"),
+        threshold(vl30, alpha(VL_SEMANTIC["status-error"], 0.75), "VL 30%")
+      ]
+    }
+  );
+}
+function velocityReferenceOverlay(g, showLossBands) {
+  const referencePx = g.best > 0 && g.scaleDenom > 0 ? Math.min(g.plotHeight, g.yOf(g.best)) : 0;
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    showLossBands && /* @__PURE__ */ jsx(
+      VelocityLossBands,
+      {
+        best: g.best,
+        scaleDenom: g.scaleDenom,
+        plotHeight: g.plotHeight,
+        flip: g.flip
+      }
+    ),
+    referencePx > 0 && /* @__PURE__ */ jsx(
+      DashedReferenceLine,
+      {
+        anchor: "bottom",
+        offset: referencePx,
+        testID: "velocity-hero-reference"
+      }
+    )
+  ] });
 }
+var ANIMATION_DURATION = 400;
 function VelocityStrip({
   velocities,
   set,
   zones,
+  barColor = "loss",
+  showLossBands,
+  orientation = "up",
+  scaleMax,
+  hideBaseline,
+  columnSlots,
+  label,
   liveRepIndex,
   expanded = true,
   onToggle,
@@ -853,51 +1574,29 @@ function VelocityStrip({
   className,
   ...props
 }) {
+  const lossBandsOn = showLossBands ?? barColor === "loss";
   const doneVelocities = set ? deriveDoneVelocities(set) : velocities ?? [];
-  const slots = set ? buildSlots(set) : doneVelocities.map((v, i) => ({
-    kind: "rep",
-    velocity: v,
-    leadingGap: i === 0 ? 0 : REP_GAP
-  }));
   const maxVelocity = Math.max(...doneVelocities, 0);
   const meanVelocity = calculateMeanVelocity(doneVelocities);
   const loss = calculateVelocityLoss(doneVelocities);
   const framed = showNumbers || showInfo;
-  const scaleDenom = scaleDenominator(scale, maxVelocity);
   const hasZones = zones != null && zones.length > 0;
-  const barColorFor = (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
-  const slotColor = (slot) => {
-    if (slot.kind === "rep") return barColorFor(slot.velocity ?? 0);
-    if (slot.kind === "todo") return TODO_COLOR2;
-    return SET_STRIP_VARIABLE_COLOR;
-  };
+  const zoneColorFor = makeBarColorFor(zones);
+  const barColorFor = (v) => barColor === "loss" ? getVelocityLossColor(velocityLossForRep(v, maxVelocity)) : zoneColorFor(v);
   const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const [heightAnim] = react.useState(() => new reactNative.Animated.Value(expanded ? height : 3));
-  const [labelOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const [expandProgress] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
   const [infoOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
-  const liveScale = useLiveRepPop(
-    variant === "expanded" && framed,
-    liveRepIndex,
-    liveVelocity,
-    isNewPeak
-  );
   react.useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
-      reactNative.Animated.timing(heightAnim, {
-        toValue: expanded ? height : 3,
+      reactNative.Animated.timing(expandProgress, {
+        toValue: expanded ? 1 : 0,
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
         useNativeDriver: false
       }),
-      reactNative.Animated.timing(labelOpacity, {
-        toValue: expanded ? 1 : 0,
-        duration: 300,
-        delay: expanded ? 150 : 0,
-        useNativeDriver: false
-      }),
       reactNative.Animated.timing(infoOpacity, {
         toValue: expanded ? 1 : 0,
         duration: 300,
@@ -905,250 +1604,176 @@ function VelocityStrip({
         useNativeDriver: false
       })
     ]).start();
-  }, [expanded, variant, framed, height, heightAnim, labelOpacity, infoOpacity]);
+  }, [expanded, variant, framed, expandProgress, infoOpacity]);
   if (set == null && velocities == null) return null;
   const repCount = doneVelocities.length;
   const miniLabel = set ? setAccessibilityLabel(set, repCount) : `Velocity strip, ${repCount} reps`;
   if (variant === "hero") {
-    const heroHeight = height === EXPANDED_HEIGHT ? HERO_HEIGHT : height;
+    const heroHeight = height === EXPANDED_HEIGHT && columnSlots == null ? SET_BAR_DEFAULT_HEIGHT : height;
+    const heroSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
+    const total = Math.max(repCount, targetReps ?? repCount);
+    const heroLabel = maxVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(maxVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
     return /* @__PURE__ */ jsx(
-      HeroVelocityChart,
+      SetBarChart,
       {
-        doneVelocities,
-        barColorFor,
-        scaleDenom,
-        referenceVelocity: maxVelocity,
+        slots: heroSlots,
+        colorFor: barColorFor,
+        height: heroHeight,
+        scale,
+        scaleMax,
+        orientation,
         liveRepIndex,
         isNewPeak,
-        targetReps,
-        height: heroHeight,
+        targetReps: set || columnSlots ? void 0 : targetReps,
+        label,
+        showValueLabels: true,
+        formatValue: formatVelocity,
+        renderReference: (g) => velocityReferenceOverlay(g, lossBandsOn),
+        hideBaseline: true,
+        testID: "velocity-strip-hero",
+        testIDPrefix: "velocity",
+        accessibilityLabel: heroLabel,
         className,
         viewProps: props
       }
     );
   }
-  if (variant === "mini") {
-    const { style: externalStyle, ...restProps } = props;
+  if (variant === "compact") {
+    const compactSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
+    const compactHeight = height === EXPANDED_HEIGHT ? COMPACT_HEIGHT : height;
     return /* @__PURE__ */ jsx(
-      reactNative.View,
+      SetBarChart,
       {
-        className,
-        style: [
-          { flexDirection: "row", height: 3, gap: REP_GAP, borderRadius: 2, overflow: "hidden" },
-          externalStyle
-        ],
-        accessibilityRole: "image",
+        slots: compactSlots,
+        colorFor: barColorFor,
+        height: compactHeight,
+        scale,
+        scaleMax,
+        orientation,
+        flat: true,
+        barRadius: 2,
+        cornerStyle: "all",
+        targetReps: set || columnSlots ? void 0 : targetReps,
+        label,
+        hideBaseline: true,
+        testID: "velocity-strip-compact",
+        testIDPrefix: "velocity",
         accessibilityLabel: miniLabel,
-        testID: "velocity-strip-mini",
-        ...restProps,
-        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              flex: 1,
-              backgroundColor: slotColor(slot),
-              borderRadius: 1,
-              minWidth: 4,
-              height: "100%",
-              // The container's uniform 2px gap covers rep spacing; a wide slot adds
-              // only the EXTRA (WIDE_GAP − REP_GAP) so the notch totals WIDE_GAP.
-              marginLeft: Math.max(0, slot.leadingGap - REP_GAP),
-              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
-            },
-            accessibilityElementsHidden: true,
-            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
-          },
-          i
-        ))
+        className,
+        viewProps: props
       }
     );
   }
   if (!framed) {
-    const { style: externalStyle, ...restProps } = props;
+    const spotlightSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
     return /* @__PURE__ */ jsx(
-      reactNative.View,
+      SetBarChart,
       {
-        className,
-        style: [
-          { flexDirection: "row", height, gap: REP_GAP, alignItems: "flex-end" },
-          externalStyle
-        ],
-        accessibilityRole: "image",
+        slots: spotlightSlots,
+        colorFor: barColorFor,
+        height,
+        scale,
+        scaleMax,
+        orientation,
+        liveRepIndex,
+        isNewPeak,
+        barRadius: 2,
+        cornerStyle: "top",
+        targetReps: set ? void 0 : targetReps,
+        label,
+        hideBaseline: true,
+        testID: "velocity-strip-spotlight",
+        testIDPrefix: "velocity",
         accessibilityLabel: miniLabel,
-        testID: "velocity-strip-compact",
-        ...restProps,
-        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              flex: 1,
-              minWidth: 4,
-              height: bareSlotHeight(slot, height, scaleDenom),
-              // Top-rounded to match the framed chart's bars (the "rounded tops from
-              // the numbers one"); square bottoms since bars sit on the baseline.
-              borderTopLeftRadius: 2,
-              borderTopRightRadius: 2,
-              backgroundColor: slotColor(slot),
-              marginLeft: Math.max(0, slot.leadingGap - REP_GAP),
-              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
-            },
-            accessibilityElementsHidden: true,
-            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
-          },
-          i
-        ))
+        className,
+        viewProps: props
       }
     );
   }
   const stripLabel = set ? `${setAccessibilityLabel(set, repCount)}, tap to ${expanded ? "collapse" : "expand"}` : `Velocity chart for set, ${repCount} reps, tap to ${expanded ? "collapse" : "expand"}`;
   const hasInteractiveContainer = onToggle != null;
   const hasInteractiveReps = onRepPress != null && expanded;
-  const setBars = set != null && slots.map((slot, i) => {
-    const isStraightRep = set.type === "straight" && slot.kind === "rep";
-    const heightPct = isStraightRep ? scaleDenom > 0 ? Math.round((slot.velocity ?? 0) / scaleDenom * 100) : 0 : set.type === "straight" ? EXPANDED_TODO_STUB_PCT : EXPANDED_ENCODED_PCT;
-    return /* @__PURE__ */ jsx(
-      reactNative.View,
+  const framedSlots = set ? buildSlots(set).map((sl) => ({
+    kind: sl.kind,
+    value: sl.velocity,
+    leadingGap: sl.leadingGap
+  })) : doneVelocities.map((v) => ({ kind: "rep", value: v }));
+  const needsBarOverlay = showNumbers || onRepPress != null;
+  const renderFramedBarOverlay = needsBarOverlay ? (repIndex, value) => /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    showNumbers && /* @__PURE__ */ jsx(
+      reactNative.Animated.View,
       {
         style: {
-          flex: 1,
-          height: "100%",
-          justifyContent: "flex-end",
-          marginLeft: slot.leadingGap
+          opacity: expandProgress,
+          position: "absolute",
+          top: -13,
+          left: 0,
+          right: 0,
+          alignItems: "center"
         },
+        accessibilityElementsHidden: true,
+        pointerEvents: "none",
         children: /* @__PURE__ */ jsx(
-          reactNative.View,
+          reactNative.Text,
           {
-            style: {
-              height: `${heightPct}%`,
-              minHeight: 2,
-              borderTopLeftRadius: 2,
-              borderTopRightRadius: 2,
-              backgroundColor: slotColor(slot),
-              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
-            },
-            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`,
-            accessibilityRole: "image",
-            accessibilityLabel: slotAccessibilityLabel(slot, i)
+            className: "text-text-secondary",
+            style: { fontSize: 8, fontWeight: "600" },
+            testID: `velocity-label-${repIndex}`,
+            children: formatVelocity(value)
           }
         )
-      },
-      i
-    );
-  });
+      }
+    ),
+    onRepPress && expanded && /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
+        onPress: () => onRepPress(repIndex, value),
+        accessibilityRole: "button",
+        accessibilityLabel: `Rep ${repIndex + 1}: ${formatVelocity(value)} meters per second, tap for details`,
+        testID: `velocity-bar-pressable-${repIndex}`
+      }
+    )
+  ] }) : void 0;
   const stripContent = /* @__PURE__ */ jsxs(
     reactNative.Animated.View,
     {
-      className: [className, expanded ? "bg-surface-raised" : "bg-transparent"].filter(Boolean).join(" "),
-      style: [
-        {
-          height: heightAnim,
-          width: "100%",
-          gap: 2,
-          borderRadius: expanded ? 6 : 2,
-          paddingTop: expanded ? 16 : 0,
-          paddingBottom: expanded ? 24 : 0,
-          // No horizontal inset — the framed chart's bars span full width, matching
-          // the bare spotlight and mini. Numbers/info sit in the vertical padding.
-          paddingHorizontal: 0,
-          paddingVertical: expanded ? void 0 : 8,
-          overflow: expanded ? "visible" : "hidden"
-        }
-      ],
+      className: [className, "bg-surface-raised"].filter(Boolean).join(" "),
+      style: { width: "100%", borderRadius: 6, paddingTop: 16, paddingBottom: showInfo ? 8 : 4 },
       accessibilityRole: hasInteractiveContainer || hasInteractiveReps ? "none" : "button",
       accessibilityLabel: hasInteractiveContainer || hasInteractiveReps ? void 0 : stripLabel,
       testID: "velocity-strip",
       ...props,
       children: [
-        /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", flex: 1, gap: set ? 0 : 2, alignItems: "flex-end" }, children: set ? setBars : doneVelocities.map((v, i) => {
-          const barBackground = barColorFor(v);
-          const barHeightPct = scaleDenom > 0 ? Math.round(v / scaleDenom * 100) : 0;
-          const isLive = liveRepIndex === i;
-          const liveLabelSuffix = isLive ? isNewPeak ? ", latest rep, new set peak" : ", latest rep" : "";
-          const barStyle = expanded ? {
-            height: `${barHeightPct}%`,
-            minHeight: 2,
-            borderTopLeftRadius: 2,
-            borderTopRightRadius: 2,
-            backgroundColor: barBackground
-          } : {
-            minHeight: "100%",
-            borderTopLeftRadius: 2,
-            borderTopRightRadius: 2,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            backgroundColor: barBackground
-          };
-          const barInner = isLive ? /* @__PURE__ */ jsx(
-            reactNative.Animated.View,
-            {
-              style: [barStyle, { transform: [{ scale: liveScale }] }],
-              testID: `velocity-bar-${i}`,
-              accessibilityRole: "image",
-              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second${liveLabelSuffix}`
-            }
-          ) : /* @__PURE__ */ jsx(
-            reactNative.View,
-            {
-              style: barStyle,
-              testID: `velocity-bar-${i}`,
-              accessibilityRole: "image",
-              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
-            }
-          );
-          const bar = /* @__PURE__ */ jsxs(
-            reactNative.View,
-            {
-              style: {
-                flex: 1,
-                height: "100%",
-                justifyContent: "flex-end",
-                position: "relative"
-              },
-              children: [
-                expanded && showNumbers && /* @__PURE__ */ jsx(
-                  reactNative.Animated.View,
-                  {
-                    style: {
-                      opacity: labelOpacity,
-                      alignItems: "center",
-                      position: "absolute",
-                      top: -13,
-                      left: 0,
-                      right: 0
-                    },
-                    accessibilityElementsHidden: true,
-                    children: /* @__PURE__ */ jsx(
-                      reactNative.Text,
-                      {
-                        className: "text-text-secondary",
-                        style: { fontSize: 8, fontWeight: "600" },
-                        testID: `velocity-label-${i}`,
-                        children: formatVelocity(v)
-                      }
-                    )
-                  }
-                ),
-                barInner
-              ]
-            },
-            i
-          );
-          if (onRepPress && expanded) {
-            return /* @__PURE__ */ jsx(
-              reactNative.Pressable,
-              {
-                style: { flex: 1, height: "100%" },
-                onPress: () => onRepPress(i, v),
-                accessibilityRole: "button",
-                accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`,
-                testID: `velocity-bar-pressable-${i}`,
-                children: bar
-              },
-              i
-            );
+        /* @__PURE__ */ jsx(
+          SetBarChart,
+          {
+            slots: framedSlots,
+            colorFor: barColorFor,
+            height,
+            scale,
+            scaleMax,
+            expandProgress,
+            renderBarOverlay: renderFramedBarOverlay,
+            targetReps: set ? void 0 : targetReps,
+            barRadius: 2,
+            cornerStyle: "top",
+            hideBaseline: true,
+            testIDPrefix: "velocity"
           }
-          return bar;
-        }) }),
+        ),
         expanded && showInfo && /* @__PURE__ */ jsxs(
           reactNative.Animated.View,
           {
@@ -1156,10 +1781,8 @@ function VelocityStrip({
               flexDirection: "row",
               justifyContent: "space-between",
               opacity: infoOpacity,
-              position: "absolute",
-              bottom: 4,
-              left: 6,
-              right: 6
+              marginTop: 6,
+              paddingHorizontal: 6
             },
             testID: "velocity-info-row",
             children: [
@@ -1167,10 +1790,7 @@ function VelocityStrip({
                 reactNative.Text,
                 {
                   className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif"
-                  },
+                  style: { fontSize: 10, fontFamily: "Inter, sans-serif" },
                   children: [
                     meanZone,
                     " ",
@@ -1185,11 +1805,7 @@ function VelocityStrip({
                 reactNative.Text,
                 {
                   className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    ...getLossStyle(loss)
-                  },
+                  style: { fontSize: 10, fontFamily: "Inter, sans-serif", ...getLossStyle(loss) },
                   children: [
                     "Loss: ",
                     loss,
@@ -1368,13 +1984,14 @@ function InfoIcon(props) {
     /* @__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: "#1C1C1C", borderColor: "#1F1F1F" },
+  plain: { backgroundColor: t["surface-raised"], borderColor: "#1F1F1F" },
   pr: {
     backgroundColor: "rgba(255, 121, 0, 0.12)",
     borderColor: "rgba(255, 121, 0, 0.3)"
@@ -1406,310 +2023,44 @@ function BaseBadge({
       useNativeDriver: true
     }).start();
   };
-  const badge = /* @__PURE__ */ jsxs(
-    reactNative.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(reactNative.View, { accessibilityElementsHidden: true, testID: "base-badge-icon", children: icon }),
-        children
-      ]
-    }
-  );
-  if (onPress) {
-    return /* @__PURE__ */ jsx(reactNative.Animated.View, { style: { transform: [{ scale: scaleAnim }] }, children: /* @__PURE__ */ jsx(
-      reactNative.Pressable,
-      {
-        onPress,
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
-        accessibilityRole: "button",
-        accessibilityLabel: props.accessibilityLabel,
-        testID: "base-badge-pressable",
-        children: badge
-      }
-    ) });
-  }
-  return badge;
-}
-
-// src/theme/tokens/semantic.ts
-var semanticColorsLight = {
-  // Brand colors (brand-*)
-  "brand-primary": primitiveRamps.orange[400],
-  "brand-primary-light": primitiveRamps.orange[300],
-  "brand-primary-dark": primitiveRamps.orange[500],
-  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
-  "brand-primary-hover": primitiveRamps.orange[500],
-  "brand-primary-active": primitiveRamps.orange[600],
-  "brand-secondary": primitiveRamps.cyan[600],
-  "brand-secondary-light": primitiveRamps.cyan[500],
-  "brand-secondary-dark": primitiveRamps.cyan[700],
-  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
-  "brand-secondary-hover": primitiveRamps.cyan[700],
-  "brand-secondary-active": primitiveRamps.cyan[800],
-  // Text on brand backgrounds (on-*)
-  "on-brand-primary": primitiveColors.white,
-  "on-brand-secondary": primitiveColors.white,
-  // Status colors (status-*)
-  "status-success": primitiveRamps.green[300],
-  "status-success-light": primitiveRamps.green[200],
-  "status-success-dark": primitiveRamps.green[600],
-  "status-success-subtle": primitiveRamps.green[50],
-  // Live-session accent — its OWN role, decoupled from success so the two can diverge
-  "status-live": primitiveRamps.green[300],
-  "status-live-muted": primitiveRamps.green[500],
-  "status-error": primitiveRamps.red[600],
-  "status-error-light": primitiveRamps.red[500],
-  "status-error-dark": primitiveRamps.red[700],
-  "status-error-subtle": primitiveRamps.red[50],
-  "status-error-vivid": primitiveColors.redVivid[500],
-  // vivid alert red
-  "status-error-vivid-light": primitiveColors.redVivid[400],
-  "status-error-vivid-dark": primitiveColors.redVivid[700],
-  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
-  "status-warning": primitiveRamps.amber[300],
-  "status-warning-light": primitiveRamps.amber[200],
-  "status-warning-dark": primitiveRamps.amber[500],
-  "status-warning-subtle": primitiveRamps.amber[50],
-  "status-info": primitiveRamps.blue[500],
-  "status-info-light": primitiveRamps.blue[300],
-  "status-info-dark": primitiveRamps.blue[600],
-  "status-info-subtle": primitiveRamps.blue[50],
-  // 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",
-  // Green - positive outcome
-  "result-improve-light": "rgba(76, 175, 80, 0.12)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
-  // Red - negative outcome
-  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
-  "result-degrade-dark": "#b30000",
-  "result-inconclusive": "#9E9A97",
-  // Gray - no clear result
-  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
-  "result-neutral": primitiveColors.neutral[500],
-  // Neutral baseline
-  // Text on result backgrounds (on-result-*)
-  "on-result-improve": primitiveColors.white,
-  "on-result-degrade": primitiveColors.white,
-  "on-result-inconclusive": primitiveColors.white,
-  // Data visualization colors (data-*)
-  // First 10 colors from discrete rainbow optimized for charts
-  "data-1": discreteRainbow[9],
-  // Blue
-  "data-2": discreteRainbow[14],
-  // Green
-  "data-3": discreteRainbow[17],
-  // Yellow
-  "data-4": discreteRainbow[25],
-  // Red
-  "data-5": discreteRainbow[8],
-  // Purple
-  "data-6": discreteRainbow[20],
-  // Orange
-  "data-7": discreteRainbow[13],
-  // Light Blue
-  "data-8": discreteRainbow[15],
-  // Light Green
-  "data-9": discreteRainbow[3],
-  // Lavender
-  "data-10": discreteRainbow[22],
-  // Dark Orange
-  // Text colors (text-*)
-  "text-primary": "#121828",
-  "text-secondary": "#65748B",
-  "text-tertiary": primitiveColors.neutral[400],
-  "text-disabled": "rgba(55, 65, 81, 0.48)",
-  "text-inverse": primitiveColors.white,
-  "text-link": primitiveColors.blue[600],
-  "text-link-hover": primitiveColors.blue[700],
-  // Surface colors (surface-*) - for elevated containers
-  "surface-base": primitiveColors.white,
-  "surface-elevated": primitiveColors.neutral[50],
-  // slightly off-white for elevated cards
-  "surface-raised": primitiveColors.neutral[100],
-  // light gray for raised cards
-  "surface-overlay": primitiveColors.white,
-  "surface-input": primitiveColors.neutral[50],
-  // Input field background (filled variant)
-  // Background colors (background-*)
-  "background-base": "#EBEBEB",
-  "background-default": primitiveColors.white,
-  "background-subtle": primitiveColors.neutral[50],
-  // Border colors (border-*)
-  "border-default": "#E8E9EB",
-  "border-subtle": primitiveColors.neutral[100],
-  "border-strong": primitiveColors.neutral[300],
-  "border-prominent": primitiveColors.neutral[400],
-  // high-visibility divider
-  "border-focus": primitiveColors.blue[600],
-  "border-input": primitiveColors.neutral[300],
-  // Input field border
-  "border-input-hover": primitiveColors.neutral[400],
-  // Input field border on hover
-  "border-input-focus": primitiveColors.blue[600],
-  // Input field border on focus
-  "border-input-error": primitiveColors.red[600],
-  // Input field border on error
-  // Interactive states (interactive-*)
-  "interactive-hover": "rgba(55, 65, 81, 0.04)",
-  "interactive-focus": "rgba(55, 65, 81, 0.12)",
-  "interactive-active": "rgba(55, 65, 81, 0.16)",
-  "interactive-selected": "rgba(55, 65, 81, 0.08)",
-  "interactive-disabled": "rgba(55, 65, 81, 0.12)",
-  "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
-  // Divider
-  "divider": "#E8E9EB",
-  // Avatar default
-  "avatar-background": primitiveColors.neutral[500],
-  "avatar-text": primitiveColors.white
-};
-var semanticColorsDark = {
-  // Brand colors stay the same in dark mode
-  "brand-primary": primitiveRamps.orange[400],
-  "brand-primary-light": primitiveRamps.orange[300],
-  "brand-primary-dark": primitiveRamps.orange[500],
-  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
-  "brand-primary-hover": primitiveRamps.orange[300],
-  "brand-primary-active": primitiveRamps.orange[200],
-  "brand-secondary": primitiveRamps.cyan[600],
-  "brand-secondary-light": primitiveRamps.cyan[500],
-  "brand-secondary-dark": primitiveRamps.cyan[700],
-  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
-  "brand-secondary-hover": primitiveRamps.cyan[500],
-  "brand-secondary-active": primitiveRamps.cyan[400],
-  // Text on brand backgrounds
-  "on-brand-primary": primitiveColors.white,
-  "on-brand-secondary": primitiveColors.white,
-  // Status colors
-  "status-success": primitiveRamps.green[300],
-  "status-success-light": primitiveRamps.green[200],
-  "status-success-dark": primitiveRamps.green[600],
-  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
-  // Live-session accent — its OWN role, decoupled from success so the two can diverge
-  "status-live": primitiveRamps.green[300],
-  "status-live-muted": primitiveRamps.green[500],
-  "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)",
-  "status-error-vivid": primitiveColors.redVivid[500],
-  "status-error-vivid-light": primitiveColors.redVivid[400],
-  "status-error-vivid-dark": primitiveColors.redVivid[700],
-  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
-  "status-warning": primitiveRamps.amber[300],
-  "status-warning-light": primitiveRamps.amber[200],
-  "status-warning-dark": primitiveRamps.amber[500],
-  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
-  "status-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)",
-  // Text on status backgrounds
-  "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-light": "rgba(76, 175, 80, 0.16)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
-  "result-degrade-light": "rgba(239, 83, 80, 0.16)",
-  "result-degrade-dark": "#b30000",
-  "result-inconclusive": "#9E9A97",
-  "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
-  "result-neutral": primitiveColors.neutral[400],
-  // Text on result backgrounds
-  "on-result-improve": primitiveColors.white,
-  "on-result-degrade": primitiveColors.white,
-  "on-result-inconclusive": primitiveColors.white,
-  // Data visualization colors (same in dark mode for consistency)
-  "data-1": discreteRainbow[9],
-  "data-2": discreteRainbow[14],
-  "data-3": discreteRainbow[17],
-  "data-4": discreteRainbow[25],
-  "data-5": discreteRainbow[8],
-  "data-6": discreteRainbow[20],
-  "data-7": discreteRainbow[13],
-  "data-8": discreteRainbow[15],
-  "data-9": discreteRainbow[3],
-  "data-10": discreteRainbow[22],
-  // Text colors - inverted for dark mode
-  "text-primary": primitiveColors.neutral[100],
-  "text-secondary": primitiveColors.neutral[400],
-  "text-tertiary": primitiveColors.neutral[500],
-  "text-disabled": "rgba(255, 255, 255, 0.38)",
-  "text-inverse": primitiveColors.neutral[900],
-  "text-link": "#828DF8",
-  "text-link-hover": primitiveColors.blue[400],
-  // Surface colors - dark backgrounds
-  "surface-base": primitiveColors.charcoal[700],
-  // main surface
-  "surface-elevated": primitiveColors.charcoal[600],
-  // elevated surface
-  "surface-raised": primitiveColors.charcoal[500],
-  // raised surface
-  "surface-overlay": primitiveColors.charcoal[600],
-  // overlay surface
-  "surface-input": primitiveColors.charcoal[600],
-  // input surface
-  // Background colors
-  "background-base": primitiveColors.charcoal[900],
-  // darkest charcoal
-  "background-default": primitiveColors.charcoal[700],
-  // main background
-  "background-subtle": primitiveColors.charcoal[500],
-  // subtle background
-  // Border colors
-  "border-default": primitiveColors.charcoal[400],
-  // default border
-  "border-subtle": primitiveColors.charcoal[500],
-  // subtle border
-  "border-strong": primitiveColors.charcoal[300],
-  // strong border
-  "border-prominent": primitiveColors.charcoal[200],
-  // high-visibility divider
-  "border-focus": "#828DF8",
-  "border-input": primitiveColors.neutral[600],
-  "border-input-hover": primitiveColors.neutral[500],
-  "border-input-focus": "#828DF8",
-  "border-input-error": primitiveColors.red[500],
-  // Interactive states
-  "interactive-hover": "rgba(255, 255, 255, 0.04)",
-  "interactive-focus": "rgba(255, 255, 255, 0.12)",
-  "interactive-active": "rgba(255, 255, 255, 0.16)",
-  "interactive-selected": "rgba(255, 255, 255, 0.08)",
-  "interactive-disabled": "rgba(255, 255, 255, 0.12)",
-  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
-  // Divider
-  "divider": primitiveColors.charcoal[400],
-  // divider color
-  // Avatar default
-  "avatar-background": primitiveColors.neutral[600],
-  "avatar-text": primitiveColors.white
-};
-function getSemanticColors(mode) {
-  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+  const badge = /* @__PURE__ */ jsxs(
+    reactNative.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(reactNative.View, { accessibilityElementsHidden: true, testID: "base-badge-icon", children: icon }),
+        children
+      ]
+    }
+  );
+  if (onPress) {
+    return /* @__PURE__ */ jsx(reactNative.Animated.View, { style: { transform: [{ scale: scaleAnim }] }, children: /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        accessibilityRole: "button",
+        accessibilityLabel: props.accessibilityLabel,
+        testID: "base-badge-pressable",
+        children: badge
+      }
+    ) });
+  }
+  return badge;
 }
 
 // src/components/custom/Workout/PrBadge.tsx
@@ -1762,563 +2113,255 @@ function PrBadge({
   ) : /* @__PURE__ */ jsx(
     BaseBadge,
     {
-      variant: "pr",
-      className,
-      accessibilityLabel: `Personal record: ${resolvedLabel}`,
-      ...props,
-      children: /* @__PURE__ */ jsxs(
-        reactNative.Text,
-        {
-          style: {
-            fontSize: 12,
-            color: BRAND_PRIMARY,
-            fontWeight: "700",
-            fontFamily: "Inter, sans-serif"
-          },
-          children: [
-            "\u2605",
-            " ",
-            resolvedLabel
-          ]
-        }
-      )
-    }
-  );
-  if (animate) {
-    return /* @__PURE__ */ jsx(
-      reactNative.Animated.View,
-      {
-        style: { transform: [{ scale }], opacity },
-        testID: "pr-badge-animated",
-        children: badge
-      }
-    );
-  }
-  return badge;
-}
-var DARK = getSemanticColors("dark");
-var TEXT_ACTIVE = DARK["text-primary"];
-var TEXT_MUTED = DARK["text-secondary"];
-var COL = { set: 36, reps: 44, load: 56, rpe: 36 };
-var cellText = { fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: "600" };
-var typeBadge = {
-  fontSize: 10,
-  fontWeight: "700",
-  fontFamily: "Inter, sans-serif",
-  color: WORKOUT_TOKENS.scale.orange,
-  backgroundColor: "rgba(255,165,2,0.12)",
-  paddingVertical: 1,
-  paddingHorizontal: 5,
-  borderRadius: 3,
-  overflow: "hidden"
-};
-function displayReps(set) {
-  return set.state === "done" ? set.reps : set.target.reps;
-}
-function displayWeight(set) {
-  return set.state === "done" ? set.weight : set.target.weight;
-}
-function plannedReps(set) {
-  if (set.state === "done") return set.velocities.length;
-  if (set.state === "live") return set.target.reps;
-  return set.planned ?? set.target.reps;
-}
-function accessibilityLabel(set) {
-  const base = `Set ${set.setNumber}: ${displayReps(set)} reps at ${roundWeight(displayWeight(set))} ${set.unit}`;
-  if (set.state === "live") return `${base}, in progress`;
-  if (set.state === "todo") return `${base}, upcoming`;
-  return base;
-}
-function Cell({
-  width,
-  children,
-  testID
-}) {
-  return /* @__PURE__ */ jsx(reactNative.View, { style: { width, alignItems: "center", justifyContent: "center" }, testID, children });
-}
-function RowStrip({ set }) {
-  const zones = set.velocityZones;
-  if (set.state === "live") {
-    return /* @__PURE__ */ jsx(
-      VelocityStrip,
-      {
-        variant: "expanded",
-        showNumbers: false,
-        showInfo: false,
-        height: 24,
-        scale: "fixed",
-        set: { type: "straight", velocities: set.velocities, planned: set.target.reps },
-        zones
-      }
-    );
-  }
-  const velocities = set.state === "done" ? set.velocities : [];
-  return /* @__PURE__ */ jsx(
-    VelocityStrip,
-    {
-      variant: "mini",
-      set: { type: "straight", velocities, planned: plannedReps(set) },
-      zones
-    }
-  );
-}
-function SetRow(set) {
-  const live = set.state === "live";
-  const valueColor = live ? TEXT_ACTIVE : TEXT_MUTED;
-  const rpe = set.state === "todo" ? null : set.rpe;
-  return /* @__PURE__ */ jsxs(
-    reactNative.View,
-    {
-      style: { paddingVertical: 6, paddingHorizontal: 8 },
-      accessibilityLabel: accessibilityLabel(set),
-      testID: "set-row",
-      children: [
-        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsx(Cell, { width: COL.set, testID: "set-row-set-number", children: set.setType ? /* @__PURE__ */ jsx(reactNative.Text, { style: typeBadge, testID: "set-row-type-badge", children: set.setType }) : /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor, fontWeight: live ? "700" : "600" }, children: set.setNumber }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.reps, testID: "set-row-reps", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: displayReps(set) }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.load, testID: "set-row-weight", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: roundWeight(displayWeight(set)) }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.rpe, testID: "set-row-rpe", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: TEXT_MUTED }, children: rpe != null ? roundRpe(rpe) : "\u2014" }) })
-        ] }),
-        /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: live ? 6 : 4 }, testID: "set-row-strip", children: /* @__PURE__ */ jsx(RowStrip, { set }) })
-      ]
-    }
-  );
-}
-var PREV_COLUMN = { label: "PREV", width: void 0 };
-function buildColumns(unit, showPrevious) {
-  return [
-    { label: "SET", width: 36 },
-    ...showPrevious ? [PREV_COLUMN] : [],
-    { label: "REPS", width: 44 },
-    { label: unit.toUpperCase(), width: 56 },
-    { label: "RPE", width: 36 }
-  ];
-}
-function SetTableHeader({
-  unit = "lbs",
-  showPrevious = true,
-  testID = "table-header"
-}) {
-  const columns = buildColumns(unit, showPrevious);
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className: "flex-row",
-      style: {
-        paddingVertical: 8,
-        paddingHorizontal: 8,
-        paddingBottom: 4,
-        ...showPrevious ? {} : { justifyContent: "space-between" }
-      },
-      testID,
-      children: columns.map(({ label, width }) => {
-        const isFlex = width === void 0;
-        return /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              ...isFlex ? { minWidth: 44 } : { width, flexShrink: 1 },
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 8
-            },
-            ...isFlex ? { className: "flex-1" } : {},
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 10,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  textTransform: "uppercase",
-                  letterSpacing: 0.8
-                },
-                children: label
-              }
-            )
-          },
-          label
-        );
-      })
-    }
-  );
-}
-var METRIC_FONT = "Inter, sans-serif";
-function MetricCell({ children, color, fontSize = 11 }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.Text,
-    {
-      style: {
-        fontFamily: METRIC_FONT,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children
-    }
-  );
-}
-
-// src/components/custom/Workout/SetsRepsLoad.tsx
-var t = getSemanticColors("dark");
-var TIMES = "\xD7";
-var AT = "@";
-function SetsRepsLoad({
-  sets,
-  reps,
-  load,
-  unit = "lb",
-  fontSize,
-  className,
-  ...props
-}) {
-  const value = t["text-primary"];
-  const sep = t["text-tertiary"];
-  return /* @__PURE__ */ jsxs(
-    reactNative.View,
-    {
-      className,
-      style: { flexDirection: "row", alignItems: "baseline" },
-      accessibilityLabel: `${sets} sets of ${reps} reps at ${load} ${unit}`,
-      testID: "sets-reps-load",
+      variant: "pr",
+      className,
+      accessibilityLabel: `Personal record: ${resolvedLabel}`,
       ...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}` })
-      ]
+      children: /* @__PURE__ */ jsxs(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: 12,
+            color: BRAND_PRIMARY,
+            fontWeight: "700",
+            fontFamily: "Inter, sans-serif"
+          },
+          children: [
+            "\u2605",
+            " ",
+            resolvedLabel
+          ]
+        }
+      )
     }
   );
-}
-function hexToRgb(hex) {
-  const cleaned = hex.replace("#", "");
-  let r, g, b;
-  if (cleaned.length === 3) {
-    r = parseInt(cleaned[0] + cleaned[0], 16);
-    g = parseInt(cleaned[1] + cleaned[1], 16);
-    b = parseInt(cleaned[2] + cleaned[2], 16);
-  } else if (cleaned.length === 6) {
-    r = parseInt(cleaned.slice(0, 2), 16);
-    g = parseInt(cleaned.slice(2, 4), 16);
-    b = parseInt(cleaned.slice(4, 6), 16);
-  } else {
-    return null;
+  if (animate) {
+    return /* @__PURE__ */ jsx(
+      reactNative.Animated.View,
+      {
+        style: { transform: [{ scale }], opacity },
+        testID: "pr-badge-animated",
+        children: badge
+      }
+    );
   }
-  return { r, g, b };
+  return badge;
 }
-function rgbToHsv(r, g, b) {
-  const rNorm = r / 255;
-  const gNorm = g / 255;
-  const bNorm = b / 255;
-  const max = Math.max(rNorm, gNorm, bNorm);
-  const min = Math.min(rNorm, gNorm, bNorm);
-  const delta = max - min;
-  const v = max;
-  const s = max === 0 ? 0 : delta / max;
-  let h = 0;
-  if (delta !== 0) {
-    if (max === rNorm) {
-      h = 60 * ((gNorm - bNorm) / delta % 6);
-    } else if (max === gNorm) {
-      h = 60 * ((bNorm - rNorm) / delta + 2);
-    } else {
-      h = 60 * ((rNorm - gNorm) / delta + 4);
-    }
-  }
-  if (h < 0) h += 360;
-  return { h, s, v };
+var DARK = getSemanticColors("dark");
+var TEXT_ACTIVE = DARK["text-primary"];
+var TEXT_MUTED = DARK["text-secondary"];
+var COL = { set: 36, reps: 44, load: 56, rpe: 36 };
+var cellText = { fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: "600" };
+var typeBadge = {
+  fontSize: 10,
+  fontWeight: "700",
+  fontFamily: "Inter, sans-serif",
+  color: WORKOUT_TOKENS.scale.orange,
+  backgroundColor: "rgba(255,165,2,0.12)",
+  paddingVertical: 1,
+  paddingHorizontal: 5,
+  borderRadius: 3,
+  overflow: "hidden"
+};
+function displayReps(set) {
+  return set.state === "done" ? set.reps : set.target.reps;
 }
-function hsvToRgb(h, s, v) {
-  const c = v * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = v - c;
-  let rPrime, gPrime, bPrime;
-  if (h >= 0 && h < 60) {
-    rPrime = c;
-    gPrime = x;
-    bPrime = 0;
-  } else if (h >= 60 && h < 120) {
-    rPrime = x;
-    gPrime = c;
-    bPrime = 0;
-  } else if (h >= 120 && h < 180) {
-    rPrime = 0;
-    gPrime = c;
-    bPrime = x;
-  } else if (h >= 180 && h < 240) {
-    rPrime = 0;
-    gPrime = x;
-    bPrime = c;
-  } else if (h >= 240 && h < 300) {
-    rPrime = x;
-    gPrime = 0;
-    bPrime = c;
-  } else {
-    rPrime = c;
-    gPrime = 0;
-    bPrime = x;
-  }
-  return {
-    r: Math.round((rPrime + m) * 255),
-    g: Math.round((gPrime + m) * 255),
-    b: Math.round((bPrime + m) * 255)
-  };
+function displayWeight(set) {
+  return set.state === "done" ? set.weight : set.target.weight;
 }
-function rgbToHex(r, g, b) {
-  const toHex = (n) => {
-    const clamped = Math.max(0, Math.min(255, Math.round(n)));
-    return clamped.toString(16).padStart(2, "0");
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+function plannedReps(set) {
+  if (set.state === "done") return set.velocities.length;
+  if (set.state === "live") return set.target.reps;
+  return set.planned ?? set.target.reps;
 }
-function lighten(hex, amount = 0.1) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const newV = Math.min(1, hsv.v + amount);
-  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
-  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+function accessibilityLabel(set) {
+  const base = `Set ${set.setNumber}: ${displayReps(set)} reps at ${roundWeight(displayWeight(set))} ${set.unit}`;
+  if (set.state === "live") return `${base}, in progress`;
+  if (set.state === "todo") return `${base}, upcoming`;
+  return base;
 }
-var shadowColors = {
-  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
-  charcoal: {
-    dark: "rgba(0, 0, 0, 0.5)",
-    light: "rgba(255, 255, 255, 0.12)",
-    // brighter for crisp rim light
-    darker: "rgba(0, 0, 0, 0.6)"
-  },
-  // For neutral dark surfaces (~#1F2937)
-  neutralDark: {
-    dark: "rgba(0, 0, 0, 0.4)",
-    light: "rgba(255, 255, 255, 0.08)",
-    darker: "rgba(0, 0, 0, 0.5)"
-  },
-  // For light surfaces (white/light gray backgrounds)
-  neutralLight: {
-    dark: "rgba(0, 0, 0, 0.15)",
-    // Visible dark shadow for depth on light backgrounds
-    light: "rgba(255, 255, 255, 1)",
-    // Bright highlight for raised effect (visible on light gray)
-    darker: "rgba(0, 0, 0, 0.2)"
-    // Deeper shadow for pressed states
+function Cell({
+  width,
+  children,
+  testID
+}) {
+  return /* @__PURE__ */ jsx(reactNative.View, { style: { width, alignItems: "center", justifyContent: "center" }, testID, children });
+}
+function RowStrip({ set }) {
+  const zones = set.velocityZones;
+  if (set.state === "live") {
+    return /* @__PURE__ */ jsx(
+      VelocityStrip,
+      {
+        variant: "expanded",
+        showNumbers: false,
+        showInfo: false,
+        height: 24,
+        scale: "fixed",
+        liveRepIndex: set.velocities.length - 1,
+        set: { type: "straight", velocities: set.velocities, planned: set.target.reps },
+        zones
+      }
+    );
   }
-};
-var intensityConfig = {
-  subtle: { offset: 1, blur: 2 },
-  // very light, barely visible
-  medium: { offset: 2, blur: 4 },
-  // noticeable but restrained
-  strong: { offset: 2, blur: 5 }
-  // slightly deeper blur, same offset as medium
-};
-function createRaisedShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      // React Native shadow approximation (limited compared to web)
-      shadowColor: "#000",
-      shadowOffset: { width: offset, height: offset },
-      shadowOpacity: 0.3,
-      shadowRadius: blur / 2,
-      elevation: offset
+  const velocities = set.state === "done" ? set.velocities : [];
+  return /* @__PURE__ */ jsx(
+    VelocityStrip,
+    {
+      variant: "compact",
+      height: 8,
+      hideBaseline: true,
+      set: { type: "straight", velocities, planned: plannedReps(set) },
+      zones
     }
-  });
+  );
 }
-function createPressedShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const rimOffset = 1;
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      // React Native doesn't support inset shadows, approximate with darker bg
-      shadowOpacity: 0,
-      elevation: 0
+function SetRow(set) {
+  const live = set.state === "live";
+  const valueColor = live ? TEXT_ACTIVE : TEXT_MUTED;
+  const rpe = set.state === "todo" ? null : set.rpe;
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { paddingVertical: 6, paddingHorizontal: 8 },
+      accessibilityLabel: accessibilityLabel(set),
+      testID: "set-row",
+      children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsx(Cell, { width: COL.set, testID: "set-row-set-number", children: set.setType ? /* @__PURE__ */ jsx(reactNative.Text, { style: typeBadge, testID: "set-row-type-badge", children: set.setType }) : /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor, fontWeight: live ? "700" : "600" }, children: set.setNumber }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.reps, testID: "set-row-reps", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: displayReps(set) }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.load, testID: "set-row-weight", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: roundWeight(displayWeight(set)) }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.rpe, testID: "set-row-rpe", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: TEXT_MUTED }, children: rpe != null ? roundRpe(rpe) : "\u2014" }) })
+        ] }),
+        /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: live ? 6 : 4 }, testID: "set-row-strip", children: /* @__PURE__ */ jsx(RowStrip, { set }) })
+      ]
     }
-  });
+  );
 }
-function createFlatShadow() {
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: "none"
-    },
-    default: {
-      shadowOpacity: 0,
-      elevation: 0
-    }
-  });
+var PREV_COLUMN = { label: "PREV", width: void 0 };
+function buildColumns(unit, showPrevious) {
+  return [
+    { label: "SET", width: 36 },
+    ...showPrevious ? [PREV_COLUMN] : [],
+    { label: "REPS", width: 44 },
+    { label: unit.toUpperCase(), width: 56 },
+    { label: "RPE", width: 36 }
+  ];
 }
-function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const hoverOffset = Math.max(1, Math.round(offset / 2));
-  const hoverBlur = Math.max(1, Math.round(blur / 2));
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      // Keep same offsets as normal state for rim to prevent "shrinking" effect
-      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      shadowColor: "#000",
-      shadowOffset: { width: hoverOffset, height: hoverOffset },
-      shadowOpacity: 0.2,
-      shadowRadius: hoverBlur / 2,
-      elevation: hoverOffset
+function SetTableHeader({
+  unit = "lbs",
+  showPrevious = true,
+  testID = "table-header"
+}) {
+  const columns = buildColumns(unit, showPrevious);
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className: "flex-row",
+      style: {
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        paddingBottom: 4,
+        ...showPrevious ? {} : { justifyContent: "space-between" }
+      },
+      testID,
+      children: columns.map(({ label, width }) => {
+        const isFlex = width === void 0;
+        return /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              ...isFlex ? { minWidth: 44 } : { width, flexShrink: 1 },
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8
+            },
+            ...isFlex ? { className: "flex-1" } : {},
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: "text-text-tertiary",
+                style: {
+                  fontSize: 10,
+                  fontWeight: "600",
+                  fontFamily: "Inter, sans-serif",
+                  textTransform: "uppercase",
+                  letterSpacing: 0.8
+                },
+                children: label
+              }
+            )
+          },
+          label
+        );
+      })
     }
-  });
+  );
 }
-function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const hoverOffset = Math.max(1, Math.round(offset / 2));
-  const hoverBlur = Math.max(1, Math.round(blur / 2));
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
-      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      shadowOpacity: 0,
-      elevation: 0
+var METRIC_FONT = "Inter, sans-serif";
+function MetricCell({ children, color, fontSize = 11 }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.Text,
+    {
+      style: {
+        fontFamily: METRIC_FONT,
+        fontSize,
+        color,
+        fontWeight: "600",
+        letterSpacing: 1
+      },
+      children
     }
-  });
+  );
 }
-({
-  // Charcoal surface shadows (for dark toolbars, cards)
-  charcoal: {
-    raised: {
-      subtle: createRaisedShadow("charcoal", "subtle"),
-      medium: createRaisedShadow("charcoal", "medium"),
-      strong: createRaisedShadow("charcoal", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("charcoal", "subtle"),
-      medium: createRaisedHoverShadow("charcoal", "medium"),
-      strong: createRaisedHoverShadow("charcoal", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("charcoal", "subtle"),
-      medium: createPressedShadow("charcoal", "medium"),
-      strong: createPressedShadow("charcoal", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("charcoal", "subtle"),
-      medium: createPressedHoverShadow("charcoal", "medium"),
-      strong: createPressedHoverShadow("charcoal", "strong")
-    },
-    flat: createFlatShadow()
-  },
-  // Neutral dark surface shadows
-  neutralDark: {
-    raised: {
-      subtle: createRaisedShadow("neutralDark", "subtle"),
-      medium: createRaisedShadow("neutralDark", "medium"),
-      strong: createRaisedShadow("neutralDark", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
-      medium: createRaisedHoverShadow("neutralDark", "medium"),
-      strong: createRaisedHoverShadow("neutralDark", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("neutralDark", "subtle"),
-      medium: createPressedShadow("neutralDark", "medium"),
-      strong: createPressedShadow("neutralDark", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("neutralDark", "subtle"),
-      medium: createPressedHoverShadow("neutralDark", "medium"),
-      strong: createPressedHoverShadow("neutralDark", "strong")
-    },
-    flat: createFlatShadow()
-  },
-  // Neutral light surface shadows
-  neutralLight: {
-    raised: {
-      subtle: createRaisedShadow("neutralLight", "subtle"),
-      medium: createRaisedShadow("neutralLight", "medium"),
-      strong: createRaisedShadow("neutralLight", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
-      medium: createRaisedHoverShadow("neutralLight", "medium"),
-      strong: createRaisedHoverShadow("neutralLight", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("neutralLight", "subtle"),
-      medium: createPressedShadow("neutralLight", "medium"),
-      strong: createPressedShadow("neutralLight", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("neutralLight", "subtle"),
-      medium: createPressedHoverShadow("neutralLight", "medium"),
-      strong: createPressedHoverShadow("neutralLight", "strong")
-    },
-    flat: createFlatShadow()
-  }
-});
 
-// src/utils/colors.ts
-function alpha(color, opacity) {
-  const clampedOpacity = Math.max(0, Math.min(1, opacity));
-  if (color.startsWith("#")) {
-    const hex = color.slice(1);
-    let r, g, b;
-    if (hex.length === 3) {
-      r = parseInt(hex[0] + hex[0], 16);
-      g = parseInt(hex[1] + hex[1], 16);
-      b = parseInt(hex[2] + hex[2], 16);
-    } else if (hex.length === 6) {
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-    } else {
-      return color;
+// src/components/custom/Workout/SetsRepsLoad.tsx
+var t2 = getSemanticColors("dark");
+var TIMES = "\xD7";
+var AT = "@";
+function SetsRepsLoad({
+  sets,
+  reps,
+  load,
+  unit = "lb",
+  fontSize,
+  className,
+  ...props
+}) {
+  const value = t2["text-primary"];
+  const sep = t2["text-tertiary"];
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: { flexDirection: "row", alignItems: "baseline" },
+      accessibilityLabel: `${sets} sets of ${reps} reps at ${load} ${unit}`,
+      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}` })
+      ]
     }
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
-  if (rgbaMatch) {
-    const [, r, g, b] = rgbaMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  return color;
+  );
 }
-
-// src/components/custom/Workout/TempoDisplay.tsx
-var t2 = getSemanticColors("dark");
+var t3 = 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 = t3["status-error"];
+var STATUS_SUCCESS = t3["status-success"];
+var STATUS_WARNING = t3["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 t3["text-primary"];
   const remainingMs = targetMs - elapsedMs;
   if (remainingMs > ON_TARGET_MS) return STATUS_WARNING;
   if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS;
@@ -2470,7 +2513,7 @@ function TempoDisplay({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: "#1C1C1C",
+        backgroundColor: t3["surface-raised"],
         paddingHorizontal: chromePadX,
         paddingVertical: chromePadY,
         borderRadius: chromeRadius
@@ -2485,7 +2528,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 ? t3["status-live-muted"] : TEXT_TERTIARY,
               letterSpacing: 0.5,
               textTransform: "uppercase",
               marginRight: Math.round(fontSize * 0.5)
@@ -2543,7 +2586,7 @@ function TempoDisplay({
                 reactNative.View,
                 {
                   style: {
-                    backgroundColor: "#191919",
+                    backgroundColor: t3["surface-overlay"],
                     borderRadius: 6,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
@@ -2596,14 +2639,14 @@ function TempoDisplay({
     }
   );
 }
-var t3 = getSemanticColors("dark");
+var t4 = getSemanticColors("dark");
 var INDICATOR_CONFIG = {
-  imbalance: { Icon: ScaleIcon, color: t3["status-error"], label: "Left/right imbalance" },
-  overshoot: { Icon: AlertTriangleIcon, color: t3["status-error"], label: "Load overshoot" },
-  "velocity-loss": { Icon: TrendingDownIcon, color: t3["status-warning"], label: "Velocity loss" },
-  "missed-reps": { Icon: CircleSlashIcon, color: t3["status-warning"], label: "Missed reps" },
-  pr: { Icon: AwardIcon, color: t3["status-success"], label: "Personal record" },
-  info: { Icon: InfoIcon, color: t3["status-info"], label: "More info" }
+  imbalance: { Icon: ScaleIcon, color: t4["status-error"], label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, color: t4["status-error"], label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, color: t4["status-warning"], label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, color: t4["status-warning"], label: "Missed reps" },
+  pr: { Icon: AwardIcon, color: t4["status-success"], label: "Personal record" },
+  info: { Icon: InfoIcon, color: t4["status-info"], label: "More info" }
 };
 function ExerciseIndicator({ kind, onPress, className, ...props }) {
   const { Icon, color, label } = INDICATOR_CONFIG[kind];
@@ -2689,6 +2732,243 @@ function ExerciseHeading({
     )
   ] });
 }
+var PULSE_HALF_MS = 950;
+var PULSE_MIN_OPACITY = 0.45;
+var SEGMENTED_BAR_GAP = 5;
+function usePulse(active) {
+  const [value] = react.useState(() => new reactNative.Animated.Value(0));
+  react.useEffect(() => {
+    if (!active) return;
+    const loop = reactNative.Animated.loop(
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(value, {
+          toValue: 1,
+          duration: PULSE_HALF_MS,
+          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+          useNativeDriver: false
+        }),
+        reactNative.Animated.timing(value, {
+          toValue: 0,
+          duration: PULSE_HALF_MS,
+          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+          useNativeDriver: false
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, value]);
+  return value;
+}
+function SegmentedBar({
+  segments,
+  height = 8,
+  gap = SEGMENTED_BAR_GAP,
+  radius = 2,
+  marker = null,
+  segmentTestID,
+  style,
+  ...props
+}) {
+  const pulse = usePulse(segments.some((s) => s.pulse));
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: [{ flexDirection: "row", height, gap, position: "relative" }, style], ...props, children: [
+    segments.map((seg, i) => {
+      const fillStyle = {
+        width: `${(seg.fill ?? 1) * 100}%`,
+        height: "100%",
+        backgroundColor: seg.color,
+        opacity: seg.opacity
+      };
+      const testID = segmentTestID?.(seg, i) ?? "segmented-bar-segment";
+      return /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            flex: seg.weight ?? 1,
+            minWidth: 0,
+            height: "100%",
+            marginLeft: seg.leadingGap,
+            borderRadius: radius,
+            overflow: "hidden"
+          },
+          children: seg.pulse ? /* @__PURE__ */ jsx(
+            reactNative.Animated.View,
+            {
+              style: {
+                ...fillStyle,
+                ...seg.pulseColor ? {
+                  backgroundColor: pulse.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: seg.pulseColor
+                  })
+                } : {
+                  opacity: pulse.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [PULSE_MIN_OPACITY, 1]
+                  })
+                }
+              },
+              accessibilityElementsHidden: true,
+              testID
+            }
+          ) : /* @__PURE__ */ jsx(reactNative.View, { style: fillStyle, accessibilityElementsHidden: true, testID })
+        },
+        i
+      );
+    }),
+    marker ? /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          left: `${marker.position * 100}%`,
+          top: 0,
+          bottom: 0,
+          width: 2,
+          backgroundColor: marker.color
+        },
+        accessibilityElementsHidden: true,
+        testID: "segmented-bar-marker"
+      }
+    ) : null
+  ] });
+}
+
+// src/components/custom/Workout/SetBar.tsx
+var SET_STRIP_ZONES = {
+  slow: primitiveRamps.red[600],
+  moderate: primitiveRamps.orange[400],
+  fast: primitiveRamps.amber[300],
+  fastest: primitiveRamps.green[300]
+};
+var TODO_COLOR = primitiveColors.charcoal[300];
+var SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900];
+var NOTCH_GAP = 2;
+var CLUSTER_GAP = 3;
+var MYO_UPCOMING_CLUSTERS = 3;
+var MYO_UPCOMING_CLUSTER_LEN = 5;
+var MYO_UPCOMING_FADE = 0.6;
+var PULSE_RANGE = {
+  [SET_STRIP_ZONES.slow]: [primitiveRamps.red[500], primitiveRamps.red[700]],
+  [SET_STRIP_ZONES.moderate]: [primitiveRamps.orange[300], primitiveRamps.orange[500]],
+  [SET_STRIP_ZONES.fast]: [primitiveRamps.amber[200], primitiveRamps.amber[400]],
+  [SET_STRIP_ZONES.fastest]: [primitiveRamps.green[200], primitiveRamps.green[400]]
+};
+function velocityZoneColor(v) {
+  if (v < 0.5) return SET_STRIP_ZONES.slow;
+  if (v < 0.75) return SET_STRIP_ZONES.moderate;
+  if (v < 1) return SET_STRIP_ZONES.fast;
+  return SET_STRIP_ZONES.fastest;
+}
+function chunkedSegments(chunks, gap) {
+  return chunks.flatMap(
+    (vels, ci) => vels.map((v, ri) => ({
+      color: velocityZoneColor(v),
+      ...ci > 0 && ri === 0 ? { leadingGap: gap } : {}
+    }))
+  );
+}
+function rangeSegments(floor, max, doneVels) {
+  return Array.from({ length: max }, (_, i) => {
+    if (i < doneVels.length) return { color: velocityZoneColor(doneVels[i]) };
+    return { color: i < floor ? TODO_COLOR : SET_STRIP_VARIABLE_COLOR };
+  });
+}
+function myoUpcomingSegments(activationLen, clusterCount) {
+  const activation = Array.from({ length: activationLen }, () => ({ color: TODO_COLOR }));
+  const trail = Array.from(
+    { length: clusterCount },
+    (_, ci) => Array.from({ length: MYO_UPCOMING_CLUSTER_LEN }, (_2, ri) => ({
+      color: SET_STRIP_VARIABLE_COLOR,
+      opacity: MYO_UPCOMING_FADE ** ci,
+      ...ri === 0 ? { leadingGap: CLUSTER_GAP } : {}
+    }))
+  ).flat();
+  return [...activation, ...trail];
+}
+function setSegments(set) {
+  if (set.status === "todo") {
+    return [{ color: TODO_COLOR }];
+  }
+  if (set.status === "done") {
+    return set.velocities.map((v) => ({ color: velocityZoneColor(v) }));
+  }
+  if (set.status === "range") {
+    return rangeSegments(set.floor, set.max, set.doneVels);
+  }
+  if (set.status === "drop") {
+    return chunkedSegments(set.subloads, NOTCH_GAP);
+  }
+  if (set.status === "myo") {
+    return chunkedSegments([set.activation, ...set.clusters], CLUSTER_GAP);
+  }
+  if (set.status === "myo-upcoming") {
+    return myoUpcomingSegments(set.activationLen, set.clusterCount ?? MYO_UPCOMING_CLUSTERS);
+  }
+  const performed = set.velocities.map((v) => {
+    const color = velocityZoneColor(v);
+    return { color, pulse: true, pulseColor: PULSE_RANGE[color] };
+  });
+  const remaining = Math.max(0, set.planned - set.velocities.length);
+  return [...performed, ...Array.from({ length: remaining }, () => ({ color: TODO_COLOR }))];
+}
+function setBarSegmentTestID(seg) {
+  if (seg.pulse) return "set-strip-pulse";
+  if (seg.color === SET_STRIP_VARIABLE_COLOR) return "set-strip-variable";
+  return seg.color === TODO_COLOR ? "set-strip-empty" : "set-strip-fill";
+}
+function SetBar({ set, height = 8 }) {
+  return /* @__PURE__ */ jsx(
+    SegmentedBar,
+    {
+      segments: setSegments(set),
+      height,
+      gap: 0,
+      radius: 0,
+      segmentTestID: setBarSegmentTestID,
+      style: { flex: 1, minWidth: 0, borderRadius: 2, overflow: "hidden" },
+      testID: "set-strip-set"
+    }
+  );
+}
+
+// src/components/custom/Workout/SetStrip.tsx
+var SET_STRIP_GAP = 5;
+function setCategory(set) {
+  switch (set.status) {
+    case "done":
+    case "drop":
+    case "myo":
+      return "done";
+    case "active":
+      return "active";
+    case "range":
+      return set.doneVels.length > 0 ? "active" : "upcoming";
+    case "todo":
+    case "myo-upcoming":
+      return "upcoming";
+  }
+}
+function describeSets(sets) {
+  const done = sets.filter((s) => setCategory(s) === "done").length;
+  const active = sets.filter((s) => setCategory(s) === "active").length;
+  const upcoming = sets.filter((s) => setCategory(s) === "upcoming").length;
+  return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`;
+}
+function SetStrip({ sets, height = 8, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: { flexDirection: "row", width: "100%", height, gap: SET_STRIP_GAP },
+      accessibilityRole: "image",
+      accessibilityLabel: describeSets(sets),
+      testID: "set-strip",
+      ...props,
+      children: sets.map((set, i) => /* @__PURE__ */ jsx(SetBar, { set, height }, i))
+    }
+  );
+}
 
 // src/components/custom/Workout/ExerciseCardHeading.tsx
 function ExerciseCardHeading({
@@ -2831,7 +3111,9 @@ function CollapsedCard({
                 {
                   velocities,
                   zones: velocityZones,
-                  variant: "mini",
+                  variant: "compact",
+                  height: 8,
+                  hideBaseline: true,
                   testID: `exercise-card-velocity-strip-${i}`
                 },
                 i
@@ -3619,7 +3901,7 @@ function RestTimer({
 var DEFAULTS = {
   label: "SS",
   color: getSemanticColors("dark")["brand-primary"],
-  bgBase: "#101010"
+  bgBase: getSemanticColors("dark")["background-base"]
 };
 function SupersetWrapper({
   label = DEFAULTS.label,
@@ -4401,11 +4683,11 @@ function CardContent({ children, className }) {
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
 }
-var t4 = getSemanticColors("dark");
+var t5 = getSemanticColors("dark");
 var solidVariantColors = {
-  success: t4["status-success"],
-  warning: t4["status-warning"],
-  error: t4["status-error"],
+  success: t5["status-success"],
+  warning: t5["status-warning"],
+  error: t5["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
@@ -4445,8 +4727,8 @@ var iconColors = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": t4["status-success"],
-  deviation: t4["status-warning"],
+  "on-track": t5["status-success"],
+  deviation: t5["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -4532,13 +4814,13 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/MesoStatusCard.tsx
-var t5 = getSemanticColors("dark");
-var BRAND_PRIMARY5 = t5["brand-primary"];
+var t6 = getSemanticColors("dark");
+var BRAND_PRIMARY5 = t6["brand-primary"];
 var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t5["status-success"];
-var WARNING = t5["status-warning"];
-var ERROR = t5["status-error"];
+var SUCCESS = t6["status-success"];
+var WARNING = t6["status-warning"];
+var ERROR = t6["status-error"];
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY5, 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%)";
@@ -4909,8 +5191,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t11 = Date.parse(dateStr);
-  return Number.isNaN(t11) ? 0 : t11;
+  const t12 = Date.parse(dateStr);
+  return Number.isNaN(t12) ? 0 : t12;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -5399,10 +5681,10 @@ function StrengthTrendChart({
     }
   );
 }
-var t6 = getSemanticColors("dark");
-var STATUS_SUCCESS3 = t6["status-success"];
-var STATUS_WARNING3 = t6["status-warning"];
-var STATUS_INFO = t6["status-info"];
+var t7 = getSemanticColors("dark");
+var STATUS_SUCCESS3 = t7["status-success"];
+var STATUS_WARNING3 = t7["status-warning"];
+var STATUS_INFO = t7["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -5445,8 +5727,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t11 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t11 * (b[key] - a[key]);
+      const t12 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t12 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -6000,7 +6282,16 @@ function VbtBreakdown({
               children: set.label
             }
           ),
-          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", style: { height: 8, justifyContent: "center" }, children: /* @__PURE__ */ jsx(VelocityStrip, { velocities: set.velocities, zones, variant: "mini" }) }),
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", style: { height: 8, justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+            VelocityStrip,
+            {
+              velocities: set.velocities,
+              zones,
+              variant: "compact",
+              height: 8,
+              hideBaseline: true
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
@@ -6485,12 +6776,12 @@ function Badge({
     }
   );
 }
-var t7 = getSemanticColors("dark");
+var t8 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
   next: "transparent",
-  upcoming: "#1C1C1C",
+  upcoming: t8["surface-raised"],
   missed: "rgba(209,67,67,0.1)",
   deload: "rgba(186,41,150,0.15)"
 };
@@ -6503,9 +6794,9 @@ var statusBorderStyles = {
   deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: t7["status-success"],
-  current: t7["brand-primary"],
-  next: t7["brand-primary"],
+  completed: t8["status-success"],
+  current: t8["brand-primary"],
+  next: t8["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
@@ -6638,19 +6929,19 @@ function WorkoutPill({
   }
   return pill;
 }
-var t8 = getSemanticColors("dark");
+var t9 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
 var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
 var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
 var ZONE = {
-  building: t8["status-success"],
+  building: t9["status-success"],
   // below target ramp-up
-  approaching: t8["status-warning"],
+  approaching: t9["status-warning"],
   // nearing target
-  target: t8["brand-primary"],
+  target: t9["brand-primary"],
   // exactly at target
-  over1: t8["status-error"],
+  over1: t9["status-error"],
   // mild over-target
   over2: WORKOUT_TOKENS.intensity.over2,
   // moderate over-target
@@ -7073,13 +7364,13 @@ function MesoCard({
     }
   ) });
 }
-var t9 = getSemanticColors("dark");
+var t10 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: t9["brand-secondary"],
-  ontrack: t9["status-success"],
-  target: t9["brand-primary"],
-  over: t9["status-error"]
+  behind: t10["brand-secondary"],
+  ontrack: t10["status-success"],
+  target: t10["brand-primary"],
+  over: t10["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -7153,10 +7444,10 @@ function MuscleGroupChip({
 }
 
 // src/components/custom/Workout/WorkoutCard.tsx
-var t10 = getSemanticColors("dark");
+var t11 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: t10["status-success"],
-  brandPrimary: t10["brand-primary"],
+  statusSuccess: t11["status-success"],
+  brandPrimary: t11["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };