@titan-design/react-ui 0.9.3 → 0.11.0

package/dist/index.js

@@ -339,6 +339,21 @@ var primitiveColors = {
   black: "#000000",
   transparent: "transparent"
 };
+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",
@@ -806,10 +821,19 @@ var semanticColorsLight = {
   "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],
@@ -825,6 +849,11 @@ var semanticColorsLight = {
   // 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)",
@@ -917,25 +946,46 @@ var semanticColorsDark = {
   "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
+  // 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],
@@ -949,6 +999,14 @@ var semanticColorsDark = {
   "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)",
@@ -1478,9 +1536,11 @@ var lightThemeCSSVars = {
   "--color-surface-base": semanticColorsLight["surface-base"],
   "--color-surface-elevated": semanticColorsLight["surface-elevated"],
   "--color-surface-raised": semanticColorsLight["surface-raised"],
+  "--color-surface-inset": semanticColorsLight["surface-inset"],
   "--color-background-base": semanticColorsLight["background-base"],
   "--color-background-default": semanticColorsLight["background-default"],
   "--color-background-subtle": semanticColorsLight["background-subtle"],
+  "--color-background-frame": semanticColorsLight["background-frame"],
   "--color-border-default": semanticColorsLight["border-default"],
   "--color-border-subtle": semanticColorsLight["border-subtle"],
   "--color-border-strong": semanticColorsLight["border-strong"],
@@ -1537,6 +1597,9 @@ var lightThemeCSSVars = {
   "--color-border-input-hover": semanticColorsLight["border-input-hover"],
   "--color-border-input-focus": semanticColorsLight["border-input-focus"],
   "--color-border-input-error": semanticColorsLight["border-input-error"],
+  "--color-hairline-subtle": semanticColorsLight["hairline-subtle"],
+  "--color-hairline-default": semanticColorsLight["hairline-default"],
+  "--color-hairline-strong": semanticColorsLight["hairline-strong"],
   "--color-interactive-disabled-text": semanticColorsLight["interactive-disabled-text"],
   "--color-avatar-background": semanticColorsLight["avatar-background"],
   "--color-avatar-text": semanticColorsLight["avatar-text"],
@@ -1576,9 +1639,11 @@ var darkThemeCSSVars = {
   "--color-surface-base": semanticColorsDark["surface-base"],
   "--color-surface-elevated": semanticColorsDark["surface-elevated"],
   "--color-surface-raised": semanticColorsDark["surface-raised"],
+  "--color-surface-inset": semanticColorsDark["surface-inset"],
   "--color-background-base": semanticColorsDark["background-base"],
   "--color-background-default": semanticColorsDark["background-default"],
   "--color-background-subtle": semanticColorsDark["background-subtle"],
+  "--color-background-frame": semanticColorsDark["background-frame"],
   "--color-border-default": semanticColorsDark["border-default"],
   "--color-border-subtle": semanticColorsDark["border-subtle"],
   "--color-border-strong": semanticColorsDark["border-strong"],
@@ -1635,6 +1700,9 @@ var darkThemeCSSVars = {
   "--color-border-input-hover": semanticColorsDark["border-input-hover"],
   "--color-border-input-focus": semanticColorsDark["border-input-focus"],
   "--color-border-input-error": semanticColorsDark["border-input-error"],
+  "--color-hairline-subtle": semanticColorsDark["hairline-subtle"],
+  "--color-hairline-default": semanticColorsDark["hairline-default"],
+  "--color-hairline-strong": semanticColorsDark["hairline-strong"],
   "--color-interactive-disabled-text": semanticColorsDark["interactive-disabled-text"],
   "--color-avatar-background": semanticColorsDark["avatar-background"],
   "--color-avatar-text": semanticColorsDark["avatar-text"],
@@ -2269,6 +2337,10 @@ function getElevationShadow(baseColor, level, theme, isHovered = false) {
   elevationShadowCache.set(cacheKey, result);
   return result;
 }
+var PRESSED_ELEVATION_LEVEL = -1;
+function getPressedRecessShadow(fillColor, theme) {
+  return getElevationShadow(fillColor, PRESSED_ELEVATION_LEVEL, theme);
+}
 function getBaseSurfaceColor(theme) {
   return theme === "light" ? semanticColorsLight["surface-raised"] : semanticColorsDark["surface-elevated"];
 }
@@ -2571,6 +2643,7 @@ var SURFACE_LEVEL_TOKEN = {
   raised: "surface-raised",
   overlay: "surface-overlay"
 };
+var PRESSED_RAMP = ["inset", "background", "base", "elevated", "raised", "overlay"];
 var ON_SURFACE_TOKEN = {
   primary: "text-primary",
   secondary: "text-secondary",
@@ -2595,9 +2668,19 @@ function onSurfaceColors(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]];
 }
+function pressedLevel(parent) {
+  const index = PRESSED_RAMP.indexOf(parent);
+  const down = Math.max(0, index - 1);
+  return PRESSED_RAMP[down];
+}
 function getTheme() {
   if (typeof document === "undefined") return "dark";
   return document.documentElement.classList.contains("light") ? "light" : "dark";
@@ -5296,7 +5379,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = React25.useCallback((id) => {
-    setToasts((prev) => prev.filter((t16) => t16.id !== id));
+    setToasts((prev) => prev.filter((t26) => t26.id !== id));
   }, []);
   const removeAllToasts = React25.useCallback(() => {
     setToasts([]);
@@ -6049,6 +6132,7 @@ function IconBox({
 function Surface({
   elevation = 0,
   level,
+  pressed = false,
   glowColor,
   glowIntensity,
   theme,
@@ -6062,13 +6146,24 @@ function Surface({
   const mode = theme ?? inherited.mode;
   const isPlane = level != null;
   const baseColor = getBaseSurfaceColor(mode);
-  const backgroundColor = isPlane ? surfaceBackground(level, mode) : getElevationSurface(baseColor, elevation, mode);
-  const shadowStyle = isPlane ? {} : getElevationShadow(baseColor, elevation, mode);
+  const resolvedLevel = pressed ? pressedLevel(inherited.level) : level ?? inherited.level;
+  let backgroundColor;
+  let shadowStyle;
+  if (pressed) {
+    backgroundColor = surfaceBackground(resolvedLevel, mode);
+    shadowStyle = getPressedRecessShadow(backgroundColor, mode);
+  } else if (isPlane) {
+    backgroundColor = surfaceBackground(level, mode);
+    shadowStyle = {};
+  } else {
+    backgroundColor = getElevationSurface(baseColor, elevation, mode);
+    shadowStyle = getElevationShadow(baseColor, elevation, mode);
+  }
   const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {};
-  const applyRounded = rounded ?? !isPlane;
+  const applyRounded = rounded ?? (pressed || !isPlane);
   const value = React25.useMemo(
-    () => ({ mode, level: level ?? inherited.level }),
-    [mode, level, inherited.level]
+    () => ({ mode, level: resolvedLevel }),
+    [mode, resolvedLevel]
   );
   return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value, children: /* @__PURE__ */ jsx(
     reactNative.View,
@@ -7261,13 +7356,14 @@ function MetricGroup({
     )
   ] }, i)) });
 }
+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)"
@@ -7507,11 +7603,11 @@ function PrBadge({
   }
   return badge;
 }
-var t = getSemanticColors("dark");
+var t2 = getSemanticColors("dark");
 var solidVariantColors = {
-  success: t["status-success"],
-  warning: t["status-warning"],
-  error: t["status-error"],
+  success: t2["status-success"],
+  warning: t2["status-warning"],
+  error: t2["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
@@ -7551,8 +7647,8 @@ var iconColors2 = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": t["status-success"],
-  deviation: t["status-warning"],
+  "on-track": t2["status-success"],
+  deviation: t2["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -7873,19 +7969,19 @@ function MetricCell({ children, color, fontSize = 11 }) {
 }
 
 // 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;
@@ -8037,7 +8133,7 @@ function TempoDisplay({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: "#1C1C1C",
+        backgroundColor: t3["surface-raised"],
         paddingHorizontal: chromePadX,
         paddingVertical: chromePadY,
         borderRadius: chromeRadius
@@ -8052,7 +8148,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)
@@ -8110,7 +8206,7 @@ function TempoDisplay({
                 reactNative.View,
                 {
                   style: {
-                    backgroundColor: "#191919",
+                    backgroundColor: t3["surface-overlay"],
                     borderRadius: 6,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
@@ -8163,13 +8259,13 @@ function TempoDisplay({
     }
   );
 }
-var t3 = getSemanticColors("dark");
+var t4 = getSemanticColors("dark");
 function getDotColor(deviation) {
   const abs = Math.abs(deviation);
-  if (deviation < -0.3) return t3["status-success"];
+  if (deviation < -0.3) return t4["status-success"];
   if (abs <= 0.3) return "#6B7280";
-  if (abs <= 0.7) return t3["status-warning"];
-  return t3["status-error"];
+  if (abs <= 0.7) return t4["status-warning"];
+  return t4["status-error"];
 }
 function getDeviationDescription(deviation) {
   if (deviation < -0.3) return "lighter than planned";
@@ -8237,19 +8333,19 @@ function DeviationBar({
     }
   );
 }
-var t4 = getSemanticColors("dark");
+var t5 = 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: t4["status-success"],
+  building: t5["status-success"],
   // below target ramp-up
-  approaching: t4["status-warning"],
+  approaching: t5["status-warning"],
   // nearing target
-  target: t4["brand-primary"],
+  target: t5["brand-primary"],
   // exactly at target
-  over1: t4["status-error"],
+  over1: t5["status-error"],
   // mild over-target
   over2: WORKOUT_TOKENS.intensity.over2,
   // moderate over-target
@@ -8418,12 +8514,12 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/WorkoutPill.tsx
-var t5 = getSemanticColors("dark");
+var t6 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
   next: "transparent",
-  upcoming: "#1C1C1C",
+  upcoming: t6["surface-raised"],
   missed: "rgba(209,67,67,0.1)",
   deload: "rgba(186,41,150,0.15)"
 };
@@ -8436,9 +8532,9 @@ var statusBorderStyles = {
   deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: t5["status-success"],
-  current: t5["brand-primary"],
-  next: t5["brand-primary"],
+  completed: t6["status-success"],
+  current: t6["brand-primary"],
+  next: t6["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
@@ -8571,257 +8667,412 @@ function WorkoutPill({
   }
   return pill;
 }
-var PULSE_HALF_MS = 950;
-var PULSE_MIN_OPACITY = 0.45;
-var SEGMENTED_BAR_GAP = 5;
-function usePulse2(active) {
-  const [value] = React25.useState(() => new reactNative.Animated.Value(0));
+
+// 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)"
+  };
+}
+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] = React25.useState(getReducedMotionPreference);
   React25.useEffect(() => {
-    if (!active) return;
-    const loop = reactNative.Animated.loop(
+    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] = React25.useState(() => new reactNative.Animated.Value(1));
+  React25.useEffect(() => {
+    if (liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveGrowth.setValue(1);
+      return;
+    }
+    liveGrowth.setValue(0);
+    if (isNewPeak) {
       reactNative.Animated.sequence([
-        reactNative.Animated.timing(value, {
-          toValue: 1,
-          duration: PULSE_HALF_MS,
-          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+        reactNative.Animated.timing(liveGrowth, {
+          toValue: PEAK_OVERSHOOT,
+          duration: 220,
+          easing: reactNative.Easing.out(reactNative.Easing.quad),
           useNativeDriver: false
         }),
-        reactNative.Animated.timing(value, {
-          toValue: 0,
-          duration: PULSE_HALF_MS,
-          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+        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;
+}
+
+// src/components/custom/charts/SetBarChart.tsx
+function mixHex(a, b, t26) {
+  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) * t26).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: formatValue3 = 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] = React25.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: [{ 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: formatValue3(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`
+      }
     );
-    loop.start();
-    return () => loop.stop();
-  }, [active, value]);
-  return value;
+  }
+  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 SegmentedBar({
-  segments,
-  height = 8,
-  gap = SEGMENTED_BAR_GAP,
-  radius = 2,
-  marker = null,
-  segmentTestID,
-  style,
-  ...props
+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"
 }) {
-  const pulse = usePulse2(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(
+  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: {
-            flex: seg.weight ?? 1,
-            minWidth: 0,
-            height: "100%",
-            marginLeft: seg.leadingGap,
-            borderRadius: radius,
-            overflow: "hidden"
+            width: labelLength,
+            alignItems: "center",
+            transform: [{ rotate: "-90deg" }]
           },
-          children: seg.pulse ? /* @__PURE__ */ jsx(
-            reactNative.Animated.View,
+          children: /* @__PURE__ */ jsx(
+            reactNative.Text,
             {
-              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
+              className: "text-text-tertiary",
+              style: textStyle,
+              numberOfLines: 1,
+              testID: s.testID,
+              children: isRail ? s.label : sideLabelText(s.label, sectionExtent)
             }
-          ) : /* @__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
-  ] });
+          )
+        }
+      ) : null
+    },
+    s.testID
+  )) });
 }
 
-// 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/VelocityStrip.tsx
-var VEL_COLORS = WORKOUT_TOKENS.scale;
-var bandIdToEffortColor = {
-  speed: sequentialEffort[0],
-  // green-300
-  power: sequentialEffort[2],
-  // amber-300 (gold)
-  strengthSpeed: sequentialEffort[3],
-  // orange-400
-  maximalStrength: sequentialEffort[4],
-  // red-600
-  grinding: sequentialEffort[5]
-  // red-700 — the distinct 5th band
+// src/components/custom/Workout/VelocityStrip.tsx
+var VEL_COLORS = WORKOUT_TOKENS.scale;
+var bandIdToEffortColor = {
+  speed: sequentialEffort[0],
+  // green-300
+  power: sequentialEffort[2],
+  // amber-300 (gold)
+  strengthSpeed: sequentialEffort[3],
+  // orange-400
+  maximalStrength: sequentialEffort[4],
+  // red-600
+  grinding: sequentialEffort[5]
+  // red-700 — the distinct 5th band
 };
 function getVelocityZoneColor(velocity) {
   if (velocity >= 1) return "vel-green";
@@ -8853,6 +9104,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, t26, t32] = VL_LOSS_THRESHOLDS;
+  if (lossPct < t1) return VEL_COLORS.green;
+  if (lossPct < t26) 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;
@@ -8862,15 +9125,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":
@@ -8886,7 +9151,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;
@@ -8900,7 +9165,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
         };
       });
     }
@@ -8911,7 +9176,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
         };
       });
     }
@@ -8919,16 +9184,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": {
@@ -8939,7 +9204,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
         };
       });
     }
@@ -8961,253 +9226,406 @@ 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] = React25.useState(getReducedMotionPreference);
-  React25.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 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
+    }
+  );
 }
-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] = React25.useState(() => new reactNative.Animated.Value(1));
-  React25.useEffect(() => {
-    if (!active || liveRepIndex == null || liveVelocity == null) return;
-    if (prefersReducedMotion) {
-      liveScale.setValue(1);
-      return;
+var BAND_LABEL_FONT = "monospace";
+var VL_LABEL_MIN_PLOT = 65;
+var VL_SEMANTIC = getSemanticColors("dark");
+function VelocityLossBands({
+  best,
+  scaleDenom,
+  plotHeight,
+  flip = false
+}) {
+  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,
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: yOf(loV),
+        height: Math.max(0, yOf(hiV) - yOf(loV)),
+        backgroundColor: color
+      }
     }
-    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();
+  );
+  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
+              },
+              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%")
+      ]
     }
-  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
-  return liveScale;
+  );
 }
-function HeroVelocityChart({
-  doneVelocities,
-  barColorFor,
-  scaleDenom,
-  referenceVelocity,
-  liveRepIndex,
-  isNewPeak,
+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;
+var DUAL_HERO_HEIGHT = SET_BAR_DEFAULT_HEIGHT;
+var DUAL_RAIL_HEIGHT = 96;
+var DUAL_COMPACT_HEIGHT = 11.5;
+var DUAL_WING_GAP = 2;
+var COMPACT_FOLD_GAP = 1.5;
+var COMPACT_FOLD_HALF = 5;
+function streamDone(stream) {
+  return stream.set ? deriveDoneVelocities(stream.set) : stream.velocities ?? [];
+}
+function streamNaturalSlots(stream, targetReps) {
+  if (stream.set) {
+    return buildSlots(stream.set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    }));
+  }
+  const reps = (stream.velocities ?? []).map((v, i) => ({
+    kind: "rep",
+    value: v,
+    leadingGap: i === 0 ? 0 : REP_GAP2
+  }));
+  const pad = Math.max(0, (targetReps ?? 0) - reps.length);
+  return [...reps, ...Array.from({ length: pad }, () => ({ kind: "todo" }))];
+}
+function mergeColumnKind(l, r) {
+  const kinds = [l?.kind, r?.kind];
+  if (kinds.includes("variable")) return "variable";
+  if (kinds.includes("continue")) return "continue";
+  if (kinds.includes("rep")) return "rep";
+  return "todo";
+}
+function sideColumnCell(slot, kind, leadingGap) {
+  if (kind !== "rep") return { kind, leadingGap };
+  return slot?.kind === "rep" ? { kind: "rep", value: slot.value, leadingGap } : { kind: "empty", leadingGap };
+}
+function alignDualSlots(left, right) {
+  const n = Math.max(left.length, right.length);
+  const L = [];
+  const R = [];
+  for (let i = 0; i < n; i++) {
+    const lt = left[i];
+    const rt = right[i];
+    const kind = mergeColumnKind(lt, rt);
+    const gap = Math.max(lt?.leadingGap ?? REP_GAP2, rt?.leadingGap ?? REP_GAP2);
+    L.push(sideColumnCell(lt, kind, gap));
+    R.push(sideColumnCell(rt, kind, gap));
+  }
+  return { left: L, right: R };
+}
+function DualVelocityHero({
+  leftDone,
+  rightDone,
+  leftStream,
+  rightStream,
+  leftLabel,
+  rightLabel,
+  zones,
+  barColor: barColor2,
+  scale,
   targetReps,
+  liveRepIndex,
   height,
   className,
+  label,
   viewProps
 }) {
-  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
-  const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak);
-  const [plotW, setPlotW] = React25.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 plotHalf = (height - DUAL_WING_GAP) / 2;
+  const sharedMax = Math.max(...leftDone, ...rightDone, 0);
+  const aligned = alignDualSlots(
+    leftStream ? streamNaturalSlots(leftStream, targetReps) : [],
+    rightStream ? streamNaturalSlots(rightStream, targetReps) : []
+  );
   const { style: externalStyle, ...restProps } = viewProps;
-  return /* @__PURE__ */ jsx(
+  const wing = (orientation, columns, done) => /* @__PURE__ */ jsx(
+    VelocityStrip,
+    {
+      variant: "hero",
+      orientation,
+      velocities: done,
+      columnSlots: columns,
+      scale,
+      scaleMax: scale === "fixed" ? void 0 : sharedMax,
+      barColor: barColor2,
+      zones,
+      liveRepIndex,
+      height: plotHalf,
+      hideBaseline: true
+    }
+  );
+  return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className,
-      style: [{ height }, externalStyle],
+      style: [{ height, flexDirection: "row" }, externalStyle],
       accessibilityRole: "image",
       accessibilityLabel: label,
-      testID: "velocity-strip-hero",
+      testID: "dual-velocity-strip",
       ...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"
-                  }
-                )
-              },
-              `pending-${i}`
-            ))
-          ]
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          ChartSideRail,
+          {
+            sectionExtent: plotHalf,
+            variant: "hero",
+            sections: [
+              { label: leftLabel, testID: "dual-velocity-side-label-L" },
+              { label: rightLabel, testID: "dual-velocity-side-label-R" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(reactNative.View, { style: { flex: 1, gap: DUAL_WING_GAP }, children: [
+          /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-up", children: wing("up", aligned.left, leftDone) }),
+          /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-down", children: wing("down", aligned.right, rightDone) })
+        ] })
+      ]
+    }
+  );
+}
+function DualVelocityRail({
+  leftDone,
+  rightDone,
+  leftStream,
+  rightStream,
+  zones,
+  barColor: barColor2,
+  scale,
+  targetReps,
+  liveRepIndex,
+  height,
+  className,
+  label,
+  viewProps
+}) {
+  const plotHalf = (height - DUAL_WING_GAP) / 2;
+  const sharedMax = Math.max(...leftDone, ...rightDone, 0);
+  const aligned = alignDualSlots(
+    leftStream ? streamNaturalSlots(leftStream, targetReps) : [],
+    rightStream ? streamNaturalSlots(rightStream, targetReps) : []
+  );
+  const { style: externalStyle, ...restProps } = viewProps;
+  const wing = (orientation, columns, done) => /* @__PURE__ */ jsx(
+    VelocityStrip,
+    {
+      variant: "expanded",
+      showNumbers: false,
+      showInfo: false,
+      orientation,
+      velocities: done,
+      columnSlots: columns,
+      scale,
+      scaleMax: scale === "fixed" ? void 0 : sharedMax,
+      barColor: barColor2,
+      zones,
+      liveRepIndex,
+      height: plotHalf
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: [{ height, flexDirection: "column", gap: DUAL_WING_GAP }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "dual-velocity-strip",
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-up", children: wing("up", aligned.left, leftDone) }),
+        /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-down", children: wing("down", aligned.right, rightDone) })
+      ]
+    }
+  );
+}
+function DualVelocityCompactStrip({
+  leftDone,
+  rightDone,
+  leftStream,
+  rightStream,
+  zones,
+  barColor: barColor2,
+  targetReps,
+  height,
+  className,
+  label,
+  viewProps
+}) {
+  const half = height === DUAL_COMPACT_HEIGHT ? COMPACT_FOLD_HALF : (height - COMPACT_FOLD_GAP) / 2;
+  const aligned = alignDualSlots(
+    leftStream ? streamNaturalSlots(leftStream, targetReps) : [],
+    rightStream ? streamNaturalSlots(rightStream, targetReps) : []
+  );
+  const { style: externalStyle, ...restProps } = viewProps;
+  const wing = (orientation, columns, done) => /* @__PURE__ */ jsx(
+    VelocityStrip,
+    {
+      variant: "compact",
+      orientation,
+      velocities: done,
+      columnSlots: columns,
+      barColor: barColor2,
+      zones,
+      height: half
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: [{ height, flexDirection: "column", gap: COMPACT_FOLD_GAP }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "dual-velocity-strip",
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-up", children: wing("up", aligned.left, leftDone) }),
+        /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-down", children: wing("down", aligned.right, rightDone) })
+      ]
     }
   );
 }
+function DualVelocityStrip({
+  left,
+  right,
+  zones,
+  barColor: barColor2 = "loss",
+  targetReps,
+  liveRepIndex,
+  variant = "hero",
+  scale = "peak",
+  height,
+  className,
+  ...props
+}) {
+  const resolvedHeight = height ?? (variant === "hero" ? DUAL_HERO_HEIGHT : variant === "compact" ? DUAL_COMPACT_HEIGHT : DUAL_RAIL_HEIGHT);
+  const leftDone = streamDone(left);
+  const rightDone = streamDone(right);
+  const label = `Dual velocity chart, left ${leftDone.length} of ${Math.max(leftDone.length, targetReps ?? leftDone.length)} reps, right ${rightDone.length} of ${Math.max(rightDone.length, targetReps ?? rightDone.length)} reps`;
+  const shared = {
+    leftDone,
+    rightDone,
+    leftStream: left,
+    rightStream: right,
+    leftLabel: left.label,
+    rightLabel: right.label,
+    zones,
+    barColor: barColor2,
+    scale,
+    targetReps,
+    height: resolvedHeight,
+    className,
+    label,
+    viewProps: props
+  };
+  if (variant === "rail") return /* @__PURE__ */ jsx(DualVelocityRail, { ...shared, liveRepIndex });
+  if (variant === "compact") return /* @__PURE__ */ jsx(DualVelocityCompactStrip, { ...shared });
+  return /* @__PURE__ */ jsx(DualVelocityHero, { ...shared, liveRepIndex });
+}
 function VelocityStrip({
   velocities,
   set,
   zones,
+  barColor: barColor2 = "loss",
+  showLossBands,
+  orientation = "up",
+  scaleMax,
+  hideBaseline,
+  columnSlots,
+  label,
   liveRepIndex,
   expanded = true,
   onToggle,
@@ -9221,51 +9639,29 @@ function VelocityStrip({
   className,
   ...props
 }) {
+  const lossBandsOn = showLossBands ?? barColor2 === "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) => barColor2 === "loss" ? getVelocityLossColor(velocityLossForRep(v, maxVelocity)) : zoneColorFor(v);
   const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const [heightAnim] = React25.useState(() => new reactNative.Animated.Value(expanded ? height : 3));
-  const [labelOpacity] = React25.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const [expandProgress] = React25.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
   const [infoOpacity] = React25.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
-  );
   React25.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,
@@ -9273,250 +9669,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,
           {
@@ -9524,10 +9846,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: [
@@ -9535,10 +9855,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,
                     " ",
@@ -9553,11 +9870,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,
@@ -9585,13 +9898,13 @@ function VelocityStrip({
   }
   return stripContent;
 }
-var t6 = getSemanticColors("dark");
+var t7 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: t6["brand-secondary"],
-  ontrack: t6["status-success"],
-  target: t6["brand-primary"],
-  over: t6["status-error"]
+  behind: t7["brand-secondary"],
+  ontrack: t7["status-success"],
+  target: t7["brand-primary"],
+  over: t7["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -9865,6 +10178,7 @@ function RowStrip({ set }) {
         showInfo: false,
         height: 24,
         scale: "fixed",
+        liveRepIndex: set.velocities.length - 1,
         set: { type: "straight", velocities: set.velocities, planned: set.target.reps },
         zones
       }
@@ -9874,7 +10188,9 @@ function RowStrip({ set }) {
   return /* @__PURE__ */ jsx(
     VelocityStrip,
     {
-      variant: "mini",
+      variant: "compact",
+      height: 8,
+      hideBaseline: true,
       set: { type: "straight", velocities, planned: plannedReps(set) },
       zones
     }
@@ -10294,7 +10610,7 @@ function RestTimer({
     }
   );
 }
-var t7 = getSemanticColors("dark");
+var t8 = getSemanticColors("dark");
 var TIMES = "\xD7";
 var AT = "@";
 function SetsRepsLoad({
@@ -10306,8 +10622,8 @@ function SetsRepsLoad({
   className,
   ...props
 }) {
-  const value = t7["text-primary"];
-  const sep = t7["text-tertiary"];
+  const value = t8["text-primary"];
+  const sep = t8["text-tertiary"];
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
@@ -10327,6 +10643,107 @@ function SetsRepsLoad({
     }
   );
 }
+var PULSE_HALF_MS = 950;
+var PULSE_MIN_OPACITY = 0.45;
+var SEGMENTED_BAR_GAP = 5;
+function usePulse2(active) {
+  const [value] = React25.useState(() => new reactNative.Animated.Value(0));
+  React25.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 = usePulse2(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/paceTone.ts
 function paceTone(progress, target) {
@@ -10420,75 +10837,209 @@ function ScheduleTiles({ when, now, gap = 1, ...props }) {
     )
   ] });
 }
-var t8 = getSemanticColors("dark");
-var INDICATOR_CONFIG = {
-  imbalance: { Icon: ScaleIcon, color: t8["status-error"], label: "Left/right imbalance" },
-  overshoot: { Icon: AlertTriangleIcon, color: t8["status-error"], label: "Load overshoot" },
-  "velocity-loss": { Icon: TrendingDownIcon, color: t8["status-warning"], label: "Velocity loss" },
-  "missed-reps": { Icon: CircleSlashIcon, color: t8["status-warning"], label: "Missed reps" },
-  pr: { Icon: AwardIcon, color: t8["status-success"], label: "Personal record" },
-  info: { Icon: InfoIcon, color: t8["status-info"], label: "More info" }
+
+// 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 INDICATOR_PRECEDENCE = [
-  "imbalance",
-  "overshoot",
-  "velocity-loss",
-  "missed-reps",
-  "pr",
-  "info"
-];
-function resolveIndicator(candidates) {
-  return INDICATOR_PRECEDENCE.find((kind) => candidates.includes(kind));
+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 ExerciseIndicator({ kind, onPress, className, ...props }) {
-  const { Icon, color, label } = INDICATOR_CONFIG[kind];
-  const chip = /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className,
-      style: {
-        width: 16,
-        height: 16,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: color,
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      accessibilityRole: "image",
-      accessibilityLabel: label,
-      testID: "exercise-indicator",
-      ...props,
-      children: /* @__PURE__ */ jsx(Icon, { size: 11, color })
-    }
+function chunkedSegments(chunks, gap) {
+  return chunks.flatMap(
+    (vels, ci) => vels.map((v, ri) => ({
+      color: velocityZoneColor(v),
+      ...ci > 0 && ri === 0 ? { leadingGap: gap } : {}
+    }))
   );
-  if (onPress) {
-    return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress, accessibilityRole: "button", accessibilityLabel: label, children: chip });
+}
+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 }];
   }
-  return chip;
+  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 headingLabel(name, sets, reps, load, unit) {
-  const loadLabel = typeof load === "number" ? roundWeight(load) : load;
-  return `${name}, ${sets}\xD7${reps} @ ${loadLabel} ${unit}`;
+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 ExerciseHeading({
-  name,
-  sets,
-  reps,
-  load,
-  unit = "lbs",
-  tempo,
-  indicator,
-  dimmed,
-  onPress
-}) {
-  return /* @__PURE__ */ jsxs(reactNative.View, { style: { opacity: dimmed ? 0.55 : 1 }, testID: "exercise-heading", children: [
-    /* @__PURE__ */ jsxs(
-      reactNative.Pressable,
-      {
-        onPress,
-        accessibilityRole: "button",
-        accessibilityLabel: headingLabel(name, sets, reps, load, unit),
+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"
+    }
+  );
+}
+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))
+    }
+  );
+}
+var t9 = getSemanticColors("dark");
+var INDICATOR_CONFIG = {
+  imbalance: { Icon: ScaleIcon, color: t9["status-error"], label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, color: t9["status-error"], label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, color: t9["status-warning"], label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, color: t9["status-warning"], label: "Missed reps" },
+  pr: { Icon: AwardIcon, color: t9["status-success"], label: "Personal record" },
+  info: { Icon: InfoIcon, color: t9["status-info"], label: "More info" }
+};
+var INDICATOR_PRECEDENCE = [
+  "imbalance",
+  "overshoot",
+  "velocity-loss",
+  "missed-reps",
+  "pr",
+  "info"
+];
+function resolveIndicator(candidates) {
+  return INDICATOR_PRECEDENCE.find((kind) => candidates.includes(kind));
+}
+function ExerciseIndicator({ kind, onPress, className, ...props }) {
+  const { Icon, color, label } = INDICATOR_CONFIG[kind];
+  const chip = /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: color,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "exercise-indicator",
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { size: 11, color })
+    }
+  );
+  if (onPress) {
+    return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress, accessibilityRole: "button", accessibilityLabel: label, children: chip });
+  }
+  return chip;
+}
+function headingLabel(name, sets, reps, load, unit) {
+  const loadLabel = typeof load === "number" ? roundWeight(load) : load;
+  return `${name}, ${sets}\xD7${reps} @ ${loadLabel} ${unit}`;
+}
+function ExerciseHeading({
+  name,
+  sets,
+  reps,
+  load,
+  unit = "lbs",
+  tempo,
+  indicator,
+  dimmed,
+  onPress
+}) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { opacity: dimmed ? 0.55 : 1 }, testID: "exercise-heading", children: [
+    /* @__PURE__ */ jsxs(
+      reactNative.Pressable,
+      {
+        onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: headingLabel(name, sets, reps, load, unit),
         className: "flex-row items-center",
         style: { gap: 8 },
         testID: "exercise-card-header",
@@ -10722,7 +11273,9 @@ function CollapsedCard({
                 {
                   velocities,
                   zones: velocityZones,
-                  variant: "mini",
+                  variant: "compact",
+                  height: 8,
+                  hideBaseline: true,
                   testID: `exercise-card-velocity-strip-${i}`
                 },
                 i
@@ -11021,6 +11574,7 @@ function SessionRail({
   next,
   stripHeight = 8,
   width = DEFAULT_WIDTH,
+  expandedIndex,
   onExercisePress,
   className,
   style,
@@ -11061,7 +11615,24 @@ function SessionRail({
                   borderBottomWidth: i < exercises.length - 1 ? 1 : 0,
                   borderBottomColor: DIVIDER
                 },
-                children: /* @__PURE__ */ jsx(
+                children: i === expandedIndex && ex.sets ? /* @__PURE__ */ jsx(
+                  ExerciseCard,
+                  {
+                    name: ex.name,
+                    expanded: true,
+                    summary: {
+                      sets: ex.summary.sets,
+                      reps: ex.summary.reps,
+                      // ExerciseCard's summary takes a numeric load; a string load is
+                      // an unset/discovery weight, which has no expanded form yet.
+                      weight: typeof ex.summary.weight === "number" ? ex.summary.weight : 0,
+                      unit: ex.summary.unit
+                    },
+                    tempo: ex.tempo,
+                    sets: ex.sets,
+                    onExpandedChange: () => onExercisePress?.(ex, i)
+                  }
+                ) : /* @__PURE__ */ jsx(
                   ExerciseCardHeading,
                   {
                     name: ex.name,
@@ -11089,7 +11660,7 @@ function SessionRail({
 var DEFAULTS = {
   label: "SS",
   color: getSemanticColors("dark")["brand-primary"],
-  bgBase: "#101010"
+  bgBase: getSemanticColors("dark")["background-base"]
 };
 function SupersetWrapper({
   label = DEFAULTS.label,
@@ -11348,10 +11919,10 @@ function WeekRow({
     }
   );
 }
-var t9 = getSemanticColors("dark");
+var t10 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: t9["status-success"],
-  brandPrimary: t9["brand-primary"],
+  statusSuccess: t10["status-success"],
+  brandPrimary: t10["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -11835,12 +12406,12 @@ function PrHistoryModal({
     }
   );
 }
-var t10 = getSemanticColors("dark");
-var BRAND_PRIMARY9 = t10["brand-primary"];
+var t11 = getSemanticColors("dark");
+var BRAND_PRIMARY9 = t11["brand-primary"];
 var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
-var STATUS_SUCCESS2 = t10["status-success"];
-var STATUS_WARNING2 = t10["status-warning"];
-var STATUS_ERROR2 = t10["status-error"];
+var STATUS_SUCCESS2 = t11["status-success"];
+var STATUS_WARNING2 = t11["status-warning"];
+var STATUS_ERROR2 = t11["status-error"];
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -12030,13 +12601,13 @@ function ReadinessCheck({
     )
   ] }) });
 }
-var t11 = getSemanticColors("dark");
-var BRAND_PRIMARY10 = t11["brand-primary"];
+var t12 = getSemanticColors("dark");
+var BRAND_PRIMARY10 = t12["brand-primary"];
 var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t11["status-success"];
-var WARNING = t11["status-warning"];
-var ERROR = t11["status-error"];
+var SUCCESS = t12["status-success"];
+var WARNING = t12["status-warning"];
+var ERROR = t12["status-error"];
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
@@ -12407,8 +12978,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t16 = Date.parse(dateStr);
-  return Number.isNaN(t16) ? 0 : t16;
+  const t26 = Date.parse(dateStr);
+  return Number.isNaN(t26) ? 0 : t26;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -12897,10 +13468,10 @@ function StrengthTrendChart({
     }
   );
 }
-var t12 = getSemanticColors("dark");
-var STATUS_SUCCESS4 = t12["status-success"];
-var STATUS_WARNING4 = t12["status-warning"];
-var STATUS_INFO = t12["status-info"];
+var t13 = getSemanticColors("dark");
+var STATUS_SUCCESS4 = t13["status-success"];
+var STATUS_WARNING4 = t13["status-warning"];
+var STATUS_INFO = t13["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -12943,8 +13514,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t16 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t16 * (b[key] - a[key]);
+      const t26 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t26 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -13274,13 +13845,13 @@ function CapacityBandChart({
     }
   );
 }
-var t13 = getSemanticColors("dark");
+var t14 = getSemanticColors("dark");
 function glowShadow(color) {
   return `0 0 5px 1px ${alpha(color, 0.3)}, 0 0 10px 3px ${alpha(color, 0.12)}`;
 }
 var DEFAULT_TRACK_COLOR = primitiveColors.charcoal[200];
 var DEFAULT_MARKER_COLOR2 = primitiveColors.white;
-var TICK_COLOR = t13["text-tertiary"];
+var TICK_COLOR = t14["text-tertiary"];
 var ZONE_SIZES = {
   default: {
     trackHeight: 14,
@@ -13463,7 +14034,7 @@ function ZoneTrack({
           ),
           ticks?.map((tick, i) => {
             const emphasized = tick.emphasized === true;
-            const lineColor = tick.color ?? (emphasized ? t13["brand-primary"] : TICK_COLOR);
+            const lineColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
             const lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal;
             return /* @__PURE__ */ jsx(
               reactNative.View,
@@ -13494,7 +14065,7 @@ function ZoneTrack({
               if (tick.label == null) return null;
               const emphasized = tick.emphasized === true;
               if (!showTickLabel(i, emphasized)) return null;
-              const labelColor = tick.color ?? (emphasized ? t13["brand-primary"] : TICK_COLOR);
+              const labelColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
               const labelNode = /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
@@ -13550,14 +14121,14 @@ function FatigueMeter({
   className,
   ...props
 }) {
-  const [t1, t22, t32] = thresholds;
+  const [t1, t26, t32] = thresholds;
   const zones = [
     { upTo: t1, color: zoneColors[0] },
-    { upTo: t22, color: zoneColors[1] },
+    { upTo: t26, color: zoneColors[1] },
     { upTo: t32, color: zoneColors[2] },
     { upTo: max, color: zoneColors[3] }
   ];
-  const tickValues = [0, t1, t22, t32, max];
+  const tickValues = [0, t1, t26, t32, max];
   const ticks = tickValues.map((v, i) => ({ value: v, label: labels[i] }));
   return /* @__PURE__ */ jsx(
     ZoneTrack,
@@ -13680,7 +14251,7 @@ function VolumeLandmarkBar({
     }
   );
 }
-var t14 = getSemanticColors("dark");
+var t15 = getSemanticColors("dark");
 var statusToken = {
   productive: "status-success",
   threshold: "status-warning",
@@ -13697,7 +14268,7 @@ var defaultLabel = {
   stop: "Stop"
 };
 function statusPillColor(status) {
-  return t14[statusToken[status]];
+  return t15[statusToken[status]];
 }
 function StatusPill2({ status, label, className, style, ...props }) {
   const color = statusPillColor(status);
@@ -13730,7 +14301,7 @@ function StatusPill2({ status, label, className, style, ...props }) {
     }
   );
 }
-var t15 = getSemanticColors("dark");
+var t16 = getSemanticColors("dark");
 var categoryToken = {
   productive: null,
   threshold: "status-warning",
@@ -13743,7 +14314,7 @@ var floodOpacity = {
 };
 function liveAuraColor(category) {
   const token = categoryToken[category];
-  return token ? t15[token] : null;
+  return token ? t16[token] : null;
 }
 function LiveAuraFrame({
   category,
@@ -13772,9 +14343,9 @@ function LiveAuraFrame({
           position: "relative",
           overflow: "hidden",
           borderRadius: 10,
-          backgroundColor: t15["background-base"],
+          backgroundColor: t16["background-base"],
           borderWidth: 1,
-          borderColor: t15["border-default"]
+          borderColor: t16["border-default"]
         },
         style
       ],
@@ -13795,6 +14366,905 @@ function LiveAuraFrame({
     }
   );
 }
+function VelocityHero({
+  velocities,
+  targetReps,
+  liveRepIndex,
+  width,
+  height = 300
+}) {
+  return /* @__PURE__ */ jsx(reactNative.View, { testID: "velocity-hero", style: width != null ? { width, height } : { flex: 1, height }, children: /* @__PURE__ */ jsx(
+    VelocityStrip,
+    {
+      variant: "hero",
+      velocities,
+      liveRepIndex: liveRepIndex ?? velocities.length - 1,
+      targetReps,
+      height,
+      scale: "peak"
+    }
+  ) });
+}
+
+// src/components/custom/Fatigue/fatigue-tokens.ts
+var t17 = getSemanticColors("dark");
+var FONT_HEAD = '"Space Grotesk", sans-serif';
+var FONT_UI = '"Nunito Sans", sans-serif';
+var FONT_MONO = "monospace";
+var TONE_COLOR = {
+  ok: t17["status-success"],
+  warn: t17["status-warning"],
+  alarm: t17["status-error"]
+};
+var STATE_LABEL = {
+  good: "Good",
+  slowing: "Slowing",
+  grinding: "Grinding",
+  "form-breakdown": "Form breaking down"
+};
+var PHASE_AXIS_COLOR = {
+  eccentric: primitiveRamps.magenta[800],
+  concentric: primitiveRamps.cyan[800],
+  hold: primitiveColors.charcoal[100],
+  idle: primitiveColors.charcoal[200]
+};
+var PHASE_AXIS_BASE_COLOR = {
+  eccentric: primitiveRamps.magenta[950],
+  concentric: primitiveRamps.cyan[950],
+  hold: primitiveColors.charcoal[300],
+  idle: primitiveColors.charcoal[200]
+};
+var PACING_TONE = {
+  ahead: primitiveRamps.amber[300],
+  onPace: primitiveRamps.green[300],
+  over: primitiveRamps.red[300]
+};
+var SILVER = primitiveColors.neutral[300];
+var RED_LIGHT = primitiveRamps.red[400];
+var RED_MID = primitiveRamps.red[600];
+var RED_DEEP = primitiveRamps.red[800];
+var GRIND_THRESHOLD = 0.35;
+var DRIFT_GREY = primitiveColors.neutral[600];
+function clamp012(v) {
+  return Math.min(1, Math.max(0, v));
+}
+function hexToRgb2(hex) {
+  const h = hex.replace("#", "");
+  const f = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  return [parseInt(f.slice(0, 2), 16), parseInt(f.slice(2, 4), 16), parseInt(f.slice(4, 6), 16)];
+}
+function mixHex2(a, b, ratio) {
+  const [ar, ag, ab] = hexToRgb2(a);
+  const [br, bg, bb] = hexToRgb2(b);
+  const m = (x, y) => Math.round(x + (y - x) * clamp012(ratio));
+  return `#${[m(ar, br), m(ag, bg), m(ab, bb)].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+function ghostLineColor(tempoDeviation, grindSignature) {
+  if (grindSignature >= GRIND_THRESHOLD) {
+    const severity = clamp012((grindSignature - GRIND_THRESHOLD) / (1 - GRIND_THRESHOLD));
+    return severity < 0.5 ? mixHex2(RED_LIGHT, RED_MID, severity * 2) : mixHex2(RED_MID, RED_DEEP, (severity - 0.5) * 2);
+  }
+  return mixHex2(SILVER, DRIFT_GREY, (tempoDeviation ?? 0) * 0.55);
+}
+function auraForVerdict(state) {
+  if (state == null || state === "good") return "productive";
+  if (state === "form-breakdown") return "stop";
+  return "threshold";
+}
+
+// src/components/custom/Fatigue/VerdictHero.tsx
+var t18 = getSemanticColors("dark");
+function formatRpe(rpe) {
+  if (rpe == null) return "\u2014";
+  return (Math.round(rpe * 2) / 2).toFixed(1);
+}
+function VerdictHero({ rpe, verdict }) {
+  const tone = verdict ? TONE_COLOR[verdict.tone] : t18["text-tertiary"];
+  const word = verdict ? STATE_LABEL[verdict.state] : "Warming up";
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 6 }, testID: "verdict-hero", children: [
+    /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        style: {
+          fontSize: 9,
+          letterSpacing: 1.5,
+          fontFamily: FONT_MONO,
+          color: t18["text-tertiary"]
+        },
+        children: "FATIGUE"
+      }
+    ),
+    /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 2 }, children: [
+      /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 7 }, children: [
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 62,
+              fontWeight: "900",
+              fontFamily: FONT_HEAD,
+              color: tone,
+              lineHeight: 60
+            },
+            accessibilityLabel: `RPE ${formatRpe(rpe)}`,
+            children: formatRpe(rpe)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: "800",
+              color: tone,
+              marginBottom: 9,
+              fontFamily: FONT_HEAD
+            },
+            children: "RPE"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 17, fontWeight: "800", fontFamily: FONT_HEAD, color: tone }, children: word })
+    ] })
+  ] });
+}
+var t19 = getSemanticColors("dark");
+var TONE_VARIANT = {
+  ok: "success",
+  warn: "warning",
+  alarm: "error"
+};
+var TONE_WORD = { ok: "ok", warn: "watch", alarm: "alarm" };
+function Light({
+  label,
+  tone,
+  detail
+}) {
+  const variant = tone ? TONE_VARIANT[tone] : "neutral";
+  const word = tone ? TONE_WORD[tone] : "warming up";
+  return /* @__PURE__ */ jsx(Tooltip, { label: `${detail} \xB7 ${word}`, placement: "bottom", children: /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      accessibilityLabel: `${detail}, ${word}`,
+      style: { flexDirection: "row", alignItems: "center", gap: 5 },
+      children: [
+        /* @__PURE__ */ jsx(StatusDot, { variant, size: "sm", glow: true }),
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 9,
+              letterSpacing: 0.6,
+              fontFamily: FONT_MONO,
+              color: t19["text-secondary"]
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  ) });
+}
+function FatigueLights({ dimensions, spread = false }) {
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      testID: "fatigue-lights",
+      style: {
+        flexDirection: "row",
+        gap: spread ? 0 : 16,
+        alignItems: "center",
+        justifyContent: spread ? "space-between" : "flex-start"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Light, { label: "VEL", tone: dimensions?.velocityLoss ?? null, detail: "Velocity loss" }),
+        /* @__PURE__ */ jsx(Light, { label: "ROM", tone: dimensions?.rom ?? null, detail: "ROM depth" }),
+        /* @__PURE__ */ jsx(Light, { label: "TEMPO", tone: dimensions?.tempo ?? null, detail: "Tempo" })
+      ]
+    }
+  );
+}
+function barColor(romM, working, short) {
+  if (short != null && romM < short) return RED_DEEP;
+  if (working != null && romM < working) return RED_LIGHT;
+  return SILVER;
+}
+function romReferenceOverlay(g, workingStandardM, shortThresholdM) {
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    shortThresholdM != null && /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: g.yOf(shortThresholdM),
+          backgroundColor: alpha(RED_DEEP, 0.06)
+        }
+      }
+    ),
+    workingStandardM != null && /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: g.yOf(workingStandardM),
+          borderTopWidth: 1,
+          borderStyle: "dashed",
+          borderColor: alpha(SILVER, 0.4)
+        }
+      }
+    ),
+    shortThresholdM != null && /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: g.yOf(shortThresholdM),
+          borderTopWidth: 1,
+          borderStyle: "dashed",
+          borderColor: alpha(RED_DEEP, 0.4)
+        }
+      }
+    )
+  ] });
+}
+function RomProgressionChart({
+  points,
+  workingStandardM,
+  shortThresholdM,
+  barHeight = 44,
+  maxReps = 12,
+  plannedReps: plannedReps2
+}) {
+  const shown = points.slice(-maxReps);
+  const slots = shown.map((p) => ({ kind: "rep", value: p.romM }));
+  const scaleMax = Math.max(...shown.map((p) => p.romM), workingStandardM ?? 0, shortThresholdM ?? 0) || void 0;
+  return /* @__PURE__ */ jsx(reactNative.View, { testID: "rom-progression", children: /* @__PURE__ */ jsx(
+    SetBarChart,
+    {
+      slots,
+      colorFor: (romM) => barColor(romM, workingStandardM, shortThresholdM),
+      height: barHeight,
+      scaleMax,
+      barRadius: 2,
+      hideBaseline: true,
+      targetReps: plannedReps2,
+      renderReference: (g) => romReferenceOverlay(g, workingStandardM, shortThresholdM),
+      testIDPrefix: "rom"
+    }
+  ) });
+}
+
+// src/components/custom/Fatigue/tempo-pacing.ts
+var t20 = getSemanticColors("dark");
+var ON_TARGET_MS2 = 100;
+function phaseFillFraction(elapsedMs, targetMs) {
+  if (targetMs == null || targetMs <= 0) return 1;
+  return Math.min(1, Math.max(0, elapsedMs / targetMs));
+}
+function pacingTone(elapsedMs, targetMs) {
+  if (targetMs == null || targetMs <= 0) return t20["text-primary"];
+  const remainingMs = targetMs - elapsedMs;
+  if (remainingMs > ON_TARGET_MS2) return PACING_TONE.ahead;
+  if (remainingMs >= -ON_TARGET_MS2) return PACING_TONE.onPace;
+  return PACING_TONE.over;
+}
+function prescribedSegments(tempo) {
+  if (tempo == null) return [];
+  const [ecc, pauseBottom, con, pauseTop] = tempo;
+  const order = [
+    ["eccentric", ecc],
+    ["hold", pauseBottom],
+    ["concentric", con],
+    ["hold", pauseTop]
+  ];
+  const out = [];
+  let t26 = 0;
+  for (const [phase, seconds] of order) {
+    const ms = seconds * 1e3;
+    if (ms > 0) out.push({ phase, startMs: t26, endMs: t26 + ms });
+    t26 += ms;
+  }
+  return out;
+}
+function phaseTargetsMs(phases, tempo) {
+  if (tempo == null) return phases.map(() => null);
+  const [eccS, pauseBottomS, conS, pauseTopS] = tempo;
+  let seenConcentric = false;
+  return phases.map((phase) => {
+    switch (phase) {
+      case "eccentric":
+        return eccS * 1e3;
+      case "concentric":
+        seenConcentric = true;
+        return conS * 1e3;
+      case "hold":
+        return (seenConcentric ? pauseTopS : pauseBottomS) * 1e3;
+      default:
+        return null;
+    }
+  });
+}
+
+// src/components/custom/Fatigue/GhostBand.tsx
+var t21 = getSemanticColors("dark");
+var BAND_H = 16;
+var BAND_GAP = 4;
+var PHASE_LABEL = {
+  eccentric: "ECC",
+  concentric: "CON"
+};
+var LABEL_CH_PX = 7;
+var LABEL_PAD_PX = 6;
+var WELL_SHADE = primitiveColors.black;
+var WELL_FLOOR_LIGHT = primitiveColors.white;
+function labelFits(label, segW) {
+  return segW >= label.length * LABEL_CH_PX + LABEL_PAD_PX;
+}
+function GhostBand({
+  segments,
+  x,
+  top,
+  height = BAND_H,
+  showLabels = false,
+  labelColor = t21["text-primary"],
+  targetTempoSeconds = null,
+  prescribed = false
+}) {
+  const rawId = React25.useId();
+  const safeId = rawId.replace(/[^a-zA-Z0-9]/g, "");
+  const clipId = `ghost-band-${safeId}`;
+  const wellId = `ghost-band-well-${safeId}`;
+  const drawn = segments.filter((seg) => x(seg.endMs) - x(seg.startMs) > 0);
+  if (drawn.length === 0) return null;
+  const bandLeft = x(drawn[0].startMs);
+  const bandRight = x(drawn[drawn.length - 1].endMs);
+  const bandW = bandRight - bandLeft;
+  if (bandW <= 0) return null;
+  const pacing = targetTempoSeconds != null && !prescribed;
+  const targetsMs = phaseTargetsMs(
+    drawn.map((seg) => seg.phase),
+    targetTempoSeconds
+  );
+  const runs = drawn.map((seg, i) => {
+    const left = x(seg.startMs);
+    const right = i === drawn.length - 1 ? bandRight : x(drawn[i + 1].startMs);
+    const width = Math.max(0, right - left);
+    const targetMs = targetsMs[i];
+    const elapsedMs = seg.endMs - seg.startMs;
+    return {
+      phase: seg.phase,
+      left,
+      width,
+      // Prescribed → nothing performed, so nothing filled. No target at all → the run reads
+      // complete rather than perpetually empty.
+      fillWidth: prescribed ? 0 : pacing ? width * phaseFillFraction(elapsedMs, targetMs) : width,
+      labelTone: pacing ? pacingTone(elapsedMs, targetMs) : labelColor
+    };
+  });
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: bandLeft, y: top, width: bandW, height, rx: 2 }) }),
+      /* @__PURE__ */ jsxs("linearGradient", { id: wellId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: WELL_SHADE, stopOpacity: 0.6 }),
+        /* @__PURE__ */ jsx("stop", { offset: "42%", stopColor: WELL_SHADE, stopOpacity: 0.12 }),
+        /* @__PURE__ */ jsx("stop", { offset: "88%", stopColor: WELL_SHADE, stopOpacity: 0.02 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: WELL_FLOOR_LIGHT, stopOpacity: 0.07 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { clipPath: `url(#${clipId})`, children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: bandLeft,
+          y: top,
+          width: bandW,
+          height,
+          fill: PHASE_AXIS_COLOR.idle,
+          "data-testid": "ghost-band-floor"
+        }
+      ),
+      runs.map((run, i) => /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: run.left,
+            y: top,
+            width: run.width,
+            height,
+            fill: PHASE_AXIS_BASE_COLOR[run.phase],
+            "data-testid": "ghost-band-base"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: run.left,
+            y: top,
+            width: run.width,
+            height,
+            fill: `url(#${wellId})`,
+            "data-testid": "ghost-band-well"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: run.left,
+            y: top,
+            width: run.fillWidth,
+            height,
+            fill: PHASE_AXIS_COLOR[run.phase],
+            "data-testid": "ghost-band-fill"
+          }
+        )
+      ] }, i)),
+      showLabels && runs.map((run, i) => {
+        const label = PHASE_LABEL[run.phase];
+        if (!label || !labelFits(label, run.width)) return null;
+        return /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: run.left + run.width / 2,
+            y: top + height / 2,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            fill: run.labelTone,
+            fontSize: 8,
+            fontWeight: 800,
+            letterSpacing: 1,
+            fontFamily: FONT_UI,
+            children: label
+          },
+          i
+        );
+      })
+    ] })
+  ] });
+}
+var t22 = getSemanticColors("dark");
+var PARCH = t22["text-primary"];
+function smoothPath(pts) {
+  if (pts.length < 2) return pts.length ? `M ${pts[0][0]} ${pts[0][1]}` : "";
+  let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i];
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const p3 = pts[i + 2] ?? p2;
+    const c1x = p1[0] + (p2[0] - p0[0]) / 6;
+    const c1y = p1[1] + (p2[1] - p0[1]) / 6;
+    const c2x = p2[0] - (p3[0] - p1[0]) / 6;
+    const c2y = p2[1] - (p3[1] - p1[1]) / 6;
+    d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)}, ${c2x.toFixed(1)} ${c2y.toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
+  }
+  return d;
+}
+var BLUR_STD_DEV = 2.6;
+function GhostBloom({
+  current,
+  ghosts = [],
+  tint,
+  baseline,
+  orientation = "up",
+  ghostStroke = (i) => alpha(PARCH, 0.1 + i * 0.015),
+  lineWidth = 3.5
+}) {
+  const rawId = React25.useId();
+  const blurId = `bloom-blur-${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
+  const toY = (mag) => orientation === "down" ? baseline + mag : baseline - mag;
+  const toAbs = (pts) => pts.map(([px, mag]) => [px, toY(mag)]);
+  const curD = smoothPath(toAbs(current));
+  const ghostDs = ghosts.map((g) => smoothPath(toAbs(g)));
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: blurId, x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: BLUR_STD_DEV }) }) }),
+    ghostDs.map((d, i) => /* @__PURE__ */ jsx(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: ghostStroke(i),
+        strokeWidth: 1.5,
+        strokeLinejoin: "round"
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: curD,
+        fill: "none",
+        stroke: alpha(primitiveColors.black, 0.3),
+        strokeWidth: lineWidth + 3,
+        strokeLinejoin: "round",
+        strokeLinecap: "round",
+        filter: `url(#${blurId})`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: curD,
+        fill: "none",
+        stroke: tint,
+        strokeWidth: lineWidth,
+        strokeLinejoin: "round",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+
+// src/components/custom/Fatigue/GhostSpark.tsx
+function GhostSpark({
+  curves,
+  width,
+  height = 172,
+  targetTempoSeconds = null
+}) {
+  const w = width;
+  const h = height;
+  const padL = 12;
+  const padR = 8;
+  const padTop = 10;
+  const padBot = 6;
+  if (curves.length === 0) {
+    const prescribed = prescribedSegments(targetTempoSeconds);
+    if (prescribed.length === 0) {
+      return /* @__PURE__ */ jsx(reactNative.View, { testID: "ghost-spark", style: { width: w, height: h } });
+    }
+    const totalMs = prescribed[prescribed.length - 1].endMs;
+    const bandTopEmpty = h - padBot - BAND_H;
+    const xEmpty = (ms) => padL + ms / (totalMs * 1.04) * (w - padL - padR);
+    return /* @__PURE__ */ jsx(reactNative.View, { testID: "ghost-spark", style: { paddingHorizontal: 4 }, children: /* @__PURE__ */ jsx("svg", { width: w, height: h, children: /* @__PURE__ */ jsx(
+      GhostBand,
+      {
+        segments: prescribed,
+        x: xEmpty,
+        top: bandTopEmpty,
+        showLabels: true,
+        targetTempoSeconds,
+        prescribed: true
+      }
+    ) }) });
+  }
+  const cur = curves[curves.length - 1];
+  const allSamples = curves.flatMap((c) => c.samples);
+  const vmax = Math.max(0.01, ...allSamples.map((s) => s.velocityMps)) * 1.06;
+  const axisMaxT = Math.max(1, ...curves.map((c) => c.samples[c.samples.length - 1]?.tMs ?? 0)) * 1.04;
+  const bandBottom = h - padBot;
+  const bandTop = bandBottom - BAND_H;
+  const baseline = bandTop - BAND_GAP;
+  const plotH = Math.max(1, baseline - padTop);
+  const x = (ms) => padL + ms / axisMaxT * (w - padL - padR);
+  const mag = (v) => clamp012(v / vmax) * plotH;
+  const lineTint = ghostLineColor(cur.tempoDeviation, cur.grindSignature);
+  const curPts = cur.samples.map((s) => [x(s.tMs), mag(s.velocityMps)]);
+  const ghostPts = curves.slice(0, -1).map((c) => c.samples.map((s) => [x(s.tMs), mag(s.velocityMps)]));
+  return /* @__PURE__ */ jsx(reactNative.View, { testID: "ghost-spark", style: { paddingHorizontal: 4 }, children: /* @__PURE__ */ jsxs("svg", { width: w, height: h, children: [
+    /* @__PURE__ */ jsx(
+      GhostBloom,
+      {
+        current: curPts,
+        ghosts: ghostPts,
+        tint: lineTint,
+        baseline,
+        orientation: "up"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GhostBand,
+      {
+        segments: cur.phaseSegments,
+        x,
+        top: bandTop,
+        showLabels: true,
+        targetTempoSeconds
+      }
+    )
+  ] }) });
+}
+
+// src/components/custom/Fatigue/LiveFatigueCard.tsx
+var t23 = getSemanticColors("dark");
+var PAD = 18;
+var GHOST_GUTTER = 4;
+function LiveFatigueCard({ model, width = 318, height }) {
+  const chartW = width - PAD * 2 - GHOST_GUTTER * 2;
+  const chartH = height != null ? Math.round(Math.min(240, Math.max(168, height * 0.4))) : 172;
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      level: "base",
+      testID: "live-fatigue-card",
+      style: {
+        width,
+        height,
+        borderRadius: 14,
+        padding: PAD,
+        borderWidth: 1,
+        borderColor: t23["hairline-default"],
+        ...barPaper(t23["surface-base"])
+      },
+      children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 12 }, children: [
+          /* @__PURE__ */ jsx(VerdictHero, { rpe: model.rpe, verdict: model.verdict }),
+          /* @__PURE__ */ jsx(FatigueLights, { dimensions: model.verdict?.dimensions ?? null })
+        ] }),
+        /* @__PURE__ */ jsx(reactNative.View, { style: { flex: 1, minHeight: 16 } }),
+        /* @__PURE__ */ jsx(
+          RomProgressionChart,
+          {
+            points: model.romProgression,
+            workingStandardM: model.romWorkingStandardM,
+            shortThresholdM: model.romShortThresholdM,
+            plannedReps: model.plannedReps
+          }
+        ),
+        /* @__PURE__ */ jsx(reactNative.View, { style: { flex: 1, minHeight: 16 } }),
+        /* @__PURE__ */ jsx(
+          GhostSpark,
+          {
+            curves: model.velocityCurves,
+            width: chartW,
+            height: chartH,
+            targetTempoSeconds: model.targetTempoSeconds
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/custom/Fatigue/LiveFatiguePanel.tsx
+var t24 = getSemanticColors("dark");
+function ExerciseHeaderLite({ header }) {
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-end",
+        justifyContent: "space-between",
+        paddingHorizontal: 24,
+        paddingTop: 18,
+        paddingBottom: 14,
+        borderBottomWidth: 1,
+        borderColor: alpha(t24["text-primary"], 0.08)
+      },
+      children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { style: { gap: 2 }, children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              style: {
+                fontSize: 28,
+                fontWeight: "700",
+                fontFamily: FONT_HEAD,
+                color: t24["text-primary"]
+              },
+              children: header.title
+            }
+          ),
+          header.subtitle && /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              style: {
+                fontSize: 13,
+                fontWeight: "600",
+                fontFamily: FONT_UI,
+                color: t24["text-secondary"]
+              },
+              children: header.subtitle
+            }
+          )
+        ] }),
+        header.meta && /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 13,
+              fontWeight: "800",
+              fontFamily: FONT_MONO,
+              color: t24["text-tertiary"]
+            },
+            children: header.meta
+          }
+        )
+      ]
+    }
+  );
+}
+function LiveFatiguePanel({
+  model,
+  velocity,
+  header,
+  aura,
+  bodyHeight = 508,
+  cardWidth = 318
+}) {
+  const category = aura ?? auraForVerdict(model.verdict?.state ?? null);
+  const heroH = bodyHeight - 26;
+  return /* @__PURE__ */ jsx(
+    LiveAuraFrame,
+    {
+      category,
+      style: { borderRadius: 0, borderWidth: 0 },
+      testID: "live-fatigue-panel",
+      children: /* @__PURE__ */ jsxs(reactNative.View, { style: { flex: 1 }, children: [
+        header && /* @__PURE__ */ jsx(ExerciseHeaderLite, { header }),
+        /* @__PURE__ */ jsxs(reactNative.View, { style: { padding: 24, flexDirection: "row", gap: 18, alignItems: "stretch" }, children: [
+          /* @__PURE__ */ jsxs(reactNative.View, { style: { flex: 1, gap: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                style: {
+                  fontSize: 9,
+                  letterSpacing: 1.2,
+                  fontFamily: FONT_MONO,
+                  color: t24["text-tertiary"]
+                },
+                children: "VELOCITY \xB7 this set"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              VelocityHero,
+              {
+                velocities: velocity.velocities,
+                targetReps: velocity.targetReps,
+                liveRepIndex: velocity.liveRepIndex,
+                height: heroH
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(LiveFatigueCard, { model, width: cardWidth, height: bodyHeight })
+        ] })
+      ] })
+    }
+  );
+}
+var t25 = getSemanticColors("dark");
+function phaseAt(segments, ms) {
+  const hit = segments.find((s) => ms >= s.startMs && ms < s.endMs);
+  return hit ? hit.phase : null;
+}
+function mergePhaseSegments(a, b) {
+  if (a.length === 0) return b;
+  if (b.length === 0) return a;
+  const bounds = Array.from(new Set([...a, ...b].flatMap((s) => [s.startMs, s.endMs]))).sort(
+    (p, q) => p - q
+  );
+  const out = [];
+  for (let i = 0; i < bounds.length - 1; i++) {
+    const startMs = bounds[i];
+    const endMs = bounds[i + 1];
+    if (endMs <= startMs) continue;
+    const mid = (startMs + endMs) / 2;
+    const pa = phaseAt(a, mid);
+    const pb = phaseAt(b, mid);
+    const phase = pa == null ? pb ?? "idle" : pb == null ? pa : pa === pb ? pa : "idle";
+    const last = out[out.length - 1];
+    if (last && last.phase === phase && last.endMs === startMs) last.endMs = endMs;
+    else out.push({ phase, startMs, endMs });
+  }
+  return out;
+}
+function lastTMs(curves) {
+  return Math.max(0, ...curves.map((c) => c.samples[c.samples.length - 1]?.tMs ?? 0));
+}
+function DualGhostSpark({
+  left,
+  right,
+  width,
+  height = 232,
+  leftLabel = "LEFT",
+  rightLabel = "RIGHT",
+  showDeviceLabels = true,
+  targetTempoSeconds = null
+}) {
+  const w = width;
+  const h = height;
+  const padL = 14;
+  const padR = 14;
+  const padTop = 22;
+  const padBot = 22;
+  if (left.length === 0 && right.length === 0) {
+    return /* @__PURE__ */ jsx(reactNative.View, { testID: "dual-ghost-spark", style: { width: w, height: h } });
+  }
+  const mid = padTop + (h - padTop - padBot) / 2;
+  const bandTop = mid - BAND_H / 2;
+  const baseUp = bandTop - BAND_GAP;
+  const baseDown = mid + BAND_H / 2 + BAND_GAP;
+  const wingH = Math.max(1, Math.min(baseUp - padTop, h - padBot - baseDown));
+  const allSamples = [...left, ...right].flatMap((c) => c.samples);
+  const vmax = Math.max(0.01, ...allSamples.map((s) => s.velocityMps)) * 1.06;
+  const axisMaxT = Math.max(1, lastTMs(left), lastTMs(right)) * 1.04;
+  const x = (ms) => padL + ms / axisMaxT * (w - padL - padR);
+  const mag = (v) => clamp012(v / vmax) * wingH;
+  const toPts = (c) => c.samples.map((s) => [x(s.tMs), mag(s.velocityMps)]);
+  const wing = (curves) => {
+    const cur = curves[curves.length - 1];
+    return {
+      cur,
+      current: cur ? toPts(cur) : [],
+      ghosts: curves.slice(0, -1).map(toPts),
+      tint: cur ? ghostLineColor(cur.tempoDeviation, cur.grindSignature) : t25["text-tertiary"]
+    };
+  };
+  const up = wing(left);
+  const down = wing(right);
+  const segments = mergePhaseSegments(up.cur?.phaseSegments ?? [], down.cur?.phaseSegments ?? []);
+  return /* @__PURE__ */ jsx(reactNative.View, { testID: "dual-ghost-spark", style: { paddingHorizontal: 4 }, children: /* @__PURE__ */ jsxs("svg", { width: w, height: h, children: [
+    up.current.length > 0 && /* @__PURE__ */ jsx("g", { "data-testid": "dual-ghost-bloom-left", children: /* @__PURE__ */ jsx(
+      GhostBloom,
+      {
+        current: up.current,
+        ghosts: up.ghosts,
+        tint: up.tint,
+        baseline: baseUp,
+        orientation: "up"
+      }
+    ) }),
+    down.current.length > 0 && /* @__PURE__ */ jsx("g", { "data-testid": "dual-ghost-bloom-right", children: /* @__PURE__ */ jsx(
+      GhostBloom,
+      {
+        current: down.current,
+        ghosts: down.ghosts,
+        tint: down.tint,
+        baseline: baseDown,
+        orientation: "down"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      GhostBand,
+      {
+        segments,
+        x,
+        top: bandTop,
+        showLabels: true,
+        labelColor: alpha(t25["text-primary"], 0.92),
+        targetTempoSeconds
+      }
+    ),
+    showDeviceLabels && /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: padL,
+          y: padTop - 9,
+          fontSize: 9,
+          fontWeight: 800,
+          letterSpacing: 1,
+          fontFamily: FONT_UI,
+          fill: t25["text-tertiary"],
+          children: leftLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: padL,
+          y: h - padBot + 15,
+          fontSize: 9,
+          fontWeight: 800,
+          letterSpacing: 1,
+          fontFamily: FONT_UI,
+          fill: t25["text-tertiary"],
+          children: rightLabel
+        }
+      )
+    ] })
+  ] }) });
+}
 var PALETTE = DATAVIZ_CATEGORICAL_PALETTE;
 function scaleValue(v, scale) {
   if (v <= 0) return 0;
@@ -13883,7 +15353,7 @@ function Treemap({
   const rects = squarify(weighted, width, height);
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("relative", className), style: { width, height }, ...props, children: rects.map((r) => {
     const selected = r.datum.id === selectedId;
-    const labelFits = r.w > 54 && r.h > 22;
+    const labelFits2 = r.w > 54 && r.h > 22;
     const pressable = r.datum.id !== "__more__";
     return /* @__PURE__ */ jsx(
       reactNative.Pressable,
@@ -13905,7 +15375,7 @@ function Treemap({
           padding: 4,
           overflow: "hidden"
         },
-        children: labelFits && /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 2, className: "text-[10px] font-semibold text-[#0b0b0b]", children: r.datum.label ?? r.datum.id })
+        children: labelFits2 && /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 2, className: "text-[10px] font-semibold text-[#0b0b0b]", children: r.datum.label ?? r.datum.id })
       },
       r.datum.id
     );
@@ -14001,28 +15471,28 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t16, i) => {
-            const y = toY(t16);
+          ticksOf(yd, TICK_COUNT).map((t26, i) => {
+            const y = toY(t26);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-y",
                 style: { position: "absolute", left: PLOT_LEFT2, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t16) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t26) })
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t16, i) => {
-            const x = toX(t16);
+          ticksOf(xd, TICK_COUNT).map((t26, i) => {
+            const x = toX(t26);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-x",
                 style: { position: "absolute", top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t16) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t26) })
               },
               `x-${i}`
             );
@@ -14095,7 +15565,7 @@ var DEFAULT_THRESHOLDS2 = [
 var ARC_START = 135;
 var ARC_SWEEP = 270;
 var SEGMENTS = 40;
-function clamp012(n) {
+function clamp013(n) {
   if (Number.isNaN(n)) return 0;
   return Math.max(0, Math.min(1, n));
 }
@@ -14140,7 +15610,7 @@ function Gauge2({
   ...props
 }) {
   const span = max - min || 1;
-  const fill = clamp012((value - min) / span);
+  const fill = clamp013((value - min) / span);
   const activeColor = (f) => color ?? bandColor2(f, thresholds, min, max);
   const ticks = buildTicks(fill, size, activeColor);
   const displayColor = color ?? bandColor2(fill, thresholds, min, max);
@@ -14157,23 +15627,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t16) => /* @__PURE__ */ jsx(
+        ticks.map((t26) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t16.left - tickThickness / 2,
-              top: t16.top - tickLength / 2,
+              left: t26.left - tickThickness / 2,
+              top: t26.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t16.color,
-              transform: [{ rotate: t16.rotate }]
+              backgroundColor: t26.color,
+              transform: [{ rotate: t26.rotate }]
             }
           },
-          t16.key
+          t26.key
         )),
         /* @__PURE__ */ jsxs(reactNative.View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -14607,6 +16077,8 @@ exports.Avatar = Avatar;
 exports.AvatarBadge = AvatarBadge;
 exports.AvatarGroup = AvatarGroup;
 exports.AwardIcon = AwardIcon;
+exports.BAND_GAP = BAND_GAP;
+exports.BAND_H = BAND_H;
 exports.Badge = Badge;
 exports.BadgeText = BadgeText;
 exports.BaseBadge = BaseBadge;
@@ -14637,6 +16109,7 @@ exports.CircularTimer = CircularTimer;
 exports.Collapse = Collapse;
 exports.CollapseButton = CollapseButton;
 exports.CollapseContent = CollapseContent;
+exports.DRIFT_GREY = DRIFT_GREY;
 exports.DashboardShell = DashboardShell;
 exports.DataRow = DataRow;
 exports.DateTime = DateTime;
@@ -14649,18 +16122,25 @@ exports.Drawer = Drawer;
 exports.DrawerBody = DrawerBody;
 exports.DrawerFooter = DrawerFooter;
 exports.DrawerHeader = DrawerHeader;
+exports.DualGhostSpark = DualGhostSpark;
+exports.DualVelocityStrip = DualVelocityStrip;
 exports.DumbbellIcon = DumbbellIcon;
 exports.EmptyState = EmptyState;
 exports.ExerciseCard = ExerciseCard;
 exports.ExerciseCardHeading = ExerciseCardHeading;
 exports.ExerciseHeading = ExerciseHeading;
 exports.ExerciseIndicator = ExerciseIndicator;
+exports.FatigueLights = FatigueLights;
 exports.FatigueMeter = FatigueMeter;
 exports.FormActions = FormActions;
 exports.FormField = FormField;
 exports.FormRow = FormRow;
 exports.FormSection = FormSection;
+exports.GRIND_THRESHOLD = GRIND_THRESHOLD;
 exports.Gauge = Gauge2;
+exports.GhostBand = GhostBand;
+exports.GhostBloom = GhostBloom;
+exports.GhostSpark = GhostSpark;
 exports.HStack = HStack;
 exports.Heading = Heading;
 exports.HelpTip = HelpTip;
@@ -14683,6 +16163,8 @@ exports.ListItemDivider = ListItemDivider;
 exports.ListItemIcon = ListItemIcon;
 exports.ListItemTrailing = ListItemTrailing;
 exports.LiveAuraFrame = LiveAuraFrame;
+exports.LiveFatigueCard = LiveFatigueCard;
+exports.LiveFatiguePanel = LiveFatiguePanel;
 exports.METRIC_FONT = METRIC_FONT;
 exports.Menu = Menu;
 exports.MenuDivider = MenuDivider;
@@ -14707,6 +16189,8 @@ exports.ModalTitle = ModalTitle;
 exports.MuscleGroupChip = MuscleGroupChip;
 exports.NavItem = NavItem;
 exports.Overline = Overline;
+exports.PHASE_AXIS_COLOR = PHASE_AXIS_COLOR;
+exports.PRESSED_ELEVATION_LEVEL = PRESSED_ELEVATION_LEVEL;
 exports.Paragraph = Paragraph;
 exports.PasswordInput = PasswordInput;
 exports.PersonStandingIcon = PersonStandingIcon;
@@ -14720,12 +16204,18 @@ exports.PrBadge = PrBadge;
 exports.PrHistoryModal = PrHistoryModal;
 exports.Progress = Progress;
 exports.ProgressSteps = ProgressSteps;
+exports.RED_DEEP = RED_DEEP;
+exports.RED_LIGHT = RED_LIGHT;
+exports.RED_MID = RED_MID;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.ReadinessCheck = ReadinessCheck;
 exports.RestTimer = RestTimer;
+exports.RomProgressionChart = RomProgressionChart;
 exports.SET_STRIP_VARIABLE_COLOR = SET_STRIP_VARIABLE_COLOR;
 exports.SET_STRIP_ZONES = SET_STRIP_ZONES;
+exports.SILVER = SILVER;
+exports.STATE_LABEL = STATE_LABEL;
 exports.SURFACE_LEVEL_TOKEN = SURFACE_LEVEL_TOKEN;
 exports.ScaleIcon = ScaleIcon;
 exports.Scatter = Scatter;
@@ -14774,6 +16264,7 @@ exports.Surface = Surface;
 exports.SurfaceContext = SurfaceContext;
 exports.SvgIcon = SvgIcon;
 exports.Switch = Switch;
+exports.TONE_COLOR = TONE_COLOR;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
@@ -14799,7 +16290,9 @@ exports.Treemap = Treemap;
 exports.TrendingDownIcon = TrendingDownIcon;
 exports.Typography = Typography;
 exports.VStack = VStack;
+exports.VelocityHero = VelocityHero;
 exports.VelocityStrip = VelocityStrip;
+exports.VerdictHero = VerdictHero;
 exports.VoltrasMark = VoltrasMark;
 exports.VolumeLandmarkBar = VolumeLandmarkBar;
 exports.WeekRow = WeekRow;
@@ -14810,6 +16303,8 @@ exports.ZoneTrack = ZoneTrack;
 exports.alpha = alpha;
 exports.applyThemePreset = applyThemePreset;
 exports.audiobookPreset = audiobookPreset;
+exports.auraForVerdict = auraForVerdict;
+exports.backgroundFrameDark = backgroundFrameDark;
 exports.bestTextColor = bestTextColor;
 exports.buttonSizes = buttonSizes;
 exports.calculateMeanVelocity = calculateMeanVelocity;
@@ -14848,6 +16343,7 @@ exports.getFieldValidationProps = getFieldValidationProps;
 exports.getGlowShadow = getGlowShadow;
 exports.getHoverColors = getHoverColors;
 exports.getLuminance = getLuminance;
+exports.getPressedRecessShadow = getPressedRecessShadow;
 exports.getResultColor = getResultColor;
 exports.getSemanticColors = getSemanticColors;
 exports.getStatusColor = getStatusColor;
@@ -14855,6 +16351,7 @@ exports.getThemeCSSVars = getThemeCSSVars;
 exports.getValidatedElevation = getValidatedElevation;
 exports.getVelocityZoneColor = getVelocityZoneColor;
 exports.getVelocityZoneName = getVelocityZoneName;
+exports.ghostLineColor = ghostLineColor;
 exports.gluestackConfig = gluestackConfig;
 exports.hasMaxLength = hasMaxLength;
 exports.hasMinLength = hasMinLength;
@@ -14868,10 +16365,12 @@ exports.lightThemeCSSVars = lightThemeCSSVars;
 exports.lighten = lighten;
 exports.linearGradient = linearGradient;
 exports.liveAuraColor = liveAuraColor;
+exports.mergePhaseSegments = mergePhaseSegments;
 exports.neumorphicShadows = neumorphicShadows;
 exports.onSurfaceColors = onSurfaceColors;
 exports.paceTone = paceTone;
 exports.paceToneColor = paceToneColor;
+exports.pressedLevel = pressedLevel;
 exports.primitiveBorderRadius = primitiveBorderRadius;
 exports.primitiveBreakpoints = primitiveBreakpoints;
 exports.primitiveColors = primitiveColors;
@@ -14893,9 +16392,11 @@ exports.semanticColorsLight = semanticColorsLight;
 exports.semanticTypography = semanticTypography;
 exports.sequentialEffort = sequentialEffort;
 exports.shadowColors = shadowColors;
+exports.smoothPath = smoothPath;
 exports.statusPillColor = statusPillColor;
 exports.surfaceBackground = surfaceBackground;
 exports.surfaceGradient = surfaceGradient;
+exports.surfaceRampDark = surfaceRampDark;
 exports.useOnSurfaceColor = useOnSurfaceColor;
 exports.useSurface = useSurface;
 exports.useSurfaceMode = useSurfaceMode;