@titan-design/react-ui 0.7.0 → 0.9.0

package/dist/index.mjs

@@ -152,6 +152,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"
   },
@@ -159,6 +160,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"
   },
@@ -166,6 +168,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"
   },
@@ -173,6 +176,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"
   }
@@ -186,6 +190,8 @@ var defaultIcons = {
 function Alert({
   status = "info",
   variant = "subtle",
+  size = "default",
+  message,
   icon,
   showIcon = true,
   onClose,
@@ -195,28 +201,43 @@ function Alert({
 }) {
   const colors = statusColors[status];
   const isSolid = variant === "solid";
+  const isCompact = size === "compact";
   return /* @__PURE__ */ jsxs(
     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(View, { className: "mr-3 mt-0.5", children: icon || /* @__PURE__ */ jsx(
+        showIcon && /* @__PURE__ */ jsx(View, { className: isCompact ? "mr-2" : "mr-3 mt-0.5", children: icon || /* @__PURE__ */ jsx(
           Text,
           {
             className: cn(
-              "text-lg font-bold",
+              "font-bold",
+              isCompact ? "text-base" : "text-lg",
               isSolid ? "text-white" : colors.icon
             ),
             children: defaultIcons[status]
           }
         ) }),
-        /* @__PURE__ */ jsx(View, { className: "flex-1", children }),
+        /* @__PURE__ */ jsxs(View, { className: "flex-1", children: [
+          message != null && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: cn("text-sm font-semibold", isSolid ? "text-white" : colors.text),
+              testID: "alert-message",
+              children: message
+            }
+          ),
+          children
+        ] }),
         onClose && /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -5066,6 +5087,8 @@ function CircularProgress({
   color = "primary",
   showValue = false,
   formatValue: formatValue3 = (v, m) => `${Math.round(v / m * 100)}%`,
+  children,
+  fill = false,
   className,
   ...props
 }) {
@@ -5074,11 +5097,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(
     View,
     {
       className: cn("items-center justify-center", className),
-      style: { width: size, height: size },
+      style: boxStyle,
       accessibilityRole: "progressbar",
       accessibilityValue: {
         min: 0,
@@ -5087,52 +5111,56 @@ function CircularProgress({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(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(
           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(
           Text,
           {
             className: "text-xs font-semibold text-text-primary absolute",
@@ -5228,7 +5256,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((t18) => t18.id !== id));
+    setToasts((prev) => prev.filter((t17) => t17.id !== id));
   }, []);
   const removeAllToasts = useCallback(() => {
     setToasts([]);
@@ -7073,6 +7101,70 @@ function TimerReadout({
     }
   );
 }
+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(
+    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(
+              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" },
@@ -7718,137 +7810,6 @@ function getLuminance(color) {
 function getContrastText(backgroundColor) {
   return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
 }
-var t2 = getSemanticColors("dark");
-var TEMPO_PACING = {
-  behindThresholdPct: 0.15,
-  minPhaseDurationMs: 500
-};
-function getTempoPacingState(elapsedMs, targetMs) {
-  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return "none";
-  const ratio = elapsedMs / targetMs;
-  if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return "behind";
-  return "on-pace";
-}
-function getTempoFillPct(elapsedMs, targetMs) {
-  if (!targetMs) return 100;
-  return Math.min(100, elapsedMs / targetMs * 100);
-}
-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 }
-};
-function TempoBar({
-  activePhase,
-  phaseElapsedMs,
-  completed,
-  target,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(View, { className, testID: "tempo-bar", ...props, children: [
-    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", marginBottom: 4 }, children: PHASE_ORDER.map((phase) => {
-      const config = PHASE_CONFIG[phase];
-      return /* @__PURE__ */ jsx(View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, color: t2["text-disabled"] }, children: config.label }) }, phase);
-    }) }),
-    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: 2, height: 20 }, children: PHASE_ORDER.map((phase) => {
-      const config = PHASE_CONFIG[phase];
-      const isActive = activePhase === phase;
-      const completedMs = completed?.[phase];
-      const targetSec = target?.[phase];
-      const targetMs = targetSec != null ? targetSec * 1e3 : null;
-      return /* @__PURE__ */ jsx(
-        View,
-        {
-          style: {
-            flex: config.flex,
-            backgroundColor: alpha("#ffffff", 0.06),
-            borderRadius: 4,
-            overflow: "hidden"
-          },
-          children: isActive ? /* @__PURE__ */ jsx(
-            ActiveSegment,
-            {
-              config,
-              phaseElapsedMs,
-              targetMs
-            }
-          ) : completedMs != null ? /* @__PURE__ */ jsx(CompletedSegment, { config, completedMs, targetMs }) : null
-        },
-        phase
-      );
-    }) })
-  ] });
-}
-function ActiveSegment({
-  config,
-  phaseElapsedMs,
-  targetMs
-}) {
-  const pacing = getTempoPacingState(phaseElapsedMs, targetMs);
-  const barColor = pacing === "behind" ? t2["status-error"] : config.color;
-  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
-  const label = targetMs ? `${formatDuration2(phaseElapsedMs)} / ${formatDuration2(targetMs)}` : formatDuration2(phaseElapsedMs);
-  return /* @__PURE__ */ jsxs(View, { style: { height: "100%", position: "relative" }, testID: `tempo-segment-active-${config.label}`, children: [
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${fillPct}%`,
-          backgroundColor: alpha(barColor, 0.3),
-          borderRadius: 4
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        style: {
-          height: "100%",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, fontWeight: "700", color: barColor }, children: label })
-      }
-    )
-  ] });
-}
-function CompletedSegment({
-  config,
-  completedMs,
-  targetMs
-}) {
-  const pacing = getTempoPacingState(completedMs, targetMs);
-  const hitTarget = pacing !== "behind";
-  const indicator = targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? hitTarget ? " \u2713" : " \u2717" : "";
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      style: {
-        height: "100%",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: alpha(config.color, 0.15)
-      },
-      testID: `tempo-segment-completed-${config.label}`,
-      children: /* @__PURE__ */ jsxs(Text, { style: { fontSize: 12, fontWeight: "500", color: alpha(config.color, 0.7) }, children: [
-        formatDuration2(completedMs),
-        indicator
-      ] })
-    }
-  );
-}
-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(
@@ -7867,14 +7828,32 @@ function MetricCell({ children, color, fontSize = 11 }) {
 }
 
 // src/components/custom/Workout/TempoDisplay.tsx
-var t3 = getSemanticColors("dark");
+var t2 = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = t3["status-error"];
+var STATUS_ERROR = t2["status-error"];
+var STATUS_SUCCESS = t2["status-success"];
+var STATUS_WARNING = t2["status-warning"];
+var ON_TARGET_MS = 100;
+function getTempoFillPct(elapsedMs, targetMs) {
+  if (!targetMs) return 100;
+  return Math.min(100, elapsedMs / targetMs * 100);
+}
+function activeNumberTone(elapsedMs, targetMs) {
+  if (targetMs == null) return t2["text-primary"];
+  const remainingMs = targetMs - elapsedMs;
+  if (remainingMs > ON_TARGET_MS) return STATUS_WARNING;
+  if (remainingMs >= -ON_TARGET_MS) return STATUS_SUCCESS;
+  return STATUS_ERROR;
+}
+function liveReadoutText(elapsedMs, targetMs, readout) {
+  const seconds = readout === "countup" ? elapsedMs / 1e3 : (targetMs - elapsedMs) / 1e3;
+  return seconds.toFixed(1);
+}
 var phaseColors = {
-  eccentric: t3["status-warning"],
+  eccentric: primitiveRamps.magenta[400],
   pauseBottom: TEXT_TERTIARY,
-  concentric: t3["status-success"],
+  concentric: primitiveRamps.cyan[300],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY
 };
@@ -7894,63 +7873,98 @@ var LIVE_PHASES = [
   { key: "concentric", color: phaseColors.concentric },
   { key: "pauseTop", color: phaseColors.pauseTop }
 ];
+function CellFill({ color, pct: pct2 }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        position: "absolute",
+        left: 2,
+        right: 2,
+        bottom: 0,
+        height: `${pct2}%`,
+        backgroundColor: alpha(color, 0.28),
+        borderRadius: 3
+      }
+    }
+  );
+}
+var MONO = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+var READOUT_MAX_CHARS = 5;
 function LiveTempoCell({
   value,
   color,
-  isActive,
+  status,
   phaseElapsedMs,
-  fontSize
+  completedMs,
+  fontSize,
+  readout
 }) {
-  if (!isActive) {
-    return /* @__PURE__ */ jsx(TempoValue, { value, color: alpha(color, 0.35), fontSize });
-  }
   const targetMs = value > 0 ? value * 1e3 : null;
-  const barColor = getTempoPacingState(phaseElapsedMs, targetMs) === "behind" ? STATUS_ERROR : color;
+  const cellW = Math.ceil(fontSize * 0.62 * READOUT_MAX_CHARS);
+  const wrap = {
+    position: "relative",
+    width: cellW,
+    minHeight: Math.round(fontSize * 1.25),
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const num = (c, text) => /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO, fontSize, color: c, fontWeight: "700" }, children: text });
+  if (status === "upcoming") {
+    const targetText = targetMs != null ? (targetMs / 1e3).toFixed(1) : String(value);
+    return /* @__PURE__ */ jsx(View, { style: wrap, children: num(color, targetText) });
+  }
+  if (status === "done") {
+    const finalMs = completedMs ?? targetMs ?? 0;
+    const finalText = targetMs != null ? liveReadoutText(finalMs, targetMs, readout) : String(value);
+    const finalTone = targetMs != null ? activeNumberTone(finalMs, targetMs) : color;
+    return /* @__PURE__ */ jsxs(View, { style: wrap, testID: "tempo-live-done", children: [
+      /* @__PURE__ */ jsx(CellFill, { color, pct: 100 }),
+      num(finalTone, finalText)
+    ] });
+  }
+  const numberTone = activeNumberTone(phaseElapsedMs, targetMs);
   const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
-  return /* @__PURE__ */ jsxs(View, { style: { position: "relative" }, testID: "tempo-live-active", children: [
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: `${fillPct}%`,
-          backgroundColor: alpha(barColor, 0.3),
-          borderRadius: 2
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(TempoValue, { value, color: barColor, fontSize })
+  const activeText = targetMs != null ? liveReadoutText(phaseElapsedMs, targetMs, readout) : String(value);
+  return /* @__PURE__ */ jsxs(View, { style: wrap, testID: "tempo-live-active", children: [
+    /* @__PURE__ */ jsx(CellFill, { color, pct: fillPct }),
+    num(numberTone, activeText)
   ] });
 }
 function LiveTempoRow({
   values,
   live,
-  fontSize
-}) {
-  return /* @__PURE__ */ jsx(Fragment, { children: LIVE_PHASES.map((phase, i) => /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row" }, children: [
-    i > 0 && /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
-    /* @__PURE__ */ jsx(
-      LiveTempoCell,
-      {
-        value: values[i],
-        color: phase.color,
-        isActive: live.activePhase === phase.key,
-        phaseElapsedMs: live.phaseElapsedMs,
-        fontSize
-      }
-    )
-  ] }, phase.key)) });
+  fontSize,
+  readout
+}) {
+  const activeIndex = live.activePhase ? LIVE_PHASES.findIndex((p) => p.key === live.activePhase) : -1;
+  return /* @__PURE__ */ jsx(Fragment, { children: LIVE_PHASES.map((phase, i) => {
+    const status = activeIndex < 0 || i > activeIndex ? "upcoming" : i < activeIndex ? "done" : "active";
+    return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      i > 0 && /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
+      /* @__PURE__ */ jsx(
+        LiveTempoCell,
+        {
+          value: values[i],
+          color: phase.color,
+          status,
+          phaseElapsedMs: live.phaseElapsedMs,
+          completedMs: live.completed?.[phase.key],
+          fontSize,
+          readout
+        }
+      )
+    ] }, phase.key);
+  }) });
 }
 function TempoDisplay({
   tempo,
   size = "md",
-  colored = true,
+  fontSize: fontSizeProp,
   showLabel = true,
   showInfo = true,
   live,
+  liveReadout = "countdown",
   onPress,
   className,
   ...props
@@ -7958,8 +7972,11 @@ function TempoDisplay({
   const [showTooltip, setShowTooltip] = useState(false);
   const [eccentric, pauseBottom, concentric, pauseTop] = roundTempo(tempo);
   const isSm = size === "sm";
-  const fontSize = isSm ? 9 : 11;
-  const monoColor = TEXT_TERTIARY;
+  const fontSize = fontSizeProp ?? (isSm ? 9 : 11);
+  const chromePadX = Math.round(fontSize * 0.6);
+  const chromePadY = Math.round(fontSize * 0.3);
+  const chromeRadius = Math.round(fontSize * 0.4);
+  const labelFont = Math.max(9, Math.round(fontSize * 0.5));
   const handlePress = useCallback(() => {
     if (onPress) {
       onPress();
@@ -7976,9 +7993,9 @@ function TempoDisplay({
         flexDirection: "row",
         alignItems: "center",
         backgroundColor: "#1C1C1C",
-        paddingHorizontal: isSm ? 6 : 8,
-        paddingVertical: 3,
-        borderRadius: 4
+        paddingHorizontal: chromePadX,
+        paddingVertical: chromePadY,
+        borderRadius: chromeRadius
       },
       ...props,
       children: [
@@ -7987,12 +8004,13 @@ function TempoDisplay({
           {
             style: {
               fontFamily: INTER,
-              fontSize: 9,
+              fontSize: labelFont,
               fontWeight: "500",
-              color: TEXT_TERTIARY,
+              // Live-muted green while a rep is running, tertiary at rest.
+              color: live ? t2["status-live-muted"] : TEXT_TERTIARY,
               letterSpacing: 0.5,
               textTransform: "uppercase",
-              marginRight: 6
+              marginRight: Math.round(fontSize * 0.5)
             },
             children: "TEMPO"
           }
@@ -8002,36 +8020,20 @@ function TempoDisplay({
           {
             values: [eccentric, pauseBottom, concentric, pauseTop],
             live,
-            fontSize
-          }
-        ) : colored ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(TempoValue, { value: eccentric, color: phaseColors.eccentric, fontSize }),
-          /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
-          /* @__PURE__ */ jsx(TempoValue, { value: pauseBottom, color: phaseColors.pauseBottom, fontSize }),
-          /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
-          /* @__PURE__ */ jsx(TempoValue, { value: concentric, color: phaseColors.concentric, fontSize }),
-          /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
-          /* @__PURE__ */ jsx(TempoValue, { value: pauseTop, color: phaseColors.pauseTop, fontSize })
-        ] }) : /* @__PURE__ */ jsxs(
-          Text,
-          {
-            style: {
-              fontFamily: INTER,
-              fontSize,
-              color: monoColor,
-              fontWeight: "600",
-              letterSpacing: 1
-            },
-            children: [
-              eccentric,
-              "-",
-              pauseBottom,
-              "-",
-              concentric,
-              "-",
-              pauseTop
-            ]
+            fontSize,
+            readout: liveReadout
           }
+        ) : (
+          // Static prescription: the phase-coloured lockup (the same colours the live row rests at).
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(TempoValue, { value: eccentric, color: phaseColors.eccentric, fontSize }),
+            /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
+            /* @__PURE__ */ jsx(TempoValue, { value: pauseBottom, color: phaseColors.pauseBottom, fontSize }),
+            /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
+            /* @__PURE__ */ jsx(TempoValue, { value: concentric, color: phaseColors.concentric, fontSize }),
+            /* @__PURE__ */ jsx(TempoSeparator, { color: phaseColors.dash, fontSize }),
+            /* @__PURE__ */ jsx(TempoValue, { value: pauseTop, color: phaseColors.pauseTop, fontSize })
+          ] })
         ) })
       ]
     }
@@ -8116,13 +8118,13 @@ function TempoDisplay({
     }
   );
 }
-var t4 = getSemanticColors("dark");
+var t3 = getSemanticColors("dark");
 function getDotColor(deviation) {
   const abs = Math.abs(deviation);
-  if (deviation < -0.3) return t4["status-success"];
+  if (deviation < -0.3) return t3["status-success"];
   if (abs <= 0.3) return "#6B7280";
-  if (abs <= 0.7) return t4["status-warning"];
-  return t4["status-error"];
+  if (abs <= 0.7) return t3["status-warning"];
+  return t3["status-error"];
 }
 function getDeviationDescription(deviation) {
   if (deviation < -0.3) return "lighter than planned";
@@ -8190,19 +8192,19 @@ function DeviationBar({
     }
   );
 }
-var t5 = getSemanticColors("dark");
+var t4 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
 var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
 var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
 var ZONE = {
-  building: t5["status-success"],
+  building: t4["status-success"],
   // below target ramp-up
-  approaching: t5["status-warning"],
+  approaching: t4["status-warning"],
   // nearing target
-  target: t5["brand-primary"],
+  target: t4["brand-primary"],
   // exactly at target
-  over1: t5["status-error"],
+  over1: t4["status-error"],
   // mild over-target
   over2: WORKOUT_TOKENS.intensity.over2,
   // moderate over-target
@@ -8371,7 +8373,7 @@ var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/WorkoutPill.tsx
-var t6 = getSemanticColors("dark");
+var t5 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
@@ -8389,9 +8391,9 @@ var statusBorderStyles = {
   deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: t6["status-success"],
-  current: t6["brand-primary"],
-  next: t6["brand-primary"],
+  completed: t5["status-success"],
+  current: t5["brand-primary"],
+  next: t5["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
@@ -8931,8 +8933,18 @@ var EXPANDED_ENCODED_PCT = 45;
 var EXPANDED_HEIGHT = 60;
 var FIXED_MAX_VELOCITY = 1.15;
 var BARE_STUB_HEIGHT = 3;
+var HERO_HEIGHT = 220;
+var HERO_LABEL_HEADROOM = 20;
+var HERO_BAR_GAP = 8;
+var HERO_BAR_MAX_WIDTH = 120;
+var HERO_LABEL_MIN_BAR_WIDTH = 30;
+var HERO_BAR_RADIUS = 5;
+var HERO_MIN_BAR_HEIGHT = 4;
+var HERO_PENDING_COLOR = primitiveColors.charcoal[100];
+var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
+var PEAK_HEADROOM = 1.06;
 function scaleDenominator(scale, maxVelocity) {
-  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * 1.15;
+  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * PEAK_HEADROOM;
 }
 function bareSlotHeight(slot, height, denom) {
   if (slot.kind !== "rep" || denom <= 0) return BARE_STUB_HEIGHT;
@@ -8958,6 +8970,195 @@ function usePrefersReducedMotion() {
 var ANIMATION_DURATION = 400;
 var ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1);
 var POP_EASING = Easing.bezier(0.34, 1.56, 0.64, 1);
+function useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [liveScale] = useState(() => new Animated.Value(1));
+  useEffect(() => {
+    if (!active || liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveScale.setValue(1);
+      return;
+    }
+    if (isNewPeak) {
+      liveScale.setValue(1);
+      Animated.sequence([
+        Animated.timing(liveScale, {
+          toValue: 1.25,
+          duration: 150,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: true
+        }),
+        Animated.spring(liveScale, {
+          toValue: 1,
+          friction: 3,
+          tension: 140,
+          useNativeDriver: true
+        })
+      ]).start();
+    } else {
+      liveScale.setValue(0.8);
+      Animated.timing(liveScale, {
+        toValue: 1,
+        duration: 300,
+        easing: POP_EASING,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [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 [plotW, setPlotW] = useState(0);
+  const onPlotLayout = (e) => setPlotW(e.nativeEvent.layout.width);
+  const plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM);
+  const barHeight = (velocity) => scaleDenom > 0 ? Math.max(HERO_MIN_BAR_HEIGHT, Math.min(1, velocity / scaleDenom) * plotHeight) : HERO_MIN_BAR_HEIGHT;
+  const pendingCount = Math.max(0, (targetReps ?? 0) - doneVelocities.length);
+  const referencePx = referenceVelocity > 0 && scaleDenom > 0 ? Math.min(plotHeight, referenceVelocity / scaleDenom * plotHeight) : 0;
+  const totalSlots = doneVelocities.length + pendingCount;
+  const barWidth = plotW > 0 && totalSlots > 0 ? Math.min(HERO_BAR_MAX_WIDTH, (plotW - HERO_BAR_GAP * (totalSlots - 1)) / totalSlots) : HERO_BAR_MAX_WIDTH;
+  const labelsCrowded = plotW > 0 && barWidth < HERO_LABEL_MIN_BAR_WIDTH;
+  const heroGap = plotW === 0 ? HERO_BAR_GAP : barWidth < 16 ? 2 : barWidth < 28 ? 4 : HERO_BAR_GAP;
+  const peakIndex = doneVelocities.reduce(
+    (best, v, i) => v > doneVelocities[best] ? i : best,
+    0
+  );
+  const showBarLabel = (i) => !labelsCrowded || i === peakIndex || i === liveRepIndex;
+  const repCount = doneVelocities.length;
+  const total = Math.max(repCount, targetReps ?? repCount);
+  const label = referenceVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(referenceVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
+  const { style: externalStyle, ...restProps } = viewProps;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className,
+      style: [{ height }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "velocity-strip-hero",
+      ...restProps,
+      children: /* @__PURE__ */ jsxs(
+        View,
+        {
+          onLayout: onPlotLayout,
+          style: {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "flex-end",
+            gap: heroGap,
+            position: "relative",
+            borderBottomWidth: 2,
+            borderBottomColor: HERO_PENDING_COLOR
+          },
+          children: [
+            referencePx > 0 && /* @__PURE__ */ jsx(
+              View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  bottom: referencePx,
+                  borderTopWidth: 1,
+                  borderStyle: "dashed",
+                  borderColor: HERO_REFERENCE_COLOR,
+                  pointerEvents: "none"
+                },
+                testID: "velocity-hero-reference"
+              }
+            ),
+            doneVelocities.map((velocity, i) => {
+              const isLive = liveRepIndex === i;
+              return /* @__PURE__ */ jsxs(
+                View,
+                {
+                  accessibilityElementsHidden: true,
+                  style: {
+                    flex: 1,
+                    maxWidth: HERO_BAR_MAX_WIDTH,
+                    height: "100%",
+                    alignItems: "center",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    showBarLabel(i) && /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        className: "text-text-primary",
+                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
+                        testID: `velocity-label-${i}`,
+                        children: formatVelocity(velocity)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Animated.View,
+                      {
+                        style: [
+                          {
+                            width: "100%",
+                            height: barHeight(velocity),
+                            borderTopLeftRadius: HERO_BAR_RADIUS,
+                            borderTopRightRadius: HERO_BAR_RADIUS,
+                            backgroundColor: barColorFor(velocity)
+                          },
+                          isLive ? { transform: [{ scale: liveScale }] } : null
+                        ],
+                        testID: `velocity-bar-${i}`
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            }),
+            Array.from({ length: pendingCount }, (_, i) => /* @__PURE__ */ jsx(
+              View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  flex: 1,
+                  maxWidth: HERO_BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: {
+                      width: "100%",
+                      height: HERO_MIN_BAR_HEIGHT * 3,
+                      borderWidth: 1,
+                      borderStyle: "dashed",
+                      borderColor: HERO_PENDING_COLOR,
+                      borderTopLeftRadius: HERO_BAR_RADIUS,
+                      borderTopRightRadius: HERO_BAR_RADIUS
+                    },
+                    testID: "velocity-slot-todo"
+                  }
+                )
+              },
+              `pending-${i}`
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
 function VelocityStrip({
   velocities,
   set,
@@ -8968,6 +9169,7 @@ function VelocityStrip({
   onRepPress,
   variant = "expanded",
   height = EXPANDED_HEIGHT,
+  targetReps,
   scale = "peak",
   showNumbers = true,
   showInfo = true,
@@ -8993,45 +9195,17 @@ function VelocityStrip({
     return SET_STRIP_VARIABLE_COLOR;
   };
   const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const prefersReducedMotion = usePrefersReducedMotion();
   const [heightAnim] = useState(() => new Animated.Value(expanded ? height : 3));
   const [labelOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0));
   const [infoOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0));
-  const [liveScale] = useState(() => new Animated.Value(1));
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
-  useEffect(() => {
-    if (variant !== "expanded" || !framed || liveRepIndex == null || liveVelocity == null) return;
-    if (prefersReducedMotion) {
-      liveScale.setValue(1);
-      return;
-    }
-    if (isNewPeak) {
-      liveScale.setValue(1);
-      Animated.sequence([
-        Animated.timing(liveScale, {
-          toValue: 1.25,
-          duration: 150,
-          easing: Easing.out(Easing.quad),
-          useNativeDriver: true
-        }),
-        Animated.spring(liveScale, {
-          toValue: 1,
-          friction: 3,
-          tension: 140,
-          useNativeDriver: true
-        })
-      ]).start();
-    } else {
-      liveScale.setValue(0.8);
-      Animated.timing(liveScale, {
-        toValue: 1,
-        duration: 300,
-        easing: POP_EASING,
-        useNativeDriver: true
-      }).start();
-    }
-  }, [variant, framed, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  const liveScale = useLiveRepPop(
+    variant === "expanded" && framed,
+    liveRepIndex,
+    liveVelocity,
+    isNewPeak
+  );
   useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     Animated.parallel([
@@ -9058,6 +9232,24 @@ function VelocityStrip({
   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(
@@ -9348,13 +9540,13 @@ function VelocityStrip({
   }
   return stripContent;
 }
-var t7 = getSemanticColors("dark");
+var t6 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: t7["brand-secondary"],
-  ontrack: t7["status-success"],
-  target: t7["brand-primary"],
-  over: t7["status-error"]
+  behind: t6["brand-secondary"],
+  ontrack: t6["status-success"],
+  target: t6["brand-primary"],
+  over: t6["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -9822,6 +10014,99 @@ function InputBar({
   );
 }
 var BRAND_PRIMARY4 = getSemanticColors("dark")["brand-primary"];
+var RING_DEFAULT_SIZE = 180;
+function RestActions({ onAddTime, onSkip }) {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(
+      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(
+          Text,
+          {
+            className: "text-text-secondary",
+            style: { fontSize: 11, fontFamily: "Inter, sans-serif", fontWeight: "600" },
+            children: "+30s"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      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(
+          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(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(
+      Text,
+      {
+        className: "text-text-tertiary",
+        style: { fontSize: 13, fontFamily: "Inter, sans-serif" },
+        testID: "rest-timer-next-set",
+        children: nextSetInfo
+      }
+    )
+  ] });
+}
 function RestTimer({
   totalSeconds,
   elapsedMs,
@@ -9829,12 +10114,15 @@ function RestTimer({
   onAddTime,
   nextSetInfo,
   visible,
-  displayOnly = false
+  displayOnly = false,
+  variant = "bar",
+  size = RING_DEFAULT_SIZE
 }) {
   const {
     remainingMs,
     progress,
-    label: timeDisplay
+    label: timeDisplay,
+    done
   } = useTimer({
     mode: "down",
     durationMs: totalSeconds * 1e3,
@@ -9843,6 +10131,22 @@ function RestTimer({
   const remainingSec = Math.ceil(remainingMs / 1e3);
   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(
     View,
     {
@@ -9940,67 +10244,12 @@ function RestTimer({
             )
           }
         ),
-        !displayOnly && /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
-          /* @__PURE__ */ jsx(
-            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(
-                Text,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 11,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "600"
-                  },
-                  children: "+30s"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            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(
-                Text,
-                {
-                  style: {
-                    fontSize: 11,
-                    fontFamily: "Inter, sans-serif",
-                    fontWeight: "600",
-                    color: BRAND_PRIMARY4
-                  },
-                  children: "Skip"
-                }
-              )
-            }
-          )
-        ] })
+        !displayOnly && /* @__PURE__ */ jsx(RestActions, { onAddTime, onSkip })
       ]
     }
   );
 }
-var t8 = getSemanticColors("dark");
+var t7 = getSemanticColors("dark");
 var TIMES = "\xD7";
 var AT = "@";
 function SetsRepsLoad({
@@ -10008,11 +10257,12 @@ function SetsRepsLoad({
   reps,
   load,
   unit = "lb",
+  fontSize,
   className,
   ...props
 }) {
-  const value = t8["text-primary"];
-  const sep = t8["text-tertiary"];
+  const value = t7["text-primary"];
+  const sep = t7["text-tertiary"];
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -10022,12 +10272,12 @@ function SetsRepsLoad({
       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}` })
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: sets }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${TIMES} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: reps }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${AT} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: load }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${unit}` })
       ]
     }
   );
@@ -10125,14 +10375,14 @@ function ScheduleTiles({ when, now, gap = 1, ...props }) {
     )
   ] });
 }
-var t9 = getSemanticColors("dark");
+var t8 = 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" }
+  imbalance: { Icon: ScaleIcon, color: t8["status-error"], label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, color: t8["status-error"], label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, color: t8["status-warning"], label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, color: t8["status-warning"], label: "Missed reps" },
+  pr: { Icon: AwardIcon, color: t8["status-success"], label: "Personal record" },
+  info: { Icon: InfoIcon, color: t8["status-info"], label: "More info" }
 };
 var INDICATOR_PRECEDENCE = [
   "imbalance",
@@ -10607,7 +10857,7 @@ function ExerciseCard({
   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 t9 = getSemanticColors("dark");
 var RAISED = primitiveColors.charcoal[400];
 var BAR_HEIGHT = 9;
 var BAR_GAP = 3;
@@ -10629,7 +10879,7 @@ function SessionHeader({
   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));
+  const setsLabelColor = upcoming ? t9["text-secondary"] : paceToneColor(paceTone(totalSets > 0 ? setsDone / totalSets : 0, target));
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -10657,7 +10907,7 @@ function SessionHeader({
               lineHeight: 18,
               fontWeight: "700",
               fontFamily: '"Space Grotesk", sans-serif',
-              color: t10["text-primary"],
+              color: t9["text-primary"],
               marginBottom: 10
             },
             testID: "session-rail-title",
@@ -11052,10 +11302,10 @@ function WeekRow({
     }
   );
 }
-var t11 = getSemanticColors("dark");
+var t10 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: t11["status-success"],
-  brandPrimary: t11["brand-primary"],
+  statusSuccess: t10["status-success"],
+  brandPrimary: t10["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -11539,12 +11789,12 @@ function PrHistoryModal({
     }
   );
 }
-var t12 = getSemanticColors("dark");
-var BRAND_PRIMARY9 = t12["brand-primary"];
+var t11 = getSemanticColors("dark");
+var BRAND_PRIMARY9 = t11["brand-primary"];
 var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
-var STATUS_SUCCESS = t12["status-success"];
-var STATUS_WARNING = t12["status-warning"];
-var STATUS_ERROR2 = t12["status-error"];
+var STATUS_SUCCESS2 = t11["status-success"];
+var STATUS_WARNING2 = t11["status-warning"];
+var STATUS_ERROR2 = t11["status-error"];
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -11554,8 +11804,8 @@ var EMOJI_SETS = {
 var DEFAULT_EMOJI_SET = ["\u{1F61E}", "\u{1F615}", "\u{1F610}", "\u{1F642}", "\u{1F604}"];
 function scoreColor(score) {
   if (score < 40) return STATUS_ERROR2;
-  if (score < 70) return STATUS_WARNING;
-  return STATUS_SUCCESS;
+  if (score < 70) return STATUS_WARNING2;
+  return STATUS_SUCCESS2;
 }
 var WARMUP_BADGE = {
   good: { color: "success", label: "Good" },
@@ -11734,13 +11984,13 @@ function ReadinessCheck({
     )
   ] }) });
 }
-var t13 = getSemanticColors("dark");
-var BRAND_PRIMARY10 = t13["brand-primary"];
+var t12 = getSemanticColors("dark");
+var BRAND_PRIMARY10 = t12["brand-primary"];
 var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
 var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
-var SUCCESS = t13["status-success"];
-var WARNING = t13["status-warning"];
-var ERROR = t13["status-error"];
+var SUCCESS = t12["status-success"];
+var WARNING = t12["status-warning"];
+var ERROR = t12["status-error"];
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
@@ -12100,9 +12350,9 @@ function MesoStatusCard({
 var sem = getSemanticColors("dark");
 var BRAND_PRIMARY11 = sem["brand-primary"];
 var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
-var STATUS_SUCCESS2 = sem["status-success"];
+var STATUS_SUCCESS3 = sem["status-success"];
 var STATUS_ERROR3 = sem["status-error"];
-var STATUS_WARNING2 = sem["status-warning"];
+var STATUS_WARNING3 = sem["status-warning"];
 var GRID_LINE = "rgba(255,255,255,0.06)";
 var SUCCESS_PILL_BG = "rgba(46,213,115,0.10)";
 var SUCCESS_PILL_BORDER = "rgba(46,213,115,0.20)";
@@ -12111,8 +12361,8 @@ var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t18 = Date.parse(dateStr);
-  return Number.isNaN(t18) ? 0 : t18;
+  const t17 = Date.parse(dateStr);
+  return Number.isNaN(t17) ? 0 : t17;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -12408,7 +12658,7 @@ function StrengthTrendChart({
                         left: c.x - 7,
                         top: c.y - 20,
                         fontSize: 12,
-                        color: STATUS_WARNING2
+                        color: STATUS_WARNING3
                       },
                       children: "\u2605"
                     },
@@ -12501,7 +12751,7 @@ function StrengthTrendChart({
                       marginTop: 1,
                       fontSize: 10,
                       fontFamily: "Inter, sans-serif",
-                      color: selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? STATUS_SUCCESS2 : STATUS_ERROR3
+                      color: selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? STATUS_SUCCESS3 : STATUS_ERROR3
                     },
                     children: `${selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm >= 0 ? "+" : "-"}${Math.abs(
                       selectedCoord.point.e1rm - geometry.actual[selected - 1].point.e1rm
@@ -12557,7 +12807,7 @@ function StrengthTrendChart({
                   fontSize: 11,
                   fontFamily: "Inter, sans-serif",
                   fontWeight: "600",
-                  color: trend.positive ? STATUS_SUCCESS2 : STATUS_ERROR3
+                  color: trend.positive ? STATUS_SUCCESS3 : STATUS_ERROR3
                 },
                 children: trendText
               }
@@ -12591,7 +12841,7 @@ function StrengthTrendChart({
                 /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Projected" })
               ] }),
               /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, color: STATUS_WARNING2 }, children: "\u2605" }),
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, color: STATUS_WARNING3 }, children: "\u2605" }),
                 /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "PR" })
               ] })
             ]
@@ -12601,10 +12851,10 @@ function StrengthTrendChart({
     }
   );
 }
-var t14 = getSemanticColors("dark");
-var STATUS_SUCCESS3 = t14["status-success"];
-var STATUS_WARNING3 = t14["status-warning"];
-var STATUS_INFO = t14["status-info"];
+var t13 = getSemanticColors("dark");
+var STATUS_SUCCESS4 = t13["status-success"];
+var STATUS_WARNING4 = t13["status-warning"];
+var STATUS_INFO = t13["status-info"];
 var DOT_BORDER = "#F3F4F6";
 var BAND_FILL = "rgba(46,213,115,0.1)";
 var BAND_EDGE = "rgba(46,213,115,0.45)";
@@ -12616,8 +12866,8 @@ var PADDING_BOTTOM = 16;
 var COLUMN_STEP = 4;
 var DOT_SIZE = 8;
 var DOT_COLORS = {
-  within: STATUS_SUCCESS3,
-  above: STATUS_WARNING3,
+  within: STATUS_SUCCESS4,
+  above: STATUS_WARNING4,
   below: STATUS_INFO
 };
 var STATUS_PHRASES = {
@@ -12647,8 +12897,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t18 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t18 * (b[key] - a[key]);
+      const t17 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t17 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -12842,8 +13092,8 @@ function CapacityBandChart({
                     projection && /* @__PURE__ */ jsxs(View, { testID: "capacity-band-chart-projection", children: [
                       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(trainingPixels, "yHigh"), STATUS_SUCCESS4, true, "capacity-band-chart-projection-training"),
+                      renderEdges(buildEdges(trainingPixels, "yLow"), STATUS_SUCCESS4, true, "capacity-band-chart-projection-training"),
                       renderEdges(buildEdges(restPixels, "yHigh"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
                       renderEdges(buildEdges(restPixels, "yLow"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
                       /* @__PURE__ */ jsx(
@@ -12855,7 +13105,7 @@ function CapacityBandChart({
                             top: trainingPixels[trainingPixels.length - 1]?.yHigh - 12,
                             fontSize: 9,
                             fontFamily: "Inter, sans-serif",
-                            color: STATUS_SUCCESS3
+                            color: STATUS_SUCCESS4
                           },
                           testID: "capacity-band-chart-projection-training-label",
                           children: "Training"
@@ -12978,16 +13228,43 @@ function CapacityBandChart({
     }
   );
 }
-var t15 = getSemanticColors("dark");
+var t14 = getSemanticColors("dark");
 function glowShadow(color) {
   return `0 0 5px 1px ${alpha(color, 0.3)}, 0 0 10px 3px ${alpha(color, 0.12)}`;
 }
 var DEFAULT_TRACK_COLOR = primitiveColors.charcoal[200];
 var DEFAULT_MARKER_COLOR2 = primitiveColors.white;
-var TICK_COLOR = t15["text-tertiary"];
-var DEFAULT_TRACK_HEIGHT = 14;
-var DEFAULT_NEEDLE_OVERHANG = 6;
-var NEEDLE_WIDTH = 4;
+var TICK_COLOR = t14["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)));
@@ -13002,14 +13279,24 @@ function ZoneTrack({
   marker = null,
   ticks,
   band = null,
-  trackHeight = DEFAULT_TRACK_HEIGHT,
-  needleOverhang = DEFAULT_NEEDLE_OVERHANG,
+  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 [trackW, setTrackW] = useState(0);
+  const onTrackLayout = (e) => setTrackW(e.nativeEvent.layout.width);
+  const tickCount = ticks?.length ?? 0;
+  const tickSpacing = trackW > 0 && tickCount > 0 ? trackW / tickCount : Infinity;
+  const tickStep = tickSpacing < s.tickCellWidth ? Math.ceil(s.tickCellWidth / tickSpacing) : 1;
+  const showTickLabel = (i, emphasized) => tickStep <= 1 || i === 0 || i === tickCount - 1 || i % tickStep === 0 || emphasized;
   const isNeedle = marker?.type === "needle";
   const markerHeight = isNeedle ? trackHeight + needleOverhang * 2 : trackHeight;
   const markerFrac = marker != null ? fraction(marker.value, min, max) : 0;
@@ -13028,6 +13315,7 @@ function ZoneTrack({
       accessibilityValue: marker != null ? { min, max, now: marker.value } : { min, max, now: min },
       accessibilityLabel: accessibilityLabel2 ?? `Zone track: ${marker?.value ?? min}`,
       testID: "zone-track",
+      onLayout: onTrackLayout,
       ...props,
       children: [
         /* @__PURE__ */ jsxs(View, { style: { position: "relative", height: markerHeight }, children: [
@@ -13119,18 +13407,18 @@ function ZoneTrack({
                 position: "absolute",
                 top: 0,
                 left: pct(markerFrac),
-                width: NEEDLE_WIDTH,
+                width: s.needleWidth,
                 height: markerHeight,
-                borderRadius: NEEDLE_WIDTH / 2,
+                borderRadius: s.needleWidth / 2,
                 backgroundColor: marker.color ?? DEFAULT_MARKER_COLOR2,
-                transform: [{ translateX: -NEEDLE_WIDTH / 2 }]
+                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 ? 2 : 1.5;
+            const lineColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
+            const lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal;
             return /* @__PURE__ */ jsx(
               View,
               {
@@ -13138,10 +13426,10 @@ function ZoneTrack({
                 accessibilityElementsHidden: true,
                 style: {
                   position: "absolute",
-                  top: (markerHeight - trackHeight) / 2 - 2,
+                  top: (markerHeight - trackHeight) / 2 - s.tickLineTopPad,
                   left: pct(fraction(tick.value, min, max)),
                   width: lineWidth,
-                  height: trackHeight + 4,
+                  height: trackHeight + s.tickLineHeightPad,
                   borderRadius: lineWidth / 2,
                   backgroundColor: lineColor,
                   transform: [{ translateX: -lineWidth / 2 }],
@@ -13152,40 +13440,47 @@ function ZoneTrack({
             );
           })
         ] }),
-        ticks != null && ticks.length > 0 && /* @__PURE__ */ jsx(View, { style: { position: "relative", height: 16, marginTop: 5 }, 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(
-            Text,
-            {
-              testID: "zone-track-tick-label",
-              style: {
-                fontSize: 9,
-                letterSpacing: 0.5,
-                color: labelColor,
-                fontFamily: "monospace",
-                fontWeight: emphasized ? "700" : "400"
-              },
-              children: tick.label
-            }
-          );
-          return /* @__PURE__ */ jsx(
-            View,
-            {
-              testID: "zone-track-tick",
-              style: {
-                position: "absolute",
-                left: pct(fraction(tick.value, min, max)),
-                transform: [{ translateX: -14 }],
-                width: 28,
-                alignItems: "center"
-              },
-              children: tick.tooltip != null ? /* @__PURE__ */ jsx(Tooltip, { label: tick.tooltip, placement: "top", children: labelNode }) : labelNode
-            },
-            `label-${i}`
-          );
-        }) })
+        ticks != null && ticks.length > 0 && /* @__PURE__ */ jsx(
+          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;
+              if (!showTickLabel(i, emphasized)) return null;
+              const labelColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
+              const labelNode = /* @__PURE__ */ jsx(
+                Text,
+                {
+                  testID: "zone-track-tick-label",
+                  style: {
+                    fontSize: s.tickFont,
+                    letterSpacing: s.tickLetterSpacing,
+                    color: labelColor,
+                    fontFamily: "monospace",
+                    fontWeight: emphasized ? "700" : "400"
+                  },
+                  children: tick.label
+                }
+              );
+              return /* @__PURE__ */ jsx(
+                View,
+                {
+                  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}`
+              );
+            })
+          }
+        )
       ]
     }
   );
@@ -13203,7 +13498,8 @@ function FatigueMeter({
   thresholds = DEFAULT_THRESHOLDS,
   zoneColors = DEFAULT_ZONE_COLORS,
   labels = DEFAULT_LABELS,
-  trackHeight = 14,
+  size = "default",
+  trackHeight,
   needleColor,
   className,
   ...props
@@ -13224,6 +13520,7 @@ function FatigueMeter({
       zones,
       min: 0,
       max,
+      size,
       trackHeight,
       ticks,
       marker: { type: "needle", value, color: needleColor },
@@ -13235,7 +13532,7 @@ function FatigueMeter({
 }
 var HEAT = WORKOUT_TOKENS.heatmap;
 var NEUTRAL_TRACK = primitiveColors.charcoal[200];
-var MONO = "monospace";
+var MONO2 = "monospace";
 var HEAT_BY_ZONE = {
   under: HEAT.under,
   maintenance: HEAT.maintenance,
@@ -13294,7 +13591,7 @@ function VolumeLandmarkBar({
               Text,
               {
                 testID: "volume-landmark-pct",
-                style: { fontSize: 14, fontWeight: "700", fontFamily: MONO, color: fillColor },
+                style: { fontSize: 14, fontWeight: "700", fontFamily: MONO2, color: fillColor },
                 children: [
                   pct2,
                   "%"
@@ -13337,7 +13634,7 @@ function VolumeLandmarkBar({
     }
   );
 }
-var t16 = getSemanticColors("dark");
+var t15 = getSemanticColors("dark");
 var statusToken = {
   productive: "status-success",
   threshold: "status-warning",
@@ -13354,7 +13651,7 @@ var defaultLabel = {
   stop: "Stop"
 };
 function statusPillColor(status) {
-  return t16[statusToken[status]];
+  return t15[statusToken[status]];
 }
 function StatusPill2({ status, label, className, style, ...props }) {
   const color = statusPillColor(status);
@@ -13387,7 +13684,7 @@ function StatusPill2({ status, label, className, style, ...props }) {
     }
   );
 }
-var t17 = getSemanticColors("dark");
+var t16 = getSemanticColors("dark");
 var categoryToken = {
   productive: null,
   threshold: "status-warning",
@@ -13400,7 +13697,7 @@ var floodOpacity = {
 };
 function liveAuraColor(category) {
   const token = categoryToken[category];
-  return token ? t17[token] : null;
+  return token ? t16[token] : null;
 }
 function LiveAuraFrame({
   category,
@@ -13429,9 +13726,9 @@ function LiveAuraFrame({
           position: "relative",
           overflow: "hidden",
           borderRadius: 10,
-          backgroundColor: t17["background-base"],
+          backgroundColor: t16["background-base"],
           borderWidth: 1,
-          borderColor: t17["border-default"]
+          borderColor: t16["border-default"]
         },
         style
       ],
@@ -13658,28 +13955,28 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t18, i) => {
-            const y = toY(t18);
+          ticksOf(yd, TICK_COUNT).map((t17, i) => {
+            const y = toY(t17);
             return /* @__PURE__ */ jsx(
               View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-y",
                 style: { position: "absolute", left: PLOT_LEFT2, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t18) })
+                children: /* @__PURE__ */ jsx(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t17) })
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t18, i) => {
-            const x = toX(t18);
+          ticksOf(xd, TICK_COUNT).map((t17, i) => {
+            const x = toX(t17);
             return /* @__PURE__ */ jsx(
               View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-x",
                 style: { position: "absolute", top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t18) })
+                children: /* @__PURE__ */ jsx(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t17) })
               },
               `x-${i}`
             );
@@ -13740,14 +14037,14 @@ function Scatter({
   ] });
 }
 var sem2 = getSemanticColors("dark");
-var STATUS_SUCCESS4 = sem2["status-success"];
-var STATUS_WARNING4 = sem2["status-warning"];
+var STATUS_SUCCESS5 = sem2["status-success"];
+var STATUS_WARNING5 = sem2["status-warning"];
 var STATUS_ERROR4 = sem2["status-error"];
 var TRACK = "rgba(255,255,255,0.08)";
 var DEFAULT_THRESHOLDS2 = [
   { value: 0, color: STATUS_ERROR4 },
-  { value: 60, color: STATUS_WARNING4 },
-  { value: 80, color: STATUS_SUCCESS4 }
+  { value: 60, color: STATUS_WARNING5 },
+  { value: 80, color: STATUS_SUCCESS5 }
 ];
 var ARC_START = 135;
 var ARC_SWEEP = 270;
@@ -13762,7 +14059,7 @@ function formatValue2(v) {
 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;
+  let color = sorted[0]?.color ?? STATUS_SUCCESS5;
   for (const band of sorted) {
     if (value >= band.value) color = band.color;
   }
@@ -13814,23 +14111,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t18) => /* @__PURE__ */ jsx(
+        ticks.map((t17) => /* @__PURE__ */ jsx(
           View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t18.left - tickThickness / 2,
-              top: t18.top - tickLength / 2,
+              left: t17.left - tickThickness / 2,
+              top: t17.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t18.color,
-              transform: [{ rotate: t18.rotate }]
+              backgroundColor: t17.color,
+              transform: [{ rotate: t17.rotate }]
             }
           },
-          t18.key
+          t17.key
         )),
         /* @__PURE__ */ jsxs(View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -14250,6 +14547,6 @@ function composeValidators(...validators) {
   };
 }
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActivityIcon, Alert, AlertDescription, AlertTitle, AlertTriangleIcon, Autocomplete, Avatar, AvatarBadge, AvatarGroup, AwardIcon, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircleSlashIcon, CircularProgress, Collapse, CollapseButton, CollapseContent, DashboardShell, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DumbbellIcon, EmptyState, ExerciseCard, ExerciseCardHeading, ExerciseHeading, ExerciseIndicator, FatigueMeter, FormActions, FormField, FormRow, FormSection, Gauge2 as Gauge, HStack, Heading, HelpTip, HistoryIcon, INDICATOR_PRECEDENCE, IconBox, Indicator, InfoIcon, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, LayersIcon, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, LiveAuraFrame, METRIC_FONT, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricCell, MetricGroup, MetricTiles, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, NavItem, Overline, Paragraph, PasswordInput, PersonStandingIcon, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, SET_STRIP_VARIABLE_COLOR, SET_STRIP_ZONES, ScaleIcon, Scatter, ScheduleTiles, Section, SectionContent, SectionHeader, SegmentedBar, SegmentedProgressBar, Select, SessionHeader, SessionRail, SessionStatePill, SetBar, SetRow, SetStrip, SetTableHeader, SetsRepsLoad, SideNav, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StatusPill2 as StatusPill, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SvgIcon, Switch, TEMPO_PACING, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoBar, TempoDisplay, Tile, TimerReadout, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, TrendingDownIcon, Typography, VStack, VelocityStrip, VoltrasMark, VolumeLandmarkBar, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, ZoneTrack, alpha, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultNavItems, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatDuration, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getResultColor, getSemanticColors, getStatusColor, getTempoFillPct, getTempoPacingState, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, neumorphicShadows, paceTone, paceToneColor, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, statusPillColor, surfaceGradient, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, ActivityIcon, Alert, AlertDescription, AlertTitle, AlertTriangleIcon, Autocomplete, Avatar, AvatarBadge, AvatarGroup, AwardIcon, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircleSlashIcon, CircularProgress, CircularTimer, Collapse, CollapseButton, CollapseContent, DashboardShell, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DumbbellIcon, EmptyState, ExerciseCard, ExerciseCardHeading, ExerciseHeading, ExerciseIndicator, FatigueMeter, FormActions, FormField, FormRow, FormSection, Gauge2 as Gauge, HStack, Heading, HelpTip, HistoryIcon, INDICATOR_PRECEDENCE, IconBox, Indicator, InfoIcon, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, LayersIcon, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, LiveAuraFrame, METRIC_FONT, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricCell, MetricGroup, MetricTiles, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, NavItem, Overline, Paragraph, PasswordInput, PersonStandingIcon, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, SET_STRIP_VARIABLE_COLOR, SET_STRIP_ZONES, ScaleIcon, Scatter, ScheduleTiles, Section, SectionContent, SectionHeader, SegmentedBar, SegmentedProgressBar, Select, SessionHeader, SessionRail, SessionStatePill, SetBar, SetRow, SetStrip, SetTableHeader, SetsRepsLoad, SideNav, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StatusPill2 as StatusPill, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SvgIcon, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoDisplay, Tile, TimerReadout, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, TrendingDownIcon, Typography, VStack, VelocityStrip, VoltrasMark, VolumeLandmarkBar, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, ZoneTrack, alpha, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultNavItems, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatDuration, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getResultColor, getSemanticColors, getStatusColor, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, liveAuraColor, neumorphicShadows, paceTone, paceToneColor, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, resolveIndicator, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, statusPillColor, surfaceGradient, useTable, useTimer, useToast, useToolbarButton, validateCssPropertyManifest, validationRules, velocityZoneColor };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map