@titan-design/react-ui 0.10.0 → 0.11.0

package/dist/pages.js

@@ -36,7 +36,6 @@ var primitiveColors = {
   // Charcoal scale (dark backgrounds)
   charcoal: {
     0: "#6E6E6E",
-    100: "#4C4C4C",
     200: "#3C3C3C",
     300: "#2C2C2C",
     400: "#1F1F1F",
@@ -182,1204 +181,6 @@ var WORKOUT_TOKENS = {
     fill: "#3A3A3A"
   }};
 
-// src/utils/workout-format.ts
-function roundRpe(rpe) {
-  return Math.round(rpe * 2) / 2;
-}
-function roundWeight(weight) {
-  return Math.round(weight);
-}
-function formatVelocity(velocity) {
-  return velocity.toFixed(2);
-}
-function roundTempo(tempo) {
-  return tempo.map((v) => Math.round(v * 10) / 10);
-}
-function wrapJsx(fn) {
-  return function(type, props, ...rest) {
-    if (props && typeof props.className === "string" && props.className) {
-      const cn2 = props.className;
-      const cssStyle = { $$css: true, [cn2]: cn2 };
-      const existing = props.style;
-      props = {
-        ...props,
-        style: existing ? [cssStyle, existing] : cssStyle
-      };
-      delete props.className;
-    }
-    return fn(type, props, ...rest);
-  };
-}
-var jsx = wrapJsx(jsxRuntime.jsx);
-var jsxs = wrapJsx(jsxRuntime.jsxs);
-
-// src/components/custom/Workout/SegmentedBar.tsx
-var PULSE_HALF_MS = 950;
-var PULSE_MIN_OPACITY = 0.45;
-var SEGMENTED_BAR_GAP = 5;
-function usePulse(active) {
-  const [value] = react.useState(() => new reactNative.Animated.Value(0));
-  react.useEffect(() => {
-    if (!active) return;
-    const loop = reactNative.Animated.loop(
-      reactNative.Animated.sequence([
-        reactNative.Animated.timing(value, {
-          toValue: 1,
-          duration: PULSE_HALF_MS,
-          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
-          useNativeDriver: false
-        }),
-        reactNative.Animated.timing(value, {
-          toValue: 0,
-          duration: PULSE_HALF_MS,
-          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
-          useNativeDriver: false
-        })
-      ])
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [active, value]);
-  return value;
-}
-function SegmentedBar({
-  segments,
-  height = 8,
-  gap = SEGMENTED_BAR_GAP,
-  radius = 2,
-  marker = null,
-  segmentTestID,
-  style,
-  ...props
-}) {
-  const pulse = usePulse(segments.some((s) => s.pulse));
-  return /* @__PURE__ */ jsxs(reactNative.View, { style: [{ flexDirection: "row", height, gap, position: "relative" }, style], ...props, children: [
-    segments.map((seg, i) => {
-      const fillStyle = {
-        width: `${(seg.fill ?? 1) * 100}%`,
-        height: "100%",
-        backgroundColor: seg.color,
-        opacity: seg.opacity
-      };
-      const testID = segmentTestID?.(seg, i) ?? "segmented-bar-segment";
-      return /* @__PURE__ */ jsx(
-        reactNative.View,
-        {
-          style: {
-            flex: seg.weight ?? 1,
-            minWidth: 0,
-            height: "100%",
-            marginLeft: seg.leadingGap,
-            borderRadius: radius,
-            overflow: "hidden"
-          },
-          children: seg.pulse ? /* @__PURE__ */ jsx(
-            reactNative.Animated.View,
-            {
-              style: {
-                ...fillStyle,
-                ...seg.pulseColor ? {
-                  backgroundColor: pulse.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: seg.pulseColor
-                  })
-                } : {
-                  opacity: pulse.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [PULSE_MIN_OPACITY, 1]
-                  })
-                }
-              },
-              accessibilityElementsHidden: true,
-              testID
-            }
-          ) : /* @__PURE__ */ jsx(reactNative.View, { style: fillStyle, accessibilityElementsHidden: true, testID })
-        },
-        i
-      );
-    }),
-    marker ? /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        style: {
-          position: "absolute",
-          left: `${marker.position * 100}%`,
-          top: 0,
-          bottom: 0,
-          width: 2,
-          backgroundColor: marker.color
-        },
-        accessibilityElementsHidden: true,
-        testID: "segmented-bar-marker"
-      }
-    ) : null
-  ] });
-}
-
-// src/components/custom/Workout/SetBar.tsx
-var SET_STRIP_ZONES = {
-  slow: primitiveRamps.red[600],
-  moderate: primitiveRamps.orange[400],
-  fast: primitiveRamps.amber[300],
-  fastest: primitiveRamps.green[300]
-};
-var TODO_COLOR = primitiveColors.charcoal[300];
-var SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900];
-var NOTCH_GAP = 2;
-var CLUSTER_GAP = 3;
-var MYO_UPCOMING_CLUSTERS = 3;
-var MYO_UPCOMING_CLUSTER_LEN = 5;
-var MYO_UPCOMING_FADE = 0.6;
-var PULSE_RANGE = {
-  [SET_STRIP_ZONES.slow]: [primitiveRamps.red[500], primitiveRamps.red[700]],
-  [SET_STRIP_ZONES.moderate]: [primitiveRamps.orange[300], primitiveRamps.orange[500]],
-  [SET_STRIP_ZONES.fast]: [primitiveRamps.amber[200], primitiveRamps.amber[400]],
-  [SET_STRIP_ZONES.fastest]: [primitiveRamps.green[200], primitiveRamps.green[400]]
-};
-function velocityZoneColor(v) {
-  if (v < 0.5) return SET_STRIP_ZONES.slow;
-  if (v < 0.75) return SET_STRIP_ZONES.moderate;
-  if (v < 1) return SET_STRIP_ZONES.fast;
-  return SET_STRIP_ZONES.fastest;
-}
-function chunkedSegments(chunks, gap) {
-  return chunks.flatMap(
-    (vels, ci) => vels.map((v, ri) => ({
-      color: velocityZoneColor(v),
-      ...ci > 0 && ri === 0 ? { leadingGap: gap } : {}
-    }))
-  );
-}
-function rangeSegments(floor, max, doneVels) {
-  return Array.from({ length: max }, (_, i) => {
-    if (i < doneVels.length) return { color: velocityZoneColor(doneVels[i]) };
-    return { color: i < floor ? TODO_COLOR : SET_STRIP_VARIABLE_COLOR };
-  });
-}
-function myoUpcomingSegments(activationLen, clusterCount) {
-  const activation = Array.from({ length: activationLen }, () => ({ color: TODO_COLOR }));
-  const trail = Array.from(
-    { length: clusterCount },
-    (_, ci) => Array.from({ length: MYO_UPCOMING_CLUSTER_LEN }, (_2, ri) => ({
-      color: SET_STRIP_VARIABLE_COLOR,
-      opacity: MYO_UPCOMING_FADE ** ci,
-      ...ri === 0 ? { leadingGap: CLUSTER_GAP } : {}
-    }))
-  ).flat();
-  return [...activation, ...trail];
-}
-function setSegments(set) {
-  if (set.status === "todo") {
-    return [{ color: TODO_COLOR }];
-  }
-  if (set.status === "done") {
-    return set.velocities.map((v) => ({ color: velocityZoneColor(v) }));
-  }
-  if (set.status === "range") {
-    return rangeSegments(set.floor, set.max, set.doneVels);
-  }
-  if (set.status === "drop") {
-    return chunkedSegments(set.subloads, NOTCH_GAP);
-  }
-  if (set.status === "myo") {
-    return chunkedSegments([set.activation, ...set.clusters], CLUSTER_GAP);
-  }
-  if (set.status === "myo-upcoming") {
-    return myoUpcomingSegments(set.activationLen, set.clusterCount ?? MYO_UPCOMING_CLUSTERS);
-  }
-  const performed = set.velocities.map((v) => {
-    const color = velocityZoneColor(v);
-    return { color, pulse: true, pulseColor: PULSE_RANGE[color] };
-  });
-  const remaining = Math.max(0, set.planned - set.velocities.length);
-  return [...performed, ...Array.from({ length: remaining }, () => ({ color: TODO_COLOR }))];
-}
-function setBarSegmentTestID(seg) {
-  if (seg.pulse) return "set-strip-pulse";
-  if (seg.color === SET_STRIP_VARIABLE_COLOR) return "set-strip-variable";
-  return seg.color === TODO_COLOR ? "set-strip-empty" : "set-strip-fill";
-}
-function SetBar({ set, height = 8 }) {
-  return /* @__PURE__ */ jsx(
-    SegmentedBar,
-    {
-      segments: setSegments(set),
-      height,
-      gap: 0,
-      radius: 0,
-      segmentTestID: setBarSegmentTestID,
-      style: { flex: 1, minWidth: 0, borderRadius: 2, overflow: "hidden" },
-      testID: "set-strip-set"
-    }
-  );
-}
-
-// src/components/custom/Workout/SetStrip.tsx
-var SET_STRIP_GAP = 5;
-function setCategory(set) {
-  switch (set.status) {
-    case "done":
-    case "drop":
-    case "myo":
-      return "done";
-    case "active":
-      return "active";
-    case "range":
-      return set.doneVels.length > 0 ? "active" : "upcoming";
-    case "todo":
-    case "myo-upcoming":
-      return "upcoming";
-  }
-}
-function describeSets(sets) {
-  const done = sets.filter((s) => setCategory(s) === "done").length;
-  const active = sets.filter((s) => setCategory(s) === "active").length;
-  const upcoming = sets.filter((s) => setCategory(s) === "upcoming").length;
-  return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`;
-}
-function SetStrip({ sets, height = 8, className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className,
-      style: { flexDirection: "row", width: "100%", height, gap: SET_STRIP_GAP },
-      accessibilityRole: "image",
-      accessibilityLabel: describeSets(sets),
-      testID: "set-strip",
-      ...props,
-      children: sets.map((set, i) => /* @__PURE__ */ jsx(SetBar, { set, height }, i))
-    }
-  );
-}
-
-// src/components/custom/Workout/VelocityStrip.tsx
-var VEL_COLORS = WORKOUT_TOKENS.scale;
-var bandIdToEffortColor = {
-  speed: sequentialEffort[0],
-  // green-300
-  power: sequentialEffort[2],
-  // amber-300 (gold)
-  strengthSpeed: sequentialEffort[3],
-  // orange-400
-  maximalStrength: sequentialEffort[4],
-  // red-600
-  grinding: sequentialEffort[5]
-  // red-700 — the distinct 5th band
-};
-function getVelocityZoneColor(velocity) {
-  if (velocity >= 1) return "vel-green";
-  if (velocity >= 0.75) return "vel-yellow";
-  if (velocity >= 0.5) return "vel-orange";
-  return "vel-red";
-}
-function getVelocityZoneName(velocity) {
-  if (velocity >= 1) return "Speed";
-  if (velocity >= 0.75) return "Power";
-  if (velocity >= 0.5) return "Strength-Speed";
-  return "Strength";
-}
-var zoneHexMap = {
-  "vel-green": VEL_COLORS.green,
-  "vel-yellow": VEL_COLORS.yellow,
-  "vel-orange": VEL_COLORS.orange,
-  "vel-red": VEL_COLORS.red
-};
-function calculateVelocityLoss(velocities) {
-  if (velocities.length < 2) return 0;
-  const best = Math.max(...velocities);
-  if (best <= 0) return 0;
-  const last = velocities[velocities.length - 1];
-  return Math.max(0, Math.round((best - last) / best * 100));
-}
-function calculateMeanVelocity(velocities) {
-  if (velocities.length === 0) return 0;
-  const sum = velocities.reduce((acc, v) => acc + v, 0);
-  return sum / velocities.length;
-}
-function classifyBand(velocity, bands) {
-  for (const band of bands) {
-    if (band.max === null || velocity < band.max) return band;
-  }
-  return bands[bands.length - 1];
-}
-function bandColor(band) {
-  return bandIdToEffortColor[band.id] ?? VEL_COLORS.green;
-}
-function getLossStyle(loss) {
-  if (loss > 25) return { color: VEL_COLORS.red };
-  if (loss > 20) return { color: VEL_COLORS.orange };
-  return null;
-}
-var REP_GAP = 2;
-var WIDE_GAP = 8;
-var TODO_COLOR2 = primitiveColors.charcoal[300];
-var CONTINUE_OUTLINE = primitiveRamps.cyan[800];
-function deriveDoneVelocities(set) {
-  switch (set.type) {
-    case "drop":
-      return set.subloads.flat();
-    case "myo":
-      return [...set.activation, ...set.clusters.flat()];
-    default:
-      return set.velocities;
-  }
-}
-function chunkedRepSlots(chunks) {
-  const slots = [];
-  chunks.forEach((chunk) => {
-    chunk.forEach((velocity, ri) => {
-      const first = slots.length === 0;
-      slots.push({ kind: "rep", velocity, leadingGap: first ? 0 : ri === 0 ? WIDE_GAP : REP_GAP });
-    });
-  });
-  return slots;
-}
-function buildSlots(set) {
-  switch (set.type) {
-    case "straight": {
-      const total = Math.max(set.velocities.length, set.planned ?? set.velocities.length);
-      return Array.from({ length: total }, (_, i) => {
-        const done = i < set.velocities.length;
-        return {
-          kind: done ? "rep" : "todo",
-          velocity: done ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : REP_GAP
-        };
-      });
-    }
-    case "range": {
-      const total = Math.max(set.max, set.velocities.length);
-      return Array.from({ length: total }, (_, i) => {
-        const kind = i < set.velocities.length ? "rep" : i < set.floor ? "todo" : "variable";
-        return {
-          kind,
-          velocity: kind === "rep" ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : REP_GAP
-        };
-      });
-    }
-    case "amrap": {
-      const reps = set.velocities.map((velocity, i) => ({
-        kind: "rep",
-        velocity,
-        leadingGap: i === 0 ? 0 : REP_GAP
-      }));
-      reps.push({ kind: "continue", leadingGap: reps.length === 0 ? 0 : REP_GAP });
-      return reps;
-    }
-    case "drop":
-      return chunkedRepSlots(set.subloads);
-    case "myo": {
-      const slots = chunkedRepSlots([set.activation, ...set.clusters]);
-      if (set.open) slots.push({ kind: "continue", leadingGap: slots.length === 0 ? 0 : REP_GAP });
-      return slots;
-    }
-    case "cluster": {
-      const total = Math.max(set.velocities.length, set.planned ?? set.velocities.length);
-      return Array.from({ length: total }, (_, i) => {
-        const done = i < set.velocities.length;
-        const boundary = i > 0 && i % set.groupSize === 0;
-        return {
-          kind: done ? "rep" : "todo",
-          velocity: done ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : boundary ? WIDE_GAP : REP_GAP
-        };
-      });
-    }
-  }
-}
-function setAccessibilityLabel(set, repCount) {
-  switch (set.type) {
-    case "straight":
-      return `Velocity strip, straight set, ${repCount} reps`;
-    case "range":
-      return `Velocity strip, rep-range set, floor ${set.floor} to ${set.max}, ${repCount} reps done`;
-    case "amrap":
-      return `Velocity strip, AMRAP set, ${repCount} reps and counting`;
-    case "drop":
-      return `Velocity strip, drop set, ${set.subloads.length} loads, ${repCount} reps`;
-    case "myo":
-      return `Velocity strip, myo-reps set, ${set.clusters.length} clusters${set.open ? ", open" : ""}, ${repCount} reps`;
-    case "cluster":
-      return `Velocity strip, cluster set, groups of ${set.groupSize}, ${repCount} reps`;
-  }
-}
-function slotAccessibilityLabel(slot, index) {
-  switch (slot.kind) {
-    case "rep":
-      return `Rep ${index + 1}: ${formatVelocity(slot.velocity ?? 0)} meters per second`;
-    case "todo":
-      return `Rep ${index + 1}: planned`;
-    case "variable":
-      return `Rep ${index + 1}: variable`;
-    case "continue":
-      return "Keep going";
-  }
-}
-var EXPANDED_TODO_STUB_PCT = 16;
-var EXPANDED_ENCODED_PCT = 45;
-var EXPANDED_HEIGHT = 60;
-var FIXED_MAX_VELOCITY = 1.15;
-var BARE_STUB_HEIGHT = 3;
-var HERO_HEIGHT = 220;
-var HERO_LABEL_HEADROOM = 20;
-var HERO_BAR_GAP = 8;
-var HERO_BAR_MAX_WIDTH = 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 * PEAK_HEADROOM;
-}
-function bareSlotHeight(slot, height, denom) {
-  if (slot.kind !== "rep" || denom <= 0) return BARE_STUB_HEIGHT;
-  const ratio = Math.min(1, (slot.velocity ?? 0) / denom);
-  return Math.max(BARE_STUB_HEIGHT, ratio * height);
-}
-function getReducedMotionPreference() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function usePrefersReducedMotion() {
-  const [reduced, setReduced] = react.useState(getReducedMotionPreference);
-  react.useEffect(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const handler = () => setReduced(mq.matches);
-    handler();
-    mq.addEventListener?.("change", handler);
-    return () => mq.removeEventListener?.("change", handler);
-  }, []);
-  return reduced;
-}
-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] = react.useState(() => new reactNative.Animated.Value(1));
-  react.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] = react.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,
-  zones,
-  liveRepIndex,
-  expanded = true,
-  onToggle,
-  onRepPress,
-  variant = "expanded",
-  height = EXPANDED_HEIGHT,
-  targetReps,
-  scale = "peak",
-  showNumbers = true,
-  showInfo = true,
-  className,
-  ...props
-}) {
-  const doneVelocities = set ? deriveDoneVelocities(set) : velocities ?? [];
-  const slots = set ? buildSlots(set) : doneVelocities.map((v, i) => ({
-    kind: "rep",
-    velocity: v,
-    leadingGap: i === 0 ? 0 : REP_GAP
-  }));
-  const maxVelocity = Math.max(...doneVelocities, 0);
-  const meanVelocity = calculateMeanVelocity(doneVelocities);
-  const loss = calculateVelocityLoss(doneVelocities);
-  const framed = showNumbers || showInfo;
-  const scaleDenom = scaleDenominator(scale, maxVelocity);
-  const hasZones = zones != null && zones.length > 0;
-  const barColorFor = (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
-  const slotColor = (slot) => {
-    if (slot.kind === "rep") return barColorFor(slot.velocity ?? 0);
-    if (slot.kind === "todo") return TODO_COLOR2;
-    return SET_STRIP_VARIABLE_COLOR;
-  };
-  const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const [heightAnim] = react.useState(() => new reactNative.Animated.Value(expanded ? height : 3));
-  const [labelOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
-  const [infoOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
-  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
-  const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
-  const liveScale = useLiveRepPop(
-    variant === "expanded" && framed,
-    liveRepIndex,
-    liveVelocity,
-    isNewPeak
-  );
-  react.useEffect(() => {
-    if (variant !== "expanded" || !framed) return;
-    reactNative.Animated.parallel([
-      reactNative.Animated.timing(heightAnim, {
-        toValue: expanded ? height : 3,
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-        useNativeDriver: false
-      }),
-      reactNative.Animated.timing(labelOpacity, {
-        toValue: expanded ? 1 : 0,
-        duration: 300,
-        delay: expanded ? 150 : 0,
-        useNativeDriver: false
-      }),
-      reactNative.Animated.timing(infoOpacity, {
-        toValue: expanded ? 1 : 0,
-        duration: 300,
-        delay: expanded ? 200 : 0,
-        useNativeDriver: false
-      })
-    ]).start();
-  }, [expanded, variant, framed, height, heightAnim, labelOpacity, infoOpacity]);
-  if (set == null && velocities == null) return null;
-  const repCount = doneVelocities.length;
-  const miniLabel = set ? setAccessibilityLabel(set, repCount) : `Velocity strip, ${repCount} reps`;
-  if (variant === "hero") {
-    const heroHeight = height === EXPANDED_HEIGHT ? HERO_HEIGHT : height;
-    return /* @__PURE__ */ jsx(
-      HeroVelocityChart,
-      {
-        doneVelocities,
-        barColorFor,
-        scaleDenom,
-        referenceVelocity: maxVelocity,
-        liveRepIndex,
-        isNewPeak,
-        targetReps,
-        height: heroHeight,
-        className,
-        viewProps: props
-      }
-    );
-  }
-  if (variant === "mini") {
-    const { style: externalStyle, ...restProps } = props;
-    return /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        className,
-        style: [
-          { flexDirection: "row", height: 3, gap: REP_GAP, borderRadius: 2, overflow: "hidden" },
-          externalStyle
-        ],
-        accessibilityRole: "image",
-        accessibilityLabel: miniLabel,
-        testID: "velocity-strip-mini",
-        ...restProps,
-        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              flex: 1,
-              backgroundColor: slotColor(slot),
-              borderRadius: 1,
-              minWidth: 4,
-              height: "100%",
-              // The container's uniform 2px gap covers rep spacing; a wide slot adds
-              // only the EXTRA (WIDE_GAP − REP_GAP) so the notch totals WIDE_GAP.
-              marginLeft: Math.max(0, slot.leadingGap - REP_GAP),
-              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
-            },
-            accessibilityElementsHidden: true,
-            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
-          },
-          i
-        ))
-      }
-    );
-  }
-  if (!framed) {
-    const { style: externalStyle, ...restProps } = props;
-    return /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        className,
-        style: [
-          { flexDirection: "row", height, gap: REP_GAP, alignItems: "flex-end" },
-          externalStyle
-        ],
-        accessibilityRole: "image",
-        accessibilityLabel: miniLabel,
-        testID: "velocity-strip-compact",
-        ...restProps,
-        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              flex: 1,
-              minWidth: 4,
-              height: bareSlotHeight(slot, height, scaleDenom),
-              // Top-rounded to match the framed chart's bars (the "rounded tops from
-              // the numbers one"); square bottoms since bars sit on the baseline.
-              borderTopLeftRadius: 2,
-              borderTopRightRadius: 2,
-              backgroundColor: slotColor(slot),
-              marginLeft: Math.max(0, slot.leadingGap - REP_GAP),
-              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
-            },
-            accessibilityElementsHidden: true,
-            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
-          },
-          i
-        ))
-      }
-    );
-  }
-  const stripLabel = set ? `${setAccessibilityLabel(set, repCount)}, tap to ${expanded ? "collapse" : "expand"}` : `Velocity chart for set, ${repCount} reps, tap to ${expanded ? "collapse" : "expand"}`;
-  const hasInteractiveContainer = onToggle != null;
-  const hasInteractiveReps = onRepPress != null && expanded;
-  const setBars = set != null && slots.map((slot, i) => {
-    const isStraightRep = set.type === "straight" && slot.kind === "rep";
-    const heightPct = isStraightRep ? scaleDenom > 0 ? Math.round((slot.velocity ?? 0) / scaleDenom * 100) : 0 : set.type === "straight" ? EXPANDED_TODO_STUB_PCT : EXPANDED_ENCODED_PCT;
-    return /* @__PURE__ */ jsx(
-      reactNative.View,
-      {
-        style: {
-          flex: 1,
-          height: "100%",
-          justifyContent: "flex-end",
-          marginLeft: slot.leadingGap
-        },
-        children: /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              height: `${heightPct}%`,
-              minHeight: 2,
-              borderTopLeftRadius: 2,
-              borderTopRightRadius: 2,
-              backgroundColor: slotColor(slot),
-              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
-            },
-            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`,
-            accessibilityRole: "image",
-            accessibilityLabel: slotAccessibilityLabel(slot, i)
-          }
-        )
-      },
-      i
-    );
-  });
-  const stripContent = /* @__PURE__ */ jsxs(
-    reactNative.Animated.View,
-    {
-      className: [className, expanded ? "bg-surface-raised" : "bg-transparent"].filter(Boolean).join(" "),
-      style: [
-        {
-          height: heightAnim,
-          width: "100%",
-          gap: 2,
-          borderRadius: expanded ? 6 : 2,
-          paddingTop: expanded ? 16 : 0,
-          paddingBottom: expanded ? 24 : 0,
-          // No horizontal inset — the framed chart's bars span full width, matching
-          // the bare spotlight and mini. Numbers/info sit in the vertical padding.
-          paddingHorizontal: 0,
-          paddingVertical: expanded ? void 0 : 8,
-          overflow: expanded ? "visible" : "hidden"
-        }
-      ],
-      accessibilityRole: hasInteractiveContainer || hasInteractiveReps ? "none" : "button",
-      accessibilityLabel: hasInteractiveContainer || hasInteractiveReps ? void 0 : stripLabel,
-      testID: "velocity-strip",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", flex: 1, gap: set ? 0 : 2, alignItems: "flex-end" }, children: set ? setBars : doneVelocities.map((v, i) => {
-          const barBackground = barColorFor(v);
-          const barHeightPct = scaleDenom > 0 ? Math.round(v / scaleDenom * 100) : 0;
-          const isLive = liveRepIndex === i;
-          const liveLabelSuffix = isLive ? isNewPeak ? ", latest rep, new set peak" : ", latest rep" : "";
-          const barStyle = expanded ? {
-            height: `${barHeightPct}%`,
-            minHeight: 2,
-            borderTopLeftRadius: 2,
-            borderTopRightRadius: 2,
-            backgroundColor: barBackground
-          } : {
-            minHeight: "100%",
-            borderTopLeftRadius: 2,
-            borderTopRightRadius: 2,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            backgroundColor: barBackground
-          };
-          const barInner = isLive ? /* @__PURE__ */ jsx(
-            reactNative.Animated.View,
-            {
-              style: [barStyle, { transform: [{ scale: liveScale }] }],
-              testID: `velocity-bar-${i}`,
-              accessibilityRole: "image",
-              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second${liveLabelSuffix}`
-            }
-          ) : /* @__PURE__ */ jsx(
-            reactNative.View,
-            {
-              style: barStyle,
-              testID: `velocity-bar-${i}`,
-              accessibilityRole: "image",
-              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
-            }
-          );
-          const bar = /* @__PURE__ */ jsxs(
-            reactNative.View,
-            {
-              style: {
-                flex: 1,
-                height: "100%",
-                justifyContent: "flex-end",
-                position: "relative"
-              },
-              children: [
-                expanded && showNumbers && /* @__PURE__ */ jsx(
-                  reactNative.Animated.View,
-                  {
-                    style: {
-                      opacity: labelOpacity,
-                      alignItems: "center",
-                      position: "absolute",
-                      top: -13,
-                      left: 0,
-                      right: 0
-                    },
-                    accessibilityElementsHidden: true,
-                    children: /* @__PURE__ */ jsx(
-                      reactNative.Text,
-                      {
-                        className: "text-text-secondary",
-                        style: { fontSize: 8, fontWeight: "600" },
-                        testID: `velocity-label-${i}`,
-                        children: formatVelocity(v)
-                      }
-                    )
-                  }
-                ),
-                barInner
-              ]
-            },
-            i
-          );
-          if (onRepPress && expanded) {
-            return /* @__PURE__ */ jsx(
-              reactNative.Pressable,
-              {
-                style: { flex: 1, height: "100%" },
-                onPress: () => onRepPress(i, v),
-                accessibilityRole: "button",
-                accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second, tap for details`,
-                testID: `velocity-bar-pressable-${i}`,
-                children: bar
-              },
-              i
-            );
-          }
-          return bar;
-        }) }),
-        expanded && showInfo && /* @__PURE__ */ jsxs(
-          reactNative.Animated.View,
-          {
-            style: {
-              flexDirection: "row",
-              justifyContent: "space-between",
-              opacity: infoOpacity,
-              position: "absolute",
-              bottom: 4,
-              left: 6,
-              right: 6
-            },
-            testID: "velocity-info-row",
-            children: [
-              /* @__PURE__ */ jsxs(
-                reactNative.Text,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif"
-                  },
-                  children: [
-                    meanZone,
-                    " ",
-                    "\xB7",
-                    " ",
-                    formatVelocity(meanVelocity),
-                    " m/s"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                reactNative.Text,
-                {
-                  className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    ...getLossStyle(loss)
-                  },
-                  children: [
-                    "Loss: ",
-                    loss,
-                    "%"
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-  if (onToggle) {
-    return /* @__PURE__ */ jsx(
-      reactNative.Pressable,
-      {
-        onPress: onToggle,
-        accessibilityRole: "button",
-        accessibilityLabel: stripLabel,
-        testID: "velocity-strip-pressable",
-        children: stripContent
-      }
-    );
-  }
-  return stripContent;
-}
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-
-// src/components/custom/Workout/PlaceholderStrip.tsx
-function SingleStrip({
-  width,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className,
-      style: [
-        {
-          height: 3,
-          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
-          borderRadius: 2,
-          opacity: 0.5
-        },
-        width != null ? { width } : { flex: 1 }
-      ],
-      accessibilityRole: "image",
-      accessibilityLabel: "Planned set, not yet completed",
-      testID: "placeholder-strip",
-      ...props
-    }
-  );
-}
-function SegmentedStrip({
-  segments = 3,
-  width,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className: cn("flex-row", className),
-      style: [
-        { height: 3, gap: 2, opacity: 0.5 },
-        width != null ? { width } : { flex: 1 }
-      ],
-      accessibilityRole: "image",
-      accessibilityLabel: "Planned set, not yet completed",
-      testID: "placeholder-strip",
-      ...props,
-      children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
-        reactNative.View,
-        {
-          style: {
-            flex: 1,
-            height: 3,
-            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
-            borderRadius: 1,
-            minWidth: 4
-          },
-          accessibilityElementsHidden: true,
-          testID: "placeholder-segment"
-        },
-        i
-      ))
-    }
-  );
-}
-function PlaceholderStrip({
-  mode = "single",
-  segments,
-  ...props
-}) {
-  if (mode === "segmented") {
-    return /* @__PURE__ */ jsx(SegmentedStrip, { segments, ...props });
-  }
-  return /* @__PURE__ */ jsx(SingleStrip, { ...props });
-}
-
-// src/components/icons/SvgIcon.tsx
-function SvgIcon({
-  size = 24,
-  color = "currentColor",
-  strokeWidth = 2,
-  fill = "none",
-  title,
-  children
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
-      children: [
-        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
-        children
-      ]
-    }
-  );
-}
-
-// src/components/icons/icons.tsx
-function StarIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }) });
-}
-function ScaleIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
-    /* @__PURE__ */ jsx("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 21h10" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 3v18" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
-  ] });
-}
-function AlertTriangleIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
-  ] });
-}
-function TrendingDownIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M16 17h6v-6" }),
-    /* @__PURE__ */ jsx("path", { d: "m22 17-8.5-8.5-5 5L2 7" })
-  ] });
-}
-function CircleSlashIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx("path", { d: "m9 15 6-6" })
-  ] });
-}
-function AwardIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "6" })
-  ] });
-}
-function InfoIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
-  ] });
-}
-
 // src/theme/tokens/semantic.ts
 var semanticColorsLight = {
   // Brand colors (brand-*)
@@ -1685,11 +486,1504 @@ var semanticColorsDark = {
   "avatar-background": primitiveColors.neutral[600],
   "avatar-text": primitiveColors.white
 };
-function getSemanticColors(mode) {
-  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+}
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  let r, g, b;
+  if (cleaned.length === 3) {
+    r = parseInt(cleaned[0] + cleaned[0], 16);
+    g = parseInt(cleaned[1] + cleaned[1], 16);
+    b = parseInt(cleaned[2] + cleaned[2], 16);
+  } else if (cleaned.length === 6) {
+    r = parseInt(cleaned.slice(0, 2), 16);
+    g = parseInt(cleaned.slice(2, 4), 16);
+    b = parseInt(cleaned.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+  return { r, g, b };
+}
+function rgbToHsv(r, g, b) {
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  const delta = max - min;
+  const v = max;
+  const s = max === 0 ? 0 : delta / max;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rNorm) {
+      h = 60 * ((gNorm - bNorm) / delta % 6);
+    } else if (max === gNorm) {
+      h = 60 * ((bNorm - rNorm) / delta + 2);
+    } else {
+      h = 60 * ((rNorm - gNorm) / delta + 4);
+    }
+  }
+  if (h < 0) h += 360;
+  return { h, s, v };
+}
+function hsvToRgb(h, s, v) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let rPrime, gPrime, bPrime;
+  if (h >= 0 && h < 60) {
+    rPrime = c;
+    gPrime = x;
+    bPrime = 0;
+  } else if (h >= 60 && h < 120) {
+    rPrime = x;
+    gPrime = c;
+    bPrime = 0;
+  } else if (h >= 120 && h < 180) {
+    rPrime = 0;
+    gPrime = c;
+    bPrime = x;
+  } else if (h >= 180 && h < 240) {
+    rPrime = 0;
+    gPrime = x;
+    bPrime = c;
+  } else if (h >= 240 && h < 300) {
+    rPrime = x;
+    gPrime = 0;
+    bPrime = c;
+  } else {
+    rPrime = c;
+    gPrime = 0;
+    bPrime = x;
+  }
+  return {
+    r: Math.round((rPrime + m) * 255),
+    g: Math.round((gPrime + m) * 255),
+    b: Math.round((bPrime + m) * 255)
+  };
+}
+function rgbToHex(r, g, b) {
+  const toHex = (n) => {
+    const clamped = Math.max(0, Math.min(255, Math.round(n)));
+    return clamped.toString(16).padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lighten(hex, amount = 0.1) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const newV = Math.min(1, hsv.v + amount);
+  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
+  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+}
+var shadowColors = {
+  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
+  charcoal: {
+    dark: "rgba(0, 0, 0, 0.5)",
+    light: "rgba(255, 255, 255, 0.12)",
+    // brighter for crisp rim light
+    darker: "rgba(0, 0, 0, 0.6)"
+  },
+  // For neutral dark surfaces (~#1F2937)
+  neutralDark: {
+    dark: "rgba(0, 0, 0, 0.4)",
+    light: "rgba(255, 255, 255, 0.08)",
+    darker: "rgba(0, 0, 0, 0.5)"
+  },
+  // For light surfaces (white/light gray backgrounds)
+  neutralLight: {
+    dark: "rgba(0, 0, 0, 0.15)",
+    // Visible dark shadow for depth on light backgrounds
+    light: "rgba(255, 255, 255, 1)",
+    // Bright highlight for raised effect (visible on light gray)
+    darker: "rgba(0, 0, 0, 0.2)"
+    // Deeper shadow for pressed states
+  }
+};
+var intensityConfig = {
+  subtle: { offset: 1, blur: 2 },
+  // very light, barely visible
+  medium: { offset: 2, blur: 4 },
+  // noticeable but restrained
+  strong: { offset: 2, blur: 5 }
+  // slightly deeper blur, same offset as medium
+};
+function createRaisedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native shadow approximation (limited compared to web)
+      shadowColor: "#000",
+      shadowOffset: { width: offset, height: offset },
+      shadowOpacity: 0.3,
+      shadowRadius: blur / 2,
+      elevation: offset
+    }
+  });
+}
+function createPressedShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const rimOffset = 1;
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      // React Native doesn't support inset shadows, approximate with darker bg
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+function createFlatShadow() {
+  return reactNative.Platform.select({
+    web: {
+      boxShadow: "none"
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      // Keep same offsets as normal state for rim to prevent "shrinking" effect
+      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowColor: "#000",
+      shadowOffset: { width: hoverOffset, height: hoverOffset },
+      shadowOpacity: 0.2,
+      shadowRadius: hoverBlur / 2,
+      elevation: hoverOffset
+    }
+  });
+}
+function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
+  const colors = shadowColors[surface];
+  const { offset, blur } = intensityConfig[intensity];
+  const hoverOffset = Math.max(1, Math.round(offset / 2));
+  const hoverBlur = Math.max(1, Math.round(blur / 2));
+  const rimBlur = 1;
+  return reactNative.Platform.select({
+    web: {
+      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
+      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
+    },
+    default: {
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  });
+}
+({
+  // Charcoal surface shadows (for dark toolbars, cards)
+  charcoal: {
+    raised: {
+      subtle: createRaisedShadow("charcoal", "subtle"),
+      medium: createRaisedShadow("charcoal", "medium"),
+      strong: createRaisedShadow("charcoal", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("charcoal", "subtle"),
+      medium: createRaisedHoverShadow("charcoal", "medium"),
+      strong: createRaisedHoverShadow("charcoal", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("charcoal", "subtle"),
+      medium: createPressedShadow("charcoal", "medium"),
+      strong: createPressedShadow("charcoal", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("charcoal", "subtle"),
+      medium: createPressedHoverShadow("charcoal", "medium"),
+      strong: createPressedHoverShadow("charcoal", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral dark surface shadows
+  neutralDark: {
+    raised: {
+      subtle: createRaisedShadow("neutralDark", "subtle"),
+      medium: createRaisedShadow("neutralDark", "medium"),
+      strong: createRaisedShadow("neutralDark", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
+      medium: createRaisedHoverShadow("neutralDark", "medium"),
+      strong: createRaisedHoverShadow("neutralDark", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralDark", "subtle"),
+      medium: createPressedShadow("neutralDark", "medium"),
+      strong: createPressedShadow("neutralDark", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralDark", "subtle"),
+      medium: createPressedHoverShadow("neutralDark", "medium"),
+      strong: createPressedHoverShadow("neutralDark", "strong")
+    },
+    flat: createFlatShadow()
+  },
+  // Neutral light surface shadows
+  neutralLight: {
+    raised: {
+      subtle: createRaisedShadow("neutralLight", "subtle"),
+      medium: createRaisedShadow("neutralLight", "medium"),
+      strong: createRaisedShadow("neutralLight", "strong")
+    },
+    raisedHover: {
+      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
+      medium: createRaisedHoverShadow("neutralLight", "medium"),
+      strong: createRaisedHoverShadow("neutralLight", "strong")
+    },
+    pressed: {
+      subtle: createPressedShadow("neutralLight", "subtle"),
+      medium: createPressedShadow("neutralLight", "medium"),
+      strong: createPressedShadow("neutralLight", "strong")
+    },
+    pressedHover: {
+      subtle: createPressedHoverShadow("neutralLight", "subtle"),
+      medium: createPressedHoverShadow("neutralLight", "medium"),
+      strong: createPressedHoverShadow("neutralLight", "strong")
+    },
+    flat: createFlatShadow()
+  }
+});
+
+// src/utils/colors.ts
+function alpha(color, opacity) {
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    let r, g, b;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else {
+      return color;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  return color;
+}
+
+// src/utils/workout-format.ts
+function roundRpe(rpe) {
+  return Math.round(rpe * 2) / 2;
+}
+function roundWeight(weight) {
+  return Math.round(weight);
+}
+function formatVelocity(velocity) {
+  return velocity.toFixed(2);
+}
+function roundTempo(tempo) {
+  return tempo.map((v) => Math.round(v * 10) / 10);
+}
+
+// src/theme/bar-paper.ts
+function grainOpacityForColor(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  if ([r, g, b].some(Number.isNaN)) return 0.14;
+  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return Math.min(0.24, Math.max(0.04, 0.02 + 0.31 * lum));
+}
+function barGrain(color) {
+  const op = grainOpacityForColor(color).toFixed(3);
+  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='${op}'/%3E%3C/svg%3E")`;
+}
+function barPaper(color, flip = false) {
+  return {
+    backgroundImage: barGrain(color),
+    boxShadow: flip ? "0 -6px 16px rgba(0,0,0,0.45)" : "inset 0 1.5px 0 rgba(255,255,255,0.22), 0 6px 16px rgba(0,0,0,0.45)"
+  };
+}
+var SURFACE_LEVEL_TOKEN = {
+  background: "background-base",
+  base: "surface-base",
+  elevated: "surface-elevated",
+  raised: "surface-raised",
+  overlay: "surface-overlay"
+};
+var ON_SURFACE_TOKEN = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  tertiary: "text-tertiary"
+};
+var DEFAULT_CONTEXT = { mode: "dark", level: "base" };
+var SurfaceContext = react.createContext(DEFAULT_CONTEXT);
+function useSurface() {
+  return react.useContext(SurfaceContext);
+}
+function useSurfaceMode() {
+  return react.useContext(SurfaceContext).mode;
+}
+function useOnSurfaceColor(role = "primary") {
+  return getSemanticColors(useSurfaceMode())[ON_SURFACE_TOKEN[role]];
+}
+function insetFloor(mode) {
+  const colors = getSemanticColors(mode);
+  return colors["surface-inset"] ?? surfaceRampDark.inset;
+}
+function surfaceBackground(level, mode) {
+  if (level === "inset") return insetFloor(mode);
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
+}
+var ANIMATION_EASING = reactNative.Easing.bezier(0.22, 1, 0.36, 1);
+var PEAK_OVERSHOOT = 1.12;
+function getReducedMotionPreference() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = react.useState(getReducedMotionPreference);
+  react.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = () => setReduced(mq.matches);
+    handler();
+    mq.addEventListener?.("change", handler);
+    return () => mq.removeEventListener?.("change", handler);
+  }, []);
+  return reduced;
+}
+function useLiveRepGrowth(active, liveRepIndex, liveVelocity, isNewPeak) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [liveGrowth] = react.useState(() => new reactNative.Animated.Value(1));
+  react.useEffect(() => {
+    if (liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveGrowth.setValue(1);
+      return;
+    }
+    liveGrowth.setValue(0);
+    if (isNewPeak) {
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(liveGrowth, {
+          toValue: PEAK_OVERSHOOT,
+          duration: 220,
+          easing: reactNative.Easing.out(reactNative.Easing.quad),
+          useNativeDriver: false
+        }),
+        reactNative.Animated.spring(liveGrowth, {
+          toValue: 1,
+          friction: 5,
+          tension: 140,
+          useNativeDriver: false
+        })
+      ]).start();
+    } else {
+      reactNative.Animated.timing(liveGrowth, {
+        toValue: 1,
+        duration: 300,
+        easing: ANIMATION_EASING,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveGrowth]);
+  return liveGrowth;
+}
+function wrapJsx(fn) {
+  return function(type, props, ...rest) {
+    if (props && typeof props.className === "string" && props.className) {
+      const cn2 = props.className;
+      const cssStyle = { $$css: true, [cn2]: cn2 };
+      const existing = props.style;
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle
+      };
+      delete props.className;
+    }
+    return fn(type, props, ...rest);
+  };
+}
+var jsx = wrapJsx(jsxRuntime.jsx);
+var jsxs = wrapJsx(jsxRuntime.jsxs);
+
+// src/components/custom/charts/SetBarChart.tsx
+function mixHex(a, b, t12) {
+  const parse = (h) => {
+    const s = h.replace("#", "");
+    return [parseInt(s.slice(0, 2), 16), parseInt(s.slice(2, 4), 16), parseInt(s.slice(4, 6), 16)];
+  };
+  const [ar, ag, ab] = parse(a);
+  const [br, bg, bb] = parse(b);
+  const ch = (x, y) => Math.round(x + (y - x) * t12).toString(16).padStart(2, "0");
+  return `#${ch(ar, br)}${ch(ag, bg)}${ch(ab, bb)}`;
+}
+var VARIABLE_FILL = primitiveRamps.cyan[900];
+var CONTINUE_OUTLINE = primitiveRamps.cyan[800];
+var FIXED_MAX_VALUE = 1.15;
+var PEAK_HEADROOM = 1.03;
+function scaleDenominator(scale, maxValue) {
+  return scale === "fixed" ? FIXED_MAX_VALUE : maxValue * PEAK_HEADROOM;
+}
+function valueLabelFontSize(height) {
+  return Math.round(Math.max(8, Math.min(12, height * 0.11)));
+}
+var SET_BAR_DEFAULT_HEIGHT = 220;
+var LABEL_ROW_HEIGHT = 16;
+var LABEL_GAP = 3;
+var GAP_RATIO = 0.08;
+var MIN_BAR_GAP = 2;
+var CHUNK_NOTCH_RATIO = 0.25;
+var CHUNK_NOTCH_MIN_PX = 10;
+var BAR_MAX_WIDTH = 120;
+var LABEL_MIN_BAR_WIDTH = 30;
+var DEFAULT_BAR_RADIUS = 5;
+var MIN_BAR_HEIGHT = 4;
+var FLAT_BAR_FRACTION = 0.5;
+var STUB_HEIGHT = 9;
+var REP_GAP = 2;
+function computeBarLayout(plotWidth, count, gapRatio = GAP_RATIO) {
+  const rawBarWidth = plotWidth > 0 && count > 0 ? plotWidth / (count + (count - 1) * gapRatio) : BAR_MAX_WIDTH;
+  const barWidth = Math.min(BAR_MAX_WIDTH, rawBarWidth);
+  const gap = plotWidth === 0 ? MIN_BAR_GAP : Math.max(MIN_BAR_GAP, gapRatio * barWidth);
+  return { barWidth, gap };
+}
+function isRep(slot) {
+  return slot.kind === "rep";
+}
+function repIndexByCell(cells) {
+  let count = 0;
+  return cells.map((slot) => isRep(slot) ? count++ : -1);
+}
+function SetBarChart({
+  slots,
+  colorFor,
+  height,
+  scale = "peak",
+  scaleMax,
+  orientation = "up",
+  liveRepIndex,
+  isNewPeak = false,
+  targetReps,
+  gapRatio = GAP_RATIO,
+  barRadius = DEFAULT_BAR_RADIUS,
+  cornerStyle = "top",
+  flat = false,
+  showValueLabels: showValueLabelsProp = false,
+  formatValue: formatValue2 = String,
+  todoVariant = "solid",
+  minColumns,
+  renderReference,
+  renderBarOverlay,
+  expandProgress,
+  hideBaseline = false,
+  testID,
+  testIDPrefix = "setbar",
+  accessibilityLabel: accessibilityLabel2,
+  label,
+  className,
+  viewProps = {}
+}) {
+  const targetPadded = Math.max(slots.length, targetReps ?? 0, minColumns ?? 0);
+  const cells = targetPadded > slots.length ? [
+    ...slots,
+    ...Array.from({ length: targetPadded - slots.length }, () => ({ kind: "todo" }))
+  ] : slots;
+  const repValues = cells.filter(isRep).map((s) => s.value ?? 0);
+  const best = repValues.length > 0 ? Math.max(...repValues) : 0;
+  const flip = orientation === "down";
+  const flipStyle = flip ? { transform: [{ scaleY: -1 }] } : null;
+  const placeholderColor = useOnSurfaceColor("tertiary");
+  const surface = useSurface();
+  const surfaceBg = surfaceBackground(surface.level, surface.mode);
+  const solidTodoColor = mixHex(surfaceBg, placeholderColor, 0.55);
+  const emptyColor = mixHex(surfaceBg, placeholderColor, 0.28);
+  const barCorners = cornerStyle === "all" ? { borderRadius: barRadius } : { borderTopLeftRadius: barRadius, borderTopRightRadius: barRadius };
+  const scaleDenom = scaleMax != null && scaleMax > 0 ? scaleMax * PEAK_HEADROOM : scaleDenominator(scale, best);
+  const showValueLabels = showValueLabelsProp && !flat;
+  const plotHeight = Math.max(0, height - (showValueLabels ? LABEL_ROW_HEIGHT + LABEL_GAP : 0));
+  const yOf = (value) => scaleDenom > 0 ? value / scaleDenom * plotHeight : 0;
+  const flatBarHeight = Math.max(MIN_BAR_HEIGHT, FLAT_BAR_FRACTION * plotHeight);
+  const compactBarHeight = Math.max(MIN_BAR_HEIGHT, plotHeight);
+  const valueBarHeight = (value) => scaleDenom > 0 ? Math.max(MIN_BAR_HEIGHT, Math.min(1, value / scaleDenom) * plotHeight) : MIN_BAR_HEIGHT;
+  const barHeight = (value) => flat ? compactBarHeight : valueBarHeight(value);
+  const liveValue = liveRepIndex != null && liveRepIndex < repValues.length ? repValues[liveRepIndex] : void 0;
+  const liveGrowth = useLiveRepGrowth(true, liveRepIndex, liveValue, isNewPeak);
+  const [plotW, setPlotW] = react.useState(0);
+  const onPlotLayout = (e) => setPlotW(e.nativeEvent.layout.width);
+  const totalCells = cells.length;
+  const { barWidth, gap } = computeBarLayout(plotW, totalCells, gapRatio);
+  const labelsCrowded = plotW > 0 && barWidth < LABEL_MIN_BAR_WIDTH;
+  const peakRepIndex = repValues.reduce((b, v, i) => v > repValues[b] ? i : b, 0);
+  const showBarLabel = (repIndex) => !labelsCrowded || repIndex === peakRepIndex || repIndex === liveRepIndex;
+  const geometry = { scaleDenom, plotHeight, yOf, best, flip };
+  const { style: externalStyle, ...restProps } = viewProps;
+  const a11y = accessibilityLabel2 != null ? { accessibilityRole: "image", accessibilityLabel: accessibilityLabel2 } : {};
+  const repIndices = repIndexByCell(cells);
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: [{ height, flexDirection: "row" }, externalStyle],
+      testID,
+      ...a11y,
+      ...restProps,
+      children: [
+        label ? /* @__PURE__ */ jsx(
+          ChartSideRail,
+          {
+            sections: [{ label, testID: `${testIDPrefix}-side-label` }],
+            sectionExtent: height
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          reactNative.View,
+          {
+            onLayout: onPlotLayout,
+            style: {
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "flex-end",
+              gap,
+              position: "relative",
+              borderBottomWidth: hideBaseline ? 0 : 2,
+              borderBottomColor: placeholderColor,
+              ...flipStyle
+            },
+            children: [
+              renderReference?.(geometry),
+              cells.map((slot, i) => {
+                const isChunkBoundary = (slot.leadingGap ?? REP_GAP) > REP_GAP;
+                const extraGap = isChunkBoundary ? Math.max(CHUNK_NOTCH_MIN_PX, CHUNK_NOTCH_RATIO * barWidth) : 0;
+                const column = {
+                  flex: 1,
+                  maxWidth: BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  marginLeft: extraGap
+                };
+                if (!isRep(slot)) {
+                  return /* @__PURE__ */ jsx(reactNative.View, { accessibilityElementsHidden: true, style: column, children: renderStub(
+                    slot.kind,
+                    barCorners,
+                    // Flat (compact) stubs fill the plot like the compact bars; else the fixed short stub.
+                    flat ? compactBarHeight : STUB_HEIGHT,
+                    placeholderColor,
+                    testIDPrefix,
+                    todoVariant,
+                    solidTodoColor,
+                    emptyColor
+                  ) }, i);
+                }
+                const repIndex = repIndices[i];
+                const value = slot.value ?? 0;
+                const isLive = liveRepIndex === repIndex;
+                const color = colorFor(value);
+                const barHeightStyle = expandProgress ? expandProgress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [flatBarHeight, valueBarHeight(value)]
+                }) : isLive ? liveGrowth.interpolate({ inputRange: [0, 1], outputRange: [0, barHeight(value)] }) : barHeight(value);
+                const ownLabel = showValueLabels && !renderBarOverlay && showBarLabel(repIndex);
+                const labelBottom = (expandProgress ? valueBarHeight(best) : barHeight(best)) + LABEL_GAP;
+                return /* @__PURE__ */ jsxs(reactNative.View, { accessibilityElementsHidden: renderBarOverlay == null, style: column, children: [
+                  ownLabel && // All labels pin to one aligned row JUST ABOVE THE PEAK BAR (not the container top),
+                  // in the muted on-surface-secondary tone — so the row hugs the bars, no floating void.
+                  /* @__PURE__ */ jsx(
+                    reactNative.Animated.View,
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: labelBottom,
+                        left: 0,
+                        right: 0,
+                        alignItems: "center",
+                        ...expandProgress ? { opacity: expandProgress } : null
+                      },
+                      pointerEvents: "none",
+                      children: /* @__PURE__ */ jsx(
+                        reactNative.Text,
+                        {
+                          className: "text-text-secondary",
+                          style: [{ fontSize: valueLabelFontSize(height), fontWeight: "700" }, flipStyle],
+                          testID: `${testIDPrefix}-label-${repIndex}`,
+                          children: formatValue2(value)
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    reactNative.Animated.View,
+                    {
+                      style: [
+                        { width: "100%", height: barHeightStyle, backgroundColor: color },
+                        barCorners,
+                        barPaper(color, flip)
+                      ],
+                      testID: `${testIDPrefix}-bar-${repIndex}`
+                    }
+                  ),
+                  renderBarOverlay?.(repIndex, value)
+                ] }, i);
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function renderStub(kind, barCorners, stubHeight, placeholderColor, testIDPrefix, todoVariant, solidTodoColor, emptyColor) {
+  const base = {
+    width: "100%",
+    height: stubHeight,
+    ...barCorners
+  };
+  if (kind === "variable") {
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: { ...base, backgroundColor: VARIABLE_FILL },
+        testID: `${testIDPrefix}-slot-variable`
+      }
+    );
+  }
+  if (kind === "continue") {
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: { ...base, borderWidth: 1, borderColor: CONTINUE_OUTLINE },
+        testID: `${testIDPrefix}-slot-continue`
+      }
+    );
+  }
+  if (kind === "empty") {
+    return /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: { ...base, backgroundColor: emptyColor },
+        testID: `${testIDPrefix}-slot-empty`
+      }
+    );
+  }
+  const todoStyle = todoVariant === "solid" ? { ...base, backgroundColor: solidTodoColor } : { ...base, borderWidth: 1, borderStyle: "dashed", borderColor: placeholderColor };
+  return /* @__PURE__ */ jsx(reactNative.View, { style: todoStyle, testID: `${testIDPrefix}-slot-todo` });
+}
+function sideLabelFontSize(height) {
+  return Math.round(Math.max(7, Math.min(13, height * 0.06)));
+}
+var SIDE_LABEL_INITIALS_BELOW = 70;
+function sideLabelText(label, extent) {
+  if (extent >= SIDE_LABEL_INITIALS_BELOW) return label;
+  return label.trim().split(/\s+/).map((word) => word.charAt(0)).join(" ").toUpperCase();
+}
+function ChartSideRail({
+  sections,
+  sectionExtent,
+  variant = "hero"
+}) {
+  if (!sections.some((s) => s.label)) return null;
+  const isRail = variant === "rail";
+  const labelLength = Math.max(0, sectionExtent - (isRail ? 0 : 6));
+  const fontSize = isRail ? 7 : sideLabelFontSize(sectionExtent);
+  const textStyle = {
+    maxWidth: "100%",
+    textAlign: "center",
+    fontSize,
+    fontWeight: "700",
+    letterSpacing: isRail || fontSize < 10 ? 0 : 2,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsx(reactNative.View, { style: { width: isRail ? 18 : 34 }, accessibilityElementsHidden: true, children: sections.map((s) => /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      style: { height: sectionExtent, alignItems: "center", justifyContent: "center" },
+      children: s.label ? /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            width: labelLength,
+            alignItems: "center",
+            transform: [{ rotate: "-90deg" }]
+          },
+          children: /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-tertiary",
+              style: textStyle,
+              numberOfLines: 1,
+              testID: s.testID,
+              children: isRail ? s.label : sideLabelText(s.label, sectionExtent)
+            }
+          )
+        }
+      ) : null
+    },
+    s.testID
+  )) });
+}
+
+// src/components/custom/Workout/VelocityStrip.tsx
+var VEL_COLORS = WORKOUT_TOKENS.scale;
+var bandIdToEffortColor = {
+  speed: sequentialEffort[0],
+  // green-300
+  power: sequentialEffort[2],
+  // amber-300 (gold)
+  strengthSpeed: sequentialEffort[3],
+  // orange-400
+  maximalStrength: sequentialEffort[4],
+  // red-600
+  grinding: sequentialEffort[5]
+  // red-700 — the distinct 5th band
+};
+function getVelocityZoneColor(velocity) {
+  if (velocity >= 1) return "vel-green";
+  if (velocity >= 0.75) return "vel-yellow";
+  if (velocity >= 0.5) return "vel-orange";
+  return "vel-red";
+}
+function getVelocityZoneName(velocity) {
+  if (velocity >= 1) return "Speed";
+  if (velocity >= 0.75) return "Power";
+  if (velocity >= 0.5) return "Strength-Speed";
+  return "Strength";
+}
+var zoneHexMap = {
+  "vel-green": VEL_COLORS.green,
+  "vel-yellow": VEL_COLORS.yellow,
+  "vel-orange": VEL_COLORS.orange,
+  "vel-red": VEL_COLORS.red
+};
+function calculateVelocityLoss(velocities) {
+  if (velocities.length < 2) return 0;
+  const best = Math.max(...velocities);
+  if (best <= 0) return 0;
+  const last = velocities[velocities.length - 1];
+  return Math.max(0, Math.round((best - last) / best * 100));
+}
+function calculateMeanVelocity(velocities) {
+  if (velocities.length === 0) return 0;
+  const sum = velocities.reduce((acc, v) => acc + v, 0);
+  return sum / velocities.length;
+}
+var VL_LOSS_THRESHOLDS = [10, 20, 30];
+function getVelocityLossColor(lossPct) {
+  const [t1, t22, t32] = VL_LOSS_THRESHOLDS;
+  if (lossPct < t1) return VEL_COLORS.green;
+  if (lossPct < t22) return VEL_COLORS.yellow;
+  if (lossPct < t32) return VEL_COLORS.orange;
+  return VEL_COLORS.red;
+}
+function velocityLossForRep(velocity, best) {
+  if (best <= 0) return 0;
+  return Math.max(0, Math.round((best - velocity) / best * 100));
+}
+function classifyBand(velocity, bands) {
+  for (const band of bands) {
+    if (band.max === null || velocity < band.max) return band;
+  }
+  return bands[bands.length - 1];
+}
+function bandColor(band) {
+  return bandIdToEffortColor[band.id] ?? VEL_COLORS.green;
+}
+function makeBarColorFor(zones) {
+  const hasZones = zones != null && zones.length > 0;
+  return (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
+}
+function getLossStyle(loss) {
+  if (loss > 25) return { color: VEL_COLORS.red };
+  if (loss > 20) return { color: VEL_COLORS.orange };
+  return null;
+}
+var REP_GAP2 = 2;
+var WIDE_GAP = 8;
+function deriveDoneVelocities(set) {
+  switch (set.type) {
+    case "drop":
+      return set.subloads.flat();
+    case "myo":
+      return [...set.activation, ...set.clusters.flat()];
+    default:
+      return set.velocities;
+  }
+}
+function chunkedRepSlots(chunks) {
+  const slots = [];
+  chunks.forEach((chunk) => {
+    chunk.forEach((velocity, ri) => {
+      const first = slots.length === 0;
+      slots.push({ kind: "rep", velocity, leadingGap: first ? 0 : ri === 0 ? WIDE_GAP : REP_GAP2 });
+    });
+  });
+  return slots;
+}
+function buildSlots(set) {
+  switch (set.type) {
+    case "straight": {
+      const total = Math.max(set.velocities.length, set.planned ?? set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const done = i < set.velocities.length;
+        return {
+          kind: done ? "rep" : "todo",
+          velocity: done ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : REP_GAP2
+        };
+      });
+    }
+    case "range": {
+      const total = Math.max(set.max, set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const kind = i < set.velocities.length ? "rep" : i < set.floor ? "todo" : "variable";
+        return {
+          kind,
+          velocity: kind === "rep" ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : REP_GAP2
+        };
+      });
+    }
+    case "amrap": {
+      const reps = set.velocities.map((velocity, i) => ({
+        kind: "rep",
+        velocity,
+        leadingGap: i === 0 ? 0 : REP_GAP2
+      }));
+      reps.push({ kind: "continue", leadingGap: reps.length === 0 ? 0 : REP_GAP2 });
+      return reps;
+    }
+    case "drop":
+      return chunkedRepSlots(set.subloads);
+    case "myo": {
+      const slots = chunkedRepSlots([set.activation, ...set.clusters]);
+      if (set.open) slots.push({ kind: "continue", leadingGap: slots.length === 0 ? 0 : REP_GAP2 });
+      return slots;
+    }
+    case "cluster": {
+      const total = Math.max(set.velocities.length, set.planned ?? set.velocities.length);
+      return Array.from({ length: total }, (_, i) => {
+        const done = i < set.velocities.length;
+        const boundary = i > 0 && i % set.groupSize === 0;
+        return {
+          kind: done ? "rep" : "todo",
+          velocity: done ? set.velocities[i] : void 0,
+          leadingGap: i === 0 ? 0 : boundary ? WIDE_GAP : REP_GAP2
+        };
+      });
+    }
+  }
+}
+function setAccessibilityLabel(set, repCount) {
+  switch (set.type) {
+    case "straight":
+      return `Velocity strip, straight set, ${repCount} reps`;
+    case "range":
+      return `Velocity strip, rep-range set, floor ${set.floor} to ${set.max}, ${repCount} reps done`;
+    case "amrap":
+      return `Velocity strip, AMRAP set, ${repCount} reps and counting`;
+    case "drop":
+      return `Velocity strip, drop set, ${set.subloads.length} loads, ${repCount} reps`;
+    case "myo":
+      return `Velocity strip, myo-reps set, ${set.clusters.length} clusters${set.open ? ", open" : ""}, ${repCount} reps`;
+    case "cluster":
+      return `Velocity strip, cluster set, groups of ${set.groupSize}, ${repCount} reps`;
+  }
+}
+var EXPANDED_HEIGHT = 60;
+var COMPACT_HEIGHT = 8;
+var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
+function DashedReferenceLine({
+  anchor,
+  offset,
+  testID
+}) {
+  const edge = anchor === "top" ? { top: offset } : { bottom: offset };
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      accessibilityElementsHidden: true,
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        borderTopWidth: 1,
+        borderStyle: "dashed",
+        borderColor: HERO_REFERENCE_COLOR,
+        pointerEvents: "none",
+        ...edge
+      },
+      testID
+    }
+  );
+}
+var BAND_LABEL_FONT = "monospace";
+var VL_LABEL_MIN_PLOT = 65;
+var VL_SEMANTIC = getSemanticColors("dark");
+function VelocityLossBands({
+  best,
+  scaleDenom,
+  plotHeight,
+  flip = false
+}) {
+  if (best <= 0 || scaleDenom <= 0 || plotHeight <= 0) return null;
+  const yOf = (v) => v / scaleDenom * plotHeight;
+  const vl20 = best * 0.8;
+  const vl30 = best * 0.7;
+  const vlFont = Math.round(Math.max(7, Math.min(9, plotHeight * 0.05)));
+  const showLabels = plotHeight >= VL_LABEL_MIN_PLOT;
+  const band = (loV, hiV, color) => /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: yOf(loV),
+        height: Math.max(0, yOf(hiV) - yOf(loV)),
+        backgroundColor: color
+      }
+    }
+  );
+  const threshold = (v, color, label) => /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: yOf(v),
+        // Collapse to zero height so the dashed border lands EXACTLY on `yOf(v)` — the
+        // band edge — instead of floating up half a text-row (the label then centres on
+        // the line, breaking it). Matches DashedReferenceLine's bare-border anchoring.
+        height: 0,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(reactNative.View, { style: { flex: 9, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } }),
+        showLabels ? /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              style: {
+                marginHorizontal: 6,
+                fontSize: vlFont,
+                fontWeight: "800",
+                fontFamily: BAND_LABEL_FONT,
+                color,
+                ...flip ? { transform: [{ scaleY: -1 }] } : null
+              },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(reactNative.View, { style: { flex: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } })
+        ] }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      accessibilityElementsHidden: true,
+      pointerEvents: "none",
+      style: { position: "absolute", left: 0, right: 0, bottom: 0, top: 0 },
+      testID: "velocity-loss-bands",
+      children: [
+        band(0, vl30, alpha(VL_SEMANTIC["status-error"], 0.09)),
+        band(vl30, vl20, alpha(VL_SEMANTIC["status-warning"], 0.08)),
+        threshold(vl20, alpha(VL_SEMANTIC["status-warning"], 0.75), "VL 20%"),
+        threshold(vl30, alpha(VL_SEMANTIC["status-error"], 0.75), "VL 30%")
+      ]
+    }
+  );
+}
+function velocityReferenceOverlay(g, showLossBands) {
+  const referencePx = g.best > 0 && g.scaleDenom > 0 ? Math.min(g.plotHeight, g.yOf(g.best)) : 0;
+  return /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    showLossBands && /* @__PURE__ */ jsx(
+      VelocityLossBands,
+      {
+        best: g.best,
+        scaleDenom: g.scaleDenom,
+        plotHeight: g.plotHeight,
+        flip: g.flip
+      }
+    ),
+    referencePx > 0 && /* @__PURE__ */ jsx(
+      DashedReferenceLine,
+      {
+        anchor: "bottom",
+        offset: referencePx,
+        testID: "velocity-hero-reference"
+      }
+    )
+  ] });
+}
+var ANIMATION_DURATION = 400;
+function VelocityStrip({
+  velocities,
+  set,
+  zones,
+  barColor = "loss",
+  showLossBands,
+  orientation = "up",
+  scaleMax,
+  hideBaseline,
+  columnSlots,
+  label,
+  liveRepIndex,
+  expanded = true,
+  onToggle,
+  onRepPress,
+  variant = "expanded",
+  height = EXPANDED_HEIGHT,
+  targetReps,
+  scale = "peak",
+  showNumbers = true,
+  showInfo = true,
+  className,
+  ...props
+}) {
+  const lossBandsOn = showLossBands ?? barColor === "loss";
+  const doneVelocities = set ? deriveDoneVelocities(set) : velocities ?? [];
+  const maxVelocity = Math.max(...doneVelocities, 0);
+  const meanVelocity = calculateMeanVelocity(doneVelocities);
+  const loss = calculateVelocityLoss(doneVelocities);
+  const framed = showNumbers || showInfo;
+  const hasZones = zones != null && zones.length > 0;
+  const zoneColorFor = makeBarColorFor(zones);
+  const barColorFor = (v) => barColor === "loss" ? getVelocityLossColor(velocityLossForRep(v, maxVelocity)) : zoneColorFor(v);
+  const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
+  const [expandProgress] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const [infoOpacity] = react.useState(() => new reactNative.Animated.Value(expanded ? 1 : 0));
+  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
+  const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
+  react.useEffect(() => {
+    if (variant !== "expanded" || !framed) return;
+    reactNative.Animated.parallel([
+      reactNative.Animated.timing(expandProgress, {
+        toValue: expanded ? 1 : 0,
+        duration: ANIMATION_DURATION,
+        easing: ANIMATION_EASING,
+        useNativeDriver: false
+      }),
+      reactNative.Animated.timing(infoOpacity, {
+        toValue: expanded ? 1 : 0,
+        duration: 300,
+        delay: expanded ? 200 : 0,
+        useNativeDriver: false
+      })
+    ]).start();
+  }, [expanded, variant, framed, expandProgress, infoOpacity]);
+  if (set == null && velocities == null) return null;
+  const repCount = doneVelocities.length;
+  const miniLabel = set ? setAccessibilityLabel(set, repCount) : `Velocity strip, ${repCount} reps`;
+  if (variant === "hero") {
+    const heroHeight = height === EXPANDED_HEIGHT && columnSlots == null ? SET_BAR_DEFAULT_HEIGHT : height;
+    const heroSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
+    const total = Math.max(repCount, targetReps ?? repCount);
+    const heroLabel = maxVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(maxVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
+    return /* @__PURE__ */ jsx(
+      SetBarChart,
+      {
+        slots: heroSlots,
+        colorFor: barColorFor,
+        height: heroHeight,
+        scale,
+        scaleMax,
+        orientation,
+        liveRepIndex,
+        isNewPeak,
+        targetReps: set || columnSlots ? void 0 : targetReps,
+        label,
+        showValueLabels: true,
+        formatValue: formatVelocity,
+        renderReference: (g) => velocityReferenceOverlay(g, lossBandsOn),
+        hideBaseline: true,
+        testID: "velocity-strip-hero",
+        testIDPrefix: "velocity",
+        accessibilityLabel: heroLabel,
+        className,
+        viewProps: props
+      }
+    );
+  }
+  if (variant === "compact") {
+    const compactSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
+    const compactHeight = height === EXPANDED_HEIGHT ? COMPACT_HEIGHT : height;
+    return /* @__PURE__ */ jsx(
+      SetBarChart,
+      {
+        slots: compactSlots,
+        colorFor: barColorFor,
+        height: compactHeight,
+        scale,
+        scaleMax,
+        orientation,
+        flat: true,
+        barRadius: 2,
+        cornerStyle: "all",
+        targetReps: set || columnSlots ? void 0 : targetReps,
+        label,
+        hideBaseline: true,
+        testID: "velocity-strip-compact",
+        testIDPrefix: "velocity",
+        accessibilityLabel: miniLabel,
+        className,
+        viewProps: props
+      }
+    );
+  }
+  if (!framed) {
+    const spotlightSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
+    return /* @__PURE__ */ jsx(
+      SetBarChart,
+      {
+        slots: spotlightSlots,
+        colorFor: barColorFor,
+        height,
+        scale,
+        scaleMax,
+        orientation,
+        liveRepIndex,
+        isNewPeak,
+        barRadius: 2,
+        cornerStyle: "top",
+        targetReps: set ? void 0 : targetReps,
+        label,
+        hideBaseline: true,
+        testID: "velocity-strip-spotlight",
+        testIDPrefix: "velocity",
+        accessibilityLabel: miniLabel,
+        className,
+        viewProps: props
+      }
+    );
+  }
+  const stripLabel = set ? `${setAccessibilityLabel(set, repCount)}, tap to ${expanded ? "collapse" : "expand"}` : `Velocity chart for set, ${repCount} reps, tap to ${expanded ? "collapse" : "expand"}`;
+  const hasInteractiveContainer = onToggle != null;
+  const hasInteractiveReps = onRepPress != null && expanded;
+  const framedSlots = set ? buildSlots(set).map((sl) => ({
+    kind: sl.kind,
+    value: sl.velocity,
+    leadingGap: sl.leadingGap
+  })) : doneVelocities.map((v) => ({ kind: "rep", value: v }));
+  const needsBarOverlay = showNumbers || onRepPress != null;
+  const renderFramedBarOverlay = needsBarOverlay ? (repIndex, value) => /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+    showNumbers && /* @__PURE__ */ jsx(
+      reactNative.Animated.View,
+      {
+        style: {
+          opacity: expandProgress,
+          position: "absolute",
+          top: -13,
+          left: 0,
+          right: 0,
+          alignItems: "center"
+        },
+        accessibilityElementsHidden: true,
+        pointerEvents: "none",
+        children: /* @__PURE__ */ jsx(
+          reactNative.Text,
+          {
+            className: "text-text-secondary",
+            style: { fontSize: 8, fontWeight: "600" },
+            testID: `velocity-label-${repIndex}`,
+            children: formatVelocity(value)
+          }
+        )
+      }
+    ),
+    onRepPress && expanded && /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
+        onPress: () => onRepPress(repIndex, value),
+        accessibilityRole: "button",
+        accessibilityLabel: `Rep ${repIndex + 1}: ${formatVelocity(value)} meters per second, tap for details`,
+        testID: `velocity-bar-pressable-${repIndex}`
+      }
+    )
+  ] }) : void 0;
+  const stripContent = /* @__PURE__ */ jsxs(
+    reactNative.Animated.View,
+    {
+      className: [className, "bg-surface-raised"].filter(Boolean).join(" "),
+      style: { width: "100%", borderRadius: 6, paddingTop: 16, paddingBottom: showInfo ? 8 : 4 },
+      accessibilityRole: hasInteractiveContainer || hasInteractiveReps ? "none" : "button",
+      accessibilityLabel: hasInteractiveContainer || hasInteractiveReps ? void 0 : stripLabel,
+      testID: "velocity-strip",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SetBarChart,
+          {
+            slots: framedSlots,
+            colorFor: barColorFor,
+            height,
+            scale,
+            scaleMax,
+            expandProgress,
+            renderBarOverlay: renderFramedBarOverlay,
+            targetReps: set ? void 0 : targetReps,
+            barRadius: 2,
+            cornerStyle: "top",
+            hideBaseline: true,
+            testIDPrefix: "velocity"
+          }
+        ),
+        expanded && showInfo && /* @__PURE__ */ jsxs(
+          reactNative.Animated.View,
+          {
+            style: {
+              flexDirection: "row",
+              justifyContent: "space-between",
+              opacity: infoOpacity,
+              marginTop: 6,
+              paddingHorizontal: 6
+            },
+            testID: "velocity-info-row",
+            children: [
+              /* @__PURE__ */ jsxs(
+                reactNative.Text,
+                {
+                  className: "text-text-secondary",
+                  style: { fontSize: 10, fontFamily: "Inter, sans-serif" },
+                  children: [
+                    meanZone,
+                    " ",
+                    "\xB7",
+                    " ",
+                    formatVelocity(meanVelocity),
+                    " m/s"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                reactNative.Text,
+                {
+                  className: "text-text-secondary",
+                  style: { fontSize: 10, fontFamily: "Inter, sans-serif", ...getLossStyle(loss) },
+                  children: [
+                    "Loss: ",
+                    loss,
+                    "%"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (onToggle) {
+    return /* @__PURE__ */ jsx(
+      reactNative.Pressable,
+      {
+        onPress: onToggle,
+        accessibilityRole: "button",
+        accessibilityLabel: stripLabel,
+        testID: "velocity-strip-pressable",
+        children: stripContent
+      }
+    );
+  }
+  return stripContent;
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+// src/components/custom/Workout/PlaceholderStrip.tsx
+function SingleStrip({
+  width,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: [
+        {
+          height: 3,
+          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+          borderRadius: 2,
+          opacity: 0.5
+        },
+        width != null ? { width } : { flex: 1 }
+      ],
+      accessibilityRole: "image",
+      accessibilityLabel: "Planned set, not yet completed",
+      testID: "placeholder-strip",
+      ...props
+    }
+  );
+}
+function SegmentedStrip({
+  segments = 3,
+  width,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className: cn("flex-row", className),
+      style: [
+        { height: 3, gap: 2, opacity: 0.5 },
+        width != null ? { width } : { flex: 1 }
+      ],
+      accessibilityRole: "image",
+      accessibilityLabel: "Planned set, not yet completed",
+      testID: "placeholder-strip",
+      ...props,
+      children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            flex: 1,
+            height: 3,
+            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+            borderRadius: 1,
+            minWidth: 4
+          },
+          accessibilityElementsHidden: true,
+          testID: "placeholder-segment"
+        },
+        i
+      ))
+    }
+  );
+}
+function PlaceholderStrip({
+  mode = "single",
+  segments,
+  ...props
+}) {
+  if (mode === "segmented") {
+    return /* @__PURE__ */ jsx(SegmentedStrip, { segments, ...props });
+  }
+  return /* @__PURE__ */ jsx(SingleStrip, { ...props });
+}
+
+// src/components/icons/SvgIcon.tsx
+function SvgIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  fill = "none",
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/components/icons/icons.tsx
+function StarIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }) });
+}
+function ScaleIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 21h10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
+  ] });
+}
+function AlertTriangleIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+  ] });
+}
+function TrendingDownIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 17h6v-6" }),
+    /* @__PURE__ */ jsx("path", { d: "m22 17-8.5-8.5-5 5L2 7" })
+  ] });
+}
+function CircleSlashIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 15 6-6" })
+  ] });
+}
+function AwardIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "6" })
+  ] });
+}
+function InfoIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+  ] });
 }
-
-// src/components/custom/Workout/BaseBadge.tsx
 var t = getSemanticColors("dark");
 var baseBadgeSizeConfig = {
   sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
@@ -1804,565 +2098,257 @@ function PrBadge({
         easing: reactNative.Easing.bezier(0.34, 1.56, 0.64, 1),
         useNativeDriver: true
       })
-    ]).start();
-  }, [animate, scale, opacity]);
-  const badge = compact ? /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className,
-      accessibilityRole: "image",
-      accessibilityLabel: `Personal record: ${resolvedLabel}`,
-      testID: "pr-badge-star",
-      ...props,
-      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: BRAND_PRIMARY, fill: BRAND_PRIMARY, strokeWidth: 2 })
-    }
-  ) : /* @__PURE__ */ jsx(
-    BaseBadge,
-    {
-      variant: "pr",
-      className,
-      accessibilityLabel: `Personal record: ${resolvedLabel}`,
-      ...props,
-      children: /* @__PURE__ */ jsxs(
-        reactNative.Text,
-        {
-          style: {
-            fontSize: 12,
-            color: BRAND_PRIMARY,
-            fontWeight: "700",
-            fontFamily: "Inter, sans-serif"
-          },
-          children: [
-            "\u2605",
-            " ",
-            resolvedLabel
-          ]
-        }
-      )
-    }
-  );
-  if (animate) {
-    return /* @__PURE__ */ jsx(
-      reactNative.Animated.View,
-      {
-        style: { transform: [{ scale }], opacity },
-        testID: "pr-badge-animated",
-        children: badge
-      }
-    );
-  }
-  return badge;
-}
-var DARK = getSemanticColors("dark");
-var TEXT_ACTIVE = DARK["text-primary"];
-var TEXT_MUTED = DARK["text-secondary"];
-var COL = { set: 36, reps: 44, load: 56, rpe: 36 };
-var cellText = { fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: "600" };
-var typeBadge = {
-  fontSize: 10,
-  fontWeight: "700",
-  fontFamily: "Inter, sans-serif",
-  color: WORKOUT_TOKENS.scale.orange,
-  backgroundColor: "rgba(255,165,2,0.12)",
-  paddingVertical: 1,
-  paddingHorizontal: 5,
-  borderRadius: 3,
-  overflow: "hidden"
-};
-function displayReps(set) {
-  return set.state === "done" ? set.reps : set.target.reps;
-}
-function displayWeight(set) {
-  return set.state === "done" ? set.weight : set.target.weight;
-}
-function plannedReps(set) {
-  if (set.state === "done") return set.velocities.length;
-  if (set.state === "live") return set.target.reps;
-  return set.planned ?? set.target.reps;
-}
-function accessibilityLabel(set) {
-  const base = `Set ${set.setNumber}: ${displayReps(set)} reps at ${roundWeight(displayWeight(set))} ${set.unit}`;
-  if (set.state === "live") return `${base}, in progress`;
-  if (set.state === "todo") return `${base}, upcoming`;
-  return base;
-}
-function Cell({
-  width,
-  children,
-  testID
-}) {
-  return /* @__PURE__ */ jsx(reactNative.View, { style: { width, alignItems: "center", justifyContent: "center" }, testID, children });
-}
-function RowStrip({ set }) {
-  const zones = set.velocityZones;
-  if (set.state === "live") {
-    return /* @__PURE__ */ jsx(
-      VelocityStrip,
-      {
-        variant: "expanded",
-        showNumbers: false,
-        showInfo: false,
-        height: 24,
-        scale: "fixed",
-        set: { type: "straight", velocities: set.velocities, planned: set.target.reps },
-        zones
-      }
-    );
-  }
-  const velocities = set.state === "done" ? set.velocities : [];
-  return /* @__PURE__ */ jsx(
-    VelocityStrip,
-    {
-      variant: "mini",
-      set: { type: "straight", velocities, planned: plannedReps(set) },
-      zones
-    }
-  );
-}
-function SetRow(set) {
-  const live = set.state === "live";
-  const valueColor = live ? TEXT_ACTIVE : TEXT_MUTED;
-  const rpe = set.state === "todo" ? null : set.rpe;
-  return /* @__PURE__ */ jsxs(
-    reactNative.View,
-    {
-      style: { paddingVertical: 6, paddingHorizontal: 8 },
-      accessibilityLabel: accessibilityLabel(set),
-      testID: "set-row",
-      children: [
-        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsx(Cell, { width: COL.set, testID: "set-row-set-number", children: set.setType ? /* @__PURE__ */ jsx(reactNative.Text, { style: typeBadge, testID: "set-row-type-badge", children: set.setType }) : /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor, fontWeight: live ? "700" : "600" }, children: set.setNumber }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.reps, testID: "set-row-reps", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: displayReps(set) }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.load, testID: "set-row-weight", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: roundWeight(displayWeight(set)) }) }),
-          /* @__PURE__ */ jsx(Cell, { width: COL.rpe, testID: "set-row-rpe", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: TEXT_MUTED }, children: rpe != null ? roundRpe(rpe) : "\u2014" }) })
-        ] }),
-        /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: live ? 6 : 4 }, testID: "set-row-strip", children: /* @__PURE__ */ jsx(RowStrip, { set }) })
-      ]
-    }
-  );
-}
-var PREV_COLUMN = { label: "PREV", width: void 0 };
-function buildColumns(unit, showPrevious) {
-  return [
-    { label: "SET", width: 36 },
-    ...showPrevious ? [PREV_COLUMN] : [],
-    { label: "REPS", width: 44 },
-    { label: unit.toUpperCase(), width: 56 },
-    { label: "RPE", width: 36 }
-  ];
-}
-function SetTableHeader({
-  unit = "lbs",
-  showPrevious = true,
-  testID = "table-header"
-}) {
-  const columns = buildColumns(unit, showPrevious);
-  return /* @__PURE__ */ jsx(
-    reactNative.View,
-    {
-      className: "flex-row",
-      style: {
-        paddingVertical: 8,
-        paddingHorizontal: 8,
-        paddingBottom: 4,
-        ...showPrevious ? {} : { justifyContent: "space-between" }
-      },
-      testID,
-      children: columns.map(({ label, width }) => {
-        const isFlex = width === void 0;
-        return /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: {
-              ...isFlex ? { minWidth: 44 } : { width, flexShrink: 1 },
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 8
-            },
-            ...isFlex ? { className: "flex-1" } : {},
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 10,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  textTransform: "uppercase",
-                  letterSpacing: 0.8
-                },
-                children: label
-              }
-            )
-          },
-          label
-        );
-      })
-    }
-  );
-}
-var METRIC_FONT = "Inter, sans-serif";
-function MetricCell({ children, color, fontSize = 11 }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.Text,
-    {
-      style: {
-        fontFamily: METRIC_FONT,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children
-    }
-  );
-}
-
-// src/components/custom/Workout/SetsRepsLoad.tsx
-var t2 = getSemanticColors("dark");
-var TIMES = "\xD7";
-var AT = "@";
-function SetsRepsLoad({
-  sets,
-  reps,
-  load,
-  unit = "lb",
-  fontSize,
-  className,
-  ...props
-}) {
-  const value = t2["text-primary"];
-  const sep = t2["text-tertiary"];
-  return /* @__PURE__ */ jsxs(
+    ]).start();
+  }, [animate, scale, opacity]);
+  const badge = compact ? /* @__PURE__ */ jsx(
     reactNative.View,
     {
       className,
-      style: { flexDirection: "row", alignItems: "baseline" },
-      accessibilityLabel: `${sets} sets of ${reps} reps at ${load} ${unit}`,
-      testID: "sets-reps-load",
+      accessibilityRole: "image",
+      accessibilityLabel: `Personal record: ${resolvedLabel}`,
+      testID: "pr-badge-star",
       ...props,
-      children: [
-        /* @__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}` })
-      ]
+      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: BRAND_PRIMARY, fill: BRAND_PRIMARY, strokeWidth: 2 })
+    }
+  ) : /* @__PURE__ */ jsx(
+    BaseBadge,
+    {
+      variant: "pr",
+      className,
+      accessibilityLabel: `Personal record: ${resolvedLabel}`,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: 12,
+            color: BRAND_PRIMARY,
+            fontWeight: "700",
+            fontFamily: "Inter, sans-serif"
+          },
+          children: [
+            "\u2605",
+            " ",
+            resolvedLabel
+          ]
+        }
+      )
     }
   );
-}
-function hexToRgb(hex) {
-  const cleaned = hex.replace("#", "");
-  let r, g, b;
-  if (cleaned.length === 3) {
-    r = parseInt(cleaned[0] + cleaned[0], 16);
-    g = parseInt(cleaned[1] + cleaned[1], 16);
-    b = parseInt(cleaned[2] + cleaned[2], 16);
-  } else if (cleaned.length === 6) {
-    r = parseInt(cleaned.slice(0, 2), 16);
-    g = parseInt(cleaned.slice(2, 4), 16);
-    b = parseInt(cleaned.slice(4, 6), 16);
-  } else {
-    return null;
+  if (animate) {
+    return /* @__PURE__ */ jsx(
+      reactNative.Animated.View,
+      {
+        style: { transform: [{ scale }], opacity },
+        testID: "pr-badge-animated",
+        children: badge
+      }
+    );
   }
-  return { r, g, b };
+  return badge;
 }
-function rgbToHsv(r, g, b) {
-  const rNorm = r / 255;
-  const gNorm = g / 255;
-  const bNorm = b / 255;
-  const max = Math.max(rNorm, gNorm, bNorm);
-  const min = Math.min(rNorm, gNorm, bNorm);
-  const delta = max - min;
-  const v = max;
-  const s = max === 0 ? 0 : delta / max;
-  let h = 0;
-  if (delta !== 0) {
-    if (max === rNorm) {
-      h = 60 * ((gNorm - bNorm) / delta % 6);
-    } else if (max === gNorm) {
-      h = 60 * ((bNorm - rNorm) / delta + 2);
-    } else {
-      h = 60 * ((rNorm - gNorm) / delta + 4);
-    }
-  }
-  if (h < 0) h += 360;
-  return { h, s, v };
+var DARK = getSemanticColors("dark");
+var TEXT_ACTIVE = DARK["text-primary"];
+var TEXT_MUTED = DARK["text-secondary"];
+var COL = { set: 36, reps: 44, load: 56, rpe: 36 };
+var cellText = { fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: "600" };
+var typeBadge = {
+  fontSize: 10,
+  fontWeight: "700",
+  fontFamily: "Inter, sans-serif",
+  color: WORKOUT_TOKENS.scale.orange,
+  backgroundColor: "rgba(255,165,2,0.12)",
+  paddingVertical: 1,
+  paddingHorizontal: 5,
+  borderRadius: 3,
+  overflow: "hidden"
+};
+function displayReps(set) {
+  return set.state === "done" ? set.reps : set.target.reps;
 }
-function hsvToRgb(h, s, v) {
-  const c = v * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = v - c;
-  let rPrime, gPrime, bPrime;
-  if (h >= 0 && h < 60) {
-    rPrime = c;
-    gPrime = x;
-    bPrime = 0;
-  } else if (h >= 60 && h < 120) {
-    rPrime = x;
-    gPrime = c;
-    bPrime = 0;
-  } else if (h >= 120 && h < 180) {
-    rPrime = 0;
-    gPrime = c;
-    bPrime = x;
-  } else if (h >= 180 && h < 240) {
-    rPrime = 0;
-    gPrime = x;
-    bPrime = c;
-  } else if (h >= 240 && h < 300) {
-    rPrime = x;
-    gPrime = 0;
-    bPrime = c;
-  } else {
-    rPrime = c;
-    gPrime = 0;
-    bPrime = x;
-  }
-  return {
-    r: Math.round((rPrime + m) * 255),
-    g: Math.round((gPrime + m) * 255),
-    b: Math.round((bPrime + m) * 255)
-  };
+function displayWeight(set) {
+  return set.state === "done" ? set.weight : set.target.weight;
 }
-function rgbToHex(r, g, b) {
-  const toHex = (n) => {
-    const clamped = Math.max(0, Math.min(255, Math.round(n)));
-    return clamped.toString(16).padStart(2, "0");
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+function plannedReps(set) {
+  if (set.state === "done") return set.velocities.length;
+  if (set.state === "live") return set.target.reps;
+  return set.planned ?? set.target.reps;
 }
-function lighten(hex, amount = 0.1) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const newV = Math.min(1, hsv.v + amount);
-  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
-  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+function accessibilityLabel(set) {
+  const base = `Set ${set.setNumber}: ${displayReps(set)} reps at ${roundWeight(displayWeight(set))} ${set.unit}`;
+  if (set.state === "live") return `${base}, in progress`;
+  if (set.state === "todo") return `${base}, upcoming`;
+  return base;
 }
-var shadowColors = {
-  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
-  charcoal: {
-    dark: "rgba(0, 0, 0, 0.5)",
-    light: "rgba(255, 255, 255, 0.12)",
-    // brighter for crisp rim light
-    darker: "rgba(0, 0, 0, 0.6)"
-  },
-  // For neutral dark surfaces (~#1F2937)
-  neutralDark: {
-    dark: "rgba(0, 0, 0, 0.4)",
-    light: "rgba(255, 255, 255, 0.08)",
-    darker: "rgba(0, 0, 0, 0.5)"
-  },
-  // For light surfaces (white/light gray backgrounds)
-  neutralLight: {
-    dark: "rgba(0, 0, 0, 0.15)",
-    // Visible dark shadow for depth on light backgrounds
-    light: "rgba(255, 255, 255, 1)",
-    // Bright highlight for raised effect (visible on light gray)
-    darker: "rgba(0, 0, 0, 0.2)"
-    // Deeper shadow for pressed states
-  }
-};
-var intensityConfig = {
-  subtle: { offset: 1, blur: 2 },
-  // very light, barely visible
-  medium: { offset: 2, blur: 4 },
-  // noticeable but restrained
-  strong: { offset: 2, blur: 5 }
-  // slightly deeper blur, same offset as medium
-};
-function createRaisedShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      // React Native shadow approximation (limited compared to web)
-      shadowColor: "#000",
-      shadowOffset: { width: offset, height: offset },
-      shadowOpacity: 0.3,
-      shadowRadius: blur / 2,
-      elevation: offset
-    }
-  });
+function Cell({
+  width,
+  children,
+  testID
+}) {
+  return /* @__PURE__ */ jsx(reactNative.View, { style: { width, alignItems: "center", justifyContent: "center" }, testID, children });
 }
-function createPressedShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const rimOffset = 1;
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      // React Native doesn't support inset shadows, approximate with darker bg
-      shadowOpacity: 0,
-      elevation: 0
+function RowStrip({ set }) {
+  const zones = set.velocityZones;
+  if (set.state === "live") {
+    return /* @__PURE__ */ jsx(
+      VelocityStrip,
+      {
+        variant: "expanded",
+        showNumbers: false,
+        showInfo: false,
+        height: 24,
+        scale: "fixed",
+        liveRepIndex: set.velocities.length - 1,
+        set: { type: "straight", velocities: set.velocities, planned: set.target.reps },
+        zones
+      }
+    );
+  }
+  const velocities = set.state === "done" ? set.velocities : [];
+  return /* @__PURE__ */ jsx(
+    VelocityStrip,
+    {
+      variant: "compact",
+      height: 8,
+      hideBaseline: true,
+      set: { type: "straight", velocities, planned: plannedReps(set) },
+      zones
     }
-  });
+  );
 }
-function createFlatShadow() {
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: "none"
-    },
-    default: {
-      shadowOpacity: 0,
-      elevation: 0
+function SetRow(set) {
+  const live = set.state === "live";
+  const valueColor = live ? TEXT_ACTIVE : TEXT_MUTED;
+  const rpe = set.state === "todo" ? null : set.rpe;
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { paddingVertical: 6, paddingHorizontal: 8 },
+      accessibilityLabel: accessibilityLabel(set),
+      testID: "set-row",
+      children: [
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsx(Cell, { width: COL.set, testID: "set-row-set-number", children: set.setType ? /* @__PURE__ */ jsx(reactNative.Text, { style: typeBadge, testID: "set-row-type-badge", children: set.setType }) : /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor, fontWeight: live ? "700" : "600" }, children: set.setNumber }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.reps, testID: "set-row-reps", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: displayReps(set) }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.load, testID: "set-row-weight", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: valueColor }, children: roundWeight(displayWeight(set)) }) }),
+          /* @__PURE__ */ jsx(Cell, { width: COL.rpe, testID: "set-row-rpe", children: /* @__PURE__ */ jsx(reactNative.Text, { style: { ...cellText, color: TEXT_MUTED }, children: rpe != null ? roundRpe(rpe) : "\u2014" }) })
+        ] }),
+        /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: live ? 6 : 4 }, testID: "set-row-strip", children: /* @__PURE__ */ jsx(RowStrip, { set }) })
+      ]
     }
-  });
+  );
 }
-function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const hoverOffset = Math.max(1, Math.round(offset / 2));
-  const hoverBlur = Math.max(1, Math.round(blur / 2));
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      // Keep same offsets as normal state for rim to prevent "shrinking" effect
-      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      shadowColor: "#000",
-      shadowOffset: { width: hoverOffset, height: hoverOffset },
-      shadowOpacity: 0.2,
-      shadowRadius: hoverBlur / 2,
-      elevation: hoverOffset
+var PREV_COLUMN = { label: "PREV", width: void 0 };
+function buildColumns(unit, showPrevious) {
+  return [
+    { label: "SET", width: 36 },
+    ...showPrevious ? [PREV_COLUMN] : [],
+    { label: "REPS", width: 44 },
+    { label: unit.toUpperCase(), width: 56 },
+    { label: "RPE", width: 36 }
+  ];
+}
+function SetTableHeader({
+  unit = "lbs",
+  showPrevious = true,
+  testID = "table-header"
+}) {
+  const columns = buildColumns(unit, showPrevious);
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className: "flex-row",
+      style: {
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        paddingBottom: 4,
+        ...showPrevious ? {} : { justifyContent: "space-between" }
+      },
+      testID,
+      children: columns.map(({ label, width }) => {
+        const isFlex = width === void 0;
+        return /* @__PURE__ */ jsx(
+          reactNative.View,
+          {
+            style: {
+              ...isFlex ? { minWidth: 44 } : { width, flexShrink: 1 },
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8
+            },
+            ...isFlex ? { className: "flex-1" } : {},
+            children: /* @__PURE__ */ jsx(
+              reactNative.Text,
+              {
+                className: "text-text-tertiary",
+                style: {
+                  fontSize: 10,
+                  fontWeight: "600",
+                  fontFamily: "Inter, sans-serif",
+                  textTransform: "uppercase",
+                  letterSpacing: 0.8
+                },
+                children: label
+              }
+            )
+          },
+          label
+        );
+      })
     }
-  });
+  );
 }
-function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const hoverOffset = Math.max(1, Math.round(offset / 2));
-  const hoverBlur = Math.max(1, Math.round(blur / 2));
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
-      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      shadowOpacity: 0,
-      elevation: 0
+var METRIC_FONT = "Inter, sans-serif";
+function MetricCell({ children, color, fontSize = 11 }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.Text,
+    {
+      style: {
+        fontFamily: METRIC_FONT,
+        fontSize,
+        color,
+        fontWeight: "600",
+        letterSpacing: 1
+      },
+      children
     }
-  });
+  );
 }
-({
-  // Charcoal surface shadows (for dark toolbars, cards)
-  charcoal: {
-    raised: {
-      subtle: createRaisedShadow("charcoal", "subtle"),
-      medium: createRaisedShadow("charcoal", "medium"),
-      strong: createRaisedShadow("charcoal", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("charcoal", "subtle"),
-      medium: createRaisedHoverShadow("charcoal", "medium"),
-      strong: createRaisedHoverShadow("charcoal", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("charcoal", "subtle"),
-      medium: createPressedShadow("charcoal", "medium"),
-      strong: createPressedShadow("charcoal", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("charcoal", "subtle"),
-      medium: createPressedHoverShadow("charcoal", "medium"),
-      strong: createPressedHoverShadow("charcoal", "strong")
-    },
-    flat: createFlatShadow()
-  },
-  // Neutral dark surface shadows
-  neutralDark: {
-    raised: {
-      subtle: createRaisedShadow("neutralDark", "subtle"),
-      medium: createRaisedShadow("neutralDark", "medium"),
-      strong: createRaisedShadow("neutralDark", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
-      medium: createRaisedHoverShadow("neutralDark", "medium"),
-      strong: createRaisedHoverShadow("neutralDark", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("neutralDark", "subtle"),
-      medium: createPressedShadow("neutralDark", "medium"),
-      strong: createPressedShadow("neutralDark", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("neutralDark", "subtle"),
-      medium: createPressedHoverShadow("neutralDark", "medium"),
-      strong: createPressedHoverShadow("neutralDark", "strong")
-    },
-    flat: createFlatShadow()
-  },
-  // Neutral light surface shadows
-  neutralLight: {
-    raised: {
-      subtle: createRaisedShadow("neutralLight", "subtle"),
-      medium: createRaisedShadow("neutralLight", "medium"),
-      strong: createRaisedShadow("neutralLight", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
-      medium: createRaisedHoverShadow("neutralLight", "medium"),
-      strong: createRaisedHoverShadow("neutralLight", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("neutralLight", "subtle"),
-      medium: createPressedShadow("neutralLight", "medium"),
-      strong: createPressedShadow("neutralLight", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("neutralLight", "subtle"),
-      medium: createPressedHoverShadow("neutralLight", "medium"),
-      strong: createPressedHoverShadow("neutralLight", "strong")
-    },
-    flat: createFlatShadow()
-  }
-});
 
-// src/utils/colors.ts
-function alpha(color, opacity) {
-  const clampedOpacity = Math.max(0, Math.min(1, opacity));
-  if (color.startsWith("#")) {
-    const hex = color.slice(1);
-    let r, g, b;
-    if (hex.length === 3) {
-      r = parseInt(hex[0] + hex[0], 16);
-      g = parseInt(hex[1] + hex[1], 16);
-      b = parseInt(hex[2] + hex[2], 16);
-    } else if (hex.length === 6) {
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-    } else {
-      return color;
+// src/components/custom/Workout/SetsRepsLoad.tsx
+var t2 = getSemanticColors("dark");
+var TIMES = "\xD7";
+var AT = "@";
+function SetsRepsLoad({
+  sets,
+  reps,
+  load,
+  unit = "lb",
+  fontSize,
+  className,
+  ...props
+}) {
+  const value = t2["text-primary"];
+  const sep = t2["text-tertiary"];
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      className,
+      style: { flexDirection: "row", alignItems: "baseline" },
+      accessibilityLabel: `${sets} sets of ${reps} reps at ${load} ${unit}`,
+      testID: "sets-reps-load",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MetricCell, { color: value, 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}` })
+      ]
     }
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
-  if (rgbaMatch) {
-    const [, r, g, b] = rgbaMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  return color;
+  );
 }
-
-// src/components/custom/Workout/TempoDisplay.tsx
 var t3 = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
@@ -2746,6 +2732,243 @@ function ExerciseHeading({
     )
   ] });
 }
+var PULSE_HALF_MS = 950;
+var PULSE_MIN_OPACITY = 0.45;
+var SEGMENTED_BAR_GAP = 5;
+function usePulse(active) {
+  const [value] = react.useState(() => new reactNative.Animated.Value(0));
+  react.useEffect(() => {
+    if (!active) return;
+    const loop = reactNative.Animated.loop(
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(value, {
+          toValue: 1,
+          duration: PULSE_HALF_MS,
+          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+          useNativeDriver: false
+        }),
+        reactNative.Animated.timing(value, {
+          toValue: 0,
+          duration: PULSE_HALF_MS,
+          easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+          useNativeDriver: false
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, value]);
+  return value;
+}
+function SegmentedBar({
+  segments,
+  height = 8,
+  gap = SEGMENTED_BAR_GAP,
+  radius = 2,
+  marker = null,
+  segmentTestID,
+  style,
+  ...props
+}) {
+  const pulse = usePulse(segments.some((s) => s.pulse));
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: [{ flexDirection: "row", height, gap, position: "relative" }, style], ...props, children: [
+    segments.map((seg, i) => {
+      const fillStyle = {
+        width: `${(seg.fill ?? 1) * 100}%`,
+        height: "100%",
+        backgroundColor: seg.color,
+        opacity: seg.opacity
+      };
+      const testID = segmentTestID?.(seg, i) ?? "segmented-bar-segment";
+      return /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          style: {
+            flex: seg.weight ?? 1,
+            minWidth: 0,
+            height: "100%",
+            marginLeft: seg.leadingGap,
+            borderRadius: radius,
+            overflow: "hidden"
+          },
+          children: seg.pulse ? /* @__PURE__ */ jsx(
+            reactNative.Animated.View,
+            {
+              style: {
+                ...fillStyle,
+                ...seg.pulseColor ? {
+                  backgroundColor: pulse.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: seg.pulseColor
+                  })
+                } : {
+                  opacity: pulse.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [PULSE_MIN_OPACITY, 1]
+                  })
+                }
+              },
+              accessibilityElementsHidden: true,
+              testID
+            }
+          ) : /* @__PURE__ */ jsx(reactNative.View, { style: fillStyle, accessibilityElementsHidden: true, testID })
+        },
+        i
+      );
+    }),
+    marker ? /* @__PURE__ */ jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          left: `${marker.position * 100}%`,
+          top: 0,
+          bottom: 0,
+          width: 2,
+          backgroundColor: marker.color
+        },
+        accessibilityElementsHidden: true,
+        testID: "segmented-bar-marker"
+      }
+    ) : null
+  ] });
+}
+
+// src/components/custom/Workout/SetBar.tsx
+var SET_STRIP_ZONES = {
+  slow: primitiveRamps.red[600],
+  moderate: primitiveRamps.orange[400],
+  fast: primitiveRamps.amber[300],
+  fastest: primitiveRamps.green[300]
+};
+var TODO_COLOR = primitiveColors.charcoal[300];
+var SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900];
+var NOTCH_GAP = 2;
+var CLUSTER_GAP = 3;
+var MYO_UPCOMING_CLUSTERS = 3;
+var MYO_UPCOMING_CLUSTER_LEN = 5;
+var MYO_UPCOMING_FADE = 0.6;
+var PULSE_RANGE = {
+  [SET_STRIP_ZONES.slow]: [primitiveRamps.red[500], primitiveRamps.red[700]],
+  [SET_STRIP_ZONES.moderate]: [primitiveRamps.orange[300], primitiveRamps.orange[500]],
+  [SET_STRIP_ZONES.fast]: [primitiveRamps.amber[200], primitiveRamps.amber[400]],
+  [SET_STRIP_ZONES.fastest]: [primitiveRamps.green[200], primitiveRamps.green[400]]
+};
+function velocityZoneColor(v) {
+  if (v < 0.5) return SET_STRIP_ZONES.slow;
+  if (v < 0.75) return SET_STRIP_ZONES.moderate;
+  if (v < 1) return SET_STRIP_ZONES.fast;
+  return SET_STRIP_ZONES.fastest;
+}
+function chunkedSegments(chunks, gap) {
+  return chunks.flatMap(
+    (vels, ci) => vels.map((v, ri) => ({
+      color: velocityZoneColor(v),
+      ...ci > 0 && ri === 0 ? { leadingGap: gap } : {}
+    }))
+  );
+}
+function rangeSegments(floor, max, doneVels) {
+  return Array.from({ length: max }, (_, i) => {
+    if (i < doneVels.length) return { color: velocityZoneColor(doneVels[i]) };
+    return { color: i < floor ? TODO_COLOR : SET_STRIP_VARIABLE_COLOR };
+  });
+}
+function myoUpcomingSegments(activationLen, clusterCount) {
+  const activation = Array.from({ length: activationLen }, () => ({ color: TODO_COLOR }));
+  const trail = Array.from(
+    { length: clusterCount },
+    (_, ci) => Array.from({ length: MYO_UPCOMING_CLUSTER_LEN }, (_2, ri) => ({
+      color: SET_STRIP_VARIABLE_COLOR,
+      opacity: MYO_UPCOMING_FADE ** ci,
+      ...ri === 0 ? { leadingGap: CLUSTER_GAP } : {}
+    }))
+  ).flat();
+  return [...activation, ...trail];
+}
+function setSegments(set) {
+  if (set.status === "todo") {
+    return [{ color: TODO_COLOR }];
+  }
+  if (set.status === "done") {
+    return set.velocities.map((v) => ({ color: velocityZoneColor(v) }));
+  }
+  if (set.status === "range") {
+    return rangeSegments(set.floor, set.max, set.doneVels);
+  }
+  if (set.status === "drop") {
+    return chunkedSegments(set.subloads, NOTCH_GAP);
+  }
+  if (set.status === "myo") {
+    return chunkedSegments([set.activation, ...set.clusters], CLUSTER_GAP);
+  }
+  if (set.status === "myo-upcoming") {
+    return myoUpcomingSegments(set.activationLen, set.clusterCount ?? MYO_UPCOMING_CLUSTERS);
+  }
+  const performed = set.velocities.map((v) => {
+    const color = velocityZoneColor(v);
+    return { color, pulse: true, pulseColor: PULSE_RANGE[color] };
+  });
+  const remaining = Math.max(0, set.planned - set.velocities.length);
+  return [...performed, ...Array.from({ length: remaining }, () => ({ color: TODO_COLOR }))];
+}
+function setBarSegmentTestID(seg) {
+  if (seg.pulse) return "set-strip-pulse";
+  if (seg.color === SET_STRIP_VARIABLE_COLOR) return "set-strip-variable";
+  return seg.color === TODO_COLOR ? "set-strip-empty" : "set-strip-fill";
+}
+function SetBar({ set, height = 8 }) {
+  return /* @__PURE__ */ jsx(
+    SegmentedBar,
+    {
+      segments: setSegments(set),
+      height,
+      gap: 0,
+      radius: 0,
+      segmentTestID: setBarSegmentTestID,
+      style: { flex: 1, minWidth: 0, borderRadius: 2, overflow: "hidden" },
+      testID: "set-strip-set"
+    }
+  );
+}
+
+// src/components/custom/Workout/SetStrip.tsx
+var SET_STRIP_GAP = 5;
+function setCategory(set) {
+  switch (set.status) {
+    case "done":
+    case "drop":
+    case "myo":
+      return "done";
+    case "active":
+      return "active";
+    case "range":
+      return set.doneVels.length > 0 ? "active" : "upcoming";
+    case "todo":
+    case "myo-upcoming":
+      return "upcoming";
+  }
+}
+function describeSets(sets) {
+  const done = sets.filter((s) => setCategory(s) === "done").length;
+  const active = sets.filter((s) => setCategory(s) === "active").length;
+  const upcoming = sets.filter((s) => setCategory(s) === "upcoming").length;
+  return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`;
+}
+function SetStrip({ sets, height = 8, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: { flexDirection: "row", width: "100%", height, gap: SET_STRIP_GAP },
+      accessibilityRole: "image",
+      accessibilityLabel: describeSets(sets),
+      testID: "set-strip",
+      ...props,
+      children: sets.map((set, i) => /* @__PURE__ */ jsx(SetBar, { set, height }, i))
+    }
+  );
+}
 
 // src/components/custom/Workout/ExerciseCardHeading.tsx
 function ExerciseCardHeading({
@@ -2888,7 +3111,9 @@ function CollapsedCard({
                 {
                   velocities,
                   zones: velocityZones,
-                  variant: "mini",
+                  variant: "compact",
+                  height: 8,
+                  hideBaseline: true,
                   testID: `exercise-card-velocity-strip-${i}`
                 },
                 i
@@ -6057,7 +6282,16 @@ function VbtBreakdown({
               children: set.label
             }
           ),
-          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", style: { height: 8, justifyContent: "center" }, children: /* @__PURE__ */ jsx(VelocityStrip, { velocities: set.velocities, zones, variant: "mini" }) }),
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", style: { height: 8, justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+            VelocityStrip,
+            {
+              velocities: set.velocities,
+              zones,
+              variant: "compact",
+              height: 8,
+              hideBaseline: true
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {