@titan-design/react-ui 0.8.0 → 0.9.0

package/dist/index.js

@@ -5262,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([]);
@@ -7816,189 +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 formatTempoDelta(remainingMs) {
-  const s = remainingMs / 1e3;
-  const rounded = Math.abs(s) < 0.05 ? 0 : s;
-  return rounded.toFixed(1);
-}
-function getTempoPacingState(elapsedMs, targetMs) {
-  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return "none";
-  const ratio = elapsedMs / targetMs;
-  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", wallLabel: "Concentric", color: t2["status-success"], flex: 2 },
-  hold: { label: "Hold", wallLabel: "Hold", color: t2["brand-primary"], flex: 1 },
-  eccentric: { label: "Ecc", wallLabel: "Eccentric", color: t2["status-warning"], flex: 3 }
-};
-var TEMPO_SIZES = {
-  default: { labelMargin: 4, labelFont: 10, barGap: 2, barHeight: 20, radius: 4, segFont: 12 },
-  wall: { labelMargin: 8, labelFont: 15, barGap: 4, barHeight: 40, radius: 6, segFont: 22 }
-};
-function TempoBar({
-  activePhase,
-  phaseElapsedMs,
-  completed,
-  target,
-  size = "default",
-  activeDisplay = "time",
-  className,
-  ...props
-}) {
-  const s = TEMPO_SIZES[size];
-  const [display, setDisplay] = React24.useState(activeDisplay);
-  const toggleDisplay = () => setDisplay((d) => d === "time" ? "delta" : "time");
-  return /* @__PURE__ */ jsxs(reactNative.View, { className, testID: "tempo-bar", ...props, children: [
-    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: s.labelMargin }, children: PHASE_ORDER.map((phase) => {
-      const config = PHASE_CONFIG[phase];
-      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 1, style: { fontSize: s.labelFont, color: t2["text-disabled"] }, children: size === "wall" ? config.wallLabel : config.label }) }, phase);
-    }) }),
-    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", gap: s.barGap, height: s.barHeight }, 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: s.radius,
-            overflow: "hidden"
-          },
-          children: isActive ? /* @__PURE__ */ jsx(
-            ActiveSegment,
-            {
-              config,
-              phaseElapsedMs,
-              targetMs,
-              radius: s.radius,
-              font: s.segFont,
-              display,
-              onToggleDisplay: toggleDisplay
-            }
-          ) : completedMs != null ? /* @__PURE__ */ jsx(
-            CompletedSegment,
-            {
-              config,
-              completedMs,
-              targetMs,
-              font: s.segFont
-            }
-          ) : null
-        },
-        phase
-      );
-    }) })
-  ] });
-}
-function ActiveSegment({
-  config,
-  phaseElapsedMs,
-  targetMs,
-  radius,
-  font,
-  display,
-  onToggleDisplay
-}) {
-  const pacing = getTempoPacingState(phaseElapsedMs, targetMs);
-  const barColor = pacing === "behind" ? t2["status-error"] : config.color;
-  const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
-  const label = display === "delta" && targetMs != null ? formatTempoDelta(targetMs - phaseElapsedMs) : targetMs != null ? `${formatDuration2(phaseElapsedMs)} / ${formatDuration2(targetMs)}` : formatDuration2(phaseElapsedMs);
-  return /* @__PURE__ */ jsxs(
-    reactNative.Pressable,
-    {
-      onPress: onToggleDisplay,
-      style: { height: "100%", position: "relative" },
-      accessibilityRole: "button",
-      accessibilityLabel: `Tempo readout: ${display === "delta" ? "delta" : "time"} \u2014 tap to switch`,
-      testID: `tempo-segment-active-${config.label}`,
-      children: [
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: `${fillPct}%`,
-              backgroundColor: alpha(barColor, 0.3),
-              borderRadius: radius
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              height: "100%",
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: font, fontWeight: "700", color: barColor }, children: label })
-          }
-        )
-      ]
-    }
-  );
-}
-function CompletedSegment({
-  config,
-  completedMs,
-  targetMs,
-  font
-}) {
-  const pacing = getTempoPacingState(completedMs, targetMs);
-  const hitTarget = pacing !== "behind";
-  const indicator = targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? hitTarget ? " \u2713" : " \u2717" : "";
-  const cueColor = hitTarget ? config.color : t2["status-error"];
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      style: {
-        height: "100%",
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: alpha(cueColor, 0.15)
-      },
-      testID: `tempo-segment-completed-${config.label}`,
-      children: /* @__PURE__ */ jsxs(
-        reactNative.Text,
-        {
-          style: {
-            fontSize: font,
-            fontWeight: "500",
-            color: hitTarget ? alpha(config.color, 0.7) : cueColor
-          },
-          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(
@@ -8017,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
 };
@@ -8044,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
@@ -8108,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();
@@ -8126,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: [
@@ -8137,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"
           }
@@ -8152,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 })
+          ] })
         ) })
       ]
     }
@@ -8266,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";
@@ -8340,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
@@ -8521,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)",
@@ -8539,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
@@ -9084,13 +8942,15 @@ var BARE_STUB_HEIGHT = 3;
 var HERO_HEIGHT = 220;
 var HERO_LABEL_HEADROOM = 20;
 var HERO_BAR_GAP = 8;
-var HERO_BAR_MAX_WIDTH = 52;
+var HERO_BAR_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;
@@ -9167,10 +9027,21 @@ function HeroVelocityChart({
 }) {
   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`;
@@ -9187,11 +9058,12 @@ function HeroVelocityChart({
       children: /* @__PURE__ */ jsxs(
         reactNative.View,
         {
+          onLayout: onPlotLayout,
           style: {
             flex: 1,
             flexDirection: "row",
             alignItems: "flex-end",
-            gap: HERO_BAR_GAP,
+            gap: heroGap,
             position: "relative",
             borderBottomWidth: 2,
             borderBottomColor: HERO_PENDING_COLOR
@@ -9228,7 +9100,7 @@ function HeroVelocityChart({
                     justifyContent: "flex-end"
                   },
                   children: [
-                    /* @__PURE__ */ jsx(
+                    showBarLabel(i) && /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
                         className: "text-text-primary",
@@ -9674,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,
@@ -10383,7 +10255,7 @@ function RestTimer({
     }
   );
 }
-var t8 = getSemanticColors("dark");
+var t7 = getSemanticColors("dark");
 var TIMES = "\xD7";
 var AT = "@";
 function SetsRepsLoad({
@@ -10391,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,
     {
@@ -10405,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}` })
       ]
     }
   );
@@ -10508,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",
@@ -10990,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;
@@ -11012,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,
     {
@@ -11040,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",
@@ -11435,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)"
 };
@@ -11922,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}"],
@@ -11937,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" },
@@ -12117,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%)";
@@ -12483,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)";
@@ -12494,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)}`;
@@ -12791,7 +12664,7 @@ function StrengthTrendChart({
                         left: c.x - 7,
                         top: c.y - 20,
                         fontSize: 12,
-                        color: STATUS_WARNING2
+                        color: STATUS_WARNING3
                       },
                       children: "\u2605"
                     },
@@ -12884,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
@@ -12940,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
               }
@@ -12974,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" })
               ] })
             ]
@@ -12984,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)";
@@ -12999,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 = {
@@ -13030,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];
@@ -13225,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(
@@ -13238,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"
@@ -13361,13 +13234,13 @@ 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 TICK_COLOR = t14["text-tertiary"];
 var ZONE_SIZES = {
   default: {
     trackHeight: 14,
@@ -13424,6 +13297,12 @@ function ZoneTrack({
   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;
@@ -13442,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: [
@@ -13543,7 +13423,7 @@ function ZoneTrack({
           ),
           ticks?.map((tick, i) => {
             const emphasized = tick.emphasized === true;
-            const lineColor = tick.color ?? (emphasized ? t15["brand-primary"] : TICK_COLOR);
+            const lineColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
             const lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal;
             return /* @__PURE__ */ jsx(
               reactNative.View,
@@ -13573,7 +13453,8 @@ function ZoneTrack({
             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);
+              if (!showTickLabel(i, emphasized)) return null;
+              const labelColor = tick.color ?? (emphasized ? t14["brand-primary"] : TICK_COLOR);
               const labelNode = /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
@@ -13657,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,
@@ -13716,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,
                   "%"
@@ -13759,7 +13640,7 @@ function VolumeLandmarkBar({
     }
   );
 }
-var t16 = getSemanticColors("dark");
+var t15 = getSemanticColors("dark");
 var statusToken = {
   productive: "status-success",
   threshold: "status-warning",
@@ -13776,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);
@@ -13809,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",
@@ -13822,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,
@@ -13851,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
       ],
@@ -14080,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}`
             );
@@ -14162,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;
@@ -14184,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;
   }
@@ -14236,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: [
@@ -14851,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;
@@ -14864,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;
@@ -14930,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;