@titan-design/react-ui 0.7.0 → 0.8.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",
@@ -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" },
@@ -7729,6 +7821,11 @@ var TEMPO_PACING = {
   behindThresholdPct: 0.15,
   minPhaseDurationMs: 500
 };
+function formatTempoDelta(remainingMs) {
+  const s = remainingMs / 1e3;
+  const rounded = Math.abs(s) < 0.05 ? 0 : s;
+  return rounded.toFixed(1);
+}
 function getTempoPacingState(elapsedMs, targetMs) {
   if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return "none";
   const ratio = elapsedMs / targetMs;
@@ -7741,24 +7838,33 @@ function getTempoFillPct(elapsedMs, targetMs) {
 }
 var PHASE_ORDER = ["concentric", "hold", "eccentric"];
 var PHASE_CONFIG = {
-  concentric: { label: "Con", color: t2["status-success"], flex: 2 },
-  hold: { label: "Hold", color: t2["brand-primary"], flex: 1 },
-  eccentric: { label: "Ecc", color: t2["status-warning"], flex: 3 }
+  concentric: { label: "Con", wallLabel: "Concentric", color: t2["status-success"], flex: 2 },
+  hold: { label: "Hold", wallLabel: "Hold", color: t2["brand-primary"], flex: 1 },
+  eccentric: { label: "Ecc", wallLabel: "Eccentric", color: t2["status-warning"], flex: 3 }
+};
+var TEMPO_SIZES = {
+  default: { labelMargin: 4, labelFont: 10, barGap: 2, barHeight: 20, radius: 4, segFont: 12 },
+  wall: { labelMargin: 8, labelFont: 15, barGap: 4, barHeight: 40, radius: 6, segFont: 22 }
 };
 function TempoBar({
   activePhase,
   phaseElapsedMs,
   completed,
   target,
+  size = "default",
+  activeDisplay = "time",
   className,
   ...props
 }) {
+  const s = TEMPO_SIZES[size];
+  const [display, setDisplay] = React24.useState(activeDisplay);
+  const toggleDisplay = () => setDisplay((d) => d === "time" ? "delta" : "time");
   return /* @__PURE__ */ jsxs(reactNative.View, { className, testID: "tempo-bar", ...props, children: [
-    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: 4 }, children: PHASE_ORDER.map((phase) => {
+    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: s.labelMargin }, children: PHASE_ORDER.map((phase) => {
       const config = PHASE_CONFIG[phase];
-      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, color: t2["text-disabled"] }, children: config.label }) }, phase);
+      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { numberOfLines: 1, style: { fontSize: s.labelFont, color: t2["text-disabled"] }, children: size === "wall" ? config.wallLabel : config.label }) }, phase);
     }) }),
-    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", gap: 2, height: 20 }, children: PHASE_ORDER.map((phase) => {
+    /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", gap: s.barGap, height: s.barHeight }, children: PHASE_ORDER.map((phase) => {
       const config = PHASE_CONFIG[phase];
       const isActive = activePhase === phase;
       const completedMs = completed?.[phase];
@@ -7770,7 +7876,7 @@ function TempoBar({
           style: {
             flex: config.flex,
             backgroundColor: alpha("#ffffff", 0.06),
-            borderRadius: 4,
+            borderRadius: s.radius,
             overflow: "hidden"
           },
           children: isActive ? /* @__PURE__ */ jsx(
@@ -7778,9 +7884,21 @@ function TempoBar({
             {
               config,
               phaseElapsedMs,
-              targetMs
+              targetMs,
+              radius: s.radius,
+              font: s.segFont,
+              display,
+              onToggleDisplay: toggleDisplay
             }
-          ) : completedMs != null ? /* @__PURE__ */ jsx(CompletedSegment, { config, completedMs, targetMs }) : null
+          ) : completedMs != null ? /* @__PURE__ */ jsx(
+            CompletedSegment,
+            {
+              config,
+              completedMs,
+              targetMs,
+              font: s.segFont
+            }
+          ) : null
         },
         phase
       );
@@ -7790,49 +7908,65 @@ function TempoBar({
 function ActiveSegment({
   config,
   phaseElapsedMs,
-  targetMs
+  targetMs,
+  radius,
+  font,
+  display,
+  onToggleDisplay
 }) {
   const pacing = getTempoPacingState(phaseElapsedMs, targetMs);
   const barColor = pacing === "behind" ? t2["status-error"] : config.color;
   const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
-  const label = targetMs ? `${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 })
-      }
-    )
-  ] });
+  const label = display === "delta" && targetMs != null ? formatTempoDelta(targetMs - phaseElapsedMs) : targetMs != null ? `${formatDuration2(phaseElapsedMs)} / ${formatDuration2(targetMs)}` : formatDuration2(phaseElapsedMs);
+  return /* @__PURE__ */ jsxs(
+    reactNative.Pressable,
+    {
+      onPress: onToggleDisplay,
+      style: { height: "100%", position: "relative" },
+      accessibilityRole: "button",
+      accessibilityLabel: `Tempo readout: ${display === "delta" ? "delta" : "time"} \u2014 tap to switch`,
+      testID: `tempo-segment-active-${config.label}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: `${fillPct}%`,
+              backgroundColor: alpha(barColor, 0.3),
+              borderRadius: radius
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              height: "100%",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: font, fontWeight: "700", color: barColor }, children: label })
+          }
+        )
+      ]
+    }
+  );
 }
 function CompletedSegment({
   config,
   completedMs,
-  targetMs
+  targetMs,
+  font
 }) {
   const pacing = getTempoPacingState(completedMs, targetMs);
   const hitTarget = pacing !== "behind";
   const indicator = targetMs && targetMs >= TEMPO_PACING.minPhaseDurationMs ? hitTarget ? " \u2713" : " \u2717" : "";
+  const cueColor = hitTarget ? config.color : t2["status-error"];
   return /* @__PURE__ */ jsx(
     reactNative.View,
     {
@@ -7841,13 +7975,23 @@ function CompletedSegment({
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        backgroundColor: alpha(config.color, 0.15)
+        backgroundColor: alpha(cueColor, 0.15)
       },
       testID: `tempo-segment-completed-${config.label}`,
-      children: /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 12, fontWeight: "500", color: alpha(config.color, 0.7) }, children: [
-        formatDuration2(completedMs),
-        indicator
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: font,
+            fontWeight: "500",
+            color: hitTarget ? alpha(config.color, 0.7) : cueColor
+          },
+          children: [
+            formatDuration2(completedMs),
+            indicator
+          ]
+        }
+      )
     }
   );
 }
@@ -8937,6 +9081,14 @@ var EXPANDED_ENCODED_PCT = 45;
 var EXPANDED_HEIGHT = 60;
 var FIXED_MAX_VELOCITY = 1.15;
 var BARE_STUB_HEIGHT = 3;
+var HERO_HEIGHT = 220;
+var HERO_LABEL_HEADROOM = 20;
+var HERO_BAR_GAP = 8;
+var HERO_BAR_MAX_WIDTH = 52;
+var HERO_BAR_RADIUS = 5;
+var HERO_MIN_BAR_HEIGHT = 4;
+var HERO_PENDING_COLOR = primitiveColors.charcoal[100];
+var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
 function scaleDenominator(scale, maxVelocity) {
   return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * 1.15;
 }
@@ -8964,6 +9116,183 @@ 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 plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM);
+  const barHeight = (velocity) => scaleDenom > 0 ? Math.max(HERO_MIN_BAR_HEIGHT, Math.min(1, velocity / scaleDenom) * plotHeight) : HERO_MIN_BAR_HEIGHT;
+  const pendingCount = Math.max(0, (targetReps ?? 0) - doneVelocities.length);
+  const referencePx = referenceVelocity > 0 && scaleDenom > 0 ? Math.min(plotHeight, referenceVelocity / scaleDenom * plotHeight) : 0;
+  const repCount = doneVelocities.length;
+  const total = Math.max(repCount, targetReps ?? repCount);
+  const label = referenceVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(referenceVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
+  const { style: externalStyle, ...restProps } = viewProps;
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: [{ height }, externalStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "velocity-strip-hero",
+      ...restProps,
+      children: /* @__PURE__ */ jsxs(
+        reactNative.View,
+        {
+          style: {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "flex-end",
+            gap: HERO_BAR_GAP,
+            position: "relative",
+            borderBottomWidth: 2,
+            borderBottomColor: HERO_PENDING_COLOR
+          },
+          children: [
+            referencePx > 0 && /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  bottom: referencePx,
+                  borderTopWidth: 1,
+                  borderStyle: "dashed",
+                  borderColor: HERO_REFERENCE_COLOR,
+                  pointerEvents: "none"
+                },
+                testID: "velocity-hero-reference"
+              }
+            ),
+            doneVelocities.map((velocity, i) => {
+              const isLive = liveRepIndex === i;
+              return /* @__PURE__ */ jsxs(
+                reactNative.View,
+                {
+                  accessibilityElementsHidden: true,
+                  style: {
+                    flex: 1,
+                    maxWidth: HERO_BAR_MAX_WIDTH,
+                    height: "100%",
+                    alignItems: "center",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      reactNative.Text,
+                      {
+                        className: "text-text-primary",
+                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
+                        testID: `velocity-label-${i}`,
+                        children: formatVelocity(velocity)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      reactNative.Animated.View,
+                      {
+                        style: [
+                          {
+                            width: "100%",
+                            height: barHeight(velocity),
+                            borderTopLeftRadius: HERO_BAR_RADIUS,
+                            borderTopRightRadius: HERO_BAR_RADIUS,
+                            backgroundColor: barColorFor(velocity)
+                          },
+                          isLive ? { transform: [{ scale: liveScale }] } : null
+                        ],
+                        testID: `velocity-bar-${i}`
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            }),
+            Array.from({ length: pendingCount }, (_, i) => /* @__PURE__ */ jsx(
+              reactNative.View,
+              {
+                accessibilityElementsHidden: true,
+                style: {
+                  flex: 1,
+                  maxWidth: HERO_BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ jsx(
+                  reactNative.View,
+                  {
+                    style: {
+                      width: "100%",
+                      height: HERO_MIN_BAR_HEIGHT * 3,
+                      borderWidth: 1,
+                      borderStyle: "dashed",
+                      borderColor: HERO_PENDING_COLOR,
+                      borderTopLeftRadius: HERO_BAR_RADIUS,
+                      borderTopRightRadius: HERO_BAR_RADIUS
+                    },
+                    testID: "velocity-slot-todo"
+                  }
+                )
+              },
+              `pending-${i}`
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
 function VelocityStrip({
   velocities,
   set,
@@ -8974,6 +9303,7 @@ function VelocityStrip({
   onRepPress,
   variant = "expanded",
   height = EXPANDED_HEIGHT,
+  targetReps,
   scale = "peak",
   showNumbers = true,
   showInfo = true,
@@ -8999,45 +9329,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 +9366,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(
@@ -9828,6 +10148,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 +10248,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 +10265,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,62 +10378,7 @@ 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 })
       ]
     }
   );
@@ -12991,9 +13368,36 @@ function glowShadow(color) {
 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 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 +13412,18 @@ 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 isNeedle = marker?.type === "needle";
   const markerHeight = isNeedle ? trackHeight + needleOverhang * 2 : trackHeight;
   const markerFrac = marker != null ? fraction(marker.value, min, max) : 0;
@@ -13125,18 +13533,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 lineWidth = emphasized ? s.tickLineEmphasized : s.tickLineNormal;
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
@@ -13144,10 +13552,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 +13566,46 @@ 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;
+              const labelColor = tick.color ?? (emphasized ? t15["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 +13623,8 @@ function FatigueMeter({
   thresholds = DEFAULT_THRESHOLDS,
   zoneColors = DEFAULT_ZONE_COLORS,
   labels = DEFAULT_LABELS,
-  trackHeight = 14,
+  size = "default",
+  trackHeight,
   needleColor,
   className,
   ...props
@@ -13230,6 +13645,7 @@ function FatigueMeter({
       zones,
       min: 0,
       max,
+      size,
       trackHeight,
       ticks,
       marker: { type: "needle", value, color: needleColor },
@@ -14296,6 +14712,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;