@titan-design/react-ui 0.9.3 → 0.11.0

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from 'react/jsx-runtime';
 import { Pressable, ActivityIndicator, Text, View, TextInput, Platform, StyleSheet, Easing, Image, Modal as Modal$1, ScrollView, Animated } from 'react-native';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React25, { forwardRef, useState, createContext, useContext, useMemo, useRef, useEffect, useCallback, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import React25, { forwardRef, useState, createContext, useContext, useMemo, useRef, useEffect, useCallback, useId, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -333,6 +333,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",
@@ -800,10 +815,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],
@@ -819,6 +843,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)",
@@ -911,25 +940,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],
@@ -943,6 +993,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)",
@@ -1472,9 +1530,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"],
@@ -1531,6 +1591,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"],
@@ -1570,9 +1633,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"],
@@ -1629,6 +1694,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"],
@@ -2263,6 +2331,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"];
 }
@@ -2565,6 +2637,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",
@@ -2589,9 +2662,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";
@@ -5290,7 +5373,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((t16) => t16.id !== id));
+    setToasts((prev) => prev.filter((t26) => t26.id !== id));
   }, []);
   const removeAllToasts = useCallback(() => {
     setToasts([]);
@@ -6043,6 +6126,7 @@ function IconBox({
 function Surface({
   elevation = 0,
   level,
+  pressed = false,
   glowColor,
   glowIntensity,
   theme,
@@ -6056,13 +6140,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 = useMemo(
-    () => ({ mode, level: level ?? inherited.level }),
-    [mode, level, inherited.level]
+    () => ({ mode, level: resolvedLevel }),
+    [mode, resolvedLevel]
   );
   return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value, children: /* @__PURE__ */ jsx(
     View,
@@ -7255,13 +7350,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)"
@@ -7501,11 +7597,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 = {
@@ -7545,8 +7641,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 = {
@@ -7867,19 +7963,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;
@@ -8031,7 +8127,7 @@ function TempoDisplay({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: "#1C1C1C",
+        backgroundColor: t3["surface-raised"],
         paddingHorizontal: chromePadX,
         paddingVertical: chromePadY,
         borderRadius: chromeRadius
@@ -8046,7 +8142,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)
@@ -8104,7 +8200,7 @@ function TempoDisplay({
                 View,
                 {
                   style: {
-                    backgroundColor: "#191919",
+                    backgroundColor: t3["surface-overlay"],
                     borderRadius: 6,
                     paddingVertical: 8,
                     paddingHorizontal: 12,
@@ -8157,13 +8253,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";
@@ -8231,19 +8327,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
@@ -8412,12 +8508,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)"
 };
@@ -8430,9 +8526,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
@@ -8565,257 +8661,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] = useState(() => new 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 = 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] = useState(getReducedMotionPreference);
   useEffect(() => {
-    if (!active) return;
-    const loop = 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] = useState(() => new Animated.Value(1));
+  useEffect(() => {
+    if (liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveGrowth.setValue(1);
+      return;
+    }
+    liveGrowth.setValue(0);
+    if (isNewPeak) {
       Animated.sequence([
-        Animated.timing(value, {
-          toValue: 1,
-          duration: PULSE_HALF_MS,
-          easing: Easing.inOut(Easing.ease),
+        Animated.timing(liveGrowth, {
+          toValue: PEAK_OVERSHOOT,
+          duration: 220,
+          easing: Easing.out(Easing.quad),
           useNativeDriver: false
         }),
-        Animated.timing(value, {
-          toValue: 0,
-          duration: PULSE_HALF_MS,
-          easing: Easing.inOut(Easing.ease),
+        Animated.spring(liveGrowth, {
+          toValue: 1,
+          friction: 5,
+          tension: 140,
           useNativeDriver: false
         })
-      ])
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [active, value]);
-  return value;
+      ]).start();
+    } else {
+      Animated.timing(liveGrowth, {
+        toValue: 1,
+        duration: 300,
+        easing: ANIMATION_EASING,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveGrowth]);
+  return liveGrowth;
 }
-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(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(
+
+// 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] = 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(
+    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(
+          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(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(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(
+                    Animated.View,
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: labelBottom,
+                        left: 0,
+                        right: 0,
+                        alignItems: "center",
+                        ...expandProgress ? { opacity: expandProgress } : null
+                      },
+                      pointerEvents: "none",
+                      children: /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          className: "text-text-secondary",
+                          style: [{ fontSize: valueLabelFontSize(height), fontWeight: "700" }, flipStyle],
+                          testID: `${testIDPrefix}-label-${repIndex}`,
+                          children: formatValue3(value)
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    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(
+      View,
+      {
+        style: { ...base, backgroundColor: VARIABLE_FILL },
+        testID: `${testIDPrefix}-slot-variable`
+      }
+    );
+  }
+  if (kind === "continue") {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { ...base, borderWidth: 1, borderColor: CONTINUE_OUTLINE },
+        testID: `${testIDPrefix}-slot-continue`
+      }
+    );
+  }
+  if (kind === "empty") {
+    return /* @__PURE__ */ jsx(
+      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(View, { style: todoStyle, testID: `${testIDPrefix}-slot-todo` });
+}
+function sideLabelFontSize(height) {
+  return Math.round(Math.max(7, Math.min(13, height * 0.06)));
+}
+var SIDE_LABEL_INITIALS_BELOW = 70;
+function sideLabelText(label, extent) {
+  if (extent >= SIDE_LABEL_INITIALS_BELOW) return label;
+  return label.trim().split(/\s+/).map((word) => word.charAt(0)).join(" ").toUpperCase();
+}
+function ChartSideRail({
+  sections,
+  sectionExtent,
+  variant = "hero"
+}) {
+  if (!sections.some((s) => s.label)) return null;
+  const isRail = variant === "rail";
+  const labelLength = Math.max(0, sectionExtent - (isRail ? 0 : 6));
+  const fontSize = isRail ? 7 : sideLabelFontSize(sectionExtent);
+  const textStyle = {
+    maxWidth: "100%",
+    textAlign: "center",
+    fontSize,
+    fontWeight: "700",
+    letterSpacing: isRail || fontSize < 10 ? 0 : 2,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsx(View, { style: { width: isRail ? 18 : 34 }, accessibilityElementsHidden: true, children: sections.map((s) => /* @__PURE__ */ jsx(
+    View,
+    {
+      style: { height: sectionExtent, alignItems: "center", justifyContent: "center" },
+      children: s.label ? /* @__PURE__ */ jsx(
         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(
-            Animated.View,
+          children: /* @__PURE__ */ jsx(
+            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(View, { style: fillStyle, accessibilityElementsHidden: true, testID })
-        },
-        i
-      );
-    }),
-    marker ? /* @__PURE__ */ jsx(
-      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(
-    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";
@@ -8847,6 +9098,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;
@@ -8856,15 +9119,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":
@@ -8880,7 +9145,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;
@@ -8894,7 +9159,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
         };
       });
     }
@@ -8905,7 +9170,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
         };
       });
     }
@@ -8913,16 +9178,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": {
@@ -8933,7 +9198,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
         };
       });
     }
@@ -8955,253 +9220,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] = useState(getReducedMotionPreference);
-  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(
+    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 = Easing.bezier(0.22, 1, 0.36, 1);
-var POP_EASING = Easing.bezier(0.34, 1.56, 0.64, 1);
-function useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const [liveScale] = useState(() => new Animated.Value(1));
-  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(
+    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);
-      Animated.sequence([
-        Animated.timing(liveScale, {
-          toValue: 1.25,
-          duration: 150,
-          easing: Easing.out(Easing.quad),
-          useNativeDriver: true
-        }),
-        Animated.spring(liveScale, {
-          toValue: 1,
-          friction: 3,
-          tension: 140,
-          useNativeDriver: true
-        })
-      ]).start();
-    } else {
-      liveScale.setValue(0.8);
-      Animated.timing(liveScale, {
-        toValue: 1,
-        duration: 300,
-        easing: POP_EASING,
-        useNativeDriver: true
-      }).start();
+  );
+  const threshold = (v, color, label) => /* @__PURE__ */ jsxs(
+    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(View, { style: { flex: 9, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } }),
+        showLabels ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                marginHorizontal: 6,
+                fontSize: vlFont,
+                fontWeight: "800",
+                fontFamily: BAND_LABEL_FONT,
+                color,
+                ...flip ? { transform: [{ scaleY: -1 }] } : null
+              },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { style: { flex: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } })
+        ] }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    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(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] = 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(
     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(
-        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(
-              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(
-                View,
-                {
-                  accessibilityElementsHidden: true,
-                  style: {
-                    flex: 1,
-                    maxWidth: HERO_BAR_MAX_WIDTH,
-                    height: "100%",
-                    alignItems: "center",
-                    justifyContent: "flex-end"
-                  },
-                  children: [
-                    showBarLabel(i) && /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        className: "text-text-primary",
-                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
-                        testID: `velocity-label-${i}`,
-                        children: formatVelocity(velocity)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      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(
-              View,
-              {
-                accessibilityElementsHidden: true,
-                style: {
-                  flex: 1,
-                  maxWidth: HERO_BAR_MAX_WIDTH,
-                  height: "100%",
-                  alignItems: "center",
-                  justifyContent: "flex-end"
-                },
-                children: /* @__PURE__ */ jsx(
-                  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(View, { style: { flex: 1, gap: DUAL_WING_GAP }, children: [
+          /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-up", children: wing("up", aligned.left, leftDone) }),
+          /* @__PURE__ */ jsx(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(
+    View,
+    {
+      className,
+      style: [{ height, flexDirection: "column", gap: DUAL_WING_GAP }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "dual-velocity-strip",
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-up", children: wing("up", aligned.left, leftDone) }),
+        /* @__PURE__ */ jsx(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(
+    View,
+    {
+      className,
+      style: [{ height, flexDirection: "column", gap: COMPACT_FOLD_GAP }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "dual-velocity-strip",
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, testID: "dual-velocity-wing-up", children: wing("up", aligned.left, leftDone) }),
+        /* @__PURE__ */ jsx(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,
@@ -9215,51 +9633,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] = useState(() => new Animated.Value(expanded ? height : 3));
-  const [labelOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0));
+  const [expandProgress] = useState(() => new Animated.Value(expanded ? 1 : 0));
   const [infoOpacity] = useState(() => new 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
-  );
   useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     Animated.parallel([
-      Animated.timing(heightAnim, {
-        toValue: expanded ? height : 3,
+      Animated.timing(expandProgress, {
+        toValue: expanded ? 1 : 0,
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
         useNativeDriver: false
       }),
-      Animated.timing(labelOpacity, {
-        toValue: expanded ? 1 : 0,
-        duration: 300,
-        delay: expanded ? 150 : 0,
-        useNativeDriver: false
-      }),
       Animated.timing(infoOpacity, {
         toValue: expanded ? 1 : 0,
         duration: 300,
@@ -9267,250 +9663,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(
-      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(
-          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(
-      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(
-          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(
-      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(Fragment, { children: [
+    showNumbers && /* @__PURE__ */ jsx(
+      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(
-          View,
+          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(
+      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(
     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(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(
-            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(
-            View,
-            {
-              style: barStyle,
-              testID: `velocity-bar-${i}`,
-              accessibilityRole: "image",
-              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
-            }
-          );
-          const bar = /* @__PURE__ */ jsxs(
-            View,
-            {
-              style: {
-                flex: 1,
-                height: "100%",
-                justifyContent: "flex-end",
-                position: "relative"
-              },
-              children: [
-                expanded && showNumbers && /* @__PURE__ */ jsx(
-                  Animated.View,
-                  {
-                    style: {
-                      opacity: labelOpacity,
-                      alignItems: "center",
-                      position: "absolute",
-                      top: -13,
-                      left: 0,
-                      right: 0
-                    },
-                    accessibilityElementsHidden: true,
-                    children: /* @__PURE__ */ jsx(
-                      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(
-              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
-            );
-          }
-          return bar;
-        }) }),
+        /* @__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"
+          }
+        ),
         expanded && showInfo && /* @__PURE__ */ jsxs(
           Animated.View,
           {
@@ -9518,10 +9840,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: [
@@ -9529,10 +9849,7 @@ function VelocityStrip({
                 Text,
                 {
                   className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif"
-                  },
+                  style: { fontSize: 10, fontFamily: "Inter, sans-serif" },
                   children: [
                     meanZone,
                     " ",
@@ -9547,11 +9864,7 @@ function VelocityStrip({
                 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,
@@ -9579,13 +9892,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,
@@ -9859,6 +10172,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
       }
@@ -9868,7 +10182,9 @@ function RowStrip({ set }) {
   return /* @__PURE__ */ jsx(
     VelocityStrip,
     {
-      variant: "mini",
+      variant: "compact",
+      height: 8,
+      hideBaseline: true,
       set: { type: "straight", velocities, planned: plannedReps(set) },
       zones
     }
@@ -10288,7 +10604,7 @@ function RestTimer({
     }
   );
 }
-var t7 = getSemanticColors("dark");
+var t8 = getSemanticColors("dark");
 var TIMES = "\xD7";
 var AT = "@";
 function SetsRepsLoad({
@@ -10300,8 +10616,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(
     View,
     {
@@ -10321,6 +10637,107 @@ function SetsRepsLoad({
     }
   );
 }
+var PULSE_HALF_MS = 950;
+var PULSE_MIN_OPACITY = 0.45;
+var SEGMENTED_BAR_GAP = 5;
+function usePulse2(active) {
+  const [value] = useState(() => new Animated.Value(0));
+  useEffect(() => {
+    if (!active) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(value, {
+          toValue: 1,
+          duration: PULSE_HALF_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: false
+        }),
+        Animated.timing(value, {
+          toValue: 0,
+          duration: PULSE_HALF_MS,
+          easing: Easing.inOut(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(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(
+        View,
+        {
+          style: {
+            flex: seg.weight ?? 1,
+            minWidth: 0,
+            height: "100%",
+            marginLeft: seg.leadingGap,
+            borderRadius: radius,
+            overflow: "hidden"
+          },
+          children: seg.pulse ? /* @__PURE__ */ jsx(
+            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(View, { style: fillStyle, accessibilityElementsHidden: true, testID })
+        },
+        i
+      );
+    }),
+    marker ? /* @__PURE__ */ jsx(
+      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) {
@@ -10414,14 +10831,148 @@ function ScheduleTiles({ when, now, gap = 1, ...props }) {
     )
   ] });
 }
-var t8 = getSemanticColors("dark");
+
+// 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"
+    }
+  );
+}
+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(
+    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: 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" }
+  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",
@@ -10716,7 +11267,9 @@ function CollapsedCard({
                 {
                   velocities,
                   zones: velocityZones,
-                  variant: "mini",
+                  variant: "compact",
+                  height: 8,
+                  hideBaseline: true,
                   testID: `exercise-card-velocity-strip-${i}`
                 },
                 i
@@ -11015,6 +11568,7 @@ function SessionRail({
   next,
   stripHeight = 8,
   width = DEFAULT_WIDTH,
+  expandedIndex,
   onExercisePress,
   className,
   style,
@@ -11055,11 +11609,28 @@ function SessionRail({
                   borderBottomWidth: i < exercises.length - 1 ? 1 : 0,
                   borderBottomColor: DIVIDER
                 },
-                children: /* @__PURE__ */ jsx(
-                  ExerciseCardHeading,
+                children: i === expandedIndex && ex.sets ? /* @__PURE__ */ jsx(
+                  ExerciseCard,
                   {
                     name: ex.name,
-                    sets: ex.summary.sets,
+                    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,
+                    sets: ex.summary.sets,
                     reps: ex.summary.reps,
                     load: ex.summary.weight,
                     unit: ex.summary.unit,
@@ -11083,7 +11654,7 @@ function SessionRail({
 var DEFAULTS = {
   label: "SS",
   color: getSemanticColors("dark")["brand-primary"],
-  bgBase: "#101010"
+  bgBase: getSemanticColors("dark")["background-base"]
 };
 function SupersetWrapper({
   label = DEFAULTS.label,
@@ -11342,10 +11913,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)"
 };
@@ -11829,12 +12400,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}"],
@@ -12024,13 +12595,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%)";
@@ -12401,8 +12972,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)}`;
@@ -12891,10 +13462,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)";
@@ -12937,8 +13508,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];
@@ -13268,13 +13839,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,
@@ -13457,7 +14028,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(
               View,
@@ -13488,7 +14059,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(
                 Text,
                 {
@@ -13544,14 +14115,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,
@@ -13674,7 +14245,7 @@ function VolumeLandmarkBar({
     }
   );
 }
-var t14 = getSemanticColors("dark");
+var t15 = getSemanticColors("dark");
 var statusToken = {
   productive: "status-success",
   threshold: "status-warning",
@@ -13691,7 +14262,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);
@@ -13724,7 +14295,7 @@ function StatusPill2({ status, label, className, style, ...props }) {
     }
   );
 }
-var t15 = getSemanticColors("dark");
+var t16 = getSemanticColors("dark");
 var categoryToken = {
   productive: null,
   threshold: "status-warning",
@@ -13737,7 +14308,7 @@ var floodOpacity = {
 };
 function liveAuraColor(category) {
   const token = categoryToken[category];
-  return token ? t15[token] : null;
+  return token ? t16[token] : null;
 }
 function LiveAuraFrame({
   category,
@@ -13766,9 +14337,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
       ],
@@ -13789,6 +14360,905 @@ function LiveAuraFrame({
     }
   );
 }
+function VelocityHero({
+  velocities,
+  targetReps,
+  liveRepIndex,
+  width,
+  height = 300
+}) {
+  return /* @__PURE__ */ jsx(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(View, { style: { gap: 6 }, testID: "verdict-hero", children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          fontSize: 9,
+          letterSpacing: 1.5,
+          fontFamily: FONT_MONO,
+          color: t18["text-tertiary"]
+        },
+        children: "FATIGUE"
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: { gap: 2 }, children: [
+      /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 7 }, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 62,
+              fontWeight: "900",
+              fontFamily: FONT_HEAD,
+              color: tone,
+              lineHeight: 60
+            },
+            accessibilityLabel: `RPE ${formatRpe(rpe)}`,
+            children: formatRpe(rpe)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: "800",
+              color: tone,
+              marginBottom: 9,
+              fontFamily: FONT_HEAD
+            },
+            children: "RPE"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(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(
+    View,
+    {
+      accessibilityLabel: `${detail}, ${word}`,
+      style: { flexDirection: "row", alignItems: "center", gap: 5 },
+      children: [
+        /* @__PURE__ */ jsx(StatusDot, { variant, size: "sm", glow: true }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: 9,
+              letterSpacing: 0.6,
+              fontFamily: FONT_MONO,
+              color: t19["text-secondary"]
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  ) });
+}
+function FatigueLights({ dimensions, spread = false }) {
+  return /* @__PURE__ */ jsxs(
+    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(Fragment, { children: [
+    shortThresholdM != null && /* @__PURE__ */ jsx(
+      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(
+      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(
+      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(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 = 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 = 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(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(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(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(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(View, { style: { gap: 12 }, children: [
+          /* @__PURE__ */ jsx(VerdictHero, { rpe: model.rpe, verdict: model.verdict }),
+          /* @__PURE__ */ jsx(FatigueLights, { dimensions: model.verdict?.dimensions ?? null })
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: { flex: 1, minHeight: 16 } }),
+        /* @__PURE__ */ jsx(
+          RomProgressionChart,
+          {
+            points: model.romProgression,
+            workingStandardM: model.romWorkingStandardM,
+            shortThresholdM: model.romShortThresholdM,
+            plannedReps: model.plannedReps
+          }
+        ),
+        /* @__PURE__ */ jsx(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(
+    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(View, { style: { gap: 2 }, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                fontSize: 28,
+                fontWeight: "700",
+                fontFamily: FONT_HEAD,
+                color: t24["text-primary"]
+              },
+              children: header.title
+            }
+          ),
+          header.subtitle && /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                fontSize: 13,
+                fontWeight: "600",
+                fontFamily: FONT_UI,
+                color: t24["text-secondary"]
+              },
+              children: header.subtitle
+            }
+          )
+        ] }),
+        header.meta && /* @__PURE__ */ jsx(
+          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(View, { style: { flex: 1 }, children: [
+        header && /* @__PURE__ */ jsx(ExerciseHeaderLite, { header }),
+        /* @__PURE__ */ jsxs(View, { style: { padding: 24, flexDirection: "row", gap: 18, alignItems: "stretch" }, children: [
+          /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              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(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(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(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;
@@ -13877,7 +15347,7 @@ function Treemap({
   const rects = squarify(weighted, width, height);
   return /* @__PURE__ */ jsx(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(
       Pressable,
@@ -13899,7 +15369,7 @@ function Treemap({
           padding: 4,
           overflow: "hidden"
         },
-        children: labelFits && /* @__PURE__ */ jsx(Text, { numberOfLines: 2, className: "text-[10px] font-semibold text-[#0b0b0b]", children: r.datum.label ?? r.datum.id })
+        children: labelFits2 && /* @__PURE__ */ jsx(Text, { numberOfLines: 2, className: "text-[10px] font-semibold text-[#0b0b0b]", children: r.datum.label ?? r.datum.id })
       },
       r.datum.id
     );
@@ -13995,28 +15465,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(
               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(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(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(
               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(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(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t26) })
               },
               `x-${i}`
             );
@@ -14089,7 +15559,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));
 }
@@ -14134,7 +15604,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);
@@ -14151,23 +15621,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t16) => /* @__PURE__ */ jsx(
+        ticks.map((t26) => /* @__PURE__ */ jsx(
           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(View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -14587,6 +16057,6 @@ function composeValidators(...validators) {
   };
 }
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActivityIcon, Alert, AlertDescription, AlertTitle, AlertTriangleIcon, Autocomplete, Avatar, AvatarBadge, AvatarGroup, AwardIcon, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircleSlashIcon, CircularProgress, CircularTimer, Collapse, CollapseButton, CollapseContent, DashboardShell, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DumbbellIcon, EmptyState, ExerciseCard, ExerciseCardHeading, ExerciseHeading, ExerciseIndicator, FatigueMeter, FormActions, FormField, FormRow, FormSection, Gauge2 as Gauge, HStack, Heading, HelpTip, HistoryIcon, INDICATOR_PRECEDENCE, IconBox, Indicator, InfoIcon, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, LayersIcon, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, LiveAuraFrame, METRIC_FONT, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricCell, MetricGroup, MetricTiles, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, NavItem, Overline, Paragraph, PasswordInput, PersonStandingIcon, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, SET_STRIP_VARIABLE_COLOR, SET_STRIP_ZONES, SURFACE_LEVEL_TOKEN, ScaleIcon, Scatter, ScheduleTiles, Section, SectionContent, SectionHeader, SegmentedBar, SegmentedProgressBar, Select, SessionHeader, SessionRail, SessionStatePill, SetBar, SetRow, SetStrip, SetTableHeader, SetsRepsLoad, SideNav, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StatusPill2 as StatusPill, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SurfaceContext, SvgIcon, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Tile, TimerReadout, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, TrendingDownIcon, Typography, VStack, VelocityStrip, VoltrasMark, VolumeLandmarkBar, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, ZoneTrack, alpha, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultNavItems, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatDuration, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getResultColor, getSemanticColors, getStatusColor, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, neumorphicShadows, onSurfaceColors, paceTone, paceToneColor, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, statusPillColor, surfaceBackground, surfaceGradient, useOnSurfaceColor, useSurface, useSurfaceMode, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActivityIcon, Alert, AlertDescription, AlertTitle, AlertTriangleIcon, Autocomplete, Avatar, AvatarBadge, AvatarGroup, AwardIcon, BAND_GAP, BAND_H, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircleSlashIcon, CircularProgress, CircularTimer, Collapse, CollapseButton, CollapseContent, DRIFT_GREY, DashboardShell, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DualGhostSpark, DualVelocityStrip, DumbbellIcon, EmptyState, ExerciseCard, ExerciseCardHeading, ExerciseHeading, ExerciseIndicator, FatigueLights, FatigueMeter, FormActions, FormField, FormRow, FormSection, GRIND_THRESHOLD, Gauge2 as Gauge, GhostBand, GhostBloom, GhostSpark, HStack, Heading, HelpTip, HistoryIcon, INDICATOR_PRECEDENCE, IconBox, Indicator, InfoIcon, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, LayersIcon, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, LiveAuraFrame, LiveFatigueCard, LiveFatiguePanel, METRIC_FONT, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricCell, MetricGroup, MetricTiles, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, NavItem, Overline, PHASE_AXIS_COLOR, PRESSED_ELEVATION_LEVEL, Paragraph, PasswordInput, PersonStandingIcon, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, RED_DEEP, RED_LIGHT, RED_MID, Radio, RadioGroup, ReadinessCheck, RestTimer, RomProgressionChart, SET_STRIP_VARIABLE_COLOR, SET_STRIP_ZONES, SILVER, STATE_LABEL, SURFACE_LEVEL_TOKEN, ScaleIcon, Scatter, ScheduleTiles, Section, SectionContent, SectionHeader, SegmentedBar, SegmentedProgressBar, Select, SessionHeader, SessionRail, SessionStatePill, SetBar, SetRow, SetStrip, SetTableHeader, SetsRepsLoad, SideNav, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StatusPill2 as StatusPill, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SurfaceContext, SvgIcon, Switch, TONE_COLOR, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Tile, TimerReadout, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, TrendingDownIcon, Typography, VStack, VelocityHero, VelocityStrip, VerdictHero, VoltrasMark, VolumeLandmarkBar, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, ZoneTrack, alpha, applyThemePreset, audiobookPreset, auraForVerdict, backgroundFrameDark, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultNavItems, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatDuration, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getPressedRecessShadow, getResultColor, getSemanticColors, getStatusColor, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, ghostLineColor, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, mergePhaseSegments, neumorphicShadows, onSurfaceColors, paceTone, paceToneColor, pressedLevel, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, smoothPath, statusPillColor, surfaceBackground, surfaceGradient, surfaceRampDark, useOnSurfaceColor, useSurface, useSurfaceMode, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map