@titan-design/react-ui 0.5.0 → 0.7.0

package/dist/pages.js

@@ -8,22 +8,160 @@ var tailwindMerge = require('tailwind-merge');
 
 // src/components/custom/Workout/ActiveWorkoutPage.tsx
 
+// src/theme/tokens/primitives.ts
+var primitiveColors = {
+  // Blue scale
+  blue: {
+    400: "#60A5FA",
+    600: "#5048E5",
+    700: "#3832A0"},
+  // Red scale
+  red: {
+    500: "#EF4444",
+    600: "#D14343"},
+  // Vivid red scale
+  redVivid: {
+    400: "#FF6070",
+    500: "#FF4757",
+    700: "#C42539"},
+  // Neutral/Gray scale
+  neutral: {
+    50: "#FAFAFA",
+    100: "#F3F4F6",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    900: "#111827"},
+  // Charcoal scale (dark backgrounds)
+  charcoal: {
+    200: "#3C3C3C",
+    300: "#2C2C2C",
+    400: "#1F1F1F",
+    500: "#1C1C1C",
+    600: "#191919",
+    700: "#161616",
+    900: "#101010"
+  },
+  // Pure colors
+  white: "#FFFFFF"};
+var primitiveRamps = {
+  red: {
+    50: "#FFF4F4",
+    500: "#E05254",
+    600: "#D14343",
+    // pin
+    700: "#A4221C",
+    800: "#7E1002"},
+  orange: {
+    200: "#FFC7A2",
+    300: "#FFA063",
+    400: "#FF7900",
+    // pin
+    500: "#DA5F00",
+    600: "#B94A00"},
+  amber: {
+    50: "#FFF7DD",
+    200: "#FFD352",
+    300: "#F9B415",
+    // pin
+    400: "#E08C00",
+    500: "#C27400"},
+  green: {
+    50: "#E3FFEE",
+    200: "#58F69E",
+    300: "#2ED573",
+    // pin
+    400: "#21C05D",
+    500: "#22A444",
+    600: "#298732"},
+  cyan: {
+    // pin
+    400: "#01B5D1",
+    500: "#2697B7",
+    600: "#307B9B",
+    700: "#2A617F",
+    800: "#22465F",
+    900: "#0B3149"},
+  blue: {
+    50: "#EFF8FF",
+    300: "#78C2FF",
+    500: "#2196F3",
+    // pin
+    600: "#1072CB"},
+  magenta: {
+    600: "#BA2996"}
+};
+var sequentialEffort = [
+  primitiveRamps.green[300],
+  primitiveRamps.amber[200],
+  primitiveRamps.amber[300],
+  primitiveRamps.orange[400],
+  primitiveRamps.red[600],
+  primitiveRamps.red[700]
+];
+var discreteRainbow = [
+  "#E8ECFB",
+  "#D9CCE3",
+  "#D1BBD7",
+  "#CAACCB",
+  "#BA8DB4",
+  "#AE76A3",
+  "#AA6F9E",
+  "#994F88",
+  "#882E72",
+  "#1965B0",
+  "#437DBF",
+  "#5289C7",
+  "#6195CF",
+  "#7BAFDE",
+  "#4EB265",
+  "#90C987",
+  "#CAE0AB",
+  "#F7F056",
+  "#F7CB45",
+  "#F6C141",
+  "#F4A736",
+  "#F1932D",
+  "#EE8026",
+  "#E8601C",
+  "#E65518",
+  "#DC050C",
+  "#A5170E",
+  "#72190E",
+  "#42150A"
+];
+
 // src/theme/workout-tokens.ts
 var WORKOUT_TOKENS = {
   // Canonical 4-band performance scale — the single source for BOTH the
   // VelocityStrip zone bars and the SetRow RPE color (TD-03.43). The direction
   // is intentionally inverted between the two consumers: for velocity, green =
-  // fastest/best; for RPE, green = easiest. Each component maps its own
-  // thresholds onto these four colors. Kept as vivid data-viz values (distinct
-  // from the muted status tokens) and theme-independent, so — like the heatmap
-  // scale below — they are consumed inline as a JS import rather than CSS vars.
-  // A JS import also resolves on native RN, unlike var(--…) strings.
+  // fastest/best; for RPE, green = easiest. This is the [0,2,3,4] subsample of
+  // the canonical `sequentialEffort` primitive: an EVEN hue walk across the ramp
+  // (green → gold → orange → red). The earlier [0,1,2,4] spent two of its four
+  // bands on adjacent yellows (amber-200 + amber-300) and skipped orange, reading
+  // yellow-heavy with an abrupt jump to red; sampling amber-300 + orange-400
+  // instead gives four cleanly separable bands that hold at 3px strip scale.
+  // Consumed inline (RN).
   scale: {
-    green: "#2ed573",
-    yellow: "#ffd43b",
-    orange: "#ffa502",
-    red: "#ff4757"
+    green: sequentialEffort[0],
+    // green-300
+    yellow: sequentialEffort[2],
+    // amber-300 (gold)
+    orange: sequentialEffort[3],
+    // orange-400 (true orange)
+    red: sequentialEffort[4]
+    // red-600
   },
+  // Surface and border colors were removed here: those flip with the theme, so
+  // components use the CSS custom properties (var(--color-surface-*/border-*))
+  // directly. Only theme-independent data-viz values remain below.
+  // Intensity bar specific — over-target tiers deepen along the red ramp.
+  intensity: {
+    // matches status-error
+    over2: primitiveRamps.red[700],
+    over3: primitiveRamps.red[800]},
   // Placeholder strip
   placeholder: {
     fill: "#3A3A3A"
@@ -33,12 +171,6 @@ var WORKOUT_TOKENS = {
 function roundRpe(rpe) {
   return Math.round(rpe * 2) / 2;
 }
-function rpeColor(rpe) {
-  if (rpe >= 9.5) return WORKOUT_TOKENS.scale.red;
-  if (rpe >= 8.5) return WORKOUT_TOKENS.scale.orange;
-  if (rpe >= 7) return WORKOUT_TOKENS.scale.yellow;
-  return WORKOUT_TOKENS.scale.green;
-}
 function roundWeight(weight) {
   return Math.round(weight);
 }
@@ -66,14 +198,258 @@ function wrapJsx(fn) {
 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 zoneIdToScaleToken = {
-  speed: "green",
-  power: "yellow",
-  strengthSpeed: "orange",
-  maximalStrength: "red",
-  grinding: "red"
+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";
@@ -112,14 +488,132 @@ function classifyBand(velocity, bands) {
   return bands[bands.length - 1];
 }
 function bandColor(band) {
-  const token = zoneIdToScaleToken[band.id];
-  return token ? VEL_COLORS[token] : VEL_COLORS.green;
+  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;
+function scaleDenominator(scale, maxVelocity) {
+  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * 1.15;
+}
+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;
@@ -141,31 +635,48 @@ 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 VelocityStrip({
   velocities,
+  set,
   zones,
   liveRepIndex,
-  expanded = false,
+  expanded = true,
   onToggle,
   onRepPress,
-  variant = "full",
+  variant = "expanded",
+  height = EXPANDED_HEIGHT,
+  scale = "peak",
+  showNumbers = true,
   showInfo = true,
   className,
   ...props
 }) {
-  const maxVelocity = Math.max(...velocities, 0);
-  const meanVelocity = calculateMeanVelocity(velocities);
-  const loss = calculateVelocityLoss(velocities);
+  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 prefersReducedMotion = usePrefersReducedMotion();
-  const [heightAnim] = react.useState(() => new reactNative.Animated.Value(expanded ? 60 : 3));
+  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 [liveScale] = react.useState(() => new reactNative.Animated.Value(1));
-  const liveVelocity = liveRepIndex != null ? velocities[liveRepIndex] : void 0;
+  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
   react.useEffect(() => {
-    if (variant === "mini" || liveRepIndex == null || liveVelocity == null) return;
+    if (variant !== "expanded" || !framed || liveRepIndex == null || liveVelocity == null) return;
     if (prefersReducedMotion) {
       liveScale.setValue(1);
       return;
@@ -195,12 +706,12 @@ function VelocityStrip({
         useNativeDriver: true
       }).start();
     }
-  }, [variant, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
+  }, [variant, framed, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
   react.useEffect(() => {
-    if (variant === "mini") return;
+    if (variant !== "expanded" || !framed) return;
     reactNative.Animated.parallel([
       reactNative.Animated.timing(heightAnim, {
-        toValue: expanded ? 60 : 3,
+        toValue: expanded ? height : 3,
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
         useNativeDriver: false
@@ -218,39 +729,118 @@ function VelocityStrip({
         useNativeDriver: false
       })
     ]).start();
-  }, [expanded, variant, heightAnim, labelOpacity, infoOpacity]);
+  }, [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 === "mini") {
     const { style: externalStyle, ...restProps } = props;
     return /* @__PURE__ */ jsx(
       reactNative.View,
       {
         className,
-        style: [{ flexDirection: "row", height: 3, gap: 2, borderRadius: 2, overflow: "hidden" }, externalStyle],
+        style: [
+          { flexDirection: "row", height: 3, gap: REP_GAP, borderRadius: 2, overflow: "hidden" },
+          externalStyle
+        ],
         accessibilityRole: "image",
-        accessibilityLabel: `Velocity strip, ${velocities.length} reps`,
+        accessibilityLabel: miniLabel,
         testID: "velocity-strip-mini",
         ...restProps,
-        children: velocities.map((v, i) => /* @__PURE__ */ jsx(
+        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             style: {
               flex: 1,
-              backgroundColor: barColorFor(v),
+              backgroundColor: slotColor(slot),
               borderRadius: 1,
               minWidth: 4,
-              height: "100%"
+              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: `velocity-bar-${i}`
+            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
           },
           i
         ))
       }
     );
   }
-  const stripLabel = `Velocity chart for set, ${velocities.length} reps, tap to ${expanded ? "collapse" : "expand"}`;
+  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,
     {
@@ -263,7 +853,9 @@ function VelocityStrip({
           borderRadius: expanded ? 6 : 2,
           paddingTop: expanded ? 16 : 0,
           paddingBottom: expanded ? 24 : 0,
-          paddingHorizontal: expanded ? 6 : 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"
         }
@@ -273,46 +865,65 @@ function VelocityStrip({
       testID: "velocity-strip",
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { flexDirection: "row", flex: 1, gap: 2, alignItems: "flex-end" },
-            children: velocities.map((v, i) => {
-              const barBackground = barColorFor(v);
-              const barHeightPct = maxVelocity > 0 ? Math.round(v / (maxVelocity * 1.15) * 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 && /* @__PURE__ */ jsx(reactNative.Animated.View, { style: { opacity: labelOpacity, alignItems: "center", position: "absolute", top: -13, left: 0, right: 0 }, accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx(
+        /* @__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",
@@ -320,30 +931,30 @@ function VelocityStrip({
                         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;
-            })
+                    )
+                  }
+                ),
+                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,
           {
@@ -489,12 +1100,14 @@ function PlaceholderStrip({
   return /* @__PURE__ */ jsx(SingleStrip, { ...props });
 }
 
-// src/components/custom/Workout/icons.tsx
-function DumbbellIcon({
+// src/components/icons/SvgIcon.tsx
+function SvgIcon({
   size = 24,
   color = "currentColor",
+  strokeWidth = 2,
   fill = "none",
-  strokeWidth = 2
+  title,
+  children
 }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -507,36 +1120,59 @@ function DumbbellIcon({
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
+      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M14.4 14.4 9.6 9.6" }),
-        /* @__PURE__ */ jsx("path", { d: "M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z" }),
-        /* @__PURE__ */ jsx("path", { d: "m21.5 21.5-1.4-1.4" }),
-        /* @__PURE__ */ jsx("path", { d: "M3.9 3.9 2.5 2.5" }),
-        /* @__PURE__ */ jsx("path", { d: "M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z" })
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        children
       ]
     }
   );
 }
-function StarIcon({
-  size = 24,
-  color = "currentColor",
-  fill = "none",
-  strokeWidth = 2
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      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" })
-    }
-  );
+
+// 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" })
+  ] });
 }
 var baseBadgeSizeConfig = {
   sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
@@ -616,105 +1252,286 @@ function BaseBadge({
   return badge;
 }
 
-// src/components/custom/Workout/WeightBadge.tsx
-function WeightBadge({
-  value,
-  unit = "lbs",
-  reps,
-  delta,
-  isPr,
-  showIcon = true,
-  size = "md",
-  onPress,
-  className,
-  ...props
-}) {
-  const config = baseBadgeSizeConfig[size];
-  const textColor = isPr ? "#FF7900" : "#9CA3AF";
-  const iconColor = textColor;
-  const repMaxClause = reps != null ? `${reps} rep max` : "Estimated one rep max";
-  const deltaLabel = delta != null ? `, ${delta >= 0 ? "+" : ""}${delta}% change` : "";
-  const fullLabel = `${repMaxClause}: ${value} ${unit}${deltaLabel}`;
-  return /* @__PURE__ */ jsxs(
-    BaseBadge,
-    {
-      variant: isPr ? "pr" : "plain",
-      size,
-      onPress,
-      className,
-      icon: showIcon ? /* @__PURE__ */ jsx(DumbbellIcon, { size: config.iconSize, color: iconColor, strokeWidth: 2 }) : void 0,
-      accessibilityLabel: fullLabel,
-      testID: "weight-badge",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(
-          reactNative.Text,
-          {
-            style: {
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "600",
-              fontSize: config.fontSize,
-              color: textColor
-            },
-            children: [
-              isPr ? "\u2733 " : "",
-              value,
-              " ",
-              unit
-            ]
-          }
-        ),
-        reps != null && /* @__PURE__ */ jsxs(
-          reactNative.Text,
-          {
-            style: {
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: "600",
-              fontSize: config.fontSize,
-              marginLeft: 2,
-              color: textColor,
-              opacity: 0.7
-            },
-            testID: "weight-badge-repmax",
-            children: [
-              reps,
-              "RM"
-            ]
-          }
-        ),
-        delta != null && /* @__PURE__ */ jsxs(
-          reactNative.Text,
-          {
-            style: {
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontSize: config.fontSize,
-              marginLeft: 4,
-              color: delta >= 0 ? "#4caf50" : "#ef5350"
-            },
-            testID: "weight-badge-delta",
-            children: [
-              delta >= 0 ? "+" : "",
-              delta,
-              "%"
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-var typeLabels = {
-  e1rm: "PR e1RM",
-  weight: "PR Weight",
-  reps: "PR Reps",
-  volume: "PR Volume",
-  velocity: "PR Velocity"
-};
-function PrBadge({
-  type = "e1rm",
-  label: labelProp,
-  compact = false,
-  animate = true,
+// src/theme/tokens/semantic.ts
+var semanticColorsLight = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveRamps.orange[500],
+  "brand-primary-active": primitiveRamps.orange[600],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-hover": primitiveRamps.cyan[700],
+  "brand-secondary-active": primitiveRamps.cyan[800],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": primitiveRamps.green[50],
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": primitiveRamps.red[50],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  // vivid alert red
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": primitiveRamps.amber[50],
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": primitiveRamps.blue[50],
+  // Text on status backgrounds (on-status-*)
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  // Green - positive outcome
+  "result-improve-light": "rgba(76, 175, 80, 0.12)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  // Red - negative outcome
+  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  // Gray - no clear result
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
+  "result-neutral": primitiveColors.neutral[500],
+  // Neutral baseline
+  // Text on result backgrounds (on-result-*)
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (data-*)
+  // First 10 colors from discrete rainbow optimized for charts
+  "data-1": discreteRainbow[9],
+  // Blue
+  "data-2": discreteRainbow[14],
+  // Green
+  "data-3": discreteRainbow[17],
+  // Yellow
+  "data-4": discreteRainbow[25],
+  // Red
+  "data-5": discreteRainbow[8],
+  // Purple
+  "data-6": discreteRainbow[20],
+  // Orange
+  "data-7": discreteRainbow[13],
+  // Light Blue
+  "data-8": discreteRainbow[15],
+  // Light Green
+  "data-9": discreteRainbow[3],
+  // Lavender
+  "data-10": discreteRainbow[22],
+  // Dark Orange
+  // Text colors (text-*)
+  "text-primary": "#121828",
+  "text-secondary": "#65748B",
+  "text-tertiary": primitiveColors.neutral[400],
+  "text-disabled": "rgba(55, 65, 81, 0.48)",
+  "text-inverse": primitiveColors.white,
+  "text-link": primitiveColors.blue[600],
+  "text-link-hover": primitiveColors.blue[700],
+  // Surface colors (surface-*) - for elevated containers
+  "surface-base": primitiveColors.white,
+  "surface-elevated": primitiveColors.neutral[50],
+  // slightly off-white for elevated cards
+  "surface-raised": primitiveColors.neutral[100],
+  // light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": primitiveColors.neutral[50],
+  // Input field background (filled variant)
+  // Background colors (background-*)
+  "background-base": "#EBEBEB",
+  "background-default": primitiveColors.white,
+  "background-subtle": primitiveColors.neutral[50],
+  // Border colors (border-*)
+  "border-default": "#E8E9EB",
+  "border-subtle": primitiveColors.neutral[100],
+  "border-strong": primitiveColors.neutral[300],
+  "border-prominent": primitiveColors.neutral[400],
+  // high-visibility divider
+  "border-focus": primitiveColors.blue[600],
+  "border-input": primitiveColors.neutral[300],
+  // Input field border
+  "border-input-hover": primitiveColors.neutral[400],
+  // Input field border on hover
+  "border-input-focus": primitiveColors.blue[600],
+  // Input field border on focus
+  "border-input-error": primitiveColors.red[600],
+  // Input field border on error
+  // Interactive states (interactive-*)
+  "interactive-hover": "rgba(55, 65, 81, 0.04)",
+  "interactive-focus": "rgba(55, 65, 81, 0.12)",
+  "interactive-active": "rgba(55, 65, 81, 0.16)",
+  "interactive-selected": "rgba(55, 65, 81, 0.08)",
+  "interactive-disabled": "rgba(55, 65, 81, 0.12)",
+  "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
+  // Divider
+  "divider": "#E8E9EB",
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[500],
+  "avatar-text": primitiveColors.white
+};
+var semanticColorsDark = {
+  // Brand colors stay the same in dark mode
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveRamps.orange[300],
+  "brand-primary-active": primitiveRamps.orange[200],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-hover": primitiveRamps.cyan[500],
+  "brand-secondary-active": primitiveRamps.cyan[400],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  "status-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  // Text on status backgrounds
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  "result-improve-light": "rgba(76, 175, 80, 0.16)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  "result-degrade-light": "rgba(239, 83, 80, 0.16)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
+  "result-neutral": primitiveColors.neutral[400],
+  // Text on result backgrounds
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (same in dark mode for consistency)
+  "data-1": discreteRainbow[9],
+  "data-2": discreteRainbow[14],
+  "data-3": discreteRainbow[17],
+  "data-4": discreteRainbow[25],
+  "data-5": discreteRainbow[8],
+  "data-6": discreteRainbow[20],
+  "data-7": discreteRainbow[13],
+  "data-8": discreteRainbow[15],
+  "data-9": discreteRainbow[3],
+  "data-10": discreteRainbow[22],
+  // Text colors - inverted for dark mode
+  "text-primary": primitiveColors.neutral[100],
+  "text-secondary": primitiveColors.neutral[400],
+  "text-tertiary": primitiveColors.neutral[500],
+  "text-disabled": "rgba(255, 255, 255, 0.38)",
+  "text-inverse": primitiveColors.neutral[900],
+  "text-link": "#828DF8",
+  "text-link-hover": primitiveColors.blue[400],
+  // Surface colors - dark backgrounds
+  "surface-base": primitiveColors.charcoal[700],
+  // main surface
+  "surface-elevated": primitiveColors.charcoal[600],
+  // elevated surface
+  "surface-raised": primitiveColors.charcoal[500],
+  // raised surface
+  "surface-overlay": primitiveColors.charcoal[600],
+  // overlay surface
+  "surface-input": primitiveColors.charcoal[600],
+  // input surface
+  // Background colors
+  "background-base": primitiveColors.charcoal[900],
+  // darkest charcoal
+  "background-default": primitiveColors.charcoal[700],
+  // main background
+  "background-subtle": primitiveColors.charcoal[500],
+  // subtle background
+  // Border colors
+  "border-default": primitiveColors.charcoal[400],
+  // default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // subtle border
+  "border-strong": primitiveColors.charcoal[300],
+  // strong border
+  "border-prominent": primitiveColors.charcoal[200],
+  // high-visibility divider
+  "border-focus": "#828DF8",
+  "border-input": primitiveColors.neutral[600],
+  "border-input-hover": primitiveColors.neutral[500],
+  "border-input-focus": "#828DF8",
+  "border-input-error": primitiveColors.red[500],
+  // Interactive states
+  "interactive-hover": "rgba(255, 255, 255, 0.04)",
+  "interactive-focus": "rgba(255, 255, 255, 0.12)",
+  "interactive-active": "rgba(255, 255, 255, 0.16)",
+  "interactive-selected": "rgba(255, 255, 255, 0.08)",
+  "interactive-disabled": "rgba(255, 255, 255, 0.12)",
+  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
+  // Divider
+  "divider": primitiveColors.charcoal[400],
+  // divider color
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[600],
+  "avatar-text": primitiveColors.white
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+}
+
+// src/components/custom/Workout/PrBadge.tsx
+var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
+var typeLabels = {
+  e1rm: "PR e1RM",
+  weight: "PR Weight",
+  reps: "PR Reps",
+  volume: "PR Volume",
+  velocity: "PR Velocity"
+};
+function PrBadge({
+  type = "e1rm",
+  label: labelProp,
+  compact = false,
+  animate = true,
   className,
   ...props
 }) {
@@ -746,7 +1563,7 @@ function PrBadge({
       accessibilityLabel: `Personal record: ${resolvedLabel}`,
       testID: "pr-badge-star",
       ...props,
-      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: "#FF7900", fill: "#FF7900", strokeWidth: 2 })
+      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: BRAND_PRIMARY, fill: BRAND_PRIMARY, strokeWidth: 2 })
     }
   ) : /* @__PURE__ */ jsx(
     BaseBadge,
@@ -760,7 +1577,7 @@ function PrBadge({
         {
           style: {
             fontSize: 12,
-            color: "#FF7900",
+            color: BRAND_PRIMARY,
             fontWeight: "700",
             fontFamily: "Inter, sans-serif"
           },
@@ -785,6 +1602,204 @@ function PrBadge({
   }
   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 t = getSemanticColors("dark");
+var TIMES = "\xD7";
+var AT = "@";
+function SetsRepsLoad({
+  sets,
+  reps,
+  load,
+  unit = "lb",
+  className,
+  ...props
+}) {
+  const value = t["text-primary"];
+  const sep = t["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, children: sets }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${TIMES} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, children: reps }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${AT} ` }),
+        /* @__PURE__ */ jsx(MetricCell, { color: value, children: load }),
+        /* @__PURE__ */ jsx(MetricCell, { color: sep, children: ` ${unit}` })
+      ]
+    }
+  );
+}
 function hexToRgb(hex) {
   const cleaned = hex.replace("#", "");
   let r, g, b;
@@ -1094,452 +2109,54 @@ function alpha(color, opacity) {
   }
   return color;
 }
+var t2 = getSemanticColors("dark");
+var TEMPO_PACING = {
+  behindThresholdPct: 0.15,
+  minPhaseDurationMs: 500
+};
+function getTempoPacingState(elapsedMs, targetMs) {
+  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return "none";
+  const ratio = elapsedMs / targetMs;
+  if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return "behind";
+  return "on-pace";
+}
+function getTempoFillPct(elapsedMs, targetMs) {
+  if (!targetMs) return 100;
+  return Math.min(100, elapsedMs / targetMs * 100);
+}
+({
+  concentric: { color: t2["status-success"]},
+  hold: { color: t2["brand-primary"]},
+  eccentric: { color: t2["status-warning"]}
+});
 
-// src/theme/tokens/primitives.ts
-var primitiveColors = {
-  // Blue scale (primary brand)
-  blue: {
-    400: "#60A5FA",
-    600: "#5048E5",
-    // Primary main
-    700: "#3832A0"},
-  // Teal scale (success)
-  teal: {
-    50: "#F0FDFA",
-    400: "#43C6B7",
-    // Success light
-    500: "#14B8A6",
-    700: "#0E8074"},
-  // Red scale (error)
-  red: {
-    50: "#FEF2F2",
-    400: "#DA6868",
-    // Error light
-    500: "#EF4444",
-    600: "#D14343",
-    // Error main
-    700: "#922E2E"},
-  // Amber scale (warning)
-  amber: {
-    50: "#FFFBEB",
-    400: "#FFBF4C",
-    // Warning light
-    500: "#FFB020",
-    // Warning main
-    600: "#B27B16"},
-  // Sky/Blue scale (info)
-  sky: {
-    50: "#F0F9FF",
-    400: "#64B6F7",
-    // Info light
-    500: "#2196F3",
-    700: "#0B79D0"},
-  // Neutral/Gray scale
-  neutral: {
-    50: "#FAFAFA",
-    100: "#F3F4F6",
-    300: "#D1D5DB",
-    400: "#9CA3AF",
-    500: "#6B7280",
-    600: "#4B5563",
-    900: "#111827"},
-  // Orange scale (accent/brand color)
-  accent: {
-    200: "#FF9630",
-    300: "#FF8500",
-    400: "#FF7900",
-    500: "#F56C00",
-    600: "#E06D10",
-    700: "#D0620C"},
-  // Charcoal scale (dark backgrounds)
-  charcoal: {
-    300: "#2C2C2C",
-    400: "#1F1F1F",
-    500: "#1C1C1C",
-    600: "#191919",
-    700: "#161616",
-    900: "#101010"
-  },
-  // Steel scale (cool accent)
-  steel: {
-    300: "#678498",
-    400: "#557488",
-    500: "#406D87",
-    600: "#39617A",
-    700: "#32556D"},
-  // Pure colors
-  white: "#FFFFFF"};
-var discreteRainbow = [
-  "#E8ECFB",
-  "#D9CCE3",
-  "#D1BBD7",
-  "#CAACCB",
-  "#BA8DB4",
-  "#AE76A3",
-  "#AA6F9E",
-  "#994F88",
-  "#882E72",
-  "#1965B0",
-  "#437DBF",
-  "#5289C7",
-  "#6195CF",
-  "#7BAFDE",
-  "#4EB265",
-  "#90C987",
-  "#CAE0AB",
-  "#F7F056",
-  "#F7CB45",
-  "#F6C141",
-  "#F4A736",
-  "#F1932D",
-  "#EE8026",
-  "#E8601C",
-  "#E65518",
-  "#DC050C",
-  "#A5170E",
-  "#72190E",
-  "#42150A"
-];
-
-// src/theme/tokens/semantic.ts
-var semanticColorsLight = {
-  // Brand colors (brand-*)
-  "brand-primary": primitiveColors.accent[400],
-  // #FF7900
-  "brand-primary-light": primitiveColors.accent[200],
-  // #FF9630
-  "brand-primary-dark": primitiveColors.accent[700],
-  // #D0620C
-  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
-  "brand-primary-hover": primitiveColors.accent[500],
-  "brand-primary-active": primitiveColors.accent[600],
-  "brand-secondary": primitiveColors.steel[500],
-  // #406D87
-  "brand-secondary-light": primitiveColors.steel[300],
-  // #678498
-  "brand-secondary-dark": primitiveColors.steel[700],
-  // #32556D
-  "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
-  "brand-secondary-hover": primitiveColors.steel[600],
-  "brand-secondary-active": primitiveColors.steel[700],
-  // Text on brand backgrounds (on-*)
-  "on-brand-primary": primitiveColors.white,
-  "on-brand-secondary": primitiveColors.white,
-  // Status colors (status-*)
-  "status-success": primitiveColors.teal[500],
-  // #14B8A6
-  "status-success-light": primitiveColors.teal[400],
-  // #43C6B7
-  "status-success-dark": primitiveColors.teal[700],
-  // #0E8074
-  "status-success-subtle": primitiveColors.teal[50],
-  "status-error": primitiveColors.red[600],
-  // #D14343
-  "status-error-light": primitiveColors.red[400],
-  // #DA6868
-  "status-error-dark": primitiveColors.red[700],
-  // #922E2E
-  "status-error-subtle": primitiveColors.red[50],
-  "status-warning": primitiveColors.amber[500],
-  // #FFB020
-  "status-warning-light": primitiveColors.amber[400],
-  // #FFBF4C
-  "status-warning-dark": primitiveColors.amber[600],
-  // #B27B16
-  "status-warning-subtle": primitiveColors.amber[50],
-  "status-info": primitiveColors.sky[500],
-  // #2196F3
-  "status-info-light": primitiveColors.sky[400],
-  // #64B6F7
-  "status-info-dark": primitiveColors.sky[700],
-  // #0B79D0
-  "status-info-subtle": primitiveColors.sky[50],
-  // Text on status backgrounds (on-status-*)
-  "on-status-success": primitiveColors.white,
-  "on-status-error": primitiveColors.white,
-  "on-status-warning": primitiveColors.white,
-  "on-status-info": primitiveColors.white,
-  // Result/outcome indicators (result-*)
-  "result-improve": "#4caf50",
-  // Green - positive outcome
-  "result-improve-light": "rgba(76, 175, 80, 0.12)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
-  // Red - negative outcome
-  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
-  "result-degrade-dark": "#b30000",
-  "result-inconclusive": "#9E9A97",
-  // Gray - no clear result
-  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
-  "result-neutral": primitiveColors.neutral[500],
-  // Neutral baseline
-  // Text on result backgrounds (on-result-*)
-  "on-result-improve": primitiveColors.white,
-  "on-result-degrade": primitiveColors.white,
-  "on-result-inconclusive": primitiveColors.white,
-  // Data visualization colors (data-*)
-  // First 10 colors from discrete rainbow optimized for charts
-  "data-1": discreteRainbow[9],
-  // #1965B0 - Blue
-  "data-2": discreteRainbow[14],
-  // #4EB265 - Green
-  "data-3": discreteRainbow[17],
-  // #F7F056 - Yellow
-  "data-4": discreteRainbow[25],
-  // #DC050C - Red
-  "data-5": discreteRainbow[8],
-  // #882E72 - Purple
-  "data-6": discreteRainbow[20],
-  // #F4A736 - Orange
-  "data-7": discreteRainbow[13],
-  // #7BAFDE - Light Blue
-  "data-8": discreteRainbow[15],
-  // #90C987 - Light Green
-  "data-9": discreteRainbow[3],
-  // #CAACCB - Lavender
-  "data-10": discreteRainbow[22],
-  // #EE8026 - Dark Orange
-  // Text colors (text-*)
-  "text-primary": "#121828",
-  "text-secondary": "#65748B",
-  "text-tertiary": primitiveColors.neutral[400],
-  "text-disabled": "rgba(55, 65, 81, 0.48)",
-  "text-inverse": primitiveColors.white,
-  "text-link": primitiveColors.blue[600],
-  "text-link-hover": primitiveColors.blue[700],
-  // Surface colors (surface-*) - for elevated containers
-  "surface-base": primitiveColors.white,
-  "surface-elevated": primitiveColors.neutral[50],
-  // #FAFAFA - slightly off-white for elevated cards
-  "surface-raised": primitiveColors.neutral[100],
-  // #F3F4F6 - light gray for raised cards
-  "surface-overlay": primitiveColors.white,
-  "surface-input": primitiveColors.neutral[50],
-  // Input field background (filled variant)
-  // Background colors (background-*)
-  "background-base": "#EBEBEB",
-  "background-default": primitiveColors.white,
-  "background-subtle": primitiveColors.neutral[50],
-  // Border colors (border-*)
-  "border-default": "#E8E9EB",
-  "border-subtle": primitiveColors.neutral[100],
-  "border-strong": primitiveColors.neutral[300],
-  "border-focus": primitiveColors.blue[600],
-  "border-input": primitiveColors.neutral[300],
-  // Input field border
-  "border-input-hover": primitiveColors.neutral[400],
-  // Input field border on hover
-  "border-input-focus": primitiveColors.blue[600],
-  // Input field border on focus
-  "border-input-error": primitiveColors.red[600],
-  // Input field border on error
-  // Interactive states (interactive-*)
-  "interactive-hover": "rgba(55, 65, 81, 0.04)",
-  "interactive-focus": "rgba(55, 65, 81, 0.12)",
-  "interactive-active": "rgba(55, 65, 81, 0.16)",
-  "interactive-selected": "rgba(55, 65, 81, 0.08)",
-  "interactive-disabled": "rgba(55, 65, 81, 0.12)",
-  "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
-  // Divider
-  "divider": "#E8E9EB",
-  // Avatar default
-  "avatar-background": primitiveColors.neutral[500],
-  "avatar-text": primitiveColors.white
-};
-var semanticColorsDark = {
-  // Brand colors stay the same in dark mode
-  "brand-primary": primitiveColors.accent[400],
-  "brand-primary-light": primitiveColors.accent[200],
-  "brand-primary-dark": primitiveColors.accent[700],
-  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
-  "brand-primary-hover": primitiveColors.accent[300],
-  "brand-primary-active": primitiveColors.accent[200],
-  "brand-secondary": primitiveColors.steel[500],
-  "brand-secondary-light": primitiveColors.steel[300],
-  "brand-secondary-dark": primitiveColors.steel[700],
-  "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
-  "brand-secondary-hover": primitiveColors.steel[400],
-  "brand-secondary-active": primitiveColors.steel[300],
-  // Text on brand backgrounds
-  "on-brand-primary": primitiveColors.white,
-  "on-brand-secondary": primitiveColors.white,
-  // Status colors
-  "status-success": primitiveColors.teal[500],
-  "status-success-light": primitiveColors.teal[400],
-  "status-success-dark": primitiveColors.teal[700],
-  "status-success-subtle": "rgba(20, 184, 166, 0.12)",
-  "status-error": primitiveColors.red[600],
-  "status-error-light": primitiveColors.red[400],
-  "status-error-dark": primitiveColors.red[700],
-  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
-  "status-warning": primitiveColors.amber[500],
-  "status-warning-light": primitiveColors.amber[400],
-  "status-warning-dark": primitiveColors.amber[600],
-  "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
-  "status-info": primitiveColors.sky[500],
-  "status-info-light": primitiveColors.sky[400],
-  "status-info-dark": primitiveColors.sky[700],
-  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
-  // Text on status backgrounds
-  "on-status-success": primitiveColors.white,
-  "on-status-error": primitiveColors.white,
-  "on-status-warning": primitiveColors.white,
-  "on-status-info": primitiveColors.white,
-  // Result/outcome indicators (result-*)
-  "result-improve": "#4caf50",
-  "result-improve-light": "rgba(76, 175, 80, 0.16)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
-  "result-degrade-light": "rgba(239, 83, 80, 0.16)",
-  "result-degrade-dark": "#b30000",
-  "result-inconclusive": "#9E9A97",
-  "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
-  "result-neutral": primitiveColors.neutral[400],
-  // Text on result backgrounds
-  "on-result-improve": primitiveColors.white,
-  "on-result-degrade": primitiveColors.white,
-  "on-result-inconclusive": primitiveColors.white,
-  // Data visualization colors (same in dark mode for consistency)
-  "data-1": discreteRainbow[9],
-  "data-2": discreteRainbow[14],
-  "data-3": discreteRainbow[17],
-  "data-4": discreteRainbow[25],
-  "data-5": discreteRainbow[8],
-  "data-6": discreteRainbow[20],
-  "data-7": discreteRainbow[13],
-  "data-8": discreteRainbow[15],
-  "data-9": discreteRainbow[3],
-  "data-10": discreteRainbow[22],
-  // Text colors - inverted for dark mode
-  "text-primary": primitiveColors.neutral[100],
-  "text-secondary": primitiveColors.neutral[400],
-  "text-tertiary": primitiveColors.neutral[500],
-  "text-disabled": "rgba(255, 255, 255, 0.38)",
-  "text-inverse": primitiveColors.neutral[900],
-  "text-link": "#828DF8",
-  "text-link-hover": primitiveColors.blue[400],
-  // Surface colors - dark backgrounds
-  "surface-base": primitiveColors.charcoal[700],
-  // #161616 - main surface
-  "surface-elevated": primitiveColors.charcoal[600],
-  // #191919 - elevated surface
-  "surface-raised": primitiveColors.charcoal[500],
-  // #1C1C1C - raised surface
-  "surface-overlay": primitiveColors.charcoal[600],
-  // #191919 - overlay surface
-  "surface-input": primitiveColors.charcoal[600],
-  // #191919 - input surface
-  // Background colors
-  "background-base": primitiveColors.charcoal[900],
-  // #101010 - darkest charcoal
-  "background-default": primitiveColors.charcoal[700],
-  // #161616 - main background
-  "background-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle background
-  // Border colors
-  "border-default": primitiveColors.charcoal[400],
-  // #1F1F1F - default border
-  "border-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle border
-  "border-strong": primitiveColors.charcoal[300],
-  // #2C2C2C - strong border
-  "border-focus": "#828DF8",
-  "border-input": primitiveColors.neutral[600],
-  "border-input-hover": primitiveColors.neutral[500],
-  "border-input-focus": "#828DF8",
-  "border-input-error": primitiveColors.red[500],
-  // Interactive states
-  "interactive-hover": "rgba(255, 255, 255, 0.04)",
-  "interactive-focus": "rgba(255, 255, 255, 0.12)",
-  "interactive-active": "rgba(255, 255, 255, 0.16)",
-  "interactive-selected": "rgba(255, 255, 255, 0.08)",
-  "interactive-disabled": "rgba(255, 255, 255, 0.12)",
-  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
-  // Divider
-  "divider": primitiveColors.charcoal[400],
-  // #1F1F1F - divider color
-  // Avatar default
-  "avatar-background": primitiveColors.neutral[600],
-  "avatar-text": primitiveColors.white
-};
-function getSemanticColors(mode) {
-  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
-}
-
-// src/components/custom/Workout/TempoBar.tsx
-var t = getSemanticColors("dark");
-var TEMPO_PACING = {
-  behindThresholdPct: 0.15,
-  minPhaseDurationMs: 500
-};
-function getTempoPacingState(elapsedMs, targetMs) {
-  if (!targetMs || targetMs < TEMPO_PACING.minPhaseDurationMs) return "none";
-  const ratio = elapsedMs / targetMs;
-  if (ratio > 1 + TEMPO_PACING.behindThresholdPct) return "behind";
-  return "on-pace";
-}
-function getTempoFillPct(elapsedMs, targetMs) {
-  if (!targetMs) return 100;
-  return Math.min(100, elapsedMs / targetMs * 100);
-}
-({
-  concentric: { color: t["status-success"]},
-  hold: { color: t["brand-primary"]},
-  eccentric: { color: t["status-warning"]}
-});
-
-// src/components/custom/Workout/TempoDisplay.tsx
-var INTER = "Inter, sans-serif";
-var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = "#D14343";
-var phaseColors = {
-  eccentric: "#FFB020",
-  // status-warning (amber)
-  pauseBottom: TEXT_TERTIARY,
-  concentric: "#14B8A6",
-  // status-success (teal)
-  pauseTop: TEXT_TERTIARY,
-  dash: TEXT_TERTIARY
-};
-function TempoValue({
-  value,
-  color,
-  fontSize
-}) {
-  return /* @__PURE__ */ jsx(
-    reactNative.Text,
-    {
-      style: {
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children: value
-    }
-  );
-}
-function TempoSeparator({ color, fontSize }) {
-  return /* @__PURE__ */ jsx(
-    reactNative.Text,
-    {
-      style: {
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: "600",
-        letterSpacing: 1
-      },
-      children: "-"
-    }
-  );
-}
-var LIVE_PHASES = [
-  { key: "eccentric", color: phaseColors.eccentric },
-  { key: "pauseBottom", color: phaseColors.pauseBottom },
-  { key: "concentric", color: phaseColors.concentric },
-  { key: "pauseTop", color: phaseColors.pauseTop }
+// src/components/custom/Workout/TempoDisplay.tsx
+var t3 = getSemanticColors("dark");
+var INTER = "Inter, sans-serif";
+var TEXT_TERTIARY = "#6B7280";
+var STATUS_ERROR = t3["status-error"];
+var phaseColors = {
+  eccentric: t3["status-warning"],
+  pauseBottom: TEXT_TERTIARY,
+  concentric: t3["status-success"],
+  pauseTop: TEXT_TERTIARY,
+  dash: TEXT_TERTIARY
+};
+function TempoValue({
+  value,
+  color,
+  fontSize
+}) {
+  return /* @__PURE__ */ jsx(MetricCell, { color, fontSize, children: value });
+}
+function TempoSeparator({ color, fontSize }) {
+  return /* @__PURE__ */ jsx(MetricCell, { color, fontSize, children: "-" });
+}
+var LIVE_PHASES = [
+  { key: "eccentric", color: phaseColors.eccentric },
+  { key: "pauseBottom", color: phaseColors.pauseBottom },
+  { key: "concentric", color: phaseColors.concentric },
+  { key: "pauseTop", color: phaseColors.pauseTop }
 ];
 function LiveTempoCell({
   value,
@@ -1595,6 +2212,7 @@ function TempoDisplay({
   tempo,
   size = "md",
   colored = true,
+  showLabel = true,
   showInfo = true,
   live,
   onPress,
@@ -1628,7 +2246,7 @@ function TempoDisplay({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
+        showLabel && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             style: {
@@ -1706,301 +2324,177 @@ function TempoDisplay({
             testID: "tempo-tooltip",
             children: [
               /* @__PURE__ */ jsxs(
-                reactNative.View,
-                {
-                  style: {
-                    backgroundColor: "#191919",
-                    borderRadius: 6,
-                    paddingVertical: 8,
-                    paddingHorizontal: 12,
-                    borderWidth: 1,
-                    borderColor: "#2C2C2C"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 10, lineHeight: 16, color: "#9CA3AF", fontFamily: INTER }, children: [
-                      "Eccentric: ",
-                      eccentric,
-                      "s"
-                    ] }),
-                    /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 10, lineHeight: 16, color: "#9CA3AF", fontFamily: INTER }, children: [
-                      "Pause (bottom): ",
-                      pauseBottom,
-                      "s"
-                    ] }),
-                    /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 10, lineHeight: 16, color: "#9CA3AF", fontFamily: INTER }, children: [
-                      "Concentric: ",
-                      concentric,
-                      "s"
-                    ] }),
-                    /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 10, lineHeight: 16, color: "#9CA3AF", fontFamily: INTER }, children: [
-                      "Pause (top): ",
-                      pauseTop,
-                      "s"
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                reactNative.View,
-                {
-                  style: {
-                    width: 0,
-                    height: 0,
-                    borderLeftWidth: 5,
-                    borderRightWidth: 5,
-                    borderTopWidth: 5,
-                    borderLeftColor: "transparent",
-                    borderRightColor: "transparent",
-                    borderTopColor: "#2C2C2C"
-                  }
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function formatAccessibilityLabel(setNumber, reps, weight, unit) {
-  const repsText = reps != null ? `${reps} reps` : "no reps";
-  const weightText = weight != null ? `at ${roundWeight(weight)} ${unit}` : "";
-  return `Set ${setNumber}: ${repsText}${weightText ? ` ${weightText}` : ""}`;
-}
-function SetRow({
-  mode,
-  setNumber,
-  previous,
-  reps,
-  weight,
-  rpe,
-  unit,
-  velocities,
-  velocityZones,
-  velocityLiveRepIndex,
-  velocityExpanded,
-  onVelocityToggle,
-  setType,
-  prBadges,
-  isNextSet,
-  targets
-}) {
-  const isActive = mode === "active";
-  const isCompleted = mode === "completed";
-  const rowStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 7,
-    paddingHorizontal: 8,
-    gap: 8,
-    borderRadius: 8
-  };
-  if (isActive && isNextSet) {
-    rowStyle.backgroundColor = "rgba(255,121,0,0.06)";
-    rowStyle.borderWidth = 1;
-    rowStyle.borderColor = "rgba(255,121,0,0.15)";
-  }
-  if (isCompleted && !isNextSet) {
-    rowStyle.opacity = 0.55;
-  }
-  return /* @__PURE__ */ jsxs(
-    reactNative.View,
-    {
-      style: rowStyle,
-      accessibilityLabel: formatAccessibilityLabel(
-        setNumber,
-        reps,
-        weight,
-        unit
-      ),
-      testID: "set-row",
-      children: [
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 36, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-set-number",
-            children: setType ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                style: {
-                  fontSize: 10,
-                  fontWeight: "700",
-                  fontFamily: "Inter, sans-serif",
-                  color: "#ffa502",
-                  backgroundColor: "rgba(255,165,2,0.12)",
-                  paddingVertical: 1,
-                  paddingHorizontal: 5,
-                  borderRadius: 3,
-                  overflow: "hidden"
-                },
-                testID: "set-row-type-badge",
-                children: setType
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-secondary",
-                style: {
-                  fontSize: 13,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: setNumber
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            className: "flex-1",
-            testID: "set-row-previous",
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-secondary",
-                style: {
-                  fontSize: 12,
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: previous ? `${previous.reps} x ${roundWeight(previous.weight)}` : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 44, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-reps",
-            children: isActive && reps == null && targets ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif"
-                },
-                testID: "set-row-target-reps",
-                children: targets.reps
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: reps != null ? "text-text-primary" : "text-text-tertiary",
-                style: {
-                  fontSize: 14,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: reps != null ? reps : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 56, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-weight",
-            children: isActive && weight == null && targets ? /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontStyle: "italic",
-                  fontFamily: "Inter, sans-serif"
-                },
-                testID: "set-row-target-weight",
-                children: roundWeight(targets.weight)
-              }
-            ) : /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: weight != null ? "text-text-primary" : "text-text-tertiary",
-                style: {
-                  fontSize: 14,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif"
-                },
-                children: weight != null ? roundWeight(weight) : "\u2014"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { width: 36, alignItems: "center", justifyContent: "center" },
-            testID: "set-row-rpe",
-            children: /* @__PURE__ */ jsx(
-              reactNative.Text,
-              {
-                className: rpe != null ? void 0 : "text-text-tertiary",
-                style: {
-                  fontSize: 13,
-                  fontWeight: "600",
-                  fontFamily: "Inter, sans-serif",
-                  // rpeColor returns a concrete hex (native-safe); only the tertiary
-                  // fallback needs the className token.
-                  color: rpe != null ? rpeColor(rpe) : void 0
-                },
-                children: rpe != null ? roundRpe(rpe) : "\u2014"
-              }
-            )
-          }
-        ),
-        prBadges && prBadges.length > 0 && /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            className: "flex-row items-center",
-            style: { gap: 4 },
-            testID: "set-row-pr-badges",
-            children: prBadges.map((badge, i) => /* @__PURE__ */ jsx(
-              PrBadge,
-              {
-                type: badge.type,
-                label: badge.label,
-                animate: false,
-                compact: true
-              },
-              i
-            ))
-          }
-        ),
-        velocities && velocities.length > 0 && /* @__PURE__ */ jsx(
-          reactNative.View,
-          {
-            style: { position: "absolute", bottom: 0, left: 8, right: 8 },
-            testID: "set-row-velocity-strip",
-            children: /* @__PURE__ */ jsx(
-              VelocityStrip,
-              {
-                velocities,
-                zones: velocityZones,
-                liveRepIndex: velocityLiveRepIndex,
-                expanded: velocityExpanded,
-                onToggle: onVelocityToggle,
-                variant: onVelocityToggle ? "full" : "mini"
-              }
-            )
+                reactNative.View,
+                {
+                  style: {
+                    backgroundColor: "#191919",
+                    borderRadius: 6,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderWidth: 1,
+                    borderColor: "#2C2C2C"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 10, lineHeight: 16, color: "#9CA3AF", fontFamily: INTER }, children: [
+                      "Eccentric: ",
+                      eccentric,
+                      "s"
+                    ] }),
+                    /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 10, lineHeight: 16, color: "#9CA3AF", fontFamily: INTER }, children: [
+                      "Pause (bottom): ",
+                      pauseBottom,
+                      "s"
+                    ] }),
+                    /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 10, lineHeight: 16, color: "#9CA3AF", fontFamily: INTER }, children: [
+                      "Concentric: ",
+                      concentric,
+                      "s"
+                    ] }),
+                    /* @__PURE__ */ jsxs(reactNative.Text, { style: { fontSize: 10, lineHeight: 16, color: "#9CA3AF", fontFamily: INTER }, children: [
+                      "Pause (top): ",
+                      pauseTop,
+                      "s"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                reactNative.View,
+                {
+                  style: {
+                    width: 0,
+                    height: 0,
+                    borderLeftWidth: 5,
+                    borderRightWidth: 5,
+                    borderTopWidth: 5,
+                    borderLeftColor: "transparent",
+                    borderRightColor: "transparent",
+                    borderTopColor: "#2C2C2C"
+                  }
+                }
+              )
+            ]
           }
         )
       ]
     }
   );
 }
-function resolveColor(token, mode = "dark") {
-  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+var t4 = getSemanticColors("dark");
+var INDICATOR_CONFIG = {
+  imbalance: { Icon: ScaleIcon, color: t4["status-error"], label: "Left/right imbalance" },
+  overshoot: { Icon: AlertTriangleIcon, color: t4["status-error"], label: "Load overshoot" },
+  "velocity-loss": { Icon: TrendingDownIcon, color: t4["status-warning"], label: "Velocity loss" },
+  "missed-reps": { Icon: CircleSlashIcon, color: t4["status-warning"], label: "Missed reps" },
+  pr: { Icon: AwardIcon, color: t4["status-success"], label: "Personal record" },
+  info: { Icon: InfoIcon, color: t4["status-info"], label: "More info" }
+};
+function ExerciseIndicator({ kind, onPress, className, ...props }) {
+  const { Icon, color, label } = INDICATOR_CONFIG[kind];
+  const chip = /* @__PURE__ */ jsx(
+    reactNative.View,
+    {
+      className,
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: color,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      testID: "exercise-indicator",
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { size: 11, color })
+    }
+  );
+  if (onPress) {
+    return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress, accessibilityRole: "button", accessibilityLabel: label, children: chip });
+  }
+  return chip;
 }
 
-// src/components/custom/Workout/ExerciseCard.tsx
-function buildColumnHeaders(unit) {
-  return ["SET", "PREV", "REPS", unit.toUpperCase(), "RPE"];
+// src/components/custom/Workout/ExerciseHeading.tsx
+function headingLabel(name, sets, reps, load, unit) {
+  return `${name}, ${sets}\xD7${reps} @ ${roundWeight(load)} ${unit}`;
+}
+function ExerciseHeading({
+  name,
+  sets,
+  reps,
+  load,
+  unit = "lbs",
+  tempo,
+  indicator,
+  dimmed,
+  onPress
+}) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { style: { opacity: dimmed ? 0.55 : 1 }, testID: "exercise-heading", children: [
+    /* @__PURE__ */ jsxs(
+      reactNative.Pressable,
+      {
+        onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: headingLabel(name, sets, reps, load, unit),
+        className: "flex-row items-center",
+        style: { gap: 8 },
+        testID: "exercise-card-header",
+        children: [
+          /* @__PURE__ */ jsx(
+            reactNative.Text,
+            {
+              className: "text-text-primary",
+              style: { fontSize: 14, fontFamily: '"Space Grotesk", sans-serif', fontWeight: "700" },
+              testID: "exercise-card-name",
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+          indicator && /* @__PURE__ */ jsx(ExerciseIndicator, { kind: indicator })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      reactNative.View,
+      {
+        className: "flex-row items-center",
+        style: { gap: 8, marginTop: 1 },
+        testID: "exercise-card-summary",
+        children: [
+          /* @__PURE__ */ jsx(SetsRepsLoad, { sets, reps, load, unit }),
+          /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+          tempo && /* @__PURE__ */ jsx(TempoDisplay, { tempo, size: "sm", showLabel: false, showInfo: false })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/custom/Workout/ExerciseCardHeading.tsx
+function ExerciseCardHeading({
+  setStates,
+  stripHeight = 8,
+  dimmed,
+  testID = "exercise-card",
+  ...heading
+}) {
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      style: { paddingVertical: 9, paddingHorizontal: 12, opacity: dimmed ? 0.55 : 1 },
+      testID,
+      children: [
+        /* @__PURE__ */ jsx(ExerciseHeading, { ...heading }),
+        setStates.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: 7 }, testID: "exercise-card-strip", children: /* @__PURE__ */ jsx(SetStrip, { sets: setStates, height: stripHeight }) })
+      ]
+    }
+  );
 }
+
+// src/components/custom/Workout/ExerciseCard.tsx
 function getSupersetBorderRadius(position) {
   switch (position) {
     case "first":
@@ -2043,7 +2537,7 @@ function formatSummary(summary) {
   if (!summary) return "";
   return `${summary.sets}\xD7${summary.reps} @ ${roundWeight(summary.weight)} ${summary.unit}`;
 }
-function formatAccessibilityLabel2(name, summary, prescription) {
+function formatAccessibilityLabel(name, summary, prescription) {
   if (summary) return `${name}, ${formatSummary(summary)}`;
   if (prescription) return `${name}, ${prescription}`;
   return name;
@@ -2052,7 +2546,6 @@ function CollapsedCard({
   name,
   onToggle,
   summary,
-  e1rm,
   isPR,
   setVelocities,
   velocityZones,
@@ -2071,7 +2564,7 @@ function CollapsedCard({
       onPressIn: () => setPressed(true),
       onPressOut: () => setPressed(false),
       accessibilityRole: "button",
-      accessibilityLabel: formatAccessibilityLabel2(name, summary, void 0),
+      accessibilityLabel: formatAccessibilityLabel(name, summary, void 0),
       testID: "exercise-card",
       children: /* @__PURE__ */ jsxs(
         reactNative.View,
@@ -2085,100 +2578,93 @@ function CollapsedCard({
             ...supersetMargin
           },
           children: [
-            /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row items-center",
-                testID: "exercise-card-header",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        fontSize: 14,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "exercise-card-name",
-                      children: name
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
-                  summary && /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-secondary",
-                      style: {
-                        fontSize: 12,
-                        fontFamily: "Inter, sans-serif",
-                        marginRight: 8
-                      },
-                      testID: "exercise-card-summary",
-                      children: formatSummary(summary)
-                    }
-                  ),
-                  e1rm && /* @__PURE__ */ jsx(
-                    WeightBadge,
-                    {
-                      value: roundWeight(e1rm.value),
-                      unit: e1rm.unit,
-                      size: "sm",
-                      showIcon: false,
-                      testID: "exercise-card-e1rm"
-                    }
-                  ),
-                  isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
-                ]
-              }
-            ),
-            (completedSets > 0 || remaining > 0) && /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row",
-                style: { marginTop: 6, gap: 4 },
-                testID: "exercise-card-strips",
-                children: [
-                  setVelocities?.map((velocities, i) => /* @__PURE__ */ jsx(
-                    VelocityStrip,
-                    {
-                      velocities,
-                      zones: velocityZones,
-                      variant: "mini",
-                      testID: `exercise-card-velocity-strip-${i}`
-                    },
-                    i
-                  )),
-                  Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx(
-                    PlaceholderStrip,
-                    {
-                      testID: `exercise-card-placeholder-${i}`
-                    },
-                    `placeholder-${i}`
-                  ))
-                ]
-              }
-            )
+            /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", testID: "exercise-card-header", children: [
+              /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-primary",
+                  style: {
+                    fontSize: 14,
+                    fontFamily: '"Space Grotesk", sans-serif',
+                    fontWeight: "700"
+                  },
+                  testID: "exercise-card-name",
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+              summary && /* @__PURE__ */ jsx(
+                reactNative.Text,
+                {
+                  className: "text-text-secondary",
+                  style: {
+                    fontSize: 12,
+                    fontFamily: "Inter, sans-serif",
+                    marginRight: 8
+                  },
+                  testID: "exercise-card-summary",
+                  children: formatSummary(summary)
+                }
+              ),
+              isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
+            ] }),
+            (completedSets > 0 || remaining > 0) && /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row", style: { marginTop: 6, gap: 4 }, testID: "exercise-card-strips", children: [
+              setVelocities?.map((velocities, i) => /* @__PURE__ */ jsx(
+                VelocityStrip,
+                {
+                  velocities,
+                  zones: velocityZones,
+                  variant: "mini",
+                  testID: `exercise-card-velocity-strip-${i}`
+                },
+                i
+              )),
+              Array.from({ length: remaining }, (_, i) => /* @__PURE__ */ jsx(
+                PlaceholderStrip,
+                {
+                  testID: `exercise-card-placeholder-${i}`
+                },
+                `placeholder-${i}`
+              ))
+            ] })
           ]
         }
       )
     }
   );
 }
+var DARK2 = getSemanticColors("dark");
+var BODY_DIVIDER = DARK2["border-subtle"];
+function deriveHeaderSetStates(sets) {
+  return sets.map((set) => {
+    switch (set.state) {
+      case "live":
+        return { status: "active", velocities: set.velocities, planned: set.target.reps };
+      case "done":
+        return { status: "done", velocities: set.velocities };
+      case "todo":
+        return { status: "todo", planned: set.planned ?? set.target.reps };
+    }
+  });
+}
 function ExpandedCard({
   name,
   onToggle,
   summary,
-  e1rm,
   isPR,
   sets,
   tempo,
+  indicator,
+  setStates,
+  stripHeight = 8,
+  velocityZones,
   supersetPosition
 }) {
   const borderRadius = getSupersetBorderRadius(supersetPosition);
   const supersetMargin = getSupersetMargin(supersetPosition);
   const unit = summary?.unit ?? sets?.[0]?.unit ?? "lbs";
-  const columnHeaders = buildColumnHeaders(unit);
+  const headerStates = setStates ?? (sets ? deriveHeaderSetStates(sets) : []);
+  const headerIndicator = indicator ?? (isPR ? "pr" : void 0);
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
@@ -2191,114 +2677,32 @@ function ExpandedCard({
       testID: "exercise-card",
       children: [
         /* @__PURE__ */ jsx(
-          reactNative.Pressable,
+          ExerciseCardHeading,
           {
+            name,
+            sets: summary?.sets ?? sets?.length ?? 0,
+            reps: summary?.reps ?? 0,
+            load: summary?.weight ?? 0,
+            unit,
+            tempo,
+            indicator: headerIndicator,
+            setStates: headerStates,
+            stripHeight,
             onPress: onToggle,
-            accessibilityRole: "button",
-            accessibilityLabel: formatAccessibilityLabel2(name, summary, void 0),
-            "aria-expanded": true,
-            testID: "exercise-card-header",
-            children: /* @__PURE__ */ jsxs(
-              reactNative.View,
-              {
-                className: "flex-row items-center",
-                style: {
-                  padding: 12,
-                  paddingHorizontal: 14,
-                  paddingBottom: 10,
-                  borderBottomWidth: 1,
-                  borderBottomColor: resolveColor("border-default")
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-primary",
-                      style: {
-                        fontSize: 14,
-                        fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700"
-                      },
-                      testID: "exercise-card-name",
-                      children: name
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
-                  summary && /* @__PURE__ */ jsx(
-                    reactNative.Text,
-                    {
-                      className: "text-text-secondary",
-                      style: {
-                        fontSize: 12,
-                        fontFamily: "Inter, sans-serif",
-                        marginRight: 8
-                      },
-                      testID: "exercise-card-summary",
-                      children: formatSummary(summary)
-                    }
-                  ),
-                  e1rm && /* @__PURE__ */ jsx(
-                    WeightBadge,
-                    {
-                      value: roundWeight(e1rm.value),
-                      unit: e1rm.unit,
-                      size: "sm",
-                      showIcon: false,
-                      testID: "exercise-card-e1rm"
-                    }
-                  ),
-                  isPR && /* @__PURE__ */ jsx(reactNative.View, { style: { marginLeft: 4 }, children: /* @__PURE__ */ jsx(PrBadge, { type: "e1rm", compact: true, animate: false }) })
-                ]
-              }
-            )
+            testID: "exercise-card-heading"
           }
         ),
-        tempo && /* @__PURE__ */ jsx(reactNative.View, { style: { marginTop: 8, paddingHorizontal: 14 }, testID: "exercise-card-tempo", children: /* @__PURE__ */ jsx(TempoDisplay, { tempo, size: "sm" }) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           reactNative.View,
           {
-            className: "flex-row",
-            style: {
-              paddingVertical: 8,
-              paddingHorizontal: 8,
-              paddingBottom: 4
-            },
-            testID: "exercise-card-column-headers",
-            children: columnHeaders.map((header, i) => {
-              const widths = [36, void 0, 44, 56, 36];
-              const width = widths[i];
-              const isFlex = width === void 0;
-              return /* @__PURE__ */ jsx(
-                reactNative.View,
-                {
-                  style: {
-                    ...isFlex ? {} : { width },
-                    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: header
-                    }
-                  )
-                },
-                header
-              );
-            })
+            style: { borderTopWidth: 1, borderTopColor: BODY_DIVIDER, paddingBottom: 6 },
+            testID: "exercise-card-body",
+            children: [
+              /* @__PURE__ */ jsx(SetTableHeader, { unit, showPrevious: false, testID: "exercise-card-column-headers" }),
+              sets && /* @__PURE__ */ jsx(reactNative.View, { testID: "exercise-card-sets", children: sets.map((set, i) => /* @__PURE__ */ jsx(SetRow, { ...set, velocityZones: set.velocityZones ?? velocityZones }, i)) })
+            ]
           }
-        ),
-        sets && /* @__PURE__ */ jsx(reactNative.View, { testID: "exercise-card-sets", children: sets.map((setProps, i) => /* @__PURE__ */ jsx(SetRow, { ...setProps }, i)) })
+        )
       ]
     }
   );
@@ -2307,11 +2711,12 @@ function UpcomingCard({
   name,
   prescription,
   previousBest,
-  supersetPosition
+  supersetPosition,
+  onToggle
 }) {
   const borderRadius = getSupersetBorderRadius(supersetPosition);
   const supersetMargin = getSupersetMargin(supersetPosition);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(reactNative.Pressable, { onPress: onToggle, accessibilityRole: "button", children: /* @__PURE__ */ jsx(
     reactNative.View,
     {
       style: {
@@ -2321,7 +2726,7 @@ function UpcomingCard({
         ...borderRadius,
         ...supersetMargin
       },
-      accessibilityLabel: formatAccessibilityLabel2(name, void 0, prescription),
+      accessibilityLabel: formatAccessibilityLabel(name, void 0, prescription),
       testID: "exercise-card",
       children: /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", children: [
         /* @__PURE__ */ jsx(
@@ -2329,6 +2734,7 @@ function UpcomingCard({
           {
             className: "text-text-primary",
             style: {
+              flexShrink: 0,
               fontSize: 14,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: "700"
@@ -2341,7 +2747,9 @@ function UpcomingCard({
           reactNative.Text,
           {
             className: "text-text-secondary",
+            numberOfLines: 1,
             style: {
+              flexShrink: 1,
               fontSize: 12,
               fontFamily: "Inter, sans-serif",
               marginLeft: 8
@@ -2350,12 +2758,14 @@ function UpcomingCard({
             children: prescription
           }
         ),
-        /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1" }),
+        /* @__PURE__ */ jsx(reactNative.View, { className: "flex-1", style: { minWidth: 8 } }),
         previousBest && /* @__PURE__ */ jsx(
           reactNative.Text,
           {
             className: "text-text-tertiary",
+            numberOfLines: 1,
             style: {
+              flexShrink: 1,
               fontSize: 11,
               fontFamily: "Inter, sans-serif"
             },
@@ -2365,19 +2775,32 @@ function UpcomingCard({
         )
       ] })
     }
-  );
+  ) });
 }
-function ExerciseCard(props) {
-  switch (props.state) {
-    case "collapsed":
-      return /* @__PURE__ */ jsx(CollapsedCard, { ...props });
-    case "expanded":
-      return /* @__PURE__ */ jsx(ExpandedCard, { ...props });
-    case "upcoming":
-      return /* @__PURE__ */ jsx(UpcomingCard, { ...props });
-  }
+function ExerciseCard({
+  upcoming,
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  ...rest
+}) {
+  const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded ?? false);
+  const isControlled = expanded !== void 0;
+  const isExpanded = isControlled ? expanded : internalExpanded;
+  const onToggle = () => {
+    const next = !isExpanded;
+    onExpandedChange?.(next);
+    if (!isControlled) setInternalExpanded(next);
+  };
+  if (upcoming) return /* @__PURE__ */ jsx(UpcomingCard, { ...rest, onToggle });
+  return isExpanded ? /* @__PURE__ */ jsx(ExpandedCard, { ...rest, onToggle }) : /* @__PURE__ */ jsx(CollapsedCard, { ...rest, onToggle });
 }
-var BRAND_PRIMARY = "#FF7900";
+function resolveColor(token, mode = "dark") {
+  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
+
+// src/components/custom/Workout/InputBar.tsx
+var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
 var INPUT_CLASSNAME = "bg-surface-raised border-border-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
@@ -2506,7 +2929,7 @@ function InputBar({
             onPress: onRecord,
             disabled: !canRecord,
             style: ({ pressed }) => ({
-              backgroundColor: BRAND_PRIMARY,
+              backgroundColor: BRAND_PRIMARY2,
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 16,
@@ -2533,7 +2956,46 @@ function InputBar({
     }
   );
 }
-var BRAND_PRIMARY2 = "#FF7900";
+function formatDuration(ms) {
+  const totalSeconds = Math.max(0, Math.ceil(ms / 1e3));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function useTimer(options = {}) {
+  const {
+    mode = "up",
+    durationMs,
+    elapsedMs: controlledElapsedMs,
+    running = false,
+    autoTick = false,
+    tickMs = 1e3
+  } = options;
+  const isControlled = controlledElapsedMs != null;
+  const [internalElapsedMs, setInternalElapsedMs] = react.useState(0);
+  react.useEffect(() => {
+    if (isControlled || !autoTick || !running) return;
+    const id = setInterval(() => {
+      setInternalElapsedMs((prev) => prev + tickMs);
+    }, tickMs);
+    return () => clearInterval(id);
+  }, [isControlled, autoTick, running, tickMs]);
+  const elapsedMs = isControlled ? controlledElapsedMs : internalElapsedMs;
+  const hasDuration = durationMs != null && durationMs > 0;
+  const remainingMs = durationMs != null ? Math.max(0, durationMs - elapsedMs) : 0;
+  let progress;
+  if (hasDuration) {
+    progress = Math.min(1, Math.max(0, elapsedMs / durationMs));
+  } else {
+    progress = mode === "down" ? 1 : 0;
+  }
+  const label = formatDuration(mode === "down" ? remainingMs : elapsedMs);
+  const done = durationMs != null && elapsedMs >= durationMs;
+  return { elapsedMs, remainingMs, progress, label, done };
+}
+
+// src/components/custom/Workout/RestTimer.tsx
+var BRAND_PRIMARY3 = getSemanticColors("dark")["brand-primary"];
 function RestTimer({
   totalSeconds,
   elapsedMs,
@@ -2543,14 +3005,18 @@ function RestTimer({
   visible,
   displayOnly = false
 }) {
-  if (!visible) return null;
-  const remainingMs = Math.max(0, totalSeconds * 1e3 - elapsedMs);
+  const {
+    remainingMs,
+    progress,
+    label: timeDisplay
+  } = useTimer({
+    mode: "down",
+    durationMs: totalSeconds * 1e3,
+    elapsedMs
+  });
   const remainingSec = Math.ceil(remainingMs / 1e3);
-  const minutes = Math.floor(remainingSec / 60);
-  const seconds = remainingSec % 60;
-  const timeDisplay = `${minutes}:${String(seconds).padStart(2, "0")}`;
-  const totalMs = totalSeconds * 1e3;
-  const progressPct = totalMs > 0 ? Math.min(100, elapsedMs / totalMs * 100) : 100;
+  const progressPct = progress * 100;
+  if (!visible) return null;
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
@@ -2639,7 +3105,7 @@ function RestTimer({
               {
                 style: {
                   height: "100%",
-                  backgroundColor: BRAND_PRIMARY2,
+                  backgroundColor: BRAND_PRIMARY3,
                   borderRadius: 2,
                   width: `${progressPct}%`
                 },
@@ -2696,7 +3162,7 @@ function RestTimer({
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "600",
-                    color: BRAND_PRIMARY2
+                    color: BRAND_PRIMARY3
                   },
                   children: "Skip"
                 }
@@ -2710,7 +3176,7 @@ function RestTimer({
 }
 var DEFAULTS = {
   label: "SS",
-  color: "#FF7900",
+  color: getSemanticColors("dark")["brand-primary"],
   bgBase: "#101010"
 };
 function SupersetWrapper({
@@ -2763,7 +3229,7 @@ function SupersetWrapper({
 }
 
 // src/components/custom/Workout/ActiveWorkoutPage.tsx
-var BRAND_PRIMARY3 = "#FF7900";
+var BRAND_PRIMARY4 = getSemanticColors("dark")["brand-primary"];
 function countCompletedSets(exercise) {
   if (exercise.setVelocities != null) return exercise.setVelocities.length;
   if (exercise.status === "completed") return exercise.totalPlannedSets;
@@ -2789,23 +3255,22 @@ function deriveWorkoutProgress(exercises) {
 function findActiveExercise(exercises) {
   return exercises.find((exercise) => exercise.status === "active") ?? null;
 }
-function statusToCardState(status, focused) {
-  if (status === "upcoming") return "upcoming";
-  return focused ? "expanded" : "collapsed";
+function isUpcomingExercise(status) {
+  return status === "upcoming";
 }
 function toActiveCardProps(exercise, focused, onToggle, supersetPosition = null, supersetColor) {
-  const state = statusToCardState(exercise.status, focused);
+  const upcoming = isUpcomingExercise(exercise.status);
   return {
     name: exercise.name,
-    state,
-    onToggle,
+    upcoming,
+    expanded: focused,
+    onExpandedChange: onToggle,
     summary: exercise.summary,
-    e1rm: exercise.e1rm,
     isPR: exercise.isPR,
     tempo: exercise.tempo,
     setVelocities: exercise.setVelocities,
     totalPlannedSets: exercise.totalPlannedSets,
-    sets: state === "expanded" ? exercise.sets : void 0,
+    sets: focused ? exercise.sets : void 0,
     prescription: exercise.prescription,
     previousBest: exercise.previousBest,
     supersetPosition,
@@ -2878,7 +3343,7 @@ function WorkoutHeader({
               fontSize: 15,
               fontFamily: '"Space Grotesk", sans-serif',
               fontWeight: "700",
-              color: BRAND_PRIMARY3,
+              color: BRAND_PRIMARY4,
               fontVariant: ["tabular-nums"]
             },
             children: `${progress.completedExercises}/${progress.totalExercises}`
@@ -2912,7 +3377,7 @@ function WorkoutHeader({
             style: {
               height: "100%",
               width: `${Math.round(progress.fraction * 100)}%`,
-              backgroundColor: BRAND_PRIMARY3,
+              backgroundColor: BRAND_PRIMARY4,
               borderRadius: 2
             },
             testID: "active-workout-page-progress-fill"
@@ -3494,17 +3959,18 @@ function CardContent({ children, className }) {
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
 }
+var t5 = getSemanticColors("dark");
 var solidVariantColors = {
-  success: "#14B8A6",
-  warning: "#FFB020",
-  error: "#D14343",
+  success: t5["status-success"],
+  warning: t5["status-warning"],
+  error: t5["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
   "on-track": {
-    backgroundColor: "rgba(20,184,166,0.15)",
+    backgroundColor: "rgba(46,213,115,0.15)",
     borderWidth: 1,
-    borderColor: "rgba(20,184,166,0.3)"
+    borderColor: "rgba(46,213,115,0.3)"
   },
   deviation: {
     backgroundColor: "rgba(245,158,11,0.15)",
@@ -3519,11 +3985,11 @@ var ringVariantStyles = {
   }
 };
 var glowStyles = {
-  success: { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  success: { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
   warning: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
   error: { boxShadow: "0 0 4px rgba(239,68,68,0.4)" },
   neutral: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" },
-  "on-track": { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  "on-track": { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
   deviation: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
   future: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" }
 };
@@ -3537,8 +4003,8 @@ var iconColors = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": "#14B8A6",
-  deviation: "#FFB020",
+  "on-track": t5["status-success"],
+  deviation: t5["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -3619,20 +4085,24 @@ function StatusDot({
   }
   return /* @__PURE__ */ jsx(reactNative.View, { className, ...props, children: dot });
 }
+var MESO_ACCENT_GRADIENT_DARK = primitiveRamps.orange[500];
+var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
+var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
 
 // src/components/custom/Workout/MesoStatusCard.tsx
-var BRAND_PRIMARY4 = "#FF7900";
-var BRAND_PRIMARY_DARK = "#C45E00";
-var BRAND_PRIMARY_LIGHT = "#FFB066";
-var SUCCESS = "#14B8A6";
-var WARNING = "#FFB020";
-var ERROR = "#D14343";
-var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY4, BRAND_PRIMARY_LIGHT];
+var t6 = getSemanticColors("dark");
+var BRAND_PRIMARY5 = t6["brand-primary"];
+var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
+var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
+var SUCCESS = t6["status-success"];
+var WARNING = t6["status-warning"];
+var ERROR = t6["status-error"];
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY5, BRAND_PRIMARY_LIGHT];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
-var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)";
+var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
 var STATUS_VARIANTS = {
-  success: { bg: "rgba(20,184,166,0.15)", border: "rgba(20,184,166,0.3)", text: SUCCESS },
-  warning: { bg: "rgba(255,176,32,0.15)", border: "rgba(255,176,32,0.3)", text: WARNING },
+  success: { bg: "rgba(46,213,115,0.15)", border: "rgba(46,213,115,0.3)", text: SUCCESS },
+  warning: { bg: "rgba(249,180,21,0.15)", border: "rgba(249,180,21,0.3)", text: WARNING },
   error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
 };
 function clamp01(value) {
@@ -3698,7 +4168,7 @@ function StatusPill({ badge }) {
     }
   );
 }
-function MetricCell({ metric }) {
+function MetricCell2({ metric }) {
   return /* @__PURE__ */ jsxs(reactNative.View, { style: { width: "48%" }, testID: "meso-status-card-metric", children: [
     /* @__PURE__ */ jsx(
       reactNative.Text,
@@ -3916,7 +4386,7 @@ function MesoStatusCard({
               className: "flex-row flex-wrap",
               style: { gap: 8 },
               testID: "meso-status-card-metrics",
-              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell, { metric }, `${metric.label}-${index}`))
+              children: metrics.map((metric, index) => /* @__PURE__ */ jsx(MetricCell2, { metric }, `${metric.label}-${index}`))
             }
           ),
           gauges.length > 0 && /* @__PURE__ */ jsx(reactNative.View, { style: { gap: 12 }, testID: "meso-status-card-gauges", children: gauges.map((gauge, index) => /* @__PURE__ */ jsx(Gauge, { gauge }, `${gauge.label}-${index}`)) }),
@@ -3924,9 +4394,9 @@ function MesoStatusCard({
             reactNative.View,
             {
               style: {
-                backgroundColor: "rgba(255,176,32,0.06)",
+                backgroundColor: "rgba(249,180,21,0.06)",
                 borderWidth: 1,
-                borderColor: "rgba(255,176,32,0.15)",
+                borderColor: "rgba(249,180,21,0.15)",
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -3952,9 +4422,9 @@ function MesoStatusCard({
               className: "flex-row items-center",
               style: {
                 gap: 8,
-                backgroundColor: "rgba(20,184,166,0.06)",
+                backgroundColor: "rgba(46,213,115,0.06)",
                 borderWidth: 1,
-                borderColor: "rgba(20,184,166,0.2)",
+                borderColor: "rgba(46,213,115,0.2)",
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -3983,21 +4453,22 @@ function MesoStatusCard({
     }
   );
 }
-var BRAND_PRIMARY5 = "#FF7900";
+var sem = getSemanticColors("dark");
+var BRAND_PRIMARY6 = sem["brand-primary"];
 var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
-var STATUS_SUCCESS = "#14B8A6";
-var STATUS_ERROR2 = "#D14343";
-var STATUS_WARNING = "#FFB020";
+var STATUS_SUCCESS = sem["status-success"];
+var STATUS_ERROR2 = sem["status-error"];
+var STATUS_WARNING = sem["status-warning"];
 var GRID_LINE = "rgba(255,255,255,0.06)";
-var SUCCESS_PILL_BG = "rgba(20,184,166,0.10)";
-var SUCCESS_PILL_BORDER = "rgba(20,184,166,0.20)";
+var SUCCESS_PILL_BG = "rgba(46,213,115,0.10)";
+var SUCCESS_PILL_BORDER = "rgba(46,213,115,0.20)";
 var ERROR_PILL_BG = "rgba(209,67,67,0.10)";
 var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t2 = Date.parse(dateStr);
-  return Number.isNaN(t2) ? 0 : t2;
+  const t12 = Date.parse(dateStr);
+  return Number.isNaN(t12) ? 0 : t12;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -4274,7 +4745,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.actual,
-                          color: BRAND_PRIMARY5,
+                          color: BRAND_PRIMARY6,
                           strokeWidth: 2.5,
                           testID: "strength-trend-chart-actual-segment"
                         }
@@ -4327,7 +4798,7 @@ function StrengthTrendChart({
                       width: 8,
                       height: 8,
                       borderRadius: 1,
-                      backgroundColor: BRAND_PRIMARY5
+                      backgroundColor: BRAND_PRIMARY6
                     }
                   },
                   `point-${c.index}`
@@ -4457,7 +4928,7 @@ function StrengthTrendChart({
             testID: "strength-trend-chart-legend",
             children: [
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(reactNative.View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY5 } }),
+                /* @__PURE__ */ jsx(reactNative.View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY6 } }),
                 /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Actual" })
               ] }),
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
@@ -4486,13 +4957,14 @@ function StrengthTrendChart({
     }
   );
 }
-var STATUS_SUCCESS2 = "#14B8A6";
-var STATUS_WARNING2 = "#FFB020";
-var STATUS_INFO = "#2196F3";
+var t7 = getSemanticColors("dark");
+var STATUS_SUCCESS2 = t7["status-success"];
+var STATUS_WARNING2 = t7["status-warning"];
+var STATUS_INFO = t7["status-info"];
 var DOT_BORDER = "#F3F4F6";
-var BAND_FILL = "rgba(20,184,166,0.1)";
-var BAND_EDGE = "rgba(20,184,166,0.45)";
-var PROJECTION_FILL = "rgba(20,184,166,0.05)";
+var BAND_FILL = "rgba(46,213,115,0.1)";
+var BAND_EDGE = "rgba(46,213,115,0.45)";
+var PROJECTION_FILL = "rgba(46,213,115,0.05)";
 var PADDING_LEFT = 28;
 var PADDING_RIGHT = 10;
 var PADDING_TOP = 8;
@@ -4531,13 +5003,13 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t2 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t2 * (b[key] - a[key]);
+      const t12 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t12 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
 }
-function buildColumns(pixels, step) {
+function buildColumns2(pixels, step) {
   if (pixels.length < 2) return [];
   const start = pixels[0].x;
   const end = pixels[pixels.length - 1].x;
@@ -4649,7 +5121,7 @@ function CapacityBandChart({
   }
   const { toX, toY } = scale;
   const bandPixels = toPixels(band, toX, toY);
-  const columns = buildColumns(bandPixels, COLUMN_STEP);
+  const columns = buildColumns2(bandPixels, COLUMN_STEP);
   const topEdge = buildEdges(bandPixels, "yHigh");
   const bottomEdge = buildEdges(bandPixels, "yLow");
   const lastBandPoint = band[band.length - 1];
@@ -4724,8 +5196,8 @@ function CapacityBandChart({
                   testID: "capacity-band-chart-reveal",
                   children: /* @__PURE__ */ jsxs(reactNative.View, { style: { width, height, position: "relative" }, children: [
                     projection && /* @__PURE__ */ jsxs(reactNative.View, { testID: "capacity-band-chart-projection", children: [
-                      renderColumns(buildColumns(trainingPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
-                      renderColumns(buildColumns(restPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
+                      renderColumns(buildColumns2(trainingPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
+                      renderColumns(buildColumns2(restPixels, COLUMN_STEP), PROJECTION_FILL, "capacity-band-chart-projection-fill"),
                       renderEdges(buildEdges(trainingPixels, "yHigh"), STATUS_SUCCESS2, true, "capacity-band-chart-projection-training"),
                       renderEdges(buildEdges(trainingPixels, "yLow"), STATUS_SUCCESS2, true, "capacity-band-chart-projection-training"),
                       renderEdges(buildEdges(restPixels, "yHigh"), STATUS_INFO, true, "capacity-band-chart-projection-rest"),
@@ -4864,7 +5336,7 @@ function CapacityBandChart({
 }
 
 // src/components/custom/Workout/ExerciseDetailPage.tsx
-var BRAND_PRIMARY6 = "#FF7900";
+var BRAND_PRIMARY7 = getSemanticColors("dark")["brand-primary"];
 var CHART_WIDTH = 326;
 var CHART_HEIGHT = 150;
 var EXERCISE_DETAIL_TABS = [
@@ -4886,10 +5358,9 @@ function deriveExerciseStats(entries) {
 function toExerciseCardProps(entry, expanded, onToggle) {
   return {
     name: entry.title,
-    state: expanded ? "expanded" : "collapsed",
-    onToggle,
+    expanded,
+    onExpandedChange: onToggle,
     summary: entry.summary,
-    e1rm: entry.e1rm,
     isPR: entry.isPR,
     tempo: entry.tempo,
     sets: expanded ? entry.sets : void 0
@@ -4928,7 +5399,7 @@ function TabBar({ active, onSelect }) {
               alignItems: "center",
               paddingVertical: 10,
               borderBottomWidth: 2,
-              borderBottomColor: isActive ? BRAND_PRIMARY6 : "transparent"
+              borderBottomColor: isActive ? BRAND_PRIMARY7 : "transparent"
             },
             testID: `exercise-detail-page-tab-${key}`,
             children: /* @__PURE__ */ jsx(
@@ -5250,7 +5721,7 @@ function ExerciseDetailPage({
                           fontSize: 15,
                           fontFamily: '"Space Grotesk", sans-serif',
                           fontWeight: "700",
-                          color: BRAND_PRIMARY6
+                          color: BRAND_PRIMARY7
                         },
                         children: `${exercise.currentE1rm} ${exercise.unit}`
                       }
@@ -5316,9 +5787,9 @@ function ExerciseDetailPage({
     }
   );
 }
-var BRAND_PRIMARY7 = "#FF7900";
+var BRAND_PRIMARY8 = getSemanticColors("dark")["brand-primary"];
 var segmentBgColors = {
-  completed: "rgba(20,184,166,0.3)",
+  completed: "rgba(46,213,115,0.3)",
   current: "rgba(255,121,0,0.5)",
   upcoming: "rgba(255,255,255,0.06)"
 };
@@ -5368,7 +5839,7 @@ function MesoSegment({ meso, isActive, onPress }) {
             },
             isActive ? {
               borderWidth: 2,
-              borderColor: BRAND_PRIMARY7,
+              borderColor: BRAND_PRIMARY8,
               transform: [{ scale: 1.02 }, { scale: pressScale }]
             } : void 0
           ],
@@ -5382,7 +5853,7 @@ function MesoSegment({ meso, isActive, onPress }) {
                 top: 0,
                 bottom: 0,
                 width: `${progress * 100}%`,
-                backgroundColor: BRAND_PRIMARY7
+                backgroundColor: BRAND_PRIMARY8
               },
               testID: `meso-segment-fill-${meso.id}`
             }
@@ -5433,9 +5904,11 @@ var colorStyles = {
   default: "bg-text-tertiary",
   primary: "bg-brand-primary",
   success: "bg-status-success",
+  live: "bg-status-live",
   error: "bg-status-error",
   warning: "bg-status-warning",
-  info: "bg-status-info"
+  info: "bg-status-info",
+  "error-vivid": "bg-status-error-vivid"
 };
 function Indicator({
   size = "sm",
@@ -5443,14 +5916,40 @@ function Indicator({
   customColor,
   glow = false,
   ring = false,
+  pulse = false,
   className,
   style,
   ...props
 }) {
+  const pulseMode = pulse === true ? "opacity" : pulse || false;
+  const colorClass = !customColor ? colorStyles[color] : void 0;
+  const colorStyle = customColor ? { backgroundColor: customColor } : void 0;
+  if (pulseMode === "ping") {
+    return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("relative", sizeStyles[size], className), style, ...props, children: [
+      /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          className: cn("absolute inset-0 rounded-full animate-ping", colorClass),
+          style: colorStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          className: cn(
+            "relative rounded-full",
+            sizeStyles[size],
+            colorClass,
+            ring && "border-2 border-background-base"
+          ),
+          style: colorStyle
+        }
+      )
+    ] });
+  }
   const dynamicStyle = {
     ...typeof style === "object" ? style : {},
-    ...customColor ? { backgroundColor: customColor } : {},
-    ...glow && !customColor ? {} : {},
+    ...colorStyle ?? {},
     ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
   };
   return /* @__PURE__ */ jsx(
@@ -5459,12 +5958,14 @@ function Indicator({
       className: cn(
         "rounded-full shrink-0",
         sizeStyles[size],
-        !customColor && colorStyles[color],
+        colorClass,
+        pulseMode === "opacity" && "animate-pulse",
         ring && "border-2 border-background-base",
-        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(20,184,166,0.6)]",
+        glow && !customColor && (color === "success" || color === "live") && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
         glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
         glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
         glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
+        glow && !customColor && color === "error-vivid" && "shadow-[0_0_6px_rgba(255,71,87,0.6)]",
         className
       ),
       style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
@@ -5542,31 +6043,32 @@ function Badge({
     }
   );
 }
+var t8 = getSemanticColors("dark");
 var statusBgColors = {
-  completed: "rgba(20,184,166,0.15)",
+  completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
   next: "transparent",
   upcoming: "#1C1C1C",
   missed: "rgba(209,67,67,0.1)",
-  deload: "rgba(147,51,234,0.15)"
+  deload: "rgba(186,41,150,0.15)"
 };
 var statusBorderStyles = {
-  completed: { borderWidth: 1, borderColor: "rgba(20,184,166,0.3)" },
+  completed: { borderWidth: 1, borderColor: "rgba(46,213,115,0.3)" },
   current: { borderWidth: 1, borderColor: "rgba(255,121,0,0.3)" },
   next: { borderWidth: 1, borderColor: "rgba(255,121,0,0.4)" },
   upcoming: { borderWidth: 1, borderColor: "#1F1F1F" },
   missed: { borderWidth: 1, borderColor: "rgba(209,67,67,0.25)" },
-  deload: { borderWidth: 1, borderColor: "rgba(147,51,234,0.3)" }
+  deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: "#14B8A6",
-  current: "#FF7900",
-  next: "#FF7900",
+  completed: t8["status-success"],
+  current: t8["brand-primary"],
+  next: t8["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
-  deload: "#9333ea"
+  deload: WORKOUT_PILL_DELOAD
 };
-function usePulse(enabled) {
+function usePulse2(enabled) {
   const [opacity] = react.useState(() => new reactNative.Animated.Value(1));
   react.useEffect(() => {
     if (!enabled) {
@@ -5604,7 +6106,7 @@ function WorkoutPill({
   ...props
 }) {
   const shouldPulse = pulse ?? status === "current";
-  const pulseOpacity = usePulse(shouldPulse);
+  const pulseOpacity = usePulse2(shouldPulse);
   const isCompleted = status === "completed";
   const isMissed = status === "missed";
   const pill = /* @__PURE__ */ jsx(
@@ -5694,23 +6196,24 @@ function WorkoutPill({
   }
   return pill;
 }
+var t9 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
 var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
 var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
 var ZONE = {
-  building: "#14B8A6",
-  // teal   — below target ramp-up
-  approaching: "#FFB020",
-  // amber  — nearing target
-  target: "#FF7900",
-  // brand  — exactly at target
-  over1: "#D14343",
-  // red    — mild over-target
-  over2: "#A62626",
-  // deep red — moderate over-target
-  over3: "#7A1C1C"
-  // darkest red — severe over-target
+  building: t9["status-success"],
+  // below target ramp-up
+  approaching: t9["status-warning"],
+  // nearing target
+  target: t9["brand-primary"],
+  // exactly at target
+  over1: t9["status-error"],
+  // mild over-target
+  over2: WORKOUT_TOKENS.intensity.over2,
+  // moderate over-target
+  over3: WORKOUT_TOKENS.intensity.over3
+  // severe over-target
 };
 var BULGE_SIZE = { 1: 8, 2: 10, 3: 11 };
 function zoneForPct(pct) {
@@ -5868,7 +6371,7 @@ function IntensityBar({
 }
 
 // src/components/custom/Workout/WeekRow.tsx
-var BRAND_PRIMARY8 = "#FF7900";
+var BRAND_PRIMARY9 = getSemanticColors("dark")["brand-primary"];
 function WeekRow({
   weekNumber,
   totalWeeks,
@@ -5888,12 +6391,12 @@ function WeekRow({
     gap: 12
   };
   if (isDeload) {
-    rowStyle.backgroundColor = "rgba(147,51,234,0.06)";
+    rowStyle.backgroundColor = "rgba(186,41,150,0.06)";
   }
   if (isCurrent) {
     rowStyle.backgroundColor = "rgba(255,121,0,0.04)";
     rowStyle.borderLeftWidth = 2;
-    rowStyle.borderLeftColor = BRAND_PRIMARY8;
+    rowStyle.borderLeftColor = BRAND_PRIMARY9;
   }
   return /* @__PURE__ */ jsxs(
     reactNative.View,
@@ -5917,7 +6420,7 @@ function WeekRow({
                     width: 6,
                     height: 6,
                     borderRadius: 3,
-                    backgroundColor: BRAND_PRIMARY8
+                    backgroundColor: BRAND_PRIMARY9
                   },
                   accessibilityElementsHidden: true,
                   testID: "week-row-current-dot"
@@ -5931,7 +6434,7 @@ function WeekRow({
                     fontSize: 13,
                     fontWeight: "700",
                     fontFamily: "Inter, sans-serif",
-                    color: isCurrent ? BRAND_PRIMARY8 : void 0
+                    color: isCurrent ? BRAND_PRIMARY9 : void 0
                   },
                   accessibilityElementsHidden: true,
                   children: `W${weekNumber}`
@@ -5972,11 +6475,11 @@ function WeekRow({
 }
 
 // src/components/custom/Workout/MesoCard.tsx
-var BRAND_PRIMARY9 = "#FF7900";
-var BRAND_PRIMARY_DARK2 = "#C45E00";
-var BRAND_PRIMARY_LIGHT2 = "#FFB066";
+var BRAND_PRIMARY10 = getSemanticColors("dark")["brand-primary"];
+var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
+var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
 var BORDER_DEFAULT = "#1F1F1F";
-var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY9, BRAND_PRIMARY_LIGHT2];
+var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
   const opacity = 0.12 + clamped / 100 * 0.78;
@@ -6011,7 +6514,7 @@ function MesoCard({
   }, [highlighted, highlight]);
   const borderColor = highlight.interpolate({
     inputRange: [0, 1],
-    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY9]
+    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY10]
   });
   const header = /* @__PURE__ */ jsxs(reactNative.View, { style: { paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }, testID: "meso-card-body", children: [
     /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 8 }, testID: "meso-card-header", children: [
@@ -6071,7 +6574,7 @@ function MesoCard({
     {
       variant: "outline",
       elevation: 2,
-      borderColor: highlighted ? BRAND_PRIMARY9 : BORDER_DEFAULT,
+      borderColor: highlighted ? BRAND_PRIMARY10 : BORDER_DEFAULT,
       className,
       style: [
         { borderColor },
@@ -6128,12 +6631,13 @@ function MesoCard({
     }
   ) });
 }
+var t10 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: "#406D87",
-  ontrack: "#14B8A6",
-  target: "#FF7900",
-  over: "#D14343"
+  behind: t10["brand-secondary"],
+  ontrack: t10["status-success"],
+  target: t10["brand-primary"],
+  over: t10["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -6207,9 +6711,10 @@ function MuscleGroupChip({
 }
 
 // src/components/custom/Workout/WorkoutCard.tsx
+var t11 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: "#14B8A6",
-  brandPrimary: "#FF7900",
+  statusSuccess: t11["status-success"],
+  brandPrimary: t11["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -6353,7 +6858,7 @@ function WorkoutCard({
 }
 
 // src/components/custom/Workout/ProgramPlanningPage.tsx
-var BRAND_PRIMARY10 = "#FF7900";
+var BRAND_PRIMARY11 = getSemanticColors("dark")["brand-primary"];
 var WORKOUT_PILL_STATUS = {
   completed: "completed",
   today: "current",
@@ -6421,7 +6926,7 @@ function Breadcrumbs({ crumbs, onNavigate }) {
                     fontSize: 12,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: isLast ? "700" : "500",
-                    color: isLast ? void 0 : BRAND_PRIMARY10
+                    color: isLast ? void 0 : BRAND_PRIMARY11
                   },
                   children: crumb.label
                 }
@@ -6493,8 +6998,8 @@ function WeekLevel({ week, onSelectWorkout }) {
 function WorkoutLevel({ workout, expandedExercise, onToggleExercise }) {
   const exercises = workout.exercises.map((exercise, index) => ({
     ...exercise,
-    state: exercise.state === "upcoming" ? exercise.state : index === expandedExercise ? "expanded" : "collapsed",
-    onToggle: () => onToggleExercise(index)
+    expanded: index === expandedExercise,
+    onExpandedChange: () => onToggleExercise(index)
   }));
   return /* @__PURE__ */ jsx(reactNative.View, { testID: "program-planning-page-workout-level", children: /* @__PURE__ */ jsx(
     WorkoutCard,
@@ -6637,7 +7142,7 @@ exports.findMeso = findMeso;
 exports.findWeek = findWeek;
 exports.findWorkout = findWorkout;
 exports.groupExercises = groupExercises;
-exports.statusToCardState = statusToCardState;
+exports.isUpcomingExercise = isUpcomingExercise;
 exports.summarizeVbt = summarizeVbt;
 exports.toActiveCardProps = toActiveCardProps;
 exports.toExerciseCardProps = toExerciseCardProps;