@titan-design/react-ui 0.7.0 → 0.9.0

package/dist/index.js

@@ -158,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"
   },
@@ -165,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"
   },
@@ -172,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"
   },
@@ -179,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"
   }
@@ -192,6 +196,8 @@ var defaultIcons = {
 function Alert({
   status = "info",
   variant = "subtle",
+  size = "default",
+  message,
   icon,
   showIcon = true,
   onClose,
@@ -201,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,
           {
@@ -5072,6 +5093,8 @@ function CircularProgress({
   color = "primary",
   showValue = false,
   formatValue: formatValue3 = (v, m) => `${Math.round(v / m * 100)}%`,
+  children,
+  fill = false,
   className,
   ...props
 }) {
@@ -5080,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,
@@ -5093,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",
@@ -5234,7 +5262,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = React24.useCallback((id) => {
-    setToasts((prev) => prev.filter((t18) => t18.id !== id));
+    setToasts((prev) => prev.filter((t17) => t17.id !== id));
   }, []);
   const removeAllToasts = React24.useCallback(() => {
     setToasts([]);
@@ -7079,6 +7107,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(
+    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" },
@@ -7724,137 +7816,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(reactNative.View, { className, testID: "tempo-bar", ...props, children: [
-    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: 4 }, 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);
-    }) }),
-    /* @__PURE__ */ jsx(reactNative.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(
-        reactNative.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(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 })
-      }
-    )
-  ] });
-}
-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(
-    reactNative.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(reactNative.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(
@@ -7873,14 +7834,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
 };
@@ -7900,63 +7879,98 @@ var LIVE_PHASES = [
   { key: "concentric", color: phaseColors.concentric },
   { key: "pauseTop", color: phaseColors.pauseTop }
 ];
+function CellFill({ color, pct: pct2 }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.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(reactNative.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(reactNative.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(reactNative.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(reactNative.View, { style: { position: "relative" }, testID: "tempo-live-active", children: [
-    /* @__PURE__ */ jsx(
-      reactNative.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(reactNative.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(jsxRuntime.Fragment, { children: LIVE_PHASES.map((phase, i) => /* @__PURE__ */ jsxs(reactNative.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(jsxRuntime.Fragment, { children: LIVE_PHASES.map((phase, i) => {
+    const status = activeIndex < 0 || i > activeIndex ? "upcoming" : i < activeIndex ? "done" : "active";
+    return /* @__PURE__ */ jsxs(reactNative.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
@@ -7964,8 +7978,11 @@ function TempoDisplay({
   const [showTooltip, setShowTooltip] = React24.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 = React24.useCallback(() => {
     if (onPress) {
       onPress();
@@ -7982,9 +7999,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: [
@@ -7993,12 +8010,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"
           }
@@ -8008,36 +8026,20 @@ function TempoDisplay({
           {
             values: [eccentric, pauseBottom, concentric, pauseTop],
             live,
-            fontSize
-          }
-        ) : colored ? /* @__PURE__ */ jsxs(jsxRuntime.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(
-          reactNative.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(jsxRuntime.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 })
+          ] })
         ) })
       ]
     }
@@ -8122,13 +8124,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";
@@ -8196,19 +8198,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
@@ -8377,7 +8379,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)",
@@ -8395,9 +8397,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
@@ -8937,8 +8939,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;
@@ -8964,6 +8976,195 @@ 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 useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [liveScale] = React24.useState(() => new reactNative.Animated.Value(1));
+  React24.useEffect(() => {
+    if (!active || liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveScale.setValue(1);
+      return;
+    }
+    if (isNewPeak) {
+      liveScale.setValue(1);
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(liveScale, {
+          toValue: 1.25,
+          duration: 150,
+          easing: reactNative.Easing.out(reactNative.Easing.quad),
+          useNativeDriver: true
+        }),
+        reactNative.Animated.spring(liveScale, {
+          toValue: 1,
+          friction: 3,
+          tension: 140,
+          useNativeDriver: true
+        })
+      ]).start();
+    } else {
+      liveScale.setValue(0.8);
+      reactNative.Animated.timing(liveScale, {
+        toValue: 1,
+        duration: 300,
+        easing: POP_EASING,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [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] = React24.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(
+    reactNative.View,
+    {
+      className,
+      style: [{ height }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "velocity-strip-hero",
+      ...restProps,
+      children: /* @__PURE__ */ jsxs(
+        reactNative.View,
+        {
+          onLayout: onPlotLayout,
+          style: {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "flex-end",
+            gap: heroGap,
+            position: "relative",
+            borderBottomWidth: 2,
+            borderBottomColor: HERO_PENDING_COLOR
+          },
+          children: [
+            referencePx > 0 && /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  bottom: referencePx,
+                  borderTopWidth: 1,
+                  borderStyle: "dashed",
+                  borderColor: HERO_REFERENCE_COLOR,
+                  pointerEvents: "none"
+                },
+                testID: "velocity-hero-reference"
+              }
+            ),
+            doneVelocities.map((velocity, i) => {
+              const isLive = liveRepIndex === i;
+              return /* @__PURE__ */ jsxs(
+                reactNative.View,
+                {
+                  accessibilityElementsHidden: true,
+                  style: {
+                    flex: 1,
+                    maxWidth: HERO_BAR_MAX_WIDTH,
+                    height: "100%",
+                    alignItems: "center",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    showBarLabel(i) && /* @__PURE__ */ jsx(
+                      reactNative.Text,
+                      {
+                        className: "text-text-primary",
+                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
+                        testID: `velocity-label-${i}`,
+                        children: formatVelocity(velocity)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      reactNative.Animated.View,
+                      {
+                        style: [
+                          {
+                            width: "100%",
+                            height: barHeight(velocity),
+                            borderTopLeftRadius: HERO_BAR_RADIUS,
+                            borderTopRightRadius: HERO_BAR_RADIUS,
+                            backgroundColor: barColorFor(velocity)
+                          },
+                          isLive ? { transform: [{ scale: liveScale }] } : null
+                        ],
+                        testID: `velocity-bar-${i}`
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            }),
+            Array.from({ length: pendingCount }, (_, i) => /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  flex: 1,
+                  maxWidth: HERO_BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    style: {
+                      width: "100%",
+                      height: HERO_MIN_BAR_HEIGHT * 3,
+                      borderWidth: 1,
+                      borderStyle: "dashed",
+                      borderColor: HERO_PENDING_COLOR,
+                      borderTopLeftRadius: HERO_BAR_RADIUS,
+                      borderTopRightRadius: HERO_BAR_RADIUS
+                    },
+                    testID: "velocity-slot-todo"
+                  }
+                )
+              },
+              `pending-${i}`
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
 function VelocityStrip({
   velocities,
   set,
@@ -8974,6 +9175,7 @@ function VelocityStrip({
   onRepPress,
   variant = "expanded",
   height = EXPANDED_HEIGHT,
+  targetReps,
   scale = "peak",
   showNumbers = true,
   showInfo = true,
@@ -8999,45 +9201,17 @@ function VelocityStrip({
     return SET_STRIP_VARIABLE_COLOR;
   };
   const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const prefersReducedMotion = usePrefersReducedMotion();
   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 [liveScale] = React24.useState(() => new reactNative.Animated.Value(1));
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
-  React24.useEffect(() => {
-    if (variant !== "expanded" || !framed || liveRepIndex == null || liveVelocity == null) return;
-    if (prefersReducedMotion) {
-      liveScale.setValue(1);
-      return;
-    }
-    if (isNewPeak) {
-      liveScale.setValue(1);
-      reactNative.Animated.sequence([
-        reactNative.Animated.timing(liveScale, {
-          toValue: 1.25,
-          duration: 150,
-          easing: reactNative.Easing.out(reactNative.Easing.quad),
-          useNativeDriver: true
-        }),
-        reactNative.Animated.spring(liveScale, {
-          toValue: 1,
-          friction: 3,
-          tension: 140,
-          useNativeDriver: true
-        })
-      ]).start();
-    } else {
-      liveScale.setValue(0.8);
-      reactNative.Animated.timing(liveScale, {
-        toValue: 1,
-        duration: 300,
-        easing: POP_EASING,
-        useNativeDriver: true
-      }).start();
-    }
-  }, [variant, framed, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  const liveScale = useLiveRepPop(
+    variant === "expanded" && framed,
+    liveRepIndex,
+    liveVelocity,
+    isNewPeak
+  );
   React24.useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
@@ -9064,6 +9238,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(
@@ -9354,13 +9546,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,
@@ -9828,6 +10020,99 @@ function InputBar({
   );
 }
 var BRAND_PRIMARY4 = getSemanticColors("dark")["brand-primary"];
+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,
@@ -9835,12 +10120,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,
@@ -9849,6 +10137,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(
     reactNative.View,
     {
@@ -9946,67 +10250,12 @@ function RestTimer({
             )
           }
         ),
-        !displayOnly && /* @__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"
-                }
-              )
-            }
-          )
-        ] })
+        !displayOnly && /* @__PURE__ */ jsx(RestActions, { onAddTime, onSkip })
       ]
     }
   );
 }
-var t8 = getSemanticColors("dark");
+var t7 = getSemanticColors("dark");
 var TIMES = "\xD7";
 var AT = "@";
 function SetsRepsLoad({
@@ -10014,11 +10263,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(
     reactNative.View,
     {
@@ -10028,12 +10278,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}` })
       ]
     }
   );
@@ -10131,14 +10381,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",
@@ -10613,7 +10863,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;
@@ -10635,7 +10885,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(
     reactNative.View,
     {
@@ -10663,7 +10913,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",
@@ -11058,10 +11308,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)"
 };
@@ -11545,12 +11795,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}"],
@@ -11560,8 +11810,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" },
@@ -11740,13 +11990,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%)";
@@ -12106,9 +12356,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)";
@@ -12117,8 +12367,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)}`;
@@ -12414,7 +12664,7 @@ function StrengthTrendChart({
                         left: c.x - 7,
                         top: c.y - 20,
                         fontSize: 12,
-                        color: STATUS_WARNING2
+                        color: STATUS_WARNING3
                       },
                       children: "\u2605"
                     },
@@ -12507,7 +12757,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
@@ -12563,7 +12813,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
               }
@@ -12597,7 +12847,7 @@ function StrengthTrendChart({
                 /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Projected" })
               ] }),
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, color: STATUS_WARNING2 }, children: "\u2605" }),
+                /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 12, color: STATUS_WARNING3 }, children: "\u2605" }),
                 /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "PR" })
               ] })
             ]
@@ -12607,10 +12857,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)";
@@ -12622,8 +12872,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 = {
@@ -12653,8 +12903,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];
@@ -12848,8 +13098,8 @@ function CapacityBandChart({
                     projection && /* @__PURE__ */ jsxs(reactNative.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(
@@ -12861,7 +13111,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"
@@ -12984,16 +13234,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)));
@@ -13008,14 +13285,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] = React24.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;
@@ -13034,6 +13321,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(reactNative.View, { style: { position: "relative", height: markerHeight }, children: [
@@ -13125,18 +13413,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(
               reactNative.View,
               {
@@ -13144,10 +13432,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 }],
@@ -13158,40 +13446,47 @@ function ZoneTrack({
             );
           })
         ] }),
-        ticks != null && ticks.length > 0 && /* @__PURE__ */ jsx(reactNative.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(
-            reactNative.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(
-            reactNative.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(
+          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;
+              if (!showTickLabel(i, emphasized)) return null;
+              const labelColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
+              const labelNode = /* @__PURE__ */ jsx(
+                reactNative.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(
+                reactNative.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}`
+              );
+            })
+          }
+        )
       ]
     }
   );
@@ -13209,7 +13504,8 @@ function FatigueMeter({
   thresholds = DEFAULT_THRESHOLDS,
   zoneColors = DEFAULT_ZONE_COLORS,
   labels = DEFAULT_LABELS,
-  trackHeight = 14,
+  size = "default",
+  trackHeight,
   needleColor,
   className,
   ...props
@@ -13230,6 +13526,7 @@ function FatigueMeter({
       zones,
       min: 0,
       max,
+      size,
       trackHeight,
       ticks,
       marker: { type: "needle", value, color: needleColor },
@@ -13241,7 +13538,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,
@@ -13300,7 +13597,7 @@ function VolumeLandmarkBar({
               reactNative.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,
                   "%"
@@ -13343,7 +13640,7 @@ function VolumeLandmarkBar({
     }
   );
 }
-var t16 = getSemanticColors("dark");
+var t15 = getSemanticColors("dark");
 var statusToken = {
   productive: "status-success",
   threshold: "status-warning",
@@ -13360,7 +13657,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);
@@ -13393,7 +13690,7 @@ function StatusPill2({ status, label, className, style, ...props }) {
     }
   );
 }
-var t17 = getSemanticColors("dark");
+var t16 = getSemanticColors("dark");
 var categoryToken = {
   productive: null,
   threshold: "status-warning",
@@ -13406,7 +13703,7 @@ var floodOpacity = {
 };
 function liveAuraColor(category) {
   const token = categoryToken[category];
-  return token ? t17[token] : null;
+  return token ? t16[token] : null;
 }
 function LiveAuraFrame({
   category,
@@ -13435,9 +13732,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
       ],
@@ -13664,28 +13961,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(
               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(t18) })
+                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(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(
               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(t18) })
+                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(t17) })
               },
               `x-${i}`
             );
@@ -13746,14 +14043,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;
@@ -13768,7 +14065,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;
   }
@@ -13820,23 +14117,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t18) => /* @__PURE__ */ jsx(
+        ticks.map((t17) => /* @__PURE__ */ jsx(
           reactNative.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(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: [
@@ -14296,6 +14593,7 @@ exports.CheckboxGroup = CheckboxGroup;
 exports.Chip = Chip;
 exports.CircleSlashIcon = CircleSlashIcon;
 exports.CircularProgress = CircularProgress;
+exports.CircularTimer = CircularTimer;
 exports.Collapse = Collapse;
 exports.CollapseButton = CollapseButton;
 exports.CollapseContent = CollapseContent;
@@ -14434,7 +14732,6 @@ exports.SupersetWrapper = SupersetWrapper;
 exports.Surface = Surface;
 exports.SvgIcon = SvgIcon;
 exports.Switch = Switch;
-exports.TEMPO_PACING = TEMPO_PACING;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
@@ -14447,7 +14744,6 @@ exports.TableHeaderCell = TableHeaderCell;
 exports.TablePagination = TablePagination;
 exports.TableRow = TableRow;
 exports.Tabs = Tabs;
-exports.TempoBar = TempoBar;
 exports.TempoDisplay = TempoDisplay;
 exports.Tile = Tile;
 exports.TimerReadout = TimerReadout;
@@ -14513,8 +14809,6 @@ exports.getLuminance = getLuminance;
 exports.getResultColor = getResultColor;
 exports.getSemanticColors = getSemanticColors;
 exports.getStatusColor = getStatusColor;
-exports.getTempoFillPct = getTempoFillPct;
-exports.getTempoPacingState = getTempoPacingState;
 exports.getThemeCSSVars = getThemeCSSVars;
 exports.getValidatedElevation = getValidatedElevation;
 exports.getVelocityZoneColor = getVelocityZoneColor;