@titan-design/react-ui 0.6.0 → 0.8.0

package/dist/index.js

@@ -82,6 +82,72 @@ function DumbbellIcon(props) {
 function StarIcon(props) {
   return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }) });
 }
+function ActivityIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) });
+}
+function HistoryIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7v5l4 2" })
+  ] });
+}
+function LayersIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m6.08 9.5-3.49 1.59a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59" }),
+    /* @__PURE__ */ jsx("path", { d: "m6.08 14.5-3.49 1.59a1 1 0 0 0 0 1.81l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9a1 1 0 0 0 0-1.83l-3.5-1.59" })
+  ] });
+}
+function PersonStandingIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 20 3-6 3 6" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 8 6 2 6-2" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 10v4" })
+  ] });
+}
+function ScaleIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 21h10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
+  ] });
+}
+function AlertTriangleIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+  ] });
+}
+function TrendingDownIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 17h6v-6" }),
+    /* @__PURE__ */ jsx("path", { d: "m22 17-8.5-8.5-5 5L2 7" })
+  ] });
+}
+function CircleSlashIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 15 6-6" })
+  ] });
+}
+function AwardIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "6" })
+  ] });
+}
+function InfoIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+  ] });
+}
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -92,6 +158,7 @@ var statusColors = {
     subtle: "bg-status-success-subtle",
     outline: "border-2 border-status-success bg-transparent",
     solid: "bg-status-success",
+    border: "border-status-success",
     icon: "text-status-success",
     text: "text-status-success"
   },
@@ -99,6 +166,7 @@ var statusColors = {
     subtle: "bg-status-info-subtle",
     outline: "border-2 border-status-info bg-transparent",
     solid: "bg-status-info",
+    border: "border-status-info",
     icon: "text-status-info",
     text: "text-status-info"
   },
@@ -106,6 +174,7 @@ var statusColors = {
     subtle: "bg-status-warning-subtle",
     outline: "border-2 border-status-warning bg-transparent",
     solid: "bg-status-warning",
+    border: "border-status-warning",
     icon: "text-status-warning",
     text: "text-status-warning"
   },
@@ -113,6 +182,7 @@ var statusColors = {
     subtle: "bg-status-error-subtle",
     outline: "border-2 border-status-error bg-transparent",
     solid: "bg-status-error",
+    border: "border-status-error",
     icon: "text-status-error",
     text: "text-status-error"
   }
@@ -126,6 +196,8 @@ var defaultIcons = {
 function Alert({
   status = "info",
   variant = "subtle",
+  size = "default",
+  message,
   icon,
   showIcon = true,
   onClose,
@@ -135,28 +207,43 @@ function Alert({
 }) {
   const colors = statusColors[status];
   const isSolid = variant === "solid";
+  const isCompact = size === "compact";
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       accessibilityRole: "alert",
       className: cn(
-        "flex-row items-start p-4 rounded-lg",
+        isCompact ? "flex-row items-center px-3 py-2 rounded-lg" : "flex-row items-start p-4 rounded-lg",
         colors[variant],
+        // A compact `subtle` pill gets a hairline status border so it reads as a
+        // defined cue on a dark wall (the CueFlag look); other variants carry their own.
+        isCompact && variant === "subtle" && cn("border", colors.border),
         className
       ),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx(reactNative.View, { className: "mr-3 mt-0.5", children: icon || /* @__PURE__ */ jsx(
+        showIcon && /* @__PURE__ */ jsx(reactNative.View, { className: isCompact ? "mr-2" : "mr-3 mt-0.5", children: icon || /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             className: cn(
-              "text-lg font-bold",
+              "font-bold",
+              isCompact ? "text-base" : "text-lg",
               isSolid ? "text-white" : colors.icon
             ),
             children: defaultIcons[status]
           }
         ) }),
-        /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", children }),
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-1", children: [
+          message != null && /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: cn("text-sm font-semibold", isSolid ? "text-white" : colors.text),
+              testID: "alert-message",
+              children: message
+            }
+          ),
+          children
+        ] }),
         onClose && /* @__PURE__ */ jsx(
           reactNative.Pressable,
           {
@@ -180,7 +267,7 @@ function AlertDescription({ children, className }) {
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  // Blue scale (primary brand)
+  // Blue scale
   blue: {
     50: "#EFF6FF",
     100: "#DBEAFE",
@@ -189,124 +276,36 @@ var primitiveColors = {
     400: "#60A5FA",
     500: "#3B82F6",
     600: "#5048E5",
-    // Primary main
     700: "#3832A0",
-    // Primary dark
     800: "#1E40AF",
     900: "#1E3A8A"
   },
-  // Green scale (secondary brand)
-  green: {
-    50: "#ECFDF5",
-    100: "#D1FAE5",
-    200: "#A7F3D0",
-    300: "#6EE7B7",
-    400: "#3FC79A",
-    // Secondary light
-    500: "#10B981",
-    // Secondary main
-    600: "#059669",
-    700: "#0B815A",
-    // Secondary dark
-    800: "#065F46",
-    900: "#064E3B"
-  },
-  // Teal scale (success)
-  teal: {
-    50: "#F0FDFA",
-    100: "#CCFBF1",
-    200: "#99F6E4",
-    300: "#5EEAD4",
-    400: "#43C6B7",
-    // Success light
-    500: "#14B8A6",
-    // Success main
-    600: "#0D9488",
-    700: "#0E8074",
-    // Success dark
-    800: "#115E59",
-    900: "#134E4A"
-  },
-  // Red scale (error)
+  // Red scale
   red: {
     50: "#FEF2F2",
     100: "#FEE2E2",
     200: "#FECACA",
     300: "#FCA5A5",
     400: "#DA6868",
-    // Error light
     500: "#EF4444",
     600: "#D14343",
-    // Error main
     700: "#922E2E",
-    // Error dark
     800: "#991B1B",
     900: "#7F1D1D"
   },
-  // Vivid green scale (live/go success)
-  greenVivid: {
-    50: "#E9FBF0",
-    100: "#C8F7DA",
-    200: "#9FF0BF",
-    300: "#6BE79D",
-    400: "#47DE84",
-    // Success vivid light
-    500: "#2ED573",
-    // Success vivid main
-    600: "#22B85F",
-    700: "#1A9950",
-    // Success vivid dark
-    800: "#157A40",
-    900: "#105C30"
-  },
-  // Vivid red scale (alert)
+  // Vivid red scale
   redVivid: {
     50: "#FFECEE",
     100: "#FFD6DB",
     200: "#FFB3BC",
     300: "#FF8593",
     400: "#FF6070",
-    // Error vivid light
     500: "#FF4757",
-    // Error vivid main
     600: "#E63548",
     700: "#C42539",
-    // Error vivid dark
     800: "#9E1C2C",
     900: "#7A1520"
   },
-  // Amber scale (warning)
-  amber: {
-    50: "#FFFBEB",
-    100: "#FEF3C7",
-    200: "#FDE68A",
-    300: "#FCD34D",
-    400: "#FFBF4C",
-    // Warning light
-    500: "#FFB020",
-    // Warning main
-    600: "#B27B16",
-    // Warning dark
-    700: "#B45309",
-    800: "#92400E",
-    900: "#78350F"
-  },
-  // Sky/Blue scale (info)
-  sky: {
-    50: "#F0F9FF",
-    100: "#E0F2FE",
-    200: "#BAE6FD",
-    300: "#7DD3FC",
-    400: "#64B6F7",
-    // Info light
-    500: "#2196F3",
-    // Info main
-    600: "#0284C7",
-    700: "#0B79D0",
-    // Info dark
-    800: "#075985",
-    900: "#0C4A6E"
-  },
   // Neutral/Gray scale
   neutral: {
     50: "#FAFAFA",
@@ -321,18 +320,6 @@ var primitiveColors = {
     900: "#111827",
     950: "#030712"
   },
-  // Orange scale (accent/brand color)
-  accent: {
-    100: "#FFA860",
-    200: "#FF9630",
-    300: "#FF8500",
-    400: "#FF7900",
-    500: "#F56C00",
-    600: "#E06D10",
-    700: "#D0620C",
-    800: "#B75500",
-    900: "#A34900"
-  },
   // Charcoal scale (dark backgrounds)
   charcoal: {
     0: "#6E6E6E",
@@ -347,18 +334,6 @@ var primitiveColors = {
     800: "#131313",
     900: "#101010"
   },
-  // Steel scale (cool accent)
-  steel: {
-    100: "#8AA4B8",
-    200: "#7894A8",
-    300: "#678498",
-    400: "#557488",
-    500: "#406D87",
-    600: "#39617A",
-    700: "#32556D",
-    800: "#243D53",
-    900: "#1D3146"
-  },
   // Pure colors
   white: "#FFFFFF",
   black: "#000000",
@@ -749,6 +724,9 @@ var semanticColorsLight = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": primitiveRamps.green[50],
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
   "status-error": primitiveRamps.red[600],
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
@@ -882,6 +860,9 @@ var semanticColorsDark = {
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
   "status-error": primitiveRamps.red[600],
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
@@ -1476,6 +1457,8 @@ var lightThemeCSSVars = {
   "--color-on-brand-secondary": semanticColorsLight["on-brand-secondary"],
   "--color-status-success": semanticColorsLight["status-success"],
   "--color-status-success-subtle": semanticColorsLight["status-success-subtle"],
+  "--color-status-live": semanticColorsLight["status-live"],
+  "--color-status-live-muted": semanticColorsLight["status-live-muted"],
   "--color-status-error": semanticColorsLight["status-error"],
   "--color-status-error-subtle": semanticColorsLight["status-error-subtle"],
   "--color-status-warning": semanticColorsLight["status-warning"],
@@ -1572,6 +1555,8 @@ var darkThemeCSSVars = {
   "--color-on-brand-secondary": semanticColorsDark["on-brand-secondary"],
   "--color-status-success": semanticColorsDark["status-success"],
   "--color-status-success-subtle": semanticColorsDark["status-success-subtle"],
+  "--color-status-live": semanticColorsDark["status-live"],
+  "--color-status-live-muted": semanticColorsDark["status-live-muted"],
   "--color-status-error": semanticColorsDark["status-error"],
   "--color-status-error-subtle": semanticColorsDark["status-error-subtle"],
   "--color-status-warning": semanticColorsDark["status-warning"],
@@ -2789,6 +2774,7 @@ var colorStyles = {
   default: "bg-text-tertiary",
   primary: "bg-brand-primary",
   success: "bg-status-success",
+  live: "bg-status-live",
   error: "bg-status-error",
   warning: "bg-status-warning",
   info: "bg-status-info",
@@ -2845,7 +2831,7 @@ function Indicator({
         colorClass,
         pulseMode === "opacity" && "animate-pulse",
         ring && "border-2 border-background-base",
-        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
+        glow && !customColor && (color === "success" || color === "live") && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
         glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
         glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
         glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
@@ -5107,6 +5093,8 @@ function CircularProgress({
   color = "primary",
   showValue = false,
   formatValue: formatValue3 = (v, m) => `${Math.round(v / m * 100)}%`,
+  children,
+  fill = false,
   className,
   ...props
 }) {
@@ -5115,11 +5103,12 @@ function CircularProgress({
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference - percentage / 100 * circumference;
   const center = size / 2;
+  const boxStyle = fill ? { width: "100%", aspectRatio: 1 } : { width: size, height: size };
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
       className: cn("items-center justify-center", className),
-      style: { width: size, height: size },
+      style: boxStyle,
       accessibilityRole: "progressbar",
       accessibilityValue: {
         min: 0,
@@ -5128,52 +5117,56 @@ function CircularProgress({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(reactNative.View, { className: cn(isIndeterminate && "animate-spin"), style: boxStyle, children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${size} ${size}`,
+            style: { position: "absolute" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: "var(--color-border-default)",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: colorVarMap[color],
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: isIndeterminate ? circumference * 0.75 : strokeDashoffset,
+                  transform: `rotate(-90 ${center} ${center})`,
+                  style: { transition: "stroke-dashoffset 300ms cubic-bezier(0.22, 1, 0.36, 1)" }
+                }
+              )
+            ]
+          }
+        ) }),
+        children != null ? /* @__PURE__ */ jsx(
           reactNative.View,
           {
-            className: cn(isIndeterminate && "animate-spin"),
-            style: { width: size, height: size },
-            children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                width: size,
-                height: size,
-                viewBox: `0 0 ${size} ${size}`,
-                style: { position: "absolute" },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      cx: center,
-                      cy: center,
-                      r: radius,
-                      fill: "none",
-                      stroke: "var(--color-border-default)",
-                      strokeWidth
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      cx: center,
-                      cy: center,
-                      r: radius,
-                      fill: "none",
-                      stroke: colorVarMap[color],
-                      strokeWidth,
-                      strokeLinecap: "round",
-                      strokeDasharray: circumference,
-                      strokeDashoffset: isIndeterminate ? circumference * 0.75 : strokeDashoffset,
-                      transform: `rotate(-90 ${center} ${center})`,
-                      style: { transition: "stroke-dashoffset 300ms cubic-bezier(0.22, 1, 0.36, 1)" }
-                    }
-                  )
-                ]
-              }
-            )
+            style: {
+              position: "absolute",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none"
+            },
+            children
           }
-        ),
-        showValue && !isIndeterminate && /* @__PURE__ */ jsx(
+        ) : showValue && !isIndeterminate && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             className: "text-xs font-semibold text-text-primary absolute",
@@ -5269,7 +5262,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = React24.useCallback((id) => {
-    setToasts((prev) => prev.filter((t12) => t12.id !== id));
+    setToasts((prev) => prev.filter((t18) => t18.id !== id));
   }, []);
   const removeAllToasts = React24.useCallback(() => {
     setToasts([]);
@@ -6138,6 +6131,50 @@ function Pill({
   }
   return /* @__PURE__ */ jsx(reactNative.View, { className: containerClasses, ...props, children: content });
 }
+function Tile({
+  label,
+  value,
+  valueColor,
+  align = "center",
+  className,
+  ...props
+}) {
+  const isCenter = align === "center";
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className: cn(
+        "flex-1 rounded-md bg-surface-raised px-1.5 py-2",
+        isCenter ? "items-center" : "items-start",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: cn(
+              "text-[10px] font-bold uppercase tracking-wider text-text-tertiary",
+              isCenter ? "text-center" : "text-left"
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: cn(
+              "mt-0.5 font-mono text-sm font-bold text-text-primary",
+              isCenter ? "text-center" : "text-left"
+            ),
+            style: valueColor ? { color: valueColor } : void 0,
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
 var variantStyles4 = {
   h1: "font-heading text-5xl font-bold leading-tight",
   h2: "font-heading text-4xl font-bold leading-tight",
@@ -6997,6 +7034,143 @@ function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-
   }
   return formatDate(value, format, isUTC);
 }
+function formatDuration(ms) {
+  const totalSeconds = Math.max(0, Math.ceil(ms / 1e3));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function useTimer(options = {}) {
+  const {
+    mode = "up",
+    durationMs,
+    elapsedMs: controlledElapsedMs,
+    running = false,
+    autoTick = false,
+    tickMs = 1e3
+  } = options;
+  const isControlled = controlledElapsedMs != null;
+  const [internalElapsedMs, setInternalElapsedMs] = React24.useState(0);
+  React24.useEffect(() => {
+    if (isControlled || !autoTick || !running) return;
+    const id = setInterval(() => {
+      setInternalElapsedMs((prev) => prev + tickMs);
+    }, tickMs);
+    return () => clearInterval(id);
+  }, [isControlled, autoTick, running, tickMs]);
+  const elapsedMs = isControlled ? controlledElapsedMs : internalElapsedMs;
+  const hasDuration = durationMs != null && durationMs > 0;
+  const remainingMs = durationMs != null ? Math.max(0, durationMs - elapsedMs) : 0;
+  let progress;
+  if (hasDuration) {
+    progress = Math.min(1, Math.max(0, elapsedMs / durationMs));
+  } else {
+    progress = mode === "down" ? 1 : 0;
+  }
+  const label = formatDuration(mode === "down" ? remainingMs : elapsedMs);
+  const done = durationMs != null && elapsedMs >= durationMs;
+  return { elapsedMs, remainingMs, progress, label, done };
+}
+
+// src/components/custom/TimerReadout/TimerReadout.tsx
+var semantic = getSemanticColors("dark");
+var LIVE_GREEN = primitiveRamps.green[500];
+var SECONDARY = semantic["text-secondary"];
+var TERTIARY = semantic["text-tertiary"];
+var DEFAULT_GLYPH = "\u23F1";
+function TimerReadout({
+  mode = "up",
+  elapsedMs,
+  durationMs,
+  running = false,
+  autoTick = false,
+  showTotal = false,
+  glyph = DEFAULT_GLYPH,
+  className,
+  ...rest
+}) {
+  const { label } = useTimer({ mode, durationMs, elapsedMs, running, autoTick });
+  const currentColor = running ? LIVE_GREEN : SECONDARY;
+  const total = showTotal && durationMs != null ? formatDuration(durationMs) : null;
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      accessibilityRole: "timer",
+      accessibilityLabel: total != null ? `${label} of ${total}` : label,
+      className: cn("flex-row items-baseline justify-end", className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(Typography, { variant: "mono", style: { fontSize: 11, textAlign: "right" }, children: [
+        /* @__PURE__ */ jsx(reactNative.Text, { testID: "timer-readout-glyph", style: { color: currentColor, marginRight: 3 }, children: glyph }),
+        /* @__PURE__ */ jsx(reactNative.Text, { testID: "timer-readout-current", style: { color: currentColor }, children: label }),
+        total != null ? /* @__PURE__ */ jsx(reactNative.Text, { testID: "timer-readout-total", style: { color: TERTIARY }, children: ` / ${total}` }) : null
+      ] })
+    }
+  );
+}
+function CircularTimer({
+  durationMs,
+  elapsedMs,
+  mode = "down",
+  size = 160,
+  strokeWidth = 8,
+  fill = false,
+  color = "primary",
+  doneLabel,
+  doneColor = "success",
+  controls,
+  accessibilityLabel: accessibilityLabel2,
+  testID
+}) {
+  const { remainingMs, progress, label, done } = useTimer({ mode, durationMs, elapsedMs });
+  const isDone = done && mode === "down";
+  const showDone = isDone && doneLabel != null;
+  const remainingFrac = durationMs > 0 ? Math.max(0, Math.min(1, remainingMs / durationMs)) : 0;
+  const arc = mode === "down" ? showDone ? 1 : remainingFrac : progress;
+  const ringColor = showDone ? doneColor : color;
+  const remainingSec = Math.ceil(Math.max(0, remainingMs) / 1e3);
+  const a11y = accessibilityLabel2 ?? (isDone ? "Timer complete" : `${remainingSec} seconds remaining`);
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { alignItems: "center", gap: 16 },
+      accessibilityRole: "timer",
+      accessibilityLabel: a11y,
+      testID: testID ?? "circular-timer",
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            value: arc,
+            max: 1,
+            size,
+            strokeWidth,
+            fill,
+            color: ringColor,
+            accessibilityLabel: "Timer ring",
+            testID: "circular-timer-ring",
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: showDone ? void 0 : "text-text-primary",
+                style: {
+                  fontSize: Math.round(size * (showDone ? 0.28 : 0.24)),
+                  fontFamily: '"Space Grotesk", sans-serif',
+                  fontWeight: "800",
+                  fontVariant: ["tabular-nums"],
+                  letterSpacing: showDone ? 1 : -1,
+                  ...showDone ? { color: colorVarMap[doneColor] } : null
+                },
+                testID: "circular-timer-label",
+                children: showDone ? doneLabel : label
+              }
+            )
+          }
+        ),
+        controls
+      ]
+    }
+  );
+}
 var sizeConfig2 = {
   sm: { value: "text-lg font-bold", label: "text-xs", unit: "text-xs" },
   md: { value: "text-2xl font-bold", label: "text-xs", unit: "text-sm" },
@@ -7426,15 +7600,22 @@ var WORKOUT_TOKENS = {
   // Canonical 4-band performance scale — the single source for BOTH the
   // VelocityStrip zone bars and the SetRow RPE color (TD-03.43). The direction
   // is intentionally inverted between the two consumers: for velocity, green =
-  // fastest/best; for RPE, green = easiest. This is the [0,1,2,4] subsample of
-  // the canonical `sequentialEffort` primitive. The `orange` key is the band
-  // label. Consumed inline (RN).
+  // fastest/best; for RPE, green = easiest. This is the [0,2,3,4] subsample of
+  // the canonical `sequentialEffort` primitive: an EVEN hue walk across the ramp
+  // (green → gold → orange → red). The earlier [0,1,2,4] spent two of its four
+  // bands on adjacent yellows (amber-200 + amber-300) and skipped orange, reading
+  // yellow-heavy with an abrupt jump to red; sampling amber-300 + orange-400
+  // instead gives four cleanly separable bands that hold at 3px strip scale.
+  // Consumed inline (RN).
   scale: {
     green: sequentialEffort[0],
-    yellow: sequentialEffort[1],
-    orange: sequentialEffort[2],
-    // gold band
+    // green-300
+    yellow: sequentialEffort[2],
+    // amber-300 (gold)
+    orange: sequentialEffort[3],
+    // orange-400 (true orange)
     red: sequentialEffort[4]
+    // red-600
   },
   // BodyMap volume heatmap — the canonical `divergingScale` (under → optimal →
   // over): a true diverging shape with a light green center, cool-blue under-
@@ -7559,8 +7740,8 @@ function roundTempo(tempo) {
   return tempo.map((v) => Math.round(v * 10) / 10);
 }
 function formatSignedPct(ratio) {
-  const pct = Math.round(ratio * 100);
-  return `${pct > 0 ? "+" : ""}${pct}%`;
+  const pct2 = Math.round(ratio * 100);
+  return `${pct2 > 0 ? "+" : ""}${pct2}%`;
 }
 function formatPrescription(p) {
   if (p == null) return null;
@@ -7640,6 +7821,11 @@ var TEMPO_PACING = {
   behindThresholdPct: 0.15,
   minPhaseDurationMs: 500
 };
+function formatTempoDelta(remainingMs) {
+  const s = remainingMs / 1e3;
+  const rounded = Math.abs(s) < 0.05 ? 0 : s;
+  return rounded.toFixed(1);
+}
 function getTempoPacingState(elapsedMs, targetMs) {
   if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return "none";
   const ratio = elapsedMs / targetMs;
@@ -7652,24 +7838,33 @@ function getTempoFillPct(elapsedMs, targetMs) {
 }
 var PHASE_ORDER = ["concentric", "hold", "eccentric"];
 var PHASE_CONFIG = {
-  concentric: { label: "Con", color: t2["status-success"], flex: 2 },
-  hold: { label: "Hold", color: t2["brand-primary"], flex: 1 },
-  eccentric: { label: "Ecc", color: t2["status-warning"], flex: 3 }
+  concentric: { label: "Con", wallLabel: "Concentric", color: t2["status-success"], flex: 2 },
+  hold: { label: "Hold", wallLabel: "Hold", color: t2["brand-primary"], flex: 1 },
+  eccentric: { label: "Ecc", wallLabel: "Eccentric", color: t2["status-warning"], flex: 3 }
+};
+var TEMPO_SIZES = {
+  default: { labelMargin: 4, labelFont: 10, barGap: 2, barHeight: 20, radius: 4, segFont: 12 },
+  wall: { labelMargin: 8, labelFont: 15, barGap: 4, barHeight: 40, radius: 6, segFont: 22 }
 };
 function TempoBar({
   activePhase,
   phaseElapsedMs,
   completed,
   target,
+  size = "default",
+  activeDisplay = "time",
   className,
   ...props
 }) {
+  const s = TEMPO_SIZES[size];
+  const [display, setDisplay] = React24.useState(activeDisplay);
+  const toggleDisplay = () => setDisplay((d) => d === "time" ? "delta" : "time");
   return /* @__PURE__ */ jsxs(reactNative.View, { className, testID: "tempo-bar", ...props, children: [
-    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: 4 }, children: PHASE_ORDER.map((phase) => {
+    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: s.labelMargin }, children: PHASE_ORDER.map((phase) => {
       const config = PHASE_CONFIG[phase];
-      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, color: t2["text-disabled"] }, children: config.label }) }, phase);
+      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 1, style: { fontSize: s.labelFont, color: t2["text-disabled"] }, children: size === "wall" ? config.wallLabel : config.label }) }, phase);
     }) }),
-    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", gap: 2, height: 20 }, children: PHASE_ORDER.map((phase) => {
+    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", gap: s.barGap, height: s.barHeight }, children: PHASE_ORDER.map((phase) => {
       const config = PHASE_CONFIG[phase];
       const isActive = activePhase === phase;
       const completedMs = completed?.[phase];
@@ -7681,7 +7876,7 @@ function TempoBar({
           style: {
             flex: config.flex,
             backgroundColor: alpha("#ffffff", 0.06),
-            borderRadius: 4,
+            borderRadius: s.radius,
             overflow: "hidden"
           },
           children: isActive ? /* @__PURE__ */ jsx(
@@ -7689,9 +7884,21 @@ function TempoBar({
             {
               config,
               phaseElapsedMs,
-              targetMs
+              targetMs,
+              radius: s.radius,
+              font: s.segFont,
+              display,
+              onToggleDisplay: toggleDisplay
+            }
+          ) : completedMs != null ? /* @__PURE__ */ jsx(
+            CompletedSegment,
+            {
+              config,
+              completedMs,
+              targetMs,
+              font: s.segFont
             }
-          ) : completedMs != null ? /* @__PURE__ */ jsx(CompletedSegment, { config, completedMs, targetMs }) : null
+          ) : null
         },
         phase
       );
@@ -7701,49 +7908,65 @@ function TempoBar({
 function ActiveSegment({
   config,
   phaseElapsedMs,
-  targetMs
+  targetMs,
+  radius,
+  font,
+  display,
+  onToggleDisplay
 }) {
   const pacing = getTempoPacingState(phaseElapsedMs, targetMs);
   const barColor = pacing === "behind" ? t2["status-error"] : config.color;
   const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
-  const label = targetMs ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}` : formatDuration(phaseElapsedMs);
-  return /* @__PURE__ */ jsxs(reactNative.View, { style: { height: "100%", position: "relative" }, testID: `tempo-segment-active-${config.label}`, children: [
-    /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${fillPct}%`,
-          backgroundColor: alpha(barColor, 0.3),
-          borderRadius: 4
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        style: {
-          height: "100%",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, fontWeight: "700", color: barColor }, children: label })
-      }
-    )
-  ] });
+  const label = display === "delta" && targetMs != null ? formatTempoDelta(targetMs - phaseElapsedMs) : targetMs != null ? `${formatDuration2(phaseElapsedMs)} / ${formatDuration2(targetMs)}` : formatDuration2(phaseElapsedMs);
+  return /* @__PURE__ */ jsxs(
+    reactNative.Pressable,
+    {
+      onPress: onToggleDisplay,
+      style: { height: "100%", position: "relative" },
+      accessibilityRole: "button",
+      accessibilityLabel: `Tempo readout: ${display === "delta" ? "delta" : "time"} \u2014 tap to switch`,
+      testID: `tempo-segment-active-${config.label}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: `${fillPct}%`,
+              backgroundColor: alpha(barColor, 0.3),
+              borderRadius: radius
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              height: "100%",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: font, fontWeight: "700", color: barColor }, children: label })
+          }
+        )
+      ]
+    }
+  );
 }
 function CompletedSegment({
   config,
   completedMs,
-  targetMs
+  targetMs,
+  font
 }) {
   const pacing = getTempoPacingState(completedMs, targetMs);
   const hitTarget = pacing !== "behind";
   const indicator = targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? hitTarget ? " \u2713" : " \u2717" : "";
+  const cueColor = hitTarget ? config.color : t2["status-error"];
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
@@ -7752,20 +7975,46 @@ function CompletedSegment({
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        backgroundColor: alpha(config.color, 0.15)
+        backgroundColor: alpha(cueColor, 0.15)
       },
       testID: `tempo-segment-completed-${config.label}`,
-      children: /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 12, fontWeight: "500", color: alpha(config.color, 0.7) }, children: [
-        formatDuration(completedMs),
-        indicator
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: font,
+            fontWeight: "500",
+            color: hitTarget ? alpha(config.color, 0.7) : cueColor
+          },
+          children: [
+            formatDuration2(completedMs),
+            indicator
+          ]
+        }
+      )
     }
   );
 }
-function formatDuration(ms) {
+function formatDuration2(ms) {
   const s = ms / 1e3;
   return s < 10 ? s.toFixed(1) : Math.round(s).toString();
 }
+var METRIC_FONT = "Inter, sans-serif";
+function MetricCell({ children, color, fontSize = 11 }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.Text,
+    {
+      style: {
+        fontFamily: METRIC_FONT,
+        fontSize,
+        color,
+        fontWeight: "600",
+        letterSpacing: 1
+      },
+      children
+    }
+  );
+}
 
 // src/components/custom/Workout/TempoDisplay.tsx
 var t3 = getSemanticColors("dark");
@@ -7784,34 +8033,10 @@ function TempoValue({
   color,
   fontSize
 }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.Text,
-    {
-      style: {
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children: value
-    }
-  );
+  return /* @__PURE__ */ jsx(MetricCell, { color, fontSize, children: value });
 }
 function TempoSeparator({ color, fontSize }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.Text,
-    {
-      style: {
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children: "-"
-    }
-  );
+  return /* @__PURE__ */ jsx(MetricCell, { color, fontSize, children: "-" });
 }
 var LIVE_PHASES = [
   { key: "eccentric", color: phaseColors.eccentric },
@@ -7873,6 +8098,7 @@ function TempoDisplay({
   tempo,
   size = "md",
   colored = true,
+  showLabel = true,
   showInfo = true,
   live,
   onPress,
@@ -7906,7 +8132,7 @@ function TempoDisplay({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
+        showLabel && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             style: {
@@ -8134,12 +8360,12 @@ var ZONE = {
   // severe over-target
 };
 var BULGE_SIZE = { 1: 8, 2: 10, 3: 11 };
-function zoneForPct(pct) {
-  if (pct >= 125) return { color: ZONE.over3, over: 3 };
-  if (pct >= 115) return { color: ZONE.over2, over: 2 };
-  if (pct > 100) return { color: ZONE.over1, over: 1 };
-  if (pct === 100) return { color: ZONE.target, over: 0 };
-  if (pct >= 75) return { color: ZONE.approaching, over: 0 };
+function zoneForPct(pct2) {
+  if (pct2 >= 125) return { color: ZONE.over3, over: 3 };
+  if (pct2 >= 115) return { color: ZONE.over2, over: 2 };
+  if (pct2 > 100) return { color: ZONE.over1, over: 1 };
+  if (pct2 === 100) return { color: ZONE.target, over: 0 };
+  if (pct2 >= 75) return { color: ZONE.approaching, over: 0 };
   return { color: ZONE.building, over: 0 };
 }
 function clampFill(value) {
@@ -8147,9 +8373,9 @@ function clampFill(value) {
   if (value > 1) return 1;
   return value;
 }
-function isAtTarget(pct, threshold) {
+function isAtTarget(pct2, threshold) {
   if (threshold == null) return false;
-  return Math.abs(pct - Math.round(threshold * 100)) <= 5;
+  return Math.abs(pct2 - Math.round(threshold * 100)) <= 5;
 }
 function IntensityBar({
   level,
@@ -8163,9 +8389,9 @@ function IntensityBar({
 }) {
   const isVertical = orientation === "vertical";
   const fillLevel = clampFill(level);
-  const pct = Math.round(Math.max(0, level) * 100);
-  const zone = zoneForPct(pct);
-  const atTarget = isAtTarget(pct, threshold);
+  const pct2 = Math.round(Math.max(0, level) * 100);
+  const zone = zoneForPct(pct2);
+  const atTarget = isAtTarget(pct2, threshold);
   const [fillAnim] = React24.useState(() => new reactNative.Animated.Value(fillLevel));
   React24.useEffect(() => {
     const animation = reactNative.Animated.timing(fillAnim, {
@@ -8216,8 +8442,8 @@ function IntensityBar({
       className,
       style: { alignItems: "center" },
       accessibilityRole: "progressbar",
-      accessibilityValue: { min: 0, max: 100, now: pct },
-      accessibilityLabel: `Intensity level: ${pct}%`,
+      accessibilityValue: { min: 0, max: 100, now: pct2 },
+      accessibilityLabel: `Intensity level: ${pct2}%`,
       testID: "intensity-bar",
       ...props,
       children: [
@@ -8263,7 +8489,7 @@ function IntensityBar({
             accessibilityElementsHidden: true,
             testID: "intensity-label",
             children: [
-              pct,
+              pct2,
               "%"
             ]
           }
@@ -8448,13 +8674,257 @@ 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] = React24.useState(() => new reactNative.Animated.Value(0));
+  React24.useEffect(() => {
+    if (!active) return;
+    const loop = reactNative.Animated.loop(
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(value, {
+          toValue: 1,
+          duration: PULSE_HALF_MS,
+          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+          useNativeDriver: false
+        }),
+        reactNative.Animated.timing(value, {
+          toValue: 0,
+          duration: PULSE_HALF_MS,
+          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+          useNativeDriver: false
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, value]);
+  return value;
+}
+function SegmentedBar({
+  segments,
+  height = 8,
+  gap = SEGMENTED_BAR_GAP,
+  radius = 2,
+  marker = null,
+  segmentTestID,
+  style,
+  ...props
+}) {
+  const pulse = usePulse2(segments.some((s) => s.pulse));
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: [{ flexDirection: "row", height, gap, position: "relative" }, style], ...props, children: [
+    segments.map((seg, i) => {
+      const fillStyle = {
+        width: `${(seg.fill ?? 1) * 100}%`,
+        height: "100%",
+        backgroundColor: seg.color,
+        opacity: seg.opacity
+      };
+      const testID = segmentTestID?.(seg, i) ?? "segmented-bar-segment";
+      return /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            flex: seg.weight ?? 1,
+            minWidth: 0,
+            height: "100%",
+            marginLeft: seg.leadingGap,
+            borderRadius: radius,
+            overflow: "hidden"
+          },
+          children: seg.pulse ? /* @__PURE__ */ jsx(
+            reactNative.Animated.View,
+            {
+              style: {
+                ...fillStyle,
+                ...seg.pulseColor ? {
+                  backgroundColor: pulse.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: seg.pulseColor
+                  })
+                } : {
+                  opacity: pulse.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [PULSE_MIN_OPACITY, 1]
+                  })
+                }
+              },
+              accessibilityElementsHidden: true,
+              testID
+            }
+          ) : /* @__PURE__ */ jsx(reactNative.View, { style: fillStyle, accessibilityElementsHidden: true, testID })
+        },
+        i
+      );
+    }),
+    marker ? /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          left: `${marker.position * 100}%`,
+          top: 0,
+          bottom: 0,
+          width: 2,
+          backgroundColor: marker.color
+        },
+        accessibilityElementsHidden: true,
+        testID: "segmented-bar-marker"
+      }
+    ) : null
+  ] });
+}
+
+// src/components/custom/Workout/SetBar.tsx
+var SET_STRIP_ZONES = {
+  slow: primitiveRamps.red[600],
+  moderate: primitiveRamps.orange[400],
+  fast: primitiveRamps.amber[300],
+  fastest: primitiveRamps.green[300]
+};
+var TODO_COLOR = primitiveColors.charcoal[300];
+var SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900];
+var NOTCH_GAP = 2;
+var CLUSTER_GAP = 3;
+var MYO_UPCOMING_CLUSTERS = 3;
+var MYO_UPCOMING_CLUSTER_LEN = 5;
+var MYO_UPCOMING_FADE = 0.6;
+var PULSE_RANGE = {
+  [SET_STRIP_ZONES.slow]: [primitiveRamps.red[500], primitiveRamps.red[700]],
+  [SET_STRIP_ZONES.moderate]: [primitiveRamps.orange[300], primitiveRamps.orange[500]],
+  [SET_STRIP_ZONES.fast]: [primitiveRamps.amber[200], primitiveRamps.amber[400]],
+  [SET_STRIP_ZONES.fastest]: [primitiveRamps.green[200], primitiveRamps.green[400]]
+};
+function velocityZoneColor(v) {
+  if (v < 0.5) return SET_STRIP_ZONES.slow;
+  if (v < 0.75) return SET_STRIP_ZONES.moderate;
+  if (v < 1) return SET_STRIP_ZONES.fast;
+  return SET_STRIP_ZONES.fastest;
+}
+function chunkedSegments(chunks, gap) {
+  return chunks.flatMap(
+    (vels, ci) => vels.map((v, ri) => ({
+      color: velocityZoneColor(v),
+      ...ci > 0 && ri === 0 ? { leadingGap: gap } : {}
+    }))
+  );
+}
+function rangeSegments(floor, max, doneVels) {
+  return Array.from({ length: max }, (_, i) => {
+    if (i < doneVels.length) return { color: velocityZoneColor(doneVels[i]) };
+    return { color: i < floor ? TODO_COLOR : SET_STRIP_VARIABLE_COLOR };
+  });
+}
+function myoUpcomingSegments(activationLen, clusterCount) {
+  const activation = Array.from({ length: activationLen }, () => ({ color: TODO_COLOR }));
+  const trail = Array.from(
+    { length: clusterCount },
+    (_, ci) => Array.from({ length: MYO_UPCOMING_CLUSTER_LEN }, (_2, ri) => ({
+      color: SET_STRIP_VARIABLE_COLOR,
+      opacity: MYO_UPCOMING_FADE ** ci,
+      ...ri === 0 ? { leadingGap: CLUSTER_GAP } : {}
+    }))
+  ).flat();
+  return [...activation, ...trail];
+}
+function setSegments(set) {
+  if (set.status === "todo") {
+    return [{ color: TODO_COLOR }];
+  }
+  if (set.status === "done") {
+    return set.velocities.map((v) => ({ color: velocityZoneColor(v) }));
+  }
+  if (set.status === "range") {
+    return rangeSegments(set.floor, set.max, set.doneVels);
+  }
+  if (set.status === "drop") {
+    return chunkedSegments(set.subloads, NOTCH_GAP);
+  }
+  if (set.status === "myo") {
+    return chunkedSegments([set.activation, ...set.clusters], CLUSTER_GAP);
+  }
+  if (set.status === "myo-upcoming") {
+    return myoUpcomingSegments(set.activationLen, set.clusterCount ?? MYO_UPCOMING_CLUSTERS);
+  }
+  const performed = set.velocities.map((v) => {
+    const color = velocityZoneColor(v);
+    return { color, pulse: true, pulseColor: PULSE_RANGE[color] };
+  });
+  const remaining = Math.max(0, set.planned - set.velocities.length);
+  return [...performed, ...Array.from({ length: remaining }, () => ({ color: TODO_COLOR }))];
+}
+function setBarSegmentTestID(seg) {
+  if (seg.pulse) return "set-strip-pulse";
+  if (seg.color === SET_STRIP_VARIABLE_COLOR) return "set-strip-variable";
+  return seg.color === TODO_COLOR ? "set-strip-empty" : "set-strip-fill";
+}
+function SetBar({ set, height = 8 }) {
+  return /* @__PURE__ */ jsx(
+    SegmentedBar,
+    {
+      segments: setSegments(set),
+      height,
+      gap: 0,
+      radius: 0,
+      segmentTestID: setBarSegmentTestID,
+      style: { flex: 1, minWidth: 0, borderRadius: 2, overflow: "hidden" },
+      testID: "set-strip-set"
+    }
+  );
+}
+
+// src/components/custom/Workout/SetStrip.tsx
+var SET_STRIP_GAP = 5;
+function setCategory(set) {
+  switch (set.status) {
+    case "done":
+    case "drop":
+    case "myo":
+      return "done";
+    case "active":
+      return "active";
+    case "range":
+      return set.doneVels.length > 0 ? "active" : "upcoming";
+    case "todo":
+    case "myo-upcoming":
+      return "upcoming";
+  }
+}
+function describeSets(sets) {
+  const done = sets.filter((s) => setCategory(s) === "done").length;
+  const active = sets.filter((s) => setCategory(s) === "active").length;
+  const upcoming = sets.filter((s) => setCategory(s) === "upcoming").length;
+  return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`;
+}
+function SetStrip({ sets, height = 8, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: { flexDirection: "row", width: "100%", height, gap: SET_STRIP_GAP },
+      accessibilityRole: "image",
+      accessibilityLabel: describeSets(sets),
+      testID: "set-strip",
+      ...props,
+      children: sets.map((set, i) => /* @__PURE__ */ jsx(SetBar, { set, height }, i))
+    }
+  );
+}
+
+// src/components/custom/Workout/VelocityStrip.tsx
 var VEL_COLORS = WORKOUT_TOKENS.scale;
-var zoneIdToScaleToken = {
-  speed: "green",
-  power: "yellow",
-  strengthSpeed: "orange",
-  maximalStrength: "red",
-  grinding: "red"
+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";
@@ -8493,14 +8963,140 @@ function classifyBand(velocity, bands) {
   return bands[bands.length - 1];
 }
 function bandColor(band) {
-  const token = zoneIdToScaleToken[band.id];
-  return token ? VEL_COLORS[token] : VEL_COLORS.green;
+  return bandIdToEffortColor[band.id] ?? VEL_COLORS.green;
 }
 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 WIDE_GAP = 8;
+var TODO_COLOR2 = primitiveColors.charcoal[300];
+var CONTINUE_OUTLINE = primitiveRamps.cyan[800];
+function deriveDoneVelocities(set) {
+  switch (set.type) {
+    case "drop":
+      return set.subloads.flat();
+    case "myo":
+      return [...set.activation, ...set.clusters.flat()];
+    default:
+      return set.velocities;
+  }
+}
+function chunkedRepSlots(chunks) {
+  const slots = [];
+  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 });
+    });
+  });
+  return slots;
+}
+function buildSlots(set) {
+  switch (set.type) {
+    case "straight": {
+      const total = Math.max(set.velocities.length, set.planned ?? set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const done = i < set.velocities.length;
+        return {
+          kind: done ? "rep" : "todo",
+          velocity: done ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : REP_GAP
+        };
+      });
+    }
+    case "range": {
+      const total = Math.max(set.max, set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const kind = i < set.velocities.length ? "rep" : i < set.floor ? "todo" : "variable";
+        return {
+          kind,
+          velocity: kind === "rep" ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : REP_GAP
+        };
+      });
+    }
+    case "amrap": {
+      const reps = set.velocities.map((velocity, i) => ({
+        kind: "rep",
+        velocity,
+        leadingGap: i === 0 ? 0 : REP_GAP
+      }));
+      reps.push({ kind: "continue", leadingGap: reps.length === 0 ? 0 : REP_GAP });
+      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 });
+      return slots;
+    }
+    case "cluster": {
+      const total = Math.max(set.velocities.length, set.planned ?? set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const done = i < set.velocities.length;
+        const boundary = i > 0 && i % set.groupSize === 0;
+        return {
+          kind: done ? "rep" : "todo",
+          velocity: done ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : boundary ? WIDE_GAP : REP_GAP
+        };
+      });
+    }
+  }
+}
+function setAccessibilityLabel(set, repCount) {
+  switch (set.type) {
+    case "straight":
+      return `Velocity strip, straight set, ${repCount} reps`;
+    case "range":
+      return `Velocity strip, rep-range set, floor ${set.floor} to ${set.max}, ${repCount} reps done`;
+    case "amrap":
+      return `Velocity strip, AMRAP set, ${repCount} reps and counting`;
+    case "drop":
+      return `Velocity strip, drop set, ${set.subloads.length} loads, ${repCount} reps`;
+    case "myo":
+      return `Velocity strip, myo-reps set, ${set.clusters.length} clusters${set.open ? ", open" : ""}, ${repCount} reps`;
+    case "cluster":
+      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 = 52;
+var HERO_BAR_RADIUS = 5;
+var HERO_MIN_BAR_HEIGHT = 4;
+var HERO_PENDING_COLOR = primitiveColors.charcoal[100];
+var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
+function scaleDenominator(scale, maxVelocity) {
+  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * 1.15;
+}
+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;
@@ -8520,33 +9116,11 @@ function usePrefersReducedMotion() {
 var ANIMATION_DURATION = 400;
 var ANIMATION_EASING = reactNative.Easing.bezier(0.22, 1, 0.36, 1);
 var POP_EASING = reactNative.Easing.bezier(0.34, 1.56, 0.64, 1);
-function VelocityStrip({
-  velocities,
-  zones,
-  liveRepIndex,
-  expanded = false,
-  onToggle,
-  onRepPress,
-  variant = "full",
-  showInfo = true,
-  className,
-  ...props
-}) {
-  const maxVelocity = Math.max(...velocities, 0);
-  const meanVelocity = calculateMeanVelocity(velocities);
-  const loss = calculateVelocityLoss(velocities);
-  const hasZones = zones != null && zones.length > 0;
-  const barColorFor = (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
-  const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
+function useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
   const prefersReducedMotion = usePrefersReducedMotion();
-  const [heightAnim] = React24.useState(() => new reactNative.Animated.Value(expanded ? 60 : 3));
-  const [labelOpacity] = React24.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
-  const [infoOpacity] = React24.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
   const [liveScale] = React24.useState(() => new reactNative.Animated.Value(1));
-  const liveVelocity = liveRepIndex != null ? velocities[liveRepIndex] : void 0;
-  const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
   React24.useEffect(() => {
-    if (variant === "mini" || liveRepIndex == null || liveVelocity == null) return;
+    if (!active || liveRepIndex == null || liveVelocity == null) return;
     if (prefersReducedMotion) {
       liveScale.setValue(1);
       return;
@@ -8576,12 +9150,201 @@ function VelocityStrip({
         useNativeDriver: true
       }).start();
     }
-  }, [variant, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  return liveScale;
+}
+function HeroVelocityChart({
+  doneVelocities,
+  barColorFor,
+  scaleDenom,
+  referenceVelocity,
+  liveRepIndex,
+  isNewPeak,
+  targetReps,
+  height,
+  className,
+  viewProps
+}) {
+  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
+  const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak);
+  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 repCount = doneVelocities.length;
+  const total = Math.max(repCount, targetReps ?? repCount);
+  const label = referenceVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(referenceVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
+  const { style: externalStyle, ...restProps } = viewProps;
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: [{ height }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "velocity-strip-hero",
+      ...restProps,
+      children: /* @__PURE__ */ jsxs(
+        reactNative.View,
+        {
+          style: {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "flex-end",
+            gap: HERO_BAR_GAP,
+            position: "relative",
+            borderBottomWidth: 2,
+            borderBottomColor: HERO_PENDING_COLOR
+          },
+          children: [
+            referencePx > 0 && /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  bottom: referencePx,
+                  borderTopWidth: 1,
+                  borderStyle: "dashed",
+                  borderColor: HERO_REFERENCE_COLOR,
+                  pointerEvents: "none"
+                },
+                testID: "velocity-hero-reference"
+              }
+            ),
+            doneVelocities.map((velocity, i) => {
+              const isLive = liveRepIndex === i;
+              return /* @__PURE__ */ jsxs(
+                reactNative.View,
+                {
+                  accessibilityElementsHidden: true,
+                  style: {
+                    flex: 1,
+                    maxWidth: HERO_BAR_MAX_WIDTH,
+                    height: "100%",
+                    alignItems: "center",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      reactNative.Text,
+                      {
+                        className: "text-text-primary",
+                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
+                        testID: `velocity-label-${i}`,
+                        children: formatVelocity(velocity)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      reactNative.Animated.View,
+                      {
+                        style: [
+                          {
+                            width: "100%",
+                            height: barHeight(velocity),
+                            borderTopLeftRadius: HERO_BAR_RADIUS,
+                            borderTopRightRadius: HERO_BAR_RADIUS,
+                            backgroundColor: barColorFor(velocity)
+                          },
+                          isLive ? { transform: [{ scale: liveScale }] } : null
+                        ],
+                        testID: `velocity-bar-${i}`
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            }),
+            Array.from({ length: pendingCount }, (_, i) => /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  flex: 1,
+                  maxWidth: HERO_BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    style: {
+                      width: "100%",
+                      height: HERO_MIN_BAR_HEIGHT * 3,
+                      borderWidth: 1,
+                      borderStyle: "dashed",
+                      borderColor: HERO_PENDING_COLOR,
+                      borderTopLeftRadius: HERO_BAR_RADIUS,
+                      borderTopRightRadius: HERO_BAR_RADIUS
+                    },
+                    testID: "velocity-slot-todo"
+                  }
+                )
+              },
+              `pending-${i}`
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+function VelocityStrip({
+  velocities,
+  set,
+  zones,
+  liveRepIndex,
+  expanded = true,
+  onToggle,
+  onRepPress,
+  variant = "expanded",
+  height = EXPANDED_HEIGHT,
+  targetReps,
+  scale = "peak",
+  showNumbers = true,
+  showInfo = true,
+  className,
+  ...props
+}) {
+  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 meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
+  const [heightAnim] = React24.useState(() => new reactNative.Animated.Value(expanded ? height : 3));
+  const [labelOpacity] = React24.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const [infoOpacity] = React24.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
+  const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
+  const liveScale = useLiveRepPop(
+    variant === "expanded" && framed,
+    liveRepIndex,
+    liveVelocity,
+    isNewPeak
+  );
   React24.useEffect(() => {
-    if (variant === "mini") return;
+    if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
       reactNative.Animated.timing(heightAnim, {
-        toValue: expanded ? 60 : 3,
+        toValue: expanded ? height : 3,
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
         useNativeDriver: false
@@ -8599,101 +9362,219 @@ function VelocityStrip({
         useNativeDriver: false
       })
     ]).start();
-  }, [expanded, variant, heightAnim, labelOpacity, infoOpacity]);
+  }, [expanded, variant, framed, height, heightAnim, labelOpacity, 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;
+    return /* @__PURE__ */ jsx(
+      HeroVelocityChart,
+      {
+        doneVelocities,
+        barColorFor,
+        scaleDenom,
+        referenceVelocity: maxVelocity,
+        liveRepIndex,
+        isNewPeak,
+        targetReps,
+        height: heroHeight,
+        className,
+        viewProps: props
+      }
+    );
+  }
   if (variant === "mini") {
     const { style: externalStyle, ...restProps } = props;
     return /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className,
-        style: [{ flexDirection: "row", height: 3, gap: 2, borderRadius: 2, overflow: "hidden" }, externalStyle],
+        style: [
+          { flexDirection: "row", height: 3, gap: REP_GAP, borderRadius: 2, overflow: "hidden" },
+          externalStyle
+        ],
         accessibilityRole: "image",
-        accessibilityLabel: `Velocity strip, ${velocities.length} reps`,
+        accessibilityLabel: miniLabel,
         testID: "velocity-strip-mini",
         ...restProps,
-        children: velocities.map((v, i) => /* @__PURE__ */ jsx(
+        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             style: {
               flex: 1,
-              backgroundColor: barColorFor(v),
+              backgroundColor: slotColor(slot),
               borderRadius: 1,
               minWidth: 4,
-              height: "100%"
+              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: `velocity-bar-${i}`
+            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
           },
           i
         ))
       }
     );
   }
-  const stripLabel = `Velocity chart for set, ${velocities.length} reps, tap to ${expanded ? "collapse" : "expand"}`;
-  const hasInteractiveContainer = onToggle != null;
-  const hasInteractiveReps = onRepPress != null && expanded;
-  const stripContent = /* @__PURE__ */ jsxs(
-    reactNative.Animated.View,
-    {
-      className: [className, expanded ? "bg-surface-raised" : "bg-transparent"].filter(Boolean).join(" "),
-      style: [
-        {
-          height: heightAnim,
-          width: "100%",
-          gap: 2,
-          borderRadius: expanded ? 6 : 2,
-          paddingTop: expanded ? 16 : 0,
-          paddingBottom: expanded ? 24 : 0,
-          paddingHorizontal: expanded ? 6 : 0,
-          paddingVertical: expanded ? void 0 : 8,
-          overflow: expanded ? "visible" : "hidden"
-        }
-      ],
-      accessibilityRole: hasInteractiveContainer || hasInteractiveReps ? "none" : "button",
-      accessibilityLabel: hasInteractiveContainer || hasInteractiveReps ? void 0 : stripLabel,
-      testID: "velocity-strip",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
+  if (!framed) {
+    const { style: externalStyle, ...restProps } = props;
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        className,
+        style: [
+          { flexDirection: "row", height, gap: REP_GAP, alignItems: "flex-end" },
+          externalStyle
+        ],
+        accessibilityRole: "image",
+        accessibilityLabel: miniLabel,
+        testID: "velocity-strip-compact",
+        ...restProps,
+        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
-            style: { flexDirection: "row", flex: 1, gap: 2, alignItems: "flex-end" },
-            children: velocities.map((v, i) => {
-              const barBackground = barColorFor(v);
-              const barHeightPct = maxVelocity > 0 ? Math.round(v / (maxVelocity * 1.15) * 100) : 0;
-              const isLive = liveRepIndex === i;
-              const liveLabelSuffix = isLive ? isNewPeak ? ", latest rep, new set peak" : ", latest rep" : "";
-              const barStyle = expanded ? { height: `${barHeightPct}%`, minHeight: 2, borderTopLeftRadius: 2, borderTopRightRadius: 2, backgroundColor: barBackground } : {
-                minHeight: "100%",
-                borderTopLeftRadius: 2,
-                borderTopRightRadius: 2,
-                borderBottomLeftRadius: 0,
-                borderBottomRightRadius: 0,
-                backgroundColor: barBackground
-              };
-              const barInner = isLive ? /* @__PURE__ */ jsx(
-                reactNative.Animated.View,
-                {
-                  style: [barStyle, { transform: [{ scale: liveScale }] }],
-                  testID: `velocity-bar-${i}`,
-                  accessibilityRole: "image",
-                  accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second${liveLabelSuffix}`
-                }
-              ) : /* @__PURE__ */ jsx(
-                reactNative.View,
-                {
-                  style: barStyle,
-                  testID: `velocity-bar-${i}`,
-                  accessibilityRole: "image",
-                  accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
-                }
-              );
-              const bar = /* @__PURE__ */ jsxs(
-                reactNative.View,
-                {
-                  style: { flex: 1, height: "100%", justifyContent: "flex-end", position: "relative" },
-                  children: [
-                    expanded && /* @__PURE__ */ jsx(reactNative.Animated.View, { style: { opacity: labelOpacity, alignItems: "center", position: "absolute", top: -13, left: 0, right: 0 }, accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(
+            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
+        ))
+      }
+    );
+  }
+  const stripLabel = set ? `${setAccessibilityLabel(set, repCount)}, tap to ${expanded ? "collapse" : "expand"}` : `Velocity chart for set, ${repCount} reps, tap to ${expanded ? "collapse" : "expand"}`;
+  const hasInteractiveContainer = onToggle != null;
+  const hasInteractiveReps = onRepPress != null && expanded;
+  const setBars = set != null && slots.map((slot, i) => {
+    const isStraightRep = set.type === "straight" && slot.kind === "rep";
+    const heightPct = isStraightRep ? scaleDenom > 0 ? Math.round((slot.velocity ?? 0) / scaleDenom * 100) : 0 : set.type === "straight" ? EXPANDED_TODO_STUB_PCT : EXPANDED_ENCODED_PCT;
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          flex: 1,
+          height: "100%",
+          justifyContent: "flex-end",
+          marginLeft: slot.leadingGap
+        },
+        children: /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            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)
+          }
+        )
+      },
+      i
+    );
+  });
+  const stripContent = /* @__PURE__ */ jsxs(
+    reactNative.Animated.View,
+    {
+      className: [className, expanded ? "bg-surface-raised" : "bg-transparent"].filter(Boolean).join(" "),
+      style: [
+        {
+          height: heightAnim,
+          width: "100%",
+          gap: 2,
+          borderRadius: expanded ? 6 : 2,
+          paddingTop: expanded ? 16 : 0,
+          paddingBottom: expanded ? 24 : 0,
+          // No horizontal inset — the framed chart's bars span full width, matching
+          // the bare spotlight and mini. Numbers/info sit in the vertical padding.
+          paddingHorizontal: 0,
+          paddingVertical: expanded ? void 0 : 8,
+          overflow: expanded ? "visible" : "hidden"
+        }
+      ],
+      accessibilityRole: hasInteractiveContainer || hasInteractiveReps ? "none" : "button",
+      accessibilityLabel: hasInteractiveContainer || hasInteractiveReps ? void 0 : stripLabel,
+      testID: "velocity-strip",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", flex: 1, gap: set ? 0 : 2, alignItems: "flex-end" }, children: set ? setBars : doneVelocities.map((v, i) => {
+          const barBackground = barColorFor(v);
+          const barHeightPct = scaleDenom > 0 ? Math.round(v / scaleDenom * 100) : 0;
+          const isLive = liveRepIndex === i;
+          const liveLabelSuffix = isLive ? isNewPeak ? ", latest rep, new set peak" : ", latest rep" : "";
+          const barStyle = expanded ? {
+            height: `${barHeightPct}%`,
+            minHeight: 2,
+            borderTopLeftRadius: 2,
+            borderTopRightRadius: 2,
+            backgroundColor: barBackground
+          } : {
+            minHeight: "100%",
+            borderTopLeftRadius: 2,
+            borderTopRightRadius: 2,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            backgroundColor: barBackground
+          };
+          const barInner = isLive ? /* @__PURE__ */ jsx(
+            reactNative.Animated.View,
+            {
+              style: [barStyle, { transform: [{ scale: liveScale }] }],
+              testID: `velocity-bar-${i}`,
+              accessibilityRole: "image",
+              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second${liveLabelSuffix}`
+            }
+          ) : /* @__PURE__ */ jsx(
+            reactNative.View,
+            {
+              style: barStyle,
+              testID: `velocity-bar-${i}`,
+              accessibilityRole: "image",
+              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
+            }
+          );
+          const bar = /* @__PURE__ */ jsxs(
+            reactNative.View,
+            {
+              style: {
+                flex: 1,
+                height: "100%",
+                justifyContent: "flex-end",
+                position: "relative"
+              },
+              children: [
+                expanded && showNumbers && /* @__PURE__ */ jsx(
+                  reactNative.Animated.View,
+                  {
+                    style: {
+                      opacity: labelOpacity,
+                      alignItems: "center",
+                      position: "absolute",
+                      top: -13,
+                      left: 0,
+                      right: 0
+                    },
+                    accessibilityElementsHidden: true,
+                    children: /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
                         className: "text-text-secondary",
@@ -8701,30 +9582,30 @@ function VelocityStrip({
                         testID: `velocity-label-${i}`,
                         children: formatVelocity(v)
                       }
-                    ) }),
-                    barInner
-                  ]
-                },
-                i
-              );
-              if (onRepPress && expanded) {
-                return /* @__PURE__ */ jsx(
-                  reactNative.Pressable,
-                  {
-                    style: { flex: 1, height: "100%" },
-                    onPress: () => onRepPress(i, v),
-                    accessibilityRole: "button",
-                    accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`,
-                    testID: `velocity-bar-pressable-${i}`,
-                    children: bar
-                  },
-                  i
-                );
-              }
-              return bar;
-            })
+                    )
+                  }
+                ),
+                barInner
+              ]
+            },
+            i
+          );
+          if (onRepPress && expanded) {
+            return /* @__PURE__ */ jsx(
+              reactNative.Pressable,
+              {
+                style: { flex: 1, height: "100%" },
+                onPress: () => onRepPress(i, v),
+                accessibilityRole: "button",
+                accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`,
+                testID: `velocity-bar-pressable-${i}`,
+                children: bar
+              },
+              i
+            );
           }
-        ),
+          return bar;
+        }) }),
         expanded && showInfo && /* @__PURE__ */ jsxs(
           reactNative.Animated.View,
           {
@@ -9022,233 +9903,90 @@ function Sparkline({
     }
   );
 }
-function formatAccessibilityLabel(setNumber, reps, weight, unit) {
-  const repsText = reps != null ? `${reps} reps` : "no reps";
-  const weightText = weight != null ? `at ${roundWeight(weight)} ${unit}` : "";
-  return `Set ${setNumber}: ${repsText}${weightText ? ` ${weightText}` : ""}`;
+var DARK = getSemanticColors("dark");
+var TEXT_ACTIVE = DARK["text-primary"];
+var TEXT_MUTED = DARK["text-secondary"];
+var COL = { set: 36, reps: 44, load: 56, rpe: 36 };
+var cellText = { fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: "600" };
+var typeBadge = {
+  fontSize: 10,
+  fontWeight: "700",
+  fontFamily: "Inter, sans-serif",
+  color: WORKOUT_TOKENS.scale.orange,
+  backgroundColor: "rgba(255,165,2,0.12)",
+  paddingVertical: 1,
+  paddingHorizontal: 5,
+  borderRadius: 3,
+  overflow: "hidden"
+};
+function displayReps(set) {
+  return set.state === "done" ? set.reps : set.target.reps;
+}
+function displayWeight(set) {
+  return set.state === "done" ? set.weight : set.target.weight;
+}
+function plannedReps(set) {
+  if (set.state === "done") return set.velocities.length;
+  if (set.state === "live") return set.target.reps;
+  return set.planned ?? set.target.reps;
+}
+function accessibilityLabel(set) {
+  const base = `Set ${set.setNumber}: ${displayReps(set)} reps at ${roundWeight(displayWeight(set))} ${set.unit}`;
+  if (set.state === "live") return `${base}, in progress`;
+  if (set.state === "todo") return `${base}, upcoming`;
+  return base;
+}
+function Cell({
+  width,
+  children,
+  testID
+}) {
+  return /* @__PURE__ */ jsx(reactNative.View, { style: { width, alignItems: "center", justifyContent: "center" }, testID, children });
 }
-function SetRow({
-  mode,
-  setNumber,
-  previous,
-  reps,
-  weight,
-  rpe,
-  unit,
-  velocities,
-  velocityZones,
-  velocityLiveRepIndex,
-  velocityExpanded,
-  onVelocityToggle,
-  setType,
-  prBadges,
-  isNextSet,
-  targets
-}) {
-  const isActive = mode === "active";
-  const isCompleted = mode === "completed";
-  const rowStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 7,
-    paddingHorizontal: 8,
-    gap: 8,
-    borderRadius: 8
-  };
-  if (isActive && isNextSet) {
-    rowStyle.backgroundColor = "rgba(255,121,0,0.06)";
-    rowStyle.borderWidth = 1;
-    rowStyle.borderColor = "rgba(255,121,0,0.15)";
-  }
-  if (isCompleted && !isNextSet) {
-    rowStyle.opacity = 0.55;
+function RowStrip({ set }) {
+  const zones = set.velocityZones;
+  if (set.state === "live") {
+    return /* @__PURE__ */ jsx(
+      VelocityStrip,
+      {
+        variant: "expanded",
+        showNumbers: false,
+        showInfo: false,
+        height: 24,
+        scale: "fixed",
+        set: { type: "straight", velocities: set.velocities, planned: set.target.reps },
+        zones
+      }
+    );
   }
+  const velocities = set.state === "done" ? set.velocities : [];
+  return /* @__PURE__ */ jsx(
+    VelocityStrip,
+    {
+      variant: "mini",
+      set: { type: "straight", velocities, planned: plannedReps(set) },
+      zones
+    }
+  );
+}
+function SetRow(set) {
+  const live = set.state === "live";
+  const valueColor = live ? TEXT_ACTIVE : TEXT_MUTED;
+  const rpe = set.state === "todo" ? null : set.rpe;
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
-      style: rowStyle,
-      accessibilityLabel: formatAccessibilityLabel(
-        setNumber,
-        reps,
-        weight,
-        unit
-      ),
+      style: { paddingVertical: 6, paddingHorizontal: 8 },
+      accessibilityLabel: accessibilityLabel(set),
       testID: "set-row",
       children: [
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 36, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-set-number",
-            children: setType ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                style: {
-                  fontSize: 10,
-                  fontWeight: "700",
-                  fontFamily: "Inter, sans-serif",
-                  color: WORKOUT_TOKENS.scale.orange,
-                  backgroundColor: "rgba(255,165,2,0.12)",
-                  paddingVertical: 1,
-                  paddingHorizontal: 5,
-                  borderRadius: 3,
-                  overflow: "hidden"
-                },
-                testID: "set-row-type-badge",
-                children: setType
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-secondary",
-                style: {
-                  fontSize: 13,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: setNumber
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            className: "flex-1",
-            testID: "set-row-previous",
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-secondary",
-                style: {
-                  fontSize: 12,
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: previous ? `${previous.reps} x ${roundWeight(previous.weight)}` : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 44, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-reps",
-            children: isActive && reps == null && targets ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif"
-                },
-                testID: "set-row-target-reps",
-                children: targets.reps
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: reps != null ? "text-text-primary" : "text-text-tertiary",
-                style: {
-                  fontSize: 14,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: reps != null ? reps : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 56, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-weight",
-            children: isActive && weight == null && targets ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif"
-                },
-                testID: "set-row-target-weight",
-                children: roundWeight(targets.weight)
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: weight != null ? "text-text-primary" : "text-text-tertiary",
-                style: {
-                  fontSize: 14,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: weight != null ? roundWeight(weight) : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 36, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-rpe",
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: rpe != null ? void 0 : "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  // rpeColor returns a concrete hex (native-safe); only the tertiary
-                  // fallback needs the className token.
-                  color: rpe != null ? rpeColor(rpe) : void 0
-                },
-                children: rpe != null ? roundRpe(rpe) : "\u2014"
-              }
-            )
-          }
-        ),
-        prBadges && prBadges.length > 0 && /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            className: "flex-row items-center",
-            style: { gap: 4 },
-            testID: "set-row-pr-badges",
-            children: prBadges.map((badge, i) => /* @__PURE__ */ jsx(
-              PrBadge,
-              {
-                type: badge.type,
-                label: badge.label,
-                animate: false,
-                compact: true
-              },
-              i
-            ))
-          }
-        ),
-        velocities && velocities.length > 0 && /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { position: "absolute", bottom: 0, left: 8, right: 8 },
-            testID: "set-row-velocity-strip",
-            children: /* @__PURE__ */ jsx(
-              VelocityStrip,
-              {
-                velocities,
-                zones: velocityZones,
-                liveRepIndex: velocityLiveRepIndex,
-                expanded: velocityExpanded,
-                onToggle: onVelocityToggle,
-                variant: onVelocityToggle ? "full" : "mini"
-              }
-            )
-          }
-        )
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsx(Cell, { width: COL.set, testID: "set-row-set-number", children: set.setType ? /* @__PURE__ */ jsx(reactNative.Text, { style: typeBadge, testID: "set-row-type-badge", children: set.setType }) : /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor, fontWeight: live ? "700" : "600" }, children: set.setNumber }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.reps, testID: "set-row-reps", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: displayReps(set) }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.load, testID: "set-row-weight", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: roundWeight(displayWeight(set)) }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.rpe, testID: "set-row-rpe", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: TEXT_MUTED }, children: rpe != null ? roundRpe(rpe) : "\u2014" }) })
+        ] }),
+        /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: live ? 6 : 4 }, testID: "set-row-strip", children: /* @__PURE__ */ jsx(RowStrip, { set }) })
       ]
     }
   );
@@ -9410,23 +10148,139 @@ function InputBar({
   );
 }
 var BRAND_PRIMARY4 = getSemanticColors("dark")["brand-primary"];
-function RestTimer({
-  totalSeconds,
-  elapsedMs,
+var RING_DEFAULT_SIZE = 180;
+function RestActions({ onAddTime, onSkip }) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress: onAddTime,
+        style: {
+          backgroundColor: "rgba(255,255,255,0.06)",
+          paddingVertical: 8,
+          paddingHorizontal: 20,
+          borderRadius: 8
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: "Add 30 seconds",
+        testID: "rest-timer-add-time",
+        children: /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-text-secondary",
+            style: { fontSize: 11, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+            children: "+30s"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress: onSkip,
+        style: {
+          backgroundColor: "rgba(255,121,0,0.12)",
+          paddingVertical: 8,
+          paddingHorizontal: 20,
+          borderRadius: 8
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: "Skip rest",
+        testID: "rest-timer-skip",
+        children: /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 11,
+              fontFamily: "Inter, sans-serif",
+              fontWeight: "600",
+              color: BRAND_PRIMARY4
+            },
+            children: "Skip"
+          }
+        )
+      }
+    )
+  ] });
+}
+function RestTimerRing({
+  totalSeconds,
+  elapsedMs,
+  remainingSec,
+  done,
+  size,
+  nextSetInfo,
+  displayOnly,
+  onSkip,
+  onAddTime
+}) {
+  const a11yLabel = done ? "Rest complete, next set ready" : `Rest timer, ${Math.max(0, remainingSec)} seconds remaining`;
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { alignItems: "center", gap: 16 }, testID: "rest-timer", children: [
+    /* @__PURE__ */ jsx(
+      CircularTimer,
+      {
+        durationMs: totalSeconds * 1e3,
+        elapsedMs,
+        mode: "down",
+        size,
+        doneLabel: "GO",
+        doneColor: "success",
+        accessibilityLabel: a11yLabel,
+        controls: !displayOnly ? /* @__PURE__ */ jsx(RestActions, { onAddTime, onSkip }) : void 0,
+        testID: "rest-timer-ring"
+      }
+    ),
+    nextSetInfo != null && /* @__PURE__ */ jsx(
+      reactNative.Text,
+      {
+        className: "text-text-tertiary",
+        style: { fontSize: 13, fontFamily: "Inter, sans-serif" },
+        testID: "rest-timer-next-set",
+        children: nextSetInfo
+      }
+    )
+  ] });
+}
+function RestTimer({
+  totalSeconds,
+  elapsedMs,
   onSkip,
   onAddTime,
   nextSetInfo,
   visible,
-  displayOnly = false
+  displayOnly = false,
+  variant = "bar",
+  size = RING_DEFAULT_SIZE
 }) {
-  if (!visible) return null;
-  const remainingMs = Math.max(0, totalSeconds * 1e3 - elapsedMs);
+  const {
+    remainingMs,
+    progress,
+    label: timeDisplay,
+    done
+  } = useTimer({
+    mode: "down",
+    durationMs: totalSeconds * 1e3,
+    elapsedMs
+  });
   const remainingSec = Math.ceil(remainingMs / 1e3);
-  const minutes = Math.floor(remainingSec / 60);
-  const seconds = remainingSec % 60;
-  const timeDisplay = `${minutes}:${String(seconds).padStart(2, "0")}`;
-  const totalMs = totalSeconds * 1e3;
-  const progressPct = totalMs > 0 ? Math.min(100, elapsedMs / totalMs * 100) : 100;
+  const progressPct = progress * 100;
+  if (!visible) return null;
+  if (variant === "ring") {
+    return /* @__PURE__ */ jsx(
+      RestTimerRing,
+      {
+        totalSeconds,
+        elapsedMs,
+        remainingSec,
+        done,
+        size,
+        nextSetInfo,
+        displayOnly,
+        onSkip,
+        onAddTime
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
@@ -9524,69 +10378,318 @@ function RestTimer({
             )
           }
         ),
-        !displayOnly && /* @__PURE__ */ jsxs(reactNative.View, { style: { flexDirection: "row", gap: 8 }, children: [
+        !displayOnly && /* @__PURE__ */ jsx(RestActions, { onAddTime, onSkip })
+      ]
+    }
+  );
+}
+var t8 = getSemanticColors("dark");
+var TIMES = "\xD7";
+var AT = "@";
+function SetsRepsLoad({
+  sets,
+  reps,
+  load,
+  unit = "lb",
+  className,
+  ...props
+}) {
+  const value = t8["text-primary"];
+  const sep = t8["text-tertiary"];
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: { flexDirection: "row", alignItems: "baseline" },
+      accessibilityLabel: `${sets} sets of ${reps} reps at ${load} ${unit}`,
+      testID: "sets-reps-load",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MetricCell, { color: value, children: sets }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${TIMES} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, children: reps }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${AT} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, children: load }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${unit}` })
+      ]
+    }
+  );
+}
+
+// src/components/custom/Workout/paceTone.ts
+function paceTone(progress, target) {
+  if (target === void 0) return "neutral";
+  return progress >= target ? "ahead" : "behind";
+}
+var PACE_TONE_COLORS = {
+  ahead: getSemanticColors("dark")["status-success"],
+  behind: getSemanticColors("dark")["status-warning"],
+  neutral: primitiveRamps.cyan[400]
+};
+function paceToneColor(tone) {
+  return PACE_TONE_COLORS[tone];
+}
+
+// src/components/custom/Workout/SegmentedProgressBar.tsx
+var DEFAULT_MARKER_COLOR = primitiveRamps.green[500];
+function SegmentedProgressBar({
+  segments,
+  value,
+  target,
+  markerColor = DEFAULT_MARKER_COLOR,
+  color,
+  height,
+  gap,
+  ...props
+}) {
+  const total = segments.reduce((sum, s) => sum + s.weight, 0);
+  const fillColor = color ?? paceToneColor(paceTone(total > 0 ? value / total : 0, target));
+  const barSegments = segments.map((seg, i) => {
+    const cumulativeBefore = segments.slice(0, i).reduce((sum, s) => sum + s.weight, 0);
+    const fill = Math.max(0, Math.min(1, (value - cumulativeBefore) / seg.weight));
+    return { weight: seg.weight, fill, color: fillColor };
+  });
+  return /* @__PURE__ */ jsx(
+    SegmentedBar,
+    {
+      segments: barSegments,
+      marker: target != null ? { position: target, color: markerColor } : null,
+      height,
+      gap,
+      ...props
+    }
+  );
+}
+
+// src/components/custom/Workout/MetricTiles.tsx
+function MetricTiles({ metrics, gap = 1, ...props }) {
+  return /* @__PURE__ */ jsx(HStack, { gap, align: "stretch", ...props, children: metrics.map((metric) => /* @__PURE__ */ jsx(
+    Tile,
+    {
+      label: metric.label,
+      value: metric.value,
+      valueColor: metric.valueColor
+    },
+    metric.label
+  )) });
+}
+var DAY_MS = 24 * 60 * 60 * 1e3;
+var SOON_ACCENT = primitiveRamps.orange[400];
+function compactUntil(ms) {
+  if (ms <= 0) return "now";
+  const min = Math.round(ms / 6e4);
+  if (min < 60) return `${min}m`;
+  const hr = Math.round(min / 60);
+  if (hr < 24) return `${hr}h`;
+  const d = Math.round(hr / 24);
+  if (d < 7) return `${d}d`;
+  return `${Math.round(d / 7)}w`;
+}
+function ScheduleTiles({ when, now, gap = 1, ...props }) {
+  const [mountNow] = React24.useState(() => Date.now());
+  const reference = now ?? mountNow;
+  const whenMs = when instanceof Date ? when.getTime() : when;
+  const soon = whenMs - reference < DAY_MS;
+  const time = new Date(whenMs).toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+  return /* @__PURE__ */ jsxs(HStack, { gap, ...props, children: [
+    /* @__PURE__ */ jsx(Tile, { label: "Date", value: formatDateTime(when, "short") }),
+    /* @__PURE__ */ jsx(Tile, { label: "Time", value: time }),
+    /* @__PURE__ */ jsx(
+      Tile,
+      {
+        label: "Until",
+        value: compactUntil(whenMs - reference),
+        valueColor: soon ? SOON_ACCENT : void 0
+      }
+    )
+  ] });
+}
+var t9 = getSemanticColors("dark");
+var INDICATOR_CONFIG = {
+  imbalance: { Icon: ScaleIcon, color: t9["status-error"], label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, color: t9["status-error"], label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, color: t9["status-warning"], label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, color: t9["status-warning"], label: "Missed reps" },
+  pr: { Icon: AwardIcon, color: t9["status-success"], label: "Personal record" },
+  info: { Icon: InfoIcon, color: t9["status-info"], label: "More info" }
+};
+var INDICATOR_PRECEDENCE = [
+  "imbalance",
+  "overshoot",
+  "velocity-loss",
+  "missed-reps",
+  "pr",
+  "info"
+];
+function resolveIndicator(candidates) {
+  return INDICATOR_PRECEDENCE.find((kind) => candidates.includes(kind));
+}
+function ExerciseIndicator({ kind, onPress, className, ...props }) {
+  const { Icon, color, label } = INDICATOR_CONFIG[kind];
+  const chip = /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: color,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "exercise-indicator",
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { size: 11, color })
+    }
+  );
+  if (onPress) {
+    return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress, accessibilityRole: "button", accessibilityLabel: label, children: chip });
+  }
+  return chip;
+}
+function headingLabel(name, sets, reps, load, unit) {
+  return `${name}, ${sets}\xD7${reps} @ ${roundWeight(load)} ${unit}`;
+}
+function ExerciseHeading({
+  name,
+  sets,
+  reps,
+  load,
+  unit = "lbs",
+  tempo,
+  indicator,
+  dimmed,
+  onPress
+}) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { opacity: dimmed ? 0.55 : 1 }, testID: "exercise-heading", children: [
+    /* @__PURE__ */ jsxs(
+      reactNative.Pressable,
+      {
+        onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: headingLabel(name, sets, reps, load, unit),
+        className: "flex-row items-center",
+        style: { gap: 8 },
+        testID: "exercise-card-header",
+        children: [
           /* @__PURE__ */ jsx(
-            reactNative.Pressable,
+            reactNative.Text,
             {
-              onPress: onAddTime,
-              style: {
-                backgroundColor: "rgba(255,255,255,0.06)",
-                paddingVertical: 8,
-                paddingHorizontal: 20,
-                borderRadius: 8
-              },
-              accessibilityRole: "button",
-              accessibilityLabel: "Add 30 seconds",
-              testID: "rest-timer-add-time",
-              children: /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 11,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "600"
-                  },
-                  children: "+30s"
-                }
-              )
+              className: "text-text-primary",
+              style: { fontSize: 14, fontFamily: '"Space Grotesk", sans-serif', fontWeight: "700" },
+              testID: "exercise-card-name",
+              children: name
             }
           ),
-          /* @__PURE__ */ jsx(
-            reactNative.Pressable,
-            {
-              onPress: onSkip,
-              style: {
-                backgroundColor: "rgba(255,121,0,0.12)",
-                paddingVertical: 8,
-                paddingHorizontal: 20,
-                borderRadius: 8
-              },
-              accessibilityRole: "button",
-              accessibilityLabel: "Skip rest",
-              testID: "rest-timer-skip",
-              children: /* @__PURE__ */ jsx(
-                reactNative.Text,
-                {
-                  style: {
-                    fontSize: 11,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "600",
-                    color: BRAND_PRIMARY4
-                  },
-                  children: "Skip"
-                }
-              )
-            }
-          )
-        ] })
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+          indicator && /* @__PURE__ */ jsx(ExerciseIndicator, { kind: indicator })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      reactNative.View,
+      {
+        className: "flex-row items-center",
+        style: { gap: 8, marginTop: 1 },
+        testID: "exercise-card-summary",
+        children: [
+          /* @__PURE__ */ jsx(SetsRepsLoad, { sets, reps, load, unit }),
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+          tempo && /* @__PURE__ */ jsx(TempoDisplay, { tempo, size: "sm", showLabel: false, showInfo: false })
+        ]
+      }
+    )
+  ] });
+}
+function ExerciseCardHeading({
+  setStates,
+  stripHeight = 8,
+  dimmed,
+  testID = "exercise-card",
+  ...heading
+}) {
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { paddingVertical: 9, paddingHorizontal: 12, opacity: dimmed ? 0.55 : 1 },
+      testID,
+      children: [
+        /* @__PURE__ */ jsx(ExerciseHeading, { ...heading }),
+        setStates.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: 7 }, testID: "exercise-card-strip", children: /* @__PURE__ */ jsx(SetStrip, { sets: setStates, height: stripHeight }) })
       ]
     }
   );
 }
-function buildColumnHeaders(unit) {
-  return ["SET", "PREV", "REPS", unit.toUpperCase(), "RPE"];
+var PREV_COLUMN = { label: "PREV", width: void 0 };
+function buildColumns(unit, showPrevious) {
+  return [
+    { label: "SET", width: 36 },
+    ...showPrevious ? [PREV_COLUMN] : [],
+    { label: "REPS", width: 44 },
+    { label: unit.toUpperCase(), width: 56 },
+    { label: "RPE", width: 36 }
+  ];
 }
+function SetTableHeader({
+  unit = "lbs",
+  showPrevious = true,
+  testID = "table-header"
+}) {
+  const columns = buildColumns(unit, showPrevious);
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className: "flex-row",
+      style: {
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        paddingBottom: 4,
+        ...showPrevious ? {} : { justifyContent: "space-between" }
+      },
+      testID,
+      children: columns.map(({ label, width }) => {
+        const isFlex = width === void 0;
+        return /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              ...isFlex ? { minWidth: 44 } : { width, flexShrink: 1 },
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8
+            },
+            ...isFlex ? { className: "flex-1" } : {},
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: "text-text-tertiary",
+                style: {
+                  fontSize: 10,
+                  fontWeight: "600",
+                  fontFamily: "Inter, sans-serif",
+                  textTransform: "uppercase",
+                  letterSpacing: 0.8
+                },
+                children: label
+              }
+            )
+          },
+          label
+        );
+      })
+    }
+  );
+}
+
+// src/components/custom/Workout/ExerciseCard.tsx
 function getSupersetBorderRadius(position) {
   switch (position) {
     case "first":
@@ -9629,7 +10732,7 @@ function formatSummary(summary) {
   if (!summary) return "";
   return `${summary.sets}\xD7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`;
 }
-function formatAccessibilityLabel2(name, summary, prescription) {
+function formatAccessibilityLabel(name, summary, prescription) {
   if (summary) return `${name}, ${formatSummary(summary)}`;
   if (prescription) return `${name}, ${prescription}`;
   return name;
@@ -9638,7 +10741,6 @@ function CollapsedCard({
   name,
   onToggle,
   summary,
-  e1rm,
   isPR,
   setVelocities,
   velocityZones,
@@ -9657,7 +10759,7 @@ function CollapsedCard({
       onPressIn: () => setPressed(true),
       onPressOut: () => setPressed(false),
       accessibilityRole: "button",
-      accessibilityLabel: formatAccessibilityLabel2(name, summary, void 0),
+      accessibilityLabel: formatAccessibilityLabel(name, summary, void 0),
       testID: "exercise-card",
       children: /* @__PURE__ */ jsxs(
         reactNative.View,
@@ -9671,220 +10773,131 @@ function CollapsedCard({
             ...supersetMargin
           },
           children: [
-            /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row items-center",
-                testID: "exercise-card-header",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        fontSize: 14,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "exercise-card-name",
-                      children: name
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
-                  summary && /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-secondary",
-                      style: {
-                        fontSize: 12,
-                        fontFamily: "Inter, sans-serif",
-                        marginRight: 8
-                      },
-                      testID: "exercise-card-summary",
-                      children: formatSummary(summary)
-                    }
-                  ),
-                  e1rm && /* @__PURE__ */ jsx(
-                    WeightBadge,
-                    {
-                      value: roundWeight(e1rm.value),
-                      unit: e1rm.unit,
-                      size: "sm",
-                      showIcon: false,
-                      testID: "exercise-card-e1rm"
-                    }
-                  ),
-                  isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
-                ]
-              }
-            ),
-            (completedSets > 0 || remaining > 0) && /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row",
-                style: { marginTop: 6, gap: 4 },
-                testID: "exercise-card-strips",
-                children: [
-                  setVelocities?.map((velocities, i) => /* @__PURE__ */ jsx(
-                    VelocityStrip,
-                    {
-                      velocities,
-                      zones: velocityZones,
-                      variant: "mini",
-                      testID: `exercise-card-velocity-strip-${i}`
-                    },
-                    i
-                  )),
-                  Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx(
-                    PlaceholderStrip,
-                    {
-                      testID: `exercise-card-placeholder-${i}`
-                    },
-                    `placeholder-${i}`
-                  ))
-                ]
-              }
-            )
+            /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", testID: "exercise-card-header", children: [
+              /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-primary",
+                  style: {
+                    fontSize: 14,
+                    fontFamily: '"Space Grotesk", sans-serif',
+                    fontWeight: "700"
+                  },
+                  testID: "exercise-card-name",
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+              summary && /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-secondary",
+                  style: {
+                    fontSize: 12,
+                    fontFamily: "Inter, sans-serif",
+                    marginRight: 8
+                  },
+                  testID: "exercise-card-summary",
+                  children: formatSummary(summary)
+                }
+              ),
+              isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
+            ] }),
+            (completedSets > 0 || remaining > 0) && /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row", style: { marginTop: 6, gap: 4 }, testID: "exercise-card-strips", children: [
+              setVelocities?.map((velocities, i) => /* @__PURE__ */ jsx(
+                VelocityStrip,
+                {
+                  velocities,
+                  zones: velocityZones,
+                  variant: "mini",
+                  testID: `exercise-card-velocity-strip-${i}`
+                },
+                i
+              )),
+              Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx(
+                PlaceholderStrip,
+                {
+                  testID: `exercise-card-placeholder-${i}`
+                },
+                `placeholder-${i}`
+              ))
+            ] })
           ]
         }
       )
     }
   );
 }
+var DARK2 = getSemanticColors("dark");
+var BODY_DIVIDER = DARK2["border-subtle"];
+function deriveHeaderSetStates(sets) {
+  return sets.map((set) => {
+    switch (set.state) {
+      case "live":
+        return { status: "active", velocities: set.velocities, planned: set.target.reps };
+      case "done":
+        return { status: "done", velocities: set.velocities };
+      case "todo":
+        return { status: "todo", planned: set.planned ?? set.target.reps };
+    }
+  });
+}
 function ExpandedCard({
   name,
   onToggle,
   summary,
-  e1rm,
   isPR,
   sets,
   tempo,
+  indicator,
+  setStates,
+  stripHeight = 8,
+  velocityZones,
   supersetPosition
 }) {
   const borderRadius = getSupersetBorderRadius(supersetPosition);
   const supersetMargin = getSupersetMargin(supersetPosition);
   const unit = summary?.unit ?? sets?.[0]?.unit ?? "lbs";
-  const columnHeaders = buildColumnHeaders(unit);
+  const headerStates = setStates ?? (sets ? deriveHeaderSetStates(sets) : []);
+  const headerIndicator = indicator ?? (isPR ? "pr" : void 0);
   return /* @__PURE__ */ jsxs(
-    reactNative.View,
-    {
-      className: "bg-surface-elevated border-border",
-      style: {
-        borderWidth: 1,
-        ...borderRadius,
-        ...supersetMargin
-      },
-      testID: "exercise-card",
-      children: [
-        /* @__PURE__ */ jsx(
-          reactNative.Pressable,
-          {
-            onPress: onToggle,
-            accessibilityRole: "button",
-            accessibilityLabel: formatAccessibilityLabel2(name, summary, void 0),
-            "aria-expanded": true,
-            testID: "exercise-card-header",
-            children: /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row items-center",
-                style: {
-                  padding: 12,
-                  paddingHorizontal: 14,
-                  paddingBottom: 10,
-                  borderBottomWidth: 1,
-                  borderBottomColor: resolveColor("border-default")
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        fontSize: 14,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "exercise-card-name",
-                      children: name
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
-                  summary && /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-secondary",
-                      style: {
-                        fontSize: 12,
-                        fontFamily: "Inter, sans-serif",
-                        marginRight: 8
-                      },
-                      testID: "exercise-card-summary",
-                      children: formatSummary(summary)
-                    }
-                  ),
-                  e1rm && /* @__PURE__ */ jsx(
-                    WeightBadge,
-                    {
-                      value: roundWeight(e1rm.value),
-                      unit: e1rm.unit,
-                      size: "sm",
-                      showIcon: false,
-                      testID: "exercise-card-e1rm"
-                    }
-                  ),
-                  isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
-                ]
-              }
-            )
+    reactNative.View,
+    {
+      className: "bg-surface-elevated border-border",
+      style: {
+        borderWidth: 1,
+        ...borderRadius,
+        ...supersetMargin
+      },
+      testID: "exercise-card",
+      children: [
+        /* @__PURE__ */ jsx(
+          ExerciseCardHeading,
+          {
+            name,
+            sets: summary?.sets ?? sets?.length ?? 0,
+            reps: summary?.reps ?? 0,
+            load: summary?.weight ?? 0,
+            unit,
+            tempo,
+            indicator: headerIndicator,
+            setStates: headerStates,
+            stripHeight,
+            onPress: onToggle,
+            testID: "exercise-card-heading"
           }
         ),
-        tempo && /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: 8, paddingHorizontal: 14 }, testID: "exercise-card-tempo", children: /* @__PURE__ */ jsx(TempoDisplay, { tempo, size: "sm" }) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           reactNative.View,
           {
-            className: "flex-row",
-            style: {
-              paddingVertical: 8,
-              paddingHorizontal: 8,
-              paddingBottom: 4
-            },
-            testID: "exercise-card-column-headers",
-            children: columnHeaders.map((header, i) => {
-              const widths = [36, void 0, 44, 56, 36];
-              const width = widths[i];
-              const isFlex = width === void 0;
-              return /* @__PURE__ */ jsx(
-                reactNative.View,
-                {
-                  style: {
-                    ...isFlex ? {} : { width },
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: 8
-                  },
-                  ...isFlex ? { className: "flex-1" } : {},
-                  children: /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-tertiary",
-                      style: {
-                        fontSize: 10,
-                        fontWeight: "600",
-                        fontFamily: "Inter, sans-serif",
-                        textTransform: "uppercase",
-                        letterSpacing: 0.8
-                      },
-                      children: header
-                    }
-                  )
-                },
-                header
-              );
-            })
+            style: { borderTopWidth: 1, borderTopColor: BODY_DIVIDER, paddingBottom: 6 },
+            testID: "exercise-card-body",
+            children: [
+              /* @__PURE__ */ jsx(SetTableHeader, { unit, showPrevious: false, testID: "exercise-card-column-headers" }),
+              sets && /* @__PURE__ */ jsx(reactNative.View, { testID: "exercise-card-sets", children: sets.map((set, i) => /* @__PURE__ */ jsx(SetRow, { ...set, velocityZones: set.velocityZones ?? velocityZones }, i)) })
+            ]
           }
-        ),
-        sets && /* @__PURE__ */ jsx(reactNative.View, { testID: "exercise-card-sets", children: sets.map((setProps, i) => /* @__PURE__ */ jsx(SetRow, { ...setProps }, i)) })
+        )
       ]
     }
   );
@@ -9893,11 +10906,12 @@ function UpcomingCard({
   name,
   prescription,
   previousBest,
-  supersetPosition
+  supersetPosition,
+  onToggle
 }) {
   const borderRadius = getSupersetBorderRadius(supersetPosition);
   const supersetMargin = getSupersetMargin(supersetPosition);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress: onToggle, accessibilityRole: "button", children: /* @__PURE__ */ jsx(
     reactNative.View,
     {
       style: {
@@ -9907,7 +10921,7 @@ function UpcomingCard({
         ...borderRadius,
         ...supersetMargin
       },
-      accessibilityLabel: formatAccessibilityLabel2(name, void 0, prescription),
+      accessibilityLabel: formatAccessibilityLabel(name, void 0, prescription),
       testID: "exercise-card",
       children: /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", children: [
         /* @__PURE__ */ jsx(
@@ -9915,6 +10929,7 @@ function UpcomingCard({
           {
             className: "text-text-primary",
             style: {
+              flexShrink: 0,
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: "700"
@@ -9927,7 +10942,9 @@ function UpcomingCard({
           reactNative.Text,
           {
             className: "text-text-secondary",
+            numberOfLines: 1,
             style: {
+              flexShrink: 1,
               fontSize: 12,
               fontFamily: "Inter, sans-serif",
               marginLeft: 8
@@ -9936,12 +10953,14 @@ function UpcomingCard({
             children: prescription
           }
         ),
-        /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+        /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", style: { minWidth: 8 } }),
         previousBest && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             className: "text-text-tertiary",
+            numberOfLines: 1,
             style: {
+              flexShrink: 1,
               fontSize: 11,
               fontFamily: "Inter, sans-serif"
             },
@@ -9951,17 +10970,208 @@ function UpcomingCard({
         )
       ] })
     }
+  ) });
+}
+function ExerciseCard({
+  upcoming,
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  ...rest
+}) {
+  const [internalExpanded, setInternalExpanded] = React24.useState(defaultExpanded ?? false);
+  const isControlled = expanded !== void 0;
+  const isExpanded = isControlled ? expanded : internalExpanded;
+  const onToggle = () => {
+    const next = !isExpanded;
+    onExpandedChange?.(next);
+    if (!isControlled) setInternalExpanded(next);
+  };
+  if (upcoming) return /* @__PURE__ */ jsx(UpcomingCard, { ...rest, onToggle });
+  return isExpanded ? /* @__PURE__ */ jsx(ExpandedCard, { ...rest, onToggle }) : /* @__PURE__ */ jsx(CollapsedCard, { ...rest, onToggle });
+}
+var t10 = getSemanticColors("dark");
+var RAISED = primitiveColors.charcoal[400];
+var BAR_HEIGHT = 9;
+var BAR_GAP = 3;
+function SessionHeader({
+  title,
+  plan,
+  setsDone = 0,
+  elapsedMs,
+  budgetMs,
+  running = true,
+  metrics = [],
+  next,
+  className,
+  style,
+  ...props
+}) {
+  const upcoming = next != null;
+  const totalSets = plan.reduce((sum, e) => sum + e.sets, 0);
+  const hasPace = !upcoming && budgetMs != null && elapsedMs != null;
+  const target = hasPace ? elapsedMs / budgetMs : void 0;
+  const setsLabel = upcoming ? `${totalSets} sets` : `${Math.floor(setsDone)}/${totalSets} sets`;
+  const setsLabelColor = upcoming ? t10["text-secondary"] : paceToneColor(paceTone(totalSets > 0 ? setsDone / totalSets : 0, target));
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: [
+        {
+          backgroundColor: RAISED,
+          paddingTop: 11,
+          paddingRight: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          zIndex: 2
+        },
+        style
+      ],
+      testID: "session-rail-header",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            accessibilityRole: "header",
+            style: {
+              fontSize: 16,
+              lineHeight: 18,
+              fontWeight: "700",
+              fontFamily: '"Space Grotesk", sans-serif',
+              color: t10["text-primary"],
+              marginBottom: 10
+            },
+            testID: "session-rail-title",
+            children: title
+          }
+        ),
+        upcoming ? /* @__PURE__ */ jsx(ScheduleTiles, { when: next }) : /* @__PURE__ */ jsx(MetricTiles, { metrics }),
+        /* @__PURE__ */ jsxs(reactNative.View, { style: { marginTop: 10 }, children: [
+          /* @__PURE__ */ jsx(
+            SegmentedProgressBar,
+            {
+              segments: plan.map((e) => ({ weight: e.sets })),
+              value: upcoming ? 0 : setsDone,
+              target,
+              height: BAR_HEIGHT,
+              gap: BAR_GAP
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            reactNative.View,
+            {
+              style: {
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "baseline",
+                marginTop: 5
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "mono",
+                    style: { fontSize: 10, color: setsLabelColor },
+                    testID: "session-rail-sets",
+                    children: setsLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TimerReadout,
+                  {
+                    mode: "up",
+                    elapsedMs: upcoming ? budgetMs : elapsedMs,
+                    durationMs: budgetMs,
+                    running: running && !upcoming,
+                    showTotal: budgetMs != null && !upcoming
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
   );
 }
-function ExerciseCard(props) {
-  switch (props.state) {
-    case "collapsed":
-      return /* @__PURE__ */ jsx(CollapsedCard, { ...props });
-    case "expanded":
-      return /* @__PURE__ */ jsx(ExpandedCard, { ...props });
-    case "upcoming":
-      return /* @__PURE__ */ jsx(UpcomingCard, { ...props });
-  }
+var INSET = primitiveColors.charcoal[800];
+var DIVIDER = primitiveColors.charcoal[500];
+var DEFAULT_WIDTH = 246;
+function SessionRail({
+  title,
+  exercises,
+  setsDone,
+  elapsedMs,
+  budgetMs,
+  running,
+  metrics,
+  next,
+  stripHeight = 8,
+  width = DEFAULT_WIDTH,
+  onExercisePress,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: [{ width, flexDirection: "column", backgroundColor: INSET }, style],
+      testID: "session-rail",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SessionHeader,
+          {
+            title,
+            plan: exercises.map((ex) => ({ name: ex.name, sets: ex.summary.sets })),
+            setsDone,
+            elapsedMs,
+            budgetMs,
+            running,
+            metrics,
+            next
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: [{ flex: 1, backgroundColor: INSET }, neumorphicShadows.charcoal.pressed.subtle],
+            testID: "session-rail-list",
+            children: exercises.map((ex, i) => /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                style: {
+                  borderBottomWidth: i < exercises.length - 1 ? 1 : 0,
+                  borderBottomColor: DIVIDER
+                },
+                children: /* @__PURE__ */ jsx(
+                  ExerciseCardHeading,
+                  {
+                    name: ex.name,
+                    sets: ex.summary.sets,
+                    reps: ex.summary.reps,
+                    load: ex.summary.weight,
+                    unit: ex.summary.unit,
+                    tempo: ex.tempo,
+                    indicator: ex.indicator,
+                    setStates: ex.setStates,
+                    stripHeight,
+                    dimmed: ex.upcoming,
+                    onPress: () => onExercisePress?.(ex, i)
+                  }
+                )
+              },
+              ex.id ?? i
+            ))
+          }
+        )
+      ]
+    }
+  );
 }
 var DEFAULTS = {
   label: "SS",
@@ -10225,10 +11435,10 @@ function WeekRow({
     }
   );
 }
-var t8 = getSemanticColors("dark");
+var t11 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: t8["status-success"],
-  brandPrimary: t8["brand-primary"],
+  statusSuccess: t11["status-success"],
+  brandPrimary: t11["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -10712,12 +11922,12 @@ function PrHistoryModal({
     }
   );
 }
-var t9 = getSemanticColors("dark");
-var BRAND_PRIMARY9 = t9["brand-primary"];
+var t12 = getSemanticColors("dark");
+var BRAND_PRIMARY9 = t12["brand-primary"];
 var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
-var STATUS_SUCCESS = t9["status-success"];
-var STATUS_WARNING = t9["status-warning"];
-var STATUS_ERROR2 = t9["status-error"];
+var STATUS_SUCCESS = t12["status-success"];
+var STATUS_WARNING = t12["status-warning"];
+var STATUS_ERROR2 = t12["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}"],
@@ -10907,13 +12117,13 @@ function ReadinessCheck({
     )
   ] }) });
 }
-var t10 = getSemanticColors("dark");
-var BRAND_PRIMARY10 = t10["brand-primary"];
+var t13 = getSemanticColors("dark");
+var BRAND_PRIMARY10 = t13["brand-primary"];
 var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t10["status-success"];
-var WARNING = t10["status-warning"];
-var ERROR = t10["status-error"];
+var SUCCESS = t13["status-success"];
+var WARNING = t13["status-warning"];
+var ERROR = t13["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%)";
@@ -10985,7 +12195,7 @@ function StatusPill({ badge }) {
     }
   );
 }
-function MetricCell({ metric }) {
+function MetricCell2({ metric }) {
   return /* @__PURE__ */ jsxs(reactNative.View, { style: { width: "48%" }, testID: "meso-status-card-metric", children: [
     /* @__PURE__ */ jsx(
       reactNative.Text,
@@ -11203,7 +12413,7 @@ function MesoStatusCard({
               className: "flex-row flex-wrap",
               style: { gap: 8 },
               testID: "meso-status-card-metrics",
-              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell, { metric }, `${metric.label}-${index}`))
+              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell2, { metric }, `${metric.label}-${index}`))
             }
           ),
           gauges.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 12 }, testID: "meso-status-card-gauges", children: gauges.map((gauge, index) => /* @__PURE__ */ jsx(Gauge, { gauge }, `${gauge.label}-${index}`)) }),
@@ -11284,8 +12494,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t12 = Date.parse(dateStr);
-  return Number.isNaN(t12) ? 0 : t12;
+  const t18 = Date.parse(dateStr);
+  return Number.isNaN(t18) ? 0 : t18;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -11774,10 +12984,10 @@ function StrengthTrendChart({
     }
   );
 }
-var t11 = getSemanticColors("dark");
-var STATUS_SUCCESS3 = t11["status-success"];
-var STATUS_WARNING3 = t11["status-warning"];
-var STATUS_INFO = t11["status-info"];
+var t14 = getSemanticColors("dark");
+var STATUS_SUCCESS3 = t14["status-success"];
+var STATUS_WARNING3 = t14["status-warning"];
+var STATUS_INFO = t14["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -11820,13 +13030,13 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t12 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t12 * (b[key] - a[key]);
+      const t18 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t18 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
 }
-function buildColumns(pixels, step) {
+function buildColumns2(pixels, step) {
   if (pixels.length < 2) return [];
   const start = pixels[0].x;
   const end = pixels[pixels.length - 1].x;
@@ -11938,7 +13148,7 @@ function CapacityBandChart({
   }
   const { toX, toY } = scale;
   const bandPixels = toPixels(band, toX, toY);
-  const columns = buildColumns(bandPixels, COLUMN_STEP);
+  const columns = buildColumns2(bandPixels, COLUMN_STEP);
   const topEdge = buildEdges(bandPixels, "yHigh");
   const bottomEdge = buildEdges(bandPixels, "yLow");
   const lastBandPoint = band[band.length - 1];
@@ -12013,8 +13223,8 @@ function CapacityBandChart({
                   testID: "capacity-band-chart-reveal",
                   children: /* @__PURE__ */ jsxs(reactNative.View, { style: { width, height, position: "relative" }, children: [
                     projection && /* @__PURE__ */ jsxs(reactNative.View, { testID: "capacity-band-chart-projection", children: [
-                      renderColumns(buildColumns(trainingPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
-                      renderColumns(buildColumns(restPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
+                      renderColumns(buildColumns2(trainingPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
+                      renderColumns(buildColumns2(restPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
                       renderEdges(buildEdges(trainingPixels, "yHigh"), STATUS_SUCCESS3, true, "capacity-band-chart-projection-training"),
                       renderEdges(buildEdges(trainingPixels, "yLow"), STATUS_SUCCESS3, true, "capacity-band-chart-projection-training"),
                       renderEdges(buildEdges(restPixels, "yHigh"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
@@ -12081,72 +13291,585 @@ function CapacityBandChart({
                 return /* @__PURE__ */ jsx(
                   reactNative.Text,
                   {
-                    className: "text-text-tertiary",
+                    className: "text-text-tertiary",
+                    style: {
+                      position: "absolute",
+                      left: toX(point.date) - 14,
+                      top: height - PADDING_BOTTOM + 2,
+                      width: 28,
+                      textAlign: "center",
+                      fontSize: 10,
+                      fontFamily: "Inter, sans-serif"
+                    },
+                    accessibilityElementsHidden: true,
+                    importantForAccessibility: "no-hide-descendants",
+                    testID: "capacity-band-chart-x-label",
+                    children: formatDate2(point.date)
+                  },
+                  `x-${point.date}`
+                );
+              })
+            ]
+          }
+        ),
+        workouts.map((workout, i) => {
+          const cx = toX(workout.date);
+          const cy = toY(workout.load);
+          const color = DOT_COLORS[workout.status];
+          const dotStyle = {
+            width: DOT_SIZE,
+            height: DOT_SIZE,
+            borderRadius: DOT_SIZE / 2,
+            backgroundColor: color,
+            borderWidth: 2,
+            borderColor: DOT_BORDER
+          };
+          const label = `Workout on ${formatDate2(workout.date)}, load ${workout.load}, ${STATUS_PHRASES[workout.status]}`;
+          return /* @__PURE__ */ jsx(
+            reactNative.Animated.View,
+            {
+              style: {
+                position: "absolute",
+                left: cx - DOT_SIZE / 2,
+                top: cy - DOT_SIZE / 2,
+                transform: [{ scale: dotAnims[i] ?? 1 }]
+              },
+              testID: "capacity-band-chart-dot-wrapper",
+              children: onWorkoutPress ? /* @__PURE__ */ jsx(
+                reactNative.Pressable,
+                {
+                  onPress: () => onWorkoutPress(workout),
+                  accessibilityRole: "button",
+                  accessibilityLabel: label,
+                  style: dotStyle,
+                  testID: "capacity-band-chart-dot"
+                }
+              ) : /* @__PURE__ */ jsx(
+                reactNative.View,
+                {
+                  accessibilityElementsHidden: true,
+                  importantForAccessibility: "no-hide-descendants",
+                  style: dotStyle,
+                  testID: "capacity-band-chart-dot"
+                }
+              )
+            },
+            `dot-${workout.date}-${i}`
+          );
+        })
+      ]
+    }
+  );
+}
+var t15 = 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 = t15["text-tertiary"];
+var ZONE_SIZES = {
+  default: {
+    trackHeight: 14,
+    needleOverhang: 6,
+    needleWidth: 4,
+    tickLineNormal: 1.5,
+    tickLineEmphasized: 2,
+    tickLineHeightPad: 4,
+    tickLineTopPad: 2,
+    labelRowHeight: 16,
+    labelMarginTop: 5,
+    tickFont: 9,
+    tickLetterSpacing: 0.5,
+    tickCellWidth: 28
+  },
+  wall: {
+    trackHeight: 24,
+    needleOverhang: 9,
+    needleWidth: 7,
+    tickLineNormal: 2.5,
+    tickLineEmphasized: 3.5,
+    tickLineHeightPad: 6,
+    tickLineTopPad: 3,
+    labelRowHeight: 24,
+    labelMarginTop: 8,
+    tickFont: 14,
+    tickLetterSpacing: 0.5,
+    tickCellWidth: 48
+  }
+};
+function fraction(value, min, max) {
+  if (max <= min) return 0;
+  return Math.max(0, Math.min(1, (value - min) / (max - min)));
+}
+function pct(frac) {
+  return `${frac * 100}%`;
+}
+function ZoneTrack({
+  zones,
+  max,
+  min = 0,
+  marker = null,
+  ticks,
+  band = null,
+  size = "default",
+  trackHeight: trackHeightProp,
+  needleOverhang: needleOverhangProp,
+  trackColor = DEFAULT_TRACK_COLOR,
+  className,
+  style,
+  accessibilityLabel: accessibilityLabel2,
+  ...props
+}) {
+  const s = ZONE_SIZES[size];
+  const trackHeight = trackHeightProp ?? s.trackHeight;
+  const needleOverhang = needleOverhangProp ?? s.needleOverhang;
+  const isNeedle = marker?.type === "needle";
+  const markerHeight = isNeedle ? trackHeight + needleOverhang * 2 : trackHeight;
+  const markerFrac = marker != null ? fraction(marker.value, min, max) : 0;
+  const bands = zones.map((zone, i) => {
+    const prev = i === 0 ? min : zones[i - 1].upTo;
+    const start = Math.max(min, Math.min(max, prev));
+    const end = Math.max(min, Math.min(max, zone.upTo));
+    return { color: zone.color, weight: Math.max(0, end - start) };
+  });
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: [{ width: "100%" }, style],
+      accessibilityRole: "progressbar",
+      accessibilityValue: marker != null ? { min, max, now: marker.value } : { min, max, now: min },
+      accessibilityLabel: accessibilityLabel2 ?? `Zone track: ${marker?.value ?? min}`,
+      testID: "zone-track",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { style: { position: "relative", height: markerHeight }, children: [
+          /* @__PURE__ */ jsxs(
+            reactNative.View,
+            {
+              testID: "zone-track-track",
+              accessibilityElementsHidden: true,
+              style: {
+                position: "absolute",
+                top: (markerHeight - trackHeight) / 2,
+                left: 0,
+                right: 0,
+                height: trackHeight,
+                borderRadius: trackHeight / 2,
+                backgroundColor: trackColor,
+                overflow: "hidden",
+                flexDirection: "row",
+                // The pill's own box-shadow renders outside its overflow:hidden, so
+                // `glow` haloes the whole track in the marker colour.
+                ...marker?.glow ? { boxShadow: glowShadow(marker.color ?? DEFAULT_MARKER_COLOR2) } : null
+              },
+              children: [
+                bands.map((b, i) => /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    testID: "zone-track-band",
+                    style: {
+                      flexGrow: b.weight,
+                      flexShrink: 1,
+                      flexBasis: 0,
+                      minWidth: 0,
+                      height: "100%",
+                      backgroundColor: b.color
+                    }
+                  },
+                  i
+                )),
+                band != null && /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    testID: "zone-track-band-highlight",
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      left: pct(fraction(band.from, min, max)),
+                      width: pct(fraction(band.to, min, max) - fraction(band.from, min, max)),
+                      backgroundColor: band.color
+                    }
+                  }
+                ),
+                marker?.type === "fill" && /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    testID: "zone-track-unfilled",
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      left: pct(markerFrac),
+                      right: 0,
+                      backgroundColor: trackColor
+                    }
+                  }
+                ),
+                marker?.type === "fill" && marker.color != null && /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    testID: "zone-track-fill",
                     style: {
                       position: "absolute",
-                      left: toX(point.date) - 14,
-                      top: height - PADDING_BOTTOM + 2,
-                      width: 28,
-                      textAlign: "center",
-                      fontSize: 10,
-                      fontFamily: "Inter, sans-serif"
-                    },
-                    accessibilityElementsHidden: true,
-                    importantForAccessibility: "no-hide-descendants",
-                    testID: "capacity-band-chart-x-label",
-                    children: formatDate2(point.date)
-                  },
-                  `x-${point.date}`
-                );
-              })
-            ]
-          }
-        ),
-        workouts.map((workout, i) => {
-          const cx = toX(workout.date);
-          const cy = toY(workout.load);
-          const color = DOT_COLORS[workout.status];
-          const dotStyle = {
-            width: DOT_SIZE,
-            height: DOT_SIZE,
-            borderRadius: DOT_SIZE / 2,
-            backgroundColor: color,
-            borderWidth: 2,
-            borderColor: DOT_BORDER
-          };
-          const label = `Workout on ${formatDate2(workout.date)}, load ${workout.load}, ${STATUS_PHRASES[workout.status]}`;
-          return /* @__PURE__ */ jsx(
-            reactNative.Animated.View,
+                      top: 0,
+                      bottom: 0,
+                      left: 0,
+                      width: pct(markerFrac),
+                      backgroundColor: marker.color
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          isNeedle && /* @__PURE__ */ jsx(
+            reactNative.View,
             {
+              testID: "zone-track-needle",
               style: {
                 position: "absolute",
-                left: cx - DOT_SIZE / 2,
-                top: cy - DOT_SIZE / 2,
-                transform: [{ scale: dotAnims[i] ?? 1 }]
+                top: 0,
+                left: pct(markerFrac),
+                width: s.needleWidth,
+                height: markerHeight,
+                borderRadius: s.needleWidth / 2,
+                backgroundColor: marker.color ?? DEFAULT_MARKER_COLOR2,
+                transform: [{ translateX: -s.needleWidth / 2 }]
+              }
+            }
+          ),
+          ticks?.map((tick, i) => {
+            const emphasized = tick.emphasized === true;
+            const lineColor = tick.color ?? (emphasized ? t15["brand-primary"] : TICK_COLOR);
+            const lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal;
+            return /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                testID: "zone-track-tick-line",
+                accessibilityElementsHidden: true,
+                style: {
+                  position: "absolute",
+                  top: (markerHeight - trackHeight) / 2 - s.tickLineTopPad,
+                  left: pct(fraction(tick.value, min, max)),
+                  width: lineWidth,
+                  height: trackHeight + s.tickLineHeightPad,
+                  borderRadius: lineWidth / 2,
+                  backgroundColor: lineColor,
+                  transform: [{ translateX: -lineWidth / 2 }],
+                  zIndex: 3
+                }
               },
-              testID: "capacity-band-chart-dot-wrapper",
-              children: onWorkoutPress ? /* @__PURE__ */ jsx(
-                reactNative.Pressable,
+              `line-${i}`
+            );
+          })
+        ] }),
+        ticks != null && ticks.length > 0 && /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: { position: "relative", height: s.labelRowHeight, marginTop: s.labelMarginTop },
+            children: ticks.map((tick, i) => {
+              if (tick.label == null) return null;
+              const emphasized = tick.emphasized === true;
+              const labelColor = tick.color ?? (emphasized ? t15["brand-primary"] : TICK_COLOR);
+              const labelNode = /* @__PURE__ */ jsx(
+                reactNative.Text,
                 {
-                  onPress: () => onWorkoutPress(workout),
-                  accessibilityRole: "button",
-                  accessibilityLabel: label,
-                  style: dotStyle,
-                  testID: "capacity-band-chart-dot"
+                  testID: "zone-track-tick-label",
+                  style: {
+                    fontSize: s.tickFont,
+                    letterSpacing: s.tickLetterSpacing,
+                    color: labelColor,
+                    fontFamily: "monospace",
+                    fontWeight: emphasized ? "700" : "400"
+                  },
+                  children: tick.label
                 }
-              ) : /* @__PURE__ */ jsx(
+              );
+              return /* @__PURE__ */ jsx(
                 reactNative.View,
                 {
-                  accessibilityElementsHidden: true,
-                  importantForAccessibility: "no-hide-descendants",
-                  style: dotStyle,
-                  testID: "capacity-band-chart-dot"
-                }
-              )
+                  testID: "zone-track-tick",
+                  style: {
+                    position: "absolute",
+                    left: pct(fraction(tick.value, min, max)),
+                    transform: [{ translateX: -s.tickCellWidth / 2 }],
+                    width: s.tickCellWidth,
+                    alignItems: "center"
+                  },
+                  children: tick.tooltip != null ? /* @__PURE__ */ jsx(Tooltip, { label: tick.tooltip, placement: "top", children: labelNode }) : labelNode
+                },
+                `label-${i}`
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/custom/Workout/FatigueMeter.tsx
+var { green, yellow, orange, red } = WORKOUT_TOKENS.scale;
+var DEFAULT_ZONE_COLORS = [green, yellow, orange, red];
+var DEFAULT_THRESHOLDS = [10, 20, 30];
+var DEFAULT_LABELS = ["fresh", "VL10", "VL20", "VL30", "stop"];
+var DEFAULT_MAX = 40;
+function FatigueMeter({
+  value,
+  max = DEFAULT_MAX,
+  thresholds = DEFAULT_THRESHOLDS,
+  zoneColors = DEFAULT_ZONE_COLORS,
+  labels = DEFAULT_LABELS,
+  size = "default",
+  trackHeight,
+  needleColor,
+  className,
+  ...props
+}) {
+  const [t1, t22, t32] = thresholds;
+  const zones = [
+    { upTo: t1, color: zoneColors[0] },
+    { upTo: t22, color: zoneColors[1] },
+    { upTo: t32, color: zoneColors[2] },
+    { upTo: max, color: zoneColors[3] }
+  ];
+  const tickValues = [0, t1, t22, t32, max];
+  const ticks = tickValues.map((v, i) => ({ value: v, label: labels[i] }));
+  return /* @__PURE__ */ jsx(
+    ZoneTrack,
+    {
+      className,
+      zones,
+      min: 0,
+      max,
+      size,
+      trackHeight,
+      ticks,
+      marker: { type: "needle", value, color: needleColor },
+      accessibilityLabel: `Fatigue: ${value}% velocity loss`,
+      testID: "fatigue-meter",
+      ...props
+    }
+  );
+}
+var HEAT = WORKOUT_TOKENS.heatmap;
+var NEUTRAL_TRACK = primitiveColors.charcoal[200];
+var MONO = "monospace";
+var HEAT_BY_ZONE = {
+  under: HEAT.under,
+  maintenance: HEAT.maintenance,
+  productive: HEAT.productive,
+  approaching: HEAT.approaching,
+  over: HEAT.over
+};
+var ZONE_DESCRIPTION = {
+  under: "below MEV",
+  maintenance: "building toward MAV",
+  productive: "in the productive zone",
+  approaching: "approaching MRV",
+  over: "over MRV"
+};
+var LANDMARK_NAME = {
+  MEV: "Minimum Effective Volume",
+  MAV: "Maximum Adaptive Volume",
+  MRV: "Maximum Recoverable Volume"
+};
+function zoneForSets(sets, { mev, mav, mrv }) {
+  if (sets < mev) return "under";
+  if (sets < mav) return "maintenance";
+  if (sets >= mrv) return "over";
+  const midpoint = (mav + mrv) / 2;
+  return sets < midpoint ? "productive" : "approaching";
+}
+function VolumeLandmarkBar({
+  muscle,
+  currentSets,
+  landmarks,
+  width = 220,
+  trackHeight = 10,
+  scaleMax,
+  className,
+  style,
+  ...props
+}) {
+  const { mev, mav, mrv } = landmarks;
+  const max = scaleMax ?? mrv * 1.2;
+  const zone = zoneForSets(currentSets, landmarks);
+  const fillColor = HEAT_BY_ZONE[zone];
+  const pct2 = mav > 0 ? Math.round(currentSets / mav * 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: [{ width, gap: 3 }, style],
+      testID: "volume-landmark-bar",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          DataRow,
+          {
+            label: muscle,
+            value: /* @__PURE__ */ jsxs(
+              reactNative.Text,
+              {
+                testID: "volume-landmark-pct",
+                style: { fontSize: 14, fontWeight: "700", fontFamily: MONO, color: fillColor },
+                children: [
+                  pct2,
+                  "%"
+                ]
+              }
+            ),
+            className: "py-0",
+            testID: "volume-landmark-header"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ZoneTrack,
+          {
+            zones: [{ upTo: max, color: NEUTRAL_TRACK }],
+            max,
+            marker: {
+              type: "fill",
+              value: currentSets,
+              color: fillColor,
+              // Glow when in the optimal productive band — the "sweet spot" cue.
+              glow: zone === "productive"
             },
-            `dot-${workout.date}-${i}`
-          );
-        })
+            trackColor: NEUTRAL_TRACK,
+            trackHeight,
+            ticks: [
+              { value: mev, label: "MEV", tooltip: `${LANDMARK_NAME.MEV} \xB7 ${mev} sets/wk` },
+              {
+                value: mav,
+                label: "MAV",
+                emphasized: true,
+                tooltip: `${LANDMARK_NAME.MAV} (target) \xB7 ${mav} sets/wk`
+              },
+              { value: mrv, label: "MRV", tooltip: `${LANDMARK_NAME.MRV} \xB7 ${mrv} sets/wk` }
+            ],
+            accessibilityLabel: `${muscle} weekly volume: ${currentSets} sets, ${pct2}% of MAV target, ${ZONE_DESCRIPTION[zone]}`,
+            testID: "volume-landmark-track"
+          }
+        )
+      ]
+    }
+  );
+}
+var t16 = getSemanticColors("dark");
+var statusToken = {
+  productive: "status-success",
+  threshold: "status-warning",
+  stop: "status-error"
+};
+var statusDotVariant = {
+  productive: "success",
+  threshold: "warning",
+  stop: "error"
+};
+var defaultLabel = {
+  productive: "Productive",
+  threshold: "Threshold",
+  stop: "Stop"
+};
+function statusPillColor(status) {
+  return t16[statusToken[status]];
+}
+function StatusPill2({ status, label, className, style, ...props }) {
+  const color = statusPillColor(status);
+  const text = label ?? defaultLabel[status];
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      testID: "status-pill",
+      className,
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 7,
+          alignSelf: "flex-start",
+          paddingVertical: 7,
+          paddingHorizontal: 13,
+          borderRadius: 9,
+          backgroundColor: alpha(color, 0.14),
+          borderWidth: 1,
+          borderColor: alpha(color, 0.4)
+        },
+        style
+      ],
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(StatusDot, { variant: statusDotVariant[status], glow: true }) }),
+        /* @__PURE__ */ jsx(reactNative.Text, { testID: "status-pill-label", style: { fontSize: 13, fontWeight: "800", color }, children: text })
+      ]
+    }
+  );
+}
+var t17 = getSemanticColors("dark");
+var categoryToken = {
+  productive: null,
+  threshold: "status-warning",
+  stop: "status-error"
+};
+var floodOpacity = {
+  productive: 0,
+  threshold: 0.12,
+  stop: 0.18
+};
+function liveAuraColor(category) {
+  const token = categoryToken[category];
+  return token ? t17[token] : null;
+}
+function LiveAuraFrame({
+  category,
+  pulse = true,
+  className,
+  children,
+  style,
+  ...props
+}) {
+  const color = liveAuraColor(category);
+  const tint = color ? alpha(color, floodOpacity[category]) : "transparent";
+  const floodStyle = {
+    ...reactNative.StyleSheet.absoluteFillObject,
+    ...reactNative.Platform.OS === "web" ? (
+      // backgroundImage is a runtime RNW style, not in RN ViewStyle types.
+      { backgroundImage: `radial-gradient(130% 95% at 50% 0%, ${tint}, transparent 62%)` }
+    ) : { backgroundColor: tint }
+  };
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      testID: "live-aura-frame",
+      className,
+      style: [
+        {
+          position: "relative",
+          overflow: "hidden",
+          borderRadius: 10,
+          backgroundColor: t17["background-base"],
+          borderWidth: 1,
+          borderColor: t17["border-default"]
+        },
+        style
+      ],
+      ...props,
+      children: [
+        color && /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            testID: "live-aura-flood",
+            accessibilityElementsHidden: true,
+            pointerEvents: "none",
+            className: category === "stop" && pulse ? "animate-pulse" : void 0,
+            style: floodStyle
+          }
+        ),
+        children
       ]
     }
   );
@@ -12357,28 +14080,28 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t12, i) => {
-            const y = toY(t12);
+          ticksOf(yd, TICK_COUNT).map((t18, i) => {
+            const y = toY(t18);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-y",
                 style: { position: "absolute", left: PLOT_LEFT2, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t12) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t18) })
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t12, i) => {
-            const x = toX(t12);
+          ticksOf(xd, TICK_COUNT).map((t18, i) => {
+            const x = toX(t18);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-x",
                 style: { position: "absolute", top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t12) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t18) })
               },
               `x-${i}`
             );
@@ -12443,7 +14166,7 @@ var STATUS_SUCCESS4 = sem2["status-success"];
 var STATUS_WARNING4 = sem2["status-warning"];
 var STATUS_ERROR4 = sem2["status-error"];
 var TRACK = "rgba(255,255,255,0.08)";
-var DEFAULT_THRESHOLDS = [
+var DEFAULT_THRESHOLDS2 = [
   { value: 0, color: STATUS_ERROR4 },
   { value: 60, color: STATUS_WARNING4 },
   { value: 80, color: STATUS_SUCCESS4 }
@@ -12458,8 +14181,8 @@ function clamp012(n) {
 function formatValue2(v) {
   return Number.isInteger(v) ? `${v}` : v.toFixed(1);
 }
-function bandColor2(fraction, bands, min, max) {
-  const value = min + fraction * (max - min);
+function bandColor2(fraction2, bands, min, max) {
+  const value = min + fraction2 * (max - min);
   const sorted = [...bands].sort((a, b) => a.value - b.value);
   let color = sorted[0]?.color ?? STATUS_SUCCESS4;
   for (const band of sorted) {
@@ -12471,15 +14194,15 @@ function buildTicks(fill, size, activeColor) {
   const center = size / 2;
   const radius = center - size * 0.08;
   return Array.from({ length: SEGMENTS }, (_, i) => {
-    const fraction = (i + 0.5) / SEGMENTS;
-    const deg = ARC_START + fraction * ARC_SWEEP;
+    const fraction2 = (i + 0.5) / SEGMENTS;
+    const deg = ARC_START + fraction2 * ARC_SWEEP;
     const rad = deg * Math.PI / 180;
     return {
       key: i,
       left: center + radius * Math.cos(rad),
       top: center + radius * Math.sin(rad),
       rotate: `${deg - 90}deg`,
-      color: fraction <= fill ? activeColor(fraction) : TRACK
+      color: fraction2 <= fill ? activeColor(fraction2) : TRACK
     };
   });
 }
@@ -12490,7 +14213,7 @@ function Gauge2({
   size = 160,
   label,
   unit,
-  thresholds = DEFAULT_THRESHOLDS,
+  thresholds = DEFAULT_THRESHOLDS2,
   color,
   className,
   ...props
@@ -12513,23 +14236,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t12) => /* @__PURE__ */ jsx(
+        ticks.map((t18) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t12.left - tickThickness / 2,
-              top: t12.top - tickLength / 2,
+              left: t18.left - tickThickness / 2,
+              top: t18.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t12.color,
-              transform: [{ rotate: t12.rotate }]
+              backgroundColor: t18.color,
+              transform: [{ rotate: t18.rotate }]
             }
           },
-          t12.key
+          t18.key
         )),
         /* @__PURE__ */ jsxs(reactNative.View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -12575,7 +14298,7 @@ function BrandLockup({
 }
 var stateConfig = {
   // live = vivid green with an expanding ring; rest = solid amber (no pulse — operator); idle is dim.
-  live: { label: "LIVE", color: "success", pulse: "ping", textColor: "primary" },
+  live: { label: "LIVE", color: "live", pulse: "ping", textColor: "primary" },
   rest: { label: "REST", color: "warning", pulse: false, textColor: "primary" },
   idle: { label: "IDLE", color: "default", pulse: false, textColor: "secondary" }
 };
@@ -12739,6 +14462,127 @@ function TopBar({
     }
   );
 }
+function NavItem({
+  icon,
+  label,
+  active = false,
+  live = false,
+  onPress,
+  className
+}) {
+  const glyphColor = active ? "text-brand-primary" : "text-text-tertiary";
+  const labelColor = active ? "text-brand-primary" : live ? "text-status-live-muted" : "text-text-tertiary";
+  return /* @__PURE__ */ jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityState: { selected: active },
+      accessibilityLabel: label,
+      onPress,
+      className: cn("relative h-[46px] w-[60px] items-center justify-center", className),
+      children: [
+        active ? /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            testID: "nav-item-accent",
+            className: "absolute left-0 top-[13px] bottom-[13px] w-[3px] rounded-r-[3px] bg-brand-primary"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          reactNative.View,
+          {
+            className: cn(
+              "h-[46px] w-[46px] items-center justify-center gap-[3px] rounded-[11px]",
+              glyphColor
+            ),
+            children: [
+              icon,
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "button",
+                  color: "inherit",
+                  className: cn("text-[8.5px] font-bold uppercase tracking-[0.4px]", labelColor),
+                  children: label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var defaultNavItems = [
+  { key: "live", label: "Live", icon: /* @__PURE__ */ jsx(ActivityIcon, { size: 20, color: "currentColor" }) },
+  { key: "review", label: "Review", icon: /* @__PURE__ */ jsx(HistoryIcon, { size: 20, color: "currentColor" }) },
+  { key: "program", label: "Plan", icon: /* @__PURE__ */ jsx(LayersIcon, { size: 20, color: "currentColor" }) },
+  { key: "body", label: "Body", icon: /* @__PURE__ */ jsx(PersonStandingIcon, { size: 20, color: "currentColor" }) }
+];
+function SideNav({
+  items = defaultNavItems,
+  activeKey,
+  onNavigate,
+  liveKey = null,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      accessibilityRole: "tablist",
+      className: cn(
+        "w-[60px] items-center gap-[6px] border-r border-border bg-background-base py-3",
+        className
+      ),
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        NavItem,
+        {
+          icon: item.icon,
+          label: item.label,
+          active: item.key === activeKey,
+          live: item.key === liveKey && item.key !== activeKey,
+          onPress: () => onNavigate?.(item.key)
+        },
+        item.key
+      ))
+    }
+  );
+}
+var DEMO_DEVICES = [
+  { id: "Voltra-A3F2", nickname: "Left Cable", slot: "L", state: "connected" },
+  { id: "Voltra-9B1C", nickname: "Right Cable", slot: "R", state: "connected" }
+];
+function ContentPlaceholder() {
+  return /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(reactNative.Text, { className: "font-heading text-sm text-text-tertiary", children: "main content region" }) });
+}
+function DashboardShell({
+  activeKey = "live",
+  navItems,
+  liveKey = null,
+  state = "live",
+  devices = DEMO_DEVICES,
+  subtitle = "wall dashboard",
+  onNavigate,
+  onSelectDevice,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-1 flex-row bg-surface-base", className), children: [
+    /* @__PURE__ */ jsx(SideNav, { activeKey, items: navItems, liveKey, onNavigate }),
+    /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-1", children: [
+      /* @__PURE__ */ jsx(
+        TopBar,
+        {
+          state,
+          devices,
+          subtitle,
+          onSelectDevice
+        }
+      ),
+      /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", children: children ?? /* @__PURE__ */ jsx(ContentPlaceholder, {}) })
+    ] })
+  ] });
+}
 
 // src/utils/form.ts
 function getFieldValidationProps(state) {
@@ -12832,13 +14676,16 @@ exports.Accordion = Accordion;
 exports.AccordionButton = AccordionButton;
 exports.AccordionItem = AccordionItem;
 exports.AccordionPanel = AccordionPanel;
+exports.ActivityIcon = ActivityIcon;
 exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
+exports.AlertTriangleIcon = AlertTriangleIcon;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.AvatarBadge = AvatarBadge;
 exports.AvatarGroup = AvatarGroup;
+exports.AwardIcon = AwardIcon;
 exports.Badge = Badge;
 exports.BadgeText = BadgeText;
 exports.BaseBadge = BaseBadge;
@@ -12863,10 +14710,13 @@ exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.Chip = Chip;
+exports.CircleSlashIcon = CircleSlashIcon;
 exports.CircularProgress = CircularProgress;
+exports.CircularTimer = CircularTimer;
 exports.Collapse = Collapse;
 exports.CollapseButton = CollapseButton;
 exports.CollapseContent = CollapseContent;
+exports.DashboardShell = DashboardShell;
 exports.DataRow = DataRow;
 exports.DateTime = DateTime;
 exports.DeviationBar = DeviationBar;
@@ -12881,6 +14731,10 @@ exports.DrawerHeader = DrawerHeader;
 exports.DumbbellIcon = DumbbellIcon;
 exports.EmptyState = EmptyState;
 exports.ExerciseCard = ExerciseCard;
+exports.ExerciseCardHeading = ExerciseCardHeading;
+exports.ExerciseHeading = ExerciseHeading;
+exports.ExerciseIndicator = ExerciseIndicator;
+exports.FatigueMeter = FatigueMeter;
 exports.FormActions = FormActions;
 exports.FormField = FormField;
 exports.FormRow = FormRow;
@@ -12889,20 +14743,26 @@ exports.Gauge = Gauge2;
 exports.HStack = HStack;
 exports.Heading = Heading;
 exports.HelpTip = HelpTip;
+exports.HistoryIcon = HistoryIcon;
+exports.INDICATOR_PRECEDENCE = INDICATOR_PRECEDENCE;
 exports.IconBox = IconBox;
 exports.Indicator = Indicator;
+exports.InfoIcon = InfoIcon;
 exports.Input = Input;
 exports.InputBar = InputBar;
 exports.InputGroup = InputGroup;
 exports.IntensityBar = IntensityBar;
 exports.Label = Label;
 exports.LabelWithHelp = LabelWithHelp;
+exports.LayersIcon = LayersIcon;
 exports.Link = Link;
 exports.ListItem = ListItem;
 exports.ListItemContent = ListItemContent;
 exports.ListItemDivider = ListItemDivider;
 exports.ListItemIcon = ListItemIcon;
 exports.ListItemTrailing = ListItemTrailing;
+exports.LiveAuraFrame = LiveAuraFrame;
+exports.METRIC_FONT = METRIC_FONT;
 exports.Menu = Menu;
 exports.MenuDivider = MenuDivider;
 exports.MenuGroup = MenuGroup;
@@ -12913,7 +14773,9 @@ exports.MesoCard = MesoCard;
 exports.MesoProgressBar = MesoProgressBar;
 exports.MesoStatusCard = MesoStatusCard;
 exports.Metric = Metric;
+exports.MetricCell = MetricCell;
 exports.MetricGroup = MetricGroup;
+exports.MetricTiles = MetricTiles;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalCloseButton = ModalCloseButton;
@@ -12922,9 +14784,11 @@ exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.ModalTitle = ModalTitle;
 exports.MuscleGroupChip = MuscleGroupChip;
+exports.NavItem = NavItem;
 exports.Overline = Overline;
 exports.Paragraph = Paragraph;
 exports.PasswordInput = PasswordInput;
+exports.PersonStandingIcon = PersonStandingIcon;
 exports.Pill = Pill;
 exports.PlaceholderStrip = PlaceholderStrip;
 exports.Popover = Popover;
@@ -12939,13 +14803,26 @@ exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.ReadinessCheck = ReadinessCheck;
 exports.RestTimer = RestTimer;
+exports.SET_STRIP_VARIABLE_COLOR = SET_STRIP_VARIABLE_COLOR;
+exports.SET_STRIP_ZONES = SET_STRIP_ZONES;
+exports.ScaleIcon = ScaleIcon;
 exports.Scatter = Scatter;
+exports.ScheduleTiles = ScheduleTiles;
 exports.Section = Section;
 exports.SectionContent = SectionContent;
 exports.SectionHeader = SectionHeader;
+exports.SegmentedBar = SegmentedBar;
+exports.SegmentedProgressBar = SegmentedProgressBar;
 exports.Select = Select;
+exports.SessionHeader = SessionHeader;
+exports.SessionRail = SessionRail;
 exports.SessionStatePill = SessionStatePill;
+exports.SetBar = SetBar;
 exports.SetRow = SetRow;
+exports.SetStrip = SetStrip;
+exports.SetTableHeader = SetTableHeader;
+exports.SetsRepsLoad = SetsRepsLoad;
+exports.SideNav = SideNav;
 exports.Sidebar = Sidebar;
 exports.SidebarContent = SidebarContent;
 exports.SidebarDivider = SidebarDivider;
@@ -12963,6 +14840,7 @@ exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.StarIcon = StarIcon;
 exports.StatusDot = StatusDot;
+exports.StatusPill = StatusPill2;
 exports.StepContent = StepContent;
 exports.StepIndicator = StepIndicator;
 exports.StepLabel = StepLabel;
@@ -12988,6 +14866,8 @@ exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.TempoBar = TempoBar;
 exports.TempoDisplay = TempoDisplay;
+exports.Tile = Tile;
+exports.TimerReadout = TimerReadout;
 exports.Toast = Toast;
 exports.ToastProvider = ToastProvider;
 exports.ToolbarButton = ToolbarButton;
@@ -12995,14 +14875,17 @@ exports.ToolbarButtonGroup = ToolbarButtonGroup;
 exports.Tooltip = Tooltip;
 exports.TopBar = TopBar;
 exports.Treemap = Treemap;
+exports.TrendingDownIcon = TrendingDownIcon;
 exports.Typography = Typography;
 exports.VStack = VStack;
 exports.VelocityStrip = VelocityStrip;
 exports.VoltrasMark = VoltrasMark;
+exports.VolumeLandmarkBar = VolumeLandmarkBar;
 exports.WeekRow = WeekRow;
 exports.WeightBadge = WeightBadge;
 exports.WorkoutCard = WorkoutCard;
 exports.WorkoutPill = WorkoutPill;
+exports.ZoneTrack = ZoneTrack;
 exports.alpha = alpha;
 exports.applyThemePreset = applyThemePreset;
 exports.audiobookPreset = audiobookPreset;
@@ -13022,11 +14905,13 @@ exports.createRaisedHoverShadow = createRaisedHoverShadow;
 exports.createRaisedShadow = createRaisedShadow;
 exports.darkThemeCSSVars = darkThemeCSSVars;
 exports.darken = darken;
+exports.defaultNavItems = defaultNavItems;
 exports.defaultPreset = defaultPreset;
 exports.discreteRainbow = discreteRainbow;
 exports.divergingScale = divergingScale;
 exports.elevationSystem = elevationSystem;
 exports.formatDateTime = formatDateTime;
+exports.formatDuration = formatDuration;
 exports.formatPrescription = formatPrescription;
 exports.formatSignedPct = formatSignedPct;
 exports.formatVelocity = formatVelocity;
@@ -13063,7 +14948,10 @@ exports.isValidEmail = isValidEmail;
 exports.lightThemeCSSVars = lightThemeCSSVars;
 exports.lighten = lighten;
 exports.linearGradient = linearGradient;
+exports.liveAuraColor = liveAuraColor;
 exports.neumorphicShadows = neumorphicShadows;
+exports.paceTone = paceTone;
+exports.paceToneColor = paceToneColor;
 exports.primitiveBorderRadius = primitiveBorderRadius;
 exports.primitiveBreakpoints = primitiveBreakpoints;
 exports.primitiveColors = primitiveColors;
@@ -13073,6 +14961,7 @@ exports.primitiveSpacing = primitiveSpacing;
 exports.primitiveTypography = primitiveTypography;
 exports.primitiveZIndex = primitiveZIndex;
 exports.resolveColor = resolveColor;
+exports.resolveIndicator = resolveIndicator;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsv = rgbToHsv;
 exports.roundRpe = roundRpe;
@@ -13084,11 +14973,14 @@ exports.semanticColorsLight = semanticColorsLight;
 exports.semanticTypography = semanticTypography;
 exports.sequentialEffort = sequentialEffort;
 exports.shadowColors = shadowColors;
+exports.statusPillColor = statusPillColor;
 exports.surfaceGradient = surfaceGradient;
 exports.useTable = useTable;
+exports.useTimer = useTimer;
 exports.useToast = useToast;
 exports.useToolbarButton = useToolbarButton;
 exports.validateCssPropertyManifest = validateCssPropertyManifest;
 exports.validationRules = validationRules;
+exports.velocityZoneColor = velocityZoneColor;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map