@titan-design/react-ui 0.10.0 → 0.12.0

package/dist/pages.mjs

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, Fragment as Fragment$1, useSyncExternalStore, useCallback } from 'react';
+import { createContext, useState, useMemo, useEffect, Fragment as Fragment$1, useSyncExternalStore, useContext, useCallback } from 'react';
 import { Easing, Platform, View, Text, TextInput, Pressable, Animated, ScrollView } from 'react-native';
 import { Fragment, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
@@ -8,54 +8,37 @@ import { twMerge } from 'tailwind-merge';
 
 // 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: {
-    0: "#6E6E6E",
-    100: "#4C4C4C",
-    200: "#3C3C3C",
-    300: "#2C2C2C",
-    400: "#1F1F1F",
-    500: "#1C1C1C"},
-  // Pure colors
   white: "#FFFFFF"};
-var surfaceRampDark = {
-  inset: "#13100D",
-  // L*4.5  — sub-shell well / pressed
-  background: "#1C1916",
-  // L*9    — shell / frame
-  base: "#252321",
-  // L*13.5 — main content plane
-  elevated: "#2C2A28",
-  // L*17   — nav / rail
-  raised: "#31302F",
-  // L*20   — cards
-  overlay: "#373635"
-  // L*22.5 — hero / popover
+var greyRamp = {
+  50: "#F9F6F3",
+  //  L*97.0  W6
+  100: "#EDEAE7",
+  // L*92.8  W6
+  200: "#D4D1CE",
+  // L*75.7  W6
+  400: "#A29F9D",
+  // L*65.7  W5
+  500: "#888684",
+  // L*56.0  W4
+  600: "#72716F",
+  // L*47.7  W3
+  700: "#5A5958",
+  // L*37.9  W2
+  800: "#424140",
+  // L*27.6  W2  — generated bridge
+  850: "#373635",
+  // L*22.7  W2  — surface overlay
+  875: "#31302F",
+  // L*19.9  W2  — surface raised
+  900: "#2C2A28",
+  // L*17.2  W4  — surface elevated
+  925: "#252321",
+  // L*13.9  W4  — surface base
+  950: "#1C1916",
+  // L*9.0   W6  — background base / shell
+  975: "#100D0A"
+  // L*3.8   W6  — background frame / bezel
 };
-var backgroundFrameDark = "#100D0A";
 var primitiveRamps = {
   red: {
     50: "#FFF4F4",
@@ -98,9 +81,11 @@ var primitiveRamps = {
   blue: {
     50: "#EFF8FF",
     300: "#78C2FF",
+    400: "#3CA8FF",
     500: "#2196F3",
     // pin
-    600: "#1072CB"},
+    600: "#1072CB",
+    700: "#135AA8"},
   magenta: {
     400: "#ED69C3",
     600: "#BA2996"}
@@ -180,275 +165,916 @@ var WORKOUT_TOKENS = {
     fill: "#3A3A3A"
   }};
 
-// src/utils/workout-format.ts
-function roundRpe(rpe) {
-  return Math.round(rpe * 2) / 2;
-}
-function roundWeight(weight) {
-  return Math.round(weight);
-}
-function formatVelocity(velocity) {
-  return velocity.toFixed(2);
-}
-function roundTempo(tempo) {
-  return tempo.map((v) => Math.round(v * 10) / 10);
-}
-function wrapJsx(fn) {
-  return function(type, props, ...rest) {
-    if (props && typeof props.className === "string" && props.className) {
-      const cn2 = props.className;
-      const cssStyle = { $$css: true, [cn2]: cn2 };
-      const existing = props.style;
-      props = {
-        ...props,
-        style: existing ? [cssStyle, existing] : cssStyle
-      };
-      delete props.className;
-    }
-    return fn(type, props, ...rest);
-  };
+// 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": primitiveRamps.red[600],
+  // vivid alert red
+  "status-error-vivid-light": primitiveRamps.red[500],
+  "status-error-vivid-dark": primitiveRamps.red[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": greyRamp[600],
+  // 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": greyRamp[400],
+  "text-disabled": "rgba(55, 65, 81, 0.48)",
+  "text-inverse": primitiveColors.white,
+  "text-link": primitiveRamps.blue[600],
+  "text-link-hover": primitiveRamps.blue[700],
+  // Surface colors (surface-*) - for elevated containers
+  "surface-base": primitiveColors.white,
+  "surface-elevated": greyRamp[50],
+  // slightly off-white for elevated cards
+  "surface-raised": greyRamp[100],
+  // light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": greyRamp[50],
+  // Input field background (filled variant)
+  // Background colors (background-*)
+  "background-base": "#EBEBEB",
+  "background-default": primitiveColors.white,
+  "background-subtle": greyRamp[50],
+  // Frame/bezel chrome — top bar + side nav shell, one step below
+  // `background-base`. Placeholder pairing for light mode, which is deferred.
+  "background-frame": greyRamp[400],
+  // Border colors (border-*)
+  "border-prominent": greyRamp[400],
+  // high-visibility divider
+  "border-focus": primitiveRamps.blue[600],
+  "border-input": greyRamp[200],
+  // Input field border
+  "border-input-hover": greyRamp[400],
+  // Input field border on hover
+  "border-input-focus": primitiveRamps.blue[600],
+  // Input field border on focus
+  "border-input-error": primitiveRamps.red[600],
+  // Input field border on error
+  // Alpha hairline separators (surface-independent — composite toward black on
+  // light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
+  "hairline-subtle": "rgba(0, 0, 0, 0.06)",
+  "hairline-default": "rgba(0, 0, 0, 0.09)",
+  "hairline-strong": "rgba(0, 0, 0, 0.14)",
+  // 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": greyRamp[600],
+  "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": primitiveRamps.red[600],
+  "status-error-vivid-light": primitiveRamps.red[500],
+  "status-error-vivid-dark": primitiveRamps.red[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": greyRamp[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": greyRamp[50],
+  "text-secondary": greyRamp[400],
+  // Deliberately ONE step lighter than the L*-nearest match (`greyRamp[600]`).
+  // The colour this replaced failed WCAG large-text outright on the three
+  // lightest planes — 2.96 / 2.72 / 2.49 against elevated / raised / overlay —
+  // and `600` carried that failure forward almost exactly (2.93 / 2.70 / 2.47).
+  // `500` clears 3:1 everywhere (3.32–5.34). Contrast beats colour fidelity for
+  // text roles; borders and surfaces still use strict L*-nearest. See
+  // semantic-contrast.test.ts, which fails if this is moved back down.
+  "text-tertiary": greyRamp[500],
+  "text-disabled": "rgba(255, 255, 255, 0.38)",
+  "text-inverse": greyRamp[950],
+  "text-link": "#828DF8",
+  "text-link-hover": primitiveRamps.blue[400],
+  // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
+  // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
+  // `surfaceRampDark` in primitives.ts for the full derivation note. `surface-overlay`
+  // and `surface-elevated` are distinct (were both #191919 pre-S-1); `surface-input`
+  // tracks one plane above `surface-base`, same relative position as before the remap.
+  // `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
+  // so it takes the ramp's shell role. The deepest plane is `background-frame`,
+  // which is also the `SurfaceLevel` floor a pressed surface clamps at.
+  "surface-base": greyRamp[925],
+  // main surface        (#252321, L*13.9)
+  "surface-elevated": greyRamp[900],
+  // elevated surface     (#2C2A28, L*17.2 — nav/rail)
+  "surface-raised": greyRamp[875],
+  // raised surface       (#31302F, L*19.9 — cards)
+  "surface-overlay": greyRamp[850],
+  // overlay surface      (#373635, L*22.7 — hero/popover)
+  "surface-input": greyRamp[900],
+  // input surface        (#2C2A28 — one plane above base)
+  // Background colors — same ramp, the frame/shell end of it.
+  "background-base": greyRamp[950],
+  // shell                (#1C1916, L*9   — Surface level="background")
+  "background-default": greyRamp[925],
+  // main background      (#252321, L*13.9 — matches surface-base)
+  "background-subtle": greyRamp[900],
+  // subtle background    (#2C2A28, L*17.2 — matches surface-elevated)
+  // Frame/bezel chrome — the top bar + side nav shell, one step BELOW
+  // `background-base`. It used to be described as sitting OUTSIDE the ramp; it
+  // is simply the ramp's last step now, and the floor `<Surface pressed>` clamps at.
+  "background-frame": greyRamp[975],
+  // frame / bezel        (#100D0A, L*3.8)
+  // Border colors — solid dark borders are RETIRED (TD-07.14). Not a preference — a structural
+  // consequence of one ramp. Every step from 850 to 975 is now a surface plane,
+  // so a solid border dark enough to read as a border necessarily equals some
+  // plane's fill, which is exactly the collision `surface.contract.test.ts` R2
+  // forbids. The only non-plane steps left in that band are 800 and 700, and
+  // borders there jump from L*~10-25 to L*~28-38 — a restyle, not a migration.
+  //
+  // So separation moves to the alpha hairlines, which dark mode already called
+  // "the primary separation cue". Being alpha, they composite against whatever
+  // plane they land on and cannot collide with any of them — the problem stops
+  // existing rather than being re-solved per plane. The three solid tokens were
+  // deleted outright; consumers point at the `hairline-*` family below.
+  //
+  // `border-prominent` stays SOLID: it is the one border meant to be seen
+  // outright (4 call sites, high-visibility dividers), and grey-800 is not a
+  // plane, so it keeps its job without collision.
+  "border-prominent": greyRamp[800],
+  // high-visibility divider
+  "border-focus": "#828DF8",
+  "border-input": greyRamp[700],
+  "border-input-hover": greyRamp[600],
+  "border-input-focus": "#828DF8",
+  "border-input-error": primitiveRamps.red[500],
+  // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
+  // normalizing: composites toward white by ~the same amount on ANY plane, so
+  // one family works at every elevation instead of per-surface border tokens.
+  // Shadows are demoted to floating-overlay use only (not shipped as a fill
+  // separator here — see elevation.ts, follow-up S-4).
+  //
+  // RETUNED on the wall (VW-99, S-6). The original .06/.09/.14 were set at a
+  // desk. On the panel at ~3 m `subtle` rendered but was indiscernible, and
+  // `default` — the load-bearing one, with no solid-border fallback since
+  // TD-07.14 — went weak on the lightest plane. `strong` read cleanly with room
+  // to spare, which is what made raising the whole family viable.
+  //
+  // Each tier steps up onto the next MEASURED-GOOD rung rather than an
+  // interpolated one: the new `subtle` is the old `default`, and the new
+  // `default` is the old `strong` — a value just confirmed legible on all four
+  // planes. Spacing goes 1 : 1.56 : 2.33, against the original 1 : 1.5 : 2.33.
+  //
+  // RUN 2 (VW-99): all three tiers were seen on all four planes — the retune
+  // worked — but `subtle` was still "a bit hard to read", so the whole family
+  // took a further +.01. That is a comfort margin on a passing row, not a fix
+  // for a failing one, which is why it is a flat offset: the 1 : 1.56 : 2.33
+  // spacing that the run validated is preserved rather than re-derived.
+  //
+  // Keep these to TWO decimals. react-native-web quantises alpha to 8 bits, so
+  // a 3-decimal value silently rounds on the way to the DOM (.135 renders as
+  // .13) — the token would say one thing and paint another.
+  //
+  // DARK ONLY. The light family above composites toward BLACK on light planes,
+  // which this run says nothing about — do not mirror these numbers into it
+  // without its own verification.
+  "hairline-subtle": "rgba(255, 255, 255, 0.10)",
+  "hairline-default": "rgba(255, 255, 255, 0.15)",
+  "hairline-strong": "rgba(255, 255, 255, 0.22)",
+  // 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": "rgba(255, 255, 255, 0.09)",
+  // Avatar default
+  "avatar-background": greyRamp[700],
+  "avatar-text": primitiveColors.white
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
 }
-var jsx = wrapJsx(jsx$1);
-var jsxs = wrapJsx(jsxs$1);
 
-// 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] = useState(() => new Animated.Value(0));
-  useEffect(() => {
-    if (!active) return;
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(value, {
-          toValue: 1,
-          duration: PULSE_HALF_MS,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: false
-        }),
-        Animated.timing(value, {
-          toValue: 0,
-          duration: PULSE_HALF_MS,
-          easing: Easing.inOut(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(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(
-        View,
-        {
-          style: {
-            flex: seg.weight ?? 1,
-            minWidth: 0,
-            height: "100%",
-            marginLeft: seg.leadingGap,
-            borderRadius: radius,
-            overflow: "hidden"
-          },
-          children: seg.pulse ? /* @__PURE__ */ jsx(
-            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(View, { style: fillStyle, accessibilityElementsHidden: true, testID })
-        },
-        i
-      );
-    }),
-    marker ? /* @__PURE__ */ jsx(
-      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/theme/color-utils.ts
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  let r, g, b;
+  if (cleaned.length === 3) {
+    r = parseInt(cleaned[0] + cleaned[0], 16);
+    g = parseInt(cleaned[1] + cleaned[1], 16);
+    b = parseInt(cleaned[2] + cleaned[2], 16);
+  } else if (cleaned.length === 6) {
+    r = parseInt(cleaned.slice(0, 2), 16);
+    g = parseInt(cleaned.slice(2, 4), 16);
+    b = parseInt(cleaned.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+  return { r, g, b };
 }
-
-// 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 rgbToHsv(r, g, b) {
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  const delta = max - min;
+  const v = max;
+  const s = max === 0 ? 0 : delta / max;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rNorm) {
+      h = 60 * ((gNorm - bNorm) / delta % 6);
+    } else if (max === gNorm) {
+      h = 60 * ((bNorm - rNorm) / delta + 2);
+    } else {
+      h = 60 * ((rNorm - gNorm) / delta + 4);
+    }
+  }
+  if (h < 0) h += 360;
+  return { h, s, v };
 }
-function chunkedSegments(chunks, gap) {
-  return chunks.flatMap(
-    (vels, ci) => vels.map((v, ri) => ({
-      color: velocityZoneColor(v),
-      ...ci > 0 && ri === 0 ? { leadingGap: gap } : {}
-    }))
-  );
+function hsvToRgb(h, s, v) {
+  const c2 = v * s;
+  const x = c2 * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c2;
+  let rPrime, gPrime, bPrime;
+  if (h >= 0 && h < 60) {
+    rPrime = c2;
+    gPrime = x;
+    bPrime = 0;
+  } else if (h >= 60 && h < 120) {
+    rPrime = x;
+    gPrime = c2;
+    bPrime = 0;
+  } else if (h >= 120 && h < 180) {
+    rPrime = 0;
+    gPrime = c2;
+    bPrime = x;
+  } else if (h >= 180 && h < 240) {
+    rPrime = 0;
+    gPrime = x;
+    bPrime = c2;
+  } else if (h >= 240 && h < 300) {
+    rPrime = x;
+    gPrime = 0;
+    bPrime = c2;
+  } else {
+    rPrime = c2;
+    gPrime = 0;
+    bPrime = x;
+  }
+  return {
+    r: Math.round((rPrime + m) * 255),
+    g: Math.round((gPrime + m) * 255),
+    b: Math.round((bPrime + m) * 255)
+  };
 }
-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 rgbToHex(r, g, b) {
+  const toHex = (n) => {
+    const clamped = Math.max(0, Math.min(255, Math.round(n)));
+    return clamped.toString(16).padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
-function 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 lighten(hex, amount = 0.1) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+  const newV = Math.min(1, hsv.v + amount);
+  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
+  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
 }
-function setSegments(set) {
-  if (set.status === "todo") {
-    return [{ color: TODO_COLOR }];
-  }
-  if (set.status === "done") {
-    return set.velocities.map((v) => ({ color: velocityZoneColor(v) }));
+
+// src/utils/colors.ts
+function alpha(color, opacity) {
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    let r, g, b;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else {
+      return color;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
   }
-  if (set.status === "range") {
-    return rangeSegments(set.floor, set.max, set.doneVels);
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
   }
-  if (set.status === "drop") {
-    return chunkedSegments(set.subloads, NOTCH_GAP);
+  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
   }
-  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 }))];
+  return 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";
+
+// src/utils/workout-format.ts
+function roundRpe(rpe) {
+  return Math.round(rpe * 2) / 2;
 }
-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"
+function roundWeight(weight) {
+  return Math.round(weight);
+}
+function formatVelocity(velocity) {
+  return velocity.toFixed(2);
+}
+function roundTempo(tempo) {
+  return tempo.map((v) => Math.round(v * 10) / 10);
+}
+function parseHex(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
+  const rgb = [
+    parseInt(full.slice(0, 2), 16),
+    parseInt(full.slice(2, 4), 16),
+    parseInt(full.slice(4, 6), 16)
+  ];
+  return rgb.some(Number.isNaN) ? null : rgb;
+}
+function perceivedLuminance(hex) {
+  const rgb = parseHex(hex);
+  if (!rgb) return 0.5;
+  const [r, g, b] = rgb;
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+function grainOpacityForTone(baseColor) {
+  return Math.min(0.24, Math.max(0.04, 0.02 + 0.31 * perceivedLuminance(baseColor)));
+}
+function grainForTone(baseColor) {
+  const op = grainOpacityForTone(baseColor).toFixed(3);
+  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='${op}'/%3E%3C/svg%3E")`;
+}
+function barPaper(color, flip = false) {
+  return {
+    backgroundImage: grainForTone(color),
+    boxShadow: flip ? "0 -6px 16px rgba(0,0,0,0.45)" : "inset 0 1.5px 0 rgba(255,255,255,0.22), 0 6px 16px rgba(0,0,0,0.45)"
+  };
+}
+var SURFACE_LEVEL_TOKEN = {
+  frame: "background-frame",
+  background: "background-base",
+  base: "surface-base",
+  elevated: "surface-elevated",
+  raised: "surface-raised",
+  overlay: "surface-overlay"
+};
+var ON_SURFACE_TOKEN = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  tertiary: "text-tertiary"
+};
+var DEFAULT_CONTEXT = { mode: "dark", level: "base" };
+var SurfaceContext = createContext(DEFAULT_CONTEXT);
+function useSurface() {
+  return useContext(SurfaceContext);
+}
+function useSurfaceMode() {
+  return useContext(SurfaceContext).mode;
+}
+function useOnSurfaceColor(role = "primary") {
+  return getSemanticColors(useSurfaceMode())[ON_SURFACE_TOKEN[role]];
+}
+function surfaceBackground(level, mode) {
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
+}
+var ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1);
+var PEAK_OVERSHOOT = 1.12;
+function getReducedMotionPreference() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(getReducedMotionPreference);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = () => setReduced(mq.matches);
+    handler();
+    mq.addEventListener?.("change", handler);
+    return () => mq.removeEventListener?.("change", handler);
+  }, []);
+  return reduced;
+}
+function useLiveRepGrowth(active, liveRepIndex, liveVelocity, isNewPeak) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [liveGrowth] = useState(() => new Animated.Value(1));
+  useEffect(() => {
+    if (liveRepIndex == null || liveVelocity == null) return;
+    if (prefersReducedMotion) {
+      liveGrowth.setValue(1);
+      return;
     }
-  );
+    liveGrowth.setValue(0);
+    if (isNewPeak) {
+      Animated.sequence([
+        Animated.timing(liveGrowth, {
+          toValue: PEAK_OVERSHOOT,
+          duration: 220,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: false
+        }),
+        Animated.spring(liveGrowth, {
+          toValue: 1,
+          friction: 5,
+          tension: 140,
+          useNativeDriver: false
+        })
+      ]).start();
+    } else {
+      Animated.timing(liveGrowth, {
+        toValue: 1,
+        duration: 300,
+        easing: ANIMATION_EASING,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveGrowth]);
+  return liveGrowth;
 }
-
-// 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 wrapJsx(fn) {
+  return function(type, props, ...rest) {
+    if (props && typeof props.className === "string" && props.className) {
+      const cn2 = props.className;
+      const cssStyle = { $$css: true, [cn2]: cn2 };
+      const existing = props.style;
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle
+      };
+      delete props.className;
+    }
+    return fn(type, props, ...rest);
+  };
 }
-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`;
+var jsx = wrapJsx(jsx$1);
+var jsxs = wrapJsx(jsxs$1);
+
+// src/components/custom/charts/SetBarChart.tsx
+function mixHex(a, b, t12) {
+  const parse = (h) => {
+    const s = h.replace("#", "");
+    return [parseInt(s.slice(0, 2), 16), parseInt(s.slice(2, 4), 16), parseInt(s.slice(4, 6), 16)];
+  };
+  const [ar, ag, ab] = parse(a);
+  const [br, bg, bb] = parse(b);
+  const ch = (x, y) => Math.round(x + (y - x) * t12).toString(16).padStart(2, "0");
+  return `#${ch(ar, br)}${ch(ag, bg)}${ch(ab, bb)}`;
 }
-function SetStrip({ sets, height = 8, className, ...props }) {
-  return /* @__PURE__ */ jsx(
+var VARIABLE_FILL = primitiveRamps.cyan[900];
+var CONTINUE_OUTLINE = primitiveRamps.cyan[800];
+var FIXED_MAX_VALUE = 1.15;
+var PEAK_HEADROOM = 1.03;
+function scaleDenominator(scale, maxValue) {
+  return scale === "fixed" ? FIXED_MAX_VALUE : maxValue * PEAK_HEADROOM;
+}
+function valueLabelFontSize(height) {
+  return Math.round(Math.max(8, Math.min(12, height * 0.11)));
+}
+var SET_BAR_DEFAULT_HEIGHT = 220;
+var LABEL_ROW_HEIGHT = 16;
+var LABEL_GAP = 3;
+var GAP_RATIO = 0.08;
+var MIN_BAR_GAP = 2;
+var CHUNK_NOTCH_RATIO = 0.25;
+var CHUNK_NOTCH_MIN_PX = 10;
+var BAR_MAX_WIDTH = 120;
+var LABEL_MIN_BAR_WIDTH = 30;
+var DEFAULT_BAR_RADIUS = 5;
+var MIN_BAR_HEIGHT = 4;
+var FLAT_BAR_FRACTION = 0.5;
+var STUB_HEIGHT = 9;
+var REP_GAP = 2;
+function computeBarLayout(plotWidth, count, gapRatio = GAP_RATIO) {
+  const rawBarWidth = plotWidth > 0 && count > 0 ? plotWidth / (count + (count - 1) * gapRatio) : BAR_MAX_WIDTH;
+  const barWidth = Math.min(BAR_MAX_WIDTH, rawBarWidth);
+  const gap = plotWidth === 0 ? MIN_BAR_GAP : Math.max(MIN_BAR_GAP, gapRatio * barWidth);
+  return { barWidth, gap };
+}
+function isRep(slot) {
+  return slot.kind === "rep";
+}
+function repIndexByCell(cells) {
+  let count = 0;
+  return cells.map((slot) => isRep(slot) ? count++ : -1);
+}
+function SetBarChart({
+  slots,
+  colorFor,
+  height,
+  scale = "peak",
+  scaleMax,
+  orientation = "up",
+  liveRepIndex,
+  isNewPeak = false,
+  targetReps,
+  gapRatio = GAP_RATIO,
+  barRadius = DEFAULT_BAR_RADIUS,
+  cornerStyle = "top",
+  flat = false,
+  showValueLabels: showValueLabelsProp = false,
+  formatValue: formatValue2 = String,
+  todoVariant = "solid",
+  minColumns,
+  renderReference,
+  renderBarOverlay,
+  expandProgress,
+  hideBaseline = false,
+  testID,
+  testIDPrefix = "setbar",
+  accessibilityLabel: accessibilityLabel2,
+  label,
+  className,
+  viewProps = {}
+}) {
+  const targetPadded = Math.max(slots.length, targetReps ?? 0, minColumns ?? 0);
+  const cells = targetPadded > slots.length ? [
+    ...slots,
+    ...Array.from({ length: targetPadded - slots.length }, () => ({ kind: "todo" }))
+  ] : slots;
+  const repValues = cells.filter(isRep).map((s) => s.value ?? 0);
+  const best = repValues.length > 0 ? Math.max(...repValues) : 0;
+  const flip = orientation === "down";
+  const flipStyle = flip ? { transform: [{ scaleY: -1 }] } : null;
+  const placeholderColor = useOnSurfaceColor("tertiary");
+  const surface = useSurface();
+  const surfaceBg = surfaceBackground(surface.level, surface.mode);
+  const solidTodoColor = mixHex(surfaceBg, placeholderColor, 0.55);
+  const emptyColor = mixHex(surfaceBg, placeholderColor, 0.28);
+  const barCorners = cornerStyle === "all" ? { borderRadius: barRadius } : { borderTopLeftRadius: barRadius, borderTopRightRadius: barRadius };
+  const scaleDenom = scaleMax != null && scaleMax > 0 ? scaleMax * PEAK_HEADROOM : scaleDenominator(scale, best);
+  const showValueLabels = showValueLabelsProp && !flat;
+  const plotHeight = Math.max(0, height - (showValueLabels ? LABEL_ROW_HEIGHT + LABEL_GAP : 0));
+  const yOf = (value) => scaleDenom > 0 ? value / scaleDenom * plotHeight : 0;
+  const flatBarHeight = Math.max(MIN_BAR_HEIGHT, FLAT_BAR_FRACTION * plotHeight);
+  const compactBarHeight = Math.max(MIN_BAR_HEIGHT, plotHeight);
+  const valueBarHeight = (value) => scaleDenom > 0 ? Math.max(MIN_BAR_HEIGHT, Math.min(1, value / scaleDenom) * plotHeight) : MIN_BAR_HEIGHT;
+  const barHeight = (value) => flat ? compactBarHeight : valueBarHeight(value);
+  const liveValue = liveRepIndex != null && liveRepIndex < repValues.length ? repValues[liveRepIndex] : void 0;
+  const liveGrowth = useLiveRepGrowth(true, liveRepIndex, liveValue, isNewPeak);
+  const [plotW, setPlotW] = useState(0);
+  const onPlotLayout = (e) => setPlotW(e.nativeEvent.layout.width);
+  const totalCells = cells.length;
+  const { barWidth, gap } = computeBarLayout(plotW, totalCells, gapRatio);
+  const labelsCrowded = plotW > 0 && barWidth < LABEL_MIN_BAR_WIDTH;
+  const peakRepIndex = repValues.reduce((b, v, i) => v > repValues[b] ? i : b, 0);
+  const showBarLabel = (repIndex) => !labelsCrowded || repIndex === peakRepIndex || repIndex === liveRepIndex;
+  const geometry = { scaleDenom, plotHeight, yOf, best, flip };
+  const { style: externalStyle, ...restProps } = viewProps;
+  const a11y = accessibilityLabel2 != null ? { accessibilityRole: "image", accessibilityLabel: accessibilityLabel2 } : {};
+  const repIndices = repIndexByCell(cells);
+  return /* @__PURE__ */ jsxs(
     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))
+      style: [{ height, flexDirection: "row" }, externalStyle],
+      testID,
+      ...a11y,
+      ...restProps,
+      children: [
+        label ? /* @__PURE__ */ jsx(
+          ChartSideRail,
+          {
+            sections: [{ label, testID: `${testIDPrefix}-side-label` }],
+            sectionExtent: height
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            onLayout: onPlotLayout,
+            style: {
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "flex-end",
+              gap,
+              position: "relative",
+              borderBottomWidth: hideBaseline ? 0 : 2,
+              borderBottomColor: placeholderColor,
+              ...flipStyle
+            },
+            children: [
+              renderReference?.(geometry),
+              cells.map((slot, i) => {
+                const isChunkBoundary = (slot.leadingGap ?? REP_GAP) > REP_GAP;
+                const extraGap = isChunkBoundary ? Math.max(CHUNK_NOTCH_MIN_PX, CHUNK_NOTCH_RATIO * barWidth) : 0;
+                const column = {
+                  flex: 1,
+                  maxWidth: BAR_MAX_WIDTH,
+                  height: "100%",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  marginLeft: extraGap
+                };
+                if (!isRep(slot)) {
+                  return /* @__PURE__ */ jsx(View, { accessibilityElementsHidden: true, style: column, children: renderStub(
+                    slot.kind,
+                    barCorners,
+                    // Flat (compact) stubs fill the plot like the compact bars; else the fixed short stub.
+                    flat ? compactBarHeight : STUB_HEIGHT,
+                    placeholderColor,
+                    testIDPrefix,
+                    todoVariant,
+                    solidTodoColor,
+                    emptyColor
+                  ) }, i);
+                }
+                const repIndex = repIndices[i];
+                const value = slot.value ?? 0;
+                const isLive = liveRepIndex === repIndex;
+                const color = colorFor(value);
+                const barHeightStyle = expandProgress ? expandProgress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [flatBarHeight, valueBarHeight(value)]
+                }) : isLive ? liveGrowth.interpolate({ inputRange: [0, 1], outputRange: [0, barHeight(value)] }) : barHeight(value);
+                const ownLabel = showValueLabels && !renderBarOverlay && showBarLabel(repIndex);
+                const labelBottom = (expandProgress ? valueBarHeight(best) : barHeight(best)) + LABEL_GAP;
+                return /* @__PURE__ */ jsxs(View, { accessibilityElementsHidden: renderBarOverlay == null, style: column, children: [
+                  ownLabel && // All labels pin to one aligned row JUST ABOVE THE PEAK BAR (not the container top),
+                  // in the muted on-surface-secondary tone — so the row hugs the bars, no floating void.
+                  /* @__PURE__ */ jsx(
+                    Animated.View,
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: labelBottom,
+                        left: 0,
+                        right: 0,
+                        alignItems: "center",
+                        ...expandProgress ? { opacity: expandProgress } : null
+                      },
+                      pointerEvents: "none",
+                      children: /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          className: "text-text-secondary",
+                          style: [{ fontSize: valueLabelFontSize(height), fontWeight: "700" }, flipStyle],
+                          testID: `${testIDPrefix}-label-${repIndex}`,
+                          children: formatValue2(value)
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Animated.View,
+                    {
+                      style: [
+                        { width: "100%", height: barHeightStyle, backgroundColor: color },
+                        barCorners,
+                        barPaper(color, flip)
+                      ],
+                      testID: `${testIDPrefix}-bar-${repIndex}`
+                    }
+                  ),
+                  renderBarOverlay?.(repIndex, value)
+                ] }, i);
+              })
+            ]
+          }
+        )
+      ]
     }
   );
 }
+function renderStub(kind, barCorners, stubHeight, placeholderColor, testIDPrefix, todoVariant, solidTodoColor, emptyColor) {
+  const base = {
+    width: "100%",
+    height: stubHeight,
+    ...barCorners
+  };
+  if (kind === "variable") {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { ...base, backgroundColor: VARIABLE_FILL },
+        testID: `${testIDPrefix}-slot-variable`
+      }
+    );
+  }
+  if (kind === "continue") {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { ...base, borderWidth: 1, borderColor: CONTINUE_OUTLINE },
+        testID: `${testIDPrefix}-slot-continue`
+      }
+    );
+  }
+  if (kind === "empty") {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { ...base, backgroundColor: emptyColor },
+        testID: `${testIDPrefix}-slot-empty`
+      }
+    );
+  }
+  const todoStyle = todoVariant === "solid" ? { ...base, backgroundColor: solidTodoColor } : { ...base, borderWidth: 1, borderStyle: "dashed", borderColor: placeholderColor };
+  return /* @__PURE__ */ jsx(View, { style: todoStyle, testID: `${testIDPrefix}-slot-todo` });
+}
+function sideLabelFontSize(height) {
+  return Math.round(Math.max(7, Math.min(13, height * 0.06)));
+}
+var SIDE_LABEL_INITIALS_BELOW = 70;
+function sideLabelText(label, extent) {
+  if (extent >= SIDE_LABEL_INITIALS_BELOW) return label;
+  return label.trim().split(/\s+/).map((word) => word.charAt(0)).join(" ").toUpperCase();
+}
+function ChartSideRail({
+  sections,
+  sectionExtent,
+  variant = "hero"
+}) {
+  if (!sections.some((s) => s.label)) return null;
+  const isRail = variant === "rail";
+  const labelLength = Math.max(0, sectionExtent - (isRail ? 0 : 6));
+  const fontSize = isRail ? 7 : sideLabelFontSize(sectionExtent);
+  const textStyle = {
+    maxWidth: "100%",
+    textAlign: "center",
+    fontSize,
+    fontWeight: "700",
+    letterSpacing: isRail || fontSize < 10 ? 0 : 2,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsx(View, { style: { width: isRail ? 18 : 34 }, accessibilityElementsHidden: true, children: sections.map((s) => /* @__PURE__ */ jsx(
+    View,
+    {
+      style: { height: sectionExtent, alignItems: "center", justifyContent: "center" },
+      children: s.label ? /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            width: labelLength,
+            alignItems: "center",
+            transform: [{ rotate: "-90deg" }]
+          },
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "text-text-tertiary",
+              style: textStyle,
+              numberOfLines: 1,
+              testID: s.testID,
+              children: isRail ? s.label : sideLabelText(s.label, sectionExtent)
+            }
+          )
+        }
+      ) : null
+    },
+    s.testID
+  )) });
+}
 
 // src/components/custom/Workout/VelocityStrip.tsx
 var VEL_COLORS = WORKOUT_TOKENS.scale;
@@ -494,6 +1120,18 @@ function calculateMeanVelocity(velocities) {
   const sum = velocities.reduce((acc, v) => acc + v, 0);
   return sum / velocities.length;
 }
+var VL_LOSS_THRESHOLDS = [10, 20, 30];
+function getVelocityLossColor(lossPct) {
+  const [t1, t22, t32] = VL_LOSS_THRESHOLDS;
+  if (lossPct < t1) return VEL_COLORS.green;
+  if (lossPct < t22) return VEL_COLORS.yellow;
+  if (lossPct < t32) return VEL_COLORS.orange;
+  return VEL_COLORS.red;
+}
+function velocityLossForRep(velocity, best) {
+  if (best <= 0) return 0;
+  return Math.max(0, Math.round((best - velocity) / best * 100));
+}
 function classifyBand(velocity, bands) {
   for (const band of bands) {
     if (band.max === null || velocity < band.max) return band;
@@ -503,15 +1141,17 @@ function classifyBand(velocity, bands) {
 function bandColor(band) {
   return bandIdToEffortColor[band.id] ?? VEL_COLORS.green;
 }
+function makeBarColorFor(zones) {
+  const hasZones = zones != null && zones.length > 0;
+  return (v) => hasZones ? bandColor(classifyBand(v, zones)) : zoneHexMap[getVelocityZoneColor(v)];
+}
 function getLossStyle(loss) {
   if (loss > 25) return { color: VEL_COLORS.red };
   if (loss > 20) return { color: VEL_COLORS.orange };
   return null;
 }
-var REP_GAP = 2;
+var REP_GAP2 = 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":
@@ -527,7 +1167,7 @@ function chunkedRepSlots(chunks) {
   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 });
+      slots.push({ kind: "rep", velocity, leadingGap: first ? 0 : ri === 0 ? WIDE_GAP : REP_GAP2 });
     });
   });
   return slots;
@@ -541,7 +1181,7 @@ function buildSlots(set) {
         return {
           kind: done ? "rep" : "todo",
           velocity: done ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : REP_GAP
+          leadingGap: i === 0 ? 0 : REP_GAP2
         };
       });
     }
@@ -552,7 +1192,7 @@ function buildSlots(set) {
         return {
           kind,
           velocity: kind === "rep" ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : REP_GAP
+          leadingGap: i === 0 ? 0 : REP_GAP2
         };
       });
     }
@@ -560,16 +1200,16 @@ function buildSlots(set) {
       const reps = set.velocities.map((velocity, i) => ({
         kind: "rep",
         velocity,
-        leadingGap: i === 0 ? 0 : REP_GAP
+        leadingGap: i === 0 ? 0 : REP_GAP2
       }));
-      reps.push({ kind: "continue", leadingGap: reps.length === 0 ? 0 : REP_GAP });
+      reps.push({ kind: "continue", leadingGap: reps.length === 0 ? 0 : REP_GAP2 });
       return reps;
     }
     case "drop":
       return chunkedRepSlots(set.subloads);
     case "myo": {
       const slots = chunkedRepSlots([set.activation, ...set.clusters]);
-      if (set.open) slots.push({ kind: "continue", leadingGap: slots.length === 0 ? 0 : REP_GAP });
+      if (set.open) slots.push({ kind: "continue", leadingGap: slots.length === 0 ? 0 : REP_GAP2 });
       return slots;
     }
     case "cluster": {
@@ -580,7 +1220,7 @@ function buildSlots(set) {
         return {
           kind: done ? "rep" : "todo",
           velocity: done ? set.velocities[i] : void 0,
-          leadingGap: i === 0 ? 0 : boundary ? WIDE_GAP : REP_GAP
+          leadingGap: i === 0 ? 0 : boundary ? WIDE_GAP : REP_GAP2
         };
       });
     }
@@ -602,253 +1242,148 @@ function setAccessibilityLabel(set, repCount) {
       return `Velocity strip, cluster set, groups of ${set.groupSize}, ${repCount} reps`;
   }
 }
-function slotAccessibilityLabel(slot, index) {
-  switch (slot.kind) {
-    case "rep":
-      return `Rep ${index + 1}: ${formatVelocity(slot.velocity ?? 0)} meters per second`;
-    case "todo":
-      return `Rep ${index + 1}: planned`;
-    case "variable":
-      return `Rep ${index + 1}: variable`;
-    case "continue":
-      return "Keep going";
-  }
-}
-var EXPANDED_TODO_STUB_PCT = 16;
-var EXPANDED_ENCODED_PCT = 45;
 var EXPANDED_HEIGHT = 60;
-var FIXED_MAX_VELOCITY = 1.15;
-var BARE_STUB_HEIGHT = 3;
-var HERO_HEIGHT = 220;
-var HERO_LABEL_HEADROOM = 20;
-var HERO_BAR_GAP = 8;
-var HERO_BAR_MAX_WIDTH = 120;
-var HERO_LABEL_MIN_BAR_WIDTH = 30;
-var HERO_BAR_RADIUS = 5;
-var HERO_MIN_BAR_HEIGHT = 4;
-var HERO_PENDING_COLOR = primitiveColors.charcoal[100];
-var HERO_REFERENCE_COLOR = primitiveColors.charcoal[0];
-var PEAK_HEADROOM = 1.06;
-function scaleDenominator(scale, maxVelocity) {
-  return scale === "fixed" ? FIXED_MAX_VELOCITY : maxVelocity * PEAK_HEADROOM;
-}
-function bareSlotHeight(slot, height, denom) {
-  if (slot.kind !== "rep" || denom <= 0) return BARE_STUB_HEIGHT;
-  const ratio = Math.min(1, (slot.velocity ?? 0) / denom);
-  return Math.max(BARE_STUB_HEIGHT, ratio * height);
+var COMPACT_HEIGHT = 8;
+var HERO_REFERENCE_COLOR = greyRamp[600];
+function DashedReferenceLine({
+  anchor,
+  offset,
+  testID
+}) {
+  const edge = anchor === "top" ? { top: offset } : { bottom: offset };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityElementsHidden: true,
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        borderTopWidth: 1,
+        borderStyle: "dashed",
+        borderColor: HERO_REFERENCE_COLOR,
+        pointerEvents: "none",
+        ...edge
+      },
+      testID
+    }
+  );
 }
-function getReducedMotionPreference() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function usePrefersReducedMotion() {
-  const [reduced, setReduced] = useState(getReducedMotionPreference);
-  useEffect(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const handler = () => setReduced(mq.matches);
-    handler();
-    mq.addEventListener?.("change", handler);
-    return () => mq.removeEventListener?.("change", handler);
-  }, []);
-  return reduced;
-}
-var ANIMATION_DURATION = 400;
-var ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1);
-var POP_EASING = Easing.bezier(0.34, 1.56, 0.64, 1);
-function useLiveRepPop(active, liveRepIndex, liveVelocity, isNewPeak) {
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const [liveScale] = useState(() => new Animated.Value(1));
-  useEffect(() => {
-    if (!active || liveRepIndex == null || liveVelocity == null) return;
-    if (prefersReducedMotion) {
-      liveScale.setValue(1);
-      return;
-    }
-    if (isNewPeak) {
-      liveScale.setValue(1);
-      Animated.sequence([
-        Animated.timing(liveScale, {
-          toValue: 1.25,
-          duration: 150,
-          easing: Easing.out(Easing.quad),
-          useNativeDriver: true
-        }),
-        Animated.spring(liveScale, {
-          toValue: 1,
-          friction: 3,
-          tension: 140,
-          useNativeDriver: true
-        })
-      ]).start();
-    } else {
-      liveScale.setValue(0.8);
-      Animated.timing(liveScale, {
-        toValue: 1,
-        duration: 300,
-        easing: POP_EASING,
-        useNativeDriver: true
-      }).start();
-    }
-  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveScale]);
-  return liveScale;
-}
-function HeroVelocityChart({
-  doneVelocities,
-  barColorFor,
+var BAND_LABEL_FONT = "monospace";
+var VL_LABEL_MIN_PLOT = 65;
+var VL_SEMANTIC = getSemanticColors("dark");
+function VelocityLossBands({
+  best,
   scaleDenom,
-  referenceVelocity,
-  liveRepIndex,
-  isNewPeak,
-  targetReps,
-  height,
-  className,
-  viewProps
+  plotHeight,
+  flip = false
 }) {
-  const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
-  const liveScale = useLiveRepPop(true, liveRepIndex, liveVelocity, isNewPeak);
-  const [plotW, setPlotW] = useState(0);
-  const onPlotLayout = (e) => setPlotW(e.nativeEvent.layout.width);
-  const plotHeight = Math.max(0, height - HERO_LABEL_HEADROOM);
-  const barHeight = (velocity) => scaleDenom > 0 ? Math.max(HERO_MIN_BAR_HEIGHT, Math.min(1, velocity / scaleDenom) * plotHeight) : HERO_MIN_BAR_HEIGHT;
-  const pendingCount = Math.max(0, (targetReps ?? 0) - doneVelocities.length);
-  const referencePx = referenceVelocity > 0 && scaleDenom > 0 ? Math.min(plotHeight, referenceVelocity / scaleDenom * plotHeight) : 0;
-  const totalSlots = doneVelocities.length + pendingCount;
-  const barWidth = plotW > 0 && totalSlots > 0 ? Math.min(HERO_BAR_MAX_WIDTH, (plotW - HERO_BAR_GAP * (totalSlots - 1)) / totalSlots) : HERO_BAR_MAX_WIDTH;
-  const labelsCrowded = plotW > 0 && barWidth < HERO_LABEL_MIN_BAR_WIDTH;
-  const heroGap = plotW === 0 ? HERO_BAR_GAP : barWidth < 16 ? 2 : barWidth < 28 ? 4 : HERO_BAR_GAP;
-  const peakIndex = doneVelocities.reduce(
-    (best, v, i) => v > doneVelocities[best] ? i : best,
-    0
+  if (best <= 0 || scaleDenom <= 0 || plotHeight <= 0) return null;
+  const yOf = (v) => v / scaleDenom * plotHeight;
+  const vl20 = best * 0.8;
+  const vl30 = best * 0.7;
+  const vlFont = Math.round(Math.max(7, Math.min(9, plotHeight * 0.05)));
+  const showLabels = plotHeight >= VL_LABEL_MIN_PLOT;
+  const band = (loV, hiV, color) => /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: yOf(loV),
+        height: Math.max(0, yOf(hiV) - yOf(loV)),
+        backgroundColor: color
+      }
+    }
   );
-  const showBarLabel = (i) => !labelsCrowded || i === peakIndex || i === liveRepIndex;
-  const repCount = doneVelocities.length;
-  const total = Math.max(repCount, targetReps ?? repCount);
-  const label = referenceVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(referenceVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
-  const { style: externalStyle, ...restProps } = viewProps;
-  return /* @__PURE__ */ jsx(
+  const threshold = (v, color, label) => /* @__PURE__ */ jsxs(
     View,
     {
-      className,
-      style: [{ height }, externalStyle],
-      accessibilityRole: "image",
-      accessibilityLabel: label,
-      testID: "velocity-strip-hero",
-      ...restProps,
-      children: /* @__PURE__ */ jsxs(
-        View,
-        {
-          onLayout: onPlotLayout,
-          style: {
-            flex: 1,
-            flexDirection: "row",
-            alignItems: "flex-end",
-            gap: heroGap,
-            position: "relative",
-            borderBottomWidth: 2,
-            borderBottomColor: HERO_PENDING_COLOR
-          },
-          children: [
-            referencePx > 0 && /* @__PURE__ */ jsx(
-              View,
-              {
-                accessibilityElementsHidden: true,
-                style: {
-                  position: "absolute",
-                  left: 0,
-                  right: 0,
-                  bottom: referencePx,
-                  borderTopWidth: 1,
-                  borderStyle: "dashed",
-                  borderColor: HERO_REFERENCE_COLOR,
-                  pointerEvents: "none"
-                },
-                testID: "velocity-hero-reference"
-              }
-            ),
-            doneVelocities.map((velocity, i) => {
-              const isLive = liveRepIndex === i;
-              return /* @__PURE__ */ jsxs(
-                View,
-                {
-                  accessibilityElementsHidden: true,
-                  style: {
-                    flex: 1,
-                    maxWidth: HERO_BAR_MAX_WIDTH,
-                    height: "100%",
-                    alignItems: "center",
-                    justifyContent: "flex-end"
-                  },
-                  children: [
-                    showBarLabel(i) && /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        className: "text-text-primary",
-                        style: { fontSize: 12, fontWeight: "800", marginBottom: 4 },
-                        testID: `velocity-label-${i}`,
-                        children: formatVelocity(velocity)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Animated.View,
-                      {
-                        style: [
-                          {
-                            width: "100%",
-                            height: barHeight(velocity),
-                            borderTopLeftRadius: HERO_BAR_RADIUS,
-                            borderTopRightRadius: HERO_BAR_RADIUS,
-                            backgroundColor: barColorFor(velocity)
-                          },
-                          isLive ? { transform: [{ scale: liveScale }] } : null
-                        ],
-                        testID: `velocity-bar-${i}`
-                      }
-                    )
-                  ]
-                },
-                i
-              );
-            }),
-            Array.from({ length: pendingCount }, (_, i) => /* @__PURE__ */ jsx(
-              View,
-              {
-                accessibilityElementsHidden: true,
-                style: {
-                  flex: 1,
-                  maxWidth: HERO_BAR_MAX_WIDTH,
-                  height: "100%",
-                  alignItems: "center",
-                  justifyContent: "flex-end"
-                },
-                children: /* @__PURE__ */ jsx(
-                  View,
-                  {
-                    style: {
-                      width: "100%",
-                      height: HERO_MIN_BAR_HEIGHT * 3,
-                      borderWidth: 1,
-                      borderStyle: "dashed",
-                      borderColor: HERO_PENDING_COLOR,
-                      borderTopLeftRadius: HERO_BAR_RADIUS,
-                      borderTopRightRadius: HERO_BAR_RADIUS
-                    },
-                    testID: "velocity-slot-todo"
-                  }
-                )
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: yOf(v),
+        // Collapse to zero height so the dashed border lands EXACTLY on `yOf(v)` — the
+        // band edge — instead of floating up half a text-row (the label then centres on
+        // the line, breaking it). Matches DashedReferenceLine's bare-border anchoring.
+        height: 0,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(View, { style: { flex: 9, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } }),
+        showLabels ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                marginHorizontal: 6,
+                fontSize: vlFont,
+                fontWeight: "800",
+                fontFamily: BAND_LABEL_FONT,
+                color,
+                ...flip ? { transform: [{ scaleY: -1 }] } : null
               },
-              `pending-${i}`
-            ))
-          ]
-        }
-      )
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { style: { flex: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: color } })
+        ] }) : null
+      ]
     }
   );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityElementsHidden: true,
+      pointerEvents: "none",
+      style: { position: "absolute", left: 0, right: 0, bottom: 0, top: 0 },
+      testID: "velocity-loss-bands",
+      children: [
+        band(0, vl30, alpha(VL_SEMANTIC["status-error"], 0.09)),
+        band(vl30, vl20, alpha(VL_SEMANTIC["status-warning"], 0.08)),
+        threshold(vl20, alpha(VL_SEMANTIC["status-warning"], 0.75), "VL 20%"),
+        threshold(vl30, alpha(VL_SEMANTIC["status-error"], 0.75), "VL 30%")
+      ]
+    }
+  );
+}
+function velocityReferenceOverlay(g, showLossBands) {
+  const referencePx = g.best > 0 && g.scaleDenom > 0 ? Math.min(g.plotHeight, g.yOf(g.best)) : 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showLossBands && /* @__PURE__ */ jsx(
+      VelocityLossBands,
+      {
+        best: g.best,
+        scaleDenom: g.scaleDenom,
+        plotHeight: g.plotHeight,
+        flip: g.flip
+      }
+    ),
+    referencePx > 0 && /* @__PURE__ */ jsx(
+      DashedReferenceLine,
+      {
+        anchor: "bottom",
+        offset: referencePx,
+        testID: "velocity-hero-reference"
+      }
+    )
+  ] });
 }
+var ANIMATION_DURATION = 400;
 function VelocityStrip({
   velocities,
   set,
   zones,
+  barColor = "loss",
+  showLossBands,
+  orientation = "up",
+  scaleMax,
+  hideBaseline,
+  columnSlots,
+  label,
   liveRepIndex,
   expanded = true,
   onToggle,
@@ -862,51 +1397,29 @@ function VelocityStrip({
   className,
   ...props
 }) {
+  const lossBandsOn = showLossBands ?? barColor === "loss";
   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 zoneColorFor = makeBarColorFor(zones);
+  const barColorFor = (v) => barColor === "loss" ? getVelocityLossColor(velocityLossForRep(v, maxVelocity)) : zoneColorFor(v);
   const meanZone = hasZones ? classifyBand(meanVelocity, zones)?.label ?? "" : getVelocityZoneName(meanVelocity);
-  const [heightAnim] = useState(() => new Animated.Value(expanded ? height : 3));
-  const [labelOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0));
+  const [expandProgress] = useState(() => new Animated.Value(expanded ? 1 : 0));
   const [infoOpacity] = useState(() => new Animated.Value(expanded ? 1 : 0));
   const liveVelocity = liveRepIndex != null ? doneVelocities[liveRepIndex] : void 0;
   const isNewPeak = liveVelocity != null && maxVelocity > 0 && liveVelocity === maxVelocity;
-  const liveScale = useLiveRepPop(
-    variant === "expanded" && framed,
-    liveRepIndex,
-    liveVelocity,
-    isNewPeak
-  );
   useEffect(() => {
     if (variant !== "expanded" || !framed) return;
     Animated.parallel([
-      Animated.timing(heightAnim, {
-        toValue: expanded ? height : 3,
+      Animated.timing(expandProgress, {
+        toValue: expanded ? 1 : 0,
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
         useNativeDriver: false
       }),
-      Animated.timing(labelOpacity, {
-        toValue: expanded ? 1 : 0,
-        duration: 300,
-        delay: expanded ? 150 : 0,
-        useNativeDriver: false
-      }),
       Animated.timing(infoOpacity, {
         toValue: expanded ? 1 : 0,
         duration: 300,
@@ -914,250 +1427,176 @@ function VelocityStrip({
         useNativeDriver: false
       })
     ]).start();
-  }, [expanded, variant, framed, height, heightAnim, labelOpacity, infoOpacity]);
+  }, [expanded, variant, framed, expandProgress, infoOpacity]);
   if (set == null && velocities == null) return null;
   const repCount = doneVelocities.length;
   const miniLabel = set ? setAccessibilityLabel(set, repCount) : `Velocity strip, ${repCount} reps`;
   if (variant === "hero") {
-    const heroHeight = height === EXPANDED_HEIGHT ? HERO_HEIGHT : height;
+    const heroHeight = height === EXPANDED_HEIGHT && columnSlots == null ? SET_BAR_DEFAULT_HEIGHT : height;
+    const heroSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
+    const total = Math.max(repCount, targetReps ?? repCount);
+    const heroLabel = maxVelocity > 0 ? `Velocity chart, ${repCount} of ${total} reps, best ${formatVelocity(maxVelocity)} meters per second` : `Velocity chart, ${repCount} of ${total} reps`;
     return /* @__PURE__ */ jsx(
-      HeroVelocityChart,
+      SetBarChart,
       {
-        doneVelocities,
-        barColorFor,
-        scaleDenom,
-        referenceVelocity: maxVelocity,
+        slots: heroSlots,
+        colorFor: barColorFor,
+        height: heroHeight,
+        scale,
+        scaleMax,
+        orientation,
         liveRepIndex,
         isNewPeak,
-        targetReps,
-        height: heroHeight,
+        targetReps: set || columnSlots ? void 0 : targetReps,
+        label,
+        showValueLabels: true,
+        formatValue: formatVelocity,
+        renderReference: (g) => velocityReferenceOverlay(g, lossBandsOn),
+        hideBaseline: true,
+        testID: "velocity-strip-hero",
+        testIDPrefix: "velocity",
+        accessibilityLabel: heroLabel,
         className,
         viewProps: props
       }
     );
   }
-  if (variant === "mini") {
-    const { style: externalStyle, ...restProps } = props;
+  if (variant === "compact") {
+    const compactSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
+    const compactHeight = height === EXPANDED_HEIGHT ? COMPACT_HEIGHT : height;
     return /* @__PURE__ */ jsx(
-      View,
+      SetBarChart,
       {
-        className,
-        style: [
-          { flexDirection: "row", height: 3, gap: REP_GAP, borderRadius: 2, overflow: "hidden" },
-          externalStyle
-        ],
-        accessibilityRole: "image",
+        slots: compactSlots,
+        colorFor: barColorFor,
+        height: compactHeight,
+        scale,
+        scaleMax,
+        orientation,
+        flat: true,
+        barRadius: 2,
+        cornerStyle: "all",
+        targetReps: set || columnSlots ? void 0 : targetReps,
+        label,
+        hideBaseline: true,
+        testID: "velocity-strip-compact",
+        testIDPrefix: "velocity",
         accessibilityLabel: miniLabel,
-        testID: "velocity-strip-mini",
-        ...restProps,
-        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
-          View,
-          {
-            style: {
-              flex: 1,
-              backgroundColor: slotColor(slot),
-              borderRadius: 1,
-              minWidth: 4,
-              height: "100%",
-              // The container's uniform 2px gap covers rep spacing; a wide slot adds
-              // only the EXTRA (WIDE_GAP − REP_GAP) so the notch totals WIDE_GAP.
-              marginLeft: Math.max(0, slot.leadingGap - REP_GAP),
-              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
-            },
-            accessibilityElementsHidden: true,
-            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
-          },
-          i
-        ))
+        className,
+        viewProps: props
       }
     );
   }
   if (!framed) {
-    const { style: externalStyle, ...restProps } = props;
+    const spotlightSlots = columnSlots ?? (set ? buildSlots(set).map((s) => ({
+      kind: s.kind,
+      value: s.velocity,
+      leadingGap: s.leadingGap
+    })) : doneVelocities.map((v) => ({ kind: "rep", value: v })));
     return /* @__PURE__ */ jsx(
-      View,
+      SetBarChart,
       {
-        className,
-        style: [
-          { flexDirection: "row", height, gap: REP_GAP, alignItems: "flex-end" },
-          externalStyle
-        ],
-        accessibilityRole: "image",
+        slots: spotlightSlots,
+        colorFor: barColorFor,
+        height,
+        scale,
+        scaleMax,
+        orientation,
+        liveRepIndex,
+        isNewPeak,
+        barRadius: 2,
+        cornerStyle: "top",
+        targetReps: set ? void 0 : targetReps,
+        label,
+        hideBaseline: true,
+        testID: "velocity-strip-spotlight",
+        testIDPrefix: "velocity",
         accessibilityLabel: miniLabel,
-        testID: "velocity-strip-compact",
-        ...restProps,
-        children: slots.map((slot, i) => /* @__PURE__ */ jsx(
-          View,
-          {
-            style: {
-              flex: 1,
-              minWidth: 4,
-              height: bareSlotHeight(slot, height, scaleDenom),
-              // Top-rounded to match the framed chart's bars (the "rounded tops from
-              // the numbers one"); square bottoms since bars sit on the baseline.
-              borderTopLeftRadius: 2,
-              borderTopRightRadius: 2,
-              backgroundColor: slotColor(slot),
-              marginLeft: Math.max(0, slot.leadingGap - REP_GAP),
-              ...slot.kind === "continue" ? { borderWidth: 1, borderColor: CONTINUE_OUTLINE } : {}
-            },
-            accessibilityElementsHidden: true,
-            testID: slot.kind === "rep" ? `velocity-bar-${i}` : `velocity-slot-${slot.kind}`
-          },
-          i
-        ))
+        className,
+        viewProps: props
       }
     );
   }
   const stripLabel = set ? `${setAccessibilityLabel(set, repCount)}, tap to ${expanded ? "collapse" : "expand"}` : `Velocity chart for set, ${repCount} reps, tap to ${expanded ? "collapse" : "expand"}`;
   const hasInteractiveContainer = onToggle != null;
   const hasInteractiveReps = onRepPress != null && expanded;
-  const 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(
-      View,
+  const framedSlots = set ? buildSlots(set).map((sl) => ({
+    kind: sl.kind,
+    value: sl.velocity,
+    leadingGap: sl.leadingGap
+  })) : doneVelocities.map((v) => ({ kind: "rep", value: v }));
+  const needsBarOverlay = showNumbers || onRepPress != null;
+  const renderFramedBarOverlay = needsBarOverlay ? (repIndex, value) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    showNumbers && /* @__PURE__ */ jsx(
+      Animated.View,
       {
         style: {
-          flex: 1,
-          height: "100%",
-          justifyContent: "flex-end",
-          marginLeft: slot.leadingGap
+          opacity: expandProgress,
+          position: "absolute",
+          top: -13,
+          left: 0,
+          right: 0,
+          alignItems: "center"
         },
+        accessibilityElementsHidden: true,
+        pointerEvents: "none",
         children: /* @__PURE__ */ jsx(
-          View,
+          Text,
           {
-            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)
+            className: "text-text-secondary",
+            style: { fontSize: 8, fontWeight: "600" },
+            testID: `velocity-label-${repIndex}`,
+            children: formatVelocity(value)
           }
         )
-      },
-      i
-    );
-  });
+      }
+    ),
+    onRepPress && expanded && /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
+        onPress: () => onRepPress(repIndex, value),
+        accessibilityRole: "button",
+        accessibilityLabel: `Rep ${repIndex + 1}: ${formatVelocity(value)} meters per second, tap for details`,
+        testID: `velocity-bar-pressable-${repIndex}`
+      }
+    )
+  ] }) : void 0;
   const stripContent = /* @__PURE__ */ jsxs(
     Animated.View,
     {
-      className: [className, expanded ? "bg-surface-raised" : "bg-transparent"].filter(Boolean).join(" "),
-      style: [
-        {
-          height: heightAnim,
-          width: "100%",
-          gap: 2,
-          borderRadius: expanded ? 6 : 2,
-          paddingTop: expanded ? 16 : 0,
-          paddingBottom: expanded ? 24 : 0,
-          // No horizontal inset — the framed chart's bars span full width, matching
-          // the bare spotlight and mini. Numbers/info sit in the vertical padding.
-          paddingHorizontal: 0,
-          paddingVertical: expanded ? void 0 : 8,
-          overflow: expanded ? "visible" : "hidden"
-        }
-      ],
+      className: [className, "bg-surface-raised"].filter(Boolean).join(" "),
+      style: { width: "100%", borderRadius: 6, paddingTop: 16, paddingBottom: showInfo ? 8 : 4 },
       accessibilityRole: hasInteractiveContainer || hasInteractiveReps ? "none" : "button",
       accessibilityLabel: hasInteractiveContainer || hasInteractiveReps ? void 0 : stripLabel,
       testID: "velocity-strip",
       ...props,
       children: [
-        /* @__PURE__ */ jsx(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(
-            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(
-            View,
-            {
-              style: barStyle,
-              testID: `velocity-bar-${i}`,
-              accessibilityRole: "image",
-              accessibilityLabel: `Rep ${i + 1}: ${formatVelocity(v)} meters per second`
-            }
-          );
-          const bar = /* @__PURE__ */ jsxs(
-            View,
-            {
-              style: {
-                flex: 1,
-                height: "100%",
-                justifyContent: "flex-end",
-                position: "relative"
-              },
-              children: [
-                expanded && showNumbers && /* @__PURE__ */ jsx(
-                  Animated.View,
-                  {
-                    style: {
-                      opacity: labelOpacity,
-                      alignItems: "center",
-                      position: "absolute",
-                      top: -13,
-                      left: 0,
-                      right: 0
-                    },
-                    accessibilityElementsHidden: true,
-                    children: /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        className: "text-text-secondary",
-                        style: { fontSize: 8, fontWeight: "600" },
-                        testID: `velocity-label-${i}`,
-                        children: formatVelocity(v)
-                      }
-                    )
-                  }
-                ),
-                barInner
-              ]
-            },
-            i
-          );
-          if (onRepPress && expanded) {
-            return /* @__PURE__ */ jsx(
-              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
-            );
+        /* @__PURE__ */ jsx(
+          SetBarChart,
+          {
+            slots: framedSlots,
+            colorFor: barColorFor,
+            height,
+            scale,
+            scaleMax,
+            expandProgress,
+            renderBarOverlay: renderFramedBarOverlay,
+            targetReps: set ? void 0 : targetReps,
+            barRadius: 2,
+            cornerStyle: "top",
+            hideBaseline: true,
+            testIDPrefix: "velocity"
           }
-          return bar;
-        }) }),
+        ),
         expanded && showInfo && /* @__PURE__ */ jsxs(
           Animated.View,
           {
@@ -1165,10 +1604,8 @@ function VelocityStrip({
               flexDirection: "row",
               justifyContent: "space-between",
               opacity: infoOpacity,
-              position: "absolute",
-              bottom: 4,
-              left: 6,
-              right: 6
+              marginTop: 6,
+              paddingHorizontal: 6
             },
             testID: "velocity-info-row",
             children: [
@@ -1176,10 +1613,7 @@ function VelocityStrip({
                 Text,
                 {
                   className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif"
-                  },
+                  style: { fontSize: 10, fontFamily: "Inter, sans-serif" },
                   children: [
                     meanZone,
                     " ",
@@ -1194,11 +1628,7 @@ function VelocityStrip({
                 Text,
                 {
                   className: "text-text-secondary",
-                  style: {
-                    fontSize: 10,
-                    fontFamily: "Inter, sans-serif",
-                    ...getLossStyle(loss)
-                  },
+                  style: { fontSize: 10, fontFamily: "Inter, sans-serif", ...getLossStyle(loss) },
                   children: [
                     "Loss: ",
                     loss,
@@ -1260,434 +1690,123 @@ function SegmentedStrip({
   segments = 3,
   width,
   className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      className: cn("flex-row", className),
-      style: [
-        { height: 3, gap: 2, opacity: 0.5 },
-        width != null ? { width } : { flex: 1 }
-      ],
-      accessibilityRole: "image",
-      accessibilityLabel: "Planned set, not yet completed",
-      testID: "placeholder-strip",
-      ...props,
-      children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
-        View,
-        {
-          style: {
-            flex: 1,
-            height: 3,
-            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
-            borderRadius: 1,
-            minWidth: 4
-          },
-          accessibilityElementsHidden: true,
-          testID: "placeholder-segment"
-        },
-        i
-      ))
-    }
-  );
-}
-function PlaceholderStrip({
-  mode = "single",
-  segments,
-  ...props
-}) {
-  if (mode === "segmented") {
-    return /* @__PURE__ */ jsx(SegmentedStrip, { segments, ...props });
-  }
-  return /* @__PURE__ */ jsx(SingleStrip, { ...props });
-}
-
-// src/components/icons/SvgIcon.tsx
-function SvgIcon({
-  size = 24,
-  color = "currentColor",
-  strokeWidth = 2,
-  fill = "none",
-  title,
-  children
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
-      children: [
-        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
-        children
-      ]
-    }
-  );
-}
-
-// src/components/icons/icons.tsx
-function StarIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }) });
-}
-function ScaleIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
-    /* @__PURE__ */ jsx("path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 21h10" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 3v18" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" })
-  ] });
-}
-function AlertTriangleIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
-  ] });
-}
-function TrendingDownIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M16 17h6v-6" }),
-    /* @__PURE__ */ jsx("path", { d: "m22 17-8.5-8.5-5 5L2 7" })
-  ] });
-}
-function CircleSlashIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx("path", { d: "m9 15 6-6" })
-  ] });
-}
-function AwardIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "6" })
-  ] });
-}
-function InfoIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
-  ] });
-}
-
-// src/theme/tokens/semantic.ts
-var semanticColorsLight = {
-  // Brand colors (brand-*)
-  "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)
-  // Deepest pressed pit (TD-surface-tokens, S-3) — light-mode counterpart of
-  // the dark ramp's `inset` plane; a placeholder pairing, not part of the
-  // dark-ramp investigation (surface.contract.test.ts is dark-mode only).
-  "surface-inset": primitiveColors.neutral[300],
-  // Background colors (background-*)
-  "background-base": "#EBEBEB",
-  "background-default": primitiveColors.white,
-  "background-subtle": primitiveColors.neutral[50],
-  // Frame/bezel chrome (TD-surface-tokens, S-3) — top bar + side nav shell,
-  // one step below `background-base` (darker still than `surface-inset`
-  // above, mirroring the dark-mode ordering). Placeholder pairing for light
-  // mode (see dark-mode note on `surface-inset` above).
-  "background-frame": primitiveColors.neutral[400],
-  // 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
-  // Alpha hairline separators (surface-independent — composite toward black on
-  // light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
-  "hairline-subtle": "rgba(0, 0, 0, 0.06)",
-  "hairline-default": "rgba(0, 0, 0, 0.09)",
-  "hairline-strong": "rgba(0, 0, 0, 0.14)",
-  // 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 — warm-tapered DERIVED ramp (TD-surface-tokens,
-  // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
-  // `surfaceRampDark` in primitives.ts for the full derivation note. `surface-overlay`
-  // and `surface-elevated` are distinct (were both #191919 pre-S-1); `surface-input`
-  // tracks one plane above `surface-base`, same relative position as before the remap.
-  // `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
-  // so it takes the ramp's `background` (shell/frame) role, NOT `inset`. The ramp's
-  // deepest `inset` plane is now promoted to `surface-inset` below (S-3) — still no
-  // `SurfaceLevel` member for it (follow-up, alongside the elevation.ts -1/-2 pressed
-  // levels — parallel workstream, not this branch).
-  "surface-base": surfaceRampDark.base,
-  // main surface        (#252321, L*13.5)
-  "surface-elevated": surfaceRampDark.elevated,
-  // elevated surface     (#2C2A28, L*17   — nav/rail)
-  "surface-raised": surfaceRampDark.raised,
-  // raised surface       (#31302F, L*20   — cards)
-  "surface-overlay": surfaceRampDark.overlay,
-  // overlay surface      (#373635, L*22.5 — hero/popover)
-  "surface-input": surfaceRampDark.elevated,
-  // input surface        (#2C2A28 — one plane above base)
-  "surface-inset": surfaceRampDark.inset,
-  // deepest pressed pit  (#13100D, L*4.5  — sub-shell well)
-  // Background colors — same ramp, the frame/shell end of it.
-  "background-base": surfaceRampDark.background,
-  // shell / frame        (#1C1916, L*9 — Surface level="background")
-  "background-default": surfaceRampDark.base,
-  // main background      (#252321, L*13.5 — matches surface-base)
-  "background-subtle": surfaceRampDark.elevated,
-  // subtle background    (#2C2A28, L*17 — matches surface-elevated)
-  // Frame/bezel chrome (S-3) — the top bar + side nav shell; one step BELOW
-  // `background-base`, darker even than `surface-inset` — it exits the content
-  // ramp entirely rather than sitting in it. See `backgroundFrameDark` in
-  // primitives.ts.
-  "background-frame": backgroundFrameDark,
-  // frame / bezel        (#100D0A, L*3.79)
-  // Border colors — `border-subtle` (#1C1C1C) previously collided with
-  // `surface-raised` (also #1C1C1C, an invisible border on raised cards). The
-  // re-spaced ramp above moved `surface-raised` to #2D2C2B, so this value is now
-  // distinct from every surface hex without needing to change it — see
-  // `surface.contract.test.ts` R2/R4.
-  "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],
-  // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
-  // normalizing: composites toward white by ~the same amount on ANY plane, so
-  // one family works at every elevation instead of per-surface border tokens.
-  // Shadows are demoted to floating-overlay use only (not shipped as a fill
-  // separator here — see elevation.ts, follow-up S-4).
-  "hairline-subtle": "rgba(255, 255, 255, 0.06)",
-  "hairline-default": "rgba(255, 255, 255, 0.09)",
-  "hairline-strong": "rgba(255, 255, 255, 0.14)",
-  // 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;
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      className: cn("flex-row", className),
+      style: [
+        { height: 3, gap: 2, opacity: 0.5 },
+        width != null ? { width } : { flex: 1 }
+      ],
+      accessibilityRole: "image",
+      accessibilityLabel: "Planned set, not yet completed",
+      testID: "placeholder-strip",
+      ...props,
+      children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            flex: 1,
+            height: 3,
+            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+            borderRadius: 1,
+            minWidth: 4
+          },
+          accessibilityElementsHidden: true,
+          testID: "placeholder-segment"
+        },
+        i
+      ))
+    }
+  );
+}
+function PlaceholderStrip({
+  mode = "single",
+  segments,
+  ...props
+}) {
+  if (mode === "segmented") {
+    return /* @__PURE__ */ jsx(SegmentedStrip, { segments, ...props });
+  }
+  return /* @__PURE__ */ jsx(SingleStrip, { ...props });
+}
+
+// src/components/icons/SvgIcon.tsx
+function SvgIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  fill = "none",
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        children
+      ]
+    }
+  );
 }
 
-// src/components/custom/Workout/BaseBadge.tsx
+// 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 t = getSemanticColors("dark");
 var baseBadgeSizeConfig = {
   sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
@@ -1695,7 +1814,7 @@ var baseBadgeSizeConfig = {
   lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 }
 };
 var variantColors = {
-  plain: { backgroundColor: t["surface-raised"], borderColor: "#1F1F1F" },
+  plain: { backgroundColor: t["surface-raised"], borderColor: t["hairline-default"] },
   pr: {
     backgroundColor: "rgba(255, 121, 0, 0.12)",
     borderColor: "rgba(255, 121, 0, 0.3)"
@@ -1902,6 +2021,7 @@ function RowStrip({ set }) {
         showInfo: false,
         height: 24,
         scale: "fixed",
+        liveRepIndex: set.velocities.length - 1,
         set: { type: "straight", velocities: set.velocities, planned: set.target.reps },
         zones
       }
@@ -1911,7 +2031,9 @@ function RowStrip({ set }) {
   return /* @__PURE__ */ jsx(
     VelocityStrip,
     {
-      variant: "mini",
+      variant: "compact",
+      height: 8,
+      hideBaseline: true,
       set: { type: "straight", velocities, planned: plannedReps(set) },
       zones
     }
@@ -2046,321 +2168,10 @@ function SetsRepsLoad({
         /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${AT} ` }),
         /* @__PURE__ */ jsx(MetricCell, { color: value, fontSize, children: load }),
         /* @__PURE__ */ jsx(MetricCell, { color: sep, fontSize, children: ` ${unit}` })
-      ]
-    }
-  );
-}
-function hexToRgb(hex) {
-  const cleaned = hex.replace("#", "");
-  let r, g, b;
-  if (cleaned.length === 3) {
-    r = parseInt(cleaned[0] + cleaned[0], 16);
-    g = parseInt(cleaned[1] + cleaned[1], 16);
-    b = parseInt(cleaned[2] + cleaned[2], 16);
-  } else if (cleaned.length === 6) {
-    r = parseInt(cleaned.slice(0, 2), 16);
-    g = parseInt(cleaned.slice(2, 4), 16);
-    b = parseInt(cleaned.slice(4, 6), 16);
-  } else {
-    return null;
-  }
-  return { r, g, b };
-}
-function rgbToHsv(r, g, b) {
-  const rNorm = r / 255;
-  const gNorm = g / 255;
-  const bNorm = b / 255;
-  const max = Math.max(rNorm, gNorm, bNorm);
-  const min = Math.min(rNorm, gNorm, bNorm);
-  const delta = max - min;
-  const v = max;
-  const s = max === 0 ? 0 : delta / max;
-  let h = 0;
-  if (delta !== 0) {
-    if (max === rNorm) {
-      h = 60 * ((gNorm - bNorm) / delta % 6);
-    } else if (max === gNorm) {
-      h = 60 * ((bNorm - rNorm) / delta + 2);
-    } else {
-      h = 60 * ((rNorm - gNorm) / delta + 4);
-    }
-  }
-  if (h < 0) h += 360;
-  return { h, s, v };
-}
-function hsvToRgb(h, s, v) {
-  const c = v * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = v - c;
-  let rPrime, gPrime, bPrime;
-  if (h >= 0 && h < 60) {
-    rPrime = c;
-    gPrime = x;
-    bPrime = 0;
-  } else if (h >= 60 && h < 120) {
-    rPrime = x;
-    gPrime = c;
-    bPrime = 0;
-  } else if (h >= 120 && h < 180) {
-    rPrime = 0;
-    gPrime = c;
-    bPrime = x;
-  } else if (h >= 180 && h < 240) {
-    rPrime = 0;
-    gPrime = x;
-    bPrime = c;
-  } else if (h >= 240 && h < 300) {
-    rPrime = x;
-    gPrime = 0;
-    bPrime = c;
-  } else {
-    rPrime = c;
-    gPrime = 0;
-    bPrime = x;
-  }
-  return {
-    r: Math.round((rPrime + m) * 255),
-    g: Math.round((gPrime + m) * 255),
-    b: Math.round((bPrime + m) * 255)
-  };
-}
-function rgbToHex(r, g, b) {
-  const toHex = (n) => {
-    const clamped = Math.max(0, Math.min(255, Math.round(n)));
-    return clamped.toString(16).padStart(2, "0");
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function lighten(hex, amount = 0.1) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const newV = Math.min(1, hsv.v + amount);
-  const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
-  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
-}
-var shadowColors = {
-  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
-  charcoal: {
-    dark: "rgba(0, 0, 0, 0.5)",
-    light: "rgba(255, 255, 255, 0.12)",
-    // brighter for crisp rim light
-    darker: "rgba(0, 0, 0, 0.6)"
-  },
-  // For neutral dark surfaces (~#1F2937)
-  neutralDark: {
-    dark: "rgba(0, 0, 0, 0.4)",
-    light: "rgba(255, 255, 255, 0.08)",
-    darker: "rgba(0, 0, 0, 0.5)"
-  },
-  // For light surfaces (white/light gray backgrounds)
-  neutralLight: {
-    dark: "rgba(0, 0, 0, 0.15)",
-    // Visible dark shadow for depth on light backgrounds
-    light: "rgba(255, 255, 255, 1)",
-    // Bright highlight for raised effect (visible on light gray)
-    darker: "rgba(0, 0, 0, 0.2)"
-    // Deeper shadow for pressed states
-  }
-};
-var intensityConfig = {
-  subtle: { offset: 1, blur: 2 },
-  // very light, barely visible
-  medium: { offset: 2, blur: 4 },
-  // noticeable but restrained
-  strong: { offset: 2, blur: 5 }
-  // slightly deeper blur, same offset as medium
-};
-function createRaisedShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const rimBlur = 1;
-  return Platform.select({
-    web: {
-      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      // React Native shadow approximation (limited compared to web)
-      shadowColor: "#000",
-      shadowOffset: { width: offset, height: offset },
-      shadowOpacity: 0.3,
-      shadowRadius: blur / 2,
-      elevation: offset
-    }
-  });
-}
-function createPressedShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const rimOffset = 1;
-  const rimBlur = 1;
-  return Platform.select({
-    web: {
-      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      // React Native doesn't support inset shadows, approximate with darker bg
-      shadowOpacity: 0,
-      elevation: 0
-    }
-  });
-}
-function createFlatShadow() {
-  return Platform.select({
-    web: {
-      boxShadow: "none"
-    },
-    default: {
-      shadowOpacity: 0,
-      elevation: 0
-    }
-  });
-}
-function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const hoverOffset = Math.max(1, Math.round(offset / 2));
-  const hoverBlur = Math.max(1, Math.round(blur / 2));
-  const rimBlur = 1;
-  return Platform.select({
-    web: {
-      // Keep same offsets as normal state for rim to prevent "shrinking" effect
-      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      shadowColor: "#000",
-      shadowOffset: { width: hoverOffset, height: hoverOffset },
-      shadowOpacity: 0.2,
-      shadowRadius: hoverBlur / 2,
-      elevation: hoverOffset
-    }
-  });
-}
-function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const hoverOffset = Math.max(1, Math.round(offset / 2));
-  const hoverBlur = Math.max(1, Math.round(blur / 2));
-  const rimBlur = 1;
-  return Platform.select({
-    web: {
-      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
-      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      shadowOpacity: 0,
-      elevation: 0
-    }
-  });
-}
-({
-  // Charcoal surface shadows (for dark toolbars, cards)
-  charcoal: {
-    raised: {
-      subtle: createRaisedShadow("charcoal", "subtle"),
-      medium: createRaisedShadow("charcoal", "medium"),
-      strong: createRaisedShadow("charcoal", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("charcoal", "subtle"),
-      medium: createRaisedHoverShadow("charcoal", "medium"),
-      strong: createRaisedHoverShadow("charcoal", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("charcoal", "subtle"),
-      medium: createPressedShadow("charcoal", "medium"),
-      strong: createPressedShadow("charcoal", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("charcoal", "subtle"),
-      medium: createPressedHoverShadow("charcoal", "medium"),
-      strong: createPressedHoverShadow("charcoal", "strong")
-    },
-    flat: createFlatShadow()
-  },
-  // Neutral dark surface shadows
-  neutralDark: {
-    raised: {
-      subtle: createRaisedShadow("neutralDark", "subtle"),
-      medium: createRaisedShadow("neutralDark", "medium"),
-      strong: createRaisedShadow("neutralDark", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
-      medium: createRaisedHoverShadow("neutralDark", "medium"),
-      strong: createRaisedHoverShadow("neutralDark", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("neutralDark", "subtle"),
-      medium: createPressedShadow("neutralDark", "medium"),
-      strong: createPressedShadow("neutralDark", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("neutralDark", "subtle"),
-      medium: createPressedHoverShadow("neutralDark", "medium"),
-      strong: createPressedHoverShadow("neutralDark", "strong")
-    },
-    flat: createFlatShadow()
-  },
-  // Neutral light surface shadows
-  neutralLight: {
-    raised: {
-      subtle: createRaisedShadow("neutralLight", "subtle"),
-      medium: createRaisedShadow("neutralLight", "medium"),
-      strong: createRaisedShadow("neutralLight", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
-      medium: createRaisedHoverShadow("neutralLight", "medium"),
-      strong: createRaisedHoverShadow("neutralLight", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("neutralLight", "subtle"),
-      medium: createPressedShadow("neutralLight", "medium"),
-      strong: createPressedShadow("neutralLight", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("neutralLight", "subtle"),
-      medium: createPressedHoverShadow("neutralLight", "medium"),
-      strong: createPressedHoverShadow("neutralLight", "strong")
-    },
-    flat: createFlatShadow()
-  }
-});
-
-// src/utils/colors.ts
-function alpha(color, opacity) {
-  const clampedOpacity = Math.max(0, Math.min(1, opacity));
-  if (color.startsWith("#")) {
-    const hex = color.slice(1);
-    let r, g, b;
-    if (hex.length === 3) {
-      r = parseInt(hex[0] + hex[0], 16);
-      g = parseInt(hex[1] + hex[1], 16);
-      b = parseInt(hex[2] + hex[2], 16);
-    } else if (hex.length === 6) {
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-    } else {
-      return color;
+      ]
     }
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
-  if (rgbaMatch) {
-    const [, r, g, b] = rgbaMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  return color;
+  );
 }
-
-// src/components/custom/Workout/TempoDisplay.tsx
 var t3 = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
@@ -2442,7 +2253,7 @@ function LiveTempoCell({
     alignItems: "center",
     justifyContent: "center"
   };
-  const num = (c, text) => /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO, fontSize, color: c, fontWeight: "700" }, children: text });
+  const num = (c2, text) => /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO, fontSize, color: c2, fontWeight: "700" }, children: text });
   if (status === "upcoming") {
     const targetText = targetMs != null ? (targetMs / 1e3).toFixed(1) : String(value);
     return /* @__PURE__ */ jsx(View, { style: wrap, children: num(color, targetText) });
@@ -2744,6 +2555,243 @@ function ExerciseHeading({
     )
   ] });
 }
+var PULSE_HALF_MS = 950;
+var PULSE_MIN_OPACITY = 0.45;
+var SEGMENTED_BAR_GAP = 5;
+function usePulse(active) {
+  const [value] = useState(() => new Animated.Value(0));
+  useEffect(() => {
+    if (!active) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(value, {
+          toValue: 1,
+          duration: PULSE_HALF_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: false
+        }),
+        Animated.timing(value, {
+          toValue: 0,
+          duration: PULSE_HALF_MS,
+          easing: Easing.inOut(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(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(
+        View,
+        {
+          style: {
+            flex: seg.weight ?? 1,
+            minWidth: 0,
+            height: "100%",
+            marginLeft: seg.leadingGap,
+            borderRadius: radius,
+            overflow: "hidden"
+          },
+          children: seg.pulse ? /* @__PURE__ */ jsx(
+            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(View, { style: fillStyle, accessibilityElementsHidden: true, testID })
+        },
+        i
+      );
+    }),
+    marker ? /* @__PURE__ */ jsx(
+      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 = greyRamp[900];
+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(
+    View,
+    {
+      className,
+      style: { flexDirection: "row", width: "100%", height, gap: SET_STRIP_GAP },
+      accessibilityRole: "image",
+      accessibilityLabel: describeSets(sets),
+      testID: "set-strip",
+      ...props,
+      children: sets.map((set, i) => /* @__PURE__ */ jsx(SetBar, { set, height }, i))
+    }
+  );
+}
 
 // src/components/custom/Workout/ExerciseCardHeading.tsx
 function ExerciseCardHeading({
@@ -2886,7 +2934,9 @@ function CollapsedCard({
                 {
                   velocities,
                   zones: velocityZones,
-                  variant: "mini",
+                  variant: "compact",
+                  height: 8,
+                  hideBaseline: true,
                   testID: `exercise-card-velocity-strip-${i}`
                 },
                 i
@@ -2906,7 +2956,7 @@ function CollapsedCard({
   );
 }
 var DARK2 = getSemanticColors("dark");
-var BODY_DIVIDER = DARK2["border-subtle"];
+var BODY_DIVIDER = DARK2["hairline-subtle"];
 function deriveHeaderSetStates(sets) {
   return sets.map((set) => {
     switch (set.state) {
@@ -2940,7 +2990,7 @@ function ExpandedCard({
   return /* @__PURE__ */ jsxs(
     View,
     {
-      className: "bg-surface-elevated border-border",
+      className: "bg-surface-elevated border-hairline",
       style: {
         borderWidth: 1,
         ...borderRadius,
@@ -3073,7 +3123,7 @@ function resolveColor(token, mode = "dark") {
 
 // 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 INPUT_CLASSNAME = "bg-surface-raised border-hairline-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
   fontWeight: "600",
@@ -3106,7 +3156,7 @@ function InputBar({
       style: {
         width: "100%",
         borderTopWidth: 1,
-        borderTopColor: resolveColor("border-default"),
+        borderTopColor: resolveColor("hairline-default"),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,
@@ -3321,7 +3371,7 @@ function CircularProgress({
                   cy: center,
                   r: radius,
                   fill: "none",
-                  stroke: "var(--color-border-default)",
+                  stroke: "var(--color-hairline-default)",
                   strokeWidth
                 }
               ),
@@ -3576,7 +3626,7 @@ function RestTimer({
       style: {
         width: "100%",
         borderTopWidth: 1,
-        borderTopColor: resolveColor("border-default"),
+        borderTopColor: resolveColor("hairline-default"),
         paddingVertical: 12,
         paddingHorizontal: 16
       },
@@ -3645,7 +3695,7 @@ function RestTimer({
         /* @__PURE__ */ jsx(
           View,
           {
-            className: "bg-border",
+            className: "bg-hairline",
             style: {
               height: 3,
               borderRadius: 2,
@@ -3865,7 +3915,7 @@ function WorkoutHeader({
     /* @__PURE__ */ jsx(
       View,
       {
-        className: "bg-border",
+        className: "bg-hairline",
         style: { height: 4, borderRadius: 2 },
         testID: "active-workout-page-progress-track",
         children: /* @__PURE__ */ jsx(
@@ -3890,7 +3940,7 @@ function ExerciseList({ groups, focusedId, onToggle }) {
       return /* @__PURE__ */ jsx(
         View,
         {
-          className: "bg-surface-elevated border-border",
+          className: "bg-surface-elevated border-hairline",
           style: {
             borderWidth: 1,
             borderRadius: 12
@@ -3972,7 +4022,7 @@ function ActiveWorkoutPage({
         (showRest || showInput) && /* @__PURE__ */ jsx(
           View,
           {
-            style: { borderTopWidth: 1, borderTopColor: resolveColor("border-default") },
+            style: { borderTopWidth: 1, borderTopColor: resolveColor("hairline-default") },
             testID: "active-workout-page-bottom-bar",
             children: showRest && rest != null ? /* @__PURE__ */ jsx(
               RestTimer,
@@ -4036,7 +4086,13 @@ var elevationSystem = {
   // Level 1: Subtle elevation (outline cards, subtle containers)
   [1]: {
     name: "subtle",
-    colorAdjustment: 0.01,
+    // The whole ladder was re-spaced in TD-07.16. It used to run
+    // 0.01/0.02/0.04/0.06/0.08, where the first step was ~2 RGB values — under
+    // the perceptual floor, so level 1 existed in the type system and nowhere on
+    // screen. With drop-shadow now gated off below FLOATING_ELEVATION_MIN, TONE
+    // is the only thing separating 0-3, so every step has to actually land.
+    // Even 0.025 spacing, verified in elevation.test.ts as ΔL* > 1 per step.
+    colorAdjustment: 0.025,
     shadowIntensity: "subtle",
     shadowStyle: "raised",
     description: "Subtle elevation (outline cards, subtle containers)"
@@ -4044,7 +4100,7 @@ var elevationSystem = {
   // Level 2: Standard elevation (default cards, buttons)
   [2]: {
     name: "standard",
-    colorAdjustment: 0.02,
+    colorAdjustment: 0.05,
     shadowIntensity: "medium",
     shadowStyle: "raised",
     description: "Standard elevation (default cards, raised buttons)"
@@ -4052,7 +4108,7 @@ var elevationSystem = {
   // Level 3: Prominent elevation (important cards, modals)
   [3]: {
     name: "prominent",
-    colorAdjustment: 0.04,
+    colorAdjustment: 0.075,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "Prominent elevation (important cards, modals, dropdowns)"
@@ -4060,7 +4116,7 @@ var elevationSystem = {
   // Level 4: High elevation (overlays, popovers)
   [4]: {
     name: "high",
-    colorAdjustment: 0.06,
+    colorAdjustment: 0.1,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "High elevation (overlays, popovers, tooltips)"
@@ -4068,7 +4124,7 @@ var elevationSystem = {
   // Level 5: Floating (toasts, floating action buttons)
   [5]: {
     name: "floating",
-    colorAdjustment: 0.08,
+    colorAdjustment: 0.13,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "Floating elevation (toasts, floating action buttons, highest z-index)"
@@ -4184,12 +4240,12 @@ function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
   const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
   const rimLightColor = calculateRimLightColor(baseColor, level);
   const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
-  const intensityConfig2 = {
+  const intensityConfig = {
     subtle: { offset: 1, blur: 2 },
     medium: { offset: 2, blur: 4 },
     strong: { offset: 2, blur: 5 }
   };
-  const { offset, blur } = intensityConfig2[config.shadowIntensity];
+  const { offset, blur } = intensityConfig[config.shadowIntensity];
   const rimConfig = getRimLightConfig();
   if (config.shadowStyle === "pressed") {
     if (isHovered) {
@@ -4245,12 +4301,13 @@ function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
     });
   }
 }
+var FLOATING_ELEVATION_MIN = 4;
 function getElevationShadow(baseColor, level, theme, isHovered = false) {
   const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
   if (elevationShadowCache.has(cacheKey)) {
     return elevationShadowCache.get(cacheKey);
   }
-  const result = calculateElevationShadow(baseColor, level, theme, isHovered);
+  const result = level > 0 && level < FLOATING_ELEVATION_MIN ? {} : calculateElevationShadow(baseColor, level, theme, isHovered);
   if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
     const firstKey = elevationShadowCache.keys().next().value;
     elevationShadowCache.delete(firstKey);
@@ -4336,12 +4393,12 @@ function useTheme() {
 var variantStyles = {
   elevated: "",
   // Will be set dynamically via elevation system
-  outline: "border-2 border-border-strong",
+  outline: "border-2 border-hairline-strong",
   // Thicker border with stronger contrast
   filled: "",
   // Will be set dynamically via elevation system
-  accent: "border border-border",
-  subtle: "border border-border-subtle"
+  accent: "border border-hairline",
+  subtle: "border border-hairline-subtle"
 };
 function Card({
   variant = "elevated",
@@ -4461,7 +4518,7 @@ var solidVariantColors = {
   success: t5["status-success"],
   warning: t5["status-warning"],
   error: t5["status-error"],
-  neutral: "#6B7280"
+  neutral: greyRamp[500]
 };
 var ringVariantStyles = {
   "on-track": {
@@ -4499,10 +4556,10 @@ var iconColors = {
   success: "#0A5C52",
   warning: "#6B4000",
   error: "#5C1A1A",
-  neutral: "#D1D5DB",
+  neutral: greyRamp[200],
   "on-track": t5["status-success"],
   deviation: t5["status-warning"],
-  future: "#6B7280"
+  future: greyRamp[500]
 };
 var sizeDimensions = {
   sm: { size: 8, showIcon: false },
@@ -4571,7 +4628,7 @@ function StatusDot({
           /* @__PURE__ */ jsx(
             Text,
             {
-              style: { fontSize: 12, lineHeight: 16, color: "#9CA3AF" },
+              style: { fontSize: 12, lineHeight: 16, color: greyRamp[400] },
               accessibilityElementsHidden: true,
               children: label
             }
@@ -5044,11 +5101,11 @@ function ChartLine({
   dashed,
   testID
 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: coords.map((c, i) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: coords.map((c2, i) => {
     if (i === 0) return null;
     const prev = coords[i - 1];
-    const dx = c.x - prev.x;
-    const dy = c.y - prev.y;
+    const dx = c2.x - prev.x;
+    const dy = c2.y - prev.y;
     const length = Math.sqrt(dx * dx + dy * dy);
     const angle = Math.atan2(dy, dx) * (180 / Math.PI);
     return /* @__PURE__ */ jsx(
@@ -5251,21 +5308,21 @@ function StrengthTrendChart({
                   }
                 ),
                 geometry.actual.map(
-                  (c) => c.point.isPR ? /* @__PURE__ */ jsx(
+                  (c2) => c2.point.isPR ? /* @__PURE__ */ jsx(
                     Text,
                     {
                       accessibilityElementsHidden: true,
                       testID: "strength-trend-chart-pr-star",
                       style: {
                         position: "absolute",
-                        left: c.x - 7,
-                        top: c.y - 20,
+                        left: c2.x - 7,
+                        top: c2.y - 20,
                         fontSize: 12,
                         color: STATUS_WARNING2
                       },
                       children: "\u2605"
                     },
-                    `star-${c.index}`
+                    `star-${c2.index}`
                   ) : null
                 )
               ]
@@ -5276,29 +5333,29 @@ function StrengthTrendChart({
             {
               style: { position: "absolute", top: 0, left: 0, width, height },
               testID: "strength-trend-chart-points",
-              children: geometry.actual.map((c) => {
-                const label = c.point.sessionLabel ?? c.point.date;
+              children: geometry.actual.map((c2) => {
+                const label = c2.point.sessionLabel ?? c2.point.date;
                 return /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     testID: "strength-trend-chart-point",
                     accessibilityRole: "button",
-                    accessibilityLabel: `${label}: ${formatValue(c.point.e1rm)} ${unit}${c.point.isPR ? ", personal record" : ""}`,
+                    accessibilityLabel: `${label}: ${formatValue(c2.point.e1rm)} ${unit}${c2.point.isPR ? ", personal record" : ""}`,
                     onPress: () => {
-                      setSelected(c.index);
-                      onPointPress?.(c.point);
+                      setSelected(c2.index);
+                      onPointPress?.(c2.point);
                     },
                     style: {
                       position: "absolute",
-                      left: c.x - 4,
-                      top: c.y - 4,
+                      left: c2.x - 4,
+                      top: c2.y - 4,
                       width: 8,
                       height: 8,
                       borderRadius: 1,
                       backgroundColor: BRAND_PRIMARY6
                     }
                   },
-                  `point-${c.index}`
+                  `point-${c2.index}`
                 );
               })
             }
@@ -5308,7 +5365,7 @@ function StrengthTrendChart({
             {
               testID: "strength-trend-chart-tooltip",
               accessibilityElementsHidden: true,
-              className: "bg-surface-elevated border-border-strong",
+              className: "bg-surface-elevated border-hairline-strong",
               style: {
                 position: "absolute",
                 left: Math.max(
@@ -5879,7 +5936,7 @@ function TabBar({ active, onSelect }) {
       className: "flex-row",
       style: {
         borderBottomWidth: 1,
-        borderBottomColor: resolveColor("border-default")
+        borderBottomColor: resolveColor("hairline-default")
       },
       accessibilityRole: "tablist",
       testID: "exercise-detail-page-tabs",
@@ -5930,7 +5987,7 @@ function StatStrip({ stats, unit }) {
     return /* @__PURE__ */ jsxs(
       View,
       {
-        className: "bg-surface-elevated border-border",
+        className: "bg-surface-elevated border-hairline",
         style: {
           flex: 1,
           padding: 12,
@@ -5980,7 +6037,7 @@ function SectionCard({
   return /* @__PURE__ */ jsxs(
     View,
     {
-      className: "bg-surface-elevated border-border",
+      className: "bg-surface-elevated border-hairline",
       style: {
         borderWidth: 1,
         borderRadius: 12,
@@ -6055,7 +6112,16 @@ function VbtBreakdown({
               children: set.label
             }
           ),
-          /* @__PURE__ */ jsx(View, { className: "flex-1", style: { height: 8, justifyContent: "center" }, children: /* @__PURE__ */ jsx(VelocityStrip, { velocities: set.velocities, zones, variant: "mini" }) }),
+          /* @__PURE__ */ jsx(View, { className: "flex-1", style: { height: 8, justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+            VelocityStrip,
+            {
+              velocities: set.velocities,
+              zones,
+              variant: "compact",
+              height: 8,
+              hideBaseline: true
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             Text,
             {
@@ -6082,7 +6148,7 @@ function VbtSummaryRow({ summary }) {
   return /* @__PURE__ */ jsx(View, { className: "flex-row", style: { gap: 8 }, testID: "exercise-detail-page-vbt-summary", children: cells.map((cell) => /* @__PURE__ */ jsxs(
     View,
     {
-      className: "bg-surface-elevated border-border",
+      className: "bg-surface-elevated border-hairline",
       style: {
         flex: 1,
         padding: 12,
@@ -6474,7 +6540,7 @@ function Indicator({
 // src/components/ui/badge/Badge.tsx
 var variantColorStyles = {
   solid: {
-    default: "bg-border-strong text-text-inverse",
+    default: "bg-hairline-strong text-text-inverse",
     primary: "bg-brand-primary text-text-inverse",
     secondary: "bg-brand-secondary text-text-inverse",
     success: "bg-status-success text-text-inverse",
@@ -6492,7 +6558,7 @@ var variantColorStyles = {
     info: "bg-status-info-subtle text-status-info"
   },
   outline: {
-    default: "border border-border-strong text-text-secondary",
+    default: "border border-hairline-strong text-text-secondary",
     primary: "border border-brand-primary text-brand-primary",
     secondary: "border border-brand-secondary text-brand-secondary",
     success: "border border-status-success text-status-success",
@@ -6540,6 +6606,7 @@ function Badge({
     }
   );
 }
+var HAIRLINE_DEFAULT = getSemanticColors("dark")["hairline-default"];
 var t8 = getSemanticColors("dark");
 var statusBgColors = {
   completed: "rgba(46,213,115,0.15)",
@@ -6553,7 +6620,7 @@ var statusBorderStyles = {
   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" },
+  upcoming: { borderWidth: 1, borderColor: HAIRLINE_DEFAULT },
   missed: { borderWidth: 1, borderColor: "rgba(209,67,67,0.25)" },
   deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
@@ -6561,7 +6628,7 @@ var textColors = {
   completed: t8["status-success"],
   current: t8["brand-primary"],
   next: t8["brand-primary"],
-  upcoming: "#6B7280",
+  upcoming: greyRamp[500],
   missed: "rgba(209,67,67,0.7)",
   deload: WORKOUT_PILL_DELOAD
 };
@@ -6972,10 +7039,11 @@ function WeekRow({
 }
 
 // src/components/custom/Workout/MesoCard.tsx
+var HAIRLINE_DEFAULT2 = getSemanticColors("dark")["hairline-default"];
 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 BORDER_DEFAULT = HAIRLINE_DEFAULT2;
 var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
@@ -7130,7 +7198,7 @@ function MesoCard({
 }
 var t10 = getSemanticColors("dark");
 var dotColorMap = {
-  untrained: "#2C2C2C",
+  untrained: greyRamp[900],
   behind: t10["brand-secondary"],
   ontrack: t10["status-success"],
   target: t10["brand-primary"],
@@ -7143,12 +7211,12 @@ function MuscleGroupChip({
   className,
   ...props
 }) {
-  const dotColor = volumeStatus ? dotColorMap[volumeStatus] : "#2C2C2C";
+  const dotColor = volumeStatus ? dotColorMap[volumeStatus] : greyRamp[900];
   const statusLabel = volumeStatus ?? "no status";
   const content = /* @__PURE__ */ jsxs(
     View,
     {
-      className: ["bg-surface-raised border-border", className].filter(Boolean).join(" "),
+      className: ["bg-surface-raised border-hairline", className].filter(Boolean).join(" "),
       style: {
         flexDirection: "row",
         alignItems: "center",
@@ -7208,11 +7276,12 @@ function MuscleGroupChip({
 }
 
 // src/components/custom/Workout/WorkoutCard.tsx
+var HAIRLINE_DEFAULT3 = getSemanticColors("dark")["hairline-default"];
 var t11 = getSemanticColors("dark");
 var COLORS = {
   statusSuccess: t11["status-success"],
   brandPrimary: t11["brand-primary"],
-  borderDefault: "#1F1F1F",
+  borderDefault: HAIRLINE_DEFAULT3,
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
 var statusBorderColors = {
@@ -7591,7 +7660,7 @@ function ProgramPlanningPage({
         /* @__PURE__ */ jsxs(
           View,
           {
-            className: "bg-surface-elevated border-border",
+            className: "bg-surface-elevated border-hairline",
             style: {
               borderWidth: 1,
               borderRadius: 12,